Created
October 9, 2021 19:02
-
-
Save Wist9063/d3b0a0e70a7ff6f5d36383d9a831ffef to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --bar-height: 70px; | |
| --bar-cover-art-size: 40px; | |
| --main-gap: 10px; | |
| --main-corner-radius: 10px; | |
| --scrollbar-vertical-size: 8px; | |
| --cover-border-radius: 8px; | |
| --playbar-movement-anim-speed: 0.5s; | |
| --image-radius: 10px; | |
| --sidebar-icons-border-radius: 50%; | |
| --song-transition-speed: 3s; | |
| } | |
| @font-face { | |
| font-family: "Google Sans Display"; | |
| src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2") format("woff2"); | |
| font-style: normal; | |
| font-weight: 400; | |
| } | |
| @font-face { | |
| font-family: "Google Sans Display"; | |
| src: url("glue-resources/fonts/GoogleSansDisplayMedium.woff2") format("woff2"); | |
| font-style: normal; | |
| font-weight: 500; | |
| } | |
| @font-face { | |
| font-family: "Roboto"; | |
| src: url("glue-resources/fonts/Roboto.woff2") format("woff2"); | |
| font-style: normal; | |
| font-weight: 400; | |
| } | |
| @font-face { | |
| font-family: "Roboto"; | |
| src: url("glue-resources/fonts/RobotoMedium.woff2") format("woff2"); | |
| font-style: normal; | |
| font-weight: 500; | |
| } | |
| body { | |
| --glue-font-family: "Google Sans Display","Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif; | |
| --info-font-family: "Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif; | |
| font-family: var(--glue-font-family); | |
| letter-spacing: normal; | |
| } | |
| .os-scrollbar-handle { | |
| background-color: var(--spice-text) !important; | |
| border-radius: calc(var(--scrollbar-vertical-size) / 2); | |
| } | |
| .os-scrollbar-handle:hover { | |
| filter: brightness(80%); | |
| } | |
| ::-webkit-scrollbar { | |
| width: var(--scrollbar-vertical-size); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background-color: var(--spice-text) !important; | |
| border-radius: calc(var(--scrollbar-vertical-size) / 2); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| filter: brightness(80%); | |
| } | |
| .main-type-mesto, | |
| .main-type-mestoBold, | |
| .main-type-ballad, | |
| .main-type-balladBold, | |
| .main-type-canon { | |
| font-family: var(--info-font-family); | |
| letter-spacing: normal; | |
| } | |
| .main-type-ballad { | |
| font-weight: 500; | |
| } | |
| .lyrics-lyricsContainer-LyricsLine { | |
| font-family: var(--glue-font-family); | |
| letter-spacing: -.03em !important; | |
| } | |
| .main-rootlist-rootlistDivider { | |
| display: none; | |
| } | |
| input { | |
| background-color: unset !important; | |
| border-radius: 0 !important; | |
| padding: 6px 10px 6px 48px; | |
| color: var(--spice-text) !important; | |
| } | |
| input[type=range] { | |
| -webkit-appearance: none; | |
| background: transparent; | |
| padding: 0px; | |
| } | |
| input[type=range]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| margin-top: -4px; | |
| border-radius: 50%; | |
| background-color: var(--spice-text); | |
| } | |
| input[type=range]::-webkit-slider-thumb:hover, | |
| input[type=range]::-webkit-slider-thumb:active { | |
| filter: brightness(80%); | |
| } | |
| input[type=range]::after { | |
| z-index: 9999; | |
| content: attr(tooltip); | |
| position: absolute; | |
| min-width: 50px; | |
| top: -10px; | |
| left: 50%; | |
| transform: translateX(calc(-50%)); | |
| padding: 0 5px; | |
| border-radius: 4px; | |
| text-align: center; | |
| color: var(--spice-sidebar-text); | |
| background-color: var(--spice-button); | |
| transition: opacity 0.25s ease; | |
| opacity: 0; | |
| } | |
| input[type=range]:hover::after, | |
| input[type=range]:active::after { | |
| opacity: 1; | |
| } | |
| input[type=range]:focus { | |
| outline: none; | |
| } | |
| input[type=range]::-webkit-slider-runnable-track { | |
| width: 100%; | |
| height: 8px; | |
| background-color: rgba(var(--spice-rgb-text), .2); | |
| border-radius: 50vw; | |
| } | |
| input[type=number], | |
| input[type=text] { | |
| height: 32px; | |
| border: none; | |
| border-radius: 4px !important; | |
| padding: 0px 10px; | |
| background-color: rgba(var(--spice-rgb-selected-row), .4) !important; | |
| color: var(--spice-subtext) !important; | |
| } | |
| input[type=number]:hover, | |
| input[type=number]:active, | |
| input[type=text]:hover, | |
| input[type=text]:active { | |
| background-color: rgba(var(--spice-rgb-selected-row), .6) !important; | |
| } | |
| .x-searchInput-searchInputSearchIcon, | |
| .x-searchInput-searchInputClearButton { | |
| color: var(--spice-text) !important; | |
| } | |
| .main-home-homeHeader, | |
| .x-entityHeader-overlay, | |
| .x-actionBarBackground-background, | |
| .main-actionBarBackground-background, | |
| .main-entityHeader-overlay, | |
| .main-entityHeader-backgroundColor | |
| { | |
| background-color: unset !important; | |
| background-image: unset !important; | |
| } | |
| .main-playButton-PlayButton.main-playButton-primary { | |
| color: white; | |
| } | |
| .connect-title, .connect-header { | |
| display: none; | |
| } | |
| .connect-device-list { | |
| margin: 0px -5px; | |
| } | |
| /* Remove Topbar background colour */ | |
| .main-topBar-background { | |
| background-color: unset !important; | |
| } | |
| .main-topBar-overlay { | |
| background-color: var(--spice-main); | |
| } | |
| .main-entityHeader-shadow, | |
| .main-contextMenu-menu, | |
| .connect-device-list-container { | |
| box-shadow: 0 4px 20px #21212130; | |
| } | |
| .main-trackList-playingIcon { | |
| filter: grayscale(1); | |
| } | |
| span.artist-artistVerifiedBadge-badge svg > path:first-of-type { | |
| fill: var(--spice-button); | |
| } | |
| span.artist-artistVerifiedBadge-badge svg > path:last-of-type { | |
| fill: var(--spice-text); | |
| } | |
| /* Full window artist background */ | |
| .main-entityHeader-background.main-entityHeader-gradient { | |
| opacity: 0.3; | |
| } | |
| .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: 120px !important; | |
| line-height: 120px !important; | |
| } | |
| .main-contextMenu-menu { | |
| background-color: var(--spice-button); | |
| } | |
| .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-main); | |
| } | |
| .main-playPauseButton-button { | |
| background-color: var(--spice-button); | |
| color: white; | |
| } | |
| /** Queue page header */ | |
| .queue-queue-title, | |
| .queue-playHistory-title { | |
| color: var(--spice-text) !important; | |
| } | |
| /** Artist page */ | |
| .artist-artistOverview-heading { | |
| color: var(--spice-text) !important; | |
| } | |
| .artist-artistAbout-content .artist-artistAbout-cityBlock div, | |
| .artist-artistAbout-content .artist-artistAbout-stats div { | |
| color: var(--spice-text) !important; | |
| } | |
| .artist-artistAbout-content div { | |
| color: var(--spice-text) !important; | |
| } | |
| /** Cards */ | |
| .main-cardImage-imageWrapper { | |
| background-color: transparent; | |
| box-shadow: unset; | |
| -webkit-box-shadow: unset; | |
| } | |
| .main-cardImage-imagePlaceholder, .main-cardImage-image { | |
| border-radius: var(--cover-border-radius); | |
| } | |
| .main-rootlist-rootlistDivider { | |
| background-color: unset; | |
| } | |
| .main-nowPlayingBar-nowPlayingBar { | |
| height: var(--bar-height); | |
| } | |
| .Root__top-bar { | |
| border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0; | |
| } | |
| .main-topBar-background { | |
| border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0; | |
| } | |
| .Root__main-view { | |
| background-color: var(--spice-main); | |
| border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0; | |
| overflow: hidden; | |
| } | |
| .main-buddyFeed-buddyFeed { | |
| box-shadow: unset; | |
| -webkit-box-shadow: unset; | |
| z-index: 0; | |
| } | |
| .main-buddyFeed-headerTitle, | |
| .main-buddyFeed-activityMetadata .main-buddyFeed-username a { | |
| color: var(--spice-sidebar-text); | |
| } | |
| .main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a, | |
| .main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName span, | |
| .main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink, | |
| .main-buddyFeed-activityMetadata .main-buddyFeed-timestamp { | |
| color: rgba(var(--spice-rgb-sidebar-text), 0.8); | |
| } | |
| .main-buddyFeed-buddyFeedRoot .main-avatar-avatar, | |
| .main-buddyFeed-buddyFeedRoot .main-buddyFeed-overlay { | |
| width: 32px !important; | |
| height: 32px !important; | |
| } | |
| .view-homeShortcutsGrid-shortcut { | |
| overflow: hidden; | |
| background-color: rgba(var(--spice-rgb-selected-row), 0.4); | |
| } | |
| .view-homeShortcutsGrid-shortcut:hover { | |
| background-color: rgba(var(--spice-rgb-selected-row), 0.6); | |
| } | |
| .cover-art, | |
| .main-userWidget-box.upd-avail, | |
| .view-homeShortcutsGrid-shortcut, | |
| :not(.view-homeShortcutsGrid-imageWrapper) > .main-image-image:not(.main-avatar-image) { | |
| border-radius: var(--image-radius) !important; | |
| } | |
| .main-avatar-image, | |
| .main-userWidget-box:not(.upd-avail), | |
| .main-avatar-userIcon, | |
| .view-homeShortcutsGrid-shortcutLink { | |
| border-radius: var(--sidebar-icons-border-radius) !important; | |
| } | |
| .main-userWidget-box { | |
| background-color: transparent; | |
| } | |
| .main-avatar-avatar.main-avatar-withBadge:after { | |
| box-shadow: 0 0 0 2px var(--spice-sidebar); | |
| background-color: var(--spice-notification); | |
| right: 0; | |
| } | |
| .Root__now-playing-bar { | |
| border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius); | |
| background-color: unset; | |
| } | |
| .main-nowPlayingBar-container { | |
| border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius); | |
| background-color: unset; | |
| background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%); | |
| border-top: 0; | |
| min-width: 518px; | |
| } | |
| .main-buddyFeed-findFriendsButton { | |
| color: var(--spice-sidebar-text); | |
| } | |
| .main-connectBar-connectBar { | |
| border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius); | |
| border: 2px solid var(--spice-main); | |
| border-top: 0; | |
| background-color: var(--spice-button) !important; | |
| color: var(--spice-text) !important; | |
| } | |
| .Root__nav-bar { | |
| height: 100%; | |
| z-index: 1; | |
| width: var(--sidebar-width) !important; | |
| } | |
| .main-buddyFeed-buddyFeedRoot { | |
| height: 100%; | |
| } | |
| .main-buddyFeed-buddyFeedRoot .os-content { | |
| padding-top: 0 !important; | |
| } | |
| html, | |
| .Root__nav-bar, | |
| .main-buddyFeed-buddyFeed { | |
| background-color: var(--spice-sidebar) !important; | |
| } | |
| html { | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| } | |
| .Root__nav-bar .link-subtle, | |
| .main-rootlist-rootlistItemLink:link, | |
| .main-rootlist-rootlistItemLink:visited, | |
| .main-rootlist-rootlistContent span, | |
| .main-navBar-entryPoints span { | |
| color: var(--spice-sidebar-text) | |
| } | |
| .main-navBar-navBarItem svg { | |
| width: 24px !important; | |
| height: 24px !important; | |
| } | |
| .main-navBar-navBarItem { | |
| position: relative; | |
| padding: 0px; | |
| } | |
| #spicetify-show-list >* { | |
| padding: 0 8px; | |
| } | |
| .main-rootlist-statusIcons { | |
| color: var(--spice-sidebar-text); | |
| padding-right: 16px; | |
| } | |
| .main-rootlist-statusIcons .main-playButton-button { | |
| color: var(--spice-sidebar-text); | |
| } | |
| .main-rootlist-expandArrow { | |
| position: absolute; | |
| top: 20px; | |
| right: 12px; | |
| width: 16px; | |
| height: 16px; | |
| color: var(--spice-sidebar-text) !important; | |
| background-color: var(--spice-button); | |
| border-radius: 50%; | |
| box-shadow: 0 0 0 2px var(--spice-sidebar); | |
| opacity: 0; | |
| } | |
| li.GlueDropTarget:hover .main-rootlist-expandArrow { | |
| opacity: 1; | |
| } | |
| html:not(.sidebar-hide-text) .main-rootlist-expandArrow { | |
| opacity: 1; | |
| } | |
| .main-rootlist-expandArrow::before { | |
| font-size: 10px; | |
| padding-bottom: 3px; | |
| } | |
| html.sidebar-hide-text .main-rootlist-expandArrow { | |
| right: 4px; | |
| } | |
| html.sidebar-hide-text .main-navBar-navBarItem span, | |
| html.sidebar-hide-text .main-rootlist-rootlistContent span, | |
| html.sidebar-hide-text .main-rootlist-rootlistItem span, | |
| html.sidebar-hide-text .main-rootlist-statusIcons, | |
| html.sidebar-hide-text .GlueDropTarget span { | |
| display: none; | |
| } | |
| .main-rootlist-rootlist { | |
| margin-top: 0; | |
| } | |
| .main-rootlist-rootlist::before, | |
| .main-rootlist-rootlist::after { | |
| z-index: 10; | |
| position: absolute; | |
| content: ""; | |
| left: 0px; | |
| right: 0px; | |
| pointer-events: none; | |
| transition: height 0.5s ease; | |
| } | |
| .main-rootlist-rootlist.no-top-shadow::before { | |
| height: 0px; | |
| } | |
| .main-rootlist-rootlist.no-bottom-shadow::after { | |
| height: 0px; | |
| } | |
| .main-rootlist-rootlist::before { | |
| top: 0px; | |
| height: 5%; | |
| background: linear-gradient(to bottom, var(--spice-sidebar) 10%, transparent); | |
| } | |
| .main-rootlist-rootlist::after { | |
| bottom: 0px; | |
| height: 15%; | |
| background: linear-gradient(to top, var(--spice-sidebar) 10%, transparent); | |
| } | |
| .Root__nav-bar .os-scrollbar-vertical, | |
| .main-buddyFeed-buddyFeedRoot .os-scrollbar-vertical { | |
| display: none; | |
| } | |
| .x-toggle-indicatorWrapper { | |
| background-color: var(--spice-shadow); | |
| } | |
| input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper { | |
| background-color: var(--spice-button-active); | |
| } | |
| /** */ | |
| .main-topBar-historyButtons .main-topBar-button { | |
| background-color: unset; | |
| width: 24px; | |
| height: 24px; | |
| } | |
| .main-topBar-historyButtons svg { | |
| color: var(--spice-button); | |
| fill: var(--spice-button); | |
| } | |
| .playback-bar__progress-time, | |
| .playback-bar__progress-time-elapsed, | |
| .main-playbackBarRemainingTime-container { | |
| display: none; | |
| } | |
| .playback-bar { | |
| position: absolute; | |
| width: var(--main-view-width); | |
| left: var(--sidebar-width); | |
| bottom: calc(var(--main-gap) + var(--bar-height) - 12px / 2); | |
| } | |
| .Root.is-connectBarVisible .playback-bar { | |
| bottom: calc(var(--main-gap) + var(--bar-height) + 24px - 12px / 2); | |
| } | |
| .main-nowPlayingWidget-coverArt .cover-art { | |
| width: var(--bar-cover-art-size) !important; | |
| height: var(--bar-cover-art-size) !important; | |
| } | |
| .player-controls__buttons { | |
| margin-bottom: 0; | |
| width: 192px; | |
| } | |
| .progress-bar { | |
| --progress-bar-height: 2px; | |
| --fg-color: var(--spice-button); | |
| --bg-color: rgba(var(--spice-rgb-text), .2); | |
| } | |
| .progress-bar__slider { | |
| display: block !important; | |
| opacity: 0; | |
| transition: opacity 0.2s ease; | |
| } | |
| .progress-bar:hover .progress-bar__slider, | |
| .progress-bar:active .progress-bar__slider { | |
| opacity: 1; | |
| } | |
| .progress-bar:not(:active) .x-progressBar-progressBarBg > div:first-child > div { | |
| transition: transform var(--playbar-movement-anim-speed) ease; | |
| } | |
| .progress-bar:not(:active) .progress-bar__slider { | |
| transition-property: left,opacity; | |
| } | |
| .playback-bar .prog-tooltip { | |
| position: absolute; | |
| min-width: 100px; | |
| top: -35px; | |
| left: 50%; | |
| transform: translateX(calc(-50%)); | |
| padding: 0 5px; | |
| border-radius: 4px; | |
| text-align: center; | |
| color: var(--spice-text); | |
| background-color: var(--spice-button); | |
| } | |
| .playback-bar:not(:active) .prog-tooltip { | |
| transition: transform var(--playbar-movement-anim-speed) ease; | |
| } | |
| .minimal-player .player-controls__buttons { | |
| width: 120px; | |
| gap: 0px; | |
| } | |
| .minimal-player .player-controls__left, | |
| .minimal-player .player-controls__right { | |
| --button-size: 16px !important; | |
| gap: 0px; | |
| } | |
| .minimal-player .volume-bar { | |
| flex: 0 1 70px; | |
| } | |
| .extra-minimal-player .player-controls__buttons { | |
| width: 64px; | |
| } | |
| .extra-minimal-player .main-shuffleButton-button, | |
| .extra-minimal-player .main-repeatButton-button, | |
| .extra-minimal-player .ExtraControls__connect-device-picker, | |
| .extra-minimal-player .volume-bar .progress-bar-wrapper { | |
| display: none; | |
| } | |
| .extra-minimal-player .volume-bar { | |
| flex: 0 0 32px; | |
| } | |
| .main-trackInfo-name { | |
| font-weight: 500; | |
| } | |
| .main-topBar-topbarContent .main-playButton-PlayButton { | |
| --size: 35px !important; | |
| } | |
| .main-entityHeader-image { | |
| border-radius: 5px; | |
| } | |
| .main-entityHeader-metaDataText, | |
| .main-duration-container { | |
| color: var(--spice-subtext); | |
| } | |
| /** Sidebar */ | |
| .main-rootlist-rootlist .os-content { | |
| padding: 0 0 8px 0 !important; | |
| } | |
| .main-rootlist-rootlistDividerContainer { | |
| display: none; | |
| } | |
| .main-rootlist-rootlistItem a { | |
| align-items: center; | |
| border-radius: 4px; | |
| display: flex; | |
| height: 56px; | |
| padding: 0 12px; | |
| } | |
| img.playlist-picture { | |
| width: 32px; | |
| height: 32px; | |
| flex: 0 0 32px; | |
| background-size: cover; | |
| background-position: center; | |
| border-radius: var(--sidebar-icons-border-radius); | |
| } | |
| .main-rootlist-rootlistItem a span { | |
| margin-left: 24px; | |
| } | |
| .main-rootlist-rootlistItem { | |
| padding-left: calc(var(--indentation)*var(--left-sidebar-item-indentation-width)); | |
| padding-right: 0; | |
| transition: padding-left .5s ease; | |
| } | |
| html.sidebar-hide-text .main-rootlist-rootlistItem { | |
| padding: 0; | |
| } | |
| .main-rootlist-dropIndicator { | |
| background: var(--spice-selected-row); | |
| height: 2px; | |
| } | |
| .main-rootlist-rootlistPlaylistsScrollNode { | |
| padding: 0px; | |
| } | |
| .main-collectionLinkButton-icon, | |
| .main-createPlaylistButton-icon { | |
| margin: 0px; | |
| } | |
| .main-navBar-navBarLink, | |
| .main-collectionLinkButton-collectionLinkButton, | |
| .main-createPlaylistButton-button { | |
| gap: 24px; | |
| height: 56px; | |
| } | |
| li.GlueDropTarget { | |
| padding: 0 8px; | |
| } | |
| /** OS-specific window controls dodge */ | |
| #main:not([top-bar^="none"]) .main-topBar-background { | |
| -webkit-app-region: no-drag; | |
| } | |
| #main:not([top-bar="none-padding"]) .main-navBar-navBar, | |
| #main:not([top-bar="none-padding"]) .main-buddyFeed-header, | |
| #main:not([top-bar="none-padding"]) .main-navBar-entryPoints { | |
| padding-top: 8px !important; | |
| } | |
| #main:not([top-bar^="none"]) { | |
| padding-top: 31px; | |
| } | |
| #main:not([top-bar^="none"])::before { | |
| z-index: 999; | |
| content: ""; | |
| position: absolute; | |
| top: 0px; | |
| left: 0px; | |
| right: 135px; | |
| height: 31px; | |
| background-color: rgba(0, 0, 0, 0.53); | |
| -webkit-app-region: drag; | |
| pointer-events: none; | |
| } | |
| #main[top-bar="solid"]::before { | |
| right: 0px; | |
| background-color: black; | |
| } | |
| #main[top-bar="none-padding"] .spotify__os--is-windows .main-navBar-navBar { | |
| padding-top: 24px; | |
| } | |
| #main[top-bar="none-padding"] .spotify__container--is-desktop:not(.fullscreen).spotify__os--is-windows .main-navBar-entryPoints { | |
| padding-top: 22px; | |
| } | |
| #main[top-bar="none-padding"] .spotify__os--is-windows .main-buddyFeed-header { | |
| padding-top: 32px; | |
| } | |
| #main[top-bar="none-padding"] .spotify__container--is-desktop.spotify__os--is-windows[dir=ltr] .Root__top-bar + .main-buddyFeed-buddyFeedRoot .main-topBar-container { | |
| padding-right: 167px; | |
| } | |
| .main-topBar-container { | |
| max-width: unset; | |
| } | |
| /** Custom elements */ | |
| .dribs-playlist-list { | |
| padding-bottom: 86px; | |
| } | |
| #dribbblish-back-shadow { | |
| position: fixed; | |
| width: var(--main-view-width); | |
| height: calc(var(--main-view-height) + var(--bar-height)); | |
| box-shadow: 0 0 10px 3px #0000003b; | |
| border-radius: var(--main-corner-radius); | |
| z-index: 2; | |
| pointer-events: none; | |
| } | |
| #dribbblish-config { | |
| display: none; | |
| z-index: 99999; | |
| position: absolute; | |
| inset: 0px; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--spice-text); | |
| } | |
| #dribbblish-config[active] { | |
| display: flex; | |
| } | |
| #dribbblish-config .dribbblish-config-container { | |
| z-index: 1; | |
| position: relative; | |
| max-width: 80%; | |
| background-color: rgba(var(--spice-rgb-main), 0.9); | |
| backdrop-filter: blur(3px); | |
| padding: 20px 15px; | |
| border-radius: var(--main-corner-radius); | |
| box-shadow: 0 0 10px 3px #0000003b; | |
| display: flex; | |
| gap: 5px; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| #dribbblish-config .dribbblish-config-items { | |
| max-height: 60vh; | |
| overflow-y: auto; | |
| padding: 0px 50px; | |
| } | |
| .dribbblish-config-area > h2 { | |
| text-align: center; | |
| } | |
| #dribbblish-config .dribbblish-config-item { | |
| position: relative; | |
| width: 100%; | |
| padding: 5px 0px; | |
| height: min-content; | |
| display: grid; | |
| grid-template-columns: 1fr auto; | |
| grid-template-rows: 1fr 1fr; | |
| gap: 0px 10px; | |
| grid-template-areas: | |
| "header input" | |
| "description input"; | |
| } | |
| #dribbblish-config .dribbblish-config-item > .x-settings-title { | |
| grid-area: header; | |
| margin: 0px; | |
| height: min-content; | |
| position: relative; | |
| bottom: 0px; | |
| } | |
| #dribbblish-config .dribbblish-config-item > .x-settings-title.no-desc { | |
| bottom: -10px; | |
| } | |
| #dribbblish-config .dribbblish-config-item > .main-type-mesto { | |
| grid-area: description; | |
| height: min-content; | |
| } | |
| #dribbblish-config .dribbblish-config-item > .x-settings-secondColumn { | |
| grid-area: input; | |
| } | |
| #dribbblish-config .dribbblish-config-close { | |
| position: absolute; | |
| top: 15px; | |
| right: 15px; | |
| } | |
| #dribbblish-config .dribbblish-config-backdrop { | |
| position: absolute; | |
| content: ""; | |
| inset: 0px; | |
| backdrop-filter: blur(3px) brightness(60%); | |
| } | |
| /** Rearrange player bar */ | |
| .main-nowPlayingBar-left { | |
| order: 1; | |
| flex: 1; | |
| width: auto; | |
| min-width: 0 !important; | |
| } | |
| .main-nowPlayingBar-center { | |
| order: 0; | |
| flex: 1; | |
| width: auto; | |
| min-width: unset !important; | |
| } | |
| .main-nowPlayingBar-right { | |
| order: 2; | |
| flex: 1; | |
| width: auto; | |
| min-width: unset !important; | |
| } | |
| .main-nowPlayingWidget-nowPlaying { | |
| justify-content: center; | |
| } | |
| .player-controls { | |
| justify-content: flex-start; | |
| flex-direction: row; | |
| } | |
| .main-playPauseButton-button { | |
| background-color: transparent; | |
| } | |
| .main-playPauseButton-button svg { | |
| width: 32px !important; | |
| height: 32px !important; | |
| color: var(--spice-button); | |
| } | |
| /** Main container */ | |
| .contentSpacing, | |
| .artist-artistDiscography-headerContainer { | |
| padding-left: 64px; | |
| padding-right: 64px; | |
| } | |
| @media (min-width: 1024px) { | |
| .contentSpacing, | |
| .artist-artistDiscography-headerContainer { | |
| padding-left: 128px; | |
| padding-right: 128px; | |
| } | |
| } | |
| .main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon, | |
| .main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText, | |
| .main-createPlaylistButton-button { | |
| opacity: 1; | |
| } | |
| .main-collectionLinkButton-collectionLinkText, | |
| .main-createPlaylistButton-text, | |
| .main-navBar-navBarLink > span { | |
| font-size: 14px; | |
| font-weight: 400; | |
| letter-spacing: normal; | |
| line-height: 20px; | |
| text-transform: none; | |
| } | |
| .main-likedSongsButton-likedSongsIcon, | |
| .main-yourEpisodesButton-yourEpisodesIcon, | |
| .main-createPlaylistButton-createPlaylistIcon { | |
| background: unset !important; | |
| } | |
| .main-createPlaylistButton-icon, | |
| .main-collectionLinkButton-icon, | |
| .main-createPlaylistButton-icon { | |
| height: 40px; | |
| } | |
| .main-likedSongsButton-likedSongsIcon svg, | |
| .main-yourEpisodesButton-yourEpisodesIcon svg, | |
| .main-createPlaylistButton-createPlaylistIcon svg { | |
| fill: var(--spice-sidebar-text); | |
| width: 32px; | |
| height: 32px; | |
| } | |
| .main-yourEpisodesButton-yourEpisodesIcon svg path { | |
| fill: var(--spice-sidebar-text); | |
| } | |
| /** Grid */ | |
| .Root__top-container { | |
| grid-template-areas: | |
| "nav-bar main-view buddy-feed" | |
| "nav-bar now-playing-bar buddy-feed"; | |
| padding: var(--main-gap) 0; | |
| } | |
| html:not(.buddyfeed-visible) .Root__top-container { | |
| padding-right: var(--main-gap); | |
| } | |
| /** Minimal profile button */ | |
| span.main-userWidget-displayName, | |
| .main-userWidget-box svg { | |
| display: none; | |
| } | |
| /** Sidebar config */ | |
| #dribs-hidden-list { | |
| background-color: rgba(var(--spice-rgb-main), .3); | |
| } | |
| #dribs-sidebar-config { | |
| position: relative; | |
| width: 100%; | |
| height: 0; | |
| display: flex; | |
| justify-content: space-evenly; | |
| align-items: center; | |
| top: -30px; | |
| left: 0; | |
| } | |
| #dribs-sidebar-config button { | |
| min-width: 60px; | |
| border-radius: 3px; | |
| background-color: var(--spice-main); | |
| color: var(--spice-text); | |
| border: 1px solid var(--spice-text); | |
| } | |
| #dribs-sidebar-config button:disabled { | |
| color: var(--spice-button-disabled); | |
| } | |
| .main-navBar-entryPoints { | |
| --left-sidebar-padding-left: 24px; | |
| --left-sidebar-padding-right: 24px; | |
| padding: 0px 8px; | |
| } | |
| .main-navBar-navBar .main-rootlist-wrapper > div:nth-child(2), | |
| .main-navBar-entryPoints, | |
| #spicetify-show-list, | |
| .main-rootlist-rootlistContent .os-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| } | |
| #spicetify-show-list:empty { | |
| display: none; | |
| } | |
| .main-rootlist-wrapper > div:nth-child(2) > li img, | |
| .main-navBar-navBarLink > .icon { | |
| z-index: 100; | |
| } | |
| .main-collectionLinkButton-collectionLinkButton, | |
| .main-createPlaylistButton-button { | |
| position: relative; | |
| } | |
| .main-navBar-navBarItem:hover::before, | |
| .main-rootlist-rootlistItem:hover::before, | |
| .main-rootlist-rootlistItemLinkActive::before, | |
| .main-collectionLinkButton-collectionLinkButton:hover::before, | |
| .main-collectionLinkButton-selected::before, | |
| .main-createPlaylistButton-button:hover::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0px; | |
| background-color: rgba(var(--spice-rgb-main), 0.4); | |
| border-radius: var(--image-radius); | |
| pointer-events: none; | |
| } | |
| .main-navBar-navBarLinkActive, | |
| .main-collectionLinkButton-selected { | |
| border-radius: var(--image-radius); | |
| background-color: rgba(var(--spice-rgb-main), 0.4); | |
| } | |
| .main-navBar-navBar a:hover, .main-navBar-navBar a:hover span { | |
| color: unset !important; | |
| } | |
| div.GlueDropTarget.personal-library >* { | |
| padding: 0 16px; | |
| height: 56px; | |
| border-radius: 4px; | |
| } | |
| div.GlueDropTarget.personal-library >*.active { | |
| background: transparent; | |
| } | |
| /** Big cover, small cover */ | |
| .main-coverSlotExpanded-container { | |
| position: fixed; | |
| z-index: 2; | |
| width: 250px; | |
| height: 250px; | |
| bottom: calc(var(--main-gap) + var(--bar-height) + 10px); | |
| left: calc(var(--sidebar-width) + 10px); | |
| } | |
| .Root.is-connectBarVisible .main-coverSlotExpanded-container { | |
| bottom: calc(var(--main-gap) + var(--bar-height) + 24px + 10px); | |
| } | |
| html.right-expanded-cover .main-coverSlotExpanded-container { | |
| right: calc(var(--main-gap) + 10px); | |
| left: unset; | |
| } | |
| html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container { | |
| right: calc(var(--main-gap) + var(--buddy-feed-width) + 10px); | |
| left: unset; | |
| } | |
| .main-coverSlotExpanded-container img { | |
| border-radius: 4px; | |
| } | |
| .cover-art { | |
| border-radius: 4px; | |
| } | |
| .main-nowPlayingWidget-coverExpanded .main-coverSlotCollapsed-container { | |
| opacity: 0; | |
| } | |
| .main-nowPlayingWidget-coverExpanded { | |
| transform: translateX(-27px); | |
| } | |
| /** Mini dribbblish */ | |
| .x-categoryCard-CategoryCard > div { | |
| background-color: var(--spice-main); | |
| width: calc(100% - 14px); | |
| height: calc(100% - 6px); | |
| margin: 3px 10px; | |
| border-radius: 5px; | |
| } | |
| .x-categoryCard-CategoryCard { | |
| height: 100px; | |
| } | |
| .x-categoryCard-image { | |
| width: 50px !important; | |
| height: 50px !important; | |
| } | |
| .x-heroCategoryCard-HeroCategoryCard > div { | |
| background-color: var(--spice-main); | |
| width: calc(100% - 20px); | |
| height: calc(100% - 6px); | |
| margin: 3px 16px; | |
| border-radius: 5px; | |
| } | |
| .main-buttons-button:not(.main-entityHeader-titleButton) { | |
| color: var(--spice-main); | |
| } | |
| .main-dropDown-dropDown, | |
| .x-sortBox-sortDropdown { | |
| background-color: rgba(var(--spice-rgb-selected-row), .4) !important; | |
| color: var(--spice-subtext); | |
| } | |
| .main-dropDown-dropDown:hover, | |
| .x-sortBox-sortDropdown:hover { | |
| background-color: rgba(var(--spice-rgb-selected-row), .6) !important; | |
| } | |
| .connect-device-list-item:focus, | |
| .connect-device-list-item:hover { | |
| background-color: rgba(var(--spice-rgb-selected-row), .3); | |
| } | |
| .bookmark-filter { | |
| color: var(--spice-main) !important; | |
| } | |
| /* 1.1.56 */ | |
| .main-navBar-navBar { | |
| width: var(--sidebar-width) !important; | |
| } | |
| .main-entityHeader-container.main-entityHeader-nonWrapped { | |
| padding-left: 64px; | |
| padding-right: 64px; | |
| } | |
| @media (min-width: 1024px) { | |
| .main-entityHeader-container.main-entityHeader-nonWrapped { | |
| padding-left: 128px; | |
| padding-right: 128px; | |
| } | |
| } | |
| .main-userWidget-dropDownMenu > li > button { | |
| color: rgba(var(--spice-rgb-selected-row), .7); | |
| padding-left: 8px; | |
| text-decoration: none; | |
| } | |
| .main-userWidget-dropDownMenu > li > button:hover, | |
| .main-userWidget-dropDownMenu > li > button:focus { | |
| color: var(--spice-text); | |
| } | |
| .main-userWidget-dropDownMenu svg { | |
| position: unset; | |
| } | |
| .main-userWidget-dropDownMenu > li svg { | |
| position: absolute; | |
| } | |
| .main-buddyFeed-buddyFeed.main-buddyFeed-buddyFeed-expanded { | |
| z-index: 4; | |
| } | |
| .main-actionBar-ActionBarRow button:not(.main-playButton-primary) { | |
| color: var(--spice-subtext); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment