imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' of git+ssh://github.com/matrix-org/matrix-react-sdk into develop

Browse source
This commit is contained in:
Matthew Hodgson 2021-03-08 04:57:10 +00:00
commit c02d03cc5b
146 changed files with 8365 additions and 1072 deletions
Download patch file Download diff file Expand all files Collapse all files

9
res/css/_components.scss
View file

@ -27,6 +27,9 @@
@import "./structures/_RoomView.scss";
@import "./structures/_ScrollPanel.scss";
@import "./structures/_SearchBox.scss";
@import "./structures/_SpacePanel.scss";
@import "./structures/_SpaceRoomDirectory.scss";
@import "./structures/_SpaceRoomView.scss";
@import "./structures/_TabbedView.scss";
@import "./structures/_ToastContainer.scss";
@import "./structures/_UploadBar.scss";
@ -56,6 +59,7 @@
@import "./views/context_menus/_MessageContextMenu.scss";
@import "./views/context_menus/_StatusMessageContextMenu.scss";
@import "./views/context_menus/_TagTileContextMenu.scss";
@import "./views/dialogs/_AddExistingToSpaceDialog.scss";
@import "./views/dialogs/_AddressPickerDialog.scss";
@import "./views/dialogs/_Analytics.scss";
@import "./views/dialogs/_BugReportDialog.scss";
@ -89,6 +93,7 @@
@import "./views/dialogs/_SettingsDialog.scss";
@import "./views/dialogs/_ShareDialog.scss";
@import "./views/dialogs/_SlashCommandHelpDialog.scss";
@import "./views/dialogs/_SpaceSettingsDialog.scss";
@import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
@import "./views/dialogs/_TermsDialog.scss";
@import "./views/dialogs/_UploadConfirmDialog.scss";
@ -212,6 +217,7 @@
@import "./views/settings/_DevicesPanel.scss";
@import "./views/settings/_E2eAdvancedPanel.scss";
@import "./views/settings/_EmailAddresses.scss";
@import "./views/settings/_SpellCheckLanguages.scss";
@import "./views/settings/_IntegrationManager.scss";
@import "./views/settings/_Notifications.scss";
@import "./views/settings/_PhoneNumbers.scss";
@ -232,6 +238,9 @@
@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.scss";
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
@import "./views/spaces/_SpaceBasicSettings.scss";
@import "./views/spaces/_SpaceCreateMenu.scss";
@import "./views/spaces/_SpacePublicShare.scss";
@import "./views/terms/_InlineTermsAgreement.scss";
@import "./views/toasts/_AnalyticsToast.scss";
@import "./views/toasts/_NonUrgentEchoFailureToast.scss";

22
res/css/structures/_LeftPanel.scss
View file

@ -15,6 +15,7 @@ limitations under the License.
*/
$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
$roomListCollapsedWidth: 68px;
.mx_LeftPanel {
background-color: $roomlist-bg-color;
@ -37,18 +38,12 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
// GroupFilterPanel handles its own CSS
}
&:not(.mx_LeftPanel_hasGroupFilterPanel) {
.mx_LeftPanel_roomListContainer {
width: 100%;
}
}
// 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% - $groupFilterPanelWidth);
background-color: $roomlist-bg-color;
flex: 1 0 0;
min-width: 0;
// Create another flexbox (this time a column) for the room list components
display: flex;
flex-direction: column;
@ -168,17 +163,10 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
// These styles override the defaults for the minimized (66px) layout
&.mx_LeftPanel_minimized {
min-width: unset;
// We have to forcefully set the width to override the resizer's style attribute.
&.mx_LeftPanel_hasGroupFilterPanel {
width: calc(68px + $groupFilterPanelWidth) !important;
}
&:not(.mx_LeftPanel_hasGroupFilterPanel) {
width: 68px !important;
}
width: unset !important;
.mx_LeftPanel_roomListContainer {
width: 68px;
width: $roomListCollapsedWidth;
.mx_LeftPanel_userHeader {
flex-direction: row;

1
res/css/structures/_MainSplit.scss
View file

@ -18,6 +18,7 @@ limitations under the License.
display: flex;
flex-direction: row;
min-width: 0;
min-height: 0;
height: 100%;
}

17
res/css/structures/_RightPanel.scss
View file

@ -160,3 +160,20 @@ limitations under the License.
mask-position: center;
}
}
.mx_RightPanel_scopeHeader {
margin: 24px;
text-align: center;
font-weight: $font-semi-bold;
font-size: $font-18px;
line-height: $font-22px;
.mx_BaseAvatar {
margin-right: 8px;
vertical-align: middle;
}
.mx_BaseAvatar_image {
border-radius: 8px;
}
}

52
res/css/structures/_RoomView.scss
View file

@ -20,35 +20,54 @@ limitations under the License.
flex-direction: column;
}
@keyframes mx_RoomView_fileDropTarget_animation {
from {
opacity: 0;
}
to {
opacity: 0.95;
}
}
.mx_RoomView_fileDropTarget {
min-width: 0px;
width: 100%;
height: 100%;
font-size: $font-18px;
text-align: center;
pointer-events: none;
padding-left: 12px;
padding-right: 12px;
margin-left: -12px;
background-color: $primary-bg-color;
opacity: 0.95;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: $droptarget-bg-color;
border: 2px #e1dddd solid;
border-bottom: none;
position: absolute;
top: 52px;
bottom: 0px;
z-index: 3000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
animation: mx_RoomView_fileDropTarget_animation;
animation-duration: 0.5s;
}
.mx_RoomView_fileDropTargetLabel {
top: 50%;
width: 100%;
margin-top: -50px;
position: absolute;
@keyframes mx_RoomView_fileDropTarget_image_animation {
from {
width: 0px;
}
to {
width: 32px;
}
}
.mx_RoomView_fileDropTarget_image {
animation: mx_RoomView_fileDropTarget_image_animation;
animation-duration: 0.5s;
margin-bottom: 16px;
}
.mx_RoomView_auxPanel {
@ -117,7 +136,6 @@ limitations under the License.
}
.mx_RoomView_body {
position: relative; //for .mx_RoomView_auxPanel_fullHeight
display: flex;
flex-direction: column;
flex: 1;

349
res/css/structures/_SpacePanel.scss Normal file
View file

@ -0,0 +1,349 @@
/*
Copyright 2021 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.
*/
$topLevelHeight: 32px;
$nestedHeight: 24px;
$gutterSize: 17px;
$activeStripeSize: 4px;
$activeBorderTransparentGap: 2px;
$activeBackgroundColor: $roomtile-selected-bg-color;
$activeBorderColor: $secondary-fg-color;
.mx_SpacePanel {
flex: 0 0 auto;
background-color: $groupFilterPanel-bg-color;
padding: 0;
margin: 0;
// Create another flexbox so the Panel fills the container
display: flex;
flex-direction: column;
overflow-y: auto;
.mx_SpacePanel_spaceTreeWrapper {
flex: 1;
}
.mx_SpacePanel_toggleCollapse {
flex: 0 0 auto;
width: 40px;
height: 40px;
mask-position: center;
mask-size: 32px;
mask-repeat: no-repeat;
margin-left: $gutterSize;
margin-bottom: 12px;
background-color: $roomlist-header-color;
mask-image: url('$(res)/img/element-icons/expand-space-panel.svg');
&.expanded {
transform: scaleX(-1);
}
}
ul {
margin: 0;
list-style: none;
padding: 0;
padding-left: 16px;
}
.mx_AutoHideScrollbar {
padding: 16px 12px 16px 0;
}
.mx_SpaceButton_toggleCollapse {
cursor: pointer;
}
.mx_SpaceItem.collapsed {
.mx_SpaceButton {
.mx_NotificationBadge {
right: -4px;
top: -4px;
}
}
& > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse {
transform: rotate(-90deg);
}
& > .mx_SpaceTreeLevel {
display: none;
}
}
.mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
margin-left: $gutterSize;
}
.mx_SpaceButton {
border-radius: 8px;
position: relative;
margin-bottom: 2px;
display: flex;
align-items: center;
padding: 4px;
&.mx_SpaceButton_active {
&:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
background-color: $activeBackgroundColor;
border-radius: 8px;
}
&.mx_SpaceButton_narrow {
.mx_BaseAvatar, .mx_SpaceButton_avatarPlaceholder {
border: 2px $activeBorderColor solid;
border-radius: 11px;
}
}
}
.mx_SpaceButton_selectionWrapper {
display: flex;
flex: 1;
align-items: center;
}
.mx_SpaceButton_name {
flex: 1;
margin-left: 8px;
white-space: nowrap;
display: block;
max-width: 150px;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 8px;
font-size: $font-14px;
line-height: $font-18px;
}
.mx_SpaceButton_toggleCollapse {
width: calc($gutterSize - $activeStripeSize);
margin-left: 1px;
height: 20px;
mask-position: center;
mask-size: 20px;
mask-repeat: no-repeat;
background-color: $roomlist-header-color;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
.mx_SpaceButton_icon {
width: $topLevelHeight;
min-width: $topLevelHeight;
height: $topLevelHeight;
border-radius: 8px;
position: relative;
&::before {
position: absolute;
content: '';
width: $topLevelHeight;
height: $topLevelHeight;
top: 0;
left: 0;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 18px;
}
}
&.mx_SpaceButton_home .mx_SpaceButton_icon {
background-color: #ffffff;
&::before {
background-color: #3f3d3d;
mask-image: url('$(res)/img/element-icons/home.svg');
}
}
.mx_SpaceButton_avatarPlaceholder {
border: $activeBorderTransparentGap transparent solid;
padding: $activeBorderTransparentGap;
}
&.mx_SpaceButton_new .mx_SpaceButton_icon {
background-color: $accent-color;
transition: all .1s ease-in-out; // TODO transition
&::before {
background-color: #ffffff;
mask-image: url('$(res)/img/element-icons/plus.svg');
transition: all .2s ease-in-out; // TODO transition
}
}
&.mx_SpaceButton_newCancel .mx_SpaceButton_icon {
background-color: $icon-button-color;
&::before {
transform: rotate(45deg);
}
}
.mx_BaseAvatar {
/* moving the border-radius to this element from _image
element so we can add a border to it without the initials being displaced */
overflow: hidden;
border: 2px transparent solid;
padding: $activeBorderTransparentGap;
.mx_BaseAvatar_initial {
top: $activeBorderTransparentGap;
left: $activeBorderTransparentGap;
}
.mx_BaseAvatar_image {
border-radius: 8px;
}
}
.mx_SpaceButton_menuButton {
width: 20px;
min-width: 20px; // yay flex
height: 20px;
margin-top: auto;
margin-bottom: auto;
position: relative;
display: none;
&::before {
top: 2px;
left: 2px;
content: '';
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-image: url('$(res)/img/element-icons/context-menu.svg');
background: $primary-fg-color;
}
}
}
.mx_SpacePanel_badgeContainer {
height: 16px;
// don't set width so that it takes no space when there is no badge to show
margin: auto 0; // vertically align
// Create a flexbox to make aligning dot badges easier
display: flex;
align-items: center;
.mx_NotificationBadge {
margin: 0 2px; // centering
}
.mx_NotificationBadge_dot {
// make the smaller dot occupy the same width for centering
margin-left: 7px;
margin-right: 7px;
}
}
&.collapsed {
.mx_SpaceButton {
.mx_SpacePanel_badgeContainer {
position: absolute;
right: 0px;
top: 2px;
}
}
}
&:not(.collapsed) {
.mx_SpaceButton:hover,
.mx_SpaceButton:focus-within,
.mx_SpaceButton_hasMenuOpen {
// Hide the badge container on hover because it'll be a menu button
.mx_SpacePanel_badgeContainer {
width: 0;
height: 0;
display: none;
}
.mx_SpaceButton_menuButton {
display: block;
}
}
}
/* root space buttons are bigger and not indented */
& > .mx_AutoHideScrollbar {
& > .mx_SpaceButton {
height: $topLevelHeight;
&.mx_SpaceButton_active::before {
height: $topLevelHeight;
}
}
& > ul {
padding-left: 0;
}
}
}
.mx_SpacePanel_contextMenu {
.mx_SpacePanel_contextMenu_header {
margin: 12px 16px 12px;
font-weight: $font-semi-bold;
font-size: $font-15px;
line-height: $font-18px;
}
.mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton {
color: $accent-color;
.mx_SpacePanel_iconInvite::before {
background-color: $accent-color;
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}
}
.mx_SpacePanel_iconSettings::before {
mask-image: url('$(res)/img/element-icons/settings.svg');
}
.mx_SpacePanel_iconLeave::before {
mask-image: url('$(res)/img/element-icons/leave.svg');
}
.mx_SpacePanel_iconHome::before {
mask-image: url('$(res)/img/element-icons/roomlist/home.svg');
}
.mx_SpacePanel_iconMembers::before {
mask-image: url('$(res)/img/element-icons/room/members.svg');
}
.mx_SpacePanel_iconPlus::before {
mask-image: url('$(res)/img/element-icons/plus.svg');
}
.mx_SpacePanel_iconExplore::before {
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
}
}
.mx_SpacePanel_sharePublicSpace {
margin: 0;
}

231
res/css/structures/_SpaceRoomDirectory.scss Normal file
View file

@ -0,0 +1,231 @@
/*
Copyright 2021 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_SpaceRoomDirectory_dialogWrapper > .mx_Dialog {
max-width: 960px;
height: 100%;
}
.mx_SpaceRoomDirectory {
height: 100%;
margin-bottom: 12px;
color: $primary-fg-color;
word-break: break-word;
display: flex;
flex-direction: column;
.mx_Dialog_title {
display: flex;
.mx_BaseAvatar {
margin-right: 16px;
}
.mx_BaseAvatar_image {
border-radius: 8px;
}
> div {
> h1 {
font-weight: $font-semi-bold;
font-size: $font-18px;
line-height: $font-22px;
margin: 0;
}
> div {
color: $secondary-fg-color;
font-size: $font-15px;
line-height: $font-24px;
}
}
}
.mx_Dialog_content {
// TODO fix scrollbar
//display: flex;
//flex-direction: column;
//height: calc(100% - 80px);
.mx_AccessibleButton_kind_link {
padding: 0;
}
.mx_SearchBox {
margin: 24px 0 28px;
}
.mx_SpaceRoomDirectory_listHeader {
display: flex;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
.mx_FormButton {
margin-bottom: 8px;
}
> span {
margin: auto 0 0 auto;
}
}
}
}
.mx_SpaceRoomDirectory_list {
margin-top: 8px;
.mx_SpaceRoomDirectory_roomCount {
> h3 {
display: inline;
font-weight: $font-semi-bold;
font-size: $font-18px;
line-height: $font-22px;
color: $primary-fg-color;
}
> span {
margin-left: 8px;
font-size: $font-15px;
line-height: $font-24px;
color: $secondary-fg-color;
}
}
.mx_SpaceRoomDirectory_subspace {
margin-top: 8px;
.mx_SpaceRoomDirectory_subspace_info {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 8px;
color: $secondary-fg-color;
font-weight: $font-semi-bold;
font-size: $font-12px;
line-height: $font-15px;
.mx_BaseAvatar {
margin-right: 12px;
vertical-align: middle;
}
.mx_BaseAvatar_image {
border-radius: 8px;
}
.mx_SpaceRoomDirectory_actions {
text-align: right;
height: min-content;
margin-left: auto;
margin-right: 16px;
}
}
.mx_SpaceRoomDirectory_subspace_children {
margin-left: 12px;
border-left: 2px solid $space-button-outline-color;
padding-left: 24px;
}
}
.mx_SpaceRoomDirectory_roomTile {
padding: 16px;
border-radius: 8px;
border: 1px solid $space-button-outline-color;
margin: 8px 0 16px;
display: flex;
min-height: 76px;
box-sizing: border-box;
&.mx_AccessibleButton:hover {
background-color: rgba(141, 151, 165, 0.1);
}
.mx_BaseAvatar {
margin-right: 16px;
margin-top: 6px;
}
.mx_SpaceRoomDirectory_roomTile_info {
display: inline-block;
font-size: $font-15px;
flex-grow: 1;
height: min-content;
margin: auto 0;
.mx_SpaceRoomDirectory_roomTile_name {
font-weight: $font-semi-bold;
line-height: $font-18px;
}
.mx_SpaceRoomDirectory_roomTile_topic {
line-height: $font-24px;
color: $secondary-fg-color;
}
}
.mx_SpaceRoomDirectory_roomTile_memberCount {
position: relative;
margin: auto 0 auto 24px;
padding: 0 0 0 28px;
line-height: $font-24px;
display: inline-block;
width: 32px;
&::before {
position: absolute;
content: '';
width: 24px;
height: 24px;
top: 0;
left: 0;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
background-color: $secondary-fg-color;
mask-image: url('$(res)/img/element-icons/community-members.svg');
}
}
.mx_SpaceRoomDirectory_actions {
width: 180px;
text-align: right;
height: min-content;
margin: auto 0 auto 28px;
.mx_AccessibleButton {
vertical-align: middle;
& + .mx_AccessibleButton {
margin-left: 24px;
}
}
}
}
.mx_SpaceRoomDirectory_actions {
.mx_SpaceRoomDirectory_actionsText {
font-weight: normal;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
}
.mx_Checkbox {
display: inline-block;
}
}
}

336
res/css/structures/_SpaceRoomView.scss Normal file
View file

@ -0,0 +1,336 @@
/*
Copyright 2021 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.
*/
$SpaceRoomViewInnerWidth: 428px;
.mx_SpaceRoomView {
.mx_MainSplit > div:first-child {
padding: 80px 60px;
flex-grow: 1;
h1 {
margin: 0;
font-size: $font-24px;
font-weight: $font-semi-bold;
color: $primary-fg-color;
width: max-content;
}
.mx_SpaceRoomView_description {
font-size: $font-15px;
color: $secondary-fg-color;
margin-top: 12px;
margin-bottom: 24px;
}
.mx_SpaceRoomView_buttons {
display: block;
margin-top: 44px;
width: $SpaceRoomViewInnerWidth;
text-align: right; // button alignment right
.mx_FormButton {
padding: 8px 22px;
margin-left: 16px;
}
}
.mx_Field {
max-width: $SpaceRoomViewInnerWidth;
& + .mx_Field {
margin-top: 28px;
}
}
.mx_SpaceRoomView_errorText {
font-weight: $font-semi-bold;
font-size: $font-12px;
line-height: $font-15px;
color: $notice-primary-color;
margin-bottom: 28px;
}
.mx_AccessibleButton_disabled {
cursor: not-allowed;
}
}
.mx_SpaceRoomView_landing {
overflow-y: auto;
> .mx_BaseAvatar_image,
> .mx_BaseAvatar > .mx_BaseAvatar_image {
border-radius: 12px;
}
.mx_SpaceRoomView_landing_name {
margin: 24px 0 16px;
font-size: $font-15px;
color: $secondary-fg-color;
> span {
display: inline-block;
}
.mx_SpaceRoomView_landing_nameRow {
margin-top: 12px;
> h1 {
display: inline-block;
}
}
.mx_SpaceRoomView_landing_inviter {
.mx_BaseAvatar {
margin-right: 4px;
vertical-align: middle;
}
}
.mx_SpaceRoomView_landing_memberCount {
position: relative;
margin-left: 24px;
padding: 0 0 0 28px;
line-height: $font-24px;
vertical-align: text-bottom;
&::before {
position: absolute;
content: '';
width: 24px;
height: 24px;
top: 0;
left: 0;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
background-color: $accent-color;
mask-image: url('$(res)/img/element-icons/community-members.svg');
}
}
}
.mx_SpaceRoomView_landing_topic {
font-size: $font-15px;
}
.mx_SpaceRoomView_landing_joinButtons {
margin-top: 24px;
.mx_FormButton {
padding: 8px 22px;
}
}
.mx_SpaceRoomView_landing_adminButtons {
margin-top: 32px;
.mx_AccessibleButton {
position: relative;
width: 160px;
height: 124px;
box-sizing: border-box;
padding: 72px 16px 0;
border-radius: 12px;
border: 1px solid $space-button-outline-color;
margin-right: 28px;
margin-bottom: 28px;
font-size: $font-14px;
display: inline-block;
vertical-align: bottom;
&:last-child {
margin-right: 0;
}
&:hover {
background-color: rgba(141, 151, 165, 0.1);
}
&::before, &::after {
position: absolute;
content: "";
left: 16px;
top: 16px;
height: 40px;
width: 40px;
border-radius: 20px;
}
&::after {
mask-position: center;
mask-size: 30px;
mask-repeat: no-repeat;
background: #ffffff; // white icon fill
}
&.mx_SpaceRoomView_landing_inviteButton {
&::before {
background-color: $accent-color;
}
&::after {
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}
}
&.mx_SpaceRoomView_landing_addButton {
&::before {
background-color: #ac3ba8;
}
&::after {
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
}
}
&.mx_SpaceRoomView_landing_createButton {
&::before {
background-color: #368bd6;
}
&::after {
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
}
}
&.mx_SpaceRoomView_landing_settingsButton {
&::before {
background-color: #5c56f5;
}
&::after {
mask-image: url('$(res)/img/element-icons/settings.svg');
}
}
}
}
.mx_SpaceRoomDirectory_list {
max-width: 600px;
.mx_SpaceRoomDirectory_roomTile_actions {
display: none;
}
}
}
.mx_SpaceRoomView_privateScope {
.mx_RadioButton {
width: $SpaceRoomViewInnerWidth;
border-radius: 8px;
border: 1px solid $space-button-outline-color;
padding: 16px 16px 16px 72px;
margin-top: 36px;
cursor: pointer;
box-sizing: border-box;
position: relative;
> div:first-of-type {
// hide radio dot
display: none;
}
.mx_RadioButton_content {
margin: 0;
> h3 {
margin: 0 0 4px;
font-size: $font-15px;
font-weight: $font-semi-bold;
line-height: $font-18px;
}
> div {
color: $secondary-fg-color;
font-size: $font-15px;
line-height: $font-24px;
}
}
&::before {
content: "";
position: absolute;
height: 32px;
width: 32px;
top: 24px;
left: 20px;
background-color: $secondary-fg-color;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
.mx_RadioButton_checked {
border-color: $accent-color;
.mx_RadioButton_content {
> div {
color: $primary-fg-color;
}
}
&::before {
background-color: $accent-color;
}
}
.mx_SpaceRoomView_privateScope_justMeButton::before {
mask-image: url('$(res)/img/element-icons/room/members.svg');
}
.mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before {
mask-image: url('$(res)/img/element-icons/community-members.svg');
}
}
.mx_SpaceRoomView_inviteTeammates {
.mx_SpaceRoomView_inviteTeammates_buttons {
color: $secondary-fg-color;
margin-top: 28px;
.mx_AccessibleButton {
position: relative;
display: inline-block;
padding-left: 32px;
line-height: 24px; // to center icons
&::before {
content: "";
position: absolute;
height: 24px;
width: 24px;
top: 0;
left: 0;
background-color: $secondary-fg-color;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
& + .mx_AccessibleButton {
margin-left: 32px;
}
}
.mx_SpaceRoomView_inviteTeammates_inviteDialogButton::before {
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}
}
}
}

1
res/css/structures/_UserMenu.scss
View file

@ -72,6 +72,7 @@ limitations under the License.
position: relative; // to make default avatars work
margin-right: 8px;
height: 32px; // to remove the unknown 4px gap the browser puts below it
padding: 3px 0; // to align with and without using doubleName
.mx_UserMenu_userAvatar {
border-radius: 32px; // should match avatar size

5
res/css/views/context_menus/_IconizedContextMenu.scss
View file

@ -75,6 +75,11 @@ limitations under the License.
background-color: $menu-selected-color;
}
&.mx_AccessibleButton_disabled {
opacity: 0.5;
cursor: not-allowed;
}
img, .mx_IconizedContextMenu_icon { // icons
width: 16px;
min-width: 16px;

185
res/css/views/dialogs/_AddExistingToSpaceDialog.scss Normal file
View file

@ -0,0 +1,185 @@
/*
Copyright 2021 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_AddExistingToSpaceDialog_wrapper {
.mx_Dialog {
display: flex;
flex-direction: column;
}
}
.mx_AddExistingToSpaceDialog {
width: 480px;
color: $primary-fg-color;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
min-height: 0;
.mx_Dialog_title {
display: flex;
.mx_BaseAvatar {
display: inline-flex;
margin: 5px 16px 5px 5px;
vertical-align: middle;
}
.mx_BaseAvatar_image {
border-radius: 8px;
margin: 0;
vertical-align: unset;
}
> div {
> h1 {
font-weight: $font-semi-bold;
font-size: $font-18px;
line-height: $font-22px;
margin: 0;
}
.mx_AddExistingToSpaceDialog_onlySpace {
color: $secondary-fg-color;
font-size: $font-15px;
line-height: $font-24px;
}
}
.mx_Dropdown_input {
border: none;
> .mx_Dropdown_option {
padding-left: 0;
flex: unset;
height: unset;
color: $secondary-fg-color;
font-size: $font-15px;
line-height: $font-24px;
.mx_BaseAvatar {
display: none;
}
}
.mx_Dropdown_menu {
.mx_AddExistingToSpaceDialog_dropdownOptionActive {
color: $accent-color;
padding-right: 32px;
position: relative;
&::before {
content: '';
width: 20px;
height: 20px;
top: 8px;
right: 0;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $accent-color;
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
}
}
}
}
}
.mx_SearchBox {
margin: 0;
}
.mx_AddExistingToSpaceDialog_errorText {
font-weight: $font-semi-bold;
font-size: $font-12px;
line-height: $font-15px;
color: $notice-primary-color;
margin-bottom: 28px;
}
.mx_AddExistingToSpaceDialog_content {
.mx_AddExistingToSpaceDialog_noResults {
margin-top: 24px;
}
}
.mx_AddExistingToSpaceDialog_section {
margin-top: 24px;
> h3 {
margin: 0;
color: $secondary-fg-color;
font-size: $font-12px;
font-weight: $font-semi-bold;
line-height: $font-15px;
}
.mx_AddExistingToSpaceDialog_entry {
display: flex;
margin-top: 12px;
.mx_BaseAvatar {
margin-right: 12px;
}
.mx_AddExistingToSpaceDialog_entry_name {
font-size: $font-15px;
line-height: 30px;
flex-grow: 1;
}
.mx_FormButton {
min-width: 92px;
font-weight: normal;
box-sizing: border-box;
}
}
}
.mx_AddExistingToSpaceDialog_section_spaces {
.mx_BaseAvatar_image {
border-radius: 8px;
}
}
.mx_AddExistingToSpaceDialog_footer {
display: flex;
margin-top: 32px;
> span {
flex-grow: 1;
font-size: $font-12px;
line-height: $font-15px;
> * {
vertical-align: middle;
}
}
.mx_AccessibleButton {
display: inline-block;
}
.mx_AccessibleButton_kind_link {
padding: 0;
}
}
.mx_FormButton {
padding: 8px 22px;
}
}

5
res/css/views/dialogs/_HostSignupDialog.scss
View file

@ -19,6 +19,11 @@ limitations under the License.
max-width: 580px;
height: 80vh;
max-height: 600px;
// Ensure dialog borders are always white as the HostSignupDialog
// does not yet support dark mode or theming in general.
// In the future we might want to pass the theme to the called
// iframe, should some hosting provider have that need.
background-color: #ffffff;
.mx_HostSignupDialog_info {
text-align: center;

55
res/css/views/dialogs/_SpaceSettingsDialog.scss Normal file
View file

@ -0,0 +1,55 @@
/*
Copyright 2021 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_SpaceSettingsDialog {
width: 480px;
color: $primary-fg-color;
.mx_SpaceSettings_errorText {
font-weight: $font-semi-bold;
font-size: $font-12px;
line-height: $font-15px;
color: $notice-primary-color;
margin-bottom: 28px;
}
.mx_ToggleSwitch {
display: inline-block;
vertical-align: middle;
margin-left: 16px;
}
.mx_AccessibleButton_kind_danger {
margin-top: 28px;
}
.mx_SpaceSettingsDialog_buttons {
display: flex;
margin-top: 64px;
.mx_AccessibleButton {
display: inline-block;
}
.mx_AccessibleButton_kind_link {
margin-left: auto;
}
}
.mx_FormButton {
padding: 8px 22px;
}
}

2
res/css/views/rooms/_AuxPanel.scss
View file

@ -17,7 +17,7 @@ limitations under the License.
.m_RoomView_auxPanel_stateViews {
padding: 5px;
padding-left: 19px;
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid $primary-hairline-color;
}
.m_RoomView_auxPanel_stateViews_span a {

10
res/css/views/rooms/_EventTile.scss
View file

@ -257,17 +257,13 @@ $left-gutter: 64px;
display: inline-block;
width: 14px;
height: 14px;
top: 29px;
// This aligns the avatar with the last line of the
// message. We want to move it one line up - 2.2rem
top: -2.2rem;
user-select: none;
z-index: 1;
}
.mx_EventTile_continuation .mx_EventTile_readAvatars,
.mx_EventTile_info .mx_EventTile_readAvatars,
.mx_EventTile_emote .mx_EventTile_readAvatars {
top: 7px;
}
.mx_EventTile_readAvatars .mx_BaseAvatar {
position: absolute;
display: inline-block;

13
res/css/views/rooms/_GroupLayout.scss
View file

@ -105,16 +105,9 @@ $left-gutter: 64px;
}
.mx_EventTile_readAvatars {
top: 27px;
}
&.mx_EventTile_continuation .mx_EventTile_readAvatars,
&.mx_EventTile_emote .mx_EventTile_readAvatars {
top: 5px;
}
&.mx_EventTile_info .mx_EventTile_readAvatars {
top: 4px;
// This aligns the avatar with the last line of the
// message. We want to move it one line up - 2rem
top: -2rem;
}
.mx_EventTile_content .markdown-body {

1
res/css/views/rooms/_MemberInfo.scss
View file

@ -19,6 +19,7 @@ limitations under the License.
flex-direction: column;
flex: 1;
overflow-y: auto;
margin-top: 8px;
}
.mx_MemberInfo_name {

6
res/css/views/rooms/_MemberList.scss
View file

@ -44,6 +44,12 @@ limitations under the License.
.mx_AutoHideScrollbar {
flex: 1 1 0;
}
.mx_RightPanel_scopeHeader {
// vertically align with position on other right panel cards
// to prevent it bouncing as user navigates right panel
margin-top: -8px;
}
}
.mx_GroupMemberList_query,

38
res/css/views/rooms/_MessageComposer.scss
View file

@ -227,18 +227,6 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
}
.mx_MessageComposer_hangup::before {
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
}
.mx_MessageComposer_voicecall::before {
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
}
.mx_MessageComposer_videocall::before {
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
}
.mx_MessageComposer_emoji::before {
mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
}
@ -247,6 +235,32 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/room/composer/sticker.svg');
}
.mx_MessageComposer_sendMessage {
cursor: pointer;
position: relative;
margin-right: 6px;
width: 32px;
height: 32px;
border-radius: 100%;
background-color: $button-bg-color;
&::before {
position: absolute;
height: 16px;
width: 16px;
top: 8px;
left: 9px;
mask-image: url('$(res)/img/element-icons/send-message.svg');
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
background-color: $button-fg-color;
content: '';
}
}
.mx_MessageComposer_formatting {
cursor: pointer;
margin: 0 11px;

13
res/css/views/rooms/_RoomHeader.scss
View file

@ -252,6 +252,19 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/room/search-inset.svg');
}
.mx_RoomHeader_voiceCallButton::before {
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
// The call button SVG is padded slightly differently, so match it up to the size
// of the other icons
mask-size: 20px;
mask-position: center;
}
.mx_RoomHeader_videoCallButton::before {
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
}
.mx_RoomHeader_showPanel {
height: 16px;
}

5
res/css/views/rooms/_RoomList.scss
View file

@ -19,7 +19,10 @@ limitations under the License.
}
.mx_RoomList_iconPlus::before {
mask-image: url('$(res)/img/element-icons/roomlist/plus.svg');
mask-image: url('$(res)/img/element-icons/roomlist/plus-circle.svg');
}
.mx_RoomList_iconHash::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash-circle.svg');
}
.mx_RoomList_iconExplore::before {
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');

35
res/css/views/settings/_SpellCheckLanguages.scss Normal file
View file

@ -0,0 +1,35 @@
/*
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ExistingSpellCheckLanguage {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.mx_ExistingSpellCheckLanguage_language {
flex: 1;
margin-right: 10px;
}
.mx_GeneralUserSettingsTab_spellCheckLanguageInput {
margin-top: 1em;
margin-bottom: 1em;
}
.mx_SpellCheckLanguages {
@mixin mx_Settings_fullWidthField;
}

86
res/css/views/spaces/_SpaceBasicSettings.scss Normal file
View file

@ -0,0 +1,86 @@
/*
Copyright 2021 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_SpaceBasicSettings {
.mx_Field {
margin: 32px 0;
}
.mx_SpaceBasicSettings_avatarContainer {
display: flex;
margin-top: 24px;
.mx_SpaceBasicSettings_avatar {
position: relative;
height: 80px;
width: 80px;
background-color: $tertiary-fg-color;
border-radius: 16px;
}
img.mx_SpaceBasicSettings_avatar {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 16px;
}
// only show it when the button is a div and not an img (has avatar)
div.mx_SpaceBasicSettings_avatar {
cursor: pointer;
&::before {
content: "";
position: absolute;
height: 80px;
width: 80px;
top: 0;
left: 0;
background-color: #ffffff; // white icon fill
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
mask-image: url('$(res)/img/element-icons/camera.svg');
}
}
> input[type="file"] {
display: none;
}
> .mx_AccessibleButton_kind_link {
display: inline-block;
padding: 0;
margin: auto 16px;
color: #368bd6;
}
> .mx_SpaceBasicSettings_avatar_remove {
color: $notice-primary-color;
}
}
.mx_FormButton {
padding: 8px 22px;
margin-left: auto;
display: block;
width: min-content;
}
.mx_AccessibleButton_disabled {
cursor: not-allowed;
}
}

138
res/css/views/spaces/_SpaceCreateMenu.scss Normal file
View file

@ -0,0 +1,138 @@
/*
Copyright 2021 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.
*/
// TODO: the space panel currently does not have a fixed width,
// just the headers at each level have a max-width of 150px
// so this will look slightly off for now. We should probably use css grid for the whole main layout...
$spacePanelWidth: 200px;
.mx_SpaceCreateMenu_wrapper {
// background blur everything except SpacePanel
.mx_ContextualMenu_background {
background-color: $dialog-backdrop-color;
opacity: 0.6;
left: $spacePanelWidth;
}
.mx_ContextualMenu {
padding: 24px;
width: 480px;
box-sizing: border-box;
background-color: $primary-bg-color;
> div {
> h2 {
font-weight: $font-semi-bold;
font-size: $font-18px;
margin-top: 4px;
}
> p {
font-size: $font-15px;
color: $secondary-fg-color;
margin: 0;
}
}
.mx_SpaceCreateMenuType {
position: relative;
padding: 16px 32px 16px 72px;
width: 432px;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid $input-darker-bg-color;
font-size: $font-15px;
margin: 20px 0;
> h3 {
font-weight: $font-semi-bold;
margin: 0 0 4px;
}
> span {
color: $secondary-fg-color;
}
&::before {
position: absolute;
content: '';
width: 32px;
height: 32px;
top: 24px;
left: 20px;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 32px;
background-color: $tertiary-fg-color;
}
&:hover {
border-color: $accent-color;
&::before {
background-color: $accent-color;
}
> span {
color: $primary-fg-color;
}
}
}
.mx_SpaceCreateMenuType_public::before {
mask-image: url('$(res)/img/globe.svg');
mask-size: 26px;
}
.mx_SpaceCreateMenuType_private::before {
mask-image: url('$(res)/img/element-icons/lock.svg');
}
.mx_SpaceCreateMenu_back {
width: 28px;
height: 28px;
position: relative;
background-color: $theme-button-bg-color;
border-radius: 14px;
margin-bottom: 12px;
&::before {
content: "";
position: absolute;
height: 28px;
width: 28px;
top: 0;
left: 0;
background-color: $muted-fg-color;
transform: rotate(90deg);
mask-repeat: no-repeat;
mask-position: 2px 3px;
mask-size: 24px;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
}
.mx_FormButton {
padding: 8px 22px;
margin-left: auto;
display: block;
width: min-content;
}
.mx_AccessibleButton_disabled {
cursor: not-allowed;
}
}
}

60
res/css/views/spaces/_SpacePublicShare.scss Normal file
View file

@ -0,0 +1,60 @@
/*
Copyright 2021 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_SpacePublicShare {
.mx_AccessibleButton {
border: 1px solid $space-button-outline-color;
box-sizing: border-box;
border-radius: 8px;
padding: 12px 24px 12px 52px;
margin-top: 16px;
width: $SpaceRoomViewInnerWidth;
font-size: $font-15px;
line-height: $font-24px;
position: relative;
display: flex;
> span {
color: #368bd6;
margin-left: auto;
}
&:hover {
background-color: rgba(141, 151, 165, 0.1);
}
&::before {
content: "";
position: absolute;
width: 30px;
height: 30px;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
background: $muted-fg-color;
left: 12px;
top: 9px;
}
&.mx_SpacePublicShare_shareButton::before {
mask-image: url('$(res)/img/element-icons/link.svg');
}
&.mx_SpacePublicShare_inviteButton::before {
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}
}
}

4
res/img/element-icons/expand-space-panel.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7701 16.617H22.3721L18.614 20.3751C18.3137 20.6754 18.3137 21.1683 18.614 21.4686C18.9143 21.769 19.3995 21.769 19.6998 21.4686L24.7747 16.3937C25.0751 16.0934 25.0751 15.6082 24.7747 15.3079L19.7075 10.2253C19.4072 9.92492 18.922 9.92492 18.6217 10.2253C18.3214 10.5256 18.3214 11.0107 18.6217 11.3111L22.3721 15.0768H13.7701C13.3465 15.0768 13 15.4234 13 15.8469C13 16.2705 13.3465 16.617 13.7701 16.617Z" fill="#86888A"/>
<rect x="7" y="10" width="1.5" height="12" rx="0.75" fill="#86888A"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 651 B

3
res/img/element-icons/link.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5285 6.54089L13.0273 6.04207C14.4052 4.66426 16.6259 4.65104 17.9874 6.01253C19.349 7.37402 19.3357 9.59466 17.9579 10.9725L15.5878 13.3425C14.21 14.7203 11.9893 14.7335 10.6277 13.372M11.4717 17.4589L10.9727 17.9579C9.59481 19.3357 7.37409 19.349 6.01256 17.9875C4.65102 16.626 4.66426 14.4053 6.04211 13.0275L8.41203 10.6577C9.78988 9.27988 12.0106 9.26665 13.3721 10.6281" stroke="black" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 549 B

3
res/img/element-icons/lock.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.1113 2.6665C11.1839 2.6665 8.00016 5.85026 8.00016 9.77762V13.3332L7.3335 13.3332C6.22893 13.3332 5.3335 14.2286 5.3335 15.3332V27.3332C5.3335 28.4377 6.22893 29.3332 7.3335 29.3332H24.6668C25.7714 29.3332 26.6668 28.4377 26.6668 27.3332V15.3332C26.6668 14.2286 25.7714 13.3332 24.6668 13.3332L24.0002 13.3332V9.77762C24.0002 5.85026 20.8164 2.6665 16.8891 2.6665H15.1113ZM20.4446 13.3332V9.77762C20.4446 7.81394 18.8527 6.22206 16.8891 6.22206H15.1113C13.1476 6.22206 11.5557 7.81394 11.5557 9.77762V13.3332H20.4446Z" fill="#8E99A4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 692 B

3
res/img/element-icons/plus.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.74986 3.55554C8.74986 3.14133 8.41408 2.80554 7.99986 2.80554C7.58565 2.80554 7.24986 3.14133 7.24986 3.55554V7.24999L3.55542 7.24999C3.14121 7.24999 2.80542 7.58577 2.80542 7.99999C2.80542 8.4142 3.14121 8.74999 3.55542 8.74999L7.24987 8.74999V12.4444C7.24987 12.8586 7.58565 13.1944 7.99987 13.1944C8.41408 13.1944 8.74987 12.8586 8.74987 12.4444V8.74999L12.4443 8.74999C12.8585 8.74999 13.1943 8.4142 13.1943 7.99999C13.1943 7.58577 12.8585 7.24999 12.4443 7.24999L8.74986 7.24999V3.55554Z" fill="#8E99A4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 670 B

2
res/img/element-icons/room/invite.svg
View file

@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="24" height="24" viewBox="-0.4 1 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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Before After
Before After

7
res/img/element-icons/roomlist/hash-circle.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 8.4 KiB

3
res/img/element-icons/roomlist/plus-circle.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9ZM5.25 9C5.25 8.58579 5.58579 8.25 6 8.25H8.25V6C8.25 5.58579 8.58579 5.25 9 5.25C9.41421 5.25 9.75 5.58579 9.75 6V8.25H12C12.4142 8.25 12.75 8.58579 12.75 9C12.75 9.41421 12.4142 9.75 12 9.75H9.75V12C9.75 12.4142 9.41421 12.75 9 12.75C8.58579 12.75 8.25 12.4142 8.25 12V9.75H6C5.58579 9.75 5.25 9.41421 5.25 9Z" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 587 B

3
res/img/element-icons/send-message.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M 18.792 11.145 L 2.356 19.359 C 1.249 19.913 0.097 18.725 0.638 17.642 C 0.638 17.642 2.675 13.528 3.235 12.451 C 3.796 11.373 4.437 11.187 10.393 10.417 C 10.614 10.388 10.794 10.222 10.794 10 C 10.794 9.778 10.614 9.612 10.393 9.583 C 4.437 8.813 3.796 8.627 3.235 7.549 C 2.675 6.472 0.638 2.358 0.638 2.358 C 0.097 1.275 1.249 0.087 2.356 0.64 L 18.792 8.855 C 19.736 9.326 19.736 10.674 18.792 11.145 Z" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 537 B

20
res/img/upload-big.svg
View file

@ -1,19 +1,3 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="45px" height="59px" viewBox="-1 -1 45 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.4 (305) - http://www.bohemiancoding.com/sketch -->
<title>icons_upload_drop</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="03-Input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="03_05-File-drop" sketch:type="MSArtboardGroup" transform="translate(-570.000000, -368.000000)">
<g id="icons_upload_drop" sketch:type="MSLayerGroup" transform="translate(570.000000, 368.000000)">
<g id="Rectangle-5-+-Rectangle-6" sketch:type="MSShapeGroup">
<path d="M0,4.00812931 C0,1.79450062 1.78537926,0 4.00241155,0 L24.8253683,0 C24.8253683,0 42.2466793,16.8210687 42.2466793,16.8210687 L42.2466793,53.000599 C42.2466793,55.2094072 40.4583762,57 38.2531894,57 L3.99348992,57 C1.78794634,57 0,55.1999609 0,52.9918707 L0,4.00812931 Z" id="Rectangle-5" stroke="#76CFA6"></path>
<path d="M40.5848017,19.419576 L29.8354335,19.419576 C26.7387692,19.419576 24.2284269,16.9063989 24.2284269,13.8067771 L24.2284269,4.88501382 L40.5848017,19.419576 Z" id="Rectangle-6-Copy" fill="#FFFFFF"></path>
<path d="M42.2466793,18.3870968 L29.539478,18.3870968 C26.4130381,18.3870968 23.8785579,15.8497544 23.8785579,12.7203286 L23.8785579,0" id="Rectangle-6" stroke="#76CFA6"></path>
</g>
<path d="M31.3419737,32.9284726 C31.701384,32.9284726 32.0607942,32.8000473 32.3359677,32.5414375 C32.8825707,32.0259772 32.8825707,31.1920926 32.3359677,30.6766323 L21.622922,20.6119619 C21.076319,20.0965016 20.187153,20.0982608 19.638678,20.6102026 L8.9125289,30.6607991 C8.36405391,31.1762594 8.36218198,32.0119032 8.90878504,32.5273635 C9.4553881,33.0445831 10.344554,33.0445831 10.893029,32.530882 L19.2399573,24.7092556 L19.2437012,46.487014 C19.2437012,47.2153435 19.874541,47.8064516 20.6476474,47.8064516 C21.4244976,47.8064516 22.0515936,47.2153435 22.0515936,46.487014 L22.0478497,24.7426814 L30.3498517,32.5414375 C30.6231533,32.8000473 30.9825635,32.9284726 31.3419737,32.9284726 L31.3419737,32.9284726 Z" id="Fill-75" fill="#76CFA6" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0ZM17.2511 6.97409C16.9775 6.68236 16.5885 6.50012 16.157 6.50012C15.793 6.50012 15.4593 6.62973 15.1996 6.84532C15.1545 6.88267 15.1115 6.92281 15.0707 6.96564L8.79618 13.5539C8.22485 14.1538 8.24801 15.1032 8.8479 15.6746C9.4478 16.2459 10.3973 16.2227 10.9686 15.6228L14.657 11.7501V23.0589C14.657 23.8874 15.3285 24.5589 16.157 24.5589C16.9854 24.5589 17.657 23.8874 17.657 23.0589V11.7502L21.3452 15.6228C21.9165 16.2227 22.866 16.2459 23.4659 15.6746C24.0658 15.1032 24.0889 14.1538 23.5176 13.5539L17.2511 6.97409Z" fill="#0DBD8B"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 802 B

Before After
Before After

1
res/themes/dark/css/_dark.scss
View file

@ -123,6 +123,7 @@ $roomsublist-divider-color: $primary-fg-color;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color;
$space-button-outline-color: rgba(141, 151, 165, 0.2);
$roomtile-preview-color: $secondary-fg-color;
$roomtile-default-badge-bg-color: #61708b;

1
res/themes/legacy-dark/css/_legacy-dark.scss
View file

@ -120,6 +120,7 @@ $roomsublist-divider-color: $primary-fg-color;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color;
$space-button-outline-color: rgba(141, 151, 165, 0.2);
$roomtile-preview-color: #9e9e9e;
$roomtile-default-badge-bg-color: #61708b;

1
res/themes/legacy-light/css/_legacy-light.scss
View file

@ -187,6 +187,7 @@ $roomsublist-divider-color: $primary-fg-color;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color;
$space-button-outline-color: #E3E8F0;
$roomtile-preview-color: #9e9e9e;
$roomtile-default-badge-bg-color: #61708b;

4
res/themes/light/css/_light.scss
View file

@ -67,9 +67,6 @@ $groupFilterPanel-bg-color: rgba(232, 232, 232, 0.77);
// used by RoomDirectory permissions
$plinth-bg-color: $secondary-accent-color;
// used by RoomDropTarget
$droptarget-bg-color: rgba(255,255,255,0.5);
// used by AddressSelector
$selected-color: $secondary-accent-color;
@ -181,6 +178,7 @@ $roomsublist-divider-color: $primary-fg-color;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color;
$space-button-outline-color: #E3E8F0;
$roomtile-preview-color: $secondary-fg-color;
$roomtile-default-badge-bg-color: #61708b;

4
res/themes/light/css/_mods.scss
View file

@ -16,6 +16,10 @@
backdrop-filter: blur($groupFilterPanel-background-blur-amount);
}
.mx_SpacePanel {
backdrop-filter: blur($groupFilterPanel-background-blur-amount);
}
.mx_LeftPanel .mx_LeftPanel_roomListContainer {
backdrop-filter: blur($roomlist-background-blur-amount);
}