diff --git a/SharkBlue/screenshot.png b/SharkBlue/screenshot.png index c99858f..c9b2034 100644 Binary files a/SharkBlue/screenshot.png and b/SharkBlue/screenshot.png differ diff --git a/SharkBlue/user.css b/SharkBlue/user.css index 0086690..bfbe5c5 100644 --- a/SharkBlue/user.css +++ b/SharkBlue/user.css @@ -1,257 +1,289 @@ /* Round Now Playing Bar */ - -:root{ - --border-radius-1: 8px; - /* Play Bar */ - --margin-bottom-now-playing-bar: 0.5rem; - --now-playing-bar-height: 5.625rem; - --padding-now-playing-bar: 0.25rem; - --border-radius-now-playing-bar: 0.5rem; -} -.Root__now-playing-bar, .Root__now-playing-bar footer { - border-radius: var(--border-radius-1) !important; +:root { + --border-radius-1: 8px; + /* Play Bar */ + --margin-bottom-now-playing-bar: 0.5rem; + --now-playing-bar-height: 5.625rem; + --padding-now-playing-bar: 0.25rem; + --border-radius-now-playing-bar: 0.5rem; +} +.Root__now-playing-bar, +.Root__now-playing-bar footer { + border-radius: var(--border-radius-1) !important; +} +#main::after { + content: ""; /* Empty content */ + position: fixed; /* Fix element to viewport */ + top: 0; + right: 0; + z-index: 999; /* Position above all other content */ + -webkit-backdrop-filter: brightness( + 2.12 + ); /* Apply brightness filter to background */ + backdrop-filter: brightness(2.12); /* Cross-browser brightness filter */ + /* Page zoom control */ + /* Adjust width and height based on zoom level */ + width: 135px; + height: 40px; } /* Page titles */ h1 { - font-weight: 700 !important; + font-weight: 700 !important; } /* Song name in player */ .main-nowPlayingWidget-nowPlaying .main-trackInfo-name { - overflow: unset; - font-size: 20px !important; + overflow: unset; + font-size: 20px !important; } /* Artist name in player */ .main-nowPlayingWidget-nowPlaying .main-trackInfo-artists { - overflow: unset; - font-size: 15px; + overflow: unset; + font-size: 15px; } .main-type-finale { - line-height: 17px; + line-height: 17px; } /* Icons */ .main-trackList-rowPlayPauseIcon { - transform: scale(1.3); + transform: scale(1.3); } .x-downloadButton-button svg { - height: 32px; - width: 32px; + height: 32px; + width: 32px; } /* Progress and remaining time */ .main-playbackBarRemainingTime-container, .playback-bar__progress-time-elapsed, .playback-bar__progress-time { - font-size: 15px; - margin-left: 5px; - margin-right: 5px; + font-size: 15px; + margin-left: 5px; + margin-right: 5px; } /* Player play button */ .main-playPauseButton-button { - background-color: unset; - color: var(--spice-subtext); + background-color: unset; + color: var(--spice-subtext); } .main-playPauseButton-button svg { - height: 28px; - width: 28px; + height: 28px; + width: 28px; } /* Progress bar */ .progress-bar { - --fg-color: var(--spice-button); + --fg-color: var(--spice-button); } .progress-bar__bg, .progress-bar__fg, .progress-bar__fg_wrapper { - height: 5px; + height: 5px; } .progress-bar-wrapper { - margin-left: 5px; - margin-right: 5px; + margin-left: 5px; + margin-right: 5px; } /* Extra controls */ .control-button::before { - font-size: 20px; + font-size: 20px; } .ExtraControls svg { - height: 20px; - width: 20px; + height: 20px; + width: 20px; } /* Removing gradients */ .main-entityHeader-backgroundColor, .main-actionBarBackground-background { - background-color: unset !important; - background-image: none; + 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); -} + -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; + background-color: #3a3d42 !important; } /* Playing icon */ .main-trackList-playingIcon { - filter: saturate(0%); + filter: saturate(0%); } /* Playlist like button */ .main-actionBar-ActionBarRow .main-addButton-button .Svg-ulyrgf-0 { - height: unset; - width: unset; + height: unset; + width: unset; } /* Order button */ .x-sortBox-sortDropdown { - margin-top: 3px; + margin-top: 3px; } /* Sidebar playlists menu */ .main-rootlist-rootlistDividerGradient { - background: unset; + background: unset; } .main-rootlist-rootlistDivider { - background-color: var(--spice-button); + background-color: var(--spice-button); } /* Search box */ .x-searchInput-searchInputInput { - font-size: 18px; + font-size: 18px; } /* Aritsts names */ .main-type-mesto { - font-size: 16px; - line-height: 20px; + font-size: 16px; + line-height: 20px; } /* Songs names */ .main-type-ballad { - font-size: 18px; + font-size: 18px; } /* Cards descriptions */ .main-cardSubHeader-root { - overflow: hidden !important; + overflow: hidden !important; } /* Ad title */ .desktoproutes-homepage-takeover-ad-hptoNativeOriginal-header { - font-weight: 700 !important; + font-weight: 700 !important; } /* Friends names */ .main-buddyFeed-username a { - color: var(--spice-text) !important; - font-size: 17px; - font-weight: 500; + 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; + font-size: 13px; } /* Cover height */ .main-coverSlotExpanded-container { - height: var(--nav-bar-width) + 8px; + height: var(--nav-bar-width) + 8px; } /* Scrollbars */ .os-scrollbar-handle { - background: var(--spice-button) !important; - border-radius: 8px; + background: var(--spice-button) !important; + border-radius: 8px; } /* Make Scrollbar look better */ -.os-theme-spotify.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle { - border-radius: 8px; width: 4px; background-color: var(--spice-button-disabled); -} -.os-theme-spotify.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track { - width: 4px; +.os-theme-spotify.os-host-transition + > .os-scrollbar-vertical + > .os-scrollbar-track + > .os-scrollbar-handle { + border-radius: 8px; + width: 4px; + background-color: var(--spice-button-disabled); +} +.os-theme-spotify.os-host-transition + > .os-scrollbar-vertical + > .os-scrollbar-track { + width: 4px; } /* 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; +.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); + background-color: var(--spice-button-disabled); } /* Facebook button */ .x-settings-facebookButton { - background-color: unset !important; + background-color: unset !important; } /* Playlist play button color */ .encore-dark-theme .encore-bright-accent-set, .encore-dark-theme .encore-bright-accent-set:hover { - --background-base: var(--spice-button-active); - --background-highlight: var(--spice-play-hover); - --background-press: var(--spice-play-hover); + --background-base: var(--spice-button-active); + --background-highlight: var(--spice-play-hover); + --background-press: var(--spice-play-hover); } /* Player bar */ .main-nowPlayingBar-container { - justify-content: center; - height: var(--now-playing-bar-height); - width: 100%; - border-radius: var(--border-radius-now-playing-bar); - padding: var(--padding-now-playing-bar); - bottom: var(--margin-bottom-now-playing-bar); - border: var(--default-border-thickness) solid var(--shadow-rgb); - background-color: rgba(var(--spice-rgb-main)); - backdrop-filter: blur(var(--blur-radius)) saturate(0.5) brightness(100%); + justify-content: center; + height: var(--now-playing-bar-height); + width: 100%; + border-radius: var(--border-radius-now-playing-bar); + padding: var(--padding-now-playing-bar); + bottom: var(--margin-bottom-now-playing-bar); + border: var(--default-border-thickness) solid var(--shadow-rgb); + background-color: rgba(var(--spice-rgb-main)); + backdrop-filter: blur(var(--blur-radius)) saturate(0.5) brightness(100%); } - + .main-nowPlayingBar-container .GlueDropTarget, .main-coverSlotCollapsed-container { - max-height: 56px; - max-width: 56px; + max-height: 56px; + max-width: 56px; } /**** ROUND IMAGES ****/ /* Expanded Cover Art Image (+ position fix) */ .main-navBar-navBar > :nth-child(3) { - margin: 0 0 0 1px; - border-radius: 6px; - } - - /* Collapsed Cover Art Image */ - .cover-art-image, - .artist-artistOverview-sideBlock > div > section > div:nth-child(3) > section:nth-child(2) > div > img, - .view-homeShortcutsGrid-image { - border-radius: 4px; - } - - /* + margin: 0 0 0 1px; + border-radius: 6px; +} + +/* Collapsed Cover Art Image */ +.cover-art-image, +.artist-artistOverview-sideBlock + > div + > section + > div:nth-child(3) + > section:nth-child(2) + > div + > img, +.view-homeShortcutsGrid-image { + border-radius: 4px; +} + +/* Playlist Header Search Category Card Image List Cards @@ -259,55 +291,52 @@ highlights selected song contains multi-digit song numbers */ Placeholder Profile Card Artist Overview Side Block */ - .main-entityHeader-shadow, - .x-categoryCard-image, - .x-entityImage-circle, - .main-cardImage-image, - .main-cardImage-imageWrapper, - .main-entityHeader-imagePlaceholder > div, - .artist-artistOverview-sideBlock > div > section { - border-radius: 6px; - } - - /* Circled Artist + Profile Cards (force) */ - .main-cardImage-circular, - .main-entityHeader-imagePlaceholder, - .main-entityHeader-circle { - border-radius: 50% !important; - } - - /* Track List Image */ - .main-trackList-rowImage { - border-radius: 3px; - } +.main-entityHeader-shadow, +.x-categoryCard-image, +.x-entityImage-circle, +.main-cardImage-image, +.main-cardImage-imageWrapper, +.main-entityHeader-imagePlaceholder > div, +.artist-artistOverview-sideBlock > div > section { + border-radius: 6px; +} +/* Circled Artist + Profile Cards (force) */ +.main-cardImage-circular, +.main-entityHeader-imagePlaceholder, +.main-entityHeader-circle { + border-radius: 50% !important; +} + +/* Track List Image */ +.main-trackList-rowImage { + border-radius: 3px; +} /* Home gradient */ -.main-home-homeHeader { - background-color: rgba(var(--spice-rgb-button)) !important; +.main-home-homeHeader { + background-color: rgba(var(--spice-rgb-button)) !important; } /* Volume bar margins */ .volume-bar .progress-bar { - margin: 0 0.4rem; + margin: 0 0.4rem; } .volume-bar .playback-progressbar { - width: 70%; + width: 70%; } - .volume-bar { - flex: 0 150px; + flex: 0 150px; } - .ellipsis-one-line.main-type-mesto { - font-size: 14px; + font-size: 14px; } /* Removal of empty space above playlist cover and title on narrow viewports */ .main-entityHeader-container.main-entityHeader-nonWrapped { - min-height: 325px; - height: 15vh; + min-height: 325px; + height: 15vh; }