/** * Liquid Glass canvases — vibrancy on chrome, opaque readable content. * Spec: refs/user GUI audit (milky chrome + wallpaper bleed; dark apps charcoal; * Weather = sky material; Activity Monitor = flat opaque). */ /* ── Shared: opaque light canvases ─────────────────────────────── */ html.gg-liq-live .window:not([data-opaque-body]) .gg-opaque-canvas, html.gg-liq-live .window[data-app-id="finder"] .gg-finder-content, html.gg-liq-live .window[data-app-id="finder"] .gg-finder-stage, html.gg-liq-live .window[data-app-id="finder"] .gg-finder-preview, html.gg-liq-live .window[data-app-id="settings"] .gg-ss-main, html.gg-liq-live .window[data-app-id="settings"] .gg-ss-scroll, html.gg-liq-live .window[data-app-id="stocks"] .gg-stocks-detail, html.gg-liq-live .window[data-app-id="mail"] .gg-ml-mid, html.gg-liq-live .window[data-app-id="mail"] .gg-ml-read, html.gg-liq-live .window[data-app-id="mail"] .gg-ml-list, html.gg-liq-live .window[data-app-id="mail"] .gg-mail-list, html.gg-liq-live .window[data-app-id="mail"] .gg-mail-mid, html.gg-liq-live .window[data-app-id="mail"] .gg-mail-body, html.gg-liq-live .window[data-app-id="messages"] .gg-msg-thread, html.gg-liq-live .window[data-app-id="notes"] .gg-nt-paper, html.gg-liq-live .window[data-app-id="notes"] .gg-nt-ed, html.gg-liq-live .window[data-app-id="notes"] .gg-nt-scroll, html.gg-liq-live .window[data-app-id="calendar"] .gg-cal-main, html.gg-liq-live .window[data-app-id="reminders"] .gg-rem-main, html.gg-liq-live .window[data-app-id="contacts"] .gg-ct-detail, html.gg-liq-live .window[data-app-id="contacts"] .gg-ct-body, html.gg-liq-live .window[data-app-id="photos"] .gg-ph-main, html.gg-liq-live .window[data-app-id="photos"] .gg-ph-body, html.gg-liq-live .window[data-app-id="music"] .gg-mu-main, html.gg-liq-live .window[data-app-id="podcasts"] .gg-pd-main, html.gg-liq-live .window[data-app-id="appstore"] .gg-as-main, html.gg-liq-live .window[data-app-id="appstore"] .gg-as-content, html.gg-liq-live .window[data-app-id="safari"] .gg-safari-page, html.gg-liq-live .window[data-app-id="safari"] .gg-safari-webview, html.gg-liq-live .window[data-app-id="textedit"] .gg-te-paper, html.gg-liq-live .window[data-app-id="pages"] .gg-pg-page, html.gg-liq-live .window[data-app-id="pages"] .gg-pg-main, html.gg-liq-live .window[data-app-id="pages"] .gg-pg-chooser-main, html.gg-liq-live .window[data-app-id="pages"] .gg-pg-chooser-scroll, html.gg-liq-live .window[data-app-id="numbers"] .gg-num-main, html.gg-liq-live .window[data-app-id="numbers"] .gg-num-page, html.gg-liq-live .window[data-app-id="numbers"] .gg-num-chooser-main, html.gg-liq-live .window[data-app-id="numbers"] .gg-num-grid-wrap, html.gg-liq-live .window[data-app-id="numbers"] .gg-num-body, html.gg-liq-live .window[data-app-id="keynote"] .gg-kn-main, html.gg-liq-live .window[data-app-id="keynote"] .gg-kn-page, html.gg-liq-live .window[data-app-id="keynote"] .gg-kn-chooser-main, html.gg-liq-live .window[data-app-id="freeform"] .gg-ff-canvas, html.gg-liq-live .window[data-app-id="freeform"] .gg-ff-board, html.gg-liq-live .window[data-app-id="freeform"] .gg-ff-stage, html.gg-liq-live .window[data-app-id="freeform"] .gg-ff-world { background: #ffffff !important; background-color: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Settings content: milky near-opaque (not pure punch-through) */ html.gg-liq-live .window[data-app-id="settings"] .gg-ss-main, html.gg-liq-live .window[data-app-id="settings"] .gg-ss-scroll { background: rgba(246, 246, 248, 0.94) !important; } html.gg-liq-live .window[data-app-id="settings"] .gg-ss-card, html.gg-liq-live .window[data-app-id="settings"] .gg-ss-group, html.gg-liq-live .window[data-app-id="settings"] .gg-ss-panel { background: rgba(255, 255, 255, 0.92) !important; border: 0.5px solid rgba(0, 0, 0, 0.06) !important; } /* Chrome wash — sidebars / toolbars stay vibrant */ html.gg-liq-live .window:not([data-opaque-body]) .gg-chrome-wash, html.gg-liq-live .window:not([data-opaque-body]) .window-sidebar, html.gg-liq-live .window:not([data-opaque-body]) .gg-finder-sidebar, html.gg-liq-live .window:not([data-opaque-body]) .gg-ss-side, html.gg-liq-live .window:not([data-opaque-body]) .gg-mu-side, html.gg-liq-live .window:not([data-opaque-body]) .gg-pd-side, html.gg-liq-live .window:not([data-opaque-body]) .gg-nt-side, html.gg-liq-live .window:not([data-opaque-body]) .gg-nt-list, html.gg-liq-live .window:not([data-opaque-body]) .gg-ml-side, html.gg-liq-live .window:not([data-opaque-body]) .gg-mail-side, html.gg-liq-live .window:not([data-opaque-body]) .gg-msg-side, html.gg-liq-live .window:not([data-opaque-body]) .gg-msg-list, html.gg-liq-live .window:not([data-opaque-body]) .gg-cal-side, html.gg-liq-live .window:not([data-opaque-body]) .gg-rem-side, html.gg-liq-live .window:not([data-opaque-body]) .gg-ct-groups, html.gg-liq-live .window:not([data-opaque-body]) .gg-ct-list, html.gg-liq-live .window:not([data-opaque-body]) .gg-stocks-sidebar, html.gg-liq-live .window:not([data-opaque-body]) .gg-as-side, html.gg-liq-live .window:not([data-opaque-body]) .gg-ph-side, html.gg-liq-live .window:not([data-opaque-body]) .gg-pg-side, html.gg-liq-live .window:not([data-opaque-body]) .gg-pg-cats, html.gg-liq-live .window:not([data-opaque-body]) .gg-num-side, html.gg-liq-live .window:not([data-opaque-body]) .gg-num-chooser-side, html.gg-liq-live .window:not([data-opaque-body]) .gg-kn-side, html.gg-liq-live .window:not([data-opaque-body]) .gg-ff-sidebar, html.gg-liq-live .window:not([data-opaque-body]) .gg-ft-side { background: rgba(var(--gg-body-rgb), 0.16) !important; border-right-color: rgba(0, 0, 0, 0.06); } html[data-theme="dark"].gg-liq-live .window:not([data-opaque-body]) .gg-chrome-wash, html[data-theme="dark"].gg-liq-live .window:not([data-opaque-body]) .window-sidebar, html[data-theme="dark"].gg-liq-live .window:not([data-opaque-body]) .gg-finder-sidebar, html[data-theme="dark"].gg-liq-live .window:not([data-opaque-body]) .gg-ss-side, html[data-theme="dark"].gg-liq-live .window:not([data-opaque-body]) .gg-mu-side, html[data-theme="dark"].gg-liq-live .window:not([data-opaque-body]) .gg-nt-side, html[data-theme="dark"].gg-liq-live .window:not([data-opaque-body]) .gg-ml-side, html[data-theme="dark"].gg-liq-live .window:not([data-opaque-body]) .gg-msg-side, html[data-theme="dark"].gg-liq-live .window:not([data-opaque-body]) .gg-stocks-sidebar, html[data-theme="dark"].gg-liq-live .window:not([data-opaque-body]) .gg-as-side { background: rgba(var(--gg-body-rgb), 0.14) !important; border-right-color: rgba(255, 255, 255, 0.08); } /* ── Weather: full-window sky material + darker frosted tiles ─── */ html.gg-liq-live .window[data-app-id="weather"] .gg-weather-card, html.gg-liq-live .window[data-app-id="weather"] .gg-panel-card, html.gg-liq-live .window[data-app-id="weather"] .gg-hour-card, html.gg-liq-live .window[data-app-id="weather"] .gg-detail-card { background: rgba(20, 90, 170, 0.38) !important; border: 0.5px solid rgba(255, 255, 255, 0.18) !important; color: #fff !important; backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); } /* ── Calculator / Clock / Terminal: charcoal glass body ───────── */ html.gg-liq-live .window[data-app-id="calculator"] .gg-calc, html.gg-liq-live .window[data-app-id="calculator"] .gg-app, html.gg-liq-live .window[data-app-id="clock"] .gg-clk, html.gg-liq-live .window[data-app-id="clock"] .gg-suite, html.gg-liq-live .window[data-app-id="clock"] .gg-suite-dark, html.gg-liq-live .window[data-app-id="terminal"] .gg-te, html.gg-liq-live .window[data-app-id="terminal"] .gg-term, html.gg-liq-live .window[data-app-id="terminal"] .gg-terminal { background: transparent !important; color: #f5f5f7; } /* ── TV: navy glass sidebar, near-opaque dark hero ────────────── */ html.gg-liq-live .window[data-app-id="tv"] .gg-tv-side { background: rgba(18, 22, 48, 0.42) !important; } html.gg-liq-live .window[data-app-id="tv"] .gg-tv-main, html.gg-liq-live .window[data-app-id="tv"] .gg-tv-content, html.gg-liq-live .window[data-app-id="tv"] .gg-tv-hero { background: rgba(12, 14, 28, 0.92) !important; color: #f5f5f7; } /* ── FaceTime: opaque video surface; glass control flyouts ────── */ html.gg-liq-live .window[data-app-id="facetime"] .gg-ft-stage, html.gg-liq-live .window[data-app-id="facetime"] .gg-ft-remote, html.gg-liq-live .window[data-app-id="facetime"] .gg-ft-main, html.gg-liq-live .window[data-app-id="facetime"] .gg-ft-call { background: #0a0a0c !important; } html.gg-liq-live .window[data-app-id="facetime"] .gg-ft-panel, html.gg-liq-live .window[data-app-id="facetime"] .gg-ft-incoming-card, html.gg-liq-live .window[data-app-id="facetime"] .gg-ft-sheet-card { background: rgba(230, 245, 250, 0.45) !important; backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 0.5px solid rgba(255, 255, 255, 0.35); } /* ── Maps: scenic opaque map; floating panels stay glass ──────── */ html.gg-liq-live .window[data-app-id="maps"] .gg-maps-canvas, html.gg-liq-live .window[data-opaque-body][data-app-id="maps"] .window-body { background: #d8e6f0 !important; } html.gg-liq-live .window[data-app-id="maps"] .gg-maps-side, html.gg-liq-live .window[data-app-id="maps"] .gg-maps-route-card, html.gg-liq-live .window[data-app-id="maps"] .gg-maps-ctrl, html.gg-liq-live .window[data-app-id="maps"] .gg-maps-zoom, html.gg-liq-live .window[data-app-id="maps"] .gg-maps-weather, html.gg-liq-live .window[data-app-id="maps"] .gg-maps-compass { background: rgba(230, 245, 248, 0.55) !important; backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 0.5px solid rgba(255, 255, 255, 0.35); } /* ── Preview: opaque content (window already data-opaque-body) ── */ html.gg-liq-live .window[data-app-id="preview"] .gg-pv-stage, html.gg-liq-live .window[data-app-id="preview"] .window-body { background: #f5f5f7 !important; } html.gg-liq-live .window[data-app-id="preview"] .gg-pv-markup, html.gg-liq-live .window[data-app-id="preview"] .gg-pv-dialog, html.gg-liq-live .window[data-app-id="preview"] .gg-pv-side { background: rgba(246, 246, 248, 0.55) !important; backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); } /* ── Activity Monitor: FLAT opaque — no liquid glass ──────────── */ html.gg-liq-live .window[data-app-id="activity"], html.gg-liq-live .window[data-opaque-body][data-app-id="activity"] { background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.gg-liq-live .window[data-app-id="activity"] .window-toolbar, html.gg-liq-live .window[data-app-id="activity"] .window-body, html.gg-liq-live .window[data-app-id="activity"] .gg-act, html.gg-liq-live .window[data-app-id="activity"] .gg-suite { background: #ffffff !important; color: #1d1d1f; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── Photos: floating toolbar strongest glass over mosaic ─────── */ html.gg-liq-live .window[data-app-id="photos"] .gg-ph-toolbar, html.gg-liq-live .window[data-app-id="photos"] .gg-ph-chrome { background: rgba(246, 246, 248, 0.42) !important; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); } /* ── Music / Podcasts: floating mini-player glass ─────────────── */ html.gg-liq-live .window[data-app-id="music"] .gg-mu-player, html.gg-liq-live .window[data-app-id="podcasts"] .gg-pd-player { background: rgba(246, 246, 248, 0.55) !important; backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); border: 0.5px solid rgba(255, 255, 255, 0.35); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); } /* ── Freeform: collab / share popovers strong glass ───────────── */ html.gg-liq-live .window[data-app-id="freeform"] .gg-ff-popover, html.gg-liq-live .window[data-app-id="freeform"] .gg-ff-sheet, html.gg-liq-live .window[data-app-id="freeform"] .gg-ff-menu, html.gg-liq-live .window[data-app-id="freeform"] .gg-ff-chrome { background: rgba(255, 248, 240, 0.5) !important; backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); } /* ── Stocks: detail toolbar vibrancy over opaque chart ────────── */ html.gg-liq-live .window[data-app-id="stocks"] .gg-stocks-detail-toolbar { background: rgba(246, 246, 248, 0.5) !important; border-bottom: 0.5px solid rgba(0, 0, 0, 0.06); } /* ── Safari: frosted toolbar; page already opaque above ───────── */ html.gg-liq-live .window[data-app-id="safari"] .gg-safari-toolbar, html.gg-liq-live .window[data-app-id="safari"] .gg-safari-chrome { background: rgba(246, 246, 248, 0.45) !important; } /* ── TextEdit: frosted toolbar / sheets ────────────────────────── */ html.gg-liq-live .window[data-app-id="textedit"] .gg-te-toolbar, html.gg-liq-live .window[data-app-id="textedit"] .gg-te-ruler, html.gg-liq-live .window[data-app-id="textedit"] .gg-te-bar { background: rgba(246, 246, 248, 0.5) !important; } html.gg-liq-live .window[data-app-id="textedit"] .gg-te-paper, html.gg-liq-live .window[data-app-id="textedit"] .gg-te-page, html.gg-liq-live .window[data-app-id="textedit"] [contenteditable] { background: #ffffff !important; } /* ── Terminal: dark translucent charcoal ──────────────────────── */ html.gg-liq-live .window[data-app-id="terminal"] .gg-term, html.gg-liq-live .window[data-app-id="terminal"] .gg-term-scroll { background: transparent !important; color: #f5f5f7; } /* ── System chrome extras (menubar frost via WebGL shape) ─────── */ html.gg-liq-live .menubar.liquid-glass { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; border: none !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); } /* Fallback menubar frost when WebGL off */ html:not(.gg-liq-live) .menubar.liquid-glass { background: rgba(255, 255, 255, 0.22) !important; backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-bottom: 0.5px solid rgba(255, 255, 255, 0.2); } /* Siri: pink/magenta rim accent */ html.gg-liq-live .siri-chip.liquid-glass { border-color: rgba(255, 80, 180, 0.45) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(255, 105, 180, 0.35), inset 0 0.5px 0 rgba(255, 200, 230, 0.35) !important; } html.gg-liq-live .siri-reply.liquid-glass { border-color: rgba(200, 160, 255, 0.4) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), inset 0 0.5px 0 rgba(255, 220, 255, 0.3) !important; } /* Dock: stadium rim highlight */ html.gg-liq-live .dock.liquid-glass { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 0.5px 0 rgba(255, 255, 255, 0.5), inset 0 -0.5px 0 rgba(0, 0, 0, 0.12) !important; border-color: rgba(255, 255, 255, 0.28) !important; } /* Spotlight: pale cyan rim */ html.gg-liq-live .spotlight-panel.liquid-glass, html.gg-liq-live .spot-action.liquid-glass { border-color: rgba(180, 230, 255, 0.45) !important; } /* Launchpad: full-screen wallpaper-tinted frost */ html.gg-liq-live #launchpad-overlay:not(.hidden), html.gg-liq-live .launchpad-overlay:not(.hidden) { background: rgba(40, 70, 100, 0.18) !important; backdrop-filter: blur(44px) saturate(165%) brightness(0.92) !important; -webkit-backdrop-filter: blur(44px) saturate(165%) brightness(0.92) !important; } html.gg-liq-live #launchpad-overlay:not(.hidden) .gg-launchpad, html.gg-liq-live .launchpad-overlay:not(.hidden) .gg-launchpad { background: transparent !important; }