forked from SpoTUI/SpoTUI
487 lines
16 KiB
CSS
487 lines
16 KiB
CSS
.Root__main-view,
|
|
.Root__nav-bar,
|
|
.main-topBar-container,
|
|
.main-yourLibraryX-libraryRootlist,
|
|
.main-yourLibraryX-entryPoints,
|
|
.main-buddy-list,
|
|
.main-trackList-trackList,
|
|
.main-card-card,
|
|
.main-gridContainer-gridContainer,
|
|
.main-entityHeader-container {
|
|
display: none !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .Root__main-view,
|
|
body.spotui-spotify-enabled .Root__nav-bar,
|
|
body.spotui-spotify-enabled .main-topBar-container,
|
|
body.spotui-spotify-enabled .main-appShell-topBar,
|
|
body.spotui-spotify-enabled .main-yourLibraryX-libraryRootlist,
|
|
body.spotui-spotify-enabled .main-yourLibraryX-entryPoints,
|
|
body.spotui-spotify-enabled .Root__right-sidebar,
|
|
body.spotui-spotify-enabled .main-buddy-list,
|
|
body.spotui-spotify-enabled .main-nowPlayingView-section,
|
|
body.spotui-spotify-enabled .main-trackList-trackList,
|
|
body.spotui-spotify-enabled .main-card-card,
|
|
body.spotui-spotify-enabled .main-gridContainer-gridContainer,
|
|
body.spotui-spotify-enabled .main-entityHeader-container {
|
|
display: revert !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .Root__main-view,
|
|
body.spotui-spotify-enabled .main-view-container {
|
|
display: block !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .Root__nav-bar,
|
|
body.spotui-spotify-enabled .main-topBar-container,
|
|
body.spotui-spotify-enabled .main-appShell-topBar,
|
|
body.spotui-spotify-enabled .main-yourLibraryX-libraryRootlist,
|
|
body.spotui-spotify-enabled .main-yourLibraryX-entryPoints,
|
|
body.spotui-spotify-enabled .Root__right-sidebar,
|
|
body.spotui-spotify-enabled .main-buddy-list,
|
|
body.spotui-spotify-enabled .main-nowPlayingView-section,
|
|
body.spotui-spotify-enabled .main-trackList-trackList {
|
|
display: flex !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .main-appShell-topBar {
|
|
background: #000 !important;
|
|
border-bottom: 1px solid #ff8c42 !important;
|
|
box-shadow: inset 0 -1px 0 rgba(255, 140, 66, 0.18) !important;
|
|
color: #ddd !important;
|
|
font-family: "JetBrains Mono", "Fira Code", monospace !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-topBar-background,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-topBar-overlay,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-topBar-withBackgroundBlur {
|
|
background: #000 !important;
|
|
background-image: none !important;
|
|
opacity: 1 !important;
|
|
backdrop-filter: none !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchSection,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchContainer,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputContainer,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputSection,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputWrapper,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputTextWrapper,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-historyButtonsContainer,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-historyButtonsWrapper,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-contentRight {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
gap: 8px !important;
|
|
min-height: 56px !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-navLink,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-historyButtons button,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchContainer button,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchContainer [role="button"] {
|
|
color: #ff8c42 !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-navLink:hover,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-historyButtons button:hover,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchContainer button:hover,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchContainer [role="button"]:hover {
|
|
color: #ffb26f !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchContainer,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputContainer {
|
|
background: #000 !important;
|
|
border: 1px solid #ff8c42 !important;
|
|
border-radius: 0 !important;
|
|
box-shadow: inset 0 1px 0 rgba(255, 140, 66, 0.15) !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputText,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .x-searchInput-searchInputInput,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputTextWrapper input {
|
|
color: #ff8c42 !important;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
outline: none !important;
|
|
font-family: "JetBrains Mono", "Fira Code", monospace !important;
|
|
caret-color: #ff8c42 !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputText::placeholder,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .x-searchInput-searchInputInput::placeholder,
|
|
body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputTextWrapper input::placeholder {
|
|
color: #777 !important;
|
|
}
|
|
|
|
.main-connectBar-connectBar,
|
|
.main-devicePicker-button,
|
|
.main-devicePicker-controlButton,
|
|
.main-devicePicker-moreButton,
|
|
.main-devicePicker-tooltip {
|
|
display: none !important;
|
|
}
|
|
|
|
.Root__now-playing-bar {
|
|
display: flex !important;
|
|
position: fixed !important;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100vw !important;
|
|
height: 90px;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.Root__now-playing-bar .main-nowPlayingBar-container,
|
|
.Root__now-playing-bar .main-nowPlayingBar-nowPlayingBar {
|
|
width: 100vw !important;
|
|
max-width: 100vw !important;
|
|
min-width: 100vw !important;
|
|
flex: 1 1 auto !important;
|
|
}
|
|
|
|
.Root__now-playing-bar .main-nowPlayingBar-nowPlayingBar {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: space-between !important;
|
|
background: #000 !important;
|
|
border-top: 1px solid #ff8c42;
|
|
box-shadow: inset 0 1px 0 rgba(255, 140, 66, 0.18);
|
|
color: #ddd !important;
|
|
font-family: "JetBrains Mono", "Fira Code", monospace !important;
|
|
}
|
|
|
|
.Root__now-playing-bar .main-nowPlayingBar-left,
|
|
.Root__now-playing-bar .main-nowPlayingBar-center,
|
|
.Root__now-playing-bar .main-nowPlayingBar-right {
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
.Root__now-playing-bar .main-nowPlayingBar-left {
|
|
flex: 1.2 1 0 !important;
|
|
}
|
|
|
|
.Root__now-playing-bar .main-nowPlayingBar-center {
|
|
flex: 1.8 1 0 !important;
|
|
}
|
|
|
|
.Root__now-playing-bar .main-nowPlayingBar-right {
|
|
flex: 1.1 1 0 !important;
|
|
justify-content: flex-end !important;
|
|
}
|
|
|
|
.Root__now-playing-bar .main-trackInfo-container,
|
|
.Root__now-playing-bar .main-trackInfo-contentContainer,
|
|
.Root__now-playing-bar .main-trackInfo-contentWrapper {
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
.Root__now-playing-bar .main-trackInfo-name {
|
|
color: #ff8c42 !important;
|
|
font-family: inherit !important;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.Root__now-playing-bar .main-trackInfo-artists a,
|
|
.Root__now-playing-bar .main-trackInfo-artists {
|
|
color: #b8b8b8 !important;
|
|
font-family: inherit !important;
|
|
}
|
|
|
|
.Root__now-playing-bar .main-nowPlayingBar-container button,
|
|
.Root__now-playing-bar .main-nowPlayingBar-container [role="button"],
|
|
.Root__now-playing-bar .volume-bar__icon-button {
|
|
border-radius: 0 !important;
|
|
color: #ff8c42 !important;
|
|
}
|
|
|
|
.Root__now-playing-bar .main-nowPlayingBar-container button:hover,
|
|
.Root__now-playing-bar .main-nowPlayingBar-container [role="button"]:hover,
|
|
.Root__now-playing-bar .volume-bar__icon-button:hover {
|
|
color: #ffb26f !important;
|
|
}
|
|
|
|
.Root__now-playing-bar .x-progressBar-progressBarBg,
|
|
.Root__now-playing-bar .x-progressBar-progressBar {
|
|
background: #202020 !important;
|
|
}
|
|
|
|
.Root__now-playing-bar .x-progressBar-progressFillColor,
|
|
.Root__now-playing-bar .x-progressBar-fillColor,
|
|
.Root__now-playing-bar .x-progressBar-handle {
|
|
background: #ff8c42 !important;
|
|
}
|
|
|
|
.Root__now-playing-bar .volume-bar {
|
|
color: #ff8c42 !important;
|
|
}
|
|
|
|
.Root__now-playing-bar .volume-bar__slider-container {
|
|
filter: saturate(0.9);
|
|
}
|
|
|
|
body:not(.spotui-lyrics-open) .Root__right-sidebar,
|
|
body:not(.spotui-lyrics-open) .main-nowPlayingView-section,
|
|
body:not(.spotui-lyrics-open) .main-lyricsCinema-container,
|
|
body:not(.spotui-lyrics-open) .lyrics-lyrics-container,
|
|
body:not(.spotui-lyrics-open) .lyrics-lyricsContainer-LyricsContainer {
|
|
display: none !important;
|
|
}
|
|
|
|
body.spotui-lyrics-open .Root__right-sidebar,
|
|
body.spotui-lyrics-open .main-nowPlayingView-section,
|
|
body.spotui-lyrics-open .main-lyricsCinema-container {
|
|
display: flex !important;
|
|
}
|
|
|
|
body.spotui-lyrics-open .Root__right-sidebar {
|
|
width: min(420px, 100vw) !important;
|
|
min-width: min(420px, 100vw) !important;
|
|
max-width: min(420px, 100vw) !important;
|
|
}
|
|
|
|
body.spotui-lyrics-open .Root__right-sidebar,
|
|
body.spotui-lyrics-open .main-nowPlayingView-section,
|
|
body.spotui-lyrics-open .main-lyricsCinema-container,
|
|
body.spotui-lyrics-open .lyrics-lyrics-container,
|
|
body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsContainer {
|
|
background: #000 !important;
|
|
color: #ddd !important;
|
|
font-family: "JetBrains Mono", "Fira Code", monospace !important;
|
|
border-top: 1px solid #ff8c42 !important;
|
|
box-shadow: inset 0 1px 0 rgba(255, 140, 66, 0.18) !important;
|
|
}
|
|
|
|
body.spotui-lyrics-open .main-nowPlayingView-lyricsContent,
|
|
body.spotui-lyrics-open .main-nowPlayingView-lyricsControls,
|
|
body.spotui-lyrics-open .main-lyricsCinema-content,
|
|
body.spotui-lyrics-open .lyrics-lyrics-container,
|
|
body.spotui-lyrics-open .lyrics-lyrics-contentContainer,
|
|
body.spotui-lyrics-open .lyrics-lyrics-contentWrapper,
|
|
body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsContainer,
|
|
body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsBackground {
|
|
background: #000 !important;
|
|
color: #ddd !important;
|
|
padding: 20px 24px 28px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
body.spotui-lyrics-open .main-nowPlayingView-lyricsContent,
|
|
body.spotui-lyrics-open .main-lyricsCinema-container,
|
|
body.spotui-lyrics-open .lyrics-lyrics-container,
|
|
body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsContainer {
|
|
overflow: auto !important;
|
|
scrollbar-width: none !important;
|
|
-ms-overflow-style: none !important;
|
|
}
|
|
|
|
body.spotui-lyrics-open .main-nowPlayingView-lyricsContent::-webkit-scrollbar,
|
|
body.spotui-lyrics-open .main-lyricsCinema-container::-webkit-scrollbar,
|
|
body.spotui-lyrics-open .lyrics-lyrics-container::-webkit-scrollbar,
|
|
body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsContainer::-webkit-scrollbar {
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
|
|
body.spotui-lyrics-open .main-nowPlayingBar-lyricsButton {
|
|
color: #ff8c42 !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
body.spotui-lyrics-open .main-nowPlayingBar-lyricsButton:hover {
|
|
color: #ffb26f !important;
|
|
}
|
|
|
|
body.spotui-lyrics-open .main-nowPlayingView-lyricsTitle,
|
|
body.spotui-lyrics-open .lyrics-lyricsContent-provider,
|
|
body.spotui-lyrics-open .lyrics-lyricsContainer-Provider {
|
|
color: #ff8c42 !important;
|
|
font-family: inherit !important;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
body.spotui-lyrics-open .main-nowPlayingView-lyricsContent,
|
|
body.spotui-lyrics-open .lyrics-lyricsContent-text,
|
|
body.spotui-lyrics-open .lyrics-lyricsContent-lyric,
|
|
body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsLine,
|
|
body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsLine a {
|
|
color: #b8b8b8 !important;
|
|
font-family: inherit !important;
|
|
line-height: 1.55 !important;
|
|
}
|
|
|
|
body.spotui-lyrics-open .lyrics-lyricsContent-active,
|
|
body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsLine-active,
|
|
body.spotui-lyrics-open .lyrics-lyricsContainer-Karaoke-WordActive {
|
|
color: #ff8c42 !important;
|
|
}
|
|
|
|
body.spotui-lyrics-open .lyrics-lyricsContent-previous,
|
|
body.spotui-lyrics-open .lyrics-lyricsContent-upcoming,
|
|
body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsLine-past {
|
|
color: #777 !important;
|
|
}
|
|
|
|
body.spotui-lyrics-open .main-nowPlayingView-lyricsGradient,
|
|
body.spotui-lyrics-open .lyrics-lyrics-background,
|
|
body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsBackground {
|
|
background: linear-gradient(180deg, rgba(255, 140, 66, 0.12), rgba(0, 0, 0, 0)) !important;
|
|
}
|
|
|
|
body.spotui-lyrics-open .main-nowPlayingView-lyricsControls button,
|
|
body.spotui-lyrics-open .main-nowPlayingView-lyricsControls [role="button"],
|
|
body.spotui-lyrics-open .lyrics-config-button,
|
|
body.spotui-lyrics-open .lyrics-config-button-container button {
|
|
border-radius: 0 !important;
|
|
color: #ff8c42 !important;
|
|
}
|
|
|
|
body.spotui-lyrics-open .main-nowPlayingView-lyricsControls button:hover,
|
|
body.spotui-lyrics-open .main-nowPlayingView-lyricsControls [role="button"]:hover,
|
|
body.spotui-lyrics-open .lyrics-config-button:hover,
|
|
body.spotui-lyrics-open .lyrics-config-button-container button:hover {
|
|
color: #ffb26f !important;
|
|
}
|
|
|
|
body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsLine {
|
|
line-height: 1.55 !important;
|
|
}
|
|
|
|
.Root__main-view,
|
|
.main-view-container,
|
|
.main-buddy-list {
|
|
background: #000 !important;
|
|
}
|
|
|
|
body {
|
|
background: #000 !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled {
|
|
overflow: auto !important;
|
|
}
|
|
|
|
html:has(body.spotui-spotify-enabled) {
|
|
overflow: auto !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .Root,
|
|
body.spotui-spotify-enabled .Root__main-view,
|
|
body.spotui-spotify-enabled .main-view-container {
|
|
position: relative !important;
|
|
height: calc(100vh - 90px) !important;
|
|
overflow: auto !important;
|
|
}
|
|
|
|
#spotui-tui {
|
|
width: 100vw !important;
|
|
max-width: 100vw !important;
|
|
box-sizing: border-box !important;
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled #spotui-tui {
|
|
display: flex !important;
|
|
}
|
|
|
|
body.spotui-tui-hidden #spotui-tui {
|
|
display: none !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .main-topBar-searchBar,
|
|
body.spotui-spotify-enabled .search-modal-searchBar,
|
|
body.spotui-spotify-enabled .collection-searchBar-searchBar {
|
|
background: #000 !important;
|
|
border: 1px solid #ff8c42 !important;
|
|
border-radius: 0 !important;
|
|
box-shadow: inset 0 1px 0 rgba(255, 140, 66, 0.15) !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .main-globalNav-searchInputContainer,
|
|
body.spotui-spotify-enabled .main-globalNav-searchInputSection,
|
|
body.spotui-spotify-enabled .main-globalNav-searchInputWrapper,
|
|
body.spotui-spotify-enabled .search-modal-searchBar {
|
|
background: #000 !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .x-searchInput-searchInputInput,
|
|
body.spotui-spotify-enabled .main-globalNav-searchInputText,
|
|
body.spotui-spotify-enabled .search-modal-searchBar input {
|
|
color: #ff8c42 !important;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
outline: none !important;
|
|
font-family: "JetBrains Mono", "Fira Code", monospace !important;
|
|
caret-color: #ff8c42 !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .x-searchInput-searchInputInput::placeholder,
|
|
body.spotui-spotify-enabled .main-globalNav-searchInputText::placeholder,
|
|
body.spotui-spotify-enabled .search-modal-searchBar input::placeholder {
|
|
color: #777 !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .x-searchInput-searchInputSearchIcon,
|
|
body.spotui-spotify-enabled .x-searchInput-searchInputClearButton,
|
|
body.spotui-spotify-enabled .x-searchInput-searchInputClearIcon {
|
|
color: #ff8c42 !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .x-searchInput-searchInputClearButton:hover,
|
|
body.spotui-spotify-enabled .x-searchInput-searchInputSearchIcon:hover {
|
|
color: #ffb26f !important;
|
|
}
|
|
|
|
body.spotui-lyrics-open #spotui-tui {
|
|
width: calc(100vw - 420px) !important;
|
|
max-width: calc(100vw - 420px) !important;
|
|
}
|
|
|
|
body.spotui-search-mode #spotui-tui {
|
|
display: none !important;
|
|
}
|
|
|
|
body.spotui-search-mode #spotui-controls {
|
|
display: none !important;
|
|
}
|
|
|
|
body.spotui-tui-hidden #spotui-back-btn,
|
|
body.spotui-spotify-enabled #spotui-back-btn,
|
|
body.spotui-search-mode #spotui-back-btn {
|
|
position: fixed !important;
|
|
top: 50% !important;
|
|
left: 50% !important;
|
|
transform: translate(-50%, -50%) !important;
|
|
z-index: 10020 !important;
|
|
display: block !important;
|
|
min-width: 160px;
|
|
padding: 10px 16px;
|
|
}
|
|
|
|
body:not(.spotui-tui-hidden):not(.spotui-spotify-enabled):not(.spotui-search-mode) #spotui-back-btn {
|
|
display: none !important;
|
|
}
|
|
|
|
#spotui-popup {
|
|
width: min(480px, calc(100vw - 32px)) !important;
|
|
}
|
|
|
|
.main-topBar-topbarContent {
|
|
display: none !important;
|
|
}
|
|
|
|
body.spotui-spotify-enabled .main-topBar-topbarContent {
|
|
display: flex !important;
|
|
}
|
|
|
|
button,
|
|
[role="button"] {
|
|
border-radius: 0 !important;
|
|
}
|