**Modal settings window** | libVencore | Page 1

fringe wraith Jan 8, 2024, 10:56 AM

#

and if someone can figure out how to get rid of the animation when opening/closing settings that would be pretty neat as I use backdrop-filter on the settings window and that causes a lot of lag while it's animating

fiery orchid Jan 8, 2024, 11:27 AM

#

@fringe wraith i think i nuked most of the lag

#

/* settings dialog */
[class^=standardSidebarView_]
 {  position: static !important;
   overflow: auto !important;
 opacity: 1 !important;}
.layer__2efaa + .layer__2efaa
 { border-radius: 10px !important;
   box-shadow: 5px 5px 25px black !important;
   width: calc(100% - 100px);
   max-width: 1100px;
   height: 80vh !important;
   margin: auto !important;
   padding: 0 !important;
   opacity: 1 !important;
   transform: unset !important;
 }
.baseLayer__8fda3[aria-hidden="true"]::after {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #00000099;
  content: '';
  z-index: 100;
}
.layer__2efaa[aria-hidden="false"] + .layer__2efaa[aria-hidden="false"] {
  display: none
}
#app-mount .baseLayer__8fda3 /*keep view under settings*/
 { opacity: 1 !important;
   transform: scale(1) !important;
 }
.baseLayer__8fda3[aria-hidden="true"] {
   pointer-events: none;
}
.layers__1c917>.layer__2efaa.animating__27211 {
  will-change: unset !important;
}

fringe wraith Jan 8, 2024, 11:29 AM

#

yeah you did, nice, much appreciated

fiery orchid Jan 8, 2024, 11:29 AM

#

let me clean it up actually

fringe wraith Jan 8, 2024, 11:30 AM

#

btw you should also change the standardSidebarView to be just top:0 instead of the position and overflow thing, it has a bug that makes some other layers such as audit log be cut off

fiery orchid Jan 8, 2024, 11:31 AM

#

okie

#

.standardSidebarView__1129a {
  opacity: 1 !important;
}
.layer__2efaa + .layer__2efaa { border-radius: 10px !important;
   opacity: 1 !important;
   transform: unset !important;
 }
.layer__2efaa[aria-hidden="false"] + .layer__2efaa[aria-hidden="false"] {
  display: none
}
.baseLayer__8fda3[aria-hidden="true"] {
   pointer-events: none;
}
.layers__1c917>.layer__2efaa.animating__27211 {
  will-change: unset !important;
}

fringe wraith Jan 8, 2024, 11:34 AM

#

very nice

#

this is what I ended up with (background removal for the backdrop-filter is elsewhere in my theme)

[class^=standardSidebarView_]
 { backdrop-filter: blur(30px);
   top: 0 !important;
   opacity: 1 !important; }
.layer__2efaa + .layer__2efaa
 { border-radius: 10px !important;
   background: oklch(.2 0 0 /.5) !important;
   box-shadow: 5px 5px 25px oklch(0 0 0 /.7) !important;
   border: 1px solid oklch(1 0 0 /.2);
   width: 1100px !important;
   height: 80vh !important;
   margin: auto !important;
   padding: 0 !important;
   opacity: 1 !important;
   transform: unset !important; }
#app-mount .baseLayer__8fda3 /*keep view under settings*/
 { opacity: 1 !important;
   transform: unset !important; }
.layer__2efaa[aria-hidden="false"] + .layer__2efaa[aria-hidden="false"]
 { display: none; } /*fixes closing delay*/
.layers__1c917>.layer__2efaa.animating__27211
 { will-change: unset !important; }

#

I'm gonna change all selectors to attribute selectors later too because that's how I roll but for now it works perfectly

#

I dunno how but a while ago I had tried setting transforms, transitions and will-change globally and it wouldn't work right but the .layer__2efaa[aria-hidden="false"] + .layer__2efaa[aria-hidden="false"] is something I wouldn't have thought of, thank you for that

stark trench Jan 9, 2024, 12:48 PM

#

I made this before as well, I'll get it out soon and post my results

fiery orchid Jan 9, 2024, 10:50 PM

#

stark trench I made this before as well, I'll get it out soon and post my results

id like to see it :>

stark trench Jan 10, 2024, 12:50 AM

#

I forgor lol

carmine ermine Jan 10, 2024, 10:26 AM

#

