PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge remote-tracking branch 'upstream/develop' into fix/rl-resort/110

Browse source
This commit is contained in:
Šimon Brandner 2021-08-25 08:43:27 +02:00
commit 08402cca9f
No known key found for this signature in database
GPG key ID: 55C211A1226CB17D
241 changed files with 5871 additions and 2674 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
.github/workflows/netflify.yaml → .github/workflows/netlify.yaml vendored
View file

74
CHANGELOG.md
View file

@ -1,4 +1,76 @@
Changes in [3.27.0](https://github.com/vector-im/element-desktop/releases/tag/v3.27.0) (2021-07-02) Changes in [3.28.1](https://github.com/vector-im/element-desktop/releases/tag/v3.28.1) (2021-08-17)
===================================================================================================
## 🐛 Bug Fixes
* Fix multiple VoIP regressions ([matrix-org/matrix-js-sdk#1860](https://github.com/matrix-org/matrix-js-sdk/pull/1860)).
Changes in [3.28.0](https://github.com/vector-im/element-desktop/releases/tag/v3.28.0) (2021-08-16)
===================================================================================================
## ✨ Features
* Show how long a call was on call tiles ([\#6570](https://github.com/matrix-org/matrix-react-sdk/pull/6570)). Fixes vector-im/element-web#18405. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Add regional indicators to emoji picker ([\#6490](https://github.com/matrix-org/matrix-react-sdk/pull/6490)). Fixes vector-im/element-web#14963. Contributed by [robintown](https://github.com/robintown).
* Make call control buttons accessible to screen reader users ([\#6181](https://github.com/matrix-org/matrix-react-sdk/pull/6181)). Fixes vector-im/element-web#18358. Contributed by [pvagner](https://github.com/pvagner).
* Skip sending a thumbnail if it is not a sufficient saving over the original ([\#6559](https://github.com/matrix-org/matrix-react-sdk/pull/6559)). Fixes vector-im/element-web#17906.
* Increase PiP snapping speed ([\#6539](https://github.com/matrix-org/matrix-react-sdk/pull/6539)). Fixes vector-im/element-web#18371. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Improve and move the incoming call toast ([\#6470](https://github.com/matrix-org/matrix-react-sdk/pull/6470)). Fixes vector-im/element-web#17912. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Allow all of the URL schemes that Firefox allows ([\#6457](https://github.com/matrix-org/matrix-react-sdk/pull/6457)). Contributed by [aaronraimist](https://github.com/aaronraimist).
* Improve bubble layout colors ([\#6452](https://github.com/matrix-org/matrix-react-sdk/pull/6452)). Fixes vector-im/element-web#18081. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Spaces let users switch between Home and All Rooms behaviours ([\#6497](https://github.com/matrix-org/matrix-react-sdk/pull/6497)). Fixes vector-im/element-web#18093.
* Support for MSC2285 (hidden read receipts) ([\#6390](https://github.com/matrix-org/matrix-react-sdk/pull/6390)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Group pinned message events with MELS ([\#6349](https://github.com/matrix-org/matrix-react-sdk/pull/6349)). Fixes vector-im/element-web#17938. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Make version copiable ([\#6227](https://github.com/matrix-org/matrix-react-sdk/pull/6227)). Fixes vector-im/element-web#17603 and vector-im/element-web#18329. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Improve voice messages uploading state ([\#6530](https://github.com/matrix-org/matrix-react-sdk/pull/6530)). Fixes vector-im/element-web#18226 and vector-im/element-web#18224.
* Add surround with feature ([\#5510](https://github.com/matrix-org/matrix-react-sdk/pull/5510)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Improve call event tile wording ([\#6545](https://github.com/matrix-org/matrix-react-sdk/pull/6545)). Fixes vector-im/element-web#18376. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Show an avatar/a turned off microphone icon for muted users ([\#6486](https://github.com/matrix-org/matrix-react-sdk/pull/6486)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Prompt user to leave rooms/subspaces in a space when leaving space ([\#6424](https://github.com/matrix-org/matrix-react-sdk/pull/6424)). Fixes vector-im/element-web#18071.
* Add customisation point to override widget variables ([\#6455](https://github.com/matrix-org/matrix-react-sdk/pull/6455)). Fixes vector-im/element-web#18035.
* Add support for screen sharing in 1:1 calls ([\#5992](https://github.com/matrix-org/matrix-react-sdk/pull/5992)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
## 🐛 Bug Fixes
* [Release] Fix glare related regressions ([\#6622](https://github.com/matrix-org/matrix-react-sdk/pull/6622)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* [Release] Fix PiP of held calls ([\#6612](https://github.com/matrix-org/matrix-react-sdk/pull/6612)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* [Release] Fix toast colors ([\#6607](https://github.com/matrix-org/matrix-react-sdk/pull/6607)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Fix [object Object] in Widget Permissions ([\#6560](https://github.com/matrix-org/matrix-react-sdk/pull/6560)). Fixes vector-im/element-web#18384. Contributed by [Palid](https://github.com/Palid).
* Fix right margin for events on IRC layout ([\#6542](https://github.com/matrix-org/matrix-react-sdk/pull/6542)). Fixes vector-im/element-web#18354.
* Mirror only usermedia feeds ([\#6512](https://github.com/matrix-org/matrix-react-sdk/pull/6512)). Fixes vector-im/element-web#5633. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Fix LogoutDialog warning + TypeScript migration ([\#6533](https://github.com/matrix-org/matrix-react-sdk/pull/6533)).
* Fix the wrong font being used in the room topic field ([\#6527](https://github.com/matrix-org/matrix-react-sdk/pull/6527)). Fixes vector-im/element-web#18339. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Fix inconsistent styling for links on hover ([\#6513](https://github.com/matrix-org/matrix-react-sdk/pull/6513)). Contributed by [janogarcia](https://github.com/janogarcia).
* Fix incorrect height for encoded placeholder images ([\#6514](https://github.com/matrix-org/matrix-react-sdk/pull/6514)). Contributed by [Palid](https://github.com/Palid).
* Fix call events layout for message bubble ([\#6465](https://github.com/matrix-org/matrix-react-sdk/pull/6465)). Fixes vector-im/element-web#18144.
* Improve subspaces and some utilities around room/space creation ([\#6458](https://github.com/matrix-org/matrix-react-sdk/pull/6458)). Fixes vector-im/element-web#18090 vector-im/element-web#18091 and vector-im/element-web#17256.
* Restore pointer cursor for SenderProfile in message bubbles ([\#6501](https://github.com/matrix-org/matrix-react-sdk/pull/6501)). Fixes vector-im/element-web#18249.
* Fix issues with the Call View ([\#6472](https://github.com/matrix-org/matrix-react-sdk/pull/6472)). Fixes vector-im/element-web#18221. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Align event list summary read receipts when using message bubbles ([\#6500](https://github.com/matrix-org/matrix-react-sdk/pull/6500)). Fixes vector-im/element-web#18143.
* Better positioning for unbubbled events in timeline ([\#6477](https://github.com/matrix-org/matrix-react-sdk/pull/6477)). Fixes vector-im/element-web#18132.
* Realign reactions row with messages in modern layout ([\#6491](https://github.com/matrix-org/matrix-react-sdk/pull/6491)). Fixes vector-im/element-web#18118. Contributed by [robintown](https://github.com/robintown).
* Fix CreateRoomDialog exploding when making public room outside of a space ([\#6492](https://github.com/matrix-org/matrix-react-sdk/pull/6492)). Fixes vector-im/element-web#18275.
* Fix call crashing because `element` was undefined ([\#6488](https://github.com/matrix-org/matrix-react-sdk/pull/6488)). Fixes vector-im/element-web#18270. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Upscale thumbnails to the container size ([\#6589](https://github.com/matrix-org/matrix-react-sdk/pull/6589)). Fixes vector-im/element-web#18307.
* Fix create room dialog in spaces no longer adding to the space ([\#6587](https://github.com/matrix-org/matrix-react-sdk/pull/6587)). Fixes vector-im/element-web#18465.
* Don't show a modal on call reject/user hangup ([\#6580](https://github.com/matrix-org/matrix-react-sdk/pull/6580)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Fade Call View Buttons after `componentDidMount` ([\#6581](https://github.com/matrix-org/matrix-react-sdk/pull/6581)). Fixes vector-im/element-web#18439. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Fix missing expand button on codeblocks ([\#6565](https://github.com/matrix-org/matrix-react-sdk/pull/6565)). Fixes vector-im/element-web#18388. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* allow customizing the bubble layout colors ([\#6568](https://github.com/matrix-org/matrix-react-sdk/pull/6568)). Fixes vector-im/element-web#18408. Contributed by [benneti](https://github.com/benneti).
* Don't flash "Missed call" when accepting a call ([\#6567](https://github.com/matrix-org/matrix-react-sdk/pull/6567)). Fixes vector-im/element-web#18404. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Fix clicking whitespaces on replies ([\#6571](https://github.com/matrix-org/matrix-react-sdk/pull/6571)). Fixes vector-im/element-web#18327. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Fix disabled state for voice messages + send button tooltip ([\#6562](https://github.com/matrix-org/matrix-react-sdk/pull/6562)). Fixes vector-im/element-web#18413.
* Fix voice feed being cut-off ([\#6550](https://github.com/matrix-org/matrix-react-sdk/pull/6550)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Fix sizing issues of the screen picker ([\#6498](https://github.com/matrix-org/matrix-react-sdk/pull/6498)). Fixes vector-im/element-web#18281. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Stop voice messages that are playing when starting a recording ([\#6563](https://github.com/matrix-org/matrix-react-sdk/pull/6563)). Fixes vector-im/element-web#18410.
* Properly set style attribute on shared usercontent iframe ([\#6561](https://github.com/matrix-org/matrix-react-sdk/pull/6561)). Fixes vector-im/element-web#18414.
* Null guard space inviter to prevent the app exploding ([\#6558](https://github.com/matrix-org/matrix-react-sdk/pull/6558)).
* Make the ringing sound mutable/disablable ([\#6534](https://github.com/matrix-org/matrix-react-sdk/pull/6534)). Fixes vector-im/element-web#15591. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Fix wrong cursor being used in PiP ([\#6551](https://github.com/matrix-org/matrix-react-sdk/pull/6551)). Fixes vector-im/element-web#18383. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Re-pin Jitsi if the widget already exists ([\#6226](https://github.com/matrix-org/matrix-react-sdk/pull/6226)). Fixes vector-im/element-web#17679. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Fix broken call notification regression ([\#6526](https://github.com/matrix-org/matrix-react-sdk/pull/6526)). Fixes vector-im/element-web#18335. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* createRoom, only send join rule event if we have a join rule to put in it ([\#6516](https://github.com/matrix-org/matrix-react-sdk/pull/6516)). Fixes vector-im/element-web#18301.
* Fix clicking pills inside replies ([\#6508](https://github.com/matrix-org/matrix-react-sdk/pull/6508)). Fixes vector-im/element-web#18283. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Fix grecaptcha regression ([\#6503](https://github.com/matrix-org/matrix-react-sdk/pull/6503)). Fixes vector-im/element-web#18284. Contributed by [Palid](https://github.com/Palid).
Changes in [3.27.0](https://github.com/vector-im/element-desktop/releases/tag/v3.27.0) (2021-08-02)
=================================================================================================== ===================================================================================================
## 🔒 SECURITY FIXES ## 🔒 SECURITY FIXES

2
CONTRIBUTING.md
View file

@ -1,4 +1,4 @@
Contributing code to The React SDK Contributing code to The React SDK
================================== ==================================
matrix-react-sdk follows the same pattern as https://github.com/matrix-org/matrix-js-sdk/blob/master/CONTRIBUTING.rst matrix-react-sdk follows the same pattern as https://github.com/matrix-org/matrix-js-sdk/blob/master/CONTRIBUTING.md

8
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "matrix-react-sdk", "name": "matrix-react-sdk",
"version": "3.27.0", "version": "3.28.1",
"description": "SDK for matrix.org using React", "description": "SDK for matrix.org using React",
"author": "matrix.org", "author": "matrix.org",
"repository": { "repository": {
@ -55,6 +55,8 @@
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.12.5", "@babel/runtime": "^7.12.5",
"@sentry/browser": "^6.11.0",
"@sentry/tracing": "^6.11.0",
"await-lock": "^2.1.0", "await-lock": "^2.1.0",
"blurhash": "^1.1.3", "blurhash": "^1.1.3",
"browser-encrypt-attachment": "^0.3.0", "browser-encrypt-attachment": "^0.3.0",
@ -80,7 +82,7 @@
"katex": "^0.12.0", "katex": "^0.12.0",
"linkifyjs": "^2.1.9", "linkifyjs": "^2.1.9",
"lodash": "^4.17.20", "lodash": "^4.17.20",
"matrix-js-sdk": "12.2.0", "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
"matrix-widget-api": "^0.1.0-beta.15", "matrix-widget-api": "^0.1.0-beta.15",
"minimist": "^1.2.5", "minimist": "^1.2.5",
"opus-recorder": "^8.0.3", "opus-recorder": "^8.0.3",
@ -149,7 +151,7 @@
"@typescript-eslint/eslint-plugin": "^4.17.0", "@typescript-eslint/eslint-plugin": "^4.17.0",
"@typescript-eslint/parser": "^4.17.0", "@typescript-eslint/parser": "^4.17.0",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.1", "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
"allchange": "github:matrix-org/allchange", "allchange": "^1.0.0",
"babel-jest": "^26.6.3", "babel-jest": "^26.6.3",
"chokidar": "^3.5.1", "chokidar": "^3.5.1",
"concurrently": "^5.3.0", "concurrently": "^5.3.0",

55
res/css/_animations.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.
*/
/**
* React Transition Group animations are prefixed with 'mx_rtg--' so that we
* know they should not be used anywhere outside of React Transition Groups.
*/
.mx_rtg--fade-enter {
opacity: 0;
}
.mx_rtg--fade-enter-active {
opacity: 1;
transition: opacity 300ms ease;
}
.mx_rtg--fade-exit {
opacity: 1;
}
.mx_rtg--fade-exit-active {
opacity: 0;
transition: opacity 300ms ease;
}
@keyframes mx--anim-pulse {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}
@media (prefers-reduced-motion) {
@keyframes mx--anim-pulse {
// Override all keyframes in reduced-motion
}
.mx_rtg--fade-enter-active {
transition: none;
}
.mx_rtg--fade-exit-active {
transition: none;
}
}

32
res/css/_common.scss
View file

@ -18,6 +18,7 @@ limitations under the License.
@import "./_font-sizes.scss"; @import "./_font-sizes.scss";
@import "./_font-weights.scss"; @import "./_font-weights.scss";
@import "./_animations.scss";
$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
@ -52,8 +53,8 @@ html {
body { body {
font-family: $font-family; font-family: $font-family;
font-size: $font-15px; font-size: $font-15px;
background-color: $primary-bg-color; background-color: $background;
color: $primary-fg-color; color: $primary-content;
border: 0px; border: 0px;
margin: 0px; margin: 0px;
@ -88,7 +89,7 @@ b {
} }
h2 { h2 {
color: $primary-fg-color; color: $primary-content;
font-weight: 400; font-weight: 400;
font-size: $font-18px; font-size: $font-18px;
margin-top: 16px; margin-top: 16px;
@ -141,12 +142,12 @@ textarea::placeholder {
input[type=text], input[type=password], textarea { input[type=text], input[type=password], textarea {
background-color: transparent; background-color: transparent;
color: $primary-fg-color; color: $primary-content;
} }
/* Required by Firefox */ /* Required by Firefox */
textarea { textarea {
color: $primary-fg-color; color: $primary-content;
} }
input[type=text]:focus, input[type=password]:focus, textarea:focus { input[type=text]:focus, input[type=password]:focus, textarea:focus {
@ -167,12 +168,12 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
// it has the appearance of a text box so the controls // it has the appearance of a text box so the controls
// appear to be part of the input // appear to be part of the input
.mx_Dialog, .mx_MatrixChat { .mx_Dialog, .mx_MatrixChat_wrapper {
.mx_textinput > input[type=text], .mx_textinput > input[type=text],
.mx_textinput > input[type=search] { .mx_textinput > input[type=search] {
border: none; border: none;
flex: 1; flex: 1;
color: $primary-fg-color; color: $primary-content;
} }
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
@ -183,7 +184,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
background-color: transparent; background-color: transparent;
color: $input-darker-fg-color; color: $input-darker-fg-color;
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba($primary-fg-color, .1); border: 1px solid rgba($primary-content, .1);
// these things should probably not be defined globally // these things should probably not be defined globally
margin: 9px; margin: 9px;
} }
@ -208,7 +209,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput { .mx_textinput {
color: $input-darker-fg-color; color: $input-darker-fg-color;
background-color: $primary-bg-color; background-color: $background;
border: none; border: none;
} }
} }
@ -270,7 +271,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
} }
.mx_Dialog { .mx_Dialog {
background-color: $primary-bg-color; background-color: $background;
color: $light-fg-color; color: $light-fg-color;
z-index: 4012; z-index: 4012;
font-weight: 300; font-weight: 300;
@ -378,8 +379,13 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
.mx_Dialog_content { .mx_Dialog_content {
margin: 24px 0 68px; margin: 24px 0 68px;
font-size: $font-14px; font-size: $font-14px;
color: $primary-fg-color; color: $primary-content;
word-wrap: break-word; word-wrap: break-word;
a {
color: $accent-color;
cursor: pointer;
}
} }
.mx_Dialog_buttons { .mx_Dialog_buttons {
@ -487,8 +493,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
border-radius: 3px; border-radius: 3px;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
padding: 9px; padding: 9px;
color: $primary-fg-color; color: $primary-content;
background-color: $primary-bg-color; background-color: $background;
} }
.mx_textButton { .mx_textButton {

4
res/css/_components.scss
View file

@ -17,6 +17,7 @@
@import "./structures/_LeftPanelWidget.scss"; @import "./structures/_LeftPanelWidget.scss";
@import "./structures/_MainSplit.scss"; @import "./structures/_MainSplit.scss";
@import "./structures/_MatrixChat.scss"; @import "./structures/_MatrixChat.scss";
@import "./structures/_BackdropPanel.scss";
@import "./structures/_MyGroups.scss"; @import "./structures/_MyGroups.scss";
@import "./structures/_NonUrgentToastContainer.scss"; @import "./structures/_NonUrgentToastContainer.scss";
@import "./structures/_NotificationPanel.scss"; @import "./structures/_NotificationPanel.scss";
@ -27,8 +28,8 @@
@import "./structures/_RoomView.scss"; @import "./structures/_RoomView.scss";
@import "./structures/_ScrollPanel.scss"; @import "./structures/_ScrollPanel.scss";
@import "./structures/_SearchBox.scss"; @import "./structures/_SearchBox.scss";
@import "./structures/_SpaceHierarchy.scss";
@import "./structures/_SpacePanel.scss"; @import "./structures/_SpacePanel.scss";
@import "./structures/_SpaceRoomDirectory.scss";
@import "./structures/_SpaceRoomView.scss"; @import "./structures/_SpaceRoomView.scss";
@import "./structures/_TabbedView.scss"; @import "./structures/_TabbedView.scss";
@import "./structures/_ToastContainer.scss"; @import "./structures/_ToastContainer.scss";
@ -75,6 +76,7 @@
@import "./views/dialogs/_CreateCommunityPrototypeDialog.scss"; @import "./views/dialogs/_CreateCommunityPrototypeDialog.scss";
@import "./views/dialogs/_CreateGroupDialog.scss"; @import "./views/dialogs/_CreateGroupDialog.scss";
@import "./views/dialogs/_CreateRoomDialog.scss"; @import "./views/dialogs/_CreateRoomDialog.scss";
@import "./views/dialogs/_CreateSpaceFromCommunityDialog.scss";
@import "./views/dialogs/_CreateSubspaceDialog.scss"; @import "./views/dialogs/_CreateSubspaceDialog.scss";
@import "./views/dialogs/_DeactivateAccountDialog.scss"; @import "./views/dialogs/_DeactivateAccountDialog.scss";
@import "./views/dialogs/_DevtoolsDialog.scss"; @import "./views/dialogs/_DevtoolsDialog.scss";

37
res/css/structures/_BackdropPanel.scss Normal file
View file

@ -0,0 +1,37 @@
/*
Copyright 2021 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_BackdropPanel {
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
filter: blur(var(--lp-background-blur));
// Force a new layer for the backdropPanel so it's better hardware supported
transform: translateZ(0);
}
.mx_BackdropPanel--image {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
}

2
res/css/structures/_ContextualMenu.scss
View file

@ -34,7 +34,7 @@ limitations under the License.
border-radius: 8px; border-radius: 8px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color; box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
background-color: $menu-bg-color; background-color: $menu-bg-color;
color: $primary-fg-color; color: $primary-content;
position: absolute; position: absolute;
font-size: $font-14px; font-size: $font-14px;
z-index: 5001; z-index: 5001;

2
res/css/structures/_CreateRoom.scss
View file

@ -18,7 +18,7 @@ limitations under the License.
width: 960px; width: 960px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
color: $primary-fg-color; color: $primary-content;
} }
.mx_CreateRoom input, .mx_CreateRoom input,

23
res/css/structures/_GroupFilterPanel.scss
View file

@ -14,10 +14,27 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
.mx_GroupFilterPanelContainer {
flex-grow: 0;
flex-shrink: 0;
width: $groupFilterPanelWidth;
height: 100%;
// Create another flexbox so the GroupFilterPanel fills the container
display: flex;
flex-direction: column;
// GroupFilterPanel handles its own CSS
}
.mx_GroupFilterPanel { .mx_GroupFilterPanel {
flex: 1; z-index: 1;
background-color: $groupFilterPanel-bg-color; background-color: $groupFilterPanel-bg-color;
flex: 1;
cursor: pointer; cursor: pointer;
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -75,13 +92,13 @@ limitations under the License.
} }
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype { .mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
background-color: $primary-bg-color; background-color: $background;
border-radius: 6px; border-radius: 6px;
} }
.mx_TagTile_selected_prototype { .mx_TagTile_selected_prototype {
.mx_TagTile_homeIcon::before { .mx_TagTile_homeIcon::before {
background-color: $primary-fg-color; // dark-on-light background-color: $primary-content; // dark-on-light
} }
} }

61
res/css/structures/_GroupView.scss
View file

@ -132,7 +132,7 @@ limitations under the License.
width: 100%; width: 100%;
height: 31px; height: 31px;
overflow: hidden; overflow: hidden;
color: $primary-fg-color; color: $primary-content;
font-weight: bold; font-weight: bold;
font-size: $font-22px; font-size: $font-22px;
padding-left: 19px; padding-left: 19px;
@ -368,6 +368,65 @@ limitations under the License.
padding: 40px 20px; padding: 40px 20px;
} }
.mx_GroupView_spaceUpgradePrompt {
padding: 16px 50px;
background-color: $header-panel-bg-color;
border-radius: 8px;
max-width: 632px;
font-size: $font-15px;
line-height: $font-24px;
margin-top: 24px;
position: relative;
> h2 {
font-size: inherit;
font-weight: $font-semi-bold;
}
> p, h2 {
margin: 0;
}
&::before {
content: "";
position: absolute;
height: $font-24px;
width: 20px;
left: 18px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
background-color: $secondary-content;
}
.mx_AccessibleButton_kind_link {
padding: 0;
}
.mx_GroupView_spaceUpgradePrompt_close {
width: 16px;
height: 16px;
border-radius: 8px;
background-color: $input-darker-bg-color;
position: absolute;
top: 16px;
right: 16px;
&::before {
content: "";
position: absolute;
width: inherit;
height: inherit;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 8px;
mask-image: url('$(res)/img/image-view/close.svg');
background-color: $secondary-content;
}
}
}
.mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar > :not(.mx_MemberInfo_avatar) { .mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar > :not(.mx_MemberInfo_avatar) {
padding-left: 16px; padding-left: 16px;
padding-right: 16px; padding-right: 16px;

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

@ -14,31 +14,47 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
$roomListCollapsedWidth: 68px; $roomListCollapsedWidth: 68px;
.mx_MatrixChat--with-avatar {
.mx_LeftPanel,
.mx_LeftPanel .mx_LeftPanel_roomListContainer {
background-color: transparent;
}
}
.mx_LeftPanel_wrapper {
display: flex;
max-width: 50%;
position: relative;
// Contain the amount of layers rendered by constraining what actually needs re-layering via css
contain: layout paint;
.mx_LeftPanel_wrapper--user {
background-color: $roomlist-bg-color;
display: flex;
overflow: hidden;
position: relative;
&[data-collapsed] {
max-width: $roomListCollapsedWidth;
}
}
}
.mx_LeftPanel { .mx_LeftPanel {
background-color: $roomlist-bg-color; background-color: $roomlist-bg-color;
// TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
min-width: 206px;
max-width: 50%;
// Create a row-based flexbox for the GroupFilterPanel and the room list // Create a row-based flexbox for the GroupFilterPanel and the room list
display: flex; display: flex;
contain: content; contain: content;
position: relative;
.mx_LeftPanel_GroupFilterPanelContainer { flex-grow: 1;
flex-grow: 0; overflow: hidden;
flex-shrink: 0;
flex-basis: $groupFilterPanelWidth;
height: 100%;
// Create another flexbox so the GroupFilterPanel fills the container
display: flex;
flex-direction: column;
// GroupFilterPanel handles its own CSS
}
// Note: The 'room list' in this context is actually everything that isn't the tag // Note: The 'room list' in this context is actually everything that isn't the tag
// panel, such as the menu options, breadcrumbs, filtering, etc // panel, such as the menu options, breadcrumbs, filtering, etc
@ -130,7 +146,7 @@ $roomListCollapsedWidth: 68px;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $secondary-fg-color; background: $secondary-content;
} }
} }
@ -153,7 +169,7 @@ $roomListCollapsedWidth: 68px;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $secondary-fg-color; background: $secondary-content;
} }
&.mx_LeftPanel_exploreButton_space::before { &.mx_LeftPanel_exploreButton_space::before {
@ -171,6 +187,8 @@ $roomListCollapsedWidth: 68px;
} }
.mx_LeftPanel_roomListWrapper { .mx_LeftPanel_roomListWrapper {
// Make the y-scrollbar more responsive
padding-right: 2px;
overflow: hidden; overflow: hidden;
margin-top: 10px; // so we're not up against the search/filter margin-top: 10px; // so we're not up against the search/filter
flex: 1 0 0; // needed in Safari to properly set flex-basis flex: 1 0 0; // needed in Safari to properly set flex-basis
@ -192,6 +210,7 @@ $roomListCollapsedWidth: 68px;
// These styles override the defaults for the minimized (66px) layout // These styles override the defaults for the minimized (66px) layout
&.mx_LeftPanel_minimized { &.mx_LeftPanel_minimized {
flex-grow: 0;
min-width: unset; min-width: unset;
width: unset !important; width: unset !important;

2
res/css/structures/_LeftPanelWidget.scss
View file

@ -113,7 +113,7 @@ limitations under the License.
&:hover .mx_LeftPanelWidget_resizerHandle { &:hover .mx_LeftPanelWidget_resizerHandle {
opacity: 0.8; opacity: 0.8;
background-color: $primary-fg-color; background-color: $primary-content;
} }
.mx_LeftPanelWidget_maximizeButton { .mx_LeftPanelWidget_maximizeButton {

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

@ -38,7 +38,7 @@ limitations under the License.
width: 4px !important; width: 4px !important;
border-radius: 4px !important; border-radius: 4px !important;
background-color: $primary-fg-color; background-color: $primary-content;
opacity: 0.8; opacity: 0.8;
} }
} }

11
res/css/structures/_MatrixChat.scss
View file

@ -29,8 +29,6 @@ limitations under the License.
.mx_MatrixChat_wrapper { .mx_MatrixChat_wrapper {
display: flex; display: flex;
flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -42,13 +40,12 @@ limitations under the License.
} }
.mx_MatrixChat { .mx_MatrixChat {
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
order: 2;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
} }
@ -66,8 +63,8 @@ limitations under the License.
} }
/* not the left panel, and not the resize handle, so the roomview/groupview/... */ /* not the left panel, and not the resize handle, so the roomview/groupview/... */
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) { .mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_wrapper) {
background-color: $primary-bg-color; background-color: $background;
flex: 1 1 0; flex: 1 1 0;
min-width: 0; min-width: 0;
@ -94,7 +91,7 @@ limitations under the License.
content: ' '; content: ' ';
background-color: $primary-fg-color; background-color: $primary-content;
opacity: 0.8; opacity: 0.8;
} }
} }

8
res/css/structures/_NotificationPanel.scss
View file

@ -49,7 +49,7 @@ limitations under the License.
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: $tertiary-fg-color; background-color: $tertiary-content;
height: 1px; height: 1px;
opacity: 0.4; opacity: 0.4;
content: ''; content: '';
@ -70,7 +70,7 @@ limitations under the License.
} }
.mx_NotificationPanel .mx_EventTile_roomName a { .mx_NotificationPanel .mx_EventTile_roomName a {
color: $primary-fg-color; color: $primary-content;
} }
.mx_NotificationPanel .mx_EventTile_avatar { .mx_NotificationPanel .mx_EventTile_avatar {
@ -79,7 +79,7 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile, .mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp { .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
color: $primary-fg-color; color: $primary-content;
font-size: $font-12px; font-size: $font-12px;
display: inline; display: inline;
} }
@ -118,7 +118,7 @@ limitations under the License.
} }
.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line { .mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
background-color: $primary-bg-color; background-color: $background;
} }
.mx_NotificationPanel .mx_EventTile_content { .mx_NotificationPanel .mx_EventTile_content {

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

@ -43,7 +43,7 @@ limitations under the License.
.mx_RightPanel_headerButtonGroup { .mx_RightPanel_headerButtonGroup {
height: 100%; height: 100%;
display: flex; display: flex;
background-color: $primary-bg-color; background-color: $background;
padding: 0 9px; padding: 0 9px;
align-items: center; align-items: center;
} }

8
res/css/structures/_RoomDirectory.scss
View file

@ -28,7 +28,7 @@ limitations under the License.
.mx_RoomDirectory { .mx_RoomDirectory {
margin-bottom: 12px; margin-bottom: 12px;
color: $primary-fg-color; color: $primary-content;
word-break: break-word; word-break: break-word;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -71,14 +71,14 @@ limitations under the License.
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-18px; line-height: $font-18px;
color: $primary-fg-color; color: $primary-content;
} }
> p { > p {
margin: 40px auto 60px; margin: 40px auto 60px;
font-size: $font-14px; font-size: $font-14px;
line-height: $font-20px; line-height: $font-20px;
color: $secondary-fg-color; color: $secondary-content;
max-width: 464px; // easier reading max-width: 464px; // easier reading
} }
@ -97,7 +97,7 @@ limitations under the License.
} }
.mx_RoomDirectory_table { .mx_RoomDirectory_table {
color: $primary-fg-color; color: $primary-content;
display: grid; display: grid;
font-size: $font-12px; font-size: $font-12px;
grid-template-columns: max-content auto max-content max-content max-content; grid-template-columns: max-content auto max-content max-content max-content;

12
res/css/structures/_RoomSearch.scss
View file

@ -33,14 +33,14 @@ limitations under the License.
height: 16px; height: 16px;
mask: url('$(res)/img/element-icons/roomlist/search.svg'); mask: url('$(res)/img/element-icons/roomlist/search.svg');
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $secondary-fg-color; background-color: $secondary-content;
margin-left: 7px; margin-left: 7px;
} }
.mx_RoomSearch_input { .mx_RoomSearch_input {
border: none !important; // !important to override default app-wide styles border: none !important; // !important to override default app-wide styles
flex: 1 !important; // !important to override default app-wide styles flex: 1 !important; // !important to override default app-wide styles
color: $primary-fg-color !important; // !important to override default app-wide styles color: $primary-content !important; // !important to override default app-wide styles
padding: 0; padding: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -48,12 +48,12 @@ limitations under the License.
line-height: $font-16px; line-height: $font-16px;
&:not(.mx_RoomSearch_inputExpanded)::placeholder { &:not(.mx_RoomSearch_inputExpanded)::placeholder {
color: $tertiary-fg-color !important; // !important to override default app-wide styles color: $tertiary-content !important; // !important to override default app-wide styles
} }
} }
&.mx_RoomSearch_hasQuery { &.mx_RoomSearch_hasQuery {
border-color: $secondary-fg-color; border-color: $secondary-content;
} }
&.mx_RoomSearch_focused { &.mx_RoomSearch_focused {
@ -62,7 +62,7 @@ limitations under the License.
} }
&.mx_RoomSearch_focused, &.mx_RoomSearch_hasQuery { &.mx_RoomSearch_focused, &.mx_RoomSearch_hasQuery {
background-color: $roomlist-filter-active-bg-color; background-color: $background;
.mx_RoomSearch_clearButton { .mx_RoomSearch_clearButton {
width: 16px; width: 16px;
@ -71,7 +71,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $secondary-fg-color; background-color: $secondary-content;
margin-right: 8px; margin-right: 8px;
} }
} }

10
res/css/structures/_RoomStatusBar.scss
View file

@ -27,7 +27,7 @@ limitations under the License.
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image { .mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
margin-right: -12px; margin-right: -12px;
border: 1px solid $primary-bg-color; border: 1px solid $background;
} }
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial { .mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
@ -39,7 +39,7 @@ limitations under the License.
display: inline-block; display: inline-block;
color: #acacac; color: #acacac;
background-color: #ddd; background-color: #ddd;
border: 1px solid $primary-bg-color; border: 1px solid $background;
border-radius: 40px; border-radius: 40px;
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -171,14 +171,14 @@ limitations under the License.
} }
.mx_RoomStatusBar_connectionLostBar_desc { .mx_RoomStatusBar_connectionLostBar_desc {
color: $primary-fg-color; color: $primary-content;
font-size: $font-13px; font-size: $font-13px;
opacity: 0.5; opacity: 0.5;
padding-bottom: 20px; padding-bottom: 20px;
} }
.mx_RoomStatusBar_resend_link { .mx_RoomStatusBar_resend_link {
color: $primary-fg-color !important; color: $primary-content !important;
text-decoration: underline !important; text-decoration: underline !important;
cursor: pointer; cursor: pointer;
} }
@ -187,7 +187,7 @@ limitations under the License.
height: 50px; height: 50px;
line-height: $font-50px; line-height: $font-50px;
color: $primary-fg-color; color: $primary-content;
opacity: 0.5; opacity: 0.5;
overflow-y: hidden; overflow-y: hidden;
display: block; display: block;

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

@ -14,10 +14,22 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_RoomView_wrapper {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
justify-content: center;
// Contain the amount of layers rendered by constraining what actually needs re-layering via css
contain: strict;
}
.mx_RoomView { .mx_RoomView {
word-wrap: break-word; word-wrap: break-word;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1;
position: relative;
} }
@ -40,7 +52,7 @@ limitations under the License.
pointer-events: none; pointer-events: none;
background-color: $primary-bg-color; background-color: $background;
opacity: 0.95; opacity: 0.95;
position: absolute; position: absolute;
@ -87,7 +99,7 @@ limitations under the License.
left: 0; left: 0;
right: 0; right: 0;
z-index: 3000; z-index: 3000;
background-color: $primary-bg-color; background-color: $background;
} }
.mx_RoomView_auxPanel_hiddenHighlights { .mx_RoomView_auxPanel_hiddenHighlights {
@ -153,7 +165,6 @@ limitations under the License.
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
contain: content;
} }
.mx_RoomView_statusArea { .mx_RoomView_statusArea {
@ -161,7 +172,7 @@ limitations under the License.
flex: 0 0 auto; flex: 0 0 auto;
max-height: 0px; max-height: 0px;
background-color: $primary-bg-color; background-color: $background;
z-index: 1000; z-index: 1000;
overflow: hidden; overflow: hidden;
@ -246,7 +257,7 @@ hr.mx_RoomView_myReadMarker {
} }
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner { .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
background-color: $primary-bg-color; background-color: $background;
} }
.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename { .mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {

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

@ -15,6 +15,7 @@ limitations under the License.
*/ */
.mx_ScrollPanel { .mx_ScrollPanel {
contain: strict;
.mx_RoomView_MessageList { .mx_RoomView_MessageList {
position: relative; position: relative;

86
res/css/structures/_SpaceRoomDirectory.scss → res/css/structures/_SpaceHierarchy.scss
View file

@ -14,21 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License. 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_SpaceRoomDirectory,
.mx_SpaceRoomView_landing { .mx_SpaceRoomView_landing {
.mx_Dialog_title { .mx_Dialog_title {
display: flex; display: flex;
@ -52,7 +37,7 @@ limitations under the License.
> div { > div {
font-weight: 400; font-weight: 400;
color: $secondary-fg-color; color: $secondary-content;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
} }
@ -68,23 +53,29 @@ limitations under the License.
margin: 24px 0 16px; margin: 24px 0 16px;
} }
.mx_SpaceRoomDirectory_noResults { .mx_SpaceHierarchy_noResults {
text-align: center; text-align: center;
> div { > div {
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
color: $secondary-fg-color; color: $secondary-content;
} }
} }
.mx_SpaceRoomDirectory_listHeader { .mx_SpaceHierarchy_listHeader {
display: flex; display: flex;
min-height: 32px; min-height: 32px;
align-items: center; align-items: center;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
color: $primary-fg-color; color: $primary-content;
margin-bottom: 12px;
> h4 {
font-weight: $font-semi-bold;
margin: 0;
}
.mx_AccessibleButton { .mx_AccessibleButton {
padding: 4px 12px; padding: 4px 12px;
@ -105,7 +96,7 @@ limitations under the License.
} }
} }
.mx_SpaceRoomDirectory_error { .mx_SpaceHierarchy_error {
position: relative; position: relative;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
color: $notice-primary-color; color: $notice-primary-color;
@ -124,43 +115,44 @@ limitations under the License.
background-image: url("$(res)/img/element-icons/warning-badge.svg"); background-image: url("$(res)/img/element-icons/warning-badge.svg");
} }
} }
}
.mx_SpaceRoomDirectory_list { .mx_SpaceHierarchy_list {
margin-top: 16px; list-style: none;
padding-bottom: 40px; padding: 0;
margin: 0;
}
.mx_SpaceRoomDirectory_roomCount { .mx_SpaceHierarchy_roomCount {
> h3 { > h3 {
display: inline; display: inline;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-18px; font-size: $font-18px;
line-height: $font-22px; line-height: $font-22px;
color: $primary-fg-color; color: $primary-content;
} }
> span { > span {
margin-left: 8px; margin-left: 8px;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
color: $secondary-fg-color; color: $secondary-content;
} }
} }
.mx_SpaceRoomDirectory_subspace { .mx_SpaceHierarchy_subspace {
.mx_BaseAvatar_image { .mx_BaseAvatar_image {
border-radius: 8px; border-radius: 8px;
} }
} }
.mx_SpaceRoomDirectory_subspace_toggle { .mx_SpaceHierarchy_subspace_toggle {
position: absolute; position: absolute;
left: -1px; left: -1px;
top: 10px; top: 10px;
height: 16px; height: 16px;
width: 16px; width: 16px;
border-radius: 4px; border-radius: 4px;
background-color: $primary-bg-color; background-color: $background;
&::before { &::before {
content: ''; content: '';
@ -171,23 +163,23 @@ limitations under the License.
width: 16px; width: 16px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
background-color: $tertiary-fg-color; background-color: $tertiary-content;
mask-size: 16px; mask-size: 16px;
transform: rotate(270deg); transform: rotate(270deg);
mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
} }
&.mx_SpaceRoomDirectory_subspace_toggle_shown::before { &.mx_SpaceHierarchy_subspace_toggle_shown::before {
transform: rotate(0deg); transform: rotate(0deg);
} }
} }
.mx_SpaceRoomDirectory_subspace_children { .mx_SpaceHierarchy_subspace_children {
position: relative; position: relative;
padding-left: 12px; padding-left: 12px;
} }
.mx_SpaceRoomDirectory_roomTile { .mx_SpaceHierarchy_roomTile {
position: relative; position: relative;
padding: 8px 16px; padding: 8px 16px;
border-radius: 8px; border-radius: 8px;
@ -204,7 +196,7 @@ limitations under the License.
grid-column: 1; grid-column: 1;
} }
.mx_SpaceRoomDirectory_roomTile_name { .mx_SpaceHierarchy_roomTile_name {
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-18px; line-height: $font-18px;
@ -214,7 +206,7 @@ limitations under the License.
.mx_InfoTooltip { .mx_InfoTooltip {
display: inline; display: inline;
margin-left: 12px; margin-left: 12px;
color: $tertiary-fg-color; color: $tertiary-content;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
@ -232,10 +224,10 @@ limitations under the License.
} }
} }
.mx_SpaceRoomDirectory_roomTile_info { .mx_SpaceHierarchy_roomTile_info {
font-size: $font-14px; font-size: $font-14px;
line-height: $font-18px; line-height: $font-18px;
color: $secondary-fg-color; color: $secondary-content;
grid-row: 2; grid-row: 2;
grid-column: 1/3; grid-column: 1/3;
display: -webkit-box; display: -webkit-box;
@ -244,7 +236,7 @@ limitations under the License.
overflow: hidden; overflow: hidden;
} }
.mx_SpaceRoomDirectory_actions { .mx_SpaceHierarchy_actions {
text-align: right; text-align: right;
margin-left: 20px; margin-left: 20px;
grid-column: 3; grid-column: 3;
@ -278,12 +270,12 @@ limitations under the License.
} }
} }
li.mx_SpaceRoomDirectory_roomTileWrapper { li.mx_SpaceHierarchy_roomTileWrapper {
list-style: none; list-style: none;
} }
.mx_SpaceRoomDirectory_roomTile, .mx_SpaceHierarchy_roomTile,
.mx_SpaceRoomDirectory_subspace_children { .mx_SpaceHierarchy_subspace_children {
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
@ -295,12 +287,12 @@ limitations under the License.
} }
} }
.mx_SpaceRoomDirectory_actions { .mx_SpaceHierarchy_actions {
.mx_SpaceRoomDirectory_actionsText { .mx_SpaceHierarchy_actionsText {
font-weight: normal; font-weight: normal;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
} }
} }
@ -311,7 +303,7 @@ limitations under the License.
margin: 20px 0; margin: 20px 0;
} }
.mx_SpaceRoomDirectory_createRoom { .mx_SpaceHierarchy_createRoom {
display: block; display: block;
margin: 16px auto 0; margin: 16px auto 0;
width: max-content; width: max-content;

9
res/css/structures/_SpacePanel.scss
View file

@ -20,13 +20,16 @@ $gutterSize: 16px;
$activeBorderTransparentGap: 1px; $activeBorderTransparentGap: 1px;
$activeBackgroundColor: $roomtile-selected-bg-color; $activeBackgroundColor: $roomtile-selected-bg-color;
$activeBorderColor: $secondary-fg-color; $activeBorderColor: $secondary-content;
.mx_SpacePanel { .mx_SpacePanel {
flex: 0 0 auto;
background-color: $groupFilterPanel-bg-color; background-color: $groupFilterPanel-bg-color;
flex: 0 0 auto;
padding: 0; padding: 0;
margin: 0; margin: 0;
position: relative;
// Fix for the blurred avatar-background
z-index: 1;
// Create another flexbox so the Panel fills the container // Create another flexbox so the Panel fills the container
display: flex; display: flex;
@ -235,7 +238,7 @@ $activeBorderColor: $secondary-fg-color;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-image: url('$(res)/img/element-icons/context-menu.svg'); mask-image: url('$(res)/img/element-icons/context-menu.svg');
background: $primary-fg-color; background: $primary-content;
} }
} }
} }

57
res/css/structures/_SpaceRoomView.scss
View file

@ -32,7 +32,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
> span { > span {
color: $secondary-fg-color; color: $secondary-content;
} }
&::before { &::before {
@ -45,7 +45,7 @@ $SpaceRoomViewInnerWidth: 428px;
mask-position: center; mask-position: center;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: 24px; mask-size: 24px;
background-color: $tertiary-fg-color; background-color: $tertiary-content;
} }
&:hover { &:hover {
@ -56,12 +56,15 @@ $SpaceRoomViewInnerWidth: 428px;
} }
> span { > span {
color: $primary-fg-color; color: $primary-content;
} }
} }
} }
.mx_SpaceRoomView { .mx_SpaceRoomView {
overflow-y: auto;
flex: 1;
.mx_MainSplit > div:first-child { .mx_MainSplit > div:first-child {
padding: 80px 60px; padding: 80px 60px;
flex-grow: 1; flex-grow: 1;
@ -72,13 +75,13 @@ $SpaceRoomViewInnerWidth: 428px;
margin: 0; margin: 0;
font-size: $font-24px; font-size: $font-24px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
color: $primary-fg-color; color: $primary-content;
width: max-content; width: max-content;
} }
.mx_SpaceRoomView_description { .mx_SpaceRoomView_description {
font-size: $font-15px; font-size: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
margin-top: 12px; margin-top: 12px;
margin-bottom: 24px; margin-bottom: 24px;
max-width: $SpaceRoomViewInnerWidth; max-width: $SpaceRoomViewInnerWidth;
@ -154,7 +157,7 @@ $SpaceRoomViewInnerWidth: 428px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-14px; font-size: $font-14px;
line-height: $font-24px; line-height: $font-24px;
color: $primary-fg-color; color: $primary-content;
margin-top: 24px; margin-top: 24px;
position: relative; position: relative;
padding-left: 24px; padding-left: 24px;
@ -176,7 +179,19 @@ $SpaceRoomViewInnerWidth: 428px;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg'); mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
background-color: $secondary-fg-color; background-color: $secondary-content;
}
}
.mx_SpaceRoomView_preview_migratedCommunity {
margin-bottom: 16px;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid $input-border-color;
width: max-content;
.mx_BaseAvatar {
margin-right: 4px;
} }
} }
@ -195,7 +210,7 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SpaceRoomView_preview_inviter_mxid { .mx_SpaceRoomView_preview_inviter_mxid {
line-height: $font-24px; line-height: $font-24px;
color: $secondary-fg-color; color: $secondary-content;
} }
} }
} }
@ -212,7 +227,7 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SpaceRoomView_preview_topic { .mx_SpaceRoomView_preview_topic {
font-size: $font-14px; font-size: $font-14px;
line-height: $font-22px; line-height: $font-22px;
color: $secondary-fg-color; color: $secondary-content;
margin: 20px 0; margin: 20px 0;
max-height: 160px; max-height: 160px;
overflow-y: auto; overflow-y: auto;
@ -236,6 +251,7 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SpaceRoomView_landing { .mx_SpaceRoomView_landing {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 0;
> .mx_BaseAvatar_image, > .mx_BaseAvatar_image,
> .mx_BaseAvatar > .mx_BaseAvatar_image { > .mx_BaseAvatar > .mx_BaseAvatar_image {
@ -245,7 +261,7 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SpaceRoomView_landing_name { .mx_SpaceRoomView_landing_name {
margin: 24px 0 16px; margin: 24px 0 16px;
font-size: $font-15px; font-size: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
> span { > span {
display: inline-block; display: inline-block;
@ -318,7 +334,7 @@ $SpaceRoomViewInnerWidth: 428px;
top: 0; top: 0;
height: 24px; height: 24px;
width: 24px; width: 24px;
background: $tertiary-fg-color; background: $tertiary-content;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
@ -342,16 +358,11 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SpaceFeedbackPrompt { .mx_SpaceFeedbackPrompt {
padding: 7px; // 8px - 1px border padding: 7px; // 8px - 1px border
border: 1px solid $menu-border-color; border: 1px solid rgba($primary-content, .1);
border-radius: 8px; border-radius: 8px;
width: max-content; width: max-content;
margin: 0 0 -40px auto; // collapse its own height to not push other components down margin: 0 0 -40px auto; // collapse its own height to not push other components down
} }
.mx_SpaceRoomDirectory_list {
// we don't want this container to get forced into the flexbox layout
display: contents;
}
} }
.mx_SpaceRoomView_privateScope { .mx_SpaceRoomView_privateScope {
@ -376,7 +387,7 @@ $SpaceRoomViewInnerWidth: 428px;
width: 432px; width: 432px;
border-radius: 8px; border-radius: 8px;
background-color: $info-plinth-bg-color; background-color: $info-plinth-bg-color;
color: $secondary-fg-color; color: $secondary-content;
box-sizing: border-box; box-sizing: border-box;
> h3 { > h3 {
@ -403,7 +414,7 @@ $SpaceRoomViewInnerWidth: 428px;
position: absolute; position: absolute;
top: 14px; top: 14px;
left: 14px; left: 14px;
background-color: $secondary-fg-color; background-color: $secondary-content;
} }
} }
@ -426,7 +437,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
.mx_SpaceRoomView_inviteTeammates_buttons { .mx_SpaceRoomView_inviteTeammates_buttons {
color: $secondary-fg-color; color: $secondary-content;
margin-top: 28px; margin-top: 28px;
.mx_AccessibleButton { .mx_AccessibleButton {
@ -442,7 +453,7 @@ $SpaceRoomViewInnerWidth: 428px;
width: 24px; width: 24px;
top: 0; top: 0;
left: 0; left: 0;
background-color: $secondary-fg-color; background-color: $secondary-content;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
@ -461,7 +472,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
.mx_SpaceRoomView_info { .mx_SpaceRoomView_info {
color: $secondary-fg-color; color: $secondary-content;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
margin: 20px 0; margin: 20px 0;
@ -480,7 +491,7 @@ $SpaceRoomViewInnerWidth: 428px;
left: -2px; left: -2px;
mask-position: center; mask-position: center;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $tertiary-fg-color; background-color: $tertiary-content;
} }
} }

2
res/css/structures/_TabbedView.scss
View file

@ -80,7 +80,7 @@ limitations under the License.
.mx_TabbedView_tabLabel_text { .mx_TabbedView_tabLabel_text {
font-size: 15px; font-size: 15px;
color: $tertiary-fg-color; color: $tertiary-content;
} }
} }

12
res/css/structures/_ToastContainer.scss
View file

@ -28,7 +28,7 @@ limitations under the License.
margin: 0 4px; margin: 0 4px;
grid-row: 2 / 4; grid-row: 2 / 4;
grid-column: 1; grid-column: 1;
background-color: $toast-bg-color; background-color: $system;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
border-radius: 8px; border-radius: 8px;
} }
@ -36,8 +36,8 @@ limitations under the License.
.mx_Toast_toast { .mx_Toast_toast {
grid-row: 1 / 3; grid-row: 1 / 3;
grid-column: 1; grid-column: 1;
color: $primary-fg-color; background-color: $system;
background-color: $toast-bg-color; color: $primary-content;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
@ -63,7 +63,7 @@ limitations under the License.
&.mx_Toast_icon_verification::after { &.mx_Toast_icon_verification::after {
mask-image: url("$(res)/img/e2e/normal.svg"); mask-image: url("$(res)/img/e2e/normal.svg");
background-color: $primary-fg-color; background-color: $primary-content;
} }
&.mx_Toast_icon_verification_warning { &.mx_Toast_icon_verification_warning {
@ -82,7 +82,7 @@ limitations under the License.
&.mx_Toast_icon_secure_backup::after { &.mx_Toast_icon_secure_backup::after {
mask-image: url('$(res)/img/feather-customised/secure-backup.svg'); mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
background-color: $primary-fg-color; background-color: $primary-content;
} }
.mx_Toast_title, .mx_Toast_body { .mx_Toast_title, .mx_Toast_body {
@ -163,7 +163,7 @@ limitations under the License.
} }
.mx_Toast_detail { .mx_Toast_detail {
color: $secondary-fg-color; color: $secondary-content;
} }
.mx_Toast_deviceID { .mx_Toast_deviceID {

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

@ -35,7 +35,7 @@ limitations under the License.
// we cheat opacity on the theme colour with an after selector here // we cheat opacity on the theme colour with an after selector here
&::after { &::after {
content: ''; content: '';
border-bottom: 1px solid $primary-fg-color; // XXX: Variable abuse border-bottom: 1px solid $primary-content;
opacity: 0.2; opacity: 0.2;
display: block; display: block;
padding-top: 8px; padding-top: 8px;
@ -58,7 +58,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $tertiary-fg-color; background: $tertiary-content;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
} }
} }
@ -176,7 +176,7 @@ limitations under the License.
width: 85%; width: 85%;
opacity: 0.2; opacity: 0.2;
border: none; border: none;
border-bottom: 1px solid $primary-fg-color; // XXX: Variable abuse border-bottom: 1px solid $primary-content;
} }
&.mx_IconizedContextMenu { &.mx_IconizedContextMenu {
@ -292,7 +292,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $primary-fg-color; background: $primary-content;
} }
} }

2
res/css/structures/_ViewSource.scss
View file

@ -24,7 +24,7 @@ limitations under the License.
.mx_ViewSource_heading { .mx_ViewSource_heading {
font-size: $font-17px; font-size: $font-17px;
font-weight: 400; font-weight: 400;
color: $primary-fg-color; color: $primary-content;
margin-top: 0.7em; margin-top: 0.7em;
} }

2
res/css/views/audio_messages/_AudioPlayer.scss
View file

@ -33,7 +33,7 @@ limitations under the License.
} }
.mx_AudioPlayer_mediaName { .mx_AudioPlayer_mediaName {
color: $primary-fg-color; color: $primary-content;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-15px; line-height: $font-15px;
text-overflow: ellipsis; text-overflow: ellipsis;

10
res/css/views/audio_messages/_SeekBar.scss
View file

@ -27,7 +27,7 @@ limitations under the License.
width: 100%; width: 100%;
height: 1px; height: 1px;
background: $quaternary-fg-color; background: $quaternary-content;
outline: none; // remove blue selection border outline: none; // remove blue selection border
position: relative; // for before+after pseudo elements later on position: relative; // for before+after pseudo elements later on
@ -42,7 +42,7 @@ limitations under the License.
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 8px; border-radius: 8px;
background-color: $tertiary-fg-color; background-color: $tertiary-content;
cursor: pointer; cursor: pointer;
} }
@ -50,7 +50,7 @@ limitations under the License.
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 8px; border-radius: 8px;
background-color: $tertiary-fg-color; background-color: $tertiary-content;
cursor: pointer; cursor: pointer;
// Firefox adds a border on the thumb // Firefox adds a border on the thumb
@ -63,7 +63,7 @@ limitations under the License.
// in firefox, so it's just wasted CPU/GPU time. // in firefox, so it's just wasted CPU/GPU time.
&::before { // ::before to ensure it ends up under the thumb &::before { // ::before to ensure it ends up under the thumb
content: ''; content: '';
background-color: $tertiary-fg-color; background-color: $tertiary-content;
// Absolute positioning to ensure it overlaps with the existing bar // Absolute positioning to ensure it overlaps with the existing bar
position: absolute; position: absolute;
@ -81,7 +81,7 @@ limitations under the License.
// This is firefox's built-in support for the above, with 100% less hacks. // This is firefox's built-in support for the above, with 100% less hacks.
&::-moz-range-progress { &::-moz-range-progress {
background-color: $tertiary-fg-color; background-color: $tertiary-content;
height: 1px; height: 1px;
} }

2
res/css/views/auth/_AuthButtons.scss
View file

@ -39,7 +39,7 @@ limitations under the License.
min-width: 80px; min-width: 80px;
background-color: $accent-color; background-color: $accent-color;
color: $primary-bg-color; color: $background;
cursor: pointer; cursor: pointer;

2
res/css/views/avatars/_DecoratedRoomAvatar.scss
View file

@ -47,7 +47,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $secondary-fg-color; background: $secondary-content;
mask-image: url('$(res)/img/globe.svg'); mask-image: url('$(res)/img/globe.svg');
} }

10
res/css/views/beta/_BetaCard.scss
View file

@ -29,7 +29,7 @@ limitations under the License.
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-18px; font-size: $font-18px;
line-height: $font-22px; line-height: $font-22px;
color: $primary-fg-color; color: $primary-content;
margin: 4px 0 14px; margin: 4px 0 14px;
.mx_BetaCard_betaPill { .mx_BetaCard_betaPill {
@ -40,7 +40,7 @@ limitations under the License.
.mx_BetaCard_caption { .mx_BetaCard_caption {
font-size: $font-15px; font-size: $font-15px;
line-height: $font-20px; line-height: $font-20px;
color: $secondary-fg-color; color: $secondary-content;
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -54,7 +54,7 @@ limitations under the License.
.mx_BetaCard_disclaimer { .mx_BetaCard_disclaimer {
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
margin-top: 20px; margin-top: 20px;
} }
} }
@ -72,13 +72,13 @@ limitations under the License.
margin: 16px 0 0; margin: 16px 0 0;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
color: $primary-fg-color; color: $primary-content;
.mx_SettingsFlag_microcopy { .mx_SettingsFlag_microcopy {
margin-top: 4px; margin-top: 4px;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
} }
} }
} }

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

@ -36,7 +36,7 @@ limitations under the License.
// //
// Therefore, we just hack in a line and border the thing ourselves // Therefore, we just hack in a line and border the thing ourselves
&::before { &::before {
border-top: 1px solid $primary-fg-color; border-top: 1px solid $primary-content;
opacity: 0.1; opacity: 0.1;
content: ''; content: '';
@ -63,7 +63,7 @@ limitations under the License.
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
text-decoration: none; text-decoration: none;
color: $primary-fg-color; color: $primary-content;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
@ -119,7 +119,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $primary-fg-color; background: $primary-content;
} }
} }

2
res/css/views/context_menus/_MessageContextMenu.scss
View file

@ -30,7 +30,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $primary-fg-color; background: $primary-content;
} }
} }

2
res/css/views/context_menus/_StatusMessageContextMenu.scss
View file

@ -27,7 +27,7 @@ input.mx_StatusMessageContextMenu_message {
border-radius: 4px; border-radius: 4px;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
padding: 6.5px 11px; padding: 6.5px 11px;
background-color: $primary-bg-color; background-color: $background;
font-weight: normal; font-weight: normal;
margin: 0 0 10px; margin: 0 0 10px;
} }

4
res/css/views/context_menus/_TagTileContextMenu.scss
View file

@ -51,6 +51,10 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/hide.svg'); mask-image: url('$(res)/img/element-icons/hide.svg');
} }
.mx_TagTileContextMenu_createSpace::before {
mask-image: url('$(res)/img/element-icons/message/fwd.svg');
}
.mx_TagTileContextMenu_separator { .mx_TagTileContextMenu_separator {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;

16
res/css/views/dialogs/_AddExistingToSpaceDialog.scss
View file

@ -44,7 +44,7 @@ limitations under the License.
> h3 { > h3 {
margin: 0; margin: 0;
color: $secondary-fg-color; color: $secondary-content;
font-size: $font-12px; font-size: $font-12px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
line-height: $font-15px; line-height: $font-15px;
@ -66,7 +66,7 @@ limitations under the License.
flex-grow: 1; flex-grow: 1;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
.mx_ProgressBar { .mx_ProgressBar {
height: 8px; height: 8px;
@ -79,7 +79,7 @@ limitations under the License.
margin-top: 8px; margin-top: 8px;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
color: $primary-fg-color; color: $primary-content;
} }
> * { > * {
@ -105,7 +105,7 @@ limitations under the License.
margin-top: 4px; margin-top: 4px;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $primary-fg-color; color: $primary-content;
} }
} }
@ -126,7 +126,7 @@ limitations under the License.
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
background-color: $primary-fg-color; background-color: $primary-content;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
@ -145,7 +145,7 @@ limitations under the License.
.mx_AddExistingToSpaceDialog { .mx_AddExistingToSpaceDialog {
width: 480px; width: 480px;
color: $primary-fg-color; color: $primary-content;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -188,7 +188,7 @@ limitations under the License.
padding-left: 0; padding-left: 0;
flex: unset; flex: unset;
height: unset; height: unset;
color: $secondary-fg-color; color: $secondary-content;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
@ -221,7 +221,7 @@ limitations under the License.
} }
.mx_SubspaceSelector_onlySpace { .mx_SubspaceSelector_onlySpace {
color: $secondary-fg-color; color: $secondary-content;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
} }

2
res/css/views/dialogs/_CommunityPrototypeInviteDialog.scss
View file

@ -65,7 +65,7 @@ limitations under the License.
.mx_CommunityPrototypeInviteDialog_personName { .mx_CommunityPrototypeInviteDialog_personName {
font-weight: 600; font-weight: 600;
font-size: $font-14px; font-size: $font-14px;
color: $primary-fg-color; color: $primary-content;
margin-left: 7px; margin-left: 7px;
} }

4
res/css/views/dialogs/_ConfirmUserActionDialog.scss
View file

@ -35,8 +35,8 @@ limitations under the License.
.mx_ConfirmUserActionDialog_reasonField { .mx_ConfirmUserActionDialog_reasonField {
font-size: $font-14px; font-size: $font-14px;
color: $primary-fg-color; color: $primary-content;
background-color: $primary-bg-color; background-color: $background;
border-radius: 3px; border-radius: 3px;
border: solid 1px $input-border-color; border: solid 1px $input-border-color;

4
res/css/views/dialogs/_CreateGroupDialog.scss
View file

@ -29,8 +29,8 @@ limitations under the License.
border-radius: 3px; border-radius: 3px;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
padding: 9px; padding: 9px;
color: $primary-fg-color; color: $primary-content;
background-color: $primary-bg-color; background-color: $background;
} }
.mx_CreateGroupDialog_input_hasPrefixAndSuffix { .mx_CreateGroupDialog_input_hasPrefixAndSuffix {

4
res/css/views/dialogs/_CreateRoomDialog.scss
View file

@ -55,8 +55,8 @@ limitations under the License.
border-radius: 3px; border-radius: 3px;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
padding: 9px; padding: 9px;
color: $primary-fg-color; color: $primary-content;
background-color: $primary-bg-color; background-color: $background;
width: 100%; width: 100%;
} }

187
res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss Normal file
View file

@ -0,0 +1,187 @@
/*
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_CreateSpaceFromCommunityDialog_wrapper {
.mx_Dialog {
display: flex;
flex-direction: column;
}
}
.mx_CreateSpaceFromCommunityDialog {
width: 480px;
color: $primary-content;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
min-height: 0;
.mx_CreateSpaceFromCommunityDialog_content {
> p {
font-size: $font-15px;
line-height: $font-24px;
&:first-of-type {
margin-top: 0;
}
&.mx_CreateSpaceFromCommunityDialog_flairNotice {
font-size: $font-12px;
line-height: $font-15px;
}
}
.mx_SpaceBasicSettings {
> p {
font-size: $font-12px;
line-height: $font-15px;
margin: 16px 0;
}
.mx_Field_textarea {
margin-bottom: 0;
}
}
.mx_JoinRuleDropdown .mx_Dropdown_menu {
width: auto !important; // override fixed width
}
.mx_CreateSpaceFromCommunityDialog_nonPublicSpacer {
height: 63px; // balance the height of the missing room alias field to prevent modal bouncing
}
}
.mx_CreateSpaceFromCommunityDialog_footer {
display: flex;
margin-top: 20px;
> span {
flex-grow: 1;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
.mx_ProgressBar {
height: 8px;
width: 100%;
@mixin ProgressBarBorderRadius 8px;
}
.mx_CreateSpaceFromCommunityDialog_progressText {
margin-top: 8px;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
}
> * {
vertical-align: middle;
}
}
.mx_CreateSpaceFromCommunityDialog_error {
padding-left: 12px;
> img {
align-self: center;
}
.mx_CreateSpaceFromCommunityDialog_errorHeading {
font-weight: $font-semi-bold;
font-size: $font-15px;
line-height: $font-18px;
color: $notice-primary-color;
}
.mx_CreateSpaceFromCommunityDialog_errorCaption {
margin-top: 4px;
font-size: $font-12px;
line-height: $font-15px;
color: $primary-content;
}
}
.mx_AccessibleButton {
display: inline-block;
align-self: center;
}
.mx_AccessibleButton_kind_primary {
padding: 8px 36px;
margin-left: 24px;
}
.mx_AccessibleButton_kind_primary_outline {
margin-left: auto;
}
.mx_CreateSpaceFromCommunityDialog_retryButton {
margin-left: 12px;
padding-left: 24px;
position: relative;
&::before {
content: '';
position: absolute;
background-color: $primary-content;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/retry.svg');
width: 18px;
height: 18px;
left: 0;
}
}
.mx_AccessibleButton_kind_link {
padding: 0;
}
}
}
.mx_CreateSpaceFromCommunityDialog_SuccessInfoDialog {
.mx_InfoDialog {
max-width: 500px;
}
.mx_AccessibleButton_kind_link {
padding: 0;
}
.mx_CreateSpaceFromCommunityDialog_SuccessInfoDialog_checkmark {
position: relative;
border-radius: 50%;
border: 3px solid $accent-color;
width: 68px;
height: 68px;
margin: 12px auto 32px;
&::before {
width: inherit;
height: inherit;
content: '';
position: absolute;
background-color: $accent-color;
mask-repeat: no-repeat;
mask-position: center;
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
mask-size: 48px;
}
}
}

4
res/css/views/dialogs/_CreateSubspaceDialog.scss
View file

@ -23,7 +23,7 @@ limitations under the License.
.mx_CreateSubspaceDialog { .mx_CreateSubspaceDialog {
width: 480px; width: 480px;
color: $primary-fg-color; color: $primary-content;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -57,7 +57,7 @@ limitations under the License.
flex-grow: 1; flex-grow: 1;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
> * { > * {
vertical-align: middle; vertical-align: middle;

2
res/css/views/dialogs/_FeedbackDialog.scss
View file

@ -33,7 +33,7 @@ limitations under the License.
padding-left: 52px; padding-left: 52px;
> p { > p {
color: $tertiary-fg-color; color: $tertiary-content;
} }
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {

4
res/css/views/dialogs/_ForwardDialog.scss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_ForwardDialog { .mx_ForwardDialog {
width: 520px; width: 520px;
color: $primary-fg-color; color: $primary-content;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -25,7 +25,7 @@ limitations under the License.
> h3 { > h3 {
margin: 0 0 6px; margin: 0 0 6px;
color: $secondary-fg-color; color: $secondary-content;
font-size: $font-12px; font-size: $font-12px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
line-height: $font-15px; line-height: $font-15px;

2
res/css/views/dialogs/_GenericFeatureFeedbackDialog.scss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_GenericFeatureFeedbackDialog { .mx_GenericFeatureFeedbackDialog {
.mx_GenericFeatureFeedbackDialog_subheading { .mx_GenericFeatureFeedbackDialog_subheading {
color: $primary-fg-color; color: $primary-content;
font-size: $font-14px; font-size: $font-14px;
line-height: $font-20px; line-height: $font-20px;
margin-bottom: 24px; margin-bottom: 24px;

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

@ -70,11 +70,11 @@ limitations under the License.
} }
.mx_HostSignupDialog_text_dark { .mx_HostSignupDialog_text_dark {
color: $primary-fg-color; color: $primary-content;
} }
.mx_HostSignupDialog_text_light { .mx_HostSignupDialog_text_light {
color: $secondary-fg-color; color: $secondary-content;
} }
.mx_HostSignup_maximize_button { .mx_HostSignup_maximize_button {

16
res/css/views/dialogs/_InviteDialog.scss
View file

@ -56,7 +56,7 @@ limitations under the License.
box-sizing: border-box; box-sizing: border-box;
min-width: 40%; min-width: 40%;
flex: 1 !important; flex: 1 !important;
color: $primary-fg-color !important; color: $primary-content !important;
} }
} }
@ -94,7 +94,7 @@ limitations under the License.
} }
> span { > span {
color: $primary-fg-color; color: $primary-content;
} }
.mx_InviteDialog_subname { .mx_InviteDialog_subname {
@ -110,7 +110,7 @@ limitations under the License.
font-size: $font-14px; font-size: $font-14px;
> span { > span {
color: $primary-fg-color; color: $primary-content;
font-weight: 600; font-weight: 600;
} }
@ -220,7 +220,7 @@ limitations under the License.
.mx_InviteDialog_roomTile_name { .mx_InviteDialog_roomTile_name {
font-weight: 600; font-weight: 600;
font-size: $font-14px; font-size: $font-14px;
color: $primary-fg-color; color: $primary-content;
margin-left: 7px; margin-left: 7px;
} }
@ -352,7 +352,7 @@ limitations under the License.
border-right: 0; border-right: 0;
border-radius: 0; border-radius: 0;
margin-top: 0; margin-top: 0;
border-color: $quaternary-fg-color; border-color: $quaternary-content;
input { input {
font-size: 18px; font-size: 18px;
@ -418,7 +418,7 @@ limitations under the License.
> h4 { > h4 {
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
color: $secondary-fg-color; color: $secondary-content;
font-weight: normal; font-weight: normal;
} }
@ -432,14 +432,14 @@ limitations under the License.
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
color: $primary-fg-color; color: $primary-content;
} }
.mx_InviteDialog_multiInviterError_entry_userId { .mx_InviteDialog_multiInviterError_entry_userId {
margin-left: 6px; margin-left: 6px;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $tertiary-fg-color; color: $tertiary-content;
} }
} }

4
res/css/views/dialogs/_JoinRuleDropdown.scss
View file

@ -19,7 +19,7 @@ limitations under the License.
font-weight: normal; font-weight: normal;
font-family: $font-family; font-family: $font-family;
font-size: $font-14px; font-size: $font-14px;
color: $primary-fg-color; color: $primary-content;
.mx_Dropdown_input { .mx_Dropdown_input {
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
@ -44,7 +44,7 @@ limitations under the License.
top: 8px; top: 8px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
background-color: $secondary-fg-color; background-color: $secondary-content;
} }
} }
} }

6
res/css/views/dialogs/_LeaveSpaceDialog.scss
View file

@ -63,7 +63,7 @@ limitations under the License.
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
&::before { &::before {
content: ''; content: '';
@ -72,7 +72,7 @@ limitations under the License.
top: calc(50% - 8px); // vertical centering top: calc(50% - 8px); // vertical centering
height: 16px; height: 16px;
width: 16px; width: 16px;
background-color: $secondary-fg-color; background-color: $secondary-content;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg'); mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
@ -81,7 +81,7 @@ limitations under the License.
} }
> p { > p {
color: $primary-fg-color; color: $primary-content;
} }
} }

10
res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss
View file

@ -23,7 +23,7 @@ limitations under the License.
.mx_ManageRestrictedJoinRuleDialog { .mx_ManageRestrictedJoinRuleDialog {
width: 480px; width: 480px;
color: $primary-fg-color; color: $primary-content;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -52,7 +52,7 @@ limitations under the License.
> h3 { > h3 {
margin: 0; margin: 0;
color: $secondary-fg-color; color: $secondary-content;
font-size: $font-12px; font-size: $font-12px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
line-height: $font-15px; line-height: $font-15px;
@ -85,7 +85,7 @@ limitations under the License.
margin-top: 8px; margin-top: 8px;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $tertiary-fg-color; color: $tertiary-content;
} }
.mx_Checkbox { .mx_Checkbox {
@ -113,7 +113,7 @@ limitations under the License.
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
&::before { &::before {
content: ''; content: '';
@ -122,7 +122,7 @@ limitations under the License.
top: calc(50% - 8px); // vertical centering top: calc(50% - 8px); // vertical centering
height: 16px; height: 16px;
width: 16px; width: 16px;
background-color: $secondary-fg-color; background-color: $secondary-content;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg'); mask-image: url('$(res)/img/element-icons/room/room-summary.svg');

2
res/css/views/dialogs/_MessageEditHistoryDialog.scss
View file

@ -37,7 +37,7 @@ limitations under the License.
list-style-type: none; list-style-type: none;
font-size: $font-14px; font-size: $font-14px;
padding: 0; padding: 0;
color: $primary-fg-color; color: $primary-content;
span.mx_EditHistoryMessage_deletion, span.mx_EditHistoryMessage_insertion { span.mx_EditHistoryMessage_deletion, span.mx_EditHistoryMessage_insertion {
padding: 0px 2px; padding: 0px 2px;

2
res/css/views/dialogs/_RegistrationEmailPromptDialog.scss
View file

@ -19,7 +19,7 @@ limitations under the License.
.mx_Dialog_content { .mx_Dialog_content {
margin-bottom: 24px; margin-bottom: 24px;
color: $tertiary-fg-color; color: $tertiary-content;
} }
.mx_Dialog_primary { .mx_Dialog_primary {

4
res/css/views/dialogs/_RoomSettingsDialogBridges.scss
View file

@ -72,7 +72,7 @@ limitations under the License.
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
font-size: 16pt; font-size: 16pt;
color: $primary-fg-color; color: $primary-content;
} }
> * { > * {
@ -81,7 +81,7 @@ limitations under the License.
} }
.workspace-channel-details { .workspace-channel-details {
color: $primary-fg-color; color: $primary-content;
font-weight: 600; font-weight: 600;
.channel { .channel {

4
res/css/views/dialogs/_ServerOfflineDialog.scss
View file

@ -17,10 +17,10 @@ limitations under the License.
.mx_ServerOfflineDialog { .mx_ServerOfflineDialog {
.mx_ServerOfflineDialog_content { .mx_ServerOfflineDialog_content {
padding-right: 85px; padding-right: 85px;
color: $primary-fg-color; color: $primary-content;
hr { hr {
border-color: $primary-fg-color; border-color: $primary-content;
opacity: 0.1; opacity: 0.1;
border-bottom: none; border-bottom: none;
} }

4
res/css/views/dialogs/_ServerPickerDialog.scss
View file

@ -22,7 +22,7 @@ limitations under the License.
margin-bottom: 0; margin-bottom: 0;
> p { > p {
color: $secondary-fg-color; color: $secondary-content;
font-size: $font-14px; font-size: $font-14px;
margin: 16px 0; margin: 16px 0;
@ -38,7 +38,7 @@ limitations under the License.
> h4 { > h4 {
font-size: $font-15px; font-size: $font-15px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
color: $secondary-fg-color; color: $secondary-content;
margin-left: 8px; margin-left: 8px;
} }

2
res/css/views/dialogs/_SetEmailDialog.scss
View file

@ -19,7 +19,7 @@ limitations under the License.
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
padding: 9px; padding: 9px;
color: $input-fg-color; color: $input-fg-color;
background-color: $primary-bg-color; background-color: $background;
font-size: $font-15px; font-size: $font-15px;
width: 100%; width: 100%;
max-width: 280px; max-width: 280px;

6
res/css/views/dialogs/_SpaceSettingsDialog.scss
View file

@ -15,7 +15,7 @@ limitations under the License.
*/ */
.mx_SpaceSettingsDialog { .mx_SpaceSettingsDialog {
color: $primary-fg-color; color: $primary-content;
.mx_SpaceSettings_errorText { .mx_SpaceSettings_errorText {
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
@ -50,13 +50,13 @@ limitations under the License.
.mx_RadioButton_content { .mx_RadioButton_content {
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
line-height: $font-18px; line-height: $font-18px;
color: $primary-fg-color; color: $primary-content;
} }
& + span { & + span {
font-size: $font-15px; font-size: $font-15px;
line-height: $font-18px; line-height: $font-18px;
color: $secondary-fg-color; color: $secondary-content;
margin-left: 26px; margin-left: 26px;
} }
} }

2
res/css/views/dialogs/security/_AccessSecretStorageDialog.scss
View file

@ -44,7 +44,7 @@ limitations under the License.
margin-right: 8px; margin-right: 8px;
position: relative; position: relative;
top: 5px; top: 5px;
background-color: $primary-fg-color; background-color: $primary-content;
} }
.mx_AccessSecretStorageDialog_resetBadge::before { .mx_AccessSecretStorageDialog_resetBadge::before {

4
res/css/views/dialogs/security/_CreateSecretStorageDialog.scss
View file

@ -56,7 +56,7 @@ limitations under the License.
margin-right: 8px; margin-right: 8px;
position: relative; position: relative;
top: 5px; top: 5px;
background-color: $primary-fg-color; background-color: $primary-content;
} }
.mx_CreateSecretStorageDialog_secureBackupTitle::before { .mx_CreateSecretStorageDialog_secureBackupTitle::before {
@ -101,7 +101,7 @@ limitations under the License.
margin-right: 8px; margin-right: 8px;
position: relative; position: relative;
top: 5px; top: 5px;
background-color: $primary-fg-color; background-color: $primary-content;
} }
.mx_CreateSecretStorageDialog_optionIcon_securePhrase { .mx_CreateSecretStorageDialog_optionIcon_securePhrase {

2
res/css/views/dialogs/security/_KeyBackupFailedDialog.scss
View file

@ -26,7 +26,7 @@ limitations under the License.
&::before { &::before {
mask: url("$(res)/img/e2e/lock-warning-filled.svg"); mask: url("$(res)/img/e2e/lock-warning-filled.svg");
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $primary-fg-color; background-color: $primary-content;
content: ""; content: "";
position: absolute; position: absolute;
top: -6px; top: -6px;

4
res/css/views/directory/_NetworkDropdown.scss
View file

@ -34,7 +34,7 @@ limitations under the License.
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
border: 1px solid $dialog-close-fg-color; border: 1px solid $dialog-close-fg-color;
background-color: $primary-bg-color; background-color: $background;
max-height: calc(100vh - 20px); // allow 10px padding on both top and bottom max-height: calc(100vh - 20px); // allow 10px padding on both top and bottom
overflow-y: auto; overflow-y: auto;
} }
@ -153,7 +153,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg'); mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
background-color: $primary-fg-color; background-color: $primary-content;
} }
.mx_NetworkDropdown_handle_server { .mx_NetworkDropdown_handle_server {

6
res/css/views/elements/_AddressSelector.scss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_AddressSelector { .mx_AddressSelector {
position: absolute; position: absolute;
background-color: $primary-bg-color; background-color: $background;
width: 485px; width: 485px;
max-height: 116px; max-height: 116px;
overflow-y: auto; overflow-y: auto;
@ -31,8 +31,8 @@ limitations under the License.
} }
.mx_AddressSelector_addressListElement .mx_AddressTile { .mx_AddressSelector_addressListElement .mx_AddressTile {
background-color: $primary-bg-color; background-color: $background;
border: solid 1px $primary-bg-color; border: solid 1px $background;
} }
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected { .mx_AddressSelector_addressListElement.mx_AddressSelector_selected {

2
res/css/views/elements/_AddressTile.scss
View file

@ -20,7 +20,7 @@ limitations under the License.
background-color: rgba(74, 73, 74, 0.1); background-color: rgba(74, 73, 74, 0.1);
border: solid 1px $input-border-color; border: solid 1px $input-border-color;
line-height: $font-26px; line-height: $font-26px;
color: $primary-fg-color; color: $primary-content;
font-size: $font-14px; font-size: $font-14px;
font-weight: normal; font-weight: normal;
margin-right: 4px; margin-right: 4px;

6
res/css/views/elements/_Dropdown.scss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_Dropdown { .mx_Dropdown {
position: relative; position: relative;
color: $primary-fg-color; color: $primary-content;
} }
.mx_Dropdown_disabled { .mx_Dropdown_disabled {
@ -52,7 +52,7 @@ limitations under the License.
padding-right: 9px; padding-right: 9px;
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg'); mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $primary-fg-color; background: $primary-content;
} }
.mx_Dropdown_option { .mx_Dropdown_option {
@ -111,7 +111,7 @@ input.mx_Dropdown_option:focus {
padding: 0px; padding: 0px;
border-radius: 4px; border-radius: 4px;
border: 1px solid $input-focused-border-color; border: 1px solid $input-focused-border-color;
background-color: $primary-bg-color; background-color: $background;
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
} }

6
res/css/views/elements/_FacePile.scss
View file

@ -25,7 +25,7 @@ limitations under the License.
} }
.mx_BaseAvatar_image { .mx_BaseAvatar_image {
border: 1px solid $primary-bg-color; border: 1px solid $background;
} }
.mx_BaseAvatar_initial { .mx_BaseAvatar_initial {
@ -47,7 +47,7 @@ limitations under the License.
left: 0; left: 0;
height: inherit; height: inherit;
width: inherit; width: inherit;
background: $tertiary-fg-color; background: $tertiary-content;
mask-position: center; mask-position: center;
mask-size: 20px; mask-size: 20px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
@ -60,6 +60,6 @@ limitations under the License.
margin-left: 12px; margin-left: 12px;
font-size: $font-14px; font-size: $font-14px;
line-height: $font-24px; line-height: $font-24px;
color: $tertiary-fg-color; color: $tertiary-content;
} }
} }

9
res/css/views/elements/_Field.scss
View file

@ -38,6 +38,7 @@ limitations under the License.
.mx_Field input, .mx_Field input,
.mx_Field select, .mx_Field select,
.mx_Field textarea { .mx_Field textarea {
font-family: inherit;
font-weight: normal; font-weight: normal;
font-size: $font-14px; font-size: $font-14px;
border: none; border: none;
@ -45,8 +46,8 @@ limitations under the License.
// corners on the field above. // corners on the field above.
border-radius: 4px; border-radius: 4px;
padding: 8px 9px; padding: 8px 9px;
color: $primary-fg-color; color: $primary-content;
background-color: $primary-bg-color; background-color: $background;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
@ -66,7 +67,7 @@ limitations under the License.
height: 6px; height: 6px;
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg'); mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $primary-fg-color; background-color: $primary-content;
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
} }
@ -99,7 +100,7 @@ limitations under the License.
color 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
top 0.25s ease-out 0.1s, top 0.25s ease-out 0.1s,
background-color 0.25s ease-out 0.1s; background-color 0.25s ease-out 0.1s;
color: $primary-fg-color; color: $primary-content;
background-color: transparent; background-color: transparent;
font-size: $font-14px; font-size: $font-14px;
position: absolute; position: absolute;

4
res/css/views/elements/_InviteReason.scss
View file

@ -32,12 +32,12 @@ limitations under the License.
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
color: $secondary-fg-color; color: $secondary-content;
&::before { &::before {
content: ""; content: "";
margin-right: 8px; margin-right: 8px;
background-color: $secondary-fg-color; background-color: $secondary-content;
mask-image: url('$(res)/img/feather-customised/eye.svg'); mask-image: url('$(res)/img/feather-customised/eye.svg');
display: inline-block; display: inline-block;
width: 18px; width: 18px;

4
res/css/views/elements/_MiniAvatarUploader.scss
View file

@ -37,7 +37,7 @@ limitations under the License.
right: -6px; right: -6px;
bottom: -6px; bottom: -6px;
background-color: $primary-bg-color; background-color: $background;
border-radius: 50%; border-radius: 50%;
z-index: 1; z-index: 1;
@ -45,7 +45,7 @@ limitations under the License.
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: $secondary-fg-color; background-color: $secondary-content;
mask-position: center; mask-position: center;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-image: url('$(res)/img/element-icons/camera.svg'); mask-image: url('$(res)/img/element-icons/camera.svg');

2
res/css/views/elements/_RichText.scss
View file

@ -43,7 +43,7 @@ a.mx_Pill {
/* More specific to override `.markdown-body a` color */ /* More specific to override `.markdown-body a` color */
.mx_EventTile_content .markdown-body a.mx_UserPill, .mx_EventTile_content .markdown-body a.mx_UserPill,
.mx_UserPill { .mx_UserPill {
color: $primary-fg-color; color: $primary-content;
background-color: $other-user-pill-bg-color; background-color: $other-user-pill-bg-color;
} }

2
res/css/views/elements/_SSOButtons.scss
View file

@ -35,7 +35,7 @@ limitations under the License.
font-size: $font-14px; font-size: $font-14px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
color: $primary-fg-color; color: $primary-content;
> img { > img {
object-fit: contain; object-fit: contain;

2
res/css/views/elements/_ServerPicker.scss
View file

@ -74,7 +74,7 @@ limitations under the License.
.mx_ServerPicker_desc { .mx_ServerPicker_desc {
margin-top: -12px; margin-top: -12px;
color: $tertiary-fg-color; color: $tertiary-content;
grid-column: 1 / 2; grid-column: 1 / 2;
grid-row: 3; grid-row: 3;
margin-bottom: 16px; margin-bottom: 16px;

2
res/css/views/elements/_Spinner.scss
View file

@ -37,7 +37,7 @@ limitations under the License.
} }
.mx_Spinner_icon { .mx_Spinner_icon {
background-color: $primary-fg-color; background-color: $primary-content;
mask: url('$(res)/img/spinner.svg'); mask: url('$(res)/img/spinner.svg');
mask-size: contain; mask-size: contain;
animation: 1.1s steps(12, end) infinite spin; animation: 1.1s steps(12, end) infinite spin;

4
res/css/views/elements/_TagComposer.scss
View file

@ -25,7 +25,7 @@ limitations under the License.
.mx_AccessibleButton { .mx_AccessibleButton {
min-width: 70px; min-width: 70px;
padding: 0; // override from button styles padding: 0 8px; // override from button styles
margin-left: 16px; // distance from <Field> margin-left: 16px; // distance from <Field>
} }
@ -50,7 +50,7 @@ limitations under the License.
&::before { &::before {
content: ''; content: '';
border-radius: 20px; border-radius: 20px;
background-color: $tertiary-fg-color; background-color: $tertiary-content;
opacity: 0.15; opacity: 0.15;
position: absolute; position: absolute;
top: 0; top: 0;

2
res/css/views/elements/_Tooltip.scss
View file

@ -84,7 +84,7 @@ limitations under the License.
// These tooltips use an older style with a chevron // These tooltips use an older style with a chevron
.mx_Field_tooltip { .mx_Field_tooltip {
background-color: $menu-bg-color; background-color: $menu-bg-color;
color: $primary-fg-color; color: $primary-content;
border: 1px solid $menu-border-color; border: 1px solid $menu-border-color;
text-align: unset; text-align: unset;

6
res/css/views/emojipicker/_EmojiPicker.scss
View file

@ -57,7 +57,7 @@ limitations under the License.
} }
.mx_EmojiPicker_anchor::before { .mx_EmojiPicker_anchor::before {
background-color: $primary-fg-color; background-color: $primary-content;
content: ''; content: '';
display: inline-block; display: inline-block;
mask-size: 100%; mask-size: 100%;
@ -89,7 +89,7 @@ limitations under the License.
margin: 8px; margin: 8px;
border-radius: 4px; border-radius: 4px;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
background-color: $primary-bg-color; background-color: $background;
display: flex; display: flex;
input { input {
@ -126,7 +126,7 @@ limitations under the License.
.mx_EmojiPicker_search_icon::after { .mx_EmojiPicker_search_icon::after {
mask: url('$(res)/img/emojipicker/search.svg') no-repeat; mask: url('$(res)/img/emojipicker/search.svg') no-repeat;
mask-size: 100%; mask-size: 100%;
background-color: $primary-fg-color; background-color: $primary-content;
content: ''; content: '';
display: inline-block; display: inline-block;
width: 100%; width: 100%;

2
res/css/views/groups/_GroupRoomList.scss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_GroupRoomTile { .mx_GroupRoomTile {
position: relative; position: relative;
color: $primary-fg-color; color: $primary-content;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;

287
res/css/views/messages/_CallEvent.scss
View file

@ -14,126 +14,23 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_CallEvent { .mx_CallEvent_wrapper {
display: flex; display: flex;
flex-direction: row; width: 100%;
align-items: center;
justify-content: space-between;
background-color: $dark-panel-bg-color; .mx_CallEvent {
border-radius: 8px; position: relative;
margin: 10px auto;
width: 75%;
box-sizing: border-box;
height: 60px;
&.mx_CallEvent_voice {
.mx_CallEvent_type_icon::before,
.mx_CallEvent_content_button_callBack span::before,
.mx_CallEvent_content_button_answer span::before {
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
}
}
&.mx_CallEvent_video {
.mx_CallEvent_type_icon::before,
.mx_CallEvent_content_button_callBack span::before,
.mx_CallEvent_content_button_answer span::before {
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
}
}
&.mx_CallEvent_voice.mx_CallEvent_missed .mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/missed-voice.svg');
}
&.mx_CallEvent_video.mx_CallEvent_missed .mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/missed-video.svg');
}
.mx_CallEvent_info {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-left: 12px; justify-content: space-between;
.mx_CallEvent_info_basic { background-color: $dark-panel-bg-color;
display: flex; border-radius: 8px;
flex-direction: column; width: 65%;
margin-left: 10px; // To match mx_CallEvent box-sizing: border-box;
height: 60px;
.mx_CallEvent_sender { margin: 4px 0;
font-weight: 600;
font-size: 1.5rem;
line-height: 1.8rem;
margin-bottom: 3px;
}
.mx_CallEvent_type {
font-weight: 400;
color: $secondary-fg-color;
font-size: 1.2rem;
line-height: $font-13px;
display: flex;
align-items: center;
.mx_CallEvent_type_icon {
height: 13px;
width: 13px;
margin-right: 5px;
&::before {
content: '';
position: absolute;
height: 13px;
width: 13px;
background-color: $tertiary-fg-color;
mask-repeat: no-repeat;
mask-size: contain;
}
}
}
}
}
.mx_CallEvent_content {
display: flex;
flex-direction: row;
align-items: center;
color: $secondary-fg-color;
margin-right: 16px;
.mx_CallEvent_content_button {
height: 24px;
padding: 0px 12px;
margin-left: 8px;
span {
padding: 8px 0;
display: flex;
align-items: center;
&::before {
content: '';
display: inline-block;
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 8px;
}
}
}
.mx_CallEvent_content_button_reject span::before {
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
}
.mx_CallEvent_content_tooltip {
margin-right: 5px;
}
.mx_CallEvent_iconButton { .mx_CallEvent_iconButton {
display: inline-flex; display: inline-flex;
@ -144,7 +41,7 @@ limitations under the License.
height: 16px; height: 16px;
width: 16px; width: 16px;
background-color: $tertiary-fg-color; background-color: $secondary-content;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
mask-position: center; mask-position: center;
@ -158,5 +55,165 @@ limitations under the License.
.mx_CallEvent_unSilence::before { .mx_CallEvent_unSilence::before {
mask-image: url('$(res)/img/voip/un-silence.svg'); mask-image: url('$(res)/img/voip/un-silence.svg');
} }
&.mx_CallEvent_voice {
.mx_CallEvent_type_icon::before,
.mx_CallEvent_content_button_callBack span::before,
.mx_CallEvent_content_button_answer span::before {
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
}
}
&.mx_CallEvent_video {
.mx_CallEvent_type_icon::before,
.mx_CallEvent_content_button_callBack span::before,
.mx_CallEvent_content_button_answer span::before {
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
}
}
&.mx_CallEvent_voice.mx_CallEvent_missed .mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/missed-voice.svg');
}
&.mx_CallEvent_video.mx_CallEvent_missed .mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/missed-video.svg');
}
&.mx_CallEvent_voice.mx_CallEvent_rejected .mx_CallEvent_type_icon::before,
&.mx_CallEvent_voice.mx_CallEvent_noAnswer .mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/declined-voice.svg');
}
&.mx_CallEvent_video.mx_CallEvent_rejected .mx_CallEvent_type_icon::before,
&.mx_CallEvent_video.mx_CallEvent_noAnswer .mx_CallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/declined-video.svg');
}
.mx_CallEvent_info {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 12px;
min-width: 0;
.mx_CallEvent_info_basic {
display: flex;
flex-direction: column;
margin-left: 10px; // To match mx_CallEvent
min-width: 0;
.mx_CallEvent_sender {
font-weight: 600;
font-size: 1.5rem;
line-height: 1.8rem;
margin-bottom: 3px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mx_CallEvent_type {
font-weight: 400;
color: $secondary-content;
font-size: 1.2rem;
line-height: $font-13px;
display: flex;
align-items: center;
.mx_CallEvent_type_icon {
height: 13px;
width: 13px;
margin-right: 5px;
&::before {
content: '';
position: absolute;
height: 13px;
width: 13px;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
}
}
}
}
}
.mx_CallEvent_content {
display: flex;
flex-direction: row;
align-items: center;
color: $secondary-content;
margin-right: 16px;
gap: 8px;
min-width: max-content;
.mx_CallEvent_content_button {
padding: 0px 12px;
span {
padding: 1px 0;
display: flex;
align-items: center;
&::before {
content: '';
display: inline-block;
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 8px;
flex-shrink: 0;
}
}
}
.mx_CallEvent_content_button_reject span::before {
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
}
.mx_CallEvent_content_tooltip {
margin-right: 5px;
}
}
&.mx_CallEvent_narrow {
height: unset;
width: 290px;
flex-direction: column;
align-items: unset;
gap: 16px;
.mx_CallEvent_iconButton {
position: absolute;
margin-right: 0;
top: 12px;
right: 12px;
height: 16px;
width: 16px;
display: flex;
}
.mx_CallEvent_info {
align-items: unset;
margin-top: 12px;
margin-right: 12px;
.mx_CallEvent_sender {
margin-bottom: 8px;
}
}
.mx_CallEvent_content {
margin-left: 54px; // mx_CallEvent margin (12px) + avatar (32px) + mx_CallEvent_info_basic margin (10px)
margin-bottom: 16px;
}
}
} }
} }

17
res/css/views/messages/_MImageBody.scss
View file

@ -16,6 +16,12 @@ limitations under the License.
$timelineImageBorderRadius: 4px; $timelineImageBorderRadius: 4px;
.mx_MImageBody_thumbnail--blurhash {
position: absolute;
left: 0;
top: 0;
}
.mx_MImageBody_thumbnail { .mx_MImageBody_thumbnail {
object-fit: contain; object-fit: contain;
border-radius: $timelineImageBorderRadius; border-radius: $timelineImageBorderRadius;
@ -23,10 +29,17 @@ $timelineImageBorderRadius: 4px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%;
width: 100%;
> div > canvas { .mx_Blurhash > canvas {
animation: mx--anim-pulse 1.75s infinite cubic-bezier(.4, 0, .6, 1);
border-radius: $timelineImageBorderRadius; border-radius: $timelineImageBorderRadius;
} }
.mx_no-image-placeholder {
background-color: $primary-content;
}
} }
.mx_MImageBody_thumbnail_container { .mx_MImageBody_thumbnail_container {
@ -87,5 +100,5 @@ $timelineImageBorderRadius: 4px;
} }
.mx_EventTile:hover .mx_HiddenImagePlaceholder { .mx_EventTile:hover .mx_HiddenImagePlaceholder {
background-color: $primary-bg-color; background-color: $background;
} }

6
res/css/views/messages/_MessageActionBar.scss
View file

@ -23,7 +23,7 @@ limitations under the License.
height: 32px; height: 32px;
line-height: $font-24px; line-height: $font-24px;
border-radius: 8px; border-radius: 8px;
background: $primary-bg-color; background: $background;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
top: -32px; top: -32px;
right: 8px; right: 8px;
@ -77,11 +77,11 @@ limitations under the License.
mask-size: 18px; mask-size: 18px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
background-color: $secondary-fg-color; background-color: $secondary-content;
} }
.mx_MessageActionBar_maskButton:hover::after { .mx_MessageActionBar_maskButton:hover::after {
background-color: $primary-fg-color; background-color: $primary-content;
} }
.mx_MessageActionBar_reactButton::after { .mx_MessageActionBar_reactButton::after {

10
res/css/views/messages/_ReactionsRow.scss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_ReactionsRow { .mx_ReactionsRow {
margin: 6px 0; margin: 6px 0;
color: $primary-fg-color; color: $primary-content;
.mx_ReactionsRow_addReactionButton { .mx_ReactionsRow_addReactionButton {
position: relative; position: relative;
@ -36,7 +36,7 @@ limitations under the License.
mask-size: 16px; mask-size: 16px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
background-color: $tertiary-fg-color; background-color: $tertiary-content;
mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg'); mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
} }
@ -46,7 +46,7 @@ limitations under the License.
&:hover, &.mx_ReactionsRow_addReactionButton_active { &:hover, &.mx_ReactionsRow_addReactionButton_active {
&::before { &::before {
background-color: $primary-fg-color; background-color: $primary-content;
} }
} }
} }
@ -64,10 +64,10 @@ limitations under the License.
vertical-align: middle; vertical-align: middle;
&:link, &:visited { &:link, &:visited {
color: $tertiary-fg-color; color: $tertiary-content;
} }
&:hover { &:hover {
color: $primary-fg-color; color: $primary-content;
} }
} }

4
res/css/views/right_panel/_BaseCard.scss
View file

@ -93,7 +93,7 @@ limitations under the License.
} }
> h1 { > h1 {
color: $tertiary-fg-color; color: $tertiary-content;
font-size: $font-12px; font-size: $font-12px;
font-weight: 500; font-weight: 500;
} }
@ -145,7 +145,7 @@ limitations under the License.
justify-content: space-around; justify-content: space-around;
.mx_AccessibleButton_kind_secondary { .mx_AccessibleButton_kind_secondary {
color: $secondary-fg-color; color: $secondary-content;
background-color: rgba(141, 151, 165, 0.2); background-color: rgba(141, 151, 165, 0.2);
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-14px; font-size: $font-14px;

8
res/css/views/right_panel/_PinnedMessagesCard.scss
View file

@ -48,7 +48,7 @@ limitations under the License.
height: 32px; height: 32px;
line-height: $font-24px; line-height: $font-24px;
border-radius: 8px; border-radius: 8px;
background: $primary-bg-color; background: $background;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
padding: 1px; padding: 1px;
width: max-content; width: max-content;
@ -66,7 +66,7 @@ limitations under the License.
z-index: 1; z-index: 1;
&::after { &::after {
background-color: $primary-fg-color; background-color: $primary-content;
} }
} }
} }
@ -75,7 +75,7 @@ limitations under the License.
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
color: $primary-fg-color; color: $primary-content;
margin-top: 24px; margin-top: 24px;
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -83,7 +83,7 @@ limitations under the License.
> span { > span {
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
} }
} }
} }

6
res/css/views/right_panel/_RoomSummaryCard.scss
View file

@ -27,7 +27,7 @@ limitations under the License.
.mx_RoomSummaryCard_alias { .mx_RoomSummaryCard_alias {
font-size: $font-13px; font-size: $font-13px;
color: $secondary-fg-color; color: $secondary-content;
} }
h2, .mx_RoomSummaryCard_alias { h2, .mx_RoomSummaryCard_alias {
@ -115,7 +115,7 @@ limitations under the License.
// as we will be applying it in its children // as we will be applying it in its children
padding: 0; padding: 0;
height: auto; height: auto;
color: $tertiary-fg-color; color: $tertiary-content;
.mx_RoomSummaryCard_icon_app { .mx_RoomSummaryCard_icon_app {
padding: 10px 48px 10px 12px; // based on typical mx_RoomSummaryCard_Button padding padding: 10px 48px 10px 12px; // based on typical mx_RoomSummaryCard_Button padding
@ -128,7 +128,7 @@ limitations under the License.
} }
span { span {
color: $primary-fg-color; color: $primary-content;
} }
} }

2
res/css/views/right_panel/_UserInfo.scss
View file

@ -55,7 +55,7 @@ limitations under the License.
} }
.mx_UserInfo_separator { .mx_UserInfo_separator {
border-bottom: 1px solid rgba($primary-fg-color, .1); border-bottom: 1px solid rgba($primary-content, .1);
} }
.mx_UserInfo_memberDetailsContainer { .mx_UserInfo_memberDetailsContainer {

2
res/css/views/right_panel/_WidgetCard.scss
View file

@ -51,7 +51,7 @@ limitations under the License.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg'); mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
background-color: $secondary-fg-color; background-color: $secondary-content;
} }
} }
} }

4
res/css/views/rooms/_AppsDrawer.scss
View file

@ -64,7 +64,7 @@ $MiniAppTileHeight: 200px;
&:hover { &:hover {
.mx_AppsContainer_resizerHandle::after { .mx_AppsContainer_resizerHandle::after {
opacity: 0.8; opacity: 0.8;
background: $primary-fg-color; background: $primary-content;
} }
.mx_ResizeHandle_horizontal::before { .mx_ResizeHandle_horizontal::before {
@ -79,7 +79,7 @@ $MiniAppTileHeight: 200px;
content: ''; content: '';
background-color: $primary-fg-color; background-color: $primary-content;
opacity: 0.8; opacity: 0.8;
} }
} }

19
res/css/views/rooms/_Autocomplete.scss
View file

@ -4,16 +4,18 @@
z-index: 1001; z-index: 1001;
width: 100%; width: 100%;
border: 1px solid $primary-hairline-color; border: 1px solid $primary-hairline-color;
background: $primary-bg-color; background: $background;
border-bottom: none; border-bottom: none;
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
max-height: 50vh; max-height: 35vh;
overflow: auto; overflow: clip;
display: flex;
box-shadow: 0px -16px 32px $composer-shadow-color; box-shadow: 0px -16px 32px $composer-shadow-color;
} }
.mx_Autocomplete_ProviderSection { .mx_Autocomplete_ProviderSection {
border-bottom: 1px solid $primary-hairline-color; border-bottom: 1px solid $primary-hairline-color;
width: 100%;
} }
/* a "block" completion takes up a whole line */ /* a "block" completion takes up a whole line */
@ -24,7 +26,7 @@
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;
color: $primary-fg-color; color: $primary-content;
} }
.mx_Autocomplete_Completion_block * { .mx_Autocomplete_Completion_block * {
@ -40,7 +42,7 @@
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;
color: $primary-fg-color; color: $primary-content;
} }
.mx_Autocomplete_Completion_pill > * { .mx_Autocomplete_Completion_pill > * {
@ -59,8 +61,8 @@
.mx_Autocomplete_Completion_container_pill { .mx_Autocomplete_Completion_container_pill {
margin: 12px; margin: 12px;
display: flex; height: 100%;
flex-flow: wrap; overflow-y: scroll;
} }
.mx_Autocomplete_Completion_container_truncate { .mx_Autocomplete_Completion_container_truncate {
@ -68,7 +70,6 @@
.mx_Autocomplete_Completion_subtitle, .mx_Autocomplete_Completion_subtitle,
.mx_Autocomplete_Completion_description { .mx_Autocomplete_Completion_description {
/* Ellipsis for long names/subtitles/descriptions */ /* Ellipsis for long names/subtitles/descriptions */
max-width: 150px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -83,7 +84,7 @@
.mx_Autocomplete_provider_name { .mx_Autocomplete_provider_name {
margin: 12px; margin: 12px;
color: $primary-fg-color; color: $primary-content;
font-weight: 400; font-weight: 400;
opacity: 0.4; opacity: 0.4;
} }

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

@ -31,7 +31,7 @@ limitations under the License.
@keyframes visualbell { @keyframes visualbell {
from { background-color: $visual-bell-bg-color; } from { background-color: $visual-bell-bg-color; }
to { background-color: $primary-bg-color; } to { background-color: $background; }
} }
&.mx_BasicMessageComposer_input_error { &.mx_BasicMessageComposer_input_error {

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

@ -28,7 +28,7 @@ limitations under the License.
.mx_BasicMessageComposer_input { .mx_BasicMessageComposer_input {
border-radius: 4px; border-radius: 4px;
border: solid 1px $primary-hairline-color; border: solid 1px $primary-hairline-color;
background-color: $primary-bg-color; background-color: $background;
max-height: 200px; max-height: 200px;
padding: 3px 6px; padding: 3px 6px;

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

@ -18,7 +18,7 @@ limitations under the License.
.mx_EntityTile { .mx_EntityTile {
display: flex; display: flex;
align-items: center; align-items: center;
color: $primary-fg-color; color: $primary-content;
cursor: pointer; cursor: pointer;
.mx_E2EIcon { .mx_E2EIcon {
@ -86,12 +86,12 @@ limitations under the License.
.mx_EntityTile_ellipsis .mx_EntityTile_name { .mx_EntityTile_ellipsis .mx_EntityTile_name {
font-style: italic; font-style: italic;
color: $primary-fg-color; color: $primary-content;
} }
.mx_EntityTile_invitePlaceholder .mx_EntityTile_name { .mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
font-style: italic; font-style: italic;
color: $primary-fg-color; color: $primary-content;
} }
.mx_EntityTile_unavailable .mx_EntityTile_avatar, .mx_EntityTile_unavailable .mx_EntityTile_avatar,

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

@ -105,6 +105,8 @@ limitations under the License.
.mx_ReplyTile .mx_SenderProfile { .mx_ReplyTile .mx_SenderProfile {
display: block; display: block;
top: unset;
left: unset;
} }
.mx_ReactionsRow { .mx_ReactionsRow {
@ -188,8 +190,6 @@ limitations under the License.
} }
.mx_ReplyThread { .mx_ReplyThread {
margin: 0 calc(-1 * var(--gutterSize));
.mx_EventTile_reply { .mx_EventTile_reply {
max-width: 90%; max-width: 90%;
padding: 0; padding: 0;
@ -223,11 +223,6 @@ limitations under the License.
margin-left: -9px; margin-left: -9px;
} }
.mx_ReplyThread {
border-left-width: 2px;
border-left-color: $eventbubble-reply-color;
}
/* Special layout scenario for "Unable To Decrypt (UTD)" events */ /* Special layout scenario for "Unable To Decrypt (UTD)" events */
&.mx_EventTile_bad > .mx_EventTile_line { &.mx_EventTile_bad > .mx_EventTile_line {
display: grid; display: grid;
@ -264,6 +259,7 @@ limitations under the License.
} }
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble], .mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
.mx_EventTile.mx_EventTile_info[data-layout=bubble], .mx_EventTile.mx_EventTile_info[data-layout=bubble],
.mx_EventListSummary[data-layout=bubble][data-expanded=false] { .mx_EventListSummary[data-layout=bubble][data-expanded=false] {
--backgroundColor: transparent; --backgroundColor: transparent;

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

@ -55,7 +55,7 @@ $hover-select-border: 4px;
} }
.mx_SenderProfile { .mx_SenderProfile {
color: $primary-fg-color; color: $primary-content;
font-size: $font-14px; font-size: $font-14px;
display: inline-block; /* anti-zalgo, with overflow hidden */ display: inline-block; /* anti-zalgo, with overflow hidden */
overflow: hidden; overflow: hidden;
@ -161,7 +161,7 @@ $hover-select-border: 4px;
// up with the other read receipts // up with the other read receipts
&::before { &::before {
background-color: $tertiary-fg-color; background-color: $tertiary-content;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: 14px; mask-size: 14px;
@ -618,7 +618,7 @@ $hover-select-border: 4px;
} }
.mx_EventTile_keyRequestInfo_text a { .mx_EventTile_keyRequestInfo_text a {
color: $primary-fg-color; color: $primary-content;
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }

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

@ -56,7 +56,7 @@ limitations under the License.
height: 38px; height: 38px;
border-radius: 19px; border-radius: 19px;
box-sizing: border-box; box-sizing: border-box;
background: $primary-bg-color; background: $background;
border: 1.3px solid $muted-fg-color; border: 1.3px solid $muted-fg-color;
cursor: pointer; cursor: pointer;
} }

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

@ -111,7 +111,7 @@ limitations under the License.
.mx_MemberInfo_field { .mx_MemberInfo_field {
cursor: pointer; cursor: pointer;
font-size: $font-15px; font-size: $font-15px;
color: $primary-fg-color; color: $primary-content;
margin-left: 8px; margin-left: 8px;
line-height: $font-23px; line-height: $font-23px;
} }

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

@ -130,7 +130,7 @@ limitations under the License.
@keyframes visualbell { @keyframes visualbell {
from { background-color: $visual-bell-bg-color; } from { background-color: $visual-bell-bg-color; }
to { background-color: $primary-bg-color; } to { background-color: $background; }
} }
.mx_MessageComposer_input_error { .mx_MessageComposer_input_error {
@ -160,8 +160,8 @@ limitations under the License.
resize: none; resize: none;
outline: none; outline: none;
box-shadow: none; box-shadow: none;
color: $primary-fg-color; color: $primary-content;
background-color: $primary-bg-color; background-color: $background;
font-size: $font-14px; font-size: $font-14px;
max-height: 120px; max-height: 120px;
overflow: auto; overflow: auto;

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

@ -67,6 +67,6 @@ limitations under the License.
> p { > p {
margin: 0; margin: 0;
font-size: $font-15px; font-size: $font-15px;
color: $secondary-fg-color; color: $secondary-content;
} }
} }

Some files were not shown because too many files have changed in this diff Show more