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>

p/themes/Alternative-Dark/adark.css

@@ -577,15 +577,17 @@ a.btn {
 
 /*=== Aside main page (categories) */
 .aside_feed .category .title:not([data-unread="0"])::after {
-	margin: 10px 0;
 	padding: 0 10px;
-	background: inherit;
-	font-size: 0.9rem;
-	position: absolute;
-	right: 0;
 	line-height: 1.5rem;
 }
 
+.aside.aside_feed .category .title:not([data-unread="0"])::after,
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	background-color: #171717;
+	color: #999;
+	border-color: #999;
+}
+
 /*=== Aside main page (feeds) */
 .feed.item.empty.active {
 	background: #e67e22;

p/themes/Alternative-Dark/adark.rtl.css

@@ -577,15 +577,17 @@ a.btn {
 
 /*=== Aside main page (categories) */
 .aside_feed .category .title:not([data-unread="0"])::after {
-	margin: 10px 0;
 	padding: 0 10px;
-	background: inherit;
-	font-size: 0.9rem;
-	position: absolute;
-	left: 0;
 	line-height: 1.5rem;
 }
 
+.aside.aside_feed .category .title:not([data-unread="0"])::after,
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	background-color: #171717;
+	color: #999;
+	border-color: #999;
+}
+
 /*=== Aside main page (feeds) */
 .feed.item.empty.active {
 	background: #e67e22;

p/themes/Ansum/_sidebar.scss

@@ -79,19 +79,6 @@
 					color: variables.$sid-font-color;
 				}
 			}
-
-			.feed .item-title:not([data-unread="0"])::before {
-				margin: 11px 6px 0 4px;
-				padding: 3px 4px;
-				background: variables.$sid-pills;
-				display: block;
-				float: left;
-				font-size: 0.75rem;
-				border-radius: 12px;
-				content: attr(data-unread);
-				text-align: center;
-				line-height: 0.75rem;
-			}
 		}
 	}
 }
@@ -274,15 +261,14 @@
 	width: calc(100% - 35px - 35px);
 }
 
