diff options
| author |  Alexandre Alapetite <alexandre@alapetite.fr>
| 2025-11-25 23:27:43 +0100 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2025-11-25 23:27:43 +0100 |
| commit | 1a3565f26c84ed82ef191effc70c5fa6e054e094 (patch) | |
| tree | 16db9acaf4d2d992aac5531fa2761d2dc61cb249 /p/themes/Origine/origine.css | |
| parent | 06d34f9b8ed81854baaaea3a4a7f4e247cab31a0 (diff) | |
More visible selected article (#8230)
There was not enough difference between selected and not-selected articles, especially not due to hovering using the same style.
Already relevant as is, and more relevant for a future feature depending on selected article.
Additional help welcome to further improve the styling, in this PR or a future one, also for the other themes.
In this example, the third article is the one selected:
<img width="443" height="189" alt="image" src="https://github.com/user-attachments/assets/06168e9f-1b91-47e2-9b64-4fd8ca6c7186" />
* Compensate the increased border-left-width
* Implement in Pafat
* Implement in Nord
* Shorten comment
* Implement in Alternative Dark
* Implement for Flat
* Implement for Swage
* Implement in Ansum and Mapco
* Call stylelint_fix before rtlcss
So that RTLCSS includes the fixes from previous step
Diffstat (limited to 'p/themes/Origine/origine.css')
| -rw-r--r-- | p/themes/Origine/origine.css | 19 |
1 files changed, 19 insertions, 0 deletions
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css index 6bb083e3f..94474d640 100644 --- a/p/themes/Origine/origine.css +++ b/p/themes/Origine/origine.css @@ -886,6 +886,25 @@ button:hover .icon, background-color: var(--favorite-article-background-color-hover); } +/* stylelint-disable-next-line no-duplicate-selectors */ +.flux.current { + border-left-width: 5px; + border-left-style: double; +} + +.flux.current > .flux_header { + background: linear-gradient(to right, transparent 0, transparent 3px, var(--background-color-hover) 3px); + margin-left: -3px; /* Compensate increased border-left-width */ +} + +.flux.not_read.current > .flux_header, .flux.not_read.current > .flux_header:hover { + background: linear-gradient(to right, transparent 0, transparent 3px, var(--unread-article-background-color-hover) 3px); +} + +.flux.favorite.current > .flux_header, .flux.favorite.current > .flux_header:hover { + background: linear-gradient(to right, transparent 0, transparent 3px, var(--favorite-article-background-color-hover) 3px); +} + .flux_header { font-size: 0.9rem; border-top: 1px solid var(--border-color); |