Custom CSS for BetterDiscord / Replugged / Vencord.

custom.css

@import url(//dablulite.github.io/css-snippets/BetterFloatingEditor/import.css);
/* @import url(//dablulite.github.io/css-snippets/SuperUserArea/import.css); */
@import url(//fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&display=swap);
/* @import url(//markchan0225.github.io/RoundedDiscord/RoundedDiscord.theme.css); */
@import url(//raw.githubusercontent.com/Panniku/vc-snippets/main/tabsv2_desktop.css);
@import url(//minidiscordthemes.github.io/SettingsIcons/SettingsIcons.theme.css);
@import url(//lazuee.github.io/css-snippets/discord/channel-list-toggle/import.css);

/* Includes variables */
:root {
  --server-unread-colour: 255, 255, 255;
  --server-hover-colour: 255, 255, 255;
  --server-selected-colour: var(--accent, 0, 231, 169);
  --server-spacing: 16px;
  --server-glow-intensity: 1;
  --blurple: #576aed;
  --grey:#252629;
  --lightgrey:#323438;
  --darkgrey:#17181a;
  --red:#eb4148;
  --blurple-gradient: linear-gradient(0deg, rgba(37,38,41,1) 0%, rgba(87,106,237,1) 70%);
  --darkgrey-gradient: linear-gradient(0deg, rgba(37,38,41,1) 0%, rgba(23,24,26,1) 100%);
  --radius: 10px;
  --font-primary: Karla, ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; 
}

/*.theme-dark {
  --background-primary: #2b2b2b;
  --background-secondary: #2c2c2c;                   
  --background-tertiary: #1e1e1e;           
  --border-primary: #5c5c5c;         
  --border-secondary: #c0c0c0;
}

 .theme-light {
  --background-primary: #fef7ff;
  --background-secondary: #fce8ff;
  --background-tertiary: #e7c3f0;
  --border-primary: #a062ac;
  --channeltextarea-background: #f8e8ff;
  --background-secondary-alt: #ffe8ff;
} */

/* Blurple Mention Highlight */
.theme-dark, .theme-light {
  --background-mentioned: var(--background-message-highlight) !important;
  --background-mentioned-hover: var(--brand-experiment-10a) !important;
}
[class*="replying"]:before,
[class*="mentioned"]:before {
  background-color: var(--brand-500);
  border-radius: 16px !important;
}
/* Replaces the color of the reply and thread lines */
[class*="replying"] [class*="repliedMessage"]:before,
[class*="mentioned"] [class*="repliedMessage"]:before,
[class*="replying"][class*="hasThread"]:after,
[class*="mentioned"][class*="hasThread"]:after {
  border-color: var(--brand-500);
}
/* Replaces the color of the timestamps */
[class*="replying"] .timestamp-p1Df1m,
[class*="mentioned"] .timestamp-p1Df1m {
  color: var(--text-brand) !important;
}

img[class*="vatar"] {
    border-radius: 20% !important;
}

div[class="tutorialContainer_dc6fde"],
div[class="listItem_fa7b36"]:has(div[class="pill__13f64"]),
[aria-label='Send a gift'],
[class*='stickerButton'],
[class^="channel-"] > div > [href="/store"], /* Nitro Button above DM List */
[class^="channelTextArea"] [class^="buttons-"] > button, /* Gift Button */
[class^="upsellVisible-"], /* Banner Nitro Upsell Header in the user modal */
[class^="premiumIconWrapper"], /* Nitro Icon in top right on Banners */
[class^="characterCount-"] [class*="upsell-"], /* "Send longer Messages with Discord Nitro!" */
[class^="emojiSection-"] [class*="shinyButton-"] /* "Get Nitro" button in Emoji/Sticker modal" */
{
    display: none !important;
}

.timestamp-p1Df1m:not(.timestampInline-_lS3aK, .timestampVisibleOnHover-9PEuZS) time::after {
        content: " (" attr(aria-label) ")";
        color: var(--text-muted);
        font-size: 0.625rem;
        font-weight: 400;
        line-height: 1;
        text-transform: lowercase;
}

.edited-1v5nT8:not(.message-translate-indicator) {
    display: none;
}

/* SUPER REACTIONS */

/* removes a bunch of stuff */
[class^="message-"] div[aria-label*="super" i]:has([class^="icon-"]),
[class^="reactButtons-"] > div[aria-label*="super" i],
[class^="reactionInner-"] [class^="effectsWrapper-"],
[class^="burstReactionTooltipPrompt-"],
[class^="burstEmojiSection-"],
[class*="colorPremiumGradient-"],
button[id="super-reaction-picker-tab"],
[class^="burstGlow-"] {
  display: none;
}
/* makes super reactions not disappear on hover */
[class*="hideEmoji-"] {
  opacity: 1;
}
/* removes stuff from emoji hover popup */
[class*="burstReactionTooltipSpacer-"] {
  border: none !important;
  padding: 0px;
  margin: 0px;
}
/* makes background color the same as normal reactions in "show reactions" tab*/
[class^="reactionSelected-"] {
  background: var(--background-tertiary) !important;
}
/* disables clicking */
[class^="reactionInner-"]:is([aria-label*=" super " i]) {
  pointer-events: none;
}
/* removes shake animation */
[class*="shakeReaction-"] {
  animation: none !important;
}
div[aria-label='Add Super Reaction'] { display: none }

/* Make jump to present/jump to original/mark as read bars smaller and hug the right */
.barBase__4e0ba {
  width: fit-content;
  margin-left: auto;
}

/* hover animations */
button.button__4f306 /* make user panel buttons round */ {
    border-radius: 50%;
}
.button__4f306:last-child /* settings button */, 
.attachButton_b1db83 .attachButtonInner__3ce2b /* upload button */,
.emojiButton__30ec7 .contents_fb6220 /* emoji button */,
.closeButton__34341 /* settings exit button */ {
    transition: transform 1s ease;
}
.button__4f306:last-child:hover,
.attachButton_b1db83:hover .attachButtonInner__3ce2b,
.emojiButton__30ec7:hover .contents_fb6220,
.closeButton__34341:hover {
    transform: rotate(360deg);
}

/* Remove the eye-cancer Discord calls "profile effects" */
[class*="profileEffects-"] {
    display: none;
}

/* Match channel text area to user container */
.form__13a2c {
  padding: 0;
}
.channelTextArea__2e60f {
  margin: 0;
}
.scrollableContainer__33e06 {
  border-radius: 0;
}
.inner__9fd0b {
  min-height: 48px;
  padding-top: 4px;
}
.typing__6fd1d {
  top: -24px;
  left: 0px;
  width: fit-content;
  padding-right: 9px;
  border-radius: 0 8px 0 0;
  background: var(--bg-overlay-3,var(--channeltextarea-background));
}
.container_ca50b9 {
  margin: 0;
}

/* Settings as Modal */
[class^=standardSidebarView_]
 { backdrop-filter: blur(30px);
   top: 0 !important;
   opacity: 1 !important; }
.layer__2efaa + .layer__2efaa
 { border-radius: var(--radius) !important;
   background: oklch(.2 0 0 /.5) !important;
   box-shadow: 1px 1px 10px 0.1px !important;
   width: 1100px !important;
   height: 75vh !important;
  border: 3px solid oklch(0 0 0 / 1);
   margin: auto !important;
   padding: 0 !important;
   opacity: 1 !important;
   transform: unset !important; }
#app-mount .baseLayer__8fda3 /*keep view under settings*/
 { opacity: 1 !important;
   transform: unset !important; }
.layer__2efaa[aria-hidden="false"] + .layer__2efaa[aria-hidden="false"]
 { display: none; } /*fixes closing delay*/
.layers__1c917>.layer__2efaa.animating__27211
 { will-change: unset !important; }
 .sidebarRegionScroller__1fa7e, .contentRegion__0bec1, .contentRegionScroller__86c79 { background: transparent !important; }