feat(Sleek): RosePine colors, better visibility, minor edits (spiceti…

…fy#962) - new color scheme: RosePine - add navbar, timestamp background - add header shadows - reassign some colors - edit header borders
Parilia · Jun 29, 2023 · 0cff379 · 0cff379
1 parent 2af96da
commit 0cff379
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 12 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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