@howssatoshi/quantumcss 1.6.1 → 1.7.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 +48 -11
- package/dist/quantum.min.css +6442 -1
- package/examples/gaming-template.html +3 -18
- package/examples/gradient-test.html +53 -0
- package/examples/index.html +13 -13
- package/examples/kitchen-sink.html +241 -9
- package/package.json +1 -1
- package/src/defaults.js +88 -31
- package/src/generator.js +98 -4
- package/src/starlight.js +19 -3
- package/src/styles/quantum-animations.css +2 -2
- package/src/styles/quantum-base.css +363 -362
- package/src/styles/quantum-components.css +127 -127
- package/src/styles/quantum-responsive.css +70 -70
- package/src/styles/starlight.css +76 -72
|
@@ -4,21 +4,21 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
/* Hover State Utilities */
|
|
7
|
-
.hover\:text-primary:hover { color: var(--color-primary); }
|
|
8
|
-
.hover\:text-secondary:hover { color: var(--color-secondary); }
|
|
7
|
+
.hover\:text-primary:hover { color: var(--q-color-primary); }
|
|
8
|
+
.hover\:text-secondary:hover { color: var(--q-color-secondary); }
|
|
9
9
|
.hover\:text-white:hover { color: #fff; }
|
|
10
10
|
.hover\:text-black:hover { color: #000; }
|
|
11
11
|
|
|
12
|
-
.hover\:bg-primary:hover { background-color: var(--color-primary); }
|
|
13
|
-
.hover\:bg-secondary:hover { background-color: var(--color-secondary); }
|
|
12
|
+
.hover\:bg-primary:hover { background-color: var(--q-color-primary); }
|
|
13
|
+
.hover\:bg-secondary:hover { background-color: var(--q-color-secondary); }
|
|
14
14
|
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
|
|
15
15
|
.hover\:bg-gray-200:hover { background-color: #e5e7eb; }
|
|
16
16
|
|
|
17
|
-
.hover\:border-primary:hover { border-color: var(--color-primary); }
|
|
18
|
-
.hover\:border-secondary:hover { border-color: var(--color-secondary); }
|
|
17
|
+
.hover\:border-primary:hover { border-color: var(--q-color-primary); }
|
|
18
|
+
.hover\:border-secondary:hover { border-color: var(--q-color-secondary); }
|
|
19
19
|
|
|
20
|
-
.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg); }
|
|
21
|
-
.hover\:shadow-xl:hover { box-shadow: var(--shadow-xl); }
|
|
20
|
+
.hover\:shadow-lg:hover { box-shadow: var(--q-shadow-lg); }
|
|
21
|
+
.hover\:shadow-xl:hover { box-shadow: var(--q-shadow-xl); }
|
|
22
22
|
|
|
23
23
|
.hover\:scale-105:hover { transform: scale(1.05); }
|
|
24
24
|
.hover\:scale-110:hover { transform: scale(1.1); }
|
|
@@ -34,22 +34,22 @@
|
|
|
34
34
|
/* Focus State Utilities */
|
|
35
35
|
.focus\:outline-none:focus { outline: none; }
|
|
36
36
|
.focus\:outline:focus { outline: 2px solid; outline-offset: 2px; }
|
|
37
|
-
.focus\:outline-primary:focus { outline-color: var(--color-primary); }
|
|
38
|
-
.focus\:outline-secondary:focus { outline-color: var(--color-secondary); }
|
|
37
|
+
.focus\:outline-primary:focus { outline-color: var(--q-color-primary); }
|
|
38
|
+
.focus\:outline-secondary:focus { outline-color: var(--q-color-secondary); }
|
|
39
39
|
|
|
40
40
|
.focus\:ring:focus { box-shadow: 0 0 0 3px; }
|
|
41
|
-
.focus\:ring-primary:focus { box-shadow: 0 0 0 3px var(--color-primary); }
|
|
42
|
-
.focus\:ring-secondary:focus { box-shadow: 0 0 0 3px var(--color-secondary); }
|
|
41
|
+
.focus\:ring-primary:focus { box-shadow: 0 0 0 3px var(--q-color-primary); }
|
|
42
|
+
.focus\:ring-secondary:focus { box-shadow: 0 0 0 3px var(--q-color-secondary); }
|
|
43
43
|
|
|
44
|
-
.focus\:border-primary:focus { border-color: var(--color-primary); }
|
|
45
|
-
.focus\:border-secondary:focus { border-color: var(--color-secondary); }
|
|
44
|
+
.focus\:border-primary:focus { border-color: var(--q-color-primary); }
|
|
45
|
+
.focus\:border-secondary:focus { border-color: var(--q-color-secondary); }
|
|
46
46
|
|
|
47
47
|
/* Active State Utilities */
|
|
48
48
|
.active\:scale-95:active { transform: scale(0.95); }
|
|
49
49
|
.active\:scale-90:active { transform: scale(0.9); }
|
|
50
50
|
|
|
51
|
-
.active\:bg-primary:active { background-color: var(--color-primary); }
|
|
52
|
-
.active\:bg-secondary:active { background-color: var(--color-secondary); }
|
|
51
|
+
.active\:bg-primary:active { background-color: var(--q-color-primary); }
|
|
52
|
+
.active\:bg-secondary:active { background-color: var(--q-color-secondary); }
|
|
53
53
|
|
|
54
54
|
/* Disabled State Utilities */
|
|
55
55
|
.disabled\:opacity-50:disabled { opacity: 0.5; }
|
|
@@ -58,11 +58,11 @@
|
|
|
58
58
|
.disabled\:pointer-events-none:disabled { pointer-events: none; }
|
|
59
59
|
|
|
60
60
|
/* Group Hover Utilities */
|
|
61
|
-
.group:hover .group-hover\:text-primary { color: var(--color-primary); }
|
|
61
|
+
.group:hover .group-hover\:text-primary { color: var(--q-color-primary); }
|
|
62
62
|
.group:hover .group-hover\:text-white { color: #fff; }
|
|
63
63
|
|
|
64
|
-
.group:hover .group-hover\:bg-primary { background-color: var(--color-primary); }
|
|
65
|
-
.group:hover .group-hover\:bg-secondary { background-color: var(--color-secondary); }
|
|
64
|
+
.group:hover .group-hover\:bg-primary { background-color: var(--q-color-primary); }
|
|
65
|
+
.group:hover .group-hover\:bg-secondary { background-color: var(--q-color-secondary); }
|
|
66
66
|
|
|
67
67
|
.group:hover .group-hover\:opacity-100 { opacity: 1; }
|
|
68
68
|
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
|
|
@@ -74,10 +74,10 @@
|
|
|
74
74
|
display: inline-flex;
|
|
75
75
|
align-items: center;
|
|
76
76
|
justify-content: center;
|
|
77
|
-
padding: var(--space-2) var(--space-4);
|
|
78
|
-
border-radius: var(--radius-md);
|
|
77
|
+
padding: var(--q-space-2) var(--q-space-4);
|
|
78
|
+
border-radius: var(--q-radius-md);
|
|
79
79
|
font-weight: 500;
|
|
80
|
-
transition: all var(--duration-150) var(--ease-in-out);
|
|
80
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
81
81
|
cursor: pointer;
|
|
82
82
|
border: 1px solid transparent;
|
|
83
83
|
text-decoration: none;
|
|
@@ -91,20 +91,20 @@
|
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
.btn-primary {
|
|
94
|
-
background-color: var(--color-primary);
|
|
94
|
+
background-color: var(--q-color-primary);
|
|
95
95
|
color: white;
|
|
96
|
-
border
|
|
96
|
+
border: 0;
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
.btn-primary:hover {
|
|
100
|
-
background-color: var(--color-primary-600);
|
|
101
|
-
border
|
|
100
|
+
background-color: var(--q-color-primary-600);
|
|
101
|
+
border: 0;
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
.btn-secondary {
|
|
105
105
|
background-color: rgb(255 255 255 / 8%);
|
|
106
106
|
color: #ffffff !important;
|
|
107
|
-
border:
|
|
107
|
+
border: 0;
|
|
108
108
|
backdrop-filter: blur(12px);
|
|
109
109
|
-webkit-backdrop-filter: blur(12px);
|
|
110
110
|
}
|
|
@@ -117,42 +117,42 @@ body.light-mode .btn-secondary,
|
|
|
117
117
|
html[data-theme="light"] .btn-secondary {
|
|
118
118
|
background-color: rgb(0 0 0 / 3%);
|
|
119
119
|
color: #1e293b !important;
|
|
120
|
-
border
|
|
120
|
+
border: 0;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
.btn-outline {
|
|
124
124
|
background-color: transparent;
|
|
125
|
-
color: var(--color-primary);
|
|
126
|
-
border-color: var(--color-primary);
|
|
125
|
+
color: var(--q-color-primary);
|
|
126
|
+
border-color: var(--q-color-primary);
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
.btn-outline:hover {
|
|
130
|
-
background-color: var(--color-primary);
|
|
130
|
+
background-color: var(--q-color-primary);
|
|
131
131
|
color: white;
|
|
132
132
|
}
|
|
133
133
|
|
|
134
134
|
.btn-ghost {
|
|
135
135
|
background-color: transparent;
|
|
136
|
-
color: var(--color-primary);
|
|
136
|
+
color: var(--q-color-primary);
|
|
137
137
|
border-color: transparent;
|
|
138
138
|
}
|
|
139
139
|
|
|
140
140
|
.btn-ghost:hover {
|
|
141
|
-
background-color: var(--color-primary-100);
|
|
141
|
+
background-color: var(--q-color-primary-100);
|
|
142
142
|
}
|
|
143
143
|
|
|
144
144
|
.btn-sm {
|
|
145
|
-
padding: var(--space-1) var(--space-3);
|
|
145
|
+
padding: var(--q-space-1) var(--q-space-3);
|
|
146
146
|
font-size: 0.875rem;
|
|
147
147
|
}
|
|
148
148
|
|
|
149
149
|
.btn-lg {
|
|
150
|
-
padding: var(--space-3) var(--space-6);
|
|
150
|
+
padding: var(--q-space-3) var(--q-space-6);
|
|
151
151
|
font-size: 1.125rem;
|
|
152
152
|
}
|
|
153
153
|
|
|
154
154
|
.btn-xl {
|
|
155
|
-
padding: var(--space-4) var(--space-8);
|
|
155
|
+
padding: var(--q-space-4) var(--q-space-8);
|
|
156
156
|
font-size: 1.25rem;
|
|
157
157
|
}
|
|
158
158
|
|
|
@@ -160,10 +160,10 @@ html[data-theme="light"] .btn-secondary {
|
|
|
160
160
|
.card {
|
|
161
161
|
background-color: white;
|
|
162
162
|
color: #1e293b;
|
|
163
|
-
border-radius: var(--radius-lg);
|
|
164
|
-
box-shadow: var(--shadow-md);
|
|
163
|
+
border-radius: var(--q-radius-lg);
|
|
164
|
+
box-shadow: var(--q-shadow-md);
|
|
165
165
|
overflow: hidden;
|
|
166
|
-
transition: all var(--duration-200) var(--ease-in-out);
|
|
166
|
+
transition: all var(--q-duration-200) var(--q-ease-in-out);
|
|
167
167
|
}
|
|
168
168
|
|
|
169
169
|
body.light-mode .card {
|
|
@@ -172,21 +172,21 @@ body.light-mode .card {
|
|
|
172
172
|
}
|
|
173
173
|
|
|
174
174
|
.card:hover {
|
|
175
|
-
box-shadow: var(--shadow-lg);
|
|
175
|
+
box-shadow: var(--q-shadow-lg);
|
|
176
176
|
transform: translateY(-2px);
|
|
177
177
|
}
|
|
178
178
|
|
|
179
179
|
.card-header {
|
|
180
|
-
padding: var(--space-6);
|
|
180
|
+
padding: var(--q-space-6);
|
|
181
181
|
border-bottom: 1px solid #e5e7eb;
|
|
182
182
|
}
|
|
183
183
|
|
|
184
184
|
.card-body {
|
|
185
|
-
padding: var(--space-6);
|
|
185
|
+
padding: var(--q-space-6);
|
|
186
186
|
}
|
|
187
187
|
|
|
188
188
|
.card-footer {
|
|
189
|
-
padding: var(--space-6);
|
|
189
|
+
padding: var(--q-space-6);
|
|
190
190
|
border-top: 1px solid #e5e7eb;
|
|
191
191
|
background-color: #f9fafb;
|
|
192
192
|
color: #1e293b;
|
|
@@ -201,13 +201,13 @@ body.light-mode .card-footer {
|
|
|
201
201
|
.input {
|
|
202
202
|
display: block;
|
|
203
203
|
width: 100%;
|
|
204
|
-
padding: var(--space-2) var(--space-3);
|
|
204
|
+
padding: var(--q-space-2) var(--q-space-3);
|
|
205
205
|
border: 1px solid #d1d5db;
|
|
206
|
-
border-radius: var(--radius-md);
|
|
206
|
+
border-radius: var(--q-radius-md);
|
|
207
207
|
background-color: white;
|
|
208
208
|
color: #1e293b;
|
|
209
209
|
font-size: 1rem;
|
|
210
|
-
transition: all var(--duration-150) var(--ease-in-out);
|
|
210
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
211
211
|
}
|
|
212
212
|
|
|
213
213
|
body.light-mode .input {
|
|
@@ -221,8 +221,8 @@ textarea.input {
|
|
|
221
221
|
|
|
222
222
|
.input:focus {
|
|
223
223
|
outline: none;
|
|
224
|
-
border-color: var(--color-primary);
|
|
225
|
-
box-shadow: 0 0 0 3px var(--color-primary);
|
|
224
|
+
border-color: var(--q-color-primary);
|
|
225
|
+
box-shadow: 0 0 0 3px var(--q-color-primary);
|
|
226
226
|
}
|
|
227
227
|
|
|
228
228
|
/* Date & Time Input Specifics */
|
|
@@ -262,12 +262,12 @@ body.light-mode .input:disabled {
|
|
|
262
262
|
}
|
|
263
263
|
|
|
264
264
|
.input-error {
|
|
265
|
-
border-color: var(--color-error);
|
|
265
|
+
border-color: var(--q-color-error);
|
|
266
266
|
}
|
|
267
267
|
|
|
268
268
|
.input-error:focus {
|
|
269
|
-
border-color: var(--color-error);
|
|
270
|
-
box-shadow: 0 0 0 3px var(--color-error);
|
|
269
|
+
border-color: var(--q-color-error);
|
|
270
|
+
box-shadow: 0 0 0 3px var(--q-color-error);
|
|
271
271
|
}
|
|
272
272
|
|
|
273
273
|
/* Badge Component */
|
|
@@ -348,8 +348,8 @@ html[data-theme="light"] .badge-error {
|
|
|
348
348
|
|
|
349
349
|
/* Alert Component */
|
|
350
350
|
.alert {
|
|
351
|
-
padding: var(--space-4);
|
|
352
|
-
border-radius: var(--radius-md);
|
|
351
|
+
padding: var(--q-space-4);
|
|
352
|
+
border-radius: var(--q-radius-md);
|
|
353
353
|
border: 1px solid;
|
|
354
354
|
}
|
|
355
355
|
|
|
@@ -391,8 +391,8 @@ html[data-theme="light"] .badge-error {
|
|
|
391
391
|
.modal-content {
|
|
392
392
|
background-color: white;
|
|
393
393
|
color: #1e293b;
|
|
394
|
-
border-radius: var(--radius-lg);
|
|
395
|
-
box-shadow: var(--shadow-2xl);
|
|
394
|
+
border-radius: var(--q-radius-lg);
|
|
395
|
+
box-shadow: var(--q-shadow-2xl);
|
|
396
396
|
max-width: 90vw;
|
|
397
397
|
max-height: 90vh;
|
|
398
398
|
overflow-y: auto;
|
|
@@ -409,7 +409,7 @@ body.light-mode .modal-content {
|
|
|
409
409
|
width: 1.5rem;
|
|
410
410
|
height: 1.5rem;
|
|
411
411
|
border: 2px solid rgb(255 255 255 / 10%);
|
|
412
|
-
border-top-color: var(--color-primary);
|
|
412
|
+
border-top-color: var(--q-color-primary);
|
|
413
413
|
border-radius: 50%;
|
|
414
414
|
animation: spin 1s linear infinite;
|
|
415
415
|
}
|
|
@@ -423,7 +423,7 @@ body.light-mode .modal-content {
|
|
|
423
423
|
background: linear-gradient(90deg, rgb(255 255 255 / 5%) 25%, rgb(255 255 255 / 10%) 50%, rgb(255 255 255 / 5%) 75%);
|
|
424
424
|
background-size: 200% 100%;
|
|
425
425
|
animation: shimmer 2s infinite;
|
|
426
|
-
border-radius: var(--radius-md);
|
|
426
|
+
border-radius: var(--q-radius-md);
|
|
427
427
|
}
|
|
428
428
|
|
|
429
429
|
@keyframes shimmer {
|
|
@@ -448,15 +448,15 @@ body.light-mode .skeleton {
|
|
|
448
448
|
transform: translateX(-50%);
|
|
449
449
|
background-color: #1f2937;
|
|
450
450
|
color: white;
|
|
451
|
-
padding: var(--space-1) var(--space-2);
|
|
452
|
-
border-radius: var(--radius-md);
|
|
451
|
+
padding: var(--q-space-1) var(--q-space-2);
|
|
452
|
+
border-radius: var(--q-radius-md);
|
|
453
453
|
font-size: 0.875rem;
|
|
454
454
|
white-space: nowrap;
|
|
455
455
|
opacity: 0;
|
|
456
456
|
visibility: hidden;
|
|
457
|
-
transition: all var(--duration-150) var(--ease-in-out);
|
|
457
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
458
458
|
z-index: 10;
|
|
459
|
-
margin-bottom: var(--space-1);
|
|
459
|
+
margin-bottom: var(--q-space-1);
|
|
460
460
|
}
|
|
461
461
|
|
|
462
462
|
.tooltip:hover .tooltip-content {
|
|
@@ -477,14 +477,14 @@ body.light-mode .skeleton {
|
|
|
477
477
|
background-color: white;
|
|
478
478
|
color: #1e293b;
|
|
479
479
|
border: 1px solid #e5e7eb;
|
|
480
|
-
border-radius: var(--radius-md);
|
|
481
|
-
box-shadow: var(--shadow-lg);
|
|
480
|
+
border-radius: var(--q-radius-md);
|
|
481
|
+
box-shadow: var(--q-shadow-lg);
|
|
482
482
|
min-width: 200px;
|
|
483
483
|
z-index: 20;
|
|
484
484
|
opacity: 0;
|
|
485
485
|
visibility: hidden;
|
|
486
486
|
transform: translateY(-10px);
|
|
487
|
-
transition: all var(--duration-150) var(--ease-in-out);
|
|
487
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
488
488
|
}
|
|
489
489
|
|
|
490
490
|
body.light-mode .dropdown-content {
|
|
@@ -501,13 +501,13 @@ body.light-mode .dropdown-content {
|
|
|
501
501
|
.dropdown-item {
|
|
502
502
|
display: block;
|
|
503
503
|
width: 100%;
|
|
504
|
-
padding: var(--space-2) var(--space-3);
|
|
504
|
+
padding: var(--q-space-2) var(--q-space-3);
|
|
505
505
|
text-align: left;
|
|
506
506
|
background: none;
|
|
507
507
|
border: none;
|
|
508
508
|
cursor: pointer;
|
|
509
509
|
color: #1e293b;
|
|
510
|
-
transition: background-color var(--duration-150) var(--ease-in-out);
|
|
510
|
+
transition: background-color var(--q-duration-150) var(--q-ease-in-out);
|
|
511
511
|
}
|
|
512
512
|
|
|
513
513
|
.dropdown-item:hover {
|
|
@@ -527,20 +527,20 @@ body.light-mode .dropdown-item:hover {
|
|
|
527
527
|
/* Accordion Component */
|
|
528
528
|
.accordion-item {
|
|
529
529
|
border: 1px solid #e5e7eb;
|
|
530
|
-
border-radius: var(--radius-md);
|
|
531
|
-
margin-bottom: var(--space-2);
|
|
530
|
+
border-radius: var(--q-radius-md);
|
|
531
|
+
margin-bottom: var(--q-space-2);
|
|
532
532
|
overflow: hidden;
|
|
533
533
|
}
|
|
534
534
|
|
|
535
535
|
.accordion-header {
|
|
536
|
-
padding: var(--space-4);
|
|
536
|
+
padding: var(--q-space-4);
|
|
537
537
|
background-color: #f9fafb;
|
|
538
538
|
color: #1e293b;
|
|
539
539
|
cursor: pointer;
|
|
540
540
|
display: flex;
|
|
541
541
|
justify-content: space-between;
|
|
542
542
|
align-items: center;
|
|
543
|
-
transition: background-color var(--duration-150) var(--ease-in-out);
|
|
543
|
+
transition: background-color var(--q-duration-150) var(--q-ease-in-out);
|
|
544
544
|
}
|
|
545
545
|
|
|
546
546
|
.accordion-header:hover {
|
|
@@ -549,12 +549,12 @@ body.light-mode .dropdown-item:hover {
|
|
|
549
549
|
}
|
|
550
550
|
|
|
551
551
|
.accordion-content {
|
|
552
|
-
padding: var(--space-4);
|
|
552
|
+
padding: var(--q-space-4);
|
|
553
553
|
background-color: white;
|
|
554
554
|
color: #1e293b;
|
|
555
555
|
max-height: 0;
|
|
556
556
|
overflow: hidden;
|
|
557
|
-
transition: max-height var(--duration-300) var(--ease-in-out);
|
|
557
|
+
transition: max-height var(--q-duration-300) var(--q-ease-in-out);
|
|
558
558
|
}
|
|
559
559
|
|
|
560
560
|
body.light-mode .accordion-header {
|
|
@@ -581,7 +581,7 @@ body.light-mode .accordion-content {
|
|
|
581
581
|
}
|
|
582
582
|
|
|
583
583
|
.accordion-icon {
|
|
584
|
-
transition: transform var(--duration-300) var(--ease-in-out);
|
|
584
|
+
transition: transform var(--q-duration-300) var(--q-ease-in-out);
|
|
585
585
|
}
|
|
586
586
|
|
|
587
587
|
/* Tab Component */
|
|
@@ -591,24 +591,24 @@ body.light-mode .accordion-content {
|
|
|
591
591
|
}
|
|
592
592
|
|
|
593
593
|
.tab-button {
|
|
594
|
-
padding: var(--space-3) var(--space-4);
|
|
594
|
+
padding: var(--q-space-3) var(--q-space-4);
|
|
595
595
|
background: none;
|
|
596
596
|
border: none;
|
|
597
597
|
cursor: pointer;
|
|
598
598
|
border-bottom: 2px solid transparent;
|
|
599
|
-
color: var(--text-secondary);
|
|
599
|
+
color: var(--q-text-secondary);
|
|
600
600
|
font-weight: 500;
|
|
601
|
-
transition: all var(--duration-150) var(--ease-in-out);
|
|
601
|
+
transition: all var(--q-duration-150) var(--q-ease-in-out);
|
|
602
602
|
}
|
|
603
603
|
|
|
604
604
|
.tab-button:hover {
|
|
605
605
|
background-color: rgb(255 255 255 / 5%);
|
|
606
|
-
color: var(--text-primary);
|
|
606
|
+
color: var(--q-text-primary);
|
|
607
607
|
}
|
|
608
608
|
|
|
609
609
|
.tab-button.active {
|
|
610
|
-
border-bottom-color: var(--color-starlight-blue);
|
|
611
|
-
color: var(--color-starlight-blue);
|
|
610
|
+
border-bottom-color: var(--q-color-starlight-blue);
|
|
611
|
+
color: var(--q-color-starlight-blue);
|
|
612
612
|
}
|
|
613
613
|
|
|
614
614
|
body.light-mode .tab-list {
|
|
@@ -625,12 +625,12 @@ body.light-mode .tab-button:hover {
|
|
|
625
625
|
}
|
|
626
626
|
|
|
627
627
|
body.light-mode .tab-button.active {
|
|
628
|
-
border-bottom-color: var(--color-primary);
|
|
629
|
-
color: var(--color-primary);
|
|
628
|
+
border-bottom-color: var(--q-color-primary);
|
|
629
|
+
color: var(--q-color-primary);
|
|
630
630
|
}
|
|
631
631
|
|
|
632
632
|
.tab-content {
|
|
633
|
-
padding: var(--space-4);
|
|
633
|
+
padding: var(--q-space-4);
|
|
634
634
|
}
|
|
635
635
|
|
|
636
636
|
.tab-panel {
|
|
@@ -646,14 +646,14 @@ body.light-mode .tab-button.active {
|
|
|
646
646
|
width: 100%;
|
|
647
647
|
height: 0.5rem;
|
|
648
648
|
background-color: #e5e7eb;
|
|
649
|
-
border-radius: var(--radius-full);
|
|
649
|
+
border-radius: var(--q-radius-full);
|
|
650
650
|
overflow: hidden;
|
|
651
651
|
}
|
|
652
652
|
|
|
653
653
|
.progress-bar {
|
|
654
654
|
height: 100%;
|
|
655
|
-
background-color: var(--color-primary);
|
|
656
|
-
transition: width var(--duration-300) var(--ease-in-out);
|
|
655
|
+
background-color: var(--q-color-primary);
|
|
656
|
+
transition: width var(--q-duration-300) var(--q-ease-in-out);
|
|
657
657
|
}
|
|
658
658
|
|
|
659
659
|
/* Toggle Switch */
|
|
@@ -675,8 +675,8 @@ body.light-mode .tab-button.active {
|
|
|
675
675
|
cursor: pointer;
|
|
676
676
|
inset: 0;
|
|
677
677
|
background-color: #cbd5e1;
|
|
678
|
-
transition: background-color var(--duration-150) var(--ease-in-out);
|
|
679
|
-
border-radius: var(--radius-full);
|
|
678
|
+
transition: background-color var(--q-duration-150) var(--q-ease-in-out);
|
|
679
|
+
border-radius: var(--q-radius-full);
|
|
680
680
|
}
|
|
681
681
|
|
|
682
682
|
.toggle-slider::before {
|
|
@@ -687,12 +687,12 @@ body.light-mode .tab-button.active {
|
|
|
687
687
|
left: 0.125rem;
|
|
688
688
|
bottom: 0.125rem;
|
|
689
689
|
background-color: white;
|
|
690
|
-
transition: transform var(--duration-150) var(--ease-in-out);
|
|
690
|
+
transition: transform var(--q-duration-150) var(--q-ease-in-out);
|
|
691
691
|
border-radius: 50%;
|
|
692
692
|
}
|
|
693
693
|
|
|
694
694
|
.toggle-input:checked + .toggle-slider {
|
|
695
|
-
background-color: var(--color-primary);
|
|
695
|
+
background-color: var(--q-color-primary);
|
|
696
696
|
}
|
|
697
697
|
|
|
698
698
|
.toggle-input:checked + .toggle-slider::before {
|
|
@@ -719,7 +719,7 @@ body.light-mode .tab-button.active {
|
|
|
719
719
|
}
|
|
720
720
|
|
|
721
721
|
.animate-fade-in {
|
|
722
|
-
animation: fadeIn var(--duration-500) var(--ease-in-out);
|
|
722
|
+
animation: fadeIn var(--q-duration-500) var(--q-ease-in-out);
|
|
723
723
|
}
|
|
724
724
|
|
|
725
725
|
@keyframes fadeIn {
|
|
@@ -728,7 +728,7 @@ body.light-mode .tab-button.active {
|
|
|
728
728
|
}
|
|
729
729
|
|
|
730
730
|
.animate-slide-up {
|
|
731
|
-
animation: slideUp var(--duration-300) var(--ease-out);
|
|
731
|
+
animation: slideUp var(--q-duration-300) var(--q-ease-out);
|
|
732
732
|
}
|
|
733
733
|
|
|
734
734
|
@keyframes slideUp {
|
|
@@ -737,7 +737,7 @@ body.light-mode .tab-button.active {
|
|
|
737
737
|
}
|
|
738
738
|
|
|
739
739
|
.animate-slide-down {
|
|
740
|
-
animation: slideDown var(--duration-300) var(--ease-out);
|
|
740
|
+
animation: slideDown var(--q-duration-300) var(--q-ease-out);
|
|
741
741
|
}
|
|
742
742
|
|
|
743
743
|
@keyframes slideDown {
|
|
@@ -762,7 +762,7 @@ body.light-mode .tab-button.active {
|
|
|
762
762
|
}
|
|
763
763
|
|
|
764
764
|
.table-wrapper::-webkit-scrollbar-thumb {
|
|
765
|
-
background: var(--color-starlight-blue, #3b82f6);
|
|
765
|
+
background: var(--q-color-starlight-blue, #3b82f6);
|
|
766
766
|
border-radius: 4px;
|
|
767
767
|
}
|
|
768
768
|
|
|
@@ -775,21 +775,21 @@ body.light-mode .table-wrapper::-webkit-scrollbar-track {
|
|
|
775
775
|
border-collapse: collapse;
|
|
776
776
|
font-size: 0.875rem;
|
|
777
777
|
text-align: left;
|
|
778
|
-
color: var(--text-primary);
|
|
778
|
+
color: var(--q-text-primary);
|
|
779
779
|
}
|
|
780
780
|
|
|
781
781
|
.table th {
|
|
782
|
-
padding: var(--space-3) var(--space-4);
|
|
782
|
+
padding: var(--q-space-3) var(--q-space-4);
|
|
783
783
|
font-weight: 600;
|
|
784
784
|
background-color: rgb(255 255 255 / 5%);
|
|
785
785
|
border-bottom: 2px solid rgb(255 255 255 / 10%);
|
|
786
|
-
color: var(--text-primary);
|
|
786
|
+
color: var(--q-text-primary);
|
|
787
787
|
}
|
|
788
788
|
|
|
789
789
|
.table td {
|
|
790
|
-
padding: var(--space-3) var(--space-4);
|
|
790
|
+
padding: var(--q-space-3) var(--q-space-4);
|
|
791
791
|
border-bottom: 1px solid rgb(255 255 255 / 10%);
|
|
792
|
-
color: var(--text-secondary);
|
|
792
|
+
color: var(--q-text-secondary);
|
|
793
793
|
}
|
|
794
794
|
|
|
795
795
|
.table tbody tr:hover {
|
|
@@ -831,7 +831,7 @@ body.light-mode .table tbody tr:hover {
|
|
|
831
831
|
display: grid;
|
|
832
832
|
grid-template-columns: 260px minmax(0, 1fr);
|
|
833
833
|
height: 100vh;
|
|
834
|
-
background: var(--bg-primary, #08081a);
|
|
834
|
+
background: var(--q-bg-primary, #08081a);
|
|
835
835
|
overflow: hidden;
|
|
836
836
|
max-width: 100vw;
|
|
837
837
|
}
|
|
@@ -947,7 +947,7 @@ body.light-mode .top-nav {
|
|
|
947
947
|
font-weight: 700;
|
|
948
948
|
text-transform: uppercase;
|
|
949
949
|
letter-spacing: 0.15em;
|
|
950
|
-
color: var(--text-muted, #64748b);
|
|
950
|
+
color: var(--q-text-muted, #64748b);
|
|
951
951
|
margin-bottom: 0.75rem;
|
|
952
952
|
padding-left: 0.75rem;
|
|
953
953
|
}
|
|
@@ -959,7 +959,7 @@ body.light-mode .top-nav {
|
|
|
959
959
|
gap: 0.875rem;
|
|
960
960
|
padding: 0.75rem;
|
|
961
961
|
border-radius: 0.625rem;
|
|
962
|
-
color: var(--text-secondary, #94a3b8);
|
|
962
|
+
color: var(--q-text-secondary, #94a3b8);
|
|
963
963
|
font-size: 0.875rem;
|
|
964
964
|
cursor: pointer;
|
|
965
965
|
transition: all 0.2s ease;
|
|
@@ -973,12 +973,12 @@ body.light-mode .top-nav {
|
|
|
973
973
|
|
|
974
974
|
.nav-item:hover {
|
|
975
975
|
background: rgba(255, 255, 255, 0.05);
|
|
976
|
-
color: var(--text-primary, #f1f5f9);
|
|
976
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
977
977
|
}
|
|
978
978
|
|
|
979
979
|
.nav-item.active {
|
|
980
980
|
background: rgba(0, 212, 255, 0.12);
|
|
981
|
-
color: var(--color-starlight, #00d4ff);
|
|
981
|
+
color: var(--q-color-starlight, #00d4ff);
|
|
982
982
|
}
|
|
983
983
|
|
|
984
984
|
/* Constrain nav item icons - prevent oversized icons */
|
|
@@ -1104,14 +1104,14 @@ body.light-mode .nav-section-title {
|
|
|
1104
1104
|
.stat-value {
|
|
1105
1105
|
font-size: 1.875rem;
|
|
1106
1106
|
font-weight: 700;
|
|
1107
|
-
color: var(--text-primary, #f1f5f9);
|
|
1107
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
1108
1108
|
margin-bottom: 0.25rem;
|
|
1109
1109
|
}
|
|
1110
1110
|
|
|
1111
1111
|
/* Stat label */
|
|
1112
1112
|
.stat-label {
|
|
1113
1113
|
font-size: 0.875rem;
|
|
1114
|
-
color: var(--text-muted, #64748b);
|
|
1114
|
+
color: var(--q-text-muted, #64748b);
|
|
1115
1115
|
}
|
|
1116
1116
|
|
|
1117
1117
|
/* Trend indicator */
|
|
@@ -1190,7 +1190,7 @@ body.light-mode .stat-icon-red {
|
|
|
1190
1190
|
border-radius: 0.625rem;
|
|
1191
1191
|
background: rgba(255, 255, 255, 0.05);
|
|
1192
1192
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
1193
|
-
color: var(--text-secondary, #94a3b8);
|
|
1193
|
+
color: var(--q-text-secondary, #94a3b8);
|
|
1194
1194
|
display: flex;
|
|
1195
1195
|
align-items: center;
|
|
1196
1196
|
justify-content: center;
|
|
@@ -1201,7 +1201,7 @@ body.light-mode .stat-icon-red {
|
|
|
1201
1201
|
|
|
1202
1202
|
.icon-btn:hover {
|
|
1203
1203
|
background: rgba(255, 255, 255, 0.08);
|
|
1204
|
-
color: var(--text-primary, #f1f5f9);
|
|
1204
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
1205
1205
|
}
|
|
1206
1206
|
|
|
1207
1207
|
/* Circular icon button */
|
|
@@ -1236,7 +1236,7 @@ body.light-mode .stat-icon-red {
|
|
|
1236
1236
|
border-radius: 0.5rem;
|
|
1237
1237
|
background: rgba(255, 255, 255, 0.05);
|
|
1238
1238
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
1239
|
-
color: var(--text-muted, #64748b);
|
|
1239
|
+
color: var(--q-text-muted, #64748b);
|
|
1240
1240
|
display: flex;
|
|
1241
1241
|
align-items: center;
|
|
1242
1242
|
justify-content: center;
|
|
@@ -1246,7 +1246,7 @@ body.light-mode .stat-icon-red {
|
|
|
1246
1246
|
|
|
1247
1247
|
.action-btn:hover {
|
|
1248
1248
|
background: rgba(255, 255, 255, 0.08);
|
|
1249
|
-
color: var(--text-primary, #f1f5f9);
|
|
1249
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
1250
1250
|
}
|
|
1251
1251
|
|
|
1252
1252
|
/* Delete action button */
|
|
@@ -1293,7 +1293,7 @@ body.light-mode .action-btn:hover {
|
|
|
1293
1293
|
background: rgba(255, 255, 255, 0.05);
|
|
1294
1294
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
1295
1295
|
border-radius: 0.625rem;
|
|
1296
|
-
color: var(--text-secondary, #94a3b8);
|
|
1296
|
+
color: var(--q-text-secondary, #94a3b8);
|
|
1297
1297
|
font-size: 0.875rem;
|
|
1298
1298
|
cursor: pointer;
|
|
1299
1299
|
transition: all 0.2s ease;
|
|
@@ -1301,7 +1301,7 @@ body.light-mode .action-btn:hover {
|
|
|
1301
1301
|
|
|
1302
1302
|
.theme-btn:hover {
|
|
1303
1303
|
background: rgba(255, 255, 255, 0.08);
|
|
1304
|
-
color: var(--text-primary, #f1f5f9);
|
|
1304
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
1305
1305
|
}
|
|
1306
1306
|
|
|
1307
1307
|
/* Sun/moon icon visibility */
|
|
@@ -1338,7 +1338,7 @@ body.light-mode .theme-toggle-wrapper {
|
|
|
1338
1338
|
width: 40px;
|
|
1339
1339
|
height: 40px;
|
|
1340
1340
|
border-radius: 50%;
|
|
1341
|
-
background: linear-gradient(135deg, #3b82f6, var(--color-starlight, #00d4ff));
|
|
1341
|
+
background: linear-gradient(135deg, #3b82f6, var(--q-color-starlight, #00d4ff));
|
|
1342
1342
|
display: flex;
|
|
1343
1343
|
align-items: center;
|
|
1344
1344
|
justify-content: center;
|
|
@@ -1395,13 +1395,13 @@ body.light-mode .theme-toggle-wrapper {
|
|
|
1395
1395
|
|
|
1396
1396
|
.user-name {
|
|
1397
1397
|
font-weight: 600;
|
|
1398
|
-
color: var(--text-primary, #f1f5f9);
|
|
1398
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
1399
1399
|
margin-bottom: 0.125rem;
|
|
1400
1400
|
}
|
|
1401
1401
|
|
|
1402
1402
|
.user-email {
|
|
1403
1403
|
font-size: 0.75rem;
|
|
1404
|
-
color: var(--text-muted, #64748b);
|
|
1404
|
+
color: var(--q-text-muted, #64748b);
|
|
1405
1405
|
}
|
|
1406
1406
|
|
|
1407
1407
|
/* Light mode overrides for user info */
|
|
@@ -1472,12 +1472,12 @@ body.light-mode .user-email {
|
|
|
1472
1472
|
font-size: 0.75rem;
|
|
1473
1473
|
font-weight: 500;
|
|
1474
1474
|
background: rgba(255, 255, 255, 0.05);
|
|
1475
|
-
color: var(--text-secondary, #94a3b8);
|
|
1475
|
+
color: var(--q-text-secondary, #94a3b8);
|
|
1476
1476
|
}
|
|
1477
1477
|
|
|
1478
1478
|
.role-admin {
|
|
1479
1479
|
background: rgba(0, 212, 255, 0.15);
|
|
1480
|
-
color: var(--color-starlight, #00d4ff);
|
|
1480
|
+
color: var(--q-color-starlight, #00d4ff);
|
|
1481
1481
|
}
|
|
1482
1482
|
|
|
1483
1483
|
.role-moderator {
|
|
@@ -1493,7 +1493,7 @@ body.light-mode .user-email {
|
|
|
1493
1493
|
min-width: 20px;
|
|
1494
1494
|
height: 20px;
|
|
1495
1495
|
padding: 0 6px;
|
|
1496
|
-
background: linear-gradient(135deg, var(--color-starlight, #00d4ff), #3b82f6);
|
|
1496
|
+
background: linear-gradient(135deg, var(--q-color-starlight, #00d4ff), #3b82f6);
|
|
1497
1497
|
border-radius: 10px;
|
|
1498
1498
|
font-size: 0.6875rem;
|
|
1499
1499
|
font-weight: 700;
|
|
@@ -1584,7 +1584,7 @@ body.light-mode .label-important {
|
|
|
1584
1584
|
background: rgba(255, 255, 255, 0.05);
|
|
1585
1585
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
1586
1586
|
border-radius: 0.625rem;
|
|
1587
|
-
color: var(--text-primary, #f1f5f9);
|
|
1587
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
1588
1588
|
font-size: 0.875rem;
|
|
1589
1589
|
transition: all 0.2s ease;
|
|
1590
1590
|
}
|
|
@@ -1596,7 +1596,7 @@ body.light-mode .label-important {
|
|
|
1596
1596
|
}
|
|
1597
1597
|
|
|
1598
1598
|
.search-input::placeholder {
|
|
1599
|
-
color: var(--text-muted, #64748b);
|
|
1599
|
+
color: var(--q-text-muted, #64748b);
|
|
1600
1600
|
}
|
|
1601
1601
|
|
|
1602
1602
|
/* Search icon */
|
|
@@ -1605,7 +1605,7 @@ body.light-mode .label-important {
|
|
|
1605
1605
|
left: 0.875rem;
|
|
1606
1606
|
top: 50%;
|
|
1607
1607
|
transform: translateY(-50%);
|
|
1608
|
-
color: var(--text-muted, #64748b);
|
|
1608
|
+
color: var(--q-text-muted, #64748b);
|
|
1609
1609
|
pointer-events: none;
|
|
1610
1610
|
}
|
|
1611
1611
|
|
|
@@ -1620,7 +1620,7 @@ body.light-mode .label-important {
|
|
|
1620
1620
|
background: rgba(255, 255, 255, 0.05);
|
|
1621
1621
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
1622
1622
|
border-radius: 0.5rem;
|
|
1623
|
-
color: var(--text-secondary, #94a3b8);
|
|
1623
|
+
color: var(--q-text-secondary, #94a3b8);
|
|
1624
1624
|
font-size: 0.875rem;
|
|
1625
1625
|
cursor: pointer;
|
|
1626
1626
|
appearance: none;
|
|
@@ -1666,7 +1666,7 @@ body.light-mode .search-input::placeholder {
|
|
|
1666
1666
|
height: 10px;
|
|
1667
1667
|
background: #10b981;
|
|
1668
1668
|
border-radius: 50%;
|
|
1669
|
-
border: 2px solid var(--bg-primary, #08081a);
|
|
1669
|
+
border: 2px solid var(--q-bg-primary, #08081a);
|
|
1670
1670
|
}
|
|
1671
1671
|
|
|
1672
1672
|
/* Away status indicator */
|
|
@@ -1693,7 +1693,7 @@ body.light-mode .search-input::placeholder {
|
|
|
1693
1693
|
height: 8px;
|
|
1694
1694
|
background: #ef4444;
|
|
1695
1695
|
border-radius: 50%;
|
|
1696
|
-
border: 2px solid var(--bg-primary, #08081a);
|
|
1696
|
+
border: 2px solid var(--q-bg-primary, #08081a);
|
|
1697
1697
|
}
|
|
1698
1698
|
|
|
1699
1699
|
/* Notification badge with number */
|
|
@@ -1712,7 +1712,7 @@ body.light-mode .search-input::placeholder {
|
|
|
1712
1712
|
display: flex;
|
|
1713
1713
|
align-items: center;
|
|
1714
1714
|
justify-content: center;
|
|
1715
|
-
border: 2px solid var(--bg-primary, #08081a);
|
|
1715
|
+
border: 2px solid var(--q-bg-primary, #08081a);
|
|
1716
1716
|
}
|
|
1717
1717
|
|
|
1718
1718
|
/* Light mode overrides for indicators */
|
|
@@ -1739,7 +1739,7 @@ body.light-mode .notification-badge {
|
|
|
1739
1739
|
border-radius: 0.5rem;
|
|
1740
1740
|
background: rgba(255, 255, 255, 0.05);
|
|
1741
1741
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
1742
|
-
color: var(--text-secondary, #94a3b8);
|
|
1742
|
+
color: var(--q-text-secondary, #94a3b8);
|
|
1743
1743
|
font-size: 0.875rem;
|
|
1744
1744
|
cursor: pointer;
|
|
1745
1745
|
transition: all 0.2s ease;
|
|
@@ -1750,13 +1750,13 @@ body.light-mode .notification-badge {
|
|
|
1750
1750
|
|
|
1751
1751
|
.page-btn:hover {
|
|
1752
1752
|
background: rgba(255, 255, 255, 0.08);
|
|
1753
|
-
color: var(--text-primary, #f1f5f9);
|
|
1753
|
+
color: var(--q-text-primary, #f1f5f9);
|
|
1754
1754
|
}
|
|
1755
1755
|
|
|
1756
1756
|
.page-btn.active {
|
|
1757
1757
|
background: rgba(0, 212, 255, 0.15);
|
|
1758
1758
|
border-color: rgba(0, 212, 255, 0.3);
|
|
1759
|
-
color: var(--color-starlight, #00d4ff);
|
|
1759
|
+
color: var(--q-color-starlight, #00d4ff);
|
|
1760
1760
|
}
|
|
1761
1761
|
|
|
1762
1762
|
.page-btn:disabled {
|