#๐ŸŽจ-theme-development

1 messages ยท Page 62 of 1

pure cairn
#

Plus MDN/w3schools to learn selectors and properties

green vine
#

why specify .visual-refresh?

#

which came first, the themedev or the theme?

#

figured you'd know since.. well

#

nesting seems to be your specialty

#

i took my own jab at it

/* Button hub on the chatbar */
.buttons__74017{
    > div:has( > button), /* Vencord buttons */
    > div:has( > .button__74017), /* Most discord buttons */
    > .button__74017, /* Special treatment 3:< for the gift button */
    > .channelAppLauncher_e6e74f /* Special treatment 3:< for the game launcher button */ {
        transform: scale(1.5); /* Change scale here */
    }
}
pure cairn
#

God set background-color: white; and said "let there be light"

green vine
#

very wise

#

also- does anybody know how to do.. none of this? i just want a shadow that also affects the inside but have to emulate it apparently

pure cairn
green vine
#

i dont believe so, there's only 2 of them and they're direct

#

yea i asked chatgpt and it says its fine

pure cairn
#

I asked my potato pc and it bluescreened

pure cairn
green vine
#

uhhh

#

i feel like the duplicated shadows are weird

#

and how- i cant make box shadows affect the inside

pure cairn
#

box-shadows are applied externally

green vine
#

ya that's the issue

#

can i do that like- except not only external

#

i want like a little

#

blurry splat in the background

pure cairn
#

add inset to the shadow attributes

green vine
#

ive heard you can use inset box shadow but like- then that makes the stacking problem worse

pure cairn
#

Why are you stacking that many shadows?

green vine
#

bc one isnt cutting it

pure cairn
#

Increase the strength then (?)

green vine
#

oh i didnt know you could do that

#

how

pure cairn
#

Open devtools, go to the box-shadow property and mess around with the quick editor until you get what you like

green vine
#

sis what the hell ๐Ÿ˜ญ

pure cairn
#

Or you can just

#

Use a 2nd one with larger blur and less/more opacity

#

Depending on the opacity you gave to the first one

green vine
#

it's fully black

hoary stone
green vine
pure cairn
#

It'll take up more space and the difference between shadow and no shadow will be less obvious

green vine
#

by increase the strength I thought you implied there's a strength arg

green vine
#

I just want the actual shadow part to be darker

hoary stone
green vine
#

100% black 0% transparent

pure cairn
green vine
pure cairn
#

Can't get my head around it on mobile rn

pure cairn
pure cairn
#

It's the 3rd specified value you set

green vine
#

that's blur

pure cairn
#

Which is the blur radius

hoary stone
pure cairn
#

The smaller the number, the stronger the shadow

#

But it also makes the shadow smaller

#

Because it's less spread out

green vine
pure cairn
#

You just said you wanted a darker shadow wdym

green vine
#

this is like going to a resteraunt, asking for fries, and you handing me a box of pickles

hoary stone
#

Iโ€™m going to say that you ordered something that sounds like pickles here

green vine
pure cairn
#

Well that's totally different from what you asked in the last few minutes

green vine
#

reply to the message

pure cairn
pure cairn
pure cairn
green vine
pure cairn
#

I didn't ignore it, I simply didn't know what you wanted to do

#

To be honest

green vine
#

i asked for fries and a drink, you handed me a box of pickles and when I said that's not what I wanted you pointed at the transcript of me saying I wanted a drink

pure cairn
#

We did talk about stacking shadows, but I didn't get you wanted to reduce them

#

My bad

#

Short answer then is "I don't think you can"

green vine
#

oh

#

alright thank you

green vine
#

like text shadow except in the background of transparent elements

#

kind of like such

#

that's not very in the background but I mean like- including the background

pure cairn
green vine
#

you don't need & for those

pure cairn
#

I am aware

#

I use them anyway because I'm used to

green vine
#

I didn't use expression picker chat input button because it's exclusive to the expression picker buttons

pure cairn
#

nope

#

it's also for the vencord plugins buttons

green vine
#

guess 2 wrongs does make a right

green vine
pure cairn
#

does it work? yes

#

good enough for me

green vine
#

fair enough

green vine
pure cairn
#

aria-labels are

#

since they change with languages

#

aria states are a bit more resilient

#

and it's the only thing affected by that selector anyway so

#

it's also specific enough to work

green vine
#

yea other than that it works

pure cairn
#

and to be fair

#

you could also just

#
.buttons__74017 {
  & > div { /*lmao*/
    transform: scale(1.5); /*edit size*/
  }
}```
green vine
#

๐Ÿ˜ญ

#

you're a criminal

#

hope you know

pure cairn
#

mhm

green vine
#

not enough

pure cairn
#

I can't with such simple snippets smh

green vine
#

you can if you try hard enough

#

bring in the types of parent elements

pure cairn
#
/* VC tweaks */
.list_c3cd7d { 
  /* fix ugly spacing */
  padding: 0 10px 10px;

  & > .draggable__55bab > .voiceUser__07f91 {
    &:hover {
      /* only show "options" button on hover */
      .content__07f91 > .icons__07f91 {
        display: none;
      }
    }

    & > .content__07f91 {
      padding: 4px 8px;

      /* hide clan tag */
      & > .container__394db > .chipletParent__394db {
        display: none;
      }

      /* set "LIVE" as first */
      & > .icons__07f91 > .iconGroup__07f91 > .live_a7acae {
        order: -1;
      }
    }
  }
}```
#

have some

green vine
#

at the very least wrap it .visual-refresh

green vine
#

