@howssatoshi/quantumcss 1.8.0 → 1.11.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/README.md +11 -10
- package/dist/quantum.min.css +10 -1
- package/examples/admin-panel.html +317 -600
- package/examples/analytics-dashboard.html +136 -299
- package/examples/blog.css +297 -0
- package/examples/blog.html +216 -0
- package/examples/chat-messaging.html +43 -70
- package/examples/email-client.css +582 -0
- package/examples/email-client.html +432 -0
- package/examples/gaming-portal.css +352 -0
- package/examples/gaming-portal.html +239 -0
- package/examples/images/eric.png +0 -0
- package/examples/index.html +342 -259
- package/examples/kitchen-sink.html +332 -94
- package/examples/music-streaming.html +32 -91
- package/examples/news.html +199 -0
- package/examples/nova-shop.css +984 -0
- package/examples/portfolio.html +235 -0
- package/examples/shopping.html +812 -0
- package/examples/starlight.html +11 -9
- package/examples/task.md +12 -0
- package/examples/travel.html +514 -0
- package/examples/video-streaming.html +310 -92
- package/package.json +9 -3
- package/src/cli.js +5 -5
- package/src/defaults.js +19 -16
- package/src/generator.js +12 -3
- package/src/starlight.js +20 -15
- package/src/styles/quantum-animations.css +13 -13
- package/src/styles/quantum-base.css +110 -58
- package/src/styles/quantum-components.css +2379 -349
- package/src/styles/quantum-icons.css +345 -0
- package/src/styles/starlight.css +2702 -1054
- package/dist/index.html +0 -232
- package/dist/quantum.css +0 -2374
- package/examples/blog-template.html +0 -287
- package/examples/email-template.html +0 -712
- package/examples/gaming-template.html +0 -340
- package/examples/gradient-test.html +0 -124
- package/examples/news-template.html +0 -317
- package/examples/portfolio-resume.html +0 -647
- package/examples/shopping/images/headset.jpg +0 -0
- package/examples/shopping/images/sneakers.jpg +0 -0
- package/examples/shopping/images/windbreaker.jpg +0 -0
- package/examples/shopping/index.html +0 -338
- package/examples/theme-test.html +0 -159
- package/examples/travel/index.html +0 -275
- package/examples/verify_fixes.html +0 -52
- package/examples/verify_presets.html +0 -32
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* QuantumCSS Core
|
|
3
|
-
* Layer: Components (Brand Neutral)
|
|
4
|
-
*
|
|
5
|
-
* RULES:
|
|
6
|
-
* 1. Components MUST ONLY use semantic tokens.
|
|
7
|
-
* 2. NO hardcoded colors, beziers, or brand tokens.
|
|
8
|
-
* 3. Layout and structural logic only.
|
|
9
|
-
*/
|
|
10
1
|
|
|
11
2
|
.group:hover .group-hover\:opacity-100 { opacity: 1; }
|
|
12
3
|
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
|
|
@@ -21,7 +12,7 @@
|
|
|
21
12
|
padding: var(--q-space-2) var(--q-space-4);
|
|
22
13
|
border-radius: var(--q-radius-md);
|
|
23
14
|
font-weight: 500;
|
|
24
|
-
transition: all var(--q-duration-
|
|
15
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
25
16
|
cursor: pointer;
|
|
26
17
|
border: 1px solid transparent;
|
|
27
18
|
text-decoration: none;
|
|
@@ -46,20 +37,20 @@
|
|
|
46
37
|
}
|
|
47
38
|
|
|
48
39
|
.btn-secondary {
|
|
49
|
-
background-color:
|
|
50
|
-
color: var(--q-
|
|
40
|
+
background-color: rgb(255 255 255 / 8%);
|
|
41
|
+
color: var(--q-text-primary) !important;
|
|
51
42
|
border: 0;
|
|
52
43
|
backdrop-filter: blur(12px);
|
|
53
44
|
-webkit-backdrop-filter: blur(12px);
|
|
54
45
|
}
|
|
55
46
|
|
|
56
47
|
.btn-secondary:hover {
|
|
57
|
-
background-color:
|
|
48
|
+
background-color: rgb(255 255 255 / 10%);
|
|
58
49
|
}
|
|
59
50
|
|
|
60
51
|
html[data-theme="light"] .btn-secondary {
|
|
61
|
-
background-color:
|
|
62
|
-
color:
|
|
52
|
+
background-color: rgb(0 0 0 / 3%);
|
|
53
|
+
color: #1e293b !important;
|
|
63
54
|
border: 0;
|
|
64
55
|
}
|
|
65
56
|
|
|
@@ -110,23 +101,46 @@ html[data-theme="light"] .btn-secondary {
|
|
|
110
101
|
|
|
111
102
|
/* Card Component */
|
|
112
103
|
.card {
|
|
113
|
-
background-color: var(--q-
|
|
114
|
-
color: var(--q-
|
|
115
|
-
border: 1px solid var(--q-
|
|
104
|
+
background-color: var(--q-card-bg);
|
|
105
|
+
color: var(--q-text-primary);
|
|
106
|
+
border: 1px solid var(--q-card-border);
|
|
116
107
|
border-radius: var(--q-radius-lg);
|
|
117
108
|
box-shadow: var(--q-shadow-md);
|
|
118
109
|
overflow: hidden;
|
|
119
|
-
transition: all var(--q-duration-
|
|
110
|
+
transition: all var(--q-duration-200) var(--q-ease-in-out);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
html[data-theme="light"] .card {
|
|
114
|
+
background-color: var(--q-light-card-bg, white);
|
|
115
|
+
color: var(--q-light-text, #1e293b);
|
|
120
116
|
}
|
|
121
117
|
|
|
122
118
|
.card:hover {
|
|
123
119
|
box-shadow: var(--q-shadow-lg);
|
|
124
|
-
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.card-premium {
|
|
123
|
+
background: var(--q-color-surface);
|
|
124
|
+
border: 1px solid var(--q-color-border);
|
|
125
|
+
border-radius: var(--q-radius-2xl);
|
|
126
|
+
padding: 2.5rem;
|
|
127
|
+
backdrop-filter: blur(24px);
|
|
128
|
+
-webkit-backdrop-filter: blur(24px);
|
|
129
|
+
color: var(--q-color-text);
|
|
130
|
+
box-shadow: var(--q-card-shadow);
|
|
131
|
+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.card-premium:hover {
|
|
135
|
+
transform: translateY(-8px) scale(1.02);
|
|
136
|
+
background-color: color-mix(in srgb, var(--q-color-surface), white 5%);
|
|
137
|
+
box-shadow: 0 30px 60px -12px rgb(0 0 0 / 50%);
|
|
138
|
+
border-color: var(--q-color-starlight-blue);
|
|
125
139
|
}
|
|
126
140
|
|
|
127
141
|
.card-header {
|
|
128
142
|
padding: var(--q-space-6);
|
|
129
|
-
border-bottom: 1px solid var(--q-
|
|
143
|
+
border-bottom: 1px solid var(--q-glass-border);
|
|
130
144
|
}
|
|
131
145
|
|
|
132
146
|
.card-body {
|
|
@@ -135,9 +149,14 @@ html[data-theme="light"] .btn-secondary {
|
|
|
135
149
|
|
|
136
150
|
.card-footer {
|
|
137
151
|
padding: var(--q-space-6);
|
|
138
|
-
border-top: 1px solid var(--q-
|
|
139
|
-
background-color: var(--q-
|
|
140
|
-
color: var(--q-
|
|
152
|
+
border-top: 1px solid var(--q-glass-border);
|
|
153
|
+
background-color: var(--q-glass-bg);
|
|
154
|
+
color: var(--q-text-secondary);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
html[data-theme="light"] .card-footer {
|
|
158
|
+
background-color: #f9fafb;
|
|
159
|
+
color: #1e293b;
|
|
141
160
|
}
|
|
142
161
|
|
|
143
162
|
/* Input Component */
|
|
@@ -145,12 +164,17 @@ html[data-theme="light"] .btn-secondary {
|
|
|
145
164
|
display: block;
|
|
146
165
|
width: 100%;
|
|
147
166
|
padding: var(--q-space-2) var(--q-space-3);
|
|
148
|
-
border: 1px solid
|
|
167
|
+
border: 1px solid #d1d5db;
|
|
149
168
|
border-radius: var(--q-radius-md);
|
|
150
|
-
background-color:
|
|
151
|
-
color:
|
|
169
|
+
background-color: white;
|
|
170
|
+
color: #1e293b;
|
|
152
171
|
font-size: 1rem;
|
|
153
|
-
transition: all var(--q-duration-
|
|
172
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
html[data-theme="light"] .input {
|
|
176
|
+
background-color: white;
|
|
177
|
+
color: #1e293b;
|
|
154
178
|
}
|
|
155
179
|
|
|
156
180
|
textarea.input {
|
|
@@ -160,7 +184,7 @@ textarea.input {
|
|
|
160
184
|
.input:focus {
|
|
161
185
|
outline: none;
|
|
162
186
|
border-color: var(--q-color-primary);
|
|
163
|
-
box-shadow: 0 0 0 3px
|
|
187
|
+
box-shadow: 0 0 0 3px var(--q-color-primary);
|
|
164
188
|
}
|
|
165
189
|
|
|
166
190
|
/* Date & Time Input Specifics */
|
|
@@ -189,22 +213,32 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
189
213
|
}
|
|
190
214
|
|
|
191
215
|
.input:disabled {
|
|
192
|
-
background-color:
|
|
193
|
-
color:
|
|
216
|
+
background-color: #f3f4f6;
|
|
217
|
+
color: #6b7280;
|
|
194
218
|
cursor: not-allowed;
|
|
195
219
|
}
|
|
196
220
|
|
|
221
|
+
html[data-theme="light"] .input:disabled {
|
|
222
|
+
background-color: #f3f4f6;
|
|
223
|
+
color: #6b7280;
|
|
224
|
+
}
|
|
225
|
+
|
|
197
226
|
.input-error {
|
|
198
|
-
border-color: var(--q-color-
|
|
227
|
+
border-color: var(--q-color-error);
|
|
199
228
|
}
|
|
200
229
|
|
|
201
230
|
.input-error:focus {
|
|
202
|
-
border-color: var(--q-color-
|
|
203
|
-
box-shadow: 0 0 0 3px
|
|
231
|
+
border-color: var(--q-color-error);
|
|
232
|
+
box-shadow: 0 0 0 3px var(--q-color-error);
|
|
204
233
|
}
|
|
205
234
|
|
|
206
235
|
/* Badge Component */
|
|
207
|
-
.badge
|
|
236
|
+
.badge,
|
|
237
|
+
.badge-primary,
|
|
238
|
+
.badge-secondary,
|
|
239
|
+
.badge-success,
|
|
240
|
+
.badge-warning,
|
|
241
|
+
.badge-error {
|
|
208
242
|
display: inline-flex;
|
|
209
243
|
align-items: center;
|
|
210
244
|
padding: 0.25rem 0.75rem;
|
|
@@ -219,33 +253,64 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
219
253
|
}
|
|
220
254
|
|
|
221
255
|
.badge-primary {
|
|
222
|
-
background-color:
|
|
223
|
-
color:
|
|
224
|
-
border-color:
|
|
256
|
+
background-color: rgb(0 212 255 / 15%);
|
|
257
|
+
color: #00d4ff;
|
|
258
|
+
border-color: rgb(0 212 255 / 30%);
|
|
225
259
|
}
|
|
226
260
|
|
|
227
261
|
.badge-secondary {
|
|
228
|
-
background-color:
|
|
229
|
-
color:
|
|
230
|
-
border-color:
|
|
262
|
+
background-color: rgb(255 255 255 / 5%);
|
|
263
|
+
color: rgb(255 255 255 / 80%);
|
|
264
|
+
border-color: rgb(255 255 255 / 10%);
|
|
231
265
|
}
|
|
232
266
|
|
|
233
267
|
.badge-success {
|
|
234
|
-
background-color:
|
|
235
|
-
color:
|
|
236
|
-
border-color:
|
|
268
|
+
background-color: rgb(16 185 129 / 15%);
|
|
269
|
+
color: #10b981;
|
|
270
|
+
border-color: rgb(16 185 129 / 30%);
|
|
237
271
|
}
|
|
238
272
|
|
|
239
273
|
.badge-warning {
|
|
240
|
-
background-color:
|
|
241
|
-
color:
|
|
242
|
-
border-color:
|
|
274
|
+
background-color: rgb(245 158 11 / 15%);
|
|
275
|
+
color: #f59e0b;
|
|
276
|
+
border-color: rgb(245 158 11 / 30%);
|
|
243
277
|
}
|
|
244
278
|
|
|
245
279
|
.badge-error {
|
|
246
|
-
background-color:
|
|
247
|
-
color:
|
|
248
|
-
border-color:
|
|
280
|
+
background-color: rgb(239 68 68 / 15%);
|
|
281
|
+
color: #ef4444;
|
|
282
|
+
border-color: rgb(239 68 68 / 30%);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
/* Light Mode Overrides for Badges */
|
|
286
|
+
html[data-theme="light"] .badge-primary {
|
|
287
|
+
background-color: rgb(59 130 246 / 10%);
|
|
288
|
+
color: #2563eb;
|
|
289
|
+
border-color: rgb(59 130 246 / 20%);
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
html[data-theme="light"] .badge-secondary {
|
|
293
|
+
background-color: rgb(0 0 0 / 5%);
|
|
294
|
+
color: #475569;
|
|
295
|
+
border-color: rgb(0 0 0 / 10%);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
html[data-theme="light"] .badge-success {
|
|
299
|
+
background-color: rgb(16 185 129 / 10%);
|
|
300
|
+
color: #059669;
|
|
301
|
+
border-color: rgb(16 185 129 / 20%);
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
html[data-theme="light"] .badge-warning {
|
|
305
|
+
background-color: rgb(245 158 11 / 10%);
|
|
306
|
+
color: #d97706;
|
|
307
|
+
border-color: rgb(245 158 11 / 20%);
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
html[data-theme="light"] .badge-error {
|
|
311
|
+
background-color: rgb(239 68 68 / 10%);
|
|
312
|
+
color: #dc2626;
|
|
313
|
+
border-color: rgb(239 68 68 / 20%);
|
|
249
314
|
}
|
|
250
315
|
|
|
251
316
|
/* Alert Component */
|
|
@@ -256,34 +321,40 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
256
321
|
}
|
|
257
322
|
|
|
258
323
|
.alert-success {
|
|
259
|
-
background-color:
|
|
260
|
-
border-color:
|
|
261
|
-
color:
|
|
324
|
+
background-color: #d1fae5;
|
|
325
|
+
border-color: #6ee7b7;
|
|
326
|
+
color: #065f46;
|
|
262
327
|
}
|
|
263
328
|
|
|
264
329
|
.alert-warning {
|
|
265
|
-
background-color:
|
|
266
|
-
border-color:
|
|
267
|
-
color:
|
|
330
|
+
background-color: #fed7aa;
|
|
331
|
+
border-color: #fbbf24;
|
|
332
|
+
color: #92400e;
|
|
268
333
|
}
|
|
269
334
|
|
|
270
335
|
.alert-error {
|
|
271
|
-
background-color:
|
|
272
|
-
border-color:
|
|
273
|
-
color:
|
|
336
|
+
background-color: #fee2e2;
|
|
337
|
+
border-color: #f87171;
|
|
338
|
+
color: #991b1b;
|
|
274
339
|
}
|
|
275
340
|
|
|
276
341
|
.alert-info {
|
|
277
|
-
background-color:
|
|
278
|
-
border-color:
|
|
279
|
-
color:
|
|
342
|
+
background-color: rgb(59 130 246 / 15%);
|
|
343
|
+
border-color: rgb(59 130 246 / 30%);
|
|
344
|
+
color: #60a5fa;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
html[data-theme="light"] .alert-info {
|
|
348
|
+
background-color: rgb(59 130 246 / 10%);
|
|
349
|
+
border-color: rgb(59 130 246 / 20%);
|
|
350
|
+
color: #1e40af;
|
|
280
351
|
}
|
|
281
352
|
|
|
282
353
|
/* Modal Component */
|
|
283
354
|
.modal-overlay {
|
|
284
355
|
position: fixed;
|
|
285
356
|
inset: 0;
|
|
286
|
-
background-color:
|
|
357
|
+
background-color: rgb(0 0 0 / 50%);
|
|
287
358
|
display: flex;
|
|
288
359
|
align-items: center;
|
|
289
360
|
justify-content: center;
|
|
@@ -291,8 +362,8 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
291
362
|
}
|
|
292
363
|
|
|
293
364
|
.modal-content {
|
|
294
|
-
background-color:
|
|
295
|
-
color:
|
|
365
|
+
background-color: white;
|
|
366
|
+
color: #1e293b;
|
|
296
367
|
border-radius: var(--q-radius-lg);
|
|
297
368
|
box-shadow: var(--q-shadow-2xl);
|
|
298
369
|
max-width: 90vw;
|
|
@@ -300,12 +371,17 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
300
371
|
overflow-y: auto;
|
|
301
372
|
}
|
|
302
373
|
|
|
374
|
+
html[data-theme="light"] .modal-content {
|
|
375
|
+
background-color: white;
|
|
376
|
+
color: #1e293b;
|
|
377
|
+
}
|
|
378
|
+
|
|
303
379
|
/* Loading Spinner */
|
|
304
380
|
.spinner {
|
|
305
381
|
display: inline-block;
|
|
306
|
-
width:
|
|
307
|
-
height:
|
|
308
|
-
border:
|
|
382
|
+
width: 2.5rem;
|
|
383
|
+
height: 2.5rem;
|
|
384
|
+
border: 4px solid color-mix(in srgb, var(--q-color-text), transparent 85%);
|
|
309
385
|
border-top-color: var(--q-color-primary);
|
|
310
386
|
border-radius: 50%;
|
|
311
387
|
animation: spin 1s linear infinite;
|
|
@@ -318,12 +394,12 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
318
394
|
/* Skeleton Loading */
|
|
319
395
|
.skeleton {
|
|
320
396
|
background: linear-gradient(90deg,
|
|
321
|
-
var(--q-
|
|
322
|
-
|
|
323
|
-
var(--q-
|
|
397
|
+
var(--q-skeleton-bg) 25%,
|
|
398
|
+
var(--q-skeleton-shimmer) 50%,
|
|
399
|
+
var(--q-skeleton-bg) 75%
|
|
324
400
|
);
|
|
325
401
|
background-size: 200% 100%;
|
|
326
|
-
animation: shimmer 2s infinite;
|
|
402
|
+
animation: shimmer 2s infinite linear;
|
|
327
403
|
border-radius: var(--q-radius-md);
|
|
328
404
|
}
|
|
329
405
|
|
|
@@ -332,6 +408,17 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
332
408
|
100% { background-position: -200% 0; }
|
|
333
409
|
}
|
|
334
410
|
|
|
411
|
+
html[data-theme="light"] .skeleton {
|
|
412
|
+
background: linear-gradient(90deg,
|
|
413
|
+
var(--q-skeleton-bg) 25%,
|
|
414
|
+
var(--q-skeleton-shimmer) 50%,
|
|
415
|
+
var(--q-skeleton-bg) 75%
|
|
416
|
+
);
|
|
417
|
+
background-size: 200% 100%;
|
|
418
|
+
animation: shimmer 2s infinite linear;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
|
|
335
422
|
/* Tooltip Component */
|
|
336
423
|
.tooltip {
|
|
337
424
|
position: relative;
|
|
@@ -342,15 +429,15 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
342
429
|
bottom: 100%;
|
|
343
430
|
left: 50%;
|
|
344
431
|
transform: translateX(-50%);
|
|
345
|
-
background-color:
|
|
346
|
-
color:
|
|
432
|
+
background-color: #1f2937;
|
|
433
|
+
color: white;
|
|
347
434
|
padding: var(--q-space-1) var(--q-space-2);
|
|
348
435
|
border-radius: var(--q-radius-md);
|
|
349
436
|
font-size: 0.875rem;
|
|
350
437
|
white-space: nowrap;
|
|
351
438
|
opacity: 0;
|
|
352
439
|
visibility: hidden;
|
|
353
|
-
transition: all var(--q-duration-
|
|
440
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
354
441
|
z-index: 10;
|
|
355
442
|
margin-bottom: var(--q-space-1);
|
|
356
443
|
}
|
|
@@ -370,9 +457,9 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
370
457
|
position: absolute;
|
|
371
458
|
top: 100%;
|
|
372
459
|
left: 0;
|
|
373
|
-
background-color:
|
|
374
|
-
color:
|
|
375
|
-
border: 1px solid
|
|
460
|
+
background-color: white;
|
|
461
|
+
color: #1e293b;
|
|
462
|
+
border: 1px solid #e5e7eb;
|
|
376
463
|
border-radius: var(--q-radius-md);
|
|
377
464
|
box-shadow: var(--q-shadow-lg);
|
|
378
465
|
min-width: 200px;
|
|
@@ -380,7 +467,12 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
380
467
|
opacity: 0;
|
|
381
468
|
visibility: hidden;
|
|
382
469
|
transform: translateY(-10px);
|
|
383
|
-
transition: all var(--q-duration-
|
|
470
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
html[data-theme="light"] .dropdown-content {
|
|
474
|
+
background-color: white;
|
|
475
|
+
color: #1e293b;
|
|
384
476
|
}
|
|
385
477
|
|
|
386
478
|
.dropdown.active .dropdown-content {
|
|
@@ -397,13 +489,336 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
397
489
|
background: none;
|
|
398
490
|
border: none;
|
|
399
491
|
cursor: pointer;
|
|
400
|
-
color:
|
|
401
|
-
transition: background-color var(--q-duration-
|
|
492
|
+
color: #1e293b;
|
|
493
|
+
transition: background-color var(--q-duration-150) var(--q-ease-in-out);
|
|
402
494
|
}
|
|
403
495
|
|
|
404
496
|
.dropdown-item:hover {
|
|
405
|
-
background-color: var(--q-color-
|
|
406
|
-
color:
|
|
497
|
+
background-color: var(--q-color-primary);
|
|
498
|
+
color: #1e293b;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
html[data-theme="light"] .dropdown-item {
|
|
502
|
+
color: #1e293b;
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
html[data-theme="light"] .dropdown-item:hover {
|
|
506
|
+
background-color: var(--q-color-starlight-blue);
|
|
507
|
+
color: #1e293b;
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
/* ============================================================================
|
|
511
|
+
MENU COMPONENT
|
|
512
|
+
Navigation and user menus
|
|
513
|
+
============================================================================ */
|
|
514
|
+
|
|
515
|
+
/* Base menu */
|
|
516
|
+
.menu {
|
|
517
|
+
display: flex;
|
|
518
|
+
flex-direction: column;
|
|
519
|
+
list-style: none;
|
|
520
|
+
margin: 0;
|
|
521
|
+
padding: 0;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
/* Horizontal menu */
|
|
525
|
+
.menu-horizontal {
|
|
526
|
+
flex-direction: row;
|
|
527
|
+
align-items: center;
|
|
528
|
+
gap: var(--q-space-2);
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
/* Menu item */
|
|
532
|
+
.menu-item {
|
|
533
|
+
position: relative;
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
.menu-link {
|
|
537
|
+
display: flex;
|
|
538
|
+
align-items: center;
|
|
539
|
+
gap: var(--q-space-2);
|
|
540
|
+
padding: var(--q-space-2) var(--q-space-3);
|
|
541
|
+
color: var(--q-text-secondary);
|
|
542
|
+
text-decoration: none;
|
|
543
|
+
font-weight: 500;
|
|
544
|
+
border-radius: var(--q-radius-md);
|
|
545
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
546
|
+
cursor: pointer;
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
.menu-link:hover {
|
|
550
|
+
color: var(--q-text-primary);
|
|
551
|
+
background-color: var(--q-glass-bg);
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
.menu-link.active {
|
|
555
|
+
color: var(--q-color-primary);
|
|
556
|
+
background-color: color-mix(in srgb, var(--q-color-primary), transparent 90%);
|
|
557
|
+
}
|
|
558
|
+
|
|
559
|
+
/* Menu icon */
|
|
560
|
+
.menu-icon {
|
|
561
|
+
width: 20px;
|
|
562
|
+
height: 20px;
|
|
563
|
+
flex-shrink: 0;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
/* Menu badge */
|
|
567
|
+
.menu-badge {
|
|
568
|
+
margin-left: auto;
|
|
569
|
+
padding: 2px 8px;
|
|
570
|
+
font-size: 0.75rem;
|
|
571
|
+
font-weight: 600;
|
|
572
|
+
background-color: var(--q-color-primary);
|
|
573
|
+
color: white;
|
|
574
|
+
border-radius: 9999px;
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
/* Dropdown menu */
|
|
578
|
+
.menu-dropdown {
|
|
579
|
+
position: absolute;
|
|
580
|
+
top: 100%;
|
|
581
|
+
left: 0;
|
|
582
|
+
min-width: 200px;
|
|
583
|
+
background-color: var(--q-card-bg);
|
|
584
|
+
border: 1px solid var(--q-card-border);
|
|
585
|
+
border-radius: var(--q-radius-lg);
|
|
586
|
+
box-shadow: var(--q-shadow-lg);
|
|
587
|
+
padding: var(--q-space-2);
|
|
588
|
+
opacity: 0;
|
|
589
|
+
visibility: hidden;
|
|
590
|
+
transform: translateY(-8px);
|
|
591
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
592
|
+
z-index: 50;
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
.menu-item:hover .menu-dropdown,
|
|
596
|
+
.menu-item.active .menu-dropdown {
|
|
597
|
+
opacity: 1;
|
|
598
|
+
visibility: visible;
|
|
599
|
+
transform: translateY(0);
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
.menu-dropdown .menu-link {
|
|
603
|
+
padding: var(--q-space-2) var(--q-space-3);
|
|
604
|
+
border-radius: var(--q-radius-md);
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
.menu-dropdown .menu-link:hover {
|
|
608
|
+
background-color: var(--q-glass-bg);
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
/* Mobile menu */
|
|
612
|
+
.menu-mobile {
|
|
613
|
+
position: fixed;
|
|
614
|
+
top: 0;
|
|
615
|
+
left: 0;
|
|
616
|
+
width: 100%;
|
|
617
|
+
height: 100%;
|
|
618
|
+
background-color: var(--q-bg-primary);
|
|
619
|
+
padding: var(--q-space-6);
|
|
620
|
+
z-index: 100;
|
|
621
|
+
transform: translateX(-100%);
|
|
622
|
+
transition: transform var(--q-duration-300) var(--q-ease-in-out);
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
.menu-mobile.open {
|
|
626
|
+
transform: translateX(0);
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
.menu-mobile .menu {
|
|
630
|
+
gap: var(--q-space-2);
|
|
631
|
+
}
|
|
632
|
+
|
|
633
|
+
.menu-mobile .menu-link {
|
|
634
|
+
padding: var(--q-space-4);
|
|
635
|
+
font-size: 1.125rem;
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
/* Menu divider */
|
|
639
|
+
.menu-divider {
|
|
640
|
+
height: 1px;
|
|
641
|
+
background-color: var(--q-glass-border);
|
|
642
|
+
margin: var(--q-space-2) 0;
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
/* User menu */
|
|
646
|
+
.user-menu {
|
|
647
|
+
display: flex;
|
|
648
|
+
align-items: center;
|
|
649
|
+
gap: var(--q-space-3);
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
/* Light mode */
|
|
653
|
+
html[data-theme="light"] .menu-link:hover {
|
|
654
|
+
background-color: #f1f5f9;
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
html[data-theme="light"] .menu-link.active {
|
|
658
|
+
background-color: #eff6ff;
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
html[data-theme="light"] .menu-dropdown {
|
|
662
|
+
background-color: white;
|
|
663
|
+
border-color: #e2e8f0;
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
html[data-theme="light"] .menu-divider {
|
|
667
|
+
background-color: #e2e8f0;
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
/* ============================================================================
|
|
671
|
+
TOAST COMPONENT
|
|
672
|
+
Notification toasts
|
|
673
|
+
============================================================================ */
|
|
674
|
+
|
|
675
|
+
/* Toast container */
|
|
676
|
+
.toast-container {
|
|
677
|
+
position: fixed;
|
|
678
|
+
bottom: var(--q-space-6);
|
|
679
|
+
right: var(--q-space-6);
|
|
680
|
+
display: flex;
|
|
681
|
+
flex-direction: column;
|
|
682
|
+
gap: var(--q-space-3);
|
|
683
|
+
z-index: 1000;
|
|
684
|
+
max-width: 400px;
|
|
685
|
+
}
|
|
686
|
+
|
|
687
|
+
.toast-container-top-right {
|
|
688
|
+
top: var(--q-space-6);
|
|
689
|
+
bottom: auto;
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
.toast-container-top-left {
|
|
693
|
+
top: var(--q-space-6);
|
|
694
|
+
left: var(--q-space-6);
|
|
695
|
+
right: auto;
|
|
696
|
+
}
|
|
697
|
+
|
|
698
|
+
.toast-container-bottom-left {
|
|
699
|
+
bottom: var(--q-space-6);
|
|
700
|
+
left: var(--q-space-6);
|
|
701
|
+
right: auto;
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
/* Toast */
|
|
705
|
+
.toast {
|
|
706
|
+
display: flex;
|
|
707
|
+
align-items: flex-start;
|
|
708
|
+
gap: var(--q-space-3);
|
|
709
|
+
padding: var(--q-space-4);
|
|
710
|
+
background-color: var(--q-card-bg);
|
|
711
|
+
border: 1px solid var(--q-card-border);
|
|
712
|
+
border-radius: var(--q-radius-lg);
|
|
713
|
+
box-shadow: var(--q-shadow-lg);
|
|
714
|
+
color: var(--q-text-primary);
|
|
715
|
+
animation: toast-slide-in 0.3s var(--q-ease-out);
|
|
716
|
+
}
|
|
717
|
+
|
|
718
|
+
@keyframes toast-slide-in {
|
|
719
|
+
from {
|
|
720
|
+
opacity: 0;
|
|
721
|
+
transform: translateX(100%);
|
|
722
|
+
}
|
|
723
|
+
to {
|
|
724
|
+
opacity: 1;
|
|
725
|
+
transform: translateX(0);
|
|
726
|
+
}
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
.toast.removing {
|
|
730
|
+
animation: toast-slide-out 0.3s var(--q-ease-in) forwards;
|
|
731
|
+
}
|
|
732
|
+
|
|
733
|
+
@keyframes toast-slide-out {
|
|
734
|
+
from {
|
|
735
|
+
opacity: 1;
|
|
736
|
+
transform: translateX(0);
|
|
737
|
+
}
|
|
738
|
+
to {
|
|
739
|
+
opacity: 0;
|
|
740
|
+
transform: translateX(100%);
|
|
741
|
+
}
|
|
742
|
+
}
|
|
743
|
+
|
|
744
|
+
/* Toast icon */
|
|
745
|
+
.toast-icon {
|
|
746
|
+
width: 20px;
|
|
747
|
+
height: 20px;
|
|
748
|
+
flex-shrink: 0;
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
.toast-success .toast-icon {
|
|
752
|
+
color: #10b981;
|
|
753
|
+
}
|
|
754
|
+
|
|
755
|
+
.toast-error .toast-icon {
|
|
756
|
+
color: #ef4444;
|
|
757
|
+
}
|
|
758
|
+
|
|
759
|
+
.toast-warning .toast-icon {
|
|
760
|
+
color: #f59e0b;
|
|
761
|
+
}
|
|
762
|
+
|
|
763
|
+
.toast-info .toast-icon {
|
|
764
|
+
color: #3b82f6;
|
|
765
|
+
}
|
|
766
|
+
|
|
767
|
+
/* Toast content */
|
|
768
|
+
.toast-content {
|
|
769
|
+
flex: 1;
|
|
770
|
+
min-width: 0;
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
.toast-title {
|
|
774
|
+
font-weight: 600;
|
|
775
|
+
font-size: 0.875rem;
|
|
776
|
+
margin-bottom: 2px;
|
|
777
|
+
}
|
|
778
|
+
|
|
779
|
+
.toast-message {
|
|
780
|
+
font-size: 0.875rem;
|
|
781
|
+
color: var(--q-text-secondary);
|
|
782
|
+
line-height: 1.4;
|
|
783
|
+
}
|
|
784
|
+
|
|
785
|
+
/* Toast close button */
|
|
786
|
+
.toast-close {
|
|
787
|
+
padding: 4px;
|
|
788
|
+
background: none;
|
|
789
|
+
border: none;
|
|
790
|
+
color: var(--q-text-muted);
|
|
791
|
+
cursor: pointer;
|
|
792
|
+
border-radius: var(--q-radius-sm);
|
|
793
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
794
|
+
}
|
|
795
|
+
|
|
796
|
+
.toast-close:hover {
|
|
797
|
+
color: var(--q-text-primary);
|
|
798
|
+
background-color: var(--q-glass-bg);
|
|
799
|
+
}
|
|
800
|
+
|
|
801
|
+
/* Toast variants */
|
|
802
|
+
.toast-success {
|
|
803
|
+
border-left: 3px solid #10b981;
|
|
804
|
+
}
|
|
805
|
+
|
|
806
|
+
.toast-error {
|
|
807
|
+
border-left: 3px solid #ef4444;
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
.toast-warning {
|
|
811
|
+
border-left: 3px solid #f59e0b;
|
|
812
|
+
}
|
|
813
|
+
|
|
814
|
+
.toast-info {
|
|
815
|
+
border-left: 3px solid #3b82f6;
|
|
816
|
+
}
|
|
817
|
+
|
|
818
|
+
/* Light mode */
|
|
819
|
+
html[data-theme="light"] .toast {
|
|
820
|
+
background-color: white;
|
|
821
|
+
border-color: #e2e8f0;
|
|
407
822
|
}
|
|
408
823
|
|
|
409
824
|
/* Accordion Component */
|
|
@@ -417,28 +832,48 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
417
832
|
.accordion-header {
|
|
418
833
|
padding: var(--q-space-3) var(--q-space-4);
|
|
419
834
|
font-weight: 600;
|
|
420
|
-
background-color:
|
|
421
|
-
border-bottom: 1px solid
|
|
422
|
-
color: var(--q-
|
|
835
|
+
background-color: rgb(255 255 255 / 5%);
|
|
836
|
+
border-bottom: 1px solid rgb(255 255 255 / 10%);
|
|
837
|
+
color: var(--q-text-primary);
|
|
423
838
|
cursor: pointer;
|
|
424
839
|
display: flex;
|
|
425
840
|
justify-content: space-between;
|
|
426
841
|
align-items: center;
|
|
427
|
-
transition: background-color var(--q-duration-
|
|
842
|
+
transition: background-color var(--q-duration-150) var(--q-ease-in-out);
|
|
428
843
|
}
|
|
429
844
|
|
|
430
845
|
.accordion-header:hover {
|
|
431
|
-
background-color:
|
|
432
|
-
color: var(--q-
|
|
846
|
+
background-color: rgb(255 255 255 / 8%);
|
|
847
|
+
color: var(--q-text-primary);
|
|
433
848
|
}
|
|
434
849
|
|
|
435
850
|
.accordion-content {
|
|
436
851
|
padding: 0 var(--q-space-4);
|
|
437
|
-
background-color: var(--q-
|
|
438
|
-
color: var(--q-
|
|
852
|
+
background-color: var(--q-card-bg);
|
|
853
|
+
color: var(--q-text-primary);
|
|
439
854
|
max-height: 0;
|
|
440
855
|
overflow: hidden;
|
|
441
|
-
transition: max-height var(--q-duration-
|
|
856
|
+
transition: max-height var(--q-duration-300) var(--q-ease-in-out), padding var(--q-duration-300) var(--q-ease-in-out);
|
|
857
|
+
}
|
|
858
|
+
|
|
859
|
+
html[data-theme="light"] .accordion-header {
|
|
860
|
+
background-color: #f8fafc;
|
|
861
|
+
border-bottom-color: #e2e8f0;
|
|
862
|
+
color: var(--q-light-text);
|
|
863
|
+
}
|
|
864
|
+
|
|
865
|
+
html[data-theme="light"] .accordion-header:hover {
|
|
866
|
+
background-color: #f1f5f9;
|
|
867
|
+
}
|
|
868
|
+
|
|
869
|
+
html[data-theme="light"] .accordion-header:hover {
|
|
870
|
+
background-color: color-mix(in srgb, var(--q-color-primary), transparent 92%);
|
|
871
|
+
color: var(--q-light-text);
|
|
872
|
+
}
|
|
873
|
+
|
|
874
|
+
html[data-theme="light"] .accordion-content {
|
|
875
|
+
background-color: var(--q-light-card-bg);
|
|
876
|
+
color: var(--q-light-text);
|
|
442
877
|
}
|
|
443
878
|
|
|
444
879
|
.accordion-item.active .accordion-content {
|
|
@@ -451,13 +886,13 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
451
886
|
}
|
|
452
887
|
|
|
453
888
|
.accordion-icon {
|
|
454
|
-
transition: transform var(--q-duration-
|
|
889
|
+
transition: transform var(--q-duration-300) var(--q-ease-in-out);
|
|
455
890
|
}
|
|
456
891
|
|
|
457
892
|
/* Tab Component */
|
|
458
893
|
.tab-list {
|
|
459
894
|
display: flex;
|
|
460
|
-
border-bottom: 1px solid
|
|
895
|
+
border-bottom: 1px solid rgb(255 255 255 / 10%);
|
|
461
896
|
}
|
|
462
897
|
|
|
463
898
|
.tab-button {
|
|
@@ -466,17 +901,35 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
466
901
|
border: none;
|
|
467
902
|
cursor: pointer;
|
|
468
903
|
border-bottom: 2px solid transparent;
|
|
469
|
-
color: var(--q-
|
|
904
|
+
color: var(--q-text-secondary);
|
|
470
905
|
font-weight: 500;
|
|
471
|
-
transition: all var(--q-duration-
|
|
906
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
472
907
|
}
|
|
473
908
|
|
|
474
909
|
.tab-button:hover {
|
|
475
|
-
background-color:
|
|
476
|
-
color: var(--q-
|
|
910
|
+
background-color: rgb(255 255 255 / 5%);
|
|
911
|
+
color: var(--q-text-primary);
|
|
477
912
|
}
|
|
478
913
|
|
|
479
914
|
.tab-button.active {
|
|
915
|
+
border-bottom-color: var(--q-color-starlight-blue);
|
|
916
|
+
color: var(--q-color-starlight-blue);
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
html[data-theme="light"] .tab-list {
|
|
920
|
+
border-bottom-color: #e2e8f0;
|
|
921
|
+
}
|
|
922
|
+
|
|
923
|
+
html[data-theme="light"] .tab-button {
|
|
924
|
+
color: #64748b;
|
|
925
|
+
}
|
|
926
|
+
|
|
927
|
+
html[data-theme="light"] .tab-button:hover {
|
|
928
|
+
background-color: #f1f5f9;
|
|
929
|
+
color: #0f172a;
|
|
930
|
+
}
|
|
931
|
+
|
|
932
|
+
html[data-theme="light"] .tab-button.active {
|
|
480
933
|
border-bottom-color: var(--q-color-primary);
|
|
481
934
|
color: var(--q-color-primary);
|
|
482
935
|
}
|
|
@@ -497,23 +950,368 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
497
950
|
.progress {
|
|
498
951
|
width: 100%;
|
|
499
952
|
height: 0.5rem;
|
|
500
|
-
background-color:
|
|
953
|
+
background-color: #e5e7eb;
|
|
501
954
|
border-radius: var(--q-radius-full);
|
|
502
955
|
overflow: hidden;
|
|
503
956
|
}
|
|
504
957
|
|
|
505
958
|
.progress-bar {
|
|
506
959
|
height: 100%;
|
|
507
|
-
transition: width var(--q-duration-
|
|
960
|
+
transition: width var(--q-duration-300) var(--q-ease-in-out);
|
|
508
961
|
}
|
|
509
962
|
|
|
510
|
-
/*
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
963
|
+
/* ============================================================================
|
|
964
|
+
CHIP COMPONENT
|
|
965
|
+
============================================================================ */
|
|
966
|
+
|
|
967
|
+
.chip {
|
|
968
|
+
display: inline-flex;
|
|
969
|
+
align-items: center;
|
|
970
|
+
gap: var(--q-space-2);
|
|
971
|
+
padding: 0.6rem 1.25rem;
|
|
972
|
+
font-size: 0.875rem;
|
|
973
|
+
font-weight: 500;
|
|
974
|
+
white-space: nowrap;
|
|
975
|
+
border-radius: 9999px;
|
|
976
|
+
background-color: var(--q-card-bg);
|
|
977
|
+
border: 1px solid var(--q-card-border);
|
|
978
|
+
color: var(--q-text-secondary);
|
|
979
|
+
transition: all 0.2s;
|
|
980
|
+
cursor: pointer;
|
|
981
|
+
}
|
|
982
|
+
|
|
983
|
+
.chip:hover {
|
|
984
|
+
background-color: rgba(0, 212, 255, 0.1);
|
|
985
|
+
border-color: rgba(0, 212, 255, 0.3);
|
|
986
|
+
color: var(--q-color-starlight-blue);
|
|
987
|
+
}
|
|
988
|
+
|
|
989
|
+
.chip.active {
|
|
990
|
+
background-color: rgba(0, 212, 255, 0.1);
|
|
991
|
+
border-color: rgba(0, 212, 255, 0.3);
|
|
992
|
+
color: var(--q-color-starlight-blue);
|
|
993
|
+
}
|
|
994
|
+
|
|
995
|
+
/* Chip variants */
|
|
996
|
+
.chip-primary {
|
|
997
|
+
background-color: rgba(0, 212, 255, 0.1);
|
|
998
|
+
border-color: rgba(0, 212, 255, 0.3);
|
|
999
|
+
color: var(--q-color-starlight-blue);
|
|
1000
|
+
}
|
|
1001
|
+
|
|
1002
|
+
.chip-primary:hover,
|
|
1003
|
+
.chip-primary.active {
|
|
1004
|
+
background-color: var(--q-color-starlight-blue);
|
|
1005
|
+
color: white;
|
|
1006
|
+
}
|
|
1007
|
+
|
|
1008
|
+
.chip-success {
|
|
1009
|
+
background-color: rgba(16, 185, 129, 0.1);
|
|
1010
|
+
border-color: #10b981;
|
|
1011
|
+
color: #10b981;
|
|
1012
|
+
}
|
|
1013
|
+
|
|
1014
|
+
.chip-success:hover,
|
|
1015
|
+
.chip-success.active {
|
|
1016
|
+
background-color: #10b981;
|
|
1017
|
+
color: white;
|
|
1018
|
+
}
|
|
1019
|
+
|
|
1020
|
+
.chip-warning {
|
|
1021
|
+
background-color: rgba(245, 158, 11, 0.1);
|
|
1022
|
+
border-color: #f59e0b;
|
|
1023
|
+
color: #f59e0b;
|
|
1024
|
+
}
|
|
1025
|
+
|
|
1026
|
+
.chip-warning:hover,
|
|
1027
|
+
.chip-warning.active {
|
|
1028
|
+
background-color: #f59e0b;
|
|
1029
|
+
color: white;
|
|
1030
|
+
}
|
|
1031
|
+
|
|
1032
|
+
.chip-error {
|
|
1033
|
+
background-color: rgba(239, 68, 68, 0.1);
|
|
1034
|
+
border-color: #ef4444;
|
|
1035
|
+
color: #ef4444;
|
|
1036
|
+
}
|
|
1037
|
+
|
|
1038
|
+
.chip-error:hover,
|
|
1039
|
+
.chip-error.active {
|
|
1040
|
+
background-color: #ef4444;
|
|
1041
|
+
color: white;
|
|
1042
|
+
}
|
|
1043
|
+
|
|
1044
|
+
/* Chip with icon */
|
|
1045
|
+
.chip-icon {
|
|
1046
|
+
width: 16px;
|
|
1047
|
+
height: 16px;
|
|
1048
|
+
flex-shrink: 0;
|
|
1049
|
+
}
|
|
1050
|
+
|
|
1051
|
+
/* Chip close button */
|
|
1052
|
+
.chip-close {
|
|
1053
|
+
display: flex;
|
|
1054
|
+
align-items: center;
|
|
1055
|
+
justify-content: center;
|
|
1056
|
+
width: 16px;
|
|
1057
|
+
height: 16px;
|
|
1058
|
+
padding: 0;
|
|
1059
|
+
background: none;
|
|
1060
|
+
border: none;
|
|
1061
|
+
color: inherit;
|
|
1062
|
+
opacity: 0.6;
|
|
1063
|
+
cursor: pointer;
|
|
1064
|
+
border-radius: 50%;
|
|
1065
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
1066
|
+
}
|
|
1067
|
+
|
|
1068
|
+
.chip-close:hover {
|
|
1069
|
+
opacity: 1;
|
|
1070
|
+
background-color: rgba(0, 0, 0, 0.1);
|
|
1071
|
+
}
|
|
1072
|
+
|
|
1073
|
+
/* Chip sizes */
|
|
1074
|
+
.chip-sm {
|
|
1075
|
+
padding: 2px var(--q-space-2);
|
|
1076
|
+
font-size: 0.75rem;
|
|
1077
|
+
}
|
|
1078
|
+
|
|
1079
|
+
.chip-lg {
|
|
1080
|
+
padding: var(--q-space-2) var(--q-space-4);
|
|
1081
|
+
font-size: 1rem;
|
|
1082
|
+
}
|
|
1083
|
+
|
|
1084
|
+
/* Light mode */
|
|
1085
|
+
html[data-theme="light"] .chip {
|
|
1086
|
+
background-color: #f1f5f9;
|
|
1087
|
+
border-color: #e2e8f0;
|
|
1088
|
+
color: #1e293b;
|
|
1089
|
+
}
|
|
1090
|
+
|
|
1091
|
+
html[data-theme="light"] .chip:hover {
|
|
1092
|
+
background-color: #e2e8f0;
|
|
1093
|
+
}
|
|
1094
|
+
|
|
1095
|
+
/* ============================================================================
|
|
1096
|
+
DATE PICKER COMPONENT
|
|
1097
|
+
============================================================================ */
|
|
1098
|
+
|
|
1099
|
+
.date-picker {
|
|
1100
|
+
display: inline-block;
|
|
1101
|
+
position: relative;
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1104
|
+
/* Date picker input */
|
|
1105
|
+
.date-picker-input {
|
|
1106
|
+
padding: var(--q-space-2) var(--q-space-3);
|
|
1107
|
+
padding-right: var(--q-space-10);
|
|
1108
|
+
background-color: var(--q-glass-bg);
|
|
1109
|
+
border: 1px solid var(--q-glass-border);
|
|
1110
|
+
border-radius: var(--q-radius-md);
|
|
1111
|
+
color: var(--q-text-primary);
|
|
1112
|
+
font-size: 0.875rem;
|
|
1113
|
+
cursor: pointer;
|
|
1114
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
1115
|
+
min-width: 160px;
|
|
1116
|
+
}
|
|
1117
|
+
|
|
1118
|
+
.date-picker-input:focus {
|
|
1119
|
+
outline: none;
|
|
1120
|
+
border-color: var(--q-color-primary);
|
|
1121
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-color-primary), transparent 30%);
|
|
1122
|
+
}
|
|
1123
|
+
|
|
1124
|
+
.date-picker-input::placeholder {
|
|
1125
|
+
color: var(--q-text-muted);
|
|
1126
|
+
}
|
|
1127
|
+
|
|
1128
|
+
/* Date picker dropdown/calendar */
|
|
1129
|
+
.date-picker-dropdown {
|
|
1130
|
+
position: absolute;
|
|
1131
|
+
top: 100%;
|
|
1132
|
+
left: 0;
|
|
1133
|
+
margin-top: var(--q-space-2);
|
|
1134
|
+
background-color: var(--q-card-bg);
|
|
1135
|
+
border: 1px solid var(--q-card-border);
|
|
1136
|
+
border-radius: var(--q-radius-lg);
|
|
1137
|
+
box-shadow: var(--q-shadow-lg);
|
|
1138
|
+
padding: var(--q-space-4);
|
|
1139
|
+
z-index: 50;
|
|
1140
|
+
opacity: 0;
|
|
1141
|
+
visibility: hidden;
|
|
1142
|
+
transform: translateY(-8px);
|
|
1143
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
1144
|
+
min-width: 280px;
|
|
1145
|
+
}
|
|
1146
|
+
|
|
1147
|
+
.date-picker.active .date-picker-dropdown {
|
|
1148
|
+
opacity: 1;
|
|
1149
|
+
visibility: visible;
|
|
1150
|
+
transform: translateY(0);
|
|
1151
|
+
}
|
|
1152
|
+
|
|
1153
|
+
/* Date picker header */
|
|
1154
|
+
.date-picker-header {
|
|
1155
|
+
display: flex;
|
|
1156
|
+
align-items: center;
|
|
1157
|
+
justify-content: space-between;
|
|
1158
|
+
margin-bottom: var(--q-space-3);
|
|
1159
|
+
}
|
|
1160
|
+
|
|
1161
|
+
.date-picker-title {
|
|
1162
|
+
font-weight: 600;
|
|
1163
|
+
color: var(--q-text-primary);
|
|
1164
|
+
}
|
|
1165
|
+
|
|
1166
|
+
.date-picker-nav {
|
|
1167
|
+
display: flex;
|
|
1168
|
+
gap: var(--q-space-1);
|
|
1169
|
+
}
|
|
1170
|
+
|
|
1171
|
+
.date-picker-nav-btn {
|
|
1172
|
+
padding: var(--q-space-1);
|
|
1173
|
+
background: none;
|
|
1174
|
+
border: none;
|
|
1175
|
+
color: var(--q-text-muted);
|
|
1176
|
+
cursor: pointer;
|
|
1177
|
+
border-radius: var(--q-radius-sm);
|
|
1178
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
1179
|
+
}
|
|
1180
|
+
|
|
1181
|
+
.date-picker-nav-btn:hover {
|
|
1182
|
+
color: var(--q-text-primary);
|
|
1183
|
+
background-color: var(--q-glass-bg);
|
|
1184
|
+
}
|
|
1185
|
+
|
|
1186
|
+
/* Date picker grid */
|
|
1187
|
+
.date-picker-grid {
|
|
1188
|
+
display: grid;
|
|
1189
|
+
grid-template-columns: repeat(7, 1fr);
|
|
1190
|
+
gap: 2px;
|
|
1191
|
+
}
|
|
1192
|
+
|
|
1193
|
+
/* Day labels */
|
|
1194
|
+
.date-picker-weekday {
|
|
1195
|
+
text-align: center;
|
|
1196
|
+
font-size: 0.75rem;
|
|
1197
|
+
font-weight: 600;
|
|
1198
|
+
color: var(--q-text-muted);
|
|
1199
|
+
padding: var(--q-space-2);
|
|
1200
|
+
text-transform: uppercase;
|
|
1201
|
+
}
|
|
1202
|
+
|
|
1203
|
+
/* Day */
|
|
1204
|
+
.date-picker-day {
|
|
1205
|
+
text-align: center;
|
|
1206
|
+
padding: var(--q-space-2);
|
|
1207
|
+
font-size: 0.875rem;
|
|
1208
|
+
color: var(--q-text-secondary);
|
|
1209
|
+
cursor: pointer;
|
|
1210
|
+
border-radius: var(--q-radius-md);
|
|
1211
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
1212
|
+
}
|
|
1213
|
+
|
|
1214
|
+
.date-picker-day:hover {
|
|
1215
|
+
background-color: var(--q-glass-bg);
|
|
1216
|
+
color: var(--q-text-primary);
|
|
1217
|
+
}
|
|
1218
|
+
|
|
1219
|
+
.date-picker-day.selected {
|
|
1220
|
+
background-color: var(--q-color-primary);
|
|
1221
|
+
color: white;
|
|
1222
|
+
}
|
|
1223
|
+
|
|
1224
|
+
.date-picker-day.today {
|
|
1225
|
+
font-weight: 600;
|
|
1226
|
+
color: var(--q-color-primary);
|
|
1227
|
+
}
|
|
1228
|
+
|
|
1229
|
+
.date-picker-day.disabled {
|
|
1230
|
+
opacity: 0.3;
|
|
1231
|
+
cursor: not-allowed;
|
|
1232
|
+
}
|
|
1233
|
+
|
|
1234
|
+
.date-picker-day.disabled:hover {
|
|
1235
|
+
background: none;
|
|
1236
|
+
color: var(--q-text-secondary);
|
|
1237
|
+
}
|
|
1238
|
+
|
|
1239
|
+
.date-picker-day.other-month {
|
|
1240
|
+
color: var(--q-text-muted);
|
|
1241
|
+
opacity: 0.5;
|
|
1242
|
+
}
|
|
1243
|
+
|
|
1244
|
+
/* Date picker footer */
|
|
1245
|
+
.date-picker-footer {
|
|
1246
|
+
display: flex;
|
|
1247
|
+
justify-content: flex-end;
|
|
1248
|
+
gap: var(--q-space-2);
|
|
1249
|
+
margin-top: var(--q-space-3);
|
|
1250
|
+
padding-top: var(--q-space-3);
|
|
1251
|
+
border-top: 1px solid var(--q-glass-border);
|
|
1252
|
+
}
|
|
1253
|
+
|
|
1254
|
+
/* Range date picker */
|
|
1255
|
+
.date-picker-range .date-picker-day.in-range {
|
|
1256
|
+
background-color: color-mix(in srgb, var(--q-color-primary), transparent 20%);
|
|
1257
|
+
}
|
|
1258
|
+
|
|
1259
|
+
.date-picker-range .date-picker-day.start-range,
|
|
1260
|
+
.date-picker-range .date-picker-day.end-range {
|
|
1261
|
+
background-color: var(--q-color-primary);
|
|
1262
|
+
color: white;
|
|
1263
|
+
}
|
|
1264
|
+
|
|
1265
|
+
/* Time picker */
|
|
1266
|
+
.time-picker {
|
|
1267
|
+
display: flex;
|
|
1268
|
+
align-items: center;
|
|
1269
|
+
gap: var(--q-space-2);
|
|
1270
|
+
}
|
|
1271
|
+
|
|
1272
|
+
.time-picker-input {
|
|
1273
|
+
width: 60px;
|
|
1274
|
+
padding: var(--q-space-2);
|
|
1275
|
+
text-align: center;
|
|
1276
|
+
background-color: var(--q-glass-bg);
|
|
1277
|
+
border: 1px solid var(--q-glass-border);
|
|
1278
|
+
border-radius: var(--q-radius-md);
|
|
1279
|
+
color: var(--q-text-primary);
|
|
1280
|
+
font-size: 0.875rem;
|
|
1281
|
+
}
|
|
1282
|
+
|
|
1283
|
+
.time-picker-separator {
|
|
1284
|
+
font-weight: 600;
|
|
1285
|
+
color: var(--q-text-muted);
|
|
1286
|
+
}
|
|
1287
|
+
|
|
1288
|
+
/* Light mode */
|
|
1289
|
+
html[data-theme="light"] .date-picker-input {
|
|
1290
|
+
background-color: white;
|
|
1291
|
+
border-color: #e2e8f0;
|
|
1292
|
+
}
|
|
1293
|
+
|
|
1294
|
+
html[data-theme="light"] .date-picker-dropdown {
|
|
1295
|
+
background-color: white;
|
|
1296
|
+
border-color: #e2e8f0;
|
|
1297
|
+
}
|
|
1298
|
+
|
|
1299
|
+
html[data-theme="light"] .date-picker-day:hover {
|
|
1300
|
+
background-color: #f1f5f9;
|
|
1301
|
+
}
|
|
1302
|
+
|
|
1303
|
+
html[data-theme="light"] .time-picker-input {
|
|
1304
|
+
background-color: white;
|
|
1305
|
+
border-color: #e2e8f0;
|
|
1306
|
+
}
|
|
1307
|
+
|
|
1308
|
+
/* Toggle Switch */
|
|
1309
|
+
.toggle {
|
|
1310
|
+
position: relative;
|
|
1311
|
+
display: inline-block;
|
|
1312
|
+
width: 3rem;
|
|
1313
|
+
height: 1.5rem;
|
|
1314
|
+
}
|
|
517
1315
|
|
|
518
1316
|
.toggle-input {
|
|
519
1317
|
opacity: 0;
|
|
@@ -525,8 +1323,8 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
525
1323
|
position: absolute;
|
|
526
1324
|
cursor: pointer;
|
|
527
1325
|
inset: 0;
|
|
528
|
-
background-color:
|
|
529
|
-
transition: background-color var(--q-duration-
|
|
1326
|
+
background-color: #cbd5e1;
|
|
1327
|
+
transition: background-color var(--q-duration-150) var(--q-ease-in-out);
|
|
530
1328
|
border-radius: var(--q-radius-full);
|
|
531
1329
|
}
|
|
532
1330
|
|
|
@@ -538,7 +1336,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
538
1336
|
left: 0.125rem;
|
|
539
1337
|
bottom: 0.125rem;
|
|
540
1338
|
background-color: white;
|
|
541
|
-
transition: transform var(--q-duration-
|
|
1339
|
+
transition: transform var(--q-duration-150) var(--q-ease-in-out);
|
|
542
1340
|
border-radius: 50%;
|
|
543
1341
|
}
|
|
544
1342
|
|
|
@@ -570,7 +1368,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
570
1368
|
}
|
|
571
1369
|
|
|
572
1370
|
.animate-fade-in {
|
|
573
|
-
animation: fadeIn var(--q-duration-
|
|
1371
|
+
animation: fadeIn var(--q-duration-500) var(--q-ease-in-out);
|
|
574
1372
|
}
|
|
575
1373
|
|
|
576
1374
|
@keyframes fadeIn {
|
|
@@ -579,16 +1377,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
579
1377
|
}
|
|
580
1378
|
|
|
581
1379
|
.animate-slide-up {
|
|
582
|
-
animation: slideUp var(--q-duration-
|
|
583
|
-
}
|
|
584
|
-
|
|
585
|
-
@keyframes slideUp {
|
|
586
|
-
from { transform: translateY(20px); opacity: 0; }
|
|
587
|
-
to { transform: translateY(0); opacity: 1; }
|
|
588
|
-
}
|
|
589
|
-
|
|
590
|
-
.animate-slide-up {
|
|
591
|
-
animation: slideUp var(--q-duration-slow) var(--q-ease-out);
|
|
1380
|
+
animation: slideUp var(--q-duration-300) var(--q-ease-out);
|
|
592
1381
|
}
|
|
593
1382
|
|
|
594
1383
|
@keyframes slideUp {
|
|
@@ -597,7 +1386,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
597
1386
|
}
|
|
598
1387
|
|
|
599
1388
|
.animate-slide-down {
|
|
600
|
-
animation: slideDown var(--q-duration-
|
|
1389
|
+
animation: slideDown var(--q-duration-300) var(--q-ease-out);
|
|
601
1390
|
}
|
|
602
1391
|
|
|
603
1392
|
@keyframes slideDown {
|
|
@@ -617,109 +1406,425 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
617
1406
|
}
|
|
618
1407
|
|
|
619
1408
|
.table-wrapper::-webkit-scrollbar-track {
|
|
620
|
-
background:
|
|
1409
|
+
background: rgb(255 255 255 / 5%);
|
|
621
1410
|
border-radius: 4px;
|
|
622
1411
|
}
|
|
623
1412
|
|
|
624
1413
|
.table-wrapper::-webkit-scrollbar-thumb {
|
|
625
|
-
background: var(--q-color-
|
|
1414
|
+
background: var(--q-color-starlight-blue, #3b82f6);
|
|
626
1415
|
border-radius: 4px;
|
|
627
1416
|
}
|
|
628
1417
|
|
|
1418
|
+
html[data-theme="light"] .table-wrapper::-webkit-scrollbar-track {
|
|
1419
|
+
background: rgb(0 0 0 / 5%);
|
|
1420
|
+
}
|
|
1421
|
+
|
|
629
1422
|
.table {
|
|
630
1423
|
width: 100%;
|
|
631
1424
|
border-collapse: collapse;
|
|
632
1425
|
font-size: 0.875rem;
|
|
633
1426
|
text-align: left;
|
|
634
|
-
color: var(--q-
|
|
1427
|
+
color: var(--q-text-primary);
|
|
635
1428
|
}
|
|
636
1429
|
|
|
637
1430
|
.table th {
|
|
638
1431
|
padding: var(--q-space-3) var(--q-space-4);
|
|
639
1432
|
font-weight: 600;
|
|
640
|
-
background-color:
|
|
641
|
-
border-bottom: 2px solid
|
|
642
|
-
color: var(--q-
|
|
1433
|
+
background-color: rgb(255 255 255 / 5%);
|
|
1434
|
+
border-bottom: 2px solid rgb(255 255 255 / 10%);
|
|
1435
|
+
color: var(--q-text-primary);
|
|
643
1436
|
}
|
|
644
1437
|
|
|
645
1438
|
.table td {
|
|
646
1439
|
padding: var(--q-space-3) var(--q-space-4);
|
|
647
|
-
border-bottom: 1px solid
|
|
648
|
-
color: var(--q-
|
|
1440
|
+
border-bottom: 1px solid rgb(255 255 255 / 10%);
|
|
1441
|
+
color: var(--q-text-secondary);
|
|
649
1442
|
}
|
|
650
1443
|
|
|
651
1444
|
.table tbody tr:hover {
|
|
652
|
-
background-color:
|
|
1445
|
+
background-color: rgb(255 255 255 / 3%);
|
|
653
1446
|
}
|
|
654
1447
|
|
|
655
|
-
/*
|
|
656
|
-
|
|
657
|
-
|
|
1448
|
+
/* Light Mode Table Styles */
|
|
1449
|
+
html[data-theme="light"] .table th {
|
|
1450
|
+
background-color: #f8fafc;
|
|
1451
|
+
border-bottom-color: #e2e8f0;
|
|
1452
|
+
color: #0f172a;
|
|
658
1453
|
}
|
|
659
1454
|
|
|
660
|
-
|
|
661
|
-
|
|
1455
|
+
html[data-theme="light"] .table td {
|
|
1456
|
+
border-bottom-color: #e2e8f0;
|
|
1457
|
+
color: #334155;
|
|
662
1458
|
}
|
|
663
1459
|
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
============================================================================ */
|
|
1460
|
+
html[data-theme="light"] .table tbody tr:hover {
|
|
1461
|
+
background-color: #f1f5f9;
|
|
1462
|
+
}
|
|
668
1463
|
|
|
669
|
-
/*
|
|
670
|
-
.
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
background: var(--q-color-bg);
|
|
1464
|
+
/* Premium Table Component */
|
|
1465
|
+
.table-premium-container {
|
|
1466
|
+
background: var(--q-card-bg);
|
|
1467
|
+
border: 1px solid var(--q-card-border);
|
|
1468
|
+
border-radius: var(--q-radius-xl);
|
|
675
1469
|
overflow: hidden;
|
|
676
|
-
|
|
1470
|
+
box-shadow: var(--q-shadow-md);
|
|
677
1471
|
}
|
|
678
1472
|
|
|
679
|
-
.
|
|
680
|
-
|
|
1473
|
+
.table-premium-header {
|
|
1474
|
+
display: flex;
|
|
1475
|
+
justify-content: space-between;
|
|
1476
|
+
align-items: center;
|
|
1477
|
+
padding: var(--q-space-5) var(--q-space-6);
|
|
1478
|
+
border-bottom: 1px solid var(--q-card-border);
|
|
1479
|
+
background: rgba(255, 255, 255, 0.01);
|
|
681
1480
|
}
|
|
682
1481
|
|
|
683
|
-
.
|
|
684
|
-
|
|
1482
|
+
.table-premium-title {
|
|
1483
|
+
font-size: 1.125rem;
|
|
1484
|
+
font-weight: 600;
|
|
1485
|
+
color: var(--q-text-primary);
|
|
685
1486
|
}
|
|
686
1487
|
|
|
687
|
-
|
|
688
|
-
.sidebar {
|
|
689
|
-
background: var(--q-color-surface);
|
|
690
|
-
border-right: 1px solid var(--q-color-border);
|
|
691
|
-
padding: 1.5rem;
|
|
1488
|
+
.table-premium-filters {
|
|
692
1489
|
display: flex;
|
|
693
|
-
|
|
694
|
-
overflow-y: auto;
|
|
695
|
-
overflow-x: hidden;
|
|
1490
|
+
gap: var(--q-space-3);
|
|
696
1491
|
}
|
|
697
1492
|
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
overflow-x: hidden;
|
|
1493
|
+
.table-premium {
|
|
1494
|
+
width: 100%;
|
|
1495
|
+
border-collapse: collapse;
|
|
702
1496
|
}
|
|
703
1497
|
|
|
704
|
-
|
|
705
|
-
|
|
1498
|
+
.table-premium th {
|
|
1499
|
+
text-align: left;
|
|
1500
|
+
padding: var(--q-space-4) var(--q-space-6);
|
|
1501
|
+
font-size: 0.75rem;
|
|
1502
|
+
font-weight: 700;
|
|
1503
|
+
text-transform: uppercase;
|
|
1504
|
+
letter-spacing: 0.05em;
|
|
1505
|
+
color: var(--q-text-muted);
|
|
1506
|
+
border-bottom: 1px solid var(--q-card-border);
|
|
1507
|
+
background: rgba(255, 255, 255, 0.02);
|
|
1508
|
+
}
|
|
1509
|
+
|
|
1510
|
+
.table-premium td {
|
|
1511
|
+
padding: var(--q-space-4) var(--q-space-6);
|
|
1512
|
+
font-size: 0.875rem;
|
|
1513
|
+
color: var(--q-text-secondary);
|
|
1514
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
1515
|
+
}
|
|
1516
|
+
|
|
1517
|
+
.table-premium tbody tr:hover td {
|
|
1518
|
+
background: rgba(255, 255, 255, 0.02);
|
|
1519
|
+
}
|
|
1520
|
+
|
|
1521
|
+
.table-premium tbody tr:last-child td {
|
|
1522
|
+
border-bottom: none;
|
|
1523
|
+
}
|
|
1524
|
+
|
|
1525
|
+
.table-premium-footer {
|
|
1526
|
+
display: flex;
|
|
1527
|
+
justify-content: space-between;
|
|
1528
|
+
align-items: center;
|
|
1529
|
+
padding: var(--q-space-4) var(--q-space-6);
|
|
1530
|
+
border-top: 1px solid var(--q-card-border);
|
|
1531
|
+
background: rgba(255, 255, 255, 0.02);
|
|
1532
|
+
}
|
|
1533
|
+
|
|
1534
|
+
.table-premium-info {
|
|
1535
|
+
font-size: 0.875rem;
|
|
1536
|
+
color: var(--q-text-muted);
|
|
1537
|
+
}
|
|
1538
|
+
|
|
1539
|
+
/* Light Mode Overrides for Premium Table */
|
|
1540
|
+
html[data-theme="light"] .table-premium-container {
|
|
1541
|
+
background: var(--q-light-card-bg);
|
|
1542
|
+
border-color: var(--q-light-card-border);
|
|
1543
|
+
}
|
|
1544
|
+
|
|
1545
|
+
html[data-theme="light"] .table-premium-header {
|
|
1546
|
+
background: #fcfcfd;
|
|
1547
|
+
border-bottom-color: var(--q-light-card-border);
|
|
1548
|
+
}
|
|
1549
|
+
|
|
1550
|
+
html[data-theme="light"] .table-premium th {
|
|
1551
|
+
background: #f8fafc;
|
|
1552
|
+
border-bottom-color: var(--q-light-card-border);
|
|
1553
|
+
color: #64748b;
|
|
1554
|
+
}
|
|
1555
|
+
|
|
1556
|
+
html[data-theme="light"] .table-premium td {
|
|
1557
|
+
border-bottom-color: #f1f5f9;
|
|
1558
|
+
color: #334155;
|
|
1559
|
+
}
|
|
1560
|
+
|
|
1561
|
+
html[data-theme="light"] .table-premium tbody tr:hover td {
|
|
1562
|
+
background: #f8fafc;
|
|
1563
|
+
}
|
|
1564
|
+
|
|
1565
|
+
html[data-theme="light"] .table-premium-footer {
|
|
1566
|
+
background: #f8fafc;
|
|
1567
|
+
border-top-color: var(--q-light-card-border);
|
|
1568
|
+
}
|
|
1569
|
+
|
|
1570
|
+
/* ============================================================================
|
|
1571
|
+
LIST COMPONENT
|
|
1572
|
+
============================================================================ */
|
|
1573
|
+
|
|
1574
|
+
/* Base list container */
|
|
1575
|
+
.list {
|
|
1576
|
+
display: flex;
|
|
1577
|
+
flex-direction: column;
|
|
1578
|
+
gap: var(--q-space-1);
|
|
1579
|
+
}
|
|
1580
|
+
|
|
1581
|
+
/* Scrollable list container */
|
|
1582
|
+
.list-scroll {
|
|
1583
|
+
display: flex;
|
|
1584
|
+
flex-direction: column;
|
|
1585
|
+
gap: var(--q-space-1);
|
|
1586
|
+
overflow-y: auto;
|
|
1587
|
+
-webkit-overflow-scrolling: touch;
|
|
1588
|
+
max-height: 400px;
|
|
1589
|
+
padding: var(--q-space-2);
|
|
1590
|
+
}
|
|
1591
|
+
|
|
1592
|
+
.list-scroll::-webkit-scrollbar {
|
|
1593
|
+
width: 6px;
|
|
1594
|
+
}
|
|
1595
|
+
|
|
1596
|
+
.list-scroll::-webkit-scrollbar-track {
|
|
1597
|
+
background: transparent;
|
|
1598
|
+
}
|
|
1599
|
+
|
|
1600
|
+
.list-scroll::-webkit-scrollbar-thumb {
|
|
1601
|
+
background: var(--q-color-secondary);
|
|
1602
|
+
border-radius: 3px;
|
|
1603
|
+
opacity: 0.5;
|
|
1604
|
+
}
|
|
1605
|
+
|
|
1606
|
+
.list-scroll::-webkit-scrollbar-thumb:hover {
|
|
1607
|
+
background: var(--q-color-primary);
|
|
1608
|
+
}
|
|
1609
|
+
|
|
1610
|
+
/* List item */
|
|
1611
|
+
.list-item {
|
|
1612
|
+
display: flex;
|
|
1613
|
+
align-items: center;
|
|
1614
|
+
gap: var(--q-space-3);
|
|
1615
|
+
padding: var(--q-space-3) var(--q-space-4);
|
|
1616
|
+
border-radius: var(--q-radius-md);
|
|
1617
|
+
cursor: pointer;
|
|
1618
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
1619
|
+
color: var(--q-text-primary);
|
|
1620
|
+
}
|
|
1621
|
+
|
|
1622
|
+
.list-item:hover {
|
|
1623
|
+
background-color: var(--q-glass-bg);
|
|
1624
|
+
}
|
|
1625
|
+
|
|
1626
|
+
.list-item.active {
|
|
1627
|
+
background-color: color-mix(in srgb, var(--q-color-primary), transparent 90%);
|
|
1628
|
+
color: var(--q-color-primary);
|
|
1629
|
+
}
|
|
1630
|
+
|
|
1631
|
+
/* List item with avatar */
|
|
1632
|
+
.list-item-avatar {
|
|
1633
|
+
width: 40px;
|
|
1634
|
+
height: 40px;
|
|
1635
|
+
border-radius: 50%;
|
|
1636
|
+
object-fit: cover;
|
|
1637
|
+
flex-shrink: 0;
|
|
1638
|
+
}
|
|
1639
|
+
|
|
1640
|
+
/* List item content */
|
|
1641
|
+
.list-item-content {
|
|
1642
|
+
flex: 1;
|
|
1643
|
+
min-width: 0;
|
|
1644
|
+
}
|
|
1645
|
+
|
|
1646
|
+
.list-item-title {
|
|
1647
|
+
font-size: var(--q-space-4);
|
|
1648
|
+
font-weight: 500;
|
|
1649
|
+
color: var(--q-text-primary);
|
|
1650
|
+
white-space: nowrap;
|
|
1651
|
+
overflow: hidden;
|
|
1652
|
+
text-overflow: ellipsis;
|
|
1653
|
+
}
|
|
1654
|
+
|
|
1655
|
+
.list-item-subtitle {
|
|
1656
|
+
font-size: var(--q-space-3);
|
|
1657
|
+
color: var(--q-text-secondary);
|
|
1658
|
+
white-space: nowrap;
|
|
1659
|
+
overflow: hidden;
|
|
1660
|
+
text-overflow: ellipsis;
|
|
1661
|
+
}
|
|
1662
|
+
|
|
1663
|
+
.list-item-meta {
|
|
1664
|
+
font-size: var(--q-space-3);
|
|
1665
|
+
color: var(--q-text-muted);
|
|
1666
|
+
flex-shrink: 0;
|
|
1667
|
+
}
|
|
1668
|
+
|
|
1669
|
+
/* List item with icon */
|
|
1670
|
+
.list-item-icon {
|
|
1671
|
+
width: 20px;
|
|
1672
|
+
height: 20px;
|
|
1673
|
+
flex-shrink: 0;
|
|
1674
|
+
color: var(--q-text-muted);
|
|
1675
|
+
}
|
|
1676
|
+
|
|
1677
|
+
.list-item:hover .list-item-icon {
|
|
1678
|
+
color: var(--q-text-primary);
|
|
1679
|
+
}
|
|
1680
|
+
|
|
1681
|
+
/* List header */
|
|
1682
|
+
.list-header {
|
|
1683
|
+
display: flex;
|
|
1684
|
+
align-items: center;
|
|
1685
|
+
gap: var(--q-space-3);
|
|
1686
|
+
padding: var(--q-space-2) var(--q-space-4);
|
|
1687
|
+
font-size: var(--q-space-3);
|
|
1688
|
+
font-weight: 600;
|
|
1689
|
+
text-transform: uppercase;
|
|
1690
|
+
letter-spacing: 0.05em;
|
|
1691
|
+
color: var(--q-text-muted);
|
|
1692
|
+
border-bottom: 1px solid var(--q-glass-border);
|
|
1693
|
+
}
|
|
1694
|
+
|
|
1695
|
+
/* List divider */
|
|
1696
|
+
.list-divider {
|
|
1697
|
+
height: 1px;
|
|
1698
|
+
background-color: var(--q-glass-border);
|
|
1699
|
+
margin: var(--q-space-2) 0;
|
|
1700
|
+
}
|
|
1701
|
+
|
|
1702
|
+
/* List actions */
|
|
1703
|
+
.list-item-actions {
|
|
1704
|
+
display: flex;
|
|
1705
|
+
gap: var(--q-space-2);
|
|
1706
|
+
opacity: 0;
|
|
1707
|
+
transition: opacity var(--q-duration-150) var(--q-ease-in-out);
|
|
1708
|
+
}
|
|
1709
|
+
|
|
1710
|
+
.list-item:hover .list-item-actions {
|
|
1711
|
+
opacity: 1;
|
|
1712
|
+
}
|
|
1713
|
+
|
|
1714
|
+
/* Unread list item */
|
|
1715
|
+
.list-item-unread .list-item-title,
|
|
1716
|
+
.list-item-unread .list-item-subtitle {
|
|
1717
|
+
font-weight: 600;
|
|
1718
|
+
color: var(--q-text-primary);
|
|
1719
|
+
}
|
|
1720
|
+
|
|
1721
|
+
/* Compact list */
|
|
1722
|
+
.list-compact .list-item {
|
|
1723
|
+
padding: var(--q-space-2) var(--q-space-3);
|
|
1724
|
+
}
|
|
1725
|
+
|
|
1726
|
+
/* List with borders */
|
|
1727
|
+
.list-bordered {
|
|
1728
|
+
border: 1px solid var(--q-glass-border);
|
|
1729
|
+
border-radius: var(--q-radius-lg);
|
|
1730
|
+
padding: var(--q-space-2);
|
|
1731
|
+
}
|
|
1732
|
+
|
|
1733
|
+
/* Grid list (for cards/media items) */
|
|
1734
|
+
.list-grid {
|
|
1735
|
+
display: grid;
|
|
1736
|
+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
1737
|
+
gap: var(--q-space-4);
|
|
1738
|
+
padding: var(--q-space-4);
|
|
1739
|
+
}
|
|
1740
|
+
|
|
1741
|
+
/* Light mode overrides */
|
|
1742
|
+
html[data-theme="light"] .list-item:hover {
|
|
1743
|
+
background-color: #f1f5f9;
|
|
1744
|
+
}
|
|
1745
|
+
|
|
1746
|
+
html[data-theme="light"] .list-item.active {
|
|
1747
|
+
background-color: #eff6ff;
|
|
1748
|
+
}
|
|
1749
|
+
|
|
1750
|
+
html[data-theme="light"] .list-divider {
|
|
1751
|
+
background-color: #e2e8f0;
|
|
1752
|
+
}
|
|
1753
|
+
|
|
1754
|
+
/* Overflow Utility */
|
|
1755
|
+
.overflow-x-auto {
|
|
1756
|
+
overflow-x: auto;
|
|
1757
|
+
}
|
|
1758
|
+
|
|
1759
|
+
.overflow-y-auto {
|
|
1760
|
+
overflow-y: auto;
|
|
1761
|
+
}
|
|
1762
|
+
|
|
1763
|
+
/* ============================================================================
|
|
1764
|
+
APP LAYOUT PATTERNS
|
|
1765
|
+
Standardized layout components for dashboard and admin applications
|
|
1766
|
+
============================================================================ */
|
|
1767
|
+
|
|
1768
|
+
/* Main app layout - sidebar + content grid */
|
|
1769
|
+
.app-layout {
|
|
1770
|
+
display: grid;
|
|
1771
|
+
grid-template-columns: 260px minmax(0, 1fr);
|
|
1772
|
+
height: 100vh;
|
|
1773
|
+
background: var(--q-bg-primary);
|
|
1774
|
+
overflow: hidden;
|
|
1775
|
+
max-width: 100vw;
|
|
1776
|
+
}
|
|
1777
|
+
|
|
1778
|
+
.app-layout-narrow {
|
|
1779
|
+
grid-template-columns: 80px minmax(0, 1fr);
|
|
1780
|
+
}
|
|
1781
|
+
|
|
1782
|
+
.app-layout-wide {
|
|
1783
|
+
grid-template-columns: 320px minmax(0, 1fr);
|
|
1784
|
+
}
|
|
1785
|
+
|
|
1786
|
+
/* Sidebar navigation container */
|
|
1787
|
+
.sidebar {
|
|
1788
|
+
background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 8, 26, 0.98) 100%);
|
|
1789
|
+
border-right: 1px solid rgba(255, 255, 255, 0.08);
|
|
1790
|
+
padding: 1.5rem;
|
|
1791
|
+
display: flex;
|
|
1792
|
+
flex-direction: column;
|
|
1793
|
+
overflow-y: auto;
|
|
1794
|
+
overflow-x: hidden;
|
|
1795
|
+
}
|
|
1796
|
+
|
|
1797
|
+
/* Main content area */
|
|
1798
|
+
.main-content {
|
|
1799
|
+
overflow-y: auto;
|
|
1800
|
+
overflow-x: hidden;
|
|
1801
|
+
}
|
|
1802
|
+
|
|
1803
|
+
/* Top Header Bar */
|
|
1804
|
+
.top-nav {
|
|
706
1805
|
display: flex;
|
|
707
1806
|
justify-content: space-between;
|
|
708
1807
|
align-items: center;
|
|
709
|
-
margin-bottom: 2rem;
|
|
710
1808
|
padding: 1rem 1.5rem;
|
|
711
|
-
background:
|
|
712
|
-
|
|
1809
|
+
background: rgba(255, 255, 255, 0.03);
|
|
1810
|
+
backdrop-filter: blur(12px);
|
|
1811
|
+
-webkit-backdrop-filter: blur(12px);
|
|
1812
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
713
1813
|
border-radius: 1rem;
|
|
1814
|
+
margin-bottom: 2rem;
|
|
714
1815
|
}
|
|
715
1816
|
|
|
716
|
-
/* Top navigation actions container */
|
|
717
1817
|
.top-nav-actions {
|
|
718
1818
|
display: flex;
|
|
719
1819
|
align-items: center;
|
|
720
1820
|
gap: 0.75rem;
|
|
721
1821
|
}
|
|
722
1822
|
|
|
1823
|
+
html[data-theme="light"] .top-nav {
|
|
1824
|
+
background: var(--q-light-card-bg, #ffffff);
|
|
1825
|
+
border-color: var(--q-light-card-border, #e2e8f0);
|
|
1826
|
+
}
|
|
1827
|
+
|
|
723
1828
|
/* Page header with actions */
|
|
724
1829
|
.page-header {
|
|
725
1830
|
display: flex;
|
|
@@ -728,13 +1833,36 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
728
1833
|
margin-bottom: 2rem;
|
|
729
1834
|
}
|
|
730
1835
|
|
|
731
|
-
|
|
1836
|
+
.page-title {
|
|
1837
|
+
font-size: 1.875rem;
|
|
1838
|
+
font-weight: 700;
|
|
1839
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
1840
|
+
margin: 0 0 0.25rem 0;
|
|
1841
|
+
line-height: 1.2;
|
|
1842
|
+
}
|
|
1843
|
+
|
|
1844
|
+
.page-subtitle {
|
|
1845
|
+
font-size: 0.875rem;
|
|
1846
|
+
color: var(--q-text-muted, #64748b);
|
|
1847
|
+
margin: 0;
|
|
1848
|
+
}
|
|
1849
|
+
|
|
732
1850
|
.page-actions {
|
|
733
1851
|
display: flex;
|
|
734
1852
|
align-items: center;
|
|
735
1853
|
gap: 0.75rem;
|
|
736
1854
|
}
|
|
737
1855
|
|
|
1856
|
+
html[data-theme="light"] .page-title {
|
|
1857
|
+
color: #0f172a;
|
|
1858
|
+
}
|
|
1859
|
+
|
|
1860
|
+
/* Light mode overrides for layout */
|
|
1861
|
+
html[data-theme="light"] .sidebar {
|
|
1862
|
+
background: linear-gradient(180deg, var(--q-light-card-bg) 0%, var(--q-light-bg) 100%);
|
|
1863
|
+
border-right-color: var(--q-light-card-border);
|
|
1864
|
+
}
|
|
1865
|
+
|
|
738
1866
|
/* Responsive layout adjustments */
|
|
739
1867
|
@media (max-width: 1024px) {
|
|
740
1868
|
.app-layout {
|
|
@@ -755,6 +1883,9 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
755
1883
|
display: none;
|
|
756
1884
|
}
|
|
757
1885
|
|
|
1886
|
+
.main-content {
|
|
1887
|
+
}
|
|
1888
|
+
|
|
758
1889
|
.page-header {
|
|
759
1890
|
flex-direction: column;
|
|
760
1891
|
align-items: flex-start;
|
|
@@ -762,6 +1893,61 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
762
1893
|
}
|
|
763
1894
|
}
|
|
764
1895
|
|
|
1896
|
+
/* ============================================================================
|
|
1897
|
+
BREADCRUMBS
|
|
1898
|
+
Navigation trails for complex applications
|
|
1899
|
+
============================================================================ */
|
|
1900
|
+
|
|
1901
|
+
.breadcrumb {
|
|
1902
|
+
display: flex;
|
|
1903
|
+
align-items: center;
|
|
1904
|
+
gap: var(--q-space-2, 0.5rem);
|
|
1905
|
+
font-size: 0.875rem;
|
|
1906
|
+
color: var(--q-text-muted, #64748b);
|
|
1907
|
+
list-style: none;
|
|
1908
|
+
padding: 0;
|
|
1909
|
+
margin: 0;
|
|
1910
|
+
}
|
|
1911
|
+
|
|
1912
|
+
.breadcrumb-item {
|
|
1913
|
+
display: flex;
|
|
1914
|
+
align-items: center;
|
|
1915
|
+
gap: var(--q-space-2, 0.5rem);
|
|
1916
|
+
}
|
|
1917
|
+
|
|
1918
|
+
.breadcrumb-link {
|
|
1919
|
+
color: var(--q-text-secondary, #94a3b8);
|
|
1920
|
+
text-decoration: none;
|
|
1921
|
+
transition: color var(--q-duration-150, 0.2s);
|
|
1922
|
+
}
|
|
1923
|
+
|
|
1924
|
+
.breadcrumb-link:hover {
|
|
1925
|
+
color: var(--q-color-primary, #00d4ff);
|
|
1926
|
+
}
|
|
1927
|
+
|
|
1928
|
+
.breadcrumb-separator {
|
|
1929
|
+
color: var(--q-text-muted, #64748b);
|
|
1930
|
+
opacity: 0.6;
|
|
1931
|
+
}
|
|
1932
|
+
|
|
1933
|
+
.breadcrumb-current {
|
|
1934
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
1935
|
+
font-weight: 500;
|
|
1936
|
+
}
|
|
1937
|
+
|
|
1938
|
+
/* Light mode overrides for breadcrumbs */
|
|
1939
|
+
html[data-theme="light"] .breadcrumb-link {
|
|
1940
|
+
color: #64748b;
|
|
1941
|
+
}
|
|
1942
|
+
|
|
1943
|
+
html[data-theme="light"] .breadcrumb-link:hover {
|
|
1944
|
+
color: #2563eb;
|
|
1945
|
+
}
|
|
1946
|
+
|
|
1947
|
+
html[data-theme="light"] .breadcrumb-current {
|
|
1948
|
+
color: #0f172a;
|
|
1949
|
+
}
|
|
1950
|
+
|
|
765
1951
|
/* ============================================================================
|
|
766
1952
|
NAVIGATION PATTERNS
|
|
767
1953
|
Sidebar navigation items and sections
|
|
@@ -778,7 +1964,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
778
1964
|
font-weight: 700;
|
|
779
1965
|
text-transform: uppercase;
|
|
780
1966
|
letter-spacing: 0.15em;
|
|
781
|
-
color: var(--q-
|
|
1967
|
+
color: var(--q-text-muted, #64748b);
|
|
782
1968
|
margin-bottom: 0.75rem;
|
|
783
1969
|
padding-left: 0.75rem;
|
|
784
1970
|
}
|
|
@@ -790,35 +1976,46 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
790
1976
|
gap: 0.875rem;
|
|
791
1977
|
padding: 0.75rem;
|
|
792
1978
|
border-radius: 0.625rem;
|
|
793
|
-
color: var(--q-
|
|
1979
|
+
color: var(--q-text-secondary, #94a3b8);
|
|
794
1980
|
font-size: 0.875rem;
|
|
795
1981
|
cursor: pointer;
|
|
796
|
-
transition: all
|
|
1982
|
+
transition: all 0.2s ease;
|
|
797
1983
|
margin-bottom: 0.25rem;
|
|
798
1984
|
text-decoration: none;
|
|
799
1985
|
border: none;
|
|
800
1986
|
background: transparent;
|
|
801
1987
|
width: 100%;
|
|
802
1988
|
text-align: left;
|
|
1989
|
+
position: relative;
|
|
803
1990
|
}
|
|
804
1991
|
|
|
805
1992
|
.nav-item:hover {
|
|
806
|
-
background:
|
|
807
|
-
color: var(--q-
|
|
1993
|
+
background: rgba(255, 255, 255, 0.05);
|
|
1994
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
808
1995
|
}
|
|
809
1996
|
|
|
810
1997
|
.nav-item.active {
|
|
811
|
-
background:
|
|
812
|
-
color: var(--q-color-
|
|
1998
|
+
background: rgba(0, 212, 255, 0.12);
|
|
1999
|
+
color: var(--q-color-starlight, #00d4ff);
|
|
2000
|
+
}
|
|
2001
|
+
|
|
2002
|
+
.nav-item.active::before {
|
|
2003
|
+
content: '';
|
|
2004
|
+
position: absolute;
|
|
2005
|
+
left: -1.5rem; /* Align with sidebar edge */
|
|
2006
|
+
top: 50%;
|
|
2007
|
+
transform: translateY(-50%);
|
|
2008
|
+
width: 3px;
|
|
2009
|
+
height: 20px;
|
|
2010
|
+
background: var(--q-color-starlight, #00d4ff);
|
|
2011
|
+
border-radius: 0 2px 2px 0;
|
|
813
2012
|
}
|
|
814
2013
|
|
|
815
|
-
/* Constrain nav item icons
|
|
816
|
-
.nav-item svg {
|
|
2014
|
+
/* Constrain nav item icons */
|
|
2015
|
+
.nav-item i, .nav-item .q-icon, .nav-item svg {
|
|
817
2016
|
width: 1.125rem;
|
|
818
2017
|
height: 1.125rem;
|
|
819
|
-
|
|
820
|
-
max-height: 1.125rem;
|
|
821
|
-
flex-shrink: 0;
|
|
2018
|
+
font-size: 1.125rem;
|
|
822
2019
|
}
|
|
823
2020
|
|
|
824
2021
|
/* Sidebar scrollbar styling to prevent layout shift */
|
|
@@ -831,10 +2028,14 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
831
2028
|
}
|
|
832
2029
|
|
|
833
2030
|
.sidebar::-webkit-scrollbar-thumb {
|
|
834
|
-
background:
|
|
2031
|
+
background: rgba(255, 255, 255, 0.1);
|
|
835
2032
|
border-radius: 2px;
|
|
836
2033
|
}
|
|
837
2034
|
|
|
2035
|
+
html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb {
|
|
2036
|
+
background: #cbd5e1;
|
|
2037
|
+
}
|
|
2038
|
+
|
|
838
2039
|
/* Navigation badge (count) */
|
|
839
2040
|
.nav-badge {
|
|
840
2041
|
margin-left: auto;
|
|
@@ -842,41 +2043,133 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
842
2043
|
font-weight: 600;
|
|
843
2044
|
padding: 0.125rem 0.5rem;
|
|
844
2045
|
border-radius: 9999px;
|
|
845
|
-
background:
|
|
846
|
-
color:
|
|
2046
|
+
background: rgba(239, 68, 68, 0.2);
|
|
2047
|
+
color: #f87171;
|
|
2048
|
+
}
|
|
2049
|
+
|
|
2050
|
+
/* Light mode overrides for navigation */
|
|
2051
|
+
html[data-theme="light"] .nav-item:hover {
|
|
2052
|
+
background: #f1f5f9;
|
|
2053
|
+
color: #0f172a;
|
|
2054
|
+
}
|
|
2055
|
+
|
|
2056
|
+
html[data-theme="light"] .nav-section-title {
|
|
2057
|
+
color: #64748b;
|
|
847
2058
|
}
|
|
848
2059
|
|
|
849
2060
|
/* ============================================================================
|
|
850
|
-
|
|
851
|
-
|
|
2061
|
+
QUICK ACTIONS
|
|
2062
|
+
Prominent action cards for dashboard navigation
|
|
852
2063
|
============================================================================ */
|
|
853
2064
|
|
|
854
|
-
|
|
855
|
-
.stats-grid {
|
|
2065
|
+
.quick-action-grid {
|
|
856
2066
|
display: grid;
|
|
857
|
-
grid-template-columns: repeat(
|
|
2067
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
858
2068
|
gap: 1.5rem;
|
|
859
|
-
margin-bottom: 2rem;
|
|
860
2069
|
}
|
|
861
2070
|
|
|
862
|
-
|
|
863
|
-
.
|
|
864
|
-
|
|
865
|
-
border: 1px solid var(--q-color-border);
|
|
2071
|
+
.quick-action-card {
|
|
2072
|
+
background: rgba(255, 255, 255, 0.03);
|
|
2073
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
866
2074
|
border-radius: 1rem;
|
|
867
2075
|
padding: 1.5rem;
|
|
868
|
-
|
|
2076
|
+
cursor: pointer;
|
|
2077
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2078
|
+
text-align: center;
|
|
2079
|
+
display: flex;
|
|
2080
|
+
flex-direction: column;
|
|
2081
|
+
align-items: center;
|
|
2082
|
+
gap: 0.75rem;
|
|
869
2083
|
}
|
|
870
2084
|
|
|
871
|
-
.
|
|
872
|
-
background:
|
|
873
|
-
transform: translateY(-
|
|
2085
|
+
.quick-action-card:hover {
|
|
2086
|
+
background: rgba(255, 255, 255, 0.05);
|
|
2087
|
+
transform: translateY(-4px);
|
|
2088
|
+
border-color: var(--q-color-primary, #00d4ff);
|
|
2089
|
+
box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.5);
|
|
874
2090
|
}
|
|
875
2091
|
|
|
876
|
-
|
|
877
|
-
|
|
2092
|
+
.quick-action-icon {
|
|
2093
|
+
width: 48px;
|
|
2094
|
+
height: 48px;
|
|
2095
|
+
border-radius: 0.75rem;
|
|
878
2096
|
display: flex;
|
|
879
|
-
|
|
2097
|
+
align-items: center;
|
|
2098
|
+
justify-content: center;
|
|
2099
|
+
background: rgba(255, 255, 255, 0.05);
|
|
2100
|
+
color: var(--q-color-primary, #00d4ff);
|
|
2101
|
+
transition: all 0.3s ease;
|
|
2102
|
+
}
|
|
2103
|
+
|
|
2104
|
+
.quick-action-icon i, .quick-action-icon .q-icon, .quick-action-icon svg {
|
|
2105
|
+
width: 1.75rem;
|
|
2106
|
+
height: 1.75rem;
|
|
2107
|
+
font-size: 1.75rem;
|
|
2108
|
+
}
|
|
2109
|
+
|
|
2110
|
+
.quick-action-card:hover .quick-action-icon {
|
|
2111
|
+
background: var(--q-color-primary, #00d4ff);
|
|
2112
|
+
color: white;
|
|
2113
|
+
transform: scale(1.1);
|
|
2114
|
+
}
|
|
2115
|
+
|
|
2116
|
+
.quick-action-title {
|
|
2117
|
+
font-size: 1rem;
|
|
2118
|
+
font-weight: 600;
|
|
2119
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
2120
|
+
}
|
|
2121
|
+
|
|
2122
|
+
.quick-action-desc {
|
|
2123
|
+
font-size: 0.8125rem;
|
|
2124
|
+
color: var(--q-text-muted, #64748b);
|
|
2125
|
+
line-height: 1.4;
|
|
2126
|
+
}
|
|
2127
|
+
|
|
2128
|
+
/* Light mode overrides for quick actions */
|
|
2129
|
+
html[data-theme="light"] .quick-action-card {
|
|
2130
|
+
background: #ffffff;
|
|
2131
|
+
border-color: #e2e8f0;
|
|
2132
|
+
}
|
|
2133
|
+
|
|
2134
|
+
html[data-theme="light"] .quick-action-card:hover {
|
|
2135
|
+
background: #f8fafc;
|
|
2136
|
+
}
|
|
2137
|
+
|
|
2138
|
+
html[data-theme="light"] .quick-action-icon {
|
|
2139
|
+
background: #f1f5f9;
|
|
2140
|
+
}
|
|
2141
|
+
|
|
2142
|
+
/* ============================================================================
|
|
2143
|
+
STAT CARDS
|
|
2144
|
+
Dashboard metric cards with icons and values
|
|
2145
|
+
============================================================================ */
|
|
2146
|
+
|
|
2147
|
+
/* Stats grid layout */
|
|
2148
|
+
.stats-grid {
|
|
2149
|
+
display: grid;
|
|
2150
|
+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
2151
|
+
gap: 1.5rem;
|
|
2152
|
+
margin-bottom: 2rem;
|
|
2153
|
+
}
|
|
2154
|
+
|
|
2155
|
+
/* Individual stat card */
|
|
2156
|
+
.stat-card {
|
|
2157
|
+
background: rgba(255, 255, 255, 0.03);
|
|
2158
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
2159
|
+
border-radius: 1rem;
|
|
2160
|
+
padding: 1.5rem;
|
|
2161
|
+
transition: all 0.3s ease;
|
|
2162
|
+
}
|
|
2163
|
+
|
|
2164
|
+
.stat-card:hover {
|
|
2165
|
+
background: rgba(255, 255, 255, 0.05);
|
|
2166
|
+
transform: translateY(-2px);
|
|
2167
|
+
}
|
|
2168
|
+
|
|
2169
|
+
/* Stat card header with icon and trend */
|
|
2170
|
+
.stat-header {
|
|
2171
|
+
display: flex;
|
|
2172
|
+
justify-content: space-between;
|
|
880
2173
|
align-items: flex-start;
|
|
881
2174
|
margin-bottom: 1rem;
|
|
882
2175
|
}
|
|
@@ -891,44 +2184,50 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
891
2184
|
justify-content: center;
|
|
892
2185
|
}
|
|
893
2186
|
|
|
2187
|
+
.stat-icon i, .stat-icon .q-icon, .stat-icon svg {
|
|
2188
|
+
width: 1.5rem;
|
|
2189
|
+
height: 1.5rem;
|
|
2190
|
+
font-size: 1.5rem;
|
|
2191
|
+
}
|
|
2192
|
+
|
|
894
2193
|
/* Icon color variants */
|
|
895
2194
|
.stat-icon-blue {
|
|
896
|
-
background:
|
|
897
|
-
color:
|
|
2195
|
+
background: rgba(59, 130, 246, 0.15);
|
|
2196
|
+
color: #60a5fa;
|
|
898
2197
|
}
|
|
899
2198
|
|
|
900
2199
|
.stat-icon-green {
|
|
901
|
-
background:
|
|
902
|
-
color:
|
|
2200
|
+
background: rgba(16, 185, 129, 0.15);
|
|
2201
|
+
color: #34d399;
|
|
903
2202
|
}
|
|
904
2203
|
|
|
905
2204
|
.stat-icon-orange {
|
|
906
|
-
background:
|
|
907
|
-
color:
|
|
2205
|
+
background: rgba(249, 115, 22, 0.15);
|
|
2206
|
+
color: #fb923c;
|
|
908
2207
|
}
|
|
909
2208
|
|
|
910
2209
|
.stat-icon-purple {
|
|
911
|
-
background:
|
|
912
|
-
color:
|
|
2210
|
+
background: rgba(139, 92, 246, 0.15);
|
|
2211
|
+
color: #a78bfa;
|
|
913
2212
|
}
|
|
914
2213
|
|
|
915
2214
|
.stat-icon-red {
|
|
916
|
-
background:
|
|
917
|
-
color:
|
|
2215
|
+
background: rgba(239, 68, 68, 0.15);
|
|
2216
|
+
color: #f87171;
|
|
918
2217
|
}
|
|
919
2218
|
|
|
920
2219
|
/* Stat value display */
|
|
921
2220
|
.stat-value {
|
|
922
2221
|
font-size: 1.875rem;
|
|
923
2222
|
font-weight: 700;
|
|
924
|
-
color: var(--q-
|
|
2223
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
925
2224
|
margin-bottom: 0.25rem;
|
|
926
2225
|
}
|
|
927
2226
|
|
|
928
2227
|
/* Stat label */
|
|
929
2228
|
.stat-label {
|
|
930
2229
|
font-size: 0.875rem;
|
|
931
|
-
color: var(--q-
|
|
2230
|
+
color: var(--q-text-muted, #64748b);
|
|
932
2231
|
}
|
|
933
2232
|
|
|
934
2233
|
/* Trend indicator */
|
|
@@ -942,14 +2241,117 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
942
2241
|
border-radius: 0.375rem;
|
|
943
2242
|
}
|
|
944
2243
|
|
|
2244
|
+
.stat-trend i, .stat-trend .q-icon, .stat-trend svg {
|
|
2245
|
+
width: 0.75rem;
|
|
2246
|
+
height: 0.75rem;
|
|
2247
|
+
font-size: 0.75rem;
|
|
2248
|
+
}
|
|
2249
|
+
|
|
945
2250
|
.stat-trend-up {
|
|
946
|
-
background:
|
|
947
|
-
color:
|
|
2251
|
+
background: rgba(16, 185, 129, 0.15);
|
|
2252
|
+
color: #34d399;
|
|
948
2253
|
}
|
|
949
2254
|
|
|
950
2255
|
.stat-trend-down {
|
|
951
|
-
background:
|
|
952
|
-
color:
|
|
2256
|
+
background: rgba(239, 68, 68, 0.15);
|
|
2257
|
+
color: #f87171;
|
|
2258
|
+
}
|
|
2259
|
+
|
|
2260
|
+
/* ============================================================================
|
|
2261
|
+
ACTIVITY FEED
|
|
2262
|
+
Timeline of recent events and updates
|
|
2263
|
+
============================================================================ */
|
|
2264
|
+
|
|
2265
|
+
.activity-list {
|
|
2266
|
+
display: flex;
|
|
2267
|
+
flex-direction: column;
|
|
2268
|
+
}
|
|
2269
|
+
|
|
2270
|
+
.activity-item {
|
|
2271
|
+
display: flex;
|
|
2272
|
+
align-items: flex-start;
|
|
2273
|
+
gap: 1rem;
|
|
2274
|
+
padding: 1rem 0;
|
|
2275
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
2276
|
+
}
|
|
2277
|
+
|
|
2278
|
+
.activity-item:last-child {
|
|
2279
|
+
border-bottom: none;
|
|
2280
|
+
}
|
|
2281
|
+
|
|
2282
|
+
.activity-icon {
|
|
2283
|
+
width: 36px;
|
|
2284
|
+
height: 36px;
|
|
2285
|
+
border-radius: 50%;
|
|
2286
|
+
display: flex;
|
|
2287
|
+
align-items: center;
|
|
2288
|
+
justify-content: center;
|
|
2289
|
+
flex-shrink: 0;
|
|
2290
|
+
}
|
|
2291
|
+
|
|
2292
|
+
.activity-icon i, .activity-icon .q-icon, .activity-icon svg {
|
|
2293
|
+
width: 1rem;
|
|
2294
|
+
height: 1rem;
|
|
2295
|
+
font-size: 1rem;
|
|
2296
|
+
}
|
|
2297
|
+
|
|
2298
|
+
.activity-content {
|
|
2299
|
+
flex: 1;
|
|
2300
|
+
}
|
|
2301
|
+
|
|
2302
|
+
.activity-text {
|
|
2303
|
+
font-size: 0.875rem;
|
|
2304
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
2305
|
+
margin-bottom: 0.25rem;
|
|
2306
|
+
}
|
|
2307
|
+
|
|
2308
|
+
.activity-text span {
|
|
2309
|
+
color: var(--q-color-starlight, #00d4ff);
|
|
2310
|
+
font-weight: 500;
|
|
2311
|
+
}
|
|
2312
|
+
|
|
2313
|
+
.activity-time {
|
|
2314
|
+
font-size: 0.75rem;
|
|
2315
|
+
color: var(--q-text-muted, #64748b);
|
|
2316
|
+
}
|
|
2317
|
+
|
|
2318
|
+
/* Light mode overrides for activity feed */
|
|
2319
|
+
html[data-theme="light"] .activity-item {
|
|
2320
|
+
border-bottom-color: #f1f5f9;
|
|
2321
|
+
}
|
|
2322
|
+
|
|
2323
|
+
html[data-theme="light"] .activity-text {
|
|
2324
|
+
color: #0f172a;
|
|
2325
|
+
}
|
|
2326
|
+
|
|
2327
|
+
/* Light mode overrides for stat cards */
|
|
2328
|
+
html[data-theme="light"] .stat-card {
|
|
2329
|
+
background: var(--q-light-card-bg);
|
|
2330
|
+
border-color: var(--q-light-card-border);
|
|
2331
|
+
}
|
|
2332
|
+
|
|
2333
|
+
html[data-theme="light"] .stat-card:hover {
|
|
2334
|
+
background: #f8fafc;
|
|
2335
|
+
}
|
|
2336
|
+
|
|
2337
|
+
html[data-theme="light"] .stat-icon-blue {
|
|
2338
|
+
background: rgba(59, 130, 246, 0.1);
|
|
2339
|
+
}
|
|
2340
|
+
|
|
2341
|
+
html[data-theme="light"] .stat-icon-green {
|
|
2342
|
+
background: rgba(16, 185, 129, 0.1);
|
|
2343
|
+
}
|
|
2344
|
+
|
|
2345
|
+
html[data-theme="light"] .stat-icon-orange {
|
|
2346
|
+
background: rgba(249, 115, 22, 0.1);
|
|
2347
|
+
}
|
|
2348
|
+
|
|
2349
|
+
html[data-theme="light"] .stat-icon-purple {
|
|
2350
|
+
background: rgba(139, 92, 246, 0.1);
|
|
2351
|
+
}
|
|
2352
|
+
|
|
2353
|
+
html[data-theme="light"] .stat-icon-red {
|
|
2354
|
+
background: rgba(239, 68, 68, 0.1);
|
|
953
2355
|
}
|
|
954
2356
|
|
|
955
2357
|
/* ============================================================================
|
|
@@ -962,20 +2364,26 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
962
2364
|
width: 40px;
|
|
963
2365
|
height: 40px;
|
|
964
2366
|
border-radius: 0.625rem;
|
|
965
|
-
background:
|
|
966
|
-
border: 1px solid
|
|
967
|
-
color: var(--q-
|
|
2367
|
+
background: rgba(255, 255, 255, 0.05);
|
|
2368
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
2369
|
+
color: var(--q-text-secondary, #94a3b8);
|
|
968
2370
|
display: flex;
|
|
969
2371
|
align-items: center;
|
|
970
2372
|
justify-content: center;
|
|
971
2373
|
cursor: pointer;
|
|
972
|
-
transition: all
|
|
2374
|
+
transition: all 0.2s ease;
|
|
973
2375
|
position: relative;
|
|
974
2376
|
}
|
|
975
2377
|
|
|
2378
|
+
.icon-btn i, .icon-btn .q-icon {
|
|
2379
|
+
width: 1.25rem;
|
|
2380
|
+
height: 1.25rem;
|
|
2381
|
+
font-size: 1.25rem;
|
|
2382
|
+
}
|
|
2383
|
+
|
|
976
2384
|
.icon-btn:hover {
|
|
977
|
-
background:
|
|
978
|
-
color: var(--q-
|
|
2385
|
+
background: rgba(255, 255, 255, 0.08);
|
|
2386
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
979
2387
|
}
|
|
980
2388
|
|
|
981
2389
|
/* Circular icon button */
|
|
@@ -990,6 +2398,12 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
990
2398
|
border-radius: 0.5rem;
|
|
991
2399
|
}
|
|
992
2400
|
|
|
2401
|
+
.icon-btn-sm i, .icon-btn-sm .q-icon {
|
|
2402
|
+
width: 1rem;
|
|
2403
|
+
height: 1rem;
|
|
2404
|
+
font-size: 1rem;
|
|
2405
|
+
}
|
|
2406
|
+
|
|
993
2407
|
/* Large icon button */
|
|
994
2408
|
.icon-btn-lg {
|
|
995
2409
|
width: 48px;
|
|
@@ -997,6 +2411,12 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
997
2411
|
border-radius: 0.75rem;
|
|
998
2412
|
}
|
|
999
2413
|
|
|
2414
|
+
.icon-btn-lg i, .icon-btn-lg .q-icon {
|
|
2415
|
+
width: 1.5rem;
|
|
2416
|
+
height: 1.5rem;
|
|
2417
|
+
font-size: 1.5rem;
|
|
2418
|
+
}
|
|
2419
|
+
|
|
1000
2420
|
/* Action buttons container */
|
|
1001
2421
|
.action-buttons {
|
|
1002
2422
|
display: flex;
|
|
@@ -1008,26 +2428,53 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
1008
2428
|
width: 32px;
|
|
1009
2429
|
height: 32px;
|
|
1010
2430
|
border-radius: 0.5rem;
|
|
1011
|
-
background:
|
|
1012
|
-
border: 1px solid
|
|
1013
|
-
color: var(--q-
|
|
2431
|
+
background: rgba(255, 255, 255, 0.05);
|
|
2432
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
2433
|
+
color: var(--q-text-muted, #64748b);
|
|
1014
2434
|
display: flex;
|
|
1015
2435
|
align-items: center;
|
|
1016
2436
|
justify-content: center;
|
|
1017
2437
|
cursor: pointer;
|
|
1018
|
-
transition: all
|
|
2438
|
+
transition: all 0.2s ease;
|
|
2439
|
+
}
|
|
2440
|
+
|
|
2441
|
+
.action-btn i, .action-btn .q-icon {
|
|
2442
|
+
width: 1rem;
|
|
2443
|
+
height: 1rem;
|
|
2444
|
+
font-size: 1rem;
|
|
1019
2445
|
}
|
|
1020
2446
|
|
|
1021
2447
|
.action-btn:hover {
|
|
1022
|
-
background:
|
|
1023
|
-
color: var(--q-
|
|
2448
|
+
background: rgba(255, 255, 255, 0.08);
|
|
2449
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
1024
2450
|
}
|
|
1025
2451
|
|
|
2452
|
+
/* ICON SIZING UTILITIES */
|
|
2453
|
+
.icon-xs { width: 0.75rem !important; height: 0.75rem !important; font-size: 0.75rem !important; }
|
|
2454
|
+
.icon-sm { width: 1rem !important; height: 1rem !important; font-size: 1rem !important; }
|
|
2455
|
+
.icon-md { width: 1.25rem !important; height: 1.25rem !important; font-size: 1.25rem !important; }
|
|
2456
|
+
.icon-lg { width: 1.5rem !important; height: 1.5rem !important; font-size: 1.5rem !important; }
|
|
2457
|
+
.icon-xl { width: 2rem !important; height: 2rem !important; font-size: 2rem !important; }
|
|
2458
|
+
|
|
1026
2459
|
/* Delete action button */
|
|
1027
2460
|
.action-btn-delete:hover {
|
|
1028
|
-
background:
|
|
1029
|
-
color:
|
|
1030
|
-
border-color:
|
|
2461
|
+
background: rgba(239, 68, 68, 0.15);
|
|
2462
|
+
color: #f87171;
|
|
2463
|
+
border-color: rgba(239, 68, 68, 0.3);
|
|
2464
|
+
}
|
|
2465
|
+
|
|
2466
|
+
/* Light mode overrides for icon buttons */
|
|
2467
|
+
html[data-theme="light"] .icon-btn,
|
|
2468
|
+
html[data-theme="light"] .action-btn {
|
|
2469
|
+
background: #f1f5f9;
|
|
2470
|
+
border-color: #e2e8f0;
|
|
2471
|
+
color: #64748b;
|
|
2472
|
+
}
|
|
2473
|
+
|
|
2474
|
+
html[data-theme="light"] .icon-btn:hover,
|
|
2475
|
+
html[data-theme="light"] .action-btn:hover {
|
|
2476
|
+
background: #e2e8f0;
|
|
2477
|
+
color: #0f172a;
|
|
1031
2478
|
}
|
|
1032
2479
|
|
|
1033
2480
|
/* ============================================================================
|
|
@@ -1039,7 +2486,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
1039
2486
|
.theme-toggle-wrapper {
|
|
1040
2487
|
margin-top: auto;
|
|
1041
2488
|
padding-top: 1.5rem;
|
|
1042
|
-
border-top: 1px solid
|
|
2489
|
+
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
1043
2490
|
}
|
|
1044
2491
|
|
|
1045
2492
|
/* Theme toggle button */
|
|
@@ -1050,31 +2497,30 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
1050
2497
|
justify-content: center;
|
|
1051
2498
|
gap: 0.5rem;
|
|
1052
2499
|
padding: 0.75rem;
|
|
1053
|
-
background:
|
|
1054
|
-
border: 1px solid
|
|
2500
|
+
background: rgba(255, 255, 255, 0.05);
|
|
2501
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
1055
2502
|
border-radius: 0.625rem;
|
|
1056
|
-
color: var(--q-
|
|
2503
|
+
color: var(--q-text-secondary, #94a3b8);
|
|
1057
2504
|
font-size: 0.875rem;
|
|
1058
2505
|
cursor: pointer;
|
|
1059
|
-
transition: all
|
|
2506
|
+
transition: all 0.2s ease;
|
|
1060
2507
|
}
|
|
1061
2508
|
|
|
1062
2509
|
.theme-btn:hover {
|
|
1063
|
-
background:
|
|
1064
|
-
color: var(--q-
|
|
2510
|
+
background: rgba(255, 255, 255, 0.08);
|
|
2511
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
1065
2512
|
}
|
|
1066
2513
|
|
|
1067
2514
|
/* Sun/moon icon visibility */
|
|
1068
|
-
|
|
1069
|
-
|
|
2515
|
+
/* Light mode overrides for theme toggle */
|
|
2516
|
+
html[data-theme="light"] .theme-btn {
|
|
2517
|
+
background: #f1f5f9;
|
|
2518
|
+
border-color: #e2e8f0;
|
|
2519
|
+
color: #475569;
|
|
1070
2520
|
}
|
|
1071
2521
|
|
|
1072
|
-
html[data-theme="light"] .
|
|
1073
|
-
|
|
1074
|
-
}
|
|
1075
|
-
|
|
1076
|
-
html[data-theme="light"] .moon-icon {
|
|
1077
|
-
display: none;
|
|
2522
|
+
html[data-theme="light"] .theme-toggle-wrapper {
|
|
2523
|
+
border-top-color: #e2e8f0;
|
|
1078
2524
|
}
|
|
1079
2525
|
|
|
1080
2526
|
/* ============================================================================
|
|
@@ -1087,13 +2533,13 @@ html[data-theme="light"] .moon-icon {
|
|
|
1087
2533
|
width: 40px;
|
|
1088
2534
|
height: 40px;
|
|
1089
2535
|
border-radius: 50%;
|
|
1090
|
-
background: var(--q-
|
|
2536
|
+
background: linear-gradient(135deg, #3b82f6, var(--q-color-starlight, #00d4ff));
|
|
1091
2537
|
display: flex;
|
|
1092
2538
|
align-items: center;
|
|
1093
2539
|
justify-content: center;
|
|
1094
2540
|
font-weight: 600;
|
|
1095
2541
|
font-size: 0.875rem;
|
|
1096
|
-
color:
|
|
2542
|
+
color: white;
|
|
1097
2543
|
position: relative;
|
|
1098
2544
|
flex-shrink: 0;
|
|
1099
2545
|
overflow: hidden;
|
|
@@ -1144,13 +2590,22 @@ html[data-theme="light"] .moon-icon {
|
|
|
1144
2590
|
|
|
1145
2591
|
.user-name {
|
|
1146
2592
|
font-weight: 600;
|
|
1147
|
-
color: var(--q-
|
|
2593
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
1148
2594
|
margin-bottom: 0.125rem;
|
|
1149
2595
|
}
|
|
1150
2596
|
|
|
1151
2597
|
.user-email {
|
|
1152
2598
|
font-size: 0.75rem;
|
|
1153
|
-
color: var(--q-
|
|
2599
|
+
color: var(--q-text-muted, #64748b);
|
|
2600
|
+
}
|
|
2601
|
+
|
|
2602
|
+
/* Light mode overrides for user info */
|
|
2603
|
+
html[data-theme="light"] .user-name {
|
|
2604
|
+
color: #0f172a;
|
|
2605
|
+
}
|
|
2606
|
+
|
|
2607
|
+
html[data-theme="light"] .user-email {
|
|
2608
|
+
color: #64748b;
|
|
1154
2609
|
}
|
|
1155
2610
|
|
|
1156
2611
|
/* ============================================================================
|
|
@@ -1162,68 +2617,61 @@ html[data-theme="light"] .moon-icon {
|
|
|
1162
2617
|
.status-badge {
|
|
1163
2618
|
display: inline-flex;
|
|
1164
2619
|
align-items: center;
|
|
1165
|
-
|
|
1166
|
-
padding: 0.
|
|
1167
|
-
border-radius:
|
|
2620
|
+
justify-content: center;
|
|
2621
|
+
padding: 0.3rem 0.75rem;
|
|
2622
|
+
border-radius: 0.375rem;
|
|
1168
2623
|
font-size: 0.75rem;
|
|
1169
2624
|
font-weight: 500;
|
|
1170
2625
|
}
|
|
1171
2626
|
|
|
1172
|
-
.status-badge::before {
|
|
1173
|
-
content: '';
|
|
1174
|
-
width: 6px;
|
|
1175
|
-
height: 6px;
|
|
1176
|
-
border-radius: 50%;
|
|
1177
|
-
}
|
|
1178
|
-
|
|
1179
2627
|
/* Status variants */
|
|
1180
2628
|
.status-active {
|
|
1181
|
-
background:
|
|
1182
|
-
color:
|
|
1183
|
-
}
|
|
1184
|
-
|
|
1185
|
-
.status-active::before {
|
|
1186
|
-
background: var(--q-color-success);
|
|
2629
|
+
background: rgba(52, 211, 153, 0.12);
|
|
2630
|
+
color: #34d399;
|
|
1187
2631
|
}
|
|
1188
2632
|
|
|
1189
2633
|
.status-pending {
|
|
1190
|
-
background:
|
|
1191
|
-
color:
|
|
1192
|
-
}
|
|
1193
|
-
|
|
1194
|
-
.status-pending::before {
|
|
1195
|
-
background: var(--q-color-warning);
|
|
2634
|
+
background: rgba(251, 191, 36, 0.12);
|
|
2635
|
+
color: #fbbf24;
|
|
1196
2636
|
}
|
|
1197
2637
|
|
|
1198
2638
|
.status-inactive {
|
|
1199
|
-
background:
|
|
1200
|
-
color:
|
|
2639
|
+
background: rgba(248, 113, 113, 0.12);
|
|
2640
|
+
color: #f87171;
|
|
1201
2641
|
}
|
|
1202
2642
|
|
|
1203
|
-
|
|
1204
|
-
|
|
2643
|
+
/* Simplified status for tables */
|
|
2644
|
+
.status-cell {
|
|
2645
|
+
display: flex;
|
|
2646
|
+
align-items: center;
|
|
2647
|
+
gap: 0.5rem;
|
|
1205
2648
|
}
|
|
1206
2649
|
|
|
2650
|
+
.status-active-dot { background-color: #34d399; }
|
|
2651
|
+
.status-pending-dot { background-color: #fbbf24; }
|
|
2652
|
+
.status-inactive-dot { background-color: #f87171; }
|
|
2653
|
+
|
|
1207
2654
|
/* Role badge */
|
|
1208
2655
|
.role-badge {
|
|
1209
2656
|
display: inline-flex;
|
|
1210
|
-
|
|
2657
|
+
align-items: center;
|
|
2658
|
+
justify-content: center;
|
|
2659
|
+
padding: 0.3rem 0.75rem;
|
|
1211
2660
|
border-radius: 0.375rem;
|
|
1212
2661
|
font-size: 0.75rem;
|
|
1213
2662
|
font-weight: 500;
|
|
1214
|
-
background:
|
|
1215
|
-
color: var(--q-
|
|
2663
|
+
background: rgba(255, 255, 255, 0.05);
|
|
2664
|
+
color: var(--q-text-secondary, #94a3b8);
|
|
1216
2665
|
}
|
|
1217
2666
|
|
|
1218
2667
|
.role-admin {
|
|
1219
|
-
background:
|
|
1220
|
-
color: var(--q-color-
|
|
2668
|
+
background: rgba(0, 212, 255, 0.15);
|
|
2669
|
+
color: var(--q-color-starlight, #00d4ff);
|
|
1221
2670
|
}
|
|
1222
2671
|
|
|
1223
2672
|
.role-moderator {
|
|
1224
|
-
background:
|
|
1225
|
-
color:
|
|
1226
|
-
opacity: 0.8;
|
|
2673
|
+
background: rgba(139, 92, 246, 0.15);
|
|
2674
|
+
color: #a78bfa;
|
|
1227
2675
|
}
|
|
1228
2676
|
|
|
1229
2677
|
/* Count badge */
|
|
@@ -1234,18 +2682,19 @@ html[data-theme="light"] .moon-icon {
|
|
|
1234
2682
|
min-width: 20px;
|
|
1235
2683
|
height: 20px;
|
|
1236
2684
|
padding: 0 6px;
|
|
1237
|
-
background: var(--q-
|
|
2685
|
+
background: linear-gradient(135deg, var(--q-color-starlight, #00d4ff), #3b82f6);
|
|
1238
2686
|
border-radius: 10px;
|
|
1239
2687
|
font-size: 0.6875rem;
|
|
1240
2688
|
font-weight: 700;
|
|
1241
|
-
color:
|
|
2689
|
+
color: white;
|
|
1242
2690
|
}
|
|
1243
2691
|
|
|
1244
2692
|
/* Label/tag */
|
|
1245
2693
|
.label {
|
|
1246
2694
|
display: inline-flex;
|
|
1247
2695
|
align-items: center;
|
|
1248
|
-
|
|
2696
|
+
justify-content: center;
|
|
2697
|
+
padding: 0.3rem 0.75rem;
|
|
1249
2698
|
border-radius: 9999px;
|
|
1250
2699
|
font-size: 0.75rem;
|
|
1251
2700
|
font-weight: 500;
|
|
@@ -1253,60 +2702,70 @@ html[data-theme="light"] .moon-icon {
|
|
|
1253
2702
|
}
|
|
1254
2703
|
|
|
1255
2704
|
.label-work {
|
|
1256
|
-
background:
|
|
1257
|
-
color:
|
|
2705
|
+
background: rgba(59, 130, 246, 0.2);
|
|
2706
|
+
color: #60a5fa;
|
|
1258
2707
|
}
|
|
1259
2708
|
|
|
1260
2709
|
.label-personal {
|
|
1261
|
-
background:
|
|
1262
|
-
color:
|
|
2710
|
+
background: rgba(16, 185, 129, 0.2);
|
|
2711
|
+
color: #34d399;
|
|
1263
2712
|
}
|
|
1264
2713
|
|
|
1265
2714
|
.label-important {
|
|
1266
|
-
background:
|
|
1267
|
-
color:
|
|
2715
|
+
background: rgba(239, 68, 68, 0.2);
|
|
2716
|
+
color: #f87171;
|
|
1268
2717
|
}
|
|
1269
2718
|
|
|
1270
|
-
/*
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
2719
|
+
/* Light mode overrides for badges */
|
|
2720
|
+
html[data-theme="light"] .status-active {
|
|
2721
|
+
background: rgba(5, 150, 105, 0.1);
|
|
2722
|
+
color: #059669;
|
|
2723
|
+
}
|
|
1274
2724
|
|
|
1275
|
-
|
|
1276
|
-
.
|
|
1277
|
-
|
|
2725
|
+
html[data-theme="light"] .status-pending {
|
|
2726
|
+
background: rgba(217, 119, 6, 0.1);
|
|
2727
|
+
color: #d97706;
|
|
1278
2728
|
}
|
|
1279
2729
|
|
|
1280
|
-
|
|
1281
|
-
.
|
|
1282
|
-
|
|
1283
|
-
padding: 0.625rem 1rem 0.625rem 2.5rem;
|
|
1284
|
-
background: var(--q-color-surface);
|
|
1285
|
-
border: 1px solid var(--q-color-border);
|
|
1286
|
-
border-radius: 0.625rem;
|
|
1287
|
-
color: var(--q-color-text);
|
|
1288
|
-
font-size: 0.875rem;
|
|
1289
|
-
transition: all var(--q-duration-base) var(--q-ease-in-out);
|
|
2730
|
+
html[data-theme="light"] .status-inactive {
|
|
2731
|
+
background: rgba(220, 38, 38, 0.1);
|
|
2732
|
+
color: #dc2626;
|
|
1290
2733
|
}
|
|
1291
2734
|
|
|
1292
|
-
.
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
background: var(--q-color-surface-elevated);
|
|
2735
|
+
html[data-theme="light"] .role-badge {
|
|
2736
|
+
background: #f1f5f9;
|
|
2737
|
+
color: #475569;
|
|
1296
2738
|
}
|
|
1297
2739
|
|
|
1298
|
-
.
|
|
1299
|
-
|
|
2740
|
+
html[data-theme="light"] .role-admin {
|
|
2741
|
+
background: rgba(0, 212, 255, 0.1);
|
|
2742
|
+
color: #0284c7;
|
|
1300
2743
|
}
|
|
1301
2744
|
|
|
1302
|
-
|
|
1303
|
-
.
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
2745
|
+
html[data-theme="light"] .label-work {
|
|
2746
|
+
background: rgba(59, 130, 246, 0.1);
|
|
2747
|
+
color: #2563eb;
|
|
2748
|
+
}
|
|
2749
|
+
|
|
2750
|
+
html[data-theme="light"] .label-personal {
|
|
2751
|
+
background: rgba(16, 185, 129, 0.1);
|
|
2752
|
+
color: #059669;
|
|
2753
|
+
}
|
|
2754
|
+
|
|
2755
|
+
html[data-theme="light"] .label-important {
|
|
2756
|
+
background: rgba(239, 68, 68, 0.1);
|
|
2757
|
+
color: #dc2626;
|
|
2758
|
+
}
|
|
2759
|
+
|
|
2760
|
+
/* ============================================================================
|
|
2761
|
+
SEARCH INPUTS
|
|
2762
|
+
Search boxes with integrated icons
|
|
2763
|
+
============================================================================ */
|
|
2764
|
+
|
|
2765
|
+
/* Search input base handled in starlight.css */
|
|
2766
|
+
|
|
2767
|
+
.search-input::placeholder {
|
|
2768
|
+
color: var(--q-text-muted, #64748b);
|
|
1310
2769
|
}
|
|
1311
2770
|
|
|
1312
2771
|
/* Full-width search input */
|
|
@@ -1317,10 +2776,10 @@ html[data-theme="light"] .moon-icon {
|
|
|
1317
2776
|
/* Filter select (for table filters) */
|
|
1318
2777
|
.filter-select {
|
|
1319
2778
|
padding: 0.5rem 2rem 0.5rem 0.75rem;
|
|
1320
|
-
background:
|
|
1321
|
-
border: 1px solid
|
|
2779
|
+
background: rgba(255, 255, 255, 0.05);
|
|
2780
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
1322
2781
|
border-radius: 0.5rem;
|
|
1323
|
-
color: var(--q-
|
|
2782
|
+
color: var(--q-text-secondary, #94a3b8);
|
|
1324
2783
|
font-size: 0.875rem;
|
|
1325
2784
|
cursor: pointer;
|
|
1326
2785
|
appearance: none;
|
|
@@ -1328,11 +2787,20 @@ html[data-theme="light"] .moon-icon {
|
|
|
1328
2787
|
background-position: right 0.5rem center;
|
|
1329
2788
|
background-repeat: no-repeat;
|
|
1330
2789
|
background-size: 1.25rem;
|
|
2790
|
+
transition: all 0.2s ease;
|
|
1331
2791
|
}
|
|
1332
2792
|
|
|
1333
2793
|
.filter-select:focus {
|
|
1334
2794
|
outline: none;
|
|
1335
|
-
|
|
2795
|
+
box-shadow: 0 0 0 2px var(--q-color-starlight-deep), 0 0 0 4px var(--q-color-starlight-blue);
|
|
2796
|
+
border-color: var(--q-color-starlight-blue);
|
|
2797
|
+
}
|
|
2798
|
+
|
|
2799
|
+
/* Light mode overrides for search */
|
|
2800
|
+
html[data-theme="light"] .filter-select {
|
|
2801
|
+
background: #f1f5f9;
|
|
2802
|
+
border-color: #e2e8f0;
|
|
2803
|
+
color: #0f172a;
|
|
1336
2804
|
}
|
|
1337
2805
|
|
|
1338
2806
|
/* ============================================================================
|
|
@@ -1347,24 +2815,66 @@ html[data-theme="light"] .moon-icon {
|
|
|
1347
2815
|
right: 2px;
|
|
1348
2816
|
width: 10px;
|
|
1349
2817
|
height: 10px;
|
|
1350
|
-
background:
|
|
2818
|
+
background: #10b981;
|
|
1351
2819
|
border-radius: 50%;
|
|
1352
|
-
border: 2px solid var(--q-
|
|
2820
|
+
border: 2px solid var(--q-bg-primary);
|
|
1353
2821
|
}
|
|
1354
2822
|
|
|
1355
2823
|
/* Away status indicator */
|
|
1356
2824
|
.away-indicator {
|
|
1357
|
-
background:
|
|
2825
|
+
background: #f59e0b;
|
|
1358
2826
|
}
|
|
1359
2827
|
|
|
1360
2828
|
/* Busy status indicator */
|
|
1361
2829
|
.busy-indicator {
|
|
1362
|
-
background:
|
|
2830
|
+
background: #ef4444;
|
|
1363
2831
|
}
|
|
1364
2832
|
|
|
1365
2833
|
/* Offline status indicator */
|
|
1366
2834
|
.offline-indicator {
|
|
1367
|
-
background:
|
|
2835
|
+
background: #64748b;
|
|
2836
|
+
}
|
|
2837
|
+
|
|
2838
|
+
/* Generic dot component */
|
|
2839
|
+
.dot {
|
|
2840
|
+
width: 8px;
|
|
2841
|
+
height: 8px;
|
|
2842
|
+
border-radius: 50%;
|
|
2843
|
+
display: inline-block;
|
|
2844
|
+
flex-shrink: 0;
|
|
2845
|
+
background-color: var(--q-text-muted, #64748b);
|
|
2846
|
+
}
|
|
2847
|
+
|
|
2848
|
+
.blue-dot { background-color: #3b82f6; box-shadow: 0 0 10px rgba(59, 130, 246, 0.4); }
|
|
2849
|
+
.green-dot { background-color: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }
|
|
2850
|
+
.red-dot { background-color: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); }
|
|
2851
|
+
|
|
2852
|
+
/* Status dot variants */
|
|
2853
|
+
.status-dot {
|
|
2854
|
+
width: 8px;
|
|
2855
|
+
height: 8px;
|
|
2856
|
+
border-radius: 50%;
|
|
2857
|
+
display: inline-block;
|
|
2858
|
+
background: var(--q-text-muted, #64748b);
|
|
2859
|
+
}
|
|
2860
|
+
|
|
2861
|
+
.status-dot-online {
|
|
2862
|
+
background-color: #10b981;
|
|
2863
|
+
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
|
|
2864
|
+
}
|
|
2865
|
+
|
|
2866
|
+
.status-dot-offline {
|
|
2867
|
+
background-color: #64748b;
|
|
2868
|
+
}
|
|
2869
|
+
|
|
2870
|
+
.status-dot-away {
|
|
2871
|
+
background-color: #f59e0b;
|
|
2872
|
+
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
|
|
2873
|
+
}
|
|
2874
|
+
|
|
2875
|
+
.status-dot-busy {
|
|
2876
|
+
background-color: #ef4444;
|
|
2877
|
+
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
|
|
1368
2878
|
}
|
|
1369
2879
|
|
|
1370
2880
|
/* Notification dot */
|
|
@@ -1374,9 +2884,9 @@ html[data-theme="light"] .moon-icon {
|
|
|
1374
2884
|
right: 8px;
|
|
1375
2885
|
width: 8px;
|
|
1376
2886
|
height: 8px;
|
|
1377
|
-
background:
|
|
2887
|
+
background: #ef4444;
|
|
1378
2888
|
border-radius: 50%;
|
|
1379
|
-
border: 2px solid var(--q-
|
|
2889
|
+
border: 2px solid var(--q-bg-primary);
|
|
1380
2890
|
}
|
|
1381
2891
|
|
|
1382
2892
|
/* Notification badge with number */
|
|
@@ -1387,7 +2897,7 @@ html[data-theme="light"] .moon-icon {
|
|
|
1387
2897
|
min-width: 18px;
|
|
1388
2898
|
height: 18px;
|
|
1389
2899
|
padding: 0 5px;
|
|
1390
|
-
background:
|
|
2900
|
+
background: #ef4444;
|
|
1391
2901
|
border-radius: 9px;
|
|
1392
2902
|
font-size: 0.6875rem;
|
|
1393
2903
|
font-weight: 700;
|
|
@@ -1395,7 +2905,14 @@ html[data-theme="light"] .moon-icon {
|
|
|
1395
2905
|
display: flex;
|
|
1396
2906
|
align-items: center;
|
|
1397
2907
|
justify-content: center;
|
|
1398
|
-
border: 2px solid var(--q-
|
|
2908
|
+
border: 2px solid var(--q-bg-primary);
|
|
2909
|
+
}
|
|
2910
|
+
|
|
2911
|
+
/* Light mode overrides for indicators */
|
|
2912
|
+
html[data-theme="light"] .online-indicator,
|
|
2913
|
+
html[data-theme="light"] .notification-dot,
|
|
2914
|
+
html[data-theme="light"] .notification-badge {
|
|
2915
|
+
border-color: var(--q-light-card-bg);
|
|
1399
2916
|
}
|
|
1400
2917
|
|
|
1401
2918
|
/* ============================================================================
|
|
@@ -1413,29 +2930,542 @@ html[data-theme="light"] .moon-icon {
|
|
|
1413
2930
|
height: 36px;
|
|
1414
2931
|
padding: 0 0.75rem;
|
|
1415
2932
|
border-radius: 0.5rem;
|
|
1416
|
-
background:
|
|
1417
|
-
border: 1px solid
|
|
1418
|
-
color: var(--q-
|
|
2933
|
+
background: rgba(255, 255, 255, 0.05);
|
|
2934
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
2935
|
+
color: var(--q-text-secondary, #94a3b8);
|
|
1419
2936
|
font-size: 0.875rem;
|
|
1420
2937
|
cursor: pointer;
|
|
1421
|
-
transition: all
|
|
2938
|
+
transition: all 0.2s ease;
|
|
1422
2939
|
display: flex;
|
|
1423
2940
|
align-items: center;
|
|
1424
2941
|
justify-content: center;
|
|
1425
2942
|
}
|
|
1426
2943
|
|
|
1427
2944
|
.page-btn:hover {
|
|
1428
|
-
background:
|
|
1429
|
-
color: var(--q-
|
|
2945
|
+
background: rgba(255, 255, 255, 0.08);
|
|
2946
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
1430
2947
|
}
|
|
1431
2948
|
|
|
1432
2949
|
.page-btn.active {
|
|
1433
|
-
background:
|
|
1434
|
-
border-color:
|
|
1435
|
-
color: var(--q-color-
|
|
2950
|
+
background: rgba(0, 212, 255, 0.15);
|
|
2951
|
+
border-color: rgba(0, 212, 255, 0.3);
|
|
2952
|
+
color: var(--q-color-starlight, #00d4ff);
|
|
1436
2953
|
}
|
|
1437
2954
|
|
|
1438
2955
|
.page-btn:disabled {
|
|
1439
2956
|
opacity: 0.5;
|
|
1440
2957
|
cursor: not-allowed;
|
|
1441
|
-
}
|
|
2958
|
+
}
|
|
2959
|
+
|
|
2960
|
+
/* Light mode overrides for pagination */
|
|
2961
|
+
html[data-theme="light"] .page-btn {
|
|
2962
|
+
background: #f1f5f9;
|
|
2963
|
+
border-color: #e2e8f0;
|
|
2964
|
+
color: #64748b;
|
|
2965
|
+
}
|
|
2966
|
+
|
|
2967
|
+
html[data-theme="light"] .page-btn:hover {
|
|
2968
|
+
background: #e2e8f0;
|
|
2969
|
+
color: #0f172a;
|
|
2970
|
+
}
|
|
2971
|
+
|
|
2972
|
+
html[data-theme="light"] .page-btn.active {
|
|
2973
|
+
background: rgba(59, 130, 246, 0.1);
|
|
2974
|
+
border-color: rgba(59, 130, 246, 0.3);
|
|
2975
|
+
color: #2563eb;
|
|
2976
|
+
}
|
|
2977
|
+
/* ==========================================================================
|
|
2978
|
+
STARLIGHT BRANDED COMPONENTS
|
|
2979
|
+
(Migrated from email-client.css)
|
|
2980
|
+
========================================================================== */
|
|
2981
|
+
|
|
2982
|
+
/* User / Avatar Components */
|
|
2983
|
+
user-cell { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; }
|
|
2984
|
+
user-avatar {
|
|
2985
|
+
width: 2.5rem; height: 2.5rem; border-radius: 50%;
|
|
2986
|
+
background: var(--q-color-border-strong, #1e293b); color: #f1f5f9;
|
|
2987
|
+
display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0;
|
|
2988
|
+
}
|
|
2989
|
+
user-avatar.sm { width: 2.25rem; height: 2.25rem; font-size: 0.875rem; }
|
|
2990
|
+
user-avatar.lg { width: 3rem; height: 3rem; font-size: 1.125rem; }
|
|
2991
|
+
html[data-theme="light"] user-avatar { background: #e2e8f0; color: #64748b; }
|
|
2992
|
+
|
|
2993
|
+
user-info { display: flex; flex-direction: column; min-width: 0; }
|
|
2994
|
+
user-name { font-size: 0.875rem; font-weight: 600; }
|
|
2995
|
+
user-email { font-size: 0.75rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
2996
|
+
html[data-theme="light"] user-name { color: #0f172a; }
|
|
2997
|
+
|
|
2998
|
+
/* Branded Labels */
|
|
2999
|
+
email-label { padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600; }
|
|
3000
|
+
email-label.work { background: rgba(59, 130, 246, 0.1); color: #60a5fa; }
|
|
3001
|
+
email-label.personal { background: rgba(34, 197, 94, 0.1); color: #4ade80; }
|
|
3002
|
+
email-label.important { background: rgba(239, 68, 68, 0.1); color: #f87171; }
|
|
3003
|
+
|
|
3004
|
+
/* Branded Attachment Cards */
|
|
3005
|
+
attachment-card {
|
|
3006
|
+
display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.05); cursor: pointer; transition: background 0.2s ease; min-width: 240px;
|
|
3007
|
+
}
|
|
3008
|
+
attachment-card:hover { background: rgba(255, 255, 255, 0.1); }
|
|
3009
|
+
html[data-theme="light"] attachment-card { background: #ffffff; border: 1px solid #e2e8f0; }
|
|
3010
|
+
|
|
3011
|
+
file-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; }
|
|
3012
|
+
file-icon.pdf { background-color: rgba(239, 68, 68, 0.2); color: #f87171; }
|
|
3013
|
+
file-icon.excel { background-color: rgba(34, 197, 94, 0.2); color: #4ade80; }
|
|
3014
|
+
|
|
3015
|
+
file-info { display: flex; flex-direction: column; }
|
|
3016
|
+
file-name { font-size: 0.875rem; font-weight: 500; }
|
|
3017
|
+
file-size { font-size: 0.75rem; color: #64748b; }
|
|
3018
|
+
|
|
3019
|
+
/* ============================================================================
|
|
3020
|
+
CSS-ONLY HORIZONTAL NAVIGATION
|
|
3021
|
+
Glassmorphic header with dropdown and mobile drawer
|
|
3022
|
+
============================================================================ */
|
|
3023
|
+
|
|
3024
|
+
/* Mobile toggle checkbox - hidden but functional */
|
|
3025
|
+
.nav-toggle { display: none; }
|
|
3026
|
+
|
|
3027
|
+
/* Nav Header */
|
|
3028
|
+
.nav-header {
|
|
3029
|
+
position: sticky;
|
|
3030
|
+
top: 0;
|
|
3031
|
+
z-index: 100;
|
|
3032
|
+
height: 64px;
|
|
3033
|
+
display: flex;
|
|
3034
|
+
align-items: center;
|
|
3035
|
+
padding: 0 2rem;
|
|
3036
|
+
gap: 2rem;
|
|
3037
|
+
background: rgba(15, 23, 42, 0.8);
|
|
3038
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
3039
|
+
backdrop-filter: blur(16px);
|
|
3040
|
+
-webkit-backdrop-filter: blur(16px);
|
|
3041
|
+
}
|
|
3042
|
+
|
|
3043
|
+
html[data-theme="light"] .nav-header {
|
|
3044
|
+
background: rgba(255, 255, 255, 0.9);
|
|
3045
|
+
border-bottom-color: rgba(0, 0, 0, 0.08);
|
|
3046
|
+
}
|
|
3047
|
+
|
|
3048
|
+
/* Brand */
|
|
3049
|
+
.nav-brand {
|
|
3050
|
+
font-size: 1.5rem;
|
|
3051
|
+
font-weight: 800;
|
|
3052
|
+
text-decoration: none;
|
|
3053
|
+
letter-spacing: -.03em;
|
|
3054
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
3055
|
+
}
|
|
3056
|
+
|
|
3057
|
+
/* Logo */
|
|
3058
|
+
.nav-logo {
|
|
3059
|
+
flex-shrink: 0;
|
|
3060
|
+
display: flex;
|
|
3061
|
+
align-items: center;
|
|
3062
|
+
gap: .6rem;
|
|
3063
|
+
text-decoration: none;
|
|
3064
|
+
font-weight: 700;
|
|
3065
|
+
font-size: 1.1rem;
|
|
3066
|
+
letter-spacing: -.02em;
|
|
3067
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
3068
|
+
}
|
|
3069
|
+
|
|
3070
|
+
html[data-theme="light"] .nav-logo {
|
|
3071
|
+
color: var(--q-light-text, #1e293b);
|
|
3072
|
+
}
|
|
3073
|
+
|
|
3074
|
+
/* Starlight logo mark - circular gradient icon */
|
|
3075
|
+
.nav-logo-mark,
|
|
3076
|
+
.nav-logo > i {
|
|
3077
|
+
width: 34px;
|
|
3078
|
+
height: 34px;
|
|
3079
|
+
border-radius: 50%;
|
|
3080
|
+
display: grid;
|
|
3081
|
+
place-items: center;
|
|
3082
|
+
flex-shrink: 0;
|
|
3083
|
+
animation: pulse 2s ease-in-out infinite;
|
|
3084
|
+
}
|
|
3085
|
+
|
|
3086
|
+
.nav-logo-mark {
|
|
3087
|
+
background: linear-gradient(135deg, var(--q-color-starlight-peach), var(--q-color-starlight-blue));
|
|
3088
|
+
}
|
|
3089
|
+
|
|
3090
|
+
.nav-logo > i {
|
|
3091
|
+
background: linear-gradient(135deg, var(--q-color-starlight-peach), var(--q-color-starlight-blue));
|
|
3092
|
+
display: flex;
|
|
3093
|
+
align-items: center;
|
|
3094
|
+
justify-content: center;
|
|
3095
|
+
}
|
|
3096
|
+
|
|
3097
|
+
html[data-theme="light"] .nav-logo > i {
|
|
3098
|
+
background: linear-gradient(135deg, var(--q-color-starlight-blue), var(--q-color-starlight-peach));
|
|
3099
|
+
}
|
|
3100
|
+
|
|
3101
|
+
html[data-theme="light"] .nav-logo-mark {
|
|
3102
|
+
background: linear-gradient(135deg, var(--q-color-starlight-blue), var(--q-color-starlight-peach));
|
|
3103
|
+
}
|
|
3104
|
+
|
|
3105
|
+
html[data-theme="light"] .nav-logo > i {
|
|
3106
|
+
background: linear-gradient(135deg, var(--q-color-starlight-blue), var(--q-color-starlight-peach));
|
|
3107
|
+
}
|
|
3108
|
+
|
|
3109
|
+
/* Desktop nav links */
|
|
3110
|
+
.nav-links {
|
|
3111
|
+
flex: 1;
|
|
3112
|
+
display: flex;
|
|
3113
|
+
align-items: center;
|
|
3114
|
+
gap: .25rem;
|
|
3115
|
+
}
|
|
3116
|
+
|
|
3117
|
+
.nav-links > a,
|
|
3118
|
+
.nav-dropdown summary {
|
|
3119
|
+
display: flex;
|
|
3120
|
+
align-items: center;
|
|
3121
|
+
gap: .35rem;
|
|
3122
|
+
padding: .45rem .85rem;
|
|
3123
|
+
border-radius: .625rem;
|
|
3124
|
+
font-size: .875rem;
|
|
3125
|
+
font-weight: 600;
|
|
3126
|
+
letter-spacing: .01em;
|
|
3127
|
+
color: var(--q-text-secondary, rgba(255,255,255,0.6));
|
|
3128
|
+
text-decoration: none;
|
|
3129
|
+
cursor: pointer;
|
|
3130
|
+
transition: color .15s, background .15s;
|
|
3131
|
+
white-space: nowrap;
|
|
3132
|
+
list-style: none;
|
|
3133
|
+
user-select: none;
|
|
3134
|
+
}
|
|
3135
|
+
|
|
3136
|
+
.nav-links > a:hover,
|
|
3137
|
+
.nav-dropdown summary:hover {
|
|
3138
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
3139
|
+
background: rgba(255, 255, 255, 0.08);
|
|
3140
|
+
}
|
|
3141
|
+
|
|
3142
|
+
html[data-theme="light"] .nav-links > a:hover,
|
|
3143
|
+
html[data-theme="light"] .nav-dropdown summary:hover {
|
|
3144
|
+
color: var(--q-light-text, #1e293b);
|
|
3145
|
+
background: rgba(0, 0, 0, 0.05);
|
|
3146
|
+
}
|
|
3147
|
+
|
|
3148
|
+
html[data-theme="light"] .nav-links > a,
|
|
3149
|
+
html[data-theme="light"] .nav-dropdown summary {
|
|
3150
|
+
color: var(--q-text-muted, #64748b);
|
|
3151
|
+
}
|
|
3152
|
+
|
|
3153
|
+
html[data-theme="light"] .nav-links > a:hover,
|
|
3154
|
+
html[data-theme="light"] .nav-dropdown summary:hover {
|
|
3155
|
+
color: var(--q-light-text, #1e293b);
|
|
3156
|
+
background: rgba(0, 0, 0, 0.05);
|
|
3157
|
+
}
|
|
3158
|
+
|
|
3159
|
+
/* Dropdown chevron */
|
|
3160
|
+
.nav-dropdown summary::after {
|
|
3161
|
+
content: '';
|
|
3162
|
+
display: inline-block;
|
|
3163
|
+
width: 14px;
|
|
3164
|
+
height: 14px;
|
|
3165
|
+
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5l4 4 4-4' stroke='%23676a7c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
|
|
3166
|
+
transition: transform .2s;
|
|
3167
|
+
flex-shrink: 0;
|
|
3168
|
+
}
|
|
3169
|
+
|
|
3170
|
+
.nav-dropdown[open] > summary::after {
|
|
3171
|
+
transform: rotate(180deg);
|
|
3172
|
+
}
|
|
3173
|
+
|
|
3174
|
+
.nav-dropdown[open] > summary {
|
|
3175
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
3176
|
+
background: rgba(255, 255, 255, 0.08);
|
|
3177
|
+
}
|
|
3178
|
+
|
|
3179
|
+
html[data-theme="light"] .nav-dropdown[open] > summary {
|
|
3180
|
+
color: var(--q-light-text, #1e293b);
|
|
3181
|
+
}
|
|
3182
|
+
|
|
3183
|
+
/* Hide native marker */
|
|
3184
|
+
.nav-dropdown summary::-webkit-details-marker,
|
|
3185
|
+
.nav-dropdown summary::marker { display: none; }
|
|
3186
|
+
|
|
3187
|
+
/* Dropdown container */
|
|
3188
|
+
.nav-dropdown {
|
|
3189
|
+
position: relative;
|
|
3190
|
+
}
|
|
3191
|
+
|
|
3192
|
+
/* Dropdown panel */
|
|
3193
|
+
.nav-dropdown-panel {
|
|
3194
|
+
position: absolute;
|
|
3195
|
+
top: calc(100% + .5rem);
|
|
3196
|
+
left: 0;
|
|
3197
|
+
min-width: 180px;
|
|
3198
|
+
isolation: isolate;
|
|
3199
|
+
background-color: rgb(15,15,25);
|
|
3200
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
3201
|
+
border-radius: .625rem;
|
|
3202
|
+
padding: .4rem;
|
|
3203
|
+
display: flex;
|
|
3204
|
+
flex-direction: column;
|
|
3205
|
+
gap: .15rem;
|
|
3206
|
+
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
|
|
3207
|
+
animation: dropIn .18s ease;
|
|
3208
|
+
z-index: 50;
|
|
3209
|
+
}
|
|
3210
|
+
|
|
3211
|
+
html[data-theme="light"] .nav-dropdown-panel {
|
|
3212
|
+
background: rgba(255, 255, 255, 0.98);
|
|
3213
|
+
border-color: rgba(0, 0, 0, 0.08);
|
|
3214
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
3215
|
+
}
|
|
3216
|
+
|
|
3217
|
+
@keyframes dropIn {
|
|
3218
|
+
from { opacity: 0; transform: translateY(-6px) scale(.98); }
|
|
3219
|
+
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
3220
|
+
}
|
|
3221
|
+
|
|
3222
|
+
.nav-dropdown-panel a {
|
|
3223
|
+
display: flex;
|
|
3224
|
+
align-items: center;
|
|
3225
|
+
gap: .5rem;
|
|
3226
|
+
padding: .5rem .75rem;
|
|
3227
|
+
border-radius: 7px;
|
|
3228
|
+
font-size: .85rem;
|
|
3229
|
+
font-weight: 500;
|
|
3230
|
+
color: var(--q-text-secondary, rgba(255,255,255,0.6));
|
|
3231
|
+
text-decoration: none;
|
|
3232
|
+
transition: color .12s, background .12s;
|
|
3233
|
+
}
|
|
3234
|
+
|
|
3235
|
+
html[data-theme="light"] .nav-dropdown-panel a {
|
|
3236
|
+
color: var(--q-text-muted, #64748b);
|
|
3237
|
+
}
|
|
3238
|
+
|
|
3239
|
+
.nav-dropdown-panel a:hover {
|
|
3240
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
3241
|
+
background: rgba(255, 255, 255, 0.08);
|
|
3242
|
+
}
|
|
3243
|
+
|
|
3244
|
+
html[data-theme="light"] .nav-dropdown-panel a:hover {
|
|
3245
|
+
color: var(--q-light-text, #1e293b);
|
|
3246
|
+
background: rgba(0, 0, 0, 0.05);
|
|
3247
|
+
}
|
|
3248
|
+
|
|
3249
|
+
.nav-dropdown-panel a::before {
|
|
3250
|
+
content: '';
|
|
3251
|
+
display: inline-block;
|
|
3252
|
+
width: 6px;
|
|
3253
|
+
height: 6px;
|
|
3254
|
+
border-radius: 50%;
|
|
3255
|
+
background: rgba(255, 255, 255, 0.2);
|
|
3256
|
+
flex-shrink: 0;
|
|
3257
|
+
transition: background .12s;
|
|
3258
|
+
}
|
|
3259
|
+
|
|
3260
|
+
html[data-theme="light"] .nav-dropdown-panel a::before {
|
|
3261
|
+
background: rgba(0, 0, 0, 0.15);
|
|
3262
|
+
}
|
|
3263
|
+
|
|
3264
|
+
.nav-dropdown-panel a:hover::before {
|
|
3265
|
+
background: var(--q-color-starlight-blue);
|
|
3266
|
+
}
|
|
3267
|
+
|
|
3268
|
+
/* Profile avatar */
|
|
3269
|
+
.nav-profile {
|
|
3270
|
+
flex-shrink: 0;
|
|
3271
|
+
margin-left: auto;
|
|
3272
|
+
width: 38px;
|
|
3273
|
+
height: 38px;
|
|
3274
|
+
border-radius: 50%;
|
|
3275
|
+
overflow: hidden;
|
|
3276
|
+
display: flex;
|
|
3277
|
+
align-items: center;
|
|
3278
|
+
justify-content: center;
|
|
3279
|
+
background: linear-gradient(135deg, var(--q-color-starlight-blue), var(--q-color-starlight-peach));
|
|
3280
|
+
text-decoration: none;
|
|
3281
|
+
font-weight: 700;
|
|
3282
|
+
font-size: .8rem;
|
|
3283
|
+
color: var(--q-color-starlight-deep, #0f172a);
|
|
3284
|
+
}
|
|
3285
|
+
|
|
3286
|
+
html[data-theme="light"] .nav-profile {
|
|
3287
|
+
background: linear-gradient(135deg, var(--q-color-starlight-peach), var(--q-color-starlight-blue));
|
|
3288
|
+
color: var(--q-light-text, #1e293b);
|
|
3289
|
+
}
|
|
3290
|
+
|
|
3291
|
+
/* Hamburger button */
|
|
3292
|
+
.nav-hamburger {
|
|
3293
|
+
display: none;
|
|
3294
|
+
cursor: pointer;
|
|
3295
|
+
width: 38px;
|
|
3296
|
+
height: 38px;
|
|
3297
|
+
border-radius: .625rem;
|
|
3298
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
3299
|
+
background-color: hsla(0,0%,100%,.05);
|
|
3300
|
+
align-items: center;
|
|
3301
|
+
justify-content: center;
|
|
3302
|
+
flex-shrink: 0;
|
|
3303
|
+
margin-left: auto;
|
|
3304
|
+
}
|
|
3305
|
+
|
|
3306
|
+
html[data-theme="light"] .nav-hamburger {
|
|
3307
|
+
background: rgba(255, 255, 255, 0.9);
|
|
3308
|
+
border-color: rgba(0, 0, 0, 0.1);
|
|
3309
|
+
}
|
|
3310
|
+
|
|
3311
|
+
.nav-hamburger:hover {
|
|
3312
|
+
background: rgba(255, 255, 255, 0.08);
|
|
3313
|
+
}
|
|
3314
|
+
|
|
3315
|
+
html[data-theme="light"] .nav-hamburger:hover {
|
|
3316
|
+
background: rgba(0, 0, 0, 0.05);
|
|
3317
|
+
}
|
|
3318
|
+
|
|
3319
|
+
/* Hamburger icon */
|
|
3320
|
+
.nav-hamburger-icon {
|
|
3321
|
+
display: flex;
|
|
3322
|
+
flex-direction: column;
|
|
3323
|
+
gap: 4px;
|
|
3324
|
+
}
|
|
3325
|
+
|
|
3326
|
+
.nav-hamburger-icon span {
|
|
3327
|
+
display: block;
|
|
3328
|
+
width: 18px;
|
|
3329
|
+
height: 1.5px;
|
|
3330
|
+
background: var(--q-text-muted, rgba(255,255,255,0.5));
|
|
3331
|
+
border-radius: 2px;
|
|
3332
|
+
transition: transform .2s, opacity .2s, background .15s;
|
|
3333
|
+
}
|
|
3334
|
+
|
|
3335
|
+
html[data-theme="light"] .nav-hamburger-icon span {
|
|
3336
|
+
background: var(--q-text-muted, #64748b);
|
|
3337
|
+
}
|
|
3338
|
+
|
|
3339
|
+
.nav-hamburger:hover .nav-hamburger-icon span {
|
|
3340
|
+
background: var(--q-text-primary, #f1f5f9);
|
|
3341
|
+
}
|
|
3342
|
+
|
|
3343
|
+
html[data-theme="light"] .nav-hamburger:hover .nav-hamburger-icon span {
|
|
3344
|
+
background: var(--q-light-text, #1e293b);
|
|
3345
|
+
}
|
|
3346
|
+
|
|
3347
|
+
/* Animate hamburger to X when checked */
|
|
3348
|
+
.nav-toggle:checked ~ .nav-header .nav-hamburger-icon span:nth-child(1) {
|
|
3349
|
+
transform: translateY(5.5px) rotate(45deg);
|
|
3350
|
+
}
|
|
3351
|
+
|
|
3352
|
+
.nav-toggle:checked ~ .nav-header .nav-hamburger-icon span:nth-child(2) {
|
|
3353
|
+
opacity: 0;
|
|
3354
|
+
}
|
|
3355
|
+
|
|
3356
|
+
.nav-toggle:checked ~ .nav-header .nav-hamburger-icon span:nth-child(3) {
|
|
3357
|
+
transform: translateY(-5.5px) rotate(-45deg);
|
|
3358
|
+
}
|
|
3359
|
+
|
|
3360
|
+
/* Mobile drawer */
|
|
3361
|
+
.nav-drawer {
|
|
3362
|
+
display: none;
|
|
3363
|
+
position: sticky;
|
|
3364
|
+
top: 64px;
|
|
3365
|
+
z-index: 99;
|
|
3366
|
+
overflow: hidden;
|
|
3367
|
+
max-height: 0;
|
|
3368
|
+
transition: max-height .3s ease;
|
|
3369
|
+
background-color: hsla(0,0%,100%,.05);
|
|
3370
|
+
backdrop-filter: blur(16px);
|
|
3371
|
+
-webkit-backdrop-filter: blur(16px);
|
|
3372
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
3373
|
+
}
|
|
3374
|
+
|
|
3375
|
+
html[data-theme="light"] .nav-drawer {
|
|
3376
|
+
background: rgba(255, 255, 255, 0.98);
|
|
3377
|
+
border-bottom-color: rgba(0, 0, 0, 0.08);
|
|
3378
|
+
}
|
|
3379
|
+
|
|
3380
|
+
.nav-toggle:checked ~ .nav-drawer {
|
|
3381
|
+
max-height: 400px;
|
|
3382
|
+
}
|
|
3383
|
+
|
|
3384
|
+
.nav-drawer-inner {
|
|
3385
|
+
padding: 1rem;
|
|
3386
|
+
display: flex;
|
|
3387
|
+
flex-direction: column;
|
|
3388
|
+
gap: .25rem;
|
|
3389
|
+
}
|
|
3390
|
+
|
|
3391
|
+
.nav-drawer-inner a {
|
|
3392
|
+
display: block;
|
|
3393
|
+
padding: .65rem .85rem;
|
|
3394
|
+
border-radius: .625rem;
|
|
3395
|
+
font-size: .9rem;
|
|
3396
|
+
font-weight: 600;
|
|
3397
|
+
color: var(--q-text-secondary, rgba(255,255,255,0.6));
|
|
3398
|
+
text-decoration: none;
|
|
3399
|
+
transition: color .12s, background .12s;
|
|
3400
|
+
}
|
|
3401
|
+
|
|
3402
|
+
html[data-theme="light"] .nav-drawer-inner a {
|
|
3403
|
+
color: var(--q-text-muted, #64748b);
|
|
3404
|
+
}
|
|
3405
|
+
|
|
3406
|
+
.nav-drawer-inner a:hover {
|
|
3407
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
3408
|
+
background: rgba(255, 255, 255, 0.08);
|
|
3409
|
+
}
|
|
3410
|
+
|
|
3411
|
+
html[data-theme="light"] .nav-drawer-inner a:hover {
|
|
3412
|
+
color: var(--q-light-text, #1e293b);
|
|
3413
|
+
background: rgba(0, 0, 0, 0.05);
|
|
3414
|
+
}
|
|
3415
|
+
|
|
3416
|
+
.nav-drawer-section-label {
|
|
3417
|
+
font-size: .7rem;
|
|
3418
|
+
letter-spacing: .08em;
|
|
3419
|
+
text-transform: uppercase;
|
|
3420
|
+
color: var(--q-text-muted, rgba(255,255,255,0.4));
|
|
3421
|
+
padding: .4rem .85rem .2rem;
|
|
3422
|
+
}
|
|
3423
|
+
|
|
3424
|
+
/* Mobile responsive */
|
|
3425
|
+
@media (max-width: 640px) {
|
|
3426
|
+
.nav-header .nav-links,
|
|
3427
|
+
.nav-header .nav-profile {
|
|
3428
|
+
display: none;
|
|
3429
|
+
}
|
|
3430
|
+
|
|
3431
|
+
.nav-hamburger {
|
|
3432
|
+
display: flex;
|
|
3433
|
+
margin-left: 0;
|
|
3434
|
+
}
|
|
3435
|
+
|
|
3436
|
+
.nav-drawer {
|
|
3437
|
+
display: block;
|
|
3438
|
+
}
|
|
3439
|
+
|
|
3440
|
+
.nav-header {
|
|
3441
|
+
display: flex;
|
|
3442
|
+
gap: 0.5rem;
|
|
3443
|
+
}
|
|
3444
|
+
|
|
3445
|
+
.nav-logo,
|
|
3446
|
+
.nav-brand {
|
|
3447
|
+
order: 2;
|
|
3448
|
+
}
|
|
3449
|
+
|
|
3450
|
+
.nav-hamburger {
|
|
3451
|
+
order: 1;
|
|
3452
|
+
}
|
|
3453
|
+
|
|
3454
|
+
.theme-toggle,
|
|
3455
|
+
.nav-header > .flex.items-center {
|
|
3456
|
+
order: 3;
|
|
3457
|
+
margin-left: auto;
|
|
3458
|
+
}
|
|
3459
|
+
|
|
3460
|
+
.nav-header > .flex.items-center {
|
|
3461
|
+
flex-direction: row !important;
|
|
3462
|
+
}
|
|
3463
|
+
|
|
3464
|
+
.nav-header > .flex.items-center .theme-toggle {
|
|
3465
|
+
order: 1;
|
|
3466
|
+
}
|
|
3467
|
+
|
|
3468
|
+
.nav-header > .flex.items-center > .btn-starlight {
|
|
3469
|
+
order: 2;
|
|
3470
|
+
}
|
|
3471
|
+
}
|