diff --git a/res/css/structures/_FilePanel.pcss b/res/css/structures/_FilePanel.pcss index f04dc3f8dc..e3f9f2d4d9 100644 --- a/res/css/structures/_FilePanel.pcss +++ b/res/css/structures/_FilePanel.pcss @@ -42,24 +42,22 @@ limitations under the License. display: none; } + /* Overrides for the attachment body tiles */ .mx_EventTile { - /* Overrides for the attachment body tiles */ - &:not([data-layout="bubble"]) { - word-break: break-word; - margin-top: 10px; - padding-top: 0; + word-break: break-word; + margin-top: 10px; + padding-top: 0; - .mx_EventTile_line { - padding-inline-start: 0; - } + .mx_EventTile_line { + padding-inline-start: 0; + } - &:hover { - &.mx_EventTile_verified, - &.mx_EventTile_unverified, - &.mx_EventTile_unknown { - .mx_EventTile_line { - box-shadow: none; - } + &:hover { + &.mx_EventTile_verified, + &.mx_EventTile_unverified, + &.mx_EventTile_unknown { + .mx_EventTile_line { + box-shadow: none; } } } diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.pcss b/res/css/views/dialogs/_MessageEditHistoryDialog.pcss index ff7c1002c4..69f854d50b 100644 --- a/res/css/views/dialogs/_MessageEditHistoryDialog.pcss +++ b/res/css/views/dialogs/_MessageEditHistoryDialog.pcss @@ -54,7 +54,7 @@ limitations under the License. /* Emulate mx_EventTile[data-layout="group"] */ .mx_EventTile { - padding-top: 0 !important; /* Override mx_EventTile:not([data-layout="bubble"]) */ + padding-top: 0; .mx_MessageTimestamp { position: absolute; diff --git a/res/css/views/rooms/_EventBubbleTile.pcss b/res/css/views/rooms/_EventBubbleTile.pcss index 21b05a020c..c525e5b912 100644 --- a/res/css/views/rooms/_EventBubbleTile.pcss +++ b/res/css/views/rooms/_EventBubbleTile.pcss @@ -44,13 +44,6 @@ limitations under the License. --EventTile_bubble_line-margin-inline-end: -12px; --EventTile_bubble_gap-inline: 5px; - position: relative; - /* 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); - font-size: $font-14px; - .mx_MessageTimestamp { width: unset; /* Cancel the default width */ max-width: var(--MessageTimestamp-max-width); diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index ef75fc154b..88b600365a 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -26,6 +26,11 @@ $left-gutter: 64px; --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; + font-size: $font-14px; + position: relative; .mx_EventTile_avatar { cursor: pointer; @@ -405,7 +410,7 @@ $left-gutter: 64px; } &.mx_EventTile_continuation { - padding-top: 0px !important; + padding-top: 0; } &.mx_EventTile_info { @@ -451,6 +456,15 @@ $left-gutter: 64px; } &[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; @@ -480,14 +494,6 @@ $left-gutter: 64px; } } -.mx_EventTile:not([data-layout="bubble"]) { - max-width: 100%; - clear: both; - padding-top: 18px; - font-size: $font-14px; - position: relative; -} - .mx_GenericEventListSummary { &[data-layout="irc"], &[data-layout="group"] { @@ -1214,106 +1220,101 @@ $left-gutter: 64px; /* Cascading - compact modern layout on the main timeline and the right panel */ .mx_MatrixChat_useCompactLayout { - .mx_EventTile { - /* Override :not([data-layout="bubble"]) */ - &[data-layout="group"] { - --MatrixChat_useCompactLayout_group-padding-top: $spacing-4; - --MatrixChat_useCompactLayout-top-avatar: 2px; - --MatrixChat_useCompactLayout-top-e2eIcon: 3px; - --MatrixChat_useCompactLayout_line-spacing-block: 0px; + .mx_EventTile[data-layout="group"] { + --MatrixChat_useCompactLayout_group-padding-top: $spacing-4; + --MatrixChat_useCompactLayout-top-avatar: 2px; + --MatrixChat_useCompactLayout-top-e2eIcon: 3px; + --MatrixChat_useCompactLayout_line-spacing-block: 0px; - padding-top: var(--MatrixChat_useCompactLayout_group-padding-top); + 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 { - padding-block: var(--MatrixChat_useCompactLayout_line-spacing-block); + line-height: $font-20px; } + } - .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_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_e2eIcon { - top: var(--MatrixChat_useCompactLayout-top-e2eIcon); + .mx_EventTile_line, + .mx_EventTile_reply { + padding-bottom: 1px; } - .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_continuation { + .mx_EventTile_line, + .mx_EventTile_reply { + padding-bottom: var(--MatrixChat_useCompactLayout_line-spacing-block); } } } - &[data-shape="ThreadsList"][data-notification]::before, - .mx_NotificationBadge { - /* stylelint-disable-next-line declaration-colon-space-after */ - inset-block-start: calc( - $notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top) - ); + /* 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 { + top: var(--MatrixChat_useCompactLayout-top-e2eIcon); + } + + .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 */ + } + } + } + + &[data-shape="ThreadsList"][data-notification]::before, + .mx_NotificationBadge { + /* stylelint-disable-next-line declaration-colon-space-after */ + inset-block-start: calc($notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top)); } }