got inspired by this and oneui6's new

[still wedge]

excellent, just one issue with it

regular

regular

but when my sides collapse it reveals the ending timestamp and shoves it into being visible

[uneven oxide]

sorry for the ping, can i get the snippet for your online icon thing? it looks clean af

[still wedge]

ur all good!! lemme find it lol

[still wedge]

https://github.com/MiniDiscordThemes/FluentStatusIcons

[uneven oxide]

thank you

[lime harbor]

It's pretty! Without hover it's perfect with my theme *-*

[stuck temple]

snippet conflict, not sure on this

[still wedge]

yeah fair, just something about that second timestamp staying stuck? idk if it can be hidden while things compress

/* small channel list */
.sidebar_ded4b5 {
    width: 0px!important;
    padding-left: var(--channel-mini)!important;
    transition: all 0.4s;
}
.sidebar_ded4b5:hover {
    transition-delay: 0s;
    width: var(--channel-max)!important;
    padding-left: initial!important;
}
/* edit it */
:root {
    --channel-mini: 24px;
    --channel-max: 240px; /* normal channel list size */}

here's the css of the closing channel list snippet

if it helps

[stuck temple]

ill check tomorrow

[still wedge]

tyty :>

[terse gulch]

for me when it collapses, it merges with my username etc.

[still wedge]

any idea what css/themes you have that it could conflict with?

[stuck temple]

this is intended, i didnt make the other controls to opacity: 0; when hidden

^ this fix should solve yours and the collapsing sidebar

[still wedge]

will the import be changed or is that a change i have to make individually?

[stuck temple]

because its import, it updates automatically
just reload discord / the @import and changes should appear

[still wedge]

did both, still no change

its a problem with the original plugin

bc when i delete the import, the problem stays

[stuck temple]

i havent pushed changes yet, doing that rn

changes committed,
UPDATES

• progress bar and butttons are hidden when collapsed
• on hover, they gradually fade in
• if you managed to click on the album art before it disappears, it now looks fixed

@still wedge @terse gulch

a wait

i love it when one is an id, the other is a class

commits updated

and forgot osmething

fixed for collapse list

[still wedge]

thankyouuu

works!!! tysm

[stuck temple]

recent changes pushed

[terse gulch]

just tested it as well and works fine!

thanks mate!

[stuck temple]

np

[stuck temple]

UPDATES

• added a new overlay to the background image based on the dominant color https://medium.com/@rocchokcoco/how-to-extract-image-theme-color-by-css-eb0d278c14d
  before/after

[green knoll]

hey its not working for me

for some reason

okay nvm i works now

[stuck temple]

just reload the import

[shy ravine]

this is the best snippet omg

[still wedge]

