sendou.ink/app/components/elements/Menu.module.css
Kalle fef1ffc955
Design refresh + a bunch of stuff (#2864)
Co-authored-by: hfcRed <hfcred@gmx.net>
2026-03-19 17:51:42 +02:00

86 lines
1.4 KiB
CSS

.popover {
border-radius: var(--radius-box);
background-color: var(--color-bg-high);
border: var(--border-style);
width: max-content;
font-size: var(--font-sm);
font-weight: var(--weight-semi);
padding: var(--s-2);
}
.popoverOpensLeft {
right: 0;
}
.scrolling {
max-height: 300px !important;
overflow-y: auto;
}
.itemsContainer {
display: flex;
flex-direction: column;
gap: var(--s-0-5);
&:focus-visible {
outline: none;
}
}
.item {
display: flex;
align-items: center;
font-weight: var(--weight-bold);
font-size: var(--font-xs);
color: var(--color-text);
white-space: nowrap;
gap: var(--s-2);
border-radius: var(--radius-field);
padding: var(--s-1-5) var(--s-3);
background-color: var(--color-bg-high);
width: 100%;
border: 0;
outline: none;
justify-content: flex-start;
transition: background-color 0.15s;
cursor: pointer;
}
.item[data-focused] {
background-color: var(--color-bg-higher);
}
.itemDisabled {
color: var(--color-text-high);
cursor: not-allowed;
}
.itemSelected {
background-color: var(--color-text-accent);
font-weight: var(--weight-extra);
}
.itemActive {
color: var(--color-text-accent);
}
.itemDestructive {
color: var(--color-error);
}
.itemIcon {
width: 18px;
}
.itemImg {
min-width: 20px;
min-height: 20px;
}
.menuHeader {
font-size: var(--font-2xs);
color: var(--color-text-high);
padding: var(--s-1) var(--s-3);
font-weight: var(--weight-semi);
}