-.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	margin: -0.25rem 1rem 0 0;
-	padding: 0 0.75rem;
-	background: variables.$sid-pills;
-	border-radius: 12px;
-	position: absolute;
-	right: 0;
-	line-height: 1.5rem;
-	text-align: center;
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	margin: 1.5em 0 0 0;
+	background-color: variables.$sid-pills;
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	margin: 0.5em 0 0 0;
+	background-color: variables.$sid-pills;
 }
 
 .feed.item.empty.active {

p/themes/Ansum/ansum.css

@@ -583,18 +583,6 @@ form th {
 	text-decoration: none;
 	color: #363330;
 }
-.tree .tree-folder .tree-folder-items .feed .item-title:not([data-unread="0"])::before {
-	margin: 11px 6px 0 4px;
-	padding: 3px 4px;
-	background: rgba(35, 35, 0, 0.15);
-	display: block;
-	float: left;
-	font-size: 0.75rem;
-	border-radius: 12px;
-	content: attr(data-unread);
-	text-align: center;
-	line-height: 0.75rem;
-}
 
 /*=== Buttons */
 .stick {
@@ -726,15 +714,14 @@ form th {
 	width: calc(100% - 35px - 35px);
 }
 
-.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	margin: -0.25rem 1rem 0 0;
-	padding: 0 0.75rem;
-	background: rgba(35, 35, 0, 0.15);
-	border-radius: 12px;
-	position: absolute;
-	right: 0;
-	line-height: 1.5rem;
-	text-align: center;
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	margin: 1.5em 0 0 0;
+	background-color: rgba(35, 35, 0, 0.15);
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	margin: 0.5em 0 0 0;
+	background-color: rgba(35, 35, 0, 0.15);
 }
 
 .feed.item.empty.active {

p/themes/Ansum/ansum.rtl.css

@@ -583,18 +583,6 @@ form th {
 	text-decoration: none;
 	color: #363330;
 }
-.tree .tree-folder .tree-folder-items .feed .item-title:not([data-unread="0"])::before {
-	margin: 11px 4px 0 6px;
-	padding: 3px 4px;
-	background: rgba(35, 35, 0, 0.15);
-	display: block;
-	float: right;
-	font-size: 0.75rem;
-	border-radius: 12px;
-	content: attr(data-unread);
-	text-align: center;
-	line-height: 0.75rem;
-}
 
 /*=== Buttons */
 .stick {
@@ -726,15 +714,14 @@ form th {
 	width: calc(100% - 35px - 35px);
 }
 
-.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	margin: -0.25rem 0 0 1rem;
-	padding: 0 0.75rem;
-	background: rgba(35, 35, 0, 0.15);
-	border-radius: 12px;
-	position: absolute;
-	left: 0;
-	line-height: 1.5rem;
-	text-align: center;
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	margin: 1.5em 0 0 0;
+	background-color: rgba(35, 35, 0, 0.15);
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	margin: 0.5em 0 0 0;
+	background-color: rgba(35, 35, 0, 0.15);
 }
 
 .feed.item.empty.active {

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 {

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 {

p/themes/Dark/dark.css

@@ -616,14 +616,18 @@ a.btn {
 }
 
 /*=== Aside main page (categories) */
-.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	margin: 10px 0;
-	padding: 0 10px;
-	background: inherit;
-	font-size: 0.9rem;
-	position: absolute;
-	right: 0;
-	line-height: 1.5rem;
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	background-color: #171717;
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	background-color: #222;
+	color: #888;
+}
+
+.aside.aside_feed .feed.active .item-title:not([data-unread="0"])::after {
+	border-color: #888;
+	color: #888;
 }
 
 /*=== Aside main page (feeds) */

p/themes/Dark/dark.rtl.css

@@ -616,14 +616,18 @@ a.btn {
 }
 
 /*=== Aside main page (categories) */
-.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	margin: 10px 0;
-	padding: 0 10px;
-	background: inherit;
-	font-size: 0.9rem;
-	position: absolute;
-	left: 0;
-	line-height: 1.5rem;
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	background-color: #171717;
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	background-color: #222;
+	color: #888;
+}
+
+.aside.aside_feed .feed.active .item-title:not([data-unread="0"])::after {
+	border-color: #888;
+	color: #888;
 }
 
 /*=== Aside main page (feeds) */

p/themes/Flat/flat.css

@@ -624,14 +624,12 @@ a.btn {
 }
 
 /*=== Aside main page (categories) */
-.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	margin: 10px 0;
-	padding: 0 10px;
-	background: inherit;
-	font-size: 0.9rem;
-	position: absolute;
-	right: 0;
-	line-height: 1.5rem;
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	background-color: #2c3e50;
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	background-color: #34495e;
 }
 
 /*=== Aside main page (feeds) */

p/themes/Flat/flat.rtl.css

@@ -624,14 +624,12 @@ a.btn {
 }
 
 /*=== Aside main page (categories) */
-.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	margin: 10px 0;
-	padding: 0 10px;
-	background: inherit;
-	font-size: 0.9rem;
-	position: absolute;
-	left: 0;
-	line-height: 1.5rem;
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	background-color: #2c3e50;
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	background-color: #34495e;
 }
 
 /*=== Aside main page (feeds) */

p/themes/Mapco/_sidebar.scss

@@ -79,19 +79,6 @@
 					color: variables.$sid-font-color;
 				}
 			}
-
-			.feed .item-title:not([data-unread="0"])::before {
-				margin: 11px 6px 0 4px;
-				padding: 3px 4px;
-				background: variables.$sid-pills;
-				display: block;
-				float: left;
-				font-size: 0.75rem;
-				border-radius: 12px;
-				content: attr(data-unread);
-				text-align: center;
-				line-height: 0.75rem;
-			}
 		}
 	}
 }
@@ -272,15 +259,14 @@
 	width: calc(100% - 35px - 35px);
 }
 
