music video renderer web app
deftoku.digi.rip
audio
visualizer
webapp
styles: consistency changes and cleanup
+109
-69
+109
-69
style.css
+109
-69
style.css
···
1
-
/* maple-mono-latin-400-normal */
1
+
/* ===== CSS Custom Properties ===== */
2
+
:root {
3
+
/* colors */
4
+
--color-bg: #111;
5
+
--color-fg: #eee;
6
+
--color-muted: #888;
7
+
--color-surface: #222;
8
+
--color-text-dim: #ddd;
9
+
--color-panel-bg: rgba(30, 30, 30, 0.95);
10
+
11
+
/* borders */
12
+
--border-subtle: rgba(255, 255, 255, 0.08);
13
+
--border-light: rgba(255, 255, 255, 0.1);
14
+
--border-medium: rgba(255, 255, 255, 0.12);
15
+
--border-strong: rgba(255, 255, 255, 0.18);
16
+
17
+
/* radii */
18
+
--radius-sm: 4px;
19
+
--radius-md: 8px;
20
+
21
+
/* spacing */
22
+
--space-xs: 2px;
23
+
--space-sm: 4px;
24
+
--space-md: 8px;
25
+
--space-lg: 10px;
26
+
--space-xl: 14px;
27
+
28
+
/* typography */
29
+
--font-family:
30
+
"Maple Mono", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
31
+
"Noto Color Emoji", sans-serif;
32
+
}
33
+
34
+
/* ===== Font ===== */
2
35
@font-face {
3
36
font-family: "Maple Mono";
4
37
font-style: normal;
···
11
44
format("woff");
12
45
}
13
46
47
+
/* ===== Base ===== */
14
48
body {
49
+
box-sizing: border-box;
15
50
display: flex;
16
51
flex-direction: column;
17
-
box-sizing: border-box;
18
52
min-height: 100dvh;
19
53
margin: 0;
20
54
padding-top: 2rem;
21
-
font-family:
22
-
"Maple Mono", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
23
-
"Noto Color Emoji", sans-serif;
24
-
background: #111;
25
-
color: #eee;
55
+
background: var(--color-bg);
56
+
color: var(--color-fg);
57
+
font-family: var(--font-family);
26
58
}
27
59
28
60
button,
29
61
select {
30
-
font-family:
31
-
"Maple Mono", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
32
-
"Noto Color Emoji", sans-serif;
62
+
font-family: var(--font-family);
33
63
}
34
64
65
+
/* ===== Layout ===== */
35
66
.main-content {
36
67
display: flex;
37
68
flex: 1;
···
41
72
42
73
#canvas {
43
74
transform: translateZ(0);
44
-
will-change: transform;
45
75
image-rendering: auto;
76
+
will-change: transform;
46
77
}
47
78
79
+
/* ===== Menu Bar ===== */
48
80
.menubar {
49
-
display: flex;
50
-
flex-direction: row;
51
-
flex-wrap: wrap;
52
-
align-items: center;
53
81
position: fixed;
54
82
top: 0;
55
83
left: 0;
56
84
right: 0;
57
85
z-index: 999;
86
+
87
+
display: flex;
88
+
flex-direction: row;
89
+
flex-wrap: wrap;
90
+
align-items: center;
91
+
gap: var(--space-sm);
92
+
58
93
height: auto;
59
94
min-height: 2rem;
60
-
padding: 4px 10px;
61
-
gap: 2px;
95
+
padding: var(--space-sm) var(--space-lg);
62
96
box-sizing: border-box;
97
+
63
98
background: rgba(0, 0, 0, 0.1);
64
99
backdrop-filter: blur(12px);
65
100
-webkit-backdrop-filter: blur(12px);
66
-
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
101
+
border-bottom: 1px solid var(--border-subtle);
102
+
103
+
font-size: clamp(1rem, 1.2vw, 1.8rem);
67
104
user-select: none;
68
-
font-size: clamp(1rem, 1.2vw, 1.8rem);
69
105
}
70
106
71
107
.menubar button,
72
108
.menubar select {
73
-
font-size: 0.82em;
74
-
color: #ddd;
75
109
background: none;
76
110
border: 1px solid transparent;
77
-
border-radius: 4px;
78
-
padding: 2px 5px;
79
-
cursor: pointer;
111
+
color: var(--color-text-dim);
112
+
font-size: 0.82em;
80
113
white-space: nowrap;
114
+
cursor: pointer;
81
115
}
82
116
83
117
.menubar button:hover,
84
118
.menubar select:hover {
85
119
background: rgba(255, 255, 255, 0.1);
86
-
border-color: rgba(255, 255, 255, 0.12);
87
-
}
88
-
89
-
.menubar select {
90
-
cursor: pointer;
120
+
border-color: var(--border-medium);
91
121
}
92
122
93
123
.menubar select option {
94
-
background: #222;
95
-
color: #ddd;
124
+
background: var(--color-surface);
125
+
color: var(--color-text-dim);
96
126
}
97
127
128
+
/* ===== Menu Dropdowns ===== */
98
129
.menu-group {
99
130
position: relative;
100
131
}
101
132
102
133
.menu-trigger {
103
-
padding: 2px 8px;
104
-
border-radius: 4px;
134
+
padding: var(--space-xs) var(--space-md);
135
+
border-radius: var(--radius-sm);
105
136
cursor: pointer;
106
137
}
107
138
108
139
.menu-trigger.open {
109
140
background: rgba(255, 255, 255, 0.12);
110
-
border-color: rgba(255, 255, 255, 0.18);
141
+
border-color: var(--border-strong);
111
142
}
112
143
113
144
.menu-panel {
114
145
position: absolute;
115
146
top: 100%;
116
147
left: 0;
117
-
margin-top: 4px;
148
+
149
+
display: flex;
150
+
flex-direction: column;
151
+
gap: var(--space-sm);
152
+
118
153
min-width: 180px;
154
+
margin-top: var(--space-sm);
119
155
padding: 6px 0;
120
-
background: rgba(30, 30, 30, 0.95);
121
-
border: 1px solid rgba(255, 255, 255, 0.12);
122
-
border-radius: 8px;
156
+
157
+
background: var(--color-panel-bg);
158
+
border: 1px solid var(--border-medium);
159
+
border-radius: var(--radius-md);
123
160
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
124
-
display: flex;
125
-
flex-direction: column;
126
-
gap: 4px;
127
161
}
128
162
129
163
.menu-panel.hidden {
···
132
166
133
167
.menu-item {
134
168
display: block;
169
+
135
170
width: calc(100% - 16px);
136
-
margin: 0 8px;
137
-
text-align: left;
138
-
padding: 4px 8px;
139
-
border-radius: 0 !important;
171
+
margin: 0 var(--space-md);
172
+
padding: var(--space-sm) var(--space-md);
173
+
174
+
border-radius: 0;
175
+
140
176
font-size: 0.82em;
177
+
text-align: left;
141
178
}
142
179
143
180
.menu-item:hover {
···
145
182
}
146
183
147
184
.menu-label {
185
+
margin: 0 var(--space-md);
186
+
padding: 6px var(--space-md) var(--space-xs);
187
+
188
+
color: var(--color-muted);
148
189
font-size: 0.72em;
149
-
color: #888;
150
190
text-transform: uppercase;
151
191
letter-spacing: 0.05em;
152
-
padding: 6px 14px 2px;
153
192
}
154
193
155
194
.menu-panel select {
156
-
margin: 0 8px;
157
195
width: calc(100% - 16px);
158
-
padding: 4px 8px;
196
+
margin: 0 var(--space-md);
197
+
padding: var(--space-sm) var(--space-md);
198
+
border-radius: var(--radius-sm);
159
199
}
160
200
201
+
/* ===== Visualizer Controls ===== */
161
202
#vis-group {
162
203
display: flex;
163
204
flex-direction: row;
164
205
align-items: center;
165
206
gap: 6px;
166
-
padding-left: 10px;
167
-
margin-left: 4px;
168
-
padding-right: 10px;
169
-
margin-right: 4px;
170
-
border-left: 1px solid rgba(255, 255, 255, 0.1);
207
+
208
+
padding: 0 var(--space-lg);
209
+
border-left: 1px solid var(--border-light);
171
210
}
172
211
173
212
#vis-select {
213
+
padding: var(--space-xs) var(--space-md);
214
+
border-right: 1px solid var(--border-light);
215
+
border-radius: var(--radius-sm);
174
216
line-height: 1;
175
-
padding: 2px 8px 2px 8px;
176
-
padding-right: 10px;
177
-
border-right: 1px solid rgba(255, 255, 255, 0.1);
178
217
}
179
218
180
219
#vis-params {
···
182
221
flex-direction: row;
183
222
align-items: center;
184
223
gap: 6px;
224
+
225
+
padding-left: var(--space-sm);
185
226
line-height: 1;
186
-
padding-left: 4px;
187
227
}
188
228
189
229
#vis-params input[type="range"] {
···
194
234
195
235
#vis-params input[type="number"] {
196
236
width: 52px;
197
-
padding: 2px 4px;
237
+
padding: var(--space-xs) var(--space-sm);
238
+
198
239
background: rgba(255, 255, 255, 0.06);
199
-
border: 1px solid rgba(255, 255, 255, 0.1);
200
-
border-radius: 4px;
201
-
color: #ddd;
240
+
border: 1px solid var(--border-light);
241
+
border-radius: var(--radius-sm);
242
+
color: var(--color-text-dim);
243
+
202
244
font-family: inherit;
203
245
font-size: 0.75em;
204
246
text-align: center;
···
215
257
width: 24px;
216
258
height: 24px;
217
259
padding: 1px;
218
-
border: 1px solid rgba(255, 255, 255, 0.12);
219
-
border-radius: 4px;
220
-
background: #222;
260
+
261
+
background: var(--color-surface);
262
+
border: 1px solid var(--border-medium);
263
+
border-radius: var(--radius-sm);
264
+
221
265
cursor: pointer;
222
266
vertical-align: middle;
223
267
}
···
226
270
padding: 0;
227
271
line-height: 1;
228
272
}
229
-
230
-
#export {
231
-
margin-bottom: 2px;
232
-
}