:root { --border-radius-1: 8px; --border-radius-2: 4px; --border-radius-3: 4px; --glue-font-weight-normal: 400; --glue-font-weight-bold: 600; --glue-font-weight-black: 700; --scrollbars: unset; --scrollbar-vertical-size: 8px; --filter-brightness: 1; --green: #1db954; } * { font-family: 'Segoe UI', sans-serif !important; box-shadow: none !important; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; } .Root__main-view { z-index: 0; background-color: var(--spice-main); height: 100%; } .os-scrollbar { display: var(--scrollbars); } .os-scrollbar-handle { border-radius: 50px; background: var(--spice-button-disabled) !important; } .os-theme-spotify>.os-scrollbar-vertical { margin-right: 2px; } .os-scrollbar-horizontal { display: none; } .contentSpacing { max-width: 100vw !important; } .main-home-homeHeader, .main-actionBarBackground-background { background-image: none; } .main-actionBarBackground-background, .main-home-homeHeader, .x-entityHeader-overlay, .x-actionBarBackground-background { background-color: var(--spice-main) !important; } .main-topBar-background, .main-topBar-overlay { background-color: var(--spice-sidebar) !important; opacity: 1 !important; } .main-entityHeader-overlay { background-image: linear-gradient(to bottom, rgb(39 39 39 / 0%), var(--spice-main)); } .x-actionBarBackground-background, .x-entityHeader-overlay, .We1fExPHxLIRmV0rZGNo { background: none !important; } /* remove dividers */ .main-trackList-trackListHeaderRow, .main-trackCreditsModal-header { border-bottom: none; } .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-rootlistDividerContainer { display: none; } /* cards */ .main-shelf-shelfGrid, .view-homeShortcutsGrid-grid { overflow: visible; } .main-cardImage-image, .main-cardImage-imageWrapper, .OALAQFKvC7XQOVYpklB4 img { border-radius: var(--border-radius-2); } .main-card-card, .x-heroCategoryCard-HeroCategoryCard, .x-categoryCard-CategoryCard, .main-heroCard-card, .OALAQFKvC7XQOVYpklB4 { border-radius: var(--border-radius-1); } .main-card-card, .main-heroCard-card, .x-searchResultsTracks-root>.main-gridContainer-gridContainer, .main-trackList-indexable, .view-homeShortcutsGrid-shortcut, .OALAQFKvC7XQOVYpklB4, .L4WROPnQ7MPGhylvVyxd { background-color: var(--spice-card); box-shadow: 0px 0px 6px 0px var(--spice-layer-shadow) !important; border: var(--spice-contour) solid 1px; } .main-tag-container { font-family: "Segoe UI", sans-serif !important; font-weight: 400; font-size: 10px; color: #463d3d !important; } .main-heroCardTag-root, ._8PRqRiYMqnyy_gN_fUD ._AxyaXOKl3GkvT212Vco { height: 24px; padding: 12px; margin-top: 8px; } .ZHE5oMCbrUVXtUWiPmpH { /* tags */ padding: 12px !important; } .x-categoryCard-title, .x-heroCategoryCard-heroTitle, .collection-collectionEntityHeroCard-likedSongs div { color: var(--spice-alt-text); } /* transitions */ .main-card-card { transition: background-color 150ms ease; } .link-subtle { transition-duration: 150ms; } /* headers */ .Root__top-bar { position: absolute !important; width: 100vw !important; grid-area: none; z-index: 4 !important; } .main-topBar-container { max-width: 100vw; } .main-entityHeader-withBackgroundImage { padding: 0 32px 24px; margin-top: 48px; } .main-entityHeader-title { font-size: unset; font-family: 'Segoe UI', sans-serif !important; font-weight: 500; overflow: visible !important; } h1, h2, h3, .main-shelf-title, .main-entityHeader-topbarTitle, .main-type-canon, .main-type-bass, .main-cardHeader-text.main-type-alto, .x-searchResultsTracks-title { font-family: 'Segoe UI', sans-serif !important; font-weight: 500; letter-spacing: 0.1px !important; overflow: visible !important; margin-bottom: 4px; white-space: normal; } .main-seeAll-link { margin-bottom: 10px; } .main-topBar-topbarContent { position: absolute; display: -webkit-box; left: 50%; top: 5px; transform: translate(-50%, 0%); padding: 6px; } .queue-tabBar-header { text-align: center; min-width: 500px; } .queue-tabBar-headerItemLink { transition: background-color ease-out 167ms; } .main-topBar-back { -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_arrow_left_24_filled.svg'); background-color: var(--spice-text) !important; padding: 5px; margin-left: 60px; width: 24px !important; height: 24px !important; } .main-topBar-forward { -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_arrow_right_24_filled.svg'); background-color: var(--spice-text) !important; padding: 5px; width: 24px !important; height: 24px !important; } .main-userWidget-displayName, .main-userWidget-chevron { display: none !important; } /* menus */ .main-contextMenu-menuItemButton, .main-userWidget-dropDownMenuItemButton { border-radius: var(--border-radius-1); color: var(--spice-text) !important; height: 32px; padding-left: 8px; } .main-contextMenu-menuItem, ._60cb742e518d084c3c959007b9463b51-scss>li { margin: 2px 6px; } .main-contextMenu-menuItem:first-child, ._60cb742e518d084c3c959007b9463b51-scss> :first-child { margin: 6px 6px 2px; } .main-contextMenu-menuItem:last-child { margin: 2px 6px 6px; } ._60cb742e518d084c3c959007b9463b51-scss> :last-child { margin: 2px 6px 8px; } .main-contextMenu-menu, ._60cb742e518d084c3c959007b9463b51-scss { border-radius: var(--border-radius-1); border: 1px solid var(--spice-layer-shadow); background-color: var(--spice-card); } .queue-tabBar-dropdownItemLink { color: var(--spice-text) !important; } /* buttons */ .icon, .gSLhUO { -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; margin: auto; display: block; } .main-navBar-navBarLink .gSLhUO path, .icon > svg, .x-searchInput-searchInputIconContainer path, .show-episodeBlock-playerActions svg, .main-playButton-PlayButton polygon, .main-playButton-PlayButton rect { display: none !important; } .home-icon { -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_home_24_regular.svg'); background-color: var(--spice-subtext) !important; } .home-active-icon { -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_home_24_filled.svg'); background-color: var(--spice-accent) !important; } .search-icon { -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_search_24_regular.svg'); background-color: var(--spice-subtext) !important; } .search-active-icon { -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_search_24_filled.svg'); background-color: var(--spice-accent) !important; } .collection-icon { -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_library_24_regular.svg'); background-color: var(--spice-subtext) !important; } .collection-active-icon { -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_library_24_filled.svg'); background-color: var(--spice-accent) !important; } .main-navBar-navBarLink[href="/lyrics-plus"] > .collection-icon { -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_slide_text_24_regular.svg'); background-color: var(--spice-subtext) !important; } .main-navBar-navBarLink[href="/lyrics-plus"] > .collection-active-icon { -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_slide_text_24_filled.svg'); background-color: var(--spice-accent) !important; } .main-createPlaylistButton-button { -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_add_circle_24_regular.svg'); background-color: var(--spice-subtext) !important; padding: 0px; margin: auto; height: 24px !important; width: 24px !important; display: block !important; margin-top: 20px !important; margin-bottom: 10px !important; } .main-createPlaylistButton-button svg { display: none !important; } .main-createPlaylistButton-createPlaylistIcon { background-color: var(--spice-subtext) !important; display: block !important; } .main-createPlaylistButton-createPlaylistIcon > svg, .main-createPlaylistButton-text { display: none !important; } .main-collectionLinkButton-collectionLinkButton { width: 49px; min-height: 48px; margin: auto; margin-bottom: 14px; justify-content: center; } .main-collectionLinkButton-collectionLinkButton[href="/collection/tracks"] { background: linear-gradient(135deg,#450af5,#c4efd9) !important; } .main-collectionLinkButton-collectionLinkButton[href="/collection/episodes"] { background-color: #006450 !important; } .main-collectionLinkButton-collectionLinkButton[href="/collection/tracks"] .main-collectionLinkButton-icon { -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_heart_24_filled.svg'); background-color: white !important; margin-right: 0px; } .main-collectionLinkButton-collectionLinkButton[href="/collection/episodes"] .main-collectionLinkButton-icon { -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_mic_on_24_filled.svg'); background-color: #00DA6B !important; margin-right: 0px; } .main-likedSongsButton-likedSongsIcon, .main-yourEpisodesButton-yourEpisodesIcon, .main-collectionLinkButton-collectionLinkText { display: none !important; } .main-type-balladBold { font-family: 'Segoe UI', sans-serif !important; font-weight: 500; letter-spacing: 0.2px; } .main-type-minuetBold { text-transform: none; letter-spacing: 0px; font-weight: 400; font-size: 14px; line-height: 0px; } .main-shelf-seeAll { height: 21px; } style { --nav-bar-width: 62px !important; } .main-playButton-PlayButton.main-playButton-primary, .main-pageErrorTemplate-errorButton { color: var(--spice-shadow); } button.switch { background-color: transparent !important; } #spicetify-home-config button, #spicetify-sidebar-config button { background-color: var(--spice-main) !important; color: var(--spice-text) !important; border: none !important; } #spicetify-home-config button { border-radius: var(--border-radius-2) !important; } #spicetify-sidebar-config button { border-radius: var(--border-radius-3) !important; } #spicetify-home-config button:disabled, #spicetify-sidebar-config button:disabled { background-color: var(--spice-button-disabled) !important; color: var(--spice-text) !important; } .main-buttons-button, .show-followButton-button { background-color: var(--spice-card); font-family: "Segoe UI", sans-serif; font-weight: normal; font-size: 15px; letter-spacing: 0px; text-transform: none; border-radius: var(--border-radius-2); -webkit-font-smoothing: subpixel-antialiased; } .main-button-outlined, .main-button-outlined:hover { border: var(--spice-contour) solid 1px !important; } .main-button-primary { background-color: var(--spice-accent); color: black; } .main-button-outlined { background-color: var(--spice-card); } .main-button-secondary { color: var(--spice-text); } .main-entityHeader-titleButton { background: none !important; } .x-carousel-button, .x-removeButton-RemoveButton { background-color: var(--spice-card); } .x-carousel-button svg { fill: var(--spice-text) !important; } /* sidebar */ .Root__nav-bar { z-index: 1 !important; max-width: 85px !important; height: calc(100% + 107px); padding-bottom: 127px; } .main-navBar-navBar { width: 85px !important; } .main-navBar-navBarLink { border-radius: var(--border-radius-2); color: var(--spice-text); height: 65px !important; display: block; padding-top: 12px; padding-left: 0px; padding-right: 0px; margin-bottom: 4px; } .main-navBar-navBarLink>span, .main-createPlaylistButton-text { overflow: visible; font-size: 12px !important; margin: auto; display: block; text-align: center; margin-top: 4px; white-space: pre; color: var(--spice-subtext); } .main-navBar-navBarLinkActive > .icon, .main-navBar-navBarLinkActive .gSLhUO { position: relative; top: 50%; transform: translate(0, -50%); margin: auto; } .main-navBar-navBarLinkActive { padding: 0px; } .main-navBar-entryPoints { padding-top: 36px !important; } .main-type-mestoBold { font-family: 'Segoe UI', sans-serif !important; font-weight: normal !important; } .navBar-navBarLink-accent { position: relative; width: 4px; height: 25px; background-color: var(--spice-accent); border-radius: var(--border-radius-2); bottom: 3px; display: none; } .main-navBar-navBarLinkActive>.navBar-navBarLink-accent { display: block !important; } .main-navBar-navBarLink:hover { background-color: rgba(var(--spice-rgb-selected-row), 0.3); } .main-navBar-navBarLink:active { background-color: rgba(var(--spice-rgb-selected-row), 0.5); } .main-navBar-navBarLinkActive, .main-navBar-navBarLinkActive:hover, .main-navBar-navBarLinkActive:active, .main-navBar-navBarLinkActive:focus { background-color: var(--spice-selected-row); color: var(--spice-not-selected); transition: 167ms ease-out all; } .main-navBar-navBarLink { transition: background-color ease-out 167ms; } .main-navBar-navBarLinkActive>span.ellipsis-one-line { display: none; } /* playlist sidebar */ .main-rootlist-rootlist .os-content { padding: 0px 0px !important; } .main-rootlist-rootlist { --left-sidebar-item-height: 48px; --left-sidebar-padding-left: 18px; --left-sidebar-padding-right: 18px; } .main-rootlist-rootlistItemLink { padding: 8px; } .main-rootlist-rootlistItemLink:link, .main-rootlist-rootlistItemLink:visited, .main-rootlist-rootlistPlaylistHeader { color: var(--spice-text); background-color: var(--spice-card); background-size: cover; border-radius: var(--border-radius-2); margin-bottom: 14px; } .main-rootlist-textWrapper { display: none; } .main-rootlist-statusIcons { right: 17px !important; top: -4px; } .main-rootlist-rootlistItemLinkActive~.main-rootlist-expandArrow:focus, .main-rootlist-rootlistItemLinkActive~.main-rootlist-expandArrow:hover, .main-rootlist-rootlistItemLinkActive~.main-rootlist-expandArrow { color: var(--spice-text); } .main-rootlist-expandArrow { color: var(--spice-text); position: relative; margin-inline-start: -32px; padding: 8px; right: -17px; top: -1px; } .main-rootlist-expandArrowRotated { right: -5px !important; top: 14px !important; } .main-rootlist-statusIcons { margin-inline-start: -24px; position: relative; right: 8px; } .main-rootlist-rootlistItemLink:hover, .main-createPlaylistButton-button:hover, .main-collectionLinkButton-collectionLinkButton:hover { filter: brightness(50%); } .main-rootlist-statusIcons>button { color: var(--spice-text); } .main-rootlist-rootlistItemLinkActive~.main-rootlist-statusIcons>button { color: var(--spice-shadow); } /* tracklist */ .main-trackList-indexable .main-virtualScrollList-wrapper, .main-trackList-indexable .main-rootlist-wrapper { background-color: var(--spice-card); border-radius: var(--border-radius-2); padding: 8px; } .main-trackList-indexable { padding: 8px; padding-bottom: 24px; } .main-trackList-trackListHeader.g9n_9K5pFI3B_JuDI_hS { padding: 0px; margin: 0px; border-bottom: none; background: var(--spice-card); } .main-trackList-trackListRow { border-radius: var(--border-radius-2); } .main-trackList-trackListRow:hover { background-color: rgba(var(--spice-rgb-selected-row), .05); } .main-trackList-trackListRow:active { background-color: rgba(var(--spice-rgb-selected-row), .1); } .main-trackList-trackListRow.main-trackList-selected, .main-trackList-trackListRow.main-trackList-selected:hover { background-color: var(--spice-selected-row); } .main-trackList-trackListRow.main-trackList-selected .main-tag-container, .main-trackList-trackListRow.main-trackList-selected:hover .main-tag-container, .main-trackList-trackListRow.main-trackList-selected:active .main-tag-container, .main-trackList-trackListRow.main-trackList-selected:focus .main-tag-container { color: var(--spice-text) !important; background-color: var(--spice-shadow); } .main-tag-container, .main-trackList-rowImage { border-radius: var(--border-radius-3); } .main-trackList-rowTitle { color: var(--spice-text) !important; } .main-trackList-trackListRow.main-trackList-selected span, .main-trackList-trackListRow.main-trackList-selected:hover span, .main-trackList-trackListRow.main-trackList-selected:active span, .main-trackList-trackListRow.main-trackList-selected:focus span, .main-trackList-trackListRow.main-trackList-selected a, .main-trackList-trackListRow.main-trackList-selected:hover a, .main-trackList-trackListRow.main-trackList-selected:active a, .main-trackList-trackListRow.main-trackList-selected:focus a, .main-trackList-trackListRow.main-trackList-selected button, .main-trackList-trackListRow.main-trackList-selected:hover button, .main-trackList-trackListRow.main-trackList-selected:active button, .main-trackList-trackListRow.main-trackList-selected:focus button, .main-trackList-trackListRow.main-trackList-selected div, .main-trackList-trackListRow.main-trackList-selected:hover div, .main-trackList-trackListRow.main-trackList-selected:active div, .main-trackList-trackListRow.main-trackList-selected:focus div { color: var(--spice-text) !important; } .main-trackList-trackListHeader { margin-bottom: 8px; } ._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 .main-button-outlined { border: 1px solid var(--spice-text); } .main-trackList-trackListHeaderStuck.main-trackList-trackListHeader { border-bottom: none; } .main-trackList-statusChangeUp { color: var(--green); } /* big thanks to CharlieS and harbassan for providing the svg */ .main-trackList-playingIcon, .WBTm60_TPRG_oYwBuS7_ { -webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 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; } .main-trackList-selected .main-trackList-playingIcon { background: var(--spice-shadow); } .main-trackList-rowImageWithPlay .main-trackList-rowPlayPauseButton { width: 24px; height: 24px; } /* headers */ .main-entityHeader-image:not(.main-entityHeader-circle) { border-radius: var(--border-radius-1); } .x-sortBox-sortDropdown, .x-filterBox-filterInput, .x-filterBox-expandButton:focus, .x-filterBox-expandButton:hover { border-radius: var(--border-radius-2) !important; } .x-sortBox-sortDropdown { color: var(--spice-text); } .main-actionBar-ActionBarRow>button:not(:first-child), .x-actionBar-ActionButtonsRow>div>button { color: var(--spice-text); } .main-actionBar-ActionBarRow span { color: var(--spice-text) !important; } .fIDrcz, .ghlXvf { fill: var(--spice-text); } .main-navBar-navBar .fIDrcz { fill: var(--spice-alt-text); } .x-filterBox-filterInput { background-color: var(--spice-card); color: var(--spice-text); } .x-emptyState-container { height: auto; margin-top: 120px; } /* artist page */ .artist-artistOverview-heading, .artist-artistPick-heading, .J6CYfp0Tj6MkWJCdssuA, .artist-artistAbout-heading { margin-bottom: 20px !important; } .artist-artistPick-pinnedImage, .artist-artistOffers-item { border-radius: var(--border-radius-2) !important; } .artist-artistAbout-container, .main-entityHeader-background, .main-entityHeader-background.main-entityHeader-overlay { border-radius: var(--border-radius-1); } .main-entityHeader-background.main-entityHeader-overlay, .wQi0raQMEJJrELuj_2FP.main-entityHeader-overlay { --bgColor: transparent !important; background: none; } .artist-artistOffers-item:hover { background-color: rgba(var(--spice-rgb-selected-row), .05) !important; } .artist-artistOffers-item:active { background-color: rgba(var(--spice-rgb-selected-row), .1) !important; } .main-entityHeader-background, .wQi0raQMEJJrELuj_2FP._dsx4Y9jukDHLzhl7bQb { transform: scale(1) !important; margin-top: 48px; } [class="main-entityHeader-backgroundColor"] { opacity: min(calc(var(--filter-brightness) + 0.4), 1); } .main-entityHeader-container { background-image: linear-gradient(to bottom, rgb(255 255 255 / 0%), var(--spice-main)); } .main-entityHeader-metaDataText, .main-entityTitle-subtitle, .main-entityHeader-metaDataText span { color: var(--spice-text) !important; } /* podcasts */ .show-trailer-container, .show-episodeBlock-episodeBlock, .show-show-episodes> :last-child { border-radius: var(--border-radius-1) !important; } .show-episodeBlock-episodeBlock:hover { background-color: rgba(var(--spice-rgb-selected-row), .05); } .show-episodeBlock-episodeBlock:active { background-color: rgba(var(--spice-rgb-selected-row), .1); } .show-show-episodes> :last-child { padding: 8px 24px; } .show-trailer-container, .show-show-episodes> :last-child { background-color: var(--spice-card) !important; } /* top bar */ .main-topBar-button, .main-userWidget-box { background-color: var(--spice-sidebar); } .main-entityHeader-topbarTitle, .main-topBar-topbarTitle { font-size: 16px; font-family: 'Segoe UI', sans-serif !important; font-weight: 400; padding-left: 4px; position: relative; top: 5px; } .main-playButton-PlayButton.main-playButton-primary { padding: 12px; padding-bottom: 0px; padding-top: 0px; height: auto; } .main-topBar-topbarContent>.main-playButton-PlayButton.main-playButton-primary { margin-top: 10px; } /* tab bars */ a[class*='-tabBar-active'] { background-color: rgba(var(--spice-rgb-selected-row), 1) !important; } a[class*='-tabBar-headerItemLink']:hover { background-color: rgba(var(--spice-rgb-selected-row), 0.3); } a[class*='-tabBar-headerItemLink']:active { background-color: rgba(var(--spice-rgb-selected-row), 0.5); } /* search */ .x-searchInput-searchInputInput, .dIwMadpRrW1PwEwEeAbN, .G9iUss4eOSpJyn2VBzsS { background-color: var(--spice-card); color: var(--spice-text) !important; border-radius: var(--border-radius-2) !important; padding-right: 0px; padding-left: 12px; transition: background-color ease-in 167ms; } .x-searchInput-searchInputInput:focus, .dIwMadpRrW1PwEwEeAbN:focus, .G9iUss4eOSpJyn2VBzsS:focus { background-color: var(--spice-main); border-bottom: var(--spice-accent) solid 2px; } .x-searchInput-searchInput, ._UTWTgKCqE8eruFNFAMf { -webkit-box-flex: 1; width: 40vw; } .x-searchInput-searchInputIconContainer, ._6e_T5d5DVIdzLw3pCIw { flex-direction: row-reverse; } .c16n2m346Ss2TcRUx8Bw { flex: 0 !important; } .x-searchInput-searchInputSearchIcon, .c16n2m346Ss2TcRUx8Bw .BDcKgSW_ys9_Hj2DwDBW { -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_search_16_regular.svg'); background-color: var(--spice-subtext) !important; flex: 0; transform: scaleX(-1); height: 16px; width: 16px; } .BDcKgSW_ys9_Hj2DwDBW path { display: none; } .x-searchInput-searchInputClearButton, .g7ggq46CbOli19ZxJlQe .BDcKgSW_ys9_Hj2DwDBW { margin-left: 5px; margin-right: 12px; height: 20px; } .x-searchInput-searchInputClearButton path, .g7ggq46CbOli19ZxJlQe .BDcKgSW_ys9_Hj2DwDBW path { display: block !important; stroke: var(--spice-subtext) !important; stroke-width: 1.3px; } .x-searchInput-searchInputClearButton svg, .g7ggq46CbOli19ZxJlQe .BDcKgSW_ys9_Hj2DwDBW svg { padding: 3px; } .x-searchInput-searchInputSearchIcon, .x-searchInput-searchInputInput::placeholder, .x-searchInput-searchInputClearButton { color: var(--spice-text) !important; } .x-searchResultsTracks-root .main-gridContainer-gridContainer { padding: 8px; } .main-heroCard-card, .x-searchResultsTracks-root .main-gridContainer-gridContainer { background-color: var(--spice-card); border-radius: var(--border-radius-1); } /* error */ path[d="M23 0C10.298 0 0 10.297 0 23c0 12.702 10.298 23 23 23 12.703 0 23-10.298 23-23C46 10.297 35.703 0 23 0zm0 44C11.421 44 2 34.579 2 23S11.42 2 23 2c11.579 0 21 9.42 21 21 0 11.579-9.42 21-21 21zm1.872-32.065l-.8 16.192h-2.144l-.832-16.192h3.776zm-3.968 20.768c0-.576.203-1.072.608-1.488a1.979 1.979 0 011.472-.624c.576 0 1.072.208 1.488.624.416.416.624.912.624 1.488s-.208 1.067-.624 1.472a2.056 2.056 0 01-1.488.608 2.006 2.006 0 01-1.472-.608 2.002 2.002 0 01-.608-1.472z"], .spoticon-warning-64::before { color: var(--spice-notification-error); } /* modals */ .GenericModal__overlay { background-color: rgba(0, 0, 0, 0.6) } .main-trackCreditsModal-container, .main-aboutRecsModal-container, .main-playlistEditDetailsModal-container, .profile-userEditDetails-container, .artist-artistAbout-modal { background-color: var(--spice-main) !important; border-radius: var(--border-radius-1) !important; } .main-playlistEditDetailsModal-titleInput, .main-playlistEditDetailsModal-descriptionTextarea, .main-playlistEditDetailsModal-titleInput:focus, .main-playlistEditDetailsModal-descriptionTextarea:focus, .playlist-inlineSearchBox-filterInput { background-color: var(--spice-card); } .profile-userEditDetails-nameInput, .profile-userEditDetails-textElement:focus { background: var(--spice-card) !important; } .main-playlistEditDetailsModal-titleInput:focus, .main-playlistEditDetailsModal-descriptionTextarea:focus, .profile-userEditDetails-textElement:focus, .playlist-inlineSearchBox-filterInput:focus { border: 1px solid var(--spice-button-active) !important; } .playlist-inlineSearchBox-filterInput { border: 1px solid var(--spice-card); } .main-playlistEditDetailsModal-titleInput, .main-playlistEditDetailsModal-descriptionTextarea, .profile-userEditDetails-nameInput, .playlist-inlineSearchBox-filterInput { border-radius: var(--border-radius-2) !important; } .profile-userEditDetails-labelText:before { bottom: 8px !important; } .main-playlistEditDetailsModal-titleInput::placeholder, .main-playlistEditDetailsModal-descriptionTextarea::placeholder { color: var(--spice-text); } .main-editImageButton-overlay { background-color: rgba(var(--spice-rgb-card), 0.7); } /* dialogs */ .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-deleteFolderDialog-secondaryButton { color: var(--spice-button); } .main-deletePlaylistDialog-buttonContainer>:last-child, .main-deleteFolderDialog-buttonContainer>:last-child { background-color: var(--spice-notification-error); } /* friend activity */ .spotify__container--is-desktop.spotify__os--is-windows.buddyfeed-visible .main-topBar-container { padding-inline-end: 170px; } .main-connectToFacebook-container { margin-top: 50px; } .main-connectToFacebook-text, .main-connectToFacebook-disclaimer, .main-connectToFacebook-headerTitle, .main-addFriendsView-headerText p { color: var(--spice-text); } .main-addFriendsView-header { margin-top: 16px; border-bottom: 1px solid var(--spice-selected-row) !important; } .main-addFriendsView-facebookIconWrapper { background-color: #008AFF !important; } .main-addFriendsView-filterInput { background-color: var(--spice-card) !important; color: var(--spice-text) !important; } .main-addFriendsView-filterInput::placeholder { color: var(--spice-text) !important; } .main-buddyFeed-header { opacity: 1 !important; } .main-buddyFeed-friendsFeedContainer { margin-top: 25px; } .main-buddyFeed-findFriendsIcon, .main-buddyFeed-addFriendPlaceholderIcon { color: var(--spice-text) !important; } .main-buddyFeed-username a { color: var(--spice-text) !important; } .main-buddyFeed-artistAndTrackName a, .main-buddyFeed-activityMetadata, .main-buddyFeed-playbackContextLink { color: var(--spice-subtext) !important; } .main-buddyFeed-friendActivity { background-color: var(--spice-card); border-radius: var(--border-radius-1); margin: 8px; padding: 8px 8px 8px 12px; } .main-buddyFeed-addFriendsContainer { background-color: var(--spice-main); } .main-buddyFeed-buddyFeedRoot, .main-buddyFeed-buddyFeed { width: 280px; z-index: 0; } .main-buddyFeed-buddyFeedRoot .main-avatar-avatar { margin-right: 8px; } .main-buddyFeed-activityMetadata { max-width: 190px; } .profile-userOverview-section .main-shelf-shelfGrid { overflow: hidden; } /* settings */ .main-dropDown-dropDown, option { background-color: var(--spice-card) !important; color: var(--spice-text); } .main-dropDown-dropDown { border-radius: var(--border-radius-2) !important; } .x-toggle-indicator { background-color: var(--spice-card) !important; } .x-settings-facebookButton, .main-connectToFacebook-facebookButton { color: var(--spice-shadow); } .x-toggle-indicatorWrapper { background-color: rgba(var(--spice-rgb-subtext), .3) !important; } .x-proxySettings-proxyInput { border-radius: var(--border-radius-2) !important; background-color: var(--spice-card) !important; } .x-proxySettings-proxyInput::placeholder { color: var(--spice-subtext); } .x-proxySettings-proxyInput:focus { border-color: var(--spice-button-active); } /* connect device menu */ ._9eb5acf729a98d62135ca21777fef244-scss, .connect-device-button { color: var(--spice-shadow); } .connect-device-list-container { border-radius: var(--border-radius-1); border: 1px solid var(--spice-button-disabled); } .connect-device-list-item { margin: 0 8px; border-radius: var(--border-radius-2); width: -webkit-fill-available; } .connect-device-list-item:last-child { margin: 0 8px 8px; } .connect-device-list-item:focus, .connect-device-list-item:hover { background-color: rgba(var(--spice-rgb-selected-row), 0.05); } .connect-header { display: none; } .connect-device-list-item--active, .connect-device-list-item--active .connect-device-list-item__icon, .connect-device-list-item--active .connect-device-list-item__device-subtitle { color: var(--spice-subtext); } .main-connectBar-connectBar { background-color: var(--spice-accent) !important; border-radius: 4px; height: 28px; width: fit-content; padding: 8px; position: absolute; right: 14px; bottom: 112px; color: black !important; box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.25) !important; } .main-connectBar-connectBar:after { border-bottom: none !important; } .main-connectBar-connectBar .icon, .main-connectBar-connectBar .gSLhUO { margin: 0px; margin-right: 8px; } /* player */ .Root__now-playing-bar { padding-right: 6px; margin: 0px 13px 13px 13px; width: calc(100% - 26px); box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.25) !important; border-radius: var(--border-radius-1); border: 1px solid var(--spice-player-border); } .main-nowPlayingBar-container { border-radius: var(--border-radius-1); } .gqeP9Y0_y6DLm4CD_m3Q { border: 0px; background: none; } .main-nowPlayingBar-container { border-top: 0px; } .now-playing--cover-expanded { transform: translateX(0px) !important; } .playback-bar, .progress-bar, .progress-bar__fg_wrapper, .lRNLjBiX_H7SPYbkJKLp, .lIrtJi5Y_8ENU19VSvJO { --fg-color: var(--spice-accent) !important; --is-active-fg-color: var(--spice-accent) !important; --bg-color: var(--spice-player-bar-bg); } /* Progress bar tooltip: * I think it makes sense to just remove the tooltip, given that the labels on the progress bar provide the exact same info. * Regardless, this style will prevent the text from pushing the player controls uncomfortably close to the top of the player bar. */ .prog-tooltip { width: 140px; overflow: hidden; display: none; } .progress-bar__slider, .giO6cIQ8auPNZuTvC4Y8 { background-color: var(--spice-accent) !important; border: 4px solid var(--spice-selected-row); box-shadow: 0 0 3px 0 var(--spice-player-bar-shadow) !important; box-sizing: content-box !important; width: 11px; height: 11px; opacity: 1 !important; display: block; } .main-nowPlayingWidget-nowPlaying>.ellipsis-one-line, .main-trackInfo-container { margin-left: 74px; } .main-coverSlotExpanded-container, .T6whS8zYB9fG_tIdTg6m { position: fixed; top: calc(100% - 320px); left: calc(100% - 220px); width: 200px; height: 200px; visibility: hidden; transform-origin: center; box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.5) !important; animation: 1s coverExpandedIn; animation-fill-mode: forwards; background: none; } .main-coverSlotExpanded-containerExitActive { display: none; } @keyframes coverExpandedIn { 99% { visibility: hidden; } 100% { visibility: visible; } } @keyframes coverExpandedOut { 99% { visibility: visible; } 100% { visibility: hidden; } } .main-coverSlotCollapsed-container, .zcsxy3fvYCmZGcE7VzW7 { position: fixed; top: -12px; left: 0px; width: 56px; height: 56px; visibility: visible; z-index: 99999 !important; } .main-coverSlotCollapsed-container, .cover-art .cover-art-image, .zcsxy3fvYCmZGcE7VzW7 { transform-origin: center; transition-timing-function: ease-in; transition: width 0.5s 0.2s, height 0.5s 0.2s, top 0.3s, left 0.5s, box-shadow 0.5s; } .main-coverSlotCollapsed-container[aria-hidden="true"], .zcsxy3fvYCmZGcE7VzW7[aria-hidden="true"] { left: calc(100vw - 178px); top: -245px; width: 200px; height: 200px; visibility: hidden; box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.5) !important; animation: 1s coverExpandedOut; } .main-coverSlotCollapsed-container[aria-hidden="false"], .zcsxy3fvYCmZGcE7VzW7[aria-hidden="false"] { transition-timing-function: ease-out !important; transition: width 0.5s 0.2s, height 0.5s 0.2s, top 0.5s 0.1s, left 0.3s, box-shadow 0.5s !important; } .main-coverSlotCollapsed-container[aria-hidden="true"] .cover-art .cover-art-image, .main-nowPlayingWidget-coverExpanded .zcsxy3fvYCmZGcE7VzW7 .cover-art .cover-art-image { width: 200px; height: 200px; } .CoverSlotExpanded__actionButton, .main-coverSlotCollapsed-expandButton, .CoverSlotExpanded__actionButton:hover, .main-coverSlotCollapsed-expandButton:hover, .kyn0AY4_gXWvbdivdFgP, .kyn0AY4_gXWvbdivdFgP:hover { background-color: var(--spice-card); } .now-playing-bar .cover-art-image { border-radius: var(--border-radius-2); } .playback-bar__progress-time, .main-playbackBarRemainingTime-container { color: var(--spice-text) !important; } .progress-bar--is-active .progress-bar__slider:focus { background-color: var(--spice-accent); } .volume-bar { margin-right: 8px; } .main-playPauseButton-button, .player-controls__buttons button:not(.main-playPauseButton-button) { --button-size: 28px !important; } .main-seekBack15sButton-button, .main-seekForward15sButton-button, .main-speedControlsButton-button { height: auto; color: var(--spice-button); } .main-playPauseButton-button svg { height: 24px; width: 24px; } .player-controls__buttons { margin-bottom: 8px; align-items: center; } .player-controls__buttons path { display: none !important; } .player-controls__left, .player-controls__right { margin-top: 2px; } .player-controls__buttons button { padding-left: 20px; padding-right: 20px; } .main-skipForwardButton-button { -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_next_24_filled.svg'); background-color: var(--spice-text) !important; height: 22px !important; } .main-skipBackButton-button { -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_previous_24_filled.svg'); background-color: var(--spice-text) !important; height: 22px !important; } .j4TkiByCgwfJawuHfzsd { /* Skip back 15 sec */ -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_skip_backward_15_24_filled.svg'); background-color: var(--spice-text) !important; height: 22px !important; } .Kvxb6GUtWNNo5mFeKfMn { /* Skip forward 15 sec */ -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_skip_forward_15_24_filled.svg'); background-color: var(--spice-text) !important; height: 22px !important; } .Y0lBew4O9_Ma84_Lnnsq { /* Speed icon for podcasts */ -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_top_speed_24_filled.svg'); background-color: var(--spice-text) !important; height: 22px !important; } /* Disabled */ .main-repeatButton-button[aria-checked="false"]{ -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_arrow_repeat_all_off_24_regular.svg'); background-color: var(--spice-subtext) !important; height: 22px !important; } /* Repeat one */ .main-repeatButton-button[aria-checked="mixed"]{ -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_arrow_repeat_all_once_24_filled.svg') !important; background-color: var(--spice-text) !important; height: 22px !important; } /* Repeat all */ .main-repeatButton-button[aria-checked="true"]{ -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_arrow_repeat_all_24_filled.svg'); background-color: var(--spice-text) !important; height: 22px !important; } /* Shuffle disabled */ .main-shuffleButton-button { -webkit-mask-image: url('./phosphor-icons/shuffle.svg'); background-color: var(--spice-subtext) !important; height: 22px !important; } /* Shuffle enabled */ .main-shuffleButton-button[aria-checked="true"] { -webkit-mask-image: url('./phosphor-icons/shuffle-bold.svg'); background-color: var(--spice-text) !important; height: 22px !important; } /*Like button*/ .control-button-heart[aria-checked=true] { color: var(--spice-accent); } /* ads */ .main-leaderboardComponent-container, .main-billboardComponent-footer, .k6onUQZSeZIsonJ4cSpK { display: none; } .desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer, .desktoproutes-homepage-takeover-ad-hptoComponent-container, .snMc3rl8H2pM9cqkTpQ6 { display: none !important; } .main-topBar-UpgradeButton { display: none !important; } /* play buttons */ .main-playButton-button, .main-playButton-PlayButton, .main-trackList-rowPlayPauseButton{ background-color: var(--spice-text) !important; -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_play_24_filled.svg'); } /* spicetify */ #spicetify-sidebar-config { flex-direction: column; top: -60px !important; } #spicetify-show-list >* { padding: 0px; } /* spicetify extensions */ .main-topBar-button[title="Popup Lyrics"], .main-topBar-button[title="Full App Display"], .main-topBar-button[title="Bookmark"] { background-color: var(--spice-card) !important; }