diff --git a/BurntSienna/README.md b/BurntSienna/README.md new file mode 100644 index 0000000..a2aba8b --- /dev/null +++ b/BurntSienna/README.md @@ -0,0 +1,9 @@ +# BurntSienna + +## Screenshots +![BurntSienna](./screenshot.png) + +## More +Montserrat Font is necessary, it is available on Google Fonts: +https://fonts.google.com/specimen/Montserrat
+Author: https://github.com/pjaspinski \ No newline at end of file diff --git a/BurntSienna/color.ini b/BurntSienna/color.ini new file mode 100644 index 0000000..99f7b7b --- /dev/null +++ b/BurntSienna/color.ini @@ -0,0 +1,6 @@ +[Base] +button = ef8450 +sidebar = 242629 +player = 242629 +main = 303336 +button-active = ef8450 \ No newline at end of file diff --git a/BurntSienna/screenshot.png b/BurntSienna/screenshot.png new file mode 100644 index 0000000..6226030 Binary files /dev/null and b/BurntSienna/screenshot.png differ diff --git a/BurntSienna/user.css b/BurntSienna/user.css new file mode 100644 index 0000000..9538ae3 --- /dev/null +++ b/BurntSienna/user.css @@ -0,0 +1,191 @@ +* { + font-family: Montserrat; +} + +/* Page titles */ +h1 { + font-weight: 700 !important; +} + +/* Song name in player */ +.main-nowPlayingWidget-nowPlaying .main-trackInfo-name { + overflow: unset; + font-size: 20px !important; +} + +/* Artist name in player */ +.main-nowPlayingWidget-nowPlaying .main-trackInfo-artists { + overflow: unset; + padding-top: 5px; + font-size: 15px; +} + +.main-type-finale { + line-height: 17px; +} + +/* Icons */ +.Svg-ulyrgf-0, +.main-trackList-rowPlayPauseIcon { + transform: scale(1.3); +} + +.x-downloadButton-button svg { + height: 32px; + width: 32px; +} + +/* Progress and remaining time */ +.main-playbackBarRemainingTime-container, +.playback-bar__progress-time { + font-size: 15px; + margin-left: 5px; + margin-right: 5px; +} + +/* Player play button */ +.main-playPauseButton-button { + background-color: unset; + color: var(--spice-subtext); +} + +.main-playPauseButton-button svg { + height: 28px; + width: 28px; +} + +/* Progress bar */ +.progress-bar { + --fg-color: var(--spice-button); +} + +.progress-bar__bg, +.progress-bar__fg, +.progress-bar__fg_wrapper { + height: 5px; +} + +.progress-bar-wrapper { + margin-left: 5px; + margin-right: 5px; +} + +/* Extra controls */ +.control-button::before { + font-size: 20px; +} + +.ExtraControls svg { + height: 20px; + width: 20px; +} + +/* Removing gradients */ +.main-entityHeader-backgroundColor, +.main-actionBarBackground-background { + background-color: unset !important; + background-image: none; +} + +/* Cover shadow */ +.main-entityHeader-shadow { + -webkit-box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5); + box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5); +} + +/* Top bar */ +.main-topBar-background { + background-color: #3a3d42 !important; +} + +/* Playing icon */ +.main-trackList-playingIcon { + filter: saturate(0%); +} + +/* Playlist like button */ +.main-actionBar-ActionBarRow .main-addButton-button .Svg-ulyrgf-0 { + height: unset; + width: unset; +} + +/* Order button */ +.x-sortBox-sortDropdown { + margin-top: 3px; +} + +/* Sidebar playlists menu */ +.main-rootlist-rootlistDividerGradient { + background: unset; +} + +.main-rootlist-rootlistDivider { + background-color: var(--spice-button); +} + +/* Search box */ +.x-searchInput-searchInputInput { + font-size: 18px; +} + +/* Aritsts names */ +.main-type-mesto { + font-size: 16px; + line-height: 20px; +} + +/* Songs names */ +.main-type-ballad { + font-size: 18px; +} + +/* Cards descriptions */ +.main-cardSubHeader-root { + overflow: hidden !important; +} + +/* Ad title */ +.desktoproutes-homepage-takeover-ad-hptoNativeOriginal-header { + font-weight: 700 !important; +} + +/* Friends names */ +.main-buddyFeed-username a { + color: var(--spice-text) !important; + font-size: 17px; + font-weight: 500; +} + +/* Friends songs and artists */ +.main-buddyFeed-artistAndTrackName a, +.main-buddyFeed-playbackContextLink span { + font-size: 13px; +} + +/* Cover height */ +.main-coverSlotExpanded-container { + height: var(--nav-bar-width) + 8px; +} + +/* Scrollbars */ +.os-scrollbar-handle { + background: var(--spice-button) !important; + border-radius: 8px; +} + +/* Making index column wider so that lighter background that +highlights selected song contains multi-digit song numbers */ +/* It looks good up to 4 digits, I figured that no one has playlists with more music than that ;) */ +.main-trackList-trackList.main-trackList-indexable .main-trackList-trackListRowGrid { + grid-template-columns: [index] 48px [first] 6fr [var1] 4fr [var2] 3fr [last] minmax(120px, 1fr) !important; +} + +/* Text boxes in settings */ +.main-dropDown-dropDown { + background-color: var(--spice-button-disabled); +} + +/* Facebook button */ +.x-settings-facebookButton { + background-color: unset !important; +} diff --git a/Onepunch/README.md b/Onepunch/README.md index 66aa575..32fd10c 100644 --- a/Onepunch/README.md +++ b/Onepunch/README.md @@ -1,26 +1,46 @@ # Onepunch + ## Screenshots -![Home](./__Home.png) -![Profile](./__Profile.png) -![Playlist](./__Playlist.png) + +#### Dark + +| ![dark_home](./screenshots/dark_home.png) | ![dark_album](./screenshots/dark_album.png) | ![dark_playlist](./screenshots/dark_playlist.png) | +| :-------------------------------------------: | :---------------------------------------------: | :-----------------------------------------------: | +| home | album | playlist | +| ![dark_podcast](screenshots/dark_podcast.png) | ![dark_profile](./screenshots/dark_profile.png) | +| podcat | profile | + +#### Light + +| ![light_home](./screenshots/light_home.png) | ![light_album](./screenshots/light_album.png) | ![light_playlist](./screenshots/light_playlist.png) | +| :---------------------------------------------: | :-----------------------------------------------: | :-------------------------------------------------: | +| home | album | playlist | +| ![light_podcast](screenshots/light_podcast.png) | ![light_profile](./screenshots/light_profile.png) | +| podcat | profile | ## More -#### About -A simple gruvified spotify theme. +### About -#### First Aid Kit ¯\\_(ツ)\_/¯ +A simple gruvified spotify theme. Move to [Extra Preview](#extra-preview) for more screenshots. -- To change color schemes **`spicetify config color_scheme color_scheme_name`** (change the **`color_scheme_name`** to dark/light) -- Tested on macOS only and pretty much everything worked. ﾍ(･_| +### Information -#### On my list -- [x] Gruvified and updated to the new UI. -- [x] Added **dark/light** mode. -- [x] Almost everything looks fine -- [x] Yeeted the idea of changing icons. 〜〜(／￣▽)／　〜ф -- [ ] Yet to fix some minor color mismatch. +* To apply this theme: + ```shell + # for dark theme + spicetify config current_theme Onepunch color_scheme dark + spicetify apply -#### Contact -Go **[here](https://github.com/okarin001/Onepunch/issues)** and _check/create_ an issue in case you face any probelm. + #for light theme + spicetify config current_theme Onepunch color_scheme light + spicetify apply + + ``` + +* Tested on macOS only and pretty much everything worked. ﾍ(･\_| + +### Contact + +Go **[here](https://github.com/okarin001/Onepunch/issues)** and *check/create* an issue in case you face any probelm. diff --git a/Onepunch/__Home.png b/Onepunch/__Home.png deleted file mode 100644 index 4509f54..0000000 Binary files a/Onepunch/__Home.png and /dev/null differ diff --git a/Onepunch/__Playlist.png b/Onepunch/__Playlist.png deleted file mode 100644 index 88e1e5e..0000000 Binary files a/Onepunch/__Playlist.png and /dev/null differ diff --git a/Onepunch/__Profile.png b/Onepunch/__Profile.png deleted file mode 100644 index 7e48351..0000000 Binary files a/Onepunch/__Profile.png and /dev/null differ diff --git a/Onepunch/color.ini b/Onepunch/color.ini index b70e676..39a0ff8 100644 --- a/Onepunch/color.ini +++ b/Onepunch/color.ini @@ -1,43 +1,46 @@ [dark] ; gruvbox dark mode text = d5c4a1 -subtext = fabd2f -extratext = d3869b +subtext = b8bb26 +extratext = fabd2f main = 1d2021 sidebar = 1d2021 player = 1d2021 sec-player = 32302f -card = fb4934 -sec-card = 32302f -shadow = 000000 +card = 1d2021 +sec-card = fb4934 +shadow = 1d2021 selected-row = d3869b button = 8ec07c button-active = 8ec07c button-disabled = 665c54 button-knob = fe8019 -tab-active = b8bb26 -notification = b8bb26 +tab-active = fb4934 +notification = fb4934 notification-error = e22134 misc = 83a598 [light] ; gruvbox light mode text = 504945 -subtext = b57614 -extratext = 8f3f71 +subtext = 79740e +extratext = b57614 main = f9f5d7 sidebar = f9f5d7 player = f9f5d7 sec-player = f2e5bc -card = 9d0006 -sec-card = f2e5bc -shadow = d5c4a1 -selected-row = 8f3f71 +card = f9f5d7 +sec-card = 9d0006 +shadow = f9f5d7 +selected-row = 427b58 button = 427b58 button-active = 427b58 -button-disabled = bdae93 -button-knob = af3a03 -tab-active = 79740e -notification = 79740e +button-disabled = 076678 +button-knob = 9d0006 +tab-active = 076678 +notification = 076678 notification-error = e22134 -misc = 076678 \ No newline at end of file +misc = b57614 + + + diff --git a/Onepunch/screenshots/dark_album.png b/Onepunch/screenshots/dark_album.png new file mode 100644 index 0000000..57e3542 Binary files /dev/null and b/Onepunch/screenshots/dark_album.png differ diff --git a/Onepunch/screenshots/dark_home.png b/Onepunch/screenshots/dark_home.png new file mode 100644 index 0000000..97b03a9 Binary files /dev/null and b/Onepunch/screenshots/dark_home.png differ diff --git a/Onepunch/screenshots/dark_playlist.png b/Onepunch/screenshots/dark_playlist.png new file mode 100644 index 0000000..b9e20bc Binary files /dev/null and b/Onepunch/screenshots/dark_playlist.png differ diff --git a/Onepunch/screenshots/dark_podcast.png b/Onepunch/screenshots/dark_podcast.png new file mode 100644 index 0000000..c888636 Binary files /dev/null and b/Onepunch/screenshots/dark_podcast.png differ diff --git a/Onepunch/screenshots/dark_profile.png b/Onepunch/screenshots/dark_profile.png new file mode 100644 index 0000000..b65d67b Binary files /dev/null and b/Onepunch/screenshots/dark_profile.png differ diff --git a/Onepunch/screenshots/display.gif b/Onepunch/screenshots/display.gif new file mode 100644 index 0000000..09adc07 Binary files /dev/null and b/Onepunch/screenshots/display.gif differ diff --git a/Onepunch/screenshots/light_album.png b/Onepunch/screenshots/light_album.png new file mode 100644 index 0000000..4ab674d Binary files /dev/null and b/Onepunch/screenshots/light_album.png differ diff --git a/Onepunch/screenshots/light_home.png b/Onepunch/screenshots/light_home.png new file mode 100644 index 0000000..b678c80 Binary files /dev/null and b/Onepunch/screenshots/light_home.png differ diff --git a/Onepunch/screenshots/light_playlist.png b/Onepunch/screenshots/light_playlist.png new file mode 100644 index 0000000..f4dfd61 Binary files /dev/null and b/Onepunch/screenshots/light_playlist.png differ diff --git a/Onepunch/screenshots/light_podcast.png b/Onepunch/screenshots/light_podcast.png new file mode 100644 index 0000000..41dcf1c Binary files /dev/null and b/Onepunch/screenshots/light_podcast.png differ diff --git a/Onepunch/screenshots/light_profile.png b/Onepunch/screenshots/light_profile.png new file mode 100644 index 0000000..b24e52a Binary files /dev/null and b/Onepunch/screenshots/light_profile.png differ diff --git a/Onepunch/user.css b/Onepunch/user.css index 156fe8a..128e8b8 100644 --- a/Onepunch/user.css +++ b/Onepunch/user.css @@ -2,7 +2,7 @@ .main-navBar-navBarLinkActive, .main-navBar-navBarLinkActive:focus, .logo { - background-color: var(--spice-card) !important; + background-color: var(--spice-sec-card) !important; color: var(--spice-main) !important; } @@ -17,16 +17,19 @@ color: var(--spice-main) !important; } -.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText, -.main-createPlaylistButton-button { +.main-collectionLinkButton-collectionLinkButton + .main-collectionLinkButton-collectionLinkText, +.main-createPlaylistButton-button, +.main-rootlist-rootlistItemLink:link, +.main-rootlist-rootlistItemLink:visited { color: var(--spice-text) !important; } -.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selected .main-collectionLinkButton-icon { - opacity: .7 !important; +.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selected + .main-collectionLinkButton-icon { + opacity: 0.7 !important; } - .main-rootlist-rootlistDividerGradient { background: linear-gradient(180deg, var(--spice-main), transparent); } @@ -51,7 +54,9 @@ .main-entityHeader-overlay, .main-entityHeader-backgroundColor, .x-914-entityHeader-overlay, -.x-914-actionBarBackground-background { +.x-entityHeader-overlay, +.x-914-actionBarBackground-background, +.x-actionBarBackground-background { background-color: unset !important; background-image: unset !important; } @@ -68,11 +73,12 @@ } /* Topbar visibility bug */ -.main-topBar-topbarContent:not(.main-topBar-topbarContentFadeIn)>* { +.main-topBar-topbarContent:not(.main-topBar-topbarContentFadeIn) > * { opacity: unset !important; } -.main-entityHeader-topbarContent:not(.main-entityHeader-topbarContentFadeIn)>* { +.main-entityHeader-topbarContent:not(.main-entityHeader-topbarContentFadeIn) + > * { opacity: 0 !important; } @@ -98,7 +104,6 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) { fill: black; } - /* details metadata */ .main-entityTitle-subtitle.main-entityTitle-gray, .main-entityHeader-metaDataText { @@ -115,11 +120,12 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) { /* artist page edits*/ .main-entityHeader-background.main-entityHeader-gradient { - opacity: .4; + opacity: 0.4; } .main-entityHeader-background.main-entityHeader-overlay:after { - background-image: linear-gradient(transparent, transparent), linear-gradient(var(--spice-main), var(--spice-main)); + background-image: linear-gradient(transparent, transparent), + linear-gradient(var(--spice-main), var(--spice-main)); } .artist-artistPick-pickComment { @@ -135,12 +141,11 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) { /* home screen edits */ .view-homeShortcutsGrid-name { - color: var(--spice-button); + color: var(--spice-text); } - .main-shelf-title { - color: var(--spice-subtext) + color: var(--spice-subtext); } .view-homeShortcutsGrid-shortcut, @@ -164,10 +169,9 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) { border-radius: 10px; } - /* inside a page edits */ .main-addButton-button { - color: rgba(var(--spice-rgb-card), .7) !important; + color: rgba(var(--spice-rgb-card), 0.7) !important; } .main-trackList-trackListRow.main-trackList-active .main-trackList-rowMarker, @@ -179,8 +183,6 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) { color: var(--spice-text) !important; } - - /* friend activity */ .main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a, .main-buddyFeed-activityMetadata .main-buddyFeed-playbackContext a, @@ -207,7 +209,7 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) { color: var(--spice-tab-active) !important; } -input:checked~.x-toggle-indicatorWrapper .x-toggle-indicator { +input:checked ~ .x-toggle-indicatorWrapper .x-toggle-indicator { background-color: var(--spice-button-knob) !important; } @@ -215,11 +217,10 @@ input:checked~.x-toggle-indicatorWrapper .x-toggle-indicator { background: var(--spice-button-knob) !important; } -input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper { - background-color: rgba(var(--spice-rgb-button), .5) !important; +input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper { + background-color: rgba(var(--spice-rgb-button), 0.5) !important; } - /* search page edits */ input { @@ -238,7 +239,6 @@ input { color: var(--spice-main) !important; } - /* menu and dropdown menus including the user menu */ .main-type-mesto, .x-533-dropDown-dropDown { @@ -254,7 +254,7 @@ input { .main-userWidget-box:focus, .main-userWidget-box:hover, -.main-userWidget-box[data-context-menu-open=true] { +.main-userWidget-box[data-context-menu-open="true"] { border-radius: 10px !important; } @@ -270,29 +270,37 @@ input { } .main-card-card:hover, -.main-card-card[data-context-menu-open=true] { - background-color: rgba(var(--spice-rgb-sec-card), .3) !important; +.main-card-card[data-context-menu-open="true"] { + background-color: rgba(var(--spice-rgb-sec-card), 0.3) !important; } .main-contextMenu-menu, .main-card-card:focus-within, - .main-deletePlaylistDialog-container { + background-color: var(--spice-card) !important; +} + +.main-deletePlaylistDialog-secondaryButton { + color: var(--spice-text) !important; +} + +.main-button-primary { background-color: var(--spice-sec-card) !important; + color: var(--spice-card) !important; +} + +.main-deletePlaylistDialog-title { + color: var(--spice-subtext) !important; } .main-keyboardShortcutsHelpModal-container, .main-trackCreditsModal-container { - background-color: var(--spice-main) !important; + background-color: var(--spice-card) !important; color: var(--spice-text) !important; } .main-keyboardShortcutsHelpModal-header, .main-trackCreditsModal-header { - color: var(--spice-notification) !important; -} - -.main-trackCreditsModal-sectionTitle { color: var(--spice-subtext) !important; } @@ -302,7 +310,7 @@ input { /* profile page edits */ .main-cardImage-imageWrapper { - background-color: var(--spice-sec-card) !important; + background-color: var(--spice-card) !important; } /* mini player edits */ @@ -330,40 +338,4 @@ input { .main-nowPlayingBar-container { background-color: var(--spice-sec-player) !important; border-top: unset !important; - - height: 80px; } - - - -/* - -i am unable to remove the small album cover when we expand the -album art. So for now i am disabling these edits. If anyone wants -to contribute to this feel free to add. - -*/ - - -/* .main-nowPlayingBar-container { - border-radius: 15px !important; -} */ -/* .Root__now-playing-bar { - position: fixed; - bottom: 5px; - left: 14%; - width: 70%; - background: none !important; -} */ - -/* .main-coverSlotExpanded-container { -height: auto; -position: fixed; -bottom: 70px; -left: 14.5%; -width: 17.85%; -} */ - -/* .main-connectBar-connectBar { - display: none; -} */ \ No newline at end of file diff --git a/README.md b/README.md index c612a6b..dcf27d9 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,11 @@ cd spicetify-themes cp -r * ~/.config/spicetify/Themes ``` -**NOTE: to install Dribbblish and DribbblishDynamic follow the instructions in its README**. +**NOTE: to install the themes below, you need to follow the instructions in its README**. + +* Dribbblish +* DribbblishDynamic +* Turntable After that you can choose which theme to apply just by running `spicetify config current_theme THEME_NAME`. Some themes have 2 or more different color schemes. You can switch between them, once selected the theme, with `spicetify config color_scheme SCHEME_NAME`. @@ -36,7 +40,7 @@ If you are unsure about which channel to use, go for Spectrum. NOTE: Spotify ad-blocked version is not supported. -## FAQ +## FAQ ### How can I remove free version UI elements (e.g. "Upgrade" button)? diff --git a/Sleek/README.md b/Sleek/README.md index 56573de..adcc619 100644 --- a/Sleek/README.md +++ b/Sleek/README.md @@ -8,13 +8,14 @@ ### Deep ![Deep Screenshot](deep.png) +### Deeper +![Deeper Screenshot](deeper.png) + ### Psycho ![Psycho Screenshot](psycho.png) -### Deeper -![Deeper Screenshot](deeper.png) -## More +## Info -A simple and sleek theme that builds on the basic Spotify UI. +A simple and sleek theme that builds on the basic Spotify UI. Created by [@harbassan](https://github.com/harbassan) -BIB color scheme based on original [BIB-Green](https://github.com/morpheusthewhite/spicetify-themes/tree/master/BIB-Green) +BIB color scheme based on original theme: [BIB-Green](https://github.com/morpheusthewhite/spicetify-themes/tree/master/BIB-Green) diff --git a/Sleek/bib.png b/Sleek/bib.png index 9c0ab78..da900d9 100644 Binary files a/Sleek/bib.png and b/Sleek/bib.png differ diff --git a/Sleek/color.ini b/Sleek/color.ini index 461b4d8..cf53267 100644 --- a/Sleek/color.ini +++ b/Sleek/color.ini @@ -13,6 +13,7 @@ sub-button = a20606 button = e00000 button-active = e00000 button-disabled = 404040 +sidebar-button = ff4700 tab-active = 171717 notification = 5e0000 notification-error = 5e0000 @@ -28,12 +29,13 @@ main = 040614 sidebar = 0F111A player = 0F111A card = 0C1C19 -shadow = 0C1C19 +shadow = 000000 selected-row = 040614 sub-button = 4f9a87 button = 4f9a87 button-active = 4a99e9 -button-disabled = 0C1C19 +button-disabled = 0C1C19 +sidebar-button = 040614 tab-active = 0a1527 notification = 051024 notification-error = 051024 @@ -54,7 +56,8 @@ selected-row = 09162e sub-button = ffffff button = 1464b5 button-active = 4a99e9 -button-disabled = 353535 +button-disabled = 21282f +sidebar-button = 37b778 tab-active = 0a1527 notification = 051024 notification-error = 051024 @@ -76,6 +79,7 @@ sub-button = 6a913d button = 8bc34a button-active = 98da4b button-disabled = 353535 +sidebar-button = 8bc34a tab-active = 303030 notification = 242424 notification-error = 242424 @@ -97,6 +101,7 @@ misc = FFFFFF ; button = playlist buttons bg in sidebar, drop-down menus, now playing song, like button ; button-active = hover on song selected ; button-disabled = seekbar bg, volume bar bg, scrollbar +; sidebar-button = sidebar buttons bg ; tab-active = button bg in main field (playlists, podcasts, artists, albums) ; notification = notification ('Added to liked songs' etc.) ; notification-error = error diff --git a/Sleek/deep.png b/Sleek/deep.png index 8fff6fb..7a0cd2c 100644 Binary files a/Sleek/deep.png and b/Sleek/deep.png differ diff --git a/Sleek/deeper.png b/Sleek/deeper.png index 1c46ec1..e6a6566 100644 Binary files a/Sleek/deeper.png and b/Sleek/deeper.png differ diff --git a/Sleek/psycho.png b/Sleek/psycho.png index 1a11ee3..ea5de1a 100644 Binary files a/Sleek/psycho.png and b/Sleek/psycho.png differ diff --git a/Sleek/user.css b/Sleek/user.css index 275c499..a42acd8 100644 --- a/Sleek/user.css +++ b/Sleek/user.css @@ -56,7 +56,10 @@ input { } .main-trackList-playingIcon { - filter: brightness(0) saturate(100%) invert(11%) sepia(81%) saturate(4689%) hue-rotate(359deg) brightness(78%) contrast(115%); + -webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E"); + background: var(--spice-text); + content-visibility: hidden; + -webkit-mask-repeat: no-repeat; } span.artist-artistVerifiedBadge-badge svg:nth-child(1) { @@ -213,6 +216,18 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) { color: var(--spice-text) !important; } +.main-yourEpisodesButton-yourEpisodesIcon { + background: var(--spice-text); +} + +.main-yourEpisodesButton-yourEpisodesIcon path { + fill: var(--spice-sidebar); +} + +.main-navBar-entryPoints > div:first-of-type { + margin-top: 20px; +} + /* Main Play Button Change */ .main-playButton-PlayButton.main-playButton-primary { color: var(--spice-main); @@ -244,7 +259,7 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) { } .main-navBar-navBarLinkActive { - background-color: var(--spice-playback-bar); + background-color: var(--spice-sidebar-button); } .main-navBar-navBarLinkActive, .main-navBar-navBarLinkActive:focus, .main-navBar-navBarLinkActive:hover, .logo { diff --git a/THEMES.md b/THEMES.md index 3841963..4a95b67 100644 --- a/THEMES.md +++ b/THEMES.md @@ -2,6 +2,10 @@ Here you can find a preview of all the themes. Some of them may have different colour schemes (in that case you'll find different entries in the same theme, each one named after the colour scheme). +## BurntSienna + +![BurntSienna Screenshot](BurntSienna/screenshot.png) + ## Default ![Ocean Screenshot](Default/ocean.png) @@ -9,25 +13,46 @@ Here you can find a preview of all the themes. Some of them may have different c ## Dribbblish #### Base + ![base](Dribbblish/base.png) + #### White + ![white](Dribbblish/white.png) + #### Dark + ![dark](Dribbblish/dark.png) + #### Nord-Light + ![nord-light](Dribbblish/nord-light.png) + #### Nord-Dark + ![nord-dark](Dribbblish/nord-dark.png) + #### Beach-Sunset + ![beach-sunset](Dribbblish/beach-sunset.png) + #### Purple + ![purple](Dribbblish/purple.png) + #### Samourai + ![samourai](Dribbblish/samourai.png) ## Onepunch -![Onepunch Screenshot](Onepunch/\__Home.png) +#### Dark + +![dark_home](Onepunch/screenshots/dark_home.png) + +#### Light + +![light_home](Onepunch/screenshots/light_home.png) ## Sleek @@ -39,14 +64,14 @@ Here you can find a preview of all the themes. Some of them may have different c ![Deep Screenshot](Sleek/deep.png) -#### Psycho - -![Psycho Screenshot](Sleek/psycho.png) - #### Deeper ![Deeper Screenshot](Sleek/deeper.png) +#### Psycho + +![Psycho Screenshot](Sleek/psycho.png) + ## Turntable https://user-images.githubusercontent.com/19476925/119483404-84223100-bd87-11eb-8dfa-5af9f7a2e925.mov @@ -54,7 +79,9 @@ https://user-images.githubusercontent.com/19476925/119483404-84223100-bd87-11eb- ## Ziro #### Blue Dark -![Album](https://raw.githubusercontent.com/schnensch0/ziro/main/img/preview/album-blue-dark.png) + +![Album](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/album-blue-dark.png) #### Blue Light -![Artist](https://raw.githubusercontent.com/schnensch0/ziro/main/img/preview/artist-blue-light.png) + +![Artist](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/artist-blue-light.png) diff --git a/Turntable/README.md b/Turntable/README.md index e0786c6..e1ef258 100644 --- a/Turntable/README.md +++ b/Turntable/README.md @@ -4,6 +4,8 @@ Based on Spotify original theme. **Note:** Require Spicetify **v2.2.0** or higher! Otherwise, performance problems will happen when the turntable rotate! +View the **CHANGELOG** [here](https://github.com/grasonchan/spotify-spice/blob/master/CHANGELOG.md). + ## Screenshots
@@ -16,7 +18,6 @@ Based on Spotify original theme. full app display - vertical mode
- ## More ### About Turntable diff --git a/Turntable/rotateTurntable.js b/Turntable/rotateTurntable.js index 125b94a..40eaa84 100644 --- a/Turntable/rotateTurntable.js +++ b/Turntable/rotateTurntable.js @@ -1,30 +1,158 @@ -window.addEventListener("load", () => { - (function rotateTurntable() { - if (!Spicetify.Player.origin || !document.querySelector("#fad-art-image")) { - setTimeout(rotateTurntable, 250); - return; +window.addEventListener("load", rotateTurntable = () => { + const fadBtn = document.querySelector(".main-topBar-button[title='Full App Display']"); + + if (!Spicetify.Player.origin || !fadBtn) { + setTimeout(rotateTurntable, 250); + return; + } + + const adModalStyle = document.createElement("style"); + const STYLE_FOR_AD_MODAL = +` +.ReactModalPortal { + display: none +} +`; + adModalStyle.innerHTML = STYLE_FOR_AD_MODAL; + + let playState, clickedFadBtn; + + function handleRotate(fromEvent) { + const fadArt = document.querySelector("#fad-art-image"); + + if (!fromEvent && Spicetify.Player.isPlaying() || fromEvent && !playState) { + if (fadArt) fadArt.style.animationPlayState = "running"; + playState = true; + } else { + if (fadArt) fadArt.style.animationPlayState = "paused"; + playState = false; } + } - const fullAppDisplay = document.querySelector("#full-app-display"); + function handleFadControl(event) { + event.stopPropagation(); + } - function handleRotate() { - const fadArt = document.querySelector("#fad-art-image"); + function handleFadDblclick() { + const fadControlsBtns = document.querySelectorAll("#fad-controls button"); - Spicetify.Player.isPlaying() - ? fadArt.style.animationPlayState = "running" - : fadArt.style.animationPlayState = "paused"; + for (const fadControl of fadControlsBtns) { + fadControl.addEventListener("dblclick", handleFadControl); } + } + + function handleConfigSwitch() { + const genericModal = document.querySelector("generic-modal"); + + document.querySelectorAll("#popup-config-container > div")[0].remove(); + + handleInitalStatus(genericModal); + } + + function handleInitalStatus(genericModal) { + genericModal.remove(); handleRotate(); + handleFadDblclick(); + } - Spicetify.Player.addEventListener("onplaypause", () => setTimeout(handleRotate)); + function handleBackdrop() { + const fadClassList = document.querySelector("#full-app-display").classList; - fullAppDisplay.addEventListener("contextmenu", () => { - const configSwitchBtns = document.querySelectorAll("#popup-config-container button.switch"); + if (!+localStorage.getItem("enableBlurFad")) { + fadClassList.add("blur-fad"); - for (const configSwitch of configSwitchBtns) { - configSwitch.addEventListener("click", handleRotate); - } - }); - })(); + localStorage.setItem("enableBlurFad", "1"); + } else { + fadClassList.remove("blur-fad"); + + localStorage.setItem("enableBlurFad", "0"); + } + } + + function handleContextMenu() { + const configPopupCloseBtn = document.querySelector(".main-trackCreditsModal-closeBtn"); + const configContainer = document.querySelector("#popup-config-container"); + const settingRowReferenceNode = document.querySelectorAll("#popup-config-container > div")[0]; + + const settingRowContainer = document.createElement("div"); + const settingRow = +` +
+ +
+ +
+
+`; + + settingRowContainer.innerHTML = settingRow; + configContainer.insertBefore(settingRowContainer, settingRowReferenceNode); + + const setBlurBackdropNode = document.querySelectorAll("#popup-config-container > div")[0]; + const configSwitchBtns = document.querySelectorAll("#popup-config-container button.switch"); + + configPopupCloseBtn.addEventListener("click", () => setBlurBackdropNode.remove()); + + for (const configSwitch of configSwitchBtns) { + configSwitch.addEventListener("click", handleConfigSwitch); + } + + setBlurBackdropNode.querySelector("button").addEventListener("click", handleBackdrop); + } + + function handleMainInterface() { + const mainInterface = document.querySelector("#main"); + const mainPlayBtn = document.querySelector(".main-playButton-PlayButton"); + const mainTopbarTitle = document.querySelector(".main-entityHeader-topbarTitle"); + const billboard = document.querySelector("#view-billboard-ad"); + + mainInterface.style.display = "block"; + if (billboard) billboard.closest(".ReactModalPortal").remove(); + adModalStyle.remove(); + + setTimeout(() => { + mainPlayBtn.style.removeProperty("opacity"); + if (mainTopbarTitle) mainTopbarTitle.style.removeProperty("opacity"); + }, 250); + } + + handleRotate(); + + Spicetify.Player.addEventListener("onplaypause", () => handleRotate(true)); + + fadBtn.addEventListener("click", () => { + const mainInterface = document.querySelector("#main"); + const mainPlayBtn = document.querySelector(".main-playButton-PlayButton"); + const mainTopbarTitle = document.querySelector(".main-entityHeader-topbarTitle"); + const topbarContentFadeIn = document.querySelector(".main-entityHeader-topbarContentFadeIn"); + const fullAppDisplay = document.querySelector("#full-app-display"); + const fadArt = document.querySelector("#fad-art-image"); + const fadClassList = document.querySelector("#full-app-display").classList; + + if (!clickedFadBtn && +localStorage.getItem("enableBlurFad")) fadClassList.add("blur-fad"); + if (!clickedFadBtn) clickedFadBtn = true; + + playState + ? fadArt.style.animationPlayState = "running" + : fadArt.style.animationPlayState = "paused"; + + handleFadDblclick(); + + if (!topbarContentFadeIn) { + mainPlayBtn.style.setProperty("opacity", "0", "important"); + if (mainTopbarTitle) mainTopbarTitle.style.setProperty("opacity", "0", "important"); + } + + mainInterface.style.display = "none"; + document.body.append(adModalStyle); + + fullAppDisplay.addEventListener("contextmenu", handleContextMenu); + + fullAppDisplay.addEventListener("dblclick", handleMainInterface); + }); }); diff --git a/Turntable/screenshots/full_app_display.png b/Turntable/screenshots/full_app_display.png index eba90fc..6a9f0db 100644 Binary files a/Turntable/screenshots/full_app_display.png and b/Turntable/screenshots/full_app_display.png differ diff --git a/Turntable/screenshots/full_app_display_vertical_mode.png b/Turntable/screenshots/full_app_display_vertical_mode.png index e924c7a..2da3b74 100644 Binary files a/Turntable/screenshots/full_app_display_vertical_mode.png and b/Turntable/screenshots/full_app_display_vertical_mode.png differ diff --git a/Turntable/user.css b/Turntable/user.css index 15f8e83..fdbe28b 100644 --- a/Turntable/user.css +++ b/Turntable/user.css @@ -61,7 +61,7 @@ background-color: #181818 !important } -.main-virtualScrollList-wrapper [role="row"]:nth-child(odd) { +.main-rootlist-wrapper [role="row"]:nth-child(odd) { background: linear-gradient(to right, #121212, #191919, #121212) } @@ -174,16 +174,9 @@ } -/* modal backdrop */ -.GenericModal__overlay { - backdrop-filter: var(--main-blur-backdrop); - background-color: rgba(9, 9, 9, .2) -} - - /* full app display */ #full-app-display { - background-color: #222 + background: radial-gradient(#242424, #1f1f1f) } #fad-background { @@ -228,7 +221,7 @@ } #fad-art::after { - background-color: #252525; + background-color: rgba(60, 60, 60, .1); transform: scale(1.65); z-index: -1 } @@ -238,7 +231,7 @@ } #fad-details #fad-title { - font-size: 38px + font-size: 32px } #fad-details #fad-artist { @@ -282,6 +275,44 @@ fill: #fff } +#fad-progress-container { + font-size: 12px +} + +#fad-elapsed, +#fad-duration { + min-width: 32px !important +} + +#fad-progress { + height: 2px !important; + background-color: rgba(100, 100, 100, .5) !important +} + +#fad-progress-inner { + background-color: var(--spotify-main-color) !important; + box-shadow: unset !important +} + + +/* fad blur backdrop */ +.blur-fad #fad-background { + display: unset +} + +.blur-fad #fad-art::before { + background: radial-gradient(#242424, #000) +} + +.blur-fad #fad-art::after { + background-color: rgba(40, 40, 40, .1); + box-shadow: 0 0 1px rgba(100, 100, 100, .4) +} + +.blur-fad #fad-progress { + background-color: rgba(200, 200, 200, .3) !important +} + @media (min-width: 1460px) and (min-height: 960px) { #fad-foreground { @@ -292,7 +323,7 @@ /* rotate turntable */ #fad-art-image { - animation: rotate-cover_img 20s linear infinite paused + animation: rotate-cover_img 24s linear infinite paused } @keyframes rotate-cover_img { diff --git a/Ziro/README.md b/Ziro/README.md index 700c39b..b1f07b3 100644 --- a/Ziro/README.md +++ b/Ziro/README.md @@ -1,11 +1,11 @@ # Ziro ## Screenshots ### Blue Dark -![Album](https://raw.githubusercontent.com/schnensch0/ziro/main/img/preview/album-blue-dark.png) -![Cards](https://raw.githubusercontent.com/schnensch0/ziro/main/img/preview/cards-blue-dark.png) +![Album](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/album-blue-dark.png) +![Cards](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/cards-blue-dark.png) ### Blue Light -![Artist](https://raw.githubusercontent.com/schnensch0/ziro/main/img/preview/artist-blue-light.png) -![Search](https://raw.githubusercontent.com/schnensch0/ziro/main/img/preview/search-blue-light.png) +![Artist](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/artist-blue-light.png) +![Search](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/search-blue-light.png) ## More Inspired by the [Zorin Blue Dark](https://github.com/ZorinOS/zorin-desktop-themes/tree/master/ZorinBlue-Dark)/[Light](https://github.com/ZorinOS/zorin-desktop-themes/tree/master/ZorinBlue-Light) GTK theme and [spot](https://github.com/xou816/spot) diff --git a/Ziro/user.css b/Ziro/user.css index c93011b..1597936 100644 --- a/Ziro/user.css +++ b/Ziro/user.css @@ -37,7 +37,7 @@ .now-playing-bar-container, ._6e96ad0ba78d75ffb2a0156aa1834a21-scss { border-top: none; } -.main-rootlist-rootlistDivider, .main-contextMenu-dividerBefore::before, .main-contextMenu-dividerAfter::after, .show-episodeList-divider { +.main-rootlist-rootlistDivider, .main-contextMenu-dividerBefore::before, .main-contextMenu-dividerAfter::after, .show-episodeList-divider, .main-rootlist-rootlistDividerContainer { display: none; } /* cards */ @@ -57,10 +57,6 @@ .link-subtle { transition-duration: 150ms; } -/* player */ -.progress-bar { - --fg-color: var(--spice-button-active); -} /* headers */ .main-entityHeader-withBackgroundImage { padding: 0 64px 24px; @@ -133,16 +129,16 @@ button.switch { color: var(--spice-shadow); } /* playlist sidebar */ -.main-createPlaylistButton-button, ._6b5bc370e9834a4932f57284a96a0748-scss, ._928aa704d6ac22c1e288a4ddbed11a40-scss { +.main-createPlaylistButton-button, ._6b5bc370e9834a4932f57284a96a0748-scss, ._928aa704d6ac22c1e288a4ddbed11a40-scss, .main-collectionLinkButton-icon, .main-collectionLinkButton-collectionLinkText { opacity: 1 !important; } -._6b5bc370e9834a4932f57284a96a0748-scss, .main-createPlaylistButton-button, .main-createPlaylistButton-svg, .ac0df040748287f39652cc42e3b762ba-scss { +._6b5bc370e9834a4932f57284a96a0748-scss, .main-createPlaylistButton-button, .main-createPlaylistButton-svg, .ac0df040748287f39652cc42e3b762ba-scss, .main-collectionLinkButton-collectionLinkButton { border-radius: var(--border-radius-2) !important; } .main-rootlist-rootlistItemLink:link, .main-rootlist-rootlistItemLink:visited, .main-rootlist-rootlistPlaylistHeader { color: var(--spice-text); } -.ac0df040748287f39652cc42e3b762ba-scss, .main-createPlaylistButton-button { +.ac0df040748287f39652cc42e3b762ba-scss, .main-createPlaylistButton-button, .main-collectionLinkButton-collectionLinkButton { padding: 0 12px !important; } .main-rootlist-rootlistPlaylistsScrollNode, .main-createPlaylistButton-button { @@ -152,37 +148,48 @@ button.switch { width: -webkit-fill-available; } .main-rootlist-rootlistItem { - padding: 0 8px; - display: block; + padding-left: calc(8px + var(--indentation)*16px); + padding-right: 8px; +} +.main-rootlist-rootlistItem { height: 32px; } +.main-rootlist-rootlistItemLinkActive ~ .main-rootlist-expandArrow:focus, .main-rootlist-rootlistItemLinkActive ~ .main-rootlist-expandArrow:hover, .main-rootlist-rootlistItemLinkActive ~ .main-rootlist-expandArrow { + color: var(--spice-shadow); +} +.main-rootlist-expandArrow { + color: var(--spice-text); +} .main-rootlist-rootlistItemLink { height: 32px; border-radius: var(--border-radius-2); padding: 0 12px; } -.main-rootlist-rootlistItemLink:hover, .main-createPlaylistButton-button:hover, .ac0df040748287f39652cc42e3b762ba-scss:hover { +.main-rootlist-expandArrow { + margin-inline-start: -32px; + padding: 8px; +} +.main-rootlist-statusIcons { + margin-inline-start: -24px; + position: relative; + right: 8px; +} +.main-rootlist-rootlistItemLink:hover, .main-createPlaylistButton-button:hover, .ac0df040748287f39652cc42e3b762ba-scss:hover, .main-collectionLinkButton-collectionLinkButton:hover { background-color: rgba(var(--spice-rgb-selected-row),.05); } -.main-rootlist-rootlistItemLink:active, .main-createPlaylistButton-button:active, .ac0df040748287f39652cc42e3b762ba-scss:active { +.main-rootlist-rootlistItemLink:active, .main-createPlaylistButton-button:active, .ac0df040748287f39652cc42e3b762ba-scss:active, .main-collectionLinkButton-collectionLinkButton:active { background-color: rgba(var(--spice-rgb-selected-row),.1); } .main-rootlist-rootlistItemLinkActive, .main-rootlist-rootlistItemLinkActive:hover { background-color: var(--spice-selected-row); } -.ac0df040748287f39652cc42e3b762ba-scss._926f2bd73c2ddb23fb86b430a2f48707-scss { +.ac0df040748287f39652cc42e3b762ba-scss._926f2bd73c2ddb23fb86b430a2f48707-scss, .main-collectionLinkButton-selected { background: var(--spice-selected-row) !important; + color: var(--spice-shadow); } .main-rootlist-rootlistItemLinkActive .main-rootlist-textWrapper, .main-rootlist-rootlistItemLinkActive .main-rootlist-textWrapper:hover, .ac0df040748287f39652cc42e3b762ba-scss._926f2bd73c2ddb23fb86b430a2f48707-scss { color: var(--spice-shadow); } -.main-rootlist-statusIcons { - position: relative; - top: -24px; - right: 10px; - justify-content: flex-end; - pointer-events: none; -} .main-rootlist-statusIcons > button { color: var(--spice-text); } @@ -193,7 +200,7 @@ button.switch { display: none; } /* tracklist */ - .main-trackList-indexable .main-virtualScrollList-wrapper { + .main-trackList-indexable .main-virtualScrollList-wrapper, .main-trackList-indexable .main-rootlist-wrapper { background-color: var(--spice-card); border-radius: var(--border-radius-1) var(--border-radius-1) 0 0; padding: 8px; @@ -230,7 +237,7 @@ button.switch { ._110dbc41d89af63f97cdd8b7cd7fea47-scss { border: 1px solid var(--spice-text); } -.main-trackList-trackListRow.main-trackList-selected ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected:hover ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected:active ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected:focus ._110dbc41d89af63f97cdd8b7cd7fea47-scss { +.main-trackList-trackListRow.main-trackList-selected ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected:hover ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected:active ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected:focus ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected .main-button-outlined { border: 1px solid var(--spice-shadow); } .main-trackList-trackListHeaderStuck.main-trackList-trackListHeader { @@ -263,9 +270,6 @@ button.switch { .main-actionBar-ActionBarRow > button:not(:first-child), .x-actionBar-ActionButtonsRow > div > button { color: var(--spice-button); } -.main-entityHeader-image[src=https://i.scdn.co/image/ab6775700000ee85a16a411c728cd698af7a5157] { - src: url(https://en.gravatar.com/userimage/179347741/9a6aa97e24bcec0b57f6a1cff0f768a3.png); -} /* artist page */ .artist-artistPick-pinnedImage, .artist-artistOffers-item { border-radius: var(--border-radius-2) !important; @@ -364,15 +368,15 @@ path[d="M23 0C10.298 0 0 10.297 0 23c0 12.702 10.298 23 23 23 12.703 0 23-10.298 color: var(--spice-text); } /* dialogs */ -.main-deletePlaylistDialog-container { +.main-deletePlaylistDialog-container, .main-deleteFolderDialog-container { background-color: var(--spice-card); color: var(--spice-text); border-radius: var(--border-radius-1); } -.main-deletePlaylistDialog-secondaryButton { +.main-deletePlaylistDialog-secondaryButton, .main-deleteFolderDialog-secondaryButton { color: var(--spice-button); } -.main-deletePlaylistDialog-buttonContainer>:last-child { +.main-deletePlaylistDialog-buttonContainer>:last-child, .main-deleteFolderDialog-buttonContainer>:last-child { background-color: var(--spice-notification-error); } /* friend activity */ @@ -398,7 +402,7 @@ path[d="M23 0C10.298 0 0 10.297 0 23c0 12.702 10.298 23 23 23 12.703 0 23-10.298 max-width: 190px; } /* settings */ -.main-dropDown-dropDown , option { +.main-dropDown-dropDown, option { background-color: var(--spice-card) !important; } .main-dropDown-dropDown { @@ -424,7 +428,7 @@ input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper { border-color: var(--spice-button-active); } /* device menu */ -._9eb5acf729a98d62135ca21777fef244-scss { +._9eb5acf729a98d62135ca21777fef244-scss, .connect-device-button { color: var(--spice-shadow); } .connect-device-list-container { @@ -442,11 +446,19 @@ input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper { .connect-device-list-item:focus, .connect-device-list-item:hover { background-color: rgba(var(--spice-rgb-selected-row),0.05); } +.connect-header { + background-color: var(--spice-shadow); + margin: 8px; + border-radius: var(--border-radius-1); +} /* player */ +.progress-bar { + --fg-color: var(--spice-button-active); +} .now-playing-bar .cover-art-image { border-radius: var(--border-radius-2); } -.playback-bar__progress-time { +.playback-bar__progress-time, .main-playbackBarRemainingTime-container { position: absolute; bottom: -48px; right: 250px; @@ -475,7 +487,7 @@ input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper { .volume-bar { margin-right: 8px; } -.main-playPauseButton-button, .player-controls__buttons > button:not(.main-playPauseButton-button) { +.main-playPauseButton-button, .player-controls__buttons button:not(.main-playPauseButton-button) { --button-size: 48px !important; } .main-shuffleButton-button.main-shuffleButton-on:after, .main-repeatButton-button.main-repeatButton-on:after { @@ -499,6 +511,9 @@ input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper { bottom: 83px; position: absolute; } +.now-playing-bar-container>div:first-child:nth-last-child(2) .playback-bar, .main-nowPlayingBar-container>div:first-child:nth-last-child(2) .playback-bar { + bottom: 107px; +} .playback-bar .progress-bar__bg, .playback-bar .progress-bar__fg_wrapper, .playback-bar .progress-bar__fg { border-radius: 0; height: 6px;