ehealthsolutions/healthchat-web
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/healthchat-web.git synced 2026-11-04 09:49:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

move components' CSS to be in the same repo as their JS

Browse Source
This commit is contained in:
Matthew Hodgson
2018-04-12 00:23:35 +01:00
parent 70f3804227
commit 79d3cca6e9
113 changed files with 9623 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/avatars/_BaseAvatar.scss
+35
View File
@@ -0,0 +1,35 @@
/*
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: $avatar-initial-color;
text-align: center;
speak: none;
pointer-events: none;
font-weight: normal;
}
.mx_BaseAvatar_image {
border-radius: 40px;
vertical-align: top;
background-color: $avatar-bg-color;
}
res/css/views/avatars/_MemberPresenceAvatar.scss
+43
View File
@@ -0,0 +1,43 @@
/*
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_MemberPresenceAvatar {
display: inline-block;
position: relative;
}
.mx_MemberPresenceAvatar_status {
display: block;
width: 10px;
height: 10px;
border-radius: 10px;
position: absolute;
bottom: -2px;
right: -3px;
}
.mx_MemberPresenceAvatar_status_online {
background-color: $presence-online;
}
.mx_MemberPresenceAvatar_status_unavailable {
background-color: $presence-unavailable;
}
.mx_MemberPresenceAvatar_status_offline {
background-color: $presence-offline;
}
res/css/views/context_menus/_MessageContextMenu.scss
+25
View File
@@ -0,0 +1,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_MessageContextMenu_field {
padding: 3px 6px 3px 6px;
cursor: pointer;
white-space: nowrap;
}
.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet {
font-weight: bold;
}
res/css/views/context_menus/_PresenceContextMenuOption.scss
+42
View File
@@ -0,0 +1,42 @@
/*
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_PresenceContextMenuOption_indicator {
width: 10px;
height: 10px;
border-radius: 10px;
display: inline-block;
margin-right: 5px;
}
.mx_PresenceContextMenuOption_indicator.mx_PresenceContextMenuOption_indicator_online {
background-color: $presence-online;
}
.mx_PresenceContextMenuOption_indicator.mx_PresenceContextMenuOption_indicator_unavailable {
background-color: $presence-unavailable;
}
.mx_PresenceContextMenuOption_indicator.mx_PresenceContextMenuOption_indicator_offline {
background-color: $presence-offline;
}
.mx_PresenceContextMenuOption {
padding: 2px;
}
.mx_PresenceContextMenuOption.mx_PresenceContextMenuOption_current {
font-weight: 700;
}
res/css/views/context_menus/_RoomTileContextMenu.scss
+114
View File
@@ -0,0 +1,114 @@
/*
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: flex;
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: $menu-border-color;
}
.mx_RoomTileContextMenu_leave {
color: $warning-color;
}
.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: flex;
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;
}
res/css/views/context_menus/_TagTileContextMenu.scss
+44
View File
@@ -0,0 +1,44 @@
/*
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: flex;
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: $menu-border-color;
}
res/css/views/dialogs/_BugReportDialog.scss
+52
View File
@@ -0,0 +1,52 @@
/*
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: flex;
}
.mx_BugReportDialog_field_label {
flex-basis: 150px;
text-align: right;
padding-top: 9px;
padding-right: 4px;
line-height: 18px;
}
.mx_BugReportDialog_field_input {
flex-grow: 1;
/* taken from mx_ChatInviteDialog_inputContainer */
border-radius: 3px;
border: solid 1px $input-border-color;
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;
}
res/css/views/dialogs/_ChangelogDialog.scss
+24
View File
@@ -0,0 +1,24 @@
/*
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;
}
res/css/views/dialogs/_ChatCreateOrReuseChatDialog.scss
+41
View File
@@ -0,0 +1,41 @@
/*
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: flex;
}
.mx_ChatCreateOrReuseDialog_profile_name {
padding: 14px;
}
res/css/views/dialogs/_ChatInviteDialog.scss
+77
View File
@@ -0,0 +1,77 @@
/*
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_ChatInviteDialog {
/* XXX: padding-left is on mx_Dialog but padding-right has subsequently
* been added on other dialogs. Surely all our dialogs should have consistent
* right hand padding?
*/
padding-right: 58px;
}
/* Using a textarea for this element, to circumvent autofill */
.mx_ChatInviteDialog_input,
.mx_ChatInviteDialog_input:focus
{
height: 26px;
font-size: 14px;
font-family: $font-family;
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 $input-border-color;
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: $warning-color;
}
.mx_ChatInviteDialog_cancel {
position: absolute;
right: 11px;
top: 13px;
cursor: pointer;
}
.mx_ChatInviteDialog_cancel object {
pointer-events: none;
}
res/css/views/dialogs/_ConfirmUserActionDialog.scss
+53
View File
@@ -0,0 +1,53 @@
/*
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: $font-family;
font-size: 14px;
color: $primary-fg-color;
background-color: $primary-bg-color;
border-radius: 3px;
border: solid 1px $input-border-color;
line-height: 36px;
padding-left: 16px;
padding-right: 16px;
padding-top: 1px;
padding-bottom: 1px;
margin-bottom: 24px;
width: 90%;
}
res/css/views/dialogs/_CreateGroupDialog.scss
+62
View File
@@ -0,0 +1,62 @@
/*
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 $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
}
.mx_CreateGroupDialog_input_hasPrefixAndSuffix {
border-radius: 0px;
}
.mx_CreateGroupDialog_input_group {
display: flex;
}
.mx_CreateGroupDialog_prefix,
.mx_CreateGroupDialog_suffix {
height: 35px;
padding: 0px 5px;
line-height: 37px;
background-color: $input-border-color;
border: 1px solid $input-border-color;
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;
}
res/css/views/dialogs/_CreateRoomDialog.scss
+33
View File
@@ -0,0 +1,33 @@
/*
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 {
font-size: 15px;
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
}
res/css/views/dialogs/_DevtoolsDialog.scss
+166
View File
@@ -0,0 +1,166 @@
/*
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_RoomStateExplorer_button, .mx_DevTools_RoomStateExplorer_query {
margin-bottom: 10px;
}
.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
{
padding-bottom: 21px;
display: table-cell;
font-weight: bold;
padding-right: 24px;
}
.mx_DevTools_inputCell {
display: table-cell;
padding-bottom: 21px;
width: 240px;
}
.mx_DevTools_inputCell input
{
display: inline-block;
border: 0;
border-bottom: 1px solid $input-underline-color;
padding: 0;
width: 240px;
color: $input-fg-color;
font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
font-size: 16px;
}
.mx_DevTools_tgl {
display: none;
// add default box-sizing for this scope
&,
&:after,
&:before,
& *,
& *:after,
& *:before,
& + .mx_DevTools_tgl-btn {
box-sizing: border-box;
&::selection {
background: none;
}
}
+ .mx_DevTools_tgl-btn {
outline: 0;
display: block;
width: 7em;
height: 2em;
position: relative;
cursor: pointer;
user-select: none;
&:after,
&:before {
position: relative;
display: block;
content: "";
width: 50%;
height: 100%;
}
&:after {
left: 0;
}
&:before {
display: none;
}
}
&: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;
perspective: 100px;
&:after,
&: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;
backface-visibility: hidden;
border-radius: 4px;
}
&:after {
content: attr(data-tg-on);
background: #02C66F;
transform: rotateY(-180deg);
}
&:before {
background: #FF3A19;
content: attr(data-tg-off);
}
&:active:before {
transform: rotateY(-20deg);
}
}
&:checked + .mx_DevTools_tgl-btn {
&:before {
transform: rotateY(180deg);
}
&:after {
transform: rotateY(0);
left: 0;
background: #7FC6A6;
}
&:active:after {
transform: rotateY(20deg);
}
}
}
res/css/views/dialogs/_EncryptedEventDialog.scss
+27
View File
@@ -0,0 +1,27 @@
/*
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 {
@mixin mx_DialogButton;
background-color: $primary-bg-color;
color: $accent-color;
}
res/css/views/dialogs/_GroupAddressPicker.scss
+25
View File
@@ -0,0 +1,25 @@
/*
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: flex;
}
.mx_GroupAddressPicker_checkboxContainer input[type="checkbox"] {
/* Stop flex from shrinking the checkbox */
width: 20px;
}
res/css/views/dialogs/_QuestionDialog.scss
+18
View File
@@ -0,0 +1,18 @@
/*
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_QuestionDialog {
padding-right: 58px;
}
res/css/views/dialogs/_SetEmailDialog.scss
+36
View File
@@ -0,0 +1,36 @@
/*
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 $input-border-color;
padding: 9px;
color: $input-fg-color;
background-color: $primary-bg-color;
font-size: 15px;
width: 100%;
max-width: 280px;
margin-bottom: 10px;
}
.mx_SetEmailDialog_email_input:focus {
outline: none;
box-shadow: none;
border: 1px solid $accent-color;
}
.mx_SetEmailDialog_email_input_placeholder {
}
res/css/views/dialogs/_SetMxIdDialog.scss
+50
View File
@@ -0,0 +1,50 @@
/*
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: flex;
}
.mx_SetMxIdDialog_input {
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
font-size: 15px;
width: 100%;
max-width: 280px;
}
.mx_SetMxIdDialog_input.error,
.mx_SetMxIdDialog_input.error:focus {
border: 1px solid $warning-color;
}
.mx_SetMxIdDialog_input_group .mx_Spinner {
height: 37px;
padding-left: 10px;
justify-content: flex-start;
}
.mx_SetMxIdDialog .success {
color: $accent-color;
}
res/css/views/dialogs/_SetPasswordDialog.scss
+35
View File
@@ -0,0 +1,35 @@
/*
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 $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
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;
}
res/css/views/dialogs/_UnknownDeviceDialog.scss
+54
View File
@@ -0,0 +1,54 @@
/*
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.
*/
// CSS voodoo to support a gemini-scrollbar for the contents of the dialog
.mx_Dialog_unknownDevice .mx_Dialog {
// ideally we'd shrink the height to fit when needed, but in practice this
// is a pain in the ass. plus might as well make the dialog big given how
// important it is.
height: 100%;
// position the gemini scrollbar nicely
padding-right: 58px;
}
.mx_UnknownDeviceDialog {
height: 100%;
display: flex;
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 {
@mixin mx_DialogButton_small;
background-color: $primary-bg-color;
color: $accent-color;
}
.mx_UnknownDeviceDialog .mx_UnknownDeviceDialog_deviceList li {
height: 40px;
border-bottom: 1px solid $primary-hairline-color;
}
res/css/views/directory/_NetworkDropdown.scss
+84
View File
@@ -0,0 +1,84 @@
/*
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 $strong-input-border-color;
font-weight: 300;
font-size: 13px;
user-select: none;
}
.mx_NetworkDropdown_arrow {
border-color: $primary-fg-color 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 $accent-color;
background-color: $primary-bg-color;
}
.mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover {
background-color: $focus-bg-color;
}
.mx_NetworkDropdown_menu_network {
font-weight: bold;
}
res/css/views/elements/_AccessibleButton.scss
+24
View File
@@ -0,0 +1,24 @@
/*
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;
filter: brightness($focus-brightness);
}
.mx_AccessibleButton {
cursor: pointer;
}
res/css/views/elements/_AddressSelector.scss
+45
View File
@@ -0,0 +1,45 @@
/*
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: $primary-bg-color;
width: 485px;
max-height: 116px;
overflow-y: auto;
border-radius: 3px;
background-color: $primary-bg-color;
border: solid 1px $accent-color;
cursor: pointer;
}
.mx_AddressSelector.mx_AddressSelector_empty {
display: none;
}
.mx_AddressSelector_addressListElement .mx_AddressTile {
background-color: $primary-bg-color;
border: solid 1px $primary-bg-color;
}
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
background-color: $selected-color;
}
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile {
background-color: $selected-color;
border: solid 1px $selected-color;
}
res/css/views/elements/_AddressTile.scss
+138
View File
@@ -0,0 +1,138 @@
/*
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 $input-border-color;
line-height: 26px;
color: $primary-fg-color;
font-size: 14px;
font-weight: normal;
margin-right: 4px;
}
.mx_AddressTile.mx_AddressTile_error {
background-color: rgba(255, 0, 100, 0.1);
color: $warning-color;
border-color: $warning-color;
}
.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;
}
res/css/views/elements/_DirectorySearchBox.scss
+70
View File
@@ -0,0 +1,70 @@
/*
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 $strong-input-border-color;
}
.mx_DirectorySearchBox_container {
display: flex;
padding-left: 9px;
padding-right: 9px;
}
.mx_DirectorySearchBox_input {
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: $plinth-bg-color;
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;
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;
}
res/css/views/elements/_Dropdown.scss
+131
View File
@@ -0,0 +1,131 @@
/*
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 $strong-input-border-color;
font-weight: 300;
font-size: 13px;
user-select: none;
}
.mx_Dropdown_input:focus {
border-color: $accent-color;
}
/* Disable dropdown highlight on focus */
.mx_Dropdown_input.mx_AccessibleButton:focus {
filter: none;
}
.mx_Dropdown_arrow {
border-color: $primary-fg-color 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;
// XXX: hack to prevent text box being too big and pushing
// its parent out / overlapping the dropdown arrow. Only really
// works in the Country dropdown.
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 $accent-color;
background-color: $primary-bg-color;
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: $focus-bg-color;
}
.mx_Dropdown_menu {
font-weight: bold;
}
.mx_Dropdown_searchPrompt {
font-weight: normal;
margin-left: 5px;
margin-bottom: 5px;
}
res/css/views/elements/_EditableItemList.scss
+62
View File
@@ -0,0 +1,62 @@
/*
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: flex;
margin-left: 56px;
}
.mx_EditableItem .mx_EditableItem_editable {
border: 0px;
border-bottom: 1px solid $strong-input-border-color;
padding: 0px;
min-width: 240px;
max-width: 400px;
margin-bottom: 16px;
}
.mx_EditableItem .mx_EditableItem_editable:focus {
border-bottom: 1px solid $accent-color;
outline: none;
box-shadow: none;
}
.mx_EditableItem .mx_EditableItem_editablePlaceholder {
color: $settings-grey-fg-color;
}
.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;
}
res/css/views/elements/_ImageView.scss
+134
View File
@@ -0,0 +1,134 @@
/*
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: flex;
width: 100%;
height: 100%;
align-items: center;
}
.mx_ImageView_lhs {
order: 1;
flex: 1 1 10%;
min-width: 60px;
// background-color: #080;
// height: 20px;
}
.mx_ImageView_content {
order: 2;
/* min-width hack needed for FF */
min-width: 0px;
height: 90%;
flex: 15 15 0;
display: flex;
align-items: 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 */
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: flex;
justify-content: center;
flex-direction: column;
padding-left: 30px;
padding-right: 30px;
min-height: 100%;
max-width: 240px;
color: $lightbox-fg-color;
}
.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: $lightbox-bg-color;
font-size: 14px;
padding: 9px;
border: 1px solid $lightbox-border-color;
}
.mx_ImageView_size {
font-size: 11px;
}
.mx_ImageView_link {
color: $lightbox-fg-color ! 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 {
order: 3;
flex: 1 1 10%;
min-width: 300px;
// background-color: #800;
// height: 20px;
}
res/css/views/elements/_InlineSpinner.scss
+24
View File
@@ -0,0 +1,24 @@
/*
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;
}
res/css/views/elements/_MemberEventListSummary.scss
+71
View File
@@ -0,0 +1,71 @@
/*
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: 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: $accent-color;
cursor: pointer;
float: right;
margin-right: 10px;
margin-top: 8px;
}
.mx_MemberEventListSummary_line {
border-bottom: 1px solid $primary-hairline-color;
margin-left: 63px;
line-height: 30px;
}
.mx_MatrixChat_useCompactLayout {
.mx_MemberEventListSummary {
font-size: 13px;
.mx_EventTile_line {
line-height: 20px;
}
}
.mx_MemberEventListSummary_line {
line-height: 22px;
}
.mx_MemberEventListSummary_toggle {
margin-top: 3px;
}
.mx_TextualEvent.mx_MemberEventListSummary_summary {
font-size: 13px;
}
}
res/css/views/elements/_ProgressBar.scss
+25
View File
@@ -0,0 +1,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_ProgressBar {
height: 5px;
border: 1px solid $progressbar-color;
}
.mx_ProgressBar_fill {
height: 100%;
background-color: $progressbar-color;
}
res/css/views/elements/_Quote.scss
+26
View File
@@ -0,0 +1,26 @@
/*
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_Quote .mx_DateSeparator {
font-size: 1em !important;
margin-bottom: 0;
padding-bottom: 1px;
bottom: -5px;
}
.mx_Quote_show {
cursor: pointer;
}
res/css/views/elements/_RichText.scss
+75
View File
@@ -0,0 +1,75 @@
// XXX: bleurgh, what is this? These classes totally break the component
// naming scheme; it's completely unclear where or how they're being used
// --Matthew
.mx_UserPill,
.mx_RoomPill,
.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 {
cursor: pointer;
}
/* More specific to override `.markdown-body a` color */
.mx_EventTile_content .markdown-body a.mx_UserPill,
.mx_UserPill {
color: $primary-fg-color;
background-color: $other-user-pill-bg-color;
padding-right: 5px;
}
.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
.mx_EventTile_content .mx_AtRoomPill,
.mx_MessageComposer_input .mx_AtRoomPill {
color: $accent-fg-color;
background-color: $mention-user-pill-bg-color;
padding-right: 5px;
}
/* More specific to override `.markdown-body a` color */
.mx_EventTile_content .markdown-body a.mx_RoomPill,
.mx_RoomPill {
color: $accent-fg-color;
background-color: $rte-room-pill-color;
padding-right: 5px;
}
.mx_UserPill .mx_BaseAvatar,
.mx_RoomPill .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: $rte-code-bg-color;
border-radius: 3px;
}
.mx_Markdown_HR {
display: block;
background: $rte-bg-color;
}
.mx_Markdown_STRIKETHROUGH {
text-decoration: line-through;
}
res/css/views/elements/_RoleButton.scss
+33
View File
@@ -0,0 +1,33 @@
/*
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;
}
res/css/views/elements/_Spinner.scss
+28
View File
@@ -0,0 +1,28 @@
/*
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: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
flex: 1;
}
.mx_MatrixChat_middlePanel .mx_Spinner {
height: auto;
}
res/css/views/elements/_SyntaxHighlight.scss
+21
View File
@@ -0,0 +1,21 @@
/*
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: $light-fg-color !important;
}
res/css/views/elements/_ToolTipButton.scss
+51
View File
@@ -0,0 +1,51 @@
/*
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 $neutral-badge-color;
border-radius: 20px;
color: $neutral-badge-color;
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;
}
res/css/views/globals/_MatrixToolbar.scss
+62
View File
@@ -0,0 +1,62 @@
/*
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: $accent-color;
color: $accent-fg-color;
display: flex;
align-items: center;
}
.mx_MatrixToolbar_warning {
margin-left: 16px;
margin-right: 8px;
margin-top: -2px;
}
.mx_MatrixToolbar_content {
flex: 1;
}
.mx_MatrixToolbar_link
{
color: $accent-fg-color ! 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;
}
res/css/views/groups/_GroupPublicityToggle.scss
+42
View File
@@ -0,0 +1,42 @@
/*
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: flex;
align-items: center;
margin: 8px;
}
.mx_GroupPublicity_toggle > label {
display: flex;
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: flex;
align-items: flex-start;
cursor: pointer;
}
res/css/views/groups/_GroupRoomList.scss
+21
View File
@@ -0,0 +1,21 @@
/*
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: $primary-fg-color;
cursor: pointer;
}
res/css/views/groups/_GroupUserSettings.scss
+23
View File
@@ -0,0 +1,23 @@
/*
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 $primary-hairline-color;
border-radius: 3px;
margin-right: 32px;
overflow: hidden;
}
res/css/views/login/_InteractiveAuthEntryComponents.scss
+42
View File
@@ -0,0 +1,42 @@
/*
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 $strong-input-border-color;
border-radius: 3px;
width: 6em;
}
.mx_InteractiveAuthEntryComponents_msisdnEntry:focus {
border: 1px solid $accent-color;
}
.mx_InteractiveAuthEntryComponents_msisdnSubmit {
margin-top: 4px;
margin-bottom: 5px;
}
// XXX: This should be a common button class
.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
background-color: $light-fg-color;
cursor: default;
}
res/css/views/login/_ServerConfig.scss
+36
View File
@@ -0,0 +1,36 @@
/*
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: $primary-fg-color;
}
.mx_ServerConfig_selector {
text-align: center;
width: 302px; // for fr i18n
}
res/css/views/messages/_DateSeparator.scss
+25
View File
@@ -0,0 +1,25 @@
/*
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 $primary-hairline-color;
}
res/css/views/messages/_MEmoteBody.scss
+23
View File
@@ -0,0 +1,23 @@
/*
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;
}
res/css/views/messages/_MFileBody.scss
+47
View File
@@ -0,0 +1,47 @@
/*
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: $accent-color;
}
.mx_MFileBody_download a {
color: $accent-color;
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;
}
res/css/views/messages/_MImageBody.scss
+20
View File
@@ -0,0 +1,20 @@
/*
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;
}
res/css/views/messages/_MNoticeBody.scss
+20
View File
@@ -0,0 +1,20 @@
/*
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;
}
res/css/views/messages/_MStickerBody.scss
+46
View File
@@ -0,0 +1,46 @@
/*
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 {
display: block;
margin-right: 34px;
min-height: 110px;
padding: 20px 0;
}
.mx_MStickerBody_image_container {
display: inline-block;
position: relative;
}
.mx_MStickerBody_image {
max-width: 100%;
opacity: 0;
}
.mx_MStickerBody_image_visible {
opacity: 1;
}
.mx_MStickerBody_placeholder {
position: absolute;
opacity: 1;
}
.mx_MStickerBody_placeholder_invisible {
transition: 500ms;
opacity: 0;
}
res/css/views/messages/_MTextBody.scss
+24
View File
@@ -0,0 +1,24 @@
/*
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;
}
.mx_MTextBody pre{
overflow-y: auto;
max-height: 30vh;
}
res/css/views/messages/_MessageTimestamp.scss
+18
View File
@@ -0,0 +1,18 @@
/*
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 {
}
res/css/views/messages/_RoomAvatarEvent.scss
+26
View File
@@ -0,0 +1,26 @@
/*
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;
}
res/css/views/messages/_SenderProfile.scss
+15
View File
@@ -0,0 +1,15 @@
/*
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.
*/
res/css/views/messages/_TextualEvent.scss
+20
View File
@@ -0,0 +1,20 @@
/*
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;
}
res/css/views/messages/_UnknownBody.scss
+16
View File
@@ -0,0 +1,16 @@
/*
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;
}
res/css/views/rooms/_AppsDrawer.scss
+271
View File
@@ -0,0 +1,271 @@
/*
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: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.mx_AddWidget_button {
order: 2;
cursor: pointer;
padding-right: 12px;
padding: 0;
margin: 5px auto 5px auto;
color: $accent-color;
font-size: 12px;
}
.mx_AddWidget_button_full_width {
max-width: 960px;
}
.mx_SetAppURLDialog_input {
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-hairline-color;
background-color: $primary-bg-color;
font-size: 15px;
}
.mx_AppTile {
max-width: 960px;
width: 50%;
margin-right: 5px;
border: 1px solid $primary-hairline-color;
border-radius: 2px;
background-color: $dialog-background-bg-color;
}
.mx_AppTile:last-child {
margin-right: 1px;
}
.mx_AppTileFullWidth {
max-width: 960px;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 1px solid $primary-hairline-color;
border-radius: 2px;
}
.mx_AppTileMenuBar {
margin: 0;
padding: 2px 10px;
border-bottom: 1px solid $primary-hairline-color;
font-size: 10px;
background-color: $widget-menu-bar-bg-color;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.mx_AppTileMenuBarTitle {
display: flex;
flex-direction: row;
align-items: center;
pointer-events: none;
}
.mx_AppTileMenuBarWidgets {
float: right;
display: flex;
flex-direction: row;
align-items: center;
}
.mx_AppTileMenuBarWidget {
cursor: pointer;
width: 10px;
height: 10px;
padding: 1px;
transition-duration: 500ms;
border: 1px solid transparent;
}
.mx_AppTileMenuBarWidgetDelete {
filter: none;
}
.mx_AppTileMenuBarWidget:hover {
border: 1px solid $primary-fg-color;
border-radius: 2px;
}
.mx_AppTileBody{
height: 280px;
width: 100%;
overflow: hidden;
}
.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: $lightbox-bg-color;
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: $accent-color;
border-color: $accent-color;
}
.mx_AppIconTile:hover {
border: 1px solid $accent-color;
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: flex;
justify-content: center;
align-items: center;
}
form.mx_Custom_Widget_Form div {
margin-top: 10px;
margin-bottom: 10px;
}
.mx_AppPermissionWarning {
text-align: center;
background-color: $primary-bg-color;
display: flex;
height: 100%;
flex-direction: column;
justify-content: 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: $primary-fg-color;
}
.mx_AppPermissionWarningTextLabel {
font-weight: bold;
display: block;
}
.mx_AppPermissionWarningTextURL {
color: $accent-color;
}
.mx_AppPermissionButton {
padding: 5px;
border-radius: 5px;
color: $warning-color;
background-color: $primary-bg-color;
}
.mx_AppPermissionButton:hover {
background-color: $primary-fg-color;
cursor: pointer;
}
.mx_AppLoading {
display: flex;
flex-direction: column;
justify-content: 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 iframe {
display: none;
}
res/css/views/rooms/_Autocomplete.scss
+93
View File
@@ -0,0 +1,93 @@
.mx_Autocomplete {
position: absolute;
bottom: 0;
z-index: 1001;
width: 100%;
border: 1px solid $primary-hairline-color;
background: $primary-bg-color;
border-bottom: none;
border-radius: 4px 4px 0 0;
max-height: 50vh;
overflow: auto
}
.mx_Autocomplete_ProviderSection {
border-bottom: 1px solid $primary-hairline-color;
}
.mx_Autocomplete_Completion_container_pill {
margin: 12px;
display: flex;
}
/* a "block" completion takes up a whole line */
.mx_Autocomplete_Completion_block {
height: 34px;
display: flex;
padding: 0 12px;
user-select: none;
cursor: pointer;
align-items: center;
color: $primary-fg-color;
}
.mx_Autocomplete_Completion_block * {
margin: 0 3px;
}
.mx_Autocomplete_Completion_pill {
border-radius: 17px;
height: 34px;
padding: 0px 5px;
display: flex;
user-select: none;
cursor: pointer;
align-items: center;
color: $primary-fg-color;
}
.mx_Autocomplete_Completion_pill > * {
margin: 0 3px;
}
.mx_Autocomplete_Completion_container_truncate {
.mx_Autocomplete_Completion_title,
.mx_Autocomplete_Completion_subtitle,
.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: flex;
flex-flow: wrap;
}
.mx_Autocomplete_Completion.selected {
background: $menu-bg-color;
outline: none;
}
.mx_Autocomplete_provider_name {
margin: 12px;
color: $primary-fg-color;
font-weight: 400;
opacity: 0.4;
}
/* styling for common completion elements */
.mx_Autocomplete_Completion_subtitle {
font-style: italic;
flex: 1;
}
.mx_Autocomplete_Completion_description {
color: gray;
}
res/css/views/rooms/_EntityTile.scss
+114
View File
@@ -0,0 +1,114 @@
/*
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: $primary-fg-color;
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: $primary-fg-color;
}
.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
font-style: italic;
color: $primary-fg-color;
}
.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;
}
res/css/views/rooms/_EventTile.scss
+530
View File
@@ -0,0 +1,530 @@
/*
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;
z-index: 2;
}
.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
top: 8px;
left: 65px;
}
.mx_EventTile_continuation {
padding-top: 0px ! important;
}
.mx_EventTile .mx_SenderProfile {
color: $primary-fg-color;
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: $event-timestamp-color;
font-size: 10px;
left: 0px;
width: 46px; /* 8 + 30 (avatar) + 8 */
text-align: center;
position: absolute;
}
.mx_EventTile_line {
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_quote {
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: $accent-color 5px solid;
padding-left: 60px;
background-color: $event-selected-color;
}
.mx_EventTile:hover .mx_EventTile_line:not(.mx_EventTile_quote),
.mx_EventTile.menu .mx_EventTile_line
{
background-color: $event-selected-color;
}
.mx_EventTile_searchHighlight {
background-color: $accent-color;
color: $accent-fg-color;
border-radius: 5px;
padding-left: 2px;
padding-right: 2px;
cursor: pointer;
}
.mx_EventTile_searchHighlight a {
background-color: $accent-color;
color: $accent-fg-color;
}
.mx_EventTile_encrypting {
color: $event-encrypting-color ! important;
}
.mx_EventTile_sending {
color: $event-sending-color;
}
.mx_EventTile_sending .mx_UserPill,
.mx_EventTile_sending .mx_RoomPill,
.mx_EventTile_sending .mx_emojione {
opacity: 0.5;
}
.mx_EventTile_notSent {
color: $event-notsent-color;
}
.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody {
display: block;
width: 100%;
height: 22px;
width: 250px;
border-radius: 11px;
background: repeating-linear-gradient(
-45deg,
$event-redacted-fg-color,
$event-redacted-fg-color 3px,
transparent 3px,
transparent 6px
);
box-shadow: 0px 0px 3px $event-redacted-border-color inset;
}
.mx_EventTile_highlight,
.mx_EventTile_highlight .markdown-body
{
color: $warning-color;
}
.mx_EventTile_contextual {
opacity: 0.4;
}
.mx_EventTile_msgOption {
float: right;
text-align: right;
z-index: 1;
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 .mx_MessageTimestamp,
.mx_EventTile:hover .mx_MessageTimestamp,
.mx_EventTile.menu .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($edit-button-url);
-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.menu .mx_MessageTimestamp {
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: $event-timestamp-color;
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;
z-index: 2;
cursor: pointer;
}
.mx_EventTile_keyRequestInfo {
font-size: 12px;
}
.mx_EventTile_keyRequestInfo_text {
opacity: 0.5;
}
.mx_EventTile_keyRequestInfo_text a {
color: $primary-fg-color;
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: $e2e-verified-color 5px solid;
}
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
border-left: $e2e-unverified-color 5px solid;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
.mx_EventTile:hover.mx_EventTile_unverified .mx_MessageTimestamp {
left: 3px;
width: auto;
}
/*
.mx_EventTile_verified .mx_EventTile_e2eIcon {
display: none;
}
*/
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_e2eIcon,
.mx_EventTile:hover.mx_EventTile_unverified .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; // inherit the colour from the dark or light theme by default (but not for code blocks)
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;
}
.mx_EventTile_content .markdown-body code {
// deliberate constants as we're behind an invert filter
background-color: #f8f8f8;
color: #333;
}
.mx_EventTile_copyButton {
position: absolute;
display: inline-block;
visibility: hidden;
cursor: pointer;
top: 6px;
right: 6px;
width: 19px;
height: 19px;
background-image: url($copy-button-url);
}
.mx_EventTile_body pre {
position: relative;
border: 1px solid transparent;
}
.mx_EventTile:hover .mx_EventTile_body pre
{
border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
}
.mx_EventTile_body pre: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;
}
.mx_EventTile_content .markdown-body a {
color: $accent-color;
}
.mx_EventTile_content .markdown-body .hljs {
display: inline ! important;
}
/* end of overrides */
.mx_MatrixChat_useCompactLayout {
.mx_EventTile {
padding-top: 4px;
}
.mx_EventTile.mx_EventTile_info {
// same as the padding for non-compact .mx_EventTile.mx_EventTile_info
padding-top: 0px;
font-size: 13px;
.mx_EventTile_line {
line-height: 20px;
}
.mx_EventTile_avatar {
top: 4px;
}
}
.mx_EventTile .mx_SenderProfile {
font-size: 13px;
}
.mx_EventTile.mx_EventTile_emote {
// add a bit more space for emotes so that avatars don't collide
padding-top: 8px;
.mx_EventTile_avatar {
top: 2px;
}
.mx_EventTile_line {
padding-top: 0px;
padding-bottom: 1px;
}
}
.mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
padding-top: 0;
.mx_EventTile_line {
padding-top: 0px;
padding-bottom: 0px;
}
}
.mx_EventTile_line {
padding-top: 0px;
padding-bottom: 0px;
}
.mx_EventTile_avatar {
top: 2px;
}
.mx_EventTile_e2eIcon {
top: 7px;
}
.mx_EventTile_editButton {
top: 3px;
}
.mx_EventTile_readAvatars {
top: 27px;
}
.mx_EventTile_continuation .mx_EventTile_readAvatars,
.mx_EventTile_emote .mx_EventTile_readAvatars {
top: 5px;
}
.mx_EventTile_info .mx_EventTile_readAvatars {
top: 4px;
}
.mx_RoomView_MessageList h2 {
margin-top: 6px;
}
.mx_EventTile_content .markdown-body {
p, ul, ol, dl, blockquote, pre, table {
margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
}
}
}
res/css/views/rooms/_LinkPreviewWidget.scss
+69
View File
@@ -0,0 +1,69 @@
/*
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: flex;
border-left: 4px solid $preview-widget-bar-color;
color: $preview-widget-fg-color;
}
.mx_LinkPreviewWidget_image {
flex: 0 0 100px;
margin-left: 15px;
text-align: center;
cursor: pointer;
}
.mx_LinkPreviewWidget_caption {
margin-left: 15px;
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;
flex: 0 0 40px;
}
.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel {
visibility: visible;
}
.mx_MatrixChat_useCompactLayout {
.mx_LinkPreviewWidget {
margin-top: 6px;
margin-bottom: 6px;
}
}
res/css/views/rooms/_MemberDeviceInfo.scss
+74
View File
@@ -0,0 +1,74 @@
/*
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: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.mx_MemberDeviceInfo_textButton {
@mixin mx_DialogButton_small;
margin: 2px;
flex: 1;
}
.mx_MemberDeviceInfo_textButton:hover {
@mixin mx_DialogButton_hover;
}
.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: $e2e-verified-color;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
color: $e2e-unverified-color;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
color: $e2e-warning-color;
}
res/css/views/rooms/_MemberInfo.scss
+112
View File
@@ -0,0 +1,112 @@
/*
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: $h3-color;
font-weight: 600;
font-size: 13px;
margin-top: 16px;
margin-bottom: 14px;
}
.mx_MemberInfo_profileField {
font-size: 13px;
position: relative;
background-color: $primary-bg-color;
}
.mx_MemberInfo_buttons {
margin-bottom: 16px;
}
.mx_MemberInfo_field {
cursor: pointer;
font-size: 13px;
color: $accent-color;
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;
}
res/css/views/rooms/_MemberList.scss
+116
View File
@@ -0,0 +1,116 @@
/*
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;
flex: 1;
display: flex;
flex-direction: column;
}
.mx_MemberList .mx_Spinner {
flex: 0 0 auto;
}
.mx_MemberList_chevron {
position: absolute;
right: 35px;
margin-top: -15px;
}
.mx_MemberList_border {
overflow-y: auto;
order: 1;
flex: 1 1 0px;
}
.mx_MemberList_query,
.mx_GroupMemberList_query,
.mx_GroupRoomList_query {
font-family: $font-family;
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
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: $primary-fg-color;
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: $primary-fg-color;
opacity: 0.5;
font-size: 14px;
}
.mx_MemberList_joined {
order: 2;
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: $h3-color;
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%;
}
.mx_MemberList_outerWrapper {
height: 0px;
}
res/css/views/rooms/_MessageComposer.scss
+246
View File
@@ -0,0 +1,246 @@
/*
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_MessageComposer_wrapper {
max-width: 960px;
vertical-align: middle;
margin: auto;
border-top: 1px solid $primary-hairline-color;
position: relative;
}
.mx_MessageComposer_autocomplete_wrapper {
position: relative;
height: 0;
}
.mx_MessageComposer_row {
display: flex;
flex-direction: row;
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: $greyed-fg-color;
display: flex;
align-items: center;
justify-content: center;
}
.mx_MessageComposer_input_wrapper {
flex: 1;
display: flex;
flex-direction: column;
}
.mx_MessageComposer_input {
flex: 1;
vertical-align: middle;
display: flex;
flex-direction: column;
min-height: 60px;
justify-content: center;
align-items: flex-start;
font-size: 14px;
margin-right: 6px;
}
@keyframes visualbell
{
from { background-color: #faa }
to { background-color: $primary-bg-color }
}
.mx_MessageComposer_input_error {
animation: 0.2s visualbell;
}
.mx_MessageComposer_input_empty .public-DraftEditorPlaceholder-root {
display: none;
}
.mx_MessageComposer_input .DraftEditor-root {
width: 100%;
flex: 1;
word-break: break-word;
max-height: 120px;
min-height: 21px;
overflow: auto;
}
.mx_MessageComposer_input .DraftEditor-root .DraftEditor-editorContainer {
/* Ensure mx_UserPill and mx_RoomPill (see _RichText) are not obscured from the top */
padding-top: 2px;
}
.mx_MessageComposer .public-DraftStyleDefault-block {
overflow-x: hidden;
}
.mx_MessageComposer_input blockquote {
color: $blockquote-fg-color;
margin: 0 0 16px;
padding: 0 15px;
border-left: 4px solid $blockquote-bar-color;
}
.mx_MessageComposer_input pre.public-DraftStyleDefault-pre pre {
background-color: $rte-code-bg-color;
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: $primary-fg-color;
background-color: $primary-bg-color;
font-size: 14px;
max-height: 120px;
overflow: auto;
/* needed for FF */
font-family: $font-family;
}
/* hack for FF as vertical alignment of custom placeholder text is broken */
.mx_MessageComposer_input textarea::-moz-placeholder {
line-height: 100%;
color: $accent-color;
opacity: 1.0;
}
.mx_MessageComposer_input textarea::-webkit-input-placeholder {
color: $accent-color;
}
.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: $menu-bg-color;
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
}
.mx_MessageComposer_formatbar {
margin: auto;
max-width: 960px;
display: flex;
height: 30px;
box-sizing: border-box;
padding-left: 62px;
flex-direction: row;
align-items: center;
font-size: 10px;
color: $greyed-fg-color;
}
.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_MessageComposer_noperm_error {
height: 50px;
}
}
res/css/views/rooms/_PinnedEventTile.scss
+67
View File
@@ -0,0 +1,67 @@
/*
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; // for the hover
}
.mx_PinnedEventTile:hover {
background-color: $event-selected-color;
}
.mx_PinnedEventTile .mx_PinnedEventTile_sender {
color: #868686;
font-size: 0.8em;
vertical-align: top;
display: block;
padding-bottom: 3px;
}
.mx_PinnedEventTile .mx_EventTile_content {
margin-left: 50px;
position: relative;
top: 0;
left: 0;
}
.mx_PinnedEventTile .mx_BaseAvatar {
float: left;
margin-right: 10px;
}
.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.8em;
}
res/css/views/rooms/_PinnedEventsPanel.scss
+37
View File
@@ -0,0 +1,37 @@
/*
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 $primary-hairline-color;
}
.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;
}
res/css/views/rooms/_PresenceLabel.scss
+20
View File
@@ -0,0 +1,20 @@
/*
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;
}
res/css/views/rooms/_QuotePreview.scss
+36
View File
@@ -0,0 +1,36 @@
.mx_QuotePreview {
position: absolute;
bottom: 0;
z-index: 1000;
width: 100%;
border: 1px solid $primary-hairline-color;
background: $primary-bg-color;
border-bottom: none;
border-radius: 4px 4px 0 0;
max-height: 50vh;
overflow: auto
}
.mx_QuotePreview_section {
border-bottom: 1px solid $primary-hairline-color;
}
.mx_QuotePreview_header {
margin: 12px;
color: $primary-fg-color;
font-weight: 400;
opacity: 0.4;
}
.mx_QuotePreview_title {
float: left;
}
.mx_QuotePreview_cancel {
float: right;
cursor: pointer;
}
.mx_QuotePreview_clear {
clear: both;
}
res/css/views/rooms/_RoomDropTarget.scss
+55
View File
@@ -0,0 +1,55 @@
/*
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: $secondary-accent-color;
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 $accent-color;
color: $primary-fg-color;
background-color: $droptarget-bg-color;
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;
}
res/css/views/rooms/_RoomHeader.scss
+245
View File
@@ -0,0 +1,245 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/* add 20px to the height of the header when editing */
.mx_RoomHeader_editing {
flex: 0 0 93px ! important;
}
.mx_RoomHeader_wrapper {
max-width: 960px;
margin: auto;
height: 70px;
align-items: center;
display: flex;
}
.mx_RoomHeader_leftRow {
margin-left: -2px;
order: 1;
flex: 1;
overflow: hidden;
}
.mx_RoomHeader_spinner {
height: 36px;
order: 2;
padding-left: 12px;
padding-right: 12px;
}
.mx_RoomHeader_textButton {
@mixin mx_DialogButton;
margin-right: 8px;
margin-top: -5px;
order: 2;
}
.mx_RoomHeader_textButton:hover {
@mixin mx_DialogButton_hover;
}
.mx_RoomHeader_textButton_danger {
background-color: $warning-color;
}
.mx_RoomHeader_cancelButton {
order: 2;
cursor: pointer;
padding-left: 12px;
padding-right: 12px;
}
.mx_RoomHeader_rightRow {
margin-top: 4px;
background-color: $primary-bg-color;
display: flex;
align-items: center;
order: 3;
}
.mx_RoomHeader_info {
display: table-cell;
width: 100%;
vertical-align: middle;
}
.mx_RoomHeader_simpleHeader {
line-height: 70px;
color: $primary-fg-color;
font-size: 22px;
font-weight: bold;
overflow: hidden;
margin-left: 63px;
text-overflow: ellipsis;
width: 100%;
}
.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton {
float: right;
}
.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon {
margin-left: 14px;
margin-right: 24px;
vertical-align: -4px;
}
.mx_RoomHeader_name {
vertical-align: middle;
width: 100%;
height: 31px;
overflow: hidden;
color: $primary-fg-color;
font-weight: bold;
font-size: 22px;
padding-left: 19px;
padding-right: 16px;
/* why isn't text-overflow working? */
text-overflow: ellipsis;
border-bottom: 1px solid transparent;
}
.mx_RoomHeader_nametext {
display: inline-block;
}
.mx_RoomHeader_settingsHint {
color: $settings-grey-fg-color ! important;
}
.mx_RoomHeader_searchStatus {
display: inline-block;
font-weight: normal;
opacity: 0.6;
}
.mx_RoomHeader_settingsButton object {
pointer-events: none;
}
.mx_RoomHeader_name,
.mx_RoomHeader_avatar,
.mx_RoomHeader_avatarPicker,
.mx_RoomHeader_avatarPicker_edit,
.mx_RoomHeader_avatarPicker_remove {
cursor: pointer;
}
.mx_RoomHeader_avatarPicker_remove {
position: absolute;
top: -11px;
right: -9px;
}
.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
color: $accent-color;
}
.mx_RoomHeader_placeholder {
color: $settings-grey-fg-color ! important;
}
.mx_RoomHeader_editable {
border-bottom: 1px solid $strong-input-border-color ! important;
min-width: 150px;
cursor: text;
}
.mx_RoomHeader_editable:focus {
border-bottom: 1px solid $accent-color ! important;
outline: none;
box-shadow: none;
}
.mx_RoomHeader_topic {
vertical-align: bottom;
float: left;
max-height: 38px;
color: $settings-grey-fg-color;
font-weight: 300;
font-size: 13px;
margin-left: 19px;
margin-right: 16px;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid transparent;
column-width: 960px;
}
.mx_RoomHeader_avatar {
display: table-cell;
width: 48px;
height: 50px;
vertical-align: middle;
}
.mx_RoomHeader_avatar .mx_BaseAvatar_image {
object-fit: cover;
}
.mx_RoomHeader_avatarPicker {
margin-top: 23px;
position: relative;
}
.mx_RoomHeader_avatarPicker_edit {
margin-left: 16px;
margin-top: 4px;
}
.mx_RoomHeader_avatarPicker_edit > label {
cursor: pointer;
}
.mx_RoomHeader_avatarPicker_edit > input {
display: none;
}
.mx_RoomHeader_button {
margin-left: 12px;
cursor: pointer;
}
.mx_RoomHeader_button object {
pointer-events: none;
}
.mx_RoomHeader_voipButton {
display: table-cell;
}
.mx_RoomHeader_voipButtons {
margin-top: 18px;
}
.mx_RoomHeader_pinnedButton {
position: relative;
}
.mx_RoomHeader_pinsIndicator {
position: absolute;
right: 0;
bottom: 4px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $pinned-color;
}
.mx_RoomHeader_pinsIndicatorUnread {
background-color: $pinned-unread-color;
}
res/css/views/rooms/_RoomList.scss
+67
View File
@@ -0,0 +1,67 @@
/*
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: $secondary-accent-color;
padding-left: 18px;
padding-right: 18px;
padding-top: 8px;
padding-bottom: 7px;
}
.mx_RoomList_emptySubListTip {
font-size: 13px;
padding: 5px;
border: 1px dashed $accent-color;
color: $primary-fg-color;
background-color: $droptarget-bg-color;
border-radius: 4px;
line-height: 16px;
}
.mx_RoomList_emptySubListTip .mx_RoleButton {
vertical-align: -2px;
}
.mx_RoomList_headerButtons {
position: absolute;
right: 60px;
}
res/css/views/rooms/_RoomPreviewBar.scss
+58
View File
@@ -0,0 +1,58 @@
/*
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: $event-selected-color;
align-items: center;
flex-direction: column;
justify-content: center;
display: flex;
background-color: $preview-bar-bg-color;
-webkit-align-items: center;
}
.mx_RoomPreviewBar_wrapper {
}
.mx_RoomPreviewBar_invite_text {
color: $primary-fg-color;
}
.mx_RoomPreviewBar_join_text {
color: $warning-color;
}
.mx_RoomPreviewBar_preview_text {
margin-top: 25px;
color: $settings-grey-fg-color;
}
.mx_RoomPreviewBar_join_text a {
text-decoration: underline;
cursor: pointer;
}
.mx_RoomPreviewBar_warning {
display: flex;
align-items: center;
padding: 8px;
}
.mx_RoomPreviewBar_warningIcon {
padding: 12px;
}
res/css/views/rooms/_RoomSettings.scss
+247
View File
@@ -0,0 +1,247 @@
/*
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_leaveButton,
.mx_RoomSettings_unbanButton {
@mixin mx_DialogButton;
position: relative;
margin-right: 8px;
}
.mx_RoomSettings_leaveButton:hover,
.mx_RoomSettings_unbanButton:hover {
@mixin mx_DialogButton_hover;
}
.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: $accent-color;
color: $accent-fg-color;
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: $h3-color;
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: $warning-color;
font-weight: bold;
margin-top: 8px;
margin-bottom: 8px;
}
.mx_RoomSettings_editable {
border: 0px;
border-bottom: 1px solid $strong-input-border-color;
padding: 0px;
min-width: 240px;
}
.mx_RoomSettings_editable:focus {
border-bottom: 1px solid $accent-color;
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: $settings-grey-fg-color;
}
.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: $accent-fg-color;
background-color: $accent-color;
width: auto;
margin: auto;
padding: 6px;
padding-left: 1em;
padding-right: 1em;
}
res/css/views/rooms/_RoomTile.scss
+190
View File
@@ -0,0 +1,190 @@
/*
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: $secondary-accent-color;
}
.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: $roomtile-name-color;
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 $warning-color;
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: $accent-fg-color;
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: $neutral-badge-color;
}
.mx_RoomTile_unreadNotify .mx_RoomTile_badge {
background-color: $accent-color;
}
.mx_RoomTile_highlight .mx_RoomTile_badge {
background-color: $warning-color;
}
.mx_RoomTile_unread, .mx_RoomTile_highlight {
font-weight: 800;
}
.mx_RoomTile_selected {
background-color: $roomtile-selected-bg-color;
}
.mx_DNDRoomTile {
transform: none;
transition: transform 0.2s;
}
.mx_DNDRoomTile_dragging {
transform: scale(1.05, 1.05);
}
.mx_RoomTile:focus {
filter: none ! important;
background-color: $roomtile-focused-bg-color;
}
.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: $roomtile-transparent-focused-color;
}
res/css/views/rooms/_RoomTooltip.scss
+54
View File
@@ -0,0 +1,54 @@
/*
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 $menu-border-color;
border-bottom: 8px solid transparent;
}
.mx_RoomTooltip_chevron:after {
content:'';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid $primary-bg-color;
border-bottom: 7px solid transparent;
position:absolute;
top: -7px;
left: 1px;
}
.mx_RoomTooltip {
display: none;
position: fixed;
border: 1px solid $menu-border-color;
border-radius: 5px;
background-color: $primary-bg-color;
z-index: 2000;
padding: 5px;
pointer-events: none;
line-height: 14px;
font-size: 13px;
color: $primary-fg-color;
max-width: 600px;
margin-right: 50px;
}
res/css/views/rooms/_SearchBar.scss
+83
View File
@@ -0,0 +1,83 @@
/*
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: flex;
align-items: center;
}
.mx_SearchBar_input {
display: inline block;
border-radius: 3px 0px 0px 3px;
border: 1px solid $input-border-color;
font-size: 15px;
padding: 9px;
padding-left: 11px;
width: auto;
flex: 1 1 0;
}
.mx_SearchBar_searchButton {
cursor: pointer;
margin-right: 10px;
width: 37px;
height: 37px;
border-radius: 0px 3px 3px 0px;
background-color: $accent-color;
}
@keyframes pulsate {
0% { opacity: 1.0; }
50% { opacity: 0.1; }
100% { opacity: 1.0; }
}
.mx_SearchBar_searching img {
animation: pulsate 0.5s ease-out;
animation-iteration-count: infinite;
}
.mx_SearchBar_button {
display: inline;
border: 0px;
border-radius: 36px;
font-weight: 400;
font-size: 15px;
color: $accent-fg-color;
background-color: $accent-color;
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: $primary-bg-color;
color: $accent-color;
border: $accent-color 1px solid;
}
.mx_SearchBar_cancel {
padding-left: 14px;
padding-right: 14px;
cursor: pointer;
}
res/css/views/rooms/_SearchableEntityList.scss
+77
View File
@@ -0,0 +1,77 @@
/*
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: flex;
flex-direction: column;
}
.mx_SearchableEntityList_query {
font-family: $font-family;
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
margin-left: 3px;
font-size: 15px;
margin-bottom: 8px;
width: 189px;
}
.mx_SearchableEntityList_query::-moz-placeholder {
color: $primary-fg-color;
opacity: 0.5;
font-size: 12px;
}
.mx_SearchableEntityList_query::-webkit-input-placeholder {
color: $primary-fg-color;
opacity: 0.5;
font-size: 12px;
}
.mx_SearchableEntityList_listWrapper {
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%;
flex: 0 0 auto;
}
.mx_SearchableEntityList hr {
height: 1px;
border: 0px;
color: $primary-fg-color;
background-color: $primary-fg-color;
margin-right: 15px;
margin-top: 11px;
margin-bottom: 11px;
}
res/css/views/rooms/_Stickers.scss
+35
View File
@@ -0,0 +1,35 @@
.mx_Stickers_content {
overflow: hidden;
}
.mx_Stickers_content_container {
overflow: hidden;
height: 300px;
}
.mx_Stickers_content .mx_AppTileFullWidth {
border: none;
}
.mx_Stickers_contentPlaceholder {
display: flex;
flex-grow: 1;
flex-direction: column;
align-items: 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;
}
res/css/views/rooms/_TopUnreadMessagesBar.scss
+53
View File
@@ -0,0 +1,53 @@
/*
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 $primary-hairline-color;
}
.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;
}
}
res/css/views/settings/_DevicesPanel.scss
+51
View File
@@ -0,0 +1,51 @@
/*
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;
}
res/css/views/settings/_IntegrationsManager.scss
+31
View File
@@ -0,0 +1,31 @@
/*
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%;
}
res/css/views/settings/_Notifications.scss
+70
View File
@@ -0,0 +1,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_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: $accent-color;
}
.mx_UserSettings_devicesTable td {
padding-left: 20px;
padding-right: 20px;
}
.mx_UserSettings_devicesTable_nodevices {
font-style: italic;
}
res/css/views/voip/_CallView.scss
+25
View File
@@ -0,0 +1,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_CallView_voice {
background-color: $accent-color;
color: $accent-fg-color;
cursor: pointer;
text-align: center;
padding: 6px;
font-weight: bold;
font-size: 13px;
}
res/css/views/voip/_IncomingCallbox.scss
+69
View File
@@ -0,0 +1,69 @@
/*
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: $primary-bg-color;
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: flex;
}
.mx_IncomingCallBox_buttons_cell {
vertical-align: middle;
padding: 6px;
flex: 1;
}
.mx_IncomingCallBox_buttons_decline,
.mx_IncomingCallBox_buttons_accept {
vertical-align: middle;
width: 80px;
height: 36px;
line-height: 36px;
border-radius: 36px;
color: $accent-fg-color;
margin: auto;
}
.mx_IncomingCallBox_buttons_decline {
background-color: $voip-decline-color;
}
.mx_IncomingCallBox_buttons_accept {
background-color: $voip-accept-color;
}
res/css/views/voip/_VideoView.scss
+49
View File
@@ -0,0 +1,49 @@
/*
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 {
transform: scale(-1, 1);
}