fringe wraith this is what I ended up with (background removal for the backdrop-filter is else...

so this is the final version?

fringe wraith Jan 10, 2024, 10:28 AM

#

carmine ermine so this is the final version?

it's the one I use in my theme, doesn't do anything special standalone and won't work right unless you use vesktop

#

the one in the OP is still probably better for you

carmine ermine Jan 10, 2024, 10:29 AM

#

fringe wraith the one in the OP is still probably better for you

that means: the original one?

#

i dont know the term

fringe wraith Jan 10, 2024, 10:29 AM

#

yeah

carmine ermine Jan 10, 2024, 10:29 AM

#

lol

#

o ok, thank you

fringe wraith Jan 10, 2024, 10:30 AM

#

I've just added blur on it and used @fiery orchid's animation removal, and have other stuff in my theme to modify the backgrounds and stuff

carmine ermine Jan 10, 2024, 10:30 AM

#

you made a custome theme?

#

btw i dont want the background to be clear

fringe wraith Jan 10, 2024, 10:31 AM

#

carmine ermine Jan 10, 2024, 10:31 AM

#

carmine ermine you made a custome theme?

how do i change it

carmine ermine Jan 10, 2024, 10:31 AM

#

fringe wraith

o nice

#

this to change the see through thing background?

fringe wraith Jan 10, 2024, 10:34 AM

#

no, that has to be there to make discord not hide everything when settings are open

carmine ermine Jan 10, 2024, 10:34 AM

#

o

#

how do i change its background?

carmine ermine Jan 10, 2024, 10:35 AM

#

fringe wraith

like this

fringe wraith Jan 10, 2024, 10:36 AM

#

to make it seethrough you have to do .sidebarRegionScroller__1fa7e, .contentRegion__0bec1, .contentRegionScroller__86c79 { background: transparent !important; }

carmine ermine Jan 10, 2024, 10:37 AM

#

i add that?

fringe wraith Jan 10, 2024, 10:37 AM

#

yeah

carmine ermine Jan 10, 2024, 10:37 AM

#

to change background color i change the transparent in { background: transparent !important; }?

#

so like light blue i put { background: light blue !important; }?

fringe wraith Jan 10, 2024, 10:39 AM

#

you might rather just want to add background into the .layer__2efaa + .layer__2efaa block like I did, and that background has to have an alpha value like rgb(100 100 255 / .5) for a lightblue with 50% opacity

carmine ermine Jan 10, 2024, 10:40 AM

#

ok, im sry, but do i include that in .sidebarRegionScroller__1fa7e, .contentRegion__0bec1, .contentRegionScroller__86c79 { background: transparent !important; }?

#

if so where?

#

o i see to put that in .sidebarRegionScroller__1fa7e

fringe wraith Jan 10, 2024, 10:42 AM

#

no keep that as is and add background to the .layer__2efaa + .layer__2efaa block

carmine ermine Jan 10, 2024, 10:42 AM

#

ok

#

like this ?

fringe wraith Jan 10, 2024, 10:44 AM

#

I don't know how to rephrase this

carmine ermine Jan 10, 2024, 10:45 AM

#

ok

#

i see

#

so how would it look like?

#

i just want to change the background of the window to light blue

fringe wraith Jan 10, 2024, 10:48 AM

#

ok wait

#

do you mean the window itself or like what's around it

carmine ermine Jan 10, 2024, 10:49 AM

#

the window itself

fringe wraith Jan 10, 2024, 10:50 AM

#

yeah then it is like I said and how I have it here #1193869493492002816 message

carmine ermine Jan 10, 2024, 10:51 AM

#

and this is light blue?

fringe wraith Jan 10, 2024, 10:51 AM

#

no that's dark grey

#

replace the oklch() with an rgb(100 100 255 / .5)

#

play with the values

carmine ermine Jan 10, 2024, 10:52 AM

#

ok thank you https://media.discordapp.net/stickers/1192677490557198366.png?size=160&name=ok

fringe wraith Jan 10, 2024, 10:52 AM

#

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

MDN Web Docs

CSS basics - Learn web development | MDN

CSS (Cascading Style Sheets) is the code that styles web content. CSS basics walks through what you need to get started. We'll answer questions like: How do I make text red? How do I make content display at a certain location in the (webpage) layout? How do I decorate my webpage with background images and colors?

stark trench Jan 19, 2024, 12:11 PM

#

i will not be posting me results here, sorry

half gull Jan 19, 2024, 7:10 PM

#

hi

#

uh

#

half gull Jan 19, 2024, 7:10 PM

#

fringe wraith it's the one I use in my theme, doesn't do anything special standalone and won't...

nvm

#

lol

#

it wont blur unless ive done smth wrong(?)

fringe wraith Jan 19, 2024, 7:15 PM

#

yeah if you want the blur you need some extra styling

half gull Jan 19, 2024, 7:16 PM

#

how would i do that?

fringe wraith Jan 19, 2024, 7:16 PM

#

.sidebarRegionScroller__1fa7e, .contentRegion__0bec1, .contentRegionScroller__86c79 { background: transparent !important; }

#

add that

half gull Jan 19, 2024, 7:17 PM

#

is there any place where lol

#

i added it at the bottom and it did nothin

fringe wraith Jan 19, 2024, 7:17 PM

#

it should make it transparent

half gull Jan 19, 2024, 7:17 PM

#

fringe wraith Jan 19, 2024, 7:18 PM

#

hmm

half gull Jan 19, 2024, 7:19 PM

#

hmmm

fringe wraith Jan 19, 2024, 7:21 PM

#

the theme you use might be doing something

half gull Jan 19, 2024, 7:21 PM

#

lemme see

fringe wraith Jan 19, 2024, 7:21 PM

#

because it should be completely seethrough after adding that line

half gull Jan 19, 2024, 7:21 PM

#

ah okay

#

turned it off n still nothin

fringe wraith Jan 19, 2024, 7:23 PM

#

that's weird

half gull Jan 19, 2024, 7:23 PM

#

[class^=standardSidebarView_]
 { backdrop-filter: blur(30px);
   top: 0 !important;
   opacity: 1 !important; }
.layer__2efaa + .layer__2efaa
 { border-radius: 10px !important;
   background: oklch(.2 0 0 /.5) !important;
   box-shadow: 10px 10px 5px oklch(0 0 0 /.06) !important;
   width: 1100px !important;
   height: 80vh !important;
  border: 3px solid oklch(0 0 0 / 1);
   margin: auto !important;
   padding: 0 !important;
   opacity: 1 !important;
   transform: unset !important; }
#app-mount .baseLayer__8fda3 /*keep view under settings*/
 { opacity: 1 !important;
   transform: unset !important; }
.layer__2efaa[aria-hidden="false"] + .layer__2efaa[aria-hidden="false"]
 { display: none; } /*fixes closing delay*/
.layers__1c917>.layer__2efaa.animating__27211
 { will-change: unset !important; }
 .sidebarRegionScroller__1fa7e, .contentRegion__0bec1, .contentRegionScroller__86c79 { background: transparent !important; }

#

thats what i did

fringe wraith Jan 19, 2024, 7:24 PM

#

ok yeah

half gull Jan 19, 2024, 7:25 PM

#

hmm

fringe wraith Jan 19, 2024, 7:25 PM

#

.standardSidebarView__1129a, .sidebarRegionScroller__1fa7e, .contentRegion__0bec1, .contentRegionScroller__86c79 { background: transparent !important; }

#

change last line to that

#

that makes it transparent

half gull Jan 19, 2024, 7:25 PM

#

it workeddd

#

woop

half gull Jan 19, 2024, 8:10 PM

#

doing some QoL things

rocky dagger Jan 22, 2024, 6:18 PM

#

can i make it resizeable and moveable?
or maybe pop out setting in another window?

fringe wraith Jan 22, 2024, 6:49 PM

#

neither is possible to do in css

half gull Jan 22, 2024, 8:53 PM

#

in js yes

#

i think

#

but css though

shut dock Jan 23, 2024, 2:58 PM

#

@fringe wraith Sorry for the ping. But I've scrolled up and I don't seem to see a solution for this

#

Help would be really appreciated.

#

To add I'm on Vesktop, I don't what the issue is sadly

fringe wraith Jan 23, 2024, 2:58 PM

#

uhh not sure why that happens, you're using some kind of theme which breaks that I guess

shut dock Jan 23, 2024, 2:59 PM

#

fringe wraith uhh not sure why that happens, you're using some kind of theme which breaks that...

Default theme also has this issue...

fringe wraith Jan 23, 2024, 3:00 PM

#

oh

#

assuming you put it in quickcss, can you screenshot that

shut dock Jan 23, 2024, 3:02 PM

#

fringe wraith assuming you put it in quickcss, can you screenshot that

#

I've got some other CSS code in there but none change Settings

fringe wraith Jan 23, 2024, 3:02 PM

#

looks correct

shut dock Jan 23, 2024, 3:03 PM

#

Idk if it's too late, but it worked, then I synced the config on my Canary, then it just turned black

fringe wraith Jan 23, 2024, 3:03 PM

#

that should be fine

shut dock Jan 23, 2024, 3:05 PM

#

fringe wraith that should be fine

Found the issue lol, FastMenu makes it unable to work

fringe wraith Jan 23, 2024, 3:05 PM

#

oh

#

ok :D

shut dock Jan 23, 2024, 3:05 PM

#

Sorry for the hassle haha

fringe wraith Jan 23, 2024, 3:05 PM

#

I was so confused

shut dock Jan 23, 2024, 3:05 PM

#

Have a great day

#

Yeah same here

fringe wraith Jan 23, 2024, 3:05 PM

#

you too :3

shut dock Jan 23, 2024, 3:05 PM

#

<3

fringe wraith Jan 23, 2024, 3:09 PM

#

yeah from a quick glance it looks like it sets the .baseLayer__8fda3 { visibility:hidden }, could probably be overridden

opal trout Jan 23, 2024, 10:19 PM

#

Yo @fringe wraith are you able to make it close if you click off of it?

fringe wraith Jan 23, 2024, 10:20 PM

#

technically possible but not easy

#

the one I took inspiration from did that I think or at least is supposed to, but it was a mess

opal trout Jan 23, 2024, 10:22 PM

#

fringe wraith the one I took inspiration from did that I think or at least is supposed to, but...

DevilBro's version or someone else?

fringe wraith Jan 23, 2024, 10:22 PM

#

yeah :D

opal trout Jan 23, 2024, 10:24 PM

#

fringe wraith yeah :D

I found his code, want it?

#

Might help find out what he did to make it happen.

fringe wraith Jan 23, 2024, 10:24 PM

#

I have it open right now

opal trout Jan 23, 2024, 10:24 PM

#

ok

fringe wraith Jan 23, 2024, 10:30 PM

#

yeah it requires quite a bit of rewriting the code in a messy way

#

and even then I dunno if I can make it work, theirs doesn't work either

#

although judging by the code they certainly tried

fringe wraith Jan 24, 2024, 1:50 PM

#

ok I cooked and got it working

#

.standardSidebarView__1129a,
.contentRegionScroller__86c79,
.contentRegion__0bec1,
.sidebarRegionScroller__1fa7e,
.layer__2efaa ~ .layer__2efaa
 { background: transparent !important; }
 .sidebarRegion__60457,
 .contentColumn_dc7d36
 { height: 75vh !important;
   min-height: unset !important;
   overflow:scroll;
   margin: auto 0;
   background:hsl(0 0% 10% /.9) !important;
   position:relative;
   z-index: 1;
   /*backdrop-filter: blur(10px);*/ }
 .sidebarRegion__60457,
 .sidebarRegionScroller__1fa7e
  { max-width: 200px !important;
    display: block !important; }

.sidebarRegion__60457 { border-radius: 20px 0 0 20px }
.contentColumn_dc7d36 { border-radius: 0 20px 20px 0 }
.standardSidebarView__1129a { margin-left: 20vw; }
.standardSidebarView__1129a ::-webkit-scrollbar { width: 0 !important;}
.closeButton__34341
 { position: fixed;
   width: 100vw;
   height: 100vw;
   top: 0;
   left: 0;
   border-radius: 0;
   border: none !important; }
.closeButton__34341:hover
 { background: repeating-linear-gradient( 45deg, hsl(0 100% 10% /.1), hsl(0 100% 10% /.1) 20px, transparent 20px, transparent 40px); }

#app-mount .baseLayer__8fda3 
 { opacity: 1 !important;
   transform: unset !important; }
.layer__2efaa[aria-hidden="false"] + .layer__2efaa[aria-hidden="false"],
.keybind__57645
 { display: none; } 
.layers__1c917> .layer__2efaa.animating__27211
 { will-change: unset !important; }

#

this is really terrible and very much a prototype but functional and looks kinda ok for now

lofty otter Jan 24, 2024, 2:12 PM

#

really laggy without gpu acceleration

fringe wraith Jan 24, 2024, 2:12 PM

#

yeah the filter:blur does that lol

lofty otter Jan 24, 2024, 2:12 PM

#

also it is NOT centered

fringe wraith Jan 24, 2024, 2:12 PM

#

I know lol

#

I commented out the backdrop-filter

fringe wraith Jan 24, 2024, 2:42 PM

#

this breaks some other dialogs atm btw

lofty otter Jan 24, 2024, 2:48 PM

#

thumbsup

opal trout Jan 24, 2024, 6:08 PM

#

fringe wraith this breaks some other dialogs atm btw

Yo this is nice, but are you able to get rid of that weird bubble?

#

like just make it invisible.

fringe wraith Jan 24, 2024, 6:09 PM

#

you mean this part?

opal trout Jan 24, 2024, 6:09 PM

#

No...

fringe wraith Jan 24, 2024, 6:09 PM

#

or what do you mean

#

ohh I see it

opal trout Jan 24, 2024, 6:10 PM

#

I just thought of something...

#

If you click off of a focused image, it closes..

#

So can't you grab what ever it's doing and use it on the settings modal?

fringe wraith Jan 24, 2024, 6:11 PM

#

the 'bubble' is something in your theme, not sure what it is specifically but something is adding a background to the closebutton

fringe wraith Jan 24, 2024, 6:12 PM

#

opal trout So can't you grab what ever it's doing and use it on the settings modal?

it's doing js, what I'm doing is taking the closebutton from the settings dialog, making it full screensize and under the rest of the settings' content

#

that's the only way to do this in css

opal trout Jan 24, 2024, 6:14 PM

#

I see...

fringe wraith Jan 24, 2024, 6:14 PM

#

what you can do is add .closeButton__34341 { opacity: 0 !important } to hide it entirely

opal trout Jan 24, 2024, 6:16 PM

#

I just noticed that theirs no settings tabs and the modal isn't fully rounded.

fringe wraith Jan 24, 2024, 6:17 PM

#

yeah it did that also for another user in #🎨-theme-development, no idea what's going on

#

I'm sure I'll be able to fix that, currently it's pretty hacky

sweet lichen Jan 25, 2024, 12:35 AM

#

Can you upload this script to a github repo?

proven linden Feb 16, 2024, 5:52 PM

#

fiery orchid ```css /* settings dialog */ [class^=standardSidebarView_] { position: static ...

may i ask if it is possible to make the settings "window" movable and if someone could do that ?

vernal imp Mar 16, 2024, 11:07 PM

#

How can I reduce the padding on the left?

fringe wraith Mar 16, 2024, 11:08 PM

#

.sidebar__9e3e2 {padding-left: 0;}

vernal imp Mar 16, 2024, 11:09 PM

#

tysm

#

is there a way to reduce the whole padding?

#

or do I have to do that for each element?

fringe wraith Mar 16, 2024, 11:11 PM

#

change paddings on.contentColumnDefault_c66386 and maybe reduce the width on the .layer__2efaa + .layer__2efaa block

vernal imp Mar 16, 2024, 11:12 PM

#

bet

#

thx again

#

upthumbs

vernal imp Mar 16, 2024, 11:40 PM

#

fringe wraith change paddings on``.contentColumnDefault_c66386`` and maybe reduce the ``width`...

The block padding changes only the right container, how can I change the user settings top padding too?

fringe wraith Mar 16, 2024, 11:43 PM

#

I think you want .sidebar__9e3e2 { padding-top: 10px; } or something?

vernal imp Mar 16, 2024, 11:43 PM

#

ah yes this is the one

signal dust Mar 28, 2024, 1:30 PM

#

it kinda broke

fringe wraith Mar 28, 2024, 1:42 PM

#

yeah I didn't use attribute selectors on this one like I usually do, you'll need to update the classes

signal dust Mar 28, 2024, 8:10 PM

#

fringe wraith yeah I didn't use attribute selectors on this one like I usually do, you'll need...

used https://syndishanx.github.io/Website/Update_Classes.html seems to work fine for me (my own version you gave me not the one in this snippet)

📎 Output.theme.css

vernal imp Mar 31, 2024, 7:46 PM

#

signal dust used https://syndishanx.github.io/Website/Update_Classes.html seems to work fin...

is it just me or is the blur broken?

signal dust Mar 31, 2024, 7:46 PM

#

Mine works fine.'

#

oh wait

#

the blur is indeed broken

#

I just never noticed

signal dust Mar 31, 2024, 7:48 PM

#

signal dust used https://syndishanx.github.io/Website/Update_Classes.html seems to work fin...

I have no idea why the blur is broken

vernal imp Mar 31, 2024, 7:49 PM

#

signal dust I have no idea why the blur is broken

ight hmu if you find out anytime

fringe wraith Mar 31, 2024, 8:00 PM

#

blur breaks if you have any transparency option enabled in vencord/vesktop settings

#

it works fine for me

signal dust Mar 31, 2024, 8:00 PM

#

It does have a blur effect

#

I just can't really notice it without squeezing my eyes

#

@fringe wraith got any idea on how to make the transparency higher? I tried to edit the background colors and it didn't really do anything

fringe wraith Mar 31, 2024, 8:02 PM

#

not sure what you mean

signal dust Mar 31, 2024, 8:02 PM

#

I want to increase opacity.

#

so that the blur can be easier to notice.

fringe wraith Mar 31, 2024, 8:03 PM

#

I mean assuming your opacity is already at 1 (full) you can change the blur radius

signal dust Mar 31, 2024, 8:03 PM

#

wait does vesktop update css immediately

fringe wraith Mar 31, 2024, 8:04 PM

#

yes

#

5px blur radius

#

30px blur radius

#

oh and you can change the background color's alpha value

#

you're using background: oklch(.2 0 0 /.5) like I am

#

which is a 20% brightness grey with a 50% alpha

signal dust Mar 31, 2024, 8:08 PM

#

idk why but my vesktop needs a restart to update the css

fringe wraith Mar 31, 2024, 8:09 PM

#

play with the color to something you like

#

strange, mine has always updated on the fly (quickcss updates as I type, any css file I edit updates as soon as I save)

signal dust Mar 31, 2024, 8:10 PM

#

Mine did the same on vencord discord

#

vesktop for some reason needs a restart

fringe wraith Mar 31, 2024, 8:10 PM

#

instead of restarting the whole client you can also ctrl+r

signal dust Mar 31, 2024, 8:11 PM

#

Also I have now just realized what a attribute selection is, but I can't see how it can be done to classes with generic names like layer and container.

fringe wraith Mar 31, 2024, 8:13 PM

#

yeah those often need a parent element in the selector to make them actually only apply where you want them

#

in the case of this snippet I didn't do any of that though, this is what I'm running:

[class^=standardSidebarView_]
 { backdrop-filter: blur(30px);
   top: 0 !important;
   opacity: 1 !important; }
[class^=layer_] + [class^=layer_]
 { border-radius: 10px !important;
   background: oklch(.2 0 0 /.5) !important;
   box-shadow: 5px 5px 25px oklch(0 0 0 /.7) !important;
   border: 1px solid oklch(1 0 0 /.2);
   width: 1100px !important;
   height: 80vh !important;
   margin: auto !important;
   padding: 0 !important;
   opacity: 1 !important;
   transform: unset !important; }
#app-mount [class*=baseLayer_] /*keep view under settings*/
 { opacity: 1 !important;
   transform: unset !important; }
[class^=layer_][aria-hidden="false"] + [class^=layer_][aria-hidden="false"]
 { display: none; } /*fixes closing delay*/
[class^=layers_]> [class^=layer_][class*=animating_]
 { will-change: unset !important; }

#

nothing seems to have gone wrong so far :D

stark trench Mar 31, 2024, 8:16 PM

#

fringe wraith in the case of this snippet I didn't do any of that though, this is what I'm run...

devilbro

fringe wraith Mar 31, 2024, 8:17 PM

#

hopefully soon I can put this in https://github.com/nvhhr/discordcss/tree/main/snippets

signal dust Mar 31, 2024, 8:17 PM

#

fringe wraith in the case of this snippet I didn't do any of that though, this is what I'm run...

How is the layer attribute selector only effecting the layer you need?

fringe wraith Mar 31, 2024, 8:19 PM

#

I think it's doing the same as before, effecting any layer+layer like when viewing audit log for an example it is applied there too

#

but I don't mind

#

I could make it not apply there if I really wanted to but I don't see a reason

fringe wraith Mar 31, 2024, 9:18 PM

#

dropped this into a standalone css (no blurs or anything in here) https://github.com/nvhhr/discordcss/blob/main/snippets/modalsettings.theme.css

ionic eagle Apr 5, 2024, 5:26 PM

#

Fire

signal dust Apr 9, 2024, 4:42 AM

#

I think I finally found an example of it working in the wrong place

#

indigo halo Apr 11, 2024, 2:59 PM

#

I made it blur the background and darken it in case anyone wants it:

/* Modal Settings */
[class^=standardSidebarView_] {
  backdrop-filter: blur(30px);
  top: 0 !important;
  opacity: 1 !important;
}
[class^=layer_] + [class^=layer_] {
  border-radius: 10px !important;
  background: oklch(.2 0 0 /.5) !important;
  box-shadow: 5px 5px 25px oklch(0 0 0 /.7) !important;
  border: 1px solid oklch(1 0 0 /.2);
  width: 1100px !important;
  height: 80vh !important;
  margin: auto !important;
  padding: 0 !important;
  opacity: 1 !important;
  transform: unset !important;
}
/* keep view under settings */
[class*=baseLayer_]:nth-last-child(2) {
  opacity: .45 !important;
  transform: unset !important;
  filter: blur(5px);
  pointer-events: none !important;
}

signal dust Apr 11, 2024, 5:08 PM

#

indigo halo I made it blur the background and darken it in case anyone wants it: ```css /* M...

That looks very nice.

hoary raft Apr 14, 2024, 1:10 PM

#

any way to make it close when its clicked outside of

fringe wraith Apr 14, 2024, 1:14 PM

#

yes, I had a version with that function

#

you might find it in this thread but you need to change/update the classes

#

I plan on putting that in its own snippet file at some point

nova garnet Apr 14, 2024, 11:31 PM

#

fringe wraith yes, I had a version with that function

yes but that was also really ugly

hoary raft Apr 16, 2024, 4:22 AM

#

bug caused by this

signal dust Apr 16, 2024, 4:23 AM

#

signal dust I think I finally found an example of it working in the wrong place

oh yeah i did find that before

#

it happens cause there are 2 sibiling layers to make that focuslock.

#

I think it can be easily fixed if you have an idea how attribute selectors actually work.

signal dust Apr 16, 2024, 4:28 AM

#

hoary raft bug caused by this

try this

[class^=layer_]:not(.layer_c14d31) + [class^=layer_]

instead of

[class^=layer_] + [class^=layer_]

hoary raft Apr 16, 2024, 4:32 AM

#

yep thats it ty

signal dust Apr 16, 2024, 4:44 AM

#

@hoary raft

[class^=layer_]:not([class^=layerContainer_] [class^=layer_]) + [class^=layer_]

use this one instead cause it won't break with discord class rerolls.

hoary raft Apr 16, 2024, 4:47 AM

#

🔥

lapis shard Jul 1, 2024, 6:00 PM

#

updated classes

.standardSidebarView_c25c6d
 { top: 0 !important; }
.layer_d4b6c5 + .layer_d4b6c5
 { border-radius: 10px !important;
   box-shadow: 5px 5px 25px black;
   border: 1px solid var(--border-strong);
   width: 1100px !important;
   height: 80vh !important;
   margin: auto !important;
   padding: 0 !important; }
#app-mount .baseLayer_d4b6c5 /*keep view under settings*/
 { opacity: 1 !important;
   transform: unset !important; }```

severe crater Jan 31, 2025, 2:18 AM

#

Is there a new version?

fringe wraith Jan 31, 2025, 12:45 PM

#

I think this should still work but I'll check it later today and update if necessary:
https://github.com/nvhhr/discordcss/blob/main/snippets/modalsettings.theme.css

GitHub

discordcss/snippets/modalsettings.theme.css at main · nvhhr/discord...

Discord css stuff. Contribute to nvhhr/discordcss development by creating an account on GitHub.

fringe wraith Jan 31, 2025, 8:54 PM

#

yeah still works fine with and without visual refresh

lapis shard May 28, 2025, 12:00 AM

#

.standardSidebarView__23e6b
 { top: 0 !important; }
.layer__960e4 + .layer__960e4
 { border-radius: 10px !important;
   box-shadow: 5px 5px 25px black;
   border: 1px solid var(--border-strong);
   width: 1100px !important;
   height: 80vh !important;
   margin: auto !important;
   padding: 0 !important; }
#app-mount .baseLayer__960e4 /*keep view under settings*/
 { opacity: 1 !important;
   transform: unset !important; }```

#

class fixes

#**Modal settings window**

#Modal settings window