Compact User Area

[dark stag]

is it possible to have the animation play when hovering over it instead of just when you take it off?

[hallow lion]

Yea but it looks not very nice. The Problem is that I have to animate this with max-height and its problematic to animate because the browser has to recalculate layout and repaint for each frame, since max-height affects the element's box model and layout flow. This is the reason because its kinda laggy:

So you can add this which is not the whole animation but its not so laggy:

.visual-refresh .panels_c48ade:hover .wrapper_e131a9,
.visual-refresh .panels_c48a9 .wrapper_e131a9:hover,
#vc-spotify-player:hover,
.visual-refresh .panels_c48ade:hover #vc-spotify-player,
.visual-refresh .panels_c48a9 .wrapper_e131a9:hover #vc-spotify-player {
  transition:
    transform 0.15s ease 0.01s,
    opacity 0.3s ease 0.01s;
}```

[dark stag]

looks just fine to me, its the closing thats a little laggy

[hallow lion]

yea I know Its because I only used the max-height in the closing animation. Thats the reason I wrote "not the whole animation". The user area opens immediately, but it looks as if the opening is animated. Thats the trick behind it xd Idk how to explain it

But the trick didnt work in the other way

[dark stag]

didnt look good or didnt work at all?

[hallow lion]

didnt work. When I do that, the user area closes instantly idk

[dark stag]

weird

[hallow lion]

is probably due to the code from me itself

[latent cape]

snippet isnt working

[hallow lion]

First of all, "snippet isnt working" is not very helpful, I need more details if you want a fix.
Also the snippet works perfectly fine. Most likely, you have some other CSS code that is affecting the snippet...

[hallow lion]

Thats not my snippet bro

or why are you forwarding the message from another thread?

Also I checked this right now and there is no overlapping

but anyways if you have something overlapping, look after z-index

[next lily]

Forwarded from another thread. Issue seems to belong to this CSS

[next lily]

Fixed it! tyyy (another css had a 5000 z-index so I set it to like 4 and it works now)

[hallow lion]

cant be this css

[hallow lion]

yea sometimes another css overwrites some classes

that is usually the problem

[fair flume]

would it be possible to add the "stream your current game" thing to the hidden part?

[hallow lion]

keep the import etc and only add this:

.visual-refresh {
  .panel__5dec7 {
    max-height: 0;
    opacity: 0;
    padding: 0;
    overflow: hidden;
    will-change: transform, opacity;
    transform: translateY(5px);
    transition:
        max-height 0.15s ease,
        transform 0.15s ease 0.055s,
        opacity 0.3s ease,
        padding 0.3s ease;
  }
}

.visual-refresh .panels_c48ade:hover .panel__5dec7 {
  max-height: 150px !important;
  transform: translateY(0);
  opacity: 1;
  transition:
    max-height  0s ease;
}

.visual-refresh .panels_c48ade:hover .panel__5dec7 {
  padding: 8px;
}```

Yea this Version of the Compact User Area is very laggy because of max-hight. I made another version of it but idk because of the 12 :has many users will have problems I think. I dont think its worth making it public

[fair flume]

\o/

perfect

[hallow lion]

[fair flume]

🤔

almost perfect... whats the best way to adjust the height of it evenly?

[hallow lion]

Thats not a part of my Snippet (Im not changing the normal container high). There is already a snippet that adjusts the height of the text field to the user area. Maybe that would be the better way idk?

[fair flume]

hmm, that might be better, yeah, there is a fair bit of padding on the top and bottom of the text box so could take from that easy enough ^^

[hallow lion]

Yea Idk I dont have this snippet because I like the round corners like this more

But maybe Ive just gotten used to it

[ornate sky]

It appears the recent Discord Update broke this snippet

[hallow lion]

Yep

I am working on fixing it, but I am currently not home

[next lily]

Will it automatically update for us because it's imported?

[hallow lion]

Yes if u restart discord or reload the css ig

[hallow lion]

@ornate sky @next lily Should be good now if u refresh the css

[astral path]

doesnt work 🥹

[fair flume]

The combined version im using works at the moment:

@import url("https://raw.githubusercontent.com/Augenbl1ck/Discord-Styles/refs/heads/main/userAreaSpotifyControl.css");

:root {
    /* Only include this part if you wish to change these variables */
    --user-area-border-width: 1.5px;
    --user-area-border-color: rgba(121, 227, 121, 0.5);
}

.visual-refresh {
  .panel__5dec7 {
    max-height: 0;
    opacity: 0;
    padding: 0;
    overflow: hidden;
    will-change: transform, opacity;
    transform: translateY(5px);
    transition:
        max-height 0.15s ease,
        transform 0.15s ease 0.055s,
        opacity 0.3s ease,
        padding 0.3s ease;
  }
}

.visual-refresh .panels_c48ade:hover .panel__5dec7 {
  max-height: 150px !important;
  transform: translateY(0);
  opacity: 1;
  transition:
    max-height  0s ease;
}

.visual-refresh .panels_c48ade:hover .panel__5dec7 {
  padding: 8px;
}```