ChatBubbles.theme.css

/**
 * @name Chat Bubbles
 * @author Kaneko Qt#3682
 * @version 3.6
 * @description Message bubbles theme for Better Discord.
 * @source https://github.com/qt-kaneko/Chat-Bubbles
*/
/* Copyright 2023 Kaneko Qt
 * This file is part of Chat Bubbles.
 *
 * Chat Bubbles is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Chat Bubbles is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 * See the GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Chat Bubbles. If not, see <https://www.gnu.org/licenses/>.
 */

/*#region Settings*/
:root {
  --cb-bubble-background: var(--background-secondary); /* Message bubble background */
  --cb-bubble-corner-radius: 8px; /* Message bubble corner radius */

  --cb-mentioned-indicator-width: 2px; /* Width of left indicator line in messages with mention */
  --cb-replying-indicator-width: 2px; /* Width of left indicator line in message that you are replying */

  --cb-hide-quick-action-buttons: none; /* Whether to show quick actions panel | none - hide, unset - show */
  --cb-hide-replied-preview-avatar: none; /* Whether to show avatar in replied message preview | none - hide, unset - show */
  --cb-hide-image-details: none; /* Whether to show image details in the end of message | none - hide, unset - show */
}
/*#endregion Settings*/

/*#region Styles*/
/*THIS IS THE THEME STYLES, DON'T EDIT THEM IF YOU DON'T KNOW WHAT YOU DO, THEME SETTINGS CAN BE FOUND ABOVE*/

/*#region Message*/
.message_ccca67:not(.systemMessage_fced96) {
  background: var(--cb-bubble-background);
  
  margin-left: 4.5rem;
  margin-top: .125rem;
  margin-bottom: .125rem;
  margin-right: 48px;

  width: fit-content;
  max-width: calc(100% - 9rem);

  padding: 10px !important;
  border-radius: var(--cb-bubble-corner-radius);
}

.avatar__08316,
.avatarDecoration__8a0c2,
.timestampVisibleOnHover__1679f { /* Fix avatar, avatar decoration, timestamp position */
  margin-left: -4.5rem;
}

.repliedMessage__636d2 + .contents_d3ae0d > .avatar__08316 { /* Set avatar position near answer message */
  margin-top: -40px;
}
.repliedMessage__636d2 + .contents_d3ae0d > .avatarDecoration__8a0c2 { /* Set avatar decoration position near answer message */
  margin-top: calc(-40px + -0.2rem);
}
/*#endregion Message*/

/*#region Replied preview*/
.repliedMessage__636d2 {
  padding: 2px;
  
  border-left: 2px solid;
  border-radius: 2px;
  padding-left: 6px;
}

.repliedMessage__636d2::before { /* Remove repled message "arrow" */
  display: none;
}

.repliedMessage__636d2 { /* Move replied text preview to next line */
  flex-wrap: wrap;
}
.repliedMessage__636d2 > .repliedTextPreview__1a8a4 {
  width: calc(100% - 24px); /* Preserve space for image thumbnail icon */
}

.repliedTextContent_b12fe1 { /* Fix add ... in the end of not fitting text */
  display: unset;
}

.replyAvatar__4ba85,
.executedCommandAvatar_cfc856 { /* Hide reply avatar */
  display: var(--cb-hide-replied-preview-avatar);
}

.executedCommand__4fb1a { /* Fix replied "message with command" preview height */
  height: unset;
}

/* TODO: Somehow fix replied "message with command" preview "used /blahblah" left margin */

/*#endregion Replied preview*/

/*#region Mentioned*/
.mentioned_fa6fd2::before { /* Recreate mentioned style to have rounded corners */
  display: none;
}
.mentioned_fa6fd2 {
  border-left: var(--cb-mentioned-indicator-width) solid var(--info-warning-foreground);
}

.mentioned_fa6fd2 .avatar__08316 { /* Fix avatar indent when mentioned */
  margin-left: calc(-4.5rem - var(--cb-mentioned-indicator-width));
}
/*#endregion Mentioned*/

/*#region Replying*/
.replying__38514::before { /* Recreate replying style to have rounded corners */
  display: none;
}
.replying__38514 {
  border-left: var(--brand-experiment) 2px solid;
}

.replying__38514 .avatar__08316 { /* Fix avatar indent when replying */
  margin-left: calc(-4.5rem - var(--cb-replying-indicator-width));
}
/*#endregion Replying*/

/*#region Threads*/
.container__17159 {
  background: var(--background-secondary-alt);
  width: -webkit-fill-available;
  margin-top: unset;
}

.hasThread__44ae4::after { /* Remove thread "arrow" */
  display: none;
}
/*#endregion Threads*/

/*#region Reactions*/
.reaction_ef7e09 { /* Add background to reactions */
  background: var(--background-primary);
  border-color: hsla(0,calc(var(--saturation-factor, 1)*0%),100%,.2);
  margin-top: 5px;
}
.theme-light.reaction_ef7e09 {
  border-color: hsla(0,calc(var(--saturation-factor, 1)*0%),0%,.2);
}

.reactions__2ede2 { /* Fix reactions bottom margin */
  margin-bottom: -1px;
  padding-bottom: unset;
}
.reaction_ef7e09 {
  margin-bottom: unset;
}

.reactionBtn__2d05d { /* Fix add reaction button bottom margin */
  margin-bottom: unset;
}
/*#endregion Reactions*/

/*#region Emoji*/
.emojiContainer__8da7f {
  width: fit-content;
  height: fit-content;
}
.emoji {
  width: 21px;
  height: 21px;
}
/*#endregion Emoji*/

/*#region Dividers*/
.divider__01aed, .divider__855e3 { /* Fix dividers indents */
  position: relative;
  top: 0px !important;
  margin: 17px 0px !important;
}
/*#endregion Dividers*/

/*#region Alt-text*/
.altText_a57338 { /* Fix alt-text indents */
  margin: 10px 0 0 0px;
}
.altText_a57338:empty {
  display: none;
}
/*#endregion Alt-text*/

/*#region Quick-action buttons*/
.buttonContainer__6de7e {
  display: var(--cb-hide-quick-action-buttons);
}
/*#endregion Quick-action buttons*/

/*#region Embeds*/
.container__62863 { /* Add gaps between embeds */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reaction_ef7e09 { /* Fix reactions top margin */
  margin-top: unset;
}

.reactions__2ede2 { /* Fix reactions position */
  width: 100%;
}
/*#endregion Embeds*/

/*#region Images*/
.imageWrapper__178ee {
  border-radius: 4px;
  overflow: hidden;
}
.imageContainer__1b5e9 + .altText_a57338 { /* Hide image details */
  display: none;
}

.messageAttachment__5dae1 .imageWrapper__178ee { /* Make images same width */
  max-width: 350px !important;
}
/* Removed due to cropped imaged in preview bug, idk for what it was needed
 * .clickableWrapper__2d2ea > img {
 *   max-width: unset !important;
 *   max-height: unset !important;
 * }
 */
.messageAttachment__5dae1 {
  width: 100%;
}
/*#endregion Images*/

/*#region Remove attachment buttons*/
.imageContainer__1b5e9 {
  position: relative;
}
.removeAttachmentButton__692b5 {
  z-index: 1;

  position: absolute;
  top: 4px;
  right: -4px;

  background: var(--background-primary);
  border-radius: 4px;
  width: 24px; height: 24px;
  box-shadow: -0.4px 0.4px 2px 0px rgba(0,0,0,0.4);

  display: flex;
  justify-content: center;
  align-items: center;

  transform: translate3d(0,-10px,0);
  transition: all .1s ease-in-out;
}
/*#endregion Remove attachment buttons*/

/*#endregion Styles*/


/* Additions */
.theme-dark #app-mount .message_ccca67 {
    margin-left: 66px !important;
    border-radius: 15px;
    background-color: #00000054;
}

.messageListItem__050f9 {
  padding: 3px;
}

.scroller__3fc84 {
  backdrop-filter: blur(5px);
}