refactor config

config/spicetify/Themes/catppuccin-mocha/color.ini

@@ -0,0 +1,234 @@
+[rosewater]
+text               = F5E0DC
+subtext            = CDD6F4
+accent             = FAE3B0
+main               = 1E1E2E
+sidebar            = 181825
+player             = 11111B
+card               = 414559
+shadow             = 181825
+selected-row       = 585B70
+button             = 7F849C
+button-active      = 9399B2
+button-disabled    = 6C7086
+tab-active         = 313244
+notification       = 313244
+notification-error = F38BA8
+equalizer          = F5E0DC
+misc               = 585B70
+
+[flamingo]
+text               = F2CDCD
+subtext            = CDD6F4
+main               = 1E1E2E
+sidebar            = 181825
+player             = 11111B
+card               = 313244
+shadow             = 181825
+selected-row       = 585B70
+button             = 7F849C
+button-active      = 9399B2
+button-disabled    = 6E6C7E
+tab-active         = 313244
+notification       = 313244
+notification-error = F28FAD
+equalizer          = F2CDCD
+misc               = 585B70
+
+[mauve]
+text               = CBA6F7
+subtext            = CDD6F4
+main               = 1E1E2E
+sidebar            = 181825
+player             = 11111B
+card               = 313244
+shadow             = 181825
+selected-row       = 585B70
+button             = 7F849C
+button-active      = 9399B2
+button-disabled    = 6E6C7E
+tab-active         = 313244
+notification       = 313244
+notification-error = F28FAD
+equalizer          = CBA6F7
+misc               = 585B70
+
+[pink]
+text               = F5C2E7
+subtext            = CDD6F4
+main               = 1E1E2E
+sidebar            = 181825
+player             = 11111B
+card               = 313244
+shadow             = 181825
+selected-row       = 585B70
+button             = 7F849C
+button-active      = 9399B2
+button-disabled    = 6E6C7E
+tab-active         = 313244
+notification       = 313244
+notification-error = F28FAD
+equalizer          = F5C2E7
+misc               = 585B70
+
+[maroon]
+text               = EBA0AC
+subtext            = CDD6F4
+main               = 1E1E2E
+sidebar            = 181825
+player             = 11111B
+card               = 313244
+shadow             = 181825
+selected-row       = 585B70
+button             = 7F849C
+button-active      = 9399B2
+button-disabled    = 6E6C7E
+tab-active         = 313244
+notification       = 313244
+notification-error = F28FAD
+equalizer          = EBA0AC
+misc               = 585B70
+
+[red]
+text               = F38BA8
+subtext            = CDD6F4
+main               = 1E1E2E
+sidebar            = 181825
+player             = 11111B
+card               = 313244
+shadow             = 181825
+selected-row       = 585B70
+button             = 7F849C
+button-active      = 9399B2
+button-disabled    = 6E6C7E
+tab-active         = 313244
+notification       = 313244
+notification-error = F28FAD
+equalizer          = F38BA8
+misc               = 585B70
+
+[peach]
+text               = FAB387
+subtext            = CDD6F4
+main               = 1E1E2E
+sidebar            = 181825
+player             = 11111B
+card               = 313244
+shadow             = 181825
+selected-row       = 585B70
+button             = 7F849C
+button-active      = 9399B2
+button-disabled    = 6E6C7E
+tab-active         = 313244
+notification       = 313244
+notification-error = F28FAD
+equalizer          = FAB387
+misc               = 585B70
+
+[yellow]
+text               = F9E2AF
+subtext            = CDD6F4
+main               = 1E1E2E
+sidebar            = 181825
+player             = 11111B
+card               = 313244
+shadow             = 181825
+selected-row       = 585B70
+button             = 7F849C
+button-active      = 9399B2
+button-disabled    = 6E6C7E
+tab-active         = 313244
+notification       = 313244
+notification-error = F28FAD
+equalizer          = F9E2AF
+misc               = 585B70
+
+[green]
+text               = A6E3A1
+subtext            = CDD6F4
+main               = 1E1E2E
+sidebar            = 181825
+player             = 11111B
+card               = 313244
+shadow             = 181825
+selected-row       = 585B70
+button             = 7F849C
+button-active      = 9399B2
+button-disabled    = 6E6C7E
+tab-active         = 313244
+notification       = 313244
+notification-error = F28FAD
+equalizer          = A6E3A1
+misc               = 585B70
+
+[teal]
+text               = 94E2D5
+subtext            = CDD6F4
+main               = 1E1E2E
+sidebar            = 181825
+player             = 11111B
+card               = 313244
+shadow             = 181825
+selected-row       = 585B70
+button             = 7F849C
+button-active      = 9399B2
+button-disabled    = 6E6C7E
+tab-active         = 313244
+notification       = 313244
+notification-error = F28FAD
+equalizer          = 94E2D5
+misc               = 585B70
+
+[blue]
+text               = 89B4FA
+subtext            = CDD6F4
+main               = 1E1E2E
+sidebar            = 181825
+player             = 11111B
+card               = 313244
+shadow             = 181825
+selected-row       = 585B70
+button             = 7F849C
+button-active      = 9399B2
+button-disabled    = 6E6C7E
+tab-active         = 313244
+notification       = 313244
+notification-error = F28FAD
+equalizer          = 89B4FA
+misc               = 585B70
+
+[sky]
+text               = 89DCEB
+subtext            = CDD6F4
+main               = 1E1E2E
+sidebar            = 181825
+player             = 11111B
+card               = 313244
+shadow             = 181825
+selected-row       = 585B70
+button             = 7F849C
+button-active      = 9399B2
+button-disabled    = 6E6C7E
+tab-active         = 313244
+notification       = 313244
+notification-error = F28FAD
+equalizer          = 89DCEB
+misc               = 585B70
+
+[lavender]
+text               = B4BEFE
+subtext            = BAC2DE
+main               = 1E1E2E
+sidebar            = 181825
+player             = 11111B
+card               = 313244
+shadow             = 181825
+selected-row       = 585B70
+button             = 7F849C
+button-active      = 9399B2
+button-disabled    = 6E6C7E
+tab-active         = 313244
+notification       = 313244
+notification-error = F28FAD
+equalizer          = B4BEFE
+misc               = 585B70

