quickcss.css

/*
  ---------  Nitro Annoyances  ---------
*/

/* Nitro gift button. Which? Hopefully all of them! */
div[aria-label="Send a gift"] {
  display: none;
}

/* Nitro ads in profile settings... */
#profile-customization-tab>[class*=container] {
  display: none;
}

/* "Profile effect (new) (exclusive to nitro)" */
#profile-customization-tab [class*=customizationSection]:has([class*=premiumFeatureBorder]) {
  display: none;
}

/* "Try out nitro!" */
#profile-customization-tab [class*=tryItOutSection] {
  display: none;
}

/* Super React buttons on message hover */
div[aria-label="Add Super Reaction"] {
  display: none;
}

/* Super react context menu button */
#message-add-reaction-1 {
  display: none;
}

/*
  Making the actual super reactions tolerable to look at,
  without outright removing them
*/

/* disable super reaction animation */
div[class*=effectsWrapper] {
  display: none;
}

/* discord sets the emoji's opacity to 0 during animation; set it back */
div[class*=effectsWrapper]+img[class*="hideEmoji"] {
  opacity: 1 !important;
}

/* disable shake */
div[class*=reaction] {
  /* other methods I tried still gave it time to play for a frame */
  animation-delay: 9999s !important;
}

/* disable glow effect */
div[class*="burstGlow"] {
  display: none;
}

/*
 "Want to start the hype train? Get Nitro and SHOVE IT UP YOUR [redacted]"
 (...When hovering over a super reaction.)
 */
[class*=reactionTooltip] [class*=burstReactionTooltipPrompt] {
  display: none;
}

/* Won't be needing this spacer anymore */
[class*=reactionTooltip] [class*=burstReactionTooltipSpacer] {
  padding-bottom: unset;
  margin-bottom: unset;
  border-bottom: unset;
}

/*
  Superfluous buttons in the direct messages window

  Personally, I have no intention of engaging with any of these buttons,
  but if you do, just comment these out.
*/

/* Nitro button */
ul[aria-label="Direct Messages"] li:has(a[href="/store"]) {
  display: none;
}

/* Shop button */
ul[aria-label="Direct Messages"] li:has(a[href="/shop"]) {
  display: none;
}

/* Quests button */
ul[aria-label="Direct Messages"] li:has(a[href="/quest-home"]) {
  display: none;
}


/* Hide profile Nameplates */
div[role="listitem"] div[class*=nameplated]>div[class*=container] {
  display: none;
}


/*
  Remove fancy nitro-colored background gradients.
  I don't like these.
*/
div[class*=gradientBackground],
div[class*=pulseGradient] {
  display: none;
}


/*
  The "Merch" option in settings immediately
  opens a browser tab without confirmation.
  This one in specific can fuck right off.
*/
nav>div[aria-label="User Settings"]>div[aria-label="Merch"] {
  display: none;
}


/*
  ---------  Distractions  ---------
*/

/*
  Sticker picker button.
  You can literally open the GIF picker and switch
  to the sticker picker. I don't need the space this takes.
*/
div.expression-picker-chat-input-button:has(> div[aria-label="Open sticker picker"]) {
  display: none;
}

/*
  Apps launcher button.
  Nope, not engaging with this slop. Goodbye.
*/
.app-launcher-entrypoint {
  display: none;
}

/* "Turn On Camera" button in voice call window */
div[class*="callContainer"] div[class*="attachedCaretButtonContainer"]:has(button[aria-label="Turn On Camera"]) {
  display: none;
}

/* "Start Activity" button in voice call window */
div[class*="callContainer"] div:has(>div[aria-label="Play Activities here"]) {
  display: none;
}

/*
  Removes buttons from the voice channel action bar; I don't intend
  to use some of these, so comment/uncomment each at your own taste
*/
section[aria-label="User status and settings"] div[class*=actionButtons],
section[class*=panels] div[class*=actionButtons] {
  /*
    All of these selectors are flaky, so this time I even made alternatives;
    with luck, at least one of them will hold for each button before I need to adjust this again
    ...Though using nth-of-type might cause further problems depending on how they change this in the future...
  */

  /* Camera Button */
  &>button[aria-describedby=«re3h»],
  >button:nth-of-type(1),
  >button:has(g[clip-path="url(#__lottie_element_8565)"]) {
    display: none;
  }

  /* Screenshare Button */
  /*
  &>button[aria-describedby=«re3i»],
  >button:nth-of-type(2),
  >button:has(g[clip-path="url(#__lottie_element_8604)"]) {
    display: none;
  }
  */

  /* "Start an Activity" Button */
  &>button[aria-describedby=«re3j»],
  >button:nth-of-type(3),
  >button:has(g[clip-path="url(#__lottie_element_8656)"]) {
    display: none;
  }

  /* Soundboard Button (Why does this one have to be different??) */
  /*
   Note: The "Open Soundboard" span has `id=«re3k»`, but for this
   button they forgot to specify it in the `aria-describedby` field;
   In case they ever notice this, I included the selector which would match it
  */
  /*
  &>button[aria-describedby=«re3k»],
  >span:nth-of-type(4),
  >span:has(g[clip-path="url(#__lottie_element_8674)"]) {
    display: none;
  }
  */
}

