Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
trsted opened this issue Oct 23, 2024 · 5 comments
Open

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

trsted opened this issue Oct 23, 2024 · 5 comments

Comments

@trsted
Copy link

trsted commented Oct 23, 2024

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
Copy link
Contributor

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!

Androser420 referenced this issue in Androser420/sysmol24 Oct 26, 2024
@trsted
Copy link
Author

trsted commented Oct 26, 2024

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
Copy link
Contributor

Androser420 commented Oct 27, 2024

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
Copy link
Author

trsted commented Oct 28, 2024

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
Copy link
Contributor

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants