Custom Discord styles

discord-custom.css

:root {
  --font-family: "Lato-Regular", "Helvetica Neue", Helvetica, "Segoe UI", -apple-system, BlinkMacSystemFont, Tahoma, Arial, sans-serif;
  --message-max-width: 50rem;
  --theme-light-message-color: #23262a;
  --avatar-border-radius: 3px;
  --sidebar-width: 70px;
  --sidebar-icon-width: 35px;
  --sidebar-icon-border-radius: 8px;
  --channel-bar-width: 180px;
  --channel-bar-item-height: 1.5rem;
  --breakpoint: 1100px;

  --message-padding: 8px;
  --username-weight: 900;
  --mention-color: #F04747;
  --mention-bg-color: #FDF2F1;
  --link-color: #4A7CF6;
  --inline-code-bg-color: #e3e4e7;
  --code-block-bg-color: #2f3136;
  --code-block-color: #dcddde;
  --ui-border-color: rgba(32,34,37,.3);
  --scrollbar-color: #898989;
}


/* Font */
#app-mount,
#app-mount textarea {
  font-family: var(--font-family) !important;
}


/* Light theme text color */
.theme-light [class*="containerCozy-"] [class*="contentCozy-"] [class*="markup-"] {
  color: var(--theme-light-message-color) !important;
}


/* Message */
[class*="containerCozyBounded-"] {
  padding-bottom: var(--message-padding);
  padding-top: var(--message-padding);
}


/* Username */
[class*="username-"] {
  font-weight: var(--username-weight);
}


/* Mentions */
[class*="mention"] {
  background-color: var(--mention-bg-color) !important;
  color: var(--mention-color) !important;
}
[class*="mention"]:hover {
  background-color: var(--mention-color) !important;
  color: #FFFFFF !important;
}
[class*="isMentioned-"] [class*="mention"]:hover {
  color: var(--mention-color) !important;
}


/* Links */
.theme-light [class*="markup-"] a {
  color: var(--link-color);
}


/* Dark Code Block */
.theme-light [class*="markup-"] code.inline {
  background: var(--inline-code-bg-color);
  padding: 2px 4px;
}

.theme-light [class*="markup-"] pre {
  background: var(--code-block-bg-color);
  border-color: var(--ui-border-color);
}

.theme-light [class*="markup-"] code:not(.inline) {
  background: var(--code-block-bg-color);
  color: var(--code-block-color);
}


/* Message Content Width */
@media (min-width: 1100px) {
  [class*="containerCozy-"] [class*="contentCozy-"] {
      max-width: var(--message-max-width);
  }
}


/* Avatar */
[class*="avatar-"] [class*="image-"] {
  border-radius: var(--avatar-border-radius) !important;
}


/* Text Input */
[class*="channelTextArea-"] {
  padding-top: 0;
  border-top: 0 !important;
  margin-bottom: 10px !important;
}
[class*="innerNoAutocomplete-"],
[class*="titleWrapper-"] [class*="searchBar-"] {
  border: solid 2px var(--ui-border-color);
}

.theme-light [class*="inner-"],
.theme-light [class*="titleWrapper-"] [class*="searchBar-"]  {
  background-color: #ffffff;
}
.theme-light [class*="textArea-"],
.theme-light [class*="titleWrapper-"] [class*="searchBar-"]  {
  color: var(--theme-light-message-color);
}
[class*="DraftEditorPlaceholder-root"] {
  padding-top: 1px !important;
}
[class*="searchBar-"] [class*="icon-"] {
  top: -0.5px !important;
}
[class*="DraftEditorPlaceholder-inner"],
textarea::placeholder {
  color: var(--theme-light-message-color) !important;
  opacity: 0.45 !important;
}


/* Scrollbar */
[class*="scroller-"]::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color) !important;
}


/* Channel Bar Widths */
[class*="channels-"] {
  width: var(--channel-bar-width);
  transition: width .1s ease-out;
}


/* Hide Channel Bar */
@media (max-width: 1100px) {

  [class*="channels-"] {
    width: 0;
  }

  [class*="guildsWrapper"]:hover + div > :nth-child(2) > [class*="channels-"],
  [class*="channels-"]:hover {
    position: relative;
    width: var(--channel-bar-width);
  }

  /* Invisible Area Besides Channel Bar */
  [class*="channels-"]::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 3rem;
  }
}

/* Channel Bar Items */
[class*="channels-"] [class*="wrapper-"] {
  height: calc(var(--channel-bar-item-height) + 2px);
  overflow: visible;
}

[class*="channels-"] [class*="content-"] {
  height: var(--channel-bar-item-height);
}

[class*="channels-"] [class*="name-"] {
  line-height: var(--channel-bar-item-height);
  font-size: .9rem;
}


/* Sidebar */
[class*="guildsWrapper"] {
  width: var(--sidebar-width);
}

[class*="guildsWrapper"] [class*="scrollerWrap"] {
  width: calc(var(--sidebar-width) + 18px);
}

[class*="guildsWrapper"] [class*="scroller-"] {
  padding-right: 0;
}


/* Sidebar Icons */
[class*="systemPad-"] [class*="guildInner"] {
  border-radius: var(--sidebar-icon-border-radius) !important;
}

/* Center Sidebar Items */
[class*="guildsWrapper"] [class*="guildInner-"],
[class*="guildsWrapper"] [class*="guildsAdd-"] {
  transform: translateX(8px);
}


[class*="guildsWrapper"] [class*="iconSizeLarge"],
[class*="guildsWrapper"] [class*="guildInner-"] a,
[class*="guildsWrapper"] [class*="guild-"],
[class*="guildsWrapper"] [class*="avatar-"] {
  width: var(--sidebar-icon-width) !important;
  height: var(--sidebar-icon-width) !important;
  line-height: var(--sidebar-icon-width) !important;

}

[class*="guild-"] + [class*="guild-"] {
  margin-top: 12px !important;
}

[class*="guildsWrapper"] [class*="friendsOnline-"] {
  width: calc(var(--sidebar-icon-width) + 16px) !important;
}

[class*="guildsWrapper"] [class*="guildsAdd-"] {
  display: block;
  height: calc(var(--sidebar-icon-width) / 2);
  border: none;
}


[class*="guildsWrapper"] button[class*="guildsAdd-"] {
  margin-top: 20px !important;
}



/* Sidebar Separators */
[class*="guildsWrapper"] [class*="guildSeparator-"],
[class*="guildsWrapper"] [class*="downloadAppButton-"]::after {
  display: none;
}


/* Download Apps Button */
[class*="guildsWrapper"] [class*="downloadAppButton-"] {
  width: 100%;
  margin-top: 20px;
  margin-left: -4px;
  padding: 0;
  font-size: 8px;
}

[class*="guildsWrapper"] [class*="downloadAppButton-"] > svg {
  display: none;
}

[class*="base-"] {
  border-radius: 0 !important;
}