Enhanced Glass Depth

<p>Made for Dark Mode Calico Layout. Improves visual consistency across all glass elements by enhancing navigation controls, toolbars, and the player with additional depth, shadows, and subtle highlights. Removes the default outline effect for a cleaner, more cohesive appearance.</p>
Source Code (CSS)
/* =========================================================
   DARK MODE CALICO LAYOUT ONLY
   ========================================================= */

/* Dark mode player transparency*/
body.body--dark .lgs-inner[style] {
    background: rgba(50, 50, 50, 0.3);
}

/* Shared glass effect
   Applies to: Chrome button group, Nav flipper, standalone Sidebar Toggle, standalone Search, standalone Main Menu
   Dark mode (default) */
.chrome-button-group,
.nav-flipper,
.chrome-button:not(.chrome-button-group .chrome-button):not(.settings-titlebar-chrome .chrome-button):not(.library-toolbar .chrome-button):not(.lcdplayer-side .chrome-button):not(.controls-wrapper .chrome-button):not(.rag-header .chrome-button):not([title="MiniPlayer"]):not([title="Immersive"]) {
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 4px 12px,
        rgba(255, 255, 255, 0.22) 0px 2px 5px inset,
        rgba(0, 0, 0, 0.25) 0px -2px 6px inset,
        rgba(255, 255, 255, 0.08) 0px 0px 14px inset;
}

/* Unfocused window state
   Applies to: Chrome button group, Nav flipper, standalone Sidebar Toggle, standalone Search, standalone Main Menu
   Dark mode */
body[window-blurred="true"] .chrome-button-group,
body[window-blurred="true"] .nav-flipper,
body[window-blurred="true"] .chrome-button:not(.chrome-button-group .chrome-button):not(.settings-titlebar-chrome .chrome-button):not(.library-toolbar .chrome-button):not(.lcdplayer-side .chrome-button):not(.controls-wrapper .chrome-button):not(.rag-header .chrome-button):not([title="MiniPlayer"]):not([title="Immersive"]) {
    background: rgba(40, 40, 40, 0.6);
    backdrop-filter: blur(20px) saturate(60%);
    -webkit-backdrop-filter: blur(20px) saturate(60%);
    box-shadow:
        rgba(0, 0, 0, 0.08) 0px 4px 12px,
        rgba(255, 255, 255, 0.06) 0px 2px 5px inset,
        rgba(0, 0, 0, 0.1) 0px -2px 6px inset,
        rgba(255, 255, 255, 0.025) 0px 0px 14px inset;
}

/* Remove the outline from elements */
.chrome-button-group:before,
.nav-flipper:before,
.chrome-button:not(.chrome-button-group .chrome-button):not(.settings-titlebar-chrome .chrome-button):not(.library-toolbar .chrome-button):not(.lcdplayer-side .chrome-button):not(.controls-wrapper .chrome-button):not(.rag-header .chrome-button):not([title="MiniPlayer"]):not([title="Immersive"]):before {
    box-shadow: none;
}

/* === Artist page top, IN FOCUS ONLY: tinted glass === */
body:has(.ns-toolbar_inline):not([window-blurred="true"]) .chrome-button-group,
body:has(.ns-toolbar_inline):not([window-blurred="true"]) .nav-flipper,
body:has(.ns-toolbar_inline):not([window-blurred="true"]) .chrome-button:not(.chrome-button-group .chrome-button):not(.settings-titlebar-chrome .chrome-button):not(.library-toolbar .chrome-button):not(.lcdplayer-side .chrome-button):not(.controls-wrapper .chrome-button):not(.rag-header .chrome-button):not([title="MiniPlayer"]):not([title="Immersive"]) {
    background: color-mix(in srgb, transparent, var(--subjectColorInline, rgba(40, 40, 40, 0.6)) 20%) !important;
    color: var(--subjectColorInlineText, inherit) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 4px 12px,
        rgba(255, 255, 255, 0.22) 0px 2px 5px inset,
        rgba(0, 0, 0, 0.25) 0px -2px 6px inset,
        rgba(255, 255, 255, 0.08) 0px 0px 14px inset !important;
}

/* Lower chrome button fix positioning (not a bug caused by this snippet) */
.chrome-button-group.page-floating-group {
    transform: translateX(5px);
}

/* Tracks Toolbar — blur is impossible with css
   Excludes Albums page (and any other .*-page wrapper reusing .library-toolbar) */
.library-toolbar:not(.albums-page .library-toolbar) {
    box-shadow:
        rgba(0, 0, 0, 0.2) 0px 4px 12px,
        rgba(255, 255, 255, 0.22) 0px 2px 5px inset,
        rgba(0, 0, 0, 0.35) 0px -2px 6px inset,
        rgba(255, 255, 255, 0.08) 0px 0px 14px inset;
}
body.body--dark .library-toolbar:not(.albums-page .library-toolbar) {
    background: rgb(30, 30, 30, 0.95);
}

/* Sleep timer Toolbar
   Dark mode */
.queue-info-bar {
    backdrop-filter: none;
}

/* Queue Tab fade */
#queue-scroll {
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 160px), transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 160px), transparent 100%);
}

