diff --git a/Sleek/README.md b/Sleek/README.md index a75ce3c..ab3cd38 100644 --- a/Sleek/README.md +++ b/Sleek/README.md @@ -52,6 +52,10 @@ ![VantaBlack](vantablack.png) +### RosePine + +![RosePine](rosepine.png) + ## Info A simple, 'sleek' theme that builds upon the basic Spotify UI to create a more stylised experience. Also removes all annoyances from free version, including banner advertisements and upgrade buttons. diff --git a/Sleek/color.ini b/Sleek/color.ini index d0ba137..d260e72 100644 --- a/Sleek/color.ini +++ b/Sleek/color.ini @@ -297,6 +297,29 @@ notification-error = 000000 playback-bar = 000000 misc = 000000 +[RosePine] +; https://rosepinetheme.com/palette +text = e0def4 +subtext = 908caa +nav-active-text = ebbcba +main = 191724 +sidebar = 191724 +player = 191724 +card = 1f1d2e +shadow = 191724 +main-secondary = 1f1d2e +button = ebbcba +button-secondary = 6e6a86 +button-active = ebbcba +button-disabled = 26233a +nav-active = 1f1d2e +play-button = ebbcba +tab-active = 1f1d2e +notification = 26233a +notification-error = eb6f92 +playback-bar = 6e6a86 +misc = FFFFFF + ; Description ; text = main text, playlist names in main field, name of playlist selected in sidebar, headings diff --git a/Sleek/rosepine.png b/Sleek/rosepine.png new file mode 100644 index 0000000..d590a5b Binary files /dev/null and b/Sleek/rosepine.png differ diff --git a/Sleek/user.css b/Sleek/user.css index 7305e92..8a8852e 100644 --- a/Sleek/user.css +++ b/Sleek/user.css @@ -1,3 +1,8 @@ +:root { + --spice-main-elevated: var(--spice-main); + --spice-highlight: var(--spice-main-secondary); + --spice-highlight-elevated: var(--spice-main-secondary); +} /* ------------- TOPBAR @@ -25,8 +30,9 @@ TOPBAR border-radius: 8px; } -/* remove topbar background colour */ +/* smooth topbar background colour */ .main-topBar-background { + background-image: linear-gradient(var(--spice-main) 5%, 75%, transparent); background-color: unset !important; } .main-topBar-overlay { @@ -124,7 +130,10 @@ NAVBAR .main-navBar-navBarLinkActive:focus, .main-navBar-navBarLinkActive:hover, .main-collectionLinkButton-selected, -.main-collectionLinkButton-selected svg { +.main-collectionLinkButton-selected svg, +.main-yourLibraryX-navLinkActive, +.main-yourLibraryX-navLinkActive .home-active-icon, +.main-yourLibraryX-navLinkActive .search-active-icon { color: var(--spice-nav-active-text) !important; } @@ -142,6 +151,21 @@ NAVBAR .main-navBar-navBarLink:not(.main-navBar-navBarLinkActive):hover svg { color: var(--spice-text); } + +.main-yourLibraryX-entryPoints { + background-color: var(--spice-sidebar); +} + +.main-yourLibraryX-isScrolled { + -webkit-box-shadow: 0 20px 10px -10px var(--spice-sidebar); + box-shadow: 0 20px 10px -10px var(--spice-sidebar); +} + +.Pns6F5g4OEwEpdmOWTLg { + /* playlists loading placeholder */ + opacity: 0.05; + filter: contrast(0.1); +} /* --------------- PLAYBACK BAR @@ -179,6 +203,11 @@ PLAYBACK BAR bottom: 13px; left: 0; transition-duration: 0.3s; + padding: 0 10px 0 20px; + background-color: var(--spice-sidebar); + box-shadow: 0 0 20px 20px var(--spice-sidebar); + border-radius: 8px; + z-index: -1; } .main-playbackBarRemainingTime-container { @@ -187,9 +216,14 @@ PLAYBACK BAR bottom: 13px; right: 0; transition-duration: 0.3s; + padding-left: 0 20px 0 10px; + background-color: var(--spice-main); + box-shadow: 0 0 20px 20px var(--spice-main); + border-radius: 8px; + z-index: -1; } -/* show time on hover */ +/* show time on hover & better visibility */ .playback-bar:hover .playback-bar__progress-time-elapsed, .playback-bar:hover .main-playbackBarRemainingTime-container { opacity: 1; @@ -220,7 +254,7 @@ html:not(.fullscreen) .playback-bar { /* change appearance of play-button */ .main-playPauseButton-button { background-color: inherit; - color: var(--spice-text); + color: var(--spice-play-button); transition-duration: 0.3s !important; } @@ -248,6 +282,11 @@ html.fullscreen .main-playPauseButton-button svg { background-color: var(--spice-button-disabled); border-radius: 0px; } + +/* matching button colors */ +.main-nowPlayingBar-extraControls button { + color: rgba(var(--spice-rgb-selected-row),.7); +} /* --------------- BUDDY FEED @@ -311,6 +350,9 @@ input { padding: 6px 10px 6px 48px; color: var(--spice-text) !important; } +::placeholder { + color: var(--spice-subtext) !important; +} /* remove background color from main headers */ .main-home-homeHeader, @@ -367,9 +409,19 @@ input { width: 6px; } -/* add border under header row */ -.main-trackList-trackListHeaderRow { - border-bottom: 2px solid var(--spice-button-disabled); +/* add smooth shadow under headers */ +.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader, +.artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled { + background-color: var(--spice-main); + border-bottom: none; + -webkit-box-shadow: 0 0 50px 50px var(--spice-main); + box-shadow: 0 0 50px 50px var(--spice-main); + transition: box-shadow 0.2s; +} +.search-searchCategory-SearchCategory { + -webkit-box-shadow: 0 0 20px 20px var(--spice-main); + box-shadow: 0 0 20px 20px var(--spice-main); + z-index: 3; } /* topbar play button */ @@ -469,12 +521,13 @@ a.x-heroCategoryCard-HeroCategoryCard { /* change appearance of verified artist badge */ .main-entityHeader-headerText > span:first-child { - border: 2px solid var(--spice-text); - border-radius: 8px; + border: 0.25em solid var(--spice-text); + border-radius: 0.5em; width: fit-content; gap: 0px; text-align: center; - padding: 3px 7px; + padding: 0.25em 0.75em; + --font-family: CircularSp,CircularSp-Arab,CircularSp-Hebr,CircularSp-Cyrl,CircularSp-Grek,CircularSp-Deva,var(--fallback-fonts,sans-serif),sans-serif; } .main-entityHeader-headerText > span:first-child > span { diff --git a/THEMES.md b/THEMES.md index 010843f..db249aa 100644 --- a/THEMES.md +++ b/THEMES.md @@ -134,8 +134,8 @@ Here you can find a preview of all the themes. Some of them may have different c | Psycho | UltraBlack | | ![Wealthy](Sleek/wealthy.png) | ![Dracula](Sleek/dracula.png) | | Wealthy | Dracula | -| ![VantaBlack](Sleek/vantablack.png) | -| VantaBlack | +| ![VantaBlack](Sleek/vantablack.png) | ![RosePine](Sleek/rosepine.png) | +| VantaBlack | RosePine | ## Turntable