Преглед изворни кода

refactor(themes): consolidate shared narrow @media rules into frss.css (#8746)

Two narrow-viewport rules were duplicated across leaf themes: `.aside { transition: width 200ms linear }` and `.aside.aside_feed { padding: 0 }`. This PR lifts both into the existing `@media (max-width: 840px)` block in `base-theme/frss.css` and removes the duplicates from Alternative-Dark, Flat, Origine, Pafat, and Nord. Swage's redundant `transition` line is also dropped (its other `.aside` properties stay).

Verified visually across Alternative-Dark, Ansum, Flat, Mapco, Nord, Origine, and Pafat at narrow and wide viewports. No regressions. Ansum and Mapco keep their own `.aside { transition: all 0.2s ease-in-out }` via source-order. Themes that previously had no explicit `.aside` rule (Dark, Dark-pink, Origine-compact via inheritance) gain identical computed values to their parent themes.

Also adds top-of-file comments to `base-theme/base.css` and `base-theme/frss.css` clarifying that `base.css` is a scaffold loaded only for the unconfigured base-theme fallback, while `frss.css` is the real shared base loaded by every theme via the `_frss.css` prefix in `metadata.json`. Follow-up to #8743, which initially targeted the wrong file before being corrected.

Lift .aside { transition: width 200ms linear } and
.aside.aside_feed { padding: 0 } from leaf themes into the shared
@media (max-width: 840px) block in base-theme/frss.css. Delete the
duplicates from Alternative-Dark, Flat, Origine, Pafat, and Nord.
Drop the redundant transition line from Swage.

Add top-of-file comments to base-theme/base.css and base-theme/frss.css
clarifying that base.css is a scaffold for the base-theme fallback only,
while frss.css is the real shared base loaded by every theme via the
"_frss.css" prefix in metadata.json. Documents the structure that made
#8743 initially target the wrong file.

Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
polybjorn пре 2 недеља
родитељ
комит
4f250caa67

+ 0 - 5
p/themes/Alternative-Dark/adark.css

@@ -1116,7 +1116,6 @@ kbd {
 
 	.aside {
 		box-shadow: 3px 0 3px var(--background-color-active);
-		transition: width 200ms linear;
 	}
 
 	.aside .toggle_aside,
@@ -1144,10 +1143,6 @@ kbd {
 		background-color: var(--background-color-slider-shadow);
 	}
 
-	.aside.aside_feed {
-		padding: 0;
-	}
-
 	.configure .dropdown .dropdown-menu {
 		border-width: 0;
 		box-shadow: -3px 0 3px var(--background-color-active);

+ 0 - 5
p/themes/Alternative-Dark/adark.rtl.css

@@ -1116,7 +1116,6 @@ kbd {
 
 	.aside {
 		box-shadow: -3px 0 3px var(--background-color-active);
-		transition: width 200ms linear;
 	}
 
 	.aside .toggle_aside,
@@ -1144,10 +1143,6 @@ kbd {
 		background-color: var(--background-color-slider-shadow);
 	}
 
-	.aside.aside_feed {
-		padding: 0;
-	}
-
 	.configure .dropdown .dropdown-menu {
 		border-width: 0;
 		box-shadow: 3px 0 3px var(--background-color-active);

+ 0 - 8
p/themes/Flat/flat.css

@@ -972,20 +972,12 @@ th {
 		padding-bottom: 0;
 	}
 
-	.aside {
-		transition: width 200ms linear;
-	}
-
 	.aside .toggle_aside,
 	#overlay .close,
 	.dropdown-menu .toggle_aside {
 		background: #2c3e50;
 	}
 
-	.aside.aside_feed {
-		padding: 0;
-	}
-
 	.nav_menu .btn {
 		padding: 3px 5px;
 		min-height: 0;

+ 0 - 8
p/themes/Flat/flat.rtl.css

@@ -972,20 +972,12 @@ th {
 		padding-bottom: 0;
 	}
 
-	.aside {
-		transition: width 200ms linear;
-	}
-
 	.aside .toggle_aside,
 	#overlay .close,
 	.dropdown-menu .toggle_aside {
 		background: #2c3e50;
 	}
 
-	.aside.aside_feed {
-		padding: 0;
-	}
-
 	.nav_menu .btn {
 		padding: 3px 5px;
 		min-height: 0;

+ 0 - 5
p/themes/Nord/nord.css

@@ -1240,11 +1240,6 @@ optgroup::before {
 
 	.aside {
 		left: 0;
-		transition: width 200ms linear;
-	}
-
-	.aside.aside_feed {
-		padding: 0;
 	}
 
 	.nav.aside {

+ 0 - 5
p/themes/Nord/nord.rtl.css

@@ -1240,11 +1240,6 @@ optgroup::before {
 
 	.aside {
 		right: 0;
-		transition: width 200ms linear;
-	}
-
-	.aside.aside_feed {
-		padding: 0;
 	}
 
 	.nav.aside {

+ 0 - 8
p/themes/Origine/origine.css

@@ -1163,10 +1163,6 @@ button:hover .icon,
 		padding-bottom: 0;
 	}
 
-	.aside {
-		transition: width 200ms linear;
-	}
-
 	.aside:target {
 		box-shadow: 3px 0 3px var(--text-shadow-color);
 	}
@@ -1179,10 +1175,6 @@ button:hover .icon,
 		border-bottom: 1px solid var(--border-color);
 	}
 
-	.aside.aside_feed {
-		padding: 0;
-	}
-
 	.post {
 		padding-left: 1rem;
 		padding-right: 1rem;

+ 0 - 8
p/themes/Origine/origine.rtl.css

@@ -1163,10 +1163,6 @@ button:hover .icon,
 		padding-bottom: 0;
 	}
 
-	.aside {
-		transition: width 200ms linear;
-	}
-
 	.aside:target {
 		box-shadow: -3px 0 3px var(--text-shadow-color);
 	}
@@ -1179,10 +1175,6 @@ button:hover .icon,
 		border-bottom: 1px solid var(--border-color);
 	}
 
-	.aside.aside_feed {
-		padding: 0;
-	}
-
 	.post {
 		padding-right: 1rem;
 		padding-left: 1rem;

+ 0 - 8
p/themes/Pafat/pafat.css

@@ -1090,10 +1090,6 @@ a.signin {
 		padding-bottom: 0;
 	}
 
-	.aside {
-		transition: width 200ms linear;
-	}
-
 	.aside .toggle_aside,
 	#overlay .close,
 	.dropdown-menu .toggle_aside {
@@ -1101,10 +1097,6 @@ a.signin {
 		border-bottom: 1px solid var(--border-color-grey-light);
 	}
 
-	.aside.aside_feed {
-		padding: 0;
-	}
-
 	.nav_menu {
 		padding-left: 0;
 		padding-bottom: 5px;

+ 0 - 8
p/themes/Pafat/pafat.rtl.css

@@ -1090,10 +1090,6 @@ a.signin {
 		padding-bottom: 0;
 	}
 
-	.aside {
-		transition: width 200ms linear;
-	}
-
 	.aside .toggle_aside,
 	#overlay .close,
 	.dropdown-menu .toggle_aside {
@@ -1101,10 +1097,6 @@ a.signin {
 		border-bottom: 1px solid var(--border-color-grey-light);
 	}
 
-	.aside.aside_feed {
-		padding: 0;
-	}
-
 	.nav_menu {
 		padding-right: 0;
 		padding-bottom: 5px;

+ 0 - 1
p/themes/Swage/swage.css

@@ -1410,7 +1410,6 @@ main.global {
 	.aside {
 		padding: 0;
 		width: 0;
-		transition: width 200ms linear;
 
 		.toggle_aside {
 			background-color: var(--color-background-aside);

+ 0 - 1
p/themes/Swage/swage.rtl.css

@@ -1410,7 +1410,6 @@ main.global {
 	.aside {
 		padding: 0;
 		width: 0;
-		transition: width 200ms linear;
 
 		.toggle_aside {
 			background-color: var(--color-background-aside);

+ 3 - 0
p/themes/base-theme/base.css

@@ -2,6 +2,9 @@
 
 @charset "UTF-8";
 
+/* Scaffold for the base-theme fallback. Other themes do not load this file;
+   cross-theme defaults belong in frss.css. */
+
 /*=== GENERAL */
 /*============*/
 html, body {

+ 3 - 0
p/themes/base-theme/base.rtl.css

@@ -2,6 +2,9 @@
 
 @charset "UTF-8";
 
+/* Scaffold for the base-theme fallback. Other themes do not load this file;
+   cross-theme defaults belong in frss.css. */
+
 /*=== GENERAL */
 /*============*/
 html, body {

+ 7 - 0
p/themes/base-theme/frss.css

@@ -1,5 +1,7 @@
 @charset "UTF-8";
 
+/* Shared base loaded by every theme via the "_frss.css" entry in metadata.json. */
+
 /*=== GENERAL */
 /*============*/
 :root {
@@ -2769,6 +2771,7 @@ html.slider-active {
 		width: 0;
 		overflow: hidden;
 		z-index: 100;
+		transition: width 200ms linear;
 	}
 
 	.aside.visible,
@@ -2777,6 +2780,10 @@ html.slider-active {
 		height: 100vh;
 	}
 
+	.aside.aside_feed {
+		padding: 0;
+	}
+
 	.aside_feed .configure-feeds {
 		margin-top: 10px;
 	}

+ 7 - 0
p/themes/base-theme/frss.rtl.css

@@ -1,5 +1,7 @@
 @charset "UTF-8";
 
+/* Shared base loaded by every theme via the "_frss.css" entry in metadata.json. */
+
 /*=== GENERAL */
 /*============*/
 :root {
@@ -2769,6 +2771,7 @@ html.slider-active {
 		width: 0;
 		overflow: hidden;
 		z-index: 100;
+		transition: width 200ms linear;
 	}
 
 	.aside.visible,
@@ -2777,6 +2780,10 @@ html.slider-active {
 		height: 100vh;
 	}
 
+	.aside.aside_feed {
+		padding: 0;
+	}
+
 	.aside_feed .configure-feeds {
 		margin-top: 10px;
 	}