diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index b19173a313..eba8ae8f6e 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -272,10 +272,6 @@ hr.mx_RoomView_myReadMarker { .mx_MatrixChat_useCompactLayout { .mx_RoomView_MessageList { margin-bottom: 4px; - - h2 { - margin-top: 6px; // TODO: Use a spacing variable - } } .mx_RoomView_statusAreaBox { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 13eb3c27df..3f2a1fbf19 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -610,86 +610,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } } -/* Compact layout overrides */ - -.mx_MatrixChat_useCompactLayout { - .mx_EventTile { - padding-top: $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_avatar { - top: 4px; - } - - .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_continuation { - padding-top: 0; - - .mx_EventTile_line, - .mx_EventTile_reply { - padding-block: 0; - } - } - - .mx_EventTile_avatar { - top: 2px; - } - - .mx_EventTile_line, - .mx_EventTile_reply { - padding-top: 0px; - padding-bottom: 1px; - } - } - - .mx_EventTile_avatar { - top: 2px; - } - - .mx_EventTile_line, - .mx_EventTile_reply { - padding-block: 0; - } - - .mx_EventTile_e2eIcon { - top: 3px; - } - - .mx_DisambiguatedProfile { - font-size: $font-13px; - } - - .mx_ReadReceiptGroup { - // This aligns the avatar with the last line of the - // message. We want to move it one line up - 2rem - top: -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 - } - } - } -} - /* end of overrides */ .mx_EventTile_keyRequestInfo { diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss index aab8781254..86c0eb176e 100644 --- a/res/css/views/rooms/_GroupLayout.scss +++ b/res/css/views/rooms/_GroupLayout.scss @@ -46,3 +46,85 @@ $left-gutter: 64px; } } } + +/* Compact layout overrides */ + +.mx_MatrixChat_useCompactLayout { + .mx_EventTile { + padding-top: 4px; + + .mx_EventTile_line, + .mx_EventTile_reply { + padding-top: 0; + padding-bottom: 0; + } + + &.mx_EventTile_info { + // same as the padding for non-compact .mx_EventTile.mx_EventTile_info + padding-top: 0px; + font-size: $font-13px; + + .mx_EventTile_line, + .mx_EventTile_reply { + line-height: $font-20px; + } + + .mx_EventTile_avatar { + top: 4px; + } + } + + .mx_DisambiguatedProfile { + font-size: $font-13px; + } + + &.mx_EventTile_emote { + // add a bit more space for emotes so that avatars don't collide + padding-top: 8px; + + .mx_EventTile_avatar { + top: 2px; + } + + .mx_EventTile_line, + .mx_EventTile_reply { + padding-top: 0px; + padding-bottom: 1px; + } + } + + &.mx_EventTile_emote.mx_EventTile_continuation { + padding-top: 0; + + .mx_EventTile_line, + .mx_EventTile_reply { + padding-top: 0px; + padding-bottom: 0px; + } + } + + .mx_EventTile_avatar { + top: 2px; + } + + .mx_EventTile_e2eIcon { + top: 3px; + } + + .mx_ReadReceiptGroup { + // This aligns the avatar with the last line of the + // message. We want to move it one line up - 2rem + top: -2rem; + } + + .mx_EventTile_content .markdown-body { + p, ul, ol, dl, blockquote, pre, table { + margin-bottom: 4px; // 1/4 of the non-compact margin-bottom + } + } + } + + .mx_RoomView_MessageList h2 { + margin-top: 6px; + } +}