fix(Matte): small fixes (#945)

Matte/README.md

@@ -1,15 +1,5 @@
 # Matte
 
-## Description
-
-a Spicetify theme which features a distinct top bar, quick-to-edit CSS variables, and color schemes from Windows visual styles by KDr3w
-
-## Credits
-
--   Based on [Matte by KDr3w](https://www.deviantart.com/kdr3w/art/Matte-758699852) and their [other themes](https://www.deviantart.com/kdr3w/gallery/68078309/windows-10-themes)
-
--   Created by [darkthemer](https://github.com/darkthemer)
-
 ## Screenshots
 
 ### Matte (Old UI)
@@ -54,15 +44,31 @@ a Spicetify theme which features a distinct top bar, quick-to-edit CSS variables
 
 ![Gray Light](screenshots/ylx-gray-light.png)
 
+## More
+
+### Description
+
+a Spicetify theme which features a distinct top bar, quick-to-edit CSS variables, and color schemes from Windows visual styles by KDr3w
+
+### Credits
+
+-   Based on [Matte by KDr3w](https://www.deviantart.com/kdr3w/art/Matte-758699852) and their [other themes](https://www.deviantart.com/kdr3w/gallery/68078309/windows-10-themes)
+
+-   Created by [darkthemer](https://github.com/darkthemer)
+
 ### Notes
 
 -   Supports both Old UI and Your Library X UI
 
 -   Check the very top of `user.css` for quick configs
-    ![Window Controls](screenshots/quickcfg.png)
 
--   For Windows users, here's how to make the window controls' background match with the topbar background:
+    -   If you use the Marketplace, go to `Marketplace > Snippets > + Add CSS` and then paste the quick configs found in `user.css`. Edit these as you wish.
-    Put this snippet into your `user.css`
+
+![Window Controls](screenshots/quickcfg.png)
+
+-   For Windows users, here's how to make the window controls' background match with the topbar background
+
+    -   Put this snippet into your `user.css` (or through the Marketplace's custom CSS feature)
 
 ```css
 /* transparent window controls background */

Matte/color.ini

@@ -40,9 +40,9 @@
 ; notification-error    = error toast background
 ; misc                  = idk
 
-; main-elevated         = ylx searchbar
+; main-elevated         = ylx carousel buttons, etc
-; highlight-elevated    = ylx hovered searchbar
+; highlight-elevated    = ylx hovered carousel buttons, etc
-; highlight             = ylx hovered playlist
+; highlight             = ylx hovered playlist link, etc
 
 [matte]
 ; topbar

Matte/user.css

@@ -27,26 +27,6 @@
     --scrollbar-width-hover: 6px;
 }
 
-/* window controls background */
-body::after {
-    content: "";
-    position: absolute;
-    right: 0;
-    z-index: 999;
-    backdrop-filter: brightness(2.12);
-    /* page zoom [ctrl][+] or [ctrl][-]
-       edit width and height accordingly
-        69%  = 194px 45px
-        76%  = 177px 40.5px
-        83%  = 162px 37.5px
-        91%  = 148px 34px
-        100% = 135px 31px (default)
-        110% = 123px 28.5px
-    */
-    width: 162px;
-    height: 37.5px;
-}
-
 /*  ================================
     TOPBAR
     ================================ */
@@ -71,12 +51,11 @@ body::after {
         var(--top-bar-padding-top) + 40px + var(--top-bar-padding-bottom)
     );
 }
-.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-windows
+.body-drag-top {
-    .body-drag-top {
+    /* make whole top bar draggable */
-    /* make whole top bar draggable in windows */
     height: calc(
         var(--top-bar-padding-top) + 40px + var(--top-bar-padding-bottom)
-    );
+    ) !important;
 }
 .main-topBar-container {
     /* customize top bar padding */
@@ -502,6 +481,10 @@ body::after {
     > svg {
     color: var(--spice-link-active);
 }
+.main-yourEpisodesButton-yourEpisodesIcon {
+    background: var(--spice-sidebar-text);
+    color: var(--spice-sidebar);
+}
 
 /* ====main view==== */
 .main-trackList-trackListRow.main-trackList-selected,
@@ -645,8 +628,12 @@ body::after {
     -webkit-padding-start: unset !important;
     padding-inline-start: unset !important;
 }
+.spotify__container--is-desktop:not(.fullscreen)
+    .nav-ylx
+    .main-topBar-background,
+.nav-ylx .main-topBar-topbarContent,
 .nav-ylx .main-topBar-contentArea {
-    -webkit-app-region: drag;
+    -webkit-app-region: drag !important;
 }
 .nav-ylx .x-searchInput-searchInputInput {
     height: 41px;
@@ -716,7 +703,7 @@ body::after {
     background-color: var(--spice-player);
 }
 .nav-ylx .main-nowPlayingBar-nowPlayingBar {
-    height: 90px;
+    height: var(--player-height);
     padding: var(--player-padding);
 }
 [dir="ltr"] .nav-ylx .main-coverSlotCollapsed-navAltContainer {