93 lines
2.2 KiB
CSS
93 lines
2.2 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
--bg: #fcfaf5;
|
|
--surface: #f6f1e7;
|
|
--card: #fffdf8;
|
|
--text: #223d66;
|
|
--muted: #6f7f96;
|
|
--line: #e4dfd2;
|
|
--accent: #1d3d6c;
|
|
--accent-hover: #2a5180;
|
|
--danger: #d75a4a;
|
|
--danger-hover: #c45151;
|
|
--success: #39b86f;
|
|
--warning: #c09a46;
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
--bg: #111827;
|
|
--surface: #1b2638;
|
|
--card: #243247;
|
|
--text: #f3f7fd;
|
|
--muted: #c1ccdc;
|
|
--line: #51627a;
|
|
--accent: #9fc4f4;
|
|
--accent-hover: #bfdbfe;
|
|
--danger: #fca5a5;
|
|
--danger-hover: #fecaca;
|
|
--success: #86efac;
|
|
--warning: #f3d58a;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-bg: var(--bg);
|
|
--color-surface: var(--surface);
|
|
--color-card: var(--card);
|
|
--color-text: var(--text);
|
|
--color-muted: var(--muted);
|
|
--color-line: var(--line);
|
|
--color-accent: var(--accent);
|
|
--color-accent-hover: var(--accent-hover);
|
|
--color-danger: var(--danger);
|
|
--color-danger-hover: var(--danger-hover);
|
|
--color-success: var(--success);
|
|
--color-warning: var(--warning);
|
|
--font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
:root[data-theme="dark"] input,
|
|
:root[data-theme="dark"] textarea,
|
|
:root[data-theme="dark"] select {
|
|
color: var(--text);
|
|
}
|
|
|
|
:root[data-theme="dark"] input::placeholder,
|
|
:root[data-theme="dark"] textarea::placeholder {
|
|
color: #aebbd0;
|
|
}
|
|
|
|
:root[data-theme="dark"] .text-muted\/30,
|
|
:root[data-theme="dark"] .text-muted\/35,
|
|
:root[data-theme="dark"] .text-muted\/40,
|
|
:root[data-theme="dark"] .text-muted\/50 {
|
|
color: #aebbd0;
|
|
}
|
|
|
|
:root[data-theme="dark"] .text-text\/70,
|
|
:root[data-theme="dark"] .text-text\/80 {
|
|
color: #d8e2f0;
|
|
}
|
|
|
|
:root[data-theme="dark"] .border-line\/50 {
|
|
border-color: #43546d;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
|
|
|
|
/* Focus ring */
|
|
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|