#Spotify
whole barn
zinc token
love it but there's a few px on the left that aren't being covered by the album image, so i just added left: 0; to #vc-spotify-player::after and it fixes it but not sure if that's the best approach lol
timber tapir
love it but there's a few px on the left that aren't being covered by the album ...
very good catch, yes thats the correct way.. its actually offset to the right a bit
updated snippet
zinc token
timber tapir
now that you pointed it out i can really see it in the screenshots lmao
wish i could update them
zinc token
🤭
outer nest
idk why but it doesnt work for me
timber tapir
idk why but it doesnt work for me
because you are using outdated vencord
outer nest
oh.. TY
wind dust
add clip-path: inset(0); to the end of #vc-spotify-player::after if you want the background to not leak outside its bounds
timber tapir
add `clip-path: inset(0);` to the end of `#vc-spotify-player::after` if you wan...
leak outside its bounds?
could you elaborate please
wind dust
wind dust
the ideal way would probably be to use backdrop-filter on another element, like this: ```css
#vc-spotify-player {
background: transparent !important;
position: relative;
--blur-amount: 20px;
--darken-percent: 0.5;
}
#vc-spotify-player::before,
#vc-spotify-player::after {
z-index: -1;
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
#vc-spotify-player::after {
backdrop-filter: blur(var(--blur-amount));
}
#vc-spotify-player::before {
background: linear-gradient(rgba(0, 0, 0, var(--darken-percent)), rgba(0, 0, 0, var(--darken-percent))),
var(--vc-spotify-track-image);
background-size: cover; /* replace "cover" with "100% 100%" if you have your blur super high, it looks better */
}
which will make the background edges not become more and more transparent as the blur intensity is increased
timber tapir
could you show a comparison please?
wind dust
add `clip-path: inset(0);` to the end of `#vc-spotify-player::after` if you wan...
old has this suggestion added.
both on 80px blur
same darkening
timber tapir
well ill check out your clip path suggestion in a bit and probably apply it to my snippet
but the rest is probably a bit out of scope for me so i suggest you post it yourself as an alternative to my snippet, optimally with a comparison so people can decide
wind dust
That's fair.
How do I get perms to post in #🎨-css-snippets?
timber tapir
v+ snippet @wind dust
btw you might be able to change the darken from being a linear gradient to just using a filter with brightness()
that's mostly a relic from when i was using background-image on the element itself instead of using ::after
timber tapir
this is also kinda cool
- height: 100%;
+ height: calc(100% + 53px);
+ #vc-spotify-player + .container_ca50b9 {
+ background: transparent !important;
+ }
delicate ermine
there any way to make this work with the snippet that adds a wave effect to the top?
this one
wind dust
there any way to make this work with the snippet that adds a wave effect to the ...
not without essentially rewriting it from scratch
delicate ermine
alright thought so just wanted to check
wind dust
alright thought so just wanted to check
just did said rewrite ```css
/* Spotify player album art background */
#vc-spotify-player {
--blur-amount: 8px;
--brightness: 40%;
--wave-width-mult: 2;
position: relative;
/* A bit of a gradient at the bottom */
--normal-bg-colour: var(--bg-overlay-1, var(--background-secondary-alt));
background: linear-gradient(to bottom, transparent 80%, var(--normal-bg-colour) 100%) !important;
border-bottom: unset;
}
#vc-spotify-player:hover {
background: linear-gradient(to bottom, transparent 60%, var(--normal-bg-colour) 100%) !important;
}
#vc-spotify-player::before {
content: "";
position: absolute;
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="240" height="1000" viewBox="0 0 240 1000" version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <defs id="defs1" /> <path d="m 239.99916,12.805537 c -46.64873,0 -61.48394,-13.02663522 -121.64873,-12.99995922 C 58.350003,-0.19442222 43.350003,12.805537 8.58307e-6,12.805537 V 999.8056 H 240.00001 c 0,0 -8.5e-4,-983.905753 -8.5e-4,-987.000063 z" id="path1" style="stroke-width:0.84507" /> </svg>');
--wave-height: 13px; /* as set in the SVG */
height: calc(100% + var(--wave-height));
top: calc(-1 * var(--wave-height));
width: calc(var(--wave-width-mult) * 100%);
left: 0;
z-index: -1;
animation: spotify-wave 4s linear infinite paused;
animation-delay: 0s;
background: var(--vc-spotify-track-image);
background-size: calc((1 / var(--wave-width-mult)) * 100%) 100%;
filter: blur(var(--blur-amount)) brightness(var(--brightness));
}
/* Only animate when unpaused */
:has(.vc-spotify-pause) #vc-spotify-player::before {
animation-play-state: running;
}
a tad scuffed if you're in a VC, or otherwise have a box appear above the spotify div, but oh well
but it works for adding the wave
delicate ermine
just did said rewrite ```css
/* Spotify player album art background */
#vc-spoti...
it only works when im paused for some reason 😭
glass narwhal
any way to fit it within the margin of the rounded corners
random coral
border-radius
random coral
dw
:)
good luck
I stand by my opinions
fuck css ;w;
making things look nice is too hard
glass narwhal
fr
wait whaaa
not recognized as an actual element
am I putting it in the wrong place?
glass narwhal
ahhh ok
random coral
not your fault lol :)
glass narwhal
the height looks fine and the radius yeah its slightly off
but I can deal with it tbh
oh how about i just add a gradient
like I saw aboive in this thread
glass narwhal
oh nicee
pastel lagoon
just did said rewrite ```css
/* Spotify player album art background */
#vc-spoti...
Just saw this and wondered what spotify-wave is.
Maybe add the keyframes too?
wind dust
Just saw this and wondered what `spotify-wave` is.
Maybe add the keyframes too?
@keyframes spotifywave {
0% {
-webkit-mask-position-x: var(--spotify-vencord-wave-width);
}
100% {
-webkit-mask-position-x: 0;
}
}
```It's the animation defined in the original snippetoh i see