Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-08-20 01:55:26 -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

109
app/components/elements/Button.module.css
View File

@@ -3,24 +3,26 @@
width: auto;
align-items: center;
justify-content: center;
border: 2px solid var(--theme);
border-radius: var(--rounded-sm);
border: var(--border-style-accent);
border-radius: var(--radius-field);
appearance: none;
background: var(--theme);
color: var(--button-text);
background: var(--color-text-accent);
color: var(--color-text-inverse);
cursor: pointer;
font-size: var(--fonts-sm);
font-weight: var(--bold);
line-height: 1.2;
outline-offset: 2px;
padding-block: var(--s-1-5);
padding-inline: var(--s-2-5);
font-size: var(--font-sm);
font-weight: var(--weight-bold);
padding: 0 var(--field-padding);
user-select: none;
outline-color: var(--color-text-accent);
height: var(--field-size);
white-space: nowrap;
}
.button[data-focus-visible],
.button:focus-visible {
outline: 2px solid var(--theme);
outline-style: solid;
outline-width: 2px;
outline-offset: 1px;
}
.button[data-pressed],
@@ -36,77 +38,94 @@
}
.outlined {
background-color: var(--theme-very-transparent);
color: var(--theme);
background-color: transparent;
color: var(--color-text-accent);
}
.outlinedSuccess {
border-color: var(--theme-success);
border-color: var(--color-success);
background-color: transparent;
color: var(--theme-success);
color: var(--color-success);
outline-color: var(--color-success);
}
.outlinedDestructive {
border-color: var(--color-error);
background-color: transparent;
color: var(--color-error);
outline-color: var(--color-error);
}
.small {
font-size: var(--fonts-xs);
padding-block: var(--s-1);
padding-inline: var(--s-2);
font-size: var(--font-xs);
height: var(--field-size-sm);
}
.miniscule {
font-size: var(--fonts-xxs);
padding-block: var(--s-1);
padding-inline: var(--s-2);
font-size: var(--font-2xs);
height: var(--field-size-xs);
}
.big {
font-size: var(--fonts-md);
padding-block: var(--s-2-5);
padding-inline: var(--s-6);
font-size: var(--font-md);
height: var(--field-size-lg);
}
.square {
aspect-ratio: 1 / 1;
padding: 0;
}
.circle {
border-radius: 50%;
aspect-ratio: 1 / 1;
padding: 0;
}
.minimal {
padding: 0;
border: none;
background-color: transparent;
color: var(--theme);
color: var(--color-text-accent);
outline: initial;
}
.minimal[data-focus-visible] {
outline: 2px solid var(--theme);
outline: var(--focus-ring);
}
.minimalSuccess {
padding: 0;
border: none;
background-color: transparent;
color: var(--theme-success);
color: var(--color-success);
outline-color: var(--color-success);
}
.success {
border-color: var(--theme-success);
background-color: var(--theme-success);
outline-color: var(--theme-success);
border-color: var(--color-success);
background-color: var(--color-success);
outline-color: var(--color-success);
}
.destructive {
border-color: var(--theme-error);
background-color: transparent;
color: var(--theme-error);
outline-color: var(--theme-error);
border-color: var(--color-error);
background-color: var(--color-error);
color: var(--color-text-inverse);
outline-color: var(--color-error);
}
.minimalDestructive {
padding: 0;
border: none;
background-color: transparent;
color: var(--theme-error);
outline-color: var(--theme-error);
color: var(--color-error);
outline-color: var(--color-error);
}
.buttonIcon {
min-width: 1.25rem;
max-width: 1.25rem;
min-width: 20px;
max-width: 20px;
margin-inline-end: var(--s-1-5);
}
@@ -115,13 +134,19 @@
}
.buttonIconSmall {
min-width: 1rem;
max-width: 1rem;
min-width: 18px;
max-width: 18px;
margin-inline-end: var(--s-1);
}
.buttonIconMiniscule {
min-width: 0.857rem;
max-width: 0.857rem;
min-width: 14px;
max-width: 14px;
margin-inline-end: var(--s-1);
}
.buttonIconBig {
min-width: 28px;
max-width: 28px;
margin-inline-end: var(--s-2);
}