move components' CSS to be in the same repo as their JS
This commit is contained in:
Matthew Hodgson
@@ -0,0 +1,19 @@
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
/*
|
||||
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: 2000;
|
||||
}
|
||||
|
||||
.mx_ContextualMenu_background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1.0;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.mx_ContextualMenu {
|
||||
border: solid 1px $menu-border-color;
|
||||
border-radius: 4px;
|
||||
background-color: $menu-bg-color;
|
||||
color: $primary-fg-color;
|
||||
position: absolute;
|
||||
padding: 6px;
|
||||
font-size: 14px;
|
||||
z-index: 2001;
|
||||
}
|
||||
|
||||
.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 $menu-border-color;
|
||||
border-bottom: 8px solid transparent;
|
||||
}
|
||||
|
||||
.mx_ContextualMenu_chevron_right:after {
|
||||
content:'';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 7px solid transparent;
|
||||
border-left: 7px solid $menu-bg-color;
|
||||
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 $menu-border-color;
|
||||
border-bottom: 8px solid transparent;
|
||||
}
|
||||
|
||||
.mx_ContextualMenu_chevron_left:after{
|
||||
content:'';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 7px solid transparent;
|
||||
border-right: 7px solid $menu-bg-color;
|
||||
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 $menu-border-color;
|
||||
border-right: 8px solid transparent;
|
||||
}
|
||||
|
||||
.mx_ContextualMenu_chevron_top:after{
|
||||
content:'';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 7px solid transparent;
|
||||
border-bottom: 7px solid $menu-bg-color;
|
||||
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 $menu-border-color;
|
||||
border-right: 8px solid transparent;
|
||||
}
|
||||
|
||||
.mx_ContextualMenu_chevron_bottom:after{
|
||||
content:'';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 7px solid transparent;
|
||||
border-top: 7px solid $menu-bg-color;
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/*
|
||||
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: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_CreateRoom input,
|
||||
.mx_CreateRoom textarea {
|
||||
border-radius: 3px;
|
||||
border: 1px solid $strong-input-border-color;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
padding: 9px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.mx_CreateRoom_description {
|
||||
width: 330px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
/*
|
||||
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 {
|
||||
order: 2;
|
||||
|
||||
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_MImageBody_download {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
color: $event-timestamp-color;
|
||||
}
|
||||
|
||||
.mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink {
|
||||
flex: 1 1 auto;
|
||||
color: $light-fg-color;
|
||||
}
|
||||
|
||||
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
|
||||
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: flex;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.mx_FilePanel .mx_EventTile_senderDetailsLink {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mx_FilePanel .mx_EventTile .mx_SenderProfile {
|
||||
flex: 1 1 auto;
|
||||
line-height: initial;
|
||||
padding: 0px;
|
||||
font-size: 11px;
|
||||
opacity: 1.0;
|
||||
color: $event-timestamp-color;
|
||||
}
|
||||
|
||||
.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
|
||||
flex: 1 0 0;
|
||||
text-align: right;
|
||||
visibility: visible;
|
||||
position: initial;
|
||||
font-size: 11px;
|
||||
opacity: 1.0;
|
||||
color: $event-timestamp-color;
|
||||
}
|
||||
|
||||
/* 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: $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
|
||||
padding-left: 0px;
|
||||
}
|
||||
@@ -0,0 +1,349 @@
|
||||
/*
|
||||
Copyright 2017 Vector Creations Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_GroupView {
|
||||
max-width: 960px;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_GroupView_error {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mx_GroupView_header {
|
||||
max-width: 960px;
|
||||
min-height: 70px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.mx_GroupView_header_view {
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
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 {
|
||||
// prevents clicks from being swallowed by svg in 'object' tag
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_GroupView_editable {
|
||||
border-bottom: 1px solid $strong-input-border-color ! important;
|
||||
min-width: 150px;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.mx_GroupView_editable:focus {
|
||||
border-bottom: 1px solid $accent-color ! important;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable) {
|
||||
color: $accent-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_GroupView_avatarPicker {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_GroupView_avatarPicker_edit {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.mx_GroupView_avatarPicker .mx_Spinner {
|
||||
width: 48px;
|
||||
height: 48px ! important;
|
||||
}
|
||||
|
||||
.mx_GroupView_header_leftCol {
|
||||
flex: 1;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_GroupView_header_rightCol {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_GroupView_textButton {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mx_GroupView_header_groupid {
|
||||
font-weight: normal;
|
||||
font-size: initial;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.mx_GroupView_header_name {
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
height: 31px;
|
||||
overflow: hidden;
|
||||
color: $primary-fg-color;
|
||||
font-weight: bold;
|
||||
font-size: 22px;
|
||||
padding-left: 19px;
|
||||
padding-right: 16px;
|
||||
/* why isn't text-overflow working? */
|
||||
text-overflow: ellipsis;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.mx_GroupView_header_shortDesc {
|
||||
vertical-align: bottom;
|
||||
float: left;
|
||||
max-height: 42px;
|
||||
color: $settings-grey-fg-color;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
padding-left: 19px;
|
||||
margin-right: 16px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.mx_GroupView_avatarPicker_label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_GroupView_cancelButton {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.mx_GroupView_cancelButton img {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.mx_GroupView input[type='radio'] {
|
||||
margin: 10px 10px 0px 10px;
|
||||
}
|
||||
|
||||
.mx_GroupView_label_text {
|
||||
display: inline-block;
|
||||
max-width: 80%;
|
||||
vertical-align: 0.1em;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.mx_GroupView_body {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.mx_GroupView_rooms {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 200px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mx_GroupView h3 {
|
||||
text-transform: uppercase;
|
||||
color: $h3-color;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mx_GroupView_rooms_header .mx_AccessibleButton {
|
||||
padding-left: 14px;
|
||||
margin-bottom: 14px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.mx_GroupView_group {
|
||||
border-top: 1px solid $primary-hairline-color;
|
||||
}
|
||||
|
||||
.mx_GroupView_group_disabled {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_GroupView_rooms_header_addRow_button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mx_GroupView_rooms_header_addRow_button object {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_GroupView_rooms_header_addRow_label {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
line-height: 24px;
|
||||
padding-left: 28px;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_GroupView_rooms .mx_RoomDetailList {
|
||||
flex-grow: 1;
|
||||
border-top: 1px solid $primary-hairline-color;
|
||||
padding-top: 10px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.mx_GroupView .mx_RoomView_messageListWrapper {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.mx_GroupView_membershipSection {
|
||||
color: $greyed-fg-color;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mx_GroupView_membershipSubSection {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_GroupView_membershipSubSection .mx_Spinner {
|
||||
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;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mx_GroupView_memberSettings input {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.mx_GroupView_featuredThings {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.mx_GroupView_featuredThings_header {
|
||||
font-weight: bold;
|
||||
font-size: 120%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mx_GroupView_featuredThings_category {
|
||||
font-weight: bold;
|
||||
font-size: 110%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mx_GroupView_featuredThings_container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_GroupView_featuredThings_addButton,
|
||||
.mx_GroupView_featuredThing {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
|
||||
width: 100px;
|
||||
margin: 0px 20px;
|
||||
}
|
||||
|
||||
.mx_GroupView_featuredThing {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
right: 11px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.mx_GroupView_featuredThing .mx_BaseAvatar {
|
||||
/* To prevent misalignment with 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: $info-plinth-bg-color;
|
||||
color: $info-plinth-fg-color;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
.mx_GroupView_groupDesc_placeholder {
|
||||
padding: 100px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_GroupView_changeDelayWarning {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
/*
|
||||
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 {
|
||||
// margin-left: 63px;
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
/*
|
||||
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_LeftPanel {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_container {
|
||||
display: flex;
|
||||
/* LeftPanel 235px */
|
||||
flex: 0 0 235px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_container.mx_LeftPanel_container_hasTagPanel {
|
||||
/* TagPanel 60px + LeftPanel 235px */
|
||||
flex: 0 0 295px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_container_collapsed {
|
||||
/* Collapsed LeftPanel 60px */
|
||||
flex: 0 0 60px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_container_collapsed.mx_LeftPanel_container_hasTagPanel {
|
||||
/* TagPanel 60px + Collapsed LeftPanel 60px */
|
||||
flex: 0 0 120px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_hideButton {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 0px;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_callView {
|
||||
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_RoomList_scrollbar {
|
||||
order: 1;
|
||||
|
||||
flex: 1 1 0;
|
||||
|
||||
overflow-y: auto;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.mx_LeftPanel.collapsed .mx_BottomLeftMenu {
|
||||
flex: 0 0 160px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu {
|
||||
order: 3;
|
||||
|
||||
border-top: 1px solid $panel-divider-color;
|
||||
margin-left: 16px; /* gutter */
|
||||
margin-right: 16px; /* gutter */
|
||||
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 {
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel.collapsed .mx_BottomLeftMenu {
|
||||
flex: 0 0 160px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu_options {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
/*
|
||||
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;
|
||||
}
|
||||
|
||||
.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: $accent-color;
|
||||
color: $primary-bg-color;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
font-size: 15px;
|
||||
padding: 0 11px;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
/*
|
||||
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: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mx_MatrixToolbar {
|
||||
order: 1;
|
||||
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.mx_MatrixChat_toolbarShowing {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.mx_MatrixChat {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
|
||||
order: 2;
|
||||
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_MatrixChat .mx_LeftPanel {
|
||||
order: 1;
|
||||
|
||||
background-color: $secondary-accent-color;
|
||||
|
||||
flex: 0 0 235px;
|
||||
}
|
||||
|
||||
.mx_MatrixChat .mx_LeftPanel.collapsed {
|
||||
flex: 0 0 60px;
|
||||
}
|
||||
|
||||
.mx_MatrixChat .mx_MatrixChat_middlePanel {
|
||||
order: 2;
|
||||
|
||||
padding-left: 20px;
|
||||
padding-right: 22px;
|
||||
background-color: $primary-bg-color;
|
||||
|
||||
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: 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 {
|
||||
order: 3;
|
||||
|
||||
flex: 0 0 235px;
|
||||
}
|
||||
|
||||
.mx_MatrixChat .mx_RightPanel.collapsed {
|
||||
flex: 0 0 122px;
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
/*
|
||||
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: flex;
|
||||
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: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mx_MyGroups_headerCard {
|
||||
flex: 1 0 50%;
|
||||
margin-bottom: 30px;
|
||||
min-width: 400px;
|
||||
display: flex;
|
||||
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;
|
||||
|
||||
flex: 1 0 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_MyGroups_placeholder {
|
||||
background-color: $info-plinth-bg-color;
|
||||
color: $info-plinth-fg-color;
|
||||
line-height: 400px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mx_MyGroups_joinedGroups {
|
||||
border-top: 1px solid $primary-hairline-color;
|
||||
overflow-x: hidden;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-flow: wrap;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.mx_MyGroups_joinedGroups .mx_GroupTile {
|
||||
min-width: 300px;
|
||||
max-width: 33%;
|
||||
flex: 1 0 300px;
|
||||
height: 75px;
|
||||
margin: 10px 0px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_GroupTile_avatar {
|
||||
cursor: grab, -webkit-grab;
|
||||
}
|
||||
|
||||
.mx_GroupTile_profile {
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,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_NotificationPanel {
|
||||
order: 2;
|
||||
|
||||
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: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_NotificationPanel .mx_EventTile_avatar {
|
||||
top: 8px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
|
||||
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
|
||||
color: $primary-fg-color;
|
||||
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: $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.mx_NotificationPanel .mx_EventTile_content {
|
||||
margin-right: 0px;
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
/*
|
||||
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: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_RightPanel_header {
|
||||
order: 1;
|
||||
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
margin-right: 20px;
|
||||
|
||||
flex: 0 0 70px;
|
||||
}
|
||||
|
||||
/** Fixme - factor this out with the main header **/
|
||||
|
||||
.mx_RightPanel_headerButtonGroup {
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-color: $primary-bg-color;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton {
|
||||
cursor: pointer;
|
||||
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: $accent-color;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton_badge {
|
||||
font-size: 11px;
|
||||
color: $accent-color;
|
||||
font-weight: bold;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.mx_RightPanel_collapsebutton {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.mx_RightPanel .mx_MemberList,
|
||||
.mx_RightPanel .mx_MemberInfo,
|
||||
.mx_RightPanel .mx_GroupRoomList,
|
||||
.mx_RightPanel_blank {
|
||||
order: 2;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.mx_RightPanel .mx_RoomView_messagePanelSpinner {
|
||||
order: 2;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mx_RightPanel_footer {
|
||||
order: 3;
|
||||
|
||||
border-top: 1px solid $primary-hairline-color;
|
||||
margin-right: 20px;
|
||||
|
||||
flex: 0 0 60px;
|
||||
}
|
||||
|
||||
.mx_RightPanel_footer .mx_RightPanel_invite {
|
||||
font-size: 14px;
|
||||
color: $primary-fg-color;
|
||||
padding-top: 13px;
|
||||
padding-left: 5px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
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 {
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
|
||||
.mx_RightPanel_footer .mx_RightPanel_invite {
|
||||
line-height: 25px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
/*
|
||||
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: $primary-fg-color;
|
||||
word-break: break-word;
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory .mx_RoomHeader_simpleHeader {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_list {
|
||||
flex: 1;
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_list .mx_RoomView_messageListWrapper {
|
||||
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;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_table {
|
||||
font-size: 14px;
|
||||
color: $primary-fg-color;
|
||||
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: $plinth-bg-color;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_topic {
|
||||
cursor: initial;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_alias {
|
||||
font-size: 12px;
|
||||
color: $settings-grey-fg-color;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_roomMemberCount {
|
||||
text-align: right;
|
||||
width: 100px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_table tr {
|
||||
padding-bottom: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
/*
|
||||
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: $primary-fg-color;
|
||||
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) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.mx_RoomStatusBar_placeholderIndicator span:nth-child(2) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
.mx_RoomStatusBar_placeholderIndicator span:nth-child(3) {
|
||||
animation-delay: 0.9s;
|
||||
}
|
||||
|
||||
@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 $primary-bg-color;
|
||||
}
|
||||
|
||||
.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 $primary-bg-color;
|
||||
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: $warning-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_connectionLostBar {
|
||||
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: $warning-color;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_connectionLostBar_desc {
|
||||
color: $primary-fg-color;
|
||||
font-size: 13px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_resend_link {
|
||||
color: $primary-fg-color ! important;
|
||||
text-decoration: underline ! important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_typingBar {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
|
||||
color: $primary-fg-color;
|
||||
opacity: 0.5;
|
||||
overflow-y: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_isAlone {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
|
||||
color: $primary-fg-color;
|
||||
opacity: 0.5;
|
||||
overflow-y: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
.mx_RoomStatusBar {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_indicator {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_callBar {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_typingBar {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,244 @@
|
||||
/*
|
||||
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: $roomsublist-background;
|
||||
}
|
||||
|
||||
.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: $roomsublist-label-fg-color;
|
||||
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: $secondary-accent-color;
|
||||
}
|
||||
|
||||
.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: $accent-color;
|
||||
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: $accent-fg-color;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
padding-top: 1px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
background-color: $accent-color;
|
||||
}
|
||||
|
||||
/*
|
||||
.collapsed .mx_RoomSubList_badge {
|
||||
display: none;
|
||||
}
|
||||
*/
|
||||
|
||||
.mx_RoomSubList_badgeHighlight {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
|
||||
/* 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 $warning-color;
|
||||
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 $roomsublist-chevron-color;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_chevronUp {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 6px solid $roomsublist-chevron-color;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_chevronRight {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 5px solid transparent;
|
||||
border-left: 6px solid $roomsublist-chevron-color;
|
||||
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: $secondary-accent-color;
|
||||
}
|
||||
|
||||
.collapsed .mx_RoomSubList_ellipsis {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_line {
|
||||
display: inline-block;
|
||||
width: 159px;
|
||||
border-top: dotted 2px $accent-color;
|
||||
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: $accent-color;
|
||||
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 $accent-color;
|
||||
color: $accent-fg-color;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
padding-top: 1px;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
background-color: $primary-bg-color;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify {
|
||||
background-color: $accent-color;
|
||||
border: 0;
|
||||
padding-top: 3px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight {
|
||||
background-color: $warning-color;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,272 @@
|
||||
/*
|
||||
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: flex;
|
||||
width: 100%;
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_RoomView .mx_RoomHeader {
|
||||
order: 1;
|
||||
|
||||
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: $droptarget-bg-color;
|
||||
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 {
|
||||
order: 2;
|
||||
|
||||
min-width: 0px;
|
||||
max-width: 960px;
|
||||
width: 100%;
|
||||
margin: 0px auto;
|
||||
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.mx_RoomView_auxPanel_apps {
|
||||
max-width: 1920px ! important;
|
||||
}
|
||||
|
||||
|
||||
.mx_RoomView_body {
|
||||
order: 3;
|
||||
flex: 1 1 0;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_RoomView_body .mx_RoomView_topUnreadMessagesBar {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.mx_RoomView_body .mx_RoomView_messagePanel {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.mx_RoomView_body .mx_RoomView_messagePanelSpinner {
|
||||
order: 2;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mx_RoomView_body .mx_RoomView_statusArea {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.mx_RoomView_body .mx_MessageComposer {
|
||||
order: 4;
|
||||
}
|
||||
|
||||
.mx_RoomView_messagePanel {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mx_RoomView_messageListWrapper {
|
||||
max-width: 960px;
|
||||
margin: auto;
|
||||
|
||||
min-height: 100%;
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.mx_RoomView_empty {
|
||||
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 $accent-color;
|
||||
border-bottom: solid 1px $accent-color;
|
||||
margin-top: 0px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mx_RoomView_statusArea {
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
|
||||
max-height: 0px;
|
||||
background-color: $primary-bg-color;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
|
||||
-webkit-transition: all .2s ease-out;
|
||||
-moz-transition: all .2s ease-out;
|
||||
-ms-transition: all .2s ease-out;
|
||||
-o-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 $primary-hairline-color;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
|
||||
background-color: $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
|
||||
color: $accent-fg-color;
|
||||
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: $accent-color;
|
||||
color: $accent-fg-color;
|
||||
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%;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.mx_RoomView_ongoingConfCallNotification {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: $warning-color;
|
||||
color: $accent-fg-color;
|
||||
font-weight: bold;
|
||||
padding: 6px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_RoomView_ongoingConfCallNotification a {
|
||||
color: $accent-fg-color ! important;
|
||||
}
|
||||
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
.mx_RoomView_MessageList {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.mx_RoomView_statusAreaBox {
|
||||
min-height: 42px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/*
|
||||
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 $panel-divider-color;
|
||||
|
||||
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 {
|
||||
flex: 1 1 auto;
|
||||
width: 0px;
|
||||
font-family: $font-family;
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
/*
|
||||
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 {
|
||||
flex: 0 0 60px;
|
||||
background-color: $tertiary-accent-color;
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagPanel_clearButton {
|
||||
/* Constant height within flex mx_TagPanel */
|
||||
height: 70px;
|
||||
width: 60px;
|
||||
|
||||
flex: none;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
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 $panel-divider-color;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagPanel_scroller {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagPanel_tagTileContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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 $accent-color;
|
||||
background-color: $accent-color;
|
||||
border-radius: 60px;
|
||||
|
||||
/* In case this is a "initial" avatar */
|
||||
display: block;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
|
||||
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: $neutral-badge-color;
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
/*
|
||||
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: $accent-color;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.mx_UploadBar_uploadFilename {
|
||||
margin-top: 5px;
|
||||
margin-left: 65px;
|
||||
opacity: 0.5;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.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: $accent-color;
|
||||
}
|
||||
@@ -0,0 +1,253 @@
|
||||
/*
|
||||
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: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_UserSettings .mx_RoomHeader {
|
||||
order: 1;
|
||||
|
||||
flex: 0 0 70px;
|
||||
}
|
||||
|
||||
.mx_UserSettings_body {
|
||||
order: 2;
|
||||
|
||||
flex: 1 1 0;
|
||||
|
||||
margin-top: -20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mx_UserSettings h3 {
|
||||
clear: both;
|
||||
margin-left: 63px;
|
||||
text-transform: uppercase;
|
||||
color: $h3-color;
|
||||
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 {
|
||||
@mixin mx_DialogButton;
|
||||
display: inline;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mx_UserSettings_button:hover {
|
||||
@mixin mx_DialogButton_hover;
|
||||
}
|
||||
|
||||
.mx_UserSettings_button.danger {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
|
||||
.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: $warning-color;
|
||||
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 $input-underline-color;
|
||||
padding: 0px;
|
||||
width: 240px;
|
||||
color: $input-fg-color;
|
||||
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 {
|
||||
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: $accent-color;
|
||||
word-break: break-all;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
/*
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,284 @@
|
||||
/*
|
||||
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: flex;
|
||||
align-items: 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 $strong-input-border-color;
|
||||
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 {
|
||||
@mixin mx_DialogButton;
|
||||
width: 100%;
|
||||
margin-top: 35px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.mx_Login_submit:hover {
|
||||
@mixin mx_DialogButton_hover;
|
||||
}
|
||||
|
||||
.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: $primary-fg-color;
|
||||
}
|
||||
|
||||
.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: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_Login_prompt {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mx_Login_forgot {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.mx_Login_forgot:link {
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.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: $warning-color;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
/*
|
||||
height: 24px;
|
||||
*/
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mx_Login_type_container {
|
||||
display: flex;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.mx_Login_type_label {
|
||||
flex-grow: 1;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.mx_Login_type_dropdown {
|
||||
display: inline-block;
|
||||
min-width: 170px;
|
||||
align-self: flex-end;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.mx_Login_field_group {
|
||||
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;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.mx_Login_username {
|
||||
height: 16px;
|
||||
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:flex;
|
||||
}
|
||||
|
||||
.mx_Login_phoneCountry {
|
||||
margin-bottom: 14px;
|
||||
width: 150px;
|
||||
|
||||
/* To override mx_Login_field_prefix */
|
||||
text-align: left;
|
||||
padding: 0px;
|
||||
background-color: $primary-bg-color;
|
||||
}
|
||||
|
||||
.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: flex;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user