CSSSnippets.theme.css

/**
 * @name CSS Snippets
 * @author NIL
 * @version 0.0.0
 * @description A bunch of stuff taken from Vencord's CSS Snippets channel. I do not own anything!
 * @source https://github.com/NSPC911/vc-themes
*/

/* Show icons in Discord Settings */
@import url("https://gold-me.github.io/DiscordIcons/main.css");

/* User Gradient
   From: https://canary.discord.com/channels/1015060230222131221/1028106818368589824/1298575279169605693
   Heavily modified by me

:root {
  --gDM-online: 67, 181, 129;
  --gDM-offline: 99, 107, 117;
  --gDM-dnd: 240, 71, 71;
  --gDM-idle: 250, 166, 26;
  --gDM-streaming: 100, 61, 167;
  --gDM-border-radius: 50px;
  --gDM-opacity: 0.5;
}

#app-mount .mentioned__5126c:before {
  background-color: transparent !important;
  width: 0px;
  border: none;
}

[class*="interactiveSelected"] {
  background: transparent !important;
}

[class*="member"][class*="selected"] > div {
  background: transparent !important;
}

[class^="memberInner"] {
  border-radius: var(--gDM-border-radius);
  transition: background 1s ease-in-out;
  padding: 5px !important;
}

[class*="interactive"] {
  transform: translateX(3px);

  [class^="layout"] {
    transform: translateX(-3px);
  }
}

.clickable__91a9d:hover .childContainer__91a9d,
.interactive__972a0:hover {
  background-color: transparent !important;
  cursor: pointer;
}

[class*="interactive"] [class^="link_"],
[class*="member"][class*="container"] [class^="memberInner"] {
  background: linear-gradient(
    to right,
    rgba(var(--gDM-offline), var(--gDM-opacity)),
    transparent
  );
  border-radius: var(--gDM-border-radius) 0 0 var(--gDM-border-radius);
  width: -webkit-fill-available;
  transition: background 0.5s ease;

  > [class^="childContainer"] {
    padding: 0;
  }

  &:has(> div > [aria-label$="Online"]),
  &:has(> div > div > [aria-label$="Online"]) {
    background: linear-gradient(
      to right,
      rgba(var(--gDM-online), var(--gDM-opacity)),
      transparent
    ) !important;
  }
  &:has(> div > [aria-label*="Do Not Disturb"]),
  &:has(> div > div > [aria-label*="Do Not Disturb"]) {
    background: linear-gradient(
      to right,
      rgba(var(--gDM-dnd), var(--gDM-opacity)),
      transparent
    ) !important;
  }
  &:has(> div > [aria-label*="Idle"]),
  &:has(> div > div > [aria-label*="Idle"]) {
    background: linear-gradient(
      to right,
      rgba(var(--gDM-idle), var(--gDM-opacity)),
      transparent
    ) !important;
  }
  &:has(> div > [aria-label*="Streaming"]),
  &:has(> div > div > [aria-label*="Streaming"]) {
    background: linear-gradient(
      to right,
      rgba(var(--gDM-streaming), var(--gDM-opacity)),
      transparent
    ) !important;
  }
}
*/

/* Gradient Reply/Mention messages
   From: https://canary.discord.com/channels/1015060230222131221/1134844326933954622/1294823473390030890
[class*="messageListItem_"] {
  margin-left: 5px;
}

div[class*="cozy_"][class*="wrapper_"] {
  border-radius: 8px;
}

li[id^="chat-messages"]:has(> [class*="mentioned_"]),
li[id^="chat-messages"]:has(> [class*="replying_"]) {
  position: relative;
  border-radius: 8px;
  &::before {
    content: "";
    position: absolute;
    display: block;
    top: -5px;
    bottom: -5px;
    left: 0;
    right: 0;
    pointer-events: none;
    border-radius: 8px;
    width: 100%;
    pointer-events: none;
  }
  &:hover::before {
    opacity: 0.5;
  }
}

li[id^="chat-messages"]:has(> [class*="mentioned_"])::before {
  background: linear-gradient(
    to right,
    var(--background-mentioned),
    transparent
  ) !important;
  border-left: 0px solid var(--info-warning-foreground);
}

li[id^="chat-messages"]:has(> [class*="replying_"])::before {
  background: linear-gradient(
    to right,
    var(--background-message-highlight),
    transparent
  );
  border-left: 0px solid var(--brand-500);
}

li[id^="chat-messages"] [class^="message"] {
  background: none !important;
}

div[class*="repliedMessageSpine_"] {
  transition: none;
}
*/

