You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

9502 lines
244 KiB

6 years ago
/* Open Sans lacks combining diacritics, so these will fall through
to the next font. Helevetica's diacritics however do not combine
nicely with Open Sans (on OSX, at least) and result in a huge
horizontal mess. Arial empirically gets it right, hence prioritising
Arial here. */
/*** ImageView ***/
@font-face {
font-family:PostGrotesk-Medium;
src:url('https://status.im/fonts/PostGrotesk-Medium.eot');
src:url('https://status.im/fonts/PostGrotesk-Medium.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Medium.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium') format("svg");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family:PostGrotesk-Book;
src:url('https://status.im/fonts/PostGrotesk-Book.eot');
src:url('https://status.im/fonts/PostGrotesk-Book.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Book.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Book.svg#PostGrotesk-Book') format("svg");
font-weight: 400;
font-style: normal;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1, h2, h3, h4, h5 {
color: #49555F;
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
font-weight: 400 ! important;
}
#mx_theme_secondaryAccentColor {
color: #c0ffee ! important;
}
#mx_theme_tertiaryAccentColor {
color: #c0ffee ! important;
}
/*** ImageView ***/
.mx_RoomSubList_label {
font-size: 13px;
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
letter-spacing: 1px;
}
.mx_SearchBox_search {
color: #fff ! important;
}
.mx_SearchBox_search::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.6) ! important;
}
.mx_SearchBox_search::-moz-placeholder {
color: rgba(255, 255, 255, 0.6) ! important;
}
.mx_RoomList_emptySubListTip, .mx_RoomDropTarget {
font-size: 14px ! important;
border: 1.5px dashed rgba(0,0,0,0.2) ! important;
color: #fff ! important;
background-color: transparent ! important;
border-radius: 6px ! important;
margin-left: 6px ! important;
margin-right: 6px ! important;
margin-top: 8px ! important;
margin-bottom: 7px ! important;
padding: 8px ! important;
}
.mx_RoomDirectory_perm {
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif ! important;
background-color: #fff ! important;
}
.mx_RoomTile_badge, .mx_RoomSubList_badge {
height: 12px ! important;
padding-top: 1px ! important;
padding-bottom: 1px ! important;
}
.mx_RoomSubList_chevron {
top: 8px ! important;
}
.mx_MemberInfo .mx_RoomTile_name {
color: #70808D ! important;
}
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd
Copyright 2017 New Vector 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.
*/
html {
/* hack to stop overscroll bounce on OSX and iOS.
N.B. Breaks things when we have legitimate horizontal overscroll */
height: 100%;
overflow: hidden;
}
body {
font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif;
font-size: 15px;
background-color: #EEF2F5;
color: #70808D;
border: 0px;
margin: 0px;
/* This should render the fonts the same accross browsers */
-webkit-font-smoothing: subpixel-antialiased;
}
div.error, div.warning {
color: #F69E98;
}
h2 {
color: #70808D;
font-weight: 400;
font-size: 18px;
margin-top: 16px;
margin-bottom: 16px;
}
a:hover, a:link, a:visited {
color: #6CC1F6;
}
input[type=text], input[type=password], textarea {
background-color: transparent;
color: #70808D;
}
input[type=text].error, input[type=password].error {
border: 1px solid #F69E98;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
border: 1px solid #6CC1F6;
outline: none;
box-shadow: none;
}
/* Required by Firefox */
textarea {
font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif;
}
/* Prevent ugly dotted highlight around selected elements in Firefox */
::-moz-focus-inner {
border: 0;
}
/* applied to side-panels and messagepanel when in RoomSettings */
.mx_fadable {
opacity: 1;
transition: opacity 0.2s ease-in-out;
}
.mx_fadable.mx_fadable_faded {
opacity: 0.3;
pointer-events: none;
}
/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
Stop the scrollbar view from pushing out the container's overall sizing, which causes
flexbox to adapt to the new size and cause the view to keep growing.
*/
.gm-scrollbar-container .gm-scroll-view {
position: absolute;
}
/* Expand thumbs on hoverover */
.gm-scrollbar {
border-radius: 5px ! important;
}
.gm-scrollbar.-vertical {
width: 6px;
transition: width 120ms ease-out ! important;
}
.gm-scrollbar.-vertical:hover, .gm-scrollbar.-vertical:active {
width: 8px;
transition: width 120ms ease-out ! important;
}
.gm-scrollbar.-horizontal {
height: 6px;
transition: height 120ms ease-out ! important;
}
.gm-scrollbar.-horizontal:hover, .gm-scrollbar.-horizontal:active {
height: 8px;
transition: height 120ms ease-out ! important;
}
#mx_theme_accentColor {
color: #6CC1F6;
}
#mx_theme_secondaryAccentColor {
color: #586C7B;
}
#mx_theme_tertiaryAccentColor {
color: #586C7B;
}
.mx_Dialog_wrapper {
position: fixed;
z-index: 4000;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* Spinner Dialog overide */
.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
width: auto;
border-radius: 8px;
padding: 0px;
box-shadow: none;
}
/* View Source Dialog overide */
.mx_Dialog_wrapper.mx_Dialog_viewsource .mx_Dialog {
padding-left: 10px;
padding-right: 10px;
}
.mx_Dialog {
background-color: #EEF2F5;
color: #747474;
z-index: 4010;
font-weight: 300;
font-size: 15px;
position: relative;
padding-left: 58px;
padding-bottom: 36px;
width: 60%;
max-width: 704px;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
max-height: 80%;
overflow-y: auto;
}
.mx_Dialog_background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #e9e9e9;
opacity: 0.8;
}
.mx_Dialog_lightbox .mx_Dialog_background {
opacity: 0.85;
background-color: #000;
}
.mx_Dialog_lightbox .mx_Dialog {
border-radius: 0px;
background-color: transparent;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
pointer-events: none;
}
.mx_Dialog_cancelButton {
position: absolute;
right: 11px;
top: 13px;
cursor: pointer;
}
.mx_Dialog_cancelButton object {
pointer-events: none;
}
.mx_Dialog_content {
margin: 24px 58px 68px 0;
font-size: 14px;
color: #70808D;
word-wrap: break-word;
}
.mx_Dialog_buttons {
padding-right: 58px;
text-align: right;
}
.mx_Dialog button, .mx_Dialog input[type="submit"] {
/* align images in buttons (eg spinners) */
vertical-align: middle;
border-radius: 8px;
border: 1px solid rgba(199, 206, 209, 0.12);
background-color: #6CC1F6;
font-size: 13px;
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
text-transform: uppercase;
letter-spacing: 1px;
color: #ffffff;
cursor: pointer;
outline: none;
padding: 14px;
box-sizing: border-box;
padding-left: 1.5em;
padding-right: 1.5em;
display: inline-block;
transition: background-color .2s ease;
margin-left: 0px;
margin-right: 8px;
font-weight: 600;
border: 1px solid #6CC1F6 ! important;
color: #6CC1F6;
background-color: #ffffff;
}
.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover {
background-color: #84cfff;
}
.mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus {
-webkit-filter: brightness(125%);
filter: brightness(125%);
}
.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary {
color: #ffffff;
background-color: #6CC1F6;
}
.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {
background-color: #F69E98;
border: solid 1px #F69E98;
color: #ffffff;
}
.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled {
background-color: #747474;
border: solid 1px #747474;
opacity: 0.7;
}
.mx_Dialog_title {
min-height: 16px;
padding-top: 40px;
font-weight: bold;
font-size: 22px;
line-height: 1.4;
color: #70808D;
}
.mx_Dialog_title.danger {
color: #F69E98;
}
.mx_TextInputDialog_label {
text-align: left;
padding-bottom: 12px;
}
.mx_TextInputDialog_input {
font-size: 15px;
border-radius: 3px;
border: 1px solid #c9cfd4;
padding: 9px;
color: #70808D;
background-color: #EEF2F5;
}
.mx_emojione {
height: 1em;
vertical-align: middle;
}
.mx_emojione_selected {
background-color: #6CC1F6;
}
::-moz-selection {
background-color: #6CC1F6;
color: #EEF2F5;
}
::selection {
background-color: #6CC1F6;
color: #EEF2F5;
}
.mx_textButton {
/* align images in buttons (eg spinners) */
vertical-align: middle;
border-radius: 8px;
border: 1px solid rgba(199, 206, 209, 0.12);
background-color: #6CC1F6;
font-size: 13px;
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
text-transform: uppercase;
letter-spacing: 1px;
color: #ffffff;
cursor: pointer;
outline: none;
padding: 14px;
box-sizing: border-box;
padding-left: 1.5em;
padding-right: 1.5em;
display: inline-block;
transition: background-color .2s ease;
height: auto;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 1em;
padding-right: 1em;
}
.mx_textButton:hover {
background-color: #84cfff;
}
.mx_button_row {
margin-top: 69px;
}
.mx_Beta {
color: red;
margin-right: 10px;
position: relative;
top: -3px;
background-color: white;
padding: 0 4px;
border-radius: 3px;
border: 1px solid darkred;
cursor: help;
transition-duration: 200ms;
font-size: smaller;
-webkit-filter: opacity(0.5);
filter: opacity(0.5);
}
.mx_Beta:hover {
color: white;
border: 1px solid gray;
background-color: darkred;
}
.mx_TintableSvgButton {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
.mx_TintableSvgButton object {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
.mx_TintableSvgButton span {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
cursor: pointer;
}
/*
* Open Sans
* Includes extended Latin, Greek, Cyrillic and Vietnamese character sets
*/
/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
*/
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('../../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
/*
* Fira Mono
* Used for monospace copy, i.e. code
*/
@font-face {
font-family: 'Fira Mono';
src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Fira Mono';
src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
.mx_CompatibilityPage {
width: 100%;
height: 100%;
background-color: #e55;
}
.mx_CompatibilityPage_box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 500px;
height: 300px;
border: 1px solid;
padding: 10px;
background-color: #fcc;
}
/*
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.
*/
.mx_ContextualMenu_wrapper {
position: fixed;
z-index: 5000;
}
.mx_ContextualMenu_background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1.0;
z-index: 5000;
}
.mx_ContextualMenu {
border: solid 1px rgba(187, 187, 187, 0.5);
border-radius: 4px;
background-color: #f6f6f6;
color: #70808D;
position: absolute;
padding: 6px;
font-size: 14px;
z-index: 5001;
}
.mx_ContextualMenu.mx_ContextualMenu_right {
right: 8px;
}
.mx_ContextualMenu_chevron_right {
position: absolute;
right: -8px;
top: 0px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 8px solid rgba(187, 187, 187, 0.5);
border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_chevron_right:after {
content:'';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 7px solid #f6f6f6;
border-bottom: 7px solid transparent;
position:absolute;
top: -7px;
right: 1px;
}
.mx_ContextualMenu.mx_ContextualMenu_left {
left: 8px;
}
.mx_ContextualMenu_chevron_left {
position: absolute;
left: -8px;
top: 0px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 8px solid rgba(187, 187, 187, 0.5);
border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_chevron_left:after{
content:'';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #f6f6f6;
border-bottom: 7px solid transparent;
position:absolute;
top: -7px;
left: 1px;
}
.mx_ContextualMenu.mx_ContextualMenu_top {
top: 8px;
}
.mx_ContextualMenu_chevron_top {
position: absolute;
left: 0px;
top: -8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-bottom: 8px solid rgba(187, 187, 187, 0.5);
border-right: 8px solid transparent;
}
.mx_ContextualMenu_chevron_top:after{
content:'';
width: 0;
height: 0;
border-left: 7px solid transparent;
border-bottom: 7px solid #f6f6f6;
border-right: 7px solid transparent;
position:absolute;
left: -7px;
top: 1px;
}
.mx_ContextualMenu.mx_ContextualMenu_bottom {
bottom: 8px;
}
.mx_ContextualMenu_chevron_bottom {
position: absolute;
left: 0px;
bottom: -8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-top: 8px solid rgba(187, 187, 187, 0.5);
border-right: 8px solid transparent;
}
.mx_ContextualMenu_chevron_bottom:after{
content:'';
width: 0;
height: 0;
border-left: 7px solid transparent;
border-top: 7px solid #f6f6f6;
border-right: 7px solid transparent;
position:absolute;
left: -7px;
bottom: 1px;
}
.mx_ContextualMenu_field {
padding: 3px 6px 3px 6px;
cursor: pointer;
white-space: nowrap;
}
.mx_ContextualMenu_spinner {
display: block;
margin: 0 auto;
}
/*
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.
*/
.mx_CreateRoom {
width: 960px;
margin-left: auto;
margin-right: auto;
color: #70808D;
}
.mx_CreateRoom input, .mx_CreateRoom textarea {
border-radius: 3px;
border: 1px solid #c7c7c7;
font-weight: 300;
font-size: 13px;
padding: 9px;
margin-top: 6px;
}
.mx_CreateRoom_description {
width: 330px;
}
/*
Copyright 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.
*/
.mx_FilePanel {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
width: 100%;
overflow-y: auto;
}
.mx_FilePanel .mx_RoomView_messageListWrapper {
margin-right: 20px;
}
.mx_FilePanel .mx_RoomView_MessageList h2 {
display: none;
}
/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
we should make EventTile a base CSS class and customise it specifically
for usage in {Message,File,Notification}Panel. */
.mx_FilePanel .mx_EventTile_avatar {
display: none;
}
/* Overrides for the attachment body tiles */
.mx_FilePanel .mx_EventTile {
word-break: break-word;
}
.mx_FilePanel .mx_EventTile .mx_MImageBody {
margin-right: 0px;
}
.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 14px;
color: #acacac;
}
.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
color: #747474;
}
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
font-size: 11px;
text-align: right;
white-space: nowrap;
}
/* Overides for the sender details line */
.mx_FilePanel .mx_EventTile_senderDetails {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: -2px;
}
.mx_FilePanel .mx_EventTile_senderDetailsLink {
text-decoration: none;
}
.mx_FilePanel .mx_EventTile .mx_SenderProfile {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
line-height: initial;
padding: 0px;
font-size: 11px;
opacity: 1.0;
color: #acacac;
}
.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
text-align: right;
visibility: visible;
position: initial;
font-size: 11px;
opacity: 1.0;
color: #acacac;
}
/* Overrides for the wrappers around the body tile */
.mx_FilePanel .mx_EventTile_line {
margin-right: 0px;
padding-left: 0px;
}
.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
background-color: #EEF2F5;
}
.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
padding-left: 0px;
}
/*
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: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
}
.mx_GroupView_error {
margin: auto;
}
.mx_GroupView_header {
max-width: 960px;
min-height: 70px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-bottom: 10px;
}
.mx_GroupView_header_view {
border-bottom: 1px solid #e5e5e5;
padding-bottom: 0px;
}
.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 {
pointer-events: none;
}
.mx_GroupView_editable {
border-bottom: 1px solid #c7c7c7 ! important;
min-width: 150px;
cursor: text;
}
.mx_GroupView_editable:focus {
border-bottom: 1px solid #6CC1F6 ! important;
outline: none;
box-shadow: none;
}
.mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable) {
color: #6CC1F6;
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 {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
}
.mx_GroupView_header_rightCol {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
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: #70808D;
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: #a2a2a2;
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 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 {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.mx_GroupView_rooms {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 200px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mx_GroupView h3 {
text-transform: uppercase;
color: #3d3b39;
font-weight: 600;
font-size: 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 #e5e5e5;
}
.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: 24px;
padding-left: 28px;
color: #6CC1F6;
}
.mx_GroupView_rooms .mx_RoomDetailList {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
border-top: 1px solid #e5e5e5;
padding-top: 10px;
word-break: break-word;
}
.mx_GroupView .mx_RoomView_messageListWrapper {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.mx_GroupView_membershipSection {
color: #888;
margin-top: 10px;
}
.mx_GroupView_membershipSubSection {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mx_GroupView_membershipSubSection .mx_Spinner {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.mx_GroupView_membershipSection_description {
/* To match textButton */
line-height: 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;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
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: -webkit-box;
display: -ms-flexbox;
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: 11px 50px 0px 68px;
}
.mx_GroupView_groupDesc textarea {
width: 100%;
max-width: 100%;
height: 150px;
}
.mx_GroupView_groupDesc_placeholder, .mx_GroupView_changeDelayWarning {
background-color: #f7f7f7;
color: #888;
border-radius: 10px;
text-align: center;
margin: 20px 0px;
}
.mx_GroupView_groupDesc_placeholder {
padding: 100px 20px;
cursor: pointer;
}
.mx_GroupView_changeDelayWarning {
padding: 40px 20px;
}
/*
Copyright 2016 OpenMarket Ltd
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_HomePage {
max-width: 960px;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.mx_HomePage iframe {
display: block;
width: 100%;
height: 100%;
border: 0px;
}
.mx_HomePage_body {
}
.mx_HomePage_guest_warning {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: #586C7B;
border: 1px solid #6CC1F6;
margin: 20px;
padding: 20px 40px;
border-radius: 5px;
}
.mx_HomePage_guest_warning img {
padding-right: 10px;
}
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2018 New Vector 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_LeftPanel {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mx_LeftPanel_container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/* LeftPanel 235px */
-webkit-box-flex: 0;
-ms-flex: 0 0 235px;
flex: 0 0 235px;
}
.mx_LeftPanel_container.mx_LeftPanel_container_hasTagPanel {
/* TagPanel 60px + LeftPanel 235px */
-webkit-box-flex: 0;
-ms-flex: 0 0 295px;
flex: 0 0 295px;
}
.mx_LeftPanel_container_collapsed {
/* Collapsed LeftPanel 60px */
-webkit-box-flex: 0;
-ms-flex: 0 0 60px;
flex: 0 0 60px;
}
.mx_LeftPanel_container_collapsed.mx_LeftPanel_container_hasTagPanel {
/* TagPanel 60px + Collapsed LeftPanel 60px */
-webkit-box-flex: 0;
-ms-flex: 0 0 120px;
flex: 0 0 120px;
}
.mx_LeftPanel_hideButton {
position: absolute;
top: 10px;
right: 0px;
padding: 8px;
cursor: pointer;
}
.mx_LeftPanel_callView {
}
.mx_LeftPanel .mx_AppTile_mini {
height: 132px;
}
.mx_LeftPanel .mx_RoomList_scrollbar {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
overflow-y: auto;
z-index: 6;
}
.mx_LeftPanel.collapsed .mx_BottomLeftMenu {
-webkit-box-flex: 0;
-ms-flex: 0 0 160px;
flex: 0 0 160px;
margin-bottom: 9px;
}
.mx_LeftPanel .mx_BottomLeftMenu {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
border-top: 1px solid rgba(0, 0, 0, 0.2);
margin-left: 16px; /* gutter */
margin-right: 16px; /* gutter */
-webkit-box-flex: 0;
-ms-flex: 0 0 60px;
flex: 0 0 60px;
z-index: 1;
}
.mx_LeftPanel .mx_BottomLeftMenu_options {
margin-top: 18px;
}
.mx_BottomLeftMenu_options object {
pointer-events: none;
}
.collapsed .mx_RoleButton {
margin-right: 0px ! important;
padding-top: 3px ! important;
padding-bottom: 3px ! important;
}
.mx_BottomLeftMenu_options > div {
display: inline-block;
}
.mx_BottomLeftMenu_options .mx_RoleButton {
margin-left: 0px;
margin-right: 10px;
height: 30px;
}
.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings {
float: right;
}
.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings .mx_RoleButton {
margin-right: 0px;
}
.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
float: none;
}
.mx_MatrixChat_useCompactLayout .mx_LeftPanel .mx_BottomLeftMenu {
-webkit-box-flex: 0;
-ms-flex: 0 0 50px;
flex: 0 0 50px;
}
.mx_MatrixChat_useCompactLayout .mx_LeftPanel.collapsed .mx_BottomLeftMenu {
-webkit-box-flex: 0;
-ms-flex: 0 0 160px;
flex: 0 0 160px;
}
.mx_MatrixChat_useCompactLayout .mx_LeftPanel .mx_BottomLeftMenu_options {
margin-top: 12px;
}
/*
Copyright 2017 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.
*/
.mx_LoginBox {
min-height: 24px;
height: unset !important;
padding-top: 13px !important;
padding-bottom: 14px !important;
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.mx_LoginBox_loginButton_wrapper {
text-align: center;
width: 100%;
}
.mx_LoginBox_loginButton, .mx_LoginBox_registerButton {
margin-top: 3px;
height: 40px;
border: 0px;
border-radius: 40px;
margin-left: 4px;
margin-right: 4px;
min-width: 80px;
background-color: #6CC1F6;
color: #EEF2F5;
cursor: pointer;
font-size: 15px;
padding: 0 11px;
word-break: break-word;
}
/*
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.
*/
.mx_MatrixChat_splash {
position: relative;
height: 100%;
}
.mx_MatrixChat_splashButtons {
text-align: center;
width: 100%;
position: absolute;
bottom: 30px;
}
.mx_MatrixChat_wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
height: 100%;
}
.mx_MatrixToolbar {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
height: 40px;
}
.mx_MatrixChat_toolbarShowing {
height: auto;
}
.mx_MatrixChat {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.mx_MatrixChat_syncError {
color: #ffffff;
background-color: #DF2A8B;
border-radius: 5px;
display: table;
padding: 30px;
position: absolute;
top: 100px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.mx_MatrixChat .mx_LeftPanel {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
background-color: #586C7B;
-webkit-box-flex: 0;
-ms-flex: 0 0 235px;
flex: 0 0 235px;
}
.mx_MatrixChat .mx_LeftPanel.collapsed {
-webkit-box-flex: 0;
-ms-flex: 0 0 60px;
flex: 0 0 60px;
}
.mx_MatrixChat .mx_MatrixChat_middlePanel {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
padding-left: 20px;
padding-right: 22px;
background-color: #EEF2F5;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
/* Experimental fix for https://github.com/vector-im/vector-web/issues/947
and https://github.com/vector-im/vector-web/issues/946.
Empirically this stops the MessagePanel's width exploding outwards when
gemini is in 'prevented' mode
*/
overflow-x: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/* To fix https://github.com/vector-im/riot-web/issues/3298 where Safari
needed height 100% all the way down to the HomePage. Height does not
have to be auto, empirically.
*/
height: 100%;
}
.mx_MatrixChat .mx_RightPanel {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
-webkit-box-flex: 0;
-ms-flex: 0 0 235px;
flex: 0 0 235px;
}
.mx_MatrixChat .mx_RightPanel.collapsed {
-webkit-box-flex: 0;
-ms-flex: 0 0 122px;
flex: 0 0 122px;
}
/*
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_MyGroups {
max-width: 960px;
margin-left: auto;
margin-right: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mx_MyGroups .mx_RoomHeader_simpleHeader {
margin-left: 0px;
}
.mx_MyGroups_header {
/* Keep mid-point of create button aligned with icon in page header */
margin-left: 2px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.mx_MyGroups_headerCard {
-webkit-box-flex: 1;
-ms-flex: 1 0 50%;
flex: 1 0 50%;
margin-bottom: 30px;
min-width: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button {
margin-right: 13px;
height: 50px;
}
.mx_MyGroups_headerCard_button object {
/* Otherwise the SVG object absorbs clicks and the button doesn't work */
pointer-events: none;
}
.mx_MyGroups_headerCard_header {
font-weight: bold;
margin-bottom: 10px;
}
.mx_MyGroups_headerCard_content {
padding-right: 15px;
}
/* Until the button is wired up */
.mx_MyGroups_joinBox {
visibility: hidden;
/* When joinBox wraps onto its own row, it should take up zero height so
that there isn't an awkward gap between MyGroups_createBox and
MyGroups_content.
*/
height: 0px;
margin: 0px;
}
.mx_MyGroups_content {
margin-left: 2px;
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mx_MyGroups_placeholder {
background-color: #f7f7f7;
color: #888;
line-height: 400px;
border-radius: 10px;
text-align: center;
}
.mx_MyGroups_joinedGroups {
border-top: 1px solid #e5e5e5;
overflow-x: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-flow: wrap;
flex-flow: wrap;
-ms-flex-line-pack: start;
align-content: flex-start;
}
.mx_MyGroups_joinedGroups .mx_GroupTile {
min-width: 300px;
max-width: 33%;
-webkit-box-flex: 1;
-ms-flex: 1 0 300px;
flex: 1 0 300px;
height: 75px;
margin: 10px 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
cursor: pointer;
}
.mx_GroupTile_avatar {
cursor: -webkit-grab, -webkit-grab;
cursor: grab, -webkit-grab;
}
.mx_GroupTile_profile {
margin-left: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.mx_GroupTile_profile .mx_GroupTile_name, .mx_GroupTile_profile .mx_GroupTile_groupId, .mx_GroupTile_profile .mx_GroupTile_desc {
padding-right: 10px;
}
.mx_GroupTile_profile .mx_GroupTile_name {
margin: 0px;
font-size: 15px;
}
.mx_GroupTile_profile .mx_GroupTile_groupId {
font-size: 13px;
}
.mx_GroupTile_profile .mx_GroupTile_desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 13px;
max-height: 36px;
overflow: hidden;
}
.mx_GroupTile_profile .mx_GroupTile_groupId {
opacity: 0.7;
}
/*
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.
*/
.mx_NotificationPanel {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
width: 100%;
overflow-y: auto;
}
.mx_NotificationPanel .mx_RoomView_messageListWrapper {
margin-right: 20px;
}
.mx_NotificationPanel .mx_RoomView_MessageList h2 {
margin-left: 0px;
}
/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
we should make EventTile a base CSS class and customise it specifically
for usage in {Message,File,Notification}Panel. */
.mx_NotificationPanel .mx_EventTile {
word-break: break-word;
}
.mx_NotificationPanel .mx_EventTile_roomName {
font-weight: bold;
font-size: 14px;
}
.mx_NotificationPanel .mx_EventTile_roomName a {
color: #70808D;
}
.mx_NotificationPanel .mx_EventTile_avatar {
top: 8px;
left: 0px;
}
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile, .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
color: #70808D;
font-size: 12px;
display: inline;
padding-left: 0px;
}
.mx_NotificationPanel .mx_EventTile_senderDetails {
padding-left: 32px;
padding-top: 8px;
position: relative;
}
.mx_NotificationPanel .mx_EventTile_roomName a, .mx_NotificationPanel .mx_EventTile_senderDetails a {
text-decoration: none ! important;
}
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
visibility: visible;
position: initial;
display: inline;
}
.mx_NotificationPanel .mx_EventTile_line {
margin-right: 0px;
padding-left: 32px;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
}
.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
background-color: #EEF2F5;
}
.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
padding-left: 0px;
}
.mx_NotificationPanel .mx_EventTile_content {
margin-right: 0px;
}
/*
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.
*/
.mx_RightPanel {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mx_RightPanel_header {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
border-bottom: 1px solid #e5e5e5;
margin-right: 20px;
-webkit-box-flex: 0;
-ms-flex: 0 0 70px;
flex: 0 0 70px;
}
/** Fixme - factor this out with the main header **/
.mx_RightPanel_headerButtonGroup {
margin-top: 6px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
background-color: #EEF2F5;
margin-left: 0px;
}
.mx_RightPanel_headerButton {
cursor: pointer;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
vertical-align: top;
padding-left: 4px;
padding-right: 5px;
text-align: center;
position: relative;
}
.mx_RightPanel_headerButton object {
pointer-events: none;
padding-bottom: 3px;
}
.mx_RightPanel_headerButton_highlight {
width: 25px;
height: 5px;
border-radius: 5px;
background-color: #6CC1F6;
opacity: 0.2;
}
.mx_RightPanel_headerButton_badge {
font-size: 11px;
color: #6CC1F6;
font-weight: bold;
padding-bottom: 2px;
}
.mx_RightPanel_collapsebutton {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: right;
margin-top: 20px;
}
.mx_RightPanel .mx_MemberList, .mx_RightPanel .mx_MemberInfo, .mx_RightPanel .mx_GroupRoomList, .mx_RightPanel_blank {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
}
.mx_RightPanel .mx_RoomView_messagePanelSpinner {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
margin: auto;
}
.mx_RightPanel_footer {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
border-top: 1px solid #e5e5e5;
margin-right: 20px;
-webkit-box-flex: 0;
-ms-flex: 0 0 60px;
flex: 0 0 60px;
}
.mx_RightPanel_footer .mx_RightPanel_invite {
font-size: 14px;
color: #70808D;
padding-top: 13px;
padding-left: 5px;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.collapsed .mx_RightPanel_footer .mx_RightPanel_invite {
display: none;
}
.mx_RightPanel_invite .mx_RightPanel_icon object {
pointer-events: none;
}
.mx_RightPanel_invite .mx_RightPanel_message {
padding-left: 10px;
line-height: 18px;
}
.mx_MatrixChat_useCompactLayout .mx_RightPanel_footer {
-webkit-box-flex: 0;
-ms-flex: 0 0 50px;
flex: 0 0 50px;
}
.mx_MatrixChat_useCompactLayout .mx_RightPanel_footer .mx_RightPanel_invite {
line-height: 25px;
padding-top: 8px;
}
/*
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.
*/
.mx_RoomDirectory {
max-width: 960px;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 12px;
color: #70808D;
word-break: break-word;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mx_RoomDirectory .mx_RoomHeader_simpleHeader {
margin-left: 0px;
}
.mx_RoomDirectory_list {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mx_RoomDirectory_list .mx_RoomView_messageListWrapper {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.mx_RoomDirectory_listheader {
display: table;
table-layout: fixed;
width: 100%;
margin-top: 12px;
margin-bottom: 12px;
border-spacing: 5px;
}
.mx_RoomDirectory_searchbox {
display: table-cell;
vertical-align: middle;
}
.mx_RoomDirectory_listheader .mx_NetworkDropdown {
display: table-cell;
width: 200px;
}
.mx_RoomDirectory_tableWrapper {
overflow-y: auto;
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
}
.mx_RoomDirectory_table {
font-size: 14px;
color: #70808D;
width: 100%;
text-align: left;
table-layout: fixed;
}
.mx_RoomDirectory_roomAvatar {
width: 24px;
padding-left: 12px;
padding-right: 24px;
vertical-align: top;
}
.mx_RoomDirectory_roomDescription {
padding-bottom: 16px;
}
.mx_RoomDirectory_name {
display: inline-block;
font-weight: 600;
}
.mx_RoomDirectory_perms {
display: inline-block;
}
.mx_RoomDirectory_perm {
display: inline;
padding-left: 5px;
padding-right: 5px;
margin-right: 5px;
height: 15px;
border-radius: 11px;
background-color: #586C7B;
text-transform: uppercase;
font-weight: 600;
font-size: 11px;
color: #6CC1F6;
}
.mx_RoomDirectory_topic {
cursor: initial;
}
.mx_RoomDirectory_alias {
font-size: 12px;
color: #a2a2a2;
}
.mx_RoomDirectory_roomMemberCount {
text-align: right;
width: 100px;
padding-right: 10px;
}
.mx_RoomDirectory_table tr {
padding-bottom: 10px;
cursor: pointer;
}
/*
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.
*/
.mx_RoomStatusBar {
margin-left: 65px;
min-height: 50px;
}
/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
.mx_RoomStatusBar_indicator {
padding-left: 17px;
padding-right: 12px;
margin-left: -73px;
margin-top: 15px;
float: left;
width: 24px;
text-align: center;
}
.mx_RoomStatusBar_callBar {
height: 50px;
line-height: 50px;
}
.mx_RoomStatusBar_placeholderIndicator span {
color: #70808D;
opacity: 0.5;
position: relative;
top: -4px;
/*
animation-duration: 1s;
animation-name: bounce;
animation-direction: alternate;
animation-iteration-count: infinite;
*/
}
.mx_RoomStatusBar_placeholderIndicator span:nth-child(1) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.mx_RoomStatusBar_placeholderIndicator span:nth-child(2) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.mx_RoomStatusBar_placeholderIndicator span:nth-child(3) {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
@-webkit-keyframes bounce {
from {
opacity: 0.5;
top: 0;
}
to {
opacity: 0.2;
top: -3px;
}
}
@keyframes bounce {
from {
opacity: 0.5;
top: 0;
}
to {
opacity: 0.2;
top: -3px;
}
}
.mx_RoomStatusBar_typingIndicatorAvatars {
width: 52px;
margin-top: -1px;
text-align: left;
}
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
margin-right: -12px;
border: 1px solid #EEF2F5;
}
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
padding-left: 1px;
padding-top: 1px;
}
.mx_RoomStatusBar_typingIndicatorRemaining {
display: inline-block;
color: #acacac;
background-color: #ddd;
border: 1px solid #EEF2F5;
border-radius: 40px;
width: 24px;
height: 24px;
line-height: 24px;
font-size: 0.8em;
vertical-align: top;
text-align: center;
position: absolute;
}
.mx_RoomStatusBar_scrollDownIndicator {
cursor: pointer;
padding-left: 1px;
}
.mx_RoomStatusBar_unreadMessagesBar {
padding-top: 10px;
color: #F69E98;
cursor: pointer;
}
.mx_RoomStatusBar_connectionLostBar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 19px;
min-height: 58px;
}
.mx_RoomStatusBar_connectionLostBar img {
padding-left: 10px;
padding-right: 22px;
vertical-align: middle;
float: left;
}
.mx_RoomStatusBar_connectionLostBar_title {
color: #F69E98;
}
.mx_RoomStatusBar_connectionLostBar_desc {
color: #70808D;
font-size: 13px;
opacity: 0.5;
padding-bottom: 20px;
}
.mx_RoomStatusBar_resend_link {
color: #70808D ! important;
text-decoration: underline ! important;
cursor: pointer;
}
.mx_RoomStatusBar_typingBar {
height: 50px;
line-height: 50px;
color: #70808D;
opacity: 0.5;
overflow-y: hidden;
display: block;
}
.mx_RoomStatusBar_isAlone {
height: 50px;
line-height: 50px;
color: #70808D;
opacity: 0.5;
overflow-y: hidden;
display: block;
}
.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar {
min-height: 40px;
}
.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_indicator {
margin-top: 10px;
}
.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_callBar {
height: 40px;
line-height: 40px;
}
.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_typingBar {
height: 40px;
line-height: 40px;
}
/*
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.
*/
.mx_RoomSubList {
display: table;
table-layout: fixed;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
.mx_RoomSubList_labelContainer {
height: 31px; /* mx_RoomSubList_label height including border */
width: 235px; /* LHS Panel width */
position: relative;
}
.mx_RoomSubList_label {
position: relative;
text-transform: uppercase;
color: #ffffff;
font-weight: 600;
font-size: 12px;
width: 203px; /* padding + width = LHS Panel width */
height: 19px; /* height + padding = 31px = mx_RoomSubList_label height */
padding-left: 16px; /* gutter */
padding-right: 16px; /* gutter */
padding-top: 6px;
padding-bottom: 6px;
cursor: pointer;
background-color: #586C7B;
}
.mx_RoomSubList_label.mx_RoomSubList_fixed {
position: fixed;
top: 0;
z-index: 5;
/* pointer-events: none; */
}
.collapsed .mx_RoomSubList_label {
height: 17px;
width: 28px; /* collapsed LHS Panel width */
}
.collapsed .mx_RoomSubList_labelContainer {
width: 28px; /* collapsed LHS Panel width */
}
.mx_RoomSubList_roomCount {
display: inline-block;
font-size: 12px;
font-weight: normal;
color: #6CC1F6;
padding-left: 5px;
text-transform: none;
}
.collapsed .mx_RoomSubList_roomCount {
display: none;
}
.mx_RoomSubList_badge {
display: inline-block;
min-width: 15px;
height: 15px;
position: absolute;
right: 8px; /*gutter */
top: 7px;
border-radius: 8px;
color: #ffffff;
font-weight: 600;
font-size: 10px;
text-align: center;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
background-color: #6CC1F6;
}
.mx_RoomSubList_label .mx_RoomSubList_badge:hover {
-webkit-filter: brightness(125%);
filter: brightness(125%);
}
/*
.collapsed .mx_RoomSubList_badge {
display: none;
}
*/
.mx_RoomSubList_badgeHighlight {
background-color: #F69E98;
}
/* This is the bottom of the speech bubble */
.mx_RoomSubList_badgeHighlight:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
margin-left: 5px;
border-top: 5px solid #F69E98;
border-right: 7px solid transparent;
}
/* Hide the bottom of speech bubble */
.collapsed .mx_RoomSubList_badgeHighlight:after {
display: none;
}
.mx_RoomSubList_chevron {
pointer-events: none;
position: absolute;
right: 41px;
top: 11px;
}
.mx_RoomSubList_chevronDown {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #ffffff;
}
.mx_RoomSubList_chevronUp {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 6px solid #ffffff;
}
.mx_RoomSubList_chevronRight {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 6px solid #ffffff;
border-bottom: 5px solid transparent;
}
/* The overflow section */
.mx_RoomSubList_ellipsis {
display: block;
line-height: 11px;
height: 18px;
position: relative;
cursor: pointer;
font-size: 13px;
background-color: #586C7B;
}
.collapsed .mx_RoomSubList_ellipsis {
height: 20px;
}
.mx_RoomSubList_line {
display: inline-block;
width: 159px;
border-top: dotted 2px #6CC1F6;
vertical-align: middle;
}
.collapsed .mx_RoomSubList_line {
display: none;
}
.mx_RoomSubList_more {
display: inline-block;
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
text-align: left;
color: #6CC1F6;
padding-left: 7px;
padding-right: 7px;
padding-left: 7px;
vertical-align: middle;
}
.collapsed .mx_RoomSubList_more {
display: none;
}
.mx_RoomSubList_moreBadge {
display: inline-block;
min-width: 15px;
height: 13px;
position: absolute;
right: 8px; /*gutter */
top: -2px;
border-radius: 8px;
border: solid 1px #6CC1F6;
color: #ffffff;
font-weight: 600;
font-size: 10px;
text-align: center;
padding-top: 1px;
padding-left: 3px;
padding-right: 3px;
background-color: #EEF2F5;
vertical-align: middle;
}
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify {
background-color: #6CC1F6;
border: 0;
padding-top: 3px;
padding-left: 4px;
padding-right: 4px;
}
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight {
background-color: #F69E98;
border: 0;
padding-top: 3px;
padding-left: 4px;
padding-right: 4px;
}
.collapsed .mx_RoomSubList_moreBadge {
position: static;
margin-left: 16px;
margin-top: 2px;
}
.mx_RoomSubList_ellipsis .mx_RoomSubList_chevronDown {
position: relative;
top: 4px;
left: 2px;
}
/*
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.
*/
.mx_RoomView {
word-wrap: break-word;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mx_RoomView .mx_RoomHeader {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
-webkit-box-flex: 0;
-ms-flex: 0 0 70px;
flex: 0 0 70px;
}
.mx_RoomView_fileDropTarget {
min-width: 0px;
max-width: 960px;
width: 100%;
font-size: 18px;
text-align: center;
pointer-events: none;
padding-left: 12px;
padding-right: 12px;
margin-left: -12px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: rgba(255,255,255,0.5);
border: 2px #e1dddd solid;
border-bottom: none;
position: absolute;
top: 70px;
bottom: 0px;
z-index: 3000;
}
.mx_RoomView_fileDropTargetLabel {
top: 50%;
width: 100%;
margin-top: -50px;
position: absolute;
}
.mx_RoomView_auxPanel {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
min-width: 0px;
max-width: 960px;
width: 100%;
margin: 0px auto;
overflow: auto;
border-bottom: 1px solid #e5e5e5;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.mx_RoomView_auxPanel_apps {
max-width: 1920px ! important;
}
.mx_RoomView_body {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mx_RoomView_body .mx_RoomView_topUnreadMessagesBar {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.mx_RoomView_body .mx_RoomView_messagePanel {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.mx_RoomView_body .mx_RoomView_messagePanelSpinner {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
margin: auto;
}
.mx_RoomView_body .mx_RoomView_statusArea {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.mx_RoomView_body .mx_MessageComposer {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.mx_RoomView_messagePanel {
width: 100%;
overflow-y: auto;
}
.mx_RoomView_messageListWrapper {
max-width: 960px;
margin: auto;
min-height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.mx_RoomView_empty {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
font-size: 13px;
padding-left: 3em;
padding-right: 3em;
margin-right: 20px;
margin-top: 33%;
text-align: center;
}
.mx_RoomView_MessageList {
width: 100%;
list-style-type: none;
padding: 0px;
}
.mx_RoomView_MessageList li {
clear: both;
}
li.mx_RoomView_myReadMarker_container {
height: 0px;
margin: 0px;
padding: 0px;
border: 0px;
}
hr.mx_RoomView_myReadMarker {
border-top: solid 1px #6CC1F6;
border-bottom: solid 1px #6CC1F6;
margin-top: 0px;
position: relative;
top: -1px;
z-index: 1;
}
.mx_RoomView_statusArea {
width: 100%;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
max-height: 0px;
background-color: #EEF2F5;
z-index: 1000;
overflow: hidden;
transition: all .2s ease-out;
}
.mx_RoomView_statusArea_expanded {
max-height: 100px;
}
.mx_RoomView_statusAreaBox {
max-width: 960px;
margin: auto;
min-height: 50px;
}
.mx_RoomView_statusAreaBox_line {
margin-left: 65px;
border-top: 1px solid #e5e5e5;
height: 1px;
}
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
background-color: #EEF2F5;
}
.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
color: #ffffff;
opacity: 1.0;
}
.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line {
margin-top: 2px;
border: none;
height: 0px;
}
.mx_RoomView_inCall .mx_MessageComposer_wrapper {
border-top: 2px hidden;
padding-top: 1px;
}
.mx_RoomView_inCall .mx_RoomView_statusAreaBox {
background-color: #6CC1F6;
color: #ffffff;
position: relative;
}
.mx_RoomView_voipChevron {
position: absolute;
bottom: -11px;
right: 11px;
}
.mx_RoomView_voipButton {
float: right;
margin-right: 13px;
margin-top: 10px;
cursor: pointer;
}
.mx_RoomView_voipButton object {
pointer-events: none;
}
.mx_RoomView .mx_MessageComposer {
width: 100%;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin-right: 2px;
}
.mx_RoomView_ongoingConfCallNotification {
width: 100%;
text-align: center;
background-color: #F69E98;
color: #ffffff;
font-weight: bold;
padding: 6px 0;
cursor: pointer;
}
.mx_RoomView_ongoingConfCallNotification a {
color: #ffffff ! important;
}
.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList {
margin-bottom: 4px;
}
.mx_MatrixChat_useCompactLayout .mx_RoomView_statusAreaBox {
min-height: 42px;
}
/*
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.
*/
.mx_SearchBox {
height: 24px;
margin-left: 16px;
margin-right: 16px;
padding-top: 24px;
padding-bottom: 22px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mx_SearchBox_searchButton {
margin-right: 10px;
margin-top: 5px;
pointer-events: none;
}
.mx_SearchBox_closeButton {
cursor: pointer;
margin-top: -5px;
}
.mx_SearchBox_search {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 0px;
font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif;
font-size: 12px;
margin-top: -2px;
height: 24px;
border: 0px ! important;
/* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */
border: 0px;
}
.mx_SearchBox_minimise, .mx_SearchBox_maximise {
margin-top: 3px;
cursor: pointer;
}
.mx_SearchBox_minimise {
margin-left: 10px;
}
.mx_SearchBox_maximise {
margin-left: 9px;
}
.mx_SearchBox object {
pointer-events: none;
}
/*
Copyright 2017 New Vector 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_TagPanel {
-webkit-box-flex: 0;
-ms-flex: 0 0 60px;
flex: 0 0 60px;
background-color: #DBEBF6;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.mx_TagPanel_items_selected {
cursor: pointer;
}
.mx_TagPanel .mx_TagPanel_clearButton_container {
/* Constant height within flex mx_TagPanel */
height: 70px;
width: 60px;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.mx_TagPanel .mx_TagPanel_clearButton object {
/* Same as .mx_SearchBox padding-top */
margin-top: 24px;
pointer-events: none;
}
.mx_TagPanel .mx_TagPanel_divider {
height: 0px;
width: 42px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.mx_TagPanel .mx_TagPanel_scroller {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.mx_TagPanel .mx_TagPanel_tagTileContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
}
.mx_TagPanel .mx_TagTile {
padding: 6px 3px;
opacity: 0.5;
position: relative;
}
.mx_TagPanel .mx_TagTile:focus, .mx_TagPanel .mx_TagTile:hover, .mx_TagPanel .mx_TagTile.mx_TagTile_selected {
opacity: 1;
}
.mx_TagPanel .mx_TagTile.mx_TagTile_selected {
/* To offset border of mx_TagTile_avatar */
padding: 3px 0px;
}
.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar {
border: 3px solid #6CC1F6;
background-color: #6CC1F6;
border-radius: 60px;
/* In case this is a "initial" avatar */
display: block;
height: 35px;
width: 35px;
}
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
-webkit-filter: none;
filter: none;
}
.mx_TagTile_tooltip {
position: relative;
top: -30px;
left: 5px;
}
.mx_TagTile_context_button {
min-width: 15px;
height: 15px;
position: absolute;
right: -5px;
top: 1px;
border-radius: 8px;
background-color: #dbdbdb;
color: #ffffff;
font-weight: 600;
font-size: 10px;
text-align: center;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
}
.mx_TagPanel_groupsButton {
margin-bottom: 17px;
margin-top: 18px;
height: 25px;
}
.mx_TagPanel_groupsButton object {
pointer-events: none;
}
/*
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.
*/
.mx_UploadBar {
position: relative;
}
.mx_UploadBar_uploadProgressOuter {
height: 5px;
margin-left: 63px;
margin-top: -1px;
padding-bottom: 5px;
}
.mx_UploadBar_uploadProgressInner {
background-color: #6CC1F6;
height: 5px;
}
.mx_UploadBar_uploadFilename {
margin-top: 5px;
margin-left: 65px;
opacity: 0.5;
color: #70808D;
}
.mx_UploadBar_uploadIcon {
float: left;
margin-top: 5px;
margin-left: 14px;
}
.mx_UploadBar_uploadCancel {
float: right;
margin-top: 5px;
margin-right: 10px;
position: relative;
opacity: 0.6;
cursor: pointer;
z-index: 1;
}
.mx_UploadBar_uploadBytes {
float: right;
margin-top: 5px;
margin-right: 30px;
color: #6CC1F6;
}
/*
Copyright 2015, 2016 OpenMarket Ltd
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_UserSettings {
max-width: 960px;
width: 100%;
margin-left: auto;
margin-right: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mx_UserSettings .mx_RoomHeader {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
-webkit-box-flex: 0;
-ms-flex: 0 0 70px;
flex: 0 0 70px;
}
.mx_UserSettings_body {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
margin-top: -20px;
overflow-y: auto;
}
.mx_UserSettings h3 {
clear: both;
margin-left: 63px;
text-transform: uppercase;
color: #3d3b39;
font-weight: 600;
font-size: 13px;
margin-top: 26px;
margin-bottom: 10px;
}
.mx_UserSettings_section h3 {
margin-left: 0px;
}
.mx_UserSettings_spinner {
display: inline-block;
vertical-align: middle;
margin-right: 12px;
width: 32px;
height: 32px;
}
.mx_UserSettings_button {
/* align images in buttons (eg spinners) */
vertical-align: middle;
border-radius: 8px;
border: 1px solid rgba(199, 206, 209, 0.12);
background-color: #6CC1F6;
font-size: 13px;
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
text-transform: uppercase;
letter-spacing: 1px;
color: #ffffff;
cursor: pointer;
outline: none;
padding: 14px;
box-sizing: border-box;
padding-left: 1.5em;
padding-right: 1.5em;
display: inline-block;
transition: background-color .2s ease;
display: inline;
margin: auto;
}
.mx_UserSettings_button:hover {
background-color: #84cfff;
}
.mx_UserSettings_button.danger {
background-color: #F69E98;
}
.mx_UserSettings_section {
margin-left: 63px;
margin-top: 28px;
margin-bottom: 28px;
}
.mx_UserSettings_cryptoSection ul {
display: table;
}
.mx_UserSettings_cryptoSection li {
display: table-row;
}
.mx_UserSettings_cryptoSection label, .mx_UserSettings_cryptoSection span {
display: table-cell;
padding-right: 1em;
}
.mx_UserSettings_passwordWarning {
/* To move the "Sign out" button out of the way */
clear: both;
color: #F69E98;
margin-bottom: 5px;
}
.mx_UserSettings_importExportButtons {
padding-top: 10px;
padding-left: 40px;
}
.mx_UserSettings_importExportButtons .mx_UserSettings_button {
margin-right: 1em;
}
.mx_UserSettings_toggle input {
width: 16px;
margin-right: 8px;
margin-bottom: 8px;
}
.mx_UserSettings_toggle label {
padding-bottom: 21px;
}
.mx_UserSettings_accountTable
.mx_UserSettings_notifTable
{
display: table;
}
.mx_UserSettings_notifTable .mx_Spinner {
position: absolute;
}
.mx_UserSettings_language {
width: 200px;
}
.mx_UserSettings_webRtcDevices_dropdown {
width: 50%;
}
.mx_UserSettings_profileTable
{
display: table;
float: left;
}
.mx_UserSettings_profileTableRow
{
display: table-row;
}
.mx_UserSettings_profileLabelCell
{
padding-bottom: 21px;
display: table-cell;
font-weight: bold;
padding-right: 24px;
}
.mx_UserSettings_profileInputCell {
display: table-cell;
padding-bottom: 21px;
width: 240px;
}
.mx_UserSettings_profileInputCell input, .mx_UserSettings_profileInputCell .mx_EditableText
{
display: inline-block;
border: 0px;
border-bottom: 1px solid rgba(151, 151, 151, 0.5);
padding: 0px;
width: 240px;
color: rgba(74, 74, 74, 0.9);
font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
font-size: 16px;
}
.mx_UserSettings_threepidButton {
display: table-cell;
padding-left: 0.5em;
position: relative;
cursor: pointer;
}
.mx_UserSettings_phoneSection {
display:table;
}
.mx_UserSettings_phoneCountry {
width: 70px;
display: table-cell;
}
input.mx_UserSettings_phoneNumberField {
margin-left: 3px;
width: 172px;
border: 1px solid transparent;
}
.mx_UserSettings_changePasswordButton {
float: right;
margin-right: 32px;
margin-left: 32px;
}
.mx_UserSettings_logout {
float: right;
margin-right: 32px;
margin-left: 32px;
}
.mx_UserSettings_avatarPicker {
margin-left: 32px;
margin-right: 32px;
float: right;
cursor: pointer;
}
.mx_UserSettings_avatarPicker_img .mx_BaseAvatar_image {
-o-object-fit: cover;
object-fit: cover;
}
.mx_UserSettings_avatarPicker_edit {
text-align: center;
margin-top: 10px;
}
.mx_UserSettings_avatarPicker_edit img {
cursor: pointer;
}
.mx_UserSettings_avatarPicker_edit > input {
display: none;
}
.mx_UserSettings_avatarPicker_imgContainer {
display: inline-block;
}
.mx_UserSettings_avatarPicker_remove {
display: inline-block;
float: right;
margin-right: -15px;
}
.mx_UserSettings_advanced_spoiler, .mx_UserSettings_link {
cursor: pointer;
color: #6CC1F6;
word-break: break-all;
}
.mx_UserSettings_analyticsModal table {
margin: 10px 0px;
}
/*
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.
*/
.mx_ViewSource pre {
text-align: left;
font-size: 12px;
padding: 0.5em 1em 0.5em 1em;
word-wrap: break-word;
white-space: pre-wrap;
}
/*
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.
*/
.mx_Login {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: auto;
}
.mx_Login h2 {
font-weight: 300;
margin-top: 32px;
margin-bottom: 20px;
}
.mx_Login_box {
width: 300px;
min-height: 450px;
padding-top: 50px;
padding-bottom: 50px;
margin: auto;
}
.mx_Login_logo {
text-align: center;
height: 150px;
margin-bottom: 45px;
}
.mx_Login_logo img {
max-height: 100%
}
.mx_Login_support {
text-align: center;
font-size: 13px;
margin-top: 0px;
opacity: 0.7;
}
.mx_Login_field {
width: 280px;
border-radius: 3px;
border: 1px solid #c7c7c7;
font-weight: 300;
font-size: 13px;
padding: 9px;
margin-bottom: 14px;
}
.mx_Login_field_disabled {
opacity: 0.3;
}
.mx_Login_fieldLabel {
margin-top: -10px;
margin-left: 8px;
margin-bottom: 14px;
font-size: 13px;
opacity: 0.8;
}
.mx_Login_submit {
/* align images in buttons (eg spinners) */
vertical-align: middle;
border-radius: 8px;
border: 1px solid rgba(199, 206, 209, 0.12);
background-color: #6CC1F6;
font-size: 13px;
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
text-transform: uppercase;
letter-spacing: 1px;
color: #ffffff;
cursor: pointer;
outline: none;
padding: 14px;
box-sizing: border-box;
padding-left: 1.5em;
padding-right: 1.5em;
display: inline-block;
transition: background-color .2s ease;
width: 100%;
margin-top: 35px;
margin-bottom: 24px;
}
.mx_Login_submit:hover {
background-color: #84cfff;
}
.mx_Login_submit:disabled {
opacity: 0.3;
}
.mx_Login_label {
font-size: 13px;
opacity: 0.8;
}
.mx_Login_checkbox, .mx_Login_radio {
margin-right: 10px;
}
.mx_Login_create {
display: block;
text-align: center;
width: 100%;
font-size: 13px;
opacity: 0.8;
}
.mx_Login_create:link {
color: #70808D;
}
.mx_Login_links {
display: block;
text-align: center;
margin-top: 15px;
width: 100%;
font-size: 13px;
opacity: 0.8;
}
.mx_Login_links a:link {
color: #70808D;
}
.mx_Login_prompt {
padding-top: 15px;
padding-bottom: 15px;
font-size: 13px;
}
.mx_Login_forgot {
font-size: 15px;
}
.mx_Login_forgot:link {
color: #70808D;
}
.mx_Login_loader {
display: inline;
position: relative;
top: 2px;
left: 8px;
}
.mx_Login_loader .mx_Spinner {
display: inline;
}
.mx_Login_loader .mx_Spinner img {
width: 16px;
height: 16px;
}
.mx_Login_error {
color: #F69E98;
font-weight: bold;
text-align: center;
/*
height: 24px;
*/
margin-top: 12px;
margin-bottom: 12px;
}
.mx_Login_type_container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 14px;
}
.mx_Login_type_label {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
line-height: 35px;
}
.mx_Login_type_dropdown {
display: inline-block;
min-width: 170px;
-ms-flex-item-align: end;
align-self: flex-end;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.mx_Login_field_group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mx_Login_field_prefix {
height: 34px;
padding: 0px 5px;
line-height: 33px;
background-color: #eee;
border: 1px solid #c7c7c7;
border-right: 0px;
border-radius: 3px 0px 0px 3px;
text-align: center;
}
.mx_Login_field_suffix {
height: 34px;
padding: 0px 5px;
line-height: 33px;
background-color: #eee;
border: 1px solid #c7c7c7;
border-left: 0px;
border-radius: 0px 3px 3px 0px;
text-align: center;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.mx_Login_username {
height: 16px;
-ms-flex-negative: 1;
flex-shrink: 1;
min-width: 0px;
}
.mx_Login_phoneNumberField {
height: 16px;
}
.mx_Login_field_has_prefix {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.mx_Login_field_has_suffix {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.mx_Login_phoneSection {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}
.mx_Login_phoneCountry {
margin-bottom: 14px;
width: 150px;
/* To override mx_Login_field_prefix */
text-align: left;
padding: 0px;
background-color: #EEF2F5;
}
.mx_Login_field_prefix .mx_Dropdown_input {
/* To use prefix border instead of dropdown border */
border: 0;
}
.mx_Login_phoneCountry .mx_Dropdown_option {
/*
To match height of mx_Login_field
33px + 2px border from mx_Dropdown_option = 35px
*/
height: 33px;
line-height: 33px;
}
.mx_Login_phoneCountry .mx_Dropdown_option img {
margin: 3px;
vertical-align: top;
}
.mx_Login_language {
margin-left: auto;
margin-right: auto;
min-width: 60%;
}
.mx_Login_language_div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 12px;
margin-bottom: 12px;
}
/*
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.
*/
.mx_BaseAvatar {
position: relative;
}
.mx_BaseAvatar_initial {
position: absolute;
left: 0px;
color: #ffffff;
text-align: center;
speak: none;
pointer-events: none;
font-weight: normal;
}
.mx_BaseAvatar_image {
border-radius: 40px;
vertical-align: top;
background-color: transparent;
}
/*
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.
*/
.mx_MessageContextMenu_field {
padding: 3px 6px 3px 6px;
cursor: pointer;
white-space: nowrap;
}
.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet {
font-weight: bold;
}
/*
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.
*/
.mx_RoomTileContextMenu_tag_field, .mx_RoomTileContextMenu_leave {
padding-top: 8px;
padding-right: 20px;
padding-bottom: 8px;
cursor: pointer;
white-space: nowrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
line-height: 16px;
}
.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet {
font-weight: bold;
}
.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon {
display: none;
}
.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon_set {
display: inline-block;
}
.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldDisabled {
color: rgba(0, 0, 0, 0.2);
}
.mx_RoomTileContextMenu_tag_icon {
padding-right: 8px;
padding-left: 4px;
display: inline-block
}
.mx_RoomTileContextMenu_tag_icon_set {
padding-right: 8px;
padding-left: 4px;
display: none;
}
.mx_RoomTileContextMenu_separator {
margin-top: 0;
margin-bottom: 0;
border-bottom-style: none;
border-left-style: none;
border-right-style: none;
border-top-style: solid;
border-top-width: 1px;
border-color: rgba(187, 187, 187, 0.5);
}
.mx_RoomTileContextMenu_leave {
color: #F69E98;
}
.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon {
/* Something to indicate that the icon is the set tag */
}
.mx_RoomTileContextMenu_notif_picker {
position: absolute;
top: 16px;
left: 5px;
}
.mx_RoomTileContextMenu_notif_field {
padding-top: 4px;
padding-right: 6px;
padding-bottom: 10px;
padding-left: 8px; /* 20px */
cursor: pointer;
white-space: nowrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mx_RoomTileContextMenu_notif_field.mx_RoomTileContextMenu_notif_fieldSet {
font-weight: bold;
}
.mx_RoomTileContextMenu_notif_field.mx_RoomTileContextMenu_notif_fieldDisabled {
color: rgba(0, 0, 0, 0.2);
}
.mx_RoomTileContextMenu_notif_icon {
padding-right: 4px;
padding-left: 4px;
}
.mx_RoomTileContextMenu_notif_activeIcon {
display: inline-block;
opacity: 0;
position: relative;
left: -5px;
}
.mx_RoomTileContextMenu_notif_fieldSet .mx_RoomTileContextMenu_notif_activeIcon {
opacity: 1;
}
/*
Copyright 2018 New Vector 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_TagTileContextMenu_item {
padding-top: 8px;
padding-right: 20px;
padding-bottom: 8px;
cursor: pointer;
white-space: nowrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
line-height: 16px;
}
.mx_TagTileContextMenu_item_icon {
padding-right: 8px;
padding-left: 4px;
display: inline-block
}
.mx_TagTileContextMenu_separator {
margin-top: 0;
margin-bottom: 0;
border-bottom-style: none;
border-left-style: none;
border-right-style: none;
border-top-style: solid;
border-top-width: 1px;
border-color: rgba(187, 187, 187, 0.5);
}
/*
Copyright 2017 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.
*/
.mx_BugReportDialog_field_container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mx_BugReportDialog_field_label {
-ms-flex-preferred-size: 150px;
flex-basis: 150px;
text-align: right;
padding-top: 9px;
padding-right: 4px;
line-height: 18px;
}
.mx_BugReportDialog_field_input {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
/* taken from mx_ChatInviteDialog_inputContainer */
border-radius: 3px;
border: solid 1px #c9cfd4;
font-size: 14px;
padding-left: 4px;
padding-right: 4px;
padding-top: 7px;
padding-bottom: 7px;
margin-bottom: 4px;
}
.mx_BugReportDialog_field_input[type="text" i] {
padding-top: 9px;
padding-bottom: 9px;
}
/*
Copyright 2016 Aviral Dasgupta
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_ChangelogDialog_content {
max-height: 300px;
overflow: auto;
}
.mx_ChangelogDialog_li {
padding: 0.2em;
}
/*
Copyright 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.
*/
.mx_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles {
margin-top: 24px;
}
.mx_ChatCreateOrReuseDialog .mx_Dialog_content {
margin-bottom: 24px;
/*
To stop spinner that mx_ChatCreateOrReuseDialog_profile replaces from causing a
height change
*/
min-height: 100px;
}
.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge {
display: none;
}
.mx_ChatCreateOrReuseDialog_profile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mx_ChatCreateOrReuseDialog_profile_name {
padding: 14px;
}
/*
Copyright 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.
*/
/* Using a textarea for this element, to circumvent autofill */
.mx_ChatInviteDialog_input, .mx_ChatInviteDialog_input:focus
{
height: 26px;
font-size: 14px;
font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif;
padding-left: 12px;
padding-right: 12px;
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
width: 1000%; /* Pretend that this is an "input type=text" */
resize: none;
overflow: hidden;
vertical-align: middle;
box-sizing: border-box;
word-wrap: nowrap;
}
.mx_ChatInviteDialog .mx_Dialog_content {
min-height: 50px
}
.mx_ChatInviteDialog_inputContainer {
border-radius: 3px;
border: solid 1px #c9cfd4;
line-height: 36px;
padding-left: 4px;
padding-right: 4px;
padding-top: 1px;
padding-bottom: 1px;
max-height: 150px;
overflow-x: hidden;
overflow-y: auto;
}
.mx_ChatInviteDialog_error {
margin-top: 10px;
color: #F69E98;
}
.mx_ChatInviteDialog_cancel {
position: absolute;
right: 11px;
top: 13px;
cursor: pointer;
}
.mx_ChatInviteDialog_cancel object {
pointer-events: none;
}
/*
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_ConfirmUserActionDialog .mx_Dialog_content {
min-height: 48px;
margin-bottom: 24px;
}
.mx_ConfirmUserActionDialog_avatar {
float: left;
margin-right: 20px;
margin-top: -2px;
}
.mx_ConfirmUserActionDialog_name {
font-size: 18px;
}
.mx_ConfirmUserActionDialog_userId {
font-size: 13px;
}
.mx_ConfirmUserActionDialog_reasonField {
font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif;
font-size: 14px;
color: #70808D;
background-color: #EEF2F5;
border-radius: 3px;
border: solid 1px #c9cfd4;
line-height: 36px;
padding-left: 16px;
padding-right: 16px;
padding-top: 1px;
padding-bottom: 1px;
margin-bottom: 24px;
width: 90%;
}
/*
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_CreateGroupDialog_inputRow {
margin-top: 10px;
margin-bottom: 10px;
}
.mx_CreateGroupDialog_label {
text-align: left;
padding-bottom: 12px;
}
.mx_CreateGroupDialog_input {
font-size: 15px;
border-radius: 3px;
border: 1px solid #c9cfd4;
padding: 9px;
color: #70808D;
background-color: #EEF2F5;
}
.mx_CreateGroupDialog_input_hasPrefixAndSuffix {
border-radius: 0px;
}
.mx_CreateGroupDialog_input_group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mx_CreateGroupDialog_prefix, .mx_CreateGroupDialog_suffix {
height: 35px;
padding: 0px 5px;
line-height: 37px;
background-color: #c9cfd4;
border: 1px solid #c9cfd4;
text-align: center;
}
.mx_CreateGroupDialog_prefix {
border-right: 0px;
border-radius: 3px 0px 0px 3px;
}
.mx_CreateGroupDialog_suffix {
border-left: 0px;
border-radius: 0px 3px 3px 0px;
}
/*
Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
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_CreateRoomDialog_details_summary {
outline: none;
}
.mx_CreateRoomDialog_label {
text-align: left;
padding-bottom: 12px;
}
.mx_CreateRoomDialog_input_container {
padding-right: 20px;
}
.mx_CreateRoomDialog_input {
font-size: 15px;
border-radius: 3px;
border: 1px solid #c9cfd4;
padding: 9px;
color: #70808D;
background-color: #EEF2F5;
width: 100%;
}
/*
Copyright 2018 New Vector 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_DeactivateAccountDialog .mx_Dialog_content {
margin-bottom: 30px;
}
.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section {
margin-top: 60px;
}
/*
Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
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_DevTools_dialog {
padding-right: 58px;
}
.mx_DevTools_content {
margin: 10px 0;
}
.mx_DevTools_RoomStateExplorer_button, .mx_DevTools_RoomStateExplorer_query {
margin-bottom: 10px;
width: 100%;
}
.mx_DevTools_label_left {
float: left;
}
.mx_DevTools_label_right {
float: right;
}
.mx_DevTools_label_bottom {
clear: both;
border-bottom: 1px solid #e5e5e5;
}
.mx_DevTools_inputRow
{
display: table-row;
}
.mx_DevTools_inputLabelCell
{
display: table-cell;
font-weight: bold;
padding-right: 24px;
}
.mx_DevTools_inputCell {
display: table-cell;
width: 240px;
}
.mx_DevTools_inputCell input
{
display: inline-block;
border: 0;
border-bottom: 1px solid rgba(151, 151, 151, 0.5);
padding: 0;
width: 240px;
color: rgba(74, 74, 74, 0.9);
font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
font-size: 16px;
}
.mx_DevTools_textarea {
font-size: 12px;
max-width: 624px;
min-height: 250px;
padding: 10px;
width: 100%;
}
.mx_DevTools_tgl {
display: none;
}
.mx_DevTools_tgl, .mx_DevTools_tgl:after, .mx_DevTools_tgl:before, .mx_DevTools_tgl *, .mx_DevTools_tgl *:after, .mx_DevTools_tgl *:before, .mx_DevTools_tgl + .mx_DevTools_tgl-btn {
box-sizing: border-box;
}
.mx_DevTools_tgl::-moz-selection, .mx_DevTools_tgl:after::-moz-selection, .mx_DevTools_tgl:before::-moz-selection, .mx_DevTools_tgl *::-moz-selection, .mx_DevTools_tgl *:after::-moz-selection, .mx_DevTools_tgl *:before::-moz-selection, .mx_DevTools_tgl + .mx_DevTools_tgl-btn::-moz-selection {
background: none;
}
.mx_DevTools_tgl::selection, .mx_DevTools_tgl:after::selection, .mx_DevTools_tgl:before::selection, .mx_DevTools_tgl *::selection, .mx_DevTools_tgl *:after::selection, .mx_DevTools_tgl *:before::selection, .mx_DevTools_tgl + .mx_DevTools_tgl-btn::selection {
background: none;
}
.mx_DevTools_tgl + .mx_DevTools_tgl-btn {
outline: 0;
display: block;
width: 7em;
height: 2em;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mx_DevTools_tgl + .mx_DevTools_tgl-btn:after, .mx_DevTools_tgl + .mx_DevTools_tgl-btn:before {
position: relative;
display: block;
content: "";
width: 50%;
height: 100%;
}
.mx_DevTools_tgl + .mx_DevTools_tgl-btn:after {
left: 0;
}
.mx_DevTools_tgl + .mx_DevTools_tgl-btn:before {
display: none;
}
.mx_DevTools_tgl:checked + .mx_DevTools_tgl-btn:after {
left: 50%;
}
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn {
padding: 2px;
transition: all .2s ease;
font-family: sans-serif;
-webkit-perspective: 100px;
perspective: 100px;
}
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:after, .mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:before {
display: inline-block;
transition: all .4s ease;
width: 100%;
text-align: center;
position: absolute;
line-height: 2em;
font-weight: bold;
color: #fff;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 4px;
}
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:after {
content: attr(data-tg-on);
background: #02C66F;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:before {
background: #FF3A19;
content: attr(data-tg-off);
}
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:active:before {
-webkit-transform: rotateY(-20deg);
transform: rotateY(-20deg);
}
.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:before {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:after {
-webkit-transform: rotateY(0);
transform: rotateY(0);
left: 0;
background: #7FC6A6;
}
.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:active:after {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
/*
Copyright 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.
*/
.mx_EncryptedEventDialog .mx_MemberDeviceInfo {
float: right;
padding: 0px;
margin-right: 42px;
}
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_textButton {
/* align images in buttons (eg spinners) */
vertical-align: middle;
border-radius: 8px;
border: 1px solid rgba(199, 206, 209, 0.12);
background-color: #6CC1F6;
font-size: 13px;
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
text-transform: uppercase;
letter-spacing: 1px;
color: #ffffff;
cursor: pointer;
outline: none;
padding: 14px;
box-sizing: border-box;
padding-left: 1.5em;
padding-right: 1.5em;
display: inline-block;
transition: background-color .2s ease;
background-color: #EEF2F5;
color: #6CC1F6;
}
/*
Copyright 2017 New Vector 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_GroupAddressPicker_checkboxContainer{
margin-top: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mx_GroupAddressPicker_checkboxContainer input[type="checkbox"] {
/* Stop flex from shrinking the checkbox */
width: 20px;
}
/*
Copyright 2018 New Vector 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_RoomUpgradeDialog {
padding-right: 70px;
}
/*
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_SetEmailDialog_email_input {
border-radius: 3px;
border: 1px solid #c9cfd4;
padding: 9px;
color: rgba(74, 74, 74, 0.9);
background-color: #EEF2F5;
font-size: 15px;
width: 100%;
max-width: 280px;
margin-bottom: 10px;
}
.mx_SetEmailDialog_email_input:focus {
outline: none;
box-shadow: none;
border: 1px solid #6CC1F6;
}
.mx_SetEmailDialog_email_input_placeholder {
}
/*
Copyright 2015, 2016 OpenMarket Ltd
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_SetMxIdDialog .mx_Dialog_title {
padding-right: 40px;
}
.mx_SetMxIdDialog_input_group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mx_SetMxIdDialog_input {
border-radius: 3px;
border: 1px solid #c9cfd4;
padding: 9px;
color: #70808D;
background-color: #EEF2F5;
font-size: 15px;
width: 100%;
max-width: 280px;
}
.mx_SetMxIdDialog_input.error, .mx_SetMxIdDialog_input.error:focus {
border: 1px solid #F69E98;
}
.mx_SetMxIdDialog_input_group .mx_Spinner {
height: 37px;
padding-left: 10px;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.mx_SetMxIdDialog .success {
color: #6CC1F6;
}
/*
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_SetPasswordDialog_change_password input {
border-radius: 3px;
border: 1px solid #c9cfd4;
padding: 9px;
color: #70808D;
background-color: #EEF2F5;
font-size: 15px;
width: 100%;
max-width: 280px;
margin-bottom: 10px;
}
.mx_SetPasswordDialog_change_password_button {
margin-top: 68px;
}
.mx_SetPasswordDialog .mx_Dialog_content {
margin-bottom: 0px;
}
/*
Copyright 2018 New Vector 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_ShareDialog {
padding-right: 58px;
}
.mx_ShareDialog hr {
margin-top: 25px;
margin-bottom: 25px;
border-color: #747474;
}
.mx_ShareDialog_content {
margin: 10px 0;
}
.mx_ShareDialog_matrixto {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
border-radius: 5px;
border: solid 1px #747474;
margin-bottom: 10px;
margin-top: 30px;
padding: 10px;
}
.mx_ShareDialog_matrixto a {
text-decoration: none;
}
.mx_ShareDialog_matrixto_link {
-ms-flex-negative: 1;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_ShareDialog_matrixto_copy {
-ms-flex-negative: 0;
flex-shrink: 0;
cursor: pointer;
margin-left: 20px;
display: inherit;
}
.mx_ShareDialog_matrixto_copy > div {
background-image: url("../../img/icon_copy_message.svg");
margin-left: 5px;
width: 20px;
height: 20px;
}
.mx_ShareDialog_split {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.mx_ShareDialog_qrcode_container {
float: left;
background-color: #ffffff;
padding: 5px;
border-radius: 5px;
height: 256px;
width: 256px;
margin-right: 64px;
}
.mx_ShareDialog_social_container {
display: inline-block;
width: 299px;
}
.mx_ShareDialog_social_icon {
display: -ms-inline-grid;
display: inline-grid;
margin-right: 10px;
margin-bottom: 10px;
}
/*
Copyright 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.
*/
.mx_Dialog_unknownDevice .mx_Dialog {
height: 100%;
padding-right: 58px;
}
.mx_UnknownDeviceDialog {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mx_UnknownDeviceDialog .mx_Dialog_content {
margin-bottom: 24px;
}
.mx_UnknownDeviceDialog .mx_MemberDeviceInfo {
float: right;
clear: both;
padding: 0px;
padding-top: 8px;
}
.mx_UnknownDeviceDialog .mx_MemberDeviceInfo_textButton {
/* align images in buttons (eg spinners) */
vertical-align: middle;
border-radius: 8px;
border: 1px solid rgba(199, 206, 209, 0.12);
background-color: #6CC1F6;
font-size: 13px;
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
text-transform: uppercase;
letter-spacing: 1px;
color: #ffffff;
cursor: pointer;
outline: none;
padding: 14px;
box-sizing: border-box;
padding-left: 1.5em;
padding-right: 1.5em;
display: inline-block;
transition: background-color .2s ease;
height: auto;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 1em;
padding-right: 1em;
background-color: #EEF2F5;
color: #6CC1F6;
}
.mx_UnknownDeviceDialog .mx_UnknownDeviceDialog_deviceList li {
height: 40px;
border-bottom: 1px solid #e5e5e5;
}
/*
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.
*/
.mx_NetworkDropdown {
position: relative;
}
.mx_NetworkDropdown_input {
position: relative;
border-radius: 3px;
border: 1px solid #c7c7c7;
font-weight: 300;
font-size: 13px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mx_NetworkDropdown_arrow {
border-color: #70808D transparent transparent;
border-style: solid;
border-width: 5px 5px 0;
display: block;
height: 0;
position: absolute;
right: 10px;
top: 14px;
width: 0
}
.mx_NetworkDropdown_networkoption {
height: 35px;
line-height: 35px;
padding-left: 8px;
padding-right: 8px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mx_NetworkDropdown_networkoption img {
margin: 5px;
width: 25px;
vertical-align: middle;
}
input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:focus {
border: 0;
padding-top: 0;
padding-bottom: 0;
}
.mx_NetworkDropdown_menu {
position: absolute;
left: -1px;
right: -1px;
top: 100%;
z-index: 2;
margin: 0;
padding: 0px;
border-radius: 3px;
border: 1px solid #6CC1F6;
background-color: #EEF2F5;
}
.mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover {
background-color: #dddddd;
}
.mx_NetworkDropdown_menu_network {
font-weight: bold;
}
/*
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_AccessibleButton:focus {
outline: 0;
-webkit-filter: brightness(125%);
filter: brightness(125%);
}
.mx_AccessibleButton {
cursor: pointer;
}
/*
Copyright 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.
*/
.mx_AddressSelector {
position: absolute;
background-color: #EEF2F5;
width: 485px;
max-height: 116px;
overflow-y: auto;
border-radius: 3px;
background-color: #EEF2F5;
border: solid 1px #6CC1F6;
cursor: pointer;
}
.mx_AddressSelector.mx_AddressSelector_empty {
display: none;
}
.mx_AddressSelector_addressListElement .mx_AddressTile {
background-color: #EEF2F5;
border: solid 1px #EEF2F5;
}
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
background-color: #eaf5f0;
}
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile {
background-color: #eaf5f0;
border: solid 1px #eaf5f0;
}
/*
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.
*/
.mx_AddressTile {
display: inline-block;
border-radius: 3px;
background-color: rgba(74, 73, 74, 0.1);
border: solid 1px #c9cfd4;
line-height: 26px;
color: #70808D;
font-size: 14px;
font-weight: normal;
margin-right: 4px;
}
.mx_AddressTile.mx_AddressTile_error {
background-color: rgba(255, 0, 100, 0.1);
color: #F69E98;
border-color: #F69E98;
}
.mx_AddressTile_network {
display: inline-block;
position: relative;
padding-left: 2px;
padding-right: 4px;
vertical-align: middle;
}
.mx_AddressTile_avatar {
display: inline-block;
position: relative;
padding-left: 2px;
padding-right: 7px;
vertical-align: middle;
}
.mx_AddressTile_mx {
display: inline-block;
margin: 0;
border: 0;
padding: 0;
}
.mx_AddressTile_name {
display: inline-block;
padding-right: 4px;
font-weight: 600;
overflow: hidden;
height: 26px;
vertical-align: middle;
}
.mx_AddressTile_name.mx_AddressTile_justified {
width: 180px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
.mx_AddressTile_id {
display: inline-block;
padding-right: 11px;
}
.mx_AddressTile_id.mx_AddressTile_justified {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
.mx_AddressTile_unknownMx {
display: inline-block;
font-weight: 600;
padding-right: 11px;
}
.mx_AddressTile_unknownMxl.mx_AddressTile_justified {
width: 380px; /* name + id width */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
.mx_AddressTile_email {
display: inline-block;
font-weight: 600;
padding-right: 11px;
}
.mx_AddressTile_email.mx_AddressTile_justified {
width: 200px; /* same as id width */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
.mx_AddressTile_unknown {
display: inline-block;
padding-right: 11px;
}
.mx_AddressTile_unknown.mx_AddressTile_justified {
width: 380px; /* name + id width */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
.mx_AddressTile_dismiss {
display: inline-block;
padding-right: 11px;
padding-left: 1px;
cursor: pointer;
}
.mx_AddressTile_dismiss object {
pointer-events: none;
}
/*
Copyright 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.
*/
.mx_DirectorySearchBox {
position: relative;
border-radius: 3px;
border: 1px solid #c7c7c7;
}
.mx_DirectorySearchBox_container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-left: 9px;
padding-right: 9px;
}
.mx_DirectorySearchBox_input {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
border: 0;
padding: 0;
font-weight: 300;
font-size: 13px;
}
input[type=text].mx_DirectorySearchBox_input:focus {
border: 0;
}
.mx_DirectorySearchBox_joinButton {
display: table-cell;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
background-color: #586C7B;
border-radius: 3px;
background-image: url('../../img/icon-return.svg');
background-position: 8px 70%;
background-repeat: no-repeat;
text-indent: 18px;
font-weight: 600;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
.mx_DirectorySearchBox_clear_wrapper {
display: table-cell;
}
.mx_DirectorySearchBox_clear {
display: inline-block;
vertical-align: middle;
background: url('../../img/icon_context_delete.svg');
background-position: 0 50%;
background-repeat: no-repeat;
width: 15px;
height: 15px;
cursor: pointer;
}
/*
Copyright 2017 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.
*/
.mx_Dropdown {
position: relative;
}
.mx_Dropdown_disabled {
opacity: 0.3;
}
.mx_Dropdown_input {
position: relative;
border-radius: 3px;
border: 1px solid #c7c7c7;
font-weight: 300;
font-size: 13px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mx_Dropdown_input:focus {
border-color: #6CC1F6;
}
/* Disable dropdown highlight on focus */
.mx_Dropdown_input.mx_AccessibleButton:focus {
-webkit-filter: none;
filter: none;
}
.mx_Dropdown_arrow {
border-color: #70808D transparent transparent;
border-style: solid;
border-width: 5px 5px 0;
display: block;
height: 0;
position: absolute;
right: 10px;
top: 14px;
width: 0
}
.mx_Dropdown.left_aligned .mx_Dropdown_arrow {
left: 10px;
}
.mx_Dropdown_input > .mx_Dropdown_option {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mx_Dropdown.left_aligned .mx_Dropdown_input > .mx_Dropdown_option {
padding-left: 25px;
}
.mx_Dropdown_option {
height: 35px;
line-height: 35px;
padding-left: 8px;
padding-right: 8px;
}
.mx_Dropdown_option div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mx_Dropdown_option img {
margin: 5px;
width: 27px;
vertical-align: middle;
}
input.mx_Dropdown_option, input.mx_Dropdown_option:focus {
border: 0;
padding-top: 0;
padding-bottom: 0;
width: 60%;
}
.mx_Dropdown_menu {
position: absolute;
left: -1px;
right: -1px;
top: 100%;
z-index: 2;
margin: 0;
padding: 0px;
border-radius: 3px;
border: 1px solid #6CC1F6;
background-color: #EEF2F5;
max-height: 200px;
overflow-y: auto;
}
.mx_Dropdown_menu .mx_Dropdown_option {
height: auto;
min-height: 35px;
}
.mx_Dropdown_menu .mx_Dropdown_option_highlight {
background-color: #dddddd;
}
.mx_Dropdown_menu {
font-weight: bold;
}
.mx_Dropdown_searchPrompt {
font-weight: normal;
margin-left: 5px;
margin-bottom: 5px;
}
/*
Copyright 2017 New Vector 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_EditableItemList {
margin-top: 12px;
margin-bottom: 0px;
}
.mx_EditableItem {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-left: 56px;
}
.mx_EditableItem .mx_EditableItem_editable {
border: 0px;
border-bottom: 1px solid #c7c7c7;
padding: 0px;
min-width: 240px;
max-width: 400px;
margin-bottom: 16px;
}
.mx_EditableItem .mx_EditableItem_editable:focus {
border-bottom: 1px solid #6CC1F6;
outline: none;
box-shadow: none;
}
.mx_EditableItem .mx_EditableItem_editablePlaceholder {
color: #a2a2a2;
}
.mx_EditableItem .mx_EditableItem_addButton, .mx_EditableItem .mx_EditableItem_removeButton {
padding-left: 0.5em;
position: relative;
cursor: pointer;
visibility: hidden;
}
.mx_EditableItem:hover .mx_EditableItem_addButton, .mx_EditableItem:hover .mx_EditableItem_removeButton {
visibility: visible;
}
.mx_EditableItemList_label {
margin-bottom: 8px;
}
/*
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.
*/
/* This has got to be the most fragile piece of CSS ever written.
But empirically it works on Chrome/FF/Safari
*/
.mx_ImageView {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mx_ImageView_lhs {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
-webkit-box-flex: 1;
-ms-flex: 1 1 10%;
flex: 1 1 10%;
min-width: 60px;
}
.mx_ImageView_content {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
/* min-width hack needed for FF */
min-width: 0px;
height: 90%;
-webkit-box-flex: 15;
-ms-flex: 15 15 0px;
flex: 15 15 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.mx_ImageView_content img {
max-width: 100%;
/* XXX: max-height interacts badly with flex on Chrome and doesn't relayout properly until you refresh */
max-height: 100%;
/* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
-o-object-fit: contain;
object-fit: contain;
/* background-image: url('../../img/trans.png'); */
pointer-events: all;
}
.mx_ImageView_labelWrapper {
position: absolute;
top: 0px;
right: 0px;
height: 100%;
overflow: auto;
pointer-events: all;
}
.mx_ImageView_label {
text-align: left;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 30px;
padding-right: 30px;
min-height: 100%;
max-width: 240px;
color: #ffffff;
}
.mx_ImageView_cancel {
position: absolute;
top: 0px;
right: 0px;
padding: 35px;
cursor: pointer;
}
.mx_ImageView_name {
font-size: 18px;
margin-bottom: 6px;
word-wrap: break-word;
}
.mx_ImageView_metadata {
font-size: 15px;
opacity: 0.5;
}
.mx_ImageView_download {
display: table;
margin-top: 24px;
margin-bottom: 6px;
border-radius: 5px;
background-color: #454545;
font-size: 14px;
padding: 9px;
border: 1px solid #ffffff;
}
.mx_ImageView_size {
font-size: 11px;
}
.mx_ImageView_link {
color: #ffffff ! important;
text-decoration: none ! important;
}
.mx_ImageView_button {
font-size: 15px;
opacity: 0.5;
margin-top: 18px;
cursor: pointer;
}
.mx_ImageView_shim {
height: 30px;
}
.mx_ImageView_rhs {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
-webkit-box-flex: 1;
-ms-flex: 1 1 10%;
flex: 1 1 10%;
min-width: 300px;
}
/*
Copyright 2017 New Vector 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_InlineSpinner {
display: inline;
}
.mx_InlineSpinner img {
margin: 0px 6px;
vertical-align: -3px;
}
/*
Copyright 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.
*/
.mx_MemberEventListSummary {
position: relative;
}
.mx_TextualEvent.mx_MemberEventListSummary_summary {
font-size: 14px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.mx_MemberEventListSummary_avatars {
display: inline-block;
margin-right: 8px;
padding-top: 8px;
line-height: 12px;
}
.mx_MemberEventListSummary_avatars .mx_BaseAvatar {
margin-right: -4px;
cursor: pointer;
}
.mx_MemberEventListSummary_toggle {
color: #6CC1F6;
cursor: pointer;
float: right;
margin-right: 10px;
margin-top: 8px;
}
.mx_MemberEventListSummary_line {
border-bottom: 1px solid #e5e5e5;
margin-left: 63px;
line-height: 30px;
}
.mx_MatrixChat_useCompactLayout .mx_MemberEventListSummary {
font-size: 13px;
}
.mx_MatrixChat_useCompactLayout .mx_MemberEventListSummary .mx_EventTile_line {
line-height: 20px;
}
.mx_MatrixChat_useCompactLayout .mx_MemberEventListSummary_line {
line-height: 22px;
}
.mx_MatrixChat_useCompactLayout .mx_MemberEventListSummary_toggle {
margin-top: 3px;
}
.mx_MatrixChat_useCompactLayout .mx_TextualEvent.mx_MemberEventListSummary_summary {
font-size: 13px;
}
/*
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.
*/
.mx_ProgressBar {
height: 5px;
border: 1px solid #000;
}
.mx_ProgressBar_fill {
height: 100%;
background-color: #000;
}
/*
Copyright 2018 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_ReplyThread {
margin-top: 0;
}
.mx_ReplyThread .mx_DateSeparator {
font-size: 1em !important;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 1px;
bottom: -5px;
}
.mx_ReplyThread_show {
cursor: pointer;
}
blockquote.mx_ReplyThread {
margin-left: 0;
padding-left: 10px;
border-left: 4px solid #ddd;
}
.mx_UserPill, .mx_RoomPill, .mx_GroupPill, .mx_AtRoomPill {
border-radius: 16px;
display: inline-block;
height: 20px;
line-height: 20px;
padding-left: 5px;
}
.mx_EventTile_body .mx_UserPill, .mx_EventTile_body .mx_RoomPill, .mx_EventTile_body .mx_GroupPill {
cursor: pointer;
}
/* More specific to override `.markdown-body a` color */
.mx_EventTile_content .markdown-body a.mx_UserPill, .mx_UserPill {
color: #70808D;
background-color: rgba(0, 0, 0, 0.1);
padding-right: 5px;
}
.mx_UserPill_selected {
background-color: #6CC1F6 ! important;
}
.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me, .mx_EventTile_content .mx_AtRoomPill, .mx_MessageComposer_input .mx_AtRoomPill {
color: #ffffff;
background-color: #ff0064;
padding-right: 5px;
}
/* More specific to override `.markdown-body a` color */
.mx_EventTile_content .markdown-body a.mx_RoomPill, .mx_EventTile_content .markdown-body a.mx_GroupPill, .mx_RoomPill, .mx_GroupPill {
color: #ffffff;
background-color: #aaa;
padding-right: 5px;
}
/* More specific to override `.markdown-body a` color */
.mx_EventTile_content .markdown-body a.mx_GroupPill, .mx_GroupPill {
color: #ffffff;
background-color: #aaa;
padding-right: 5px;
}
.mx_UserPill .mx_BaseAvatar, .mx_RoomPill .mx_BaseAvatar, .mx_GroupPill .mx_BaseAvatar, .mx_AtRoomPill .mx_BaseAvatar {
position: relative;
left: -3px;
top: 2px;
}
.mx_Markdown_BOLD {
font-weight: bold;
}
.mx_Markdown_ITALIC {
font-style: italic;
}
.mx_Markdown_CODE {
padding: .2em 0;
margin: 0;
font-size: 85%;
background-color: rgba(0, 0, 0, 0.04);
border-radius: 3px;
}
.mx_Markdown_HR {
display: block;
background: #e9e9e9;
}
.mx_Markdown_STRIKETHROUGH {
text-decoration: line-through;
}
/*
Copyright 2107 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_RoleButton {
margin-left: 4px;
margin-right: 4px;
cursor: pointer;
display: inline-block;
}
.mx_RoleButton object {
pointer-events: none;
}
.mx_RoleButton_tooltip {
display: inline-block;
position: relative;
top: -25px;
left: 6px;
}
/*
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.
*/
.mx_Spinner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 100%;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.mx_MatrixChat_middlePanel .mx_Spinner {
height: auto;
}
/*
Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
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_SyntaxHighlight {
/* inhibit hljs styling */
background: none !important;
color: #747474 !important;
}
/*
Copyright 2017 New Vector 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_ToolTipButton {
display: inline-block;
width: 11px;
height: 11px;
margin-left: 5px;
border: 2px solid #dbdbdb;
border-radius: 20px;
color: #dbdbdb;
transition: opacity 0.2s ease-in;
opacity: 0.6;
line-height: 11px;
text-align: center;
cursor: pointer;
}
.mx_ToolTipButton:hover {
opacity: 1.0;
}
.mx_ToolTipButton_container {
position: relative;
top: -18px;
left: 4px;
}
.mx_ToolTipButton_helpText {
width: 400px;
text-align: start;
line-height: 17px !important;
}
/*
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.
*/
.mx_MatrixToolbar {
background-color: #6CC1F6;
color: #ffffff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mx_MatrixToolbar_warning {
margin-left: 16px;
margin-right: 8px;
margin-top: -2px;
}
.mx_MatrixToolbar_info {
padding-left: 16px;
padding-right: 8px;
background-color: #2A9EDF;
}
.mx_MatrixToolbar_error {
padding-left: 16px;
padding-right: 8px;
background-color: #DF2A8B;
}
.mx_MatrixToolbar_content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.mx_MatrixToolbar_link
{
color: #ffffff ! important;
text-decoration: underline ! important;
cursor: pointer;
}
.mx_MatrixToolbar_clickable {
cursor: pointer;
}
.mx_MatrixToolbar_close {
cursor: pointer;
}
.mx_MatrixToolbar_close img {
display: block;
float: right;
margin-right: 10px;
}
.mx_MatrixToolbar_action {
margin-right: 16px;
}
.mx_MatrixToolbar_changelog {
white-space: pre;
}
/*
Copyright 2017 New Vector 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_GroupPublicity_toggle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 8px;
}
.mx_GroupPublicity_toggle > label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.mx_GroupPublicity_toggle > label, .mx_GroupPublicity_toggle .mx_GroupTile {
width: 50%;
}
.mx_GroupPublicity_toggle input {
margin-right: 8px;
vertical-align: -4px;
}
.mx_GroupPublicity_toggle .mx_GroupTile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
cursor: pointer;
}
/*
Copyright 2017 New Vector 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_GroupRoomTile {
position: relative;
color: #70808D;
cursor: pointer;
}
/*
Copyright 2017 New Vector 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_GroupUserSettings_groupPublicity_scrollbox {
height: 200px;
border: 1px solid #e5e5e5;
border-radius: 3px;
margin-right: 32px;
overflow: hidden;
}
/*
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_InteractiveAuthEntryComponents_msisdnWrapper {
text-align: center;
}
.mx_InteractiveAuthEntryComponents_msisdnEntry {
font-size: 200%;
font-weight: bold;
border: 1px solid #c7c7c7;
border-radius: 3px;
width: 6em;
}
.mx_InteractiveAuthEntryComponents_msisdnEntry:focus {
border: 1px solid #6CC1F6;
}
.mx_InteractiveAuthEntryComponents_msisdnSubmit {
margin-top: 4px;
margin-bottom: 5px;
}
.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
background-color: #747474;
cursor: default;
}
/*
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.
*/
.mx_ServerConfig {
margin-top: 7px;
}
.mx_ServerConfig .mx_Login_field {
margin-top: 4px;
margin-bottom: 5px;
}
.mx_ServerConfig_help:link {
opacity: 0.8;
font-size: 13px;
font-weight: 300;
color: #70808D;
}
.mx_ServerConfig_selector {
text-align: center;
width: 302px;
}
/*
Copyright 2018 New Vector 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_CreateEvent {
background-color: #f7f7f7;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.mx_CreateEvent_image {
float: left;
padding-right: 20px;
width: 72px;
height: 34px;
}
.mx_CreateEvent_header {
font-weight: bold;
}
.mx_CreateEvent_link {
}
/*
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_DateSeparator {
clear: both;
margin-top: 32px;
margin-bottom: 8px;
margin-left: 63px;
padding-bottom: 6px;
border-bottom: 1px solid #e5e5e5;
}
/*
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_MEmoteBody {
white-space: pre-wrap;
}
.mx_MEmoteBody_sender {
cursor: pointer;
}
/*
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.
*/
.mx_MFileBody_download {
color: #6CC1F6;
}
.mx_MFileBody_download a {
color: #6CC1F6;
text-decoration: none;
cursor: pointer;
}
.mx_MFileBody_download object {
margin-left: -16px;
padding-right: 4px;
margin-top: -4px;
vertical-align: middle;
pointer-events: none;
}
/* Remove the border and padding for iframes for download links. */
.mx_MFileBody_download iframe {
margin: 0px;
padding: 0px;
border: none;
width: 100%;
/* Set the height of the iframe to be 1 line of text.
* Iframes don't automatically size themselves to fit their content.
* So either we have to fix the height of the iframe using CSS or
* use javascript's cross-origin postMessage API to communicate how
* big the content of the iframe is. */
height: 1.5em;
}
/*
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.
*/
.mx_MImageBody {
display: block;
margin-right: 34px;
}
.mx_MImageBody_thumbnail {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.mx_MImageBody_thumbnail_container {
overflow: hidden;
position: relative;
}
.mx_MImageBody_thumbnail_spinner {
position: absolute;
left: 50%;
top: 50%;
}
.mx_MImageBody_thumbnail_spinner > * {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*
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.
*/
.mx_MNoticeBody {
white-space: pre-wrap;
opacity: 0.6;
}
/*
Copyright 2018 New Vector 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_MStickerBody_wrapper {
padding: 20px 0px;
}
.mx_MStickerBody_tooltip {
position: absolute;
top: 50%;
}
/*
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.
*/
.mx_MTextBody {
white-space: pre-wrap;
}
/*
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.
*/
.mx_MessageTimestamp {
}
/*
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_RoomAvatarEvent {
opacity: 0.5;
overflow-y: hidden;
}
.mx_RoomAvatarEvent_avatar {
display: inline;
position: relative;
top: 5px;
}
/*
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.
*/
/*
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.
*/
.mx_TextualEvent {
opacity: 0.5;
overflow-y: hidden;
}
/*
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.
*/
.mx_UnknownBody {
white-space: pre-wrap;
}
/*
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.
*/
.mx_AppsDrawer {
margin: 5px;
}
.mx_AppsDrawer_hidden {
display: none;
}
.mx_AppsContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.mx_AddWidget_button {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
cursor: pointer;
padding-right: 12px;
padding: 0;
margin: 5px auto 5px auto;
color: #6CC1F6;
font-size: 12px;
}
.mx_AddWidget_button_full_width {
max-width: 960px;
}
.mx_SetAppURLDialog_input {
border-radius: 3px;
border: 1px solid #c9cfd4;
padding: 9px;
color: #e5e5e5;
background-color: #EEF2F5;
font-size: 15px;
}
.mx_AppTile {
max-width: 960px;
width: 50%;
margin-right: 5px;
border: 1px solid #e5e5e5;
border-radius: 2px;
background-color: #e9e9e9;
}
.mx_AppTile:last-child {
margin-right: 1px;
}
.mx_AppTileFullWidth {
max-width: 960px;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 1px solid #e5e5e5;
border-radius: 2px;
}
.mx_AppTile_mini {
max-width: 960px;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.mx_AppTile_persistedWrapper {
height: 280px;
}
.mx_AppTile_mini .mx_AppTile_persistedWrapper {
height: 114px;
}
.mx_AppTileMenuBar {
margin: 0;
padding: 2px 10px;
border-bottom: 1px solid #e5e5e5;
font-size: 10px;
background-color: #f7f7f7;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
cursor: pointer;
}
.mx_AppTileMenuBarTitle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
pointer-events: none;
}
.mx_AppTileMenuBarWidgets {
float: right;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mx_AppTileMenuBarWidget {
cursor: pointer;
width: 10px;
height: 10px;
padding: 1px;
transition-duration: 500ms;
border: 1px solid transparent;
}
.mx_AppTileMenuBarWidgetDelete {
-webkit-filter: none;
filter: none;
}
.mx_AppTileMenuBarWidget:hover {
border: 1px solid #70808D;
border-radius: 2px;
}
.mx_AppTileBody{
height: 280px;
width: 100%;
overflow: hidden;
}
.mx_AppTileBody_mini {
height: 112px;
width: 100%;
overflow: hidden;
}
.mx_AppTileBody_mini iframe {
border: none;
width: 100%;
height: 100%;
}
.mx_AppTileBody iframe {
width: 100%;
height: 280px;
overflow: hidden;
border: none;
padding: 0;
margin: 0;
display: block;
}
.mx_AppTileMenuBarWidgetPadding {
margin-right: 5px;
}
.mx_AppIconTile {
background-color: #454545;
border: 1px solid rgba(0, 0, 0, 0);
width: 200px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 3px;
margin: 5px;
display: inline-block;
}
.mx_AppIconTile.mx_AppIconTile_active {
color: #6CC1F6;
border-color: #6CC1F6;
}
.mx_AppIconTile:hover {
border: 1px solid #6CC1F6;
box-shadow: 0 0 10px 5px rgba(200,200,200,0.5);
}
.mx_AppIconTile_content {
padding: 2px 16px;
height: 60px;
overflow: hidden;
}
.mx_AppIconTile_content h4 {
margin-top: 5px;
margin-bottom: 2px;
}
.mx_AppIconTile_content p {
margin-top: 0;
margin-bottom: 5px;
font-size: smaller;
}
.mx_AppIconTile_image {
padding: 10px;
width: 75%;
max-width:100px;
max-height:100px;
width: auto;
height: auto;
}
.mx_AppIconTile_imageContainer {
text-align: center;
width: 100%;
background-color: white;
border-radius: 3px 3px 0 0;
height: 155px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
form.mx_Custom_Widget_Form div {
margin-top: 10px;
margin-bottom: 10px;
}
.mx_AppPermissionWarning {
text-align: center;
background-color: #EEF2F5;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mx_AppPermissionWarningImage {
margin: 10px 0;
}
.mx_AppPermissionWarningImage img {
width: 100px;
}
.mx_AppPermissionWarningText {
max-width: 400px;
margin: 10px auto 10px auto;
color: #70808D;
}
.mx_AppPermissionWarningTextLabel {
font-weight: bold;
display: block;
}
.mx_AppPermissionWarningTextURL {
color: #6CC1F6;
}
.mx_AppPermissionButton {
padding: 5px;
border-radius: 5px;
color: #F69E98;
background-color: #EEF2F5;
}
.mx_AppPermissionButton:hover {
background-color: #70808D;
cursor: pointer;
}
.mx_AppLoading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: bold;
position: relative;
height: 280px;
}
.mx_AppLoading .mx_Spinner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mx_AppLoading_spinner_fadeIn {
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
-webkit-animation-duration: 200ms;
animation-duration: 200ms;
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
-webkit-animation-name: mx_AppLoading_spinner_fadeIn_animation;
animation-name: mx_AppLoading_spinner_fadeIn_animation;
}
@-webkit-keyframes mx_AppLoading_spinner_fadeIn_animation {
from { opacity: 0 }
to { opacity: 1 }
}
@keyframes mx_AppLoading_spinner_fadeIn_animation {
from { opacity: 0 }
to { opacity: 1 }
}
.mx_AppLoading iframe {
display: none;
}
.mx_Autocomplete {
position: absolute;
bottom: 0;
z-index: 1001;
width: 100%;
border: 1px solid #e5e5e5;
background: #EEF2F5;
border-bottom: none;
border-radius: 4px 4px 0 0;
max-height: 50vh;
overflow: auto
}
.mx_Autocomplete_ProviderSection {
border-bottom: 1px solid #e5e5e5;
}
.mx_Autocomplete_Completion_container_pill {
margin: 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
/* a "block" completion takes up a whole line */
.mx_Autocomplete_Completion_block {
height: 34px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #70808D;
}
.mx_Autocomplete_Completion_block * {
margin: 0 3px;
}
.mx_Autocomplete_Completion_pill {
border-radius: 17px;
height: 34px;
padding: 0px 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #70808D;
}
.mx_Autocomplete_Completion_pill > * {
margin: 0 3px;
}
.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_title, .mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_subtitle, .mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_description {
/* Ellipsis for long names/subtitles/descriptions*/
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* container for pill-style completions */
.mx_Autocomplete_Completion_container_pill {
margin: 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: wrap;
flex-flow: wrap;
}
.mx_Autocomplete_Completion.selected, .mx_Autocomplete_Completion:hover {
background: #f6f6f6;
outline: none;
}
.mx_Autocomplete_provider_name {
margin: 12px;
color: #70808D;
font-weight: 400;
opacity: 0.4;
}
/* styling for common completion elements */
.mx_Autocomplete_Completion_subtitle {
font-style: italic;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.mx_Autocomplete_Completion_description {
color: gray;
}
/*
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.
*/
.mx_EntityTile {
display: table-row;
position: relative;
color: #70808D;
cursor: pointer;
}
.mx_EntityTile_invite {
display: table-cell;
vertical-align: middle;
margin-left: 10px;
width: 26px;
}
.mx_EntityTile_avatar, .mx_GroupRoomTile_avatar {
display: table-cell;
padding-left: 3px;
padding-right: 12px;
padding-top: 4px;
padding-bottom: 4px;
vertical-align: middle;
width: 36px;
height: 36px;
position: relative;
}
.mx_EntityTile_power {
position: absolute;
width: 16px;
height: 17px;
top: 0px;
right: 6px;
}
.mx_EntityTile_name, .mx_GroupRoomTile_name {
display: table-cell;
vertical-align: middle;
overflow: hidden;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 155px;
}
.mx_EntityTile_details {
display: table-cell;
padding-right: 14px;
vertical-align: middle;
}
.mx_EntityTile_name_hover {
font-size: 13px;
}
.mx_EntityTile_chevron {
margin-top: 8px;
margin-right: -4px;
margin-left: 6px;
float: right;
}
.mx_EntityTile_ellipsis .mx_EntityTile_name {
font-style: italic;
color: #70808D;
}
.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
font-style: italic;
color: #70808D;
}
.mx_EntityTile_unavailable .mx_EntityTile_avatar, .mx_EntityTile_unavailable .mx_EntityTile_name, .mx_EntityTile_unavailable .mx_EntityTile_name_hover, .mx_EntityTile_offline_beenactive .mx_EntityTile_avatar, .mx_EntityTile_offline_beenactive .mx_EntityTile_name, .mx_EntityTile_offline_beenactive .mx_EntityTile_name_hover
{
opacity: 0.66;
}
.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar, .mx_EntityTile_offline_neveractive .mx_EntityTile_name, .mx_EntityTile_offline_neveractive .mx_EntityTile_name_hover
{
opacity: 0.25;
}
.mx_EntityTile_unknown .mx_EntityTile_avatar, .mx_EntityTile_unknown .mx_EntityTile_name, .mx_EntityTile_unknown .mx_EntityTile_name_hover
{
opacity: 0.25;
}
/*
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.
*/
.mx_EventTile {
max-width: 100%;
clear: both;
padding-top: 18px;
font-size: 14px;
position: relative;
}
.mx_EventTile.mx_EventTile_info {
padding-top: 0px;
}
.mx_EventTile_avatar {
position: absolute;
top: 14px;
left: 8px;
cursor: pointer;
}
.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
top: 8px;
left: 65px;
}
.mx_EventTile_continuation {
padding-top: 0px ! important;
}
.mx_EventTile .mx_SenderProfile {
color: #70808D;
font-size: 14px;
display: block; /* anti-zalgo, with overflow hidden */
overflow-y: hidden;
cursor: pointer;
padding-left: 65px; /* left gutter */
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
line-height: 22px;
}
.mx_EventTile .mx_SenderProfile .mx_SenderProfile_name, .mx_EventTile .mx_SenderProfile .mx_SenderProfile_aux {
opacity: 0.5;
}
.mx_EventTile .mx_SenderProfile .mx_Flair {
opacity: 0.7;
margin-left: 5px;
}
.mx_EventTile .mx_SenderProfile .mx_Flair img {
vertical-align: -2px;
margin-right: 2px;
border-radius: 8px;
}
.mx_EventTile .mx_MessageTimestamp {
display: block;
visibility: hidden;
white-space: nowrap;
color: #acacac;
font-size: 10px;
left: 0px;
width: 46px; /* 8 + 30 (avatar) + 8 */
text-align: center;
position: absolute;
}
.mx_EventTile_line, .mx_EventTile_reply {
position: relative;
/* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
margin-right: 110px;
padding-left: 65px; /* left gutter */
padding-top: 4px;
padding-bottom: 2px;
border-radius: 4px;
min-height: 24px;
line-height: 22px;
}
.mx_EventTile_reply {
margin-right: 10px;
}
.mx_EventTile_info .mx_EventTile_line {
padding-left: 83px;
}
/* HACK to override line-height which is already marked important elsewhere */
.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
font-size: 48px ! important;
line-height: 48px ! important;
}
/* this is used for the tile for the event which is selected via the URL.
* TODO: ultimately we probably want some transition on here.
*/
.mx_EventTile_selected > .mx_EventTile_line {
border-left: #6CC1F6 5px solid;
padding-left: 60px;
background-color: #f7f7f7;
}
.mx_EventTile:hover .mx_EventTile_line, .mx_EventTile.menu .mx_EventTile_line
{
background-color: #f7f7f7;
}
.mx_EventTile_searchHighlight {
background-color: #6CC1F6;
color: #ffffff;
border-radius: 5px;
padding-left: 2px;
padding-right: 2px;
cursor: pointer;
}
.mx_EventTile_searchHighlight a {
background-color: #6CC1F6;
color: #ffffff;
}
.mx_EventTile_encrypting {
color: #abddbc ! important;
}
.mx_EventTile_sending {
color: #ddd;
}
.mx_EventTile_sending .mx_UserPill, .mx_EventTile_sending .mx_RoomPill, .mx_EventTile_sending .mx_emojione {
opacity: 0.5;
}
.mx_EventTile_notSent {
color: #f44;
}
.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody, .mx_EventTile_redacted .mx_EventTile_reply .mx_UnknownBody {
display: block;
width: 100%;
height: 22px;
width: 250px;
border-radius: 11px;
background: repeating-linear-gradient(
-45deg,
#e2e2e2,
#e2e2e2 3px,
transparent 3px,
transparent 6px
);
box-shadow: 0px 0px 3px #cccccc inset;
}
.mx_EventTile_highlight, .mx_EventTile_highlight .markdown-body
{
color: #F69E98;
}
.mx_EventTile_contextual {
opacity: 0.4;
}
.mx_EventTile_msgOption {
float: right;
text-align: right;
position: relative;
width: 90px;
/* Hack to stop the height of this pushing the messages apart.
Replaces margin-top: -6px. This interacts better with a read
marker being in between. Content overflows. */
height: 1px;
margin-right: 10px;
}
.mx_EventTile_msgOption a {
text-decoration: none;
}
.mx_EventTile_last > div > a > .mx_MessageTimestamp, .mx_EventTile:hover > div > a > .mx_MessageTimestamp, .mx_EventTile.menu > div > a > .mx_MessageTimestamp {
visibility: visible;
}
.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
visibility: visible;
}
.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
left: 3px;
width: auto;
}
.mx_EventTile_editButton {
position: absolute;
display: inline-block;
visibility: hidden;
cursor: pointer;
top: 6px;
right: 6px;
width: 19px;
height: 19px;
background-image: url("../../img/icon_context_message.svg");
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mx_EventTile:hover .mx_EventTile_editButton, .mx_EventTile.menu .mx_EventTile_editButton {
visibility: visible;
}
.mx_EventTile_readAvatars {
position: relative;
display: inline-block;
width: 14px;
height: 14px;
top: 29px;
}
.mx_EventTile_continuation .mx_EventTile_readAvatars, .mx_EventTile_info .mx_EventTile_readAvatars, .mx_EventTile_emote .mx_EventTile_readAvatars {
top: 7px;
}
.mx_EventTile_readAvatars .mx_BaseAvatar {
position: absolute;
display: inline-block;
}
.mx_EventTile_readAvatarRemainder {
color: #acacac;
font-size: 11px;
position: absolute;
}
/* all the overflow-y: hidden; are to trap Zalgos -
but they introduce an implicit overflow-x: auto.
so make that explicitly hidden too to avoid random
horizontal scrollbars occasionally appearing, like in
https://github.com/vector-im/vector-web/issues/1154
*/
.mx_EventTile_content {
display: block;
overflow-y: hidden;
overflow-x: hidden;
margin-right: 34px;
}
/* De-zalgoing */
.mx_EventTile_body {
overflow-y: hidden;
}
/* End to end encryption stuff */
.mx_EventTile_e2eIcon {
display: block;
position: absolute;
top: 9px;
left: 46px;
cursor: pointer;
}
.mx_EventTile_e2eIcon_hidden {
display: none;
}
/* always override hidden attribute for blocked and warning */
.mx_EventTile_e2eIcon_hidden[src="img/e2e-blocked.svg"], .mx_EventTile_e2eIcon_hidden[src="img/e2e-warning.svg"] {
display: block;
}
.mx_EventTile_keyRequestInfo {
font-size: 12px;
}
.mx_EventTile_keyRequestInfo_text {
opacity: 0.5;
}
.mx_EventTile_keyRequestInfo_text a {
color: #70808D;
text-decoration: underline;
cursor: pointer;
}
.mx_EventTile_keyRequestInfo_tooltip_contents p {
text-align: auto;
margin-left: 3px;
margin-right: 3px;
}
.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
margin-top: 0px;
}
.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
margin-bottom: 0px;
}
.mx_EventTile_12hr .mx_EventTile_e2eIcon {
padding-left: 5px;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
padding-left: 60px;
}
.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line {
padding-left: 78px;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
border-left: #76cfa5 5px solid;
}
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
border-left: #e8bf37 5px solid;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp {
left: 3px;
width: auto;
}
/*
.mx_EventTile_verified .mx_EventTile_e2eIcon {
display: none;
}
*/
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon {
display: block;
left: 41px;
}
/* Various markdown overrides */
.mx_EventTile_content .markdown-body {
font-family: inherit ! important;
white-space: normal ! important;
line-height: inherit ! important;
color: inherit;
font-size: 14px;
}
/* have to use overlay rather than auto otherwise Linux and Windows
Chrome gets very confused about vertical spacing:
https://github.com/vector-im/vector-web/issues/754
*/
.mx_EventTile_content .markdown-body pre {
overflow-x: overlay;
overflow-y: visible;
max-height: 30vh;
}
.mx_EventTile_content .markdown-body code {
background-color: #f8f8f8;
color: #333;
}
.mx_EventTile_pre_container {
position: relative;
}
.mx_EventTile_copyButton {
position: absolute;
display: inline-block;
visibility: hidden;
cursor: pointer;
top: 6px;
right: 6px;
width: 19px;
height: 19px;
background-image: url("../../img/icon_copy_message.svg");
}
.mx_EventTile_body pre {
border: 1px solid transparent;
}
.mx_EventTile:hover .mx_EventTile_body pre
{
border: 1px solid #e5e5e5;
}
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton
{
visibility: visible;
}
.mx_EventTile_content .markdown-body h1, .mx_EventTile_content .markdown-body h2, .mx_EventTile_content .markdown-body h3, .mx_EventTile_content .markdown-body h4, .mx_EventTile_content .markdown-body h5, .mx_EventTile_content .markdown-body h6
{
font-family: inherit ! important;
color: inherit;
}
/* Make h1 and h2 the same size as h3. */
.mx_EventTile_content .markdown-body h1, .mx_EventTile_content .markdown-body h2
{
font-size: 1.5em;
border-bottom: none ! important;
}
.mx_EventTile_content .markdown-body a {
color: #6CC1F6;
}
.mx_EventTile_content .markdown-body .hljs {
display: inline ! important;
}
/* end of overrides */
.mx_MatrixChat_useCompactLayout .mx_EventTile {
padding-top: 4px;
}
.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info {
padding-top: 0px;
font-size: 13px;
}
.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line, .mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_reply {
line-height: 20px;
}
.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
top: 4px;
}
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_SenderProfile {
font-size: 13px;
}
.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote {
padding-top: 8px;
}
.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_avatar {
top: 2px;
}
.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_line, .mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_reply {
padding-top: 0px;
padding-bottom: 1px;
}
.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
padding-top: 0;
}
.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_line, .mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_reply {
padding-top: 0px;
padding-bottom: 0px;
}
.mx_MatrixChat_useCompactLayout .mx_EventTile_line, .mx_MatrixChat_useCompactLayout .mx_EventTile_reply {
padding-top: 0px;
padding-bottom: 0px;
}
.mx_MatrixChat_useCompactLayout .mx_EventTile_avatar {
top: 2px;
}
.mx_MatrixChat_useCompactLayout .mx_EventTile_e2eIcon {
top: 7px;
}
.mx_MatrixChat_useCompactLayout .mx_EventTile_editButton {
top: 3px;
}
.mx_MatrixChat_useCompactLayout .mx_EventTile_readAvatars {
top: 27px;
}
.mx_MatrixChat_useCompactLayout .mx_EventTile_continuation .mx_EventTile_readAvatars, .mx_MatrixChat_useCompactLayout .mx_EventTile_emote .mx_EventTile_readAvatars {
top: 5px;
}
.mx_MatrixChat_useCompactLayout .mx_EventTile_info .mx_EventTile_readAvatars {
top: 4px;
}
.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList h2 {
margin-top: 6px;
}
.mx_MatrixChat_useCompactLayout .mx_EventTile_content .markdown-body p, .mx_MatrixChat_useCompactLayout .mx_EventTile_content .markdown-body ul, .mx_MatrixChat_useCompactLayout .mx_EventTile_content .markdown-body ol, .mx_MatrixChat_useCompactLayout .mx_EventTile_content .markdown-body dl, .mx_MatrixChat_useCompactLayout .mx_EventTile_content .markdown-body blockquote, .mx_MatrixChat_useCompactLayout .mx_EventTile_content .markdown-body pre, .mx_MatrixChat_useCompactLayout .mx_EventTile_content .markdown-body table {
margin-bottom: 4px;
}
/*
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.
*/
.mx_LinkPreviewWidget {
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-left: 4px solid #ddd;
color: #888;
}
.mx_LinkPreviewWidget_image {
-webkit-box-flex: 0;
-ms-flex: 0 0 100px;
flex: 0 0 100px;
margin-left: 15px;
text-align: center;
cursor: pointer;
}
.mx_LinkPreviewWidget_caption {
margin-left: 15px;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.mx_LinkPreviewWidget_title {
display: inline;
font-weight: bold;
white-space: normal;
}
.mx_LinkPreviewWidget_siteName {
display: inline;
}
.mx_LinkPreviewWidget_description {
margin-top: 8px;
white-space: normal;
word-wrap: break-word;
}
.mx_LinkPreviewWidget_cancel {
visibility: hidden;
cursor: pointer;
-webkit-box-flex: 0;
-ms-flex: 0 0 40px;
flex: 0 0 40px;
}
.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel {
visibility: visible;
}
.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget {
margin-top: 6px;
margin-bottom: 6px;
}
/*
Copyright 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.
*/
.mx_MemberDeviceInfo {
padding: 10px 0px;
}
.mx_MemberDeviceInfo.mx_DeviceVerifyButtons {
padding: 6px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.mx_MemberDeviceInfo_textButton {
/* align images in buttons (eg spinners) */
vertical-align: middle;
border-radius: 8px;
border: 1px solid rgba(199, 206, 209, 0.12);
background-color: #6CC1F6;
font-size: 13px;
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
text-transform: uppercase;
letter-spacing: 1px;
color: #ffffff;
cursor: pointer;
outline: none;
padding: 14px;
box-sizing: border-box;
padding-left: 1.5em;
padding-right: 1.5em;
display: inline-block;
transition: background-color .2s ease;
height: auto;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 1em;
padding-right: 1em;
margin: 2px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.mx_MemberDeviceInfo_textButton:hover {
background-color: #84cfff;
}
.mx_MemberDeviceInfo_deviceId {
font-size: 13px;
}
.mx_MemberDeviceInfo_deviceInfo {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
/* "Unblacklist" is too long for a regular button: make it wider and
reduce the padding. */
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist, .mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist {
width: 8em;
padding-left: 1em;
padding-right: 1em;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified, .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified, .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
float: right;
padding-left: 1em;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
color: #76cfa5;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
color: #e8bf37;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
color: #ba6363;
}
/*
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.
*/
.mx_MemberInfo {
margin-top: 20px;
padding-right: 20px;
height: 100%;
overflow-y: auto;
}
.mx_MemberInfo h2 {
margin-top: 6px;
}
.mx_MemberInfo .mx_RoomTile_nameContainer {
width: 154px;
}
.mx_MemberInfo .mx_RoomTile_badge {
display: none;
}
.mx_MemberInfo .mx_RoomTile_name {
width: 160px;
}
.mx_MemberInfo_cancel {
float: right;
margin-right: 10px;
cursor: pointer;
}
.mx_MemberInfo_avatar {
clear: both;
}
.mx_MemberInfo_avatar .mx_BaseAvatar {
}
.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
cursor: zoom-in;
}
.mx_MemberInfo_profile {
margin-bottom: 16px;
}
.mx_MemberInfo h3 {
text-transform: uppercase;
color: #3d3b39;
font-weight: 600;
font-size: 13px;
margin-top: 16px;
margin-bottom: 14px;
}
.mx_MemberInfo_profileField {
font-size: 13px;
position: relative;
background-color: #EEF2F5;
}
.mx_MemberInfo_buttons {
margin-bottom: 16px;
}
.mx_MemberInfo_field {
cursor: pointer;
font-size: 13px;
color: #6CC1F6;
margin-left: 8px;
line-height: 23px;
}
.mx_MemberInfo_createRoom {
cursor: pointer;
}
.mx_MemberInfo_createRoom_label {
width: initial ! important;
cursor: pointer;
}
.mx_MemberInfo label {
font-size: 13px;
}
.mx_MemberInfo label .mx_MemberInfo_label_text {
display: inline-block;
max-width: 180px;
vertical-align: text-top;
}
.mx_MemberInfo input[type="radio"] {
vertical-align: -2px;
margin-right: 5px;
margin-left: 8px;
}
/*
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.
*/
.mx_MemberList, .mx_GroupMemberList, .mx_GroupRoomList {
height: 100%;
margin-top: 12px;
margin-right: 20px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mx_MemberList .mx_Spinner {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.mx_MemberList_chevron {
position: absolute;
right: 35px;
margin-top: -15px;
}
.mx_MemberList_border {
overflow-y: auto;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0px;
}
.mx_MemberList_query, .mx_GroupMemberList_query, .mx_GroupRoomList_query {
font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif;
border-radius: 3px;
border: 1px solid #c9cfd4;
padding: 9px;
color: #70808D;
background-color: #EEF2F5;
margin-left: 3px;
font-size: 14px;
margin-bottom: 8px;
width: 189px;
}
.mx_MemberList_query::-moz-placeholder, .mx_GroupMemberList_query::-moz-placeholder, .mx_GroupRoomList_query::-moz-placeholder {
color: #70808D;
opacity: 0.5;
font-size: 14px;
}
.mx_MemberList_query::-webkit-input-placeholder, .mx_GroupMemberList_query::-webkit-input-placeholder, .mx_GroupRoomList_query::-webkit-input-placeholder {
color: #70808D;
opacity: 0.5;
font-size: 14px;
}
.mx_MemberList_joined {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
overflow-y: auto;
}
/*
.mx_MemberList_invited {
order: 3;
flex: 0 0 100px;
overflow-y: auto;
}
*/
.mx_GroupMemberList_invited h2, .mx_MemberList_invited h2 {
text-transform: uppercase;
color: #3d3b39;
font-weight: 600;
font-size: 13px;
padding-left: 3px;
padding-right: 12px;
margin-top: 8px;
margin-bottom: 4px;
}
/* we have to have display: table in order for the horizontal wrapping to work */
.mx_MemberList_wrapper {
display: table;
table-layout: fixed;
width: 100%;
}
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2018 New Vector 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_MessageComposer_wrapper {
max-width: 960px;
vertical-align: middle;
margin: auto;
border-top: 1px solid #e5e5e5;
position: relative;
}
.mx_MessageComposer_replaced_wrapper {
margin-left: auto;
margin-right: auto;
}
.mx_MessageComposer_replaced_valign {
height: 60px;
display: table-cell;
vertical-align: middle;
}
.mx_MessageComposer_roomReplaced_icon {
float: left;
margin-right: 20px;
margin-top: 5px;
width: 31px;
height: 31px;
}
.mx_MessageComposer_roomReplaced_header {
font-weight: bold;
}
.mx_MessageComposer_autocomplete_wrapper {
position: relative;
height: 0;
}
.mx_MessageComposer_row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.mx_MessageComposer_row > div:last-child{
padding-right: 0;
}
.mx_MessageComposer .mx_MessageComposer_avatar {
padding-left: 10px;
padding-right: 28px;
}
.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
display: block;
}
.mx_MessageComposer_composecontrols {
width: 100%;
}
.mx_MessageComposer_e2eIcon {
position: absolute;
left: 44px;
}
.mx_MessageComposer_noperm_error {
width: 100%;
height: 60px;
font-style: italic;
color: #888;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.mx_MessageComposer_input_wrapper {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
cursor: text;
}
.mx_MessageComposer_input {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
vertical-align: middle;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 60px;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
font-size: 14px;
margin-right: 6px;
}
.mx_MessageComposer_editor {
width: 100%;
max-height: 120px;
min-height: 19px;
overflow: auto;
word-break: break-word;
}
.mx_MessageComposer_editor > :first-child {
margin-top: 0 ! important;
}
.mx_MessageComposer_editor > :last-child {
margin-bottom: 0 ! important;
}
@-webkit-keyframes visualbell
{
from { background-color: #faa }
to { background-color: #EEF2F5 }
}
@keyframes visualbell
{
from { background-color: #faa }
to { background-color: #EEF2F5 }
}
.mx_MessageComposer_input_error {
-webkit-animation: 0.2s visualbell;
animation: 0.2s visualbell;
}
.mx_MessageComposer_input blockquote {
color: #777;
margin: 0 0 16px;
padding: 0 15px;
border-left: 4px solid #ddd;
}
.mx_MessageComposer_input pre {
background-color: rgba(0, 0, 0, 0.04);
border-radius: 3px;
padding: 10px;
}
.mx_MessageComposer_input textarea {
display: block;
width: 100%;
padding: 0px;
margin-top: 6px;
margin-bottom: 6px;
border: 0px;
resize: none;
outline: none;
box-shadow: none;
color: #70808D;
background-color: #EEF2F5;
font-size: 14px;
max-height: 120px;
overflow: auto;
/* needed for FF */
font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif;
}
/* hack for FF as vertical alignment of custom placeholder text is broken */
.mx_MessageComposer_input textarea::-moz-placeholder {
line-height: 100%;
color: #6CC1F6;
opacity: 1.0;
}
.mx_MessageComposer_input textarea::-webkit-input-placeholder {
color: #6CC1F6;
}
.mx_MessageComposer_upload, .mx_MessageComposer_hangup, .mx_MessageComposer_voicecall, .mx_MessageComposer_videocall, .mx_MessageComposer_apps, .mx_MessageComposer_stickers {
/*display: table-cell;*/
/*vertical-align: middle;*/
/*padding-left: 10px;*/
padding-right: 5px;
cursor: pointer;
padding-top: 4px;
}
.mx_MessageComposer_upload object, .mx_MessageComposer_hangup object, .mx_MessageComposer_voicecall object, .mx_MessageComposer_videocall object, .mx_MessageComposer_apps object, .mx_MessageComposer_stickers object {
pointer-events: none;
}
.mx_MessageComposer_formatting {
cursor: pointer;
margin: 0 11px;
width: 24px;
height: 18px;
}
.mx_MessageComposer_formatbar_wrapper {
width: 100%;
background-color: #f6f6f6;
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
}
.mx_MessageComposer_formatbar {
margin: auto;
max-width: 960px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 30px;
box-sizing: border-box;
padding-left: 62px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 10px;
color: #888;
}
.mx_MessageComposer_formatbar * {
margin-right: 4px;
}
.mx_MessageComposer_format_button, .mx_MessageComposer_formatbar_cancel, .mx_MessageComposer_formatbar_markdown {
cursor: pointer;
}
.mx_MessageComposer_formatbar_cancel {
margin-right: 22px;
}
.mx_MessageComposer_formatbar_markdown {
margin-right: 64px;
}
.mx_MessageComposer_input_markdownIndicator {
cursor: pointer;
height: 10px;
padding: 4px 4px 4px 0;
opacity: 0.8;
}
.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input {
min-height: 50px;
}
.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error {
height: 50px;
}
/*
Copyright 2017 Travis Ralston
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_PinnedEventTile {
min-height: 40px;
margin-bottom: 5px;
width: 100%;
border-radius: 5px;
}
.mx_PinnedEventTile:hover {
background-color: #f7f7f7;
}
.mx_PinnedEventTile .mx_PinnedEventTile_sender, .mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
color: #868686;
font-size: 0.8em;
vertical-align: top;
display: inline-block;
padding-bottom: 3px;
}
.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
padding-left: 15px;
display: none;
}
.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar {
float: left;
margin-right: 10px;
}
.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp {
display: inline-block;
}
.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
display: block;
}
.mx_PinnedEventTile_actions {
float: right;
margin-right: 10px;
display: none;
}
.mx_PinnedEventTile_unpinButton {
display: inline-block;
cursor: pointer;
margin-left: 10px;
}
.mx_PinnedEventTile_gotoButton {
display: inline-block;
font-size: 0.7em;
}
.mx_PinnedEventTile_message {
margin-left: 50px;
position: relative;
top: 0;
left: 0;
}
/*
Copyright 2017 Travis Ralston
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_PinnedEventsPanel {
border-top: 1px solid #e5e5e5;
}
.mx_PinnedEventsPanel_body {
max-height: 300px;
overflow-y: auto;
padding-bottom: 15px;
}
.mx_PinnedEventsPanel_header {
margin: 0;
padding-top: 8px;
padding-bottom: 15px;
}
.mx_PinnedEventsPanel_cancel {
margin: 12px;
float: right;
display: inline-block;
}
/*
Copyright 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.
*/
.mx_PresenceLabel {
font-size: 11px;
opacity: 0.5;
}
/*
Copyright 2018 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_ReplyPreview {
position: absolute;
bottom: 0;
z-index: 1000;
width: 100%;
border: 1px solid #e5e5e5;
background: #EEF2F5;
border-bottom: none;
border-radius: 4px 4px 0 0;
max-height: 50vh;
overflow: auto
}
.mx_ReplyPreview_section {
border-bottom: 1px solid #e5e5e5;
}
.mx_ReplyPreview_header {
margin: 12px;
color: #70808D;
font-weight: 400;
opacity: 0.4;
}
.mx_ReplyPreview_title {
float: left;
}
.mx_ReplyPreview_cancel {
float: right;
cursor: pointer;
}
.mx_ReplyPreview_clear {
clear: both;
}
/*
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.
*/
.mx_RoomDropTarget_container {
background-color: #586C7B;
padding-left: 18px;
padding-right: 18px;
padding-top: 8px;
padding-bottom: 7px;
}
.collapsed .mx_RoomDropTarget_container {
padding-right: 10px;
padding-left: 10px;
}
.mx_RoomDropTarget {
font-size: 13px;
padding-top: 5px;
padding-bottom: 5px;
border: 1px dashed #6CC1F6;
color: #70808D;
background-color: rgba(255,255,255,0.5);
border-radius: 4px;
}
.mx_RoomDropTarget_label {
position: relative;
margin-top: 3px;
line-height: 21px;
z-index: 1;
text-align: center;
}
.collapsed .mx_RoomDropTarget_avatar {
float: none;
}
.collapsed .mx_RoomDropTarget_label {
display: none;
}
/*
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 {
-webkit-box-flex: 0 ! important;
-ms-flex: 0 0 93px ! important;
flex: 0 0 93px ! important;
}
.mx_RoomHeader_wrapper {
max-width: 960px;
margin: auto;
height: 70px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mx_RoomHeader_leftRow {
margin-left: -2px;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
}
.mx_RoomHeader_spinner {
height: 36px;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
padding-left: 12px;
padding-right: 12px;
}
.mx_RoomHeader_textButton {
/* align images in buttons (eg spinners) */
vertical-align: middle;
border-radius: 8px;
border: 1px solid rgba(199, 206, 209, 0.12);
background-color: #6CC1F6;
font-size: 13px;
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
text-transform: uppercase;
letter-spacing: 1px;
color: #ffffff;
cursor: pointer;
outline: none;
padding: 14px;
box-sizing: border-box;
padding-left: 1.5em;
padding-right: 1.5em;
display: inline-block;
transition: background-color .2s ease;
margin-right: 8px;
margin-top: -5px;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.mx_RoomHeader_textButton:hover {
background-color: #84cfff;
}
.mx_RoomHeader_textButton_danger {
background-color: #F69E98;
}
.mx_RoomHeader_cancelButton {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
cursor: pointer;
padding-left: 12px;
padding-right: 12px;
}
.mx_RoomHeader_rightRow {
margin-top: 4px;
background-color: #EEF2F5;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.mx_RoomHeader_info {
display: table-cell;
width: 100%;
vertical-align: middle;
}
.mx_RoomHeader_simpleHeader {
line-height: 70px;
color: #70808D;
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: #70808D;
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: #a2a2a2 ! 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: #6CC1F6;
}
.mx_RoomHeader_placeholder {
color: #a2a2a2 ! important;
}
.mx_RoomHeader_editable {
border-bottom: 1px solid #c7c7c7 ! important;
min-width: 150px;
cursor: text;
}
.mx_RoomHeader_editable:focus {
border-bottom: 1px solid #6CC1F6 ! important;
outline: none;
box-shadow: none;
}
.mx_RoomHeader_topic {
vertical-align: bottom;
float: left;
max-height: 38px;
color: #a2a2a2;
font-weight: 300;
font-size: 13px;
margin-left: 19px;
margin-right: 16px;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid transparent;
-webkit-column-width: 960px;
column-width: 960px;
}
.mx_RoomHeader_avatar {
display: table-cell;
width: 48px;
height: 50px;
vertical-align: middle;
}
.mx_RoomHeader_avatar .mx_BaseAvatar_image {
-o-object-fit: cover;
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: #888;
}
.mx_RoomHeader_pinsIndicatorUnread {
background-color: #ff0064;
}
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2107 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_RoomList {
padding-bottom: 12px;
min-height: 400px;
}
.mx_RoomList_expandButton {
margin-left: 8px;
cursor: pointer;
padding-left: 12px;
padding-right: 12px;
}
/* Evil hacky override until Chrome fixes drop and drag table cells
and we can correctly fix horizontal wrapping in the sidebar again */
.mx_RoomList_scrollbar .gm-scroll-view {
overflow-x: hidden ! important;
overflow-y: scroll ! important;
}
/* Make sure the scrollbar is above the sticky headers from RoomList */
.mx_RoomList_scrollbar .gm-scrollbar.-vertical {
z-index: 6;
}
.mx_RoomList_emptySubListTip_container {
background-color: #586C7B;
padding-left: 18px;
padding-right: 18px;
padding-top: 8px;
padding-bottom: 7px;
}
.mx_RoomList_emptySubListTip {
font-size: 13px;
padding: 5px;
border: 1px dashed #6CC1F6;
color: #70808D;
background-color: rgba(255,255,255,0.5);
border-radius: 4px;
line-height: 16px;
}
.mx_RoomList_emptySubListTip .mx_RoleButton {
vertical-align: -2px;
}
.mx_RoomList_headerButtons {
position: absolute;
right: 60px;
}
/*
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.
*/
.mx_RoomPreviewBar {
text-align: center;
height: 176px;
background-color: #f7f7f7;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: #f7f7f7;
-webkit-align-items: center;
}
.mx_RoomPreviewBar_wrapper {
}
.mx_RoomPreviewBar_invite_text {
color: #70808D;
}
.mx_RoomPreviewBar_join_text {
color: #F69E98;
}
.mx_RoomPreviewBar_preview_text {
margin-top: 25px;
color: #a2a2a2;
}
.mx_RoomPreviewBar_join_text a {
text-decoration: underline;
cursor: pointer;
}
.mx_RoomPreviewBar_warning {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 8px;
}
.mx_RoomPreviewBar_warningIcon {
padding: 12px;
}
.mx_RoomPreviewBar_spinnerIntro {
margin-top: 50px;
}
/*
Copyright 2015, 2016 OpenMarket Ltd
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_RoomSettings {
margin-left: 65px;
margin-bottom: 20px;
}
.mx_RoomSettings_upgradeButton, .mx_RoomSettings_leaveButton, .mx_RoomSettings_unbanButton {
/* align images in buttons (eg spinners) */
vertical-align: middle;
border-radius: 8px;
border: 1px solid rgba(199, 206, 209, 0.12);
background-color: #6CC1F6;
font-size: 13px;
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
text-transform: uppercase;
letter-spacing: 1px;
color: #ffffff;
cursor: pointer;
outline: none;
padding: 14px;
box-sizing: border-box;
padding-left: 1.5em;
padding-right: 1.5em;
display: inline-block;
transition: background-color .2s ease;
position: relative;
margin-right: 8px;
}
.mx_RoomSettings_upgradeButton, .mx_RoomSettings_leaveButton:hover, .mx_RoomSettings_unbanButton:hover {
background-color: #84cfff;
}
.mx_RoomSettings_upgradeButton.danger {
background-color: #ff0064;
}
.mx_RoomSettings_integrationsButton_error {
position: relative;
cursor: not-allowed;
}
.mx_RoomSettings_integrationsButton_error img {
position: absolute;
right: -5px;
top: -5px;
}
.mx_RoomSettings_leaveButton, .mx_RoomSettings_integrationsButton_error {
float: right;
}
.mx_RoomSettings_integrationsButton_error .mx_RoomSettings_integrationsButton_errorPopup {
display: none;
}
.mx_RoomSettings_integrationsButton_error:hover .mx_RoomSettings_integrationsButton_errorPopup {
display: inline;
}
.mx_RoomSettings_integrationsButton_errorPopup {
position: absolute;
top: 110%;
left: -125%;
width: 348%;
padding: 2%;
font-size: 10pt;
line-height: 1.5em;
border-radius: 5px;
background-color: #6CC1F6;
color: #ffffff;
text-align: center;
}
.mx_RoomSettings_unbanButton {
display: inline;
}
.mx_RoomSettings_e2eIcon {
padding-left: 4px;
padding-right: 7px;
}
.mx_RoomSettings_leaveButton {
margin-right: 32px;
}
.mx_RoomSettings_powerLevels {
display: table;
}
.mx_RoomSettings_powerLevel {
display: table-row;
}
.mx_RoomSettings_powerLevelKey, .mx_RoomSettings_powerLevel .mx_PowerSelector {
display: table-cell;
padding-bottom: 5px;
}
.mx_RoomSettings_powerLevelKey {
text-align: right;
padding-right: 0.3em;
}
.mx_RoomSettings h3 {
text-transform: uppercase;
color: #3d3b39;
font-weight: 600;
font-size: 13px;
margin-top: 36px;
margin-bottom: 10px;
}
.mx_RoomSettings .mx_RoomSettings_toggles label {
margin-bottom: 8px;
display: block;
}
.mx_RoomSettings .mx_RoomSettings_toggles input[type="checkbox"], .mx_RoomSettings .mx_RoomSettings_toggles input[type="radio"] {
margin-right: 7px;
}
.mx_RoomSettings .mx_RoomSettings_tags input[type="checkbox"] {
margin-left: 1em;
margin-right: 7px;
}
.mx_RoomSettings .mx_RoomSettings_tags {
margin-bottom: 8px;
}
.mx_RoomSettings .mx_RoomSettings_roomColor {
display: inline-block;
position: relative;
width: 37px;
height: 37px;
border: 1px solid #979797;
margin-right: 13px;
cursor: pointer;
}
.mx_RoomSettings .mx_RoomSettings_roomColor_selected {
position: absolute;
left: 10px;
top: 4px;
cursor: default ! important;
}
.mx_RoomSettings .mx_RoomSettings_roomColorPrimary {
height: 10px;
position: absolute;
bottom: 0px;
width: 100%;
}
.mx_RoomSettings .mx_RoomSettings_aliasLabel {
margin-bottom: 8px;
}
.mx_RoomSettings .mx_RoomSettings_aliasesTable {
margin-top: 12px;
margin-bottom: 0px;
margin-left: 56px;
display: table;
}
.mx_RoomSettings .mx_RoomSettings_aliasesTableRow {
display: table-row;
margin-bottom: 16px;
}
.mx_RoomSettings .mx_RoomSettings_alias {
max-width: 400px;
margin-bottom: 16px;
/*
commented out so margin applies
display: table-cell; */
}
.mx_RoomSettings .mx_RoomSettings_addAlias, .mx_RoomSettings .mx_RoomSettings_deleteAlias {
display: table-cell;
padding-left: 0.5em;
position: relative;
cursor: pointer;
}
.mx_RoomSettings .mx_RoomSettings_addAlias img, .mx_RoomSettings .mx_RoomSettings_deleteAlias img {
visibility: hidden;
}
.mx_RoomSettings .mx_RoomSettings_aliasesTableRow:hover .mx_RoomSettings_addAlias img, .mx_RoomSettings .mx_RoomSettings_aliasesTableRow:hover .mx_RoomSettings_deleteAlias img {
visibility: visible;
}
.mx_RoomSettings_warning {
color: #F69E98;
font-weight: bold;
margin-top: 8px;
margin-bottom: 8px;
}
.mx_RoomSettings_editable {
border: 0px;
border-bottom: 1px solid #c7c7c7;
padding: 0px;
min-width: 240px;
}
.mx_RoomSettings_editable:focus {
border-bottom: 1px solid #6CC1F6;
outline: none;
box-shadow: none;
}
.mx_RoomSettings_deleteAlias, .mx_RoomSettings_addAlias {
display: table-cell;
visibility: visible;
}
.mx_RoomSettings_deleteAlias:hover, .mx_RoomSettings_addAlias:hover {
visibility: visible;
}
.mx_RoomSettings_aliasPlaceholder {
color: #a2a2a2;
}
.mx_RoomSettings_buttons {
text-align: right;
margin-bottom: 16px;
}
.mx_RoomSettings_button {
display: inline;
border: 0px;
height: 36px;
border-radius: 36px;
font-weight: 400;
font-size: 15px;
color: #ffffff;
background-color: #6CC1F6;
width: auto;
margin: auto;
padding: 6px;
padding-left: 1em;
padding-right: 1em;
}
/*
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.
*/
.mx_RoomTile {
position: relative;
cursor: pointer;
font-size: 13px;
display: block;
height: 34px;
background-color: #586C7B;
}
.mx_RoomTile_tooltip {
display: inline-block;
position: relative;
top: -54px;
left: -12px;
}
.mx_RoomTile_nameContainer {
display: inline-block;
width: 180px;
height: 24px;
}
.mx_RoomTile_avatar_container {
position: relative;
}
.mx_RoomTile_avatar {
display: inline-block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 16px;
padding-right: 6px;
width: 24px;
height: 24px;
vertical-align: middle;
}
.mx_RoomTile_dm {
display: block;
position: absolute;
bottom: 0;
right: -5px;
z-index: 2;
}
.mx_RoomTile_name {
display: inline-block;
position: relative;
width: 165px;
vertical-align: middle;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 3px;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_RoomTile_invite {
/* color: rgba(69, 69, 69, 0.5); */
}
.collapsed .mx_RoomTile_nameContainer {
width: 60px; /* colapsed panel width */
}
.collapsed .mx_RoomTile_name {
display: none;
}
.collapsed .mx_RoomTile_badge {
top: 0px;
min-width: 12px;
border-radius: 16px;
padding: 0px 4px 0px 4px;
z-index: 3;
}
/* Hide the bottom of speech bubble */
.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:after {
display: none;
}
/* This is the bottom of the speech bubble */
.mx_RoomTile_highlight .mx_RoomTile_badge:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
margin-left: 5px;
border-top: 5px solid #F69E98;
border-right: 7px solid transparent;
}
.mx_RoomTile_badge {
display: inline-block;
min-width: 15px;
height: 15px;
position: absolute;
right: 8px; /*gutter */
top: 9px;
border-radius: 8px;
color: #ffffff;
font-weight: 600;
font-size: 10px;
text-align: center;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
}
.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_menuDisplayed .mx_RoomTile_badge {
letter-spacing: 0.1em;
opacity: 1;
}
.mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_menuDisplayed.mx_RoomTile_noBadges .mx_RoomTile_badge {
background-color: #dbdbdb;
}
.mx_RoomTile_unreadNotify .mx_RoomTile_badge {
background-color: #6CC1F6;
}
.mx_RoomTile_highlight .mx_RoomTile_badge {
background-color: #F69E98;
}
.mx_RoomTile_unread, .mx_RoomTile_highlight {
font-weight: 800;
}
.mx_RoomTile_selected {
background-color: #465561;
}
.mx_DNDRoomTile {
-webkit-transform: none;
transform: none;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
}
.mx_DNDRoomTile_dragging {
-webkit-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.mx_RoomTile:focus {
-webkit-filter: none ! important;
filter: none ! important;
background-color: #6d8597;
}
.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
width: 140px;
}
.mx_RoomTile_arrow {
position: absolute;
right: 0px;
}
.mx_RoomTile.mx_RoomTile_transparent {
background-color: transparent;
}
.mx_RoomTile.mx_RoomTile_transparent:focus {
background-color: rgba(0, 0, 0, 0.1);
}
/*
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.
*/
.mx_RoomTooltip_chevron {
position: absolute;
left: -8px;
top: 4px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 8px solid rgba(187, 187, 187, 0.5);
border-bottom: 8px solid transparent;
}
.mx_RoomTooltip_chevron:after {
content:'';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #EEF2F5;
border-bottom: 7px solid transparent;
position:absolute;
top: -7px;
left: 1px;
}
.mx_RoomTooltip {
display: none;
position: fixed;
border: 1px solid rgba(187, 187, 187, 0.5);
border-radius: 5px;
background-color: #EEF2F5;
z-index: 2000;
padding: 5px;
pointer-events: none;
line-height: 14px;
font-size: 13px;
color: #70808D;
max-width: 600px;
margin-right: 50px;
}
/*
Copyright 2018 New Vector 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_RoomUpgradeWarningBar {
text-align: center;
height: 176px;
background-color: #f7f7f7;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: #f7f7f7;
-webkit-align-items: center;
padding-left: 20px;
padding-right: 20px;
}
.mx_RoomUpgradeWarningBar_header {
color: #F69E98;
font-weight: bold;
}
.mx_RoomUpgradeWarningBar_body {
color: #F69E98;
}
.mx_RoomUpgradeWarningBar_upgradelink {
color: #F69E98;
text-decoration: underline;
}
.mx_RoomUpgradeWarningBar_small {
color: #888;
font-size: 70%;
}
/*
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.
*/
.mx_SearchBar {
padding-top: 5px;
padding-bottom: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mx_SearchBar_input {
display: inline block;
border-radius: 3px 0px 0px 3px;
border: 1px solid #c9cfd4;
font-size: 15px;
padding: 9px;
padding-left: 11px;
width: auto;
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
}
.mx_SearchBar_searchButton {
cursor: pointer;
margin-right: 10px;
width: 37px;
height: 37px;
border-radius: 0px 3px 3px 0px;
background-color: #6CC1F6;
}
@-webkit-keyframes pulsate {
0% { opacity: 1.0; }
50% { opacity: 0.1; }
100% { opacity: 1.0; }
}
@keyframes pulsate {
0% { opacity: 1.0; }
50% { opacity: 0.1; }
100% { opacity: 1.0; }
}
.mx_SearchBar_searching img {
-webkit-animation: pulsate 0.5s ease-out;
animation: pulsate 0.5s ease-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.mx_SearchBar_button {
display: inline;
border: 0px;
border-radius: 36px;
font-weight: 400;
font-size: 15px;
color: #ffffff;
background-color: #6CC1F6;
width: auto;
margin: auto;
margin-left: 7px;
padding-top: 6px;
padding-bottom: 4px;
padding-left: 24px;
padding-right: 24px;
cursor: pointer;
}
.mx_SearchBar_unselected {
background-color: #EEF2F5;
color: #6CC1F6;
border: #6CC1F6 1px solid;
}
.mx_SearchBar_cancel {
padding-left: 14px;
padding-right: 14px;
cursor: pointer;
}
/*
Copyright 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.
*/
.mx_SearchableEntityList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mx_SearchableEntityList_query {
font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif;
border-radius: 3px;
border: 1px solid #c9cfd4;
padding: 9px;
color: #70808D;
background-color: #EEF2F5;
margin-left: 3px;
font-size: 15px;
margin-bottom: 8px;
width: 189px;
}
.mx_SearchableEntityList_query::-moz-placeholder {
color: #70808D;
opacity: 0.5;
font-size: 12px;
}
.mx_SearchableEntityList_query::-webkit-input-placeholder {
color: #70808D;
opacity: 0.5;
font-size: 12px;
}
.mx_SearchableEntityList_listWrapper {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow-y: auto;
}
.mx_SearchableEntityList_list {
display: table;
table-layout: fixed;
width: 100%;
}
.mx_SearchableEntityList_list .mx_EntityTile_chevron {
display: none;
}
.mx_SearchableEntityList_hrWrapper {
width: 100%;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.mx_SearchableEntityList hr {
height: 1px;
border: 0px;
color: #70808D;
background-color: #70808D;
margin-right: 15px;
margin-top: 11px;
margin-bottom: 11px;
}
.mx_Stickers_content {
overflow: hidden;
}
.mx_Stickers_content_container {
overflow: hidden;
height: 300px;
}
.mx_Stickers_content .mx_AppTileFullWidth {
border: none;
}
.mx_Stickers_contentPlaceholder {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.mx_Stickers_contentPlaceholder p {
max-width: 200px;
}
.mx_Stickers_addLink {
display: inline;
cursor: pointer;
text-decoration: underline;
}
.mx_Stickers_hideStickers {
z-index: 2001;
}
/*
Copyright 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.
*/
.mx_TopUnreadMessagesBar {
margin: auto; /* centre horizontally */
max-width: 960px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #e5e5e5;
}
.mx_TopUnreadMessagesBar_scrollUp {
display: inline;
cursor: pointer;
text-decoration: underline;
}
.mx_TopUnreadMessagesBar_scrollUp img {
padding-left: 10px;
padding-right: 31px;
vertical-align: middle;
}
.mx_TopUnreadMessagesBar_scrollUp span {
opacity: 0.5;
}
.mx_TopUnreadMessagesBar_close {
float: right;
padding-right: 14px;
padding-top: 3px;
cursor: pointer;
}
.mx_MatrixChat_useCompactLayout .mx_TopUnreadMessagesBar {
padding-top: 4px;
padding-bottom: 4px;
}
/*
Copyright 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.
*/
.mx_DevicesPanel {
display: table;
table-layout: fixed;
width: 880px;
border-spacing: 2px;
}
.mx_DevicesPanel_header {
display: table-header-group;
font-weight: bold;
}
.mx_DevicesPanel_header > div {
display: table-cell;
}
.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen {
width: 30%;
}
.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons {
width: 20%;
}
.mx_DevicesPanel_device {
display: table-row;
}
.mx_DevicesPanel_device > div {
display: table-cell;
}
.mx_DevicesPanel_myDevice {
font-weight: bold;
}
/*
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.
*/
.mx_IntegrationsManager .mx_Dialog {
width: 60%;
height: 70%;
overflow: hidden;
padding: 0px;
max-width: initial;
max-height: initial;
}
.mx_IntegrationsManager iframe {
background-color: #fff;
border: 0px;
width: 100%;
height: 100%;
}
/*
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.
*/
.mx_UserNotifSettings_tableRow
{
display: table-row;
}
.mx_UserNotifSettings_inputCell {
display: table-cell;
padding-bottom: 8px;
padding-right: 8px;
width: 16px;
}
.mx_UserNotifSettings_labelCell
{
padding-bottom: 8px;
width: 400px;
display: table-cell;
}
.mx_UserNotifSettings_pushRulesTableWrapper {
padding-bottom: 8px;
}
.mx_UserNotifSettings_pushRulesTable {
width: 100%;
table-layout: fixed;
}
.mx_UserNotifSettings_pushRulesTable thead {
font-weight: bold;
font-size: 15px;
}
.mx_UserNotifSettings_pushRulesTable tbody th {
font-weight: 400;
font-size: 15px;
}
.mx_UserNotifSettings_pushRulesTable tbody th:first-child {
text-align: left;
}
.mx_UserNotifSettings_keywords {
cursor: pointer;
color: #6CC1F6;
}
.mx_UserSettings_devicesTable td {
padding-left: 20px;
padding-right: 20px;
}
.mx_UserSettings_devicesTable_nodevices {
font-style: italic;
}
/*
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.
*/
.mx_CallView_voice {
background-color: #6CC1F6;
color: #ffffff;
cursor: pointer;
text-align: center;
padding: 6px;
font-weight: bold;
font-size: 13px;
}
/*
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.
*/
.mx_IncomingCallBox {
text-align: center;
border: 1px solid #a4a4a4;
border-radius: 8px;
background-color: #EEF2F5;
position: fixed;
z-index: 1000;
padding: 6px;
margin-top: -3px;
margin-left: -20px;
width: 200px;
}
.mx_IncomingCallBox_chevron {
padding: 12px;
position: absolute;
left: -21px;
top: 0px;
}
.mx_IncomingCallBox_title {
padding: 6px;
font-weight: bold;
}
.mx_IncomingCallBox_buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mx_IncomingCallBox_buttons_cell {
vertical-align: middle;
padding: 6px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.mx_IncomingCallBox_buttons_decline, .mx_IncomingCallBox_buttons_accept {
vertical-align: middle;
width: 80px;
height: 36px;
line-height: 36px;
border-radius: 36px;
color: #ffffff;
margin: auto;
}
.mx_IncomingCallBox_buttons_decline {
background-color: #f48080;
}
.mx_IncomingCallBox_buttons_accept {
background-color: #80f480;
}
/*
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.
*/
.mx_VideoView {
width: 100%;
position: relative;
z-index: 30;
}
.mx_VideoView video {
width: 100%;
}
.mx_VideoView_remoteVideoFeed {
width: 100%;
background-color: #000;
z-index: 50;
}
.mx_VideoView_localVideoFeed {
width: 25%;
height: 25%;
position: absolute;
left: 10px;
bottom: 10px;
z-index: 100;
}
.mx_VideoView_localVideoFeed video {
width: auto;
height: 100%;
}
.mx_VideoView_localVideoFeed.mx_VideoView_localVideoFeed_flipped video {
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
}
/*
Copyright 2017 New Vector 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_StatusLogin {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: auto;
}
.mx_StatusLogin .mx_StatusLogin_brand {
position: absolute;
top: 30px;
left: 30px;
}
.mx_StatusLogin .mx_StatusLogin_content {
margin: auto;
}
.mx_StatusLogin .mx_StatusLogin_header {
text-align: center;
margin-top: 70px;
margin-bottom: 50px;
}
.mx_StatusLogin .mx_StatusLogin_header h1 {
font-size: 29px;
margin-bottom: 3px;
}
.mx_StatusLogin .mx_StatusLogin_subtitle {
font-size: 18px;
}
.mx_StatusLogin .mx_StatusLogin_subtitle a {
color: #A26988;
}
.mx_StatusLogin .mx_StatusLogin_footer {
margin-top: 30px;
margin-bottom: 30px;
text-align: center;
font-size: 16px;
color: #8D99A4;
}
.mx_StatusLogin .mx_StatusLogin_footer p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.mx_StatusLogin .mx_StatusLogin_footer_cta {
color: #4360DF;
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
letter-spacing: 1px;
font-size: 13px;
text-transform: uppercase;
opacity: 1.0;
transition: opacity .2s ease;
}
.mx_StatusLogin .mx_StatusLogin_footer_cta:hover {
opacity: 0.5;
text-decoration: none;
}
.mx_StatusLogin .mx_Login_box {
width: 330px;
min-height: initial;
padding-top: 40px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
border-radius: 8px;
color: #ffffff;
font-size: 16px;
line-height: 25px;
background-color: #4360DF;
background-image: url(../../themes/status/img/dot.svg);
box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);
position: relative;
text-align: center;
}
.mx_StatusLogin .mx_Login_logo {
background-color: #fff;
width: 74px;
height: 74px;
border-radius: 37px;
box-shadow: 0px 5px 16px 0px rgba(0,0,0,0.2);
position: absolute;
top: -36px;
left: 50%;
margin-left: -36px;
}
.mx_StatusLogin .mx_Login_logo img {
width: 36px;
height: 36px;
padding: 19px;
}
.mx_StatusLogin .mx_Login_box h2 {
text-align: center;
color: #ffffff;
font-size: 25px;
margin-bottom: 24px;
}
.mx_StatusLogin .mx_Login_field {
width: 260px;
height: 27px;
padding: 8px 20px 10px 20px;
border-radius: 10px;
text-align: left;
border: 1px solid transparent;
background-color: rgba(244, 242, 247, 0.12);
color: #ffffff;
font-weight: 300;
font-size: 15px;
margin-bottom: 14px;
transition: background-color .2s ease;
}
.mx_StatusLogin .mx_Login_field:focus {
border: 1px solid transparent;
background-color: rgba(255, 255, 255, 0.2);
}
.mx_StatusLogin .mx_Login_field::-webkit-input-placeholder {
font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif;
color: #ffffff;
opacity: 0.6;
}
.mx_StatusLogin .mx_Login_field::-moz-placeholder {
font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif;
color: #ffffff;
opacity: 0.6;
}
.mx_StatusLogin .mx_Login_field_disabled {
opacity: 0.3;
}
.mx_StatusLogin .mx_Login_prompt {
font-size: 16px;
}
.mx_StatusLogin .mx_Login_submit {
min-width: 200px;
width: auto;
margin-top: 13px;
margin-bottom: 10px;
}
.mx_StatusLogin .mx_Login_submit:disabled {
opacity: 0.3;
}
.mx_StatusLogin .mx_Login_create {
margin-top: 10px;
display: block;
text-align: center;
width: 100%;
font-size: 15px;
opacity: 1.0;
}
.mx_StatusLogin .mx_Login_create:link, .mx_StatusLogin .mx_Login_create:hover, .mx_StatusLogin .mx_Login_create:visited
{
color: #ffffff;
}
.mx_StatusLogin .mx_Login_forgot {
display: block;
font-size: 15px;
}
.mx_StatusLogin .mx_Login_forgot:link, .mx_StatusLogin .mx_Login_forgot:hover, .mx_StatusLogin .mx_Login_forgot:visited
{
color: #ffffff;
}
.mx_StatusLogin .mx_Login_error {
color: #F69E98;
font-size: 18px;
width: 300px;
height: 44px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: auto;
text-align: center;
margin-top: 12px;
margin-bottom: 16px;
}
.mx_StatusLogin .mx_Login_smallError {
font-size: 13px;
line-height: initial;
}
/*# sourceMappingURL=theme-status.css.map*/