mirror of
https://github.com/morpheusthewhite/spicetify-themes.git
synced 2024-11-23 03:12:53 +01:00
fix(Dribbblish & StarryNight): grid layout in global nav
This commit is contained in:
Sanooj Es
GitHub
parent
cbc5231181
commit
37c6348144
@ -44,6 +44,12 @@ body {
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.global-nav .Root__top-container {
|
||||
grid-template-areas: "global-nav global-nav global-nav"
|
||||
"left-sidebar main-view right-sidebar"
|
||||
"left-sidebar now-playing-bar now-playing-bar" !important;
|
||||
}
|
||||
|
||||
.Root__top-container {
|
||||
grid-template-areas:
|
||||
"left-sidebar main-view right-sidebar"
|
||||
@ -52,12 +58,37 @@ body {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.global-nav #Desktop_PanelContainer_Id {
|
||||
border-radius: 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__globalNav {
|
||||
background-color: var(--spice-main) !important;
|
||||
border-radius: var(--corner-radius) var(--corner-radius) 0 0 !important;
|
||||
margin-left: calc(var(--left-sidebar-width) * 1px);
|
||||
}
|
||||
|
||||
.Root__globalNav .main-globalNav-historyButtonsContainer,
|
||||
.Root__globalNav .main-globalNav-searchSection,
|
||||
.Root__globalNav .main-topBar-topbarContentRight {
|
||||
-webkit-transform: scale(0.75);
|
||||
transform: scale(0.75);
|
||||
}
|
||||
|
||||
.main-home-filterChipsSection {
|
||||
background-color: var(--spice-main) !important;
|
||||
}
|
||||
|
||||
.global-nav .Root__main-view {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.Root__main-view {
|
||||
border-radius: var(--corner-radius) var(--corner-radius) 0 0 !important;
|
||||
grid-area: main-view !important;
|
||||
@ -85,10 +116,12 @@ body {
|
||||
left: 0;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.main-nowPlayingBar-nowPlayingBar {
|
||||
position: relative;
|
||||
padding-inline-end: 16px !important;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
--progress-bar-height: 2px;
|
||||
--progress-bar-radius: 0;
|
||||
@ -112,12 +145,14 @@ body {
|
||||
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;
|
||||
@ -130,6 +165,7 @@ body {
|
||||
.playback-bar__progress-time-elapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* custom dynamic prog tooltip */
|
||||
.playback-bar .prog-tooltip {
|
||||
position: absolute;
|
||||
@ -145,6 +181,7 @@ body {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s linear, left 0.2s linear;
|
||||
}
|
||||
|
||||
.playback-bar:hover .prog-tooltip {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -154,21 +191,25 @@ body {
|
||||
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;
|
||||
@ -179,6 +220,7 @@ body {
|
||||
.main-playPauseButton-button {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.main-playPauseButton-button svg {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
@ -189,6 +231,7 @@ body {
|
||||
.control-button {
|
||||
color: var(--spice-text);
|
||||
}
|
||||
|
||||
.main-genericButton-button {
|
||||
color: var(--spice-text);
|
||||
}
|
||||
@ -220,6 +263,7 @@ body {
|
||||
height: var(--bar-cover-art-size) !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.main-nowPlayingWidget-nowPlaying {
|
||||
justify-content: center;
|
||||
}
|
||||
@ -228,12 +272,15 @@ body {
|
||||
.main-navBar-mainNav {
|
||||
gap: 0 !important;
|
||||
}
|
||||
.main-navBar-mainNav > div {
|
||||
|
||||
.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 {
|
||||
@ -245,21 +292,26 @@ body {
|
||||
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;
|
||||
@ -269,81 +321,102 @@ body {
|
||||
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 {
|
||||
|
||||
.fRZRXRIV2YBCFLYgwDAr>svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
/* remove hover effect */
|
||||
li > div > div::after {
|
||||
li>div>div::after {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
li > div::after {
|
||||
|
||||
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 {
|
||||
|
||||
.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 {
|
||||
|
||||
.main-yourLibraryX-filterArea>div>div:first-child button {
|
||||
background-color: var(--spice-tab-active) !important;
|
||||
}
|
||||
.main-yourLibraryX-filterArea > div > div:first-child button > span {
|
||||
|
||||
.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,
|
||||
@ -360,26 +433,32 @@ li > div::after {
|
||||
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");
|
||||
@ -387,21 +466,25 @@ li > div::after {
|
||||
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;
|
||||
}
|
||||
@ -410,9 +493,11 @@ li > div::after {
|
||||
.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;
|
||||
@ -451,10 +536,12 @@ li > div::after {
|
||||
-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%);
|
||||
@ -468,10 +555,12 @@ input {
|
||||
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;
|
||||
}
|
||||
@ -483,16 +572,18 @@ input {
|
||||
}
|
||||
|
||||
/* topbar play button */
|
||||
.main-topBar-topbarContent .main-playButton-PlayButton > button > span {
|
||||
.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 {
|
||||
|
||||
.main-topBar-topbarContent .main-playButton-PlayButton>button>span>span {
|
||||
position: initial;
|
||||
height: 18px;
|
||||
}
|
||||
@ -501,6 +592,7 @@ input {
|
||||
.lyrics-lyrics-container {
|
||||
--lyrics-color-inactive: rgba(var(--spice-rgb-text), 0.3) !important;
|
||||
}
|
||||
|
||||
.lyrics-lyrics-background {
|
||||
background-color: var(--spice-main);
|
||||
}
|
||||
@ -519,6 +611,7 @@ input {
|
||||
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);
|
||||
}
|
||||
@ -529,6 +622,7 @@ input {
|
||||
box-shadow: none;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.legacy-gridChange .main-coverSlotExpanded-container {
|
||||
left: calc(var(--nav-bar-width) + 10px);
|
||||
}
|
||||
@ -540,42 +634,53 @@ input {
|
||||
"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;
|
||||
@ -584,77 +689,98 @@ input {
|
||||
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 {
|
||||
|
||||
.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 {
|
||||
|
||||
.main-likedSongsButton-likedSongsIcon>svg {
|
||||
height: 20px !important;
|
||||
width: 20px !important;
|
||||
}
|
||||
|
||||
/* style added sidebar images */
|
||||
.main-rootlist-rootlistItem a {
|
||||
align-items: center;
|
||||
@ -663,6 +789,7 @@ input {
|
||||
height: 56px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
img.playlist-picture {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@ -671,35 +798,43 @@ img.playlist-picture {
|
||||
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;
|
||||
@ -707,12 +842,15 @@ img.playlist-picture[src$=".svg"] {
|
||||
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 {
|
||||
@ -722,48 +860,61 @@ img.playlist-picture[src$=".svg"] {
|
||||
.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: 100%;
|
||||
}
|
||||
@ -771,4 +922,4 @@ img.playlist-picture[src$=".svg"] {
|
||||
/* bottom scroll-bar popup fix */
|
||||
.Root__main-view-overlay {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -1,65 +1,76 @@
|
||||
function waitForElement(els, func, timeout = 100) {
|
||||
const queries = els.map(el => document.querySelector(el));
|
||||
if (queries.every(a => a)) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
function random(min, max) { // min inclusive max exclusive
|
||||
function random(min, max) {
|
||||
// min inclusive max exclusive
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
waitForElement([".Root__top-container"], ([topContainer]) => {
|
||||
waitForElement(['.Root__top-container'], ([topContainer]) => {
|
||||
const r = document.documentElement;
|
||||
const rs = window.getComputedStyle(r);
|
||||
|
||||
const backgroundContainer = document.createElement('div');
|
||||
backgroundContainer.className = 'starrynight-bg-container';
|
||||
topContainer.appendChild(backgroundContainer);
|
||||
|
||||
// make --spice-main transparent for a more visible background
|
||||
r.style.setProperty('--spice-main', rs.getPropertyValue('--spice-main') + '00');
|
||||
r.style.setProperty(
|
||||
'--spice-main',
|
||||
`${rs.getPropertyValue('--spice-main')}00`
|
||||
);
|
||||
|
||||
// to position stars and shooting stars between the background and everything else
|
||||
const rootElement = document.querySelector('.Root__top-container');
|
||||
rootElement.style.zIndex = '0';
|
||||
|
||||
// create the stars
|
||||
const canvasSize = topContainer.clientWidth * topContainer.clientHeight;
|
||||
const canvasSize =
|
||||
backgroundContainer.clientWidth * backgroundContainer.clientHeight;
|
||||
const starsFraction = canvasSize / 4000;
|
||||
for (let i = 0; i < starsFraction; i++) {
|
||||
const size = Math.random() < 0.5 ? 1 : 2;
|
||||
|
||||
const star = document.createElement('div');
|
||||
star.style.position = 'absolute';
|
||||
star.style.left = random(0, 99) + '%';
|
||||
star.style.top = random(0, 99) + '%';
|
||||
star.style.left = `${random(0, 99)}%`;
|
||||
star.style.top = `${random(0, 99)}%`;
|
||||
star.style.opacity = random(0.5, 1);
|
||||
star.style.width = size + 'px';
|
||||
star.style.height = size + 'px';
|
||||
star.style.width = `${size}px`;
|
||||
star.style.height = `${size}px`;
|
||||
star.style.backgroundColor = rs.getPropertyValue('--spice-star');
|
||||
star.style.zIndex = '-1';
|
||||
|
||||
if (Math.random() < 1/5) {
|
||||
star.style.animation = 'twinkle' + (Math.floor(Math.random() * 4) + 1) + ' 5s infinite';
|
||||
if (Math.random() < 1 / 5) {
|
||||
star.style.animation = `twinkle${
|
||||
Math.floor(Math.random() * 4) + 1
|
||||
} 5s infinite`;
|
||||
}
|
||||
|
||||
topContainer.appendChild(star);
|
||||
backgroundContainer.appendChild(star);
|
||||
}
|
||||
|
||||
|
||||
// handles resizing of playbar panel to match right sidebar below it
|
||||
const playbar = document.querySelector('.Root__now-playing-bar');
|
||||
const rightbar = document.querySelector('.Root__right-sidebar');
|
||||
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
for (let entry of entries) {
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
if (entry.target === rightbar) {
|
||||
let newWidth = entry.contentRect.width;
|
||||
if (newWidth == 0) {
|
||||
const localStorageWidth = localStorage.getItem('223ni6f2epqcidhx5etjafeai:panel-width-saved');
|
||||
if (newWidth === 0) {
|
||||
const localStorageWidth = localStorage.getItem(
|
||||
'223ni6f2epqcidhx5etjafeai:panel-width-saved'
|
||||
);
|
||||
if (localStorageWidth) {
|
||||
newWidth = localStorageWidth;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
newWidth = 420;
|
||||
}
|
||||
}
|
||||
@ -71,13 +82,15 @@ waitForElement([".Root__top-container"], ([topContainer]) => {
|
||||
|
||||
resizeObserver.observe(rightbar);
|
||||
|
||||
|
||||
// start or stop spinning animation based on whether something is playing
|
||||
const targetElement = document.querySelector('.main-playPauseButton-button');
|
||||
|
||||
const playObserver = new MutationObserver(function(mutationsList, observer) {
|
||||
for (let mutation of mutationsList) {
|
||||
if (mutation.type === 'attributes' && mutation.attributeName === 'aria-label') {
|
||||
const playObserver = new MutationObserver((mutationsList, observer) => {
|
||||
for (const mutation of mutationsList) {
|
||||
if (
|
||||
mutation.type === 'attributes' &&
|
||||
mutation.attributeName === 'aria-label'
|
||||
) {
|
||||
handleLabelChange();
|
||||
}
|
||||
}
|
||||
@ -88,18 +101,21 @@ waitForElement([".Root__top-container"], ([topContainer]) => {
|
||||
playObserver.observe(targetElement, playConfig);
|
||||
|
||||
function handleLabelChange() {
|
||||
const img = document.querySelector(".main-nowPlayingWidget-coverArt .cover-art img");
|
||||
const img = document.querySelector(
|
||||
'.main-nowPlayingWidget-coverArt .cover-art img'
|
||||
);
|
||||
// checks the state of the play button on the playbar
|
||||
if (document.querySelector('.main-playPauseButton-button').getAttribute('aria-label') == 'Pause'){
|
||||
if (
|
||||
document
|
||||
.querySelector('.main-playPauseButton-button')
|
||||
.getAttribute('aria-label') === 'Pause'
|
||||
) {
|
||||
img.classList.add('running-animation');
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
img.classList.remove('running-animation');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Pure CSS Shooting Star Animation Effect Copyright (c) 2021 by Delroy Prithvi (https://codepen.io/delroyprithvi/pen/LYyJROR)
|
||||
|
||||
@ -113,20 +129,23 @@ waitForElement([".Root__top-container"], ([topContainer]) => {
|
||||
const shootingstar = document.createElement('span');
|
||||
shootingstar.className = 'shootingstar';
|
||||
if (Math.random() < 0.75) {
|
||||
shootingstar.style.top = '-4px'; // hidden off screen when animation is delayed
|
||||
shootingstar.style.right = random(0, 90) + '%';
|
||||
}
|
||||
else {
|
||||
shootingstar.style.top = random(0, 50) + '%';
|
||||
shootingstar.style.right = '-4px'; // hidden when animation is delayed
|
||||
shootingstar.style.top = '-4px'; // hidden off screen when animation is delayed
|
||||
shootingstar.style.right = `${random(0, 90)}%`;
|
||||
} else {
|
||||
shootingstar.style.top = `${random(0, 50)}%`;
|
||||
shootingstar.style.right = '-4px'; // hidden when animation is delayed
|
||||
}
|
||||
|
||||
const shootingStarGlowColor = "rgba(" + rs.getPropertyValue('--spice-rgb-shooting-star-glow') + "," + 0.1 + ')';
|
||||
shootingstar.style.boxShadow = "0 0 0 4px " + shootingStarGlowColor + ", 0 0 0 8px " + shootingStarGlowColor + ", 0 0 20px " + shootingStarGlowColor;
|
||||
|
||||
shootingstar.style.animationDuration = Math.floor(Math.random() * (3)) + 3 + 's';
|
||||
shootingstar.style.animationDelay = Math.floor(Math.random() * 7) + 's';
|
||||
const shootingStarGlowColor = `rgba(${rs.getPropertyValue(
|
||||
'--spice-rgb-shooting-star-glow'
|
||||
)},${0.1})`;
|
||||
shootingstar.style.boxShadow = `0 0 0 4px ${shootingStarGlowColor}, 0 0 0 8px ${shootingStarGlowColor}, 0 0 20px ${shootingStarGlowColor}`;
|
||||
|
||||
topContainer.appendChild(shootingstar);
|
||||
shootingstar.style.animationDuration = `${
|
||||
Math.floor(Math.random() * 3) + 3
|
||||
}s`;
|
||||
shootingstar.style.animationDelay = `${Math.floor(Math.random() * 7)}s`;
|
||||
|
||||
backgroundContainer.appendChild(shootingstar);
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.button-module__button___hf2qg_marketplace{
|
||||
.button-module__button___hf2qg_marketplace {
|
||||
color: var(--spice-subtext)
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
.Root__top-container {
|
||||
background: linear-gradient(180deg, var(--spice-sidebar-alt) 0%, var(--spice-sidebar) 100%);
|
||||
overflow: hidden;
|
||||
grid-template-areas:
|
||||
grid-template-areas:
|
||||
"left-sidebar main-view now-playing-bar"
|
||||
"left-sidebar main-view right-sidebar";
|
||||
}
|
||||
@ -30,7 +30,6 @@
|
||||
}
|
||||
|
||||
.Root__right-sidebar {
|
||||
height: calc(100vh - 450px);
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
@ -115,12 +114,12 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main-coverSlotCollapsed-container > :first-child {
|
||||
.main-coverSlotCollapsed-container> :first-child {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main-coverSlotCollapsed-container > :first-child > :first-child {
|
||||
.main-coverSlotCollapsed-container> :first-child> :first-child {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #00000000;
|
||||
@ -165,40 +164,119 @@
|
||||
color: var(--spice-sidebar);
|
||||
}
|
||||
|
||||
.starrynight-bg-container {
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@keyframes twinkle1 {
|
||||
0% { box-shadow: 0px 0px 8px 2px var(--spice-star-glow); }
|
||||
20% { box-shadow: 0px 0px -8px 2px var(--spice-star-glow); }
|
||||
40% { box-shadow: 0px 0px -8px 2px var(--spice-star-glow); }
|
||||
60% { box-shadow: 0px 0px -8px 2px var(--spice-star-glow); }
|
||||
80% { box-shadow: 0px 0px 8px 2px var(--spice-star-glow); }
|
||||
100% { box-shadow: 0px 0px 8px 2px var(--spice-star-glow); }
|
||||
0% {
|
||||
box-shadow: 0px 0px 8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
20% {
|
||||
box-shadow: 0px 0px -8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
40% {
|
||||
box-shadow: 0px 0px -8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
60% {
|
||||
box-shadow: 0px 0px -8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
80% {
|
||||
box-shadow: 0px 0px 8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0px 0px 8px 2px var(--spice-star-glow);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes twinkle2 {
|
||||
0% { box-shadow: 0px 0px 8px 2px var(--spice-star-glow); }
|
||||
20% { box-shadow: 0px 0px 8px 2px var(--spice-star-glow); }
|
||||
40% { box-shadow: 0px 0px -8px 2px var(--spice-star-glow); }
|
||||
60% { box-shadow: 0px 0px -8px 2px var(--spice-star-glow); }
|
||||
80% { box-shadow: 0px 0px -8px 2px var(--spice-star-glow); }
|
||||
100% { box-shadow: 0px 0px 8px 2px var(--spice-star-glow); }
|
||||
0% {
|
||||
box-shadow: 0px 0px 8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
20% {
|
||||
box-shadow: 0px 0px 8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
40% {
|
||||
box-shadow: 0px 0px -8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
60% {
|
||||
box-shadow: 0px 0px -8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
80% {
|
||||
box-shadow: 0px 0px -8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0px 0px 8px 2px var(--spice-star-glow);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes twinkle3 {
|
||||
0% { box-shadow: 0px 0px -8px 2px var(--spice-star-glow); }
|
||||
20% { box-shadow: 0px 0px 8px 2px var(--spice-star-glow); }
|
||||
40% { box-shadow: 0px 0px 8px 2px var(--spice-star-glow); }
|
||||
60% { box-shadow: 0px 0px 8px 2px var(--spice-star-glow); }
|
||||
80% { box-shadow: 0px 0px -8px 2px var(--spice-star-glow); }
|
||||
100% { box-shadow: 0px 0px -8px 2px var(--spice-star-glow); }
|
||||
0% {
|
||||
box-shadow: 0px 0px -8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
20% {
|
||||
box-shadow: 0px 0px 8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
40% {
|
||||
box-shadow: 0px 0px 8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
60% {
|
||||
box-shadow: 0px 0px 8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
80% {
|
||||
box-shadow: 0px 0px -8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0px 0px -8px 2px var(--spice-star-glow);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes twinkle4 {
|
||||
0% { box-shadow: 0px 0px -8px 2px var(--spice-star-glow); }
|
||||
20% { box-shadow: 0px 0px -8px 2px var(--spice-star-glow); }
|
||||
40% { box-shadow: 0px 0px 8px 2px var(--spice-star-glow); }
|
||||
60% { box-shadow: 0px 0px 8px 2px var(--spice-star-glow); }
|
||||
80% { box-shadow: 0px 0px 8px 2px var(--spice-star-glow); }
|
||||
100% { box-shadow: 0px 0px -8px 2px var(--spice-star-glow); }
|
||||
0% {
|
||||
box-shadow: 0px 0px -8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
20% {
|
||||
box-shadow: 0px 0px -8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
40% {
|
||||
box-shadow: 0px 0px 8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
60% {
|
||||
box-shadow: 0px 0px 8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
80% {
|
||||
box-shadow: 0px 0px 8px 2px var(--spice-star-glow);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0px 0px -8px 2px var(--spice-star-glow);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
@ -232,13 +310,13 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
|
||||
}
|
||||
|
||||
.shootingstar::before {
|
||||
content:'';
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 300px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,var(--spice-shooting-star),transparent);
|
||||
background: linear-gradient(90deg, var(--spice-shooting-star), transparent);
|
||||
}
|
||||
|
||||
@keyframes animate {
|
||||
@ -246,9 +324,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
|
||||
transform: rotate(315deg) translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(315deg) translateX(-1500px);
|
||||
opacity: 0;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user