fix: unread counter (#4788)

* fix

* fix

* fix

19 files changed, 96 insertions, 71 deletions

diff --git a/p/themes/Ansum/_sidebar.scss b/p/themes/Ansum/_sidebar.scss
index 164f61da0..7aaa6b0a8 100644
--- a/p/themes/Ansum/_sidebar.scss
+++ b/p/themes/Ansum/_sidebar.scss
@@ -18,7 +18,7 @@
 		box-shadow: inset -1px -11px 8px #0003;
 
 		.tree-folder-title {
-			padding: 12px 16px;
+			padding: 1rem;
 			background: variables.$sid-bg;
 			position: relative;
 			font-size: 0.85rem;
@@ -232,7 +232,7 @@
 }
 
 .aside.aside_feed .category .title:not([data-unread="0"])::after {
-	margin: 1.5em 0 0 0;
+	margin: 1rem 0 0 0;
 	background-color: variables.$sid-pills;
 }
 
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index bab784b98..6d6deae0c 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -462,7 +462,7 @@ form th {
 	box-shadow: inset -1px -11px 8px rgba(0, 0, 0, 0.2);
 }
 .tree .tree-folder .tree-folder-title {
-	padding: 12px 16px;
+	padding: 1rem 1rem;
 	background: #fbf9f6;
 	position: relative;
 	font-size: 0.85rem;
@@ -616,7 +616,7 @@ form th {
 }
 
 .aside.aside_feed .category .title:not([data-unread="0"])::after {
-	margin: 1.5em 0 0 0;
+	margin: 1rem 0 0 0;
 	background-color: rgba(35, 35, 0, 0.15);
 }
 
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 53b4c4bb0..9bf9d2e9a 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -462,7 +462,7 @@ form th {
 	box-shadow: inset 1px -11px 8px rgba(0, 0, 0, 0.2);
 }
 .tree .tree-folder .tree-folder-title {
-	padding: 12px 16px;
+	padding: 1rem 1rem;
 	background: #fbf9f6;
 	position: relative;
 	font-size: 0.85rem;
@@ -616,7 +616,7 @@ form th {
 }
 
 .aside.aside_feed .category .title:not([data-unread="0"])::after {
-	margin: 1.5em 0 0 0;
+	margin: 1rem 0 0 0;
 	background-color: rgba(35, 35, 0, 0.15);
 }
 
diff --git a/p/themes/Ansum/icons/down.svg b/p/themes/Ansum/icons/down.svg
index 5c732e199..ee1fc8072 100644
--- a/p/themes/Ansum/icons/down.svg
+++ b/p/themes/Ansum/icons/down.svg
@@ -1,19 +1,19 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="16"
-   height="10"
-   viewBox="0 0 16 10"
+   height="16"
+   viewBox="0 0 16 16"
    version="1.1"
    id="svg5"
    sodipodi:docname="down.svg"
-   inkscape:version="0.92.3 (unknown)">
+   inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
   <metadata
      id="metadata11">
     <rdf:RDF>
@@ -22,7 +22,6 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -47,9 +46,13 @@
      inkscape:window-x="0"
      inkscape:window-y="27"
      inkscape:window-maximized="1"
-     inkscape:current-layer="svg5" />
+     inkscape:current-layer="svg5"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1" />
   <g
-     id="surface2">
+     id="surface2"
+     transform="translate(-0.09375,3.091797)">
     <path
        style="fill:#515151;fill-opacity:1;fill-rule:nonzero;stroke:none"
        d="M 1.800781,0.347656 0.386719,1.761719 8.09375,9.46875 15.800781,1.761719 14.386719,0.347656 8.09375,6.640625 Z m 0,0"
diff --git a/p/themes/Mapco/_sidebar.scss b/p/themes/Mapco/_sidebar.scss
index 6d4736e55..77438c836 100644
--- a/p/themes/Mapco/_sidebar.scss
+++ b/p/themes/Mapco/_sidebar.scss
@@ -18,7 +18,7 @@
 		border-bottom: 1px solid variables.$sid-sep;
 
 		.tree-folder-title {
-			padding: 12px 16px;
+			padding: 1rem;
 			background: variables.$sid-bg;
 			position: relative;
 			font-size: 0.85rem;
@@ -231,7 +231,7 @@
 }
 
 .aside.aside_feed .category .title:not([data-unread="0"])::after {
-	margin: 1.5em 0 0 0;
+	margin: 1rem 0 0 0;
 	background-color: variables.$sid-pills;
 }
 
diff --git a/p/themes/Mapco/icons/down.svg b/p/themes/Mapco/icons/down.svg
index 2ffcf409b..f9e06de8a 100644
--- a/p/themes/Mapco/icons/down.svg
+++ b/p/themes/Mapco/icons/down.svg
@@ -1,3 +1,30 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="10">
-  <path fill="#666" d="M1.8.348.388 1.762l7.707 7.707L15.8 1.762 14.387.348 8.094 6.64Zm0 0"/>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="16"
+   height="16"
+   version="1.1"
+   id="svg5269"
+   sodipodi:docname="down.svg"
+   inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs5273" />
+  <sodipodi:namedview
+     id="namedview5271"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:current-layer="svg5269" />
+  <path
+     fill="#666666"
+     d="m 1.706,3.4395 -1.412,1.414 7.707,7.707 7.705,-7.707 L 14.293,3.4395 8,9.7315 Z m 0,0"
+     id="path5267" />
 </svg>
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index f9fd4c4fb..7b5f81057 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -474,7 +474,7 @@ form th {
 	border-bottom: 1px solid #3f3f3f;
 }
 .tree .tree-folder .tree-folder-title {
-	padding: 12px 16px;
+	padding: 1rem;
 	background: #303136;
 	position: relative;
 	font-size: 0.85rem;
@@ -628,7 +628,7 @@ form th {
 }
 
 .aside.aside_feed .category .title:not([data-unread="0"])::after {
-	margin: 1.5em 0 0 0;
+	margin: 1rem 0 0 0;
 	background-color: rgba(0, 0, 0, 0.25);
 }
 
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 16e9fc8d2..5b1a980c3 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -474,7 +474,7 @@ form th {
 	border-bottom: 1px solid #3f3f3f;
 }
 .tree .tree-folder .tree-folder-title {
-	padding: 12px 16px;
+	padding: 1rem;
 	background: #303136;
 	position: relative;
 	font-size: 0.85rem;
@@ -628,7 +628,7 @@ form th {
 }
 
 .aside.aside_feed .category .title:not([data-unread="0"])::after {
-	margin: 1.5em 0 0 0;
+	margin: 1rem 0 0 0;
 	background-color: rgba(0, 0, 0, 0.25);
 }
 
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index 4439a07d4..eb207c2b5 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -395,9 +395,8 @@ img.favicon {
 
 .tree-folder-title {
 	position: relative;
-	padding: 0 10px;
+	padding: 0.25rem 0.75rem;
 	font-size: 1rem;
-	line-height: 2.1rem;
 }
 
 .tree-folder-title .title:hover {
@@ -1017,7 +1016,6 @@ input.extend {
 	margin: 10px 0;
 	padding: 0 10px;
 	font-size: 0.9rem;
-	line-height: 1.5rem;
 }
 
 /*=== Aside main page (feeds) */
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index d60a732ba..fc0e4fbc0 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -395,9 +395,8 @@ img.favicon {
 
 .tree-folder-title {
 	position: relative;
-	padding: 0 10px;
+	padding: 0.25rem 0.75rem;
 	font-size: 1rem;
-	line-height: 2.1rem;
 }
 
 .tree-folder-title .title:hover {
@@ -1017,7 +1016,6 @@ input.extend {
 	margin: 10px 0;
 	padding: 0 10px;
 	font-size: 0.9rem;
-	line-height: 1.5rem;
 }
 
 /*=== Aside main page (feeds) */
diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css
index 6d2205a68..880af2433 100644
--- a/p/themes/Origine-compact/origine-compact.css
+++ b/p/themes/Origine-compact/origine-compact.css
@@ -103,11 +103,11 @@ a.btn,
 /*=== Aside main page (categories) */
 .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;
+	margin: 0.4em 0 0 0;
 }
 
 .aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
-	margin: 0.75em 0 0 0;
+	margin: 0.5em 0 0 0;
 }
 
 /*=== Day indication */
diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css
index 8e949ba51..cfa978650 100644
--- a/p/themes/Origine-compact/origine-compact.rtl.css
+++ b/p/themes/Origine-compact/origine-compact.rtl.css
@@ -103,11 +103,11 @@ a.btn,
 /*=== Aside main page (categories) */
 .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;
+	margin: 0.4em 0 0 0;
 }
 
 .aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
-	margin: 0.75em 0 0 0;
+	margin: 0.5em 0 0 0;
 }
 
 /*=== Day indication */
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 9690cdcd5..b01fb8c18 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -431,7 +431,7 @@ a.btn {
 
 .tree-folder-title {
 	margin: 5px;
-	padding: 0 10px;
+	padding: 0.125rem 0.5rem;
 	background: #5bc0de;
 	color: #fff;
 	font-size: 0.9rem;
@@ -549,7 +549,7 @@ a.signin {
 }
 
 .aside.aside_feed .category .title:not([data-unread="0"])::after {
-	right: 5px;
+	right: 0.5rem;
 }
 
 .aside.aside_feed .feed.active .item-title:not([data-unread="0"])::after {
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 987a7cc32..ab9f29cf5 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -431,7 +431,7 @@ a.btn {
 
 .tree-folder-title {
 	margin: 5px;
-	padding: 0 10px;
+	padding: 0.125rem 0.5rem;
 	background: #5bc0de;
 	color: #fff;
 	font-size: 0.9rem;
@@ -549,7 +549,7 @@ a.signin {
 }
 
 .aside.aside_feed .category .title:not([data-unread="0"])::after {
-	left: 5px;
+	left: 0.5rem;
 }
 
 .aside.aside_feed .feed.active .item-title:not([data-unread="0"])::after {
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 03f721be6..ca72e596c 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -549,19 +549,17 @@ form th {
 	margin: 10px 0;
 }
 
-.tree-folder-title {
-	padding: 0 10px;
+.aside_feed .tree-folder-title {
+	padding: 0.3rem 0.75rem;
 	background: #22303d;
-	height: 35px;
 	font-size: 1rem;
 	position: relative;
-	line-height: 2rem;
 }
-.tree-folder-title .title {
+.aside_feed .tree-folder-title .title {
 	background: inherit;
 	color: #fcfcfc;
 }
-.tree-folder-title .title:hover {
+.aside_feed .tree-folder-title .title:hover {
 	text-decoration: none;
 }
 
@@ -665,6 +663,7 @@ form th {
 }
 
 .aside_feed .category .title:not([data-unread="0"])::after {
+	margin: 0.5rem 0 0 0;
 	background-color: #00488b;
 	color: #fcfcfc;
 }
@@ -789,6 +788,7 @@ form th {
 .flux:hover:not(.current):hover .item.title,
 .flux .current:not(.current):hover .item.title {
 	background: #fff;
+	top: 0.15rem;
 }
 .flux.favorite:not(.current) {
 	background: #fff6da;
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index d6aea4151..b9b66bc13 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -549,19 +549,17 @@ form th {
 	margin: 10px 0;
 }
 
-.tree-folder-title {
-	padding: 0 10px;
+.aside_feed .tree-folder-title {
+	padding: 0.3rem 0.75rem;
 	background: #22303d;
-	height: 35px;
 	font-size: 1rem;
 	position: relative;
-	line-height: 2rem;
 }
-.tree-folder-title .title {
+.aside_feed .tree-folder-title .title {
 	background: inherit;
 	color: #fcfcfc;
 }
-.tree-folder-title .title:hover {
+.aside_feed .tree-folder-title .title:hover {
 	text-decoration: none;
 }
 
@@ -665,6 +663,7 @@ form th {
 }
 
 .aside_feed .category .title:not([data-unread="0"])::after {
+	margin: 0.5rem 0 0 0;
 	background-color: #00488b;
 	color: #fcfcfc;
 }
@@ -789,6 +788,7 @@ form th {
 .flux:hover:not(.current):hover .item.title,
 .flux .current:not(.current):hover .item.title {
 	background: #fff;
+	top: 0.15rem;
 }
 .flux.favorite:not(.current) {
 	background: #fff6da;
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index 26b5096bc..d497865d1 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -711,13 +711,11 @@ form {
 	margin: 10px 0;
 }
 
-.tree-folder-title {
-	padding: 0 10px;
+.aside_feed .tree-folder-title {
+	padding: 0.3rem 0.75rem;
 	background: $color_aside;
-	height: 35px;
 	font-size: 1rem;
 	position: relative;
-	line-height: 2rem;
 
 	.title {
 		background: inherit;
@@ -865,6 +863,7 @@ form {
 
 .aside_feed {
 	.category .title:not([data-unread="0"])::after {
+		margin: 0.5rem 0 0 0;
 		background-color: #00488b;
 		color: #fcfcfc;
 	}
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 1cc030c46..0ca3b694c 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1050,11 +1050,11 @@ input[type="search"] {
 }
 
 .aside_feed .tree-folder-title .icon {
-	padding: 5px;
+	padding: 0 0.25rem;
 }
 
 .aside_feed .tree-folder-items .item.feed {
-	padding: 0px 15px;
+	padding: 0 0.75rem;
 }
 
 .aside_feed .tree-folder-items:not(.active) {
@@ -1770,17 +1770,17 @@ input:checked + .slide-container .properties {
 
 .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;
+	margin: 0.6rem 0 0 0;
+	padding: 0.25rem 0.5rem;
+	min-width: 2rem;
 	display: block;
 	content: attr(data-unread);
 	position: absolute;
 	top: 0;
-	right: 10px;
+	right: 0.75rem;
 	text-align: center;
 	font-size: 0.9rem;
-	border-radius: 12px;
+	border-radius: 0.75rem;
 	line-height: 1;
 	font-weight: initial;
 }
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index f4c2fe060..8cccaa5fa 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1050,11 +1050,11 @@ input[type="search"] {
 }
 
 .aside_feed .tree-folder-title .icon {
-	padding: 5px;
+	padding: 0 0.25rem;
 }
 
 .aside_feed .tree-folder-items .item.feed {
-	padding: 0px 15px;
+	padding: 0 0.75rem;
 }
 
 .aside_feed .tree-folder-items:not(.active) {
@@ -1770,17 +1770,17 @@ input:checked + .slide-container .properties {
 
 .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;
+	margin: 0.6rem 0 0 0;
+	padding: 0.25rem 0.5rem;
+	min-width: 2rem;
 	display: block;
 	content: attr(data-unread);
 	position: absolute;
 	top: 0;
-	left: 10px;
+	left: 0.75rem;
 	text-align: center;
 	font-size: 0.9rem;
-	border-radius: 12px;
+	border-radius: 0.75rem;
 	line-height: 1;
 	font-weight: initial;
 }