.visual-refresh {
div {
.buttons__74017 {
  & > div { /*lmao*/
    transform: scale(1.5); /*edit size*/
  }}}} /*lmao*/
pure cairn
#

like genuinely lol

green vine
pure cairn
#

adding a backdrop blur to a transparent element?

green vine
#

it's the behaviour of box shadow but it starts inside of the element

#

and doesn't clip the middle

pure cairn
#

maybe

#

what's one of the elements you want to add that to?

green vine
#

let's say

#

for example the typing indicator

#

nevermind I won't make you struggle with thay

pure cairn
#

thanks

#

I still have to figure out how to tweak this horrible thing

green vine
#

let's do the actual header element in the emoji menu from categories

pure cairn
#

not the point, I need some ideas on what to do with it

green vine
#

that's what I was doing when I asked

pure cairn
pure cairn
#

I just noticed something in that menu

green vine
#

what?

pure cairn
green vine
#

oh yeah I thought I messed that up :3

green vine
pure cairn
#

I don't have a theme for the emoji panel

green vine
#

that's what I'm trying to fix with that actually

green vine
pure cairn
#

a personally tweaked version of nvhhr's actuallybasicbackground

green vine
pure cairn
#

which doesn't affect the emoji panel

#

so yeah

green vine
pure cairn
green vine
#

let me see

pure cairn
#

yeah you set its background to transparent

green vine
#

no

green vine
#

I did but that's not the part I'm trying to change

#

see header__14245

pure cairn
#

the text component, okay

green vine
#

nope

#

that's a child element

#

the header itself

#

including the server icon/ emoji

pure cairn
#

and you want to do

green vine
#

a box shadow on it that also affects the inside

#

and makes it look not ugly

#

set your wrapper to transparent and make it look okay

pure cairn
green vine
green vine
#

use shadows

pure cairn
#

I did

#
.wrapper__14245 {
  background-color: transparent;

  > .header__14245 {
    box-shadow: inset 0 0 20px 0 black;
  }
}```
green vine
#

oh also set overflow to visible

#

both elements

pure cairn
#

I did, nothing changed

green vine
#

oh yea cus your shadow is inset

pure cairn
#

yeah

green vine
#

the goal was to also have outset shadows

#

to make it look like the example I sketched up

pure cairn
#
.wrapper__14245 {
  background-color: transparent;
  overflow: visible;

  & > .header__14245 {
    border-radius: 8px;
    overflow: visible;
    background-color: white;
    border: solid 2px var(--background-mod-subtle);
    box-shadow: 
      inset 0 0 20px 0 black, 
      0 0 10px 0 white;
  }
}```
green vine
#

and that's effectively my solution lmao

#

with overflow visible you can set border radius to an absurd amount

#

meaning less mismatching color

#

less noticible

pure cairn
#

so, what now?

green vine
#

nothing I was kinda curious if you could come up with something better

pure cairn
#

maybe

#

hm, this doesn't look too bad

#

add border: solid 2px var(--background-mod-subtle); to the header

green vine
#

hmm

#

the border in my example was to show the bounds of the element, I was moreso hoping to give it a faint background that fades out into nothing

#

basically strictly for accessibility

green vine
#

that indeed doesn't look awful

pure cairn
#

or, even better

#
.wrapper__14245 {
  background-color: transparent;
  overflow: visible;

  & > .header__14245 {
    border-radius: 8px;
    overflow: visible;
    background-color: white;
    border: solid 2px var(--background-mod-subtle);
    box-shadow: 
      inset 0 0 20px 0 black, 
      0 0 10px 0 white;

    & > .headerLabel__14245 {
      text-shadow: 0 0 5px black;
    }
  }
}```
green vine
#

kind of seems like it'd be distracting a little tho

pure cairn
#

depends, it's more of a neon-ish design for sure

green vine
#

mhm

#

I like it

#

would be cool if you could make a custom like- led like stripe with borders

pure cairn
green vine
#

you could make a pseudo element and have a dotted border

pure cairn
#

erm

green vine
#

it wouldn't be hard

pure cairn
#

did you know that you can already do dotted borders?

green vine
#

? what yes

#

I just said that lol

pure cairn
#

then why have it on a pseudo

green vine
#

to overlay it over the uhh

#

solid border

#

then you can set the opacity down or apply a blur filter to make it seem like there's individual LEDs on the strip

#

that sounds cool I wanna do that now

pure cairn
green vine
#

not exactly fries tho

atomic plank
#

Anybody know the new container for the chat box?:

/* Aligned Chat Box and Typing indicator */
.container_c48ade {
  --custom-chat-input-margin-bottom: 22px;
}```
no longer appears to work
green vine
#

Glowy permission buttons for anyone who wants it, i would post in css snippets but i dont have the role(made a submission 2 days ago)

/* Permission buttons */
/* Base button*/
.item__344e6 {
    background-color: var(--overlay-background);
    /* Selected variant*/
    &.selected__344e6 {
        &.deny__344e6 
        {box-shadow: var(--status-danger) 0 0 10px;}
        &.passthrough__344e6 {
            background-color: var(--darker-overlay-background);
            border: solid rgba(255, 255, 255, 0.1) 1px;
            box-shadow: rgba(255, 255, 255, 0.3) 0 0 10px;
        }
        &.allow__344e6 
        {box-shadow: var(--status-positive) 0 0 10px;}
    }
}
green vine
atomic plank
atomic plank
green vine
#

what's the full snippet?

atomic plank
#

I just have this empty space in my chat box and it's annoying

