Better transitions between groups of articles (#8174)

fix https://github.com/FreshRSS/FreshRSS/issues/7520
fix https://github.com/FreshRSS/FreshRSS/issues/8168
fix https://github.com/FreshRSS/FreshRSS/discussions/8172

31 files changed, 126 insertions, 136 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 0d6ce7e36..5a4725309 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -709,8 +709,8 @@ kbd {
 	background: var(--contrast-background-color-hover);
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	padding: 0 10px;
 	font-weight: bold;
 	line-height: 3;
@@ -719,15 +719,15 @@ kbd {
 	border-top: 1px solid var(--border-color-dark);
 }
 
-.day span {
+.transition span {
 	line-height: 1.5;
 }
 
-#new-article + .day {
+#new-article + .transition {
 	border-top: none;
 }
 
-.day .name {
+.transition .name {
 	padding: 0 10px 0 0;
 	color: var(--font-color-light);
 	font-size: 1.8em;
@@ -1144,7 +1144,7 @@ kbd {
 		border-left: 2px solid var(--background-color-light);
 	}
 
-	.day .name {
+	.transition .name {
 		display: none!important;
 		font-size: 1.1rem;
 		text-shadow: none;
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 78219d75c..f6ba6dea0 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -709,8 +709,8 @@ kbd {
 	background: var(--contrast-background-color-hover);
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	padding: 0 10px;
 	font-weight: bold;
 	line-height: 3;
@@ -719,15 +719,15 @@ kbd {
 	border-top: 1px solid var(--border-color-dark);
 }
 
-.day span {
+.transition span {
 	line-height: 1.5;
 }
 
-#new-article + .day {
+#new-article + .transition {
 	border-top: none;
 }
 
-.day .name {
+.transition .name {
 	padding: 0 0 0 10px;
 	color: var(--font-color-light);
 	font-size: 1.8em;
@@ -1144,7 +1144,7 @@ kbd {
 		border-right: 2px solid var(--background-color-light);
 	}
 
-	.day .name {
+	.transition .name {
 		display: none!important;
 		font-size: 1.1rem;
 		text-shadow: none;
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index 9e7ef2957..97de599b7 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -117,8 +117,8 @@ main.prompt {
 	background: variables.$main-first-alt;
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	padding: 1rem 0 0 1.25rem;
 	color: variables.$light-font-color;
 	font-size: 0.875rem;
diff --git a/p/themes/Ansum/_mobile.scss b/p/themes/Ansum/_mobile.scss
index dc109caaa..19796e3db 100644
--- a/p/themes/Ansum/_mobile.scss
+++ b/p/themes/Ansum/_mobile.scss
@@ -126,7 +126,7 @@
 		}
 	}
 
-	.day {
+	.transition {
 		text-align: center;
 		padding: 1rem 0;
 
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index d94816dca..2d5da338c 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -778,8 +778,8 @@ main.prompt {
 	background: #b7641d;
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	padding: 1rem 0 0 1.25rem;
 	color: #6d655f;
 	font-size: 0.875rem;
@@ -788,7 +788,7 @@ main.prompt {
 	letter-spacing: 1px;
 	text-transform: uppercase;
 }
-.day .name {
+.transition .name {
 	padding: 0 1rem 0 1rem;
 	color: #363330;
 	font-size: 0.875rem;
@@ -1289,11 +1289,11 @@ main.prompt {
 	.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
 		bottom: -17px;
 	}
-	.day {
+	.transition {
 		text-align: center;
 		padding: 1rem 0;
 	}
-	.day .name {
+	.transition .name {
 		padding: 0;
 		display: block;
 		width: 100%;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index ef7ab4cc8..2cfaef5aa 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -778,8 +778,8 @@ main.prompt {
 	background: #b7641d;
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	padding: 1rem 1.25rem 0 0;
 	color: #6d655f;
 	font-size: 0.875rem;
@@ -788,7 +788,7 @@ main.prompt {
 	letter-spacing: 1px;
 	text-transform: uppercase;
 }
-.day .name {
+.transition .name {
 	padding: 0 1rem 0 1rem;
 	color: #363330;
 	font-size: 0.875rem;
@@ -1289,11 +1289,11 @@ main.prompt {
 	.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
 		bottom: -17px;
 	}
-	.day {
+	.transition {
 		text-align: center;
 		padding: 1rem 0;
 	}
-	.day .name {
+	.transition .name {
 		padding: 0;
 		display: block;
 		width: 100%;
diff --git a/p/themes/Dark-pink/pinkdark.css b/p/themes/Dark-pink/pinkdark.css
index 922d427a8..3bfc91129 100644
--- a/p/themes/Dark-pink/pinkdark.css
+++ b/p/themes/Dark-pink/pinkdark.css
@@ -52,11 +52,11 @@
 	background: #ff92a2;
 }
 
-.day {
+.transition {
 	color: #ffb6c1;
 }
 
-.day .name {
+.transition .name {
 	color: #ffb6c1;
 }
 
diff --git a/p/themes/Dark-pink/pinkdark.rtl.css b/p/themes/Dark-pink/pinkdark.rtl.css
index 670bacbb8..a3f813831 100644
--- a/p/themes/Dark-pink/pinkdark.rtl.css
+++ b/p/themes/Dark-pink/pinkdark.rtl.css
@@ -52,11 +52,11 @@
 	background: #ff92a2;
 }
 
-.day {
+.transition {
 	color: #ffb6c1;
 }
 
-.day .name {
+.transition .name {
 	color: #ffb6c1;
 }
 
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 4d5d69f2b..6d2e01993 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -443,8 +443,8 @@ button.as-link[disabled] {
 	background-color: var(--dark-background-color3);
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	border-top: 1px solid var(--dark-border-color3);
 	border-bottom: 1px solid var(--dark-border-color3);
 }
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index 69a296409..cfb1ed37d 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -443,8 +443,8 @@ button.as-link[disabled] {
 	background-color: var(--dark-background-color3);
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	border-top: 1px solid var(--dark-border-color3);
 	border-bottom: 1px solid var(--dark-border-color3);
 }
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index fb99b5f20..bd02514af 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -655,15 +655,15 @@ th {
 	background: #2980b9;
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	padding: 0 10px;
 	font-weight: bold;
 	line-height: 3em;
 	border-left: 2px solid #ecf0f1;
 }
 
-.day .name {
+.transition .name {
 	padding: 0 10px 0 0;
 	color: #aab;
 	font-size: 1.8em;
@@ -991,7 +991,7 @@ th {
 		bottom: -19px;
 	}
 
-	.day .name {
+	.transition .name {
 		font-size: 1.1rem;
 	}
 
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index 5e075b421..5a4537fcb 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -655,15 +655,15 @@ th {
 	background: #2980b9;
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	padding: 0 10px;
 	font-weight: bold;
 	line-height: 3em;
 	border-right: 2px solid #ecf0f1;
 }
 
-.day .name {
+.transition .name {
 	padding: 0 0 0 10px;
 	color: #aab;
 	font-size: 1.8em;
@@ -991,7 +991,7 @@ th {
 		bottom: -19px;
 	}
 
-	.day .name {
+	.transition .name {
 		font-size: 1.1rem;
 	}
 
diff --git a/p/themes/Mapco/_layout.scss b/p/themes/Mapco/_layout.scss
index 27e3e8413..d011237af 100644
--- a/p/themes/Mapco/_layout.scss
+++ b/p/themes/Mapco/_layout.scss
@@ -122,8 +122,8 @@ main.prompt {
 	background: variables.$main-first-alt;
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	padding: 1rem 0 0 1.25rem;
 	color: variables.$light-font-color;
 	font-size: 0.875rem;
diff --git a/p/themes/Mapco/_mobile.scss b/p/themes/Mapco/_mobile.scss
index c05a49502..b66590f70 100644
--- a/p/themes/Mapco/_mobile.scss
+++ b/p/themes/Mapco/_mobile.scss
@@ -133,7 +133,7 @@
 		}
 	}
 
-	.day {
+	.transition {
 		text-align: center;
 		padding: 1rem 0;
 
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 0591d090a..09b57156a 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -793,8 +793,8 @@ main.prompt {
 	background: #25c;
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	padding: 1rem 0 0 1.25rem;
 	color: #5b6871;
 	font-size: 0.875rem;
@@ -803,7 +803,7 @@ main.prompt {
 	letter-spacing: 1px;
 	text-transform: uppercase;
 }
-.day .name {
+.transition .name {
 	padding: 0 1rem 0 1rem;
 	color: #303136;
 	font-size: 0.875rem;
@@ -1306,11 +1306,11 @@ main.prompt {
 	.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
 		bottom: -17px;
 	}
-	.day {
+	.transition {
 		text-align: center;
 		padding: 1rem 0;
 	}
-	.day .name {
+	.transition .name {
 		padding: 0;
 		display: block;
 		width: 100%;
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 1146efdb0..39813f4bd 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -793,8 +793,8 @@ main.prompt {
 	background: #25c;
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	padding: 1rem 1.25rem 0 0;
 	color: #5b6871;
 	font-size: 0.875rem;
@@ -803,7 +803,7 @@ main.prompt {
 	letter-spacing: 1px;
 	text-transform: uppercase;
 }
-.day .name {
+.transition .name {
 	padding: 0 1rem 0 1rem;
 	color: #303136;
 	font-size: 0.875rem;
@@ -1306,11 +1306,11 @@ main.prompt {
 	.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
 		bottom: -17px;
 	}
-	.day {
+	.transition {
 		text-align: center;
 		padding: 1rem 0;
 	}
-	.day .name {
+	.transition .name {
 		padding: 0;
 		display: block;
 		width: 100%;
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index dfd9beb94..47769c786 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -763,14 +763,14 @@ li.item.active {
 	text-decoration: none;
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	padding: 0 10px;
 	font-weight: bold;
 	line-height: 3em;
 }
 
-.day .name {
+.transition .name {
 	padding: 0 10px 0 0;
 	font-size: 1.8em;
 	opacity: 0.3;
@@ -778,11 +778,6 @@ li.item.active {
 	text-align: right;
 }
 
-.name {
-	display: none;
-}
-
-
 /*=== Feed article header and footer */
 .flux_header {
 	position: relative;
@@ -1018,7 +1013,7 @@ li.item.active {
 
 @media print {
 	.header, .aside,
-	.nav_menu, .day,
+	.nav_menu, .transition,
 	.flux_header,
 	.flux_content .bottom,
 	.pagination,
@@ -1303,7 +1298,7 @@ optgroup::before {
 		padding: 1rem;
 	}
 
-	.day .name {
+	.transition .name {
 		font-size: 1.1rem;
 	}
 
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index 7128be496..5820aebdc 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -763,14 +763,14 @@ li.item.active {
 	text-decoration: none;
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	padding: 0 10px;
 	font-weight: bold;
 	line-height: 3em;
 }
 
-.day .name {
+.transition .name {
 	padding: 0 0 0 10px;
 	font-size: 1.8em;
 	opacity: 0.3;
@@ -778,11 +778,6 @@ li.item.active {
 	text-align: left;
 }
 
-.name {
-	display: none;
-}
-
-
 /*=== Feed article header and footer */
 .flux_header {
 	position: relative;
@@ -1018,7 +1013,7 @@ li.item.active {
 
 @media print {
 	.header, .aside,
-	.nav_menu, .day,
+	.nav_menu, .transition,
 	.flux_header,
 	.flux_content .bottom,
 	.pagination,
@@ -1303,7 +1298,7 @@ optgroup::before {
 		padding: 1rem;
 	}
 
-	.day .name {
+	.transition .name {
 		font-size: 1.1rem;
 	}
 
diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css
index 5f56cb860..3fcec661c 100644
--- a/p/themes/Origine-compact/origine-compact.css
+++ b/p/themes/Origine-compact/origine-compact.css
@@ -74,13 +74,13 @@
 	font-size: 0.7rem;
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	font-size: 0.9rem;
 	line-height: 2;
 }
 
-.day .name {
+.transition .name {
 	font-size: 1em;
 	opacity: 0.6;
 }
diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css
index 579266a7f..2af10ddbc 100644
--- a/p/themes/Origine-compact/origine-compact.rtl.css
+++ b/p/themes/Origine-compact/origine-compact.rtl.css
@@ -74,13 +74,13 @@
 	font-size: 0.7rem;
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	font-size: 0.9rem;
 	line-height: 2;
 }
 
-.day .name {
+.transition .name {
 	font-size: 1em;
 	opacity: 0.6;
 }
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 4264a54b9..6bb083e3f 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -804,8 +804,8 @@ button:hover .icon,
 	background-color: var(--contrast-background-color-hover);
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	padding: 0 10px;
 	font-weight: bold;
 	line-height: 3;
@@ -813,15 +813,15 @@ button:hover .icon,
 	border-top: 1px solid var(--border-color);
 }
 
-.day span {
+.transition span {
 	line-height: 1.5;
 }
 
-#new-article + .day {
+#new-article + .transition {
 	border-top: none;
 }
 
-.day .name {
+.transition .name {
 	padding: 0 10px 0 0;
 	color: var(--font-color-light-shadowed);
 	font-size: 1.8em;
@@ -1193,7 +1193,7 @@ button:hover .icon,
 		padding-right: 15px;
 	}
 
-	.day .name {
+	.transition .name {
 		font-size: 1.1rem;
 		text-shadow: none;
 	}
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index ffa4fd4e4..a2b82b987 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -804,8 +804,8 @@ button:hover .icon,
 	background-color: var(--contrast-background-color-hover);
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	padding: 0 10px;
 	font-weight: bold;
 	line-height: 3;
@@ -813,15 +813,15 @@ button:hover .icon,
 	border-top: 1px solid var(--border-color);
 }
 
-.day span {
+.transition span {
 	line-height: 1.5;
 }
 
-#new-article + .day {
+#new-article + .transition {
 	border-top: none;
 }
 
-.day .name {
+.transition .name {
 	padding: 0 0 0 10px;
 	color: var(--font-color-light-shadowed);
 	font-size: 1.8em;
@@ -1193,7 +1193,7 @@ button:hover .icon,
 		padding-left: 15px;
 	}
 
-	.day .name {
+	.transition .name {
 		font-size: 1.1rem;
 		text-shadow: none;
 	}
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 064517fc8..ab9d5d1cd 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -754,8 +754,8 @@ a.signin {
 	background-color: var(--background-color-new-article-hover);
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	padding: 0 10px;
 	background-color: var(--background-color-white);
 	color: var(--font-color-grey);
@@ -765,15 +765,15 @@ a.signin {
 	line-height: 3;
 }
 
-.day span {
+.transition span {
 	line-height: 1.5;
 }
 
-#new-article + .day {
+#new-article + .transition {
 	border-top: none;
 }
 
-.day .name {
+.transition .name {
 	padding: 0 10px 0 0;
 	color: var(--font-color-grey);
 	font-size: 1.8em;
@@ -1088,7 +1088,7 @@ a.signin {
 		border-left: 1px solid var(--border-color-grey-dark);
 	}
 
-	.day .name {
+	.transition .name {
 		font-size: 1.1rem;
 		text-shadow: none;
 	}
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 8809e4ea5..8f1de3b89 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -754,8 +754,8 @@ a.signin {
 	background-color: var(--background-color-new-article-hover);
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	padding: 0 10px;
 	background-color: var(--background-color-white);
 	color: var(--font-color-grey);
@@ -765,15 +765,15 @@ a.signin {
 	line-height: 3;
 }
 
-.day span {
+.transition span {
 	line-height: 1.5;
 }
 
-#new-article + .day {
+#new-article + .transition {
 	border-top: none;
 }
 
-.day .name {
+.transition .name {
 	padding: 0 0 0 10px;
 	color: var(--font-color-grey);
 	font-size: 1.8em;
@@ -1088,7 +1088,7 @@ a.signin {
 		border-right: 1px solid var(--border-color-grey-dark);
 	}
 
-	.day .name {
+	.transition .name {
 		font-size: 1.1rem;
 		text-shadow: none;
 	}
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index cd4d6b66a..852544e35 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -745,13 +745,13 @@ main.post .drop-section li.item.feed a:hover .icon {
 	background-color: var(--color-background-nav-darker);
 }
 
-.day {
+.transition {
 	padding: 0 10px;
 	font-weight: bold;
 	line-height: 3;
 	text-align: center;
 }
-.day .name {
+.transition .name {
 	display: none;
 }
 
@@ -1171,7 +1171,7 @@ main.global {
 		right: 3%;
 		left: auto;
 	}
-	.day .name {
+	.transition .name {
 		font-size: 1.1rem;
 	}
 	.notification {
@@ -1305,4 +1305,4 @@ button.as-link {
 
 #slider label {
 	min-height: initial;
-}
\ No newline at end of file
+}
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 5cb5def28..cb11e8ec1 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -745,13 +745,13 @@ main.post .drop-section li.item.feed a:hover .icon {
 	background-color: var(--color-background-nav-darker);
 }
 
-.day {
+.transition {
 	padding: 0 10px;
 	font-weight: bold;
 	line-height: 3;
 	text-align: center;
 }
-.day .name {
+.transition .name {
 	display: none;
 }
 
@@ -1171,7 +1171,7 @@ main.global {
 		left: 3%;
 		right: auto;
 	}
-	.day .name {
+	.transition .name {
 		font-size: 1.1rem;
 	}
 	.notification {
@@ -1305,4 +1305,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 35b9aeac4..b9c0143d6 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -951,7 +951,7 @@ main.post .drop-section li.item.feed a:hover .icon {
 	}
 }
 
-.day {
+.transition {
 	padding: 0 10px;
 	font-weight: bold;
 	line-height: 3;
@@ -1501,7 +1501,7 @@ main.global {
 		left: auto;
 	}
 
-	.day .name {
+	.transition .name {
 		font-size: 1.1rem;
 	}
 
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index a68713c90..c588de8ce 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -478,21 +478,21 @@ th {
 	text-decoration: none;
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	padding: 0 10px;
 	font-weight: bold;
 	line-height: 3;
 }
 
-.day span {
+.transition span {
 	line-height: 1.5;
 }
 
-#new-article + .day {
+#new-article + .transition {
 }
 
-.day .name {
+.transition .name {
 	padding: 0 10px 0 0;
 	font-size: 1.8em;
 	opacity: 0.3;
@@ -737,7 +737,7 @@ th {
 		width: 400px;
 	}
 
-	.day .name {
+	.transition .name {
 		font-size: 1.1rem;
 	}
 
diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css
index d4e8a6eda..6b47da890 100644
--- a/p/themes/base-theme/base.rtl.css
+++ b/p/themes/base-theme/base.rtl.css
@@ -478,21 +478,21 @@ th {
 	text-decoration: none;
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	padding: 0 10px;
 	font-weight: bold;
 	line-height: 3;
 }
 
-.day span {
+.transition span {
 	line-height: 1.5;
 }
 
-#new-article + .day {
+#new-article + .transition {
 }
 
-.day .name {
+.transition .name {
 	padding: 0 0 0 10px;
 	font-size: 1.8em;
 	opacity: 0.3;
@@ -737,7 +737,7 @@ th {
 		width: 400px;
 	}
 
-	.day .name {
+	.transition .name {
 		font-size: 1.1rem;
 	}
 
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 19db6e1a8..958d2ba1d 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1413,12 +1413,12 @@ input[type="search"] {
 	display: block;
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	background: inherit;
 }
 
-.day .name {
+.transition .name {
 	position: absolute;
 	right: 0;
 	width: 50%;
@@ -2485,7 +2485,7 @@ html.slider-active {
 	}
 
 	.flux_header .item.website span,
-	.item .date, .day .date,
+	.item .date,
 	.dropdown-menu > .no-mobile,
 	.no-mobile,
 	.aside_feed .tree-folder-items .item .no-dropdown-toggle {
@@ -2829,7 +2829,7 @@ html.slider-active {
 	}
 
 	.header, .aside,
-	.nav_menu, .day,
+	.nav_menu, .transition,
 	.flux_header,
 	.flux_content .bottom,
 	.pagination,
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 29c8fb03c..5e0324153 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1413,12 +1413,12 @@ input[type="search"] {
 	display: block;
 }
 
-/*=== Day indication */
-.day {
+/*=== Transition indication, e.g. day */
+.transition {
 	background: inherit;
 }
 
-.day .name {
+.transition .name {
 	position: absolute;
 	left: 0;
 	width: 50%;
@@ -2485,7 +2485,7 @@ html.slider-active {
 	}
 
 	.flux_header .item.website span,
-	.item .date, .day .date,
+	.item .date,
 	.dropdown-menu > .no-mobile,
 	.no-mobile,
 	.aside_feed .tree-folder-items .item .no-dropdown-toggle {
@@ -2829,7 +2829,7 @@ html.slider-active {
 	}
 
 	.header, .aside,
-	.nav_menu, .day,
+	.nav_menu, .transition,
 	.flux_header,
 	.flux_content .bottom,
 	.pagination,