refactor: remove all non-colour related css - resolves #66

catppuccin · May 16, 2024 · 9c3263e · 9c3263e
1 parent d3c4b69
commit 9c3263e
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 87 deletions.
diff --git a/catppuccin/app.scss b/catppuccin/app.scss
@@ -5,6 +5,7 @@
 @forward "src/top_bar";
 
 :root {
+
   // Spicetify doesnt fully support light-sets yet, so we have to manually set the colors for the light theme
   .encore-dark-theme .encore-inverted-light-set {
     --background-highlight: var(--spice-overlay2) !important;
@@ -24,23 +25,26 @@
   .main-dropDown-dropDown {
     color: var(--spice-text);
     background-color: var(--spice-surface0);
+
     &:disabled {
       color: var(--spice-button-disabled);
     }
   }
 
   .x-toggle-indicatorWrapper {
     background-color: var(--spice-surface0);
+
     .x-toggle-indicator {
       background-color: var(--spice-text);
     }
   }
-  input:checked ~ .x-toggle-indicatorWrapper,
-  input:hover:not([disabled], :active) ~ .x-toggle-indicatorWrapper {
+
+  input:checked~.x-toggle-indicatorWrapper,
+  input:hover:not([disabled], :active)~.x-toggle-indicatorWrapper {
     background-color: var(--spice-surface1);
   }
 
-  input:checked:hover:not([disabled], :active) ~ .x-toggle-indicatorWrapper {
+  input:checked:hover:not([disabled], :active)~.x-toggle-indicatorWrapper {
     background-color: var(--spice-overlay0);
   }
 
@@ -70,6 +74,7 @@
   ::-webkit-scrollbar {
     width: 0.5em;
   }
+
   .os-scrollbar-handle,
   ::-webkit-scrollbar-thumb {
     background-color: var(--spice-text) !important;
@@ -85,11 +90,13 @@
       button {
         &:first-child {
           color: var(--spice-button-active);
+
           &:hover {
             color: var(--spice-notification-error);
           }
         }
-        &:last-child > div {
+
+        &:last-child>div {
           background-color: var(--spice-button);
         }
       }
@@ -101,4 +108,4 @@
   .main-contextMenu-menuItemButton:not([aria-checked="true"]):focus {
     color: var(--spice-subtext);
   }
-}
+}
diff --git a/catppuccin/src/_main.scss b/catppuccin/src/_main.scss
@@ -1,47 +1,12 @@
 :root .Root__main-view {
-  // Home Page
-  .main-home-homeHeader {
-    display: none;
-  }
-
-  .main-gridContainer-gridContainer > div,
-  .main-gridContainer-gridContainer > div > div > div {
-    border-radius: 6px;
-  }
-
-  .main-entityHeader-backgroundColor,
-  .main-actionBarBackground-background,
-  .main-view-container
-    main[aria-label="Spotify – Web Player"]
-    > div:first-child {
-    display: none;
-  }
-
-  // Cards
-  .main-card-card {
-    border-radius: 6px;
-  }
-
-  .main-card-imageContainer {
-    margin: -16px -16px 16px -16px;
-  }
-
-  .main-cardImage-imageWrapper,
-  .main-cardImage-image {
-    border-radius: 6px 6px 0 0;
-  }
 
   // Duration in album view
   .UyzJidwrGk3awngSGIwv {
     color: var(--spice-subtext);
   }
 
   // For that small dot on podcasts that notify us of new episodes
-  .main-home-content
-    > section:first-child
-    > .main-gridContainer-gridContainer
-    > div
-    span[aria-label],
+  .main-home-content>section:first-child>.main-gridContainer-gridContainer>div span[aria-label],
   span[aria-label="New episode"],
   span[aria-label="New Podcast Episode"] {
     background: var(--spice-text);
@@ -57,4 +22,4 @@
       border-color: var(--essential-base, #000000);
     }
   }
-}
+}
diff --git a/catppuccin/src/_navbar.scss b/catppuccin/src/_navbar.scss
@@ -1,19 +1,11 @@
 :root .Root__nav-bar {
   .main-rootlist-wrapper {
     div:nth-child(2) {
-      > li {
-        border-radius: 6px !important;
-
-        > div {
+      >li {
+        >div {
           &:active::after {
-            background-color: var(
-              --background-tinted-base,
-              rgba(0, 0, 0, 0.08)
-            );
-          }
-
-          .x-entityImage-imageContainer {
-            box-shadow: none !important;
+            background-color: var(--background-tinted-base,
+                rgba(0, 0, 0, 0.08));
           }
 
           p {
@@ -29,16 +21,12 @@
   }
 
   // Nav Items
-  .main-navBar-navBar li:hover > div,
-  .main-navBar-navBar li:hover > a:not(.main-navBar-navBarLinkActive),
+  .main-navBar-navBar li:hover>div,
+  .main-navBar-navBar li:hover>a:not(.main-navBar-navBarLinkActive),
   .spicetify-playlist-list li:hover {
     background-color: var(--spice-main);
   }
 
-  #spicetify-sticky-list li:hover > div {
-    border-radius: 4px;
-  }
-
   // Your collection, marketplace and lyrics app buttons
   .main-navBar-navBarLink {
     color: var(--spice-text);
@@ -56,9 +44,4 @@
   .main-navBar-navBarLinkActive {
     background-color: var(--spice-tab-active);
   }
-
-  .main-rootlist-rootlistItemLink:link,
-  .main-rootlist-rootlistItemLink:visited {
-    z-index: 1;
-  }
-}
+}
diff --git a/catppuccin/src/_now_playing.scss b/catppuccin/src/_now_playing.scss
@@ -4,9 +4,11 @@
   .main-shuffleButton-button:focus:not(:focus-visible, :hover) {
     color: var(--spice-spice-surface1);
   }
+
   .main-shuffleButton-button:hover {
     color: var(--spice-text);
   }
+
   .main-shuffleButton-button.main-shuffleButton-active {
     color: var(--spice-text);
   }
@@ -18,6 +20,7 @@
   .main-button-primary {
     background-color: var(--spice-main);
   }
+
   .main-button-primary:active,
   .main-button-primary:focus,
   .main-button-primary:hover {
@@ -27,10 +30,11 @@
   // Generic control buttons
   .Button-sm-16-buttonTertiary-iconOnly-isUsingKeyboard-useBrowserDefaultFocusStyle,
   .control-button,
-  .main-view-container button:hover > div[class^="ButtonInner-sc-"],
+  .main-view-container button:hover>div[class^="ButtonInner-sc-"],
   .main-skipForwardButton-button,
   .main-skipBackButton-button {
     color: var(--spice-subtext) !important;
+
     &:hover {
       color: var(--spice-text) !important;
     }
@@ -43,13 +47,8 @@
     color: var(--spice-red);
   }
 
-  .main-addButton-active:hover {
-    -webkit-transform: scale(1.06);
-    transform: scale(1.06);
-  }
-
   // Progress bar
-  .x-progressBar-progressBarBg > div > div {
+  .x-progressBar-progressBarBg>div>div {
     background-color: var(--spice-text);
   }
-}
+}
diff --git a/catppuccin/src/_right_sidebar.scss b/catppuccin/src/_right_sidebar.scss
@@ -25,4 +25,4 @@
   .main-buddyFeed-activityMetadata .main-buddyFeed-timestamp {
     color: rgba(var(--spice-rgb-sidebar-text), 0.8);
   }
-}
+}
diff --git a/catppuccin/src/_top_bar.scss b/catppuccin/src/_top_bar.scss
@@ -1,21 +1,17 @@
 :root .Root__top-bar header,
 :root .main-topBar-container {
+
   // Normalize button hover effect
   button:not(.x-searchInput-searchInputClearButton),
   .main-topBar-button {
     color: var(--spice-subtext) !important;
     background-color: var(--spice-main-elevated) !important;
-
-    &:hover {
-      color: var(--spice-text) !important;
-      -webkit-transform: scale(1.1);
-      transform: scale(1.1);
-    }
   }
 
   .main-topBar-background {
     background-color: var(--spice-mantle) !important;
   }
+
   .Svg-img-24-icon.home-active-icon {
     color: var(--spice-player);
   }
@@ -24,6 +20,7 @@
   .x-searchInput-searchInputInput {
     background-color: var(--spice-overlay0);
     color: var(--spice-subtext) !important;
+
     &::placeholder {
       color: rgba(var(--spice-rgb-subtext), 0.3);
     }
@@ -36,9 +33,4 @@
   .main-entityHeader-withBackgroundImage {
     background-color: rgba(var(--spice-rgb-player), 0.2);
   }
-
-  // Play button
-  .main-topBar-topbarContent .main-playButton-PlayButton {
-    margin-right: 8px;
-  }
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,4 +25,4 @@ @@
       .main-buddyFeed-activityMetadata .main-buddyFeed-timestamp {
         color: rgba(var(--spice-rgb-sidebar-text), 0.8);
       }
-    }
+    }