mirror of
https://github.com/morpheusthewhite/spicetify-themes.git
synced 2024-11-22 02:42:54 +01:00
fix(Blossom): add ylx compatibility (#957)
This commit is contained in:
harbassan
GitHub
parent
10468f5d1f
commit
9006bd9108
@ -9,3 +9,4 @@ button-active = 6d80a3
|
||||
button-disabled = 282e33
|
||||
sidebar = 1e2226
|
||||
main = 1e2226
|
||||
card = 282e33
|
||||
122
Blossom/user.css
122
Blossom/user.css
@ -1,7 +1,7 @@
|
||||
/* Blossom Theme */
|
||||
|
||||
#main {
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
background-color: var(--spice-background);
|
||||
}
|
||||
|
||||
@ -83,7 +83,7 @@
|
||||
}
|
||||
|
||||
.main-entityHeader-shadow {
|
||||
box-shadow: 0 0px 50px rgba(0, 0, 0, 0.200);
|
||||
box-shadow: 0 0px 50px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* TRACKLIST */
|
||||
@ -104,7 +104,6 @@
|
||||
/* Playback bar and controls */
|
||||
.main-nowPlayingBar-nowPlayingBar {
|
||||
background-color: unset !important;
|
||||
background: unset !important;
|
||||
background-image: linear-gradient(0deg, var(--spice-player), 80%, transparent);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
@ -133,33 +132,39 @@
|
||||
.main-navBar-navBarLinkActive,
|
||||
.main-navBar-navBarLinkActive:focus,
|
||||
.logo {
|
||||
background-color: var(--spice-player) !important;
|
||||
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 {
|
||||
width: calc(100% + 82px);
|
||||
left: -41px;
|
||||
bottom: 74px;
|
||||
top: -10px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.playback-bar:hover {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
.Root__top-container {
|
||||
row-gap: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
--fg-color: var(--spice-button-active);
|
||||
--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%;
|
||||
.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 {
|
||||
@ -174,7 +179,7 @@
|
||||
|
||||
.player-controls__buttons {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* LEFT BAR STUFF */
|
||||
|
||||
@ -184,6 +189,60 @@
|
||||
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;
|
||||
@ -224,7 +283,7 @@
|
||||
background-color: var(--spice-player) !important;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.main-navBar-navBarLinkActive{
|
||||
.main-navBar-navBarLinkActive {
|
||||
background: var(--spice-player) !important;
|
||||
margin-left: -22px;
|
||||
margin-right: -10px;
|
||||
@ -238,33 +297,33 @@
|
||||
.main-card-card {
|
||||
opacity: 100%;
|
||||
background-color: unset !important;
|
||||
background: linear-gradient(180deg, var(--spice-player), 65.0%, transparent);
|
||||
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;
|
||||
background: var(--spice-player) !important;
|
||||
}
|
||||
|
||||
.collection-collectionEntityHeroCard-likedSongs {
|
||||
background-color: unset !important;
|
||||
background: linear-gradient(180deg, var(--spice-player), 65.0%, transparent);
|
||||
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;
|
||||
background: var(--spice-player) !important;
|
||||
}
|
||||
|
||||
/* Shortcuts */
|
||||
.view-homeShortcutsGrid-shortcut {
|
||||
background-color: unset !important;
|
||||
background: linear-gradient(180deg, var(--spice-player), 65.0%, transparent);
|
||||
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;
|
||||
background: var(--spice-player) !important;
|
||||
}
|
||||
|
||||
/* Cursor things */
|
||||
@ -273,7 +332,7 @@
|
||||
.main-skipForwardButton-button,
|
||||
.main-skipBackButton-button,
|
||||
.main-shuffleButton-button {
|
||||
cursor: pointer !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
@ -290,8 +349,7 @@ input {
|
||||
|
||||
/* ANIMATIONS */
|
||||
|
||||
.view-homeShortcutsGrid-shortcut
|
||||
.main-heroCard-card,
|
||||
.view-homeShortcutsGrid-shortcut .main-heroCard-card,
|
||||
.main-buttonIcon-buttonIcon,
|
||||
.main-trackList-column,
|
||||
.main-rootlist-rootlistItem,
|
||||
@ -316,31 +374,31 @@ input {
|
||||
|
||||
@keyframes up-fade-anim {
|
||||
from {
|
||||
opacity:0%;
|
||||
opacity: 0%;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity:100;
|
||||
opacity: 100;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
@keyframes left-fade-anim {
|
||||
from {
|
||||
opacity:0%;
|
||||
opacity: 0%;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
to {
|
||||
opacity:100;
|
||||
opacity: 100;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
@keyframes right-fade-anim {
|
||||
from {
|
||||
opacity:0%;
|
||||
opacity: 0%;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
to {
|
||||
opacity:100;
|
||||
opacity: 100;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user