fix: CSS "content:" (#4985)

* fix

* frss.css

* improve bubble for unread articles in global  view

31 files changed, 96 insertions, 84 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index b85ef2232..8106f775b 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -582,7 +582,8 @@ kbd {
 
 .aside.aside_feed .category .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 {
+.global .box.category .title:not([data-unread="0"])::after,
+.global .feed .item-title:not([data-unread="0"])::after {
 	background-color: var(--background-color-dark);
 	color: var(--font-color-middle);
 }
@@ -991,6 +992,10 @@ kbd {
 	text-shadow: none;
 }
 
+#stream.global .feed .item-title:not([data-unread="0"])::after {
+	margin: 1rem 0px 0px;
+}
+
 /*=== Slider */
 #slider {
 	background: var(--background-color-dark);
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 69d290121..d40403fc8 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -582,7 +582,8 @@ kbd {
 
 .aside.aside_feed .category .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 {
+.global .box.category .title:not([data-unread="0"])::after,
+.global .feed .item-title:not([data-unread="0"])::after {
 	background-color: var(--background-color-dark);
 	color: var(--font-color-middle);
 }
@@ -991,6 +992,10 @@ kbd {
 	text-shadow: none;
 }
 
+#stream.global .feed .item-title:not([data-unread="0"])::after {
+	margin: 1rem 0px 0px;
+}
+
 /*=== Slider */
 #slider {
 	background: var(--background-color-dark);
diff --git a/p/themes/Ansum/_forms.scss b/p/themes/Ansum/_forms.scss
index 239934040..4f3f9e698 100644
--- a/p/themes/Ansum/_forms.scss
+++ b/p/themes/Ansum/_forms.scss
@@ -130,7 +130,6 @@ input.extend {
 	border-radius: 3px;
 
 	&::after {
-		content: "";
 		display: block;
 		clear: both;
 	}
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 9b5990414..5c7433fce 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -173,7 +173,6 @@ input.extend {
 	border-radius: 3px;
 }
 .form-group::after {
-	content: "";
 	display: block;
 	clear: both;
 }
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index b5450ad20..d8e6eaa99 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -173,7 +173,6 @@ input.extend {
 	border-radius: 3px;
 }
 .form-group::after {
-	content: "";
 	display: block;
 	clear: both;
 }
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index 98e63b1e8..e37f35228 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -323,7 +323,6 @@ a.btn {
 	height: 10px;
 	border-top: 1px solid #171717;
 	border-left: 1px solid #171717;
-	content: "";
 	position: absolute;
 	top: -6px;
 	right: 13px;
@@ -1039,6 +1038,10 @@ a.btn {
 	color: #222;
 }
 
+#stream.global .feed .item-title:not([data-unread="0"])::after {
+	margin-top: 1rem;
+}
+
 /*=== PANEL */
 /*===========*/
 #panel {
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index 43c572abd..faa7250f3 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -323,7 +323,6 @@ a.btn {
 	height: 10px;
 	border-top: 1px solid #171717;
 	border-right: 1px solid #171717;
-	content: "";
 	position: absolute;
 	top: -6px;
 	left: 13px;
@@ -1039,6 +1038,10 @@ a.btn {
 	color: #222;
 }
 
+#stream.global .feed .item-title:not([data-unread="0"])::after {
+	margin-top: 1rem;
+}
+
 /*=== PANEL */
 /*===========*/
 #panel {
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 3facb1abf..3ddb59755 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -911,6 +911,11 @@ a.btn {
 	text-shadow: none;
 }
 
+#stream.global .feed .item-title:not([data-unread="0"])::after {
+	background-color: #171717;
+	margin-top: 1rem;
+}
+
 /*=== Panel */
 #panel {
 	background: #1c1c1c;
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index 6871c2b57..faea0df5e 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -911,6 +911,11 @@ a.btn {
 	text-shadow: none;
 }
 
+#stream.global .feed .item-title:not([data-unread="0"])::after {
+	background-color: #171717;
+	margin-top: 1rem;
+}
+
 /*=== Panel */
 #panel {
 	background: #1c1c1c;
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index b6b291198..c6c2a6aec 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -103,7 +103,6 @@ form th {
 }
 
 .form-group::after {
-	content: "";
 	display: block;
 	clear: both;
 }
@@ -445,7 +444,6 @@ a.btn {
 
 .box .box-content .item {
 	font-size: 0.9rem;
-	line-height: 2.5em;
 }
 
 .box .box-title .configure .icon,
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index aa89334c9..2ef0e42ea 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -103,7 +103,6 @@ form th {
 }
 
 .form-group::after {
-	content: "";
 	display: block;
 	clear: both;
 }
@@ -445,7 +444,6 @@ a.btn {
 
 .box .box-content .item {
 	font-size: 0.9rem;
-	line-height: 2.5em;
 }
 
 .box .box-title .configure .icon,
diff --git a/p/themes/Mapco/_forms.scss b/p/themes/Mapco/_forms.scss
index 2a2ac92ad..479f40d44 100644
--- a/p/themes/Mapco/_forms.scss
+++ b/p/themes/Mapco/_forms.scss
@@ -129,7 +129,6 @@ input.extend {
 	border-radius: 3px;
 
 	&::after {
-		content: "";
 		display: block;
 		clear: both;
 	}
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 482944016..94be46e9f 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -172,7 +172,6 @@ input.extend {
 	border-radius: 3px;
 }
 .form-group::after {
-	content: "";
 	display: block;
 	clear: both;
 }
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 2a6bf5311..5b042c849 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -172,7 +172,6 @@ input.extend {
 	border-radius: 3px;
 }
 .form-group::after {
-	content: "";
 	display: block;
 	clear: both;
 }
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index 85648aba3..e0eda2af9 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -388,7 +388,6 @@ img.favicon {
 .box .box-content .item {
 	padding: 0 10px;
 	font-size: 0.9rem;
-	line-height: 2.5em;
 }
 
 /*=== Draggable */
@@ -524,10 +523,6 @@ img.favicon {
 
 }
 
-.category .title:not([data-unread="0"])::after {
-	content: attr(data-unread);
-}
-
 li.item.active {
 	background-color: var(--bg);
 	font-weight: bold;
@@ -754,7 +749,6 @@ li.item.active {
 /*===========*/
 .category .title.error::before {
 	color: var(--accent-light);
-	content: "⚠ ";
 }
 
 
@@ -794,11 +788,6 @@ li.item.active {
 	.flux_content .content a {
 		color: #000;
 	}
-
-	.flux_content .content a::after {
-		content: " [" attr(href) "] ";
-		font-style: italic;
-	}
 }
 
 /*=== PREVIEW */
@@ -834,15 +823,6 @@ li.item.active {
 	margin: -1px;
 }
 
-.feed .item-title:not([data-unread="0"])::before {
-	content: "(" attr(data-unread) ") ";
-	display: none
-}
-
-.feed .item-title:not([data-unread="0"])::after {
-	content: " (" attr(data-unread) ")";
-}
-
 
 /*BEGINS BASE.CSS*/
 
@@ -899,7 +879,6 @@ input.extend {
 
 /*=== Dropdown */
 .dropdown-menu::after {
-	content: "";
 	position: absolute;
 	top: -6px;
 	right: 13px;
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index b5f5d19e6..d2b5146a1 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -388,7 +388,6 @@ img.favicon {
 .box .box-content .item {
 	padding: 0 10px;
 	font-size: 0.9rem;
-	line-height: 2.5em;
 }
 
 /*=== Draggable */
@@ -524,10 +523,6 @@ img.favicon {
 
 }
 
-.category .title:not([data-unread="0"])::after {
-	content: attr(data-unread);
-}
-
 li.item.active {
 	background-color: var(--bg);
 	font-weight: bold;
@@ -754,7 +749,6 @@ li.item.active {
 /*===========*/
 .category .title.error::before {
 	color: var(--accent-light);
-	content: "⚠ ";
 }
 
 
@@ -794,11 +788,6 @@ li.item.active {
 	.flux_content .content a {
 		color: #000;
 	}
-
-	.flux_content .content a::after {
-		content: " [" attr(href) "] ";
-		font-style: italic;
-	}
 }
 
 /*=== PREVIEW */
@@ -834,15 +823,6 @@ li.item.active {
 	margin: -1px;
 }
 
-.feed .item-title:not([data-unread="0"])::before {
-	content: "(" attr(data-unread) ") ";
-	display: none
-}
-
-.feed .item-title:not([data-unread="0"])::after {
-	content: " (" attr(data-unread) ")";
-}
-
 
 /*BEGINS BASE.CSS*/
 
@@ -899,7 +879,6 @@ input.extend {
 
 /*=== Dropdown */
 .dropdown-menu::after {
-	content: "";
 	position: absolute;
 	top: -6px;
 	left: 13px;
diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css
index f5de75adc..bea5d5cf6 100644
--- a/p/themes/Origine-compact/origine-compact.css
+++ b/p/themes/Origine-compact/origine-compact.css
@@ -77,6 +77,10 @@ a.btn,
 	font-size: 0.8rem;
 }
 
+#stream.global .feed .item-title:not([data-unread="0"])::after {
+	margin-top: 0.125rem;
+}
+
 .aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css
index b1ac6fb54..8929847bb 100644
--- a/p/themes/Origine-compact/origine-compact.rtl.css
+++ b/p/themes/Origine-compact/origine-compact.rtl.css
@@ -77,6 +77,10 @@ a.btn,
 	font-size: 0.8rem;
 }
 
+#stream.global .feed .item-title:not([data-unread="0"])::after {
+	margin-top: 0.125rem;
+}
+
 .aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 6cc9c6bd1..fd119fe19 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -679,7 +679,8 @@ a:hover .icon {
 
 /*=== Aside main page (categories) */
 .aside.aside_feed .category .title:not([data-unread="0"])::after,
-.global .box.category .title:not([data-unread="0"])::after {
+.global .box.category .title:not([data-unread="0"])::after,
+.global .feed .item-title:not([data-unread="0"])::after {
 	background-color: var(--background-color-light-shadowed);
 	color: var(--font-color-grey);
 }
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index b7e142a08..9127ac9e8 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -679,7 +679,8 @@ a:hover .icon {
 
 /*=== Aside main page (categories) */
 .aside.aside_feed .category .title:not([data-unread="0"])::after,
-.global .box.category .title:not([data-unread="0"])::after {
+.global .box.category .title:not([data-unread="0"])::after,
+.global .feed .item-title:not([data-unread="0"])::after {
 	background-color: var(--background-color-light-shadowed);
 	color: var(--font-color-grey);
 }
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 8b3124e72..5a7fb876f 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -476,7 +476,6 @@ a.btn {
 
 .box .box-content .item {
 	font-size: 0.9rem;
-	line-height: 2.5;
 }
 
 /*=== Tree */
@@ -540,7 +539,6 @@ a.btn {
 	background-color: var(--background-color-white);
 	width: 0.5rem;
 	height: 0.5rem;
-	content: "";
 	position: absolute;
 	top: 1rem;
 	left: -0.25rem;
@@ -1022,6 +1020,11 @@ a.signin {
 	border: none;
 }
 
+#stream.global .feed .item-title:not([data-unread="0"])::after {
+	background-color: var(--background-color-category);
+	color: var(--font-color-white);
+}
+
 /*=== DIVERS */
 /*===========*/
 .aside.aside_feed .nav-form input,
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index d0f2436d7..0181e60ed 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -476,7 +476,6 @@ a.btn {
 
 .box .box-content .item {
 	font-size: 0.9rem;
-	line-height: 2.5;
 }
 
 /*=== Tree */
@@ -540,7 +539,6 @@ a.btn {
 	background-color: var(--background-color-white);
 	width: 0.5rem;
 	height: 0.5rem;
-	content: "";
 	position: absolute;
 	top: 1rem;
 	right: -0.25rem;
@@ -1022,6 +1020,11 @@ a.signin {
 	border: none;
 }
 
+#stream.global .feed .item-title:not([data-unread="0"])::after {
+	background-color: var(--background-color-category);
+	color: var(--font-color-white);
+}
+
 /*=== DIVERS */
 /*===========*/
 .aside.aside_feed .nav-form input,
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index 75662404d..39d1dd152 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -471,7 +471,6 @@ a.btn {
 
 .box .box-content .item {
 	font-size: 0.9rem;
-	line-height: 2.5em;
 }
 
 /*=== Tree */
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index 736fc642e..e29b0e1b2 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -471,7 +471,6 @@ a.btn {
 
 .box .box-content .item {
 	font-size: 0.9rem;
-	line-height: 2.5em;
 }
 
 /*=== Tree */
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 2c1de119a..0ebdfa3fb 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -71,7 +71,6 @@ select:invalid {
 }
 
 .flux::after, .form-group::after {
-	content: "";
 	display: block;
 	clear: both;
 }
@@ -329,9 +328,6 @@ form th {
 .dropdown-menu .dropdown-section .item a:hover {
 	background-color: var(--color-background-nav);
 }
-.dropdown-menu::after {
-	content: none;
-}
 .dropdown-menu > .item {
 	padding: 0 0 0 0.5rem;
 }
@@ -488,7 +484,6 @@ form th {
 .box .box-content .item {
 	padding: 0 10px;
 	font-size: 0.9rem;
-	line-height: 2.5;
 }
 .box .box-content .item .configure .icon {
 	vertical-align: middle;
@@ -1169,4 +1164,6 @@ button.as-link {
 
 #slider label {
 	min-height: initial;
-}
\ No newline at end of file
+}
+
+/*# sourceMappingURL=swage.css.map */
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 79ef84c39..f8f031567 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -71,7 +71,6 @@ select:invalid {
 }
 
 .flux::after, .form-group::after {
-	content: "";
 	display: block;
 	clear: both;
 }
@@ -329,9 +328,6 @@ form th {
 .dropdown-menu .dropdown-section .item a:hover {
 	background-color: var(--color-background-nav);
 }
-.dropdown-menu::after {
-	content: none;
-}
 .dropdown-menu > .item {
 	padding: 0 0.5rem 0 0;
 }
@@ -488,7 +484,6 @@ form th {
 .box .box-content .item {
 	padding: 0 10px;
 	font-size: 0.9rem;
-	line-height: 2.5;
 }
 .box .box-content .item .configure .icon {
 	vertical-align: middle;
@@ -1169,4 +1164,4 @@ button.as-link {
 
 #slider label {
 	min-height: initial;
-}
\ No newline at end of file
+}
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index 41221665c..a0570bb16 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -89,7 +89,6 @@ $color_hover:	#fff;
 }
 
 %after {
-	content: "";
 	display: block;
 	clear: both;
 }
@@ -429,10 +428,6 @@ form {
 		}
 	}
 
-	&::after {
-		content: none;
-	}
-
 	> {
 		.item {
 
@@ -626,7 +621,6 @@ form {
 		.item {
 			padding: 0 10px;
 			font-size: 0.9rem;
-			line-height: 2.5;
 
 			.configure {
 				.icon {
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index e569d4b41..cd133939d 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -218,7 +218,6 @@ a.btn {
 }
 
 .dropdown-menu::after {
-	content: "";
 	position: absolute;
 	top: -6px;
 	right: 13px;
diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css
index 89d5789d7..ab5156b68 100644
--- a/p/themes/base-theme/base.rtl.css
+++ b/p/themes/base-theme/base.rtl.css
@@ -218,7 +218,6 @@ a.btn {
 }
 
 .dropdown-menu::after {
-	content: "";
 	position: absolute;
 	top: -6px;
 	left: 13px;
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 19d9b5884..8bd4a7e99 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1871,6 +1871,26 @@ input:checked + .slide-container .properties {
 	margin: 1em 0 0 0;
 }
 
+#stream.global .feed {
+	position: relative;
+}
+
+#stream.global .feed .item-title:not([data-unread="0"])::after {
+	margin: 0.5rem 0px 0px;
+	padding: 5px 10px;
+	min-width: 20px;
+	display: block;
+	content: attr(data-unread);
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	text-align: center;
+	font-size: 0.75rem;
+	border-radius: 12px;
+	line-height: 1;
+	font-weight: initial;
+}
+
 .feed.active .item-title:not([data-unread="0"])::after {
 	color: var(--frss-font-color-light);
 	border: 1px solid var(--frss-border-color);
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 445f1637f..9e5221126 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1871,6 +1871,26 @@ input:checked + .slide-container .properties {
 	margin: 1em 0 0 0;
 }
 
+#stream.global .feed {
+	position: relative;
+}
+
+#stream.global .feed .item-title:not([data-unread="0"])::after {
+	margin: 0.5rem 0px 0px;
+	padding: 5px 10px;
+	min-width: 20px;
+	display: block;
+	content: attr(data-unread);
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	text-align: center;
+	font-size: 0.75rem;
+	border-radius: 12px;
+	line-height: 1;
+	font-weight: initial;
+}
+
 .feed.active .item-title:not([data-unread="0"])::after {
 	color: var(--frss-font-color-light);
 	border: 1px solid var(--frss-border-color);