remove unused themes
This commit is contained in:
parent
3de3a40124
commit
7637bee917
|
|
@ -1,5 +0,0 @@
|
||||||
Use it as you wish, have fun listening to music.
|
|
||||||
|
|
||||||
Shoutout to Porter Robinson.
|
|
||||||
|
|
||||||
-Robatortas
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
# BLOSSOM
|
|
||||||
|
|
||||||
A little theme for your Spotify client.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Made for a dark theme look thats pleasing to the eye.
|
|
||||||
|
|
||||||
By Robatortas
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
[dark]
|
|
||||||
text = ffffff
|
|
||||||
subtext = aaaaaa
|
|
||||||
extratext = aaaaaa
|
|
||||||
background = 1e2226
|
|
||||||
player = 282e33
|
|
||||||
button = 4d5c78
|
|
||||||
button-active = 6d80a3
|
|
||||||
button-disabled = 282e33
|
|
||||||
sidebar = 1e2226
|
|
||||||
main = 1e2226
|
|
||||||
card = 282e33
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 254 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 592 KiB |
|
|
@ -1,434 +0,0 @@
|
||||||
/* Blossom Theme */
|
|
||||||
|
|
||||||
#main {
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: var(--spice-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spotify__container--is-desktop .Root__top-container {
|
|
||||||
padding-top: calc(24px + 8px * 2);
|
|
||||||
--panel-gap: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.LayoutResizer__inline-end {
|
|
||||||
inset-inline-end: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.LayoutResizer__inline-start {
|
|
||||||
inset-inline-start: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.LayoutResizer__resize-bar {
|
|
||||||
width: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* SEARCH */
|
|
||||||
.main-yourEpisodes-episodeCard {
|
|
||||||
background-color: red;
|
|
||||||
transform: translateX(100px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-searchInput-searchInputSearchIcon,
|
|
||||||
.x-searchInput-searchInputClearButton {
|
|
||||||
color: var(--spice-button) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* header colored backgrounds */
|
|
||||||
.main-actionBarBackground-background,
|
|
||||||
.main-entityHeader-overlay,
|
|
||||||
.main-entityHeader-backgroundColor {
|
|
||||||
background: unset !important;
|
|
||||||
background-image: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.EvQHNTBhaU3rGCRRlAWj {
|
|
||||||
background: unset !important;
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
mask: linear-gradient(to bottom, #212121, 60%, transparent);
|
|
||||||
transition: all 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.QplCuuGSoV4updqTSLq9 {
|
|
||||||
background: unset !important;
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
mask: linear-gradient(to bottom, #212121, 60%, transparent);
|
|
||||||
transition: all 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-trackList-trackListHeaderStuck {
|
|
||||||
background: unset !important;
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
mask: linear-gradient(to bottom, #212121, 60%, transparent);
|
|
||||||
transition: all 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Home Header, when on home tab */
|
|
||||||
.main-home-homeHeader {
|
|
||||||
opacity: 40%;
|
|
||||||
background: radial-gradient(ellipse at top, var(--spice-button), 10%, var(--spice-main), 100%, transparent);
|
|
||||||
background-color: unset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover-art {
|
|
||||||
background: var(--spice-background);
|
|
||||||
border-radius: 7.5%;
|
|
||||||
}
|
|
||||||
.cover-art-image {
|
|
||||||
border-radius: 7.5%;
|
|
||||||
transition: all 0.5s;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Album or song art */
|
|
||||||
.main-entityHeader-image {
|
|
||||||
border-radius: 10%;
|
|
||||||
opacity: 100;
|
|
||||||
animation: both;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-editImageButton-overlay {
|
|
||||||
border-radius: 10%;
|
|
||||||
background: unset;
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
color: var(--spice-button);
|
|
||||||
transition: all 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-entityHeader-imagePlaceholder {
|
|
||||||
background-color: var(--spice-player);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-entityHeader-shadow {
|
|
||||||
box-shadow: 0 0px 50px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TRACKLIST */
|
|
||||||
.main-trackList-playingIcon {
|
|
||||||
filter: hue-rotate(100deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-trackList-trackListRow {
|
|
||||||
margin-left: 0px;
|
|
||||||
transition: all 0.5s;
|
|
||||||
}
|
|
||||||
.main-trackList-trackListRow:hover {
|
|
||||||
background-color: var(--spice-player);
|
|
||||||
margin-left: 10px;
|
|
||||||
transition: all 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Playback bar and controls */
|
|
||||||
.main-nowPlayingBar-nowPlayingBar {
|
|
||||||
background-color: unset !important;
|
|
||||||
background-image: linear-gradient(0deg, var(--spice-player), 80%, transparent);
|
|
||||||
transition: all 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-playPauseButton-button {
|
|
||||||
background: var(--spice-button-active);
|
|
||||||
color: var(--spice-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TopBar, where the profile button and back and ford buttons are */
|
|
||||||
.main-topBar-background {
|
|
||||||
opacity: 10%;
|
|
||||||
background: linear-gradient(180deg, #171717, 60%, transparent) !important;
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
mask: linear-gradient(to bottom, #212121, 60%, transparent);
|
|
||||||
transition: all 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-topBar-overlay {
|
|
||||||
background: unset !important;
|
|
||||||
background-color: unset !important;
|
|
||||||
background-image: unset !important;
|
|
||||||
/* backdrop-filter: blur(10px); */
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navBar-navBarLinkActive,
|
|
||||||
.main-navBar-navBarLinkActive:focus,
|
|
||||||
.logo {
|
|
||||||
background-color: var(--spice-player) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* move the progress bar to the top */
|
|
||||||
.main-nowPlayingBar-nowPlayingBar {
|
|
||||||
position: relative;
|
|
||||||
padding-inline-end: 16px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playback-bar__progress-time-elapsed,
|
|
||||||
.main-playbackBarRemainingTime-container {
|
|
||||||
min-width: 0;
|
|
||||||
width: 0 !important;
|
|
||||||
opacity: 0;
|
|
||||||
transition: all 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playback-bar:hover .playback-bar__progress-time-elapsed, .playback-bar:hover
|
|
||||||
.main-playbackBarRemainingTime-container {
|
|
||||||
min-width: 40px;
|
|
||||||
width: auto;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playback-bar {
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
bottom: 65px;
|
|
||||||
position: absolute;
|
|
||||||
cursor: pointer;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
--fg-color: var(--spice-button-active);
|
|
||||||
}
|
|
||||||
|
|
||||||
.os-theme-spotify.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: var(--spice-text);
|
|
||||||
opacity: 30%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player-controls__buttons {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-playPauseButton-button {
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 10px;
|
|
||||||
--button-size: 50px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player-controls__buttons {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* LEFT BAR STUFF */
|
|
||||||
|
|
||||||
/* Playlists text color */
|
|
||||||
.main-rootlist-rootlistDivider,
|
|
||||||
.main-rootlist-rootlistDividerGradient {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* remove playlist item 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-player);
|
|
||||||
transition: all 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* expanded sidebar buttons */
|
|
||||||
.search-searchCategory-carouselButton {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.search-searchCategory-carouselButton:hover {
|
|
||||||
background-color: var(--spice-player);
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-iconOnly:hover {
|
|
||||||
background-color: var(--spice-player);
|
|
||||||
color: var(--spice-text);
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-filterArea > div > div:first-child button {
|
|
||||||
background-color: var(--spice-player) !important;
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-filterArea > div > div:first-child button > span {
|
|
||||||
background-color: var(--spice-player) !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-text);
|
|
||||||
}
|
|
||||||
/* give active nav tab a background */
|
|
||||||
.main-navBar-mainNav li:has(> .active) {
|
|
||||||
background-color: var(--spice-player);
|
|
||||||
border-radius: 0 4px 4px 0;
|
|
||||||
position: relative;
|
|
||||||
transform: translate(-12px, 0);
|
|
||||||
transition: all 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* remove built in scrolllist shadow */
|
|
||||||
.main-yourLibraryX-isScrolled {
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-rootlist-rootlist {
|
|
||||||
background-color: var(--spice-player);
|
|
||||||
top: 10px;
|
|
||||||
}
|
|
||||||
.main-rootlist-rootlistItem {
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 0px;
|
|
||||||
transition: all 0.5s;
|
|
||||||
}
|
|
||||||
.main-rootlist-rootlistItem:hover {
|
|
||||||
background: var(--spice-background) !important;
|
|
||||||
margin: 5px;
|
|
||||||
padding: 5px;
|
|
||||||
transition: all 0.5s;
|
|
||||||
}
|
|
||||||
.main-rootlist-rootlistItemLinkActive {
|
|
||||||
background: var(--spice-background) !important;
|
|
||||||
margin-left: -22px;
|
|
||||||
margin-right: -10px;
|
|
||||||
padding-left: 30px;
|
|
||||||
transition: all 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-categoryCard-CategoryCard {
|
|
||||||
transition: all 0.5s;
|
|
||||||
}
|
|
||||||
.x-categoryCard-CategoryCard:hover {
|
|
||||||
margin-top: -2%;
|
|
||||||
transition: all 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navBar-navBarItem {
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 0px;
|
|
||||||
transition: all 0.5s;
|
|
||||||
}
|
|
||||||
.main-navBar-navBarItem:hover {
|
|
||||||
background-color: var(--spice-player) !important;
|
|
||||||
transition: all 0.5s;
|
|
||||||
}
|
|
||||||
.main-navBar-navBarLinkActive {
|
|
||||||
background: var(--spice-player) !important;
|
|
||||||
margin-left: -22px;
|
|
||||||
margin-right: -10px;
|
|
||||||
padding-left: 30px;
|
|
||||||
transition: all 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* CARDS */
|
|
||||||
|
|
||||||
/* Little filter for the cards */
|
|
||||||
.main-card-card {
|
|
||||||
opacity: 100%;
|
|
||||||
background-color: unset !important;
|
|
||||||
background: linear-gradient(180deg, var(--spice-player), 65%, transparent);
|
|
||||||
transition: all 1s;
|
|
||||||
}
|
|
||||||
.main-card-card:hover {
|
|
||||||
background-color: unset !important;
|
|
||||||
background: var(--spice-player) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-collectionEntityHeroCard-likedSongs {
|
|
||||||
background-color: unset !important;
|
|
||||||
background: linear-gradient(180deg, var(--spice-player), 65%, transparent);
|
|
||||||
transition: all 1s;
|
|
||||||
}
|
|
||||||
.collection-collectionEntityHeroCard-likedSongs:hover {
|
|
||||||
background-color: unset !important;
|
|
||||||
background: var(--spice-player) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Shortcuts */
|
|
||||||
.view-homeShortcutsGrid-shortcut {
|
|
||||||
background-color: unset !important;
|
|
||||||
background: linear-gradient(180deg, var(--spice-player), 65%, transparent);
|
|
||||||
transition: all 1s;
|
|
||||||
}
|
|
||||||
.view-homeShortcutsGrid-shortcut:hover {
|
|
||||||
background-color: unset !important;
|
|
||||||
background: var(--spice-player) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cursor things */
|
|
||||||
.main-playPauseButton-button,
|
|
||||||
.main-repeatButton-button,
|
|
||||||
.main-skipForwardButton-button,
|
|
||||||
.main-skipBackButton-button,
|
|
||||||
.main-shuffleButton-button {
|
|
||||||
cursor: pointer !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Search */
|
|
||||||
input {
|
|
||||||
background-color: unset !important;
|
|
||||||
border-bottom: solid 1px var(--spice-button-active) !important;
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
border-radius: 0px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-833-searchInput-searchInputSearchIcon {
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ANIMATIONS */
|
|
||||||
|
|
||||||
.view-homeShortcutsGrid-shortcut .main-heroCard-card,
|
|
||||||
.main-buttonIcon-buttonIcon,
|
|
||||||
.main-trackList-column,
|
|
||||||
.main-rootlist-rootlistItem,
|
|
||||||
.main-card-card,
|
|
||||||
.main-entityHeader-smallHeader,
|
|
||||||
.main-entityHeader-headerText,
|
|
||||||
.main-entityHeader-image {
|
|
||||||
animation-name: up-fade-anim;
|
|
||||||
animation-duration: 1s;
|
|
||||||
}
|
|
||||||
.main-shelf-seeAll,
|
|
||||||
.main-cardImage-image,
|
|
||||||
.main-trackList-trackList,
|
|
||||||
.main-trackList-number {
|
|
||||||
animation-name: left-fade-anim;
|
|
||||||
animation-duration: 1s;
|
|
||||||
}
|
|
||||||
.main-shelf-title {
|
|
||||||
animation-name: right-fade-anim;
|
|
||||||
animation-duration: 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes up-fade-anim {
|
|
||||||
from {
|
|
||||||
opacity: 0%;
|
|
||||||
transform: translateY(10px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 100;
|
|
||||||
transform: translateY(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes left-fade-anim {
|
|
||||||
from {
|
|
||||||
opacity: 0%;
|
|
||||||
transform: translateX(10px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 100;
|
|
||||||
transform: translateX(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes right-fade-anim {
|
|
||||||
from {
|
|
||||||
opacity: 0%;
|
|
||||||
transform: translateX(-10px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 100;
|
|
||||||
transform: translateX(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.queue-tabBar-active {
|
|
||||||
background-color: var(--spice-player) !important;
|
|
||||||
transition: all 0.5s;
|
|
||||||
}
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
# BurntSienna
|
|
||||||
|
|
||||||
## Screenshots
|
|
||||||
|
|
||||||
|
|
||||||
## More
|
|
||||||
Montserrat Font is necessary, it is available on Google Fonts:
|
|
||||||
https://fonts.google.com/specimen/Montserrat<br>
|
|
||||||
Author: https://github.com/pjaspinski
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
[Base]
|
|
||||||
button = ef8450
|
|
||||||
sidebar = 242629
|
|
||||||
player = 242629
|
|
||||||
main = 303336
|
|
||||||
button-active = ef8450
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 275 KiB |
|
|
@ -1,228 +0,0 @@
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
|
||||||
* {
|
|
||||||
font-family: Montserrat;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Page titles */
|
|
||||||
h1 {
|
|
||||||
font-weight: 700 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Song name in player */
|
|
||||||
.main-nowPlayingWidget-nowPlaying .main-trackInfo-name {
|
|
||||||
overflow: unset;
|
|
||||||
font-size: 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Artist name in player */
|
|
||||||
.main-nowPlayingWidget-nowPlaying .main-trackInfo-artists {
|
|
||||||
overflow: unset;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-type-finale {
|
|
||||||
line-height: 17px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Icons */
|
|
||||||
.main-trackList-rowPlayPauseIcon {
|
|
||||||
transform: scale(1.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-downloadButton-button svg {
|
|
||||||
height: 32px;
|
|
||||||
width: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Progress and remaining time */
|
|
||||||
.main-playbackBarRemainingTime-container,
|
|
||||||
.playback-bar__progress-time-elapsed,
|
|
||||||
.playback-bar__progress-time {
|
|
||||||
font-size: 15px;
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Player play button */
|
|
||||||
.main-playPauseButton-button {
|
|
||||||
background-color: unset;
|
|
||||||
color: var(--spice-subtext);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-playPauseButton-button svg {
|
|
||||||
height: 28px;
|
|
||||||
width: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Progress bar */
|
|
||||||
.progress-bar {
|
|
||||||
--fg-color: var(--spice-button);
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar__bg,
|
|
||||||
.progress-bar__fg,
|
|
||||||
.progress-bar__fg_wrapper {
|
|
||||||
height: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar-wrapper {
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra controls */
|
|
||||||
.control-button::before {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ExtraControls svg {
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Removing gradients */
|
|
||||||
.main-entityHeader-backgroundColor,
|
|
||||||
.main-actionBarBackground-background {
|
|
||||||
background-color: unset !important;
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cover shadow */
|
|
||||||
.main-entityHeader-shadow {
|
|
||||||
-webkit-box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5);
|
|
||||||
box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Top bar */
|
|
||||||
.main-topBar-background {
|
|
||||||
background-color: #3a3d42 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Playing icon */
|
|
||||||
.main-trackList-playingIcon {
|
|
||||||
filter: saturate(0%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Playlist like button */
|
|
||||||
.main-actionBar-ActionBarRow .main-addButton-button .Svg-ulyrgf-0 {
|
|
||||||
height: unset;
|
|
||||||
width: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Order button */
|
|
||||||
.x-sortBox-sortDropdown {
|
|
||||||
margin-top: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sidebar playlists menu */
|
|
||||||
.main-rootlist-rootlistDividerGradient {
|
|
||||||
background: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-rootlist-rootlistDivider {
|
|
||||||
background-color: var(--spice-button);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Search box */
|
|
||||||
.x-searchInput-searchInputInput {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Aritsts names */
|
|
||||||
.main-type-mesto {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Songs names */
|
|
||||||
.main-type-ballad {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cards descriptions */
|
|
||||||
.main-cardSubHeader-root {
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ad title */
|
|
||||||
.desktoproutes-homepage-takeover-ad-hptoNativeOriginal-header {
|
|
||||||
font-weight: 700 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Friends names */
|
|
||||||
.main-buddyFeed-username a {
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Friends songs and artists */
|
|
||||||
.main-buddyFeed-artistAndTrackName a,
|
|
||||||
.main-buddyFeed-playbackContextLink span {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cover height */
|
|
||||||
.main-coverSlotExpanded-container {
|
|
||||||
height: var(--nav-bar-width) + 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scrollbars */
|
|
||||||
.os-scrollbar-handle {
|
|
||||||
background: var(--spice-button) !important;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Making index column wider so that lighter background that
|
|
||||||
highlights selected song contains multi-digit song numbers */
|
|
||||||
/* It looks good up to 4 digits, I figured that no one has playlists with more music than that ;) */
|
|
||||||
.main-trackList-trackList.main-trackList-indexable .main-trackList-trackListRowGrid {
|
|
||||||
grid-template-columns: [index] 48px [first] 6fr [var1] 4fr [var2] 3fr [last] minmax(120px, 1fr) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Text boxes in settings */
|
|
||||||
.main-dropDown-dropDown {
|
|
||||||
background-color: var(--spice-button-disabled);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Facebook button */
|
|
||||||
.x-settings-facebookButton {
|
|
||||||
background-color: unset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Playlist play button color */
|
|
||||||
.encore-dark-theme .encore-bright-accent-set,
|
|
||||||
.encore-dark-theme .encore-bright-accent-set:hover {
|
|
||||||
--background-base: var(--spice-button-active);
|
|
||||||
--background-highlight: var(--spice-player);
|
|
||||||
--background-press: var(--spice-player);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Volume bar margins */
|
|
||||||
.volume-bar .progress-bar {
|
|
||||||
margin: 0 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.volume-bar .playback-progressbar {
|
|
||||||
width: 70%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.volume-bar {
|
|
||||||
flex: 0 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Menu hidden under the button with account name - font size and family unification */
|
|
||||||
.ellipsis-one-line {
|
|
||||||
font-family: Montserrat;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ellipsis-one-line.main-type-mesto {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Removal of empty space above playlist cover and title on narrow viewports */
|
|
||||||
.main-entityHeader-container.main-entityHeader-nonWrapped {
|
|
||||||
min-height: 325px;
|
|
||||||
height: 15vh;
|
|
||||||
}
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
# Dreary
|
|
||||||
|
|
||||||
## Screenshots
|
|
||||||
|
|
||||||
### BIB
|
|
||||||
|
|
||||||
|
|
||||||
### Psycho
|
|
||||||
|
|
||||||
|
|
||||||
### Deeper
|
|
||||||
|
|
||||||
|
|
||||||
### Mono
|
|
||||||
|
|
||||||
|
|
||||||
### Golden
|
|
||||||
|
|
||||||
|
|
||||||
### Graytone-Blue
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Important
|
|
||||||
Certain aspects of the theme, such as the borders around playlist names, require Sidebar Config to be enabled. It is not required but recommended.
|
|
||||||
|
|
||||||
You can enable it by running `spicetify config sidebar_config 1`.
|
|
||||||
|
|
||||||
## More
|
|
||||||
|
|
||||||
A chill theme that keeps things bordered in and organized
|
|
||||||
|
|
||||||
BIB color scheme based on original [BIB-Green](https://github.com/spicetify/spicetify-themes/tree/master/BIB-Green)
|
|
||||||
|
|
||||||
Theme based on Sleek theme: https://github.com/spicetify/spicetify-themes/tree/v2/Sleek
|
|
||||||
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 892 KiB |
|
|
@ -1,154 +0,0 @@
|
||||||
[Psycho]
|
|
||||||
; Red on dark grey background
|
|
||||||
text = e00000
|
|
||||||
subtext = ffffff
|
|
||||||
button-text = ffffff
|
|
||||||
main = 101010
|
|
||||||
sidebar = 171717
|
|
||||||
player = 171717
|
|
||||||
subbutton-text = 101010
|
|
||||||
card = 171717
|
|
||||||
shadow = 6d1414
|
|
||||||
selected-row = 330d0d
|
|
||||||
sub-button = a20606
|
|
||||||
button = e00000
|
|
||||||
button-active = e00000
|
|
||||||
button-disabled = 404040
|
|
||||||
tab-active = 171717
|
|
||||||
notification = 5e0000
|
|
||||||
notification-error = 5e0000
|
|
||||||
playback-bar = ff4700
|
|
||||||
misc = adadad
|
|
||||||
|
|
||||||
[Deeper]
|
|
||||||
; Light blue on Dark Background
|
|
||||||
text = 4f9a87
|
|
||||||
subtext = 406560
|
|
||||||
button-text = 4f9a87
|
|
||||||
main = 040614
|
|
||||||
sidebar = 0F111A
|
|
||||||
player = 0F111A
|
|
||||||
subbutton-text = 040614
|
|
||||||
card = 0f1118
|
|
||||||
shadow = 406560
|
|
||||||
selected-row = 040614
|
|
||||||
sub-button = 4f9a87
|
|
||||||
button = 0d3a2e
|
|
||||||
button-active = 106165
|
|
||||||
button-disabled = 0C1C19
|
|
||||||
tab-active = 0a1527
|
|
||||||
notification = 051024
|
|
||||||
notification-error = 051024
|
|
||||||
playback-bar = 4f9a87
|
|
||||||
misc = 406560
|
|
||||||
|
|
||||||
[BIB]
|
|
||||||
; Green on dark grey background
|
|
||||||
text = 8bc34a
|
|
||||||
subtext = b4b4b4
|
|
||||||
button-text = 202020
|
|
||||||
main = 202020
|
|
||||||
sidebar = 202020
|
|
||||||
player = 242424
|
|
||||||
subbutton-text = 202020
|
|
||||||
card = 242424
|
|
||||||
shadow = 000000
|
|
||||||
selected-row = 2a3c17
|
|
||||||
sub-button = 6a913d
|
|
||||||
button = 537b25
|
|
||||||
button-active = 98da4b
|
|
||||||
button-disabled = 353535
|
|
||||||
tab-active = 303030
|
|
||||||
notification = 242424
|
|
||||||
notification-error = 242424
|
|
||||||
playback-bar = 8bc34a
|
|
||||||
misc = 8bc34a
|
|
||||||
|
|
||||||
[Mono]
|
|
||||||
;Grays, Blacks, Whites, You get the gist.
|
|
||||||
text = FFFFFF
|
|
||||||
subtext = d3d3d3
|
|
||||||
button-text = FFFFFF
|
|
||||||
main = 000000
|
|
||||||
sidebar = 5d5e60
|
|
||||||
subbutton-text = d3d3d3
|
|
||||||
player = 181818
|
|
||||||
card = 5d5e60
|
|
||||||
selected-row = 2D2A32
|
|
||||||
shadow = FFFFFF
|
|
||||||
sub-button = d3d3d3
|
|
||||||
button = d3d3d3
|
|
||||||
button-active = d3d3d3
|
|
||||||
button-disabled = 181818
|
|
||||||
tab-active = d3d3d3
|
|
||||||
notification = 181818
|
|
||||||
notification-error = b5cbb7
|
|
||||||
playback-bar = d3d3d3
|
|
||||||
misc = d3d3d3
|
|
||||||
|
|
||||||
[Golden]
|
|
||||||
;Gold
|
|
||||||
text = FFE002
|
|
||||||
subtext = B28228
|
|
||||||
button-text = FFE002
|
|
||||||
main = 1C1C1C
|
|
||||||
sidebar = 3B3B3B
|
|
||||||
subbutton-text = 3B3B3B
|
|
||||||
player = 1C1C1C
|
|
||||||
card = 3B3B3B
|
|
||||||
selected-row = 1c1c1c
|
|
||||||
shadow = FFE002
|
|
||||||
sub-button = B28228
|
|
||||||
button = B28228
|
|
||||||
button-active = B28228
|
|
||||||
button-disabled = FFB606
|
|
||||||
tab-active = B28228
|
|
||||||
notification = FFB606
|
|
||||||
notification-error = b5cbb7
|
|
||||||
playback-bar = B28228
|
|
||||||
misc = B28228
|
|
||||||
|
|
||||||
|
|
||||||
[Graytone-Blue]
|
|
||||||
; Gray colors with blue highlights
|
|
||||||
text = 4f9a87
|
|
||||||
subtext = 406560
|
|
||||||
button-text = 4f9a87
|
|
||||||
main = 111115
|
|
||||||
sidebar = 1e2027
|
|
||||||
subbutton-text = 040614
|
|
||||||
player = 1a1b1d
|
|
||||||
card = 0f1118
|
|
||||||
selected-row = 040614
|
|
||||||
shadow = 406560
|
|
||||||
sub-button = 4f9a87
|
|
||||||
button = 0d3a2e
|
|
||||||
button-active = 106165
|
|
||||||
button-disabled = 0C1C19
|
|
||||||
tab-active = 0a1527
|
|
||||||
notification = 051024
|
|
||||||
notification-error = 051024
|
|
||||||
playback-bar = 4f9a87
|
|
||||||
misc = 406560
|
|
||||||
|
|
||||||
; Description
|
|
||||||
|
|
||||||
; text = main text, playlist names in main field, name of playlist selected in sidebar, headings
|
|
||||||
; subtext = text in main buttons in sidebar, playlist names in sidebar, artist names, and mini infos
|
|
||||||
; button-text = text in main buttons in sidebar when active
|
|
||||||
; main = main field or main bg
|
|
||||||
; sidebar = sidebar bg
|
|
||||||
; subbutton-text = text of buttons that use the text color or subtext color as a background
|
|
||||||
; player = player bg
|
|
||||||
; card = card bg
|
|
||||||
; shadow = bg of buttons like account, pop-up lyrics, full app display in main field
|
|
||||||
; selected-row = color of the song selected
|
|
||||||
; sub-button = caption and details of playlist, download and options button
|
|
||||||
; button = playlist buttons bg in sidebar, drop-down menus, now playing song, like button
|
|
||||||
; button-active = hover on song selected
|
|
||||||
; button-disabled = seekbar bg, volume bar bg, scrollbar
|
|
||||||
; tab-active = button bg in main field (playlists, podcasts, artists, albums)
|
|
||||||
; notification = notification ('Added to liked songs' etc.)
|
|
||||||
; notification-error = error
|
|
||||||
; playback-bar = seekbar fg, main play/pause button bg
|
|
||||||
; misc = miscellaneous
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 984 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 847 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 583 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 950 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 850 KiB |
|
|
@ -1,609 +0,0 @@
|
||||||
/* Dreary Theme*/
|
|
||||||
|
|
||||||
.main-rootlist-rootlistDividerGradient {
|
|
||||||
display: none;
|
|
||||||
visibility: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-rootlist-rootlistDivider {
|
|
||||||
background-color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-833-searchInput-searchInputSearchIcon {
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-home-homeHeader,
|
|
||||||
.x-441-entityHeader-overlay,
|
|
||||||
.main-actionBarBackground-background,
|
|
||||||
.main-entityHeader-overlay,
|
|
||||||
.main-entityHeader-backgroundColor {
|
|
||||||
background-color: unset !important;
|
|
||||||
background-image: unset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-playlistEditDetailsModal-textElement:focus {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.connect-title,
|
|
||||||
.connect-header {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Topbar visibility bug */
|
|
||||||
|
|
||||||
.main-topBar-topbarContent:not(.main-topBar-topbarContentFadeIn) > * {
|
|
||||||
opacity: unset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-entityHeader-topbarContent:not(.main-entityHeader-topbarContentFadeIn)
|
|
||||||
> * {
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Remove Topbar background colour */
|
|
||||||
|
|
||||||
.main-topBar-background {
|
|
||||||
background-color: unset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-topBar-overlay {
|
|
||||||
background-color: var(--spice-main);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-entityHeader-shadow {
|
|
||||||
box-shadow: 0 04px 20px #21212130;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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-text);
|
|
||||||
content-visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
|
|
||||||
fill: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide Banner Ads */
|
|
||||||
|
|
||||||
.main-leaderboardComponent-container {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer,
|
|
||||||
.desktoproutes-homepage-takeover-ad-hptoComponent-container {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide Upgrade Button */
|
|
||||||
|
|
||||||
.main-topBar-UpgradeButton {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
[aria-label="Playing"] {
|
|
||||||
color: var(--spice-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fix design fault */
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.main-trackList-trackListHeader {
|
|
||||||
border-bottom: solid 1px;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
|
|
||||||
background: var(--spice-main);
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow {
|
|
||||||
border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Changing Playback Bar Location */
|
|
||||||
|
|
||||||
.progress-bar__bg,
|
|
||||||
.progress-bar__fg_wrapper {
|
|
||||||
border-radius: 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playback-bar__progress-time {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playback-bar {
|
|
||||||
width: 100%;
|
|
||||||
bottom: 83px;
|
|
||||||
position: absolute;
|
|
||||||
left: -1px;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-playbackBarRemainingTime-container {
|
|
||||||
position: absolute;
|
|
||||||
left: 49.68%;
|
|
||||||
top: 60%;
|
|
||||||
border: solid 1px;
|
|
||||||
border-radius: 20px;
|
|
||||||
z-index: 5;
|
|
||||||
color: var(--spice-subtext) !important;
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player-controls__buttons {
|
|
||||||
transform: translateY(6px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-playPauseButton-button {
|
|
||||||
background-color: var(--spice-main);
|
|
||||||
box-shadow: var(--spice-shadow) 0 5px 9px 0px;
|
|
||||||
--button-size: 50px !important;
|
|
||||||
color: var(--spice-text);
|
|
||||||
background-color: var(--spice-player) !important;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player-controls__buttons {
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
left: 2.3%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-entityTitle-subtitle.main-entityTitle-small.main-entityTitle-uppercase.main-entityTitle-bold {
|
|
||||||
border: 2px var(--spice-text) solid;
|
|
||||||
border-radius: 4px;
|
|
||||||
width: fit-content;
|
|
||||||
display: inline;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.os-theme-spotify.os-host-transition
|
|
||||||
> .os-scrollbar-vertical
|
|
||||||
> .os-scrollbar-track
|
|
||||||
> .os-scrollbar-handle {
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: var(--spice-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide Profile Options in Nav Bar */
|
|
||||||
|
|
||||||
.main-userWidget-notificationIndicator {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-avatar-userIcon {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-userWidget-box {
|
|
||||||
background-color: var(--spice-sidebar);
|
|
||||||
text-decoration-line: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Improve Sidebar Buttons */
|
|
||||||
|
|
||||||
.main-likedSongsButton-likedSongsIcon {
|
|
||||||
background: var(--spice-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-likedSongsButton-likedSongsIcon {
|
|
||||||
color: var(--spice-sidebar);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-trackList-trackListHeaderRow {
|
|
||||||
border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow {
|
|
||||||
border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-trackList-trackListRow.main-trackList-selected,
|
|
||||||
.main-trackList-trackListRow.main-trackList-selected:hover {
|
|
||||||
background-color: rgba(var(--spice-rgb-selected-row), 0.8) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-trackList-trackListRow:focus-within,
|
|
||||||
.main-trackList-trackListRow:hover {
|
|
||||||
background-color: rgba(var(--spice-rgb-selected-row), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-duplicateTracksDialog-container {
|
|
||||||
background-color: var(--spice-card);
|
|
||||||
color: var(--spice-subtext);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-duplicateTracksDialog-secondaryButton {
|
|
||||||
color: var(--spice-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
._9eb5acf729a98d62135ca21777fef244-scss {
|
|
||||||
color: var(--spice-card);
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-sortBox-sortDropdown,
|
|
||||||
.x-filterBox-expandButton {
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Main Play Button Change */
|
|
||||||
|
|
||||||
.main-playButton-PlayButton.main-playButton-primary {
|
|
||||||
color: var(--spice-main);
|
|
||||||
background-color: var(--spice-playback-bar);
|
|
||||||
cursor: pointer !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-entityHeader-metaDataText.main-type-mesto:nth-child(2) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-entityHeader-image {
|
|
||||||
border-radius: 10%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-downloadButton-button {
|
|
||||||
background: var(--spice-player);
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Link playback-bar color */
|
|
||||||
|
|
||||||
.playback-bar .progress-bar__fg {
|
|
||||||
background-color: var(--spice-playback-bar);
|
|
||||||
}
|
|
||||||
|
|
||||||
:not(.no-focus-outline) .progress-bar:focus-within .progress-bar__fg {
|
|
||||||
background-color: var(--spice-playback-bar);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navBar-navBarLinkActive {
|
|
||||||
background-color: var(--spice-main);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navBar-navBarLinkActive,
|
|
||||||
.main-navBar-navBarLinkActive:focus,
|
|
||||||
.main-navBar-navBarLinkActive:hover,
|
|
||||||
.logo {
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
background-color: var(--spice-selected-row);
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar__slider {
|
|
||||||
opacity: 1 !important;
|
|
||||||
background-color: var(--spice-sidebar) !important;
|
|
||||||
height: 16px !important;
|
|
||||||
border: solid 2px var(--spice-subtext) !important;
|
|
||||||
width: 16px !important;
|
|
||||||
display: unset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.x-categoryCard-CategoryCard,
|
|
||||||
a.x-heroCategoryCard-HeroCategoryCard {
|
|
||||||
color: var(--spice-subtext);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-heroCard-card a,
|
|
||||||
.collection-collectionEntityHeroCard-descriptionContainer {
|
|
||||||
color: var(--spice-subtext) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
|
|
||||||
.main-buddyFeed-activityMetadata .main-buddyFeed-username a,
|
|
||||||
.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink,
|
|
||||||
p.main-buddyFeed-timestamp.main-type-finale,
|
|
||||||
.main-buddyFeed-findFriendsButton .main-buddyFeed-findFriendsIcon {
|
|
||||||
color: var(--spice-subtext);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Recolor sub-buttons */
|
|
||||||
|
|
||||||
.main-moreButton-button {
|
|
||||||
color: var(--spice-sub-button);
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-downloadButton-button {
|
|
||||||
color: var(--spice-sub-button) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-downloadButton-button:hover {
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-addButton-button {
|
|
||||||
color: var(--spice-sub-button);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-entityHeader-metaDataText {
|
|
||||||
color: var(--spice-sub-button);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-duration-container {
|
|
||||||
color: var(--spice-sub-button);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-tag-container {
|
|
||||||
background-color: var(--spice-sub-button);
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-sortBox-sortDropdown {
|
|
||||||
background-color: var(--spice-selected-row) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-filterBox-searchIconContainer {
|
|
||||||
color: var(--spice-sub-button) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-filterBox-expandButton:focus,
|
|
||||||
.x-filterBox-expandButton:hover {
|
|
||||||
background-color: var(--spice-selected-row) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
|
|
||||||
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
|
|
||||||
background-color: var(--spice-selected-row) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-homeShortcutsGrid-shortcut {
|
|
||||||
background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-homeShortcutsGrid-shortcut:focus-within,
|
|
||||||
.view-homeShortcutsGrid-shortcut:hover,
|
|
||||||
.view-homeShortcutsGrid-shortcut[data-context-menu-open="true"] {
|
|
||||||
background-color: var(--spice-selected-row) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-rootlist-textWrapper.main-type-viola {
|
|
||||||
cursor: pointer !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navBar-navBar {
|
|
||||||
border-right: 2px solid var(--spice-misc);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cMigZB * {
|
|
||||||
color: var(--spice-misc) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-trackInfo-name a {
|
|
||||||
color: var(--spice-misc) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-trackInfo-artists a:link {
|
|
||||||
color: var(--spice-misc) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class*=" spoticon-"]:before {
|
|
||||||
color: var(--spice-misc) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-connectToFacebook-headerTitle {
|
|
||||||
color: var(--spice-misc) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-repeatButton-button,
|
|
||||||
.main-skipForwardButton-button,
|
|
||||||
.main-skipBackButton-button,
|
|
||||||
.main-shuffleButton-button {
|
|
||||||
cursor: pointer !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#spicetify-playlist-list {
|
|
||||||
display: inline;
|
|
||||||
height: 10%;
|
|
||||||
align-items: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
#spicetify-playlist-list > div > div:nth-child(2) > li {
|
|
||||||
margin: 4px 3.2vw;
|
|
||||||
width: 84%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding-top: 10%;
|
|
||||||
padding-bottom: 10%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: -1px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 2px solid var(--spice-text);
|
|
||||||
display: flex;
|
|
||||||
text-align: center;
|
|
||||||
flex-direction: column;
|
|
||||||
transition: all 500ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
#spicetify-playlist-list > div > div:nth-child(2) > li:hover {
|
|
||||||
border-color: var(--spice-button);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-connectToFacebook-text,
|
|
||||||
.main-connectToFacebook-disclaimer {
|
|
||||||
color: unset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-type-mesto {
|
|
||||||
color: var(--spice-button);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive,
|
|
||||||
.main-rootlist-rootlistItemLink {
|
|
||||||
transition: 500ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive,
|
|
||||||
.main-rootlist-rootlistItemLink:focus {
|
|
||||||
color: var(--spice-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-homeShortcutsGrid-shortcut {
|
|
||||||
background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
|
|
||||||
border: solid 3px var(--spice-text);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding-bottom: 80.7px;
|
|
||||||
transition: 500ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-card-card .main-card-cardLink {
|
|
||||||
border: solid 3px;
|
|
||||||
transition: 500ms;
|
|
||||||
border-radius: 27px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-card-card {
|
|
||||||
border-radius: 27px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-homeShortcutsGrid-shortcut:hover,
|
|
||||||
.main-card-card .main-card-cardLink:hover {
|
|
||||||
border-color: var(--spice-button);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-createPlaylistButton-button,
|
|
||||||
.main-collectionLinkButton-collectionLinkButton {
|
|
||||||
padding-left: 16px !important;
|
|
||||||
padding-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-trackCreditsModal-closeBtn {
|
|
||||||
color: var(--spice-button-disabled) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-contextMenu-menu {
|
|
||||||
max-height: 400px;
|
|
||||||
opacity: 0.9676;
|
|
||||||
}
|
|
||||||
.main-trackList-trackList {
|
|
||||||
border-radius: 30px;
|
|
||||||
background-color: var(--spice-player);
|
|
||||||
border: 1px solid;
|
|
||||||
}
|
|
||||||
.main-buddyFeed-friendsFeedContainer {
|
|
||||||
border-left: solid 2px var(--spice-text);
|
|
||||||
}
|
|
||||||
.main-yourEpisodesButton-yourEpisodesIcon {
|
|
||||||
background: var(--spice-text);
|
|
||||||
}
|
|
||||||
.main-yourEpisodesButton-yourEpisodesIcon path {
|
|
||||||
fill: var(--spice-player);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
.main-navBar-entryPoints > div:first-of-type {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.cMigZB {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.control-button {
|
|
||||||
color: var(--spice-misc);
|
|
||||||
}
|
|
||||||
.main-buddyFeed-buddyFeed {
|
|
||||||
-webkit-box-shadow: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
.main-buddyFeed-friendActivity {
|
|
||||||
border-bottom: solid 1px;
|
|
||||||
}
|
|
||||||
.collection-collectionEntityHeroCard-likedSongs {
|
|
||||||
background: linear-gradient(
|
|
||||||
149.46deg,
|
|
||||||
var(--spice-sidebar),
|
|
||||||
var(--spice-main) 99.16%
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-repeatButton-button[disabled] {
|
|
||||||
color: var(--spice-button);
|
|
||||||
}
|
|
||||||
.main-shuffleButton-button[disabled] {
|
|
||||||
color: var(--spice-button);
|
|
||||||
}
|
|
||||||
.progress-bar_bg {
|
|
||||||
z-index: 20;
|
|
||||||
}
|
|
||||||
.main-deletePlaylistDialog-secondaryButton {
|
|
||||||
color: var(--spice-subbutton-text);
|
|
||||||
}
|
|
||||||
.main-connectToFacebook-facebookButton {
|
|
||||||
color: var(--spice-subbutton-text);
|
|
||||||
}
|
|
||||||
.div.GlueDropTarget.personal-library > *.active {
|
|
||||||
background: var(--spice-selected-row);
|
|
||||||
}
|
|
||||||
.main-connectBar-connectBar {
|
|
||||||
overflow: visible !important;
|
|
||||||
--triangle-position: 147px !important;
|
|
||||||
align-items: unset !important;
|
|
||||||
height: 0px !important;
|
|
||||||
position: absolute !important;
|
|
||||||
left: 80% !important;
|
|
||||||
display: flex !important;
|
|
||||||
bottom: 2% !important;
|
|
||||||
padding: unset !important;
|
|
||||||
}
|
|
||||||
#spicetify-playlist-list > div {
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
overflow-y: scroll;
|
|
||||||
overflow: hidden;
|
|
||||||
contain: unset !important;
|
|
||||||
height: fit-content !important;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
}
|
|
||||||
div.main-cardImage-imageWrapper.main-cardImage-roundedCorners
|
|
||||||
> div
|
|
||||||
> div
|
|
||||||
> svg
|
|
||||||
> path {
|
|
||||||
color: blue;
|
|
||||||
background-color: blue;
|
|
||||||
fill: var(--spice-sidebar);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
div.main-cardImage-imageWrapper.main-cardImage-roundedCorners
|
|
||||||
> div
|
|
||||||
> div
|
|
||||||
> svg
|
|
||||||
> path {
|
|
||||||
color: blue;
|
|
||||||
background-color: blue;
|
|
||||||
fill: var(--spice-sidebar);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
.main-yourEpisodes-coverContainer {
|
|
||||||
background-color: var(--spice-text);
|
|
||||||
}
|
|
||||||
.playback-bar__progress-time-elapsed {
|
|
||||||
visibility: hidden;
|
|
||||||
width: 0px;
|
|
||||||
height: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.Root__nav-bar {
|
|
||||||
min-width: 281px !important;
|
|
||||||
}
|
|
||||||
.playback-bar__progress-time-elapsed {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
#spicetify-playlist-list > div {
|
|
||||||
height: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
@ -1,110 +0,0 @@
|
||||||
# Dribbblish
|
|
||||||
|
|
||||||
### Base
|
|
||||||
|
|
||||||
### White
|
|
||||||
|
|
||||||
### Dark
|
|
||||||
|
|
||||||
### Nord-Light
|
|
||||||
|
|
||||||
### Nord-Dark
|
|
||||||
|
|
||||||
### Beach-Sunset
|
|
||||||
|
|
||||||
### Purple
|
|
||||||
|
|
||||||
### Samurai
|
|
||||||
|
|
||||||
### Gruvbox
|
|
||||||
|
|
||||||
### Gruvbox Material Dark
|
|
||||||
|
|
||||||
### Rosé Pine
|
|
||||||
|
|
||||||
### Lunar
|
|
||||||
|
|
||||||
### Catppuccin Latte
|
|
||||||
|
|
||||||
### Catppuccin Frappe
|
|
||||||
|
|
||||||
### Catppuccin Macchiato
|
|
||||||
|
|
||||||
### Catppuccin Mocha
|
|
||||||
|
|
||||||
|
|
||||||
## Features
|
|
||||||
### Resizable sidebar
|
|
||||||
|
|
||||||
<img src="https://i.imgur.com/1zomkmd.png" alt="img" align="center" width="500px">
|
|
||||||
|
|
||||||
### Customizable sidebar
|
|
||||||
Rearrange icons positions, stick icons to header or hide unnecessary to save space.
|
|
||||||
Turn on "Sidebar config" mode in Profile menu and hover on icon to show control buttons.
|
|
||||||
After you finish customizing, turn off Config mode in Profile menu to save.
|
|
||||||
|
|
||||||
<img src="https://i.imgur.com/86gqPe8.png" alt="img" align="center" width="500px">
|
|
||||||
|
|
||||||
### Playlist Folder image
|
|
||||||
Right click at folder and choose images for your playlist folder. Every image formats supported by Chrome can be used, but do keep image size small and in compressed format.
|
|
||||||
|
|
||||||
<img src="https://i.imgur.com/WGQ7Bev.gif" alt="img" align="center" width="500px">
|
|
||||||
|
|
||||||
### Left/Right expanded cover
|
|
||||||
In profile menu, toggle option "Right expanded cover" to change expaned current track cover image to left or right side, whereever you prefer.
|
|
||||||
|
|
||||||
## Auto-install
|
|
||||||
Make sure you are using spicetify >= v2.5.0 and Spotify >= v1.1.56.
|
|
||||||
### Windows
|
|
||||||
```powershell
|
|
||||||
Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Dribbblish/install.ps1" | Invoke-Expression
|
|
||||||
```
|
|
||||||
|
|
||||||
## Manual Install
|
|
||||||
Run these commands:
|
|
||||||
|
|
||||||
### Linux and MacOS:
|
|
||||||
In **Bash**:
|
|
||||||
```bash
|
|
||||||
cd "$(dirname "$(spicetify -c)")/Themes/Dribbblish"
|
|
||||||
spicetify config current_theme Dribbblish color_scheme base
|
|
||||||
spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1
|
|
||||||
spicetify apply
|
|
||||||
```
|
|
||||||
|
|
||||||
### Windows
|
|
||||||
In **Powershell**:
|
|
||||||
```powershell
|
|
||||||
cd "$(spicetify -c | Split-Path)\Themes\Dribbblish"
|
|
||||||
spicetify config current_theme Dribbblish color_scheme base
|
|
||||||
spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1
|
|
||||||
spicetify apply
|
|
||||||
```
|
|
||||||
|
|
||||||
From Spotify > v1.1.62, in sidebar, they use an adaptive render mechanic to actively show and hide items on scroll. It helps reducing number of items to render, hence there is significant performance boost if you have a large playlists collection. But the drawbacks is that item height is hard-coded, it messes up user interaction when we explicity change, in CSS, playlist item height bigger than original value. So you need to add these 2 lines in Patch section in config file:
|
|
||||||
```ini
|
|
||||||
[Patch]
|
|
||||||
xpui.js_find_8008 = ,(\w+=)32,
|
|
||||||
xpui.js_repl_8008 = ,${1}56,
|
|
||||||
```
|
|
||||||
|
|
||||||
## Change Color Schemes
|
|
||||||
There are 9 color schemes you can choose: `base`, `white`, `dark`, `dracula`, `nord-dark`, `nord-light`, `beach-sunset`, `samurai`, `purple`, `gruvbox`, `gruvbox-material-dark`, `catppuccin-latte`, `catppuccin-frappe`, `catppuccin-macchiato`, and `catppuccin-mocha`. Change scheme with commands:
|
|
||||||
```
|
|
||||||
spicetify config color_scheme <scheme name>
|
|
||||||
spicetify apply
|
|
||||||
```
|
|
||||||
|
|
||||||
## Auto-uninstall
|
|
||||||
### Windows
|
|
||||||
```powershell
|
|
||||||
Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/spicetify/spicetify-themes/v2/Dribbblish/uninstall.ps1" | Invoke-Expression
|
|
||||||
```
|
|
||||||
|
|
||||||
## Manual uninstall
|
|
||||||
Remove the dribbblish theme with the following commands
|
|
||||||
|
|
||||||
```
|
|
||||||
spicetify config current_theme " " color_scheme " "
|
|
||||||
spicetify apply
|
|
||||||
```
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 772 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 532 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
|
|
@ -1,308 +0,0 @@
|
||||||
[base]
|
|
||||||
text = FFFFFF
|
|
||||||
subtext = F0F0F0
|
|
||||||
sidebar-text = FFFFFF
|
|
||||||
main = 000000
|
|
||||||
sidebar = 24b558
|
|
||||||
player = 000000
|
|
||||||
card = 000000
|
|
||||||
shadow = 202020
|
|
||||||
selected-row = 797979
|
|
||||||
button = 24b558
|
|
||||||
button-active = 24b558
|
|
||||||
button-disabled = 535353
|
|
||||||
tab-active = 166632
|
|
||||||
notification = 1db954
|
|
||||||
notification-error = e22134
|
|
||||||
misc = BFBFBF
|
|
||||||
|
|
||||||
|
|
||||||
[white]
|
|
||||||
text = 363636
|
|
||||||
subtext = 3D3D3D
|
|
||||||
sidebar-text = FFF9F4
|
|
||||||
main = FFF9F4
|
|
||||||
sidebar = FFA789
|
|
||||||
player = FFF9F4
|
|
||||||
card = FFF9F4
|
|
||||||
shadow = d3d3d3
|
|
||||||
selected-row = 6D6D6D
|
|
||||||
button = ff8367
|
|
||||||
button-active = ff8367
|
|
||||||
button-disabled = 535353
|
|
||||||
tab-active = ffdace
|
|
||||||
notification = FFA789
|
|
||||||
notification-error = e22134
|
|
||||||
misc = BFBFBF
|
|
||||||
|
|
||||||
[dark]
|
|
||||||
text = F0F0F0
|
|
||||||
subtext = F0F0F0
|
|
||||||
sidebar-text = 0a0e14
|
|
||||||
main = 0a0e14
|
|
||||||
sidebar = C2D935
|
|
||||||
player = 0a0e14
|
|
||||||
card = 0a0e14
|
|
||||||
shadow = 202020
|
|
||||||
selected-row = DEDEDE
|
|
||||||
button = C2D935
|
|
||||||
button-active = C2D935
|
|
||||||
button-disabled = 535353
|
|
||||||
tab-active = 727d2b
|
|
||||||
notification = C2D935
|
|
||||||
notification-error = e22134
|
|
||||||
misc = BFBFBF
|
|
||||||
|
|
||||||
[dracula]
|
|
||||||
text = f8f8f2
|
|
||||||
subtext = f8f8f2
|
|
||||||
sidebar-text = F0F0F0
|
|
||||||
main = 44475a
|
|
||||||
sidebar = 6272a4
|
|
||||||
player = 44475a
|
|
||||||
card = 6272a4
|
|
||||||
shadow = 000000
|
|
||||||
selected-row = bd93f9
|
|
||||||
button = ffb86c
|
|
||||||
button-active = 8be9fd
|
|
||||||
button-disabled = 535353
|
|
||||||
tab-active = 6272a4
|
|
||||||
notification = bd93f9
|
|
||||||
notification-error = e22134
|
|
||||||
misc = BFBFBF
|
|
||||||
|
|
||||||
[nord-light]
|
|
||||||
text = 2e3440
|
|
||||||
subtext = 3b4252
|
|
||||||
sidebar-text = ECEFF4
|
|
||||||
main = ECEFF4
|
|
||||||
sidebar = 5E81AC
|
|
||||||
player = ECEFF4
|
|
||||||
card = ebcb8b
|
|
||||||
shadow = eceff4
|
|
||||||
selected-row = 4c566a
|
|
||||||
button = 81a1c1
|
|
||||||
button-active = 81a1c1
|
|
||||||
button-disabled = c0c0c0
|
|
||||||
tab-active = ebcb8b
|
|
||||||
notification = a3be8c
|
|
||||||
notification-error = bf616a
|
|
||||||
misc = BFBFBF
|
|
||||||
|
|
||||||
[nord-dark]
|
|
||||||
text = ECEFF4
|
|
||||||
subtext = E5E9F0
|
|
||||||
sidebar-text = 434c5e
|
|
||||||
main = 2e3440
|
|
||||||
sidebar = 88C0D0
|
|
||||||
player = 2e3440
|
|
||||||
card = 2e3440
|
|
||||||
shadow = 2E3440
|
|
||||||
selected-row = D8DEE9
|
|
||||||
button = 81A1C1
|
|
||||||
button-active = 81A1C1
|
|
||||||
button-disabled = 434C5E
|
|
||||||
tab-active = 434C5E
|
|
||||||
notification = A3BE8C
|
|
||||||
notification-error = BF616A
|
|
||||||
misc = BFBFBF
|
|
||||||
|
|
||||||
[purple]
|
|
||||||
text = f1eaff
|
|
||||||
subtext = f1eaff
|
|
||||||
sidebar-text = e0d0ff
|
|
||||||
main = 0A0E14
|
|
||||||
sidebar = 6F3C89
|
|
||||||
player = 0A0E14
|
|
||||||
card = 0A0E14
|
|
||||||
shadow = 3a2645
|
|
||||||
selected-row = 645275
|
|
||||||
button = c76af6
|
|
||||||
button-active = 6F3C89
|
|
||||||
button-disabled = 535353
|
|
||||||
tab-active = 58306D
|
|
||||||
notification = ff9e00
|
|
||||||
notification-error = f61379
|
|
||||||
misc = DEDEDE
|
|
||||||
|
|
||||||
[samurai]
|
|
||||||
text = ebdbb2
|
|
||||||
subtext = ebdbb2
|
|
||||||
sidebar-text = 461217
|
|
||||||
main = 461217
|
|
||||||
sidebar = ebdbb2
|
|
||||||
player = 461217
|
|
||||||
card = 461217
|
|
||||||
shadow = 000000
|
|
||||||
selected-row = 909090
|
|
||||||
button = e7a52d
|
|
||||||
button-active = e7a52d
|
|
||||||
button-disabled = 535353
|
|
||||||
tab-active = e7a52d
|
|
||||||
notification = e7a52d
|
|
||||||
notification-error = e22134
|
|
||||||
misc = BFBFBF
|
|
||||||
|
|
||||||
[beach-sunset]
|
|
||||||
text = FFFFFF
|
|
||||||
subtext = F0F0F0
|
|
||||||
sidebar-text = F0F0F0
|
|
||||||
main = 262626
|
|
||||||
sidebar = bd3e3e
|
|
||||||
player = 262626
|
|
||||||
card = 262626
|
|
||||||
shadow = 000000
|
|
||||||
selected-row = d1d6e2
|
|
||||||
button = f1a84f
|
|
||||||
button-active = c98430
|
|
||||||
button-disabled = 535353
|
|
||||||
tab-active = f1a84f
|
|
||||||
notification = c98430
|
|
||||||
notification-error = e22134
|
|
||||||
misc = BFBFBF
|
|
||||||
|
|
||||||
[gruvbox]
|
|
||||||
text = fbf1c7
|
|
||||||
subtext = d5c4a1
|
|
||||||
sidebar-text = ebe1b7
|
|
||||||
main = 292828
|
|
||||||
sidebar = 689d6a
|
|
||||||
player = 292828
|
|
||||||
card = 3c3836
|
|
||||||
shadow = 202020
|
|
||||||
selected-row = d5c4a1
|
|
||||||
button = fb4934
|
|
||||||
button-active = cc241d
|
|
||||||
button-disabled = bdae93
|
|
||||||
tab-active = fb4934
|
|
||||||
notification = 8ec07c
|
|
||||||
notification-error = d79921
|
|
||||||
misc = BFBFBF
|
|
||||||
|
|
||||||
[gruvbox-material-dark]
|
|
||||||
text = fbf1c7
|
|
||||||
subtext = d5c4a1
|
|
||||||
sidebar-text = 716e5f
|
|
||||||
main = 292828
|
|
||||||
sidebar = 1d2021
|
|
||||||
player = 292828
|
|
||||||
card = 3c3836
|
|
||||||
shadow = 202020
|
|
||||||
selected-row = d5c4a1
|
|
||||||
button = a9b665
|
|
||||||
button-active = a9b665
|
|
||||||
button-disabled = bdae93
|
|
||||||
tab-active = a9b665
|
|
||||||
notification = 8ec07c
|
|
||||||
notification-error = d79921
|
|
||||||
misc = BFBFBF
|
|
||||||
|
|
||||||
[rosepine]
|
|
||||||
text = ebbcba
|
|
||||||
subtext = F0F0F0
|
|
||||||
sidebar-text = e0def4
|
|
||||||
main = 191724
|
|
||||||
sidebar = 2a2837
|
|
||||||
player = 191724
|
|
||||||
card = 191724
|
|
||||||
shadow = 1f1d2e
|
|
||||||
selected-row = 797979
|
|
||||||
button = 31748f
|
|
||||||
button-active = 31748f
|
|
||||||
button-disabled = 555169
|
|
||||||
tab-active = 31748f
|
|
||||||
notification = 1db954
|
|
||||||
notification-error = eb6f92
|
|
||||||
misc = 6e6a86
|
|
||||||
|
|
||||||
[lunar]
|
|
||||||
text = f3f3f3
|
|
||||||
subtext = cecece
|
|
||||||
sidebar-text = f3f3f3
|
|
||||||
main = 161616
|
|
||||||
sidebar = 202020
|
|
||||||
player = 161616
|
|
||||||
card = 161616
|
|
||||||
shadow = 252525
|
|
||||||
selected-row = 202020
|
|
||||||
button = 3281ea
|
|
||||||
button-active = 0284e8
|
|
||||||
button-disabled = 303030
|
|
||||||
tab-active = ebbcba
|
|
||||||
notification = 3281ea
|
|
||||||
notification-error = b10c0c
|
|
||||||
misc = 252525
|
|
||||||
|
|
||||||
; Comments below correspond to the labeling of the colors on the Catppuccin GitHub page.
|
|
||||||
|
|
||||||
[catppuccin-latte]
|
|
||||||
text = 4c4f69 ; Text
|
|
||||||
subtext = 5c5f77 ; Subtext1
|
|
||||||
sidebar-text = 4c4f69 ; Text
|
|
||||||
main = eff1f5 ; Base
|
|
||||||
sidebar = e6e9ef ; Mantle
|
|
||||||
player = eff1f5 ; Base
|
|
||||||
card = eff1f5 ; Base
|
|
||||||
shadow = e6e9ef ; Mantle
|
|
||||||
selected-row = 7c7f93 ; Overlay2
|
|
||||||
button = 8c8fa1 ; Overlay1
|
|
||||||
button-active = 7c7f93 ; Overlay2
|
|
||||||
button-disabled = 9ca0b0 ; Overlay0
|
|
||||||
tab-active = ccd0da ; Surface0
|
|
||||||
notification = ccd0da ; Surface0
|
|
||||||
notification-error = d20f39 ; Red
|
|
||||||
misc = bcc0cc ; Surface1
|
|
||||||
|
|
||||||
[catppuccin-frappe]
|
|
||||||
text = c6d0f5 ; Text
|
|
||||||
subtext = b5bfe2 ; Subtext1
|
|
||||||
sidebar-text = c6d0f5 ; Text
|
|
||||||
main = 303446 ; Base
|
|
||||||
sidebar = 292c3c ; Mantle
|
|
||||||
player = 303446 ; Base
|
|
||||||
card = 303446 ; Base
|
|
||||||
shadow = 292c3c ; Mantle
|
|
||||||
selected-row = 949cbb ; Overlay2
|
|
||||||
button = 838ba7 ; Overlay1
|
|
||||||
button-active = 949cbb ; Overlay2
|
|
||||||
button-disabled = 737994 ; Overlay0
|
|
||||||
tab-active = 414559 ; Surface0
|
|
||||||
notification = 414559 ; Surface0
|
|
||||||
notification-error = e78284 ; Red
|
|
||||||
misc = 51576d ; Surface1
|
|
||||||
|
|
||||||
[catppuccin-macchiato]
|
|
||||||
text = cad3f5 ; Text
|
|
||||||
subtext = b8c0e0 ; Subtext1
|
|
||||||
sidebar-text = cad3f5 ; Text
|
|
||||||
main = 24273a ; Base
|
|
||||||
sidebar = 1e2030 ; Mantle
|
|
||||||
player = 24273a ; Base
|
|
||||||
card = 24273a ; Base
|
|
||||||
shadow = 1e2030 ; Mantle
|
|
||||||
selected-row = 939ab7 ; Overlay2
|
|
||||||
button = 8087a2 ; Overlay1
|
|
||||||
button-active = 939ab7 ; Overlay2
|
|
||||||
button-disabled = 6e738d ; Overlay0
|
|
||||||
tab-active = 363a4f ; Surface0
|
|
||||||
notification = 363a4f ; Surface0
|
|
||||||
notification-error = ed8796 ; Red
|
|
||||||
misc = 494d64 ; Surface1
|
|
||||||
|
|
||||||
[catppuccin-mocha]
|
|
||||||
text = cdd6f4 ; Text
|
|
||||||
subtext = bac2de ; Subtext1
|
|
||||||
sidebar-text = cdd6f4 ; Text
|
|
||||||
main = 1e1e2e ; Base
|
|
||||||
sidebar = 181825 ; Mantle
|
|
||||||
player = 1e1e2e ; Base
|
|
||||||
card = 1e1e2e ; Base
|
|
||||||
shadow = 181825 ; Mantle
|
|
||||||
selected-row = 9399b2 ; Overlay2
|
|
||||||
button = 7f849c ; Overlay1
|
|
||||||
button-active = 9399b2 ; Overlay2
|
|
||||||
button-disabled = 6c7086 ; Overlay0
|
|
||||||
tab-active = 313244 ; Surface0
|
|
||||||
notification = 313244 ; Surface0
|
|
||||||
notification-error = f38ba8 ; Red
|
|
||||||
misc = 45475a ; Surface1
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 260 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 425 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg width="80" height="81" viewBox="0 0 80 81" xmlns="http://www.w3.org/2000/svg"><title>Playlist Icon</title><path d="M25.6 11.565v45.38c-2.643-3.27-6.68-5.37-11.2-5.37-7.94 0-14.4 6.46-14.4 14.4s6.46 14.4 14.4 14.4 14.4-6.46 14.4-14.4v-51.82l48-10.205V47.2c-2.642-3.27-6.678-5.37-11.2-5.37-7.94 0-14.4 6.46-14.4 14.4s6.46 14.4 14.4 14.4S80 64.17 80 56.23V0L25.6 11.565zm-11.2 65.61c-6.176 0-11.2-5.025-11.2-11.2 0-6.177 5.024-11.2 11.2-11.2 6.176 0 11.2 5.023 11.2 11.2 0 6.174-5.026 11.2-11.2 11.2zm51.2-9.745c-6.176 0-11.2-5.024-11.2-11.2 0-6.174 5.024-11.2 11.2-11.2 6.176 0 11.2 5.026 11.2 11.2 0 6.178-5.026 11.2-11.2 11.2z" fill="currentColor" fill-rule="evenodd"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 686 B |
|
|
@ -1,55 +0,0 @@
|
||||||
$checkSpice = Get-Command spicetify -ErrorAction Silent
|
|
||||||
if ($null -eq $checkSpice) {
|
|
||||||
Write-Host -ForegroundColor Red "Spicetify not found"
|
|
||||||
Write-Host "Follow instruction on:", "https://spicetify.app/docs/getting-started/simple-installation#windows"
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
Write-Host "Downloading themes package:" -ForegroundColor Green
|
|
||||||
$zipFile = "$env:TEMP\spicetify-themes.zip"
|
|
||||||
Invoke-WebRequest "https://github.com/spicetify/spicetify-themes/archive/refs/heads/master.zip" -OutFile $zipFile
|
|
||||||
|
|
||||||
Write-Host "Extracting themes package:" -ForegroundColor Green
|
|
||||||
$extractPath = "$env:TEMP\spicetify-themes-master"
|
|
||||||
if (Test-Path $extractPath) {
|
|
||||||
Remove-Item $extractPath -Recurse -Force
|
|
||||||
}
|
|
||||||
Expand-Archive $zipFile -DestinationPath $env:TEMP
|
|
||||||
|
|
||||||
# Copy to personal Themes folder
|
|
||||||
$spicePath = spicetify -c | Split-Path
|
|
||||||
$dribPath = "$extractPath\Dribbblish"
|
|
||||||
|
|
||||||
$destPath = "$spicePath\Themes\Dribbblish"
|
|
||||||
if (Test-Path $destPath) {
|
|
||||||
Remove-Item $destPath -Recurse -Force
|
|
||||||
}
|
|
||||||
Copy-Item $dribPath $destPath -Recurse
|
|
||||||
|
|
||||||
Write-Host "Configuring:" -ForegroundColor Green
|
|
||||||
spicetify
|
|
||||||
spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1 current_theme Dribbblish
|
|
||||||
|
|
||||||
# Add patch
|
|
||||||
$configFile = Get-Content "$spicePath\config-xpui.ini"
|
|
||||||
if (-not ($configFile -match "xpui.js_find_8008")) {
|
|
||||||
$rep = @"
|
|
||||||
[Patch]
|
|
||||||
xpui.js_find_8008=,(\w+=)32,
|
|
||||||
xpui.js_repl_8008=,`${1}56,
|
|
||||||
"@
|
|
||||||
# In case missing Patch section
|
|
||||||
if (-not ($configFile -match "\[Patch\]")) {
|
|
||||||
$configFile += "`n[Patch]`n"
|
|
||||||
}
|
|
||||||
$configFile = $configFile -replace "\[Patch\]",$rep
|
|
||||||
Set-Content "$spicePath\config-xpui.ini" $configFile
|
|
||||||
}
|
|
||||||
|
|
||||||
$backupVer = $configFile -match "^version"
|
|
||||||
$version = ConvertFrom-StringData $backupVer[0]
|
|
||||||
if ($version.version.Length -gt 0) {
|
|
||||||
spicetify apply
|
|
||||||
} else {
|
|
||||||
spicetify backup apply
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 726 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 919 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 222 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 656 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 169 KiB |
|
|
@ -1,242 +0,0 @@
|
||||||
function waitForElement(els, func, timeout = 100) {
|
|
||||||
const queries = els.map(el => document.querySelector(el));
|
|
||||||
if (queries.every(a => a)) {
|
|
||||||
func(queries);
|
|
||||||
} else if (timeout > 0) {
|
|
||||||
setTimeout(waitForElement, 300, els, func, --timeout);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let DribbblishShared = {};
|
|
||||||
|
|
||||||
// back shadow
|
|
||||||
waitForElement([".Root__top-container"], ([topContainer]) => {
|
|
||||||
const shadow = document.createElement("div");
|
|
||||||
shadow.id = "dribbblish-back-shadow";
|
|
||||||
topContainer.prepend(shadow);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Spicetify.Platform.ConnectAPI.state.connectionStatus;
|
|
||||||
|
|
||||||
// add fade effect on playlist/folder list
|
|
||||||
waitForElement([".main-navBar-mainNav .os-viewport.os-viewport-native-scrollbars-invisible"], ([scrollNode]) => {
|
|
||||||
scrollNode.setAttribute("fade", "bottom");
|
|
||||||
scrollNode.addEventListener("scroll", () => {
|
|
||||||
if (scrollNode.scrollTop == 0) {
|
|
||||||
scrollNode.setAttribute("fade", "bottom");
|
|
||||||
} else if (scrollNode.scrollHeight - scrollNode.clientHeight - scrollNode.scrollTop == 0) {
|
|
||||||
scrollNode.setAttribute("fade", "top");
|
|
||||||
} else {
|
|
||||||
scrollNode.setAttribute("fade", "full");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
let version;
|
|
||||||
let ylx;
|
|
||||||
|
|
||||||
(function Dribbblish() {
|
|
||||||
// dynamic playback time tooltip
|
|
||||||
const progBar = document.querySelector(".playback-bar");
|
|
||||||
const root = document.querySelector(".Root");
|
|
||||||
|
|
||||||
if (!Spicetify.Player.origin || !progBar || !root) {
|
|
||||||
setTimeout(Dribbblish, 300);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
version = Spicetify.Platform.PlatformData.event_sender_context_information.client_version_int;
|
|
||||||
|
|
||||||
if (version < 121200000) {
|
|
||||||
document.documentElement.classList.add("legacy");
|
|
||||||
legacy();
|
|
||||||
} else if (version >= 121200000 && version < 121400000) {
|
|
||||||
document.documentElement.classList.add("legacy-gridChange");
|
|
||||||
legacy();
|
|
||||||
} else if (version >= 121400000) {
|
|
||||||
document.documentElement.classList.add("ylx");
|
|
||||||
ylx = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
const tooltip = document.createElement("div");
|
|
||||||
tooltip.className = "prog-tooltip";
|
|
||||||
progBar.append(tooltip);
|
|
||||||
|
|
||||||
function updateProgTime({ data: e }) {
|
|
||||||
const maxWidth = progBar.offsetWidth;
|
|
||||||
const curWidth = Spicetify.Player.getProgressPercent() * maxWidth;
|
|
||||||
const ttWidth = tooltip.offsetWidth / 2;
|
|
||||||
if (curWidth < ttWidth + 12) {
|
|
||||||
tooltip.style.left = "12px";
|
|
||||||
} else if (curWidth > maxWidth - ttWidth - 12) {
|
|
||||||
tooltip.style.left = String(maxWidth - ttWidth * 2 - 12) + "px";
|
|
||||||
} else {
|
|
||||||
tooltip.style.left = String(curWidth - ttWidth) + "px";
|
|
||||||
}
|
|
||||||
tooltip.innerText = Spicetify.Player.formatTime(e) + " / " + Spicetify.Player.formatTime(Spicetify.Player.getDuration());
|
|
||||||
}
|
|
||||||
Spicetify.Player.addEventListener("onprogress", updateProgTime);
|
|
||||||
updateProgTime({ data: Spicetify.Player.getProgress() });
|
|
||||||
|
|
||||||
// filepicker for custom folder images
|
|
||||||
const filePickerForm = document.createElement("form");
|
|
||||||
filePickerForm.setAttribute("aria-hidden", true);
|
|
||||||
filePickerForm.innerHTML = '<input type="file" class="hidden-visually" />';
|
|
||||||
/** @type {HTMLInputElement} */
|
|
||||||
const filePickerInput = filePickerForm.childNodes[0];
|
|
||||||
filePickerInput.accept = ["image/jpeg", "image/apng", "image/avif", "image/gif", "image/png", "image/svg+xml", "image/webp"].join(",");
|
|
||||||
|
|
||||||
filePickerInput.onchange = () => {
|
|
||||||
if (!filePickerInput.files.length) return;
|
|
||||||
|
|
||||||
const file = filePickerInput.files[0];
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = event => {
|
|
||||||
const result = event.target.result;
|
|
||||||
const id = Spicetify.URI.from(filePickerInput.uri).id;
|
|
||||||
try {
|
|
||||||
localStorage.setItem("dribbblish:folder-image:" + id, result);
|
|
||||||
} catch {
|
|
||||||
Spicetify.showNotification("File too large");
|
|
||||||
}
|
|
||||||
DribbblishShared.loadPlaylistImage?.call();
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
};
|
|
||||||
|
|
||||||
// context menu items for custom folder images
|
|
||||||
new Spicetify.ContextMenu.Item(
|
|
||||||
"Remove folder image",
|
|
||||||
([uri]) => {
|
|
||||||
const id = Spicetify.URI.from(uri).id;
|
|
||||||
localStorage.removeItem("dribbblish:folder-image:" + id);
|
|
||||||
DribbblishShared.loadPlaylistImage?.call();
|
|
||||||
},
|
|
||||||
([uri]) => Spicetify.URI.isFolder(uri) && !ylx,
|
|
||||||
"x"
|
|
||||||
).register();
|
|
||||||
new Spicetify.ContextMenu.Item(
|
|
||||||
"Choose folder image",
|
|
||||||
([uri]) => {
|
|
||||||
filePickerInput.uri = uri;
|
|
||||||
filePickerForm.reset();
|
|
||||||
filePickerInput.click();
|
|
||||||
},
|
|
||||||
([uri]) => Spicetify.URI.isFolder(uri) && !ylx,
|
|
||||||
"edit"
|
|
||||||
).register();
|
|
||||||
})();
|
|
||||||
|
|
||||||
// LEGACY NAVBAR ONLY
|
|
||||||
function legacy() {
|
|
||||||
if (!Spicetify.Platform) {
|
|
||||||
setTimeout(legacy, 300);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// allow resizing of the navbar
|
|
||||||
waitForElement([".Root__nav-bar .LayoutResizer__input"], ([resizer]) => {
|
|
||||||
const observer = new MutationObserver(updateVariable);
|
|
||||||
observer.observe(resizer, { attributes: true, attributeFilter: ["value"] });
|
|
||||||
function updateVariable() {
|
|
||||||
let value = resizer.value;
|
|
||||||
if (value < 121) {
|
|
||||||
value = 72;
|
|
||||||
document.documentElement.classList.add("left-sidebar-collapsed");
|
|
||||||
} else {
|
|
||||||
document.documentElement.classList.remove("left-sidebar-collapsed");
|
|
||||||
}
|
|
||||||
document.documentElement.style.setProperty("--nav-bar-width", value + "px");
|
|
||||||
}
|
|
||||||
updateVariable();
|
|
||||||
});
|
|
||||||
|
|
||||||
// allow resizing of the buddy feed
|
|
||||||
waitForElement([".Root__right-sidebar .LayoutResizer__input"], ([resizer]) => {
|
|
||||||
const observer = new MutationObserver(updateVariable);
|
|
||||||
observer.observe(resizer, { attributes: true, attributeFilter: ["value"] });
|
|
||||||
function updateVariable() {
|
|
||||||
let value = resizer.value;
|
|
||||||
let min_value = version < 121200000 ? 321 : 281;
|
|
||||||
if (value < min_value) {
|
|
||||||
value = 72;
|
|
||||||
document.documentElement.classList.add("buddyFeed-hide-text");
|
|
||||||
} else {
|
|
||||||
document.documentElement.classList.remove("buddyFeed-hide-text");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
updateVariable();
|
|
||||||
});
|
|
||||||
|
|
||||||
waitForElement([".main-nowPlayingBar-container"], ([nowPlayingBar]) => {
|
|
||||||
const observer = new MutationObserver(updateVariable);
|
|
||||||
observer.observe(nowPlayingBar, { childList: true });
|
|
||||||
function updateVariable() {
|
|
||||||
if (nowPlayingBar.childElementCount === 2) {
|
|
||||||
document.documentElement.classList.add("connected");
|
|
||||||
} else {
|
|
||||||
document.documentElement.classList.remove("connected");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
updateVariable();
|
|
||||||
});
|
|
||||||
|
|
||||||
// add fade effect on playlist/folder list
|
|
||||||
waitForElement([".main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible"], ([scrollNode]) => {
|
|
||||||
scrollNode.setAttribute("fade", "bottom");
|
|
||||||
scrollNode.addEventListener("scroll", () => {
|
|
||||||
if (scrollNode.scrollTop == 0) {
|
|
||||||
scrollNode.setAttribute("fade", "bottom");
|
|
||||||
} else if (scrollNode.scrollHeight - scrollNode.clientHeight - scrollNode.scrollTop == 0) {
|
|
||||||
scrollNode.setAttribute("fade", "top");
|
|
||||||
} else {
|
|
||||||
scrollNode.setAttribute("fade", "full");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
waitForElement([`ul[tabindex="0"]`, `ul[tabindex="0"] .GlueDropTarget--playlists.GlueDropTarget--folders`], ([root, firstItem]) => {
|
|
||||||
const listElem = firstItem.parentElement;
|
|
||||||
root.classList.add("dribs-playlist-list");
|
|
||||||
|
|
||||||
/** Replace Playlist name with their pictures */
|
|
||||||
function loadPlaylistImage() {
|
|
||||||
for (const item of listElem.children) {
|
|
||||||
let link = item.querySelector("a");
|
|
||||||
if (!link) continue;
|
|
||||||
|
|
||||||
let [_, app, uid] = link.pathname.split("/");
|
|
||||||
let uri;
|
|
||||||
if (app === "playlist") {
|
|
||||||
uri = `spotify:playlist:${uid}`;
|
|
||||||
} else if (app === "folder") {
|
|
||||||
const base64 = localStorage.getItem("dribbblish:folder-image:" + uid);
|
|
||||||
let img = link.querySelector("img");
|
|
||||||
if (!img) {
|
|
||||||
img = document.createElement("img");
|
|
||||||
img.classList.add("playlist-picture");
|
|
||||||
link.prepend(img);
|
|
||||||
}
|
|
||||||
img.src = base64 || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg";
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
Spicetify.CosmosAsync.get(`sp://core-playlist/v1/playlist/${uri}/metadata`, { policy: { picture: true } }).then(res => {
|
|
||||||
const meta = res.metadata;
|
|
||||||
let img = link.querySelector("img");
|
|
||||||
if (!img) {
|
|
||||||
img = document.createElement("img");
|
|
||||||
img.classList.add("playlist-picture");
|
|
||||||
link.prepend(img);
|
|
||||||
}
|
|
||||||
img.src = meta.picture || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
DribbblishShared.loadPlaylistImage = loadPlaylistImage;
|
|
||||||
loadPlaylistImage();
|
|
||||||
|
|
||||||
new MutationObserver(loadPlaylistImage).observe(listElem, { childList: true });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
spicetify config current_theme " "
|
|
||||||
|
|
||||||
$configPath = spicetify -c
|
|
||||||
$configFile = Get-Content $configPath
|
|
||||||
$find = $configFile -match "xpui.js_find_8008"
|
|
||||||
if ($find) {
|
|
||||||
$configFile = $configFile -replace [regex]::escape($find),""
|
|
||||||
}
|
|
||||||
$repl = $configFile -match "xpui.js_repl_8008"
|
|
||||||
if ($repl) {
|
|
||||||
$configFile = $configFile -replace [regex]::escape($repl),""
|
|
||||||
}
|
|
||||||
Set-Content $configPath $configFile
|
|
||||||
|
|
||||||
spicetify apply
|
|
||||||
|
|
@ -1,925 +0,0 @@
|
||||||
:root {
|
|
||||||
--corner-radius: 10px;
|
|
||||||
--bar-cover-art-size: 40px;
|
|
||||||
--scrollbar-vertical-size: 10px;
|
|
||||||
--scrollbar-horizontal-size: 10px;
|
|
||||||
--bar-height: 90px;
|
|
||||||
--main-gap: 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.global-nav .Root__top-container {
|
|
||||||
grid-template-areas: "global-nav global-nav global-nav"
|
|
||||||
"left-sidebar main-view right-sidebar"
|
|
||||||
"left-sidebar now-playing-bar now-playing-bar" !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.global-nav #Desktop_PanelContainer_Id {
|
|
||||||
border-radius: 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__globalNav {
|
|
||||||
background-color: var(--spice-main) !important;
|
|
||||||
border-radius: var(--corner-radius) var(--corner-radius) 0 0 !important;
|
|
||||||
margin-left: calc(var(--left-sidebar-width) * 1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Root__globalNav .main-globalNav-historyButtonsContainer,
|
|
||||||
.Root__globalNav .main-globalNav-searchSection,
|
|
||||||
.Root__globalNav .main-topBar-topbarContentRight {
|
|
||||||
-webkit-transform: scale(0.75);
|
|
||||||
transform: scale(0.75);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-home-filterChipsSection {
|
|
||||||
background-color: var(--spice-main) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.global-nav .Root__main-view {
|
|
||||||
border-radius: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Root__main-view {
|
|
||||||
border-radius: var(--corner-radius) var(--corner-radius) 0 0 !important;
|
|
||||||
grid-area: main-view !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legacy .Root__top-container:not(:has(> .Root__right-sidebar)) {
|
|
||||||
padding-right: var(--main-gap);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ylx .Root__top-container:not(:has(> .Root__right-sidebar > aside)) {
|
|
||||||
padding-right: var(--main-gap);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Root__right-sidebar:not(:has(> aside)) {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 cards hover play button */
|
|
||||||
.main-card-PlayButtonContainer .ButtonInner-medium-iconOnly {
|
|
||||||
background-color: var(--background-base);
|
|
||||||
color: var(--spice-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* top welcome box viz. good morning */
|
|
||||||
.view-homeShortcutsGrid-PlayButtonContainer .ButtonInner-small-iconOnly,
|
|
||||||
.view-homeShortcutsGrid-PlayButtonContainer .ButtonInner-medium-iconOnly,
|
|
||||||
.view-homeShortcutsGrid-PlayButtonContainer .ButtonInner-large-iconOnly {
|
|
||||||
background-color: var(--background-base);
|
|
||||||
color: var(--spice-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* top bar sponsored ads */
|
|
||||||
.Button-medium-buttonPrimary-useBrowserDefaultFocusStyle .ButtonInner-medium {
|
|
||||||
background-color: var(--background-base);
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* right sidebar text */
|
|
||||||
.Root__right-sidebar {
|
|
||||||
--text-base: var(--spice-sidebar-text);
|
|
||||||
--background-tinted-base: var(--spice-tab-active);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Root__right-sidebar a,
|
|
||||||
.Root__right-sidebar .main-trackInfo-artists a,
|
|
||||||
.artist-artistOnTour-timeAndVenue.artist-artistOnTour-condensed,
|
|
||||||
.Root__right-sidebar .main-nowPlayingView-creditsSource,
|
|
||||||
.Root__right-sidebar .main-nowPlayingView-playNextButton,
|
|
||||||
.Root__right-sidebar .main-nowPlayingView-playNext {
|
|
||||||
color: var(--spice-sidebar-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-nowPlayingView-content {
|
|
||||||
--text-subdued: var(--spice-sidebar-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* v1.2.14 */
|
|
||||||
.main-yourLibraryX-libraryContainer.main-yourLibraryX-libraryIsExpanded.main-yourLibraryX-libraryIsCollapsed,
|
|
||||||
.main-yourLibraryX-libraryRootlist.main-yourLibraryX-libraryIsExpanded:not(.main-yourLibraryX-libraryIsCollapsed) {
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
[dir="ltr"] .main-nowPlayingWidget-coverExpanded {
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ylx .main-coverSlotExpanded-container {
|
|
||||||
bottom: calc(var(--main-gap) + 70px + 10px);
|
|
||||||
left: calc(var(--nav-bar-width) + 10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ylx.connected .main-coverSlotExpanded-container {
|
|
||||||
bottom: calc(var(--main-gap) + 70px + 24px + 10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* v1.2.12 -> 1.2.13 */
|
|
||||||
.main-buddyFeed-container {
|
|
||||||
background-color: inherit;
|
|
||||||
box-shadow: none;
|
|
||||||
overflow: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legacy-gridChange .main-coverSlotExpanded-container {
|
|
||||||
left: calc(var(--nav-bar-width) + 10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* v1.2.0 --> 1.2.11 */
|
|
||||||
.legacy .Root__top-container {
|
|
||||||
grid-template-areas:
|
|
||||||
"left-sidebar top-bar right-sidebar"
|
|
||||||
"left-sidebar main-view right-sidebar"
|
|
||||||
"left-sidebar now-playing-bar right-sidebar" !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Root__top-container {
|
|
||||||
padding: 10px 0;
|
|
||||||
background-color: var(--spice-sidebar);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Root__right-sidebar {
|
|
||||||
background-color: var(--spice-sidebar);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Root__main-view {
|
|
||||||
background-color: var(--spice-main);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-rootlist-rootlistDivider {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-buddyFeed-activityMetadata .main-buddyFeed-username a,
|
|
||||||
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
|
|
||||||
.main-buddyFeed-activityMetadata .main-buddyFeed-usernameAndTimestamp,
|
|
||||||
.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink {
|
|
||||||
color: var(--spice-sidebar-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName {
|
|
||||||
color: var(--spice-sidebar-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-icon,
|
|
||||||
.premiumSpotifyIcon,
|
|
||||||
.search-icon {
|
|
||||||
color: var(--spice-sidebar-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-confirmDialog-container {
|
|
||||||
background-color: var(--spice-card);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-confirmDialog-container .TypeElement-canon-textBase {
|
|
||||||
color: var(--spice-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-confirmDialog-buttonContainer button span {
|
|
||||||
color: var(--spice-card);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-coverSlotExpanded-container {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 2;
|
|
||||||
width: 250px;
|
|
||||||
height: 250px;
|
|
||||||
bottom: calc(var(--main-gap) + var(--bar-height) + 10px);
|
|
||||||
left: calc(var(--nav-bar-width) + 20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.connected .main-coverSlotExpanded-container {
|
|
||||||
bottom: calc(var(--main-gap) + var(--bar-height) + 24px + 10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-sidebar-collapsed .main-coverSlotExpanded-container {
|
|
||||||
left: 82px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-coverSlotExpanded-container img {
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover-art {
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-sidebar-collapsed .Root__nav-bar {
|
|
||||||
width: 72px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-sidebar-collapsed .main-rootlist-statusIcons {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navBar-navBarLinkActive {
|
|
||||||
background-color: var(--spice-tab-active);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Root__nav-bar .main-rootlist-rootlist .os-scrollbar-handle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Root__top-container:has(> .Root__top-container--right-sidebar-hidden) {
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* buddy feed w/ hidden text*/
|
|
||||||
.buddyFeed-hide-text .Root__top-container:not(:has(> .Root__top-container--right-sidebar-hidden)) .Root__right-sidebar {
|
|
||||||
width: 72px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buddyFeed-hide-text .NdQkQZhcYIEcJnRdAYcQ,
|
|
||||||
.buddyFeed-hide-text .main-buddyFeed-header {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buddyFeed-hide-text .main-buddyFeed-friendActivity {
|
|
||||||
padding: 0 0 0 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buddyFeed-hide-text .main-buddyFeed-activityMetadata {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buddyFeed-hide-text .main-avatar-avatar>div>div>div {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
padding-top: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buddyFeed-hide-text .main-avatar-avatar,
|
|
||||||
.buddyFeed-hide-text .main-avatar-avatar div,
|
|
||||||
.buddyFeed-hide-text .main-buddyFeed-overlay {
|
|
||||||
width: 32px !important;
|
|
||||||
height: 32px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-rootlist-rootlistDividerGradient {
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,
|
|
||||||
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-collectionLinkButton-collectionLinkButton,
|
|
||||||
.main-createPlaylistButton-button {
|
|
||||||
color: var(--spice-sidebar-text);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-likedSongsButton-likedSongsIcon {
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-likedSongsButton-likedSongsIcon>svg {
|
|
||||||
height: 20px !important;
|
|
||||||
width: 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* style added sidebar images */
|
|
||||||
.main-rootlist-rootlistItem a {
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 4px;
|
|
||||||
display: flex;
|
|
||||||
height: 56px;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.playlist-picture {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
flex: 0 0 32px;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.playlist-picture[src$=".svg"] {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legacy .Root__nav-bar .main-rootlist-wrapper,
|
|
||||||
.legacy-gridChange .Root__nav-bar .main-rootlist-wrapper {
|
|
||||||
height: fit-content !important;
|
|
||||||
contain: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navBar-mainNav li:has(> div > .active) {
|
|
||||||
background-color: var(--spice-tab-active);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-collectionLinkButton-selected.active {
|
|
||||||
background-color: var(--spice-tab-active) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legacy .main-navBar-mainNav li,
|
|
||||||
.legacy-gridChange .main-navBar-mainNav li {
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* a.active {
|
|
||||||
background-color: var(--spice-tab-active) !important;
|
|
||||||
} */
|
|
||||||
.main-rootlist-rootlistItem:has(> .main-rootlist-rootlistItemLinkActive) {
|
|
||||||
background-color: var(--spice-tab-active) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-rootlist-rootlistItemLink {
|
|
||||||
padding-left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-rootlist-rootlistItem {
|
|
||||||
margin-left: 8px;
|
|
||||||
margin-right: 8px;
|
|
||||||
padding-left: 0 !important;
|
|
||||||
padding-right: 8px !important;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dribs-playlist-list {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-sidebar-collapsed .main-rootlist-expandArrow {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navBar-navBarLink,
|
|
||||||
.main-collectionLinkButton-collectionLinkButton,
|
|
||||||
.main-createPlaylistButton-button {
|
|
||||||
height: 56px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Button-md-buttonSecondary-useBrowserDefaultFocusStyle {
|
|
||||||
border: 1px solid var(--spice-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Button-md-buttonPrimary-useBrowserDefaultFocusStyle .ButtonInner-md {
|
|
||||||
color: var(--spice-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* sidebar speaker icon */
|
|
||||||
.CCeu9OfWSwIAJqA49n84 {
|
|
||||||
color: var(--spice-sidebar-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.legacy .Root__right-sidebar .os-content {
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Root__right-sidebar .os-scrollbar-horizontal {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.UyzJidwrGk3awngSGIwv,
|
|
||||||
.poz9gZKE7xqFwgk231J4,
|
|
||||||
.xWm_uA0Co4SXVxaO7wlB {
|
|
||||||
color: var(--spice-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navBar-navBarLink {
|
|
||||||
color: var(--spice-sidebar-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navBar-navBarLink:focus,
|
|
||||||
.main-navBar-navBarLink:hover {
|
|
||||||
color: var(--spice-sidebar-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-createPlaylistButton-createPlaylistIcon {
|
|
||||||
background-color: var(--spice-sidebar-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-rootlist-rootlistItemLink:link,
|
|
||||||
.main-rootlist-rootlistItemLink:visited {
|
|
||||||
color: var(--spice-sidebar-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-rootlist-expandArrow {
|
|
||||||
color: var(--spice-sidebar-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-buddyFeed-actions button,
|
|
||||||
.main-buddyFeed-titleContainer {
|
|
||||||
color: var(--spice-sidebar-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-tag-container {
|
|
||||||
background-color: var(--spice-subtext);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-buddyFeed-content {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* bottom scroll-bar popup fix */
|
|
||||||
.Root__main-view-overlay {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
|
|
@ -1,21 +0,0 @@
|
||||||
MIT License
|
|
||||||
|
|
||||||
Copyright (c) 2022 @Ruixi-Zhang, @yslDevelop, @ian-Liaozy, @alexcasieri30
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
|
||||||
in the Software without restriction, including without limitation the rights
|
|
||||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
||||||
copies of the Software, and to permit persons to whom the Software is
|
|
||||||
furnished to do so, subject to the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be included in all
|
|
||||||
copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
||||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
||||||
SOFTWARE.
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
# Flow
|
|
||||||
|
|
||||||
## Screenshots
|
|
||||||
|
|
||||||
### Ocean
|
|
||||||
<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/ocean.png" alt="img">
|
|
||||||
|
|
||||||
|
|
||||||
### Pink
|
|
||||||
<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/pink.png" alt="img">
|
|
||||||
|
|
||||||
|
|
||||||
### Silver
|
|
||||||
<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/silver.png" alt="img">
|
|
||||||
|
|
||||||
|
|
||||||
### Violet
|
|
||||||
<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/violet.png" alt="img">
|
|
||||||
|
|
||||||
## Author
|
|
||||||
Made by:
|
|
||||||
* https://github.com/Ruixi-Zhang
|
|
||||||
* https://github.com/yslDevelop
|
|
||||||
* https://github.com/ian-Liaozy
|
|
||||||
* https://github.com/alexcasieri30
|
|
||||||
|
|
@ -1,80 +0,0 @@
|
||||||
[Pink]
|
|
||||||
text = 8f7878
|
|
||||||
gradientTop = ebaf98
|
|
||||||
gradientBottom = f5d4b7
|
|
||||||
main = ffe8d9
|
|
||||||
subtext = 8f7878
|
|
||||||
button-active = 8f7878
|
|
||||||
button = ebaf98
|
|
||||||
sidebar = f5d4b7
|
|
||||||
player = ebaf98
|
|
||||||
card-background = e6cfd7
|
|
||||||
shadow = d9a28d
|
|
||||||
notification = f5d4b7
|
|
||||||
notification-error = f5d4b7
|
|
||||||
card-hover = ffece4
|
|
||||||
|
|
||||||
[Green]
|
|
||||||
text = 516847
|
|
||||||
gradientTop = 9bb78e
|
|
||||||
gradientBottom = b7cfac
|
|
||||||
main = e8f2e4
|
|
||||||
subtext = 797a78
|
|
||||||
button-active = 516847
|
|
||||||
button = 7d9971
|
|
||||||
sidebar = b7cfac
|
|
||||||
player = 9bb78e
|
|
||||||
card-background = e8ede6
|
|
||||||
shadow = 7d9971
|
|
||||||
notification = b7cfac
|
|
||||||
notification-error = b7cfac
|
|
||||||
card-hover = ecf8e8
|
|
||||||
|
|
||||||
[Silver]
|
|
||||||
text = 4c4d4f
|
|
||||||
gradientTop = b7bbbd
|
|
||||||
gradientBottom = d3d8db
|
|
||||||
main = d3d8db
|
|
||||||
subtext = 8d9092
|
|
||||||
button-active = a8acad
|
|
||||||
button = 8d9092
|
|
||||||
sidebar = ffffff
|
|
||||||
player = b7bbbd
|
|
||||||
card-background = e8ede6
|
|
||||||
shadow = b7bbbd
|
|
||||||
notification = ffffff
|
|
||||||
notification-error = ffffff
|
|
||||||
card-hover = e0e4e4
|
|
||||||
|
|
||||||
|
|
||||||
[Violet]
|
|
||||||
text = 78658b
|
|
||||||
gradientTop = b9adc4
|
|
||||||
gradientBottom = d4cade
|
|
||||||
main = e5dfeb
|
|
||||||
subtext = 8e7c9a
|
|
||||||
button-active = a090b0
|
|
||||||
button = 516847
|
|
||||||
sidebar = e8ede6
|
|
||||||
player = b9adc4
|
|
||||||
card-background = e8ede6
|
|
||||||
shadow = 847096
|
|
||||||
notification = b9adc4
|
|
||||||
notification-error = b9adc4
|
|
||||||
card-hover = f0e4ec
|
|
||||||
|
|
||||||
[Ocean]
|
|
||||||
text = 62828a
|
|
||||||
gradientTop = 9cb9ba
|
|
||||||
gradientBottom = c1d5d6
|
|
||||||
main = cadbdb
|
|
||||||
subtext = 7aa1a2
|
|
||||||
button-active = 9cb9ba
|
|
||||||
button = c1d5d6
|
|
||||||
sidebar = c1d5d6
|
|
||||||
player = 9cb9ba
|
|
||||||
card-background = e1ebeb
|
|
||||||
shadow = 6f9599
|
|
||||||
notification = cadbdb
|
|
||||||
notification-error = c1d5d6
|
|
||||||
card-hover = d8e4e4
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 MiB |
|
|
@ -1,260 +0,0 @@
|
||||||
:root {
|
|
||||||
--gradient-colors: var(--spice-gradienttop), var(--spice-gradientbottom);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-rootlist-rootlistItem:hover {
|
|
||||||
background-color: var(--spice-card-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navBar-navBar {
|
|
||||||
background-image: linear-gradient(var(--gradient-colors));
|
|
||||||
}
|
|
||||||
|
|
||||||
/* buttons */
|
|
||||||
.main-navBar-navBarLink {
|
|
||||||
border-radius: var(--border-radius-2);
|
|
||||||
color: var(--spice-text);
|
|
||||||
}
|
|
||||||
.main-addButton-active,
|
|
||||||
.main-addButton-active:focus,
|
|
||||||
.main-addButton-active:hover {
|
|
||||||
color: var(--spice-player);
|
|
||||||
}
|
|
||||||
/* menus */
|
|
||||||
.main-card-card {
|
|
||||||
background-image: linear-gradient(var(--gradient-colors));
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-card-card:hover {
|
|
||||||
background-color: var(--spice-card-hover);
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-contextMenu-menuItemButton,
|
|
||||||
.main-userWidget-dropDownMenuItemButton {
|
|
||||||
/*border-radius: var(--border-radius-2);*/
|
|
||||||
color: var(--spice-text);
|
|
||||||
height: 32px;
|
|
||||||
padding-left: 8px;
|
|
||||||
}
|
|
||||||
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
|
|
||||||
background: transparent;
|
|
||||||
-webkit-box-shadow: 0 -1px 0 0 var(--spice-player);
|
|
||||||
box-shadow: 0 -1px 0 0 var(--spice-player);
|
|
||||||
}
|
|
||||||
.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow {
|
|
||||||
border-bottom: 1px solid transparent;
|
|
||||||
background: var(--spice-main);
|
|
||||||
}
|
|
||||||
.Root__now-playing-bar {
|
|
||||||
grid-area: now-playing-bar;
|
|
||||||
width: 200px;
|
|
||||||
z-index: 4;
|
|
||||||
}
|
|
||||||
#spicetify-home-config button:disabled,
|
|
||||||
#spicetify-sidebar-config button:disabled {
|
|
||||||
/*background-color: var(--spice-button-disabled) !important;*/
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* remove gradients */
|
|
||||||
.main-home-homeHeader,
|
|
||||||
.main-actionBarBackground-background {
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
.main-actionBarBackground-background,
|
|
||||||
.main-home-homeHeader,
|
|
||||||
.main-topBar-background,
|
|
||||||
.main-topBar-overlay,
|
|
||||||
.x-entityHeader-overlay,
|
|
||||||
.x-actionBarBackground-background,
|
|
||||||
._UFTK833WfTNGb4agRTd,
|
|
||||||
.Ic3iDUCnC09k55peZBfC {
|
|
||||||
background-color: var(--spice-main) !important;
|
|
||||||
}
|
|
||||||
.x-actionBarBackground-background,
|
|
||||||
.x-entityHeader-overlay,
|
|
||||||
.Ic3iDUCnC09k55peZBfC,
|
|
||||||
._UFTK833WfTNGb4agRTd {
|
|
||||||
background-image: none !important;
|
|
||||||
}
|
|
||||||
.main-entityHeader-backgroundColor {
|
|
||||||
background: var(--spice-main);
|
|
||||||
}
|
|
||||||
.player-controls__buttons--new-icons {
|
|
||||||
gap: 16px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.Root__top-container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-areas: "left-sidebar main-view right-sidebar now-playing-bar";
|
|
||||||
grid-template-columns: auto 1fr;
|
|
||||||
grid-template-rows: 1fr auto;
|
|
||||||
height: 100%;
|
|
||||||
min-height: 100%;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
background-color: var(--spice-main);
|
|
||||||
}
|
|
||||||
.main-nowPlayingBar-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
min-width: 0px;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player-controls__left,
|
|
||||||
.player-controls__right {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playback-bar {
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playback-bar__progress-time-elapsed {
|
|
||||||
position: absolute;
|
|
||||||
left: 16px;
|
|
||||||
top: 20px;
|
|
||||||
}
|
|
||||||
.playback-bar__progress-time-elapsed::after {
|
|
||||||
content: "/";
|
|
||||||
margin-left: 6px;
|
|
||||||
}
|
|
||||||
.main-playbackBarRemainingTime-container {
|
|
||||||
margin-left: 56px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-nowPlayingBar-center {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-nowPlayingBar-nowPlayingBar {
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 25px 0;
|
|
||||||
height: 100%;
|
|
||||||
background-image: linear-gradient(var(--gradient-colors));
|
|
||||||
}
|
|
||||||
|
|
||||||
.Root__right-sidebar > aside {
|
|
||||||
background-image: linear-gradient(var(--gradient-colors));
|
|
||||||
}
|
|
||||||
|
|
||||||
/*button*/
|
|
||||||
.encore-dark-theme .encore-bright-accent-set {
|
|
||||||
--background-base: var(--spice-button-active);
|
|
||||||
--background-highlight: var(--spice-player);
|
|
||||||
--background-press: var(--spice-player);
|
|
||||||
--decorative-subdued: var(--spice-player);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*tracklist*/
|
|
||||||
.main-trackList-trackListRow {
|
|
||||||
border-radius: var(--border-radius-2);
|
|
||||||
}
|
|
||||||
.main-trackList-trackListRow:hover {
|
|
||||||
background-color: var(--spice-card-background);
|
|
||||||
}
|
|
||||||
.prog-tooltip {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-rootlist-rootlistDividerContainer {
|
|
||||||
position: relative;
|
|
||||||
/*color: var(--spice-gradientTop)*/
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
width: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playback-progressbar {
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.volume-bar {
|
|
||||||
flex: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-nowPlayingWidget-nowPlaying {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-coverSlotCollapsed-container {
|
|
||||||
transform: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-nowPlayingWidget-nowPlaying > button {
|
|
||||||
color: var(--spice-text);
|
|
||||||
}
|
|
||||||
.main-nowPlayingBar-extraControls {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-entryPoints:nth-child(2) {
|
|
||||||
background-image: linear-gradient(var(--gradient-colors));
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-entryPoints:nth-child(1) {
|
|
||||||
background-color: var(--spice-gradienttop);
|
|
||||||
}
|
|
||||||
/* remove hover effect */
|
|
||||||
li > div > div::after {
|
|
||||||
background-color: var(--spice-card-background) !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-card-background);
|
|
||||||
}
|
|
||||||
/* expanded sidebar buttons */
|
|
||||||
.search-searchCategory-carouselButton {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.search-searchCategory-carouselButton:hover {
|
|
||||||
background-color: var(--spicecard-background);
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-iconOnly:hover {
|
|
||||||
background-color: var(--spice-card-background);
|
|
||||||
color: var(--spice-text);
|
|
||||||
}
|
|
||||||
.Root__nav-bar {
|
|
||||||
background-color: var(--spice-main);
|
|
||||||
}
|
|
||||||
/* give active nav tab a background */
|
|
||||||
.main-navBar-mainNav li:has(> .active) {
|
|
||||||
background-color: var(--spice-card-background);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.view-homeShortcutsGrid-shortcut {
|
|
||||||
background-image: linear-gradient(var(--gradient-colors));
|
|
||||||
}
|
|
||||||
.main-actionBar-ActionBarRow > * {
|
|
||||||
color: var(--spice-text);
|
|
||||||
}
|
|
||||||
.main-actionBar-ActionBarRow svg:not(.main-playButton-PlayButton svg) {
|
|
||||||
color: var(--spice-text);
|
|
||||||
}
|
|
||||||
.x-sortBox-sortDropdown {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
# Matte
|
|
||||||
|
|
||||||
## Screenshots
|
|
||||||
|
|
||||||
### Matte
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Periwinkle
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Periwinkle-Dark
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Porcelain
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Gray-Dark1
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Gray-Dark2
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Gray-Dark3
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Gray
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Gray-Light
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## More
|
|
||||||
|
|
||||||
### Description
|
|
||||||
|
|
||||||
a Spicetify theme which features a distinct top bar, quick-to-edit CSS variables, and color schemes from Windows visual styles by KDr3w
|
|
||||||
|
|
||||||
### Credits
|
|
||||||
|
|
||||||
- Based on [Matte by KDr3w](https://www.deviantart.com/kdr3w/art/Matte-758699852) and their [other themes](https://www.deviantart.com/kdr3w/gallery/68078309/windows-10-themes)
|
|
||||||
|
|
||||||
- Created by [darkthemer](https://github.com/darkthemer)
|
|
||||||
|
|
||||||
### Notes
|
|
||||||
|
|
||||||
- Check the very top of `user.css` for quick configs
|
|
||||||
|
|
||||||
- If you use the Marketplace, go to `Marketplace > Snippets > + Add CSS` and then paste the quick configs found in `user.css`. Edit these as you wish.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- For Windows users, here's how to make the window controls' background match with the topbar background
|
|
||||||
|
|
||||||
- Put this snippet into your `user.css` (or through the Marketplace's custom CSS feature)
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* transparent window controls background */
|
|
||||||
.spotify__container--is-desktop:not(.fullscreen) body::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
z-index: 999;
|
|
||||||
backdrop-filter: brightness(2.12);
|
|
||||||
/* page zoom [ctrl][+] or [ctrl][-]
|
|
||||||
edit width and height accordingly
|
|
||||||
*/
|
|
||||||
width: 135px;
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,575 +0,0 @@
|
||||||
; COLORS' KEY DESCRIPTIONS
|
|
||||||
|
|
||||||
; topbar = background
|
|
||||||
; topbar-text = title, enabled history button
|
|
||||||
; topbar-subtext = unselected tabs, disabled history button
|
|
||||||
; tab-active = selected tab item, search bar background
|
|
||||||
; tab-active-text = selected tab item, search bar text
|
|
||||||
; tab-hover = hovered tab item, hovered search bar
|
|
||||||
; topbar-border = bottom border
|
|
||||||
|
|
||||||
; sidebar = background
|
|
||||||
; sidebar-text = primary text (home, search, library, playlists, etc)
|
|
||||||
; link-hover-text = hovered link item text
|
|
||||||
; link-active = selected link item background
|
|
||||||
; link-active-text = selected link item text
|
|
||||||
; sidebar-border = left or right border
|
|
||||||
|
|
||||||
; main = background
|
|
||||||
; text = primary text (heading, title, some name, song count, button text, etc)
|
|
||||||
; subtext = secondary text (description, some name, duration, tracklist album, play count, etc)
|
|
||||||
; selected-row = some details, border, button (heart, download, options in playlist or album)
|
|
||||||
|
|
||||||
; player = background
|
|
||||||
; player-text = song title, hovered text
|
|
||||||
; player-subtext = artist name, time duration
|
|
||||||
; player-selected-row = progress bar (background, duration, volume), button (playback, extra)
|
|
||||||
; player-border = top border
|
|
||||||
|
|
||||||
; button = button (lyrics, queue in player bar, on toggle in settings)
|
|
||||||
; button-active = button (play-pause button, current song title in queue, active heart, hovered button and toggle)
|
|
||||||
; button-disabled = button (off toggle and dropdown menu in settings)
|
|
||||||
; scrollbar = default
|
|
||||||
; scrollbar-hover = hovered
|
|
||||||
; context-menu = background
|
|
||||||
; context-menu-text = primary text
|
|
||||||
; context-menu-hover = hovered item backgrond
|
|
||||||
; card = hovered card, tracks in queue or playlist, etc
|
|
||||||
; shadow = context menu shadow, popup background dim, popup button background (close, carousel), toast shadow
|
|
||||||
; notification = toast background, private session indicator
|
|
||||||
; notification-error = error toast background
|
|
||||||
; misc = idk
|
|
||||||
|
|
||||||
; main-elevated = ylx carousel buttons, etc
|
|
||||||
; highlight-elevated = ylx hovered carousel buttons, etc
|
|
||||||
; highlight = ylx hovered playlist link, etc
|
|
||||||
|
|
||||||
[matte]
|
|
||||||
; topbar
|
|
||||||
topbar = 232b32
|
|
||||||
topbar-text = d0d2d9
|
|
||||||
topbar-subtext = 4a5460
|
|
||||||
tab-active = 1c2228
|
|
||||||
tab-active-text = d0d2d9
|
|
||||||
tab-hover = 131b20
|
|
||||||
topbar-border = 232b32
|
|
||||||
|
|
||||||
; sidebars
|
|
||||||
sidebar = 181e23
|
|
||||||
sidebar-text = 7e8596
|
|
||||||
link-active-text = 181e23
|
|
||||||
sidebar-border = 181e23
|
|
||||||
|
|
||||||
; main view
|
|
||||||
main = 1c2228
|
|
||||||
text = b9bcc6
|
|
||||||
subtext = 7e8596
|
|
||||||
selected-row = 5b6b79
|
|
||||||
|
|
||||||
; player bar
|
|
||||||
player = 141b1f
|
|
||||||
player-text = 969aa9
|
|
||||||
player-subtext = 6d8392
|
|
||||||
player-selected-row = 6d8392
|
|
||||||
player-border = 141b1f
|
|
||||||
|
|
||||||
; accent colors
|
|
||||||
link-hover-text = 009587
|
|
||||||
link-active = 009587
|
|
||||||
button = 01bfa5
|
|
||||||
button-active = 01bfa5
|
|
||||||
scrollbar-hover = 009688
|
|
||||||
|
|
||||||
; others
|
|
||||||
button-disabled = 2c353e
|
|
||||||
scrollbar = 39454f
|
|
||||||
context-menu = 232b32
|
|
||||||
context-menu-text = d0d2d9
|
|
||||||
context-menu-hover = 343e47
|
|
||||||
card = 232d35
|
|
||||||
shadow = 101418
|
|
||||||
notification = 1c2228
|
|
||||||
notification-error = b73434
|
|
||||||
misc = 39454f
|
|
||||||
|
|
||||||
; ylx
|
|
||||||
main-elevated = 1c2228
|
|
||||||
highlight-elevated = 232d35
|
|
||||||
highlight = 20272d
|
|
||||||
|
|
||||||
[periwinkle]
|
|
||||||
; topbar
|
|
||||||
topbar-text = ffffff
|
|
||||||
topbar-subtext = aaa5e4
|
|
||||||
tab-active-text = d0ccff
|
|
||||||
tab-hover = ffffff
|
|
||||||
|
|
||||||
; sidebars
|
|
||||||
sidebar = ffffff
|
|
||||||
sidebar-text = 010101
|
|
||||||
link-active-text = ffffff
|
|
||||||
sidebar-border = ffffff
|
|
||||||
|
|
||||||
; main view
|
|
||||||
main = ffffff
|
|
||||||
text = 010101
|
|
||||||
subtext = 6d6d6d
|
|
||||||
selected-row = 6d6d6d
|
|
||||||
|
|
||||||
; player bar
|
|
||||||
player = ffffff
|
|
||||||
player-text = 010101
|
|
||||||
player-subtext = 6d6d6d
|
|
||||||
player-selected-row = 6d6d6d
|
|
||||||
player-border = d9d9d9
|
|
||||||
|
|
||||||
; accent colors
|
|
||||||
topbar = 7269d2
|
|
||||||
tab-active = 7269d2
|
|
||||||
topbar-border = 7269d2
|
|
||||||
link-hover-text = 8c84da
|
|
||||||
link-active = 7269d2
|
|
||||||
button = 7269d2
|
|
||||||
button-active = 8c84da
|
|
||||||
scrollbar-hover = 8a82e0
|
|
||||||
context-menu-hover = 7269d2
|
|
||||||
|
|
||||||
; others
|
|
||||||
button-disabled = ebebeb
|
|
||||||
scrollbar = d9d9d9
|
|
||||||
context-menu = ffffff
|
|
||||||
context-menu-text = 010101
|
|
||||||
card = ebebeb
|
|
||||||
shadow = 363163
|
|
||||||
notification = ffffff
|
|
||||||
notification-error = ff4264
|
|
||||||
misc = 6d6d6d
|
|
||||||
|
|
||||||
; ylx
|
|
||||||
main-elevated = ffffff
|
|
||||||
highlight-elevated = ebebeb
|
|
||||||
highlight = ebebeb
|
|
||||||
|
|
||||||
[periwinkle-dark]
|
|
||||||
; topbar
|
|
||||||
topbar-text = f6f6f6
|
|
||||||
topbar-subtext = aaa5e4
|
|
||||||
tab-active-text = d0ccff
|
|
||||||
tab-hover = 383838
|
|
||||||
|
|
||||||
; sidebars
|
|
||||||
sidebar = 383838
|
|
||||||
sidebar-text = d0d0d0
|
|
||||||
link-hover-text = 8c84da
|
|
||||||
link-active-text = f6f6f6
|
|
||||||
sidebar-border = 383838
|
|
||||||
|
|
||||||
; main view
|
|
||||||
main = 383838
|
|
||||||
text = f6f6f6
|
|
||||||
subtext = d0d0d0
|
|
||||||
selected-row = d0d0d0
|
|
||||||
|
|
||||||
; player bar
|
|
||||||
player = 343434
|
|
||||||
player-text = f6f6f6
|
|
||||||
player-subtext = d0d0d0
|
|
||||||
player-selected-row = d0d0d0
|
|
||||||
player-border = 2e2e2e
|
|
||||||
|
|
||||||
; accent colors
|
|
||||||
topbar = 7269d2
|
|
||||||
tab-active = 7269d2
|
|
||||||
topbar-border = 7269d2
|
|
||||||
link-active = 7269d2
|
|
||||||
button = 7269d2
|
|
||||||
button-active = 8c84da
|
|
||||||
scrollbar-hover = 8a82e0
|
|
||||||
context-menu-hover = 7269d2
|
|
||||||
|
|
||||||
; others
|
|
||||||
button-disabled = 444444
|
|
||||||
scrollbar = 494949
|
|
||||||
context-menu = 343434
|
|
||||||
context-menu-text = f6f6f6
|
|
||||||
card = 444444
|
|
||||||
shadow = 2e2e2e
|
|
||||||
notification = 343434
|
|
||||||
notification-error = ff4264
|
|
||||||
misc = d0d0d0
|
|
||||||
|
|
||||||
; ylx
|
|
||||||
main-elevated = 383838
|
|
||||||
highlight-elevated = 444444
|
|
||||||
highlight = 444444
|
|
||||||
|
|
||||||
[porcelain]
|
|
||||||
; topbar
|
|
||||||
topbar = e8eaf0
|
|
||||||
topbar-text = 242b31
|
|
||||||
topbar-subtext = 899099
|
|
||||||
tab-active = e8eaf0
|
|
||||||
tab-active-text = 242b31
|
|
||||||
tab-hover = ffffff
|
|
||||||
topbar-border = e8eaf0
|
|
||||||
|
|
||||||
; sidebars
|
|
||||||
sidebar = dfe1e8
|
|
||||||
sidebar-text = 3f4b56
|
|
||||||
link-hover-text = 6a7495
|
|
||||||
link-active-text = dfe1e8
|
|
||||||
sidebar-border = dfe1e8
|
|
||||||
|
|
||||||
; main view
|
|
||||||
main = f9f9fb
|
|
||||||
text = 3f4b56
|
|
||||||
subtext = 70828f
|
|
||||||
selected-row = 70828f
|
|
||||||
|
|
||||||
; player bar
|
|
||||||
player = d5d8df
|
|
||||||
player-text = 364049
|
|
||||||
player-subtext = 4e5a67
|
|
||||||
player-selected-row = 4e5a67
|
|
||||||
player-border = cdd0d8
|
|
||||||
|
|
||||||
; accent colors
|
|
||||||
link-active = 43a8ff
|
|
||||||
button = 43a8ff
|
|
||||||
button-active = 038aff
|
|
||||||
scrollbar-hover = 43a8ff
|
|
||||||
|
|
||||||
; others
|
|
||||||
button-disabled = c0c5ce
|
|
||||||
scrollbar = d6dbdf
|
|
||||||
context-menu = e8eaf0
|
|
||||||
context-menu-text = 2f353c
|
|
||||||
context-menu-hover = ced2db
|
|
||||||
card = e3e6ea
|
|
||||||
shadow = 6d6e71
|
|
||||||
notification = f9f9fb
|
|
||||||
notification-error = e6395f
|
|
||||||
misc = 4e5a67
|
|
||||||
|
|
||||||
; ylx
|
|
||||||
main-elevated = f9f9fb
|
|
||||||
highlight-elevated = e3e6ea
|
|
||||||
highlight = ced1db
|
|
||||||
|
|
||||||
[rose-pine-moon]
|
|
||||||
; topbar
|
|
||||||
topbar = 141428
|
|
||||||
topbar-text = e0def4
|
|
||||||
topbar-subtext = 7a7a7a
|
|
||||||
tab-active = 1f1f1f
|
|
||||||
tab-active-text = d4d4d4
|
|
||||||
tab-hover = 272727
|
|
||||||
topbar-border = 191919
|
|
||||||
|
|
||||||
; sidebars
|
|
||||||
sidebar = 232136
|
|
||||||
sidebar-text = e0def4
|
|
||||||
link-hover-text = 6d6d6d
|
|
||||||
link-active = 423d67
|
|
||||||
link-active-text = e8e8e8
|
|
||||||
sidebar-border = 191919
|
|
||||||
|
|
||||||
; main view
|
|
||||||
main = 232136
|
|
||||||
text = e0def4
|
|
||||||
subtext = 908caa
|
|
||||||
selected-row = ebbcba
|
|
||||||
|
|
||||||
; player bar
|
|
||||||
player = 232136
|
|
||||||
player-text = e0def4
|
|
||||||
player-subtext = e0def4
|
|
||||||
player-selected-row = ebbcba
|
|
||||||
player-border = 191919
|
|
||||||
|
|
||||||
; accent colors
|
|
||||||
button-active = ebbcba
|
|
||||||
|
|
||||||
; others
|
|
||||||
button = ebbcba
|
|
||||||
button-disabled = 2a273f
|
|
||||||
scrollbar = 2a273f
|
|
||||||
scrollbar-hover = dddbf1
|
|
||||||
context-menu = 141428
|
|
||||||
context-menu-text = e0def4
|
|
||||||
context-menu-hover = 3b385c
|
|
||||||
card = 393552
|
|
||||||
shadow = 393552
|
|
||||||
notification = 393552
|
|
||||||
notification-error = eb6f92
|
|
||||||
misc = 232136
|
|
||||||
|
|
||||||
; ylx
|
|
||||||
main-elevated = 202020
|
|
||||||
highlight-elevated = 2d2d2d
|
|
||||||
highlight = 2d2d2d
|
|
||||||
|
|
||||||
[gray-dark1]
|
|
||||||
; topbar
|
|
||||||
topbar = 191919
|
|
||||||
topbar-text = d4d4d4
|
|
||||||
topbar-subtext = 7a7a7a
|
|
||||||
tab-active = 1f1f1f
|
|
||||||
tab-active-text = d4d4d4
|
|
||||||
tab-hover = 272727
|
|
||||||
topbar-border = 191919
|
|
||||||
|
|
||||||
; sidebars
|
|
||||||
sidebar = 202020
|
|
||||||
sidebar-text = d4d4d4
|
|
||||||
link-hover-text = 6d6d6d
|
|
||||||
link-active = 2d2d2d
|
|
||||||
link-active-text = e8e8e8
|
|
||||||
sidebar-border = 191919
|
|
||||||
|
|
||||||
; main view
|
|
||||||
main = 202020
|
|
||||||
text = d4d4d4
|
|
||||||
subtext = 959595
|
|
||||||
selected-row = 6d6d6d
|
|
||||||
|
|
||||||
; player bar
|
|
||||||
player = 202020
|
|
||||||
player-text = d4d4d4
|
|
||||||
player-subtext = 959595
|
|
||||||
player-selected-row = 959595
|
|
||||||
player-border = 191919
|
|
||||||
|
|
||||||
; accent colors
|
|
||||||
button-active = 2080df
|
|
||||||
|
|
||||||
; others
|
|
||||||
button = 404040
|
|
||||||
button-disabled = 252525
|
|
||||||
scrollbar = 353535
|
|
||||||
scrollbar-hover = 999999
|
|
||||||
context-menu = 202020
|
|
||||||
context-menu-text = d4d4d4
|
|
||||||
context-menu-hover = 2d2d2d
|
|
||||||
card = 2d2d2d
|
|
||||||
shadow = 0c0c0c
|
|
||||||
notification = 202020
|
|
||||||
notification-error = d32635
|
|
||||||
misc = 959595
|
|
||||||
|
|
||||||
; ylx
|
|
||||||
main-elevated = 202020
|
|
||||||
highlight-elevated = 2d2d2d
|
|
||||||
highlight = 2d2d2d
|
|
||||||
|
|
||||||
[gray-dark2]
|
|
||||||
; topbar
|
|
||||||
topbar = 191919
|
|
||||||
topbar-text = d4d4d4
|
|
||||||
topbar-subtext = 535353
|
|
||||||
tab-active = 191919
|
|
||||||
tab-active-text = d4d4d4
|
|
||||||
tab-hover = 1f1f1f
|
|
||||||
topbar-border = 191919
|
|
||||||
|
|
||||||
; sidebars
|
|
||||||
sidebar = 161616
|
|
||||||
sidebar-text = d4d4d4
|
|
||||||
link-hover-text = 6c6c6c
|
|
||||||
link-active = 1c1c1c
|
|
||||||
link-active-text = d4d4d4
|
|
||||||
sidebar-border = 161616
|
|
||||||
|
|
||||||
; main view
|
|
||||||
main = 202020
|
|
||||||
text = d4d4d4
|
|
||||||
subtext = 959595
|
|
||||||
selected-row = 6d6d6d
|
|
||||||
|
|
||||||
; player bar
|
|
||||||
player = 1a1a1a
|
|
||||||
player-text = d4d4d4
|
|
||||||
player-subtext = 959595
|
|
||||||
player-selected-row = 959595
|
|
||||||
player-border = 1a1a1a
|
|
||||||
|
|
||||||
; accent colors
|
|
||||||
button-active = 2080df
|
|
||||||
|
|
||||||
; others
|
|
||||||
button = 404040
|
|
||||||
button-disabled = 252525
|
|
||||||
scrollbar = 353535
|
|
||||||
scrollbar-hover = 999999
|
|
||||||
context-menu = 202020
|
|
||||||
context-menu-text = d4d4d4
|
|
||||||
context-menu-hover = 2d2d2d
|
|
||||||
card = 2d2d2d
|
|
||||||
shadow = 0c0c0c
|
|
||||||
notification = 202020
|
|
||||||
notification-error = d32635
|
|
||||||
misc = 959595
|
|
||||||
|
|
||||||
; ylx
|
|
||||||
main-elevated = 202020
|
|
||||||
highlight-elevated = 2d2d2d
|
|
||||||
highlight = 2d2d2d
|
|
||||||
|
|
||||||
[gray-dark3]
|
|
||||||
; topbar
|
|
||||||
topbar = 191919
|
|
||||||
topbar-text = d4d4d4
|
|
||||||
topbar-subtext = 7a7a7a
|
|
||||||
tab-active = 191919
|
|
||||||
tab-active-text = d4d4d4
|
|
||||||
tab-hover = 1f1f1f
|
|
||||||
topbar-border = 191919
|
|
||||||
|
|
||||||
; sidebars
|
|
||||||
sidebar = 131313
|
|
||||||
sidebar-text = d4d4d4
|
|
||||||
link-hover-text = 6c6c6c
|
|
||||||
link-active = 1e1e1e
|
|
||||||
link-active-text = d4d4d4
|
|
||||||
sidebar-border = 131313
|
|
||||||
|
|
||||||
; main view
|
|
||||||
main = 161616
|
|
||||||
text = d4d4d4
|
|
||||||
subtext = 959595
|
|
||||||
selected-row = 6d6d6d
|
|
||||||
|
|
||||||
; player bar
|
|
||||||
player = 101010
|
|
||||||
player-text = d4d4d4
|
|
||||||
player-subtext = 959595
|
|
||||||
player-selected-row = 959595
|
|
||||||
player-border = 101010
|
|
||||||
|
|
||||||
; accent colors
|
|
||||||
button-active = 2080df
|
|
||||||
|
|
||||||
; others
|
|
||||||
button = 404040
|
|
||||||
button-disabled = 252525
|
|
||||||
scrollbar = 353535
|
|
||||||
scrollbar-hover = 999999
|
|
||||||
context-menu = 202020
|
|
||||||
context-menu-text = d4d4d4
|
|
||||||
context-menu-hover = 2d2d2d
|
|
||||||
card = 2d2d2d
|
|
||||||
shadow = 0c0c0c
|
|
||||||
notification = 202020
|
|
||||||
notification-error = d32635
|
|
||||||
misc = 959595
|
|
||||||
|
|
||||||
; ylx
|
|
||||||
main-elevated = 161616
|
|
||||||
highlight-elevated = 2d2d2d
|
|
||||||
highlight = 2d2d2d
|
|
||||||
|
|
||||||
[gray]
|
|
||||||
; topbar
|
|
||||||
topbar = 404040
|
|
||||||
topbar-text = e9e9e9
|
|
||||||
topbar-subtext = 646464
|
|
||||||
tab-active = 333333
|
|
||||||
tab-active-text = e9e9e9
|
|
||||||
tab-hover = 303030
|
|
||||||
topbar-border = 404040
|
|
||||||
|
|
||||||
; sidebars
|
|
||||||
sidebar = 383838
|
|
||||||
sidebar-text = d4d4d4
|
|
||||||
link-hover-text = e9e9e9
|
|
||||||
link-active = 4c4c4c
|
|
||||||
link-active-text = e9e9e9
|
|
||||||
sidebar-border = 2f2f2f
|
|
||||||
|
|
||||||
; main view
|
|
||||||
main = 383838
|
|
||||||
text = e9e9e9
|
|
||||||
subtext = aaaaaa
|
|
||||||
selected-row = 6d6d6d
|
|
||||||
|
|
||||||
; player bar
|
|
||||||
player = 343434
|
|
||||||
player-text = d4d4d4
|
|
||||||
player-subtext = 7f7f7f
|
|
||||||
player-selected-row = 7f7f7f
|
|
||||||
player-border = 2e2e2e
|
|
||||||
|
|
||||||
; accent colors
|
|
||||||
button-active = 2888d7
|
|
||||||
|
|
||||||
; others
|
|
||||||
button = 898989
|
|
||||||
button-disabled = 404040
|
|
||||||
scrollbar = 494949
|
|
||||||
scrollbar-hover = a3a3a3
|
|
||||||
context-menu = 383838
|
|
||||||
context-menu-text = d4d4d4
|
|
||||||
context-menu-hover = 4c4c4c
|
|
||||||
card = 4c4c4c
|
|
||||||
shadow = 1e1e1e
|
|
||||||
notification = 383838
|
|
||||||
notification-error = e35b5b
|
|
||||||
misc = 959595
|
|
||||||
|
|
||||||
; ylx
|
|
||||||
main-elevated = 383838
|
|
||||||
highlight-elevated = 4c4c4c
|
|
||||||
highlight = 444444
|
|
||||||
|
|
||||||
[gray-light]
|
|
||||||
; topbar
|
|
||||||
topbar = 404040
|
|
||||||
topbar-text = e9e9e9
|
|
||||||
topbar-subtext = 646464
|
|
||||||
tab-active = 333333
|
|
||||||
tab-active-text = e9e9e9
|
|
||||||
tab-hover = 303030
|
|
||||||
topbar-border = 404040
|
|
||||||
|
|
||||||
; sidebars
|
|
||||||
sidebar = ffffff
|
|
||||||
sidebar-text = 010101
|
|
||||||
link-hover-text = 010101
|
|
||||||
link-active = e1e1e1
|
|
||||||
link-active-text = 010101
|
|
||||||
sidebar-border = e9e9e9
|
|
||||||
|
|
||||||
; main view
|
|
||||||
main = ffffff
|
|
||||||
text = 010101
|
|
||||||
subtext = 6d6d6d
|
|
||||||
selected-row = 6d6d6d
|
|
||||||
|
|
||||||
; player bar
|
|
||||||
player = ffffff
|
|
||||||
player-text = 010101
|
|
||||||
player-subtext = 6d6d6d
|
|
||||||
player-selected-row = 6d6d6d
|
|
||||||
player-border = e9e9e9
|
|
||||||
|
|
||||||
; accent colors
|
|
||||||
button = 2888d7
|
|
||||||
button-active = 2888d7
|
|
||||||
|
|
||||||
; others
|
|
||||||
button-disabled = dfdfdf
|
|
||||||
scrollbar = d9d9d9
|
|
||||||
scrollbar-hover = 4d4d4d
|
|
||||||
context-menu = ffffff
|
|
||||||
context-menu-text = 010101
|
|
||||||
context-menu-hover = ebebeb
|
|
||||||
card = ebebeb
|
|
||||||
shadow = 1e1e1e
|
|
||||||
notification = ffffff
|
|
||||||
notification-error = e35b5b
|
|
||||||
misc = 6d6d6d
|
|
||||||
|
|
||||||
; ylx
|
|
||||||
main-elevated = ffffff
|
|
||||||
highlight-elevated = ebebeb
|
|
||||||
highlight = ebebeb
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 187 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 397 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 309 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 157 KiB |
|
|
@ -1,606 +0,0 @@
|
||||||
/* ================================
|
|
||||||
USER-EDITABLE VARIABLES
|
|
||||||
================================ */
|
|
||||||
|
|
||||||
:root {
|
|
||||||
/* top bar vars */
|
|
||||||
--top-bar-padding-top: 45px;
|
|
||||||
--top-bar-padding-right: 20px;
|
|
||||||
--top-bar-padding-bottom: 5px;
|
|
||||||
--top-bar-padding-left: 20px;
|
|
||||||
--tab-border-radius: 6px;
|
|
||||||
--top-bar-border-width: 2px;
|
|
||||||
|
|
||||||
/* sidebar vars */
|
|
||||||
--sidebar-button-border-radius: 4px;
|
|
||||||
--sidebar-border-width: 2px;
|
|
||||||
|
|
||||||
/* player vars */
|
|
||||||
--player-height: 90px;
|
|
||||||
--player-padding: 0 20px;
|
|
||||||
--player-border-width: 2px;
|
|
||||||
|
|
||||||
/* scrollbar vars */
|
|
||||||
--scrollbar-border-radius: 4px;
|
|
||||||
--scrollbar-width: 6px;
|
|
||||||
--scrollbar-width-hover: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================================
|
|
||||||
TOPBAR
|
|
||||||
================================ */
|
|
||||||
|
|
||||||
.spotify__container--is-desktop:not(.fullscreen) .main-topBar-container,
|
|
||||||
.spotify__container--is-desktop:not(.fullscreen) .main-topBar-background {
|
|
||||||
-webkit-app-region: drag !important;
|
|
||||||
}
|
|
||||||
.Root__top-container {
|
|
||||||
/* rearrange grid layout */
|
|
||||||
grid-template-areas:
|
|
||||||
". . ."
|
|
||||||
"left-sidebar main-view right-sidebar"
|
|
||||||
"now-playing-bar now-playing-bar now-playing-bar";
|
|
||||||
grid-template-rows:
|
|
||||||
calc(var(--top-bar-padding-top) + 40px + var(--top-bar-padding-bottom))
|
|
||||||
1fr auto;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
.Root__nav-bar {
|
|
||||||
grid-area: left-sidebar !important;
|
|
||||||
}
|
|
||||||
.Root__right-sidebar {
|
|
||||||
grid-area: right-sidebar !important;
|
|
||||||
}
|
|
||||||
.Root__now-playing-bar {
|
|
||||||
grid-area: now-playing-bar !important;
|
|
||||||
}
|
|
||||||
.body-drag-top {
|
|
||||||
/* make whole top bar draggable */
|
|
||||||
height: calc(
|
|
||||||
var(--top-bar-padding-top) + 40px + var(--top-bar-padding-bottom)
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-topBar-container,
|
|
||||||
.main-topBar-container:empty {
|
|
||||||
/* customize top bar */
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
padding-top: var(--top-bar-padding-top);
|
|
||||||
padding-right: var(--top-bar-padding-right);
|
|
||||||
padding-bottom: var(--top-bar-padding-bottom);
|
|
||||||
padding-left: var(--top-bar-padding-left);
|
|
||||||
height: calc(
|
|
||||||
var(--top-bar-padding-top) + 40px + var(--top-bar-padding-bottom)
|
|
||||||
);
|
|
||||||
width: 100%;
|
|
||||||
border-bottom: var(--top-bar-border-width) solid var(--spice-topbar-border);
|
|
||||||
}
|
|
||||||
.main-topBar-container .contentSpacing {
|
|
||||||
max-width: unset;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.main-topBar-background {
|
|
||||||
/* remove background upon scrolling */
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
.queue-tabBar-active {
|
|
||||||
/* customize active tab */
|
|
||||||
border-radius: var(--tab-border-radius);
|
|
||||||
}
|
|
||||||
[dir="ltr"] .collection-collection-tabBar,
|
|
||||||
.queue-tabBar-nav {
|
|
||||||
/* remove tab bar left padding */
|
|
||||||
padding-left: 0;
|
|
||||||
padding-inline-start: 0;
|
|
||||||
}
|
|
||||||
.main-topBar-topbarContent {
|
|
||||||
/* add bigger gap between play button and name */
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
.x-searchInput-searchInputInput {
|
|
||||||
height: 41px;
|
|
||||||
}
|
|
||||||
.x-searchInput-searchInputInput:hover,
|
|
||||||
.x-searchInput-searchInputInput:focus,
|
|
||||||
.x-entityImage-imageContainer {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
.x-searchInput-searchInputInput,
|
|
||||||
.x-filterBox-filterInput {
|
|
||||||
border-radius: var(--tab-border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================================
|
|
||||||
NAVBAR / LEFT SIDEBAR
|
|
||||||
================================ */
|
|
||||||
|
|
||||||
.Root__nav-bar {
|
|
||||||
/* add border */
|
|
||||||
border-right: var(--sidebar-border-width) solid var(--spice-sidebar-border);
|
|
||||||
}
|
|
||||||
.LayoutResizer__resize-bar--resizing,
|
|
||||||
.LayoutResizer__resize-bar:focus-within,
|
|
||||||
.LayoutResizer__resize-bar:hover {
|
|
||||||
/* remove border on hovering layout resizer */
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.LayoutResizer__resize-bar {
|
|
||||||
/* replace cursor on layout resize */
|
|
||||||
cursor: w-resize;
|
|
||||||
width: 2px;
|
|
||||||
}
|
|
||||||
.LayoutResizer__inline-end {
|
|
||||||
inset-inline-end: 0;
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-entryPoints,
|
|
||||||
.Root__main-view {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-navItems {
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-navItem,
|
|
||||||
.main-yourLibraryX-headerContent {
|
|
||||||
padding: 4px 0;
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-header {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-navItem {
|
|
||||||
padding: 4px 0;
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-navLink {
|
|
||||||
padding: 12px;
|
|
||||||
text-decoration: none !important;
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-navLink,
|
|
||||||
.main-yourLibraryX-header .main-yourLibraryX-collapseButtonWrapper {
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
.Wrapper-md-leading {
|
|
||||||
margin-inline-end: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================================
|
|
||||||
MAIN VIEW
|
|
||||||
================================ */
|
|
||||||
|
|
||||||
.main-view-container__scroll-node-child-spacer {
|
|
||||||
/* remove main view padding */
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.marketplace-header,
|
|
||||||
.main-home-filterChipsContainer,
|
|
||||||
.main-trackList-trackListHeader,
|
|
||||||
.search-searchCategory-SearchCategory,
|
|
||||||
.artist-artistDiscography-topBar {
|
|
||||||
/* fix home filter, track list header, search category, artist discography */
|
|
||||||
top: -1px !important;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.LVMjmN2CaPruPAo62RAY {
|
|
||||||
height: unset !important;
|
|
||||||
}
|
|
||||||
.marketplace-header,
|
|
||||||
.main-home-filterChipsContainer,
|
|
||||||
.search-searchCategory-SearchCategory {
|
|
||||||
/* home filter, fix search category */
|
|
||||||
border-bottom: 1px solid rgba(var(--spice-rgb-selected-row), 0.1);
|
|
||||||
padding: 16px 0;
|
|
||||||
}
|
|
||||||
.search-searchCategory-catergoryGrid button {
|
|
||||||
margin-bottom: 0 !important;
|
|
||||||
}
|
|
||||||
.search-searchCategory-catergoryGrid button[aria-checked="true"] span {
|
|
||||||
/* customize active search category */
|
|
||||||
border-radius: var(--tab-border-radius);
|
|
||||||
}
|
|
||||||
.main-trackList-trackListHeader,
|
|
||||||
.artist-artistDiscography-topBar {
|
|
||||||
/* fix track list header & artist discography */
|
|
||||||
padding: 16px 32px 0 32px;
|
|
||||||
}
|
|
||||||
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader,
|
|
||||||
.artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled {
|
|
||||||
/* fix tracklist header & artist discography */
|
|
||||||
box-shadow: none;
|
|
||||||
border-bottom: 1px solid rgba(var(--spice-rgb-selected-row), 0.1);
|
|
||||||
}
|
|
||||||
.search-recentSearches-searchPageGrid
|
|
||||||
.main-trackList-trackListHeader.main-trackList-trackListHeaderStuck {
|
|
||||||
/* fix tracklist header in search */
|
|
||||||
top: 64px !important;
|
|
||||||
}
|
|
||||||
.main-home-homeHeader,
|
|
||||||
.x-entityHeader-overlay,
|
|
||||||
.x-actionBarBackground-background,
|
|
||||||
.main-actionBarBackground-background,
|
|
||||||
.main-entityHeader-overlay,
|
|
||||||
.main-entityHeader-backgroundColor {
|
|
||||||
/* remove background gradient */
|
|
||||||
background-color: unset !important;
|
|
||||||
background-image: unset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* full window artist background */
|
|
||||||
.main-entityHeader-background.main-entityHeader-gradient {
|
|
||||||
opacity: 0.3 !important;
|
|
||||||
}
|
|
||||||
.main-entityHeader-container.main-entityHeader-withBackgroundImage,
|
|
||||||
.main-entityHeader-background,
|
|
||||||
.main-entityHeader-background.main-entityHeader-overlay:after {
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
.main-entityHeader-withBackgroundImage .main-entityHeader-headerText {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.main-entityHeader-container.main-entityHeader-nonWrapped.main-entityHeader-withBackgroundImage {
|
|
||||||
padding-left: 9%;
|
|
||||||
}
|
|
||||||
.main-entityHeader-background.main-entityHeader-overlay:after {
|
|
||||||
background-image: linear-gradient(transparent, transparent),
|
|
||||||
linear-gradient(var(--spice-main), var(--spice-main));
|
|
||||||
}
|
|
||||||
.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
|
|
||||||
font-size: 20vh !important;
|
|
||||||
line-height: 20vh !important;
|
|
||||||
}
|
|
||||||
/* cards */
|
|
||||||
.main-cardImage-imageWrapper {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.main-card-card {
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
.main-cardImage-image {
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
.main-cardImage-imageWrapper,
|
|
||||||
.main-entityHeader-shadow {
|
|
||||||
/* remove drop shadows from images */
|
|
||||||
-webkit-box-shadow: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
/* popup modal */
|
|
||||||
.main-trackCreditsModal-container {
|
|
||||||
background-color: var(--spice-main);
|
|
||||||
}
|
|
||||||
.main-trackCreditsModal-closeBtn svg path {
|
|
||||||
fill: var(--spice-subtext);
|
|
||||||
}
|
|
||||||
/* lyrics */
|
|
||||||
.lyrics-lyrics-background {
|
|
||||||
background-color: var(--spice-main);
|
|
||||||
}
|
|
||||||
.lyrics-lyrics-container.lyrics-lyrics-coverTopBar {
|
|
||||||
--lyrics-color-active: var(--spice-text) !important;
|
|
||||||
--lyrics-color-inactive: var(--spice-subtext) !important;
|
|
||||||
--lyrics-color-passed: var(--spice-subtext) !important;
|
|
||||||
--lyrics-color-messaging: var(--spice-subtext) !important;
|
|
||||||
}
|
|
||||||
.lyrics-lyricsContent-lyric {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
.lyrics-lyricsContent-lyric.lyrics-lyricsContent-highlight {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
.lyrics-lyricsContent-lyric.lyrics-lyricsContent-isInteractive.lyrics-lyricsContent-active {
|
|
||||||
text-shadow: 0 0 10px var(--lyrics-color-background),
|
|
||||||
-2px 1px 0 var(--spice-main), -3px 2px 0 var(--lyrics-color-background),
|
|
||||||
2px -1px 0 var(--spice-main), 3px -2px 0 var(--lyrics-color-background);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================================
|
|
||||||
FRIEND ACTIVITY BAR / RIGHT SIDEBAR
|
|
||||||
================================ */
|
|
||||||
|
|
||||||
.Root__nav-right-sidebar {
|
|
||||||
border-left: var(--sidebar-border-width) solid var(--spice-sidebar-border);
|
|
||||||
}
|
|
||||||
.spotify__os--is-windows .main-buddyFeed-content {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================================
|
|
||||||
NOW PLAYING BAR
|
|
||||||
================================ */
|
|
||||||
|
|
||||||
.Root__now-playing-bar {
|
|
||||||
border-top: var(--player-border-width) solid var(--spice-player-border);
|
|
||||||
}
|
|
||||||
.main-nowPlayingBar-nowPlayingBar {
|
|
||||||
/* customize now playing bar */
|
|
||||||
height: var(--player-height);
|
|
||||||
padding: var(--player-padding);
|
|
||||||
}
|
|
||||||
.main-nowPlayingBar-container {
|
|
||||||
/* customize now playing bar*/
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
[dir="ltr"] .main-nowPlayingWidget-coverExpanded {
|
|
||||||
transform: translateX(-76px);
|
|
||||||
}
|
|
||||||
.x-progressBar-fillColor {
|
|
||||||
/* fluid progress bars */
|
|
||||||
transition: transform, 0s, ease, 0.25s;
|
|
||||||
}
|
|
||||||
.progress-bar__slider {
|
|
||||||
/* fluid progress bars */
|
|
||||||
transition: left, 0s, ease, 0.25s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================================
|
|
||||||
MISC & FIXES
|
|
||||||
================================ */
|
|
||||||
|
|
||||||
/* font style
|
|
||||||
-------------------------------- */
|
|
||||||
* {
|
|
||||||
/* heading font weight */
|
|
||||||
font-weight: normal !important;
|
|
||||||
--font-family: CircularSp, CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl,
|
|
||||||
CircularSp-Grek, CircularSp-Deva, var(--fallback-fonts, sans-serif),
|
|
||||||
sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* root
|
|
||||||
-------------------------------- */
|
|
||||||
.Root {
|
|
||||||
--panel-gap: 0 !important;
|
|
||||||
}
|
|
||||||
.spotify__container--is-desktop .Root__top-container {
|
|
||||||
padding-top: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* scrollbar
|
|
||||||
-------------------------------- */
|
|
||||||
.os-scrollbar-handle {
|
|
||||||
/* customize scrollbar */
|
|
||||||
border-radius: var(--scrollbar-border-radius) !important;
|
|
||||||
width: var(--scrollbar-width) !important;
|
|
||||||
}
|
|
||||||
.os-scrollbar-handle:hover {
|
|
||||||
/* customize hovered scrollbar */
|
|
||||||
border-radius: var(--scrollbar-border-radius) !important;
|
|
||||||
width: var(--scrollbar-width-hover) !important;
|
|
||||||
}
|
|
||||||
.os-scrollbar-vertical {
|
|
||||||
/* fix scrollbar positioning */
|
|
||||||
top: 5px !important;
|
|
||||||
right: 5px !important;
|
|
||||||
}
|
|
||||||
.os-scrollbar-handle {
|
|
||||||
/* increase size from right to left */
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* tooltip
|
|
||||||
-------------------------------- */
|
|
||||||
.main-contextMenu-tippy {
|
|
||||||
/* position below the element */
|
|
||||||
transform: translate(0, 65px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* placeholder
|
|
||||||
-------------------------------- */
|
|
||||||
.T7WHRub8pynnWPXERh8e,
|
|
||||||
.rOgsguaurlHVlgCTY0P7,
|
|
||||||
.eC25_w41L83mXDCqdm_A {
|
|
||||||
/* playlists loading placeholder */
|
|
||||||
opacity: 0.05;
|
|
||||||
filter: contrast(0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* color reassignment
|
|
||||||
-------------------------------- */
|
|
||||||
.encore-dark-theme,
|
|
||||||
.encore-dark-theme .encore-base-set {
|
|
||||||
/* song duration & queue button & folder arrow & settings desc text */
|
|
||||||
--text-subdued: var(--spice-subtext) !important;
|
|
||||||
--essential-subdued: var(--spice-button) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ====topbar==== */
|
|
||||||
.main-topBar-container,
|
|
||||||
.main-topBar-container:empty {
|
|
||||||
background-color: var(--spice-topbar);
|
|
||||||
}
|
|
||||||
.main-topBar-historyButtons .main-topBar-button {
|
|
||||||
background-color: transparent;
|
|
||||||
color: var(--spice-topbar-text);
|
|
||||||
}
|
|
||||||
.main-topBar-historyButtons .main-topBar-button:disabled {
|
|
||||||
color: var(--spice-topbar-subtext);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.main-entityHeader-topbarTitle {
|
|
||||||
color: var(--spice-topbar-text) !important;
|
|
||||||
}
|
|
||||||
.queue-tabBar-active {
|
|
||||||
background-color: var(--spice-tab-active) !important;
|
|
||||||
color: var(--spice-tab-active-text) !important;
|
|
||||||
}
|
|
||||||
.queue-tabBar-headerItemLink {
|
|
||||||
color: var(--spice-topbar-subtext);
|
|
||||||
}
|
|
||||||
.queue-tabBar-headerItemLink:hover {
|
|
||||||
background-color: rgba(var(--spice-rgb-tab-hover), 0.3);
|
|
||||||
}
|
|
||||||
.x-searchInput-searchInputSearchIcon,
|
|
||||||
.x-searchInput-searchInputClearButton,
|
|
||||||
.x-searchInput-searchInputInput {
|
|
||||||
color: var(--spice-tab-active-text) !important;
|
|
||||||
}
|
|
||||||
.x-searchInput-searchInputInput {
|
|
||||||
background-color: var(--spice-tab-active);
|
|
||||||
color: var(--spice-tab-active-text) !important;
|
|
||||||
}
|
|
||||||
.x-searchInput-searchInputInput:hover {
|
|
||||||
background-color: var(--spice-tab-hover);
|
|
||||||
}
|
|
||||||
.x-filterBox-filterInput {
|
|
||||||
background-color: rgba(var(--spice-rgb-subtext), 0.1);
|
|
||||||
}
|
|
||||||
::placeholder {
|
|
||||||
color: var(--spice-topbar-subtext);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ====left sidebar==== */
|
|
||||||
.main-yourLibraryX-entryPoints {
|
|
||||||
background-color: var(--spice-sidebar);
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-navLinkActive,
|
|
||||||
.main-yourLibraryX-navLinkActive .home-active-icon,
|
|
||||||
.main-yourLibraryX-navLinkActive .search-active-icon {
|
|
||||||
color: var(--spice-link-active-text) !important;
|
|
||||||
background-color: var(--spice-link-active);
|
|
||||||
border-radius: var(--tab-border-radius);
|
|
||||||
}
|
|
||||||
.link-subtle {
|
|
||||||
transition-property: none;
|
|
||||||
color: var(--spice-sidebar-text);
|
|
||||||
}
|
|
||||||
.link-subtle:focus,
|
|
||||||
.link-subtle:hover {
|
|
||||||
color: var(--spice-link-hover-text);
|
|
||||||
}
|
|
||||||
.Button-md-24-buttonTertiary-iconLeading-condensed-useBrowserDefaultFocusStyle,
|
|
||||||
.Button-md-24-buttonTertiary-iconLeading-condensed-isUsingKeyboard-useBrowserDefaultFocusStyle {
|
|
||||||
color: var(--spice-sidebar-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ====main view==== */
|
|
||||||
.main-trackList-trackListRow.main-trackList-selected,
|
|
||||||
.main-trackList-trackListRow.main-trackList-selected:hover,
|
|
||||||
.main-trackList-trackListRow:focus-within,
|
|
||||||
.main-trackList-trackListRow:hover {
|
|
||||||
background-color: var(--spice-card);
|
|
||||||
}
|
|
||||||
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader,
|
|
||||||
.artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled {
|
|
||||||
background: var(--spice-main) !important;
|
|
||||||
}
|
|
||||||
.main-trackList-placeholder {
|
|
||||||
/* recolor loading tracklist */
|
|
||||||
opacity: 0.05;
|
|
||||||
filter: contrast(0.1);
|
|
||||||
}
|
|
||||||
.view-homeShortcutsGrid-equaliser,
|
|
||||||
.main-trackList-playingIcon,
|
|
||||||
.main-devicePicker-nowPlayingActiveIcon {
|
|
||||||
/* change playing icon color to theme color */
|
|
||||||
filter: grayscale(1) opacity(0.2)
|
|
||||||
drop-shadow(0 0 0 var(--spice-button-active))
|
|
||||||
drop-shadow(0 0 0 var(--spice-button-active))
|
|
||||||
drop-shadow(0 0 0 var(--spice-button-active));
|
|
||||||
}
|
|
||||||
.main-home-filterChipsSection,
|
|
||||||
.main-home-filterChipsSection:after {
|
|
||||||
background-color: var(--spice-main) !important;
|
|
||||||
}
|
|
||||||
.search-searchCategory-catergoryGrid button[aria-checked="true"] span {
|
|
||||||
color: var(--spice-main);
|
|
||||||
background-color: var(--spice-button-active) !important;
|
|
||||||
}
|
|
||||||
.search-searchCategory-catergoryGrid span {
|
|
||||||
border-radius: var(--tab-border-radius);
|
|
||||||
color: var(--spice-subtext);
|
|
||||||
}
|
|
||||||
.artist-artistAbout-container.artist-artistAbout-backgroundImage
|
|
||||||
.artist-artistAbout-content
|
|
||||||
> div {
|
|
||||||
/* change about artist text color */
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.main-dropDown-dropDown,
|
|
||||||
.x-settings-input {
|
|
||||||
background-color: var(--spice-button-disabled);
|
|
||||||
color: var(--spice-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ====right sidebar==== */
|
|
||||||
.TypeElement-balladBold-textBase-type,
|
|
||||||
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName {
|
|
||||||
color: var(--spice-sidebar-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ====now playing bar==== */
|
|
||||||
.main-nowPlayingBar-container {
|
|
||||||
background-color: var(--spice-player);
|
|
||||||
}
|
|
||||||
.main-trackInfo-name,
|
|
||||||
.main-trackInfo-artists a:active,
|
|
||||||
.main-trackInfo-artists a:focus,
|
|
||||||
.main-trackInfo-artists a:hover {
|
|
||||||
color: var(--spice-player-text) !important;
|
|
||||||
}
|
|
||||||
.main-trackInfo-artists a:link,
|
|
||||||
.main-trackInfo-artists a:visited {
|
|
||||||
color: var(--spice-player-subtext);
|
|
||||||
}
|
|
||||||
.main-playPauseButton-button {
|
|
||||||
color: var(--spice-player);
|
|
||||||
background-color: var(--spice-button-active);
|
|
||||||
}
|
|
||||||
.control-button-heart[aria-checked="false"],
|
|
||||||
.player-controls__left button,
|
|
||||||
.player-controls__right button,
|
|
||||||
.main-nowPlayingBar-extraControls button {
|
|
||||||
color: rgba(var(--spice-rgb-player-selected-row), 0.7);
|
|
||||||
}
|
|
||||||
.Button-textBrightAccent-small-small-buttonTertiary-iconOnly-useBrowserDefaultFocusStyle,
|
|
||||||
.Button-textBrightAccent-small-small-buttonTertiary-iconOnly-isUsingKeyboard-useBrowserDefaultFocusStyle {
|
|
||||||
color: var(--spice-button) !important;
|
|
||||||
}
|
|
||||||
.progress-bar {
|
|
||||||
--bg-color: rgba(var(--spice-rgb-player-selected-row), 0.3);
|
|
||||||
--fg-color: var(--spice-player-selected-row);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ====misc==== */
|
|
||||||
|
|
||||||
/* ----scrollbar---- */
|
|
||||||
.os-scrollbar-handle {
|
|
||||||
background-color: var(--spice-scrollbar) !important;
|
|
||||||
}
|
|
||||||
.os-scrollbar-handle:hover,
|
|
||||||
.os-scrollbar-handle:active {
|
|
||||||
background-color: var(--spice-scrollbar-hover) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ----context menu---- */
|
|
||||||
.main-contextMenu-menu {
|
|
||||||
background-color: var(--spice-context-menu);
|
|
||||||
}
|
|
||||||
.main-contextMenu-menuHeading,
|
|
||||||
.main-contextMenu-menuItemButton,
|
|
||||||
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
|
|
||||||
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
|
|
||||||
color: var(--spice-context-menu-text);
|
|
||||||
}
|
|
||||||
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
|
|
||||||
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
|
|
||||||
background-color: var(--spice-context-menu-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ----button---- */
|
|
||||||
#_R_G *:not([fill="none"]) {
|
|
||||||
/* fix heart color on click */
|
|
||||||
fill: var(--spice-button-active) !important;
|
|
||||||
}
|
|
||||||
#_R_G *:not([stroke="none"]) {
|
|
||||||
stroke: var(--spice-button-active);
|
|
||||||
}
|
|
||||||
.ButtonInner-md-iconOnly {
|
|
||||||
/* base play/pause icon color on player instead of sidebar */
|
|
||||||
color: var(--spice-player);
|
|
||||||
}
|
|
||||||
.Button-sm-16-buttonTertiary-iconOnly-condensedAll-useBrowserDefaultFocusStyle {
|
|
||||||
/* base play/pause icon color on sidebar text instead of subtext */
|
|
||||||
color: var(--spice-sidebar-text);
|
|
||||||
}
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
# Nightlight
|
|
||||||
|
|
||||||
## Screenshots
|
|
||||||
|
|
||||||
<img src="https://raw.githubusercontent.com/iTenerai/spicetify-themes/master/Nightlight/screenshots/nightlight.png" alt="img">
|
|
||||||
|
|
||||||
## Author
|
|
||||||
Made by:
|
|
||||||
* https://github.com/iTenerai
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
[Nightlight Colors]
|
|
||||||
text = FFFFFF
|
|
||||||
subtext = F1F1F1
|
|
||||||
main = 1c1622
|
|
||||||
sidebar = 241c2c
|
|
||||||
player = 241c2c
|
|
||||||
card = 241c2c
|
|
||||||
shadow = 241c2c
|
|
||||||
selected-row = F1F1F1
|
|
||||||
button = ae1adb
|
|
||||||
button-active = ae1adb
|
|
||||||
button-disabled = 241c2c
|
|
||||||
tab-active = 241c2c
|
|
||||||
notification = ae1adb
|
|
||||||
notification-error = FF4151
|
|
||||||
misc = ae1adb
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 743 KiB |
|
|
@ -1,49 +0,0 @@
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
|
||||||
|
|
||||||
* {
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-weight: 700 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-nowPlayingWidget-nowPlaying .main-trackInfo-name {
|
|
||||||
color: white;
|
|
||||||
overflow: unset;
|
|
||||||
font-size: 20px !important;
|
|
||||||
background: -webkit-linear-gradient(right, #d7007d, #7a00ef);
|
|
||||||
font-weight: bold;
|
|
||||||
border-radius: 15px;
|
|
||||||
padding-left: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-nowPlayingWidget-nowPlaying .main-trackInfo-artists {
|
|
||||||
padding-left: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-home-homeHeader,
|
|
||||||
.main-entityHeader-backgroundColor,
|
|
||||||
.main-actionBarBackground-background {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-topBar-overlay,
|
|
||||||
.main-view-container,
|
|
||||||
.Root__nav-bar {
|
|
||||||
background-color: var(--spice-main);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-topBar-background {
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover-art-image {
|
|
||||||
border: dotted;
|
|
||||||
border-radius: 50%;
|
|
||||||
border-color: #ae1adb;
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
.DS_STORE
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
MIT License
|
|
||||||
|
|
||||||
Copyright (c) 2021 okarin001
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
|
||||||
in the Software without restriction, including without limitation the rights
|
|
||||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
||||||
copies of the Software, and to permit persons to whom the Software is
|
|
||||||
furnished to do so, subject to the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be included in all
|
|
||||||
copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
||||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
||||||
SOFTWARE.
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
# Onepunch
|
|
||||||
|
|
||||||
## Screenshots
|
|
||||||
|
|
||||||
#### Dark
|
|
||||||
|
|
||||||
|  |  |  |
|
|
||||||
| :-------------------------------------------: | :---------------------------------------------: | :-----------------------------------------------: |
|
|
||||||
| home | album | playlist |
|
|
||||||
|  |  |  |
|
|
||||||
| podcast | profile | search (YLX UI) |
|
|
||||||
|
|
||||||
#### Light
|
|
||||||
|
|
||||||
|  |  |  |
|
|
||||||
| :---------------------------------------------: | :-----------------------------------------------: | :-------------------------------------------------: |
|
|
||||||
| home | album | playlist |
|
|
||||||
|  |  |  |
|
|
||||||
| podcast | profile | settings (YLX UI) |
|
|
||||||
|
|
||||||
#### Legacy
|
|
||||||
|
|
||||||
|  |
|
|
||||||
| :---------------------------------------------: |
|
|
||||||
| home (YLX UI) |
|
|
||||||
|
|
||||||
### Custom Icons
|
|
||||||
|
|
||||||
|
|
||||||
## More
|
|
||||||
|
|
||||||
### About
|
|
||||||
|
|
||||||
A simple gruvified spotify theme.
|
|
||||||
|
|
||||||
### Information
|
|
||||||
|
|
||||||
* To apply this theme:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
# for dark theme
|
|
||||||
spicetify config current_theme Onepunch color_scheme dark
|
|
||||||
spicetify apply
|
|
||||||
|
|
||||||
#for light theme
|
|
||||||
spicetify config current_theme Onepunch color_scheme light
|
|
||||||
spicetify apply
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
* Tested on macOS only and pretty much everything worked. ﾍ(･\_|
|
|
||||||
|
|
||||||
### Contact
|
|
||||||
|
|
||||||
Go **[here](https://github.com/okarin001/Onepunch/issues)** and *check/create* an issue in case you face any problem.
|
|
||||||
|
|
@ -1,74 +0,0 @@
|
||||||
[dark]
|
|
||||||
; onepunch dark mode
|
|
||||||
|
|
||||||
text = d5c4a1
|
|
||||||
subtext = b8bb26
|
|
||||||
extratext = fabd2f
|
|
||||||
main = 1d2021
|
|
||||||
main-elevated = 1d2021
|
|
||||||
highlight-elevated = 32302f
|
|
||||||
highlight = 32302f
|
|
||||||
sidebar = 1d2021
|
|
||||||
player = 1d2021
|
|
||||||
sec-player = 32302f
|
|
||||||
card = 32302f
|
|
||||||
sec-card = fb4934
|
|
||||||
shadow = 1d2021
|
|
||||||
selected-row = d3869b
|
|
||||||
button = 8ec07c
|
|
||||||
button-active = 8ec07c
|
|
||||||
button-disabled = 665c54
|
|
||||||
tab-active = fb4934
|
|
||||||
notification = fb4934
|
|
||||||
notification-error = cc2418
|
|
||||||
misc = 83a598
|
|
||||||
|
|
||||||
[light]
|
|
||||||
; onepunch light mode
|
|
||||||
|
|
||||||
text = 504945
|
|
||||||
subtext = 79740e
|
|
||||||
extratext = b57614
|
|
||||||
main = f9f5d7
|
|
||||||
main-elevated = f9f5d7
|
|
||||||
highlight-elevated = f2e5bc
|
|
||||||
highlight = f2e5bc
|
|
||||||
sidebar = f9f5d7
|
|
||||||
player = f9f5d7
|
|
||||||
sec-player = f2e5bc
|
|
||||||
card = f2e5bc
|
|
||||||
sec-card = 9d0006
|
|
||||||
shadow = f9f5d7
|
|
||||||
selected-row = b16286
|
|
||||||
button = 427b58
|
|
||||||
button-active = 427b58
|
|
||||||
button-disabled = bdae93
|
|
||||||
tab-active = 9d0006
|
|
||||||
notification = 9d0006
|
|
||||||
notification-error = cc2418
|
|
||||||
misc = 076678
|
|
||||||
|
|
||||||
[legacy]
|
|
||||||
; onepunch legacy colors
|
|
||||||
|
|
||||||
text = b8bb26
|
|
||||||
subtext = d5c4a1
|
|
||||||
extratext = fabd2f
|
|
||||||
main = 16191a
|
|
||||||
main-elevated = 16191a
|
|
||||||
highlight-elevated = 32302f
|
|
||||||
highlight = 32302f
|
|
||||||
sidebar = 16191a
|
|
||||||
player = 16191a
|
|
||||||
sec-player = 16191a
|
|
||||||
card = 32302f
|
|
||||||
sec-card = fb4934
|
|
||||||
shadow = 16191a
|
|
||||||
selected-row = d5c4a1
|
|
||||||
button = 8ec07c
|
|
||||||
button-active = 8ec07c
|
|
||||||
button-disabled = 665c54
|
|
||||||
tab-active = fb4934
|
|
||||||
notification = 32302f
|
|
||||||
notification-error = cc2418
|
|
||||||
misc = 83a598
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 276 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 465 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 337 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 455 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 427 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 307 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 274 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 282 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 474 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 345 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 507 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 440 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB |
|
|
@ -1,625 +0,0 @@
|
||||||
/* sidebar edits */
|
|
||||||
.main-navBar-navBarLinkActive,
|
|
||||||
.main-navBar-navBarLinkActive:focus,
|
|
||||||
.logo {
|
|
||||||
background-color: var(--spice-sec-card) !important;
|
|
||||||
color: var(--spice-main) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-likedSongsButton-likedSongsIcon,
|
|
||||||
.main-createPlaylistButton-createPlaylistIcon,
|
|
||||||
.main-yourEpisodesButton-yourEpisodesIcon {
|
|
||||||
background: var(--spice-text) !important;
|
|
||||||
border-radius: unset !important;
|
|
||||||
color: var(--spice-main) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-collectionLinkButton-collectionLinkButton {
|
|
||||||
color: var(--spice-main) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-collectionLinkButton-collectionLinkButton
|
|
||||||
.main-collectionLinkButton-collectionLinkText,
|
|
||||||
.main-createPlaylistButton-button,
|
|
||||||
.main-rootlist-rootlistItemLink,
|
|
||||||
.main-rootlist-rootlistItemLink:visited {
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-rootlist-rootlistItemLinkActive,
|
|
||||||
.main-rootlist-rootlistItemLink:hover,
|
|
||||||
.main-rootlist-textWrapper:hover {
|
|
||||||
color: var(--spice-subtext) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-collectionLinkButton-collectionLinkButton
|
|
||||||
.main-collectionLinkButton-selected
|
|
||||||
.main-collectionLinkButton-icon {
|
|
||||||
opacity: 0.7 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-rootlist-rootlistDividerGradient {
|
|
||||||
background: linear-gradient(180deg, var(--spice-main), transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-rootlist-rootlistDivider {
|
|
||||||
background-color: unset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* top queue */
|
|
||||||
.queue-tabBar-active {
|
|
||||||
background-color: var(--spice-card) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.queue-tabBar-headerItemLink {
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* header colored backgrounds */
|
|
||||||
.main-home-homeHeader,
|
|
||||||
.x-441-entityHeader-overlay,
|
|
||||||
.main-actionBarBackground-background,
|
|
||||||
.main-entityHeader-overlay,
|
|
||||||
.main-entityHeader-backgroundColor,
|
|
||||||
.x-914-entityHeader-overlay,
|
|
||||||
.x-entityHeader-overlay,
|
|
||||||
.x-914-actionBarBackground-background,
|
|
||||||
.x-actionBarBackground-background {
|
|
||||||
background-color: unset !important;
|
|
||||||
background-image: unset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* play button in main page */
|
|
||||||
.main-playButton-PlayButton.main-playButton-primary {
|
|
||||||
color: var(--spice-main);
|
|
||||||
background-color: var(--spice-button);
|
|
||||||
}
|
|
||||||
|
|
||||||
.connect-title,
|
|
||||||
.connect-header {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Topbar visibility bug */
|
|
||||||
.main-topBar-topbarContent:not(.main-topBar-topbarContentFadeIn) > * {
|
|
||||||
opacity: unset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-entityHeader-topbarContent:not(.main-entityHeader-topbarContentFadeIn)
|
|
||||||
> * {
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-topBar-overlay,
|
|
||||||
.x-441-actionBarBackground-background {
|
|
||||||
background-color: var(--spice-main) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-entityHeader-shadow {
|
|
||||||
box-shadow: 0 0 4px 0 rgba(var(--spice-rgb-shadow), 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-trackList-playingIcon {
|
|
||||||
filter: hue-rotate(270deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
|
|
||||||
fill: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* details metadata */
|
|
||||||
.main-entityTitle-subtitle.main-entityTitle-gray,
|
|
||||||
.main-entityHeader-metaDataText {
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-duration-container {
|
|
||||||
color: var(--spice-subtext);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* artist page edits*/
|
|
||||||
|
|
||||||
.artist-artistOverview-artistOverviewContent {
|
|
||||||
box-shadow: 0 -2px 5px 0 rgba(var(--spice-rgb-shadow), 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-entityHeader-background.main-entityHeader-gradient {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-entityHeader-background.main-entityHeader-overlay:after {
|
|
||||||
background-image: linear-gradient(transparent, transparent),
|
|
||||||
linear-gradient(var(--spice-main), var(--spice-main));
|
|
||||||
}
|
|
||||||
|
|
||||||
.artist-artistPick-pickComment {
|
|
||||||
background: var(--spice-sec-player) !important;
|
|
||||||
border-radius: 25px !important;
|
|
||||||
border-bottom: solid 2px var(--spice-sec-player) !important;
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.artist-artistSavedTracks-imageContainer .artist-artistSavedTracks-heartIcon {
|
|
||||||
color: var(--spice-card);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* home screen edits */
|
|
||||||
|
|
||||||
.view-homeShortcutsGrid-name {
|
|
||||||
color: var(--spice-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-shelf-title {
|
|
||||||
color: var(--spice-subtext);
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-homeShortcutsGrid-shortcut,
|
|
||||||
.view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-imageWrapper,
|
|
||||||
.main-cardImage-imageWrapper,
|
|
||||||
.main-cardImage-imagePlaceholder,
|
|
||||||
.main-cardImage-image {
|
|
||||||
border-radius: 10px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-image {
|
|
||||||
border-radius: 10px 0 0 10px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-cardImage-circular,
|
|
||||||
.main-entityHeader-circle {
|
|
||||||
border-radius: 50% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-entityHeader-image {
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* inside a page edits */
|
|
||||||
|
|
||||||
.main-trackList-trackListRow.main-trackList-active .main-trackList-rowMarker,
|
|
||||||
.main-trackList-trackListRow.main-trackList-active .main-trackList-rowTitle {
|
|
||||||
color: var(--spice-subtext) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-trackList-rowTitle {
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* friend activity */
|
|
||||||
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
|
|
||||||
.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContext a,
|
|
||||||
.main-buddyFeed-activityMetadata .main-buddyFeed-usernameAndTimestamp a {
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-buddyFeed-activityMetadata .main-buddyFeed-username a {
|
|
||||||
color: var(--spice-subtext) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-avatar-avatar.main-avatar-withBadge:after {
|
|
||||||
background: var(--spice-extratext);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* setting page */
|
|
||||||
|
|
||||||
.x-settings-container {
|
|
||||||
margin: 16px 180px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-settings-title {
|
|
||||||
color: var(--spice-subtext) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-dropDown-dropDown {
|
|
||||||
border: 0;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-dropDown-dropDown {
|
|
||||||
background-color: var(--spice-button-disabled) !important;
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-toggle-indicator {
|
|
||||||
background: var(--spice-button) !important;
|
|
||||||
box-shadow: 0 2px 4px 0 rgba(var(--spice-rgb-shadow), 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked ~ .x-toggle-indicatorWrapper .x-toggle-indicator {
|
|
||||||
background-color: var(--spice-button) !important;
|
|
||||||
box-shadow: 0 2px 4px 0 rgba(var(--spice-rgb-shadow), 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
|
|
||||||
background-color: rgba(var(--spice-rgb-button-disabled), 0.7) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked ~ .x-toggle-indicatorWrapper {
|
|
||||||
background-color: rgba(var(--spice-rgb-button), 0.6) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
|
|
||||||
background-color: rgba(var(--spice-rgb-button), 0.4) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* queue, album, recent, playlist, page edits */
|
|
||||||
.queue-queue-container,
|
|
||||||
.queue-playHistory-container {
|
|
||||||
margin: 40px 60px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-actionBar-ActionBar,
|
|
||||||
.x-actionBar-ActionBar {
|
|
||||||
margin: 0 40px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.queue-queuePage-queuePage h2 {
|
|
||||||
color: var(--spice-extratext);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* podcast edits */
|
|
||||||
.x-hTMLDescription-HTMLDescription,
|
|
||||||
.x-expandableDescription-paragraph {
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-seeMore-button,
|
|
||||||
.x-expandableDescription-button {
|
|
||||||
color: var(--spice-button) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-type-minuetBold {
|
|
||||||
color: var(--spice-extratext) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-entityTitle-subtitle,
|
|
||||||
.main-entityTitle-subtitle.main-entityTitle-large,
|
|
||||||
.main-entityTitle-subtitle.main-entityTitle-bold {
|
|
||||||
color: var(--spice-subtext) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* search page edits */
|
|
||||||
|
|
||||||
input {
|
|
||||||
background-color: unset !important;
|
|
||||||
border-bottom: solid 2px var(--spice-text) !important;
|
|
||||||
border-radius: 0 !important;
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-833-searchInput-searchInputSearchIcon {
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-833-heroCategoryCard-heroTitle,
|
|
||||||
.x-833-categoryCard-title {
|
|
||||||
color: var(--spice-main) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* menu and dropdown menus including the user menu */
|
|
||||||
.main-type-mesto,
|
|
||||||
.x-533-dropDown-dropDown {
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-userWidget-box {
|
|
||||||
background-color: var(--spice-card) !important;
|
|
||||||
border: unset !important;
|
|
||||||
color: var(--spice-subtext) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* card edits */
|
|
||||||
|
|
||||||
.main-card-card div:first-child {
|
|
||||||
color: var(--spice-extratext);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-card-card:hover,
|
|
||||||
.main-card-card[data-context-menu-open="true"] {
|
|
||||||
background-color: rgba(var(--spice-rgb-sec-card), 0.3) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-contextMenu-menu,
|
|
||||||
.main-card-card:focus-within,
|
|
||||||
.main-deletePlaylistDialog-container,
|
|
||||||
.main-aboutRecsModal-container {
|
|
||||||
background-color: var(--spice-card) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-deletePlaylistDialog-secondaryButton {
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-button-primary {
|
|
||||||
background-color: var(--spice-sec-card) !important;
|
|
||||||
color: var(--spice-card) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-deletePlaylistDialog-title {
|
|
||||||
color: var(--spice-subtext) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-keyboardShortcutsHelpModal-container,
|
|
||||||
.main-trackCreditsModal-container {
|
|
||||||
background-color: var(--spice-card) !important;
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-keyboardShortcutsHelpModal-header,
|
|
||||||
.main-trackCreditsModal-header {
|
|
||||||
color: var(--spice-subtext) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-type-canon {
|
|
||||||
color: var(--spice-extratext) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* profile page edits */
|
|
||||||
.main-cardImage-imageWrapper {
|
|
||||||
background-color: var(--spice-card) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* now playing bar edits */
|
|
||||||
|
|
||||||
.Root__now-playing-bar {
|
|
||||||
background-color: var(--spice-sec-player) !important;
|
|
||||||
box-shadow: 0 -2px 5px 0 rgba(var(--spice-rgb-shadow), 0.5) !important;
|
|
||||||
border-radius: 15px 15px 0 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-nowPlayingBar-container {
|
|
||||||
background-color: var(--spice-sec-player) !important;
|
|
||||||
border-radius: 15px 15px 0 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-connectBar-connectBar.main-connectBar-FullscreenModeButtonEnabled.main-type-mesto {
|
|
||||||
color: var(--spice-sidebar) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
--progress-bar-height: 5px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar__bg {
|
|
||||||
background-color: rgba(var(--spice-rgb-button-disabled), 0.7) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar--is-active .progress-bar__fg,
|
|
||||||
:not(.no-focus-outline) .progress-bar:focus-within .progress-bar__fg {
|
|
||||||
background-color: var(--fg-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-shuffleButton-button.main-shuffleButton-on,
|
|
||||||
.main-repeatButton-button.main-repeatButton-on {
|
|
||||||
color: var(--spice-button) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover-art--with-auto-height {
|
|
||||||
border: solid var(--spice-sec-player) 5px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover-art,
|
|
||||||
.cover-art .cover-art-image {
|
|
||||||
border-radius: 10px !important;
|
|
||||||
background-color: var(--spice-sec-player) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-nowPlayingBar-extraControls {
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-addButton-button,
|
|
||||||
.main-nowPlayingBar-extraControls button {
|
|
||||||
color: rgba(var(--spice-rgb-selected-row), 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* replace icons */
|
|
||||||
.main-navBar-mainNav a[href="/"] path {
|
|
||||||
d: path(
|
|
||||||
"M4.5 14.0L13.2 6.9Q13.4 6.8 13.5 6.8Q13.7 6.8 13.9 6.9L13.9 6.9L22.5 14.0L22.5 21.7Q22.5 22.1 22.3 22.3Q22.1 22.5 21.8 22.5L21.8 22.5L16.5 22.5Q16.2 22.5 16.0 22.2Q15.8 22.0 15.8 21.7L15.8 21.7L15.8 17.2Q15.8 17.0 15.7 16.9Q15.6 16.7 15.4 16.6Q15.2 16.5 15.0 16.5L15.0 16.5L12.0 16.5Q11.7 16.5 11.5 16.7Q11.3 16.9 11.3 17.2L11.3 17.2L11.3 21.7Q11.3 22.0 11.1 22.2Q10.9 22.5 10.5 22.5L10.5 22.5L5.3 22.5Q5.0 22.5 4.8 22.3Q4.5 22.1 4.5 21.7L4.5 21.7L4.5 14.0ZM22.9 8.6L26.9 11.7Q27.0 11.9 27.0 12.2L27.0 12.2Q27.0 12.4 26.9 12.5L26.9 12.5L25.7 14.0Q25.5 14.2 25.3 14.2L25.3 14.2Q25.1 14.2 24.9 14.1L24.9 14.1L13.9 5.0Q13.7 4.9 13.6 4.9Q13.4 4.9 13.2 5.0L13.2 5.0L2.2 14.1Q2.0 14.2 1.8 14.2L1.8 14.2Q1.5 14.2 1.4 14.0L1.4 14.0L0.2 12.5Q0.0 12.4 0.0 12.2L0.0 12.2Q0.0 11.9 0.2 11.7L0.2 11.7L12.1 2.0Q12.8 1.5 13.5 1.5Q14.3 1.5 15.0 2.0L15.0 2.0L19.2 5.5L19.2 2.0Q19.2 1.8 19.3 1.6Q19.5 1.5 19.7 1.5L19.7 1.5L22.4 1.5Q22.6 1.5 22.8 1.6Q22.9 1.8 22.9 2.0L22.9 2.0L22.9 8.6Z"
|
|
||||||
) !important;
|
|
||||||
transform: scaleX(0.9);
|
|
||||||
}
|
|
||||||
.main-navBar-mainNav a[href="/search"] path {
|
|
||||||
d: path(
|
|
||||||
"M19.0 16.1L23.7 20.7Q24 21.1 24 21.5Q24 22.0 23.7 22.3L23.7 22.3L22.4 23.6Q22.0 24.0 21.6 24.0Q21.1 24.0 20.8 23.6L20.8 23.6L16.1 19.0Q15.8 18.6 15.8 18.2L15.8 18.2L15.8 17.4Q13.1 19.5 9.8 19.5L9.8 19.5Q5.7 19.5 2.9 16.6Q0 13.8 0 9.7Q0 5.7 2.9 2.8Q5.7-0.0 9.8-0.0Q13.8-0.0 16.6 2.8Q19.5 5.7 19.5 9.7L19.5 9.7Q19.5 13.1 17.4 15.7L17.4 15.7L18.2 15.7Q18.7 15.7 19.0 16.1L19.0 16.1ZM5.5 13.9L5.5 13.9Q7.3 15.7 9.7 15.7Q12.2 15.7 14.0 14.0Q15.8 12.2 15.8 9.7Q15.8 7.2 14.0 5.5Q12.2 3.7 9.8 3.7Q7.3 3.7 5.5 5.5Q3.8 7.2 3.8 9.7Q3.8 12.2 5.5 13.9Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-navBar-mainNav a[href="/collection"] path,
|
|
||||||
.main-yourLibraryX-header .main-yourLibraryX-collapseButtonWrapper path {
|
|
||||||
d: path(
|
|
||||||
"M23.3 4.9L23.3 4.9L23.3 6.0L0.8 6.0L0.8 4.9Q0.8 4.4 1.1 4.1Q1.5 3.7 1.9 3.7L1.9 3.7L22.2 3.7Q22.7 3.7 23.0 4.1Q23.3 4.4 23.3 4.9ZM22.5 1.1L22.5 1.1L22.5 2.2L1.5 2.2L1.5 1.1Q1.5 0.6 1.9 0.3Q2.2-0.0 2.7-0.0L2.7-0.0L21.4-0.0Q21.9-0.0 22.2 0.3Q22.5 0.6 22.5 1.1ZM11.1 15.5L11.1 15.5Q11.5 15.3 12.1 15.3Q12.6 15.3 13.0 15.6Q13.5 15.9 13.5 16.3Q13.5 16.7 13.0 17.0Q12.6 17.3 12.0 17.3Q11.5 17.3 11.1 17.0Q10.6 16.7 10.6 16.3Q10.6 15.9 11.1 15.5ZM1.5 7.5L22.5 7.5Q23.2 7.5 23.6 7.9Q24.0 8.4 24.0 9.0L24.0 9.0Q24.0 9.0 24.0 9.1L24.0 9.1L22.8 22.6Q22.8 23.2 22.3 23.6Q21.9 24.0 21.3 24.0L21.3 24.0L2.8 24.0Q2.2 24.0 1.8 23.6Q1.3 23.2 1.3 22.6L1.3 22.6L0.0 9.1Q0.0 9.0 0.0 9.0L0.0 9.0Q0.0 8.4 0.5 7.9Q0.9 7.5 1.5 7.5L1.5 7.5ZM12.0 22.1L12.0 22.1Q13.7 22.1 15.2 21.7Q16.7 21.2 17.8 20.4Q18.9 19.7 19.6 18.6Q20.3 17.5 20.4 16.3L20.4 16.3Q20.6 13.6 18.2 11.7Q15.7 9.8 12.0 9.8Q8.4 9.8 5.9 11.7Q3.5 13.6 3.7 16.3L3.7 16.3Q3.8 17.9 4.9 19.2Q6.1 20.6 8.0 21.4Q9.8 22.1 12.0 22.1Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-navBar-mainNav a[href="/lyrics-plus"] path {
|
|
||||||
d: path(
|
|
||||||
"M160 95.8L168 95.8Q171.5 95.8 173.8 98Q176 100.3 176 103.8L176 103.8L176 127.8Q176 160.8 154.3 185.6Q132.5 210.4 100.1 214.8L100.1 214.8L100.1 231.8L128 231.8Q131.5 231.8 133.8 234Q136 236.3 136 239.8L136 239.8L136 247.8Q136 251.3 133.8 253.5Q131.5 255.8 128 255.8L128 255.8L48 255.8Q44.5 255.8 42.3 253.6Q40 251.4 40 247.8L40 247.8L40 239.8Q40 236.3 42.3 234Q44.5 231.8 48 231.8L48 231.8L76.1 231.8L76.1 214.8Q43.6 210.3 21.8 184Q0 157.8 0 123.8L0 123.8L0 103.8Q0 100.3 2.3 98Q4.5 95.8 8 95.8L8 95.8L16 95.8Q19.5 95.8 21.8 98Q24 100.3 24 103.8L24 103.8L24 124.8Q24 150.3 40.5 169.8Q57 189.3 81.5 191.3L81.5 191.3Q110 194.3 131 175Q152 155.8 152 127.8L152 127.8L152 103.8Q152 100.3 154.3 98Q156.5 95.8 160 95.8L160 95.8ZM122 161.9L122 161.9Q108 175.9 88.1 175.8Q68.1 175.8 54.1 161.8Q40 147.8 40 127.8L40 127.8L40 47.8Q40 27.6 54.1 13.7Q68.1-0.3 88.1-0.3Q108.1-0.3 122.1 13.8Q136 27.8 136 47.8L136 47.8L93.5 47.8Q88 47.8 88 51.8L88 51.8L88 59.8Q88 63.9 93.5 63.8L93.5 63.8L136 63.8L136 79.8L93.5 79.8Q88 79.8 88 83.8L88 83.8L88 91.8Q88 95.9 93.5 95.8L93.5 95.8L136 95.8L136 111.8L93.5 111.8Q88 111.8 88 115.8L88 115.8L88 123.8Q88 127.9 93.5 127.8L93.5 127.8L136 127.8Q136 147.8 122 161.9Z"
|
|
||||||
) !important;
|
|
||||||
transform: translate(35px, 0) !important;
|
|
||||||
}
|
|
||||||
.main-navBar-mainNav a[href="/marketplace"] path {
|
|
||||||
d: path(
|
|
||||||
"M0 20.2L0 20.2L0 12.0L27 12.0L27 20.2Q27 21.2 26.3 21.8Q25.7 22.5 24.8 22.5L24.8 22.5L2.3 22.5Q1.3 22.5 0.7 21.8Q0 21.2 0 20.2ZM9 17.0L9 17.0L9 18.9Q9 19.5 9.6 19.5L9.6 19.5L15.9 19.5Q16.5 19.5 16.5 18.9L16.5 18.9L16.5 17.0Q16.5 16.5 15.9 16.5L15.9 16.5L9.6 16.5Q9 16.5 9 17.0ZM3 17.0L3 17.0L3 18.9Q3 19.5 3.6 19.5L3.6 19.5L6.9 19.5Q7.5 19.5 7.5 18.9L7.5 18.9L7.5 17.0Q7.5 16.5 6.9 16.5L6.9 16.5L3.6 16.5Q3 16.5 3 17.0ZM27 3.7L27 3.7L27 6.0L0 6.0L0 3.7Q0 2.8 0.7 2.1Q1.3 1.5 2.3 1.5L2.3 1.5L24.8 1.5Q25.7 1.5 26.3 2.1Q27 2.8 27 3.7Z"
|
|
||||||
) !important;
|
|
||||||
transform: translate(0) scale(2.8) !important;
|
|
||||||
}
|
|
||||||
.main-navBar-mainNav a[href="/new-releases"] path {
|
|
||||||
d: path(
|
|
||||||
"M134.5 246.3L134.5 246.3Q125 255.8 112 255.8Q99 255.8 89.5 246.3Q80 236.8 80 223.8L80 223.8L144 223.8Q144 236.8 134.5 246.3ZM219.5 180.8L219.5 180.8Q224 185.4 224 191.8L224 191.8Q224 198.3 219.5 203Q215 207.8 208 207.8L208 207.8L16 207.8Q9 207.8 4.5 203Q0 198.3 0 191.8Q0 185.4 4.5 180.8L4.5 180.8Q5 180.3 6 178.9L6 178.9Q13.5 171.4 17.8 165.3Q22 159.3 27 142.5Q32 125.8 32 103.8L32 103.8Q32 74.8 50.1 53.3Q68.1 31.8 96 26.4L96 26.4L96 15.8Q96 9.3 100.8 4.5Q105.5-0.3 112-0.3Q118.5-0.3 123.3 4.6Q128 9.4 128 15.8L128 15.8L128 26.4Q146.5 29.8 161 40.8Q175.5 51.8 183.8 68.3Q192 84.8 192 103.8L192 103.8Q192 125.8 197 142.5Q202 159.3 206.3 165.3Q210.5 171.4 218 178.9L218 178.9Q219 180.3 219.5 180.8ZM101 170.9L101 170.9Q105.6 175.9 112.1 175.8Q118.5 175.8 123.3 171Q128 166.3 128 159.8Q128 153.4 123.3 148.6Q118.5 143.8 112 143.8Q105.5 143.8 100.8 148.6Q96 153.4 96 159.8Q96 166.3 101 170.9ZM124.5 120.9L124.5 120.9L131 72.9Q131 72.4 131 71.8L131 71.8Q131 68.3 128.8 66Q126.5 63.8 123 63.8L123 63.8L101 63.8Q97.6 63.8 95.3 66Q93 68.3 93 71.8L93 71.8Q93 72.3 93 72.9L93 72.9L99.5 120.9Q99.5 123.8 102 125.8Q104.5 127.8 107 127.8L107 127.8L117 127.8Q118.5 127.8 120.3 126.8Q122 125.8 123.3 124.3Q124.5 122.9 124.5 120.9Z"
|
|
||||||
) !important;
|
|
||||||
transform: translate(20px, 0);
|
|
||||||
}
|
|
||||||
.main-navBar-mainNav a[href="/reddit"] path {
|
|
||||||
d: path(
|
|
||||||
"M 89.998 45.604 c -0.201 -5.442 -4.77 -9.691 -10.229 -9.506 c -2.419 0.084 -4.719 1.075 -6.466 2.737 c -7.693 -5.24 -16.729 -8.113 -26.017 -8.314 L 51.67 9.442 l 14.461 3.041 c 0.402 3.712 3.728 6.4 7.44 5.996 c 3.712 -0.402 6.4 -3.728 5.996 -7.44 c -0.404 -3.712 -3.728 -6.4 -7.44 -5.996 c -2.134 0.218 -4.048 1.461 -5.105 3.309 L 50.461 5.043 c -1.125 -0.252 -2.251 0.453 -2.503 1.596 c 0 0.017 0 0.017 0 0.033 L 42.97 30.119 c -9.406 0.152 -18.559 3.041 -26.352 8.314 c -3.964 -3.728 -10.212 -3.544 -13.94 0.437 c -3.728 3.964 -3.544 10.212 0.437 13.94 c 0.773 0.722 1.662 1.344 2.653 1.781 c -0.068 0.991 -0.068 1.982 0 2.973 c 0 15.133 17.636 27.444 39.386 27.444 c 21.75 0 39.386 -12.295 39.386 -27.444 c 0.068 -0.991 0.068 -1.982 0 -2.973 C 87.932 52.894 90.066 49.4 89.998 45.604 z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-useDropTarget-folder .x-entityImage-imageContainer path,
|
|
||||||
.main-useDropTarget-folder .main-entityHeader-imagePlaceholder path {
|
|
||||||
d: path(
|
|
||||||
"M12.8 6.0L21.8 6.0Q22.7 6.0 23.3 6.6Q24 7.3 24 8.2L24 8.2L24 18.7Q24 19.7 23.3 20.3Q22.7 21.0 21.8 21.0L21.8 21.0L2.3 21.0Q1.3 21.0 0.7 20.3Q0 19.7 0 18.7L0 18.7L0 5.2Q0 4.3 0.7 3.6Q1.3 3.0 2.3 3.0L2.3 3.0L9.8 3.0L12.8 6.0Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-rootlist-expandArrow path,
|
|
||||||
.main-yourLibraryX-listItemGroup .main-yourLibraryX-isFlattened path {
|
|
||||||
d: path(
|
|
||||||
"M13.5 2.5L13.5 2.5Q15.8 4.8 15.8 8.0Q15.8 11.2 13.5 13.5Q11.2 15.7 8 15.7Q4.8 15.7 2.5 13.5Q0.3 11.2 0.3 8.0Q0.3 4.8 2.5 2.5Q4.8 0.2 8 0.2Q11.2 0.2 13.5 2.5ZM8.5 11.6L8.5 11.6L12.8 7.3Q13 7.1 13 6.8Q13 6.5 12.8 6.2L12.8 6.2L12.3 5.7Q12 5.5 11.7 5.5Q11.4 5.5 11.2 5.7L11.2 5.7L8 8.9L4.8 5.7Q4.6 5.5 4.3 5.5Q4.0 5.5 3.8 5.7L3.8 5.7L3.3 6.2Q3 6.5 3 6.8Q3 7.1 3.3 7.3L3.3 7.3L7.5 11.6Q7.7 11.8 8 11.8Q8.3 11.8 8.5 11.6Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-topBar-button[aria-label="Go back"] path {
|
|
||||||
d: path(
|
|
||||||
"M13.5 13.5L13.5 13.5Q11.2 15.7 8 15.7Q4.8 15.7 2.5 13.5Q0.3 11.2 0.3 8.0Q0.3 4.8 2.5 2.5Q4.8 0.2 8 0.2Q11.2 0.2 13.5 2.5Q15.8 4.8 15.8 8.0Q15.8 11.2 13.5 13.5ZM4.4 8.5L4.4 8.5L8.7 12.7Q8.9 13.0 9.2 13.0Q9.5 13.0 9.8 12.7L9.8 12.7L10.3 12.2Q10.5 12.0 10.5 11.7Q10.5 11.4 10.3 11.2L10.3 11.2L7.1 8.0L10.3 4.8Q10.5 4.6 10.5 4.3Q10.5 4.0 10.3 3.7L10.3 3.7L9.8 3.2Q9.5 3.0 9.2 3.0Q8.9 3.0 8.7 3.2L8.7 3.2L4.4 7.5Q4.2 7.7 4.2 8.0Q4.2 8.3 4.4 8.5Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-topBar-button[aria-label="Go forward"] path {
|
|
||||||
d: path(
|
|
||||||
"M2.5 2.5L2.5 2.5Q4.8 0.2 8.0 0.2Q11.2 0.2 13.5 2.5Q15.8 4.8 15.8 8.0Q15.8 11.2 13.5 13.5Q11.2 15.7 8 15.7Q4.8 15.7 2.5 13.5Q0.3 11.2 0.3 8.0Q0.3 4.8 2.5 2.5ZM11.6 7.5L11.6 7.5L7.3 3.2Q7.1 3.0 6.8 3.0Q6.5 3.0 6.3 3.2L6.3 3.2L5.8 3.7Q5.5 4.0 5.5 4.3Q5.5 4.6 5.8 4.8L5.8 4.8L8.9 8.0L5.8 11.2Q5.5 11.4 5.5 11.7Q5.5 12.0 5.8 12.2L5.8 12.2L6.3 12.7Q6.5 13.0 6.8 13.0Q7.1 13.0 7.3 12.7L7.3 12.7L11.6 8.5Q11.8 8.3 11.8 8.0Q11.8 7.7 11.6 7.5Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-topBar-container button[aria-label="Friend Activity"] path {
|
|
||||||
d: path(
|
|
||||||
"M4.4 6.4L4.4 6.4Q3.8 7.0 3 7.0Q2.2 7.0 1.6 6.4Q1 5.8 1 5.0Q1 4.2 1.6 3.6Q2.2 3.0 3 3.0Q3.8 3.0 4.4 3.6Q5 4.2 5 5.0Q5 5.8 4.4 6.4ZM18.4 6.4L18.4 6.4Q17.8 7.0 17 7.0Q16.2 7.0 15.6 6.4Q15 5.8 15 5.0Q15 4.2 15.6 3.6Q16.2 3.0 17 3.0Q17.8 3.0 18.4 3.6Q19 4.2 19 5.0Q19 5.8 18.4 6.4ZM16 8.0L18 8.0Q18.8 8.0 19.4 8.6Q20 9.2 20 10.0L20 10.0L20 11.0Q20 11.4 19.7 11.7Q19.4 12.0 19 12.0L19 12.0L16.9 12.0Q16.8 11.3 16.5 10.6Q16.2 10.0 15.7 9.4Q15.2 8.9 14.6 8.6L14.6 8.6Q15.2 8.0 16 8.0L16 8.0ZM12.5 7.0L12.5 7.0Q11.4 8.0 10 8.0Q8.6 8.0 7.5 7.0Q6.5 5.9 6.5 4.5Q6.5 3.1 7.5 2.0Q8.6 1.0 10 1.0Q11.4 1.0 12.5 2.0Q13.5 3.1 13.5 4.5Q13.5 5.9 12.5 7.0ZM12.1 9.0L12.4 9.0Q13.9 9.0 15.0 10.0Q16 11.1 16 12.6L16 12.6L16 13.5Q16 14.1 15.6 14.5Q15.1 15.0 14.5 15.0L14.5 15.0L5.5 15.0Q4.9 15.0 4.4 14.6Q4 14.1 4 13.5L4 13.5L4 12.6Q4 11.1 5.0 10.0Q6.1 9.0 7.6 9.0L7.6 9.0L7.9 9.0Q8.9 9.5 10 9.5Q11.1 9.5 12.1 9.0L12.1 9.0ZM5.4 8.6L5.4 8.6Q4.5 9.1 3.8 10.0Q3.2 10.9 3.1 12.0L3.1 12.0L1 12.0Q0.6 12.0 0.3 11.7Q0 11.4 0 11.0L0 11.0L0 10.0Q0 9.2 0.6 8.6Q1.2 8.0 2 8.0L2 8.0L4 8.0Q4.8 8.0 5.4 8.6Z"
|
|
||||||
) !important;
|
|
||||||
transform: scale(0.8);
|
|
||||||
}
|
|
||||||
.main-userWidget-box path {
|
|
||||||
d: path(
|
|
||||||
"M13.5 2.5L13.5 2.5Q15.8 4.8 15.8 8.0Q15.8 11.2 13.5 13.5Q11.2 15.7 8 15.7Q4.8 15.7 2.5 13.5Q0.3 11.2 0.3 8.0Q0.3 4.8 2.5 2.5Q4.8 0.2 8 0.2Q11.2 0.2 13.5 2.5ZM8.5 11.6L8.5 11.6L12.8 7.3Q13 7.1 13 6.8Q13 6.5 12.8 6.2L12.8 6.2L12.3 5.7Q12 5.5 11.7 5.5Q11.4 5.5 11.2 5.7L11.2 5.7L8 8.9L4.8 5.7Q4.6 5.5 4.3 5.5Q4.0 5.5 3.8 5.7L3.8 5.7L3.3 6.2Q3 6.5 3 6.8Q3 7.1 3.3 7.3L3.3 7.3L7.5 11.6Q7.7 11.8 8 11.8Q8.3 11.8 8.5 11.6Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-userWidget-box[data-context-menu-open="true"] path {
|
|
||||||
d: path(
|
|
||||||
"M2.5 13.5L2.5 13.5Q0.3 11.2 0.3 8.0Q0.3 4.8 2.5 2.5Q4.8 0.2 8 0.2Q11.2 0.2 13.5 2.5Q15.8 4.8 15.8 8.0Q15.8 11.2 13.5 13.5Q11.2 15.7 8.0 15.7Q4.8 15.7 2.5 13.5ZM7.5 4.4L7.5 4.4L3.3 8.7Q3 8.9 3 9.2Q3 9.5 3.3 9.7L3.3 9.7L3.8 10.2Q4 10.5 4.3 10.5Q4.6 10.5 4.8 10.2L4.8 10.2L8 7.1L11.2 10.2Q11.4 10.5 11.7 10.5Q12.0 10.5 12.3 10.2L12.3 10.2L12.8 9.7Q13 9.5 13 9.2Q13 8.9 12.8 8.7L12.8 8.7L8.5 4.4Q8.3 4.2 8 4.2Q7.7 4.2 7.5 4.4Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.player-controls__left,
|
|
||||||
.player-controls__right {
|
|
||||||
height: 30px;
|
|
||||||
align-self: flex-end;
|
|
||||||
}
|
|
||||||
.main-shuffleButton-button path:nth-child(1) {
|
|
||||||
d: path(
|
|
||||||
"M13.3 8.7L15.8 11.2Q16 11.4 16 11.7Q16 12.1 15.8 12.3L15.8 12.3L13.3 14.8Q12.9 15.1 12.5 14.9Q12 14.7 12 14.2L12 14.2L12 13.0L10.2 13.0Q10 13.0 9.9 12.9L9.9 12.9L7.7 10.5L9.3 8.7L11 10.5L12 10.5L12 9.2Q12 8.7 12.5 8.5Q12.9 8.4 13.3 8.7L13.3 8.7ZM3 5.5L0.4 5.5Q0 5.5 0 5.1L0 5.1L0 3.4Q0 3.0 0.4 3.0L0.4 3.0L3.8 3.0Q4 3.0 4.1 3.1L4.1 3.1L6.3 5.5L4.7 7.3L3 5.5ZM12 6.7L12 5.5L11 5.5L4.1 12.9Q4 13.0 3.8 13.0L3.8 13.0L0.4 13.0Q0 13.0 0 12.6L0 12.6L0 10.9Q0 10.5 0.4 10.5L0.4 10.5L3 10.5L9.9 3.1Q10 3.0 10.2 3.0L10.2 3.0L12 3.0L12 1.7Q12 1.2 12.5 1.0Q12.9 0.9 13.3 1.2L13.3 1.2L15.8 3.7Q16 3.9 16 4.2Q16 4.6 15.8 4.8L15.8 4.8L13.3 7.3Q12.9 7.6 12.5 7.4Q12 7.2 12 6.7L12 6.7Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-shuffleButton-button path:nth-child(2) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.main-skipBackButton-button path {
|
|
||||||
d: path(
|
|
||||||
"M7 7.5L7 7.5L11.3 3.2Q11.5 3.0 11.8 3.0Q12.1 3.0 12.3 3.2L12.3 3.2L13 3.9Q13.2 4.1 13.2 4.5Q13.2 4.8 13 5.0L13 5.0L10 8.0L13 11.0Q13.2 11.1 13.2 11.3Q13.3 11.5 13.2 11.7Q13.2 11.9 13 12.1L13 12.1L12.3 12.8Q12.1 13.0 11.8 13.0Q11.5 13.0 11.3 12.8L11.3 12.8L7 8.5Q6.8 8.3 6.8 8.0Q6.8 7.7 7 7.5ZM5.3 12.8L1 8.5Q0.8 8.3 0.8 8.0Q0.8 7.7 1 7.5L1 7.5L5.3 3.2Q5.5 3.0 5.8 3.0Q6.1 3.0 6.3 3.2L6.3 3.2L7 3.9Q7.2 4.1 7.2 4.5Q7.2 4.8 7 5.0L7 5.0L4 8.0L7 11.0Q7.2 11.2 7.2 11.5Q7.2 11.8 7 12.1L7 12.1L6.3 12.8Q6.1 13.0 5.8 13.0Q5.5 13.0 5.3 12.8L5.3 12.8Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-skipForwardButton-button path {
|
|
||||||
d: path(
|
|
||||||
"M7 8.5L7 8.5L2.8 12.8Q2.5 13.0 2.2 13.0Q1.9 13.0 1.7 12.8L1.7 12.8L1 12.1Q0.8 11.8 0.8 11.5Q0.8 11.2 1 11.0L1 11.0L4 8.0L1 5.0Q0.8 4.8 0.8 4.5Q0.8 4.1 1 3.9L1 3.9L1.7 3.2Q1.9 3.0 2.2 3.0Q2.5 3.0 2.8 3.2L2.8 3.2L7 7.5Q7.2 7.7 7.2 8.0Q7.2 8.3 7 8.5ZM8.8 3.2L13 7.5Q13.2 7.7 13.2 8.0Q13.2 8.3 13 8.5L13 8.5L8.8 12.8Q8.5 13.0 8.2 13.0Q7.9 13.0 7.7 12.8L7.7 12.8L7 12.1Q6.8 11.8 6.8 11.5Q6.8 11.2 7 11.0L7 11.0L10 8.0L7 5.0Q6.8 4.8 6.8 4.5Q6.8 4.1 7 3.9L7 3.9L7.7 3.2Q7.8 3.1 7.9 3.1Q8.1 3.0 8.2 3.0Q8.4 3.0 8.5 3.1Q8.7 3.1 8.8 3.2L8.8 3.2Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-repeatButton-button path {
|
|
||||||
d: path(
|
|
||||||
"M16 8.0L16 8.0Q16 10.0 14.5 11.5Q13.1 13.0 11 13.0L11 13.0L5.3 13.0L6.4 14.0Q6.6 14.2 6.6 14.5Q6.6 14.9 6.4 15.1L6.4 15.1L6.1 15.4Q5.8 15.6 5.5 15.6Q5.2 15.6 5 15.4L5 15.4L2.1 12.5Q1.9 12.3 1.9 12.0Q1.9 11.7 2.1 11.5L2.1 11.5L5 8.6Q5.2 8.3 5.5 8.3Q5.8 8.3 6.1 8.6L6.1 8.6L6.4 8.9Q6.6 9.1 6.6 9.4Q6.6 9.8 6.4 10.0L6.4 10.0L5.3 11.0L11 11.0Q12.3 11.0 13.1 10.1Q14 9.2 14 8.0L14 8.0Q14 7.3 13.8 6.8L13.8 6.8Q13.5 6.3 13.9 5.9L13.9 5.9L14.3 5.6Q14.5 5.3 14.9 5.3Q15.3 5.4 15.5 5.7L15.5 5.7Q16 6.8 16 8.0ZM2.3 9.2L2.3 9.2Q2.5 9.7 2.1 10.1L2.1 10.1L1.7 10.4Q1.5 10.7 1.1 10.6Q0.7 10.6 0.5 10.2L0.5 10.2Q0 9.2 0 8.0L0 8.0Q0 5.9 1.5 4.5Q2.9 3.0 5 3.0L5 3.0L10.7 3.0L9.6 2.0Q9.4 1.8 9.4 1.4Q9.4 1.1 9.6 0.9L9.6 0.9L9.9 0.6Q10.2 0.3 10.5 0.3Q10.8 0.3 11 0.6L11 0.6L13.9 3.5Q14.1 3.7 14.1 4.0Q14.1 4.3 13.9 4.5L13.9 4.5L11 7.4Q10.8 7.6 10.5 7.6Q10.2 7.6 9.9 7.4L9.9 7.4L9.6 7.1Q9.4 6.9 9.4 6.5Q9.4 6.2 9.6 6.0L9.6 6.0L10.7 5.0L5 5.0Q3.8 5.0 2.9 5.9Q2 6.7 2 8.0L2 8.0Q2 8.6 2.3 9.2Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-repeatButton-button[aria-checked="mixed"] path {
|
|
||||||
d: path(
|
|
||||||
"M16 8.0L16 8.0Q16 10.0 14.5 11.5Q13.1 13.0 11 13.0L11 13.0L5.3 13.0L6.4 14.0Q6.6 14.2 6.6 14.5Q6.6 14.9 6.4 15.1L6.4 15.1L6.1 15.4Q5.8 15.6 5.5 15.6Q5.2 15.6 5 15.4L5 15.4L2.1 12.5Q1.9 12.3 1.9 12.0Q1.9 11.7 2.1 11.5L2.1 11.5L4.6 9.0Q4.8 8.7 5.2 8.7Q5.5 8.7 5.7 9.0L5.7 9.0L6.0 9.3Q6.3 9.5 6.3 9.8Q6.3 10.1 6 10.4L6 10.4L5.3 11.0L11 11.0Q12.3 11.0 13.1 10.1Q14 9.2 14 8.0L14 8.0Q14 7.3 13.8 6.8L13.8 6.8Q13.5 6.3 13.9 5.9L13.9 5.9L14.3 5.6Q14.5 5.3 14.9 5.3Q15.3 5.4 15.5 5.7L15.5 5.7Q16 6.8 16 8.0ZM2.3 9.2L2.3 9.2Q2.5 9.7 2.1 10.1L2.1 10.1L1.7 10.4Q1.5 10.7 1.1 10.6Q0.7 10.6 0.5 10.2L0.5 10.2Q0 9.2 0 8.0L0 8.0Q0 5.9 1.5 4.5Q2.9 3.0 5 3.0L5 3.0L10.7 3.0L9.6 2.0Q9.4 1.8 9.4 1.4Q9.4 1.1 9.6 0.9L9.6 0.9L9.9 0.6Q10.2 0.3 10.5 0.3Q10.8 0.3 11 0.6L11 0.6L13.9 3.5Q14.1 3.7 14.1 4.0Q14.1 4.3 13.9 4.5L13.9 4.5L11.4 7.0Q11.2 7.2 10.8 7.2Q10.5 7.2 10.3 7.0L10.3 7.0L10.0 6.7Q9.8 6.5 9.8 6.1Q9.8 5.8 10 5.6L10 5.6L10.7 5.0L5 5.0Q3.8 5.0 2.9 5.9Q2 6.7 2 8.0L2 8.0Q2 8.6 2.3 9.2ZM7.1 9.6L7.1 9.4Q7.1 9.0 7.5 9.0L7.5 9.0L7.9 9.0L7.9 7.7L8.0 7.4L7.9 7.4Q7.9 7.5 7.8 7.5L7.8 7.5Q7.6 7.8 7.4 7.5L7.4 7.5L7.2 7.3Q6.9 7.1 7.2 6.8L7.2 6.8L7.9 6.2Q8.1 6.0 8.3 6.0L8.3 6.0L8.7 6.0Q9.1 6.0 9.1 6.4L9.1 6.4L9.1 9.0L9.6 9.0Q9.9 9.0 9.9 9.4L9.9 9.4L9.9 9.6Q9.9 10.0 9.6 10.0L9.6 10.0L7.5 10.0Q7.1 10.0 7.1 9.6L7.1 9.6Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-nowPlayingBar-lyricsButton path {
|
|
||||||
d: path(
|
|
||||||
"M6.2 1.3L6.2 1.3Q7.3 0.7 8.5 0.7Q9.7 0.7 10.8 1.3Q11.8 1.9 12.4 2.9Q13 3.9 13 5.2L13 5.2Q13 6.0 12.7 6.8Q12.4 7.6 11.8 8.2Q11.3 8.7 10.6 9.1Q9.8 9.5 9.0 9.6L9.0 9.6L4.8 14.6Q4.4 15.0 3.8 15.0L3.8 15.0Q3.4 15.0 3.1 14.8L3.1 14.8L2.5 14.5Q2.1 14.2 1.9 13.8Q1.8 13.3 2.0 12.8L2.0 12.8L4.5 7.2Q4 6.2 4 5.2L4 5.2Q4 3.9 4.6 2.9Q5.2 1.9 6.2 1.3ZM4.0 13.9L4.0 13.9L7.7 9.6Q6.2 9.3 5.2 8.1L5.2 8.1L2.9 13.2Q2.9 13.3 2.9 13.4Q2.9 13.6 3.0 13.6L3.0 13.6L3.6 14.0Q3.7 14.0 3.8 14.0Q4.0 14.0 4.0 13.9ZM6.0 7.6L6.0 7.6Q7.1 8.7 8.5 8.7Q9.9 8.7 11.0 7.6Q12 6.6 12 5.2Q12 3.7 11.0 2.7Q9.9 1.7 8.5 1.7Q7.1 1.7 6.0 2.7Q5 3.7 5 5.2Q5 6.6 6.0 7.6Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-nowPlayingBar-extraControls button[aria-label="Queue"] path {
|
|
||||||
d: path(
|
|
||||||
"M8.5 8.0L0.5 8.0Q0.3 8.0 0.1 7.8Q0 7.7 0 7.5L0 7.5L0 6.5Q0 6.3 0.1 6.1Q0.3 6.0 0.5 6.0L0.5 6.0L8.5 6.0Q8.7 6.0 8.9 6.1Q9 6.3 9 6.5L9 6.5L9 7.5Q9 7.7 8.9 7.8Q8.7 8.0 8.5 8.0L8.5 8.0ZM8.5 4.0L0.5 4.0Q0.3 4.0 0.1 3.8Q0 3.7 0 3.5L0 3.5L0 2.5Q0 2.3 0.1 2.1Q0.3 2.0 0.5 2.0L0.5 2.0L8.5 2.0Q8.7 2.0 8.9 2.1Q9 2.3 9 2.5L9 2.5L9 3.5Q9 3.7 8.9 3.8Q8.7 4.0 8.5 4.0L8.5 4.0ZM0.5 10.0L4.5 10.0Q4.7 10.0 4.9 10.1Q5 10.3 5 10.5L5 10.5L5 11.5Q5 11.7 4.9 11.8Q4.7 12.0 4.5 12.0L4.5 12.0L0.5 12.0Q0.3 12.0 0.1 11.8Q0 11.7 0 11.5L0 11.5L0 10.5Q0 10.3 0.1 10.1Q0.3 10.0 0.5 10.0L0.5 10.0ZM11.7 0.9L14.7 0.0Q14.8-0.0 15-0.0L15-0.0Q15.4-0.0 15.7 0.3Q16 0.6 16 1.0L16 1.0L16 3.0Q16 3.3 15.8 3.6Q15.6 3.9 15.3 4.0L15.3 4.0L13 4.6L13 13.5Q13 14.5 12.0 15.3Q10.9 16.0 9.5 16.0Q8.1 16.0 7.0 15.3Q6 14.5 6 13.5Q6 12.5 7.0 11.7Q8.1 11.0 9.5 11.0L9.5 11.0Q10.3 11.0 11 11.2L11 11.2L11 1.9Q11 1.6 11.2 1.3Q11.4 1.0 11.7 0.9L11.7 0.9Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-devicePicker-controlButton path {
|
|
||||||
d: path(
|
|
||||||
"M4 13.0L9 13.0L9 13.5Q9 14.3 9.5 15.0L9.5 15.0L4 15.0Q3.6 15.0 3.3 14.7Q3 14.4 3 14.0Q3 13.6 3.3 13.3Q3.6 13.0 4 13.0L4 13.0ZM0 10.5L0 2.5Q0 1.9 0.4 1.4Q0.9 1.0 1.5 1.0L1.5 1.0L9.5 1.0Q9 1.6 9 2.5L9 2.5L9 3.0L2 3.0L2 10.0L9 10.0L9 12.0L1.5 12.0Q0.9 12.0 0.4 11.6Q0 11.1 0 10.5L0 10.5ZM11.5 1.0L18.5 1.0Q19.1 1.0 19.6 1.4Q20 1.9 20 2.5L20 2.5L20 13.5Q20 14.1 19.6 14.5Q19.1 15.0 18.5 15.0L18.5 15.0L11.5 15.0Q10.9 15.0 10.4 14.6Q10 14.1 10 13.5L10 13.5L10 2.5Q10 1.9 10.4 1.4Q10.9 1.0 11.5 1.0L11.5 1.0ZM15.7 3.3L15.7 3.3Q15.4 3.0 15.0 3.0Q14.6 3.0 14.3 3.3Q14 3.6 14 4.0Q14 4.4 14.3 4.7Q14.6 5.0 15 5.0Q15.4 5.0 15.7 4.7Q16 4.4 16 4.0Q16 3.6 15.7 3.3ZM12.9 12.1L12.9 12.1Q13.8 13.0 15.0 13.0Q16.3 13.0 17.1 12.1Q18 11.2 18 10.0Q18 8.7 17.1 7.9Q16.3 7.0 15.0 7.0Q13.8 7.0 12.9 7.9Q12 8.7 12 10.0Q12 11.2 12.9 12.1ZM13.6 8.6L13.6 8.6Q14.2 8.0 15 8.0Q15.8 8.0 16.4 8.6Q17 9.2 17 10.0Q17 10.8 16.4 11.4Q15.8 12.0 15 12.0Q14.2 12.0 13.6 11.4Q13 10.8 13 10.0Q13 9.2 13.6 8.6Z"
|
|
||||||
) !important;
|
|
||||||
transform: scaleX(0.8);
|
|
||||||
}
|
|
||||||
.main-nowPlayingBar-extraControls svg[aria-label="Volume off"] path {
|
|
||||||
d: path(
|
|
||||||
"M3.9 5.0L6.7 2.2Q7.1 1.9 7.5 2.0Q8 2.2 8 2.7L8 2.7L8 13.2Q8 13.7 7.5 13.9Q7.1 14.1 6.7 13.8L6.7 13.8L3.9 11.0L0.8 11.0Q0.4 11.0 0.2 10.8Q0 10.6 0 10.2L0 10.2L0 5.7Q0 5.4 0.2 5.2Q0.4 5.0 0.8 5.0L0.8 5.0L3.9 5.0ZM15.8 6.6L14.4 8.0L15.8 9.4Q16.2 9.8 15.8 10.1L15.8 10.1L15.1 10.8Q14.8 11.2 14.4 10.8L14.4 10.8L13 9.4L11.6 10.8Q11.2 11.2 10.9 10.8L10.9 10.8L10.2 10.1Q9.8 9.8 10.2 9.4L10.2 9.4L11.6 8.0L10.2 6.6Q9.8 6.2 10.2 5.9L10.2 5.9L10.9 5.1Q11.2 4.8 11.6 5.1L11.6 5.1L13 6.6L14.4 5.1Q14.8 4.8 15.1 5.1L15.1 5.1L15.8 5.9Q16.2 6.2 15.8 6.6L15.8 6.6Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-nowPlayingBar-extraControls svg[aria-label="Volume low"] path {
|
|
||||||
d: path(
|
|
||||||
"M3.9 5.0L6.7 2.2Q7.1 1.9 7.5 2.1Q8 2.3 8 2.8L8 2.8L8 13.3Q8 13.8 7.5 14.0Q7.1 14.1 6.7 13.8L6.7 13.8L3.9 11.0L0.8 11.0Q0.4 11.0 0.2 10.8Q0 10.6 0 10.3L0 10.3L0 5.8Q0 5.5 0.2 5.2Q0.4 5.0 0.8 5.0L0.8 5.0L3.9 5.0ZM10.6 5.6L10.6 5.6Q11.2 6.0 11.6 6.6Q12 7.3 12 8.0Q12 8.8 11.6 9.4Q11.2 10.1 10.6 10.4L10.6 10.4Q10.3 10.6 10.0 10.5Q9.7 10.4 9.5 10.1Q9.4 9.9 9.5 9.6Q9.6 9.3 9.8 9.1L9.8 9.1Q10.5 8.7 10.5 8.0Q10.5 7.3 9.8 6.9L9.8 6.9Q9.6 6.8 9.5 6.5Q9.4 6.2 9.5 5.9Q9.7 5.6 10.0 5.6Q10.3 5.5 10.6 5.6Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-nowPlayingBar-extraControls svg[aria-label="Volume medium"] path {
|
|
||||||
d: path(
|
|
||||||
"M3.9 5.0L6.7 2.2Q7.1 1.9 7.5 2.0Q8 2.2 8 2.7L8 2.7L8 13.2Q8 13.7 7.5 13.9Q7.1 14.1 6.7 13.8L6.7 13.8L3.9 11.0L0.8 11.0Q0.4 11.0 0.2 10.8Q0 10.6 0 10.2L0 10.2L0 5.7Q0 5.4 0.2 5.2Q0.4 5.0 0.8 5.0L0.8 5.0L3.9 5.0ZM14.3 5.2L14.3 5.2Q15 6.5 15 8.0Q15 9.5 14.3 10.8Q13.6 12.1 12.3 12.9L12.3 12.9Q12.0 13.0 11.7 13.0Q11.4 12.9 11.3 12.6L11.3 12.6Q11.1 12.4 11.2 12.1Q11.3 11.8 11.5 11.6L11.5 11.6Q12.1 11.2 12.6 10.6Q13.0 10.1 13.3 9.4Q13.5 8.7 13.5 8.0Q13.5 7.3 13.3 6.6Q13.0 5.9 12.6 5.3Q12.1 4.8 11.5 4.4L11.5 4.4Q11.3 4.2 11.2 3.9Q11.1 3.6 11.3 3.4Q11.4 3.1 11.8 3.0Q12.1 2.9 12.3 3.1L12.3 3.1Q13.6 3.9 14.3 5.2ZM10.6 5.6L10.6 5.6Q11.2 6.0 11.6 6.6Q12 7.2 12 8.0Q12 8.7 11.6 9.4Q11.2 10.0 10.6 10.4L10.6 10.4Q10.3 10.5 10.0 10.5Q9.7 10.4 9.5 10.1Q9.4 9.8 9.5 9.5Q9.6 9.2 9.8 9.1L9.8 9.1Q10.5 8.7 10.5 8.0Q10.5 7.3 9.8 6.9L9.8 6.9Q9.6 6.7 9.5 6.4Q9.4 6.1 9.5 5.9Q9.7 5.6 10.0 5.5Q10.3 5.4 10.6 5.6Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-nowPlayingBar-extraControls svg[aria-label="Volume high"] path {
|
|
||||||
d: path(
|
|
||||||
"M3.9 5.0L6.7 2.2Q7.1 1.9 7.5 2.0Q8 2.2 8 2.7L8 2.7L8 13.2Q8 13.7 7.5 13.9Q7.1 14.1 6.7 13.8L6.7 13.8L3.9 11.0L0.8 11.0Q0.4 11.0 0.2 10.8Q0 10.6 0 10.2L0 10.2L0 5.7Q0 5.4 0.2 5.2Q0.4 5.0 0.8 5.0L0.8 5.0L3.9 5.0ZM14.3 5.2L14.3 5.2Q15 6.5 15 8.0Q15 9.5 14.3 10.8Q13.6 12.1 12.3 12.9L12.3 12.9Q12.0 13.0 11.7 13.0Q11.4 12.9 11.3 12.6L11.3 12.6Q11.1 12.4 11.2 12.1Q11.3 11.8 11.5 11.6L11.5 11.6Q12.1 11.2 12.6 10.6Q13.0 10.1 13.3 9.4Q13.5 8.7 13.5 8.0Q13.5 7.3 13.3 6.6Q13.0 5.9 12.6 5.3Q12.1 4.8 11.5 4.4L11.5 4.4Q11.3 4.2 11.2 3.9Q11.1 3.6 11.3 3.4Q11.4 3.1 11.8 3.0Q12.1 2.9 12.3 3.1L12.3 3.1Q13.6 3.9 14.3 5.2ZM10.6 5.6L10.6 5.6Q11.2 6.0 11.6 6.6Q12 7.2 12 8.0Q12 8.7 11.6 9.4Q11.2 10.0 10.6 10.4L10.6 10.4Q10.3 10.5 10.0 10.5Q9.7 10.4 9.5 10.1Q9.4 9.8 9.5 9.5Q9.6 9.2 9.8 9.1L9.8 9.1Q10.5 8.7 10.5 8.0Q10.5 7.3 9.8 6.9L9.8 6.9Q9.6 6.7 9.5 6.4Q9.4 6.1 9.5 5.9Q9.7 5.6 10.0 5.5Q10.3 5.4 10.6 5.6Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
.main-nowPlayingBar-extraControls button[aria-label="Full screen"] path {
|
|
||||||
d: path(
|
|
||||||
"M15.5 0.7L15.5 0.7Q15.5 0.7 15.5 0.7Q15.5 0.8 15.5 0.8L15.5 0.8Q15.5 0.8 15.5 0.9L15.5 0.9L15.5 3.9Q15.5 4.1 15.4 4.2Q15.2 4.4 15 4.4Q14.8 4.4 14.6 4.2Q14.5 4.1 14.5 3.9L14.5 3.9L14.5 2.1L11.9 4.7Q11.7 4.9 11.5 4.9Q11.3 4.9 11.1 4.7L11.1 4.7Q11 4.6 11 4.4Q11 4.2 11.1 4.0L11.1 4.0L13.8 1.4L12 1.4Q11.8 1.4 11.6 1.2Q11.5 1.1 11.5 0.9Q11.5 0.7 11.6 0.5Q11.8 0.4 12 0.4L12 0.4L15 0.4Q15.1 0.4 15.1 0.4L15.1 0.4Q15.1 0.4 15.1 0.4Q15.1 0.4 15.1 0.4L15.1 0.4Q15.2 0.4 15.2 0.4L15.2 0.4L15.2 0.4Q15.2 0.4 15.3 0.4Q15.3 0.5 15.3 0.5L15.3 0.5Q15.4 0.5 15.4 0.6L15.4 0.6Q15.4 0.6 15.4 0.6Q15.4 0.6 15.4 0.6L15.4 0.6Q15.5 0.7 15.5 0.7L15.5 0.7Q15.5 0.7 15.5 0.7ZM1.5 13.7L4.1 11.0Q4.3 10.9 4.5 10.9Q4.7 10.9 4.9 11.0L4.9 11.0Q5 11.2 5 11.4Q5 11.6 4.9 11.7L4.9 11.7L2.2 14.4L4 14.4Q4.2 14.4 4.4 14.5Q4.5 14.7 4.5 14.9Q4.5 15.1 4.4 15.2Q4.2 15.4 4 15.4L4 15.4L1 15.4Q0.9 15.4 0.9 15.4L0.9 15.4Q0.9 15.4 0.9 15.3Q0.9 15.3 0.9 15.3L0.9 15.3Q0.8 15.3 0.8 15.3L0.8 15.3L0.8 15.3Q0.8 15.3 0.7 15.3Q0.7 15.3 0.7 15.3L0.7 15.3Q0.6 15.2 0.6 15.1L0.6 15.1Q0.6 15.1 0.6 15.1Q0.6 15.1 0.6 15.1L0.6 15.1L0.5 15.1Q0.5 15.0 0.5 15.0L0.5 15.0Q0.5 15 0.5 15.0Q0.5 15.0 0.5 15.0L0.5 15.0Q0.5 14.9 0.5 14.9L0.5 14.9L0.5 11.9Q0.5 11.7 0.6 11.5Q0.8 11.4 1 11.4Q1.2 11.4 1.4 11.5Q1.5 11.7 1.5 11.9L1.5 11.9L1.5 13.7Z"
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ylx */
|
|
||||||
.Root {
|
|
||||||
--panel-gap: 0 !important;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.spotify__container--is-desktop .Root__top-container {
|
|
||||||
padding-top: 32px !important;
|
|
||||||
}
|
|
||||||
.main-nowPlayingBar-nowPlayingBar {
|
|
||||||
height: 90px;
|
|
||||||
padding: 0 16px !important;
|
|
||||||
}
|
|
||||||
[dir="ltr"] .main-coverSlotCollapsed-navAltContainer {
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-navItem:has(.main-yourLibraryX-navLinkActive) {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-navLinkActive {
|
|
||||||
color: var(--spice-sidebar) !important;
|
|
||||||
background-color: var(--spice-sec-card);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 24px 12px;
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-navLinkActive .home-active-icon,
|
|
||||||
.main-yourLibraryX-navLinkActive .search-active-icon {
|
|
||||||
color: var(--spice-sidebar) !important;
|
|
||||||
}
|
|
||||||
.link-subtle {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
.spotify__container--is-desktop .Root__top-container {
|
|
||||||
padding-top: calc(24px + var(--panel-gap)-3);
|
|
||||||
background-color: var(--spice-main);
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-navItems {
|
|
||||||
background-color: var(--spice-sidebar);
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-libraryRootlist {
|
|
||||||
background-color: var(--spice-sidebar);
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-header {
|
|
||||||
background-color: var(--spice-sidebar);
|
|
||||||
}
|
|
||||||
.main-yourLibraryX-filterArea {
|
|
||||||
background-color: var(--spice-sidebar);
|
|
||||||
}
|
|
||||||
.LayoutResizer__inline-end {
|
|
||||||
inset-inline-end: 8px;
|
|
||||||
}
|
|
||||||
.LayoutResizer__inline-start {
|
|
||||||
inset-inline-start: 8px;
|
|
||||||
}
|
|
||||||
.LayoutResizer__resize-bar {
|
|
||||||
width: 8px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
# SharkBlue
|
|
||||||
|
|
||||||
## Screenshots
|
|
||||||
|
|
||||||
|
|
||||||
## More
|
|
||||||
Author: https://github.com/MrBiscuit921
|
|
||||||
Inspiration: BurntSienna, https://github.com/pjaspinski
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
[Base]
|
|
||||||
button = 0573ff
|
|
||||||
sidebar = 242629
|
|
||||||
player = 242629
|
|
||||||
main = 303336
|
|
||||||
button-active = 0573ff
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 450 KiB |
|
|
@ -1,342 +0,0 @@
|
||||||
/* Round Now Playing Bar */
|
|
||||||
:root {
|
|
||||||
--border-radius-1: 8px;
|
|
||||||
/* Play Bar */
|
|
||||||
--margin-bottom-now-playing-bar: 0.5rem;
|
|
||||||
--now-playing-bar-height: 5.625rem;
|
|
||||||
--padding-now-playing-bar: 0.25rem;
|
|
||||||
--border-radius-now-playing-bar: 0.5rem;
|
|
||||||
}
|
|
||||||
.Root__now-playing-bar,
|
|
||||||
.Root__now-playing-bar footer {
|
|
||||||
border-radius: var(--border-radius-1) !important;
|
|
||||||
}
|
|
||||||
#main::after {
|
|
||||||
content: ""; /* Empty content */
|
|
||||||
position: fixed; /* Fix element to viewport */
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 999; /* Position above all other content */
|
|
||||||
-webkit-backdrop-filter: brightness(
|
|
||||||
2.12
|
|
||||||
); /* Apply brightness filter to background */
|
|
||||||
backdrop-filter: brightness(2.12); /* Cross-browser brightness filter */
|
|
||||||
/* Page zoom control */
|
|
||||||
/* Adjust width and height based on zoom level */
|
|
||||||
width: 135px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Page titles */
|
|
||||||
h1 {
|
|
||||||
font-weight: 700 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Song name in player */
|
|
||||||
.main-nowPlayingWidget-nowPlaying .main-trackInfo-name {
|
|
||||||
overflow: unset;
|
|
||||||
font-size: 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Artist name in player */
|
|
||||||
.main-nowPlayingWidget-nowPlaying .main-trackInfo-artists {
|
|
||||||
overflow: unset;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-type-finale {
|
|
||||||
line-height: 17px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Icons */
|
|
||||||
.main-trackList-rowPlayPauseIcon {
|
|
||||||
transform: scale(1.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-downloadButton-button svg {
|
|
||||||
height: 32px;
|
|
||||||
width: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Progress and remaining time */
|
|
||||||
.main-playbackBarRemainingTime-container,
|
|
||||||
.playback-bar__progress-time-elapsed,
|
|
||||||
.playback-bar__progress-time {
|
|
||||||
font-size: 15px;
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Player play button */
|
|
||||||
.main-playPauseButton-button {
|
|
||||||
background-color: unset;
|
|
||||||
color: var(--spice-subtext);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-playPauseButton-button svg {
|
|
||||||
height: 28px;
|
|
||||||
width: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Progress bar */
|
|
||||||
.progress-bar {
|
|
||||||
--fg-color: var(--spice-button);
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar__bg,
|
|
||||||
.progress-bar__fg,
|
|
||||||
.progress-bar__fg_wrapper {
|
|
||||||
height: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar-wrapper {
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra controls */
|
|
||||||
.control-button::before {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ExtraControls svg {
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Removing gradients */
|
|
||||||
.main-entityHeader-backgroundColor,
|
|
||||||
.main-actionBarBackground-background {
|
|
||||||
background-color: unset !important;
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cover shadow */
|
|
||||||
.main-entityHeader-shadow {
|
|
||||||
-webkit-box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5);
|
|
||||||
box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Top bar */
|
|
||||||
.main-topBar-background {
|
|
||||||
background-color: #3a3d42 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Playing icon */
|
|
||||||
.main-trackList-playingIcon {
|
|
||||||
filter: saturate(0%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Playlist like button */
|
|
||||||
.main-actionBar-ActionBarRow .main-addButton-button .Svg-ulyrgf-0 {
|
|
||||||
height: unset;
|
|
||||||
width: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Order button */
|
|
||||||
.x-sortBox-sortDropdown {
|
|
||||||
margin-top: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sidebar playlists menu */
|
|
||||||
.main-rootlist-rootlistDividerGradient {
|
|
||||||
background: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-rootlist-rootlistDivider {
|
|
||||||
background-color: var(--spice-button);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Search box */
|
|
||||||
.x-searchInput-searchInputInput {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Aritsts names */
|
|
||||||
.main-type-mesto {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Songs names */
|
|
||||||
.main-type-ballad {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cards descriptions */
|
|
||||||
.main-cardSubHeader-root {
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ad title */
|
|
||||||
.desktoproutes-homepage-takeover-ad-hptoNativeOriginal-header {
|
|
||||||
font-weight: 700 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Friends names */
|
|
||||||
.main-buddyFeed-username a {
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Friends songs and artists */
|
|
||||||
.main-buddyFeed-artistAndTrackName a,
|
|
||||||
.main-buddyFeed-playbackContextLink span {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cover height */
|
|
||||||
.main-coverSlotExpanded-container {
|
|
||||||
height: var(--nav-bar-width) + 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scrollbars */
|
|
||||||
.os-scrollbar-handle {
|
|
||||||
background: var(--spice-button) !important;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Make Scrollbar look better */
|
|
||||||
|
|
||||||
.os-theme-spotify.os-host-transition
|
|
||||||
> .os-scrollbar-vertical
|
|
||||||
> .os-scrollbar-track
|
|
||||||
> .os-scrollbar-handle {
|
|
||||||
border-radius: 8px;
|
|
||||||
width: 4px;
|
|
||||||
background-color: var(--spice-button-disabled);
|
|
||||||
}
|
|
||||||
.os-theme-spotify.os-host-transition
|
|
||||||
> .os-scrollbar-vertical
|
|
||||||
> .os-scrollbar-track {
|
|
||||||
width: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Making index column wider so that lighter background that
|
|
||||||
highlights selected song contains multi-digit song numbers */
|
|
||||||
/* It looks good up to 4 digits, I figured that no one has playlists with more music than that ;) */
|
|
||||||
.main-trackList-trackList.main-trackList-indexable
|
|
||||||
.main-trackList-trackListRowGrid {
|
|
||||||
grid-template-columns: [index] 48px [first] 6fr [var1] 4fr [var2] 3fr [last] minmax(
|
|
||||||
120px,
|
|
||||||
1fr
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Text boxes in settings */
|
|
||||||
.main-dropDown-dropDown {
|
|
||||||
background-color: var(--spice-button-disabled);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Facebook button */
|
|
||||||
.x-settings-facebookButton {
|
|
||||||
background-color: unset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Playlist play button color */
|
|
||||||
.encore-dark-theme .encore-bright-accent-set,
|
|
||||||
.encore-dark-theme .encore-bright-accent-set:hover {
|
|
||||||
--background-base: var(--spice-button-active);
|
|
||||||
--background-highlight: var(--spice-play-hover);
|
|
||||||
--background-press: var(--spice-play-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Player bar */
|
|
||||||
|
|
||||||
.main-nowPlayingBar-container {
|
|
||||||
justify-content: center;
|
|
||||||
height: var(--now-playing-bar-height);
|
|
||||||
width: 100%;
|
|
||||||
border-radius: var(--border-radius-now-playing-bar);
|
|
||||||
padding: var(--padding-now-playing-bar);
|
|
||||||
bottom: var(--margin-bottom-now-playing-bar);
|
|
||||||
border: var(--default-border-thickness) solid var(--shadow-rgb);
|
|
||||||
background-color: rgba(var(--spice-rgb-main));
|
|
||||||
backdrop-filter: blur(var(--blur-radius)) saturate(0.5) brightness(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-nowPlayingBar-container .GlueDropTarget,
|
|
||||||
.main-coverSlotCollapsed-container {
|
|
||||||
max-height: 56px;
|
|
||||||
max-width: 56px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**** ROUND IMAGES ****/
|
|
||||||
|
|
||||||
/* Expanded Cover Art Image (+ position fix) */
|
|
||||||
.main-navBar-navBar > :nth-child(3) {
|
|
||||||
margin: 0 0 0 1px;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Collapsed Cover Art Image */
|
|
||||||
.cover-art-image,
|
|
||||||
.artist-artistOverview-sideBlock
|
|
||||||
> div
|
|
||||||
> section
|
|
||||||
> div:nth-child(3)
|
|
||||||
> section:nth-child(2)
|
|
||||||
> div
|
|
||||||
> img,
|
|
||||||
.view-homeShortcutsGrid-image {
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Playlist Header
|
|
||||||
Search Category Card Image
|
|
||||||
List Cards
|
|
||||||
Local Files Card
|
|
||||||
Placeholder Profile Card
|
|
||||||
Artist Overview Side Block
|
|
||||||
*/
|
|
||||||
.main-entityHeader-shadow,
|
|
||||||
.x-categoryCard-image,
|
|
||||||
.x-entityImage-circle,
|
|
||||||
.main-cardImage-image,
|
|
||||||
.main-cardImage-imageWrapper,
|
|
||||||
.main-entityHeader-imagePlaceholder > div,
|
|
||||||
.artist-artistOverview-sideBlock > div > section {
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Circled Artist + Profile Cards (force) */
|
|
||||||
.main-cardImage-circular,
|
|
||||||
.main-entityHeader-imagePlaceholder,
|
|
||||||
.main-entityHeader-circle {
|
|
||||||
border-radius: 50% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Track List Image */
|
|
||||||
.main-trackList-rowImage {
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Home gradient */
|
|
||||||
.main-home-homeHeader {
|
|
||||||
background-color: rgba(var(--spice-rgb-button)) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Volume bar margins */
|
|
||||||
.volume-bar .progress-bar {
|
|
||||||
margin: 0 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.volume-bar .playback-progressbar {
|
|
||||||
width: 70%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.volume-bar {
|
|
||||||
flex: 0 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ellipsis-one-line.main-type-mesto {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Removal of empty space above playlist cover and title on narrow viewports */
|
|
||||||
.main-entityHeader-container.main-entityHeader-nonWrapped {
|
|
||||||
min-height: 325px;
|
|
||||||
height: 15vh;
|
|
||||||
}
|
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
# Sleek
|
|
||||||
|
|
||||||
### BladeRunner
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Cherry
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Coral
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Deep
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Deeper
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Greener
|
|
||||||
|
|
||||||
|
|
||||||
### Elementary
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Futura
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Nord
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Psycho
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### UltraBlack
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Wealthy
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Dracula
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### VantaBlack
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### RosePine
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Info
|
|
||||||
|
|
||||||
A simple, 'sleek' theme that builds upon the basic Spotify UI to create a more stylised experience. Also removes all annoyances from free version, including banner advertisements and upgrade buttons.
|
|
||||||
|
|
||||||
Created by [@harbassan](https://github.com/harbassan)
|
|
||||||
|
|
||||||
### Changing Color Schemes
|
|
||||||
|
|
||||||
Change the scheme with these commands:
|
|
||||||
|
|
||||||
```
|
|
||||||
spicetify config color_scheme <scheme name>
|
|
||||||
spicetify apply
|
|
||||||
```
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 550 KiB |
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue