mirror of
https://github.com/AgentSeal/codeburn.git
synced 2026-08-24 07:54:18 +00:00
191 lines
5.4 KiB
CSS
191 lines
5.4 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@300..600&display=swap");
|
|
@import "tailwindcss";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/*
|
|
* Archival warmth + forensic precision. Warm paper surfaces, ink text, a
|
|
* forest-green accent, and a green -> gold -> terracotta ramp for stacked
|
|
* charts. No pure white background, no pure black, no cold neutrals.
|
|
*/
|
|
:root {
|
|
font-family: "Geist", "Geist Fallback", system-ui, sans-serif;
|
|
--radius: 0.375rem;
|
|
|
|
--background: #f6f4ef;
|
|
--outer-background: #e9e6de;
|
|
--foreground: #16181d;
|
|
--card: #ffffff;
|
|
--card-foreground: #16181d;
|
|
--popover: #ffffff;
|
|
--popover-foreground: #16181d;
|
|
--muted: #efece4;
|
|
--muted-foreground: #5d626b;
|
|
--tertiary-foreground: #8a857c;
|
|
--heading: #2c5242;
|
|
--border: rgba(23, 27, 32, 0.08);
|
|
--input: rgba(23, 27, 32, 0.14);
|
|
--interactive-secondary: rgba(23, 27, 32, 0.04);
|
|
--interactive-secondary-hover: rgba(23, 27, 32, 0.08);
|
|
--active-primary: #ffffff;
|
|
--accent: #efece4;
|
|
--accent-foreground: #16181d;
|
|
--subtle: #8a857c;
|
|
--primary: #1f8a5b;
|
|
--primary-foreground: #ffffff;
|
|
--ring: #1f8a5b;
|
|
--positive: #1f8a5b;
|
|
--brand: #e8553a;
|
|
|
|
--chart-1: #1f8a5b;
|
|
--chart-2: #4fd394;
|
|
--chart-3: #2c5242;
|
|
--chart-4: #d99a3c;
|
|
--chart-5: #c8541f;
|
|
--chart-6: #2f5fd0;
|
|
--chart-7: #7aa86f;
|
|
--chart-8: #b5403a;
|
|
--chart-9: #3f8f6b;
|
|
--chart-10: #a98b4f;
|
|
--chart-grid-stroke: rgba(23, 27, 32, 0.07);
|
|
--chart-hover-cursor: rgba(0, 0, 0, 0.04);
|
|
|
|
color-scheme: light;
|
|
}
|
|
|
|
/*
|
|
* Dark surface: reuses the Electron app's dark tokens (app/renderer/styles/
|
|
* plain.css) so the dashboard and the desktop shell stay visually consistent.
|
|
* Chart colors are re-derived for dark-background contrast. The .dark class is
|
|
* applied to <html> by index.html before first paint and toggled in the header.
|
|
*/
|
|
.dark {
|
|
color-scheme: dark;
|
|
|
|
--background: #0e1013;
|
|
--outer-background: #0e1013;
|
|
--foreground: #e8eaee;
|
|
--card: #16181d;
|
|
--card-foreground: #e8eaee;
|
|
--popover: #16181d;
|
|
--popover-foreground: #e8eaee;
|
|
--muted: #1a1d22;
|
|
--muted-foreground: #959ca8;
|
|
--tertiary-foreground: #8b93a1;
|
|
--heading: #7aa86f;
|
|
--border: #282c33;
|
|
--input: #282c33;
|
|
--interactive-secondary: rgba(255, 255, 255, 0.06);
|
|
--interactive-secondary-hover: rgba(255, 255, 255, 0.1);
|
|
--active-primary: #2a2f38;
|
|
--accent: #1a1d22;
|
|
--accent-foreground: #e8eaee;
|
|
--subtle: #8b93a1;
|
|
--primary: #3ecf8e;
|
|
--primary-foreground: #0e1013;
|
|
--ring: #3ecf8e;
|
|
--positive: #3ecf8e;
|
|
--brand: #f2701c;
|
|
|
|
--chart-1: #3ecf8e;
|
|
--chart-2: #7ce0b0;
|
|
--chart-3: #2f9e6e;
|
|
--chart-4: #e8b93e;
|
|
--chart-5: #f2701c;
|
|
--chart-6: #5b9bef;
|
|
--chart-7: #8bb6a0;
|
|
--chart-8: #f26d6d;
|
|
--chart-9: #4fbf93;
|
|
--chart-10: #d5b26a;
|
|
--chart-grid-stroke: rgba(255, 255, 255, 0.08);
|
|
--chart-hover-cursor: rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-outer-background: var(--outer-background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-tertiary-foreground: var(--tertiary-foreground);
|
|
--color-heading: var(--heading);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-interactive-secondary: var(--interactive-secondary);
|
|
--color-interactive-secondary-hover: var(--interactive-secondary-hover);
|
|
--color-active-primary: var(--active-primary);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-subtle: var(--subtle);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-ring: var(--ring);
|
|
--color-positive: var(--positive);
|
|
--color-brand: var(--brand);
|
|
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-chart-6: var(--chart-6);
|
|
--color-chart-7: var(--chart-7);
|
|
--color-chart-8: var(--chart-8);
|
|
--color-chart-9: var(--chart-9);
|
|
--color-chart-10: var(--chart-10);
|
|
--color-chart-grid-stroke: var(--chart-grid-stroke);
|
|
|
|
--font-display: "Alga", Georgia, "Times New Roman", serif;
|
|
--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
|
|
|
--radius-sm: calc(var(--radius) - 2px);
|
|
--radius-md: var(--radius);
|
|
--radius-lg: calc(var(--radius) + 2px);
|
|
|
|
--text-xs: 12px;
|
|
--text-sm: 13px;
|
|
--text-md: 15px;
|
|
--text-lg: 17px;
|
|
--text-xl: 20px;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-outer-background text-foreground;
|
|
letter-spacing: -0.006em;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
}
|
|
::selection {
|
|
background: var(--primary);
|
|
color: var(--primary-foreground);
|
|
}
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: color-mix(in oklch, var(--foreground) 16%, transparent) transparent;
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
.skeleton-shimmer {
|
|
background-color: var(--muted);
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
color-mix(in oklch, var(--foreground) 7%, transparent) 50%,
|
|
transparent 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
background-repeat: no-repeat;
|
|
animation: shimmer 1.6s ease-in-out infinite;
|
|
}
|