@howssatoshi/quantumcss 1.4.0 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -0
- package/dist/quantum.min.css +1 -4006
- package/package.json +1 -1
- package/src/defaults.js +36 -9
- package/src/generator.js +10 -10
- package/src/starlight.js +37 -0
- package/src/styles/starlight.css +283 -13
package/package.json
CHANGED
package/src/defaults.js
CHANGED
|
@@ -62,6 +62,24 @@ const utilityMaps = {
|
|
|
62
62
|
'overflow-visible': { property: 'overflow', value: 'visible' },
|
|
63
63
|
'border-none': { property: 'border-width', value: '0' },
|
|
64
64
|
'bg-transparent': { property: 'background-color', value: 'transparent' },
|
|
65
|
+
'relative': { property: 'position', value: 'relative' },
|
|
66
|
+
'absolute': { property: 'position', value: 'absolute' },
|
|
67
|
+
'top-1/2': { property: 'top', value: '50%' },
|
|
68
|
+
'left-4': { property: 'left', value: '1rem' },
|
|
69
|
+
'pl-12': { property: 'padding-left', value: '3rem' },
|
|
70
|
+
'-translate-y-1/2': { property: 'transform', value: 'translateY(-50%)' },
|
|
71
|
+
'pointer-events-none': { property: 'pointer-events', value: 'none' },
|
|
72
|
+
'w-5': { property: 'width', value: '1.25rem' },
|
|
73
|
+
'h-5': { property: 'height', value: '1.25rem' },
|
|
74
|
+
'z-10': { property: 'z-index', value: '10' },
|
|
75
|
+
'form-row': {
|
|
76
|
+
property: ['display', 'justify-content', 'align-items', 'gap'],
|
|
77
|
+
value: ['flex', 'space-between', 'center', '1rem']
|
|
78
|
+
},
|
|
79
|
+
'dialog-close': {
|
|
80
|
+
property: ['position', 'top', 'right', 'width', 'height', 'border-radius', 'display', 'align-items', 'justify-content', 'cursor'],
|
|
81
|
+
value: ['absolute', '1.5rem', '1.5rem', '2rem', '2rem', '50%', 'flex', 'center', 'center', 'pointer']
|
|
82
|
+
},
|
|
65
83
|
'glass': {
|
|
66
84
|
property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border-width', 'border-color'],
|
|
67
85
|
value: ['rgba(255, 255, 255, 0.03)', 'blur(16px)', 'blur(16px)', '1px', 'rgba(255, 255, 255, 0.1)']
|
|
@@ -74,11 +92,11 @@ const utilityMaps = {
|
|
|
74
92
|
},
|
|
75
93
|
'btn-starlight': {
|
|
76
94
|
property: ['background', 'color', 'border', 'box-shadow', 'font-weight', 'transition', 'height', 'padding', 'display', 'align-items', 'justify-content', 'border-radius', 'cursor'],
|
|
77
|
-
value: ['linear-gradient(135deg, #ffb38a 0%, #00d4ff 100%)', '#000', 'none', '0 0 20px rgba(0, 212, 255, 0.3)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.
|
|
95
|
+
value: ['linear-gradient(135deg, #ffb38a 0%, #00d4ff 100%)', '#000', 'none', '0 0 20px rgba(0, 212, 255, 0.3)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.5rem', 'pointer']
|
|
78
96
|
},
|
|
79
97
|
'btn-secondary': {
|
|
80
98
|
property: ['background', 'color', 'border', 'font-weight', 'transition', 'height', 'padding', 'display', 'align-items', 'justify-content', 'border-radius', 'cursor', 'backdrop-filter', '-webkit-backdrop-filter'],
|
|
81
|
-
value: ['rgba(255, 255, 255, 0.05)', '#ffffff', '1px solid rgba(255, 255, 255, 0.15)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.
|
|
99
|
+
value: ['rgba(255, 255, 255, 0.05)', '#ffffff', '1px solid rgba(255, 255, 255, 0.15)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.5rem', 'pointer', 'blur(12px)', 'blur(12px)']
|
|
82
100
|
},
|
|
83
101
|
'input-starlight': {
|
|
84
102
|
property: ['background-color', 'border', 'color', 'border-radius', 'padding', 'appearance', 'transition', 'height'],
|
|
@@ -88,10 +106,19 @@ const utilityMaps = {
|
|
|
88
106
|
property: ['background-color', 'border', 'color', 'border-radius', 'padding', 'appearance', 'transition', 'min-height', 'width', 'display'],
|
|
89
107
|
value: ['rgba(255, 255, 255, 0.04)', '1px solid rgba(255, 255, 255, 0.15)', 'inherit', '0.75rem', '1rem', 'none', 'all 0.2s ease', '8rem', '100%', 'block']
|
|
90
108
|
},
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
109
|
+
'checkbox-starlight': {
|
|
110
|
+
property: ['appearance', 'width', 'height', 'background', 'border', 'border-radius', 'cursor', 'transition', 'position', 'display', 'align-items', 'justify-content'],
|
|
111
|
+
value: ['none', '1.25rem', '1.25rem', 'rgba(255, 255, 255, 0.05)', '1px solid rgba(255, 255, 255, 0.2)', '0.375rem', 'pointer', 'all 0.2s ease', 'relative', 'inline-flex', 'center', 'center']
|
|
112
|
+
},
|
|
113
|
+
'search-container': 'relative block w-full',
|
|
114
|
+
'search-input': 'pl-12 w-full',
|
|
115
|
+
'search-icon': 'absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none z-10 w-5 h-5',
|
|
116
|
+
'starlight-nav': 'nav-glass w-full sticky top-0 z-[1000]',
|
|
117
|
+
'starlight-search': 'search-container w-full max-w-144',
|
|
118
|
+
'starlight-dashboard': 'dashboard-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8',
|
|
119
|
+
'starlight-gallery': 'starlight-gallery grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4',
|
|
120
|
+
'starlight-form': 'starlight-card grid grid-cols-1 md:grid-cols-2 gap-8',
|
|
121
|
+
'starlight-dialog': 'starlight-dialog ani-scale-in'
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
module.exports = { defaultTheme, utilityMaps };
|
package/src/generator.js
CHANGED
|
@@ -77,7 +77,7 @@ function generateCSS(configPath) {
|
|
|
77
77
|
gap: 'gap', 'gap-x': 'column-gap', 'gap-y': 'row-gap'
|
|
78
78
|
};
|
|
79
79
|
|
|
80
|
-
function getRulesForClass(fullCls) {
|
|
80
|
+
function getRulesForClass(fullCls, processedPresets = new Set()) {
|
|
81
81
|
let cls = fullCls, variant = null, breakpoint = null, isNeg = false;
|
|
82
82
|
if (cls.startsWith('-')) { isNeg = true; cls = cls.substring(1); }
|
|
83
83
|
const parts = cls.split(':');
|
|
@@ -91,17 +91,17 @@ function generateCSS(configPath) {
|
|
|
91
91
|
currentPart++;
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
-
// Check Presets
|
|
95
|
-
|
|
96
|
-
|
|
94
|
+
// Check Presets (User Config & Defaults)
|
|
95
|
+
const presetValue = (config.componentPresets && config.componentPresets[cls]) || (utilityMaps[cls] && typeof utilityMaps[cls] === 'string' ? utilityMaps[cls] : null);
|
|
96
|
+
|
|
97
|
+
if (presetValue && !processedPresets.has(cls)) {
|
|
98
|
+
processedPresets.add(cls);
|
|
99
|
+
const presetClasses = presetValue.split(/\s+/);
|
|
97
100
|
let allGroups = [];
|
|
98
101
|
presetClasses.forEach(pCls => {
|
|
99
|
-
const subGroups = getRulesForClass(pCls);
|
|
102
|
+
const subGroups = getRulesForClass(pCls, new Set(processedPresets));
|
|
100
103
|
if (subGroups) {
|
|
101
104
|
subGroups.forEach(group => {
|
|
102
|
-
// Apply the preset's own breakpoint/variant to sub-groups if they don't have one?
|
|
103
|
-
// Actually, usually presets are used as base classes.
|
|
104
|
-
// If someone does md:btn-primary, we want the md: to apply to all rules in the preset.
|
|
105
105
|
allGroups.push({
|
|
106
106
|
breakpoint: breakpoint || group.breakpoint,
|
|
107
107
|
variant: variant || group.variant,
|
|
@@ -114,9 +114,9 @@ function generateCSS(configPath) {
|
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
let property = null, value = null, customSelector = null;
|
|
117
|
-
if (utilityMaps[cls]) {
|
|
117
|
+
if (utilityMaps[cls] && typeof utilityMaps[cls] === 'object') {
|
|
118
118
|
const entry = utilityMaps[cls];
|
|
119
|
-
if (
|
|
119
|
+
if (!Array.isArray(entry)) { property = entry.property; value = entry.value; }
|
|
120
120
|
else { property = entry; }
|
|
121
121
|
}
|
|
122
122
|
|
package/src/starlight.js
CHANGED
|
@@ -35,6 +35,42 @@ const Starlight = {
|
|
|
35
35
|
container.appendChild(star);
|
|
36
36
|
}
|
|
37
37
|
});
|
|
38
|
+
},
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Initializes navigation menu toggles for mobile view.
|
|
42
|
+
* Expects a toggle element with class '.hamburger' and a menu with class '.nav-menu-mobile'.
|
|
43
|
+
*/
|
|
44
|
+
initNavigation() {
|
|
45
|
+
const toggles = document.querySelectorAll('.hamburger');
|
|
46
|
+
|
|
47
|
+
toggles.forEach(toggle => {
|
|
48
|
+
// Find the closest navigation container or parent
|
|
49
|
+
const nav = toggle.closest('nav') || toggle.closest('.starlight-nav') || toggle.parentElement;
|
|
50
|
+
if (!nav) return;
|
|
51
|
+
|
|
52
|
+
// Find the menu - it might be inside the nav or a sibling
|
|
53
|
+
let menu = nav.querySelector('.nav-menu-mobile');
|
|
54
|
+
if (!menu && nav.nextElementSibling && nav.nextElementSibling.classList.contains('nav-menu-mobile')) {
|
|
55
|
+
menu = nav.nextElementSibling;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
if (menu) {
|
|
59
|
+
toggle.addEventListener('click', (e) => {
|
|
60
|
+
e.stopPropagation();
|
|
61
|
+
const isActive = toggle.classList.toggle('active');
|
|
62
|
+
menu.classList.toggle('active', isActive);
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
// Close menu when clicking outside
|
|
66
|
+
document.addEventListener('click', (e) => {
|
|
67
|
+
if (!menu.contains(e.target) && !toggle.contains(e.target)) {
|
|
68
|
+
menu.classList.remove('active');
|
|
69
|
+
toggle.classList.remove('active');
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
});
|
|
38
74
|
}
|
|
39
75
|
};
|
|
40
76
|
|
|
@@ -45,5 +81,6 @@ if (typeof window !== 'undefined') {
|
|
|
45
81
|
if (document.querySelector('.starlight-stars')) {
|
|
46
82
|
Starlight.initStars();
|
|
47
83
|
}
|
|
84
|
+
Starlight.initNavigation();
|
|
48
85
|
});
|
|
49
86
|
}
|
package/src/styles/starlight.css
CHANGED
|
@@ -38,7 +38,10 @@ body.light-mode a:hover {
|
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
.starlight-card:hover {
|
|
41
|
-
border-color: rgba(0, 212, 255, 0.
|
|
41
|
+
border-color: rgba(0, 212, 255, 0.4);
|
|
42
|
+
transform: translateY(-4px);
|
|
43
|
+
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 212, 255, 0.1);
|
|
44
|
+
background-color: rgba(255, 255, 255, 0.04);
|
|
42
45
|
}
|
|
43
46
|
|
|
44
47
|
body.light-mode .starlight-card {
|
|
@@ -161,13 +164,71 @@ body.light-mode .star {
|
|
|
161
164
|
backdrop-filter: blur(20px);
|
|
162
165
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
163
166
|
border-radius: 1.5rem;
|
|
164
|
-
padding:
|
|
167
|
+
padding: 2.5rem;
|
|
165
168
|
max-width: 90%;
|
|
166
169
|
width: 600px;
|
|
167
170
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
168
171
|
position: relative;
|
|
169
172
|
}
|
|
170
173
|
|
|
174
|
+
.starlight-dialog {
|
|
175
|
+
background-color: rgba(10, 10, 20, 0.98);
|
|
176
|
+
backdrop-filter: blur(24px);
|
|
177
|
+
-webkit-backdrop-filter: blur(24px);
|
|
178
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
179
|
+
border-radius: 1.5rem;
|
|
180
|
+
padding: 3rem;
|
|
181
|
+
width: 100%;
|
|
182
|
+
max-width: 600px;
|
|
183
|
+
margin: auto;
|
|
184
|
+
position: relative;
|
|
185
|
+
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
body.light-mode .starlight-dialog {
|
|
189
|
+
background-color: rgba(255, 255, 255, 0.98);
|
|
190
|
+
border-color: rgba(0, 0, 0, 0.1);
|
|
191
|
+
color: #1e293b;
|
|
192
|
+
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.dialog-close {
|
|
196
|
+
position: absolute;
|
|
197
|
+
top: 1.5rem;
|
|
198
|
+
right: 1.5rem;
|
|
199
|
+
width: 2rem;
|
|
200
|
+
height: 2rem;
|
|
201
|
+
border-radius: 50%;
|
|
202
|
+
background: rgba(255, 255, 255, 0.05);
|
|
203
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
204
|
+
color: white;
|
|
205
|
+
display: flex;
|
|
206
|
+
align-items: center;
|
|
207
|
+
justify-content: center;
|
|
208
|
+
cursor: pointer;
|
|
209
|
+
transition: all 0.2s;
|
|
210
|
+
padding: 0;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
body.light-mode .dialog-close {
|
|
214
|
+
background: rgba(0, 0, 0, 0.05);
|
|
215
|
+
border-color: rgba(0, 0, 0, 0.1);
|
|
216
|
+
color: #1e293b;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.dialog-close:hover {
|
|
220
|
+
background: rgba(255, 255, 255, 0.15);
|
|
221
|
+
border-color: var(--color-starlight-blue);
|
|
222
|
+
transform: rotate(90deg);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.form-row {
|
|
226
|
+
display: flex;
|
|
227
|
+
justify-content: space-between;
|
|
228
|
+
align-items: center;
|
|
229
|
+
gap: 1rem;
|
|
230
|
+
}
|
|
231
|
+
|
|
171
232
|
body.light-mode .dialog-overlay {
|
|
172
233
|
background: rgba(255, 255, 255, 0.4);
|
|
173
234
|
}
|
|
@@ -259,13 +320,15 @@ body.light-mode .glass {
|
|
|
259
320
|
.input-starlight:focus, .textarea-starlight:focus {
|
|
260
321
|
outline: none;
|
|
261
322
|
border-color: var(--color-starlight-blue);
|
|
262
|
-
box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.1);
|
|
323
|
+
box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.1), 0 0 20px rgba(0, 212, 255, 0.1);
|
|
324
|
+
background-color: rgba(255, 255, 255, 0.06);
|
|
263
325
|
}
|
|
264
326
|
|
|
265
327
|
body.light-mode .input-starlight:focus,
|
|
266
328
|
body.light-mode .textarea-starlight:focus {
|
|
267
329
|
border-color: var(--color-starlight-blue);
|
|
268
|
-
box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.1);
|
|
330
|
+
box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
331
|
+
background-color: #ffffff;
|
|
269
332
|
}
|
|
270
333
|
|
|
271
334
|
/* 9. Code Interface Window */
|
|
@@ -400,23 +463,29 @@ body.light-mode .accordion-starlight .accordion-content {
|
|
|
400
463
|
/* 11. Search Input with Icon */
|
|
401
464
|
.search-container {
|
|
402
465
|
position: relative;
|
|
466
|
+
display: block;
|
|
403
467
|
width: 100%;
|
|
404
|
-
max-width: 400px;
|
|
405
468
|
}
|
|
406
469
|
|
|
407
470
|
.search-input {
|
|
408
471
|
padding-left: 3rem !important;
|
|
472
|
+
width: 100%;
|
|
409
473
|
}
|
|
410
474
|
|
|
411
475
|
.search-icon {
|
|
412
476
|
position: absolute;
|
|
413
|
-
left:
|
|
477
|
+
left: 1.125rem;
|
|
414
478
|
top: 50%;
|
|
415
479
|
transform: translateY(-50%);
|
|
416
480
|
color: var(--text-muted);
|
|
417
481
|
pointer-events: none;
|
|
418
|
-
width: 1.
|
|
419
|
-
height: 1.
|
|
482
|
+
width: 1.25rem;
|
|
483
|
+
height: 1.25rem;
|
|
484
|
+
z-index: 10;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
body.light-mode .search-icon {
|
|
488
|
+
color: #64748b;
|
|
420
489
|
}
|
|
421
490
|
|
|
422
491
|
/* 12. Gallery Widget */
|
|
@@ -533,12 +602,56 @@ body.light-mode .nav-glass {
|
|
|
533
602
|
border-bottom-color: rgba(0, 0, 0, 0.1);
|
|
534
603
|
}
|
|
535
604
|
|
|
605
|
+
.nav-desktop {
|
|
606
|
+
display: none;
|
|
607
|
+
gap: 2rem;
|
|
608
|
+
align-items: center;
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
.nav-link {
|
|
612
|
+
font-size: 0.875rem;
|
|
613
|
+
font-weight: 500;
|
|
614
|
+
color: rgba(255, 255, 255, 0.7);
|
|
615
|
+
transition: all 0.3s;
|
|
616
|
+
position: relative;
|
|
617
|
+
padding: 0.5rem 0;
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
.nav-link::after {
|
|
621
|
+
content: '';
|
|
622
|
+
position: absolute;
|
|
623
|
+
bottom: 0;
|
|
624
|
+
left: 0;
|
|
625
|
+
width: 0;
|
|
626
|
+
height: 2px;
|
|
627
|
+
background: var(--color-starlight-blue);
|
|
628
|
+
transition: width 0.3s;
|
|
629
|
+
box-shadow: 0 0 10px var(--color-starlight-glow);
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
.nav-link:hover {
|
|
633
|
+
color: white;
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
.nav-link:hover::after {
|
|
637
|
+
width: 100%;
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
body.light-mode .nav-link {
|
|
641
|
+
color: #475569;
|
|
642
|
+
}
|
|
643
|
+
|
|
644
|
+
body.light-mode .nav-link:hover {
|
|
645
|
+
color: #1e293b;
|
|
646
|
+
}
|
|
647
|
+
|
|
536
648
|
.hamburger {
|
|
537
649
|
width: 2.5rem;
|
|
538
650
|
height: 2.5rem;
|
|
539
651
|
display: flex;
|
|
540
652
|
flex-direction: column;
|
|
541
653
|
justify-content: center;
|
|
654
|
+
align-items: center;
|
|
542
655
|
gap: 0.4rem;
|
|
543
656
|
cursor: pointer;
|
|
544
657
|
background: rgba(255,255,255,0.05);
|
|
@@ -546,6 +659,7 @@ body.light-mode .nav-glass {
|
|
|
546
659
|
border-radius: 0.5rem;
|
|
547
660
|
padding: 0.5rem;
|
|
548
661
|
transition: all 0.3s;
|
|
662
|
+
position: relative;
|
|
549
663
|
}
|
|
550
664
|
|
|
551
665
|
body.light-mode .hamburger {
|
|
@@ -563,23 +677,36 @@ body.light-mode .hamburger:hover {
|
|
|
563
677
|
}
|
|
564
678
|
|
|
565
679
|
.hamburger span {
|
|
566
|
-
width:
|
|
680
|
+
width: 1.5rem;
|
|
567
681
|
height: 2px;
|
|
568
682
|
background: white;
|
|
569
683
|
border-radius: 2px;
|
|
570
684
|
transition: all 0.3s;
|
|
685
|
+
transform-origin: center;
|
|
571
686
|
}
|
|
572
687
|
|
|
573
688
|
body.light-mode .hamburger span {
|
|
574
689
|
background: #1e293b;
|
|
575
690
|
}
|
|
576
691
|
|
|
692
|
+
.hamburger.active span:nth-child(1) {
|
|
693
|
+
transform: translateY(6px) rotate(45deg);
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
.hamburger.active span:nth-child(2) {
|
|
697
|
+
opacity: 0;
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
.hamburger.active span:nth-child(3) {
|
|
701
|
+
transform: translateY(-6px) rotate(-45deg);
|
|
702
|
+
}
|
|
703
|
+
|
|
577
704
|
.nav-menu-mobile {
|
|
578
705
|
position: absolute;
|
|
579
706
|
top: 100%;
|
|
580
707
|
right: 2rem;
|
|
581
708
|
width: 250px;
|
|
582
|
-
background:
|
|
709
|
+
background: var(--color-starlight-deep);
|
|
583
710
|
backdrop-filter: blur(20px);
|
|
584
711
|
-webkit-backdrop-filter: blur(20px);
|
|
585
712
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
@@ -589,10 +716,11 @@ body.light-mode .hamburger span {
|
|
|
589
716
|
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
|
|
590
717
|
display: none;
|
|
591
718
|
animation: slideInDown 0.3s ease forwards;
|
|
719
|
+
z-index: 1001;
|
|
592
720
|
}
|
|
593
721
|
|
|
594
722
|
body.light-mode .nav-menu-mobile {
|
|
595
|
-
background: rgba(255, 255, 255, 0.
|
|
723
|
+
background: rgba(255, 255, 255, 0.95);
|
|
596
724
|
border-color: rgba(0, 0, 0, 0.1);
|
|
597
725
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
598
726
|
}
|
|
@@ -601,6 +729,20 @@ body.light-mode .nav-menu-mobile {
|
|
|
601
729
|
display: block;
|
|
602
730
|
}
|
|
603
731
|
|
|
732
|
+
@media (min-width: 768px) {
|
|
733
|
+
.nav-desktop {
|
|
734
|
+
display: flex;
|
|
735
|
+
}
|
|
736
|
+
|
|
737
|
+
.hamburger {
|
|
738
|
+
display: none;
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
.nav-menu-mobile {
|
|
742
|
+
display: none !important;
|
|
743
|
+
}
|
|
744
|
+
}
|
|
745
|
+
|
|
604
746
|
@keyframes slideInDown {
|
|
605
747
|
from { opacity: 0; transform: translateY(-10px); }
|
|
606
748
|
to { opacity: 1; transform: translateY(0); }
|
|
@@ -689,6 +831,100 @@ body.light-mode .dialog-content .bg-black\/40 {
|
|
|
689
831
|
border-color: rgba(0, 0, 0, 0.1);
|
|
690
832
|
}
|
|
691
833
|
|
|
834
|
+
/* 18. Semantic Typography Utilities */
|
|
835
|
+
.text-glow {
|
|
836
|
+
text-shadow: 0 0 10px rgba(0, 212, 255, 0.5), 0 0 20px rgba(0, 212, 255, 0.2);
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
.text-glass {
|
|
840
|
+
color: rgba(255, 255, 255, 0.6);
|
|
841
|
+
backdrop-filter: blur(4px);
|
|
842
|
+
-webkit-backdrop-filter: blur(4px);
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
body.light-mode .text-glow {
|
|
846
|
+
text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
|
|
847
|
+
}
|
|
848
|
+
|
|
849
|
+
body.light-mode .text-glass {
|
|
850
|
+
color: rgba(0, 0, 0, 0.5);
|
|
851
|
+
}
|
|
852
|
+
|
|
853
|
+
/* 17. Skeleton Loading (Starlight Variant) */
|
|
854
|
+
.starlight-loading {
|
|
855
|
+
background: linear-gradient(
|
|
856
|
+
90deg,
|
|
857
|
+
rgba(255, 255, 255, 0.03) 25%,
|
|
858
|
+
rgba(255, 255, 255, 0.08) 50%,
|
|
859
|
+
rgba(255, 255, 255, 0.03) 75%
|
|
860
|
+
);
|
|
861
|
+
background-size: 200% 100%;
|
|
862
|
+
animation: starlight-shimmer 2s infinite linear;
|
|
863
|
+
border-radius: var(--radius-md);
|
|
864
|
+
min-height: 1rem;
|
|
865
|
+
}
|
|
866
|
+
|
|
867
|
+
@keyframes starlight-shimmer {
|
|
868
|
+
0% { background-position: 200% 0; }
|
|
869
|
+
100% { background-position: -200% 0; }
|
|
870
|
+
}
|
|
871
|
+
|
|
872
|
+
body.light-mode .starlight-loading {
|
|
873
|
+
background: linear-gradient(
|
|
874
|
+
90deg,
|
|
875
|
+
rgba(0, 0, 0, 0.03) 25%,
|
|
876
|
+
rgba(0, 0, 0, 0.06) 50%,
|
|
877
|
+
rgba(0, 0, 0, 0.03) 75%
|
|
878
|
+
);
|
|
879
|
+
background-size: 200% 100%;
|
|
880
|
+
}
|
|
881
|
+
|
|
882
|
+
/* 16. Themed Scrollbars */
|
|
883
|
+
::-webkit-scrollbar {
|
|
884
|
+
width: 10px;
|
|
885
|
+
height: 10px;
|
|
886
|
+
}
|
|
887
|
+
|
|
888
|
+
::-webkit-scrollbar-track {
|
|
889
|
+
background: rgba(255, 255, 255, 0.02);
|
|
890
|
+
backdrop-filter: blur(10px);
|
|
891
|
+
}
|
|
892
|
+
|
|
893
|
+
::-webkit-scrollbar-thumb {
|
|
894
|
+
background: rgba(255, 255, 255, 0.1);
|
|
895
|
+
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
896
|
+
border-radius: 10px;
|
|
897
|
+
transition: all 0.3s;
|
|
898
|
+
}
|
|
899
|
+
|
|
900
|
+
::-webkit-scrollbar-thumb:hover {
|
|
901
|
+
background: rgba(0, 212, 255, 0.3);
|
|
902
|
+
box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
body.light-mode ::-webkit-scrollbar-track {
|
|
906
|
+
background: rgba(0, 0, 0, 0.03);
|
|
907
|
+
}
|
|
908
|
+
|
|
909
|
+
body.light-mode ::-webkit-scrollbar-thumb {
|
|
910
|
+
background: rgba(0, 0, 0, 0.1);
|
|
911
|
+
border-color: rgba(0, 0, 0, 0.05);
|
|
912
|
+
}
|
|
913
|
+
|
|
914
|
+
body.light-mode ::-webkit-scrollbar-thumb:hover {
|
|
915
|
+
background: var(--color-starlight-blue);
|
|
916
|
+
}
|
|
917
|
+
|
|
918
|
+
/* Firefox Support */
|
|
919
|
+
* {
|
|
920
|
+
scrollbar-width: thin;
|
|
921
|
+
scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
|
|
922
|
+
}
|
|
923
|
+
|
|
924
|
+
body.light-mode * {
|
|
925
|
+
scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
|
|
926
|
+
}
|
|
927
|
+
|
|
692
928
|
@media (forced-colors: active) {
|
|
693
929
|
button:focus, input:focus, select:focus, textarea:focus {
|
|
694
930
|
outline: 2px solid SelectedItem !important;
|
|
@@ -707,6 +943,40 @@ body.light-mode .dialog-content .bg-black\/40 {
|
|
|
707
943
|
}
|
|
708
944
|
|
|
709
945
|
.btn-starlight {
|
|
710
|
-
|
|
946
|
+
background: linear-gradient(135deg, var(--color-starlight-peach) 0%, var(--color-starlight-blue) 100%);
|
|
947
|
+
color: #000;
|
|
948
|
+
font-weight: 700;
|
|
949
|
+
border: none;
|
|
950
|
+
border-radius: 0.5rem;
|
|
951
|
+
padding: 0 1.5rem;
|
|
952
|
+
height: 3rem;
|
|
953
|
+
display: inline-flex;
|
|
954
|
+
align-items: center;
|
|
955
|
+
justify-content: center;
|
|
956
|
+
cursor: pointer;
|
|
957
|
+
transition: all 0.2s ease;
|
|
958
|
+
box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
|
|
959
|
+
text-decoration: none;
|
|
711
960
|
}
|
|
712
|
-
|
|
961
|
+
|
|
962
|
+
.btn-starlight:hover {
|
|
963
|
+
transform: translateY(-2px);
|
|
964
|
+
box-shadow: 0 5px 25px rgba(0, 212, 255, 0.4);
|
|
965
|
+
filter: brightness(1.1);
|
|
966
|
+
}
|
|
967
|
+
|
|
968
|
+
.btn-starlight:active {
|
|
969
|
+
transform: translateY(0) scale(0.95);
|
|
970
|
+
box-shadow: 0 2px 10px rgba(0, 212, 255, 0.2);
|
|
971
|
+
filter: brightness(0.9);
|
|
972
|
+
}
|
|
973
|
+
|
|
974
|
+
.btn-starlight:focus-visible {
|
|
975
|
+
outline: 2px solid white;
|
|
976
|
+
outline-offset: 2px;
|
|
977
|
+
box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.3);
|
|
978
|
+
}
|
|
979
|
+
|
|
980
|
+
body.light-mode .btn-starlight:focus-visible {
|
|
981
|
+
outline-color: var(--color-starlight-blue);
|
|
982
|
+
}}
|