/* Make the App Launcher disappear among a sea of butterflies */
.app-launcher-entrypoint {
  display: none !important;
}

/* Let the User Area elements breathe */
.panels__5e434 > .container__37e49 {
  height: unset !important;
  align-items: unset !important;
  padding: 6px 8px !important;
  flex-direction: column-reverse !important;
  gap: 2px !important;
}

.avatarWrapper__37e49 {
  margin-right: unset !important;
  margin-left: unset !important;
  padding-left: 4px !important;
}

_37e49614b9f110a9-avatarWrapper > [class*="buttons"] {
  justify-content: space-evenly !important;
}

/* space out the vc buttons */
.visual-refresh #app-mount [class*="voiceButtonsContainer"] {
  flex-direction: column;
  margin-left: var(--gap);
  margin-right: var(--gap);

  > button {
    margin: 0;
    width: fit-content;
    height: fit-content;
  }
}

/* fix vc buttons area */
.align-chat-input .rtcConnectionStatus__06d62,
.align-chat-input .connection_e131a9 {
  max-height: unset !important;
}
.ping__06d62 {
  display: none !important;
}

/* Hide chatbox when no access */
.channelTextAreaDisabled__74017 {
  display: none !important;
  opacity: 0 !important;
  position: absolute !important;
  height: 0px !important;
  width: 0px !important;
  z-index: 0 !important;
}

/* Fix long ass profiles */
[class*="userPopoutOverlayBackground"] {
  max-height: 60vh;
}

/* Blurred Background while loading */
.container_a2f514.fixClipping_efbae7 {
  background: 0 0 !important;
  backdrop-filter: blur(5px) !important;
}

/* Remove stickers and gifting */
.container_c0c49a:has(>[aria-label="Send a gift"]),
.buttons__74017
  > div:has(
    > div[aria-label="Open GIF picker"],
    > div[aria-label="Open sticker picker"]
  ) {
  display: none;
}

/* Hide recent activity */
.membersGroup_c8ffbb:has(> [role="button"]) {
  display: none;
  & + div:not([class]),
  & + div:not([class]) + div:not([class]),
  & + div:not([class]) + div:not([class]) + div:not([class]) {
    display: none;
  }
}

/* Hide typing dots in chat bar */
.ellipsis_b88801 {
  display: none !important;
  & + span {
    margin-left: 5px !important;
  }
}

.searchResultsWrap_a98f3b > .scroller_a98f3b {
  padding-left: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 0 !important;
  > #search-results {
    padding: 0 16px;
  }
}

.searchResultsWrap_a98f3b {
  max-width: 50%;
}

/* turn every text white on hover          *\
\* not really sure why i like this, but idk */
*:hover {
  color: white !important;
}

/* Memberlist Hover Visual Refresh
.container_c8ffbb,
[class*="membersWrap_"] {
  justify-content: unset;
  min-width: unset !important;
  width: calc(60px - var(--gap) - var(--gap));
  right: 0;
}

.container_c8ffbb {
  overflow: visible !important;
}

[class*="member_"] {
  right: 3px;
}

.memberInner__5d473,
.content__91a9d,
.membersGroup_c8ffbb {
  margin-left: 3px;
}

.memberInner__5d473 {
  margin-left: -6px;
}

[class*="membersWrap_"] [class*="members_"] {
  background-color: transparent;
  border-radius: var(--radius-lg);
}

[class*="membersWrap_"]:hover [class*="members_"] {
  transform: translateX(-196px);
  backdrop-filter: blur(2px);
}

[class*="membersWrap_"]:hover [class*="membersGroup_"] {
  overflow: visible;
}

[class*="membersWrap_"] [class*="membersGroup_"] {
  cursor: default;
  overflow: hidden;
} */

/* Smaller banner */
.notice__6e2b9 {
  z-index: 102;
  height: fit-content;
}

/* I prefer my font */
.visual-refresh #app-mount :is(pre, code, [class$="codeLine"]) {
  font-family: "CaskaydiaCove NF" !important;
}

