mirror of
https://github.com/morpheusthewhite/spicetify-themes.git
synced 2024-11-22 19:02:45 +01:00
1638 lines
40 KiB
CSS
1638 lines
40 KiB
CSS
: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;
|
|
}
|