+
+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_desktopCapturerSourcePicker {
+ overflow: hidden;
+}
+
+.mx_desktopCapturerSourcePicker_tabLabels {
+ display: flex;
+ padding: 0 0 8px 0;
+}
+
+.mx_desktopCapturerSourcePicker_tabLabel,
+.mx_desktopCapturerSourcePicker_tabLabel_selected {
+ width: 100%;
+ text-align: center;
+ border-radius: 8px;
+ padding: 8px 0;
+ font-size: $font-13px;
+}
+
+.mx_desktopCapturerSourcePicker_tabLabel_selected {
+ background-color: $tab-label-active-bg-color;
+ color: $tab-label-active-fg-color;
+}
+
+.mx_desktopCapturerSourcePicker_panel {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: flex-start;
+ height: 500px;
+ overflow: overlay;
+}
+
+.mx_desktopCapturerSourcePicker_stream_button {
+ display: flex;
+ flex-direction: column;
+ margin: 8px;
+ border-radius: 4px;
+}
+
+.mx_desktopCapturerSourcePicker_stream_button:hover,
+.mx_desktopCapturerSourcePicker_stream_button:focus {
+ background: $roomtile-selected-bg-color;
+}
+
+.mx_desktopCapturerSourcePicker_stream_thumbnail {
+ margin: 4px;
+ width: 312px;
+}
+
+.mx_desktopCapturerSourcePicker_stream_name {
+ margin: 0 4px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ width: 312px;
+}
diff --git a/res/css/views/elements/_IconButton.scss b/res/css/views/elements/_IconButton.scss
deleted file mode 100644
index d8ebbeb65e..0000000000
--- a/res/css/views/elements/_IconButton.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
-Copyright 2019 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_IconButton {
- width: 32px;
- height: 32px;
- border-radius: 100%;
- background-color: $accent-bg-color;
- // don't shrink or grow if in a flex container
- flex: 0 0 auto;
-
- &.mx_AccessibleButton_disabled {
- background-color: none;
-
- &::before {
- background-color: lightgrey;
- }
- }
-
- &:hover {
- opacity: 90%;
- }
-
- &::before {
- content: "";
- display: block;
- width: 100%;
- height: 100%;
- mask-repeat: no-repeat;
- mask-position: center;
- mask-size: 55%;
- background-color: $accent-color;
- }
-
- &.mx_IconButton_icon_check::before {
- mask-image: url('$(res)/img/feather-customised/check.svg');
- }
-
- &.mx_IconButton_icon_edit::before {
- mask-image: url('$(res)/img/feather-customised/edit.svg');
- }
-}
diff --git a/res/css/views/elements/_MiniAvatarUploader.scss b/res/css/views/elements/_MiniAvatarUploader.scss
new file mode 100644
index 0000000000..698184a095
--- /dev/null
+++ b/res/css/views/elements/_MiniAvatarUploader.scss
@@ -0,0 +1,66 @@
+/*
+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_MiniAvatarUploader {
+ position: relative;
+ width: min-content;
+
+ // this isn't a floating tooltip so override some things to not need to bother with z-index and floating
+ .mx_Tooltip {
+ display: inline-block;
+ position: absolute;
+ z-index: unset;
+ width: max-content;
+ left: 72px;
+ top: 0;
+ }
+
+ &::before, &::after {
+ content: '';
+ position: absolute;
+
+ height: 26px;
+ width: 26px;
+
+ right: -6px;
+ bottom: -6px;
+ }
+
+ &::before {
+ background-color: $primary-bg-color;
+ border-radius: 50%;
+ z-index: 1;
+ }
+
+ &::after {
+ background-color: $secondary-fg-color;
+ mask-position: center;
+ mask-repeat: no-repeat;
+ mask-image: url('$(res)/img/element-icons/camera.svg');
+ mask-size: 16px;
+ z-index: 2;
+ }
+
+ &.mx_MiniAvatarUploader_busy::after {
+ background: url("$(res)/img/spinner.gif") no-repeat center;
+ background-size: 80%;
+ mask: unset;
+ }
+}
+
+.mx_MiniAvatarUploader_input {
+ display: none;
+}
diff --git a/res/css/views/elements/_SSOButtons.scss b/res/css/views/elements/_SSOButtons.scss
new file mode 100644
index 0000000000..e02816780f
--- /dev/null
+++ b/res/css/views/elements/_SSOButtons.scss
@@ -0,0 +1,74 @@
+/*
+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;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ .mx_SSOButtons_row {
+ & + .mx_SSOButtons_row {
+ margin-top: 16px;
+ }
+ }
+
+ .mx_SSOButton {
+ position: relative;
+ width: 100%;
+ padding: 7px 32px;
+ text-align: center;
+ border-radius: 8px;
+ display: inline-block;
+ font-size: $font-14px;
+ font-weight: $font-semi-bold;
+ border: 1px solid $input-border-color;
+ color: $primary-fg-color;
+
+ > img {
+ object-fit: contain;
+ position: absolute;
+ left: 8px;
+ top: 4px;
+ }
+ }
+
+ .mx_SSOButton_default {
+ color: $button-primary-bg-color;
+ background-color: $button-secondary-bg-color;
+ border-color: $button-primary-bg-color;
+ }
+ .mx_SSOButton_default.mx_SSOButton_primary {
+ color: $button-primary-fg-color;
+ background-color: $button-primary-bg-color;
+ }
+
+ .mx_SSOButton_mini {
+ box-sizing: border-box;
+ width: 50px; // 48px + 1px border on all sides
+ height: 50px; // 48px + 1px border on all sides
+ min-width: 50px; // prevent crushing by the flexbox
+ padding: 12px;
+
+ > img {
+ left: 12px;
+ top: 12px;
+ }
+
+ & + .mx_SSOButton_mini {
+ margin-left: 16px;
+ }
+ }
+}
diff --git a/res/css/views/elements/_ServerPicker.scss b/res/css/views/elements/_ServerPicker.scss
new file mode 100644
index 0000000000..188eb5d655
--- /dev/null
+++ b/res/css/views/elements/_ServerPicker.scss
@@ -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: $authpage-primary-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;
+ }
+}
diff --git a/res/css/views/messages/_CreateEvent.scss b/res/css/views/messages/_CreateEvent.scss
index d45645863f..cb2bf841dd 100644
--- a/res/css/views/messages/_CreateEvent.scss
+++ b/res/css/views/messages/_CreateEvent.scss
@@ -1,5 +1,5 @@
/*
-Copyright 2018 New Vector Ltd
+Copyright 2018, 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,25 +15,8 @@ limitations under the License.
*/
.mx_CreateEvent {
- background-color: $info-plinth-bg-color;
- padding-left: 20px;
- padding-right: 20px;
- padding-top: 10px;
- padding-bottom: 10px;
-}
-
-.mx_CreateEvent_image {
- float: left;
- margin-right: 20px;
- width: 72px;
- height: 34px;
-
- background-color: $primary-fg-color;
- mask: url('$(res)/img/room-continuation.svg');
- mask-repeat: no-repeat;
- mask-position: center;
-}
-
-.mx_CreateEvent_header {
- font-weight: bold;
+ &::before {
+ background-color: $composer-e2e-icon-color;
+ mask-image: url('$(res)/img/element-icons/chat-bubbles.svg');
+ }
}
diff --git a/res/css/views/messages/_EventTileBubble.scss b/res/css/views/messages/_EventTileBubble.scss
new file mode 100644
index 0000000000..e0f5d521cb
--- /dev/null
+++ b/res/css/views/messages/_EventTileBubble.scss
@@ -0,0 +1,60 @@
+/*
+Copyright 2019, 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_EventTileBubble {
+ background-color: $dark-panel-bg-color;
+ padding: 10px;
+ border-radius: 8px;
+ margin: 10px auto;
+ max-width: 75%;
+ box-sizing: border-box;
+ display: grid;
+ grid-template-columns: 24px minmax(0, 1fr) min-content;
+
+ &::before, &::after {
+ position: relative;
+ 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;
+ margin-top: 4px;
+ }
+
+ .mx_EventTileBubble_title, .mx_EventTileBubble_subtitle {
+ overflow-wrap: break-word;
+ }
+
+ .mx_EventTileBubble_title {
+ font-weight: 600;
+ font-size: $font-15px;
+ grid-column: 2;
+ grid-row: 1;
+ }
+
+ .mx_EventTileBubble_subtitle {
+ font-size: $font-12px;
+ grid-column: 2;
+ grid-row: 2;
+ }
+}
diff --git a/res/css/views/messages/_MJitsiWidgetEvent.scss b/res/css/views/messages/_MJitsiWidgetEvent.scss
index 3e51e89744..bea8651543 100644
--- a/res/css/views/messages/_MJitsiWidgetEvent.scss
+++ b/res/css/views/messages/_MJitsiWidgetEvent.scss
@@ -15,41 +15,8 @@ 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;
- }
}
diff --git a/res/css/views/messages/_MVideoBody.scss b/res/css/views/messages/_MVideoBody.scss
index 3b05c53f34..2be15447f7 100644
--- a/res/css/views/messages/_MVideoBody.scss
+++ b/res/css/views/messages/_MVideoBody.scss
@@ -17,6 +17,7 @@ limitations under the License.
span.mx_MVideoBody {
video.mx_MVideoBody {
max-width: 100%;
- height: auto;
+ max-height: 300px;
+ border-radius: 4px;
}
}
diff --git a/res/css/views/messages/_RedactedBody.scss b/res/css/views/messages/_RedactedBody.scss
index e4ab0c0835..600ac0c6b7 100644
--- a/res/css/views/messages/_RedactedBody.scss
+++ b/res/css/views/messages/_RedactedBody.scss
@@ -30,7 +30,7 @@ limitations under the License.
mask-size: contain;
content: '';
position: absolute;
- top: 2px;
+ top: 1px;
left: 0;
}
}
diff --git a/res/css/views/messages/_ViewSourceEvent.scss b/res/css/views/messages/_ViewSourceEvent.scss
index 076932ee97..66825030e0 100644
--- a/res/css/views/messages/_ViewSourceEvent.scss
+++ b/res/css/views/messages/_ViewSourceEvent.scss
@@ -35,13 +35,13 @@ limitations under the License.
mask-size: auto 12px;
visibility: hidden;
background-color: $accent-color;
- mask-image: url('$(res)/img/feather-customised/widget/maximise.svg');
+ mask-image: url('$(res)/img/feather-customised/maximise.svg');
}
&.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle {
mask-position: 0 bottom;
margin-bottom: 7px;
- mask-image: url('$(res)/img/feather-customised/widget/minimise.svg');
+ mask-image: url('$(res)/img/feather-customised/minimise.svg');
}
&:hover .mx_ViewSourceEvent_toggle {
diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss
index 09c78ae5b4..4faa4b594f 100644
--- a/res/css/views/messages/_common_CryptoEvent.scss
+++ b/res/css/views/messages/_common_CryptoEvent.scss
@@ -15,28 +15,6 @@ limitations under the License.
*/
.mx_cryptoEvent {
- display: grid;
- grid-template-columns: 24px minmax(0, 1fr) min-content;
-
- &.mx_cryptoEvent_icon::before,
- &.mx_cryptoEvent_icon::after {
- 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;
- mask-image: url('$(res)/img/e2e/normal.svg');
- background-color: $composer-e2e-icon-color;
- margin-top: 4px;
- }
-
// white infill for the transparency
&.mx_cryptoEvent_icon::before {
background-color: #ffffff;
@@ -46,6 +24,11 @@ limitations under the License.
mask-size: 90%;
}
+ &.mx_cryptoEvent_icon::after {
+ mask-image: url('$(res)/img/e2e/normal.svg');
+ background-color: $composer-e2e-icon-color;
+ }
+
&.mx_cryptoEvent_icon_verified::after {
mask-image: url("$(res)/img/e2e/verified.svg");
background-color: $accent-color;
@@ -56,25 +39,6 @@ limitations under the License.
background-color: $notice-primary-color;
}
- .mx_cryptoEvent_title, .mx_cryptoEvent_subtitle, .mx_cryptoEvent_state {
- overflow-wrap: break-word;
- }
-
- .mx_cryptoEvent_title {
- font-weight: 600;
- font-size: $font-15px;
- grid-column: 2;
- grid-row: 1;
- }
-
- .mx_cryptoEvent_subtitle {
- grid-column: 2;
- grid-row: 2;
- }
-
- .mx_cryptoEvent_state, .mx_cryptoEvent_subtitle {
- font-size: $font-12px;
- }
.mx_cryptoEvent_state, .mx_cryptoEvent_buttons {
grid-column: 3;
@@ -92,5 +56,7 @@ limitations under the License.
margin: auto 0;
text-align: center;
color: $notice-secondary-color;
+ overflow-wrap: break-word;
+ font-size: $font-12px;
}
}
diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss
index 26f846fe0a..9a5a59bda8 100644
--- a/res/css/views/right_panel/_BaseCard.scss
+++ b/res/css/views/right_panel/_BaseCard.scss
@@ -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 {
@@ -129,6 +128,13 @@ limitations under the License.
mask-size: 20px;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
+
+ &.mx_AccessibleButton_disabled {
+ padding-right: 12px;
+ &::after {
+ content: unset;
+ }
+ }
}
}
diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss
index 0031d3a64c..36882f4e8b 100644
--- a/res/css/views/right_panel/_RoomSummaryCard.scss
+++ b/res/css/views/right_panel/_RoomSummaryCard.scss
@@ -110,28 +110,107 @@ limitations under the License.
.mx_RoomSummaryCard_appsGroup {
.mx_RoomSummaryCard_Button {
- padding-left: 12px;
+ // this button is special so we have to override some of the original styling
+ // as we will be applying it in its children
+ padding: 0;
+ height: auto;
color: $tertiary-fg-color;
- span {
- color: $primary-fg-color;
+ .mx_RoomSummaryCard_icon_app {
+ padding: 10px 48px 10px 12px; // based on typical mx_RoomSummaryCard_Button padding
+ text-overflow: ellipsis;
+ overflow: hidden;
+
+ .mx_BaseAvatar_image {
+ vertical-align: top;
+ margin-right: 12px;
+ }
+
+ span {
+ color: $primary-fg-color;
+ }
}
- img {
- vertical-align: top;
- margin-right: 12px;
- border-radius: 4px;
+ .mx_RoomSummaryCard_app_pinToggle,
+ .mx_RoomSummaryCard_app_options {
+ position: absolute;
+ top: 0;
+ height: 100%; // to give bigger interactive zone
+ width: 24px;
+ padding: 12px 4px;
+ box-sizing: border-box;
+ min-width: 24px; // prevent flexbox crushing
+
+ &:hover {
+ &::after {
+ content: '';
+ position: absolute;
+ height: 24px;
+ width: 24px;
+ top: 8px; // equal to padding-top of parent
+ left: 0;
+ border-radius: 12px;
+ background-color: rgba(141, 151, 165, 0.1);
+ }
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ height: 16px;
+ width: 16px;
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: 16px;
+ background-color: $icon-button-color;
+ }
+ }
+
+ .mx_RoomSummaryCard_app_pinToggle {
+ right: 24px;
+
+ &::before {
+ mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
+ }
+ }
+
+ .mx_RoomSummaryCard_app_options {
+ right: 48px;
+ display: none;
+
+ &::before {
+ mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
+ }
+ }
+
+ &.mx_RoomSummaryCard_Button_pinned {
+ &::after {
+ opacity: 0.2;
+ }
+
+ .mx_RoomSummaryCard_app_pinToggle::before {
+ background-color: $accent-color;
+ }
+ }
+
+ &:hover {
+ .mx_RoomSummaryCard_icon_app {
+ padding-right: 72px;
+ }
+
+ .mx_RoomSummaryCard_app_options {
+ display: unset;
+ }
}
&::before {
content: unset;
}
- }
- .mx_RoomSummaryCard_icon_app_pinned::after {
- mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
- background-color: $accent-color;
- transform: unset;
+ &::after {
+ top: 8px; // re-align based on the height change
+ pointer-events: none; // pass through to the real button
+ }
}
}
diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index f20c9b7868..87420ae4e7 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -173,26 +173,12 @@ limitations under the License.
margin: 6px 0;
- .mx_IconButton, .mx_Spinner {
- margin-left: 20px;
- width: 16px;
- height: 16px;
-
- &::before {
- mask-size: 80%;
- }
- }
-
.mx_UserInfo_roleDescription {
display: flex;
justify-content: center;
align-items: center;
// try to make it the same height as the dropdown
margin: 11px 0 12px 0;
-
- .mx_IconButton {
- margin-left: 6px;
- }
}
.mx_Field {
diff --git a/res/css/views/right_panel/_WidgetCard.scss b/res/css/views/right_panel/_WidgetCard.scss
index 315fd5213c..a90e744a5a 100644
--- a/res/css/views/right_panel/_WidgetCard.scss
+++ b/res/css/views/right_panel/_WidgetCard.scss
@@ -24,34 +24,35 @@ limitations under the License.
border: 0;
}
- &.mx_WidgetCard_noEdit {
- .mx_AccessibleButton_kind_secondary {
- margin: 0 12px;
+ .mx_BaseCard_header {
+ display: inline-flex;
- &:first-child {
- // expand the Pin to room primary action
- flex-grow: 1;
- }
+ & > h2 {
+ margin-right: 0;
+ flex-grow: 1;
}
- }
- .mx_WidgetCard_optionsButton {
- position: relative;
- height: 18px;
- width: 26px;
-
- &::before {
- content: "";
- position: absolute;
- width: 20px;
+ .mx_WidgetCard_optionsButton {
+ position: relative;
+ margin-right: 44px;
height: 20px;
- top: 6px;
- left: 20px;
- mask-repeat: no-repeat;
- mask-position: center;
- mask-size: contain;
- mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
- background-color: $secondary-fg-color;
+ width: 20px;
+ min-width: 20px; // prevent crushing by the flexbox
+ padding: 0;
+
+ &::before {
+ content: "";
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ top: 0;
+ left: 4px;
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: contain;
+ mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
+ background-color: $secondary-fg-color;
+ }
}
}
}
diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index 244e88ca3e..492ed95973 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -24,34 +24,69 @@ $MiniAppTileHeight: 200px;
flex-direction: column;
overflow: hidden;
+ .mx_AppsContainer_resizerHandleContainer {
+ width: 100%;
+ height: 10px;
+ margin-top: -3px; // move it up so the interactions are slightly more comfortable
+ display: block;
+ position: relative;
+ }
+
.mx_AppsContainer_resizerHandle {
cursor: ns-resize;
- border-radius: 3px;
- // Override styles from library
- width: unset !important;
- height: 4px !important;
+ // Override styles from library, making the whole area the target area
+ width: 100% !important;
+ height: 100% !important;
// This is positioned directly below frame
position: absolute;
- bottom: -8px !important; // override from library
+ bottom: 0 !important; // override from library
- // Together, these make the bar 64px wide
- // These are also overridden from the library
- left: calc(50% - 32px) !important;
- right: calc(50% - 32px) !important;
+ // We then render the pill handle in an ::after to keep it in the handle's
+ // area without being a massive line across the screen
+ &::after {
+ content: '';
+ position: absolute;
+ border-radius: 3px;
+
+ // The combination of these two should make the pill 4px high
+ top: 6px;
+ bottom: 0;
+
+ // Together, these make the bar 64px wide
+ // These are also overridden from the library
+ left: calc(50% - 32px);
+ right: calc(50% - 32px);
+ }
}
&:hover {
- .mx_AppsContainer_resizerHandle {
+ .mx_AppsContainer_resizerHandle::after {
opacity: 0.8;
background: $primary-fg-color;
}
+
+ .mx_ResizeHandle_horizontal::before {
+ position: absolute;
+ left: 3px;
+ top: 50%;
+ transform: translate(0, -50%);
+
+ height: 64px; // to match width of the ones on roomlist
+ width: 4px;
+ border-radius: 4px;
+
+ content: '';
+
+ background-color: $primary-fg-color;
+ opacity: 0.8;
+ }
}
}
-.mx_AppsDrawer_hidden {
- display: none;
+.mx_AppsContainer_resizer {
+ margin-bottom: 8px;
}
.mx_AppsContainer {
@@ -60,63 +95,74 @@ $MiniAppTileHeight: 200px;
align-items: stretch;
justify-content: center;
height: 100%;
- margin-bottom: 8px;
-}
+ width: 100%;
+ flex: 1;
+ min-height: 0;
-.mx_AppsDrawer_minimised .mx_AppsContainer {
- // override the re-resizable inline styles
- height: inherit !important;
- min-height: inherit !important;
-}
+ .mx_AppTile:first-of-type {
+ border-left-width: 8px;
+ border-radius: 10px 0 0 10px;
+ }
+ .mx_AppTile:last-of-type {
+ border-right-width: 8px;
+ border-radius: 0 10px 10px 0;
+ }
-.mx_AddWidget_button {
- order: 2;
- cursor: pointer;
- padding: 0;
- margin: -3px auto 5px 0;
- color: $accent-color;
- font-size: $font-12px;
-}
+ .mx_ResizeHandle_horizontal {
+ position: relative;
-.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;
- display: flex;
- flex-direction: column;
-
- & + .mx_AppTile {
- margin-left: 5px;
+ > div {
+ width: 0;
+ }
}
}
+// TODO this should be 300px but that's too large
+$MinWidth: 240px;
+
+.mx_AppsDrawer_2apps .mx_AppTile {
+ width: 50%;
+
+ &:nth-child(3) {
+ flex-grow: 1;
+ width: 0 !important;
+ min-width: $MinWidth !important;
+ }
+}
+.mx_AppsDrawer_3apps .mx_AppTile {
+ width: 33%;
+
+ &:nth-child(3) {
+ flex-grow: 1;
+ width: 0 !important;
+ min-width: $MinWidth !important;
+ }
+}
+
+.mx_AppTile {
+ width: 50%;
+ min-width: $MinWidth;
+ border: 8px solid $widget-menu-bar-bg-color;
+ border-left-width: 5px;
+ border-right-width: 5px;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+ background-color: $widget-menu-bar-bg-color;
+}
+
.mx_AppTileFullWidth {
- max-width: 960px;
- width: 100%;
+ width: 100% !important; // to override the inline style set by the resizer
margin: 0;
padding: 0;
border: 5px solid $widget-menu-bar-bg-color;
border-radius: 8px;
display: flex;
flex-direction: column;
+ background-color: $widget-menu-bar-bg-color;
}
.mx_AppTile_mini {
- max-width: 960px;
width: 100%;
margin: 0;
padding: 0;
@@ -125,12 +171,6 @@ $MiniAppTileHeight: 200px;
height: $MiniAppTileHeight;
}
-.mx_AppTile.mx_AppTile_minimised,
-.mx_AppTileFullWidth.mx_AppTile_minimised,
-.mx_AppTile_mini.mx_AppTile_minimised {
- height: 14px;
-}
-
.mx_AppTile .mx_AppTile_persistedWrapper,
.mx_AppTileFullWidth .mx_AppTile_persistedWrapper,
.mx_AppTile_mini .mx_AppTile_persistedWrapper {
@@ -150,19 +190,20 @@ $MiniAppTileHeight: 200px;
flex-direction: row;
align-items: center;
justify-content: space-between;
- cursor: pointer;
width: 100%;
-}
-
-.mx_AppTileMenuBar_expanded {
- padding-bottom: 5px;
+ padding-top: 2px;
+ padding-bottom: 8px;
}
.mx_AppTileMenuBarTitle {
- display: flex;
- flex-direction: row;
- align-items: center;
- pointer-events: none;
+ line-height: 20px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ .mx_WidgetAvatar {
+ margin-right: 12px;
+ }
}
.mx_AppTileMenuBarTitle > :last-child {
@@ -186,37 +227,20 @@ $MiniAppTileHeight: 200px;
margin: 0 3px;
}
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_minimise {
- mask-image: url('$(res)/img/feather-customised/widget/minimise.svg');
- background-color: $accent-color;
-}
-
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_maximise {
- mask-image: url('$(res)/img/feather-customised/widget/maximise.svg');
- background-color: $accent-color;
-}
-
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
mask-image: url('$(res)/img/feather-customised/widget/external-link.svg');
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu {
- mask-image: url('$(res)/img/icon_context.svg');
-}
-
-.mx_AppTileMenuBarWidgetDelete {
- filter: none;
-}
-
-.mx_AppTileMenuBarWidget:hover {
- border: 1px solid $primary-fg-color;
- border-radius: 2px;
+ mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
}
.mx_AppTileBody {
height: 100%;
width: 100%;
overflow: hidden;
+ border-radius: 8px;
+ background-color: $widget-body-bg-color;
}
.mx_AppTileBody_mini {
@@ -249,75 +273,8 @@ $MiniAppTileHeight: 200px;
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;
display: flex;
height: 100%;
flex-direction: column;
@@ -382,6 +339,10 @@ form.mx_Custom_Widget_Form div {
font-weight: bold;
position: relative;
height: 100%;
+
+ // match bg of border so that the cut corners have the right fill
+ background-color: $widget-body-bg-color !important;
+ border-radius: 8px;
}
.mx_AppLoading .mx_Spinner {
@@ -409,10 +370,6 @@ form.mx_Custom_Widget_Form div {
display: none;
}
-.mx_AppsDrawer_minimised .mx_AppsContainer_resizerHandle {
- display: none;
-}
-
/* Avoid apptile iframes capturing mouse event focus when resizing */
.mx_AppsDrawer_resizing iframe {
pointer-events: none;
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 3b9a491db5..42df3211de 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -25,17 +25,8 @@ $left-gutter: 64px;
position: relative;
}
-.mx_EventTile_bubble {
- background-color: $dark-panel-bg-color;
- padding: 10px;
- border-radius: 5px;
- margin: 10px auto;
- max-width: 75%;
- box-sizing: border-box;
-}
-
.mx_EventTile.mx_EventTile_info {
- padding-top: 0px;
+ padding-top: 1px;
}
.mx_EventTile_avatar {
@@ -46,7 +37,7 @@ $left-gutter: 64px;
}
.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
- top: $font-8px;
+ top: $font-6px;
left: $left-gutter;
}
@@ -83,7 +74,6 @@ $left-gutter: 64px;
margin-left: 5px;
display: inline-block;
vertical-align: top;
- height: 16px;
overflow: hidden;
user-select: none;
@@ -131,9 +121,10 @@ $left-gutter: 64px;
grid-template-columns: 1fr 100px;
.mx_EventTile_line {
- margin-right: 0px;
+ margin-right: 0;
grid-column: 1 / 3;
- padding: 0;
+ // override default padding of mx_EventTile_line so that we can be centered
+ padding: 0 !important;
}
.mx_EventTile_msgOption {
@@ -429,15 +420,15 @@ $left-gutter: 64px;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
- border-left: $e2e-verified-color 4px solid;
+ border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid;
}
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
- border-left: $e2e-unverified-color 4px solid;
+ border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid;
}
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
- border-left: $e2e-unknown-color 4px solid;
+ border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid;
}
.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
@@ -455,8 +446,7 @@ $left-gutter: 64px;
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
- left: 3px;
- width: auto;
+ width: $MessageTimestamp_width_hover;
}
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
@@ -501,7 +491,6 @@ $left-gutter: 64px;
// https://github.com/vector-im/vector-web/issues/754
overflow-x: overlay;
overflow-y: visible;
- max-height: 30vh;
}
code {
@@ -510,6 +499,22 @@ $left-gutter: 64px;
}
}
+.mx_EventTile_lineNumbers {
+ float: left;
+ margin: 0 0.5em 0 -1.5em;
+ color: gray;
+}
+
+.mx_EventTile_lineNumber {
+ text-align: right;
+ display: block;
+ padding-left: 1em;
+}
+
+.mx_EventTile_collapsedCodeBlock {
+ max-height: 30vh;
+}
+
.mx_EventTile:hover .mx_EventTile_body pre,
.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre {
border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
@@ -521,21 +526,42 @@ $left-gutter: 64px;
}
// Inserted adjacent to blocks, (See TextualBody)
-.mx_EventTile_copyButton {
+.mx_EventTile_button {
position: absolute;
display: inline-block;
visibility: hidden;
cursor: pointer;
top: 6px;
- right: 6px;
+ right: 12px;
width: 19px;
height: 19px;
- mask-image: url($copy-button-url);
background-color: $message-action-bar-fg-color;
}
+.mx_EventTile_buttonBottom {
+ top: 31px;
+}
+.mx_EventTile_copyButton {
+ mask-image: url($copy-button-url);
+}
+.mx_EventTile_collapseButton {
+ mask-size: 75%;
+ mask-position: center;
+ mask-repeat: no-repeat;
+ mask-image: url($collapse-button-url);
+}
+.mx_EventTile_expandButton {
+ mask-size: 75%;
+ mask-position: center;
+ mask-repeat: no-repeat;
+ mask-image: url($expand-button-url);
+}
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
-.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton {
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,
+.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton,
+.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton {
visibility: visible;
}
diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss
index 2b447be44a..543e6ed685 100644
--- a/res/css/views/rooms/_GroupLayout.scss
+++ b/res/css/views/rooms/_GroupLayout.scss
@@ -20,7 +20,7 @@ $left-gutter: 64px;
.mx_GroupLayout {
.mx_EventTile {
> .mx_SenderProfile {
- line-height: $font-17px;
+ line-height: $font-20px;
padding-left: $left-gutter;
}
@@ -34,11 +34,11 @@ $left-gutter: 64px;
.mx_MessageTimestamp {
position: absolute;
- width: 46px; /* 8 + 30 (avatar) + 8 */
+ width: $MessageTimestamp_width;
}
.mx_EventTile_line, .mx_EventTile_reply {
- padding-top: 3px;
+ padding-top: 1px;
padding-bottom: 3px;
line-height: $font-22px;
}
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 958d718b11..792c2f1f58 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -186,6 +186,7 @@ $irc-line-height: $font-18px;
overflow: hidden;
text-overflow: ellipsis;
min-width: var(--name-width);
+ text-align: end;
}
}
}
@@ -206,6 +207,17 @@ $irc-line-height: $font-18px;
width: unset;
max-width: var(--name-width);
}
+
+ .mx_SenderProfile_hover {
+ background: transparent;
+
+ > span {
+ > .mx_SenderProfile_name,
+ > .mx_SenderProfile_aux {
+ min-width: inherit;
+ }
+ }
+ }
}
.mx_ProfileResizer {
diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss
index 022cf3ed28..5310bd3bbb 100644
--- a/res/css/views/rooms/_LinkPreviewWidget.scss
+++ b/res/css/views/rooms/_LinkPreviewWidget.scss
@@ -19,6 +19,8 @@ limitations under the License.
margin-right: 15px;
margin-bottom: 15px;
display: flex;
+ flex-direction: column;
+ max-width: 360px;
border-left: 4px solid $preview-widget-bar-color;
color: $preview-widget-fg-color;
}
@@ -55,6 +57,9 @@ limitations under the License.
cursor: pointer;
width: 18px;
height: 18px;
+ padding: 0px 5px 5px 5px;
+ margin-left: auto;
+ margin-right: 0px;
img {
flex: 0 0 40px;
diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss
index fb082843f1..182c280217 100644
--- a/res/css/views/rooms/_MemberInfo.scss
+++ b/res/css/views/rooms/_MemberInfo.scss
@@ -70,7 +70,7 @@ limitations under the License.
}
.mx_MemberInfo_avatar {
- background: $tagpanel-bg-color;
+ background: $groupFilterPanel-bg-color;
margin-bottom: 16px;
}
diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss
index 2366667c95..1e3506e371 100644
--- a/res/css/views/rooms/_MemberList.scss
+++ b/res/css/views/rooms/_MemberList.scss
@@ -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;
}
@@ -96,17 +95,27 @@ 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 {
- 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');
}
diff --git a/res/css/views/rooms/_NewRoomIntro.scss b/res/css/views/rooms/_NewRoomIntro.scss
new file mode 100644
index 0000000000..4322ba341c
--- /dev/null
+++ b/res/css/views/rooms/_NewRoomIntro.scss
@@ -0,0 +1,67 @@
+/*
+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_NewRoomIntro {
+ margin: 40px 0 48px 64px;
+
+ .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover) {
+ &::before, &::after {
+ content: unset;
+ }
+ }
+
+ .mx_AccessibleButton_kind_link {
+ padding: 0;
+ font-size: inherit;
+ }
+
+ .mx_NewRoomIntro_buttons {
+ margin-top: 28px;
+
+ .mx_AccessibleButton {
+ line-height: $font-24px;
+
+ &::before {
+ content: '';
+ display: inline-block;
+ background-color: $button-fg-color;
+ mask-position: center;
+ mask-repeat: no-repeat;
+ mask-size: 20px;
+ width: 20px;
+ height: 20px;
+ margin-right: 5px;
+ vertical-align: text-bottom;
+ }
+ }
+
+ .mx_NewRoomIntro_inviteButton::before {
+ mask-image: url('$(res)/img/element-icons/room/invite.svg');
+ }
+ }
+
+ > h2 {
+ margin-top: 24px;
+ font-size: $font-24px;
+ font-weight: 600;
+ }
+
+ > p {
+ margin: 0;
+ font-size: $font-15px;
+ color: $secondary-fg-color;
+ }
+}
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index d240877507..a23a44906f 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -241,6 +241,13 @@ limitations under the License.
width: 26px;
}
+.mx_RoomHeader_appsButton::before {
+ mask-image: url('$(res)/img/element-icons/room/apps.svg');
+}
+.mx_RoomHeader_appsButton_highlight::before {
+ background-color: $accent-color;
+}
+
.mx_RoomHeader_searchButton::before {
mask-image: url('$(res)/img/element-icons/room/search-inset.svg');
}
diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss
index 78e7307bc0..66e1b827d0 100644
--- a/res/css/views/rooms/_RoomList.scss
+++ b/res/css/views/rooms/_RoomList.scss
@@ -24,6 +24,9 @@ limitations under the License.
.mx_RoomList_iconExplore::before {
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
}
+.mx_RoomList_iconDialpad::before {
+ mask-image: url('$(res)/img/element-icons/roomlist/dialpad.svg');
+}
.mx_RoomList_explorePrompt {
margin: 4px 12px 4px;
@@ -33,7 +36,6 @@ limitations under the License.
div:first-child {
font-weight: $font-semi-bold;
- margin-bottom: 8px;
}
.mx_AccessibleButton {
@@ -41,6 +43,9 @@ limitations under the License.
position: relative;
padding: 0 0 0 24px;
font-size: inherit;
+ margin-top: 8px;
+ display: block;
+ text-align: start;
&::before {
content: '';
@@ -53,6 +58,13 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
+ }
+
+ &.mx_RoomList_explorePrompt_startChat::before {
+ mask-image: url('$(res)/img/element-icons/feedback.svg');
+ }
+
+ &.mx_RoomList_explorePrompt_explore::before {
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
}
}
diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss
index 543940fb78..92a475694e 100644
--- a/res/css/views/rooms/_RoomSublist.scss
+++ b/res/css/views/rooms/_RoomSublist.scss
@@ -59,10 +59,6 @@ limitations under the License.
width: calc(100% - 22px);
}
- &.mx_RoomSublist_headerContainer_stickyBottom {
- bottom: 0;
- }
-
// We don't have a top style because the top is dependent on the room list header's
// height, and is therefore calculated in JS.
// The class, mx_RoomSublist_headerContainer_stickyTop, is applied though.
@@ -201,6 +197,9 @@ limitations under the License.
.mx_RoomSublist_resizerHandles {
flex: 0 0 4px;
+ display: flex;
+ justify-content: center;
+ width: 100%;
}
// Class name comes from the ResizableBox component
@@ -211,17 +210,12 @@ limitations under the License.
border-radius: 3px;
// Override styles from library
- width: unset !important;
+ max-width: 64px;
height: 4px !important; // Update RESIZE_HANDLE_HEIGHT if this changes
// This is positioned directly below the 'show more' button.
- position: absolute;
+ position: relative !important;
bottom: 0 !important; // override from library
-
- // Together, these make the bar 64px wide
- // These are also overridden from the library
- left: calc(50% - 32px) !important;
- right: calc(50% - 32px) !important;
}
&:hover, &.mx_RoomSublist_hasMenuOpen {
@@ -387,3 +381,22 @@ limitations under the License.
.mx_RoomSublist_addRoomTooltip {
margin-top: -3px;
}
+
+.mx_RoomSublist_skeletonUI {
+ position: relative;
+ margin-left: 4px;
+ height: 288px;
+
+ &::before {
+ background: $roomsublist-skeleton-ui-bg;
+
+ width: 100%;
+ height: 100%;
+
+ content: '';
+ position: absolute;
+ mask-repeat: repeat-y;
+ mask-size: auto 48px;
+ mask-image: url('$(res)/img/element-icons/roomlist/skeleton-ui.svg');
+ }
+}
diff --git a/res/css/views/rooms/_Stickers.scss b/res/css/views/rooms/_Stickers.scss
index d99276b70a..da86797f42 100644
--- a/res/css/views/rooms/_Stickers.scss
+++ b/res/css/views/rooms/_Stickers.scss
@@ -16,9 +16,13 @@
border-bottom: none;
}
+ .mx_AppTileMenuBar {
+ padding: 0;
+ }
+
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
}
}
diff --git a/res/css/views/settings/_AvatarSetting.scss b/res/css/views/settings/_AvatarSetting.scss
index 52a0ee95d7..a350605ab1 100644
--- a/res/css/views/settings/_AvatarSetting.scss
+++ b/res/css/views/settings/_AvatarSetting.scss
@@ -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;
}
diff --git a/res/css/views/settings/_Notifications.scss b/res/css/views/settings/_Notifications.scss
index e6d09b9a2a..77a7bc5b68 100644
--- a/res/css/views/settings/_Notifications.scss
+++ b/res/css/views/settings/_Notifications.scss
@@ -64,6 +64,7 @@ limitations under the License.
.mx_UserNotifSettings_notifTable {
display: table;
+ position: relative;
}
.mx_UserNotifSettings_notifTable .mx_Spinner {
diff --git a/res/css/views/settings/_ProfileSettings.scss b/res/css/views/settings/_ProfileSettings.scss
index 732cbedf02..4cbcb8e708 100644
--- a/res/css/views/settings/_ProfileSettings.scss
+++ b/res/css/views/settings/_ProfileSettings.scss
@@ -14,6 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+.mx_ProfileSettings_controls_topic {
+ & > textarea {
+ resize: vertical;
+ }
+}
+
.mx_ProfileSettings_profile {
display: flex;
}
diff --git a/res/css/views/toasts/_AnalyticsToast.scss b/res/css/views/toasts/_AnalyticsToast.scss
new file mode 100644
index 0000000000..fdbe7f1c76
--- /dev/null
+++ b/res/css/views/toasts/_AnalyticsToast.scss
@@ -0,0 +1,27 @@
+/*
+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_AnalyticsToast {
+ .mx_AccessibleButton_kind_danger {
+ background: none;
+ color: $accent-color;
+ }
+
+ .mx_AccessibleButton_kind_primary {
+ background: $accent-color;
+ color: #ffffff;
+ }
+}
diff --git a/res/css/views/voip/_CallContainer.scss b/res/css/views/voip/_CallContainer.scss
index 650302b7e1..8262075559 100644
--- a/res/css/views/voip/_CallContainer.scss
+++ b/res/css/views/voip/_CallContainer.scss
@@ -18,10 +18,7 @@ limitations under the License.
position: absolute;
right: 20px;
bottom: 72px;
- border-radius: 8px;
- overflow: hidden;
z-index: 100;
- box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
// Disable pointer events for Jitsi widgets to function. Direct
// calls have their own cursor and behaviour, but we need to make
@@ -33,11 +30,11 @@ limitations under the License.
pointer-events: initial; // restore pointer events so the user can leave/interact
cursor: pointer;
- .mx_VideoView {
+ .mx_CallView_video {
width: 350px;
}
- .mx_VideoView_localVideoFeed {
+ .mx_VideoFeed_local {
border-radius: 8px;
overflow: hidden;
}
@@ -49,8 +46,10 @@ limitations under the License.
.mx_IncomingCallBox {
min-width: 250px;
- background-color: $primary-bg-color;
+ background-color: $voipcall-plinth-color;
padding: 8px;
+ box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
+ border-radius: 8px;
pointer-events: initial; // restore pointer events so the user can accept/decline
cursor: pointer;
@@ -59,7 +58,7 @@ limitations under the License.
display: flex;
direction: row;
- img {
+ img, .mx_BaseAvatar_initial {
margin: 8px;
}
diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index f6f3d40308..7eb329594a 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -15,80 +15,357 @@ 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;
- padding: 6px;
- font-weight: bold;
-
+.mx_CallView {
border-radius: 8px;
- min-width: 200px;
+ 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
+ pointer-events: initial;
+}
- display: flex;
- align-items: center;
+.mx_CallView_large {
+ padding-bottom: 10px;
+ margin: 5px 5px 5px 18px;
- img {
- margin: 4px;
- margin-right: 10px;
- }
-
- > div {
- display: flex;
- flex-direction: column;
- // Hacky vertical align
- padding-top: 3px;
- }
-
- > div > p,
- > div > h1 {
- padding: 0;
- margin: 0;
- font-size: $font-13px;
- line-height: $font-15px;
- }
-
- > div > p {
- font-weight: bold;
- }
-
- > * {
- flex-grow: 0;
- flex-shrink: 0;
+ .mx_CallView_voice {
+ height: 360px;
}
}
-.mx_CallView_hangup {
+.mx_CallView_pip {
+ width: 320px;
+ padding-bottom: 8px;
+ margin-top: 10px;
+ box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
+ border-radius: 8px;
+
+ .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;
+ }
+}
+
+.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);
+ }
+}
- right: 8px;
- bottom: 10px;
+.mx_CallView_video_holdContent {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-weight: bold;
+ color: $accent-fg-color;
+ text-align: center;
- height: 35px;
- width: 35px;
+ &::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;
+ }
+}
- border-radius: 35px;
+.mx_CallView_header {
+ height: 44px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: left;
+}
- background-color: $notice-primary-color;
+.mx_CallView_header_callType {
+ font-size: 1.2rem;
+ font-weight: bold;
+ vertical-align: middle;
+}
- z-index: 101;
+.mx_CallView_header_secondaryCallInfo {
+ &::before {
+ content: '·';
+ margin-left: 6px;
+ margin-right: 6px;
+ }
+}
+.mx_CallView_header_controls {
+ margin-left: auto;
+}
+
+.mx_CallView_header_button {
+ display: inline-block;
+ vertical-align: middle;
cursor: pointer;
&::before {
content: '';
- position: absolute;
-
+ display: inline-block;
height: 20px;
width: 20px;
-
- top: 6.5px;
- left: 7.5px;
-
- mask: url('$(res)/img/hangup.svg');
+ vertical-align: middle;
+ background-color: $secondary-fg-color;
+ mask-repeat: no-repeat;
mask-size: contain;
- background-size: contain;
-
- background-color: $primary-fg-color;
+ mask-position: center;
}
}
+
+.mx_CallView_header_button_fullscreen {
+ &::before {
+ mask-image: url('$(res)/img/element-icons/call/fullscreen.svg');
+ }
+}
+
+.mx_CallView_header_button_expand {
+ &::before {
+ mask-image: url('$(res)/img/element-icons/call/expand.svg');
+ }
+}
+
+.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 {
+ display: inline-block;
+ margin-right: 6px;
+ height: 16px;
+ width: 16px;
+ vertical-align: middle;
+
+ &::before {
+ content: '';
+ display: inline-block;
+ vertical-align: top;
+
+ height: 16px;
+ width: 16px;
+ background-color: $warning-color;
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ mask-position: center;
+ mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
+ }
+}
+
+.mx_CallView_callControls {
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ bottom: 5px;
+ width: 100%;
+ opacity: 1;
+ transition: opacity 0.5s;
+}
+
+.mx_CallView_callControls_hidden {
+ opacity: 0.001; // opacity 0 can cause a re-layout
+ pointer-events: none;
+}
+
+.mx_CallView_callControls_button {
+ cursor: pointer;
+ margin-left: 8px;
+ margin-right: 8px;
+
+
+ &::before {
+ content: '';
+ display: inline-block;
+
+ height: 48px;
+ width: 48px;
+
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
+ }
+}
+
+.mx_CallView_callControls_dialpad {
+ margin-right: auto;
+ &::before {
+ background-image: url('$(res)/img/voip/dialpad.svg');
+ }
+}
+
+.mx_CallView_callControls_button_dialpad_hidden {
+ margin-right: auto;
+ cursor: initial;
+}
+
+.mx_CallView_callControls_button_micOn {
+ &::before {
+ background-image: url('$(res)/img/voip/mic-on.svg');
+ }
+}
+
+.mx_CallView_callControls_button_micOff {
+ &::before {
+ background-image: url('$(res)/img/voip/mic-off.svg');
+ }
+}
+
+.mx_CallView_callControls_button_vidOn {
+ &::before {
+ background-image: url('$(res)/img/voip/vid-on.svg');
+ }
+}
+
+.mx_CallView_callControls_button_vidOff {
+ &::before {
+ background-image: url('$(res)/img/voip/vid-off.svg');
+ }
+}
+
+.mx_CallView_callControls_button_hangup {
+ &::before {
+ background-image: url('$(res)/img/voip/hangup.svg');
+ }
+}
+
+.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;
+ position: absolute;
+}
diff --git a/res/css/views/voip/_DialPad.scss b/res/css/views/voip/_DialPad.scss
new file mode 100644
index 0000000000..0c7bff0ce8
--- /dev/null
+++ b/res/css/views/voip/_DialPad.scss
@@ -0,0 +1,62 @@
+/*
+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_DialPad {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 16px;
+}
+
+.mx_DialPad_button {
+ width: 40px;
+ height: 40px;
+ background-color: $theme-button-bg-color;
+ border-radius: 40px;
+ font-size: 18px;
+ font-weight: 600;
+ text-align: center;
+ vertical-align: middle;
+ line-height: 40px;
+}
+
+.mx_DialPad_deleteButton, .mx_DialPad_dialButton {
+ &::before {
+ content: '';
+ display: inline-block;
+ height: 40px;
+ width: 40px;
+ vertical-align: middle;
+ mask-repeat: no-repeat;
+ mask-size: 20px;
+ mask-position: center;
+ background-color: $primary-bg-color;
+ }
+}
+
+.mx_DialPad_deleteButton {
+ background-color: $notice-primary-color;
+ &::before {
+ mask-image: url('$(res)/img/element-icons/call/delete.svg');
+ mask-position: 9px; // delete icon is right-heavy so have to be slightly to the left to look centered
+ }
+}
+
+.mx_DialPad_dialButton {
+ background-color: $accent-color;
+ &::before {
+ mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
+ }
+}
diff --git a/res/css/views/voip/_DialPadContextMenu.scss b/res/css/views/voip/_DialPadContextMenu.scss
new file mode 100644
index 0000000000..520f51cf93
--- /dev/null
+++ b/res/css/views/voip/_DialPadContextMenu.scss
@@ -0,0 +1,47 @@
+/*
+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_DialPadContextMenu_header {
+ margin-top: 12px;
+ margin-left: 12px;
+ margin-right: 12px;
+}
+
+.mx_DialPadContextMenu_title {
+ color: $muted-fg-color;
+ font-size: 12px;
+ font-weight: 600;
+}
+
+.mx_DialPadContextMenu_dialled {
+ height: 1em;
+ font-size: 18px;
+ font-weight: 600;
+}
+
+.mx_DialPadContextMenu_dialPad {
+ margin: 16px;
+}
+
+.mx_DialPadContextMenu_horizSep {
+ position: relative;
+ &::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ border-bottom: 1px solid $input-darker-bg-color;
+ }
+}
diff --git a/res/css/views/voip/_DialPadModal.scss b/res/css/views/voip/_DialPadModal.scss
new file mode 100644
index 0000000000..f9d7673a38
--- /dev/null
+++ b/res/css/views/voip/_DialPadModal.scss
@@ -0,0 +1,74 @@
+/*
+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_Dialog_dialPadWrapper .mx_Dialog {
+ padding: 0px;
+}
+
+.mx_DialPadModal {
+ width: 192px;
+ height: 368px;
+}
+
+.mx_DialPadModal_header {
+ margin-top: 12px;
+ margin-left: 12px;
+ margin-right: 12px;
+}
+
+.mx_DialPadModal_title {
+ color: $muted-fg-color;
+ font-size: 12px;
+ font-weight: 600;
+}
+
+.mx_DialPadModal_cancel {
+ float: right;
+ mask: url('$(res)/img/feather-customised/cancel.svg');
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: cover;
+ width: 14px;
+ height: 14px;
+ background-color: $dialog-close-fg-color;
+ cursor: pointer;
+}
+
+.mx_DialPadModal_field {
+ border: none;
+ margin: 0px;
+}
+
+.mx_DialPadModal_field input {
+ font-size: 18px;
+ font-weight: 600;
+}
+
+.mx_DialPadModal_dialPad {
+ margin-left: 16px;
+ margin-right: 16px;
+ margin-top: 16px;
+}
+
+.mx_DialPadModal_horizSep {
+ position: relative;
+ &::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ border-bottom: 1px solid $input-darker-bg-color;
+ }
+}
diff --git a/res/css/views/voip/_VideoView.scss b/res/css/views/voip/_VideoFeed.scss
similarity index 63%
rename from res/css/views/voip/_VideoView.scss
rename to res/css/views/voip/_VideoFeed.scss
index feb60f4763..931410dba3 100644
--- a/res/css/views/voip/_VideoView.scss
+++ b/res/css/views/voip/_VideoFeed.scss
@@ -1,5 +1,5 @@
/*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015, 2016, 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.
@@ -14,36 +14,22 @@ 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 {
+.mx_VideoFeed_remote {
width: 100%;
background-color: #000;
z-index: 50;
}
-.mx_VideoView_localVideoFeed {
+.mx_VideoFeed_local {
width: 25%;
height: 25%;
position: absolute;
- left: 10px;
- bottom: 10px;
+ right: 10px;
+ top: 10px;
z-index: 100;
+ border-radius: 4px;
}
-.mx_VideoView_localVideoFeed video {
- width: auto;
- height: 100%;
-}
-
-.mx_VideoView_localVideoFeed.mx_VideoView_localVideoFeed_flipped video {
+.mx_VideoFeed_mirror {
transform: scale(-1, 1);
}
diff --git a/res/img/element-icons/brands/apple.svg b/res/img/element-icons/brands/apple.svg
new file mode 100644
index 0000000000..308c3c5d5a
--- /dev/null
+++ b/res/img/element-icons/brands/apple.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/element-icons/brands/element.svg b/res/img/element-icons/brands/element.svg
new file mode 100644
index 0000000000..6861de0955
--- /dev/null
+++ b/res/img/element-icons/brands/element.svg
@@ -0,0 +1,6 @@
+
diff --git a/res/img/element-icons/brands/facebook.svg b/res/img/element-icons/brands/facebook.svg
new file mode 100644
index 0000000000..2742785424
--- /dev/null
+++ b/res/img/element-icons/brands/facebook.svg
@@ -0,0 +1,9 @@
+
diff --git a/res/img/element-icons/brands/github.svg b/res/img/element-icons/brands/github.svg
new file mode 100644
index 0000000000..503719520b
--- /dev/null
+++ b/res/img/element-icons/brands/github.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/element-icons/brands/gitlab.svg b/res/img/element-icons/brands/gitlab.svg
new file mode 100644
index 0000000000..df84c41e21
--- /dev/null
+++ b/res/img/element-icons/brands/gitlab.svg
@@ -0,0 +1,9 @@
+
diff --git a/res/img/element-icons/brands/google.svg b/res/img/element-icons/brands/google.svg
new file mode 100644
index 0000000000..1b0b19ae5b
--- /dev/null
+++ b/res/img/element-icons/brands/google.svg
@@ -0,0 +1,6 @@
+
diff --git a/res/img/element-icons/brands/twitter.svg b/res/img/element-icons/brands/twitter.svg
new file mode 100644
index 0000000000..43eb825a59
--- /dev/null
+++ b/res/img/element-icons/brands/twitter.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/element-icons/call/delete.svg b/res/img/element-icons/call/delete.svg
new file mode 100644
index 0000000000..133bdad4ca
--- /dev/null
+++ b/res/img/element-icons/call/delete.svg
@@ -0,0 +1,10 @@
+
diff --git a/res/img/element-icons/call/expand.svg b/res/img/element-icons/call/expand.svg
new file mode 100644
index 0000000000..91ef4d8a76
--- /dev/null
+++ b/res/img/element-icons/call/expand.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/element-icons/call/video-muted.svg b/res/img/element-icons/call/video-muted.svg
deleted file mode 100644
index d2aea71d11..0000000000
--- a/res/img/element-icons/call/video-muted.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/res/img/element-icons/call/voice-muted.svg b/res/img/element-icons/call/voice-muted.svg
deleted file mode 100644
index 32abafb04a..0000000000
--- a/res/img/element-icons/call/voice-muted.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/res/img/element-icons/call/voice-unmuted.svg b/res/img/element-icons/call/voice-unmuted.svg
deleted file mode 100644
index e664080217..0000000000
--- a/res/img/element-icons/call/voice-unmuted.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/res/img/element-icons/camera.svg b/res/img/element-icons/camera.svg
new file mode 100644
index 0000000000..92d1f91dec
--- /dev/null
+++ b/res/img/element-icons/camera.svg
@@ -0,0 +1,10 @@
+
diff --git a/res/img/element-icons/chat-bubbles.svg b/res/img/element-icons/chat-bubbles.svg
new file mode 100644
index 0000000000..ac9db61f29
--- /dev/null
+++ b/res/img/element-icons/chat-bubbles.svg
@@ -0,0 +1,11 @@
+
diff --git a/res/img/element-icons/email-prompt.svg b/res/img/element-icons/email-prompt.svg
new file mode 100644
index 0000000000..19b8f82449
--- /dev/null
+++ b/res/img/element-icons/email-prompt.svg
@@ -0,0 +1,13 @@
+
diff --git a/res/img/element-icons/feedback.svg b/res/img/element-icons/feedback.svg
new file mode 100644
index 0000000000..3ee20d18d9
--- /dev/null
+++ b/res/img/element-icons/feedback.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/element-icons/i.svg b/res/img/element-icons/i.svg
new file mode 100644
index 0000000000..6674f1ed8d
--- /dev/null
+++ b/res/img/element-icons/i.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/element-icons/room/apps.svg b/res/img/element-icons/room/apps.svg
new file mode 100644
index 0000000000..c90704752c
--- /dev/null
+++ b/res/img/element-icons/room/apps.svg
@@ -0,0 +1,6 @@
+
diff --git a/res/img/element-icons/room/default_app.svg b/res/img/element-icons/room/default_app.svg
index 08734170df..baf9bc37fa 100644
--- a/res/img/element-icons/room/default_app.svg
+++ b/res/img/element-icons/room/default_app.svg
@@ -1,11 +1,21 @@
-