@howssatoshi/quantumcss 1.8.0 → 1.10.1
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/README.md +1 -1
- package/dist/quantum.min.css +10 -1
- package/examples/admin-panel.html +2 -2
- package/examples/analytics-dashboard.html +6 -11
- package/examples/blog-template.html +16 -15
- package/examples/chat-messaging.html +33 -44
- package/examples/email-template.html +2 -2
- package/examples/gaming-template.html +148 -17
- package/examples/gradient-test.html +5 -0
- package/examples/images/eric.png +0 -0
- package/examples/index.html +89 -116
- package/examples/kitchen-sink.html +49 -1
- package/examples/music-streaming.html +3 -3
- package/examples/news-template.html +87 -229
- package/examples/portfolio-resume.html +121 -563
- package/examples/shopping/index.html +514 -327
- package/examples/shopping/nova-shop.css +984 -0
- package/examples/starlight.html +4 -3
- package/examples/travel/index.html +170 -13
- package/examples/video-streaming.html +10 -3
- package/package.json +1 -1
- package/src/defaults.js +1 -0
- package/src/generator.js +12 -3
- package/src/styles/quantum-animations.css +13 -13
- package/src/styles/quantum-base.css +106 -58
- package/src/styles/quantum-components.css +550 -265
- package/src/styles/starlight.css +327 -99
- package/dist/index.html +0 -232
package/src/styles/starlight.css
CHANGED
|
@@ -1,45 +1,31 @@
|
|
|
1
|
-
|
|
2
|
-
* QuantumCSS Theme Layer
|
|
3
|
-
* Theme: Starlight UI (Premium)
|
|
4
|
-
*
|
|
5
|
-
* ROLE:
|
|
6
|
-
* 1. Injects brand-specific aesthetics.
|
|
7
|
-
* 2. Maps brand tokens to semantic core layer.
|
|
8
|
-
* 3. Defines theme-specific layout extensions.
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
/* 1. Starlight Theme Layer (Brand Mapping) */
|
|
12
|
-
:root {
|
|
13
|
-
--q-color-primary: var(--q-color-starlight-blue);
|
|
14
|
-
--q-color-primary-hover: var(--q-color-starlight-peach);
|
|
15
|
-
--q-color-link: var(--q-color-starlight-blue);
|
|
16
|
-
--q-color-link-hover: var(--q-color-starlight-peach);
|
|
17
|
-
--q-gradient-primary: linear-gradient(135deg, var(--q-color-starlight-peach) 0%, var(--q-color-starlight-blue) 100%);
|
|
18
|
-
--q-color-text-inverse: #000;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
html[data-theme="light"] {
|
|
22
|
-
--q-color-text-inverse: #fff;
|
|
23
|
-
}
|
|
1
|
+
/* Starlight UI - Premium Components */
|
|
24
2
|
|
|
25
3
|
/* Links */
|
|
26
4
|
a {
|
|
27
|
-
color: var(--q-color-
|
|
5
|
+
color: var(--q-color-starlight-blue);
|
|
28
6
|
text-decoration: none;
|
|
29
|
-
transition: all var(--q-
|
|
7
|
+
transition: all var(--q-transition-base);
|
|
30
8
|
position: relative;
|
|
31
9
|
}
|
|
32
10
|
|
|
33
11
|
a:hover {
|
|
34
|
-
color: var(--q-color-
|
|
35
|
-
text-shadow: 0 0 8px
|
|
12
|
+
color: var(--q-color-starlight-peach);
|
|
13
|
+
text-shadow: 0 0 8px rgb(255 179 138 / 40%);
|
|
36
14
|
}
|
|
37
15
|
|
|
38
16
|
a:active {
|
|
39
17
|
transform: scale(0.98);
|
|
40
18
|
}
|
|
41
19
|
|
|
42
|
-
|
|
20
|
+
html[data-theme="light"] a {
|
|
21
|
+
color: var(--q-color-starlight-blue);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
html[data-theme="light"] a:hover {
|
|
25
|
+
color: var(--q-color-starlight-peach);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* 1. Starlight Card */
|
|
43
29
|
.starlight-card {
|
|
44
30
|
background: var(--q-color-surface);
|
|
45
31
|
border: 1px solid var(--q-color-border);
|
|
@@ -60,13 +46,191 @@ a:active {
|
|
|
60
46
|
/* ... existing code ... */
|
|
61
47
|
|
|
62
48
|
.nav-glass:hover {
|
|
63
|
-
background-color:
|
|
49
|
+
background-color: var(--q-color-border-strong);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.starlight-nav, .starlight-navbar {
|
|
53
|
+
position: sticky;
|
|
54
|
+
top: 0;
|
|
55
|
+
z-index: 1000;
|
|
56
|
+
background: color-mix(in srgb, var(--q-color-bg), transparent 10%);
|
|
57
|
+
backdrop-filter: blur(16px);
|
|
58
|
+
border-bottom: 1px solid var(--q-color-border);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.nav-container {
|
|
62
|
+
max-width: 1200px;
|
|
63
|
+
margin: 0 auto;
|
|
64
|
+
padding: 1.25rem 1.5rem;
|
|
65
|
+
display: flex;
|
|
66
|
+
justify-content: space-between;
|
|
67
|
+
align-items: center;
|
|
68
|
+
width: 100%;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.nav-desktop { display: none; }
|
|
72
|
+
@media (min-width: 768px) { .nav-desktop { display: flex; align-items: center; } }
|
|
73
|
+
|
|
74
|
+
.nav-list {
|
|
75
|
+
display: flex;
|
|
76
|
+
list-style: none;
|
|
77
|
+
gap: 2rem;
|
|
78
|
+
margin: 0;
|
|
79
|
+
padding: 0;
|
|
64
80
|
}
|
|
65
81
|
|
|
66
|
-
.
|
|
82
|
+
.nav-list.vertical {
|
|
83
|
+
flex-direction: column;
|
|
84
|
+
gap: 0.5rem;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.nav-link {
|
|
88
|
+
font-size: 0.875rem;
|
|
89
|
+
font-weight: 600;
|
|
90
|
+
color: var(--q-text-secondary);
|
|
91
|
+
transition: all 0.2s ease;
|
|
67
92
|
position: relative;
|
|
93
|
+
padding: 0.5rem 0;
|
|
94
|
+
display: inline-flex;
|
|
95
|
+
align-items: center;
|
|
96
|
+
text-decoration: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.nav-link:hover {
|
|
100
|
+
color: var(--q-color-starlight-blue);
|
|
68
101
|
}
|
|
69
102
|
|
|
103
|
+
.nav-link.active {
|
|
104
|
+
color: var(--q-color-starlight-blue);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.nav-list.vertical .nav-link {
|
|
108
|
+
width: 100%;
|
|
109
|
+
padding: 0.75rem 1rem;
|
|
110
|
+
border-radius: 0.5rem;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.nav-list.vertical .nav-link:hover {
|
|
114
|
+
background: var(--q-highlight-bg);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.nav-list.vertical .nav-link.active {
|
|
118
|
+
background: linear-gradient(90deg, color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%), transparent);
|
|
119
|
+
border-left: 3px solid var(--q-color-starlight-blue);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.nav-link::after {
|
|
123
|
+
content: '';
|
|
124
|
+
position: absolute;
|
|
125
|
+
bottom: 0;
|
|
126
|
+
left: 50%;
|
|
127
|
+
width: 0;
|
|
128
|
+
height: 2px;
|
|
129
|
+
background: var(--q-color-starlight-blue);
|
|
130
|
+
transition: all var(--q-duration-slow) var(--q-ease-in-out);
|
|
131
|
+
transform: translateX(-50%);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.nav-link:hover::after, .nav-link.active::after {
|
|
135
|
+
width: 80%;
|
|
136
|
+
box-shadow: 0 0 10px var(--q-color-starlight-glow);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
/* 10. Timeline Component */
|
|
141
|
+
.starlight-timeline {
|
|
142
|
+
position: relative;
|
|
143
|
+
padding: 2rem 0;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.starlight-timeline::before {
|
|
147
|
+
content: '';
|
|
148
|
+
position: absolute;
|
|
149
|
+
left: 0;
|
|
150
|
+
top: 0;
|
|
151
|
+
bottom: 0;
|
|
152
|
+
width: 2px;
|
|
153
|
+
background: linear-gradient(to bottom, var(--q-color-starlight-blue), transparent);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
@media (min-width: 768px) {
|
|
157
|
+
.starlight-timeline::before {
|
|
158
|
+
left: 50%;
|
|
159
|
+
transform: translateX(-50%);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.timeline-item {
|
|
164
|
+
position: relative;
|
|
165
|
+
margin-bottom: 4rem;
|
|
166
|
+
padding-left: 2.5rem;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
@media (min-width: 768px) {
|
|
170
|
+
.timeline-item {
|
|
171
|
+
width: 50%;
|
|
172
|
+
padding-left: 0;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.timeline-item:nth-child(odd) {
|
|
176
|
+
padding-right: 3.5rem;
|
|
177
|
+
text-align: right;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.timeline-item:nth-child(even) {
|
|
181
|
+
margin-left: 50%;
|
|
182
|
+
padding-left: 3.5rem;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.timeline-dot {
|
|
187
|
+
position: absolute;
|
|
188
|
+
left: -5px;
|
|
189
|
+
top: 0.5rem;
|
|
190
|
+
width: 12px;
|
|
191
|
+
height: 12px;
|
|
192
|
+
border-radius: 50%;
|
|
193
|
+
background: var(--q-color-starlight-blue);
|
|
194
|
+
box-shadow: 0 0 10px var(--q-color-starlight-glow);
|
|
195
|
+
z-index: 1;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
@media (min-width: 768px) {
|
|
199
|
+
.timeline-dot {
|
|
200
|
+
left: auto;
|
|
201
|
+
right: -6px;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.timeline-item:nth-child(even) .timeline-dot {
|
|
205
|
+
left: -6px;
|
|
206
|
+
right: auto;
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.timeline-content {
|
|
211
|
+
background: var(--q-color-surface);
|
|
212
|
+
border: 1px solid var(--q-color-border);
|
|
213
|
+
border-radius: var(--q-radius-xl);
|
|
214
|
+
padding: 1.5rem;
|
|
215
|
+
transition: all 0.3s ease;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.timeline-content:hover {
|
|
219
|
+
border-color: var(--q-color-starlight-blue);
|
|
220
|
+
transform: translateY(-2px);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.timeline-date {
|
|
224
|
+
font-size: 0.75rem;
|
|
225
|
+
font-weight: 900;
|
|
226
|
+
color: var(--q-color-starlight-blue);
|
|
227
|
+
text-transform: uppercase;
|
|
228
|
+
letter-spacing: 0.1em;
|
|
229
|
+
margin-bottom: 0.5rem;
|
|
230
|
+
display: block;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
|
|
70
234
|
html[data-theme="light"] .nav-glass:hover {
|
|
71
235
|
background-color: rgba(255, 255, 255, 0.98);
|
|
72
236
|
}
|
|
@@ -83,11 +247,11 @@ html[data-theme="light"] .starlight-card {
|
|
|
83
247
|
appearance: none;
|
|
84
248
|
width: 1.25rem;
|
|
85
249
|
height: 1.25rem;
|
|
86
|
-
background:
|
|
250
|
+
background: var(--q-color-border);
|
|
87
251
|
border: 1px solid rgb(255 255 255 / 20%);
|
|
88
252
|
border-radius: 0.375rem;
|
|
89
253
|
cursor: pointer;
|
|
90
|
-
transition: all
|
|
254
|
+
transition: all 0.2s ease;
|
|
91
255
|
display: inline-flex;
|
|
92
256
|
align-items: center;
|
|
93
257
|
justify-content: center;
|
|
@@ -142,7 +306,7 @@ html[data-theme="light"] .radio-starlight {
|
|
|
142
306
|
white-space: nowrap;
|
|
143
307
|
pointer-events: none;
|
|
144
308
|
opacity: 0;
|
|
145
|
-
transition: all
|
|
309
|
+
transition: all 0.2s ease;
|
|
146
310
|
z-index: 800;
|
|
147
311
|
box-shadow: 0 4px 15px rgb(0 0 0 / 40%);
|
|
148
312
|
}
|
|
@@ -158,6 +322,7 @@ html[data-theme="light"] .radio-starlight {
|
|
|
158
322
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
159
323
|
pointer-events: none;
|
|
160
324
|
z-index: 0;
|
|
325
|
+
background: var(--q-bg-primary);
|
|
161
326
|
overflow: hidden;
|
|
162
327
|
contain: strict;
|
|
163
328
|
}
|
|
@@ -167,6 +332,7 @@ html[data-theme="light"] .radio-starlight {
|
|
|
167
332
|
background: white;
|
|
168
333
|
border-radius: 50%;
|
|
169
334
|
opacity: 0.3;
|
|
335
|
+
z-index: -1;
|
|
170
336
|
animation: star-twinkle var(--q-duration, 3s) infinite ease-in-out;
|
|
171
337
|
will-change: transform, opacity;
|
|
172
338
|
backface-visibility: hidden;
|
|
@@ -194,7 +360,7 @@ html[data-theme="light"] .star {
|
|
|
194
360
|
.dialog-content {
|
|
195
361
|
background-color: rgb(10 10 20 / 98%);
|
|
196
362
|
backdrop-filter: blur(20px);
|
|
197
|
-
border: 1px solid
|
|
363
|
+
border: 1px solid var(--q-color-border-strong);
|
|
198
364
|
border-radius: 1.5rem;
|
|
199
365
|
padding: 2.5rem;
|
|
200
366
|
max-width: 90%;
|
|
@@ -209,7 +375,7 @@ html[data-theme="light"] .star {
|
|
|
209
375
|
background-color: rgb(10 10 20 / 98%);
|
|
210
376
|
backdrop-filter: blur(24px);
|
|
211
377
|
-webkit-backdrop-filter: blur(24px);
|
|
212
|
-
border: 1px solid
|
|
378
|
+
border: 1px solid var(--q-color-border-strong);
|
|
213
379
|
border-radius: 1.5rem;
|
|
214
380
|
padding: 3rem;
|
|
215
381
|
width: 100%;
|
|
@@ -229,7 +395,7 @@ html[data-theme="light"] .star {
|
|
|
229
395
|
|
|
230
396
|
.dialog-content::-webkit-scrollbar-track,
|
|
231
397
|
.starlight-dialog::-webkit-scrollbar-track {
|
|
232
|
-
background:
|
|
398
|
+
background: var(--q-color-border);
|
|
233
399
|
border-radius: 4px;
|
|
234
400
|
}
|
|
235
401
|
|
|
@@ -258,14 +424,14 @@ html[data-theme="light"] .starlight-dialog {
|
|
|
258
424
|
width: 2rem;
|
|
259
425
|
height: 2rem;
|
|
260
426
|
border-radius: 50%;
|
|
261
|
-
background:
|
|
262
|
-
border: 1px solid
|
|
427
|
+
background: var(--q-color-border);
|
|
428
|
+
border: 1px solid var(--q-color-border-strong);
|
|
263
429
|
color: white;
|
|
264
430
|
display: flex;
|
|
265
431
|
align-items: center;
|
|
266
432
|
justify-content: center;
|
|
267
433
|
cursor: pointer;
|
|
268
|
-
transition: all
|
|
434
|
+
transition: all 0.2s;
|
|
269
435
|
padding: 0;
|
|
270
436
|
}
|
|
271
437
|
|
|
@@ -307,7 +473,7 @@ html[data-theme="light"] .dialog-content {
|
|
|
307
473
|
background-color: rgba(8, 8, 26, 0.8);
|
|
308
474
|
backdrop-filter: blur(16px);
|
|
309
475
|
-webkit-backdrop-filter: blur(16px);
|
|
310
|
-
border: 1px solid
|
|
476
|
+
border: 1px solid var(--q-color-border-strong);
|
|
311
477
|
border-radius: 0.75rem;
|
|
312
478
|
padding: 0.5rem;
|
|
313
479
|
margin-top: 0.5rem;
|
|
@@ -317,7 +483,7 @@ html[data-theme="light"] .dialog-content {
|
|
|
317
483
|
opacity: 0;
|
|
318
484
|
visibility: hidden;
|
|
319
485
|
transform: translateY(10px);
|
|
320
|
-
transition: all
|
|
486
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
321
487
|
pointer-events: none;
|
|
322
488
|
will-change: backdrop-filter, transform, opacity;
|
|
323
489
|
}
|
|
@@ -338,7 +504,7 @@ html[data-theme="light"] .dialog-content {
|
|
|
338
504
|
padding: 0.625rem 1rem;
|
|
339
505
|
border-radius: 0.5rem;
|
|
340
506
|
color: var(--q-text-primary, rgba(255, 255, 255, 0.7));
|
|
341
|
-
transition: all
|
|
507
|
+
transition: all 0.2s ease;
|
|
342
508
|
text-align: left;
|
|
343
509
|
background: transparent;
|
|
344
510
|
border: none;
|
|
@@ -368,12 +534,18 @@ html[data-theme="light"] .dropdown-item:hover {
|
|
|
368
534
|
}
|
|
369
535
|
|
|
370
536
|
/* 7. Input & Glass Fixes */
|
|
371
|
-
.input-starlight, .textarea-starlight {
|
|
537
|
+
.input-starlight, .textarea-starlight, .select-starlight {
|
|
372
538
|
background-color: rgb(255 255 255 / 4%);
|
|
373
539
|
border: 1px solid rgb(255 255 255 / 15%);
|
|
374
540
|
border-radius: 0.75rem;
|
|
375
541
|
color: inherit;
|
|
376
542
|
width: 100%;
|
|
543
|
+
padding: 0.75rem 1.25rem;
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
.select-starlight:hover {
|
|
547
|
+
background-color: rgb(255 255 255 / 8%);
|
|
548
|
+
border-color: var(--q-color-starlight-blue);
|
|
377
549
|
}
|
|
378
550
|
|
|
379
551
|
textarea.input-starlight, .textarea-starlight {
|
|
@@ -382,11 +554,25 @@ textarea.input-starlight, .textarea-starlight {
|
|
|
382
554
|
}
|
|
383
555
|
|
|
384
556
|
html[data-theme="light"] .input-starlight,
|
|
385
|
-
html[data-theme="light"] .textarea-starlight
|
|
557
|
+
html[data-theme="light"] .textarea-starlight,
|
|
558
|
+
html[data-theme="light"] .select-starlight {
|
|
386
559
|
background-color: #fff;
|
|
387
560
|
border-color: #cbd5e1;
|
|
388
561
|
}
|
|
389
562
|
|
|
563
|
+
.input-starlight:focus, .textarea-starlight:focus, .select-starlight:focus {
|
|
564
|
+
outline: none;
|
|
565
|
+
box-shadow: 0 0 0 2px var(--q-color-starlight-deep), 0 0 0 4px var(--q-color-starlight-blue);
|
|
566
|
+
border-color: var(--q-color-starlight-blue);
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
html[data-theme="light"] .input-starlight:focus,
|
|
570
|
+
html[data-theme="light"] .textarea-starlight:focus,
|
|
571
|
+
html[data-theme="light"] .select-starlight:focus {
|
|
572
|
+
box-shadow: 0 0 0 2px var(--q-light-bg), 0 0 0 4px rgb(59 130 246 / 40%);
|
|
573
|
+
border-color: #3b82f6;
|
|
574
|
+
}
|
|
575
|
+
|
|
390
576
|
html[data-theme="light"] .glass {
|
|
391
577
|
background-color: rgba(255, 255, 255, 0.5);
|
|
392
578
|
border-color: rgba(0, 0, 0, 0.1);
|
|
@@ -397,15 +583,15 @@ html[data-theme="light"] .glass {
|
|
|
397
583
|
background: rgb(0 0 0 / 40%);
|
|
398
584
|
backdrop-filter: blur(20px);
|
|
399
585
|
-webkit-backdrop-filter: blur(20px);
|
|
400
|
-
border: 1px solid
|
|
586
|
+
border: 1px solid var(--q-color-border-strong);
|
|
401
587
|
border-radius: var(--q-radius-xl);
|
|
402
588
|
overflow: hidden;
|
|
403
589
|
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 50%);
|
|
404
590
|
}
|
|
405
591
|
|
|
406
592
|
.code-window-header {
|
|
407
|
-
background:
|
|
408
|
-
border-bottom: 1px solid
|
|
593
|
+
background: var(--q-color-border);
|
|
594
|
+
border-bottom: 1px solid var(--q-color-border);
|
|
409
595
|
padding: 1rem 1.5rem;
|
|
410
596
|
display: flex;
|
|
411
597
|
align-items: center;
|
|
@@ -424,6 +610,10 @@ html[data-theme="light"] .glass {
|
|
|
424
610
|
opacity: 0.6;
|
|
425
611
|
}
|
|
426
612
|
|
|
613
|
+
.code-window-dot:nth-child(1) { background: #ff5f56; }
|
|
614
|
+
.code-window-dot:nth-child(2) { background: #ffbd2e; }
|
|
615
|
+
.code-window-dot:nth-child(3) { background: #27c93f; }
|
|
616
|
+
|
|
427
617
|
.code-window-title {
|
|
428
618
|
font-size: 0.65rem;
|
|
429
619
|
font-weight: 800;
|
|
@@ -522,15 +712,49 @@ html[data-theme="light"] .accordion-starlight .accordion-content {
|
|
|
522
712
|
}
|
|
523
713
|
|
|
524
714
|
/* 11. Search Input with Icon */
|
|
525
|
-
.search-container {
|
|
715
|
+
.search-container, .starlight-search {
|
|
526
716
|
position: relative;
|
|
527
717
|
display: block;
|
|
528
718
|
width: 100%;
|
|
719
|
+
border-radius: var(--q-radius-xl);
|
|
720
|
+
transition: all var(--q-duration-base) var(--q-ease-in-out);
|
|
721
|
+
overflow: visible !important;
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
.search-container:focus-within, .starlight-search:focus-within {
|
|
725
|
+
box-shadow: 0 0 0 2px var(--q-color-starlight-deep), 0 0 0 4px var(--q-color-starlight-blue);
|
|
726
|
+
border-color: var(--q-color-starlight-blue);
|
|
727
|
+
outline: none;
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
html[data-theme="light"] .search-container:focus-within,
|
|
731
|
+
html[data-theme="light"] .starlight-search:focus-within {
|
|
732
|
+
box-shadow: 0 0 0 2px var(--q-light-bg), 0 0 0 4px rgb(59 130 246 / 40%);
|
|
733
|
+
border-color: #3b82f6;
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
.search-container input:focus, .starlight-search input:focus {
|
|
737
|
+
box-shadow: none !important;
|
|
738
|
+
outline: none !important;
|
|
529
739
|
}
|
|
530
740
|
|
|
531
741
|
.search-input {
|
|
532
|
-
padding-left: 3rem !important;
|
|
533
742
|
width: 100%;
|
|
743
|
+
border-radius: inherit;
|
|
744
|
+
padding: 0.75rem 1.25rem;
|
|
745
|
+
background: transparent;
|
|
746
|
+
border: none;
|
|
747
|
+
}
|
|
748
|
+
|
|
749
|
+
html[data-theme="light"] .search-container,
|
|
750
|
+
html[data-theme="light"] .starlight-search {
|
|
751
|
+
background-color: #fff;
|
|
752
|
+
border: 1px solid #cbd5e1;
|
|
753
|
+
}
|
|
754
|
+
|
|
755
|
+
.search-container.has-icon .search-input,
|
|
756
|
+
.starlight-search.has-icon .search-input {
|
|
757
|
+
padding-left: 3rem !important;
|
|
534
758
|
}
|
|
535
759
|
|
|
536
760
|
.search-icon {
|
|
@@ -591,7 +815,8 @@ html[data-theme="light"] .search-icon {
|
|
|
591
815
|
align-items: flex-end;
|
|
592
816
|
padding: 1rem;
|
|
593
817
|
opacity: 0;
|
|
594
|
-
transition: opacity
|
|
818
|
+
transition: opacity 0.3s ease;
|
|
819
|
+
color: white !important;
|
|
595
820
|
}
|
|
596
821
|
|
|
597
822
|
.gallery-item:hover .gallery-overlay {
|
|
@@ -648,7 +873,7 @@ html[data-theme="light"] .stat-value {
|
|
|
648
873
|
background: rgba(255, 255, 255, 0.15);
|
|
649
874
|
backdrop-filter: blur(16px);
|
|
650
875
|
-webkit-backdrop-filter: blur(16px);
|
|
651
|
-
border-bottom: 1px solid
|
|
876
|
+
border-bottom: 1px solid var(--q-color-border-strong);
|
|
652
877
|
background-clip: border-box;
|
|
653
878
|
display: flex;
|
|
654
879
|
flex-direction: column;
|
|
@@ -696,7 +921,7 @@ html[data-theme="light"] .nav-glass {
|
|
|
696
921
|
font-size: 0.875rem;
|
|
697
922
|
font-weight: 500;
|
|
698
923
|
color: rgb(255 255 255 / 70%);
|
|
699
|
-
transition: all
|
|
924
|
+
transition: all 0.3s;
|
|
700
925
|
position: relative;
|
|
701
926
|
padding: 0.5rem 0;
|
|
702
927
|
display: inline-flex;
|
|
@@ -715,7 +940,7 @@ html[data-theme="light"] .nav-glass {
|
|
|
715
940
|
}
|
|
716
941
|
|
|
717
942
|
.nav-list.vertical .nav-link:hover {
|
|
718
|
-
background:
|
|
943
|
+
background: var(--q-color-border);
|
|
719
944
|
color: var(--q-color-starlight-blue);
|
|
720
945
|
}
|
|
721
946
|
|
|
@@ -727,7 +952,7 @@ html[data-theme="light"] .nav-glass {
|
|
|
727
952
|
width: 0;
|
|
728
953
|
height: 2px;
|
|
729
954
|
background: var(--q-color-starlight-blue);
|
|
730
|
-
transition: all
|
|
955
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
731
956
|
box-shadow: 0 0 10px var(--q-color-starlight-glow);
|
|
732
957
|
transform: translateX(-50%);
|
|
733
958
|
}
|
|
@@ -754,11 +979,11 @@ html[data-theme="light"] .nav-link:hover {
|
|
|
754
979
|
align-items: center;
|
|
755
980
|
gap: 0.4rem;
|
|
756
981
|
cursor: pointer;
|
|
757
|
-
background:
|
|
758
|
-
border: 1px solid
|
|
982
|
+
background: var(--q-color-border);
|
|
983
|
+
border: 1px solid var(--q-color-border-strong);
|
|
759
984
|
border-radius: 0.5rem;
|
|
760
985
|
padding: 0.5rem;
|
|
761
|
-
transition: all
|
|
986
|
+
transition: all 0.3s;
|
|
762
987
|
}
|
|
763
988
|
|
|
764
989
|
html[data-theme="light"] .hamburger {
|
|
@@ -767,7 +992,7 @@ html[data-theme="light"] .hamburger {
|
|
|
767
992
|
}
|
|
768
993
|
|
|
769
994
|
.hamburger:hover {
|
|
770
|
-
background:
|
|
995
|
+
background: var(--q-color-border-strong);
|
|
771
996
|
border-color: var(--q-color-starlight-blue);
|
|
772
997
|
}
|
|
773
998
|
|
|
@@ -780,7 +1005,7 @@ html[data-theme="light"] .hamburger:hover {
|
|
|
780
1005
|
height: 2px;
|
|
781
1006
|
background: white;
|
|
782
1007
|
border-radius: 2px;
|
|
783
|
-
transition: all
|
|
1008
|
+
transition: all 0.3s;
|
|
784
1009
|
transform-origin: center;
|
|
785
1010
|
}
|
|
786
1011
|
|
|
@@ -802,13 +1027,14 @@ html[data-theme="light"] .hamburger span {
|
|
|
802
1027
|
background: rgba(8, 8, 26, 0.95);
|
|
803
1028
|
backdrop-filter: blur(20px);
|
|
804
1029
|
-webkit-backdrop-filter: blur(20px);
|
|
805
|
-
border-top: 1px solid
|
|
1030
|
+
border-top: 1px solid var(--q-color-border);
|
|
806
1031
|
padding: 0 2rem;
|
|
807
1032
|
max-height: 0;
|
|
808
1033
|
overflow: hidden;
|
|
809
|
-
transition: all
|
|
1034
|
+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
810
1035
|
opacity: 0;
|
|
811
1036
|
pointer-events: none;
|
|
1037
|
+
display: none;
|
|
812
1038
|
}
|
|
813
1039
|
|
|
814
1040
|
.nav-menu-mobile.active {
|
|
@@ -853,7 +1079,7 @@ html[data-theme="light"] .nav-menu-mobile {
|
|
|
853
1079
|
.nav-list.vertical .dropdown-item {
|
|
854
1080
|
padding: 0.5rem 1rem;
|
|
855
1081
|
font-size: 0.825rem;
|
|
856
|
-
border-left: 1px solid
|
|
1082
|
+
border-left: 1px solid var(--q-color-border-strong);
|
|
857
1083
|
border-radius: 0;
|
|
858
1084
|
}
|
|
859
1085
|
|
|
@@ -882,7 +1108,7 @@ html[data-theme="light"] .nav-menu-mobile {
|
|
|
882
1108
|
width: 280px !important;
|
|
883
1109
|
min-width: 280px !important;
|
|
884
1110
|
border-bottom: none;
|
|
885
|
-
border-right: 1px solid
|
|
1111
|
+
border-right: 1px solid var(--q-color-border-strong);
|
|
886
1112
|
padding: 2.5rem 1.5rem;
|
|
887
1113
|
align-items: flex-start;
|
|
888
1114
|
justify-content: flex-start;
|
|
@@ -916,6 +1142,7 @@ html[data-theme="light"] .starlight-nav.vertical {
|
|
|
916
1142
|
line-height: normal;
|
|
917
1143
|
padding-top: 0.5rem !important;
|
|
918
1144
|
padding-bottom: 0.5rem !important;
|
|
1145
|
+
padding-left: 1.25rem !important;
|
|
919
1146
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
|
|
920
1147
|
background-repeat: no-repeat;
|
|
921
1148
|
background-position: right 1rem center;
|
|
@@ -931,7 +1158,7 @@ html[data-theme="light"] .select-starlight {
|
|
|
931
1158
|
appearance: none;
|
|
932
1159
|
width: 100%;
|
|
933
1160
|
height: 6px;
|
|
934
|
-
background:
|
|
1161
|
+
background: var(--q-color-border-strong);
|
|
935
1162
|
border-radius: 3px;
|
|
936
1163
|
outline: none;
|
|
937
1164
|
}
|
|
@@ -948,7 +1175,7 @@ html[data-theme="light"] .range-starlight {
|
|
|
948
1175
|
border-radius: 50%;
|
|
949
1176
|
cursor: pointer;
|
|
950
1177
|
box-shadow: 0 0 10px var(--q-color-starlight-glow);
|
|
951
|
-
transition: all
|
|
1178
|
+
transition: all 0.2s;
|
|
952
1179
|
}
|
|
953
1180
|
|
|
954
1181
|
.range-starlight:-webkit-slider-thumb:hover {
|
|
@@ -973,8 +1200,8 @@ html[data-theme="light"] .range-starlight {
|
|
|
973
1200
|
}
|
|
974
1201
|
|
|
975
1202
|
.toggle-starlight .toggle-slider {
|
|
976
|
-
background:
|
|
977
|
-
border: 1px solid
|
|
1203
|
+
background: var(--q-color-border-strong);
|
|
1204
|
+
border: 1px solid var(--q-color-border-strong);
|
|
978
1205
|
}
|
|
979
1206
|
|
|
980
1207
|
html[data-theme="light"] .toggle-starlight .toggle-slider {
|
|
@@ -1067,10 +1294,10 @@ html[data-theme="light"] .starlight-loading {
|
|
|
1067
1294
|
}
|
|
1068
1295
|
|
|
1069
1296
|
::-webkit-scrollbar-thumb {
|
|
1070
|
-
background:
|
|
1071
|
-
border: 1px solid
|
|
1297
|
+
background: var(--q-color-border-strong);
|
|
1298
|
+
border: 1px solid var(--q-color-border);
|
|
1072
1299
|
border-radius: 10px;
|
|
1073
|
-
transition: all
|
|
1300
|
+
transition: all 0.3s;
|
|
1074
1301
|
}
|
|
1075
1302
|
|
|
1076
1303
|
::-webkit-scrollbar-thumb:hover {
|
|
@@ -1094,7 +1321,7 @@ html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
|
|
|
1094
1321
|
/* Firefox Support */
|
|
1095
1322
|
* {
|
|
1096
1323
|
scrollbar-width: thin;
|
|
1097
|
-
scrollbar-color:
|
|
1324
|
+
scrollbar-color: var(--q-color-border-strong) transparent;
|
|
1098
1325
|
}
|
|
1099
1326
|
|
|
1100
1327
|
html[data-theme="light"] * {
|
|
@@ -1119,8 +1346,8 @@ html[data-theme="light"] * {
|
|
|
1119
1346
|
}
|
|
1120
1347
|
|
|
1121
1348
|
.btn-starlight {
|
|
1122
|
-
background: var(--q-
|
|
1123
|
-
color:
|
|
1349
|
+
background: linear-gradient(135deg, var(--q-color-starlight-peach) 0%, var(--q-color-starlight-blue) 100%);
|
|
1350
|
+
color: #000;
|
|
1124
1351
|
font-weight: 700;
|
|
1125
1352
|
border: none;
|
|
1126
1353
|
border-radius: 0.5rem;
|
|
@@ -1128,8 +1355,8 @@ html[data-theme="light"] * {
|
|
|
1128
1355
|
align-items: center;
|
|
1129
1356
|
justify-content: center;
|
|
1130
1357
|
cursor: pointer;
|
|
1131
|
-
transition: all
|
|
1132
|
-
box-shadow: 0 0 20px
|
|
1358
|
+
transition: all 0.2s ease;
|
|
1359
|
+
box-shadow: 0 0 20px rgb(0 212 255 / 30%);
|
|
1133
1360
|
text-decoration: none;
|
|
1134
1361
|
}
|
|
1135
1362
|
|
|
@@ -1165,7 +1392,7 @@ html[data-theme="light"] * {
|
|
|
1165
1392
|
background: rgb(0 0 0 / 40%);
|
|
1166
1393
|
backdrop-filter: blur(24px);
|
|
1167
1394
|
-webkit-backdrop-filter: blur(24px);
|
|
1168
|
-
border-right: 1px solid
|
|
1395
|
+
border-right: 1px solid var(--q-color-border-strong);
|
|
1169
1396
|
padding: 1rem;
|
|
1170
1397
|
overflow-y: auto;
|
|
1171
1398
|
}
|
|
@@ -1174,10 +1401,10 @@ html[data-theme="light"] * {
|
|
|
1174
1401
|
display: flex;
|
|
1175
1402
|
flex-direction: column;
|
|
1176
1403
|
height: 100%;
|
|
1177
|
-
background:
|
|
1404
|
+
background: var(--q-color-border);
|
|
1178
1405
|
backdrop-filter: blur(16px);
|
|
1179
1406
|
-webkit-backdrop-filter: blur(16px);
|
|
1180
|
-
border-right: 1px solid
|
|
1407
|
+
border-right: 1px solid var(--q-color-border-strong);
|
|
1181
1408
|
overflow-y: auto;
|
|
1182
1409
|
}
|
|
1183
1410
|
|
|
@@ -1196,7 +1423,7 @@ html[data-theme="light"] * {
|
|
|
1196
1423
|
background: rgb(0 0 0 / 40%);
|
|
1197
1424
|
backdrop-filter: blur(24px);
|
|
1198
1425
|
-webkit-backdrop-filter: blur(24px);
|
|
1199
|
-
border-right: 1px solid
|
|
1426
|
+
border-right: 1px solid var(--q-color-border-strong);
|
|
1200
1427
|
padding: 1rem;
|
|
1201
1428
|
overflow-y: auto;
|
|
1202
1429
|
}
|
|
@@ -1216,7 +1443,7 @@ html[data-theme="light"] * {
|
|
|
1216
1443
|
background: rgb(0 0 0 / 40%);
|
|
1217
1444
|
backdrop-filter: blur(24px);
|
|
1218
1445
|
-webkit-backdrop-filter: blur(24px);
|
|
1219
|
-
border-top: 1px solid
|
|
1446
|
+
border-top: 1px solid var(--q-color-border-strong);
|
|
1220
1447
|
}
|
|
1221
1448
|
|
|
1222
1449
|
/* Chat 2-column layout */
|
|
@@ -1227,7 +1454,7 @@ html[data-theme="light"] * {
|
|
|
1227
1454
|
background: rgb(0 0 0 / 40%);
|
|
1228
1455
|
backdrop-filter: blur(24px);
|
|
1229
1456
|
-webkit-backdrop-filter: blur(24px);
|
|
1230
|
-
border-right: 1px solid
|
|
1457
|
+
border-right: 1px solid var(--q-color-border-strong);
|
|
1231
1458
|
overflow: hidden;
|
|
1232
1459
|
}
|
|
1233
1460
|
|
|
@@ -1246,7 +1473,7 @@ html[data-theme="light"] * {
|
|
|
1246
1473
|
background: rgb(0 0 0 / 40%);
|
|
1247
1474
|
backdrop-filter: blur(24px);
|
|
1248
1475
|
-webkit-backdrop-filter: blur(24px);
|
|
1249
|
-
border-right: 1px solid
|
|
1476
|
+
border-right: 1px solid var(--q-color-border-strong);
|
|
1250
1477
|
padding: 1rem;
|
|
1251
1478
|
overflow-y: auto;
|
|
1252
1479
|
}
|
|
@@ -1266,7 +1493,7 @@ html[data-theme="light"] * {
|
|
|
1266
1493
|
background: rgb(0 0 0 / 40%);
|
|
1267
1494
|
backdrop-filter: blur(24px);
|
|
1268
1495
|
-webkit-backdrop-filter: blur(24px);
|
|
1269
|
-
border-right: 1px solid
|
|
1496
|
+
border-right: 1px solid var(--q-color-border-strong);
|
|
1270
1497
|
padding: 1rem;
|
|
1271
1498
|
overflow-y: auto;
|
|
1272
1499
|
}
|
|
@@ -1337,7 +1564,7 @@ html[data-theme="light"] * {
|
|
|
1337
1564
|
}
|
|
1338
1565
|
|
|
1339
1566
|
.starlight-stat:hover {
|
|
1340
|
-
background:
|
|
1567
|
+
background: var(--q-color-border);
|
|
1341
1568
|
border-color: rgb(255 255 255 / 12%);
|
|
1342
1569
|
}
|
|
1343
1570
|
|
|
@@ -1354,8 +1581,8 @@ html[data-theme="light"] * {
|
|
|
1354
1581
|
width: 2.5rem;
|
|
1355
1582
|
height: 2.5rem;
|
|
1356
1583
|
border-radius: var(--q-radius-lg);
|
|
1357
|
-
background:
|
|
1358
|
-
color: var(--q-color-
|
|
1584
|
+
background: rgb(0 212 255 / 15%);
|
|
1585
|
+
color: var(--q-color-starlight-blue);
|
|
1359
1586
|
}
|
|
1360
1587
|
|
|
1361
1588
|
.starlight-stat-icon-green { background: rgb(16 185 129 / 15%); color: #10b981; }
|
|
@@ -1377,7 +1604,7 @@ html[data-theme="light"] * {
|
|
|
1377
1604
|
.starlight-stat-value {
|
|
1378
1605
|
font-size: 1.75rem;
|
|
1379
1606
|
font-weight: 700;
|
|
1380
|
-
color: var(--q-color-
|
|
1607
|
+
color: var(--q-color-starlight-blue);
|
|
1381
1608
|
}
|
|
1382
1609
|
|
|
1383
1610
|
.starlight-stat-label {
|
|
@@ -1450,8 +1677,8 @@ html[data-theme="light"] * {
|
|
|
1450
1677
|
width: 2.5rem;
|
|
1451
1678
|
height: 2.5rem;
|
|
1452
1679
|
border-radius: 50%;
|
|
1453
|
-
background:
|
|
1454
|
-
border: 1px solid
|
|
1680
|
+
background: var(--q-color-border);
|
|
1681
|
+
border: 1px solid var(--q-color-border-strong);
|
|
1455
1682
|
color: inherit;
|
|
1456
1683
|
cursor: pointer;
|
|
1457
1684
|
transition: all 0.3s ease;
|
|
@@ -1459,7 +1686,7 @@ html[data-theme="light"] * {
|
|
|
1459
1686
|
}
|
|
1460
1687
|
|
|
1461
1688
|
.starlight-theme-toggle:hover {
|
|
1462
|
-
background:
|
|
1689
|
+
background: var(--q-color-border-strong);
|
|
1463
1690
|
transform: scale(1.05);
|
|
1464
1691
|
}
|
|
1465
1692
|
|
|
@@ -1480,7 +1707,7 @@ html[data-theme="light"] * {
|
|
|
1480
1707
|
border: none;
|
|
1481
1708
|
color: inherit;
|
|
1482
1709
|
cursor: pointer;
|
|
1483
|
-
transition: all
|
|
1710
|
+
transition: all 0.2s ease;
|
|
1484
1711
|
}
|
|
1485
1712
|
|
|
1486
1713
|
.starlight-notification:hover {
|
|
@@ -1538,7 +1765,7 @@ html[data-theme="light"] * {
|
|
|
1538
1765
|
.starlight-table td {
|
|
1539
1766
|
padding: 0.875rem 1.25rem;
|
|
1540
1767
|
text-align: left;
|
|
1541
|
-
border-bottom: 1px solid
|
|
1768
|
+
border-bottom: 1px solid var(--q-color-border);
|
|
1542
1769
|
}
|
|
1543
1770
|
|
|
1544
1771
|
.starlight-table th {
|
|
@@ -1577,7 +1804,7 @@ html[data-theme="light"] * {
|
|
|
1577
1804
|
align-items: center;
|
|
1578
1805
|
justify-content: space-between;
|
|
1579
1806
|
padding: 1rem 1.25rem;
|
|
1580
|
-
border-bottom: 1px solid
|
|
1807
|
+
border-bottom: 1px solid var(--q-color-border);
|
|
1581
1808
|
}
|
|
1582
1809
|
|
|
1583
1810
|
.starlight-chart-title {
|
|
@@ -1599,7 +1826,7 @@ html[data-theme="light"] * {
|
|
|
1599
1826
|
border-radius: var(--q-radius-md);
|
|
1600
1827
|
color: rgb(255 255 255 / 60%);
|
|
1601
1828
|
cursor: pointer;
|
|
1602
|
-
transition: all
|
|
1829
|
+
transition: all 0.2s ease;
|
|
1603
1830
|
}
|
|
1604
1831
|
|
|
1605
1832
|
.starlight-chart-tab:hover {
|
|
@@ -1659,7 +1886,7 @@ html[data-theme="light"] * {
|
|
|
1659
1886
|
width: 100%;
|
|
1660
1887
|
height: 100%;
|
|
1661
1888
|
object-fit: cover;
|
|
1662
|
-
transition: transform
|
|
1889
|
+
transition: transform 0.5s ease;
|
|
1663
1890
|
}
|
|
1664
1891
|
|
|
1665
1892
|
.starlight-gallery-item:hover img {
|
|
@@ -1674,7 +1901,8 @@ html[data-theme="light"] * {
|
|
|
1674
1901
|
padding: 1rem;
|
|
1675
1902
|
background: linear-gradient(to top, rgb(0 0 0 / 80%), transparent);
|
|
1676
1903
|
opacity: 0;
|
|
1677
|
-
transition: opacity
|
|
1904
|
+
transition: opacity 0.3s ease;
|
|
1905
|
+
color: white !important;
|
|
1678
1906
|
}
|
|
1679
1907
|
|
|
1680
1908
|
.starlight-gallery-item:hover .starlight-gallery-overlay {
|
|
@@ -1691,7 +1919,7 @@ html[data-theme="light"] * {
|
|
|
1691
1919
|
.starlight-progress-bar {
|
|
1692
1920
|
flex: 1;
|
|
1693
1921
|
height: 0.5rem;
|
|
1694
|
-
background:
|
|
1922
|
+
background: var(--q-color-border-strong);
|
|
1695
1923
|
border-radius: 9999px;
|
|
1696
1924
|
overflow: hidden;
|
|
1697
1925
|
}
|
|
@@ -1700,7 +1928,7 @@ html[data-theme="light"] * {
|
|
|
1700
1928
|
height: 100%;
|
|
1701
1929
|
background: linear-gradient(90deg, var(--q-color-starlight-blue), var(--q-color-starlight-peach));
|
|
1702
1930
|
border-radius: 9999px;
|
|
1703
|
-
transition: width
|
|
1931
|
+
transition: width 0.5s ease;
|
|
1704
1932
|
}
|
|
1705
1933
|
|
|
1706
1934
|
.starlight-progress-value {
|
|
@@ -1727,7 +1955,7 @@ html[data-theme="light"] * {
|
|
|
1727
1955
|
border: none;
|
|
1728
1956
|
color: inherit;
|
|
1729
1957
|
cursor: pointer;
|
|
1730
|
-
transition: all
|
|
1958
|
+
transition: all 0.2s ease;
|
|
1731
1959
|
}
|
|
1732
1960
|
|
|
1733
1961
|
.starlight-player-btn:hover {
|