diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss index f6ba2321c..1ae2a47c8 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss @@ -175,3 +175,22 @@ limitations under the License. margin-top: -2px; } +.mx_MatrixChat_useCompactLayout { + .mx_RoomStatusBar { + min-height: 40px; + } + + .mx_RoomStatusBar_indicator { + margin-top: 10px; + } + + .mx_RoomStatusBar_callBar { + height: 40px; + line-height: 40px; + } + + .mx_RoomStatusBar_typingBar { + height: 40px; + line-height: 40px; + } +} diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss index 3d5fe0296..6fd44d26f 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss @@ -260,4 +260,14 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_ongoingConfCallNotification a { color: $accent-fg-color ! important; -} \ No newline at end of file +} + +.mx_MatrixChat_useCompactLayout { + .mx_RoomView_MessageList { + margin-bottom: 4px; + } + + .mx_RoomView_statusAreaBox { + min-height: 42px; + } +} diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss index 1969bc2db..1025052be 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss @@ -48,3 +48,13 @@ limitations under the License. margin-left: 63px; line-height: 30px; } + +.mx_MatrixChat_useCompactLayout { + .mx_MemberEventListSummary_line { + line-height: 22px; + } + + .mx_MemberEventListSummary_toggle { + margin-top: 2px; + } +} diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss index d853f9396..5542d18d0 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss @@ -360,3 +360,67 @@ limitations under the License. } /* end of overrides */ + +.mx_MatrixChat_useCompactLayout { + .mx_EventTile { + padding-top: 4px; + } + + .mx_EventTile.mx_EventTile_info { + padding-top: 0px; + } + + .mx_EventTile .mx_SenderProfile { + font-size: 13px; + } + + .mx_EventTile.mx_EventTile_emote { + padding-top: 8px; + .mx_EventTile_avatar { + top: 2px; + } + .mx_EventTile_line { + padding-top: 0px; + padding-bottom: 1px; + } + } + + .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation { + padding-top: 0; + .mx_EventTile_line { + padding-top: 0px; + padding-bottom: 0px; + } + } + + .mx_EventTile_line { + padding-top: 0px; + padding-bottom: 0px; + } + + .mx_EventTile_avatar { + top: 2px; + } + + .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { + top: 5px; + } + + .mx_EventTile_e2eIcon { + top: 7px; + } + + .mx_EventTile_readAvatars { + top: 27px; + } + + .mx_EventTile_continuation .mx_EventTile_readAvatars, + .mx_EventTile_info .mx_EventTile_readAvatars, + .mx_EventTile_emote .mx_EventTile_readAvatars { + top: 5px; + } + + .mx_RoomView_MessageList h2 { + margin-top: 6px; + } +} diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss index 1d8261d71..4495b142e 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss @@ -60,3 +60,10 @@ limitations under the License. .mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel { visibility: visible; } + +.mx_MatrixChat_useCompactLayout { + .mx_LinkPreviewWidget { + margin-top: 6px; + margin-bottom: 6px; + } +} diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index 525cc1f65..85c0e2c76 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -200,3 +200,13 @@ limitations under the License. padding: 4px 4px 4px 0; opacity: 0.8; } + +.mx_MatrixChat_useCompactLayout { + .mx_MessageComposer_input { + min-height: 50px; + } + + .mx_MessageComposer_noperm_error { + height: 50px; + } +} diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss index 7b76eb7f9..1ee56d953 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss @@ -44,3 +44,10 @@ limitations under the License. padding-top: 3px; cursor: pointer; } + +.mx_MatrixChat_useCompactLayout { + .mx_TopUnreadMessagesBar { + padding-top: 4px; + padding-bottom: 4px; + } +} diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss index d3bbce1b1..277d10d12 100644 --- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss @@ -104,3 +104,17 @@ limitations under the License. top: -25px; left: 6px; } + +.mx_MatrixChat_useCompactLayout { + .mx_LeftPanel .mx_BottomLeftMenu { + flex: 0 0 50px; + } + + .mx_LeftPanel.collapsed .mx_BottomLeftMenu { + flex: 0 0 160px; + } + + .mx_LeftPanel .mx_BottomLeftMenu_options { + margin-top: 12px; + } +} diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss index bb60fa1e7..056e9bd33 100644 --- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss @@ -118,3 +118,14 @@ limitations under the License. vertical-align: top; padding-left: 10px } + +.mx_MatrixChat_useCompactLayout { + .mx_RightPanel_footer { + flex: 0 0 50px; + } + + .mx_RightPanel_footer .mx_RightPanel_invite { + line-height: 25px; + padding-top: 8px; + } +}