mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2025-10-31 06:21:11 +00:00
18cd9b5efa
Followup to https://codeberg.org/forgejo/forgejo/issues/6459 Preview: - https://codeberg.org/attachments/cc12a227-c6eb-4ab5-91ad-0ef967f88c7a - https://codeberg.org/attachments/a13c8cb6-f654-430c-a6c6-990a2a7f0911 Changes: - hovered items now have background painted with transition - added E2E testing: mostly for CSS logic introduced in this PR but also a bit for existing functionality - variable --color-active is now consistently non-transparent: it already was in forgejo-dark but is now in all themes - some code improvements in switch.css Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9057 Reviewed-by: Beowulf <beowulf@beocode.eu>
61 lines
1.5 KiB
CSS
61 lines
1.5 KiB
CSS
/* Copyright 2025 The Forgejo Authors. All rights reserved.
|
|
SPDX-License-Identifier: GPL-3.0-or-later */
|
|
|
|
:root .switch {
|
|
--switch-padding-y: .5em;
|
|
--switch-padding-x: 1.125em;
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
:root .switch {
|
|
--switch-padding-y: .75em;
|
|
}
|
|
}
|
|
|
|
.switch {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
height: fit-content;
|
|
align-items: center;
|
|
align-self: center;
|
|
background: var(--color-menu);
|
|
border: 1px solid var(--color-input-border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.switch > .item {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
padding: var(--switch-padding-y) var(--switch-padding-x);
|
|
color: var(--color-text);
|
|
border-radius: var(--border-radius);
|
|
text-wrap: nowrap;
|
|
transition: background-color 0.1s ease;
|
|
}
|
|
|
|
.switch > .item:hover {
|
|
background: var(--color-hover);
|
|
}
|
|
|
|
/* Item that has to crawl under it's active neighbor, so when it is hovered,
|
|
there are no ugly unpainted v/^ shapes between them */
|
|
.switch > .item:has(+ .active.item) { /* Active neighbor is next item */
|
|
margin-right: calc(-1 * var(--border-radius));
|
|
padding-right: calc(var(--switch-padding-x) + var(--border-radius));
|
|
}
|
|
.switch > .active.item + .item { /* Active neighbor is previous item */
|
|
margin-left: calc(-1 * var(--border-radius));
|
|
padding-left: calc(var(--switch-padding-x) + var(--border-radius));
|
|
}
|
|
|
|
.switch > .active.item {
|
|
z-index: 2;
|
|
padding-left: var(--switch-padding-x);
|
|
background: var(--color-active);
|
|
outline: 1px solid var(--color-input-border);
|
|
}
|
|
|
|
.switch > button.item {
|
|
background: transparent;
|
|
}
|