mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-02-19 04:27:52 -05:00
3f7859f52d
Adds a new button on the right side of the label's filter menu items to explicitly exclude labels. The new button is reachable with the keyboard by using the vertical arrow keys to reach the label you want to exclude and then the horizontal arrow keys to select the exclusion button. The new button will only be visible when hovering the menu item or reaching it with the keyboard. Adjusted the alignment of labels when at least one label is selected so that users can clearly discern which labels are selected or not. Resolves #3302 Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10702 Reviewed-by: Gusted <gusted@noreply.codeberg.org> Co-authored-by: Luis <luis@adame.dev> Co-committed-by: Luis <luis@adame.dev>
75 lines
1.4 KiB
CSS
75 lines
1.4 KiB
CSS
/* Copyright 2025 The Forgejo Authors. All rights reserved.
|
|
* SPDX-License-Identifier: GPL-3.0-or-later */
|
|
|
|
.archived-label-filter:has(#archived-label-filter:not(:checked))
|
|
[data-is-archived] {
|
|
display: none !important;
|
|
}
|
|
|
|
.menu .item:has(> .label-filter-item) .label-exclude-item-btn {
|
|
opacity: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
height: 100%;
|
|
width: 40px;
|
|
background: none;
|
|
color: var(--color-secondary-dark-5);
|
|
|
|
@media (any-hover: none) {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.active {
|
|
color: var(--color-secondary-dark-10);
|
|
}
|
|
|
|
&:is(:hover, :focus-visible),
|
|
&.selected {
|
|
background: var(--color-secondary);
|
|
color: var(--color-secondary-dark-7);
|
|
}
|
|
}
|
|
|
|
.ui.menu .ui.dropdown .menu > .item:has(> .label-filter-item) {
|
|
max-width: 288px;
|
|
|
|
@media (any-hover: none) {
|
|
padding-right: 50px !important;
|
|
}
|
|
|
|
&:hover,
|
|
&.selected,
|
|
&:has(.label-exclude-item-btn.active) {
|
|
padding-right: 50px !important;
|
|
|
|
.label-exclude-item-btn {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu:has(> .item[data-selected])
|
|
.item:not([data-selected])
|
|
> .label-filter-item {
|
|
padding-left: 27px;
|
|
}
|
|
|
|
.menu .item .label-filter-item {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.menu .item .label-filter-item > .label {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
display: block;
|
|
}
|
|
|
|
.menu .item .archived-label-indicator {
|
|
margin: 0 0 0 10px !important;
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
transition: transform 200ms ease;
|
|
}
|
|
}
|