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