@howssatoshi/quantumcss 1.7.7 → 1.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/quantum.min.css +10 -1
- package/examples/admin-panel.html +12 -20
- package/examples/analytics-dashboard.html +36 -30
- package/examples/blog-template.html +35 -34
- package/examples/chat-messaging.html +35 -56
- package/examples/email-template.html +22 -30
- package/examples/gaming-template.html +161 -30
- package/examples/images/eric.png +0 -0
- package/examples/index.html +102 -129
- package/examples/kitchen-sink.html +59 -23
- package/examples/music-streaming.html +19 -27
- package/examples/news-template.html +87 -229
- package/examples/portfolio-resume.html +125 -588
- package/examples/shopping/index.html +514 -341
- package/examples/shopping/nova-shop.css +984 -0
- package/examples/starlight.html +9 -8
- package/examples/theme-test.html +0 -15
- package/examples/travel/index.html +185 -28
- package/examples/video-streaming.html +40 -19
- package/package.json +1 -1
- package/src/defaults.js +77 -1
- package/src/generator.js +14 -5
- package/src/starlight.js +0 -4
- package/src/styles/quantum-base.css +192 -18
- package/src/styles/quantum-components.css +147 -136
- package/src/styles/starlight.css +907 -44
|
@@ -153,63 +153,63 @@
|
|
|
153
153
|
|
|
154
154
|
/* Sun/Moon icons */
|
|
155
155
|
.sun-icon { display: none; }
|
|
156
|
-
|
|
157
|
-
|
|
156
|
+
html[data-theme="light"] .sun-icon { display: block; }
|
|
157
|
+
html[data-theme="light"] .moon-icon { display: none; }
|
|
158
158
|
|
|
159
159
|
/* Light Mode Overrides */
|
|
160
|
-
|
|
160
|
+
html[data-theme="light"] {
|
|
161
161
|
background-color: #f8fafc;
|
|
162
162
|
color: #1e293b;
|
|
163
163
|
}
|
|
164
164
|
|
|
165
|
-
|
|
165
|
+
html[data-theme="light"] .email-sidebar {
|
|
166
166
|
background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
|
|
167
167
|
border-right-color: #e2e8f0;
|
|
168
168
|
}
|
|
169
169
|
|
|
170
|
-
|
|
170
|
+
html[data-theme="light"] .email-list {
|
|
171
171
|
background: #ffffff;
|
|
172
172
|
border-right-color: #e2e8f0;
|
|
173
173
|
}
|
|
174
174
|
|
|
175
|
-
|
|
175
|
+
html[data-theme="light"] .email-content {
|
|
176
176
|
background: #f8fafc;
|
|
177
177
|
}
|
|
178
178
|
|
|
179
|
-
|
|
179
|
+
html[data-theme="light"] .email-item {
|
|
180
180
|
border-bottom-color: #f1f5f9;
|
|
181
181
|
}
|
|
182
182
|
|
|
183
|
-
|
|
183
|
+
html[data-theme="light"] .email-item:hover {
|
|
184
184
|
background: #f8fafc;
|
|
185
185
|
}
|
|
186
186
|
|
|
187
|
-
|
|
187
|
+
html[data-theme="light"] .email-item.active {
|
|
188
188
|
background: rgba(0, 212, 255, 0.08);
|
|
189
189
|
}
|
|
190
190
|
|
|
191
|
-
|
|
191
|
+
html[data-theme="light"] .email-item.unread {
|
|
192
192
|
background: rgba(59, 130, 246, 0.04);
|
|
193
193
|
}
|
|
194
194
|
|
|
195
|
-
|
|
195
|
+
html[data-theme="light"] .email-sender {
|
|
196
196
|
color: #0f172a;
|
|
197
197
|
}
|
|
198
198
|
|
|
199
|
-
|
|
199
|
+
html[data-theme="light"] .email-preview {
|
|
200
200
|
color: #64748b;
|
|
201
201
|
}
|
|
202
202
|
|
|
203
|
-
|
|
203
|
+
html[data-theme="light"] .email-time {
|
|
204
204
|
color: #94a3b8;
|
|
205
205
|
}
|
|
206
206
|
|
|
207
|
-
|
|
207
|
+
html[data-theme="light"] .user-profile-section {
|
|
208
208
|
background: #f1f5f9;
|
|
209
209
|
border-color: #e2e8f0;
|
|
210
210
|
}
|
|
211
211
|
|
|
212
|
-
|
|
212
|
+
html[data-theme="light"] .user-name {
|
|
213
213
|
color: #0f172a;
|
|
214
214
|
}
|
|
215
215
|
|
|
@@ -254,7 +254,7 @@
|
|
|
254
254
|
display: block; /* Always block, use transform to hide */
|
|
255
255
|
}
|
|
256
256
|
|
|
257
|
-
|
|
257
|
+
html[data-theme="light"] .email-content {
|
|
258
258
|
background: #f8fafc;
|
|
259
259
|
}
|
|
260
260
|
|
|
@@ -273,7 +273,7 @@
|
|
|
273
273
|
background: rgba(8, 8, 26, 0.5);
|
|
274
274
|
}
|
|
275
275
|
|
|
276
|
-
|
|
276
|
+
html[data-theme="light"] .top-bar {
|
|
277
277
|
background: #ffffff;
|
|
278
278
|
border-bottom-color: #e2e8f0;
|
|
279
279
|
}
|
|
@@ -286,7 +286,7 @@
|
|
|
286
286
|
line-height: 1.3;
|
|
287
287
|
}
|
|
288
288
|
|
|
289
|
-
|
|
289
|
+
html[data-theme="light"] .email-subject {
|
|
290
290
|
color: #0f172a;
|
|
291
291
|
}
|
|
292
292
|
|
|
@@ -296,7 +296,7 @@
|
|
|
296
296
|
font-size: 0.9375rem;
|
|
297
297
|
}
|
|
298
298
|
|
|
299
|
-
|
|
299
|
+
html[data-theme="light"] .email-body {
|
|
300
300
|
color: #475569;
|
|
301
301
|
}
|
|
302
302
|
|
|
@@ -317,7 +317,7 @@
|
|
|
317
317
|
margin-bottom: 0.25rem;
|
|
318
318
|
}
|
|
319
319
|
|
|
320
|
-
|
|
320
|
+
html[data-theme="light"] .sender-details h3 {
|
|
321
321
|
color: #0f172a;
|
|
322
322
|
}
|
|
323
323
|
|
|
@@ -440,11 +440,11 @@
|
|
|
440
440
|
</div>
|
|
441
441
|
|
|
442
442
|
<div class="px-4 py-3">
|
|
443
|
-
<div class="starlight-search">
|
|
443
|
+
<div class="starlight-search has-icon">
|
|
444
444
|
<svg class="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
445
445
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
446
446
|
</svg>
|
|
447
|
-
<input type="text" class="bg-transparent border-none w-full h-full pl-12 outline-none text-sm text-white" placeholder="Search emails...">
|
|
447
|
+
<input type="text" class="search-input bg-transparent border-none w-full h-full pl-12 outline-none text-sm text-white" placeholder="Search emails...">
|
|
448
448
|
</div>
|
|
449
449
|
</div>
|
|
450
450
|
|
|
@@ -679,16 +679,8 @@
|
|
|
679
679
|
|
|
680
680
|
<script>
|
|
681
681
|
// Theme toggle functionality
|
|
682
|
-
function toggleTheme() {
|
|
683
|
-
document.body.classList.toggle('light-mode');
|
|
684
|
-
localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
|
|
685
|
-
}
|
|
686
682
|
|
|
687
683
|
// Check for saved theme preference
|
|
688
|
-
const savedTheme = localStorage.getItem('theme');
|
|
689
|
-
if (savedTheme === 'light') {
|
|
690
|
-
document.body.classList.add('light-mode');
|
|
691
|
-
}
|
|
692
684
|
|
|
693
685
|
// Email item click handler
|
|
694
686
|
document.querySelectorAll('.email-item').forEach(item => {
|
|
@@ -8,14 +8,18 @@
|
|
|
8
8
|
<style>
|
|
9
9
|
body {
|
|
10
10
|
background: radial-gradient(circle at top right, #1a1a3a, #0a0a1a 40%), #050505;
|
|
11
|
-
color:
|
|
11
|
+
color: var(--q-text-primary);
|
|
12
12
|
min-height: 100vh;
|
|
13
13
|
transition: background-color 0.5s ease, color 0.5s ease;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
background:
|
|
18
|
-
color:
|
|
16
|
+
html[data-theme="light"] {
|
|
17
|
+
background: var(--q-light-bg);
|
|
18
|
+
color: var(--q-light-text);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
html[data-theme="light"] body {
|
|
22
|
+
background: var(--q-light-bg) !important;
|
|
19
23
|
}
|
|
20
24
|
|
|
21
25
|
.hero-section {
|
|
@@ -30,8 +34,8 @@
|
|
|
30
34
|
text-align: center;
|
|
31
35
|
}
|
|
32
36
|
|
|
33
|
-
|
|
34
|
-
background: linear-gradient(rgba(255, 255, 255, 0.
|
|
37
|
+
html[data-theme="light"] .hero-section {
|
|
38
|
+
background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.95)),
|
|
35
39
|
url('https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1920&q=80');
|
|
36
40
|
background-size: cover;
|
|
37
41
|
background-position: center;
|
|
@@ -60,44 +64,171 @@
|
|
|
60
64
|
background: rgba(255, 255, 255, 0.1);
|
|
61
65
|
}
|
|
62
66
|
|
|
63
|
-
|
|
67
|
+
html[data-theme="light"] .theme-toggle:hover {
|
|
64
68
|
background: rgba(0, 0, 0, 0.05);
|
|
65
69
|
}
|
|
66
70
|
|
|
67
|
-
|
|
68
|
-
background:
|
|
69
|
-
border-color:
|
|
70
|
-
color:
|
|
71
|
+
html[data-theme="light"] .glass {
|
|
72
|
+
background: var(--q-light-card-bg) !important;
|
|
73
|
+
border-color: var(--q-light-card-border) !important;
|
|
74
|
+
color: var(--q-light-text) !important;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
html[data-theme="light"] .badge-secondary {
|
|
78
|
+
background-color: var(--q-glass-bg);
|
|
79
|
+
color: var(--q-light-text-muted);
|
|
80
|
+
border-color: var(--q-light-card-border);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
html[data-theme="light"] .starlight-card p {
|
|
84
|
+
color: var(--q-light-text-muted);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
html[data-theme="light"] footer {
|
|
88
|
+
background-color: var(--q-light-bg);
|
|
89
|
+
border-top-color: var(--q-light-card-border);
|
|
71
90
|
}
|
|
72
91
|
|
|
73
|
-
|
|
74
|
-
background
|
|
75
|
-
color:
|
|
76
|
-
|
|
92
|
+
html[data-theme="light"] footer .text-gradient-starlight {
|
|
93
|
+
background: none;
|
|
94
|
+
-webkit-text-fill-color: var(--q-light-text);
|
|
95
|
+
color: var(--q-light-text);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
html[data-theme="light"] footer p,
|
|
99
|
+
html[data-theme="light"] footer a {
|
|
100
|
+
color: var(--q-light-text-muted);
|
|
77
101
|
}
|
|
78
102
|
|
|
79
|
-
|
|
80
|
-
color:
|
|
103
|
+
html[data-theme="light"] footer a:hover {
|
|
104
|
+
color: var(--q-color-primary);
|
|
81
105
|
}
|
|
82
106
|
|
|
83
|
-
|
|
84
|
-
background
|
|
85
|
-
border-
|
|
107
|
+
html[data-theme="light"] .starlight-nav {
|
|
108
|
+
background: var(--q-light-card-bg) !important;
|
|
109
|
+
border-bottom-color: var(--q-light-card-border) !important;
|
|
86
110
|
}
|
|
87
111
|
|
|
88
|
-
|
|
112
|
+
html[data-theme="light"] .starlight-nav .text-gradient-starlight {
|
|
89
113
|
background: none;
|
|
90
|
-
-webkit-text-fill-color:
|
|
91
|
-
color:
|
|
114
|
+
-webkit-text-fill-color: var(--q-light-text);
|
|
115
|
+
color: var(--q-light-text);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
html[data-theme="light"] .nav-link {
|
|
119
|
+
color: var(--q-light-text-muted) !important;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
html[data-theme="light"] .nav-link:hover {
|
|
123
|
+
color: var(--q-color-primary) !important;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
html[data-theme="light"] .hero-section h1 {
|
|
127
|
+
color: var(--q-light-text) !important;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
html[data-theme="light"] .hero-section p {
|
|
131
|
+
color: var(--q-light-text-muted) !important;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
html[data-theme="light"] .hero-section .badge-primary {
|
|
135
|
+
background-color: rgba(37, 99, 235, 0.1) !important;
|
|
136
|
+
color: var(--q-color-primary) !important;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
html[data-theme="light"] .glass {
|
|
140
|
+
background: var(--q-light-card-bg) !important;
|
|
141
|
+
border-color: var(--q-light-card-border) !important;
|
|
142
|
+
color: var(--q-light-text) !important;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
html[data-theme="light"] .glass.text-white {
|
|
146
|
+
color: var(--q-light-text) !important;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
html[data-theme="light"] .starlight-card {
|
|
150
|
+
background: var(--q-light-card-bg) !important;
|
|
151
|
+
border-color: var(--q-light-card-border) !important;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
html[data-theme="light"] .starlight-card h4 {
|
|
155
|
+
color: var(--q-light-text) !important;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
html[data-theme="light"] .starlight-card p {
|
|
159
|
+
color: var(--q-light-text-muted) !important;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
html[data-theme="light"] .text-gray-300 {
|
|
163
|
+
color: var(--q-light-text-muted) !important;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
html[data-theme="light"] .text-gray-400 {
|
|
167
|
+
color: var(--q-light-text-muted) !important;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
html[data-theme="light"] .text-gray-500 {
|
|
171
|
+
color: var(--q-light-text-muted) !important;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
html[data-theme="light"] .text-gray-600 {
|
|
175
|
+
color: var(--q-light-text-muted) !important;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
html[data-theme="light"] .bg-white {
|
|
179
|
+
background-color: var(--q-light-card-bg) !important;
|
|
180
|
+
color: var(--q-light-text) !important;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
html[data-theme="light"] .text-black {
|
|
184
|
+
color: var(--q-light-text) !important;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
html[data-theme="light"] .text-starlight {
|
|
188
|
+
color: var(--q-color-primary) !important;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
html[data-theme="light"] .border-white_5 {
|
|
192
|
+
border-color: var(--q-light-card-border) !important;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
html[data-theme="light"] .border-starlight {
|
|
196
|
+
border-color: var(--q-color-primary) !important;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
html[data-theme="light"] .border-opacity-20 {
|
|
200
|
+
border-color: var(--q-light-card-border) !important;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
html[data-theme="light"] a.text-starlight {
|
|
204
|
+
color: var(--q-color-primary) !important;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
html[data-theme="light"] .accordion-starlight {
|
|
208
|
+
background: var(--q-light-card-bg) !important;
|
|
209
|
+
border-color: var(--q-light-card-border) !important;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
html[data-theme="light"] .accordion-header {
|
|
213
|
+
color: var(--q-light-text) !important;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
html[data-theme="light"] .accordion-content p {
|
|
217
|
+
color: var(--q-light-text-muted) !important;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
html[data-theme="light"] input.glass {
|
|
221
|
+
background: var(--q-light-card-bg) !important;
|
|
222
|
+
color: var(--q-light-text) !important;
|
|
223
|
+
border-color: var(--q-light-card-border) !important;
|
|
92
224
|
}
|
|
93
225
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
color: #64748b;
|
|
226
|
+
html[data-theme="light"] input.glass::placeholder {
|
|
227
|
+
color: var(--q-light-text-muted) !important;
|
|
97
228
|
}
|
|
98
229
|
|
|
99
|
-
|
|
100
|
-
color:
|
|
230
|
+
html[data-theme="light"] .bg-black {
|
|
231
|
+
background-color: var(--q-light-bg) !important;
|
|
101
232
|
}
|
|
102
233
|
</style>
|
|
103
234
|
</head>
|
|
@@ -119,7 +250,7 @@
|
|
|
119
250
|
|
|
120
251
|
<div class="flex items-center gap-4">
|
|
121
252
|
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
122
|
-
<svg class="w-6 h-6 sun-icon
|
|
253
|
+
<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>
|
|
123
254
|
<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>
|
|
124
255
|
</div>
|
|
125
256
|
<button class="bg-starlight text-black px-8 py-2.5 rounded-full font-bold glow-blue hover:scale-105 transition border-none">Play Now</button>
|
|
@@ -129,7 +260,7 @@
|
|
|
129
260
|
<!-- Mobile Actions -->
|
|
130
261
|
<div class="flex items-center gap-4 md:hidden hamburger-left">
|
|
131
262
|
<div id="theme-btn-mobile" class="theme-toggle" title="Toggle Theme">
|
|
132
|
-
<svg class="w-6 h-6 sun-icon
|
|
263
|
+
<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>
|
|
133
264
|
<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>
|
|
134
265
|
</div>
|
|
135
266
|
<div class="hamburger">
|
|
Binary file
|