/*
  Remove green gradient on the container of the voice channel you're on. Seems to be an A/B test.
  I find this to be much more distracting than useful.
*/
ul[aria-label="Channels"] li[class*=voiceChannelHighlightContainer] div[class*=voiceChannelHighlight] {
  display: none;
}

/*
  Hide "Discover" servers button
  Flakey rule but meh. It should be obvious when this breaks.
*/
nav div[aria-label="Servers"]+div+div[class*=listItem] {
  display: none;
}

/*
  Hide "Server Boosts" button on the left-side channel bar header.
  Seems to only show up when you're admin for a server with active boosts
  or something; But this can be also accessed from the server settings menu
  and I do not need the extra visual bloat this adds.
*/
ul[aria-label="Channels"]>li:has(div[aria-label="Server Boosts"]) {
  display: none;
}


/*
  ---------  Below are rules related to making the  ---------
  --------- visual refresh more bearable to my eyes ---------
*/


/*
  Using this class might not stick for too long
  since I have a feeling that discord will remove it
  as they phase out the visual refresh
  Still, for now it makes some tuning very easy.
*/
.visual-refresh {
  /*
    Reducing size of that massive title bar.
    Now the buttons look a bit too big, but I don't care.
    It was SO eye-catching.
  */
  --custom-app-top-bar-height: calc(14px + var(--space-sm));
  /*
    Reducing dead space on chat bar.
    The one where you type your message in.
  */
  --custom-channel-textarea-text-area-height: 40px;
  /*
    Reducing size of the member list, on the right side.
  */
  --custom-member-list-width: 250px;
}

/*
  Greatly reducing padding on the right-side members bar
  Suddenly there's so much less wasted space!

  The Members list is a <div> in a regular channel and a <ul> in a threads window. Great.
  I'm using that <main> element as an anchor because I don't like the idea of
  a lone *[aria-label=] selector trying to match literally everything in the DOM
*/
div:has(> main[class*="chatContent"]) *[aria-label="Members"]>[class*=membersGroup] {
  padding-left: 10px;
}

div:has(> main[class*="chatContent"]) *[aria-label="Members"]>div[role="listitem"] div[class*=childContainer] {
  padding-inline: 0;
}

div:has(> main[class*="chatContent"]) *[aria-label="Members"]>div[role="listitem"] div[class*=memberInner] {
  padding-inline: 0px;
  /* Tweak this for more or less vertical gap between members */
  padding-block: 3px;
}

/*
  Reducing the size and padding of the new input bar;
  and moving the typing indicator back below it.

  They moved the typing indicator to above the input bar,
  but had to leave a massive amount of empty spacing above
  the bar while the indicator isn't present. I'd rather have the old one.
*/
html main[class*="chatContent"] {

  /*
    This div was pushing up the height of the chat textarea,
    despite the CSS variable they themselves declared.
  */
  &>form div[class*="attachWrapper"] {
    padding-block: 0;
    height: var(--custom-channel-textarea-text-area-height);
    /*
      Make the button vertically centered after removing padding.
      It was only centered before thanks to the exact pixel value on the padding.
      Sloppy work. I know it's an experiment, but still.
    */
    display: flex;
    align-items: center;
    /*
      Make it stick to the top of the text area again;
      It only did so before because of `height: unset` and `align-self: stretch`, but we broke that now
    */
    position: sticky;
    top: 0;
  }

  /*
    They put this spacer here after moving the "User is typing" thing to above the chatbar, instead of below.
    I get the intention; it was a little bit unnatural to have it under the chatbar,
    but leaving so much room reserved for it is even worse, it feels like an entire message's worth of dead space
  */
  & div[class*="scrollerSpacer"] {
    /* was 44px before - WAY TOO MUCH EMPTY SPACE */
    height: 30px;
  }

  /* Bringing the "User is typing" indicator to be under the chat bar again */
  &>form div[class*="typing"] {
    top: unset !important;
    bottom: -16px !important;
  }

  /* Making room for the typing indicator below the chatbar again */
  &>form {
    /*
      With the current chatbar height, the top border lines up
      perfectly with the top border of the "User Area" section on the left
    */
    margin-bottom: 16px;
  }
}