/* BioStudio AI — macOS theme. Activated when #os carries the `theme-macos` marker class (and for popups rendered outside #os). This re-skins the entire shell — windows with traffic-light controls, a floating Dock, macOS-style menus and Control Center — plus every app surface, so the desktop reads as macOS rather than Windows. Scoped entirely under .theme-macos so other themes are untouched. */ /* ---- Typography ---- */ body.theme-macos, #os.theme-macos { --taskbar-h: clamp(68px, calc(86px * var(--shell-scale)), 94px); --mac-menu-h: clamp(24px, calc(28px * var(--shell-scale)), 30px); --mac-dock-icon: clamp(44px, calc(56px * var(--shell-scale)), 62px); --mac-dock-app-icon: clamp(34px, calc(44px * var(--shell-scale)), 50px); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; --radius: 10px; --win-bg: rgba(246, 246, 248, 0.74); --win-body-bg: rgba(250, 250, 252, 0.64); --win-border: rgba(255, 255, 255, 0.46); --win-border-focus: rgba(255, 255, 255, 0.72); --titlebar-bg: rgba(246, 246, 248, 0.66); --flyout-bg: rgba(250, 250, 252, 0.72); --flyout-border: rgba(255, 255, 255, 0.46); --tile-bg: rgba(255, 255, 255, 0.34); --tile-hover: rgba(255, 255, 255, 0.52); --input-bg: rgba(255, 255, 255, 0.46); --input-border: rgba(0, 0, 0, 0.08); --surface: var(--win-body-bg); --text: var(--ink); --muted: var(--ink-soft); --border: var(--input-border); } #os.theme-macos.dark, body.theme-macos.dark, body.dark.theme-macos { --win-bg: rgba(34, 34, 40, 0.78); --win-body-bg: rgba(28, 28, 34, 0.66); --win-border: rgba(255, 255, 255, 0.1); --win-border-focus: rgba(255, 255, 255, 0.18); --titlebar-bg: rgba(42, 42, 49, 0.62); --flyout-bg: rgba(46, 46, 52, 0.76); --flyout-border: rgba(255, 255, 255, 0.1); --tile-bg: rgba(255, 255, 255, 0.08); --tile-hover: rgba(255, 255, 255, 0.14); --input-bg: rgba(255, 255, 255, 0.08); --input-border: rgba(255, 255, 255, 0.12); --surface: var(--win-body-bg); --border: var(--input-border); } /* ====================================================================== */ /* Window chrome — traffic-light controls, centered title, rounded corners */ /* ====================================================================== */ #os.theme-macos .window { border-radius: 11px; backdrop-filter: blur(44px) saturate(1.55); -webkit-backdrop-filter: blur(44px) saturate(1.55); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38), 0 0 0 0.5px rgba(0, 0, 0, 0.12); } #os.theme-macos .window.maximized { border-radius: 0; } #os.theme-macos .window.snapped { border-radius: 11px; } #os.theme-macos .window-titlebar { position: relative; height: clamp(34px, calc(38px * var(--shell-scale)), 40px); padding: 0; justify-content: center; border-bottom-color: rgba(0, 0, 0, 0.06); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); } #os.theme-macos.dark .window-titlebar { border-bottom-color: rgba(255, 255, 255, 0.08); } #os.theme-macos .window-title-text { font-size: 13px; font-weight: 600; gap: 6px; } #os.theme-macos .window-title-icon { display: none; } #os.theme-macos .window:not(.focused) .window-titlebar { opacity: 1; } #os.theme-macos .window:not(.focused) .window-title-label { color: var(--ink-soft); } #os.theme-macos .window-controls { position: absolute; left: 13px; top: 0; height: 100%; display: flex; align-items: center; gap: 8px; z-index: 6; } #os.theme-macos .window-title-text { pointer-events: none; max-width: calc(100% - 300px); } #os.theme-macos .window:not(.focused) .win-theme-dot { opacity: 0.55; } #os.theme-macos .win-btn { width: 12px; height: 12px; border-radius: 50%; padding: 0; color: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); } #os.theme-macos .win-btn.close { order: 1; background: #ff5f57; } #os.theme-macos .win-btn.min { order: 2; background: #febc2e; } #os.theme-macos .win-btn.max { order: 3; background: #28c840; } #os.theme-macos .win-btn svg { width: 8px; height: 8px; opacity: 0; transition: opacity 0.1s ease; } #os.theme-macos .window-controls:hover .win-btn svg { opacity: 1; } #os.theme-macos .win-btn:hover { filter: brightness(0.93); } /* keep traffic-light close behavior instead of default destructive styling */ #os.theme-macos .win-btn.close:hover { background: #ff5f57; color: rgba(0, 0, 0, 0.6); } /* dim traffic lights when the window is not focused (macOS behavior) */ #os.theme-macos .window:not(.focused) .win-btn { background: #d6d6d8; box-shadow: none; } #os.theme-macos.dark .window:not(.focused) .win-btn { background: #54545a; } #os.theme-macos .resize-handle { width: 14px; height: 14px; cursor: nwse-resize; } #os.theme-macos .window.drop-target { outline-color: var(--accent); outline-offset: -4px; } /* Desktop icons keep macOS-style selection and label treatment. */ #os.theme-macos .desktop-icon { border-radius: 12px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35); } #os.theme-macos .desktop-icon:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.1)); } #os.theme-macos .desktop-icon.selected { background: linear-gradient(180deg, rgba(10, 132, 255, 0.32), rgba(10, 132, 255, 0.22)); border-color: rgba(10, 132, 255, 0.55); box-shadow: 0 6px 18px rgba(10, 80, 200, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22); } #os.theme-macos .desktop-rename { border-radius: 6px; border-color: #0a84ff; } /* Finder-style desktop folders. */ #os.theme-macos .desktop-native-folder::before { left: 5%; width: 45%; height: 35%; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #8ed8ff, #38a9ef); } #os.theme-macos .desktop-native-folder::after { inset: 19% 0 0; border-color: rgba(0, 85, 155, 0.28); border-radius: 6px 7px 8px 8px; background: linear-gradient(165deg, #73ceff 0%, #34aaf4 52%, #1688dc 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), inset 0 -1px 0 rgba(0, 78, 150, 0.22); } #os.theme-macos .desktop-native-folder-arrow { color: #fff; text-shadow: 0 1px 2px rgba(0, 61, 120, 0.55); } /* ====================================================================== */ /* Dock (the taskbar) + Control Center pill */ /* ====================================================================== */ #os.theme-macos .desktop-surface { --taskbar-clearance: calc(var(--taskbar-h) + clamp(4px, calc(8px * var(--shell-scale)), 10px)); inset: var(--mac-menu-h) 0 max(var(--taskbar-clearance), var(--os-system-dock-clearance, 0px)) 0; } /* Keep the menu-bar inset, but give hidden Dock space back to the desktop. */ #os.theme-macos.taskbar-autohide .desktop-surface { inset: var(--mac-menu-h) 0 max(0px, var(--os-system-dock-clearance, 0px)) 0; } /* Put Dock clearance back only for the time it is actually revealed. */ #os.theme-macos.taskbar-autohide.taskbar-revealed .desktop-surface, #os.theme-macos.taskbar-autohide:has(.taskbar:focus-within) .desktop-surface, #os.theme-macos.taskbar-autohide:has(.taskbar:hover) .desktop-surface { inset: var(--mac-menu-h) 0 max(var(--taskbar-clearance), var(--os-system-dock-clearance, 0px)) 0; } #os.theme-macos .mac-menu-bar { position: absolute; left: 0; right: 0; top: 0; height: var(--mac-menu-h); z-index: 9200; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(6px, calc(12px * var(--shell-scale)), 12px); color: var(--ink); background: rgba(242, 242, 244, 0.56); border-bottom: 0.5px solid rgba(255, 255, 255, 0.4); backdrop-filter: blur(52px) saturate(1.9); -webkit-backdrop-filter: blur(52px) saturate(1.9); font-size: clamp(11px, calc(12.5px * var(--shell-scale)), 13px); font-weight: 600; } #os.theme-macos.dark .mac-menu-bar { background: rgba(30, 30, 34, 0.62); border-bottom-color: rgba(255, 255, 255, 0.1); } #os.theme-macos .mac-menu-left, #os.theme-macos .mac-menu-right { display: flex; align-items: center; gap: 2px; min-width: 0; } #os.theme-macos .mac-menu-left { flex: 1 1 auto; } #os.theme-macos .mac-menu-right { flex: 0 0 auto; } #os.theme-macos .mac-apple, #os.theme-macos .mac-menu-app, #os.theme-macos .mac-menu-item, #os.theme-macos .mac-menu-icon, #os.theme-macos .mac-menu-clock { height: 23px; display: flex; align-items: center; border-radius: 5px; padding: 0 8px; color: var(--ink); } #os.theme-macos .mac-apple { font-size: 17px; line-height: 1; padding: 0 9px; } #os.theme-macos .mac-menu-app { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #os.theme-macos .mac-menu-icon { width: 24px; justify-content: center; padding: 0; } #os.theme-macos .mac-menu-icon .icon { width: 15px; height: 15px; } #os.theme-macos .mac-menu-clock { min-width: 132px; justify-content: center; font-variant-numeric: tabular-nums; } #os.theme-macos .mac-apple:hover, #os.theme-macos .mac-menu-app:hover, #os.theme-macos .mac-menu-item:hover, #os.theme-macos .mac-menu-icon:hover, #os.theme-macos .mac-menu-clock:hover { background: rgba(255, 255, 255, 0.32); } #os.theme-macos.dark .mac-apple:hover, #os.theme-macos.dark .mac-menu-app:hover, #os.theme-macos.dark .mac-menu-item:hover, #os.theme-macos.dark .mac-menu-icon:hover, #os.theme-macos.dark .mac-menu-clock:hover { background: rgba(255, 255, 255, 0.11); } #os.theme-macos .taskbar { height: var(--taskbar-h); pointer-events: none; background: transparent; border-top: none; backdrop-filter: none; -webkit-backdrop-filter: none; align-items: end; padding: 0 0 clamp(8px, calc(10px * var(--shell-scale)), 12px); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } #os.theme-macos.dock-hidden .desktop-surface { /* Keep a floor so an OS dock overlaying the browser cannot cover window chrome. */ inset: var(--mac-menu-h) 0 max(0px, var(--os-system-dock-clearance, 0px)) 0; } #os.theme-macos.dock-hidden .taskbar { transform: translateY(100%); opacity: 0; pointer-events: none; } #os.theme-macos .taskbar-left { display: none; } #os.theme-macos .taskbar-right, #os.theme-macos .tb-show-desktop, #os.theme-macos .taskbar .taskbar-center > .tb-icon-btn:not(.taskbar-start), #os.theme-macos .tb-desktop-pill { display: none !important; } #os.theme-macos .taskbar-center { align-self: end; display: flex; align-items: end; gap: clamp(5px, calc(7px * var(--shell-scale)), 9px); max-width: min(calc(100vw - 24px), 980px); min-height: calc(var(--mac-dock-icon) + 16px); padding: clamp(6px, calc(7px * var(--shell-scale)), 8px) clamp(9px, calc(13px * var(--shell-scale)), 15px); border-radius: clamp(19px, calc(22px * var(--shell-scale)), 25px); pointer-events: auto; background: rgba(236, 238, 244, 0.46); backdrop-filter: blur(58px) saturate(1.95); -webkit-backdrop-filter: blur(58px) saturate(1.95); border: 0.5px solid rgba(255, 255, 255, 0.66); box-shadow: 0 22px 54px rgba(0, 0, 0, 0.36), 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 -1px 0 rgba(0, 0, 0, 0.08) inset; } #os.theme-macos.dark .taskbar-center { background: rgba(52, 52, 58, 0.5); border-color: rgba(255, 255, 255, 0.12); } #os.theme-macos .taskbar-apps { order: 1; align-items: end; gap: clamp(5px, calc(7px * var(--shell-scale)), 9px); } #os.theme-macos .tb-icon-btn, #os.theme-macos .task-btn { width: var(--mac-dock-icon); height: var(--mac-dock-icon); min-width: var(--mac-dock-icon); border-radius: 14px; background: transparent; transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.12s ease, filter 0.12s ease; } #os.theme-macos .taskbar-start { order: 2; color: rgba(0, 0, 0, 0.72); background: transparent; box-shadow: none; } #os.theme-macos.dark .taskbar-start { color: rgba(255, 255, 255, 0.88); background: transparent; box-shadow: none; } #os.theme-macos .tb-icon-btn .icon { width: clamp(24px, calc(30px * var(--shell-scale)), 32px); height: clamp(24px, calc(30px * var(--shell-scale)), 32px); } #os.theme-macos .task-btn-icon, #os.theme-macos .task-btn-icon .icon { width: var(--mac-dock-app-icon); height: var(--mac-dock-app-icon); } #os.theme-macos .tb-icon-btn:hover, #os.theme-macos .task-btn:hover { transform: translateY(clamp(-7px, calc(-8px * var(--shell-scale)), -5px)) scale(1.1); background: rgba(255, 255, 255, 0.18); } #os.theme-macos.dark .tb-icon-btn:hover, #os.theme-macos.dark .task-btn:hover { background: rgba(255, 255, 255, 0.1); } #os.theme-macos .task-btn.active { background: transparent; } /* running indicator becomes a single dot beneath the icon */ #os.theme-macos .task-btn-indicator { bottom: -5px; width: 4px !important; height: 4px; border-radius: 50%; background: rgba(35, 35, 38, 0.86) !important; box-shadow: none !important; } #os.theme-macos.dark .task-btn-indicator { background: rgba(245, 245, 247, 0.86) !important; } #os.theme-macos .task-btn.running .task-btn-indicator { opacity: 0.85; } #os.theme-macos .task-btn:not(.running) .task-btn-indicator { opacity: 0; } /* virtual-desktop pill sits inside the dock */ #os.theme-macos .tb-desktop-pill { height: 40px; border-radius: 14px; background: rgba(255, 255, 255, 0.28); } #os.theme-macos.dark .tb-desktop-pill { background: rgba(255, 255, 255, 0.1); } /* The real Control Center / clock live in the top menu bar in macOS mode. */ #os.theme-macos .taskbar-right { align-self: end; margin-bottom: 14px; gap: 4px; } #os.theme-macos .taskbar-tray { height: 30px; padding: 0 6px; border-radius: 15px; background: rgba(255, 255, 255, 0.32); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); border: 1px solid rgba(255, 255, 255, 0.5); } #os.theme-macos.dark .taskbar-tray { background: rgba(46, 46, 54, 0.5); border-color: rgba(255, 255, 255, 0.12); } #os.theme-macos .tb-style-toggle { height: 24px; border-radius: 12px; } #os.theme-macos .mac-style-toggle { display: none !important; } #os.theme-macos .tray-clock { height: 30px; } #os.theme-macos .tb-show-desktop { display: none; } /* ====================================================================== */ /* Start menu is Windows-only; macOS uses fullscreen Launchpad (launchpad.css) */ /* ====================================================================== */ /* ====================================================================== */ /* Context menus (rendered on ) */ /* ====================================================================== */ body.theme-macos .ctx-menu { --menu-bg: rgba(250, 250, 252, 0.72); --menu-border: rgba(0, 0, 0, 0.08); border-radius: 9px; padding: 5px; min-width: 200px; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28), 0 0 0 0.5px rgba(0, 0, 0, 0.1); } body.theme-macos.dark .ctx-menu { --menu-bg: #ffffff; --menu-border: rgba(15, 23, 42, 0.12); color: #132238; } body.theme-macos .ctx-item { height: 26px; border-radius: 5px; gap: 8px; } body.theme-macos .ctx-item:hover:not([disabled]) { background: var(--accent); color: #fff; } body.theme-macos .ctx-item:hover:not([disabled]) .ctx-icon, body.theme-macos .ctx-item:hover:not([disabled]) .ctx-shortcut, body.theme-macos .ctx-item:hover:not([disabled]) .ctx-arrow, body.theme-macos .ctx-item:hover:not([disabled]) .ctx-check { color: #fff; } body.theme-macos .ctx-item.danger:hover:not([disabled]) { background: #ff453a; color: #fff; } /* taskbar window previews + snap flyout (also on ) */ body.theme-macos .tb-preview-popover, body.theme-macos .snap-flyout { --menu-bg: rgba(250, 250, 252, 0.74); --menu-border: rgba(0, 0, 0, 0.08); border-radius: 14px; } body.theme-macos.dark .tb-preview-popover, body.theme-macos.dark .snap-flyout { --menu-bg: rgba(46, 46, 52, 0.84); --menu-border: rgba(255, 255, 255, 0.1); } body.theme-macos .tb-preview { border-radius: 10px; } body.theme-macos .tb-preview:hover { background: rgba(0, 0, 0, 0.06); } body.theme-macos.dark .tb-preview:hover { background: rgba(255, 255, 255, 0.08); } body.theme-macos .tb-thumb-wrap { border-radius: 9px; } body.theme-macos .snap-preview { background: rgba(10, 132, 255, 0.22); border-color: rgba(10, 132, 255, 0.6); } body.theme-macos .snap-layout { border-radius: 10px; } body.theme-macos .snap-cell { border-radius: 5px; background: #0a84ff; } /* ====================================================================== */ /* Control Center flyouts */ /* ====================================================================== */ #os.theme-macos .flyout { border-radius: 18px; } #os.theme-macos .qs-tile { border-radius: 14px; } #os.theme-macos .nc-item { border-radius: 14px; } #os.theme-macos .qs-tile.on, #os.theme-macos .cal-cell.today { background: #0a84ff; } #os.theme-macos .qs-slider::-webkit-slider-thumb { background: #fff; border-color: #0a84ff; box-shadow: 0 0 0 1px #0a84ff, 0 1px 5px rgba(0, 0, 0, 0.25); } /* macOS-style notifications */ #os.theme-macos .toast-layer { bottom: 92px; } #os.theme-macos .toast { border-radius: 16px; background: rgba(250, 250, 252, 0.76); backdrop-filter: blur(34px) saturate(1.55); -webkit-backdrop-filter: blur(34px) saturate(1.55); } #os.theme-macos.dark .toast { background: rgba(46, 46, 52, 0.78); } /* ====================================================================== */ /* Shared app chrome — pill buttons, rounded fields, translucent toolbars */ /* ====================================================================== */ #os.theme-macos .app-toolbar, #os.theme-macos .files-toolbar { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom-color: rgba(0, 0, 0, 0.06); } #os.theme-macos.dark .app-toolbar, #os.theme-macos.dark .files-toolbar { background: rgba(40, 40, 47, 0.6); border-bottom-color: rgba(255, 255, 255, 0.08); } #os.theme-macos .app-statusbar { background: rgba(255, 255, 255, 0.28); border-top-color: rgba(0, 0, 0, 0.06); } #os.theme-macos.dark .app-statusbar { background: rgba(255, 255, 255, 0.04); border-top-color: rgba(255, 255, 255, 0.08); } #os.theme-macos .btn { border-radius: 8px; font-weight: 500; } #os.theme-macos .btn.primary { background: #0a84ff; } #os.theme-macos .field { border-radius: 8px; } #os.theme-macos .field:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } /* Built-in app surfaces */ #os.theme-macos .calc-display, #os.theme-macos .calc-key, #os.theme-macos .files-sidebar, #os.theme-macos .files-path, #os.theme-macos .files-preview, #os.theme-macos .files-home-card, #os.theme-macos .theme-card, #os.theme-macos .seq-input, #os.theme-macos .seq-stat, #os.theme-macos .ad-formpane, #os.theme-macos .ad-tabs, #os.theme-macos .ad-row, #os.theme-macos .ad-schem-card, #os.theme-macos .ad-protocol { background: rgba(255, 255, 255, 0.42); border-color: rgba(0, 0, 0, 0.06); } #os.theme-macos.dark .calc-display, #os.theme-macos.dark .calc-key, #os.theme-macos.dark .files-sidebar, #os.theme-macos.dark .files-path, #os.theme-macos.dark .files-preview, #os.theme-macos.dark .files-home-card, #os.theme-macos.dark .theme-card, #os.theme-macos.dark .seq-input, #os.theme-macos.dark .seq-stat, #os.theme-macos.dark .ad-formpane, #os.theme-macos.dark .ad-tabs, #os.theme-macos.dark .ad-row, #os.theme-macos.dark .ad-schem-card, #os.theme-macos.dark .ad-protocol { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); } #os.theme-macos .calc-key, #os.theme-macos .files-home-card, #os.theme-macos .file-item, #os.theme-macos .theme-card, #os.theme-macos .seq-stat, #os.theme-macos .ad-row, #os.theme-macos .ad-schem-card, #os.theme-macos .ad-tab, #os.theme-macos .files-side-item { border-radius: 11px; } #os.theme-macos .files-home-card:hover, #os.theme-macos .file-item:hover, #os.theme-macos .files-side-item:hover, #os.theme-macos .theme-card:hover, #os.theme-macos .ad-tab:hover { background: rgba(255, 255, 255, 0.58); } #os.theme-macos.dark .files-home-card:hover, #os.theme-macos .file-item.selected { background: rgba(10, 132, 255, 0.2); outline-color: rgba(10, 132, 255, 0.55); } #os.theme-macos.dark .file-item.selected { background: rgba(10, 132, 255, 0.28); outline-color: rgba(10, 132, 255, 0.65); } #os.theme-macos.dark .file-item:hover, #os.theme-macos.dark .files-side-item:hover, #os.theme-macos.dark .theme-card:hover, #os.theme-macos.dark .ad-tab:hover { background: rgba(255, 255, 255, 0.1); } #os.theme-macos .files-side-item.active, #os.theme-macos .theme-card.active, #os.theme-macos .ad-tab.active { background: rgba(10, 132, 255, 0.16); color: #0a84ff; border-color: rgba(10, 132, 255, 0.35); } #os.theme-macos .files-text-preview { font-family: "SF Mono", Menlo, Monaco, Consolas, monospace; } #os.theme-macos .option-icon { font-size: 26px; } /* Studio design system picks up the macOS accent automatically via --st-accent: var(--accent); just soften its panels + radii here. */ #os.theme-macos .studio { --st-accent: #0a84ff; --st-bg: rgba(250, 250, 252, 0.36); --st-panel: rgba(255, 255, 255, 0.46); --st-line: rgba(0, 0, 0, 0.08); --st-line-soft: rgba(0, 0, 0, 0.045); } #os.theme-macos.dark .studio { --st-bg: rgba(28, 28, 34, 0.46); --st-panel: rgba(255, 255, 255, 0.06); --st-line: rgba(255, 255, 255, 0.1); --st-line-soft: rgba(255, 255, 255, 0.06); } #os.theme-macos .studio .btn, #os.theme-macos .studio button { border-radius: 8px; } #os.theme-macos .st-toolbar, #os.theme-macos .st-sidebar, #os.theme-macos .st-inspector, #os.theme-macos .st-ai, #os.theme-macos .st-card, #os.theme-macos .st-slide, #os.theme-macos .st-input, #os.theme-macos .st-btn, #os.theme-macos .st-tbtn, #os.theme-macos .st-table-wrap { backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); border-radius: 10px; } #os.theme-macos .st-toolbar, #os.theme-macos .st-sidebar, #os.theme-macos .st-inspector, #os.theme-macos .st-ai { border-radius: 0; } #os.theme-macos .st-nav-item.active { background: rgba(10, 132, 255, 0.16); color: #0a84ff; } /* Clipboard Library follows the same mac panel system. */ #os.theme-macos .clib { --cl-accent: #0a84ff; --cl-bg: rgba(250, 250, 252, 0.36); --cl-panel: rgba(255, 255, 255, 0.46); --cl-line: rgba(0, 0, 0, 0.08); --cl-line-soft: rgba(0, 0, 0, 0.045); } #os.theme-macos.dark .clib { --cl-bg: rgba(28, 28, 34, 0.46); --cl-panel: rgba(255, 255, 255, 0.06); --cl-line: rgba(255, 255, 255, 0.1); --cl-line-soft: rgba(255, 255, 255, 0.06); } #os.theme-macos .clib-toolbar, #os.theme-macos .clib-side, #os.theme-macos .clib-inspect, #os.theme-macos .clib-card, #os.theme-macos .clib-preview, #os.theme-macos .clib-clip-card, #os.theme-macos .clib-input, #os.theme-macos .clib-btn { backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); border-radius: 10px; } #os.theme-macos .clib-toolbar, #os.theme-macos .clib-side, #os.theme-macos .clib-inspect { border-radius: 0; } #os.theme-macos .clib-card.sel { border-color: rgba(10, 132, 255, 0.65); box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.65) inset; } /* Graph Studio (embedded) — remap its blue/teal palette to macOS blue. */ #os.theme-macos .graph-studio-app { --pr-blue: #0a84ff; --pr-teal: #0a84ff; } /* ====================================================================== */ /* Task View — tint the active desktop ring with the macOS accent */ /* ====================================================================== */ #os.theme-macos .tv-window { border-radius: 12px; } #os.theme-macos .task-view .tv-scrim { background: rgba(18, 20, 28, 0.42); backdrop-filter: blur(34px) saturate(1.35); -webkit-backdrop-filter: blur(34px) saturate(1.35); } #os.theme-macos .tv-window, #os.theme-macos .tv-desktop, #os.theme-macos .tv-add { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.18); } #os.theme-macos .tv-window:hover, #os.theme-macos .tv-desktop:hover, #os.theme-macos .tv-add:hover { background: rgba(255, 255, 255, 0.24); } #os.theme-macos .tv-window-head { background: rgba(0, 0, 0, 0.18); } #os.theme-macos .tv-desktop-preview { background: radial-gradient(260px 160px at 72% 12%, rgba(255, 160, 120, 0.6), transparent 62%), radial-gradient(240px 180px at 20% 28%, rgba(255, 110, 170, 0.5), transparent 64%), linear-gradient(155deg, #6b3ab1, #c0517f 62%, #ff8a6a); } #os.theme-macos.dark .tv-desktop-preview { background: radial-gradient(260px 160px at 72% 12%, rgba(120, 80, 200, 0.6), transparent 62%), radial-gradient(240px 180px at 20% 28%, rgba(60, 70, 160, 0.5), transparent 64%), linear-gradient(155deg, #121433, #221a44 65%, #3a2360); } #os.theme-macos .tv-desktop.active { border-color: #0a84ff; } #os.theme-macos .tv-mini-win { border-radius: 5px; } /* macOS-style thin scrollbars */ #os.theme-macos ::-webkit-scrollbar { width: 10px; height: 10px; } #os.theme-macos ::-webkit-scrollbar-thumb { background: rgba(120, 130, 150, 0.45); border: 2px solid transparent; border-radius: 8px; background-clip: padding-box; } /* Global search palette — match macOS frosted flyouts (not the Windows fallback) */ body.theme-macos .bs-search-overlay { background: rgba(0, 0, 0, 0.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body.theme-macos .bs-search-box { background: var(--flyout-bg, rgba(246, 246, 248, 0.86)); color: var(--ink); border: 1px solid var(--flyout-border, rgba(0, 0, 0, 0.08)); border-radius: 14px; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); } body.theme-macos .bs-search-head { border-bottom-color: var(--flyout-border, rgba(0, 0, 0, 0.08)); padding: 12px 14px; } body.theme-macos .bs-search-mag { color: #0a84ff; opacity: 1; } body.theme-macos .bs-search-esc { border-color: rgba(0, 0, 0, 0.12); border-radius: 6px; color: var(--ink-soft); } body.theme-macos .bs-search-group { color: #0a84ff; opacity: 0.9; } body.theme-macos .bs-search-row { border-radius: 8px; } body.theme-macos .bs-search-row.active { background: rgba(10, 132, 255, 0.12); } body.theme-macos .bs-search-sub, body.theme-macos .bs-search-hint { color: var(--ink-soft); } body.theme-macos .bs-search-app { color: var(--ink-soft); border-color: rgba(0, 0, 0, 0.1); opacity: 1; } body.theme-macos.dark .bs-search-esc, body.dark.theme-macos .bs-search-esc { border-color: rgba(255, 255, 255, 0.14); } body.theme-macos.dark .bs-search-app, body.dark.theme-macos .bs-search-app { border-color: rgba(255, 255, 255, 0.12); }