Reduces the intensity of the player's tint to create a lighter more transparent appearance while preserving the Liquid Glass effect. Made for the Calico layout.
", "css": "body.body--dark .lgs-inner[style] {\n background: rgba(50, 50, 50, 0.3) !important;\n}\nbody:not(.body--dark) .lgs-inner[style] {\n background: rgba(200, 200, 200, 0.3) !important;\n}", "createdBy": "User" }, { "id": "019ed4e3-1b5a-7f77-b919-bc6d495a54e7", "name": "Enhanced Glass Depth", "description": "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.
", "css": "/* =========================================================\n DARK MODE CALICO LAYOUT ONLY\n ========================================================= */\n\n/* Dark mode player transparency*/\nbody.body--dark .lgs-inner[style] {\n background: rgba(50, 50, 50, 0.3);\n}\n\n/* Shared glass effect\n Applies to: Chrome button group, Nav flipper, standalone Sidebar Toggle, standalone Search, standalone Main Menu\n Dark mode (default) */\n.chrome-button-group,\n.nav-flipper,\n.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\"]) {\n backdrop-filter: blur(20px) saturate(160%);\n -webkit-backdrop-filter: blur(20px) saturate(160%);\n box-shadow:\n rgba(0, 0, 0, 0.1) 0px 4px 12px,\n rgba(255, 255, 255, 0.22) 0px 2px 5px inset,\n rgba(0, 0, 0, 0.25) 0px -2px 6px inset,\n rgba(255, 255, 255, 0.08) 0px 0px 14px inset;\n}\n\n/* Unfocused window state\n Applies to: Chrome button group, Nav flipper, standalone Sidebar Toggle, standalone Search, standalone Main Menu\n Dark mode */\nbody[window-blurred=\"true\"] .chrome-button-group,\nbody[window-blurred=\"true\"] .nav-flipper,\nbody[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\"]) {\n background: rgba(40, 40, 40, 0.6);\n backdrop-filter: blur(20px) saturate(60%);\n -webkit-backdrop-filter: blur(20px) saturate(60%);\n box-shadow:\n rgba(0, 0, 0, 0.08) 0px 4px 12px,\n rgba(255, 255, 255, 0.06) 0px 2px 5px inset,\n rgba(0, 0, 0, 0.1) 0px -2px 6px inset,\n rgba(255, 255, 255, 0.025) 0px 0px 14px inset;\n}\n\n/* Remove the outline from elements */\n.chrome-button-group:before,\n.nav-flipper:before,\n.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 {\n box-shadow: none;\n}\n\n/* === Artist page top, IN FOCUS ONLY: tinted glass === */\nbody:has(.ns-toolbar_inline):not([window-blurred=\"true\"]) .chrome-button-group,\nbody:has(.ns-toolbar_inline):not([window-blurred=\"true\"]) .nav-flipper,\nbody: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\"]) {\n background: color-mix(in srgb, transparent, var(--subjectColorInline, rgba(40, 40, 40, 0.6)) 20%) !important;\n color: var(--subjectColorInlineText, inherit) !important;\n backdrop-filter: blur(20px) saturate(160%) !important;\n -webkit-backdrop-filter: blur(20px) saturate(160%) !important;\n box-shadow:\n rgba(0, 0, 0, 0.1) 0px 4px 12px,\n rgba(255, 255, 255, 0.22) 0px 2px 5px inset,\n rgba(0, 0, 0, 0.25) 0px -2px 6px inset,\n rgba(255, 255, 255, 0.08) 0px 0px 14px inset !important;\n}\n\n/* Lower chrome button fix positioning (not a bug caused by this snippet) */\n.chrome-button-group.page-floating-group {\n transform: translateX(5px);\n}\n\n/* Tracks Toolbar — blur is impossible with css\n Excludes Albums page (and any other .*-page wrapper reusing .library-toolbar) */\n.library-toolbar:not(.albums-page .library-toolbar) {\n box-shadow:\n rgba(0, 0, 0, 0.2) 0px 4px 12px,\n rgba(255, 255, 255, 0.22) 0px 2px 5px inset,\n rgba(0, 0, 0, 0.35) 0px -2px 6px inset,\n rgba(255, 255, 255, 0.08) 0px 0px 14px inset;\n}\nbody.body--dark .library-toolbar:not(.albums-page .library-toolbar) {\n background: rgb(30, 30, 30, 0.95);\n}\n\n/* Sleep timer Toolbar\n Dark mode */\n.queue-info-bar {\n backdrop-filter: none;\n}\n\n/* Queue Tab fade */\n#queue-scroll {\n -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 160px), transparent 100%);\n mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 160px), transparent 100%);\n}\n\n/* Window Controls Pill*/\n/* Default / focused state — dark mode, plain (off artist page, or scrolled) */\n.window-controls-pill {\n border-radius: 999px;\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(20px) saturate(160%);\n -webkit-backdrop-filter: blur(20px) saturate(160%);\n box-shadow:\n rgba(0, 0, 0, 0.1) 0px 4px 12px,\n rgba(255, 255, 255, 0.22) 0px 2px 5px inset,\n rgba(0, 0, 0, 0.25) 0px -2px 6px inset,\n rgba(255, 255, 255, 0.08) 0px 0px 14px inset,\n rgba(255, 255, 255, 0.3) 0px -0.6px 2px inset;\n}\n\n/* Artist page top, IN FOCUS ONLY — tinted, matches chrome-button-group exactly */\nbody:has(.ns-toolbar_inline):not([window-blurred=\"true\"]) .window-controls-pill {\n background: color-mix(in srgb, transparent, var(--subjectColorInline, rgba(40, 40, 40, 0.6)) 20%) !important;\n backdrop-filter: blur(20px) saturate(160%) !important;\n -webkit-backdrop-filter: blur(20px) saturate(160%) !important;\n box-shadow:\n rgba(0, 0, 0, 0.1) 0px 4px 12px,\n rgba(255, 255, 255, 0.22) 0px 2px 5px inset,\n rgba(0, 0, 0, 0.25) 0px -2px 6px inset,\n rgba(255, 255, 255, 0.08) 0px 0px 14px inset !important;\n}\n\n/* Out-of-focus state — dark mode */\n.window-controls-pill.out-of-focus {\n opacity: 1;\n background: rgba(40, 40, 40, 0.6);\n backdrop-filter: blur(20px) saturate(60%);\n -webkit-backdrop-filter: blur(20px) saturate(60%);\n box-shadow:\n rgba(0, 0, 0, 0.08) 0px 4px 12px,\n rgba(255, 255, 255, 0.06) 0px 2px 5px inset,\n rgba(0, 0, 0, 0.1) 0px -2px 6px inset,\n rgba(255, 255, 255, 0.025) 0px 0px 14px inset;\n}\n\n/* Remove native highlight rings */\n.window-controls-pill:before,\n.window-controls-pill:after {\n box-shadow: none;\n content: none;\n}\n\n/* Pod Tabs glass effect — toned down */\n/* Dark mode (default) */\n.pod-tab {\n border-radius: 999px;\n background: rgba(255, 255, 255, 0.03);\n backdrop-filter: blur(12px) saturate(120%);\n -webkit-backdrop-filter: blur(12px) saturate(120%);\n box-shadow:\n rgba(0, 0, 0, 0.08) 0px 1px 5px,\n rgba(255, 255, 255, 0.12) 0px 1px 3px inset,\n rgba(0, 0, 0, 0.15) 0px -1px 4px inset,\n rgba(255, 255, 255, 0.04) 0px 0px 8px inset;\n}\n\n/* Active tab background — 2 contexts (focused/blurred x artist/non-artist), dark mode only */\n\n/* FOCUSED — dark mode */\nbody:not([window-blurred=\"true\"]) .pod-tab.active {\n --subjectColorStrong: rgb(from var(--subjectColor) r g b / 0.6);\n background: var(--subjectColorStrong, rgba(255, 255, 255, 0.1));\n backdrop-filter: blur(20px) saturate(160%);\n -webkit-backdrop-filter: blur(20px) saturate(160%);\n box-shadow:\n rgba(0, 0, 0, 0.08) 0px 1px 5px,\n rgba(255, 255, 255, 0.22) 0px 2px 5px inset,\n rgba(0, 0, 0, 0.25) 0px -2px 6px inset,\n rgba(255, 255, 255, 0.08) 0px 0px 14px inset;\n}\n\n/* OUT OF FOCUS, non-artist page — dark mode */\nbody[window-blurred=\"true\"] .pod-tab.active {\n background: rgb(from var(--subjectColor, rgba(255, 255, 255, 0.12)) r g b / 0.3);\n backdrop-filter: blur(12px) saturate(80%);\n -webkit-backdrop-filter: blur(12px) saturate(80%);\n box-shadow:\n rgba(0, 0, 0, 0.06) 0px 2px 5px,\n rgba(255, 255, 255, 0.08) 0px 1px 3px inset,\n rgba(0, 0, 0, 0.1) 0px -1px 4px inset,\n rgba(255, 255, 255, 0.03) 0px 0px 8px inset;\n}\n\n/* OUT OF FOCUS, artist page — dark mode (higher specificity, wins over the rule above when on artist page) */\nbody:has(.ns-toolbar_inline)[window-blurred=\"true\"] .pod-tab.active {\n --subjectColorStrongBlurred: rgb(from var(--subjectColor) r g b / 0.7);\n background: var(--subjectColorStrongBlurred, rgb(from var(--subjectColor, rgba(255, 255, 255, 0.12)) r g b / 0.15));\n}\n\n/* Non-active Pod Tabs — always match chrome-button background/text */\n/* Dark mode (default) — focused */\nbody:not([window-blurred=\"true\"]) .pod-tab:not(.active) {\n background: rgba(255, 255, 255, 0.05);\n color: inherit;\n backdrop-filter: blur(20px) saturate(160%);\n -webkit-backdrop-filter: blur(20px) saturate(160%);\n}\n/* Dark mode — unfocused (matches chrome-button unfocused state) */\nbody[window-blurred=\"true\"] .pod-tab:not(.active) {\n background: rgba(40, 40, 40, 0.6);\n backdrop-filter: blur(20px) saturate(60%);\n -webkit-backdrop-filter: blur(20px) saturate(60%);\n}\n/* Artist page, IN FOCUS — tinted, matches chrome-button-group tint */\nbody:has(.ns-toolbar_inline):not([window-blurred=\"true\"]) .pod-tab:not(.active) {\n background: color-mix(in srgb, transparent, var(--subjectColorInline, rgba(40, 40, 40, 0.6)) 20%);\n color: var(--subjectColorInlineText, inherit);\n backdrop-filter: blur(20px) saturate(160%);\n -webkit-backdrop-filter: blur(20px) saturate(160%);\n}\n/* Remove native outline ring */\n.pod-tab:before {\n box-shadow: none;\n}\n/* Shadow clipping fix */\n.tabs-inner,\n.pod-tab-content {\n overflow: visible;\n padding: 6px 0px;\n}", "createdBy": "User" }, { "id": "019ec249-e2d8-7a1c-b94b-9ed6a68e0018", "name": "Loop/Shuffle Dot Indicator", "description": "Adds a small dot indicator to the loop and shuffle icons in the playback bar, providing clarity when icons are toggled on or off.", "css": ".playback-action-button.action-small.action-active::after {\n content: \"\";\n display: block;\n margin-top: 2px;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background-color: currentColor;\n}\n\n.action-small:not(.action-active) > div > svg {\n filter: brightness(0.5);\n}", "createdBy": "leo" }, { "id": "019eded3-12e8-7dbd-a6a9-4e1aa496920c", "name": "Hide Concerts", "description": "Removes the Upcoming Concerts badge and hides the All Upcoming Concerts section for a cleaner artist page experience.
", "css": "/* Removes the \"All Upcoming Concerts\" list/scroller and its wrapper padding */\n[data-upcoming-concerts],\n.concerts-scroller,\n.page-stack-item:has([data-upcoming-concerts]) {\n display: none;\n padding: 0;\n margin: 0;\n height: 0;\n min-height: 0;\n}\n\n/* Removes the \"Upcoming Concerts\" badge */\n.upcoming-concert-badge {\n display: none;\n}", "createdBy": "User" }, { "id": "019e953e-4347-77ea-810a-92413ed08664", "name": "Transparency Theme for Linux", "description": "This theme completely removes the background of cider so that you can perform other effects such as background blur", "css": ".new-shell-page-container {\n background: color-mix(in srgb, rgba(10, 10, 10, 0), var(--keyColor) 2%);\n }\n\n body.body--dark {\n background: rgba(0,0,0,0);\n }\n\n\n .color-bloom.loaded {\n opacity: 0.1;\n }", "createdBy": "notLily" } ] } } }, "sidecar": { "enabledSnippets": [ "019e953e-4347-77ea-810a-92413ed08664", "019ec249-e2d8-7a1c-b94b-9ed6a68e0018" ] } }