Completed borders

[calm inlet]

thread for threading purposes

you can customize it by changing the margins, --app-border-frame and --radius-md

if theres any issues, you can ping me :3

[undone wharf]

i was thinking of making this, thanks :3

[calm inlet]

:3

had this idea a while ago actually, just never got to it cause it seemed really daunting

turns out that it was actually really easy

[thin marsh]

Does it work with settings too?

[calm inlet]

hm?

well

theres no border to really

complete there

[undone wharf]

unless you use settings modal

[calm inlet]

im gonna see if i can get this working with #🎨-css-snippets message and make the hover toggleable by a keybind, then we'll have the full arc experience

[undone wharf]

css doesnt support keybinds tho

max you can do is advanced properties

[calm inlet]

yeah thats when the js comes in

to do nothing more but to toggle a class

[calm inlet]

im too bored for my own good

⚠️ THIS IS NOT AN UPDATE TO THE SNIPPET ABOVE, ITS JUST A SILLY THING I MADE WITH IT ⚠️

/* ===== Collapsible sidebars - lu9 (1354606015819022416) ===== */
body:not(.side-expanded) {
  [class^="sidebarList_"] {
    position: fixed; /* Remove if you don't want it to float */
    width: 150px; /* Set to 0px if you don't want it to float */
    container-type: unset;
    opacity: 0%;
    height: 95%;
    top: 38px;
    z-index: 998;
    left: -230px;
    border: 1px solid var(--app-border-frame);
    border-radius: var(--radius-md);
    filter: drop-shadow(16px 16px 16px #0005) ;
    transition-property: opacity, left, width;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  [class^="sidebar_"]:hover [class^="sidebarList_"] {
    left: 75px;
    opacity: 100%;
    width: 300px; /* Set your preferred width here (resize handle is disabled) */
  }

  [class*="guilds"] {
    z-index: 999; /* So the sidebar pops from behind the servers */
  }

  [class^="panels_"] {
    position: fixed !important; /* Floating user panel (status, deafen, etc) */
    width: 60px !important;
    z-index: 999 !important;
    transition: width .5s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  [class^="panels_"]:hover {
    width: 300px !important;
    z-index: 9999 !important;
  }


  [class^="panels_"] [class^="container__"] [class^="buttons__"] {
    opacity: 0%;
    scale: 0%; /* Because the buttons can't stay inside the panel on chromium (any help is appreciated) */
    transition-property: opacity, margin-bottom, scale;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .panels_c48ade:hover [class^="container__"] [class^="buttons__"] {
  
    scale: 100%;
    opacity: 100%;
  }

  [class^="sidebarResizeHandle_"] {
    display: none; /* Set your preferred width in the sidebar settings */
  }

  [class^="container_"] [class^="membersWrap_"] {
    position: fixed; /* Remove if you don't want it to float */
    height: 100%;
    opacity: 0%;
    z-index: 999;
    right: -250px;
    /* top: 80px; Add/change this according to your desktop/client */
    filter: drop-shadow(-16px -16px 16px #0005) ;
    transition-property: right, opacity;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  [class^="container_"] [class^="membersWrap_"]:hover {
    right: 0px;
    opacity: 100%;
  }

  [class*='page_'] {
    border: 1px solid var(--app-border-frame) !important;
    border-radius: var(--radius-md) !important;
  }

}

/* ===== Completed borders - Me :3 (1355432251990741066) ===== */
[class*='base_'] > [class*='content_'] {
    margin: 0 10px 10px 0;

    [class*='page_'] {
        border: 1px solid var(--app-border-frame);
        border-left: none;
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
    }

    [class*='sidebar_'] {
        &::after {
            display: none;
        }

        [class*='sidebarList_'] {
            border-bottom: 1px solid var(--app-border-frame);
            border-bottom-left-radius: var(--radius-md);
        }
    }

    [class*='chat_'] {
        border-top: none !important;
    }
}

document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.altKey && event.key === 'c') {
        event.preventDefault();
        document.body.classList.toggle('side-expanded');
    }
});

⚠️ THIS IS NOT AN UPDATE TO THE SNIPPET ABOVE, ITS JUST A SILLY THING I MADE WITH IT ⚠️

[calm inlet]

this is actually sick

[odd dagger]

@calm inlet How did you increase the size of the server and folder tiles?

[calm inlet]

#🎨-css-snippets message

[runic zinc]

Amazing theme thank you!

[calm inlet]

if you removed the titlebar, replace

    margin: 0 10px 10px 0;

with

    margin: 10px 10px 10px 0;

[fair zealot]

hi is there a reason why this removes the "active now" section on the friends list?

[calm inlet]

what active now section

[fair zealot]

the thing on right side

[calm inlet]

no idea what you're on about, its still there

[fair zealot]

For me it disappears

No idea why

[orchid nimbus]

THANK YOU SO MUCH i have been looking how to do this forever 😭 (late response)

[calm inlet]

you're welcomee :3

[steady patio]

Interestingly, it seems like this snippet causes right-click context menus to fall behind the server list

[calm inlet]

thats weird, i dont experience this issue

[open meteor]

heyy, i have this like color mismatch of sorts by the top and bottom of the server list w/ this css snippet? im not too familiar with discord css editing and all, so if yall could help me out 🙏

nevermind, found the issue!

[stark swan]

this actually looks so sick, since it includes JS do you need to add it as a custom plugin?