mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-05 05:38:41 +03:00
246 lines
4.7 KiB
SCSS
246 lines
4.7 KiB
SCSS
|
/*
|
||
|
Copyright 2015, 2016 OpenMarket 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.
|
||
|
*/
|
||
|
|
||
|
/* add 20px to the height of the header when editing */
|
||
|
.mx_RoomHeader_editing {
|
||
|
flex: 0 0 93px ! important;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_wrapper {
|
||
|
max-width: 960px;
|
||
|
margin: auto;
|
||
|
height: 70px;
|
||
|
align-items: center;
|
||
|
display: flex;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_leftRow {
|
||
|
margin-left: -2px;
|
||
|
order: 1;
|
||
|
flex: 1;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_spinner {
|
||
|
height: 36px;
|
||
|
order: 2;
|
||
|
padding-left: 12px;
|
||
|
padding-right: 12px;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_textButton {
|
||
|
@mixin mx_DialogButton;
|
||
|
margin-right: 8px;
|
||
|
margin-top: -5px;
|
||
|
order: 2;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_textButton:hover {
|
||
|
@mixin mx_DialogButton_hover;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_textButton_danger {
|
||
|
background-color: $warning-color;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_cancelButton {
|
||
|
order: 2;
|
||
|
cursor: pointer;
|
||
|
padding-left: 12px;
|
||
|
padding-right: 12px;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_rightRow {
|
||
|
margin-top: 4px;
|
||
|
background-color: $primary-bg-color;
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
order: 3;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_info {
|
||
|
display: table-cell;
|
||
|
width: 100%;
|
||
|
vertical-align: middle;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_simpleHeader {
|
||
|
line-height: 70px;
|
||
|
color: $primary-fg-color;
|
||
|
font-size: 22px;
|
||
|
font-weight: bold;
|
||
|
overflow: hidden;
|
||
|
margin-left: 63px;
|
||
|
text-overflow: ellipsis;
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton {
|
||
|
float: right;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon {
|
||
|
margin-left: 14px;
|
||
|
margin-right: 24px;
|
||
|
vertical-align: -4px;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_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_RoomHeader_nametext {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_settingsHint {
|
||
|
color: $settings-grey-fg-color ! important;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_searchStatus {
|
||
|
display: inline-block;
|
||
|
font-weight: normal;
|
||
|
opacity: 0.6;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_settingsButton object {
|
||
|
pointer-events: none;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_name,
|
||
|
.mx_RoomHeader_avatar,
|
||
|
.mx_RoomHeader_avatarPicker,
|
||
|
.mx_RoomHeader_avatarPicker_edit,
|
||
|
.mx_RoomHeader_avatarPicker_remove {
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_avatarPicker_remove {
|
||
|
position: absolute;
|
||
|
top: -11px;
|
||
|
right: -9px;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
|
||
|
color: $accent-color;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_placeholder {
|
||
|
color: $settings-grey-fg-color ! important;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_editable {
|
||
|
border-bottom: 1px solid $strong-input-border-color ! important;
|
||
|
min-width: 150px;
|
||
|
cursor: text;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_editable:focus {
|
||
|
border-bottom: 1px solid $accent-color ! important;
|
||
|
outline: none;
|
||
|
box-shadow: none;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_topic {
|
||
|
vertical-align: bottom;
|
||
|
float: left;
|
||
|
max-height: 38px;
|
||
|
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;
|
||
|
column-width: 960px;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_avatar {
|
||
|
display: table-cell;
|
||
|
width: 48px;
|
||
|
height: 50px;
|
||
|
vertical-align: middle;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_avatar .mx_BaseAvatar_image {
|
||
|
object-fit: cover;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_avatarPicker {
|
||
|
margin-top: 23px;
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_avatarPicker_edit {
|
||
|
margin-left: 16px;
|
||
|
margin-top: 4px;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_avatarPicker_edit > label {
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_avatarPicker_edit > input {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_button {
|
||
|
margin-left: 12px;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_button object {
|
||
|
pointer-events: none;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_voipButton {
|
||
|
display: table-cell;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_voipButtons {
|
||
|
margin-top: 18px;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_pinnedButton {
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_pinsIndicator {
|
||
|
position: absolute;
|
||
|
right: 0;
|
||
|
bottom: 4px;
|
||
|
width: 8px;
|
||
|
height: 8px;
|
||
|
border-radius: 8px;
|
||
|
background-color: $pinned-color;
|
||
|
}
|
||
|
|
||
|
.mx_RoomHeader_pinsIndicatorUnread {
|
||
|
background-color: $pinned-unread-color;
|
||
|
}
|