fix(Matte): add 1.2.14 ylx support (#961)

* fix(Matte): small fixes

- update color descriptions
- remove transparent window controls
- match your episodes icon
- use player height variable

* docs(Matte): update README

* fix(Matte): draggable topbar in various pages

* fix(Matte): include fonts for non-Latin scripts

* fix(Matte): revert queue page margin replacement

* fix(Matte): add 1.2.14 ylx support

Matte/user.css

@@ -1,5 +1,5 @@
 /*  ================================
-    QUICK CONFIGURATIONS
+    USER-EDITABLE VARIABLES
     ================================ */
 
 :root {
@@ -45,6 +45,14 @@
     height: auto;
     border-bottom: var(--top-bar-border-width) solid var(--spice-topbar-border);
 }
+.Root__nav-bar {
+    /* support layout of older verions */
+    grid-area: left-sidebar;
+}
+.Root__right-sidebar {
+    /* support layout of older verions */
+    grid-area: right-sidebar;
+}
 .Root__top-bar:empty {
     /* make top bar the same height in lyrics page */
     padding-top: calc(
@@ -71,6 +79,8 @@
     /* remove user widget padding for windows */
     -webkit-padding-end: unset !important;
     padding-inline-end: unset !important;
+    -webkit-padding-start: unset !important;
+    padding-inline-start: unset !important;
 }
 .main-topBar-background {
     /* remove background upon scrolling */
@@ -177,11 +187,6 @@
     /* fix tracklist header in search */
     top: 64px !important;
 }
-.queue-queuePage-queuePage {
-    /* replace margin with padding in queue page */
-    margin-top: 0;
-    padding-top: 40px;
-}
 .main-home-homeHeader,
 .x-entityHeader-overlay,
 .x-actionBarBackground-background,
@@ -317,7 +322,9 @@
 * {
     /* heading font weight */
     font-weight: normal !important;
-    --font-family: "CircularSP";
+    --font-family: CircularSp, CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl,
+        CircularSp-Grek, CircularSp-Deva, var(--fallback-fonts, sans-serif),
+        sans-serif;
 }
 
 /*  scrollbar
@@ -621,29 +628,25 @@
 .Root {
     --panel-gap: 0 !important;
 }
-.spotify__container--is-desktop .nav-ylx .Root__top-container {
+.spotify__container--is-desktop .Root__top-container {
     padding-top: 0;
 }
-.spotify__container--is-desktop.spotify__os--is-windows .main-topBar-container {
+body:has(.main-yourLibraryX-library)
-    -webkit-padding-start: unset !important;
+    .spotify__container--is-desktop:not(.fullscreen)
-    padding-inline-start: unset !important;
-}
-.spotify__container--is-desktop:not(.fullscreen)
-    .nav-ylx
     .main-topBar-background,
-.nav-ylx .main-topBar-topbarContent,
+body:has(.main-yourLibraryX-library) .main-topBar-topbarContent,
-.nav-ylx .main-topBar-contentArea {
+body:has(.main-yourLibraryX-library) .main-topBar-contentArea {
     -webkit-app-region: drag !important;
 }
-.nav-ylx .x-searchInput-searchInputInput {
+body:has(.main-yourLibraryX-library) .x-searchInput-searchInputInput {
     height: 41px;
     background-color: var(--spice-tab-active);
 }
-.nav-ylx .x-searchInput-searchInputInput:hover {
+body:has(.main-yourLibraryX-library) .x-searchInput-searchInputInput:hover {
     background-color: var(--spice-tab-hover);
 }
 .main-yourLibraryX-entryPoints,
-.nav-ylx .Root__main-view {
+body:has(.main-yourLibraryX-library) .Root__main-view {
     border-radius: 0;
 }
 .main-yourLibraryX-entryPoints {
@@ -691,22 +694,24 @@
     -webkit-box-shadow: 0 20px 10px -10px var(--spice-sidebar);
     box-shadow: 0 20px 10px -10px var(--spice-sidebar);
 }
-.nav-ylx .x-searchInput-searchInputInput:hover,
+body:has(.main-yourLibraryX-library) .x-searchInput-searchInputInput:hover,
-.nav-ylx .x-searchInput-searchInputInput:focus,
+body:has(.main-yourLibraryX-library) .x-searchInput-searchInputInput:focus,
 .x-entityImage-imageContainer {
     box-shadow: none;
 }
-.nav-ylx .x-searchInput-searchInputInput {
+body:has(.main-yourLibraryX-library) .x-searchInput-searchInputInput {
     color: var(--spice-tab-active-text) !important;
 }
-.nav-ylx .main-nowPlayingBar-container {
+body:has(.main-yourLibraryX-library) .main-nowPlayingBar-container {
     background-color: var(--spice-player);
 }
-.nav-ylx .main-nowPlayingBar-nowPlayingBar {
+body:has(.main-yourLibraryX-library) .main-nowPlayingBar-nowPlayingBar {
     height: var(--player-height);
     padding: var(--player-padding);
 }
-[dir="ltr"] .nav-ylx .main-coverSlotCollapsed-navAltContainer {
+body:has(.main-yourLibraryX-library)
+    [dir="ltr"]
+    .main-coverSlotCollapsed-navAltContainer {
     transform: translateX(0);
 }
 .Pns6F5g4OEwEpdmOWTLg {
@@ -714,10 +719,11 @@
     opacity: 0.05;
     filter: contrast(0.1);
 }
-.nav-ylx .main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
+body:has(.main-yourLibraryX-library)
+    .main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
     background-color: var(--spice-main);
 }
-.nav-ylx
+body:has(.main-yourLibraryX-library)
     .artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled {
     border-bottom: 1px solid rgba(var(--spice-rgb-selected-row), 0.1);
     box-shadow: none;