Restyle dark theme with blue-tinted palette, card glow, and rounded surfaces
Shift the dark theme from neutral gray to a richer blue-tinted palette inspired by CharBuilder-style TTRPG apps. Deeper navy background, steel-blue card surfaces, and visible blue borders create more depth and visual layering. - Update design tokens: background, card, border, input, muted colors - Add card-glow utility (radial gradient + blue box-shadow) for card surfaces - Add panel-glow utility (top-down gradient) for tall panels like stat blocks - Apply glow and rounded-lg to all card surfaces, dropdowns, dialogs, toasts - Give outline buttons a subtle fill instead of transparent background - Active combatant row now uses full border with glow instead of left accent Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,14 +1,14 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-background: #0f172a;
|
||||
--color-background: #0e1a2e;
|
||||
--color-foreground: #e2e8f0;
|
||||
--color-muted: #64748b;
|
||||
--color-muted: #7a8ba4;
|
||||
--color-muted-foreground: #94a3b8;
|
||||
--color-card: #1e293b;
|
||||
--color-card: #1a2e4a;
|
||||
--color-card-foreground: #e2e8f0;
|
||||
--color-border: #334155;
|
||||
--color-input: #334155;
|
||||
--color-border: #2a5088;
|
||||
--color-input: #2a5088;
|
||||
--color-primary: #3b82f6;
|
||||
--color-primary-foreground: #ffffff;
|
||||
--color-accent: #3b82f6;
|
||||
@@ -169,6 +169,28 @@
|
||||
concentration-glow 1200ms ease-out;
|
||||
}
|
||||
|
||||
@utility card-glow {
|
||||
background-image: radial-gradient(
|
||||
ellipse at 50% 50%,
|
||||
oklch(0.35 0.05 250 / 0.5) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
box-shadow:
|
||||
0 0 15px -2px oklch(0.623 0.214 259 / 0.2),
|
||||
inset 0 1px 0 0 oklch(0.7 0.15 259 / 0.1);
|
||||
}
|
||||
|
||||
@utility panel-glow {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
oklch(0.35 0.05 250 / 0.4) 0%,
|
||||
transparent 40%
|
||||
);
|
||||
box-shadow:
|
||||
0 0 20px -2px oklch(0.623 0.214 259 / 0.15),
|
||||
inset 0 1px 0 0 oklch(0.7 0.15 259 / 0.1);
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-color: var(--color-border) transparent;
|
||||
scrollbar-width: thin;
|
||||
|
||||
Reference in New Issue
Block a user