/* * NextUI Component-Level Style Overrides * * Per-component visual customizations for each design style. * Uses [data-sx-style="X"] attribute selectors on to scope overrides. * Loaded AFTER scoped CSS, so cascade order ensures these win. * * Covered components: * Batch 1: SxButton, SxInput, SxCard, SxDialog, SxNavMenu, SxSwitch * Batch 2: SxCheckbox, SxRadio, SxSelect, SxTextArea, SxSlider, SxToggleButton * Batch 3: SxTabs, SxMessageBar, SxToast, SxAccordion, SxTooltip, SxProgress * Batch 4: SxDataGrid, SxTable, SxTag, SxDrawer, SxMenu/SxMenuItem */ /* ================================================================ CUPERTINO — macOS / iOS Signature: spring animations, press-to-shrink, blue focus rings, shadow-driven depth (no harsh borders), translucent layers ================================================================ */ /* --- SxButton --- */ [data-sx-style="cupertino"] .sx-btn { transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1); /* spring-like */ } [data-sx-style="cupertino"] .sx-btn:active:not(:disabled) { transform: scale(0.97); transition-duration: 0.1s; } [data-sx-style="cupertino"] .sx-btn--neutral:hover:not(:disabled), [data-sx-style="cupertino"] .sx-btn--lightweight:hover:not(:disabled), [data-sx-style="cupertino"] .sx-btn--stealth:hover:not(:disabled) { filter: brightness(0.96); } [data-sx-style="cupertino"] .sx-btn--accent { background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 50% ); } [data-sx-style="cupertino"] .sx-btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-colorBrandBackground1) 40%, transparent); } /* --- SxInput --- */ [data-sx-style="cupertino"] .sx-input-wrapper { background: var(--sx-colorNeutralBackground1); } [data-sx-style="cupertino"] .sx-input-wrapper:focus-within { border-color: var(--sx-colorBrandBackground1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-colorBrandBackground1) 25%, transparent); } /* --- SxCard --- */ [data-sx-style="cupertino"] .sx-card { border-color: transparent; box-shadow: var(--sx-shadow-md); } [data-sx-style="cupertino"] .sx-card-header { background: var(--sx-colorNeutralBackground1); border-bottom-color: color-mix(in srgb, var(--sx-colorNeutralStroke2) 50%, transparent); } [data-sx-style="cupertino"] .sx-card.sx-is-hoverable:hover { box-shadow: var(--sx-shadow-xl); border-color: transparent; } /* --- SxDialog --- */ [data-sx-style="cupertino"] .sx-dialog-overlay { -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); background: rgba(0, 0, 0, 0.25); } [data-sx-style="cupertino"] .sx-dialog { transform: translateY(12px) scale(0.97); transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease; } [data-sx-style="cupertino"] .sx-dialog-overlay.sx-is-open .sx-dialog { transform: translateY(0) scale(1); } [data-sx-style="cupertino"] .sx-dialog-header { border-bottom-color: color-mix(in srgb, var(--sx-colorNeutralStroke2) 40%, transparent); } [data-sx-style="cupertino"] .sx-dialog-footer { border-top-color: color-mix(in srgb, var(--sx-colorNeutralStroke2) 40%, transparent); } /* --- SxNavMenu --- */ [data-sx-style="cupertino"] .sx-nav-menu-item-link--active { background-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 15%, transparent); color: var(--sx-colorBrandForeground1); } [data-sx-style="cupertino"] .sx-nav-menu-item-link:hover { background-color: var(--sx-colorNeutralBackground3); } [data-sx-style="cupertino"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link--active { background-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 18%, transparent); color: var(--sx-colorBrandForeground1); box-shadow: none; } [data-sx-style="cupertino"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link--active > .sx-nav-menu-icon-slot, [data-sx-style="cupertino"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link--active > .sx-nav-menu-item-text { color: var(--sx-colorBrandForeground1); } [data-sx-style="cupertino"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link--active { background-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 15%, transparent); color: var(--sx-colorBrandForeground1); } [data-sx-style="cupertino"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link--active > .sx-nav-menu-icon-slot, [data-sx-style="cupertino"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link--active > .sx-nav-menu-item-text { color: var(--sx-colorBrandForeground1); } /* --- SxSwitch --- */ [data-sx-style="cupertino"] .sx-switch__track { width: 2.75rem; height: 1.5rem; background-color: var(--sx-colorNeutralStroke1); } [data-sx-style="cupertino"] .sx-switch__thumb { width: 1.25rem; height: 1.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.1); } [data-sx-style="cupertino"] input:checked + .sx-switch__track { background-color: #34C759; border-color: #34C759; } [data-sx-style="cupertino"] input:checked + .sx-switch__track .sx-switch__thumb { transform: translate(1.25rem, -50%); } /* ================================================================ CUPERTINO — Dark mode adjustments ================================================================ */ [data-sx-style="cupertino"][data-theme="dark"] .sx-dialog-overlay { background: rgba(0, 0, 0, 0.45); } [data-sx-style="cupertino"][data-theme="dark"] .sx-card { border-color: color-mix(in srgb, var(--sx-colorNeutralStroke1) 30%, transparent); } [data-sx-style="cupertino"][data-theme="dark"] input:checked + .sx-switch__track { background-color: #30D158; border-color: #30D158; } /* ================================================================ FLUENT — Windows 11 Signature: no scale on press, bottom-line focus on inputs, subtle brightness shifts, crisp thin borders, Acrylic-style ================================================================ */ /* --- SxButton --- */ [data-sx-style="fluent"] .sx-btn { transition: all 0.15s ease; } [data-sx-style="fluent"] .sx-btn:active:not(:disabled) { transform: none; filter: brightness(0.92); } [data-sx-style="fluent"] .sx-btn--accent:hover:not(:disabled) { filter: brightness(1.06); } [data-sx-style="fluent"] .sx-btn--accent { background-image: none; } [data-sx-style="fluent"] .sx-btn:focus-visible { box-shadow: 0 0 0 2px var(--sx-colorNeutralBackground1), 0 0 0 4px var(--sx-colorNeutralForeground1); } /* Bottom highlight line on neutral buttons */ [data-sx-style="fluent"] .sx-btn--neutral { border-bottom-color: color-mix(in srgb, var(--sx-colorNeutralStroke1) 80%, var(--sx-colorNeutralForeground1) 20%); } /* --- SxInput --- */ [data-sx-style="fluent"] .sx-input-wrapper { background: var(--sx-colorNeutralBackground3); border-bottom-width: 2px; } [data-sx-style="fluent"] .sx-input-wrapper:focus-within { box-shadow: none; border-color: var(--sx-colorNeutralStroke1); border-bottom-color: var(--sx-colorBrandBackground1); } /* --- SxCard --- */ [data-sx-style="fluent"] .sx-card { box-shadow: var(--sx-shadow-sm); } [data-sx-style="fluent"] .sx-card-header { background: var(--sx-colorNeutralBackground2); } [data-sx-style="fluent"] .sx-card.sx-is-hoverable:hover { border-color: var(--sx-colorBrandBackground1); box-shadow: var(--sx-shadow-md); } /* --- SxDialog --- */ [data-sx-style="fluent"] .sx-dialog-overlay { background: rgba(0, 0, 0, 0.3); } [data-sx-style="fluent"] .sx-dialog { transform: scale(0.95); transition: transform 0.2s ease, opacity 0.15s ease; } [data-sx-style="fluent"] .sx-dialog-overlay.sx-is-open .sx-dialog { transform: scale(1); } /* --- SxNavMenu --- */ /* Fluent keeps the default full-width brand background active style — no overrides needed */ /* --- SxSwitch --- */ [data-sx-style="fluent"] .sx-switch__track { background-color: transparent; border-color: var(--sx-colorNeutralStroke1); width: 2.5rem; height: 1.125rem; } [data-sx-style="fluent"] .sx-switch__thumb { background-color: var(--sx-colorNeutralForeground2); width: 0.75rem; height: 0.75rem; left: 0.1875rem; box-shadow: none; } [data-sx-style="fluent"] input:checked + .sx-switch__track { background-color: var(--sx-colorBrandBackground1); border-color: var(--sx-colorBrandBackground1); } [data-sx-style="fluent"] input:checked + .sx-switch__track .sx-switch__thumb { background-color: var(--sx-colorNeutralBackground1); transform: translate(1.375rem, -50%); width: 0.875rem; height: 0.875rem; } /* ================================================================ FLUENT — Dark mode adjustments ================================================================ */ [data-sx-style="fluent"][data-theme="dark"] .sx-input-wrapper { background: var(--sx-colorNeutralBackground3); } [data-sx-style="fluent"][data-theme="dark"] .sx-btn:focus-visible { box-shadow: 0 0 0 2px var(--sx-colorNeutralBackground1), 0 0 0 4px var(--sx-colorNeutralForeground1); } /* ================================================================ CLASSIC — Traditional / Win9x-era Signature: hard borders, inset shadows on press, no animations, square corners, underline/bold for active states ================================================================ */ /* --- SxButton --- */ [data-sx-style="classic"] .sx-btn { transition: none; } [data-sx-style="classic"] .sx-btn:active:not(:disabled) { transform: none; box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.25); } [data-sx-style="classic"] .sx-btn--neutral { border-color: var(--sx-colorNeutralStroke1); } [data-sx-style="classic"] .sx-btn--neutral:hover:not(:disabled) { background: var(--sx-colorNeutralBackground3); } [data-sx-style="classic"] .sx-btn--accent:hover:not(:disabled) { filter: brightness(0.9); } [data-sx-style="classic"] .sx-btn--accent { background-image: none; } [data-sx-style="classic"] .sx-btn:focus-visible { box-shadow: none; outline: 2px dashed var(--sx-colorBrandForeground1); outline-offset: 2px; } /* --- SxInput --- */ [data-sx-style="classic"] .sx-input-wrapper { background: var(--sx-colorNeutralBackground1); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1); } [data-sx-style="classic"] .sx-input-wrapper:focus-within { border-color: var(--sx-colorBrandBackground1); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1); } /* --- SxCard --- */ [data-sx-style="classic"] .sx-card { box-shadow: none; border-width: 1px; border-color: var(--sx-colorNeutralStroke1); } [data-sx-style="classic"] .sx-card-header { background: var(--sx-colorNeutralBackground2); border-bottom-width: 1px; } [data-sx-style="classic"] .sx-card.sx-is-hoverable:hover { border-width: 2px; border-color: var(--sx-colorNeutralStroke1); box-shadow: none; } /* --- SxDialog --- */ [data-sx-style="classic"] .sx-dialog-overlay { background: rgba(0, 0, 0, 0.35); } [data-sx-style="classic"] .sx-dialog { transform: none; transition: none; border: 1px solid var(--sx-colorNeutralStroke1); } [data-sx-style="classic"] .sx-dialog-overlay.sx-is-open .sx-dialog { transform: none; } [data-sx-style="classic"] .sx-dialog-header { border-bottom-width: 2px; border-bottom-color: var(--sx-colorNeutralStroke1); } [data-sx-style="classic"] .sx-dialog-footer { border-top-width: 2px; border-top-color: var(--sx-colorNeutralStroke1); } /* --- SxNavMenu --- */ [data-sx-style="classic"] .sx-nav-menu-item-link--active { background-color: transparent; border-left: 3px solid var(--sx-colorBrandBackground1); font-weight: var(--sx-fontWeightBold, 700); color: var(--sx-colorNeutralForeground1); padding-left: calc(var(--sx-spacing-xs) - 3px); } [data-sx-style="classic"] .sx-nav-menu-item-link:hover { text-decoration: underline; background-color: transparent; } [data-sx-style="classic"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link--active { background-color: transparent; color: var(--sx-colorNeutralForeground1); border-left: 3px solid var(--sx-colorBrandBackground1); box-shadow: none; } [data-sx-style="classic"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link--active > .sx-nav-menu-icon-slot, [data-sx-style="classic"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link--active > .sx-nav-menu-item-text { color: var(--sx-colorBrandForeground1); } [data-sx-style="classic"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link--active { background-color: transparent; color: var(--sx-colorBrandForeground1); border-left: 3px solid var(--sx-colorBrandBackground1); font-weight: var(--sx-fontWeightBold, 700); } [data-sx-style="classic"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link--active > .sx-nav-menu-icon-slot, [data-sx-style="classic"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link--active > .sx-nav-menu-item-text { color: var(--sx-colorBrandForeground1); } /* --- SxSwitch --- */ [data-sx-style="classic"] .sx-switch__track { border-radius: 0.125rem; width: 2rem; height: 1rem; border: 1px solid var(--sx-colorNeutralStroke1); background-color: var(--sx-colorNeutralBackground1); } [data-sx-style="classic"] .sx-switch__thumb { border-radius: 0.125rem; width: 0.75rem; height: 0.75rem; background-color: var(--sx-colorNeutralForeground2); box-shadow: none; left: 0.125rem; } [data-sx-style="classic"] input:checked + .sx-switch__track { background-color: var(--sx-colorBrandBackground1); border-color: var(--sx-colorBrandBackground1); } [data-sx-style="classic"] input:checked + .sx-switch__track .sx-switch__thumb { background-color: var(--sx-colorNeutralBackground1); transform: translate(1rem, -50%); } /* ================================================================ CLASSIC — Dark mode adjustments ================================================================ */ [data-sx-style="classic"][data-theme="dark"] .sx-input-wrapper { box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.25); } [data-sx-style="classic"][data-theme="dark"] .sx-btn:active:not(:disabled) { box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.4); } /* ================================================================ FUTURISTIC — Sci-fi / Neon / Cyberpunk Signature: glow effects, brand-color borders, slow luminous transitions, translucent dark panels, neon accent lines ================================================================ */ /* --- SxButton --- */ [data-sx-style="futuristic"] .sx-btn { transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.05em; font-size: calc(var(--sx-font-size-sm, 0.875rem) * 0.92); } [data-sx-style="futuristic"] .sx-btn:active:not(:disabled) { transform: none; filter: brightness(1.3); } [data-sx-style="futuristic"] .sx-btn--neutral:hover:not(:disabled), [data-sx-style="futuristic"] .sx-btn--outline:hover:not(:disabled) { border-color: var(--sx-colorBrandBackground1); box-shadow: 0 0 8px color-mix(in srgb, var(--sx-colorBrandBackground1) 30%, transparent); } [data-sx-style="futuristic"] .sx-btn--accent { background-image: linear-gradient( 135deg, var(--sx-colorBrandBackground1) 0%, color-mix(in srgb, var(--sx-colorBrandBackground1) 80%, white) 100% ); } [data-sx-style="futuristic"] .sx-btn--accent:hover:not(:disabled) { box-shadow: 0 0 12px color-mix(in srgb, var(--sx-colorBrandBackground1) 50%, transparent), 0 0 4px color-mix(in srgb, var(--sx-colorBrandBackground1) 25%, transparent); } [data-sx-style="futuristic"] .sx-btn:focus-visible { box-shadow: 0 0 0 2px var(--sx-colorNeutralBackground1), 0 0 8px color-mix(in srgb, var(--sx-colorBrandBackground1) 60%, transparent); } /* --- SxInput --- */ [data-sx-style="futuristic"] .sx-input-wrapper { background: color-mix(in srgb, var(--sx-colorNeutralBackground1) 85%, transparent); border-color: color-mix(in srgb, var(--sx-colorNeutralStroke1) 60%, transparent); } [data-sx-style="futuristic"] .sx-input-wrapper:focus-within { border-color: var(--sx-colorBrandBackground1); box-shadow: 0 0 8px color-mix(in srgb, var(--sx-colorBrandBackground1) 30%, transparent); } /* --- SxCard --- */ [data-sx-style="futuristic"] .sx-card { border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 25%, transparent); box-shadow: var(--sx-shadow-sm); } [data-sx-style="futuristic"] .sx-card-header { background: color-mix(in srgb, var(--sx-colorNeutralBackground2) 90%, transparent); border-bottom-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 20%, transparent); } [data-sx-style="futuristic"] .sx-card.sx-is-hoverable:hover { border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 50%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--sx-colorBrandBackground1) 20%, transparent); } /* --- SxDialog --- */ [data-sx-style="futuristic"] .sx-dialog-overlay { background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } [data-sx-style="futuristic"] .sx-dialog { border: 1px solid color-mix(in srgb, var(--sx-colorBrandBackground1) 30%, transparent); } [data-sx-style="futuristic"] .sx-dialog-header { border-bottom-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 25%, transparent); } [data-sx-style="futuristic"] .sx-dialog-footer { border-top-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 25%, transparent); } /* --- SxNavMenu --- */ [data-sx-style="futuristic"] .sx-nav-menu-item-link--active { background-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 12%, transparent); color: var(--sx-colorBrandForeground1); border-left: 2px solid var(--sx-colorBrandBackground1); box-shadow: inset 0 0 8px color-mix(in srgb, var(--sx-colorBrandBackground1) 10%, transparent); } [data-sx-style="futuristic"] .sx-nav-menu-item-link:hover { background-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 6%, transparent); } [data-sx-style="futuristic"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link--active { background-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 15%, transparent); color: var(--sx-colorBrandForeground1); border-left: 2px solid var(--sx-colorBrandBackground1); box-shadow: inset 0 0 8px color-mix(in srgb, var(--sx-colorBrandBackground1) 10%, transparent); } [data-sx-style="futuristic"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link--active > .sx-nav-menu-icon-slot, [data-sx-style="futuristic"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link--active > .sx-nav-menu-item-text { color: var(--sx-colorBrandForeground1); } [data-sx-style="futuristic"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link--active { background-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 12%, transparent); color: var(--sx-colorBrandForeground1); border-left: 2px solid var(--sx-colorBrandBackground1); } [data-sx-style="futuristic"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link--active > .sx-nav-menu-icon-slot, [data-sx-style="futuristic"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link--active > .sx-nav-menu-item-text { color: var(--sx-colorBrandForeground1); } /* --- SxSwitch --- */ [data-sx-style="futuristic"] .sx-switch__track { width: 2.25rem; height: 0.75rem; border-radius: 999px; background-color: color-mix(in srgb, var(--sx-colorNeutralStroke1) 60%, transparent); border-color: color-mix(in srgb, var(--sx-colorNeutralStroke1) 40%, transparent); } [data-sx-style="futuristic"] .sx-switch__thumb { width: 0.875rem; height: 0.875rem; box-shadow: 0 0 4px color-mix(in srgb, var(--sx-colorBrandBackground1) 30%, transparent); } [data-sx-style="futuristic"] input:checked + .sx-switch__track { background-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 40%, transparent); border-color: var(--sx-colorBrandBackground1); box-shadow: 0 0 8px color-mix(in srgb, var(--sx-colorBrandBackground1) 30%, transparent); } [data-sx-style="futuristic"] input:checked + .sx-switch__track .sx-switch__thumb { background-color: var(--sx-colorBrandBackground1); box-shadow: 0 0 6px color-mix(in srgb, var(--sx-colorBrandBackground1) 60%, transparent); transform: translate(1.125rem, -50%); } /* ================================================================ FUTURISTIC — Dark mode adjustments (glow intensified) ================================================================ */ [data-sx-style="futuristic"][data-theme="dark"] .sx-btn--neutral:hover:not(:disabled), [data-sx-style="futuristic"][data-theme="dark"] .sx-btn--outline:hover:not(:disabled) { box-shadow: 0 0 12px color-mix(in srgb, var(--sx-colorBrandBackground1) 40%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] .sx-btn--accent:hover:not(:disabled) { box-shadow: 0 0 16px color-mix(in srgb, var(--sx-colorBrandBackground1) 60%, transparent), 0 0 6px color-mix(in srgb, var(--sx-colorBrandBackground1) 30%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] .sx-input-wrapper { background: color-mix(in srgb, var(--sx-colorNeutralBackground1) 70%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] .sx-input-wrapper:focus-within { box-shadow: 0 0 12px color-mix(in srgb, var(--sx-colorBrandBackground1) 40%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] .sx-card { border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 35%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] .sx-card.sx-is-hoverable:hover { box-shadow: 0 0 20px color-mix(in srgb, var(--sx-colorBrandBackground1) 30%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] input:checked + .sx-switch__track { box-shadow: 0 0 12px color-mix(in srgb, var(--sx-colorBrandBackground1) 50%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] input:checked + .sx-switch__track .sx-switch__thumb { box-shadow: 0 0 10px color-mix(in srgb, var(--sx-colorBrandBackground1) 80%, transparent); } /* ████████████████████████████████████████████████████████████████ BATCH 2 — Form Controls SxCheckbox, SxRadio, SxSelect, SxTextArea, SxSlider, SxToggleButton ████████████████████████████████████████████████████████████████ */ /* ================================================================ CUPERTINO — Form Controls ================================================================ */ /* --- SxCheckbox --- */ [data-sx-style="cupertino"] .sx-checkbox-box { transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1); } [data-sx-style="cupertino"] .sx-checkbox-input:checked + .sx-checkbox-box { background-color: var(--sx-colorBrandBackground1); background-image: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 60%); } /* --- SxRadio --- */ [data-sx-style="cupertino"] .sx-radio-circle { transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1); } [data-sx-style="cupertino"] .sx-radio-input:checked + .sx-radio-circle { border-color: var(--sx-colorBrandBackground1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-colorBrandBackground1) 20%, transparent); } /* --- SxSelect --- */ [data-sx-style="cupertino"] .sx-select-container { background: var(--sx-colorNeutralBackground1); transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1); } [data-sx-style="cupertino"] .sx-select-popup { box-shadow: var(--sx-shadow-xl); border-color: transparent; } /* --- SxTextArea --- */ [data-sx-style="cupertino"] .sx-textarea:focus { border-color: var(--sx-colorBrandBackground1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-colorBrandBackground1) 25%, transparent); } /* --- SxSlider --- */ [data-sx-style="cupertino"] .sx-slider::-webkit-slider-thumb { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.1); transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1); } /* --- SxToggleButton --- */ [data-sx-style="cupertino"] .sx-toggle-btn { transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1); } [data-sx-style="cupertino"] .sx-toggle-btn.sx-is-checked { box-shadow: var(--sx-shadow-sm); } /* ================================================================ FLUENT — Form Controls ================================================================ */ /* --- SxCheckbox --- */ [data-sx-style="fluent"] .sx-checkbox-box { border-radius: var(--sx-borderRadiusSmall); } /* --- SxRadio --- */ [data-sx-style="fluent"] .sx-radio-input:checked + .sx-radio-circle::after { width: 0.5rem; height: 0.5rem; } /* --- SxSelect --- */ [data-sx-style="fluent"] .sx-select-container { background: var(--sx-colorNeutralBackground3); border-bottom-width: 2px; } [data-sx-style="fluent"] .sx-select-container:hover:not(.sx-is-disabled):not(.sx-is-readonly) { border-color: var(--sx-colorNeutralStroke1); border-bottom-color: var(--sx-colorBrandBackground1); } /* --- SxTextArea --- */ [data-sx-style="fluent"] .sx-textarea { background-color: var(--sx-colorNeutralBackground3); border-bottom-width: 2px; } [data-sx-style="fluent"] .sx-textarea:focus { box-shadow: none; border-color: var(--sx-colorNeutralStroke1); border-bottom-color: var(--sx-colorBrandBackground1); } /* --- SxSlider --- */ [data-sx-style="fluent"] .sx-slider::-webkit-slider-thumb { box-shadow: none; border-width: 3px; } /* --- SxToggleButton --- */ [data-sx-style="fluent"] .sx-toggle-btn { transition: all 0.15s ease; } [data-sx-style="fluent"] .sx-toggle-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--sx-colorNeutralBackground1), 0 0 0 4px var(--sx-colorNeutralForeground1); } /* ================================================================ CLASSIC — Form Controls ================================================================ */ /* --- SxCheckbox --- */ [data-sx-style="classic"] .sx-checkbox-box { border-radius: 0; border-width: 1px; box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1); transition: none; } /* --- SxRadio --- */ [data-sx-style="classic"] .sx-radio-circle { transition: none; } /* --- SxSelect --- */ [data-sx-style="classic"] .sx-select-container { box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1); } [data-sx-style="classic"] .sx-select-popup { box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15); border-width: 1px; } /* --- SxTextArea --- */ [data-sx-style="classic"] .sx-textarea { box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1); } [data-sx-style="classic"] .sx-textarea:focus { box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1); } /* --- SxSlider --- */ [data-sx-style="classic"] .sx-slider { border-radius: 0; } [data-sx-style="classic"] .sx-slider::-webkit-slider-thumb { border-radius: 0; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); } /* --- SxToggleButton --- */ [data-sx-style="classic"] .sx-toggle-btn { transition: none; } [data-sx-style="classic"] .sx-toggle-btn:focus-visible { outline: 2px dashed var(--sx-colorBrandForeground1); outline-offset: 2px; } /* ================================================================ FUTURISTIC — Form Controls ================================================================ */ /* --- SxCheckbox --- */ [data-sx-style="futuristic"] .sx-checkbox-box { border-color: color-mix(in srgb, var(--sx-colorNeutralStroke1) 60%, transparent); transition: all 0.3s ease; } [data-sx-style="futuristic"] .sx-checkbox-input:checked + .sx-checkbox-box { box-shadow: 0 0 6px color-mix(in srgb, var(--sx-colorBrandBackground1) 40%, transparent); } /* --- SxRadio --- */ [data-sx-style="futuristic"] .sx-radio-circle { border-color: color-mix(in srgb, var(--sx-colorNeutralStroke1) 60%, transparent); } [data-sx-style="futuristic"] .sx-radio-input:checked + .sx-radio-circle { box-shadow: 0 0 6px color-mix(in srgb, var(--sx-colorBrandBackground1) 40%, transparent); } /* --- SxSelect --- */ [data-sx-style="futuristic"] .sx-select-container { background: color-mix(in srgb, var(--sx-colorNeutralBackground1) 85%, transparent); border-color: color-mix(in srgb, var(--sx-colorNeutralStroke1) 60%, transparent); } [data-sx-style="futuristic"] .sx-select-container:hover:not(.sx-is-disabled):not(.sx-is-readonly) { border-color: var(--sx-colorBrandBackground1); box-shadow: 0 0 6px color-mix(in srgb, var(--sx-colorBrandBackground1) 20%, transparent); } [data-sx-style="futuristic"] .sx-select-popup { border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 25%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--sx-colorBrandBackground1) 15%, transparent); } /* --- SxTextArea --- */ [data-sx-style="futuristic"] .sx-textarea { background-color: color-mix(in srgb, var(--sx-colorNeutralBackground1) 85%, transparent); border-color: color-mix(in srgb, var(--sx-colorNeutralStroke1) 60%, transparent); } [data-sx-style="futuristic"] .sx-textarea:focus { border-color: var(--sx-colorBrandBackground1); box-shadow: 0 0 8px color-mix(in srgb, var(--sx-colorBrandBackground1) 30%, transparent); } /* --- SxSlider --- */ [data-sx-style="futuristic"] .sx-slider { background: color-mix(in srgb, var(--sx-colorNeutralStroke2) 50%, transparent); } [data-sx-style="futuristic"] .sx-slider::-webkit-slider-thumb { box-shadow: 0 0 6px color-mix(in srgb, var(--sx-colorBrandBackground1) 50%, transparent); } /* --- SxToggleButton --- */ [data-sx-style="futuristic"] .sx-toggle-btn { transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.04em; } [data-sx-style="futuristic"] .sx-toggle-btn.sx-is-checked { box-shadow: 0 0 8px color-mix(in srgb, var(--sx-colorBrandBackground1) 30%, transparent); } /* ████████████████████████████████████████████████████████████████ BATCH 3 — Feedback & Navigation SxTabs, SxMessageBar, SxToast, SxAccordion, SxTooltip, SxProgress ████████████████████████████████████████████████████████████████ */ /* ================================================================ CUPERTINO — Feedback & Navigation ================================================================ */ /* --- SxTabs --- */ [data-sx-style="cupertino"] .sx-tabs-item__indicator { transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1); } [data-sx-style="cupertino"] .sx-tabs--button > .sx-tabs-list { box-shadow: var(--sx-shadow-sm); border-color: transparent; } [data-sx-style="cupertino"] .sx-tabs--button > .sx-tabs-list > .sx-tabs-item.sx-is-active { box-shadow: var(--sx-shadow-sm); } /* --- SxMessageBar --- */ [data-sx-style="cupertino"] .sx-message-bar { border-color: transparent; box-shadow: var(--sx-shadow-sm); } /* --- SxToast --- */ [data-sx-style="cupertino"] .sx-toast { border-color: transparent; box-shadow: var(--sx-shadow-xl); } /* --- SxAccordion --- */ [data-sx-style="cupertino"] .sx-accordion { border-color: transparent; box-shadow: var(--sx-shadow-sm); } [data-sx-style="cupertino"] .sx-accordion-item > .sx-accordion-header:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-colorBrandBackground1) 40%, transparent); } /* --- SxTooltip --- */ [data-sx-style="cupertino"] .sx-tooltip { box-shadow: var(--sx-shadow-lg); } /* --- SxProgress --- */ [data-sx-style="cupertino"] .sx-progress-bar { transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1); } /* ================================================================ FLUENT — Feedback & Navigation ================================================================ */ /* --- SxTabs --- */ [data-sx-style="fluent"] .sx-tabs-item__indicator { transition: all 0.2s ease; } /* --- SxMessageBar --- */ /* Fluent uses default styling — thin borders, minimal adjustments */ /* --- SxToast --- */ [data-sx-style="fluent"] .sx-toast { box-shadow: var(--sx-shadow-md); } /* --- SxAccordion --- */ [data-sx-style="fluent"] .sx-accordion-item > .sx-accordion-header:focus-visible { box-shadow: 0 0 0 2px var(--sx-colorNeutralBackground1), 0 0 0 4px var(--sx-colorNeutralForeground1); } /* --- SxProgress --- */ [data-sx-style="fluent"] .sx-progress-track { border-radius: var(--sx-borderRadiusSmall); } [data-sx-style="fluent"] .sx-progress-bar { border-radius: var(--sx-borderRadiusSmall); } /* ================================================================ CLASSIC — Feedback & Navigation ================================================================ */ /* --- SxTabs --- */ [data-sx-style="classic"] .sx-tabs-item { transition: none !important; } [data-sx-style="classic"] .sx-tabs-item__indicator { transition: none; } [data-sx-style="classic"] .sx-tabs--button > .sx-tabs-list { box-shadow: none; border-width: 1px; } /* --- SxMessageBar --- */ [data-sx-style="classic"] .sx-message-bar { border-width: 1px; box-shadow: none; } /* --- SxToast --- */ [data-sx-style="classic"] .sx-toast { box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15); border-width: 1px; animation: none; } /* --- SxAccordion --- */ [data-sx-style="classic"] .sx-accordion-item > .sx-accordion-header { transition: none; } [data-sx-style="classic"] .sx-accordion-item > .sx-accordion-header:focus-visible { box-shadow: none; outline: 2px dashed var(--sx-colorBrandForeground1); outline-offset: -2px; } /* --- SxTooltip --- */ [data-sx-style="classic"] .sx-tooltip { box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); border: 1px solid var(--sx-colorNeutralStroke1); animation: none; } /* --- SxProgress --- */ [data-sx-style="classic"] .sx-progress-track { border-radius: 0; border: 1px solid var(--sx-colorNeutralStroke1); } [data-sx-style="classic"] .sx-progress-bar { border-radius: 0; transition: width 0.1s linear; } /* ================================================================ FUTURISTIC — Feedback & Navigation ================================================================ */ /* --- SxTabs --- */ [data-sx-style="futuristic"] .sx-tabs-item__indicator { box-shadow: 0 0 6px color-mix(in srgb, var(--sx-colorBrandBackground1) 50%, transparent); } [data-sx-style="futuristic"] .sx-tabs--button > .sx-tabs-list { border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 20%, transparent); } [data-sx-style="futuristic"] .sx-tabs--button > .sx-tabs-list > .sx-tabs-item.sx-is-active { box-shadow: 0 0 8px color-mix(in srgb, var(--sx-colorBrandBackground1) 15%, transparent); } /* --- SxMessageBar --- */ [data-sx-style="futuristic"] .sx-message-bar { border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 20%, transparent); } /* --- SxToast --- */ [data-sx-style="futuristic"] .sx-toast { border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 25%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--sx-colorBrandBackground1) 15%, transparent); } /* --- SxAccordion --- */ [data-sx-style="futuristic"] .sx-accordion { border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 20%, transparent); } [data-sx-style="futuristic"] .sx-accordion-item > .sx-accordion-header:focus-visible { box-shadow: 0 0 0 2px var(--sx-colorNeutralBackground1), 0 0 8px color-mix(in srgb, var(--sx-colorBrandBackground1) 60%, transparent); } /* --- SxTooltip --- */ [data-sx-style="futuristic"] .sx-tooltip { border: 1px solid color-mix(in srgb, var(--sx-colorBrandBackground1) 30%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--sx-colorBrandBackground1) 25%, transparent); } /* --- SxProgress --- */ [data-sx-style="futuristic"] .sx-progress-bar { box-shadow: 0 0 6px color-mix(in srgb, var(--sx-colorBrandBackground1) 40%, transparent); } /* ████████████████████████████████████████████████████████████████ BATCH 4 — Data Display & Panels SxDataGrid, SxTable, SxTag, SxDrawer, SxMenu/SxMenuItem ████████████████████████████████████████████████████████████████ */ /* ================================================================ CUPERTINO — Data Display & Panels ================================================================ */ /* --- SxDataGrid --- */ [data-sx-style="cupertino"] .sx-datagrid { box-shadow: var(--sx-shadow-sm); } [data-sx-style="cupertino"] .sx-datagrid-header-row > .sx-datagrid-cell { background: color-mix(in srgb, var(--sx-colorNeutralBackground3) 60%, var(--sx-colorNeutralBackground1)); } /* --- SxTable --- */ [data-sx-style="cupertino"] .sx-table-wrapper { border-color: transparent; box-shadow: var(--sx-shadow-sm); } /* --- SxTag --- */ [data-sx-style="cupertino"] .sx-tag { border-color: transparent; } [data-sx-style="cupertino"] .sx-tag--capsule { border-radius: 999px; } /* --- SxDrawer --- */ [data-sx-style="cupertino"] .sx-drawer-overlay { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } [data-sx-style="cupertino"] .sx-drawer-panel { box-shadow: var(--sx-shadow-overlay); } [data-sx-style="cupertino"] .sx-drawer-header { border-bottom-color: color-mix(in srgb, var(--sx-colorNeutralStroke2) 50%, transparent); } [data-sx-style="cupertino"] .sx-drawer-footer { border-top-color: color-mix(in srgb, var(--sx-colorNeutralStroke2) 50%, transparent); } /* --- SxMenu --- */ [data-sx-style="cupertino"] .sx-menu-dropdown { border-color: transparent; box-shadow: var(--sx-shadow-overlay); } /* --- SxMenuItem --- */ [data-sx-style="cupertino"] .sx-menu-item { transition: background 0.15s cubic-bezier(0.25, 1, 0.5, 1); } /* ================================================================ FLUENT — Data Display & Panels ================================================================ */ /* --- SxDataGrid --- */ [data-sx-style="fluent"] .sx-datagrid { box-shadow: none; } /* --- SxTable --- */ [data-sx-style="fluent"] .sx-table-wrapper { box-shadow: none; } /* --- SxTag --- */ /* Fluent default is fine */ /* --- SxDrawer --- */ [data-sx-style="fluent"] .sx-drawer-panel { box-shadow: var(--sx-shadow-lg); } /* --- SxMenu --- */ [data-sx-style="fluent"] .sx-menu-dropdown { box-shadow: var(--sx-shadow-md); } /* --- SxMenuItem --- */ [data-sx-style="fluent"] .sx-menu-item { transition: background 0.1s ease; } /* ================================================================ CLASSIC — Data Display & Panels ================================================================ */ /* --- SxDataGrid --- */ [data-sx-style="classic"] .sx-datagrid { box-shadow: none; border: 1px solid var(--sx-colorNeutralStroke1); } /* --- SxTable --- */ [data-sx-style="classic"] .sx-table-wrapper { box-shadow: none; border-width: 1px; } /* --- SxTag --- */ [data-sx-style="classic"] .sx-tag { border-width: 1px; } /* --- SxDrawer --- */ [data-sx-style="classic"] .sx-drawer-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; } [data-sx-style="classic"] .sx-drawer-panel { box-shadow: 3px 0 0 rgba(0, 0, 0, 0.15); border-left: 1px solid var(--sx-colorNeutralStroke1); } [data-sx-style="classic"] .sx-drawer--left .sx-drawer-panel { box-shadow: -3px 0 0 rgba(0, 0, 0, 0.15); border-left: none; border-right: 1px solid var(--sx-colorNeutralStroke1); } /* --- SxMenu --- */ [data-sx-style="classic"] .sx-menu-dropdown { box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15); border-width: 1px; animation: none; } /* --- SxMenuItem --- */ [data-sx-style="classic"] .sx-menu-item { transition: none; } /* ================================================================ FUTURISTIC — Data Display & Panels ================================================================ */ /* --- SxDataGrid --- */ [data-sx-style="futuristic"] .sx-datagrid { border: 1px solid color-mix(in srgb, var(--sx-colorBrandBackground1) 20%, transparent); } [data-sx-style="futuristic"] .sx-datagrid-header-row > .sx-datagrid-cell { border-bottom-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 20%, transparent); } /* --- SxTable --- */ [data-sx-style="futuristic"] .sx-table-wrapper { border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 25%, transparent); } /* --- SxTag --- */ [data-sx-style="futuristic"] .sx-tag--brand { box-shadow: 0 0 4px color-mix(in srgb, var(--sx-colorBrandBackground1) 30%, transparent); } /* --- SxDrawer --- */ [data-sx-style="futuristic"] .sx-drawer-overlay { background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } [data-sx-style="futuristic"] .sx-drawer-panel { border-left: 1px solid color-mix(in srgb, var(--sx-colorBrandBackground1) 30%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--sx-colorBrandBackground1) 15%, transparent); } [data-sx-style="futuristic"] .sx-drawer-header { border-bottom-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 20%, transparent); } [data-sx-style="futuristic"] .sx-drawer-footer { border-top-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 20%, transparent); } /* --- SxMenu --- */ [data-sx-style="futuristic"] .sx-menu-dropdown { border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 30%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--sx-colorBrandBackground1) 20%, transparent); } /* --- SxMenuItem --- */ [data-sx-style="futuristic"] .sx-menu-item:hover:not(.sx-is-disabled) { background: color-mix(in srgb, var(--sx-colorBrandBackground1) 8%, transparent); } /* ================================================================ FUTURISTIC Dark — Batch 2/3/4 glow intensification ================================================================ */ [data-sx-style="futuristic"][data-theme="dark"] .sx-checkbox-input:checked + .sx-checkbox-box { box-shadow: 0 0 8px color-mix(in srgb, var(--sx-colorBrandBackground1) 60%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] .sx-radio-input:checked + .sx-radio-circle { box-shadow: 0 0 8px color-mix(in srgb, var(--sx-colorBrandBackground1) 60%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] .sx-toggle-btn.sx-is-checked { box-shadow: 0 0 12px color-mix(in srgb, var(--sx-colorBrandBackground1) 40%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] .sx-tabs-item__indicator { box-shadow: 0 0 10px color-mix(in srgb, var(--sx-colorBrandBackground1) 60%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] .sx-toast { box-shadow: 0 0 20px color-mix(in srgb, var(--sx-colorBrandBackground1) 25%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] .sx-progress-bar { box-shadow: 0 0 10px color-mix(in srgb, var(--sx-colorBrandBackground1) 60%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] .sx-drawer-panel { box-shadow: 0 0 32px color-mix(in srgb, var(--sx-colorBrandBackground1) 25%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] .sx-menu-dropdown { box-shadow: 0 0 20px color-mix(in srgb, var(--sx-colorBrandBackground1) 30%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] .sx-tag--brand { box-shadow: 0 0 6px color-mix(in srgb, var(--sx-colorBrandBackground1) 50%, transparent); } /* ================================================================ SxNavBar Icon Buttons — per-style overrides ================================================================ */ /* --- CUPERTINO --- */ [data-sx-style="cupertino"] .sx-navbar-icon-btn.sx-btn { background: color-mix(in srgb, var(--sx-colorNeutralBackground1) 70%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 0.5px solid color-mix(in srgb, var(--sx-colorNeutralStroke1) 40%, transparent); border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } [data-sx-style="cupertino"] .sx-navbar-icon-btn.sx-btn:hover { background: color-mix(in srgb, var(--sx-colorNeutralBackground1) 85%, transparent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); filter: brightness(1.05); } [data-sx-style="cupertino"][data-theme="dark"] .sx-navbar-icon-btn.sx-btn { background: color-mix(in srgb, var(--sx-colorNeutralBackground3) 50%, transparent); border-color: color-mix(in srgb, var(--sx-colorNeutralStroke1) 25%, transparent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } [data-sx-style="cupertino"][data-theme="dark"] .sx-navbar-icon-btn.sx-btn:hover { background: color-mix(in srgb, var(--sx-colorNeutralBackground3) 70%, transparent); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } /* --- FLUENT (minimal — keep defaults, just speed up transition) --- */ [data-sx-style="fluent"] .sx-navbar-icon-btn.sx-btn { transition: background-color 0.1s ease, color 0.1s ease; } /* --- CLASSIC --- */ [data-sx-style="classic"] .sx-navbar-icon-btn.sx-btn { background: var(--sx-colorNeutralBackground3); border: 1px solid var(--sx-colorNeutralStroke1); border-radius: var(--sx-borderRadiusSmall); box-shadow: none; transition: none; } [data-sx-style="classic"] .sx-navbar-icon-btn.sx-btn:hover { background: var(--sx-colorNeutralBackground3Hover); } /* --- FUTURISTIC --- */ [data-sx-style="futuristic"] .sx-navbar-icon-btn.sx-btn { background: transparent; border: 1px solid color-mix(in srgb, var(--sx-colorBrandBackground1) 30%, transparent); border-radius: var(--sx-borderRadiusMedium); transition: all 0.3s ease; } [data-sx-style="futuristic"] .sx-navbar-icon-btn.sx-btn:hover { background: color-mix(in srgb, var(--sx-colorBrandBackground1) 8%, transparent); border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 50%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--sx-colorBrandBackground1) 20%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] .sx-navbar-icon-btn.sx-btn { border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 40%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] .sx-navbar-icon-btn.sx-btn:hover { background: color-mix(in srgb, var(--sx-colorBrandBackground1) 12%, transparent); border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 60%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--sx-colorBrandBackground1) 35%, transparent); } /* ================================================================ SxMenu Dropdown — per-style overrides ================================================================ */ /* --- CUPERTINO: macOS-style menu (larger radius, frosted glass, rounded items) --- */ [data-sx-style="cupertino"] .sx-menu-dropdown { border-radius: 0.75rem; border: 0.5px solid color-mix(in srgb, var(--sx-colorNeutralStroke1) 40%, transparent); background: color-mix(in srgb, var(--sx-colorNeutralBackground1) 85%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.12); padding: var(--sx-spacing-micro); } [data-sx-style="cupertino"][data-theme="dark"] .sx-menu-dropdown { background: color-mix(in srgb, var(--sx-colorNeutralBackground1) 75%, transparent); border-color: color-mix(in srgb, var(--sx-colorNeutralStroke1) 25%, transparent); box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3); } [data-sx-style="cupertino"] .sx-menu-item { border-radius: var(--sx-borderRadiusMedium); margin: 1px 0; padding: var(--sx-spacing-sm) var(--sx-spacing-md); } [data-sx-style="cupertino"] .sx-menu-item:hover:not(.sx-is-disabled) { background: var(--sx-colorBrandBackground1); color: var(--sx-colorOnBrand); } [data-sx-style="cupertino"] .sx-menu-item:hover:not(.sx-is-disabled) > .sx-menu-item-icon { color: var(--sx-colorOnBrand); } /* --- CLASSIC: solid bordered menu items --- */ [data-sx-style="classic"] .sx-menu-dropdown { border-radius: var(--sx-borderRadiusSmall); border: 1px solid var(--sx-colorNeutralStroke1); box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08); } [data-sx-style="classic"] .sx-menu-item:hover:not(.sx-is-disabled) { background: var(--sx-colorNeutralBackground3); } /* --- FLUENT: keep defaults, slightly refine --- */ [data-sx-style="fluent"] .sx-menu-dropdown { border-radius: var(--sx-borderRadiusMedium); } /* --- FUTURISTIC: glow + brand accent --- */ [data-sx-style="futuristic"] .sx-menu-dropdown { border: 1px solid color-mix(in srgb, var(--sx-colorBrandBackground1) 20%, transparent); } [data-sx-style="futuristic"] .sx-menu-item:hover:not(.sx-is-disabled) { background: color-mix(in srgb, var(--sx-colorBrandBackground1) 10%, transparent); color: var(--sx-colorBrandForeground1); } /* ================================================================ SxCard — per-style overrides ================================================================ */ /* --- CUPERTINO: frosted glass, softer shadow, larger radius --- */ [data-sx-style="cupertino"] .sx-card { border-radius: var(--sx-borderRadiusLarge); border: 0.5px solid color-mix(in srgb, var(--sx-colorNeutralStroke1) 40%, transparent); box-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.06); } [data-sx-style="cupertino"] .sx-card .sx-card-header { border-top-left-radius: var(--sx-borderRadiusLarge); border-top-right-radius: var(--sx-borderRadiusLarge); } [data-sx-style="cupertino"][data-theme="dark"] .sx-card { border-color: color-mix(in srgb, var(--sx-colorNeutralStroke1) 25%, transparent); box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.15); } /* --- CLASSIC: solid border, no shadow, square corners --- */ [data-sx-style="classic"] .sx-card { border-radius: var(--sx-borderRadiusSmall); border: 1px solid var(--sx-colorNeutralStroke1); box-shadow: none; } [data-sx-style="classic"] .sx-card .sx-card-header { border-top-left-radius: var(--sx-borderRadiusSmall); border-top-right-radius: var(--sx-borderRadiusSmall); background: var(--sx-colorNeutralBackground3); } /* --- FLUENT: keep defaults, subtle refinement --- */ [data-sx-style="fluent"] .sx-card { border-radius: var(--sx-borderRadiusMedium); box-shadow: var(--sx-shadow-sm); } /* --- FUTURISTIC: brand-tinted border, glow in dark --- */ [data-sx-style="futuristic"] .sx-card { border: 1px solid color-mix(in srgb, var(--sx-colorBrandBackground1) 15%, var(--sx-colorNeutralStroke1)); border-radius: var(--sx-borderRadiusMedium); } [data-sx-style="futuristic"][data-theme="dark"] .sx-card { border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 30%, transparent); box-shadow: 0 0 1rem color-mix(in srgb, var(--sx-colorBrandBackground1) 10%, transparent); } [data-sx-style="futuristic"] .sx-card.sx-is-hoverable:hover { border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 50%, transparent); box-shadow: 0 0 1.5rem color-mix(in srgb, var(--sx-colorBrandBackground1) 20%, transparent); } /* ================================================================ CAPSULE BACK BUTTON — per-style overrides ================================================================ */ /* --- CUPERTINO: translucent, spring press, shadow-driven depth --- */ [data-sx-style="cupertino"] .sx-navbar-back-capsule { background: color-mix(in srgb, var(--sx-colorNeutralBackground3) 70%, transparent); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); border-color: color-mix(in srgb, var(--sx-colorNeutralStroke2) 50%, transparent); box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.06); } [data-sx-style="cupertino"] .sx-navbar-back-main:active { transform: scale(0.97); transition: transform 0.1s ease; } /* --- MATERIAL: filled surface, elevation on hover, ripple-ready --- */ [data-sx-style="material"] .sx-navbar-back-capsule { background: var(--sx-colorNeutralBackground1); border-color: var(--sx-colorNeutralStroke1); box-shadow: var(--sx-shadow-xs); transition: box-shadow 0.2s ease; } [data-sx-style="material"] .sx-navbar-back-capsule:hover { box-shadow: var(--sx-shadow-sm); } /* --- FLUENT: subtle background, rounded micro-border --- */ [data-sx-style="fluent"] .sx-navbar-back-capsule { background: var(--sx-colorNeutralBackground3); border-color: var(--sx-colorNeutralStroke2); } /* --- FUTURISTIC: brand-tinted border, glow in dark --- */ [data-sx-style="futuristic"] .sx-navbar-back-capsule { background: color-mix(in srgb, var(--sx-colorNeutralBackground3) 80%, transparent); border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 20%, var(--sx-colorNeutralStroke2)); } [data-sx-style="futuristic"][data-theme="dark"] .sx-navbar-back-capsule { border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 40%, transparent); box-shadow: 0 0 0.5rem color-mix(in srgb, var(--sx-colorBrandBackground1) 10%, transparent); } /* ================================================================ SxNavBar Back Capsule — per-style overrides ================================================================ */ /* --- CUPERTINO: frosted glass capsule --- */ [data-sx-style="cupertino"] .sx-navbar-back-capsule { background: color-mix(in srgb, var(--sx-colorNeutralBackground1) 70%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 0.5px solid color-mix(in srgb, var(--sx-colorNeutralStroke1) 40%, transparent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } [data-sx-style="cupertino"] .sx-navbar-back-capsule:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } [data-sx-style="cupertino"][data-theme="dark"] .sx-navbar-back-capsule { background: color-mix(in srgb, var(--sx-colorNeutralBackground3) 50%, transparent); border-color: color-mix(in srgb, var(--sx-colorNeutralStroke1) 25%, transparent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } /* --- FLUENT: minimal, speed transition --- */ [data-sx-style="fluent"] .sx-navbar-back-capsule { transition: background-color 0.1s ease; } /* --- CLASSIC: solid border, no effects --- */ [data-sx-style="classic"] .sx-navbar-back-capsule { border-radius: var(--sx-borderRadiusSmall); background: var(--sx-colorNeutralBackground3); border: 1px solid var(--sx-colorNeutralStroke1); box-shadow: none; } /* --- FUTURISTIC: brand-tinted glow --- */ [data-sx-style="futuristic"] .sx-navbar-back-capsule { background: transparent; border: 1px solid color-mix(in srgb, var(--sx-colorBrandBackground1) 30%, transparent); transition: all 0.3s ease; } [data-sx-style="futuristic"] .sx-navbar-back-capsule:hover { background: color-mix(in srgb, var(--sx-colorBrandBackground1) 8%, transparent); border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 50%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--sx-colorBrandBackground1) 20%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] .sx-navbar-back-capsule { border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 40%, transparent); } [data-sx-style="futuristic"][data-theme="dark"] .sx-navbar-back-capsule:hover { background: color-mix(in srgb, var(--sx-colorBrandBackground1) 12%, transparent); border-color: color-mix(in srgb, var(--sx-colorBrandBackground1) 60%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--sx-colorBrandBackground1) 35%, transparent); }