mirror of
https://github.com/morpheusthewhite/spicetify-themes.git
synced 2024-11-22 02:42:54 +01:00
733 lines
22 KiB
CSS
733 lines
22 KiB
CSS
/* ================================
|
|
USER-EDITABLE VARIABLES
|
|
================================ */
|
|
|
|
:root {
|
|
/* top bar vars */
|
|
--top-bar-padding-top: 45px;
|
|
--top-bar-padding-right: 20px;
|
|
--top-bar-padding-bottom: 5px;
|
|
--top-bar-padding-left: 20px;
|
|
--tab-border-radius: 6px;
|
|
--user-widget-name-display: none; /* block | none */
|
|
--top-bar-border-width: 2px;
|
|
|
|
/* sidebar vars */
|
|
--sidebar-button-border-radius: 4px;
|
|
--sidebar-border-width: 2px;
|
|
|
|
/* player vars */
|
|
--player-height: 90px;
|
|
--player-padding: 0 20px;
|
|
--player-border-width: 2px;
|
|
|
|
/* scrollbar vars */
|
|
--scrollbar-border-radius: 4px;
|
|
--scrollbar-width: 6px;
|
|
--scrollbar-width-hover: 6px;
|
|
}
|
|
|
|
/* ================================
|
|
TOPBAR
|
|
================================ */
|
|
|
|
.Root__top-container {
|
|
/* rearrange grid layout */
|
|
grid-template-areas:
|
|
"top-bar top-bar top-bar"
|
|
"left-sidebar main-view right-sidebar"
|
|
"now-playing-bar now-playing-bar now-playing-bar";
|
|
grid-template-rows: auto 1fr auto;
|
|
}
|
|
.Root__top-bar {
|
|
/* customize top bar colors & fixes */
|
|
grid-area: top-bar !important;
|
|
height: auto;
|
|
border-bottom: var(--top-bar-border-width) solid var(--spice-topbar-border);
|
|
}
|
|
.Root__nav-bar {
|
|
/* support layout of older verions */
|
|
grid-area: left-sidebar !important;
|
|
}
|
|
.Root__right-sidebar {
|
|
/* support layout of older verions */
|
|
grid-area: right-sidebar !important;
|
|
}
|
|
.Root__now-playing-bar {
|
|
/* support layout of older verions */
|
|
grid-area: now-playing-bar !important;
|
|
}
|
|
.Root__top-bar:empty {
|
|
/* make top bar the same height in lyrics page */
|
|
padding-top: calc(
|
|
var(--top-bar-padding-top) + 40px + var(--top-bar-padding-bottom)
|
|
);
|
|
}
|
|
.body-drag-top {
|
|
/* make whole top bar draggable */
|
|
height: calc(
|
|
var(--top-bar-padding-top) + 40px + var(--top-bar-padding-bottom)
|
|
) !important;
|
|
}
|
|
.main-topBar-container {
|
|
/* customize top bar padding */
|
|
margin-top: var(--top-bar-padding-top);
|
|
margin-right: var(--top-bar-padding-right);
|
|
margin-bottom: var(--top-bar-padding-bottom);
|
|
margin-left: var(--top-bar-padding-left);
|
|
padding: unset !important;
|
|
height: 40px;
|
|
width: auto;
|
|
}
|
|
.spotify__container--is-desktop.spotify__os--is-windows .main-topBar-container {
|
|
/* remove user widget padding for windows */
|
|
-webkit-padding-end: unset !important;
|
|
padding-inline-end: unset !important;
|
|
-webkit-padding-start: unset !important;
|
|
padding-inline-start: unset !important;
|
|
}
|
|
.main-topBar-background {
|
|
/* remove background upon scrolling */
|
|
opacity: 0 !important;
|
|
}
|
|
.queue-tabBar-active {
|
|
/* customize active tab */
|
|
border-radius: var(--tab-border-radius);
|
|
}
|
|
.main-userWidget-displayName,
|
|
.main-userWidget-chevron {
|
|
/* hide user widget name & dropdown arrow */
|
|
display: var(--user-widget-name-display) !important;
|
|
}
|
|
[dir="ltr"] .collection-collection-tabBar,
|
|
.queue-tabBar-nav {
|
|
/* remove tab bar left padding */
|
|
padding-left: 0;
|
|
padding-inline-start: 0;
|
|
}
|
|
.main-topBar-topbarContent {
|
|
/* add bigger gap between play button and name */
|
|
gap: 16px;
|
|
}
|
|
.x-searchInput-searchInputInput,
|
|
.x-filterBox-filterInput {
|
|
border-radius: var(--tab-border-radius);
|
|
}
|
|
|
|
/* ================================
|
|
NAVBAR / LEFT SIDEBAR
|
|
================================ */
|
|
|
|
.Root__nav-bar {
|
|
/* add border */
|
|
border-right: var(--sidebar-border-width) solid var(--spice-sidebar-border);
|
|
}
|
|
.main-navBar-navBar {
|
|
/* remove nav bar top padding */
|
|
padding-top: 0;
|
|
}
|
|
.LayoutResizer__resize-bar--resizing,
|
|
.LayoutResizer__resize-bar:focus-within,
|
|
.LayoutResizer__resize-bar:hover {
|
|
/* remove border on hovering layout resizer */
|
|
opacity: 0;
|
|
}
|
|
.LayoutResizer__resize-bar {
|
|
/* replace cursor on layout resize */
|
|
cursor: w-resize;
|
|
}
|
|
.main-rootlist-rootlist {
|
|
/* remove top margin */
|
|
margin-top: 0;
|
|
}
|
|
.main-rootlist-rootlistItemLink {
|
|
/* customize nav button */
|
|
padding: 0 16px;
|
|
border-radius: var(--sidebar-button-border-radius);
|
|
margin: 0 0 0 -14px;
|
|
}
|
|
.main-collectionLinkButton-collectionLinkButton.active {
|
|
margin: 0 8px;
|
|
border-radius: var(--sidebar-button-border-radius);
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
/* ================================
|
|
MAIN VIEW
|
|
================================ */
|
|
|
|
.main-view-container__scroll-node-child-spacer {
|
|
/* remove main view padding */
|
|
display: none;
|
|
}
|
|
.main-trackList-trackListHeader,
|
|
.search-searchCategory-SearchCategory,
|
|
.artist-artistDiscography-topBar {
|
|
/* fix track list header, search category, artist discography */
|
|
top: 0 !important;
|
|
height: auto;
|
|
}
|
|
.search-searchCategory-SearchCategory {
|
|
/* fix search category */
|
|
border-bottom: 1px solid rgba(var(--spice-rgb-selected-row), 0.1);
|
|
padding: 16px 0;
|
|
}
|
|
.search-searchCategory-catergoryGrid button[aria-checked="true"] span {
|
|
/* customize active search category */
|
|
border-radius: var(--tab-border-radius);
|
|
}
|
|
.main-trackList-trackListHeader,
|
|
.artist-artistDiscography-topBar {
|
|
/* fix track list header & artist discography */
|
|
padding: 16px 32px 0 32px;
|
|
}
|
|
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader,
|
|
.artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled {
|
|
/* fix tracklist header & artist discography */
|
|
box-shadow: none;
|
|
}
|
|
.search-recentSearches-searchPageGrid
|
|
.main-trackList-trackListHeader.main-trackList-trackListHeaderStuck {
|
|
/* fix tracklist header in search */
|
|
top: 64px !important;
|
|
}
|
|
.main-home-homeHeader,
|
|
.x-entityHeader-overlay,
|
|
.x-actionBarBackground-background,
|
|
.main-actionBarBackground-background,
|
|
.main-entityHeader-overlay,
|
|
.main-entityHeader-backgroundColor {
|
|
/* remove background gradient */
|
|
background-color: unset !important;
|
|
background-image: unset !important;
|
|
}
|
|
.main-rootlist-rootlistDividerGradient {
|
|
/* remove background gradient in home page and sidebar */
|
|
background: unset;
|
|
}
|
|
|
|
/* full window artist background */
|
|
.main-entityHeader-background.main-entityHeader-gradient {
|
|
opacity: 0.3 !important;
|
|
}
|
|
.main-entityHeader-container.main-entityHeader-withBackgroundImage,
|
|
.main-entityHeader-background,
|
|
.main-entityHeader-background.main-entityHeader-overlay:after {
|
|
height: 100vh;
|
|
}
|
|
.main-entityHeader-withBackgroundImage .main-entityHeader-headerText {
|
|
justify-content: center;
|
|
}
|
|
.main-entityHeader-container.main-entityHeader-nonWrapped.main-entityHeader-withBackgroundImage {
|
|
padding-left: 9%;
|
|
}
|
|
.main-entityHeader-background.main-entityHeader-overlay:after {
|
|
background-image: linear-gradient(transparent, transparent),
|
|
linear-gradient(var(--spice-main), var(--spice-main));
|
|
}
|
|
.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
|
|
font-size: 20vh !important;
|
|
line-height: 20vh !important;
|
|
}
|
|
/* cards */
|
|
.main-cardImage-imageWrapper {
|
|
background-color: transparent;
|
|
}
|
|
.main-rootlist-rootlistDivider {
|
|
background-color: unset;
|
|
}
|
|
.main-card-card {
|
|
background: none;
|
|
}
|
|
.main-cardImage-image {
|
|
border-radius: 12px;
|
|
}
|
|
.main-cardImage-imageWrapper,
|
|
.main-entityHeader-shadow {
|
|
/* remove drop shadows from images */
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
/* popup modal */
|
|
.main-trackCreditsModal-container {
|
|
background-color: var(--spice-main);
|
|
}
|
|
.main-trackCreditsModal-closeBtn svg path {
|
|
fill: var(--spice-subtext);
|
|
}
|
|
/* lyrics */
|
|
.lyrics-lyrics-background {
|
|
background-color: var(--spice-main);
|
|
}
|
|
.lyrics-lyrics-container.lyrics-lyrics-coverTopBar {
|
|
--lyrics-color-active: var(--spice-text) !important;
|
|
--lyrics-color-inactive: var(--spice-subtext) !important;
|
|
--lyrics-color-passed: var(--spice-subtext) !important;
|
|
--lyrics-color-messaging: var(--spice-subtext) !important;
|
|
}
|
|
.lyrics-lyricsContent-lyric {
|
|
opacity: 0.3;
|
|
}
|
|
.lyrics-lyricsContent-lyric.lyrics-lyricsContent-highlight {
|
|
opacity: 0.7;
|
|
}
|
|
.lyrics-lyricsContent-lyric.lyrics-lyricsContent-isInteractive.lyrics-lyricsContent-active {
|
|
text-shadow: 0 0 10px var(--lyrics-color-background),
|
|
-2px 1px 0 var(--spice-main), -3px 2px 0 var(--lyrics-color-background),
|
|
2px -1px 0 var(--spice-main), 3px -2px 0 var(--lyrics-color-background);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ================================
|
|
FRIEND ACTIVITY BAR / RIGHT SIDEBAR
|
|
================================ */
|
|
|
|
.Root__nav-right-sidebar {
|
|
border-left: var(--sidebar-border-width) solid var(--spice-sidebar-border);
|
|
}
|
|
.spotify__os--is-windows .main-buddyFeed-content {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* ================================
|
|
NOW PLAYING BAR
|
|
================================ */
|
|
|
|
.Root__now-playing-bar {
|
|
border-top: var(--player-border-width) solid var(--spice-player-border);
|
|
}
|
|
.main-nowPlayingBar-nowPlayingBar {
|
|
/* customize now playing bar */
|
|
height: var(--player-height);
|
|
padding: var(--player-padding);
|
|
}
|
|
.main-nowPlayingBar-container {
|
|
/* customize now playing bar*/
|
|
border-top: none;
|
|
}
|
|
[dir="ltr"] .main-nowPlayingWidget-coverExpanded {
|
|
transform: translateX(-76px);
|
|
}
|
|
.x-progressBar-fillColor {
|
|
/* fluid progress bars */
|
|
transition: transform, 0s, ease, 0.25s;
|
|
}
|
|
.progress-bar__slider {
|
|
/* fluid progress bars */
|
|
transition: left, 0s, ease, 0.25s;
|
|
}
|
|
|
|
/* ================================
|
|
MISC & FIXES
|
|
================================ */
|
|
|
|
/* font style
|
|
-------------------------------- */
|
|
* {
|
|
/* heading font weight */
|
|
font-weight: normal !important;
|
|
--font-family: CircularSp, CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl,
|
|
CircularSp-Grek, CircularSp-Deva, var(--fallback-fonts, sans-serif),
|
|
sans-serif;
|
|
}
|
|
|
|
/* scrollbar
|
|
-------------------------------- */
|
|
.os-theme-spotify
|
|
> .os-scrollbar-vertical
|
|
> .os-scrollbar-track
|
|
> .os-scrollbar-handle {
|
|
/* customize scrollbar */
|
|
border-radius: var(--scrollbar-border-radius);
|
|
width: var(--scrollbar-width);
|
|
}
|
|
.os-theme-spotify
|
|
> .os-scrollbar-vertical
|
|
> .os-scrollbar-track
|
|
> .os-scrollbar-handle:hover {
|
|
/* customize hovered scrollbar */
|
|
border-radius: var(--scrollbar-border-radius);
|
|
width: var(--scrollbar-width-hover);
|
|
}
|
|
.main-view-container__scroll-node > .os-scrollbar-vertical {
|
|
/* fix scrollbar positioning */
|
|
top: 5px !important;
|
|
right: 5px !important;
|
|
}
|
|
.os-scrollbar-handle {
|
|
/* increase size from right to left */
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
/* tooltip
|
|
-------------------------------- */
|
|
.main-contextMenu-tippy {
|
|
/* position below the element */
|
|
transform: translate(0, 65px);
|
|
}
|
|
|
|
/* color reassignment
|
|
-------------------------------- */
|
|
.encore-dark-theme,
|
|
.encore-dark-theme .encore-base-set {
|
|
/* song duration & queue button & folder arrow & settings desc text */
|
|
--text-subdued: var(--spice-subtext) !important;
|
|
--essential-subdued: var(--spice-button) !important;
|
|
}
|
|
|
|
/* ====topbar==== */
|
|
.Root__top-bar {
|
|
background-color: var(--spice-topbar);
|
|
}
|
|
.main-topBar-historyButtons .main-topBar-button {
|
|
background-color: transparent;
|
|
color: var(--spice-topbar-text);
|
|
}
|
|
.main-topBar-historyButtons .main-topBar-button:disabled {
|
|
color: var(--spice-topbar-subtext);
|
|
opacity: 1;
|
|
}
|
|
.main-entityHeader-topbarTitle {
|
|
color: var(--spice-topbar-text) !important;
|
|
}
|
|
.queue-tabBar-active {
|
|
background-color: var(--spice-tab-active) !important;
|
|
color: var(--spice-tab-active-text) !important;
|
|
}
|
|
.queue-tabBar-headerItemLink {
|
|
color: var(--spice-topbar-subtext);
|
|
}
|
|
.queue-tabBar-headerItemLink:hover {
|
|
background-color: rgba(var(--spice-rgb-tab-hover), 0.3);
|
|
}
|
|
.x-searchInput-searchInputSearchIcon,
|
|
.x-searchInput-searchInputClearButton,
|
|
.x-searchInput-searchInputInput {
|
|
color: var(--spice-tab-active-text) !important;
|
|
}
|
|
.x-searchInput-searchInputInput {
|
|
background-color: var(--spice-tab-active);
|
|
}
|
|
.x-filterBox-filterInput {
|
|
background-color: rgba(var(--spice-rgb-subtext), 0.1);
|
|
}
|
|
::placeholder {
|
|
color: var(--spice-topbar-subtext);
|
|
}
|
|
|
|
/* ====left sidebar==== */
|
|
.main-navBar-navBarLinkActive,
|
|
.main-rootlist-rootlistItemLinkActive {
|
|
background: var(--spice-link-active);
|
|
color: var(--spice-link-active-text) !important;
|
|
}
|
|
.link-subtle {
|
|
transition-property: none;
|
|
color: var(--spice-sidebar-text);
|
|
}
|
|
.link-subtle:focus,
|
|
.link-subtle:hover {
|
|
color: var(--spice-link-hover-text);
|
|
}
|
|
.main-rootlist-rootlistItemLink:link,
|
|
.main-rootlist-rootlistItemLink:visited {
|
|
color: var(--spice-sidebar-text);
|
|
}
|
|
.main-rootlist-rootlistItemOverlay:hover ~ .main-rootlist-rootlistItemLink,
|
|
.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive,
|
|
.main-rootlist-rootlistItemLink:focus,
|
|
.main-rootlist-rootlistItemLink:hover {
|
|
color: var(--spice-link-hover-text);
|
|
}
|
|
.collection-active-icon,
|
|
.collection-icon,
|
|
.home-active-icon,
|
|
.home-icon,
|
|
.premiumSpotifyIcon,
|
|
.search-active-icon,
|
|
.search-icon {
|
|
color: unset;
|
|
}
|
|
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,
|
|
.main-collectionLinkButton-collectionLinkButton
|
|
.main-collectionLinkButton-collectionLinkText,
|
|
.main-createPlaylistButton-button {
|
|
opacity: 1;
|
|
}
|
|
.main-collectionLinkButton-collectionLinkButton,
|
|
.main-createPlaylistButton-button {
|
|
color: var(--spice-sidebar-text);
|
|
}
|
|
.main-collectionLinkButton-collectionLinkButton:hover,
|
|
.main-createPlaylistButton-button:hover {
|
|
color: var(--spice-link-hover-text);
|
|
}
|
|
.main-likedSongsButton-likedSongsIcon > svg {
|
|
color: var(--spice-sidebar);
|
|
}
|
|
.main-likedSongsButton-likedSongsIcon,
|
|
.main-createPlaylistButton-createPlaylistIcon {
|
|
background: var(--spice-sidebar-text);
|
|
}
|
|
.main-createPlaylistButton-button:hover
|
|
.main-createPlaylistButton-createPlaylistIcon,
|
|
.main-collectionLinkButton-collectionLinkButton:hover
|
|
.main-likedSongsButton-likedSongsIcon {
|
|
background: var(--spice-link-hover-text);
|
|
}
|
|
.main-collectionLinkButton-collectionLinkButton.active {
|
|
background: var(--spice-link-active) !important;
|
|
color: var(--spice-sidebar) !important;
|
|
}
|
|
.main-collectionLinkButton-collectionLinkButton.active
|
|
.main-likedSongsButton-likedSongsIcon {
|
|
background: var(--spice-sidebar);
|
|
}
|
|
.main-collectionLinkButton-collectionLinkButton.active
|
|
.main-likedSongsButton-likedSongsIcon
|
|
> svg {
|
|
color: var(--spice-link-active);
|
|
}
|
|
.main-yourEpisodesButton-yourEpisodesIcon {
|
|
background: var(--spice-sidebar-text);
|
|
color: var(--spice-sidebar);
|
|
}
|
|
|
|
/* ====main view==== */
|
|
.main-trackList-trackListRow.main-trackList-selected,
|
|
.main-trackList-trackListRow.main-trackList-selected:hover,
|
|
.main-trackList-trackListRow:focus-within,
|
|
.main-trackList-trackListRow:hover {
|
|
background-color: var(--spice-card);
|
|
}
|
|
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader,
|
|
.artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled {
|
|
background-color: var(--spice-main);
|
|
}
|
|
.main-trackList-placeholder {
|
|
/* recolor loading tracklist */
|
|
opacity: 0.05;
|
|
filter: contrast(0.1);
|
|
}
|
|
.main-trackList-playingIcon {
|
|
/* change playing icon color to theme color */
|
|
filter: grayscale(1) opacity(0.2)
|
|
drop-shadow(0 0 0 var(--spice-button-active))
|
|
drop-shadow(0 0 0 var(--spice-button-active))
|
|
drop-shadow(0 0 0 var(--spice-button-active));
|
|
}
|
|
.search-searchCategory-catergoryGrid button[aria-checked="true"] span {
|
|
color: var(--spice-main);
|
|
background-color: var(--spice-button-active) !important;
|
|
}
|
|
.search-searchCategory-catergoryGrid span {
|
|
border-radius: var(--tab-border-radius);
|
|
color: var(--spice-subtext);
|
|
}
|
|
.artist-artistAbout-container.artist-artistAbout-backgroundImage
|
|
.artist-artistAbout-content
|
|
> div {
|
|
/* change about artist text color */
|
|
color: #fff;
|
|
}
|
|
.main-dropDown-dropDown,
|
|
.x-settings-input {
|
|
background-color: var(--spice-button-disabled);
|
|
color: var(--spice-text);
|
|
}
|
|
|
|
/* ====right sidebar==== */
|
|
.main-buddyFeed-friendsFeedContainer, .main-buddyFeed-container {
|
|
background-color: var(--spice-sidebar);
|
|
}
|
|
.TypeElement-balladBold-textBase-type,
|
|
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName {
|
|
color: var(--spice-sidebar-text);
|
|
}
|
|
|
|
/* ====now playing bar==== */
|
|
.main-trackInfo-name,
|
|
.main-trackInfo-artists a:active,
|
|
.main-trackInfo-artists a:focus,
|
|
.main-trackInfo-artists a:hover {
|
|
color: var(--spice-player-text) !important;
|
|
}
|
|
.main-trackInfo-artists a:link,
|
|
.main-trackInfo-artists a:visited {
|
|
color: var(--spice-player-subtext);
|
|
}
|
|
.main-playPauseButton-button {
|
|
color: var(--spice-player);
|
|
background-color: var(--spice-button-active);
|
|
}
|
|
.control-button-heart[aria-checked="false"],
|
|
.player-controls__left button,
|
|
.player-controls__right button,
|
|
.main-nowPlayingBar-extraControls button {
|
|
color: rgba(var(--spice-rgb-player-selected-row), 0.7);
|
|
}
|
|
.progress-bar {
|
|
--bg-color: rgba(var(--spice-rgb-player-selected-row), 0.3);
|
|
--fg-color: var(--spice-player-selected-row);
|
|
}
|
|
|
|
/* ====misc==== */
|
|
|
|
/* ----scrollbar---- */
|
|
.os-theme-spotify
|
|
> .os-scrollbar-vertical
|
|
> .os-scrollbar-track
|
|
> .os-scrollbar-handle {
|
|
background-color: var(--spice-scrollbar) !important;
|
|
}
|
|
.os-theme-spotify
|
|
> .os-scrollbar-vertical
|
|
> .os-scrollbar-track
|
|
> .os-scrollbar-handle:hover,
|
|
.os-theme-spotify
|
|
> .os-scrollbar-vertical
|
|
> .os-scrollbar-track
|
|
> .os-scrollbar-handle:active {
|
|
background-color: var(--spice-scrollbar-hover) !important;
|
|
}
|
|
|
|
/* ----context menu---- */
|
|
.main-contextMenu-menu {
|
|
background-color: var(--spice-context-menu);
|
|
}
|
|
.main-contextMenu-menuHeading,
|
|
.main-contextMenu-menuItemButton,
|
|
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
|
|
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
|
|
color: var(--spice-context-menu-text);
|
|
}
|
|
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
|
|
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
|
|
background-color: var(--spice-context-menu-hover);
|
|
}
|
|
|
|
/* ----button---- */
|
|
#_R_G *:not([fill="none"]) {
|
|
/* fix heart color on click */
|
|
fill: var(--spice-button-active) !important;
|
|
}
|
|
#_R_G *:not([stroke="none"]) {
|
|
stroke: var(--spice-button-active);
|
|
}
|
|
.ButtonInner-md-iconOnly {
|
|
/* base play/pause icon color on player instead of sidebar */
|
|
color: var(--spice-player);
|
|
}
|
|
.Button-sm-16-buttonTertiary-iconOnly-condensedAll-useBrowserDefaultFocusStyle {
|
|
/* base play/pause icon color on sidebar text instead of subtext */
|
|
color: var(--spice-sidebar-text);
|
|
}
|
|
|
|
/* ylx support
|
|
-------------------------------- */
|
|
.Root {
|
|
--panel-gap: 0 !important;
|
|
}
|
|
.spotify__container--is-desktop .Root__top-container {
|
|
padding-top: 0 !important;
|
|
}
|
|
body:has(.main-yourLibraryX-library)
|
|
.spotify__container--is-desktop:not(.fullscreen)
|
|
.main-topBar-background,
|
|
body:has(.main-yourLibraryX-library) .main-topBar-topbarContent,
|
|
body:has(.main-yourLibraryX-library) .main-topBar-contentArea {
|
|
-webkit-app-region: drag !important;
|
|
}
|
|
body:has(.main-yourLibraryX-library) .x-searchInput-searchInputInput {
|
|
height: 41px;
|
|
background-color: var(--spice-tab-active);
|
|
}
|
|
body:has(.main-yourLibraryX-library) .x-searchInput-searchInputInput:hover {
|
|
background-color: var(--spice-tab-hover);
|
|
}
|
|
.main-yourLibraryX-entryPoints,
|
|
body:has(.main-yourLibraryX-library) .Root__main-view {
|
|
border-radius: 0;
|
|
}
|
|
.main-yourLibraryX-entryPoints {
|
|
background-color: var(--spice-sidebar);
|
|
}
|
|
.main-yourLibraryX-navItems {
|
|
padding-bottom: 0;
|
|
}
|
|
.main-yourLibraryX-navItem,
|
|
.main-yourLibraryX-headerContent {
|
|
padding: 4px 0;
|
|
}
|
|
.main-yourLibraryX-header {
|
|
padding-top: 0;
|
|
}
|
|
.main-yourLibraryX-navItem {
|
|
padding: 4px 0;
|
|
}
|
|
.main-yourLibraryX-navLink {
|
|
padding: 12px;
|
|
}
|
|
.main-yourLibraryX-navLinkActive,
|
|
.main-yourLibraryX-navLinkActive .home-active-icon,
|
|
.main-yourLibraryX-navLinkActive .search-active-icon {
|
|
color: var(--spice-link-active-text) !important;
|
|
background-color: var(--spice-link-active);
|
|
border-radius: var(--tab-border-radius);
|
|
}
|
|
.Button-md-24-buttonTertiary-iconLeading-condensed-useBrowserDefaultFocusStyle,
|
|
.Button-md-24-buttonTertiary-iconLeading-condensed-isUsingKeyboard-useBrowserDefaultFocusStyle {
|
|
color: var(--spice-sidebar-text);
|
|
}
|
|
.main-yourLibraryX-navLink,
|
|
.main-yourLibraryX-header .main-yourLibraryX-collapseButtonWrapper {
|
|
gap: 20px;
|
|
}
|
|
.Wrapper-md-leading {
|
|
margin-inline-end: 0;
|
|
}
|
|
.Button-md-24-buttonTertiary-iconLeading-condensed-useBrowserDefaultFocusStyle:hover,
|
|
.Button-md-24-buttonTertiary-iconLeading-condensed-isUsingKeyboard-useBrowserDefaultFocusStyle:hover {
|
|
color: var(--spice-link-hover-text);
|
|
}
|
|
.main-yourLibraryX-isScrolled {
|
|
-webkit-box-shadow: 0 20px 10px -10px var(--spice-sidebar);
|
|
box-shadow: 0 20px 10px -10px var(--spice-sidebar);
|
|
}
|
|
body:has(.main-yourLibraryX-library) .x-searchInput-searchInputInput:hover,
|
|
body:has(.main-yourLibraryX-library) .x-searchInput-searchInputInput:focus,
|
|
.x-entityImage-imageContainer {
|
|
box-shadow: none;
|
|
}
|
|
body:has(.main-yourLibraryX-library) .x-searchInput-searchInputInput {
|
|
color: var(--spice-tab-active-text) !important;
|
|
}
|
|
body:has(.main-yourLibraryX-library) .main-nowPlayingBar-container {
|
|
background-color: var(--spice-player);
|
|
}
|
|
body:has(.main-yourLibraryX-library) .main-nowPlayingBar-nowPlayingBar {
|
|
height: var(--player-height);
|
|
padding: var(--player-padding);
|
|
}
|
|
body:has(.main-yourLibraryX-library)
|
|
[dir="ltr"]
|
|
.main-coverSlotCollapsed-navAltContainer {
|
|
transform: translateX(0);
|
|
}
|
|
.Pns6F5g4OEwEpdmOWTLg {
|
|
/* playlists loading placeholder */
|
|
opacity: 0.05;
|
|
filter: contrast(0.1);
|
|
}
|
|
body:has(.main-yourLibraryX-library)
|
|
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
|
|
background-color: var(--spice-main);
|
|
}
|
|
body:has(.main-yourLibraryX-library)
|
|
.artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled {
|
|
border-bottom: 1px solid rgba(var(--spice-rgb-selected-row), 0.1);
|
|
box-shadow: none;
|
|
}
|