Przeglądaj źródła

fix(themes): restore mark-read dropdown edge when text button is hidden (#8734)

At `max-width: 840px`, base-theme hides the "Mark as read" text button via `.no-mobile`. Each affected theme strips the toggle's left border and radius so it visually joins the text button at wider widths. With the text button hidden, the toggle is left with a flat left edge.

The fix restores rounded left corners (and, where the theme has visible borders, the left border itself) on the lone toggle inside each theme's `@media (max-width: 840px)` block, matching #8711. Affected: Alternative-Dark, Ansum, Dark, Flat, Mapco, Pafat. Dark-pink inherits via its `../Alternative-Dark/adark.css` import.

Alternative-Dark and Dark-pink also need a hover override on the same selector, since their `.btn:hover` rules replace the border color and would otherwise mismatch the static left border. The other themes don't change border on hover.

References #7405

### Screenshots

#### Before, narrow Alt-Dark: lone toggle with flat left edge
<img width="485" height="41" alt="alt-dark before" src="https://github.com/user-attachments/assets/de11b717-2e4d-4d8b-9ccf-0ed894ac9c95" />

#### After, narrow Alt-Dark: restored left edge, with matching hover border
<img width="487" height="41" alt="alt-dark after hover" src="https://github.com/user-attachments/assets/6c2270d8-aafe-4203-8f27-5c9dc66d88ab" />

### Notes

- `.rtl.css` regenerated via `make rtl`.
- `npm run stylelint` passes.
- Verified at narrow width on FreshRSS 1.28.2-dev.

Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
polybjorn 2 tygodni temu
rodzic
commit
60678c51a3

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

@@ -1156,6 +1156,16 @@ kbd {
 		margin: 5px 0;
 	}
 
+	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
+		border-left: 1px solid var(--border-color-middle);
+		border-top-left-radius: 3px;
+		border-bottom-left-radius: 3px;
+	}
+
+	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn:hover {
+		border-left-color: var(--contrast-border-color-hover);
+	}
+
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		background-color: var(--background-color-active);
 		border-top: 2px solid var(--background-color-light);

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

@@ -1156,6 +1156,16 @@ kbd {
 		margin: 5px 0;
 	}
 
+	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
+		border-right: 1px solid var(--border-color-middle);
+		border-top-right-radius: 3px;
+		border-bottom-right-radius: 3px;
+	}
+
+	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn:hover {
+		border-right-color: var(--contrast-border-color-hover);
+	}
+
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		background-color: var(--background-color-active);
 		border-top: 2px solid var(--background-color-light);

+ 5 - 0
p/themes/Ansum/_mobile.css

@@ -98,6 +98,11 @@
 		background-image: none;
 	}
 
+	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
+		border-left-width: 0;
+		border-radius: 5px;
+	}
+
 	#stream {
 		.flux {
 			.flux_header {

+ 5 - 0
p/themes/Ansum/_mobile.rtl.css

@@ -98,6 +98,11 @@
 		background-image: none;
 	}
 
+	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
+		border-right-width: 0;
+		border-radius: 5px;
+	}
+
 	#stream {
 		.flux {
 			.flux_header {

+ 6 - 0
p/themes/Dark-pink/pinkdark.css

@@ -164,3 +164,9 @@ input:focus {
 .theme-preview-list .nav label.btn:hover {
 	background-color: var(--background-color-hover);
 }
+
+@media (max-width: 840px) {
+	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn:hover {
+		border-left-color: #ff449a;
+	}
+}

+ 6 - 0
p/themes/Dark-pink/pinkdark.rtl.css

@@ -164,3 +164,9 @@ input:focus {
 .theme-preview-list .nav label.btn:hover {
 	background-color: var(--background-color-hover);
 }
+
+@media (max-width: 840px) {
+	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn:hover {
+		border-right-color: #ff449a;
+	}
+}

+ 6 - 0
p/themes/Dark/dark.css

@@ -661,4 +661,10 @@ kbd {
 		border-top: 1px solid var(--dark-border-color8);
 		border-left: 1px solid var(--dark-border-color8);
 	}
+
+	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
+		border-left: 1px solid var(--dark-border-color0);
+		border-top-left-radius: 3px;
+		border-bottom-left-radius: 3px;
+	}
 }

+ 6 - 0
p/themes/Dark/dark.rtl.css

@@ -661,4 +661,10 @@ kbd {
 		border-top: 1px solid var(--dark-border-color8);
 		border-right: 1px solid var(--dark-border-color8);
 	}
+
+	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
+		border-right: 1px solid var(--dark-border-color0);
+		border-top-right-radius: 3px;
+		border-bottom-right-radius: 3px;
+	}
 }

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

@@ -988,6 +988,12 @@ th {
 		margin: 5px 0;
 	}
 
+	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
+		border-left-width: 0;
+		border-top-left-radius: 5px;
+		border-bottom-left-radius: 5px;
+	}
+
 	.nav_menu .search {
 		display: inline-block;
 		max-width: 97%;

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

@@ -988,6 +988,12 @@ th {
 		margin: 5px 0;
 	}
 
+	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
+		border-right-width: 0;
+		border-top-right-radius: 5px;
+		border-bottom-right-radius: 5px;
+	}
+
 	.nav_menu .search {
 		display: inline-block;
 		max-width: 97%;

+ 5 - 0
p/themes/Mapco/_mobile.css

@@ -105,6 +105,11 @@
 		background-image: none;
 	}
 
+	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
+		border-left-width: 0;
+		border-radius: 5px;
+	}
+
 	#stream {
 		.flux {
 			.flux_header {

+ 5 - 0
p/themes/Mapco/_mobile.rtl.css

@@ -105,6 +105,11 @@
 		background-image: none;
 	}
 
+	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
+		border-right-width: 0;
+		border-radius: 5px;
+	}
+
 	#stream {
 		.flux {
 			.flux_header {

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

@@ -1115,6 +1115,12 @@ a.signin {
 		border-left: 1px solid var(--border-color-grey-dark);
 	}
 
+	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
+		border-left: 1px solid var(--border-color-grey-dark);
+		border-top-left-radius: 3px;
+		border-bottom-left-radius: 3px;
+	}
+
 	.transition .name {
 		font-size: 1.1rem;
 		text-shadow: none;

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

@@ -1115,6 +1115,12 @@ a.signin {
 		border-right: 1px solid var(--border-color-grey-dark);
 	}
 
+	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
+		border-right: 1px solid var(--border-color-grey-dark);
+		border-top-right-radius: 3px;
+		border-bottom-right-radius: 3px;
+	}
+
 	.transition .name {
 		font-size: 1.1rem;
 		text-shadow: none;