mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-05-13 22:40:24 +00:00
6b75654cc2
Related issue: https://codeberg.org/forgejo/forgejo/issues/8581 This should be a nice first step towards RTL support. Future PRs can look at updating the tailwind classes, changing some of the icons (arrow left might need to become arrow right in some cases for example, and updating the template files) Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12491 Reviewed-by: 0ko <0ko@noreply.codeberg.org>
69 lines
1.9 KiB
CSS
69 lines
1.9 KiB
CSS
/* Copyright 2025 The Forgejo Authors. All rights reserved.
|
|
* SPDX-License-Identifier: GPL-3.0-or-later */
|
|
|
|
:root .switch {
|
|
/* The resulting switch height is --switch-item-min-height + 2px */
|
|
--switch-item-min-height: 34px;
|
|
--switch-padding-inline: 1.125em;
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
:root .switch {
|
|
--switch-item-min-height: 38px;
|
|
}
|
|
}
|
|
|
|
.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-inline: var(--switch-padding-inline);
|
|
min-height: var(--switch-item-min-height);
|
|
color: var(--color-text);
|
|
border-radius: var(--border-radius);
|
|
text-wrap: nowrap;
|
|
transition: background-color 0.1s ease;
|
|
|
|
&:hover {
|
|
background: var(--color-hover);
|
|
}
|
|
|
|
&.active {
|
|
z-index: 2;
|
|
padding-inline-start: var(--switch-padding-inline);
|
|
background: var(--color-active);
|
|
outline: 1px solid var(--color-input-border);
|
|
}
|
|
|
|
/* Prevent default browser styling */
|
|
&button {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
/* Corner rounding aid: 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-inline-end: calc(-1 * var(--border-radius));
|
|
padding-inline-end: calc(var(--switch-padding-inline) + var(--border-radius));
|
|
}
|
|
.switch > .active.item + .item { /* Active neighbor is previous item */
|
|
margin-inline-start: calc(-1 * var(--border-radius));
|
|
padding-inline-start: calc(var(--switch-padding-inline) + var(--border-radius));
|
|
}
|
|
|
|
/* Make counters embedded into items more visible on brighter backgrounds */
|
|
.switch > .item:is(.active, :hover) > .ui.label {
|
|
background: var(--color-label-bg-alt, var(--color-label-bg));
|
|
}
|