mirror of
https://github.com/morpheusthewhite/spicetify-themes.git
synced 2024-11-21 18:32:45 +01:00
chore(SharkBlue): format code better, update screenshots (#1110)
This commit is contained in:
MrBiscuit
GitHub
parent
b47dde8748
commit
a718801986
Binary file not shown.
|
Before Width: | Height: | Size: 222 KiB After Width: | Height: | Size: 450 KiB |
@ -1,257 +1,289 @@
|
|||||||
/* Round Now Playing Bar */
|
/* Round Now Playing Bar */
|
||||||
|
:root {
|
||||||
:root{
|
--border-radius-1: 8px;
|
||||||
--border-radius-1: 8px;
|
/* Play Bar */
|
||||||
/* Play Bar */
|
--margin-bottom-now-playing-bar: 0.5rem;
|
||||||
--margin-bottom-now-playing-bar: 0.5rem;
|
--now-playing-bar-height: 5.625rem;
|
||||||
--now-playing-bar-height: 5.625rem;
|
--padding-now-playing-bar: 0.25rem;
|
||||||
--padding-now-playing-bar: 0.25rem;
|
--border-radius-now-playing-bar: 0.5rem;
|
||||||
--border-radius-now-playing-bar: 0.5rem;
|
}
|
||||||
}
|
.Root__now-playing-bar,
|
||||||
.Root__now-playing-bar, .Root__now-playing-bar footer {
|
.Root__now-playing-bar footer {
|
||||||
border-radius: var(--border-radius-1) !important;
|
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 */
|
/* Page titles */
|
||||||
h1 {
|
h1 {
|
||||||
font-weight: 700 !important;
|
font-weight: 700 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Song name in player */
|
/* Song name in player */
|
||||||
.main-nowPlayingWidget-nowPlaying .main-trackInfo-name {
|
.main-nowPlayingWidget-nowPlaying .main-trackInfo-name {
|
||||||
overflow: unset;
|
overflow: unset;
|
||||||
font-size: 20px !important;
|
font-size: 20px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Artist name in player */
|
/* Artist name in player */
|
||||||
.main-nowPlayingWidget-nowPlaying .main-trackInfo-artists {
|
.main-nowPlayingWidget-nowPlaying .main-trackInfo-artists {
|
||||||
overflow: unset;
|
overflow: unset;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-type-finale {
|
.main-type-finale {
|
||||||
line-height: 17px;
|
line-height: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Icons */
|
/* Icons */
|
||||||
.main-trackList-rowPlayPauseIcon {
|
.main-trackList-rowPlayPauseIcon {
|
||||||
transform: scale(1.3);
|
transform: scale(1.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.x-downloadButton-button svg {
|
.x-downloadButton-button svg {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Progress and remaining time */
|
/* Progress and remaining time */
|
||||||
.main-playbackBarRemainingTime-container,
|
.main-playbackBarRemainingTime-container,
|
||||||
.playback-bar__progress-time-elapsed,
|
.playback-bar__progress-time-elapsed,
|
||||||
.playback-bar__progress-time {
|
.playback-bar__progress-time {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Player play button */
|
/* Player play button */
|
||||||
.main-playPauseButton-button {
|
.main-playPauseButton-button {
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
color: var(--spice-subtext);
|
color: var(--spice-subtext);
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-playPauseButton-button svg {
|
.main-playPauseButton-button svg {
|
||||||
height: 28px;
|
height: 28px;
|
||||||
width: 28px;
|
width: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Progress bar */
|
/* Progress bar */
|
||||||
.progress-bar {
|
.progress-bar {
|
||||||
--fg-color: var(--spice-button);
|
--fg-color: var(--spice-button);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar__bg,
|
.progress-bar__bg,
|
||||||
.progress-bar__fg,
|
.progress-bar__fg,
|
||||||
.progress-bar__fg_wrapper {
|
.progress-bar__fg_wrapper {
|
||||||
height: 5px;
|
height: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar-wrapper {
|
.progress-bar-wrapper {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Extra controls */
|
/* Extra controls */
|
||||||
.control-button::before {
|
.control-button::before {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ExtraControls svg {
|
.ExtraControls svg {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Removing gradients */
|
/* Removing gradients */
|
||||||
.main-entityHeader-backgroundColor,
|
.main-entityHeader-backgroundColor,
|
||||||
.main-actionBarBackground-background {
|
.main-actionBarBackground-background {
|
||||||
background-color: unset !important;
|
background-color: unset !important;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Cover shadow */
|
/* Cover shadow */
|
||||||
.main-entityHeader-shadow {
|
.main-entityHeader-shadow {
|
||||||
-webkit-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);
|
box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Top bar */
|
/* Top bar */
|
||||||
.main-topBar-background {
|
.main-topBar-background {
|
||||||
background-color: #3a3d42 !important;
|
background-color: #3a3d42 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Playing icon */
|
/* Playing icon */
|
||||||
.main-trackList-playingIcon {
|
.main-trackList-playingIcon {
|
||||||
filter: saturate(0%);
|
filter: saturate(0%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Playlist like button */
|
/* Playlist like button */
|
||||||
.main-actionBar-ActionBarRow .main-addButton-button .Svg-ulyrgf-0 {
|
.main-actionBar-ActionBarRow .main-addButton-button .Svg-ulyrgf-0 {
|
||||||
height: unset;
|
height: unset;
|
||||||
width: unset;
|
width: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Order button */
|
/* Order button */
|
||||||
.x-sortBox-sortDropdown {
|
.x-sortBox-sortDropdown {
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sidebar playlists menu */
|
/* Sidebar playlists menu */
|
||||||
.main-rootlist-rootlistDividerGradient {
|
.main-rootlist-rootlistDividerGradient {
|
||||||
background: unset;
|
background: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-rootlist-rootlistDivider {
|
.main-rootlist-rootlistDivider {
|
||||||
background-color: var(--spice-button);
|
background-color: var(--spice-button);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Search box */
|
/* Search box */
|
||||||
.x-searchInput-searchInputInput {
|
.x-searchInput-searchInputInput {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Aritsts names */
|
/* Aritsts names */
|
||||||
.main-type-mesto {
|
.main-type-mesto {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Songs names */
|
/* Songs names */
|
||||||
.main-type-ballad {
|
.main-type-ballad {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Cards descriptions */
|
/* Cards descriptions */
|
||||||
.main-cardSubHeader-root {
|
.main-cardSubHeader-root {
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ad title */
|
/* Ad title */
|
||||||
.desktoproutes-homepage-takeover-ad-hptoNativeOriginal-header {
|
.desktoproutes-homepage-takeover-ad-hptoNativeOriginal-header {
|
||||||
font-weight: 700 !important;
|
font-weight: 700 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Friends names */
|
/* Friends names */
|
||||||
.main-buddyFeed-username a {
|
.main-buddyFeed-username a {
|
||||||
color: var(--spice-text) !important;
|
color: var(--spice-text) !important;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Friends songs and artists */
|
/* Friends songs and artists */
|
||||||
.main-buddyFeed-artistAndTrackName a,
|
.main-buddyFeed-artistAndTrackName a,
|
||||||
.main-buddyFeed-playbackContextLink span {
|
.main-buddyFeed-playbackContextLink span {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Cover height */
|
/* Cover height */
|
||||||
.main-coverSlotExpanded-container {
|
.main-coverSlotExpanded-container {
|
||||||
height: var(--nav-bar-width) + 8px;
|
height: var(--nav-bar-width) + 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scrollbars */
|
/* Scrollbars */
|
||||||
.os-scrollbar-handle {
|
.os-scrollbar-handle {
|
||||||
background: var(--spice-button) !important;
|
background: var(--spice-button) !important;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Make Scrollbar look better */
|
/* Make Scrollbar look better */
|
||||||
|
|
||||||
.os-theme-spotify.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
|
.os-theme-spotify.os-host-transition
|
||||||
border-radius: 8px; width: 4px; background-color: var(--spice-button-disabled);
|
> .os-scrollbar-vertical
|
||||||
}
|
> .os-scrollbar-track
|
||||||
.os-theme-spotify.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track {
|
> .os-scrollbar-handle {
|
||||||
width: 4px;
|
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
|
/* Making index column wider so that lighter background that
|
||||||
highlights selected song contains multi-digit song numbers */
|
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 ;) */
|
/* 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 {
|
.main-trackList-trackList.main-trackList-indexable
|
||||||
grid-template-columns: [index] 48px [first] 6fr [var1] 4fr [var2] 3fr [last] minmax(120px, 1fr) !important;
|
.main-trackList-trackListRowGrid {
|
||||||
|
grid-template-columns: [index] 48px [first] 6fr [var1] 4fr [var2] 3fr [last] minmax(
|
||||||
|
120px,
|
||||||
|
1fr
|
||||||
|
) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Text boxes in settings */
|
/* Text boxes in settings */
|
||||||
.main-dropDown-dropDown {
|
.main-dropDown-dropDown {
|
||||||
background-color: var(--spice-button-disabled);
|
background-color: var(--spice-button-disabled);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Facebook button */
|
/* Facebook button */
|
||||||
.x-settings-facebookButton {
|
.x-settings-facebookButton {
|
||||||
background-color: unset !important;
|
background-color: unset !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Playlist play button color */
|
/* Playlist play button color */
|
||||||
.encore-dark-theme .encore-bright-accent-set,
|
.encore-dark-theme .encore-bright-accent-set,
|
||||||
.encore-dark-theme .encore-bright-accent-set:hover {
|
.encore-dark-theme .encore-bright-accent-set:hover {
|
||||||
--background-base: var(--spice-button-active);
|
--background-base: var(--spice-button-active);
|
||||||
--background-highlight: var(--spice-play-hover);
|
--background-highlight: var(--spice-play-hover);
|
||||||
--background-press: var(--spice-play-hover);
|
--background-press: var(--spice-play-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Player bar */
|
/* Player bar */
|
||||||
|
|
||||||
.main-nowPlayingBar-container {
|
.main-nowPlayingBar-container {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: var(--now-playing-bar-height);
|
height: var(--now-playing-bar-height);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: var(--border-radius-now-playing-bar);
|
border-radius: var(--border-radius-now-playing-bar);
|
||||||
padding: var(--padding-now-playing-bar);
|
padding: var(--padding-now-playing-bar);
|
||||||
bottom: var(--margin-bottom-now-playing-bar);
|
bottom: var(--margin-bottom-now-playing-bar);
|
||||||
border: var(--default-border-thickness) solid var(--shadow-rgb);
|
border: var(--default-border-thickness) solid var(--shadow-rgb);
|
||||||
background-color: rgba(var(--spice-rgb-main));
|
background-color: rgba(var(--spice-rgb-main));
|
||||||
backdrop-filter: blur(var(--blur-radius)) saturate(0.5) brightness(100%);
|
backdrop-filter: blur(var(--blur-radius)) saturate(0.5) brightness(100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-nowPlayingBar-container .GlueDropTarget,
|
.main-nowPlayingBar-container .GlueDropTarget,
|
||||||
.main-coverSlotCollapsed-container {
|
.main-coverSlotCollapsed-container {
|
||||||
max-height: 56px;
|
max-height: 56px;
|
||||||
max-width: 56px;
|
max-width: 56px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**** ROUND IMAGES ****/
|
/**** ROUND IMAGES ****/
|
||||||
|
|
||||||
/* Expanded Cover Art Image (+ position fix) */
|
/* Expanded Cover Art Image (+ position fix) */
|
||||||
.main-navBar-navBar > :nth-child(3) {
|
.main-navBar-navBar > :nth-child(3) {
|
||||||
margin: 0 0 0 1px;
|
margin: 0 0 0 1px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Collapsed Cover Art Image */
|
/* Collapsed Cover Art Image */
|
||||||
.cover-art-image,
|
.cover-art-image,
|
||||||
.artist-artistOverview-sideBlock > div > section > div:nth-child(3) > section:nth-child(2) > div > img,
|
.artist-artistOverview-sideBlock
|
||||||
.view-homeShortcutsGrid-image {
|
> div
|
||||||
border-radius: 4px;
|
> section
|
||||||
}
|
> div:nth-child(3)
|
||||||
|
> section:nth-child(2)
|
||||||
/*
|
> div
|
||||||
|
> img,
|
||||||
|
.view-homeShortcutsGrid-image {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
Playlist Header
|
Playlist Header
|
||||||
Search Category Card Image
|
Search Category Card Image
|
||||||
List Cards
|
List Cards
|
||||||
@ -259,55 +291,52 @@ highlights selected song contains multi-digit song numbers */
|
|||||||
Placeholder Profile Card
|
Placeholder Profile Card
|
||||||
Artist Overview Side Block
|
Artist Overview Side Block
|
||||||
*/
|
*/
|
||||||
.main-entityHeader-shadow,
|
.main-entityHeader-shadow,
|
||||||
.x-categoryCard-image,
|
.x-categoryCard-image,
|
||||||
.x-entityImage-circle,
|
.x-entityImage-circle,
|
||||||
.main-cardImage-image,
|
.main-cardImage-image,
|
||||||
.main-cardImage-imageWrapper,
|
.main-cardImage-imageWrapper,
|
||||||
.main-entityHeader-imagePlaceholder > div,
|
.main-entityHeader-imagePlaceholder > div,
|
||||||
.artist-artistOverview-sideBlock > div > section {
|
.artist-artistOverview-sideBlock > div > section {
|
||||||
border-radius: 6px;
|
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
/* 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 */
|
/* Home gradient */
|
||||||
.main-home-homeHeader {
|
.main-home-homeHeader {
|
||||||
background-color: rgba(var(--spice-rgb-button)) !important;
|
background-color: rgba(var(--spice-rgb-button)) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Volume bar margins */
|
/* Volume bar margins */
|
||||||
.volume-bar .progress-bar {
|
.volume-bar .progress-bar {
|
||||||
margin: 0 0.4rem;
|
margin: 0 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.volume-bar .playback-progressbar {
|
.volume-bar .playback-progressbar {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.volume-bar {
|
.volume-bar {
|
||||||
flex: 0 150px;
|
flex: 0 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.ellipsis-one-line.main-type-mesto {
|
.ellipsis-one-line.main-type-mesto {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Removal of empty space above playlist cover and title on narrow viewports */
|
/* Removal of empty space above playlist cover and title on narrow viewports */
|
||||||
.main-entityHeader-container.main-entityHeader-nonWrapped {
|
.main-entityHeader-container.main-entityHeader-nonWrapped {
|
||||||
min-height: 325px;
|
min-height: 325px;
|
||||||
height: 15vh;
|
height: 15vh;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user