🎨-theme-development

[bleak mica]

or is this just me

okay, wtf?

::-webkit-scrollbar is the selector causing the performance issues

/*
    Remove scrollbars
*/
::-webkit-scrollbar {
    width: 0 !important;
}```

this causes terrible lag when typing

alone, no other css loaded

or not, reloading made the issue go away.

i hate behaviour that just. disappears when you start to investigate it

[regal torrent]

@candid python

[candid python]

thank you (i figured it out myself) but thanks !

[atomic plank]

That annoys me still

[gray spoke]

Does the scrollbar-width property work?

[bleak mica]

i have no idea. the lag issue resolved itself inexplicably

[waxen citrus]

i want to make it so the circle border is square also the new version dosent fix it

[onyx mesa]

i don't think it's possible anymore to hide it with just css

[toxic jungle]

e

[pure cairn]

without using has()*

You can definitely hide it with that one

[onyx mesa]

has is removed from my css vocabulary

[waxen citrus]

can someone help me with this, i want to make it so the gray border around the profile picture is square (NOT THE AVATAR DECORATION)

this is the css

it is up to date

[plain kelp]

That circle is done with svg

Tweaking that is probably nontrivial

[onyx mesa]

i removed the original mask and added my own, found that to be the easiest way to replace it

[waxen citrus]

could u possibly send it to me

[onyx mesa]

it's not gonna be square

but hold on

.layer_da8173 {
        .mask__68edb foreignObject[mask*="uid_"] {
            mask: none !important;
        }
        .avatar__75742 .mask__44b0c,
        .avatar__75742 .avatarDecoration__44b0c {
            rect[width="28"][height="36"] {
                fill: none;
            }
        }
        .outer_c0bea0.custom-theme-background.custom-user-profile-theme {
            .banner__68edb {
                mask-image: radial-gradient(circle at 52px 97px, transparent 43px, black 44px);
            }
        }
}

[tough pike]

any way to change the font of discord to an aliased/bitmap one? sum like this

[onyx mesa]

#🎨-theme-development message

[tough pike]

thank you but vvere is the aliased part

https://cdn.discordapp.com/emojis/1204049274783145986.webp?size=48&name=time

[onyx mesa]

you can replace the font to whatever you want there

[tough pike]

nvm

the spacing looks like Hot Ass

sometimes it even cuts off at the beginning

[burnt pewter]

Don't judge. Please.
I suck at everything when it comes to this and I barely know any CSS but there is one thing i desperately need help with.

What I have done is I took an already existing theme and started adding my own small things to it, as a way to yk learn and stuff. But for the most part I use the dev console to know the HTML class so i can reference it in CSS and actually be able to change it and stuff. I want to ask if I'm doing things correctly or not. I'm a noob when it comes to thing even after the changes I already did and I truly wonder if there is a quicker way to know what the hell i am doing

Here are some examples of the stuff I've changed:
Glow purple when I hover over the buttons
A lot of stupid changes to the original theme
a lot of bugs.

If you can also see in the images i showed there is a green button. I have no idea how I can change the color of it to purple as well. I've tried to find the class name for it using the dev console element search but still failed to actually figure out why it's green.

In summery I am a noob trying to learn and I have some issues with my theme and I wonder if there is a better way to do this other than to guess element classes in CSS or try to find the class name using the dev console element searcher. Thanks in advance!

[pure cairn]

It's probably set to green when hovered
Using devtools element picker, you can select the element and then click on the small :hov button, then tick the :hover state

[burnt pewter]

When it's on it becomes green not when it's on hover

[pure cairn]

Then it's the same element but with an additional class

[burnt pewter]

I will check it out

thank you!

[sour path]

does anyone know how to remove discord's "mobile indicator" ? (not the one from the official vencord plugin)
because as you can see it's kinda ugly with a radial status theme..

[burnt pewter]

what theme are you using

send the file let me check it for you rq

[burnt pewter]

I use the same when

here you see this line
--rs-phone-visible: block; /* Visibility of the phone icon next to a users avatar. | block = visible | none = hidden */

change the block to none

it should disapear

[sour path]

oh thanks

[burnt pewter]

np

[full rover]

Always wondered what the variables for the fonts meant

Mine looks similar, just doesn't have font-size option, which I can probly easily add

@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700");
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700");

:root {
    --custom-font: "Ubuntu";
    --custom-mono-font: "Ubuntu Mono";

    --font-primary: var(--custom-font), 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-display: var(--custom-font), 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-headline: var(--custom-font), 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-code: var(--custom-mono-font), 'Consolas';
}

[atomic plank]

I've almost gotten rid of the activity bar, except these 2 elements appear to have the same name, but element 1 is the one that's adding weird padding to the member list, but also only in specific servers:

My current CSS is:

.headerContainer__095fe {
  display: none;
}

.container__0f2e8 {
  display: none;
}


.membersGroup_c8ffbb {
  padding-top: 15px !important;
}```

Nevermind fixed it by adding

h3.membersGroup_c8ffbb:has(span[class*="headerContainer"]) {
  display: none;
}

[clear siren]

avoid :has(), use something like :first-of-type instead

:has() will easily ruin performance

not sure if it works properly in this case but yeah

[atomic plank]

I can try that, but performance does feel fine

[clear siren]

also sorry for the ping I can't read

[atomic plank]

Np, I kinda forgot it was in my name

First of type indeed does not work

[echo frost]

first of type won't work for this?
because activity isn't always there

[clear siren]

yeah I just looked at screenshot on phone and threw that as an example

idk what is the best way to do that without :has() but if :has() must be used at least throw in a combinator like > and use regular class instead since regular classes are already being used

[echo frost]

oh yeah

and especially don't use *=, it should be ^=

if it's going to be an attribute selector

which it shouldn't be

oh but you could do h3.membersGroup:first-of-type:has(>span.headerContainer) ig

[iron smelt]

[echo frost]

what

that's better than what they did

[iron smelt]

https://tenor.com/view/absorption-absorb-cat-absorb-le-epic-cat-big-ahh-eyes-gif-4195419603504489856

[chilly knoll]

Is there any themes that add chat bubbles like this? Couldnt find any that works in #🎨-css-snippets (unless im blind)

[regal torrent]

pretty sure the dark+ theme by devevil adds something like that

[chilly knoll]

Got a link? Cant find it through search

[regal torrent]

erm

i think i can just send the file directly

hold on

[chilly knoll]

Dyk which parts are for the chat bubbles? I can put them in a separate theme file and give credits ig

[regal torrent]

.contents_c19a55 .messageContent_c19a55, .container_b7e1cb {
background-color: var();
display: inline-block;
max-width: 650px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin: 0;
padding: 8px;
border-radius: 15px;
}

set background color to whatever

[half crystal]

