Fix Discord being ass at UI (fix new new

[blazing solar]

What is it actually DOING? (Im not a dev, so I'm not sure what I'm looking at in the code)

[green cave]

don't look at the code, look at the attachements

[blazing solar]

what's the difference, besides the width?

[green cave]

https://amazon.com/s?k=prosthetic+eye

[blazing solar]

Thanks smart <bad word that I can't say>. Can I just get a listing of what you did? I wanna see if I wanna put it in my css is all...

[green cave]

If there's too much time on delivery, feel free to use AI, it's not as good as eyes, but will probably be enough
https://gemini.google.com/share/388aa56e9c55

What does this snippet do?

This CSS snippet is a cosmetic "cleanup" for the User Profile UI, specifically targeting how Roles are displayed.

Discord recently updated their UI to make role "pills" larger, with more padding and a different layout. This snippet reverts some of those changes to make the roles look more compact and cleaner.

Here is the technical breakdown of what the code changes:

1. Compacts the Layout:

• It reduces the padding inside the role bubbles (padding: 0 4px), making them shorter and less wide.
• It sets a specific gap between the role color circle and the text (gap: 4px).
• It resets the margins on the little colored circles (roleCircle) to tighten the spacing.

2. Hides the "Remove Role" Button:

• This is the most noticeable change. By default, if you have permissions to manage roles, Discord shows a little "x" or remove button on every role, which adds visual clutter.
• The code opacity: 0 makes the "x" button invisible by default.
• The code &:hover { opacity: 1 } makes the button reappear only when you hover your mouse over that specific role.

3. Fixes Icon Alignment:

• It unsets specific height/width/margins on roleIcon (the little icons some roles have, like the microphone in your screenshot) to ensure they fit properly inside the newly compacted role tag.

Is it safe to use?

Yes, it is 100% safe.

• No Security Risk: CSS (Cascading Style Sheets) is purely a styling language. It cannot access your passwords, token, files, or send data to anyone. It only tells your Discord client how to paint the pixels on the screen.
• Reversible: If you paste it in and decide you hate it, you can simply delete the code, and your Discord will instantly look normal again.
• Resilient Selector: The code uses selectors like [class^=roleTag]. This is smart coding; Discord updates their class names frequently (e.g., changing .roleTag-1a2b to .roleTag-3c4d). By using ^= (starts with), this snippet will likely keep working even if Discord pushes minor updates.

How to use it

1. Open your Vencord (or BetterDiscord) settings.
2. Go to the Custom CSS tab.
3. Paste the code exactly as provided into the editor.
4. The changes should apply immediately (you don't need to restart Discord).

Would you like me to explain how to adjust the roundness (border-radius) if you want them to look more square?

[blazing solar]

Oh, nice. Gotcha. Thanks for writing it (the code, that is)
👍

[ornate zealot]

This works right out the box with moon's role pill colors, so that's very exciting ❤️

[terse cobalt]

I think using mix-blend-difference on the svg is nice so that you can see the x on very white role colors

I use this

.role_af3987 {
  border-radius: 8px;
  &.hasRemoveButton_af3987 {
    -webkit-padding-end: 8px;
    padding-inline-end: 8px;
  }
  .removeButton_af3987 {
    position: absolute;
    color: #999;
    width: 12px;
    margin: 0 4px;
    opacity: 0;
    transition: color 50ms ease-in, opacity 100ms ease-in; 
    will-change: opacity;
    svg {
      mix-blend-mode: difference;
    }
    &:hover {
      opacity: 1;
    }
  }
}

[soft axle]

that doesn't really work, as one of the pics has the ❌s from being a mod, while the other one doesn't

[terse cobalt]

hover over the dot to x it

that's how it used to be

[soft axle]

Thank you

[green cave]

Maybe i could do that
Wanted to be minimal
Small possible addition

[green cave]

AI literally tell you

And otherwise basic reading skills seeing opacity 0 and hover opacity 1 should give it away

[quartz mulch]

Now I just need a fix for whatever this new thing is

genuinely awful

[clear token]

muchas gracias, roles look better with new css

[somber rover]

are you a pedant or smth

[green cave]

I do not know what that mean and couldn't be bothered to search
If it's nice thanks
If it's not nice welp don't care

[green cave]

Remind myself this tmr

[spring epoch]

I hope whatever is making you feel so miserable/negative right now gets better

[green cave]

i updated the snippet

also if you guys want to be nice, please ask to add role icon url in themeattribute so this can work, thanks

[sick turret]

your css is great! do you have other stuff i could look at? any other discord projects you created?

[stable pewter]

.vc-permviewer-role-button { padding: 2px }

[class^=roleTag] {
    > [class^=role] {
        gap: 6px;
        padding: 0 8px;

        > [class^=roleCircle] { margin: unset; }

        > span > [class^=roleIcon] {
            height: 16px;
            width: 16px;
            margin-inline-start: unset;
        }

        > [class^=removeButton] {
            position: absolute;
            height: 12px;
            width: 12px;
            opacity: 0;
        }
    }

    &:hover {
        > [class^=role] > [class^=removeButton] {
            position: relative;
            opacity: 1;
        }
    }
}

heres my version of this snippet
removed rounding since i prefer the default rounding
made x only show up when hovering the role but in its new position and not like old one

[green cave]

so you have empty hole ?

oh wait no the button extand

i feel like this could lead to weird situations

[stable pewter]

i didnt find any issues while testing, seemed fine for me