Mij_Discord theme

Mij_Discord.theme.css

/**
 * @name Mij_Discord
 * @version 0.2
 * @author Mijyuoon
 * @description Mijyuoon's simple Discord theme
*/
.markup_d6076c,
.placeholder_a552a6,
.autocompleteRowHeading_f23da8 {
  font-size: 0.875rem !important;
  line-height: 1.4em !important;
}
.markup_d6076c code,
.codeView_ad9cbd {
  font-size: 0.75rem !important;
  line-height: 1.2em !important;
}
.embedTitle_ad0b71,
.embedDescription_ad0b71,
.embedFieldName_ad0b71,
.embedFieldValue_ad0b71,
.embedProvider_ad0b71,
.embedAuthorName_ad0b71,
.embedFooterText_ad0b71 {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}
.avatar_ec86aa,
.avatar_c51b4e,
.avatarHint_f89da9,
.avatarSpeaking_xxxxxx,
.avatar_c47562,
.avatar_cdc675,
.voiceAvatar_xxxxxx,
.border_xxxxxx,
.avatarContainer_xxxxxx,
.replyAvatar_ec86aa,
.executedCommandAvatar_ec86aa,
.threadMessageAccessoryAvatar_ec86aa,
.replyBadge_ec86aa,
.icon_f90abb,
.iconInactive_f11207,
.avatarUploaderInner_ab876d,
.avatarUploaderInner_f0a9ff,
.guildIcon_f3978e,
.guildIcon_bfabc4,
.embedAuthorIcon_ad0b71,
.embedFooterIcon_ad0b71,
.voiceSectionGuildImage_cd82a7 {
  border-radius: 15% !important;
}
.bannerUploaderInnerSquare_ab876d {
  border-radius: 8px 8px 0 0 !important;
}
.wrapper_c51b4e,
.wrapperSimple_c5f96a {
  border-radius: 0 !important;
}
.appMount_ea7e65 > svg > mask[id^="svg-mask-avatar-"] [fill="white"],
.appMount_ea7e65 > svg > mask[id^="svg-mask-voice-"] [fill="white"],
.appMount_ea7e65 > svg > mask[id^="svg-mask-squircle"] [fill="white"],
svg.svg_c51b4e > mask [fill="white"],
svg.svg_c5f96a > mask [fill="white"] {
  transform: scale(3) translate(-33%, -33%) !important;
}
.svg_d48241 {
  contain: unset !important;
}
.voiceSectionGuildImage_cd82a7,
.avatars_ccc074 > .avatar_ccc074 {
  mask: none;
  -webkit-mask: none;
}
.bannerSVGWrapper_b32cc2 > foreignObject {
  mask: none;
  -webkit-mask: none;
}
:root .avatarWrapper_f89da9,
:root .avatar_ec3b75,
:root .avatar_b69b77,
:root .avatarUploaderInner_ab876d {
  border: 2px solid #2f3136 !important;
  border-radius: calc(15% + 2px) !important;
  background-color: #202225 !important;
}
:root .avatarWrapper_f89da9 svg.svg_c51b4e circle,
:root .avatar_ec3b75 svg.svg_c51b4e circle,
:root .avatar_b69b77 svg.svg_c51b4e circle,
:root .avatarUploaderInner_ab876d svg.svg_c51b4e circle {
  opacity: 0 !important;
}
.rolePill_fa2f72 {
  border-radius: 4px !important;
  border-width: 1px !important;
}
.rolePill_fa2f72 .roleCircle_a26d7b {
  border-radius: 2px !important;
}
:root .overlayBackground_c69a7b {
  margin: 8px !important;
  margin-top: 16px !important;
}
:root .profileBadges_f89da9 {
  top: 8px !important;
  right: 8px !important;
}
:root .profileBadges_f89da9:empty {
  margin: 4px 0 !important;
}
:root .button_xxxxxx {
  max-width: 300px !important;
}
.folder_bc7085,
.folderIconWrapper_bc7085,
.childWrapper_f90abb,
.circleIconButton_db6521 {
  border-radius: 15% !important;
}
.childWrapper_f90abb {
  overflow: hidden !important;
}
.expandedFolderBackground_bc7085 {
  background-color: transparent !important;
  border-radius: 7.2px !important;
}
.expandedFolderBackground_bc7085.hover_bc7085 {
  outline: 2px dashed #728ada !important;
  min-height: 48px !important;
}
.roundButroundButton_b48941,
.actionButton_e01b91,
.circleButton_a930f1,
.pencilContainer_c3e427,
.button_e258f5 {
  border-radius: 15% !important;
}
.hoverButtonGroup_ab8b23.nonMediaAttachment_ab8b23 {
  outline: none !important;
  border: 1px solid #202225 !important;
  border-radius: 15% !important;
}
.imageUploaderIcon_de76e4 {
  display: none !important;
}
.tooltip__xxxxxx {
  padding: 4px 6px !important;
  color: #fff !important;
  background-color: #728ada !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
}
.tooltip__xxxxxx .tooltipPointer_xxxxxx {
  border-top-color: #728ada !important;
}
.tooltip__xxxxxx .guildNameText_xxxxxx,
.tooltip__xxxxxx .activityIcon_xxxxxx {
  color: #fff !important;
}
.tooltip__xxxxxx .tooltipContent_xxxxxx {
  padding: 0 !important;
}
.avatarContainer_c47562,
.avatarContainerMasked_c47562 {
  background-color: #2f3136 !important;
  border: 1px solid #2f3136 !important;
  border-radius: 15% !important;
}
.avatarContainer_c47562 > foreignObject,
.avatarContainerMasked_c47562 > foreignObject {
  mask: none !important;
  -webkit-mask: none !important;
}
.tooltipPrimary_xxxxxx .avatarContainer_c47562,
.tooltipPrimary_xxxxxx .avatarContainerMasked_c47562 {
  background-color: #728ada !important;
  border-color: #728ada !important;
}
.partyMembers_b448f2 > .partyMember_b448f2:not(.partyMemberKnown_b448f2) {
  background-color: #2f3136 !important;
  border: 1px solid #2f3136 !important;
  border-radius: 15% !important;
}
.avatars_ccc074 > .avatar_ccc074 {
  background-color: #18191c !important;
  border: 1px solid #18191c !important;
  border-radius: 15% !important;
}
.replying_d5deea:before {
  width: 5px !important;
  border-top-left-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
  background-color: #7289da !important;
}
.mentioned_d5deea:not(.replying_d5deea):before {
  width: unset !important;
  position: unset !important;
  background-color: unset !important;
}
.mentioned_d5deea:not(.replying_d5deea):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;
}
.chatContent_a7d72e :not(.hasContent_d5deea) + .messageListItem_d5deea > .groupStart_d5deea,
.chatContent_a7d72e :not(.hasContent_d5deea) + .groupStart_d5deea {
  margin-top: 0.25rem !important;
}
.chatContent_a7d72e :not(.hasContent_d5deea) + .messageListItem_d5deea > .groupStart_d5deea:before,
.chatContent_a7d72e :not(.hasContent_d5deea) + .groupStart_d5deea: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_a7d72e :not(.hasContent_d5deea) + .messageListItem_d5deea > .groupStart_d5deea:not(.message_d5deea):before,
.chatContent_a7d72e :not(.hasContent_d5deea) + .groupStart_d5deea:not(.message_d5deea):before {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
.chatContent_a7d72e :not(.hasContent_d5deea) + .messageListItem_d5deea > .groupStart_d5deea.replying_d5deea,
.chatContent_a7d72e :not(.hasContent_d5deea) + .groupStart_d5deea.replying_d5deea {
  padding-top: calc(0.3rem + 1px) !important;
}
.chatContent_a7d72e :not(.hasContent_d5deea) + .messageListItem_d5deea > .groupStart_d5deea.replying_d5deea:before,
.chatContent_a7d72e :not(.hasContent_d5deea) + .groupStart_d5deea.replying_d5deea:before {
  margin: unset !important;
  height: unset !important;
}
.divider_d5deea.hasContent_d5deea {
  margin-top: 0.75rem !important;
  margin-bottom: 0 !important;
}
.divider_d5deea.hasContent_d5deea:not(.isUnread_fc5f50) {
  border-color: rgba(255,255,255,0.15) !important;
}
.divider_d5deea.hasContent_d5deea .content_fc5f50 {
  border: 1px solid !important;
  border-color: inherit !important;
}
.divider_d5deea.beforeGroup_d5deea {
  top: calc(0.25rem + 1px) !important;
}
.groupStart_d5deea {
  margin-top: 0.5625rem !important;
}
.messageContainer_c06487:first-child > .groupStart_d5deea {
  margin-top: 0 !important;
}
.scrollerSpacer_e2e187 {
  height: 12px !important;
}
.jumpToPresentBar_cf58b5,
.messagesErrorBar_cf58b5 {
  padding-bottom: 0 !important;
}
.form_a7d72e {
  margin-top: 0px !important;
  padding: 8px 8px 0 8px !important;
  border-top: 1px solid rgba(255,255,255,0.15) !important;
}
.message_d5deea,
.message_c06487 {
  padding-top: 0.05rem !important;
  padding-bottom: 0.05rem !important;
  min-height: unset !important;
}
.message_d5deea .messageContent_ec86aa:not(:empty),
.message_c06487 .messageContent_ec86aa:not(:empty) {
  min-height: 1.1rem !important;
}
.message_d5deea .timestamp_ec86aa,
.message_c06487 .timestamp_ec86aa {
  height: 1.1rem !important;
  line-height: 1.1rem !important;
}
.messages_c06487,
.messageContainer_ddb5b4,
.searchResult_ddc613 {
  padding: 4px !important;
}
.messages_c06487 .cozy_ec86aa.wrapper_ec86aa,
.messageContainer_ddb5b4 .cozy_ec86aa.wrapper_ec86aa,
.searchResult_ddc613 .cozy_ec86aa.wrapper_ec86aa {
  padding-left: 54px !important;
}
.messages_c06487 .cozy_ec86aa.wrapper_ec86aa .avatar_ec86aa,
.messageContainer_ddb5b4 .cozy_ec86aa.wrapper_ec86aa .avatar_ec86aa,
.searchResult_ddc613 .cozy_ec86aa.wrapper_ec86aa .avatar_ec86aa {
  left: 4px !important;
}
div:not(:last-child) > .channel_d09ffd {
  padding-bottom: 0 !important;
}
.container_ddb5b4:not(:last-child) {
  margin-bottom: 0px !important;
}
.zalgo_ec86aa .messageContent_ec86aa,
.zalgo_ec86aa .header_ec86aa,
.repliedMessage_ec86aa {
  overflow: unset !important;
}
.attachButton_d0696b {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.buttons_d0696b > button[aria-label*="gift"],
.buttons_d0696b > div[aria-label*="Nitro"] {
  display: none !important;
}
.contentWrapper_af5dbb {
  padding-top: 8px !important;
  grid-row-gap: 0 !important;
}
.header_c6ee36,
.header_d8cdac,
.header_b56bbc {
  padding: 8px !important;
}
.categorySection_a3bc57 {
  margin-bottom: 4px !important;
}
.categorySection_a3bc57 .wrapper_e06857 {
  height: 24px !important;
}
.graphicPrimary_c3120f {
  width: 32px !important;
  height: 32px !important;
}
.menu_d90b3d .wrapper_a24e84:first-child {
  display: none !important;
}
.toolbar_e44302 .clickable_e44302[aria-label*="Help"] {
  display: none !important;
}
.searchResultsWrap_c2b47d .scroller_c2b47d {
  padding: 8px 8px 0 !important;
}
.searchResultsWrap_c2b47d .searchResultGroup_a9e225 {
  margin-bottom: 1rem !important;
}
.searchResultsWrap_c2b47d .searchResultGroup_a9e225:last-child {
  margin-bottom: 0 !important;
}
.embedFull_ad0b71 {
  border-left-width: 8px !important;
}
.embedFull_ad0b71 .grid_ad0b71 {
  padding: 8px !important;
}
.embedFull_ad0b71 .embedMargin_ad0b71 {
  margin-top: 6px !important;
}
.embedFull_ad0b71 .embedMargin_ad0b71:first-child {
  margin-top: 0 !important;
}
.embedFull_ad0b71 .embedSuppressButton_ad0b71 + .embedMargin_ad0b71 {
  margin-top: 0 !important;
}
.embedFull_ad0b71 .embedMedia_ad0b71 {
  margin-top: 8px !important;
}
.blockquoteContainer_d6076c {
  margin-left: 0 !important;
}
.blockquoteContainer_d6076c .blockquoteDivider_d6076c {
  width: 8px !important;
  margin: 0.125rem 0 !important;
  border-radius: 3px 0 0 3px !important;
}
.blockquoteContainer_d6076c 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_ad9cbd {
  min-height: 98px !important;
}
.textContainer_ad9cbd .codeView_ad9cbd {
  padding: 0 !important;
  min-height: 80px !important;
}
.reaction_ec6b19 {
  border-radius: 5px !important;
}
.reaction_ec6b19 .reactionInner_ec6b19 {
  padding: 2px 4px !important;
}
.reaction_ec6b19 .emoji {
  margin: 0 !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
}
.carouselModal_xxxxxx {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.carouselModal_xxxxxx .wrapper_xxxxxx {
  cursor: unset !important;
  display: unset !important;
  top: unset !important;
  bottom: unset !important;
  left: unset !important;
  right: unset !important;
}

Mij_Discord.theme.styl

/**
 * @name Mij_Discord
 * @version 0.2
 * @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_d6076c // message contents
.placeholder_a552a6 // entry box placeholder
.autocompleteRowHeading_f23da8 // emoji autocomplete list item
{
  font-size: $fsize-normal !important
  line-height: 1.4em !important
}

.markup_d6076c code // code blocks
.codeView_ad9cbd // text file preview
{
  font-size: $fsize-small !important
  line-height: 1.2em !important
}

.embedTitle_ad0b71 // embed title
.embedDescription_ad0b71 // embed description
.embedFieldName_ad0b71 // embed field name
.embedFieldValue_ad0b71 // embed field value
.embedProvider_ad0b71 // embed provider
.embedAuthorName_ad0b71 // embed author
.embedFooterText_ad0b71 // embed footer
{
  font-size: $fsize-small !important
  font-weight: $fweight-semi !important
}

//// Un-round avatars and server icons

.avatar_ec86aa // messages, search
.avatar_c51b4e // user list, profiles
//.avatarWrapper_xxxxxx // avatar outline (profile popup)
.avatarHint_f89da9 // "View Profile" overlay
.avatarSpeaking_xxxxxx // profile (voice)
.avatar_c47562 // voice channel (min.)
.avatar_cdc675 // voice channel (full)
.voiceAvatar_xxxxxx // DM voice call
.border_xxxxxx // DM voice call (outline)
.avatarContainer_xxxxxx // voice user list
.replyAvatar_ec86aa // reply avatars
.executedCommandAvatar_ec86aa // slash command avatars
.threadMessageAccessoryAvatar_ec86aa // thread start avatars
.replyBadge_ec86aa // invalid reply icon (??)
.icon_f90abb // server icon (bar)
.iconInactive_f11207 // server icon (in folder)
.avatarUploaderInner_ab876d // avatar change menu
.avatarUploaderInner_f0a9ff // server icon change menu
.guildIcon_f3978e // server icon (inbox)
.guildIcon_bfabc4 // server icon (emoji info)
.embedAuthorIcon_ad0b71 // embed author icon
.embedFooterIcon_ad0b71 // embed footer icon
.voiceSectionGuildImage_cd82a7 // server icon (friends VC activity)
{
  border-radius: $size-icon-corner !important
}

.bannerUploaderInnerSquare_ab876d // banner preview in user settings
{
  border-radius: 8px 8px 0 0 !important
}

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

// Disable clipping masks by over-enlarging them
.appMount_ea7e65 > svg > mask[id^="svg-mask-avatar-"] // avatars (normal)
.appMount_ea7e65 > svg > mask[id^="svg-mask-voice-"] // avatars (voice chan.)
.appMount_ea7e65 > svg > mask[id^="svg-mask-squircle"] // "squircle"? really?
svg.svg_c51b4e > mask  // avatars (inline)
svg.svg_c5f96a > 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_cd82a7 // server icon (friends VC activity)
.avatars_ccc074 > .avatar_ccc074 // avatar wrapper (mutual servers)
{
  mask: none
  -webkit-mask: none
}

//// Tweak user profile popups

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

:root
{
  $border = 2px

  .avatarWrapper_f89da9 // avatar outline (profile popup)
  .avatar_ec3b75 // avatar outline ("View Profile")
  .avatar_b69b77 // avatar outline (user settings)
  .avatarUploaderInner_ab876d // avatar outline (avatar settings)
  {
    border: $border solid $color-bg-dark !important
    border-radius: "calc(15% + %s)" % $border !important
    background-color: $color-bg-darker !important

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

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

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

:root
{
  $padding = 8px

  .overlayBackground_c69a7b // profile info card
  {
    margin: $padding !important
    margin-top: $padding + 8px !important
  }

  .profileBadges_f89da9 // profile badge card
  {
    top: $padding !important
    right: $padding !important

    &:empty
    {
      margin: 4px 0 !important
    }
  }

  .button_xxxxxx // buttons in the popup
  {
    max-width: 316px - 2 * $padding !important
  }
}

//// Adjust buttons on server bar

.folder_bc7085 //server folder (outer)
.folderIconWrapper_bc7085 // server folder (inner)
.childWrapper_f90abb // home button
.circleIconButton_db6521 // misc. buttons
{
  border-radius: $size-icon-corner !important
}

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

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

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

//// Adjust random rounded buttons

.roundButroundButton_b48941 // page button (search)
.actionButton_e01b91 // button (friends list)
.circleButton_a930f1 // button (role settings)
.pencilContainer_c3e427 // profile edit button
.button_e258f5 // button (inbox/mentions)
{
  border-radius: $size-icon-corner !important
}

.hoverButtonGroup_ab8b23.nonMediaAttachment_ab8b23 // buttons for non-media attachments
{
  outline: none !important
  border: 1px solid $color-bg-darker !important
  border-radius: $size-icon-corner !important
}

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

//// Bring back blue tooltips

.tooltip__xxxxxx // tooltip body
{
  padding: 4px 6px !important

  color: #FFFFFF !important
  background-color: $color-discord !important
  font-size: $fsize-normal !important
  font-weight: $fweight-normal !important

  .tooltipPointer_xxxxxx // tooltip arrow
  {
    border-top-color: $color-discord !important
  }

  .guildNameText_xxxxxx // server name text
  .activityIcon_xxxxxx // voice/streaming icons
  {
    color: #FFFFFF !important
  }

  .tooltipContent_xxxxxx // inner tooltop content box
  {
    padding: 0 !important
  }
}

//// Add outlines to minimized voice channel avatars

.avatarContainer_c47562 // VC avatar frame (the last)
.avatarContainerMasked_c47562 // 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_xxxxxx & // within dark tooltip
  {
    background-color: $color-discord !important
    border-color: $color-discord !important
  }
}

.partyMembers_b448f2 > .partyMember_b448f2 // avatar wrapper (friends VC activity)
{
  &:not(.partyMemberKnown_b448f2)
  {
    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_ccc074 > .avatar_ccc074 // avatar wrapper (mutual servers)
{
  background-color: $color-bg-darkest !important
  border: 1px solid $color-bg-darkest !important
  border-radius: $size-icon-corner !important
}

//// Fix mention message highlight

.replying_d5deea // 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_d5deea:not(.replying_d5deea) // 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
  }
}

//// Add missing message group divider lines

.chatContent_a7d72e // main chat message area
{
  :not(.hasContent_d5deea) + .messageListItem_d5deea > .groupStart_d5deea // start of msg. group
  :not(.hasContent_d5deea) + .groupStart_d5deea // 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_d5deea):before // fix divider line for blocked message group
    {
      margin-left: $pad !important
      margin-right: $pad !important
    }

    &.replying_d5deea // 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_d5deea // default divider element
{
  &.hasContent_d5deea // timestamp divider
  {
    margin-top: 0.75rem !important
    margin-bottom: 0 !important

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

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

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

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

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

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

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

.jumpToPresentBar_cf58b5 // "Jump to Present" button popup
.messagesErrorBar_cf58b5 // Message load error button popup
{
  padding-bottom: 0 !important
}

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

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

//// Reduce spacing between messages

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

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

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

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

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

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

  padding: $pad !important

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

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

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

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

//// Disable message text clipping

.zalgo_ec86aa .messageContent_ec86aa // message contents
.zalgo_ec86aa .header_ec86aa // message user name
.repliedMessage_ec86aa // reply message preview
{
  overflow: unset !important
}

//// Tweak buttons in main text entry box

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

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

//// Tweak the emoji picker popup

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

.header_c6ee36 // search box (emojis)
.header_d8cdac // search box (stickers)
.header_b56bbc // search box (GIFs)
{
  padding: 8px !important
}

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

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

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

//// Disable stupid quick reaction buttons

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

//// Remove useless help button from toolbar

.toolbar_e44302 .clickable_e44302[aria-label*="Help"]
{
  display: none !important
}

//// Reduce UI spacing in search panel

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

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

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

//// Adjust embed spacing

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

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

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

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

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

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

//// Blockquote styling

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

  margin-left: 0 !important

  .blockquoteDivider_d6076c // 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_ad9cbd // outer text container
{
  $min-height = 80px

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

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

//// Fix reaction button shape

.reaction_ec6b19 // reaction button
{
  $size = 1.125rem

  border-radius: 5px !important

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

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

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

//// Unfuck the image viewer for multi-image messages

.carouselModal_xxxxxx // carousel viewer base
{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  .wrapper_xxxxxx // outer image wrapper
  {
    cursor: unset !important;

    display: unset !important;
    top: unset !important;
    bottom: unset !important;
    left: unset !important;
    right: unset !important;
  }
}