designnn 0.2.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.js +641 -158
- package/package.json +1 -1
- package/public/app.js +274 -68
- package/public/i18n-trends.js +92 -0
- package/public/i18n.js +207 -0
- package/public/index.html +94 -42
- package/public/style.css +448 -230
package/public/style.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* ============================================
|
|
2
|
-
DESIGNNN Web UI
|
|
2
|
+
DESIGNNN Web UI v0.4.0
|
|
3
3
|
Brand: Black base × Neon Yellow (#CCFF00)
|
|
4
4
|
Font: Inter (body), JetBrains Mono (code)
|
|
5
5
|
============================================ */
|
|
@@ -7,36 +7,40 @@
|
|
|
7
7
|
:root {
|
|
8
8
|
--bg-primary: #0A0A0A;
|
|
9
9
|
--bg-secondary: #111111;
|
|
10
|
-
--bg-card: #
|
|
11
|
-
--bg-card-hover: #
|
|
12
|
-
--bg-input: #
|
|
10
|
+
--bg-card: #151515;
|
|
11
|
+
--bg-card-hover: #1A1A1A;
|
|
12
|
+
--bg-input: #161616;
|
|
13
13
|
--accent: #CCFF00;
|
|
14
|
-
--accent-dim: rgba(204, 255, 0, 0.
|
|
15
|
-
--accent-glow: rgba(204, 255, 0, 0.
|
|
16
|
-
--
|
|
14
|
+
--accent-dim: rgba(204, 255, 0, 0.12);
|
|
15
|
+
--accent-glow: rgba(204, 255, 0, 0.06);
|
|
16
|
+
--accent-hover: #D4FF33;
|
|
17
|
+
--text-primary: #F0F0F0;
|
|
17
18
|
--text-secondary: #999999;
|
|
18
|
-
--text-dim: #
|
|
19
|
-
--border: #
|
|
20
|
-
--border-hover: #
|
|
19
|
+
--text-dim: #555555;
|
|
20
|
+
--border: #222222;
|
|
21
|
+
--border-hover: #333333;
|
|
21
22
|
--success: #00FF88;
|
|
22
23
|
--error: #FF4444;
|
|
23
24
|
--radius: 12px;
|
|
24
25
|
--radius-sm: 8px;
|
|
25
26
|
--radius-lg: 16px;
|
|
27
|
+
--radius-xl: 20px;
|
|
26
28
|
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
27
29
|
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
30
|
+
--shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
|
|
31
|
+
--shadow-md: 0 4px 16px rgba(0,0,0,0.4);
|
|
32
|
+
--shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
|
|
33
|
+
--shadow-accent: 0 4px 24px rgba(204, 255, 0, 0.15);
|
|
34
|
+
--transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
28
35
|
}
|
|
29
36
|
|
|
30
|
-
* {
|
|
31
|
-
margin: 0;
|
|
32
|
-
padding: 0;
|
|
33
|
-
box-sizing: border-box;
|
|
34
|
-
}
|
|
37
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
35
38
|
|
|
36
39
|
html {
|
|
37
40
|
font-size: 16px;
|
|
38
41
|
-webkit-font-smoothing: antialiased;
|
|
39
42
|
-moz-osx-font-smoothing: grayscale;
|
|
43
|
+
scroll-behavior: smooth;
|
|
40
44
|
}
|
|
41
45
|
|
|
42
46
|
body {
|
|
@@ -49,11 +53,14 @@ body {
|
|
|
49
53
|
}
|
|
50
54
|
|
|
51
55
|
/* ---- Scrollbar ---- */
|
|
52
|
-
::-webkit-scrollbar { width:
|
|
53
|
-
::-webkit-scrollbar-track { background:
|
|
56
|
+
::-webkit-scrollbar { width: 5px; }
|
|
57
|
+
::-webkit-scrollbar-track { background: transparent; }
|
|
54
58
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
|
55
59
|
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
|
|
56
60
|
|
|
61
|
+
/* ---- Selection ---- */
|
|
62
|
+
::selection { background: var(--accent-dim); color: var(--accent); }
|
|
63
|
+
|
|
57
64
|
/* ============================================
|
|
58
65
|
HEADER
|
|
59
66
|
============================================ */
|
|
@@ -61,137 +68,201 @@ body {
|
|
|
61
68
|
display: flex;
|
|
62
69
|
align-items: center;
|
|
63
70
|
justify-content: space-between;
|
|
64
|
-
padding:
|
|
71
|
+
padding: 14px 28px;
|
|
65
72
|
border-bottom: 1px solid var(--border);
|
|
66
73
|
position: sticky;
|
|
67
74
|
top: 0;
|
|
68
|
-
background: rgba(10, 10, 10, 0.
|
|
69
|
-
backdrop-filter: blur(
|
|
70
|
-
-webkit-backdrop-filter: blur(
|
|
75
|
+
background: rgba(10, 10, 10, 0.88);
|
|
76
|
+
backdrop-filter: blur(24px);
|
|
77
|
+
-webkit-backdrop-filter: blur(24px);
|
|
71
78
|
z-index: 100;
|
|
72
79
|
}
|
|
73
80
|
|
|
74
81
|
.header-left {
|
|
75
82
|
display: flex;
|
|
76
|
-
align-items:
|
|
77
|
-
gap:
|
|
83
|
+
align-items: center;
|
|
84
|
+
gap: 10px;
|
|
78
85
|
}
|
|
79
86
|
|
|
80
87
|
.logo {
|
|
81
|
-
font-size: 1.
|
|
88
|
+
font-size: 1.35rem;
|
|
82
89
|
font-weight: 900;
|
|
83
|
-
letter-spacing:
|
|
84
|
-
color: var(--
|
|
90
|
+
letter-spacing: 3px;
|
|
91
|
+
color: var(--text-primary);
|
|
85
92
|
}
|
|
86
93
|
|
|
94
|
+
.logo-accent { color: var(--accent); }
|
|
95
|
+
|
|
87
96
|
.tagline {
|
|
88
|
-
font-size: 0.
|
|
97
|
+
font-size: 0.7rem;
|
|
89
98
|
color: var(--text-dim);
|
|
90
99
|
font-weight: 400;
|
|
91
100
|
letter-spacing: 0.5px;
|
|
101
|
+
padding-top: 2px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.version-badge {
|
|
105
|
+
font-size: 0.625rem;
|
|
106
|
+
font-family: var(--font-mono);
|
|
107
|
+
color: var(--accent);
|
|
108
|
+
background: var(--accent-dim);
|
|
109
|
+
padding: 2px 7px;
|
|
110
|
+
border-radius: 4px;
|
|
111
|
+
font-weight: 600;
|
|
92
112
|
}
|
|
93
113
|
|
|
94
114
|
.nav {
|
|
95
115
|
display: flex;
|
|
96
|
-
gap:
|
|
116
|
+
gap: 2px;
|
|
97
117
|
background: var(--bg-secondary);
|
|
98
118
|
border-radius: var(--radius);
|
|
99
|
-
padding:
|
|
119
|
+
padding: 3px;
|
|
100
120
|
border: 1px solid var(--border);
|
|
101
121
|
}
|
|
102
122
|
|
|
103
123
|
.nav-btn {
|
|
104
|
-
padding:
|
|
124
|
+
padding: 7px 16px;
|
|
105
125
|
border: none;
|
|
106
126
|
background: transparent;
|
|
107
127
|
color: var(--text-secondary);
|
|
108
128
|
font-family: var(--font-body);
|
|
109
|
-
font-size: 0.
|
|
129
|
+
font-size: 0.8125rem;
|
|
110
130
|
font-weight: 500;
|
|
111
131
|
border-radius: var(--radius-sm);
|
|
112
132
|
cursor: pointer;
|
|
113
|
-
transition: all
|
|
133
|
+
transition: all var(--transition);
|
|
134
|
+
display: flex;
|
|
135
|
+
align-items: center;
|
|
136
|
+
gap: 6px;
|
|
114
137
|
}
|
|
115
138
|
|
|
116
|
-
.nav-btn:
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
}
|
|
139
|
+
.nav-btn svg { opacity: 0.6; transition: opacity var(--transition); }
|
|
140
|
+
.nav-btn:hover svg { opacity: 1; }
|
|
141
|
+
.nav-btn:hover { color: var(--text-primary); background: var(--bg-card); }
|
|
120
142
|
|
|
121
143
|
.nav-btn.active {
|
|
122
144
|
color: var(--bg-primary);
|
|
123
145
|
background: var(--accent);
|
|
124
146
|
font-weight: 600;
|
|
125
147
|
}
|
|
148
|
+
.nav-btn.active svg { opacity: 1; stroke: var(--bg-primary); }
|
|
126
149
|
|
|
127
|
-
.
|
|
128
|
-
color: var(--text-dim);
|
|
129
|
-
transition: color 0.2s;
|
|
150
|
+
.header-right {
|
|
130
151
|
display: flex;
|
|
131
152
|
align-items: center;
|
|
153
|
+
gap: 12px;
|
|
132
154
|
}
|
|
133
155
|
|
|
134
|
-
.
|
|
156
|
+
.lang-toggle {
|
|
157
|
+
display: flex;
|
|
158
|
+
align-items: center;
|
|
159
|
+
justify-content: center;
|
|
160
|
+
width: 36px;
|
|
161
|
+
height: 36px;
|
|
162
|
+
border-radius: var(--radius-sm);
|
|
163
|
+
border: 1px solid var(--border);
|
|
164
|
+
background: var(--bg-card);
|
|
135
165
|
color: var(--accent);
|
|
166
|
+
cursor: pointer;
|
|
167
|
+
font-family: var(--font-mono);
|
|
168
|
+
font-size: 0.7rem;
|
|
169
|
+
font-weight: 600;
|
|
170
|
+
letter-spacing: 0.05em;
|
|
171
|
+
transition: all var(--transition);
|
|
136
172
|
}
|
|
137
173
|
|
|
174
|
+
.lang-toggle:hover {
|
|
175
|
+
border-color: var(--accent);
|
|
176
|
+
background: var(--accent-dim);
|
|
177
|
+
box-shadow: var(--shadow-accent);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.lang-label {
|
|
181
|
+
pointer-events: none;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.header-link {
|
|
185
|
+
color: var(--text-dim);
|
|
186
|
+
transition: color var(--transition);
|
|
187
|
+
display: flex;
|
|
188
|
+
align-items: center;
|
|
189
|
+
}
|
|
190
|
+
.header-link:hover { color: var(--accent); }
|
|
191
|
+
|
|
138
192
|
/* ============================================
|
|
139
193
|
MAIN
|
|
140
194
|
============================================ */
|
|
141
195
|
.main {
|
|
142
196
|
flex: 1;
|
|
143
|
-
max-width:
|
|
197
|
+
max-width: 1000px;
|
|
144
198
|
width: 100%;
|
|
145
199
|
margin: 0 auto;
|
|
146
|
-
padding:
|
|
200
|
+
padding: 36px 24px;
|
|
147
201
|
}
|
|
148
202
|
|
|
149
|
-
.tab-content {
|
|
150
|
-
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
.tab-content.active {
|
|
154
|
-
display: block;
|
|
155
|
-
animation: fadeIn 0.3s ease;
|
|
156
|
-
}
|
|
203
|
+
.tab-content { display: none; }
|
|
204
|
+
.tab-content.active { display: block; animation: fadeIn 0.35s ease; }
|
|
157
205
|
|
|
158
206
|
@keyframes fadeIn {
|
|
159
|
-
from { opacity: 0; transform: translateY(
|
|
207
|
+
from { opacity: 0; transform: translateY(6px); }
|
|
160
208
|
to { opacity: 1; transform: translateY(0); }
|
|
161
209
|
}
|
|
162
210
|
|
|
163
211
|
.tab-hero {
|
|
164
212
|
text-align: center;
|
|
165
|
-
margin-bottom:
|
|
213
|
+
margin-bottom: 36px;
|
|
166
214
|
}
|
|
167
215
|
|
|
168
216
|
.tab-hero h2 {
|
|
169
|
-
font-size:
|
|
217
|
+
font-size: 2.25rem;
|
|
170
218
|
font-weight: 800;
|
|
171
|
-
margin-bottom:
|
|
219
|
+
margin-bottom: 10px;
|
|
172
220
|
letter-spacing: -0.5px;
|
|
221
|
+
background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
|
|
222
|
+
-webkit-background-clip: text;
|
|
223
|
+
-webkit-text-fill-color: transparent;
|
|
224
|
+
background-clip: text;
|
|
173
225
|
}
|
|
174
226
|
|
|
175
227
|
.tab-hero p {
|
|
176
228
|
color: var(--text-secondary);
|
|
177
|
-
font-size:
|
|
178
|
-
max-width:
|
|
229
|
+
font-size: 0.9375rem;
|
|
230
|
+
max-width: 540px;
|
|
179
231
|
margin: 0 auto;
|
|
180
232
|
line-height: 1.6;
|
|
181
233
|
}
|
|
182
234
|
|
|
235
|
+
.highlight {
|
|
236
|
+
color: var(--accent);
|
|
237
|
+
font-weight: 600;
|
|
238
|
+
}
|
|
239
|
+
|
|
183
240
|
/* ============================================
|
|
184
241
|
CHAT TAB
|
|
185
242
|
============================================ */
|
|
186
243
|
.input-group {
|
|
187
244
|
display: flex;
|
|
188
245
|
gap: 8px;
|
|
189
|
-
margin-bottom:
|
|
246
|
+
margin-bottom: 14px;
|
|
190
247
|
}
|
|
191
248
|
|
|
192
|
-
.input-
|
|
249
|
+
.input-wrapper {
|
|
193
250
|
flex: 1;
|
|
194
|
-
|
|
251
|
+
position: relative;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.input-icon {
|
|
255
|
+
position: absolute;
|
|
256
|
+
left: 16px;
|
|
257
|
+
top: 50%;
|
|
258
|
+
transform: translateY(-50%);
|
|
259
|
+
color: var(--text-dim);
|
|
260
|
+
pointer-events: none;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.input-wrapper input {
|
|
264
|
+
width: 100%;
|
|
265
|
+
padding: 14px 18px 14px 44px;
|
|
195
266
|
background: var(--bg-input);
|
|
196
267
|
border: 1px solid var(--border);
|
|
197
268
|
border-radius: var(--radius);
|
|
@@ -199,20 +270,18 @@ body {
|
|
|
199
270
|
font-family: var(--font-body);
|
|
200
271
|
font-size: 0.9375rem;
|
|
201
272
|
outline: none;
|
|
202
|
-
transition:
|
|
273
|
+
transition: all var(--transition);
|
|
203
274
|
}
|
|
204
275
|
|
|
205
|
-
.input-
|
|
276
|
+
.input-wrapper input:focus {
|
|
206
277
|
border-color: var(--accent);
|
|
207
278
|
box-shadow: 0 0 0 3px var(--accent-dim);
|
|
208
279
|
}
|
|
209
280
|
|
|
210
|
-
.input-
|
|
211
|
-
color: var(--text-dim);
|
|
212
|
-
}
|
|
281
|
+
.input-wrapper input::placeholder { color: var(--text-dim); }
|
|
213
282
|
|
|
214
283
|
.btn-primary {
|
|
215
|
-
padding: 14px
|
|
284
|
+
padding: 14px 24px;
|
|
216
285
|
background: var(--accent);
|
|
217
286
|
color: var(--bg-primary);
|
|
218
287
|
border: none;
|
|
@@ -221,50 +290,46 @@ body {
|
|
|
221
290
|
font-size: 0.9375rem;
|
|
222
291
|
font-weight: 700;
|
|
223
292
|
cursor: pointer;
|
|
224
|
-
transition: all
|
|
293
|
+
transition: all var(--transition);
|
|
225
294
|
white-space: nowrap;
|
|
295
|
+
display: flex;
|
|
296
|
+
align-items: center;
|
|
297
|
+
gap: 8px;
|
|
226
298
|
}
|
|
227
299
|
|
|
228
300
|
.btn-primary:hover {
|
|
229
|
-
background:
|
|
301
|
+
background: var(--accent-hover);
|
|
230
302
|
transform: translateY(-1px);
|
|
231
|
-
box-shadow:
|
|
303
|
+
box-shadow: var(--shadow-accent);
|
|
232
304
|
}
|
|
233
305
|
|
|
234
|
-
.btn-primary:active {
|
|
235
|
-
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
.btn-primary:disabled {
|
|
239
|
-
opacity: 0.5;
|
|
240
|
-
cursor: not-allowed;
|
|
241
|
-
transform: none;
|
|
242
|
-
}
|
|
306
|
+
.btn-primary:active { transform: translateY(0); }
|
|
307
|
+
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
|
|
243
308
|
|
|
244
309
|
.quick-prompts {
|
|
245
310
|
display: flex;
|
|
246
311
|
align-items: center;
|
|
247
|
-
gap:
|
|
312
|
+
gap: 6px;
|
|
248
313
|
flex-wrap: wrap;
|
|
249
|
-
margin-bottom:
|
|
314
|
+
margin-bottom: 20px;
|
|
250
315
|
}
|
|
251
316
|
|
|
252
317
|
.quick-label {
|
|
253
|
-
font-size: 0.
|
|
318
|
+
font-size: 0.75rem;
|
|
254
319
|
color: var(--text-dim);
|
|
255
320
|
font-weight: 500;
|
|
256
321
|
}
|
|
257
322
|
|
|
258
323
|
.quick-btn {
|
|
259
|
-
padding:
|
|
324
|
+
padding: 5px 12px;
|
|
260
325
|
background: var(--bg-card);
|
|
261
326
|
border: 1px solid var(--border);
|
|
262
327
|
border-radius: 999px;
|
|
263
328
|
color: var(--text-secondary);
|
|
264
329
|
font-family: var(--font-body);
|
|
265
|
-
font-size: 0.
|
|
330
|
+
font-size: 0.75rem;
|
|
266
331
|
cursor: pointer;
|
|
267
|
-
transition: all
|
|
332
|
+
transition: all var(--transition);
|
|
268
333
|
}
|
|
269
334
|
|
|
270
335
|
.quick-btn:hover {
|
|
@@ -277,27 +342,32 @@ body {
|
|
|
277
342
|
RESULT AREA
|
|
278
343
|
============================================ */
|
|
279
344
|
.result-area {
|
|
280
|
-
margin-top:
|
|
345
|
+
margin-top: 20px;
|
|
281
346
|
background: var(--bg-card);
|
|
282
347
|
border: 1px solid var(--border);
|
|
283
348
|
border-radius: var(--radius-lg);
|
|
284
349
|
overflow: hidden;
|
|
350
|
+
animation: slideUp 0.3s ease;
|
|
285
351
|
}
|
|
286
352
|
|
|
287
|
-
|
|
288
|
-
|
|
353
|
+
@keyframes slideUp {
|
|
354
|
+
from { opacity: 0; transform: translateY(12px); }
|
|
355
|
+
to { opacity: 1; transform: translateY(0); }
|
|
289
356
|
}
|
|
290
357
|
|
|
358
|
+
.result-area.hidden { display: none; }
|
|
359
|
+
|
|
291
360
|
.result-header {
|
|
292
361
|
display: flex;
|
|
293
362
|
align-items: center;
|
|
294
363
|
justify-content: space-between;
|
|
295
|
-
padding:
|
|
364
|
+
padding: 14px 20px;
|
|
296
365
|
border-bottom: 1px solid var(--border);
|
|
366
|
+
background: rgba(204, 255, 0, 0.03);
|
|
297
367
|
}
|
|
298
368
|
|
|
299
369
|
.result-title {
|
|
300
|
-
font-size: 0.
|
|
370
|
+
font-size: 0.8125rem;
|
|
301
371
|
font-weight: 600;
|
|
302
372
|
color: var(--accent);
|
|
303
373
|
display: flex;
|
|
@@ -308,120 +378,110 @@ body {
|
|
|
308
378
|
.result-title::before {
|
|
309
379
|
content: '';
|
|
310
380
|
display: inline-block;
|
|
311
|
-
width:
|
|
312
|
-
height:
|
|
381
|
+
width: 6px;
|
|
382
|
+
height: 6px;
|
|
313
383
|
background: var(--accent);
|
|
314
384
|
border-radius: 50%;
|
|
385
|
+
box-shadow: 0 0 8px var(--accent);
|
|
315
386
|
}
|
|
316
387
|
|
|
317
388
|
.btn-copy {
|
|
318
|
-
padding:
|
|
389
|
+
padding: 5px 14px;
|
|
319
390
|
background: transparent;
|
|
320
391
|
border: 1px solid var(--border);
|
|
321
392
|
border-radius: var(--radius-sm);
|
|
322
393
|
color: var(--text-secondary);
|
|
323
394
|
font-family: var(--font-body);
|
|
324
|
-
font-size: 0.
|
|
395
|
+
font-size: 0.75rem;
|
|
325
396
|
cursor: pointer;
|
|
326
|
-
transition: all
|
|
397
|
+
transition: all var(--transition);
|
|
327
398
|
display: flex;
|
|
328
399
|
align-items: center;
|
|
329
|
-
gap:
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
.btn-copy:hover {
|
|
333
|
-
border-color: var(--accent);
|
|
334
|
-
color: var(--accent);
|
|
400
|
+
gap: 5px;
|
|
335
401
|
}
|
|
336
402
|
|
|
337
|
-
.btn-copy
|
|
338
|
-
|
|
339
|
-
color: var(--success);
|
|
340
|
-
}
|
|
403
|
+
.btn-copy:hover { border-color: var(--accent); color: var(--accent); }
|
|
404
|
+
.btn-copy.copied { border-color: var(--success); color: var(--success); }
|
|
341
405
|
|
|
342
|
-
.result-body {
|
|
343
|
-
padding: 20px;
|
|
344
|
-
}
|
|
406
|
+
.result-body { padding: 20px; }
|
|
345
407
|
|
|
346
408
|
.result-body pre {
|
|
347
409
|
font-family: var(--font-mono);
|
|
348
|
-
font-size: 0.
|
|
349
|
-
line-height: 1.
|
|
410
|
+
font-size: 0.8125rem;
|
|
411
|
+
line-height: 1.8;
|
|
350
412
|
color: var(--text-primary);
|
|
351
413
|
white-space: pre-wrap;
|
|
352
414
|
word-break: break-word;
|
|
353
415
|
}
|
|
354
416
|
|
|
355
417
|
.result-footer {
|
|
356
|
-
padding:
|
|
418
|
+
padding: 10px 20px;
|
|
357
419
|
border-top: 1px solid var(--border);
|
|
358
420
|
display: flex;
|
|
359
421
|
align-items: center;
|
|
360
|
-
gap:
|
|
361
|
-
font-size: 0.
|
|
422
|
+
gap: 6px;
|
|
423
|
+
font-size: 0.75rem;
|
|
362
424
|
color: var(--text-dim);
|
|
363
425
|
}
|
|
364
426
|
|
|
427
|
+
.result-footer svg { color: var(--accent); }
|
|
428
|
+
|
|
365
429
|
/* Loading state */
|
|
366
430
|
.loading-indicator {
|
|
367
431
|
display: flex;
|
|
432
|
+
flex-direction: column;
|
|
368
433
|
align-items: center;
|
|
369
434
|
justify-content: center;
|
|
370
|
-
gap:
|
|
371
|
-
padding:
|
|
435
|
+
gap: 16px;
|
|
436
|
+
padding: 48px;
|
|
372
437
|
color: var(--text-secondary);
|
|
373
|
-
font-size: 0.
|
|
374
|
-
}
|
|
375
|
-
|
|
376
|
-
.loading-dots {
|
|
377
|
-
display: flex;
|
|
378
|
-
gap: 4px;
|
|
438
|
+
font-size: 0.875rem;
|
|
379
439
|
}
|
|
380
440
|
|
|
381
|
-
.loading-
|
|
382
|
-
width:
|
|
383
|
-
height:
|
|
384
|
-
|
|
441
|
+
.loading-spinner {
|
|
442
|
+
width: 32px;
|
|
443
|
+
height: 32px;
|
|
444
|
+
border: 3px solid var(--border);
|
|
445
|
+
border-top-color: var(--accent);
|
|
385
446
|
border-radius: 50%;
|
|
386
|
-
animation:
|
|
447
|
+
animation: spin 0.8s linear infinite;
|
|
387
448
|
}
|
|
388
449
|
|
|
389
|
-
|
|
390
|
-
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
|
|
391
|
-
|
|
392
|
-
@keyframes bounce {
|
|
393
|
-
0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
|
|
394
|
-
40% { transform: scale(1); opacity: 1; }
|
|
395
|
-
}
|
|
450
|
+
@keyframes spin { to { transform: rotate(360deg); } }
|
|
396
451
|
|
|
397
452
|
/* ============================================
|
|
398
453
|
EXPLORE TAB
|
|
399
454
|
============================================ */
|
|
455
|
+
.explore-toolbar {
|
|
456
|
+
display: flex;
|
|
457
|
+
justify-content: space-between;
|
|
458
|
+
align-items: center;
|
|
459
|
+
gap: 16px;
|
|
460
|
+
margin-bottom: 16px;
|
|
461
|
+
flex-wrap: wrap;
|
|
462
|
+
}
|
|
463
|
+
|
|
400
464
|
.filter-bar {
|
|
401
465
|
display: flex;
|
|
402
|
-
gap:
|
|
403
|
-
margin-bottom: 24px;
|
|
466
|
+
gap: 4px;
|
|
404
467
|
flex-wrap: wrap;
|
|
405
468
|
}
|
|
406
469
|
|
|
407
470
|
.filter-btn {
|
|
408
|
-
padding:
|
|
471
|
+
padding: 6px 14px;
|
|
409
472
|
background: var(--bg-card);
|
|
410
473
|
border: 1px solid var(--border);
|
|
411
474
|
border-radius: 999px;
|
|
412
475
|
color: var(--text-secondary);
|
|
413
476
|
font-family: var(--font-body);
|
|
414
|
-
font-size: 0.
|
|
477
|
+
font-size: 0.75rem;
|
|
415
478
|
font-weight: 500;
|
|
416
479
|
cursor: pointer;
|
|
417
|
-
transition: all
|
|
480
|
+
transition: all var(--transition);
|
|
418
481
|
text-transform: capitalize;
|
|
419
482
|
}
|
|
420
483
|
|
|
421
|
-
.filter-btn:hover {
|
|
422
|
-
border-color: var(--accent);
|
|
423
|
-
color: var(--accent);
|
|
424
|
-
}
|
|
484
|
+
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
|
|
425
485
|
|
|
426
486
|
.filter-btn.active {
|
|
427
487
|
background: var(--accent);
|
|
@@ -430,18 +490,52 @@ body {
|
|
|
430
490
|
font-weight: 600;
|
|
431
491
|
}
|
|
432
492
|
|
|
493
|
+
.search-bar {
|
|
494
|
+
display: flex;
|
|
495
|
+
align-items: center;
|
|
496
|
+
gap: 8px;
|
|
497
|
+
padding: 6px 14px;
|
|
498
|
+
background: var(--bg-input);
|
|
499
|
+
border: 1px solid var(--border);
|
|
500
|
+
border-radius: 999px;
|
|
501
|
+
color: var(--text-dim);
|
|
502
|
+
min-width: 180px;
|
|
503
|
+
transition: border-color var(--transition);
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
.search-bar:focus-within { border-color: var(--accent); }
|
|
507
|
+
|
|
508
|
+
.search-bar input {
|
|
509
|
+
border: none;
|
|
510
|
+
background: transparent;
|
|
511
|
+
color: var(--text-primary);
|
|
512
|
+
font-family: var(--font-body);
|
|
513
|
+
font-size: 0.8125rem;
|
|
514
|
+
outline: none;
|
|
515
|
+
width: 100%;
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
.search-bar input::placeholder { color: var(--text-dim); }
|
|
519
|
+
|
|
520
|
+
.trends-count {
|
|
521
|
+
font-size: 0.75rem;
|
|
522
|
+
color: var(--text-dim);
|
|
523
|
+
margin-bottom: 12px;
|
|
524
|
+
font-family: var(--font-mono);
|
|
525
|
+
}
|
|
526
|
+
|
|
433
527
|
.trends-grid {
|
|
434
528
|
display: grid;
|
|
435
|
-
grid-template-columns: repeat(auto-fill, minmax(
|
|
436
|
-
gap:
|
|
437
|
-
margin-bottom:
|
|
529
|
+
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
|
|
530
|
+
gap: 12px;
|
|
531
|
+
margin-bottom: 20px;
|
|
438
532
|
}
|
|
439
533
|
|
|
440
534
|
.trend-card {
|
|
441
535
|
background: var(--bg-card);
|
|
442
536
|
border: 1px solid var(--border);
|
|
443
537
|
border-radius: var(--radius);
|
|
444
|
-
padding:
|
|
538
|
+
padding: 18px;
|
|
445
539
|
cursor: pointer;
|
|
446
540
|
transition: all 0.25s ease;
|
|
447
541
|
position: relative;
|
|
@@ -454,8 +548,8 @@ body {
|
|
|
454
548
|
top: 0;
|
|
455
549
|
left: 0;
|
|
456
550
|
right: 0;
|
|
457
|
-
height:
|
|
458
|
-
background: var(--accent);
|
|
551
|
+
height: 2px;
|
|
552
|
+
background: linear-gradient(90deg, var(--accent), transparent);
|
|
459
553
|
transform: scaleX(0);
|
|
460
554
|
transform-origin: left;
|
|
461
555
|
transition: transform 0.3s ease;
|
|
@@ -465,12 +559,10 @@ body {
|
|
|
465
559
|
border-color: var(--border-hover);
|
|
466
560
|
background: var(--bg-card-hover);
|
|
467
561
|
transform: translateY(-2px);
|
|
468
|
-
box-shadow:
|
|
562
|
+
box-shadow: var(--shadow-lg);
|
|
469
563
|
}
|
|
470
564
|
|
|
471
|
-
.trend-card:hover::before {
|
|
472
|
-
transform: scaleX(1);
|
|
473
|
-
}
|
|
565
|
+
.trend-card:hover::before { transform: scaleX(1); }
|
|
474
566
|
|
|
475
567
|
.trend-card.selected {
|
|
476
568
|
border-color: var(--accent);
|
|
@@ -481,42 +573,63 @@ body {
|
|
|
481
573
|
display: flex;
|
|
482
574
|
align-items: center;
|
|
483
575
|
justify-content: space-between;
|
|
484
|
-
margin-bottom:
|
|
576
|
+
margin-bottom: 6px;
|
|
485
577
|
}
|
|
486
578
|
|
|
487
579
|
.trend-name {
|
|
488
|
-
font-size:
|
|
580
|
+
font-size: 0.9375rem;
|
|
489
581
|
font-weight: 700;
|
|
490
582
|
color: var(--text-primary);
|
|
491
583
|
}
|
|
492
584
|
|
|
493
585
|
.trend-category {
|
|
494
|
-
font-size: 0.
|
|
586
|
+
font-size: 0.625rem;
|
|
495
587
|
font-weight: 600;
|
|
496
588
|
text-transform: uppercase;
|
|
497
589
|
letter-spacing: 1px;
|
|
498
590
|
color: var(--accent);
|
|
499
591
|
background: var(--accent-dim);
|
|
500
|
-
padding:
|
|
592
|
+
padding: 2px 7px;
|
|
501
593
|
border-radius: 4px;
|
|
502
594
|
}
|
|
503
595
|
|
|
596
|
+
.trend-source {
|
|
597
|
+
font-size: 0.5625rem;
|
|
598
|
+
color: var(--text-dim);
|
|
599
|
+
background: var(--bg-primary);
|
|
600
|
+
padding: 1px 5px;
|
|
601
|
+
border-radius: 3px;
|
|
602
|
+
margin-left: 4px;
|
|
603
|
+
}
|
|
604
|
+
|
|
504
605
|
.trend-desc {
|
|
505
606
|
font-size: 0.8125rem;
|
|
506
607
|
color: var(--text-secondary);
|
|
507
608
|
line-height: 1.5;
|
|
508
|
-
margin-bottom:
|
|
609
|
+
margin-bottom: 10px;
|
|
610
|
+
display: -webkit-box;
|
|
611
|
+
-webkit-line-clamp: 2;
|
|
612
|
+
-webkit-box-orient: vertical;
|
|
613
|
+
overflow: hidden;
|
|
509
614
|
}
|
|
510
615
|
|
|
511
|
-
.trend-
|
|
616
|
+
.trend-meta {
|
|
512
617
|
display: flex;
|
|
513
618
|
align-items: center;
|
|
619
|
+
justify-content: space-between;
|
|
514
620
|
gap: 8px;
|
|
515
621
|
}
|
|
516
622
|
|
|
623
|
+
.trend-popularity {
|
|
624
|
+
display: flex;
|
|
625
|
+
align-items: center;
|
|
626
|
+
gap: 6px;
|
|
627
|
+
flex: 1;
|
|
628
|
+
}
|
|
629
|
+
|
|
517
630
|
.popularity-bar {
|
|
518
631
|
flex: 1;
|
|
519
|
-
height:
|
|
632
|
+
height: 3px;
|
|
520
633
|
background: var(--border);
|
|
521
634
|
border-radius: 2px;
|
|
522
635
|
overflow: hidden;
|
|
@@ -530,48 +643,48 @@ body {
|
|
|
530
643
|
}
|
|
531
644
|
|
|
532
645
|
.popularity-value {
|
|
533
|
-
font-size: 0.
|
|
646
|
+
font-size: 0.6875rem;
|
|
534
647
|
font-weight: 600;
|
|
535
648
|
color: var(--text-dim);
|
|
536
649
|
font-family: var(--font-mono);
|
|
537
|
-
min-width:
|
|
650
|
+
min-width: 28px;
|
|
538
651
|
text-align: right;
|
|
539
652
|
}
|
|
540
653
|
|
|
541
654
|
.trend-keywords {
|
|
542
655
|
display: flex;
|
|
543
656
|
flex-wrap: wrap;
|
|
544
|
-
gap:
|
|
545
|
-
margin-top:
|
|
657
|
+
gap: 3px;
|
|
658
|
+
margin-top: 8px;
|
|
546
659
|
}
|
|
547
660
|
|
|
548
661
|
.keyword-tag {
|
|
549
|
-
font-size: 0.
|
|
662
|
+
font-size: 0.625rem;
|
|
550
663
|
color: var(--text-dim);
|
|
551
664
|
background: var(--bg-primary);
|
|
552
|
-
padding:
|
|
553
|
-
border-radius:
|
|
665
|
+
padding: 1px 6px;
|
|
666
|
+
border-radius: 3px;
|
|
554
667
|
border: 1px solid var(--border);
|
|
555
668
|
}
|
|
556
669
|
|
|
557
670
|
.trend-card-action {
|
|
558
|
-
margin-top:
|
|
559
|
-
padding-top:
|
|
671
|
+
margin-top: 12px;
|
|
672
|
+
padding-top: 12px;
|
|
560
673
|
border-top: 1px solid var(--border);
|
|
561
674
|
}
|
|
562
675
|
|
|
563
676
|
.btn-generate {
|
|
564
677
|
width: 100%;
|
|
565
|
-
padding:
|
|
678
|
+
padding: 8px;
|
|
566
679
|
background: transparent;
|
|
567
680
|
border: 1px solid var(--accent);
|
|
568
681
|
border-radius: var(--radius-sm);
|
|
569
682
|
color: var(--accent);
|
|
570
683
|
font-family: var(--font-body);
|
|
571
|
-
font-size: 0.
|
|
684
|
+
font-size: 0.75rem;
|
|
572
685
|
font-weight: 600;
|
|
573
686
|
cursor: pointer;
|
|
574
|
-
transition: all
|
|
687
|
+
transition: all var(--transition);
|
|
575
688
|
}
|
|
576
689
|
|
|
577
690
|
.btn-generate:hover {
|
|
@@ -585,39 +698,37 @@ body {
|
|
|
585
698
|
.mix-selectors {
|
|
586
699
|
display: flex;
|
|
587
700
|
align-items: center;
|
|
588
|
-
gap:
|
|
589
|
-
margin-bottom:
|
|
701
|
+
gap: 16px;
|
|
702
|
+
margin-bottom: 16px;
|
|
590
703
|
}
|
|
591
704
|
|
|
592
|
-
.mix-slot {
|
|
593
|
-
flex: 1;
|
|
594
|
-
}
|
|
705
|
+
.mix-slot { flex: 1; }
|
|
595
706
|
|
|
596
707
|
.slot-label {
|
|
597
|
-
font-size: 0.
|
|
708
|
+
font-size: 0.6875rem;
|
|
598
709
|
font-weight: 600;
|
|
599
710
|
color: var(--text-dim);
|
|
600
711
|
text-transform: uppercase;
|
|
601
712
|
letter-spacing: 1px;
|
|
602
|
-
margin-bottom:
|
|
713
|
+
margin-bottom: 6px;
|
|
603
714
|
}
|
|
604
715
|
|
|
605
716
|
.mix-select {
|
|
606
717
|
width: 100%;
|
|
607
|
-
padding: 14px
|
|
718
|
+
padding: 12px 14px;
|
|
608
719
|
background: var(--bg-input);
|
|
609
720
|
border: 1px solid var(--border);
|
|
610
721
|
border-radius: var(--radius);
|
|
611
722
|
color: var(--text-primary);
|
|
612
723
|
font-family: var(--font-body);
|
|
613
|
-
font-size: 0.
|
|
724
|
+
font-size: 0.875rem;
|
|
614
725
|
outline: none;
|
|
615
726
|
cursor: pointer;
|
|
616
727
|
appearance: none;
|
|
617
728
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
|
618
729
|
background-repeat: no-repeat;
|
|
619
|
-
background-position: right
|
|
620
|
-
transition: border-color
|
|
730
|
+
background-position: right 14px center;
|
|
731
|
+
transition: border-color var(--transition);
|
|
621
732
|
}
|
|
622
733
|
|
|
623
734
|
.mix-select:focus {
|
|
@@ -635,28 +746,34 @@ body {
|
|
|
635
746
|
flex-direction: column;
|
|
636
747
|
align-items: center;
|
|
637
748
|
gap: 4px;
|
|
638
|
-
|
|
639
|
-
font-size: 0.6875rem;
|
|
640
|
-
font-weight: 700;
|
|
641
|
-
letter-spacing: 2px;
|
|
642
|
-
padding-top: 20px;
|
|
749
|
+
padding-top: 18px;
|
|
643
750
|
}
|
|
644
751
|
|
|
645
|
-
.
|
|
646
|
-
|
|
752
|
+
.mix-icon-circle {
|
|
753
|
+
width: 44px;
|
|
754
|
+
height: 44px;
|
|
755
|
+
border-radius: 50%;
|
|
756
|
+
background: var(--accent-dim);
|
|
757
|
+
border: 2px solid var(--accent);
|
|
758
|
+
display: flex;
|
|
759
|
+
align-items: center;
|
|
760
|
+
justify-content: center;
|
|
761
|
+
color: var(--accent);
|
|
647
762
|
}
|
|
648
763
|
|
|
764
|
+
.context-group { margin-bottom: 16px; }
|
|
765
|
+
|
|
649
766
|
.context-group input {
|
|
650
767
|
width: 100%;
|
|
651
|
-
padding:
|
|
768
|
+
padding: 12px 18px;
|
|
652
769
|
background: var(--bg-input);
|
|
653
770
|
border: 1px solid var(--border);
|
|
654
771
|
border-radius: var(--radius);
|
|
655
772
|
color: var(--text-primary);
|
|
656
773
|
font-family: var(--font-body);
|
|
657
|
-
font-size: 0.
|
|
774
|
+
font-size: 0.875rem;
|
|
658
775
|
outline: none;
|
|
659
|
-
transition: border-color
|
|
776
|
+
transition: border-color var(--transition);
|
|
660
777
|
}
|
|
661
778
|
|
|
662
779
|
.context-group input:focus {
|
|
@@ -664,15 +781,119 @@ body {
|
|
|
664
781
|
box-shadow: 0 0 0 3px var(--accent-dim);
|
|
665
782
|
}
|
|
666
783
|
|
|
667
|
-
.context-group input::placeholder {
|
|
668
|
-
color: var(--text-dim);
|
|
669
|
-
}
|
|
784
|
+
.context-group input::placeholder { color: var(--text-dim); }
|
|
670
785
|
|
|
671
786
|
.btn-mix {
|
|
672
787
|
width: 100%;
|
|
673
|
-
padding:
|
|
674
|
-
font-size:
|
|
788
|
+
padding: 14px;
|
|
789
|
+
font-size: 0.9375rem;
|
|
675
790
|
margin-bottom: 8px;
|
|
791
|
+
justify-content: center;
|
|
792
|
+
}
|
|
793
|
+
|
|
794
|
+
/* ============================================
|
|
795
|
+
STATS TAB
|
|
796
|
+
============================================ */
|
|
797
|
+
.stats-container {
|
|
798
|
+
display: grid;
|
|
799
|
+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
800
|
+
gap: 12px;
|
|
801
|
+
}
|
|
802
|
+
|
|
803
|
+
.stats-loading {
|
|
804
|
+
grid-column: 1 / -1;
|
|
805
|
+
text-align: center;
|
|
806
|
+
color: var(--text-dim);
|
|
807
|
+
padding: 40px;
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
.stat-card {
|
|
811
|
+
background: var(--bg-card);
|
|
812
|
+
border: 1px solid var(--border);
|
|
813
|
+
border-radius: var(--radius);
|
|
814
|
+
padding: 20px;
|
|
815
|
+
text-align: center;
|
|
816
|
+
transition: all var(--transition);
|
|
817
|
+
}
|
|
818
|
+
|
|
819
|
+
.stat-card:hover {
|
|
820
|
+
border-color: var(--border-hover);
|
|
821
|
+
transform: translateY(-2px);
|
|
822
|
+
box-shadow: var(--shadow-md);
|
|
823
|
+
}
|
|
824
|
+
|
|
825
|
+
.stat-card.accent {
|
|
826
|
+
border-color: var(--accent);
|
|
827
|
+
background: var(--accent-glow);
|
|
828
|
+
}
|
|
829
|
+
|
|
830
|
+
.stat-value {
|
|
831
|
+
font-size: 2rem;
|
|
832
|
+
font-weight: 900;
|
|
833
|
+
color: var(--accent);
|
|
834
|
+
font-family: var(--font-mono);
|
|
835
|
+
line-height: 1;
|
|
836
|
+
margin-bottom: 6px;
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
.stat-label {
|
|
840
|
+
font-size: 0.75rem;
|
|
841
|
+
color: var(--text-secondary);
|
|
842
|
+
text-transform: uppercase;
|
|
843
|
+
letter-spacing: 1px;
|
|
844
|
+
font-weight: 500;
|
|
845
|
+
}
|
|
846
|
+
|
|
847
|
+
.stat-bar-container {
|
|
848
|
+
grid-column: 1 / -1;
|
|
849
|
+
background: var(--bg-card);
|
|
850
|
+
border: 1px solid var(--border);
|
|
851
|
+
border-radius: var(--radius);
|
|
852
|
+
padding: 20px;
|
|
853
|
+
}
|
|
854
|
+
|
|
855
|
+
.stat-bar-title {
|
|
856
|
+
font-size: 0.8125rem;
|
|
857
|
+
font-weight: 600;
|
|
858
|
+
color: var(--text-primary);
|
|
859
|
+
margin-bottom: 16px;
|
|
860
|
+
}
|
|
861
|
+
|
|
862
|
+
.stat-bar-row {
|
|
863
|
+
display: flex;
|
|
864
|
+
align-items: center;
|
|
865
|
+
gap: 12px;
|
|
866
|
+
margin-bottom: 10px;
|
|
867
|
+
}
|
|
868
|
+
|
|
869
|
+
.stat-bar-label {
|
|
870
|
+
font-size: 0.75rem;
|
|
871
|
+
color: var(--text-secondary);
|
|
872
|
+
min-width: 90px;
|
|
873
|
+
text-transform: capitalize;
|
|
874
|
+
}
|
|
875
|
+
|
|
876
|
+
.stat-bar-track {
|
|
877
|
+
flex: 1;
|
|
878
|
+
height: 8px;
|
|
879
|
+
background: var(--border);
|
|
880
|
+
border-radius: 4px;
|
|
881
|
+
overflow: hidden;
|
|
882
|
+
}
|
|
883
|
+
|
|
884
|
+
.stat-bar-fill {
|
|
885
|
+
height: 100%;
|
|
886
|
+
background: var(--accent);
|
|
887
|
+
border-radius: 4px;
|
|
888
|
+
transition: width 0.6s ease;
|
|
889
|
+
}
|
|
890
|
+
|
|
891
|
+
.stat-bar-count {
|
|
892
|
+
font-size: 0.75rem;
|
|
893
|
+
font-family: var(--font-mono);
|
|
894
|
+
color: var(--text-dim);
|
|
895
|
+
min-width: 24px;
|
|
896
|
+
text-align: right;
|
|
676
897
|
}
|
|
677
898
|
|
|
678
899
|
/* ============================================
|
|
@@ -680,31 +901,37 @@ body {
|
|
|
680
901
|
============================================ */
|
|
681
902
|
.footer {
|
|
682
903
|
text-align: center;
|
|
683
|
-
padding:
|
|
904
|
+
padding: 20px;
|
|
684
905
|
border-top: 1px solid var(--border);
|
|
906
|
+
}
|
|
907
|
+
|
|
908
|
+
.footer-content p {
|
|
685
909
|
color: var(--text-dim);
|
|
686
|
-
font-size: 0.
|
|
910
|
+
font-size: 0.75rem;
|
|
911
|
+
}
|
|
912
|
+
|
|
913
|
+
.footer-sub {
|
|
914
|
+
margin-top: 4px;
|
|
687
915
|
}
|
|
688
916
|
|
|
689
917
|
.footer a {
|
|
690
918
|
color: var(--accent);
|
|
691
919
|
text-decoration: none;
|
|
920
|
+
transition: opacity var(--transition);
|
|
692
921
|
}
|
|
693
922
|
|
|
694
|
-
.footer a:hover {
|
|
695
|
-
text-decoration: underline;
|
|
696
|
-
}
|
|
923
|
+
.footer a:hover { opacity: 0.8; }
|
|
697
924
|
|
|
698
925
|
/* ============================================
|
|
699
926
|
ERROR STATE
|
|
700
927
|
============================================ */
|
|
701
928
|
.error-message {
|
|
702
|
-
padding:
|
|
703
|
-
background: rgba(255, 68, 68, 0.
|
|
704
|
-
border: 1px solid rgba(255, 68, 68, 0.
|
|
929
|
+
padding: 14px 18px;
|
|
930
|
+
background: rgba(255, 68, 68, 0.06);
|
|
931
|
+
border: 1px solid rgba(255, 68, 68, 0.15);
|
|
705
932
|
border-radius: var(--radius);
|
|
706
933
|
color: var(--error);
|
|
707
|
-
font-size: 0.
|
|
934
|
+
font-size: 0.8125rem;
|
|
708
935
|
}
|
|
709
936
|
|
|
710
937
|
/* ============================================
|
|
@@ -712,45 +939,36 @@ body {
|
|
|
712
939
|
============================================ */
|
|
713
940
|
@media (max-width: 768px) {
|
|
714
941
|
.header {
|
|
715
|
-
padding:
|
|
942
|
+
padding: 10px 14px;
|
|
716
943
|
flex-wrap: wrap;
|
|
717
|
-
gap:
|
|
944
|
+
gap: 10px;
|
|
718
945
|
}
|
|
719
946
|
|
|
720
947
|
.header-left { order: 1; }
|
|
721
|
-
.
|
|
948
|
+
.header-right { order: 2; }
|
|
722
949
|
.nav { order: 3; width: 100%; justify-content: center; }
|
|
723
950
|
|
|
724
|
-
.main {
|
|
725
|
-
padding: 24px 16px;
|
|
726
|
-
}
|
|
951
|
+
.main { padding: 20px 14px; }
|
|
727
952
|
|
|
728
|
-
.tab-hero h2 {
|
|
729
|
-
font-size: 1.5rem;
|
|
730
|
-
}
|
|
953
|
+
.tab-hero h2 { font-size: 1.5rem; }
|
|
731
954
|
|
|
732
|
-
.input-group {
|
|
733
|
-
flex-direction: column;
|
|
734
|
-
}
|
|
955
|
+
.input-group { flex-direction: column; }
|
|
735
956
|
|
|
736
|
-
.mix-selectors {
|
|
737
|
-
flex-direction: column;
|
|
738
|
-
gap: 12px;
|
|
739
|
-
}
|
|
957
|
+
.mix-selectors { flex-direction: column; gap: 10px; }
|
|
740
958
|
|
|
741
|
-
.mix-icon {
|
|
742
|
-
padding-top: 0;
|
|
743
|
-
flex-direction: row;
|
|
744
|
-
gap: 8px;
|
|
745
|
-
}
|
|
959
|
+
.mix-icon { padding-top: 0; flex-direction: row; }
|
|
746
960
|
|
|
747
|
-
.trends-grid {
|
|
748
|
-
|
|
749
|
-
}
|
|
961
|
+
.trends-grid { grid-template-columns: 1fr; }
|
|
962
|
+
|
|
963
|
+
.explore-toolbar { flex-direction: column; align-items: stretch; }
|
|
964
|
+
|
|
965
|
+
.stats-container { grid-template-columns: repeat(2, 1fr); }
|
|
750
966
|
}
|
|
751
967
|
|
|
752
968
|
@media (max-width: 480px) {
|
|
753
|
-
.logo { font-size: 1.
|
|
754
|
-
.nav-btn { padding: 6px
|
|
969
|
+
.logo { font-size: 1.1rem; }
|
|
970
|
+
.nav-btn { padding: 6px 10px; font-size: 0.75rem; }
|
|
971
|
+
.nav-btn svg { display: none; }
|
|
755
972
|
.quick-prompts { display: none; }
|
|
973
|
+
.stats-container { grid-template-columns: 1fr; }
|
|
756
974
|
}
|