refact0r / system24

a tui-style discord theme
MIT License
1.07k stars 41 forks source link

Removing unroundings.css and using panel-roundness > 0px #42

Open trsted opened 1 month ago

trsted commented 1 month ago

Hey again,

when removing the unrounding.css and thus using --panel-roundness some corners/edges start disappearing with increased px size. Using a higher value makes it more noticable. I really like the look of the rounded panels but the edges are pretty distracting.

If you find a fix that would be awesome! --panel-roundness: 0px image

--panel-roundness: 30px image

image

Show User Profile looks fine, but funnily again the Message panel has no edges on the right side. image

Bonus: Because I don't want to open a third issue (i am already so sorry), the embedded profile in the profile side panel is not getting rounded. image

Otherwise thanks again! And I love this theme, the reason why I submit the issues so it can get even better. <3

Androser420 commented 4 weeks ago

hey there, I just made a little workaround for this that I'm currently using, it's not perfect but it should get the job done put this in your .theme.css:

/* lazy rounding fix for Apps section */
[class^="channelAppLauncher_"]>[class^="buttonContainer_"] {
    &>[class^="button_"] {
        transform: scale(0.5);
    }

    & [class^="contents"]>[class^="lottieIcon_"] {
        transform: scale(2);
    }
}

/* server discovery */
ul {
    [class^='footer'] {
        background: transparent
    }

    [class^='gradient'] {
        background: var(--bg-overlay-app-frame, var(--background-tertiary))
    }
}

/* user profile */
[class^='userPanelInner_'] {
    border-radius: var(--panel-roundness);
}

/* server banner */
[class^='animatedContainer_'] {
    border-top-left-radius: calc(var(--panel-roundness) /1.5);
    border-top-right-radius: calc(var(--panel-roundness) /1.5);
}

let me know if it works for you!

trsted commented 4 weeks ago

the hidden corners/edges are definitely fixed with that, perfect. user profiles also look better, but still a bit off. but this works for now, thanks! image

I will leave the issue open for a while if you think the user profile roundness can still be improved. I think if the red part that is now seen on the edges would be removed, the rounding would look better

Androser420 commented 3 weeks ago

hmm im not really sure i can completely get rid it but u could probably change the border radius to something like:

border-radius: calc(var(--panel-roundness) - var(--txt-pad) - 2px);

this isnt reliable but atleast its mostly covered now

trsted commented 3 weeks ago

25px image This is with --panel-roundness: 25px Nice, this seems to work better now! :)

I don't want to be annoying, but with --panel-roundness: 15px the effect is barely visible, and the corners look sharp. 15px is my preferred value here. I tried adjusting the formula myself a bit, but I don't fully understand how it works. If it could look more like the 25px setting here, I would be super satisfied! <3 15px image

Androser420 commented 3 weeks ago

hey, im so sorry for making you wait this long i dont think its very doable except maybe making the outer padding smaller

/* user profile */
[class^='userPanelInner_'] {
    border-radius: calc(var(--panel-roundness) - var(--txt-pad) - 2px);
}

[class^='userPanelOuter_'] {
    padding: 3px;
    --txt-pad: 3px;
}

image

this is all i can think of for now, hopefully someone looks over this and comes up with a proper solution, cheers!