alexei.dolgolyov
2bca119ad4
Add --primary-contrast CSS variable that auto-switches between white and dark text based on accent color luminance (WCAG relative luminance). Replace all hardcoded #fff/white on primary-color backgrounds with var(--primary-contrast) so light accent colors like yellow remain readable. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
111 lines
2.4 KiB
CSS
111 lines
2.4 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--primary-color: #4CAF50;
|
|
--primary-hover: #5cb860;
|
|
--primary-contrast: #ffffff;
|
|
--danger-color: #f44336;
|
|
--warning-color: #ff9800;
|
|
--info-color: #2196F3;
|
|
--font-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
|
|
}
|
|
|
|
/* ── SVG icon base ── */
|
|
.icon {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
vertical-align: -0.125em;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Dark theme (default) */
|
|
[data-theme="dark"] {
|
|
--bg-color: #1a1a1a;
|
|
--bg-secondary: #242424;
|
|
--card-bg: #2d2d2d;
|
|
--text-color: #e0e0e0;
|
|
--text-secondary: #999;
|
|
--text-muted: #777;
|
|
--border-color: #404040;
|
|
--display-badge-bg: rgba(0, 0, 0, 0.4);
|
|
--primary-text-color: #66bb6a;
|
|
--success-color: #28a745;
|
|
--shadow-color: rgba(0, 0, 0, 0.3);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* Light theme */
|
|
[data-theme="light"] {
|
|
--bg-color: #f5f5f5;
|
|
--bg-secondary: #eee;
|
|
--card-bg: #ffffff;
|
|
--text-color: #333333;
|
|
--text-secondary: #666;
|
|
--text-muted: #999;
|
|
--border-color: #e0e0e0;
|
|
--display-badge-bg: rgba(255, 255, 255, 0.85);
|
|
--primary-text-color: #3d8b40;
|
|
--success-color: #2e7d32;
|
|
--shadow-color: rgba(0, 0, 0, 0.12);
|
|
color-scheme: light;
|
|
}
|
|
|
|
/* Default to dark theme */
|
|
body {
|
|
background: var(--bg-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
html {
|
|
background: var(--bg-color);
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background: var(--bg-color);
|
|
color: var(--text-color);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
body.modal-open {
|
|
position: fixed;
|
|
width: 100%;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* ── Smooth theme transitions ── */
|
|
body,
|
|
.card,
|
|
.template-card,
|
|
.modal-content,
|
|
.dashboard-target,
|
|
.perf-chart-card,
|
|
header {
|
|
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
|
}
|
|
|
|
/* ── Respect reduced motion preference ── */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|