config/spicetify/Themes/catppuccin-mocha/user.css

@@ -0,0 +1,272 @@
+/* Color Pallette */
+/* Note: These variables should be used ONLY when needed across ALL of the color palettes. */
+:root {
+  /* Morning */
+  --flamingo: #f2cdcd;
+  --mauve: #cba6f7;
+  --pink: #f5c2e7;
+  --maroon: #eba0ac;
+  --red: #f38ba8;
+  --peach: #fab387;
+  --yellow: #f9e2af;
+  --green: #a6e3a1;
+  --teal: #94e2d5;
+  --blue: #89b4fa;
+  --sky: #89dceb;
+  /* Night */
+  /* --black-0: #161320; */
+  --crust: #11111B;
+  /* --black-1: #1A1826; */
+  --mantle: #181825;
+  /* --black-2: #1E1E2E;  */
+  --base: #1E1E2E;
+  /* --black-3: #302D41; */
+  --surface0: #313244;
+  /* --black-4: #575268;  */
+  --surface1: #45475A; 
+  /* --gray-0: #6E6C7E;  */
+  --overlay0: #6C7086;
+  /* --gray-1: #988BA2; */
+  ---overlay1: #7f849C;
+  /* --gray-2: #C3BAC6; */
+  --overlay2: #9399B2;
+  /* --white: #D9E0EE; */
+  --white: #d9e0ee;
+  --lavender: #b4befe;
+  --rosewater: #f5e0dc;
+}
+
+/* Buttons */
+.main-playButton-PlayButton.main-playButton-primary {
+    color: var(--spice-player);
+}
+
+.main-button-primary {
+    background-color: var(--spice-main);
+}
+.main-button-primary:active,
+.main-button-primary:focus,
+.main-button-primary:hover {
+    background-color: var(--spice-sidebar);
+}
+
+.main-view-container button:hover > div[class^='ButtonInner-sc-'] {
+    background-color: var(--spice-button);
+}
+
+.control-button-heart[aria-checked="true"],
+.main-addButton-active,
+.main-addButton-active:focus,
+.main-addButton-active:hover {
+    color: var(--red);
+}
+
+.main-addButton-active:hover {
+    -webkit-transform: scale(1.06);
+    transform: scale(1.06);
+}
+
+/* Progress bar */
+.x-progressBar-progressBarBg > div > div {
+    background-color: var(--spice-text);
+}
+
+/* Top bars */
+.main-entityHeader-backgroundColor,
+.main-actionBarBackground-background,
+.main-view-container main[aria-label="Spotify – Web Player"] > div:first-child {
+    display: none;
+}
+
+.main-topBar-background {
+    background-color: var(--spice-main) !important;
+}
+
+.main-entityHeader-withBackgroundImage {
+    background-color: rgba(var(--spice-rgb-player), 0.2);
+}
+
+/* Sidebar */
+.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;
+}
+
+/* Scrollbar */
+.os-theme-spotify > .os-scrollbar-horizontal,
+.os-theme-spotify > .os-scrollbar-vertical {
+    padding: 4px;
+}
+
+.os-theme-spotify.os-host-transition
+    > .os-scrollbar-horizontal
+    > .os-scrollbar-track
+    > .os-scrollbar-handle,
+.os-theme-spotify.os-host-transition
+    > .os-scrollbar-vertical
+    > .os-scrollbar-track
+    > .os-scrollbar-handle {
+    background-color: var(--decorative-base);
+    border-radius: 6px;
+}
+
+::-webkit-scrollbar {
+    width: 0.5em;
+}
+::-webkit-scrollbar-thumb {
+    background-color: #575268;
+    border-radius: 4px;
+}
+
+/* Home */
+.main-home-homeHeader {
+    display: none;
+}
+
+.main-home-content
+    > section:first-child
+    > .main-gridContainer-gridContainer
+    > div {
+    background-color: var(--spice-card);
+}
+.main-home-content
+    > section:first-child
+    > .main-gridContainer-gridContainer
+    > div:hover {
+    background-color: var(--spice-misc);
+}
+
+.main-gridContainer-gridContainer > div,
+.main-gridContainer-gridContainer > div > div > div {
+    border-radius: 6px;
+}
+
+/* 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;
+}
+
+/* Settings */
+input:checked~.x-toggle-indicatorWrapper {
+  background-color: var(---overlay1);
+}
+
+input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper {
+  background-color: var(--spice-button-active);
+}
+
+select option:checked {
+  color: var(--spice-text);
+  font-weight: bold;
+}
+
+/* Animated equalizer */
+/* EQ color classes are specified here in case the js extension is not moved over
+ * The default green eq will be used in this case */
+.catppuccin-eq-rosewater .main-trackList-playingIcon,
+.catppuccin-eq-flamingo .main-trackList-playingIcon,
+.catppuccin-eq-mauve .main-trackList-playingIcon,
+.catppuccin-eq-pink .main-trackList-playingIcon,
+.catppuccin-eq-maroon .main-trackList-playingIcon,
+.catppuccin-eq-red .main-trackList-playingIcon,
+.catppuccin-eq-peach .main-trackList-playingIcon,
+.catppuccin-eq-yellow .main-trackList-playingIcon,
+.catppuccin-eq-green .main-trackList-playingIcon,
+.catppuccin-eq-teal .main-trackList-playingIcon,
+.catppuccin-eq-blue .main-trackList-playingIcon,
+.catppuccin-eq-sky .main-trackList-playingIcon,
+.catppuccin-eq-lavender .main-trackList-playingIcon,
+.catppuccin-eq-white .main-trackList-playingIcon {
+    background-size: cover;
+    padding-left: 100%;
+}
+
+.catppuccin-eq-rosewater .main-trackList-playingIcon {
+    background-image: url("equalizer-animated-rosewater.gif");
+}
+.catppuccin-eq-flamingo .main-trackList-playingIcon {
+    background-image: url("equalizer-animated-flamingo.gif");
+}
+.catppuccin-eq-mauve .main-trackList-playingIcon {
+    background-image: url("equalizer-animated-mauve.gif");
+}
+.catppuccin-eq-pink .main-trackList-playingIcon {
+    background-image: url("equalizer-animated-pink.gif");
+}
+.catppuccin-eq-maroon .main-trackList-playingIcon {
+    background-image: url("equalizer-animated-maroon.gif");
+}
+.catppuccin-eq-red .main-trackList-playingIcon {
+    background-image: url("equalizer-animated-red.gif");
+}
+.catppuccin-eq-peach .main-trackList-playingIcon {
+    background-image: url("equalizer-animated-peach.gif");
+}
+.catppuccin-eq-yellow .main-trackList-playingIcon {
+    background-image: url("equalizer-animated-yellow.gif");
+}
+.catppuccin-eq-green .main-trackList-playingIcon {
+    background-image: url("equalizer-animated-green.gif");
+}
+.catppuccin-eq-teal .main-trackList-playingIcon {
+    background-image: url("equalizer-animated-teal.gif");
+}
+.catppuccin-eq-blue .main-trackList-playingIcon {
+    background-image: url("equalizer-animated-blue.gif");
+}
+.catppuccin-eq-sky .main-trackList-playingIcon {
+    background-image: url("equalizer-animated-sky.gif");
+}
+.catppuccin-eq-lavender .main-trackList-playingIcon {
+    background-image: url("equalizer-animated-lavender.gif");
+}
+.catppuccin-eq-lavender .main-trackList-playingIcon {
+    background-image: url("equalizer-animated-white.gif");
+}
+
+/* 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],
+span[aria-label="New episode"],
+span[aria-label="New Podcast Episode"] {
+    background: var(--spice-accent, var(--spice-text));
+}
+
+/* Modals */
+.GenericModal[aria-label="Already added"] > div {
+    background-color: var(--spice-card);
+    color: var(--spice-subtext);
+}
+
+.GenericModal[aria-label="Already added"] button:first-child {
+    color: var(--spice-button-active);
+}
+
+.GenericModal[aria-label="Already added"] button:first-child:hover {
+    color: var(--spice-notification-error);
+}
+
+.GenericModal[aria-label="Already added"] button:last-child:hover > div {
+    background-color: var(--spice-button);
+}
+
+.main-rootlist-rootlistItemLink:link, .main-rootlist-rootlistItemLink:visited {
+    z-index: 1;
+}