diff --git a/color.ini b/color.ini index 989b9ae..7b6dd1d 100644 --- a/color.ini +++ b/color.ini @@ -2,13 +2,13 @@ text = e6e6e6 subtext = b3b3b3 sidebar-text = e6e6e6 -sidebar-background = 0a0a0a -main = 0a0a0a -button = 1a1a1a -button-active = ff8c42 -button-disabled = 2a2a2a +sidebar-background = 000000 +main = 000000 +button = ff8c42 +button-active = ffb26f +button-disabled = 555555 tab-active = ff8c42 -notification = 1a1a1a +notification = 000000 notification-error = ff5555 -playback-bar = 2a2a2a +playback-bar = 000000 misc = ff8c42 diff --git a/user.css b/user.css index 37c2833..d3afc1a 100644 --- a/user.css +++ b/user.css @@ -14,7 +14,7 @@ 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 .Root__globalNav, body.spotui-spotify-enabled .main-yourLibraryX-libraryRootlist, body.spotui-spotify-enabled .main-yourLibraryX-entryPoints, body.spotui-spotify-enabled .Root__right-sidebar, @@ -34,7 +34,7 @@ body.spotui-spotify-enabled .main-view-container { 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 .Root__globalNav, body.spotui-spotify-enabled .main-yourLibraryX-libraryRootlist, body.spotui-spotify-enabled .main-yourLibraryX-entryPoints, body.spotui-spotify-enabled .Root__right-sidebar, @@ -44,7 +44,7 @@ body.spotui-spotify-enabled .main-trackList-trackList { display: flex !important; } -body.spotui-spotify-enabled .main-appShell-topBar { +body.spotui-spotify-enabled .Root__globalNav { background: #000 !important; border-bottom: 1px solid #ff8c42 !important; box-shadow: inset 0 -1px 0 rgba(255, 140, 66, 0.18) !important; @@ -52,56 +52,56 @@ body.spotui-spotify-enabled .main-appShell-topBar { 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 { +body.spotui-spotify-enabled .Root__globalNav .main-topBar-background, +body.spotui-spotify-enabled .Root__globalNav .main-topBar-overlay, +body.spotui-spotify-enabled .Root__globalNav .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 { +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-searchSection, +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-searchContainer, +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-searchInputContainer, +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-searchInputSection, +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-searchInputWrapper, +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-searchInputTextWrapper, +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-historyButtonsContainer, +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-historyButtonsWrapper, +body.spotui-spotify-enabled .Root__globalNav .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"] { +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-navLink, +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-historyButtons button, +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-searchContainer button, +body.spotui-spotify-enabled .Root__globalNav .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 { +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-navLink:hover, +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-historyButtons button:hover, +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-searchContainer button:hover, +body.spotui-spotify-enabled .Root__globalNav .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 { +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-searchContainer, +body.spotui-spotify-enabled .Root__globalNav .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 { +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-searchInputText, +body.spotui-spotify-enabled .Root__globalNav .x-searchInput-searchInputInput, +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-searchInputTextWrapper input { color: #ff8c42 !important; background: transparent !important; border: none !important; @@ -110,9 +110,9 @@ body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputTex 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 { +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-searchInputText::placeholder, +body.spotui-spotify-enabled .Root__globalNav .x-searchInput-searchInputInput::placeholder, +body.spotui-spotify-enabled .Root__globalNav .main-globalNav-searchInputTextWrapper input::placeholder { color: #777 !important; } @@ -353,8 +353,15 @@ body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsLine { .Root__main-view, .main-view-container, -.main-buddy-list { +.main-buddy-list, +.Root__nav-bar, +.Root__right-sidebar { background: #000 !important; + border: 1px solid #ff8c42 !important; + box-shadow: inset 0 0 0 1px rgba(255, 140, 66, 0.18) !important; + color: #ddd !important; + font-family: "JetBrains Mono", "Fira Code", monospace !important; + border-radius: 0 !important; } body { @@ -484,3 +491,180 @@ button, [role="button"] { border-radius: 0 !important; } + +/* global theme overrides */ +:root, html, body { + --spice-main: #000000 !important; + --spice-sidebar: #000000 !important; + --spice-player: #000000 !important; + --spice-card: #000000 !important; + --spice-shadow: transparent !important; + --spice-selected-row: #2a2a2a !important; + --spice-button: #ff8c42 !important; + --spice-button-active: #ffb26f !important; + --spice-button-disabled: #555555 !important; + --spice-tab-active: #ff8c42 !important; + --spice-notification: #000000 !important; + --spice-notification-error: #ff5555 !important; + --spice-misc: #ff8c42 !important; + --spice-text: #dddddd !important; + --spice-subtext: #b3b3b3 !important; + + --background-base: #000000 !important; + --background-highlight: #111111 !important; + --background-press: #222222 !important; + --background-elevated-base: #000000 !important; + --background-elevated-highlight: #111111 !important; + --background-elevated-press: #222222 !important; + --background-tinted-base: #000000 !important; + --background-tinted-highlight: #111111 !important; + --background-tinted-press: #222222 !important; + + --text-base: #dddddd !important; + --text-subdued: #b3b3b3 !important; + --text-bright-accent: #ff8c42 !important; + + /* encore specific color variables */ + --encore-bg-base: #000000 !important; + --encore-bg-press: #222222 !important; + --encore-bg-tinted-base: #000000 !important; + --encore-bg-tinted-press: #222222 !important; + --encore-text-base: #dddddd !important; + --encore-text-subdued: #b3b3b3 !important; + --encore-text-bright-accent: #ff8c42 !important; + + --encore-internal-color-bg-base: #000000 !important; + --encore-internal-color-bg-canvas: #000000 !important; + --encore-internal-color-bg-press: #222222 !important; + --encore-internal-color-bg-elevated: #000000 !important; + --encore-internal-color-text-base: #dddddd !important; + --encore-internal-color-text-subdued: #b3b3b3 !important; + --encore-internal-color-text-bright-accent: #ff8c42 !important; + --encore-internal-color-text-positive: #ff8c42 !important; + --encore-internal-color-text-warning: #ff8c42 !important; + --encore-internal-color-text-announcement: #ff8c42 !important; + + --encore-internal-color-essential-base: #ff8c42 !important; + --encore-internal-color-essential-subdued: #ffb26f !important; + --encore-internal-color-essential-bright-accent: #ff8c42 !important; + --encore-internal-color-essential-positive: #ff8c42 !important; + --encore-internal-color-essential-warning: #ff8c42 !important; + --encore-internal-color-decorative-base: #ff8c42 !important; + --encore-internal-color-decorative-subdued: #111111 !important; +} + +/* force standard font and border-radius everywhere */ +* { + font-family: "JetBrains Mono", "Fira Code", monospace !important; + border-radius: 0 !important; +} + +/* strip all gradients, dynamic backgrounds and borders */ +.main-home-homeHeader, +.main-entityHeader-background, +.main-entityHeader-overlay, +.main-actionBarBackground-background { + background: #000 !important; + background-image: none !important; + backdrop-filter: none !important; +} + +/* enforce black background on the main grid panels */ +body.spotui-spotify-enabled, +body.spotui-spotify-enabled #main, +body.spotui-spotify-enabled .Root, +body.spotui-spotify-enabled .Root__top-container, +body.spotui-spotify-enabled .Root__nav-bar, +body.spotui-spotify-enabled .Root__main-view, +body.spotui-spotify-enabled .Root__right-sidebar, +body.spotui-spotify-enabled .Root__globalNav, +body.spotui-spotify-enabled .main-yourLibraryX-libraryContainer, +body.spotui-spotify-enabled .YourLibraryX, +body.spotui-spotify-enabled .main-view-container, +body.spotui-spotify-enabled .main-view-container__scroll-node, +body.spotui-spotify-enabled .os-viewport, +body.spotui-spotify-enabled .main-buddy-list { + background-color: #000000 !important; + background: #000000 !important; +} + +/* frame panels with terminal borders */ +body.spotui-spotify-enabled .Root__nav-bar, +body.spotui-spotify-enabled .Root__main-view, +body.spotui-spotify-enabled .Root__right-sidebar, +body.spotui-spotify-enabled .main-buddy-list, +body.spotui-spotify-enabled .main-yourLibraryX-libraryContainer { + border: 1px solid #ff8c42 !important; + box-shadow: inset 0 0 0 1px rgba(255, 140, 66, 0.18) !important; + box-sizing: border-box !important; +} + +/* specific styling for the top global nav */ +body.spotui-spotify-enabled .Root__globalNav { + border-bottom: 1px solid #ff8c42 !important; + box-shadow: inset 0 -1px 0 rgba(255, 140, 66, 0.18) !important; + box-sizing: border-box !important; +} + +/* specific styling for the bottom play bar */ +body.spotui-spotify-enabled .Root__now-playing-bar { + border-top: 1px solid #ff8c42 !important; + box-shadow: inset 0 1px 0 rgba(255, 140, 66, 0.18) !important; + box-sizing: border-box !important; +} + +/* TUI list row hover states */ +body.spotui-spotify-enabled .e-10451-box--interactive:hover, +body.spotui-spotify-enabled .main-trackList-trackListRow:hover, +body.spotui-spotify-enabled .main-yourLibraryX-listItem:hover, +body.spotui-spotify-enabled [role="row"]:hover, +body.spotui-spotify-enabled .HqUgEQOPyVcDu2NW:hover { + background-color: #ff8c42 !important; + background: #ff8c42 !important; + --box-hover-background-color: #ff8c42 !important; + --box-active-background-color: #ff8c42 !important; +} + +body.spotui-spotify-enabled .e-10451-box--interactive:hover *, +body.spotui-spotify-enabled .main-trackList-trackListRow:hover *, +body.spotui-spotify-enabled .main-yourLibraryX-listItem:hover *, +body.spotui-spotify-enabled [role="row"]:hover *, +body.spotui-spotify-enabled .HqUgEQOPyVcDu2NW:hover * { + color: #000000 !important; + --encore-internal-color-text-base: #000000 !important; + --encore-internal-color-text-subdued: #222222 !important; + fill: #000000 !important; +} + +/* search mode layout repositioning */ +body.spotui-search-mode .Root__globalNav .main-globalNav-searchSection { + position: fixed !important; + top: 42% !important; + left: 50% !important; + transform: translate(-50%, -50%) !important; + z-index: 10030 !important; + width: min(480px, calc(100vw - 32px)) !important; + display: flex !important; +} + +body.spotui-search-mode .Root__globalNav .main-globalNav-searchContainer { + width: 100% !important; + background: #000 !important; + border: 1px solid #ff8c42 !important; + box-shadow: inset 0 1px 0 rgba(255, 140, 66, 0.15) !important; +} + +body.spotui-search-mode #spotui-back-btn { + position: fixed !important; + top: auto !important; + bottom: 110px !important; + left: 50% !important; + transform: translateX(-50%) !important; + z-index: 10020 !important; +} + +/* Hide Home and Browse buttons in search mode */ +body.spotui-search-mode .Root__globalNav button[aria-label="Home"], +body.spotui-search-mode .Root__globalNav .main-globalNav-browseButtonWrapper { + display: none !important; +}