/* Window Controls Pill*/
/* Default / focused state — dark mode, plain (off artist page, or scrolled) */
.window-controls-pill {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 4px 12px,
        rgba(255, 255, 255, 0.22) 0px 2px 5px inset,
        rgba(0, 0, 0, 0.25) 0px -2px 6px inset,
        rgba(255, 255, 255, 0.08) 0px 0px 14px inset,
        rgba(255, 255, 255, 0.3) 0px -0.6px 2px inset;
}

/* Artist page top, IN FOCUS ONLY — tinted, matches chrome-button-group exactly */
body:has(.ns-toolbar_inline):not([window-blurred="true"]) .window-controls-pill {
    background: color-mix(in srgb, transparent, var(--subjectColorInline, rgba(40, 40, 40, 0.6)) 20%) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 4px 12px,
        rgba(255, 255, 255, 0.22) 0px 2px 5px inset,
        rgba(0, 0, 0, 0.25) 0px -2px 6px inset,
        rgba(255, 255, 255, 0.08) 0px 0px 14px inset !important;
}

/* Out-of-focus state — dark mode */
.window-controls-pill.out-of-focus {
    opacity: 1;
    background: rgba(40, 40, 40, 0.6);
    backdrop-filter: blur(20px) saturate(60%);
    -webkit-backdrop-filter: blur(20px) saturate(60%);
    box-shadow:
        rgba(0, 0, 0, 0.08) 0px 4px 12px,
        rgba(255, 255, 255, 0.06) 0px 2px 5px inset,
        rgba(0, 0, 0, 0.1) 0px -2px 6px inset,
        rgba(255, 255, 255, 0.025) 0px 0px 14px inset;
}

/* Remove native highlight rings */
.window-controls-pill:before,
.window-controls-pill:after {
    box-shadow: none;
    content: none;
}

/* Pod Tabs glass effect — toned down */
/* Dark mode (default) */
.pod-tab {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    box-shadow:
        rgba(0, 0, 0, 0.08) 0px 1px 5px,
        rgba(255, 255, 255, 0.12) 0px 1px 3px inset,
        rgba(0, 0, 0, 0.15) 0px -1px 4px inset,
        rgba(255, 255, 255, 0.04) 0px 0px 8px inset;
}

/* Active tab background — 2 contexts (focused/blurred x artist/non-artist), dark mode only */

/* FOCUSED — dark mode */
body:not([window-blurred="true"]) .pod-tab.active {
    --subjectColorStrong: rgb(from var(--subjectColor) r g b / 0.6);
    background: var(--subjectColorStrong, rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow:
        rgba(0, 0, 0, 0.08) 0px 1px 5px,
        rgba(255, 255, 255, 0.22) 0px 2px 5px inset,
        rgba(0, 0, 0, 0.25) 0px -2px 6px inset,
        rgba(255, 255, 255, 0.08) 0px 0px 14px inset;
}

/* OUT OF FOCUS, non-artist page — dark mode */
body[window-blurred="true"] .pod-tab.active {
    background: rgb(from var(--subjectColor, rgba(255, 255, 255, 0.12)) r g b / 0.3);
    backdrop-filter: blur(12px) saturate(80%);
    -webkit-backdrop-filter: blur(12px) saturate(80%);
    box-shadow:
        rgba(0, 0, 0, 0.06) 0px 2px 5px,
        rgba(255, 255, 255, 0.08) 0px 1px 3px inset,
        rgba(0, 0, 0, 0.1) 0px -1px 4px inset,
        rgba(255, 255, 255, 0.03) 0px 0px 8px inset;
}

/* OUT OF FOCUS, artist page — dark mode (higher specificity, wins over the rule above when on artist page) */
body:has(.ns-toolbar_inline)[window-blurred="true"] .pod-tab.active {
    --subjectColorStrongBlurred: rgb(from var(--subjectColor) r g b / 0.7);
    background: var(--subjectColorStrongBlurred, rgb(from var(--subjectColor, rgba(255, 255, 255, 0.12)) r g b / 0.15));
}

/* Non-active Pod Tabs — always match chrome-button background/text */
/* Dark mode (default) — focused */
body:not([window-blurred="true"]) .pod-tab:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}
/* Dark mode — unfocused (matches chrome-button unfocused state) */
body[window-blurred="true"] .pod-tab:not(.active) {
    background: rgba(40, 40, 40, 0.6);
    backdrop-filter: blur(20px) saturate(60%);
    -webkit-backdrop-filter: blur(20px) saturate(60%);
}
/* Artist page, IN FOCUS — tinted, matches chrome-button-group tint */
body:has(.ns-toolbar_inline):not([window-blurred="true"]) .pod-tab:not(.active) {
    background: color-mix(in srgb, transparent, var(--subjectColorInline, rgba(40, 40, 40, 0.6)) 20%);
    color: var(--subjectColorInlineText, inherit);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}
/* Remove native outline ring */
.pod-tab:before {
    box-shadow: none;
}
/* Shadow clipping fix */
.tabs-inner,
.pod-tab-content {
    overflow: visible;
    padding: 6px 0px;
}