ill send u a font zip
#π¨-theme-development
warm juniper
bleak gust
yes
frigid garnet
thats nice
bleak gust
like this
frigid garnet
yeah
frigid garnet
impossible
show code
bleak gust
frigid garnet
lol
it must be --font-primary
not font-primary
--font-primary: "Builder Sans";
warm juniper
--font-primary: "Builder Sans";
still default font
i wanna use my private fonts btw
frigid garnet
show code
warm juniper
warm juniper
installed on my computer with zip
warm juniper
ok
warm juniper
i did
frigid garnet
in the left upper corner
theres 2 buttons
one is print
and the other one is install
click install
warm juniper
and the other one is install
frigid garnet
replace this with --font-primary: "Builder Sans Medium";
warm juniper
replace this with --font-primary: "Builder Sans Medium";
yo bro what is this font?
frigid garnet
yo bro what is this font?
:root {
--font-primary: "Builder Sans Medium";
--font-display: "Builder Sans Medium";
--font-headline: "Builder Sans Medium";
--font-code: "Builder Sans Medium";
}
use this
warm juniper
:root {
--font-primary: "Builder Sans Medium";
--font-display: "Builder Sa...
same thing
frigid garnet
:root {
--font-primary: "Builder Sans";
--font-display: "Builder Sans";
--font-headline: "Builder Sans";
--font-code: "Builder Sans";
}
@warm juniper
warm juniper
idk what is this random font π
frigid garnet
show code
bleak gust
idk what is this random font π
invalid
warm juniper
why does it said invalid
warm juniper
@frigid garnet
frigid garnet
try to install the regular one
warm juniper
this font is regular
frigid garnet
but you installed medium one
warm juniper
but idk how do i make that font on github
frigid garnet
i dont know
grand surge
i never heard of the `otf` file extension
native topaz
like
img[src*="id here"] {
content: url('https://cdn.discordapp.com/emojis/1228049054303391868.webp?size=96&quality=lossless') !important;
}```
can i edit their name as well?
teal cave
like
```scss
img[src*="id here"] {
content: url('https://cdn.discordapp.com/em...
.contents_d3ae0d:has(img[src*="id here"]) .username__0b0e7 {
font-size: 0;
&::after {
content: "turbo nerd";
font-size: 1rem;
}
}
is font size necessary
teal cave
Size 0 hides the original name, size 1rem reveals the replacement
frigid garnet
oh
teal cave
btw @edgy sentinel what does vencord quickcss use for validation? nested css doesn't seem to be supported yet
edgy sentinel
btw <@343383572805058560> what does vencord quickcss use for validation? nested ...
its just monaco
bitches be SLAAAAACKING https://github.com/microsoft/monaco-editor/issues/4071
teal cave
damb
edgy sentinel
aired so hard
they just need to update the language parser dependencies
now i know what vencord pull requestors feel like
teal cave
so vscode currently uses something else, or has a special sauce version of monaco not available to others?
edgy sentinel
no, monaco just uses very outdated parser
teal cave
gotcha
edgy sentinel
you know what let me see if i can do it myself
worldly moss
bitches be SLAAAAACKING https://github.com/microsoft/monaco-editor/issues/4071
the maintainers of that are dead as hell 
vestal field
venaco when??
teal cave
YIPPEE
echo frost
https://toaster.sh/i/0878s9zm.png
Is this what quickcss uses?
fading wigeon
yes
echo frost
cool
Do I need to update something besides vencord to get this or will it update when I update vencord?
fading wigeon
Do I need to update something besides vencord to get this or will it update when...
we're still waiting for the new version to come out but yeah, just update vencord once its updated
if you're doing manual builds you'll have to run pnpm i again
echo frost
I have a couple userplugins, but I'm able to update vencord from the update notif and button
Do I still need to do pnpm i?
oak plover
Itβs probably cause of them working on simplified profiles
pulsar rune
can someone help me to hide this annoying new msg/thread notification on the thread channel?
teal cave
gonna pour hot grits in my eyeballs
hate working on light mode because so easily flashbang yourself
fading wigeon
hate working on light mode because so easily flashbang yourself
turn a light on
iron smelt
turn a light on
not all of us are rich, we all canβt afford lights (joke)
worldly moss
not all of us are rich, we all canβt afford lights *(joke)*
i cant even afford showers, youre lucky with lights /j
tight fable
howdy yall
how would i go about fixing this alignment issue in css?
this is what i currently have (up to date code, alignment issue still persists):
:root {
--default-msg-color: rgba(210, 210, 210, 0.2);
--self-color: rgba(204, 108, 231, .2);
--default-time-color: rgba(210, 210, 210, .5);
--self-time-color: rgba(204, 108, 231, .5);
}
/* align self messages to the right by seele */
/* taken from vencord */
[class^=messageListItem__][data-is-self="true"] {
margin-left: auto;
width: fit-content;
padding-right: 48px;
[class^=container_], .embedAuthor_cb4bfc { direction: rtl; }
[class^=contents_] {
display: inline-block;
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: 8px;
}
[class^=repliedMessage_],
[class^=contents_] [class*=messageContent__],
a:not([class*=embed_] [class*=embedAuthorNameLink_]) {
margin-left: auto;
}
[class^=avatar__] {
left: unset;
right: -8px;
}
/* if you have a decoration on, this should allign */
[class^=avatar_] + [class^=avatarDecoration_],
[class^=avatar_] [class^=avatarDecoration_] {
left: unset;
right: -12px;
}
[class^=header__], [class*=messageContent__] { display: flex; }
[class*=timestampInline_] { top: 2px; }
}
/* message bubbles */
.cozyMessage__9f4fd .contents_d3ae0d > [class^="markup"]:not(:empty, code),
.container__62863 > :not(.reactions_da5b2a, .searchResultsWrap__2e184 *) {
border: 2px solid var(--default-msg-color);
background-color: var(--default-msg-color);
border-radius: 10px;
letter-spacing: 0.1mm;
max-width: max-content;
box-sizing: border-box;
display: inline-block;
padding: 8px;
margin: 0;
box-shadow: 0 2px 4px 0.5px black;
}
/* my color :3 */
.messageListItem__050f9[data-is-self="true"] >
.cozyMessage__9f4fd [class^="contents"] > [class^="markup"]:not(:empty, code){
border: 2px solid var(--self-color);
background-color: var(--self-color);
}
/* Timestamps by SEELE1306 */
/* Vencord CSS Snippets */
.contents_d3ae0d [class^="timestamp"] {
position: relative;
color: var(--text-3) !important;
letter-spacing: 0.05em;
font-size: 10px !important;
margin: 0 4px;
height: 16px;
border-radius: 5px;
top: -4px;
line-height: 1rem !important;
/* box-shadow: 0 2px 1px 0.5px black; */
}
.contents_d3ae0d [class^="botTagCozy_"] {
line-height: 1rem;
height: 16px;
top: 2px;
}
/* if not me */
.contents_d3ae0d [class^="timestamp"]:not(:has(time)) {
background: var(--default-time-color);
padding: 0 4px 0 2px;
}
.contents_d3ae0d [class^="timestamp"]:has(time) {
background: var(--default-time-color);
border: 1px solid var(--default-time-color);
padding: 0 4px;
}
/* if me */
.messageListItem__050f9[data-is-self="true"]
.contents_d3ae0d [class^="timestamp"]:not(:has(time)) {
background: var(--self-time-color);
}
.messageListItem__050f9[data-is-self="true"]
.contents_d3ae0d [class^="timestamp"]:has(time) {
background: var(--self-time-color);
border: 1px solid var(--self-time-color);
top: 0;
}
/* username (and tags) and avatar stuff */
/* adds shadowing to avatar (not avatar deco) */
.contents_d3ae0d .avatar__08316 {
border-radius: 35%;
box-shadow: 0 2px 4px 1px black;
}
/* moves avatar down & username up */
.contents_d3ae0d [class^="avatar"] { top: calc(100% - 48px); }
.contents_d3ae0d [class^="username"]{ top: -2px; }
/* bot stuff */
.botTag__11e95:not([class*="botTagOP"]){
margin-left: 5px;
top: 0.5px;
position: relative;
color: var(--text-normal) !important;
font-size: 10px !important;
border-radius: 5px;
background: hsla(0, 0%, 100%, 0.25);
box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.55);
}
/* removes the reply/thread stuff */
.repliedMessage__636d2::before,
.spine_d081ec.cozy__0c529,
.message_ccca67::after
{ display: none; }
/* moves edit button to be properly aligned */
.markup_a7e664 > .timestamp_c79dd2 { top: -2px; }
tight fable
i forgot to include but how would i also go about removing the thread lines / reply lines
echo frost
i forgot to include but how would i also go about removing the thread lines / re...
.repliedMessage__636d2::before {
display: none;
}```also avatar decorations are broken for me
worldly moss
lol
worldly moss
u dont have the root colors defined
echo frost
worldly moss
a lil :root{} = whole theme 
echo frost
?
tight fable
i lowk forgot about the root bc it's all the way at the top of my css but ty this worked
root for reference :3
:root {
--color-outline: hsla(0, 0%, 100%, 0.15);
--color: hsla(0, 0%, 100%, 0.05);
--my-color-outline: hsla(260, 25%, 45%, 0.45);
--my-color: hsla(260, 25%, 45%, 0.25);
}
Ok now it doesnt break embeds
short msgs don't seem to be aligned to the right @tight fable
tight fable
yes that is the problem i'm trying to figure out
echo frost
ah
glad urchin
i am slowly going insane
does font-smooth or -webkit-font-smoothing work in windows at all,
or is there a way to prettify fonts which get algorithmic blur when there isnt a bold font
clear siren
font smoothing is mac only properties
not sure how you mean prettify
or what you mean by algorithmic blur
font renderings and preferences regarding them can be very hard to convey in text so you should probably take screenshots and stuff
glad urchin
font renderings and preferences regarding them can be very hard to convey in tex...
discord default // ms sans serif
the latter has a pre-defined bold font, however
the former ms sans serif does not have a bold font, therefore the browser generates its own
this, for some reason is cleaner on firefox than on chromium (vesktop)
i am wondering if there is a way to either
- make it render like firefox
- disable the antialiasing as whole
clear siren
firefox font rendering has always been superior
glad urchin
clear siren
you could force another font-family for bold elements maybe
either via font-face rules or the standard css way
glad urchin
i can disable font-weight for everything but it would make distinguishing what is bold harder
unless i set a specific color for it ( #π¨-css-snippets )
guess ill go with that for now until either chromium dies in 2030 or they fix it 2040
signal moss
For some reason with Vencord you can't theme the popout player
glad urchin
which one
signal moss
Like the one for watching a stream outside of the main window
It just don't do anything
No CSS gets applied
Which I can confirm with
* {
background: red;
color: red;
}
Not applying
glad urchin
oh wait
signal moss
If it makes ANY difference (Which I doubt it does), my code is processed via PostCSS as per the script https://github.com/Reabstraction/Discordbar/blob/main/build.ts
Which does include (In production, not dev), minification and optimization via the cssnano plugin
glad urchin
that wont, since its an iframe or similar
signal moss
that wont, since its an iframe or similar
Its an entirely different window
Btw PostCSS is incredibly useful
signal moss
pretty sure vc styles arent applied to the popup thingy
Yeah they aren't
Which is annoying
bleak gust
hm
i wonder
i am working on a project to replace quickcss
nop does not naturally work there
signal moss
i am working on a project to replace quickcss
What is QuickCSS
bleak gust
What is QuickCSS
The built-in CSS loader/editor
signal moss
The built-in CSS loader/editor
ok
clear siren
If it makes ANY difference (Which I doubt it does), my code is processed via Pos...
rate my titlebar remover https://github.com/nvhhr/discordcss/blob/main/snippets/nocaption.theme.css
glad urchin
this causes mental pain
clear siren
why
fading wigeon
lack of margin
pure cairn
just make its background transparent
iron smelt
rate my titlebar remover https://github.com/nvhhr/discordcss/blob/main/snippets/...
5/10
pure cairn
supple bone
Suggestion (if possible): vertically center win buttons, keep Discord wordmark and make the drag area from there
supple bone
Might be the worst feedback I've ever read
devout elm
jus a hate thread π
devout elm
fwiw i liked the theme when i tried it its pretty
clear siren
yeah theming is very subjective, I know mine is very different to most themes
I did that before and it caused issues like you can see, so I only clear backgrounds from specific elements instead
much easier to background:transparent specific elements instead of clearing everything and trying to fix unusable menus and dialogs afterwards
vestal field
hes just a hater but hes right about this at least
i remember there was a way to do that
back when my theme required it
clear siren
there is 2 ways to achieve it
one is to repurpose the original drag area and the other is setting a property on an element
-webkit-app-region: drag;
I rarely need or want to drag my window so the 'inaccessible' drag area is more than enough
but yeah I should add some margin to make it look nicer
I used to have a transparent dm button with a shiggy image as you can see in my theme screenshot, where it had a margin from the image not being tall enough to get so near to the window edge
but it's better to not have it transparent because the bgcolor is an indicator of new messages/hover/active so yeah
no
bleak gust
this is insane
vestal field
https://toaster.sh/i/kg8f722n.png
it looks cool but this text spacing is horror
worldly moss
fading wigeon
if i had the motivation i would work on fixing up and making w9x more complete
https://gitdab.com/Cynosphere/pxvmc
https://github.com/Cynosphere/w9x
i offer support on neither, you're on your own
the former is static and requires a lot of manual editing if you want it a specific way
the second one is
speak english
ok speed junkie
what next, you're going to shit on the theme entirely for using wildcard selectors instead of hardcoding class names because it slow despite the fact ive been doing it this way for years on end ever since they added unique class names to discord?
you had one chance to contradict my point and you didnt 
devout elm
<https://gitdab.com/Cynosphere/pxvmc>
<https://github.com/Cynosphere/w9x>
i offe...
also woa awesome i tried looking for this a few months back i think but i couldnt find it
devout elm
wouldnt nesting every element under html.platform-win mean every element has to go up the tree to check if its a child of it?
fading wigeon
a {
& b {
}
}
a {
b {
}
}
both still just get shaken down to a b {} π€―
you have no fucking idea what you're talking about
i have custom tooling too https://github.com/Cynosphere/w9x/blob/master/build.mjs
and other jokes you can tell yourself
yeah cause most of it is done by stylus already
no i wrote my own usercss parser for the discord mod i use
bd is also adopting usercss
and vencord has an eternally wip usercss pr
bleak gust
https://toaster.sh/i/kg8f722n.png
discord in 2008
fading wigeon
cause it doesnt fucking matter cause its not being sent over the fucking internet π£οΈ
i dont need to minify for a fucking file being read off the disk
vestal field
why would you minify a discord theme
fading wigeon
if its a tsoding clip, im invalidating anything you've ever said to me in the last however long
watch history enabled
vestal field
saving 10ms on a 10s discord startup is surely worth it
fading wigeon
which are invalidated the second you introduce ntfs and windows defender into the picture
i never said it was going to fix shit you fucking mong
im saying that if these two things are even in the picture, your speeds are worsened as it is
hdd or not
so in the end
it doesnt fucking matter
not even?
devout elm
i dont think u have the right to call anyone mad im sorry π
fading wigeon
im not even mad, im laughing my ass off at your incompetency
yep im the stupid one here https://toaster.sh/i/d8eattf6.png
im honestly surprised this channel isnt dev role locked
devout elm
.
vestal field
she literally sent you her theme...
fading wigeon
of course you're a fucking unoriginal arch user, no wonder you have such shit opinions
so can i
you're outnumbered in this case
you just keep saying shit that makes us laugh more than it makes you jerk yourself off πΏ
worldly moss
average #π¨-theme-development drama
vestal field
vestal field
nah this guy is funny though
optimizing the shit out of a single titlebar snippet and then dogging on others for accessibility
fading wigeon
nah this guy is funny though
optimizing the shit out of a single titlebar snippe...
and "muh speed"
fading wigeon
nah this guy is funny though
optimizing the shit out of a single titlebar snippe...
*"optimizing"
why does it matter
numbers dont mean shit
sorry our stupid monkey brain get dopamine from "number go up"
devout elm
lord
fading wigeon
i have, doesnt mean i have to follow it like a mindless npc like the rest of the world
pure cairn
nah this guy is funny though
optimizing the shit out of a single titlebar snippe...
But hey, at least it go fast
That 0.01s counts
vestal field
how did you end up making a titlebar snippet 500 lines anyway
fading wigeon
thats the reason why social media is nothing but brain rot because they dont care about anything more than "number go up"
vestal field
But hey, at least it go fast
That 0.01s counts
i love minifying my snippet so i can save 5 kb
fading wigeon
5kb saved, but at what cost?
Being able to read and understand it easily later
5kb of initial read, 5kb to ram to parse it down into the smaller file
"muh seek times" when you're spending more seek times on read minifying it down into a file everytime you make a modification and rebuild it
vestal field
fair enough
this snippet aint even bad you're just making such a big deal out of something like 3 people use lol
just dont shit on other people's work?
pure cairn
fading wigeon
and im the one that was "mad" 
now im just rent free in your head
keep scapegoating everything wrong with you, that'll get you far in life
then stop
a little too much
vestal field
i think you need therapy...
fading wigeon
nobody likes people that scapegoat on whatever mental illnesses they have or whatever else is wrong with themselves
supple bone
Kids with no manners thinking they're the center of the universe, classic
fading wigeon
because you're making your autism/neurodivergence/whatever else your personality and as an excuse for your shitty actions
the fuck you're not
supple bone
Let's stop this conversation at this point it's not theme related anymore
fading wigeon
.
devout elm
u clearly must care a little bit about discord to minify ur entire disc snippet but who knows
fading wigeon
u clearly must care a little bit about discord to minify ur entire disc snippet ...
or to even be involved with client modding in general
devout elm
literally
vestal field
im honestly surprised this channel isnt dev role locked
sounds like a good idea right now
fading wigeon
be the change you want to see
pure cairn
Hop on a dev install and delete the other plugins
fading wigeon
whatever you see fit Β―_(γ)_/Β―
vestal field
yeah you should do this its not hard
fading wigeon
we're all just wasting time here arguing anyways
vestal field
vesktop lets you just load vencord from local anyway
devout elm
wonderful
quartz surge
you too buddy
supple bone
That was surreal lmao
quartz surge
sorry, that was aggravating, i just wanted to see what was new with theme dev and walked into all that
devout elm
how silly
vestal field
i feel bad for that kid
vestal field
supple bone
Grabbed a bowl of popcorn and was laughing so hard reading
alpine current
Having fun reading all that drama 
torpid void
LMAO
edgy sentinel
theme looks awesome tbh you're just a cunt
god what is this schizo rant they did
deranged
edgy sentinel
never lmao
fading wigeon
infinite entertainment generator
edgy sentinel
hey at least that person is self aware check out their status
fading wigeon
hey at least that person is self aware check out their status
you mean their pronouns? that was always like that
edgy sentinel
crazy how 90% of people who make being autistic their personality are cunts
why would u put ur mental illnesses in ur bio
im autistic too but why would random people online need to know that
vestal field
so when are we dev role locking this channel <:tr:1000864032158404611>
there's no real way for people to earn snippet dev apart from this channel
edgy jungle
realest
fading wigeon
there's no real way for people to earn snippet dev apart from this channel
if you have to put in a modmail request to get the role anyways why cant you just modmail request your snippet
vestal field
supple bone
why would u put ur mental illnesses in ur bio
Because kids people want attention
torpid void
im autistic too but why would random people online need to know that
what are u supposed to put in a bio
i copied my bfs bio tbh and changed it a little
edgy sentinel
your interests, your pronouns, a quote you like, a song you like, whatever
fading wigeon
what are u supposed to put in a bio
idk i just have my site, my birthday and my timezone in mine https://toaster.sh/i/zcrxubyu.png
and favicat
i accidentally started a trend of people putting favicat in their bio
teal cave
Sell your bio as advertising space
fading wigeon
who asked
tight fable
edgy sentinel
there's no real way for people to earn snippet dev apart from this channel
yeah basically this, and a lot of people want access here
fading wigeon
im still just clearly rent free in your head even if you wont admit it
edgy sentinel
oh my god you're so sad please find a hobby or something
v+ cant talk @signal moss
oh is it with a '
v+ can't talk @signal moss
now let's hope i set up permissions correctly (probably didn't)
fading wigeon
i can check
edgy sentinel
can we talk about how awful keeping discord permissions synced to all channels is
once you start making some overrides it all falls apart
fading wigeon
nvm they started typing again so clearly its fucked
edgy sentinel
it's kinda obvious why you're friendless, maybe become a better person
pure cairn
so when are we dev role locking this channel <:tr:1000864032158404611>
No please I still need to get yelled at for bad selectors
edgy sentinel
there the permissions have been fixed
supple bone
Edgy kid wants attention, classic
edgy sentinel
cant talk doesnt apply here
i hate how painful it is to override permissions the everyone role has
have to add an override to every channel
come on discord
fading wigeon
No please I still need to get yelled at for bad selectors <:venniecozycat:121680...
true
vestal field
and you cant sync channels to categories if there's a single difference
fading wigeon
i still think about that one spicetify dev that argued about "bad selectors" and "why are you not just making a css map"
edgy sentinel
anyway monaco make v49 release sooner plox
edgy sentinel
and you cant sync channels to categories if there's a single difference
yeah π
edgy sentinel
anyway monaco make v49 release sooner plox
or should we just use alpha
fading wigeon
temporarily?
vestal field
yes
teal cave
hmm what a waste of time it was scrolling up to read all of... that
edgy sentinel
lmao
fading wigeon
the only people it annoys with bumping the version twice is people that manually build Β―_(γ)_/Β―
edgy sentinel
desktop loads from cdn anyway
i plan to distribute vencord files via asar instead of individual files soon (why didn't i do this from the start) and then we can also stop using cdn
fading wigeon
real
vestal field
teal cave
as a tangent, it's funny when people complain about accessibility in my extreme discord rearrangement themes. like this theme clearly designed for you to take 3 screenshots in and then use a normaller theme like everyone else, please don't try to daily this
vestal field
lol
prisma turtle
bleak gust
i plan to distribute vencord files via asar instead of individual files soon (wh...
can you PLEASE also find ALL the links to online files and move them in there too
maybe have something like a assets dir under each plugin
fading wigeon
that requires a lot of extra work though
warm portal
unrelated, but what color scheme / windows theme r u using? i rly like the palette @fading wigeon
warm portal
thanks
bleak gust
that requires a lot of extra work though
worth it
fading wigeon
nop
tight fable
howdy guys
i got 2 questions:
- would it be possible to align messages over to the right next to the avatar (these are
groupStartmsgs im p sure) - would it be possible to adjust the avatar position to last message sent
here is root stuff and snippet (that's hopefully up to date (im forgetful)):
https://github.com/its-x3non/DiscordSnippets/blob/main/ProperMessages/ProperMessages.theme.css
@import url('https://raw.githubusercontent.com/its-x3non/DiscordSnippets/main/ProperMessages/ProperMessages.theme.css');
:root {
--default-msg-color: rgba(210, 210, 210, 0.2);
--self-color: rgba(204, 108, 231, .2);
--default-time-color: rgba(210, 210, 210, .5);
--self-time-color: rgba(204, 108, 231, .5);
--default-text-color: rgb(255, 255, 255);
--self-text-color: rgb(240, 187, 255);
--default-accent: rgb(170, 239, 252);
--self-accent: rgb(4, 4, 167);
}
code is a mess because i just took a bunch of stuff and brute-forced it to make it work, might fix it later might not
this css snippet is almost done i just need help on the alignments n stuff
echo frost
howdy guys
i got 2 questions:
1) would it be possible to align messages over to ...
The import you sent doesn't work btw (you forgot the url())
I think you need to use ```css
@import url('https://raw.githubusercontent.com/its-x3non/DiscordSnippets/main/ProperMessages/ProperMessages.theme.css');
Also when i send a msg, i'm not seeing my avatar. is that intentional?
seems like your avatar is in your preview images so probably not?
maybe it just got messed up because of the reply
bc it's working in a dm
and other channels
inner pine
idk i just have my site, my birthday and my timezone in mine https://toaster.sh/...
favicat extracted
οΌ|γ
οΎοΌοΎο½€ ｑοΌ
|γοΎ~γ½
γγf_,)γ
cute
now its my cat
gusty rose
I got around to try your theme, it's nice, but I noticed that you're using Vencord specific plugin to expose those [data-*-*] elements, which is ThemeAttributes https://github.com/Vendicated/Vencord/tree/main/src/plugins/themeAttributes. While it's better than avoiding the use of aria labels, but unfortunately that stuff would make it more Vencord specific.
Personally I am on the fence on how to best approach this. the feedback that you got is just another different opinion on selecting the specific elements. I could also argue that ThemeAttributes is fragile as well, fragile in that only certain bars has [data-tab-id] added to it, and it won't work with things like the usual shop elements for example (on home screen). That said, I don't have a solution to ThemeAttributes, but it's not really the path that I'd want to go down with, as it is too plugin dependent. The (excessive) use of divalong with the likes of :nth-of-type() is more of a generic solution, that would even work when running discord via the web browser (obviously excluding the likes of Vencord or any electron solution), despite it being fragile in other sense, imo.
lost plume
I love starboard for allowing me to read...that.
gusty rose
Vesktop* even.
worldly moss
using ThemeAttributes is 50 times better than hardcoding classes
gusty rose
Except makes it depends on that as a result
pure cairn
I got around to try your theme, it's nice, but I noticed that you're using Venco...
Would the alternative be putting an aria-label from every supported discord language?
gusty rose
No, that's the alternative that I am trying to move away from.
solid ore
i think its the best compromise, for vencord users it should survive most updates
pure cairn
No, that's the alternative that I am trying to move away from.
Well, it's not like discord adds new languages every day
gusty rose
The same could also be said for new elements on discord UI, at least for stable versions
pure cairn
True
teal cave
Would the alternative be putting an aria-label from every supported discord lang...
I have done this in the past and it's terrible, don't do it unless there is absolutely no other option. Not only fragile because Discord can change the aria-label for any language, but also you are much less likely to notice and fix changes.
(the reason I did it before was due to the lack of :has support, nowadays you can pick an icon using the svg path in :has)
solid ore
(the reason I did it before was due to the lack of :has support, nowadays you ca...
tbh i think selecting based on a specific svg path is more fragile, sure you're more likely to notice, but you'll probably have to update it more often than aria labels
teal cave
Since 2019 I've had to update paths once
solid ore
damn
worldly moss
searchbar placement looks rather weird
especially as it doesnt follow the width of the rest
I like the tabs at the top though
pure cairn
Ngl it took me a while to find the search bar
Without taking the white theme into account
teal cave
tyty
glad urchin
I LOVE
manic lagoon
@grave nova here lol
grave nova
ye
leme do that rq
hold on my devtools not working
ari here we go
ok so you probably do .barFill__1f56b:hover { update the color }
and to future proof just do > [class^=barFill__]
doesnt work
hol on
manic lagoon
xD I just finished running npm run test and then you tell me it doesn't work :>
manic lagoon
I appreciate you taking the time to look into this
wish I was smart enough to get it on my own lol
grave nova
.barFill__1f56b:hover {
background-color: #5d3fd3 !important;
}
this works but only specifically on the barfill
aaa
manic lagoon
I tried this
#vc-spotify-player:hover > [class^='barFill__'] {
background-color: $hover-color !important;
border-color: $hover-color;
color: $hover-color
}``` and also this
```scss
#vc-spotify-progress-bar:hover > [class^='slider'],
#vc-spotify-progress-bar:hover > [class^='grabber'] {
background-color: $hover-color;
border-color: $hover-color;
color: $hover-color
}``` neither worked lolWhat are you trying to do?
manic lagoon
echo frost
what is $hover-color?
echo frost
oh
manic lagoon
the second snippet was closer but it did this
not quite what I wanted, and also only works if I hover the bar area
echo frost
you can use the [class^='barFill__'] instead, but these are easier for me
this works
#vc-spotify-player:hover .barFill__1f56b {
background-color: red;
}```so
#vc-spotify-player:hover [class^='barFill__'] {
background-color: $hover-color;
}```
manic lagoon
I see you probably adjust margin top xD
I did as well
it was just like 1px to high lol
echo frost
I see you probably adjust margin top xD
?
echo frost
I've worked on the spotify player before
although I was mostly editing existing ones
manic lagoon
#vc-spotify-progress-bar>[class^=slider] [class^=grabber] has margin-top: 4px but then the grabber is just slighlty off center from the bar I changed it to 5px and now my eyes are much happier lol
echo frost
huh
echo frost
looks centered to me
echo frost
Try without theme
echo frost
Can I see your theme?
manic lagoon
err
lol
or actually
here's this but...yeaaaa
all the css (well scss but same diff really) is in asorted files lol
oh
I wonder if it's this
#vc-spotify-player {
border-top: 1px solid var(--background-modifier-accent);
}```doesnt seem like it
manic lagoon
perhaps this?
%sliderGrabber {
background: #fff;
border: none;
border-radius: 5px;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
}```I can't image border-radius messing it up but idk strange things happen sometimes with CV lol
regardless I just added margin-top: 5px and it looks fine now so...I won't bother to search the 30 some files to find where we messed something up for it lol
echo frost
seems to be this
.slider__22e99 .grabber_e3daf3 {
background: #fff;
border: none;
border-radius: 5px;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
}```oh yeah thats what you sent
manic lagoon
maybe the box shadow
tysm for the help I now feel comfortable pushing the changes lol
manic lagoon
I shall bother the other team member xD
one last question while I'm here I suppose
the reply mention switch, when it's on I'd like to make it a differnt color I'm assuming I need to use an aria label?
something like this but I'm not too sure how to properly do this .mentionButton__73096 aria-checked="true"
teal cave
something like this but I'm not too sure how to properly do this .mentionButton_...
div[aria-checked="true"] .mentionButton__73096 {
color: green !important;
}
div[aria-checked="false"] .mentionButton__73096 {
color: red !important;
}
Ah brilliant thanks
Shit mobile reply on π¦
Sorry
true glen
Hey! Is there any way to hide the recommended channels tab?
glad urchin
I've worked on the spotify player before
trying to get dominatn color again?
gilded cloak
yoo similar logos to react and haskell nice
it got merged!
pure cairn
yoo similar logos to react and haskell nice
I love this
gilded cloak
/** Compress dev channel bot messages **/
:is([data-author-id="1015063255854633081"], [data-author-id="1040603954725257277"], [data-author-id="1216402612631638056"], [data-author-id="1216402422654701640"]) > * {
/* keep embeds close together */
min-height: 0 !important;
/* compact small update embeds */
[class^="grid_"]:has(> :last-child:nth-child(2)) {
display: flex;
flex-wrap: wrap;
padding: 0.25rem 0.5rem;
gap: 0.5rem;
* { margin-top: unset; margin-bottom: unset; }
/* center texts vertically */
> * { display: flex; align-items: center; }
}
}
/* squish together sequential messages by the same author, removing extra profile pictures */
[data-author-id="1015063255854633081"] + [data-author-id="1015063255854633081"] > *,
[data-author-id="1040603954725257277"] + [data-author-id="1040603954725257277"] > *,
[data-author-id="1216402612631638056"] + [data-author-id="1216402612631638056"] > *,
[data-author-id="1216402422654701640"] + [data-author-id="1216402422654701640"] > * {
margin-top: -0.25rem;
h3 { display: none; }
> [class^=contents] img { display: none }
}
This got too laggy
pure cairn
whar
grand surge
i just made sort of my first css 
im trying to repair this guys css and make it future proof im kind of guessing #π¨-css-snippets message
/*activity on members list*/
.container__8d997 {
height: 42px;
}
.userName__23133 {
display: none;
position: absolute;
}
[class^=contentImage]{
width: 34px !important;
height: 34px !important;
}
[class^=badgesContainer] {
display: none;
position: absolute;
}
.userSection__9a4c1 {
position: absolute;
font-size: 0;
}
.contentDescription_e07aa0 {
padding-left: 20px;
}
.reply_d4ce98 {
display:none;
}
oh idk how to color it lol
it works again but idk how to make it choose the class and not like, the specific element since they change the name alot
so i tried using class^=
tender hedge
after the first three ` put "css" without quotes and make sure the content isnt in the same line
grand surge
oh ty ty
echo frost
trying to get dominatn color again?
nah
glad urchin
oh
wanton dock
yoo similar logos to react and haskell nice
what in the fuck is that
are we gonna ignore the black sun being shown in that image
echo frost
what in the fuck is that
echo frost
react?
wanton dock
literally look between that one on vencord.dev and that screenshot they sent
echo frost
looks the same to me
wanton dock
youre fucking blind.
echo frost
I'm on mobile rn
echo frost
https://cdn.discordapp.com/attachments/1134844326933954622/1237431533246353540/image.png?ex=663c482b&is=663af6ab&hm=c897eee07952e04721611ebfaf22d8d08f9ae6bd2929ba59cb22dcbee12bcd7c&
https://cdn.discordapp.com/attachments/1134844326933954622/1237633080743694419/image0.jpg?ex=663c5b20&is=663b09a0&hm=5786fbbc0f006a39e67f36652822ba65f54d959649bb32c3245d0d0dadd16347&
oh yeah
wanton dock
wanton dock
yeah point out the obvious
vestal field
yoo similar logos to react and haskell nice
uhhhhhh wtf
did adonis add that to the screenshot??
vestal field
is this guy a legit nazi
fading wigeon
is this guy a legit nazi <:husk:1026532993923293184>
5 mutual friends
fading wigeon
makimwah?
vestal field
the two of them
fading wigeon
im more impressed it took 14 hours to notice
i prob wouldve if i was paying more attention
prime yoke
crazy paint job
warm portal
is this guy a legit nazi <:husk:1026532993923293184>
i don't think so
vestal field
the only other explanation i can think of is someone hacked the site
warm portal
the only other explanation i can think of is someone hacked the site
he edited the screenshot silly
not only the black sun
vestal field
yeah well thats obvious now
warm portal
he added the SS thing too
vestal field
just dont get the intentions
warm portal
just dont get the intentions
neither
lilac prairie
pine tartan
fading wigeon
just dont get the intentions
4channer shitposting behavior
warm portal
I love this
Do you
warm portal
lmao
solid ore
is there a way to disable clicking on an anchor link without doing pointer-events: none?
i want to keep the tooltip that comes up on hover
devout elm
i know u said without pointer-events but i randomly thought of this n it seems to work π
a:active {
pointer-events: none !important;
}
obviously adjust
not sure if the important is necessary jus put it in case
i explained why π
solid ore
i know u said without pointer-events but i randomly thought of this n it seems t...
that works, thank you!
devout elm
u can still see the tooltip
solid ore
yep
devout elm
yw!
remote flax
any idea why these codes are not working anymore? 'a:active {
pointer-events: none !important;
}' and '/* channels on the left size */
.sidebar_ded4b5 {
min-width: 270px !important;
}'
bleak gust
any idea why these codes are not working anymore? 'a:active {
pointer-events...
Discord rerolls their classnames occasionally
Either match with [class*="sidebar_"] (might need more selectors)
or use updated classname .sidebar_e031be
remote flax
that is for which one of the bars?
how do i find out classnames? i dont know much about css
remote flax
oh god there are a lot of elements
solid ore
this should work but am on mobile rn so cant test
[class*=botTag_]:not([class*=botTagOP]) {
content: "BOT";
}
what link do u wanna disable with the first one
bc atm ure disabling every anchor
solid ore
am on pc now, here:
[class^=botTag_][class*=botTagRegular_] [class^=botText_] {
visibility: hidden;
}
[class^=botTag_][class*=botTagRegular_] [class^=botText_]::before {
content: 'BOT';
visibility: visible;
position: absolute;
}
light-dark() colour pairs recently got added to chromium, not available on Discord yet (and might be of limited use considering we already have .theme-dark and .theme-light) but neat nonetheless https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark
oak plover
I thought light-dark was old af what
remote flax
what link do u wanna disable with the first one
i think that was a mistaken ctrl+v
what im using now is
/* channels on the left size */ .sidebar_ded4b5 { min-width: 270px !important; }
and
`.members__9f47b {
min-width: 273px !important;
}
.member_aa4760 {
max-width: fit-content !important;
}`
still couldnt figure it out the new class names for the right side members bar
pure cairn
Have you tried with
[class^="membersWrap_"] [class^="members_"]```no i didnt! π it worked, but i cant lower the widht, only increase apparently
pure cairn
The min-width or the max-width?
pure cairn
Oh yeah, you're still missing the member_ class
As stupid as it might sound, did you try using
[class^="member_"]```
Idk if it has other matchesCan't check it rn on phone
pure cairn
`.members__9f47b {
min-width: 273px !important;
}
.member_aa4760 {
max-...
But that's different from the snippet you sent earlier
remote flax
i change it with what u sent me to try to make it work
pure cairn
Have you tried with
```css
[class^="membersWrap_"] [class^="members_"]```
This is supposed to replace .members__9f47b
Just that
[class^="membersWrap_"] [class^="members_"] {
min-width: 273px;
}
[class^="membersWrap_"] [class^="members_"] [class^="member_"] {
max-width: fit-content !important;
idk, try this
remote flax
Oh ok! I will try it once my internet on PC gets back. Just lost the connection π
Thank you for helping me krammeth!
pure cairn
np, I just hope it works lol
pure cairn
```css
[class^="membersWrap_"] [class^="members_"] {
min-width: 273px;
}
[clas...
this should be more resilient than using plain class names
otherwise, you can use
.members__573eb {
min-width: 273px !important;
}
.member_aa4760 {
max-width: fit-content !important;
}```which is the same thing, but will probably break whenever the next class reroll happens
remote flax
otherwise, you can use
```css
.members__573eb {
min-width: 273px !important;...
this one didnt worked for me but the other one did!
thank you so much!
remote flax
astral trellis
can i copy css code from a raw.github link into quick css?
astral trellis
yea i was gonna edit a tiny piece
thanks
which is prioritized, local themes/quickcss or online themes?
vestal field
which is prioritized, local themes/quickcss or online themes?
i believe quickcss
worldly moss
i believe quickcss
yup
clear siren
you can see the order they're loaded in devtools
- vencord builtin css stuff including plugin related css
- online themes followed by local themes
- quickcss
- some more vencord builtin css?
and the last one is windows accent color
teal cave
discord forums are so terrible
clear siren
you mean forum/post-type channels or the support forum thing
teal cave
the forum channel type
would be very epic if this could be sticky so that you can write your post and scroll at the same time, but nope it's part of the lazy loader
worldly moss
discord shouldve given forums more thought in the implementation
clear siren
discord giving thought in any implementation?
pure cairn
```css
[class^="membersWrap_"] [class^="members_"] {
min-width: 273px;
}
[clas...
by the way, I was wondering whether this could be nested as
[class^="membersWrap_"] [class^="members_"] {
min-width: 273px;
& [class^="member_"] {
max-width: fit-content !important;
}
}
not that there would be any benefit from doing it, just out of pure curiosity
solid ore
by the way, I was wondering whether this could be nested as
```css
[class^="memb...
not what youre asking, but is there a reason for putting class attribute selectors in quotes? i pretty much never do it and it works fine for me, it's still dependent on case
clear siren
yeah for classes or ids you don't need the "" but for some other attributes you do
doesn't seem to have anything on MDN or csswg specs about where you need quotes or why
worldly moss
quotes look nicer
clear siren
I omit them when I can
solid ore
same
pure cairn
by the way, I was wondering whether this could be nested as
```css
[class^="memb...
I'll take it as a yes
grand surge
anyone know if theres a way to refer to this little hang status
i tried using [aria-label="Add a status"] or [aria-label*="Playing"] but those only take me so far
I want to move it individually without moving everything else in iconGroup
fading wigeon
I want to move it individually without moving everything else in iconGroup
iconGroup:has(> hangStatusIcon)
grand surge
iconGroup:has(> hangStatusIcon)
so put it like this?
fading wigeon
not 1:1
youll have to actually add proper class selectors for it
and yes itll throw an error because of quickcss being on older monaco with the issue just being fixed a few days ago
grand surge
is hangStatusIcon an id or like what type of attribute is that dyk
fading wigeon
its a class
grand surge
ohh
fading wigeon
same with iconGroup
grand surge
it works now yayaya
fading wigeon
@edgy sentinel more cursed has and adjacent selector stuff https://gitdab.com/Cynosphere/pxvmc/src/branch/master/src/ansi_chain.scss
edgy sentinel
does that combine ansi codeblicks
fading wigeon
yes
edgy sentinel
cursed
they still haven't made a new monaco release it's over
ill wait a few more days and then i might really just use dev
echo frost
why'd you delete these conversations?
gusty rose
teal cave
Would anyone be up for a bit of theme testing? https://raw.githubusercontent.com/Saltssaumure/neobrutal-discord-theme/main/Neobrutal.theme.css
fading wigeon
why'd you delete these conversations?
felt like it
vestal field
should i post my newbie snippet in here
yes
grand surge
ok
i was talkin to my friend about how the new game icon in vc offsets all the other icons so i moved it to the empty spot on the left
/*moves hang status to the left*/
[class^="iconGroup"]:has([class*="hangStatusIcon"]){
position:absolute;
right:196px;
}
[aria-label="Add a status"], [aria-label*="Playing"] {
position:absolute;
right:198px;
}
i just personally think it looks better there but maybe someone will like it ^^
@vestal field is there a way to apply for snippet dev or is it just fr people in the community
vestal field
<@508863359777505290> is there a way to apply for snippet dev or is it just fr p...
no u just send it here and if the mods like it you get the role
grand surge
o ok
dark dragon
I thought you could just ask through mod mail?
iron smelt
I thought you could just ask through mod mail?
same thatβs how i asked atleast
grand surge
its not a big deal i was just asking cuz people probably wont see it in hre
vestal field
its not a big deal i was just asking cuz people probably wont see it in hre
ok yeah i was wrong modmail is the better way
but if you want feedback post here
your snippet is pretty good, but nothing too special
clear siren
Would anyone be up for a bit of theme testing? https://raw.githubusercontent.com...
it works, although I do have an issue with the fact that bg colors also change text colors, would be better if they were in their own var imo
with color1:white and color2:black some texts are barely visible, the color-mix you use for --text-muted makes them very dark
timestamps mainly
also vencord toolbox text disappears because the aria-label is gone when active, should just hardcode that in tbh
@solid ore nice copypaste on your readme.md haha
clear siren
it works, although I do have an issue with the fact that bg colors also change t...
and to elaborate on this, it would allow for schemes like this
solid ore
<@724686807643455568> nice copypaste on your readme.md haha
sorry i was gonna mention it to you but forgot, you worded it rly well..
i'll change it
tight fable
is it possible to move this over to the center of the message
here is the concept image
grand surge
is it possible to move this over to the center of the message
here is the concep...
something like this?
tight fable
yuh
worldly moss
is it possible to move this over to the center of the message
here is the concep...
just move it via .buttonContainer__6de7e {}
grand surge
@tight fable try this and lmk if this is what you wanted ```css
/centers message actions on message/
[class^="buttonContainer"]:has([aria-label="Message Actions"]) {
position: absolute;
right: calc(50% - 100px);
}
this is exactly what i wanted
tysm 
grand surge
yw!
clear siren
I should try and make something usable of my message actions and reactions css
clear siren
not sure how to handle cases like this tho
clear siren
have to try
pure cairn
[class^="embedProvider_"] [class*="embedLink_"][href*="youtu.be"],
[class^="embedProvider_"] [class*="embedLink_"][href*="youtube.com"]
{ color: #c4302b !important;
margin-left: 20px; }
[class^="embedProvider_"] [class*="embedLink_"][href*="youtu.be"]::before,
[class^="embedProvider_"] [class*="embedLink_"][href*="youtube.com"]::before
{ content: url('data:image/svg+xml,<svg width="15px" height="15px" viewBox="0 -3 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Dribbble-Light-Preview" transform="translate(-300.000000, -7442.000000)" fill="%23c4302b"><g id="icons" transform="translate(56.000000, 160.000000)"><path d="M251.988432,7291.58588 L251.988432,7285.97425 C253.980638,7286.91168 255.523602,7287.8172 257.348463,7288.79353 C255.843351,7289.62824 253.980638,7290.56468 251.988432,7291.58588 M263.090998,7283.18289 C262.747343,7282.73013 262.161634,7282.37809 261.538073,7282.26141 C259.705243,7281.91336 248.270974,7281.91237 246.439141,7282.26141 C245.939097,7282.35515 245.493839,7282.58153 245.111335,7282.93357 C243.49964,7284.42947 244.004664,7292.45151 244.393145,7293.75096 C244.556505,7294.31342 244.767679,7294.71931 245.033639,7294.98558 C245.376298,7295.33761 245.845463,7295.57995 246.384355,7295.68865 C247.893451,7296.0008 255.668037,7296.17532 261.506198,7295.73552 C262.044094,7295.64178 262.520231,7295.39147 262.895762,7295.02447 C264.385932,7293.53455 264.28433,7285.06174 263.090998,7283.18289" id="youtube-[%23c4302b]"></path></g></g></g></svg>');
margin-left: -20px;
top: 10px;
position: absolute; }
[class^="embedTitle_"] [class*="embedLink_"][href*="youtu.be"],
[class^="embedTitle_"] [class*="embedLink_"][href*="youtube.com"]
{ color: #c4302b; }```a small tweak to youtube embeds
first time using svg paths, I was totally lost
Tbh I could even add color to the link in chat
pure cairn
Tbh I could even add color to the link in chat
[href*="youtu.be"]:not([class*="embedAuthor"]),
[href*="youtube.com"]:not([class*="embedAuthor"])
{ color: #c4302b; }
[class^="embedProvider_"] [class*="embedLink_"][href*="youtu.be"],
[class^="embedProvider_"] [class*="embedLink_"][href*="youtube.com"]
{ margin-left: 20px; }
[class^="embedProvider_"] [class*="embedLink_"][href*="youtu.be"]::before,
[class^="embedProvider_"] [class*="embedLink_"][href*="youtube.com"]::before
{ content: url('data:image/svg+xml,<svg width="15px" height="15px" viewBox="0 -3 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Dribbble-Light-Preview" transform="translate(-300.000000, -7442.000000)" fill="%23c4302b"><g id="icons" transform="translate(56.000000, 160.000000)"><path d="M251.988432,7291.58588 L251.988432,7285.97425 C253.980638,7286.91168 255.523602,7287.8172 257.348463,7288.79353 C255.843351,7289.62824 253.980638,7290.56468 251.988432,7291.58588 M263.090998,7283.18289 C262.747343,7282.73013 262.161634,7282.37809 261.538073,7282.26141 C259.705243,7281.91336 248.270974,7281.91237 246.439141,7282.26141 C245.939097,7282.35515 245.493839,7282.58153 245.111335,7282.93357 C243.49964,7284.42947 244.004664,7292.45151 244.393145,7293.75096 C244.556505,7294.31342 244.767679,7294.71931 245.033639,7294.98558 C245.376298,7295.33761 245.845463,7295.57995 246.384355,7295.68865 C247.893451,7296.0008 255.668037,7296.17532 261.506198,7295.73552 C262.044094,7295.64178 262.520231,7295.39147 262.895762,7295.02447 C264.385932,7293.53455 264.28433,7285.06174 263.090998,7283.18289" id="youtube-[%23c4302b]"></path></g></g></g></svg>');
margin-left: -20px;
top: 10.5px;
position: absolute; }```also managed to shorten it a bit
worldly moss
clear siren
make it scrollable or something(if thats even possible)
it might be possible but won't be easy :\
tender hedge
it might be possible but won't be easy :\
i might be able to do it but not sure
clear siren
i might be able to do it but not sure
I really hate sharing this css it's some of the worst I've ever written but here:
[class^="buttonContainer"]:has([aria-label="Message Actions"]) {
left: 38px; calc(var(--custom-standard-sidebar-view-sidebar-total-width) + 100px);
right: unset;
bottom: 40px;
top:auto; }
[class^=buttonContainer_] [class^=button_][aria-label="More"],
[class^=buttonContainer_] [class^=button_][aria-label="Copy Message ID"],
[class^=buttonContainer_] [class^=button_][aria-label="Copy Link"],
[class^=buttonContainer_] [class^=button_][aria-label="Mark Unread"],
[class^=buttonContainer_] [class^=button_][aria-label="Create Thread"],
[class^=buttonContainer_] [class^=button_][aria-label="More"],
[class^=reactions_] [aria-label="Add Reaction"],
/* whoreacted avatars only on hover*/
[class^=reactions_]:not(:hover) [class^=reactionCount_] + div
{ display: none; }
[id^=message-accessories-]
{ padding: 0 !important;
display: block !important;}
[class^=buttonContainer_] > [class^=buttons_]
{ top: 3px !important;
padding: 0 !important; }
[class^=buttonsInner_]
{ grid: auto-flow / 16px 16px !important;
width: 32px !important;
aheight: 32px !important;
box-shadow: none !important;
background: none;
transition: none !important;
border-radius: 0 !important; }
[class^=buttonContainer_] [class^=button_],
[class^=buttonContainer_] [class^=button_] svg
{ width: 16px !important;
height: 16px !important;
padding: 0 !important;
min-width: 0 !important; }
[class^=reaction_]
{ border: none !important;
margin: 0 !important;
background: none;}
[class^=reactions_],
[class^=reactionInner_]
{ padding: 0 !important; }
[class^=reactionCount_]
{ min-width: 2ch !important;
text-align: end !important; }
[class^=reactions_]
{ position: absolute;
bottom: 0;
right: -40px;
display: inline; }
if you can make something usable out of it I'll much appreciate it :D
very prototype stuff there, I'll also try to make it better but can't right now
tender hedge
made them scrollable with this line
[class*=reactions] {
overflow-y: scroll;
height: 100px;
}```theres ugly scroll bars tho
clear siren
yeah I can fix that
it still doesn't fit the height of the message like I'd want
but it's progress
tender hedge
probably because im not using the theme ur using so i cant really do much about that
clear siren
have to make [id^=message-accessories-] 100% height to fit the message height
if I try to make reactions or reactionsInner 100% or auto they just disappear unless there is another element (an embed) in message-accessories
can't make sense of why that is
wait I'm an idiot
I can do this
tender hedge
?
clear siren
hold up working on it :D
clear siren
yeah I can imagine
clear siren
ok this is proving incredibly difficult, I might have to look into container and/or contain properties to make it work
now I remember why I kinda shelved this thing
@tender hedge if you want to try it out with my theme it's here https://github.com/nvhhr/discordcss (my local copy isn't exactly the same but for this purpose it won't matter)
I hate that message-accessories holds both reactions and embeds and it's the descendant of .contents of a message so I have to deal with that first to get the correct height on that element
here's a slightly cleaner and better structured css for the reactions (still very prototype and terrible, with stuff that does nothing but hey better scrollbars)
[id^=message-accessories-]:not(:has( > article))
{ padding: 0 !important;
position: sticky;
bottom:0;
top:auto;
max-height: 100%;
min-height: fit-content;
display: flex;
align-items: end; }
[id^=message-accessories-]:has( > article)
{ padding: 0 !important;
top:auto;
max-height: fit-content;
min-height:fit-content;
width: 100%;
display: flex;
align-items: end; }
[class^=reactions_]
{ display: flex;
flex-direction: column;
align-items: end;
position: absolute;
bottom: 0;
top: auto;
right: -40px;
left:auto;
overflow: hidden auto;
scrollbar-color: oklch(1 0 0 /.3) transparent !important;
scrollbar-width: thin !important; }
[class^=reaction_]
{ border: none !important;
margin: 0 0 0 2ch !important;
background: none; }
[class^=reactionInner_]
{ padding: 0; }
[class^=reactionCount_]
{ min-width: 3ch !important;
text-align: end !important; }
:has(article) is for embeds
pure cairn
a small tweak to youtube embeds
If I wanted to have the "YouTube" text displayed in 2 different colors, would I have to hide the original one and set 2 new separate texts with different stylings?
clear siren
that would be the best way to do it really, set original to visibility:collapse and do a before and after pseudoelement with visibility:visible
clear siren
iirc pseudoelements won't show on an element that is hidden but you can try
I might be wrong
green plaza
Vencord is heavier than vanila dc?
clear siren
shouldn't be much heavier if you're not using a theme, only marginally depending on plugins you use
pure cairn
Nice
tender hedge
cant seem to figure out how to get the height to fit properly
clear siren
same but maybe I'll figure it out when I can dedicate some focus to it
not sure if I need to be sober or more drunk to pull it off
tender hedge
did manage to get the scrollbar to be invisible
clear siren
does my scrollbar work though
tender hedge
/* Reactions */
[id^=message-accessories-]:not(:has( > article))
{ padding: 0 !important;
position: sticky;
bottom:0;
top:auto;
max-height: 100%;
min-height: fit-content;
display: flex;
align-items: end; }
[id^=message-accessories-]:has( > article)
{ padding: 0 !important;
top:auto;
max-height: fit-content;
min-height: fit-content;
width: 100%;
display: flex;
align-items: end; }
[class^=reactions_]
{ display: inline;
flex-direction: column;
align-items: end;
position: absolute;
bottom: 0;
top: auto;
right: -40px;
left: auto;
overflow: hidden auto;
overflow-y: scroll;
}
[class^=reaction_]
{ border: none !important;
margin: 0 0 0 2ch !important;
background: none; }
[class^=reactionInner_]
{ padding: 0; }
[class^=reactionCount_]
{ min-width: 3ch !important;
text-align: end !important; }
[class^=reactions_]::-webkit-scrollbar {
background: transparent;
}```no
clear siren
oh still not on stable huh
yeah newer chromium/electron dropped ::webkit-scrollbar for standard scrollbar properties
tender hedge
only thing that has to be done is get height correctly
tender hedge
yeah newer chromium/electron dropped ::webkit-scrollbar for standard scrollbar p...
huh seems to work for me though
clear siren
only thing that has to be done is get height correctly
yeah not gonna be easy with message-accessories also having embeds in it and message-accessories being the direct descendant of message content we need the height from..
tender hedge
yeah
clear siren
huh seems to work for me though
yeah you're on discord stable, I'm on vesktop
tender hedge
ah thats why
clear siren
vesktop and ptb/canary all have different scrollbars versus stable
worldly moss
yeah newer chromium/electron dropped ::webkit-scrollbar for standard scrollbar p...
no way right?
clear siren
yep
kinda good but also bad because standard scrollbar properties are very limited in comparison
I like what firefox does with scrollbars, they consist of elements that are easily targetable and stylable
pure cairn
not sure if I need to be sober or more drunk to pull it off
Drunk ofc
The best code comes out when you least expect it
Source: trust me
this might sound like a very stupid question but
can I set an after pseudoelement to a before pseudoelement?
clear siren
no you can't chain pseudoelements
pure cairn
hm
but I can have multiple pseudo elements on the same element, right?
2 ::before, for instance
clear siren
well there's one thing you could do but this gets kinda involved.. :D
clear siren
make svg that has the logo and text (with that you can also do 2 colors in text in one element) and put that svg in the content
pure cairn
actually, I could use ::first-word and set a ::before
pure cairn
make svg that has the logo and text (with that you can also do 2 colors in text ...
huh
I didn't quite understood that one
pure cairn
[href*="youtu.be"]:not([class*="embedAuthor"]),
[href*="youtube.com"]:not([class*="embedAuthor"])
{ color: #c4302b; }
[class^="embedProvider_"] [class*="embedLink_"][href*="youtu.be"],
[class^="embedProvider_"] [class*="embedLink_"][href*="youtube.com"]
{ margin-left: 20px; }
[class^="embedProvider_"] [class*="embedLink_"][href*="youtu.be"]::before,
[class^="embedProvider_"] [class*="embedLink_"][href*="youtube.com"]::before
{ content: url('data:image/svg+xml,<svg width="15px" height="15px" viewBox="0 -3 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Dribbble-Light-Preview" transform="translate(-300.000000, -7442.000000)" fill="%23c4302b"><g id="icons" transform="translate(56.000000, 160.000000)"><path d="M251.988432,7291.58588 L251.988432,7285.97425 C253.980638,7286.91168 255.523602,7287.8172 257.348463,7288.79353 C255.843351,7289.62824 253.980638,7290.56468 251.988432,7291.58588 M263.090998,7283.18289 C262.747343,7282.73013 262.161634,7282.37809 261.538073,7282.26141 C259.705243,7281.91336 248.270974,7281.91237 246.439141,7282.26141 C245.939097,7282.35515 245.493839,7282.58153 245.111335,7282.93357 C243.49964,7284.42947 244.004664,7292.45151 244.393145,7293.75096 C244.556505,7294.31342 244.767679,7294.71931 245.033639,7294.98558 C245.376298,7295.33761 245.845463,7295.57995 246.384355,7295.68865 C247.893451,7296.0008 255.668037,7296.17532 261.506198,7295.73552 C262.044094,7295.64178 262.520231,7295.39147 262.895762,7295.02447 C264.385932,7293.53455 264.28433,7285.06174 263.090998,7283.18289" id="youtube-[%23c4302b]"></path></g></g></g></svg>');
margin-left: -20px;
top: 10.5px;
position: absolute; }```I still haven't worked on the different font colors yet
brittle juniper
insane
clear siren
I have no idea why but the elements are placed in a strange way
pure cairn
I got this far but not happy with the implementation
looks good already
clear siren
also not using the svg but just the favicon.ico
[class^="embedProvider_"] [class*="embedLink_"][href*="youtu.be"],
[class^="embedProvider_"] [class*="embedLink_"][href*="youtube.com"]
{ margin-left: 20px;
visibility:collapse; font-size: 0;}
[class^="embedProvider_"] [class*="embedLink_"][href*="youtu.be"]::before,
[class^="embedProvider_"] [class*="embedLink_"][href*="youtube.com"]::before
{ content: "You";
visibility: visible;
font-size: 1rem;
border-image: url("https://www.youtube.com/s/desktop/e6aba0d0/img/favicon.ico");
border-image-slice: 0% 100%;
border-left: 15px;
border-top: 0;
border-bottom: 0;
border-right: 0;
border-style: solid;
margin-left: -20px;
top: 10.5px;
position: absolute; }
[class^="embedProvider_"] [class*="embedLink_"][href*="youtu.be"]::after,
[class^="embedProvider_"] [class*="embedLink_"][href*="youtube.com"]::after
{ content: "Tube";
visibility: visible;
margin: 0; font-size: 1rem;
top: 10.5px;
position: absolute;
margin-left: 20px;
color: red; }
yeah I noticed
clear siren
for some reason with visibility:hidden or collapse there is still a space left behind, font-size 0 fixes that sort of but then the pseudoelements overlap for whatever reason
no idea why that happens
but yeah the svg should work fine in place of the .ico
yeah
pure cairn
```CSS
[class^="embedProvider_"] [class*="embedLink_"][href*="youtu.be"],
[clas...
I changed around some things here and there to fix a little issue
now it works perfectly
I used [class^="embedLink_"] instead of [class*="embedLink_"] so that it would only select the 1st element and prevent the "You" from turning red
looks good
thank you for the help
clear siren
np :3
pure cairn
I also restored the old .75rem font size for the embed provider
and I think it looks slightly better
what do you think?
clear siren
very nice
pure cairn
I might make a small theme out of this
warm bough
now this is pretty cool
pure cairn
with other links/embeds as well
warm bough
what other ones could you do? maybe twitter/fxtwitter
pure cairn
twitch maybe
warm bough
oh yeah
warm bough
pure cairn
probably Steam
definitely not Spotify XD
idk, I'll think about it tomorrow
I'm still trying to figure out why the DMs panel banners are off
which is killing me
pure cairn
yeah
warm bough
as usual try disabling those
pure cairn
I'm working on the theme, I can't disable it
I know it's a theme issue, just not where the issue is
pure cairn
:root .userPanelOuter_df01a5 .bannerSVGWrapper__8a38c {
overflow: visible;
min-height: 180px !important;
contain: unset;
max-width: 340px;
}
:root .userPanelOuter_df01a5 .bannerSVGWrapper__8a38c .banner__6d414 {
position: absolute;
height: 200px;
-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.7607843137), rgba(0, 0, 0, 0.7607843137));
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25px), 50% 100%, 0 calc(100% - 25px));
}
:root .userPanelOuter_df01a5 .bannerSVGWrapper__8a38c[viewBox="0 0 340 60"] > foreignObject {
transform: translateY(-60px);
}
:root .userPanelOuter_df01a5 .bannerSVGWrapper__8a38c[viewBox="0 0 340 120"] > foreignObject {
transform: translateY(-30px);
}
:root .userPanelOuter_df01a5 .bannerSVGWrapper__8a38c[viewBox="0 0 340 90"] > foreignObject {
transform: translateY(-45px);
}
:root .userPanelOuter_df01a5 .bannerSVGWrapper__8a38c > foreignObject {
mask: none;
}```for some reason the mask is slightly shifted towards the right
and also the bottom
pure cairn
it wasn't like this a few weeks ago
warm bough
was it not?
pure cairn
oddly enough, no
warm bough
I noticed that user profiles in dms have their banners shifted
but I don't usually use that feature so
either way it is like that now
pure cairn
wait, so is it the same even with the stock theme?
warm bough
it is
pure cairn
that's so dumb
clear siren
the image is wider than the sidebar and is clipped
warm bough
I don't know how stuff like this gets past QA
pure cairn
do they even have a QA?
warm bough
fair point
pure cairn
clear siren
if you just set width: 340px; on the banner your polygon is centered as well as the image
warm bough
your nitro money went to super reactions but not fixing the banners on user profiles in dms, how do you feel
pure cairn
if you just set width: 340px; on the banner your polygon is centered as well as ...
on .bannerSVGWrapper__8a38c or .banner__6d414 ?
pure cairn
your nitro money went to super reactions but not fixing the banners on user prof...
never spent a single dime on discord
I feel great
clear siren
I set it on .banner__6d414 and works fine
image gets centered as well as the polygon
warm bough
never spent a single dime on discord
unfortunately I did lol
pure cairn
image gets centered as well as the polygon
ok, it did
warm bough
tbf I had nothing better to spend google play credit on
pure cairn
now it's too low
warm bough
and I got gifted months of nitro from other people before
warm bough
what.
pure cairn
it's too low
it should cover the top part as well and not reach the "about me" section
warm bough
pain
pure cairn
but top: 0; didn't work
warm bough
can you not move it further up?
pure cairn
that's what I tried using top: 0; for
warm bough
even further than 0
warm bough
ggs
pure cairn
indirectly learning how clip-paths work
warm bough
how do they work?
pure cairn
You use sets of coordinates to draw a shape, and everything that's outside said shape won't be displayed
As if you're cutting with a cookie stamp
warm bough
very interesting
clear siren
you can also do a mask-image, with svg to draw polygons or a linear-gradient for a fadeout or whatever
it's nice
clear siren
same tbh
teal cave
it works, although I do have an issue with the fact that bg colors also change t...
Thanks for testing
Having a separate var for text colour probably makes the most sense, I got too enthusiastic about using the new color additions, thanks for picking up on that.
Was going to argue against hard coding for language support reasons, but just found that the aria-label also only is english lol
clear siren
yeah vencord elements won't have localizations anyway
pure cairn
Bummer
pure cairn
probably Steam
Reddit as well
teal cave
wish sass could output css nested selectors
at this point I don't think I actually use enough sass features to justify that over just vanilla nested css
ig the biggest convenience now is being able to container and media queries in nightmare nested format with sass
clear siren
isn't that just css