diff --git a/Matte/README.md b/Matte/README.md index b0e8d80..0fae5df 100644 --- a/Matte/README.md +++ b/Matte/README.md @@ -1,32 +1,89 @@ # 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 -![Queue Page](screenshots/queue.png) -![Search Page](screenshots/search.png) -![Customized Config](screenshots/customized.png) +### Matte (Old UI) -## More +![Matte Queue Page](screenshots/queue.png) +![Matte Search Page](screenshots/search.png) +![Matte Customized Config](screenshots/customized.png) -### Description -Has a neat color pallete and a much cleaner interface +### Matte (YLX UI) + +![Matte](screenshots/ylx-matte.png) + +### Periwinkle + +![Periwinkle](screenshots/ylx-periwinkle.png) + +### Periwinkle-Dark + +![Periwkinle Dark](screenshots/ylx-periwinkle-dark.png) + +### Porcelain + +![Porcelain](screenshots/ylx-porcelain.png) + +### Gray-Dark1 + +![Gray Dark 1](screenshots/ylx-gray-dark1.png) + +### Gray-Dark2 + +![Gray Dark 2](screenshots/ylx-gray-dark2.png) + +### Gray-Dark3 + +![Gray Dark 3](screenshots/ylx-gray-dark3.png) + +### Gray + +![Gray](screenshots/ylx-gray.png) + +### Gray-Light + +![Gray Light](screenshots/ylx-gray-light.png) ### Notes -Check the very top of `user.css` for quick configs -For Windows users, here's how to make the window controls' background match with the topbar background: -Put this snippet into your `user.css` +- 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` + ```css -/* window controls background */ -.Root__top-bar { - background-image: linear-gradient(#4a5b6b, #4a5b6b); /* depends on the color */ - background-repeat: no-repeat; - background-position: top right; - background-size: 135px 31px; /* depends on the set page zoom - this value is for 100% */ +/* transparent 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: 135px; + height: 31px; } ``` -![Window Controls](screenshots/winctrl.png) -### Credits -Based on [Matte by KDr3w](https://www.deviantart.com/kdr3w/art/Matte-758699852) -Created by [darkthemer](https://github.com/darkthemer) \ No newline at end of file +![Window Controls](screenshots/winctrl.png) diff --git a/Matte/color.ini b/Matte/color.ini index 0fe71cf..25c2432 100644 --- a/Matte/color.ini +++ b/Matte/color.ini @@ -1,35 +1,522 @@ -;COLORS KEYS DESCRIPTION -; text = Main text, playlist names in main field, name of playlist selected in sidebar, headings -; subtext = Text in main buttons in sidebar, playlist names in sidebar, artist names, mini infos, seekbar and volume bar background -; topbar = Topbar background -; main = Main field background -; sidebar = Sidebar background -; player = Player background -; card = Card and selected song background on hover -; shadow = Card and context menu drop shadow -; selected-row = Caption and playlist details, download and options buttons -; button = Accent color -; button-active = Accent color on select and hover -; button-disabled = Scrollbar color, tab background on hover, off toggle background -; tab-active = Tabbar active item background in header -; notification = Notification toast -; notification-error = Notification error toast -; misc = Miscellaneous +; COLORS' KEY DESCRIPTIONS + +; topbar = background +; topbar-text = title, enabled history button +; topbar-subtext = unselected tabs, disabled history button +; tab-active = selected tab item, search bar background +; tab-active-text = selected tab item, search bar text +; tab-hover = hovered tab item, hovered search bar +; topbar-border = bottom border + +; sidebar = background +; sidebar-text = primary text (home, search, library, playlists, etc) +; link-hover-text = hovered link item text +; link-active = selected link item background +; link-active-text = selected link item text +; sidebar-border = left or right border + +; main = background +; text = primary text (heading, title, some name, song count, button text, etc) +; subtext = secondary text (description, some name, duration, tracklist album, play count, etc) +; selected-row = some details, border, button (heart, download, options in playlist or album) + +; player = background +; player-text = song title, hovered text +; player-subtext = artist name, time duration +; player-selected-row = progress bar (background, duration, volume), button (playback, extra) +; player-border = top border + +; button = button (lyrics, queue in player bar, on toggle in settings) +; button-active = button (play-pause button, current song title in queue, active heart, hovered button and toggle) +; button-disabled = button (off toggle and dropdown menu in settings) +; scrollbar = default +; scrollbar-hover = hovered +; context-menu = background +; context-menu-text = primary text +; context-menu-hover = hovered item backgrond +; card = hovered card, tracks in queue or playlist, etc +; shadow = context menu shadow, popup background dim, popup button background (close, carousel), toast shadow +; notification = toast background, private session indicator +; notification-error = error toast background +; misc = idk + +; main-elevated = ylx searchbar +; highlight-elevated = ylx hovered searchbar +; highlight = ylx hovered playlist [matte] -text = FFFFFF -subtext = 7e8596 -topbar = 232b32 -main = 1c2228 -sidebar = 181e23 -player = 141b1f -card = 232d35 -shadow = 000000 -selected-row = 7e8596 -button = 01BFA5 -button-active = 01BFA5 -button-disabled = 39454f -tab-active = 1c2228 -notification = 1c2228 -notification-error = e22134 -misc = 39454f \ No newline at end of file +; topbar +topbar = 232b32 +topbar-text = d0d2d9 +topbar-subtext = 4a5460 +tab-active = 1c2228 +tab-active-text = d0d2d9 +tab-hover = 131b20 +topbar-border = 232b32 + +; sidebars +sidebar = 181e23 +sidebar-text = 7e8596 +link-active-text = 181e23 +sidebar-border = 181e23 + +; main view +main = 1c2228 +text = b9bcc6 +subtext = 7e8596 +selected-row = 5b6b79 + +; player bar +player = 141b1f +player-text = 969aa9 +player-subtext = 6d8392 +player-selected-row = 6d8392 +player-border = 141b1f + +; accent colors +link-hover-text = 009587 +link-active = 009587 +button = 01bfa5 +button-active = 01bfa5 +scrollbar-hover = 009688 + +; others +button-disabled = 2c353e +scrollbar = 39454f +context-menu = 232b32 +context-menu-text = d0d2d9 +context-menu-hover = 343e47 +card = 232d35 +shadow = 101418 +notification = 1c2228 +notification-error = b73434 +misc = 39454f + +; ylx +main-elevated = 1c2228 +highlight-elevated = 232d35 +highlight = 20272d + +[periwinkle] +; topbar +topbar-text = ffffff +topbar-subtext = aaa5e4 +tab-active-text = d0ccff +tab-hover = ffffff + +; sidebars +sidebar = ffffff +sidebar-text = 010101 +link-active-text = ffffff +sidebar-border = ffffff + +; main view +main = ffffff +text = 010101 +subtext = 6d6d6d +selected-row = 6d6d6d + +; player bar +player = ffffff +player-text = 010101 +player-subtext = 6d6d6d +player-selected-row = 6d6d6d +player-border = d9d9d9 + +; accent colors +topbar = 7269d2 +tab-active = 7269d2 +topbar-border = 7269d2 +link-hover-text = 8c84da +link-active = 7269d2 +button = 7269d2 +button-active = 8c84da +scrollbar-hover = 8a82e0 +context-menu-hover = 7269d2 + +; others +button-disabled = ebebeb +scrollbar = d9d9d9 +context-menu = ffffff +context-menu-text = 010101 +card = ebebeb +shadow = 363163 +notification = ffffff +notification-error = ff4264 +misc = 6d6d6d + +; ylx +main-elevated = ffffff +highlight-elevated = ebebeb +highlight = ebebeb + +[periwinkle-dark] +; topbar +topbar-text = f6f6f6 +topbar-subtext = aaa5e4 +tab-active-text = d0ccff +tab-hover = 383838 + +; sidebars +sidebar = 383838 +sidebar-text = d0d0d0 +link-hover-text = 8c84da +link-active-text = f6f6f6 +sidebar-border = 383838 + +; main view +main = 383838 +text = f6f6f6 +subtext = d0d0d0 +selected-row = d0d0d0 + +; player bar +player = 343434 +player-text = f6f6f6 +player-subtext = d0d0d0 +player-selected-row = d0d0d0 +player-border = 2e2e2e + +; accent colors +topbar = 7269d2 +tab-active = 7269d2 +topbar-border = 7269d2 +link-active = 7269d2 +button = 7269d2 +button-active = 8c84da +scrollbar-hover = 8a82e0 +context-menu-hover = 7269d2 + +; others +button-disabled = 444444 +scrollbar = 494949 +context-menu = 343434 +context-menu-text = f6f6f6 +card = 444444 +shadow = 2e2e2e +notification = 343434 +notification-error = ff4264 +misc = d0d0d0 + +; ylx +main-elevated = 383838 +highlight-elevated = 444444 +highlight = 444444 + +[porcelain] +; topbar +topbar = e8eaf0 +topbar-text = 242b31 +topbar-subtext = 899099 +tab-active = e8eaf0 +tab-active-text = 242b31 +tab-hover = ffffff +topbar-border = e8eaf0 + +; sidebars +sidebar = dfe1e8 +sidebar-text = 3f4b56 +link-hover-text = 6a7495 +link-active-text = dfe1e8 +sidebar-border = dfe1e8 + +; main view +main = f9f9fb +text = 3f4b56 +subtext = 70828f +selected-row = 70828f + +; player bar +player = d5d8df +player-text = 364049 +player-subtext = 4e5a67 +player-selected-row = 4e5a67 +player-border = cdd0d8 + +; accent colors +link-active = 43a8ff +button = 43a8ff +button-active = 038aff +scrollbar-hover = 43a8ff + +; others +button-disabled = c0c5ce +scrollbar = d6dbdf +context-menu = e8eaf0 +context-menu-text = 2f353c +context-menu-hover = ced2db +card = e3e6ea +shadow = 6d6e71 +notification = f9f9fb +notification-error = e6395f +misc = 4e5a67 + +; ylx +main-elevated = f9f9fb +highlight-elevated = e3e6ea +highlight = ced1db + +[gray-dark1] +; topbar +topbar = 191919 +topbar-text = d4d4d4 +topbar-subtext = 7a7a7a +tab-active = 1f1f1f +tab-active-text = d4d4d4 +tab-hover = 272727 +topbar-border = 191919 + +; sidebars +sidebar = 202020 +sidebar-text = d4d4d4 +link-hover-text = 6d6d6d +link-active = 2d2d2d +link-active-text = e8e8e8 +sidebar-border = 191919 + +; main view +main = 202020 +text = d4d4d4 +subtext = 959595 +selected-row = 6d6d6d + +; player bar +player = 202020 +player-text = d4d4d4 +player-subtext = 959595 +player-selected-row = 959595 +player-border = 191919 + +; accent colors +button-active = 2080df + +; others +button = 404040 +button-disabled = 252525 +scrollbar = 353535 +scrollbar-hover = 999999 +context-menu = 202020 +context-menu-text = d4d4d4 +context-menu-hover = 2d2d2d +card = 2d2d2d +shadow = 0c0c0c +notification = 202020 +notification-error = d32635 +misc = 959595 + +; ylx +main-elevated = 202020 +highlight-elevated = 2d2d2d +highlight = 2d2d2d + +[gray-dark2] +; topbar +topbar = 191919 +topbar-text = d4d4d4 +topbar-subtext = 535353 +tab-active = 191919 +tab-active-text = d4d4d4 +tab-hover = 1f1f1f +topbar-border = 191919 + +; sidebars +sidebar = 161616 +sidebar-text = d4d4d4 +link-hover-text = 6c6c6c +link-active = 1c1c1c +link-active-text = d4d4d4 +sidebar-border = 161616 + +; main view +main = 202020 +text = d4d4d4 +subtext = 959595 +selected-row = 6d6d6d + +; player bar +player = 1a1a1a +player-text = d4d4d4 +player-subtext = 959595 +player-selected-row = 959595 +player-border = 1a1a1a + +; accent colors +button-active = 2080df + +; others +button = 404040 +button-disabled = 252525 +scrollbar = 353535 +scrollbar-hover = 999999 +context-menu = 202020 +context-menu-text = d4d4d4 +context-menu-hover = 2d2d2d +card = 2d2d2d +shadow = 0c0c0c +notification = 202020 +notification-error = d32635 +misc = 959595 + +; ylx +main-elevated = 202020 +highlight-elevated = 2d2d2d +highlight = 2d2d2d + +[gray-dark3] +; topbar +topbar = 191919 +topbar-text = d4d4d4 +topbar-subtext = 7a7a7a +tab-active = 191919 +tab-active-text = d4d4d4 +tab-hover = 1f1f1f +topbar-border = 191919 + +; sidebars +sidebar = 131313 +sidebar-text = d4d4d4 +link-hover-text = 6c6c6c +link-active = 1e1e1e +link-active-text = d4d4d4 +sidebar-border = 131313 + +; main view +main = 161616 +text = d4d4d4 +subtext = 959595 +selected-row = 6d6d6d + +; player bar +player = 101010 +player-text = d4d4d4 +player-subtext = 959595 +player-selected-row = 959595 +player-border = 101010 + +; accent colors +button-active = 2080df + +; others +button = 404040 +button-disabled = 252525 +scrollbar = 353535 +scrollbar-hover = 999999 +context-menu = 202020 +context-menu-text = d4d4d4 +context-menu-hover = 2d2d2d +card = 2d2d2d +shadow = 0c0c0c +notification = 202020 +notification-error = d32635 +misc = 959595 + +; ylx +main-elevated = 161616 +highlight-elevated = 2d2d2d +highlight = 2d2d2d + +[gray] +; topbar +topbar = 404040 +topbar-text = e9e9e9 +topbar-subtext = 646464 +tab-active = 333333 +tab-active-text = e9e9e9 +tab-hover = 303030 +topbar-border = 404040 + +; sidebars +sidebar = 383838 +sidebar-text = d4d4d4 +link-hover-text = e9e9e9 +link-active = 4c4c4c +link-active-text = e9e9e9 +sidebar-border = 2f2f2f + +; main view +main = 383838 +text = e9e9e9 +subtext = aaaaaa +selected-row = 6d6d6d + +; player bar +player = 343434 +player-text = d4d4d4 +player-subtext = 7f7f7f +player-selected-row = 7f7f7f +player-border = 2e2e2e + +; accent colors +button-active = 2888d7 + +; others +button = 898989 +button-disabled = 404040 +scrollbar = 494949 +scrollbar-hover = a3a3a3 +context-menu = 383838 +context-menu-text = d4d4d4 +context-menu-hover = 4c4c4c +card = 4c4c4c +shadow = 1e1e1e +notification = 383838 +notification-error = e35b5b +misc = 959595 + +; ylx +main-elevated = 383838 +highlight-elevated = 4c4c4c +highlight = 444444 + +[gray-light] +; topbar +topbar = 404040 +topbar-text = e9e9e9 +topbar-subtext = 646464 +tab-active = 333333 +tab-active-text = e9e9e9 +tab-hover = 303030 +topbar-border = 404040 + +; sidebars +sidebar = ffffff +sidebar-text = 010101 +link-hover-text = 010101 +link-active = e1e1e1 +link-active-text = 010101 +sidebar-border = e9e9e9 + +; main view +main = ffffff +text = 010101 +subtext = 6d6d6d +selected-row = 6d6d6d + +; player bar +player = ffffff +player-text = 010101 +player-subtext = 6d6d6d +player-selected-row = 6d6d6d +player-border = e9e9e9 + +; accent colors +button = 2888d7 +button-active = 2888d7 + +; others +button-disabled = dfdfdf +scrollbar = d9d9d9 +scrollbar-hover = 4d4d4d +context-menu = ffffff +context-menu-text = 010101 +context-menu-hover = ebebeb +card = ebebeb +shadow = 1e1e1e +notification = ffffff +notification-error = e35b5b +misc = 6d6d6d + +; ylx +main-elevated = ffffff +highlight-elevated = ebebeb +highlight = ebebeb diff --git a/Matte/screenshots/quickcfg.png b/Matte/screenshots/quickcfg.png new file mode 100644 index 0000000..ab46e9d Binary files /dev/null and b/Matte/screenshots/quickcfg.png differ diff --git a/Matte/screenshots/ylx-gray-dark1.png b/Matte/screenshots/ylx-gray-dark1.png new file mode 100644 index 0000000..dfd2a05 Binary files /dev/null and b/Matte/screenshots/ylx-gray-dark1.png differ diff --git a/Matte/screenshots/ylx-gray-dark2.png b/Matte/screenshots/ylx-gray-dark2.png new file mode 100644 index 0000000..8389342 Binary files /dev/null and b/Matte/screenshots/ylx-gray-dark2.png differ diff --git a/Matte/screenshots/ylx-gray-dark3.png b/Matte/screenshots/ylx-gray-dark3.png new file mode 100644 index 0000000..e39d8a0 Binary files /dev/null and b/Matte/screenshots/ylx-gray-dark3.png differ diff --git a/Matte/screenshots/ylx-gray-light.png b/Matte/screenshots/ylx-gray-light.png new file mode 100644 index 0000000..6f98a19 Binary files /dev/null and b/Matte/screenshots/ylx-gray-light.png differ diff --git a/Matte/screenshots/ylx-gray.png b/Matte/screenshots/ylx-gray.png new file mode 100644 index 0000000..dfdcd87 Binary files /dev/null and b/Matte/screenshots/ylx-gray.png differ diff --git a/Matte/screenshots/ylx-matte.png b/Matte/screenshots/ylx-matte.png new file mode 100644 index 0000000..be5b718 Binary files /dev/null and b/Matte/screenshots/ylx-matte.png differ diff --git a/Matte/screenshots/ylx-periwinkle-dark.png b/Matte/screenshots/ylx-periwinkle-dark.png new file mode 100644 index 0000000..55f3569 Binary files /dev/null and b/Matte/screenshots/ylx-periwinkle-dark.png differ diff --git a/Matte/screenshots/ylx-periwinkle.png b/Matte/screenshots/ylx-periwinkle.png new file mode 100644 index 0000000..0cb02ba Binary files /dev/null and b/Matte/screenshots/ylx-periwinkle.png differ diff --git a/Matte/screenshots/ylx-porcelain.png b/Matte/screenshots/ylx-porcelain.png new file mode 100644 index 0000000..a4cb82f Binary files /dev/null and b/Matte/screenshots/ylx-porcelain.png differ diff --git a/Matte/user.css b/Matte/user.css index 44969a9..04f73bf 100644 --- a/Matte/user.css +++ b/Matte/user.css @@ -1,4 +1,7 @@ -/*** vars */ +/* ================================ + QUICK CONFIGURATIONS + ================================ */ + :root { /* top bar vars */ --top-bar-padding-top: 45px; @@ -7,13 +10,16 @@ --top-bar-padding-left: 20px; --tab-border-radius: 6px; --user-widget-name-display: none; /* block | none */ + --top-bar-border-width: 2px; /* sidebar vars */ --sidebar-button-border-radius: 4px; + --sidebar-border-width: 2px; /* player vars */ --player-height: 90px; --player-padding: 0 20px; + --player-border-width: 2px; /* scrollbar vars */ --scrollbar-border-radius: 4px; @@ -21,12 +27,35 @@ --scrollbar-width-hover: 6px; } -/*** top bar */ +/* 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 + ================================ */ + .Root__top-container { /* rearrange grid layout */ grid-template-areas: "top-bar top-bar top-bar" - "nav-bar main-view right-sidebar" + "left-sidebar main-view right-sidebar" "now-playing-bar now-playing-bar now-playing-bar"; grid-template-rows: auto 1fr auto; } @@ -34,7 +63,7 @@ /* customize top bar colors & fixes */ grid-area: top-bar; height: auto; - background-color: var(--spice-topbar); + border-bottom: var(--top-bar-border-width) solid var(--spice-topbar-border); } .Root__top-bar:empty { /* make top bar the same height in lyrics page */ @@ -68,23 +97,9 @@ /* remove background upon scrolling */ opacity: 0 !important; } -.main-topBar-historyButtons .main-topBar-button { - /* remove history button background */ - background-color: transparent; -} .queue-tabBar-active { /* customize active tab */ - background-color: var(--spice-tab-active) !important; border-radius: var(--tab-border-radius); - color: var(--spice-text) !important; -} -.queue-tabBar-headerItemLink { - /* customize inactive tab */ - color: var(--spice-subtext); -} -.queue-tabBar-headerItemLink:hover { - /* customize hovered inactive tab */ - background-color: rgba(var(--spice-rgb-button-disabled), 0.3); } .main-userWidget-displayName, .main-userWidget-chevron { @@ -97,8 +112,23 @@ padding-left: 0; padding-inline-start: 0; } +.main-topBar-topbarContent { + /* add bigger gap between play button and name */ + gap: 16px; +} +.x-searchInput-searchInputInput, +.x-filterBox-filterInput { + border-radius: var(--tab-border-radius); +} -/*** nav bar / sidebar */ +/* ================================ + NAVBAR / LEFT SIDEBAR + ================================ */ + +.Root__nav-bar { + /* add border */ + border-right: var(--sidebar-border-width) solid var(--spice-sidebar-border); +} .main-navBar-navBar { /* remove nav bar top padding */ padding-top: 0; @@ -117,114 +147,58 @@ /* remove top margin */ margin-top: 0; } -.main-navBar-navBarLinkActive, -.main-rootlist-rootlistItemLinkActive { - /* customize active nav button */ - background: var(--spice-button-active); - color: var(--spice-sidebar) !important; -} .main-rootlist-rootlistItemLink { /* customize nav button */ padding: 0 16px; border-radius: var(--sidebar-button-border-radius); margin: 0 0 0 -14px; } -.link-subtle { - /* disable buttom color transition */ - transition-property: none; -} - -.main-collectionLinkButton-collectionLinkButton, -.main-createPlaylistButton-button { - color: var(--spice-subtext); -} - -.main-likedSongsButton-likedSongsIcon, -.main-createPlaylistButton-createPlaylistIcon { - background: var(--spice-subtext); -} - -.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon, -.main-collectionLinkButton-collectionLinkButton - .main-collectionLinkButton-collectionLinkText, -.main-createPlaylistButton-button { - /* make create playlist & liked songs same as other nav items */ - opacity: 1; -} - -.main-collectionLinkButton-collectionLinkButton:hover, -.main-createPlaylistButton-button:hover { - color: var(--spice-text); -} - -.main-likedSongsButton-likedSongsIcon > svg { - color: var(--spice-sidebar); -} - -.main-createPlaylistButton-button:hover - .main-createPlaylistButton-createPlaylistIcon, -.main-collectionLinkButton-collectionLinkButton:hover - .main-likedSongsButton-likedSongsIcon { - background: var(--spice-text); -} - .main-collectionLinkButton-collectionLinkButton.active { - background: var(--spice-button-active) !important; - color: var(--spice-sidebar) !important; -} -.main-collectionLinkButton-collectionLinkButton.active - .main-likedSongsButton-likedSongsIcon { - background: var(--spice-sidebar); + margin: 0 8px; + border-radius: var(--sidebar-button-border-radius); + padding: 8px 16px; } -.main-collectionLinkButton-collectionLinkButton.active - .main-likedSongsButton-likedSongsIcon - > svg { - color: var(--spice-button-active); -} +/* ================================ + MAIN VIEW + ================================ */ -/*** main view */ .main-view-container__scroll-node-child-spacer { /* remove main view padding */ display: none; } .main-trackList-trackListHeader, -.EvQHNTBhaU3rGCRRlAWj, -.fVB_YDdnaDlztX7CcWTA { - /* fix track list header & search type tabs */ +.search-searchCategory-SearchCategory, +.artist-artistDiscography-topBar { + /* fix track list header, search category, artist discography */ top: 0 !important; height: auto; } -.fVB_YDdnaDlztX7CcWTA { - /* fix search type tabs */ +.search-searchCategory-SearchCategory { + /* fix search category */ border-bottom: 1px solid rgba(var(--spice-rgb-selected-row), 0.1); padding: 16px 0; } -.cWsvKZ, -.bIeVjB { - /* search type active tab */ +.search-searchCategory-catergoryGrid button[aria-checked="true"] span { + /* customize active search category */ border-radius: var(--tab-border-radius); - color: var(--spice-main); - background-color: var(--spice-button-active) !important; -} -.dwbjqG, -.eQrChW { - /* search type tabs */ - border-radius: var(--tab-border-radius); - color: var(--spice-subtext); } .main-trackList-trackListHeader, -.EvQHNTBhaU3rGCRRlAWj { - /* fix track list header */ - padding: 16px 32px; +.artist-artistDiscography-topBar { + /* fix track list header & artist discography */ + padding: 16px 32px 0 32px; } .main-trackList-trackListHeaderStuck.main-trackList-trackListHeader, -.EvQHNTBhaU3rGCRRlAWj.QplCuuGSoV4updqTSLq9 { - /* fix tracklist header */ - background-color: var(--spice-main); +.artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled { + /* fix tracklist header & artist discography */ box-shadow: none; } -.rHpv7osDRvs3SUPMpQ_g { +.search-recentSearches-searchPageGrid + .main-trackList-trackListHeader.main-trackList-trackListHeaderStuck { + /* fix tracklist header in search */ + top: 64px !important; +} +.queue-queuePage-queuePage { /* replace margin with padding in queue page */ margin-top: 0; padding-top: 40px; @@ -239,20 +213,14 @@ background-color: unset !important; background-image: unset !important; } -.main-rootlist-rootlistDividerGradient, -.fEvxx8vl3zTNWsuC8lpx { +.main-rootlist-rootlistDividerGradient { /* remove background gradient in home page and sidebar */ background: unset; } -.jyfxNy { - /* customize button */ - background-color: var(--spice-button-disabled); - font-weight: normal; - border: none; -} + /* full window artist background */ .main-entityHeader-background.main-entityHeader-gradient { - opacity: 0.4 !important; + opacity: 0.3 !important; } .main-entityHeader-container.main-entityHeader-withBackgroundImage, .main-entityHeader-background, @@ -270,15 +238,8 @@ linear-gradient(var(--spice-main), var(--spice-main)); } .artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 { - font-size: 175px !important; - line-height: 175px !important; -} -.main-view-container__scroll-node-child { - padding-bottom: unset; -} -.k4MNlyGrhsL0qgnENxqh, -.xaeunxBdlShScWay5mQR { - margin-bottom: 16px; + font-size: 20vh !important; + line-height: 20vh !important; } /* cards */ .main-cardImage-imageWrapper { @@ -299,22 +260,54 @@ -webkit-box-shadow: none; box-shadow: none; } +/* popup modal */ +.main-trackCreditsModal-container { + background-color: var(--spice-main); +} +.main-trackCreditsModal-closeBtn svg path { + fill: var(--spice-subtext); +} +/* lyrics */ +.lyrics-lyrics-background { + background-color: var(--spice-main); +} +.lyrics-lyrics-container.lyrics-lyrics-coverTopBar { + --lyrics-color-active: var(--spice-text) !important; + --lyrics-color-inactive: var(--spice-subtext) !important; + --lyrics-color-passed: var(--spice-subtext) !important; + --lyrics-color-messaging: var(--spice-subtext) !important; +} +.lyrics-lyricsContent-lyric { + opacity: 0.3; +} +.lyrics-lyricsContent-lyric.lyrics-lyricsContent-highlight { + opacity: 0.7; +} +.lyrics-lyricsContent-lyric.lyrics-lyricsContent-isInteractive.lyrics-lyricsContent-active { + text-shadow: 0 0 10px var(--lyrics-color-background), + -2px 1px 0 var(--spice-main), -3px 2px 0 var(--lyrics-color-background), + 2px -1px 0 var(--spice-main), 3px -2px 0 var(--lyrics-color-background); + opacity: 1; +} -/*** buddy feed / friend activity bar */ +/* ================================ + FRIEND ACTIVITY BAR / RIGHT SIDEBAR + ================================ */ + +.Root__nav-right-sidebar { + border-left: var(--sidebar-border-width) solid var(--spice-sidebar-border); +} .spotify__os--is-windows .main-buddyFeed-content { margin-top: 0; } -.main-buddyFeed-friendsFeedContainer { - background-color: var(--spice-sidebar); -} +/* ================================ + NOW PLAYING BAR + ================================ */ -.TypeElement-balladBold-textBase-type, -.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName { - color: var(--spice-sub-text); +.Root__now-playing-bar { + border-top: var(--player-border-width) solid var(--spice-player-border); } - -/*** now playing bar */ .main-nowPlayingBar-nowPlayingBar { /* customize now playing bar */ height: var(--player-height); @@ -324,17 +317,10 @@ /* customize now playing bar*/ border-top: none; } -.main-playPauseButton-button { - /* customize play button */ - color: var(--spice-player); - background-color: var(--spice-button-active); +[dir="ltr"] .main-nowPlayingWidget-coverExpanded { + transform: translateX(-76px); } -.progress-bar { - /* progress bar colors */ - --bg-color: rgba(var(--spice-rgb-subtext), 0.3); - --fg-color: var(--spice-subtext); -} -.epWhU7hHGktzlO_dop6z { +.x-progressBar-fillColor { /* fluid progress bars */ transition: transform, 0s, ease, 0.25s; } @@ -343,15 +329,20 @@ transition: left, 0s, ease, 0.25s; } -/*** misc & fixes */ -/* font styles */ +/* ================================ + MISC & FIXES + ================================ */ + +/* font style + -------------------------------- */ * { /* heading font weight */ font-weight: normal !important; --font-family: "CircularSP"; } -/* scrollbars */ +/* scrollbar + -------------------------------- */ .os-theme-spotify > .os-scrollbar-vertical > .os-scrollbar-track @@ -359,7 +350,6 @@ /* customize scrollbar */ border-radius: var(--scrollbar-border-radius); width: var(--scrollbar-width); - background-color: var(--spice-button-disabled) !important; } .os-theme-spotify > .os-scrollbar-vertical @@ -368,7 +358,6 @@ /* customize hovered scrollbar */ border-radius: var(--scrollbar-border-radius); width: var(--scrollbar-width-hover); - background-color: var(--spice-button-active) !important; } .spotify__container--is-desktop.spotify__os--is-windows .main-view-container__scroll-node @@ -384,64 +373,85 @@ right: 0; } -/* search bar */ +/* tooltip + -------------------------------- */ +.main-contextMenu-tippy { + /* position below the element */ + transform: translate(0, 65px); +} + +/* color reassignment + -------------------------------- */ +.encore-dark-theme, +.encore-dark-theme .encore-base-set { + /* song duration & queue button & folder arrow & settings desc text */ + --text-subdued: var(--spice-subtext) !important; + --essential-subdued: var(--spice-button) !important; +} + +/* ====topbar==== */ +.Root__top-bar { + background-color: var(--spice-topbar); +} +.main-topBar-historyButtons .main-topBar-button { + background-color: transparent; + color: var(--spice-topbar-text); +} +.main-topBar-historyButtons .main-topBar-button:disabled { + color: var(--spice-topbar-subtext); + opacity: 1; +} +.main-entityHeader-topbarTitle { + color: var(--spice-topbar-text) !important; +} +.queue-tabBar-active { + background-color: var(--spice-tab-active) !important; + color: var(--spice-tab-active-text) !important; +} +.queue-tabBar-headerItemLink { + color: var(--spice-topbar-subtext); +} +.queue-tabBar-headerItemLink:hover { + background-color: rgba(var(--spice-rgb-tab-hover), 0.3); +} .x-searchInput-searchInputSearchIcon, .x-searchInput-searchInputClearButton, -.x-searchInput-searchInputInput, -.x-filterBox-filterInput { - color: var(--spice-text) !important; -} -.x-searchInput-searchInputInput, -.x-filterBox-filterInput { - border-radius: var(--tab-border-radius); +.x-searchInput-searchInputInput { + color: var(--spice-tab-active-text) !important; } .x-searchInput-searchInputInput { background-color: var(--spice-tab-active); } .x-filterBox-filterInput { - background-color: rgba(var(--spice-rgb-selected-row), 0.1); + background-color: rgba(var(--spice-rgb-subtext), 0.1); } ::placeholder { - color: var(--spice-subtext); + color: var(--spice-topbar-subtext); } -/* context menu */ -.main-contextMenu-menu { - background-color: var(--spice-main); +/* ====left sidebar==== */ +.main-navBar-navBarLinkActive, +.main-rootlist-rootlistItemLinkActive { + background: var(--spice-link-active); + color: var(--spice-link-active-text) !important; } -.main-contextMenu-menuHeading, -.main-contextMenu-menuItemButton, -.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus, -.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover { - color: var(--spice-text); +.link-subtle { + transition-property: none; + color: var(--spice-sidebar-text); } -.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus, -.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover { - background-color: var(--spice-tab-active); +.link-subtle:focus, +.link-subtle:hover { + color: var(--spice-link-hover-text); } - -/* fixing color inconsistency */ -.encore-dark-theme, -.encore-dark-theme .encore-base-set { - /* song duration & queue button & folder arrow & settings desc text */ - --text-subdued: var(--spice-subtext) !important; +.main-rootlist-rootlistItemLink:link, +.main-rootlist-rootlistItemLink:visited { + color: var(--spice-sidebar-text); } -.main-trackList-trackListRow.main-trackList-selected, -.main-trackList-trackListRow.main-trackList-selected:hover, -.main-trackList-trackListRow:focus-within, -.main-trackList-trackListRow:hover, -.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus, -.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover { - /* selected + hovered tracks & hovered context menu items */ - background-color: var(--spice-card); -} -.AKksNlfz_QuQjE1FPwYG { - /* recently played header in home */ - color: var(--spice-text) !important; -} -.fYSGgd { - /* track list play button color */ - background-color: var(--spice-button-active); +.main-rootlist-rootlistItemOverlay:hover ~ .main-rootlist-rootlistItemLink, +.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive, +.main-rootlist-rootlistItemLink:focus, +.main-rootlist-rootlistItemLink:hover { + color: var(--spice-link-hover-text); } .collection-active-icon, .collection-icon, @@ -450,29 +460,278 @@ .premiumSpotifyIcon, .search-active-icon, .search-icon { - /* fix sidebar buttons' icons */ color: unset; } -#_R_G *:not([fill="none"]) { - /* fix heart color on click */ - fill: var(--spice-button-active) !important; +.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon, +.main-collectionLinkButton-collectionLinkButton + .main-collectionLinkButton-collectionLinkText, +.main-createPlaylistButton-button { + opacity: 1; } -#_R_G *:not([stroke="none"]) { - /* fix heart color on click */ - stroke: var(--spice-button-active); +.main-collectionLinkButton-collectionLinkButton, +.main-createPlaylistButton-button { + color: var(--spice-sidebar-text); } -.x-settings-equalizerContainer { - /* equalizer background */ - background-color: transparent; +.main-collectionLinkButton-collectionLinkButton:hover, +.main-createPlaylistButton-button:hover { + color: var(--spice-link-hover-text); } -.main-trackList-playingIcon { - /* change playing icon color in playlist to theme color */ - filter: grayscale(1) opacity(0.2) drop-shadow(0 0 0 var(--spice-button)) - drop-shadow(0 0 0 var(--spice-button)) - drop-shadow(0 0 0 var(--spice-button)); +.main-likedSongsButton-likedSongsIcon > svg { + color: var(--spice-sidebar); +} +.main-likedSongsButton-likedSongsIcon, +.main-createPlaylistButton-createPlaylistIcon { + background: var(--spice-sidebar-text); +} +.main-createPlaylistButton-button:hover + .main-createPlaylistButton-createPlaylistIcon, +.main-collectionLinkButton-collectionLinkButton:hover + .main-likedSongsButton-likedSongsIcon { + background: var(--spice-link-hover-text); +} +.main-collectionLinkButton-collectionLinkButton.active { + background: var(--spice-link-active) !important; + color: var(--spice-sidebar) !important; +} +.main-collectionLinkButton-collectionLinkButton.active + .main-likedSongsButton-likedSongsIcon { + background: var(--spice-sidebar); +} +.main-collectionLinkButton-collectionLinkButton.active + .main-likedSongsButton-likedSongsIcon + > svg { + color: var(--spice-link-active); +} + +/* ====main view==== */ +.main-trackList-trackListRow.main-trackList-selected, +.main-trackList-trackListRow.main-trackList-selected:hover, +.main-trackList-trackListRow:focus-within, +.main-trackList-trackListRow:hover { + background-color: var(--spice-card); +} +.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader, +.artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled { + background-color: var(--spice-main); } .main-trackList-placeholder { /* recolor loading tracklist */ opacity: 0.05; filter: contrast(0.1); } +.main-trackList-playingIcon { + /* change playing icon color to theme color */ + filter: grayscale(1) opacity(0.2) + drop-shadow(0 0 0 var(--spice-button-active)) + drop-shadow(0 0 0 var(--spice-button-active)) + drop-shadow(0 0 0 var(--spice-button-active)); +} +.search-searchCategory-catergoryGrid button[aria-checked="true"] span { + color: var(--spice-main); + background-color: var(--spice-button-active) !important; +} +.search-searchCategory-catergoryGrid span { + border-radius: var(--tab-border-radius); + color: var(--spice-subtext); +} +.artist-artistAbout-container.artist-artistAbout-backgroundImage + .artist-artistAbout-content + > div { + /* change about artist text color */ + color: #fff; +} +.main-dropDown-dropDown, +.x-settings-input { + background-color: var(--spice-button-disabled); + color: var(--spice-text); +} + +/* ====right sidebar==== */ +.main-buddyFeed-friendsFeedContainer { + background-color: var(--spice-sidebar); +} +.TypeElement-balladBold-textBase-type, +.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName { + color: var(--spice-sidebar-text); +} + +/* ====now playing bar==== */ +.main-trackInfo-name, +.main-trackInfo-artists a:active, +.main-trackInfo-artists a:focus, +.main-trackInfo-artists a:hover { + color: var(--spice-player-text) !important; +} +.main-trackInfo-artists a:link, +.main-trackInfo-artists a:visited { + color: var(--spice-player-subtext); +} +.main-playPauseButton-button { + color: var(--spice-player); + background-color: var(--spice-button-active); +} +.control-button-heart[aria-checked="false"], +.player-controls__left button, +.player-controls__right button, +.main-nowPlayingBar-extraControls button { + color: rgba(var(--spice-rgb-player-selected-row), 0.7); +} +.progress-bar { + --bg-color: rgba(var(--spice-rgb-player-selected-row), 0.3); + --fg-color: var(--spice-player-selected-row); +} + +/* ====misc==== */ + +/* ----scrollbar---- */ +.os-theme-spotify + > .os-scrollbar-vertical + > .os-scrollbar-track + > .os-scrollbar-handle { + background-color: var(--spice-scrollbar) !important; +} +.os-theme-spotify + > .os-scrollbar-vertical + > .os-scrollbar-track + > .os-scrollbar-handle:hover, +.os-theme-spotify + > .os-scrollbar-vertical + > .os-scrollbar-track + > .os-scrollbar-handle:active { + background-color: var(--spice-scrollbar-hover) !important; +} + +/* ----context menu---- */ +.main-contextMenu-menu { + background-color: var(--spice-context-menu); +} +.main-contextMenu-menuHeading, +.main-contextMenu-menuItemButton, +.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus, +.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover { + color: var(--spice-context-menu-text); +} +.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus, +.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover { + background-color: var(--spice-context-menu-hover); +} + +/* ----button---- */ +#_R_G *:not([fill="none"]) { + /* fix heart color on click */ + fill: var(--spice-button-active) !important; +} +#_R_G *:not([stroke="none"]) { + stroke: var(--spice-button-active); +} +.ButtonInner-md-iconOnly { + /* base play/pause icon color on player instead of sidebar */ + color: var(--spice-player); +} +.Button-sm-16-buttonTertiary-iconOnly-condensedAll-useBrowserDefaultFocusStyle { + /* base play/pause icon color on sidebar text instead of subtext */ + color: var(--spice-sidebar-text); +} + +/* ylx support + -------------------------------- */ +.Root { + --panel-gap: 0 !important; +} +.spotify__container--is-desktop .nav-ylx .Root__top-container { + padding-top: 0; +} +.spotify__container--is-desktop.spotify__os--is-windows .main-topBar-container { + -webkit-padding-start: unset !important; + padding-inline-start: unset !important; +} +.nav-ylx .main-topBar-contentArea { + -webkit-app-region: drag; +} +.nav-ylx .x-searchInput-searchInputInput { + height: 41px; + background-color: var(--spice-tab-active); +} +.nav-ylx .x-searchInput-searchInputInput:hover { + background-color: var(--spice-tab-hover); +} +.main-yourLibraryX-entryPoints, +.nav-ylx .Root__main-view { + border-radius: 0; +} +.main-yourLibraryX-entryPoints { + background-color: var(--spice-sidebar); +} +.main-yourLibraryX-navItems { + padding-bottom: 0; +} +.main-yourLibraryX-navItem, +.main-yourLibraryX-headerContent { + padding: 4px 0; +} +.main-yourLibraryX-header { + padding-top: 0; +} +.main-yourLibraryX-navItem { + padding: 4px 0; +} +.main-yourLibraryX-navLink { + padding: 12px; +} +.main-yourLibraryX-navLinkActive, +.main-yourLibraryX-navLinkActive .home-active-icon, +.main-yourLibraryX-navLinkActive .search-active-icon { + color: var(--spice-link-active-text) !important; + background-color: var(--spice-link-active); + border-radius: var(--tab-border-radius); +} +.Button-md-24-buttonTertiary-iconLeading-condensed-useBrowserDefaultFocusStyle, +.Button-md-24-buttonTertiary-iconLeading-condensed-isUsingKeyboard-useBrowserDefaultFocusStyle { + color: var(--spice-sidebar-text); +} +.main-yourLibraryX-navLink, +.main-yourLibraryX-header .main-yourLibraryX-collapseButtonWrapper { + gap: 20px; +} +.Wrapper-md-leading { + margin-inline-end: 0; +} +.Button-md-24-buttonTertiary-iconLeading-condensed-useBrowserDefaultFocusStyle:hover, +.Button-md-24-buttonTertiary-iconLeading-condensed-isUsingKeyboard-useBrowserDefaultFocusStyle:hover { + color: var(--spice-link-hover-text); +} +.main-yourLibraryX-isScrolled { + -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, +.nav-ylx .x-searchInput-searchInputInput:focus, +.x-entityImage-imageContainer { + box-shadow: none; +} +.nav-ylx .x-searchInput-searchInputInput { + color: var(--spice-tab-active-text) !important; +} +.nav-ylx .main-nowPlayingBar-container { + background-color: var(--spice-player); +} +.nav-ylx .main-nowPlayingBar-nowPlayingBar { + height: 90px; + padding: var(--player-padding); +} +[dir="ltr"] .nav-ylx .main-coverSlotCollapsed-navAltContainer { + transform: translateX(0); +} +.Pns6F5g4OEwEpdmOWTLg { + /* playlists loading placeholder */ + opacity: 0.05; + filter: contrast(0.1); +} +.nav-ylx .main-trackList-trackListHeaderStuck.main-trackList-trackListHeader { + background-color: var(--spice-main); +} +.nav-ylx + .artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled { + border-bottom: 1px solid rgba(var(--spice-rgb-selected-row), 0.1); + box-shadow: none; +} diff --git a/THEMES.md b/THEMES.md index e8c2f81..010843f 100644 --- a/THEMES.md +++ b/THEMES.md @@ -86,7 +86,23 @@ Here you can find a preview of all the themes. Some of them may have different c ## Matte -![Matte](Matte/screenshots/queue.png) +#### Matte +![Matte](Matte/screenshots/ylx-matte.png) + +#### Periwinkle + +| ![Periwinkle](Matte/screenshots/ylx-periwinkle.png) | ![Periwkinle-Dark](Matte/screenshots/ylx-periwinkle-dark.png) | +| :-------------------------------------------------: | :-----------------------------------------------------------: | +| Light | Dark | + +#### Porcelain +![Porcelain](Matte/screenshots/ylx-porcelain.png) + +#### Gray +![Gray](Matte/screenshots/ylx-gray.png) +| ![Gray-Light](Matte/screenshots/ylx-gray-light.png) | ![Gray-Dark1](Matte/screenshots/ylx-gray-dark1.png) | +| :-------------------------------------------------: | :-------------------------------------------------: | +| Light | Dark | ## Nightlight