Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-08-20 10:04:57 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Design refresh + a bunch of stuff (#2864)

Browse Source 
Co-authored-by: hfcRed <hfcred@gmx.net>
This commit is contained in:
Kalle
2026-03-19 17:51:42 +02:00
committed by GitHub
parent fcc5c5f273
commit fef1ffc955
830 changed files with 35854 additions and 16836 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
app/components/elements/Menu.module.css
View File

@@ -1,74 +1,71 @@
.itemsContainer {
position: absolute;
top: 32px;
border-radius: var(--rounded);
background-color: var(--bg-darker);
.popover {
border-radius: var(--radius-box);
background-color: var(--color-bg-high);
border: var(--border-style);
z-index: 10;
display: flex;
flex-direction: column;
overflow: hidden;
align-items: flex-start;
width: max-content;
font-size: var(--font-sm);
font-weight: var(--weight-semi);
padding: var(--s-2);
}
.itemsContainerOpensLeft {
.popoverOpensLeft {
right: 0;
}
.container {
position: relative;
}
.scrolling {
max-height: 300px !important;
overflow-y: auto;
scrollbar-color: rgb(83 65 91) transparent;
scrollbar-width: thin;
scrollbar-gutter: stable;
}
.itemsContainer {
display: flex;
flex-direction: column;
gap: var(--s-0-5);
&:focus-visible {
outline: none;
}
}
.item {
display: flex;
align-items: center;
font-weight: var(--bold);
font-size: var(--fonts-xs);
color: var(--text);
font-weight: var(--weight-bold);
font-size: var(--font-xs);
color: var(--color-text);
white-space: nowrap;
gap: var(--s-2);
border-radius: var(--rounded-xs);
padding: var(--s-1-5) var(--s-2-5);
background-color: var(--bg-darker);
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;
}
.item:first-child {
border-radius: 14.5px 14.5px var(--rounded-xs) var(--rounded-xs);
}
.item:last-child {
border-radius: var(--rounded-xs) var(--rounded-xs) 14.5px 14.5px;
transition: background-color 0.15s;
cursor: pointer;
}
.item[data-focused] {
background-color: var(--theme-very-transparent);
background-color: var(--color-bg-higher);
}
.itemDisabled {
color: var(--text-lighter);
color: var(--color-text-high);
cursor: not-allowed;
}
.itemSelected {
background-color: var(--theme-transparent);
font-weight: var(--extra-bold);
background-color: var(--color-text-accent);
font-weight: var(--weight-extra);
}
.itemActive {
color: var(--theme);
color: var(--color-text-accent);
}
.itemDestructive {
color: var(--color-error);
}
.itemIcon {
@@ -76,6 +73,13 @@
}
.itemImg {
min-width: 24px;
min-height: 24px;
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);
}