A personal Vencord QuickCSS

quickCss.css

/** NOTES
You'd like to change the font families if you aren't Korean and/or don't use Momotalk theme (https://github.com/MiyakuKage/discord-momotalk)
**/

/** IMPORTS **/
/* Revert Old Icons */
@import url(https://davart154.github.io/Themes/Icon%20Revert%202023/2023%20Icon%20Revert.css);

/* Import Fonts */
@import url(https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-jp.min.css);

/* Revert visual refresh server list (below) */
/* https://discord.com/channels/1015060230222131221/1028106818368589824/1354502862390038528 */
@import url("https://scattagain.github.io/VencordStuff/css/GuildbarRevert.css");
:root {
    --guildbar-avatar-size: 48px !important;
    --blob-scale: 48;
    --guildbar-folder-size: var(--guildbar-avatar-size);
    --folder-blob-scale: var(--blob-scale);
}


/** FONTS **/
/* Change Fonts (MomoTalk Theme) */
:root, :root:lang(ko) {
    --font-primary: "경기천년제목 Light", "Pretendard JP Variable", Arial, sans-serif;
    --font-display: "경기천년제목 Light", "Pretendard JP Variable", Arial, sans-serif;
    --font-headline: "경기천년제목 Light", "Pretendard JP Variable", Arial, sans-serif;
    --font-code: "JetBrains Mono", "Goorm Sans Code 400", Arial, monospace;
}


/** ADJUST **/
/* Remove Unnecessary Buttons */
/*
form button[aria-label="Send a gift"],
#channels > ul > li div[aria-label="Create Invite"],
section > div > div > div[aria-label="Notification Settings"]
*/
[aria-label="선물 보내기"], /* "Send a gift" */
[class^=channelAppLauncher_], /* (Apps / 앱) */
[data-windows=true] a, /* (Help / 도움말) */
[aria-label="알림 설정"], /* "Notification Settings" */
#channels [aria-label="초대 코드 만들기"] /* "Create Invite" */
{
    display: none !important;
}

/* Match user section height to adjusted message box */
:root {
    --custom-channel-textarea-text-area-height: 60px; /* Default: 48px */
}
[aria-label="사용자 영역"] { /* "User Settings" */
    border-bottom: 0px !important;
    border-radius: 0px !important;
    left: 0px !important;
    bottom: 0px !important;
    width: 100% !important;
    padding: 0px 3px 0px 9px;
    > [class^=container__] {
        top: 0px;
        height: var(--custom-channel-textarea-text-area-height);
    }
}
#channels {
    margin-bottom: 0px;
}
[aria-label="서버 사이드바"] { /* "Servers sidebar" */
    margin-bottom: var(--custom-channel-textarea-text-area-height) !important;
}

/* Fix title section left padding */
section[class^=title_] {
    padding-left: 8px !important;
}

/* Narrow search bar */
[class^=searchBar__] {
    width: 192px !important;
}

/* Keep Spoiler Text in the Same Line */
[class^="spoilerWarning_"] {
    word-break: keep-all;
}

/* Darken Server Counter */
#vc-guildcount {
    text-transform: capitalize !important;
    color: var(--text-muted) !important;
}
#vc-guildcount:hover {
    color: var(--interactive-normal) !important;
}


/** SIMPLE_ENHANCEMENTS **/
/**
 * @name SimpleEnhancements (modified)
 * @description Adds simple animations and enhancements to Discord's design by also adding a redesigned go to present message button.
 * @author ikeman2003
 * @version 2.0.4
 * @website https://github.com/ikeman2003/BetterDiscordEnhancements
 */
