Fix: global view unread article (#4559)

* template.css

* themes

10 files changed, 52 insertions, 12 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 59ab41ea5..99586fb0e 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -549,7 +549,8 @@ a.btn {
 }
 
 .aside.aside_feed .category .title:not([data-unread="0"])::after,
-.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after,
+.global .box.category .title:not([data-unread="0"])::after {
 	background-color: #171717;
 	color: #999;
 	border-color: #999;
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index ef08cbb3f..f4e0a1f79 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -549,7 +549,8 @@ a.btn {
 }
 
 .aside.aside_feed .category .title:not([data-unread="0"])::after,
-.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after,
+.global .box.category .title:not([data-unread="0"])::after {
 	background-color: #171717;
 	color: #999;
 	border-color: #999;
diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css
index c91306ba0..40b1ea051 100644
--- a/p/themes/Origine-compact/origine-compact.css
+++ b/p/themes/Origine-compact/origine-compact.css
@@ -635,7 +635,8 @@ a.btn,
 }
 
 /*=== Aside main page (categories) */
-.aside.aside_feed .category .title:not([data-unread="0"])::after {
+.aside.aside_feed .category .title:not([data-unread="0"])::after,
+.global .box.category .title:not([data-unread="0"])::after {
 	margin: 0.5em 0 0 0;
 	background-color: #f6f6f6;
 	color: #444;
diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css
index ed245a847..2e4d1d5e8 100644
--- a/p/themes/Origine-compact/origine-compact.rtl.css
+++ b/p/themes/Origine-compact/origine-compact.rtl.css
@@ -635,7 +635,8 @@ a.btn,
 }
 
 /*=== Aside main page (categories) */
-.aside.aside_feed .category .title:not([data-unread="0"])::after {
+.aside.aside_feed .category .title:not([data-unread="0"])::after,
+.global .box.category .title:not([data-unread="0"])::after {
 	margin: 0.5em 0 0 0;
 	background-color: #f6f6f6;
 	color: #444;
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index df99ed694..940392744 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -604,7 +604,8 @@ a.btn {
 }
 
 /*=== Aside main page (categories) */
-.aside.aside_feed .category .title:not([data-unread="0"])::after {
+.aside.aside_feed .category .title:not([data-unread="0"])::after,
+.global .box.category .title:not([data-unread="0"])::after {
 	background-color: #f6f6f6;
 	color: #444;
 }
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 2b30c071c..7f60394f1 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -604,7 +604,8 @@ a.btn {
 }
 
 /*=== Aside main page (categories) */
-.aside.aside_feed .category .title:not([data-unread="0"])::after {
+.aside.aside_feed .category .title:not([data-unread="0"])::after,
+.global .box.category .title:not([data-unread="0"])::after {
 	background-color: #f6f6f6;
 	color: #444;
 }
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index fbbb84242..389dabb6a 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -570,7 +570,8 @@ a.signin {
 }
 
 /*=== Aside main page (categories) */
-.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
+.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after,
+.global .box.category .title:not([data-unread="0"])::after {
 	margin: 0.5em 0 0 0;
 	background-color: white;
 	color: #428bca;
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 22e0cb5f7..178747ba5 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -570,7 +570,8 @@ a.signin {
 }
 
 /*=== Aside main page (categories) */
-.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
+.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after,
+.global .box.category .title:not([data-unread="0"])::after {
 	margin: 0.5em 0 0 0;
 	background-color: white;
 	color: #428bca;
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index d92975234..f6fa87187 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -1712,8 +1712,8 @@ input:checked + .slide-container .properties {
 	color: white;
 }
 
-.category .title:not([data-unread="0"])::after,
-.feed .item-title:not([data-unread="0"])::after {
+.aside .category .title:not([data-unread="0"])::after,
+.aside .feed .item-title:not([data-unread="0"])::after {
 	margin: 0.75em 0 0 0;
 	padding: 5px 10px;
 	min-width: 20px;
@@ -1729,6 +1729,22 @@ input:checked + .slide-container .properties {
 	font-weight: initial;
 }
 
+.global .box.category .title:not([data-unread="0"])::after {
+	margin: 0.5rem 0 0 0;
+	padding: 5px 10px;
+	min-width: 20px;
+	display: block;
+	content: attr(data-unread);
+	position: absolute;
+	top: 0;
+	right: 10px;
+	text-align: center;
+	font-size: 0.75rem;
+	border-radius: 12px;
+	line-height: 1;
+	font-weight: initial;
+}
+
 .feed .item-title:not([data-unread="0"])::after {
 	margin: 1em 0 0 0;
 }
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index 78a9f3ee1..26ba473d8 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -1712,8 +1712,8 @@ input:checked + .slide-container .properties {
 	color: white;
 }
 
-.category .title:not([data-unread="0"])::after,
-.feed .item-title:not([data-unread="0"])::after {
+.aside .category .title:not([data-unread="0"])::after,
+.aside .feed .item-title:not([data-unread="0"])::after {
 	margin: 0.75em 0 0 0;
 	padding: 5px 10px;
 	min-width: 20px;
@@ -1729,6 +1729,22 @@ input:checked + .slide-container .properties {
 	font-weight: initial;
 }
 
+.global .box.category .title:not([data-unread="0"])::after {
+	margin: 0.5rem 0 0 0;
+	padding: 5px 10px;
+	min-width: 20px;
+	display: block;
+	content: attr(data-unread);
+	position: absolute;
+	top: 0;
+	left: 10px;
+	text-align: center;
+	font-size: 0.75rem;
+	border-radius: 12px;
+	line-height: 1;
+	font-weight: initial;
+}
+
 .feed .item-title:not([data-unread="0"])::after {
 	margin: 1em 0 0 0;
 }