element-web/res/css/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 {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mx_GroupView_error {
    margin: auto;
}

.mx_GroupView_header {
    min-height: 52px;
    align-items: center;
    display: flex;
    padding-bottom: 10px;
    padding-left: 19px;
}

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

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

.mx_GroupHeader_button {
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
    height: 20px;
    width: 20px;

    &::before {
        content: '';
        position: absolute;
        height: 20px;
        width: 20px;
        background-color: $groupheader-button-color;
        mask-repeat: no-repeat;
        mask-size: contain;
    }
}

.mx_GroupHeader_editButton::before {
    mask-image: url('$(res)/img/element-icons/settings.svg');
}

.mx_GroupHeader_shareButton::before {
    mask-image: url('$(res)/img/element-icons/room/share.svg');
}

.mx_GroupView_hostingSignup img {
    margin-left: 5px;
}

.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_isUserMember .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;

    overflow: hidden;
}

.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: $font-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: $font-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 input[type='radio'] {
    margin: 10px 10px 0px 10px;
}

.mx_GroupView_label_text {
    display: inline-block;
    max-width: 80%;
    vertical-align: 0.1em;
    line-height: 2em;
}

.mx_GroupView_body {
    flex-grow: 1;
    margin: 0 24px;
}

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

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

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

.mx_GroupView_group {
    border-top: 1px solid $primary-hairline-color;
}

.mx_GroupView_group_disabled {
    opacity: 0.3;
    pointer-events: none;
}

.mx_GroupView_rooms_header_addRow_button {
    display: inline-block;
}

.mx_GroupView_rooms_header_addRow_button object {
    pointer-events: none;
}

.mx_GroupView_rooms_header_addRow_label {
    display: inline-block;
    vertical-align: top;
    line-height: $font-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;
    word-break: break-word;
}

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

.mx_GroupView_membershipSection {
    color: $greyed-fg-color;
    margin-top: 10px;
}

.mx_GroupView_membershipSubSection {
    justify-content: space-between;
    display: flex;
    padding-bottom: 8px;
}

.mx_GroupView_membershipSubSection .mx_Spinner {
    justify-content: flex-end;
}

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

.mx_GroupView_membershipSection_description .mx_BaseAvatar {
    margin-right: 10px;
}

.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 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 img (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 .mx_AutoHideScrollbar > * {
    margin: 11px 50px 50px 68px;
}

.mx_GroupView_groupDesc textarea {
    width: 100%;
    max-width: 100%;
    height: 150px;
}

.mx_GroupView_groupDesc_placeholder,
.mx_GroupView_changeDelayWarning {
    background-color: $info-plinth-bg-color;
    color: $info-plinth-fg-color;
    border-radius: 10px;
    text-align: center;

    margin: 20px 0px;
}

.mx_GroupView_groupDesc_placeholder {
    padding: 100px 20px;
    cursor: pointer;
}

.mx_GroupView_changeDelayWarning {
    padding: 40px 20px;
}

.mx_GroupView_spaceUpgradePrompt {
    padding: 16px 50px;
    background-color: $header-panel-bg-color;
    border-radius: 8px;
    max-width: 632px;
    font-size: $font-15px;
    line-height: $font-24px;
    margin-top: 24px;
    position: relative;

    > h2 {
        font-size: inherit;
        font-weight: $font-semi-bold;
    }

    > p, h2 {
        margin: 0;
    }

    &::before {
        content: "";
        position: absolute;
        height: $font-24px;
        width: 20px;
        left: 18px;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
        background-color: $secondary-fg-color;
    }

    .mx_AccessibleButton {
        width: 16px;
        height: 16px;
        border-radius: 8px;
        background-color: $input-darker-bg-color;
        position: absolute;
        top: 16px;
        right: 16px;

        &::before {
            content: "";
            position: absolute;
            width: inherit;
            height: inherit;
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: 8px;
            mask-image: url('$(res)/img/image-view/close.svg');
            background-color: $secondary-fg-color;
        }
    }
}

.mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar > :not(.mx_MemberInfo_avatar) {
    padding-left: 16px;
    padding-right: 16px;
}