diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss index e56da68d2f..7ca03c6a9e 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss @@ -24,12 +24,63 @@ limitations under the License. margin: auto; } +.mx_GroupView_header { + max-width: 960px; + margin: auto; + height: 70px; + align-items: center; + display: flex; + border-bottom: 1px solid #e5e5e5; + margin-bottom: 20px; +} + +.mx_GroupView_header_avatar, .mx_GroupView_header_info { + display: table-cell; +} + +.mx_GroupView_header_leftCol { + flex: 1; +} + +.mx_GroupView_saveButton, .mx_GroupView_cancelButton { + display: table-cell; +} + .mx_GroupView_header_groupid { font-weight: normal; font-size: initial; padding-left: 10px; } +.mx_GroupView_header_name { + vertical-align: middle; + width: 100%; + height: 31px; + overflow: hidden; + color: $primary-fg-color; + font-weight: bold; + font-size: 22px; + padding-left: 19px; + padding-right: 16px; + /* why isn't text-overflow working? */ + text-overflow: ellipsis; + border-bottom: 1px solid transparent; +} + +.mx_GroupView_header_shortDesc { + vertical-align: bottom; + float: left; + max-height: 42px; + color: $settings-grey-fg-color; + font-weight: 300; + font-size: 13px; + margin-left: 19px; + margin-right: 16px; + overflow: hidden; + text-overflow: ellipsis; + border-bottom: 1px solid transparent; +} + .mx_GroupView_featuredThings { margin-top: 20px; } @@ -50,3 +101,7 @@ limitations under the License. cursor: pointer; display: table-cell; } + +.mx_GroupView_uploadInput { + display: none; +}