Skip to content

Instantly share code, notes, and snippets.

@qyurila
Last active April 19, 2024 19:55
Show Gist options
  • Save qyurila/f82e1b4719b156e7710d64fcd07f4c09 to your computer and use it in GitHub Desktop.
Save qyurila/f82e1b4719b156e7710d64fcd07f4c09 to your computer and use it in GitHub Desktop.
A personal Vencord custom QuickCSS: Pretendard font + SimpleEnhancements tweak
/* REVERT */
/* Old Icons */
@import url(https://davart154.github.io/Themes/Icon%20Revert%202023/2023%20Icon%20Revert.css);
/* FONTS */
/* Import Pretendard Variable */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-jp.min.css");
/* Fix - Source from Old Discord Font: https://github.com/Overimagine1/old-discord-font */
:root {
--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", "D2Coding Ligature", Arial, monospace;
}
:lang(ko),
:root {
--font-code: "JetBrains Mono", "D2Coding Ligature", Arial, monospace;
}
: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;
}
/* Revert MinimalCord's overriding font - 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 */
/* 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(--channels-default) !important;
}
/* Remove Unnecessary Buttons */
div[class*='attachWrapper__'],
button[aria-label="선물 보내기"],
button[aria-label="Send a gift"] {
display: none;
}
#channels div[class*='linkTop_'] div[aria-label='Create Invite'],
#channels div[class*='linkTop_'] div[aria-label='초대 코드 만들기'] {
display: none;
}
div[class*='toolbar__'] div[aria-label='Notification Settings'],
div[class*='toolbar__'] div[aria-label='알림 설정'] {
display: none;
}
/* Make Unread Channel Icon Distinguished */
div[class*='modeUnreadImportant_'] svg[class*='icon_eff5d4'],
div[class*='modeUnreadImportant_']:hover svg[class*='icon_eff5d4'] {
color: var(--interactive-normal);
}
/* SIMPLE_ENHANCEMENTS */
/**
* @name SimpleEnhancements
* @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.2
* @website https://github.com/ikeman2003/BetterDiscordEnhancements
*/
/* Spin Discord Home Button on click */
/* ANCHOR settings/deafen/mute buttons animated */
div[class*='horizontal__'] button[class*='button__'] {
transition: .2s;
}
div[class*='horizontal__'] button[class*='button__']:hover {
transform: scale(1.14);
transition: .1s;
}
div[class*='horizontal__'] button[class*='button__']:hover path {
fill: #FFFFFF;
}
/* Pop-out Animation */
/* ANCHOR Uses Popup animation on Channel DM's (plugin) and channel list */
div[class*='scrollerBase_'] {
animation: custom-menu-animation .15s ease; /* 250ms */
transform-origin: top;
}
@keyframes custom-menu-animation {
0% {
transform: translateX(-20px); /* scaleY(0); */
opacity: 0;
}
100% {
transform: translateX(0px); /* scaleY(1); */
opacity: 1;
}
}
/* Emoji Auto-Fill Animation */
/* ANCHOR Better Jump To Present Button */
[class*="jumpToPresentBar__"] {
display: contents;
}
[class*="jumpToPresentBar__"] > button:first-child {
display: none;
}
[class*="jumpToPresentBar__"] > 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;
}
[class*="jumpToPresentBar__"] > button svg {
order: -1;
margin: 0px;
width: 24px;
height: 24px;
top: auto;
color: #FFFFFF;
transition: margin .6s;
}
[class*="jumpToPresentBar__"] > button {
color: #FFFFFF !important;
}
[class*="jumpToPresentBar__"]:hover > button {
padding: 8px 18px !important;
font-size: 14px;
transition: font-size .2s, color .2s .1s, padding .4s;
}
[class*="jumpToPresentBar__"]:hover > button svg {
margin-left: -6px;
margin-right: 2px;
}
/* Jump to Present+ by Lonk#6942 */
/* ANCHOR Messages Slide In Chat */
@keyframes slide-up {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
.message__80c10 {
animation: slide-up .25s ease; /* 0.4s */
}
/* ANCHOR Remove Help Icon Button */
div[class*='toolbar__'] [aria-label="Help"],
div[class*='toolbar__'] [aria-label="도움말"] {
display: none;
}
/* Move the Search Bar to the top right */
/* Chat Box Buttons Animated */
/* ANCHOR Animation on channel select */
#channels li[class*='selected__'] div[class*='linkTop_'] {
animation: UserChannelButtons .4s normal ease; /* 0.5s */
}
@keyframes UserChannelButtons {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(3px); /* 5px */
}
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 */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment