Improved: unread articles counter (#4166)

* Update template.css

* CSS base template

* CSS themes

* white spaces fixed

* Update ansum.rtl.css

* fix themes

* fix css

* fix scss

* theme swage

* Theme Screwdriver

* theme BlueLagoon fine tuning

* theme Parfat tuneing

* Fix merge bugs

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

2 files changed, 42 insertions, 18 deletions

diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index bc3ab7fbb..7f1841b14 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -602,7 +602,7 @@ a.btn {
 }
 
 .tree-folder-items > .item.active {
-	margin: 0px 8px;
+	margin: 0px 5px;
 	background: linear-gradient(180deg, #222 0%, #171717 100%) #171717;
 	background: -webkit-linear-gradient(top, #222 0%, #171717 100%);
 	border-radius: 4px;
@@ -702,18 +702,30 @@ a.btn {
 }
 
 /*=== Aside main page (categories) */
-.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	position: absolute;
-	right: 3px;
-	padding: 1px 5px;
-	color: #fff;
-	text-shadow: 0 1px rgba(255,255,255,0.08);
-}
-
 .aside_feed .btn-important {
 	border: none;
 }
 
+.aside.aside_feed .tree-folder-items .item.feed.active {
+	padding: 0 10px;
+}
+
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	background-color: #171717;
+	color: #ccc;
+	border-color: #999;
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	background-color: #222;
+	color: #ccc;
+	border-color: #999;
+}
+
+.aside.aside_feed .feed.active .item-title:not([data-unread="0"])::after {
+	right: 5px;
+}
+
 /*=== Aside main page (feeds) */
 .feed.item.empty,
 .feed.item.empty > a {
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index cc28c5619..6034cbf37 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -602,7 +602,7 @@ a.btn {
 }
 
 .tree-folder-items > .item.active {
-	margin: 0px 8px;
+	margin: 0px 5px;
 	background: linear-gradient(-180deg, #222 0%, #171717 100%) #171717;
 	background: -webkit-linear-gradient(top, #222 0%, #171717 100%);
 	border-radius: 4px;
@@ -702,18 +702,30 @@ a.btn {
 }
 
 /*=== Aside main page (categories) */
-.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	position: absolute;
-	left: 3px;
-	padding: 1px 5px;
-	color: #fff;
-	text-shadow: 0 1px rgba(255,255,255,0.08);
-}
-
 .aside_feed .btn-important {
 	border: none;
 }
 
+.aside.aside_feed .tree-folder-items .item.feed.active {
+	padding: 0 10px;
+}
+
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	background-color: #171717;
+	color: #ccc;
+	border-color: #999;
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	background-color: #222;
+	color: #ccc;
+	border-color: #999;
+}
+
+.aside.aside_feed .feed.active .item-title:not([data-unread="0"])::after {
+	left: 5px;
+}
+
 /*=== Aside main page (feeds) */
 .feed.item.empty,
 .feed.item.empty > a {