element-web/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss

/*
Copyright 2017 Vector Creations Ltd

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_GroupView {
    max-width: 960px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mx_GroupView_error {
    margin: auto;
}

.mx_GroupView_header {
    max-width: 960px;
    min-height: 70px;
    align-items: center;
    display: flex;
}

.mx_GroupView_header_view {
    border-bottom: 1px solid $primary-hairline-color;
}

.mx_GroupView_header_avatar, .mx_GroupView_header_info {
    display: table-cell;
    vertical-align: middle;
}

.mx_GroupHeader_button {
    margin-left: 12px;
    cursor: pointer;
}

.mx_GroupHeader_button object {
    // prevents clicks from being swallowed by svg in 'object' tag
    pointer-events: none;
}

.mx_GroupView_editable {
    border-bottom: 1px solid $strong-input-border-color ! important;
    min-width: 150px;
    cursor: text;
}

.mx_GroupView_editable:focus {
    border-bottom: 1px solid $accent-color ! important;
    outline: none;
    box-shadow: none;
}

.mx_GroupView_header_name:hover div:not(.mx_GroupView_editable) {
    color: $accent-color;
    cursor: pointer;
}

.mx_GroupView_avatarPicker {
    position: relative;
}

.mx_GroupView_avatarPicker_edit {
    position: absolute;
    top: 50px;
    left: 15px;
}

.mx_GroupView_avatarPicker .mx_Spinner {
    width: 48px;
    height: 48px ! important;
}

.mx_GroupView_header_leftCol {
    flex: 1;
}

.mx_GroupView_header_rightCol {
    display: flex;
    align-items: center;
}

.mx_GroupView_textButton {
    display: inline-block;
}

.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;
    padding-left: 19px;
    margin-right: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid transparent;
}

.mx_GroupView_avatarPicker_label {
    cursor: pointer;
}

.mx_GroupView_cancelButton {
    padding-left: 8px;
}

.mx_GroupView_cancelButton img {
    position: relative;
    top: 5px;
}

.mx_GroupView_body  {
    flex-grow: 1;
}

.mx_GroupView_rooms {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    user-select: none;
}

.mx_GroupView_rooms_header h3 {
    margin-bottom: 10px
}

.mx_GroupView_rooms_header .mx_AccessibleButton {
    padding-left: 14px;
    margin-bottom: 14px;
    height: 24px;
}

.mx_GroupView_rooms_header_addButton {
    display: inline-block;
}

.mx_GroupView_rooms_header_addButton object {
    pointer-events: none;
}

.mx_GroupView_rooms_header_addButton_label {
    display: inline-block;
    vertical-align: top;
    line-height: 24px;
    padding-left: 28px;
    color: $accent-color;
}

.mx_GroupView_rooms .mx_RoomDetailList {
    flex-grow: 1;
    border-top: 1px solid $primary-hairline-color;
    padding-top: 10px;
}

.mx_GroupView .mx_RoomView_messageListWrapper {
    justify-content: flex-start;
}

.mx_GroupView_membershipSection {
    color: $greyed-fg-color;
}

.mx_GroupView_membershipSubSection {
    justify-content: space-between;
    display: flex;
    margin-top: 2px;
    margin-bottom: 2px;
}

.mx_GroupView_membershipSection_description {
    /* To match textButton */
    line-height: 34px;
}

.mx_GroupView_membershipSection .mx_GroupView_textButton {
    margin-right: 0px;
    margin-top: 0px;
    margin-left: 8px;
}

.mx_GroupView_memberSettings_toggle label {
    cursor: pointer;
    user-select: none;
}

.mx_GroupView_memberSettings h3 {
    text-transform: uppercase;
    color: $h3-color;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 10px;
}

.mx_GroupView_memberSettings input {
    margin-right: 6px;
}

.mx_GroupView_featuredThings {
    margin-top: 20px;
}

.mx_GroupView_featuredThings_header {
    font-weight: bold;
    font-size: 120%;
    margin-bottom: 20px;
}

.mx_GroupView_featuredThings_category {
    font-weight: bold;
    font-size: 110%;
    margin-top: 10px;
}

.mx_GroupView_featuredThings_container {
    display: flex;
}

.mx_GroupView_featuredThings_addButton,
.mx_GroupView_featuredThing {
    display: table-cell;
    text-align: center;

    width: 100px;
    margin: 0px 20px;
}

.mx_GroupView_featuredThing {
    position: relative;
}

.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton {
    position: absolute;
    top: -7px;
    right: 11px;
    opacity: 0.4;
}

.mx_GroupView_featuredThing .mx_BaseAvatar {
    /* To prevent misalignment with mx_TintableSvg (in addButton) */
    vertical-align: initial;
}

.mx_GroupView_featuredThings_addButton object {
    pointer-events: none;
}

.mx_GroupView_featuredThing_name {
    word-wrap: break-word;
}

.mx_GroupView_uploadInput {
    display: none;
}

.mx_GroupView_body .gm-scroll-view > *{
    margin: 0px 50px 11px 68px;
}

.mx_GroupView_groupDesc textarea {
    width: 50%;
    height: 150px;
}