118 lines
3.7 KiB
CSS
118 lines
3.7 KiB
CSS
:root {
|
|
--bg: #0f1117;
|
|
--panel: #161a23;
|
|
--panel-overlay: rgba(255, 255, 255, 0.02);
|
|
--card-overlay: rgba(255, 255, 255, 0.03);
|
|
--muted: #9ca3af;
|
|
--text: #e5e7eb;
|
|
--accent: #7dd3fc;
|
|
--accent-2: #22c55e;
|
|
--warning: #f59e0b;
|
|
--border: #1f2430;
|
|
--shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
|
|
--topbar-bg: rgba(15, 17, 23, 0.8);
|
|
--toggle-track: #374151;
|
|
--input-bg: #0c0e14;
|
|
--input-border: var(--border);
|
|
--disabled-bg: #141a22;
|
|
--disabled-border: #2a313c;
|
|
--disabled-text: #7c8696;
|
|
--disabled-strong: #0b0f18;
|
|
--input-disabled-bg: #141a22;
|
|
--input-disabled-text: #7c8696;
|
|
--input-disabled-border: #2a313c;
|
|
--font-body: "Red Hat Text", "Inter", "Segoe UI", system-ui, -apple-system,
|
|
sans-serif;
|
|
--font-heading: "Red Hat Display", "Red Hat Text", system-ui, -apple-system,
|
|
sans-serif;
|
|
font-family: var(--font-body);
|
|
}
|
|
:root[data-font="space"] {
|
|
--font-body: "Space Grotesk", "Inter", "Segoe UI", system-ui, -apple-system,
|
|
sans-serif;
|
|
--font-heading: "Space Grotesk", "Red Hat Text", system-ui, -apple-system,
|
|
sans-serif;
|
|
}
|
|
:root[data-font="manrope"] {
|
|
--font-body: "Manrope", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
|
|
--font-heading: "Manrope", "Manrope", system-ui, -apple-system, sans-serif;
|
|
}
|
|
:root[data-font="dmsans"] {
|
|
--font-body: "DM Sans", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
|
|
--font-heading: "DM Sans", "Red Hat Display", system-ui, -apple-system, sans-serif;
|
|
}
|
|
:root[data-font="sora"] {
|
|
--font-body: "Sora", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
|
|
--font-heading: "Sora", "Sora", system-ui, -apple-system, sans-serif;
|
|
}
|
|
:root[data-font="chivo"] {
|
|
--font-body: "Chivo", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
|
|
--font-heading: "Chivo", "Chivo", system-ui, -apple-system, sans-serif;
|
|
}
|
|
:root[data-font="atkinson"] {
|
|
--font-body: "Atkinson Hyperlegible", "Inter", "Segoe UI", system-ui, -apple-system,
|
|
sans-serif;
|
|
--font-heading: "Atkinson Hyperlegible", "Atkinson Hyperlegible", system-ui,
|
|
-apple-system, sans-serif;
|
|
}
|
|
:root[data-font="plex"] {
|
|
--font-body: "IBM Plex Sans", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
|
|
--font-heading: "IBM Plex Sans", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
|
|
}
|
|
:root[data-theme="light"] {
|
|
--bg: #dfe4ee;
|
|
--panel: #f6f8fd;
|
|
--panel-overlay: rgba(10, 12, 18, 0.06);
|
|
--card-overlay: rgba(10, 12, 18, 0.11);
|
|
--muted: #4b5563;
|
|
--text: #0b1224;
|
|
--accent: #0077c2;
|
|
--accent-2: #15803d;
|
|
--warning: #b45309;
|
|
--border: #bcc5d6;
|
|
--shadow: 0 12px 30px rgba(12, 18, 32, 0.12);
|
|
--topbar-bg: rgba(249, 251, 255, 0.92);
|
|
--toggle-track: #d1d5db;
|
|
--input-bg: #f0f2f7;
|
|
--input-border: #c5ccd9;
|
|
--disabled-bg: #f4f6fb;
|
|
--disabled-border: #c8d0df;
|
|
--disabled-text: #7a8292;
|
|
--disabled-strong: #eef1f7;
|
|
--input-disabled-bg: #f8fafc;
|
|
--input-disabled-text: #6a6f7b;
|
|
--input-disabled-border: #c9d1df;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background:
|
|
radial-gradient(
|
|
circle at 20% 20%,
|
|
rgba(125, 211, 252, 0.08),
|
|
transparent 32%
|
|
),
|
|
radial-gradient(circle at 80% 0%, rgba(34, 197, 94, 0.06), transparent 28%),
|
|
linear-gradient(180deg, #0f1117 0%, #0e1119 55%, #0b0f15 100%);
|
|
background-attachment: fixed;
|
|
background-repeat: no-repeat;
|
|
color: var(--text);
|
|
line-height: 1.5;
|
|
transition: background 240ms ease, color 240ms ease;
|
|
}
|
|
:root[data-theme="light"] body {
|
|
background:
|
|
radial-gradient(
|
|
circle at 25% 18%,
|
|
rgba(0, 119, 194, 0.14),
|
|
transparent 34%
|
|
),
|
|
radial-gradient(circle at 78% 8%, rgba(21, 128, 61, 0.12), transparent 30%),
|
|
linear-gradient(180deg, #f6f8fd 0%, #e8edf7 52%, #d6dde9 100%);
|
|
background-attachment: fixed;
|
|
background-repeat: no-repeat;
|
|
}
|