A personal Vencord custom QuickCSS: Pretendard font + SimpleEnhancements tweak

quickCss.css

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

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


/* 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;
}

/* Change Fonts */
/* from https://github.com/Overimagine1/old-discord-font */
/*
:root, :root:lang(ko) {
    --font-primary: "Pretendard JP Variable", Arial, sans-serif;
    --font-display: "Pretendard JP Variable", Arial, sans-serif;
    --font-headline: "Pretendard JP Variable", Arial, sans-serif;
    --font-code: "JetBrains Mono", "Goorm Sans Code 400", Arial, monospace;
}
*/

/* Revert MinimalCord's overriding font
/* from https://github.com/DiscordStyles/MinimalCord/blob/master/src/theme/app/_font.scss */
/*
::-webkit-input-placeholder, body, button, input, select, textarea {
    font-family: "Pretendard JP Variable";
}
*/


/* 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"]
*/
form div[class^=channelAppLauncher_], /* Apps/앱 */
form button[aria-label="선물 보내기"],
#channels > ul > li div[aria-label="초대 코드 만들기"],
section > div > div > div[aria-label="알림 설정"],
section > div > div > a /* Help/도움말 */
{
    display: none;
}

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

/* Darken Server Counter */
#vc-guildcount {
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
    color: var(--text-muted) !important;
    vertical-align: top;
}
#vc-guildcount:hover {
    color: var(--interactive-normal) !important;
}

/* Make Unread Channel Icon Distinguished */
/*
#channels > ul > li > div[class*=modeUnreadImportant_] svg[class^=icon_] {
    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 */
nav > div,
main > 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;
    > button:first-child {
        display: none;
    }
    > button:last-child {
        display: flex;
        position: absolute;
        z-index: 1;
        height: auto;
        bottom: 24px;
        right: 22px;
        padding: 8px !important;
        background-color: #5982cd;
        box-shadow: var(--elevation-high);
        border-radius: 100px;
        font-size: 0px;
        color: transparent;
        transition: font-size .2s .1s, color .2s, padding .4s .1s;
    }
    > button {
        color: #FFFFFF !important;
        > svg {
            order: -1;
            margin: 0px;
            width: 24px;
            height: 24px;
            top: auto;
            color: #FFFFFF;
            transition: margin .6s;
        }
    }
}
[class^=jumpToPresentBar_]:hover > button {
    padding: 8px 18px !important;
    font-size: 14px;
    transition: font-size .2s, color .2s .1s, padding .4s;
    > svg {
        margin-left: -6px;
        margin-right: 2px;
    }
}
/* Jump to Present+ by Lonk#6942 */
/* Messages Slide In Chat */
main ol > li > div[class^=message_] div[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 li[class*=selected_] {
    animation: UserChannelButtons .4s normal ease;
}
@keyframes UserChannelButtons {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(2px);
    }
    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 */
/* Color the message pill with ping and new posts color */
/* https://discord.com/channels/1015060230222131221/1028106818368589824/1272838024048148513 */
/*
[class^="iconVisibility_"]:has([style="color: var(--text-brand);"]) > [class^="unread_"] {
    background-color: var(--text-brand);
}
[class^="iconVisibility_"]:has([class^="mentionsBadge_"]) > [class^="unread_"] {
    background-color: var(--status-danger);
}
*/

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

/* Larger webcam previews when focusing screenshare */
/* https://discord.com/channels/1015060230222131221/1028106818368589824/1272278542088015953 */
/*
div[class^=callContainer] div[class^=pictureInPictureWindow] {
    scale: 2;
    translate: 50% -75%;
}
*/

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

/**
* @name AlignedChatBox
* @author CodeF53
* @version 3.2
* @description Aligns chat box with the bottom of the screen and user controls
*/
:is(main,section)[class^=chatContent_] > form,
form > div[class^=submitContainer_] {
    /* align chatbox */
    padding: 0px;
    > div > div[class^=channelTextArea_] {
        margin: 0px !important;
        > div[class^=scrollableContainer_] {
            min-height: 49px;
            padding-top: 4px;
            border-radius: 0px;
        }
    }
    /* align forum channel thing */
    > div { margin-bottom: 0px; border-radius: 0px; }
    /* move slowmode/typing indicator to match */
    > div[class^=typing_] {
        top: -24px;
        right: calc(var(--custom-index-scrollbar-margin) * 2 + var(--custom-index-scrollbar-width));
        margin-left: auto;
        width: fit-content;
        padding-left: 2px;
        padding-right: 9px;
        /*
        border-radius: 8px 8px 0px 0px;
        background-color: var(--channeltextarea-background);
        */
    }
    /* make scrollbar meet chatbox */
    &::after { display: none; }
    /* fix replies */
    > div > div > div[class^=attachedBars_] {
        min-height: unset !important;
        padding-bottom: 4px;
    }
}
/* jump to present */
div[class^=jumpToPresentBar_] {
    left: 0; right: unset;
    border-radius: 0px 8px 0px 0px;
    background-color: var(--channeltextarea-background);
    > button[class^=barButtonMain_] {
        flex: 0 0 auto;
        display: none;
    }
}

/* Hide chat box if you have no permissions to write in the channel */
/* https://discord.com/channels/1015060230222131221/1028106818368589824/1249362290667556965 */
/*
form > div > div[class*=channelTextAreaDisabled_] {
    display: none !important;
}
*/