@import url(https://blade04208.github.io/ddex4/src/bubbles.css);

[chilly knoll]

They make my messages go on the right and the corner radius is diff on the bottom corners

No worries ig

[burnt sky]

only awful thing about bubbles is that they make codeblocks etc... look weird

[half crystal]

How do you mean

[half crystal]

That looks normal, what do you mean

[chilly knoll]

Thats why i sent the screenshot bcuz the ones pylix made doesn't have weird issues with codeblocks embeds etc

[burnt sky]

sweet managed to fix this neat snippet up so one its always animating without having to hover and also fixed it so it doesn't use 20% cpu usage lol #🎨-css-snippets message

[errant zenith]

oops nvm someone already sent the exact thing

[chilly knoll]

lmao yeh

thnx tho anyway

https://vencord.mudaranrhiod.xyz/snippets/chat-bubbles.css if anyone wants. i made it use a var --chat-bubble-bg: #454351; since its more convient for me with my theme

[atomic plank]

How's that better?

[echo frost]

idk how performance helpful the :first-of-type is, I think it should be pretty good though because then it only has to run the :has() check on one element
using > means it only has to check immediate children of members group instead of every single branching ancestor of it
.class selectors are way more efficient than attribute selectors

[atomic plank]

Makes sense, I just can't select the whole class there

[echo frost]

?

it's just headerContainer__095fe

and a .

[clear siren]

using both the :first-of-type and :has() might be worse for perf than just :has() because it's an additional check and selectors are parsed from right to left according to some articles but idk

very negligible impact in this case either way

[atomic plank]

I do that already and it leaves an invisible box, hence the :has selector

:has isn't affecting my performance at all, so I see no reason to change it

[echo frost]

did you not read what I said?

[echo frost]

im saying to use a slightly different has that does exactly the same thing but is less performance intensive

[echo frost]

well I think :has() might not be processed first because it's a pseudoselector?
but idk

[clear siren]

no idea

[atomic plank]

Nope this in fact leaves an invisible box

it has to be :has from my testing it

[echo frost]

that is :has

I didn't type the full class names though

[atomic plank]

But that leaves an invisible box, where using mine does not

I do not know what to tell you other then what I'm experiencing with it

[echo frost]

what exactly is your css

[atomic plank]

/* Hide activity box.*/
h3.membersGroup_c8ffbb:has(span[class*="headerContainer"]) {
  display: none;
}
.headerContainer__095fe {
  display: none;
}
.container__0f2e8 {
  display: none;
}
.membersGroup_c8ffbb {
  padding-top: 20px !important;
}```

which again, is fully working and is not affecting my performance at all

[echo frost]

no when you use my method

[atomic plank]

/* Hide activity box.*/
h3.membersGroup:first-of-type:has(>span.headerContainer) {
  display: none;
}
.headerContainer__095fe {
  display: none;
}
.container__0f2e8 {
  display: none;
}
.membersGroup_c8ffbb {
  padding-top: 20px !important;
}```

using your CSS which doesn't work

[echo frost]

yeah because I didn't type out the class names

[atomic plank]

So it should be what... this?:

h3.membersGroup_c8ffbb:first-of-type:has(span[class*="headerContainer"]) {
  display: none;
}```

[echo frost]

/* Hide activity box.*/
h3.membersGroup_c8ffbb:has(>span.headerContainer__095fe) {
  display: none;
}
.container__0f2e8 {
  display: none;
}
.membersGroup_c8ffbb {
  padding-top: 20px !important;
}```

[echo frost]

no. there's no reason to use an attribute selector, only reasons not to

[echo frost]

replace it all with this

[atomic plank]

That in fact does work

Latency feels exactly the same to me

[gray spoke]

Profile it and check

[atomic plank]

Discord has a profiler?

[gray spoke]

https://developer.chrome.com/docs/devtools/performance

[atomic plank]

ah that would explain why I didn't know that... I don't use chrome XD

Yeah I have no idea what I'm looking at here

Scripting lines up for the most part with those long tasks? This is using the CSS obsidian posted

[echo frost]

how are you testing it?
the best way I can tell is by typing
but I think if your cpu usage isn't high it won't make a difference
but mine will be a bit better

[atomic plank]

Clicking on servers to load member lists

[echo frost]

I don't think it'll really affect that

[pure cairn]

Typing keeps refreshing the memberlist over and over again, so it's more evident than just switching servers

[atomic plank]

That's weird and stupidly unoptimized

[gray spoke]

Is it refreshing to show your user's typing status in the member list?

[pure cairn]

I have no idea, but if you enable the repainter display and start typing, it will keep flashing green until you stop

[gray spoke]

I'd expect it to be repainting every frame if there's an avatar with a GIF or something

[echo frost]

but the paint flashing is a rendering thing?

:has() isn't laggy because of rendering?

[gray spoke]

Main time take up is Recalculate Style, yes.

[clear siren]

glass discord gang

[crimson skiff]

you will become the boy from final destination that gets crushed by a glass pane

[clear siren]

handling big panes of glass is part of my job..

also just marathoned the movies recently lol

[echo frost]

this annoys me

pretty cool at first glance though

also is the weird thing aroundf folders intentional?

[clear siren]

doubt it

also you can't unsee this

[pure cairn]

Thanks, now I hate it

[echo frost]

yeah

that annoys me too

[pure cairn]

[echo frost]

and I don't really like the scrollbars

[pure cairn]

I usually hide them unless I'm hovering a certain element

[chilly knoll]

And this

[clear siren]

yeah I should retract my fire reaction this sucks ass

[pure cairn]

[pure cairn]

Ugh the chatbar activity icon is also misaligned

Ok, the longer I look at that screenshot the more cursed things I see

[chilly knoll]

I think its edging (i hate brainrot but couldn't resist)

[crimson skiff]

hence why i wanted a glass pane to land on you

[brittle iron]

hyprland?

Based

[chilly knoll]

Not my ss lol

Like the theme i screenshotted i mean

[stoic fjord]

how do i change theese status colors for maself

for instance i want the online to be purp

and i want it to look purp when its also like this

[copper flame]

https://github.com/catppuccin/discord/blob/main/src/components/_details.scss#L1-L18

this is pretty generalized but you can make it more specific if you'd like it to only apply to status indicators

[lunar hamlet]

_details.scss: Lines 1-18

$svg-platform-colors: (
  //online indicators (not var based)
  $yellow: #ca9654,
  $red: #d83a42,
  $green: #43a25a,
  $overlay1: #82838b,
  "var(--twitch)": #9147ff
);
@each $var, $color in $svg-platform-colors {
  svg [fill="#{$color}"],
  svg[fill="#{$color}"] {
    fill: #{$var};
  }

  div[style="background-color: rgb(#{red($color)}, #{green($color)}, #{blue($color)});"] {
    background-color: #{$var} !important;
  }
}

[copper flame]

could also match on the svg mask

[stoic fjord]

so if im guessing it works with hex?

[copper flame]

well some are inline hex some are inline rgb

just use devtools to check

[stoic fjord]

okeee

thanksss

[pure cairn]

scss jumpscare

Real question though, is it worth using over regular css? And do .scss files imports work just as css ones? (as in, how tf do I make them work on here)

[copper flame]

if you're doing repeated work or something horrendously unmaintainable preprocessors make it easier

wdym about imports and making them work

[edgy sentinel]

scss imports are resolved at compile time and bundled into a single file

little reason to use scss imo

[pure cairn]

Oh, so it could be useful for a little project I'm currently doing, that's nice

[copper flame]

vee wants me to make a change then copy paste it 20 times

[edgy sentinel]

what are you doing to have so much duplicated code

[copper flame]

you love catppuccin

[pure cairn]

Worded it badly, my actual question is
can I just @import url() just like regular css in the quickcss editor?

[edgy sentinel]

you compile scss down to css

you cannot import scss

[copper flame]

ygop

[edgy sentinel]

it's like typescript, it's just a superset that you transpile down

[copper flame]

🏳️‍⚧️pile?

@edgy sentinel stop being woke

[pure cairn]

Oh ok, I'll read more about it later then

Thanks

[clear siren]

scss is a pretty useless abstraction these days with regular css being as powerful as it is

[copper flame]

all its good for now

[clear siren]

and scss often results in really stupid css

[pure cairn]

To be fair, repetitive things could just be nested, right?

Like I did in my old "hide status" snippet

(give me a sec to find the link)

https://github.com/Krammeth/css-snippets/blob/main/StatusHider.css

This thing

[copper flame]

yeah this wouldn't really be different in scss

wtf are you doing with :has(&)

[pure cairn]

So, basically

Instead of duping the code for every user whose status you want to ignore

You just duplicate the first line

And it'll work with all the following selectors

[copper flame]

well yeah but why the has(&)

[pure cairn]

Because user avatar

I'm checking for the ID in the file url

I know it's poorly optimised, it was made when discord's base css wasn't as fragile as it's now

Where it can't even handle a couple of :has() selectors without shitting itself

If you have a better idea I'm all ears

[copper flame]

wait does :has(&) {& [class^=referenceContainer_]{display:none}} become :has([class^=referenceContainer_]) { display: none }

[pure cairn]

No

[copper flame]

then???

[pure cairn]

[data-list-item-id^="members-"]:has([class^=avatarStack_] > [src*="ID"]) [class^=subText_], /* members */

This is the first actual selector without nesting

The others are all the same, just with different classes

It's just a cascading thing

[copper flame]

oh my god

thats genuinely insane

[pure cairn]

Yeah

And it works for every ID you add at the top

[copper flame]

its like passing the relativity up the tree

[pure cairn]

Yop

I tried it while I was trying to simplify the code a bit and it seemed to work

So I guess I just kept going lol

[copper flame]

how does devtools show the un nested rule

this genuinely feels like undefined behaviour

[pure cairn]

I would have to load the snippet, I can send a screenshot after I'm done with dinner

Give me like 5-10 minutes

[copper flame]

take your time

[pure cairn]

Or just copy paste the code and try it out with my profile

Some selectors should still be working

Haven't updated them in a while tbh

[copper flame]

oh my god????

it quite literally just does that

[pure cairn]

Yop

https://tenor.com/view/todd-howard-it-just-works-bethesda-this-all-just-works-gif-20598651

[pure cairn]

ok, I've read some stuff about scss compiling

didn't know it was a dependency

[echo frost]

ew scss

why would you change a "fun" "programming language" like css

[spare mural]

mixins, functions, actual variables, foreachs, ifs, SCSS is REALLY REALLY good, css is still lacking a ton of features
the only "powerful" thing about css now is nesting and parent selector, it doesnt come close to the power of scss

every time i do something with css i try to use scss features and then have to convince myself that i shouldnt include scss in a small project, its really just good

[echo frost]

parent selector!???!

[spare mural]

&

[echo frost]

do you mean :has()?

[echo frost]

that's not parent selector

it's just a nesting thing

[spare mural]

that is indeed the parent selector https://sass-lang.com/documentation/style-rules/parent-selector/

[echo frost]

that's not css

[spare mural]

scss invented it

[echo frost]

but it doesn't select a parent

it's a nesting thing

parent selector is a terrible name for it

it isn't always even the parrent

[plain kelp]

It refers to the parent rule, not the parent element

[echo frost]

yeah

[plain kelp]

So calling it parent selector isn't wrong per se

[echo frost]

better name though: nesting thingy

[plain kelp]

Just confusing

[spare mural]

"nesting selector" doesnt make much sense either

[plain kelp]

I can get behind that

[echo frost]

did i call it that?

[plain kelp]

Nobody said nesting selector though

Nesting thingy

[spare mural]

"nesting thing" id very much think you mean the "nesting selector" as it is now called in vanilla css https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector

[echo frost]

did i call it that either

you forgot the y smh

but nesting selector makes way more sense than parent selector

[spare mural]

nesting selector... selecting nesting..? what would "selecting nesting" mean?? parent selector makes much more sense as it very much is the selector of the css rule block.. the parent of the css rule block if you will, parent selector
makes perfect sense imo

[plain kelp]

Parent selector sounds like it'd be related to child selector and sibling selector

[echo frost]

it's the selector used in nesting

parent is more commonly used to refer to the parent element

[spare mural]

if you think like this it makes sense

/* parent */
.something {
  /* child */
  :not(& /* parent used in the childs selector */ ) {
    
  }
}

[spare mural]

parent usually isnt referring to anything in css because elements are a concept of html not css, css has rules, not elements

[plain kelp]

But that pairs very poorly with the child selector >

[echo frost]

???

[echo frost]

yes, i get why they called it that
still doesn't make it not confusing

if you think like that, then this is a natural follow up

/* parent */
.something {
  /* child */
  :not(&) {

  }
}

/* sibling */
.somethingElse {

}

[spare mural]

css has no "elements" so you cant say "parent is more commonly used to refer to the parent element" because "element" isnt a concept in css
css is a collection of styles in rule sets, which has selectors that refer to specific elements in html, elements themselves do not exist in css though
you always have to split up the two, different things for different purposes which work together to create websites

[echo frost]

css has rules that affect html elements

[plain kelp]

Can you please address the existence of the child selector

[spare mural]

what is there to address

[echo frost]

child selector affects the child element

[spare mural]

.. yeah?

idk what you want me to say or explain or whatever

[plain kelp]

You want parent selector and child selector to refer to relations in completely different trees

That'd be very confusing

You are also claiming css selectors are unrelated to html element nesting which is just humorously false

[spare mural]

? im saying that elements just dont exist in css, css rules refer to specific html elements but the elements themselves do not exist in css
im not claiming anything other than this 😭
thats why i think parent in the eyes of css makes much more sense referring to a rule set (or its selector) than referring to an element, in this case a nested rule set its parent would be the rule set its in, its parent
for an actual "parent element" selector a pseudo-element such as :parent would make more sense

[echo frost]

but you think child selector or next sibling selector makes sense when they refer to html elements?

[spare mural]

you are missing my point again

[echo frost]

(technically they're called combinators not selectors)

[plain kelp]

You are failing to make your point

[spare mural]

its quite simple to understand my point actually when you also realise that in nesting you cant treat parent- and child-rulesets the same
im not saying that css selectors are unrelated to the html structure, im saying that css doesnt have the concept of an "element" and it works with element selectors and descriptions of relationships (which is very much related to the html structure)
the & exists as a shortcut to the parents selector, something like this is unnecessary for children... you of course have to select the children using a selector within the parents css ruleset
> and + refer to specific relations between elements not the elements themselves, this is why they arent officially called "child selector" or "sibling selector" but child/sibling "combinators"
additionally parent element selectors would just not work in css because css works by flowing from top to bottom, you cant just "go back"

[echo frost]

that still doesn't make calling them parent selectors not confusing

[pure cairn]

[gray spoke]

[waxen citrus]

does anybody have a theme that makes everything square because every one i find just like dosent work in some way

[gray spoke]

Mind elaborating on the not working part?

[waxen citrus]

i mean certain parts like some of the pfps dont work and some the status dosent work (online, dnd etc)

[gray spoke]

You can start with one of those themes and patch on top of it using Quick CSS then

[waxen citrus]

how do i "patch"

[pure cairn]

Go for the classic

* { 
  border-radius: 0 !important;
}

[waxen citrus]

that just dosent work for me

this ones perfect but for me the online, idle and do not disturb icons dont fit into the box like they should

[pure cairn]

Use ``` at the start and end of your code, please

[waxen citrus]

*::before,
*::after {
    border-radius: 0 !important;
}

.svg_cc5dd2 > mask,
.svg__44b0c > rect,
.svg__44b0c > circle,
.svg__44b0c rect[mask='url(#:rhi:)'],
.avatar__20a53 .status_a423bd {
    display: none;
}

.mask__68edb > foreignObject,
.svg__44b0c > foreignObject,
.svg__2338f > foreignObject {
    mask: none;
}

.wrapper__44b0c:has(rect)::after {
    content: '';
    display: block;
    position: absolute;
    height: 8px;
    width: 8px;
    bottom: -4px;
    right: -4px;
    border: 2px solid var(--background-base-lower);
}
#app-mount .wrapper__44b0c:has(rect[fill='#40a258'])::after {
    background: #40a258 !important;
}
#app-mount .wrapper__44b0c:has(rect[fill='#d83a41'])::after {
    background: #d83a41 !important;
}
#app-mount .wrapper__44b0c:has(rect[fill='#cc954c'])::after {
    background: #cc954c !important;
}
#app-mount .wrapper__44b0c:has(rect[fill='#82838b'])::after {
    background: #82838b !important;
}
#app-mount .wrapper__44b0c:has(rect[fill='#9147ff'])::after {
    background: #9147ff !important;
}

.lowerBadge_cc5dd2 {
    border: 2px solid var(--background-base-lower);
    bottom: -4px;
    right: -4px;
}
.upperBadge_cc5dd2 {
    border: 2px solid var(--background-base-lower);
    top: -4px;
    right: -4px;
} ```

oh im sorry

didnt know that

[pure cairn]

Cursed

[waxen citrus]

how comes

and how do i fix it

[gray spoke]

Why is the background being changed in the square theme haha

[waxen citrus]

i dont know

it isnt for me

[gray spoke]

Just statically analysing the CSS it seems to change the status badge colours

[waxen citrus]

but it should make the status badges fit in the boxes but it dosent except for offline

[vestal field]

it's creating new pseudoelements and giving them the colors of the existing status badges

because its impossible to square the existing status badges

[vestal field]

here's an updated version

*,
*::before,
*::after {
    border-radius: 0 !important;
}

.svg_cc5dd2 > mask,
.svg__44b0c > rect,
.svg__44b0c > circle,
.svg__44b0c > g,
.svg__44b0c rect[mask='url(#:rhi:)'],
.avatar__20a53 .status_a423bd {
    display: none;
}

.mask__68edb > foreignObject,
.svg__44b0c > foreignObject,
.svg__2338f > foreignObject {
    mask: none;
}

.wrapper__44b0c,
.container__1ce5d {
    --online-2: #43a25a;
    --dnd-2: #d83a41;
    --idle-2: #ca9654;
    --offline-2: #82838b;
    --streaming-2: #9147ff;
}
.wrapper__44b0c:has(rect)::after,
.container__1ce5d:has(.status_a423bd)::after {
    content: '';
    display: block;
    position: absolute;
    height: 8px;
    width: 8px;
    bottom: -4px;
    right: -4px;
    border: 2px solid var(--background-base-lower);
}
.wrapper__44b0c:has(rect[fill='#43a25a'])::after,
.container__1ce5d:has(.status_a423bd[style='background-color: rgb(67, 162, 90);'])::after {
    background: var(--online-2) !important;
}
.wrapper__44b0c:has(rect[fill='#d83a42'])::after {
    background: var(--dnd-2) !important;
}
.wrapper__44b0c:has(rect[fill='#ca9654'])::after {
    background: var(--idle-2) !important;
}
.wrapper__44b0c:has(rect[fill='#82838b'])::after {
    background: var(--offline-2) !important;
}
.wrapper__44b0c:has(rect[fill='#9147ff'])::after {
    background: var(--streaming-2);
}

.lowerBadge_cc5dd2 {
    border: 2px solid var(--background-base-lower);
    bottom: -4px;
    right: -4px;
}
.upperBadge_cc5dd2 {
    border: 2px solid var(--background-base-lower);
    top: -4px;
    right: -4px;
}
.folderGroup__48112.isExpanded__48112 > .stack_dbd263 {
    overflow: visible !important;
}

.slider__87bf1 > rect[rx='10'] {
    rx: 0 !important;
}

::-webkit-scrollbar-thumb {
    border-radius: 0 !important;
}```

its basically https://github.com/refact0r/system24/blob/main/src/unrounding.css
but without the @container wrapping it

[echo frost]

this actually looks kinda good

[real quarry]

has someone gotten around to removing those stupid animations from hovering over forum channel posts

or is that part of the conglomerate NoFrills CSS theme where you import the css URL and then use CSS variables to toggle parts of it on/off

[vestal field]

its part of why system24 looks good i suppose

but when i posted the old version of that snippet in css-snippets i got like 30 husks lmao

[waxen citrus]

thanks so much

[echo frost]

the slight rise when you hover over them?

should be pretty easy

just noticed the hover color is wrong for them too, so might do that

-remind 12h forum post thing

uh

!remind 12h forum post thing

[sturdy trench]

Alright @echo frost, in 12 hours: forum post thing

[echo frost]

oh

[real quarry]

yeah that

[robust totem]

Didn't they change that in a recent update? I think now it only rises when :active but idk

[sturdy trench]

@echo frost, <t:1751877345:R>: forum post thing

[half crystal]

guess who is unbelievably close to reimplementing the collapsible sidebar from pre-rollout visual-refresh?

wait no this shit may be impossible fuck

[clear siren]

nothing is impossible

[iron smelt]

https://tenor.com/view/toy-story2buzz-usa-lightyear-gif-3042558134605628279

[half crystal]

then tell me how i can target an element with a certain width and then apply styles to that targeted element

[clear siren]

container queries

[half crystal]

nope, i can style children of the target, but not the target itself

[clear siren]

oh right yeah

hmm

I can't even remember how the sidebar worked so idk

[half crystal]

this is the hell so far

[soft oasis]

dont work

lmao

[vestal field]

you must have some experiment or theme on

it works fine for me

[half crystal]

somehow you were right
when 1 container query wont work, use 3 and that shit worked we're so back

just some final patching to do

[smoky belfry]

i'm trying to disable the glow on the new rols colors that makes them unreadable and this isn't working, anyone can tell me why

[class^=convenienceGlowGradient]::after
{
    display: none;
}

is it because cursed after ?

nvm i'm dum i need to *= instead

[class*=convenienceGlowGradient]::after{display: none;}

i don't even remotely understand how they can call that a convenience

so good

[class*=convenienceGlowGradient]::after
,[class*=nameGlow]
{
    display: none;
}

[half crystal]

on what theme is this becuase this cannot be native discord

[iron smelt]

Ik what I miss and and actually wish they had gone through with…

That V2 chat bar

where the buttons were in their own thing below where you send a message

[half crystal]

luckily someone else has remade that already

[iron smelt]

Outdated

[iron smelt]

You will update and fix

Please

[half crystal]

its not like that snippet was hella complicated and its not like im going on holiday tomorrow, so sure!

[iron smelt]

Happy holidays

[half crystal]

what the actual fuck

@iron smelt this works??? tf you on about?

https://raw.githubusercontent.com/davart154/Themes/refs/heads/main/Snippets/Two-Row Chat Bar Layout/TwoRowChatBar.css

[iron smelt]

Um

[velvet merlin]

#user-context-voice-disconnect {
  display: none !important;
}

@dusky venture there you go ^_^

[dusky venture]

okok

thx

[velvet merlin]

@dusky venture send me both themes and ill do it for ya

[dusky venture]

i want the text to turn into the bell thing

i dont have a pic..

[velvet merlin]

i understand habibi just give me both themes so i can do it for you

[dusky venture]

its a betterdiscord thing i think?

[velvet merlin]

no ?

[dusky venture]

its a screenshot

[velvet merlin]

yeah i know its a screenshot but where did you take it from

im honestly too lazy to do a bell button from scratch so ill just get it from that theme to yours

[dusky venture]

from https://ptb.discord.com/channels/1169089289552924712/1357383541524004875

._.

[velvet merlin]

im not in that server

[dusky venture]

link in dm?

[velvet merlin]

sure

[dusky venture]

thx

[velvet merlin]

/*=============================================================================*/
/* 1. Custom Button Styling                                                   */
/*=============================================================================*/
/* 🎛️ Custom Button Styling */
.vc-ranb-button {
  font-size: 12px !important;
  padding: 1px 5px !important;
  margin: -2px auto -2px auto !important;
  width: 57px !important;
  height: auto !important;
  border-radius: 10px !important;
  line-height: 2 !important;
  border: 1px solid rgba(41,42,51,1) !important;
  min-height: 40px;
  max-height: 40px !important;
  display: block !important;
  text-align: center !important;
  background-color: #16181d;
  opacity: 0.8;
  transition: transform 0.15s ease-in-out;
}

.vc-ranb-button .contents__201d5 {
  font-size: 0px;
}

.vc-ranb-button .contents__201d5::after {
  content: "asdfg";
  font-size: 18px;
  width: 16px;
  height: 16px;
  position: relative;
  color: transparent;
  top: -2px;
  left: 10px;
  background-image: url("data:image/svg+xml,%3Csvg%20x%3D%220%22%20y%3D%220%22%20class%3D%22icon__9293f%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23D8D8DB%22%20d%3D%22M9.7%202.89c.18-.07.32-.24.37-.43a2%202%200%200%201%203.86%200c.05.2.19.36.38.43A7%207%200%200%201%2019%209.5v2.09c0%20.12.05.24.13.33l1.1%201.22a3%203%200%200%201%20.77%202.01v.28c0%20.67-.34%201.29-.95%201.56-1.31.6-4%201.51-8.05%201.51-4.05%200-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3%203%200%200%201%20.77-2l1.1-1.23a.5.5%200%200%200%20.13-.33V9.5a7%207%200%200%201%204.7-6.61ZM9.18%2019.84A.16.16%200%200%200%209%2020a3%203%200%201%200%206%200c0-.1-.09-.17-.18-.16a24.86%2024.86%200%200%201-5.64%200Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
}

.vc-ranb-button:hover {
  background-color: rgb(196, 164, 132);
  opacity: 1;
  transform: scale(0.95);
  transition: transform 0.15s ease-in-out;
}


.vc-ranb-button:hover .contents__201d5::after {
  background-image: url("data:image/svg+xml,%3Csvg%20x%3D%220%22%20y%3D%220%22%20class%3D%22icon__9293f%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23294844%22%20d%3D%22M9.7%202.89c.18-.07.32-.24.37-.43a2%202%200%200%201%203.86%200c.05.2.19.36.38.43A7%207%200%200%201%2019%209.5v2.09c0%20.12.05.24.13.33l1.1%201.22a3%203%200%200%201%20.77%202.01v.28c0%20.67-.34%201.29-.95%201.56-1.31.6-4%201.51-8.05%201.51-4.05%200-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3%203%200%200%201%20.77-2l1.1-1.23a.5.5%200%200%200%20.13-.33V9.5a7%207%200%200%201%204.7-6.61ZM9.18%2019.84A.16.16%200%200%200%209%2020a3%203%200%201%200%206%200c0-.1-.09-.17-.18-.16a24.86%2024.86%200%200%201-5.64%200Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  opacity: 1;
}

@dusky venture put this into your quickcss

[velvet merlin]

and this too if u didnt already

[dusky venture]

holly sh-

thxx

[velvet merlin]

your welcome

[dusky venture]

but can you make it a bit smaller?

its chunkey

and..the background to be the same as the theme?(the glow can stay)

sorry for spamming

@velvet merlin
thx sm btw

[velvet merlin]

yeah i gotchu

one sec

wait so you want that light brown color to be dark ?

[dusky venture]

nono

the black

[velvet merlin]

okay the color of the button not the hover

to be like this

[dusky venture]

yeah

like the chat dm

[velvet merlin]

yes i understand

one second

[dusky venture]

it can stay bigger then the dm but like a pixel smaller

[velvet merlin]

check this please

/*=============================================================================*/
/* 1. Custom Button Styling                                                   */
/*=============================================================================*/
/* 🎛️ Custom Button Styling */
.vc-ranb-button {
  font-size: 12px !important;
  padding: 1px 5px !important;
  margin: -2px auto -2px auto !important;
  width: 42px !important;
  height: auto !important;
  border-radius: 10px !important;
  line-height: 2 !important;
  border: 1px solid rgba(41,42,51,1) !important;
  min-height: 40px;
  max-height: 40px !important;
  display: block !important;
  text-align: center !important;
  background-color: rgb(23 , 20,18));
  opacity: 0.8;
  transition: transform 0.15s ease-in-out;
}

.vc-ranb-button .contents__201d5 {
  font-size: 0px;
}

.vc-ranb-button .contents__201d5::after {
  content: "asdfg";
  font-size: 18px;
  width: 13px;
  height: 13px;
  position: relative;
  color: transparent;
  top: -2px;
  left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg%20x%3D%220%22%20y%3D%220%22%20class%3D%22icon__9293f%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23D8D8DB%22%20d%3D%22M9.7%202.89c.18-.07.32-.24.37-.43a2%202%200%200%201%203.86%200c.05.2.19.36.38.43A7%207%200%200%201%2019%209.5v2.09c0%20.12.05.24.13.33l1.1%201.22a3%203%200%200%201%20.77%202.01v.28c0%20.67-.34%201.29-.95%201.56-1.31.6-4%201.51-8.05%201.51-4.05%200-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3%203%200%200%201%20.77-2l1.1-1.23a.5.5%200%200%200%20.13-.33V9.5a7%207%200%200%201%204.7-6.61ZM9.18%2019.84A.16.16%200%200%200%209%2020a3%203%200%201%200%206%200c0-.1-.09-.17-.18-.16a24.86%2024.86%200%200%201-5.64%200Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
}

.vc-ranb-button:hover {
  background-color: rgb(196, 164, 132);
  opacity: 1;
  transform: scale(0.95);
  transition: transform 0.15s ease-in-out;
}


.vc-ranb-button:hover .contents__201d5::after {
  background-image: url("data:image/svg+xml,%3Csvg%20x%3D%220%22%20y%3D%220%22%20class%3D%22icon__9293f%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23294844%22%20d%3D%22M9.7%202.89c.18-.07.32-.24.37-.43a2%202%200%200%201%203.86%200c.05.2.19.36.38.43A7%207%200%200%201%2019%209.5v2.09c0%20.12.05.24.13.33l1.1%201.22a3%203%200%200%201%20.77%202.01v.28c0%20.67-.34%201.29-.95%201.56-1.31.6-4%201.51-8.05%201.51-4.05%200-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3%203%200%200%201%20.77-2l1.1-1.23a.5.5%200%200%200%20.13-.33V9.5a7%207%200%200%201%204.7-6.61ZM9.18%2019.84A.16.16%200%200%200%209%2020a3%203%200%201%200%206%200c0-.1-.09-.17-.18-.16a24.86%2024.86%200%200%201-5.64%200Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  opacity: 1;
}

screenshot how it looks on your side becasue your client is different than mineig@dusky venture

[dusky venture]

umm can be bigger,and its not the same color now

i use midnight btw

[velvet merlin]

you want it to be big back again ?

[dusky venture]

just a bit bigger than the chat

like 1pixel or 2

[velvet merlin]

oh alr

/*=============================================================================*/
/* 1. Custom Button Styling                                                   */
/*=============================================================================*/
/* 🎛️ Custom Button Styling */
.vc-ranb-button {
  font-size: 12px !important;
  padding: 1px 5px !important;
  margin: -2px auto -2px auto !important;
  width: 49px !important;
  height: auto !important;
  border-radius: 10px !important;
  line-height: 2 !important;
  border: 1px solid rgba(41,42,51,1) !important;
  min-height: 40px;
  max-height: 40px !important;
  display: block !important;
  text-align: center !important;
  background-color: rgb(47, 20, 18));
  opacity: 0.8;
  transition: transform 0.15s ease-in-out;
}

.vc-ranb-button .contents__201d5 {
  font-size: 0px;
}

.vc-ranb-button .contents__201d5::after {
  content: "asdfg";
  font-size: 18px;
  width: 11px;
  height: 13px;
  position: relative;
  color: transparent;
  top: -1px;
  left: 6px;
  background-image: url("data:image/svg+xml,%3Csvg%20x%3D%220%22%20y%3D%220%22%20class%3D%22icon__9293f%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23D8D8DB%22%20d%3D%22M9.7%202.89c.18-.07.32-.24.37-.43a2%202%200%200%201%203.86%200c.05.2.19.36.38.43A7%207%200%200%201%2019%209.5v2.09c0%20.12.05.24.13.33l1.1%201.22a3%203%200%200%201%20.77%202.01v.28c0%20.67-.34%201.29-.95%201.56-1.31.6-4%201.51-8.05%201.51-4.05%200-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3%203%200%200%201%20.77-2l1.1-1.23a.5.5%200%200%200%20.13-.33V9.5a7%207%200%200%201%204.7-6.61ZM9.18%2019.84A.16.16%200%200%200%209%2020a3%203%200%201%200%206%200c0-.1-.09-.17-.18-.16a24.86%2024.86%200%200%201-5.64%200Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
}

.vc-ranb-button:hover {
  background-color: rgb(196, 164, 132);
  opacity: 1;
  transform: scale(0.95);
  transition: transform 0.15s ease-in-out;
}


.vc-ranb-button:hover .contents__201d5::after {
  background-image: url("data:image/svg+xml,%3Csvg%20x%3D%220%22%20y%3D%220%22%20class%3D%22icon__9293f%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23294844%22%20d%3D%22M9.7%202.89c.18-.07.32-.24.37-.43a2%202%200%200%201%203.86%200c.05.2.19.36.38.43A7%207%200%200%201%2019%209.5v2.09c0%20.12.05.24.13.33l1.1%201.22a3%203%200%200%201%20.77%202.01v.28c0%20.67-.34%201.29-.95%201.56-1.31.6-4%201.51-8.05%201.51-4.05%200-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3%203%200%200%201%20.77-2l1.1-1.23a.5.5%200%200%200%20.13-.33V9.5a7%207%200%200%201%204.7-6.61ZM9.18%2019.84A.16.16%200%200%200%209%2020a3%203%200%201%200%206%200c0-.1-.09-.17-.18-.16a24.86%2024.86%200%200%201-5.64%200Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  opacity: 1;
}

check this,

i tried getting the exact color but its not picking it properly

i think the screenshot image is messed up or smth idk

@dusky venture

[dusky venture]

OK

[velvet merlin]

if you can give me the color code it would be useful ;D

[dusky venture]

GOOD SIZE COLOR BAD NOW

[velvet merlin]

yeah i guess it applies the color from the guild list if its dark

but it applies it if its light its weird

let me show u

[dusky venture]

oh

btw why did this happend?

[velvet merlin]

what this

[dusky venture]

idk it just happend

[velvet merlin]

yeah what happened

i dont get it

[dusky venture]

the friend profile opend like that

[velvet merlin]

oh

idk lol

[dusky venture]

oh btw do you want my theme so you can take hex?

[velvet merlin]

can you get it for me yourself

[dusky venture]

oh ill try?

/* base colors */
--red-1: oklch(66% 0.12 10);
--red-2: oklch(60% 0.16 10);
--red-3: oklch(54% 0.12 10);
--red-4: oklch(48% 0.12 10);
--red-5: oklch(42% 0.12 10);

--orange-1: oklch(66% 0.12 50);
--orange-2: oklch(60% 0.12 50);
--orange-3: oklch(54% 0.12 50);
--orange-4: oklch(48% 0.12 50);
--orange-5: oklch(42% 0.12 50);

--yellow-1: oklch(80% 0.11 90);
--yellow-2: oklch(74% 0.11 90);
--yellow-3: oklch(68% 0.11 90);
--yellow-4: oklch(62% 0.11 90);
--yellow-5: oklch(56% 0.11 90);

--green-1: oklch(66% 0.12 50); /*not actually green*/ /*oklch(76% 0.11 170);*/
--green-2: oklch(70% 0.11 160);  /*oklch(70% 0.11 170);*/
--green-3: oklch(64% 0.11 160);
--green-4: oklch(58% 0.11 160);
--green-5: oklch(52% 0.11 160);

--blue-1: oklch(76% 0.1 215);
--blue-2: oklch(70% 0.1 215);
--blue-3: oklch(64% 0.1 215);
--blue-4: oklch(58% 0.1 215);
--blue-5: oklch(52% 0.1 215);

--purple-1: oklch(76% 0.11 310);
--purple-2: oklch(70% 0.11 310);
--purple-3: oklch(64% 0.11 310);
--purple-4: oklch(58% 0.11 310);
--purple-5: oklch(52% 0.11 310);

--neutral-45: oklch(20% 0 0);

}

no hex

[velvet merlin]

oh nevermind dumb mee

[dusky venture]

oh ok

[velvet merlin]

dw bout it i had something stupid

[dusky venture]

thx

can the bell be brown too?

[velvet merlin]

sure!

[dusky venture]

thxxxx

btw the bell isn't symmetrical

TOT

[velvet merlin]

not my fault its the one that coded this lols

[dusky venture]

LOL

[clear siren]

new thing being rolled out #🧊-off-topic-iceman-only message

[velvet merlin]

there you go

/* Hides the show memberlist button if its on, */
/* 🎛️ Custom Button Styling */
.vc-ranb-button {
  font-size: 12px !important;
  padding: 1px 5px !important;
  margin: -2px auto -2px auto !important;
  width: 49px !important;
  height: auto !important;
  border-radius: 10px !important;
  line-height: 2 !important;
  border: 1px solid rgba(41,42,51,1) !important;
  min-height: 40px;
  max-height: 40px !important;
  display: block !important;
  text-align: center !important;
  background-color: #171412 !important;
  opacity: 0.8;
  transition: transform 0.15s ease-in-out;
}

.vc-ranb-button .contents__201d5 {
  font-size: 0px;
}

.vc-ranb-button .contents__201d5::after {
  content: "asdfg";
  font-size: 18px;
  width: 11px;
  height: 13px;
  position: relative;
  color: transparent;
  top: -1px;
  left: 6px;
  background-image: url("data:image/svg+xml,%3Csvg%20x%3D%220%22%20y%3D%220%22%20class%3D%22icon__9293f%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23D8D8DB%22%20d%3D%22M9.7%202.89c.18-.07.32-.24.37-.43a2%202%200%200%201%203.86%200c.05.2.19.36.38.43A7%207%200%200%201%2019%209.5v2.09c0%20.12.05.24.13.33l1.1%201.22a3%203%200%200%201%20.77%202.01v.28c0%20.67-.34%201.29-.95%201.56-1.31.6-4%201.51-8.05%201.51-4.05%200-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3%203%200%200%201%20.77-2l1.1-1.23a.5.5%200%200%200%20.13-.33V9.5a7%207%200%200%201%204.7-6.61ZM9.18%2019.84A.16.16%200%200%200%209%2020a3%203%200%201%200%206%200c0-.1-.09-.17-.18-.16a24.86%2024.86%200%200%201-5.64%200Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
}

.vc-ranb-button:hover {
  background-color: rgb(196, 164, 132);
  opacity: 1;
  transform: scale(0.95);
  transition: transform 0.15s ease-in-out;
}


.vc-ranb-button:hover .contents__201d5::after {
  background-image: url("data:image/svg+xml,%3Csvg%20x%3D%220%22%20y%3D%220%22%20class%3D%22icon__9293f%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%237A5F52%22%20d%3D%22M9.7%202.89c.18-.07.32-.24.37-.43a2%202%200%200%201%203.86%200c.05.2.19.36.38.43A7%207%200%200%201%2019%209.5v2.09c0%20.12.05.24.13.33l1.1%201.22a3%203%200%200%201%20.77%202.01v.28c0%20.67-.34%201.29-.95%201.56-1.31.6-4%201.51-8.05%201.51-4.05%200-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3%203%200%200%201%20.77-2l1.1-1.23a.5.5%200%200%200%20.13-.33V9.5a7%207%200%200%201%204.7-6.61ZM9.18%2019.84A.16.16%200%200%200%209%2020a3%203%200%201%200%206%200c0-.1-.09-.17-.18-.16a24.86%2024.86%200%200%201-5.64%200Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  opacity: 1;
}

[dusky venture]

just did it thx

[dusky venture]

lets try

[velvet merlin]

oh i thought that shi was his theme lmfao

[dusky venture]

can you make it more vibrent?
maybe orange too?

[velvet merlin]

why didnt you send this before

[dusky venture]

it was white idk

[velvet merlin]

on hover it will bee like the dms when its open

right ?

[dusky venture]

the white was good

can you do it back to the white?

like coffe white

[velvet merlin]

which white i didnt change anything before hover

[dusky venture]

ah..

[velvet merlin]

this is on hover isnt it

or is it not

[dusky venture]

now its brown

but yes

[velvet merlin]

bro fuck it im downloading your theme to check fix it and ill send it

[dusky venture]

LMAOO THX

on hover now brown used to be white

[velvet merlin]

dw about it

ill send you the whole theme with this added

[echo frost]

!remind 2h snooze

[sturdy trench]

Alright @echo frost, in 2 hours: snooze

[echo frost]

are they starting to roll that out ?
idk how they managed to make it so bad

[dusky venture]

ITS CRASHING SOME PEPS DIS LOL

[clear siren]

lmao

[dusky venture]

prefer 2 css...

[velvet merlin]

wdym

ill give u the whole thing with the disconnect user from vc thingy

@dusky venture

[dusky venture]

oh its not for me its for my friend lol

i dont need it

[velvet merlin]

oh

then just delete this from the file

[dusky venture]

did you fix the bell?
what line?

[velvet merlin]

the very bottom

[velvet merlin]

i themed it the same with the dms icon

and made the button a little bigger than the dms icon

[burnt sky]

this is how i have my 2 buttons

[dusky venture]

umm

[velvet merlin]

same, but center the bell please ;D

[velvet merlin]

wtf

shows normally for me

[burnt sky]

oh it went downwards a bit since the past couple updates on discord it was centered before

[dusky venture]

idk man-

[velvet merlin]

let me see one second bro

the fuck

yeah this is cooked

[burnt sky]

does this look better ?

[velvet merlin]

no move it 2px

[dusky venture]

set color importent?

[velvet merlin]

ill try just give me a moment

[tidal heron]

mine i phyiscally cant get it centered

its either too far right or too far left

[velvet merlin]

left: 6px;

[tidal heron]

and ive tried like 6 decimal points

[dusky venture]

.1 pixel?

[tidal heron]

nope ive tried every single px possible

down to 6.47655

it will not center

[dusky venture]

well chat gpt ?

[tidal heron]

appears to be that its different for everyone

[dusky venture]

@velvet merlin
how did it turn brown

the orange is ok tho

[tidal heron]

wont help in this case

[dusky venture]

the normal broke

[velvet merlin]

weird

[tidal heron]

theyve seen it first hand

ive even sent them my file

[tidal heron]

and its centered for them but not me

[velvet merlin]

ill just make the bell same color as the theme one second

[tidal heron]

honestly fuck discord

[dusky venture]

OK

[dusky venture]

FR

[velvet merlin]

@dusky venture this is good

[dusky venture]

yesssss

worksss

thxxxxxxxxxxxxxxxxxxxxxxxxx

[velvet merlin]

gooooood

[velvet merlin]

make the box itself 1px bigger

and should be good ;D

[tidal heron]

nice

i mean ive had mine for months so atp im not even phased by it

[velvet merlin]

Lmaoo. fair enough

[jovial arrow]

sorry what on earth are these buttons 👁️ what is this update supposed to be

[velvet merlin]

the bell button ?

[jovial arrow]

have i just never noticed it in that location before

[velvet merlin]

its a button styling for the read all plugin since it was basically just text

[jovial arrow]

OH okay

makes more sense thank you i was confused reading this channel lmao

[velvet merlin]

lmao, no worries, i was basically just making it themed with the midnight theme too

i dont use themes other than the discord ones just fixed it for the guy

[sturdy trench]

@echo frost, <t:1751937428:R>: snooze

[half crystal]

You know I never did fix that button

[tranquil whale]

Im searching for a good actively developing theme pls recommend

[vestal field]

midnight or system24

[tranquil whale]

tried both too basic and aren't those your own themes

[vestal field]

yeah

[tranquil whale]

system 24 is too boxy

and midnight is too basic

[vestal field]

[tranquil whale]

I like complicated themes

like how flashcord has a warning that it could crash your computer

[clear siren]

take an existing theme that's close enough to your liking and modify it, add complexity whatever that is

or rather best keep the underlying theme unmodified so you get updates/fixes and add to it via quickcss or a separate theme file

even if you don't know css well you should be able to pick parts of other themes and snippets

not many want to make a "complicated" theme because maintenance is pain especially with discord changing a lot recently and shit breaks

[brittle iron]

^^^ i started fixing up an abandoned theme that modifies a few things quite strongly and my god is it a lot

i couldn't even imagine maintaining something more complex

[clear siren]

I also had a theme with some complexity and I'm pretty sure I was the only one who ever actually used it so idk if I'll publish a theme again, just snippets which I can't be arsed to maintain either

[brittle iron]

i'm definitely gonna be maintaining this one simply because i used to use it for agess before the visual refresh completely broke it

[gray spoke]

I use my own glassmorphism theme that's decently complex, and the only reason it hasn't been made public is because I don't want to maintain it outside of my use cases

At least it's built modularly so things can be ripped out whenever Discord changes things...

[tranquil whale]

The problem isthe theme I like has been archived breaking a few components and its 120,000 characters and to mod it to make it better would be at least 30,000 characters

for a clean look

and the code base is complicated

[echo frost]

how many lines is it

[tranquil whale]

I have modified that theme and mad expansions but it recently got archived and its the most complicated before visual refresh

[brittle iron]

I would recommend finding an actively maintained one that's close to what you're looking for and going from there

[tranquil whale]

im on mobile and on holiday can't check right now you could check my GitHub

https://github.com/ZapGaming/Flashcord

[tranquil whale]

nothing comes close

[brittle iron]

Then you're just going to have to do it yourself, I'm currently doing that with Couve which is luckily less complicated but still a good amount of stuff

[tranquil whale]

33 heavily compiled with custom plugin

[brittle iron]

A lot of things surprisingly still worked when i updated the classes, it was less to tweak than i thought it would be at least

[echo frost]

is it the ceres sid one

[tranquil whale]

not possible to bring back to before visual refresh it would be around 200,000 characters

[tranquil whale]

yup but that is import and after visual refresh

everything got archived yesterday 8 july

I got everything manual on my computer as I was maintaining for short while before archived

[brittle iron]

Alternatively you can cut it down to only the parts you want and create a completely new theme

[tranquil whale]

not possible with its code base requires a lot of its code to work

[brittle iron]

yeah but surely there's parts you use/you don't that can be recreated on their own

[tranquil whale]

probably gonna make a theme from scratch but I would need help and would probably use a lot of css snippets and the theme is a layout with ceres beta alpha and arch linux are the complicated ones

u can look for old images of flashcord and ull understand

[brittle iron]

all i can find are hilariously low res thumbnails

can barely make out anything here but

[hexed imp]

That doesn't look too complicated tbh, you can probably do most of it with existing snippets

[brittle iron]

^^^ was gonna say

i don't see what's stopping you from making it look like that

shrunk down channels/members lists/user area, some color changes

super doable

[austere cloak]

[title^="https://discord.com/channels/"],{
  line-height: 0;
  font-size: 0;
  text-decoration-color: #fff !important;
}
[title^="https://discord.com/channels/"]::before, [title^="https://ptb.discord.com/channels/"]::before, [title^="https://canary.discord.com/channels/"]::before {
  content: "✉ Jump to Message";
  font-size: 16px;
  user-select: text;
  font-weight: 500;
  transition: background-color 50ms ease-out, color 50ms ease-out;
  cursor: pointer;
  border-radius: 3px;
  padding: 0 2px;
  background: hsla(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%, 0.3);
  color: hsl(236, calc(var(--saturation-factor, 1) * 83.3%), 92.9%);
}
[title^="https://discord.com/channels/"]:hover::before, [title^="https://ptb.discord.com/channels/"]:hover::before, [title^="https://canary.discord.com/channels/"]:hover::before {
  background-color: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%);
  color: #fff;
}

/* Better Jump To Present Button */
[class*="jumpToPresentBar"] {
    display: contents;
}
[class*="jumpToPresentBar"] > button:first-child {
    display: none;
}
[class*="jumpToPresentBar"] > button:last-child {
    position: absolute;
    z-index: 1;
    bottom: 24px;
    right: 22px;
    padding: 8px !important;
    height: auto;
    background-color: #5865F2;
    box-shadow: var(--elevation-high);
    border-radius: 100px;
    display: flex;
    font-size: 0px;
    color: transparent;
    transition: font-size .2s .1s, color .2s, padding .4s .1s;
}
[class*="jumpToPresentBar"] > button svg {
    order: -1;
    margin: 0px;
    height: 24px;
    width: 24px;
    top: auto;
    margin-right: 0px;
    margin-left: 0px;
    color: #FFFFFF;
    transition: margin .6s;
}
[class*="jumpToPresentBar"]:hover > button {
    padding: 8px 18px !important;
    font-size: 14px;
    color: #FFFFFF;
    transition: font-size .2s, color .2s .1s, padding .4s;
}```
I have this css that block me completely when scrolling on oldmsg... anyone can help me ?

the end of it

[class*="jumpToPresentBar"]:hover > button svg {
    margin-right: 2px;
    margin-left: -6px;
}

And if I removed it I can now never stop scrolling on messages
(have no error fetching in console)
Ping me in reply plz

[brittle iron]

ignore me i think

yeah no actually what's happening is you've made it take up the entire chat area

what i assume you were going for is for the button to expand when you hover over it

-[class*="jumpToPresentBar"] > button:first-child {
-    display: none;
-}
+[class*="jumpToPresentBar"] > div:first-child {
+    display: none;
+}

[tranquil whale]

look for the private arch linux ones and alpha and iridescent mode depends on theme hoker ill send a few photos of flashcord

[brittle iron]

if you change it like this on line 27 it should work

[tranquil whale]

https://cdn.discordapp.com/attachments/1124660463339315331/1327848658477256815/image.png?ex=686e912e&is=686d3fae&hm=ce56b7334a5f92360ea51da0f667707db55439b344fd135fac619c016d639d51&

https://cdn.discordapp.com/attachments/1124660463339315331/1327849204793479178/image.png?ex=686e91b0&is=686d4030&hm=b883b41fe25c546efe47706312f67785d8563e701dbdfde7fb58e306c37c6462&

https://cdn.discordapp.com/attachments/1124660463339315331/1327982535124451420/image.png?ex=686f0ddd&is=686dbc5d&hm=4714663a06cdbf34a044235deaed41ffd6949b16eff321afd15da0aa81c0fc6c&

there is also iridescent mode which I dont have a picture of

and there is also chat animations

but all broke with dvr

if u ask the replugged community many developers know flashcord

[brittle iron]

yeah but again i'm seeing nothing in these images that seems super hard

you can probably start with a base of clearvision for the image and then shrink the member list/channel list yourself

[weak fiber]

I'm trying to go through my quickCSS to find out what's making it lag,

.visual-refresh .base_b88801 {
    font-size: 13.5px;
    height: 22px;
    display: flex !important;
    align-items: center !important;
}

[class^=memberInner]:has(> div > [aria-label*="Online"]) [class^=subText] svg>path[fill="#23a55a"] {
    fill: #43b581
}

[class^=memberInner]:has(> div >[aria-label*=Idle]) [class^=subText] svg>path[fill="#23a55a"] {
    fill: #f0b232
}

[class^=memberInner]:has(> div > [aria-label*="Do Not Disturb"]) [class^=subText] svg>path[fill="#23a55a"] {
    fill: #f23f43
}

[class^=memberInner]:has(> div > [aria-label*=Streaming]) [class^=subText] svg>path[fill="#23a55a"] {
    fill: #643da7
}```
what does any of this do?

nvm I fixed it

[vestal field]

holy :has()

[soft oasis]

please fix midnight theme modview

[vestal field]

what if i didnt...

i mean it works fine it just looks kinda ass

[soft oasis]

then i don't like you

and i stop using midnight

[vestal field]

how tf do i even fix this tho

[soft oasis]

(its a joke)

[vestal field]

like i guess i could add margin to the top but that would also look weird

[soft oasis]

looks meh

[crimson skiff]

how tf does that even happen

[vivid flame]

.visual-refresh .innerContainer__656be {
margin-top: 34px;
}
This should fix it

[vestal field]

^

[tranquil whale]

Whatev

[austere cloak]

Good ty

[pliant pilot]

Is there any plugin / theme that allows adding a background to this message menu ?

If there isn't, does anyone have an idea how to implement it ?

Selector:

#app-mount > div.appAsidePanelWrapper_a3002d > div.notAppAsidePanel_a3002d > div.app_a3002d > div > div.layers__960e4.layers__160d8 > div > div > div > div.content_c48ade > div.page_c48ade > div > div

[pure cairn]

https://github.com/nvhhr/discordcss/blob/main/snippets/actuallybasicbackground.theme.css

[boreal mason]

Hi im new to css should i combine the code together or turn on theme file by file for better performance

[gray spoke]

If you're worried about performance, profile profile profile!

See how long your styles take to compute, using Discord's styles as a baseline

(well Vencord's styles at least)

[boreal mason]

ic ty

[weak fiber]

how to remove this please :(

[echo frost]

i'll probably try to revert it

maybe

oh nice

[weak fiber]

either or, that experiment works for now so it's less of an eyesore thanks :D

[raw flint]

idk if im misremebering, but does anyone know a css snippet that give all users unique colours similar to like tg?

[half crystal]

vp irc

[cloud jolt]

IrcColors

Makes username colors in chat unique, like in IRC clients

Authors

Grzesiek11, jamesbt365

[half crystal]

^

[raw flint]

ty

[spring pewter]

not exactly abt development i think but can somebody help me w the colors? they feel rather weird but idk which ones to change for better looks

also what is responsible for the color of this in gifs on midnight

[echo frost]

probably need to send your theme

or say what theme it is

[spring pewter]

midnight

[echo frost]

the github has the variables and examples on how to use them

I need to go to bed, so can't help

[spring pewter]

gn ig

[crimson skiff]

the comments near each variable should explain what each variable does

[spring pewter]

thats

not what i rlly asked for

i want help w the colors, like color palette idk

[crimson skiff]

https://colorhunt.co/

[spring pewter]

tyy

[crimson skiff]

i also watched a youtube video showing an interesting feature with css
if you have a variable with hsl(h, s, l), you can just extract them with fromand then modify the lightness to get your shades

[spring pewter]

huh

[crimson skiff]

its just an interesting function with css as a whole

[crimson skiff]

@spring pewter im also new to this, but if you have a snippet like this in midnight

:root {
  --bg-test: hsl(200,100%,50%);
  --bg-1: hsl(from var(--bg-test) h s calc(l - 10));
  --bg-2: hsl(from var(--bg-test) h s calc(l - 20));
  --bg-3: hsl(from var(--bg-test) h s calc(l - 30));
  --bg-4: hsl(from var(--bg-test) h s calc(l - 35));
}

you only need to change the --bg-test variable to see the colour change everywhere. to adjust the brightness/darkness, just use a calculation

so from an accent colour, you can get a background colour, foreground text colour, button colour, etc, and everything remains overall the same theme

[spring pewter]

aight

[crimson skiff]

i havent seen anyone use this, but it seems super useful

[pure cairn]

I think there was something similar with oklch too

If I'm not mistaken

[crimson skiff]

you can use anything
you can convert hex to oklch, oklch to srgb, srgb to hsl, hsl to oklab, etc you get the point

[pure cairn]

https://tenor.com/view/now-this-is-epic-gif-14506125224309254566

[iron smelt]

Oklch ❤️

I’ll never use anything else

[chilly knoll]

real

[brittle iron]

i'm raging

this perk preview is an image

[pure cairn]

Replace it with yours

[brittle iron]

i'm not making an image for every boost perk

yes, every boost perk has a unique one.

like, i get it, but grrr

[dense depot]

what is this?
#🎨-css-snippets message

[gray spoke]

It's an experiment that's not rolled out to everyone yet afaik.

[dense depot]

[pure cairn]

Why not

[brittle iron]

guh

[stark epoch]

Did discord suddenly change how to change background colourts...again

[echo frost]

they added custom to some variable namess

[stark epoch]

Oh thank god it wasnt too complex

Thank you

[brittle iron]

shrinking the user area has got me so annoyed because i can not transition it in-sync with the betterfolders bar

[half crystal]

do i release this doohickey?

[iron smelt]

My anger issues could not

[vestal field]

people love this typa shit

[iron smelt]

I don’t see how, I’d be crashing out honestly - try to select a server, and the bar keeps disappearing

[half crystal]

i might put all the sidebars into each of their own ones
its like the bookmarks in a scrapbook!

[half crystal]

channellist is much harder and is breaking for no reason becuase of course it is

and its unscrollable of fucking course

[burnt sky]

i had a pretty decent one setup for the channel list but it got annoying because you always had to activate/hover it just to see if theres any channels that are unread

also i swear this looks like it isn't properly centered or am i seeing things

[brittle iron]

i think the icon is throwing you off

[burnt sky]

probably

[brittle iron]

using a measuring tool you'll see that from the left of the button to the left of the speaker it's the same as the right of the button to the right of the L

in cases like this i honestly like to just get rid of the icon

centered text is a million times more visually pleasing imo

[burnt sky]

yeah that does look better

[brittle iron]

yepp

[snow sand]

Can you tell me how you got those folder icons

[brittle iron]

it's part of their theme

https://github.com/madmaxgrey/Vertical-Spacious-Refresh/blob/main/vencord/Colorfull.css#L7

[lunar hamlet]

Colorfull.css: Line 7

.expandedFolderIconWrapper__48112::after,

[burnt sky]

@snow sand as Rin said in that file its lines 7 to 36

[crimson skiff]

lowkey that looks fire

[half crystal]

enjoy this image

[pure cairn]

It's quite easy

Remove that display: none and set its visibility to hidden, then add a ::before and ::after pseudoelements for the icon and the text

[burnt sky]

pretty neat isn't it 🙂

[echo frost]

is it though?

.title__85643 {
  gap: 2px;
  visibility: hidden !important;
  width: 0;
  &::after {
    visibility: visible;
    content: 'Example';
    color: white;
  }
  &::before {
    content: '___';
    color: transparent;
    background-image: url('/assets/0424e06a82d250e2.svg');
    width: 20px !important;
    height: 20px;
    visibility: visible;
  }
}

this is so scuffed

the icon is hard

[pure cairn]

Lgtm

[echo frost]

for some reason the width of the svg doesn't work unless there's enough characters

well character width

[pure cairn]

it works with position: absolute

but then it's a pain when you have to center icon and custom title

[tame garnet]

can any good css people bring the old nitro badge back, i don't like this new one like "pLaTiNuM", i would also like to move the nitro badge to back where it was before

[pure cairn]

#🎨-css-snippets message

already tried this one?

[pure cairn]

what is Discord even cooking with some design choices

[onyx mesa]

i really hope the +1 is a separate element

[pure cairn]

luckily, it is

[onyx mesa]

i just removed the number

[burnt sky]

@chilly knoll is there anyway i can disable the Mobile status icon on my end from your icon set?

[chilly knoll]

no idea, here is the code if there's a way of disabling it with custom CSS

/* Mobile */
path[d="M 187 0 L 813 0 C 916.277 0 1000 83.723 1000 187 L 1000 1313 C 1000 1416.277 916.277 1500 813 1500 L 187 1500 C 83.723 1500 0 1416.277 0 1313 L 0 187 C 0 83.723 83.723 0 187 0 Z M 125 1000 L 875 1000 L 875 250 L 125 250 Z M 500 1125 C 430.964 1125 375 1180.964 375 1250 C 375 1319.036 430.964 1375 500 1375 C 569.036 1375 625 1319.036 625 1250 C 625 1180.964 569.036 1125 500 1125 Z"] {
    d: path("m 503.25,0 h -6.5 C 391.75,0 308.625,0 243.5,10.65 176.5,21.675 122.25,44.85 79.5,97.05 36.75,149.25 17.75,215.55 8.75,297.3 0,376.8 0,478.35 0,606.525 v 286.95 c 0,128.25 0,229.8 8.75,309.225 9,81.75 28,148.05 70.75,200.25 42.75,52.2 97,75.375 164,86.4 65.0625,10.65 148.25,10.65 253.25,10.65 h 6.5 c 105,0 188.125,0 253.25,-10.65 67,-11.025 121.25,-34.2 164,-86.4 42.75,-52.2 61.75,-118.5 70.75,-200.25 8.75,-79.5 8.75,-181.05 8.75,-309.225 v -286.95 c 0,-128.25 0,-229.8 -8.75,-309.225 -9,-81.75 -28,-148.05 -70.75,-200.25 -42.75,-52.2 -97,-75.375 -164,-86.4 C 691.43753,0 608.25,0 503.25,0 m -217.5,1238.4 a 43.125,51.75 0 0 1 42.8125,-52.35 h 342.87497 c 23.68753,0 42.875,23.4 42.875,52.35 a 43.125,51.75 0 0 1 -42.875,52.275 H 328.5625 a 43.125,51.75 0 0 1 -42.875,-52.275");
    
}

sorry if this isn't of much help, idk how else u can do it unless u fork it

[burnt sky]

that works thanks

don't get why the icon is so small on my end lol

[chilly knoll]

god knows, I think I managed to fix how it shows in members list but not in user profiles

hate this app 🙏

[pure cairn]

Istg my brain always gives me the best ideas when I don't have any time for them

😭

[gray spoke]

Write them down, and act on them later!

[burnt sky]

trying to think of some more fun stuff to do with the theme

[spring pewter]

this looks scary

[burnt sky]

?

that its setup vertically?, thats the reason why i had to go through some effort with lots of snips and my own edits to make discord actually look and work well on a vertical monitor

[spring pewter]

ah

[burnt sky]

lemme show you how discord looks without it

this is all the space you get in a vertical monitor @spring pewter

[spring pewter]

now this is way better

[burnt sky]

haha

i also have a few toggles setup up to quickly change it

[chilly knoll]

why does my iconpack not change the server list icons :husk

[burnt sky]

they are

i have it setup so unread chats are red

[chilly knoll]

o, they looked default

[burnt sky]

oh thought you mean channel list what of the server list do you mean?

@chilly knoll

[onyx mesa]

did the mobile status icons never got fixed

[chilly knoll]

the folder, bell and message icons lol

[chilly knoll]

not fully 😭

[burnt sky]

what does it look like on your end

[onyx mesa]

i think it's mostly the mask that needs to be changed

[chilly knoll]

its fine on member list but user profile its horrible 💀

[chilly knoll]

thiscatisd

[onyx mesa]

why not use these styles for them

[chilly knoll]

bcuz the lines would appear too non existence, I was meant to remake the icons so it looked normal when the icons are very small but I was lazy whoops

[onyx mesa]

i managed to change the svg mask for the status to make the outline thinner

[chilly knoll]

talking about these when i say lines btw

[chilly knoll]

fire

[burnt sky]

i don't see whats different

are you talking about the platform indicators? if so i don't have the plugin enabled

[onyx mesa]

the mobile status icon is very small

[chilly knoll]

yeh

the one next to the user pfp, not platform indicators

[burnt sky]

i did have it enabled at one point but it was bugging out saying i was on mobile

[burnt sky]

the online status icon?

[chilly knoll]

here

[burnt sky]

yeah for all the mobile icons it always shows green

@chilly knoll

[chilly knoll]

ar3 u sure its not cuz they're online? or theme issue idk it doesn't happen to me

[chilly knoll]

its so small 😭

looks so bad

[burnt sky]

i haven't changed anything with profiles

that i know of

[chilly knoll]

weird

[burnt sky]

even with no theme setup and just your icons does the same thing

wonder if theres a way to just get rid of that completely in the profile view and have the profile picture fill the whole thing

[onyx mesa]

yes

to replace the mask i removed the original and added my own

[burnt sky]

mind tossing that snippet so i can check it out on my end

[onyx mesa]

the snippet is pretty big, might need to find the status part

[fierce bison]

hi theming people!
i have this theme here but the channels list seems to be a bit darker for some reason and i'm not sure how to fix it

someone said it might be "visual refresh fast follows experiment enabled with darker channel list"
but i don't know where to find that in the experiments plugin

[gray spoke]

Enable the plugin, and you should be able to search for it under the Experiments tab.

[gray spoke]

I believe there was a theme called "actuallybasicbackground" that accomplishes this even with the experiment, but I can't find it through searching atm.

[fierce bison]

i actually started off with that theme

what i have now is that but removed some stuff

but it was like this before i removed it

i'll add it back

[iron smelt]

https://github.com/nvhhr/discordcss/blob/main/snippets/actuallybasicbackground.theme.css

[fierce bison]

that theme has a background image

[fierce bison]

i just tested it

after removing the image

the channels list is still darkened

[fierce bison]

i'm not sure what i'm looking for

or which tab specifically to find it

sorry

[gray spoke]

Set it to Not Eligble

[fierce bison]

ohhh

[gray spoke]

Enable the plugin, then refresh Discord. Then, set it to Not Eligble, and it should apply once you exit settings.

(Please ignore the broken rainbow faders...)

Speaking of which... how do I make it move with the scroll position?

[lunar bough]

I'm good test subject? xd

[fierce bison]

right so this didn't resolve the original problem i guess that wasn't it lol

[gray spoke]

Oh...

[fierce bison]

still darkened compared to other backgrounds

[clear siren]

yeah it was a shot in the dark

is there any other css applied that might be doing that

[fierce bison]

i just have this pasted into quick css

[clear siren]

hmm

I wish I could test it or give you some extra rule to override that for sure but I'm afk for a week

[burnt sky]

i really hate discords design choice lol, like wtf is even this i was enjoying the revamp popouts from the snips channel

[gray spoke]

Is the no mutuals section anymore? 😮

[harsh harbor]

that's their own profile

[fierce bison]

it's ok!

[burnt sky]

i was simply scrolling looking for someone who was on mobile in the list 🙂

[lunar bough]

tbf its fine and has more goodies visible, personally I will just cut a bit bottom of profile to fit it more and add my css stuff from current one

[lunar bough]

PreMiD makes me mobile online all the time >_>
but ye fair, ||I use lots of ppl here as my test subjects as well||

[fierce bison]

i've found something of a workaround

it's very crude

but just make the background fully transparent

and theme the things above it individually

so you can tweak the sidebar to be the right opacity

[pure cairn]

I will be working on it once it drops on my profile as well

I'm not using the experiments plugin

[lunar bough]

its out on ptb and canary

[pure cairn]

And it can stay that way

[lunar bough]

they started with it after ur snippet

how could they

[pure cairn]

Tbh I'm more sad that one of the additional snippets doesn't work anymore without causing huge amounts of lag

[lunar bough]

which one?

[pure cairn]

Because of how they reworked the connected accounts buttons

[lunar bough]

ah yeah

i got this one as well xd

[pure cairn]

Unless

Hm

[lunar bough]

in experiments it was fine as i tested, but obv they had to change it and add white background to trigger me more

we talk about those goodies tho, right?

[pure cairn]

Yeah, although mine was only on hover

[lunar bough]

ah fair

mine is bit changed as well

whenever i take any snippet i adjust it to myself and friends that use my code >_>

[pure cairn]

!remind 16h try ::before instead of using the actual element

[sturdy trench]

Alright @pure cairn, in 16 hours: try ::before instead of using the actual element

[lunar bough]

[pure cairn]

Alright sweet, time to sleep

[lunar bough]

yea same for me, before I will cook something like here, before edits

[gray spoke]

Bump bonk

[burnt sky]

i tried some time ago to use something similar to that but it never worked

[harsh turtle]

how did you get the connections to appear like that?

that looks cool

[pure cairn]

Discord employees will see this and push the changes instantly

[echo frost]

wtf

[dusky venture]

@velvet merlin
help all settings buttons broke (like confirm ext)
btw im switching theme can you help me add the bell to the new theme?
(and i kinda want the transparrent to go away)

like..you can make it less transperrent?

[sturdy trench]

@pure cairn, <t:1752447076:R>: try ::before instead of using the actual element

[pure cairn]

right

[pure cairn]

turns out you can't use pseudos on img elements

[pure cairn]

IT WORKS

[burnt sky]

guessing your fixing up the profile revamp?

[pure cairn]

no

my addon

I found a way not to use any :has() selectors

[burnt sky]

sucks getting experiments early just because of my account creation date lol

[pure cairn]

I'm genuinely having a blast rn

can't wait for discord to completely butcher it

[dusky venture]

@velvet merlin

[half crystal]

who needs to wait for discord to butcher shit when you can do it yourself

[pure cairn]

lovely

[half crystal]

i can feel the emotion in that message

[pure cairn]

well, the theme is done

now I only have to redo it with shadows

I love doubling my code

istg if I find out I missed some connections I'm going to cry

but

[burnt sky]

cant wait to see what you have in store lol

[gray spoke]

How to add a fade to a certain colour to the end of all scrollers, but make it track the scroll position?

[tranquil whale]

this new orbs thing is so weird

for 120 orbs u get this badge

it looks like a nitro badge but has no functionality

it looks cooler than nitro badge

[gray spoke]

So many badges... Are they added via CSS, or a plugin?

[pure cairn]

That's nino's profile

First 2 are from Vencord

The others are vanilla

[gray spoke]

Huh, for some reason the last one doesn't show up on mobile.

[iron smelt]

Shows up for yourself but not others

Discord will prolly fix that soon ™

[gray spoke]

I mean... Even for myself I only see the "completed a quest" badge haha

[iron smelt]

I see mine

[gray spoke]

I think it was a old client version, updated and now it shows up :D

[iron smelt]

average Discord user

[gray spoke]

Oh, are a lot of people like that?

😅

[pure cairn]

I'm still on Bunny

And I can't see Vencord badges anymore

😔

[pure cairn]

• some extra tweaks like turning the X->Twitter replace thing off, adding a backdrop shadow etc

basically my old snippet, but with 0 :has() selectors and a shit ton of workarounds

[onyx mesa]

what the flip is this

[pure cairn]

ask Discord

it's fine on my end, besides the horrifying +1 activity at the bottom

[onyx mesa]

oh the margin fuck up is on my end

hasn't fixed that still

the +1 thing is ugly tho

[pure cairn]

yop

[burnt sky]

have you been workign with it on the new model v2, or still on the old one

[pure cairn]

old one

[burnt sky]

dam only if there was a way for me to revert to the old one, this sucks lol

[pure cairn]

can't you set the experiment to not eligible?

[burnt sky]

would that work even though i got it early?

[pure cairn]

yeah?

I used that to keep the visual refresh at bay when it first got rolled out

[burnt sky]

whats the name of it?

[burnt sky]

ahh thats much better

[pure cairn]

[iron smelt]

Unpopular opinion, I actually kind of like the new re-design

[pure cairn]

I'm not a big fan of the big background they gave to it

[burnt sky]

since when did the online themes section in vencord change it use to show a verified before?

@pure cairn btw for some reason the rolepills isn't working and i do have it set to --rolepills: true;

[pure cairn]

I would assume since the csp update

[pure cairn]

[burnt sky]

cause when i put it in the quick edit it works fine

[pure cairn]

hold up

it works if you put the theme in the quickcss

but not in the online themes section?