Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/feat/modal-widgets
Conflicts: src/@types/global.d.ts src/FromWidgetPostMessageApi.js src/WidgetMessaging.js src/widgets/WidgetApi.ts
This commit is contained in:
Michael Telatynski
commit
00b1a03a3e
171 changed files with 5309 additions and 4610 deletions
|
|
@ -208,12 +208,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
border: 0;
|
||||
}
|
||||
|
||||
/* applied to side-panels and messagepanel when in RoomSettings */
|
||||
.mx_fadable {
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
// These are magic constants which are excluded from tinting, to let themes
|
||||
// (which only have CSS, unlike skins) tell the app what their non-tinted
|
||||
// colourscheme is by inspecting the stylesheet DOM.
|
||||
|
|
@ -262,7 +256,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
font-weight: 300;
|
||||
font-size: $font-15px;
|
||||
position: relative;
|
||||
padding: 25px 30px 30px 30px;
|
||||
padding: 24px;
|
||||
max-height: 80%;
|
||||
box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
|
||||
border-radius: 8px;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
@import "./structures/_ScrollPanel.scss";
|
||||
@import "./structures/_SearchBox.scss";
|
||||
@import "./structures/_TabbedView.scss";
|
||||
@import "./structures/_TagPanel.scss";
|
||||
@import "./structures/_GroupFilterPanel.scss";
|
||||
@import "./structures/_ToastContainer.scss";
|
||||
@import "./structures/_UploadBar.scss";
|
||||
@import "./structures/_UserMenu.scss";
|
||||
|
|
@ -82,8 +82,6 @@
|
|||
@import "./views/dialogs/_RoomUpgradeWarningDialog.scss";
|
||||
@import "./views/dialogs/_ServerOfflineDialog.scss";
|
||||
@import "./views/dialogs/_SetEmailDialog.scss";
|
||||
@import "./views/dialogs/_SetMxIdDialog.scss";
|
||||
@import "./views/dialogs/_SetPasswordDialog.scss";
|
||||
@import "./views/dialogs/_SettingsDialog.scss";
|
||||
@import "./views/dialogs/_ShareDialog.scss";
|
||||
@import "./views/dialogs/_SlashCommandHelpDialog.scss";
|
||||
|
|
@ -142,6 +140,7 @@
|
|||
@import "./views/messages/_MEmoteBody.scss";
|
||||
@import "./views/messages/_MFileBody.scss";
|
||||
@import "./views/messages/_MImageBody.scss";
|
||||
@import "./views/messages/_MJitsiWidgetEvent.scss";
|
||||
@import "./views/messages/_MNoticeBody.scss";
|
||||
@import "./views/messages/_MStickerBody.scss";
|
||||
@import "./views/messages/_MTextBody.scss";
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_CustomRoomTagPanel {
|
||||
background-color: $tagpanel-bg-color;
|
||||
background-color: $groupFilterPanel-bg-color;
|
||||
max-height: 40vh;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_TagPanel {
|
||||
.mx_GroupFilterPanel {
|
||||
flex: 1;
|
||||
background-color: $tagpanel-bg-color;
|
||||
background-color: $groupFilterPanel-bg-color;
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
|
|
@ -26,49 +26,49 @@ limitations under the License.
|
|||
min-height: 0;
|
||||
}
|
||||
|
||||
.mx_TagPanel_items_selected {
|
||||
.mx_GroupFilterPanel_items_selected {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagPanel_divider {
|
||||
.mx_GroupFilterPanel .mx_GroupFilterPanel_divider {
|
||||
height: 0px;
|
||||
width: 90%;
|
||||
border: none;
|
||||
border-bottom: 1px solid $tagpanel-divider-color;
|
||||
border-bottom: 1px solid $groupFilterPanel-divider-color;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagPanel_scroller {
|
||||
.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagPanel_tagTileContainer {
|
||||
.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
padding-top: 6px;
|
||||
}
|
||||
.mx_TagPanel .mx_TagPanel_tagTileContainer > div {
|
||||
.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer > div {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile {
|
||||
.mx_GroupFilterPanel .mx_TagTile {
|
||||
// opacity: 0.5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile.mx_TagTile_prototype {
|
||||
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile:focus,
|
||||
.mx_TagPanel .mx_TagTile:hover,
|
||||
.mx_TagPanel .mx_TagTile.mx_TagTile_selected {
|
||||
.mx_GroupFilterPanel .mx_TagTile:focus,
|
||||
.mx_GroupFilterPanel .mx_TagTile:hover,
|
||||
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected {
|
||||
// opacity: 1;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile.mx_TagTile_selected_prototype {
|
||||
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
|
||||
background-color: $primary-bg-color;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
|
@ -108,7 +108,7 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile_plus {
|
||||
.mx_GroupFilterPanel .mx_TagTile_plus {
|
||||
margin-bottom: 12px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
|
@ -132,7 +132,7 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
|
||||
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected::before {
|
||||
content: '';
|
||||
height: 100%;
|
||||
background-color: $accent-color;
|
||||
|
|
@ -142,7 +142,7 @@ limitations under the License.
|
|||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
|
||||
.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
|
|
@ -14,29 +14,29 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
$tagPanelWidth: 56px; // only applies in this file, used for calculations
|
||||
$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
|
||||
|
||||
.mx_LeftPanel {
|
||||
background-color: $roomlist-bg-color;
|
||||
min-width: 260px;
|
||||
max-width: 50%;
|
||||
|
||||
// Create a row-based flexbox for the TagPanel and the room list
|
||||
// Create a row-based flexbox for the GroupFilterPanel and the room list
|
||||
display: flex;
|
||||
|
||||
.mx_LeftPanel_tagPanelContainer {
|
||||
.mx_LeftPanel_GroupFilterPanelContainer {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: $tagPanelWidth;
|
||||
flex-basis: $groupFilterPanelWidth;
|
||||
height: 100%;
|
||||
|
||||
// Create another flexbox so the TagPanel fills the container
|
||||
// Create another flexbox so the GroupFilterPanel fills the container
|
||||
display: flex;
|
||||
|
||||
// TagPanel handles its own CSS
|
||||
// GroupFilterPanel handles its own CSS
|
||||
}
|
||||
|
||||
&:not(.mx_LeftPanel_hasTagPanel) {
|
||||
&:not(.mx_LeftPanel_hasGroupFilterPanel) {
|
||||
.mx_LeftPanel_roomListContainer {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -45,7 +45,7 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
|
|||
// Note: The 'room list' in this context is actually everything that isn't the tag
|
||||
// panel, such as the menu options, breadcrumbs, filtering, etc
|
||||
.mx_LeftPanel_roomListContainer {
|
||||
width: calc(100% - $tagPanelWidth);
|
||||
width: calc(100% - $groupFilterPanelWidth);
|
||||
background-color: $roomlist-bg-color;
|
||||
|
||||
// Create another flexbox (this time a column) for the room list components
|
||||
|
|
@ -169,10 +169,10 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
|
|||
min-width: unset;
|
||||
|
||||
// We have to forcefully set the width to override the resizer's style attribute.
|
||||
&.mx_LeftPanel_hasTagPanel {
|
||||
width: calc(68px + $tagPanelWidth) !important;
|
||||
&.mx_LeftPanel_hasGroupFilterPanel {
|
||||
width: calc(68px + $groupFilterPanelWidth) !important;
|
||||
}
|
||||
&:not(.mx_LeftPanel_hasTagPanel) {
|
||||
&:not(.mx_LeftPanel_hasGroupFilterPanel) {
|
||||
width: 68px !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -133,6 +133,10 @@ limitations under the License.
|
|||
.mx_RoomDirectory_topic {
|
||||
cursor: initial;
|
||||
color: $light-fg-color;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_alias {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ limitations under the License.
|
|||
|
||||
.mx_TabbedView {
|
||||
margin: 0;
|
||||
padding: 0 0 0 58px;
|
||||
padding: 0 0 0 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
|
|
@ -25,6 +25,7 @@ limitations under the License.
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabLabels {
|
||||
|
|
@ -35,13 +36,13 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_TabbedView_tabLabel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
vertical-align: text-top;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
font-size: $font-14px;
|
||||
min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
|
||||
margin-bottom: 6px;
|
||||
padding: 8px 0;
|
||||
border-radius: 8px;
|
||||
font-size: $font-13px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -51,9 +52,8 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_TabbedView_maskedIcon {
|
||||
margin-left: 6px;
|
||||
margin-right: 9px;
|
||||
margin-top: 1px;
|
||||
margin-left: 8px;
|
||||
margin-right: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
|
|
@ -65,10 +65,9 @@ limitations under the License.
|
|||
mask-repeat: no-repeat;
|
||||
mask-size: 16px;
|
||||
width: 16px;
|
||||
height: 22px;
|
||||
height: 16px;
|
||||
mask-position: center;
|
||||
content: '';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,6 @@ limitations under the License.
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
padding-left: 40px;
|
||||
padding-right: 80px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,50 +0,0 @@
|
|||
/*
|
||||
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: $font-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;
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
/*
|
||||
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: $font-15px;
|
||||
max-width: 280px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mx_SetPasswordDialog_change_password_button {
|
||||
margin-top: 68px;
|
||||
}
|
||||
|
||||
.mx_SetPasswordDialog .mx_Dialog_content {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
|
@ -36,7 +36,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_Dialog_title {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
55
res/css/views/messages/_MJitsiWidgetEvent.scss
Normal file
55
res/css/views/messages/_MJitsiWidgetEvent.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
/*
|
||||
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_MJitsiWidgetEvent {
|
||||
display: grid;
|
||||
grid-template-columns: 24px minmax(0, 1fr) min-content;
|
||||
|
||||
&::before {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / 3;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
content: "";
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
background-color: $composer-e2e-icon-color; // XXX: Variable abuse
|
||||
margin-top: 4px;
|
||||
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
|
||||
}
|
||||
|
||||
.mx_MJitsiWidgetEvent_title {
|
||||
font-weight: 600;
|
||||
font-size: $font-15px;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.mx_MJitsiWidgetEvent_subtitle {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.mx_MJitsiWidgetEvent_title,
|
||||
.mx_MJitsiWidgetEvent_subtitle {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
|
@ -40,6 +40,7 @@ limitations under the License.
|
|||
width: 20px;
|
||||
margin: 12px;
|
||||
top: 0;
|
||||
border-radius: 10px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
|
|
@ -55,7 +56,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_BaseCard_back {
|
||||
border-radius: 4px;
|
||||
left: 0;
|
||||
|
||||
&::before {
|
||||
|
|
@ -66,7 +66,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_BaseCard_close {
|
||||
border-radius: 10px;
|
||||
right: 0;
|
||||
|
||||
&::before {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
$MiniAppTileHeight: 114px;
|
||||
$MiniAppTileHeight: 200px;
|
||||
|
||||
.mx_AppsDrawer {
|
||||
margin: 5px 5px 5px 18px;
|
||||
|
|
@ -50,10 +50,6 @@ $MiniAppTileHeight: 114px;
|
|||
}
|
||||
}
|
||||
|
||||
.mx_AppsDrawer_hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_AppsContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -78,21 +74,7 @@ $MiniAppTileHeight: 114px;
|
|||
font-size: $font-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: $font-15px;
|
||||
}
|
||||
|
||||
.mx_AppTile {
|
||||
max-width: 960px;
|
||||
width: 50%;
|
||||
border: 5px solid $widget-menu-bar-bg-color;
|
||||
border-radius: 4px;
|
||||
|
|
@ -105,7 +87,6 @@ $MiniAppTileHeight: 114px;
|
|||
}
|
||||
|
||||
.mx_AppTileFullWidth {
|
||||
max-width: 960px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -116,7 +97,6 @@ $MiniAppTileHeight: 114px;
|
|||
}
|
||||
|
||||
.mx_AppTile_mini {
|
||||
max-width: 960px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -220,9 +200,10 @@ $MiniAppTileHeight: 114px;
|
|||
}
|
||||
|
||||
.mx_AppTileBody_mini {
|
||||
height: 112px;
|
||||
height: $MiniAppTileHeight;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_AppTile .mx_AppTileBody,
|
||||
|
|
@ -248,72 +229,6 @@ $MiniAppTileHeight: 114px;
|
|||
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;
|
||||
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: $widget-menu-bar-bg-color;
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MemberInfo_avatar {
|
||||
background: $tagpanel-bg-color;
|
||||
background: $groupFilterPanel-bg-color;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -96,11 +96,21 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MemberList_invite span {
|
||||
background-image: url('$(res)/img/element-icons/room/invite.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
background-size: 20px;
|
||||
padding: 8px 0 8px 25px;
|
||||
padding: 8px 0;
|
||||
display: inline-flex;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background-color: $button-fg-color;
|
||||
mask-image: url('$(res)/img/element-icons/room/invite.svg');
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MemberList_inviteCommunity span {
|
||||
|
|
|
|||
|
|
@ -217,7 +217,7 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
&.mx_MessageComposer_hangup::before {
|
||||
&.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled)::before {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ limitations under the License.
|
|||
|
||||
.mx_AvatarSetting_avatar {
|
||||
width: 90px;
|
||||
min-width: 90px; // so it doesn't get crushed by the flexbox in languages with longer words
|
||||
height: 90px;
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
|
|
@ -84,6 +85,7 @@ limitations under the License.
|
|||
.mx_AvatarSetting_avatarPlaceholder {
|
||||
display: block;
|
||||
height: 90px;
|
||||
width: inherit;
|
||||
border-radius: 90px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,9 +23,16 @@ limitations under the License.
|
|||
z-index: 100;
|
||||
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
|
||||
|
||||
cursor: pointer;
|
||||
// Disable pointer events for Jitsi widgets to function. Direct
|
||||
// calls have their own cursor and behaviour, but we need to make
|
||||
// sure the cursor hits the iframe for Jitsi which will be at a
|
||||
// different level.
|
||||
pointer-events: none;
|
||||
|
||||
.mx_CallPreview {
|
||||
pointer-events: initial; // restore pointer events so the user can leave/interact
|
||||
cursor: pointer;
|
||||
|
||||
.mx_VideoView {
|
||||
width: 350px;
|
||||
}
|
||||
|
|
@ -37,7 +44,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_AppTile_persistedWrapper div {
|
||||
min-width: 300px;
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox {
|
||||
|
|
@ -45,11 +52,14 @@ limitations under the License.
|
|||
background-color: $primary-bg-color;
|
||||
padding: 8px;
|
||||
|
||||
pointer-events: initial; // restore pointer events so the user can accept/decline
|
||||
cursor: pointer;
|
||||
|
||||
.mx_IncomingCallBox_CallerInfo {
|
||||
display: flex;
|
||||
direction: row;
|
||||
|
||||
img {
|
||||
img, .mx_BaseAvatar_initial {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M28 8.5C28 12.0899 25.0899 15 21.5 15C17.9101 15 15 12.0899 15 8.5C15 4.91015 17.9101 2 21.5 2C25.0899 2 28 4.91015 28 8.5ZM22.5 5C22.5 4.44772 22.0523 4 21.5 4C20.9477 4 20.5 4.44772 20.5 5V7.6286H17.9C17.4029 7.6286 17 8.02089 17 8.5048C17 8.98871 17.4029 9.381 17.9 9.381H20.5V12.0096C20.5 12.5619 20.9477 13.0096 21.5 13.0096C22.0523 13.0096 22.5 12.5619 22.5 12.0096V9.381H25.1C25.5971 9.381 26 8.98871 26 8.5048C26 8.02089 25.5971 7.6286 25.1 7.6286H22.5V5ZM21.5 16C23.6351 16 25.5619 15.1078 26.9278 13.6759C26.9755 14.1107 27 14.5525 27 15C27 18.9261 25.1146 22.4117 22.1998 24.601V24.6009C20.348 25.9918 18.0808 26.8595 15.6175 26.9844C15.413 26.9948 15.2071 27 15 27C8.37258 27 3 21.6274 3 15C3 8.37258 8.37258 3 15 3C15.4475 3 15.8893 3.0245 16.3241 3.07223C14.929 4.40304 14.0462 6.26631 14.0018 8.336C12.8183 8.89737 12 10.1031 12 11.5C12 13.433 13.567 15 15.5 15C16.0892 15 16.6445 14.8544 17.1316 14.5972C18.3618 15.4802 19.8702 16 21.5 16ZM14.9998 24.6C17.5942 24.6 19.9482 23.5709 21.6759 21.8986C20.6074 19.2607 18.0209 17.4 14.9998 17.4C11.9787 17.4 9.39221 19.2607 8.32376 21.8986C10.0514 23.5709 12.4054 24.6 14.9998 24.6Z" fill="white"/>
|
||||
<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="M19.1001 9C18.7779 9 18.5168 8.73883 18.5168 8.41667V6.08333H16.1834C15.8613 6.08333 15.6001 5.82217 15.6001 5.5C15.6001 5.17783 15.8613 4.91667 16.1834 4.91667H18.5168V2.58333C18.5168 2.26117 18.7779 2 19.1001 2C19.4223 2 19.6834 2.26117 19.6834 2.58333V4.91667H22.0168C22.3389 4.91667 22.6001 5.17783 22.6001 5.5C22.6001 5.82217 22.3389 6.08333 22.0168 6.08333H19.6834V8.41667C19.6834 8.73883 19.4223 9 19.1001 9ZM19.6001 11C20.0669 11 20.5212 10.9467 20.9574 10.8458C21.1161 11.5383 21.2 12.2594 21.2 13C21.2 16.1409 19.6917 18.9294 17.3598 20.6808V20.6807C16.0014 21.7011 14.3635 22.3695 12.5815 22.5505C12.2588 22.5832 11.9314 22.6 11.6 22.6C6.29807 22.6 2 18.302 2 13C2 7.69809 6.29807 3.40002 11.6 3.40002C12.3407 3.40002 13.0618 3.48391 13.7543 3.64268C13.6534 4.07884 13.6001 4.53319 13.6001 5C13.6001 8.31371 16.2864 11 19.6001 11ZM11.5999 20.68C13.6754 20.68 15.5585 19.8567 16.9407 18.5189C16.0859 16.4086 14.0167 14.92 11.5998 14.92C9.18298 14.92 7.11378 16.4086 6.25901 18.5189C7.64115 19.8567 9.52436 20.68 11.5999 20.68ZM11.7426 7.41172C10.3168 7.54168 9.2 8.74043 9.2 10.2C9.2 11.7464 10.4536 13 12 13C13.0308 13 13.9315 12.443 14.4176 11.6135C13.0673 10.6058 12.0929 9.12248 11.7426 7.41172Z" fill="black"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
|
@ -39,7 +39,7 @@ $info-plinth-fg-color: #888;
|
|||
|
||||
$preview-bar-bg-color: $header-panel-bg-color;
|
||||
|
||||
$tagpanel-bg-color: rgba(38, 39, 43, 0.82);
|
||||
$groupFilterPanel-bg-color: rgba(38, 39, 43, 0.82);
|
||||
$inverted-bg-color: $base-color;
|
||||
|
||||
// used by AddressSelector
|
||||
|
|
@ -98,7 +98,7 @@ $roomheader-color: $text-primary-color;
|
|||
$roomheader-bg-color: $bg-color;
|
||||
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
|
||||
$roomheader-addroom-fg-color: $text-primary-color;
|
||||
$tagpanel-button-color: $header-panel-text-primary-color;
|
||||
$groupFilterPanel-button-color: $header-panel-text-primary-color;
|
||||
$groupheader-button-color: $header-panel-text-primary-color;
|
||||
$rightpanel-button-color: $header-panel-text-primary-color;
|
||||
$icon-button-color: #8E99A4;
|
||||
|
|
@ -118,7 +118,7 @@ $roomlist-bg-color: rgba(33, 38, 44, 0.90);
|
|||
$roomlist-header-color: $tertiary-fg-color;
|
||||
$roomsublist-divider-color: $primary-fg-color;
|
||||
|
||||
$tagpanel-divider-color: $roomlist-header-color;
|
||||
$groupFilterPanel-divider-color: $roomlist-header-color;
|
||||
|
||||
$roomtile-preview-color: $secondary-fg-color;
|
||||
$roomtile-default-badge-bg-color: #61708b;
|
||||
|
|
@ -187,7 +187,7 @@ $reaction-row-button-selected-border-color: $accent-color;
|
|||
|
||||
$kbd-border-color: #000000;
|
||||
|
||||
$tooltip-timeline-bg-color: $tagpanel-bg-color;
|
||||
$tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
|
||||
$tooltip-timeline-fg-color: #ffffff;
|
||||
|
||||
$interactive-tooltip-bg-color: $base-color;
|
||||
|
|
@ -202,7 +202,7 @@ $appearance-tab-border-color: $room-highlight-color;
|
|||
|
||||
// blur amounts for left left panel (only for element theme, used in _mods.scss)
|
||||
$roomlist-background-blur-amount: 60px;
|
||||
$tagpanel-background-blur-amount: 30px;
|
||||
$groupFilterPanel-background-blur-amount: 30px;
|
||||
|
||||
$composer-shadow-color: rgba(0, 0, 0, 0.28);
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@import "../../light/css/_fonts.scss";
|
||||
@import "../../light/css/_light.scss";
|
||||
// important this goes before _mods,
|
||||
// as $tagpanel-background-blur-amount and
|
||||
// as $groupFilterPanel-background-blur-amount and
|
||||
// $roomlist-background-blur-amount
|
||||
// are overridden in _dark.scss
|
||||
@import "_dark.scss";
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@ $info-plinth-fg-color: #888;
|
|||
|
||||
$preview-bar-bg-color: $header-panel-bg-color;
|
||||
|
||||
$tagpanel-bg-color: $base-color;
|
||||
$inverted-bg-color: $tagpanel-bg-color;
|
||||
$groupFilterPanel-bg-color: $base-color;
|
||||
$inverted-bg-color: $groupFilterPanel-bg-color;
|
||||
|
||||
// used by AddressSelector
|
||||
$selected-color: $room-highlight-color;
|
||||
|
|
@ -95,7 +95,7 @@ $topleftmenu-color: $text-primary-color;
|
|||
$roomheader-color: $text-primary-color;
|
||||
$roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity
|
||||
$roomheader-addroom-fg-color: $text-primary-color;
|
||||
$tagpanel-button-color: $header-panel-text-primary-color;
|
||||
$groupFilterPanel-button-color: $header-panel-text-primary-color;
|
||||
$groupheader-button-color: $header-panel-text-primary-color;
|
||||
$rightpanel-button-color: $header-panel-text-primary-color;
|
||||
$icon-button-color: $header-panel-text-primary-color;
|
||||
|
|
@ -115,7 +115,7 @@ $roomlist-bg-color: $header-panel-bg-color;
|
|||
|
||||
$roomsublist-divider-color: $primary-fg-color;
|
||||
|
||||
$tagpanel-divider-color: $roomlist-header-color;
|
||||
$groupFilterPanel-divider-color: $roomlist-header-color;
|
||||
|
||||
$roomtile-preview-color: #9e9e9e;
|
||||
$roomtile-default-badge-bg-color: #61708b;
|
||||
|
|
@ -182,7 +182,7 @@ $reaction-row-button-selected-border-color: $accent-color;
|
|||
|
||||
$kbd-border-color: #000000;
|
||||
|
||||
$tooltip-timeline-bg-color: $tagpanel-bg-color;
|
||||
$tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
|
||||
$tooltip-timeline-fg-color: #ffffff;
|
||||
|
||||
$interactive-tooltip-bg-color: $base-color;
|
||||
|
|
|
|||
|
|
@ -67,8 +67,8 @@ $preview-bar-bg-color: #f7f7f7;
|
|||
$secondary-accent-color: #f2f5f8;
|
||||
$tertiary-accent-color: #d3efe1;
|
||||
|
||||
$tagpanel-bg-color: #27303a;
|
||||
$inverted-bg-color: $tagpanel-bg-color;
|
||||
$groupFilterPanel-bg-color: #27303a;
|
||||
$inverted-bg-color: $groupFilterPanel-bg-color;
|
||||
|
||||
// used by RoomDirectory permissions
|
||||
$plinth-bg-color: $secondary-accent-color;
|
||||
|
|
@ -162,7 +162,7 @@ $roomheader-color: #45474a;
|
|||
$roomheader-bg-color: $primary-bg-color;
|
||||
$roomheader-addroom-bg-color: #91a1c0;
|
||||
$roomheader-addroom-fg-color: $accent-fg-color;
|
||||
$tagpanel-button-color: #91a1c0;
|
||||
$groupFilterPanel-button-color: #91a1c0;
|
||||
$groupheader-button-color: #91a1c0;
|
||||
$rightpanel-button-color: #91a1c0;
|
||||
$icon-button-color: #91a1c0;
|
||||
|
|
@ -182,7 +182,7 @@ $roomlist-bg-color: $header-panel-bg-color;
|
|||
$roomlist-header-color: $primary-fg-color;
|
||||
$roomsublist-divider-color: $primary-fg-color;
|
||||
|
||||
$tagpanel-divider-color: $roomlist-header-color;
|
||||
$groupFilterPanel-divider-color: $roomlist-header-color;
|
||||
|
||||
$roomtile-preview-color: #9e9e9e;
|
||||
$roomtile-default-badge-bg-color: #61708b;
|
||||
|
|
@ -305,7 +305,7 @@ $reaction-row-button-selected-border-color: $accent-color;
|
|||
|
||||
$kbd-border-color: $reaction-row-button-border-color;
|
||||
|
||||
$tooltip-timeline-bg-color: $tagpanel-bg-color;
|
||||
$tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
|
||||
$tooltip-timeline-fg-color: #ffffff;
|
||||
|
||||
$interactive-tooltip-bg-color: #27303a;
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ $roomtile-selected-bg-color: var(--roomlist-highlights-color);
|
|||
//
|
||||
// --sidebar-color
|
||||
$interactive-tooltip-bg-color: var(--sidebar-color);
|
||||
$tagpanel-bg-color: var(--sidebar-color);
|
||||
$groupFilterPanel-bg-color: var(--sidebar-color);
|
||||
$tooltip-timeline-bg-color: var(--sidebar-color);
|
||||
$dialog-backdrop-color: var(--sidebar-color-50pct);
|
||||
$roomlist-button-bg-color: var(--sidebar-color-15pct);
|
||||
|
|
@ -124,15 +124,15 @@ $pinned-unread-color: var(--warning-color);
|
|||
$warning-color: var(--warning-color);
|
||||
$button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5
|
||||
//
|
||||
// --username colors
|
||||
$username-variant1-color: var(--username-colors_1, $username-variant1-color);
|
||||
$username-variant2-color: var(--username-colors_2, $username-variant2-color);
|
||||
$username-variant3-color: var(--username-colors_3, $username-variant3-color);
|
||||
$username-variant4-color: var(--username-colors_4, $username-variant4-color);
|
||||
$username-variant5-color: var(--username-colors_5, $username-variant5-color);
|
||||
$username-variant6-color: var(--username-colors_6, $username-variant6-color);
|
||||
$username-variant7-color: var(--username-colors_7, $username-variant7-color);
|
||||
$username-variant8-color: var(--username-colors_8, $username-variant8-color);
|
||||
// --username colors (which use a 0-based index)
|
||||
$username-variant1-color: var(--username-colors_0, $username-variant1-color);
|
||||
$username-variant2-color: var(--username-colors_1, $username-variant2-color);
|
||||
$username-variant3-color: var(--username-colors_2, $username-variant3-color);
|
||||
$username-variant4-color: var(--username-colors_3, $username-variant4-color);
|
||||
$username-variant5-color: var(--username-colors_4, $username-variant5-color);
|
||||
$username-variant6-color: var(--username-colors_5, $username-variant6-color);
|
||||
$username-variant7-color: var(--username-colors_6, $username-variant7-color);
|
||||
$username-variant8-color: var(--username-colors_7, $username-variant8-color);
|
||||
//
|
||||
// --timeline-highlights-color
|
||||
$event-selected-color: var(--timeline-highlights-color);
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ $preview-bar-bg-color: #f7f7f7;
|
|||
$secondary-accent-color: #f2f5f8;
|
||||
$tertiary-accent-color: #d3efe1;
|
||||
|
||||
$tagpanel-bg-color: rgba(232, 232, 232, 0.77);
|
||||
$groupFilterPanel-bg-color: rgba(232, 232, 232, 0.77);
|
||||
|
||||
// used by RoomDirectory permissions
|
||||
$plinth-bg-color: $secondary-accent-color;
|
||||
|
|
@ -156,7 +156,7 @@ $roomheader-color: #45474a;
|
|||
$roomheader-bg-color: $primary-bg-color;
|
||||
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);
|
||||
$roomheader-addroom-fg-color: #5c6470;
|
||||
$tagpanel-button-color: #91A1C0;
|
||||
$groupFilterPanel-button-color: #91A1C0;
|
||||
$groupheader-button-color: #91A1C0;
|
||||
$rightpanel-button-color: #91A1C0;
|
||||
$icon-button-color: #C1C6CD;
|
||||
|
|
@ -176,7 +176,7 @@ $roomlist-bg-color: rgba(245, 245, 245, 0.90);
|
|||
$roomlist-header-color: $tertiary-fg-color;
|
||||
$roomsublist-divider-color: $primary-fg-color;
|
||||
|
||||
$tagpanel-divider-color: $roomlist-header-color;
|
||||
$groupFilterPanel-divider-color: $roomlist-header-color;
|
||||
|
||||
$roomtile-preview-color: $secondary-fg-color;
|
||||
$roomtile-default-badge-bg-color: #61708b;
|
||||
|
|
@ -320,7 +320,7 @@ $appearance-tab-border-color: $input-darker-bg-color;
|
|||
|
||||
// blur amounts for left left panel (only for element theme, used in _mods.scss)
|
||||
$roomlist-background-blur-amount: 40px;
|
||||
$tagpanel-background-blur-amount: 20px;
|
||||
$groupFilterPanel-background-blur-amount: 20px;
|
||||
|
||||
$composer-shadow-color: rgba(0, 0, 0, 0.04);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@
|
|||
|
||||
@supports (backdrop-filter: none) {
|
||||
.mx_LeftPanel {
|
||||
background-image: var(--avatar-url);
|
||||
background-image: var(--avatar-url, unset);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: left top;
|
||||
}
|
||||
|
||||
.mx_TagPanel {
|
||||
backdrop-filter: blur($tagpanel-background-blur-amount);
|
||||
.mx_GroupFilterPanel {
|
||||
backdrop-filter: blur($groupFilterPanel-background-blur-amount);
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_LeftPanel_roomListContainer {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue