Séparation du style en deux fichiers pour faciliter la lecture et les mises à jour

app/App_FrontController.php

@@ -33,7 +33,8 @@ class App_FrontController extends FrontController {
 	}
 	
 	private function loadStylesAndScripts () {
-		View::prependStyle (Url::display ('/theme/base.css'));
+		View::prependStyle (Url::display ('/theme/global.css'));
+		View::prependStyle (Url::display ('/theme/freshrss.css'));
 		View::appendScript ('https://login.persona.org/include.js');
 		View::appendScript (Url::display ('/scripts/jquery.js'));
 		View::appendScript (Url::display ('/scripts/notification.js'));

app/controllers/feedController.php

@@ -132,7 +132,7 @@ class feedController extends ActionController {
 		// notif
 		$notif = array (
 			'type' => 'good',
-			'content' => '10 flux ont été mis à jour'
+			'content' => $i . ' flux ont été mis à jour'
 		);
 		Session::_param ('notification', $notif);
 

public/theme/base.css

@@ -1,868 +0,0 @@
-/* FONTS */
-@font-face {
-	font-family: 'OpenSans';
-	src: local('fonts/openSans.woff') format('woff');
-}
-
-
-* {
-	margin: 0;
-	padding: 0;
-}
-html, body {
-	height: 100%;
-	font-size: 95%;
-	font-family: "Cantarell", "Helvetica", "Arial", "sans-serif";
-}
-
-/* LIENS */
-a {
-	color: #0062BE;
-	text-decoration: none;
-}
-	a:hover {
-		text-decoration: underline;
-	}
-
-/* LISTES */
-ul, ol, dl {
-	margin: 10px 0 10px 30px;
-	line-height: 190%;
-}
-	dd {
-		margin: 0 0 10px 30px;
-	}
-
-/* TITRES */
-h1, h2, h3 {
-	min-height: 40px;
-	margin: 15px 0 5px;
-	line-height: 40px;
-}
-
-/* IMG */
-img {
-	max-width: 100%;
-	vertical-align: middle;
-}
-	a img {
-		border: none;
-	}
-
-/* FORMULAIRES */
-legend {
-	display: block;
-	width: 100%;
-	margin: 20px 0 5px;
-	padding: 5px 0;
-	border-bottom: 1px solid #ddd;
-	font-size: 150%;
-	clear: both;
-}
-label {
-	display: block;
-	min-height: 25px;
-	padding: 5px 0;
-	font-size: 14px;
-	line-height: 25px;
-	cursor: pointer;
-}
-input, select, textarea {
-	display: inline-block;
-	min-height: 25px;
-	padding: 5px;
-	background: #fdfdfd;
-	border: 1px solid #bbb;
-	border-radius: 3px;
-	color: #666;
-	line-height: 25px;
-	vertical-align: middle;
-	box-shadow: 0 2px 2px #eee inset;
-}
-	input[type="radio"],
-	input[type="checkbox"] {
-		width: 15px;
-		min-height: 15px;
-	}
-	input:focus, select:focus, textarea:focus {
-		color: #0062BE;
-		border-color: #33BBFF;
-		box-shadow: 0 2px 2px #DDDDFF inset;
-	}
-
-.form-group {
-	margin: 0;
-	clear: both;
-}
-	.form-group.form-actions {
-		min-width: 250px;
-		padding: 5px 0;
-		background: #f4f4f4;
-		border-top: 1px solid #ddd;
-	}
-		.form-group.form-actions .btn {
-			margin: 0 10px;
-		}
-	.form-group .group-name {
-		display: block;
-		float: left;
-		width: 200px;
-		padding: 10px 0;
-		text-align: right;
-	}
-	.form-group .group-controls {
-		min-width: 250px;
-		min-height: 25px;
-		margin: 0 0 0 220px;
-		padding: 5px 0;
-	}
-		.form-group .group-controls .control {
-			display: block;
-			min-height: 30px;
-			padding: 5px 0;
-			line-height: 25px;
-			font-size: 14px;
-		}
-
-.stick {
-	display: inline-block;
-	white-space: nowrap;
-	font-size: 0px;
-	vertical-align: middle;
-}
-	.stick input {
-		border-radius: 0;
-		font-size: 14px;
-	}
-	.stick .btn {
-		border-radius: 0;
-		font-size: 14px;
-	}
-	.stick .btn:first-child,
-	.stick input:first-child {
-		border-radius: 3px 0 0 3px;
-	}
-	.stick .btn:last-child,
-	.stick input:last-child {
-		border-radius: 0 3px 3px 0;
-	}
-	.stick .btn + .btn,
-	.stick .btn + input,
-	.stick input + .btn,
-	.stick input + input {
-		border-left: none;
-	}
-	.stick input + .btn {
-		border-top: 1px solid #bbb;
-	}
-	.stick .btn + .dropdown > .btn {
-		border-left: none;
-		border-radius: 0 3px 3px 0;
-	}
-	.stick .btn + .dropdown a {
-		font-size: 12px;
-	}
-
-.btn {
-	display: inline-block;
-	min-height: 37px;
-	min-width: 15px;
-	padding: 5px 10px;
-	background: #fff;
-	background: linear-gradient(#fff, #eee);
-	border-radius: 3px;
-	border: 1px solid #ddd;
-	border-bottom: 1px solid #aaa;
-	border-right: 1px solid #aaa;
-	color: #666;
-	text-shadow: 0px -1px 0 #ddd;
-	line-height: 20px;
-	vertical-align: middle;
-	cursor: pointer;
-}
-	a.btn {
-		min-height: 25px;
-		line-height: 25px;
-	}
-	.btn:hover {
-		background: #f0f0f0;
-		background: linear-gradient(#f8f8f8, #f0f0f0);
-		text-decoration: none;
-	}
-	.btn.active,
-	.btn:active {
-		box-shadow: 0px 2px 4px #e0e0e0 inset, 0px 1px 2px #fafafa;
-		background: #eee;
-	}
-
-	.btn.btn-important {
-		background: #0084CC;
-		background: linear-gradient(#0084CC, #0045CC);
-		color: #fff;
-		border: 1px solid #0062B7;
-		text-shadow: 0px -1px 0 #aaa;
-	}
-		.btn.btn-important:hover {
-			background: linear-gradient(#0066CC, #0045CC);
-		}
-		.btn.btn-important:active {
-			background: #0044CB;
-			box-shadow: none;
-		}
-
-	.btn.btn-attention {
-		background: #E95B57;
-		background: linear-gradient(#E95B57, #BD362F);
-		color: #fff;
-		border: 1px solid #C44742;
-		text-shadow: 0px -1px 0px #666;
-	}
-		.btn.btn-attention:hover {
-			background: linear-gradient(#D14641, #BD362F);
-		}
-		.btn.btn-attention:active {
-			background: #BD362F;
-			box-shadow: none;
-		}
-
-/* NAVIGATION */
-.nav.nav-list .nav-header,
-.nav.nav-list .item {
-	display: block;
-	height: 35px;
-	line-height: 35px;
-}
-	.nav.nav-list .item:hover {
-		background: #fafafa;
-	}
-		.nav.nav-list .item:hover a {
-			color: #003388;
-		}
-	.nav.nav-list .item.active {
-		background: #0062BE;
-		color: #fff;
-	}
-		.nav.nav-list .item.active a {
-			color: #fff;
-		}
-	.nav.nav-list .disable {
-		color: #aaa;
-		background: #fafafa;
-		text-align: center;
-	}
-	.nav.nav-list .item > * {
-		display: block;
-		padding: 0 10px;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-		.nav.nav-list a:hover {
-			text-decoration: none;
-		}
-
-	.nav.nav-list .nav-header {
-		padding: 0 10px;
-		color: #888;
-		background: #f4f4f4;
-		border-bottom: 1px solid #ddd;
-		font-weight: bold;
-		text-shadow: 0 0 1px #ddd;
-	}
-	.nav.nav-list .separator {
-		display: block;
-		height: 0;
-		margin: 5px 0;
-		border-bottom: 1px solid #ddd;
-	}
-
-	.nav.nav-list .nav-form {
-		padding: 3px;
-		text-align: center;
-	}
-
-.nav-head {
-	display: block;
-	margin: 0;
-	background: #fff;
-	background: linear-gradient(#fff, #f0f0f0);
-	border-bottom: 1px solid #ddd;
-	text-align: right;
-}
-	.nav-head .item {
-		display: inline-block;
-		padding: 5px 10px;
-	}
-
-/* DROPDOWN */
-.dropdown {
-	position: relative;
-	display: inline-block;
-}
-	.dropdown .dropdown-target {
-		display: none;
-	}
-
-	.dropdown .dropdown-menu {
-		display: none;
-		min-width: 200px;
-		margin: 5px 0 0;
-		padding: 5px 0;
-		position: absolute;
-		right: 0px;
-		background: #fff;
-		border: 1px solid #ddd;
-		border-radius: 5px;
-		text-align: left;
-		box-shadow: 3px 3px 3px #ddd;
-	}
-		.dropdown .dropdown-menu .dropdown-header {
-			display: block;
-			padding: 0 5px;
-			color: #888;
-			font-weight: bold;
-			font-size: 14px;
-			line-height: 30px;
-		}
-		.dropdown .dropdown-menu .item {
-			display: block;
-			height: 30px;
-			font-size: 90%;
-			line-height: 30px;
-		}
-			.dropdown .dropdown-menu .item > * {
-				display: block;
-				padding: 0 25px;
-				line-height: 30px;
-			}
-			.dropdown .dropdown-menu .item:hover {
-				background: #0062BE;
-				color: #fff;
-			}
-				.dropdown .dropdown-menu .item:hover > * {
-					color: #fff;
-					text-decoration: none;
-				}
-		.dropdown .dropdown-menu .separator {
-			display: block;
-			height: 0;
-			margin: 5px 0;
-			border-bottom: 1px solid #ddd;
-		}
-		.dropdown .dropdown-target:target ~ .dropdown-menu {
-			display: block;
-			z-index: 10;
-		}
-	.dropdown .dropdown-close {
-		display: inline-block;
-		position: absolute;
-		top: -16px; right: -16px;
-		width: 16px;
-		height: 16px;
-		padding: 5px;
-		background: #fff;
-		border-radius: 50px;
-		border: 1px solid #ddd;
-		line-height: 16px;
-		text-align: center;
-	}
-		.dropdown .dropdown-close:hover {
-			background: #f4f4f4;
-		}
-
-/* ALERTS */
-.alert {
-	display: block;
-	width: 90%;
-	margin: 15px auto;
-	padding: 10px 15px;
-	background: #f4f4f4;
-	border: 1px solid #ccc;
-	border-right: 1px solid #aaa;
-	border-bottom: 1px solid #aaa;
-	border-radius: 5px;
-	color: #aaa;
-	text-shadow: 0 0 1px #eee;
-	box-shadow: 1px 1px 3px #aaa inset;
-}
-	.alert .alert-head {
-		margin: 0;
-		font-weight: bold;
-		font-size: 110%;
-	}
-
-/* ICONES */
-.icon {
-	display: inline-block;
-	width: 16px;
-	height: 16px;
-	vertical-align: middle;
-	line-height: 16px;
-	background: center center no-repeat;
-}
-	.icon.i_refresh {
-		background-image: url("icons/refresh.svg");
-	}
-	.icon.i_bookmark {
-		background-image: url("icons/starred.svg");
-	}
-	.icon.i_not_bookmark {
-		background-image: url("icons/unstarred.svg");
-	}
-	.icon.i_read {
-		background-image: url("icons/read.svg");
-	}
-	.icon.i_unread {
-		background-image: url("icons/unread.svg");
-	}
-	.icon.i_all {
-		background-image: url("icons/all.svg");
-	}
-	.icon.i_close {
-		background-image: url("icons/close.svg");
-	}
-	.icon.i_search {
-		background-image: url("icons/search.svg");
-	}
-	.icon.i_configure {
-		background-image: url("icons/configure.svg");
-	}
-	.icon.i_login {
-		background-image: url("icons/login.svg");
-	}
-	.icon.i_logout {
-		background-image: url("icons/logout.svg");
-	}
-	.icon.i_add {
-		background-image: url("icons/add.svg");
-	}
-	.icon.i_link {
-		background-image: url("icons/link.svg");
-	}
-	.icon.i_down {
-		background-image: url("icons/down.svg");
-	}
-	.icon.i_up {
-		background-image: url("icons/up.svg");
-	}
-	.icon.i_help {
-		background-image: url("icons/help.svg");
-	}
-	.icon.i_note {
-		background-image: url("icons/note.svg");
-	}
-	.icon.i_note_empty {
-		background-image: url("icons/note_empty.svg");
-	}
-
-/* STRUCTURE */
-.header {
-	display: table;
-	width: 100%;
-	background: #f4f4f4;
-	table-layout: fixed;
-}
-	.header > .item {
-		display: table-cell;
-		padding: 10px 0;
-		border-bottom: 1px solid #aaa;
-		vertical-align: middle;
-		text-align: center;
-	}
-		.header > .item.title {
-			width: 250px;
-		}
-			.header > .item.title h1 {
-				margin: 0;
-				text-shadow: 1px -1px 0 #ccc;
-			}
-			.header > .item.title a:hover {
-				text-decoration: none;
-			}
-		.header > .item.search input {
-			width: 200px;
-			transition: all 200ms linear;
-		}
-			.header .item.search input:focus {
-				width: 300px;
-			}
-		.header > .item.configure {
-			width: 100px;
-		}
-
-#global {
-	display: table;
-	width: 100%;
-	height: 100%;
-	background: #fafafa;
-	table-layout: fixed;
-}
-	.aside {
-		display: table-cell;
-		height: 100%;
-		width: 250px;
-		vertical-align: top;
-		border-right: 1px solid #aaa;
-		background: #fff;
-	}
-		.aside .nav-form input {
-			width: 180px;
-		}
-		.aside.aside_flux {
-			padding: 10px 0;
-		}
-		.aside.aside_feed .nav-form input {
-			width: 140px;
-		}
-		.aside.aside_feed .nav-form .dropdown .dropdown-menu {
-			right: -20px;
-		}
-
-	.nav_menu {
-		width: 100%;
-		background: #fafafa;
-		border-bottom: 1px solid #aaa;
-		text-align: center;
-		padding: 5px 0;
-	}
-
-.favicon {
-	width: 16px;
-}
-
-.categories {
-	margin: 0;
-	padding: 0;
-	text-align: center;
-	list-style: none;
-}
-	.categories .all,
-	.categories .favorites,
-	.categories .category {
-		display: block;
-		padding: 5px 0;
-		width: 220px;
-		margin: 5px auto;
-		text-align: left;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-		.categories .all .btn,
-		.categories .favorites .btn,
-		.categories .category .btn:first-child {
-			width: 195px;
-			position: relative;
-		}
-	.categories .feeds {
-		width: 220px;
-		margin: 0 auto;
-		list-style: none;
-	}
-		.categories .feeds .item.active:after {
-			content: "⇢";
-			line-height: 35px;
-			float: right;
-		}
-		.categories .feeds .item .feed {
-			display: inline-block;
-			margin: 0;
-			width: 165px;
-			line-height: 35px;
-			font-size: 90%;
-			vertical-align: middle;
-			text-align: left;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-		}
-		.categories .feeds .dropdown .dropdown-menu {
-			left: 0;
-		}
-		.categories .feeds .item .dropdown-toggle i {
-			background-image: none;
-		}
-			.categories .feeds .item .dropdown-target:target ~ .dropdown-toggle i,
-			.categories .feeds .item:hover .dropdown-toggle i {
-				background-image: url("icons/configure.svg");
-			}
-	.categories .notRead {
-		position: absolute;
-		top: 3px; right: 3px;
-		padding: 1px 5px;
-		background: #ccc;
-		color: #fff;
-		font-size: 90%;
-		border: 1px solid #bbb;
-		border-radius: 5px;
-		box-shadow: 1px 3px 3px #aaa inset;
-		text-shadow: 0 0 1px #aaa;
-	}
-
-.post {
-	padding: 10px 50px;
-}
-	.post form {
-		margin: 10px 0;
-	}
-
-.day {
-	height: 50px;
-	padding: 0 10px;
-	font-size: 130%;
-	font-weight: bold;
-	line-height: 50px;
-	background: #fff;
-	border-top: 1px solid #aaa;
-	border-bottom: 1px solid #aaa;
-}
-	.day:first-child {
-		border-top: none;
-	}
-
-.flux {
-	border-left: 10px solid #aaa;
-	background: #fafafa;
-}
-	.flux:hover {
-		background: #fff;
-	}
-	.flux.active {
-		border-left: 10px solid #0062BE;
-		background: #fff;
-	}
-	.flux.not_read {
-		border-left: 10px solid #FF5300;
-		background: #FFF3ED;
-	}
-	.flux.favorite {
-		border-left: 10px solid #FFC300;
-		background: #FFF6DA;
-	}
-
-	.flux_header {
-		display: table;
-		table-layout: fixed;
-		margin: 0;
-		padding: 0;
-		width: 100%;
-		height: 25px;
-		font-size: 12px;
-		line-height: 25px;
-		border-top: 1px solid #ddd;
-	}
-		.flux_header .item {
-			display: table-cell;
-			vertical-align: middle;
-		}
-			.flux_header .item.manage {
-				width: 90px;
-				white-space: nowrap;
-				font-size: 0px;
-				vertical-align: middle;
-				text-align: center;
-			}
-				.flux_header .item.manage .read {
-					display: inline-block;
-					width: 30px;
-					height: 40px;
-					background: url("icons/read.svg") center center no-repeat;
-					vertical-align: middle;
-				}
-					.flux_header .item.manage .read:hover {
-						text-decoration: none;
-					}
-					.flux.not_read .flux_header .item.manage .read {
-						background: url("icons/unread.svg") center center no-repeat;
-					}
-				.flux_header .item.manage .bookmark {
-					display: inline-block;
-					width: 30px;
-					height: 40px;
-					background: url("icons/non-starred.svg") center center no-repeat;
-					vertical-align: middle;
-				}
-					.flux_header .item.manage .bookmark:hover {
-						text-decoration: none;
-					}
-					.flux.favorite .flux_header .item.manage .bookmark {
-						background: url("icons/starred.svg") center center no-repeat;
-					}
-				.flux_header .item.manage .note {
-					display: inline-block;
-					width: 30px;
-					height: 40px;
-					vertical-align: middle;
-					line-height: 40px;
-					font-size: 12px;
-				}
-			.flux_header .item.website {
-				width: 200px;
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				line-height: 35px;
-			}
-				.flux_header .item.website a {
-					display: block;
-					padding: 0 5px;
-					height: 40px;
-				}
-			.flux_header .item.title {
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				cursor: pointer;
-			}
-				.flux_header .item.title h1 {
-					font-size: 12px;
-					margin: 0;
-					font-weight: normal;
-				}
-					.flux.not_read .flux_header .item.title h1 {
-						font-weight: bold;
-					}
-			.flux_header .item.date {
-				width: 200px;
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				text-align: right;
-				font-size: 10px;
-				color: #666;
-				cursor: pointer;
-			}
-			.flux_header .item.link {
-				width: 35px;
-				text-align: center;
-			}
-				.flux_header .item.link a {
-					display: inline-block;
-					width: 35px;
-					height: 40px;
-					background: url("icons/link.svg") center center no-repeat;
-					vertical-align: middle;
-				}
-					.flux_header .item.link a:hover {
-						text-decoration: none;
-					}
-
-.content {
-	max-width: 550px;
-	margin: 0 auto;
-	padding: 10px;
-	line-height: 170%;
-	font-family: 'OpenSans';
-}
-	.content h1, .content h2, .content h3 {
-		margin: 20px 0 5px;
-	}
-	.content p {
-		margin: 0 0 20px;
-	}
-	.content img.big {
-		display: block;
-		margin: 10px 0;
-		width: 100%;
-		box-shadow: 0 0 5px #000;
-		border-radius: 5px;
-	}
-	.content pre {
-		width: 90%;
-		margin: 10px auto;
-		padding: 10px;
-		overflow: auto;
-		background: #666;
-		border: 1px solid #000;
-		color: #fafafa;
-		border-radius: 5px;
-	}
-	.content q, .content blockquote {
-		display: block;
-		margin: 5px 0;
-		padding: 5px 20px;
-		font-style: italic;
-		border-left: 4px solid #ccc;
-		color: #666;
-	}
-		.content blockquote p {
-			margin: 0;
-		}
-
-/*** PAGINATION ***/
-.pagination {
-	display: table;
-	width: 100%;
-	margin: 0;
-	background: #fafafa;
-	text-align: center;
-	color: #333;
-	font-size: 80%;
-	line-height: 200%;
-	table-layout: fixed;
-}
-	.pagination .item {
-		display: table-cell;
-		padding: 5px 10px;
-		border-top: 1px solid #aaa;
-	}
-		.pagination .item a {
-			color: #333;
-			font-style: italic;
-		}
-	.pagination .pager-previous, .pagination .pager-next {
-		width: 200px;
-	}
-	.pagination .item.pager-current {
-		font-weight: bold;
-	}
-
-/*** NOTIFICATION ***/
-.notification {
-	position: fixed;
-	bottom: 0;
-	left: 5%; right: 5%;
-	min-height: 30px;
-	padding: 10px;
-	line-height: 30px;
-	text-align: center;
-	border-radius: 5px 5px 0 0;
-	box-shadow: 0 0 5px #666;
-	background: #ddd;
-	color: #666;
-	font-weight: bold;
-}
-	.notification.good {
-		background: #f4f899;
-	}
-	.notification.bad {
-		background: #f4a899;
-	}
-	.notification a.close {
-		display: inline-block;
-		width: 16px;
-		height: 16px;
-		float: right;
-		margin: -20px -20px 0 0;
-		padding: 5px;
-		background: #fff;
-		border-radius: 50px;
-		border: 1px solid #aaa;
-		line-height: 16px;
-	}
-
-@media(max-width: 840px) {
-	.header,
-	.aside,
-	.flux_header .item.website span,
-	.flux_header .item.date {
-		display: none;
-	}
-	.flux_header .item.website {
-		width: 30px;
-		text-align: center;
-	}
-	.pagination .pager-previous, .pagination .pager-next {
-		width: 100px;
-	}
-}