diff --git a/Matte/README.md b/Matte/README.md index 0fae5df..340fdf6 100644 --- a/Matte/README.md +++ b/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: - Put this snippet into your `user.css` + - 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. + +![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 */ diff --git a/Matte/color.ini b/Matte/color.ini index 25c2432..4ada856 100644 --- a/Matte/color.ini +++ b/Matte/color.ini @@ -40,9 +40,9 @@ ; notification-error = error toast background ; misc = idk -; main-elevated = ylx searchbar -; highlight-elevated = ylx hovered searchbar -; highlight = ylx hovered playlist +; main-elevated = ylx carousel buttons, etc +; highlight-elevated = ylx hovered carousel buttons, etc +; highlight = ylx hovered playlist link, etc [matte] ; topbar diff --git a/Matte/user.css b/Matte/user.css index 04f73bf..6013e98 100644 --- a/Matte/user.css +++ b/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 { - /* make whole top bar draggable in windows */ +.body-drag-top { + /* make whole top bar draggable */ 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 {