121 lines
3.6 KiB
CSS
121 lines
3.6 KiB
CSS
@font-face {
|
|
font-family: "Twemoji Country Flags";
|
|
src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2")
|
|
format("woff2");
|
|
font-display: swap;
|
|
unicode-range:
|
|
U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074,
|
|
U+E0077, U+E007F;
|
|
}
|
|
|
|
:root {
|
|
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
|
|
--font-mono: "JetBrains Mono", "Fira Code", monospace;
|
|
--font-logo: var(--font-mono);
|
|
color-scheme: dark;
|
|
--accent: #00fe7a;
|
|
--bg: #03070b;
|
|
--panel: #111820;
|
|
--panel-2: #0b1118;
|
|
--panel-3: #17212b;
|
|
--border: rgba(255, 255, 255, 0.12);
|
|
--border-strong: rgba(255, 255, 255, 0.2);
|
|
--text: #f2f7f4;
|
|
--muted: #a9b4b0;
|
|
--dim: #68736f;
|
|
--danger: #ff6b6b;
|
|
--danger-text: #ffb4b4;
|
|
--danger-soft: color-mix(in srgb, var(--danger) 12%, var(--panel));
|
|
--danger-border: color-mix(in srgb, var(--danger) 34%, var(--border));
|
|
--success: #3ecf8e;
|
|
--success-text: #7ff0b9;
|
|
--success-soft: color-mix(in srgb, var(--success) 12%, var(--panel));
|
|
--success-border: color-mix(in srgb, var(--success) 34%, var(--border));
|
|
--warning: #ffd166;
|
|
--warning-text: #ffd166;
|
|
--warning-soft: color-mix(in srgb, var(--warning) 12%, var(--panel));
|
|
--warning-border: color-mix(in srgb, var(--warning) 34%, var(--border));
|
|
--info: #2d9cff;
|
|
--info-text: #8ed0ff;
|
|
--info-soft: color-mix(in srgb, var(--info) 12%, var(--panel));
|
|
--info-border: color-mix(in srgb, var(--info) 34%, var(--border));
|
|
--blue: #2d9cff;
|
|
--radius: 8px;
|
|
--accent-contrast: #03100a;
|
|
--surface-sheen: rgba(255, 255, 255, 0.055);
|
|
--surface-sheen-soft: rgba(255, 255, 255, 0.018);
|
|
--surface-hover: rgba(255, 255, 255, 0.04);
|
|
--surface-muted: rgba(255, 255, 255, 0.035);
|
|
--surface-subtle-border: rgba(255, 255, 255, 0.1);
|
|
--overlay-scrim: rgba(0, 0, 0, 0.56);
|
|
--nav-bg: rgba(7, 12, 17, 0.88);
|
|
--rail-bg: rgba(7, 12, 17, 0.55);
|
|
--shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.22);
|
|
--shadow-strong: 0 26px 70px rgba(0, 0, 0, 0.46);
|
|
--shadow-popover: 0 20px 34px rgba(0, 0, 0, 0.42);
|
|
--inset-highlight: rgba(255, 255, 255, 0.05);
|
|
|
|
/* Admin design tokens — kept on :root so portal-rendered admin
|
|
surfaces (dialogs, bits-ui Select.Portal content) inherit them. */
|
|
--admin-bg: var(--bg);
|
|
--admin-surface: var(--panel);
|
|
--admin-surface-2: var(--panel-2);
|
|
--admin-elev: var(--panel-3);
|
|
--admin-border: var(--border);
|
|
--admin-border-strong: var(--border-strong);
|
|
--admin-text: var(--text);
|
|
--admin-muted: var(--muted);
|
|
--admin-dim: var(--dim);
|
|
--admin-ring: color-mix(in srgb, var(--accent) 50%, transparent);
|
|
--screen-gutter: 18px;
|
|
--safe-inline: max(env(safe-area-inset-left), env(safe-area-inset-right));
|
|
--nav-inline-gutter: max(var(--screen-gutter), var(--safe-inline));
|
|
--bottom-nav-height: 64px;
|
|
--bottom-nav-offset: 10px;
|
|
--bottom-nav-left: calc(max(0px, (100% - 440px) / 2) + var(--nav-inline-gutter));
|
|
--bottom-nav-width: min(
|
|
calc(100% - (var(--nav-inline-gutter) * 2)),
|
|
calc(440px - (var(--nav-inline-gutter) * 2))
|
|
);
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
.theme-light {
|
|
color-scheme: light;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#app {
|
|
min-height: 100%;
|
|
margin: 0;
|
|
overflow-x: clip;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg, #02070b);
|
|
color: var(--text);
|
|
-webkit-font-smoothing: antialiased;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
button,
|
|
input {
|
|
font: inherit;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.app-shell {
|
|
min-height: 100dvh;
|
|
background: var(--bg, #02070b) !important;
|
|
}
|
|
|
|
:root {
|
|
--desktop-rail-width: 252px;
|
|
--desktop-page-gutter: clamp(28px, 4vw, 72px);
|
|
}
|