@dodlhuat/basix 1.3.2 → 1.3.4

package/css/style.css

@@ -131,6 +131,10 @@ body {
   background: var(--divider);
 }
 
+.info-bg {
+  background: var(--accent-color);
+}
+
 html, body {
   overflow: auto;
 }
@@ -285,12 +289,13 @@ p {
 }
 
 code {
-  font-family: "Courier New", Courier, monospace;
+  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
   font-size: 0.875em;
-  background: var(--secondary-background);
-  border: 1px solid var(--divider);
-  padding: 0.15em 0.4em;
-  border-radius: 0.2rem;
+  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
+  color: var(--accent-color);
+  padding: 0.2em 0.45em;
+  border-radius: 0.4rem;
 }
 
 pre code {
@@ -405,7 +410,7 @@ ul li {
   list-style-type: disc;
 }
 ul li li {
-  list-style-type: circle;
+  list-style-type: "· ";
 }
 
 ol li {
@@ -415,8 +420,37 @@ ol li li {
   list-style-type: lower-latin;
 }
 
+li::marker {
+  color: var(--secondary-text);
+}
+
+ol li::marker {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  font-size: 0.875em;
+}
+
 li + li {
-  margin-top: 0.25em;
+  margin-top: 0.4em;
+}
+
+dl {
+  margin-bottom: 0.6666666667rem;
+}
+
+dt {
+  font-weight: 600;
+  color: var(--primary-text);
+  margin-top: 0.5rem;
+}
+dt:first-child {
+  margin-top: 0;
+}
+
+dd {
+  padding-left: 1.5rem;
+  color: var(--secondary-text);
+  margin-top: 0.15em;
 }
 
 hr {
@@ -500,7 +534,6 @@ a:focus-visible {
   padding: 2rem;
 }
 
-/* Controls */
 .table-controls {
   display: flex;
   justify-content: space-between;
@@ -510,7 +543,6 @@ a:focus-visible {
   gap: 0.75rem;
 }
 
-/* Table Styles */
 .table-wrapper {
   overflow-x: auto;
   border: 1px solid var(--divider);
@@ -578,7 +610,6 @@ tbody tr:hover {
   background-color: var(--hover);
 }
 
-/* Pagination */
 .pagination {
   display: flex;
   justify-content: space-between;
@@ -630,7 +661,6 @@ tbody tr:hover {
   cursor: not-allowed;
 }
 
-/* Mobile Responsive Styles */
 @media (max-width: 768px) {
   .table-controls {
     flex-direction: column;
@@ -1665,7 +1695,7 @@ button:focus-visible,
 }
 button.active,
 .button.active {
-  background: var(--divider);
+  background: var(--accent-color-tint);
   color: var(--accent-color);
 }
 button:disabled,
@@ -1812,7 +1842,7 @@ button.button-error:active:not(:disabled) {
 }
 [data-theme=dark] .button-success,
 [data-theme=dark] button.button-success {
-  color: var(--primary-text);
+  color: var(--background);
 }
 [data-theme=dark] .button-success:hover:not(:disabled),
 [data-theme=dark] button.button-success:hover:not(:disabled) {
@@ -1822,9 +1852,13 @@ button.button-error:active:not(:disabled) {
 [data-theme=dark] button.button-success:active:not(:disabled) {
   background: color-mix(in srgb, var(--success) 70%, white);
 }
+[data-theme=dark] .button-success.is-loading::after,
+[data-theme=dark] button.button-success.is-loading::after {
+  color: var(--background);
+}
 [data-theme=dark] .button-warning,
 [data-theme=dark] button.button-warning {
-  color: var(--primary-text);
+  color: var(--background);
 }
 [data-theme=dark] .button-warning:hover:not(:disabled),
 [data-theme=dark] button.button-warning:hover:not(:disabled) {
@@ -1834,9 +1868,13 @@ button.button-error:active:not(:disabled) {
 [data-theme=dark] button.button-warning:active:not(:disabled) {
   background: color-mix(in srgb, var(--warning) 70%, white);
 }
+[data-theme=dark] .button-warning.is-loading::after,
+[data-theme=dark] button.button-warning.is-loading::after {
+  color: var(--background);
+}
 [data-theme=dark] .button-error,
 [data-theme=dark] button.button-error {
-  color: var(--primary-text);
+  color: var(--background);
 }
 [data-theme=dark] .button-error:hover:not(:disabled),
 [data-theme=dark] button.button-error:hover:not(:disabled) {
@@ -1846,16 +1884,55 @@ button.button-error:active:not(:disabled) {
 [data-theme=dark] button.button-error:active:not(:disabled) {
   background: color-mix(in srgb, var(--error) 70%, white);
 }
-[data-theme=dark] .button-primary.is-loading::after,
-[data-theme=dark] button.button-primary.is-loading::after,
-[data-theme=dark] .button-success.is-loading::after,
-[data-theme=dark] button.button-success.is-loading::after,
-[data-theme=dark] .button-warning.is-loading::after,
-[data-theme=dark] button.button-warning.is-loading::after,
 [data-theme=dark] .button-error.is-loading::after,
 [data-theme=dark] button.button-error.is-loading::after {
+  color: var(--background);
+}
+[data-theme=dark] .button-primary.is-loading::after,
+[data-theme=dark] button.button-primary.is-loading::after {
+  color: var(--primary-text);
+}
+
+.button-sm,
+button.button-sm {
+  padding: 0.35rem 0.75rem;
+  font-size: 0.8125rem;
+}
+
+.button-lg,
+button.button-lg {
+  padding: 0.8rem 1.75rem;
+  font-size: 1.0625rem;
+}
+
+.button-outline,
+button.button-outline {
+  background: transparent;
+  border: 1px solid var(--divider);
   color: var(--primary-text);
 }
+.button-outline:hover:not(:disabled),
+button.button-outline:hover:not(:disabled) {
+  background: var(--hover);
+  border-color: color-mix(in srgb, var(--divider) 50%, var(--primary-text));
+}
+.button-outline:active:not(:disabled),
+button.button-outline:active:not(:disabled) {
+  background: var(--secondary-background);
+}
+
+.button-icon,
+button.button-icon {
+  padding: 0.5rem;
+  width: 2.25rem;
+  height: 2.25rem;
+  flex-shrink: 0;
+}
+
+.button-pill,
+button.button-pill {
+  border-radius: 1.6rem;
+}
 
 .modal-wrapper {
   position: fixed;
@@ -1936,6 +2013,42 @@ button.button-error:active:not(:disabled) {
   gap: 0.5rem;
 }
 
+.modal-success {
+  border-color: color-mix(in srgb, var(--success) 35%, transparent);
+}
+
+.modal-error {
+  border-color: color-mix(in srgb, var(--error) 35%, transparent);
+}
+
+.modal-warning {
+  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
+}
+
+.modal-info {
+  border-color: color-mix(in srgb, var(--accent-color) 35%, transparent);
+}
+
+.modal-success .close,
+.modal-error .close,
+.modal-warning .close,
+.modal-info .close {
+  color: rgba(255, 255, 255, 0.8);
+}
+.modal-success .close:hover,
+.modal-error .close:hover,
+.modal-warning .close:hover,
+.modal-info .close:hover {
+  color: #fff;
+}
+.modal-success .header,
+.modal-error .header,
+.modal-warning .header,
+.modal-info .header {
+  color: #fff;
+  border-bottom-color: rgba(255, 255, 255, 0.2);
+}
+
 @media screen and (max-width: 768px) {
   .modal-wrapper.is-visible .modal {
     transform: translateY(0);
@@ -3323,6 +3436,14 @@ nav li + li .push-menu-item {
   outline: none;
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 35%, transparent);
 }
+.chips .chip.clickable.selected {
+  background: color-mix(in srgb, var(--accent-color) 12%, var(--background));
+  color: var(--accent-color);
+  border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
+}
+.chips .chip.clickable.selected:hover {
+  background: color-mix(in srgb, var(--accent-color) 18%, var(--background));
+}
 .chips .chip.closeable {
   padding-right: 1.8rem;
 }
@@ -3509,6 +3630,16 @@ nav li + li .push-menu-item {
   background: var(--error);
 }
 
+[data-theme=dark] .badge-solid.badge-success {
+  color: var(--background);
+}
+[data-theme=dark] .badge-solid.badge-warning {
+  color: var(--background);
+}
+[data-theme=dark] .badge-solid.badge-error {
+  color: var(--background);
+}
+
 @keyframes stepper-pulse {
   0% {
     box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 35%, transparent);
@@ -3853,7 +3984,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;
 }
@@ -4026,7 +4157,6 @@ ul.tree li {
   background-color: var(--accent-color-lighten);
 }
 
-/* Time Picker */
 .datepicker-time {
   display: flex;
   align-items: center;
@@ -4100,7 +4230,6 @@ ul.tree li {
   outline-offset: -1px;
 }
 
-/* Set Button */
 .datepicker-set-btn {
   width: 100%;
   padding: 0.5rem 1rem;
@@ -4119,7 +4248,6 @@ ul.tree li {
   opacity: 0.9;
 }
 
-/* Mobile Responsiveness */
 @media (max-width: 640px) {
   .datepicker-backdrop {
     position: fixed;
@@ -4162,9 +4290,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,
@@ -4190,7 +4315,6 @@ body {
   min-height: 100vh;
 }
 
-/* Header */
 .site-header {
   display: flex;
   justify-content: space-between;
@@ -4244,7 +4368,6 @@ body {
   font-size: 1.2rem;
 }
 
-/* Flyout Overlay */
 .flyout-overlay {
   position: fixed;
   top: 0;
@@ -4264,21 +4387,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);
 }
 
-/* Directional Variants */
 .flyout-from-right {
   top: 0;
   right: 0;
@@ -4301,37 +4422,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;
@@ -4352,7 +4489,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;
@@ -4368,28 +4505,33 @@ 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;
 }
 
@@ -4406,29 +4548,36 @@ body {
 .submenu a {
   font-size: 1.25rem;
   font-weight: 400;
-  color: #cbd5e1;
-  transform: none !important; /* parent `.flyout-menu.is-open .flyout-links a` slides in; submenu items must not */
+  color: rgba(255, 255, 255, 0.45);
+  transform: none !important;
+  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);
 }
@@ -4438,7 +4587,6 @@ body {
   transform: translateY(0);
 }
 
-/* Mobile Responsiveness */
 @media (max-width: 480px) {
   :root {
     --menu-width: 100%;
@@ -4446,7 +4594,6 @@ body {
   .main-content h1 {
     font-size: 2rem;
   }
-  /* Force Fullscreen for all directions */
   .flyout-from-right,
   .flyout-from-left,
   .flyout-from-top {
@@ -4463,7 +4610,6 @@ body {
   .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;
@@ -4475,7 +4621,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 {
@@ -4497,7 +4642,6 @@ body {
   .flyout-from-top .submenu a {
     font-size: 1.25rem;
     justify-content: space-between;
-    /* Match default behavior */
   }
 }
 .tabs-container {
@@ -4519,6 +4663,7 @@ body {
 
 .tabs-list {
   display: flex;
+  align-items: center;
   margin: 0;
   padding: 0;
   overflow-x: auto;
@@ -4529,6 +4674,7 @@ body {
 }
 
 .tab-item {
+  margin-top: 0;
   padding: 0.75rem 1.25rem;
   cursor: pointer;
   font-size: 0.875rem;
@@ -4547,6 +4693,11 @@ body {
   font-weight: 600;
   border-bottom-color: var(--accent-color);
 }
+.tab-item:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: -2px;
+  border-radius: 0.4rem 0.4rem 0 0;
+}
 
 .tabs-content {
   padding: 1.5rem;
@@ -4566,6 +4717,7 @@ body {
 }
 .tabs-container.tabs-vertical .tabs-list {
   flex-direction: column;
+  align-items: stretch;
 }
 .tabs-container.tabs-vertical .tab-item {
   width: 100%;
@@ -4577,6 +4729,9 @@ body {
   border-left-color: var(--accent-color);
   font-weight: 600;
 }
+.tabs-container.tabs-vertical .tab-item:focus-visible {
+  border-radius: 0 0.4rem 0.4rem 0;
+}
 .tabs-container.tabs-vertical .tabs-content {
   flex: 1;
 }
@@ -4603,8 +4758,33 @@ body {
   color: #fff;
   border-bottom-color: transparent;
 }
+.tabs-container.tabs-pills .tab-item:focus-visible {
+  border-radius: 2rem;
+}
 
 @media (max-width: 768px) {
+  .tab-item {
+    padding: 0.875rem 1.25rem;
+  }
+  .tabs-content {
+    padding: 1rem;
+  }
+  .tabs-header {
+    position: relative;
+  }
+  .tabs-header::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 1px;
+    width: 2.5rem;
+    background: linear-gradient(to right, transparent, var(--primary-bg));
+    pointer-events: none;
+  }
+  .tabs-container.tabs-pills .tabs-header::after {
+    bottom: 0;
+  }
   .tabs-container.tabs-vertical {
     flex-direction: column;
   }
@@ -4616,6 +4796,7 @@ body {
   .tabs-container.tabs-vertical .tabs-list {
     flex-direction: row;
     overflow-x: auto;
+    align-items: center;
   }
   .tabs-container.tabs-vertical .tab-item {
     width: auto;
@@ -5086,7 +5267,6 @@ body {
   color: #d4d4d4;
 }
 
-/* Syntax Highlighting — VS Code Dark+ palette */
 .keyword {
   color: #569cd6;
 }
@@ -5455,6 +5635,16 @@ body {
   pointer-events: auto;
   transform: translateY(0);
 }
+.dropdown-container.drop-up > .dropdown-menu {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 6px;
+  transform: translateY(8px);
+}
+.dropdown-container.drop-up.active > .dropdown-menu {
+  transform: translateY(0);
+}
 .dropdown-container .dropdown-menu {
   position: absolute;
   top: 100%;
@@ -6109,7 +6299,6 @@ body {
   cursor: not-allowed;
 }
 
-/* ── Editor Component ───────────────────────────────────────────────── */
 .editor {
   background: var(--secondary-background);
   border: 1px solid var(--divider);
@@ -6120,7 +6309,6 @@ body {
   overflow: hidden;
 }
 
-/* ── Toolbar ───────────────────────────────────────────────────────── */
 .editor-toolbar {
   display: flex;
   align-items: center;
@@ -6136,7 +6324,6 @@ body {
   display: none;
 }
 
-/* SVG icon sizing */
 .editor-toolbar .icon-svg {
   fill: currentColor;
   display: block;
@@ -6146,7 +6333,6 @@ body {
   flex-shrink: 0;
 }
 
-/* Button base */
 .editor-toolbar button {
   display: inline-flex;
   align-items: center;
@@ -6189,7 +6375,6 @@ body {
   background: var(--accent-color);
 }
 
-/* Button clusters — pill-shaped groups */
 .toolbar-group {
   display: flex;
   align-items: center;
@@ -6203,7 +6388,6 @@ body {
   border-radius: 0.18rem;
 }
 
-/* Block-format select — reset all global form overrides */
 .editor-block-select {
   width: auto;
   flex-shrink: 0;
@@ -6236,13 +6420,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;
@@ -6255,7 +6437,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);
@@ -6269,7 +6450,6 @@ body {
   color: var(--error);
 }
 
-/* ── Editor Body ───────────────────────────────────────────────────── */
 .editor-body {
   display: flex;
   flex: 1;
@@ -6363,7 +6543,6 @@ body {
   font-weight: 700;
 }
 
-/* ── Side Panel ────────────────────────────────────────────────────── */
 .editor-side {
   width: 320px;
   min-width: 240px;
@@ -6509,7 +6688,6 @@ body {
   text-underline-offset: 2px;
 }
 
-/* ── Footer ────────────────────────────────────────────────────────── */
 .editor-footer {
   display: flex;
   align-items: center;
@@ -6553,7 +6731,6 @@ body {
   box-shadow: 0 1px 0 var(--divider);
 }
 
-/* ── Responsive ────────────────────────────────────────────────────── */
 @media screen and (max-width: 768px) {
   .editor-body {
     flex-direction: column;
@@ -6597,7 +6774,6 @@ body {
     display: none;
   }
 }
-/* ── Link Popover ──────────────────────────────────────────────────── */
 .editor-link-popover {
   display: flex;
   flex-direction: column;
@@ -6917,9 +7093,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;
@@ -8484,6 +8661,10 @@ body {
   display: block;
 }
 
+.sidebar-close {
+  display: none;
+}
+
 @media (max-width: 768px) {
   .sidebar-toggle {
     display: flex;
@@ -8501,6 +8682,27 @@ body {
   .sidebar-main {
     margin-left: 0;
   }
+  .sidebar-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--secondary-background);
+    border: none;
+    border-radius: 0.4rem;
+    padding: 0.5rem 1.25rem;
+    cursor: pointer;
+    color: var(--primary-text);
+    gap: 0.4rem;
+    font-size: 0.875rem;
+    white-space: nowrap;
+  }
+  .sidebar-close:hover {
+    background: var(--divider);
+  }
 }
 .sidebar-nav .docs-sidebar-logo {
   display: flex;
@@ -8683,10 +8885,6 @@ body {
 }
 .docs-content code {
   font-size: 0.8em;
-  background: var(--secondary-background);
-  border: 1px solid var(--divider);
-  border-radius: 0.25rem;
-  padding: 0.1em 0.35em;
 }
 .docs-content .docs-demo {
   background: var(--secondary-background);