forked from SpoTUI/SpoTUI
Initial SpoTUI package
This commit is contained in:
Damjan Antevski
@@ -0,0 +1,113 @@
|
||||
# SpoTUI
|
||||
|
||||
SpoTUI is a terminal-style Spotify skin built for Spicetify.
|
||||
|
||||
It combines:
|
||||
- a custom UI overlay in `theme.js`
|
||||
- theme styling in `user.css`
|
||||
- Spotify color values in `color.ini`
|
||||
|
||||
## Screenshot
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
- Terminal-inspired interface
|
||||
- Built-in playback controls
|
||||
- Playlist browsing and management
|
||||
- Spotify-native fallback mode
|
||||
- Copy-log and hide/show controls
|
||||
|
||||
## Installation
|
||||
|
||||
<details>
|
||||
<summary>Linux</summary>
|
||||
|
||||
1. Open a terminal.
|
||||
2. Go to your Spicetify themes directory:
|
||||
```bash
|
||||
cd ~/.config/spicetify/Themes
|
||||
```
|
||||
3. Clone or pull this repo into that folder:
|
||||
```bash
|
||||
git clone <your-repo-url> SpoTUI
|
||||
```
|
||||
If you already have it locally, update it instead:
|
||||
```bash
|
||||
cd SpoTUI
|
||||
git pull
|
||||
```
|
||||
4. Set SpoTUI as your current theme:
|
||||
```bash
|
||||
spicetify config current_theme SpoTUI
|
||||
```
|
||||
5. Apply Spicetify:
|
||||
```bash
|
||||
spicetify apply
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Windows</summary>
|
||||
|
||||
1. Open PowerShell or Command Prompt.
|
||||
2. Go to your Spicetify themes directory:
|
||||
```powershell
|
||||
cd $env:APPDATA\spicetify\Themes
|
||||
```
|
||||
3. Clone or pull this repo into that folder:
|
||||
```powershell
|
||||
git clone <your-repo-url> SpoTUI
|
||||
```
|
||||
If you already have it locally, update it instead:
|
||||
```powershell
|
||||
cd SpoTUI
|
||||
git pull
|
||||
```
|
||||
4. Set SpoTUI as your current theme:
|
||||
```powershell
|
||||
spicetify config current_theme SpoTUI
|
||||
```
|
||||
5. Apply Spicetify:
|
||||
```powershell
|
||||
spicetify apply
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
After applying the theme, open Spotify and use the SpoTUI interface directly from the client.
|
||||
|
||||
The built-in command list includes:
|
||||
|
||||
- `tui -m [command|cli]`
|
||||
- `playlist`
|
||||
- `list`
|
||||
- `queue`
|
||||
- `play`
|
||||
- `pause`
|
||||
- `p`
|
||||
- `skip`
|
||||
- `back`
|
||||
- `v <percent>`
|
||||
- `volume <percent>`
|
||||
- `shuffle`
|
||||
- `loop [on|off]`
|
||||
- `superloop [on|off]`
|
||||
- `search`
|
||||
- `clear`
|
||||
|
||||
## Theme Files
|
||||
|
||||
- `theme.js` - JavaScript UI logic
|
||||
- `user.css` - Spotify UI styling overrides
|
||||
- `color.ini` - theme colors
|
||||
- `preview.png` - Marketplace preview image
|
||||
|
||||
## Author
|
||||
|
||||
SkenS - https://github.com/SkenSMasteR
|
||||
@@ -0,0 +1,14 @@
|
||||
[SpoTUI - SkenS]
|
||||
text = e6e6e6
|
||||
subtext = b3b3b3
|
||||
sidebar-text = e6e6e6
|
||||
sidebar-background = 0a0a0a
|
||||
main = 0a0a0a
|
||||
button = 1a1a1a
|
||||
button-active = ff8c42
|
||||
button-disabled = 2a2a2a
|
||||
tab-active = ff8c42
|
||||
notification = 1a1a1a
|
||||
notification-error = ff5555
|
||||
playback-bar = 2a2a2a
|
||||
misc = ff8c42
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "SpoTUI",
|
||||
"description": "Terminal interface for Spotify...",
|
||||
"preview": "preview.png",
|
||||
"readme": "README.md",
|
||||
"branch": "release",
|
||||
"authors": [
|
||||
{ "name": "SkenS", "url": "https://github.com/SkenSMasteR" }
|
||||
],
|
||||
"tags": ["tui", "beta", "dev", "commands", "terminal", "cli"]
|
||||
}
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 304 KiB |
@@ -0,0 +1,486 @@
|
||||
.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;
|
||||
}
|
||||
Reference in New Issue
Block a user