@dodlhuat/basix 1.3.1 → 1.3.3

package/css/style.css

@@ -500,7 +500,6 @@ a:focus-visible {
   padding: 2rem;
 }
 
-/* Controls */
 .table-controls {
   display: flex;
   justify-content: space-between;
@@ -510,7 +509,6 @@ a:focus-visible {
   gap: 0.75rem;
 }
 
-/* Table Styles */
 .table-wrapper {
   overflow-x: auto;
   border: 1px solid var(--divider);
@@ -578,7 +576,6 @@ tbody tr:hover {
   background-color: var(--hover);
 }
 
-/* Pagination */
 .pagination {
   display: flex;
   justify-content: space-between;
@@ -630,7 +627,6 @@ tbody tr:hover {
   cursor: not-allowed;
 }
 
-/* Mobile Responsive Styles */
 @media (max-width: 768px) {
   .table-controls {
     flex-direction: column;
@@ -1556,18 +1552,16 @@ input.input-lg, textarea.input-lg {
   width: 100%;
   overflow: auto;
   box-sizing: border-box;
-}
-.scroll-container .viewport .content {
-  margin: 0;
-  margin-right: calc(var(--track-width) + var(--track-gap));
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 .scroll-container .viewport::-webkit-scrollbar {
   width: 0;
   height: 0;
 }
-.scroll-container .viewport {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+.scroll-container .viewport .content {
+  margin: 0;
+  margin-right: calc(var(--track-width) + var(--track-gap));
 }
 .scroll-container .scrollbar {
   position: absolute;
@@ -3855,7 +3849,7 @@ ul.tree li {
   user-select: none;
   box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
   display: none;
-  position: absolute;
+  position: fixed;
   z-index: 1000;
   box-sizing: border-box;
 }
@@ -3926,7 +3920,7 @@ ul.tree li {
   font-size: 1rem;
   cursor: pointer;
   border-radius: 0.4rem;
-  transition: all 0.2s;
+  transition: background-color 0.2s, color 0.2s;
 }
 
 .datepicker-day:hover:not(.disabled) {
@@ -3986,7 +3980,7 @@ ul.tree li {
   font-size: 0.9rem;
   cursor: pointer;
   border-radius: 0.4rem;
-  transition: all 0.2s;
+  transition: background-color 0.2s, color 0.2s;
 }
 
 .datepicker-month:hover,
@@ -4028,7 +4022,6 @@ ul.tree li {
   background-color: var(--accent-color-lighten);
 }
 
-/* Time Picker */
 .datepicker-time {
   display: flex;
   align-items: center;
@@ -4102,7 +4095,6 @@ ul.tree li {
   outline-offset: -1px;
 }
 
-/* Set Button */
 .datepicker-set-btn {
   width: 100%;
   padding: 0.5rem 1rem;
@@ -4121,7 +4113,6 @@ ul.tree li {
   opacity: 0.9;
 }
 
-/* Mobile Responsiveness */
 @media (max-width: 640px) {
   .datepicker-backdrop {
     position: fixed;
@@ -4164,9 +4155,6 @@ ul.tree li {
     padding: 0.75rem 0;
   }
 }
-/* Flyout menu uses its own dark palette intentionally —
-   it renders over any background regardless of light/dark mode.
-   Scoped here rather than polluting :root. */
 .flyout-menu,
 .flyout-overlay,
 .site-header,
@@ -4192,7 +4180,6 @@ body {
   min-height: 100vh;
 }
 
-/* Header */
 .site-header {
   display: flex;
   justify-content: space-between;
@@ -4246,7 +4233,6 @@ body {
   font-size: 1.2rem;
 }
 
-/* Flyout Overlay */
 .flyout-overlay {
   position: fixed;
   top: 0;
@@ -4266,22 +4252,19 @@ body {
   visibility: visible;
 }
 
-/* Flyout Menu Base */
 .flyout-menu {
   position: fixed;
-  background: var(--flyout-bg);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
+  background: rgba(10, 15, 30, 0.82);
+  backdrop-filter: blur(28px) saturate(1.4);
+  -webkit-backdrop-filter: blur(28px) saturate(1.4);
   z-index: 210;
   display: flex;
   flex-direction: column;
-  padding: 2rem;
-  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+  padding: 1.75rem 1.5rem;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 32px 80px rgba(0, 0, 0, 0.6);
   transition: transform var(--transition-speed) cubic-bezier(0.25, 1, 0.5, 1);
-  /* Smoother rollout */
 }
 
-/* Directional Variants */
 .flyout-from-right {
   top: 0;
   right: 0;
@@ -4304,37 +4287,53 @@ body {
   transform: translate(0, 0);
 }
 
-/* Flyout Header */
 .flyout-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 3rem;
+  margin-bottom: 2.5rem;
+  padding-bottom: 1.25rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
 }
 
 .flyout-title {
-  font-size: 1.25rem;
+  font-size: 0.65rem;
   font-weight: 600;
-  color: #94a3b8;
+  color: rgba(255, 255, 255, 0.35);
   text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.14em;
 }
 
 .close-menu {
   background: none;
   border: none;
-  color: var(--flyout-text);
+  color: rgba(255, 255, 255, 0.4);
   cursor: pointer;
-  padding: 0.5rem;
-  transition: transform 0.2s, color 0.2s;
+  padding: 0.3rem;
+  line-height: 0;
+  transition: color 0.2s;
 }
 
 .close-menu:hover {
-  transform: rotate(90deg);
-  color: var(--accent-color);
+  color: #fff;
+}
+
+.flyout-menu button {
+  display: flex;
+  padding: 0;
+  border-radius: 0;
+  background: none;
+  font-size: inherit;
+  font-weight: inherit;
+  white-space: normal;
+  transition: color 0.2s;
+}
+.flyout-menu button:hover:not(:disabled), .flyout-menu button:active:not(:disabled), .flyout-menu button.active {
+  background: none;
+  transform: none;
+  box-shadow: none;
 }
 
-/* Flyout Links */
 .flyout-links {
   list-style: none;
   flex-grow: 1;
@@ -4355,7 +4354,7 @@ body {
   border: none;
   font-size: 2rem;
   font-weight: 600;
-  color: var(--flyout-text);
+  color: rgba(255, 255, 255, 0.6);
   text-decoration: none;
   cursor: pointer;
   font-family: inherit;
@@ -4371,38 +4370,40 @@ body {
   transform: translateY(0);
 }
 
-.flyout-links a:hover,
-.submenu-toggle:hover {
+.flyout-links > li > a:hover,
+.flyout-links > li > .submenu-toggle:hover {
+  color: #fff;
+}
+
+.submenu-toggle.active {
   color: var(--accent-color);
 }
 
 .chevron {
-  transition: transform 0.3s;
-  opacity: 0.7;
+  flex-shrink: 0;
+  opacity: 0.5;
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
 }
 
 .submenu-toggle.active .chevron {
   transform: rotate(180deg);
+  opacity: 1;
 }
 
-/* Submenu */
 .submenu {
   list-style: none;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease-out;
   padding-left: 1rem;
-  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  border-left: 1px solid rgba(255, 255, 255, 0.15);
   margin-top: 0;
 }
 
 .submenu.is-open {
   max-height: 500px;
-  /* Reduced from 2000px for tighter animation */
-  /* Arbitrary large height, increased for nesting */
   margin-top: 1rem;
   transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-  /* Smoother easing */
 }
 
 .submenu li {
@@ -4412,30 +4413,36 @@ body {
 .submenu a {
   font-size: 1.25rem;
   font-weight: 400;
-  color: #cbd5e1;
+  color: rgba(255, 255, 255, 0.45);
   transform: none !important;
-  /* Override slide-in for submenu items */
+  transition: color 0.2s !important;
   transition-delay: 0s !important;
 }
+.submenu a:hover {
+  color: #fff;
+}
 
 .submenu .submenu-toggle {
   font-size: 1.25rem;
   font-weight: 400;
-  color: #cbd5e1;
+  color: rgba(255, 255, 255, 0.45);
   transform: none !important;
   transition-delay: 0s !important;
   padding: 0;
   margin: 0;
 }
+.submenu .submenu-toggle:hover {
+  color: #fff;
+}
 
-/* Flyout Footer */
 .flyout-footer {
-  padding-top: 2rem;
-  border-top: 1px solid var(--flyout-border);
-  color: #64748b;
-  font-size: 0.9rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.07);
+  color: rgba(255, 255, 255, 0.25);
+  font-size: 0.72rem;
+  letter-spacing: 0.03em;
   opacity: 0;
-  transform: translateY(20px);
+  transform: translateY(12px);
   transition: opacity 0.4s, transform 0.4s;
   transition-delay: var(--delay);
 }
@@ -4445,7 +4452,6 @@ body {
   transform: translateY(0);
 }
 
-/* Mobile Responsiveness */
 @media (max-width: 480px) {
   :root {
     --menu-width: 100%;
@@ -4453,7 +4459,6 @@ body {
   .main-content h1 {
     font-size: 2rem;
   }
-  /* Force Fullscreen for all directions */
   .flyout-from-right,
   .flyout-from-left,
   .flyout-from-top {
@@ -4464,22 +4469,12 @@ body {
     right: auto !important;
     bottom: auto !important;
     border: none !important;
-    /* Remove borders for cleaner fullscreen look */
     border-right: 1px solid var(--flyout-border) !important;
-    /* Add consistent right border */
-    transform: translateX(-100%) !important;
-    /* Force ALL to slide from LEFT with !important */
-  }
-  /* Remove specific transforms and force left slide */
-  .flyout-from-right,
-  .flyout-from-left,
-  .flyout-from-top {
     transform: translateX(-100%) !important;
   }
   .flyout-menu.is-open {
     transform: translate(0, 0) !important;
   }
-  /* Reset Top Menu Horizontal Layout to Vertical for Mobile */
   .flyout-from-top .flyout-links {
     flex-direction: column;
     align-items: stretch;
@@ -4491,7 +4486,6 @@ body {
   .flyout-from-top .flyout-links > li > a,
   .flyout-from-top .flyout-links > li > .submenu-toggle {
     font-size: 2rem;
-    /* Restore larger size */
     justify-content: space-between;
   }
   .flyout-from-top .submenu {
@@ -4513,7 +4507,6 @@ body {
   .flyout-from-top .submenu a {
     font-size: 1.25rem;
     justify-content: space-between;
-    /* Match default behavior */
   }
 }
 .tabs-container {
@@ -5102,7 +5095,6 @@ body {
   color: #d4d4d4;
 }
 
-/* Syntax Highlighting — VS Code Dark+ palette */
 .keyword {
   color: #569cd6;
 }
@@ -5917,6 +5909,8 @@ body {
   border-radius: 99px;
   overflow: visible;
   position: relative;
+  touch-action: none;
+  user-select: none;
 }
 
 .timespan-bar-fill {
@@ -5926,10 +5920,24 @@ body {
   height: 100%;
   background: var(--accent-color);
   border-radius: inherit;
+  touch-action: none;
   transition: left 0.3s cubic-bezier(0.2, 0, 0, 1), width 0.3s cubic-bezier(0.2, 0, 0, 1);
 }
-.timespan-bar-fill::before, .timespan-bar-fill::after {
-  content: "";
+.timespan-bar-fill.is-active {
+  cursor: grab;
+}
+.timespan-bar-fill.is-active:active {
+  cursor: grabbing;
+}
+.timespan-picker.is-error ~ .timespan-bar .timespan-bar-fill {
+  background: var(--error);
+}
+
+.timespan-bar.is-dragging .timespan-bar-fill {
+  transition: none;
+}
+
+.timespan-handle {
   position: absolute;
   top: 50%;
   width: 12px;
@@ -5938,23 +5946,29 @@ body {
   background: var(--accent-color);
   border: 2px solid var(--background);
   transform: translateY(-50%);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  cursor: ew-resize;
+  touch-action: none;
   opacity: 0;
+  pointer-events: none;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
 }
-.timespan-bar-fill::before {
-  left: -6px;
+.timespan-bar-fill.is-active .timespan-handle {
+  opacity: 1;
+  pointer-events: auto;
 }
-.timespan-bar-fill::after {
-  right: -6px;
+.timespan-handle:hover {
+  transform: translateY(-50%) scale(1.3);
+  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-color) 15%, transparent);
 }
-.timespan-bar-fill[style*=width]:not([style*="width: 0"]):not([style*="width:0"])::before, .timespan-bar-fill[style*=width]:not([style*="width: 0"]):not([style*="width:0"])::after {
-  opacity: 1;
+.timespan-handle.timespan-handle-start {
+  left: -6px;
 }
-.timespan-picker.is-error ~ .timespan-bar .timespan-bar-fill {
-  background: var(--error);
+.timespan-handle.timespan-handle-end {
+  right: -6px;
+  left: auto;
 }
-.timespan-picker.is-error ~ .timespan-bar .timespan-bar-fill::before, .timespan-picker.is-error ~ .timespan-bar .timespan-bar-fill::after {
+.timespan-picker.is-error ~ .timespan-bar .timespan-handle {
   background: var(--error);
 }
 
@@ -6103,7 +6117,6 @@ body {
   cursor: not-allowed;
 }
 
-/* ── Editor Component ───────────────────────────────────────────────── */
 .editor {
   background: var(--secondary-background);
   border: 1px solid var(--divider);
@@ -6114,7 +6127,6 @@ body {
   overflow: hidden;
 }
 
-/* ── Toolbar ───────────────────────────────────────────────────────── */
 .editor-toolbar {
   display: flex;
   align-items: center;
@@ -6130,7 +6142,6 @@ body {
   display: none;
 }
 
-/* SVG icon sizing */
 .editor-toolbar .icon-svg {
   fill: currentColor;
   display: block;
@@ -6140,7 +6151,6 @@ body {
   flex-shrink: 0;
 }
 
-/* Button base */
 .editor-toolbar button {
   display: inline-flex;
   align-items: center;
@@ -6183,7 +6193,6 @@ body {
   background: var(--accent-color);
 }
 
-/* Button clusters — pill-shaped groups */
 .toolbar-group {
   display: flex;
   align-items: center;
@@ -6197,7 +6206,6 @@ body {
   border-radius: 0.18rem;
 }
 
-/* Block-format select — reset all global form overrides */
 .editor-block-select {
   width: auto;
   flex-shrink: 0;
@@ -6230,13 +6238,11 @@ body {
   font-weight: 400;
 }
 
-/* Separators: invisible spacers — visual grouping comes from .toolbar-group */
 .toolbar-separator {
   width: 0.35rem;
   flex-shrink: 0;
 }
 
-/* Right-pinned actions */
 .toolbar-end {
   display: flex;
   align-items: center;
@@ -6249,7 +6255,6 @@ body {
   display: none;
 }
 
-/* Variant button states — scoped to avoid !important */
 .editor-toolbar button.toolbar-btn-accent {
   background: color-mix(in srgb, var(--accent-color) 10%, transparent);
   color: var(--accent-color);
@@ -6263,7 +6268,6 @@ body {
   color: var(--error);
 }
 
-/* ── Editor Body ───────────────────────────────────────────────────── */
 .editor-body {
   display: flex;
   flex: 1;
@@ -6357,7 +6361,6 @@ body {
   font-weight: 700;
 }
 
-/* ── Side Panel ────────────────────────────────────────────────────── */
 .editor-side {
   width: 320px;
   min-width: 240px;
@@ -6503,7 +6506,6 @@ body {
   text-underline-offset: 2px;
 }
 
-/* ── Footer ────────────────────────────────────────────────────────── */
 .editor-footer {
   display: flex;
   align-items: center;
@@ -6547,7 +6549,6 @@ body {
   box-shadow: 0 1px 0 var(--divider);
 }
 
-/* ── Responsive ────────────────────────────────────────────────────── */
 @media screen and (max-width: 768px) {
   .editor-body {
     flex-direction: column;
@@ -6591,7 +6592,6 @@ body {
     display: none;
   }
 }
-/* ── Link Popover ──────────────────────────────────────────────────── */
 .editor-link-popover {
   display: flex;
   flex-direction: column;
@@ -6911,9 +6911,10 @@ body {
   color: var(--secondary-text);
   transition: color 0.1s ease;
 }
-.context-menu-item .context-menu-icon .icon-svg {
+.context-menu-item .context-menu-icon svg {
   width: 1rem;
   height: 1rem;
+  fill: currentColor;
 }
 .context-menu-item .context-menu-label {
   flex: 1;
@@ -6937,25 +6938,14 @@ body {
   margin-left: 0.25rem;
   color: var(--secondary-text);
 }
-.context-menu-item:hover, .context-menu-item.is-focused {
-  background: var(--secondary-background);
-  color: var(--accent-color);
-}
-.context-menu-item:hover .context-menu-icon, .context-menu-item.is-focused .context-menu-icon {
-  color: var(--accent-color);
-}
-.context-menu-item:hover .context-menu-chevron, .context-menu-item.is-focused .context-menu-chevron {
-  color: var(--accent-color);
-  opacity: 0.8;
-}
-.context-menu-item.is-active {
+.context-menu-item:hover, .context-menu-item.is-focused, .context-menu-item.is-active {
   background: var(--secondary-background);
   color: var(--accent-color);
 }
-.context-menu-item.is-active .context-menu-icon {
+.context-menu-item:hover .context-menu-icon, .context-menu-item.is-focused .context-menu-icon, .context-menu-item.is-active .context-menu-icon {
   color: var(--accent-color);
 }
-.context-menu-item.is-active .context-menu-chevron {
+.context-menu-item:hover .context-menu-chevron, .context-menu-item.is-focused .context-menu-chevron, .context-menu-item.is-active .context-menu-chevron {
   color: var(--accent-color);
   opacity: 0.8;
 }
@@ -9017,3 +9007,5 @@ body {
   display: flex;
   gap: 1.25rem;
 }
+
+/*# sourceMappingURL=style.css.map */