Merge remote-tracking branch 'origin/develop' into jaywink/elementPro
This commit is contained in:
commit
5aa24b97cd
145 changed files with 7274 additions and 2269 deletions
|
@ -170,7 +170,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
border: 1px solid rgba($primary-fg-color, .1);
|
||||
// these things should probably not be defined globally
|
||||
margin: 9px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.mx_textinput {
|
||||
|
|
|
@ -45,14 +45,13 @@
|
|||
@import "./views/auth/_InteractiveAuthEntryComponents.scss";
|
||||
@import "./views/auth/_LanguageSelector.scss";
|
||||
@import "./views/auth/_PassphraseField.scss";
|
||||
@import "./views/auth/_ServerConfig.scss";
|
||||
@import "./views/auth/_ServerTypeSelector.scss";
|
||||
@import "./views/auth/_Welcome.scss";
|
||||
@import "./views/avatars/_BaseAvatar.scss";
|
||||
@import "./views/avatars/_DecoratedRoomAvatar.scss";
|
||||
@import "./views/avatars/_MemberStatusMessageAvatar.scss";
|
||||
@import "./views/avatars/_PulsedAvatar.scss";
|
||||
@import "./views/avatars/_WidgetAvatar.scss";
|
||||
@import "./views/context_menus/_CallContextMenu.scss";
|
||||
@import "./views/context_menus/_IconizedContextMenu.scss";
|
||||
@import "./views/context_menus/_MessageContextMenu.scss";
|
||||
@import "./views/context_menus/_StatusMessageContextMenu.scss";
|
||||
|
@ -79,11 +78,13 @@
|
|||
@import "./views/dialogs/_MessageEditHistoryDialog.scss";
|
||||
@import "./views/dialogs/_ModalWidgetDialog.scss";
|
||||
@import "./views/dialogs/_NewSessionReviewDialog.scss";
|
||||
@import "./views/dialogs/_RegistrationEmailPromptDialog.scss";
|
||||
@import "./views/dialogs/_RoomSettingsDialog.scss";
|
||||
@import "./views/dialogs/_RoomSettingsDialogBridges.scss";
|
||||
@import "./views/dialogs/_RoomUpgradeDialog.scss";
|
||||
@import "./views/dialogs/_RoomUpgradeWarningDialog.scss";
|
||||
@import "./views/dialogs/_ServerOfflineDialog.scss";
|
||||
@import "./views/dialogs/_ServerPickerDialog.scss";
|
||||
@import "./views/dialogs/_SetEmailDialog.scss";
|
||||
@import "./views/dialogs/_SettingsDialog.scss";
|
||||
@import "./views/dialogs/_ShareDialog.scss";
|
||||
|
@ -125,6 +126,8 @@
|
|||
@import "./views/elements/_RichText.scss";
|
||||
@import "./views/elements/_RoleButton.scss";
|
||||
@import "./views/elements/_RoomAliasField.scss";
|
||||
@import "./views/elements/_SSOButtons.scss";
|
||||
@import "./views/elements/_ServerPicker.scss";
|
||||
@import "./views/elements/_Slider.scss";
|
||||
@import "./views/elements/_Spinner.scss";
|
||||
@import "./views/elements/_StyledCheckbox.scss";
|
||||
|
|
|
@ -18,7 +18,7 @@ limitations under the License.
|
|||
.mx_Login_submit {
|
||||
@mixin mx_DialogButton;
|
||||
width: 100%;
|
||||
margin-top: 35px;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
|
@ -33,12 +33,6 @@ limitations under the License.
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
.mx_AuthBody a.mx_Login_sso_link:link,
|
||||
.mx_AuthBody a.mx_Login_sso_link:hover,
|
||||
.mx_AuthBody a.mx_Login_sso_link:visited {
|
||||
color: $button-primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_Login_loader {
|
||||
display: inline;
|
||||
position: relative;
|
||||
|
@ -87,10 +81,13 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_Login_underlinedServerName {
|
||||
width: max-content;
|
||||
border-bottom: 1px dashed $accent-color;
|
||||
}
|
||||
|
||||
div.mx_AccessibleButton_kind_link.mx_Login_forgot {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
// style it as a link
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
|
|
|
@ -37,6 +37,10 @@ limitations under the License.
|
|||
color: $authpage-primary-color;
|
||||
}
|
||||
|
||||
h3.mx_AuthBody_centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:hover,
|
||||
a:visited {
|
||||
|
@ -96,12 +100,6 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_AuthBody_editServerDetails {
|
||||
padding-left: 1em;
|
||||
font-size: $font-12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.mx_AuthBody_fieldRow {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
|
@ -146,6 +144,14 @@ limitations under the License.
|
|||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
> a {
|
||||
font-weight: $font-semi-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SSOButtons + .mx_AuthBody_changeFlow {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.mx_AuthBody_spinner {
|
||||
|
|
|
@ -1,69 +0,0 @@
|
|||
/*
|
||||
Copyright 2019 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_ServerTypeSelector {
|
||||
display: flex;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.mx_ServerTypeSelector_type {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.mx_ServerTypeSelector_type:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mx_ServerTypeSelector_type:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mx_ServerTypeSelector_label {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
color: $authpage-primary-color;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.mx_ServerTypeSelector_type .mx_AccessibleButton {
|
||||
padding: 10px;
|
||||
border: 1px solid $input-border-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.mx_ServerTypeSelector_type.mx_ServerTypeSelector_type_selected .mx_AccessibleButton {
|
||||
border-color: $input-valid-border-color;
|
||||
}
|
||||
|
||||
.mx_ServerTypeSelector_logo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 18px;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
color: $authpage-primary-color;
|
||||
}
|
||||
|
||||
.mx_ServerTypeSelector_logo > div {
|
||||
display: flex;
|
||||
width: 70%;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.mx_ServerTypeSelector_description {
|
||||
font-size: $font-10px;
|
||||
}
|
23
res/css/views/context_menus/_CallContextMenu.scss
Normal file
23
res/css/views/context_menus/_CallContextMenu.scss
Normal file
|
@ -0,0 +1,23 @@
|
|||
/*
|
||||
Copyright 2020 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_CallContextMenu_item {
|
||||
width: 205px;
|
||||
height: 40px;
|
||||
padding-left: 16px;
|
||||
line-height: 40px;
|
||||
vertical-align: center;
|
||||
}
|
|
@ -1,6 +1,5 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
@ -15,21 +14,15 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_ServerConfig_help:link {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.mx_RegistrationEmailPromptDialog {
|
||||
width: 417px;
|
||||
|
||||
.mx_ServerConfig_error {
|
||||
display: block;
|
||||
color: $warning-color;
|
||||
}
|
||||
.mx_Dialog_content {
|
||||
margin-bottom: 24px;
|
||||
color: $tertiary-fg-color;
|
||||
}
|
||||
|
||||
.mx_ServerConfig_identityServer {
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
transition: transform 0.25s;
|
||||
|
||||
&.mx_ServerConfig_identityServer_shown {
|
||||
transform: scaleY(1);
|
||||
.mx_Dialog_primary {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
78
res/css/views/dialogs/_ServerPickerDialog.scss
Normal file
78
res/css/views/dialogs/_ServerPickerDialog.scss
Normal file
|
@ -0,0 +1,78 @@
|
|||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
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_ServerPickerDialog {
|
||||
width: 468px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.mx_Dialog_content {
|
||||
margin-bottom: 0;
|
||||
|
||||
> p {
|
||||
color: $secondary-fg-color;
|
||||
font-size: $font-14px;
|
||||
margin: 16px 0;
|
||||
|
||||
&:first-of-type {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin: 0 24px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
> h4 {
|
||||
font-size: $font-15px;
|
||||
font-weight: $font-semi-bold;
|
||||
color: $secondary-fg-color;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
> a {
|
||||
color: $accent-color;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ServerPickerDialog_otherHomeserverRadio {
|
||||
input[type="radio"] + div {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ServerPickerDialog_otherHomeserver {
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-radius: unset;
|
||||
|
||||
> input {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
> label {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_primary {
|
||||
width: calc(100% - 64px);
|
||||
margin: 0 8px;
|
||||
padding: 15px 18px;
|
||||
}
|
||||
}
|
49
res/css/views/elements/_SSOButtons.scss
Normal file
49
res/css/views/elements/_SSOButtons.scss
Normal file
|
@ -0,0 +1,49 @@
|
|||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
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_SSOButtons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.mx_SSOButton {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
|
||||
> img {
|
||||
object-fit: contain;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SSOButton_mini {
|
||||
box-sizing: border-box;
|
||||
width: 50px; // 48px + 1px border on all sides
|
||||
height: 50px; // 48px + 1px border on all sides
|
||||
|
||||
> img {
|
||||
left: 12px;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
& + .mx_SSOButton_mini {
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
88
res/css/views/elements/_ServerPicker.scss
Normal file
88
res/css/views/elements/_ServerPicker.scss
Normal file
|
@ -0,0 +1,88 @@
|
|||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
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_ServerPicker {
|
||||
margin-bottom: 14px;
|
||||
border-bottom: 1px solid rgba(141, 151, 165, 0.2);
|
||||
display: grid;
|
||||
grid-template-columns: auto min-content;
|
||||
grid-template-rows: auto auto auto;
|
||||
font-size: $font-14px;
|
||||
line-height: $font-20px;
|
||||
|
||||
> h3 {
|
||||
font-weight: $font-semi-bold;
|
||||
margin: 0 0 20px;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.mx_ServerPicker_help {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: $icon-button-color;
|
||||
border-radius: 10px;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
margin-left: auto;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url('$(res)/img/element-icons/i.svg');
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ServerPicker_server {
|
||||
color: $primary-fg-color;
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mx_ServerPicker_change {
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.mx_ServerPicker_desc {
|
||||
margin-top: -12px;
|
||||
color: $tertiary-fg-color;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 3;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ServerPicker_helpDialog {
|
||||
.mx_Dialog_content {
|
||||
width: 456px;
|
||||
}
|
||||
}
|
|
@ -46,6 +46,11 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_GroupMemberList_query,
|
||||
.mx_GroupRoomList_query {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.mx_MemberList_chevron {
|
||||
position: absolute;
|
||||
right: 35px;
|
||||
|
@ -59,10 +64,8 @@ limitations under the License.
|
|||
flex: 1 1 0px;
|
||||
}
|
||||
|
||||
.mx_MemberList_query,
|
||||
.mx_GroupMemberList_query,
|
||||
.mx_GroupRoomList_query {
|
||||
flex: 1 1 0;
|
||||
.mx_MemberList_query {
|
||||
height: 16px;
|
||||
|
||||
// stricter rule to override the one in _common.scss
|
||||
&[type="text"] {
|
||||
|
@ -70,10 +73,6 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_MemberList_query {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.mx_MemberList_wrapper {
|
||||
padding: 10px;
|
||||
}
|
||||
|
@ -113,10 +112,10 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_MemberList_inviteCommunity span {
|
||||
background-image: url('$(res)/img/icon-invite-people.svg');
|
||||
.mx_MemberList_inviteCommunity span::before {
|
||||
mask-image: url('$(res)/img/icon-invite-people.svg');
|
||||
}
|
||||
|
||||
.mx_MemberList_addRoomToCommunity span {
|
||||
background-image: url('$(res)/img/icons-room-add.svg');
|
||||
.mx_MemberList_addRoomToCommunity span::before {
|
||||
mask-image: url('$(res)/img/icons-room-add.svg');
|
||||
}
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
iframe {
|
||||
// Sticker picker depends on the fixed height previously used for all tiles
|
||||
height: 273px;
|
||||
height: 283px; // height of the popout minus the AppTile menu bar
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -16,8 +16,8 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_CallView {
|
||||
border-radius: 10px;
|
||||
background-color: $input-lighter-bg-color;
|
||||
border-radius: 8px;
|
||||
background-color: $voipcall-plinth-color;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
// XXX: CallContainer sets pointer-events: none - should probably be set back in a better place
|
||||
|
@ -26,6 +26,7 @@ limitations under the License.
|
|||
|
||||
.mx_CallView_large {
|
||||
padding-bottom: 10px;
|
||||
margin: 5px 5px 5px 18px;
|
||||
|
||||
.mx_CallView_voice {
|
||||
height: 360px;
|
||||
|
@ -38,20 +39,176 @@ limitations under the License.
|
|||
.mx_CallView_voice {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.mx_CallView_callControls {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.mx_CallView_callControls_button {
|
||||
&::before {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallView_voice_holdText {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallView_voice {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $inverted-bg-color;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_CallView_voice_avatarsContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
div {
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallView_voice_hold {
|
||||
// This masks the avatar image so when it's blurred, the edge is still crisp
|
||||
.mx_CallView_voice_avatarContainer {
|
||||
border-radius: 2000px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
background-image: url('$(res)/img/voip/paused.svg');
|
||||
background-position: center;
|
||||
background-size: 40px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.mx_CallView_pip &::after {
|
||||
background-size: 30px;
|
||||
}
|
||||
}
|
||||
.mx_BaseAvatar {
|
||||
filter: blur(20px);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallView_voice_secondaryAvatarContainer {
|
||||
border-radius: 2000px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
background-image: url('$(res)/img/voip/paused.svg');
|
||||
background-position: center;
|
||||
background-size: 40px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.mx_CallView_pip &::after {
|
||||
background-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallView_voice_holdText {
|
||||
height: 20px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 15px;
|
||||
color: $accent-fg-color;
|
||||
.mx_AccessibleButton_hasKind {
|
||||
padding: 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallView_video {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 30;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_CallView_video_hold {
|
||||
overflow: hidden;
|
||||
|
||||
// we keep these around in the DOM: it saved wiring them up again when the call
|
||||
// is resumed and keeps the container the right size
|
||||
.mx_VideoFeed {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallView_video_holdBackground {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(20px);
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallView_video_holdContent {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-weight: bold;
|
||||
color: $accent-fg-color;
|
||||
text-align: center;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
content: '';
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url('$(res)/img/voip/paused.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.mx_CallView_pip &::before {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.mx_AccessibleButton_hasKind {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallView_header {
|
||||
|
@ -60,17 +217,22 @@ limitations under the License.
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
|
||||
.mx_BaseAvatar {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallView_header_callType {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_CallView_header_secondaryCallInfo {
|
||||
&::before {
|
||||
content: '·';
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallView_header_controls {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
@ -105,16 +267,31 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_CallView_header_callInfo {
|
||||
margin-left: 12px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.mx_CallView_header_roomName {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
line-height: initial;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.mx_CallView_secondaryCall_roomName {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.mx_CallView_header_callTypeSmall {
|
||||
font-size: 12px;
|
||||
color: $secondary-fg-color;
|
||||
line-height: initial;
|
||||
height: 15px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.mx_CallView_header_phoneIcon {
|
||||
|
@ -173,6 +350,12 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
// Makes the alignment correct
|
||||
.mx_CallView_callControls_nothing {
|
||||
margin-right: auto;
|
||||
cursor: initial;
|
||||
}
|
||||
|
||||
.mx_CallView_callControls_button_micOn {
|
||||
&::before {
|
||||
background-image: url('$(res)/img/voip/mic-on.svg');
|
||||
|
@ -203,6 +386,18 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_CallView_callControls_button_more {
|
||||
margin-left: auto;
|
||||
&::before {
|
||||
background-image: url('$(res)/img/voip/more.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallView_callControls_button_more_hidden {
|
||||
margin-left: auto;
|
||||
cursor: initial;
|
||||
}
|
||||
|
||||
.mx_CallView_callControls_button_invisible {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
|
|
3
res/img/element-icons/i.svg
Normal file
3
res/img/element-icons/i.svg
Normal file
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10C12.8284 10 13.5 9.32843 13.5 8.5C13.5 7.67157 12.8284 7 12 7C11.1716 7 10.5 7.67157 10.5 8.5C10.5 9.32843 11.1716 10 12 10ZM11 13C10.4477 13 10 12.5523 10 12C10 11.4477 10.4477 11 11 11H12C12.5523 11 13 11.4477 13 12V15.5H13.5C14.0523 15.5 14.5 15.9477 14.5 16.5C14.5 17.0523 14.0523 17.5 13.5 17.5H12C11.4477 17.5 11 17.0523 11 16.5L11 13Z" fill="black"/>
|
||||
</svg>
|
After Width: | Height: | Size: 516 B |
17
res/img/voip/more.svg
Normal file
17
res/img/voip/more.svg
Normal file
|
@ -0,0 +1,17 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d)">
|
||||
<circle cx="24" cy="20" r="20" fill="white"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.667 20C18.667 21.1046 17.7716 22 16.667 22C15.5624 22 14.667 21.1046 14.667 20C14.667 18.8954 15.5624 18 16.667 18C17.7716 18 18.667 18.8954 18.667 20ZM26 20C26 21.1046 25.1046 22 24 22C22.8954 22 22 21.1046 22 20C22 18.8954 22.8954 18 24 18C25.1046 18 26 18.8954 26 20ZM31.333 22C32.4376 22 33.333 21.1046 33.333 20C33.333 18.8954 32.4376 18 31.333 18C30.2284 18 29.333 18.8954 29.333 20C29.333 21.1046 30.2284 22 31.333 22Z" fill="#737D8C"/>
|
||||
<defs>
|
||||
<filter id="filter0_d" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
After Width: | Height: | Size: 1.3 KiB |
3
res/img/voip/paused.svg
Normal file
3
res/img/voip/paused.svg
Normal file
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM11 16H9V8H11V16ZM15 16H13V8H15V16Z" fill="white"/>
|
||||
</svg>
|
After Width: | Height: | Size: 256 B |
|
@ -108,6 +108,9 @@ $eventtile-meta-color: $roomtopic-color;
|
|||
$header-divider-color: $header-panel-text-primary-color;
|
||||
$composer-e2e-icon-color: $header-panel-text-primary-color;
|
||||
|
||||
// this probably shouldn't have it's own colour
|
||||
$voipcall-plinth-color: #21262c;
|
||||
|
||||
// ********************
|
||||
|
||||
$theme-button-bg-color: #e3e8f0;
|
||||
|
@ -214,7 +217,7 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28);
|
|||
/* align images in buttons (eg spinners) */
|
||||
vertical-align: middle;
|
||||
border: 0px;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
font-family: $font-family;
|
||||
font-size: $font-14px;
|
||||
color: $button-fg-color;
|
||||
|
|
|
@ -105,6 +105,9 @@ $eventtile-meta-color: $roomtopic-color;
|
|||
$header-divider-color: $header-panel-text-primary-color;
|
||||
$composer-e2e-icon-color: $header-panel-text-primary-color;
|
||||
|
||||
// this probably shouldn't have it's own colour
|
||||
$voipcall-plinth-color: #f2f5f8;
|
||||
|
||||
// ********************
|
||||
|
||||
$theme-button-bg-color: #e3e8f0;
|
||||
|
@ -205,7 +208,7 @@ $composer-shadow-color: tranparent;
|
|||
/* align images in buttons (eg spinners) */
|
||||
vertical-align: middle;
|
||||
border: 0px;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
font-family: $font-family;
|
||||
font-size: $font-14px;
|
||||
color: $button-fg-color;
|
||||
|
|
|
@ -172,6 +172,9 @@ $eventtile-meta-color: $roomtopic-color;
|
|||
$composer-e2e-icon-color: #91a1c0;
|
||||
$header-divider-color: #91a1c0;
|
||||
|
||||
// this probably shouldn't have it's own colour
|
||||
$voipcall-plinth-color: #f2f5f8;
|
||||
|
||||
// ********************
|
||||
|
||||
$theme-button-bg-color: #e3e8f0;
|
||||
|
@ -328,7 +331,7 @@ $composer-shadow-color: tranparent;
|
|||
/* align images in buttons (eg spinners) */
|
||||
vertical-align: middle;
|
||||
border: 0px;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
font-family: $font-family;
|
||||
font-size: $font-14px;
|
||||
color: $button-fg-color;
|
||||
|
|
|
@ -166,6 +166,9 @@ $eventtile-meta-color: $roomtopic-color;
|
|||
$composer-e2e-icon-color: #91A1C0;
|
||||
$header-divider-color: #91A1C0;
|
||||
|
||||
// this probably shouldn't have it's own colour
|
||||
$voipcall-plinth-color: #f2f5f8;
|
||||
|
||||
// ********************
|
||||
|
||||
$theme-button-bg-color: #e3e8f0;
|
||||
|
@ -332,7 +335,7 @@ $composer-shadow-color: rgba(0, 0, 0, 0.04);
|
|||
/* align images in buttons (eg spinners) */
|
||||
vertical-align: middle;
|
||||
border: 0px;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
font-family: $font-family;
|
||||
font-size: $font-14px;
|
||||
color: $button-fg-color;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue