Discord - TearDrop Messages by Freeplay

Imported from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/discord_teardrop-messages.user.css
AuthorFreeplay
LicenseNo License
Created at2021-02-04 19:35:39
Updated at2021-10-04 21:16:52
Applies todiscord.com
Description

My version of the bubble messages everyone seems to be making.
Notes

Userstyle doesn't have notes.
Source code

/* ==UserStyle==
@name           Discord - TearDrop Messages
@version        1.0.8
@description    My version of the bubble messages everyone seems to be making.
@updateURL      https://codeberg.org/Freeplay/UserStyles/raw/branch/main/discord_teardrop-messages.user.css

 -- AUTHOR STUFF --
@namespace      Freeplay
@author         Freeplay (https://freeplay.codeberg.page/)
@homepageURL    https://codeberg.org/Freeplay/UserStyles
@supportURL     https://codeberg.org/Freeplay/UserStyles/issues
==/UserStyle== */

@-moz-document domain("discord.com") {
/* 1.0.8
- Hotfix for emoji reactions
*/

:root {
    --background-message-hover: transparent;
}
.cozy-3raOZG .messageContent-2qWWxC:not(.repliedTextContent-1R3vnK), .embedFull-2tM8--, .wrapper-35wsBm,
.message-2qnXI6 .imageWrapper-2p5ogY,
.cozy-3raOZG .repliedMessage-VokQwo {
    background-color: var(--background-secondary);
    font-weight: 500;
    margin-left: 0 !important;
    margin-top: 4px !important;
    padding-left: 0 !important;
    padding: 8px 12px !important;
    border-radius: 16px;
    border-top-left-radius: 0 !important;
    width: max-content;
    max-width: 80%;
    box-shadow: var(--elevation-low);
    overflow: visible !important;
    box-sizing: border-box;
}

/* File Previews */
.container-1pMiXm {
    border-radius: 16px !important;
    border-top-left-radius: 0 !important;
    overflow: hidden;
}
.container-1pMiXm > div {
    border: none !important;
}
.container-1pMiXm code {
    padding: 10px !important;
    background-color: var(--background-primary);
    border: 1px solid var(--background-tertiary);
    border-top-right-radius: 16px;
}
.theme-dark .container-1pMiXm code {
    background-color: var(--background-tertiary);
}

/* Images */
.message-2qnXI6 .imageWrapper-2p5ogY {
    padding: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.cozy-3raOZG.message-2qnXI6:hover .messageContent-2qWWxC, .message-2qnXI6:hover .embedFull-2tM8--, .cozy-3raOZG .message-2qnXI6:hover .wrapper-35wsBm,
.message-2qnXI6:hover .imageWrapper-2p5ogY,
.message-2qnXI6:hover .container-1pMiXm {
    box-shadow: var(--elevation-medium) !important;
}


.cozy-3raOZG.systemMessage-1I9LCe .messageContent-2qWWxC {
    border-top-left-radius: 16px !important;
}
.cozy-3raOZG .blockquoteContainer-U5TVEi blockquote {
    box-sizing: content-box !important;
    max-width: unset !important;
}
.message-2qnXI6 .wrapper-35wsBm { /* Invited to Server box */
    padding: 14px 12px !important;
    width: 432px !important;
    background-color: var(--background-secondary);
}
.theme-dark .cozy-3raOZG .messageContent-2qWWxC:not(.repliedTextContent-1R3vnK), .theme-dark .embedFull-2tM8-- {
    background-color: var(--background-secondary);
    font-weight: 400;
}

.cozy-3raOZG.message-2qnXI6 {
    background: none !important;
}
.message-2qnXI6::before {
    content: unset !important;
}
.cozy-3raOZG.message-2qnXI6.selected-2P5D_Z .messageContent-2qWWxC:not(.repliedTextContent-1R3vnK),
.cozy-3raOZG.message-2qnXI6.selected-2P5D_Z .embedFull-2tM8--,
.cozy-3raOZG.message-2qnXI6.selected-2P5D_Z .container-1pMiXm > div {
    background-color: var(--background-tertiary) !important;
}
.cozy-3raOZG.message-2qnXI6.mentioned-xhSam7 .messageContent-2qWWxC:not(.repliedTextContent-1R3vnK) {
    background-color: var(--background-mentioned) !important;
    border-left: 2px solid #faa61a;
}

.theme-dark .cozy-3raOZG.message-2qnXI6.selected-2P5D_Z .messageContent-2qWWxC:not(.repliedTextContent-1R3vnK),
.theme-dark .cozy-3raOZG.message-2qnXI6.selected-2P5D_Z .embedFull-2tM8--,
.theme-dark .cozy-3raOZG.message-2qnXI6.selected-2P5D_Z .container-1pMiXm > div {
    background-color: var(--background-secondary-alt) !important;
}
.embedFull-2tM8-- {
    max-width: 520px;
    width: auto !important;
}
.embedFull-2tM8-- .grid-1nZz7S {
    padding: 0 4px;
    padding-bottom: 8px;
}
.embedFull-2tM8-- .embedThumbnail-2Y84-K {
    margin-left: 12px !important;
}
.cozy-3raOZG .messageContent-2qWWxC:not(.repliedTextContent-1R3vnK) pre {
    max-width: 100%;
}
.cozy-3raOZG .messageContent-2qWWxC:not(.repliedTextContent-1R3vnK) pre code {
    background-color: var(--background-primary);
    border-radius: 0;
    border-radius: 16px;
    border-top-left-radius: 0 !important;
}
.theme-dark .cozy-3raOZG .messageContent-2qWWxC:not(.repliedTextContent-1R3vnK) pre code {
    background-color: var(--background-tertiary);
}
/* Replies */
.cozy-3raOZG .repliedMessage-VokQwo {
    border-bottom-left-radius: 0 !important;
    margin-bottom: -4px !important;
    background-color: var(--background-secondary-alt);
}
.cozy-3raOZG .repliedMessage-VokQwo::before {
    content: unset !important;
}
.cozy-3raOZG .repliedMessage-VokQwo ~ .contents-2mQqc9 > .messageContent-2qWWxC:first-of-type {
    border-top-right-radius: 0;
}
.cozy-3raOZG .repliedMessage-VokQwo, .repliedMessage-VokQwo ~ .contents-2mQqc9 > .messageContent-2qWWxC:first-of-type {
    width: 60% !important;
    width: clamp(500px, 100%, 600px) !important;
}
/* Cover reply border radius */
.cozy-3raOZG .repliedMessage-VokQwo ~ .contents-2mQqc9 > .messageContent-2qWWxC:first-of-type::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 16px;
    height: 16px;
    background-color: var(--background-secondary-alt);
    border-top-left-radius: 100%;
}
/* .message-2qnXI6, .message-2DieIs { */
.cozy-3raOZG.wrapper-2a6GCs {
    display: flex;
    flex-direction: column;
}
.cozy-3raOZG .contents-2mQqc9 {
    display: contents;
}
.cozy-3raOZG .contents-2mQqc9 .header-23xsNx {
    order: -1;
}
.cozy-3raOZG .contents-2mQqc9 > span {
    order: -1;
}  
}
Discord - TearDrop Messages by Freeplay

Details

Description

Notes

Source code