/* Collapsed message buttons                                                                      *\
\* From: https://discord.com/channels/1015060230222131221/1028106818368589824/1329057978850086962 */
.textArea__74017 {
  margin-right: 32px;
  +.buttons__74017 {
    position: absolute;
    right: 0;
    background-color: color-mix(in oklab, var(--chat-background-default) 0%, transparent);
    backdrop-filter: blur(3px);
    border-radius: 8px 0 0 8px;
    &:not(:hover) > :not(:last-child) { display: none }
  }
}

/* RAINBOW THREAD                                                                                 *\
   NOT MINE! I SIMPLY UPDATED IT WITH THE CLASSES!
\* From: https://discord.com/channels/1015060230222131221/1134844326933954622/1452611600585461874 */
.content_d125d2 > li.container__5b40b > ul[role="group"] {
  > .spineBorder__5b40b {
    --step: calc(var(--channels-name-line-height) + 10px);
    background: var(--thread-muted, repeating-linear-gradient(
      #824e62 calc(var(--step) * 0),
      #824e62 calc(var(--step) * 1),
      #866251 calc(var(--step) * 1),
      #866251 calc(var(--step) * 2),
      #857a65 calc(var(--step) * 2),
      #857a65 calc(var(--step) * 3),
      #5c7a5e calc(var(--step) * 3),
      #5c7a5e calc(var(--step) * 4),
      #4d638b calc(var(--step) * 4),
      #4d638b calc(var(--step) * 5),
      #6e5c89 calc(var(--step) * 5),
      #6e5c89 calc(var(--step) * 6))
    )
  }
  > li {
    --interactive-hover: var(--thread-core, #f38ba8);
    --interactive-active: var(--thread-core, #f38ba8);
    & > svg {
      color: var(--interactive-muted);
    }
  }
  > li:nth-of-type(6n + 1) {
    --channels-default: var(--thread-default, rgba(243, 139, 168, 0.7));
    --text-primary: var(--thread-core, #f38ba8);
    --interactive-muted: var(--thread-muted, #824e62);
  }
  > li:nth-of-type(6n + 2) {
    --channels-default: var(--thread-default, rgba(250, 179, 135, 0.7));
    --text-primary: var(--thread-core, #fab387);
    --interactive-muted: var(--thread-muted, #866251);
  }
  > li:nth-of-type(6n + 3) {
    --channels-default: var(--thread-default, rgba(249, 226, 175, 0.7));
    --text-primary: var(--thread-core, #f9e2af);
    --interactive-muted: var(--thread-muted, #857a65);
  }
  > li:nth-of-type(6n + 4) {
    --channels-default: var(--thread-default, rgba(166, 227, 161, 0.7));
    --text-primary: var(--thread-core, #a6e3a1);
    --interactive-muted: var(--thread-muted, #5c7a5e);
  }
  > li:nth-of-type(6n + 5) {
    --channels-default: var(--thread-default, rgba(137, 180, 250, 0.7));
    --text-primary: var(--thread-core, #89b4fa);
    --interactive-muted: var(--thread-muted, #4d638b);
  }
  > li:nth-of-type(6n + 6) {
    --channels-default: var(--thread-default, rgba(203, 166, 247, 0.7));
    --text-primary: var(--thread-core, #cba6f7);
    --interactive-muted: var(--thread-muted, #6e5c89);
  }
  li:only-of-type {
    --channels-default: var(--thread-default, rgba(245, 194, 231, 0.7));
    --text-primary: var(--thread-core, #f5c2e7);
    --interactive-muted: var(--thread-muted, #836a81);
  }
}

/* Fix folder icons */
.folderHeaderSmall__48112 {
  --custom-folder-preview-padding: 4px;
}
.folderPreviewGuildIcon__48112 {
  border-radius: 50% !important;
  font-size: 6px !important;
  line-height: 16px;
}

/* fix gone timestamps */
span.timestampInline_c19a55 time {
  font-size: 0px;
}

h3 > .timestamp_c19a55 > span.hiddenVisually_b18fe2 {
  clip: unset;
  clip-path: unset;
  overflow: hidden;
  height: fit-content;
  position: relative;
}

/* hide back forward button */
.backForwardButtons__63abb {
  display: none !important;
}