CSS : corrections ellipsis + changements thème foncé

https://github.com/marienfressinaud/FreshRSS/issues/327#issuecomment-31639819

5 files changed, 36 insertions, 80 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 136bc5b60..5bf44c620 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -48,7 +48,7 @@
 	* Meilleur support des longs titres d’articles sur des écrans étroits
 	* Meilleure accessibilité
 		* FreshRSS fonctionne aussi en mode dégradé sans images (alternatives Unicode) et/ou sans CSS
-	* Nouveau thème noir par @aledeg
+	* Nouveau thème noir
 	* Diverses améliorations mineures
 * PHP :
 	* Encore plus tolérant pour les flux comportant des erreurs
diff --git a/p/themes/default/freshrss.css b/p/themes/default/freshrss.css
index 86925accc..733807938 100644
--- a/p/themes/default/freshrss.css
+++ b/p/themes/default/freshrss.css
@@ -257,37 +257,24 @@
 		border-top: 1px solid #ddd;
 		cursor: pointer;
 	}
-		.flux .flux_header > .item > a,
-		.flux .bottom > .item > a {
-			display: inline-block;
-			height: 40px;
-			width: 100%;
+		.flux .item {
 			line-height: 40px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
 		}
 		.flux .item.manage {
 			width: 40px;
-			white-space: nowrap;
 			text-align: center;
 		}
 		.flux .item.website {
 			width: 200px;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			line-height: 40px;
 		}
-			.flux .item.website .favicon {
+			.website .favicon {
 				padding: 5px;
 			}
-			.flux .item.website a {
-				display: block;
-				height: 40px;
-			}
 		.flux .item.title {
 			background: inherit;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
 		}
 		.flux:hover .item.title {
 			border-right: 2px solid rgba(127, 127, 127, 0.1);
@@ -304,10 +291,7 @@
 			}
 		.flux .item.date {
 			width: 200px;
-			overflow: hidden;
 			padding:0 5px 0 0;
-			white-space: nowrap;
-			text-overflow: ellipsis;
 			text-align: right;
 			font-size: 10px;
 			color: #666;
diff --git a/p/themes/default_dark/freshrss.css b/p/themes/default_dark/freshrss.css
index 71f2645e6..3810bc985 100644
--- a/p/themes/default_dark/freshrss.css
+++ b/p/themes/default_dark/freshrss.css
@@ -28,7 +28,7 @@
 			.header > .item.title h1 {
 				display: inline-block;
 				margin: 0;
-				text-shadow: 1px -1px 0 #ccc;
+				text-shadow: 1px -1px 0 #777;
 			}
 		.header > .item.search input {
 			width: 230px;
@@ -138,7 +138,7 @@
 		list-style: none;
 	}
 		.categories .feeds .item.active {
-			background: #003388;
+			background: #26303F;
 		}
 		.categories .feeds .item.active .feed {
 			color: #888;
@@ -249,37 +249,24 @@
 		border-top: 1px solid #2f2f2f;
 		cursor: pointer;
 	}
-		.flux .flux_header > .item > a,
-		.flux .bottom > .item > a {
-			display: inline-block;
-			height: 40px;
-			width: 100%;
+		.flux .item {
 			line-height: 40px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
 		}
 		.flux .item.manage {
 			width: 40px;
-			white-space: nowrap;
 			text-align: center;
 		}
 		.flux .item.website {
 			width: 200px;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			line-height: 40px;
 		}
-			.flux .item.website .favicon {
+			.website .favicon {
 				padding: 5px;
 			}
-			.flux .item.website a {
-				display: block;
-				height: 40px;
-			}
 		.flux .item.title {
 			background: inherit;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
 		}
 		.flux:hover .item.title {
 			border-right: 2px solid rgba(127, 127, 127, 0.1);
@@ -296,10 +283,7 @@
 			}
 		.flux .item.date {
 			width: 200px;
-			overflow: hidden;
 			padding:0 5px 0 0;
-			white-space: nowrap;
-			text-overflow: ellipsis;
 			text-align: right;
 			font-size: 10px;
 			color: #666;
@@ -345,7 +329,7 @@
 			height: 35px;
 			margin: 0;
 			padding: 0 10px;
-			background: #003388;
+			background: #26303F;
 			border: none;
 			border-bottom: 1px solid #2f2f2f;
 			border-radius: 5px 5px 0 0;
@@ -785,19 +769,19 @@ select.number option {
 	background: #1c1c1c;
 }
 	.btn:hover {
-		background: -moz-linear-gradient(top, #1e1e1e 0%, #1c1c1c 100%);
-		background: -webkit-linear-gradient(top, #1e1e1e 0%, #1c1c1c 100%);
-		background: -o-linear-gradient(top, #1e1e1e 0%, #1c1c1c 100%);
-		background: -ms-linear-gradient(top, #1e1e1e 0%, #1c1c1c 100%);
+		background: -moz-linear-gradient(top, #4A5D7A 0%, #26303F 100%);
+		background: -webkit-linear-gradient(top, #4A5D7A 0%, #26303F 100%);
+		background: -o-linear-gradient(top, #4A5D7A 0%, #26303F 100%);
+		background: -ms-linear-gradient(top, #4A5D7A 0%, #26303F 100%);
 	}
 	.btn-important {
-		background: #003388;
+		background: #26303F;
 	}
 		.btn-important:hover {
-			background: -moz-linear-gradient(top, #0044CC 0%, #003388 100%);
-			background: -webkit-linear-gradient(top, #0044CC 0%, #003388 100%);
-			background: -o-linear-gradient(top, #0044CC 0%, #003388 100%);
-			background: -ms-linear-gradient(top, #0044CC 0%, #003388 100%);
+			background: -moz-linear-gradient(top, #4A5D7A 0%, #26303F 100%);
+			background: -webkit-linear-gradient(top, #4A5D7A 0%, #26303F 100%);
+			background: -o-linear-gradient(top, #4A5D7A 0%, #26303F 100%);
+			background: -ms-linear-gradient(top, #4A5D7A 0%, #26303F 100%);
 		}
 	.btn-attention {
 		background: #880011;
diff --git a/p/themes/default_dark/global.css b/p/themes/default_dark/global.css
index b0bf52460..1516a6696 100644
--- a/p/themes/default_dark/global.css
+++ b/p/themes/default_dark/global.css
@@ -20,7 +20,7 @@ html, body {
 
 /* LIENS */
 a {
-	color: #003388;
+	color: #6986B2;
 	text-decoration: none;
 }
 	a:hover {
@@ -92,10 +92,10 @@ input, select, textarea {
 	max-width: 100%;
 	min-height: 25px;
 	padding: 5px;
-	background: #1e1e1e;
+	background: #333;
 	border: 1px solid #000;
 	border-radius: 3px;
-	color: #888;
+	color: #999;
 	line-height: 25px;
 	vertical-align: middle;
 	box-shadow: 0 2px 2px #1d1d1d inset;
@@ -210,13 +210,13 @@ input, select, textarea {
 		line-height: 25px;
 	}
 	.btn:hover {
-		background: linear-gradient(to bottom, #f8f8f8, #f0f0f0);
+		background: linear-gradient(to bottom, #4A5D7A, #26303F);
 		text-decoration: none;
 	}
 	.btn.active,
 	.btn:active,
 	.dropdown-target:target ~ .btn.dropdown-toggle {
-		background: #003388;
+		background: #26303F;
 	}
 
 	.btn-important {
@@ -256,10 +256,10 @@ input, select, textarea {
 		background: #1a1a1a;
 	}
 		.nav-list .item:hover a {
-			color: #003388;
+			color: #26303F;
 		}
 	.nav-list .item.active {
-		background: #003388;
+		background: #26303F;
 		color: #1a1a1a;
 	}
 		.nav-list .item.active a {
@@ -392,7 +392,7 @@ input, select, textarea {
 				line-height: 30px;
 			}
 			.dropdown-menu .item:hover {
-				background: #003388;
+				background: #26303F;
 				color: #888;
 			}
 				.dropdown-menu .item:hover > * {
diff --git a/p/themes/flat-design/freshrss.css b/p/themes/flat-design/freshrss.css
index 7a1682370..df1dfdde3 100644
--- a/p/themes/flat-design/freshrss.css
+++ b/p/themes/flat-design/freshrss.css
@@ -243,33 +243,24 @@ body {
 		border-top: 1px solid #ecf0f1;
 		cursor: pointer;
 	}
-		.flux .flux_header > .item > a,
-		.flux .bottom > .item > a {
-			display: inline-block;
-			height: 40px;
-			width: 100%;
+		.flux .item {
 			line-height: 40px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
 		}
 		.flux .item.manage {
 			width: 40px;
-			white-space: nowrap;
 			text-align: center;
 		}
 		.flux .item.website {
 			width: 200px;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			line-height: 40px;
 		}
-			.flux .item.website .favicon {
+			.website .favicon {
 				padding: 5px;
 			}
 		.flux .item.title {
 			background: inherit;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
 		}
 		.flux:hover .item.title {
 			border-right: 2px solid rgba(127, 127, 127, 0.1);
@@ -286,10 +277,7 @@ body {
 			}
 		.flux .item.date {
 			width: 200px;
-			overflow: hidden;
 			padding:0 5px 0 0;
-			white-space: nowrap;
-			text-overflow: ellipsis;
 			text-align: right;
 			font-size: 10px;
 			color: #666;