mirror of
https://github.com/FreshRSS/FreshRSS.git
synced 2026-02-14 15:31:13 -05:00
1a3565f26c
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
99 lines
1.5 KiB
CSS
99 lines
1.5 KiB
CSS
/*=== Feed articles */
|
|
.flux {
|
|
/* border-left: 2px solid #ecf0f1;*/
|
|
background: var(--white);
|
|
|
|
transition: all 0.15s ease-in-out;
|
|
|
|
.flux_header {
|
|
&:hover {
|
|
background: var(--grey-lighter);
|
|
|
|
&:not(.current):hover .item .title {
|
|
background: var(--grey-lighter);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.current {
|
|
background: var(--white);
|
|
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) {
|
|
background: var(--unread-bg);
|
|
|
|
&:hover .item .title {
|
|
background: var(--unread-bg);
|
|
}
|
|
}
|
|
|
|
&.not_read {
|
|
.item .title {
|
|
a {
|
|
color: var(--unread-font-color);
|
|
}
|
|
}
|
|
|
|
.item.website {
|
|
a {
|
|
color: var(--unread-font-color);
|
|
}
|
|
}
|
|
|
|
.item .date {
|
|
color: color-mix(in srgb, var(--unread-font-color) 50%, transparent);
|
|
}
|
|
}
|
|
|
|
&.favorite {
|
|
border-left-color: var(--fav-bg);
|
|
}
|
|
|
|
&.favorite:not(.current) {
|
|
background: var(--fav-light);
|
|
|
|
&:hover .item .title {
|
|
background: var(--fav-light);
|
|
}
|
|
}
|
|
|
|
.website {
|
|
a {
|
|
color: var(--main-font-color);
|
|
opacity: 0.75;
|
|
}
|
|
}
|
|
|
|
.flux_header .date,
|
|
.flux_content .bottom .date {
|
|
color: color-mix(in srgb, var(--main-font-color) 50%, transparent);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.bottom {
|
|
font-size: 1rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.flux_header {
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
border-top: 1px solid var(--grey-light);
|
|
|
|
.title {
|
|
font-size: 1rem;
|
|
}
|
|
}
|