/* Aligned Chat Box and Typing indicator */
.container_c48ade {
  --custom-chat-input-margin-bottom: 22px;
}
:root {
  --custom-channel-textarea-text-area-height: 42px;
}
.visual-refresh .base_b88801 {
  font-size: 13.5px;
  height: 22px;
  display: flex !important;
  align-items: center !important;
}```
atomic plank
#

I honestly forget

#

I'm just annoyed by the empty space at the bottom

green vine
#

you could remove the entire snippet if it doesnt matter to you what it does

atomic plank
#

Ah hmm all the snippet does is move the buttons and text up within the text box...

green vine
#

?

#

uh

#

so-

#

is that not what you wanted?

atomic plank
#

this is what it looks like without it

green vine
#

mhm

atomic plank
#

Probably remnents from when I was using this quickCSS on my 5:4 monitor...

green vine
#

like- does that look closer to what you wanted?

#

is this what you want?

atomic plank
#

I think it's probably just fine without the snippet and my brain didn't realize it was broken looking when it isn't squished on a 5:4 aspect ratio monitor

green vine
#

lol okay

atomic plank
#

Though the other broken CSS I have is the activity showing up again:

/*Remove Activity from server list*/
[class*='membersGroup']:has([role=button]),
[class*='member'] [class*='container']:has([class*='badges']) {
  display: none;
}```
green vine
#

this is awful for performance

atomic plank
#

It's not too bad from my experience, but it's supposed to get rid of the activity showing up

it used to work but now it only hides the members and not the activity itself

green vine
#

i dont have that

#

cant you just disable it through discord settings?

atomic plank
#

It's only in small servers

green vine
#

ahh

#

hold on

atomic plank
green vine
#

i cant seem to get it

#

hold on let me check my options

atomic plank
#

It's this if that helps

green vine
#

see if this fixes it

green vine
atomic plank
#

That hides all the roles on the member list

green vine
#

okay can you expand that and take another screenshot?

atomic plank
#

I'm a little slow cause I'm on a duel core from 2014...

green vine
#

i actually have a server older than me running a couple minecraft servers

#

i recommend

#

okay i see

green vine
# atomic plank
h3.container__13cf1:has( > .headerContainer__095fe) {display: none;}
#

nope

#

there you go

#

my bad

atomic plank
#

that appears to do nothing

green vine
#

hmm

green vine
atomic plank
#

Yup

green vine
#

i forgot a single character

#

hmm

#

would you be willing to get into a call

atomic plank
#

Sure

green vine
#

stream?

atomic plank
#

I don't have permission in this channel

green vine
#

oh

#

lets dm call

green vine
#

just found it

#

that looks pretty good i think

#

will probably not use it though

.header__14245 {
    position: relative;
    &::before {
        content: "";
        position: absolute;
        inset: -100%;
        z-index: -1;
        background: radial-gradient(ellipse closest-side at center, rgba(0, 0, 0, 0.7), transparent 50%);
    }
}
#

it acts weird

green vine
vagrant path
#

sorry the i cant screeenshot rn but is anyone able to help me with changing the text color that is shown when you hover over a server? (also with over texts like Show All or any pop up text)

vagrant path
#

I think

green vine
#
/* Apply tooltip color param */
.tooltip__382e7, .tooltipContent__4e35b > .defaultColor__4bd52, .guildNameText_b1f768 {
    color: yellow !important;
}
#

actually give me a second

#

that should cut it

#

@vagrant path

vagrant path
#

hi

#

im just tryna apply it rn

green vine
#

it changes all tooltip text tho

vagrant path
#

there we go

green vine
#

do you want it to only affect the server bar?

vagrant path
#

uhh

#

i did want it to change everything but i think it only changes the server bar actually

#

cus when you hover over the discord icon

#

it didnt change

green vine
vagrant path
#

hmmm

#

maybe something else is overwriting it

green vine
#

doubt it

#

did you copy the updated one?

vagrant path
#

ya

green vine
#

the earlier one didnt affect actual servers, only server folders and user profile tooltip texts

#

the thing i sent should affect like- everything

vagrant path
#

yea im confused rn lol

#

inbox seemed to work but the question mark one didnt

green vine
#

the what

#

oh help

#

hold on

#

now im confused because no matter which one you copied that one should be affected

#

try setting it as important

vagrant path
#

nah it didnt work

vagrant path
#

i also re copied everything

#

๐Ÿ˜ญ

green vine
#

that's wierd..

#

you said you cant screenshot, could you screenshare?

#

it is that also not possible

vagrant path
#

no i could screenshot it was just when i did it stopped hovering over the server so i couldnt show you

green vine
#

oh

vagrant path
#

what do you need me to screenshot?

green vine
#

i would guide you through to access the tooltip

#

you need to enable the f8break plugin

#

then when you enable devtools it would let you press f8 on discord and stop js

#

then you could find the tooltip inside of the layer container

#

find the text element and see what's overriding the color

green vine
vagrant path
#

alr so i have dev tools on and i installed the plugin but f8 aint doing anything

green vine
vagrant path
#

yea i think so

#

is being on linux an issue cus i feel like it could be

green vine
#

click on the top bar and try f8 again

#

i dont believe so, i think ven uses linux

#

@vagrant path did you figure it out?

vagrant path
#

nope

#

am i able to send you the css file?

green vine
#

sure

vagrant path
#

do i dm or just here

green vine
#

i dont believe it matters

vagrant path
green vine
#

i see what's wrong

vagrant path
#

is there two of the same thing???๐Ÿ˜ญ

green vine
#

you put it in :root

#

here

#

also.. that's not the- full issue

vagrant path
#

yeaaa

green vine
#

your theme looks

#

uh

