603 lines
12 KiB
SCSS
603 lines
12 KiB
SCSS
@use "colors";
|
|
|
|
[data-list-id="chat-messages"] > [class*="groupStart_"] {
|
|
&:has(+ [class*="groupStart_"]),
|
|
&:has(+ [class^="divider_"]),
|
|
&:has(+ [class^="messageListItem_"] > [class*="groupStart_"]) {
|
|
& > [class^="messageListItem_"] > [class*="message_"] {
|
|
padding-bottom: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
[class^="messageListItem_"]:has(> [class*="message_"][class*="cozy_"]) {
|
|
& ~ [class^="divider_"] {
|
|
top: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
|
|
&[class*="hasContent_"] {
|
|
margin-top: 0.25rem;
|
|
margin-bottom: -1px;
|
|
}
|
|
}
|
|
|
|
& ~ [class^="scrollerSpacer_"] {
|
|
height: 0 !important;
|
|
}
|
|
|
|
& ~ [class*="groupStart_"] {
|
|
margin: 0;
|
|
}
|
|
|
|
&:has(+ [class*="groupStart_"]),
|
|
&:has(+ [class^="divider_"]),
|
|
&:has(+ [class^="messageListItem_"] > [class*="groupStart_"]) {
|
|
& > [class*="message_"] {
|
|
margin-bottom: 3px !important;
|
|
|
|
&[class*="groupStart_"] {
|
|
margin-bottom: 0 !important;
|
|
padding-bottom: 3px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
[class*="message_"][class*="cozy_"] {
|
|
padding: 0;
|
|
padding-left: 32px;
|
|
min-height: unset;
|
|
|
|
&[class*="hasThread_"]::after {
|
|
display: none;
|
|
}
|
|
|
|
&[class*="groupStart_"] {
|
|
border-top: 1px solid colors.$c0;
|
|
margin: 0;
|
|
padding-top: 3px;
|
|
padding-right: 0 !important;
|
|
& > [class^="buttonContainer_"] {
|
|
top: 16px;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
& > [class^="buttonContainer_"] {
|
|
top: 0;
|
|
margin-right: 52px;
|
|
|
|
& > [class^="buttons_"] {
|
|
padding: 0;
|
|
top: 0;
|
|
|
|
& > [class^="buttonsInner_"] {
|
|
height: 13px;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
border: none;
|
|
background: transparent;
|
|
transition: none;
|
|
padding: 0;
|
|
|
|
& > [class*="button_"] {
|
|
padding: 0;
|
|
height: 13px;
|
|
min-width: 13px;
|
|
|
|
.emoji {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
}
|
|
|
|
& > [class^="separator_"] {
|
|
height: 13px;
|
|
margin: 0 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&[class*="systemMessage_"] {
|
|
& > [class^="buttonContainer_"] {
|
|
top: 3px !important;
|
|
}
|
|
|
|
& > [class^="contents_"] > [class*="messageContent_"] > [class^="container_"] {
|
|
padding: 0;
|
|
|
|
& > [class^="iconContainer_"] {
|
|
padding: 0;
|
|
width: 32px;
|
|
|
|
& > [class^="icon_"] {
|
|
width: 13px;
|
|
height: 13px;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
|
|
& > [class^="content_"] {
|
|
font-size: 12px;
|
|
line-height: 13px;
|
|
|
|
& > [class^="timestamp_"] {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& > [class^="contents_"] {
|
|
& > [class*="messageContent_"]:has(> [class^="attachment_"]) {
|
|
margin: 0;
|
|
}
|
|
|
|
& > [class^="avatar_"] {
|
|
left: 3px;
|
|
width: 26px;
|
|
height: 26px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
& > [class^="avatarDecoration_"] {
|
|
left: 1px;
|
|
width: 30px;
|
|
height: 30px;
|
|
margin-top: -2px;
|
|
}
|
|
|
|
& > [class^="header_"] {
|
|
font-size: 12px;
|
|
line-height: 13px;
|
|
min-height: unset;
|
|
height: 13px;
|
|
|
|
[id^="message-username-"] {
|
|
height: 13px;
|
|
display: inline-block;
|
|
margin-right: 0;
|
|
|
|
& > * {
|
|
top: 0;
|
|
}
|
|
|
|
[class^="username_"] {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
line-height: 13px;
|
|
font-weight: bold;
|
|
|
|
.emoji {
|
|
width: 13px;
|
|
height: 13px;
|
|
min-height: 13px;
|
|
}
|
|
}
|
|
|
|
[class^="roleIcon_"] {
|
|
width: 13px;
|
|
height: 13px;
|
|
top: 0;
|
|
}
|
|
|
|
.platform-icons-username {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
:is(.platform-icons-wrapper, .roleTags-wrapper, [class^="newMemberBadge_"]) > svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
margin: 0 !important;
|
|
}
|
|
}
|
|
|
|
& > [class^="badgesContainer_"] {
|
|
margin: 0;
|
|
row-gap: 4px;
|
|
|
|
& > [class^="badge_"] {
|
|
top: 0;
|
|
width: 13px;
|
|
height: 13px;
|
|
|
|
& > svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
}
|
|
}
|
|
|
|
[class^="timestamp_"] {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
[class*="timestamp_"] {
|
|
font-size: 12px;
|
|
line-height: 13px;
|
|
height: unset;
|
|
}
|
|
|
|
& > [class^="markup_"] {
|
|
font-size: 12px;
|
|
line-height: 13px;
|
|
|
|
& > :not(:is(h1, h2, h3)) {
|
|
.emoji {
|
|
width: 13px;
|
|
height: 13px;
|
|
min-height: 13px;
|
|
}
|
|
|
|
.emoji.jumboable {
|
|
width: 20px;
|
|
height: 20px;
|
|
min-height: 20px;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
}
|
|
|
|
blockquote {
|
|
padding: 0;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
code.inline {
|
|
font-size: 12px;
|
|
}
|
|
|
|
[class^="blockquoteDivider_"] {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
[class*="timestampVisibleOnHover_"] {
|
|
opacity: 1;
|
|
margin: 0;
|
|
left: unset;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
& > [id^="message-accessories-"] {
|
|
& > [class^="reactions_"] {
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
[class^="reaction_"] {
|
|
margin-bottom: 0;
|
|
border: none;
|
|
border-radius: 4px;
|
|
height: 13px;
|
|
|
|
& > [class^="reactionInner_"] {
|
|
padding: 0;
|
|
|
|
div:has(> .emoji) {
|
|
height: 13px;
|
|
}
|
|
|
|
.emoji {
|
|
margin: 0;
|
|
width: 13px;
|
|
height: 13px;
|
|
min-height: 13px;
|
|
display: block;
|
|
}
|
|
|
|
& > [class^="reactionCount_"] {
|
|
font-size: 12px;
|
|
padding: 0 4px;
|
|
margin: 0;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
[class^="reactionBtn_"] {
|
|
width: 13px;
|
|
height: 13px;
|
|
margin: 0;
|
|
|
|
& > svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
}
|
|
}
|
|
|
|
[class^="embedWrapper_"] {
|
|
border-radius: 0;
|
|
padding: 5px;
|
|
|
|
[class^="grid_"] {
|
|
padding: 0;
|
|
|
|
.emoji {
|
|
width: 13px;
|
|
height: 13px;
|
|
min-height: 13px;
|
|
}
|
|
|
|
.emoji.jumboable {
|
|
width: 20px;
|
|
height: 20px;
|
|
min-height: 20px;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
}
|
|
|
|
blockquote {
|
|
padding: 0;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
code.inline {
|
|
font-size: 12px;
|
|
}
|
|
|
|
[class^="blockquoteDivider_"] {
|
|
border-radius: 0;
|
|
}
|
|
|
|
& > [class^="embedAuthor_"] {
|
|
margin: 0;
|
|
line-height: 13px;
|
|
|
|
& > [class^="embedAuthorIcon_"] {
|
|
width: 13px;
|
|
height: 13px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
& > [class*="embedAuthorName_"] {
|
|
font-size: 12px;
|
|
}
|
|
|
|
& + [class^="embedTitle_"] {
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
& > [class^="embedTitle_"] {
|
|
margin: 0;
|
|
line-height: 13px;
|
|
font-size: 12px;
|
|
|
|
& > [class*="embedTitleLink_"] {
|
|
font-size: 12px;
|
|
line-height: 13px;
|
|
}
|
|
}
|
|
|
|
& > [class^="embedDescription_"] {
|
|
margin-top: 5px;
|
|
line-height: 13px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
& > [class^="embedFields_"] {
|
|
margin-top: 5px;
|
|
line-height: 13px;
|
|
|
|
& > [class^="embedField_"] {
|
|
& > :is([class^="embedFieldName_"], [class^="embedFieldValue_"]) {
|
|
line-height: 13px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > [class^="embedFooter_"] {
|
|
margin-top: 5px;
|
|
line-height: 13px;
|
|
|
|
& > [class^="embedFooterIcon_"] {
|
|
width: 13px;
|
|
height: 13px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
& > [class*="embedFooterText_"] {
|
|
font-size: 12px;
|
|
line-height: 13px;
|
|
}
|
|
}
|
|
|
|
& > [class*="embedProvider_"] {
|
|
margin: 0;
|
|
line-height: 13px;
|
|
font-size: 12px;
|
|
|
|
& + [class^="embedAuthor_"] {
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
& > [class*="embedThumbnail_"] {
|
|
margin: 0;
|
|
margin-left: 5px;
|
|
|
|
[class^="imageWrapper_"] {
|
|
width: 64px !important;
|
|
height: 64px !important;
|
|
|
|
img {
|
|
width: 64px !important;
|
|
height: 64px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > [class*="embedImage_"] {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
& > :is([class^="embedVideo_"], [class^="embedMedia_"]) {
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
[class^="mediaAttachmentsContainer_"] {
|
|
border-radius: 0;
|
|
|
|
& > div {
|
|
border-radius: 0;
|
|
}
|
|
|
|
[class^="messageAttachment_"] {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
[class^="imageWrapper_"] {
|
|
border-radius: 0;
|
|
|
|
img {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
[class^="altText_"] {
|
|
margin: 3px 0;
|
|
}
|
|
}
|
|
|
|
[class^="repliedMessage_"] {
|
|
font-size: 12px;
|
|
line-height: 13px;
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 16px;
|
|
color: var(--text-normal);
|
|
opacity: 0.64;
|
|
height: 13px !important;
|
|
|
|
&::before {
|
|
margin: 0;
|
|
position: unset;
|
|
top: unset;
|
|
left: unset;
|
|
right: unset;
|
|
bottom: unset;
|
|
border: none;
|
|
content: "> ";
|
|
font-size: 12px;
|
|
line-height: 13px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
& + [class^="contents_"] > [class^="header_"] {
|
|
margin-bottom: 13px;
|
|
}
|
|
|
|
& > :is([class^="replyAvatar_"], [class^="executedCommandAvatar_"]) {
|
|
display: none;
|
|
}
|
|
|
|
& > [class^="username_"] {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
line-height: 13px;
|
|
font-weight: bold;
|
|
opacity: 1;
|
|
|
|
.emoji {
|
|
width: 13px;
|
|
height: 13px;
|
|
min-height: 13px;
|
|
}
|
|
}
|
|
|
|
:is(.platform-icons-wrapper, .roleTags-wrapper) {
|
|
margin-left: 0 !important;
|
|
|
|
& > svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
margin: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
}
|
|
|
|
&[class*="executedCommand_"] {
|
|
.platform-icons-username {
|
|
top: 0 !important;
|
|
margin-right: 0 !important;
|
|
margin-left: 2px !important;
|
|
}
|
|
}
|
|
|
|
& > [class^="repliedTextPreview_"] {
|
|
margin: 0;
|
|
|
|
.emoji {
|
|
width: 13px;
|
|
height: 13px;
|
|
min-height: 13px;
|
|
}
|
|
}
|
|
& > [class^="repliedTextContentIcon_"] {
|
|
margin-left: 2px;
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
|
|
[class*="timestamp_"] {
|
|
font-size: 12px;
|
|
line-height: 13px;
|
|
height: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
[class*="botTag_"] {
|
|
background-color: transparent;
|
|
font-size: 12px !important;
|
|
height: 13px;
|
|
top: 0 !important;
|
|
margin-top: 0 !important;
|
|
margin-left: 4px !important;
|
|
|
|
[class*="botText_"] {
|
|
display: inline-flex;
|
|
font-size: 12px !important;
|
|
line-height: 13px !important;
|
|
font-weight: bold;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
&::after {
|
|
display: none !important;
|
|
}
|
|
|
|
svg[class^="botTagVerified_"] {
|
|
height: 13px !important;
|
|
width: 13px !important;
|
|
background-image: none;
|
|
|
|
& > path {
|
|
display: inline-flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[class^="chat_"] [class^="messagesWrapper_"] {
|
|
border-bottom: 1px solid colors.$c0;
|
|
|
|
[class^="scroller_"] [class^="scrollerContent_"] {
|
|
padding: 0 !important;
|
|
padding-bottom: 3px !important;
|
|
}
|
|
}
|