Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Middle ground between compact and cozy chat layout
.theme-light {
--background-mentioned: hsla(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%, 0.25);
}
/** Chat scroller */
.auto-Ge5KZx, .auto-Ge5KZx.fade-2kXiP2:hover, .auto-Ge5KZx.scrolling-1Cdwk- {
scrollbar-color: var(--scrollbar-auto-scrollbar-color-thumb) transparent;
}
/** Chat spacer */
.scrollerSpacer-avRLaA {
height: 16px;
}
/** Text area */
.textArea-12jD-V {
font-family: monospace;
font-size: 0.875rem;
line-height: 1.0625rem;
}
.textArea-12jD-V .markup-2BOw-j {
font-size: inherit;
line-height: inherit;
}
/** Typing indicator */
.base-gE7OpD {
font-size: 0.875rem;
font-weight: normal;
line-height: 1.0625rem;
}
/** Message divider */
.divider-3_HH5L {
margin-left: calc(16px + 1ch);
margin-right: calc(16px - 11px + 10px);
}
.divider-3_HH5L.hasContent-1_DUdQ {
margin-top: 0.53125rem !important;
margin-bottom: 0.53125rem !important;
}
.content-1o0f9g {
padding: 0 1ch;
margin-top: 0;
}
/** Message wrapper */
.compact-T3H92H.wrapper-2a6GCs {
font-family: monospace;
background-color: unset !important;
display: grid;
grid-template-areas: 'header accessory' 'body body' 'footer footer';
grid-template-columns: auto 1fr;
grid-template-rows: auto auto auto;
min-height: auto;
padding-top: 0.09375rem;
padding-bottom: 0.09375rem;
padding-left: calc(16px + 10px + 1ch);
padding-right: calc(16px - 11px + 10px) !important;
position: relative;
}
.compactPreview-uctQ4t .compact-T3H92H.wrapper-2a6GCs {
padding-left: calc(16px + 1ch);
padding-right: 16px !important;
}
.compact-T3H92H.wrapper-2a6GCs::before {
opacity: 0.5;
content: '';
display: block;
width: 3px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
.compact-T3H92H.wrapper-2a6GCs.mentioned-xhSam7::before {
background-color: unset;
}
.compact-T3H92H.wrapper-2a6GCs:hover::before {
background-color: var(--text-normal);
}
/** Message banners (replies, bot commands, threads) */
.compact-T3H92H .repliedMessage-VokQwo {
grid-area: accessory;
font-size: 0.875rem;
line-height: 1.0625rem;
padding-left: 0;
margin-left: 2ch;
}
.compact-T3H92H .repliedMessage-VokQwo::before {
content: unset;
}
.compact-T3H92H .executedCommand-2GE3w2 .applicationName-1-Uq7y,
.compact-T3H92H .executedCommand-2GE3w2 .commandName-1klrjB,
.compact-T3H92H .executedCommand-2GE3w2 .username-1A8OIy,
.compact-T3H92H .repliedMessage-VokQwo .username-1A8OIy,
.compact-T3H92H .repliedMessage-VokQwo .botTag-2WPJ74,
.compact-T3H92H .threadMessageAccessory-1pYyA- .username-1A8OIy {
margin-right: 1ch;
}
.compact-T3H92H .threadMessageAccessory-1pYyA- .threadMessageAccessoryPreview-1uSsue .threadMessageAccessoryContent-1LHM39,
.compact-T3H92H .repliedMessage-VokQwo .repliedTextPreview-2NBljf .repliedTextContent-1R3vnK {
font-size: 0.875rem;
line-height: 1.0625rem;
}
/** Message inner content */
.compact-T3H92H .contents-2mQqc9 {
display: contents;
text-indent: unset;
padding-left: 0;
margin-left: 0;
}
.compact-T3H92H .contents-2mQqc9::before {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: calc(-16px - 10px - 1ch);
right: calc(-16px + 11px - 10px);
z-index: -1;
}
.compact-T3H92H.mentioned-xhSam7 .contents-2mQqc9::before {
background-color: var(--background-mentioned);
}
.compact-T3H92H.groupStart-23k01U .contents-2mQqc9::before {
top: 1.163rem;
}
/*** Message header */
.compact-T3H92H.groupStart-23k01U .header-23xsNx {
grid-area: header;
display: block;
margin-left: -1ch;
}
.compact-T3H92H .header-23xsNx .timestamp-3ZCmNB {
font-size: 0.75rem;
font-weight: normal;
line-height: 1.15rem;
text-align: right;
opacity: 1;
width: 3.6rem;
margin-right: 0;
position: absolute;
right: 15px;
}
.compact-T3H92H.groupStart-23k01U .header-23xsNx .timestamp-3ZCmNB {
top: 1.163rem;
}
.compact-T3H92H .headerText-3Uvj1Y {
display: none;
margin-right: 0;
position: relative;
}
.compact-T3H92H.groupStart-23k01U .headerText-3Uvj1Y {
display: flex;
gap: 1ch;
}
/*** Username */
.compact-T3H92H .username-1A8OIy {
font-size: 0.875rem;
font-weight: 600;
line-height: 1.0625rem;
}
.compact-T3H92H .headerText-3Uvj1Y .username-1A8OIy {
order: 1;
}
/*** Bot tag */
.compact-T3H92H .botTag-2WPJ74 {
background-color: unset;
color: var(--brand-experiment);
font-size: 0.875rem;
font-weight: bold;
line-height: 1.0625rem;
height: auto;
padding: 0;
margin-top: -1px;
margin-right: 0;
border-radius: 0;
position: unset;
}
.compact-T3H92H .headerText-3Uvj1Y .botTag-2WPJ74 {
order: 2;
}
.compact-T3H92H .botText-1526X_ {
line-height: inherit;
}
.compact-T3H92H .botTagVerified-1klIIt {
display: none;
}
/** Markup */
.compact-T3H92H .markup-2BOw-j {
font-size: 0.875rem;
line-height: 1.0625rem;
}
.compact-T3H92H .contents-2mQqc9 > .markup-2BOw-j {
grid-area: body;
display: block;
margin-right: calc(1ch + 3.6rem);
position: relative;
}
/*** Edited */
.compact-T3H92H .timestampInline-yHQ6fX,
.compact-T3H92H .edited-3sfAzf {
font-size: inherit;
font-weight: normal;
line-height: inherit;
}
.compact-T3H92H .timestampInline-yHQ6fX {
height: auto;
margin-left: 1ch;
margin-right: 1ch;
}
/*** Mention */
.wrapper-3WhCwL, .roleMention-2Bj0ju {
background-color: unset !important;
padding: 0;
border-radius: 0;
}
.wrapper-3WhCwL:hover,
.roleMention-2Bj0ju:hover {
text-decoration: underline;
}
.theme-light .wrapper-3WhCwL {
color: var(--brand-experiment-530);
}
.theme-dark .wrapper-3WhCwL {
color: var(--brand-experiment-400);
}
.channelIcon-1MN1lz {
height: 1.0625rem;
width: 1.0625rem;
}
.mention.iconMentionText-8GCluA {
padding-left: calc(1.0625rem + 4px);
}
.mention.iconMentionThread-3v2JSq {
padding-left: calc(1.0625rem + 8px);
}
/*** Code */
.compact-T3H92H .markup-2BOw-j code {
font-family: monospace;
font-size: 0.875rem;
line-height: 1.0625rem;
}
.compact-T3H92H .markup-2BOw-j code.inline {
padding-left: 0;
padding-right: 0;
}
/** Emoji */
.compact-T3H92H .emoji {
height: 1.0625rem;
width: 1.0625rem;
min-height: auto;
}
.compact-T3H92H .messageContent-2qWWxC .emoji.jumboable {
height: 2.125rem;
width: 2.125rem;
min-height: auto;
}
/** Block quote */
.compact-T3H92H .blockquoteDivider-2hH8H6 {
width: 4px;
margin-left: calc((1ch - 4px) / 2);
margin-right: calc((1ch - 4px) / 2);
}
.compact-T3H92H .blockquoteContainer-U5TVEi blockquote {
padding-left: 1ch;
padding-right: 0;
}
/** Embed */
.compact-T3H92H .container-1ov-mD {
grid-area: footer;
padding-top: 0;
padding-bottom: 0;
margin-top: 0.09375rem;
margin-left: 0;
}
.compact-T3H92H .embedWrapper-lXpS3L {
font-family: var(--font-primary);
margin-left: calc((1ch - 4px) / 2);
}
/** System messages/blocked messages */
.compact-2zYMSo {
margin-left: -1ch;
}
.systemMessage-1I9LCe .compact-2zYMSo {
margin-left: 0;
}
.iconContainer-3GkGRf {
display: none;
}
.content-2M3n_H {
font-size: 0.875rem;
line-height: 1.0625rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment