@howssatoshi/quantumcss 1.7.7 → 1.8.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 +1 -1
- package/dist/index.html +232 -0
- package/dist/quantum.min.css +1 -1
- package/examples/admin-panel.html +10 -18
- package/examples/analytics-dashboard.html +30 -19
- package/examples/blog-template.html +20 -20
- package/examples/chat-messaging.html +13 -23
- package/examples/email-template.html +20 -28
- package/examples/gaming-template.html +13 -13
- package/examples/gradient-test.html +0 -5
- package/examples/index.html +15 -15
- package/examples/kitchen-sink.html +10 -22
- package/examples/music-streaming.html +21 -29
- package/examples/news-template.html +14 -14
- package/examples/portfolio-resume.html +14 -35
- package/examples/shopping/index.html +10 -24
- package/examples/starlight.html +5 -5
- package/examples/theme-test.html +0 -15
- package/examples/travel/index.html +15 -15
- package/examples/video-streaming.html +30 -16
- package/package.json +1 -1
- package/src/defaults.js +76 -1
- package/src/generator.js +2 -2
- package/src/starlight.js +0 -4
- package/src/styles/quantum-animations.css +13 -13
- package/src/styles/quantum-base.css +158 -32
- package/src/styles/quantum-components.css +259 -533
- package/src/styles/starlight.css +680 -45
package/examples/starlight.html
CHANGED
|
@@ -13,16 +13,16 @@
|
|
|
13
13
|
overflow-x: hidden;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
html[data-theme="dark"] {
|
|
17
17
|
color: #f1f5f9;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
html[data-theme="light"] {
|
|
21
21
|
background: #f1f5f9 !important;
|
|
22
22
|
color: #1e293b;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
html[data-theme="light"] .glass {
|
|
26
26
|
background: rgba(0, 0, 0, 0.03) !important;
|
|
27
27
|
border-color: rgba(0, 0, 0, 0.1) !important;
|
|
28
28
|
color: #1e293b !important;
|
|
@@ -81,14 +81,14 @@
|
|
|
81
81
|
background: rgba(255, 255, 255, 0.1);
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
-
|
|
84
|
+
html[data-theme="light"] .theme-toggle:hover {
|
|
85
85
|
background: rgba(0, 0, 0, 0.05);
|
|
86
86
|
}
|
|
87
87
|
</style>
|
|
88
88
|
</head>
|
|
89
89
|
<body class="p-8 min-h-screen">
|
|
90
90
|
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
91
|
-
<svg class="w-6 h-6 sun-icon
|
|
91
|
+
<svg class="w-6 h-6 sun-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path></svg>
|
|
92
92
|
<svg class="w-6 h-6 moon-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
|
|
93
93
|
</div>
|
|
94
94
|
<div class="hero-glow"></div>
|
package/examples/theme-test.html
CHANGED
|
@@ -66,21 +66,6 @@
|
|
|
66
66
|
function updateStatus() {
|
|
67
67
|
const html = document.documentElement;
|
|
68
68
|
const currentTheme = html.getAttribute('data-theme');
|
|
69
|
-
const savedTheme = localStorage.getItem('theme');
|
|
70
|
-
const effectiveTheme = localStorage.getItem('theme-effective');
|
|
71
|
-
const systemPrefers = window.matchMedia('(prefers-color-scheme: light)').matches;
|
|
72
|
-
|
|
73
|
-
const statusEl = document.getElementById('status');
|
|
74
|
-
const stateEl = document.getElementById('current-state');
|
|
75
|
-
|
|
76
|
-
// Debug information
|
|
77
|
-
console.log('Theme Debug:', {
|
|
78
|
-
currentTheme,
|
|
79
|
-
savedTheme,
|
|
80
|
-
effectiveTheme,
|
|
81
|
-
systemPrefers,
|
|
82
|
-
htmlDataTheme: html.getAttribute('data-theme'),
|
|
83
|
-
htmlAttributes: Object.keys(html.attributes).map(attr => `${attr}: ${html.getAttribute(attr)}`)
|
|
84
69
|
});
|
|
85
70
|
|
|
86
71
|
statusEl.innerHTML = `
|
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
overflow-x: hidden;
|
|
13
13
|
transition: background-color 0.5s ease, color 0.5s ease;
|
|
14
14
|
}
|
|
15
|
-
|
|
15
|
+
html[data-theme="dark"] {
|
|
16
16
|
color: #f1f5f9;
|
|
17
17
|
}
|
|
18
|
-
|
|
18
|
+
html[data-theme="light"] {
|
|
19
19
|
background: #f1f5f9 !important;
|
|
20
20
|
color: #1e293b;
|
|
21
21
|
}
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
transition: opacity 0.5s ease;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
html[data-theme="light"] .hero-glow {
|
|
35
35
|
opacity: 0;
|
|
36
36
|
}
|
|
37
37
|
|
|
@@ -52,28 +52,28 @@
|
|
|
52
52
|
background: rgba(255, 255, 255, 0.1);
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
|
|
55
|
+
html[data-theme="light"] .theme-toggle:hover {
|
|
56
56
|
background: rgba(0, 0, 0, 0.05);
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
html[data-theme="light"] .glass {
|
|
60
60
|
background: rgba(0, 0, 0, 0.03) !important;
|
|
61
61
|
border-color: rgba(0, 0, 0, 0.1) !important;
|
|
62
62
|
color: #1e293b !important;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
65
|
+
html[data-theme="light"] .starlight-card p,
|
|
66
|
+
html[data-theme="light"] header p,
|
|
67
|
+
html[data-theme="light"] section p {
|
|
68
68
|
color: #475569;
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
|
|
71
|
+
html[data-theme="light"] .btn-outline:hover {
|
|
72
72
|
background-color: #1e293b;
|
|
73
73
|
color: white;
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
|
|
76
|
+
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
|
|
77
77
|
filter: none;
|
|
78
78
|
}
|
|
79
79
|
|
|
@@ -81,19 +81,19 @@
|
|
|
81
81
|
color-scheme: dark;
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
-
|
|
84
|
+
html[data-theme="light"] input[type="date"] {
|
|
85
85
|
color-scheme: light;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
|
|
88
|
+
html[data-theme="light"] input {
|
|
89
89
|
color: #1e293b !important;
|
|
90
90
|
}
|
|
91
91
|
|
|
92
|
-
|
|
92
|
+
html[data-theme="light"] input::placeholder {
|
|
93
93
|
color: rgba(0, 0, 0, 0.3) !important;
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
-
|
|
96
|
+
html[data-theme="light"] .text-starlight-blue {
|
|
97
97
|
color: #2563eb !important;
|
|
98
98
|
}
|
|
99
99
|
</style>
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
</div>
|
|
121
121
|
<div class="flex items-center gap-4">
|
|
122
122
|
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
123
|
-
<svg class="w-6 h-6 sun-icon
|
|
123
|
+
<svg class="w-6 h-6 sun-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path></svg>
|
|
124
124
|
<svg class="w-6 h-6 moon-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
|
|
125
125
|
</div>
|
|
126
126
|
<button class="btn-starlight px-8 h-12 text-[10px] font-black uppercase tracking-widest">Book Now</button>
|
|
@@ -94,6 +94,29 @@
|
|
|
94
94
|
overflow: hidden;
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
+
@media (max-width: 1024px) {
|
|
98
|
+
.main-content {
|
|
99
|
+
grid-template-columns: 72px 1fr;
|
|
100
|
+
}
|
|
101
|
+
.sidebar .nav-item {
|
|
102
|
+
justify-content: center;
|
|
103
|
+
padding: 0.75rem 0;
|
|
104
|
+
}
|
|
105
|
+
.sidebar .nav-item span:last-child,
|
|
106
|
+
.sidebar .nav-section-title {
|
|
107
|
+
display: none;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
@media (max-width: 768px) {
|
|
112
|
+
.main-content {
|
|
113
|
+
grid-template-columns: 1fr;
|
|
114
|
+
}
|
|
115
|
+
.sidebar {
|
|
116
|
+
display: none;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
97
120
|
/* Sidebar */
|
|
98
121
|
.sidebar {
|
|
99
122
|
padding: 0.75rem 0;
|
|
@@ -288,21 +311,19 @@
|
|
|
288
311
|
}
|
|
289
312
|
|
|
290
313
|
/* Light Mode */
|
|
291
|
-
|
|
314
|
+
html[data-theme="light"] {
|
|
292
315
|
--bg-primary: #ffffff;
|
|
293
316
|
--text-primary: #0f0f0f;
|
|
294
317
|
--text-secondary: #606060;
|
|
295
318
|
--text-muted: #909090;
|
|
296
319
|
}
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
320
|
+
html[data-theme="light"] header { background: #ffffff; border-bottom-color: #e5e5e5; }
|
|
321
|
+
html[data-theme="light"] .nav-item:hover, html[data-theme="light"] .nav-item.active { background: #f2f2f2; }
|
|
322
|
+
html[data-theme="light"] .category-tab { background: #f2f2f2; border-color: #e5e5e5; color: #0f0f0f; }
|
|
323
|
+
html[data-theme="light"] .category-tab.active { background: #0f0f0f; color: #ffffff; }
|
|
324
|
+
html[data-theme="light"] .video-thumbnail, html[data-theme="light"] .short-thumbnail { background: #f2f2f2; }
|
|
302
325
|
|
|
303
326
|
@media (max-width: 1024px) {
|
|
304
|
-
.main-content { grid-template-columns: 1fr; }
|
|
305
|
-
.sidebar { display: none; }
|
|
306
327
|
.video-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
|
|
307
328
|
}
|
|
308
329
|
@media (max-width: 640px) {
|
|
@@ -312,7 +333,7 @@
|
|
|
312
333
|
}
|
|
313
334
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
314
335
|
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
|
|
315
|
-
|
|
336
|
+
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #ccc; }
|
|
316
337
|
</style>
|
|
317
338
|
</head>
|
|
318
339
|
<body>
|
|
@@ -545,13 +566,6 @@
|
|
|
545
566
|
</div>
|
|
546
567
|
|
|
547
568
|
<script>
|
|
548
|
-
function toggleTheme() {
|
|
549
|
-
document.body.classList.toggle('light-mode');
|
|
550
|
-
localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
|
|
551
|
-
}
|
|
552
|
-
if (localStorage.getItem('theme') === 'light') {
|
|
553
|
-
document.body.classList.add('light-mode');
|
|
554
|
-
}
|
|
555
569
|
|
|
556
570
|
document.querySelectorAll('.category-tab').forEach(tab => {
|
|
557
571
|
tab.addEventListener('click', function() {
|
package/package.json
CHANGED
package/src/defaults.js
CHANGED
|
@@ -201,7 +201,82 @@ const utilityMaps = {
|
|
|
201
201
|
'starlight-dashboard': 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8',
|
|
202
202
|
'starlight-gallery': 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4',
|
|
203
203
|
'starlight-form': 'card-base theme-glass-dark grid grid-cols-1 md:grid-cols-2 gap-8 items-start',
|
|
204
|
-
'starlight-dialog': 'dialog-base modal-fixed theme-glass-dark starlight-dialog-bg ani-scale-in'
|
|
204
|
+
'starlight-dialog': 'dialog-base modal-fixed theme-glass-dark starlight-dialog-bg ani-scale-in',
|
|
205
|
+
'starlight-sidebar': 'flex flex-col h-screen w-72 fixed left-0 top-0 bg-black_40 backdrop-blur-xl border-r border-white_10 p-6 z-40',
|
|
206
|
+
'starlight-feed-card': 'flex flex-col bg-white_03 backdrop-blur-md border border-white_10 rounded-2xl p-6 transition-all duration-300 ease',
|
|
207
|
+
'starlight-auth-form': 'flex flex-col max-w-md mx-auto bg-white_05 backdrop-blur-xl border border-white_10 rounded-2xl p-10 shadow-2xl',
|
|
208
|
+
|
|
209
|
+
'email-nav': 'flex flex-col h-full bg-black_40 backdrop-blur-xl border-r border-white_10 p-4 overflow-y-auto',
|
|
210
|
+
'email-feed': 'flex flex-col h-full bg-white_05 backdrop-blur-md border-r border-white_10 overflow-y-auto',
|
|
211
|
+
'email-content': 'flex flex-col h-full overflow-y-auto',
|
|
212
|
+
|
|
213
|
+
'music-nav': 'flex flex-col h-full bg-black_40 backdrop-blur-xl border-r border-white_10 p-4 overflow-y-auto',
|
|
214
|
+
'music-content': 'flex flex-col h-full overflow-y-auto',
|
|
215
|
+
'music-footer': 'flex items-center justify-between px-6 py-4 bg-black_40 backdrop-blur-xl border-t border-white_10',
|
|
216
|
+
|
|
217
|
+
'chat-sidebar': 'flex flex-col h-full bg-black_40 backdrop-blur-xl border-r border-white_10 overflow-hidden',
|
|
218
|
+
'chat-content': 'flex flex-col h-full overflow-hidden',
|
|
219
|
+
|
|
220
|
+
'admin-sidebar': 'flex flex-col h-full bg-black_40 backdrop-blur-xl border-r border-white_10 p-4 overflow-y-auto',
|
|
221
|
+
'admin-content': 'flex flex-col h-full overflow-y-auto',
|
|
222
|
+
|
|
223
|
+
'analytics-sidebar': 'flex flex-col h-full bg-black_40 backdrop-blur-xl border-r border-white_10 p-4 overflow-y-auto',
|
|
224
|
+
'analytics-content': 'flex flex-col h-full overflow-y-auto',
|
|
225
|
+
|
|
226
|
+
'layout-email-3col': 'grid h-screen grid-cols-[280px_320px_1fr] overflow-hidden',
|
|
227
|
+
'layout-music-2col': 'grid h-screen grid-rows-[1fr_auto] overflow-hidden',
|
|
228
|
+
'layout-music-row': 'grid grid-cols-[280px_1fr] overflow-hidden',
|
|
229
|
+
'layout-chat-2col': 'grid h-screen grid-cols-[320px_1fr] overflow-hidden',
|
|
230
|
+
'layout-admin-2col': 'grid h-screen grid-cols-[260px_1fr] overflow-hidden',
|
|
231
|
+
'layout-analytics-2col': 'grid h-screen grid-cols-[240px_1fr] overflow-hidden',
|
|
232
|
+
|
|
233
|
+
'starlight-stat': 'flex flex-col gap-2 p-5 bg-white_03 border border-white_08 rounded-xl transition-all duration-300',
|
|
234
|
+
'starlight-stat-header': 'flex items-center justify-between',
|
|
235
|
+
'starlight-stat-icon': 'flex items-center justify-center w-10 h-10 rounded-lg',
|
|
236
|
+
'starlight-stat-value': 'text-3xl font-bold text-starlight-blue',
|
|
237
|
+
'starlight-stat-label': 'text-sm uppercase tracking-wide text-white_60',
|
|
238
|
+
|
|
239
|
+
'starlight-avatar': 'flex items-center justify-center rounded-full font-semibold text-white',
|
|
240
|
+
'starlight-avatar-sm': 'w-8 h-8 text-xs',
|
|
241
|
+
'starlight-avatar-md': 'w-10 h-10 text-sm',
|
|
242
|
+
'starlight-avatar-lg': 'w-12 h-12 text-base',
|
|
243
|
+
'starlight-avatar-xl': 'w-16 h-16 text-lg',
|
|
244
|
+
|
|
245
|
+
'starlight-theme-toggle': 'flex items-center justify-center w-10 h-10 rounded-full bg-white_05 border border-white_10 cursor-pointer transition-all duration-300',
|
|
246
|
+
'starlight-notification': 'relative flex items-center justify-center w-10 h-10 bg-transparent border-none cursor-pointer',
|
|
247
|
+
'starlight-notification-dot': 'absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full animate-pulse',
|
|
248
|
+
|
|
249
|
+
'starlight-table-container': 'bg-white_03 border border-white_08 rounded-xl overflow-hidden',
|
|
250
|
+
'starlight-table-header': 'flex items-center justify-between p-4 border-b border-white_08',
|
|
251
|
+
'starlight-table': 'w-full border-collapse',
|
|
252
|
+
'starlight-table-footer': 'flex items-center justify-between p-4 border-t border-white_08 text-white_60',
|
|
253
|
+
|
|
254
|
+
'starlight-chart': 'bg-white_03 border border-white_08 rounded-xl overflow-hidden',
|
|
255
|
+
'starlight-chart-header': 'flex items-center justify-between p-4 border-b border-white_05',
|
|
256
|
+
'starlight-chart-tabs': 'flex gap-1',
|
|
257
|
+
'starlight-chart-tab': 'px-3 py-1 text-xs font-medium bg-transparent border-none rounded-md cursor-pointer transition-all',
|
|
258
|
+
'starlight-chart-tab.active': 'bg-starlight-blue_15 text-starlight-blue',
|
|
259
|
+
|
|
260
|
+
'starlight-breadcrumb': 'flex items-center gap-2 text-sm',
|
|
261
|
+
'starlight-breadcrumb-item': 'text-white_60 no-underline transition-colors',
|
|
262
|
+
'starlight-breadcrumb-separator': 'text-white_40',
|
|
263
|
+
'starlight-breadcrumb-current': 'font-medium',
|
|
264
|
+
|
|
265
|
+
'starlight-gallery-grid': 'grid gap-4',
|
|
266
|
+
'starlight-gallery-item': 'relative aspect-video rounded-lg overflow-hidden',
|
|
267
|
+
'starlight-gallery-overlay': 'absolute inset-0 flex items-end p-4 bg-gradient-to-t from-black_80 to-transparent opacity-0 transition-opacity',
|
|
268
|
+
|
|
269
|
+
'starlight-progress': 'flex items-center gap-3',
|
|
270
|
+
'starlight-progress-bar': 'flex-1 h-2 bg-white_10 rounded-full overflow-hidden',
|
|
271
|
+
'starlight-progress-fill': 'h-full bg-gradient-to-r from-starlight-blue to-starlight-peach rounded-full transition-all duration-500',
|
|
272
|
+
|
|
273
|
+
'starlight-player-controls': 'flex items-center gap-4',
|
|
274
|
+
'starlight-player-btn': 'flex items-center justify-center w-10 h-10 bg-transparent border-none cursor-pointer transition-all',
|
|
275
|
+
'starlight-player-btn-primary': 'w-12 h-12 bg-starlight-blue rounded-full text-black hover:bg-starlight-peach',
|
|
276
|
+
|
|
277
|
+
'starlight-page-header': 'flex items-center justify-between p-6',
|
|
278
|
+
'starlight-page-title': 'text-3xl font-bold',
|
|
279
|
+
'starlight-page-subtitle': 'text-sm text-white_60 mt-1'
|
|
205
280
|
};
|
|
206
281
|
|
|
207
282
|
module.exports = { defaultTheme, utilityMaps };
|
package/src/generator.js
CHANGED
|
@@ -450,13 +450,13 @@ function generateCSS(configPath) {
|
|
|
450
450
|
|
|
451
451
|
selectors.forEach(selector => {
|
|
452
452
|
if (breakpoint === 'light') {
|
|
453
|
-
const block = `html[data-theme="light"] ${selector}
|
|
453
|
+
const block = `html[data-theme="light"] ${selector} {
|
|
454
454
|
${rules.join('\n').trim()}
|
|
455
455
|
}
|
|
456
456
|
`;
|
|
457
457
|
utilities.add(block);
|
|
458
458
|
} else if (breakpoint === 'dark') {
|
|
459
|
-
const block = `html[data-theme="dark"] ${selector}
|
|
459
|
+
const block = `html[data-theme="dark"] ${selector} {
|
|
460
460
|
${rules.join('\n').trim()}
|
|
461
461
|
}
|
|
462
462
|
`;
|
package/src/starlight.js
CHANGED
|
@@ -505,8 +505,6 @@ const Starlight = {
|
|
|
505
505
|
|
|
506
506
|
// Apply to DOM
|
|
507
507
|
html.setAttribute('data-theme', effectiveTheme);
|
|
508
|
-
document.body.classList.toggle('light-mode', effectiveTheme === 'light');
|
|
509
|
-
document.body.classList.toggle('dark-mode', effectiveTheme === 'dark');
|
|
510
508
|
|
|
511
509
|
// Save preference
|
|
512
510
|
if (save) {
|
|
@@ -555,8 +553,6 @@ const Starlight = {
|
|
|
555
553
|
|
|
556
554
|
// Apply to DOM
|
|
557
555
|
html.setAttribute('data-theme', newEffective);
|
|
558
|
-
document.body.classList.toggle('light-mode', newEffective === 'light');
|
|
559
|
-
document.body.classList.toggle('dark-mode', newEffective === 'dark');
|
|
560
556
|
|
|
561
557
|
localStorage.setItem(`${config.storageKey}-effective`, newEffective);
|
|
562
558
|
updateIcons('auto', newEffective);
|
|
@@ -53,42 +53,42 @@
|
|
|
53
53
|
.ani-svg-draw {
|
|
54
54
|
stroke-dasharray: 1000;
|
|
55
55
|
stroke-dashoffset: 1000;
|
|
56
|
-
animation: svg-draw
|
|
56
|
+
animation: svg-draw var(--q-duration-slow) var(--q-ease-emphasized) forwards;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
.ani-float {
|
|
60
|
-
animation: float-y 6s ease-in-out infinite;
|
|
60
|
+
animation: float-y 6s var(--q-ease-in-out) infinite;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
.ani-fade-in {
|
|
64
|
-
animation: fadeIn
|
|
64
|
+
animation: fadeIn var(--q-duration-base) var(--q-ease-out) forwards;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
.ani-slide-up {
|
|
68
|
-
animation: slideUp
|
|
68
|
+
animation: slideUp var(--q-duration-base) var(--q-ease-out) forwards;
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
.ani-slide-down {
|
|
72
|
-
animation: slideDown
|
|
72
|
+
animation: slideDown var(--q-duration-base) var(--q-ease-out) forwards;
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
.ani-scale-in {
|
|
76
|
-
animation: scaleIn
|
|
76
|
+
animation: scaleIn var(--q-duration-fast) var(--q-ease-out) forwards;
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
.ani-spin {
|
|
80
|
-
animation: spin 1s linear infinite;
|
|
80
|
+
animation: spin 1s var(--q-ease-linear) infinite;
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
/* Staggered Animations */
|
|
84
|
-
.ani-stagger-1 { animation-delay:
|
|
85
|
-
.ani-stagger-2 { animation-delay:
|
|
86
|
-
.ani-stagger-3 { animation-delay:
|
|
87
|
-
.ani-stagger-4 { animation-delay:
|
|
88
|
-
.ani-stagger-5 { animation-delay:
|
|
84
|
+
.ani-stagger-1 { animation-delay: var(--q-duration-fast); }
|
|
85
|
+
.ani-stagger-2 { animation-delay: var(--q-duration-base); }
|
|
86
|
+
.ani-stagger-3 { animation-delay: var(--q-duration-slow); }
|
|
87
|
+
.ani-stagger-4 { animation-delay: 500ms; }
|
|
88
|
+
.ani-stagger-5 { animation-delay: var(--q-duration-slower); }
|
|
89
89
|
|
|
90
90
|
/* Speed Modifiers */
|
|
91
|
-
.ani-fast { animation-duration:
|
|
91
|
+
.ani-fast { animation-duration: var(--q-duration-fast) !important; }
|
|
92
92
|
.ani-slow { animation-duration: 8s !important; }
|
|
93
93
|
.ani-slower { animation-duration: 15s !important; }
|
|
94
94
|
|