/* Sidebar */ [class*="_sidebar_"] { background-color: transparent !important; } /* Section header */ [class*="_sectionHeader_"] { background-color: transparent !important; } /* Rounded corners */ [class*="_thumbnail_"], [class*="_imageWrapper_"], [class*="_playButton_"] { border-radius: 5px !important; } /* MARKER: HideUI CSS*/ /* Only apply styles when UI is hidden — hide toggle buttons */ .radiant-lyrics-ui-hidden [data-test="toggle-lyrics"], .radiant-lyrics-ui-hidden [data-test="toggle-credits"], .radiant-lyrics-ui-hidden [data-test="toggle-similar-tracks"] { opacity: 0 !important; transition: opacity 0.4s ease-in-out; } .radiant-lyrics-ui-hidden [data-test="toggle-lyrics"]:hover, .radiant-lyrics-ui-hidden [data-test="toggle-credits"]:hover, .radiant-lyrics-ui-hidden [data-test="toggle-similar-tracks"]:hover { opacity: 1 !important; } /* Hide header container (search, minimize, fullscreen) when UI is hidden */ .radiant-lyrics-ui-hidden [data-test="header"] { 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 toggle button */ [data-test="toggle-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 toggle is pressed — show divider & adjust icon */ [data-test="toggle-lyrics"][aria-pressed="true"] .sticky-lyrics-trigger { color: rgb(30, 30, 30); cursor: pointer; } [data-test="toggle-lyrics"][aria-pressed="true"] .sticky-lyrics-trigger::before { background: rgba(0, 0, 0, 0.15); } [data-test="toggle-lyrics"][aria-pressed="true"] .sticky-lyrics-trigger:hover { color: rgba(0, 0, 0, 0.5); } /* Animate widening when dropdown opens */ [data-test="toggle-lyrics"]:has(.sticky-lyrics-trigger) { transition: min-width 0.12s ease-out; } /* Reduce top rounding, square bottom, and kill hover tint when dropdown is open */ body.rl-dropdown-open [data-test="toggle-lyrics"] { border-radius: 12px 12px 0 0 !important; background-color: rgb(255, 255, 255) !important; min-width: 150px !important; } /* Dropdown — right-aligned under the Lyrics button */ .sticky-lyrics-dropdown { position: fixed; background: rgb(255, 255, 255); border-radius: 0 0 12px 12px; padding: 8px 12px 10px; box-sizing: border-box; z-index: 10000; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); clip-path: inset(0 -20px -20px -20px); animation: stickyLyricsDropdownIn 0.12s ease-out; } @keyframes stickyLyricsDropdownIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(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, 0.8); 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.15); 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.15); } .sticky-lyrics-switch input:checked + .sticky-lyrics-slider { background-color: rgb(30, 30, 30); } .sticky-lyrics-switch input:checked + .sticky-lyrics-slider::before { transform: translateX(16px); background-color: rgb(255, 255, 255); } /* 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.06); border-radius: 10px; padding: 2px; gap: 2px; width: 100%; } .rl-seg-btn { flex: 1; border: none; background: transparent; color: rgba(0, 0, 0, 0.4); 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.06); } .rl-seg-btn.rl-seg-active { background: rgb(30, 30, 30); color: rgb(255, 255, 255); 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 */ /* Remove max-width cap on now-playing content */ [class*="_contentInner"] { max-width: none !important; } /* Round now-playing artwork corners */ [data-test="now-playing-artwork"] { /* biome-ignore lint: Override flat corners */ border-radius: 10px !important; } /* Hide the Overlay Scrollbar (people just use mouse scroll) */ .os-scrollbar { display: none !important; pointer-events: none !important; }