Fix date issue in mobile view (#6385)

* font-size: 0.7rem; in frss.css

* fix date issue in mobile view

* better CSS for date in header and footer

* RTL

* padding in mobile view

23 files changed, 61 insertions, 53 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 1eb45b695..2743de88b 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -794,9 +794,9 @@ kbd {
 	filter: grayscale(0.8) brightness(1.7);
 }
 
-.flux .item.date {
+.flux .flux_header .date,
+.flux .flux_content .bottom .date {
 	color: var(--font-color-light);
-	font-size: 0.7rem;
 }
 
 .flux .bottom {
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 5d9c13d63..b66fae387 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -794,9 +794,9 @@ kbd {
 	filter: grayscale(0.8) brightness(1.7);
 }
 
-.flux .item.date {
+.flux .flux_header .date,
+.flux .flux_content .bottom .date {
 	color: var(--font-color-light);
-	font-size: 0.7rem;
 }
 
 .flux .bottom {
diff --git a/p/themes/Ansum/_list-view.scss b/p/themes/Ansum/_list-view.scss
index 3de5b3f50..ba297e2ac 100644
--- a/p/themes/Ansum/_list-view.scss
+++ b/p/themes/Ansum/_list-view.scss
@@ -51,7 +51,7 @@
 			}
 		}
 
-		.item.date {
+		.item .date {
 			color: color.scale(variables.$unread-font-color, $alpha: -50%);
 		}
 	}
@@ -77,7 +77,8 @@
 		}
 	}
 
-	.item.date {
+	.flux_header .date,
+	.flux_content .bottom .date {
 		color: color.scale(variables.$main-font-color, $alpha: -50%);
 		font-size: 0.85rem;
 	}
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index fdd9b9653..dc1e36456 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -1011,7 +1011,7 @@ main.prompt {
 .flux.not_read .item.website a {
 	color: #161a38;
 }
-.flux.not_read .item.date {
+.flux.not_read .item .date {
 	color: rgba(22, 26, 56, 0.5);
 }
 .flux.favorite {
@@ -1028,7 +1028,8 @@ main.prompt {
 	color: #363330;
 	opacity: 0.75;
 }
-.flux .item.date {
+.flux .flux_header .date,
+.flux .flux_content .bottom .date {
 	color: rgba(54, 51, 48, 0.5);
 	font-size: 0.85rem;
 }
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 19c3e1551..8b4bd738f 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -1011,7 +1011,7 @@ main.prompt {
 .flux.not_read .item.website a {
 	color: #161a38;
 }
-.flux.not_read .item.date {
+.flux.not_read .item .date {
 	color: rgba(22, 26, 56, 0.5);
 }
 .flux.favorite {
@@ -1028,7 +1028,8 @@ main.prompt {
 	color: #363330;
 	opacity: 0.75;
 }
-.flux .item.date {
+.flux .flux_header .date,
+.flux .flux_content .bottom .date {
 	color: rgba(54, 51, 48, 0.5);
 	font-size: 0.85rem;
 }
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 704c6b2a1..95ae5193b 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -456,7 +456,8 @@ button.as-link[disabled] {
 	color: var(--dark-font-color8);
 }
 
-.flux .item.date {
+.flux .flux_header .date,
+.flux .flux_content .bottom .date {
 	color: var(--dark-font-color6);
 }
 
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index 1d102e1d6..670fde496 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -456,7 +456,8 @@ button.as-link[disabled] {
 	color: var(--dark-font-color8);
 }
 
-.flux .item.date {
+.flux .flux_header .date,
+.flux .flux_content .bottom .date {
 	color: var(--dark-font-color6);
 }
 
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index ec59e90b1..bfe5eb8a2 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -729,9 +729,9 @@ th {
 	font-size: 0.9rem;
 }
 
-.flux .item.date {
+.flux .flux_header .date,
+.flux .flux_content .bottom .date {
 	color: #666;
-	font-size: 0.7rem;
 }
 
 .flux .bottom {
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index c81ec0bbe..ee882a5b7 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -729,9 +729,9 @@ th {
 	font-size: 0.9rem;
 }
 
-.flux .item.date {
+.flux .flux_header .date,
+.flux .flux_content .bottom .date {
 	color: #666;
-	font-size: 0.7rem;
 }
 
 .flux .bottom {
diff --git a/p/themes/Mapco/_list-view.scss b/p/themes/Mapco/_list-view.scss
index 40cc9d4a8..963d1cc43 100644
--- a/p/themes/Mapco/_list-view.scss
+++ b/p/themes/Mapco/_list-view.scss
@@ -47,7 +47,7 @@
 			}
 		}
 
-		.item.date {
+		.item .date {
 			color: color.scale(variables.$unread-font-color, $alpha: -50%);
 		}
 	}
@@ -73,7 +73,8 @@
 		}
 	}
 
-	.item.date {
+	.flux_header .date,
+	.flux_content .bottom .date {
 		color: color.scale(variables.$main-font-color, $alpha: -50%);
 		font-size: 0.85rem;
 	}
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 1d79a49b4..11370b166 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -1026,7 +1026,7 @@ main.prompt {
 .flux.not_read .item.website a {
 	color: #36c;
 }
-.flux.not_read .item.date {
+.flux.not_read .item .date {
 	color: rgba(51, 102, 204, 0.5);
 }
 .flux.favorite {
@@ -1043,7 +1043,8 @@ main.prompt {
 	color: #303136;
 	opacity: 0.75;
 }
-.flux .item.date {
+.flux .flux_header .date,
+.flux .flux_content .bottom .date {
 	color: rgba(48, 49, 54, 0.5);
 	font-size: 0.85rem;
 }
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index c38fba480..92dde3437 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -1026,7 +1026,7 @@ main.prompt {
 .flux.not_read .item.website a {
 	color: #36c;
 }
-.flux.not_read .item.date {
+.flux.not_read .item .date {
 	color: rgba(51, 102, 204, 0.5);
 }
 .flux.favorite {
@@ -1043,7 +1043,8 @@ main.prompt {
 	color: #303136;
 	opacity: 0.75;
 }
-.flux .item.date {
+.flux .flux_header .date,
+.flux .flux_content .bottom .date {
 	color: rgba(48, 49, 54, 0.5);
 	font-size: 0.85rem;
 }
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index c87026ae2..ef7b58aaf 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -791,10 +791,6 @@ li.item.active {
 	padding: 0.25rem;
 }
 
-.flux .item.date {
-	font-size: 0.7rem;
-}
-
 .flux .bottom {
 	font-size: 0.8rem;
 	text-align: center;
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index a3c43b82d..df383289b 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -791,10 +791,6 @@ li.item.active {
 	padding: 0.25rem;
 }
 
-.flux .item.date {
-	font-size: 0.7rem;
-}
-
 .flux .bottom {
 	font-size: 0.8rem;
 	text-align: center;
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 6d5a8f523..072a52e46 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -849,9 +849,9 @@ a.signin {
 	padding: 0.425rem;
 }
 
-.flux .item.date {
+.flux .flux_header .date,
+.flux .flux_content .bottom .date {
 	color: var(--font-color-grey);
-	font-size: 0.7rem;
 }
 
 .flux .bottom {
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index dca0c3295..daa7ea233 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -849,9 +849,9 @@ a.signin {
 	padding: 0.425rem;
 }
 
-.flux .item.date {
+.flux .flux_header .date,
+.flux .flux_content .bottom .date {
 	color: var(--font-color-grey);
-	font-size: 0.7rem;
 }
 
 .flux .bottom {
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 74ce77f0d..2b8e4b86e 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -767,9 +767,9 @@ form th {
 .flux.not_read:not(.current):hover .item .title {
 	background-color: var(--color-background-unread);
 }
-.flux .item.date {
+.flux .flux_header .date,
+.flux .flux_content .bottom .date {
 	color: var(--color-text-light-darker);
-	font-size: 0.7rem;
 }
 .flux .bottom {
 	font-size: 0.8rem;
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 8fb7b36dd..b512ad0d5 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -767,9 +767,9 @@ form th {
 .flux.not_read:not(.current):hover .item .title {
 	background-color: var(--color-background-unread);
 }
-.flux .item.date {
+.flux .flux_header .date,
+.flux .flux_content .bottom .date {
 	color: var(--color-text-light-darker);
-	font-size: 0.7rem;
 }
 .flux .bottom {
 	font-size: 0.8rem;
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index d23183445..e329a57c8 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -990,11 +990,9 @@ form {
 		}
 	}
 
-	.item {
-		&.date {
-			color: var(--color-text-light-darker);
-			font-size: 0.7rem;
-		}
+	.flux_header .date,
+	.flux_content .bottom .date {
+		color: var(--color-text-light-darker);
 	}
 
 	.bottom {
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index 99a98b50e..f2807ceee 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -555,10 +555,6 @@ th {
 	padding: 5px;
 }
 
-.flux .item.date {
-	font-size: 0.7rem;
-}
-
 .flux:not(.current):hover .item.title {
 }
 
diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css
index 892cefe33..5809a1e6c 100644
--- a/p/themes/base-theme/base.rtl.css
+++ b/p/themes/base-theme/base.rtl.css
@@ -555,10 +555,6 @@ th {
 	padding: 5px;
 }
 
-.flux .item.date {
-	font-size: 0.7rem;
-}
-
 .flux:not(.current):hover .item.title {
 }
 
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 5678f3e49..8d319cd2d 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1411,6 +1411,11 @@ a.website:hover .favicon {
 	overflow: hidden;
 }
 
+.flux .flux_header .date,
+.flux .flux_content .bottom .date {
+	font-size: 0.7rem;
+}
+
 .item.query > a {
 	display: list-item;
 	list-style-position: inside;
@@ -2205,7 +2210,7 @@ html.slider-active {
 	}
 
 	.flux_header .item.website span,
-	.item.date, .day .date,
+	.item .date, .day .date,
 	.dropdown-menu > .no-mobile,
 	.no-mobile {
 		display: none;
@@ -2248,6 +2253,10 @@ html.slider-active {
 		text-align: center;
 	}
 
+	.flux .flux_header .item .title:has(~.date) {
+		padding-right: 1rem;
+	}
+
 	#overlay .close {
 		position: relative;
 	}
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 509528f13..7b7c8b0fb 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1411,6 +1411,11 @@ a.website:hover .favicon {
 	overflow: hidden;
 }
 
+.flux .flux_header .date,
+.flux .flux_content .bottom .date {
+	font-size: 0.7rem;
+}
+
 .item.query > a {
 	display: list-item;
 	list-style-position: inside;
@@ -2205,7 +2210,7 @@ html.slider-active {
 	}
 
 	.flux_header .item.website span,
-	.item.date, .day .date,
+	.item .date, .day .date,
 	.dropdown-menu > .no-mobile,
 	.no-mobile {
 		display: none;
@@ -2248,6 +2253,10 @@ html.slider-active {
 		text-align: center;
 	}
 
+	.flux .flux_header .item .title:has(~.date) {
+		padding-left: 1rem;
+	}
+
 	#overlay .close {
 		position: relative;
 	}