@howssatoshi/quantumcss 1.11.2 → 1.11.4

package/src/styles/quantum-components.css

@@ -253,9 +253,9 @@ html[data-theme="light"] .input:disabled {
 }
 
 .badge-primary {
-  background-color: rgb(0 212 255 / 15%);
-  color: #00d4ff;
-  border-color: rgb(0 212 255 / 30%);
+  background-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 85%);
+  color: var(--q-color-starlight-blue);
+  border-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
 }
 
 .badge-secondary {
@@ -1568,6 +1568,35 @@ html[data-theme="light"] .table-premium-footer {
   border-top-color: var(--q-light-card-border);
 }
 
+/* Mobile Responsive for Premium Table */
+@media (max-width: 640px) {
+  .table-premium-header {
+    flex-direction: column;
+    gap: var(--q-space-3);
+    padding: var(--q-space-3) var(--q-space-4);
+  }
+
+  .table-premium-title {
+    font-size: 1rem;
+  }
+
+  .table-premium-filters {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .table-premium th,
+  .table-premium td {
+    padding: var(--q-space-2) var(--q-space-3);
+  }
+
+  .table-premium-footer {
+    flex-direction: column;
+    gap: var(--q-space-2);
+    padding: var(--q-space-3) var(--q-space-4);
+  }
+}
+
 /* ============================================================================
    LIST COMPONENT
    ============================================================================ */
@@ -1761,6 +1790,26 @@ html[data-theme="light"] .list-divider {
   overflow-y: auto;
 }
 
+/* Touch Slide - Horizontal scroll with touch swipe support */
+.touch-slide {
+  display: flex;
+  gap: var(--q-space-2, 0.5rem);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.touch-slide::-webkit-scrollbar {
+  display: none;
+}
+
+.touch-slide > * {
+  flex-shrink: 0;
+  scroll-snap-align: start;
+}
+
 /* ============================================================================
    APP LAYOUT PATTERNS
    Standardized layout components for dashboard and admin applications
@@ -1832,6 +1881,22 @@ html[data-theme="light"] .top-nav {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 2rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  .page-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+  }
+  .page-header > div:first-child {
+    min-width: 0;
+  }
+  .page-header .page-actions {
+    justify-content: flex-start;
+  }
 }
 
 .page-title {
@@ -1854,6 +1919,18 @@ html[data-theme="light"] .top-nav {
   gap: 0.75rem;
 }
 
+@media (max-width: 768px) {
+  .page-actions {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    padding-bottom: 0.25rem;
+  }
+  .page-actions::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 html[data-theme="light"] .page-title {
   color: #0f172a;
 }
@@ -1886,12 +1963,6 @@ html[data-theme="light"] .sidebar {
   
   .main-content {
   }
-  
-  .page-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-  }
 }
 
 /* ============================================================================

package/src/styles/starlight.css

@@ -26,17 +26,28 @@ html[data-theme="light"] a:hover {
 }
 
 h1 {
-    font-size: 3rem; /* text-5xl */
+    font-size: 2rem;
     font-weight: 700;
-    line-height: 1.25; /* leading-tight */
-    letter-spacing: -0.05em; /* tracking-tighter */
+    line-height: 1.2;
+    letter-spacing: -0.025em;
     margin: 0;
-    white-space: nowrap;
+}
+
+@media (min-width: 640px) {
+    h1 {
+        font-size: 2.5rem;
+    }
 }
 
 @media (min-width: 768px) {
     h1 {
-        font-size: 4rem; /* text-7xl */
+        font-size: 3rem;
+    }
+}
+
+@media (min-width: 1024px) {
+    h1 {
+        font-size: 3.5rem;
     }
 }
 
@@ -533,7 +544,7 @@ html[data-theme="light"] .radio-starlight {
     padding: 0.5rem 0.75rem;
     background-color: rgb(10 10 30 / 98%);
     backdrop-filter: blur(12px);
-    border: 1px solid rgb(0 212 255 / 30%);
+    border: 1px solid color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
     border-radius: 0.5rem;
     color: #f1f5f9;
     font-size: 0.75rem;
@@ -1026,7 +1037,7 @@ html[data-theme="light"] .code-window-title {
 
 .accordion .accordion-icon {
     color: var(--q-color-starlight-blue);
-    filter: drop-shadow(0 0 5px rgb(0 212 255 / 50%));
+    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--q-color-starlight-blue), transparent 50%));
 }
 
 html[data-theme="light"] .accordion.accordion-item {
@@ -1668,8 +1679,8 @@ html[data-theme="light"] .dialog-content .bg-black_40 {
 /* 18. Semantic Typography Utilities */
 .text-glow {
     text-shadow:
-        0 0 10px rgb(0 212 255 / 50%),
-        0 0 20px rgb(0 212 255 / 60%);
+        0 0 10px color-mix(in srgb, var(--q-color-starlight-blue), transparent 50%),
+        0 0 20px color-mix(in srgb, var(--q-color-starlight-blue), transparent 40%);
 }
 
 .text-glass {
@@ -1679,7 +1690,7 @@ html[data-theme="light"] .dialog-content .bg-black_40 {
 }
 
 html[data-theme="light"] .text-glow {
-    text-shadow: 0 0 8px rgb(0 212 255 / 30%);
+    text-shadow: 0 0 8px color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
 }
 
 html[data-theme="light"] .text-glass {
@@ -1808,8 +1819,8 @@ html[data-theme="light"] .starlight-loading {
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: rgb(0 212 255 / 30%);
-    box-shadow: 0 0 10px rgb(0 212 255 / 60%);
+    background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--q-color-starlight-blue), transparent 40%);
 }
 
 html[data-theme="light"] ::-webkit-scrollbar-track {
@@ -1916,7 +1927,7 @@ form button:not([class]),
     padding: 0.75rem 1.5rem;
     cursor: pointer;
     transition: all 0.2s ease;
-    box-shadow: 0 0 20px rgb(0 212 255 / 30%);
+    box-shadow: 0 0 20px var(--q-color-starlight-glow);
     text-decoration: none;
 }
 
@@ -1924,7 +1935,7 @@ form button:not([class]):hover,
 .btn-starlight:hover {
     transform: translateY(-2px);
     filter: brightness(1.1);
-    box-shadow: 0 0 30px rgb(0 212 255 / 50%);
+    box-shadow: 0 0 30px color-mix(in srgb, var(--q-color-starlight-blue), transparent 50%);
 }
 
 form button:not([class]):active,
@@ -1937,7 +1948,7 @@ form button:not([class]):focus-visible,
 .btn-starlight:focus-visible {
     outline: 2px solid white;
     outline-offset: 2px;
-    box-shadow: 0 0 0 4px rgb(0 212 255 / 30%);
+    box-shadow: 0 0 0 4px var(--q-color-starlight-glow);
 }
 
 html[data-theme="light"] form button:not([class]):focus-visible,
@@ -2146,7 +2157,7 @@ html[data-theme="light"] .btn-starlight:focus-visible {
     width: 2.5rem;
     height: 2.5rem;
     border-radius: var(--q-radius-lg);
-    background: rgb(0 212 255 / 15%);
+    background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 85%);
     color: var(--q-color-starlight-blue);
 }
 
@@ -2420,7 +2431,7 @@ html[data-theme="light"] .btn-starlight:focus-visible {
 }
 
 .starlight-chart-tab.active {
-    background: rgb(0 212 255 / 15%);
+    background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 85%);
     color: var(--q-color-starlight-blue);
 }
 
@@ -2590,6 +2601,18 @@ html[data-theme="light"] .btn-starlight:focus-visible {
     gap: 0.75rem;
 }
 
+@media (max-width: 768px) {
+    .starlight-page-actions {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+        padding-bottom: 0.25rem;
+    }
+    .starlight-page-actions::-webkit-scrollbar {
+        display: none;
+    }
+}
+
 /* ============================================
    STARLIGHT LAYOUT - Zero-Boilerplate Atmospheric
    ============================================ */
@@ -2701,6 +2724,10 @@ footer .right a:hover {
     -webkit-backdrop-filter: blur(16px);
 }
 
+.aside-nav-trigger {
+    display: none;
+}
+
 html[data-theme="light"] .aside-nav {
     background: rgba(255, 255, 255, 0.95);
     border-right-color: rgba(0, 0, 0, 0.08);
@@ -3000,6 +3027,9 @@ html[data-theme="light"] .aside-nav-divider {
     padding: 0.75rem;
     border-top: 1px solid rgba(255, 255, 255, 0.08);
     flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
 html[data-theme="light"] .aside-nav-footer {
@@ -3043,6 +3073,26 @@ html[data-theme="light"] .aside-nav-user:hover {
     flex-shrink: 0;
 }
 
+.aside-nav-user-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    overflow: hidden;
+}
+
+.aside-nav-user-action {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    border-radius: 7px;
+    transition: background 0.12s;
+    cursor: pointer;
+}
+
+.aside-nav-user-action:hover {
+    background: rgba(255, 255, 255, 0.06);
+}
+
 .aside-nav-user-info strong {
     display: block;
     font-size: 0.825rem;
@@ -3203,22 +3253,50 @@ html[data-theme="light"] .aside-nav.aside-nav-icons .aside-nav-icon {
         min-width: 64px;
     }
 
-    .aside-nav .aside-nav-brand,
+    .aside-nav details > *:not(summary) {
+        display: none;
+    }
+
+    .aside-nav details > summary {
+        justify-content: center;
+        padding: 0.625rem;
+    }
+
+    .aside-nav details[open] > *:not(summary) {
+        display: none;
+    }
+
+    /* Hide all text in icon-only mode (1280px and below) */
     .aside-nav .aside-nav-label,
-    .aside-nav .aside-nav-item span:not(.aside-nav-badge),
-    .aside-nav .aside-nav-group > summary span,
-    .aside-nav
-        .aside-nav-group
-        > summary
-        > svg:not(.aside-nav-item-icon):not(.aside-nav-chevron),
-    .aside-nav .aside-nav-chevron,
-    .aside-nav .aside-nav-sub,
+    .aside-nav .nav-logo span,
+    .aside-nav .aside-nav-brand,
+    .aside-nav .aside-nav-brand *,
     .aside-nav .aside-nav-user-info,
-    .aside-nav .aside-nav-user-action {
-        display: none;
+    .aside-nav .aside-nav-item span:not(.aside-nav-badge),
+    .aside-nav details > summary > span,
+    .aside-nav details > summary > svg:not(.aside-nav-item-icon) {
+        display: none !important;
+    }
+
+    /* Ensure icons are visible */
+    .aside-nav .aside-nav-item-icon,
+    .aside-nav summary > svg.aside-nav-item-icon,
+    .aside-nav .aside-nav-user-avatar,
+    .aside-nav .aside-nav-user-action,
+    .aside-nav .nav-logo i {
+        display: flex !important;
     }
 
     .aside-nav .aside-nav-header {
+        justify-content: center;
+    }
+
+    .aside-nav .aside-nav-user-avatar {
+        display: flex;
+        justify-content: center;
+    }
+
+    .aside-nav .aside-nav-user {
         padding: 1rem 0;
         justify-content: center;
         border-bottom: none;
@@ -3227,6 +3305,28 @@ html[data-theme="light"] .aside-nav.aside-nav-icons .aside-nav-icon {
         gap: 0.5rem;
     }
 
+    .aside-nav .aside-nav-user + .aside-nav-user-action {
+        margin-top: 0.5rem;
+    }
+
+    .aside-nav.aside-nav-icons .aside-nav-footer {
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .aside-nav .aside-nav-user-action {
+        justify-content: center;
+    }
+
+    .aside-nav .aside-nav-user > .ml-auto {
+        margin-left: 0;
+        margin-inline-start: auto;
+    }
+
+    .aside-nav .aside-nav-user-action {
+        display: flex;
+    }
+
     .aside-nav .aside-nav-icon {
         width: 32px;
         height: 32px;
@@ -3283,6 +3383,9 @@ html[data-theme="light"] .aside-nav.aside-nav-icons .aside-nav-icon {
     .aside-nav .aside-nav-footer {
         padding: 0.5rem;
         border-top: none;
+        justify-content: center;
+        flex-direction: column;
+        gap: 0.75rem;
     }
 
     .aside-nav .aside-nav-user {
@@ -3300,6 +3403,40 @@ html[data-theme="light"] .aside-nav.aside-nav-icons .aside-nav-icon {
 }
 
 @media (max-width: 768px) {
+    .aside-nav-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        padding: 0.75rem;
+        z-index: 201;
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+
+    .aside-nav-trigger-icon {
+        width: 20px;
+        height: 14px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .aside-nav-trigger-icon span {
+        display: block;
+        height: 2px;
+        width: 100%;
+        background: var(--q-text-primary);
+        border-radius: 2px;
+        transition: all 0.3s ease;
+    }
+
+    #sidebar-toggle-mobile:checked ~ .aside-nav {
+        transform: translateX(0);
+    }
+
     .aside-nav {
         position: fixed;
         top: 0;
@@ -3310,15 +3447,50 @@ html[data-theme="light"] .aside-nav.aside-nav-icons .aside-nav-icon {
         box-shadow: 4px 0 32px rgba(0, 0, 0, 0.4);
         z-index: 200;
         transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        display: flex; /* Override display: none to allow transform */
+        display: flex;
+        flex-direction: column;
     }
 
-    /* Restore visibility of labels and text in mobile drawer */
-    .aside-nav .aside-nav-brand,
+    .aside-nav .aside-nav-header {
+        order: -1;
+        justify-content: flex-start;
+    }
+
+    /* Restore visibility in mobile drawer - override 1280px rules */
     .aside-nav .aside-nav-label,
+    .aside-nav .nav-logo span,
+    .aside-nav .aside-nav-brand,
+    .aside-nav .aside-nav-user-info,
     .aside-nav .aside-nav-item span:not(.aside-nav-badge),
-    .aside-nav .aside-nav-user-info {
+    .aside-nav details > summary > span,
+    .aside-nav details > summary > svg:not(.aside-nav-item-icon),
+    .aside-nav .aside-nav-user-avatar,
+    .aside-nav .aside-nav-user-action {
+        display: flex !important;
+    }
+
+    .aside-nav .aside-nav-brand strong,
+    .aside-nav .aside-nav-brand span {
+        display: block !important;
+    }
+
+    .aside-nav details > *:not(summary) {
+        display: flex !important;
+    }
+
+    .aside-nav details[open] > .aside-nav-sub {
+        display: flex !important;
+    }
+
+    .aside-nav details summary svg {
+        display: inline-flex !important;
+    }
+
+    .aside-nav .aside-nav-badge {
         display: flex;
+        align-self: center;
+        margin-left: auto;
+        position: static;
     }
 
     .aside-nav .aside-nav-header {
@@ -3330,6 +3502,11 @@ html[data-theme="light"] .aside-nav.aside-nav-icons .aside-nav-icon {
         border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     }
 
+    .aside-nav .aside-nav-header .aside-nav-brand {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
     .aside-nav .aside-nav-icon {
         width: 34px;
         height: 34px;
@@ -3342,10 +3519,20 @@ html[data-theme="light"] .aside-nav.aside-nav-icons .aside-nav-icon {
 
     .aside-nav .aside-nav-user {
         justify-content: flex-start;
+        flex-direction: row;
+    }
+
+    .aside-nav .aside-nav-user-action {
+        justify-content: flex-start;
+    }
+
+    .aside-nav .aside-nav-footer {
+        justify-content: flex-start;
     }
 
     /* show sidebar when checked */
-    #sidebar-toggle:checked ~ .app-layout .aside-nav {
+    #sidebar-toggle:checked ~ .app-layout .aside-nav,
+    #sidebar-toggle-mobile:checked ~ .aside-nav {
         transform: translateX(0);
     }
 
@@ -3359,7 +3546,8 @@ html[data-theme="light"] .aside-nav.aside-nav-icons .aside-nav-icon {
         pointer-events: none;
         transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     }
-    #sidebar-toggle:checked ~ .app-layout .aside-overlay {
+    #sidebar-toggle:checked ~ .app-layout .aside-overlay,
+    #sidebar-toggle-mobile:checked ~ .aside-overlay {
         background: rgba(0, 0, 0, 0.6);
         pointer-events: auto;
     }
@@ -3369,7 +3557,8 @@ html[data-theme="light"] .aside-nav.aside-nav-icons .aside-nav-icon {
 }
 
 /* Base hidden state for toggle */
-#sidebar-toggle {
+#sidebar-toggle,
+#sidebar-toggle-mobile {
     display: none;
 }
 .aside-overlay {