/* Sidebar */ [class*="_sidebar_"] { background-color: transparent !important; } /* Section header */ [class*="_sectionHeader_"] { background-color: transparent !important; } /* Rounded corners */ [class*="_thumbnail_"], [class*="_imageWrapper_"], [class*="_coverImage_"], [class*="_overlayIconWrapperAlbum_"], [class*="_playButton_"] { border-radius: 5px !important; } /* MARKER: HideUI CSS*/ /* Only apply styles when UI is hidden */ .radiant-lyrics-ui-hidden [class*="tabItems"] { opacity: 0 !important; transition: opacity 0.4s ease-in-out; } .radiant-lyrics-ui-hidden [class*="tabItems"]:hover { opacity: 1 !important; } /* Hide header container (search, minimize, fullscreen) when UI is hidden */ .radiant-lyrics-ui-hidden [data-test="header-container"] { opacity: 0 !important; visibility: hidden !important; transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s; pointer-events: none !important; } /* Immediate hide class for unhide button */ .hide-immediately { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Auto-fade styling for unhide button */ .unhide-ui-button.auto-faded { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: rgba(255, 255, 255, 0.4) !important; transition: background-color 0.8s ease-in-out, border-color 0.8s ease-in-out, box-shadow 0.8s ease-in-out, backdrop-filter 0.8s ease-in-out, color 0.8s ease-in-out !important; } .unhide-ui-button.auto-faded:hover { background-color: rgba(255, 255, 255, 0.2) !important; border-color: rgba(255, 255, 255, 0.3) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: white !important; transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out, color 0.3s ease-in-out !important; } /* MARKER: Sticky Lyrics CSS */ /* Lyrics tab */ [data-test="tabs-lyrics"]:has(.sticky-lyrics-trigger) { position: relative !important; padding-right: 38px !important; } /* Trigger */ .sticky-lyrics-trigger { position: absolute; right: 0; top: 0; bottom: 0; width: 38px; display: flex; align-items: center; justify-content: center; padding-left: 5px; padding-right: 0px; box-sizing: border-box; cursor: default; color: #CCCCD1; transition: color 0.2s ease; } /* Divider line */ .sticky-lyrics-trigger::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 1px; background: transparent; transition: background 0.2s ease; } /* When Lyrics tab is active — show divider & make icon black*/ [data-test="tabs-lyrics"][aria-selected="true"] .sticky-lyrics-trigger { color: black; cursor: pointer; } [data-test="tabs-lyrics"][aria-selected="true"] .sticky-lyrics-trigger::before { background: rgba(0, 0, 0, 0.25); } [data-test="tabs-lyrics"][aria-selected="true"] .sticky-lyrics-trigger:hover { color: rgba(0, 0, 0, 0.6); } /* Square the Lyrics button bottom corners when dropdown is open */ [data-test="tabs-lyrics"].sticky-lyrics-open { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* Dropdown */ .sticky-lyrics-dropdown { position: fixed; background: white; border-radius: 0 0 16px 16px; padding: 8px 12px 10px; box-sizing: border-box; z-index: 10000; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); clip-path: inset(0 -20px -20px -20px); animation: stickyLyricsDropdownIn 0.12s ease-out; } @keyframes stickyLyricsDropdownIn { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } /* Row containing label + toggle */ .sticky-lyrics-dropdown-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .sticky-lyrics-label { font-size: 11px; font-weight: 600; color: rgba(0, 0, 0, 1); white-space: nowrap; } /* Toggle switch */ .sticky-lyrics-switch { position: relative; display: inline-block; width: 34px; height: 18px; flex-shrink: 0; } .sticky-lyrics-switch input { opacity: 0; width: 0; height: 0; } .sticky-lyrics-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.2); transition: 0.3s; border-radius: 18px; } .sticky-lyrics-slider::before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: white; transition: 0.3s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .sticky-lyrics-switch input:checked + .sticky-lyrics-slider { background-color: black; } .sticky-lyrics-switch input:checked + .sticky-lyrics-slider::before { transform: translateX(16px); } /* Segmented control (Line | Word | Syllable) */ .rl-style-row { justify-content: center; margin-top: 6px; } .rl-seg-control { display: flex; background: rgba(0, 0, 0, 0.08); border-radius: 10px; padding: 2px; gap: 2px; width: 100%; } .rl-seg-btn { flex: 1; border: none; background: transparent; color: rgba(0, 0, 0, 0.5); font-size: 10px; font-weight: 600; padding: 5px 0; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .rl-seg-btn:hover { color: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.05); } .rl-seg-btn.rl-seg-active { background: white; color: black; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } /* MARKER: PATCHES (Random Fixes for Tidals Changes) */ /* These change allot so i gave them their own section */ /* Fixes the new Sticky Header Tidal added.. in the shittest jankiest way possible */ [class*="_stickyHeader"] { background: transparent !important; backdrop-filter: blur(50px); background-color: transparent !important; width: fit-content !important; padding-right: 3.5% !important; -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent), linear-gradient(to right, black 85%, transparent) !important; mask-image: linear-gradient(to bottom, black 60%, transparent), linear-gradient(to right, black 85%, transparent) !important; -webkit-mask-composite: source-in !important; mask-composite: intersect !important; /* border-radius: 3px 0 0 0 !important; */ padding-bottom: 5px !important; } [class*="_playQueueItems"]{ border-radius: 2.5px 0 0 0 !important; } [data-test="playqueue-sticky-clear-active-items"] { visibility: collapse !important; width: 0px !important; } [data-test="playqueue-sticky-clear-source-items"] { visibility: collapse !important; width: 0px !important; } /* Remove the background color from the small header */ [class*="_smallHeader"]::before { background-color: transparent !important; } /* fixes Tidals broken mini cover art padding | Cheers Aya <3*/ ._imageBorder_110890a { filter: opacity(0); } ._container_14bcbd4._playingFrom_79b167e { transform: scale(1.01) translatex(.1em); } ._leftColumn_aaf28de { min-height: 110%; transform: translatey(-.23em); } ._imageryContainer_f99fc07.image { transform: scale(1.03) translatey(.2em) translatex(.1em); background-color: #00000000; padding: 0em !important; } ._image_145331a._cellImage_0ef8dd3 { border-radius: .7em !important; } [data-test="footer-player"] { ._container_14bcbd4._playingFrom_79b167e > ._text_15008b2._medium20_1lyag_192._marketText_1lyag_1 { transform: translatey(-.2em); } [class="image _imageryContainer_f99fc07"] { transform: translatey(.3em) !important; } ._image_145331a._cellImage_0ef8dd3 { border-radius: .25em !important; } ._toggleButton_809eee8 { transform: translateY(-.22em); } [class="image _imageryContainer_f99fc07"]:hover { [class="_cellImage_0ef8dd3 _image_145331a"] { filter: brightness(.3); } } ._notFullscreenOverlay_1442d60 { background: none !important; transition: 0ms; } ._notFullscreenOverlay_1442d60 ._nowPlayingButton_c1a86fa { background-color: rgba(245, 245, 220, 0); } }