Mirrors/spicetify-themes
1
0
Fork 0
mirror of https://github.com/morpheusthewhite/spicetify-themes.git synced 2024-11-25 12:22:32 +01:00
Code Issues Projects Releases Activity

fix(Blossom): add ylx compatibility (#957)

Browse Source
This commit is contained in:
harbassan 2023-06-26 16:35:12 +12:00 committed by GitHub
parent 10468f5d1f
commit 9006bd9108
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 93 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Blossom/color.ini
View File

@ -8,4 +8,5 @@ button = 4d5c78
button-active = 6d80a3 button-active = 6d80a3
button-disabled = 282e33 button-disabled = 282e33
sidebar = 1e2226 sidebar = 1e2226
main = 1e2226 main = 1e2226
card = 282e33

124
Blossom/user.css
View File

@ -1,7 +1,7 @@
/* Blossom Theme */ /* Blossom Theme */
#main { #main {
overflow: hidden; overflow: hidden;
background-color: var(--spice-background); background-color: var(--spice-background);
} }
@ -83,7 +83,7 @@
} }
.main-entityHeader-shadow { .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 */ /* TRACKLIST */
@ -104,7 +104,6 @@
/* Playback bar and controls */ /* Playback bar and controls */
.main-nowPlayingBar-nowPlayingBar { .main-nowPlayingBar-nowPlayingBar {
background-color: unset !important; background-color: unset !important;
background: unset !important;
background-image: linear-gradient(0deg, var(--spice-player), 80%, transparent); background-image: linear-gradient(0deg, var(--spice-player), 80%, transparent);
transition: all 0.5s; transition: all 0.5s;
} }
@ -133,33 +132,39 @@
.main-navBar-navBarLinkActive, .main-navBar-navBarLinkActive,
.main-navBar-navBarLinkActive:focus, .main-navBar-navBarLinkActive:focus,
.logo { .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 { .playback-bar {
width: calc(100% + 82px); width: calc(100% + 82px);
left: -41px; top: -10px;
bottom: 74px;
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
transition: all 0.5s; transition: all 0.5s;
} }
.playback-bar:hover { .playback-bar:hover {
width: 100%; width: 100%;
left: 0; }
.Root__top-container {
row-gap: 0;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
} }
.progress-bar { .progress-bar {
--fg-color: var(--spice-button-active); --fg-color: var(--spice-button-active);
} }
.os-theme-spotify.os-host-transition .os-theme-spotify.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
> .os-scrollbar-vertical border-radius: 4px;
> .os-scrollbar-track background-color: var(--spice-text);
> .os-scrollbar-handle { opacity: 30%;
border-radius: 4px;
background-color: var(--spice-text);
opacity: 30%;
} }
.player-controls__buttons { .player-controls__buttons {
@ -174,7 +179,7 @@
.player-controls__buttons { .player-controls__buttons {
align-items: center; align-items: center;
} }
/* LEFT BAR STUFF */ /* LEFT BAR STUFF */
@ -184,6 +189,60 @@
visibility: hidden; 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 { .main-rootlist-rootlist {
background-color: var(--spice-player); background-color: var(--spice-player);
top: 10px; top: 10px;
@ -224,7 +283,7 @@
background-color: var(--spice-player) !important; background-color: var(--spice-player) !important;
transition: all 0.5s; transition: all 0.5s;
} }
.main-navBar-navBarLinkActive{ .main-navBar-navBarLinkActive {
background: var(--spice-player) !important; background: var(--spice-player) !important;
margin-left: -22px; margin-left: -22px;
margin-right: -10px; margin-right: -10px;
@ -238,33 +297,33 @@
.main-card-card { .main-card-card {
opacity: 100%; opacity: 100%;
background-color: unset !important; 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; transition: all 1s;
} }
.main-card-card:hover { .main-card-card:hover {
background-color: unset !important; background-color: unset !important;
background: var(--spice-player)!important; background: var(--spice-player) !important;
} }
.collection-collectionEntityHeroCard-likedSongs { .collection-collectionEntityHeroCard-likedSongs {
background-color: unset !important; 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; transition: all 1s;
} }
.collection-collectionEntityHeroCard-likedSongs:hover { .collection-collectionEntityHeroCard-likedSongs:hover {
background-color: unset !important; background-color: unset !important;
background: var(--spice-player)!important; background: var(--spice-player) !important;
} }
/* Shortcuts */ /* Shortcuts */
.view-homeShortcutsGrid-shortcut { .view-homeShortcutsGrid-shortcut {
background-color: unset !important; 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; transition: all 1s;
} }
.view-homeShortcutsGrid-shortcut:hover { .view-homeShortcutsGrid-shortcut:hover {
background-color: unset !important; background-color: unset !important;
background: var(--spice-player)!important; background: var(--spice-player) !important;
} }
/* Cursor things */ /* Cursor things */
@ -273,7 +332,7 @@
.main-skipForwardButton-button, .main-skipForwardButton-button,
.main-skipBackButton-button, .main-skipBackButton-button,
.main-shuffleButton-button { .main-shuffleButton-button {
cursor: pointer !important; cursor: pointer !important;
} }
/* Search */ /* Search */
@ -290,8 +349,7 @@ input {
/* ANIMATIONS */ /* ANIMATIONS */
.view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-shortcut .main-heroCard-card,
.main-heroCard-card,
.main-buttonIcon-buttonIcon, .main-buttonIcon-buttonIcon,
.main-trackList-column, .main-trackList-column,
.main-rootlist-rootlistItem, .main-rootlist-rootlistItem,
@ -316,31 +374,31 @@ input {
@keyframes up-fade-anim { @keyframes up-fade-anim {
from { from {
opacity:0%; opacity: 0%;
transform: translateY(10px); transform: translateY(10px);
} }
to { to {
opacity:100; opacity: 100;
transform: translateY(0px); transform: translateY(0px);
} }
} }
@keyframes left-fade-anim { @keyframes left-fade-anim {
from { from {
opacity:0%; opacity: 0%;
transform: translateX(10px); transform: translateX(10px);
} }
to { to {
opacity:100; opacity: 100;
transform: translateX(0px); transform: translateX(0px);
} }
} }
@keyframes right-fade-anim { @keyframes right-fade-anim {
from { from {
opacity:0%; opacity: 0%;
transform: translateX(-10px); transform: translateX(-10px);
} }
to { to {
opacity:100; opacity: 100;
transform: translateX(0px); transform: translateX(0px);
} }
} }
@ -348,4 +406,4 @@ input {
.queue-tabBar-active { .queue-tabBar-active {
background-color: var(--spice-player) !important; background-color: var(--spice-player) !important;
transition: all 0.5s; transition: all 0.5s;
} }