mirror/FreshRSS
0
0
Fork 0
mirror of https://github.com/FreshRSS/FreshRSS.git synced 2026-05-15 02:33:51 -04:00
Code Issues Packages Projects Releases Wiki Activity

More visible selected article (#8230)

Browse Source 
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
This commit is contained in:
Alexandre Alapetite
2025-11-25 23:27:43 +01:00
committed by GitHub
parent 06d34f9b8e
commit 1a3565f26c
17 changed files with 195 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
p/themes/Alternative-Dark/adark.css
View File

@@ -753,7 +753,7 @@ kbd {
}
.flux .flux_header:hover {
background: var(--background-color-hover) !important;
background: var(--background-color-hover);
}
.flux.current {
@@ -801,6 +801,19 @@ kbd {
background: var(--background-color-dark);
}
/* stylelint-disable-next-line no-duplicate-selectors */
.flux.current {
border-left-width: 5px;
border-left-style: double;
}
.flux.current > .flux_header,
.flux.not_read.current > .flux_header, .flux.not_read.current > .flux_header:hover,
.flux.favorite.current > .flux_header, .flux.favorite.current > .flux_header:hover {
background: linear-gradient(to right, transparent 0, transparent 3px, var(--background-color-hover) 3px);
margin-left: -3px; /* Compensate increased border-left-width */
}
.flux_header {
font-size: 0.8rem;
border-top: 1px solid var(--border-color-dark);

15
p/themes/Alternative-Dark/adark.rtl.css
View File

@@ -753,7 +753,7 @@ kbd {
}
.flux .flux_header:hover {
background: var(--background-color-hover) !important;
background: var(--background-color-hover);
}
.flux.current {
@@ -801,6 +801,19 @@ kbd {
background: var(--background-color-dark);
}
/* stylelint-disable-next-line no-duplicate-selectors */
.flux.current {
border-right-width: 5px;
border-right-style: double;
}
.flux.current > .flux_header,
.flux.not_read.current > .flux_header, .flux.not_read.current > .flux_header:hover,
.flux.favorite.current > .flux_header, .flux.favorite.current > .flux_header:hover {
background: linear-gradient(to left, transparent 0, transparent 3px, var(--background-color-hover) 3px);
margin-right: -3px; /* Compensate increased border-left-width */
}
.flux_header {
font-size: 0.8rem;
border-top: 1px solid var(--border-color-dark);

10
p/themes/Ansum/_list-view.css
View File

@@ -17,11 +17,17 @@
&.current {
background: var(--white);
border-left-color: var(--main-first);
border-left: 2px solid var(--main-first);
transition: unset;
&:not(.active) {
background: var(--grey-lighter);
}
.flux_header {
background-color: unset;
margin-left: -2px; /* Compensate increased border-left-width */
}
}
&.not_read:not(.current) {
@@ -52,8 +58,6 @@
&.favorite {
border-left-color: var(--fav-bg);
transition: all 0.15s ease-in-out;
}
&.favorite:not(.current) {

10
p/themes/Ansum/_list-view.rtl.css
View File

@@ -17,11 +17,17 @@
&.current {
background: var(--white);
border-right-color: var(--main-first);
border-right: 2px solid var(--main-first);
transition: unset;
&:not(.active) {
background: var(--grey-lighter);
}
.flux_header {
background-color: unset;
margin-right: -2px; /* Compensate increased border-left-width */
}
}
&.not_read:not(.current) {
@@ -52,8 +58,6 @@
&.favorite {
border-right-color: var(--fav-bg);
transition: all 0.15s ease-in-out;
}
&.favorite:not(.current) {

11
p/themes/Flat/flat.css
View File

@@ -737,6 +737,17 @@ th {
text-align: center;
}
/* 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, #fff 3px);
margin-left: -3px; /* Compensate increased border-left-width */
}
/*=== Content of feed articles */
.content {
padding: 20px 10px;

11
p/themes/Flat/flat.rtl.css
View File

@@ -737,6 +737,17 @@ th {
text-align: center;
}
/* stylelint-disable-next-line no-duplicate-selectors */
.flux.current {
border-right-width: 5px;
border-right-style: double;
}
.flux.current > .flux_header {
background: linear-gradient(to left, transparent 0, transparent 3px, #fff 3px);
margin-right: -3px; /* Compensate increased border-left-width */
}
/*=== Content of feed articles */
.content {
padding: 20px 10px;

10
p/themes/Mapco/_list-view.css
View File

@@ -16,7 +16,13 @@
&.current {
background: var(--grey-lighter);
border-left-color: var(--main-first);
border-left: 2px solid var(--main-first);
transition: unset;
.flux_header {
background-color: unset;
margin-left: -2px; /* Compensate increased border-left-width */
}
}
&.not_read:not(.current) {
@@ -48,8 +54,6 @@
&.favorite {
border-left-color: var(--fav-bg);
transition: all 0.15s ease-in-out;
}
&.favorite:not(.current) {

10
p/themes/Mapco/_list-view.rtl.css
View File

@@ -16,7 +16,13 @@
&.current {
background: var(--grey-lighter);
border-right-color: var(--main-first);
border-right: 2px solid var(--main-first);
transition: unset;
.flux_header {
background-color: unset;
margin-right: -2px; /* Compensate increased border-left-width */
}
}
&.not_read:not(.current) {
@@ -48,8 +54,6 @@
&.favorite {
border-right-color: var(--fav-bg);
transition: all 0.15s ease-in-out;
}
&.favorite:not(.current) {

6
p/themes/Nord/nord.css
View File

@@ -809,6 +809,12 @@ li.item.active {
.flux.current {
background: var(--accent-bg);
border-left: 1px solid var(--highlight);
}
.flux.current > .flux_header {
background: linear-gradient(to right, transparent 0, transparent 1px, var(--accent-bg) 1px);
margin-left: -1px; /* Compensate increased border-left-width */
}
.flux:not(.current):hover .item .title {

6
p/themes/Nord/nord.rtl.css
View File

@@ -809,6 +809,12 @@ li.item.active {
.flux.current {
background: var(--accent-bg);
border-right: 1px solid var(--highlight);
}
.flux.current > .flux_header {
background: linear-gradient(to left, transparent 0, transparent 1px, var(--accent-bg) 1px);
margin-right: -1px; /* Compensate increased border-left-width */
}
.flux:not(.current):hover .item .title {

19
p/themes/Origine/origine.css
View File

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

19
p/themes/Origine/origine.rtl.css
View File

@@ -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-right-width: 5px;
border-right-style: double;
}
.flux.current > .flux_header {
background: linear-gradient(to left, transparent 0, transparent 3px, var(--background-color-hover) 3px);
margin-right: -3px; /* Compensate increased border-left-width */
}
.flux.not_read.current > .flux_header, .flux.not_read.current > .flux_header:hover {
background: linear-gradient(to left, 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 left, transparent 0, transparent 3px, var(--favorite-article-background-color-hover) 3px);
}
.flux_header {
font-size: 0.9rem;
border-top: 1px solid var(--border-color);

19
p/themes/Pafat/pafat.css
View File

@@ -834,6 +834,25 @@ a.signin {
background-color: var(--background-color-favorite-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.8rem;
border-top: 1px solid var(--border-color-grey-light);

19
p/themes/Pafat/pafat.rtl.css
View File

@@ -834,6 +834,25 @@ a.signin {
background-color: var(--background-color-favorite-hover);
}
/* stylelint-disable-next-line no-duplicate-selectors */
.flux.current {
border-right-width: 5px;
border-right-style: double;
}
.flux.current > .flux_header {
background: linear-gradient(to left, transparent 0, transparent 3px, var(--background-color-hover) 3px);
margin-right: -3px; /* Compensate increased border-left-width */
}
.flux.not_read.current > .flux_header, .flux.not_read.current > .flux_header:hover {
background: linear-gradient(to left, 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 left, transparent 0, transparent 3px, var(--favorite-article-background-color-hover) 3px);
}
.flux_header {
font-size: 0.8rem;
border-top: 1px solid var(--border-color-grey-light);

16
p/themes/Swage/swage.css
View File

@@ -995,8 +995,7 @@ main.post .drop-section li.item.feed a:hover .icon {
clear: both;
}
.flux_header:hover,
.current {
.flux_header:hover {
background-color: var(--color-background-hover);
&:not(.current):hover .item .title {
@@ -1004,6 +1003,19 @@ main.post .drop-section li.item.feed a:hover .icon {
}
}
&.current {
border-left: 2px solid var(--color-background-alert-darker);
.flux_header {
background-color: unset;
margin-left: -2px; /* Compensate increased border-left-width */
}
.flux_header:hover {
background: linear-gradient(to right, transparent 0, transparent 2px, var(--color-background-hover) 2px);
}
}
&.favorite:not(.current) {
background-color: var(--color-background-stared);

16
p/themes/Swage/swage.rtl.css
View File

@@ -995,8 +995,7 @@ main.post .drop-section li.item.feed a:hover .icon {
clear: both;
}
.flux_header:hover,
.current {
.flux_header:hover {
background-color: var(--color-background-hover);
&:not(.current):hover .item .title {
@@ -1004,6 +1003,19 @@ main.post .drop-section li.item.feed a:hover .icon {
}
}
&.current {
border-right: 2px solid var(--color-background-alert-darker);
.flux_header {
background-color: unset;
margin-right: -2px; /* Compensate increased border-left-width */
}
.flux_header:hover {
background: linear-gradient(to left, transparent 0, transparent 2px, var(--color-background-hover) 2px);
}
}
&.favorite:not(.current) {
background-color: var(--color-background-stared);

2
package.json
View File

@@ -31,7 +31,7 @@
"stylelint": "stylelint '**/*.css'",
"stylelint_fix": "stylelint --fix '**/*.css'",
"test": "npm run eslint && npm run stylelint && npm run markdownlint",
"fix": "npm run rtlcss && npm run stylelint_fix && npm run eslint_fix && npm run markdownlint_fix"
"fix": "npm run eslint_fix && npm run stylelint_fix && npm run rtlcss && npm run markdownlint_fix"
},
"devDependencies": {
"eslint": "^9.39.0",