@howssatoshi/quantumcss 1.11.0 → 1.11.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.
Files changed (10) hide show
  1. package/README.md +1 -1
  2. package/dist/quantum.min.css +2 -2
  3. package/examples/admin-panel.html +9 -31
  4. package/examples/analytics-dashboard.html +2 -4
  5. package/examples/index.html +1 -1
  6. package/examples/portfolio.html +16 -0
  7. package/examples/video-streaming.html +1025 -757
  8. package/package.json +1 -1
  9. package/src/styles/quantum-components.css +2 -1
  10. package/src/styles/starlight.css +10 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@howssatoshi/quantumcss",
3
- "version": "1.11.0",
3
+ "version": "1.11.1",
4
4
  "description": "Advanced utility-first CSS framework with JIT generation and modern components",
5
5
  "main": "dist/quantum.min.css",
6
6
  "bin": {
package/src/styles/quantum-components.css CHANGED
@@ -907,7 +907,8 @@ html[data-theme="light"] .accordion-content {
907
907
  }
908
908
 
909
909
  .tab-button:hover {
910
- background-color: rgb(255 255 255 / 5%);
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
 
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 97%);
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 97%);
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 97%);
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 97%);
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 97%);
258
+ background: color-mix(in srgb, var(--q-color-starlight), transparent 85%);
259
259
  }
260
260
 
261
261
  .nav-link::after {
@@ -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 97%
983
+ transparent 85%
984
984
  );
985
985
  box-shadow:
986
986
  0 0 30px
@@ -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 97%);
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 97%);
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 97%);
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 97%);
2954
+ background: color-mix(in srgb, var(--q-color-starlight), transparent 85%);
2955
2955
  color: var(--q-color-starlight);
2956
2956
  }
2957
2957