-.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	margin: -0.25rem 1rem 0 0;
-	padding: 0 0.75rem;
-	background: variables.$sid-pills;
-	border-radius: 12px;
-	position: absolute;
-	right: 0;
-	line-height: 1.5rem;
-	text-align: center;
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	margin: 1.5em 0 0 0;
+	background-color: variables.$sid-pills;
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	margin: 0.5em 0 0 0;
+	background-color: variables.$sid-pills;
 }
 
 .feed.item.empty.active {

p/themes/Mapco/mapco.css

@@ -579,18 +579,6 @@ form th {
 	text-decoration: none;
 	color: #ffffff;
 }
-.tree .tree-folder .tree-folder-items .feed .item-title:not([data-unread="0"])::before {
-	margin: 11px 6px 0 4px;
-	padding: 3px 4px;
-	background: rgba(0, 0, 0, 0.25);
-	display: block;
-	float: left;
-	font-size: 0.75rem;
-	border-radius: 12px;
-	content: attr(data-unread);
-	text-align: center;
-	line-height: 0.75rem;
-}
 
 /*=== Buttons */
 .stick {
@@ -721,15 +709,14 @@ form th {
 	width: calc(100% - 35px - 35px);
 }
 
-.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	margin: -0.25rem 1rem 0 0;
-	padding: 0 0.75rem;
-	background: rgba(0, 0, 0, 0.25);
-	border-radius: 12px;
-	position: absolute;
-	right: 0;
-	line-height: 1.5rem;
-	text-align: center;
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	margin: 1.5em 0 0 0;
+	background-color: rgba(0, 0, 0, 0.25);
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	margin: 0.5em 0 0 0;
+	background-color: rgba(0, 0, 0, 0.25);
 }
 
 .feed.item.empty.active {

p/themes/Mapco/mapco.rtl.css

@@ -579,18 +579,6 @@ form th {
 	text-decoration: none;
 	color: #ffffff;
 }
-.tree .tree-folder .tree-folder-items .feed .item-title:not([data-unread="0"])::before {
-	margin: 11px 4px 0 6px;
-	padding: 3px 4px;
-	background: rgba(0, 0, 0, 0.25);
-	display: block;
-	float: right;
-	font-size: 0.75rem;
-	border-radius: 12px;
-	content: attr(data-unread);
-	text-align: center;
-	line-height: 0.75rem;
-}
 
 /*=== Buttons */
 .stick {
@@ -721,15 +709,14 @@ form th {
 	width: calc(100% - 35px - 35px);
 }
 
-.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	margin: -0.25rem 0 0 1rem;
-	padding: 0 0.75rem;
-	background: rgba(0, 0, 0, 0.25);
-	border-radius: 12px;
-	position: absolute;
-	left: 0;
-	line-height: 1.5rem;
-	text-align: center;
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	margin: 1.5em 0 0 0;
+	background-color: rgba(0, 0, 0, 0.25);
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	margin: 0.5em 0 0 0;
+	background-color: rgba(0, 0, 0, 0.25);
 }
 
 .feed.item.empty.active {

p/themes/Origine-compact/origine-compact.css

@@ -657,14 +657,16 @@ a.btn,
 }
 
 /*=== Aside main page (categories) */
-.aside_feed .category .title:not([data-unread="0"])::after {
-	margin: 10px 0;
-	padding: 0 10px;
-	background: inherit;
-	font-size: 0.8rem;
-	position: absolute;
-	right: 0;
-	line-height: 0.9rem;
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	margin: 0.5em 0 0 0;
+	background-color: #f6f6f6;
+	color: #444;
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	margin: 0.75em 0 0 0;
+	background-color: white;
+	color: #444;
 }
 
 /*=== Aside main page (feeds) */

p/themes/Origine-compact/origine-compact.rtl.css

@@ -657,14 +657,16 @@ a.btn,
 }
 
 /*=== Aside main page (categories) */
-.aside_feed .category .title:not([data-unread="0"])::after {
-	margin: 10px 0;
-	padding: 0 10px;
-	background: inherit;
-	font-size: 0.8rem;
-	position: absolute;
-	left: 0;
-	line-height: 0.9rem;
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	margin: 0.5em 0 0 0;
+	background-color: #f6f6f6;
+	color: #444;
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	margin: 0.75em 0 0 0;
+	background-color: white;
+	color: #444;
 }
 
 /*=== Aside main page (feeds) */

p/themes/Origine/origine.css

@@ -626,14 +626,14 @@ a.btn {
 }
 
 /*=== Aside main page (categories) */
-.aside_feed .category .title:not([data-unread="0"])::after {
-	margin: 10px 0;
-	padding: 0 10px;
-	background: inherit;
-	font-size: 0.9rem;
-	position: absolute;
-	right: 0;
-	line-height: 1.5rem;
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	background-color: #f6f6f6;
+	color: #444;
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	background-color: white;
+	color: #444;
 }
 
 /*=== Aside main page (feeds) */

p/themes/Origine/origine.rtl.css

@@ -626,14 +626,14 @@ a.btn {
 }
 
 /*=== Aside main page (categories) */
-.aside_feed .category .title:not([data-unread="0"])::after {
-	margin: 10px 0;
-	padding: 0 10px;
-	background: inherit;
-	font-size: 0.9rem;
-	position: absolute;
-	left: 0;
-	line-height: 1.5rem;
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	background-color: #f6f6f6;
+	color: #444;
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	background-color: white;
+	color: #444;
 }
 
 /*=== Aside main page (feeds) */

p/themes/Pafat/pafat.css

@@ -603,13 +603,25 @@ a.signin {
 
 /*=== Aside main page (categories) */
 .aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	padding: 0px 5px;
-	font-size: 0.8rem;
+	margin: 0.5em 0 0 0;
+	background-color: white;
+	color: #428bca;
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	background-color: #5bc0de;
+	color: white;
+}
+
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	right: 5px;
+}
+
+.aside.aside_feed .feed.active .item-title:not([data-unread="0"])::after {
+	background-color: transparent;
+	color: white;
 	border: 1px solid #fff;
-	border-radius: 3px;
-	position: absolute;
-	top: 0.25rem; right: 3px;
-	line-height: 1.5rem;
+	font-weight: bold;
 }
 
 .aside_feed .tree-folder.all .tree-folder-title {

p/themes/Pafat/pafat.rtl.css

@@ -603,13 +603,25 @@ a.signin {
 
 /*=== Aside main page (categories) */
 .aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	padding: 0px 5px;
-	font-size: 0.8rem;
+	margin: 0.5em 0 0 0;
+	background-color: white;
+	color: #428bca;
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	background-color: #5bc0de;
+	color: white;
+}
+
+.aside.aside_feed .category .title:not([data-unread="0"])::after {
+	left: 5px;
+}
+
+.aside.aside_feed .feed.active .item-title:not([data-unread="0"])::after {
+	background-color: transparent;
+	color: white;
 	border: 1px solid #fff;
-	border-radius: 3px;
-	position: absolute;
-	top: 0.25rem; left: 3px;
-	line-height: 1.5rem;
+	font-weight: bold;
 }
 
 .aside_feed .tree-folder.all .tree-folder-title {

p/themes/Screwdriver/screwdriver.css

@@ -673,12 +673,14 @@ 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.aside_feed .category .title:not([data-unread="0"])::after {
+	background-color: #d18114;
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	background-color: #222;
+	color: #ccc;
+	border: 1px solid #333;
 }
 
 .aside_feed .btn-important {

p/themes/Screwdriver/screwdriver.rtl.css

@@ -673,12 +673,14 @@ 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.aside_feed .category .title:not([data-unread="0"])::after {
+	background-color: #d18114;
+}
+
+.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	background-color: #222;
+	color: #ccc;
+	border: 1px solid #333;
 }
 
 .aside_feed .btn-important {

p/themes/Swage/swage.css

@@ -614,14 +614,13 @@ form th {
 	right: 33px;
 }
 
-.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	margin: 6px 0;
-	padding: 0 10px;
-	background: inherit;
-	font-size: 0.9rem;
-	position: absolute;
-	right: 0;
-	line-height: 1.5rem;
+.aside_feed .category .title:not([data-unread="0"])::after {
+	background-color: #00488b;
+	color: #fcfcfc;
+}
+.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	background-color: #0062be;
+	color: #fcfcfc;
 }
 .aside_feed .tree-folder-items .dropdown-menu::after {
 	left: 2px;

p/themes/Swage/swage.rtl.css

@@ -614,14 +614,13 @@ form th {
 	left: 33px;
 }
 
-.aside_feed .tree-folder-title > .title:not([data-unread="0"])::after {
-	margin: 6px 0;
-	padding: 0 10px;
-	background: inherit;
-	font-size: 0.9rem;
-	position: absolute;
-	left: 0;
-	line-height: 1.5rem;
+.aside_feed .category .title:not([data-unread="0"])::after {
+	background-color: #00488b;
+	color: #fcfcfc;
+}
+.aside_feed .feed .item-title:not([data-unread="0"])::after {
+	background-color: #0062be;
+	color: #fcfcfc;
 }
 .aside_feed .tree-folder-items .dropdown-menu::after {
 	right: 2px;

p/themes/Swage/swage.scss

@@ -780,14 +780,14 @@ form {
 }
 
 .aside_feed {
-	.tree-folder-title > .title:not([data-unread="0"])::after {
-		margin: 6px 0;
-		padding: 0 10px;
-		background: inherit;
-		font-size: 0.9rem;
-		position: absolute;
-		right: 0;
-		line-height: 1.5rem;
+	.category .title:not([data-unread="0"])::after {
+		background-color: #00488b;
+		color: #fcfcfc;
+	}
+
+	.feed .item-title:not([data-unread="0"])::after {
+		background-color: #0062be;
+		color: #fcfcfc;
 	}
 
 	.tree-folder-items .dropdown-menu::after {

p/themes/base-theme/template.css

@@ -614,6 +614,10 @@ a.btn {
 	text-overflow: ellipsis;
 }
 
+.tree-folder-items .item.feed {
+	position: relative;
+}
+
 .tree-bottom {
 	visibility: hidden;
 	margin-bottom: 18em;
@@ -684,7 +688,7 @@ input[type="search"] {
 }
 
 .aside_feed .category .title:not([data-unread="0"]) {
-	width: calc(100% - 35px - 20px);
+	width: calc(100% - 75px);
 }
 
 .aside_feed .tree-folder-title .icon {
@@ -1310,21 +1314,42 @@ input:checked + .slide-container .properties {
 
 /*=== DIVERS */
 /*===========*/
-.category .title:not([data-unread="0"])::after {
-	content: attr(data-unread);
-}
-
 .category .title.error::before {
 	content: "⚠ ";
 	color: #bd362f;
 }
 
-.feed .item-title:not([data-unread="0"])::before {
-	content: "(" attr(data-unread) ") ";
+.category .title:not([data-unread="0"])::after,
+.feed .item-title:not([data-unread="0"])::after {
+	margin: 0.75em 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.9em;
+	border-radius: 12px;
+	line-height: 1;
+	font-weight: initial;
+}
+
+.feed .item-title:not([data-unread="0"])::after {
+	margin: 1em 0 0 0;
+}
+
+.feed.active .item-title:not([data-unread="0"])::after {
+	background-color: transparent;
+	color: white;
+	border: 1px solid #fff;
+	font-weight: bold;
 }
 
 .feed .item-title:not([data-unread="0"]) {
 	font-weight: bold;
+	width: calc(100% - 80px);
 }
 
 .state_unread .category:not(.active)[data-unread="0"],

p/themes/base-theme/template.rtl.css

@@ -614,6 +614,10 @@ a.btn {
 	text-overflow: ellipsis;
 }
 
+.tree-folder-items .item.feed {
+	position: relative;
+}
+
 .tree-bottom {
 	visibility: hidden;
 	margin-bottom: 18em;
@@ -684,7 +688,7 @@ input[type="search"] {
 }
 
 .aside_feed .category .title:not([data-unread="0"]) {
-	width: calc(100% - 35px - 20px);
+	width: calc(100% - 75px);
 }
 
 .aside_feed .tree-folder-title .icon {
@@ -1310,21 +1314,42 @@ input:checked + .slide-container .properties {
 
 /*=== DIVERS */
 /*===========*/
-.category .title:not([data-unread="0"])::after {
-	content: attr(data-unread);
-}
-
 .category .title.error::before {
 	content: "⚠ ";
 	color: #bd362f;
 }
 
-.feed .item-title:not([data-unread="0"])::before {
-	content: "(" attr(data-unread) ") ";
+.category .title:not([data-unread="0"])::after,
+.feed .item-title:not([data-unread="0"])::after {
+	margin: 0.75em 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.9em;
+	border-radius: 12px;
+	line-height: 1;
+	font-weight: initial;
+}
+
+.feed .item-title:not([data-unread="0"])::after {
+	margin: 1em 0 0 0;
+}
+
+.feed.active .item-title:not([data-unread="0"])::after {
+	background-color: transparent;
+	color: white;
+	border: 1px solid #fff;
+	font-weight: bold;
 }
 
 .feed .item-title:not([data-unread="0"]) {
 	font-weight: bold;
+	width: calc(100% - 80px);
 }
 
 .state_unread .category:not(.active)[data-unread="0"],