joakim
0352c22b4f
Three holistic design directions with CSS custom properties, a theme store persisted to localStorage, and a live switcher in both the header (cycle button) and settings page (card selector). Also fixes checkbox checkmark alignment and adds back navigation from settings. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
298 lines
6.6 KiB
CSS
298 lines
6.6 KiB
CSS
/* Global Styles - Mobile-First */
|
|
|
|
/* ── Base tokens (shared across themes) ── */
|
|
:root {
|
|
/* Spacing */
|
|
--spacing-xs: 0.25rem;
|
|
--spacing-sm: 0.5rem;
|
|
--spacing-md: 1rem;
|
|
--spacing-lg: 1.5rem;
|
|
--spacing-xl: 2rem;
|
|
|
|
/* Typography sizes */
|
|
--font-size-xs: 0.75rem;
|
|
--font-size-sm: 0.875rem;
|
|
--font-size-base: 1rem;
|
|
--font-size-lg: 1.125rem;
|
|
--font-size-xl: 1.25rem;
|
|
--font-size-2xl: 1.5rem;
|
|
|
|
/* Layout */
|
|
--content-max-width: 768px;
|
|
--border-radius: 0.5rem;
|
|
}
|
|
|
|
/* ── Theme: Obsidian (dark productivity) ── */
|
|
[data-theme="obsidian"] {
|
|
--font-sans: "Inter", system-ui, sans-serif;
|
|
--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
|
|
|
|
--color-primary: #39d0ba;
|
|
--color-primary-dark: #2db8a4;
|
|
--color-secondary: #8b949e;
|
|
--color-success: #3fb950;
|
|
--color-danger: #f85149;
|
|
--color-warning: #d29922;
|
|
--color-accent: #39d0ba;
|
|
|
|
--bg-primary: #161b22;
|
|
--bg-secondary: #0d1117;
|
|
--bg-tertiary: #21262d;
|
|
|
|
--text-primary: #e6edf3;
|
|
--text-secondary: #8b949e;
|
|
--text-tertiary: #484f58;
|
|
|
|
--border-color: #30363d;
|
|
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
|
|
|
|
--focus-ring: rgba(57, 208, 186, 0.3);
|
|
|
|
/* Semantic badge colors */
|
|
--color-project-bg: rgba(57, 208, 186, 0.12);
|
|
--color-project-text: #39d0ba;
|
|
--color-priority-high-bg: rgba(248, 81, 73, 0.15);
|
|
--color-priority-high-text: #f85149;
|
|
--color-priority-medium-bg: rgba(210, 153, 34, 0.15);
|
|
--color-priority-medium-text: #d29922;
|
|
--color-priority-low-bg: rgba(139, 148, 158, 0.1);
|
|
--color-priority-low-text: #8b949e;
|
|
--color-due-bg: rgba(57, 208, 186, 0.1);
|
|
--color-due-text: #39d0ba;
|
|
--color-due-today-bg: rgba(210, 153, 34, 0.15);
|
|
--color-due-today-text: #d29922;
|
|
--color-overdue-bg: rgba(248, 81, 73, 0.15);
|
|
--color-overdue-text: #f85149;
|
|
--color-tag-bg: rgba(139, 148, 158, 0.1);
|
|
--color-tag-text: #8b949e;
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* ── Theme: Paper (warm minimal) ── */
|
|
[data-theme="paper"] {
|
|
--font-sans: "Inter", "SF Pro Text", system-ui, sans-serif;
|
|
--font-mono: ui-monospace, "SF Mono", monospace;
|
|
|
|
--color-primary: #6366f1;
|
|
--color-primary-dark: #4f46e5;
|
|
--color-secondary: #78716c;
|
|
--color-success: #10b981;
|
|
--color-danger: #e11d48;
|
|
--color-warning: #d97706;
|
|
--color-accent: #6366f1;
|
|
|
|
--bg-primary: #ffffff;
|
|
--bg-secondary: #faf8f5;
|
|
--bg-tertiary: #f5f5f4;
|
|
|
|
--text-primary: #1c1917;
|
|
--text-secondary: #78716c;
|
|
--text-tertiary: #a8a29e;
|
|
|
|
--border-color: #e7e5e4;
|
|
|
|
--shadow-sm: 0 1px 2px 0 rgba(28, 25, 23, 0.04);
|
|
--shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.06);
|
|
--shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.08);
|
|
|
|
--focus-ring: rgba(99, 102, 241, 0.2);
|
|
|
|
/* Semantic badge colors */
|
|
--color-project-bg: #e0e7ff;
|
|
--color-project-text: #4338ca;
|
|
--color-priority-high-bg: #ffe4e6;
|
|
--color-priority-high-text: #be123c;
|
|
--color-priority-medium-bg: #fef3c7;
|
|
--color-priority-medium-text: #92400e;
|
|
--color-priority-low-bg: #f5f5f4;
|
|
--color-priority-low-text: #a8a29e;
|
|
--color-due-bg: #dbeafe;
|
|
--color-due-text: #1e40af;
|
|
--color-due-today-bg: #fef3c7;
|
|
--color-due-today-text: #92400e;
|
|
--color-overdue-bg: #ffe4e6;
|
|
--color-overdue-text: #be123c;
|
|
--color-tag-bg: #f5f5f4;
|
|
--color-tag-text: #78716c;
|
|
|
|
color-scheme: light;
|
|
}
|
|
|
|
/* ── Theme: Midnight (vibrant dark) ── */
|
|
[data-theme="midnight"] {
|
|
--font-sans: "Inter", system-ui, sans-serif;
|
|
--font-mono: ui-monospace, monospace;
|
|
|
|
--color-primary: #8b5cf6;
|
|
--color-primary-dark: #7c3aed;
|
|
--color-secondary: #94a3b8;
|
|
--color-success: #34d399;
|
|
--color-danger: #ef4444;
|
|
--color-warning: #f97316;
|
|
--color-accent: #8b5cf6;
|
|
|
|
--bg-primary: #1e293b;
|
|
--bg-secondary: #0f172a;
|
|
--bg-tertiary: #334155;
|
|
|
|
--text-primary: #f1f5f9;
|
|
--text-secondary: #94a3b8;
|
|
--text-tertiary: #64748b;
|
|
|
|
--border-color: #334155;
|
|
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
|
|
|
|
--focus-ring: rgba(139, 92, 246, 0.3);
|
|
|
|
/* Semantic badge colors */
|
|
--color-project-bg: rgba(139, 92, 246, 0.15);
|
|
--color-project-text: #a78bfa;
|
|
--color-priority-high-bg: rgba(239, 68, 68, 0.15);
|
|
--color-priority-high-text: #ef4444;
|
|
--color-priority-medium-bg: rgba(249, 115, 22, 0.15);
|
|
--color-priority-medium-text: #f97316;
|
|
--color-priority-low-bg: rgba(148, 163, 184, 0.1);
|
|
--color-priority-low-text: #94a3b8;
|
|
--color-due-bg: rgba(139, 92, 246, 0.1);
|
|
--color-due-text: #a78bfa;
|
|
--color-due-today-bg: rgba(249, 115, 22, 0.15);
|
|
--color-due-today-text: #f97316;
|
|
--color-overdue-bg: rgba(239, 68, 68, 0.15);
|
|
--color-overdue-text: #ef4444;
|
|
--color-tag-bg: rgba(148, 163, 184, 0.1);
|
|
--color-tag-text: #94a3b8;
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* ── Reset & Base ── */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-sans);
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
min-height: 100dvh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Typography */
|
|
h1 {
|
|
font-size: var(--font-size-2xl);
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--font-size-xl);
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
p {
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
a {
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Layout Helpers */
|
|
.container {
|
|
max-width: var(--content-max-width);
|
|
margin: 0 auto;
|
|
padding: 0 var(--spacing-md);
|
|
}
|
|
|
|
/* Utility Classes */
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.text-sm {
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.text-secondary {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.mt-sm { margin-top: var(--spacing-sm); }
|
|
.mt-md { margin-top: var(--spacing-md); }
|
|
.mt-lg { margin-top: var(--spacing-lg); }
|
|
.mb-sm { margin-bottom: var(--spacing-sm); }
|
|
.mb-md { margin-bottom: var(--spacing-md); }
|
|
.mb-lg { margin-bottom: var(--spacing-lg); }
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Loading State */
|
|
.loading {
|
|
display: inline-block;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border: 2px solid var(--color-primary);
|
|
border-radius: 50%;
|
|
border-top-color: transparent;
|
|
animation: spin 0.6s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Touch Targets - Mobile First */
|
|
button,
|
|
a,
|
|
input,
|
|
select,
|
|
textarea {
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
}
|
|
|
|
/* Focus Styles */
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Smooth Scrolling */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|