/* 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;}
/* 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;
}