@kerkhoff-ict/solora 2.0.0 → 2.0.2
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/index.css +155 -173
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Root kleurvariabelen (fallbacks)
|
|
3
|
-
====================== */
|
|
1
|
+
/* src/components/button.css */
|
|
4
2
|
:root {
|
|
5
3
|
--color-primary: #0071e3;
|
|
6
4
|
--color-secondary: #f5f5f5;
|
|
@@ -10,94 +8,106 @@
|
|
|
10
8
|
--color-text-light: #ffffff;
|
|
11
9
|
--color-text-dark: #000000;
|
|
12
10
|
}
|
|
13
|
-
/* ======================
|
|
14
|
-
Basis button styles
|
|
15
|
-
====================== */
|
|
16
11
|
.btn {
|
|
17
12
|
font-weight: 600;
|
|
18
13
|
border: none;
|
|
19
14
|
border-radius: 9999px;
|
|
20
|
-
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
15
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
21
16
|
border-radius: 9999px;
|
|
22
17
|
cursor: pointer;
|
|
23
18
|
transition: background 0.2s, filter 0.2s;
|
|
24
19
|
}
|
|
25
|
-
.btn-sm {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
20
|
+
.btn-sm {
|
|
21
|
+
padding: 0.1875rem 1rem;
|
|
22
|
+
font-size: 0.9375rem;
|
|
23
|
+
}
|
|
24
|
+
.btn-md {
|
|
25
|
+
padding: 0.5rem 1.2rem;
|
|
26
|
+
font-size: 1rem;
|
|
27
|
+
}
|
|
28
|
+
.btn-lg {
|
|
29
|
+
padding: 0.8125rem 1.5625rem;
|
|
30
|
+
font-size: 1.0625rem;
|
|
31
|
+
}
|
|
32
|
+
.btn-xl {
|
|
33
|
+
padding: 0.9375rem 1.875rem;
|
|
34
|
+
font-size: 1.3125rem;
|
|
35
|
+
}
|
|
29
36
|
.btn.disabled {
|
|
30
37
|
opacity: 0.5;
|
|
31
38
|
cursor: not-allowed;
|
|
32
39
|
pointer-events: none;
|
|
33
40
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
.btn-primary {
|
|
38
|
-
background: var(--color-primary, #0071e3);
|
|
39
|
-
color: var(--color-text-light, #fff);
|
|
41
|
+
.btn-primary {
|
|
42
|
+
background: var(--color-primary, #0071e3);
|
|
43
|
+
color: var(--color-text-light, #fff);
|
|
40
44
|
}
|
|
41
|
-
.btn-primary:hover {
|
|
42
|
-
.
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
45
|
+
.btn-primary:hover {
|
|
46
|
+
filter: brightness(0.85);
|
|
47
|
+
}
|
|
48
|
+
.btn-secondary {
|
|
49
|
+
background: var(--color-secondary, #f5f5f5);
|
|
50
|
+
color: var(--color-text-dark, #000);
|
|
51
|
+
border: 2px solid rgba(0, 0, 0, 0.1);
|
|
46
52
|
}
|
|
47
53
|
.btn-secondary.active,
|
|
48
|
-
.btn-secondary:hover {
|
|
49
|
-
.
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}
|
|
58
|
-
.btn-warning
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
54
|
+
.btn-secondary:hover {
|
|
55
|
+
filter: brightness(0.9);
|
|
56
|
+
}
|
|
57
|
+
.btn-success {
|
|
58
|
+
background: var(--color-success, #28a745);
|
|
59
|
+
color: var(--color-text-light, #fff);
|
|
60
|
+
}
|
|
61
|
+
.btn-success:hover {
|
|
62
|
+
filter: brightness(0.85);
|
|
63
|
+
}
|
|
64
|
+
.btn-warning {
|
|
65
|
+
background: var(--color-warning, #ffc107);
|
|
66
|
+
color: var(--color-text-dark, #000);
|
|
67
|
+
}
|
|
68
|
+
.btn-warning:hover {
|
|
69
|
+
filter: brightness(0.85);
|
|
70
|
+
}
|
|
71
|
+
.btn-danger {
|
|
72
|
+
background: var(--color-danger, #dc3545);
|
|
73
|
+
color: var(--color-text-light, #fff);
|
|
74
|
+
}
|
|
75
|
+
.btn-danger:hover {
|
|
76
|
+
filter: brightness(0.85);
|
|
77
|
+
}
|
|
67
78
|
.btn-glass {
|
|
68
79
|
position: relative;
|
|
69
|
-
background: rgba(255,255,255,0.2);
|
|
80
|
+
background: rgba(255, 255, 255, 0.2);
|
|
70
81
|
color: var(--color-text-dark, #000);
|
|
71
|
-
border: 1px solid rgba(255,255,255,0.3);
|
|
72
|
-
box-shadow: 0 8px 32px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(255,255,255,0.1);
|
|
82
|
+
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
83
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
73
84
|
backdrop-filter: blur(12px);
|
|
74
85
|
-webkit-backdrop-filter: blur(12px);
|
|
75
86
|
overflow: hidden;
|
|
76
87
|
transition: all 0.3s ease;
|
|
77
88
|
}
|
|
78
89
|
.btn-glass::before {
|
|
79
|
-
content:"";
|
|
80
|
-
position:absolute;
|
|
81
|
-
top:
|
|
82
|
-
|
|
90
|
+
content: "";
|
|
91
|
+
position: absolute;
|
|
92
|
+
top: 4px;
|
|
93
|
+
left: 4px;
|
|
94
|
+
right: 4px;
|
|
95
|
+
bottom: 0;
|
|
96
|
+
background: rgba(0, 0, 0, 0.084);
|
|
83
97
|
filter: blur(16px);
|
|
84
|
-
z-index
|
|
98
|
+
z-index: -1;
|
|
85
99
|
border-radius: inherit;
|
|
86
100
|
pointer-events: none;
|
|
87
101
|
}
|
|
88
102
|
.btn-glass:hover {
|
|
89
|
-
background: rgba(255,255,255,0.35);
|
|
90
|
-
box-shadow: 0 12px 28px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.15);
|
|
103
|
+
background: rgba(255, 255, 255, 0.35);
|
|
104
|
+
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
|
|
91
105
|
}
|
|
92
106
|
.btn-glass:active {
|
|
93
|
-
background: rgba(255,255,255,0.25);
|
|
94
|
-
box-shadow: 0 4px 10px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(255,255,255,0.2);
|
|
107
|
+
background: rgba(255, 255, 255, 0.25);
|
|
108
|
+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
|
|
95
109
|
transform: translateY(1px);
|
|
96
110
|
}
|
|
97
|
-
/* ======================
|
|
98
|
-
Custom color button helper
|
|
99
|
-
Usage: .btn-[#ff6600] of .btn-[rgba(255,0,0,0.5)]
|
|
100
|
-
====================== */
|
|
101
111
|
[class*="btn-["] {
|
|
102
112
|
color: var(--color-text-light, #fff);
|
|
103
113
|
transition: all 0.2s ease;
|
|
@@ -105,36 +115,71 @@
|
|
|
105
115
|
[class*="btn-["]:hover {
|
|
106
116
|
filter: brightness(0.85);
|
|
107
117
|
}
|
|
108
|
-
/* ======================
|
|
109
|
-
Dark mode support
|
|
110
|
-
====================== */
|
|
111
118
|
@media (prefers-color-scheme: dark) {
|
|
112
|
-
.btn-primary {
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
119
|
+
.btn-primary {
|
|
120
|
+
background: #0558be;
|
|
121
|
+
color: var(--color-text-light, #fff);
|
|
122
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
|
|
123
|
+
}
|
|
124
|
+
.btn-primary:hover {
|
|
125
|
+
background: #2b76d2;
|
|
126
|
+
}
|
|
127
|
+
.btn-secondary {
|
|
128
|
+
background: #1c1c1e;
|
|
129
|
+
color: #f0f0f0;
|
|
130
|
+
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
131
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
|
|
132
|
+
}
|
|
116
133
|
.btn-secondary.active,
|
|
117
|
-
.btn-secondary:hover {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
.btn-success
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
.btn-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
.btn-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
.btn-
|
|
130
|
-
|
|
131
|
-
|
|
134
|
+
.btn-secondary:hover {
|
|
135
|
+
background-color: #2a2a2c;
|
|
136
|
+
}
|
|
137
|
+
.btn-success {
|
|
138
|
+
background: #1c3e23;
|
|
139
|
+
}
|
|
140
|
+
.btn-success:hover {
|
|
141
|
+
filter: brightness(1.2);
|
|
142
|
+
}
|
|
143
|
+
.btn-warning {
|
|
144
|
+
background: #664d03;
|
|
145
|
+
}
|
|
146
|
+
.btn-warning:hover {
|
|
147
|
+
filter: brightness(1.2);
|
|
148
|
+
}
|
|
149
|
+
.btn-danger {
|
|
150
|
+
background: #7a1f1f;
|
|
151
|
+
}
|
|
152
|
+
.btn-danger:hover {
|
|
153
|
+
filter: brightness(1.2);
|
|
154
|
+
}
|
|
155
|
+
.btn-glass {
|
|
156
|
+
background: rgba(255, 255, 255, 0.05);
|
|
157
|
+
color: #fff;
|
|
158
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
159
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
160
|
+
}
|
|
161
|
+
.btn-glass::before {
|
|
162
|
+
background: rgba(255, 255, 255, 0.04);
|
|
163
|
+
}
|
|
164
|
+
.btn-glass:hover {
|
|
165
|
+
background: rgba(255, 255, 255, 0.1);
|
|
166
|
+
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
|
|
167
|
+
}
|
|
168
|
+
.btn-glass:active {
|
|
169
|
+
background: rgba(255, 255, 255, 0.07);
|
|
170
|
+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
171
|
+
}
|
|
132
172
|
}
|
|
173
|
+
|
|
174
|
+
/* src/components/codeblock.css */
|
|
133
175
|
.codeblock {
|
|
134
176
|
position: relative;
|
|
135
177
|
border-radius: 12px;
|
|
136
178
|
overflow: hidden;
|
|
137
|
-
font-family:
|
|
179
|
+
font-family:
|
|
180
|
+
"SF Mono",
|
|
181
|
+
"Menlo",
|
|
182
|
+
monospace;
|
|
138
183
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
139
184
|
background: #fefefe55;
|
|
140
185
|
backdrop-filter: blur(8px);
|
|
@@ -144,59 +189,35 @@
|
|
|
144
189
|
backdrop-filter: blur(12px);
|
|
145
190
|
color: #000000;
|
|
146
191
|
padding-left: 16px;
|
|
192
|
+
padding-top: 10px;
|
|
193
|
+
padding-bottom: 10px;
|
|
147
194
|
width: 100%;
|
|
148
195
|
height: 100%;
|
|
149
196
|
overflow-x: auto;
|
|
150
197
|
font-size: 0.9rem;
|
|
151
198
|
line-height: 1.5;
|
|
152
|
-
/* white-space: pre-wrap; */
|
|
153
199
|
word-break: break-word;
|
|
154
200
|
display: block;
|
|
155
201
|
background: transparent;
|
|
156
202
|
color: inherit;
|
|
157
203
|
position: relative;
|
|
158
|
-
transition:
|
|
159
|
-
max-height 0.3s ease,
|
|
160
|
-
opacity 0.3s ease;
|
|
204
|
+
transition: max-height 0.3s ease, opacity 0.3s ease;
|
|
161
205
|
opacity: 1;
|
|
162
206
|
}
|
|
163
207
|
.pre-content.collapsed {
|
|
164
208
|
max-height: 0;
|
|
165
209
|
opacity: 0;
|
|
166
210
|
}
|
|
167
|
-
/* .codeblock.fullscreen {
|
|
168
|
-
position: fixed;
|
|
169
|
-
top: 0;
|
|
170
|
-
left: 0;
|
|
171
|
-
width: 100%;
|
|
172
|
-
height: 100%;
|
|
173
|
-
border-radius: 0;
|
|
174
|
-
z-index: 9999;
|
|
175
|
-
} */
|
|
176
211
|
.pre-copy-btn {
|
|
177
212
|
justify-self: end;
|
|
178
|
-
transition:
|
|
179
|
-
background 0.2s ease,
|
|
180
|
-
color 0.2s ease;
|
|
213
|
+
transition: background 0.2s ease, color 0.2s ease;
|
|
181
214
|
}
|
|
182
215
|
.pre-copy-btn.btn-in-pre {
|
|
183
216
|
position: absolute;
|
|
184
217
|
top: 8px;
|
|
185
218
|
right: 8px;
|
|
186
|
-
/* padding: 4px 10px; */
|
|
187
|
-
/* font-size: 0.8rem; */
|
|
188
|
-
/* border-radius: 6px; */
|
|
189
|
-
/* background: rgba(255, 255, 255, 0.15); */
|
|
190
|
-
/* color: #000; */
|
|
191
|
-
/* border: 1px solid rgba(255, 255, 255, 0.3); */
|
|
192
|
-
/* backdrop-filter: blur(8px); */
|
|
193
|
-
/* transition: background 0.2s, transform 0.1s; */
|
|
194
219
|
z-index: 5;
|
|
195
220
|
}
|
|
196
|
-
/* .pre-copy-btn.btn-in-pre:hover {
|
|
197
|
-
background: rgba(255, 255, 255, 0.25);
|
|
198
|
-
transform: scale(1.05);
|
|
199
|
-
} */
|
|
200
221
|
.pre-top {
|
|
201
222
|
background: rgb(74, 74, 74);
|
|
202
223
|
display: flex;
|
|
@@ -231,9 +252,8 @@
|
|
|
231
252
|
background: #28c940;
|
|
232
253
|
position: relative;
|
|
233
254
|
}
|
|
234
|
-
/* Iconen toevoegen */
|
|
235
255
|
.pre-btn-red::before {
|
|
236
|
-
content:
|
|
256
|
+
content: "\d7";
|
|
237
257
|
position: absolute;
|
|
238
258
|
top: 50%;
|
|
239
259
|
left: 50%;
|
|
@@ -245,7 +265,7 @@
|
|
|
245
265
|
pointer-events: none;
|
|
246
266
|
}
|
|
247
267
|
.pre-btn-orange::before {
|
|
248
|
-
content:
|
|
268
|
+
content: "\2013";
|
|
249
269
|
position: absolute;
|
|
250
270
|
top: 50%;
|
|
251
271
|
left: 50%;
|
|
@@ -257,7 +277,7 @@
|
|
|
257
277
|
pointer-events: none;
|
|
258
278
|
}
|
|
259
279
|
.pre-btn-green::before {
|
|
260
|
-
content: "
|
|
280
|
+
content: "\26f6";
|
|
261
281
|
position: absolute;
|
|
262
282
|
top: 50%;
|
|
263
283
|
left: 50%;
|
|
@@ -268,7 +288,9 @@
|
|
|
268
288
|
opacity: 0;
|
|
269
289
|
pointer-events: none;
|
|
270
290
|
}
|
|
271
|
-
.pre-top-btns span:hover::before {
|
|
291
|
+
.pre-top-btns span:hover::before {
|
|
292
|
+
opacity: 1;
|
|
293
|
+
}
|
|
272
294
|
.pre-btn-red:hover {
|
|
273
295
|
filter: brightness(1.2);
|
|
274
296
|
}
|
|
@@ -332,7 +354,6 @@
|
|
|
332
354
|
.codeblock .token.italic {
|
|
333
355
|
font-style: italic;
|
|
334
356
|
}
|
|
335
|
-
/* Optional: highlight background for selected text */
|
|
336
357
|
.codeblock ::selection {
|
|
337
358
|
background: rgba(46, 204, 113, 0.2);
|
|
338
359
|
}
|
|
@@ -347,23 +368,17 @@
|
|
|
347
368
|
.codeblock pre::-webkit-scrollbar-track {
|
|
348
369
|
background: transparent;
|
|
349
370
|
}
|
|
350
|
-
/* --- Dark mode via media query --- */
|
|
351
371
|
@media (prefers-color-scheme: dark) {
|
|
352
|
-
|
|
353
372
|
.codeblock {
|
|
354
|
-
background: #1e1e2f88;
|
|
355
|
-
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
|
373
|
+
background: #1e1e2f88;
|
|
374
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
|
356
375
|
}
|
|
357
|
-
|
|
358
376
|
.pre-content {
|
|
359
377
|
color: #f0f0f0;
|
|
360
378
|
}
|
|
361
|
-
|
|
362
379
|
.pre-top {
|
|
363
380
|
background: #2c2c3e;
|
|
364
381
|
}
|
|
365
|
-
|
|
366
|
-
/* Prism tokens dark */
|
|
367
382
|
.codeblock .token.comment,
|
|
368
383
|
.codeblock .token.prolog,
|
|
369
384
|
.codeblock .token.doctype,
|
|
@@ -371,22 +386,18 @@
|
|
|
371
386
|
color: #95a5a6;
|
|
372
387
|
font-style: italic;
|
|
373
388
|
}
|
|
374
|
-
|
|
375
389
|
.codeblock .token.punctuation {
|
|
376
390
|
color: #ecf0f1;
|
|
377
391
|
}
|
|
378
|
-
|
|
379
392
|
.codeblock .token.operator,
|
|
380
393
|
.codeblock .token.boolean,
|
|
381
394
|
.codeblock .token.symbol,
|
|
382
395
|
.codeblock .token.entity {
|
|
383
396
|
color: #ecf0f1;
|
|
384
397
|
}
|
|
385
|
-
|
|
386
398
|
.codeblock .token.number {
|
|
387
399
|
color: #e67e22;
|
|
388
400
|
}
|
|
389
|
-
|
|
390
401
|
.codeblock .token.property,
|
|
391
402
|
.codeblock .token.tag,
|
|
392
403
|
.codeblock .token.constant,
|
|
@@ -395,7 +406,6 @@
|
|
|
395
406
|
color: #3498db;
|
|
396
407
|
font-weight: 500;
|
|
397
408
|
}
|
|
398
|
-
|
|
399
409
|
.codeblock .token.selector,
|
|
400
410
|
.codeblock .token.attr-name,
|
|
401
411
|
.codeblock .token.string,
|
|
@@ -404,7 +414,6 @@
|
|
|
404
414
|
.codeblock .token.inserted {
|
|
405
415
|
color: #2ecc71;
|
|
406
416
|
}
|
|
407
|
-
|
|
408
417
|
.codeblock .token.keyword,
|
|
409
418
|
.codeblock .token.atrule,
|
|
410
419
|
.codeblock .token.attr-value,
|
|
@@ -414,23 +423,23 @@
|
|
|
414
423
|
color: #f39c12;
|
|
415
424
|
font-weight: 500;
|
|
416
425
|
}
|
|
417
|
-
|
|
418
426
|
}
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
====================== */
|
|
427
|
+
|
|
428
|
+
/* src/components/dropdown.css */
|
|
422
429
|
.dropdown {
|
|
423
430
|
position: relative;
|
|
424
431
|
display: inline-block;
|
|
425
432
|
font-family:
|
|
426
|
-
-apple-system,
|
|
433
|
+
-apple-system,
|
|
434
|
+
BlinkMacSystemFont,
|
|
435
|
+
"Segoe UI",
|
|
436
|
+
Roboto,
|
|
437
|
+
Helvetica,
|
|
438
|
+
Arial,
|
|
427
439
|
sans-serif;
|
|
428
440
|
cursor: pointer;
|
|
429
441
|
user-select: none;
|
|
430
442
|
}
|
|
431
|
-
/* ======================
|
|
432
|
-
Dropdown button
|
|
433
|
-
====================== */
|
|
434
443
|
.dropdown-btn {
|
|
435
444
|
padding: 0.3rem 0.4rem;
|
|
436
445
|
border-radius: 12px;
|
|
@@ -450,7 +459,7 @@
|
|
|
450
459
|
background: var(--color-bg-hover, rgba(0, 0, 0, 0.05));
|
|
451
460
|
}
|
|
452
461
|
.dropdown-btn:after {
|
|
453
|
-
content: "
|
|
462
|
+
content: "\25be";
|
|
454
463
|
margin-left: 0.5rem;
|
|
455
464
|
font-size: 0.75rem;
|
|
456
465
|
transition: transform 0.2s ease;
|
|
@@ -462,9 +471,6 @@
|
|
|
462
471
|
outline: 2px solid var(--color-primary, #0071e3);
|
|
463
472
|
outline-offset: 2px;
|
|
464
473
|
}
|
|
465
|
-
/* ======================
|
|
466
|
-
Dropdown content
|
|
467
|
-
====================== */
|
|
468
474
|
.dropdown-content {
|
|
469
475
|
position: absolute;
|
|
470
476
|
top: 100%;
|
|
@@ -480,7 +486,7 @@
|
|
|
480
486
|
max-height: 15rem;
|
|
481
487
|
overflow-y: auto;
|
|
482
488
|
scrollbar-width: thin;
|
|
483
|
-
scrollbar-color: rgba(0,0,0,0.2) transparent;
|
|
489
|
+
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
|
|
484
490
|
opacity: 0;
|
|
485
491
|
transform: translateY(-10px) scale(0.95);
|
|
486
492
|
pointer-events: none;
|
|
@@ -491,21 +497,17 @@
|
|
|
491
497
|
width: 6px;
|
|
492
498
|
}
|
|
493
499
|
.dropdown-content::-webkit-scrollbar-thumb {
|
|
494
|
-
background: rgba(0,0,0,0.2);
|
|
500
|
+
background: rgba(0, 0, 0, 0.2);
|
|
495
501
|
border-radius: 3px;
|
|
496
502
|
}
|
|
497
503
|
.dropdown-content::-webkit-scrollbar-track {
|
|
498
504
|
background: transparent;
|
|
499
505
|
}
|
|
500
|
-
/* Show dropdown */
|
|
501
506
|
.dropdown.open .dropdown-content {
|
|
502
507
|
opacity: 1;
|
|
503
508
|
transform: translateY(0) scale(1);
|
|
504
509
|
pointer-events: auto;
|
|
505
510
|
}
|
|
506
|
-
/* ======================
|
|
507
|
-
Dropdown items
|
|
508
|
-
====================== */
|
|
509
511
|
.dropdown-item {
|
|
510
512
|
padding: 0.3rem 0.4rem;
|
|
511
513
|
color: var(--color-text-dark, #000);
|
|
@@ -523,39 +525,26 @@
|
|
|
523
525
|
outline: 2px solid var(--color-primary, #0071e3);
|
|
524
526
|
outline-offset: 2px;
|
|
525
527
|
}
|
|
526
|
-
|
|
527
|
-
.dropdown-item[aria-disabled="true"],
|
|
528
|
+
.dropdown-item[aria-disabled=true],
|
|
528
529
|
.dropdown-item.placeholder {
|
|
529
530
|
color: rgba(0, 0, 0, 0.4);
|
|
530
531
|
cursor: default;
|
|
531
532
|
pointer-events: none;
|
|
532
533
|
}
|
|
533
|
-
|
|
534
|
-
Hidden input styling
|
|
535
|
-
====================== */
|
|
536
|
-
.dropdown input[type="hidden"] {
|
|
534
|
+
.dropdown input[type=hidden] {
|
|
537
535
|
display: none;
|
|
538
536
|
}
|
|
539
|
-
/* ======================
|
|
540
|
-
Dividers
|
|
541
|
-
====================== */
|
|
542
537
|
.dropdown-divider {
|
|
543
538
|
height: 1px;
|
|
544
539
|
margin: 0.25rem 0;
|
|
545
540
|
background: rgba(0, 0, 0, 0.1);
|
|
546
541
|
}
|
|
547
|
-
/* ======================
|
|
548
|
-
Option group labels
|
|
549
|
-
====================== */
|
|
550
542
|
.dropdown-label {
|
|
551
543
|
padding: 0.3rem 0.4rem;
|
|
552
544
|
font-weight: 600;
|
|
553
545
|
color: rgba(0, 0, 0, 0.6);
|
|
554
546
|
cursor: default;
|
|
555
547
|
}
|
|
556
|
-
/* ======================
|
|
557
|
-
Dark mode support
|
|
558
|
-
====================== */
|
|
559
548
|
@media (prefers-color-scheme: dark) {
|
|
560
549
|
.dropdown-btn {
|
|
561
550
|
background: #1c1c1e;
|
|
@@ -563,44 +552,37 @@
|
|
|
563
552
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
564
553
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
|
|
565
554
|
}
|
|
566
|
-
|
|
567
555
|
.dropdown-btn:hover {
|
|
568
556
|
background: rgba(255, 255, 255, 0.05);
|
|
569
557
|
}
|
|
570
|
-
|
|
571
558
|
.dropdown-content {
|
|
572
559
|
background: rgba(28, 28, 30, 0.8);
|
|
573
560
|
backdrop-filter: blur(12px);
|
|
574
561
|
-webkit-backdrop-filter: blur(12px);
|
|
575
562
|
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
|
|
576
563
|
}
|
|
577
|
-
|
|
578
564
|
.dropdown-item {
|
|
579
565
|
color: #f0f0f0;
|
|
580
566
|
}
|
|
581
|
-
|
|
582
567
|
.dropdown-item:hover {
|
|
583
568
|
background: rgba(255, 255, 255, 0.08);
|
|
584
569
|
}
|
|
585
|
-
|
|
586
570
|
.dropdown-item.active {
|
|
587
571
|
background: rgba(255, 255, 255, 0.12);
|
|
588
572
|
}
|
|
589
|
-
|
|
590
573
|
.dropdown-divider {
|
|
591
574
|
background: rgba(255, 255, 255, 0.2);
|
|
592
575
|
}
|
|
593
|
-
|
|
594
|
-
.dropdown-item[aria-disabled="true"],
|
|
576
|
+
.dropdown-item[aria-disabled=true],
|
|
595
577
|
.dropdown-item.placeholder {
|
|
596
578
|
color: rgba(255, 255, 255, 0.4);
|
|
597
579
|
}
|
|
598
|
-
|
|
599
580
|
.dropdown-label {
|
|
600
581
|
color: rgba(255, 255, 255, 0.6);
|
|
601
582
|
}
|
|
602
|
-
|
|
603
583
|
.dropdown-content::-webkit-scrollbar-thumb {
|
|
604
|
-
background: rgba(255,255,255,0.2);
|
|
584
|
+
background: rgba(255, 255, 255, 0.2);
|
|
605
585
|
}
|
|
606
|
-
}
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
/* src/index.css */
|