57 lines
1.4 KiB
CSS
57 lines
1.4 KiB
CSS
@import "tailwindcss";
|
||
@plugin "@tailwindcss/typography";
|
||
|
||
@theme inline {
|
||
/* Colors */
|
||
--color-background: #100b14;
|
||
--color-foreground: #180161;
|
||
--color-primary: #eb3779;
|
||
--color-secondary: #571b8b;
|
||
--color-accent: #fb793c;
|
||
--color-text: #ebe4f1;
|
||
--color-border: color-mix(in srgb, var(--color-text) 20%, transparent);
|
||
--color-border-active: color-mix(
|
||
in srgb,
|
||
var(--color-text) 60%,
|
||
transparent
|
||
);
|
||
|
||
/* Defaults */
|
||
--default-transition-duration: 0.3s;
|
||
|
||
/* Fonts */
|
||
--font-sans: var(--font-lexend);
|
||
}
|
||
|
||
/* Touch targets — WCAG 2.1 AA: minimum 44×44px */
|
||
.touch-target {
|
||
min-height: 44px;
|
||
min-width: 44px;
|
||
}
|
||
|
||
/* Gamepad focus ring — visible only when gamepad navigation is active */
|
||
.gamepad-focus :focus,
|
||
.gamepad-focus:focus-visible {
|
||
outline: 2px solid var(--color-primary);
|
||
outline-offset: 2px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* Thin scrollbar for horizontal scroll sections */
|
||
.scrollbar-thin {
|
||
scrollbar-width: thin;
|
||
scrollbar-color: color-mix(in srgb, var(--color-text) 15%, transparent) transparent;
|
||
}
|
||
|
||
.scrollbar-thin::-webkit-scrollbar {
|
||
height: 4px;
|
||
}
|
||
|
||
.scrollbar-thin::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||
background: color-mix(in srgb, var(--color-text) 15%, transparent);
|
||
border-radius: 2px;
|
||
} |