86 lines
1.9 KiB
CSS
86 lines
1.9 KiB
CSS
|
:root {
|
||
|
|
color-scheme: light;
|
||
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
|
|
font-synthesis: none;
|
||
|
|
text-rendering: optimizeLegibility;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
--page-bg: #f7f7fa;
|
||
|
|
--surface: #f0f1f5;
|
||
|
|
--surface-soft: #ffffff;
|
||
|
|
--surface-strong: #ffffff;
|
||
|
|
--surface-raised: #ffffff;
|
||
|
|
--surface-muted: #eef0ff;
|
||
|
|
--text-primary: #181a22;
|
||
|
|
--text-secondary: #5d6474;
|
||
|
|
--text-muted: #8b93a5;
|
||
|
|
--border-soft: #dfe2ea;
|
||
|
|
--border-strong: #c8ceda;
|
||
|
|
--accent-cool: #6677ff;
|
||
|
|
--focus-ring: rgba(102, 119, 255, 0.56);
|
||
|
|
--shadow-subtle: rgba(25, 31, 54, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme='dark'] {
|
||
|
|
color-scheme: dark;
|
||
|
|
--page-bg: #1b1c21;
|
||
|
|
--surface: #24262d;
|
||
|
|
--surface-soft: #202229;
|
||
|
|
--surface-strong: #2a2c34;
|
||
|
|
--surface-raised: #202229;
|
||
|
|
--surface-muted: #2b2e3b;
|
||
|
|
--text-primary: #f1f3f8;
|
||
|
|
--text-secondary: #a9afbf;
|
||
|
|
--text-muted: #747c90;
|
||
|
|
--border-soft: #343741;
|
||
|
|
--border-strong: #454957;
|
||
|
|
--accent-cool: #8492ff;
|
||
|
|
--focus-ring: rgba(132, 146, 255, 0.66);
|
||
|
|
--shadow-subtle: rgba(0, 0, 0, 0.24);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
:root:not([data-theme='light']) {
|
||
|
|
color-scheme: dark;
|
||
|
|
--page-bg: #1b1c21;
|
||
|
|
--surface: #24262d;
|
||
|
|
--surface-soft: #202229;
|
||
|
|
--surface-strong: #2a2c34;
|
||
|
|
--surface-raised: #202229;
|
||
|
|
--surface-muted: #2b2e3b;
|
||
|
|
--text-primary: #f1f3f8;
|
||
|
|
--text-secondary: #a9afbf;
|
||
|
|
--text-muted: #747c90;
|
||
|
|
--border-soft: #343741;
|
||
|
|
--border-strong: #454957;
|
||
|
|
--accent-cool: #8492ff;
|
||
|
|
--focus-ring: rgba(132, 146, 255, 0.66);
|
||
|
|
--shadow-subtle: rgba(0, 0, 0, 0.24);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
min-height: 100%;
|
||
|
|
background: var(--page-bg);
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
min-width: 320px;
|
||
|
|
min-height: 100vh;
|
||
|
|
margin: 0;
|
||
|
|
background: var(--page-bg);
|
||
|
|
color: var(--text-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
button,
|
||
|
|
a {
|
||
|
|
-webkit-tap-highlight-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: inherit;
|
||
|
|
}
|