mirror of
https://github.com/morpheusthewhite/spicetify-themes.git
synced 2024-11-22 02:42:54 +01:00
925 lines
25 KiB
CSS
925 lines
25 KiB
CSS
:root {
|
|
--corner-radius: 10px;
|
|
--bar-cover-art-size: 40px;
|
|
--scrollbar-vertical-size: 10px;
|
|
--scrollbar-horizontal-size: 10px;
|
|
--bar-height: 90px;
|
|
--main-gap: 10px;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Google Sans Display";
|
|
src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2") format("woff2");
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Google Sans Display";
|
|
src: url("glue-resources/fonts/GoogleSansDisplayMedium.woff2") format("woff2");
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto";
|
|
src: url("glue-resources/fonts/Roboto.woff2") format("woff2");
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto";
|
|
src: url("glue-resources/fonts/RobotoMedium.woff2") format("woff2");
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
}
|
|
|
|
body {
|
|
--glue-font-family: "Google Sans Display", "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew,
|
|
Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
|
|
--info-font-family: "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica,
|
|
arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
|
|
font-family: var(--glue-font-family);
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
.global-nav .Root__top-container {
|
|
grid-template-areas: "global-nav global-nav global-nav"
|
|
"left-sidebar main-view right-sidebar"
|
|
"left-sidebar now-playing-bar now-playing-bar" !important;
|
|
}
|
|
|
|
.Root__top-container {
|
|
grid-template-areas:
|
|
"left-sidebar main-view right-sidebar"
|
|
"left-sidebar now-playing-bar right-sidebar" !important;
|
|
gap: 0;
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.global-nav #Desktop_PanelContainer_Id {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.Root__now-playing-bar {
|
|
background-color: var(--spice-player);
|
|
border-radius: 0 0 var(--corner-radius) var(--corner-radius) !important;
|
|
grid-area: now-playing-bar !important;
|
|
}
|
|
|
|
.Root__globalNav {
|
|
background-color: var(--spice-main) !important;
|
|
border-radius: var(--corner-radius) var(--corner-radius) 0 0 !important;
|
|
margin-left: calc(var(--left-sidebar-width) * 1px);
|
|
}
|
|
|
|
.Root__globalNav .main-globalNav-historyButtonsContainer,
|
|
.Root__globalNav .main-globalNav-searchSection,
|
|
.Root__globalNav .main-topBar-topbarContentRight {
|
|
-webkit-transform: scale(0.75);
|
|
transform: scale(0.75);
|
|
}
|
|
|
|
.main-home-filterChipsSection {
|
|
background-color: var(--spice-main) !important;
|
|
}
|
|
|
|
.global-nav .Root__main-view {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.Root__main-view {
|
|
border-radius: var(--corner-radius) var(--corner-radius) 0 0 !important;
|
|
grid-area: main-view !important;
|
|
}
|
|
|
|
.legacy .Root__top-container:not(:has(> .Root__right-sidebar)) {
|
|
padding-right: var(--main-gap);
|
|
}
|
|
|
|
.ylx .Root__top-container:not(:has(> .Root__right-sidebar > aside)) {
|
|
padding-right: var(--main-gap);
|
|
}
|
|
|
|
.Root__right-sidebar:not(:has(> aside)) {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.Root__nav-bar {
|
|
grid-area: left-sidebar !important;
|
|
}
|
|
|
|
/* move the progress bar to the top */
|
|
.playback-bar {
|
|
position: absolute;
|
|
left: 0;
|
|
top: -5px;
|
|
}
|
|
|
|
.main-nowPlayingBar-nowPlayingBar {
|
|
position: relative;
|
|
padding-inline-end: 16px !important;
|
|
}
|
|
|
|
.progress-bar {
|
|
--progress-bar-height: 2px;
|
|
--progress-bar-radius: 0;
|
|
--fg-color: var(--spice-button);
|
|
--bg-color: rgba(var(--spice-rgb-text), 0.2);
|
|
}
|
|
|
|
/* add gradient to player bar */
|
|
.main-nowPlayingBar-container {
|
|
background-color: unset;
|
|
background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%) !important;
|
|
border-radius: 0 0 var(--corner-radius) var(--corner-radius) !important;
|
|
border-top: 0;
|
|
min-width: 518px;
|
|
}
|
|
|
|
/* rearrange player bar */
|
|
.main-nowPlayingBar-left {
|
|
order: 1;
|
|
flex: 1;
|
|
width: auto;
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
.main-nowPlayingBar-center {
|
|
order: 0;
|
|
flex: 1;
|
|
width: auto;
|
|
min-width: unset !important;
|
|
}
|
|
|
|
.main-nowPlayingBar-right {
|
|
order: 2;
|
|
flex: 1;
|
|
width: auto;
|
|
min-width: unset !important;
|
|
}
|
|
|
|
/* hide time elapsed */
|
|
.main-playbackBarRemainingTime-container,
|
|
.playback-bar__progress-time-elapsed {
|
|
display: none;
|
|
}
|
|
|
|
/* custom dynamic prog tooltip */
|
|
.playback-bar .prog-tooltip {
|
|
position: absolute;
|
|
min-width: 100px;
|
|
width: unset;
|
|
height: 25px;
|
|
top: -35px;
|
|
padding: 0 5px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
color: var(--spice-text);
|
|
background-color: var(--spice-button);
|
|
opacity: 0;
|
|
transition: opacity 0.2s linear, left 0.2s linear;
|
|
}
|
|
|
|
.playback-bar:hover .prog-tooltip {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* customise player controls buttons */
|
|
.player-controls__buttons {
|
|
position: relative;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.main-shuffleButton-button {
|
|
position: absolute;
|
|
left: 200px;
|
|
}
|
|
|
|
.main-skipForwardButton-button,
|
|
.main-repeatButton-button,
|
|
.main-skipBackButton-button,
|
|
.main-shuffleButton-button {
|
|
color: var(--spice-text);
|
|
}
|
|
|
|
.player-controls__left,
|
|
.player-controls__right {
|
|
gap: 16px;
|
|
flex: 0;
|
|
}
|
|
|
|
.player-controls__right svg,
|
|
.player-controls__left svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
/* customise play button */
|
|
.main-playPauseButton-button {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.main-playPauseButton-button svg {
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
color: var(--spice-button);
|
|
}
|
|
|
|
/* customise right side player buttons */
|
|
.control-button {
|
|
color: var(--spice-text);
|
|
}
|
|
|
|
.main-genericButton-button {
|
|
color: var(--spice-text);
|
|
}
|
|
|
|
/* customise cards hover play button */
|
|
.main-card-PlayButtonContainer .ButtonInner-medium-iconOnly {
|
|
background-color: var(--background-base);
|
|
color: var(--spice-text);
|
|
}
|
|
|
|
/* top welcome box viz. good morning */
|
|
.view-homeShortcutsGrid-PlayButtonContainer .ButtonInner-small-iconOnly,
|
|
.view-homeShortcutsGrid-PlayButtonContainer .ButtonInner-medium-iconOnly,
|
|
.view-homeShortcutsGrid-PlayButtonContainer .ButtonInner-large-iconOnly {
|
|
background-color: var(--background-base);
|
|
color: var(--spice-text);
|
|
}
|
|
|
|
/* top bar sponsored ads */
|
|
.Button-medium-buttonPrimary-useBrowserDefaultFocusStyle .ButtonInner-medium {
|
|
background-color: var(--background-base);
|
|
color: var(--spice-text);
|
|
}
|
|
|
|
|
|
/* customise player cover art */
|
|
.main-nowPlayingWidget-coverArt .cover-art {
|
|
width: var(--bar-cover-art-size) !important;
|
|
height: var(--bar-cover-art-size) !important;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.main-nowPlayingWidget-nowPlaying {
|
|
justify-content: center;
|
|
}
|
|
|
|
/* style navbar */
|
|
.main-navBar-mainNav {
|
|
gap: 0 !important;
|
|
}
|
|
|
|
.main-navBar-mainNav>div {
|
|
background-color: var(--spice-sidebar);
|
|
}
|
|
|
|
.main-yourLibraryX-navLink {
|
|
height: 48px;
|
|
}
|
|
|
|
/* change tab colours */
|
|
.main-navBar-mainNav .link-subtle,
|
|
.main-navBar-mainNav .link-subtle svg {
|
|
color: var(--spice-sidebar-text) !important;
|
|
}
|
|
|
|
/* give active nav tab a background */
|
|
.main-navBar-mainNav li:has(> .active) {
|
|
background-color: var(--spice-tab-active);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* align library button with other nav items */
|
|
.main-yourLibraryX-header {
|
|
padding-top: 4px !important;
|
|
}
|
|
|
|
.main-yourLibraryX-navItems {
|
|
padding-bottom: 0 !important;
|
|
padding: 8px;
|
|
}
|
|
|
|
.main-yourLibraryX-navItems li {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
/* remove built in scrolllist shadow */
|
|
.main-yourLibraryX-isScrolled {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* round playlist images */
|
|
.x-entityImage-imageContainer {
|
|
border-radius: 50% !important;
|
|
background-color: transparent;
|
|
width: 40px !important;
|
|
height: 40px !important;
|
|
align-self: center;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
li div:has(> .x-entityImage-imageContainer),
|
|
li div:has(> .main-yourLibraryX-rowCover) {
|
|
justify-content: center;
|
|
width: 48px;
|
|
}
|
|
|
|
/* folder items */
|
|
.x-entityImage-imagePlaceholder {
|
|
background-color: transparent;
|
|
color: var(--spice-sidebar-text);
|
|
}
|
|
|
|
/* local files item */
|
|
.main-yourLibraryX-rowCover {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.fRZRXRIV2YBCFLYgwDAr {
|
|
border-radius: 50% !important;
|
|
}
|
|
|
|
.fRZRXRIV2YBCFLYgwDAr>svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
/* remove hover effect */
|
|
li>div>div::after {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
li>div::after {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* give background to active playlist */
|
|
.BoxComponent-group-tinted-listRow-isInteractive-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px,
|
|
.BoxComponent-group-tinted-listRow-isInteractive-hasFocus-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px {
|
|
background-color: var(--spice-tab-active);
|
|
}
|
|
|
|
/* fix scrolllist item colours */
|
|
.main-navBar-mainNav li p {
|
|
color: var(--spice-sidebar-text) !important;
|
|
}
|
|
|
|
.main-navBar-mainNav li p svg {
|
|
fill: var(--spice-sidebar-text) !important;
|
|
}
|
|
|
|
.main-yourLibraryX-listRowIconWrapper {
|
|
fill: var(--spice-sidebar-text) !important;
|
|
}
|
|
|
|
/* reduce spacing between playlist name and subtitle */
|
|
.main-yourLibraryX-listRowSubtitle {
|
|
margin-top: -8px;
|
|
}
|
|
|
|
.main-yourLibraryX-collapseButton>button {
|
|
gap: 8px;
|
|
color: var(--spice-sidebar-text) !important;
|
|
}
|
|
|
|
/* expanded sidebar buttons */
|
|
.search-searchCategory-carouselButton {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.search-searchCategory-carouselButton:hover {
|
|
background-color: var(--spice-tab-active);
|
|
}
|
|
|
|
.search-searchCategory-carouselButton svg {
|
|
fill: var(--spice-sidebar-text) !important;
|
|
}
|
|
|
|
.main-yourLibraryX-iconOnly {
|
|
color: var(--spice-sidebar-text) !important;
|
|
}
|
|
|
|
.main-yourLibraryX-iconOnly:hover {
|
|
background-color: var(--spice-tab-active);
|
|
}
|
|
|
|
.main-yourLibraryX-filterArea>div>div:first-child button {
|
|
background-color: var(--spice-tab-active) !important;
|
|
}
|
|
|
|
.main-yourLibraryX-filterArea>div>div:first-child button>span {
|
|
background-color: var(--spice-tab-active) !important;
|
|
color: var(--spice-text) !important;
|
|
}
|
|
|
|
.main-yourLibraryX-libraryFilter .x-sortBox-sortDropdown,
|
|
.main-yourLibraryX-libraryFilter .x-filterBox-expandButton,
|
|
.main-yourLibraryX-libraryFilter .x-filterBox-searchIconContainer,
|
|
.main-yourLibraryX-libraryFilter .x-filterBox-filterInput,
|
|
.main-yourLibraryX-libraryFilter .x-filterBox-clearButton {
|
|
color: var(--spice-sidebar-text);
|
|
}
|
|
|
|
/* hide main view backgound gradient */
|
|
.main-entityHeader-backgroundColor,
|
|
.main-actionBarBackground-background,
|
|
.main-topBar-background,
|
|
.main-home-homeHeader {
|
|
background-color: var(--spice-main) !important;
|
|
background-image: none !important;
|
|
}
|
|
|
|
.main-topBar-background {
|
|
border-radius: var(--corner-radius);
|
|
}
|
|
|
|
.main-topBar-overlay,
|
|
.main-trackList-trackListHeader {
|
|
background-color: var(--spice-main) !important;
|
|
}
|
|
|
|
/* fix play button icon colour */
|
|
.main-playButton-PlayButton svg {
|
|
color: var(--spice-text);
|
|
}
|
|
|
|
/* fix playlist action bar buttons colour */
|
|
.main-actionBar-ActionBarRow button,
|
|
.main-actionBar-ActionBarRow svg:not(.main-playButton-PlayButton svg) {
|
|
color: rgba(var(--spice-rgb-text), 0.7);
|
|
}
|
|
|
|
.main-actionBar-ActionBarRow button:hover,
|
|
.main-actionBar-ActionBarRow button:hover svg:not(.main-playButton-PlayButton svg) {
|
|
color: var(--spice-text);
|
|
}
|
|
|
|
/* change playing icon from gif to svg */
|
|
.main-trackList-playingIcon {
|
|
-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-button);
|
|
content-visibility: hidden;
|
|
-webkit-mask-repeat: no-repeat;
|
|
}
|
|
|
|
/* full screen artists background */
|
|
.main-entityHeader-container.main-entityHeader-withBackgroundImage,
|
|
.main-entityHeader-background,
|
|
.main-entityHeader-background.main-entityHeader-overlay:after {
|
|
height: 100vh;
|
|
}
|
|
|
|
.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
|
|
font-size: 120px !important;
|
|
line-height: 120px !important;
|
|
}
|
|
|
|
.contentSpacing,
|
|
.artist-artistDiscography-headerContainer {
|
|
padding-left: 64px;
|
|
padding-right: 64px;
|
|
}
|
|
|
|
.artist-artistOverview-overview .main-entityHeader-headerText {
|
|
justify-content: center;
|
|
}
|
|
|
|
/* progress bar moves smoothly */
|
|
.x-progressBar-fillColor {
|
|
transition: transform 1s linear;
|
|
}
|
|
|
|
.progress-bar__slider {
|
|
transition: left 1s linear;
|
|
}
|
|
|
|
.playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .x-progressBar-fillColor,
|
|
.playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .progress-bar__slider {
|
|
transition: none;
|
|
}
|
|
|
|
/* right sidebar text */
|
|
.Root__right-sidebar {
|
|
--text-base: var(--spice-sidebar-text);
|
|
--background-tinted-base: var(--spice-tab-active);
|
|
}
|
|
|
|
.Root__right-sidebar a,
|
|
.Root__right-sidebar .main-trackInfo-artists a,
|
|
.artist-artistOnTour-timeAndVenue.artist-artistOnTour-condensed,
|
|
.Root__right-sidebar .main-nowPlayingView-creditsSource,
|
|
.Root__right-sidebar .main-nowPlayingView-playNextButton,
|
|
.Root__right-sidebar .main-nowPlayingView-playNext {
|
|
color: var(--spice-sidebar-text);
|
|
}
|
|
|
|
.main-nowPlayingView-content {
|
|
--text-subdued: var(--spice-sidebar-text);
|
|
}
|
|
|
|
/* add main backshadow */
|
|
#dribbblish-back-shadow {
|
|
z-index: 5;
|
|
grid-area: main-view / main-view / now-playing-bar / main-view;
|
|
box-shadow: 0 0 10px 3px #0000003b;
|
|
border-radius: var(--corner-radius);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* add fade effect to playlist scrolllist */
|
|
.os-viewport.os-viewport-native-scrollbars-invisible[fade="full"] {
|
|
-webkit-mask-image: linear-gradient(transparent 0%, black 10%, black 90%, transparent 100%);
|
|
mask-image: linear-gradient(transparent 0%, black 10%, black 90%, transparent 100%);
|
|
}
|
|
|
|
.os-viewport.os-viewport-native-scrollbars-invisible[fade="top"] {
|
|
-webkit-mask-image: linear-gradient(transparent 0%, black 10%);
|
|
mask-image: linear-gradient(transparent 0%, black 10%);
|
|
}
|
|
|
|
.os-viewport.os-viewport-native-scrollbars-invisible[fade="bottom"] {
|
|
-webkit-mask-image: linear-gradient(black 90%, transparent 100%);
|
|
mask-image: linear-gradient(black 90%, transparent 100%);
|
|
}
|
|
|
|
/* style input els */
|
|
input {
|
|
background-color: unset !important;
|
|
border-bottom: solid 1px var(--spice-text) !important;
|
|
border-radius: 0 !important;
|
|
padding: 6px 10px 6px 48px;
|
|
color: var(--spice-text) !important;
|
|
}
|
|
|
|
.Root__nav-bar input {
|
|
border-bottom: solid 1px var(--spice-sidebar-text) !important;
|
|
color: var(--spice-sidebar-text) !important;
|
|
}
|
|
|
|
.Root__nav-bar input::placeholder {
|
|
color: rgba(var(--spice-rgb-sidebar-text), 0.5) !important;
|
|
}
|
|
|
|
/* fix connect bar styles */
|
|
.main-connectBar-connectBar {
|
|
color: var(--spice-main) !important;
|
|
border-radius: 0 0 var(--corner-radius) var(--corner-radius);
|
|
}
|
|
|
|
/* topbar play button */
|
|
.main-topBar-topbarContent .main-playButton-PlayButton>button>span {
|
|
inline-size: 32px;
|
|
block-size: 32px;
|
|
min-block-size: auto;
|
|
}
|
|
|
|
.main-topBar-topbarContent .main-playButton-PlayButton svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.main-topBar-topbarContent .main-playButton-PlayButton>button>span>span {
|
|
position: initial;
|
|
height: 18px;
|
|
}
|
|
|
|
/* disable dynamic lyrics background */
|
|
.lyrics-lyrics-container {
|
|
--lyrics-color-inactive: rgba(var(--spice-rgb-text), 0.3) !important;
|
|
}
|
|
|
|
.lyrics-lyrics-background {
|
|
background-color: var(--spice-main);
|
|
}
|
|
|
|
/* v1.2.14 */
|
|
.main-yourLibraryX-libraryContainer.main-yourLibraryX-libraryIsExpanded.main-yourLibraryX-libraryIsCollapsed,
|
|
.main-yourLibraryX-libraryRootlist.main-yourLibraryX-libraryIsExpanded:not(.main-yourLibraryX-libraryIsCollapsed) {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
[dir="ltr"] .main-nowPlayingWidget-coverExpanded {
|
|
transform: none;
|
|
}
|
|
|
|
.ylx .main-coverSlotExpanded-container {
|
|
bottom: calc(var(--main-gap) + 70px + 10px);
|
|
left: calc(var(--nav-bar-width) + 10px);
|
|
}
|
|
|
|
.ylx.connected .main-coverSlotExpanded-container {
|
|
bottom: calc(var(--main-gap) + 70px + 24px + 10px);
|
|
}
|
|
|
|
/* v1.2.12 -> 1.2.13 */
|
|
.main-buddyFeed-container {
|
|
background-color: inherit;
|
|
box-shadow: none;
|
|
overflow: initial;
|
|
}
|
|
|
|
.legacy-gridChange .main-coverSlotExpanded-container {
|
|
left: calc(var(--nav-bar-width) + 10px);
|
|
}
|
|
|
|
/* v1.2.0 --> 1.2.11 */
|
|
.legacy .Root__top-container {
|
|
grid-template-areas:
|
|
"left-sidebar top-bar right-sidebar"
|
|
"left-sidebar main-view right-sidebar"
|
|
"left-sidebar now-playing-bar right-sidebar" !important;
|
|
}
|
|
|
|
.Root__top-container {
|
|
padding: 10px 0;
|
|
background-color: var(--spice-sidebar);
|
|
}
|
|
|
|
.Root__right-sidebar {
|
|
background-color: var(--spice-sidebar);
|
|
}
|
|
|
|
.Root__main-view {
|
|
background-color: var(--spice-main);
|
|
}
|
|
|
|
.main-rootlist-rootlistDivider {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.main-buddyFeed-activityMetadata .main-buddyFeed-username a,
|
|
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
|
|
.main-buddyFeed-activityMetadata .main-buddyFeed-usernameAndTimestamp,
|
|
.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink {
|
|
color: var(--spice-sidebar-text) !important;
|
|
}
|
|
|
|
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName {
|
|
color: var(--spice-sidebar-text);
|
|
}
|
|
|
|
.collection-icon,
|
|
.premiumSpotifyIcon,
|
|
.search-icon {
|
|
color: var(--spice-sidebar-text) !important;
|
|
}
|
|
|
|
.main-confirmDialog-container {
|
|
background-color: var(--spice-card);
|
|
}
|
|
|
|
.main-confirmDialog-container .TypeElement-canon-textBase {
|
|
color: var(--spice-text);
|
|
}
|
|
|
|
.main-confirmDialog-buttonContainer button span {
|
|
color: var(--spice-card);
|
|
}
|
|
|
|
.main-coverSlotExpanded-container {
|
|
position: fixed;
|
|
z-index: 2;
|
|
width: 250px;
|
|
height: 250px;
|
|
bottom: calc(var(--main-gap) + var(--bar-height) + 10px);
|
|
left: calc(var(--nav-bar-width) + 20px);
|
|
}
|
|
|
|
.connected .main-coverSlotExpanded-container {
|
|
bottom: calc(var(--main-gap) + var(--bar-height) + 24px + 10px);
|
|
}
|
|
|
|
.left-sidebar-collapsed .main-coverSlotExpanded-container {
|
|
left: 82px;
|
|
}
|
|
|
|
.main-coverSlotExpanded-container img {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.cover-art {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.left-sidebar-collapsed .Root__nav-bar {
|
|
width: 72px;
|
|
}
|
|
|
|
.left-sidebar-collapsed .main-rootlist-statusIcons {
|
|
display: none;
|
|
}
|
|
|
|
.main-navBar-navBarLinkActive {
|
|
background-color: var(--spice-tab-active);
|
|
}
|
|
|
|
.Root__nav-bar .main-rootlist-rootlist .os-scrollbar-handle {
|
|
display: none;
|
|
}
|
|
|
|
.Root__top-container:has(> .Root__top-container--right-sidebar-hidden) {
|
|
padding-right: 10px;
|
|
}
|
|
|
|
/* buddy feed w/ hidden text*/
|
|
.buddyFeed-hide-text .Root__top-container:not(:has(> .Root__top-container--right-sidebar-hidden)) .Root__right-sidebar {
|
|
width: 72px !important;
|
|
}
|
|
|
|
.buddyFeed-hide-text .NdQkQZhcYIEcJnRdAYcQ,
|
|
.buddyFeed-hide-text .main-buddyFeed-header {
|
|
display: none;
|
|
}
|
|
|
|
.buddyFeed-hide-text .main-buddyFeed-friendActivity {
|
|
padding: 0 0 0 4px;
|
|
}
|
|
|
|
.buddyFeed-hide-text .main-buddyFeed-activityMetadata {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.buddyFeed-hide-text .main-avatar-avatar>div>div>div {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 7px;
|
|
}
|
|
|
|
.buddyFeed-hide-text .main-avatar-avatar,
|
|
.buddyFeed-hide-text .main-avatar-avatar div,
|
|
.buddyFeed-hide-text .main-buddyFeed-overlay {
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
}
|
|
|
|
.main-rootlist-rootlistDividerGradient {
|
|
background: none;
|
|
}
|
|
|
|
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,
|
|
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText {
|
|
opacity: 1;
|
|
}
|
|
|
|
.main-collectionLinkButton-collectionLinkButton,
|
|
.main-createPlaylistButton-button {
|
|
color: var(--spice-sidebar-text);
|
|
opacity: 1;
|
|
}
|
|
|
|
.main-likedSongsButton-likedSongsIcon {
|
|
background: none;
|
|
}
|
|
|
|
.main-likedSongsButton-likedSongsIcon>svg {
|
|
height: 20px !important;
|
|
width: 20px !important;
|
|
}
|
|
|
|
/* style added sidebar images */
|
|
.main-rootlist-rootlistItem a {
|
|
align-items: center;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
height: 56px;
|
|
gap: 12px;
|
|
}
|
|
|
|
img.playlist-picture {
|
|
width: 32px;
|
|
height: 32px;
|
|
flex: 0 0 32px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
img.playlist-picture[src$=".svg"] {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.legacy .Root__nav-bar .main-rootlist-wrapper,
|
|
.legacy-gridChange .Root__nav-bar .main-rootlist-wrapper {
|
|
height: fit-content !important;
|
|
contain: none !important;
|
|
}
|
|
|
|
.main-navBar-mainNav li:has(> div > .active) {
|
|
background-color: var(--spice-tab-active);
|
|
}
|
|
|
|
.main-collectionLinkButton-selected.active {
|
|
background-color: var(--spice-tab-active) !important;
|
|
}
|
|
|
|
.legacy .main-navBar-mainNav li,
|
|
.legacy-gridChange .main-navBar-mainNav li {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* a.active {
|
|
background-color: var(--spice-tab-active) !important;
|
|
} */
|
|
.main-rootlist-rootlistItem:has(> .main-rootlist-rootlistItemLinkActive) {
|
|
background-color: var(--spice-tab-active) !important;
|
|
}
|
|
|
|
.main-rootlist-rootlistItemLink {
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.main-rootlist-rootlistItem {
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
padding-left: 0 !important;
|
|
padding-right: 8px !important;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.dribs-playlist-list {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.left-sidebar-collapsed .main-rootlist-expandArrow {
|
|
display: none;
|
|
}
|
|
|
|
.main-navBar-navBarLink,
|
|
.main-collectionLinkButton-collectionLinkButton,
|
|
.main-createPlaylistButton-button {
|
|
height: 56px !important;
|
|
}
|
|
|
|
.Button-md-buttonSecondary-useBrowserDefaultFocusStyle {
|
|
border: 1px solid var(--spice-text);
|
|
}
|
|
|
|
.Button-md-buttonPrimary-useBrowserDefaultFocusStyle .ButtonInner-md {
|
|
color: var(--spice-text);
|
|
}
|
|
|
|
/* sidebar speaker icon */
|
|
.CCeu9OfWSwIAJqA49n84 {
|
|
color: var(--spice-sidebar-text);
|
|
}
|
|
|
|
.legacy .Root__right-sidebar .os-content {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.Root__right-sidebar .os-scrollbar-horizontal {
|
|
display: none;
|
|
}
|
|
|
|
.UyzJidwrGk3awngSGIwv,
|
|
.poz9gZKE7xqFwgk231J4,
|
|
.xWm_uA0Co4SXVxaO7wlB {
|
|
color: var(--spice-text);
|
|
}
|
|
|
|
.main-navBar-navBarLink {
|
|
color: var(--spice-sidebar-text);
|
|
}
|
|
|
|
.main-navBar-navBarLink:focus,
|
|
.main-navBar-navBarLink:hover {
|
|
color: var(--spice-sidebar-text);
|
|
}
|
|
|
|
.main-createPlaylistButton-createPlaylistIcon {
|
|
background-color: var(--spice-sidebar-text);
|
|
}
|
|
|
|
.main-rootlist-rootlistItemLink:link,
|
|
.main-rootlist-rootlistItemLink:visited {
|
|
color: var(--spice-sidebar-text) !important;
|
|
}
|
|
|
|
.main-rootlist-expandArrow {
|
|
color: var(--spice-sidebar-text);
|
|
}
|
|
|
|
.main-buddyFeed-actions button,
|
|
.main-buddyFeed-titleContainer {
|
|
color: var(--spice-sidebar-text) !important;
|
|
}
|
|
|
|
.main-tag-container {
|
|
background-color: var(--spice-subtext);
|
|
}
|
|
|
|
.main-buddyFeed-content {
|
|
height: 100%;
|
|
}
|
|
|
|
/* bottom scroll-bar popup fix */
|
|
.Root__main-view-overlay {
|
|
width: 100%;
|
|
} |