154 lines
4.9 KiB
CSS
154 lines
4.9 KiB
CSS
:root {
|
|
--font-sans: system-ui, sans-serif;
|
|
--sidebar-width: 400px;
|
|
--spacing: 0.25rem;
|
|
|
|
--color-accent-text: #000;
|
|
|
|
--reasoning-accent: #a62bcb;
|
|
|
|
/* Accent Color Options */
|
|
|
|
/* violet (current default) */
|
|
--accent-violet: #a010ff;
|
|
--accent-violet-hover: #8d00e8;
|
|
|
|
/* volcanic heat - orange-red */
|
|
--accent-volcano: #ef4410;
|
|
--accent-volcano-hover: #dc2626;
|
|
|
|
/* neon lime */
|
|
--accent-lime: #77fb6b;
|
|
--accent-lime-hover: #5ee04f;
|
|
|
|
/* electric sky */
|
|
--accent-sky: #38d3fa;
|
|
--accent-sky-hover: #2bc7ee;
|
|
|
|
/* crushed coral - warm pink-orange */
|
|
--accent-coral: #ff6b6b;
|
|
--accent-coral-hover: #e55555;
|
|
|
|
/* deep emerald - rich green */
|
|
--accent-emerald: #10b981;
|
|
--accent-emerald-hover: #059669;
|
|
|
|
/* golden hour - warm amber */
|
|
--accent-amber: #f59e0b;
|
|
--accent-amber-hover: #d97706;
|
|
|
|
/* rose quartz - soft pink-red */
|
|
--accent-rose: #f43f5e;
|
|
--accent-rose-hover: #e11d48;
|
|
|
|
/* arctic cyan - crisp blue */
|
|
--accent-cyan: #06b6d4;
|
|
--accent-cyan-hover: #0891b2;
|
|
|
|
/* midnight indigo - deep blue-purple */
|
|
--accent-indigo: #6366f1;
|
|
--accent-indigo-hover: #4f46e5;
|
|
|
|
/* sunset magenta - vibrant pink-purple */
|
|
--accent-magenta: #ec4899;
|
|
--accent-magenta-hover: #db2777;
|
|
|
|
/* Neutral Base Colors - different gray variations */
|
|
|
|
/* zinc - deep gray-blue */
|
|
--neutral-zinc-dark: #171619;
|
|
--neutral-zinc-light: #fbfafd;
|
|
|
|
/* charcoal - deep black-gray */
|
|
--neutral-charcoal-dark: #0a0a0a;
|
|
--neutral-charcoal-light: #fefdff;
|
|
}
|
|
|
|
:root.dark {
|
|
--color-base: color-mix(in srgb, var(--base-hinting) #040305, var(--accent-hinting) var(--color-accent));
|
|
--color-highlight-low: color-mix(in srgb,
|
|
var(--base-hinting) rgba(255, 255, 255, 0.05),
|
|
var(--accent-hinting) var(--color-accent));
|
|
--color-highlight: color-mix(in srgb,
|
|
var(--base-hinting) rgba(255, 255, 255, 0.1),
|
|
var(--accent-hinting) var(--color-accent));
|
|
--color-highlight-high: color-mix(in srgb,
|
|
var(--base-hinting) rgba(255, 255, 255, 0.15),
|
|
var(--accent-hinting) var(--color-accent));
|
|
--color-text: color-mix(in srgb, var(--base-hinting) #fafafa, var(--accent-hinting) var(--color-accent));
|
|
--color-muted: color-mix(in srgb, var(--base-hinting) #a1a1a0, var(--accent-hinting) var(--color-accent));
|
|
--color-subtle: color-mix(in srgb, var(--base-hinting) #d1d1d0, var(--accent-hinting) var(--color-accent));
|
|
--color-input: color-mix(in srgb, var(--base-hinting) #222124, var(--accent-hinting) var(--color-accent));
|
|
--color-neutral: color-mix(in srgb,
|
|
var(--base-hinting) var(--neutral-dark),
|
|
var(--accent-hinting) var(--color-accent));
|
|
--color-reasoning: color-mix(in srgb, var(--base-hinting) #66666a, var(--accent-hinting) var(--color-accent));
|
|
}
|
|
|
|
:root.light {
|
|
--color-base: color-mix(in srgb, var(--base-hinting) #f2f0f0, var(--accent-hinting) var(--color-accent));
|
|
--color-highlight-low: color-mix(in srgb,
|
|
var(--base-hinting) rgba(0, 0, 0, 0.06),
|
|
var(--accent-hinting) var(--color-accent));
|
|
--color-highlight: color-mix(in srgb,
|
|
var(--base-hinting) rgba(0, 0, 0, 0.08),
|
|
var(--accent-hinting) var(--color-accent));
|
|
--color-highlight-high: color-mix(in srgb,
|
|
var(--base-hinting) rgba(0, 0, 0, 0.13),
|
|
var(--accent-hinting) var(--color-accent));
|
|
--color-text: color-mix(in srgb, var(--base-hinting) #1a1a1a, var(--accent-hinting) var(--color-accent));
|
|
--color-muted: color-mix(in srgb, var(--base-hinting) #6b7270, var(--accent-hinting) var(--color-accent));
|
|
--color-subtle: color-mix(in srgb, var(--base-hinting) #9ba2a0, var(--accent-hinting) var(--color-accent));
|
|
--color-input: color-mix(in srgb, var(--base-hinting) #ffffff, var(--accent-hinting) var(--color-accent));
|
|
--color-neutral: color-mix(in srgb,
|
|
var(--base-hinting) var(--neutral-light),
|
|
var(--accent-hinting) var(--color-accent));
|
|
--color-reasoning: color-mix(in srgb, var(--base-hinting) #99979c, var(--accent-hinting) var(--color-accent));
|
|
}
|
|
|
|
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: var(--font-sans);
|
|
background-color: var(--color-base);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
html.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html.light {
|
|
color-scheme: light;
|
|
}
|
|
|
|
html {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
button {
|
|
color: inherit;
|
|
display: flex;
|
|
}
|
|
|
|
button.accent {
|
|
display: flex;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
background-color: var(--color-accent);
|
|
color: var(--color-accent-text);
|
|
border-radius: calc(var(--spacing) * 1.5);
|
|
padding-inline: calc(var(--spacing) * 2);
|
|
padding-block: calc(var(--spacing) * 1);
|
|
transition: background-color 150ms cubic-bezier(0.45, 0, 0.55, 1);
|
|
}
|
|
|
|
button.accent:hover {
|
|
background-color: var(--color-accent-hover);
|
|
} |