fix for issue spicetify#922

harbassan · Jun 23, 2023 · 995cd78 · 995cd78
1 parent 57a6bfb
commit 995cd78
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 7 deletions.
diff --git a/Dribbblish/color.ini b/Dribbblish/color.ini
@@ -125,15 +125,15 @@ notification       = ff9e00
 notification-error = f61379
 misc               = DEDEDE
 
-[samourai]
+[samurai]
 text               = ebdbb2
 subtext            = ebdbb2
 sidebar-text       = 461217
 main               = 461217
 sidebar            = ebdbb2
 player             = 461217
 card               = 461217
-shadow             = 3a2645
+shadow             = 000000
 selected-row       = 909090
 button             = e7a52d
 button-active      = e7a52d

diff --git a/Dribbblish/user.css b/Dribbblish/user.css
@@ -211,6 +211,12 @@ body {
 .main-yourLibraryX-navLink {
     height: 48px;
 }
+/* change tab colours */
+.main-navBar-mainNav .link-subtle,
+.main-navBar-mainNav .link-subtle svg {
+    color: var(--spice-sidebar-text) !important;
+}
+
 /* give active nav tab a background */
 .main-navBar-mainNav li:has(> .active) {
     background-color: var(--spice-tab-active);
@@ -248,6 +254,7 @@ li div:has(> .main-yourLibraryX-rowCover) {
 /* folder items */
 .x-entityImage-imagePlaceholder {
     background-color: transparent;
+    color: var(--spice-sidebar-text);
 }
 /* local files item */
 .main-yourLibraryX-rowCover {
@@ -275,17 +282,21 @@ li > div::after {
 }
 /* fix scrolllist item colours */
 .main-navBar-mainNav li p {
-    color: var(--spice-text) !important;
+    color: var(--spice-sidebar-text) !important;
 }
 .main-navBar-mainNav li p svg {
-    fill: var(--spice-text) !important;
+    fill: var(--spice-sidebar-text) !important;
+}
+.main-yourLibraryX-listRowIconWrapper {
+    fill: var(--spice-sidebar-text) !important;
 }
 /* reduce spacing between playlist name and subtitle */
 .main-yourLibraryX-listRowSubtitle {
     margin-top: -8px;
 }
 .main-yourLibraryX-collapseButton > button {
     gap: 8px;
+    color: var(--spice-sidebar-text) !important;
 }
 /* expanded sidebar buttons */
 .search-searchCategory-carouselButton {
@@ -294,9 +305,14 @@ li > div::after {
 .search-searchCategory-carouselButton:hover {
     background-color: var(--spice-tab-active);
 }
+.search-searchCategory-carouselButton svg {
+    fill: var(--spice-sidebar-text) !important;
+}
+.main-yourLibraryX-iconOnly {
+    color: var(--spice-sidebar-text) !important;
+}
 .main-yourLibraryX-iconOnly:hover {
     background-color: var(--spice-tab-active);
-    color: var(--spice-text);
 }
 .main-yourLibraryX-filterArea > div > div:first-child button {
     background-color: var(--spice-tab-active) !important;
@@ -310,7 +326,7 @@ li > div::after {
 .main-yourLibraryX-libraryFilter .x-filterBox-searchIconContainer,
 .main-yourLibraryX-libraryFilter .x-filterBox-filterInput,
 .main-yourLibraryX-libraryFilter .x-filterBox-clearButton {
-    color: var(--spice-text);
+    color: var(--spice-sidebar-text);
 }
 
 /* hide main view backgound gradient */
@@ -332,6 +348,22 @@ li > div::after {
 .main-playButton-PlayButton svg {
     color: var(--spice-text);
 }
+/* fix playlist action bar buttons colour */
+.main-actionBar-ActionBarRow button,
+.main-actionBar-ActionBarRow svg:not(.main-playButton-PlayButton svg) {
+    color: rgba(var(--spice-rgb-text), 0.7);
+}
+.main-actionBar-ActionBarRow button:hover,
+.main-actionBar-ActionBarRow button:hover svg:not(.main-playButton-PlayButton svg) {
+    color: var(--spice-text);
+}
+/* change playing icon from gif to svg */
+.main-trackList-playingIcon {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E");
+    background: var(--spice-button);
+    content-visibility: hidden;
+    -webkit-mask-repeat: no-repeat;
+}
 /* full screen artists background */
 .main-entityHeader-container.main-entityHeader-withBackgroundImage,
 .main-entityHeader-background,
@@ -394,8 +426,41 @@ input {
     padding: 6px 10px 6px 48px;
     color: var(--spice-text) !important;
 }
+.Root__nav-bar input {
+    border-bottom: solid 1px var(--spice-sidebar-text) !important;
+    color: var(--spice-sidebar-text) !important;
+}
 .Root__nav-bar input::placeholder {
-    color: var(--spice-subtext) !important;
+    color: rgba(var(--spice-rgb-sidebar-text), 0.5) !important;
+}
+
+/* fix connect bar styles */
+.main-connectBar-connectBar {
+    color: var(--spice-main) !important;
+    border-radius: 0 0 var(--corner-radius) var(--corner-radius);
+}
+
+/* topbar play button */
+.main-topBar-topbarContent .main-playButton-PlayButton > button > span {
+    inline-size: 32px;
+    block-size: 32px;
+    min-block-size: auto;
+}
+.main-topBar-topbarContent .main-playButton-PlayButton svg {
+    width: 18px;
+    height: 18px;
+}
+.main-topBar-topbarContent .main-playButton-PlayButton > button > span > span {
+    position: initial;
+    height: 18px;
+}
+
+/* disable dynamic lyrics background */
+.lyrics-lyrics-container {
+    --lyrics-color-inactive: rgba(var(--spice-rgb-text), 0.3) !important;
+}
+.lyrics-lyrics-background {
+    background-color: var(--spice-main);
 }
 
 /* LEGACY NAVBAR ONLY */