fancy version of this | libVencore | Page 1

trim heart Mar 27, 2025, 1:04 AM

#

if you dont give a shit about the border changing color on focus, then just use this instead (has one less :has() selector for better performance)

.visual-refresh {
    --custom-channel-textarea-text-area-height: 56px;
    .form_f75fb0 {
        display: flex;
        flex-direction: column;
        padding: 0 8px 8px 8px;
    }
    .channelTextArea_f75fb0 {
        margin-bottom: 0;
        border-color: var(--border-faint) !important;
    }
    .base_b88801 {
        position: static;
        order: -1;
        padding: 0 8px;
        background-color: var(--chat-background-default);
        border: 1px solid var(--border-faint);
        border-bottom: none;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    }
    .stackedBars__74017 {
        border-color: var(--border-faint) !important;
    }
    .form_f75fb0:has(.base_b88801) {
        .channelTextArea_f75fb0 {
            border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        }
        .stackedBars__74017 {
            border-radius: 0;
        }
    }
}```

naive belfry Mar 27, 2025, 1:23 AM

#

wait so you just moved the bottom bar up just like how my seamlesschatbar does? im getting powercrept every snippet bruh

trim heart Mar 27, 2025, 1:23 AM

#

naive belfry wait so you just moved the bottom bar up just like how my seamlesschatbar does? ...

😭

#

what is seamlesschatbar

naive belfry Mar 27, 2025, 1:23 AM

#

#🎨-css-snippets message

#

cant believe powercreep has snuck into css snippets from star rail

latent palm Mar 27, 2025, 1:27 AM

#

it has an interesting effect with #🎨-css-snippets message, idk which look i prefer lol

#

yeah i do think i like the smaller look better, nice to find snippets that interact with eachother well

trim heart Mar 27, 2025, 1:30 AM

#

naive belfry https://discord.com/channels/1015060230222131221/1028106818368589824/13224963232...

oh i see

atomic zealot Mar 27, 2025, 3:13 AM

#

Is it possible to make the typing not occupying the full width of the chat box? Like the old Seamless Chat bar that it had a "tab" shape

naive belfry Mar 27, 2025, 3:37 AM

#

atomic zealot Is it possible to make the typing not occupying the full width of the chat box? ...

fixing it, please wait

inner ingot Mar 27, 2025, 5:44 PM

#

Is there a way to make it so this doesn't cause the message area to shift up whenever someone is typing?

latent palm Mar 27, 2025, 6:09 PM

#

That's something I'd also like

#

For either this or the Visual Refresh Seamless Chat Bar

bright elm Mar 27, 2025, 6:39 PM

#

try this, tweaked the position of the bar so it shouldn't shift the flow. there's probably a nicer way to do it, but it Works On My Machine™️

.visual-refresh {
    --custom-channel-textarea-text-area-height: 56px;
    .form_f75fb0 {
        display: flex;
        flex-direction: column;
        padding: 16px 8px 8px 8px;
    }
    .channelTextArea_f75fb0 {
        margin-bottom: 0;
    }
    .base_b88801 {
        position: absolute;
        order: -1;
        padding: 0 8px;
        margin: 0 -8px 0 -8px;
        bottom: 65px;
        background-color: var(--chat-background-default);
        transition: border-color .2s ease;
        border: 1px solid var(--border-faint);
        border-bottom: none;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    }
    .stackedBars__74017 {
        transition: border-color .2s ease;
        border-color: var(--border-faint) !important;
    }
    .form_f75fb0:has(.base_b88801) {
        .channelTextArea_f75fb0 {
            border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        }
        .stackedBars__74017 {
            border-radius: 0;
        }
    }
    .form_f75fb0:has(.channelTextArea__74017:focus-within) {
        .base_b88801 {
            border-color: var(--border-subtle);
        }
        .stackedBars__74017 {
            border-color: var(--border-subtle) !important;
        }
    }
}```

#

it'll probably break the starter channel popup things but nobody cares about those anyway

trim heart Mar 27, 2025, 6:50 PM

#

inner ingot Is there a way to make it so this doesn't cause the message area to shift up whe...