#

like it already has options for that

#

give me a sec

#

also what the hell

#

you do have- 2 configs and 2 theme imports

#

one doesnt even work lmao

vagrant path
#

lmfao

#

i used some theme editor online

green vine
#

did you change anything in the bottom one?

vagrant path
#

yayyy

#

it worked

#

tysm

green vine
#

yea im cool, no problem i know im great uwu

vagrant path
#

๐Ÿ˜‡

#

so tuff

green vine
#

XD

green vine
spring pewter
#

is there a reason to why themes never change the user profile? every theme ive used so far change everything except for the user profile making it look abhorent, is it bc of smth or its just like that

green vine
#

im not sure, i suppose its because there was recently a change to them?

#

im p sure there's some snippets people have done

#

someone has made theirs look like an envelope

spring pewter
half crystal
spring pewter
#

anyway how do i add a panel label to the user profile like the ones on system 24

#

like dis

brazen quartz
spring pewter
#

whyd there be a separate profile modal for bots

brazen quartz
#

ยฏ_(ใƒ„)_/ยฏ

spring pewter
#

fckin claude is so sigma he got an entire modal for himself

brazen quartz
#

bots still retain discrims, so go ask discord

spring pewter
#

whats a discrim now

brazen quartz
#

username#0000
^^^^^^^ discrim

spring pewter
#

soace

#

space*

#

or whar

#

or u mean the numbers

brazen quartz
brazen quartz
spring pewter
vagrant path
#

any1 know what the notification number color is called:)))

echo frost
green vine
#

but its used for a bunch of stuff, i dont recommend changing that on its own

vagrant path
#

ty

green vine
#

if you want to change ping color uh

vagrant path
#

it just looks like theres a few things that are black like the notification, and the NEW text above your text

green vine
#
.numberBadge__2b1f5 {
  background-color: yellow !important;
}
#

see that idk

#

dehydrated peeng indicator

vagrant path
#

๐Ÿ˜ญ ty

green vine
#

no problem

#

being great

#

as always

errant zenith
green vine
#

realistically you can get that look with anything

errant zenith
green vine
#

uhh im working on a pr for not another anime theme, its the theme i have applied rn

green vine
spring pewter
#

is there a way to like add html to discord

#

i wanna add a small panel for ascii art below user profile but idk how to do it without making a div

pure cairn
#

::after or ::before pseudoelements, can't make stuff that's too complicated tho

#

otherwise you'll have to make a plugin if you end up having to add actual elements to the HTML tree

pure cairn
#

check the ::before and ::after sections

spring pewter
#

It adds html to a class?

pure cairn
#

no, it adds a fake children element that depends on the parent

#

if you open someone's profile and see the bubbles in their status element, the small circles are made with pseudo elements

#

and rely on the bigger one which contains the actual status

#

that's the easiest way I can explain it

spring pewter
#

Scary

spring pewter
#

so uh

#

turns out the pop ups and the user profiles in dms are the same class and changing one changes the other, is there a way to like only change one

pure cairn
#

I remember having a selector for that somewhere, hold on

#

which one do you want to change?

#
.content_f75fb0 .outer_c0bea0:not(:is(.custom-user-profile-theme)), /*dms profiles*/
.content_f75fb0 .outer_c0bea0:is(.custom-user-profile-theme) /*regular popouts*/```
spring pewter
spring pewter
#

oh it works yippee

spring pewter
chilly knoll
spring pewter
iron smelt
pure cairn
#

I'll send a working version in a bit

pure cairn
chilly knoll
pure cairn
pure cairn
#

will work with all languages btw, it's not a regular aria-label

plain kelp
#

Obviously, aria-labelledby is not aria-label

pure cairn
pure cairn
spring pewter
pure cairn
#

For ::before and ::after pseudo elements to work properly, you have to specify

  • the content, which is usually just left empty with "" if you only want to add an image/coloured background, otherwise the text goes here
  • a position, which can be absolute or relative
  • left/top/right/bottom values to adjust its position (most useful when the position is absolute)
pure cairn
#

and I guess width and height values too, I don't remember if they get inherited from the parent element

crimson skiff
pure cairn
spring pewter
#

So i can only add text in the content

pure cairn
#

Correct

spring pewter
#

Ok

#

Ill try

crimson skiff
#
MDN Web Docs

The content CSS property replaces content with a generated value. It can be used to define what is rendered inside an element or pseudo-element. For elements, the content property specifies whether the element renders normally (normal or none) or is replaced with an image (and associated "alt" text). For pseudo-elements and margin boxes, content...

#
/* Keywords that cannot be combined with other values */
content: normal;
content: none;

/* <content-replacement>: <image> values */
content: url("http://www.example.com/test.png");
content: linear-gradient(#e66465, #9198e5);
content: image-set("image1x.png" 1x, "image2x.png" 2x);

/* speech output: alternative text after a "/"  */
content: url("../img/test.png") / "This is the alt text";

/* <string> value */
content: "unparsed text";

/* <counter> values, optionally with <list-style-type> */
content: counter(chapter_counter);
content: counter(chapter_counter, upper-roman);
content: counters(section_counter, ".");
content: counters(section_counter, ".", decimal-leading-zero);

/* attr() value linked to the HTML attribute value */
content: attr(href);

/* <quote> values */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/* <content-list>: a list of content values. 
Several values can be used simultaneously */
content: "prefix" url("http://www.example.com/test.png");
content: "prefix" url("/img/test.png") "suffix" / "Alt text";
content: open-quote counter(chapter_counter);
spring pewter
#

Dont scare me

crimson skiff
spring pewter
crimson skiff
spring pewter
#

Anyway like idk to just put an image

crimson skiff
#
content: url("path/to/image")
pure cairn
#

For an image you can use both content and background

spring pewter
crimson skiff
spring pewter
#

how do i add a border to the pseudoelement

#

it simply doesnt work

#

for some reason adding css to the pseudoelement changes the view full profile

green vine
#

have you tried

#

border: solid 1px white;

spring pewter
green vine
#

thats weird

#

can you show your

#

checks notes

#

can you show your css

spring pewter
#

nvm got it working

pure cairn
#

Your height is set to 0

spring pewter
green vine
#

instead of height settings and stuff

#

works great

#
    position: relative;
    &::before {
        content: "";
        position: absolute;
        inset: 0;
    }
spring pewter
#

Scary

spring pewter
#

how do i apply the gradients of a profile to smth

#

--profile-gradient-primary-color and --profile-gradient-secondary-color works but its not the exact same colors

onyx mesa
#

hmmmmmmmmmm

onyx mesa
#

why can't i fix it

#

no matter what i do it keeps pushing up whenever one of the bars on top are present

crimson skiff
onyx mesa
#

a fixed position works but it completely launches the indicator at the top corner

onyx mesa
#

actually... i am pretty sure using :has is the only way to fix it

#

i'll just use :has for now, maybe someone else will find an actual solution for it cuz i give up

crimson skiff
#

i was wondering whether you can use a flex box with flex set to column reverse on the parent element

spring pewter
#

@crimson skiff im gonna create a css snippet which makes the new ui even worser

crimson skiff
#

have fun

spring pewter
#

Thanks

crimson skiff
#

np

onyx mesa
green vine
#

what are you trying to do

spring pewter
#

bc otherwise it looks stinky

green vine
#

sorry

#

uh

#

you should send me the css snippet

spring pewter
spring pewter
green vine
#

ytahh

#

also- why add a little thingy?

#

whats the goal

spring pewter
#

what thingy

green vine
#

is it something ike a notes box for every user profile?

#

or do you want to give it to a specific persson

green vine
spring pewter
#

not related to the profile itself

green vine
#

.. hmm

#

okay so you just wanted ascii art there for decoration

spring pewter
#

ya

green vine
#

peculiar

#

okay

#

@spring pewter

#

i did something like this

#
.inner_c0bea0 {
    &::after {
        content: "Cat ascii goes here";
        inset: 0;
        height: 100px;
        color: white;
        margin: 10px;
        margin-top: 0px;
        background: gray;
        border-radius: 30px;
        text-align: center;
    }
}
#

and to make background colors okay you just uh

#

actually let me test that

#

gray seems to work okay in most places

spring pewter
spring pewter
#

vro i dont just want a fitting color i want the gradient from the profile carry over to the box

green vine
#

hm..

#

okay

green vine
#

unless you want to- figure out what the gradient would look like if it continued going

green vine
#

the reason i did it like that is bc the gradient goes from one color to another, if you want it to continue you need a magic third color

spring pewter
#

the gradient would just repeat

green vine
#

oh okay

#

easy then

#

upside down or just- as is

spring pewter
#

as is

#

also

#

the gradient seems to be darkened in dms how to do that

green vine
green vine
spring pewter
spring pewter
green vine
#

uhh color-mix(colorspace, color percentage, color)

green vine
#

oh- it uh

#

is

#

:3

spring pewter
#

always been

green vine
#

annoying

green vine
#

i just- coppied the values from the inner profile and put them into the pseudoelement

onyx mesa
#

couldn't you just use the vars for it

green vine
#

il send you the snippet after

green vine
#

vars are localized, the vars nessesary are located inside of the inner profile element

#

so to fix that you just recalculate those on the pseudoelement

green vine
# spring pewter can u show which
.outer_c0bea0::after {
    --profile-gradient-start:  color-mix(in oklab, var(--profile-gradient-overlay-color) 100%, var(--profile-gradient-primary-color));
    --profile-gradient-end:  color-mix(in oklab, var(--profile-gradient-overlay-color) 100%, var(--profile-gradient-secondary-color));

    content: "Cat ascii goes here";
    inset: 0;
    height: 100px;
    color: white;
    margin: 1px;
    margin-top: 5px;
    background: linear-gradient(var(--profile-gradient-start), var(--profile-gradient-start) var(--custom-user-profile-banner-height), var(--profile-gradient-end));
    border-radius: 25px;
    text-align: center;
}
#

uhhh dms are still broken because of the margins and the border radius

#

but in your theme you dont have those so you could just remove them

spring pewter
#

im very confused

green vine
#

hmm

#
  1. have you tried it without your theme
#

ohhh that might be my fault

#

i havent tried it without my theme

spring pewter
green vine
#
  1. have you disabled your ascii
spring pewter
#

i wanna make it fit

green vine
#

im not suggesting you dont use your theme im just testing

#

if it works without you can make it work with

#

still works.. kind of

spring pewter
#

doesnt work for me without theme

#

aaaa ill just keep it transparent atp

green vine
#

nooo it would be so cool

#

it would be so awesome

#

okay can you send me the theme

green vine
#

founded it

#

man this seems awful for performance..

spring pewter
green vine
#

i guess thats my fault

spring pewter
#

WHY R U USING VENCORD ON UR SCHOOL COMPUTER

green vine
spring pewter
green vine
#

also its working literally just fine lmao

green vine
#

even dms

spring pewter
#

someone logs on and end

green vine
#

all on my usb

spring pewter
#

ah

green vine
#
  • my school doesnt have bad per-user security
#

it has bad security in general but thats besides the point uwu

#

they forgot to enable the execution policy for usb drives, thats how im able to do this in the first place

#

uhhh- i read "drive 55% usage" and im like- ah my usb is being slow but no- its the built in drive, lovely

green vine
#

yep

#

unironically

#

back on topic, @spring pewter it worked just fine, are you sure you did it right?

spring pewter
#

i js copied those and pasted em

green vine
#

._.

#

can i see the full snippet?

spring pewter
#

i js put it at the top

spring pewter
green vine
#

you're on your own im sorry-

#

i sent you a snippet and you said it doesnt work, i test it and it works fine, turns out you didnt even use my snippet but spliced your theme to include some elements of mine and told me it doesnt work

spring pewter
spring pewter
#

so i just took the gradients

green vine
spring pewter
green vine
green vine
spring pewter
green vine
spring pewter
green vine
#

๐Ÿ˜ญ

#

man

#

actually i think the bigger issue is that im not sure if you can put line breaks in content

green vine
#

nevmrind

spring pewter
#

how

green vine
#

white-space: pre;

spring pewter
#

what

green vine
#

content: "new\aline";

spring pewter
#

what

green vine
spring pewter
#

so

#

\a makes a new line?

green vine
#

i wish

#

oh nevermind

#

made it worse

echo frost
#

what css are you using? I think newline has always been kinda buggy for me

green vine
#
.user-profile-sidebar::after {
    --profile-gradient-start:  color-mix(in oklab, var(--profile-gradient-overlay-color) 100%, var(--profile-gradient-primary-color));
    --profile-gradient-end:  color-mix(in oklab, var(--profile-gradient-overlay-color) 100%, var(--profile-gradient-secondary-color));

    content:     
"                       (`.-,')\a"
"                    .-'     ; \a"
"                _.-'   , `,-  \a"
"          _ _.-'     .'  /._  \a"
"        .' `  _.-.  /  ,'._;) \a"
"       (       .  )-| (       \a"
"        )`,_ ,'_,'  \\_;)      \a"
"('_  _,'.'  (___,))           \a"
" `-:;.-'                      \a";
    white-space: pre;
    inset: 0;
    padding: 20px;
    color: white;
    background: linear-gradient(var(--profile-gradient-start), var(--profile-gradient-start) var(--custom-user-profile-banner-height), var(--profile-gradient-end));
    text-align: center;
}
echo frost
#

oh

#

so \a does work

green vine
#

you need white-space: pre;

echo frost
#

oh

green vine
echo frost
#

ah lol

green vine
#

you need to do \\\a if you want to do \(newline)

echo frost
#

yeah

green vine
#

the more you know

echo frost
#

that's how backslash normally works

green vine
echo frost
#

idk why newline in css is \a though

spring pewter
green vine
#

i originally tried \n but it just didnt do anything

#

im- temporarily a windows user

echo frost
#

\n isn't just windows though

green vine
#

yeah it works in most enviorments

#

but \r\n is like- more specifically macos and linux i believe other way

#

either this friday or this thursday

echo frost
#

ig

#

\r goes to the beginning of the line
\n goes to the next line

green vine
#

ahh

#

what was i thinking about then

echo frost
#

historically at least

#

I thought \n did both now though

#

\r is carriage return

#

like a typewriter

green vine
#

nevermind i was totally wrong

#

kind of?

#

\n is indeed newline

#

but on windows i believe its \r\n

#

crlf vs lf

#

too confusing it doesnt rly matter

crimson skiff
echo frost
#

yeah

#

I think historically, you had to do both, but now \n just does both

#

oh wait maybe windows uses \r\n

#

just most of the time it's taken care of for you

#

but on the typewriter, \r moves the carriage to the beginning of the line, and \n moves the paper up so you're on a new line

real night
#

are there any existing css snippets to remove the new user leaf entirely?

burnt sky
#
[class="newMemberBadge_f80704"]{display: none;}
echo frost
#

easier to type, and should be more efficient too

green vine
#

even if they add another class to the element its going to break that selector

green vine
green vine
echo frost
chilly knoll
#

i thought maintaining discordrn themes was a pain, desktop isnt any better husk my theme is half broken

trail ice
#

is there any color text plugins?

spring pewter
#

how do i remove the new chat gradient whenever i scroll up

#

this abomination

onyx mesa
spring pewter
green vine
#
/* Chat gradient */
.chatGradientBase__36d07 { display: none; }

/* Temporary probably, fixes discord bottom aligned chat experiment */
.align-chat-input .scrollerSpacer__36d07 {
    height: 30px;
}

/* Make typing dots have text shadow */
.typingDots_b88801 {
    /* For performance and unique name reasons */ --catmeowshadow: 0 0 30px black, 0 0 10px black, 0 0 10px black;
    overflow: visible !important;
    /* The people text*/
    .text_b88801 {
        overflow: visible !important;
        text-shadow: var(--catmeowshadow), var(--catmeowshadow);
    }

    /* the Actual typing dots */
    .dots__5ad89 {
        background: rgba(0, 0, 0, 0.65);
        box-shadow: var(--catmeowshadow);
        border-radius: 100%;
        overflow: visible;
    }
}
#

I would make it more stable but idh access to a PC at this moment

spring pewter
green vine
#

uhh if you scroll up, profile pictures and text gets in the way pretty easily

#

that's just my way of making it look not as ugly

green vine
#

it's a personal thing I guess

spring pewter
#

wtf

#

insane layout

green vine
#

oh wait no that's just it bugging

#

nevermind

warped folio
#

why isn't it working

    display: none;
}
div[class*="lineClamp1__4bd52 text-xs/medium_cf4812"] > p > span {
    display: flexbox !important;
}```
#

I wanna hide the connected for text without hiding the numbers in the span

echo frost
#

is the p the span's parent?

clear siren
#

p:not(span) makes no sense

#

idk about the rest of it but that immediately caught my eye

velvet crow
#

so this experiment seems to have completely stopped working. Anyone got a fix?

echo frost
echo frost
echo frost
warped folio
warped folio
echo frost
#

if you display: none the parent, the children will also be display: none'd

echo frost
velvet crow
velvet crow
# velvet crow

the folders are still misaligned but otherwise it looks fine so far. I wont be sharing my css because I have my entire theme in one file with 4k lines of jankiest css known to man

#

good enoughโ„ข

chilly knoll
royal tusk
#

cotton candy nitro theme if it was even more pretty

pure cairn
#

I may have committed crimes against the Geneva convention of css with this one

green vine
iron smelt
pure cairn
#

yeah, I'm trying to recreate it but it's really duct taped with hopes and dreams

chilly knoll
#

channel list feels less bloated

pure cairn
#

For now that's manually aligned, tomorrow I'll look for ways to have the buttons fit the row by themselves

mild vortex
#

hi im new are there any demon slayer themes by any chance?

green vine
#

they're compatible with vencord

#

if you cant just get a random theme with an image and change the background

#

its unlikely for stuff to be themed to niches, if you want something you usually have to make it yourself

#

best niche theme i know is probably "NieR: Automata - YoRHA-UI-BetterDiscord"

pure cairn
#

I'll send the snippet when I get back home from work

echo frost
empty gyro
pure cairn
# echo frost i do want to see (:
.content__99f8c {

  & > .containerWithMargin__0d0f9 {
    margin: 12px 8px;
  }

  & > li:not([class]) {
    width: 20%;

    & > .wrapper__2ea32 > .basicChannelRowLink__2ea32 > .content__65844 > .name__2ea32 {
      display: none;
    }

    &:nth-of-type(1) {
      position: absolute;
    }

    &:nth-of-type(2) {
      position: absolute;
      left: calc(48.2px*1);
    }

    &:nth-of-type(3) {
      position: absolute;
      left: calc(48.2px*2);
    }

    &:nth-of-type(4) {
      position: absolute;
      left: calc(48.2px*4);
    }
  }

  & > div:not([class], div:nth-of-type(1), div:nth-of-type(2)) {
    width: 20%;

  & > li:not([class]) > .wrapper__2ea32 > .basicChannelRowLink__2ea32 > .content__65844 > .name__2ea32 {
      display: none;
    }

    &:nth-of-type(4) {
      position: absolute;
      left: calc(48.2px*3);
    }
  }

  & > .sectionDivider__629e4 {
    margin-top: 55px;
  }
}```
there you go
#

of course it only works properly when all 5 buttons are present for now

#

but now I want to try a less cursed version

pure cairn
#

okay, I've managed to make it better, still have to manually set the buttons amount tho which sucks