/* - Revert back to old Discord font cuz gg sans is meh */
/* - Spin Discord Home Button on click */
/* - settings/deafen/mute buttons animated */
/* - Pop-out Animation */
/* + Uses Popup animation on Channel DM's (plugin) and channel list */
:is(main, nav) > div {
    animation: custom-menu-animation .15s ease;
    transform-origin: top;
}
@keyframes custom-menu-animation {
    0% {
        transform: translateX(-20px);
        opacity: 0;
    }
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}
/* - Emoji Auto-Fill Animation */
/* + Better Jump To Present Button */
[class^=jumpToPresentBar_] {
    display: contents;
    color: transparent !important;
    > button:first-child {
        display: none;
    }
    > button:last-child {
        z-index: 1;
        position: absolute;
        bottom: 24px;
        right: 24px;
        min-width: 32px;
        padding: 8px !important;
        border-radius: 100px;
        color: var(--messagefontcolor); /* --text-primary */
        background-color: var(--senseimessagebubble) !important; /* --button-filled-brand-background */
        box-shadow: var(--elevation-high);
        transition: font-size .2s .1s, color .2s, padding .4s .1s;
        font-size: 0px;
        &:hover {
            padding: 8px 16px !important;
            font-size: 14px;
            transition: font-size .2s, color .2s .1s, padding .4s;
        }
    }
}
/* - Jump to Present+ by Lonk#6942 */
/* + Messages Slide In Chat */
[class*=isSending_] {
    animation: slide-up .25s ease;
}
@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateX(20px); /* -20px */
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}
/* - Remove Help Icon Button */
/* - Move the Search Bar to the top right */
/* - Chat Box Buttons Animated */
/* + Animation on channel select */
#channels [class*=selected_] {
    animation: UserChannelButtons .4s normal ease;
}
@keyframes UserChannelButtons {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(3px);
    }
    100% {
        transform: translateX(0px);
    }
}
/* - Replace Muted channel icons with an actual muted icon, Only downside is that the muted icon goes away when you select the channel, There's no way around that(same way the channel name becomes white when you select it.) */
/* - Floating Folders */


/** FROM #css-snippets IN Vencord SERVER **/
/* Modernized audio attachments */
/* https://discord.com/channels/1015060230222131221/1028106818368589824/1272837576381698048 */
[class^=wrapperAudio_] {
    > [class^=audioMetadata_] {
        margin-bottom: 24px;
    }
    > [class^=audioControls_] {
        position: absolute;
        bottom: 0px;
        left: 0px;
        border-radius: 0px 0px 8px 8px;
    }
}

/* moves the message buttons above the message to avoid this issue: */
/* https://discord.com/channels/1015060230222131221/1028106818368589824/1263665501817536542 */
[class*=buttonContainer] > [class*=buttons_] {
    transform: translateY(-20%);
}

/* Fix form modal height */
/* https://discord.com/channels/1015060230222131221/1028106818368589824/1359060841114239097 */
[class^=layer_] > form > [class^=focusLock__] {
    position: relative;
    max-height: calc(100vh - var(--space-24) * 3);
    top: calc(var(--space-24) / 2);
}

/**
* @name AlignedChatBox (modified)
* @author CodeF53
* @version 3.2
* @description Aligns chat box with the bottom of the screen and user controls
*/
/* form > div[class^=submitContainer_]  */
[class^=chatContent_] > form {
    /* Align chatbox */
    padding: 0px !important;
    > div > [class^=channelTextArea_] {
        margin: 0px !important;
        border-bottom: 0px;
        border-radius: 0px;
        > [class^=scrollableContainer_] {
            border-radius: 0px;
        }
    }
    /* Announcement channel bottom UI */
    > [class^=wrapper__] {
        margin: 0px;
        padding: 0px;
        height: var(--custom-channel-textarea-text-area-height);
        border-bottom: 0px;
        border-radius: 0px;
    }
    /* Align forum channel thing */
    /* > div { margin-bottom: 0px; border-radius: 0px; } */
    /* Move slowmode/typing indicator to match */
    > [class^=typing_] {
        top: -24px;
        margin-left: auto;
        width: fit-content;
        padding-left: 2px;
        padding-right: 8px;
    }
    /* Make scrollbar meet chatbox */
    /* &::after { display: none; } */
    /* Fix replies */
    /* > div > div > [class^=attachedBars_] {
        min-height: unset !important;
        padding-bottom: 4px;
    } */
}

As of this writing it looks like these

thxx!!!

Dude the new ui is ass and none of these quickss edits actually refresh it back well at least for me we are all cooked

The direct message looks the same... could I add something to make them a little bit bigger like the old ui ?

As of this writing it looks like these

Excuse me, but how did you achieve the long rectangular user panel?

As of this writing it looks like these

Excuse me, but how did you achieve the long rectangular user panel?

https://gist.github.com/qyurila/f82e1b4719b156e7710d64fcd07f4c09#file-quickcss-css-L49-L70

@Spuner these lines iiuc

@Spuner these lines iiuc

Unfortunately it doesn't work with "@import url("https://milbits.github.io/oldcord/src/components/redesign.css");".