1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
:root {
/* Core palette */
--bg-body: #0f1117;
--bg-surface: #161920;
--bg-surface-hover: #1b1f27;
--bg-elevated: #1e222c;
--bg-overlay: rgba(0,0,0,0.65);
/* Text */
--text-primary: #e6e8ef;
--text-secondary: #a3a8b8;
--text-muted: #6b7280;
--text-inverse: #0b0d12;
/* Accent */
--accent: #5e9eff;
--accent-hover: #7cb2ff;
--accent-active: #3d8bf7;
--accent-soft: rgba(94,158,255,0.18);
/* Borders */
--border: #252a36;
--border-strong: #2e3546;
/* Feedback */
--danger: #f25c5c;
--danger-active: #b91c1c;
--danger-hover: #e04e4e;
--danger-soft: rgba(242,92,92,0.18);
--success: #3ddc84;
--success-soft: rgba(61,220,132,0.18);
--warn: #ffb300;
/* Player */
--player-bg: #0b0d12;
--player-stage-bg: #000;
--player-progress-bg: #2e3546;
--player-progress-fill: #5e9eff;
--player-thumb: #7cb2ff;
--overlay-dim: rgba(0,0,0,0.35);
--overlay-button-bg: rgba(255,255,255,0.9);
--overlay-button-color: #000;
/* Selection */
--selected-bg: rgba(94,158,255,0.25);
--selected-border: #5e9eff;
--playing-bg: rgba(61,220,132,0.18);
--playing-border: #3ddc84;
/* Layout */
--header-height: 3.25rem;
--sidebar-width: 16rem;
--gap: 0.75rem;
--radius-sm: 0.375rem;
--radius-md: 0.625rem;
--radius-lg: 0.875rem;
/* Typography */
--font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
--shadow-md: 0 4px 12px rgba(0,0,0,0.45);
--shadow-lg: 0 10px 28px rgba(0,0,0,0.55);
/* Transitions */
--transition-fast: 120ms ease;
--transition-base: 200ms ease;
}
/* Light theme overrides */
[data-theme="light"] {
--bg-body: #f4f5f8;
--bg-surface: #ffffff;
--bg-surface-hover: #f0f2f7;
--bg-elevated: #ffffff;
--bg-overlay: rgba(0,0,0,0.35);
--text-primary: #12131a;
--text-secondary: #4a4f5e;
--text-muted: #8b90a0;
--text-inverse: #ffffff;
--accent: #2b6cb0;
--accent-hover: #1a5490;
--accent-active: #17447a;
--accent-soft: rgba(43,108,176,0.14);
--border: #d6dae4;
--border-strong: #c3c9d6;
--danger: #c53030;
--danger-soft: rgba(197,48,48,0.14);
--success: #258855;
--success-soft: rgba(37,136,85,0.14);
--player-bg: #0b0d12;
--player-stage-bg: #000;
--player-progress-bg: #d6dae4;
--player-progress-fill: #2b6cb0;
--player-thumb: #1a5490;
--overlay-dim: rgba(0,0,0,0.35);
--overlay-button-bg: rgba(255,255,255,0.9);
--overlay-button-color: #000;
--selected-bg: rgba(43,108,176,0.18);
--selected-border: #2b6cb0;
--playing-bg: rgba(37,136,85,0.14);
--playing-border: #258855;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.10);
--shadow-lg: 0 10px 28px rgba(0,0,0,0.12);
}
|
