mirror of
https://github.com/morpheusthewhite/spicetify-themes.git
synced 2024-11-21 18:32:45 +01:00
chore: clean
This commit is contained in:
harbassan
parent
7460a018de
commit
877147d24f
54
.github/workflows/auto-assign.yml
vendored
54
.github/workflows/auto-assign.yml
vendored
@ -1,54 +0,0 @@
|
||||
name: Theme Assigner
|
||||
on:
|
||||
issues:
|
||||
types: [opened, edited]
|
||||
pull_request:
|
||||
types: [opened, edited]
|
||||
|
||||
jobs:
|
||||
assign:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/github-script@v7
|
||||
with:
|
||||
github-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
script: |
|
||||
const keywordsToAssigneesMap = {
|
||||
BurntSienna: ["pjaspinski"],
|
||||
Default: ["Blacksuan19"],
|
||||
Dreary: ["CharlieS1103"],
|
||||
Dribbblish: ["khanhas"],
|
||||
Glaze: ["CharlieS1103"],
|
||||
Onepunch: ["okarin001"],
|
||||
Sleek: ["harbassan"],
|
||||
Turntable: ["grasonchan"],
|
||||
Ziro: ["schnensch0"],
|
||||
Flow: ["ian-Liaozy", "Ruixi-Zhang"],
|
||||
Matte: ["darkthemer"],
|
||||
Blossom: ["Robatortas"],
|
||||
Nightlight: ["iTenerai"],
|
||||
};
|
||||
|
||||
const issue = await github.rest.issues.get({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
issue_number: context.issue.number,
|
||||
});
|
||||
|
||||
const title = issue.data.title;
|
||||
const body = issue.data.body;
|
||||
|
||||
const assignees = [];
|
||||
|
||||
for (const [keyword, assignee] of Object.entries(keywordsToAssigneesMap)) {
|
||||
if (title.match(new RegExp(`\\b${keyword}\\b`, "i")) || body.match(new RegExp(`\\b${keyword}\\b`, "i"))) {
|
||||
assignees.push(...assignee);
|
||||
}
|
||||
}
|
||||
|
||||
await github.rest.issues.addAssignees({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
issue_number: context.issue.number,
|
||||
assignees: assignees,
|
||||
});
|
||||
@ -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 |
422
Blossom/user.css
422
Blossom/user.css
@ -1,422 +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;
|
||||
}
|
||||
|
||||
/* 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,13 +0,0 @@
|
||||
# Default
|
||||
|
||||
Default look of Spotify with different color schemes.
|
||||
|
||||
## Screenshot
|
||||
|
||||
|
||||
|
||||
## Info
|
||||
|
||||
### Ocean
|
||||
|
||||
Part of material ocean themes, [checkout here](https://github.com/material-ocean) for the same theme for different applications. By @Blacksuan19
|
||||
@ -1,16 +0,0 @@
|
||||
[Ocean]
|
||||
text = FFFFFF
|
||||
subtext = F1F1F1
|
||||
main = 0F111A
|
||||
sidebar = 0F111A
|
||||
player = 0F111A
|
||||
card = 00010A
|
||||
shadow = 0F111A
|
||||
selected-row = F1F1F1
|
||||
button = FF4151
|
||||
button-active = F1F1F1
|
||||
button-disabled = 434C5E
|
||||
tab-active = FF4151
|
||||
notification = 00010A
|
||||
notification-error = FF4151
|
||||
misc = 00010A
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 226 KiB |
@ -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
|
||||
|
||||
BIN
Dreary/bib.png
BIN
Dreary/bib.png
Binary file not shown.
|
Before Width: | Height: | Size: 892 KiB |
154
Dreary/color.ini
154
Dreary/color.ini
@ -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 |
BIN
Dreary/mono.png
BIN
Dreary/mono.png
Binary file not shown.
|
Before Width: | Height: | Size: 950 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 850 KiB |
609
Dreary/user.css
609
Dreary/user.css
@ -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.0 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 = 32302f
|
||||
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.0 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,747 +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;
|
||||
}
|
||||
|
||||
.Root__top-container {
|
||||
grid-template-areas:
|
||||
"left-sidebar main-view right-sidebar"
|
||||
"left-sidebar now-playing-bar right-sidebar" !important;
|
||||
gap: 0;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.Root__now-playing-bar {
|
||||
background-color: var(--spice-player);
|
||||
border-radius: 0 0 var(--corner-radius) var(--corner-radius) !important;
|
||||
grid-area: now-playing-bar !important;
|
||||
}
|
||||
|
||||
.Root__main-view {
|
||||
border-radius: var(--corner-radius) var(--corner-radius) 0 0 !important;
|
||||
grid-area: main-view !important;
|
||||
}
|
||||
|
||||
.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 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;
|
||||
}
|
||||
.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: fit-content;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
21
Flow/LICENSE
21
Flow/LICENSE
@ -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 |
260
Flow/user.css
260
Flow/user.css
@ -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;
|
||||
}
|
||||
21
LICENSE
21
LICENSE
@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019 morpheusthewhite
|
||||
|
||||
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,95 +0,0 @@
|
||||
# Matte
|
||||
|
||||
## Screenshots
|
||||
|
||||
### Matte (Old UI)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Matte (YLX UI)
|
||||
|
||||
|
||||
|
||||
### 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
|
||||
|
||||
- Supports both Old UI and Your Library X UI
|
||||
|
||||
- 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 */
|
||||
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
|
||||
69% = 194px 45px
|
||||
76% = 177px 40.5px
|
||||
83% = 162px 37.5px
|
||||
91% = 148px 34px
|
||||
100% = 135px 31px (default)
|
||||
110% = 123px 28.5px
|
||||
*/
|
||||
width: 135px;
|
||||
height: 31px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
575
Matte/color.ini
575
Matte/color.ini
@ -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: 392 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 93 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 |
732
Matte/user.css
732
Matte/user.css
@ -1,732 +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;
|
||||
--user-widget-name-display: none; /* block | none */
|
||||
--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
|
||||
================================ */
|
||||
|
||||
.Root__top-container {
|
||||
/* rearrange grid layout */
|
||||
grid-template-areas:
|
||||
"top-bar top-bar top-bar"
|
||||
"left-sidebar main-view right-sidebar"
|
||||
"now-playing-bar now-playing-bar now-playing-bar";
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
.Root__top-bar {
|
||||
/* customize top bar colors & fixes */
|
||||
grid-area: top-bar !important;
|
||||
height: auto;
|
||||
border-bottom: var(--top-bar-border-width) solid var(--spice-topbar-border);
|
||||
}
|
||||
.Root__nav-bar {
|
||||
/* support layout of older verions */
|
||||
grid-area: left-sidebar !important;
|
||||
}
|
||||
.Root__right-sidebar {
|
||||
/* support layout of older verions */
|
||||
grid-area: right-sidebar !important;
|
||||
}
|
||||
.Root__now-playing-bar {
|
||||
/* support layout of older verions */
|
||||
grid-area: now-playing-bar !important;
|
||||
}
|
||||
.Root__top-bar:empty {
|
||||
/* make top bar the same height in lyrics page */
|
||||
padding-top: calc(
|
||||
var(--top-bar-padding-top) + 40px + var(--top-bar-padding-bottom)
|
||||
);
|
||||
}
|
||||
.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 {
|
||||
/* customize top bar padding */
|
||||
margin-top: var(--top-bar-padding-top);
|
||||
margin-right: var(--top-bar-padding-right);
|
||||
margin-bottom: var(--top-bar-padding-bottom);
|
||||
margin-left: var(--top-bar-padding-left);
|
||||
padding: unset !important;
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
.spotify__container--is-desktop.spotify__os--is-windows .main-topBar-container {
|
||||
/* remove user widget padding for windows */
|
||||
-webkit-padding-end: unset !important;
|
||||
padding-inline-end: unset !important;
|
||||
-webkit-padding-start: unset !important;
|
||||
padding-inline-start: unset !important;
|
||||
}
|
||||
.main-topBar-background {
|
||||
/* remove background upon scrolling */
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.queue-tabBar-active {
|
||||
/* customize active tab */
|
||||
border-radius: var(--tab-border-radius);
|
||||
}
|
||||
.main-userWidget-displayName,
|
||||
.main-userWidget-chevron {
|
||||
/* hide user widget name & dropdown arrow */
|
||||
display: var(--user-widget-name-display) !important;
|
||||
}
|
||||
[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,
|
||||
.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);
|
||||
}
|
||||
.main-navBar-navBar {
|
||||
/* remove nav bar top padding */
|
||||
padding-top: 0;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.main-rootlist-rootlist {
|
||||
/* remove top margin */
|
||||
margin-top: 0;
|
||||
}
|
||||
.main-rootlist-rootlistItemLink {
|
||||
/* customize nav button */
|
||||
padding: 0 16px;
|
||||
border-radius: var(--sidebar-button-border-radius);
|
||||
margin: 0 0 0 -14px;
|
||||
}
|
||||
.main-collectionLinkButton-collectionLinkButton.active {
|
||||
margin: 0 8px;
|
||||
border-radius: var(--sidebar-button-border-radius);
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
MAIN VIEW
|
||||
================================ */
|
||||
|
||||
.main-view-container__scroll-node-child-spacer {
|
||||
/* remove main view padding */
|
||||
display: none;
|
||||
}
|
||||
.main-trackList-trackListHeader,
|
||||
.search-searchCategory-SearchCategory,
|
||||
.artist-artistDiscography-topBar {
|
||||
/* fix track list header, search category, artist discography */
|
||||
top: 0 !important;
|
||||
height: auto;
|
||||
}
|
||||
.search-searchCategory-SearchCategory {
|
||||
/* fix search category */
|
||||
border-bottom: 1px solid rgba(var(--spice-rgb-selected-row), 0.1);
|
||||
padding: 16px 0;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.main-rootlist-rootlistDividerGradient {
|
||||
/* remove background gradient in home page and sidebar */
|
||||
background: unset;
|
||||
}
|
||||
|
||||
/* 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-rootlist-rootlistDivider {
|
||||
background-color: unset;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
/* scrollbar
|
||||
-------------------------------- */
|
||||
.os-theme-spotify
|
||||
> .os-scrollbar-vertical
|
||||
> .os-scrollbar-track
|
||||
> .os-scrollbar-handle {
|
||||
/* customize scrollbar */
|
||||
border-radius: var(--scrollbar-border-radius);
|
||||
width: var(--scrollbar-width);
|
||||
}
|
||||
.os-theme-spotify
|
||||
> .os-scrollbar-vertical
|
||||
> .os-scrollbar-track
|
||||
> .os-scrollbar-handle:hover {
|
||||
/* customize hovered scrollbar */
|
||||
border-radius: var(--scrollbar-border-radius);
|
||||
width: var(--scrollbar-width-hover);
|
||||
}
|
||||
.main-view-container__scroll-node > .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);
|
||||
}
|
||||
|
||||
/* 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==== */
|
||||
.Root__top-bar {
|
||||
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);
|
||||
}
|
||||
.x-filterBox-filterInput {
|
||||
background-color: rgba(var(--spice-rgb-subtext), 0.1);
|
||||
}
|
||||
::placeholder {
|
||||
color: var(--spice-topbar-subtext);
|
||||
}
|
||||
|
||||
/* ====left sidebar==== */
|
||||
.main-navBar-navBarLinkActive,
|
||||
.main-rootlist-rootlistItemLinkActive {
|
||||
background: var(--spice-link-active);
|
||||
color: var(--spice-link-active-text) !important;
|
||||
}
|
||||
.link-subtle {
|
||||
transition-property: none;
|
||||
color: var(--spice-sidebar-text);
|
||||
}
|
||||
.link-subtle:focus,
|
||||
.link-subtle:hover {
|
||||
color: var(--spice-link-hover-text);
|
||||
}
|
||||
.main-rootlist-rootlistItemLink:link,
|
||||
.main-rootlist-rootlistItemLink:visited {
|
||||
color: var(--spice-sidebar-text);
|
||||
}
|
||||
.main-rootlist-rootlistItemOverlay:hover ~ .main-rootlist-rootlistItemLink,
|
||||
.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive,
|
||||
.main-rootlist-rootlistItemLink:focus,
|
||||
.main-rootlist-rootlistItemLink:hover {
|
||||
color: var(--spice-link-hover-text);
|
||||
}
|
||||
.collection-active-icon,
|
||||
.collection-icon,
|
||||
.home-active-icon,
|
||||
.home-icon,
|
||||
.premiumSpotifyIcon,
|
||||
.search-active-icon,
|
||||
.search-icon {
|
||||
color: unset;
|
||||
}
|
||||
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,
|
||||
.main-collectionLinkButton-collectionLinkButton
|
||||
.main-collectionLinkButton-collectionLinkText,
|
||||
.main-createPlaylistButton-button {
|
||||
opacity: 1;
|
||||
}
|
||||
.main-collectionLinkButton-collectionLinkButton,
|
||||
.main-createPlaylistButton-button {
|
||||
color: var(--spice-sidebar-text);
|
||||
}
|
||||
.main-collectionLinkButton-collectionLinkButton:hover,
|
||||
.main-createPlaylistButton-button:hover {
|
||||
color: var(--spice-link-hover-text);
|
||||
}
|
||||
.main-likedSongsButton-likedSongsIcon > svg {
|
||||
color: var(--spice-sidebar);
|
||||
}
|
||||
.main-likedSongsButton-likedSongsIcon,
|
||||
.main-createPlaylistButton-createPlaylistIcon {
|
||||
background: var(--spice-sidebar-text);
|
||||
}
|
||||
.main-createPlaylistButton-button:hover
|
||||
.main-createPlaylistButton-createPlaylistIcon,
|
||||
.main-collectionLinkButton-collectionLinkButton:hover
|
||||
.main-likedSongsButton-likedSongsIcon {
|
||||
background: var(--spice-link-hover-text);
|
||||
}
|
||||
.main-collectionLinkButton-collectionLinkButton.active {
|
||||
background: var(--spice-link-active) !important;
|
||||
color: var(--spice-sidebar) !important;
|
||||
}
|
||||
.main-collectionLinkButton-collectionLinkButton.active
|
||||
.main-likedSongsButton-likedSongsIcon {
|
||||
background: var(--spice-sidebar);
|
||||
}
|
||||
.main-collectionLinkButton-collectionLinkButton.active
|
||||
.main-likedSongsButton-likedSongsIcon
|
||||
> svg {
|
||||
color: var(--spice-link-active);
|
||||
}
|
||||
.main-yourEpisodesButton-yourEpisodesIcon {
|
||||
background: var(--spice-sidebar-text);
|
||||
color: var(--spice-sidebar);
|
||||
}
|
||||
|
||||
/* ====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-color: var(--spice-main);
|
||||
}
|
||||
.main-trackList-placeholder {
|
||||
/* recolor loading tracklist */
|
||||
opacity: 0.05;
|
||||
filter: contrast(0.1);
|
||||
}
|
||||
.main-trackList-playingIcon {
|
||||
/* 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));
|
||||
}
|
||||
.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==== */
|
||||
.main-buddyFeed-friendsFeedContainer, .main-buddyFeed-container {
|
||||
background-color: var(--spice-sidebar);
|
||||
}
|
||||
.TypeElement-balladBold-textBase-type,
|
||||
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName {
|
||||
color: var(--spice-sidebar-text);
|
||||
}
|
||||
|
||||
/* ====now playing bar==== */
|
||||
.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);
|
||||
}
|
||||
.progress-bar {
|
||||
--bg-color: rgba(var(--spice-rgb-player-selected-row), 0.3);
|
||||
--fg-color: var(--spice-player-selected-row);
|
||||
}
|
||||
|
||||
/* ====misc==== */
|
||||
|
||||
/* ----scrollbar---- */
|
||||
.os-theme-spotify
|
||||
> .os-scrollbar-vertical
|
||||
> .os-scrollbar-track
|
||||
> .os-scrollbar-handle {
|
||||
background-color: var(--spice-scrollbar) !important;
|
||||
}
|
||||
.os-theme-spotify
|
||||
> .os-scrollbar-vertical
|
||||
> .os-scrollbar-track
|
||||
> .os-scrollbar-handle:hover,
|
||||
.os-theme-spotify
|
||||
> .os-scrollbar-vertical
|
||||
> .os-scrollbar-track
|
||||
> .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);
|
||||
}
|
||||
|
||||
/* ylx support
|
||||
-------------------------------- */
|
||||
.Root {
|
||||
--panel-gap: 0 !important;
|
||||
}
|
||||
.spotify__container--is-desktop .Root__top-container {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
body:has(.main-yourLibraryX-library)
|
||||
.spotify__container--is-desktop:not(.fullscreen)
|
||||
.main-topBar-background,
|
||||
body:has(.main-yourLibraryX-library) .main-topBar-topbarContent,
|
||||
body:has(.main-yourLibraryX-library) .main-topBar-contentArea {
|
||||
-webkit-app-region: drag !important;
|
||||
}
|
||||
body:has(.main-yourLibraryX-library) .x-searchInput-searchInputInput {
|
||||
height: 41px;
|
||||
background-color: var(--spice-tab-active);
|
||||
}
|
||||
body:has(.main-yourLibraryX-library) .x-searchInput-searchInputInput:hover {
|
||||
background-color: var(--spice-tab-hover);
|
||||
}
|
||||
.main-yourLibraryX-entryPoints,
|
||||
body:has(.main-yourLibraryX-library) .Root__main-view {
|
||||
border-radius: 0;
|
||||
}
|
||||
.main-yourLibraryX-entryPoints {
|
||||
background-color: var(--spice-sidebar);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.Button-md-24-buttonTertiary-iconLeading-condensed-useBrowserDefaultFocusStyle,
|
||||
.Button-md-24-buttonTertiary-iconLeading-condensed-isUsingKeyboard-useBrowserDefaultFocusStyle {
|
||||
color: var(--spice-sidebar-text);
|
||||
}
|
||||
.main-yourLibraryX-navLink,
|
||||
.main-yourLibraryX-header .main-yourLibraryX-collapseButtonWrapper {
|
||||
gap: 20px;
|
||||
}
|
||||
.Wrapper-md-leading {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
.Button-md-24-buttonTertiary-iconLeading-condensed-useBrowserDefaultFocusStyle:hover,
|
||||
.Button-md-24-buttonTertiary-iconLeading-condensed-isUsingKeyboard-useBrowserDefaultFocusStyle:hover {
|
||||
color: var(--spice-link-hover-text);
|
||||
}
|
||||
.main-yourLibraryX-isScrolled {
|
||||
-webkit-box-shadow: 0 20px 10px -10px var(--spice-sidebar);
|
||||
box-shadow: 0 20px 10px -10px var(--spice-sidebar);
|
||||
}
|
||||
body:has(.main-yourLibraryX-library) .x-searchInput-searchInputInput:hover,
|
||||
body:has(.main-yourLibraryX-library) .x-searchInput-searchInputInput:focus,
|
||||
.x-entityImage-imageContainer {
|
||||
box-shadow: none;
|
||||
}
|
||||
body:has(.main-yourLibraryX-library) .x-searchInput-searchInputInput {
|
||||
color: var(--spice-tab-active-text) !important;
|
||||
}
|
||||
body:has(.main-yourLibraryX-library) .main-nowPlayingBar-container {
|
||||
background-color: var(--spice-player);
|
||||
}
|
||||
body:has(.main-yourLibraryX-library) .main-nowPlayingBar-nowPlayingBar {
|
||||
height: var(--player-height);
|
||||
padding: var(--player-padding);
|
||||
}
|
||||
body:has(.main-yourLibraryX-library)
|
||||
[dir="ltr"]
|
||||
.main-coverSlotCollapsed-navAltContainer {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.Pns6F5g4OEwEpdmOWTLg {
|
||||
/* playlists loading placeholder */
|
||||
opacity: 0.05;
|
||||
filter: contrast(0.1);
|
||||
}
|
||||
body:has(.main-yourLibraryX-library)
|
||||
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
|
||||
background-color: var(--spice-main);
|
||||
}
|
||||
body:has(.main-yourLibraryX-library)
|
||||
.artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled {
|
||||
border-bottom: 1px solid rgba(var(--spice-rgb-selected-row), 0.1);
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -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
Onepunch/.gitignore
vendored
1
Onepunch/.gitignore
vendored
@ -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 |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user