alexei.dolgolyov
88abd31c1c
- Tab panels: fade-in with subtle translateY on switch - Cards: hover lift (translateY -2px), staggered entrance animation - Modals: spring-curve entrance with backdrop blur - Buttons: press feedback (scale down on :active) - Toggle switches: spring overshoot on knob transition - Toast: smooth bounce-in replaces jarring shake - Sections: animated height collapse/expand with chevron rotation - Command palette: slide-down entrance animation - Theme switch: smooth color transitions on key elements - Dashboard: section collapse animation, target row hover - Respects prefers-reduced-motion globally Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
94 lines
2.0 KiB
CSS
94 lines
2.0 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--primary-color: #4CAF50;
|
|
--danger-color: #f44336;
|
|
--warning-color: #ff9800;
|
|
--info-color: #2196F3;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|