/* 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 { --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); } #os.theme-macos.dark { --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); } /* ====================================================================== */ /* 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: 38px; 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; } #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: 10px; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); } #os.theme-macos .desktop-icon:hover { background: rgba(255, 255, 255, 0.16); } #os.theme-macos .desktop-icon.selected { background: rgba(10, 132, 255, 0.24); border-color: rgba(10, 132, 255, 0.46); } #os.theme-macos .desktop-rename { border-radius: 6px; border-color: #0a84ff; } /* ====================================================================== */ /* Dock (the taskbar) + Control Center pill */ /* ====================================================================== */ #os.theme-macos .desktop-surface { inset: 26px 0 90px 0; } #os.theme-macos .mac-menu-bar { position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 9200; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: var(--ink); background: rgba(255, 255, 255, 0.36); border-bottom: 1px solid rgba(255, 255, 255, 0.38); backdrop-filter: blur(34px) saturate(1.6); -webkit-backdrop-filter: blur(34px) saturate(1.6); font-size: 13px; font-weight: 600; } #os.theme-macos.dark .mac-menu-bar { background: rgba(28, 28, 34, 0.5); 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: 3px; 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: 22px; display: flex; align-items: center; border-radius: 5px; padding: 0 7px; 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: 25px; justify-content: center; padding: 0; } #os.theme-macos .mac-menu-icon .icon { width: 15px; height: 15px; } #os.theme-macos .mac-menu-clock { min-width: 156px; 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: 76px; background: transparent; border-top: none; backdrop-filter: none; -webkit-backdrop-filter: none; align-items: end; padding-bottom: 8px; } #os.theme-macos.dock-hidden .desktop-surface { inset: 26px 0 0 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; gap: 7px; padding: 6px 12px; border-radius: 22px; background: rgba(255, 255, 255, 0.32); backdrop-filter: blur(42px) saturate(1.7); -webkit-backdrop-filter: blur(42px) saturate(1.7); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 14px 44px rgba(0, 0, 0, 0.32); } #os.theme-macos.dark .taskbar-center { background: rgba(46, 46, 54, 0.42); border-color: rgba(255, 255, 255, 0.12); } #os.theme-macos .tb-icon-btn, #os.theme-macos .task-btn { width: 52px; height: 52px; border-radius: 14px; transition: transform 0.13s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.12s ease; } #os.theme-macos .taskbar-start { color: var(--ink); } #os.theme-macos .taskbar-start .icon { color: inherit; } #os.theme-macos .tb-icon-btn .icon { width: 28px; height: 28px; } #os.theme-macos .task-btn-icon, #os.theme-macos .task-btn-icon .icon { width: 42px; height: 42px; } #os.theme-macos .tb-icon-btn:hover, #os.theme-macos .task-btn:hover { transform: translateY(-8px) scale(1.12); background: transparent; } #os.theme-macos .task-btn.active { background: transparent; } /* running indicator becomes a single dot beneath the icon */ #os.theme-macos .task-btn-indicator { bottom: -2px; width: 4px !important; height: 4px; border-radius: 50%; background: var(--ink) !important; box-shadow: none !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 .tray-clock { height: 30px; } #os.theme-macos .tb-show-desktop { display: none; } /* ====================================================================== */ /* Start menu → Launchpad-style translucent panel */ /* ====================================================================== */ #os.theme-macos .start-menu { bottom: 90px; width: min(720px, 94vw); border-radius: 22px; background: rgba(255, 255, 255, 0.26); backdrop-filter: blur(60px) saturate(1.8); -webkit-backdrop-filter: blur(60px) saturate(1.8); border-color: rgba(255, 255, 255, 0.4); } #os.theme-macos.dark .start-menu { background: rgba(34, 34, 40, 0.5); } #os.theme-macos .start-searchbar { border-radius: 12px; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.45); } #os.theme-macos .start-tile, #os.theme-macos .start-all-row, #os.theme-macos .start-rec { border-radius: 12px; } #os.theme-macos .start-tile:hover, #os.theme-macos .start-all-row:hover, #os.theme-macos .start-rec:hover, #os.theme-macos .start-allapps:hover, #os.theme-macos .start-back:hover, #os.theme-macos .start-power:hover { background: rgba(255, 255, 255, 0.38); } #os.theme-macos.dark .start-tile:hover, #os.theme-macos.dark .start-all-row:hover, #os.theme-macos.dark .start-rec:hover, #os.theme-macos.dark .start-allapps:hover, #os.theme-macos.dark .start-back:hover, #os.theme-macos.dark .start-power:hover { background: rgba(255, 255, 255, 0.1); } #os.theme-macos .user-avatar, #os.theme-macos .start-allapps, #os.theme-macos .start-back { background: rgba(255, 255, 255, 0.3); } /* ====================================================================== */ /* 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: rgba(46, 46, 52, 0.82); --menu-border: rgba(255, 255, 255, 0.1); color: #f3f4f8; } 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.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; } /* Prism (embedded) — remap its blue/teal palette to macOS blue. */ #os.theme-macos .prism-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; }