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 f6ba2321..1ae2a47c 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 3d5fe029..6fd44d26 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 1969bc2d..1025052b 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 d853f939..17efd78b 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,59 @@ limitations under the License. } /* end of overrides */ + +.mx_MatrixChat_useCompactLayout { + .mx_EventTile { + padding-top: 4px; + } + + .mx_EventTile.mx_EventTile_emote { + padding-top: 8px; + .mx_EventTile_avatar { + top: 2px; + } + .mx_EventTile_line { + padding-top: 1px; + padding-bottom: 2px; + } + } + + .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation { + padding-top: 0; + .mx_EventTile_line { + padding-top: 1px; + padding-bottom: 1px; + } + } + + .mx_EventTile_line { + padding-top: 1px; + padding-bottom: 1px; + } + + .mx_EventTile_avatar { + top: 0; + } + + .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 1d8261d7..4495b142 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 525cc1f6..d95688c6 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,9 @@ limitations under the License. padding: 4px 4px 4px 0; opacity: 0.8; } + +.mx_MatrixChat_useCompactLayout { + .mx_MessageComposer_input { + min-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 7b76eb7f..1ee56d95 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 d3bbce1b..277d10d1 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 bb60fa1e..056e9bd3 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; + } +}