610 lines
15 KiB
CSS
610 lines
15 KiB
CSS
/* 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;
|
|
}
|