Mij_Discord theme

Mij_Discord.theme.css

/**
 * @name Mij_Discord
 * @version 0.4
 * @author Mijyuoon
 * @description Mijyuoon's simple Discord theme
*/
.markup__75297,
.placeholder__1b31f,
.autocompleteRowHeading__13533 {
  font-size: 0.875rem !important;
  line-height: 1.4em !important;
}
.markup__75297 > code.inline,
.markup__75297 code:not(.inline),
.codeView__4d95d {
  font-size: 0.75rem !important;
  line-height: 1.2em !important;
}
.embedTitle__623de,
.embedDescription__623de,
.embedFieldName__623de,
.embedFieldValue__623de,
.embedProvider__623de,
.embedAuthorName__623de,
.embedFooterText__623de {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}
.avatar_c19a55,
.avatar__44b0c,
.avatarSpeaking_xxxxxx,
.avatar__183c2,
.avatar__07f91,
.voiceAvatar_xxxxxx,
.border_xxxxxx,
.avatarContainer_xxxxxx,
.replyAvatar_c19a55,
.executedCommandAvatar_c19a55,
.threadMessageAccessoryAvatar_c19a55,
.replyBadge_c19a55,
.icon__6e9f8,
.iconInactive_f34534,
.iconActiveMedium_f34534,
.guildIcon__0fa6d,
.embedAuthorIcon__623de,
.embedFooterIcon__623de,
.voiceSectionGuildImage__00943,
.gameIcon_bf1a22 {
  border-radius: 15% !important;
}
.wrapperSimple_cc5dd2,
.wrapper__44b0c {
  border-radius: 0 !important;
}
.appMount__51fd7 > svg > mask[id^="svg-mask-avatar-"] [fill="white"],
.appMount__51fd7 > svg > mask[id^="svg-mask-voice-"] [fill="white"],
.appMount__51fd7 > svg > mask[id^="svg-mask-squircle"] [fill="white"],
svg.svg__44b0c > mask [fill="white"],
svg.svg_cc5dd2 > mask [fill="white"] {
  transform: scale(3) translate(-33%, -33%) !important;
}
.svg_d48241 {
  contain: unset !important;
}
.voiceSectionGuildImage__00943,
.avatars_ef4a91 > .avatar_ef4a91 {
  mask: none;
  -webkit-mask: none;
}
.message__5126c,
.message__1ccd1 {
  padding-top: 0.05rem !important;
  padding-bottom: 0.05rem !important;
  min-height: unset !important;
}
.message__5126c .messageContent_c19a55:not(:empty),
.message__1ccd1 .messageContent_c19a55:not(:empty) {
  min-height: 1.1rem !important;
}
.message__5126c .timestamp_c19a55,
.message__1ccd1 .timestamp_c19a55 {
  height: 1.1rem !important;
  line-height: 1.1rem !important;
}
.chatContent_f75fb0 :not(.hasContent__5126c) + .messageListItem__5126c > .groupStart__5126c,
.chatContent_f75fb0 :not(.hasContent__5126c) + .groupStart__5126c {
  margin-top: 0.25rem !important;
}
.chatContent_f75fb0 :not(.hasContent__5126c) + .messageListItem__5126c > .groupStart__5126c:before,
.chatContent_f75fb0 :not(.hasContent__5126c) + .groupStart__5126c:before {
  content: "" !important;
  display: block !important;
  height: 0.25rem !important;
  margin-left: -56px !important;
  margin-right: -32px !important;
  border-top: 1px solid rgba(255,255,255,0.15) !important;
}
.chatContent_f75fb0 :not(.hasContent__5126c) + .messageListItem__5126c > .groupStart__5126c:not(.message__5126c):before,
.chatContent_f75fb0 :not(.hasContent__5126c) + .groupStart__5126c:not(.message__5126c):before {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
.chatContent_f75fb0 :not(.hasContent__5126c) + .messageListItem__5126c > .groupStart__5126c.replying__5126c,
.chatContent_f75fb0 :not(.hasContent__5126c) + .groupStart__5126c.replying__5126c {
  padding-top: calc(0.3rem + 1px) !important;
}
.chatContent_f75fb0 :not(.hasContent__5126c) + .messageListItem__5126c > .groupStart__5126c.replying__5126c:before,
.chatContent_f75fb0 :not(.hasContent__5126c) + .groupStart__5126c.replying__5126c:before {
  margin: unset !important;
  height: unset !important;
}
.divider__5126c.hasContent__5126c {
  margin-top: 0.75rem !important;
  margin-bottom: 0 !important;
}
.divider__5126c.hasContent__5126c:not(.isUnread__908e2) {
  border-color: rgba(255,255,255,0.15) !important;
}
.divider__5126c.hasContent__5126c .content__908e2 {
  border: 1px solid !important;
  border-color: inherit !important;
}
.divider__5126c.beforeGroup__5126c {
  top: calc(0.25rem + 1px) !important;
}
.groupStart__5126c {
  margin-top: 0.5625rem !important;
}
.messageContainer__1ccd1:first-child > .groupStart__5126c {
  margin-top: 0 !important;
}
.scrollerSpacer__36d07 {
  height: 12px !important;
}
.bottomBar__0f481 {
  padding-bottom: 0 !important;
}
.form_f75fb0 {
  margin-top: 0px !important;
  padding: 8px 8px 0 8px !important;
  border-top: 1px solid rgba(255,255,255,0.15) !important;
}
.mask__68edb > foreignObject {
  mask: none;
  -webkit-mask: none;
}
:root .avatar__75742,
:root .avatar__1fed1,
:root .avatar_f9d668 > .wrapper__44b0c {
  box-sizing: content-box !important;
  border: 2px solid #2f3136 !important;
  border-radius: calc(15% + 2px) !important;
  background-color: #202225 !important;
}
:root .avatar__75742 svg.svg__44b0c circle,
:root .avatar__1fed1 svg.svg__44b0c circle,
:root .avatar_f9d668 > .wrapper__44b0c svg.svg__44b0c circle {
  opacity: 0 !important;
}
.pill_dfa8b6 {
  border-radius: 4px !important;
  border-width: 1px !important;
}
.pill_dfa8b6 .roleCircle_dfa8b6 {
  border-radius: 2px !important;
}
.folder__48112,
.folderIconWrapper__48112,
.childWrapper__6e9f8,
.circleIconButton__5bc7e {
  border-radius: 15% !important;
}
.childWrapper__6e9f8 {
  overflow: hidden !important;
}
.expandedFolderBackground__48112 {
  background-color: transparent !important;
  border-radius: 7.2px !important;
}
.expandedFolderBackground__48112.hover__48112 {
  outline: 2px dashed #728ada !important;
  min-height: 48px !important;
}
.footer__214dc {
  display: none;
}
.roundButton_c15210,
.actionButton_f8fa06,
.circleButton__5f97b,
.button_fb7f94.banner_fb7f94,
.button__06eda {
  border-radius: 15% !important;
}
.hoverButtonGroup_d0395d {
  outline: none !important;
  border: 1px solid #202225 !important;
  border-radius: 5px !important;
}
.imageUploaderIcon_de76e4 {
  display: none !important;
}
.replying__5126c:before {
  width: 5px !important;
  border-top-left-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
  background-color: #7289da !important;
}
.mentioned__5126c:not(.replying__5126c):before {
  width: unset !important;
  position: unset !important;
  background-color: unset !important;
}
.mentioned__5126c:not(.replying__5126c):after {
  content: "" !important;
  display: block !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  position: absolute !important;
  width: 5px !important;
  border-top-left-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
  background-color: #faa61a !important;
}
.embedFull__623de {
  border-left-width: 8px !important;
}
.embedFull__623de .grid__623de {
  padding: 8px !important;
}
.embedFull__623de .embedMargin__623de {
  margin-top: 6px !important;
}
.embedFull__623de .embedMargin__623de:first-child {
  margin-top: 0 !important;
}
.embedFull__623de .embedSuppressButton__623de + .embedMargin__623de {
  margin-top: 0 !important;
}
.embedFull__623de .embedMedia__623de {
  margin-top: 8px !important;
}
.messages__1ccd1,
.messageContainer__95796,
.searchResult_ddc613 {
  padding: 4px !important;
}
.messages__1ccd1 .cozy_c19a55.wrapper_c19a55,
.messageContainer__95796 .cozy_c19a55.wrapper_c19a55,
.searchResult_ddc613 .cozy_c19a55.wrapper_c19a55 {
  padding-left: 54px !important;
}
.messages__1ccd1 .cozy_c19a55.wrapper_c19a55 .avatar_c19a55,
.messageContainer__95796 .cozy_c19a55.wrapper_c19a55 .avatar_c19a55,
.searchResult_ddc613 .cozy_c19a55.wrapper_c19a55 .avatar_c19a55 {
  left: 4px !important;
}
.recentMentionsPopout__95796 div:not(:last-child) > .channel__427f0 {
  padding-bottom: 0 !important;
}
.recentMentionsPopout__95796 .container__95796:not(:last-child) {
  margin-bottom: 0px !important;
}
.zalgo_c19a55 .messageContent_c19a55,
.zalgo_c19a55 .header_c19a55 {
  overflow: unset !important;
}
.repliedTextPreview_c19a55 {
  max-height: 1.371428571428571rem !important;
  vertical-align: middle !important;
}
.attachButton__0923f {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.buttons__74017 button[aria-label*="gift"],
.buttons__74017 div[aria-label*="Nitro"] {
  display: none !important;
}
:root {
  --custom-channel-textarea-text-area-height: calc(32px + var(--space-xs)) !important;
}
:root .textArea__74017 {
  height: unset !important;
}
.contentWrapper__08434 {
  padding-top: 8px !important;
  grid-row-gap: 0 !important;
}
.header_c0e32c,
.header__8ef02,
.header_fed6d3 {
  padding: 8px !important;
}
.categorySection_c656ac {
  margin-bottom: 4px !important;
}
.categorySection_c656ac .header_c656ac {
  height: 24px !important;
}
.graphicPrimary_aeaaeb {
  width: 32px !important;
  height: 32px !important;
}
.menu_c1e9c4 .wrapper_f563df:first-child {
  display: none !important;
}
.popoverReactionHoverBar_f84418 .separator_f84418,
.popoverReactionHoverBar_f84418 .hoverBarButton_f84418:has(.emoji) {
  display: none;
}
.searchResultsWrap_a9e706 .scroller_a9e706 {
  padding: 8px 8px 0 !important;
}
.searchResultsWrap_a9e706 .searchResultGroup_c68065 {
  margin-bottom: 1rem !important;
}
.searchResultsWrap_a9e706 .searchResultGroup_c68065:last-child {
  margin-bottom: 0 !important;
}
.blockquoteContainer__75297 {
  margin-left: 0 !important;
}
.blockquoteContainer__75297 .blockquoteDivider__75297 {
  width: 8px !important;
  margin: 0.125rem 0 !important;
  border-radius: 3px 0 0 3px !important;
}
.blockquoteContainer__75297 blockquote {
  padding: 4px 6px !important;
  margin: 0.125rem 0 !important;
  background-color: rgba(46,48,54,0.33) !important;
  border: 1px solid rgba(46,48,54,0.75) !important;
  border-radius: 0 3px 3px 0 !important;
}
.textContainer__4d95d {
  min-height: 98px !important;
}
.textContainer__4d95d .codeView__4d95d {
  padding: 0 !important;
  min-height: 80px !important;
}
.reaction__23977 {
  border-radius: 5px !important;
}
.reaction__23977 .reactionInner__23977 {
  padding: 2px 4px !important;
}
.reaction__23977 .emoji {
  margin: 0.1rem 0 !important;
  width: 1.192857142857143rem !important;
  height: 1.192857142857143rem !important;
}
.avatarContainer__183c2,
.avatarContainerMasked__183c2 {
  background-color: #2f3136 !important;
  border: 1px solid #2f3136 !important;
  border-radius: 15% !important;
}
.avatarContainer__183c2 > foreignObject,
.avatarContainerMasked__183c2 > foreignObject {
  mask: none !important;
  -webkit-mask: none !important;
}
.tooltipPrimary__382e7 .avatarContainer__183c2,
.tooltipPrimary__382e7 .avatarContainerMasked__183c2 {
  background-color: #728ada !important;
  border-color: #728ada !important;
}
.partyMembers_e45a82 > .partyMember_e45a82:not(.partyMemberKnown_e45a82) {
  background-color: #2f3136 !important;
  border: 1px solid #2f3136 !important;
  border-radius: 15% !important;
}
.avatars_ef4a91 > .avatar_ef4a91 {
  background-color: #18191c !important;
  border: 1px solid #18191c !important;
  border-radius: 15% !important;
}
.altText__0f481 {
  margin: 0 !important;
  margin-top: 0.25rem !important;
}

Mij_Discord.theme.styl

/**
 * @name Mij_Discord
 * @version 0.4
 * @author Mijyuoon
 * @description Mijyuoon's simple Discord theme
*/

//// General declarations

$color-discord = #728ADA

$color-bg-dark = #2F3136
$color-bg-darker = #202225
$color-bg-darkest = #18191c

$color-tx-dark = #72767D

$fsize-small = 0.75rem
$fsize-normal = 0.875rem

$fweight-normal = 400
$fweight-semi = 500

// Style-specific declarations

$size-icon-corner = 15%
$size-embed-pill = 5px

$color-divider = alpha(#FFF, 0.15)

$message-spacing = 0.1rem

//// Unfuck chat fonts

.markup__75297 // message contents
.placeholder__1b31f // entry box placeholder
.autocompleteRowHeading__13533 // emoji autocomplete list item
{
  font-size: $fsize-normal !important
  line-height: 1.4em !important
}

.markup__75297 > code.inline // inline code blocks
.markup__75297 code:not(.inline) // paragaph code blocks
.codeView__4d95d // text file preview
{
  font-size: $fsize-small !important
  line-height: 1.2em !important
}

.embedTitle__623de // embed title
.embedDescription__623de // embed description
.embedFieldName__623de // embed field name
.embedFieldValue__623de // embed field value
.embedProvider__623de // embed provider
.embedAuthorName__623de // embed author
.embedFooterText__623de // embed footer
{
  font-size: $fsize-small !important
  font-weight: $fweight-semi !important
}

//// Un-round avatars and server icons

.avatar_c19a55 // messages, search
.avatar__44b0c // user list, profiles
.avatarSpeaking_xxxxxx // profile (voice)
.avatar__183c2 // voice channel (min.)
.avatar__07f91 // voice channel (full)
.voiceAvatar_xxxxxx // DM voice call
.border_xxxxxx // DM voice call (outline)
.avatarContainer_xxxxxx // voice user list
.replyAvatar_c19a55 // reply avatars
.executedCommandAvatar_c19a55 // slash command avatars
.threadMessageAccessoryAvatar_c19a55 // thread start avatars
.replyBadge_c19a55 // invalid reply icon (??)
.icon__6e9f8 // server icon (bar)
.iconInactive_f34534 // server icon (in folder)
.iconActiveMedium_f34534 // server icon (inbox)
.guildIcon__0fa6d // server icon (emoji info)
.embedAuthorIcon__623de // embed author icon
.embedFooterIcon__623de // embed footer icon
.voiceSectionGuildImage__00943 // server icon (friends VC activity)
.gameIcon_bf1a22 // currently playing game
{
  border-radius: $size-icon-corner !important
}

.wrapperSimple_cc5dd2 // server icon wrapper
.wrapper__44b0c // user list avatar wrapper
{
  border-radius: 0 !important
}

// Disable clipping masks by over-enlarging them
.appMount__51fd7 > svg > mask[id^="svg-mask-avatar-"] // avatars (normal)
.appMount__51fd7 > svg > mask[id^="svg-mask-voice-"] // avatars (voice chan.)
.appMount__51fd7 > svg > mask[id^="svg-mask-squircle"] // "squircle"? really?
svg.svg__44b0c > mask  // avatars (inline)
svg.svg_cc5dd2 > mask  // server icons (inline)
{
  [fill="white"] // main mask object
  {
    transform: scale(3.0) translate(-33%, -33%) !important
  }
}

.svg_d48241 // voice channel wrapper (min.)
{
  contain: unset !important
}

.voiceSectionGuildImage__00943 // server icon (friends VC activity)
.avatars_ef4a91 > .avatar_ef4a91 // avatar wrapper (mutual servers)
{
  mask: none
  -webkit-mask: none
}

//// Reduce spacing between messages

// .message_ddc613 // search message result
// {
//
//   padding-bottom: 0 !important
//
//   &:first-child
//   {
//     padding-top: 0 !important
//   }
// }

.message__5126c // inner message frame (main)
.message__1ccd1 // inner message frame (inbox)
{
  padding-top: $message-spacing * 0.5 !important
  padding-bottom: $message-spacing * 0.5 !important
  min-height: unset !important

  .messageContent_c19a55:not(:empty) // non-empty message contents
  {
    min-height: $message-spacing + 1rem !important
  }

  .timestamp_c19a55 // timestamp hover popup
  {
    height: $message-spacing + 1rem !important
    line-height: @height
  }
}

//// Add missing message group divider lines

.chatContent_f75fb0 // main chat message area
{
  :not(.hasContent__5126c) + .messageListItem__5126c > .groupStart__5126c // start of msg. group
  :not(.hasContent__5126c) + .groupStart__5126c // start of blocked msg. group
  {
    $pad = 16px
    $height = 0.25rem

    margin-top: $height !important

    &:before // inject divider line
    {
      content: "" !important
      display: block !important

      height: $height !important
      margin-left: -72px + $pad !important
      margin-right: -48px + $pad !important

      border-top: 1px solid $color-divider !important
    }

    &:not(.message__5126c):before // fix divider line for blocked message group
    {
      margin-left: $pad !important
      margin-right: $pad !important
    }

    &.replying__5126c // message group with reply highlight
    {
      // compensate for the space normally taken by the divider
      padding-top: "calc(%s + 1px)" % ($height + $message-spacing * 0.5) !important

      &:before // unset properties that break the reply highlight
      {
        margin: unset !important
        height: unset !important
      }
    }
  }
}

//// Tweak existing divider lines

.divider__5126c // default divider element
{
  &.hasContent__5126c // timestamp divider
  {
    margin-top: 0.75rem !important
    margin-bottom: 0 !important

    &:not(.isUnread__908e2) // no unread highlight
    {
      border-color: $color-divider !important
    }

    .content__908e2 // timestamp pill
    {
      border: 1px solid !important
      border-color: inherit !important
    }
  }

  &.beforeGroup__5126c // normal divider
  {
    top: calc(0.25rem + 1px) !important
  }
}

.groupStart__5126c // message group start
{
  margin-top: 0.5625rem !important

  .messageContainer__1ccd1:first-child > & // first message in inbox
  {
    margin-top: 0 !important
  }
}

//// Reduce spacing and add divider line before entry box

.scrollerSpacer__36d07 // silly spacer after last message
{
  height: 12px !important
}

.bottomBar__0f481 // clickable popup bars at the bottom
{
  padding-bottom: 0 !important
}

.form_f75fb0 // message entry box frame
{
  $pad = 8px

  margin-top: 0px !important
  padding: $pad $pad 0 $pad !important
  border-top: 1px solid $color-divider !important
}

//// Tweak user profile popups

.mask__68edb // profiler banner wrapper
{
  > foreignObject
  {
    mask: none
    -webkit-mask: none
  }
}

:root
{
  $border = 2px

  .avatar__75742 // avatar outline (profile popup, "View Profile")
  .avatar__1fed1 // avatar outline (user settings)
  .avatar_f9d668 > .wrapper__44b0c // avatar outline (avatar settings)
  {
    box-sizing: content-box !important
    border: $border solid $color-bg-dark !important
    border-radius: "calc(15% + %s)" % $border !important
    background-color: $color-bg-darker !important

    svg.svg__44b0c circle // status indicator outline
    {
      opacity: 0.0 !important
    }
  }
}

.pill_dfa8b6 // role pills
{
  border-radius: 4px !important
  border-width: 1px !important

  .roleCircle_dfa8b6 // inner circle
  {
    border-radius: 2px !important
  }
}

//// Adjust buttons on server bar

.folder__48112 //server folder (outer)
.folderIconWrapper__48112 // server folder (inner)
.childWrapper__6e9f8 // home button
.circleIconButton__5bc7e // misc. buttons
{
  border-radius: $size-icon-corner !important
}

.childWrapper__6e9f8 // home button
{
  overflow: hidden !important // fix for stupid snowy icon clipping out of bounds
}

.expandedFolderBackground__48112 // server folder background
{
  background-color: transparent !important
  border-radius: (48px * $size-icon-corner / 100%) !important

  &.hover__48112 // hover outline
  {
    outline: 2px dashed $color-discord !important
    min-height: 48px !important
  }
}

//// Hide the "Discover" button

.footer__214dc // "Discover" button container
{
  display: none;
}

//// Adjust random rounded buttons

.roundButton_c15210 // page button (search)
.actionButton_f8fa06 // button (friends list)
.circleButton__5f97b // button (role settings)
.button_fb7f94.banner_fb7f94  // button (profile popup)
.button__06eda // button (inbox/mentions)
{
  border-radius: $size-icon-corner !important
}

.hoverButtonGroup_d0395d // buttons for attachments
{
  outline: none !important
  border: 1px solid $color-bg-darker !important
  border-radius: 5px !important
}

.imageUploaderIcon_de76e4 // stupid server picture change icon in settings
{
  display: none !important
}

//// Fix mention message highlight

.replying__5126c // replying target message
{
  &:before
  {
    width: $size-embed-pill !important
    border-top-left-radius: $size-embed-pill !important
    border-bottom-left-radius: $size-embed-pill !important
    background-color: #7289DA !important
  }
}

.mentioned__5126c:not(.replying__5126c) // mentioned message blocks
{
  &:before // clear default highlight, for "Add missing message group divider lines"
  {
    width: unset !important
    position: unset !important
    background-color: unset !important
  }

  &:after // inject highlight pill
  {
    content: "" !important
    display: block !important

    top: 0 !important
    left: 0 !important
    bottom: 0 !important
    position: absolute !important

    width: $size-embed-pill !important
    border-top-left-radius: $size-embed-pill !important
    border-bottom-left-radius: $size-embed-pill !important
    background-color: #FAA61A !important
  }
}

//// Adjust embed spacing

.embedFull__623de // embed frame
{
  border-left-width: 8px !important

  .grid__623de // inner container
  {
    padding: 8px !important
  }

  .embedMargin__623de // embed element spacing
  {
    margin-top: 6px !important

    &:first-child
    {
      margin-top: 0 !important
    }
  }

  .embedSuppressButton__623de + .embedMargin__623de // kludge for dismiss button
  {
    margin-top: 0 !important
  }

  .embedMedia__623de // image/video element
  {
    margin-top: 8px !important
  }
}

//// Reduce spacing in Inbox popup and search panel

.messages__1ccd1 // message box (inbox)
.messageContainer__95796 // message box (mentions)
.searchResult_ddc613 // search result box
{
  $pad = 4px

  padding: $pad !important

  .cozy_c19a55.wrapper_c19a55 // inner message frame (mentions)
  {
    padding-left: 50px + $pad !important

    .avatar_c19a55 // avatar image
    {
      left: $pad !important
    }
  }
}

.recentMentionsPopout__95796 // inbox/mentions popup
{
  div:not(:last-child) > .channel__427f0 // message group container (inbox)
  {
    padding-bottom: 0 !important
  }

  .container__95796:not(:last-child) // message container (mentions)
  {
    margin-bottom: 0px !important
  }
}

//// Disable message text clipping

.zalgo_c19a55 .messageContent_c19a55 // message contents
.zalgo_c19a55 .header_c19a55 // message user name
{
  overflow: unset !important
}

.repliedTextPreview_c19a55 // reply message preview
{
  max-height: (1 / $fsize-normal * 1.2) !important
  vertical-align: middle !important
}

//// Tweak buttons in text entry box

.attachButton__0923f // file upload button
{
  padding-left: 10px !important
  padding-right: @padding-left
}

.buttons__74017 // Buttons in text entry box
{
  button[aria-label*="gift"] // "Gift Nitro" button
  div[aria-label*="Nitro"] // "Gift Nitro" button (alt.)
  {
    display: none !important
  }
}

//// Reduce vertical padding for text entry box

:root
{
  --custom-channel-textarea-text-area-height: calc(32px + var(--space-xs)) !important

  .textArea__74017
  {
    height: unset !important
  }
}

//// Tweak the emoji picker popup

.contentWrapper__08434 // emoji/GIF selector container
{
  padding-top: 8px !important
  grid-row-gap: 0 !important
}

.header_c0e32c // search box (emojis)
.header__8ef02 // search box (stickers)
.header_fed6d3 // search box (GIFs)
{
  padding: 8px !important
}

.categorySection_c656ac// emoji group container
{
  margin-bottom: 4px !important

  .header_c656ac // emoji group header
  {
    height: 24px !important
  }
}

.graphicPrimary_aeaaeb // emoji in preview area
{
  width: 32px !important
  height: @width
}

//// Disable stupid quick reaction buttons

.menu_c1e9c4 .wrapper_f563df:first-child // quick react button group
{
  display: none !important
}

.popoverReactionHoverBar_f84418 // message actions popover
{
  $button = '.hoverBarButton_f84418'
  $separator = '.separator_f84418'

  .separator_f84418 // reaction button separator
  .hoverBarButton_f84418:has(.emoji) // reaction button
  {
    display: none
  }
}

//// Reduce UI spacing in search panel

.searchResultsWrap_a9e706 // search panel
{
  .scroller_a9e706 // scrollable result container
  {
    padding: 8px 8px 0 !important
  }

  .searchResultGroup_c68065 // search result group
  {
    margin-bottom: 1rem !important

    &:last-child
    {
      margin-bottom: 0 !important
    }
  }
}

//// Blockquote styling

.blockquoteContainer__75297  // quote element
{
  $vmargin = 0.125rem
  $radius = 3px

  margin-left: 0 !important

  .blockquoteDivider__75297  // line on the left
  {
    width: 8px !important
    margin: $vmargin 0 !important

    border-radius: $radius 0 0 $radius !important
  }

  blockquote // quote contents
  {
    $color = #2E3036

    padding: 4px 6px !important
    margin: $vmargin 0 !important

    background-color: alpha($color, 0.33) !important
    border: 1px solid alpha($color, 0.75) !important
    border-radius: 0 $radius $radius 0 !important
  }
}

//// Inline file preview tweaks

.textContainer__4d95d // outer text container
{
  $min-height = 80px

  min-height: $min-height + 18px !important

  .codeView__4d95d // code block
  {
    padding: 0 !important
    min-height: $min-height !important
  }
}

//// Fix reaction button shape

.reaction__23977 // reaction button
{
  $vmargin = 0.1rem
  $size = 1/$fsize-normal + (0.25rem - 2 * $vmargin)

  border-radius: 5px !important

  .reactionInner__23977 // inner container
  {
    padding: 2px 4px !important
  }

  .emoji // emoji image
  {
    margin: $vmargin 0 !important

    width: $size !important
    height: $size !important
  }
}

//// Add outlines to minimized voice channel avatars

.avatarContainer__183c2 // VC avatar frame (the last)
.avatarContainerMasked__183c2 // VC avatar frame (the rest)
{
  background-color: $color-bg-dark !important
  border: 1px solid $color-bg-dark !important
  border-radius: $size-icon-corner !important

  > foreignObject // disable clipping mask
  {
    mask: none !important
    -webkit-mask: none !important
  }

  .tooltipPrimary__382e7 & // within dark tooltip
  {
    background-color: $color-discord !important
    border-color: $color-discord !important
  }
}

.partyMembers_e45a82 > .partyMember_e45a82 // avatar wrapper (friends VC activity)
{
  &:not(.partyMemberKnown_e45a82)
  {
    background-color: $color-bg-dark !important
    border: 1px solid $color-bg-dark !important
    border-radius: $size-icon-corner !important
  }
}

//// Add outlines to mutual friend and server icons

.avatars_ef4a91 > .avatar_ef4a91 // avatar wrapper (mutual servers)
{
  background-color: $color-bg-darkest !important
  border: 1px solid $color-bg-darkest !important
  border-radius: $size-icon-corner !important
}

//// Reduce the spacing for animated image alt text

.altText__0f481
{
  margin: 0 !important
  margin-top: 0.25rem !important
}