i have an improved version i made for my theme, ill post it here later

obsidian dove Mar 27, 2025, 6:59 PM

#

bright elm try this, tweaked the position of the bar so it shouldn't shift the flow. there'...

this works for me, thanks! any way to place the "is typing" below the chat input, as it used to be? 🙏

trim heart Mar 27, 2025, 7:00 PM

#

obsidian dove this works for me, thanks! any way to place the "is typing" below the chat input...

use a different snippet

#

moving the typing indicator is the whole point of this one

#

i think i saw one that doesn't move it

#

scroll up in snippets

obsidian dove Mar 27, 2025, 7:01 PM

#

can you share a link to a decent one? there's a lot of snippets and its hard to tell which ones are decent, especially when lots of them share similar names haha

EDIT: managed to fix it with the existing snippet i had 👍

trim heart Mar 28, 2025, 12:32 AM

#

.visual-refresh {
    .form_f75fb0 {
        margin: 0 8px 8px 8px;
        padding: 0;
        --chatbar-border-color: var(--border-faint);
    }
    .channelTextArea_f75fb0 {
        margin: 0;
        border-color: var(--chatbar-border-color);
        transition: none;
    }
    .base_b88801 {
        top: -25px;
        left: 0;
        right: 0;
        background-color: var(--chat-background-default);
        padding: 0 8px;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        border: 1px solid var(--chatbar-border-color);
        border-bottom: none;
        transition: none;
    }
    .stackedBars__74017,
    .threadSuggestionBar__841c8 {
        border-color: var(--chatbar-border-color) !important;
    }
    .form_f75fb0:has(.base_b88801) {
        .channelTextArea_f75fb0 {
            border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        }
    }
    .form_f75fb0:has(.channelTextArea__74017:focus-within) {
        --chatbar-border-color: var(--border-subtle);
    }
    .scrollerSpacer__36d07 {
        height: calc(25px + 8px);
    }
    .scroller__36d07::-webkit-scrollbar-track {
        margin-bottom: calc(21px + 8px);
    }
    .bottomBar__0f481 {
        margin-bottom: 25px;
    }
}```

compact cradle Mar 28, 2025, 9:30 AM

#

The avatar and the name are not aligned

naive belfry Mar 28, 2025, 10:19 AM

#

compact cradle The avatar and the name are not aligned

plugin issue, wait for the fix to be merged

south coral Mar 29, 2025, 5:50 PM

#

obsidian dove can you share a link to a decent one? there's a lot of snippets and its hard to ...

can you share that with me?

ocean bison Mar 30, 2025, 7:57 AM

#

@trim heart could you make this work with this one #🎨-css-snippets message ?

#

it mostly works but it is not perfectly aligned

trim heart Mar 30, 2025, 8:00 AM

#

ocean bison <@508863359777505290> could you make this work with this one https://discord.com...

bro there are literally variables in the snippet so you can tweak the height

warped glen Mar 31, 2025, 8:37 PM

#

I use a nitro gradient color theme (Crimson Moon). This snippet doesn't properly pull the color for the typing/slowmode background. I'm trying to replace background-color: var(--chat-background-default); with just hard-coding a color (#3c2628) but I seem to be failing at the correct syntax. I'm truly just bad at css lol.

#

Disregard. I got it to work by removing the var(stuff) entirely and just putting the color in background-color: #3c2628;

I realized I was trying to put it inside the var() which wasn't the right way to do it lolsob. I did say I was bad at css lol.

visual adder Apr 5, 2025, 10:12 PM

#

Is there any way to show always (not only when typing or slowmode) typing bar?

warped glen Apr 5, 2025, 11:43 PM

#

~~This snippet already does that. If you change the background-color as I noted above, you can make it a specific color if you don't want it to blend.~~

trim heart Apr 5, 2025, 11:43 PM

#

warped glen ~~This snippet already does that. If you change the background-color as I noted ...

you are misunderstanding

trim heart Apr 5, 2025, 11:44 PM

#

visual adder Is there any way to show always (not only when typing or slowmode) typing bar?

shouldnt be too hard tbh, try deleting the two :has()

#

oh wait actually that wont work

#

the typing element is added and removed by discords js

#

youd maybe need a pseudo element just to fill the space when the element isnt there

warped glen Apr 5, 2025, 11:46 PM

#

Oh, I misread the post. My bad! ::scribbles::

visual adder Apr 6, 2025, 5:28 AM

#

Is there ability to move "typing bar" to down (chatbar will be smaller)?

trim heart Apr 6, 2025, 5:29 AM

#

visual adder Is there ability to move "typing bar" to down (chatbar will be smaller)?

isnt that just normal discord then

visual adder Apr 6, 2025, 5:31 AM

#

trim heart isnt that just normal discord then

All in all, you're right

visual adder Apr 6, 2025, 9:22 PM

#

trim heart isnt that just normal discord then

is there any way to make reply bar the same height as typing bar?

#

I try it myself and nothing works

visual adder Apr 6, 2025, 9:24 PM

#

warped glen Oh, I misread the post. My bad! ::scribbles::

no problem 😅

visual adder Apr 6, 2025, 9:45 PM

#

I've got that

visual adder Apr 7, 2025, 8:22 AM

#

hmmmm, why only on the colored themes, reply bar has border on top

#

I'm on my own hand modified code to match reply/typing bar with theme

#

all themes instead onyx

#

    --custom-channel-textarea-text-area-height: 56px;
    .form_f75fb0 {
        margin: 0 8px 8px 8px;
        padding: 0;
        --chatbar-border-color: var(--border-faint);
    }

    .channelTextArea_f75fb0 {
        margin: 0;
        border-color: var(--chatbar-border-color);
        transition: none;
    }
    .base_b88801 {
        top: -25px;
        left: 0;
        right: 0;
        background: var(--bg-overlay-4, var(--channeltextarea-background));
        padding: 0 8px;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        border: 1px solid var(--chatbar-border-color);
        border-bottom: none;
        transition: none;
    }
    .clipContainer__841c8 {
        top: -25px;
        left: 0;
        right: 0;
        background-color: var(--chat-background-default);
        padding: 0 0px;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        border-bottom: none;
        transition: none;
    }
    .clipContainer__841c8:has(.container__841c8) {
        .replyBar__841c8, .threadSuggestionBar__841c8 {
            background: var(--bg-overlay-4, var(--channeltextarea-background));
        }
    }
    
    .stackedBars__74017,
    .threadSuggestionBar__841c8 {
        border-color: var(--chatbar-border-color) !important;
        
    }
    .form_f75fb0:has(.base_b88801) {
        .channelTextArea_f75fb0 {
            border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        }
    }
    .form_f75fb0:has(.channelTextArea__74017:focus-within) {
        --chatbar-border-color: var(--border-subtle);
    }
    .scrollerSpacer__36d07 {
        height: calc(25px + 8px);
    }
    .scroller__36d07::-webkit-scrollbar-track {
        margin-bottom: calc(21px + 8px);
    }
    .bottomBar__0f481 {
        margin-bottom: 25px;
    }
}```

