#**colored role pills**
jaunty laurel
what
wanton valve
WHY DID @import go to that
unkempt rock
Hey that me
jaunty laurel
yeah
jaunty laurel
i clicked random person on the member list
stray lotus
i clicked random person on the member list
next time click me 
outer merlin
Ummmm.... what am I doing wrong? lol
If I take the code block out of quickcss, it loads fine
strange forum
that's crazy
I was updating my version of this snippet literally last night
jaunty laurel
Ummmm.... what am I doing wrong? lol
bug
strange forum
my very scuffed fix for the remove role icon btw ```scss
[class^="roleRemoveIcon_"] {
left: calc(
4px + /* Pill padding /
1px + / "Remove Role" /
4px + / Circle margin /
12px/2); / Circle size */
}
jaunty laurel
Ummmm.... what am I doing wrong? lol
ok i updated it, hopefully this is fixed now
also role remove button works i think
unkempt rock
ok i updated it, hopefully this is fixed now
One day you will make this an @ import
jaunty laurel
One day you will make this an @ import
making it an import means i actually have to maintain it (im not going to)
unkempt rock
making it an import means i actually have to maintain it (im not going to)
typical Css dev
jaunty laurel
i already have two themes to maintain 
unkempt rock
midnight my beloved
outer merlin
ok i updated it, hopefully this is fixed now
Thank you 
jaunty laurel
but hardcoded classnames so insane
its not
class updater is reliable enough now
plus its easier to convert from hard classes to attributes and not the other way around
worldly blade
Hi, thank you for this, the remove button doesn't have the X, I use the updated code
dim haven
how do i use that?
coarse cosmos
is there a snippet of this that works in ptb?
weak hawk
Using rglöckchen's profile as an example, the colours don't show up
worldly blade
they do, also on your profile
valid pivot
does this still work on lastest discord update, ive been seeing alot about an update recently that broke a lot of stuff
valid pivot
https://tryitands.ee/
well i have, thats why im asking
unkempt rock
well i have, thats why im asking
and did it work when you tried it?
valid pivot
no
unkempt rock
Ok then it doesnt work anymore
valid pivot
Guess I’ll have to do it myself
unkempt rock
unkempt rock
@valid pivot
valid pivot
ty
valid pivot
impossible without javascript
outer merlin
Still works for me
I do have the refresh turned off in experiments though.
If that changes things.
valid pivot
I do have the refresh turned off in experiments though.
assuming you're meaning this
outer merlin
Yes, that's the UI update that is breaking everything everywhere lmao
scarlet thunder
Remove role is broken
strange forum
Remove role is broken
#1335796176406184018 message should fix it
scarlet thunder
https://discord.com/channels/1015060230222131221/1335796176406184018/13360486990...
strange forum
hm, seems something is scuffed with the way this snippet does things. Works fine with my own ```css
[class^="role_"] {
position: relative;
overflow: hidden;
[class^="roleRemoveButton_"],
div > [class^="roleRemoveButtonCanRemove_"]
{
position: static;
[class^="roleCircle_"]::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: inherit;
opacity: 0.2;
z-index: 0;
}
}
[class^="roleName_"] { z-index: 1; }
[class^="roleRemoveIcon_"] {
left: calc(
4px + /* Pill padding /
1px + / "Remove Role" /
4px + / Circle margin /
12px/2); / Circle size */
}
}
Ah, it was just a conflict of themes, I fixed
strange forum
alr
strange forum
does anyone has this fixed?
mine never broke
strange forum
hm, seems something is scuffed with the way this snippet does things. Works fine...
so just use this
strange forum
I am on refreshed..
so am I
hasty sonnet
huh than Ig the problem on my css
outer merlin
This also still works for me with refresh, just as another data point
hasty sonnet
ye it works, I just had a conflicting css
snow jay
This breaks with role gradients btw
tall ember
did a quick fix for the new gradient roles that came out https://i.imgur.com/a7IkQSQ.gif
.role_dfa8b6.pill_dfa8b6 .twoColorGradient_e5de78::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
var(--custom-gradient-color-1),
var(--custom-gradient-color-2),
var(--custom-gradient-color-3)
);
background-size: 50% 100%;
transition: background-position 0s;
}
.role_dfa8b6.pill_dfa8b6:hover .twoColorGradient_e5de78::before {
animation: seamlessGradient 5s linear infinite;
}
@keyframes seamlessGradient {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 0%;
}
}
sullen dust
Dont think this works anymore
sullen dust
shame. it looks so good
tall ember
what is not working exactly
sullen dust
this entire thing. It does absolutely nothing for me
tall ember
.role_dfa8b6.pill_dfa8b6 {
position: relative;
background: none;
border: none;
padding-left: 28px;
margin-right: -4px;
> span {
z-index: 1;
}
.roleRemoveButton_dfa8b6 {
position: absolute;
inset: 0;
}
.roleName_dfa8b6 {
margin-left: -4px;
padding-right: 6px;
}
.roleIcon__1e6f1 {
transform: translateX(-4px);
}
.roleCircle__4f569 {
margin: 6px 8px;
&::before {
content: '';
display: block;
position: absolute;
background-color: inherit;
inset: 0;
border-radius: 16px;
opacity: 0.4;
}
}
.twoColorGradient_e5de78::before {
content: "";
background: inherit;
background-size: 50% 100%;
transition: background-position 0s;
}
.threeColorGradient_e5de78::before {
content: "";
background: inherit;
background-size: 50% 100%;
transition: background-position 0s;
}
&:hover {
.twoColorGradient_e5de78::before,
.threeColorGradient_e5de78::before {
animation: seamlessGradient 5s linear infinite;
}
}
}
.expandButton_fccfdf.pill_fccfdf,
.vc-permviewer-role-button {
border-color: transparent;
border-radius: 16px;
background-color: rgb(0 0 0 / 0.1);
&:hover {
background-color: rgb(0 0 0 / 0.2);
}
}
try this out
@keyframes seamlessGradient {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 0%;
}
}
this too for the gradient animation
sullen dust
doesnt seem to do anything
just gets rid of the remove role button
do i got to enable something? @tall ember
tall ember
might be a conflict with another theme you're using
sullen dust
might be a conflict with another theme you're using
I aint using any themes tho
I was in that screenshot
But i disabled it
And it no longer works
strange forum
And it no longer works
Does my version work?
#1335796176406184018 message
If not, it’s likely something on your end
sullen dust
Does my version work?
https://discord.com/channels/1015060230222131221/133579617...
im not really sure if its something on my end because like, im using the latest version of discord. with minimal CSS, no themes, etc
its possible one of these might mess with it?
yeah its definitely related to one of those
because when I remove those plugins its fixed
is it possible to make them compatible?
tested all of them
its better role dot that is the issue
sullen dust
Does my version work?
https://discord.com/channels/1015060230222131221/133579617...
it seemingly makes remove role pop up a lot more, not just when hovering over the circle? but other than that I think it works fine now
But just in case I did something wrong
.role_dfa8b6.pill_dfa8b6 {
position: relative;
background: none;
border: none;
padding-left: 28px;
margin-right: -4px;
> span {
z-index: 1;
}
.roleRemoveButton_dfa8b6 {
position: absolute;
inset: 0;
}
.roleName_dfa8b6 {
margin-left: -4px;
padding-right: 6px;
}
.roleIcon__1e6f1 {
transform: translateX(-4px);
}
.roleCircle__4f569 {
margin: 6px 8px;
&::before {
content: '';
display: block;
position: absolute;
background-color: inherit;
inset: 0;
border-radius: 16px;
opacity: 0.4;
}
}
.twoColorGradient_e5de78::before {
content: "";
background: inherit;
background-size: 50% 100%;
transition: background-position 0s;
}
.threeColorGradient_e5de78::before {
content: "";
background: inherit;
background-size: 50% 100%;
transition: background-position 0s;
}
&:hover {
.twoColorGradient_e5de78::before,
.threeColorGradient_e5de78::before {
animation: seamlessGradient 5s linear infinite;
}
}
}
.expandButton_fccfdf.pill_fccfdf,
.vc-permviewer-role-button {
border-color: transparent;
border-radius: 16px;
background-color: rgb(0 0 0 / 0.1);
&:hover {
background-color: rgb(0 0 0 / 0.2);
}
}
@keyframes seamlessGradient {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 0%;
}
}
[class^="role_"] {
position: relative;
overflow: hidden;
> [class^="roleRemoveButton_"],
> div > [class^="roleRemoveButtonCanRemove_"]
{
position: static;
> [class^="roleCircle_"]::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: inherit;
opacity: 0.2;
z-index: 0;
}
}
> [class^="roleName_"] { z-index: 1; }
[class^="roleRemoveIcon_"] {
left: calc(
4px + /* Pill padding */
1px + /* "Remove Role" */
4px + /* Circle margin */
12px/2); /* Circle size */
}
}```forgive me i dont know how to put it in the CSS thing
tall ember
it seemingly makes remove role pop up a lot more, not just when hovering over th...
you don't need to use both of ours code, just one of them
the popup being buggy is from my side, i haven't gotten to fixing it
i need to rewrite the code fully, cuz for the current version i used refractor code as base
sullen dust
hm, seems something is scuffed with the way this snippet does things. Works fine...
This one works, but doesnst ssupport gradient roles.
Apologize if some of my messages look scuffed. my keyboard is dumb.
tall ember
This one works, but doesnst ssupport gradient roles.
i rewrote my snippet, fixed all the issues with it, if you want it
sullen dust
i rewrote my snippet, fixed all the issues with it, if you want it
I do.
Please send me it.
tall ember
Add this to the top of your custom css:
@import url('https://raw.githubusercontent.com/moonself/Vencord-Repos/refs/heads/main/Full%20Role%20Pills');```
Need to add this to the custom css for the snippet to function:
```css
:root {
--pill-roundness: 16px;
--pill-opacity: 30%;
}
@sullen dust
sullen dust
Do i delete the old code? @tall ember
tall ember
Do i delete the old code? <@342017325320372224>
yeah, you can delete all the old stuff
the import is enough
sullen dust
@tall ember tis missing the animated effect when hovering.
tall ember
it should animate when hovering the dot itself
sullen dust
Not working for me
tall ember
Not working for me
it was working for me perfectly fine, I'll look into it
worldly blade
any kind soul to update it for the latest Discord mess?
I tried, but failed
tall ember
any kind soul to update it for the latest Discord mess?
I tried, but failed
@import url('https://raw.githubusercontent.com/moonself/Vencord-Repos/refs/heads/main/Full%20Role%20Pills');
well, something happened here
I removed all my snippets and theme
tall ember
well, something happened here
I removed all my snippets and theme
oh right you need this
:root {
/* Role Pill Settings */
--pill-roundness: 16px;
--pill-opacity: 30%;
--pill-border: false; /* "true" to enable */
}
thank you
maiden valve
snippet got killed by new role design
outer merlin
I completely forgot this was a snippet until it broke. My brain just incorporated this as a default Discord visual (cos it makes so much sense). I was damn near having an aneurysm trying to find the Discord setting to fix it before I remembered it's CSS lmao
coarse cosmos
snippet got killed by new role design
hope to get fix soon 😅
outer merlin
```css
@import url('https://raw.githubusercontent.com/moonself/Vencord-Repos/ref...
I've been poking at your code for this for a couple days now but it seems like Discord completely changed the role list and I don't know enough CSS to fix to the new rules. Are you willing to take a peek? No pressure if the answer is no, I just relied on this a lot for modding (easier to see what roles someone has at a glance when it's bigger than a dot lol)
strange forum
I've been poking at your code for this for a couple days now but it seems like D...
/* Role pill background colour */
:is([data-list-id^="roles-"], [data-list-item-id^="roles-"]) > div {
position: relative;
> * { z-index: 1; }
> [class*="-roleCircle"]::before {
content: "";
position: absolute;
inset: 0;
background: inherit;
border-radius: var(--radius-round);
opacity: 0.3;
z-index: 0;
pointer-events: none;
}
}
this is my own version and does not look the same as theirs, but it works mostly the same
tall ember
I've been poking at your code for this for a couple days now but it seems like D...
I have updated the repo and fixed the issues
outer merlin
Thank you!! 💕
maiden valve
both the original and fripe/moon's snippets died with today's css hell
tall ember
i am fixing it right now, will update the repo shortly
maiden valve
might aswell ask refactor if they're chill with deleting so you can repost /j
tall ember
might aswell ask refactor if they're chill with deleting so you can repost /j
i was thinking about posting my snippet in #🎨-css-snippets so people wouldn't need to search it all the way here for it