use new XDG profile
this might be subject to change, due to exessive problems still needing fixes
This commit is contained in:
@@ -1,436 +0,0 @@
|
||||
[Wealthy]
|
||||
; Green on dark grey background
|
||||
text = 8bc34a
|
||||
subtext = b4b4b4
|
||||
nav-active-text = 202020
|
||||
main = 202020
|
||||
sidebar = 202020
|
||||
player = 242424
|
||||
card = 242424
|
||||
shadow = 000000
|
||||
main-secondary = 171717
|
||||
button = 8bc34a
|
||||
button-secondary = 6a913d
|
||||
button-active = 98da4b
|
||||
button-disabled = 353535
|
||||
nav-active = 8bc34a
|
||||
play-button = 8bc34a
|
||||
tab-active = 171717
|
||||
notification = 242424
|
||||
notification-error = 242424
|
||||
playback-bar = 8bc34a
|
||||
misc = FFFFFF
|
||||
|
||||
[Cherry]
|
||||
; Pink on dark blue background
|
||||
text = d98ba1
|
||||
subtext = d7d7d7
|
||||
nav-active-text = 131c26
|
||||
main = 131c26
|
||||
sidebar = 131c26
|
||||
player = 131c26
|
||||
card = 131c26
|
||||
shadow = 0e0e13
|
||||
main-secondary = 09111b
|
||||
button = d98ba1
|
||||
button-secondary = d98ba1
|
||||
button-active = ff84ac
|
||||
button-disabled = 192531
|
||||
nav-active = ff84ac
|
||||
play-button = d98ba1
|
||||
tab-active = 09111b
|
||||
notification = 192531
|
||||
notification-error = 192531
|
||||
playback-bar = d98ba1
|
||||
misc = FFFFFF
|
||||
|
||||
[Coral]
|
||||
; Salmon on dark blue background
|
||||
text = f88379
|
||||
subtext = d7d7d7
|
||||
nav-active-text = 131c26
|
||||
main = 131c26
|
||||
sidebar = 131c26
|
||||
player = 131c26
|
||||
card = 131c26
|
||||
shadow = 0e0e13
|
||||
main-secondary = 09111b
|
||||
button = f88379
|
||||
button-secondary = f88379
|
||||
button-active = fb958b
|
||||
button-disabled = 192531
|
||||
nav-active = fb958b
|
||||
play-button = f88379
|
||||
tab-active = 09111b
|
||||
notification = 192531
|
||||
notification-error = 192531
|
||||
playback-bar = f88379
|
||||
misc = FFFFFF
|
||||
|
||||
[Deep]
|
||||
; White on dark blue background
|
||||
text = ffffff
|
||||
subtext = ffffff
|
||||
nav-active-text = ffffff
|
||||
main = 020816
|
||||
sidebar = 051024
|
||||
player = 030b1e
|
||||
card = 0a1527
|
||||
shadow = 000000
|
||||
main-secondary = 06142d
|
||||
button = 1464b5
|
||||
button-secondary = ffffff
|
||||
button-active = 4a99e9
|
||||
button-disabled = 21282f
|
||||
nav-active = 37b778
|
||||
play-button = 37b778
|
||||
tab-active = 0a1527
|
||||
notification = 051024
|
||||
notification-error = 051024
|
||||
playback-bar = 37b778
|
||||
misc = FFFFFF
|
||||
|
||||
[Greener]
|
||||
; White on dark and green background
|
||||
text = ffffff
|
||||
subtext = ffffff
|
||||
nav-active-text = ffffff
|
||||
main = 020816
|
||||
sidebar = 020816
|
||||
player = 020816
|
||||
card = 020816
|
||||
shadow = 000000
|
||||
main-secondary = 216d48
|
||||
button = 37b778
|
||||
button-secondary = ffffff
|
||||
button-active = 37b778
|
||||
button-disabled = 21282f
|
||||
nav-active = 37b778
|
||||
play-button = 37b778
|
||||
tab-active = 2c9260
|
||||
notification = 051024
|
||||
notification-error = 051024
|
||||
playback-bar = 37b778
|
||||
misc = FFFFFF
|
||||
|
||||
[Deeper]
|
||||
; Light blue on dark background
|
||||
text = 4f9a87
|
||||
subtext = 4f9a87
|
||||
nav-active-text = 4f9a87
|
||||
main = 040614
|
||||
sidebar = 0F111A
|
||||
player = 0F111A
|
||||
card = 0C1C19
|
||||
shadow = 000000
|
||||
main-secondary = 131520
|
||||
button = 4f9a87
|
||||
button-secondary = 4f9a87
|
||||
button-active = 4a99e9
|
||||
button-disabled = 0C1C19
|
||||
nav-active = 040614
|
||||
play-button = 4f9a87
|
||||
tab-active = 0a1527
|
||||
notification = 051024
|
||||
notification-error = 051024
|
||||
playback-bar = 4f9a87
|
||||
misc = FFFFFF
|
||||
|
||||
[Psycho]
|
||||
; Red on dark grey background
|
||||
text = c20000
|
||||
subtext = ffffff
|
||||
nav-active-text = 101010
|
||||
main = 101010
|
||||
sidebar = 171717
|
||||
player = 171717
|
||||
card = 171717
|
||||
shadow = 000000
|
||||
main-secondary = 1f1f1f
|
||||
button = c20000
|
||||
button-secondary = a20606
|
||||
button-active = c20000
|
||||
button-disabled = 404040
|
||||
nav-active = 9f0909
|
||||
play-button = c20000
|
||||
tab-active = 171717
|
||||
notification = 5e0000
|
||||
notification-error = 5e0000
|
||||
playback-bar = c20000
|
||||
misc = FFFFFF
|
||||
|
||||
[UltraBlack]
|
||||
; White on black background
|
||||
text = FFFFFF
|
||||
subtext = DEDEDE
|
||||
nav-active-text = 000000
|
||||
main = 000000
|
||||
sidebar = 000000
|
||||
player = 000000
|
||||
card = 000000
|
||||
shadow = 000000
|
||||
main-secondary = 292929
|
||||
button = 1DB954
|
||||
button-secondary = DEDEDE
|
||||
button-active = 1DB954
|
||||
button-disabled = 2f2f2f
|
||||
nav-active = DEDEDE
|
||||
play-button = DEDEDE
|
||||
tab-active = 292929
|
||||
notification = 292929
|
||||
notification-error = 292929
|
||||
playback-bar = DEDEDE
|
||||
misc = FFFFFF
|
||||
|
||||
[Nord]
|
||||
; Light grey on blue background
|
||||
text = D8DEE9
|
||||
subtext = E5E9F0
|
||||
nav-active-text = D8DEE9
|
||||
main = 2E3440
|
||||
sidebar = 2E3440
|
||||
player = 2E3440
|
||||
card = 2E3440
|
||||
shadow = 1d2128
|
||||
main-secondary = 434c5e
|
||||
button = 5E81AC
|
||||
button-secondary = D8DEE9
|
||||
button-active = 81A1C1
|
||||
button-disabled = 434C5E
|
||||
nav-active = 4c566a
|
||||
play-button = 5E81AC
|
||||
tab-active = 3b4252
|
||||
notification = 3b4252
|
||||
notification-error = 3b4252
|
||||
playback-bar = DEDEDE
|
||||
misc = FFFFFF
|
||||
|
||||
[Futura]
|
||||
; Cyan on dark background
|
||||
text = 34ad7e
|
||||
subtext = DEDEDE
|
||||
nav-active-text = 2E2837
|
||||
main = 2E2837
|
||||
sidebar = 2E2837
|
||||
player = 2E2837
|
||||
card = 2E2837
|
||||
shadow = 000000
|
||||
main-secondary = 51485b
|
||||
button = 34ad7e
|
||||
button-secondary = 34ad7e
|
||||
button-active = 00bf76
|
||||
button-disabled = 3f3c45
|
||||
nav-active = 34ad7e
|
||||
play-button = 34ad7e
|
||||
tab-active = 51485b
|
||||
notification = 51485b
|
||||
notification-error = 51485b
|
||||
playback-bar = 34ad7e
|
||||
misc = FFFFFF
|
||||
|
||||
[Elementary]
|
||||
; Purple and pink on dark background
|
||||
text = c59dff
|
||||
subtext = dedede
|
||||
nav-active-text = 1d1821
|
||||
main = 1f1f29
|
||||
sidebar = 1d1821
|
||||
player = 1d1821
|
||||
card = 2E2837
|
||||
shadow = 000000
|
||||
main-secondary = 1d1821
|
||||
button = d4516f
|
||||
button-secondary = c59dff
|
||||
button-active = f16d8c
|
||||
button-disabled = 2E303E
|
||||
nav-active = d4516f
|
||||
play-button = d4516f
|
||||
tab-active = 1d1821
|
||||
notification = 2E2837
|
||||
notification-error = 2E2837
|
||||
playback-bar = c59dff
|
||||
misc = FFFFFF
|
||||
|
||||
[BladeRunner]
|
||||
; Yellow, pink and blue on dark background
|
||||
text = dcd88c
|
||||
subtext = 9fbfb7
|
||||
nav-active-text = 1d1821
|
||||
main = 181b1e
|
||||
sidebar = 181b1e
|
||||
player = 181b1e
|
||||
card = 17191d
|
||||
shadow = 000000
|
||||
main-secondary = 0b0d0e
|
||||
button = f6867c
|
||||
button-secondary = dcd88c
|
||||
button-active = f6867c
|
||||
button-disabled = 242a2e
|
||||
nav-active = f6867c
|
||||
play-button = f6867c
|
||||
tab-active = 131417
|
||||
notification = 131417
|
||||
notification-error = 131417
|
||||
playback-bar = dcd88c
|
||||
misc = FFFFFF
|
||||
|
||||
[Dracula]
|
||||
; https://draculatheme.com/contribute
|
||||
text = 50fa7b
|
||||
subtext = bd93f9
|
||||
nav-active-text = 282a36
|
||||
main = 282a36
|
||||
sidebar = 282a36
|
||||
player = 282a36
|
||||
card = 282a36
|
||||
shadow = 000000
|
||||
main-secondary = 1c1e26
|
||||
button = 50fa7b
|
||||
button-secondary = ff79c6
|
||||
button-active = 00bf76
|
||||
button-disabled = 3f3c45
|
||||
nav-active = 50fa7b
|
||||
play-button = 50fa7b
|
||||
tab-active = 1c1e26
|
||||
notification = 1c1e26
|
||||
notification-error = 1c1e26
|
||||
playback-bar = 50fa7b
|
||||
misc = FFFFFF
|
||||
|
||||
[VantaBlack]
|
||||
; Gray on black background
|
||||
text = 666666
|
||||
subtext = 666666
|
||||
nav-active-text = 666666
|
||||
main = 000000
|
||||
sidebar = 000000
|
||||
player = 000000
|
||||
card = 000000
|
||||
shadow = 333333
|
||||
main-secondary = 000000
|
||||
button = 000000
|
||||
button-secondary = 000000
|
||||
button-active = 333333
|
||||
button-disabled = 000000
|
||||
nav-active = 333333
|
||||
play-button = 000000
|
||||
tab-active = 333333
|
||||
notification = 000000
|
||||
notification-error = 000000
|
||||
playback-bar = 000000
|
||||
misc = 000000
|
||||
|
||||
[RosePine]
|
||||
; https://rosepinetheme.com/palette
|
||||
text = e0def4
|
||||
subtext = 908caa
|
||||
nav-active-text = ebbcba
|
||||
main = 191724
|
||||
sidebar = 191724
|
||||
player = 191724
|
||||
card = 1f1d2e
|
||||
shadow = 191724
|
||||
main-secondary = 1f1d2e
|
||||
button = ebbcba
|
||||
button-secondary = 6e6a86
|
||||
button-active = ebbcba
|
||||
button-disabled = 26233a
|
||||
nav-active = 1f1d2e
|
||||
play-button = ebbcba
|
||||
tab-active = 1f1d2e
|
||||
notification = 26233a
|
||||
notification-error = eb6f92
|
||||
playback-bar = 6e6a86
|
||||
misc = FFFFFF
|
||||
|
||||
[Eldritch]
|
||||
; https://github.com/eldritch-theme/eldritch
|
||||
text = 37f499
|
||||
subtext = 04d1f9
|
||||
nav-active-text = 323449
|
||||
main = 212337
|
||||
sidebar = 212337
|
||||
player = 212337
|
||||
card = 212337
|
||||
shadow = 212337
|
||||
main-secondary = 323449
|
||||
button = 37f499
|
||||
button-secondary = 04d1f9
|
||||
button-active = 37f499
|
||||
button-disabled = 323449
|
||||
nav-active = 37f499
|
||||
play-button = 37f499
|
||||
tab-active = a48cf2
|
||||
notification = 212337
|
||||
notification-error = 212337
|
||||
playback-bar = 37f499
|
||||
misc = ebfafa
|
||||
|
||||
[Catppuccin]
|
||||
; https://catppuccin.com/palette
|
||||
text = cba6f7
|
||||
subtext = 7c7f93
|
||||
nav-active-text = fab387
|
||||
main = 11111b
|
||||
sidebar = 11111b
|
||||
player = 11111b
|
||||
card = 1e1e2e
|
||||
shadow = 11111b
|
||||
main-secondary = 1e1e2e
|
||||
button = a6e3a1
|
||||
button-secondary = 74c7ec
|
||||
button-active = f9e2af
|
||||
button-disabled = 181825
|
||||
nav-active = 11111b
|
||||
play-button = ca9ee6
|
||||
tab-active = 45475a
|
||||
notification = 11111b
|
||||
notification-error = 11111b
|
||||
playback-bar = dc8a78
|
||||
misc = f4dbd6
|
||||
|
||||
[AyuDark]
|
||||
; https://github.com/ayu-theme/ayu-colors
|
||||
text = bfbdb6
|
||||
subtext = 565b66
|
||||
nav-active-text = e6b450
|
||||
main = 0b0e14
|
||||
sidebar = 0b0e14
|
||||
player = 0b0e14
|
||||
card = 0b0e14
|
||||
shadow = 000000
|
||||
main-secondary = 0b0e14
|
||||
button = 475266
|
||||
button-secondary = 74c7ec
|
||||
button-active = e6b450
|
||||
button-disabled = 181825
|
||||
nav-active = 0d1017
|
||||
play-button = e6b450
|
||||
tab-active = 0b0e14
|
||||
notification = 0b0e14
|
||||
notification-error = 0b0e14
|
||||
playback-bar = e6b450
|
||||
misc = f4dbd6
|
||||
|
||||
|
||||
; 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
|
||||
; nav-active-text = text in main buttons in sidebar when active
|
||||
; main = main bg
|
||||
; main-secondary = bg color of selected song rows, bg color of artist/track cards
|
||||
; sidebar = sidebar bg
|
||||
; player = player bg
|
||||
; card = popup-card bg
|
||||
; shadow = all shadows
|
||||
; button = playlist buttons bg in sidebar, drop-down menus, now playing song, like button
|
||||
; button-secondary = download and options button
|
||||
; button-active = hover on song selected
|
||||
; button-disabled = seekbar bg, volume bar bg, scrollbar
|
||||
; nav-active = sidebar buttons bg
|
||||
; play-button = color of main play button in main field
|
||||
; tab-active = button bg in main field (playlists, podcasts, artists, albums)
|
||||
; notification = notification ('Added to liked songs' etc.)
|
||||
; playback-bar = seekbar fg, volume bar fg, main play/pause button
|
||||
; misc = miscellaneous
|
||||
@@ -1,725 +0,0 @@
|
||||
:root {
|
||||
--spice-main-elevated: var(--spice-main);
|
||||
--spice-highlight: var(--spice-main-secondary);
|
||||
--spice-highlight-elevated: var(--spice-main-secondary);
|
||||
}
|
||||
/*
|
||||
-------------
|
||||
TOPBAR
|
||||
-------------
|
||||
*/
|
||||
/* unset colors of history buttons */
|
||||
.main-topBar-historyButtons .main-topBar-button {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
/* change appearance of icons on search tab input */
|
||||
.x-searchInput-searchInputSearchIcon svg {
|
||||
color: var(--spice-text);
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.x-searchInput-searchInputClearButton svg {
|
||||
color: var(--spice-text);
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
/* topbar navigation items*/
|
||||
.main-topBar-topbarContentWrapper a {
|
||||
transition-duration: 0.3s;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* smooth topbar background colour */
|
||||
.main-topBar-background {
|
||||
background-image: linear-gradient(var(--spice-main) 5%, 75%, transparent);
|
||||
background-color: unset !important;
|
||||
}
|
||||
.main-topBar-overlay {
|
||||
background-color: var(--spice-main);
|
||||
}
|
||||
|
||||
/* simplify profile menu */
|
||||
.main-userWidget-displayName,
|
||||
.main-userWidget-notificationIndicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-avatar-userIcon {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.main-userWidget-box {
|
||||
color: var(--spice-subtext);
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.main-userWidget-chevron {
|
||||
display: none;
|
||||
}
|
||||
/*
|
||||
-------------
|
||||
NAVBAR
|
||||
-------------
|
||||
*/
|
||||
/* remove divider gradient */
|
||||
.main-rootlist-rootlistDividerGradient {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* change color of divider */
|
||||
.main-rootlist-rootlistDivider {
|
||||
background-color: var(--spice-sidebar);
|
||||
}
|
||||
|
||||
/* add gradient to navbar */
|
||||
.Root__nav-bar {
|
||||
background-image: linear-gradient(to bottom left, var(--spice-sidebar) 0%, var(--spice-player) 100%) !important;
|
||||
}
|
||||
|
||||
/* change color of navbar playing icon */
|
||||
[aria-label="Playing"] {
|
||||
color: var(--spice-text);
|
||||
}
|
||||
|
||||
.main-navBar-entryPoints [data-id="/add"] {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.main-createPlaylistButton-button {
|
||||
color: var(--spice-text);
|
||||
}
|
||||
|
||||
.main-createPlaylistButton-createPlaylistIcon {
|
||||
background-color: var(--spice-text);
|
||||
}
|
||||
|
||||
/* change color of navbar icons */
|
||||
.main-likedSongsButton-likedSongsIcon {
|
||||
background: var(--spice-text);
|
||||
color: var(--spice-sidebar);
|
||||
}
|
||||
|
||||
.main-yourEpisodesButton-yourEpisodesIcon {
|
||||
background: var(--spice-text);
|
||||
}
|
||||
|
||||
.main-yourEpisodesButton-yourEpisodesIcon path {
|
||||
fill: var(--spice-sidebar);
|
||||
}
|
||||
|
||||
/* remove opacity of navbar buttons */
|
||||
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,
|
||||
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText,
|
||||
.main-createPlaylistButton-button {
|
||||
opacity: unset;
|
||||
}
|
||||
|
||||
.main-collectionLinkButton-collectionLinkButton {
|
||||
color: var(--spice-subtext);
|
||||
}
|
||||
|
||||
/* change colors of active tab */
|
||||
.main-yourLibraryX-navLink {
|
||||
border-radius: 8px;
|
||||
margin: 6px 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.main-yourLibraryX-navItem {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main-navBar-navBarLinkActive,
|
||||
.main-navBar-navBarLinkActive:focus,
|
||||
.main-navBar-navBarLinkActive:hover,
|
||||
.main-collectionLinkButton-selected,
|
||||
.main-collectionLinkButton-selected svg,
|
||||
.main-yourLibraryX-navLinkActive,
|
||||
.main-yourLibraryX-navLinkActive .home-active-icon,
|
||||
.main-yourLibraryX-navLinkActive .search-active-icon {
|
||||
color: var(--spice-nav-active-text) !important;
|
||||
background-color: var(--spice-nav-active);
|
||||
}
|
||||
|
||||
/* color of navbar icons */
|
||||
.collection-icon,
|
||||
.premiumSpotifyIcon,
|
||||
.search-icon {
|
||||
color: var(--spice-subtext);
|
||||
}
|
||||
|
||||
.main-navBar-navBarLink {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.main-navBar-navBarLink:not(.main-navBar-navBarLinkActive):hover svg {
|
||||
color: var(--spice-text);
|
||||
}
|
||||
|
||||
.main-yourLibraryX-entryPoints {
|
||||
background-color: var(--spice-sidebar);
|
||||
}
|
||||
|
||||
.main-yourLibraryX-isScrolled {
|
||||
-webkit-box-shadow: 0 20px 10px -10px var(--spice-sidebar);
|
||||
box-shadow: 0 20px 10px -10px var(--spice-sidebar);
|
||||
}
|
||||
|
||||
/* traclists and playlists loading placeholder */
|
||||
.main-trackList-placeholder,
|
||||
.Pns6F5g4OEwEpdmOWTLg,
|
||||
.eldivguzYznZgQoShJbe {
|
||||
background-color: var(--background-base);
|
||||
background-blend-mode: color-dodge;
|
||||
}
|
||||
|
||||
/*
|
||||
---------------
|
||||
PLAYBACK BAR
|
||||
---------------
|
||||
*/
|
||||
/* playback progress bar moves smoothly */
|
||||
.x-progressBar-fillColor {
|
||||
transition: transform 1s linear;
|
||||
}
|
||||
|
||||
.progress-bar__slider {
|
||||
transition: left 1s linear;
|
||||
}
|
||||
|
||||
.progress-bar--isDragging .x-progressBar-fillColor, .progress-bar--isDragging .progress-bar__slider {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* round cover art when collapsed */
|
||||
.main-coverSlotCollapsed-container .cover-art-image {
|
||||
border-radius: 8px;
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
|
||||
.main-coverSlotExpandedCollapseButton-collapseButton {
|
||||
right: 10px !important;
|
||||
top: 10px !important;
|
||||
}
|
||||
|
||||
/* hide and move progress time location */
|
||||
.playback-bar__progress-time-elapsed {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
bottom: 13px;
|
||||
left: 0;
|
||||
transition-duration: 0.3s;
|
||||
background-color: rgba(var(--spice-rgb-sidebar),.5);
|
||||
box-shadow: 0 0 20px 20px rgba(var(--spice-rgb-sidebar),.5);
|
||||
border-radius: 8px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.main-playbackBarRemainingTime-container {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
bottom: 13px;
|
||||
right: 0;
|
||||
transition-duration: 0.3s;
|
||||
background-color: rgba(var(--spice-rgb-sidebar),.5);
|
||||
box-shadow: 0 0 20px 20px rgba(var(--spice-rgb-sidebar),.5);
|
||||
border-radius: 8px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* show time on hover & better visibility */
|
||||
.playback-bar:hover .playback-bar__progress-time-elapsed,
|
||||
.playback-bar:hover .main-playbackBarRemainingTime-container {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* move progress bar */
|
||||
html:not(.fullscreen) .playback-bar {
|
||||
width: 100%;
|
||||
bottom: 83px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.main-nowPlayingBar-nowPlayingBar:nth-last-child(2) .playback-bar {
|
||||
bottom: 107px;
|
||||
}
|
||||
|
||||
.player-controls__buttons {
|
||||
transform: translateY(3px);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* change progress bar color */
|
||||
.playback-bar .x-progressBar-fillColor {
|
||||
background-color: var(--spice-playback-bar);
|
||||
}
|
||||
|
||||
/* change appearance of play-button */
|
||||
.main-playPauseButton-button {
|
||||
background-color: inherit;
|
||||
color: var(--spice-play-button);
|
||||
transition-duration: 0.3s !important;
|
||||
}
|
||||
|
||||
.main-playPauseButton-button svg {
|
||||
height: 19px;
|
||||
width: 19px;
|
||||
}
|
||||
|
||||
html.fullscreen .main-playPauseButton-button svg {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.main-playPauseButton-button:focus,
|
||||
.main-playPauseButton-button:hover {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* change progress bar slider color */
|
||||
.progress-bar__slider {
|
||||
background-color: var(--spice-subtext);
|
||||
}
|
||||
|
||||
.x-progressBar-progressBarBg {
|
||||
background-color: var(--spice-button-disabled);
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
/* matching button colors */
|
||||
.main-nowPlayingBar-extraControls button {
|
||||
color: rgba(var(--spice-rgb-selected-row),.7);
|
||||
}
|
||||
/*
|
||||
---------------
|
||||
BUDDY FEED
|
||||
---------------
|
||||
*/
|
||||
/* change text color */
|
||||
.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);
|
||||
}
|
||||
|
||||
.spotify__os--is-windows .main-buddyFeed-header {
|
||||
padding-left: 0;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
/* add gradient */
|
||||
.main-buddyFeed-friendsFeedContainer {
|
||||
background-image: linear-gradient(to bottom left, var(--spice-sidebar) 0%, var(--spice-player) 100%) !important;
|
||||
}
|
||||
|
||||
/* hide buddyfeed scrollbar */
|
||||
.main-buddyFeed-scrollableArea > .os-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-avatar-avatar.BzunmwrVMyWGpopPJRt2:after {
|
||||
background: var(--spice-button);
|
||||
}
|
||||
/*
|
||||
---------------
|
||||
MAIN VIEW
|
||||
---------------
|
||||
*/
|
||||
/* hide banner ads */
|
||||
.main-leaderboardComponent-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.WiPggcPDzbwGxoxwLWFf.contentSpacing {
|
||||
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;
|
||||
}
|
||||
|
||||
/* change input box appearance */
|
||||
input {
|
||||
background-color: var(--spice-main-secondary) !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 6px 10px 6px 48px;
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
::placeholder {
|
||||
color: var(--spice-subtext) !important;
|
||||
}
|
||||
|
||||
/* remove background color from main headers */
|
||||
.main-home-homeHeader,
|
||||
.x-441-entityHeader-overlay,
|
||||
.main-actionBarBackground-background,
|
||||
.main-entityHeader-overlay,
|
||||
.main-entityHeader-backgroundColor {
|
||||
background-color: unset !important;
|
||||
background-image: unset !important;
|
||||
}
|
||||
|
||||
/* change playlist image shadow */
|
||||
.main-entityHeader-shadow {
|
||||
box-shadow: 0 5px 10px rgba(var(--spice-rgb-shadow), 0.5) !important;
|
||||
}
|
||||
|
||||
/* change playlist image border-radius */
|
||||
.main-entityHeader-image {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* recolor animated liked or heart button on click */
|
||||
#_R_G *:not([fill="none"]) {
|
||||
fill: var(--spice-button-active) !important;
|
||||
}
|
||||
#_R_G *:not([stroke="none"]) {
|
||||
stroke: var(--spice-button-active);
|
||||
}
|
||||
|
||||
/* change appearance of 'playlist' tag */
|
||||
.main-entityHeader-subtitle.main-entityHeader-small.main-entityHeader-uppercase.main-entityHeader-bold {
|
||||
border: 2px var(--spice-text) solid;
|
||||
border-radius: 8px;
|
||||
width: fit-content;
|
||||
display: inline;
|
||||
text-align: center;
|
||||
padding: 3px 7px;
|
||||
}
|
||||
|
||||
/* change appearance of 'follow' button */
|
||||
.artist-artistOverview-overview .main-actionBar-ActionBarRow > button:first-of-type {
|
||||
border-radius: 8px;
|
||||
border: 2px solid var(--spice-button);
|
||||
}
|
||||
|
||||
/* change scrollbar appearance */
|
||||
.os-theme-spotify.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
|
||||
border-radius: 4px;
|
||||
width: 6px;
|
||||
background-color: var(--spice-button-disabled);
|
||||
}
|
||||
|
||||
.os-theme-spotify.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
/* add smooth shadow under headers */
|
||||
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader,
|
||||
.artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled {
|
||||
background-color: var(--spice-main);
|
||||
border-bottom: none;
|
||||
-webkit-box-shadow: 0 0 50px 50px var(--spice-main);
|
||||
box-shadow: 0 0 50px 50px var(--spice-main);
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.search-searchCategory-SearchCategory {
|
||||
-webkit-box-shadow: 0 0 20px 20px var(--spice-main);
|
||||
box-shadow: 0 0 20px 20px var(--spice-main);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* play button */
|
||||
.main-home-home .main-playButton-PlayButton > button > span {
|
||||
inline-size: 42px;
|
||||
block-size: 42px;
|
||||
min-block-size: auto;
|
||||
}
|
||||
|
||||
.main-home-home .main-playButton-PlayButton svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.main-home-home .main-playButton-PlayButton > button > span > span {
|
||||
position: initial;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.main-actionBar-ActionBar .main-playButton-PlayButton svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.main-actionBar-ActionBar .main-playButton-PlayButton > button > span > span {
|
||||
position: initial;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
/* change text color on category cards in 'search' tab */
|
||||
a.x-categoryCard-CategoryCard,
|
||||
a.x-heroCategoryCard-HeroCategoryCard {
|
||||
color: var(--spice-subtext);
|
||||
}
|
||||
|
||||
/* recolor sub-buttons */
|
||||
.main-moreButton-button {
|
||||
color: var(--spice-button-secondary);
|
||||
}
|
||||
|
||||
.x-downloadButton-button,
|
||||
.x-contributorButton-button svg,
|
||||
.main-actionBar-ActionBarRow .main-addButton-button {
|
||||
color: var(--spice-button-secondary) !important;
|
||||
}
|
||||
|
||||
.main-entityHeader-metaDataText,
|
||||
.x-filterBox-searchIconContainer {
|
||||
color: var(--spice-button-secondary);
|
||||
}
|
||||
|
||||
.main-entityHeader-metaDataText span {
|
||||
color: var(--spice-button-secondary);
|
||||
}
|
||||
|
||||
.x-sortBox-sortDropdown {
|
||||
background-color: var(--spice-main-secondary) !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
[dir="ltr"] .main-actionBar-ActionBarRow > :first-child {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.x-filterBox-expandButton:focus,
|
||||
.x-filterBox-expandButton:hover {
|
||||
background-color: var(--spice-main-secondary) !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.x-sortBox-sortDropdown,
|
||||
.x-filterBox-expandButton {
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
|
||||
/* change background color of 'home' tab shortcut items */
|
||||
.view-homeShortcutsGrid-shortcut {
|
||||
background-color: rgba(var(--spice-rgb-main-secondary), 0.5) !important;
|
||||
}
|
||||
|
||||
.view-homeShortcutsGrid-shortcut:focus-within,
|
||||
.view-homeShortcutsGrid-shortcut:hover,
|
||||
.view-homeShortcutsGrid-shortcut[data-context-menu-open="true"] {
|
||||
background-color: var(--spice-main-secondary) !important;
|
||||
}
|
||||
|
||||
.main-card-card {
|
||||
background-color: rgba(var(--spice-rgb-main-secondary), 0.5) !important;
|
||||
}
|
||||
|
||||
.main-card-card:focus-within,
|
||||
.main-card-card:hover {
|
||||
background-color: var(--spice-main-secondary) !important;
|
||||
}
|
||||
|
||||
/* card background color for editing playlist details */
|
||||
.main-playlistEditDetailsModal-descriptionTextarea {
|
||||
background: var(--spice-main-secondary);
|
||||
}
|
||||
|
||||
.main-playlistEditDetailsModal-textElementLabel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* change color of search icon for new playlists */
|
||||
.playlist-inlineSearchBox-searchIcon {
|
||||
fill: var(--spice-text) !important;
|
||||
}
|
||||
|
||||
/* change appearance of verified artist badge */
|
||||
.main-entityHeader-headerText > span:first-child {
|
||||
border: 0.25em solid var(--spice-text);
|
||||
border-radius: 0.5em;
|
||||
width: fit-content;
|
||||
gap: 0px;
|
||||
text-align: center;
|
||||
padding: 0.25em 0.75em;
|
||||
--font-family: CircularSp,CircularSp-Arab,CircularSp-Hebr,CircularSp-Cyrl,CircularSp-Grek,CircularSp-Deva,var(--fallback-fonts,sans-serif),sans-serif;
|
||||
}
|
||||
|
||||
.main-entityHeader-headerText > span:first-child > span {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.main-entityHeader-headerText > span:first-child svg,
|
||||
.main-entityHeader-headerText > span:first-child div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* change text color of hero card on 'library' tab */
|
||||
.main-heroCard-card,
|
||||
.collection-collectionEntityHeroCard-descriptionContainer {
|
||||
color: var(--spice-subtext) !important;
|
||||
}
|
||||
/*
|
||||
--------------
|
||||
CONTEXT MENU
|
||||
--------------
|
||||
*/
|
||||
/* change hover color when selecting in context menu */
|
||||
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
|
||||
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
|
||||
background-color: rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
.main-contextMenu-menuItemButton[aria-expanded="true"] {
|
||||
background-color: rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
/* disabled options */
|
||||
.main-contextMenu-disabled > span {
|
||||
color: rgba(var(--spice-button-disabled), 0.5);
|
||||
}
|
||||
|
||||
/* dividers between option subgroups */
|
||||
.main-contextMenu-menuItem:not(:first-child) > .main-contextMenu-dividerBefore:before {
|
||||
border-bottom: 1px solid var(--spice-button-disabled);
|
||||
}
|
||||
/*
|
||||
-------------
|
||||
TRACKS GRID
|
||||
-------------
|
||||
*/
|
||||
/* change color of track titles */
|
||||
.main-trackList-rowTitle {
|
||||
color: var(--spice-subtext);
|
||||
}
|
||||
/* change color of 'explicit' badge */
|
||||
.main-tag-container {
|
||||
background-color: var(--spice-subtext);
|
||||
}
|
||||
|
||||
/* change background color of selected row */
|
||||
.main-trackList-trackListRow.main-trackList-selected,
|
||||
.main-trackList-trackListRow.main-trackList-selected:hover {
|
||||
background-color: var(--spice-main-secondary) !important;
|
||||
}
|
||||
|
||||
.main-trackList-trackListRow:focus-within,
|
||||
.main-trackList-trackListRow:hover {
|
||||
background-color: rgba(var(--spice-rgb-main-secondary), 0.5);
|
||||
}
|
||||
|
||||
/* When song is currently playing */
|
||||
.main-trackList-active .main-type-mesto,
|
||||
.main-trackList-active .main-trackList-rowSubTitle,
|
||||
.main-trackList-active .main-trackList-rowSubTitle a,
|
||||
.main-trackList-active .main-trackList-rowMarker,
|
||||
.main-trackList-active .main-trackList-rowSectionVariable,
|
||||
.main-trackList-active .main-trackList-rowSectionVariable a,
|
||||
.main-trackList-active .main-trackList-rowSectionVariable span,
|
||||
.main-trackList-active .main-trackList-rowMarker,
|
||||
.main-trackList-active .main-trackList-rowDuration {
|
||||
color: var(--spice-button) !important;
|
||||
}
|
||||
|
||||
.main-trackList-active .main-tag-container {
|
||||
background-color: var(--spice-button);
|
||||
}
|
||||
|
||||
/* When song is hovered/selected */
|
||||
.main-trackList-trackListRow.main-trackList-selected:not(.main-trackList-active) .main-tag-container,
|
||||
.main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active) .main-tag-container {
|
||||
background-color: var(--spice-text);
|
||||
}
|
||||
|
||||
.main-trackList-trackListRow:hover:not(.main-trackList-disabled) .main-addButton-button,
|
||||
.main-trackList-trackListRow:focus-within:not(.main-trackList-disabled) .main-addButton-button {
|
||||
color: var(--spice-text);
|
||||
}
|
||||
|
||||
.main-trackList-trackListRow.main-trackList-selected:not(.main-trackList-active) .main-trackList-rowTitle,
|
||||
.main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active) .main-trackList-rowTitle {
|
||||
color: var(--spice-text);
|
||||
}
|
||||
|
||||
.main-trackList-trackListRow.main-trackList-selected:not(.main-trackList-active) .main-trackList-rowSubTitle,
|
||||
.main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active) .main-trackList-rowSubTitle {
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
|
||||
/* color of selected row infos */
|
||||
.main-trackList-rowSectionVariable span,
|
||||
.main-trackList-rowSectionEnd div {
|
||||
color: inherit;
|
||||
}
|
||||
/*
|
||||
---------------
|
||||
NEW HOME LAYOUT
|
||||
---------------
|
||||
*/
|
||||
.main-topBar-navLinks a {
|
||||
border-radius: 8px;
|
||||
color: var(--spice-text);
|
||||
background-color: var(--spice-main-secondary);
|
||||
}
|
||||
|
||||
.main-topBar-navLinks a:hover {
|
||||
color: var(--spice-button-active);
|
||||
background-color: var(--spice-main-secondary);
|
||||
}
|
||||
|
||||
.main-topBar-navLinks a.main-topBar-buttonActive {
|
||||
background-color: var(--spice-button-active);
|
||||
color: var(--spice-main);
|
||||
}
|
||||
.nav-alt .x-searchInput-searchInputInput:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
/*
|
||||
-------
|
||||
TOGGLE
|
||||
-------
|
||||
*/
|
||||
.x-toggle-indicatorWrapper {
|
||||
background-color: transparent;
|
||||
height: 20px !important;
|
||||
width: 40px !important;
|
||||
box-shadow: 0 0 0 1px var(--spice-subtext);
|
||||
}
|
||||
|
||||
input:hover:not([disabled], :active) ~ .x-toggle-indicatorWrapper {
|
||||
background-color: var(--spice-main-secondary);
|
||||
}
|
||||
|
||||
input:checked ~ .x-toggle-indicatorWrapper {
|
||||
background-color: var(--spice-button);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.x-toggle-indicator {
|
||||
background-color: var(--spice-subtext);
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
top: 4px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
input:not([disabled]) ~ .x-toggle-indicatorWrapper:hover .x-toggle-indicator {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
input:checked ~ .x-toggle-indicatorWrapper .x-toggle-indicator {
|
||||
background-color: var(--spice-main);
|
||||
right: 4px;
|
||||
}
|
||||
Reference in New Issue
Block a user