quiet sluice Apr 16, 2025, 11:13 AM

#

all this seems to do is just make my chatbox darker without actually aligning it 😭

trim heart Apr 16, 2025, 3:55 PM

#

quiet sluice all this seems to do is just make my chatbox darker without actually aligning it...

i cannot guarantee this will work with any themes

quiet sluice Apr 16, 2025, 4:08 PM

#

im just using base discord 😔

#

base as in no theme

#

oh i fixed it, nevermind

inner lynx Apr 17, 2025, 12:49 AM

#

can i cut this space between the most recent message and the chatbox

trim heart Apr 17, 2025, 2:10 AM

#

inner lynx can i cut this space between the most recent message and the chatbox

yea

#

but if u do then when the typing bar shows up it will get really cramped

next blaze Apr 18, 2025, 2:35 PM

#

how does one do it, like which variable or something

also can it be like adjusted bit by bit

brittle zinc Apr 18, 2025, 3:44 PM

#

next blaze how does one do it, like which variable or something also can it be like adjus...

Just play with the values here

.scrollerSpacer__36d07 {
    height: calc(24px + 8px);
}

next blaze Apr 18, 2025, 3:44 PM

#

Aight thanks

brittle zinc Apr 18, 2025, 3:47 PM

#

Don't go down too much else when the typing bar shows up it will hides the chat

