@howssatoshi/quantumcss 1.11.0 → 1.11.2
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 +2 -2
- package/examples/admin-panel.html +9 -31
- package/examples/analytics-dashboard.html +2 -4
- package/examples/index.html +1 -1
- package/examples/news.html +5 -5
- package/examples/portfolio.html +13 -13
- package/examples/video-streaming.html +1025 -757
- package/package.json +2 -1
- package/src/defaults.js +4 -4
- package/src/generator.js +1 -0
- package/src/styles/quantum-base.css +2 -2
- package/src/styles/quantum-components.css +13 -12
- package/src/styles/quantum-icons.css +2 -3
- package/src/styles/starlight.css +21 -21
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@howssatoshi/quantumcss",
|
|
3
|
-
"version": "1.11.
|
|
3
|
+
"version": "1.11.2",
|
|
4
4
|
"description": "Advanced utility-first CSS framework with JIT generation and modern components",
|
|
5
5
|
"main": "dist/quantum.min.css",
|
|
6
6
|
"bin": {
|
|
@@ -47,6 +47,7 @@
|
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"autoprefixer": "^10.4.27",
|
|
50
|
+
"bun": "^1.3.11",
|
|
50
51
|
"chokidar": "^5.0.0",
|
|
51
52
|
"cssnano": "^7.1.3",
|
|
52
53
|
"glob": "^13.0.0",
|
package/src/defaults.js
CHANGED
|
@@ -156,7 +156,7 @@ const utilityMaps = {
|
|
|
156
156
|
},
|
|
157
157
|
'theme-starlight': {
|
|
158
158
|
property: ['background', 'color', 'border-color', 'box-shadow'],
|
|
159
|
-
value: ['linear-gradient(135deg, var(--q-color-starlight-peach) 0%, var(--q-color-starlight-blue) 100%)', '#000', 'transparent', '0 0 30px
|
|
159
|
+
value: ['linear-gradient(135deg, var(--q-color-starlight-peach) 0%, var(--q-color-starlight-blue) 100%)', '#000', 'transparent', '0 0 30px color-mix(in srgb, var(--q-color-starlight-blue), transparent 80%)']
|
|
160
160
|
},
|
|
161
161
|
'theme-glass': {
|
|
162
162
|
property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border-color', 'border-width', 'border-style'],
|
|
@@ -170,13 +170,13 @@ const utilityMaps = {
|
|
|
170
170
|
property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter'],
|
|
171
171
|
value: ['rgba(8, 8, 26, 0.05) !important', 'blur(24px) !important', 'blur(24px) !important']
|
|
172
172
|
},
|
|
173
|
-
'glow-blue': { property: 'box-shadow', value: '0 0 30px
|
|
174
|
-
'glow-starlight': { property: 'box-shadow', value: '0 0 30px
|
|
173
|
+
'glow-blue': { property: 'box-shadow', value: '0 0 30px color-mix(in srgb, var(--q-color-starlight-blue), transparent 75%)' },
|
|
174
|
+
'glow-starlight': { property: 'box-shadow', value: '0 0 30px color-mix(in srgb, var(--q-color-starlight-blue), transparent 75%)' },
|
|
175
175
|
'glow-peach': { property: 'box-shadow', value: '0 0 30px rgba(255, 179, 138, 0.25)' },
|
|
176
176
|
'glow-orange': { property: 'box-shadow', value: '0 0 30px rgba(255, 126, 95, 0.25)' },
|
|
177
177
|
'focus-glow': {
|
|
178
178
|
property: ['outline', 'box-shadow'],
|
|
179
|
-
value: ['none !important', '0 0 0 4px
|
|
179
|
+
value: ['none !important', '0 0 0 4px color-mix(in srgb, var(--q-color-starlight-blue), transparent 60%), 0 0 35px color-mix(in srgb, var(--q-color-starlight-blue), transparent 30%) !important'],
|
|
180
180
|
variant: 'focus'
|
|
181
181
|
},
|
|
182
182
|
'btn-starlight': 'btn-base theme-starlight px-6',
|
package/src/generator.js
CHANGED
|
@@ -258,6 +258,7 @@ function generateCSS(configPath) {
|
|
|
258
258
|
|
|
259
259
|
if (prefix === 'text') {
|
|
260
260
|
if (theme.fontSize[valKey]) { property = ['font-size', 'line-height']; value = [theme.fontSize[valKey], (valKey.includes('xl') || parseInt(valKey) >= 3) ? '1.2' : '1.5']; }
|
|
261
|
+
else if (['primary', 'secondary', 'muted'].includes(valKey)) { property = 'color'; value = `var(--q-text-${valKey}) !important`; }
|
|
261
262
|
else { const color = resolveColor(valKey); if (color) { property = 'color'; value = `${color} !important`; } }
|
|
262
263
|
} else if (prefix === 'bg') {
|
|
263
264
|
if (cParts[1] === 'gradient' && cParts[2] === 'to') {
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
--q-color-starlight-peach: #ffb38a;
|
|
88
88
|
--q-color-starlight-orange: #ff7e5f;
|
|
89
89
|
--q-color-starlight-deep: #08081a;
|
|
90
|
-
--q-color-starlight-glow:
|
|
90
|
+
--q-color-starlight-glow: color-mix(in srgb, var(--q-color-starlight-blue), transparent 65%);
|
|
91
91
|
|
|
92
92
|
/* Semantic Background Colors */
|
|
93
93
|
--q-bg-primary: var(--q-color-starlight-deep);
|
|
@@ -208,7 +208,7 @@ button:focus,
|
|
|
208
208
|
input:active,
|
|
209
209
|
button:active {
|
|
210
210
|
outline: none;
|
|
211
|
-
box-shadow: 0 0 0 3px
|
|
211
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-color-starlight-blue), transparent 85%), 0 0 20px color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
|
|
212
212
|
}
|
|
213
213
|
|
|
214
214
|
textarea {
|
|
@@ -907,7 +907,8 @@ html[data-theme="light"] .accordion-content {
|
|
|
907
907
|
}
|
|
908
908
|
|
|
909
909
|
.tab-button:hover {
|
|
910
|
-
background-color:
|
|
910
|
+
background-color: color-mix(in srgb,var(--q-color-starlight),transparent 85%);
|
|
911
|
+
border-radius: 7px;
|
|
911
912
|
color: var(--q-text-primary);
|
|
912
913
|
}
|
|
913
914
|
|
|
@@ -981,21 +982,21 @@ html[data-theme="light"] .tab-button.active {
|
|
|
981
982
|
}
|
|
982
983
|
|
|
983
984
|
.chip:hover {
|
|
984
|
-
background-color:
|
|
985
|
-
border-color:
|
|
985
|
+
background-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 90%);
|
|
986
|
+
border-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
|
|
986
987
|
color: var(--q-color-starlight-blue);
|
|
987
988
|
}
|
|
988
989
|
|
|
989
990
|
.chip.active {
|
|
990
|
-
background-color:
|
|
991
|
-
border-color:
|
|
991
|
+
background-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 90%);
|
|
992
|
+
border-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
|
|
992
993
|
color: var(--q-color-starlight-blue);
|
|
993
994
|
}
|
|
994
995
|
|
|
995
996
|
/* Chip variants */
|
|
996
997
|
.chip-primary {
|
|
997
|
-
background-color:
|
|
998
|
-
border-color:
|
|
998
|
+
background-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 90%);
|
|
999
|
+
border-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
|
|
999
1000
|
color: var(--q-color-starlight-blue);
|
|
1000
1001
|
}
|
|
1001
1002
|
|
|
@@ -1995,7 +1996,7 @@ html[data-theme="light"] .breadcrumb-current {
|
|
|
1995
1996
|
}
|
|
1996
1997
|
|
|
1997
1998
|
.nav-item.active {
|
|
1998
|
-
background:
|
|
1999
|
+
background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 88%);
|
|
1999
2000
|
color: var(--q-color-starlight, #00d4ff);
|
|
2000
2001
|
}
|
|
2001
2002
|
|
|
@@ -2665,7 +2666,7 @@ html[data-theme="light"] .user-email {
|
|
|
2665
2666
|
}
|
|
2666
2667
|
|
|
2667
2668
|
.role-admin {
|
|
2668
|
-
background:
|
|
2669
|
+
background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 85%);
|
|
2669
2670
|
color: var(--q-color-starlight, #00d4ff);
|
|
2670
2671
|
}
|
|
2671
2672
|
|
|
@@ -2738,7 +2739,7 @@ html[data-theme="light"] .role-badge {
|
|
|
2738
2739
|
}
|
|
2739
2740
|
|
|
2740
2741
|
html[data-theme="light"] .role-admin {
|
|
2741
|
-
background:
|
|
2742
|
+
background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 90%);
|
|
2742
2743
|
color: #0284c7;
|
|
2743
2744
|
}
|
|
2744
2745
|
|
|
@@ -2947,8 +2948,8 @@ html[data-theme="light"] .notification-badge {
|
|
|
2947
2948
|
}
|
|
2948
2949
|
|
|
2949
2950
|
.page-btn.active {
|
|
2950
|
-
background:
|
|
2951
|
-
border-color:
|
|
2951
|
+
background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 85%);
|
|
2952
|
+
border-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
|
|
2952
2953
|
color: var(--q-color-starlight, #00d4ff);
|
|
2953
2954
|
}
|
|
2954
2955
|
|
|
@@ -286,8 +286,8 @@
|
|
|
286
286
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.049%202.927c.3-.921%201.603-.921%201.902%200l1.519%204.674a1%201%200%2000.95.69h4.915c.969%200%201.371%201.24.588%201.81l-3.976%202.888a1%201%200%2000-.363%201.118l1.518%204.674c.3.922-.755%201.688-1.538%201.118l-3.976-2.888a1%201%200%2000-1.176%200l-3.976%202.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1%201%200%2000-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1%201%200%2000.951-.69l1.519-4.674z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
|
|
287
287
|
}
|
|
288
288
|
.q-icon-starlight {
|
|
289
|
-
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%
|
|
290
|
-
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%
|
|
289
|
+
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%228%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2215%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.45%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%224%22%20width%3D%224%22%20height%3D%2256%22%20rx%3D%222%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2230%22%20width%3D%2256%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2211%22%20width%3D%222%22%20height%3D%2242%22%20rx%3D%221%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%2231%22%20width%3D%2242%22%20height%3D%222%22%20rx%3D%221%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(-45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(-45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E");
|
|
290
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%228%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2215%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.45%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%224%22%20width%3D%224%22%20height%3D%2256%22%20rx%3D%222%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2230%22%20width%3D%2256%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2211%22%20width%3D%222%22%20height%3D%2242%22%20rx%3D%221%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%2231%22%20width%3D%2242%22%20height%3D%222%22%20rx%3D%221%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(-45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(-45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E");
|
|
291
291
|
}
|
|
292
292
|
.q-icon-sun {
|
|
293
293
|
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%223%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2212%22%20y1%3D%2221%22%20x2%3D%2212%22%20y2%3D%2223%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224.22%22%20y1%3D%224.22%22%20x2%3D%225.64%22%20y2%3D%225.64%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2218.78%22%20y1%3D%2218.78%22%20x2%3D%2220.2%22%20y2%3D%2220.2%22%3E%3C%2Fline%3E%3Cline%20x1%3D%221%22%20y1%3D%2212%22%20x2%3D%223%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2221%22%20y1%3D%2212%22%20x2%3D%2223%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224.22%22%20y1%3D%2219.78%22%20x2%3D%225.64%22%20y2%3D%2218.36%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2218.78%22%20y1%3D%225.22%22%20x2%3D%2220.2%22%20y2%3D%223.8%22%3E%3C%2Fline%3E%3C%2Fsvg%3E");
|
|
@@ -342,4 +342,3 @@
|
|
|
342
342
|
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M3%209v6h4l5%205V4L7%209H3zm13.5%203c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73%202.5-2.25%202.5-4.02zM14%203.23v2.06c2.89.86%205%203.54%205%206.71s-2.11%205.85-5%206.71v2.06c4.01-.91%207-4.49%207-8.77s-2.99-7.86-7-8.77z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
|
|
343
343
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M3%209v6h4l5%205V4L7%209H3zm13.5%203c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73%202.5-2.25%202.5-4.02zM14%203.23v2.06c2.89.86%205%203.54%205%206.71s-2.11%205.85-5%206.71v2.06c4.01-.91%207-4.49%207-8.77s-2.99-7.86-7-8.77z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
|
|
344
344
|
}
|
|
345
|
-
|
package/src/styles/starlight.css
CHANGED
|
@@ -226,12 +226,12 @@ html[data-theme="light"] .starlight-navbar .banner {
|
|
|
226
226
|
}
|
|
227
227
|
|
|
228
228
|
.nav-list.vertical .nav-link:hover {
|
|
229
|
-
background: color-mix(in srgb, var(--q-color-starlight), transparent
|
|
229
|
+
background: color-mix(in srgb, var(--q-color-starlight), transparent 85%);
|
|
230
230
|
color: var(--q-color-starlight);
|
|
231
231
|
}
|
|
232
232
|
|
|
233
233
|
.nav-list.vertical .nav-link.active {
|
|
234
|
-
background: color-mix(in srgb, var(--q-color-starlight), transparent
|
|
234
|
+
background: color-mix(in srgb, var(--q-color-starlight), transparent 85%);
|
|
235
235
|
color: var(--q-color-starlight);
|
|
236
236
|
border-left: 3px solid var(--q-color-starlight);
|
|
237
237
|
}
|
|
@@ -245,17 +245,17 @@ html[data-theme="light"] .nav-list.vertical .nav-link.active {
|
|
|
245
245
|
.nav-links > a:hover,
|
|
246
246
|
.nav-dropdown summary:hover {
|
|
247
247
|
color: var(--q-color-starlight);
|
|
248
|
-
background: color-mix(in srgb, var(--q-color-starlight), transparent
|
|
248
|
+
background: color-mix(in srgb, var(--q-color-starlight), transparent 85%);
|
|
249
249
|
}
|
|
250
250
|
|
|
251
251
|
.nav-dropdown[open] > summary {
|
|
252
252
|
color: var(--q-color-starlight);
|
|
253
|
-
background: color-mix(in srgb, var(--q-color-starlight), transparent
|
|
253
|
+
background: color-mix(in srgb, var(--q-color-starlight), transparent 85%);
|
|
254
254
|
}
|
|
255
255
|
|
|
256
256
|
.nav-dropdown-panel a:hover {
|
|
257
257
|
color: var(--q-color-starlight);
|
|
258
|
-
background: color-mix(in srgb, var(--q-color-starlight), transparent
|
|
258
|
+
background: color-mix(in srgb, var(--q-color-starlight), transparent 85%);
|
|
259
259
|
}
|
|
260
260
|
|
|
261
261
|
.nav-link::after {
|
|
@@ -836,7 +836,7 @@ html[data-theme="light"] .select-starlight:focus {
|
|
|
836
836
|
backdrop-filter: blur(12px);
|
|
837
837
|
-webkit-backdrop-filter: blur(12px);
|
|
838
838
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
839
|
-
box-shadow: 0 0 30px
|
|
839
|
+
box-shadow: 0 0 30px color-mix(in srgb, var(--q-color-starlight-blue), transparent 75%);
|
|
840
840
|
transition: all 0.3s ease;
|
|
841
841
|
border-radius: 1rem;
|
|
842
842
|
padding: 1.5rem;
|
|
@@ -844,7 +844,7 @@ html[data-theme="light"] .select-starlight:focus {
|
|
|
844
844
|
|
|
845
845
|
.glass:hover {
|
|
846
846
|
border-color: var(--q-color-starlight-blue);
|
|
847
|
-
box-shadow: 0 0 40px
|
|
847
|
+
box-shadow: 0 0 40px color-mix(in srgb, var(--q-color-starlight-blue), transparent 60%);
|
|
848
848
|
}
|
|
849
849
|
|
|
850
850
|
html[data-theme="light"] .glass {
|
|
@@ -857,20 +857,20 @@ html[data-theme="light"] .glass:hover {
|
|
|
857
857
|
border-color: var(--q-color-starlight-blue);
|
|
858
858
|
box-shadow:
|
|
859
859
|
0 8px 32px 0 rgba(31, 38, 135, 0.1),
|
|
860
|
-
0 0 15px
|
|
860
|
+
0 0 15px color-mix(in srgb, var(--q-color-starlight-blue), transparent 85%);
|
|
861
861
|
}
|
|
862
862
|
|
|
863
863
|
/* Glass Blue Glow variant */
|
|
864
864
|
.glow-blue {
|
|
865
865
|
box-shadow:
|
|
866
|
-
0 0 30px
|
|
867
|
-
0 0 60px
|
|
866
|
+
0 0 30px color-mix(in srgb, var(--q-color-starlight-blue), transparent 65%),
|
|
867
|
+
0 0 60px color-mix(in srgb, var(--q-color-starlight-blue), transparent 85%);
|
|
868
868
|
}
|
|
869
869
|
|
|
870
870
|
.glow-blue:hover {
|
|
871
871
|
box-shadow:
|
|
872
|
-
0 0 40px
|
|
873
|
-
0 0 80px
|
|
872
|
+
0 0 40px color-mix(in srgb, var(--q-color-starlight-blue), transparent 50%),
|
|
873
|
+
0 0 80px color-mix(in srgb, var(--q-color-starlight-blue), transparent 80%);
|
|
874
874
|
}
|
|
875
875
|
|
|
876
876
|
/* 9. Code Interface Window */
|
|
@@ -980,7 +980,7 @@ html[data-theme="light"] .code-window-title {
|
|
|
980
980
|
background: color-mix(
|
|
981
981
|
in srgb,
|
|
982
982
|
var(--q-color-starlight-blue),
|
|
983
|
-
transparent
|
|
983
|
+
transparent 85%
|
|
984
984
|
);
|
|
985
985
|
box-shadow:
|
|
986
986
|
0 0 30px
|
|
@@ -1700,7 +1700,7 @@ html[data-theme="light"] .text-glass {
|
|
|
1700
1700
|
|
|
1701
1701
|
/* Blue Card - Accent variant */
|
|
1702
1702
|
.blue-card {
|
|
1703
|
-
background:
|
|
1703
|
+
background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 95%);
|
|
1704
1704
|
backdrop-filter: blur(8px);
|
|
1705
1705
|
-webkit-backdrop-filter: blur(8px);
|
|
1706
1706
|
padding: 2rem;
|
|
@@ -1712,7 +1712,7 @@ html[data-theme="light"] .text-glass {
|
|
|
1712
1712
|
}
|
|
1713
1713
|
|
|
1714
1714
|
html[data-theme="light"] .blue-card {
|
|
1715
|
-
background:
|
|
1715
|
+
background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 90%);
|
|
1716
1716
|
}
|
|
1717
1717
|
|
|
1718
1718
|
/* Avatar - circular image */
|
|
@@ -1720,7 +1720,7 @@ html[data-theme="light"] .blue-card {
|
|
|
1720
1720
|
width: 3rem;
|
|
1721
1721
|
height: 3rem;
|
|
1722
1722
|
border-radius: 9999px;
|
|
1723
|
-
border: 1px solid
|
|
1723
|
+
border: 1px solid color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
|
|
1724
1724
|
object-fit: cover;
|
|
1725
1725
|
}
|
|
1726
1726
|
|
|
@@ -1745,7 +1745,7 @@ h2 .accent-bar {
|
|
|
1745
1745
|
var(--q-color-starlight-blue) 100%
|
|
1746
1746
|
);
|
|
1747
1747
|
border-radius: 9999px;
|
|
1748
|
-
box-shadow: 0 0 15px
|
|
1748
|
+
box-shadow: 0 0 15px color-mix(in srgb, var(--q-color-starlight-blue), transparent 50%);
|
|
1749
1749
|
}
|
|
1750
1750
|
|
|
1751
1751
|
html[data-theme="light"] h2 .accent-bar {
|
|
@@ -2833,7 +2833,7 @@ html[data-theme="light"] .aside-nav-label {
|
|
|
2833
2833
|
}
|
|
2834
2834
|
|
|
2835
2835
|
.aside-nav-item:hover {
|
|
2836
|
-
background: color-mix(in srgb, var(--q-color-starlight), transparent
|
|
2836
|
+
background: color-mix(in srgb, var(--q-color-starlight), transparent 85%);
|
|
2837
2837
|
color: var(--q-color-starlight);
|
|
2838
2838
|
}
|
|
2839
2839
|
|
|
@@ -2847,7 +2847,7 @@ html[data-theme="light"] .aside-nav-item:hover {
|
|
|
2847
2847
|
}
|
|
2848
2848
|
|
|
2849
2849
|
.aside-nav-item.active {
|
|
2850
|
-
background: color-mix(in srgb, var(--q-color-starlight), transparent
|
|
2850
|
+
background: color-mix(in srgb, var(--q-color-starlight), transparent 85%);
|
|
2851
2851
|
color: var(--q-color-starlight);
|
|
2852
2852
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
2853
2853
|
}
|
|
@@ -2937,7 +2937,7 @@ html[data-theme="light"] .aside-nav-badge {
|
|
|
2937
2937
|
}
|
|
2938
2938
|
|
|
2939
2939
|
.aside-nav-group > summary:hover {
|
|
2940
|
-
background: color-mix(in srgb, var(--q-color-starlight), transparent
|
|
2940
|
+
background: color-mix(in srgb, var(--q-color-starlight), transparent 85%);
|
|
2941
2941
|
color: var(--q-color-starlight);
|
|
2942
2942
|
}
|
|
2943
2943
|
|
|
@@ -2951,7 +2951,7 @@ html[data-theme="light"] .aside-nav-group > summary:hover {
|
|
|
2951
2951
|
}
|
|
2952
2952
|
|
|
2953
2953
|
.aside-nav-group[open] > summary {
|
|
2954
|
-
background: color-mix(in srgb, var(--q-color-starlight), transparent
|
|
2954
|
+
background: color-mix(in srgb, var(--q-color-starlight), transparent 85%);
|
|
2955
2955
|
color: var(--q-color-starlight);
|
|
2956
2956
|
}
|
|
2957
2957
|
|