Discord CSS Snippets

Created by Bobjoerules

Profile Buttons Minimize

@keyframes gear-spin-forward {
    from { transform: rotate(0deg); }
    to { transform: rotate(180deg); }
}

@keyframes gear-spin-reverse {
    from { transform: rotate(180deg); }
    to { transform: rotate(0deg); }
}

section[class*="panels__"] div[class*="buttons__"]:not(:hover) > :not(button[aria-label="User Settings"]) {
    opacity: 0 !important;
    width: 0px !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none;
    transition: all 0.5s ease-in-out;
    overflow: hidden;
}

section[class*="panels__"] div[class*="buttons__"]:not(:hover) button[aria-label="User Settings"] [class*="contents__"] {
    animation: gear-spin-reverse 0.8s ease-in-out 1;
}

section[class*="panels__"] div[class*="buttons__"]:hover > * {
    opacity: 1 !important;
    width: 32px !important;
    pointer-events: auto;
    transition: all 0.6s ease-in-out;
}

section[class*="panels__"] div[class*="buttons__"]:hover button[aria-label="User Settings"] [class*="contents__"] {
    animation: gear-spin-forward 0.8s ease-out 1;
}

section[class*="panels__"] button[aria-label="User Settings"] {
    opacity: 1 !important;
    width: 32px !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

Minimizes the profile panel buttons (Mute, Deafen, Settings) into a single settings cog when not hovered. Hovering over the buttons reveals them with a smooth spin animation.

Created by Bobjoerules

Hides the nitro shop button

[class*="channel__"] [href="/store"] {
    display: none !important;
}

Hides the Nitro store button from the direct messages list, decluttering the navigation and bringing a simpler layout to your sidebar.

Created by Bobjoerules

Fixes the color of game toggle button

button[class*="button__"][class*="lookBlank__"] {
    color: hsla(0, 0%, 100%, .9) !important;
}

Corrects the default low-contrast coloring of the game toggle button in client modifications to correctly align with other buttons.

Created by Bobjoerules

Clean Channel Names

[data-list-item-id^=channels___],
[class^=titleWrapper] > h1, 
[class^=resultChannel], 
[class^=channelMention], 
[class^=placeholder][class*=slateTextArea] 
{
    text-transform: capitalize;
}

@font-face {
    font-family: "Dashless";
    src: url("https://vendicated.github.io/random-files/Dashless.woff2") format("woff2");
}

[data-list-item-id^=channels___], /* channel list */
[class^=titleWrapper] > h1, /* top bar with topic */
[class^=resultChannel], /* channel name in search */
[class^=channelMention], /* channel mentions in chat */
[class^=placeholder][class*=slateTextArea] /* "Send a message in #blah" */
{
    font-family: "Dashless", var(--font-primary);
}

Replaces the default channel naming fonts with the custom Dashless font to automatically capitalize text channels and convert hyphens into readable spaces.