#

I'd say 12 + 8 is good enough

astral wing Apr 18, 2025, 8:46 PM

#

I'm having some trouble figuring out how to get the transparency behavior I want with this typing indicator

#

posted my issue in theme development

#

a possible solution might be to have it share behavior with the reply bar, in that it increases the size of .visual-refresh .form_f75fb0, but that would mean the chat is pushed up and down every time someone starts typing, which is not something I want

#

and I'm not experienced enough with css to figure out another solution 💀

trim heart Apr 18, 2025, 9:07 PM

#

not sure what your issue is

#

the typing bar gets the same background as the chat bar

#

the chat bar may have more layers of backgrounds or something idk

astral wing Apr 18, 2025, 9:20 PM

#

trim heart the typing bar gets the same background as the chat bar

messages from other people are visible through the typing indicator (if the background is set to be transparent) while they are not visible through the chat box

#

I only want it to show through to my background image, rather than show chat messages

#

a temporary fix is to set the background of the typing indicator to be a solid color, but that just reveals an ugly border between the typing indicator and chat box

#

maybe fixing that border to be the same color as the typing indicator would be easier than matching the transparency

#

but I'm really not sure how to do that, I've tried messing with some variables but can't figure it out myself

barren cave Apr 19, 2025, 12:16 AM

#

you should change it to this

.scrollerSpacer__36d07 {
  height: 1em;
}

#

instead of the css .scrollerSpacer__36d07 { height: calc(24px + 8px); }

barren cave Apr 19, 2025, 12:51 AM

#

actually that breaks the "is typing" notification

#

hmm

#

it would probably need much more complex css selector/queries to check if the typing indicator exists. then change the height of the spacer based on that

trim heart Apr 19, 2025, 12:54 AM

#

no

#

just use the simpler version of the snippet

#

if you're ok with it jumping up and down i guess

#

there's not rlly another way

barren cave Apr 19, 2025, 11:14 PM

#

it's not elegant and doesnt work well. but I think there is potential here. the current icons have a lot of space around them. so you could probably move stuff around to make space for it there

trim heart Apr 20, 2025, 12:22 AM

#

oh ok then do that

#

you seem to have figured out devtools

#

i dont intend on maintaining this snippet

barren cave Apr 20, 2025, 12:53 AM

#

trim heart you seem to have figured out devtools

oh haha im just using a different client. so it allows me to open dev tools.

#

im using Dorion

slate creek May 2, 2025, 4:46 AM

#

barren cave im using `Dorion`

https://cdn.discordapp.com/attachments/1280395429871095901/1280395559345197077/v12044gd0000cjdr2trc77u6sgpos3bg.mov?ex=6814fd89&is=6813ac09&hm=8eec28ae19ccf49072d2dcafdb53e0dc578d2cb1bbc67c8c4a97d1b5d3d2bed9&

▶ Play video

barren cave May 2, 2025, 3:07 PM

#

?

slate creek May 2, 2025, 3:10 PM

#

barren cave ?

gorion

barren cave May 2, 2025, 8:04 PM

#

i dont speak spanish. or whatever language that is. I have no idea what this is

slate creek May 2, 2025, 8:44 PM

#

ok so

#

the joke is

#

the teacher asks the kid to translate lion into english which is leon

#

he says correctly lion

#

and now sparrow which is gorrion

#

he says gorlion

#

and because you said dorion

#

dorion

barren cave May 3, 2025, 1:16 PM

#

ok

astral wing May 16, 2025, 7:00 PM

#

any way I could add the focus box shadow to the typing indicator with the theme im using? (clearvision)

#

here's the css that adds that shadow

  box-shadow: 0 0 2px 2px var(--hsl-main-color);
}```

#

I just don't know how to tell it to modify .base_b88801 when .channelTextArea__74017 is focused

#fancy version of this