spicetify-themes/Dribbblish/user.css

556 lines
18 KiB
CSS

:root {
--corner-radius: 10px;
--bar-cover-art-size: 40px;
--scrollbar-vertical-size: 10px;
--scrollbar-horizontal-size: 10px;
}
@font-face {
font-family: "Google Sans Display";
src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Google Sans Display";
src: url("glue-resources/fonts/GoogleSansDisplayMedium.woff2") format("woff2");
font-style: normal;
font-weight: 500;
}
@font-face {
font-family: "Roboto";
src: url("glue-resources/fonts/Roboto.woff2") format("woff2");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Roboto";
src: url("glue-resources/fonts/RobotoMedium.woff2") format("woff2");
font-style: normal;
font-weight: 500;
}
body {
--glue-font-family: "Google Sans Display", "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew,
Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
--info-font-family: "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica,
arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
font-family: var(--glue-font-family);
letter-spacing: normal;
}
.Root__top-container {
grid-template-areas:
"left-sidebar main-view right-sidebar"
"left-sidebar now-playing-bar right-sidebar" !important;
gap: 0;
padding-left: 0 !important;
}
.Root__now-playing-bar {
background-color: var(--spice-player);
border-radius: 0 0 var(--corner-radius) var(--corner-radius) !important;
grid-area: now-playing-bar !important;
}
.Root__main-view {
border-radius: var(--corner-radius) var(--corner-radius) 0 0 !important;
grid-area: main-view !important;
}
.Root__right-sidebar {
padding-left: 8px;
grid-area: right-sidebar !important;
}
.Root__right-sidebar:not(:has(> aside)) {
padding-left: 0;
}
.Root__right-sidebar > aside {
border-radius: var(--corner-radius) !important;
box-shadow: 0 0 10px 3px #0000003b;
}
.Root__nav-bar {
grid-area: left-sidebar !important;
}
/* move the progress bar to the top */
.playback-bar {
position: absolute;
left: 0;
top: -5px;
}
.main-nowPlayingBar-nowPlayingBar {
position: relative;
padding-inline-end: 16px !important;
}
.progress-bar {
--progress-bar-height: 2px;
--progress-bar-radius: 0;
--fg-color: var(--spice-button);
--bg-color: rgba(var(--spice-rgb-text), 0.2);
}
/* add gradient to player bar */
.main-nowPlayingBar-container {
background-color: unset;
background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%) !important;
border-radius: 0 0 var(--corner-radius) var(--corner-radius) !important;
border-top: 0;
min-width: 518px;
}
/* rearrange player bar */
.main-nowPlayingBar-left {
order: 1;
flex: 1;
width: auto;
min-width: 0 !important;
}
.main-nowPlayingBar-center {
order: 0;
flex: 1;
width: auto;
min-width: unset !important;
}
.main-nowPlayingBar-right {
order: 2;
flex: 1;
width: auto;
min-width: unset !important;
}
/* hide time elapsed */
.main-playbackBarRemainingTime-container,
.playback-bar__progress-time-elapsed {
display: none;
}
/* custom dynamic prog tooltip */
.playback-bar .prog-tooltip {
position: absolute;
min-width: 100px;
width: unset;
height: 25px;
top: -35px;
padding: 0 5px;
border-radius: 4px;
text-align: center;
color: var(--spice-text);
background-color: var(--spice-button);
opacity: 0;
transition: opacity 0.2s linear, left 0.2s linear;
}
.playback-bar:hover .prog-tooltip {
opacity: 1;
}
/* customise player controls buttons */
.player-controls__buttons {
position: relative;
margin-bottom: 0;
}
.main-shuffleButton-button {
position: absolute;
left: 200px;
}
.main-skipForwardButton-button,
.main-repeatButton-button,
.main-skipBackButton-button,
.main-shuffleButton-button {
color: var(--spice-text);
}
.player-controls__left,
.player-controls__right {
gap: 16px;
flex: 0;
}
.player-controls__right svg,
.player-controls__left svg {
width: 14px;
height: 14px;
}
/* customise play button */
.main-playPauseButton-button {
background-color: transparent !important;
}
.main-playPauseButton-button svg {
width: 32px !important;
height: 32px !important;
color: var(--spice-button);
}
/* customise right side player buttons */
.control-button {
color: var(--spice-text);
}
.main-genericButton-button {
color: var(--spice-text);
}
/* customise player cover art */
.main-nowPlayingWidget-coverArt .cover-art {
width: var(--bar-cover-art-size) !important;
height: var(--bar-cover-art-size) !important;
background-color: transparent;
}
.main-nowPlayingWidget-nowPlaying {
justify-content: center;
}
/* style navbar */
.main-navBar-mainNav {
gap: 0 !important;
}
.main-navBar-mainNav > div {
background-color: var(--spice-sidebar);
}
.main-yourLibraryX-navLink {
height: 48px;
}
/* change tab colours */
.main-navBar-mainNav .link-subtle,
.main-navBar-mainNav .link-subtle svg {
color: var(--spice-sidebar-text) !important;
}
/* give active nav tab a background */
.main-navBar-mainNav li:has(> .active) {
background-color: var(--spice-tab-active);
border-radius: 4px;
}
/* align library button with other nav items */
.main-yourLibraryX-header {
padding-top: 4px !important;
}
.main-yourLibraryX-navItems {
padding-bottom: 0 !important;
padding: 8px;
}
.main-yourLibraryX-navItems li {
padding-left: 16px;
}
/* remove built in scrolllist shadow */
.main-yourLibraryX-isScrolled {
box-shadow: none !important;
}
/* round playlist images */
.x-entityImage-imageContainer {
border-radius: 50% !important;
background-color: transparent;
width: 40px !important;
height: 40px !important;
align-self: center;
box-shadow: none !important;
}
li div:has(> .x-entityImage-imageContainer),
li div:has(> .main-yourLibraryX-rowCover) {
justify-content: center;
width: 48px;
}
/* folder items */
.x-entityImage-imagePlaceholder {
background-color: transparent;
color: var(--spice-sidebar-text);
}
/* local files item */
.main-yourLibraryX-rowCover {
width: 40px;
height: 40px;
}
.fRZRXRIV2YBCFLYgwDAr {
border-radius: 50% !important;
}
.fRZRXRIV2YBCFLYgwDAr > svg {
width: 15px;
height: 15px;
}
/* remove hover effect */
li > div > div::after {
background-color: transparent !important;
}
li > div::after {
background-color: transparent !important;
}
/* give background to active playlist */
.BoxComponent-group-tinted-listRow-isInteractive-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px,
.BoxComponent-group-tinted-listRow-isInteractive-hasFocus-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px {
background-color: var(--spice-tab-active);
}
/* fix scrolllist item colours */
.main-navBar-mainNav li p {
color: var(--spice-sidebar-text) !important;
}
.main-navBar-mainNav li p svg {
fill: var(--spice-sidebar-text) !important;
}
.main-yourLibraryX-listRowIconWrapper {
fill: var(--spice-sidebar-text) !important;
}
/* reduce spacing between playlist name and subtitle */
.main-yourLibraryX-listRowSubtitle {
margin-top: -8px;
}
.main-yourLibraryX-collapseButton > button {
gap: 8px;
color: var(--spice-sidebar-text) !important;
}
/* expanded sidebar buttons */
.search-searchCategory-carouselButton {
background-color: transparent;
}
.search-searchCategory-carouselButton:hover {
background-color: var(--spice-tab-active);
}
.search-searchCategory-carouselButton svg {
fill: var(--spice-sidebar-text) !important;
}
.main-yourLibraryX-iconOnly {
color: var(--spice-sidebar-text) !important;
}
.main-yourLibraryX-iconOnly:hover {
background-color: var(--spice-tab-active);
}
.main-yourLibraryX-filterArea > div > div:first-child button {
background-color: var(--spice-tab-active) !important;
}
.main-yourLibraryX-filterArea > div > div:first-child button > span {
background-color: var(--spice-tab-active) !important;
color: var(--spice-text) !important;
}
.main-yourLibraryX-libraryFilter .x-sortBox-sortDropdown,
.main-yourLibraryX-libraryFilter .x-filterBox-expandButton,
.main-yourLibraryX-libraryFilter .x-filterBox-searchIconContainer,
.main-yourLibraryX-libraryFilter .x-filterBox-filterInput,
.main-yourLibraryX-libraryFilter .x-filterBox-clearButton {
color: var(--spice-sidebar-text);
}
/* hide main view backgound gradient */
.main-entityHeader-backgroundColor,
.main-actionBarBackground-background,
.main-topBar-background,
.main-home-homeHeader {
background-color: var(--spice-main) !important;
background-image: none !important;
}
.main-topBar-background {
border-radius: var(--corner-radius);
}
.main-topBar-overlay,
.main-trackList-trackListHeader {
background-color: var(--spice-main) !important;
}
/* fix play button icon colour */
.main-playButton-PlayButton svg {
color: var(--spice-text);
}
/* fix playlist action bar buttons colour */
.main-actionBar-ActionBarRow button,
.main-actionBar-ActionBarRow svg:not(.main-playButton-PlayButton svg) {
color: rgba(var(--spice-rgb-text), 0.7);
}
.main-actionBar-ActionBarRow button:hover,
.main-actionBar-ActionBarRow button:hover svg:not(.main-playButton-PlayButton svg) {
color: var(--spice-text);
}
/* change playing icon from gif to svg */
.main-trackList-playingIcon {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E");
background: var(--spice-button);
content-visibility: hidden;
-webkit-mask-repeat: no-repeat;
}
/* full screen artists background */
.main-entityHeader-container.main-entityHeader-withBackgroundImage,
.main-entityHeader-background,
.main-entityHeader-background.main-entityHeader-overlay:after {
height: 100vh;
}
.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
font-size: 120px !important;
line-height: 120px !important;
}
.contentSpacing,
.artist-artistDiscography-headerContainer {
padding-left: 64px;
padding-right: 64px;
}
.artist-artistOverview-overview .main-entityHeader-headerText {
justify-content: center;
}
/* progress bar moves smoothly */
.x-progressBar-fillColor {
transition: transform 1s linear;
}
.progress-bar__slider {
transition: left 1s linear;
}
.playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .x-progressBar-fillColor,
.playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .progress-bar__slider {
transition: none;
}
/* add main backshadow */
#dribbblish-back-shadow {
z-index: 5;
grid-area: main-view / main-view / now-playing-bar / main-view;
box-shadow: 0 0 10px 3px #0000003b;
border-radius: var(--corner-radius);
pointer-events: none;
}
/* add fade effect to playlist scrolllist */
.os-viewport.os-viewport-native-scrollbars-invisible[fade="full"] {
-webkit-mask-image: linear-gradient(transparent 0%, black 10%, black 90%, transparent 100%);
mask-image: linear-gradient(transparent 0%, black 10%, black 90%, transparent 100%);
}
.os-viewport.os-viewport-native-scrollbars-invisible[fade="top"] {
-webkit-mask-image: linear-gradient(transparent 0%, black 10%);
mask-image: linear-gradient(transparent 0%, black 10%);
}
.os-viewport.os-viewport-native-scrollbars-invisible[fade="bottom"] {
-webkit-mask-image: linear-gradient(black 90%, transparent 100%);
mask-image: linear-gradient(black 90%, transparent 100%);
}
/* style input els */
input {
background-color: unset !important;
border-bottom: solid 1px var(--spice-text) !important;
border-radius: 0 !important;
padding: 6px 10px 6px 48px;
color: var(--spice-text) !important;
}
.Root__nav-bar input {
border-bottom: solid 1px var(--spice-sidebar-text) !important;
color: var(--spice-sidebar-text) !important;
}
.Root__nav-bar input::placeholder {
color: rgba(var(--spice-rgb-sidebar-text), 0.5) !important;
}
/* fix connect bar styles */
.main-connectBar-connectBar {
color: var(--spice-main) !important;
border-radius: 0 0 var(--corner-radius) var(--corner-radius);
}
/* topbar play button */
.main-topBar-topbarContent .main-playButton-PlayButton > button > span {
inline-size: 32px;
block-size: 32px;
min-block-size: auto;
}
.main-topBar-topbarContent .main-playButton-PlayButton svg {
width: 18px;
height: 18px;
}
.main-topBar-topbarContent .main-playButton-PlayButton > button > span > span {
position: initial;
height: 18px;
}
/* disable dynamic lyrics background */
.lyrics-lyrics-container {
--lyrics-color-inactive: rgba(var(--spice-rgb-text), 0.3) !important;
}
.lyrics-lyrics-background {
background-color: var(--spice-main);
}
/* LEGACY NAVBAR ONLY */
.legacy-nav .Root__top-container {
padding: 8px;
background-color: var(--spice-sidebar);
}
.legacy-nav .Root__main-view {
background-color: var(--spice-main);
}
.legacy-nav .main-rootlist-rootlistDivider {
background-color: transparent;
}
.legacy-nav .main-rootlist-rootlistDividerGradient {
background: none;
}
.legacy-nav .main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,
.legacy-nav .main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText {
opacity: 1;
}
.legacy-nav .main-collectionLinkButton-collectionLinkButton,
.legacy-nav .main-createPlaylistButton-button {
color: var(--spice-subtext);
opacity: 1;
}
.legacy-nav .main-likedSongsButton-likedSongsIcon {
background: none;
}
.legacy-nav .main-likedSongsButton-likedSongsIcon > svg {
height: 20px !important;
width: 20px !important;
}
/* style added sidebar images */
.legacy-nav .main-rootlist-rootlistItem a {
align-items: center;
border-radius: 4px;
display: flex;
height: 56px;
gap: 12px;
}
.legacy-nav img.playlist-picture {
width: 32px;
height: 32px;
flex: 0 0 32px;
background-size: cover;
background-position: center;
border-radius: 50%;
}
.legacy-nav img.playlist-picture[src$=".svg"] {
width: 24px;
height: 24px;
border-radius: 0;
}
.legacy-nav .Root__nav-bar .main-rootlist-wrapper {
height: fit-content !important;
contain: none !important;
}
.legacy-nav .main-navBar-mainNav li:has(> div > .active) {
background-color: var(--spice-tab-active);
}
.legacy-nav .main-collectionLinkButton-selected.active {
background-color: var(--spice-tab-active) !important;
}
.legacy-nav .main-navBar-mainNav li {
background-color: transparent !important;
}
.legacy-nav a.active {
background-color: var(--spice-tab-active) !important;
}
.legacy-nav .main-rootlist-rootlistItem:has(> .main-rootlist-rootlistItemLinkActive) {
background-color: var(--spice-tab-active) !important;
}
.legacy-nav .main-rootlist-rootlistItemLink {
padding-left: 12px;
}
.legacy-nav .main-rootlist-rootlistItem {
margin-left: 8px;
margin-right: 8px;
padding-left: 0;
padding-right: 8px;
border-radius: 4px;
}
.legacy-nav .dribs-playlist-list {
overflow: hidden;
}
.legacy-nav.left-sidebar-collapsed .main-rootlist-expandArrow {
display: none;
}
.legacy-nav .main-navBar-navBarLink,
.legacy-nav .main-collectionLinkButton-collectionLinkButton {
height: 56px !important;
}