/* Copyright 2024 New Vector Ltd. Copyright 2020, 2021 The Matrix.org Foundation C.I.C. Copyright 2015, 2016 OpenMarket Ltd SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only Please see LICENSE files in the repository root for full details. */ $left-gutter: 64px; .mx_EventTile { --EventTile_content-margin-inline-end: 34px; --EventTile_group_line-spacing-block-start: 1px; --EventTile_group_line-spacing-block-end: 3px; --EventTile_group_line-spacing-inline-start: $left-gutter; --EventTile_group_line-line-height: $font-22px; --EventTile_ThreadSummary-line-height: calc(2 * $font-12px); flex-shrink: 0; max-width: 100%; clear: both; /* TODO: check if this is necessary */ padding-top: 18px; position: relative; &.mx_EventTile_info { font-size: var(--cpd-font-size-body-sm); color: $secondary-content; } .mx_EventTile_avatar { cursor: pointer; user-select: none; } .mx_EventTile_body { overflow-y: hidden; text-align: start; } .mx_EventTile_receiptSent, .mx_EventTile_receiptSending { position: relative; display: inline-block; width: 16px; height: 16px; &::before { background-color: var(--cpd-color-icon-tertiary); mask-repeat: no-repeat; mask-position: center; mask-size: 16px; width: 16px; height: 16px; content: ""; position: absolute; top: 0; left: 0; right: 0; } } .mx_EventTile_receiptSent::before { mask-image: url("$(res)/img/element-icons/circle-sent.svg"); } .mx_EventTile_receiptSending::before { mask-image: url("$(res)/img/element-icons/circle-sending.svg"); } .mx_EventTile_content { &.mx_EditMessageComposer, &.mx_EditWysiwygComposer { /* Make sure the formatting bar is visible */ overflow: visible; } } .mx_EventTile_searchHighlight { background-color: $accent; color: $accent-fg-color; border-radius: 5px; padding-inline: 2px; cursor: pointer; a { background-color: $accent; color: $accent-fg-color; } } .mx_EventTileBubble { margin-block: var(--EventTileBubble_margin-block); min-width: 100px; } .mx_MImageBody { .mx_MImageBody_thumbnail_container { display: flex; align-items: center; /* on every layout */ } } .mx_DisambiguatedProfile { color: $primary-content; font: var(--cpd-font-body-md-regular); display: inline-block; padding-bottom: 0px; padding-top: 0px; } .mx_ReactionsRow { display: flex; flex-flow: wrap; align-items: center; gap: $spacing-4; } .mx_ReplyChain--expanded { .mx_EventTile_body { /* !important needed to override .mx_ReplyTile .mx_EventTile_content .mx_EventTile_body */ display: block !important; overflow-y: scroll; } .mx_EventTile_collapsedCodeBlock { /* !important needed due to .mx_ReplyTile .mx_EventTile_content .mx_EventTile_pre_container > pre */ display: block !important; } } .mx_RoomView_searchResultsPanel & { &.mx_EventTile_contextual { opacity: 0.4; } } &.mx_EventTile_highlight, &.mx_EventTile_highlight .markdown-body, &.mx_EventTile_highlight .mx_EventTile_edited { color: $alert; } &.mx_EventTile_bubbleContainer { display: grid; grid-template-columns: 1fr 100px; .mx_EventTile_line { margin-right: 0; grid-column: 1 / 3; padding: 0 !important; /* override default padding of mx_EventTile_line so that we can be centered */ } .mx_EventTile_msgOption { grid-column: 2; } &:hover { .mx_EventTile_line { /* To avoid bubble events being highlighted */ background-color: inherit !important; } } } &.mx_EventTile_isEditing .mx_MessageTimestamp { visibility: hidden; } &[data-layout="irc"], &[data-layout="group"] { --selected-message-border-width: 4px; /* TODO: adjust the values for IRC layout */ --EventTile-box-shadow-offset-x: calc(50px + var(--selected-message-border-width)); --EventTile-box-shadow-spread-radius: -50px; .mx_EventTile_e2eIcon { position: absolute; } .mx_MImageBody { .mx_MImageBody_thumbnail_container { justify-content: flex-start; min-height: $font-44px; min-width: $font-44px; } } .mx_EventTile_line, .mx_EventTile_reply { position: relative; border-radius: 8px; } .mx_EventTile_reply { margin-right: 10px; } .mx_EventTile_msgOption { float: right; text-align: right; position: relative; width: 90px; /* Hack to stop the height of this pushing the messages apart. Replaces margin-top: -6px. This interacts better with a read marker being in between. Content overflows. */ height: 1px; a { text-decoration: none; } } &.mx_EventTile_highlight, &.mx_EventTile_highlight .markdown-body { .mx_EventTile_line { background-color: $event-highlight-bg-color; } } &:focus-visible:focus-within, &.mx_EventTile_actionBarFocused, &.mx_EventTile_isEditing, &.mx_EventTile_selected { .mx_EventTile_line { background-color: $event-selected-color; } } /* this is used for the tile for the event which is selected via the URL. */ &.mx_EventTile_isEditing, &.mx_EventTile_selected { > .mx_EventTile_line { /* TODO: ultimately we probably want some transition on here. */ box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius) var(--cpd-color-bg-action-primary-rest); } } &.mx_EventTile_info { .mx_EventTile_e2eIcon { top: 0; } } &.mx_EventTile_continuation .mx_EventTile_line { clear: both; } &:hover { .mx_EventTile_line { background-color: $event-selected-color; } } } &[data-layout="bubble"], &[data-layout="group"] { .mx_EventTileBubble { margin-inline: auto; } .mx_ReplyChain { margin-bottom: $spacing-8; } } &[data-layout="irc"] { --EventTile_irc_line-padding-block: 1px; /* add --right-padding value of MessageTimestamp only */ /* stylelint-disable-next-line declaration-colon-space-after */ --EventTile_irc_line_info-margin-inline-start: calc( var(--name-width) + var(--icon-width) + 1 * var(--right-padding) ); display: flex; align-items: flex-start; padding-top: 0; > a { text-decoration: none; /* timestamps are links which shouldn't be underlined */ min-width: var(--MessageTimestamp-width); /* ensure space for EventTile without timestamp */ } > * { margin-right: var(--right-padding); } .mx_EventTile_avatar, .mx_EventTile_e2eIcon { height: var(--irc-line-height); } .mx_EventTile_avatar, .mx_DisambiguatedProfile, .mx_EventTile_e2eIcon, .mx_EventTile_msgOption { flex-shrink: 0; } .mx_EventTile_avatar { order: 1; position: relative; display: flex; align-items: center; /* Need to use important to override the js provided height and width values. */ > .mx_BaseAvatar, > .mx_BaseAvatar > * { height: $font-14px !important; width: $font-14px !important; font-size: $font-10px !important; line-height: $font-15px !important; } } .mx_DisambiguatedProfile { order: 2; width: var(--name-width); margin-inline-end: 0; /* override mx_EventTile > * */ > .mx_DisambiguatedProfile_displayName { width: 100%; text-align: end; overflow: hidden; text-overflow: ellipsis; } > .mx_DisambiguatedProfile_mxid { visibility: collapse; margin-left: 0; /* Override the inherited margin. */ padding: 0 5px; } &:hover { overflow: visible; z-index: 10; > .mx_DisambiguatedProfile_displayName { overflow: visible; display: inline; background-color: $event-selected-color; border-radius: 8px 0 0 8px; padding-right: $spacing-8; } > .mx_DisambiguatedProfile_mxid { visibility: visible; opacity: 1; background-color: $event-selected-color; } } } .mx_EventTile_e2eIcon { padding: 0; flex-grow: 0; background-position: center; } .mx_EventTile_line { .mx_EventTile_e2eIcon, .mx_TextualEvent, .mx_ViewSourceEvent, .mx_MTextBody { /* add a 1px padding top and bottom because our larger emoji font otherwise gets cropped by anti-zalgo */ padding: var(--EventTile_irc_line-padding-block) 0; } .mx_EventTile_e2eIcon, .mx_TextualEvent, .mx_MTextBody { display: inline-block; } .mx_ReplyTile { .mx_MTextBody { display: -webkit-box; /* Enable -webkit-line-clamp */ } } } .mx_EventTile_line, .mx_EventTile_reply { order: 3; display: flex; flex-direction: column; flex-grow: 1; flex-shrink: 1; min-width: 0; } .mx_EventTile_reply { order: 4; } .mx_EventTile_msgOption { order: 5; .mx_ReadReceiptGroup { inset-block-start: -0.3rem; /* (var(--irc-line-height) - avatar height) / 2 */ } } .mx_ReplyChain { margin: 0; } .mx_MessageTimestamp { text-align: right; } .mx_EditMessageComposer_buttons { position: relative; } .mx_EventTileBubble { position: relative; left: var(--EventTile_irc_line_info-margin-inline-start); &.mx_cryptoEvent { left: unset; } } .mx_ReplyTile .mx_EventTileBubble { left: unset; /* Cancel the value specified above for the tile inside ReplyTile */ } &.mx_EventTile_isEditing > .mx_EventTile_line { .mx_EditMessageComposer { /* add space for the stroke on box-shadow */ padding-inline-start: calc( var(--selected-message-border-width) + var(--EditMessageComposer-padding-inline) ); } } &.mx_EventTile_info { .mx_EventTile_avatar { left: var(--EventTile_irc_line_info-margin-inline-start); top: 0; margin-right: var(--right-padding); padding-block: var(--EventTile_irc_line-padding-block); } .mx_EventTile_line { margin-inline-start: var(--EventTile_irc_line_info-margin-inline-start); } .mx_ViewSourceEvent, /* For hidden events */ .mx_TextualEvent { line-height: var(--irc-line-height); } } &.mx_EventTile_emote { .mx_EventTile_avatar { /* add --right-padding value of MessageTimestamp only */ margin-left: calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding)); } } .mx_EventTile_footer { margin: var(--cpd-space-1-5x) 0; } } &[data-layout="group"] { .mx_EventTile_avatar { top: 14px; left: $spacing-8; } .mx_EventTile_line, .mx_EventTile_reply { padding-top: var(--EventTile_group_line-spacing-block-start); padding-bottom: var(--EventTile_group_line-spacing-block-end); padding-left: var(--EventTile_group_line-spacing-inline-start); line-height: var(--EventTile_group_line-line-height); } .mx_EventTile_e2eIcon { inset: 0 0 0 44px; /* Keep height equal to text for alignment */ height: var(--EventTile_group_line-line-height); margin: 1px; } .mx_EventTile_msgOption { margin-inline-end: 10px; .mx_ReadReceiptGroup { /* This aligns the avatar with the last line of the */ /* message. We want to move it one line up */ /* See .mx_EventTile[data-layout=group] .mx_EventTile_line in _EventTile.scss */ inset-block-start: calc(-$font-22px - 3px); } } .mx_MessageTimestamp { position: absolute; left: 0; text-align: center; } .mx_ThreadSummary, .mx_ThreadSummary_icon { margin-left: $left-gutter; } .mx_EventTile_footer { margin: var(--cpd-space-1x) var(--cpd-space-16x); } > .mx_DisambiguatedProfile { line-height: $font-20px; margin-left: $left-gutter; max-width: calc(100% - $left-gutter); } > .mx_EventTile_avatar { position: absolute; z-index: 9; } .mx_RoomView_timeline_rr_enabled & { $inline-end-margin: 80px; .mx_ThreadSummary, .mx_ThreadSummary_icon, .mx_EventTile_line { margin-right: $inline-end-margin; min-height: $font-14px; } .mx_ThreadSummary { /* leave space on both left & right gutters */ max-width: min(calc(100% - $left-gutter - $inline-end-margin), 600px); } /* on ELS we need the margin to allow interaction with the expand/collapse button */ /* which is normally in the RR gutter */ } &.mx_EventTile_continuation { padding-top: 0; } &.mx_EventTile_info { $spacing-block-start: 3px; $spacing-block-end: 2px; padding-top: 0; .mx_EventTile_avatar, .mx_EventTile_e2eIcon { line-height: 1; margin: $spacing-block-start 0 $spacing-block-end; } .mx_EventTile_avatar { top: initial; inset-inline-start: $left-gutter; height: 14px; } .mx_EventTile_line { padding-block: $spacing-block-start $spacing-block-end; /* 20px: avatar area */ padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px); .mx_MessageTimestamp { top: 0; } } &.mx_EventTile_selected .mx_EventTile_line { /* TODO: check if this would be necessary; */ padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px); } } } &[data-layout="bubble"] { /* Other half of the gutter is provided by margin-bottom on the last tile of the section */ margin-top: calc(var(--gutterSize) / 2); margin-left: var(--EventTile_bubble-margin-inline-start); /* Reset default values. TODO: remove */ max-width: unset; padding-top: 0; .mx_EventTile_msgOption { .mx_ReadReceiptGroup { position: absolute; inset-block-start: auto; /* as close to right gutter without clipping as possible */ inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end)); /* (EventTileLine.line-height - ReadReceiptGroup.height) / 2 */ /* this centers the ReadReceiptGroup if we’ve got a single line */ inset-block-end: calc(($font-18px - 24px) / 2); } } .mx_EventTileBubble { /* Timestamps are inside the tile, so the width can be less constrained */ max-width: 600px; } &.mx_EventTile_continuation { margin-top: 2px; } &.mx_EventTile_lastInSection { /* Other half of the gutter is provided by margin-top on the first tile of the section */ margin-bottom: calc(var(--gutterSize) / 2); } } } .mx_GenericEventListSummary { &[data-layout="irc"], &[data-layout="group"] { .mx_EventTile_line .mx_RedactedBody { line-height: 1; /* remove spacing between lines */ } } &[data-layout="irc"] { /* Apply only collapsed events block */ > .mx_EventTile_line { /* add --right-padding value of MessageTimestamp and avatar only */ /* stylelint-disable-next-line declaration-colon-space-after */ padding-left: calc( var(--name-width) + var(--icon-width) + var(--MessageTimestamp-width) + 2 * var(--right-padding) ); } } &[data-layout="group"] { .mx_EventTile_line { padding-left: $left-gutter; } .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line { /* override padding-left $left-gutter */ padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px); } } } .mx_EventTile_content { /* all the overflow-y: hidden; are to trap Zalgos - but they introduce an implicit overflow-x: auto. so make that explicitly hidden too to avoid random horizontal scrollbars occasionally appearing, like in https://github.com/vector-im/vector-web/issues/1154 */ overflow-y: hidden; overflow-x: hidden; margin-right: var(--EventTile_content-margin-inline-end); .mx_EventTile_edited, .mx_EventTile_pendingModeration { user-select: none; font-size: $font-12px; color: $secondary-content; display: inline-block; margin-inline-start: 9px; } .mx_EventTile_edited { cursor: pointer; } .markdown-body { font: var(--cpd-font-body-md-regular) !important; letter-spacing: var(--cpd-font-letter-spacing-body-md); font-family: inherit !important; white-space: normal !important; line-height: inherit !important; background-color: inherit; color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */ pre, code { font-family: $monospace-font-family !important; background-color: $system; } code:not(pre *) { background-color: $inlinecode-background-color; border: 1px solid $inlinecode-border-color; border-radius: 4px; /* The horizontal padding is added by github-markdown-css .markdown-body */ padding: $spacing-2 0; /* Avoid inline code blocks to be sticked when on multiple lines */ line-height: $font-22px; /* Avoid the border to be glued to the other words */ margin-right: $spacing-2; } code { white-space: pre-wrap; /* don't collapse spaces in inline code blocks */ } pre { /* have to use overlay rather than auto otherwise Linux and Windows */ /* Chrome gets very confused about vertical spacing: */ /* https://github.com/vector-im/vector-web/issues/754 */ overflow-x: overlay; overflow-y: visible; &::-webkit-scrollbar-corner { background: transparent; } border: 1px solid $quinary-content; code { white-space: pre; /* we want code blocks to be scrollable and not wrap */ > * { display: inline; } } } h1, h2, h3, h4, h5, h6 { font-family: inherit !important; color: inherit; } /* Make h1 and h2 the same size as h3. */ h1, h2 { font-size: 1.5em; border-bottom: none !important; /* override GFM */ } a { color: $accent-alt; } blockquote { border-left: 2px solid $blockquote-bar-color; color: $secondary-content; border-radius: 2px; padding: 0 10px; } /* // actually, removing the Italic TTF provides // better results seemingly // compensate for Nunito italics being terrible // https://github.com/google/fonts/issues/1726 em { transform: skewX(-14deg); display: inline-block; } */ /* Override nested lists being lower-roman */ ol ol, ul ol { list-style-type: revert; } /* Make list type disc to match rich text editor */ ul { list-style-type: disc; } /* override styles from the base markdown CSS that put markdown content on its own line, as this isn't what we want for richtext emote content. */ &::before { display: none; } &::after { display: none; } } } /* Spoiler stuff */ .mx_EventTile_spoiler { cursor: pointer; /* clear button styles */ appearance: none; background: none; border: none; padding: 0; margin: 0; font-size: inherit; font-family: inherit; line-height: inherit; text-align: inherit; .mx_EventTile_spoiler_reason { color: $event-timestamp-color; font-size: $font-11px; } .mx_EventTile_spoiler_content { filter: blur(5px) saturate(0.1) sepia(1); transition-duration: 0.5s; } &.visible > .mx_EventTile_spoiler_content { filter: none; user-select: auto; } } .mx_EventTile_bigEmoji { font-size: 48px; line-height: 57px; .mx_Emoji { font-size: inherit !important; } } .mx_EventTile_e2eIcon { position: relative; width: 14px; height: 14px; display: block; background-repeat: no-repeat; background-size: contain; &::before, &::after { content: ""; display: block; position: absolute; inset: 0; mask-repeat: no-repeat; mask-position: center; mask-size: contain; } &::before { mask-size: 80%; } &.mx_EventTile_e2eIcon_warning::after { mask-image: url("$(res)/img/e2e/warning.svg"); /* (!) in a shield */ background-color: $e2e-warning-color; /* red */ } &.mx_EventTile_e2eIcon_normal::after { mask-image: url("$(res)/img/e2e/normal.svg"); /* regular shield */ background-color: var(--cpd-color-icon-tertiary); /* grey */ } &.mx_EventTile_e2eIcon_decryption_failure::after { mask-image: url("$(res)/img/e2e/decryption-failure.svg"); /* key in a circle */ background-color: var(--cpd-color-icon-tertiary); } } .mx_EventTile_body { a:hover { text-decoration: underline; } pre { border: 1px solid transparent; .mx_EventTile:hover &, .mx_EventTile:focus-visible:focus-within & { border: 1px solid $tertiary-content; } } /* selector wrongly applies to pill avatars but those have explicit width/height passed at a higher specificity */ &.markdown-body img { object-fit: contain; object-position: left top; /* Override the default colors of the 'github-markdown-css' library (#fff for light theme, #000 for dark theme) to match the inherited theme */ background-color: inherit !important; } .mx_EventTile_clamp & { -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; } .mx_EventTile_pre_container { /* For correct positioning of _copyButton (See TextualBody) */ position: relative; &:focus-within, &:hover { .mx_EventTile_button { visibility: visible; } } .mx_EventTile_collapsedCodeBlock { max-height: 30vh; padding-top: $spacing-12; padding-bottom: $spacing-12; } /* Inserted adjacent to
blocks, (See TextualBody) */ .mx_EventTile_button { position: absolute; top: $spacing-8; right: $spacing-8; width: 19px; height: 19px; visibility: hidden; background-color: $message-action-bar-fg-color; &.mx_EventTile_buttonBottom { top: 33px; } &.mx_EventTile_collapseButton, &.mx_EventTile_expandButton { mask-size: 75%; } } .mx_EventTile_copyButton { height: 17px; mask-image: url($copy-button-url); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; right: 9px; width: 17px; } } } .mx_EventTile_lineNumbers { float: left; margin: 0 0.5em 0 -1.5em; color: gray; & span { text-align: right; display: block; padding-left: 1em; } } .mx_EventTile_button { display: inline-block; cursor: pointer; } .mx_EventTile_collapseButton, .mx_EventTile_expandButton { mask-position: center; mask-repeat: no-repeat; } .mx_EventTile_collapseButton { mask-image: url("@vector-im/compound-design-tokens/icons/collapse.svg"); } .mx_EventTile_expandButton { mask-image: url("@vector-im/compound-design-tokens/icons/expand.svg"); } .mx_EventTile_tileError { color: red; text-align: center; /* Remove some of the default tile padding so that the error is centered */ margin-right: 0; .mx_EventTile_line { padding-left: 0; margin-right: 0; span { padding: $spacing-4 $spacing-8; } } a { margin-left: 1em; } } .mx_EventTile:hover .mx_MessageActionBar, .mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar, [data-whatinput="keyboard"] .mx_EventTile:focus-within .mx_MessageActionBar, .mx_EventTile:focus-visible:focus-within .mx_MessageActionBar { visibility: visible; } .mx_EventTile[data-shape="ThreadsList"], .mx_EventTile[data-shape="Notification"] { --topOffset: $spacing-12; --leftOffset: 48px; $borderRadius: 8px; $padding: $spacing-8; $hrHeight: 1px; $notification-dot-size: 8px; /* notification dot next to the timestamp */ margin: calc(var(--topOffset) + $hrHeight) 0 var(--topOffset); /* include the height of horizontal line */ padding: $padding; border-radius: $borderRadius; display: flex; flex-flow: wrap; align-items: center; &::after, &::before { content: ""; position: absolute; } &::after { $inset-block-start: auto; $inset-inline-end: calc(-1 * var(--cpd-space-2x)); $inset-block-end: calc(-1 * var(--topOffset) - $hrHeight); /* exclude the height of horizontal line */ $inset-inline-start: calc(var(--leftOffset) + $padding); inset: $inset-block-start $inset-inline-end $inset-block-end $inset-inline-start; height: $hrHeight; background-color: $quinary-content; pointer-events: none; /* disable the message action bar on hover */ } &::before { inset: 0; pointer-events: none; /* ensures the title for the sender name can be correctly displayed */ } &[data-notification="total"]::before { background-color: $room-icon-unread-color; } &[data-notification="highlight"]::before { background-color: $alert; } &:last-child { &::after { content: unset; } margin-bottom: 0; } &:first-child { margin-top: 0; } .mx_EventTile_avatar { inset: $padding auto auto $padding; } .mx_EventTile_details { overflow: hidden; } .mx_DisambiguatedProfile { display: inline-flex; align-items: center; flex: 1; .mx_DisambiguatedProfile_displayName, .mx_DisambiguatedProfile_mxid { display: block; overflow: hidden; text-overflow: ellipsis; } .mx_DisambiguatedProfile_displayName { flex: none; max-width: 100%; } .mx_DisambiguatedProfile_mxid { flex: 1; } } .mx_EventTile_line { width: 100%; box-sizing: border-box; padding-bottom: 0; padding-inline-start: var(--leftOffset); } .mx_MessageTimestamp { font-size: $font-12px; width: unset; /* Cancel the default width */ overflow: hidden; /* ensure correct overflow behavior */ text-overflow: ellipsis; position: initial; margin-left: auto; /* to ensure it's end-aligned even if it's the only element of its parent */ } &:hover { background-color: $panels; } /* ThreadsList has always group layout */ &[data-layout="group"]:hover { .mx_EventTile_line { background-color: inherit; box-shadow: none; /* don't show the verification left stroke in the thread list */ } } } .mx_EventTile[data-shape="ThreadsList"] { .mx_ThreadPanel_replies { margin-top: $spacing-8; display: flex; align-items: center; position: relative; font: var(--cpd-font-body-sm-regular); &::before { @mixin ThreadSummaryIcon; } .mx_ThreadPanel_replies_amount { @mixin ThreadRepliesAmount; } .mx_ThreadSummary_content { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } } } /* For style rules of ThreadView, see _ThreadPanel.pcss */ .mx_ThreadView { --ThreadView_group_spacing-start: 56px; /* 56px: 64px - 8px (padding) */ --ThreadView_group_spacing-end: 8px; /* same as padding */ .mx_EventTile { display: flex; flex-direction: column; .mx_EventTile_roomName { display: none; } /* handling for hidden events (e.g reactions) in the thread view */ &.mx_EventTile_info { .mx_EventTile_avatar { position: absolute; top: 1.5px; /* Align with hidden event content */ margin-top: 0; margin-bottom: 0; width: 14px; /* avatar img size */ height: 14px; /* avatar img size */ } &.mx_EventTile_selected .mx_EventTile_line, .mx_EventTile_line { $line-height: $font-12px; padding-inline-start: 0; line-height: $line-height; .mx_EventTile_content, .mx_RedactedBody { width: auto; font-size: $line-height; } } &[data-layout="irc"], &[data-layout="group"] { padding-top: 0; .mx_EventTile_avatar { /* 14px: avatar width, 4px: align with text */ left: calc(var(--MessageTimestamp-width) + 14px - 4px); z-index: 9; /* position above the hover styling */ } .mx_MessageTimestamp { top: 2px; /* Align with avatar */ } &.mx_EventTile_selected .mx_EventTile_line, .mx_EventTile_line { .mx_EventTile_content, .mx_RedactedBody { /* 14px: avatar width, 6px: 20px - 14px */ margin-inline-start: calc(14px + 6px); } } } &[data-layout="bubble"] { .mx_EventTile_avatar { inset-inline-start: 0; } &.mx_EventTile_selected .mx_EventTile_line, .mx_EventTile_line { .mx_EventTile_content, .mx_RedactedBody { margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px); } } } } &[data-layout="irc"], &[data-layout="group"] { padding-block-start: $spacing-16; .mx_EventTile_line, .mx_EventTile_footer { margin-inline-end: var(--ThreadView_group_spacing-end); } .mx_EventTile_line { padding-block: var(--BaseCard_EventTile_line-padding-block); /* Add padding to align message text with summary text */ /* See: .mx_EventTile[data-layout="group"] .mx_EventTile_line */ padding-inline-start: var(--ThreadView_group_spacing-start); .mx_EventTile_content { &.mx_EditMessageComposer { padding-inline-start: 0; /* align start of first letter with that of the event body */ } } } .mx_EventTile_footer { /* Align with message text and summary text */ margin-inline-start: var(--ThreadView_group_spacing-start); } &.mx_EventTile_continuation { padding-block-start: 0; /* Cancel padding-block-start */ } } &[data-layout="group"] { width: 100%; .mx_EventTile_senderDetails { display: flex; align-items: center; gap: $spacing-16; /* gap between the avatar and the sender ID */ padding-inline-start: $spacing-8; a { flex: 1; min-width: unset; max-width: 100%; display: flex; align-items: center; .mx_DisambiguatedProfile { margin-left: 8px; flex: 1; } } } .mx_MessageTimestamp { position: absolute; /* for IRC layout */ top: 2px; /* Align with mx_EventTile_content */ } } &[data-layout="bubble"] { margin-inline: var(--BaseCard_EventTile-spacing-inline); &::before { inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline)); z-index: auto; /* enable background color on hover */ } .mx_ReactionsRow { position: relative; /* display on hover */ } .mx_EventTile_line.mx_EventTile_mediaLine { padding-block: 0; padding-inline-start: 0; max-width: var(--EventBubbleTile_line-max-width); } &[data-self="true"] { align-items: flex-end; .mx_EventTile_line.mx_EventTile_mediaLine { margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; /* align with normal messages */ } } } } .mx_GenericEventListSummary { &[data-layout="irc"], &[data-layout="group"] { > .mx_EventTile_line { padding-inline-start: var(--ThreadView_group_spacing-start); /* align summary text with message text */ padding-inline-end: var(--ThreadView_group_spacing-end); /* align summary text with message text */ } } } } /* Cascading - compact modern layout on the main timeline and the right panel */ .mx_MatrixChat_useCompactLayout { .mx_EventTile[data-layout="group"] { --MatrixChat_useCompactLayout_group-padding-top: $spacing-4; --MatrixChat_useCompactLayout-top-avatar: 2px; --MatrixChat_useCompactLayout_line-spacing-block: 0px; padding-top: var(--MatrixChat_useCompactLayout_group-padding-top); .mx_EventTile_line, .mx_EventTile_reply { padding-block: var(--MatrixChat_useCompactLayout_line-spacing-block); } .mx_ReplyChain { margin-bottom: $spacing-4; } &.mx_EventTile_info { padding-top: 0; /* same as the padding for non-compact .mx_EventTile.mx_EventTile_info */ font-size: $font-13px; .mx_EventTile_e2eIcon, .mx_EventTile_avatar { top: 0; margin-block: var(--MatrixChat_useCompactLayout_line-spacing-block); } .mx_EventTile_line, .mx_EventTile_reply { line-height: $font-20px; } } &.mx_EventTile_emote { padding-top: $spacing-8; /* add a bit more space for emotes so that avatars don't collide */ .mx_EventTile_avatar { top: var(--MatrixChat_useCompactLayout-top-avatar); } .mx_EventTile_line, .mx_EventTile_reply { padding-bottom: 1px; } &.mx_EventTile_continuation { .mx_EventTile_line, .mx_EventTile_reply { padding-bottom: var(--MatrixChat_useCompactLayout_line-spacing-block); } } } /* Cascading - apply zero padding to every element including mx_EventTile_emote */ &.mx_EventTile_continuation { padding-top: var(--MatrixChat_useCompactLayout_line-spacing-block); } .mx_EventTile_avatar { top: var(--MatrixChat_useCompactLayout-top-avatar); } .mx_EventTile_e2eIcon { margin: 0px; } .mx_DisambiguatedProfile { font-size: $font-13px; } .mx_EventTile_msgOption { .mx_ReadReceiptGroup { /* This aligns the avatar with the last line of the */ /* message. We want to move it one line up - 2rem */ inset-block-start: -2rem; } } .mx_EventTile_content .markdown-body { p, ul, ol, dl, blockquote, pre, table { margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */ } } } } .mx_EventTile_details { display: flex; width: stretch; align-items: center; justify-content: space-between; gap: $spacing-8; margin-left: var(--leftOffset); .mx_EventTile_truncated { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .mx_EventTile_annotated { display: flex; } .mx_EventTile_footer { display: flex; gap: var(--cpd-space-2x); align-items: center; } /* Media query for mobile UI */ @media only screen and (max-width: 480px) { .mx_EventTile_content { margin-right: 0; } }