Fix all the themes for global view

See https://github.com/marienfressinaud/FreshRSS/issues/634

6 files changed, 75 insertions, 132 deletions

diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 25a3e66f6..f48f42b68 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -845,43 +845,34 @@ a.btn {
 
 /*=== GLOBAL VIEW */
 /*================*/
-#stream.global .box-category {
-	text-align: left;
-	background: #1a1a1a;
-	border: 1px solid #000;
-	border-radius: 5px;
+.box.category .box-title .title {
+	font-weight: normal;
+	text-decoration: none;
 	text-align: left;
+	color: #888;
 }
-#stream.global .btn {
-	width: auto;
-	height: 2em;
-	margin: 0;
-	padding: 0 10px;
-	line-height: 2em;
-	font-size: 1.2rem;
+.box.category:not([data-unread="0"]) .box-title {
+	background: #34495E;
+}
+.box.category:not([data-unread="0"]) .box-title:active {
 	background: #26303F;
-	border: none;
-	border-bottom: 1px solid #000;
-	border-radius: 5px 5px 0 0;
 }
-#stream.global .btn:not([data-unread="0"]) {
-	font-weight: bold;
-	background: #34495e;
+.box.category:not([data-unread="0"]) .box-title .title {
 	color: #fff;
-}
-#stream.global .btn:first-child:not([data-unread="0"]):after {
-	top: 0; right: 5px;
 	font-weight: bold;
+}
+.box.category .title:not([data-unread="0"]):after {
+	position: absolute;
+	top: 5px; right: 10px;
 	border: 0;
 	background: none;
-	color: #fff;
-}
-#stream.global .box-category .feeds {
-	max-height: 250px;
+	font-weight: bold;
+	box-shadow: none;
+	text-shadow: none;
 }
-#stream.global .box-category .feeds .item {
+.box.category .item.feed {
 	padding: 2px 10px;
-	font-size: 0.9rem;
+	font-size: 0.8rem;
 }
 
 /*=== Panel */
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index c594811f2..432a9a0fb 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -851,44 +851,33 @@ a.btn {
 
 /*=== GLOBAL VIEW */
 /*================*/
-#stream.global .box-category {
+.box.category .box-title .title {
+	font-weight: normal;
+	text-decoration: none;
 	text-align: left;
-	border: 1px solid #ddd;
-	border-radius: 5px;
 }
-#stream.global .category {
-	margin: 0;
+.box.category:not([data-unread="0"]) .box-title {
+	background: #3498db;
 }
-#stream.global .btn {
-	width: auto;
-	height: 2em;
-	margin: 0;
-	padding: 0 10px;
-	line-height: 2em;
-	font-size: 1.2rem;
-	background: #ecf0f1;
-	color: #333;
-	border-bottom: 1px solid #ddd;
-	border-radius: 5px 5px 0 0;
+.box.category:not([data-unread="0"]) .box-title:active {
+	background: #2980b9;
 }
-#stream.global .btn:not([data-unread="0"]) {
+.box.category:not([data-unread="0"]) .box-title .title {
 	font-weight: bold;
-	background: #3498db;
 	color: #fff;
 }
-#stream.global .btn:first-child:not([data-unread="0"]):after {
-	top: 0; right: 5px;
-	font-weight: bold;
-	background: none;
+.box.category .title:not([data-unread="0"]):after {
+	position: absolute;
+	top: 5px; right: 10px;
 	border: 0;
-	color: #fff;
-}
-#stream.global .box-category .feeds {
-	max-height: 250px;
+	background: none;
+	font-weight: bold;
+	box-shadow: none;
+	text-shadow: none;
 }
-#stream.global .box-category .feeds .item {
+.box.category .item.feed {
 	padding: 2px 10px;
-	font-size: 0.9rem;
+	font-size: 0.8rem;
 }
 
 /*=== DIVERS */
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 918d4f653..7231abd01 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -603,9 +603,6 @@ a.btn {
 	background: inherit;
 	border-left: 1px solid #aaa;
 }
-.feed .item-title:not([data-unread="0"]) {
-	font-weight: bold;
-}
 
 /*=== Aside main page (feeds) */
 .aside_feed .tree-folder-items > .item.empty.active {
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 84a485e13..f10b66086 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -908,59 +908,32 @@ a.btn {
 
 /*=== GLOBAL VIEW */
 /*================*/
-#stream.global .box-category {
-	background: #fff;
-	border:none;
+.box.category .box-title .title {
+	font-weight: normal;
+	text-decoration: none;
 	text-align: left;
 }
-
-#stream.global .category:first-child {
-	margin: 0;
+.box.category:not([data-unread="0"]) .box-title {
+	background: #5BC0DE;
 }
-
-
-#stream.global .btn {
-	width: auto;
-	height: 2em;
-	margin: 0;
-	padding: 0 10px;
-	background: #f6f6f6;
-	border-bottom: 1px solid #aaa;
-	border-radius: 5px 5px 0 0;
-	line-height: 2em;
-	font-size: 1.2rem;
-}
-
-#stream.global .btn:not([data-unread="0"]) {
-	background: #5bc0de;
-	border-color : #5bc0de;
-	color: #fff;
+.box.category:not([data-unread="0"]) .box-title .title {
 	font-weight: bold;
-	text-shadow: none;
-
+	color: #fff;
 }
-
-
-#stream.global .btn:first-child:not([data-unread="0"]):after {
-	top: 0; right: 5px;
+.box.category .title:not([data-unread="0"]):after {
+	position: absolute;
+	top: 5px; right: 10px;
 	border: 0;
 	background: none;
-	color: #fff;
 	font-weight: bold;
 	box-shadow: none;
 	text-shadow: none;
+	font-size: 0.8rem;
+	line-height: 1.6rem;
 }
-
-#stream.global .box-category .feeds {
-	max-height: 250px;
-	width: 302px;
-	border : solid #aaa 1px;
-	border-top : none;
-}
-
-#stream.global .box-category .feeds .item {
+.box.category .item.feed {
 	padding: 2px 10px;
-	font-size: 0.9rem;
+	font-size: 0.8rem;
 }
 
 /*=== DIVERS */
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index 5771bb68f..c38cb617e 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -957,60 +957,50 @@ opacity: 1;
 
 /*=== GLOBAL VIEW */
 /*================*/
-#stream.global{
-	background:#222;
+#stream.global {
+	background: #222;
 	padding: 24px 0;
 	box-shadow: 0 1px #fff, 0 -2px 2px #171717 inset, 0 2px 2px #171717 inset;
 }
-#stream.global .box-category {
-	background: #fff;
-	border-radius: 4px 4px 0 0;
-	text-align: left;
-	box-shadow: 0 0 4px #171717;
-	overflow:hidden;
-}
-#stream.global .btn {
-	width: auto;
-	height: 2em;
-	margin: 0;
-	padding: 0 10px;
+
+.box.category .box-title {
 	background: linear-gradient(0deg, #EDE7DE 0%, #fff 100%) #171717;
 	background: -webkit-linear-gradient(bottom, #EDE7DE 0%, #fff 100%);
-	border: none;
 	box-shadow: 0px -1px #fff inset,0 -2px #ccc inset;
 	border-radius: none;
 	line-height: 2em;
 	font-size: 1.2rem;
-	color:#888;
 	text-shadow:0 1px #ccc;
 }
-#stream.global .btn:not([data-unread="0"]) {
+.box.category .box-title .title {
+	font-weight: normal;
+	text-decoration: none;
+	text-align: left;
+	color: #888;
+}
+.box.category:not([data-unread="0"]) .box-title {
+}
+.box.category:not([data-unread="0"]) .box-title:active {
+}
+.box.category:not([data-unread="0"]) .box-title .title {
 	color: #222;
 	font-weight: bold;
 }
-#stream.global .btn:first-child:not([data-unread="0"]):after {
-	top: 0;
-	right: 5px;
+.box.category .title:not([data-unread="0"]):after {
+	position: absolute;
+	top: 5px; right: 10px;
 	border: 0;
 	background: none;
-	color: #222;
 	font-weight: bold;
-	box-shadow: none;
-	text-shadow: none;
-}
-#stream.global .box-category .feeds {
-	max-height: 250px;
-	color:#222;
-	background:#EDE7DE;
 }
-#stream.global .box-category .feeds .item {
+.box.category .item.feed {
 	padding: 2px 10px;
-	font-size: 0.9rem;
-	overflow:hidden;
+	font-size: 0.8rem;
 }
-#stream.global .box-category .feed {
-	color:#222;
+.box.category .item.feed .item-title {
+	color: #222;
 }
+
 /*=== PANEL */
 /*===========*/
 #panel {
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index f4f19ee71..fd95cb697 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -673,6 +673,9 @@ br + br + br {
 .feed .item-title:not([data-unread="0"]):before {
 	content: "(" attr(data-unread) ") ";
 }
+.feed .item-title:not([data-unread="0"]) {
+	font-weight: bold;
+}
 
 .state_unread .category:not(.active)[data-unread="0"],
 .state_unread .feed:not(.active)[data-unread="0"] {