really laggy for me now :(

[tepid abyss]

has anyone tried doing this with apple music or is it L bozo

[uneven oxide]

rolling back to the previous commit seems to work if you dont wanna wait for author to update the snippet

@import url(https://raw.githubusercontent.com/Panniku/vc-snippets/0702947411843674b35f5073345f7fe077ee70d3/BetterSpotifyPlayer.css);

[stuck temple]

i wonder if applying blur + scaling the image 2000x is causing a performance issue

[uneven oxide]

blurring it causes a lot of lag apparently

anything beyond 10px on the blur causes lag somehow

[stuck temple]

odd

ill make it an optional import later

[hardy edge]

I am trying to find the element of the banner but it's kinda hard to get with inspect tools because it only apears if I hover over music player. Can you maybe give me that element? I wanna give it rounded corners

[stuck temple]

#vc-spotify-player, ::before ::after

[finite brook]

excellent cooker 🔥

[still wedge]

aw cmon now u gotta drop the theme

[long maple]

i reloaded discord and i still dont have the background image

[stuck temple]

local song?

[long maple]

nope

[stuck temple]

does the song have an album art at all

try devtools -> inspect element -> click somewhere in the box and find vc-spotify-album-art

[long maple]

album art or image?

[stuck temple]

img

[stuck temple]

weird

conflicting with another snippet?

[long maple]

i tried removing themes & all my css snippets and it was still the same

[stuck temple]

the album art is "hidden" when you hover over it btw

[long maple]

ill try again

[long maple]

huh wdym

[stuck temple]

nvm

im still not sure with your case

[stuck temple]

can you check if the ::before and ::after elements exist lke in this screenshot

[long maple]

yeah they do

[stuck temple]

are you using vesktop or browser

[long maple]

the spotify track image isnt there though

browser

[stuck temple]

does this exist (below, in styles)

[long maple]

i dont think so

(thats the top)

[stuck temple]

im not sure about this, sorry though

[long maple]

nah dw ab it

👍 thanks for trying tho!!

[finite brook]

12am

[long maple]

figured it out, outdated vencord

[uneven oxide]

im pretty sure it is roundeddiscord

@import url(https://MarkChan0225.github.io/RoundedDiscord/src/roundeddiscord.css);

[minor plume]

hello! normally you can click on the cover icon and expand it, as well as right click it to control volume. cant do that here and i was wondering if there's something specific i could click to get that functionality back

[minor plume]

ive also noticed it doesnt follow my general discord theme

[stuck temple]

for the album art view, it is possible to click on it before it hides
would need to adjust some css to prevent the hiding and such

background, i am not sure

[lime harbor]

i just made it

based on this snippet

[minor plume]

woah thats cool

[shy ravine]

uou can click the "by" and "on" things and it expands

[minor plume]

fiddly

[fickle forge]

yeah it's still there, it's just invisible

[fickle forge]

I changed some things so it doesn't interfere with the text and made it just barely clickable on the left edge
Probably a pretty scuffed way to do it

#vc-spotify-info-wrapper > img {
    height: 100%;
    opacity: 1;
    transition: opacity 0.4s ease-out, margin-left 0.4s ease-out;
}
#vc-spotify-player:not(:has(#vc-spotify-album-expanded-wrapper)):hover #vc-spotify-album-image {
    margin-left: -45px;
    opacity: 0;
}
#vc-spotify-info-wrapper #vc-spotify-titles {
    transition: margin-left 0.4s ease-out;
}
#vc-spotify-player:hover #vc-spotify-titles {
    margin-left: -10px;
}```

also made a few other changes and combined this with [#🎨-css-snippets message](/guild/1015060230222131221/channel/1028106818368589824/p/1028109863915626526/#msg-1212030048719085568)

[fickle forge]

would it be possible to get the average color of the image and use it for the progress bar?
i feel like that would look really cool
but probably wouldn't work

(just did it manually with a 2x boost to l value)

pretty cool

[stuck temple]

how exactly did you do this?

[fickle forge]

found a website wher ei uploaded the image and manually changed the css to that coloir

[stuck temple]

oh

[fickle forge]

just to see how it would look

(very cool)

prob would need a plugin for this

[stuck temple]

it is possible to kind of use average color, though it may cause performance issues and generally doesnt look good

[fickle forge]

using the heavy blur thing?

[stuck temple]

yes

[fickle forge]

would it be possible to get that as a var though?

[stuck temple]

ask the dev i guess

or learn js to modify the plugin

[fickle forge]

you mean the spotify controls plugin?

yeah i could do that

i've already made a plugin (very bad one)

[stuck temple]

see how the plugin outputs the album art as a var, and copy it to output the average color as well

could be easy to do, might do it on my own

[fickle forge]

maybe

idk if getting the avg color would be super simple tho

and the color would probably need to be adjusted a bit to work

these are probably the things that would be good to change (turned off theme just to show this better)
idk if the plugin would just make vars for css, or change the color without adding a theme

[fickle forge]

I can't get this to work with #🎨-css-snippets message bc of the overflow: hidden that's required for the button panel :(
And I can't figure out how to make that only apply to the button panel/make it not apply to the background

[fickle forge]

I had an idea last night:
Could the bar and on buttons be based on the background image instead of just the avg colors of the whole thing, have like a masked album image and have that on the bar and buttons?

idk if that would be possible, but would be cool too

[fickle forge]

so like here, instead of that solid color, reveal the background album img without the darkness, but still have some blur

[stuck temple]

masking images... good luck with that

[lime harbor]

i achived this that works both black/white covers with dark/light theme

.theme-light #vc-spotify-album-expanded-wrapper ~ #vc-spotify-progress-bar {
    backdrop-filter: blur(20px) contrast(80%) brightness(140%);
}
.theme-dark #vc-spotify-album-expanded-wrapper ~ #vc-spotify-progress-bar {
    backdrop-filter: blur(20px) contrast(95%) brightness(80%);
}```

but i can't share the whole css because it looks off without my theme ><

[stuck temple]

nice

[lime harbor]

@import url('https://s-k-y-l-i.github.io/discord-themes/Theme%20code/spotify.css');

:root {
    --spotify-height: 226px;
    --expanded-margin-left: 0px;
    --small-margin-left: 0px;
    --spotify-image-border-radius: 5px; 
}

.theme-light #vc-spotify-player {
    background: var(--bg-overlay-3,var(--background-secondary-alt)) !important; 
}
.theme-dark #vc-spotify-player {
    background: var(--bg-overlay-1, var(--background-secondary-alt)) !important; 
}```

i made it 😮

[fickle forge]

avg color (even with a l boost) may not be the best way
for things like this, it doesn't look great

[fickle forge]

made this in gimp (image editor)
Pretty cool, but also a bit weird

and if the album was pitch black, this wouldn't really work

well unless it had a brightness boost

[fickle forge]

wait

using background-image: var(--image-var-idk);
sort of works

this is automatic

.barFill__1f56b {
    background-image: var(--vc-spotify-track-image);
    background-size: 240px;
    background-position-y: center;
    filter: blur(2px);
}```

haven't made it apply to the buttons yet

but this is really epic

[fickle forge]

idk if that's possible

[stuck temple]

that's the closest you can get

[lime harbor]

.theme-light .bar_e58961 {overflow: visible;}
.theme-light .barFill__1f56b {
    height:109%!important;
    border-radius: 2.4px 0 0 3.3px;
}```
A little fix I tried to do, for making the filled bar in the light theme as wide as the unfilled.

[stuck temple]

barely noticeable but nice

[green knoll]

p inspiring ppl