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

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 {

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 {

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;
 	}

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;
 }

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;
 }

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);
 }
 

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);
 }
 

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 {

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 {

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;
 	}

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;
 }

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;
 }

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;

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;

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 {

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 {

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;

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;

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 {

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 {
 }
 

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 {
 }
 

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;
 	}

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;
 	}