mirror of
https://github.com/FreshRSS/FreshRSS.git
synced 2026-05-14 10:13:52 -04:00
Fixes #7405 Several themes inherit the same button-radius cascade bug: a single button inside a `.group` element ends up right-rounded only because the `.btn` matches both `:first-child` and `:last-child`, and the right-radius rule wins by source order. Visible on: - The **Update feeds** button (lone `.btn` in `#nav_menu_actualize`) - The **Toggle sidebar** button at narrow width (`#nav_menu_toggle_aside`) - The **Sorting** button (`.btn` inside a lone `.dropdown` in `#nav_menu_sort`) The fix uses targeted `:only-child` rules that give full radius to lone `.group` children, with selector form `.group > .btn:only-child, .group > .dropdown:only-child > .btn`. In **Dark** and **Origine**, the Sorting button also needs an explicit `border-left` restored on the dropdown branch. Origine's `.group .dropdown:last-child > .btn { border-left: none }` strips the left border from a lone dropdown's button. Dark inherits this strip rule via its `../Origine/origine.css` import, so the same fix is applied in both themes, each re-asserting the border in its own variable (`--border-color` for Origine, `--dark-border-color0` for Dark). The radius rule and the border-left re-assertion are kept as separate blocks so the border-left only applies to the dropdown case, not to lone `.btn` children. Themes affected directly: Alternative-Dark, Ansum, Dark, Flat, Mapco, Origine, Pafat. Dark-pink inherits via its `../Alternative-Dark/adark.css` import; Origine-compact inherits via its `../Origine/origine.css` import. The same restore-radius / restore-border approach was approved in #8711 for Nord's mark-read toggle. ### Out of scope The mark-read dropdown (`#nav_menu_read_all`) at narrow widths looks similar but is not fixed here. The dropdown is not a CSS `:only-child` of `.group` (its sibling `.read_all` button is still in the DOM, even when it visually wraps to a new row), so the rules in this PR do not match it. That case is handled in a separate upcoming PR with `@media` rules per theme. ### Screenshots #### Sorting button (visible-border theme) Before: <img width="494" height="41" alt="origine visible-border original" src="https://github.com/user-attachments/assets/d8edfc7b-06b1-4156-911b-e559c2b2c278" /> After: <img width="494" height="42" alt="origine visible-border fixed" src="https://github.com/user-attachments/assets/8540c0e1-dbe1-46a9-adec-b0e822e7860d" /> #### Update feeds button (lone .btn case) Before: <img width="680" height="123" alt="mapco lone btn original" src="https://github.com/user-attachments/assets/21acac15-2c48-40f2-b8e7-9bcd39ab29e8" /> After: <img width="692" height="123" alt="mapco lone btn fixed" src="https://github.com/user-attachments/assets/6bd1c59d-5039-44cc-9a8d-eecf86e5df68" /> ### Notes - `.rtl.css` regenerated via `make rtl`. - `npm run stylelint` passes. - Tested locally on FreshRSS 1.28.2-dev across all affected themes. Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
281 lines
4.6 KiB
CSS
281 lines
4.6 KiB
CSS
/*=== Tree */
|
|
.tree {
|
|
margin: 10px 0;
|
|
|
|
&#sidebar {
|
|
scrollbar-color: rgba(255,255, 0, 0.1) rgba(0, 0, 0, 0.05);
|
|
scrollbar-color: color-mix(in srgb, var(--sid-font-color) 20%, transparent) color-mix(in srgb, var(--sid-font-color) 13%, transparent);
|
|
}
|
|
|
|
.tree-folder {
|
|
border-bottom: 1px solid var(--sid-sep);
|
|
box-shadow: inset 1px -11px 8px #0003;
|
|
|
|
.tree-folder-title {
|
|
padding: 0.75rem 1rem;
|
|
background: var(--sid-bg);
|
|
position: relative;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 1px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
|
|
button.dropdown-toggle {
|
|
margin: -0.75rem -1rem -0.75rem 0.25rem;
|
|
padding: 0.75rem 1rem 0.75rem 0;
|
|
|
|
&:hover {
|
|
.icon {
|
|
filter: brightness(1.7) !important;
|
|
transition: 0.1s linear;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.title {
|
|
background: inherit;
|
|
color: var(--sid-font-color);
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
.tree-folder-title {
|
|
background: var(--sid-bg);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.tree-folder-items {
|
|
background: var(--sid-bg-alt);
|
|
|
|
.item {
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
|
|
transition: all 0.15s ease-in-out;
|
|
|
|
&.active {
|
|
background: var(--sid-active);
|
|
|
|
.dropdown li a {
|
|
color: var(--main-font-color);
|
|
|
|
&:hover {
|
|
color: var(--sid-font-color);
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: var(--sid-active-font);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--sid-bg-dark);
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--sid-font-color);
|
|
|
|
&.dropdown-toggle {
|
|
.icon {
|
|
margin-left: 0.25rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*=== Buttons */
|
|
.stick,
|
|
.group {
|
|
input, .btn {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.btn:first-child {
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
|
|
.btn:last-child, input:last-child, .dropdown:last-child > .btn {
|
|
border-radius: 5px 0 0 5px;
|
|
}
|
|
|
|
.btn + .btn,
|
|
.btn + input,
|
|
.btn + .dropdown > .btn,
|
|
input + .btn,
|
|
input + input,
|
|
input + .dropdown > .btn,
|
|
.dropdown + .btn,
|
|
.dropdown + input,
|
|
.dropdown + .dropdown > .btn {
|
|
border-right: 1px solid var(--grey-medium-light);
|
|
}
|
|
|
|
}
|
|
|
|
.group > .btn:only-child,
|
|
.group > .dropdown:only-child > .btn {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.aside {
|
|
background: var(--sid-bg);
|
|
|
|
|
|
&.aside_feed {
|
|
padding: 10px 0;
|
|
text-align: center;
|
|
background: var(--sid-bg);
|
|
border-left: 1px solid var(--sid-sep);
|
|
|
|
.tree-folder-title:hover button.dropdown-toggle .icon {
|
|
filter: none;
|
|
}
|
|
}
|
|
|
|
&.aside_feed .tree {
|
|
margin: 10px 0 50px;
|
|
}
|
|
|
|
a:hover {
|
|
.icon {
|
|
filter: brightness(1.7);
|
|
transition: 0.1s linear;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/* Sidebar des pages de configuration */
|
|
|
|
|
|
|
|
/*=== Navigation */
|
|
.nav-list {
|
|
font-size: 1rem;
|
|
|
|
.item.nav-header,
|
|
.item {
|
|
min-height: 2.5em;
|
|
line-height: 2.5em;
|
|
}
|
|
|
|
.item {
|
|
background: var(--sid-bg);
|
|
min-height: 2.5em;
|
|
line-height: 2.5em;
|
|
|
|
&.nav-header {
|
|
min-height: 2.5em;
|
|
line-height: 2.5em;
|
|
}
|
|
|
|
a,
|
|
.as-link {
|
|
padding: 0 1rem;
|
|
color: var(--sid-font-color);
|
|
|
|
transition: all 0.15s ease-in-out;
|
|
}
|
|
|
|
a:hover,
|
|
.as-link:hover {
|
|
background: var(--sid-bg-dark);
|
|
text-decoration: none;
|
|
}
|
|
|
|
&.active {
|
|
background: var(--main-first);
|
|
color: var(--white);
|
|
|
|
a,
|
|
.as-link {
|
|
background: var(--main-first);
|
|
color: var(--white);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-header {
|
|
padding: 0 1rem;
|
|
font-weight: bold;
|
|
color: var(--grey-dark);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.nav-form {
|
|
padding: 3px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
/*=== Aside main page (categories) */
|
|
.aside_feed .tree-folder-title > .title:not([data-unread="0"]) {
|
|
width: calc(100% - 35px - 35px);
|
|
}
|
|
|
|
.aside.aside_feed .category .title:not([data-unread="0"])::after {
|
|
margin: 0.75rem 0 0 0;
|
|
background-color: var(--sid-pills);
|
|
}
|
|
|
|
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
|
|
margin: 0.5em 0 0 0;
|
|
background-color: var(--sid-pills);
|
|
}
|
|
|
|
.feed.item.empty.active {
|
|
background: var(--grey-dark);
|
|
}
|
|
|
|
.feed.item.error.active {
|
|
background: var(--grey-dark);
|
|
}
|
|
|
|
.feed.item.empty,
|
|
.feed.item.empty > a {
|
|
color: var(--grey-dark);
|
|
}
|
|
|
|
.feed.item.error,
|
|
.feed.item.error > a {
|
|
color: var(--grey-dark);
|
|
}
|
|
|
|
.feed.item.empty.active,
|
|
.feed.item.error.active,
|
|
.feed.item.empty.active > a,
|
|
.feed.item.error.active > a {
|
|
color: var(--white);
|
|
}
|
|
|
|
.aside_feed .tree-folder-items .dropdown-menu::after {
|
|
right: 2px;
|
|
}
|
|
|
|
.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
|
|
.aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
|
|
.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.aside_feed .stick #btn-add {
|
|
border-right-color: var(--sid-bg);
|
|
}
|