Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-08-24 03:55:49 -05:00
Code Issues Actions 3 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

125
app/components/elements/Select.module.css
View File

@@ -1,60 +1,58 @@
.button {
height: 1rem;
padding: var(--s-4) var(--s-3);
border: 2px solid var(--border);
border-radius: var(--rounded-sm);
accent-color: var(--theme-secondary);
background-color: var(--bg-input);
color: var(--text);
height: var(--field-size);
padding: 0 var(--field-padding);
border: var(--border-style);
border-radius: var(--radius-field);
background-color: var(--color-bg);
outline: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-1-5);
width: var(--select-width);
width: 100%;
cursor: pointer;
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
letter-spacing: 0.5px;
}
&[data-focus-visible],
&[aria-expanded="true"] {
outline: var(--focus-ring);
outline-offset: 1px;
}
.button[data-focus-visible] {
outline: 2px solid var(--theme);
&[data-disabled] {
pointer-events: none;
cursor: not-allowed;
opacity: 0.5;
outline: none;
}
}
.selectValue {
max-width: calc(var(--select-width) - 55px);
font-size: var(--font-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
min-width: 0;
color: var(--color-text);
}
.selectValue[data-placeholder] {
color: var(--text-lighter);
color: var(--color-text-high);
}
.icon {
min-width: 18px;
max-width: 18px;
stroke-width: 2.5px;
color: var(--text-lighter);
}
.smallIcon {
min-width: 16px;
max-width: 16px;
stroke-width: 2px;
color: var(--text-lighter);
color: var(--color-text-high);
}
.popover {
padding: var(--s-1);
width: var(--trigger-width);
border: 2px solid var(--border);
border-radius: var(--rounded);
background-color: var(--bg-darker);
max-height: 250px !important;
border: var(--border-style);
border-radius: var(--radius-box);
background-color: var(--color-bg);
outline: none;
display: flex;
flex-direction: column;
@@ -63,35 +61,30 @@
.listBox {
overflow: auto;
flex: 1;
scrollbar-color: rgb(83 65 91) rgba(83 65 91 / 0.3);
scrollbar-width: thin;
scrollbar-gutter: stable;
}
.item {
font-size: var(--fonts-xsm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
padding: var(--s-1-5);
border-radius: var(--rounded-sm);
height: 33px;
border-radius: var(--radius-field);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.item[data-disabled] {
color: var(--text-lighter);
font-style: italic;
color: var(--color-text-high);
}
.itemFocused {
background-color: var(--theme-transparent);
color: var(--text);
background-color: var(--color-bg-high);
color: var(--color-text);
}
.itemSelected {
color: var(--theme);
font-weight: var(--bold);
color: var(--color-text-accent);
font-weight: var(--weight-bold);
}
.searchField {
@@ -99,20 +92,20 @@
display: flex;
gap: var(--s-2);
border: 2px solid var(--border);
border-radius: var(--rounded-sm);
accent-color: var(--theme-secondary);
background-color: var(--bg-input);
color: var(--text);
border-bottom: 1px solid var(--color-border);
border-radius: 0;
accent-color: var(--color-accent);
color: var(--color-text);
outline: none;
padding: var(--s-1-5) var(--s-2);
padding: var(--s-1-5) var(--s-1-5) calc(var(--s-0-5) + var(--s-2))
var(--s-1-5);
margin-block-end: var(--s-1-5);
}
.searchInput {
all: unset;
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
letter-spacing: 0.5px;
flex: 1;
}
@@ -122,7 +115,7 @@
}
.searchInput::placeholder {
color: var(--text-lighter);
color: var(--color-text-high);
}
.searchClearButton {
@@ -141,20 +134,28 @@
}
.noResults {
font-size: var(--fonts-md);
font-weight: var(--bold);
font-size: var(--font-md);
font-weight: var(--weight-bold);
text-align: center;
padding-block: var(--s-8);
color: var(--text-lighter);
color: var(--color-text-high);
}
.select {
width: 100%;
position: relative;
}
.label {
font-size: var(--font-xs);
font-weight: var(--weight-bold);
margin-block-end: var(--label-margin);
display: block;
}
.clearButton {
position: absolute;
bottom: -17px;
bottom: -21px;
right: 9px;
}
@@ -162,18 +163,18 @@
display: flex;
align-items: center;
gap: var(--s-2);
font-weight: bold;
color: var(--text-lighter);
font-weight: var(--weight-extra);
color: var(--color-text-high);
text-transform: uppercase;
font-size: var(--fonts-xxs);
padding-block-start: var(--s-2-5);
font-size: var(--font-2xs);
padding-block-start: var(--s-3);
padding-block-end: var(--s-1);
padding-inline: var(--s-1-5);
white-space: nowrap;
}
.categoryDivider {
background-color: var(--border);
background-color: var(--color-border);
width: 100%;
height: 2px;
margin-block: var(--s-2);
@@ -181,7 +182,7 @@
.categoryHeading img {
border-radius: 100%;
background-color: var(--bg-lightest);
background-color: var(--color-bg-higher);
padding: var(--s-1);
min-width: 28px;
}