:root {
  --buttons-amount: 5
}
.scroller__629e4 > .content__99f8c {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;

  & > .containerWithMargin__0d0f9 { /* boosts bar */
    margin: 12px 8px;
    width: 100%;
  }

  & > li:not([class]) {
    width: calc(100%/var(--buttons-amount));

    & > .wrapper__2ea32 > .basicChannelRowLink__2ea32 > .content__65844 > .name__2ea32 {
      display: none;
    }
  }

  & > div:not([class], div:nth-of-type(1), div:nth-of-type(2)) {
    width: calc(100%/var(--buttons-amount));

    & > li:not([class]) > .wrapper__2ea32 > .basicChannelRowLink__2ea32 > .content__65844 > .name__2ea32 {
      display: none;
    }
  }

  & > .sectionDivider__629e4 { /* divider */
    width: 100%;
    margin: 20px 15px;
  }

  & > .containerDefault__29444,
  & > .containerDefault_c69b6d,
  & > .container__5b40b { /* fix categories and channels */
    width: 100%;
  }
}```
#

and yes, I did reinvent the channel scroller just for this

half crystal
pure cairn
#

I was thinking of using server IDs for a config file

#

but that would still use :has()

half crystal
#

husk
what the fuck

pure cairn
#

don't think you're the only one committing css warcrimes here

half crystal
half crystal
#

||(DO NOT LOOK AT GORD)||

green vine
#

css needs a new spec

#

hey rabbit disabler

echo frost
echo frost
green vine
pure cairn
#

What do you mean you can't use vars in a selector

green vine
#

that

#

while yes you could argue that's what CSS post processors are for I disagree fully

#

they're inconvenient for redistributing snippets

pure cairn
#

Well I guess it is

green vine
#

you should be put in css jail

echo frost
#

I've never tried it

pure cairn
#

After all you can add custom vars to root

#

Maybe it works for regular selectors

echo frost
green vine
pure cairn
#

Yop

green vine
#

also hey obsidian

echo frost
#

hey computing cat

#

oh you're in hue

pure cairn
#

I would also like to be able to add more than 2 pseudo elements to a single element

green vine
pure cairn
#

Imagine the amount of things you could do

echo frost
#

you don't count though smh

echo frost
#

I think

#

there's other types of pseudo elements

pure cairn
#

Multiple ::before and ::after pseudos?

echo frost
#

I don't think they're as flexible as before and after

echo frost
pure cairn
green vine
echo frost
green vine
#

I want to be able to get the parent of a matched selector without doing :has(>{{SELECTOR}})

green vine
#

thought I'd say hi

#

you write good CSS and you seemed nice

echo frost
#

oh

#

thanks

echo frost
green vine
#

no

#

:3

smoky belfry
#

:has is finer than you think

#

has is like salt and sugar

echo frost
#

huh

green vine
#

has is pretty expensive last I checked

smoky belfry
#

too much and it's bad

echo frost
#

it is

smoky belfry
#

too little and it sucks

echo frost
smoky belfry
#

you need to season stuff

green vine
pure cairn
echo frost
#

1 has is too much

smoky belfry
#

add some sprinkle of joy
instead of doing gross hacks

green vine
#

waiter waiter, too little expensive functions

pure cairn
#

Waiter, more rendering time please!

echo frost
#

I feel like has is way slower in discord than other things

smoky belfry
echo frost
brazen quartz
#

it's only awful on discord, which is awful on its own already

smoky belfry
#

tbh yeah discord is more the issue than has

pure cairn
#

Yep

#

It didn't use to be this way

smoky belfry
#

#when csscord
a version of discord where css doesn't suck

green vine
#

nobody would use that ๐Ÿ™

pure cairn
#

Just *{display:none} it

green vine
green vine
pure cairn
#

I would use it on a daily basis

green vine
#

I do already do that, partially because I need to

#

but also because it's much better for CSS performance

#

as is

smoky belfry
pure cairn
#

But I would have to swap to regular discord when I want to screenshare something

#

So I just
Cba to

green vine
#

don't you want users to use it?

smoky belfry
#

we should just all return to IRC

green vine
#

yes please

brazen quartz
pure cairn
#

I'd be fine with that

#

VenSpeak when?

smoky belfry
pure cairn
smoky belfry
#

having discord use 60% of my weak CPU is not nice

green vine
#

I'm down

pure cairn
#

Could have it integrate ThemeAttributes (with extentions too) by default

#

Which would be nice

#

Simple as adding a status-related class to the body so that one can easily know if the user is in streamer mode

half crystal
green vine
#

that way anyone could create themes for discord

half crystal
pure cairn
#

I feel like it would be too drastic

half crystal
pure cairn
#

Maintenance wise too

green vine
pure cairn
#

Meh, kinda

#

I did rewrite the server channels scroller and somehow made it better while I was working on this latest snippet of mine so

green vine
#

this way it would just open the doors to more people and easier, to not have to contribute to vencord itself to work with it

pure cairn
#

Who would've thought that having it set to flex-direction: row, flex-wrap: wrap and setting the elements' width would be better than before

green vine
#

changing the background of any scroller to transparent makes discord re-render all of the elements inside it every frame

#

when you scroll

#

horrible for perf

pure cairn
#

Most optimised discord element

brazen quartz
green vine
#

it repaints all the elements every frame that you scroll

#

it's worse with smooth scrolling

pure cairn
#

It does the same to the memberlist when you type btw

#

Even if it's not transparent

green vine
#

whatt

#

I didn't know that!

brazen quartz
#

kill smooth scrolling

green vine
#

what the hell

green vine
#

:3

pure cairn
#

What's smooth scrolling?

green vine
#

an animation that tweens your scroller when a new scroll value is- uhh set

#

basically makes scrolling smoother

pure cairn
#

Gross

green vine
#

everything has it

#

I just disable it because I have a mouse with an unlocked mouse wheel

#

scroll like that

pure cairn
#

oh, like the g502's?

green vine
#

precisely

pure cairn
#

is it a good mouse?

#

I was planning on getting it for the tons of buttons on it (which I would regularly use)

green vine
#

it's okay

#

it does mouse things, it's unusual to any other mouse, might take time to get used to a little

#

it comes with weights if you like that

#

and it is a little heavy on its own

pure cairn
green vine
#

yeah I also love the buttons on the face of the mouse

#

I use both for autoclicking

#

speaking of, ghub let's you set up macros for autoclicking using the mouse buttons

#

actually best unintentional feature ever

pure cairn
#

brings me back to my minecraft pvp days

green vine
#

yeah one of my friends set theirs up to specifically under hypixels autoclicking detection speed

#

they're also enjoying it lmao

pure cairn
#

lmao

green vine
#

unfortunately you can't rebind scroll up and scroll down

#

that'd be amazing for autoclicking

pure cairn
#

oh
oh god

#

with the free wheel

green vine
#

with gswap, gswitch idfk you could switch to another profile and just spin the wheel at however fast you wanna click

#

that'd be amazing

#

if you need another mouse I recommend it, it's pretty good

pure cairn
# green vine with gswap, gswitch idfk you could switch to another profile and just spin the w...

why clicking when compressed air cans exist
https://youtu.be/aANF2OOVX40

Interstellar Docking Scene but instead of Matthew Mahogany it's some kid and instead of a space ship it's a gaming mouse

Music is; Hans Zimmer's No Time For Caution

Mouse video; https://youtu.be/dap5lEuS5uM

Give traffic to my other video if you like poorly constructed memes : https://www.youtube.com/watch?v=77fojojHezo

Join this : https://d...

โ–ถ Play video
green vine
#

so true

#

who needs fingers when you have compressed air

pure cairn
#

will probably get it once this one breaks

green vine
pure cairn
#

discord browser is like that

green vine
#

it was supposed to be better on Linux, how hard is it to make it okay on windows?

pure cairn
#

sadly

green vine
#

ahh damn it

pure cairn
#

it's snappier and faster

#

but the downsides are there

#

no keybinds either iirc

green vine
green vine
#

instant Ven relay

green vine
half crystal