From ebdb340a5c5393ff33089de97aa0b50a92630f99 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 19 May 2021 17:31:52 +0530
Subject: [PATCH 001/313] Create a basic HTML export tool with support only for
text based events
---
package.json | 2 +
src/components/views/rooms/RoomHeader.js | 12 +
src/i18n/strings/en_EN.json | 1 +
src/utils/exportUtils.js | 435 +++++++++++++++++++++++
yarn.lock | 39 +-
5 files changed, 488 insertions(+), 1 deletion(-)
create mode 100644 src/utils/exportUtils.js
diff --git a/package.json b/package.json
index f8d94e2d21..9ac4890465 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
"highlight.js": "^10.5.0",
"html-entities": "^1.4.0",
"is-ip": "^3.1.0",
+ "jszip": "^3.6.0",
"katex": "^0.12.0",
"linkifyjs": "^2.1.9",
"lodash": "^4.17.20",
@@ -98,6 +99,7 @@
"resize-observer-polyfill": "^1.5.1",
"rfc4648": "^1.4.0",
"sanitize-html": "^2.3.2",
+ "streamsaver": "^2.0.5",
"tar-js": "^0.3.0",
"text-encoding-utf-8": "^1.0.2",
"url": "^0.11.0",
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 6d3b50c10d..d6b4822cc2 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -32,6 +32,8 @@ import RoomTopic from "../elements/RoomTopic";
import RoomName from "../elements/RoomName";
import {PlaceCallType} from "../../../CallHandler";
import {replaceableComponent} from "../../../utils/replaceableComponent";
+import exportConversationalHistory from '../../../utils/exportUtils';
+
@replaceableComponent("views.rooms.RoomHeader")
export default class RoomHeader extends React.Component {
@@ -117,6 +119,10 @@ export default class RoomHeader extends React.Component {
return !(currentPinEvent.getContent().pinned && currentPinEvent.getContent().pinned.length <= 0);
}
+ _exportConvertionalHistory = async () => {
+ exportConversationalHistory(this.props.room);
+ }
+
render() {
let searchStatus = null;
let cancelButton = null;
@@ -244,8 +250,14 @@ export default class RoomHeader extends React.Component {
title={_t("Video call")} />;
}
+ const exportButton = <AccessibleTooltipButton
+ className="mx_RoomHeader_button mx_ImageView_button_download"
+ onClick={this._exportConvertionalHistory}
+ title={_t("Export conversation")} />;
+
const rightRow =
<div className="mx_RoomHeader_buttons">
+ { exportButton }
{ videoCallButton }
{ voiceCallButton }
{ pinnedEventsButton }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index d1fe791319..90f3e2d89c 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1545,6 +1545,7 @@
"Search": "Search",
"Voice call": "Voice call",
"Video call": "Video call",
+ "Export conversation": "Export conversation",
"Start a Conversation": "Start a Conversation",
"Open dial pad": "Open dial pad",
"Invites": "Invites",
diff --git a/src/utils/exportUtils.js b/src/utils/exportUtils.js
new file mode 100644
index 0000000000..f784c48f8f
--- /dev/null
+++ b/src/utils/exportUtils.js
@@ -0,0 +1,435 @@
+import { MatrixClientPeg } from "../MatrixClientPeg";
+import { arrayFastClone } from "./arrays";
+import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
+import JSZip from "jszip";
+import { textForEvent } from "../TextForEvent";
+import streamSaver from "streamsaver";
+
+const wrapHTML = (content, room) => (`
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <meta charset="utf-8" />
+ <title>Exported Data</title>
+ <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+ <link href="css/style.css" rel="stylesheet" />
+ <script src="js/script.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div class="page_wrap">
+ <div class="page_header">
+ <div class="content">
+ <div class="text bold">${room.name}</div>
+ </div>
+ </div>
+ <div class="page_body chat_page">
+ <div class="history">
+ ${content}
+ </div>
+ </div>
+ </div>
+ </body>
+ </html>
+`);
+
+
+const getTimelineConversation = (room) => {
+ if (!room) return;
+
+ const cli = MatrixClientPeg.get();
+
+ const timelineSet = room.getUnfilteredTimelineSet();
+
+ const timelineWindow = new TimelineWindow(
+ cli, timelineSet,
+ {windowLimit: Number.MAX_VALUE});
+
+ timelineWindow.load(null, 20);
+
+ const events = timelineWindow.getEvents();
+
+ // Clone and reverse the events so that we preserve the order
+ arrayFastClone(events)
+ .reverse()
+ .forEach(event => {
+ cli.decryptEventIfNeeded(event);
+ });
+
+ if (!timelineWindow.canPaginate('f')) {
+ events.push(...timelineSet.getPendingEvents());
+ }
+
+ return events;
+};
+
+
+const css = `
+body {
+ margin: 0;
+ font: 12px/18px 'Inter', 'Open Sans',"Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Verdana,sans-serif;
+}
+
+strong {
+ font-weight: 700;
+}
+
+code, kbd, pre, samp {
+ font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
+}
+
+code {
+ padding: 2px 4px;
+ font-size: 90%;
+ color: #c7254e;
+ background-color: #f9f2f4;
+ border-radius: 4px;
+}
+
+pre {
+ display: block;
+ margin: 0;
+ line-height: 1.42857143;
+ word-break: break-all;
+ word-wrap: break-word;
+ color: #333;
+ background-color: #f5f5f5;
+ border-radius: 4px;
+ overflow: auto;
+ padding: 3px;
+ border: 1px solid #eee;
+ max-height: none;
+ font-size: inherit;
+}
+
+.clearfix:after {
+ content: " ";
+ visibility: hidden;
+ display: block;
+ height: 0;
+ clear: both;
+}
+
+.pull_left {
+ float: left;
+}
+
+.pull_right {
+ float: right;
+}
+
+.page_wrap {
+ background-color: #ffffff;
+ color: #000000;
+}
+
+.page_wrap a {
+ color: #168acd;
+ text-decoration: none;
+}
+
+.page_wrap a:hover {
+ text-decoration: underline;
+}
+
+.page_header {
+ position: fixed;
+ z-index: 10;
+ background-color: #ffffff;
+ width: 100%;
+ border-bottom: 1px solid #e3e6e8;
+}
+
+.page_header .content {
+ width: 480px;
+ margin: 0 auto;
+ border-radius: 0 !important;
+}
+
+.page_header a.content {
+ background-repeat: no-repeat;
+ background-position: 24px 21px;
+ background-size: 24px 24px;
+}
+
+.bold {
+ color: #212121;
+ font-weight: 700;
+}
+
+.details {
+ color: #70777b;
+}
+
+.page_header .content .text {
+ padding: 24px 24px 22px 24px;
+ font-size: 22px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ text-align: center;
+}
+
+.page_header a.content .text {
+ padding: 24px 24px 22px 82px;
+}
+
+.page_body {
+ padding-top: 64px;
+ width: 480px;
+ margin: 0 auto;
+}
+
+.userpic {
+ display: block;
+ border-radius: 50%;
+ overflow: hidden;
+}
+
+.userpic .initials {
+ display: block;
+ color: #fff;
+ text-align: center;
+ text-transform: uppercase;
+ user-select: none;
+}
+
+a.block_link {
+ display: block;
+ text-decoration: none !important;
+ border-radius: 4px;
+}
+
+a.block_link:hover {
+ text-decoration: none !important;
+ background-color: #f5f7f8;
+}
+
+.history {
+ padding: 16px 0;
+}
+
+.message {
+ margin: 0 -10px;
+ transition: background-color 2.0s ease;
+}
+
+div.selected {
+ background-color: rgba(242,246,250,255);
+ transition: background-color 0.5s ease;
+}
+
+.service {
+ padding: 10px 24px;
+}
+
+.service .body {
+ text-align: center;
+}
+
+.message .userpic .initials {
+ font-size: 16px;
+}
+
+.default {
+ padding: 10px;
+}
+
+.default.joined {
+ margin-top: -10px;
+}
+
+.default .from_name {
+ color: #3892db;
+ font-weight: 700;
+ padding-bottom: 5px;
+}
+
+.default .body {
+ margin-left: 60px;
+}
+
+.default .text {
+ word-wrap: break-word;
+ line-height: 150%;
+}
+
+.default .reply_to,
+.default .media_wrap {
+ padding-bottom: 5px;
+}
+
+.default .media {
+ margin: 0 -10px;
+ padding: 5px 10px;
+}
+
+.default .media .fill,
+.default .media .thumb {
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+}
+
+.default .media .fill {
+ background-repeat: no-repeat;
+ background-position: 12px 12px;
+ background-size: 24px 24px;
+}
+
+.default .media .title,
+.default .media_poll .question {
+ padding-top: 4px;
+ font-size: 14px;
+}
+
+.default .media .description {
+ color: #000000;
+ padding-top: 4px;
+ font-size: 13px;
+}
+
+.default .media .status {
+ padding-top: 4px;
+ font-size: 13px;
+}
+
+.default .photo {
+ display: block;
+}
+`;
+
+const userColors = [
+ "#64bf47",
+ "#4f9cd9",
+ "#9884e8",
+ "#e671a5",
+ "#47bcd1",
+ "#ff8c44",
+];
+
+const createDiv = (content, id, ...classNames) => {
+ return `<div class = "${classNames.join(" ")}" id = "${id}" >
+ ${content}
+ </div>`;
+};
+
+
+//Get a color associated with a string. This is to map userId to a specific color
+const getUserColor = (userId) => {
+ return userColors[userId.length % 4];
+};
+
+const createBody = (event, joined = false) => {
+ return `
+ <div class="message default clearfix ${joined ? `joined` : ``}" id="message2680">
+ ${!joined ? `<div class="pull_left userpic_wrap">
+ <div class="userpic" style="width: 42px; height: 42px; background-color: ${getUserColor(event.sender.name)}">
+ <div class="initials" style="line-height: 42px">${event.sender.name[0]}</div>
+ </div>
+ </div>` : ``}
+ <div class="body">
+ <div class="pull_right date details" title="${new Date(event._localTimestamp)}">${new Date(event._localTimestamp).toLocaleTimeString().slice(0, -3)}</div>
+ ${!joined ? `<div class="from_name" style="color:${getUserColor(event.sender.name)}">
+ ${event.sender.name}
+ </div>`: ``}
+ <div class="text"> ${event.getContent().body} </div>
+ </div>
+ </div>
+ `;
+};
+
+const replyAnchor = (eventId) => {
+ return `<a href = "#${eventId}">this message</a>}`;
+};
+
+const _isReply = (event) => {
+ const relatesTo = event.getContent()["m.relates_to"];
+ const isReply = !!(relatesTo && relatesTo["m.in_reply_to"]);
+ return isReply;
+};
+
+
+const dateSeparator = (event, prevEvent) => {
+ const prevDate = prevEvent ? new Date(prevEvent._localTimestamp) : null;
+ const currDate = new Date(event._localTimestamp);
+ if (!prevDate || currDate.setHours(0, 0, 0, 0) !== prevDate.setHours(0, 0, 0, 0)) {
+ return `
+ <div class="message service">
+ <div class="body details">
+ ${new Date(event._localTimestamp)
+ .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })}
+ </div>
+ </div>
+ `;
+ }
+ return "";
+};
+
+const createHTML = (events, room) => {
+ let content = "";
+ let prevEvent = null;
+ for (const event of events) {
+ content += dateSeparator(event, prevEvent);
+ if (event.getContent().msgtype === "m.text") {
+ const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
+ && event.sender.userId === prevEvent.sender.userId && !dateSeparator(event, prevEvent);
+
+ const body = createBody(event, shouldBeJoined);
+
+ content += body;
+ } else {
+ content += `
+ <div class="message service" id="${event.getId()}">
+ <div class="body details">
+ ${textForEvent(event)}
+ </div>
+ </div>
+ `;
+ }
+ prevEvent = event;
+ }
+ return wrapHTML(content, room);
+};
+
+
+const exportConversationalHistory = async (room) => {
+ const res = getTimelineConversation(room);
+ const html = createHTML(res, room);
+ const zip = new JSZip();
+ zip.file("css/style.css", css);
+ zip.file("index.html", html);
+ const filename = `matrix-export-${new Date().toISOString()}.zip`;
+
+ //Generate the zip file asynchronously
+
+ const blob = await zip.generateAsync({ type: "blob" });
+
+ //Create a writable stream to the directory
+ const fileStream = streamSaver.createWriteStream(filename, blob.size);
+ const writer = fileStream.getWriter();
+
+ // console.log(blob.size);
+
+ // Here we chunk the blob into pieces of 10 MiB
+ const sliceSize = 10 * 1e6;
+ for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {
+ // console.log(fPointer);
+ const blobPiece = blob.slice(fPointer, fPointer + sliceSize);
+ const reader = new FileReader();
+
+ const waiter = new Promise((resolve, reject) => {
+ reader.onloadend = evt => {
+ const arrayBufferNew = evt.target.result;
+ const uint8ArrayNew = new Uint8Array(arrayBufferNew);
+ // Buffer.from(reader.result)
+ writer.write(uint8ArrayNew);
+ resolve();
+ };
+ reader.readAsArrayBuffer(blobPiece);
+ });
+ await waiter;
+ }
+ writer.close();
+};
+
+export default exportConversationalHistory;
diff --git a/yarn.lock b/yarn.lock
index 19c0646d32..438cc94f27 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4334,6 +4334,11 @@ ignore@^5.1.4, ignore@^5.1.8:
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
+immediate@~3.0.5:
+ version "3.0.6"
+ resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+ integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
+
immutable@^3.7.4:
version "3.8.2"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
@@ -5442,6 +5447,16 @@ jsprim@^1.2.2:
array-includes "^3.1.2"
object.assign "^4.1.2"
+jszip@^3.6.0:
+ version "3.6.0"
+ resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.6.0.tgz#839b72812e3f97819cc13ac4134ffced95dd6af9"
+ integrity sha512-jgnQoG9LKnWO3mnVNBnfhkh0QknICd1FGSrXcgrl67zioyJ4wgx25o9ZqwNtrROSflGBCGYnJfjrIyRIby1OoQ==
+ dependencies:
+ lie "~3.3.0"
+ pako "~1.0.2"
+ readable-stream "~2.3.6"
+ set-immediate-shim "~1.0.1"
+
katex@^0.12.0:
version "0.12.0"
resolved "https://registry.yarnpkg.com/katex/-/katex-0.12.0.tgz#2fb1c665dbd2b043edcf8a1f5c555f46beaa0cb9"
@@ -5509,6 +5524,13 @@ levn@^0.4.1:
prelude-ls "^1.2.1"
type-check "~0.4.0"
+lie@~3.3.0:
+ version "3.3.0"
+ resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
+ integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
+ dependencies:
+ immediate "~3.0.5"
+
lines-and-columns@^1.1.6:
version "1.1.6"
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -6256,6 +6278,11 @@ pako@^2.0.3:
resolved "https://registry.yarnpkg.com/pako/-/pako-2.0.3.tgz#cdf475e31b678565251406de9e759196a0ea7a43"
integrity sha512-WjR1hOeg+kki3ZIOjaf4b5WVcay1jaliKSYiEaB1XzwhMQZJxRdQRv0V31EKBYlxb4T7SK3hjfc/jxyU64BoSw==
+pako@~1.0.2:
+ version "1.0.11"
+ resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+ integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
parent-module@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -6862,7 +6889,7 @@ read-pkg@^5.2.0:
parse-json "^5.0.0"
type-fest "^0.6.0"
-readable-stream@^2.0.2:
+readable-stream@^2.0.2, readable-stream@~2.3.6:
version "2.3.7"
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -7301,6 +7328,11 @@ set-blocking@^2.0.0:
resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
+set-immediate-shim@~1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+ integrity sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=
+
set-value@^2.0.0, set-value@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -7556,6 +7588,11 @@ stealthy-require@^1.1.1:
resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
+streamsaver@^2.0.5:
+ version "2.0.5"
+ resolved "https://registry.yarnpkg.com/streamsaver/-/streamsaver-2.0.5.tgz#3212f0e908fcece5b3a65591094475cf87850d00"
+ integrity sha512-KIWtBvi8A6FiFZGNSyuIZRZM6C8AvnWTiCx/TYa7so420vC5sQwcBKkdqInuGWoWMfeWy/P+/cRqMtWVf4RW9w==
+
string-length@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.1.tgz#4a973bf31ef77c4edbceadd6af2611996985f8a1"
From 16c55ba92f84334afb1c37ef33e723fff89e5fa3 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 21 May 2021 10:44:38 +0530
Subject: [PATCH 002/313] Use ts instead of age
---
src/utils/exportUtils.js | 38 ++++++++++++++++----------------------
1 file changed, 16 insertions(+), 22 deletions(-)
diff --git a/src/utils/exportUtils.js b/src/utils/exportUtils.js
index f784c48f8f..1954d64467 100644
--- a/src/utils/exportUtils.js
+++ b/src/utils/exportUtils.js
@@ -58,7 +58,7 @@ const getTimelineConversation = (room) => {
if (!timelineWindow.canPaginate('f')) {
events.push(...timelineSet.getPendingEvents());
}
-
+ console.log(events);
return events;
};
@@ -307,19 +307,13 @@ const userColors = [
"#ff8c44",
];
-const createDiv = (content, id, ...classNames) => {
- return `<div class = "${classNames.join(" ")}" id = "${id}" >
- ${content}
- </div>`;
-};
-
//Get a color associated with a string. This is to map userId to a specific color
const getUserColor = (userId) => {
return userColors[userId.length % 4];
};
-const createBody = (event, joined = false) => {
+const createMessageBody = (event, joined = false, isReply = false, replyId = null) => {
return `
<div class="message default clearfix ${joined ? `joined` : ``}" id="message2680">
${!joined ? `<div class="pull_left userpic_wrap">
@@ -328,35 +322,35 @@ const createBody = (event, joined = false) => {
</div>
</div>` : ``}
<div class="body">
- <div class="pull_right date details" title="${new Date(event._localTimestamp)}">${new Date(event._localTimestamp).toLocaleTimeString().slice(0, -3)}</div>
+ <div class="pull_right date details" title="${new Date(event.getTs())}">${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}</div>
${!joined ? `<div class="from_name" style="color:${getUserColor(event.sender.name)}">
${event.sender.name}
</div>`: ``}
+ ${isReply ?
+ `<div class="reply_to details">
+ In reply to <a href="#${replyId}">this message</a>
+ </div>`: ``}
<div class="text"> ${event.getContent().body} </div>
</div>
</div>
`;
};
-const replyAnchor = (eventId) => {
- return `<a href = "#${eventId}">this message</a>}`;
-};
-
-const _isReply = (event) => {
+const replyId = (event) => {
const relatesTo = event.getContent()["m.relates_to"];
- const isReply = !!(relatesTo && relatesTo["m.in_reply_to"]);
- return isReply;
+ const replyId = relatesTo ? relatesTo["m.in_reply_to"].event_id : null;
+ return replyId;
};
const dateSeparator = (event, prevEvent) => {
- const prevDate = prevEvent ? new Date(prevEvent._localTimestamp) : null;
- const currDate = new Date(event._localTimestamp);
+ const prevDate = prevEvent ? new Date(prevEvent.getTs()) : null;
+ const currDate = new Date(event.getTs());
if (!prevDate || currDate.setHours(0, 0, 0, 0) !== prevDate.setHours(0, 0, 0, 0)) {
return `
<div class="message service">
<div class="body details">
- ${new Date(event._localTimestamp)
+ ${new Date(event.getTs())
.toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })}
</div>
</div>
@@ -370,11 +364,11 @@ const createHTML = (events, room) => {
let prevEvent = null;
for (const event of events) {
content += dateSeparator(event, prevEvent);
- if (event.getContent().msgtype === "m.text") {
+ if (event.getType() === "m.room.message") {
const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
&& event.sender.userId === prevEvent.sender.userId && !dateSeparator(event, prevEvent);
- const body = createBody(event, shouldBeJoined);
+ const body = createMessageBody(event, shouldBeJoined, !!replyId(event), replyId(event));
content += body;
} else {
@@ -394,8 +388,8 @@ const createHTML = (events, room) => {
const exportConversationalHistory = async (room) => {
const res = getTimelineConversation(room);
- const html = createHTML(res, room);
const zip = new JSZip();
+ const html = createHTML(res, room);
zip.file("css/style.css", css);
zip.file("index.html", html);
const filename = `matrix-export-${new Date().toISOString()}.zip`;
From cea60ef26c05b11a20d42afb25878b85eab469b6 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 21 May 2021 13:18:39 +0530
Subject: [PATCH 003/313] Handle reply checking for encrypted messages
---
src/utils/exportUtils.js | 23 +++++++++++------------
1 file changed, 11 insertions(+), 12 deletions(-)
diff --git a/src/utils/exportUtils.js b/src/utils/exportUtils.js
index 1954d64467..e357ac6575 100644
--- a/src/utils/exportUtils.js
+++ b/src/utils/exportUtils.js
@@ -175,7 +175,7 @@ pre {
.page_body {
padding-top: 64px;
- width: 480px;
+ width: 700px;
margin: 0 auto;
}
@@ -239,7 +239,6 @@ div.selected {
}
.default .from_name {
- color: #3892db;
font-weight: 700;
padding-bottom: 5px;
}
@@ -336,10 +335,13 @@ const createMessageBody = (event, joined = false, isReply = false, replyId = nul
`;
};
-const replyId = (event) => {
- const relatesTo = event.getContent()["m.relates_to"];
- const replyId = relatesTo ? relatesTo["m.in_reply_to"].event_id : null;
- return replyId;
+
+const baseEventId = (event) => {
+ const isEncrypted = event.isEncrypted();
+ // If encrypted, in_reply_to lies in event.event.content
+ const content = isEncrypted ? event.event.content : event.getContent();
+ const relatesTo = content["m.relates_to"];
+ return relatesTo ? relatesTo["m.in_reply_to"].event_id : null;
};
@@ -365,11 +367,10 @@ const createHTML = (events, room) => {
for (const event of events) {
content += dateSeparator(event, prevEvent);
if (event.getType() === "m.room.message") {
+ const replyTo = baseEventId(event);
const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
- && event.sender.userId === prevEvent.sender.userId && !dateSeparator(event, prevEvent);
-
- const body = createMessageBody(event, shouldBeJoined, !!replyId(event), replyId(event));
-
+ && event.sender.userId === prevEvent.sender.userId && !dateSeparator(event, prevEvent) && !replyTo;
+ const body = createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
content += body;
} else {
content += `
@@ -395,9 +396,7 @@ const exportConversationalHistory = async (room) => {
const filename = `matrix-export-${new Date().toISOString()}.zip`;
//Generate the zip file asynchronously
-
const blob = await zip.generateAsync({ type: "blob" });
-
//Create a writable stream to the directory
const fileStream = streamSaver.createWriteStream(filename, blob.size);
const writer = fileStream.getWriter();
From 2676e61d698db1ac490f8c374bf3fca221308e7b Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 21 May 2021 20:00:01 +0530
Subject: [PATCH 004/313] Embed avatar and chat images into HTML
---
src/utils/exportUtils.js | 198 +++++++++++++++++++++++++++------------
1 file changed, 137 insertions(+), 61 deletions(-)
diff --git a/src/utils/exportUtils.js b/src/utils/exportUtils.js
index e357ac6575..433600eac4 100644
--- a/src/utils/exportUtils.js
+++ b/src/utils/exportUtils.js
@@ -4,6 +4,8 @@ import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
import JSZip from "jszip";
import { textForEvent } from "../TextForEvent";
import streamSaver from "streamsaver";
+import { decryptFile } from "./DecryptFile";
+import { mediaFromContent, mediaFromMxc } from "../customisations/Media";
const wrapHTML = (content, room) => (`
<!DOCTYPE html>
@@ -33,36 +35,6 @@ const wrapHTML = (content, room) => (`
`);
-const getTimelineConversation = (room) => {
- if (!room) return;
-
- const cli = MatrixClientPeg.get();
-
- const timelineSet = room.getUnfilteredTimelineSet();
-
- const timelineWindow = new TimelineWindow(
- cli, timelineSet,
- {windowLimit: Number.MAX_VALUE});
-
- timelineWindow.load(null, 20);
-
- const events = timelineWindow.getEvents();
-
- // Clone and reverse the events so that we preserve the order
- arrayFastClone(events)
- .reverse()
- .forEach(event => {
- cli.decryptEventIfNeeded(event);
- });
-
- if (!timelineWindow.canPaginate('f')) {
- events.push(...timelineSet.getPendingEvents());
- }
- console.log(events);
- return events;
-};
-
-
const css = `
body {
margin: 0;
@@ -297,6 +269,37 @@ div.selected {
}
`;
+
+const getTimelineConversation = (room) => {
+ if (!room) return;
+
+ const cli = MatrixClientPeg.get();
+
+ const timelineSet = room.getUnfilteredTimelineSet();
+
+ const timelineWindow = new TimelineWindow(
+ cli, timelineSet,
+ {windowLimit: Number.MAX_VALUE});
+
+ timelineWindow.load(null, 20);
+
+ const events = timelineWindow.getEvents();
+
+ // Clone and reverse the events so that we preserve the order
+ arrayFastClone(events)
+ .reverse()
+ .forEach(event => {
+ cli.decryptEventIfNeeded(event);
+ });
+
+ if (!timelineWindow.canPaginate('f')) {
+ events.push(...timelineSet.getPendingEvents());
+ }
+ console.log(events);
+ return events;
+};
+
+
const userColors = [
"#64bf47",
"#4f9cd9",
@@ -307,41 +310,50 @@ const userColors = [
];
-//Get a color associated with a string. This is to map userId to a specific color
+//Get a color associated with string length. This is to map userId to a specific color
const getUserColor = (userId) => {
return userColors[userId.length % 4];
};
-const createMessageBody = (event, joined = false, isReply = false, replyId = null) => {
- return `
- <div class="message default clearfix ${joined ? `joined` : ``}" id="message2680">
- ${!joined ? `<div class="pull_left userpic_wrap">
- <div class="userpic" style="width: 42px; height: 42px; background-color: ${getUserColor(event.sender.name)}">
- <div class="initials" style="line-height: 42px">${event.sender.name[0]}</div>
- </div>
- </div>` : ``}
- <div class="body">
- <div class="pull_right date details" title="${new Date(event.getTs())}">${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}</div>
- ${!joined ? `<div class="from_name" style="color:${getUserColor(event.sender.name)}">
- ${event.sender.name}
- </div>`: ``}
- ${isReply ?
- `<div class="reply_to details">
- In reply to <a href="#${replyId}">this message</a>
- </div>`: ``}
- <div class="text"> ${event.getContent().body} </div>
- </div>
- </div>
- `;
+
+const getUserPic = async (event) => {
+ const member = event.sender;
+ if (!member.getMxcAvatarUrl()) {
+ return `
+ <div class="pull_left userpic_wrap">
+ <div class="userpic" style="width: 42px;height: 42px;background-color: ${getUserColor(member.userId)}">
+ <div class="initials" style="line-height: 42px;" src="users/${member.userId}">${event.sender.name[0]}</div>
+ </div>
+ </div>
+ `;
+ } else {
+ const imageUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(42, 42, "crop");
+
+ if (!avatars.has(member.userId)) {
+ avatars.set(member.userId, true);
+ const image = await fetch(imageUrl);
+ const blob = await image.blob();
+ zip.file(`users/${member.userId}`, blob);
+ }
+
+ return `
+ <div class="pull_left userpic_wrap">
+ <div class="userpic" style="width: 42px; height: 42px;">
+ <img class="initials" style="width: 42px;height: 42px;line-height:42px;" src="users/${member.userId}"/>
+ </div>
+ </div>
+ `;
+ }
};
-
+//Gets the event_id of an event to which an event is replied
const baseEventId = (event) => {
const isEncrypted = event.isEncrypted();
+
// If encrypted, in_reply_to lies in event.event.content
const content = isEncrypted ? event.event.content : event.getContent();
const relatesTo = content["m.relates_to"];
- return relatesTo ? relatesTo["m.in_reply_to"].event_id : null;
+ return (relatesTo && relatesTo["m.in_reply_to"]) ? relatesTo["m.in_reply_to"]["event_id"] : null;
};
@@ -361,16 +373,75 @@ const dateSeparator = (event, prevEvent) => {
return "";
};
-const createHTML = (events, room) => {
+const getImageData = async (event) => {
+ let blob;
+ try {
+ const isEncrypted = event.isEncrypted();
+ const content = event.getContent();
+ if (isEncrypted) {
+ blob = await decryptFile(content.file);
+ } else {
+ const media = mediaFromContent(event.getContent());
+ const image = await fetch(media.srcHttp);
+ blob = image.blob();
+ }
+ } catch (err) {
+ console.log("Error decrypting image");
+ }
+ return blob;
+};
+
+
+const createMessageBody = async (event, joined = false, isReply = false, replyId = null) => {
+ const userPic = await getUserPic(event);
+ let messageBody = "";
+ switch (event.getContent().msgtype) {
+ case "m.text":
+ messageBody = `<div class="text"> ${event.getContent().body} </div>`;
+ break;
+ case "m.image": {
+ messageBody = `<a class="photo_wrap clearfix pull_left" href="images/${event.getId()}.png">
+ <img class="photo" src="images/${event.getId()}.png" style="width: 260px; height: 156px">
+ </a>`;
+ const blob = await getImageData(event);
+ zip.file(`images/${event.getId()}.png`, blob);
+ }
+ break;
+ default:
+ break;
+ }
+
+ return `
+ <div class="message default clearfix ${joined ? `joined` : ``}" id="message2680">
+ ${!joined ? userPic : ``}
+ <div class="body">
+ <div class="pull_right date details" title="${new Date(event.getTs())}">${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}</div>
+ ${!joined ? `<div class="from_name" style="color:${getUserColor(event.sender.name)}">
+ ${event.sender.name}
+ </div>`: ``}
+ ${isReply ?
+ `<div class="reply_to details">
+ In reply to <a href="#${replyId}">this message</a>
+ </div>`: ``}
+ ${messageBody}
+ </div>
+ </div>
+ `;
+};
+
+
+const createHTML = async (events, room) => {
let content = "";
let prevEvent = null;
for (const event of events) {
content += dateSeparator(event, prevEvent);
+
if (event.getType() === "m.room.message") {
const replyTo = baseEventId(event);
const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
&& event.sender.userId === prevEvent.sender.userId && !dateSeparator(event, prevEvent) && !replyTo;
- const body = createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
+
+ const body = await createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
content += body;
} else {
content += `
@@ -387,22 +458,27 @@ const createHTML = (events, room) => {
};
+const avatars = new Map();
+let zip;
const exportConversationalHistory = async (room) => {
const res = getTimelineConversation(room);
- const zip = new JSZip();
- const html = createHTML(res, room);
- zip.file("css/style.css", css);
+ zip = new JSZip();
+
+ const html = await createHTML(res, room, avatars);
+
zip.file("index.html", html);
+ zip.file("css/style.css", css);
+
+ avatars.clear();
const filename = `matrix-export-${new Date().toISOString()}.zip`;
//Generate the zip file asynchronously
const blob = await zip.generateAsync({ type: "blob" });
+
//Create a writable stream to the directory
const fileStream = streamSaver.createWriteStream(filename, blob.size);
const writer = fileStream.getWriter();
- // console.log(blob.size);
-
// Here we chunk the blob into pieces of 10 MiB
const sliceSize = 10 * 1e6;
for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {
From e59f23880bd1c4fa4355ffd54762120fe6bb7c97 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 21 May 2021 20:25:29 +0530
Subject: [PATCH 005/313] Minor UI changes
---
src/utils/exportUtils.js | 13 +++++++------
1 file changed, 7 insertions(+), 6 deletions(-)
diff --git a/src/utils/exportUtils.js b/src/utils/exportUtils.js
index 433600eac4..0ab65df911 100644
--- a/src/utils/exportUtils.js
+++ b/src/utils/exportUtils.js
@@ -281,7 +281,7 @@ const getTimelineConversation = (room) => {
cli, timelineSet,
{windowLimit: Number.MAX_VALUE});
- timelineWindow.load(null, 20);
+ timelineWindow.load(null, 30);
const events = timelineWindow.getEvents();
@@ -347,7 +347,7 @@ const getUserPic = async (event) => {
};
//Gets the event_id of an event to which an event is replied
-const baseEventId = (event) => {
+const getBaseEventId = (event) => {
const isEncrypted = event.isEncrypted();
// If encrypted, in_reply_to lies in event.event.content
@@ -401,7 +401,7 @@ const createMessageBody = async (event, joined = false, isReply = false, replyId
break;
case "m.image": {
messageBody = `<a class="photo_wrap clearfix pull_left" href="images/${event.getId()}.png">
- <img class="photo" src="images/${event.getId()}.png" style="width: 260px; height: 156px">
+ <img class="photo" src="images/${event.getId()}.png" style="max-width: 600px; max-height: 500px;">
</a>`;
const blob = await getImageData(event);
zip.file(`images/${event.getId()}.png`, blob);
@@ -437,20 +437,21 @@ const createHTML = async (events, room) => {
content += dateSeparator(event, prevEvent);
if (event.getType() === "m.room.message") {
- const replyTo = baseEventId(event);
+ const replyTo = getBaseEventId(event);
const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
&& event.sender.userId === prevEvent.sender.userId && !dateSeparator(event, prevEvent) && !replyTo;
const body = await createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
content += body;
} else {
- content += `
+ const eventText = textForEvent(event);
+ content += eventText ? `
<div class="message service" id="${event.getId()}">
<div class="body details">
${textForEvent(event)}
</div>
</div>
- `;
+ ` : "";
}
prevEvent = event;
}
From dfb7aa4320834dfc58016a07811f1866e4ebd44b Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 22 May 2021 11:32:55 +0530
Subject: [PATCH 006/313] Refactor, move HTML export to a new file and switch
to TypeScript
---
src/components/views/rooms/RoomHeader.js | 5 +-
.../HtmlExport.ts} | 106 +++++++-----------
src/utils/exportUtils/exportUtils.js | 56 +++++++++
3 files changed, 98 insertions(+), 69 deletions(-)
rename src/utils/{exportUtils.js => exportUtils/HtmlExport.ts} (80%)
create mode 100644 src/utils/exportUtils/exportUtils.js
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index d6b4822cc2..ed2ca07ff5 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -32,7 +32,8 @@ import RoomTopic from "../elements/RoomTopic";
import RoomName from "../elements/RoomName";
import {PlaceCallType} from "../../../CallHandler";
import {replaceableComponent} from "../../../utils/replaceableComponent";
-import exportConversationalHistory from '../../../utils/exportUtils';
+import exportConversationalHistory from '../../../utils/exportUtils/exportUtils';
+import { exportFormats, exportOptions } from '../../../utils/exportUtils/exportUtils';
@replaceableComponent("views.rooms.RoomHeader")
@@ -120,7 +121,7 @@ export default class RoomHeader extends React.Component {
}
_exportConvertionalHistory = async () => {
- exportConversationalHistory(this.props.room);
+ exportConversationalHistory(this.props.room, exportFormats.HTML, exportOptions.TIMELINE);
}
render() {
diff --git a/src/utils/exportUtils.js b/src/utils/exportUtils/HtmlExport.ts
similarity index 80%
rename from src/utils/exportUtils.js
rename to src/utils/exportUtils/HtmlExport.ts
index 0ab65df911..1b0d59ab6b 100644
--- a/src/utils/exportUtils.js
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -1,13 +1,13 @@
-import { MatrixClientPeg } from "../MatrixClientPeg";
-import { arrayFastClone } from "./arrays";
-import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
-import JSZip from "jszip";
-import { textForEvent } from "../TextForEvent";
-import streamSaver from "streamsaver";
-import { decryptFile } from "./DecryptFile";
-import { mediaFromContent, mediaFromMxc } from "../customisations/Media";
-const wrapHTML = (content, room) => (`
+import streamSaver from "streamsaver";
+import JSZip from "jszip";
+import { decryptFile } from "../DecryptFile";
+import { mediaFromContent, mediaFromMxc } from "../../customisations/Media";
+import { textForEvent } from "../../TextForEvent";
+import Room from 'matrix-js-sdk/src/models/room';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
+const wrapHTML = (content: string, room: Room) => (`
<!DOCTYPE html>
<html>
<head>
@@ -270,59 +270,27 @@ div.selected {
`;
-const getTimelineConversation = (room) => {
- if (!room) return;
-
- const cli = MatrixClientPeg.get();
-
- const timelineSet = room.getUnfilteredTimelineSet();
-
- const timelineWindow = new TimelineWindow(
- cli, timelineSet,
- {windowLimit: Number.MAX_VALUE});
-
- timelineWindow.load(null, 30);
-
- const events = timelineWindow.getEvents();
-
- // Clone and reverse the events so that we preserve the order
- arrayFastClone(events)
- .reverse()
- .forEach(event => {
- cli.decryptEventIfNeeded(event);
- });
-
- if (!timelineWindow.canPaginate('f')) {
- events.push(...timelineSet.getPendingEvents());
- }
- console.log(events);
- return events;
-};
-
-
const userColors = [
"#64bf47",
"#4f9cd9",
"#9884e8",
- "#e671a5",
- "#47bcd1",
- "#ff8c44",
];
-
//Get a color associated with string length. This is to map userId to a specific color
-const getUserColor = (userId) => {
+const getUserColor = (userId: string) => {
return userColors[userId.length % 4];
};
-const getUserPic = async (event) => {
+const getUserPic = async (event: MatrixEvent) => {
const member = event.sender;
if (!member.getMxcAvatarUrl()) {
return `
<div class="pull_left userpic_wrap">
<div class="userpic" style="width: 42px;height: 42px;background-color: ${getUserColor(member.userId)}">
- <div class="initials" style="line-height: 42px;" src="users/${member.userId}">${event.sender.name[0]}</div>
+ <div class="initials" style="line-height: 42px;" src="users/${member.userId}">
+ ${event.sender.name[0]}
+ </div>;
</div>
</div>
`;
@@ -347,7 +315,7 @@ const getUserPic = async (event) => {
};
//Gets the event_id of an event to which an event is replied
-const getBaseEventId = (event) => {
+const getBaseEventId = (event: MatrixEvent) => {
const isEncrypted = event.isEncrypted();
// If encrypted, in_reply_to lies in event.event.content
@@ -357,7 +325,7 @@ const getBaseEventId = (event) => {
};
-const dateSeparator = (event, prevEvent) => {
+const dateSeparator = (event: MatrixEvent, prevEvent: MatrixEvent) => {
const prevDate = prevEvent ? new Date(prevEvent.getTs()) : null;
const currDate = new Date(event.getTs());
if (!prevDate || currDate.setHours(0, 0, 0, 0) !== prevDate.setHours(0, 0, 0, 0)) {
@@ -373,8 +341,8 @@ const dateSeparator = (event, prevEvent) => {
return "";
};
-const getImageData = async (event) => {
- let blob;
+const getImageData = async (event: MatrixEvent) => {
+ let blob: Blob;
try {
const isEncrypted = event.isEncrypted();
const content = event.getContent();
@@ -383,7 +351,7 @@ const getImageData = async (event) => {
} else {
const media = mediaFromContent(event.getContent());
const image = await fetch(media.srcHttp);
- blob = image.blob();
+ blob = await image.blob();
}
} catch (err) {
console.log("Error decrypting image");
@@ -392,7 +360,7 @@ const getImageData = async (event) => {
};
-const createMessageBody = async (event, joined = false, isReply = false, replyId = null) => {
+const createMessageBody = async (event: MatrixEvent, joined = false, isReply = false, replyId = null) => {
const userPic = await getUserPic(event);
let messageBody = "";
switch (event.getContent().msgtype) {
@@ -400,9 +368,10 @@ const createMessageBody = async (event, joined = false, isReply = false, replyId
messageBody = `<div class="text"> ${event.getContent().body} </div>`;
break;
case "m.image": {
- messageBody = `<a class="photo_wrap clearfix pull_left" href="images/${event.getId()}.png">
- <img class="photo" src="images/${event.getId()}.png" style="max-width: 600px; max-height: 500px;">
- </a>`;
+ messageBody = `
+ <a class="photo_wrap clearfix pull_left" href="images/${event.getId()}.png">
+ <img class="photo" src="images/${event.getId()}.png" style="max-width: 600px; max-height: 500px;">
+ </a>`;
const blob = await getImageData(event);
zip.file(`images/${event.getId()}.png`, blob);
}
@@ -412,10 +381,12 @@ const createMessageBody = async (event, joined = false, isReply = false, replyId
}
return `
- <div class="message default clearfix ${joined ? `joined` : ``}" id="message2680">
+ <div class="message default clearfix ${joined ? `joined` : ``}" id="${event.getId()}">
${!joined ? userPic : ``}
<div class="body">
- <div class="pull_right date details" title="${new Date(event.getTs())}">${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}</div>
+ <div class="pull_right date details" title="${new Date(event.getTs())}">
+ ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
+ </div>;
${!joined ? `<div class="from_name" style="color:${getUserColor(event.sender.name)}">
${event.sender.name}
</div>`: ``}
@@ -430,7 +401,7 @@ const createMessageBody = async (event, joined = false, isReply = false, replyId
};
-const createHTML = async (events, room) => {
+const createHTML = async (events: MatrixEvent[], room: Room) => {
let content = "";
let prevEvent = null;
for (const event of events) {
@@ -458,19 +429,19 @@ const createHTML = async (events, room) => {
return wrapHTML(content, room);
};
-
const avatars = new Map();
let zip;
-const exportConversationalHistory = async (room) => {
- const res = getTimelineConversation(room);
+
+const exportAsHTML = async (res: MatrixEvent[], room: Room) => {
zip = new JSZip();
- const html = await createHTML(res, room, avatars);
+ const html = await createHTML(res, room);
zip.file("index.html", html);
zip.file("css/style.css", css);
avatars.clear();
+
const filename = `matrix-export-${new Date().toISOString()}.zip`;
//Generate the zip file asynchronously
@@ -480,16 +451,17 @@ const exportConversationalHistory = async (room) => {
const fileStream = streamSaver.createWriteStream(filename, blob.size);
const writer = fileStream.getWriter();
- // Here we chunk the blob into pieces of 10 MiB
+ // Here we chunk the blob into pieces of 10 MB, the size might be dynamically generated.
+ // This can be used to keep track of the progress
const sliceSize = 10 * 1e6;
for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {
// console.log(fPointer);
const blobPiece = blob.slice(fPointer, fPointer + sliceSize);
const reader = new FileReader();
- const waiter = new Promise((resolve, reject) => {
+ const waiter = new Promise<void>((resolve, reject) => {
reader.onloadend = evt => {
- const arrayBufferNew = evt.target.result;
+ const arrayBufferNew: any = evt.target.result;
const uint8ArrayNew = new Uint8Array(arrayBufferNew);
// Buffer.from(reader.result)
writer.write(uint8ArrayNew);
@@ -500,6 +472,6 @@ const exportConversationalHistory = async (room) => {
await waiter;
}
writer.close();
-};
+}
-export default exportConversationalHistory;
+export default exportAsHTML;
diff --git a/src/utils/exportUtils/exportUtils.js b/src/utils/exportUtils/exportUtils.js
new file mode 100644
index 0000000000..38abe62d74
--- /dev/null
+++ b/src/utils/exportUtils/exportUtils.js
@@ -0,0 +1,56 @@
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { arrayFastClone } from "../arrays";
+import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
+import exportAsHTML from "./HtmlExport";
+
+export const exportFormats = Object.freeze({
+ "HTML": "HTML",
+ "JSON": "JSON",
+ "LOGS": "LOGS",
+});
+
+export const exportOptions = Object.freeze({
+ "TIMELINE": "TIMELINE",
+});
+
+const getTimelineConversation = (room) => {
+ if (!room) return;
+
+ const cli = MatrixClientPeg.get();
+
+ const timelineSet = room.getUnfilteredTimelineSet();
+
+ const timelineWindow = new TimelineWindow(
+ cli, timelineSet,
+ {windowLimit: Number.MAX_VALUE});
+
+ timelineWindow.load(null, 20);
+
+ const events = timelineWindow.getEvents();
+
+ // Clone and reverse the events so that we preserve the order
+ arrayFastClone(events)
+ .reverse()
+ .forEach(event => {
+ cli.decryptEventIfNeeded(event);
+ });
+
+ console.log(events);
+ return events;
+};
+
+
+const exportConversationalHistory = async (room, format, options) => {
+ const res = getTimelineConversation(room);
+ switch (format) {
+ case exportFormats.HTML:
+ await exportAsHTML(res, room);
+ break;
+ case exportFormats.JSON:
+ break;
+ case exportFormats.LOGS:
+ break;
+ }
+};
+
+export default exportConversationalHistory;
From 0bf65da70f11921ccd83fda27efac1ce86d8662b Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 22 May 2021 11:38:32 +0530
Subject: [PATCH 007/313] Remove unnecessary semicolons
---
src/utils/exportUtils/HtmlExport.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 1b0d59ab6b..6ca7f8057b 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -290,7 +290,7 @@ const getUserPic = async (event: MatrixEvent) => {
<div class="userpic" style="width: 42px;height: 42px;background-color: ${getUserColor(member.userId)}">
<div class="initials" style="line-height: 42px;" src="users/${member.userId}">
${event.sender.name[0]}
- </div>;
+ </div>
</div>
</div>
`;
@@ -386,7 +386,7 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
<div class="body">
<div class="pull_right date details" title="${new Date(event.getTs())}">
${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
- </div>;
+ </div>
${!joined ? `<div class="from_name" style="color:${getUserColor(event.sender.name)}">
${event.sender.name}
</div>`: ``}
From a47117e3b025f1a44f4538be31a7ededd5aca395 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 22 May 2021 11:55:57 +0530
Subject: [PATCH 008/313] Do not process edit events as they are already
considered
---
src/utils/exportUtils/HtmlExport.ts | 33 +++++++++++++++++------------
1 file changed, 20 insertions(+), 13 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 6ca7f8057b..97e97fdc1e 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -324,6 +324,10 @@ const getBaseEventId = (event: MatrixEvent) => {
return (relatesTo && relatesTo["m.in_reply_to"]) ? relatesTo["m.in_reply_to"]["event_id"] : null;
};
+const isEdit = (event: MatrixEvent) => {
+ if (event.getType() === "m.room.message" && event.getContent().hasOwnProperty("m.new_content")) return true;
+ return false;
+}
const dateSeparator = (event: MatrixEvent, prevEvent: MatrixEvent) => {
const prevDate = prevEvent ? new Date(prevEvent.getTs()) : null;
@@ -383,20 +387,21 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
return `
<div class="message default clearfix ${joined ? `joined` : ``}" id="${event.getId()}">
${!joined ? userPic : ``}
- <div class="body">
- <div class="pull_right date details" title="${new Date(event.getTs())}">
- ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
- </div>
- ${!joined ? `<div class="from_name" style="color:${getUserColor(event.sender.name)}">
- ${event.sender.name}
- </div>`: ``}
+ <div class="body">
+ <div class="pull_right date details" title="${new Date(event.getTs())}">
+ ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
+ </div>
+ ${!joined ? `
+ <div class="from_name" style="color:${getUserColor(event.sender.name)}">
+ ${event.sender.name}
+ </div>`: ``}
${isReply ?
- `<div class="reply_to details">
- In reply to <a href="#${replyId}">this message</a>
- </div>`: ``}
+ ` <div class="reply_to details">
+ In reply to <a href="#${replyId}">this message</a>
+ </div>`: ``}
${messageBody}
- </div>
- </div>
+ </div>
+ </div>
`;
};
@@ -405,6 +410,8 @@ const createHTML = async (events: MatrixEvent[], room: Room) => {
let content = "";
let prevEvent = null;
for (const event of events) {
+ // As the getContent of the edited event fetches the latest edit, there is no need to process edit events
+ if (isEdit(event)) continue;
content += dateSeparator(event, prevEvent);
if (event.getType() === "m.room.message") {
@@ -430,7 +437,7 @@ const createHTML = async (events: MatrixEvent[], room: Room) => {
};
const avatars = new Map();
-let zip;
+let zip: any;
const exportAsHTML = async (res: MatrixEvent[], room: Room) => {
zip = new JSZip();
From bb81515cdd2131030dbe8d72ad45eaf4e0f9047e Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 22 May 2021 12:35:13 +0530
Subject: [PATCH 009/313] Use matrix style class names, modify CSS and some
small changes
---
src/components/views/rooms/RoomHeader.js | 2 +-
src/utils/exportUtils/HtmlExport.ts | 196 ++++++++++-------------
2 files changed, 85 insertions(+), 113 deletions(-)
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index ed2ca07ff5..717a5cecb7 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -121,7 +121,7 @@ export default class RoomHeader extends React.Component {
}
_exportConvertionalHistory = async () => {
- exportConversationalHistory(this.props.room, exportFormats.HTML, exportOptions.TIMELINE);
+ await exportConversationalHistory(this.props.room, exportFormats.HTML, exportOptions.TIMELINE);
}
render() {
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 97e97fdc1e..d234d22662 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -10,27 +10,26 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
const wrapHTML = (content: string, room: Room) => (`
<!DOCTYPE html>
<html>
- <head>
- <meta charset="utf-8" />
- <title>Exported Data</title>
- <meta content="width=device-width, initial-scale=1.0" name="viewport" />
- <link href="css/style.css" rel="stylesheet" />
- <script src="js/script.js" type="text/javascript"></script>
- </head>
- <body>
- <div class="page_wrap">
- <div class="page_header">
- <div class="content">
- <div class="text bold">${room.name}</div>
+ <head>
+ <meta charset="utf-8" />
+ <title>Exported Data</title>
+ <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+ <link href="css/style.css" rel="stylesheet" />
+ </head>
+ <body>
+ <div class="mx_page_wrap">
+ <div class="mx_page_header">
+ <div class="mx_content">
+ <div class="mx_text mx_bold">${room.name}</div>
+ </div>
+ </div>
+ <div class="mx_page_body mx_chat_page">
+ <div class="mx_history">
+ ${content}
+ </div>
+ </div>
</div>
- </div>
- <div class="page_body chat_page">
- <div class="history">
- ${content}
- </div>
- </div>
- </div>
- </body>
+ </body>
</html>
`);
@@ -41,39 +40,7 @@ body {
font: 12px/18px 'Inter', 'Open Sans',"Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Verdana,sans-serif;
}
-strong {
- font-weight: 700;
-}
-
-code, kbd, pre, samp {
- font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
-}
-
-code {
- padding: 2px 4px;
- font-size: 90%;
- color: #c7254e;
- background-color: #f9f2f4;
- border-radius: 4px;
-}
-
-pre {
- display: block;
- margin: 0;
- line-height: 1.42857143;
- word-break: break-all;
- word-wrap: break-word;
- color: #333;
- background-color: #f5f5f5;
- border-radius: 4px;
- overflow: auto;
- padding: 3px;
- border: 1px solid #eee;
- max-height: none;
- font-size: inherit;
-}
-
-.clearfix:after {
+.mx_clearfix:after {
content: " ";
visibility: hidden;
display: block;
@@ -81,29 +48,29 @@ pre {
clear: both;
}
-.pull_left {
+.mx_pull_left {
float: left;
}
-.pull_right {
+.mx_pull_right {
float: right;
}
-.page_wrap {
+.mx_page_wrap {
background-color: #ffffff;
color: #000000;
}
-.page_wrap a {
+.mx_page_wrap a {
color: #168acd;
text-decoration: none;
}
-.page_wrap a:hover {
+.mx_page_wrap a:hover {
text-decoration: underline;
}
-.page_header {
+.mx_page_header {
position: fixed;
z-index: 10;
background-color: #ffffff;
@@ -111,28 +78,28 @@ pre {
border-bottom: 1px solid #e3e6e8;
}
-.page_header .content {
+.mx_page_header .mx_content {
width: 480px;
margin: 0 auto;
border-radius: 0 !important;
}
-.page_header a.content {
+.mx_page_header a.mx_content {
background-repeat: no-repeat;
background-position: 24px 21px;
background-size: 24px 24px;
}
-.bold {
+.mx_bold {
color: #212121;
font-weight: 700;
}
-.details {
+.mx_details {
color: #70777b;
}
-.page_header .content .text {
+.mx_page_header .mx_content .mx_text {
padding: 24px 24px 22px 24px;
font-size: 22px;
overflow: hidden;
@@ -141,23 +108,23 @@ pre {
text-align: center;
}
-.page_header a.content .text {
+.mx_page_header a.mx_content .mx_text {
padding: 24px 24px 22px 82px;
}
-.page_body {
+.mx_page_body {
padding-top: 64px;
width: 700px;
margin: 0 auto;
}
-.userpic {
+.mx_userpic {
display: block;
border-radius: 50%;
overflow: hidden;
}
-.userpic .initials {
+.mx_userpic .mx_initials {
display: block;
color: #fff;
text-align: center;
@@ -165,106 +132,105 @@ pre {
user-select: none;
}
-a.block_link {
+a.mx_block_link {
display: block;
text-decoration: none !important;
border-radius: 4px;
}
-a.block_link:hover {
+a.mx_block_link:hover {
text-decoration: none !important;
background-color: #f5f7f8;
}
-.history {
+.mx_history {
padding: 16px 0;
}
-.message {
+.mx_message {
margin: 0 -10px;
transition: background-color 2.0s ease;
}
-div.selected {
+div.mx_selected {
background-color: rgba(242,246,250,255);
transition: background-color 0.5s ease;
}
-.service {
+.mx_service {
padding: 10px 24px;
}
-.service .body {
+.mx_service .mx_body {
text-align: center;
}
-.message .userpic .initials {
+.mx_message .mx_userpic .mx_initials {
font-size: 16px;
}
-.default {
+.mx_default {
padding: 10px;
}
-.default.joined {
+.mx_default.mx_joined {
margin-top: -10px;
}
-.default .from_name {
+.mx_default .mx_from_name {
font-weight: 700;
padding-bottom: 5px;
}
-.default .body {
+.mx_default .mx_body {
margin-left: 60px;
}
-.default .text {
+.mx_default .mx_text {
word-wrap: break-word;
line-height: 150%;
}
-.default .reply_to,
-.default .media_wrap {
+.mx_default .mx_reply_to,
+.mx_default .mx_media_wrap {
padding-bottom: 5px;
}
-.default .media {
+.mx_default .mx_media {
margin: 0 -10px;
padding: 5px 10px;
}
-.default .media .fill,
-.default .media .thumb {
+.mx_default .mx_media .mx_fill,
+.mx_default .mx_media .mx_thumb {
width: 48px;
height: 48px;
border-radius: 50%;
}
-.default .media .fill {
+.mx_default .mx_media .mx_fill {
background-repeat: no-repeat;
background-position: 12px 12px;
background-size: 24px 24px;
}
-.default .media .title,
-.default .media_poll .question {
+.mx_default .mx_media .mx_title {
padding-top: 4px;
font-size: 14px;
}
-.default .media .description {
+.mx_default .mx_media .mx_description {
color: #000000;
padding-top: 4px;
font-size: 13px;
}
-.default .media .status {
+.mx_default .mx_media .mx_status {
padding-top: 4px;
font-size: 13px;
}
-.default .photo {
+.mx_default .mx_photo {
display: block;
}
`;
@@ -286,9 +252,9 @@ const getUserPic = async (event: MatrixEvent) => {
const member = event.sender;
if (!member.getMxcAvatarUrl()) {
return `
- <div class="pull_left userpic_wrap">
- <div class="userpic" style="width: 42px;height: 42px;background-color: ${getUserColor(member.userId)}">
- <div class="initials" style="line-height: 42px;" src="users/${member.userId}">
+ <div class="mx_pull_left mx_userpic_wrap">
+ <div class="mx_userpic" style="width: 42px;height: 42px;background-color: ${getUserColor(member.userId)}">
+ <div class="mx_initials" style="line-height: 42px;" src="users/${member.userId}">
${event.sender.name[0]}
</div>
</div>
@@ -305,9 +271,13 @@ const getUserPic = async (event: MatrixEvent) => {
}
return `
- <div class="pull_left userpic_wrap">
- <div class="userpic" style="width: 42px; height: 42px;">
- <img class="initials" style="width: 42px;height: 42px;line-height:42px;" src="users/${member.userId}"/>
+ <div class="mx_pull_left mx_userpic_wrap">
+ <div class="mx_userpic" style="width: 42px; height: 42px;">
+ <img
+ class="mx_initials"
+ style="width: 42px;height: 42px;line-height:42px;"
+ src="users/${member.userId}"
+ />
</div>
</div>
`;
@@ -334,8 +304,8 @@ const dateSeparator = (event: MatrixEvent, prevEvent: MatrixEvent) => {
const currDate = new Date(event.getTs());
if (!prevDate || currDate.setHours(0, 0, 0, 0) !== prevDate.setHours(0, 0, 0, 0)) {
return `
- <div class="message service">
- <div class="body details">
+ <div class="mx_message mx_service">
+ <div class="mx_body mx_details">
${new Date(event.getTs())
.toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })}
</div>
@@ -369,12 +339,16 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
let messageBody = "";
switch (event.getContent().msgtype) {
case "m.text":
- messageBody = `<div class="text"> ${event.getContent().body} </div>`;
+ messageBody = `<div class="mx_text"> ${event.getContent().body} </div>`;
break;
case "m.image": {
messageBody = `
- <a class="photo_wrap clearfix pull_left" href="images/${event.getId()}.png">
- <img class="photo" src="images/${event.getId()}.png" style="max-width: 600px; max-height: 500px;">
+ <a class="mx_photo_wrap mx_clearfix mx_pull_left" href="images/${event.getId()}.png">
+ <img
+ class="mx_photo"
+ style="max-width: 600px; max-height: 500px;"
+ src="images/${event.getId()}.png"
+ />
</a>`;
const blob = await getImageData(event);
zip.file(`images/${event.getId()}.png`, blob);
@@ -385,18 +359,18 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
}
return `
- <div class="message default clearfix ${joined ? `joined` : ``}" id="${event.getId()}">
+ <div class="mx_message mx_default mx_clearfix ${joined ? `mx_joined` : ``}" id="${event.getId()}">
${!joined ? userPic : ``}
- <div class="body">
- <div class="pull_right date details" title="${new Date(event.getTs())}">
+ <div class="mx_body">
+ <div class="mx_pull_right mx_date mx_details" title="${new Date(event.getTs())}">
${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
</div>
${!joined ? `
- <div class="from_name" style="color:${getUserColor(event.sender.name)}">
+ <div class="mx_from_name" style="color:${getUserColor(event.sender.name)}">
${event.sender.name}
</div>`: ``}
${isReply ?
- ` <div class="reply_to details">
+ ` <div class="mx_reply_to mx_details">
In reply to <a href="#${replyId}">this message</a>
</div>`: ``}
${messageBody}
@@ -424,8 +398,8 @@ const createHTML = async (events: MatrixEvent[], room: Room) => {
} else {
const eventText = textForEvent(event);
content += eventText ? `
- <div class="message service" id="${event.getId()}">
- <div class="body details">
+ <div class="mx_message mx_service" id="${event.getId()}">
+ <div class="mx_body mx_details">
${textForEvent(event)}
</div>
</div>
@@ -462,7 +436,6 @@ const exportAsHTML = async (res: MatrixEvent[], room: Room) => {
// This can be used to keep track of the progress
const sliceSize = 10 * 1e6;
for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {
- // console.log(fPointer);
const blobPiece = blob.slice(fPointer, fPointer + sliceSize);
const reader = new FileReader();
@@ -470,7 +443,6 @@ const exportAsHTML = async (res: MatrixEvent[], room: Room) => {
reader.onloadend = evt => {
const arrayBufferNew: any = evt.target.result;
const uint8ArrayNew = new Uint8Array(arrayBufferNew);
- // Buffer.from(reader.result)
writer.write(uint8ArrayNew);
resolve();
};
From e3b0d89ae9f119cf4926aa1d4eef5d0ba4973b60 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 22 May 2021 13:33:13 +0530
Subject: [PATCH 010/313] Add some colours
---
src/utils/exportUtils/HtmlExport.ts | 5 ++++-
src/utils/exportUtils/exportUtils.js | 2 +-
2 files changed, 5 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index d234d22662..a6398e05fd 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -240,11 +240,14 @@ const userColors = [
"#64bf47",
"#4f9cd9",
"#9884e8",
+ "#fb6238",
+ "#00cdac",
+ "#ff5eaa",
];
//Get a color associated with string length. This is to map userId to a specific color
const getUserColor = (userId: string) => {
- return userColors[userId.length % 4];
+ return userColors[userId.length % userColors.length];
};
diff --git a/src/utils/exportUtils/exportUtils.js b/src/utils/exportUtils/exportUtils.js
index 38abe62d74..c73fd90a5a 100644
--- a/src/utils/exportUtils/exportUtils.js
+++ b/src/utils/exportUtils/exportUtils.js
@@ -24,7 +24,7 @@ const getTimelineConversation = (room) => {
cli, timelineSet,
{windowLimit: Number.MAX_VALUE});
- timelineWindow.load(null, 20);
+ timelineWindow.load(null, 30);
const events = timelineWindow.getEvents();
From 3147acec0cca9a6644874164cb8cb72e44d2c951 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 24 May 2021 18:01:09 +0530
Subject: [PATCH 011/313] Switch completely to TypeScript, updated userColors
---
package.json | 1 +
src/utils/exportUtils/HtmlExport.ts | 28 +++++++++++--------
.../{exportUtils.js => exportUtils.ts} | 22 +++++++--------
yarn.lock | 5 ++++
4 files changed, 33 insertions(+), 23 deletions(-)
rename src/utils/exportUtils/{exportUtils.js => exportUtils.ts} (76%)
diff --git a/package.json b/package.json
index 9ac4890465..61b2a27acc 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
},
"dependencies": {
"@babel/runtime": "^7.12.5",
+ "@types/streamsaver": "^2.0.0",
"await-lock": "^2.1.0",
"blueimp-canvas-to-blob": "^3.28.0",
"browser-encrypt-attachment": "^0.3.0",
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index a6398e05fd..a8df3180b8 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -1,4 +1,3 @@
-
import streamSaver from "streamsaver";
import JSZip from "jszip";
import { decryptFile } from "../DecryptFile";
@@ -237,16 +236,18 @@ div.mx_selected {
const userColors = [
- "#64bf47",
- "#4f9cd9",
- "#9884e8",
- "#fb6238",
- "#00cdac",
- "#ff5eaa",
+ "#368bd6",
+ "#ac3ba8",
+ "#03b381",
+ "#e64f7a",
+ "#ff812d",
+ "#2dc2c5",
+ "#5c56f5",
+ "#74d12c",
];
//Get a color associated with string length. This is to map userId to a specific color
-const getUserColor = (userId: string) => {
+const getUserNameColorClass = (userId: string) => {
return userColors[userId.length % userColors.length];
};
@@ -256,7 +257,10 @@ const getUserPic = async (event: MatrixEvent) => {
if (!member.getMxcAvatarUrl()) {
return `
<div class="mx_pull_left mx_userpic_wrap">
- <div class="mx_userpic" style="width: 42px;height: 42px;background-color: ${getUserColor(member.userId)}">
+ <div
+ class="mx_userpic"
+ style="width: 42px;height: 42px;background-color: ${getUserNameColorClass(member.userId)}"
+ >
<div class="mx_initials" style="line-height: 42px;" src="users/${member.userId}">
${event.sender.name[0]}
</div>
@@ -369,7 +373,7 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
</div>
${!joined ? `
- <div class="mx_from_name" style="color:${getUserColor(event.sender.name)}">
+ <div class="mx_from_name" style="color:${getUserNameColorClass(event.sender.name)}">
${event.sender.name}
</div>`: ``}
${isReply ?
@@ -414,7 +418,7 @@ const createHTML = async (events: MatrixEvent[], room: Room) => {
};
const avatars = new Map();
-let zip: any;
+let zip: JSZip;
const exportAsHTML = async (res: MatrixEvent[], room: Room) => {
zip = new JSZip();
@@ -432,7 +436,7 @@ const exportAsHTML = async (res: MatrixEvent[], room: Room) => {
const blob = await zip.generateAsync({ type: "blob" });
//Create a writable stream to the directory
- const fileStream = streamSaver.createWriteStream(filename, blob.size);
+ const fileStream = streamSaver.createWriteStream(filename, { size: blob.size });
const writer = fileStream.getWriter();
// Here we chunk the blob into pieces of 10 MB, the size might be dynamically generated.
diff --git a/src/utils/exportUtils/exportUtils.js b/src/utils/exportUtils/exportUtils.ts
similarity index 76%
rename from src/utils/exportUtils/exportUtils.js
rename to src/utils/exportUtils/exportUtils.ts
index c73fd90a5a..b5356ca1e5 100644
--- a/src/utils/exportUtils/exportUtils.js
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,19 +1,20 @@
import { MatrixClientPeg } from "../../MatrixClientPeg";
import { arrayFastClone } from "../arrays";
import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
+import Room from 'matrix-js-sdk/src/models/room';
import exportAsHTML from "./HtmlExport";
-export const exportFormats = Object.freeze({
- "HTML": "HTML",
- "JSON": "JSON",
- "LOGS": "LOGS",
-});
+export enum exportFormats {
+ HTML = "HTML",
+ JSON = "JSON",
+ LOGS = "LOGS",
+}
-export const exportOptions = Object.freeze({
- "TIMELINE": "TIMELINE",
-});
+export enum exportOptions {
+ TIMELINE = "TIMELINE",
+}
-const getTimelineConversation = (room) => {
+const getTimelineConversation = (room: Room) => {
if (!room) return;
const cli = MatrixClientPeg.get();
@@ -35,12 +36,11 @@ const getTimelineConversation = (room) => {
cli.decryptEventIfNeeded(event);
});
- console.log(events);
return events;
};
-const exportConversationalHistory = async (room, format, options) => {
+const exportConversationalHistory = async (room: Room, format: string, options) => {
const res = getTimelineConversation(room);
switch (format) {
case exportFormats.HTML:
diff --git a/yarn.lock b/yarn.lock
index 438cc94f27..982b9e607b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1655,6 +1655,11 @@
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
+"@types/streamsaver@^2.0.0":
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/@types/streamsaver/-/streamsaver-2.0.0.tgz#2a6bdec0389f41a74c60091d37e84f8840d27ac9"
+ integrity sha512-TzUEZk30QmNaS6GAhcOnH/Cl2mO7HCFhQUr6GpzvuoFziFCxmvuyLftHW79agJpZvIrqti9jSiDHMgflUwbejg==
+
"@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
version "2.0.3"
resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
From 0029bf566b26948acc9a75d62943d997adcceaaa Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 24 May 2021 18:04:03 +0530
Subject: [PATCH 012/313] Small correction
---
src/utils/exportUtils/HtmlExport.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index a8df3180b8..72f163c5f0 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -3,7 +3,7 @@ import JSZip from "jszip";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent, mediaFromMxc } from "../../customisations/Media";
import { textForEvent } from "../../TextForEvent";
-import Room from 'matrix-js-sdk/src/models/room';
+import { Room } from 'matrix-js-sdk/src/models/room';
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
const wrapHTML = (content: string, room: Room) => (`
From e6c4ab3993b9ed4e57d6469d4f787d8666543de1 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 24 May 2021 19:17:07 +0530
Subject: [PATCH 013/313] Use classes instead of loosely defined functions, use
prebuilt function for color binding
---
src/utils/exportUtils/HtmlExport.ts | 265 ++++++++++++++++-----------
src/utils/exportUtils/exportUtils.ts | 4 +-
2 files changed, 163 insertions(+), 106 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 72f163c5f0..8dbf14f924 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -5,32 +5,7 @@ import { mediaFromContent, mediaFromMxc } from "../../customisations/Media";
import { textForEvent } from "../../TextForEvent";
import { Room } from 'matrix-js-sdk/src/models/room';
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-
-const wrapHTML = (content: string, room: Room) => (`
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Exported Data</title>
- <meta content="width=device-width, initial-scale=1.0" name="viewport" />
- <link href="css/style.css" rel="stylesheet" />
- </head>
- <body>
- <div class="mx_page_wrap">
- <div class="mx_page_header">
- <div class="mx_content">
- <div class="mx_text mx_bold">${room.name}</div>
- </div>
- </div>
- <div class="mx_page_body mx_chat_page">
- <div class="mx_history">
- ${content}
- </div>
- </div>
- </div>
- </body>
- </html>
-`);
+import { getUserNameColorClass } from "../FormattingUtils";
const css = `
@@ -232,34 +207,128 @@ div.mx_selected {
.mx_default .mx_photo {
display: block;
}
+
+.mx_from_name.mx_Username_color1{
+ color: #368bd6;
+}
+
+.mx_initials_wrap.mx_Username_color1{
+ background-color: #368bd6;
+}
+
+.mx_from_name.mx_Username_color2{
+ color: #ac3ba8;
+}
+
+.mx_initials_wrap.mx_Username_color2{
+ background-color: #ac3ba8;
+}
+
+.mx_from_name.mx_Username_color3{
+ color: #03b381;
+}
+
+.mx_initials_wrap.mx_Username_color3{
+ background-color: #03b381;
+}
+
+.mx_from_name.mx_Username_color4{
+ color: #e64f7a;
+}
+
+.mx_initials_wrap.mx_Username_color4{
+ background-color: #e64f7a;
+}
+
+.mx_from_name.mx_Username_color5{
+ color: #ff812d;
+}
+
+.mx_initials_wrap.mx_Username_color5{
+ background-color: #ff812d;
+}
+
+.mx_from_name.mx_Username_color6{
+ color: #2dc2c5;
+}
+
+.mx_initials_wrap.mx_Username_color6{
+ background-color: #2dc2c5;
+}
+
+.mx_from_name.mx_Username_color7{
+ color: #5c56f5;
+}
+
+.mx_initials_wrap.mx_Username_color7{
+ background-color: #5c56f5;
+}
+
+.mx_from_name.mx_Username_color8{
+ color: #74d12c;
+}
+
+.mx_initials_wrap.mx_Username_color8{
+ background-color: #74d12c;
+}
`;
-const userColors = [
- "#368bd6",
- "#ac3ba8",
- "#03b381",
- "#e64f7a",
- "#ff812d",
- "#2dc2c5",
- "#5c56f5",
- "#74d12c",
-];
+export default class HTMLExporter {
+protected zip: JSZip;
+protected res: MatrixEvent[];
+protected room: Room;
+protected avatars: Map<string, boolean>;
-//Get a color associated with string length. This is to map userId to a specific color
-const getUserNameColorClass = (userId: string) => {
- return userColors[userId.length % userColors.length];
-};
+constructor(res: MatrixEvent[], room: Room) {
+ this.res = res;
+ this.room = room;
+ this.zip = new JSZip();
+ this.avatars = new Map<string, boolean>();
+}
+
+protected wrapHTML(content: string, room: Room) {
+ return `
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <meta charset="utf-8" />
+ <title>Exported Data</title>
+ <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+ <link href="css/style.css" rel="stylesheet" />
+ </head>
+ <body>
+ <div class="mx_page_wrap">
+ <div class="mx_page_header">
+ <div class="mx_content">
+ <div class="mx_text mx_bold">${room.name}</div>
+ </div>
+ </div>
+ <div class="mx_page_body mx_chat_page">
+ <div class="mx_history">
+ ${content}
+ </div>
+ </div>
+ </div>
+ </body>
+ </html>
+`
+}
-const getUserPic = async (event: MatrixEvent) => {
+protected isEdit(event: MatrixEvent) {
+ if (event.getType() === "m.room.message" && event.getContent().hasOwnProperty("m.new_content")) return true;
+ return false;
+}
+
+protected async getUserAvatar(event: MatrixEvent) {
const member = event.sender;
if (!member.getMxcAvatarUrl()) {
return `
<div class="mx_pull_left mx_userpic_wrap">
<div
- class="mx_userpic"
- style="width: 42px;height: 42px;background-color: ${getUserNameColorClass(member.userId)}"
+ class="mx_userpic mx_initials_wrap ${getUserNameColorClass(event.getSender())}"
+ style="width: 42px;height: 42px;"
>
<div class="mx_initials" style="line-height: 42px;" src="users/${member.userId}">
${event.sender.name[0]}
@@ -270,11 +339,11 @@ const getUserPic = async (event: MatrixEvent) => {
} else {
const imageUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(42, 42, "crop");
- if (!avatars.has(member.userId)) {
- avatars.set(member.userId, true);
+ if (!this.avatars.has(member.userId)) {
+ this.avatars.set(member.userId, true);
const image = await fetch(imageUrl);
const blob = await image.blob();
- zip.file(`users/${member.userId}`, blob);
+ this.zip.file(`users/${member.userId}`, blob);
}
return `
@@ -289,40 +358,10 @@ const getUserPic = async (event: MatrixEvent) => {
</div>
`;
}
-};
-
-//Gets the event_id of an event to which an event is replied
-const getBaseEventId = (event: MatrixEvent) => {
- const isEncrypted = event.isEncrypted();
-
- // If encrypted, in_reply_to lies in event.event.content
- const content = isEncrypted ? event.event.content : event.getContent();
- const relatesTo = content["m.relates_to"];
- return (relatesTo && relatesTo["m.in_reply_to"]) ? relatesTo["m.in_reply_to"]["event_id"] : null;
-};
-
-const isEdit = (event: MatrixEvent) => {
- if (event.getType() === "m.room.message" && event.getContent().hasOwnProperty("m.new_content")) return true;
- return false;
}
-const dateSeparator = (event: MatrixEvent, prevEvent: MatrixEvent) => {
- const prevDate = prevEvent ? new Date(prevEvent.getTs()) : null;
- const currDate = new Date(event.getTs());
- if (!prevDate || currDate.setHours(0, 0, 0, 0) !== prevDate.setHours(0, 0, 0, 0)) {
- return `
- <div class="mx_message mx_service">
- <div class="mx_body mx_details">
- ${new Date(event.getTs())
- .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })}
- </div>
- </div>
- `;
- }
- return "";
-};
-const getImageData = async (event: MatrixEvent) => {
+protected async getImageData(event: MatrixEvent) {
let blob: Blob;
try {
const isEncrypted = event.isEncrypted();
@@ -338,11 +377,36 @@ const getImageData = async (event: MatrixEvent) => {
console.log("Error decrypting image");
}
return blob;
+}
+
+//Gets the event_id of an event to which an event is replied
+protected getBaseEventId = (event: MatrixEvent) => {
+ const isEncrypted = event.isEncrypted();
+
+ // If encrypted, in_reply_to lies in event.event.content
+ const content = isEncrypted ? event.event.content : event.getContent();
+ const relatesTo = content["m.relates_to"];
+ return (relatesTo && relatesTo["m.in_reply_to"]) ? relatesTo["m.in_reply_to"]["event_id"] : null;
};
+protected dateSeparator(event: MatrixEvent, prevEvent: MatrixEvent) {
+ const prevDate = prevEvent ? new Date(prevEvent.getTs()) : null;
+ const currDate = new Date(event.getTs());
+ if (!prevDate || currDate.setHours(0, 0, 0, 0) !== prevDate.setHours(0, 0, 0, 0)) {
+ return `
+ <div class="mx_message mx_service">
+ <div class="mx_body mx_details">
+ ${new Date(event.getTs())
+ .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })}
+ </div>
+ </div>
+ `;
+ }
+ return "";
+}
-const createMessageBody = async (event: MatrixEvent, joined = false, isReply = false, replyId = null) => {
- const userPic = await getUserPic(event);
+protected async createMessageBody(event: MatrixEvent, joined = false, isReply = false, replyId = null) {
+ const userPic = await this.getUserAvatar(event);
let messageBody = "";
switch (event.getContent().msgtype) {
case "m.text":
@@ -357,8 +421,8 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
src="images/${event.getId()}.png"
/>
</a>`;
- const blob = await getImageData(event);
- zip.file(`images/${event.getId()}.png`, blob);
+ const blob = await this.getImageData(event);
+ this.zip.file(`images/${event.getId()}.png`, blob);
}
break;
default:
@@ -373,7 +437,7 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
</div>
${!joined ? `
- <div class="mx_from_name" style="color:${getUserNameColorClass(event.sender.name)}">
+ <div class="mx_from_name ${getUserNameColorClass(event.getSender())}">
${event.sender.name}
</div>`: ``}
${isReply ?
@@ -384,23 +448,22 @@ const createMessageBody = async (event: MatrixEvent, joined = false, isReply = f
</div>
</div>
`;
-};
+}
-
-const createHTML = async (events: MatrixEvent[], room: Room) => {
+protected async createHTML(events: MatrixEvent[], room: Room) {
let content = "";
let prevEvent = null;
for (const event of events) {
// As the getContent of the edited event fetches the latest edit, there is no need to process edit events
- if (isEdit(event)) continue;
- content += dateSeparator(event, prevEvent);
+ if (this.isEdit(event)) continue;
+ content += this.dateSeparator(event, prevEvent);
if (event.getType() === "m.room.message") {
- const replyTo = getBaseEventId(event);
+ const replyTo = this.getBaseEventId(event);
const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
- && event.sender.userId === prevEvent.sender.userId && !dateSeparator(event, prevEvent) && !replyTo;
+ && event.sender.userId === prevEvent.sender.userId && !this.dateSeparator(event, prevEvent) && !replyTo;
- const body = await createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
+ const body = await this.createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
content += body;
} else {
const eventText = textForEvent(event);
@@ -414,26 +477,20 @@ const createHTML = async (events: MatrixEvent[], room: Room) => {
}
prevEvent = event;
}
- return wrapHTML(content, room);
-};
+ return this.wrapHTML(content, room);
+}
-const avatars = new Map();
-let zip: JSZip;
-const exportAsHTML = async (res: MatrixEvent[], room: Room) => {
- zip = new JSZip();
+public async export() {
+ const html = await this.createHTML(this.res, this.room);
- const html = await createHTML(res, room);
-
- zip.file("index.html", html);
- zip.file("css/style.css", css);
-
- avatars.clear();
+ this.zip.file("index.html", html);
+ this.zip.file("css/style.css", css);
const filename = `matrix-export-${new Date().toISOString()}.zip`;
//Generate the zip file asynchronously
- const blob = await zip.generateAsync({ type: "blob" });
+ const blob = await this.zip.generateAsync({ type: "blob" });
//Create a writable stream to the directory
const fileStream = streamSaver.createWriteStream(filename, { size: blob.size });
@@ -459,5 +516,5 @@ const exportAsHTML = async (res: MatrixEvent[], room: Room) => {
}
writer.close();
}
+}
-export default exportAsHTML;
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index b5356ca1e5..7ace83f06c 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -2,7 +2,7 @@ import { MatrixClientPeg } from "../../MatrixClientPeg";
import { arrayFastClone } from "../arrays";
import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
import Room from 'matrix-js-sdk/src/models/room';
-import exportAsHTML from "./HtmlExport";
+import HTMLExporter from "./HtmlExport";
export enum exportFormats {
HTML = "HTML",
@@ -44,7 +44,7 @@ const exportConversationalHistory = async (room: Room, format: string, options)
const res = getTimelineConversation(room);
switch (format) {
case exportFormats.HTML:
- await exportAsHTML(res, room);
+ new HTMLExporter(res, room).export();
break;
case exportFormats.JSON:
break;
From 1ee6e42e27d94e45fa033e74ad055ee7a9e19128 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 24 May 2021 19:19:10 +0530
Subject: [PATCH 014/313] Add await
---
src/utils/exportUtils/exportUtils.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 7ace83f06c..5e1c4fffbb 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -44,7 +44,7 @@ const exportConversationalHistory = async (room: Room, format: string, options)
const res = getTimelineConversation(room);
switch (format) {
case exportFormats.HTML:
- new HTMLExporter(res, room).export();
+ await new HTMLExporter(res, room).export();
break;
case exportFormats.JSON:
break;
From 136b6db047ec87797b9a12ec03fe750338422ab6 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 24 May 2021 20:48:13 +0530
Subject: [PATCH 015/313] Add an abstract exporter base class
---
src/utils/exportUtils/Exporter.ts | 7 +++++++
src/utils/exportUtils/HtmlExport.ts | 10 +++-------
2 files changed, 10 insertions(+), 7 deletions(-)
create mode 100644 src/utils/exportUtils/Exporter.ts
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
new file mode 100644
index 0000000000..a4e14153c1
--- /dev/null
+++ b/src/utils/exportUtils/Exporter.ts
@@ -0,0 +1,7 @@
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import Room from 'matrix-js-sdk/src/models/room';
+
+export abstract class Exporter {
+ constructor(protected res: MatrixEvent[], protected room: Room) {}
+ abstract export(): Promise<void>
+}
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 8dbf14f924..737a7736b4 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -6,7 +6,7 @@ import { textForEvent } from "../../TextForEvent";
import { Room } from 'matrix-js-sdk/src/models/room';
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { getUserNameColorClass } from "../FormattingUtils";
-
+import { Exporter } from "./Exporter";
const css = `
body {
@@ -273,16 +273,12 @@ div.mx_selected {
}
`;
-
-export default class HTMLExporter {
+export default class HTMLExporter extends Exporter {
protected zip: JSZip;
-protected res: MatrixEvent[];
-protected room: Room;
protected avatars: Map<string, boolean>;
constructor(res: MatrixEvent[], room: Room) {
- this.res = res;
- this.room = room;
+ super(res, room);
this.zip = new JSZip();
this.avatars = new Map<string, boolean>();
}
From 43a111d4c989ecb93fb8f29b158dd8b8f286932e Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 24 May 2021 21:20:16 +0530
Subject: [PATCH 016/313] Return blob from export
---
src/utils/exportUtils/Exporter.ts | 4 ++--
src/utils/exportUtils/HtmlExport.ts | 2 ++
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index a4e14153c1..c782cc5a63 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -1,7 +1,7 @@
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import Room from 'matrix-js-sdk/src/models/room';
+import { Room } from "matrix-js-sdk/src/models/room";
export abstract class Exporter {
constructor(protected res: MatrixEvent[], protected room: Room) {}
- abstract export(): Promise<void>
+ abstract export(): Promise<Blob>;
}
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 737a7736b4..90b65a8e2b 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -511,6 +511,8 @@ public async export() {
await waiter;
}
writer.close();
+
+ return blob;
}
}
From 7cd3f51c56105d5dcf5af27353fb6ee99d424a9c Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 25 May 2021 16:33:01 +0530
Subject: [PATCH 017/313] indent and use double quotes
---
src/utils/exportUtils/HtmlExport.ts | 447 ++++++++++++++--------------
1 file changed, 222 insertions(+), 225 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 90b65a8e2b..894e8571ef 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -3,7 +3,7 @@ import JSZip from "jszip";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent, mediaFromMxc } from "../../customisations/Media";
import { textForEvent } from "../../TextForEvent";
-import { Room } from 'matrix-js-sdk/src/models/room';
+import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { getUserNameColorClass } from "../FormattingUtils";
import { Exporter } from "./Exporter";
@@ -274,245 +274,242 @@ div.mx_selected {
`;
export default class HTMLExporter extends Exporter {
-protected zip: JSZip;
-protected avatars: Map<string, boolean>;
+ protected zip: JSZip;
+ protected avatars: Map<string, boolean>;
-constructor(res: MatrixEvent[], room: Room) {
- super(res, room);
- this.zip = new JSZip();
- this.avatars = new Map<string, boolean>();
-}
+ constructor(res: MatrixEvent[], room: Room) {
+ super(res, room);
+ this.zip = new JSZip();
+ this.avatars = new Map<string, boolean>();
+ }
-protected wrapHTML(content: string, room: Room) {
- return `
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Exported Data</title>
- <meta content="width=device-width, initial-scale=1.0" name="viewport" />
- <link href="css/style.css" rel="stylesheet" />
- </head>
- <body>
- <div class="mx_page_wrap">
- <div class="mx_page_header">
- <div class="mx_content">
- <div class="mx_text mx_bold">${room.name}</div>
+ protected wrapHTML(content: string, room: Room) {
+ return `
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <meta charset="utf-8" />
+ <title>Exported Data</title>
+ <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+ <link href="css/style.css" rel="stylesheet" />
+ </head>
+ <body>
+ <div class="mx_page_wrap">
+ <div class="mx_page_header">
+ <div class="mx_content">
+ <div class="mx_text mx_bold">${room.name}</div>
+ </div>
+ </div>
+ <div class="mx_page_body mx_chat_page">
+ <div class="mx_history">
+ ${content}
+ </div>
</div>
</div>
- <div class="mx_page_body mx_chat_page">
- <div class="mx_history">
- ${content}
- </div>
+ </body>
+ </html>
+ `
+ }
+
+ protected isEdit(event: MatrixEvent) {
+ if (event.getType() === "m.room.message" && event.getContent().hasOwnProperty("m.new_content")) return true;
+ return false;
+ }
+
+ protected async getUserAvatar(event: MatrixEvent) {
+ const member = event.sender;
+ if (!member.getMxcAvatarUrl()) {
+ return `
+ <div class="mx_pull_left mx_userpic_wrap">
+ <div
+ class="mx_userpic mx_initials_wrap ${getUserNameColorClass(event.getSender())}"
+ style="width: 42px;height: 42px;"
+ >
+ <div class="mx_initials" style="line-height: 42px;" src="users/${member.userId}">
+ ${event.sender.name[0]}
</div>
</div>
- </body>
- </html>
-`
-}
-
-
-protected isEdit(event: MatrixEvent) {
- if (event.getType() === "m.room.message" && event.getContent().hasOwnProperty("m.new_content")) return true;
- return false;
-}
-
-protected async getUserAvatar(event: MatrixEvent) {
- const member = event.sender;
- if (!member.getMxcAvatarUrl()) {
- return `
- <div class="mx_pull_left mx_userpic_wrap">
- <div
- class="mx_userpic mx_initials_wrap ${getUserNameColorClass(event.getSender())}"
- style="width: 42px;height: 42px;"
- >
- <div class="mx_initials" style="line-height: 42px;" src="users/${member.userId}">
- ${event.sender.name[0]}
- </div>
- </div>
- </div>
- `;
- } else {
- const imageUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(42, 42, "crop");
-
- if (!this.avatars.has(member.userId)) {
- this.avatars.set(member.userId, true);
- const image = await fetch(imageUrl);
- const blob = await image.blob();
- this.zip.file(`users/${member.userId}`, blob);
- }
-
- return `
- <div class="mx_pull_left mx_userpic_wrap">
- <div class="mx_userpic" style="width: 42px; height: 42px;">
- <img
- class="mx_initials"
- style="width: 42px;height: 42px;line-height:42px;"
- src="users/${member.userId}"
- />
- </div>
- </div>
- `;
- }
-}
-
-
-protected async getImageData(event: MatrixEvent) {
- let blob: Blob;
- try {
- const isEncrypted = event.isEncrypted();
- const content = event.getContent();
- if (isEncrypted) {
- blob = await decryptFile(content.file);
- } else {
- const media = mediaFromContent(event.getContent());
- const image = await fetch(media.srcHttp);
- blob = await image.blob();
- }
- } catch (err) {
- console.log("Error decrypting image");
- }
- return blob;
-}
-
-//Gets the event_id of an event to which an event is replied
-protected getBaseEventId = (event: MatrixEvent) => {
- const isEncrypted = event.isEncrypted();
-
- // If encrypted, in_reply_to lies in event.event.content
- const content = isEncrypted ? event.event.content : event.getContent();
- const relatesTo = content["m.relates_to"];
- return (relatesTo && relatesTo["m.in_reply_to"]) ? relatesTo["m.in_reply_to"]["event_id"] : null;
-};
-
-protected dateSeparator(event: MatrixEvent, prevEvent: MatrixEvent) {
- const prevDate = prevEvent ? new Date(prevEvent.getTs()) : null;
- const currDate = new Date(event.getTs());
- if (!prevDate || currDate.setHours(0, 0, 0, 0) !== prevDate.setHours(0, 0, 0, 0)) {
- return `
- <div class="mx_message mx_service">
- <div class="mx_body mx_details">
- ${new Date(event.getTs())
- .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })}
- </div>
</div>
`;
- }
- return "";
-}
-
-protected async createMessageBody(event: MatrixEvent, joined = false, isReply = false, replyId = null) {
- const userPic = await this.getUserAvatar(event);
- let messageBody = "";
- switch (event.getContent().msgtype) {
- case "m.text":
- messageBody = `<div class="mx_text"> ${event.getContent().body} </div>`;
- break;
- case "m.image": {
- messageBody = `
- <a class="mx_photo_wrap mx_clearfix mx_pull_left" href="images/${event.getId()}.png">
- <img
- class="mx_photo"
- style="max-width: 600px; max-height: 500px;"
- src="images/${event.getId()}.png"
- />
- </a>`;
- const blob = await this.getImageData(event);
- this.zip.file(`images/${event.getId()}.png`, blob);
- }
- break;
- default:
- break;
- }
-
- return `
- <div class="mx_message mx_default mx_clearfix ${joined ? `mx_joined` : ``}" id="${event.getId()}">
- ${!joined ? userPic : ``}
- <div class="mx_body">
- <div class="mx_pull_right mx_date mx_details" title="${new Date(event.getTs())}">
- ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
- </div>
- ${!joined ? `
- <div class="mx_from_name ${getUserNameColorClass(event.getSender())}">
- ${event.sender.name}
- </div>`: ``}
- ${isReply ?
- ` <div class="mx_reply_to mx_details">
- In reply to <a href="#${replyId}">this message</a>
- </div>`: ``}
- ${messageBody}
- </div>
- </div>
- `;
-}
-
-protected async createHTML(events: MatrixEvent[], room: Room) {
- let content = "";
- let prevEvent = null;
- for (const event of events) {
- // As the getContent of the edited event fetches the latest edit, there is no need to process edit events
- if (this.isEdit(event)) continue;
- content += this.dateSeparator(event, prevEvent);
-
- if (event.getType() === "m.room.message") {
- const replyTo = this.getBaseEventId(event);
- const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
- && event.sender.userId === prevEvent.sender.userId && !this.dateSeparator(event, prevEvent) && !replyTo;
-
- const body = await this.createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
- content += body;
} else {
- const eventText = textForEvent(event);
- content += eventText ? `
- <div class="mx_message mx_service" id="${event.getId()}">
- <div class="mx_body mx_details">
- ${textForEvent(event)}
+ const imageUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(42, 42, "crop");
+
+ if (!this.avatars.has(member.userId)) {
+ this.avatars.set(member.userId, true);
+ const image = await fetch(imageUrl);
+ const blob = await image.blob();
+ this.zip.file(`users/${member.userId}`, blob);
+ }
+
+ return `
+ <div class="mx_pull_left mx_userpic_wrap">
+ <div class="mx_userpic" style="width: 42px; height: 42px;">
+ <img
+ class="mx_initials"
+ style="width: 42px;height: 42px;line-height:42px;"
+ src="users/${member.userId}"
+ />
</div>
</div>
- ` : "";
+ `;
}
- prevEvent = event;
}
- return this.wrapHTML(content, room);
-}
-
-public async export() {
- const html = await this.createHTML(this.res, this.room);
-
- this.zip.file("index.html", html);
- this.zip.file("css/style.css", css);
-
- const filename = `matrix-export-${new Date().toISOString()}.zip`;
-
- //Generate the zip file asynchronously
- const blob = await this.zip.generateAsync({ type: "blob" });
-
- //Create a writable stream to the directory
- const fileStream = streamSaver.createWriteStream(filename, { size: blob.size });
- const writer = fileStream.getWriter();
-
- // Here we chunk the blob into pieces of 10 MB, the size might be dynamically generated.
- // This can be used to keep track of the progress
- const sliceSize = 10 * 1e6;
- for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {
- const blobPiece = blob.slice(fPointer, fPointer + sliceSize);
- const reader = new FileReader();
-
- const waiter = new Promise<void>((resolve, reject) => {
- reader.onloadend = evt => {
- const arrayBufferNew: any = evt.target.result;
- const uint8ArrayNew = new Uint8Array(arrayBufferNew);
- writer.write(uint8ArrayNew);
- resolve();
- };
- reader.readAsArrayBuffer(blobPiece);
- });
- await waiter;
+ protected async getImageData(event: MatrixEvent) {
+ let blob: Blob;
+ try {
+ const isEncrypted = event.isEncrypted();
+ const content = event.getContent();
+ if (isEncrypted) {
+ blob = await decryptFile(content.file);
+ } else {
+ const media = mediaFromContent(event.getContent());
+ const image = await fetch(media.srcHttp);
+ blob = await image.blob();
+ }
+ } catch (err) {
+ console.log("Error decrypting image");
+ }
+ return blob;
}
- writer.close();
- return blob;
-}
+ //Gets the event_id of an event to which an event is replied
+ protected getBaseEventId = (event: MatrixEvent) => {
+ const isEncrypted = event.isEncrypted();
+
+ // If encrypted, in_reply_to lies in event.event.content
+ const content = isEncrypted ? event.event.content : event.getContent();
+ const relatesTo = content["m.relates_to"];
+ return (relatesTo && relatesTo["m.in_reply_to"]) ? relatesTo["m.in_reply_to"]["event_id"] : null;
+ };
+
+ protected dateSeparator(event: MatrixEvent, prevEvent: MatrixEvent) {
+ const prevDate = prevEvent ? new Date(prevEvent.getTs()) : null;
+ const currDate = new Date(event.getTs());
+ if (!prevDate || currDate.setHours(0, 0, 0, 0) !== prevDate.setHours(0, 0, 0, 0)) {
+ return `
+ <div class="mx_message mx_service">
+ <div class="mx_body mx_details">
+ ${new Date(event.getTs())
+ .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })}
+ </div>
+ </div>
+ `;
+ }
+ return "";
+ }
+
+ protected async createMessageBody(event: MatrixEvent, joined = false, isReply = false, replyId = null) {
+ const userPic = await this.getUserAvatar(event);
+ let messageBody = "";
+ switch (event.getContent().msgtype) {
+ case "m.text":
+ messageBody = `<div class="mx_text"> ${event.getContent().body} </div>`;
+ break;
+ case "m.image": {
+ messageBody = `
+ <a class="mx_photo_wrap mx_clearfix mx_pull_left" href="images/${event.getId()}.png">
+ <img
+ class="mx_photo"
+ style="max-width: 600px; max-height: 500px;"
+ src="images/${event.getId()}.png"
+ />
+ </a>`;
+ const blob = await this.getImageData(event);
+ this.zip.file(`images/${event.getId()}.png`, blob);
+ }
+ break;
+ default:
+ break;
+ }
+
+ return `
+ <div class="mx_message mx_default mx_clearfix ${joined ? `mx_joined` : ``}" id="${event.getId()}">
+ ${!joined ? userPic : ``}
+ <div class="mx_body">
+ <div class="mx_pull_right mx_date mx_details" title="${new Date(event.getTs())}">
+ ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
+ </div>
+ ${!joined ? `
+ <div class="mx_from_name ${getUserNameColorClass(event.getSender())}">
+ ${event.sender.name}
+ </div>`: ``}
+ ${isReply ?
+ ` <div class="mx_reply_to mx_details">
+ In reply to <a href="#${replyId}">this message</a>
+ </div>`: ``}
+ ${messageBody}
+ </div>
+ </div>
+ `;
+ }
+
+ protected async createHTML(events: MatrixEvent[], room: Room) {
+ let content = "";
+ let prevEvent = null;
+ for (const event of events) {
+ // As the getContent of the edited event fetches the latest edit, there is no need to process edit events
+ if (this.isEdit(event)) continue;
+ content += this.dateSeparator(event, prevEvent);
+
+ if (event.getType() === "m.room.message") {
+ const replyTo = this.getBaseEventId(event);
+ const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
+ && event.sender.userId === prevEvent.sender.userId && !this.dateSeparator(event, prevEvent) && !replyTo;
+
+ const body = await this.createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
+ content += body;
+ } else {
+ const eventText = textForEvent(event);
+ content += eventText ? `
+ <div class="mx_message mx_service" id="${event.getId()}">
+ <div class="mx_body mx_details">
+ ${textForEvent(event)}
+ </div>
+ </div>
+ ` : "";
+ }
+ prevEvent = event;
+ }
+ return this.wrapHTML(content, room);
+ }
+
+ public async export() {
+ const html = await this.createHTML(this.res, this.room);
+
+ this.zip.file("index.html", html);
+ this.zip.file("css/style.css", css);
+
+ const filename = `matrix-export-${new Date().toISOString()}.zip`;
+
+ //Generate the zip file asynchronously
+ const blob = await this.zip.generateAsync({ type: "blob" });
+
+ //Create a writable stream to the directory
+ const fileStream = streamSaver.createWriteStream(filename, { size: blob.size });
+ const writer = fileStream.getWriter();
+
+ // Here we chunk the blob into pieces of 10 MB, the size might be dynamically generated.
+ // This can be used to keep track of the progress
+ const sliceSize = 10 * 1e6;
+ for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {
+ const blobPiece = blob.slice(fPointer, fPointer + sliceSize);
+ const reader = new FileReader();
+
+ const waiter = new Promise<void>((resolve, reject) => {
+ reader.onloadend = evt => {
+ const arrayBufferNew: any = evt.target.result;
+ const uint8ArrayNew = new Uint8Array(arrayBufferNew);
+ writer.write(uint8ArrayNew);
+ resolve();
+ };
+ reader.readAsArrayBuffer(blobPiece);
+ });
+ await waiter;
+ }
+ writer.close();
+
+ return blob;
+ }
}
From 0ee290648a746aeda4e2590bb2a9928a637e20c9 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 25 May 2021 17:48:08 +0530
Subject: [PATCH 018/313] Add support for firefox
---
package.json | 1 +
src/utils/exportUtils/HtmlExport.ts | 3 +++
yarn.lock | 5 +++++
3 files changed, 9 insertions(+)
diff --git a/package.json b/package.json
index 61b2a27acc..ad7de2941c 100644
--- a/package.json
+++ b/package.json
@@ -104,6 +104,7 @@
"tar-js": "^0.3.0",
"text-encoding-utf-8": "^1.0.2",
"url": "^0.11.0",
+ "web-streams-polyfill": "^3.0.3",
"what-input": "^5.2.10",
"zxcvbn": "^4.4.2"
},
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 894e8571ef..755792079a 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -7,6 +7,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { getUserNameColorClass } from "../FormattingUtils";
import { Exporter } from "./Exporter";
+import * as ponyfill from 'web-streams-polyfill/ponyfill'
const css = `
body {
@@ -485,6 +486,8 @@ export default class HTMLExporter extends Exporter {
//Generate the zip file asynchronously
const blob = await this.zip.generateAsync({ type: "blob" });
+ //Support for firefox browser
+ streamSaver.WritableStream = ponyfill.WritableStream
//Create a writable stream to the directory
const fileStream = streamSaver.createWriteStream(filename, { size: blob.size });
const writer = fileStream.getWriter();
diff --git a/yarn.lock b/yarn.lock
index 982b9e607b..d2c1a8f71d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8337,6 +8337,11 @@ walker@^1.0.7, walker@~1.0.5:
dependencies:
makeerror "1.0.x"
+web-streams-polyfill@^3.0.3:
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.0.3.tgz#f49e487eedeca47a207c1aee41ee5578f884b42f"
+ integrity sha512-d2H/t0eqRNM4w2WvmTdoeIvzAUSpK7JmATB8Nr2lb7nQ9BTIJVjbQ/TRFVEh2gUH1HwclPdoPtfMoFfetXaZnA==
+
webcrypto-core@^1.1.8:
version "1.1.8"
resolved "https://registry.yarnpkg.com/webcrypto-core/-/webcrypto-core-1.1.8.tgz#91720c07f4f2edd181111b436647ea5a282af0a9"
From 0b728ff3900f0506a43452bc647d330920ff63b5 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 25 May 2021 17:52:23 +0530
Subject: [PATCH 019/313] Use double quotes for import
---
src/utils/exportUtils/HtmlExport.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 755792079a..c21f227c35 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -7,7 +7,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { getUserNameColorClass } from "../FormattingUtils";
import { Exporter } from "./Exporter";
-import * as ponyfill from 'web-streams-polyfill/ponyfill'
+import * as ponyfill from "web-streams-polyfill/ponyfill"
const css = `
body {
From 7286aa28e189ba4de903b404a017ab0c5ee3d2cb Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 26 May 2021 10:28:20 +0530
Subject: [PATCH 020/313] Handle audio and video files
---
src/HtmlUtils.tsx | 2 +-
src/utils/exportUtils/HtmlExport.ts | 49 ++++++++++++++++++++++++----
src/utils/exportUtils/StreamToZip.ts | 17 ++++++++++
3 files changed, 60 insertions(+), 8 deletions(-)
create mode 100644 src/utils/exportUtils/StreamToZip.ts
diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx
index ef5ac383e3..1d5defe45d 100644
--- a/src/HtmlUtils.tsx
+++ b/src/HtmlUtils.tsx
@@ -233,7 +233,7 @@ const transformTags: IExtendedSanitizeOptions["transformTags"] = { // custom to
},
};
-const sanitizeHtmlParams: IExtendedSanitizeOptions = {
+export const sanitizeHtmlParams: IExtendedSanitizeOptions = {
allowedTags: [
'font', // custom to matrix for IRC-style font coloring
'del', // for markdown
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index c21f227c35..8e6070cff6 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -8,6 +8,8 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { getUserNameColorClass } from "../FormattingUtils";
import { Exporter } from "./Exporter";
import * as ponyfill from "web-streams-polyfill/ponyfill"
+import { sanitizeHtmlParams } from "../../HtmlUtils";
+import sanitizeHtml from "sanitize-html";
const css = `
body {
@@ -356,7 +358,7 @@ export default class HTMLExporter extends Exporter {
}
}
- protected async getImageData(event: MatrixEvent) {
+ protected async getMediaBlob(event: MatrixEvent) {
let blob: Blob;
try {
const isEncrypted = event.isEncrypted();
@@ -369,7 +371,7 @@ export default class HTMLExporter extends Exporter {
blob = await image.blob();
}
} catch (err) {
- console.log("Error decrypting image");
+ console.log("Error decrypting media");
}
return blob;
}
@@ -405,21 +407,54 @@ export default class HTMLExporter extends Exporter {
let messageBody = "";
switch (event.getContent().msgtype) {
case "m.text":
- messageBody = `<div class="mx_text"> ${event.getContent().body} </div>`;
+ messageBody = `
+ <div class="mx_text">
+ ${sanitizeHtml(event.getContent().body, sanitizeHtmlParams)}
+ </div>`;
break;
case "m.image": {
+ const blob = await this.getMediaBlob(event);
+ const fileName = `${event.getId()}.${blob.type.replace("image/", "")}`;
messageBody = `
<a class="mx_photo_wrap mx_clearfix mx_pull_left" href="images/${event.getId()}.png">
<img
class="mx_photo"
style="max-width: 600px; max-height: 500px;"
- src="images/${event.getId()}.png"
+ src="images/${fileName}"
/>
</a>`;
- const blob = await this.getImageData(event);
- this.zip.file(`images/${event.getId()}.png`, blob);
- }
+ this.zip.file(`images/${fileName}`, blob);
break;
+ }
+ case "m.video": {
+ const blob = await this.getMediaBlob(event);
+ const fileName = `${event.getId()}.${blob.type.replace("video/", "")}`;
+ messageBody = `
+ <div class="mx_media_wrap mx_clearfix">
+ <video
+ class="mx_video_file"
+ src="videos/${fileName}"
+ style="max-height: 400px; max-width: 600px;"
+ controls
+ />
+ </div>`;
+ this.zip.file(`videos/${fileName}`, blob);
+ break;
+ }
+ case "m.audio": {
+ const blob = await this.getMediaBlob(event);
+ const fileName = `${event.getId()}.${blob.type.replace("audio/", "")}`;
+ messageBody = `
+ <div class="mx_media_wrap mx_clearfix">
+ <audio
+ class="mx_audio_file"
+ src="audio/${fileName}"
+ controls
+ />
+ </div>`;
+ this.zip.file(`audio/${fileName}`, blob);
+ break;
+ }
default:
break;
}
diff --git a/src/utils/exportUtils/StreamToZip.ts b/src/utils/exportUtils/StreamToZip.ts
new file mode 100644
index 0000000000..769fa91dba
--- /dev/null
+++ b/src/utils/exportUtils/StreamToZip.ts
@@ -0,0 +1,17 @@
+/*Not to be reviewed now*/
+class fileCheckSum {
+ protected CRC32: number;
+ public table: any[];
+ constructor() {
+ this.CRC32 = -1
+ }
+
+ protected append(data: any[]) {
+ let crc = this.CRC32 | 0;
+ const table = this.table;
+ for (let offset = 0, len = data.length | 0; offset < len; offset++) {
+ crc = (crc >>> 8) ^ table[(crc ^ data[offset]) & 0xFF]
+ }
+ this.CRC32 = crc
+ }
+}
From 334b7ef04a193cb664928e78321fcd12d29e4925 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 26 May 2021 18:00:27 +0530
Subject: [PATCH 021/313] Implement animated scroll to base event for replies
---
src/utils/exportUtils/HtmlExport.ts | 29 ++++++++++++++++++++++-----
src/utils/exportUtils/StreamToZip.ts | 30 ++++++++++++++--------------
2 files changed, 39 insertions(+), 20 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 8e6070cff6..1e3984e34e 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -39,7 +39,7 @@ body {
}
.mx_page_wrap a {
- color: #168acd;
+ color: #238CF5;
text-decoration: none;
}
@@ -126,11 +126,11 @@ a.mx_block_link:hover {
.mx_message {
margin: 0 -10px;
- transition: background-color 2.0s ease;
+ transition: background-color 1.3s ease;
}
div.mx_selected {
- background-color: rgba(242,246,250,255);
+ background-color: #eeeeee;
transition: background-color 0.5s ease;
}
@@ -276,6 +276,20 @@ div.mx_selected {
}
`;
+const js = `
+function scrollToElement(replyId){
+ let el = document.getElementById(replyId);
+ el.scrollIntoViewIfNeeded({
+ behaviour: "smooth",
+ block: "start",
+ });
+ el.classList.add("mx_selected");
+ setTimeout(() => {
+ el.classList.remove("mx_selected");
+ }, 1000);
+}
+`
+
export default class HTMLExporter extends Exporter {
protected zip: JSZip;
protected avatars: Map<string, boolean>;
@@ -295,6 +309,7 @@ export default class HTMLExporter extends Exporter {
<title>Exported Data</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<link href="css/style.css" rel="stylesheet" />
+ <script src="js/script.js"></script>
</head>
<body>
<div class="mx_page_wrap">
@@ -459,6 +474,10 @@ export default class HTMLExporter extends Exporter {
break;
}
+ if (isReply) {
+ messageBody = event.getContent().formatted_body.replace(/<mx-reply>.*<\/mx-reply>/, '')
+ }
+
return `
<div class="mx_message mx_default mx_clearfix ${joined ? `mx_joined` : ``}" id="${event.getId()}">
${!joined ? userPic : ``}
@@ -472,7 +491,7 @@ export default class HTMLExporter extends Exporter {
</div>`: ``}
${isReply ?
` <div class="mx_reply_to mx_details">
- In reply to <a href="#${replyId}">this message</a>
+ In reply to <a href="#${replyId}" onclick="scrollToElement('${replyId}')">this message</a>
</div>`: ``}
${messageBody}
</div>
@@ -515,7 +534,7 @@ export default class HTMLExporter extends Exporter {
this.zip.file("index.html", html);
this.zip.file("css/style.css", css);
-
+ this.zip.file("js/script.js", js);
const filename = `matrix-export-${new Date().toISOString()}.zip`;
//Generate the zip file asynchronously
diff --git a/src/utils/exportUtils/StreamToZip.ts b/src/utils/exportUtils/StreamToZip.ts
index 769fa91dba..01a2880386 100644
--- a/src/utils/exportUtils/StreamToZip.ts
+++ b/src/utils/exportUtils/StreamToZip.ts
@@ -1,17 +1,17 @@
/*Not to be reviewed now*/
-class fileCheckSum {
- protected CRC32: number;
- public table: any[];
- constructor() {
- this.CRC32 = -1
- }
+// class fileCheckSum {
+// protected CRC32: number;
+// public table: any[];
+// constructor() {
+// this.CRC32 = -1
+// }
- protected append(data: any[]) {
- let crc = this.CRC32 | 0;
- const table = this.table;
- for (let offset = 0, len = data.length | 0; offset < len; offset++) {
- crc = (crc >>> 8) ^ table[(crc ^ data[offset]) & 0xFF]
- }
- this.CRC32 = crc
- }
-}
+// protected append(data: any[]) {
+// let crc = this.CRC32 | 0;
+// const table = this.table;
+// for (let offset = 0, len = data.length | 0; offset < len; offset++) {
+// crc = (crc >>> 8) ^ table[(crc ^ data[offset]) & 0xFF]
+// }
+// this.CRC32 = crc
+// }
+// }
From 60ef6f933298dd5da932d30097762d464d4263a6 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 27 May 2021 14:06:04 +0530
Subject: [PATCH 022/313] Add emote support and show a toast if the message
isn't exported
---
src/utils/exportUtils/HtmlExport.ts | 77 +++++++++++++++++++++++++++--
1 file changed, 72 insertions(+), 5 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
index 1e3984e34e..aaa6d5fadb 100644
--- a/src/utils/exportUtils/HtmlExport.ts
+++ b/src/utils/exportUtils/HtmlExport.ts
@@ -41,6 +41,7 @@ body {
.mx_page_wrap a {
color: #238CF5;
text-decoration: none;
+ cursor: pointer;
}
.mx_page_wrap a:hover {
@@ -274,20 +275,78 @@ div.mx_selected {
.mx_initials_wrap.mx_Username_color8{
background-color: #74d12c;
}
+
+#snackbar {
+ display: flex;
+ visibility: hidden;
+ min-width: 250px;
+ margin-left: -125px;
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ position: fixed;
+ z-index: 1;
+ left: 50%;
+ bottom: 30px;
+ font-size: 17px;
+ padding: 6px 16px;
+ font-size: 0.875rem;
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-weight: 400;
+ line-height: 1.43;
+ border-radius: 4px;
+ letter-spacing: 0.01071em;
+}
+
+#snackbar.show {
+ visibility: visible;
+ -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+ animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+@-webkit-keyframes fadein {
+ from {bottom: 0; opacity: 0;}
+ to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes fadein {
+ from {bottom: 0; opacity: 0;}
+ to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes fadeout {
+ from {bottom: 30px; opacity: 1;}
+ to {bottom: 0; opacity: 0;}
+}
+
+@keyframes fadeout {
+ from {bottom: 30px; opacity: 1;}
+ to {bottom: 0; opacity: 0;}
+}
`;
const js = `
function scrollToElement(replyId){
let el = document.getElementById(replyId);
- el.scrollIntoViewIfNeeded({
- behaviour: "smooth",
- block: "start",
- });
+ if(!el) {
+ showToast("The message you're looking for wasn't exported");
+ return;
+ };
+ el.scrollIntoView({ behavior: 'smooth', block: 'center' });
el.classList.add("mx_selected");
setTimeout(() => {
el.classList.remove("mx_selected");
}, 1000);
}
+
+function showToast(text) {
+ let el = document.getElementById("snackbar");
+ el.innerHTML = text;
+ el.className = "show";
+ setTimeout(() => {
+ el.className = el.className.replace("show", "");
+ }, 2000);
+}
`
export default class HTMLExporter extends Exporter {
@@ -324,6 +383,7 @@ export default class HTMLExporter extends Exporter {
</div>
</div>
</div>
+ <div id="snackbar"/>
</body>
</html>
`
@@ -427,6 +487,13 @@ export default class HTMLExporter extends Exporter {
${sanitizeHtml(event.getContent().body, sanitizeHtmlParams)}
</div>`;
break;
+ case "m.emote":
+ messageBody = `
+ <div class="mx_text">
+ * ${event.sender ? event.sender.name : event.getSender()}
+ ${sanitizeHtml(event.getContent().body, sanitizeHtmlParams)}
+ </div>`;
+ break;
case "m.image": {
const blob = await this.getMediaBlob(event);
const fileName = `${event.getId()}.${blob.type.replace("image/", "")}`;
@@ -491,7 +558,7 @@ export default class HTMLExporter extends Exporter {
</div>`: ``}
${isReply ?
` <div class="mx_reply_to mx_details">
- In reply to <a href="#${replyId}" onclick="scrollToElement('${replyId}')">this message</a>
+ In reply to <a onclick="scrollToElement('${replyId}')">this message</a>
</div>`: ``}
${messageBody}
</div>
From 573a3ca98342e98815d441ba0c0bb50c17ab33b9 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 31 May 2021 19:01:32 +0530
Subject: [PATCH 023/313] Rewrite export tool to use existing components to
render output, use existing source URLs for media
---
src/components/structures/MessagePanel.js | 2 +-
src/components/views/elements/ReplyThread.js | 12 +-
.../views/messages/DateSeparator.js | 5 +
src/components/views/rooms/EventTile.tsx | 21 +-
src/utils/exportUtils/HtmlExport.ts | 639 ------------------
src/utils/exportUtils/HtmlExport.tsx | 242 +++++++
src/utils/exportUtils/exportCSS.ts | 62 ++
src/utils/exportUtils/exportJS.ts | 32 +
8 files changed, 367 insertions(+), 648 deletions(-)
delete mode 100644 src/utils/exportUtils/HtmlExport.ts
create mode 100644 src/utils/exportUtils/HtmlExport.tsx
create mode 100644 src/utils/exportUtils/exportCSS.ts
create mode 100644 src/utils/exportUtils/exportJS.ts
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index d1071a9e19..3f06b23074 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -41,7 +41,7 @@ const continuedTypes = ['m.sticker', 'm.room.message'];
// check if there is a previous event and it has the same sender as this event
// and the types are the same/is in continuedTypes and the time between them is <= CONTINUATION_MAX_INTERVAL
-function shouldFormContinuation(prevEvent, mxEvent) {
+export function shouldFormContinuation(prevEvent, mxEvent) {
// sanity check inputs
if (!prevEvent || !prevEvent.sender || !mxEvent.sender) return false;
// check if within the max continuation period
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index 870803995d..018c5d1e6e 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -46,6 +46,7 @@ export default class ReplyThread extends React.Component {
permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired,
// Specifies which layout to use.
layout: LayoutPropType,
+ isExporting: PropTypes.bool,
};
static contextType = MatrixClientContext;
@@ -67,6 +68,9 @@ export default class ReplyThread extends React.Component {
};
this.unmounted = false;
+
+ if (this.props.isExporting) return;
+
this.context.on("Event.replaced", this.onEventReplaced);
this.room = this.context.getRoom(this.props.parentEv.getRoomId());
this.room.on("Room.redaction", this.onRoomRedaction);
@@ -212,12 +216,13 @@ export default class ReplyThread extends React.Component {
};
}
- static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, layout) {
+ static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, layout, isExporting) {
if (!ReplyThread.getParentEventId(parentEv)) {
return <div className="mx_ReplyThread_wrapper_empty" />;
}
return <ReplyThread
parentEv={parentEv}
+ isExporting={isExporting}
onHeightChanged={onHeightChanged}
ref={ref}
permalinkCreator={permalinkCreator}
@@ -366,6 +371,11 @@ export default class ReplyThread extends React.Component {
})
}
</blockquote>;
+ } else if (this.props.isExporting) {
+ const eventId = ReplyThread.getParentEventId(this.props.parentEv);
+ header = <p style={{ marginTop: -5, marginBottom: 5 }}>
+ In reply to <a className="mx_reply_anchor" scroll-to={`${eventId}`}>this message</a>
+ </p>;
} else if (this.state.loading) {
const Spinner = sdk.getComponent("elements.Spinner");
header = <Spinner w={16} h={16} />;
diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.js
index 82ce8dc4ae..2aba0eaef8 100644
--- a/src/components/views/messages/DateSeparator.js
+++ b/src/components/views/messages/DateSeparator.js
@@ -37,10 +37,15 @@ function getdaysArray() {
export default class DateSeparator extends React.Component {
static propTypes = {
ts: PropTypes.number.isRequired,
+ isExporting: PropTypes.bool,
};
getLabel() {
const date = new Date(this.props.ts);
+
+ // During the time the archive is being viewed, a specific day might not make sense, so we return the full date
+ if (this.props.isExporting) return formatFullDateNoTime(date);
+
const today = new Date();
const yesterday = new Date();
const days = getdaysArray();
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 19c5a7acaa..ff10b3255a 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -249,6 +249,8 @@ interface IProps {
// for now.
tileShape?: 'notif' | 'file_grid' | 'reply' | 'reply_preview';
+ isExporting?: boolean;
+
// show twelve hour timestamps
isTwelveHour?: boolean;
@@ -405,6 +407,8 @@ export default class EventTile extends React.Component<IProps, IState> {
// TODO: [REACT-WARNING] Move into constructor
// eslint-disable-next-line camelcase
UNSAFE_componentWillMount() {
+ // Context isn't propagated through renderToStaticMarkup so we'll have to explicitly set it during export
+ if (this.props.isExporting) this.context = MatrixClientPeg.get();
this.verifyEvent(this.props.mxEvent);
}
@@ -607,6 +611,7 @@ export default class EventTile extends React.Component<IProps, IState> {
}
shouldHighlight() {
+ if (this.props.isExporting) return false;
const actions = this.context.getPushActionsForEvent(this.props.mxEvent.replacingEvent() || this.props.mxEvent);
if (!actions || !actions.tweaks) { return false; }
@@ -951,7 +956,8 @@ export default class EventTile extends React.Component<IProps, IState> {
}
const MessageActionBar = sdk.getComponent('messages.MessageActionBar');
- const actionBar = !isEditing ? <MessageActionBar
+ const showMessageActionBar = !isEditing && !this.props.isExporting;
+ const actionBar = showMessageActionBar ? <MessageActionBar
mxEvent={this.props.mxEvent}
reactions={this.state.reactions}
permalinkCreator={this.props.permalinkCreator}
@@ -1127,6 +1133,7 @@ export default class EventTile extends React.Component<IProps, IState> {
this.props.permalinkCreator,
this.replyThread,
this.props.layout,
+ this.props.isExporting,
);
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
@@ -1169,11 +1176,11 @@ export default class EventTile extends React.Component<IProps, IState> {
// XXX this'll eventually be dynamic based on the fields once we have extensible event types
const messageTypes = ['m.room.message', 'm.sticker'];
-function isMessageEvent(ev) {
+function isMessageEvent(ev: MatrixEvent): boolean {
return (messageTypes.includes(ev.getType()));
}
-export function haveTileForEvent(e) {
+export function haveTileForEvent(e: MatrixEvent): boolean {
// Only messages have a tile (black-rectangle) if redacted
if (e.isRedacted() && !isMessageEvent(e)) return false;
@@ -1244,11 +1251,11 @@ class E2ePadlock extends React.Component<IE2ePadlockProps, IE2ePadlockState> {
}
onHoverStart = () => {
- this.setState({hover: true});
+ this.setState({ hover: true });
};
onHoverEnd = () => {
- this.setState({hover: false});
+ this.setState({ hover: false });
};
render() {
@@ -1286,11 +1293,11 @@ class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptSta
}
onHoverStart = () => {
- this.setState({hover: true});
+ this.setState({ hover: true });
};
onHoverEnd = () => {
- this.setState({hover: false});
+ this.setState({ hover: false });
};
render() {
diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts
deleted file mode 100644
index aaa6d5fadb..0000000000
--- a/src/utils/exportUtils/HtmlExport.ts
+++ /dev/null
@@ -1,639 +0,0 @@
-import streamSaver from "streamsaver";
-import JSZip from "jszip";
-import { decryptFile } from "../DecryptFile";
-import { mediaFromContent, mediaFromMxc } from "../../customisations/Media";
-import { textForEvent } from "../../TextForEvent";
-import { Room } from "matrix-js-sdk/src/models/room";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { getUserNameColorClass } from "../FormattingUtils";
-import { Exporter } from "./Exporter";
-import * as ponyfill from "web-streams-polyfill/ponyfill"
-import { sanitizeHtmlParams } from "../../HtmlUtils";
-import sanitizeHtml from "sanitize-html";
-
-const css = `
-body {
- margin: 0;
- font: 12px/18px 'Inter', 'Open Sans',"Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Verdana,sans-serif;
-}
-
-.mx_clearfix:after {
- content: " ";
- visibility: hidden;
- display: block;
- height: 0;
- clear: both;
-}
-
-.mx_pull_left {
- float: left;
-}
-
-.mx_pull_right {
- float: right;
-}
-
-.mx_page_wrap {
- background-color: #ffffff;
- color: #000000;
-}
-
-.mx_page_wrap a {
- color: #238CF5;
- text-decoration: none;
- cursor: pointer;
-}
-
-.mx_page_wrap a:hover {
- text-decoration: underline;
-}
-
-.mx_page_header {
- position: fixed;
- z-index: 10;
- background-color: #ffffff;
- width: 100%;
- border-bottom: 1px solid #e3e6e8;
-}
-
-.mx_page_header .mx_content {
- width: 480px;
- margin: 0 auto;
- border-radius: 0 !important;
-}
-
-.mx_page_header a.mx_content {
- background-repeat: no-repeat;
- background-position: 24px 21px;
- background-size: 24px 24px;
-}
-
-.mx_bold {
- color: #212121;
- font-weight: 700;
-}
-
-.mx_details {
- color: #70777b;
-}
-
-.mx_page_header .mx_content .mx_text {
- padding: 24px 24px 22px 24px;
- font-size: 22px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- text-align: center;
-}
-
-.mx_page_header a.mx_content .mx_text {
- padding: 24px 24px 22px 82px;
-}
-
-.mx_page_body {
- padding-top: 64px;
- width: 700px;
- margin: 0 auto;
-}
-
-.mx_userpic {
- display: block;
- border-radius: 50%;
- overflow: hidden;
-}
-
-.mx_userpic .mx_initials {
- display: block;
- color: #fff;
- text-align: center;
- text-transform: uppercase;
- user-select: none;
-}
-
-a.mx_block_link {
- display: block;
- text-decoration: none !important;
- border-radius: 4px;
-}
-
-a.mx_block_link:hover {
- text-decoration: none !important;
- background-color: #f5f7f8;
-}
-
-.mx_history {
- padding: 16px 0;
-}
-
-.mx_message {
- margin: 0 -10px;
- transition: background-color 1.3s ease;
-}
-
-div.mx_selected {
- background-color: #eeeeee;
- transition: background-color 0.5s ease;
-}
-
-.mx_service {
- padding: 10px 24px;
-}
-
-.mx_service .mx_body {
- text-align: center;
-}
-
-.mx_message .mx_userpic .mx_initials {
- font-size: 16px;
-}
-
-.mx_default {
- padding: 10px;
-}
-
-.mx_default.mx_joined {
- margin-top: -10px;
-}
-
-.mx_default .mx_from_name {
- font-weight: 700;
- padding-bottom: 5px;
-}
-
-.mx_default .mx_body {
- margin-left: 60px;
-}
-
-.mx_default .mx_text {
- word-wrap: break-word;
- line-height: 150%;
-}
-
-.mx_default .mx_reply_to,
-.mx_default .mx_media_wrap {
- padding-bottom: 5px;
-}
-
-.mx_default .mx_media {
- margin: 0 -10px;
- padding: 5px 10px;
-}
-
-.mx_default .mx_media .mx_fill,
-.mx_default .mx_media .mx_thumb {
- width: 48px;
- height: 48px;
- border-radius: 50%;
-}
-
-.mx_default .mx_media .mx_fill {
- background-repeat: no-repeat;
- background-position: 12px 12px;
- background-size: 24px 24px;
-}
-
-.mx_default .mx_media .mx_title {
- padding-top: 4px;
- font-size: 14px;
-}
-
-.mx_default .mx_media .mx_description {
- color: #000000;
- padding-top: 4px;
- font-size: 13px;
-}
-
-.mx_default .mx_media .mx_status {
- padding-top: 4px;
- font-size: 13px;
-}
-
-.mx_default .mx_photo {
- display: block;
-}
-
-.mx_from_name.mx_Username_color1{
- color: #368bd6;
-}
-
-.mx_initials_wrap.mx_Username_color1{
- background-color: #368bd6;
-}
-
-.mx_from_name.mx_Username_color2{
- color: #ac3ba8;
-}
-
-.mx_initials_wrap.mx_Username_color2{
- background-color: #ac3ba8;
-}
-
-.mx_from_name.mx_Username_color3{
- color: #03b381;
-}
-
-.mx_initials_wrap.mx_Username_color3{
- background-color: #03b381;
-}
-
-.mx_from_name.mx_Username_color4{
- color: #e64f7a;
-}
-
-.mx_initials_wrap.mx_Username_color4{
- background-color: #e64f7a;
-}
-
-.mx_from_name.mx_Username_color5{
- color: #ff812d;
-}
-
-.mx_initials_wrap.mx_Username_color5{
- background-color: #ff812d;
-}
-
-.mx_from_name.mx_Username_color6{
- color: #2dc2c5;
-}
-
-.mx_initials_wrap.mx_Username_color6{
- background-color: #2dc2c5;
-}
-
-.mx_from_name.mx_Username_color7{
- color: #5c56f5;
-}
-
-.mx_initials_wrap.mx_Username_color7{
- background-color: #5c56f5;
-}
-
-.mx_from_name.mx_Username_color8{
- color: #74d12c;
-}
-
-.mx_initials_wrap.mx_Username_color8{
- background-color: #74d12c;
-}
-
-#snackbar {
- display: flex;
- visibility: hidden;
- min-width: 250px;
- margin-left: -125px;
- background-color: #333;
- color: #fff;
- text-align: center;
- position: fixed;
- z-index: 1;
- left: 50%;
- bottom: 30px;
- font-size: 17px;
- padding: 6px 16px;
- font-size: 0.875rem;
- font-family: "Roboto", "Helvetica", "Arial", sans-serif;
- font-weight: 400;
- line-height: 1.43;
- border-radius: 4px;
- letter-spacing: 0.01071em;
-}
-
-#snackbar.show {
- visibility: visible;
- -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
- animation: fadein 0.5s, fadeout 0.5s 2.5s;
-}
-
-@-webkit-keyframes fadein {
- from {bottom: 0; opacity: 0;}
- to {bottom: 30px; opacity: 1;}
-}
-
-@keyframes fadein {
- from {bottom: 0; opacity: 0;}
- to {bottom: 30px; opacity: 1;}
-}
-
-@-webkit-keyframes fadeout {
- from {bottom: 30px; opacity: 1;}
- to {bottom: 0; opacity: 0;}
-}
-
-@keyframes fadeout {
- from {bottom: 30px; opacity: 1;}
- to {bottom: 0; opacity: 0;}
-}
-`;
-
-const js = `
-function scrollToElement(replyId){
- let el = document.getElementById(replyId);
- if(!el) {
- showToast("The message you're looking for wasn't exported");
- return;
- };
- el.scrollIntoView({ behavior: 'smooth', block: 'center' });
- el.classList.add("mx_selected");
- setTimeout(() => {
- el.classList.remove("mx_selected");
- }, 1000);
-}
-
-function showToast(text) {
- let el = document.getElementById("snackbar");
- el.innerHTML = text;
- el.className = "show";
- setTimeout(() => {
- el.className = el.className.replace("show", "");
- }, 2000);
-}
-`
-
-export default class HTMLExporter extends Exporter {
- protected zip: JSZip;
- protected avatars: Map<string, boolean>;
-
- constructor(res: MatrixEvent[], room: Room) {
- super(res, room);
- this.zip = new JSZip();
- this.avatars = new Map<string, boolean>();
- }
-
- protected wrapHTML(content: string, room: Room) {
- return `
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Exported Data</title>
- <meta content="width=device-width, initial-scale=1.0" name="viewport" />
- <link href="css/style.css" rel="stylesheet" />
- <script src="js/script.js"></script>
- </head>
- <body>
- <div class="mx_page_wrap">
- <div class="mx_page_header">
- <div class="mx_content">
- <div class="mx_text mx_bold">${room.name}</div>
- </div>
- </div>
- <div class="mx_page_body mx_chat_page">
- <div class="mx_history">
- ${content}
- </div>
- </div>
- </div>
- <div id="snackbar"/>
- </body>
- </html>
- `
- }
-
- protected isEdit(event: MatrixEvent) {
- if (event.getType() === "m.room.message" && event.getContent().hasOwnProperty("m.new_content")) return true;
- return false;
- }
-
- protected async getUserAvatar(event: MatrixEvent) {
- const member = event.sender;
- if (!member.getMxcAvatarUrl()) {
- return `
- <div class="mx_pull_left mx_userpic_wrap">
- <div
- class="mx_userpic mx_initials_wrap ${getUserNameColorClass(event.getSender())}"
- style="width: 42px;height: 42px;"
- >
- <div class="mx_initials" style="line-height: 42px;" src="users/${member.userId}">
- ${event.sender.name[0]}
- </div>
- </div>
- </div>
- `;
- } else {
- const imageUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(42, 42, "crop");
-
- if (!this.avatars.has(member.userId)) {
- this.avatars.set(member.userId, true);
- const image = await fetch(imageUrl);
- const blob = await image.blob();
- this.zip.file(`users/${member.userId}`, blob);
- }
-
- return `
- <div class="mx_pull_left mx_userpic_wrap">
- <div class="mx_userpic" style="width: 42px; height: 42px;">
- <img
- class="mx_initials"
- style="width: 42px;height: 42px;line-height:42px;"
- src="users/${member.userId}"
- />
- </div>
- </div>
- `;
- }
- }
-
- protected async getMediaBlob(event: MatrixEvent) {
- let blob: Blob;
- try {
- const isEncrypted = event.isEncrypted();
- const content = event.getContent();
- if (isEncrypted) {
- blob = await decryptFile(content.file);
- } else {
- const media = mediaFromContent(event.getContent());
- const image = await fetch(media.srcHttp);
- blob = await image.blob();
- }
- } catch (err) {
- console.log("Error decrypting media");
- }
- return blob;
- }
-
- //Gets the event_id of an event to which an event is replied
- protected getBaseEventId = (event: MatrixEvent) => {
- const isEncrypted = event.isEncrypted();
-
- // If encrypted, in_reply_to lies in event.event.content
- const content = isEncrypted ? event.event.content : event.getContent();
- const relatesTo = content["m.relates_to"];
- return (relatesTo && relatesTo["m.in_reply_to"]) ? relatesTo["m.in_reply_to"]["event_id"] : null;
- };
-
- protected dateSeparator(event: MatrixEvent, prevEvent: MatrixEvent) {
- const prevDate = prevEvent ? new Date(prevEvent.getTs()) : null;
- const currDate = new Date(event.getTs());
- if (!prevDate || currDate.setHours(0, 0, 0, 0) !== prevDate.setHours(0, 0, 0, 0)) {
- return `
- <div class="mx_message mx_service">
- <div class="mx_body mx_details">
- ${new Date(event.getTs())
- .toLocaleString("en-us", {year: "numeric", month: "long", day: "numeric" })}
- </div>
- </div>
- `;
- }
- return "";
- }
-
- protected async createMessageBody(event: MatrixEvent, joined = false, isReply = false, replyId = null) {
- const userPic = await this.getUserAvatar(event);
- let messageBody = "";
- switch (event.getContent().msgtype) {
- case "m.text":
- messageBody = `
- <div class="mx_text">
- ${sanitizeHtml(event.getContent().body, sanitizeHtmlParams)}
- </div>`;
- break;
- case "m.emote":
- messageBody = `
- <div class="mx_text">
- * ${event.sender ? event.sender.name : event.getSender()}
- ${sanitizeHtml(event.getContent().body, sanitizeHtmlParams)}
- </div>`;
- break;
- case "m.image": {
- const blob = await this.getMediaBlob(event);
- const fileName = `${event.getId()}.${blob.type.replace("image/", "")}`;
- messageBody = `
- <a class="mx_photo_wrap mx_clearfix mx_pull_left" href="images/${event.getId()}.png">
- <img
- class="mx_photo"
- style="max-width: 600px; max-height: 500px;"
- src="images/${fileName}"
- />
- </a>`;
- this.zip.file(`images/${fileName}`, blob);
- break;
- }
- case "m.video": {
- const blob = await this.getMediaBlob(event);
- const fileName = `${event.getId()}.${blob.type.replace("video/", "")}`;
- messageBody = `
- <div class="mx_media_wrap mx_clearfix">
- <video
- class="mx_video_file"
- src="videos/${fileName}"
- style="max-height: 400px; max-width: 600px;"
- controls
- />
- </div>`;
- this.zip.file(`videos/${fileName}`, blob);
- break;
- }
- case "m.audio": {
- const blob = await this.getMediaBlob(event);
- const fileName = `${event.getId()}.${blob.type.replace("audio/", "")}`;
- messageBody = `
- <div class="mx_media_wrap mx_clearfix">
- <audio
- class="mx_audio_file"
- src="audio/${fileName}"
- controls
- />
- </div>`;
- this.zip.file(`audio/${fileName}`, blob);
- break;
- }
- default:
- break;
- }
-
- if (isReply) {
- messageBody = event.getContent().formatted_body.replace(/<mx-reply>.*<\/mx-reply>/, '')
- }
-
- return `
- <div class="mx_message mx_default mx_clearfix ${joined ? `mx_joined` : ``}" id="${event.getId()}">
- ${!joined ? userPic : ``}
- <div class="mx_body">
- <div class="mx_pull_right mx_date mx_details" title="${new Date(event.getTs())}">
- ${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}
- </div>
- ${!joined ? `
- <div class="mx_from_name ${getUserNameColorClass(event.getSender())}">
- ${event.sender.name}
- </div>`: ``}
- ${isReply ?
- ` <div class="mx_reply_to mx_details">
- In reply to <a onclick="scrollToElement('${replyId}')">this message</a>
- </div>`: ``}
- ${messageBody}
- </div>
- </div>
- `;
- }
-
- protected async createHTML(events: MatrixEvent[], room: Room) {
- let content = "";
- let prevEvent = null;
- for (const event of events) {
- // As the getContent of the edited event fetches the latest edit, there is no need to process edit events
- if (this.isEdit(event)) continue;
- content += this.dateSeparator(event, prevEvent);
-
- if (event.getType() === "m.room.message") {
- const replyTo = this.getBaseEventId(event);
- const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
- && event.sender.userId === prevEvent.sender.userId && !this.dateSeparator(event, prevEvent) && !replyTo;
-
- const body = await this.createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
- content += body;
- } else {
- const eventText = textForEvent(event);
- content += eventText ? `
- <div class="mx_message mx_service" id="${event.getId()}">
- <div class="mx_body mx_details">
- ${textForEvent(event)}
- </div>
- </div>
- ` : "";
- }
- prevEvent = event;
- }
- return this.wrapHTML(content, room);
- }
-
- public async export() {
- const html = await this.createHTML(this.res, this.room);
-
- this.zip.file("index.html", html);
- this.zip.file("css/style.css", css);
- this.zip.file("js/script.js", js);
- const filename = `matrix-export-${new Date().toISOString()}.zip`;
-
- //Generate the zip file asynchronously
- const blob = await this.zip.generateAsync({ type: "blob" });
-
- //Support for firefox browser
- streamSaver.WritableStream = ponyfill.WritableStream
- //Create a writable stream to the directory
- const fileStream = streamSaver.createWriteStream(filename, { size: blob.size });
- const writer = fileStream.getWriter();
-
- // Here we chunk the blob into pieces of 10 MB, the size might be dynamically generated.
- // This can be used to keep track of the progress
- const sliceSize = 10 * 1e6;
- for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {
- const blobPiece = blob.slice(fPointer, fPointer + sliceSize);
- const reader = new FileReader();
-
- const waiter = new Promise<void>((resolve, reject) => {
- reader.onloadend = evt => {
- const arrayBufferNew: any = evt.target.result;
- const uint8ArrayNew = new Uint8Array(arrayBufferNew);
- writer.write(uint8ArrayNew);
- resolve();
- };
- reader.readAsArrayBuffer(blobPiece);
- });
- await waiter;
- }
- writer.close();
-
- return blob;
- }
-}
-
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
new file mode 100644
index 0000000000..22cf04669b
--- /dev/null
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -0,0 +1,242 @@
+import React from "react"
+import streamSaver from "streamsaver";
+import JSZip from "jszip";
+import { decryptFile } from "../DecryptFile";
+import { mediaFromContent } from "../../customisations/Media";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Exporter } from "./Exporter";
+import * as ponyfill from "web-streams-polyfill/ponyfill"
+import { renderToStaticMarkup } from 'react-dom/server'
+import { Layout } from "../../settings/Layout";
+import { shouldFormContinuation } from "../../components/structures/MessagePanel";
+import { wantsDateSeparator } from "../../DateUtils";
+import { RoomPermalinkCreator } from "../permalinks/Permalinks";
+import EventTile, { haveTileForEvent } from "../../components/views/rooms/EventTile";
+import DateSeparator from "../../components/views/messages/DateSeparator";
+import exportCSS from "./exportCSS";
+import exportJS from "./exportJS";
+
+export default class HTMLExporter extends Exporter {
+ protected zip: JSZip;
+ protected avatars: Map<string, boolean>;
+
+ constructor(res: MatrixEvent[], room: Room) {
+ super(res, room);
+ this.zip = new JSZip();
+ this.avatars = new Map<string, boolean>();
+ }
+
+ protected wrapHTML(content: string, room: Room) {
+ return `
+ <!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <link href="css/style.css" rel="stylesheet" />
+ <script src="js/script.js"></script>
+ <title>Exported Data</title>
+ </head>
+ <body style="height: 100vh;">
+ <section
+ id="matrixchat"
+ style="height: 100%; overflow: auto"
+ class="notranslate"
+ >
+ <div class="mx_MatrixChat_wrapper" aria-hidden="false">
+ <div class="mx_MatrixChat">
+ <main class="mx_RoomView">
+ <div class="mx_RoomHeader light-panel">
+ <div class="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
+ <div class="mx_RoomHeader_avatar">
+ <div class="mx_DecoratedRoomAvatar">
+ <span class="mx_BaseAvatar" role="presentation"
+ ><span
+ class="mx_BaseAvatar_initial"
+ aria-hidden="true"
+ style="
+ font-size: 20.8px;
+ width: 32px;
+ line-height: 32px;
+ "
+ >G</span
+ ><img
+ class="mx_BaseAvatar_image"
+ alt=""
+ aria-hidden="true"
+ style="width: 32px; height: 32px"
+ /></span>
+ </div>
+ </div>
+ <div class="mx_RoomHeader_name">
+ <div
+ dir="auto"
+ class="mx_RoomHeader_nametext"
+ title="${room.name}"
+ >
+ ${room.name}
+ </div>
+ </div>
+ <div class="mx_RoomHeader_topic" dir="auto"></div>
+ </div>
+ </div>
+ <div class="mx_MainSplit">
+ <div class="mx_RoomView_body">
+ <div
+ class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
+ >
+ <div
+ class="
+ mx_AutoHideScrollbar
+ mx_ScrollPanel
+ mx_RoomView_messagePanel
+ mx_GroupLayout
+ "
+ >
+ <div class="mx_RoomView_messageListWrapper">
+ <ol
+ class="mx_RoomView_MessageList"
+ aria-live="polite"
+ role="list"
+ >
+ ${content}
+ </ol>
+ </div>
+ </div>
+ </div>
+ <div class="mx_RoomView_statusArea">
+ <div class="mx_RoomView_statusAreaBox">
+ <div class="mx_RoomView_statusAreaBox_line"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+ </div>
+ </div>
+ </section>
+ <div id="snackbar"/>
+ </body>
+ </html>`
+ }
+
+ // will be used in the future
+ protected async getMediaBlob(event: MatrixEvent) {
+ let blob: Blob;
+ try {
+ const isEncrypted = event.isEncrypted();
+ const content = event.getContent();
+ if (isEncrypted) {
+ blob = await decryptFile(content.file);
+ } else {
+ const media = mediaFromContent(event.getContent());
+ const image = await fetch(media.srcHttp);
+ blob = await image.blob();
+ }
+ } catch (err) {
+ console.log("Error decrypting media");
+ }
+ return blob;
+ }
+
+ protected getDateSeparator(event: MatrixEvent) {
+ const ts = event.getTs();
+ const dateSeparator = <li key={ts}><DateSeparator isExporting={true} key={ts} ts={ts} /></li>;
+ return renderToStaticMarkup(dateSeparator);
+ }
+
+ protected _wantsDateSeparator(event: MatrixEvent, prevEvent: MatrixEvent) {
+ if (prevEvent == null) return true;
+ return wantsDateSeparator(prevEvent.getDate(), event.getDate());
+ }
+
+ protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
+ const eventTile = <li id={mxEv.getId()}>
+ <EventTile
+ mxEvent={mxEv}
+ continuation={joined}
+ isRedacted={mxEv.isRedacted()}
+ replacingEventId={mxEv.replacingEventId()}
+ isExporting={true}
+ readReceipts={null}
+ readReceiptMap={null}
+ showUrlPreview={false}
+ checkUnmounting={() => false}
+ isTwelveHour={false}
+ last={false}
+ lastInSection={false}
+ permalinkCreator={new RoomPermalinkCreator(this.room)}
+ lastSuccessful={false}
+ isSelectedEvent={false}
+ getRelationsForEvent={null}
+ showReactions={false}
+ layout={Layout.Group}
+ enableFlair={false}
+ showReadReceipts={false}
+ />
+ </li>
+ return renderToStaticMarkup(eventTile);
+ }
+
+ protected async createHTML(events: MatrixEvent[], room: Room) {
+ let content = "";
+ let prevEvent = null;
+ for (const event of events) {
+ if (!haveTileForEvent(event)) continue;
+
+ content += this._wantsDateSeparator(event, prevEvent) ? this.getDateSeparator(event) : "";
+
+ if (event.getType() === "m.room.message") {
+ const shouldBeJoined = !this._wantsDateSeparator(event, prevEvent)
+ && shouldFormContinuation(prevEvent, event);
+ const body = await this.createMessageBody(event, shouldBeJoined);
+ content += body;
+ }
+ prevEvent = event;
+ }
+ return this.wrapHTML(content, room);
+ }
+
+ public async export() {
+ const html = await this.createHTML(this.res, this.room);
+ this.zip.file("index.html", html);
+ this.zip.file("css/style.css", exportCSS);
+ this.zip.file("js/script.js", exportJS);
+
+ const filename = `matrix-export-${new Date().toISOString()}.zip`;
+
+ //Generate the zip file asynchronously
+ const blob = await this.zip.generateAsync({ type: "blob" });
+
+ //Support for firefox browser
+ streamSaver.WritableStream = ponyfill.WritableStream
+ //Create a writable stream to the directory
+ const fileStream = streamSaver.createWriteStream(filename, { size: blob.size });
+ const writer = fileStream.getWriter();
+
+ // Here we chunk the blob into pieces of 10 MB, the size might be dynamically generated.
+ // This can be used to keep track of the progress
+ const sliceSize = 10 * 1e6;
+ for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {
+ const blobPiece = blob.slice(fPointer, fPointer + sliceSize);
+ const reader = new FileReader();
+
+ const waiter = new Promise<void>((resolve, reject) => {
+ reader.onloadend = evt => {
+ const arrayBufferNew: any = evt.target.result;
+ const uint8ArrayNew = new Uint8Array(arrayBufferNew);
+ writer.write(uint8ArrayNew);
+ resolve();
+ };
+ reader.readAsArrayBuffer(blobPiece);
+ });
+ await waiter;
+ }
+ writer.close();
+
+ return blob;
+ }
+}
+
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
new file mode 100644
index 0000000000..5a63802097
--- /dev/null
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -0,0 +1,62 @@
+/* eslint-disable max-len */
+const lightCSS = `
+@charset "utf-8";@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Regular.4232a67.woff2) format("woff2"),url(../../fonts/Inter/Inter-Regular.3a1908c.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:400;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Italic.b791861.woff2) format("woff2"),url(../../fonts/Inter/Inter-Italic.b13e6fe.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Medium.027d14e.woff2) format("woff2"),url(../../fonts/Inter/Inter-Medium.d1f6b6e.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:500;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-MediumItalic.8154ac2.woff2) format("woff2"),url(../../fonts/Inter/Inter-MediumItalic.1912849.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-SemiBold.0802d48.woff2) format("woff2"),url(../../fonts/Inter/Inter-SemiBold.8357f92.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:600;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-SemiBoldItalic.10a60d8.woff2) format("woff2"),url(../../fonts/Inter/Inter-SemiBoldItalic.1c70752.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Bold.fc28dff.woff2) format("woff2"),url(../../fonts/Inter/Inter-Bold.025b6f2.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:700;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-BoldItalic.2129bd0.woff2) format("woff2"),url(../../fonts/Inter/Inter-BoldItalic.80f8542.woff) format("woff")}@font-face{font-family:Inconsolata;font-style:normal;font-weight:400;src:local("Inconsolata Regular"),local("Inconsolata-Regular"),url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.2aafaa1.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Inconsolata;font-style:normal;font-weight:400;font-display:swap;src:local("Inconsolata Regular"),local("Inconsolata-Regular"),url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.5476fd3.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Inconsolata;font-style:normal;font-weight:700;font-display:swap;src:local("Inconsolata Bold"),local("Inconsolata-Bold"),url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.6bc411a.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Inconsolata;font-style:normal;font-weight:700;font-display:swap;src:local("Inconsolata Bold"),local("Inconsolata-Bold"),url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.000abc6.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.hljs-addition{background:#dfd}.hljs-deletion{background:#fdd}@supports ((-webkit-backdrop-filter:none) or (backdrop-filter:none)){.mx_LeftPanel{background-image:unset;background-image:var(--avatar-url,unset);background-repeat:no-repeat;background-size:cover;background-position:0 0}.mx_GroupFilterPanel,.mx_SpacePanel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.mx_LeftPanel .mx_LeftPanel_roomListContainer{-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}}.mx_RoomSublist_showNButton{background-color:transparent!important}a:hover,a:link,a:visited{text-decoration:none}:root{font-size:10px;--transition-short:.1s;--transition-standard:.3s}@media (prefers-reduced-motion){:root{--transition-short:0;--transition-standard:0}}html{height:100%;overflow:hidden}body{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.5rem;background-color:#fff;color:#2e2f32;border:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code,pre{font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji;font-size:100%!important}.error,.text-error,.text-warning,.warning{color:#ff4b55}.text-success{color:#0dbd8b}.text-muted{color:#61708b}b{font-weight:700}h2{color:#2e2f32;font-weight:400;font-size:1.8rem;margin-top:16px;margin-bottom:16px}a:hover,a:link,a:visited{color:#238cf5}input[type=password],input[type=search],input[type=text]{padding:9px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;font-weight:600;min-width:0}input[type=search].mx_textinput_icon,input[type=text].mx_textinput_icon{padding-left:36px;background-repeat:no-repeat;background-position:10px}input[type=search].mx_textinput_icon.mx_textinput_search,input[type=text].mx_textinput_icon.mx_textinput_search{background-image:url(../../img/feather-customised/search-input.044bfa7.svg)}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{opacity:1}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1}input::-ms-input-placeholder,textarea::-ms-input-placeholder{opacity:1}input::placeholder,textarea::placeholder{opacity:1}input[type=password],input[type=text],textarea{background-color:transparent;color:#2e2f32}textarea{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;color:#2e2f32}input[type=password]:focus,input[type=text]:focus,textarea:focus{outline:none;-webkit-box-shadow:none;box-shadow:none}:focus:not(.focus-visible){outline:none}.mx_Dialog .mx_textinput>input[type=search],.mx_Dialog .mx_textinput>input[type=text],.mx_MatrixChat .mx_textinput>input[type=search],.mx_MatrixChat .mx_textinput>input[type=text]{border:none;-webkit-box-flex:1;-ms-flex:1;flex:1;color:#2e2f32}.mx_Dialog .mx_textinput,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text],.mx_MatrixChat .mx_textinput,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent;color:#9fa9ba;border-radius:4px;border:1px solid rgba(46,47,50,.1);margin:9px}.mx_Dialog .mx_textinput,.mx_MatrixChat .mx_textinput{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Dialog .mx_textinput input::-webkit-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-webkit-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-webkit-input-placeholder,.mx_MatrixChat .mx_textinput input::-webkit-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-webkit-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-webkit-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::-moz-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-moz-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-moz-placeholder,.mx_MatrixChat .mx_textinput input::-moz-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-moz-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-moz-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input:-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]:-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]:-ms-input-placeholder,.mx_MatrixChat .mx_textinput input:-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]:-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]:-ms-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-ms-input-placeholder,.mx_MatrixChat .mx_textinput input::-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-ms-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::placeholder,.mx_MatrixChat .mx_textinput input::placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::placeholder{color:rgba(159,169,186,.75)}.dark-panel{background-color:#f2f5f8}.dark-panel .mx_textinput,.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{color:#9fa9ba;background-color:#fff;border:none}.light-panel .mx_textinput,.light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{color:#9fa9ba;background-color:#f2f5f8;border:none}::-moz-focus-inner{border:0}#mx_theme_accentColor{color:#0dbd8b}#mx_theme_secondaryAccentColor{color:#f2f5f8}#mx_theme_tertiaryAccentColor{color:#d3efe1}.mx_Dialog_wrapper{position:fixed;z-index:4000;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_Dialog{background-color:#fff;color:#747474;z-index:4012;font-weight:300;font-size:1.5rem;position:relative;padding:24px;max-height:80%;-webkit-box-shadow:2px 15px 30px 0 rgba(0,0,0,.48);box-shadow:2px 15px 30px 0 rgba(0,0,0,.48);border-radius:8px;overflow-y:auto}.mx_Dialog_fixedWidth{width:60vw;max-width:704px}.mx_Dialog_staticWrapper .mx_Dialog{z-index:4010}.mx_Dialog_background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(46,48,51,.38);opacity:.8;z-index:4011}.mx_Dialog_background.mx_Dialog_staticBackground{z-index:4009}.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background{opacity:.4}.mx_Dialog_lightbox .mx_Dialog_background{opacity:.95;background-color:#000}.mx_Dialog_lightbox .mx_Dialog{border-radius:0;background-color:transparent;width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:none;padding:0}.mx_Dialog_header{position:relative;margin-bottom:10px}.mx_Dialog_titleImage{vertical-align:sub;width:25px;height:25px;margin-left:-2px;margin-right:4px}.mx_Dialog_title{font-size:2.2rem;font-weight:600;line-height:3.6rem;color:#45474a}.mx_Dialog_header.mx_Dialog_headerWithButton>.mx_Dialog_title{text-align:center}.mx_Dialog_header.mx_Dialog_headerWithCancel>.mx_Dialog_title{margin-right:20px}.mx_Dialog_title.danger{color:#ff4b55}.mx_Dialog_cancelButton{-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#c1c1c1;cursor:pointer;position:absolute;top:10px;right:0}.mx_Dialog_content{margin:24px 0 68px;font-size:1.4rem;color:#2e2f32;word-wrap:break-word}.mx_Dialog_buttons{margin-top:20px;text-align:right}.mx_Dialog_buttons .mx_Dialog_buttons_additive{float:left}.mx_Dialog_buttons button,.mx_Dialog_buttons input[type=submit],.mx_Dialog button,.mx_Dialog input[type=submit]{vertical-align:middle;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;margin-left:0;margin-right:8px;font-weight:600;border:1px solid #0dbd8b;color:#0dbd8b;background-color:#fff;font-family:inherit}.mx_Dialog button:last-child{margin-right:0}.mx_Dialog_buttons button:focus,.mx_Dialog_buttons input[type=submit]:focus,.mx_Dialog button:focus,.mx_Dialog input[type=submit]:focus{-webkit-filter:brightness(105%);filter:brightness(105%)}.mx_Dialog_buttons button.mx_Dialog_primary,.mx_Dialog_buttons input[type=submit].mx_Dialog_primary,.mx_Dialog button.mx_Dialog_primary,.mx_Dialog input[type=submit].mx_Dialog_primary{color:#fff;background-color:#0dbd8b;min-width:156px}.mx_Dialog_buttons button.danger,.mx_Dialog_buttons input[type=submit].danger,.mx_Dialog button.danger,.mx_Dialog input[type=submit].danger{background-color:#ff4b55;border:1px solid #ff4b55;color:#fff}.mx_Dialog button.warning,.mx_Dialog input[type=submit].warning{border:1px solid #ff4b55;color:#ff4b55}.mx_Dialog_buttons button:disabled,.mx_Dialog_buttons input[type=submit]:disabled,.mx_Dialog button:disabled,.mx_Dialog input[type=submit]:disabled{background-color:#747474;border:1px solid #747474;opacity:.7}.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog{width:auto;border-radius:8px;padding:0;-webkit-box-shadow:none;box-shadow:none;overflow-x:hidden;overflow-y:hidden}.mx_GeneralButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;display:inline;margin:auto}.mx_linkButton{cursor:pointer;color:#0dbd8b}.mx_TextInputDialog_label{text-align:left;padding-bottom:12px}.mx_TextInputDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff}.mx_textButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;cursor:pointer;display:inline-block;outline:none;font-size:1.5rem;padding:0 1.5em}.mx_button_row{margin-top:69px}.mx_Username_color1{color:#368bd6}.mx_Username_color2{color:#ac3ba8}.mx_Username_color3{color:#0dbd8b}.mx_Username_color4{color:#e64f7a}.mx_Username_color5{color:#ff812d}.mx_Username_color6{color:#2dc2c5}.mx_Username_color7{color:#5c56f5}.mx_Username_color8{color:#74d12c}.mx_Tooltip_dark .mx_Tooltip_chevron:after{border-right-color:#27303a}html{scrollbar-color:rgba(0,0,0,.2) transparent}*{scrollbar-width:thin}::-webkit-scrollbar{width:6px;height:6px;background-color:transparent}::-webkit-scrollbar-thumb{border-radius:3px;background-color:rgba(0,0,0,.2)}.mx_AutoHideScrollbar:hover{scrollbar-color:rgba(0,0,0,.2) transparent}.mx_AutoHideScrollbar:hover::-webkit-scrollbar{background-color:transparent}.mx_AutoHideScrollbar:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2)}.mx_AutoHideScrollbar{overflow-x:hidden;overflow-y:auto;overflow-y:overlay;-ms-overflow-style:-ms-autohiding-scrollbar}.mx_AutoHideScrollbar::-webkit-scrollbar,.mx_AutoHideScrollbar::-webkit-scrollbar-thumb{background-color:transparent}.mx_AutoHideScrollbar{scrollbar-color:transparent transparent}.mx_CompatibilityPage{width:100%;height:100%;background-color:#e55}.mx_CompatibilityPage_box{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:500px;height:300px;border:1px solid;padding:10px;background-color:#fcc}.mx_ContextualMenu_wrapper{position:fixed;z-index:5000}.mx_ContextualMenu_background{position:fixed;top:0;left:0;width:100%;height:100%;opacity:1;z-index:5000}.mx_ContextualMenu{border-radius:8px;-webkit-box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);background-color:#fff;color:#2e2f32;position:absolute;font-size:1.4rem;z-index:5001}.mx_ContextualMenu_right{right:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_right{right:8px}.mx_ContextualMenu_chevron_right{position:absolute;right:-8px;top:0;width:0;height:0;border-top:8px solid transparent;border-left:8px solid #fff;border-bottom:8px solid transparent}.mx_ContextualMenu_left{left:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_left{left:8px}.mx_ContextualMenu_chevron_left{position:absolute;left:-8px;top:0;width:0;height:0;border-top:8px solid transparent;border-right:8px solid #fff;border-bottom:8px solid transparent}.mx_ContextualMenu_top{top:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_top{top:8px}.mx_ContextualMenu_chevron_top{position:absolute;left:0;top:-8px;width:0;height:0;border-left:8px solid transparent;border-bottom:8px solid #fff;border-right:8px solid transparent}.mx_ContextualMenu_bottom{bottom:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom{bottom:8px}.mx_ContextualMenu_chevron_bottom{position:absolute;left:0;bottom:-8px;width:0;height:0;border-left:8px solid transparent;border-top:8px solid #fff;border-right:8px solid transparent}.mx_ContextualMenu_spinner{display:block;margin:0 auto}.mx_CreateRoom{width:960px;margin-left:auto;margin-right:auto;color:#2e2f32}.mx_CreateRoom input,.mx_CreateRoom textarea{border-radius:3px;border:1px solid #c7c7c7;font-weight:300;font-size:1.3rem;padding:9px;margin-top:6px}.mx_CreateRoom_description{width:330px}.mx_CustomRoomTagPanel{background-color:hsla(0,0%,91%,.77);max-height:40vh}.mx_CustomRoomTagPanel_scroller{max-height:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CustomRoomTagPanel .mx_AccessibleButton{margin:0 auto;width:40px;padding:10px 0 9px;position:relative}.mx_CustomRoomTagPanel .mx_BaseAvatar_image{-webkit-box-sizing:border-box;box-sizing:border-box;width:40px;height:40px}.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected:before{content:"";height:56px;background-color:#238cf5;width:5px;position:absolute;left:-9px;border-radius:0 3px 3px 0;top:5px}.mx_FilePanel{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_FilePanel .mx_RoomView_messageListWrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_FilePanel .mx_RoomView_MessageList{width:100%}.mx_FilePanel .mx_EventTile_avatar,.mx_FilePanel .mx_RoomView_MessageList h2{display:none}.mx_FilePanel .mx_EventTile{word-break:break-word;margin-top:32px}.mx_FilePanel .mx_EventTile .mx_MImageBody{margin-right:0}.mx_FilePanel .mx_EventTile .mx_MFileBody{line-height:2.4rem}.mx_FilePanel .mx_EventTile .mx_MFileBody_download{padding-top:8px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.4rem;color:#acacac}.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;color:#747474}.mx_FilePanel .mx_EventTile .mx_MImageBody_size{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;font-size:1.4rem;text-align:right;white-space:nowrap}.mx_FilePanel .mx_EventTile_senderDetails{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:-2px}.mx_FilePanel .mx_EventTile_senderDetailsLink{text-decoration:none}.mx_FilePanel .mx_EventTile .mx_SenderProfile{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;line-height:normal;padding:0;font-size:1.4rem;opacity:1;color:#acacac}.mx_FilePanel .mx_EventTile .mx_MessageTimestamp{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;text-align:right;visibility:visible;position:static;font-size:1.4rem;opacity:1;color:#acacac}.mx_FilePanel .mx_EventTile_line{margin-right:0;padding-left:0}.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line{padding-left:0}.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line{background-color:#fff}.mx_FilePanel_empty:before{-webkit-mask-image:url(../../img/element-icons/room/files.5709c0c.svg);mask-image:url(../../img/element-icons/room/files.5709c0c.svg)}.mx_GenericErrorPage{width:100%;height:100%;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_GenericErrorPage_box{display:inline;width:500px;min-height:125px;border:1px solid #f22;padding:10px 10px 20px;background-color:#fcc}.mx_GroupFilterPanel{-webkit-box-flex:1;-ms-flex:1;flex:1;background-color:hsla(0,0%,91%,.77);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:0}.mx_GroupFilterPanel_items_selected{cursor:pointer}.mx_GroupFilterPanel .mx_GroupFilterPanel_divider{height:0;width:90%;border:none;border-bottom:1px solid #8d99a5}.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:100%}.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:6px}.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer>div{margin:6px 0}.mx_GroupFilterPanel .mx_TagTile{position:relative}.mx_GroupFilterPanel .mx_TagTile .mx_BetaDot{position:absolute;right:-13px;top:-11px}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype{padding:3px}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype{background-color:#fff;border-radius:6px}.mx_TagTile_selected_prototype .mx_TagTile_homeIcon:before{background-color:#2e2f32}.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon{background-color:rgba(92,100,112,.2);border-radius:48px}.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon:before{background-color:#5c6470}.mx_TagTile_homeIcon{width:32px;height:32px;position:relative}.mx_TagTile_homeIcon:before{-webkit-mask-image:url(../../img/element-icons/home.b706c0e.svg);mask-image:url(../../img/element-icons/home.b706c0e.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:21px;mask-size:21px;content:"";display:inline-block;width:32px;height:32px;position:absolute;top:calc(50% - 16px);left:calc(50% - 16px)}.mx_GroupFilterPanel .mx_TagTile_plus{margin-bottom:12px;height:32px;width:32px;border-radius:20px;background-color:rgba(92,100,112,.2);position:relative;display:block!important}.mx_GroupFilterPanel .mx_TagTile_plus:before{background-color:#5c6470;-webkit-mask-image:url(../../img/feather-customised/plus.38ae979.svg);mask-image:url(../../img/feather-customised/plus.38ae979.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected:before{content:"";height:100%;background-color:#0dbd8b;width:4px;position:absolute;left:-12px;border-radius:0 3px 3px 0}.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus{-webkit-filter:none;filter:none}.mx_TagTile_tooltip{position:relative;top:-30px;left:5px}.mx_TagTile_context_button{min-width:15px;height:15px;position:absolute;right:-5px;top:-8px;border-radius:8px;background-color:#dbdbdb;color:#000;font-weight:600;font-size:1rem;text-align:center;padding-top:1px;padding-left:4px;padding-right:4px}.mx_TagTile_avatar{position:relative}.mx_TagTile_badge{position:absolute;right:-4px;top:-2px;border-radius:8px;color:#fff;font-weight:600;font-size:1.4rem;padding:0 5px;background-color:#61708b}.mx_TagTile_badgeHighlight{background-color:#ff4b55}.mx_GroupView{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.mx_GroupView_error{margin:auto}.mx_GroupView_header{min-height:52px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:10px;padding-left:19px}.mx_GroupView_header_view{border-bottom:1px solid transparent;padding-bottom:0;padding-right:8px}.mx_GroupView_header_avatar,.mx_GroupView_header_info{display:table-cell;vertical-align:middle}.mx_GroupHeader_button{position:relative;margin-left:5px;margin-right:5px;cursor:pointer;height:20px;width:20px}.mx_GroupHeader_button:before{content:"";position:absolute;height:20px;width:20px;background-color:#91a1c0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_GroupHeader_editButton:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_GroupHeader_shareButton:before{-webkit-mask-image:url(../../img/element-icons/room/share.54dc3fb.svg);mask-image:url(../../img/element-icons/room/share.54dc3fb.svg)}.mx_GroupView_hostingSignup img{margin-left:5px}.mx_GroupView_editable{border-bottom:1px solid #c7c7c7!important;min-width:150px;cursor:text}.mx_GroupView_editable:focus{border-bottom:1px solid #0dbd8b!important;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable){color:#0dbd8b;cursor:pointer}.mx_GroupView_avatarPicker{position:relative}.mx_GroupView_avatarPicker_edit{position:absolute;top:50px;left:15px}.mx_GroupView_avatarPicker .mx_Spinner{width:48px;height:48px!important}.mx_GroupView_header_leftCol{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden}.mx_GroupView_header_rightCol{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_GroupView_textButton{display:inline-block}.mx_GroupView_header_groupid{font-weight:400;font-size:medium;padding-left:10px}.mx_GroupView_header_name{vertical-align:middle;width:100%;height:31px;color:#2e2f32;font-weight:700;font-size:2.2rem;padding-right:16px}.mx_GroupView_header_name,.mx_GroupView_header_shortDesc{overflow:hidden;padding-left:19px;text-overflow:ellipsis;border-bottom:1px solid transparent}.mx_GroupView_header_shortDesc{vertical-align:bottom;float:left;max-height:42px;color:#a2a2a2;font-weight:300;font-size:1.3rem;margin-right:16px}.mx_GroupView_avatarPicker_label{cursor:pointer}.mx_GroupView_cancelButton{padding-left:8px}.mx_GroupView_cancelButton img{position:relative;top:5px}.mx_GroupView input[type=radio]{margin:10px 10px 0}.mx_GroupView_label_text{display:inline-block;max-width:80%;vertical-align:.1em;line-height:2em}.mx_GroupView_body{margin:0 24px}.mx_GroupView_body,.mx_GroupView_rooms{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_GroupView_rooms{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_GroupView h3{text-transform:uppercase;color:#3d3b39;font-weight:600;font-size:1.3rem;margin-bottom:10px}.mx_GroupView_rooms_header .mx_AccessibleButton{padding-left:14px;margin-bottom:14px;height:24px}.mx_GroupView_group{border-top:1px solid transparent}.mx_GroupView_group_disabled{opacity:.3;pointer-events:none}.mx_GroupView_rooms_header_addRow_button{display:inline-block}.mx_GroupView_rooms_header_addRow_button object{pointer-events:none}.mx_GroupView_rooms_header_addRow_label{display:inline-block;vertical-align:top;line-height:2.4rem;padding-left:28px;color:#0dbd8b}.mx_GroupView_rooms .mx_RoomDetailList{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-top:1px solid transparent;padding-top:10px;word-break:break-word}.mx_GroupView .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_GroupView_membershipSection{color:#888;margin-top:10px}.mx_GroupView_membershipSubSection{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:8px}.mx_GroupView_membershipSubSection .mx_Spinner{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_GroupView_membershipSection_description{line-height:3.4rem}.mx_GroupView_membershipSection_description .mx_BaseAvatar{margin-right:10px}.mx_GroupView_membershipSection .mx_GroupView_textButton{margin-right:0;margin-top:0;margin-left:8px}.mx_GroupView_memberSettings_toggle label{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_GroupView_memberSettings input{margin-right:6px}.mx_GroupView_featuredThings{margin-top:20px}.mx_GroupView_featuredThings_header{font-weight:700;font-size:120%;margin-bottom:20px}.mx_GroupView_featuredThings_category{font-weight:700;font-size:110%;margin-top:10px}.mx_GroupView_featuredThings_container{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_GroupView_featuredThing,.mx_GroupView_featuredThings_addButton{display:table-cell;text-align:center;width:100px;margin:0 20px}.mx_GroupView_featuredThing{position:relative}.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton{position:absolute;top:-7px;right:11px;opacity:.4}.mx_GroupView_featuredThing .mx_BaseAvatar{vertical-align:baseline;vertical-align:initial}.mx_GroupView_featuredThings_addButton object{pointer-events:none}.mx_GroupView_featuredThing_name{word-wrap:break-word}.mx_GroupView_uploadInput{display:none}.mx_GroupView_body .mx_AutoHideScrollbar>*{margin:11px 50px 50px 68px}.mx_GroupView_groupDesc textarea{width:100%;max-width:100%;height:150px}.mx_GroupView_changeDelayWarning,.mx_GroupView_groupDesc_placeholder{background-color:#f7f7f7;color:#888;border-radius:10px;text-align:center;margin:20px 0}.mx_GroupView_groupDesc_placeholder{padding:100px 20px;cursor:pointer}.mx_GroupView_changeDelayWarning{padding:40px 20px}.mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar>:not(.mx_MemberInfo_avatar){padding-left:16px;padding-right:16px}.mx_HeaderButtons{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_buttons+.mx_HeaderButtons:before{content:unset}.mx_HeaderButtons:before{content:"";background-color:#91a1c0;opacity:.5;margin:6px 8px;border-radius:1px;width:1px}.mx_HomePage{max-width:960px;width:100%;height:100%;margin-left:auto;margin-right:auto}.mx_HomePage_default{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_HomePage_default .mx_HomePage_default_wrapper{margin:auto}.mx_HomePage_default img{height:48px}.mx_HomePage_default h1{font-weight:600;font-size:3.2rem;line-height:4.4rem;margin-bottom:4px}.mx_HomePage_default h4{margin-top:4px;font-weight:600;font-size:1.8rem;line-height:2.5rem;color:#61708b}.mx_HomePage_default .mx_MiniAvatarUploader{margin:0 auto}.mx_HomePage_default .mx_HomePage_default_buttons{margin:60px auto 0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton{padding:73px 8px 15px;width:160px;height:132px;margin:20px;position:relative;display:inline-block;border-radius:8px;vertical-align:top;word-break:break-word;-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:600;font-size:1.5rem;line-height:2rem;color:#fff;background-color:#0dbd8b}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:before{top:20px;left:60px;width:40px;height:40px;content:"";position:absolute;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_sendDm:before{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_explore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_createGroup:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg)}.mx_LeftPanel{background-color:hsla(0,0%,96.1%,.9);min-width:206px;max-width:50%;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:56px;flex-basis:56px;height:100%;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer,.mx_LeftPanel .mx_LeftPanel_roomListContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_LeftPanel .mx_LeftPanel_roomListContainer{background-color:hsla(0,0%,96.1%,.9);-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;min-width:0;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader{padding:12px;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer{overflow-y:hidden;overflow-x:scroll;margin:12px 12px 0;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_leftOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000));-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%);mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000));mask-image:linear-gradient(90deg,transparent,#000 5%)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(#000),color-stop(95%,#000),to(transparent));-webkit-mask-image:linear-gradient(90deg,#000,#000 95%,transparent);mask-image:-webkit-gradient(linear,left top,right top,from(#000),color-stop(95%,#000),to(transparent));mask-image:linear-gradient(90deg,#000,#000 95%,transparent)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000),color-stop(95%,#000),to(transparent));-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000),color-stop(95%,#000),to(transparent));mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer{margin-left:12px;margin-right:12px;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_focused+.mx_LeftPanel_exploreButton,.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_hasQuery+.mx_LeftPanel_exploreButton{-ms-flex-preferred-size:0;flex-basis:0;margin:0;width:0}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_focused+.mx_LeftPanel_exploreButton:before,.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_hasQuery+.mx_LeftPanel_exploreButton:before{content:none}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton{width:32px;height:32px;border-radius:8px;background-color:rgba(141,151,165,.2);position:relative;margin-left:8px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton:before{content:"";position:absolute;top:8px;left:8px;width:16px;height:16px;-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#737d8c}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton.mx_LeftPanel_exploreButton_space:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListFilterCount{font-size:1.3rem;font-weight:600;margin-left:12px;margin-top:14px;margin-bottom:-4px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper{overflow:hidden;margin-top:10px;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyBottom{padding-bottom:32px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyTop{padding-top:32px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_actualRoomListContainer{position:relative;height:100%}.mx_LeftPanel.mx_LeftPanel_minimized{min-width:unset;width:unset!important}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer{width:68px}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton{margin-left:0;margin-top:8px;background-color:transparent}.mx_LeftPanelWidget{margin-left:8px;margin-bottom:4px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:24px;color:#8d99a5;margin-top:4px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_stickable{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:calc(100% - 16px);line-height:1.6rem;font-size:1.3rem;font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn{display:inline-block;position:relative;width:14px;height:14px;margin-right:6px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn:before{content:"";width:18px;height:18px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn.mx_LeftPanelWidget_collapseBtn_collapsed:before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox{position:relative;-ms-flex-direction:column;flex-direction:column;overflow:visible}.mx_LeftPanelWidget .mx_AppTileFullWidth,.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_LeftPanelWidget .mx_AppTileFullWidth{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;overflow:hidden;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-mask-image:linear-gradient(0deg,transparent,#000 4px);mask-image:linear-gradient(0deg,transparent,#000 4px)}.mx_LeftPanelWidget .mx_LeftPanelWidget_resizerHandle{cursor:ns-resize;border-radius:3px;width:unset!important;height:4px!important;position:absolute;top:-24px!important;left:calc(50% - 32px)!important;right:calc(50% - 32px)!important}.mx_LeftPanelWidget:hover .mx_LeftPanelWidget_resizerHandle{opacity:.8;background-color:#2e2f32}.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton{margin-left:8px;margin-right:7px;position:relative;width:24px;height:24px;border-radius:32px}.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton:before{content:"";width:16px;height:16px;position:absolute;top:4px;left:4px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg);background:#61708b}.mx_LeftPanelWidget_maximizeButtonTooltip{margin-top:-3px}.mx_MainSplit{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-width:0;min-height:0;height:100%}.mx_MainSplit>.mx_RightPanel_ResizeWrapper{padding:5px;margin-left:8px;height:calc(100vh - 51px)}.mx_MainSplit>.mx_RightPanel_ResizeWrapper:hover .mx_RightPanel_ResizeHandle{top:50%!important;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px!important;width:4px!important;border-radius:4px!important;background-color:#2e2f32;opacity:.8}.mx_MatrixChat_splash{position:relative;height:100%}.mx_MatrixChat_splashButtons{text-align:center;width:100%;position:absolute;bottom:30px}.mx_MatrixChat_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.mx_MatrixToolbar{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;height:40px}.mx_MatrixChat{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.mx_MatrixChat_syncError{color:#fff;background-color:#df2a8b;border-radius:5px;display:table;padding:30px;position:absolute;top:100px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.mx_MatrixChat>:not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle){background-color:#fff;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;height:100%}.mx_MatrixChat>.mx_ResizeHandle_horizontal:hover{position:relative}.mx_MatrixChat>.mx_ResizeHandle_horizontal:hover:before{position:absolute;left:6px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px;width:4px;border-radius:4px;content:" ";background-color:#2e2f32;opacity:.8}.mx_MyGroups{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_MyGroups .mx_BetaCard{margin:0 72px;max-width:760px}.mx_MyGroups .mx_RoomHeader_simpleHeader{margin-left:0}.mx_MyGroups_header{margin-left:2px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_MyGroups>:not(.mx_RoomHeader):not(.mx_BetaCard){max-width:960px;margin:40px}.mx_MyGroups_headerCard{-webkit-box-flex:1;-ms-flex:1 0 50%;flex:1 0 50%;margin-bottom:30px;min-width:400px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:13px;height:40px;width:40px;border-radius:20px;background-color:rgba(92,100,112,.2);position:relative}.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button:before{background-color:#5c6470;-webkit-mask:url(../../img/icons-create-room.817ede2.svg);mask:url(../../img/icons-create-room.817ede2.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:80%;mask-size:80%;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_MyGroups_headerCard_header{font-weight:700;margin-bottom:10px}.mx_MyGroups_headerCard_content{padding-right:15px}.mx_MyGroups_joinBox{visibility:hidden;height:0;margin:0}.mx_MyGroups_content{margin-left:2px;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto}.mx_MyGroups_scrollable{overflow-y:inherit}.mx_MyGroups_placeholder{background-color:#f7f7f7;color:#888;line-height:40rem;border-radius:10px;text-align:center}.mx_MyGroups_joinedGroups{border-top:1px solid transparent;overflow-x:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-line-pack:start;align-content:flex-start}.mx_MyGroups_joinedGroups .mx_GroupTile{min-width:300px;max-width:33%;-webkit-box-flex:1;-ms-flex:1 0 300px;flex:1 0 300px;height:75px;margin:10px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;cursor:pointer}.mx_GroupTile_avatar{cursor:-webkit-grab,-webkit-grab;cursor:grab,-webkit-grab}.mx_GroupTile_profile{margin-left:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_GroupTile_profile .mx_GroupTile_desc,.mx_GroupTile_profile .mx_GroupTile_groupId,.mx_GroupTile_profile .mx_GroupTile_name{padding-right:10px}.mx_GroupTile_profile .mx_GroupTile_name{margin:0;font-size:1.5rem}.mx_GroupTile_profile .mx_GroupTile_groupId{font-size:1.3rem;opacity:.7}.mx_GroupTile_profile .mx_GroupTile_desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:1.3rem;max-height:36px;overflow:hidden}.mx_NonUrgentToastContainer{position:absolute;bottom:30px;left:28px;z-index:101}.mx_NonUrgentToastContainer .mx_NonUrgentToastContainer_toast{padding:10px 12px;border-radius:8px;width:320px;font-size:1.3rem;margin-top:8px;background-color:#17191c;color:#fff}.mx_NotificationPanel{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_NotificationPanel .mx_RoomView_messageListWrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_NotificationPanel .mx_RoomView_MessageList{width:100%}.mx_NotificationPanel .mx_RoomView_MessageList h2{margin-left:0}.mx_NotificationPanel .mx_EventTile{word-break:break-word;position:relative;padding-bottom:18px}.mx_NotificationPanel .mx_EventTile:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection):after{position:absolute;bottom:0;left:0;right:0;background-color:#8d99a5;height:1px;opacity:.4;content:""}.mx_NotificationPanel .mx_EventTile_roomName{font-weight:700;font-size:1.4rem}.mx_NotificationPanel .mx_EventTile_roomName>*{vertical-align:middle}.mx_NotificationPanel .mx_EventTile_roomName>.mx_BaseAvatar{margin-right:8px}.mx_NotificationPanel .mx_EventTile_roomName a{color:#2e2f32}.mx_NotificationPanel .mx_EventTile_avatar{display:none}.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp,.mx_NotificationPanel .mx_EventTile .mx_SenderProfile{color:#2e2f32;font-size:1.2rem;display:inline;padding-left:0}.mx_NotificationPanel .mx_EventTile_senderDetails{padding-left:36px;position:relative}.mx_NotificationPanel .mx_EventTile_senderDetails a{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_NotificationPanel .mx_EventTile_roomName a,.mx_NotificationPanel .mx_EventTile_senderDetails a{text-decoration:none!important}.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp{visibility:visible;position:static;display:inline}.mx_NotificationPanel .mx_EventTile_line{margin-right:0;padding:0 0 0 36px}.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line{padding-left:0}.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line{background-color:#fff}.mx_NotificationPanel .mx_EventTile_content{margin-right:0}.mx_NotificationPanel_empty:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RightPanel{overflow-x:hidden;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-radius:8px;padding:4px 0;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%}.mx_RightPanel .mx_RoomView_MessageList{padding:14px 18px}.mx_RightPanel_header{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;border-bottom:1px solid transparent;-webkit-box-flex:0;-ms-flex:0 0 52px;flex:0 0 52px}.mx_RightPanel_headerButtonGroup{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;background-color:#fff;padding:0 9px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RightPanel_headerButton{cursor:pointer;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:1px;margin-right:1px;height:32px;width:32px;position:relative;border-radius:100%}.mx_RightPanel_headerButton:before{content:"";position:absolute;top:4px;left:4px;height:24px;width:24px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_RightPanel_headerButton:hover{background:rgba(13,189,139,.1)}.mx_RightPanel_headerButton:hover:before{background-color:#0dbd8b}.mx_RightPanel_notifsButton:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_roomSummaryButton:before{-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_groupMembersButton:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_roomsButton:before{-webkit-mask-image:url(../../img/element-icons/community-rooms.8f0b6c9.svg);mask-image:url(../../img/element-icons/community-rooms.8f0b6c9.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_headerButton_highlight:before{background-color:#0dbd8b!important}.mx_RightPanel_headerButton_badge{font-size:.8rem;border-radius:8px;color:#fff;background-color:#0dbd8b;font-weight:700;position:absolute;top:-4px;left:20px;padding:2px 4px}.mx_RightPanel_collapsebutton{-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:right;height:16px;border:none}.mx_RightPanel .mx_GroupRoomList,.mx_RightPanel .mx_MemberInfo,.mx_RightPanel .mx_MemberList,.mx_RightPanel_blank{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RightPanel .mx_RoomView_messagePanelSpinner{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin:auto}.mx_RightPanel_empty{margin-right:-28px}.mx_RightPanel_empty h2{font-weight:700;margin:16px 0}.mx_RightPanel_empty h2,.mx_RightPanel_empty p{font-size:1.4rem}.mx_RightPanel_empty:before{content:"";display:block;margin:11px auto 29px;height:42px;width:42px;background-color:#91a1c0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_RightPanel_scopeHeader{margin:24px;text-align:center;font-weight:600;font-size:1.8rem;line-height:2.2rem}.mx_RightPanel_scopeHeader .mx_BaseAvatar{margin-right:8px;vertical-align:middle}.mx_RightPanel_scopeHeader .mx_BaseAvatar_image{border-radius:8px}.mx_RoomDirectory_dialogWrapper>.mx_Dialog{max-width:960px;height:100%}.mx_RoomDirectory_dialog{height:100%;flex-direction:column}.mx_RoomDirectory,.mx_RoomDirectory_dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column}.mx_RoomDirectory{margin-bottom:12px;color:#2e2f32;word-break:break-word}.mx_RoomDirectory,.mx_RoomDirectory_list{flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_RoomDirectory_list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column}.mx_RoomDirectory_list .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_RoomDirectory_listheader{display:block;margin-top:13px}.mx_RoomDirectory_searchbox{-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important}.mx_RoomDirectory_listheader .mx_NetworkDropdown{-webkit-box-flex:0;-ms-flex:0 0 200px;flex:0 0 200px}.mx_RoomDirectory_tableWrapper{overflow-y:auto;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RoomDirectory_table{color:#2e2f32;display:grid;font-size:1.2rem;grid-template-columns:-webkit-max-content auto -webkit-max-content -webkit-max-content -webkit-max-content;grid-template-columns:max-content auto max-content max-content max-content;grid-row-gap:24px;row-gap:24px;text-align:left;width:100%}.mx_RoomDirectory_roomAvatar{padding:2px 14px 0 0}.mx_RoomDirectory_roomMemberCount{-ms-flex-item-align:center;align-self:center;color:#747474;padding:3px 10px 0}.mx_RoomDirectory_roomMemberCount:before{background-color:#747474;display:inline-block;vertical-align:text-top;margin-right:2px;content:"";-webkit-mask:url(../../img/feather-customised/user.7a4d23d.svg);mask:url(../../img/feather-customised/user.7a4d23d.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:80%;mask-size:80%;width:16px;height:16px}.mx_RoomDirectory_join,.mx_RoomDirectory_preview{-ms-flex-item-align:center;align-self:center;white-space:nowrap}.mx_RoomDirectory_name{display:inline-block;font-size:1.8rem;font-weight:600}.mx_RoomDirectory_perms{display:inline-block}.mx_RoomDirectory_perm{border-radius:10px;display:inline-block;height:20px;line-height:2rem;padding:0 5px;color:#fff;background-color:#aaa}.mx_RoomDirectory_topic{cursor:auto;color:#747474;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.mx_RoomDirectory_alias{font-size:1.2rem;color:#a2a2a2}.mx_RoomDirectory_table tr{padding-bottom:10px;cursor:pointer}.mx_RoomDirectory .mx_RoomView_MessageList{padding:0}.mx_RoomDirectory>span{font-size:1.5rem;margin-top:0}.mx_RoomDirectory>span .mx_AccessibleButton{padding:0}.mx_RoomSearch{-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:8px;background-color:rgba(141,151,165,.2);border:1px solid transparent;height:28px;padding:1px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSearch .mx_RoomSearch_icon{width:16px;height:16px;-webkit-mask:url(../../img/element-icons/roomlist/search.3774248.svg);mask:url(../../img/element-icons/roomlist/search.3774248.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#737d8c;margin-left:7px}.mx_RoomSearch .mx_RoomSearch_input{border:none!important;-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important;color:#2e2f32!important;padding:0;height:100%;width:100%;font-size:1.2rem;line-height:1.6rem}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-webkit-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-moz-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded):-ms-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-ms-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::placeholder{color:#8d99a5!important}.mx_RoomSearch.mx_RoomSearch_hasQuery{border-color:#737d8c}.mx_RoomSearch.mx_RoomSearch_focused{-webkit-box-shadow:0 0 4px 4px rgba(0,132,255,.5);box-shadow:0 0 4px 4px rgba(0,132,255,.5);border-color:transparent}.mx_RoomSearch.mx_RoomSearch_focused,.mx_RoomSearch.mx_RoomSearch_hasQuery{background-color:#fff}.mx_RoomSearch.mx_RoomSearch_focused .mx_RoomSearch_clearButton,.mx_RoomSearch.mx_RoomSearch_hasQuery .mx_RoomSearch_clearButton{width:16px;height:16px;-webkit-mask-image:url(../../img/element-icons/roomlist/search-clear.6164d97.svg);mask-image:url(../../img/element-icons/roomlist/search-clear.6164d97.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#737d8c;margin-right:8px}.mx_RoomSearch .mx_RoomSearch_clearButton{width:0;height:0}.mx_RoomSearch.mx_RoomSearch_minimized{border-radius:32px;height:auto;width:auto;padding:8px}.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_icon{margin-left:0}.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages){margin-left:65px;min-height:50px}.mx_RoomStatusBar_typingIndicatorAvatars{width:52px;margin-top:-1px;text-align:left}.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image{margin-right:-12px;border:1px solid #fff}.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial{padding-left:1px;padding-top:1px}.mx_RoomStatusBar_typingIndicatorRemaining{display:inline-block;color:#acacac;background-color:#ddd;border:1px solid #fff;border-radius:40px;width:24px;height:24px;line-height:2.4rem;font-size:.8em;vertical-align:top;text-align:center;position:absolute}.mx_RoomStatusBar_scrollDownIndicator{cursor:pointer;padding-left:1px}.mx_RoomStatusBar_unreadMessagesBar{padding-top:10px;color:#ff4b55;cursor:pointer}.mx_RoomStatusBar_connectionLostBar{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:19px;min-height:58px}.mx_RoomStatusBar_unsentMessages>div[role=alert]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:70px;margin:12px;padding-left:16px;background-color:#f3f8fd;border-radius:4px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge{margin-right:12px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge{width:24px!important;height:24px!important;border-radius:24px!important}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge .mx_NotificationBadge_count{font-size:1.6rem!important}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentTitle{color:#ff4b55;font-size:1.5rem}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentDescription{font-size:1.2rem}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right;margin-right:22px;color:#61708b}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton{padding:5px 10px 5px 28px;display:inline-block;position:relative}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:nth-child(2){border-left:1px solid #e3e8f0}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:before{content:"";position:absolute;left:10px;background-color:#61708b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentCancelAllBtn:before{-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);width:12px;height:16px;top:calc(50% - 8px)}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn{padding-left:34px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn:before{-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg);width:18px;height:18px;top:calc(50% - 9px)}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner{vertical-align:middle;margin-right:5px;top:1px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner+span{margin-right:10px}.mx_RoomStatusBar_connectionLostBar img{padding-left:10px;padding-right:10px;vertical-align:middle;float:left}.mx_RoomStatusBar_connectionLostBar_title{color:#ff4b55}.mx_RoomStatusBar_connectionLostBar_desc{color:#2e2f32;font-size:1.3rem;opacity:.5;padding-bottom:20px}.mx_RoomStatusBar_resend_link{color:#2e2f32!important;text-decoration:underline!important;cursor:pointer}.mx_RoomStatusBar_typingBar{height:50px;line-height:5rem;color:#2e2f32;opacity:.5;overflow-y:hidden;display:block}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages){min-height:40px}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_indicator{margin-top:10px}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_typingBar{height:40px;line-height:4rem}.mx_RoomView{word-wrap:break-word;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@-webkit-keyframes mx_RoomView_fileDropTarget_animation{0%{opacity:0}to{opacity:.95}}@keyframes mx_RoomView_fileDropTarget_animation{0%{opacity:0}to{opacity:.95}}.mx_RoomView_fileDropTarget{min-width:0;width:100%;height:100%;font-size:1.8rem;text-align:center;pointer-events:none;background-color:#fff;opacity:.95;position:absolute;z-index:3000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-animation:mx_RoomView_fileDropTarget_animation;animation:mx_RoomView_fileDropTarget_animation;-webkit-animation-duration:.5s;animation-duration:.5s}@-webkit-keyframes mx_RoomView_fileDropTarget_image_animation{0%{width:0}to{width:32px}}@keyframes mx_RoomView_fileDropTarget_image_animation{0%{width:0}to{width:32px}}.mx_RoomView_fileDropTarget_image{-webkit-animation:mx_RoomView_fileDropTarget_image_animation;animation:mx_RoomView_fileDropTarget_image_animation;-webkit-animation-duration:.5s;animation-duration:.5s;margin-bottom:16px}.mx_RoomView_auxPanel{min-width:0;width:100%;margin:0 auto;overflow:auto;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomView_auxPanel_fullHeight{position:absolute;top:0;bottom:0;left:0;right:0;z-index:3000;background-color:#fff}.mx_RoomView_auxPanel_hiddenHighlights{border-bottom:1px solid transparent;padding:10px 26px;color:#ff4b55;cursor:pointer}.mx_RoomView_auxPanel_apps{max-width:1920px!important}.mx_RoomView .mx_MainSplit,.mx_RoomView_messagePanel{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RoomView_messagePanel{width:100%;overflow-y:auto;overflow-anchor:none}.mx_RoomView_messagePanelSearchSpinner{-webkit-box-flex:1;-ms-flex:1;flex:1;background-image:url(../../img/typing-indicator-2x.0eb9f0e.gif);background-position:center 367px;background-size:25px;background-repeat:no-repeat;position:relative}.mx_RoomView_messagePanelSearchSpinner:before{background-color:#888;-webkit-mask:url(../../img/feather-customised/search-input.044bfa7.svg);mask:url(../../img/feather-customised/search-input.044bfa7.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:50px;mask-size:50px;content:"";position:absolute;top:286px;left:0;right:0;height:50px}.mx_RoomView_body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_RoomView_body .mx_RoomView_messagePanel,.mx_RoomView_body .mx_RoomView_messagePanelSearchSpinner,.mx_RoomView_body .mx_RoomView_messagePanelSpinner{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.mx_RoomView_body .mx_RoomView_timeline{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomView_statusArea{width:100%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;max-height:0;background-color:#fff;z-index:1000;overflow:hidden;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.mx_RoomView_statusArea_expanded{max-height:100px}.mx_RoomView_statusAreaBox{margin:auto;min-height:50px}.mx_RoomView_statusAreaBox_line{margin-left:65px;border-top:1px solid transparent;height:1px}.mx_RoomView_messageListWrapper{min-height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_RoomView_searchResultsPanel a{text-decoration:none;color:inherit}.mx_RoomView_empty{font-size:1.3rem;padding:0 24px;margin-right:30px;text-align:center;margin-bottom:80px}.mx_RoomView_MessageList{list-style-type:none;padding:18px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_RoomView_MessageList li{clear:both}li.mx_RoomView_myReadMarker_container{height:0;margin:0;padding:0;border:0}hr.mx_RoomView_myReadMarker{border-top:1px solid #0dbd8b;border-bottom:1px solid #0dbd8b;margin-top:0;position:relative;top:-1px;z-index:1;-webkit-transition:width easeinsine .4s 1s,opacity easeinsine .4s 1s;transition:width easeinsine .4s 1s,opacity easeinsine .4s 1s;width:99%;opacity:1}.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner{background-color:#fff}.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename{color:#fff;opacity:1}.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line{margin-top:2px;border:none;height:0}.mx_RoomView_inCall .mx_MessageComposer_wrapper{border-top:2px hidden;padding-top:1px}.mx_RoomView_voipChevron{position:absolute;bottom:-11px;right:11px}.mx_RoomView_voipButton{float:right;margin-right:13px;margin-top:13px;cursor:pointer}.mx_RoomView_voipButton object{pointer-events:none}.mx_RoomView .mx_MessageComposer{width:100%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:2px}.mx_RoomView_ongoingConfCallNotification{width:100%;text-align:center;background-color:#ff4b55;color:#fff;font-weight:700;padding:6px 0;cursor:pointer}.mx_RoomView_ongoingConfCallNotification a{color:#fff!important}.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList{margin-bottom:4px}.mx_MatrixChat_useCompactLayout .mx_RoomView_statusAreaBox{min-height:42px}.mx_ScrollPanel .mx_RoomView_MessageList{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_SearchBox{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0}.mx_SearchBox.mx_SearchBox_blurred:not(:hover){background-color:transparent}.mx_SearchBox .mx_SearchBox_closeButton{cursor:pointer;background-image:url(../../img/icons-close.11ff07c.svg);background-repeat:no-repeat;width:16px;height:16px;background-position:50%;padding:9px}.mx_SpacePanel{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;background-color:hsla(0,0%,91%,.77);padding:0;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto}.mx_SpacePanel .mx_SpacePanel_spaceTreeWrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:8px 8px 16px 0}.mx_SpacePanel .mx_SpacePanel_toggleCollapse{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:40px;height:40px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:32px;mask-size:32px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;margin-left:16px;margin-bottom:12px;background-color:#8d99a5;-webkit-mask-image:url(../../img/element-icons/expand-space-panel.e6f74b9.svg);mask-image:url(../../img/element-icons/expand-space-panel.e6f74b9.svg)}.mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.mx_SpacePanel ul{margin:0;list-style:none;padding:0}.mx_SpacePanel ul>.mx_SpaceItem{padding-left:16px}.mx_SpacePanel .mx_SpaceButton_toggleCollapse{cursor:pointer}.mx_SpacePanel .mx_SpaceTreeLevel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:250px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_SpacePanel .mx_SpaceItem{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:wrap;flex-flow:wrap}.mx_SpacePanel .mx_SpaceItem.mx_SpaceItem_narrow{-ms-flex-item-align:baseline;align-self:baseline}.mx_SpacePanel .mx_SpaceItem.collapsed>.mx_SpaceButton>.mx_SpaceButton_toggleCollapse{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_SpacePanel .mx_SpaceItem.collapsed>.mx_SpaceTreeLevel{display:none}.mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces)>.mx_SpaceButton{margin-left:16px;min-width:40px}.mx_SpacePanel .mx_SpaceButton{border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:4px 4px 4px 0;width:100%}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper{background-color:#fff}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper{padding:1px;border:3px solid #737d8c}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:12px;padding:4px}.mx_SpacePanel .mx_SpaceButton:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper{width:100%;padding-right:16px;overflow:hidden}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:8px;white-space:nowrap;display:block;text-overflow:ellipsis;overflow:hidden;padding-right:8px;font-size:1.4rem;line-height:1.8rem}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse{width:16px;height:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon{width:32px;min-width:32px;height:32px;border-radius:8px;position:relative}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon:before{position:absolute;content:"";width:32px;height:32px;top:0;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:18px;mask-size:18px}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon{background-color:#fff}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon:before{background-color:#3f3d3d;-webkit-mask-image:url(../../img/element-icons/home.b706c0e.svg);mask-image:url(../../img/element-icons/home.b706c0e.svg)}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon{background-color:#0dbd8b;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon:before{background-color:#fff;-webkit-mask-image:url(../../img/element-icons/plus.62cc275.svg);mask-image:url(../../img/element-icons/plus.62cc275.svg);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon{background-color:#c1c6cd}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.mx_SpacePanel .mx_SpaceButton .mx_BaseAvatar_image{border-radius:8px}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton{width:20px;min-width:20px;height:20px;margin-top:auto;margin-bottom:auto;display:none;position:absolute;right:4px}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton:before{top:2px;left:2px;content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);background:#2e2f32}.mx_SpacePanel .mx_SpacePanel_badgeContainer{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge{margin:0 2px}.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot{margin:0 7px}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer{right:0;top:0}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge{background-clip:padding-box}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot{margin:0 -1px 0 0;border:3px solid hsla(0,0%,91%,.77)}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_2char,.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_3char{margin:-5px -5px 0 0;border:2px solid hsla(0,0%,91%,.77)}.mx_SpacePanel.collapsed .mx_SpaceButton.mx_SpaceButton_active .mx_SpacePanel_badgeContainer{right:-3px;top:-3px}.mx_SpacePanel:not(.collapsed) .mx_SpacePanel_badgeContainer{position:absolute;right:4px}.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer{width:0;height:0;display:none}.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton{display:block}.mx_SpacePanel>.mx_AutoHideScrollbar>.mx_SpaceButton,.mx_SpacePanel>.mx_AutoHideScrollbar>.mx_SpaceButton.mx_SpaceButton_active:before{height:32px}.mx_SpacePanel>.mx_AutoHideScrollbar>ul{padding-left:0}.mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_header{margin:12px 16px;font-weight:600;font-size:1.5rem;line-height:1.8rem}.mx_SpacePanel_contextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton{color:#0dbd8b}.mx_SpacePanel_contextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton .mx_SpacePanel_iconInvite:before{background-color:#0dbd8b;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconLeave:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconMembers:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconPlus:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconHash:before{-webkit-mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_SpacePanel_sharePublicSpace{margin:0}.mx_SpaceRoomDirectory_dialogWrapper>.mx_Dialog{max-width:960px;height:100%}.mx_SpaceRoomDirectory{height:100%;margin-bottom:12px;color:#2e2f32;word-break:break-word;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_SpaceRoomDirectory,.mx_SpaceRoomDirectory .mx_Dialog_title,.mx_SpaceRoomView_landing .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar,.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar{margin-right:12px;-ms-flex-item-align:center;align-self:center}.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar_image,.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar_image{border-radius:8px}.mx_SpaceRoomDirectory .mx_Dialog_title>div>h1,.mx_SpaceRoomView_landing .mx_Dialog_title>div>h1{font-weight:600;font-size:1.8rem;line-height:2.2rem;margin:0}.mx_SpaceRoomDirectory .mx_Dialog_title>div>div,.mx_SpaceRoomView_landing .mx_Dialog_title>div>div{font-weight:400;color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_SpaceRoomDirectory .mx_AccessibleButton_kind_link,.mx_SpaceRoomView_landing .mx_AccessibleButton_kind_link{padding:0}.mx_SpaceRoomDirectory .mx_SearchBox,.mx_SpaceRoomView_landing .mx_SearchBox{margin:24px 0 16px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults{text-align:center}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults>div,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults>div{font-size:1.5rem;line-height:2.4rem;color:#737d8c}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:32px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.5rem;line-height:2.4rem;color:#2e2f32}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton{padding:4px 12px;font-weight:400}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton+.mx_AccessibleButton,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton+.mx_AccessibleButton{margin-left:16px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_primary_outline,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_primary_outline{padding:3px 12px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader>span,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader>span{margin-left:auto}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error{position:relative;font-weight:600;color:#ff4b55;font-size:1.5rem;line-height:1.8rem;margin:20px auto 12px;padding-left:24px;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error:before,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error:before{content:"";position:absolute;height:16px;width:16px;left:0;background-image:url(../../img/element-icons/warning-badge.de1033e.svg)}.mx_SpaceRoomDirectory_list{margin-top:16px;padding-bottom:40px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount>h3{display:inline;font-weight:600;font-size:1.8rem;line-height:2.2rem;color:#2e2f32}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount>span{margin-left:8px;font-size:1.5rem;line-height:2.4rem;color:#737d8c}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace .mx_BaseAvatar_image{border-radius:8px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle{position:absolute;left:-1px;top:10px;height:16px;width:16px;border-radius:4px;background-color:#fff}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle:before{content:"";position:absolute;top:0;left:0;height:16px;width:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#8d99a5;-webkit-mask-size:16px;mask-size:16px;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle.mx_SpaceRoomDirectory_subspace_toggle_shown:before{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children{position:relative;padding-left:12px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile{position:relative;padding:8px 16px;border-radius:8px;min-height:56px;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:20px auto -webkit-max-content;grid-template-columns:20px auto max-content;grid-column-gap:8px;grid-row-gap:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_BaseAvatar{grid-row:1;grid-column:1}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name{font-weight:600;font-size:1.5rem;line-height:1.8rem;grid-row:1;grid-column:2}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip{display:inline;margin-left:12px;color:#8d99a5;font-size:1.2rem;line-height:1.5rem}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon{margin-right:4px;position:relative;vertical-align:text-top}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon:before{position:absolute;top:0;left:0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_info{font-size:1.4rem;line-height:1.8rem;color:#737d8c;grid-row:2;grid-column:1/3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions{text-align:right;margin-left:20px;grid-column:3;grid-row:1/3}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton{line-height:2.4rem;padding:4px 16px;display:inline-block;visibility:hidden}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton_kind_primary_outline{padding:3px 16px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_Checkbox{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;margin-left:12px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover{background-color:hsla(0,0%,91%,.77)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover .mx_AccessibleButton{visibility:visible}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:before,.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children:before{content:"";position:absolute;background-color:hsla(0,0%,91%,.77);width:1px;height:100%;left:6px;top:0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_actions .mx_SpaceRoomDirectory_actionsText{font-weight:400;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_SpaceRoomDirectory_list>hr{border:none;height:1px;background-color:rgba(141,151,165,.2);margin:20px 0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_createRoom{display:block;margin:16px auto 0;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomView .mx_MainSplit>div:first-child{padding:80px 60px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-height:100%;overflow-y:auto}.mx_SpaceRoomView .mx_MainSplit>div:first-child h1{margin:0;font-size:2.4rem;font-weight:600;color:#2e2f32;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_description{font-size:1.5rem;color:#737d8c;margin-top:12px;margin-bottom:24px;max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AddExistingToSpace{max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AddExistingToSpace .mx_AddExistingToSpace_content{height:calc(100vh - 360px);max-height:400px}.mx_SpaceRoomView .mx_MainSplit>div:first-child:not(.mx_SpaceRoomView_landing) .mx_SpaceFeedbackPrompt{width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons{display:block;margin-top:44px;width:428px;text-align:right}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons .mx_AccessibleButton_hasKind{padding:8px 22px;margin-left:16px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons input.mx_AccessibleButton{border:none}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_Field{max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_Field+.mx_Field{margin-top:28px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_errorText{font-weight:600;font-size:1.2rem;line-height:1.5rem;color:#ff4b55;margin-bottom:28px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpaceRoomView .mx_SpaceRoomView_preview{padding:32px 24px!important;margin:auto;max-width:480px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:2px 15px 30px rgba(0,0,0,.48);box-shadow:2px 15px 30px rgba(0,0,0,.48);border-radius:8px;position:relative}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_BetaCard_betaPill{position:absolute;right:24px;top:32px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt{font-weight:600;font-size:1.4rem;line-height:2.4rem;color:#2e2f32;margin-top:24px;position:relative;padding-left:24px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt .mx_AccessibleButton_kind_link{display:inline;padding:0;font-size:inherit;line-height:inherit}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt:before{content:"";position:absolute;height:2.4rem;width:20px;left:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);background-color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:20px;font-size:1.5rem}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div{margin-left:8px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div .mx_SpaceRoomView_preview_inviter_name{line-height:1.8rem}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div .mx_SpaceRoomView_preview_inviter_mxid{line-height:2.4rem;color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_preview>.mx_BaseAvatar>.mx_BaseAvatar_image,.mx_SpaceRoomView .mx_SpaceRoomView_preview>.mx_BaseAvatar_image{border-radius:12px}.mx_SpaceRoomView .mx_SpaceRoomView_preview h1.mx_SpaceRoomView_preview_name{margin:20px 0!important}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_topic{font-size:1.4rem;line-height:2.2rem;color:#737d8c;margin:20px 0;max-height:160px;overflow-y:auto}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons{margin-top:20px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons .mx_AccessibleButton{width:200px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:14px 0}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:20px}.mx_SpaceRoomView .mx_SpaceRoomView_landing>.mx_BaseAvatar>.mx_BaseAvatar_image,.mx_SpaceRoomView .mx_SpaceRoomView_landing>.mx_BaseAvatar_image{border-radius:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name{margin:24px 0 16px;font-size:1.5rem;color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name>span{display:inline-block}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_nameRow{margin-top:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_nameRow>h1{display:inline-block}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_inviter .mx_BaseAvatar{margin-right:4px;vertical-align:middle}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_info{display:inline-block;margin:0 auto 0 0}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_FacePile{display:inline-block;margin-right:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_FacePile .mx_FacePile_faces{cursor:pointer}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_inviteButton{position:relative;padding:4px 18px 4px 40px;line-height:2.4rem;height:-webkit-min-content;height:-moz-min-content;height:min-content}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_inviteButton:before{position:absolute;content:"";left:8px;height:16px;width:16px;background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_settingsButton{position:relative;margin-left:16px;width:24px;height:24px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_settingsButton:before{position:absolute;content:"";left:0;top:0;height:24px;width:24px;background:#8d99a5;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_topic{font-size:1.5rem;margin-top:12px;margin-bottom:16px}.mx_SpaceRoomView .mx_SpaceRoomView_landing>hr{border:none;height:1px;background-color:hsla(0,0%,91%,.77)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SearchBox{margin:0 0 20px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt{margin-bottom:16px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt+hr{display:none}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton>h3{font-weight:600;margin:0 0 4px}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton>span{color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover{border-color:#0dbd8b}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover:before{background-color:#0dbd8b}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover>span{color:#2e2f32}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_justMeButton:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_betaDisclaimer{padding:58px 16px 16px;position:relative;border-radius:8px;background-color:#f3f8fd;max-width:428px;margin:20px 0 30px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_betaDisclaimer .mx_BetaCard_betaPill{position:absolute;left:16px;top:16px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons{color:#737d8c;margin-top:28px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton{position:relative;display:inline-block;padding-left:32px;line-height:24px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton:before{content:"";position:absolute;height:24px;width:24px;top:0;left:0;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:32px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_SpaceRoomView_inviteTeammates_inviteDialogButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpaceRoomView_info{color:#737d8c;font-size:1.5rem;line-height:2.4rem;margin:20px 0}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private,.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public{padding-left:20px;position:relative}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before,.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before{position:absolute;content:"";width:20px;height:20px;top:0;left:-2px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before{-webkit-mask-size:12px;mask-size:12px;-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before{-webkit-mask-size:14px;mask-size:14px;-webkit-mask-image:url(../../img/element-icons/lock.1f264bd.svg);mask-image:url(../../img/element-icons/lock.1f264bd.svg)}.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link{color:inherit;position:relative;padding-left:16px}.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link:before{content:"·";position:absolute;left:6px}.mx_SpaceFeedbackPrompt{margin-top:18px;margin-bottom:12px}.mx_SpaceFeedbackPrompt>hr{border:none;border-top:1px solid #e7e7e7;margin-bottom:12px}.mx_SpaceFeedbackPrompt>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-size:1.5rem;line-height:2.4rem}.mx_SpaceFeedbackPrompt>div>span{color:#737d8c;position:relative;padding-left:32px;font-size:inherit;line-height:inherit;margin-right:auto}.mx_SpaceFeedbackPrompt>div>span:before{content:"";position:absolute;left:0;top:2px;height:20px;width:20px;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_SpaceFeedbackPrompt>div .mx_AccessibleButton_kind_link{color:#0dbd8b;position:relative;padding:0 0 0 24px;margin-left:8px;font-size:inherit;line-height:inherit}.mx_SpaceFeedbackPrompt>div .mx_AccessibleButton_kind_link:before{content:"";position:absolute;left:0;height:16px;width:16px;background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);-webkit-mask-position:center;mask-position:center}.mx_TabbedView{padding:0 0 0 16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;top:0;bottom:0;left:0;right:0;margin:8px 0 0}.mx_TabbedView_tabLabels{width:170px;max-width:170px;color:#45474a;position:fixed}.mx_TabbedView_tabLabel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:text-top;cursor:pointer;padding:8px 0;border-radius:8px;font-size:1.3rem;position:relative}.mx_TabbedView_tabLabel_active{background-color:#0dbd8b;color:#fff}.mx_TabbedView_maskedIcon{margin-left:8px;margin-right:16px;width:16px;height:16px;display:inline-block}.mx_TabbedView_maskedIcon:before{display:inline-block;background-color:#454545;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px;width:16px;height:16px;-webkit-mask-position:center;mask-position:center;content:""}.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before{background-color:#fff}.mx_TabbedView_tabLabel_text{vertical-align:middle}.mx_TabbedView_tabPanel{margin-left:240px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_TabbedView_tabPanel,.mx_TabbedView_tabPanelContent{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-height:0}.mx_TabbedView_tabPanelContent{overflow:auto}.mx_ToastContainer{position:absolute;top:0;left:70px;z-index:101;padding:4px;display:grid;grid-template-rows:1fr 14px 6px}.mx_ToastContainer.mx_ToastContainer_stacked:before{content:"";margin:0 4px;grid-row:2/4}.mx_ToastContainer .mx_Toast_toast,.mx_ToastContainer.mx_ToastContainer_stacked:before{grid-column:1;background-color:#f2f5f8;-webkit-box-shadow:0 4px 20px rgba(0,0,0,.5);box-shadow:0 4px 20px rgba(0,0,0,.5);border-radius:8px}.mx_ToastContainer .mx_Toast_toast{grid-row:1/3;color:#2e2f32;overflow:hidden;display:grid;grid-template-columns:22px 1fr;grid-column-gap:8px;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;grid-row-gap:4px;row-gap:4px;padding:8px}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:after,.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:before{content:"";width:22px;height:22px;grid-column:1;grid-row:1;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-size:100%;background-repeat:no-repeat}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#2e2f32}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:before{background-color:#fff;-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);-webkit-mask-size:90%;mask-size:90%}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_secure_backup:after{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);background-color:#2e2f32}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_body,.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_title{grid-column:2}.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon){padding-left:12px}.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) .mx_Toast_title{grid-column:1/-1}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description,.mx_ToastContainer .mx_Toast_toast .mx_Toast_title{padding-right:8px}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2{grid-column:1/3;grid-row:1;margin:0;font-size:1.5rem;font-weight:600;display:inline;width:auto;vertical-align:middle}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title span{padding-left:8px;float:right;font-size:1.2rem;line-height:2.2rem;color:#61708b}.mx_ToastContainer .mx_Toast_toast .mx_Toast_body{grid-column:1/3;grid-row:2}.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons{float:right;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_FormButton{min-width:96px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description{max-width:272px;overflow:hidden;text-overflow:ellipsis;margin:4px 0 11px;font-size:1.2rem}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description .mx_AccessibleButton_kind_link{font-size:inherit;padding:0}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description a{text-decoration:none}.mx_ToastContainer .mx_Toast_toast .mx_Toast_detail{color:#737d8c}.mx_ToastContainer .mx_Toast_toast .mx_Toast_deviceID{font-size:1rem}.mx_UploadBar{padding-left:65px;position:relative}.mx_UploadBar .mx_ProgressBar{width:calc(100% - 40px)}.mx_UploadBar_filename{margin-top:5px;color:#61708b;position:relative;padding-left:22px;font-size:1.5rem;vertical-align:middle}.mx_UploadBar_filename:before{content:"";height:18px;width:18px;left:0;-webkit-mask-image:url(../../img/element-icons/upload.e2a53e0.svg);mask-image:url(../../img/element-icons/upload.e2a53e0.svg)}.mx_UploadBar_cancel,.mx_UploadBar_filename:before{position:absolute;top:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#61708b}.mx_UploadBar_cancel{right:0;height:16px;width:16px;margin-right:16px;-webkit-mask-image:url(../../img/icons-close.11ff07c.svg);mask-image:url(../../img/icons-close.11ff07c.svg)}.mx_UserMenu{padding-right:6px}.mx_UserMenu.mx_UserMenu_prototype{margin-bottom:6px;padding-right:0}.mx_UserMenu.mx_UserMenu_prototype .mx_UserMenu_headerButtons{margin-right:2px}.mx_UserMenu.mx_UserMenu_prototype:after{content:"";border-bottom:1px solid #2e2f32;opacity:.2;display:block;padding-top:8px}.mx_UserMenu .mx_UserMenu_headerButtons{width:16px;height:16px;position:relative;display:block}.mx_UserMenu .mx_UserMenu_headerButtons:before{content:"";width:16px;height:16px;position:absolute;top:0;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_UserMenu .mx_UserMenu_row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer{position:relative;margin-right:8px;height:32px;padding:3px 0}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer .mx_UserMenu_userAvatar{border-radius:32px;-o-object-fit:cover;object-fit:cover}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName,.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_userName{display:block}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName{color:#61708b;font-size:1.3rem;line-height:1.8rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userName{font-weight:600;font-size:1.5rem;line-height:2rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd{width:24px;height:24px;margin-right:8px;position:relative}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd:before{content:"";position:absolute;width:24px;height:24px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#61708b}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_noisy:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_muted:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg)}.mx_UserMenu.mx_UserMenu_minimized{padding-right:0}.mx_UserMenu.mx_UserMenu_minimized .mx_UserMenu_userAvatarContainer{margin-right:0}.mx_UserMenu_contextMenu{width:258px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype{padding-bottom:16px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype .mx_UserMenu_contextMenu_header{padding-bottom:0;padding-top:16px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype .mx_UserMenu_contextMenu_header:nth-child(n+2){padding-top:8px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype hr{width:85%;opacity:.2;border:none;border-bottom:1px solid #2e2f32}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList{margin-top:4px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList:before{border:none}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList>.mx_AccessibleButton{padding-top:2px;padding-bottom:2px}.mx_UserMenu_contextMenu.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton{padding-top:16px;padding-bottom:16px}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header{padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:calc(100% - 40px)}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name *{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_displayName{font-weight:700;font-size:1.5rem;line-height:2rem}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_userId{font-size:1.5rem;line-height:2.4rem}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_themeButton{min-width:32px;max-width:32px;width:32px;height:32px;margin-left:8px;border-radius:32px;background-color:#e3e8f0;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts,.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_hostingLink{padding-top:0}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts{display:inline-block}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts>span{font-weight:600;display:block}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts>span+span{margin-top:8px}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts .mx_AccessibleButton_kind_link{font-weight:400;font-size:inherit;padding:0}.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon{width:16px;height:16px;display:block}.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon:before{content:"";width:16px;height:16px;display:block;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_UserMenu_contextMenu .mx_UserMenu_iconHome:before{-webkit-mask-image:url(../../img/element-icons/roomlist/home.1b4edd5.svg);mask-image:url(../../img/element-icons/roomlist/home.1b4edd5.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconHosting:before{-webkit-mask-image:url(../../img/element-icons/brands/element.182040d.svg);mask-image:url(../../img/element-icons/brands/element.182040d.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconBell:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconLock:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconArchive:before{-webkit-mask-image:url(../../img/element-icons/roomlist/archived.226584d.svg);mask-image:url(../../img/element-icons/roomlist/archived.226584d.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconMessage:before{-webkit-mask-image:url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);mask-image:url(../../img/element-icons/roomlist/feedback.b9a3f53.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconSignOut:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconMembers:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_ViewSource_separator{clear:both;border-bottom:1px solid #e5e5e5;padding-top:.7em;padding-bottom:.7em}.mx_ViewSource_heading{font-size:1.7rem;font-weight:400;color:#2e2f32;margin-top:.7em}.mx_ViewSource pre{text-align:left;font-size:1.2rem;padding:.5em 1em;word-wrap:break-word;white-space:pre-wrap}.mx_ViewSource_details{margin-top:.8em}.mx_CompleteSecurity_header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CompleteSecurity_headerIcon{width:24px;height:24px;margin-right:4px;position:relative}.mx_CompleteSecurity_heroIcon{width:128px;height:128px;position:relative;margin:0 auto}.mx_CompleteSecurity_body{font-size:1.5rem}.mx_CompleteSecurity_waiting{color:#8d99a5}.mx_CompleteSecurity_actionRow{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:2.8rem}.mx_CompleteSecurity_actionRow .mx_AccessibleButton{-webkit-margin-start:18px;margin-inline-start:18px}.mx_CompleteSecurity_actionRow .mx_AccessibleButton.warning{color:#ff4b55}.mx_Login_submit{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;width:100%;margin-top:24px;margin-bottom:24px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center}.mx_Login_submit:disabled{opacity:.3;cursor:default}.mx_Login_loader{display:inline;position:relative;top:2px;left:8px}.mx_Login_loader .mx_Spinner{display:inline}.mx_Login_loader .mx_Spinner img{width:16px;height:16px}.mx_Login_error{color:#ff4b55;font-weight:700;text-align:center;margin-top:12px;margin-bottom:12px}.mx_Login_error.mx_Login_serverError{text-align:left;font-weight:400}.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal{color:#ff8d13}.mx_Login_type_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#232f32}.mx_Login_type_container .mx_Field{margin:0}.mx_Login_type_label{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_Login_underlinedServerName{width:-webkit-max-content;width:-moz-max-content;width:max-content;border-bottom:1px dashed #0dbd8b}div.mx_AccessibleButton_kind_link.mx_Login_forgot{display:block;margin:0 auto;font-size:inherit;padding:0}div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_AuthBody{width:500px;font-size:1.2rem;color:#61708b;background-color:#fff;border-radius:0 4px 4px 0;padding:25px 60px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AuthBody h2{font-size:2.4rem;font-weight:600;margin-top:8px;color:#232f32}.mx_AuthBody h3{font-size:1.4rem;font-weight:600;color:#61708b}.mx_AuthBody h3.mx_AuthBody_centered{text-align:center}.mx_AuthBody a:hover,.mx_AuthBody a:link,.mx_AuthBody a:visited{color:#0dbd8b;text-decoration:none}.mx_AuthBody input[type=password],.mx_AuthBody input[type=text]{color:#232f32}.mx_AuthBody .mx_Field input,.mx_AuthBody .mx_Field select{color:#232f32;background-color:#fff}.mx_AuthBody .mx_Field label{color:#232f32}.mx_AuthBody .mx_Field input:not(:-moz-placeholder-shown)+label,.mx_AuthBody .mx_Field textarea:not(:-moz-placeholder-shown)+label{background-color:#fff}.mx_AuthBody .mx_Field input:not(:-ms-input-placeholder)+label,.mx_AuthBody .mx_Field textarea:not(:-ms-input-placeholder)+label{background-color:#fff}.mx_AuthBody .mx_Field_labelAlwaysTopLeft label,.mx_AuthBody .mx_Field input:focus+label,.mx_AuthBody .mx_Field input:not(:placeholder-shown)+label,.mx_AuthBody .mx_Field select+label,.mx_AuthBody .mx_Field textarea:focus+label,.mx_AuthBody .mx_Field textarea:not(:placeholder-shown)+label{background-color:#fff}.mx_AuthBody input.error{color:#ff4b55}.mx_AuthBody .mx_Field input{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AuthBody .mx_Field_select:before{background-color:#232f32}.mx_AuthBody .mx_Dropdown{color:#232f32}.mx_AuthBody .mx_Dropdown_arrow{background:#232f32}.mx_AuthBody .mx_Dropdown_menu{background-color:#fff}.mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight{background-color:#ddd}.mx_AuthBody_fieldRow{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:10px}.mx_AuthBody_fieldRow>.mx_Field{margin:0 5px}.mx_AuthBody_fieldRow>.mx_Field:first-child{margin-left:0}.mx_AuthBody_fieldRow>.mx_Field:last-child{margin-right:0}.mx_AuthBody_paddedFooter{height:80px;padding-top:28px;text-align:center}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title{margin-top:16px;font-size:1.5rem;line-height:2.4rem}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title .mx_InlineSpinner img{vertical-align:sub;margin-right:5px}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_subtitle{margin-top:8px;font-size:1rem;line-height:1.4rem}.mx_AuthBody_changeFlow{display:block;text-align:center;width:100%}.mx_AuthBody_changeFlow>a{font-weight:600}.mx_SSOButtons+.mx_AuthBody_changeFlow{margin-top:24px}.mx_AuthBody_spinner{margin:1em 0}@media only screen and (max-width:480px){.mx_AuthBody{border-radius:4px;width:auto;max-width:500px;padding:10px}}.mx_AuthButtons{min-height:24px;height:unset!important;padding-top:13px!important;padding-bottom:14px!important;-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.mx_AuthButtons_loginButton_wrapper{text-align:center;width:100%}.mx_AuthButtons_loginButton,.mx_AuthButtons_registerButton{margin-top:3px;height:40px;border:0;border-radius:40px;margin-left:4px;margin-right:4px;min-width:80px;background-color:#0dbd8b;color:#fff;cursor:pointer;font-size:1.5rem;padding:0 11px;word-break:break-word}.mx_AuthFooter{text-align:center;width:100%;font-size:1.4rem;opacity:.72;padding:20px 0;background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.8)));background:linear-gradient(transparent,rgba(0,0,0,.8))}.mx_AuthFooter a:hover,.mx_AuthFooter a:link,.mx_AuthFooter a:visited{color:#fff;margin:0 22px}.mx_AuthHeader{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:206px;padding:25px;-webkit-box-sizing:border-box;box-sizing:border-box}@media only screen and (max-width:480px){.mx_AuthHeader{display:none}}.mx_AuthHeaderLogo{margin-top:15px;-webkit-box-flex:1;-ms-flex:1;flex:1;padding:0 25px}.mx_AuthHeaderLogo img{width:100%}@media only screen and (max-width:480px){.mx_AuthHeaderLogo{display:none}}.mx_AuthPage{width:100%;min-height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#2e3649}.mx_AuthPage,.mx_AuthPage_modal{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_AuthPage_modal{margin:100px auto auto;border-radius:4px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.33);box-shadow:0 2px 4px 0 rgba(0,0,0,.33);background-color:hsla(0,0%,96.1%,.9)}@media only screen and (max-width:480px){.mx_AuthPage_modal{margin-top:0}}.mx_CompleteSecurityBody{width:600px;color:#232f32;background-color:#fff;border-radius:4px;padding:20px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_CompleteSecurityBody h2{font-size:2.4rem;font-weight:600;margin-top:0}.mx_CompleteSecurityBody h3{font-size:1.4rem;font-weight:600}.mx_CompleteSecurityBody a:hover,.mx_CompleteSecurityBody a:link,.mx_CompleteSecurityBody a:visited{color:#0dbd8b;text-decoration:none}.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option{padding:0 3px}.mx_CountryDropdown .mx_Dropdown_arrow{padding-right:3px}.mx_CountryDropdown_shortOption{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:100%}.mx_CountryDropdown_option,.mx_CountryDropdown_shortOption{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CountryDropdown_option{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_InteractiveAuthEntryComponents_emailWrapper{padding-right:100px;position:relative;margin-top:32px;margin-bottom:32px}.mx_InteractiveAuthEntryComponents_emailWrapper:after,.mx_InteractiveAuthEntryComponents_emailWrapper:before{position:absolute;width:116px;height:116px;content:"";right:-10px}.mx_InteractiveAuthEntryComponents_emailWrapper:before{background-color:rgba(244,246,250,.91);border-radius:50%;top:-20px}.mx_InteractiveAuthEntryComponents_emailWrapper:after{background-image:url(../../img/element-icons/email-prompt.1d04dfe.svg);background-repeat:no-repeat;background-position:50%;background-size:contain;top:-25px}.mx_InteractiveAuthEntryComponents_msisdnWrapper{text-align:center}.mx_InteractiveAuthEntryComponents_msisdnEntry{font-size:200%;font-weight:700;border:1px solid #c7c7c7;border-radius:3px;width:6em}.mx_InteractiveAuthEntryComponents_msisdnEntry:focus{border:1px solid #0dbd8b}.mx_InteractiveAuthEntryComponents_msisdnSubmit{margin-top:4px;margin-bottom:5px}.mx_InteractiveAuthEntryComponents_termsSubmit{margin-top:20px;margin-bottom:5px;display:block;width:100%}.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled{background-color:#747474;cursor:default}.mx_InteractiveAuthEntryComponents_termsSubmit:disabled{background-color:#92caad;cursor:default}.mx_InteractiveAuthEntryComponents_termsPolicy{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_InteractiveAuthEntryComponents_passwordSection{width:300px}.mx_InteractiveAuthEntryComponents_sso_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:20px}.mx_InteractiveAuthEntryComponents_sso_buttons .mx_AccessibleButton{margin-left:5px}.mx_AuthBody_language{width:100%}.mx_AuthBody_language .mx_Dropdown_input{border:none;font-size:1.4rem;font-weight:600;color:#4e5054;width:auto}.mx_AuthBody_language .mx_Dropdown_arrow{background:#4e5054}progress.mx_PassphraseField_progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;border:0;height:4px;position:absolute;top:-12px;border-radius:"2px"}progress.mx_PassphraseField_progress::-moz-progress-bar{border-radius:"2px"}progress.mx_PassphraseField_progress::-webkit-progress-bar,progress.mx_PassphraseField_progress::-webkit-progress-value{border-radius:"2px"}progress.mx_PassphraseField_progress{color:#ff4b55}progress.mx_PassphraseField_progress::-moz-progress-bar{background-color:#ff4b55}progress.mx_PassphraseField_progress::-webkit-progress-value{background-color:#ff4b55}progress.mx_PassphraseField_progress[value="2"],progress.mx_PassphraseField_progress[value="3"]{color:#ff812d}progress.mx_PassphraseField_progress[value="2"]::-moz-progress-bar,progress.mx_PassphraseField_progress[value="3"]::-moz-progress-bar{background-color:#ff812d}progress.mx_PassphraseField_progress[value="2"]::-webkit-progress-value,progress.mx_PassphraseField_progress[value="3"]::-webkit-progress-value{background-color:#ff812d}progress.mx_PassphraseField_progress[value="4"]{color:#0dbd8b}progress.mx_PassphraseField_progress[value="4"]::-moz-progress-bar{background-color:#0dbd8b}progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value{background-color:#0dbd8b}.mx_Welcome{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Welcome.mx_WelcomePage_registrationDisabled .mx_ButtonCreateAccount{display:none}.mx_Welcome .mx_AuthBody_language{width:160px;margin-bottom:10px}.mx_BaseAvatar{position:relative;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_BaseAvatar_initial{position:absolute;left:0;color:#fff;text-align:center;speak:none;pointer-events:none;font-weight:400}.mx_BaseAvatar_image{-o-object-fit:cover;object-fit:cover;border-radius:125px;vertical-align:top;background-color:#fff}.mx_DecoratedRoomAvatar,.mx_ExtraTile{position:relative}.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar,.mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar{-webkit-mask-image:url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);mask-image:url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon{position:absolute;bottom:-2px;right:-2px;margin:4px;width:8px;height:8px;border-radius:50%}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon:before{content:"";width:8px;height:8px;position:absolute;border-radius:8px}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe:before{-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#737d8c;-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_offline:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_offline:before{background-color:#e3e8f0}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online:before{background-color:#0dbd8b}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_away:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_away:before{background-color:#d9b072}.mx_DecoratedRoomAvatar .mx_NotificationBadge,.mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer,.mx_ExtraTile .mx_NotificationBadge,.mx_ExtraTile .mx_RoomTile_badgeContainer{position:absolute;top:0;right:0;height:18px;width:18px}.mx_MessageComposer_avatar .mx_BaseAvatar{padding:2px;border:1px solid transparent;border-radius:100%}.mx_MessageComposer_avatar .mx_BaseAvatar_initial{left:2px}.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar{border-color:#0dbd8b}@-webkit-keyframes shadow-pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(13,189,139,.2);box-shadow:0 0 0 0 rgba(13,189,139,.2)}to{-webkit-box-shadow:0 0 0 6px rgba(13,189,139,0);box-shadow:0 0 0 6px rgba(13,189,139,0)}}@keyframes shadow-pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(13,189,139,.2);box-shadow:0 0 0 0 rgba(13,189,139,.2)}to{-webkit-box-shadow:0 0 0 6px rgba(13,189,139,0);box-shadow:0 0 0 6px rgba(13,189,139,0)}}.mx_PulsedAvatar img{-webkit-animation:shadow-pulse 1s infinite;animation:shadow-pulse 1s infinite}.mx_WidgetAvatar{border-radius:4px}.mx_BetaCard{margin-bottom:20px;padding:24px;background-color:#f4f6fa;border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_BetaCard>div .mx_BetaCard_title{font-weight:600;font-size:1.8rem;line-height:2.2rem;color:#2e2f32;margin:4px 0 14px}.mx_BetaCard>div .mx_BetaCard_title .mx_BetaCard_betaPill{margin-left:12px}.mx_BetaCard>div .mx_BetaCard_caption{font-size:1.5rem;line-height:2rem;color:#737d8c;margin-bottom:20px}.mx_BetaCard>div .mx_AccessibleButton{display:block;margin:12px 0;padding:7px 40px;width:auto}.mx_BetaCard>div .mx_BetaCard_disclaimer{font-size:1.2rem;line-height:1.5rem;color:#737d8c;margin-top:20px}.mx_BetaCard>img{margin:auto 0 auto 20px;width:300px;-o-object-fit:contain;object-fit:contain;height:100%}.mx_BetaCard_betaPill{background-color:#238cf5;padding:4px 10px;border-radius:8px;text-transform:uppercase;font-size:12px;line-height:15px;color:#fff;display:inline-block;vertical-align:text-bottom}.mx_BetaCard_betaPill.mx_BetaCard_betaPill_clickable{cursor:pointer}.mx_BetaDot{border-radius:50%;margin:10px;height:12px;width:12px;-webkit-transform:scale(1);transform:scale(1);background:#238cf5;-webkit-box-shadow:0 0 0 0 #238cf5;box-shadow:0 0 0 0 #238cf5;-webkit-animation:mx_Beta_bluePulse 2s infinite;animation:mx_Beta_bluePulse 2s infinite;-webkit-animation-iteration-count:20;animation-iteration-count:20}@-webkit-keyframes mx_Beta_bluePulse{0%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,.7);box-shadow:0 0 0 0 rgba(35,140,245,.7)}70%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:0 0 0 10px rgba(35,140,245,0);box-shadow:0 0 0 10px rgba(35,140,245,0)}to{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,0);box-shadow:0 0 0 0 rgba(35,140,245,0)}}@keyframes mx_Beta_bluePulse{0%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,.7);box-shadow:0 0 0 0 rgba(35,140,245,.7)}70%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:0 0 0 10px rgba(35,140,245,0);box-shadow:0 0 0 10px rgba(35,140,245,0)}to{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,0);box-shadow:0 0 0 0 rgba(35,140,245,0)}}.mx_CallContextMenu_item{width:205px;height:40px;padding-left:16px;line-height:40px;vertical-align:center}.mx_IconizedContextMenu{min-width:146px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList>*{padding-left:20px;padding-right:20px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_optionList_notFirst:before,.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:nth-child(n+2):before{border-top:1px solid #2e2f32;opacity:.1;content:"";width:100%;position:absolute;left:0}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:first-child .mx_AccessibleButton:first-child{border-radius:8px 8px 0 0}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_AccessibleButton:last-child{border-radius:0 0 8px 8px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton{padding-top:12px;padding-bottom:12px;text-decoration:none;color:#2e2f32;font-size:1.5rem;line-height:2.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton:hover{background-color:#f5f8fa}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_AccessibleButton_disabled{opacity:.5;cursor:not-allowed}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton .mx_IconizedContextMenu_icon,.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton img{width:16px;min-width:16px;max-width:16px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton span.mx_IconizedContextMenu_label{width:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton .mx_IconizedContextMenu_icon+.mx_IconizedContextMenu_label{padding-left:14px}.mx_IconizedContextMenu .mx_IconizedContextMenu_icon{position:relative;width:16px;height:16px}.mx_IconizedContextMenu .mx_IconizedContextMenu_icon:before{content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton{color:#ff4b55!important}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_IconizedContextMenu_icon:before{background-color:#ff4b55}.mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_AccessibleButton,.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_AccessibleButton{color:#0dbd8b!important}.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_IconizedContextMenu_icon:before{background-color:#0dbd8b}.mx_IconizedContextMenu.mx_IconizedContextMenu_compact .mx_IconizedContextMenu_optionList>*{padding:8px 16px 8px 11px}.mx_IconizedContextMenu .mx_IconizedContextMenu_checked{margin-left:16px;margin-right:-5px}.mx_IconizedContextMenu .mx_IconizedContextMenu_checked:before{-webkit-mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg)}.mx_MessageContextMenu{padding:6px}.mx_MessageContextMenu_field{display:block;padding:3px 6px;cursor:pointer;white-space:nowrap}.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet{font-weight:700}.mx_StatusMessageContextMenu{padding:10px}.mx_StatusMessageContextMenu_form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}input.mx_StatusMessageContextMenu_message{border-radius:4px;border:1px solid #e7e7e7;padding:6.5px 11px;background-color:#fff;font-weight:400;margin:0 0 10px}.mx_StatusMessageContextMenu_message::-webkit-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::-moz-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message:-ms-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::-ms-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::placeholder{color:#61708b}.mx_StatusMessageContextMenu_actionContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_StatusMessageContextMenu_clear,.mx_StatusMessageContextMenu_submit{vertical-align:middle;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;cursor:pointer;display:inline-block;outline:none;-ms-flex-item-align:start;align-self:start;font-size:1.2rem;padding:6px 1em;border:1px solid transparent;margin-right:10px}.mx_StatusMessageContextMenu_submit[disabled]{opacity:.49}.mx_StatusMessageContextMenu_clear{color:#ff4b55;background-color:transparent;border:1px solid #ff4b55}.mx_StatusMessageContextMenu_actionContainer .mx_Spinner{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_TagTileContextMenu_item{padding:8px 20px 8px 8px;cursor:pointer;white-space:nowrap;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.6rem}.mx_TagTileContextMenu_item:before{content:"";height:15px;width:15px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;margin-right:8px}.mx_TagTileContextMenu_viewCommunity:before{-webkit-mask-image:url(../../img/element-icons/view-community.0cad1a5.svg);mask-image:url(../../img/element-icons/view-community.0cad1a5.svg)}.mx_TagTileContextMenu_hideCommunity:before{-webkit-mask-image:url(../../img/element-icons/hide.2b52315.svg);mask-image:url(../../img/element-icons/hide.2b52315.svg)}.mx_TagTileContextMenu_separator{margin-top:0;margin-bottom:0;border-style:none;border-top:1px solid;border-color:#e7e7e7}.mx_AddExistingToSpaceDialog_wrapper .mx_Dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_AddExistingToSpace .mx_SearchBox{margin:0 0 15px;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.mx_AddExistingToSpace .mx_AddExistingToSpace_content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_AddExistingToSpace .mx_AddExistingToSpace_noResults{display:block;margin-top:24px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section:not(:first-child){margin-top:24px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section>h3{margin:0;color:#737d8c;font-size:1.2rem;font-weight:600;line-height:1.5rem}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_DecoratedRoomAvatar{margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_AddExistingToSpace_entry_name{font-size:1.5rem;line-height:30px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_Checkbox{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar{margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar_image{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental{position:relative;border-radius:8px;margin:12px 0;padding:8px 8px 8px 42px;background-color:#f3f8fd;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental:before{content:"";position:absolute;left:10px;top:calc(50% - 8px);height:16px;width:16px;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:20px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar{height:8px;width:100%;border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-moz-progress-bar{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-webkit-progress-bar,.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-webkit-progress-value{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_AddExistingToSpace_progressText{margin-top:8px;font-size:1.5rem;line-height:2.4rem;color:#2e2f32}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span>*{vertical-align:middle}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error{padding-left:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error>img{-ms-flex-item-align:center;align-self:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorHeading{font-weight:600;font-size:1.5rem;line-height:1.8rem;color:#ff4b55}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorCaption{margin-top:4px;font-size:1.2rem;line-height:1.5rem;color:#2e2f32}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton{display:inline-block;-ms-flex-item-align:center;align-self:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton_kind_primary{padding:8px 36px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton{margin-left:12px;padding-left:24px;position:relative}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton:before{content:"";position:absolute;background-color:#2e2f32;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg);width:18px;height:18px;left:0}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton_kind_link{padding:0}.mx_AddExistingToSpaceDialog{width:480px;color:#2e2f32;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;min-height:0;height:80vh}.mx_AddExistingToSpaceDialog,.mx_AddExistingToSpaceDialog .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar_image{border-radius:8px;margin:0;vertical-align:unset}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin:auto 16px auto 5px;vertical-align:middle}.mx_AddExistingToSpaceDialog .mx_Dialog_title>div>h1{font-weight:600;font-size:1.8rem;line-height:2.2rem;margin:0}.mx_AddExistingToSpaceDialog .mx_Dialog_title>div .mx_AddExistingToSpaceDialog_onlySpace{color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input{border:none}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input>.mx_Dropdown_option{padding-left:0;-webkit-box-flex:unset;-ms-flex:unset;flex:unset;height:unset;color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input>.mx_Dropdown_option .mx_BaseAvatar{display:none}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input .mx_Dropdown_menu .mx_AddExistingToSpaceDialog_dropdownOptionActive{color:#0dbd8b;padding-right:32px;position:relative}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input .mx_Dropdown_menu .mx_AddExistingToSpaceDialog_dropdownOptionActive:before{content:"";width:20px;height:20px;top:8px;right:0;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#0dbd8b;-webkit-mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg)}.mx_AddExistingToSpaceDialog .mx_AddExistingToSpace{display:contents}.mx_AddressPickerDialog a:hover,.mx_AddressPickerDialog a:link,.mx_AddressPickerDialog a:visited{color:#0dbd8b;text-decoration:none}.mx_AddressPickerDialog_input,.mx_AddressPickerDialog_input:focus{height:26px;font-size:1.4rem;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;padding-left:12px;padding-right:12px;margin:0!important;border:0!important;outline:0!important;width:1000%;resize:none;overflow:hidden;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box;word-wrap:nowrap}.mx_AddressPickerDialog .mx_Dialog_content{min-height:50px}.mx_AddressPickerDialog_inputContainer{border-radius:3px;border:1px solid #e7e7e7;line-height:3.6rem;padding:1px 4px;max-height:150px;overflow-x:hidden;overflow-y:auto}.mx_AddressPickerDialog_error{margin-top:10px;color:#ff4b55}.mx_AddressPickerDialog_cancel{position:absolute;right:11px;top:13px;cursor:pointer}.mx_AddressPickerDialog_cancel object{pointer-events:none}.mx_AddressPickerDialog_identityServer{margin-top:1em}.mx_AnalyticsModal table{margin:10px 0}.mx_BetaFeedbackDialog .mx_BetaFeedbackDialog_subheading{color:#2e2f32;font-size:1.4rem;line-height:2rem;margin-bottom:24px}.mx_BetaFeedbackDialog .mx_AccessibleButton_kind_link{padding:0;font-size:inherit;line-height:inherit}.mx_BugReportDialog .mx_BugReportDialog_download .mx_AccessibleButton_kind_link{padding-left:0}.mx_ChangelogDialog_content{max-height:300px;overflow:auto}.mx_ChangelogDialog_li{padding:.2em}.mx_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles{margin-top:24px}.mx_ChatCreateOrReuseDialog .mx_Dialog_content{margin-bottom:24px;min-height:100px}.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge{display:none}.mx_ChatCreateOrReuseDialog_profile{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ChatCreateOrReuseDialog_profile_name{padding:14px}.mx_CommunityPrototypeInviteDialog.mx_Dialog_fixedWidth{width:360px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content{margin-bottom:0}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_people{position:relative;margin-bottom:4px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_people .mx_AccessibleButton{display:inline-block;background-color:#ddd;border-radius:4px;padding:3px 5px;font-size:1.2rem;float:right}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_morePeople{margin-top:8px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person{position:relative;margin-top:4px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person>*{vertical-align:middle}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_Checkbox{position:absolute;right:0;top:calc(50% - 8px);width:16px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers{display:inline-block}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers>*{display:block}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers .mx_CommunityPrototypeInviteDialog_personName{font-weight:600;font-size:1.4rem;color:#2e2f32;margin-left:7px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers .mx_CommunityPrototypeInviteDialog_personId{font-size:1.2rem;color:#61708b;margin-left:7px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_primaryButton{display:block;font-size:1.3rem;line-height:20px;height:20px;margin-top:24px}.mx_ConfirmUserActionDialog .mx_Dialog_content{min-height:48px;margin-bottom:24px}.mx_ConfirmUserActionDialog_avatar{float:left;margin-right:20px;margin-top:-2px}.mx_ConfirmUserActionDialog_name{font-size:1.8rem}.mx_ConfirmUserActionDialog_userId{font-size:1.3rem}.mx_ConfirmUserActionDialog_reasonField{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#2e2f32;background-color:#fff;border-radius:3px;border:1px solid #e7e7e7;line-height:3.6rem;padding:1px 16px;margin-bottom:24px;width:90%}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:12px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName{-ms-flex-preferred-size:66.66%;flex-basis:66.66%;padding-right:100px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_Field input{font-size:1.6rem;line-height:2rem}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext{display:block;color:#61708b;margin-bottom:16px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext:last-child{margin-top:16px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext.mx_CreateCommunityPrototypeDialog_subtext_error{color:#ff4b55}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_communityId{position:relative}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_communityId .mx_InfoTooltip{float:right}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_AccessibleButton{display:block;height:32px;font-size:1.6rem;line-height:32px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar{-ms-flex-preferred-size:33.33%;flex-basis:33.33%}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer{margin-top:12px;margin-bottom:20px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_avatar,.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar{width:96px;height:96px;border-radius:96px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar{background-color:#368bd6}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar:before{display:inline-block;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:96px;mask-size:96px;width:96px;height:96px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg);mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg)}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_tip>b,.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_tip>span{display:block;color:#61708b}.mx_CreateGroupDialog_inputRow{margin-top:10px;margin-bottom:10px}.mx_CreateGroupDialog_label{text-align:left;padding-bottom:12px}.mx_CreateGroupDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff}.mx_CreateGroupDialog_input_hasPrefixAndSuffix{border-radius:0}.mx_CreateGroupDialog_input_group{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateGroupDialog_prefix,.mx_CreateGroupDialog_suffix{padding:0 5px;line-height:3.7rem;background-color:#e3e8f0;border:1px solid #e7e7e7;text-align:center}.mx_CreateGroupDialog_prefix{border-right:0;border-radius:3px 0 0 3px}.mx_CreateGroupDialog_suffix{border-left:0;border-radius:0 3px 3px 0}.mx_CreateRoomDialog_details{margin-top:15px}.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary{outline:none;list-style:none;font-weight:600;cursor:pointer;color:#0dbd8b}.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary::-webkit-details-marker{display:none}.mx_CreateRoomDialog_details>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin:5px 0}.mx_CreateRoomDialog_details>div input[type=checkbox]{margin-right:10px}.mx_CreateRoomDialog_label{text-align:left;padding-bottom:12px}.mx_CreateRoomDialog_input_container{padding-right:20px}.mx_CreateRoomDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff;width:100%}.mx_CreateRoomDialog_aliasContainer{display:-webkit-box;display:-ms-flexbox;display:flex;margin:10px 0}.mx_CreateRoomDialog_aliasContainer .mx_RoomAliasField{margin:0}.mx_CreateRoomDialog.mx_Dialog_fixedWidth{width:450px}.mx_CreateRoomDialog .mx_Dialog_content{margin-bottom:40px}.mx_CreateRoomDialog .mx_Field_input label,.mx_CreateRoomDialog p{color:#61708b}.mx_CreateRoomDialog .mx_SettingsFlag{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateRoomDialog .mx_SettingsFlag_label{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;font-weight:600}.mx_CreateRoomDialog .mx_ToggleSwitch{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:30px}.mx_CreateRoomDialog .mx_CreateRoomDialog_topic{margin-bottom:36px}.mx_CreateRoomDialog .mx_Dialog_content>.mx_SettingsFlag{margin-top:24px}.mx_CreateRoomDialog p{margin:0 85px 0 0;font-size:1.2rem}.mx_DeactivateAccountDialog .mx_Dialog_content{margin-bottom:30px}.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section{margin-top:60px}.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field{width:300px}.mx_DevTools_content{margin:10px 0}.mx_DevTools_ServersInRoomList_button{cursor:default!important}.mx_DevTools_RoomStateExplorer_query{margin-bottom:10px}.mx_DevTools_RoomStateExplorer_button,.mx_DevTools_ServersInRoomList_button{margin-bottom:10px;width:100%}.mx_DevTools_label_left{float:left}.mx_DevTools_label_right{float:right}.mx_DevTools_label_bottom{clear:both;border-bottom:1px solid #e5e5e5}.mx_DevTools_inputRow{display:table-row}.mx_DevTools_inputLabelCell{display:table-cell;font-weight:700;padding-right:24px}.mx_DevTools_inputCell{display:table-cell;width:240px}.mx_DevTools_inputCell input{display:inline-block;border:0;border-bottom:1px solid hsla(0,0%,59.2%,.5);padding:0;width:240px;color:rgba(74,74,74,.9);font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.6rem}.mx_DevTools_textarea{font-size:1.2rem;max-width:684px;min-height:250px;padding:10px}.mx_DevTools_eventTypeStateKeyGroup{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_DevTools_content .mx_Field_input:first-of-type{margin-right:42px}.mx_DevTools_tgl{display:none}.mx_DevTools_tgl,.mx_DevTools_tgl *,.mx_DevTools_tgl+.mx_DevTools_tgl-btn,.mx_DevTools_tgl:after,.mx_DevTools_tgl :after,.mx_DevTools_tgl:before,.mx_DevTools_tgl :before{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_DevTools_tgl+.mx_DevTools_tgl-btn::-moz-selection,.mx_DevTools_tgl::-moz-selection,.mx_DevTools_tgl ::-moz-selection,.mx_DevTools_tgl:after::-moz-selection,.mx_DevTools_tgl :after::-moz-selection,.mx_DevTools_tgl:before::-moz-selection,.mx_DevTools_tgl :before::-moz-selection{background:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn::selection,.mx_DevTools_tgl::selection,.mx_DevTools_tgl ::selection,.mx_DevTools_tgl:after::selection,.mx_DevTools_tgl :after::selection,.mx_DevTools_tgl:before::selection,.mx_DevTools_tgl :before::selection{background:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn{outline:0;display:block;width:7em;height:2em;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:after,.mx_DevTools_tgl+.mx_DevTools_tgl-btn:before{position:relative;display:block;content:"";width:50%;height:100%}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:after{left:0}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:before{display:none}.mx_DevTools_tgl:checked+.mx_DevTools_tgl-btn:after{left:50%}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn{padding:2px;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:sans-serif;-webkit-perspective:100px;perspective:100px}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:after,.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:before{display:inline-block;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:4px}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:after{content:attr(data-tg-on);background:#02c66f;-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:before{background:#ff3a19;content:attr(data-tg-off)}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:active:before{-webkit-transform:rotateY(-20deg);transform:rotateY(-20deg)}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:after{-webkit-transform:rotateY(0);transform:rotateY(0);left:0;background:#7fc6a6}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:active:after{-webkit-transform:rotateY(20deg);transform:rotateY(20deg)}.mx_DevTools_VerificationRequest{border:1px solid #ccc;border-radius:3px;padding:1px 5px;margin-bottom:6px;font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji}.mx_DevTools_VerificationRequest dl{display:grid;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto;margin:0}.mx_DevTools_VerificationRequest dd{grid-column-start:2}.mx_DevTools_VerificationRequest dd:empty{color:#666}.mx_DevTools_VerificationRequest dd:empty:after{content:"(empty)"}.mx_DevTools_VerificationRequest dt{font-weight:700;grid-column-start:1}.mx_DevTools_VerificationRequest dt:after{content:":"}.mx_DevTools_SettingsExplorer table{width:100%;table-layout:fixed;border-collapse:collapse}.mx_DevTools_SettingsExplorer table th{border-bottom:1px solid #0dbd8b;text-align:left}.mx_DevTools_SettingsExplorer table td,.mx_DevTools_SettingsExplorer table th{width:360px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_DevTools_SettingsExplorer table td+td,.mx_DevTools_SettingsExplorer table th+th{width:auto}.mx_DevTools_SettingsExplorer table tr:hover{background-color:rgba(13,189,139,.5)}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_mutable{background-color:#0dbd8b}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_immutable{background-color:#ff4b55}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_edit{float:right;margin-right:16px}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_warning{border:2px solid #ff4b55;border-radius:4px;padding:4px;margin-bottom:8px}.mx_EditCommunityPrototypeDialog.mx_Dialog_fixedWidth{width:360px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content{margin-bottom:12px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_AccessibleButton.mx_AccessibleButton_kind_primary{display:block;height:32px;font-size:1.6rem;line-height:32px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_rowAvatar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer{margin-top:20px;margin-bottom:20px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_avatar,.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar{width:96px;height:96px;border-radius:96px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar{background-color:#368bd6}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar:before{display:inline-block;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:96px;mask-size:96px;width:96px;height:96px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg);mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg)}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip{margin-left:20px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip>b,.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip>span{display:block;color:#61708b}.mx_FeedbackDialog hr{margin:24px 0;border-color:#e7e7e7}.mx_FeedbackDialog .mx_Dialog_content{margin-bottom:24px}.mx_FeedbackDialog .mx_Dialog_content>h2{margin-bottom:32px}.mx_FeedbackDialog .mx_FeedbackDialog_section{position:relative;padding-left:52px}.mx_FeedbackDialog .mx_FeedbackDialog_section>p{color:#8d99a5}.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link,.mx_FeedbackDialog .mx_FeedbackDialog_section a{color:#0dbd8b;text-decoration:underline}.mx_FeedbackDialog .mx_FeedbackDialog_section:after,.mx_FeedbackDialog .mx_FeedbackDialog_section:before{content:"";position:absolute;width:40px;height:40px;left:0;top:0}.mx_FeedbackDialog .mx_FeedbackDialog_section:before{background-color:#c1c6cd;border-radius:20px}.mx_FeedbackDialog .mx_FeedbackDialog_section:after{background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:24px;mask-size:24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_FeedbackDialog .mx_FeedbackDialog_reportBug:after{-webkit-mask-image:url(../../img/feather-customised/bug.3dc7afa.svg);mask-image:url(../../img/feather-customised/bug.3dc7afa.svg)}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:20px;-webkit-transition:font-size 1s,border .5s;transition:font-size 1s,border .5s;border-radius:50%;border:2px solid transparent;margin-top:12px;margin-bottom:24px;vertical-align:top;cursor:pointer}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton input[type=radio]+div{display:none}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton .mx_RadioButton_content{background:#c1c6cd;width:40px;height:40px;text-align:center;line-height:40px;border-radius:20px;margin:5px}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton .mx_RadioButton_spacer{display:none}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton+.mx_RadioButton{margin-left:16px}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton_checked{font-size:24px;border-color:#0dbd8b}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp:after{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_GroupAddressPicker_checkboxContainer{margin-top:10px;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_HostSignupDialog{width:90vw;max-width:580px;height:80vh;max-height:600px;background-color:#fff}.mx_HostSignupDialog .mx_HostSignupDialog_info{text-align:center}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_content_top{margin-bottom:24px}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_paragraphs{text-align:left;padding-left:25%;padding-right:25%}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons{margin-bottom:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons button{padding:12px;margin:0 16px}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer img{padding-right:5px}.mx_HostSignupDialog iframe{width:100%;height:100%;border:none;background-color:#fff;min-height:540px}.mx_HostSignupDialog_text_dark{color:#2e2f32}.mx_HostSignupDialog_text_light{color:#737d8c}.mx_HostSignup_maximize_button{-webkit-mask:url(../../img/feather-customised/maximise.dc32127.svg);mask:url(../../img/feather-customised/maximise.dc32127.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;right:10px}.mx_HostSignup_maximize_button,.mx_HostSignup_minimize_button{width:14px;height:14px;background-color:#c1c1c1;cursor:pointer;position:absolute;top:10px}.mx_HostSignup_minimize_button{-webkit-mask:url(../../img/feather-customised/minimise.aec9142.svg);mask:url(../../img/feather-customised/minimise.aec9142.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;right:25px}.mx_HostSignup_persisted{width:90vw;max-width:580px;height:80vh;max-height:600px;top:0;left:0;position:fixed;display:none}.mx_HostSignupDialog_minimized{position:fixed;bottom:80px;right:26px;width:314px;height:217px;overflow:hidden}.mx_HostSignupDialog_minimized.mx_Dialog{padding:12px}.mx_HostSignupDialog_minimized .mx_Dialog_title{text-align:left!important;padding-left:20px;font-size:1.5rem}.mx_HostSignupDialog_minimized iframe{width:100%;height:100%;border:none;background-color:#fff}.mx_IncomingSasDialog_opponentProfile_image{position:relative}.mx_IncomingSasDialog_opponentProfile h2{display:inline-block;margin-left:10px}.mx_InviteDialog_addressBar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_InviteDialog_addressBar .mx_InviteDialog_editor{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;background-color:#f3f8fd;border-radius:4px;min-height:25px;padding-left:8px;overflow-x:hidden;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_InviteDialog_addressBar .mx_InviteDialog_editor .mx_InviteDialog_userTile{margin:6px 6px 0 0;display:inline-block;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mx_InviteDialog_addressBar .mx_InviteDialog_editor>input[type=text]{margin:6px 0!important;height:24px;line-height:2.4rem;font-size:1.4rem;padding-left:12px;border:0!important;outline:0!important;resize:none;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:40%;-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important;color:#2e2f32!important}.mx_InviteDialog_addressBar .mx_InviteDialog_goButton{min-width:48px;margin-left:10px;height:25px;line-height:2.5rem}.mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner .mx_Spinner{width:20px;height:20px;margin-left:5px;display:inline-block;vertical-align:middle}.mx_InviteDialog_section{padding-bottom:10px}.mx_InviteDialog_section h3{font-size:1.2rem;color:#61708b;font-weight:700;text-transform:uppercase}.mx_InviteDialog_section .mx_InviteDialog_subname{margin-bottom:10px;margin-top:-10px;font-size:1.2rem;color:#61708b}.mx_InviteDialog_roomTile{cursor:pointer;padding:5px 10px}.mx_InviteDialog_roomTile:hover{background-color:#f3f8fd;border-radius:4px}.mx_InviteDialog_roomTile *{vertical-align:middle}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack{display:inline-block;position:relative;width:36px;height:36px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack>*{position:absolute;top:0;left:0}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected{width:36px;height:36px;border-radius:36px;background-color:#368bd6;display:inline-block;position:relative}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected:before{content:"";width:24px;height:24px;grid-column:1;grid-row:1;-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;top:6px;left:6px;background-color:#fff}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_nameStack{display:inline-block}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_name{font-weight:600;font-size:1.4rem;color:#2e2f32;margin-left:7px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_userId{font-size:1.2rem;color:#61708b;margin-left:7px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_time{text-align:right;font-size:1.2rem;color:#61708b;float:right;line-height:3.6rem}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_highlight{font-weight:900}.mx_InviteDialog_userTile{margin-right:8px}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill{background-color:#368bd6;border-radius:12px;display:inline-block;height:24px;line-height:2.4rem;padding-left:8px;padding-right:8px;color:#fff}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_avatar{border-radius:20px;position:relative;left:-5px;top:2px}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name,.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill img.mx_InviteDialog_userTile_avatar{vertical-align:top}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_threepidAvatar{background-color:#fff}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove{display:inline-block;margin-left:4px}.mx_InviteDialog{height:590px;padding-left:20px}.mx_InviteDialog_userSections{margin-top:10px;overflow-y:auto;padding-right:45px;height:455px}.mx_InviteDialog_addressBar,.mx_InviteDialog_helpText{margin-right:45px}.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link{padding:0}.mx_KeyboardShortcutsDialog{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-bottom:-50px;max-height:1100px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category{width:33.3333%;margin:0 0 40px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category>div{padding-left:5px}.mx_KeyboardShortcutsDialog h3{margin:0 0 10px}.mx_KeyboardShortcutsDialog h5{margin:15px 0 5px;font-weight:400}.mx_KeyboardShortcutsDialog kbd{padding:5px;border-radius:4px;background-color:#f3f8fd;margin-right:5px;min-width:20px;text-align:center;display:inline-block;border:1px solid #e9edf1;-webkit-box-shadow:0 2px #e9edf1;box-shadow:0 2px #e9edf1;margin-bottom:4px;text-transform:capitalize}.mx_KeyboardShortcutsDialog kbd+kbd{margin-left:5px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_inline div{display:inline}.mx_MessageEditHistoryDialog .mx_Dialog_header>.mx_Dialog_title{text-align:center}.mx_MessageEditHistoryDialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-height:60vh}.mx_MessageEditHistoryDialog_scrollPanel{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.mx_MessageEditHistoryDialog_error{color:#ff4b55;text-align:center}.mx_MessageEditHistoryDialog_edits{list-style-type:none;font-size:1.4rem;padding:0;color:#2e2f32}.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_deletion,.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_insertion{padding:0 2px}.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_deletion{color:#ff4c55;background-color:rgba(255,76,85,.1);text-decoration:line-through}.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_insertion{color:#1aa97b;background-color:rgba(26,169,123,.1);text-decoration:underline}.mx_MessageEditHistoryDialog_edits .mx_EventTile_content,.mx_MessageEditHistoryDialog_edits .mx_EventTile_line{margin-right:0}.mx_MessageEditHistoryDialog_edits .mx_MessageActionBar .mx_AccessibleButton{font-size:1rem;padding:0 8px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning{margin-bottom:24px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning>img{vertical-align:middle;margin-right:8px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons{float:right;margin-top:24px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:8px}.mx_ModalWidgetDialog iframe{width:100%;height:450px;border:0;border-radius:8px}.mx_NewSessionReviewDialog_header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:0}.mx_NewSessionReviewDialog_headerIcon{width:24px;height:24px;margin-right:4px;position:relative}.mx_NewSessionReviewDialog_deviceName{font-weight:600}.mx_NewSessionReviewDialog_deviceID{font-size:1.2rem;color:#8d99a5}.mx_RegistrationEmailPromptDialog{width:417px}.mx_RegistrationEmailPromptDialog .mx_Dialog_content{margin-bottom:24px;color:#8d99a5}.mx_RegistrationEmailPromptDialog .mx_Dialog_primary{width:100%}.mx_RoomSettingsDialog_settingsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_RoomSettingsDialog_securityIcon:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_RoomSettingsDialog_rolesIcon:before{-webkit-mask-image:url(../../img/element-icons/room/settings/roles.bad9a9e.svg);mask-image:url(../../img/element-icons/room/settings/roles.bad9a9e.svg)}.mx_RoomSettingsDialog_notificationsIcon:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RoomSettingsDialog_bridgesIcon:before{-webkit-mask-image:url(../../img/feather-customised/bridge.b2ca042.svg);mask-image:url(../../img/feather-customised/bridge.b2ca042.svg)}.mx_RoomSettingsDialog_warningIcon:before{-webkit-mask-image:url(../../img/element-icons/room/settings/advanced.e079c15.svg);mask-image:url(../../img/element-icons/room/settings/advanced.e079c15.svg)}.mx_RoomSettingsDialog .mx_Dialog_title{-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 auto;padding-right:80px}.mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before{-webkit-mask:url(../../img/feather-customised/image.a8671b8.svg);mask:url(../../img/feather-customised/image.a8671b8.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:36px;mask-size:36px;-webkit-mask-position:center;mask-position:center}.mx_RoomSettingsDialog_BridgeList{padding:0}.mx_RoomSettingsDialog_BridgeList .mx_AccessibleButton{display:inline;margin:0;padding:0}.mx_RoomSettingsDialog_BridgeList li{list-style-type:none;padding:5px;margin-bottom:8px;border:1px solid transparent;border-radius:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon{float:left;padding-right:10px}.mx_RoomSettingsDialog_BridgeList li .column-icon *{border-radius:5px;border:1px solid #e3e8f0}.mx_RoomSettingsDialog_BridgeList li .column-icon .noProtocolIcon{width:48px;height:48px;background:#e3e8f0;border-radius:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon{float:left;margin-right:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon img{border-radius:5px;border-width:1px;border-color:transparent}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon span{left:auto}.mx_RoomSettingsDialog_BridgeList li .column-data{display:inline-block;width:85%}.mx_RoomSettingsDialog_BridgeList li .column-data>h3{margin-top:0;margin-bottom:0;font-size:16pt;color:#2e2f32}.mx_RoomSettingsDialog_BridgeList li .column-data>*{margin-top:4px;margin-bottom:0}.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details{color:#2e2f32;font-weight:600}.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details .channel{margin-left:5px}.mx_RoomSettingsDialog_BridgeList li .column-data .metadata{color:#61708b;margin-bottom:0;overflow-y:visible;text-overflow:ellipsis;white-space:normal;padding:0}.mx_RoomSettingsDialog_BridgeList li .column-data .metadata>li{padding:0;border:0}.mx_RoomUpgradeDialog{padding-right:70px}.mx_RoomUpgradeWarningDialog{max-width:38vw;width:38vw}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag{font-weight:700}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-left:8px;float:right}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content{padding-right:85px;color:#2e2f32}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content hr{border-color:#2e2f32;opacity:.1;border-bottom:none}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul{padding:16px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul li:nth-child(n+2){margin-top:16px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timestamp{display:inline-block;width:115px;color:#61708b;line-height:24px;vertical-align:top}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline{display:inline-block;width:calc(100% - 155px)}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_timeline_header span{margin-left:8px;vertical-align:middle}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn{position:relative;margin-top:8px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_ServerOfflineDialog_content_context_txn_desc{width:calc(100% - 100px)}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_AccessibleButton{float:right;padding:0}.mx_ServerPickerDialog{width:468px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ServerPickerDialog .mx_Dialog_content{margin-bottom:0}.mx_ServerPickerDialog .mx_Dialog_content>p{color:#737d8c;font-size:1.4rem;margin:16px 0}.mx_ServerPickerDialog .mx_Dialog_content>p:first-of-type{margin-bottom:40px}.mx_ServerPickerDialog .mx_Dialog_content>p:last-of-type{margin:0 24px 24px}.mx_ServerPickerDialog .mx_Dialog_content>h4{font-size:1.5rem;font-weight:600;color:#737d8c;margin-left:8px}.mx_ServerPickerDialog .mx_Dialog_content>a{color:#0dbd8b;margin-left:8px}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserverRadio input[type=radio]+div{margin-top:auto;margin-bottom:auto}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver{border-top:none;border-left:none;border-right:none;border-radius:unset}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver>input{padding-left:0}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver>label{margin-left:0}.mx_ServerPickerDialog .mx_AccessibleButton_kind_primary{width:calc(100% - 64px);margin:0 8px;padding:15px 18px}.mx_SetEmailDialog_email_input{border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:rgba(74,74,74,.9);background-color:#fff;font-size:1.5rem;width:100%;max-width:280px;margin-bottom:10px}.mx_SetEmailDialog_email_input:focus{outline:none;-webkit-box-shadow:none;box-shadow:none;border:1px solid #0dbd8b}.mx_RoomSettingsDialog,.mx_UserSettingsDialog{width:90vw;max-width:1000px;height:80vh}.mx_RoomSettingsDialog .mx_TabbedView,.mx_UserSettingsDialog .mx_TabbedView{top:65px}.mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab{-webkit-box-sizing:border-box;box-sizing:border-box;min-width:580px;padding-right:100px;padding-bottom:100px}.mx_RoomSettingsDialog .mx_Dialog_title,.mx_UserSettingsDialog .mx_Dialog_title{margin-bottom:24px}.mx_ShareDialog hr{margin-top:25px;margin-bottom:25px;border-color:#747474}.mx_ShareDialog_content{margin:10px 0}.mx_ShareDialog_matrixto{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-radius:5px;border:1px solid #747474;margin-bottom:10px;margin-top:30px;padding:10px}.mx_ShareDialog_matrixto a{text-decoration:none}.mx_ShareDialog_matrixto_link{-ms-flex-negative:1;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.mx_ShareDialog_matrixto_copy{-ms-flex-negative:0;flex-shrink:0;cursor:pointer;margin-left:20px;display:inherit}.mx_ShareDialog_matrixto_copy>div{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);background-color:#2e2f32;margin-left:5px;width:20px;height:20px;background-repeat:no-repeat}.mx_ShareDialog_split{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_ShareDialog_qrcode_container{float:left;height:256px;width:256px;margin-right:64px}.mx_ShareDialog_qrcode_container+.mx_ShareDialog_social_container{width:299px}.mx_ShareDialog_social_container{display:inline-block}.mx_ShareDialog_social_icon{display:inline-grid;margin-right:10px;margin-bottom:10px}.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2{margin-bottom:2px}.mx_SlashCommandHelpDialog .mx_Dialog_content{margin-top:12px;margin-bottom:34px}.mx_SpaceSettingsDialog{width:480px;color:#2e2f32}.mx_SpaceSettingsDialog .mx_SpaceSettings_errorText{font-weight:600;font-size:1.2rem;line-height:1.5rem;color:#ff4b55;margin-bottom:28px}.mx_SpaceSettingsDialog .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-left:16px}.mx_SpaceSettingsDialog .mx_AccessibleButton_kind_danger{margin-top:28px}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:64px}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton{display:inline-block}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton_kind_link{margin-left:auto}.mx_SpaceSettingsDialog .mx_AccessibleButton_hasKind{padding:8px 22px}.mx_TabbedIntegrationManagerDialog .mx_Dialog{width:60%;height:70%;overflow:hidden;padding:0;max-width:none;max-height:none;position:relative}.mx_TabbedIntegrationManagerDialog_container{position:absolute;top:0;bottom:0;left:0;right:0}.mx_TabbedIntegrationManagerDialog_container .mx_TabbedIntegrationManagerDialog_currentManager{width:100%;height:100%;border-top:1px solid #0dbd8b}.mx_TabbedIntegrationManagerDialog_container .mx_TabbedIntegrationManagerDialog_currentManager iframe{background-color:#fff;border:0;width:100%;height:100%}.mx_TabbedIntegrationManagerDialog_tab{display:inline-block;border:1px solid #0dbd8b;border-bottom:0;border-top-left-radius:3px;border-top-right-radius:3px;padding:10px 8px;margin-right:5px}.mx_TabbedIntegrationManagerDialog_currentTab{background-color:#0dbd8b;color:#fff}.mx_TermsDialog_forIntegrationManager .mx_Dialog{width:60%;height:70%;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_TermsDialog_termsTableHeader{font-weight:700;text-align:left}.mx_TermsDialog_termsTable{font-size:1.2rem;width:100%}.mx_TermsDialog_service,.mx_TermsDialog_summary{padding-right:10px}.mx_TermsDialog_link{display:inline-block;-webkit-mask-image:url(../../img/external-link.a8d3e9b.svg);mask-image:url(../../img/external-link.a8d3e9b.svg);background-color:#0dbd8b;width:10px;height:10px}.mx_UntrustedDeviceDialog .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UntrustedDeviceDialog .mx_Dialog_title .mx_E2EIcon{margin-left:0}.mx_UploadConfirmDialog_fileIcon{margin-right:5px}.mx_UploadConfirmDialog_previewOuter{text-align:center}.mx_UploadConfirmDialog_previewInner{display:inline-block;text-align:left}.mx_UploadConfirmDialog_imagePreview{max-height:300px;max-width:100%;border-radius:4px;border:1px solid #c1c1c1}.mx_UserSettingsDialog_settingsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserSettingsDialog_appearanceIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/appearance.cdebd40.svg);mask-image:url(../../img/element-icons/settings/appearance.cdebd40.svg)}.mx_UserSettingsDialog_voiceIcon:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_UserSettingsDialog_bellIcon:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserSettingsDialog_preferencesIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/preference.82bfabd.svg);mask-image:url(../../img/element-icons/settings/preference.82bfabd.svg)}.mx_UserSettingsDialog_securityIcon:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_UserSettingsDialog_helpIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/help.68b703f.svg);mask-image:url(../../img/element-icons/settings/help.68b703f.svg)}.mx_UserSettingsDialog_labsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);mask-image:url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg)}.mx_UserSettingsDialog_mjolnirIcon:before{-webkit-mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg);mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg)}.mx_UserSettingsDialog_flairIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/flair.4227a88.svg);mask-image:url(../../img/element-icons/settings/flair.4227a88.svg)}.mx_WidgetCapabilitiesPromptDialog .text-muted{font-size:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_content{margin-bottom:16px}.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap{margin-top:20px;font-size:1.5rem;line-height:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap .mx_WidgetCapabilitiesPromptDialog_byline{color:#61708b;margin-left:26px;font-size:1.2rem;line-height:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_buttons{margin-top:40px}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag{line-height:calc(1.4rem + 14px);color:#61708b;font-size:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-right:8px;width:3.2rem;height:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch.mx_ToggleSwitch_on>.mx_ToggleSwitch_ball{left:calc(100% - 1.5rem)}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch .mx_ToggleSwitch_ball{width:1.5rem;height:1.5rem;border-radius:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-right:8px}.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_AccessSecretStorageDialog_reset{position:relative;padding-left:24px;margin-top:7px}.mx_AccessSecretStorageDialog_reset:before{content:"";display:inline-block;position:absolute;height:16px;width:16px;left:0;top:2px;background-image:url(../../img/element-icons/warning-badge.de1033e.svg)}.mx_AccessSecretStorageDialog_reset .mx_AccessSecretStorageDialog_reset_link{color:#ff4b55}.mx_AccessSecretStorageDialog_titleWithIcon:before{content:"";display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_AccessSecretStorageDialog_resetBadge:before{background-image:url(../../img/element-icons/warning-badge.de1033e.svg);background-size:24px;background-color:transparent}.mx_AccessSecretStorageDialog_secureBackupTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_AccessSecretStorageDialog_securePhraseTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_AccessSecretStorageDialog_keyStatus{height:30px}.mx_AccessSecretStorageDialog_passPhraseInput{width:300px;border:1px solid #0dbd8b;border-radius:5px;padding:10px}.mx_AccessSecretStorageDialog_recoveryKeyEntry{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText{margin:16px}.mx_AccessSecretStorageDialog_recoveryKeyFeedback:before{content:"";display:inline-block;vertical-align:bottom;width:20px;height:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;margin-right:5px}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid{color:#0dbd8b}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid:before{-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid{color:#ff4b55}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid:before{-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput{display:none}.mx_CreateCrossSigningDialog{width:560px}.mx_CreateCrossSigningDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateCrossSigningDialog .mx_Dialog_title,.mx_CreateKeyBackupDialog .mx_Dialog_title{margin-bottom:1em}.mx_CreateKeyBackupDialog_primaryContainer{padding:20px}.mx_CreateKeyBackupDialog_primaryContainer:after{content:"";clear:both;display:block}.mx_CreateKeyBackupDialog_passPhraseContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_CreateKeyBackupDialog_passPhraseInput{-webkit-box-flex:0;-ms-flex:none;flex:none;width:250px;border:1px solid #0dbd8b;border-radius:5px;padding:10px;margin-bottom:1em}.mx_CreateKeyBackupDialog_passPhraseMatch{margin-left:20px}.mx_CreateKeyBackupDialog_recoveryKeyHeader{margin-bottom:1em}.mx_CreateKeyBackupDialog_recoveryKeyContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateKeyBackupDialog_recoveryKey{width:262px;padding:20px;color:#888;background-color:#f7f7f7;margin-right:12px}.mx_CreateKeyBackupDialog_recoveryKeyButtons{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CreateKeyBackupDialog_recoveryKeyButtons button{-webkit-box-flex:1;-ms-flex:1;flex:1;white-space:nowrap}.mx_CreateKeyBackupDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateSecretStorageDialog{width:560px}.mx_CreateSecretStorageDialog .mx_SettingsFlag{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateSecretStorageDialog .mx_SettingsFlag_label{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;font-weight:600}.mx_CreateSecretStorageDialog .mx_ToggleSwitch{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:30px}.mx_CreateSecretStorageDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateSecretStorageDialog .mx_Dialog_title{margin-bottom:1em}.mx_CreateSecretStorageDialog_titleWithIcon:before{content:"";display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_CreateSecretStorageDialog_secureBackupTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_CreateSecretStorageDialog_securePhraseTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_CreateSecretStorageDialog_centeredBody,.mx_CreateSecretStorageDialog_centeredTitle{text-align:center}.mx_CreateSecretStorageDialog_primaryContainer{padding-top:20px}.mx_CreateSecretStorageDialog_primaryContainer:after{content:"";clear:both;display:block}.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton{margin-bottom:16px;padding:11px}.mx_CreateSecretStorageDialog_optionTitle{color:#45474a;font-weight:600;font-size:1.8rem;padding-bottom:10px}.mx_CreateSecretStorageDialog_optionIcon{display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_CreateSecretStorageDialog_optionIcon_securePhrase{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_CreateSecretStorageDialog_optionIcon_secureBackup{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_CreateSecretStorageDialog_passPhraseContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_Field.mx_CreateSecretStorageDialog_passPhraseField{margin-top:0}.mx_CreateSecretStorageDialog_passPhraseMatch{width:200px;margin-left:20px}.mx_CreateSecretStorageDialog_recoveryKeyContainer{width:380px;margin-left:auto;margin-right:auto}.mx_CreateSecretStorageDialog_recoveryKey{font-weight:700;text-align:center;padding:20px;color:#888;background-color:#f7f7f7;border-radius:6px;word-spacing:1em;margin-bottom:20px}.mx_CreateSecretStorageDialog_recoveryKeyButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton{width:160px;padding-left:0;padding-right:0;white-space:nowrap}.mx_CreateSecretStorageDialog_continueSpinner{margin-top:33px;text-align:right}.mx_CreateSecretStorageDialog_continueSpinner img{width:20px;height:20px}.mx_KeyBackupFailedDialog .mx_Dialog_title{margin-bottom:32px}.mx_KeyBackupFailedDialog_title{position:relative;padding-left:45px;padding-bottom:10px}.mx_KeyBackupFailedDialog_title:before{-webkit-mask:url(../../img/e2e/lock-warning-filled.993fb6c.svg);mask:url(../../img/e2e/lock-warning-filled.993fb6c.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#2e2f32;content:"";position:absolute;top:-6px;right:0;bottom:0;left:0}.mx_KeyBackupFailedDialog .mx_Dialog_buttons{margin-top:36px}.mx_RestoreKeyBackupDialog_keyStatus{height:30px}.mx_RestoreKeyBackupDialog_primaryContainer{padding:20px}.mx_RestoreKeyBackupDialog_passPhraseInput,.mx_RestoreKeyBackupDialog_recoveryKeyInput{width:300px;border:1px solid #0dbd8b;border-radius:5px;padding:10px}.mx_RestoreKeyBackupDialog_content>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:110px}.mx_NetworkDropdown{height:32px;position:relative;padding-right:32px;margin-left:auto;margin-right:9px;margin-top:12px}.mx_NetworkDropdown,.mx_NetworkDropdown .mx_AccessibleButton{width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_NetworkDropdown_menu{min-width:204px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border:1px solid #c1c1c1;background-color:#fff;max-height:calc(100vh - 20px);overflow-y:auto}.mx_NetworkDropdown_menu_network{font-weight:700}.mx_NetworkDropdown_server{padding:12px 0;border-bottom:1px solid #9fa9ba}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title{padding:0 10px;font-size:1.5rem;font-weight:600;line-height:2rem;margin-bottom:4px;position:relative}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title .mx_AccessibleButton{position:absolute;display:inline;right:10px;height:16px;width:16px;margin-top:2px}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title .mx_AccessibleButton:after{content:"";position:absolute;width:16px;height:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_subtitle{padding:0 10px;font-size:1rem;line-height:1.4rem;margin-top:-4px;margin-bottom:4px;color:#61708b}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network{font-size:1.2rem;line-height:1.6rem;padding:4px 10px;cursor:pointer;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network[aria-checked=true]:after{content:"";position:absolute;width:16px;height:16px;right:10px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_NetworkDropdown_server_add:hover,.mx_NetworkDropdown_server_network:hover{background-color:#f3f8fd}.mx_NetworkDropdown_server_add{padding:16px 10px 16px 32px;position:relative;border-radius:0 0 4px 4px}.mx_NetworkDropdown_server_add:before{content:"";position:absolute;width:16px;height:16px;left:7px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/plus.38ae979.svg);mask-image:url(../../img/feather-customised/plus.38ae979.svg);background-color:#61708b}.mx_NetworkDropdown_handle{position:relative}.mx_NetworkDropdown_handle:after{content:"";position:absolute;width:26px;height:26px;right:-27.5px;top:-3px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);background-color:#2e2f32}.mx_NetworkDropdown_handle .mx_NetworkDropdown_handle_server{color:#61708b;font-size:1.2rem}.mx_NetworkDropdown_dialog .mx_Dialog{width:45vw}.mx_AccessibleButton{cursor:pointer}.mx_AccessibleButton_disabled{cursor:default}.mx_AccessibleButton_hasKind{padding:7px 18px;text-align:center;border-radius:8px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:1.4rem}.mx_AccessibleButton_kind_primary{color:#fff;background-color:#0dbd8b;font-weight:600}.mx_AccessibleButton_kind_primary_outline{color:#0dbd8b;background-color:#fff;border:1px solid #0dbd8b;font-weight:600}.mx_AccessibleButton_kind_secondary{color:#0dbd8b;font-weight:600}.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm{padding:5px 12px;color:#fff;background-color:#0dbd8b}.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_kind_danger{color:#fff;background-color:#ff4b55}.mx_AccessibleButton_kind_danger_outline{color:#ff4b55;background-color:#fff;border:1px solid #ff4b55}.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled{color:#fff;background-color:#f5b6bb}.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled{color:#f5b6bb;border-color:#f5b6bb}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm{padding:5px 12px;color:#fff;background-color:#ff4b55}.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled{color:#fff;background-color:#f5b6bb}.mx_AccessibleButton_kind_link{color:#0dbd8b;background-color:transparent}.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm{padding:5px 12px;color:#0dbd8b;background-color:transparent}.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled{opacity:.4}.mx_AddressSelector{position:absolute;background-color:#fff;width:485px;max-height:116px;overflow-y:auto;border-radius:3px;border:1px solid #0dbd8b;cursor:pointer;z-index:1}.mx_AddressSelector.mx_AddressSelector_empty{display:none}.mx_AddressSelector_addressListElement .mx_AddressTile{background-color:#fff;border:1px solid #fff}.mx_AddressSelector_addressListElement.mx_AddressSelector_selected{background-color:#f2f5f8}.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile{background-color:#f2f5f8;border:1px solid #f2f5f8}.mx_AddressTile{display:inline-block;border-radius:3px;background-color:rgba(74,73,74,.1);border:1px solid #e7e7e7;line-height:2.6rem;color:#2e2f32;font-size:1.4rem;font-weight:400;margin-right:4px}.mx_AddressTile.mx_AddressTile_error{background-color:rgba(255,0,100,.1);color:#ff4b55;border-color:#ff4b55}.mx_AddressTile_network{padding-right:4px}.mx_AddressTile_avatar,.mx_AddressTile_network{display:inline-block;position:relative;padding-left:2px;vertical-align:middle}.mx_AddressTile_avatar{padding-right:7px}.mx_AddressTile_mx{display:inline-block;margin:0;border:0;padding:0}.mx_AddressTile_name{display:inline-block;padding-right:4px;font-weight:600;overflow:hidden;height:26px;vertical-align:middle}.mx_AddressTile_name.mx_AddressTile_justified{width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_id{display:inline-block;padding-right:11px}.mx_AddressTile_id.mx_AddressTile_justified{width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_unknownMx{display:inline-block;font-weight:600;padding-right:11px}.mx_AddressTile_unknownMxl.mx_AddressTile_justified{width:380px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_email{display:inline-block;font-weight:600;padding-right:11px}.mx_AddressTile_email.mx_AddressTile_justified{width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_unknown{display:inline-block;padding-right:11px}.mx_AddressTile_unknown.mx_AddressTile_justified{width:380px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_dismiss{display:inline-block;padding-right:11px;padding-left:1px;cursor:pointer}.mx_AddressTile_dismiss object{pointer-events:none}.mx_DesktopBuildsNotice{text-align:center;padding:0 16px}.mx_DesktopBuildsNotice>*{vertical-align:middle}.mx_DesktopBuildsNotice>img{margin-right:8px}.mx_desktopCapturerSourcePicker{overflow:hidden}.mx_desktopCapturerSourcePicker_tabLabels{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 0 8px}.mx_desktopCapturerSourcePicker_tabLabel,.mx_desktopCapturerSourcePicker_tabLabel_selected{width:100%;text-align:center;border-radius:8px;padding:8px 0;font-size:1.3rem}.mx_desktopCapturerSourcePicker_tabLabel_selected{background-color:#0dbd8b;color:#fff}.mx_desktopCapturerSourcePicker_panel{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;height:500px;overflow:overlay}.mx_desktopCapturerSourcePicker_stream_button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:8px;border-radius:4px}.mx_desktopCapturerSourcePicker_stream_button:focus,.mx_desktopCapturerSourcePicker_stream_button:hover{background:#fff}.mx_desktopCapturerSourcePicker_stream_thumbnail{margin:4px;width:312px}.mx_desktopCapturerSourcePicker_stream_name{margin:0 4px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:312px}.mx_DirectorySearchBox{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:9px;padding-right:9px}.mx_DirectorySearchBox_joinButton{display:table-cell;padding:3px 10px;background-color:#f2f5f8;border-radius:3px;background-image:url(../../img/icon-return.cb24475.svg);background-position:8px 70%;background-repeat:no-repeat;text-indent:18px;font-weight:600;font-size:1.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.mx_DirectorySearchBox_clear{background-color:#ff4b55;-webkit-mask:url(../../img/cancel.4b9715b.svg);mask:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:10px;mask-size:10px;width:15px;height:15px;cursor:pointer}.mx_Dropdown{position:relative;color:#2e2f32}.mx_Dropdown_disabled{opacity:.3}.mx_Dropdown_input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;border-radius:3px;border:1px solid #c7c7c7;font-size:1.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_Dropdown_input.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_Dropdown_input:focus{border-color:#238cf5}.mx_Dropdown_input.mx_AccessibleButton:focus{-webkit-filter:none;filter:none}.mx_Dropdown_arrow{width:10px;height:6px;padding-right:9px;-webkit-mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_Dropdown_option{height:35px;line-height:3.5rem;padding-left:8px;padding-right:8px}.mx_Dropdown_input>.mx_Dropdown_option{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Dropdown_input>.mx_Dropdown_option,.mx_Dropdown_option div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_Dropdown_option .mx_Dropdown_option_emoji,.mx_Dropdown_option img{margin:5px;width:16px;vertical-align:middle}.mx_Dropdown_option_emoji{font-size:1.6rem;line-height:1.6rem}input.mx_Dropdown_option,input.mx_Dropdown_option:focus{font-weight:400;border:0;padding-top:0;padding-bottom:0;width:60%}.mx_Dropdown_menu{position:absolute;left:-1px;right:-1px;top:100%;z-index:2;margin:0;padding:0;border-radius:3px;border:1px solid #238cf5;background-color:#fff;max-height:200px;overflow-y:auto}.mx_Dropdown_menu .mx_Dropdown_option{height:auto;min-height:35px}.mx_Dropdown_menu .mx_Dropdown_option_highlight{background-color:#ddd}.mx_Dropdown_searchPrompt{font-weight:400;margin-left:5px;margin-bottom:5px}.mx_EditableItemList{margin-top:12px;margin-bottom:10px}.mx_EditableItem{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:5px}.mx_EditableItem_delete{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;margin-right:5px;cursor:pointer;vertical-align:middle;width:14px;height:14px;-webkit-mask-image:url(../../img/feather-customised/cancel.23c2689.svg);mask-image:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#ff4b55;-webkit-mask-size:100%;mask-size:100%}.mx_EditableItem_email{vertical-align:middle}.mx_EditableItem_promptText{margin-right:10px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.mx_EditableItem_confirmBtn{margin-right:5px}.mx_EditableItem_item{-webkit-box-flex:1;-ms-flex:auto 1 0px;flex:auto 1 0;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:calc(100% - 14px);overflow-x:hidden;text-overflow:ellipsis}.mx_EditableItemList_label{margin-bottom:5px}.mx_ErrorBoundary{width:100%;height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_ErrorBoundary,.mx_ErrorBoundary_body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ErrorBoundary_body{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:400px}.mx_ErrorBoundary_body .mx_AccessibleButton{margin-top:5px}.mx_EventListSummary{position:relative}.mx_TextualEvent.mx_EventListSummary_summary{font-size:1.4rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_EventListSummary_avatars{display:inline-block;margin-right:8px;padding-top:8px;line-height:1.2rem}.mx_EventListSummary_avatars .mx_BaseAvatar{margin-right:-4px;cursor:pointer}.mx_EventListSummary_toggle{color:#0dbd8b;cursor:pointer;float:right;margin-right:10px;margin-top:8px}.mx_EventListSummary_line{border-bottom:1px solid transparent;margin-left:63px;line-height:3rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary{font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary .mx_EventTile_line{line-height:2rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary_line{line-height:2.2rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary_toggle{margin-top:3px}.mx_MatrixChat_useCompactLayout .mx_TextualEvent.mx_EventListSummary_summary{font-size:1.3rem}.mx_FacePile .mx_FacePile_faces{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;vertical-align:middle}.mx_FacePile .mx_FacePile_faces>.mx_FacePile_face+.mx_FacePile_face{margin-right:-8px}.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_image{border:1px solid #fff}.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_initial{margin:1px}.mx_FacePile .mx_FacePile_faces .mx_FacePile_more{position:relative;border-radius:100%;width:30px;height:30px;background-color:hsla(0,0%,91%,.77)}.mx_FacePile .mx_FacePile_faces .mx_FacePile_more:before{content:"";z-index:1;position:absolute;top:0;left:0;height:inherit;width:inherit;background:#8d99a5;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_FacePile .mx_FacePile_summary{margin-left:12px;font-size:1.4rem;line-height:2.4rem;color:#8d99a5}.mx_Field{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;position:relative;margin:1em 0;border-radius:4px;-webkit-transition:border-color .25s;transition:border-color .25s;border:1px solid #e7e7e7}.mx_Field_prefix{border-right:1px solid #e7e7e7}.mx_Field_postfix{border-left:1px solid #e7e7e7}.mx_Field input,.mx_Field select,.mx_Field textarea{font-weight:400;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;border:none;border-radius:4px;padding:8px 9px;color:#2e2f32;background-color:#fff;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_Field select{-moz-appearance:none;-webkit-appearance:none}.mx_Field_select:before{content:"";position:absolute;top:15px;right:10px;width:10px;height:6px;-webkit-mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#2e2f32;z-index:1;pointer-events:none}.mx_Field:focus-within{border-color:#238cf5}.mx_Field input:focus,.mx_Field select:focus,.mx_Field textarea:focus{outline:0}.mx_Field input::-webkit-input-placeholder,.mx_Field textarea::-webkit-input-placeholder{-webkit-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::-moz-placeholder,.mx_Field textarea::-moz-placeholder{-moz-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input:-ms-input-placeholder,.mx_Field textarea:-ms-input-placeholder{-ms-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::-ms-input-placeholder,.mx_Field textarea::-ms-input-placeholder{-ms-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::placeholder,.mx_Field textarea::placeholder{-webkit-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input:placeholder-shown:focus::-webkit-input-placeholder,.mx_Field textarea:placeholder-shown:focus::-webkit-input-placeholder{-webkit-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::-moz-placeholder,.mx_Field textarea:placeholder-shown:focus::-moz-placeholder{-moz-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus:-ms-input-placeholder,.mx_Field textarea:placeholder-shown:focus:-ms-input-placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::-ms-input-placeholder,.mx_Field textarea:placeholder-shown:focus::-ms-input-placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:-moz-placeholder-shown:focus::placeholder,.mx_Field textarea:-moz-placeholder-shown:focus::placeholder{-moz-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:-ms-input-placeholder:focus::placeholder,.mx_Field textarea:-ms-input-placeholder:focus::placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::placeholder,.mx_Field textarea:placeholder-shown:focus::placeholder{-webkit-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field label{-webkit-transition:font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s;transition:font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s;color:#2e2f32;background-color:transparent;font-size:1.4rem;position:absolute;left:0;top:0;margin:7px 8px;padding:2px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 20px)}.mx_Field input:not(:-moz-placeholder-shown)+label,.mx_Field textarea:not(:-moz-placeholder-shown)+label{-moz-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field input:not(:-ms-input-placeholder)+label,.mx_Field textarea:not(:-ms-input-placeholder)+label{-ms-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field_labelAlwaysTopLeft label,.mx_Field input:focus+label,.mx_Field input:not(:placeholder-shown)+label,.mx_Field select+label,.mx_Field textarea:focus+label,.mx_Field textarea:not(:placeholder-shown)+label{-webkit-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field input:focus+label,.mx_Field select:focus+label,.mx_Field textarea:focus+label{color:#238cf5}.mx_Field input:disabled,.mx_Field input:disabled+label,.mx_Field select:disabled,.mx_Field select:disabled+label,.mx_Field textarea:disabled,.mx_Field textarea:disabled+label{background-color:#fff;color:#888}.mx_Field_valid.mx_Field,.mx_Field_valid.mx_Field:focus-within{border-color:#0dbd8b}.mx_Field_valid.mx_Field:focus-within label,.mx_Field_valid.mx_Field label{color:#0dbd8b}.mx_Field_invalid.mx_Field,.mx_Field_invalid.mx_Field:focus-within{border-color:#ff4b55}.mx_Field_invalid.mx_Field:focus-within label,.mx_Field_invalid.mx_Field label{color:#ff4b55}.mx_Field_tooltip{margin-top:-12px;margin-left:4px;width:200px}.mx_Field_tooltip.mx_Field_valid{-webkit-animation:mx_fadeout 1s 2s forwards;animation:mx_fadeout 1s 2s forwards}.mx_Field .mx_Dropdown_input{border:initial;border-radius:0;border-radius:initial}.mx_Field .mx_CountryDropdown{width:7.8rem}.mx_FormButton{line-height:1.6rem;padding:5px 15px;font-size:1.2rem;height:-webkit-min-content;height:-moz-min-content;height:min-content}.mx_FormButton:not(:last-child){margin-right:8px}.mx_FormButton.mx_AccessibleButton_kind_primary{color:#0dbd8b;background-color:rgba(3,179,129,.16)}.mx_FormButton.mx_AccessibleButton_kind_danger{color:#ff4b55;background-color:rgba(255,75,85,.16)}.mx_FormButton.mx_AccessibleButton_kind_secondary{color:#737d8c;border:1px solid #737d8c;background-color:unset}.mx_ImageView{width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_ImageView,.mx_ImageView_image_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}.mx_ImageView_image_wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mx_ImageView_image{pointer-events:all;-ms-flex-negative:0;flex-shrink:0}.mx_ImageView_panel{width:100%;height:68px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_ImageView_info_wrapper,.mx_ImageView_panel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ImageView_info_wrapper{pointer-events:all;padding-left:32px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:#fff}.mx_ImageView_info{padding-left:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_ImageView_info_sender{font-weight:700}.mx_ImageView_toolbar{padding-right:16px;pointer-events:all;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ImageView_button{margin-left:24px;display:block}.mx_ImageView_button:before{content:"";height:22px;width:22px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;display:block;background-color:#c1c6cd}.mx_ImageView_button_rotateCW:before{-webkit-mask-image:url(../../img/image-view/rotate-cw.60d903e.svg);mask-image:url(../../img/image-view/rotate-cw.60d903e.svg)}.mx_ImageView_button_rotateCCW:before{-webkit-mask-image:url(../../img/image-view/rotate-ccw.b28ae4a.svg);mask-image:url(../../img/image-view/rotate-ccw.b28ae4a.svg)}.mx_ImageView_button_zoomOut:before{-webkit-mask-image:url(../../img/image-view/zoom-out.8506f80.svg);mask-image:url(../../img/image-view/zoom-out.8506f80.svg)}.mx_ImageView_button_zoomIn:before{-webkit-mask-image:url(../../img/image-view/zoom-in.3b3f32e.svg);mask-image:url(../../img/image-view/zoom-in.3b3f32e.svg)}.mx_ImageView_button_download:before{-webkit-mask-image:url(../../img/image-view/download.2eac468.svg);mask-image:url(../../img/image-view/download.2eac468.svg)}.mx_ImageView_button_more:before{-webkit-mask-image:url(../../img/image-view/more.0427c6c.svg);mask-image:url(../../img/image-view/more.0427c6c.svg)}.mx_ImageView_button_close{border-radius:100%;background:#21262c}.mx_ImageView_button_close:before{width:32px;height:32px;-webkit-mask-image:url(../../img/image-view/close.97d1731.svg);mask-image:url(../../img/image-view/close.97d1731.svg);-webkit-mask-size:40%;mask-size:40%}.mx_InfoTooltip_icon,.mx_InfoTooltip_icon:before{width:16px;height:16px;display:inline-block}.mx_InfoTooltip_icon:before{background-color:#61708b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/info.dc07e19.svg);mask-image:url(../../img/element-icons/info.dc07e19.svg)}.mx_InlineSpinner{display:inline}.mx_InlineSpinner_spin img{margin:0 6px;vertical-align:-3px}.mx_InviteReason{position:relative;margin-bottom:1em}.mx_InviteReason .mx_InviteReason_reason{visibility:visible}.mx_InviteReason .mx_InviteReason_view{display:none;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;color:#737d8c}.mx_InviteReason .mx_InviteReason_view:before{content:"";margin-right:8px;background-color:#737d8c;-webkit-mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);display:inline-block;width:18px;height:14px}.mx_InviteReason_hidden .mx_InviteReason_reason{visibility:hidden}.mx_InviteReason_hidden .mx_InviteReason_view{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ManageIntegsButton_error{position:relative;float:right;cursor:not-allowed}.mx_ManageIntegsButton_error img{position:absolute;right:-5px;top:-5px}.mx_ManageIntegsButton_errorPopup{position:absolute;top:110%;left:-275%;width:550%;padding:30%;font-size:10pt;line-height:1.5em;border-radius:5px;background-color:#0dbd8b;color:#fff;text-align:center;z-index:1000}.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup{display:none}.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup{display:inline}.mx_MiniAvatarUploader{position:relative;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_MiniAvatarUploader .mx_Tooltip{display:inline-block;position:absolute;z-index:unset;width:-webkit-max-content;width:-moz-max-content;width:max-content;left:72px;top:0}.mx_MiniAvatarUploader:after,.mx_MiniAvatarUploader:before{content:"";position:absolute;height:26px;width:26px;right:-6px;bottom:-6px}.mx_MiniAvatarUploader:before{background-color:#fff;border-radius:50%;z-index:1}.mx_MiniAvatarUploader:after{background-color:#737d8c;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/camera.a81a395.svg);mask-image:url(../../img/element-icons/camera.a81a395.svg);-webkit-mask-size:16px;mask-size:16px;z-index:2}.mx_MiniAvatarUploader.mx_MiniAvatarUploader_busy:after{background:url(../../img/spinner.0b29ec9.gif) no-repeat 50%;background-size:80%;-webkit-mask:unset;mask:unset}.mx_MiniAvatarUploader_input{display:none}.mx_PowerSelector{width:100%}.mx_PowerSelector .mx_Field input,.mx_PowerSelector .mx_Field select{-webkit-box-sizing:border-box;box-sizing:border-box}progress.mx_ProgressBar{height:6px;width:60px;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:6px}progress.mx_ProgressBar::-moz-progress-bar{border-radius:6px}progress.mx_ProgressBar::-webkit-progress-bar,progress.mx_ProgressBar::-webkit-progress-value{border-radius:6px}progress.mx_ProgressBar{color:#0dbd8b}progress.mx_ProgressBar::-moz-progress-bar{background-color:#0dbd8b}progress.mx_ProgressBar::-webkit-progress-value{background-color:#0dbd8b}progress.mx_ProgressBar{background-color:rgba(141,151,165,.2)}progress.mx_ProgressBar::-webkit-progress-bar{background-color:rgba(141,151,165,.2)}progress.mx_ProgressBar ::-webkit-progress-value{-webkit-transition:width 1s;transition:width 1s}progress.mx_ProgressBar ::-moz-progress-bar{-moz-transition:padding-bottom 1s;transition:padding-bottom 1s;padding-bottom:var(--value);transform-origin:0 0;transform:rotate(-90deg) translateX(-15px);padding-left:15px;height:0}.mx_QRCode img{border-radius:8px}.mx_ReplyThread{margin-top:0}.mx_ReplyThread .mx_DateSeparator{font-size:1em!important;margin-top:0;margin-bottom:0;padding-bottom:1px;bottom:-5px}.mx_ReplyThread_show{cursor:pointer}blockquote.mx_ReplyThread{margin-left:0;padding-left:10px;border-left:4px solid #ddd}.mx_ResizeHandle{cursor:row-resize;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;z-index:100}.mx_ResizeHandle.mx_ResizeHandle_horizontal{margin:0 -5px;padding:0 5px;cursor:col-resize}.mx_ResizeHandle.mx_ResizeHandle_vertical{margin:-5px 0;padding:5px 0;cursor:row-resize}.mx_MatrixChat>.mx_ResizeHandle.mx_ResizeHandle_horizontal{margin:0 -10px 0 0;padding:0 8px 0 0}.mx_ResizeHandle>div{background:transparent}.mx_ResizeHandle.mx_ResizeHandle_horizontal>div{width:1px;height:100%}.mx_ResizeHandle.mx_ResizeHandle_vertical>div{height:1px}.mx_AtRoomPill,.mx_GroupPill,.mx_RoomPill,.mx_UserPill{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;border-radius:1.6rem;line-height:1.5rem;padding-left:0}a.mx_Pill{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 1ch)}.mx_Pill{padding:.1rem .4em .1rem .1rem;vertical-align:text-top;line-height:1.7rem}.mx_EventTile_content .markdown-body a.mx_GroupPill,.mx_GroupPill{color:#fff;background-color:#aaa}.mx_EventTile_content .markdown-body a.mx_Pill{text-decoration:none}.mx_EventTile_content .markdown-body a.mx_UserPill,.mx_UserPill{color:#2e2f32;background-color:rgba(0,0,0,.1)}.mx_UserPill_selected{background-color:#0dbd8b!important}.mx_EventTile_content .markdown-body a.mx_AtRoomPill,.mx_EventTile_content .mx_AtRoomPill,.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,.mx_MessageComposer_input .mx_AtRoomPill{color:#fff;background-color:#ff4b55}.mx_EventTile_content .markdown-body a.mx_GroupPill,.mx_EventTile_content .markdown-body a.mx_RoomPill,.mx_GroupPill,.mx_RoomPill{color:#fff;background-color:#aaa}.mx_EventTile_body .mx_GroupPill,.mx_EventTile_body .mx_RoomPill,.mx_EventTile_body .mx_UserPill{cursor:pointer}.mx_AtRoomPill .mx_BaseAvatar,.mx_GroupPill .mx_BaseAvatar,.mx_RoomPill .mx_BaseAvatar,.mx_UserPill .mx_BaseAvatar{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:10rem;margin-right:.24rem}.mx_Markdown_BOLD{font-weight:700}.mx_Markdown_ITALIC{font-style:italic}.mx_Markdown_CODE{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.mx_Markdown_HR{display:block;background:#e9e9e9}.mx_Markdown_STRIKETHROUGH{text-decoration:line-through}.mx_RoleButton{margin-left:4px;margin-right:4px;cursor:pointer;display:inline-block}.mx_RoleButton object{pointer-events:none}.mx_RoleButton_tooltip{display:inline-block;position:relative;top:-25px;left:6px}.mx_RoomAliasField{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;min-width:0;max-width:100%}.mx_RoomAliasField input{width:150px;padding-left:0;padding-right:0}.mx_RoomAliasField input::-webkit-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::-moz-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input:-ms-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::-ms-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::placeholder{color:#888;font-weight:400}.mx_RoomAliasField .mx_Field_postfix,.mx_RoomAliasField .mx_Field_prefix{color:#888;border-left:none;border-right:none;font-weight:600;padding:9px 10px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomAliasField .mx_Field_postfix{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 180px)}.mx_SSOButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_SSOButtons .mx_SSOButtons_row+.mx_SSOButtons_row{margin-top:16px}.mx_SSOButtons .mx_SSOButton{position:relative;width:100%;padding:7px 32px;text-align:center;border-radius:8px;display:inline-block;font-size:1.4rem;font-weight:600;border:1px solid #e7e7e7;color:#2e2f32}.mx_SSOButtons .mx_SSOButton>img{-o-object-fit:contain;object-fit:contain;position:absolute;left:8px;top:4px}.mx_SSOButtons .mx_SSOButton_default{color:#0dbd8b;background-color:#fff;border-color:#0dbd8b}.mx_SSOButtons .mx_SSOButton_default.mx_SSOButton_primary{color:#fff;background-color:#0dbd8b}.mx_SSOButtons .mx_SSOButton_mini{-webkit-box-sizing:border-box;box-sizing:border-box;width:50px;height:50px;min-width:50px;padding:12px}.mx_SSOButtons .mx_SSOButton_mini>img{left:12px;top:12px}.mx_SSOButtons .mx_SSOButton_mini+.mx_SSOButton_mini{margin-left:16px}.mx_ServerPicker{margin-bottom:14px;border-bottom:1px solid rgba(141,151,165,.2);display:grid;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto auto;font-size:1.4rem;line-height:2rem}.mx_ServerPicker>h3{font-weight:600;margin:0 0 20px;grid-column:1;grid-row:1}.mx_ServerPicker .mx_ServerPicker_help{width:20px;height:20px;background-color:#c1c6cd;border-radius:10px;grid-column:2;grid-row:1;margin-left:auto;text-align:center;color:#fff;font-size:16px;position:relative}.mx_ServerPicker .mx_ServerPicker_help:before{content:"";width:24px;height:24px;position:absolute;top:-2px;left:-2px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/i.80d84f3.svg);mask-image:url(../../img/element-icons/i.80d84f3.svg);background:#fff}.mx_ServerPicker .mx_ServerPicker_server{color:#232f32;grid-column:1;grid-row:2;margin-bottom:16px}.mx_ServerPicker .mx_ServerPicker_change{padding:0;font-size:inherit;grid-column:2;grid-row:2}.mx_ServerPicker .mx_ServerPicker_desc{margin-top:-12px;color:#8d99a5;grid-column:1/2;grid-row:3;margin-bottom:16px}.mx_ServerPicker_helpDialog .mx_Dialog_content{width:456px}.mx_Slider{position:relative;margin:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_Slider_dotContainer{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_Slider_bar,.mx_Slider_dotContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_Slider_bar{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;height:1em;width:100%;padding:0 .5em;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Slider_bar>hr{width:100%;height:.4em;background-color:#c1c9d6;border:0}.mx_Slider_selection{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:calc(100% - 1em);height:1em;position:absolute;pointer-events:none}.mx_Slider_selectionDot{position:absolute;width:1.1em;height:1.1em;background-color:#0dbd8b;border-radius:50%;-webkit-box-shadow:0 0 6px #d3d3d3;box-shadow:0 0 6px #d3d3d3;z-index:10}.mx_Slider_selection>hr{margin:0;border:.2em solid #0dbd8b}.mx_Slider_dot{height:1em;width:1em;border-radius:50%;background-color:#c1c9d6;z-index:0}.mx_Slider_dotActive{background-color:#0dbd8b}.mx_Slider_dotValue{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#c1c9d6}.mx_Slider_labelContainer{width:1em}.mx_Slider_label{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;left:-50%}.mx_Spinner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_MatrixChat_middlePanel .mx_Spinner{height:auto}.mx_Checkbox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_Checkbox input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0}.mx_Checkbox input[type=checkbox]+label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_Checkbox input[type=checkbox]+label>.mx_Checkbox_background{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-negative:0;flex-shrink:0;height:1.6rem;width:1.6rem;size:.5rem;border:.15rem solid rgba(97,112,139,.5);-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:.4rem}.mx_Checkbox input[type=checkbox]+label>.mx_Checkbox_background img{display:none;height:100%;width:100%;-webkit-filter:invert(100%);filter:invert(100%)}.mx_Checkbox input[type=checkbox]:checked+label>.mx_Checkbox_background{background:#0dbd8b;border-color:#0dbd8b}.mx_Checkbox input[type=checkbox]:checked+label>.mx_Checkbox_background img{display:block}.mx_Checkbox input[type=checkbox]+label>:not(.mx_Checkbox_background){margin-left:10px}.mx_Checkbox input[type=checkbox]:disabled+label{opacity:.5;cursor:not-allowed}.mx_Checkbox input[type=checkbox]:checked:disabled+label>.mx_Checkbox_background{background-color:#0dbd8b;border-color:#0dbd8b}.mx_Checkbox input[type=checkbox].focus-visible+label .mx_Checkbox_background{outline-width:2px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.mx_Checkbox input[type=checkbox].focus-visible+label .mx_Checkbox_background{outline-color:-webkit-focus-ring-color;outline-style:auto}}.mx_RadioButton{position:relative;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.mx_RadioButton,.mx_RadioButton>.mx_RadioButton_content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_RadioButton>.mx_RadioButton_content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-left:8px;margin-right:8px}.mx_RadioButton .mx_RadioButton_spacer{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;height:1.6rem;width:1.6rem}.mx_RadioButton>input[type=radio]{margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mx_RadioButton>input[type=radio]+div{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:1.6rem;width:1.6rem;margin-left:2px;border:.15rem solid #61708b;border-radius:1.6rem}.mx_RadioButton>input[type=radio]+div>div{-webkit-box-sizing:border-box;box-sizing:border-box;height:.8rem;width:.8rem;border-radius:.8rem}.mx_RadioButton>input[type=radio].focus-visible+div{outline-width:2px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.mx_RadioButton>input[type=radio].focus-visible+div{outline-color:-webkit-focus-ring-color;outline-style:auto}}.mx_RadioButton>input[type=radio]:checked+div{border-color:#0dbd8b}.mx_RadioButton>input[type=radio]:checked+div>div{background:#0dbd8b}.mx_RadioButton>input[type=radio]:disabled+div,.mx_RadioButton>input[type=radio]:disabled+div+span{opacity:.5;cursor:not-allowed}.mx_RadioButton>input[type=radio]:disabled+div{border-color:#61708b}.mx_RadioButton>input[type=radio]:checked:disabled+div>div{background-color:#61708b}.mx_RadioButton_outlined{border:1px solid #e3e8f0;border-radius:8px}.mx_RadioButton_checked{border-color:#0dbd8b}.mx_SyntaxHighlight{background:none!important;color:#747474!important}.mx_TextWithTooltip_tooltip{display:none}.mx_ToggleSwitch{-webkit-transition:background-color .2s ease-out .1s;transition:background-color .2s ease-out .1s;width:4.4rem;height:2rem;border-radius:1.5rem;padding:2px;background-color:#c1c9d6;opacity:.5}.mx_ToggleSwitch_enabled{cursor:pointer;opacity:1}.mx_ToggleSwitch.mx_ToggleSwitch_on{background-color:#0dbd8b}.mx_ToggleSwitch.mx_ToggleSwitch_on>.mx_ToggleSwitch_ball{left:calc(100% - 2rem)}.mx_ToggleSwitch_ball{position:relative;width:2rem;height:2rem;border-radius:2rem;background-color:#fff;-webkit-transition:left .15s ease-out .1s;transition:left .15s ease-out .1s;left:0}@-webkit-keyframes mx_fadein{0%{opacity:0}to{opacity:1}}@keyframes mx_fadein{0%{opacity:0}to{opacity:1}}@-webkit-keyframes mx_fadeout{0%{opacity:1}to{opacity:0}}@keyframes mx_fadeout{0%{opacity:1}to{opacity:0}}.mx_Tooltip_chevron{position:absolute;left:-7px;top:10px;width:0;height:0;border-top:7px solid transparent;border-right:7px solid #e7e7e7;border-bottom:7px solid transparent}.mx_Tooltip_chevron:after{content:"";width:0;height:0;border-top:6px solid transparent;border-right:6px solid #fff;border-bottom:6px solid transparent;position:absolute;top:-6px;left:1px}.mx_Tooltip{position:fixed;border-radius:8px;-webkit-box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);z-index:6000;padding:10px;pointer-events:none;line-height:1.4rem;font-size:1.2rem;font-weight:500;max-width:200px;word-break:break-word;margin-right:50px;background-color:#27303a;color:#fff;border:0;text-align:center}.mx_Tooltip,.mx_Tooltip .mx_Tooltip_chevron{display:none}.mx_Tooltip.mx_Tooltip_visible{-webkit-animation:mx_fadein .2s forwards;animation:mx_fadein .2s forwards}.mx_Tooltip.mx_Tooltip_invisible{-webkit-animation:mx_fadeout .1s forwards;animation:mx_fadeout .1s forwards}.mx_Field_tooltip{background-color:#fff;color:#2e2f32;border:1px solid #e7e7e7;text-align:unset}.mx_Field_tooltip .mx_Tooltip_chevron{display:unset}.mx_Tooltip_title{font-weight:600}.mx_Tooltip_sub{opacity:.7;margin-top:4px}.mx_TooltipButton{display:inline-block;width:11px;height:11px;margin-left:5px;border:2px solid #dbdbdb;border-radius:20px;color:#dbdbdb;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;opacity:.6;line-height:1.1rem;text-align:center;cursor:pointer}.mx_TooltipButton:hover{opacity:1}.mx_TooltipButton_container{position:relative;top:-18px;left:4px}.mx_TooltipButton_helpText{width:400px;text-align:start;line-height:17px!important}.mx_Validation{position:relative}.mx_Validation_details{padding-left:20px;margin:0}.mx_Validation_description+.mx_Validation_details{margin:1em 0 0}.mx_Validation_detail{position:relative;font-weight:400;list-style:none;margin-bottom:.5em}.mx_Validation_detail:last-child{margin-bottom:0}.mx_Validation_detail:before{content:"";position:absolute;width:14px;height:14px;top:0;left:-18px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_Validation_detail.mx_Validation_valid{color:#0dbd8b}.mx_Validation_detail.mx_Validation_valid:before{-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_Validation_detail.mx_Validation_invalid{color:#ff4b55}.mx_Validation_detail.mx_Validation_invalid:before{-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_EmojiPicker{width:340px;height:450px;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_EmojiPicker_body{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.mx_EmojiPicker_header{padding:4px 8px 0;border-bottom:1px solid #e9edf1}.mx_EmojiPicker_anchor{padding:8px 8px 6px;border:none;border-bottom:2px solid transparent;background-color:transparent;border-radius:4px 4px 0 0;width:36px;height:38px}.mx_EmojiPicker_anchor:not(:disabled){cursor:pointer}.mx_EmojiPicker_anchor:not(:disabled):hover{background-color:#ddd;border-bottom:2px solid #0dbd8b}.mx_EmojiPicker_anchor:before{background-color:#2e2f32;content:"";display:inline-block;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:100%;height:100%}.mx_EmojiPicker_anchor:disabled:before{background-color:#ddd}.mx_EmojiPicker_anchor_activity:before{-webkit-mask-image:url(../../img/emojipicker/activity.921ec9f.svg);mask-image:url(../../img/emojipicker/activity.921ec9f.svg)}.mx_EmojiPicker_anchor_custom:before{-webkit-mask-image:url(../../img/emojipicker/custom.e1cd0fd.svg);mask-image:url(../../img/emojipicker/custom.e1cd0fd.svg)}.mx_EmojiPicker_anchor_flags:before{-webkit-mask-image:url(../../img/emojipicker/flags.1a8855e.svg);mask-image:url(../../img/emojipicker/flags.1a8855e.svg)}.mx_EmojiPicker_anchor_foods:before{-webkit-mask-image:url(../../img/emojipicker/foods.c6b220a.svg);mask-image:url(../../img/emojipicker/foods.c6b220a.svg)}.mx_EmojiPicker_anchor_nature:before{-webkit-mask-image:url(../../img/emojipicker/nature.6540b99.svg);mask-image:url(../../img/emojipicker/nature.6540b99.svg)}.mx_EmojiPicker_anchor_objects:before{-webkit-mask-image:url(../../img/emojipicker/objects.4d34f58.svg);mask-image:url(../../img/emojipicker/objects.4d34f58.svg)}.mx_EmojiPicker_anchor_people:before{-webkit-mask-image:url(../../img/emojipicker/people.e918580.svg);mask-image:url(../../img/emojipicker/people.e918580.svg)}.mx_EmojiPicker_anchor_places:before{-webkit-mask-image:url(../../img/emojipicker/places.7310322.svg);mask-image:url(../../img/emojipicker/places.7310322.svg)}.mx_EmojiPicker_anchor_recent:before{-webkit-mask-image:url(../../img/emojipicker/recent.13b42e2.svg);mask-image:url(../../img/emojipicker/recent.13b42e2.svg)}.mx_EmojiPicker_anchor_symbols:before{-webkit-mask-image:url(../../img/emojipicker/symbols.15a557d.svg);mask-image:url(../../img/emojipicker/symbols.15a557d.svg)}.mx_EmojiPicker_anchor_visible{border-bottom:2px solid #0dbd8b}.mx_EmojiPicker_search{margin:8px;border-radius:4px;border:1px solid #e7e7e7;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_EmojiPicker_search input{-webkit-box-flex:1;-ms-flex:1;flex:1;border:none;padding:8px 12px;border-radius:4px 0}.mx_EmojiPicker_search button{border:none;background-color:inherit;margin:0;padding:8px;-ms-flex-item-align:center;align-self:center;width:32px;height:32px}.mx_EmojiPicker_search_clear{cursor:pointer}.mx_EmojiPicker_search_icon{width:16px;margin:8px}.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear){pointer-events:none}.mx_EmojiPicker_search_icon:after{-webkit-mask:url(../../img/emojipicker/search.973c315.svg) no-repeat;mask:url(../../img/emojipicker/search.973c315.svg) no-repeat;-webkit-mask-size:100%;mask-size:100%;background-color:#2e2f32;content:"";display:inline-block;width:100%;height:100%}.mx_EmojiPicker_search_clear:after{-webkit-mask-image:url(../../img/emojipicker/delete.f7344c5.svg);mask-image:url(../../img/emojipicker/delete.f7344c5.svg)}.mx_EmojiPicker_category{padding:0 12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EmojiPicker_category_label{width:304px}.mx_EmojiPicker_list{width:304px;padding:0;margin:0}.mx_EmojiPicker_item_wrapper{display:inline-block;list-style:none;width:38px;cursor:pointer}.mx_EmojiPicker_item{display:inline-block;font-size:2rem;padding:5px;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;border-radius:4px}.mx_EmojiPicker_item:hover{background-color:#ddd}.mx_EmojiPicker_item_selected{color:rgba(0,0,0,.5);border:1px solid #0dbd8b;padding:4px}.mx_EmojiPicker_category_label,.mx_EmojiPicker_preview_name{font-size:1.6rem;font-weight:600;margin:0}.mx_EmojiPicker_footer{border-top:1px solid #e9edf1;min-height:72px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EmojiPicker_preview_emoji{font-size:3.2rem;padding:8px 16px}.mx_EmojiPicker_preview_text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_EmojiPicker_name{text-transform:capitalize}.mx_EmojiPicker_shortcode{color:#747474;font-size:1.4rem}.mx_EmojiPicker_shortcode:after,.mx_EmojiPicker_shortcode:before{content:":"}.mx_EmojiPicker_quick{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around}.mx_EmojiPicker_quick_header .mx_EmojiPicker_name{margin-right:4px}.mx_GroupPublicity_toggle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:8px}.mx_GroupPublicity_toggle .mx_GroupTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%}.mx_GroupPublicity_toggle .mx_ToggleSwitch{float:right}.mx_GroupRoomTile{position:relative;color:#2e2f32;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_GroupRoomList_wrapper{padding:10px}.mx_GroupUserSettings_groupPublicity_scrollbox{height:200px;border:1px solid transparent;border-radius:3px;overflow:hidden}.mx_CreateEvent:before{background-color:#91a1c0;-webkit-mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg)}.mx_DateSeparator{clear:both;margin:4px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.4rem;color:#9e9e9e}.mx_DateSeparator>hr{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;height:0;border:none;border-bottom:1px solid transparent}.mx_DateSeparator>div{margin:0 25px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_EventTileBubble{background-color:#f2f5f8;padding:10px;border-radius:8px;margin:10px auto;max-width:75%;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:24px minmax(0,1fr) -webkit-min-content;grid-template-columns:24px minmax(0,1fr) min-content}.mx_EventTileBubble:after,.mx_EventTileBubble:before{position:relative;grid-column:1;grid-row:1/3;width:16px;height:16px;content:"";top:0;bottom:0;left:0;right:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;margin-top:4px}.mx_EventTileBubble .mx_EventTileBubble_subtitle,.mx_EventTileBubble .mx_EventTileBubble_title{overflow-wrap:break-word}.mx_EventTileBubble .mx_EventTileBubble_title{font-weight:600;font-size:1.5rem;grid-column:2;grid-row:1}.mx_EventTileBubble .mx_EventTileBubble_subtitle{font-size:1.2rem;grid-column:2;grid-row:2}.mx_MEmoteBody{white-space:pre-wrap}.mx_MEmoteBody_sender{cursor:pointer}.mx_MFileBody_download{color:#0dbd8b}.mx_MFileBody_download .mx_MFileBody_download_icon{width:12px;height:12px;-webkit-mask-size:12px;mask-size:12px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/download.4f331f0.svg);mask-image:url(../../img/download.4f331f0.svg);background-color:#0dbd8b;display:inline-block}.mx_MFileBody_download a{color:#0dbd8b;text-decoration:none;cursor:pointer}.mx_MFileBody_download object{margin-left:-16px;padding-right:4px;margin-top:-4px;vertical-align:middle;pointer-events:none}.mx_MFileBody_download iframe{margin:0;padding:0;border:none;width:100%;height:1.5em}.mx_MFileBody_info{background-color:#e3e8f0;border-radius:12px;width:243px;padding:6px 12px;color:#737d8c}.mx_MFileBody_info .mx_MFileBody_info_icon{background-color:#fff;border-radius:20px;display:inline-block;width:32px;height:32px;position:relative;vertical-align:middle;margin-right:12px}.mx_MFileBody_info .mx_MFileBody_info_icon:before{content:"";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-image:url(../../img/element-icons/room/composer/attach.359c84e.svg);mask-image:url(../../img/element-icons/room/composer/attach.359c84e.svg);background-color:#737d8c;width:13px;height:15px;position:absolute;top:8px;left:9px}.mx_MFileBody_info .mx_MFileBody_info_filename{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block;width:calc(100% - 44px);vertical-align:middle}.mx_MImageBody{display:block;margin-right:34px}.mx_MImageBody_thumbnail{position:absolute;width:100%;height:100%;left:0;top:0;border-radius:4px}.mx_MImageBody_thumbnail_container{overflow:hidden;position:relative}.mx_MImageBody_thumbnail_spinner{position:absolute;left:50%;top:50%}.mx_MImageBody_thumbnail_spinner>*{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mx_MImageBody_gifLabel{position:absolute;display:block;top:0;left:14px;padding:5px;border-radius:5px;background:rgba(0,0,0,.7);border:2px solid rgba(0,0,0,.2);color:#fff;pointer-events:none}.mx_HiddenImagePlaceholder{position:absolute;left:0;top:0;bottom:0;right:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;cursor:pointer;background-color:#f3f8fd}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button{color:#0dbd8b}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span.mx_HiddenImagePlaceholder_eye{margin-right:8px;background-color:#0dbd8b;-webkit-mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);display:inline-block;width:18px;height:14px}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span:not(.mx_HiddenImagePlaceholder_eye){vertical-align:text-bottom}.mx_EventTile:hover .mx_HiddenImagePlaceholder{background-color:#fff}.mx_MJitsiWidgetEvent:before{background-color:#91a1c0;-webkit-mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg);mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg)}.mx_MNoticeBody{white-space:pre-wrap;opacity:.6}.mx_MStickerBody_wrapper{padding:20px 0}.mx_MStickerBody_tooltip{position:absolute;top:50%}.mx_MStickerBody_hidden{max-width:220px;text-decoration:none;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_MTextBody{white-space:pre-wrap}span.mx_MVideoBody video.mx_MVideoBody{max-width:100%;height:auto;border-radius:4px}.mx_MVoiceMessageBody{display:inline-block}.mx_MessageActionBar{position:absolute;visibility:hidden;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:24px;line-height:2.4rem;border-radius:4px;background:#fff;top:-26px;right:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.mx_MessageActionBar:before{content:"";position:absolute;width:calc(66px + 100%);height:calc(20px + 100%);top:-12px;left:-58px;z-index:-1;cursor:auto}.mx_MessageActionBar>*{white-space:nowrap;display:inline-block;position:relative;border:1px solid #e9edf1;margin-left:-1px}.mx_MessageActionBar>:hover{border-color:#ddd;z-index:1}.mx_MessageActionBar>:first-child{border-radius:3px 0 0 3px}.mx_MessageActionBar>:last-child{border-radius:0 3px 3px 0}.mx_MessageActionBar>:only-child{border-radius:3px}.mx_MessageActionBar_maskButton{width:27px}.mx_MessageActionBar_maskButton:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;-webkit-mask-size:18px;mask-size:18px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#2e2f32}.mx_MessageActionBar_reactButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg);mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg)}.mx_MessageActionBar_replyButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/reply.5812741.svg);mask-image:url(../../img/element-icons/room/message-bar/reply.5812741.svg)}.mx_MessageActionBar_editButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/edit.688678e.svg);mask-image:url(../../img/element-icons/room/message-bar/edit.688678e.svg)}.mx_MessageActionBar_optionsButton:after{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_MessageActionBar_resendButton:after{-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg)}.mx_MessageActionBar_cancelButton:after{-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg)}.mx_MessageTimestamp{color:#acacac;font-size:1rem;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.mx_MjolnirBody{opacity:.4}.mx_ReactionsRow{margin:6px 0;color:#2e2f32}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton{position:relative;display:inline-block;visibility:hidden;width:24px;height:24px;vertical-align:middle;margin-left:4px}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:before{content:"";position:absolute;height:100%;width:100%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#8d99a5;-webkit-mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg);mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg)}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active{visibility:visible}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active:before,.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:hover:before{background-color:#2e2f32}.mx_EventTile:hover .mx_ReactionsRow_addReactionButton{visibility:visible}.mx_ReactionsRow_showAll{text-decoration:none;font-size:1.2rem;line-height:2rem;margin-left:4px;vertical-align:middle}.mx_ReactionsRow_showAll:link,.mx_ReactionsRow_showAll:visited{color:#8d99a5}.mx_ReactionsRow_showAll:hover{color:#2e2f32}.mx_ReactionsRowButton{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;line-height:2rem;margin-right:6px;padding:1px 6px;border:1px solid #e9edf1;border-radius:10px;background-color:#f3f8fd;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.mx_ReactionsRowButton:hover{border-color:#ddd}.mx_ReactionsRowButton.mx_ReactionsRowButton_selected{background-color:#e9fff9;border-color:#0dbd8b}.mx_ReactionsRowButton.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_ReactionsRowButton .mx_ReactionsRowButton_content{max-width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:4px}.mx_RedactedBody{white-space:pre-wrap;color:#61708b;vertical-align:middle;padding-left:20px;position:relative}.mx_RedactedBody:before{height:14px;width:14px;background-color:#61708b;-webkit-mask-image:url(../../img/feather-customised/trash.custom.1e6ecd4.svg);mask-image:url(../../img/feather-customised/trash.custom.1e6ecd4.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;content:"";position:absolute;top:1px;left:0}.mx_RoomAvatarEvent{opacity:.5;overflow-y:hidden}.mx_RoomAvatarEvent_avatar{display:inline;position:relative;top:5px}.mx_SenderProfile_name{font-weight:600}.mx_TextualEvent{opacity:.5;overflow-y:hidden}.mx_UnknownBody{white-space:pre-wrap}.mx_EventTile_content.mx_ViewSourceEvent{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:.6;font-size:1.2rem}.mx_EventTile_content.mx_ViewSourceEvent code,.mx_EventTile_content.mx_ViewSourceEvent pre{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_EventTile_content.mx_ViewSourceEvent pre{line-height:1.2;margin:3.5px 0}.mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle{width:12px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:auto 12px;mask-size:auto 12px;visibility:hidden;background-color:#0dbd8b;-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg)}.mx_EventTile_content.mx_ViewSourceEvent.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle{-webkit-mask-position:0 bottom;mask-position:0 bottom;margin-bottom:7px;-webkit-mask-image:url(../../img/feather-customised/minimise.aec9142.svg);mask-image:url(../../img/feather-customised/minimise.aec9142.svg)}.mx_EventTile_content.mx_ViewSourceEvent:hover .mx_ViewSourceEvent_toggle{visibility:visible}.mx_cryptoEvent.mx_cryptoEvent_icon:before{background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:90%;mask-size:90%}.mx_cryptoEvent.mx_cryptoEvent_icon:after,.mx_cryptoEvent.mx_cryptoEvent_icon:before{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_cryptoEvent.mx_cryptoEvent_icon:after{background-color:#91a1c0}.mx_cryptoEvent.mx_cryptoEvent_icon_verified:after{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg);background-color:#0dbd8b}.mx_cryptoEvent.mx_cryptoEvent_icon_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_cryptoEvent .mx_cryptoEvent_buttons,.mx_cryptoEvent .mx_cryptoEvent_state{grid-column:3;grid-row:1/3}.mx_cryptoEvent .mx_cryptoEvent_buttons{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_cryptoEvent .mx_cryptoEvent_state{width:130px;padding:10px 20px;margin:auto 0;text-align:center;color:#8d99a5;overflow-wrap:break-word;font-size:1.2rem}.mx_BaseCard{padding:0 8px;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_BaseCard .mx_BaseCard_header{margin:8px 0}.mx_BaseCard .mx_BaseCard_header>h2{margin:0 44px;font-size:1.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back,.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close{position:absolute;background-color:rgba(141,151,165,.2);height:20px;width:20px;margin:12px;top:0;border-radius:10px}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before,.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before{content:"";position:absolute;height:20px;width:20px;top:0;left:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#91a1c0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back{left:0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-mask-size:22px;mask-size:22px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close{right:0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before{-webkit-mask-image:url(../../img/icons-close.11ff07c.svg);mask-image:url(../../img/icons-close.11ff07c.svg);-webkit-mask-size:8px;mask-size:8px}.mx_BaseCard .mx_AutoHideScrollbar{margin-right:-8px;padding-right:8px;min-height:0;width:100%;height:100%}.mx_BaseCard .mx_BaseCard_Group{margin:20px 0 16px}.mx_BaseCard .mx_BaseCard_Group>*{margin-left:12px;margin-right:12px}.mx_BaseCard .mx_BaseCard_Group>h1{color:#8d99a5;font-size:1.2rem;font-weight:500}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button{padding:10px 38px 10px 12px;margin:0;position:relative;font-size:1.3rem;height:20px;line-height:20px;border-radius:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:hover{background-color:rgba(141,151,165,.1)}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:after{content:"";position:absolute;top:10px;right:6px;height:20px;width:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#c1c6cd;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-mask-size:20px;mask-size:20px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button.mx_AccessibleButton_disabled{padding-right:12px}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button.mx_AccessibleButton_disabled:after{content:unset}.mx_BaseCard .mx_BaseCard_footer{padding-top:4px;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_kind_secondary{color:#737d8c;background-color:rgba(141,151,165,.2);font-weight:600;font-size:1.4rem}.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_FilePanel.mx_BaseCard,.mx_MemberList.mx_BaseCard,.mx_NotificationPanel.mx_BaseCard,.mx_UserInfo.mx_BaseCard{padding:32px 0 0}.mx_FilePanel.mx_BaseCard .mx_AutoHideScrollbar,.mx_MemberList.mx_BaseCard .mx_AutoHideScrollbar,.mx_NotificationPanel.mx_BaseCard .mx_AutoHideScrollbar,.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar{margin-right:unset;padding-right:unset}.mx_EncryptionInfo_spinner .mx_Spinner{margin-top:25px;margin-bottom:15px}.mx_EncryptionInfo_spinner{text-align:center}.mx_RoomSummaryCard .mx_BaseCard_header{text-align:center;margin-top:20px}.mx_RoomSummaryCard .mx_BaseCard_header h2{font-weight:600;font-size:1.8rem;margin:12px 0 4px}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias{font-size:1.3rem;color:#737d8c}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias,.mx_RoomSummaryCard .mx_BaseCard_header h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee{display:inline-block;position:relative;width:54px;height:54px;border-radius:50%;background-color:#737d8c;margin-top:-3px;margin-left:-10px;border:3px solid #f2f5f8}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee:before{content:"";position:absolute;top:13px;left:13px;height:28px;width:28px;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:url(../../img/e2e/disabled.6c5c6be.svg);mask-image:url(../../img/e2e/disabled.6c5c6be.svg);background-color:#fff}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_normal{background-color:#424446}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_normal:before{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_verified{background-color:#0dbd8b}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_verified:before{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg)}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_warning{background-color:#ff4b55}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_warning:before{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button{padding-left:44px}.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button:before{content:"";position:absolute;top:8px;left:10px;height:24px;width:24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#c1c6cd}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button{padding:0;height:auto;color:#8d99a5}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app{padding:10px 48px 10px 12px;text-overflow:ellipsis;overflow:hidden}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app .mx_BaseAvatar_image{vertical-align:top;margin-right:12px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app span{color:#2e2f32}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle{position:absolute;top:0;height:100%;width:24px;padding:12px 4px;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:24px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:hover:after,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:hover:after{content:"";position:absolute;height:24px;width:24px;top:8px;left:0;border-radius:12px;background-color:rgba(141,151,165,.1)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:before,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:before{content:"";position:absolute;height:16px;width:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:16px;mask-size:16px;background-color:#c1c6cd}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle{right:24px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:before{-webkit-mask-image:url(../../img/element-icons/room/pin-upright.65783fb.svg);mask-image:url(../../img/element-icons/room/pin-upright.65783fb.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options{right:48px;display:none}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:before{-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned:after{opacity:.2}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned .mx_RoomSummaryCard_app_pinToggle:before{background-color:#0dbd8b}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:hover .mx_RoomSummaryCard_icon_app{padding-right:72px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:hover .mx_RoomSummaryCard_app_options{display:unset}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:before{content:unset}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:after{top:8px;pointer-events:none}.mx_RoomSummaryCard .mx_AccessibleButton_kind_link{padding:0;margin-top:12px;margin-bottom:12px;font-size:1.3rem;font-weight:600}.mx_RoomSummaryCard_icon_people:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_RoomSummaryCard_icon_files:before{-webkit-mask-image:url(../../img/element-icons/room/files.5709c0c.svg);mask-image:url(../../img/element-icons/room/files.5709c0c.svg)}.mx_RoomSummaryCard_icon_share:before{-webkit-mask-image:url(../../img/element-icons/room/share.54dc3fb.svg);mask-image:url(../../img/element-icons/room/share.54dc3fb.svg)}.mx_RoomSummaryCard_icon_settings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserInfo.mx_BaseCard{padding-top:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;font-size:1.2rem}.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel{cursor:pointer;position:absolute;top:0;border-radius:4px;background-color:#f2f5f8;margin:9px;z-index:1}.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel div{height:16px;width:16px;padding:4px;-webkit-mask-image:url(../../img/minimise.871d2de.svg);mask-image:url(../../img/minimise.871d2de.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:7px center;mask-position:7px center;background-color:#91a1c0}.mx_UserInfo.mx_BaseCard h2{font-size:1.8rem;font-weight:600;margin:18px 0 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container{padding:8px 16px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_separator{border-bottom:1px solid rgba(46,47,50,.1)}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetailsContainer{padding-top:0;padding-bottom:0;margin-bottom:8px}.mx_UserInfo.mx_BaseCard .mx_RoomTile_nameContainer{width:154px}.mx_UserInfo.mx_BaseCard .mx_RoomTile_badge{display:none}.mx_UserInfo.mx_BaseCard .mx_RoomTile_name{width:160px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar{margin:24px 32px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div{max-width:30vh;margin:0 auto;-webkit-transition:.5s;transition:.5s}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div>div{padding-top:100%;position:relative}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div>div *{border-radius:100%;position:absolute;top:0;left:0;width:100%!important;height:100%!important}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar_initial{z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:6rem!important;width:100%!important;-webkit-transition:font-size .5s;transition:font-size .5s}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image{cursor:-webkit-zoom-in;cursor:zoom-in}.mx_UserInfo.mx_BaseCard h3{text-transform:uppercase;color:#8d99a5;font-weight:600;font-size:1.2rem;margin:4px 0}.mx_UserInfo.mx_BaseCard p{margin:5px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile{text-align:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.8rem;line-height:2.5rem;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-all;text-overflow:ellipsis}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 .mx_E2EIcon{margin-top:3px;margin-right:4px;min-width:18px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profileStatus{margin-top:12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField{margin:6px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField,.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription{margin:11px 0 12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_Field{margin:0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_field{cursor:pointer;color:#0dbd8b;line-height:1.6rem;margin:8px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_field.mx_UserInfo_destructive{color:#ff4b55}.mx_UserInfo.mx_BaseCard .mx_UserInfo_statusMessage{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator){padding-top:16px;padding-bottom:0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator)>:not(h3){margin-left:8px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device{display:-webkit-box;display:-ms-flexbox;display:flex;margin:8px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device.mx_UserInfo_device_verified .mx_UserInfo_device_trusted{color:#0dbd8b}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device.mx_UserInfo_device_unverified .mx_UserInfo_device_trusted{color:#ff4b55}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device .mx_UserInfo_device_name{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:5px;word-break:break-word}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_E2EIcon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin:2px 5px 0 0;width:12px;height:12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_expand{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:11px}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind{padding:8px 18px}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary{color:#0dbd8b;background-color:rgba(3,179,129,.16)}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger{color:#ff4b55;background-color:rgba(255,75,85,.16)}.mx_UserInfo.mx_BaseCard .mx_UserInfo_wideButton,.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton{display:block;margin:16px 0 8px}.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton+.mx_AccessibleButton{margin:8px 0}.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar>div{max-width:72px;margin:0 auto}.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar .mx_BaseAvatar_initial{font-size:40px!important}.mx_VerificationPanel_reciprocate_section .mx_E2EIcon,.mx_VerificationPanel_verified_section .mx_E2EIcon{margin:20px auto!important}.mx_UserInfo .mx_EncryptionPanel_cancel{-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#61708b;cursor:pointer;position:absolute;z-index:100;top:14px;right:14px}.mx_UserInfo .mx_VerificationPanel_qrCode{padding:4px 4px 0;background:#fff;border-radius:4px;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%;margin:0 auto!important}.mx_UserInfo .mx_VerificationPanel_qrCode canvas{height:auto!important;width:100%!important;max-width:240px}.mx_UserInfo .mx_VerificationPanel_reciprocate_section .mx_FormButton{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px;display:block;margin:10px 0}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:10px;margin-bottom:10px;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions>.mx_VerificationPanel_QRPhase_betweenText,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions>.mx_VerificationPanel_QRPhase_betweenText{width:50px;vertical-align:middle;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption{background-color:#f3f8fd;border-radius:10px;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;padding:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;max-width:310px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas{width:220px!important;height:220px!important;background-color:#fff;border-radius:4px;vertical-align:middle;text-align:center;padding:10px}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption>p,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption>p{margin-top:0;font-weight:700}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText{font-size:1.4rem;margin:30px 0;text-align:center}.mx_CompleteSecurity_body .mx_VerificationPanel_verified_section .mx_AccessibleButton,.mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton{float:right}.mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton,.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton{margin-left:10px;padding:7px 40px}.mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons,.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_WidgetCard{height:100%;display:contents}.mx_WidgetCard .mx_AppTileFullWidth{max-width:unset;height:100%;border:0}.mx_WidgetCard .mx_BaseCard_header{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_WidgetCard .mx_BaseCard_header>h2{margin-right:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton{position:relative;margin-right:44px;height:20px;width:20px;min-width:20px;padding:0}.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton:before{content:"";position:absolute;width:20px;height:20px;top:0;left:4px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);background-color:#737d8c}.mx_WidgetCard_maxPinnedTooltip{background-color:#ff4b55;color:#fff}.mx_AliasSettings_editable{border:0;border-bottom:1px solid #c7c7c7;padding:0;min-width:240px}.mx_AliasSettings_editable:focus{border-bottom:1px solid #0dbd8b;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_AliasSettings summary{cursor:pointer;color:#0dbd8b;font-weight:600;list-style:none}.mx_AliasSettings summary::-webkit-details-marker{display:none}.mx_AliasSettings .mx_AliasSettings_localAliasHeader{margin-top:35px}.mx_AppsDrawer{margin:5px 5px 5px 18px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.mx_AppsDrawer .mx_AppsContainer_resizerHandleContainer{width:100%;height:10px;margin-top:-3px;display:block;position:relative}.mx_AppsDrawer .mx_AppsContainer_resizerHandle{cursor:ns-resize;width:100%!important;height:100%!important;position:absolute;bottom:0!important}.mx_AppsDrawer .mx_AppsContainer_resizerHandle:after{content:"";position:absolute;border-radius:3px;top:6px;bottom:0;left:calc(50% - 32px);right:calc(50% - 32px)}.mx_AppsDrawer:hover .mx_AppsContainer_resizerHandle:after{opacity:.8;background:#2e2f32}.mx_AppsDrawer:hover .mx_ResizeHandle_horizontal:before{position:absolute;left:3px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px;width:4px;border-radius:4px;content:"";background-color:#2e2f32;opacity:.8}.mx_AppsContainer_resizer{margin-bottom:8px}.mx_AppsContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:100%;width:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.mx_AppsContainer .mx_AppTile:first-of-type{border-left-width:8px;border-radius:10px 0 0 10px}.mx_AppsContainer .mx_AppTile:last-of-type{border-right-width:8px;border-radius:0 10px 10px 0}.mx_AppsContainer .mx_ResizeHandle_horizontal{position:relative}.mx_AppsContainer .mx_ResizeHandle_horizontal>div{width:0}.mx_AppsDrawer_2apps .mx_AppTile{width:50%}.mx_AppsDrawer_2apps .mx_AppTile:nth-child(3){-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:0!important;min-width:240px!important}.mx_AppsDrawer_3apps .mx_AppTile{width:33%}.mx_AppsDrawer_3apps .mx_AppTile:nth-child(3){-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:0!important;min-width:240px!important}.mx_AppTile{width:50%;min-width:240px;border-color:#f2f5f8;border-style:solid;border-width:8px 5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#f2f5f8}.mx_AppTileFullWidth{width:100%!important;border:5px solid #f2f5f8;border-radius:8px;background-color:#f2f5f8}.mx_AppTile_mini,.mx_AppTileFullWidth{margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_AppTile_mini{width:100%;height:200px}.mx_AppTile .mx_AppTile_persistedWrapper,.mx_AppTile_mini .mx_AppTile_persistedWrapper,.mx_AppTileFullWidth .mx_AppTile_persistedWrapper{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_AppTile_persistedWrapper div{width:100%;height:100%}.mx_AppTileMenuBar{margin:0;font-size:1.2rem;background-color:#f2f5f8;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;padding-top:2px;padding-bottom:8px}.mx_AppTileMenuBarTitle{line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx_AppTileMenuBarTitle .mx_WidgetAvatar{margin-right:12px}.mx_AppTileMenuBarTitle>:last-child{margin-left:9px}.mx_AppTileMenuBarWidgets{float:right;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AppTileMenuBar_iconButton{width:12px;height:12px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:auto 12px;mask-size:auto 12px;background-color:#212121;margin:0 3px}.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout{-webkit-mask-image:url(../../img/feather-customised/widget/external-link.7ab6751.svg);mask-image:url(../../img/feather-customised/widget/external-link.7ab6751.svg)}.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu{-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_AppTileBody{height:100%;background-color:#fff}.mx_AppTileBody,.mx_AppTileBody_mini{width:100%;overflow:hidden;border-radius:8px}.mx_AppTileBody_mini{height:200px}.mx_AppTile .mx_AppTileBody,.mx_AppTile_mini .mx_AppTileBody_mini,.mx_AppTileFullWidth .mx_AppTileBody{height:inherit;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_AppTileBody_mini iframe,.mx_AppTileBody iframe{border:none;width:100%;height:100%}.mx_AppTileBody iframe{overflow:hidden;padding:0;margin:0;display:block}.mx_AppPermissionWarning{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.6rem}.mx_AppPermissionWarning_row{margin-bottom:12px}.mx_AppPermissionWarning_smallText{font-size:1.2rem}.mx_AppPermissionWarning_bolder{font-weight:600}.mx_AppPermissionWarning h4{margin:0;padding:0}.mx_AppPermissionWarning_helpIcon{margin-top:1px;margin-right:2px;width:10px;height:10px;display:inline-block}.mx_AppPermissionWarning_helpIcon:before{display:inline-block;background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:12px;mask-size:12px;width:12px;height:12px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/feather-customised/help-circle.03fb6cf.svg);mask-image:url(../../img/feather-customised/help-circle.03fb6cf.svg)}.mx_AppPermissionWarning_tooltip{-webkit-box-shadow:none;box-shadow:none;background-color:#27303a;color:#fff;border:none;border-radius:3px;padding:6px 8px}.mx_AppPermissionWarning_tooltip ul{list-style-position:inside;padding-left:2px;margin-left:0}.mx_AppLoading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:700;position:relative;height:100%;background-color:#fff!important;border-radius:8px}.mx_AppLoading .mx_Spinner{position:absolute;top:0;bottom:0;left:0;right:0}.mx_AppLoading_spinner_fadeIn{-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-name:mx_AppLoading_spinner_fadeIn_animation;animation-name:mx_AppLoading_spinner_fadeIn_animation}@-webkit-keyframes mx_AppLoading_spinner_fadeIn_animation{0%{opacity:0}to{opacity:1}}@keyframes mx_AppLoading_spinner_fadeIn_animation{0%{opacity:0}to{opacity:1}}.mx_AppLoading iframe{display:none}.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper{z-index:1}.mx_Autocomplete{position:absolute;bottom:0;z-index:1001;width:100%;background:#fff;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;max-height:50vh;overflow:auto;-webkit-box-shadow:0 -16px 32px rgba(0,0,0,.04);box-shadow:0 -16px 32px rgba(0,0,0,.04)}.mx_Autocomplete_ProviderSection{border-bottom:1px solid transparent}.mx_Autocomplete_Completion_block{height:34px;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32}.mx_Autocomplete_Completion_block *{margin:0 3px}.mx_Autocomplete_Completion_pill{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:2rem;height:3.4rem;padding:.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32}.mx_Autocomplete_Completion_pill>*{margin-right:.3rem}.mx_Autocomplete_Completion_subtitle{font-style:italic;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_Autocomplete_Completion_description{color:grey}.mx_Autocomplete_Completion_container_pill{margin:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap}.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_description,.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_subtitle,.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_title{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx_Autocomplete_Completion.selected,.mx_Autocomplete_Completion:hover{background:#f2f5f8;outline:none}.mx_Autocomplete_provider_name{margin:12px;color:#2e2f32;font-weight:400;opacity:.4}.m_RoomView_auxPanel_stateViews{padding:5px 5px 5px 19px;border-bottom:1px solid transparent}.m_RoomView_auxPanel_stateViews_span a{text-decoration:none;color:inherit}.m_RoomView_auxPanel_stateViews_span[data-severity=warning]{font-weight:700;color:orange}.m_RoomView_auxPanel_stateViews_span[data-severity=alert]{font-weight:700;color:red}.m_RoomView_auxPanel_stateViews_span[data-severity=normal]{font-weight:400}.m_RoomView_auxPanel_stateViews_span[data-severity=notice]{font-weight:400;color:#a2a2a2}.m_RoomView_auxPanel_stateViews_delim{padding:0 5px;color:#a2a2a2}.mx_BasicMessageComposer{position:relative}.mx_BasicMessageComposer .mx_BasicMessageComposer_inputEmpty>:first-child:before{content:var(--placeholder);opacity:.333;width:0;height:0;overflow:visible;display:inline-block;pointer-events:none;white-space:nowrap}@-webkit-keyframes visualbell{0%{background-color:#faa}to{background-color:#fff}}.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error{-webkit-animation:visualbell .2s;animation:visualbell .2s}.mx_BasicMessageComposer .mx_BasicMessageComposer_input{white-space:pre-wrap;word-wrap:break-word;outline:none;overflow-x:hidden}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill,.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill{position:relative}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill:before,.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill:before{content:var(--avatar-letter);width:1.6rem;height:1.6rem;margin-right:.24rem;background:var(--avatar-background),#fff;color:#fff;background-repeat:no-repeat;background-size:1.6rem;border-radius:1.6rem;text-align:center;font-weight:400;line-height:1.6rem;font-size:1.04rem}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_disabled{pointer-events:none}.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper{position:relative;height:0}.mx_E2EIcon{width:16px;height:16px;margin:0 9px;position:relative;display:block}.mx_E2EIcon_normal:after,.mx_E2EIcon_normal:before,.mx_E2EIcon_verified:after,.mx_E2EIcon_verified:before,.mx_E2EIcon_warning:after,.mx_E2EIcon_warning:before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_E2EIcon:before{background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:90%;mask-size:90%}.mx_E2EIcon:before,.mx_E2EIcon_bordered{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_E2EIcon_bordered{background-color:#f3f8fd}.mx_E2EIcon_bordered:after{-webkit-mask-size:75%;mask-size:75%}.mx_E2EIcon_bordered:before{-webkit-mask-size:65%;mask-size:65%}.mx_E2EIcon_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_E2EIcon_normal:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#91a1c0}.mx_E2EIcon_verified:after{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg);background-color:#0dbd8b}.mx_EditMessageComposer{padding:3px;margin:-7px -10px -5px;overflow:visible!important}.mx_EditMessageComposer .mx_BasicMessageComposer_input{border-radius:4px;border:1px solid transparent;background-color:#fff;max-height:200px;padding:3px 6px}.mx_EditMessageComposer .mx_BasicMessageComposer_input:focus{border-color:rgba(13,189,139,.5)}.mx_EditMessageComposer .mx_EditMessageComposer_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;position:absolute;left:0;background:#f3f8fd;z-index:100;right:0;margin:0 -110px 0 0;padding:5px 147px 5px 5px}.mx_EditMessageComposer .mx_EditMessageComposer_buttons .mx_AccessibleButton{margin-left:5px;padding:5px 40px}.mx_EventTile_last .mx_EditMessageComposer_buttons{position:static;margin-right:-147px}.mx_EntityTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32;cursor:pointer}.mx_EntityTile .mx_E2EIcon{margin:0;position:absolute;bottom:2px;right:7px}.mx_EntityTile:hover{padding-right:30px;position:relative}.mx_EntityTile:hover:before{content:"";position:absolute;top:calc(50% - 8px);right:-8px;-webkit-mask:url(../../img/member_chevron.4163a20.png);mask:url(../../img/member_chevron.4163a20.png);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:16px;height:16px;background-color:#91a1c0}.mx_EntityTile .mx_PresenceLabel{display:none}.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_PresenceLabel{display:block}.mx_EntityTile_invite{display:table-cell;vertical-align:middle;margin-left:10px;width:26px}.mx_EntityTile_avatar,.mx_GroupRoomTile_avatar{padding:4px 12px 4px 3px;position:relative}.mx_EntityTile_name,.mx_GroupRoomTile_name{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden;font-size:1.4rem;text-overflow:ellipsis;white-space:nowrap}.mx_EntityTile_details{overflow:hidden;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_EntityTile_ellipsis .mx_EntityTile_name,.mx_EntityTile_invitePlaceholder .mx_EntityTile_name{font-style:italic;color:#2e2f32}.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,.mx_EntityTile_offline_beenactive .mx_EntityTile_name,.mx_EntityTile_unavailable .mx_EntityTile_avatar,.mx_EntityTile_unavailable .mx_EntityTile_name{opacity:.5}.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,.mx_EntityTile_offline_neveractive .mx_EntityTile_name,.mx_EntityTile_unknown .mx_EntityTile_avatar,.mx_EntityTile_unknown .mx_EntityTile_name{opacity:.25}.mx_EntityTile_subtext{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_EntityTile_power{-webkit-padding-start:6px;padding-inline-start:6px;font-size:1rem;color:#8d99a5;max-width:6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_EntityTile:hover .mx_EntityTile_power{display:none}.mx_EventTile{max-width:100%;clear:both;padding-top:18px;font-size:1.4rem;position:relative}.mx_EventTile.mx_EventTile_info{padding-top:1px}.mx_EventTile_avatar{top:14px;left:8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{top:.6rem;left:64px}.mx_EventTile_continuation{padding-top:0!important}.mx_EventTile_continuation.mx_EventTile_isEditing{padding-top:5px!important;margin-top:-5px}.mx_EventTile_isEditing{background-color:#f3f8fd}.mx_EventTile .mx_SenderProfile{color:#2e2f32;font-size:1.4rem;display:inline-block;overflow:hidden;cursor:pointer;padding-bottom:0;padding-top:0;margin:0;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 64px)}.mx_EventTile .mx_SenderProfile .mx_Flair{opacity:.7;margin-left:5px;display:inline-block;vertical-align:top;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile .mx_SenderProfile .mx_Flair img{vertical-align:-2px;margin-right:2px;border-radius:8px}.mx_EventTile_isEditing .mx_MessageTimestamp{visibility:hidden!important}.mx_EventTile .mx_MessageTimestamp{display:block;visibility:hidden;white-space:nowrap;left:0;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile_continuation .mx_EventTile_line{clear:both}.mx_EventTile_line,.mx_EventTile_reply{position:relative;padding-left:64px;border-radius:4px}.mx_EventListSummary .mx_EventTile_line,.mx_RoomView_timeline_rr_enabled .mx_EventTile_line{margin-right:110px}.mx_EventTile_bubbleContainer{display:grid;grid-template-columns:1fr 100px}.mx_EventTile_bubbleContainer .mx_EventTile_line{margin-right:0;grid-column:1/3;padding:0!important}.mx_EventTile_bubbleContainer .mx_EventTile_msgOption{grid-column:2}.mx_EventTile_reply{margin-right:10px}.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji{font-size:48px!important;line-height:57px!important}.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp{visibility:visible}.mx_EventTile_selected>div>a>.mx_MessageTimestamp{left:3px;width:auto}.mx_EventTile.focus-visible:focus-within>div>a>.mx_MessageTimestamp,.mx_EventTile.mx_EventTile_actionBarFocused>div>a>.mx_MessageTimestamp,.mx_EventTile:hover>div>a>.mx_MessageTimestamp,.mx_EventTile_last>div>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile.focus-visible:focus-within>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile:hover>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile_last>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_ReplyThread .mx_EventTile>a>.mx_MessageTimestamp{visibility:visible}.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar,.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,.mx_EventTile:hover .mx_MessageActionBar,[data-whatinput=keyboard] .mx_EventTile:focus-within .mx_MessageActionBar{visibility:visible}.mx_EventTile_selected>.mx_EventTile_line{border-left:4px solid #0dbd8b;padding-left:60px;background-color:#f6f7f8}.mx_EventTile_highlight,.mx_EventTile_highlight .markdown-body{color:#ff4b55}.mx_EventTile_highlight .markdown-body .mx_EventTile_line,.mx_EventTile_highlight .mx_EventTile_line{background-color:#fff8e3}.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line{padding-left:78px}.mx_EventTile.focus-visible:focus-within .mx_EventTile_line,.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,.mx_EventTile:hover .mx_EventTile_line{background-color:#f6f7f8}.mx_EventTile_searchHighlight{border-radius:5px;padding-left:2px;padding-right:2px;cursor:pointer}.mx_EventTile_searchHighlight,.mx_EventTile_searchHighlight a{background-color:#0dbd8b;color:#fff}.mx_EventTile_receiptSending:before,.mx_EventTile_receiptSent:before{background-color:#8d99a5;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14px;mask-size:14px;width:14px;height:14px;content:"";position:absolute;top:0;left:0;right:0}.mx_EventTile_receiptSent:before{-webkit-mask-image:url(../../img/element-icons/circle-sent.5079cbe.svg);mask-image:url(../../img/element-icons/circle-sent.5079cbe.svg)}.mx_EventTile_receiptSending:before{-webkit-mask-image:url(../../img/element-icons/circle-sending.bcca6aa.svg);mask-image:url(../../img/element-icons/circle-sending.bcca6aa.svg)}.mx_EventTile_contextual{opacity:.4}.mx_EventTile_msgOption{float:right;text-align:right;position:relative;width:90px;height:1px;margin-right:10px}.mx_EventTile_msgOption a{text-decoration:none}.mx_EventTile_readAvatars{position:relative;display:inline-block;width:14px;height:14px;top:-2.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.mx_EventTile_readAvatars .mx_BaseAvatar{position:absolute;display:inline-block;height:1.4rem;width:1.4rem;-webkit-transition:left .1s ease-out,top .3s ease-out;transition:left .1s ease-out,top .3s ease-out;-webkit-transition:left var(--transition-short) ease-out,top var(--transition-standard) ease-out;transition:left var(--transition-short) ease-out,top var(--transition-standard) ease-out}.mx_EventTile_readAvatarRemainder{color:#acacac;font-size:1.1rem;position:absolute}.mx_EventTile_content{display:block;overflow-y:hidden;overflow-x:hidden;margin-right:34px}.mx_EventTile_body{overflow-y:hidden}.mx_EventTile_spoiler{cursor:pointer}.mx_EventTile_spoiler_reason{color:#acacac;font-size:1.1rem}.mx_EventTile_spoiler_content{-webkit-filter:blur(5px) saturate(.1) sepia(1);filter:blur(5px) saturate(.1) sepia(1);-webkit-transition-duration:.5s;transition-duration:.5s}.mx_EventTile_spoiler.visible>.mx_EventTile_spoiler_content{-webkit-filter:none;filter:none}.mx_EventTile_e2eIcon{position:absolute;top:6px;left:44px;width:14px;height:14px;display:block;bottom:0;right:0;opacity:.2;background-repeat:no-repeat;background-size:contain}.mx_EventTile_e2eIcon:after,.mx_EventTile_e2eIcon:before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-size:contain;mask-size:contain}.mx_EventTile_e2eIcon:after,.mx_EventTile_e2eIcon:before{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mx_EventTile_e2eIcon:before{background-color:#fff;-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);-webkit-mask-size:90%;mask-size:90%}.mx_EventTile_e2eIcon_undecryptable:after,.mx_EventTile_e2eIcon_unverified:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_undecryptable,.mx_EventTile_e2eIcon_unverified{opacity:1}.mx_EventTile_e2eIcon_unknown:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_unknown{opacity:1}.mx_EventTile_e2eIcon_unencrypted:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_unencrypted{opacity:1}.mx_EventTile_e2eIcon_unauthenticated:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#91a1c0}.mx_EventTile_e2eIcon_unauthenticated{opacity:1}.mx_EventTile_keyRequestInfo{font-size:1.2rem}.mx_EventTile_keyRequestInfo_text{opacity:.5}.mx_EventTile_keyRequestInfo_text a{color:#2e2f32;text-decoration:underline;cursor:pointer}.mx_EventTile_keyRequestInfo_tooltip_contents p{text-align:auto;margin-left:3px;margin-right:3px}.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child{margin-top:0}.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child{margin-bottom:0}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{padding-left:60px}.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{border-left:4px solid #76cfa5}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line{border-left:4px solid #e8bf37}.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line{padding-left:78px}.mx_EventTile:hover .mx_EventTile_e2eIcon{opacity:1}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line>a>.mx_MessageTimestamp,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line>a>.mx_MessageTimestamp,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line>a>.mx_MessageTimestamp{width:38px}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line>.mx_EventTile_e2eIcon,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line>.mx_EventTile_e2eIcon,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line>.mx_EventTile_e2eIcon{display:block;left:41px}.mx_EventTile_content .mx_EventTile_edited{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1.2rem;color:#9e9e9e;display:inline-block;margin-left:9px;cursor:pointer}.mx_EventTile_body pre{border:1px solid transparent}.mx_EventTile_content .markdown-body{font-family:inherit!important;white-space:normal!important;line-height:inherit!important;color:inherit;font-size:1.4rem}.mx_EventTile_content .markdown-body code,.mx_EventTile_content .markdown-body pre{font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji!important;color:#333}.mx_EventTile_content .markdown-body pre{overflow-x:overlay;overflow-y:visible}.mx_EventTile_content .markdown-body code{background-color:#f8f8f8}.mx_EventTile_lineNumbers{float:left;margin:0 .5em 0 -1.5em;color:grey}.mx_EventTile_lineNumber{text-align:right;display:block;padding-left:1em}.mx_EventTile_collapsedCodeBlock{max-height:30vh}.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre,.mx_EventTile:hover .mx_EventTile_body pre{border:1px solid #e5e5e5}.mx_EventTile_pre_container{position:relative}.mx_EventTile_button{position:absolute;display:inline-block;visibility:hidden;cursor:pointer;top:8px;right:8px;width:19px;height:19px;background-color:#2e2f32}.mx_EventTile_buttonBottom{top:33px}.mx_EventTile_copyButton{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg)}.mx_EventTile_collapseButton{-webkit-mask-image:url(../../img/feather-customised/minimise.aec9142.svg);mask-image:url(../../img/feather-customised/minimise.aec9142.svg)}.mx_EventTile_collapseButton,.mx_EventTile_expandButton{-webkit-mask-size:75%;mask-size:75%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_EventTile_expandButton{-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg)}.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton{visibility:visible}.mx_EventTile_content .markdown-body h1,.mx_EventTile_content .markdown-body h2,.mx_EventTile_content .markdown-body h3,.mx_EventTile_content .markdown-body h4,.mx_EventTile_content .markdown-body h5,.mx_EventTile_content .markdown-body h6{font-family:inherit!important;color:inherit}.mx_EventTile_content .markdown-body h1,.mx_EventTile_content .markdown-body h2{font-size:1.5em;border-bottom:none!important}.mx_EventTile_content .markdown-body a{color:#238cf5}.mx_EventTile_content .markdown-body .hljs{display:inline!important}.mx_EventTile_tileError{color:red;text-align:center;margin-right:0}.mx_EventTile_tileError .mx_EventTile_line{padding-left:0;margin-right:0}.mx_EventTile_tileError .mx_EventTile_line span{padding:4px 8px}.mx_EventTile_tileError a{margin-left:1em}@media only screen and (max-width:480px){.mx_EventTile_line,.mx_EventTile_reply{padding-left:0;margin-right:0}.mx_EventTile_content{margin-top:10px;margin-right:0}}.mx_GroupLayout .mx_EventTile>.mx_SenderProfile{line-height:2rem;margin-left:64px}.mx_GroupLayout .mx_EventTile>.mx_EventTile_line{padding-left:64px}.mx_GroupLayout .mx_EventTile>.mx_EventTile_avatar{position:absolute}.mx_GroupLayout .mx_EventTile .mx_MessageTimestamp{position:absolute;width:46px}.mx_GroupLayout .mx_EventTile .mx_EventTile_line,.mx_GroupLayout .mx_EventTile .mx_EventTile_reply{padding-top:1px;padding-bottom:3px;line-height:2.2rem}.mx_GroupLayout .mx_EventTile_info .mx_EventTile_line{padding-left:82px}.mx_MatrixChat_useCompactLayout .mx_EventTile{padding-top:4px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_reply{padding-top:0;padding-bottom:0}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info{padding-top:0;font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_reply{line-height:2rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{top:4px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_SenderProfile{font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote{padding-top:8px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_avatar{top:2px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_reply{padding-top:0;padding-bottom:1px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation{padding-top:0}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_reply{padding-top:0;padding-bottom:0}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_avatar{top:2px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_e2eIcon{top:3px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_readAvatars{top:-2rem}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body blockquote,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body dl,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body ol,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body p,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body pre,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body table,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body ul{margin-bottom:4px}.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList h2{margin-top:6px}.mx_IRCLayout{--name-width:70px;line-height:1.8rem!important}.mx_IRCLayout .mx_EventTile>a{text-decoration:none}.mx_IRCLayout .mx_EventTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding-top:0}.mx_IRCLayout .mx_EventTile>*{margin-right:5px}.mx_IRCLayout .mx_EventTile>.mx_EventTile_msgOption{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5;-ms-flex-negative:0;flex-shrink:0}.mx_IRCLayout .mx_EventTile>.mx_EventTile_msgOption .mx_EventTile_readAvatars{top:.2rem}.mx_IRCLayout .mx_EventTile>.mx_SenderProfile{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-ms-flex-negative:0;flex-shrink:0;width:var(--name-width);text-overflow:ellipsis;text-align:left;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:visible;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_IRCLayout .mx_EventTile .mx_EventTile_line,.mx_IRCLayout .mx_EventTile .mx_EventTile_reply{padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;min-width:0}.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;position:relative;top:0;left:0;-ms-flex-negative:0;flex-shrink:0;height:1.8rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar>.mx_BaseAvatar,.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar>.mx_BaseAvatar>*{height:1.4rem!important;width:1.4rem!important;font-size:1rem!important;line-height:1.5rem!important}.mx_IRCLayout .mx_EventTile .mx_MessageTimestamp{font-size:1rem;width:45px;text-align:right}.mx_IRCLayout .mx_EventTile>.mx_EventTile_e2eIcon{position:absolute;right:unset;left:unset;top:0;padding:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;height:1.8rem;background-position:50%}.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_EventTile_e2eIcon,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_MTextBody,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_ReplyThread_wrapper_empty,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_TextualEvent{display:inline-block}.mx_IRCLayout .mx_EventTile .mx_EventTile_reply{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.mx_IRCLayout .mx_EventTile .mx_EditMessageComposer_buttons{position:relative}.mx_IRCLayout .mx_EventTile_emote>.mx_EventTile_avatar{margin-left:calc(var(--name-width) + 19px)}.mx_IRCLayout blockquote{margin:0}.mx_IRCLayout .mx_EventListSummary>.mx_EventTile_line{padding-left:calc(var(--name-width) + 74px)}.mx_IRCLayout .mx_EventListSummary .mx_EventListSummary_avatars{padding:0;margin:0 9px 0 0}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{left:calc(var(--name-width) + 24px);top:0}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line{left:calc(var(--name-width) + 24px)}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_TextualEvent{line-height:1.8rem}.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{padding-left:0;border-left:0}.mx_IRCLayout .mx_SenderProfile_hover{background-color:#fff;overflow:hidden}.mx_IRCLayout .mx_SenderProfile_hover>span{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_IRCLayout .mx_SenderProfile_hover>span>.mx_SenderProfile_name{overflow:hidden;text-overflow:ellipsis;min-width:var(--name-width);text-align:end}.mx_IRCLayout .mx_SenderProfile:hover{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_IRCLayout .mx_SenderProfile_hover:hover{overflow:visible;width:max(auto,100%);z-index:10}.mx_IRCLayout .mx_ReplyThread{margin:0}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile{width:unset;max-width:var(--name-width)}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover{background:transparent}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover>span>.mx_SenderProfile_name{min-width:inherit}.mx_IRCLayout .mx_ReplyThread .mx_EventTile_emote>.mx_EventTile_avatar{margin-left:0}.mx_IRCLayout .mx_ReplyThread .mx_MessageTimestamp{width:auto}.mx_IRCLayout .mx_ReplyThread .mx_EventTile_e2eIcon{position:relative;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.mx_IRCLayout .mx_ProfileResizer{position:absolute;height:100%;width:15px;left:calc(80px + var(--name-width));cursor:col-resize;z-index:100}.mx_IRCLayout .mx_Flair>img{height:1.4rem!important;width:1.4rem!important}.mx_JumpToBottomButton{z-index:1000;position:absolute;bottom:12px;right:24px;width:38px;height:50px;text-align:center}.mx_JumpToBottomButton_badge{position:relative;top:-12px;border-radius:16px;font-weight:700;font-size:1.2rem;line-height:1.4rem;text-align:center;display:inline-block;padding:0 4px;color:#fff;background-color:#61708b}.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge{color:#f2f5f8;background-color:#ff4b55}.mx_JumpToBottomButton_scrollDown{position:relative;height:38px;border-radius:19px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1.3px solid #61708b;cursor:pointer}.mx_JumpToBottomButton_scrollDown:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;background:#61708b}.mx_LinkPreviewWidget{margin-top:15px;margin-right:15px;margin-bottom:15px;display:-webkit-box;display:-ms-flexbox;display:flex;border-left:4px solid #ddd;color:#888}.mx_LinkPreviewWidget_image{-webkit-box-flex:0;-ms-flex:0 0 100px;flex:0 0 100px;margin-left:15px;text-align:center;cursor:pointer}.mx_LinkPreviewWidget_caption{margin-left:15px;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.mx_LinkPreviewWidget_title{display:inline;font-weight:700;white-space:normal}.mx_LinkPreviewWidget_siteName{display:inline}.mx_LinkPreviewWidget_description{margin-top:8px;white-space:normal;word-wrap:break-word}.mx_LinkPreviewWidget_cancel{cursor:pointer;width:18px;height:18px}.mx_LinkPreviewWidget_cancel img{-webkit-box-flex:0;-ms-flex:0 0 40px;flex:0 0 40px;visibility:hidden}.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel img,.mx_LinkPreviewWidget_cancel.focus-visible:focus img{visibility:visible}.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget{margin-top:6px;margin-bottom:6px}.mx_MemberInfo{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;margin-top:8px}.mx_MemberInfo,.mx_MemberInfo_name{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_MemberInfo_name{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_MemberInfo_name>.mx_E2EIcon{margin-right:0}.mx_MemberInfo_cancel{height:16px;width:16px;padding:10px 0 10px 10px;cursor:pointer;-webkit-mask-image:url(../../img/minimise.871d2de.svg);mask-image:url(../../img/minimise.871d2de.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:16px center;mask-position:16px center;background-color:#91a1c0}.mx_MemberInfo_name h2{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-x:auto;max-height:50px}.mx_MemberInfo h2{font-size:1.8rem;font-weight:600;margin:16px 0 16px 15px}.mx_MemberInfo_container{margin:0 16px 16px}.mx_MemberInfo .mx_RoomTile_nameContainer{width:154px}.mx_MemberInfo .mx_RoomTile_badge{display:none}.mx_MemberInfo .mx_RoomTile_name{width:160px}.mx_MemberInfo_avatar{background:hsla(0,0%,91%,.77);margin-bottom:16px}.mx_MemberInfo_avatar>img{height:auto;width:100%;max-height:30vh;-o-object-fit:contain;object-fit:contain;display:block}.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image{cursor:-webkit-zoom-in;cursor:zoom-in}.mx_MemberInfo_profile{margin-bottom:16px}.mx_MemberInfo h3{text-transform:uppercase;color:#9fa9ba;font-weight:700;font-size:1.2rem;margin:4px 0}.mx_MemberInfo_profileField{font-size:1.5rem;position:relative}.mx_MemberInfo_buttons{margin-bottom:16px}.mx_MemberInfo_field{cursor:pointer;font-size:1.5rem;color:#2e2f32;margin-left:8px;line-height:2.3rem}.mx_MemberInfo_createRoom{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 8px}.mx_MemberInfo_createRoom_label{width:auto!important;cursor:pointer}.mx_MemberInfo label{font-size:1.3rem}.mx_MemberInfo label .mx_MemberInfo_label_text{display:inline-block;max-width:180px;vertical-align:text-top}.mx_MemberInfo input[type=radio]{vertical-align:-2px;margin-right:5px;margin-left:8px}.mx_MemberInfo_statusMessage{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_MemberInfo .mx_MemberInfo_scrollContainer{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_GroupMemberList,.mx_GroupRoomList,.mx_MemberList{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:0}.mx_GroupMemberList .mx_Spinner,.mx_GroupRoomList .mx_Spinner,.mx_MemberList .mx_Spinner{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.mx_GroupMemberList .mx_SearchBox,.mx_GroupRoomList .mx_SearchBox,.mx_MemberList .mx_SearchBox{margin-bottom:5px}.mx_GroupMemberList h2,.mx_GroupRoomList h2,.mx_MemberList h2{text-transform:uppercase;color:#3d3b39;font-weight:600;font-size:1.3rem;padding-left:3px;padding-right:12px;margin-top:8px;margin-bottom:4px}.mx_GroupMemberList .mx_AutoHideScrollbar,.mx_GroupRoomList .mx_AutoHideScrollbar,.mx_MemberList .mx_AutoHideScrollbar{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_GroupMemberList .mx_RightPanel_scopeHeader,.mx_GroupRoomList .mx_RightPanel_scopeHeader,.mx_MemberList .mx_RightPanel_scopeHeader{margin-top:-8px}.mx_GroupMemberList_query,.mx_GroupRoomList_query{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_MemberList_chevron{position:absolute;right:35px;margin-top:-15px}.mx_MemberList_border{overflow-y:auto;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0px}.mx_MemberList_query{height:16px}.mx_MemberList_query[type=text]{font-size:1.2rem}.mx_MemberList_wrapper{padding:10px}.mx_MemberList_invite{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;position:relative;background-color:#0dbd8b;border-radius:4px;margin:5px 9px 9px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;font-weight:600}.mx_MemberList_invite.mx_AccessibleButton_disabled{background-color:#888;cursor:not-allowed}.mx_MemberList_invite span{padding:8px 0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_MemberList_invite span:before{content:"";display:inline-block;background-color:#fff;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;width:20px;height:20px;margin-right:5px}.mx_MemberList_inviteCommunity span:before{-webkit-mask-image:url(../../img/icon-invite-people.d82f491.svg);mask-image:url(../../img/icon-invite-people.d82f491.svg)}.mx_MemberList_addRoomToCommunity span:before{-webkit-mask-image:url(../../img/icons-room-add.bd36e26.svg);mask-image:url(../../img/icons-room-add.bd36e26.svg)}.mx_MessageComposer_wrapper{vertical-align:middle;margin:auto;border-top:1px solid transparent;position:relative;padding-left:82px;padding-right:6px}.mx_MessageComposer_replaced_wrapper{margin-left:auto;margin-right:auto}.mx_MessageComposer_replaced_valign{height:60px;display:table-cell;vertical-align:middle}.mx_MessageComposer_roomReplaced_icon{float:left;margin-right:20px;margin-top:5px;width:31px;height:31px}.mx_MessageComposer_roomReplaced_header{font-weight:700}.mx_MessageComposer_autocomplete_wrapper{position:relative;height:0}.mx_MessageComposer_row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.mx_MessageComposer .mx_MessageComposer_avatar{position:absolute;left:26px}.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar{display:block}.mx_MessageComposer_composecontrols{width:100%}.mx_MessageComposer_e2eIcon.mx_E2EIcon{position:absolute;left:60px;margin-right:0;margin-left:3px;width:12px;height:12px}.mx_MessageComposer_noperm_error{width:100%;height:60px;font-style:italic;color:#888;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_MessageComposer_input_wrapper{cursor:text}.mx_MessageComposer_input,.mx_MessageComposer_input_wrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_MessageComposer_input{vertical-align:middle;min-height:60px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;font-size:1.4rem;margin-right:6px}.mx_MessageComposer_editor{width:100%;max-height:120px;min-height:19px;overflow-y:auto;overflow-x:hidden;word-break:break-word}.mx_MessageComposer_editor>:first-child{margin-top:0!important}.mx_MessageComposer_editor>:last-child{margin-bottom:0!important}@keyframes visualbell{0%{background-color:#faa}to{background-color:#fff}}.mx_MessageComposer_input_error{-webkit-animation:visualbell .2s;animation:visualbell .2s}.mx_MessageComposer_input blockquote{color:#777;margin:0 0 16px;padding:0 15px;border-left:4px solid #ddd}.mx_MessageComposer_input pre{background-color:rgba(0,0,0,.04);border-radius:3px;padding:10px}.mx_MessageComposer_input textarea{display:block;width:100%;padding:0;margin-top:6px;margin-bottom:6px;border:0;resize:none;outline:none;-webkit-box-shadow:none;box-shadow:none;color:#2e2f32;background-color:#fff;font-size:1.4rem;max-height:120px;overflow:auto;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji}.mx_MessageComposer_input textarea::-moz-placeholder{line-height:100%;color:#0dbd8b;opacity:1}.mx_MessageComposer_input textarea::-webkit-input-placeholder{color:#0dbd8b}.mx_MessageComposer_button_highlight{background:rgba(13,189,139,.25)}.mx_MessageComposer_button_highlight:before{background-color:#0dbd8b!important}.mx_MessageComposer_button{position:relative;margin-right:6px;cursor:pointer;height:26px;width:26px;border-radius:100%}.mx_MessageComposer_button:before{content:"";position:absolute;top:3px;left:3px;height:20px;width:20px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_MessageComposer_button:hover{background:rgba(13,189,139,.1)}.mx_MessageComposer_button:hover:before{background-color:#0dbd8b}.mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled):before{background-color:#ff4b55}.mx_MessageComposer_upload:before{-webkit-mask-image:url(../../img/element-icons/room/composer/attach.359c84e.svg);mask-image:url(../../img/element-icons/room/composer/attach.359c84e.svg)}.mx_MessageComposer_voiceMessage:before{-webkit-mask-image:url(../../img/voip/mic-on-mask.97ec7a0.svg);mask-image:url(../../img/voip/mic-on-mask.97ec7a0.svg)}.mx_MessageComposer_emoji:before{-webkit-mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg);mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg)}.mx_MessageComposer_stickers:before{-webkit-mask-image:url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);mask-image:url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg)}.mx_MessageComposer_sendMessage{cursor:pointer;position:relative;margin-right:6px;width:32px;height:32px;border-radius:100%;background-color:#0dbd8b}.mx_MessageComposer_sendMessage:before{position:absolute;height:16px;width:16px;top:8px;left:9px;-webkit-mask-image:url(../../img/element-icons/send-message.a4e9cf8.svg);mask-image:url(../../img/element-icons/send-message.a4e9cf8.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-color:#fff;content:""}.mx_MessageComposer_formatting{cursor:pointer;margin:0 11px;width:24px;height:18px}.mx_MessageComposer_formatbar_wrapper{width:100%;background-color:#fff;-webkit-box-shadow:inset 0 1px 0 0 rgba(0,0,0,.08);box-shadow:inset 0 1px 0 0 rgba(0,0,0,.08)}.mx_MessageComposer_formatbar{margin:auto;display:-webkit-box;display:-ms-flexbox;display:flex;height:30px;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:62px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1rem;color:#888}.mx_MessageComposer_formatbar *{margin-right:4px}.mx_MessageComposer_format_button,.mx_MessageComposer_formatbar_cancel,.mx_MessageComposer_formatbar_markdown{cursor:pointer}.mx_MessageComposer_formatbar_cancel{margin-right:22px}.mx_MessageComposer_formatbar_markdown{height:17px;width:30px;margin-right:64px}.mx_MessageComposer_input_markdownIndicator{height:10px;width:12px;padding:4px 4px 4px 0}.mx_MessageComposer_formatbar_markdown,.mx_MessageComposer_input_markdownIndicator{cursor:pointer;-webkit-mask-image:url(../../img/markdown.6905ba8.svg);mask-image:url(../../img/markdown.6905ba8.svg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#c1c6cd}.mx_MessageComposer_formatbar_markdown.mx_MessageComposer_markdownDisabled,.mx_MessageComposer_input_markdownIndicator.mx_MessageComposer_markdownDisabled{opacity:.2}.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input{min-height:50px}.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error{height:50px}.mx_MessageComposerFormatBar{display:none;width:130px;height:24px;position:absolute;cursor:pointer;border-radius:4px;background-color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1000}.mx_MessageComposerFormatBar.mx_MessageComposerFormatBar_shown{display:block}.mx_MessageComposerFormatBar>*{white-space:nowrap;display:inline-block;position:relative;border:1px solid #e9edf1;margin-left:-1px}.mx_MessageComposerFormatBar>:hover{border-color:#ddd;z-index:1}.mx_MessageComposerFormatBar>:first-child{border-radius:3px 0 0 3px}.mx_MessageComposerFormatBar>:last-child{border-radius:0 3px 3px 0}.mx_MessageComposerFormatBar>:only-child{border-radius:3px}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button{width:27px;height:24px;-webkit-box-sizing:border-box;box-sizing:border-box;background:none;vertical-align:middle}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#2e2f32}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconBold:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);mask-image:url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconItalic:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/italic.bf18054.svg);mask-image:url(../../img/element-icons/room/format-bar/italic.bf18054.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconStrikethrough:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);mask-image:url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconQuote:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);mask-image:url(../../img/element-icons/room/format-bar/quote.560cd8f.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconCode:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/code.27444ba.svg);mask-image:url(../../img/element-icons/room/format-bar/code.27444ba.svg)}.mx_MessageComposerFormatBar_buttonTooltip{white-space:nowrap;font-size:1.3rem;font-weight:600;min-width:54px;text-align:center}.mx_MessageComposerFormatBar_buttonTooltip .mx_MessageComposerFormatBar_tooltipShortcut{font-size:.9rem;opacity:.7}.mx_NewRoomIntro{margin:40px 0 48px 64px}.mx_NewRoomIntro .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):after,.mx_NewRoomIntro .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):before{content:unset}.mx_NewRoomIntro .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_NewRoomIntro .mx_NewRoomIntro_buttons{margin-top:28px}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton{line-height:2.4rem;display:inline-block}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:12px}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary_outline):before{content:"";display:inline-block;background-color:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;width:20px;height:20px;margin-right:5px;vertical-align:text-bottom}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_NewRoomIntro_inviteButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_NewRoomIntro>h2{margin-top:24px;font-size:2.4rem;font-weight:600}.mx_NewRoomIntro>p{margin:0;font-size:1.5rem;color:#737d8c}.mx_NotificationBadge:not(.mx_NotificationBadge_visible){display:none}.mx_NotificationBadge.mx_NotificationBadge_visible{background-color:#61708b;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_highlighted{background-color:#ff4b55}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot{background-color:#2e2f32;width:6px;height:6px;border-radius:6px}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char{width:1.6rem;height:1.6rem;border-radius:1.6rem}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_3char{width:2.6rem;height:1.6rem;border-radius:1.6rem}.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count{font-size:1rem;line-height:1.4rem;color:#fff}.mx_PinnedEventTile{min-height:40px;margin-bottom:5px;width:100%;border-radius:5px}.mx_PinnedEventTile:hover{background-color:#f6f7f8}.mx_PinnedEventTile .mx_PinnedEventTile_sender,.mx_PinnedEventTile .mx_PinnedEventTile_timestamp{color:#868686;font-size:.8em;vertical-align:top;display:inline-block;padding-bottom:3px}.mx_PinnedEventTile .mx_PinnedEventTile_timestamp{padding-left:15px;display:none}.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar{float:left;margin-right:10px}.mx_PinnedEventTile_actions{float:right;margin-right:10px;display:none}.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp{display:inline-block}.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions{display:block}.mx_PinnedEventTile_unpinButton{display:inline-block;cursor:pointer;margin-left:10px}.mx_PinnedEventTile_gotoButton{display:inline-block;font-size:.7em}.mx_PinnedEventTile_message{margin-left:50px;position:relative;top:0;left:0}.mx_PinnedEventsPanel{border-top:1px solid transparent}.mx_PinnedEventsPanel_body{max-height:300px;overflow-y:auto;padding-bottom:15px}.mx_PinnedEventsPanel_header{margin:0;padding-top:8px;padding-bottom:15px}.mx_PinnedEventsPanel_cancel{margin:12px;float:right;display:inline-block}.mx_PresenceLabel{font-size:1.1rem;opacity:.5}.mx_ReplyPreview{background:#fff;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;max-height:50vh;overflow:auto;-webkit-box-shadow:0 -16px 32px rgba(0,0,0,.04);box-shadow:0 -16px 32px rgba(0,0,0,.04)}.mx_ReplyPreview_section{border-bottom:1px solid transparent}.mx_ReplyPreview_header{margin:12px;color:#2e2f32;font-weight:400;opacity:.4}.mx_ReplyPreview_title{float:left}.mx_ReplyPreview_cancel{float:right;cursor:pointer}.mx_ReplyPreview_clear{clear:both}.mx_RoomBreadcrumbs{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb{margin-right:8px;width:32px}.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter{margin-left:-40px}.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter-active{margin-left:0;-webkit-transition:margin-left .64s cubic-bezier(.66,.02,.36,1);transition:margin-left .64s cubic-bezier(.66,.02,.36,1)}.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_placeholder{font-weight:600;font-size:1.4rem;line-height:32px;height:32px}.mx_RoomBreadcrumbs_Tooltip{margin-left:-42px;margin-top:-42px}.mx_RoomHeader{-webkit-box-flex:0;-ms-flex:0 0 50px;flex:0 0 50px;border-bottom:1px solid transparent;background-color:#fff}.mx_RoomHeader .mx_RoomHeader_e2eIcon{height:12px;width:12px}.mx_RoomHeader .mx_RoomHeader_e2eIcon .mx_E2EIcon{margin:0;position:absolute;height:12px;width:12px}.mx_RoomHeader_wrapper{margin:auto;height:50px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:0;padding:0 10px 0 18px}.mx_RoomHeader_wrapper .mx_InviteOnlyIcon_large{margin:0}.mx_RoomHeader_spinner{-webkit-box-flex:1;-ms-flex:1;flex:1;height:36px;padding-left:12px;padding-right:12px}.mx_RoomHeader_textButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;margin-right:8px;margin-top:-5px}.mx_RoomHeader_textButton_danger{background-color:#ff4b55}.mx_RoomHeader_cancelButton{cursor:pointer;padding-left:12px;padding-right:12px}.mx_RoomHeader_buttons{background-color:#fff}.mx_RoomHeader_buttons,.mx_RoomHeader_info{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_info{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomHeader_simpleHeader{line-height:5.2rem;color:#45474a;font-size:1.8rem;font-weight:600;overflow:hidden;margin-left:63px;text-overflow:ellipsis;width:100%}.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton{float:right}.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon{margin-left:14px;margin-right:24px;vertical-align:-4px}.mx_RoomHeader_name{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;overflow:hidden;color:#45474a;font-weight:600;font-size:1.8rem;margin:0 7px;border-bottom:1px solid transparent;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_nametext{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.mx_RoomHeader_settingsHint{color:#a2a2a2!important}.mx_RoomHeader_searchStatus{font-weight:400;opacity:.6}.mx_RoomHeader_avatar,.mx_RoomHeader_avatarPicker,.mx_RoomHeader_avatarPicker_edit,.mx_RoomHeader_avatarPicker_remove,.mx_RoomHeader_name{cursor:pointer}.mx_RoomHeader_avatarPicker_remove{position:absolute;top:-11px;right:-9px}.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable){color:#0dbd8b}.mx_RoomHeader_placeholder{color:#a2a2a2!important}.mx_RoomHeader_editable{border-bottom:1px solid #c7c7c7!important;min-width:150px;cursor:text}.mx_RoomHeader_editable:focus{border-bottom:1px solid #0dbd8b!important;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_RoomHeader_topic{-webkit-box-flex:1;-ms-flex:1;flex:1;color:#9e9e9e;font-weight:400;font-size:1.3rem;margin:4px 7px 0;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid transparent;line-height:1.2em;max-height:2.4em}.mx_RoomHeader_avatar{-webkit-box-flex:0;-ms-flex:0;flex:0;margin:0 6px 0 7px;position:relative}.mx_RoomHeader_avatar .mx_BaseAvatar_image{-o-object-fit:cover;object-fit:cover}.mx_RoomHeader_avatarPicker{position:relative}.mx_RoomHeader_avatarPicker_edit{position:absolute;left:16px;top:18px}.mx_RoomHeader_avatarPicker_edit>label{cursor:pointer}.mx_RoomHeader_avatarPicker_edit>input{display:none}.mx_RoomHeader_button{position:relative;margin-left:1px;margin-right:1px;cursor:pointer;height:32px;width:32px;border-radius:100%}.mx_RoomHeader_button:before{content:"";position:absolute;top:4px;left:4px;height:24px;width:24px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_RoomHeader_button:hover{background:rgba(13,189,139,.1)}.mx_RoomHeader_button:hover:before{background-color:#0dbd8b}.mx_RoomHeader_forgetButton:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg);width:26px}.mx_RoomHeader_appsButton:before{-webkit-mask-image:url(../../img/element-icons/room/apps.5ee9f78.svg);mask-image:url(../../img/element-icons/room/apps.5ee9f78.svg)}.mx_RoomHeader_appsButton_highlight:before{background-color:#0dbd8b}.mx_RoomHeader_searchButton:before{-webkit-mask-image:url(../../img/element-icons/room/search-inset.db6314d.svg);mask-image:url(../../img/element-icons/room/search-inset.db6314d.svg)}.mx_RoomHeader_voiceCallButton:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);-webkit-mask-size:20px;mask-size:20px;-webkit-mask-position:center;mask-position:center}.mx_RoomHeader_videoCallButton:before{-webkit-mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg);mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg)}.mx_RoomHeader_showPanel{height:16px}.mx_RoomHeader_voipButton{display:table-cell}.mx_RoomHeader_voipButtons{margin-top:18px}.mx_RoomHeader_pinnedButton:before{-webkit-mask-image:url(../../img/element-icons/room/pin.6ab67ed.svg);mask-image:url(../../img/element-icons/room/pin.6ab67ed.svg)}.mx_RoomHeader_pinsIndicator{position:absolute;right:0;bottom:4px;width:8px;height:8px;border-radius:8px;background-color:#8d99a5}.mx_RoomHeader_pinsIndicatorUnread{background-color:#ff4b55}@media only screen and (max-width:480px){.mx_RoomHeader_wrapper{padding:0}.mx_RoomHeader{overflow:hidden}}.mx_RoomList{padding-right:7px}.mx_RoomList_iconPlus:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg)}.mx_RoomList_iconHash:before{-webkit-mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg)}.mx_RoomList_iconExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_RoomList_iconBrowse:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_RoomList_iconDialpad:before{-webkit-mask-image:url(../../img/element-icons/roomlist/dialpad.37f876f.svg);mask-image:url(../../img/element-icons/roomlist/dialpad.37f876f.svg)}.mx_RoomList_explorePrompt{margin:4px 12px;padding-top:12px;border-top:1px solid #e7e7e7;font-size:1.4rem}.mx_RoomList_explorePrompt div:first-child{font-weight:600;line-height:1.8rem;color:#2e2f32}.mx_RoomList_explorePrompt .mx_AccessibleButton{color:#2e2f32;position:relative;padding:8px 8px 8px 32px;font-size:inherit;margin-top:12px;display:block;text-align:start;background-color:rgba(141,151,165,.2);border-radius:4px}.mx_RoomList_explorePrompt .mx_AccessibleButton:before{content:"";width:16px;height:16px;position:absolute;top:8px;left:8px;background:#737d8c;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_startChat:before{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_explore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_RoomPreviewBar{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-align-items:center}.mx_RoomPreviewBar h3{font-size:1.8rem;font-weight:600}.mx_RoomPreviewBar h3.mx_RoomPreviewBar_spinnerTitle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomPreviewBar .mx_RoomPreviewBar_message p,.mx_RoomPreviewBar h3{word-break:break-all;word-break:break-word}.mx_RoomPreviewBar .mx_Spinner{width:auto;height:auto;margin:10px 10px 10px 0;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomPreviewBar .mx_RoomPreviewBar_footer{font-size:1.2rem;line-height:2rem}.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner{vertical-align:middle;display:inline-block}.mx_RoomPreviewBar_actions,.mx_RoomPreviewBar_message{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomPreviewBar_message{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.mx_RoomPreviewBar_message p{overflow-wrap:break-word}.mx_RoomPreviewBar_panel{padding:8px 8px 8px 20px;border-top:1px solid transparent;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:3px 8px}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions>*{margin-left:12px}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;min-width:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message>*{margin:4px}.mx_RoomPreviewBar_dialog{margin:auto;-webkit-box-sizing:content;box-sizing:content;width:400px;border-radius:4px;padding:20px;text-align:center}.mx_RoomPreviewBar_dialog,.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message>*{margin:5px 0 20px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton{padding:7px 50px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions>*{margin-top:12px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton.mx_AccessibleButton_kind_primary{margin-bottom:7px}.mx_RoomPreviewBar_inviter{font-weight:600}a.mx_RoomPreviewBar_inviter{text-decoration:underline;cursor:pointer}.mx_RoomSublist{margin-left:8px;margin-bottom:4px}.mx_RoomSublist.mx_RoomSublist_hidden{display:none}.mx_RoomSublist .mx_RoomSublist_headerContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:8px;max-height:24px;color:#8d99a5}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky{position:fixed;height:32px;width:calc(100% - 22px)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer .mx_NotificationBadge{margin-left:8px}.mx_RoomSublist .mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_NotificationBadge{margin-right:4px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton{margin-left:8px;position:relative;width:24px;height:24px;border-radius:8px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:before{content:"";width:16px;height:16px;position:absolute;top:4px;left:4px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#61708b}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:hover{background:rgba(141,151,165,.2)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton{visibility:hidden;width:0;margin:0}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus.daac9ba.svg);mask-image:url(../../img/element-icons/roomlist/plus.daac9ba.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:before{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:calc(100% - 16px);line-height:1.6rem;font-size:1.3rem;font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn{display:inline-block;position:relative;width:14px;height:14px;margin-right:6px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn:before{content:"";width:18px;height:18px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn.mx_RoomSublist_collapseBtn_collapsed:before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_RoomSublist:first-child .mx_RoomSublist_headerContainer{height:0;padding-bottom:4px}.mx_RoomSublist .mx_RoomSublist_resizeBox{position:relative;-ms-flex-direction:column;flex-direction:column}.mx_RoomSublist .mx_RoomSublist_resizeBox,.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;overflow:hidden}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;-ms-flex-direction:column;flex-direction:column;-webkit-mask-image:linear-gradient(0deg,transparent,#000 4px);mask-image:linear-gradient(0deg,transparent,#000 4px)}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles_showNButton{-webkit-box-flex:0;-ms-flex:0 0 32px;flex:0 0 32px}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles{-webkit-box-flex:0;-ms-flex:0 0 4px;flex:0 0 4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandle{cursor:ns-resize;border-radius:3px;max-width:64px;height:4px!important;position:relative!important;bottom:0!important}.mx_RoomSublist .mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_resizerHandle,.mx_RoomSublist .mx_RoomSublist_resizeBox:hover .mx_RoomSublist_resizerHandle{opacity:.8;background-color:#2e2f32}.mx_RoomSublist .mx_RoomSublist_showNButton{cursor:pointer;font-size:1.3rem;line-height:1.8rem;color:#737d8c;height:24px;padding-bottom:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron{position:relative;width:18px;height:18px;margin-left:12px;margin-right:16px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#8d99a5;left:-1px}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron,.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showMoreButtonChevron{-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mx_RoomSublist.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,.mx_RoomSublist:not(.mx_RoomSublist_minimized)>.mx_RoomSublist_headerContainer:focus-within .mx_RoomSublist_menuButton,.mx_RoomSublist:not(.mx_RoomSublist_minimized)>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton{visibility:visible;width:24px;margin-left:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer{height:auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0;-ms-flex-item-align:end;align-self:flex-end;margin-right:0}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;max-width:100%}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;visibility:visible;width:32px!important;height:32px!important;margin-left:0!important;background-color:rgba(141,151,165,.2);margin-top:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before{top:8px;left:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_resizeBox{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron{margin-right:12px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_menuButton{height:16px}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton{visibility:visible;position:absolute;bottom:48px;right:0;width:16px;height:16px;border-radius:0;z-index:1;background-color:hsla(0,0%,96.1%,.9)}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton:before,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton:before{top:0;left:0}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton{bottom:8px}.mx_RoomSublist_contextMenu{padding:20px 16px;width:250px}.mx_RoomSublist_contextMenu hr{margin-top:16px;margin-bottom:16px;margin-right:16px;border:1px solid #2e2f32;opacity:.1}.mx_RoomSublist_contextMenu .mx_RoomSublist_contextMenu_title{font-size:1.5rem;line-height:2rem;font-weight:600;margin-bottom:4px}.mx_RoomSublist_contextMenu .mx_Checkbox,.mx_RoomSublist_contextMenu .mx_RadioButton{margin-top:8px}.mx_RoomSublist_addRoomTooltip{margin-top:-3px}.mx_RoomSublist_skeletonUI{position:relative;margin-left:4px;height:288px}.mx_RoomSublist_skeletonUI:before{background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(hsla(0,0%,100%,0)));background:linear-gradient(180deg,#fff,hsla(0,0%,100%,0));width:100%;height:100%;content:"";position:absolute;-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;-webkit-mask-size:auto 48px;mask-size:auto 48px;-webkit-mask-image:url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);mask-image:url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg)}.mx_RoomTile{margin-bottom:4px;padding:4px;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomTile.mx_RoomTile_hasMenuOpen,.mx_RoomTile.mx_RoomTile_selected,.mx_RoomTile:focus-within,.mx_RoomTile:hover{background-color:#fff;border-radius:8px}.mx_RoomTile .mx_DecoratedRoomAvatar,.mx_RoomTile .mx_RoomTile_avatarContainer{margin-right:8px}.mx_RoomTile .mx_RoomTile_nameContainer{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-width:0;margin-right:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview,.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name{margin:0 2px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name{font-size:1.4rem;line-height:1.8rem}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents{font-weight:600}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview{font-size:1.3rem;line-height:1.8rem;color:#737d8c}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_nameWithPreview{margin-top:-4px}.mx_RoomTile .mx_RoomTile_notificationsButton{margin-left:4px}.mx_RoomTile .mx_RoomTile_badgeContainer{height:16px;margin:auto 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge{margin-right:2px}.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge_dot{margin-left:5px;margin-right:7px}.mx_RoomTile .mx_RoomTile_menuButton,.mx_RoomTile .mx_RoomTile_notificationsButton{width:20px;min-width:20px;height:20px;margin-top:auto;margin-bottom:auto;position:relative;display:none}.mx_RoomTile .mx_RoomTile_menuButton:before,.mx_RoomTile .mx_RoomTile_notificationsButton:before{top:2px;left:2px;content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_RoomTile .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show{display:block}.mx_RoomTile .mx_RoomTile_menuButton:before{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_badgeContainer,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_badgeContainer,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_badgeContainer{width:0;height:0;display:none}.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_notificationsButton,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_notificationsButton,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_notificationsButton{display:block}.mx_RoomTile.mx_RoomTile_minimized{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative}.mx_RoomTile.mx_RoomTile_minimized .mx_DecoratedRoomAvatar,.mx_RoomTile.mx_RoomTile_minimized .mx_RoomTile_avatarContainer{margin-right:0}.mx_RoomTile_iconBell:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RoomTile_iconBellDot:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);mask-image:url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg)}.mx_RoomTile_iconBellCrossed:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg)}.mx_RoomTile_iconBellMentions:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);mask-image:url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconStar:before{-webkit-mask-image:url(../../img/element-icons/roomlist/favorite.ff7609d.svg);mask-image:url(../../img/element-icons/roomlist/favorite.ff7609d.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconArrowDown:before{-webkit-mask-image:url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);mask-image:url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconSignOut:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_RoomUpgradeWarningBar{max-height:235px;background-color:#f7f7f7;padding-left:20px;padding-right:20px;overflow:scroll}.mx_RoomUpgradeWarningBar_wrapped{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center}.mx_RoomUpgradeWarningBar_header{color:#ff4b55;font-weight:700}.mx_RoomUpgradeWarningBar_body{color:#ff4b55}.mx_RoomUpgradeWarningBar_upgradelink{color:#ff4b55;text-decoration:underline}.mx_RoomUpgradeWarningBar_small{color:#888;font-size:70%}.mx_SearchBar{height:56px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid transparent}.mx_SearchBar .mx_SearchBar_input{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;margin-left:22px}.mx_SearchBar .mx_SearchBar_searchButton{cursor:pointer;width:37px;height:37px;background-color:#0dbd8b;-webkit-mask:url(../../img/feather-customised/search-input.044bfa7.svg);mask:url(../../img/feather-customised/search-input.044bfa7.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mx_SearchBar .mx_SearchBar_buttons{display:inherit}.mx_SearchBar .mx_SearchBar_button{border:0;margin:0 0 0 22px;padding:5px;font-size:1.5rem;cursor:pointer;color:#2e2f32;border-bottom:2px solid #0dbd8b;font-weight:600}.mx_SearchBar .mx_SearchBar_unselected{color:#9fa9ba;border-color:transparent}.mx_SearchBar .mx_SearchBar_cancel{background-color:#ff4b55;-webkit-mask:url(../../img/cancel.4b9715b.svg);mask:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14px;mask-size:14px;padding:9px;margin:0 12px 0 3px;cursor:pointer}.mx_SendMessageComposer{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;font-size:1.4rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-right:6px;min-width:0}.mx_SendMessageComposer,.mx_SendMessageComposer .mx_BasicMessageComposer{-webkit-box-flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_SendMessageComposer .mx_BasicMessageComposer{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;min-height:50px}.mx_SendMessageComposer .mx_BasicMessageComposer .mx_BasicMessageComposer_input{padding:3px 0;margin:auto 0;max-height:140px;overflow-y:auto}.mx_Stickers_content{overflow:hidden}.mx_Stickers_content_container{overflow:hidden;height:300px}#mx_persistedElement_stickerPicker .mx_AppTileFullWidth{height:unset;-webkit-box-sizing:border-box;box-sizing:border-box;border-left:none;border-right:none;border-bottom:none}#mx_persistedElement_stickerPicker .mx_AppTileMenuBar{padding:0}#mx_persistedElement_stickerPicker iframe{height:283px}.mx_Stickers_contentPlaceholder{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.mx_Stickers_contentPlaceholder p{max-width:200px}.mx_Stickers_addLink{display:inline;cursor:pointer;color:#0dbd8b}.mx_Stickers_hideStickers{z-index:2001}.mx_TopUnreadMessagesBar{z-index:1000;position:absolute;top:24px;right:24px;width:38px}.mx_TopUnreadMessagesBar:after{content:"";position:absolute;top:-8px;left:10.5px;width:4px;height:4px;border-radius:16px;background-color:#f2f5f8;border:6px solid #0dbd8b;pointer-events:none}.mx_TopUnreadMessagesBar_scrollUp{height:38px;border-radius:19px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1.3px solid #61708b;cursor:pointer}.mx_TopUnreadMessagesBar_scrollUp:before{content:"";position:absolute;width:36px;height:36px;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;background:#61708b;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mx_TopUnreadMessagesBar_markAsRead{display:block;width:18px;height:18px;background:#fff;border:1.3px solid #61708b;border-radius:10px;margin:5px auto}.mx_TopUnreadMessagesBar_markAsRead:before{content:"";position:absolute;width:18px;height:18px;-webkit-mask-image:url(../../img/cancel.4b9715b.svg);mask-image:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:10px;mask-size:10px;-webkit-mask-position:4px 4px;mask-position:4px 4px;background:#61708b}.mx_VoiceRecordComposerTile_stop{width:28px;height:28px;border:2px solid #e3e8f0;border-radius:32px;margin-right:16px;position:relative}.mx_VoiceRecordComposerTile_stop:after{content:"";width:14px;height:14px;position:absolute;top:7px;left:7px;border-radius:2px;background-color:#ff4b55}.mx_VoiceRecordComposerTile_delete{width:14px;height:18px;vertical-align:middle;margin-right:11px;background-color:#8d99a5;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg)}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer{margin:6px 12px 6px 6px;position:relative}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording{padding-left:22px}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording:before{-webkit-animation:recording-pulse 2s infinite;animation:recording-pulse 2s infinite;content:"";background-color:#ff4b55;width:10px;height:10px;position:absolute;left:12px;top:18px;border-radius:10px}@-webkit-keyframes recording-pulse{0%{opacity:1}35%{opacity:0}65%{opacity:1}}@keyframes recording-pulse{0%{opacity:1}35%{opacity:0}65%{opacity:1}}.mx_WhoIsTypingTile{margin-left:-18px;padding-top:18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_WhoIsTypingTile_avatars{-webkit-box-flex:0;-ms-flex:0 0 83px;flex:0 0 83px;text-align:center}.mx_WhoIsTypingTile_avatars>:not(:first-child){margin-left:-12px}.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial{padding-top:1px}.mx_WhoIsTypingTile_avatars .mx_BaseAvatar{border:1px solid #fff;border-radius:40px}.mx_WhoIsTypingTile_remainingAvatarPlaceholder{position:relative;display:inline-block;color:#acacac;background-color:#ddd;border:1px solid #fff;border-radius:40px;width:24px;height:24px;line-height:2.4rem;font-size:.8em;vertical-align:top;text-align:center}.mx_WhoIsTypingTile_label{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:1.4rem;font-weight:600;color:#9e9e9e}.mx_WhoIsTypingTile_label>span{background-image:url(../../img/typing-indicator-2x.0eb9f0e.gif);background-size:25px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:15px;display:block}.mx_MatrixChat_useCompactLayout .mx_WhoIsTypingTile{padding-top:4px}.mx_AvatarSetting_avatar{width:90px;min-width:90px;height:90px;margin-top:8px;position:relative}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover{-webkit-transition:opacity .08s cubic-bezier(.46,.03,.52,.96);transition:opacity .08s cubic-bezier(.46,.03,.52,.96);position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;line-height:90px;text-align:center}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover>span{color:#fff;position:relative;font-weight:500}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover .mx_AvatarSetting_hoverBg{position:absolute;top:0;bottom:0;left:0;right:0;opacity:.5;background-color:#2e2f32;border-radius:90px}.mx_AvatarSetting_avatar.mx_AvatarSetting_avatar_hovering .mx_AvatarSetting_hover{opacity:1}.mx_AvatarSetting_avatar:not(.mx_AvatarSetting_avatar_hovering) .mx_AvatarSetting_hover{opacity:0}.mx_AvatarSetting_avatar>*{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_primary{margin-top:8px}.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm{width:100%}.mx_AvatarSetting_avatar>img{cursor:pointer;-o-object-fit:cover;object-fit:cover}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder,.mx_AvatarSetting_avatar>img{display:block;height:90px;width:inherit;border-radius:90px;cursor:pointer}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before{background-color:#2e2f32;-webkit-mask:url(../../img/feather-customised/user.7a4d23d.svg);mask:url(../../img/feather-customised/user.7a4d23d.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:36px;mask-size:36px;-webkit-mask-position:center;mask-position:center;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton{width:32px;height:32px;border-radius:32px;background-color:#e7e7e7;position:absolute;bottom:0;right:0}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton:before{content:"";display:block;width:100%;height:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:55%;mask-size:55%;background-color:#2e2f32;-webkit-mask-image:url(../../img/feather-customised/edit.fd55ec2.svg);mask-image:url(../../img/feather-customised/edit.fd55ec2.svg)}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder{background-color:#f4f6fa}.mx_CrossSigningPanel_statusList{border-spacing:0}.mx_CrossSigningPanel_statusList td{padding:0}.mx_CrossSigningPanel_statusList td:first-of-type{-webkit-padding-end:1em;padding-inline-end:1em}.mx_CrossSigningPanel_buttonRow{margin:1em 0}.mx_CrossSigningPanel_buttonRow :nth-child(n+1){-webkit-margin-end:10px;margin-inline-end:10px}.mx_DevicesPanel{display:table;table-layout:fixed;width:880px;border-spacing:10px}.mx_DevicesPanel_header{display:table-header-group;font-weight:700}.mx_DevicesPanel_header>.mx_DevicesPanel_deviceButtons{height:48px}.mx_DevicesPanel_header>div{display:table-cell;vertical-align:middle}.mx_DevicesPanel_header .mx_DevicesPanel_deviceName{width:50%}.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen{width:30%}.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons{width:20%}.mx_DevicesPanel_device{display:table-row}.mx_DevicesPanel_device>div{display:table-cell}.mx_DevicesPanel_myDevice{font-weight:700}.mx_E2eAdvancedPanel_settingLongDescription{margin-right:150px}.mx_ExistingEmailAddress{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingEmailAddress_delete{margin-right:5px;cursor:pointer;vertical-align:middle}.mx_ExistingEmailAddress_email,.mx_ExistingEmailAddress_promptText{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_ExistingEmailAddress_confirmBtn{margin-left:5px}.mx_IntegrationManager .mx_Dialog{width:60%;height:70%;overflow:hidden;padding:0;max-width:none;max-height:none}.mx_IntegrationManager iframe{background-color:#fff;border:0;width:100%;height:100%}.mx_IntegrationManager_loading h3{text-align:center}.mx_IntegrationManager_error{text-align:center;padding-top:20px}.mx_IntegrationManager_error h3{color:#ff4b55}.mx_UserNotifSettings_tableRow{display:table-row}.mx_UserNotifSettings_inputCell{display:table-cell;padding-bottom:8px;padding-right:8px;width:16px}.mx_UserNotifSettings_labelCell{padding-bottom:8px;width:400px;display:table-cell}.mx_UserNotifSettings_pushRulesTableWrapper{padding-bottom:8px}.mx_UserNotifSettings_pushRulesTable{width:100%;table-layout:fixed}.mx_UserNotifSettings_pushRulesTable thead{font-weight:700}.mx_UserNotifSettings_pushRulesTable tbody th{font-weight:400}.mx_UserNotifSettings_pushRulesTable tbody th:first-child{text-align:left}.mx_UserNotifSettings_keywords{cursor:pointer;color:#0dbd8b}.mx_UserNotifSettings_devicesTable td{padding-left:20px;padding-right:20px}.mx_UserNotifSettings_notifTable{display:table;position:relative}.mx_UserNotifSettings_notifTable .mx_Spinner{position:absolute}.mx_NotificationSound_soundUpload{display:none}.mx_NotificationSound_browse{color:#0dbd8b;border:1px solid #0dbd8b;background-color:transparent}.mx_NotificationSound_save{margin-left:5px;color:#fff;background-color:#0dbd8b}.mx_NotificationSound_resetSound{margin-top:5px;color:#fff;border:#ff4b55;background-color:#ff4b55}.mx_ExistingPhoneNumber{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingPhoneNumber_delete{margin-right:5px;cursor:pointer;vertical-align:middle}.mx_ExistingPhoneNumber_address,.mx_ExistingPhoneNumber_promptText{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_ExistingPhoneNumber_confirmBtn{margin-left:5px}.mx_ExistingPhoneNumber_verification{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ExistingPhoneNumber_verification .mx_Field{margin:0 0 0 1em}.mx_PhoneNumbers_input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_PhoneNumbers_input>.mx_Field{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_PhoneNumbers_country{width:80px}.mx_ProfileSettings_controls_topic>textarea{resize:vertical}.mx_ProfileSettings_profile{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ProfileSettings_controls{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin-right:54px}.mx_ProfileSettings_controls .mx_SettingsTab_subheading{margin-top:0}.mx_ProfileSettings_controls .mx_Field #profileTopic{height:4em}.mx_ProfileSettings_controls .mx_Field:first-child{margin-top:0}.mx_ProfileSettings_hostingSignup{margin-left:20px}.mx_ProfileSettings_hostingSignup img{margin-left:5px}.mx_ProfileSettings_avatarUpload{display:none}.mx_ProfileSettings_profileForm{margin-right:100px;border-bottom:1px solid #e7e7e7}.mx_ProfileSettings_buttons{margin-top:10px;margin-bottom:28px}.mx_ProfileSettings_buttons>.mx_AccessibleButton_kind_link{padding-left:0}.mx_SecureBackupPanel_deviceNotVerified,.mx_SecureBackupPanel_deviceVerified,.mx_SecureBackupPanel_sigInvalid,.mx_SecureBackupPanel_sigValid{font-weight:700}.mx_SecureBackupPanel_deviceVerified,.mx_SecureBackupPanel_sigValid{color:#76cfa5}.mx_SecureBackupPanel_deviceNotVerified,.mx_SecureBackupPanel_sigInvalid{color:#ba6363}.mx_SecureBackupPanel_deviceName{font-style:italic}.mx_SecureBackupPanel_buttonRow{margin:1em 0}.mx_SecureBackupPanel_buttonRow :nth-child(n+1){-webkit-margin-end:10px;margin-inline-end:10px}.mx_SecureBackupPanel_statusList{border-spacing:0}.mx_SecureBackupPanel_statusList td{padding:0}.mx_SecureBackupPanel_statusList td:first-of-type{-webkit-padding-end:1em;padding-inline-end:1em}.mx_SetIdServer .mx_Field_input{margin-right:100px}.mx_SetIdServer_tooltip{max-width:120px}.mx_SetIntegrationManager{margin-top:10px;margin-bottom:10px}.mx_SetIntegrationManager>.mx_SettingsTab_heading{margin-bottom:10px}.mx_SetIntegrationManager>.mx_SettingsTab_heading>.mx_SettingsTab_subheading{display:inline-block;padding-left:5px}.mx_SetIntegrationManager .mx_ToggleSwitch{display:inline-block;float:right;top:9px;margin-right:100px}.mx_ExistingSpellCheckLanguage{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingSpellCheckLanguage_language{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_GeneralUserSettingsTab_spellCheckLanguageInput{margin-top:1em;margin-bottom:1em}.mx_SpellCheckLanguages{margin-right:100px}.mx_UpdateCheckButton_summary{margin-left:16px}.mx_UpdateCheckButton_summary .mx_AccessibleButton_kind_link{padding:0}.mx_SettingsTab{color:#61708b}.mx_SettingsTab_warningText{color:#ff4b55}.mx_SettingsTab_heading{font-size:2rem;font-weight:600;color:#2e2f32;margin-bottom:10px}.mx_SettingsTab_heading:nth-child(n+2){margin-top:30px}.mx_SettingsTab_subheading{font-size:1.6rem;display:block;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-weight:600;color:#2e2f32;margin-bottom:10px;margin-top:12px}.mx_SettingsTab_subsectionText{color:#61708b;font-size:1.4rem;display:block;margin:10px 100px 10px 0}.mx_SettingsTab_section{margin-bottom:24px}.mx_SettingsTab_section .mx_SettingsFlag{margin-right:100px;margin-bottom:10px}.mx_SettingsTab_section.mx_SettingsTab_subsectionText .mx_SettingsFlag{margin-right:0!important}.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label{vertical-align:middle;display:inline-block;font-size:1.4rem;color:#2e2f32;max-width:calc(100% - 4.8rem);-webkit-box-sizing:border-box;box-sizing:border-box;padding-right:10px}.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch{float:right}.mx_SettingsTab_linkBtn{cursor:pointer;color:#0dbd8b;word-break:break-all}.mx_SettingsTab a{color:#238cf5}.mx_GeneralRoomSettingsTab_profileSection{margin-top:10px}.mx_RolesRoomSettingsTab ul{margin-bottom:0}.mx_RolesRoomSettingsTab_unbanBtn{margin-right:10px;margin-bottom:5px}.mx_SecurityRoomSettingsTab_warning{display:block}.mx_SecurityRoomSettingsTab_warning img{vertical-align:middle;margin-right:5px;margin-left:3px;margin-bottom:5px}.mx_SecurityRoomSettingsTab_encryptionSection{margin-bottom:25px}.mx_AppearanceUserSettingsTab_fontSlider,.mx_AppearanceUserSettingsTab_fontSlider_preview,.mx_AppearanceUserSettingsTab_Layout{margin-right:100px}.mx_AppearanceUserSettingsTab .mx_Field{width:256px}.mx_AppearanceUserSettingsTab_fontScaling{color:#2e2f32}.mx_AppearanceUserSettingsTab_fontSlider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:15px;background:rgba(227,232,240,.2);border-radius:10px;font-size:10px;margin-top:24px;margin-bottom:24px}.mx_AppearanceUserSettingsTab_fontSlider_preview{border:1px solid #e3e8f0;border-radius:10px;padding:0 16px 9px;pointer-events:none}.mx_AppearanceUserSettingsTab_fontSlider_preview .mx_EventTile_msgOption{display:none}.mx_AppearanceUserSettingsTab_fontSlider_preview.mx_IRCLayout{padding-top:9px}.mx_AppearanceUserSettingsTab_fontSlider_smallText{font-size:15px;padding-right:20px;padding-left:5px;font-weight:500}.mx_AppearanceUserSettingsTab_fontSlider_largeText{font-size:18px;padding-left:20px;padding-right:5px;font-weight:500}.mx_AppearanceUserSettingsTab>.mx_SettingsTab_SubHeading{margin-bottom:32px}.mx_AppearanceUserSettingsTab_themeSection{color:#2e2f32}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:4px;margin-bottom:30px}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton{padding:1.6rem;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:10px;width:180px;background:#e3e8f0;opacity:.4;-ms-flex-negative:1;flex-shrink:1;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;margin-right:15px;margin-top:10px;font-weight:600;color:#61708b}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton>span{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled{opacity:1}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_light{background-color:#f3f8fd;color:#2e2f32}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark{background-color:#25282e;color:#f3f8fd}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark>input>div,.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark>input>div>div{border-color:#e3e8f0}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black{background-color:#000;color:#f3f8fd}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black>input>div,.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black>input>div>div{border-color:#e3e8f0}.mx_SettingsTab_customFontSizeField{margin-left:calc(1.6rem + 10px)}.mx_AppearanceUserSettingsTab_Layout_RadioButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:#2e2f32}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_AppearanceUserSettingsTab_spacer{width:24px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:1;flex-shrink:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:300px;border:1px solid #e3e8f0;border-radius:10px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_EventTile_msgOption,.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_MessageActionBar{display:none}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px;pointer-events:none}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_RadioButton{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;padding:10px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_EventTile_content{margin-right:0}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected{border-color:#0dbd8b}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton{border-top:1px solid #e3e8f0}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton>input+div{border-color:rgba(97,112,139,.2)}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton_checked{background-color:rgba(13,189,139,.08)}.mx_AppearanceUserSettingsTab_Advanced{color:#2e2f32}.mx_AppearanceUserSettingsTab_Advanced>*{margin-bottom:16px}.mx_AppearanceUserSettingsTab_Advanced .mx_AppearanceUserSettingsTab_AdvancedToggle{color:#0dbd8b;cursor:pointer}.mx_AppearanceUserSettingsTab_Advanced .mx_AppearanceUserSettingsTab_systemFont{margin-left:calc(1.6rem + 10px)}.mx_GeneralUserSettingsTab_changePassword .mx_Field{margin-right:100px}.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child{margin-top:0}.mx_GeneralUserSettingsTab_accountSection .mx_SettingsTab_subheading:nth-child(n+1),.mx_GeneralUserSettingsTab_discovery .mx_SettingsTab_subheading:nth-child(n+2),.mx_SetIdServer .mx_SettingsTab_subheading{margin-top:24px}.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,.mx_GeneralUserSettingsTab_discovery .mx_Spinner{-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left}.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,.mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber,.mx_GeneralUserSettingsTab_languageInput{margin-right:100px}.mx_GeneralUserSettingsTab_warningIcon{vertical-align:middle}.mx_HelpUserSettingsTab_debugButton{margin-bottom:5px;margin-top:5px}.mx_HelpUserSettingsTab span.mx_AccessibleButton{word-break:break-word}.mx_HelpUserSettingsTab code{word-break:break-all;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.mx_HelpUserSettingsTab_accessToken{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-radius:5px;border:1px solid #747474;margin-bottom:10px;margin-top:10px;padding:10px}.mx_HelpUserSettingsTab_accessToken_copy{-ms-flex-negative:0;flex-shrink:0;cursor:pointer;margin-left:20px;display:inherit}.mx_HelpUserSettingsTab_accessToken_copy>div{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);background-color:#2e2f32;margin-left:5px;width:20px;height:20px;background-repeat:no-repeat}.mx_LabsUserSettingsTab .mx_SettingsTab_section{margin-top:32px}.mx_LabsUserSettingsTab .mx_SettingsTab_section .mx_SettingsFlag{margin-right:0}.mx_MjolnirUserSettingsTab .mx_Field{margin-right:100px}.mx_MjolnirUserSettingsTab_listItem{margin-bottom:2px}.mx_NotificationUserSettingsTab .mx_SettingsTab_heading{margin-bottom:10px}.mx_PreferencesUserSettingsTab .mx_Field{margin-right:100px}.mx_PreferencesUserSettingsTab .mx_SettingsTab_section{margin-bottom:30px}.mx_SecurityUserSettingsTab .mx_DevicesPanel{width:auto;max-width:880px}.mx_SecurityUserSettingsTab_deviceInfo{display:table;padding-left:0}.mx_SecurityUserSettingsTab_deviceInfo>li{display:table-row}.mx_SecurityUserSettingsTab_deviceInfo>li>label,.mx_SecurityUserSettingsTab_deviceInfo>li>span{display:table-cell;padding-right:1em}.mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton,.mx_SecurityUserSettingsTab_importExportButtons .mx_AccessibleButton{margin-right:10px}.mx_SecurityUserSettingsTab_importExportButtons{margin-bottom:15px}.mx_SecurityUserSettingsTab_ignoredUser{margin-bottom:5px}.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton{margin-right:10px}.mx_SecurityUserSettingsTab .mx_SettingsTab_section .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning{color:#ff4b55;position:relative;padding-left:40px;margin-top:30px}.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning:before{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:2.4rem;mask-size:2.4rem;position:absolute;width:2.4rem;height:2.4rem;content:"";top:0;left:0;background-color:#ff4b55;-webkit-mask-image:url(../../img/feather-customised/alert-triangle.38aca3a.svg);mask-image:url(../../img/feather-customised/alert-triangle.38aca3a.svg)}.mx_VoiceUserSettingsTab .mx_Field{margin-right:100px}.mx_VoiceUserSettingsTab_missingMediaPermissions{margin-bottom:15px}.mx_SpaceBasicSettings .mx_Field{margin:32px 0}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:24px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer .mx_SpaceBasicSettings_avatar{position:relative;height:80px;width:80px;background-color:#8d99a5;border-radius:16px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer img.mx_SpaceBasicSettings_avatar{width:80px;height:80px;-o-object-fit:cover;object-fit:cover;border-radius:16px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar{cursor:pointer}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar:before{content:"";position:absolute;height:80px;width:80px;top:0;left:0;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-image:url(../../img/element-icons/camera.a81a395.svg);mask-image:url(../../img/element-icons/camera.a81a395.svg)}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>input[type=file]{display:none}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>.mx_AccessibleButton_kind_link{display:inline-block;padding:0;margin:auto 16px;color:#368bd6}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>.mx_SpaceBasicSettings_avatar_remove{color:#ff4b55}.mx_SpaceBasicSettings .mx_FormButton{padding:8px 22px;margin-left:auto;display:block;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_SpaceBasicSettings .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background{background-color:rgba(46,48,51,.38);opacity:.6;left:71px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu{padding:24px;width:480px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#fff;position:relative}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu>div>h2{font-weight:600;font-size:1.8rem;margin-top:4px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu>div>p{font-size:1.5rem;color:#737d8c;margin:0}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_BetaCard_betaPill{position:absolute;top:24px;right:24px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType>h3{font-weight:600;margin:0 0 4px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType>span{color:#737d8c}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover{border-color:#0dbd8b}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover:before{background-color:#0dbd8b}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover>span{color:#2e2f32}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_public:before{-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_private:before{-webkit-mask-image:url(../../img/element-icons/lock.1f264bd.svg);mask-image:url(../../img/element-icons/lock.1f264bd.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back{width:28px;height:28px;position:relative;background-color:rgba(141,151,165,.2);border-radius:14px;margin-bottom:12px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back:before{content:"";position:absolute;height:28px;width:28px;top:0;left:0;background-color:#8d99a5;-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:2px 3px;mask-position:2px 3px;-webkit-mask-size:24px;mask-size:24px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_kind_primary{padding:8px 22px;margin-left:auto;display:block;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpacePublicShare .mx_AccessibleButton{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpacePublicShare .mx_AccessibleButton>h3{font-weight:600;margin:0 0 4px}.mx_SpacePublicShare .mx_AccessibleButton>span{color:#737d8c}.mx_SpacePublicShare .mx_AccessibleButton:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpacePublicShare .mx_AccessibleButton:hover{border-color:#0dbd8b}.mx_SpacePublicShare .mx_AccessibleButton:hover:before{background-color:#0dbd8b}.mx_SpacePublicShare .mx_AccessibleButton:hover>span{color:#2e2f32}.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_shareButton:before{-webkit-mask-image:url(../../img/element-icons/link.8f4b1fc.svg);mask-image:url(../../img/element-icons/link.8f4b1fc.svg)}.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_inviteButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_InlineTermsAgreement_cbContainer{margin-bottom:10px;font-size:1.4rem}.mx_InlineTermsAgreement_cbContainer a{color:#0dbd8b;text-decoration:none}.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox{margin-top:10px}.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox input{vertical-align:text-bottom}.mx_InlineTermsAgreement_link{display:inline-block;-webkit-mask-image:url(../../img/external-link.a8d3e9b.svg);mask-image:url(../../img/external-link.a8d3e9b.svg);background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:12px;height:12px;margin-left:3px;vertical-align:middle}.mx_AnalyticsToast .mx_AccessibleButton_kind_danger{background:none;color:#0dbd8b}.mx_AnalyticsToast .mx_AccessibleButton_kind_primary{background:#0dbd8b;color:#fff}.mx_NonUrgentEchoFailureToast .mx_NonUrgentEchoFailureToast_icon{display:inline-block;width:1.8rem;height:1.8rem;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#fff;-webkit-mask-image:url(../../img/element-icons/cloud-off.33cd28e.svg);mask-image:url(../../img/element-icons/cloud-off.33cd28e.svg);margin-right:8px}.mx_NonUrgentEchoFailureToast span{vertical-align:middle}.mx_NonUrgentEchoFailureToast .mx_AccessibleButton{padding:0}.mx_VerificationShowSas_decimalSas{text-align:center;font-weight:700;padding-left:3px;padding-right:3px}.mx_VerificationShowSas_decimalSas span{margin-left:5px;margin-right:5px}.mx_VerificationShowSas_emojiSas{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:25px 0}.mx_VerificationShowSas_emojiSas_block{display:inline-block;margin-bottom:16px;position:relative;width:52px}.mx_AuthPage_modal .mx_VerificationShowSas_emojiSas_block,.mx_Dialog .mx_VerificationShowSas_emojiSas_block{width:60px}.mx_VerificationShowSas_emojiSas_emoji{font-size:3.2rem}.mx_VerificationShowSas_emojiSas_label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:1.2rem}.mx_VerificationShowSas_emojiSas_break{-ms-flex-preferred-size:100%;flex-basis:100%}.mx_VerificationShowSas .mx_Dialog_buttons button.mx_VerificationShowSas_matchButton{color:#0dbd8b;background-color:rgba(3,179,129,.16);border:none}.mx_VerificationShowSas .mx_Dialog_buttons button.mx_VerificationShowSas_noMatchButton{color:#ff4b55;background-color:rgba(255,75,85,.16);border:none}.mx_PlayPauseButton{position:relative;width:32px;height:32px;border-radius:32px;background-color:#fff}.mx_PlayPauseButton:before{content:"";position:absolute;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_PlayPauseButton.mx_PlayPauseButton_disabled:before{opacity:.5}.mx_PlayPauseButton.mx_PlayPauseButton_play:before{width:13px;height:16px;top:8px;left:12px;-webkit-mask-image:url(../../img/element-icons/play.a72552b.svg);mask-image:url(../../img/element-icons/play.a72552b.svg)}.mx_PlayPauseButton.mx_PlayPauseButton_pause:before{width:10px;height:12px;top:10px;left:11px;-webkit-mask-image:url(../../img/element-icons/pause.c4c0886.svg);mask-image:url(../../img/element-icons/pause.c4c0886.svg)}.mx_VoiceMessagePrimaryContainer{padding:7px 12px 7px 11px;background-color:#e3e8f0;border-radius:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#737d8c;font-size:1.4rem;line-height:2.4rem}.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar{background-color:#c1c6cd}.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct{-webkit-transition:background-color .25s ease;transition:background-color .25s ease;background-color:#737d8c}.mx_VoiceMessagePrimaryContainer .mx_Clock{width:4.2rem;padding-right:6px;padding-left:8px}.mx_Waveform{position:relative;height:30px;top:1px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mx_Waveform .mx_Waveform_bar{width:0;border:1px solid transparent;border-radius:2px;min-height:0;max-height:100%;margin-left:1px;margin-right:1px}.mx_CallContainer{position:absolute;right:20px;bottom:72px;z-index:100;pointer-events:none}.mx_CallContainer .mx_CallPreview{pointer-events:auto;cursor:pointer}.mx_CallContainer .mx_CallPreview .mx_CallView_video{width:350px}.mx_CallContainer .mx_CallPreview .mx_VideoFeed_local{border-radius:8px;overflow:hidden}.mx_CallContainer .mx_AppTile_persistedWrapper div{min-width:350px}.mx_CallContainer .mx_IncomingCallBox{min-width:250px;background-color:#f4f6fa;padding:8px;-webkit-box-shadow:0 14px 24px rgba(0,0,0,.08);box-shadow:0 14px 24px rgba(0,0,0,.08);border-radius:8px;pointer-events:auto;cursor:pointer}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo{display:-webkit-box;display:-ms-flexbox;display:flex;direction:row}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo .mx_BaseAvatar_initial,.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo img{margin:8px}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1,.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo p{margin:0;padding:0;font-size:1.4rem;line-height:1.6rem}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1{font-weight:700}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons{padding:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons>.mx_IncomingCallBox_spacer{width:8px}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons>*{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin-right:0;font-size:1.5rem;line-height:2.4rem}.mx_CallView{border-radius:8px;background-color:#f2f5f8;padding-left:8px;padding-right:8px;pointer-events:auto}.mx_CallView_large{padding-bottom:10px;margin:5px 5px 5px 18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_CallView_large,.mx_CallView_large .mx_CallView_voice{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_CallView_pip{width:320px;padding-bottom:8px;margin-top:10px;background-color:#f4f6fa;-webkit-box-shadow:0 4px 20px rgba(0,0,0,.2);box-shadow:0 4px 20px rgba(0,0,0,.2);border-radius:8px}.mx_CallView_pip .mx_CallView_voice{height:180px}.mx_CallView_pip .mx_CallView_callControls{bottom:0}.mx_CallView_pip .mx_CallView_callControls_button:before{width:36px;height:36px}.mx_CallView_pip .mx_CallView_holdTransferContent{padding-top:10px;padding-bottom:25px}.mx_CallView_content{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:8px}.mx_CallView_voice{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;background-color:#27303a}.mx_CallView_voice,.mx_CallView_voice_avatarsContainer{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-direction:normal}.mx_CallView_voice_avatarsContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row}.mx_CallView_voice_avatarsContainer div{margin-left:12px;margin-right:12px}.mx_CallView_voice .mx_CallView_holdTransferContent .mx_CallView_voice_avatarContainer{border-radius:2000px;overflow:hidden;position:relative}.mx_CallView_holdTransferContent{height:20px;padding-top:20px;padding-bottom:15px;color:#fff}.mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind{padding:0;font-weight:700}.mx_CallView_video{width:100%;height:100%;z-index:30;overflow:hidden}.mx_CallView_video_hold{overflow:hidden}.mx_CallView_video_hold .mx_VideoFeed{visibility:hidden}.mx_CallView_video_holdBackground{position:absolute;width:100%;height:100%;left:0;right:0;background-repeat:no-repeat;background-size:cover;background-position:50%;-webkit-filter:blur(20px);filter:blur(20px)}.mx_CallView_video_holdBackground:after{content:"";display:block;position:absolute;width:100%;height:100%;left:0;right:0;background-color:rgba(0,0,0,.6)}.mx_CallView_video .mx_CallView_holdTransferContent{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-weight:700;color:#fff;text-align:center}.mx_CallView_video .mx_CallView_holdTransferContent:before{display:block;margin-left:auto;margin-right:auto;content:"";width:40px;height:40px;background-image:url(../../img/voip/paused.77799b3.svg);background-position:50%;background-size:cover}.mx_CallView_pip .mx_CallView_video .mx_CallView_holdTransferContent:before{width:30px;height:30px}.mx_CallView_video .mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind{padding:0}.mx_CallView_header{height:44px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;-ms-flex-negative:0;flex-shrink:0}.mx_CallView_header_callType{font-size:1.2rem;font-weight:700;vertical-align:middle}.mx_CallView_header_secondaryCallInfo:before{content:"·";margin-left:6px;margin-right:6px}.mx_CallView_header_controls{margin-left:auto}.mx_CallView_header_button{display:inline-block;vertical-align:middle;cursor:pointer}.mx_CallView_header_button:before{content:"";display:inline-block;height:20px;width:20px;vertical-align:middle;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_CallView_header_button_fullscreen:before{-webkit-mask-image:url(../../img/element-icons/call/fullscreen.43be138.svg);mask-image:url(../../img/element-icons/call/fullscreen.43be138.svg)}.mx_CallView_header_button_expand:before{-webkit-mask-image:url(../../img/element-icons/call/expand.7ef9f56.svg);mask-image:url(../../img/element-icons/call/expand.7ef9f56.svg)}.mx_CallView_header_callInfo{margin-left:12px;margin-right:16px}.mx_CallView_header_roomName{font-weight:700;font-size:12px;line-height:normal;height:15px}.mx_CallView_secondaryCall_roomName{margin-left:4px}.mx_CallView_header_callTypeSmall{font-size:12px;color:#737d8c;line-height:normal;height:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:240px}.mx_CallView_header_phoneIcon{display:inline-block;margin-right:6px;height:16px;width:16px;vertical-align:middle}.mx_CallView_header_phoneIcon:before{content:"";display:inline-block;vertical-align:top;height:16px;width:16px;background-color:#ff4b55;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_CallView_callControls{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;bottom:5px;width:100%;opacity:1;-webkit-transition:opacity .5s;transition:opacity .5s}.mx_CallView_callControls_hidden{opacity:.001;pointer-events:none}.mx_CallView_callControls_button{cursor:pointer;margin-left:8px;margin-right:8px}.mx_CallView_callControls_button:before{content:"";display:inline-block;height:48px;width:48px;background-repeat:no-repeat;background-size:contain;background-position:50%}.mx_CallView_callControls_dialpad{margin-right:auto}.mx_CallView_callControls_dialpad:before{background-image:url(../../img/voip/dialpad.fdda9a0.svg)}.mx_CallView_callControls_button_dialpad_hidden{margin-right:auto;cursor:auto}.mx_CallView_callControls_button_micOn:before{background-image:url(../../img/voip/mic-on.2592c14.svg)}.mx_CallView_callControls_button_micOff:before{background-image:url(../../img/voip/mic-off.774e42b.svg)}.mx_CallView_callControls_button_vidOn:before{background-image:url(../../img/voip/vid-on.b9b8bbf.svg)}.mx_CallView_callControls_button_vidOff:before{background-image:url(../../img/voip/vid-off.5552596.svg)}.mx_CallView_callControls_button_hangup:before{background-image:url(../../img/voip/hangup.9c3adeb.svg)}.mx_CallView_callControls_button_more{margin-left:auto}.mx_CallView_callControls_button_more:before{background-image:url(../../img/voip/more.5e8055e.svg)}.mx_CallView_callControls_button_more_hidden{margin-left:auto;cursor:auto}.mx_CallView_callControls_button_invisible{visibility:hidden;pointer-events:none;position:absolute}.mx_CallViewForRoom{overflow:hidden}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:8px}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper:hover .mx_CallViewForRoom_ResizeHandle{width:100%!important;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper:hover .mx_CallViewForRoom_ResizeHandle:after{content:"";margin-top:3px;border-radius:4px;height:4px;width:100%;max-width:64px;background-color:#2e2f32}.mx_DialPad{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:16px;gap:16px}.mx_DialPad_button{width:40px;height:40px;background-color:#e3e8f0;border-radius:40px;font-size:18px;font-weight:600;text-align:center;vertical-align:middle;line-height:40px}.mx_DialPad_deleteButton:before,.mx_DialPad_dialButton:before{content:"";display:inline-block;height:40px;width:40px;vertical-align:middle;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-position:center;mask-position:center;background-color:#fff}.mx_DialPad_deleteButton{background-color:#ff4b55}.mx_DialPad_deleteButton:before{-webkit-mask-image:url(../../img/element-icons/call/delete.833d785.svg);mask-image:url(../../img/element-icons/call/delete.833d785.svg);-webkit-mask-position:9px;mask-position:9px}.mx_DialPad_dialButton{background-color:#0dbd8b}.mx_DialPad_dialButton:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_DialPadContextMenu_header{margin-top:12px;margin-left:12px;margin-right:12px}.mx_DialPadContextMenu_title{color:#61708b;font-size:12px;font-weight:600}.mx_DialPadContextMenu_dialled{height:1em;font-size:18px;font-weight:600}.mx_DialPadContextMenu_dialPad{margin:16px}.mx_DialPadContextMenu_horizSep{position:relative}.mx_DialPadContextMenu_horizSep:before{content:"";position:absolute;width:100%;border-bottom:1px solid #e3e8f0}.mx_Dialog_dialPadWrapper .mx_Dialog{padding:0}.mx_DialPadModal{width:192px;height:368px}.mx_DialPadModal_header{margin-top:12px;margin-left:12px;margin-right:12px}.mx_DialPadModal_title{color:#61708b;font-size:12px;font-weight:600}.mx_DialPadModal_cancel{float:right;-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#c1c1c1;cursor:pointer}.mx_DialPadModal_field{border:none;margin:0}.mx_DialPadModal_field input{font-size:18px;font-weight:600}.mx_DialPadModal_dialPad{margin-left:16px;margin-right:16px;margin-top:16px}.mx_DialPadModal_horizSep{position:relative}.mx_DialPadModal_horizSep:before{content:"";position:absolute;width:100%;border-bottom:1px solid #e3e8f0}.mx_VideoFeed_voice{padding-bottom:52px;background-color:#27303a}.mx_VideoFeed_remote{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_VideoFeed_remote.mx_VideoFeed_video{background-color:#000}.mx_VideoFeed_local{max-width:25%;max-height:25%;position:absolute;right:10px;top:10px;z-index:100;border-radius:4px}.mx_VideoFeed_local.mx_VideoFeed_video{background-color:transparent}.mx_VideoFeed_mirror{-webkit-transform:scaleX(-1);transform:scaleX(-1)}
+`
+const snackbarCSS = `
+#snackbar {
+ display: flex;
+ visibility: hidden;
+ min-width: 250px;
+ margin-left: -125px;
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ position: fixed;
+ z-index: 1;
+ left: 50%;
+ bottom: 30px;
+ font-size: 17px;
+ padding: 6px 16px;
+ font-family: Inter, "Roboto", "Helvetica", "Arial", sans-serif;
+ font-weight: 400;
+ line-height: 1.43;
+ border-radius: 4px;
+ letter-spacing: 0.01071em;
+}
+
+#snackbar.mx_show {
+ visibility: visible;
+ -webkit-animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
+ animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
+}
+
+a.mx_reply_anchor{
+ cursor: pointer;
+ color: #238cf5;
+}
+
+a.mx_reply_anchor:hover{
+ text-decoration: underline;
+}
+
+@-webkit-keyframes mx_snackbar_fadein {
+ from {bottom: 0; opacity: 0;}
+ to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes mx_snackbar_fadein {
+ from {bottom: 0; opacity: 0;}
+ to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes mx_snackbar_fadeout {
+ from {bottom: 30px; opacity: 1;}
+ to {bottom: 0; opacity: 0;}
+}
+
+@keyframes mx_snackbar_fadeout {
+ from {bottom: 30px; opacity: 1;}
+ to {bottom: 0; opacity: 0;}
+}
+`
+export default lightCSS + snackbarCSS;
diff --git a/src/utils/exportUtils/exportJS.ts b/src/utils/exportUtils/exportJS.ts
new file mode 100644
index 0000000000..4fd0a5159d
--- /dev/null
+++ b/src/utils/exportUtils/exportJS.ts
@@ -0,0 +1,32 @@
+export default `
+function scrollToElement(replyId){
+ let el = document.getElementById(replyId);
+ if(!el) {
+ showToast("The message you're looking for wasn't exported");
+ return;
+ };
+ el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ el.style.backgroundColor = '#f6f7f8';
+ el.style.transition = 'background-color 1s ease'
+ setTimeout(() => {
+ el.style.backgroundColor = "white"
+ }, 2000);
+}
+
+function showToast(text) {
+ let el = document.getElementById("snackbar");
+ el.innerHTML = text;
+ el.className = "mx_show";
+ setTimeout(() => {
+ el.className = el.className.replace("mx_show", "");
+ }, 2000);
+}
+
+window.onload = () => {
+ document.querySelectorAll('.mx_reply_anchor').forEach(element => {
+ element.addEventListener('click', event => {
+ scrollToElement(event.target.getAttribute("scroll-to"));
+ })
+ })
+}
+`
From 409213ceb4adbae2e83b875a9e1bc9e8233b6022 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 31 May 2021 19:07:49 +0530
Subject: [PATCH 024/313] Remove conditional
---
src/utils/exportUtils/HtmlExport.tsx | 10 ++++------
1 file changed, 4 insertions(+), 6 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 22cf04669b..6ce7ad5c94 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -187,13 +187,11 @@ export default class HTMLExporter extends Exporter {
if (!haveTileForEvent(event)) continue;
content += this._wantsDateSeparator(event, prevEvent) ? this.getDateSeparator(event) : "";
-
- if (event.getType() === "m.room.message") {
- const shouldBeJoined = !this._wantsDateSeparator(event, prevEvent)
+ const shouldBeJoined = !this._wantsDateSeparator(event, prevEvent)
&& shouldFormContinuation(prevEvent, event);
- const body = await this.createMessageBody(event, shouldBeJoined);
- content += body;
- }
+ const body = await this.createMessageBody(event, shouldBeJoined);
+
+ content += body;
prevEvent = event;
}
return this.wrapHTML(content, room);
From 59c1b67b7dcebb0adab9065e09d6bc0dc0497c15 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 31 May 2021 21:01:19 +0530
Subject: [PATCH 025/313] Enable support for image, video and audio files
---
src/components/views/messages/MAudioBody.js | 11 ++++-
src/components/views/messages/MFileBody.js | 8 ++--
src/components/views/messages/MImageBody.js | 10 +++--
src/components/views/messages/MVideoBody.tsx | 17 +++++++-
.../views/messages/MVoiceOrAudioBody.tsx | 3 +-
src/components/views/messages/MessageEvent.js | 4 ++
src/components/views/rooms/EventTile.tsx | 12 ++++--
src/utils/exportUtils/HtmlExport.tsx | 42 +++++++++++++++++--
8 files changed, 86 insertions(+), 21 deletions(-)
diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js
index 0d5e449fc0..53aa013503 100644
--- a/src/components/views/messages/MAudioBody.js
+++ b/src/components/views/messages/MAudioBody.js
@@ -34,6 +34,7 @@ export default class MAudioBody extends React.Component {
error: null,
};
}
+
onPlayToggle() {
this.setState({
playing: !this.state.playing,
@@ -41,6 +42,7 @@ export default class MAudioBody extends React.Component {
}
_getContentUrl() {
+ if (this.props.mediaSrc) return this.props.mediaSrc;
const media = mediaFromContent(this.props.mxEvent.getContent());
if (media.isEncrypted) {
return this.state.decryptedUrl;
@@ -49,6 +51,11 @@ export default class MAudioBody extends React.Component {
}
}
+ getFileBody() {
+ if (this.props.mediaSrc) return null;
+ return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
+ }
+
componentDidMount() {
const content = this.props.mxEvent.getContent();
if (content.file !== undefined && this.state.decryptedUrl === null) {
@@ -101,11 +108,11 @@ export default class MAudioBody extends React.Component {
}
const contentUrl = this._getContentUrl();
-
+ const fileBody = this.getFileBody();
return (
<span className="mx_MAudioBody">
<audio src={contentUrl} controls />
- <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />
+ { fileBody }
</span>
);
}
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 8f464e08bd..9dc1de7683 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -242,7 +242,7 @@ export default class MFileBody extends React.Component {
<span className="mx_MFileBody">
{placeholder}
<div className="mx_MFileBody_download">
- <div style={{display: "none"}}>
+ <div style={{ display: "none" }}>
{ /*
* Add dummy copy of the "a" tag
* We'll use it to learn how the download link
@@ -309,7 +309,7 @@ export default class MFileBody extends React.Component {
if (this.props.tileShape === "file_grid") {
return (
<span className="mx_MFileBody">
- {placeholder}
+ { placeholder }
<div className="mx_MFileBody_download">
<a className="mx_MFileBody_downloadLink" {...downloadProps}>
{ fileName }
@@ -323,7 +323,7 @@ export default class MFileBody extends React.Component {
} else {
return (
<span className="mx_MFileBody">
- {placeholder}
+ { placeholder }
<div className="mx_MFileBody_download">
<a {...downloadProps}>
<span className="mx_MFileBody_download_icon" />
@@ -336,7 +336,7 @@ export default class MFileBody extends React.Component {
} else {
const extra = text ? (': ' + text) : '';
return <span className="mx_MFileBody">
- {placeholder}
+ { placeholder }
{ _t("Invalid file%(extra)s", { extra: extra }) }
</span>;
}
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 6505b1d66a..31cdeed6a0 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -90,7 +90,7 @@ export default class MImageBody extends React.Component {
showImage() {
localStorage.setItem("mx_ShowImage_" + this.props.mxEvent.getId(), "true");
- this.setState({showImage: true});
+ this.setState({ showImage: true });
this._downloadImage();
}
@@ -172,6 +172,7 @@ export default class MImageBody extends React.Component {
}
_getContentUrl() {
+ if (this.props.mediaSrc) return this.props.mediaSrc;
const media = mediaFromContent(this.props.mxEvent.getContent());
if (media.isEncrypted) {
return this.state.decryptedUrl;
@@ -296,7 +297,7 @@ export default class MImageBody extends React.Component {
if (showImage) {
// Don't download anything becaue we don't want to display anything.
this._downloadImage();
- this.setState({showImage: true});
+ this.setState({ showImage: true });
}
this._afterComponentDidMount();
@@ -345,7 +346,7 @@ export default class MImageBody extends React.Component {
imageElement = <HiddenImagePlaceholder />;
} else {
imageElement = (
- <img style={{display: 'none'}} src={thumbUrl} ref={this._image}
+ <img style={{ display: 'none' }} src={thumbUrl} ref={this._image}
alt={content.body}
onError={this.onImageError}
onLoad={this.onImageLoad}
@@ -449,6 +450,7 @@ export default class MImageBody extends React.Component {
// Overidden by MStickerBody
getFileBody() {
+ if (this.props.mediaSrc) return null;
return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
}
@@ -466,7 +468,7 @@ export default class MImageBody extends React.Component {
const contentUrl = this._getContentUrl();
let thumbUrl;
- if (this._isGif() && SettingsStore.getValue("autoplayGifsAndVideos")) {
+ if ((this._isGif() && SettingsStore.getValue("autoplayGifsAndVideos")) || this.props.mediaSrc) {
thumbUrl = contentUrl;
} else {
thumbUrl = this._getThumbUrl();
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 2efdce506e..68cbb6702c 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -29,6 +29,8 @@ interface IProps {
mxEvent: any;
/* called when the video has loaded */
onHeightChanged: () => void;
+ /* used to refer to the local file while exporting */
+ mediaSrc?: string;
}
interface IState {
@@ -76,6 +78,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
}
private getContentUrl(): string|null {
+ if (this.props.mediaSrc) return this.props.mediaSrc;
const media = mediaFromContent(this.props.mxEvent.getContent());
if (media.isEncrypted) {
return this.state.decryptedUrl;
@@ -90,6 +93,9 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
}
private getThumbUrl(): string|null {
+ // there's no need of thumbnail when the content is local
+ if (this.props.mediaSrc) return null;
+
const content = this.props.mxEvent.getContent();
const media = mediaFromContent(content);
if (media.isEncrypted) {
@@ -184,6 +190,11 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
this.props.onHeightChanged();
}
+ private getFileBody = () => {
+ if (this.props.mediaSrc) return null;
+ return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
+ }
+
render() {
const content = this.props.mxEvent.getContent();
const autoplay = SettingsStore.getValue("autoplayGifsAndVideos");
@@ -197,7 +208,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
);
}
- // Important: If we aren't autoplaying and we haven't decrypred it yet, show a video with a poster.
+ // Important: If we aren't autoplaying and we haven't decrypted it yet, show a video with a poster.
if (content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
// Need to decrypt the attachment
// The attachment is decrypted in componentDidMount.
@@ -229,6 +240,8 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
preload = "none";
}
}
+
+ const fileBody = this.getFileBody();
return (
<span className="mx_MVideoBody">
<video
@@ -246,7 +259,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
onPlay={this.videoOnPlay}
>
</video>
- <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />
+ { fileBody }
</span>
);
}
diff --git a/src/components/views/messages/MVoiceOrAudioBody.tsx b/src/components/views/messages/MVoiceOrAudioBody.tsx
index 0cebcf3440..d548d8d2fa 100644
--- a/src/components/views/messages/MVoiceOrAudioBody.tsx
+++ b/src/components/views/messages/MVoiceOrAudioBody.tsx
@@ -23,6 +23,7 @@ import MVoiceMessageBody from "./MVoiceMessageBody";
interface IProps {
mxEvent: MatrixEvent;
+ mediaSrc?: string;
}
@replaceableComponent("views.messages.MVoiceOrAudioBody")
@@ -30,7 +31,7 @@ export default class MVoiceOrAudioBody extends React.PureComponent<IProps> {
public render() {
const isVoiceMessage = !!this.props.mxEvent.getContent()['org.matrix.msc2516.voice'];
const voiceMessagesEnabled = SettingsStore.getValue("feature_voice_messages");
- if (isVoiceMessage && voiceMessagesEnabled) {
+ if (isVoiceMessage && voiceMessagesEnabled && !this.props.mediaSrc) {
return <MVoiceMessageBody {...this.props} />;
} else {
return <MAudioBody {...this.props} />;
diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js
index 78e0dc422d..84a3d56d77 100644
--- a/src/components/views/messages/MessageEvent.js
+++ b/src/components/views/messages/MessageEvent.js
@@ -44,6 +44,9 @@ export default class MessageEvent extends React.Component {
/* the shape of the tile, used */
tileShape: PropTypes.string,
+ /* to set source to local file path during export */
+ mediaSrc: PropTypes.string,
+
/* the maximum image height to use, if the event is an image */
maxImageHeight: PropTypes.number,
@@ -120,6 +123,7 @@ export default class MessageEvent extends React.Component {
highlightLink={this.props.highlightLink}
showUrlPreview={this.props.showUrlPreview}
tileShape={this.props.tileShape}
+ mediaSrc={this.props.mediaSrc}
maxImageHeight={this.props.maxImageHeight}
replacingEventId={this.props.replacingEventId}
editState={this.props.editState}
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index ff10b3255a..8356119d71 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -103,7 +103,7 @@ for (const evType of ALL_RULE_TYPES) {
stateEventTileTypes[evType] = 'messages.TextualEvent';
}
-export function getHandlerTile(ev) {
+export function getHandlerTile(ev: MatrixEvent) {
const type = ev.getType();
// don't show verification requests we're not involved in,
@@ -251,6 +251,9 @@ interface IProps {
isExporting?: boolean;
+ // Used while exporting to refer to the local source rather than the online one
+ mediaSrc?: string;
+
// show twelve hour timestamps
isTwelveHour?: boolean;
@@ -342,7 +345,7 @@ export default class EventTile extends React.Component<IProps, IState> {
* or 'sent' receipt, for example.
* @returns {boolean}
*/
- private get isEligibleForSpecialReceipt() {
+ private get isEligibleForSpecialReceipt(): boolean {
// First, if there are other read receipts then just short-circuit this.
if (this.props.readReceipts && this.props.readReceipts.length > 0) return false;
if (!this.props.mxEvent) return false;
@@ -1150,6 +1153,7 @@ export default class EventTile extends React.Component<IProps, IState> {
mxEvent={this.props.mxEvent}
replacingEventId={this.props.replacingEventId}
editState={this.props.editState}
+ mediaSrc={this.props.mediaSrc}
highlights={this.props.highlights}
highlightLink={this.props.highlightLink}
showUrlPreview={this.props.showUrlPreview}
@@ -1332,8 +1336,8 @@ class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptSta
return <span className="mx_EventTile_readAvatars">
<span className={receiptClasses} onMouseEnter={this.onHoverStart} onMouseLeave={this.onHoverEnd}>
- {nonCssBadge}
- {tooltip}
+ { nonCssBadge }
+ { tooltip }
</span>
</span>;
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 6ce7ad5c94..dfdd8a32cd 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -20,11 +20,13 @@ import exportJS from "./exportJS";
export default class HTMLExporter extends Exporter {
protected zip: JSZip;
protected avatars: Map<string, boolean>;
+ protected permalinkCreator: RoomPermalinkCreator;
constructor(res: MatrixEvent[], room: Room) {
super(res, room);
this.zip = new JSZip();
this.avatars = new Map<string, boolean>();
+ this.permalinkCreator = new RoomPermalinkCreator(this.room);
}
protected wrapHTML(content: string, room: Room) {
@@ -152,11 +154,12 @@ export default class HTMLExporter extends Exporter {
return wantsDateSeparator(prevEvent.getDate(), event.getDate());
}
- protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
- const eventTile = <li id={mxEv.getId()}>
+
+ protected getEventTile(mxEv: MatrixEvent, continuation: boolean, mediaSrc?: string) {
+ return <li id={mxEv.getId()}>
<EventTile
mxEvent={mxEv}
- continuation={joined}
+ continuation={continuation}
isRedacted={mxEv.isRedacted()}
replacingEventId={mxEv.replacingEventId()}
isExporting={true}
@@ -166,8 +169,9 @@ export default class HTMLExporter extends Exporter {
checkUnmounting={() => false}
isTwelveHour={false}
last={false}
+ mediaSrc={mediaSrc}
lastInSection={false}
- permalinkCreator={new RoomPermalinkCreator(this.room)}
+ permalinkCreator={this.permalinkCreator}
lastSuccessful={false}
isSelectedEvent={false}
getRelationsForEvent={null}
@@ -177,6 +181,36 @@ export default class HTMLExporter extends Exporter {
showReadReceipts={false}
/>
</li>
+ }
+
+ protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
+ let eventTile: JSX.Element;
+ switch (mxEv.getContent().msgtype) {
+ case "m.image": {
+ const blob = await this.getMediaBlob(mxEv);
+ const filePath = `images/${mxEv.getId()}.${blob.type.replace("image/", "")}`;
+ eventTile = this.getEventTile(mxEv, joined, filePath);
+ this.zip.file(filePath, blob);
+ break;
+ }
+ case "m.video": {
+ const blob = await this.getMediaBlob(mxEv);
+ const filePath = `videos/${mxEv.getId()}.${blob.type.replace("video/", "")}`;
+ eventTile = this.getEventTile(mxEv, joined, filePath);
+ this.zip.file(filePath, blob);
+ break;
+ }
+ case "m.audio": {
+ const blob = await this.getMediaBlob(mxEv);
+ const filePath = `audio/${mxEv.getId()}.${blob.type.replace("audio/", "")}`;
+ eventTile = this.getEventTile(mxEv, joined, filePath);
+ this.zip.file(filePath, blob);
+ break;
+ }
+ default:
+ eventTile = this.getEventTile(mxEv, joined);
+ break;
+ }
return renderToStaticMarkup(eventTile);
}
From fa073cd958ef7d994d4e733d468ccc5b49f6c61c Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 31 May 2021 21:35:08 +0530
Subject: [PATCH 026/313] Save and display room avatars
---
src/components/views/avatars/BaseAvatar.tsx | 2 +-
.../views/avatars/DecoratedRoomAvatar.tsx | 4 +-
src/utils/exportUtils/HtmlExport.tsx | 47 +++++++++++--------
3 files changed, 31 insertions(+), 22 deletions(-)
diff --git a/src/components/views/avatars/BaseAvatar.tsx b/src/components/views/avatars/BaseAvatar.tsx
index 8ce05e0a55..e0d0edd279 100644
--- a/src/components/views/avatars/BaseAvatar.tsx
+++ b/src/components/views/avatars/BaseAvatar.tsx
@@ -44,7 +44,7 @@ interface IProps {
className?: string;
}
-const calculateUrls = (url, urls) => {
+const calculateUrls = (url: string, urls: string[]) => {
// work out the full set of urls to try to load. This is formed like so:
// imageUrls: [ props.url, ...props.urls ]
diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx
index f15538eabf..bd67255fc2 100644
--- a/src/components/views/avatars/DecoratedRoomAvatar.tsx
+++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx
@@ -201,8 +201,8 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
oobData={this.props.oobData}
viewAvatarOnClick={this.props.viewAvatarOnClick}
/>
- {icon}
- {badge}
+ { icon }
+ { badge }
</div>;
}
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index dfdd8a32cd..f124359882 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -6,16 +6,18 @@ import { mediaFromContent } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Exporter } from "./Exporter";
-import * as ponyfill from "web-streams-polyfill/ponyfill"
import { renderToStaticMarkup } from 'react-dom/server'
import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
import { wantsDateSeparator } from "../../DateUtils";
import { RoomPermalinkCreator } from "../permalinks/Permalinks";
+import * as ponyfill from "web-streams-polyfill/ponyfill"
+import * as Avatar from "../../Avatar";
import EventTile, { haveTileForEvent } from "../../components/views/rooms/EventTile";
import DateSeparator from "../../components/views/messages/DateSeparator";
import exportCSS from "./exportCSS";
import exportJS from "./exportJS";
+import BaseAvatar from "../../components/views/avatars/BaseAvatar";
export default class HTMLExporter extends Exporter {
protected zip: JSZip;
@@ -29,7 +31,29 @@ export default class HTMLExporter extends Exporter {
this.permalinkCreator = new RoomPermalinkCreator(this.room);
}
- protected wrapHTML(content: string, room: Room) {
+ protected async getRoomAvatar() {
+ let blob: Blob;
+ const avatarUrl = Avatar.avatarUrlForRoom(this.room, 32, 32, "crop");
+ if (avatarUrl) {
+ const image = await fetch(avatarUrl);
+ blob = await image.blob();
+ this.zip.file("room.png", blob);
+ }
+ const avatar = (
+ <BaseAvatar
+ width={32}
+ height={32}
+ name={this.room.name}
+ title={this.room.name}
+ url={blob ? "room.png" : null}
+ resizeMethod={"crop"}
+ />
+ );
+ return renderToStaticMarkup(avatar);
+ }
+
+ protected async wrapHTML(content: string, room: Room) {
+ const roomAvatar = await this.getRoomAvatar();
return `
<!DOCTYPE html>
<html lang="en">
@@ -54,22 +78,7 @@ export default class HTMLExporter extends Exporter {
<div class="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
<div class="mx_RoomHeader_avatar">
<div class="mx_DecoratedRoomAvatar">
- <span class="mx_BaseAvatar" role="presentation"
- ><span
- class="mx_BaseAvatar_initial"
- aria-hidden="true"
- style="
- font-size: 20.8px;
- width: 32px;
- line-height: 32px;
- "
- >G</span
- ><img
- class="mx_BaseAvatar_image"
- alt=""
- aria-hidden="true"
- style="width: 32px; height: 32px"
- /></span>
+ ${roomAvatar}
</div>
</div>
<div class="mx_RoomHeader_name">
@@ -228,7 +237,7 @@ export default class HTMLExporter extends Exporter {
content += body;
prevEvent = event;
}
- return this.wrapHTML(content, room);
+ return await this.wrapHTML(content, room);
}
public async export() {
From 28a1a551fe71b8264fa7198340481ba13f806bb0 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 31 May 2021 22:27:29 +0530
Subject: [PATCH 027/313] Save users' avatars
---
src/components/views/avatars/MemberAvatar.tsx | 4 +++-
src/components/views/messages/MImageBody.js | 4 ++--
src/components/views/rooms/EventTile.tsx | 10 ++++++--
src/utils/exportUtils/HtmlExport.tsx | 24 +++++++++++++++++--
4 files changed, 35 insertions(+), 7 deletions(-)
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 3205ca372c..8550f13e2d 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -36,6 +36,7 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
// Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
viewUserOnClick?: boolean;
title?: string;
+ avatarSrc?: string;
}
interface IState {
@@ -66,7 +67,8 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
private static getState(props: IProps): IState {
if (props.member?.name) {
let imageUrl = null;
- if (props.member.getMxcAvatarUrl()) {
+ if (props.avatarSrc) imageUrl = props.avatarSrc;
+ else if (props.member.getMxcAvatarUrl()) {
imageUrl = mediaFromMxc(props.member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
props.width,
props.height,
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 31cdeed6a0..9937624a0e 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -407,7 +407,7 @@ export default class MImageBody extends React.Component {
<div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px" }} >
{ /* Calculate aspect ratio, using %padding will size _container correctly */ }
<div style={{ paddingBottom: (100 * infoHeight / infoWidth) + '%' }} />
- { showPlaceholder &&
+ { !this.props.mediaSrc && showPlaceholder &&
<div className="mx_MImageBody_thumbnail" style={{
// Constrain width here so that spinner appears central to the loaded thumbnail
maxWidth: infoWidth + "px",
@@ -418,7 +418,7 @@ export default class MImageBody extends React.Component {
</div>
}
- <div style={{display: !showPlaceholder ? undefined : 'none'}}>
+ <div style={{display: this.props.mediaSrc ? "block" : !showPlaceholder ? undefined : 'none'}}>
{ img }
{ gifLabel }
</div>
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 8356119d71..1f73d46e0a 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -254,6 +254,9 @@ interface IProps {
// Used while exporting to refer to the local source rather than the online one
mediaSrc?: string;
+ // Used while exporting to refer to the local avatar rather than the online one
+ avatarSrc?: string;
+
// show twelve hour timestamps
isTwelveHour?: boolean;
@@ -939,8 +942,11 @@ export default class EventTile extends React.Component<IProps, IState> {
}
avatar = (
<div className="mx_EventTile_avatar">
- <MemberAvatar member={member}
- width={avatarSize} height={avatarSize}
+ <MemberAvatar
+ avatarSrc = {this.props.avatarSrc}
+ member={member}
+ width={avatarSize}
+ height={avatarSize}
viewUserOnClick={true}
/>
</div>
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index f124359882..914b8867a9 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -2,7 +2,7 @@ import React from "react"
import streamSaver from "streamsaver";
import JSZip from "jszip";
import { decryptFile } from "../DecryptFile";
-import { mediaFromContent } from "../../customisations/Media";
+import { mediaFromContent, mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Exporter } from "./Exporter";
@@ -133,7 +133,23 @@ export default class HTMLExporter extends Exporter {
</html>`
}
- // will be used in the future
+ protected hasAvatar(event: MatrixEvent): boolean {
+ const member = event.sender;
+ if (member.getMxcAvatarUrl()) return true;
+ return false;
+ }
+
+ protected async saveAvatarIfNeeded(event: MatrixEvent) {
+ const member = event.sender;
+ const avatarUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(30, 30, "crop");
+ if (!this.avatars.has(member.userId)) {
+ this.avatars.set(member.userId, true);
+ const image = await fetch(avatarUrl);
+ const blob = await image.blob();
+ this.zip.file(`users/${member.userId}`, blob);
+ }
+ }
+
protected async getMediaBlob(event: MatrixEvent) {
let blob: Blob;
try {
@@ -165,6 +181,9 @@ export default class HTMLExporter extends Exporter {
protected getEventTile(mxEv: MatrixEvent, continuation: boolean, mediaSrc?: string) {
+ const hasAvatar = this.hasAvatar(mxEv);
+ if (hasAvatar) this.saveAvatarIfNeeded(mxEv);
+
return <li id={mxEv.getId()}>
<EventTile
mxEvent={mxEv}
@@ -179,6 +198,7 @@ export default class HTMLExporter extends Exporter {
isTwelveHour={false}
last={false}
mediaSrc={mediaSrc}
+ avatarSrc={hasAvatar ? `users/${mxEv.sender.userId}` : null}
lastInSection={false}
permalinkCreator={this.permalinkCreator}
lastSuccessful={false}
From 01284ef8c6a91127ab535af8a37f792ae760c825 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 31 May 2021 23:33:20 +0530
Subject: [PATCH 028/313] Handle encrypted voice messages
---
src/utils/exportUtils/HtmlExport.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 914b8867a9..a69fab9f06 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -155,7 +155,7 @@ export default class HTMLExporter extends Exporter {
try {
const isEncrypted = event.isEncrypted();
const content = event.getContent();
- if (isEncrypted) {
+ if (isEncrypted && !content.hasOwnProperty("org.matrix.msc1767.file")) {
blob = await decryptFile(content.file);
} else {
const media = mediaFromContent(event.getContent());
From a0a604618c6b399e193f1c42065516ed7d4f2f7c Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 31 May 2021 23:50:55 +0530
Subject: [PATCH 029/313] Handle non-media attachments
---
src/components/views/messages/MFileBody.js | 10 +++++++++-
src/components/views/rooms/EventTile.tsx | 2 +-
src/utils/exportUtils/HtmlExport.tsx | 8 ++++++++
3 files changed, 18 insertions(+), 2 deletions(-)
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 9dc1de7683..53d37d73da 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -102,6 +102,8 @@ export default class MFileBody extends React.Component {
tileShape: PropTypes.string,
/* whether or not to show the default placeholder for the file. Defaults to true. */
showGenericPlaceholder: PropTypes.bool,
+ /* to set source to local file path during export */
+ mediaSrc: PropTypes.string,
};
static defaultProps = {
@@ -178,7 +180,13 @@ export default class MFileBody extends React.Component {
);
}
- if (isEncrypted) {
+ if (this.props.mediaSrc) {
+ return <span className="mx_MFileBody">
+ <a href={this.props.mediaSrc}>
+ { placeholder }
+ </a>
+ </span>;
+ } else if (isEncrypted) {
if (this.state.decryptedBlob === null) {
// Need to decrypt the attachment
// Wait for the user to click on the link before downloading
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index be748d6b71..a7bfb40ad0 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -936,7 +936,7 @@ export default class EventTile extends React.Component<IProps, IState> {
avatar = (
<div className="mx_EventTile_avatar">
<MemberAvatar
- avatarSrc = {this.props.avatarSrc}
+ avatarSrc={this.props.avatarSrc}
member={member}
width={avatarSize}
height={avatarSize}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index a69fab9f06..80ba643f81 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -236,6 +236,14 @@ export default class HTMLExporter extends Exporter {
this.zip.file(filePath, blob);
break;
}
+ case "m.file": {
+ const blob = await this.getMediaBlob(mxEv);
+ const fileName = mxEv.getContent().body;
+ const filePath = `files/${fileName}`;
+ eventTile = this.getEventTile(mxEv, joined, filePath);
+ this.zip.file(filePath, blob);
+ break;
+ }
default:
eventTile = this.getEventTile(mxEv, joined);
break;
From 80c0ad82fc2576a76efc411d150f8592938a3d5a Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 1 Jun 2021 12:40:03 +0530
Subject: [PATCH 030/313] Better file names
---
src/DateUtils.ts | 16 +++++
src/components/views/avatars/MemberAvatar.tsx | 13 ++--
src/i18n/strings/en_EN.json | 1 +
src/utils/exportUtils/HtmlExport.tsx | 67 ++++++++++++-------
4 files changed, 66 insertions(+), 31 deletions(-)
diff --git a/src/DateUtils.ts b/src/DateUtils.ts
index e4a1175d88..b567337e2c 100644
--- a/src/DateUtils.ts
+++ b/src/DateUtils.ts
@@ -136,3 +136,19 @@ export function wantsDateSeparator(prevEventDate: Date, nextEventDate: Date): bo
// Compare weekdays
return prevEventDate.getDay() !== nextEventDate.getDay();
}
+
+
+export function formatFullDateNoDayNoTime(date: Date) {
+ const dateTime = date.getFullYear() +
+ "-" +
+ pad(date.getMonth()) +
+ "-" +
+ pad(date.getDate()) +
+ _t(" at ") +
+ pad(date.getHours()) +
+ "." +
+ pad(date.getMinutes()) +
+ "." +
+ pad(date.getSeconds());
+ return dateTime;
+}
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 8550f13e2d..67d6ef38f0 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -16,14 +16,15 @@ limitations under the License.
*/
import React from 'react';
-import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import dis from "../../../dispatcher/dispatcher";
-import {Action} from "../../../dispatcher/actions";
+import { Action } from "../../../dispatcher/actions";
import BaseAvatar from "./BaseAvatar";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
-import {ResizeMethod} from "../../../Avatar";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
+import { ResizeMethod } from "../../../Avatar";
+import { omit } from "lodash";
interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
member: RoomMember;
@@ -94,6 +95,8 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
let {member, fallbackUserId, onClick, viewUserOnClick, ...otherProps} = this.props;
const userId = member ? member.userId : fallbackUserId;
+ otherProps = omit(otherProps, "avatarSrc");
+
if (viewUserOnClick) {
onClick = () => {
dis.dispatch({
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index df1037a863..682a31e0a3 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -103,6 +103,7 @@
"%(weekDayName)s, %(monthName)s %(day)s %(time)s": "%(weekDayName)s, %(monthName)s %(day)s %(time)s",
"%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s",
"%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s",
+ " at ": " at ",
"Who would you like to add to this community?": "Who would you like to add to this community?",
"Warning: any person you add to a community will be publicly visible to anyone who knows the community ID": "Warning: any person you add to a community will be publicly visible to anyone who knows the community ID",
"Invite new community members": "Invite new community members",
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 80ba643f81..eeb9f6a684 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -9,7 +9,7 @@ import { Exporter } from "./Exporter";
import { renderToStaticMarkup } from 'react-dom/server'
import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
-import { wantsDateSeparator } from "../../DateUtils";
+import { formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
import { RoomPermalinkCreator } from "../permalinks/Permalinks";
import * as ponyfill from "web-streams-polyfill/ponyfill"
import * as Avatar from "../../Avatar";
@@ -18,6 +18,7 @@ import DateSeparator from "../../components/views/messages/DateSeparator";
import exportCSS from "./exportCSS";
import exportJS from "./exportJS";
import BaseAvatar from "../../components/views/avatars/BaseAvatar";
+import exportIcons from "./exportIcons";
export default class HTMLExporter extends Exporter {
protected zip: JSZip;
@@ -179,6 +180,37 @@ export default class HTMLExporter extends Exporter {
return wantsDateSeparator(prevEvent.getDate(), event.getDate());
}
+ protected splitFileName(file: string) {
+ const lastDot = file.lastIndexOf('.');
+ if (lastDot === -1) return [file, ""];
+ const fileName = file.slice(0, lastDot);
+ const ext = file.slice(lastDot + 1);
+ return [fileName, ext];
+ }
+
+ protected getFilePath(event: MatrixEvent) {
+ const mediaType = event.getContent().msgtype;
+ let fileDirectory: string;
+ switch (mediaType) {
+ case "m.image":
+ fileDirectory = "images";
+ break;
+ case "m.video":
+ fileDirectory = "videos";
+ break;
+ case "m.audio":
+ fileDirectory = "audio";
+ break;
+ default:
+ fileDirectory = "files";
+ break;
+ }
+ const fileDate = formatFullDateNoDayNoTime(new Date(event.getTs()));
+ const [fileName, fileExt] = this.splitFileName(event.getContent().body);
+ const filePath = fileDirectory + "/" + fileName + '-' + fileDate + '.' + fileExt;
+ return filePath;
+ }
+
protected getEventTile(mxEv: MatrixEvent, continuation: boolean, mediaSrc?: string) {
const hasAvatar = this.hasAvatar(mxEv);
@@ -215,31 +247,12 @@ export default class HTMLExporter extends Exporter {
protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
let eventTile: JSX.Element;
switch (mxEv.getContent().msgtype) {
- case "m.image": {
- const blob = await this.getMediaBlob(mxEv);
- const filePath = `images/${mxEv.getId()}.${blob.type.replace("image/", "")}`;
- eventTile = this.getEventTile(mxEv, joined, filePath);
- this.zip.file(filePath, blob);
- break;
- }
- case "m.video": {
- const blob = await this.getMediaBlob(mxEv);
- const filePath = `videos/${mxEv.getId()}.${blob.type.replace("video/", "")}`;
- eventTile = this.getEventTile(mxEv, joined, filePath);
- this.zip.file(filePath, blob);
- break;
- }
+ case "m.image":
+ case "m.file":
+ case "m.video":
case "m.audio": {
const blob = await this.getMediaBlob(mxEv);
- const filePath = `audio/${mxEv.getId()}.${blob.type.replace("audio/", "")}`;
- eventTile = this.getEventTile(mxEv, joined, filePath);
- this.zip.file(filePath, blob);
- break;
- }
- case "m.file": {
- const blob = await this.getMediaBlob(mxEv);
- const fileName = mxEv.getContent().body;
- const filePath = `files/${fileName}`;
+ const filePath = this.getFilePath(mxEv);
eventTile = this.getEventTile(mxEv, joined, filePath);
this.zip.file(filePath, blob);
break;
@@ -273,8 +286,10 @@ export default class HTMLExporter extends Exporter {
this.zip.file("index.html", html);
this.zip.file("css/style.css", exportCSS);
this.zip.file("js/script.js", exportJS);
-
- const filename = `matrix-export-${new Date().toISOString()}.zip`;
+ for (const iconName in exportIcons) {
+ this.zip.file(`icons/${iconName}`, exportIcons[iconName]);
+ }
+ const filename = `matrix-export-${formatFullDateNoDayNoTime(new Date())}.zip`;
//Generate the zip file asynchronously
const blob = await this.zip.generateAsync({ type: "blob" });
From 395b6ba4b56a90124d898be36337bc324baa4f48 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 1 Jun 2021 12:44:05 +0530
Subject: [PATCH 031/313] Small refactor
---
src/DateUtils.ts | 25 +++++++++++++------------
1 file changed, 13 insertions(+), 12 deletions(-)
diff --git a/src/DateUtils.ts b/src/DateUtils.ts
index b567337e2c..6d390e9132 100644
--- a/src/DateUtils.ts
+++ b/src/DateUtils.ts
@@ -139,16 +139,17 @@ export function wantsDateSeparator(prevEventDate: Date, nextEventDate: Date): bo
export function formatFullDateNoDayNoTime(date: Date) {
- const dateTime = date.getFullYear() +
- "-" +
- pad(date.getMonth()) +
- "-" +
- pad(date.getDate()) +
- _t(" at ") +
- pad(date.getHours()) +
- "." +
- pad(date.getMinutes()) +
- "." +
- pad(date.getSeconds());
- return dateTime;
+ return (
+ date.getFullYear() +
+ "-" +
+ pad(date.getMonth()) +
+ "-" +
+ pad(date.getDate()) +
+ _t(" at ") +
+ pad(date.getHours()) +
+ "." +
+ pad(date.getMinutes()) +
+ "." +
+ pad(date.getSeconds())
+ );
}
From 5f9cf5760de362b20df89d184b7b6eb671db5bc3 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 1 Jun 2021 12:50:31 +0530
Subject: [PATCH 032/313] Fix untracked files
---
src/utils/exportUtils/exportCSS.ts | 2 +-
src/utils/exportUtils/exportIcons.ts | 15 +++++++++++++++
2 files changed, 16 insertions(+), 1 deletion(-)
create mode 100644 src/utils/exportUtils/exportIcons.ts
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 5a63802097..dd645b4362 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -1,6 +1,6 @@
/* eslint-disable max-len */
const lightCSS = `
-@charset "utf-8";@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Regular.4232a67.woff2) format("woff2"),url(../../fonts/Inter/Inter-Regular.3a1908c.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:400;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Italic.b791861.woff2) format("woff2"),url(../../fonts/Inter/Inter-Italic.b13e6fe.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Medium.027d14e.woff2) format("woff2"),url(../../fonts/Inter/Inter-Medium.d1f6b6e.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:500;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-MediumItalic.8154ac2.woff2) format("woff2"),url(../../fonts/Inter/Inter-MediumItalic.1912849.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-SemiBold.0802d48.woff2) format("woff2"),url(../../fonts/Inter/Inter-SemiBold.8357f92.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:600;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-SemiBoldItalic.10a60d8.woff2) format("woff2"),url(../../fonts/Inter/Inter-SemiBoldItalic.1c70752.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Bold.fc28dff.woff2) format("woff2"),url(../../fonts/Inter/Inter-Bold.025b6f2.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:700;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-BoldItalic.2129bd0.woff2) format("woff2"),url(../../fonts/Inter/Inter-BoldItalic.80f8542.woff) format("woff")}@font-face{font-family:Inconsolata;font-style:normal;font-weight:400;src:local("Inconsolata Regular"),local("Inconsolata-Regular"),url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.2aafaa1.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Inconsolata;font-style:normal;font-weight:400;font-display:swap;src:local("Inconsolata Regular"),local("Inconsolata-Regular"),url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.5476fd3.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Inconsolata;font-style:normal;font-weight:700;font-display:swap;src:local("Inconsolata Bold"),local("Inconsolata-Bold"),url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.6bc411a.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Inconsolata;font-style:normal;font-weight:700;font-display:swap;src:local("Inconsolata Bold"),local("Inconsolata-Bold"),url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.000abc6.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.hljs-addition{background:#dfd}.hljs-deletion{background:#fdd}@supports ((-webkit-backdrop-filter:none) or (backdrop-filter:none)){.mx_LeftPanel{background-image:unset;background-image:var(--avatar-url,unset);background-repeat:no-repeat;background-size:cover;background-position:0 0}.mx_GroupFilterPanel,.mx_SpacePanel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.mx_LeftPanel .mx_LeftPanel_roomListContainer{-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}}.mx_RoomSublist_showNButton{background-color:transparent!important}a:hover,a:link,a:visited{text-decoration:none}:root{font-size:10px;--transition-short:.1s;--transition-standard:.3s}@media (prefers-reduced-motion){:root{--transition-short:0;--transition-standard:0}}html{height:100%;overflow:hidden}body{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.5rem;background-color:#fff;color:#2e2f32;border:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code,pre{font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji;font-size:100%!important}.error,.text-error,.text-warning,.warning{color:#ff4b55}.text-success{color:#0dbd8b}.text-muted{color:#61708b}b{font-weight:700}h2{color:#2e2f32;font-weight:400;font-size:1.8rem;margin-top:16px;margin-bottom:16px}a:hover,a:link,a:visited{color:#238cf5}input[type=password],input[type=search],input[type=text]{padding:9px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;font-weight:600;min-width:0}input[type=search].mx_textinput_icon,input[type=text].mx_textinput_icon{padding-left:36px;background-repeat:no-repeat;background-position:10px}input[type=search].mx_textinput_icon.mx_textinput_search,input[type=text].mx_textinput_icon.mx_textinput_search{background-image:url(../../img/feather-customised/search-input.044bfa7.svg)}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{opacity:1}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1}input::-ms-input-placeholder,textarea::-ms-input-placeholder{opacity:1}input::placeholder,textarea::placeholder{opacity:1}input[type=password],input[type=text],textarea{background-color:transparent;color:#2e2f32}textarea{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;color:#2e2f32}input[type=password]:focus,input[type=text]:focus,textarea:focus{outline:none;-webkit-box-shadow:none;box-shadow:none}:focus:not(.focus-visible){outline:none}.mx_Dialog .mx_textinput>input[type=search],.mx_Dialog .mx_textinput>input[type=text],.mx_MatrixChat .mx_textinput>input[type=search],.mx_MatrixChat .mx_textinput>input[type=text]{border:none;-webkit-box-flex:1;-ms-flex:1;flex:1;color:#2e2f32}.mx_Dialog .mx_textinput,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text],.mx_MatrixChat .mx_textinput,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent;color:#9fa9ba;border-radius:4px;border:1px solid rgba(46,47,50,.1);margin:9px}.mx_Dialog .mx_textinput,.mx_MatrixChat .mx_textinput{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Dialog .mx_textinput input::-webkit-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-webkit-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-webkit-input-placeholder,.mx_MatrixChat .mx_textinput input::-webkit-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-webkit-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-webkit-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::-moz-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-moz-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-moz-placeholder,.mx_MatrixChat .mx_textinput input::-moz-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-moz-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-moz-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input:-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]:-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]:-ms-input-placeholder,.mx_MatrixChat .mx_textinput input:-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]:-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]:-ms-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-ms-input-placeholder,.mx_MatrixChat .mx_textinput input::-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-ms-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::placeholder,.mx_MatrixChat .mx_textinput input::placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::placeholder{color:rgba(159,169,186,.75)}.dark-panel{background-color:#f2f5f8}.dark-panel .mx_textinput,.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{color:#9fa9ba;background-color:#fff;border:none}.light-panel .mx_textinput,.light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{color:#9fa9ba;background-color:#f2f5f8;border:none}::-moz-focus-inner{border:0}#mx_theme_accentColor{color:#0dbd8b}#mx_theme_secondaryAccentColor{color:#f2f5f8}#mx_theme_tertiaryAccentColor{color:#d3efe1}.mx_Dialog_wrapper{position:fixed;z-index:4000;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_Dialog{background-color:#fff;color:#747474;z-index:4012;font-weight:300;font-size:1.5rem;position:relative;padding:24px;max-height:80%;-webkit-box-shadow:2px 15px 30px 0 rgba(0,0,0,.48);box-shadow:2px 15px 30px 0 rgba(0,0,0,.48);border-radius:8px;overflow-y:auto}.mx_Dialog_fixedWidth{width:60vw;max-width:704px}.mx_Dialog_staticWrapper .mx_Dialog{z-index:4010}.mx_Dialog_background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(46,48,51,.38);opacity:.8;z-index:4011}.mx_Dialog_background.mx_Dialog_staticBackground{z-index:4009}.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background{opacity:.4}.mx_Dialog_lightbox .mx_Dialog_background{opacity:.95;background-color:#000}.mx_Dialog_lightbox .mx_Dialog{border-radius:0;background-color:transparent;width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:none;padding:0}.mx_Dialog_header{position:relative;margin-bottom:10px}.mx_Dialog_titleImage{vertical-align:sub;width:25px;height:25px;margin-left:-2px;margin-right:4px}.mx_Dialog_title{font-size:2.2rem;font-weight:600;line-height:3.6rem;color:#45474a}.mx_Dialog_header.mx_Dialog_headerWithButton>.mx_Dialog_title{text-align:center}.mx_Dialog_header.mx_Dialog_headerWithCancel>.mx_Dialog_title{margin-right:20px}.mx_Dialog_title.danger{color:#ff4b55}.mx_Dialog_cancelButton{-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#c1c1c1;cursor:pointer;position:absolute;top:10px;right:0}.mx_Dialog_content{margin:24px 0 68px;font-size:1.4rem;color:#2e2f32;word-wrap:break-word}.mx_Dialog_buttons{margin-top:20px;text-align:right}.mx_Dialog_buttons .mx_Dialog_buttons_additive{float:left}.mx_Dialog_buttons button,.mx_Dialog_buttons input[type=submit],.mx_Dialog button,.mx_Dialog input[type=submit]{vertical-align:middle;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;margin-left:0;margin-right:8px;font-weight:600;border:1px solid #0dbd8b;color:#0dbd8b;background-color:#fff;font-family:inherit}.mx_Dialog button:last-child{margin-right:0}.mx_Dialog_buttons button:focus,.mx_Dialog_buttons input[type=submit]:focus,.mx_Dialog button:focus,.mx_Dialog input[type=submit]:focus{-webkit-filter:brightness(105%);filter:brightness(105%)}.mx_Dialog_buttons button.mx_Dialog_primary,.mx_Dialog_buttons input[type=submit].mx_Dialog_primary,.mx_Dialog button.mx_Dialog_primary,.mx_Dialog input[type=submit].mx_Dialog_primary{color:#fff;background-color:#0dbd8b;min-width:156px}.mx_Dialog_buttons button.danger,.mx_Dialog_buttons input[type=submit].danger,.mx_Dialog button.danger,.mx_Dialog input[type=submit].danger{background-color:#ff4b55;border:1px solid #ff4b55;color:#fff}.mx_Dialog button.warning,.mx_Dialog input[type=submit].warning{border:1px solid #ff4b55;color:#ff4b55}.mx_Dialog_buttons button:disabled,.mx_Dialog_buttons input[type=submit]:disabled,.mx_Dialog button:disabled,.mx_Dialog input[type=submit]:disabled{background-color:#747474;border:1px solid #747474;opacity:.7}.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog{width:auto;border-radius:8px;padding:0;-webkit-box-shadow:none;box-shadow:none;overflow-x:hidden;overflow-y:hidden}.mx_GeneralButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;display:inline;margin:auto}.mx_linkButton{cursor:pointer;color:#0dbd8b}.mx_TextInputDialog_label{text-align:left;padding-bottom:12px}.mx_TextInputDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff}.mx_textButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;cursor:pointer;display:inline-block;outline:none;font-size:1.5rem;padding:0 1.5em}.mx_button_row{margin-top:69px}.mx_Username_color1{color:#368bd6}.mx_Username_color2{color:#ac3ba8}.mx_Username_color3{color:#0dbd8b}.mx_Username_color4{color:#e64f7a}.mx_Username_color5{color:#ff812d}.mx_Username_color6{color:#2dc2c5}.mx_Username_color7{color:#5c56f5}.mx_Username_color8{color:#74d12c}.mx_Tooltip_dark .mx_Tooltip_chevron:after{border-right-color:#27303a}html{scrollbar-color:rgba(0,0,0,.2) transparent}*{scrollbar-width:thin}::-webkit-scrollbar{width:6px;height:6px;background-color:transparent}::-webkit-scrollbar-thumb{border-radius:3px;background-color:rgba(0,0,0,.2)}.mx_AutoHideScrollbar:hover{scrollbar-color:rgba(0,0,0,.2) transparent}.mx_AutoHideScrollbar:hover::-webkit-scrollbar{background-color:transparent}.mx_AutoHideScrollbar:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2)}.mx_AutoHideScrollbar{overflow-x:hidden;overflow-y:auto;overflow-y:overlay;-ms-overflow-style:-ms-autohiding-scrollbar}.mx_AutoHideScrollbar::-webkit-scrollbar,.mx_AutoHideScrollbar::-webkit-scrollbar-thumb{background-color:transparent}.mx_AutoHideScrollbar{scrollbar-color:transparent transparent}.mx_CompatibilityPage{width:100%;height:100%;background-color:#e55}.mx_CompatibilityPage_box{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:500px;height:300px;border:1px solid;padding:10px;background-color:#fcc}.mx_ContextualMenu_wrapper{position:fixed;z-index:5000}.mx_ContextualMenu_background{position:fixed;top:0;left:0;width:100%;height:100%;opacity:1;z-index:5000}.mx_ContextualMenu{border-radius:8px;-webkit-box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);background-color:#fff;color:#2e2f32;position:absolute;font-size:1.4rem;z-index:5001}.mx_ContextualMenu_right{right:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_right{right:8px}.mx_ContextualMenu_chevron_right{position:absolute;right:-8px;top:0;width:0;height:0;border-top:8px solid transparent;border-left:8px solid #fff;border-bottom:8px solid transparent}.mx_ContextualMenu_left{left:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_left{left:8px}.mx_ContextualMenu_chevron_left{position:absolute;left:-8px;top:0;width:0;height:0;border-top:8px solid transparent;border-right:8px solid #fff;border-bottom:8px solid transparent}.mx_ContextualMenu_top{top:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_top{top:8px}.mx_ContextualMenu_chevron_top{position:absolute;left:0;top:-8px;width:0;height:0;border-left:8px solid transparent;border-bottom:8px solid #fff;border-right:8px solid transparent}.mx_ContextualMenu_bottom{bottom:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom{bottom:8px}.mx_ContextualMenu_chevron_bottom{position:absolute;left:0;bottom:-8px;width:0;height:0;border-left:8px solid transparent;border-top:8px solid #fff;border-right:8px solid transparent}.mx_ContextualMenu_spinner{display:block;margin:0 auto}.mx_CreateRoom{width:960px;margin-left:auto;margin-right:auto;color:#2e2f32}.mx_CreateRoom input,.mx_CreateRoom textarea{border-radius:3px;border:1px solid #c7c7c7;font-weight:300;font-size:1.3rem;padding:9px;margin-top:6px}.mx_CreateRoom_description{width:330px}.mx_CustomRoomTagPanel{background-color:hsla(0,0%,91%,.77);max-height:40vh}.mx_CustomRoomTagPanel_scroller{max-height:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CustomRoomTagPanel .mx_AccessibleButton{margin:0 auto;width:40px;padding:10px 0 9px;position:relative}.mx_CustomRoomTagPanel .mx_BaseAvatar_image{-webkit-box-sizing:border-box;box-sizing:border-box;width:40px;height:40px}.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected:before{content:"";height:56px;background-color:#238cf5;width:5px;position:absolute;left:-9px;border-radius:0 3px 3px 0;top:5px}.mx_FilePanel{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_FilePanel .mx_RoomView_messageListWrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_FilePanel .mx_RoomView_MessageList{width:100%}.mx_FilePanel .mx_EventTile_avatar,.mx_FilePanel .mx_RoomView_MessageList h2{display:none}.mx_FilePanel .mx_EventTile{word-break:break-word;margin-top:32px}.mx_FilePanel .mx_EventTile .mx_MImageBody{margin-right:0}.mx_FilePanel .mx_EventTile .mx_MFileBody{line-height:2.4rem}.mx_FilePanel .mx_EventTile .mx_MFileBody_download{padding-top:8px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.4rem;color:#acacac}.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;color:#747474}.mx_FilePanel .mx_EventTile .mx_MImageBody_size{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;font-size:1.4rem;text-align:right;white-space:nowrap}.mx_FilePanel .mx_EventTile_senderDetails{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:-2px}.mx_FilePanel .mx_EventTile_senderDetailsLink{text-decoration:none}.mx_FilePanel .mx_EventTile .mx_SenderProfile{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;line-height:normal;padding:0;font-size:1.4rem;opacity:1;color:#acacac}.mx_FilePanel .mx_EventTile .mx_MessageTimestamp{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;text-align:right;visibility:visible;position:static;font-size:1.4rem;opacity:1;color:#acacac}.mx_FilePanel .mx_EventTile_line{margin-right:0;padding-left:0}.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line{padding-left:0}.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line{background-color:#fff}.mx_FilePanel_empty:before{-webkit-mask-image:url(../../img/element-icons/room/files.5709c0c.svg);mask-image:url(../../img/element-icons/room/files.5709c0c.svg)}.mx_GenericErrorPage{width:100%;height:100%;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_GenericErrorPage_box{display:inline;width:500px;min-height:125px;border:1px solid #f22;padding:10px 10px 20px;background-color:#fcc}.mx_GroupFilterPanel{-webkit-box-flex:1;-ms-flex:1;flex:1;background-color:hsla(0,0%,91%,.77);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:0}.mx_GroupFilterPanel_items_selected{cursor:pointer}.mx_GroupFilterPanel .mx_GroupFilterPanel_divider{height:0;width:90%;border:none;border-bottom:1px solid #8d99a5}.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:100%}.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:6px}.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer>div{margin:6px 0}.mx_GroupFilterPanel .mx_TagTile{position:relative}.mx_GroupFilterPanel .mx_TagTile .mx_BetaDot{position:absolute;right:-13px;top:-11px}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype{padding:3px}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype{background-color:#fff;border-radius:6px}.mx_TagTile_selected_prototype .mx_TagTile_homeIcon:before{background-color:#2e2f32}.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon{background-color:rgba(92,100,112,.2);border-radius:48px}.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon:before{background-color:#5c6470}.mx_TagTile_homeIcon{width:32px;height:32px;position:relative}.mx_TagTile_homeIcon:before{-webkit-mask-image:url(../../img/element-icons/home.b706c0e.svg);mask-image:url(../../img/element-icons/home.b706c0e.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:21px;mask-size:21px;content:"";display:inline-block;width:32px;height:32px;position:absolute;top:calc(50% - 16px);left:calc(50% - 16px)}.mx_GroupFilterPanel .mx_TagTile_plus{margin-bottom:12px;height:32px;width:32px;border-radius:20px;background-color:rgba(92,100,112,.2);position:relative;display:block!important}.mx_GroupFilterPanel .mx_TagTile_plus:before{background-color:#5c6470;-webkit-mask-image:url(../../img/feather-customised/plus.38ae979.svg);mask-image:url(../../img/feather-customised/plus.38ae979.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected:before{content:"";height:100%;background-color:#0dbd8b;width:4px;position:absolute;left:-12px;border-radius:0 3px 3px 0}.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus{-webkit-filter:none;filter:none}.mx_TagTile_tooltip{position:relative;top:-30px;left:5px}.mx_TagTile_context_button{min-width:15px;height:15px;position:absolute;right:-5px;top:-8px;border-radius:8px;background-color:#dbdbdb;color:#000;font-weight:600;font-size:1rem;text-align:center;padding-top:1px;padding-left:4px;padding-right:4px}.mx_TagTile_avatar{position:relative}.mx_TagTile_badge{position:absolute;right:-4px;top:-2px;border-radius:8px;color:#fff;font-weight:600;font-size:1.4rem;padding:0 5px;background-color:#61708b}.mx_TagTile_badgeHighlight{background-color:#ff4b55}.mx_GroupView{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.mx_GroupView_error{margin:auto}.mx_GroupView_header{min-height:52px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:10px;padding-left:19px}.mx_GroupView_header_view{border-bottom:1px solid transparent;padding-bottom:0;padding-right:8px}.mx_GroupView_header_avatar,.mx_GroupView_header_info{display:table-cell;vertical-align:middle}.mx_GroupHeader_button{position:relative;margin-left:5px;margin-right:5px;cursor:pointer;height:20px;width:20px}.mx_GroupHeader_button:before{content:"";position:absolute;height:20px;width:20px;background-color:#91a1c0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_GroupHeader_editButton:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_GroupHeader_shareButton:before{-webkit-mask-image:url(../../img/element-icons/room/share.54dc3fb.svg);mask-image:url(../../img/element-icons/room/share.54dc3fb.svg)}.mx_GroupView_hostingSignup img{margin-left:5px}.mx_GroupView_editable{border-bottom:1px solid #c7c7c7!important;min-width:150px;cursor:text}.mx_GroupView_editable:focus{border-bottom:1px solid #0dbd8b!important;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable){color:#0dbd8b;cursor:pointer}.mx_GroupView_avatarPicker{position:relative}.mx_GroupView_avatarPicker_edit{position:absolute;top:50px;left:15px}.mx_GroupView_avatarPicker .mx_Spinner{width:48px;height:48px!important}.mx_GroupView_header_leftCol{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden}.mx_GroupView_header_rightCol{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_GroupView_textButton{display:inline-block}.mx_GroupView_header_groupid{font-weight:400;font-size:medium;padding-left:10px}.mx_GroupView_header_name{vertical-align:middle;width:100%;height:31px;color:#2e2f32;font-weight:700;font-size:2.2rem;padding-right:16px}.mx_GroupView_header_name,.mx_GroupView_header_shortDesc{overflow:hidden;padding-left:19px;text-overflow:ellipsis;border-bottom:1px solid transparent}.mx_GroupView_header_shortDesc{vertical-align:bottom;float:left;max-height:42px;color:#a2a2a2;font-weight:300;font-size:1.3rem;margin-right:16px}.mx_GroupView_avatarPicker_label{cursor:pointer}.mx_GroupView_cancelButton{padding-left:8px}.mx_GroupView_cancelButton img{position:relative;top:5px}.mx_GroupView input[type=radio]{margin:10px 10px 0}.mx_GroupView_label_text{display:inline-block;max-width:80%;vertical-align:.1em;line-height:2em}.mx_GroupView_body{margin:0 24px}.mx_GroupView_body,.mx_GroupView_rooms{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_GroupView_rooms{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_GroupView h3{text-transform:uppercase;color:#3d3b39;font-weight:600;font-size:1.3rem;margin-bottom:10px}.mx_GroupView_rooms_header .mx_AccessibleButton{padding-left:14px;margin-bottom:14px;height:24px}.mx_GroupView_group{border-top:1px solid transparent}.mx_GroupView_group_disabled{opacity:.3;pointer-events:none}.mx_GroupView_rooms_header_addRow_button{display:inline-block}.mx_GroupView_rooms_header_addRow_button object{pointer-events:none}.mx_GroupView_rooms_header_addRow_label{display:inline-block;vertical-align:top;line-height:2.4rem;padding-left:28px;color:#0dbd8b}.mx_GroupView_rooms .mx_RoomDetailList{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-top:1px solid transparent;padding-top:10px;word-break:break-word}.mx_GroupView .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_GroupView_membershipSection{color:#888;margin-top:10px}.mx_GroupView_membershipSubSection{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:8px}.mx_GroupView_membershipSubSection .mx_Spinner{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_GroupView_membershipSection_description{line-height:3.4rem}.mx_GroupView_membershipSection_description .mx_BaseAvatar{margin-right:10px}.mx_GroupView_membershipSection .mx_GroupView_textButton{margin-right:0;margin-top:0;margin-left:8px}.mx_GroupView_memberSettings_toggle label{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_GroupView_memberSettings input{margin-right:6px}.mx_GroupView_featuredThings{margin-top:20px}.mx_GroupView_featuredThings_header{font-weight:700;font-size:120%;margin-bottom:20px}.mx_GroupView_featuredThings_category{font-weight:700;font-size:110%;margin-top:10px}.mx_GroupView_featuredThings_container{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_GroupView_featuredThing,.mx_GroupView_featuredThings_addButton{display:table-cell;text-align:center;width:100px;margin:0 20px}.mx_GroupView_featuredThing{position:relative}.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton{position:absolute;top:-7px;right:11px;opacity:.4}.mx_GroupView_featuredThing .mx_BaseAvatar{vertical-align:baseline;vertical-align:initial}.mx_GroupView_featuredThings_addButton object{pointer-events:none}.mx_GroupView_featuredThing_name{word-wrap:break-word}.mx_GroupView_uploadInput{display:none}.mx_GroupView_body .mx_AutoHideScrollbar>*{margin:11px 50px 50px 68px}.mx_GroupView_groupDesc textarea{width:100%;max-width:100%;height:150px}.mx_GroupView_changeDelayWarning,.mx_GroupView_groupDesc_placeholder{background-color:#f7f7f7;color:#888;border-radius:10px;text-align:center;margin:20px 0}.mx_GroupView_groupDesc_placeholder{padding:100px 20px;cursor:pointer}.mx_GroupView_changeDelayWarning{padding:40px 20px}.mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar>:not(.mx_MemberInfo_avatar){padding-left:16px;padding-right:16px}.mx_HeaderButtons{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_buttons+.mx_HeaderButtons:before{content:unset}.mx_HeaderButtons:before{content:"";background-color:#91a1c0;opacity:.5;margin:6px 8px;border-radius:1px;width:1px}.mx_HomePage{max-width:960px;width:100%;height:100%;margin-left:auto;margin-right:auto}.mx_HomePage_default{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_HomePage_default .mx_HomePage_default_wrapper{margin:auto}.mx_HomePage_default img{height:48px}.mx_HomePage_default h1{font-weight:600;font-size:3.2rem;line-height:4.4rem;margin-bottom:4px}.mx_HomePage_default h4{margin-top:4px;font-weight:600;font-size:1.8rem;line-height:2.5rem;color:#61708b}.mx_HomePage_default .mx_MiniAvatarUploader{margin:0 auto}.mx_HomePage_default .mx_HomePage_default_buttons{margin:60px auto 0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton{padding:73px 8px 15px;width:160px;height:132px;margin:20px;position:relative;display:inline-block;border-radius:8px;vertical-align:top;word-break:break-word;-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:600;font-size:1.5rem;line-height:2rem;color:#fff;background-color:#0dbd8b}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:before{top:20px;left:60px;width:40px;height:40px;content:"";position:absolute;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_sendDm:before{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_explore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_createGroup:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg)}.mx_LeftPanel{background-color:hsla(0,0%,96.1%,.9);min-width:206px;max-width:50%;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:56px;flex-basis:56px;height:100%;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer,.mx_LeftPanel .mx_LeftPanel_roomListContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_LeftPanel .mx_LeftPanel_roomListContainer{background-color:hsla(0,0%,96.1%,.9);-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;min-width:0;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader{padding:12px;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer{overflow-y:hidden;overflow-x:scroll;margin:12px 12px 0;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_leftOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000));-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%);mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000));mask-image:linear-gradient(90deg,transparent,#000 5%)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(#000),color-stop(95%,#000),to(transparent));-webkit-mask-image:linear-gradient(90deg,#000,#000 95%,transparent);mask-image:-webkit-gradient(linear,left top,right top,from(#000),color-stop(95%,#000),to(transparent));mask-image:linear-gradient(90deg,#000,#000 95%,transparent)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000),color-stop(95%,#000),to(transparent));-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000),color-stop(95%,#000),to(transparent));mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer{margin-left:12px;margin-right:12px;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_focused+.mx_LeftPanel_exploreButton,.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_hasQuery+.mx_LeftPanel_exploreButton{-ms-flex-preferred-size:0;flex-basis:0;margin:0;width:0}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_focused+.mx_LeftPanel_exploreButton:before,.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_hasQuery+.mx_LeftPanel_exploreButton:before{content:none}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton{width:32px;height:32px;border-radius:8px;background-color:rgba(141,151,165,.2);position:relative;margin-left:8px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton:before{content:"";position:absolute;top:8px;left:8px;width:16px;height:16px;-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#737d8c}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton.mx_LeftPanel_exploreButton_space:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListFilterCount{font-size:1.3rem;font-weight:600;margin-left:12px;margin-top:14px;margin-bottom:-4px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper{overflow:hidden;margin-top:10px;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyBottom{padding-bottom:32px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyTop{padding-top:32px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_actualRoomListContainer{position:relative;height:100%}.mx_LeftPanel.mx_LeftPanel_minimized{min-width:unset;width:unset!important}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer{width:68px}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton{margin-left:0;margin-top:8px;background-color:transparent}.mx_LeftPanelWidget{margin-left:8px;margin-bottom:4px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:24px;color:#8d99a5;margin-top:4px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_stickable{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:calc(100% - 16px);line-height:1.6rem;font-size:1.3rem;font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn{display:inline-block;position:relative;width:14px;height:14px;margin-right:6px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn:before{content:"";width:18px;height:18px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn.mx_LeftPanelWidget_collapseBtn_collapsed:before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox{position:relative;-ms-flex-direction:column;flex-direction:column;overflow:visible}.mx_LeftPanelWidget .mx_AppTileFullWidth,.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_LeftPanelWidget .mx_AppTileFullWidth{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;overflow:hidden;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-mask-image:linear-gradient(0deg,transparent,#000 4px);mask-image:linear-gradient(0deg,transparent,#000 4px)}.mx_LeftPanelWidget .mx_LeftPanelWidget_resizerHandle{cursor:ns-resize;border-radius:3px;width:unset!important;height:4px!important;position:absolute;top:-24px!important;left:calc(50% - 32px)!important;right:calc(50% - 32px)!important}.mx_LeftPanelWidget:hover .mx_LeftPanelWidget_resizerHandle{opacity:.8;background-color:#2e2f32}.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton{margin-left:8px;margin-right:7px;position:relative;width:24px;height:24px;border-radius:32px}.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton:before{content:"";width:16px;height:16px;position:absolute;top:4px;left:4px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg);background:#61708b}.mx_LeftPanelWidget_maximizeButtonTooltip{margin-top:-3px}.mx_MainSplit{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-width:0;min-height:0;height:100%}.mx_MainSplit>.mx_RightPanel_ResizeWrapper{padding:5px;margin-left:8px;height:calc(100vh - 51px)}.mx_MainSplit>.mx_RightPanel_ResizeWrapper:hover .mx_RightPanel_ResizeHandle{top:50%!important;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px!important;width:4px!important;border-radius:4px!important;background-color:#2e2f32;opacity:.8}.mx_MatrixChat_splash{position:relative;height:100%}.mx_MatrixChat_splashButtons{text-align:center;width:100%;position:absolute;bottom:30px}.mx_MatrixChat_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.mx_MatrixToolbar{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;height:40px}.mx_MatrixChat{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.mx_MatrixChat_syncError{color:#fff;background-color:#df2a8b;border-radius:5px;display:table;padding:30px;position:absolute;top:100px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.mx_MatrixChat>:not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle){background-color:#fff;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;height:100%}.mx_MatrixChat>.mx_ResizeHandle_horizontal:hover{position:relative}.mx_MatrixChat>.mx_ResizeHandle_horizontal:hover:before{position:absolute;left:6px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px;width:4px;border-radius:4px;content:" ";background-color:#2e2f32;opacity:.8}.mx_MyGroups{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_MyGroups .mx_BetaCard{margin:0 72px;max-width:760px}.mx_MyGroups .mx_RoomHeader_simpleHeader{margin-left:0}.mx_MyGroups_header{margin-left:2px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_MyGroups>:not(.mx_RoomHeader):not(.mx_BetaCard){max-width:960px;margin:40px}.mx_MyGroups_headerCard{-webkit-box-flex:1;-ms-flex:1 0 50%;flex:1 0 50%;margin-bottom:30px;min-width:400px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:13px;height:40px;width:40px;border-radius:20px;background-color:rgba(92,100,112,.2);position:relative}.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button:before{background-color:#5c6470;-webkit-mask:url(../../img/icons-create-room.817ede2.svg);mask:url(../../img/icons-create-room.817ede2.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:80%;mask-size:80%;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_MyGroups_headerCard_header{font-weight:700;margin-bottom:10px}.mx_MyGroups_headerCard_content{padding-right:15px}.mx_MyGroups_joinBox{visibility:hidden;height:0;margin:0}.mx_MyGroups_content{margin-left:2px;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto}.mx_MyGroups_scrollable{overflow-y:inherit}.mx_MyGroups_placeholder{background-color:#f7f7f7;color:#888;line-height:40rem;border-radius:10px;text-align:center}.mx_MyGroups_joinedGroups{border-top:1px solid transparent;overflow-x:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-line-pack:start;align-content:flex-start}.mx_MyGroups_joinedGroups .mx_GroupTile{min-width:300px;max-width:33%;-webkit-box-flex:1;-ms-flex:1 0 300px;flex:1 0 300px;height:75px;margin:10px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;cursor:pointer}.mx_GroupTile_avatar{cursor:-webkit-grab,-webkit-grab;cursor:grab,-webkit-grab}.mx_GroupTile_profile{margin-left:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_GroupTile_profile .mx_GroupTile_desc,.mx_GroupTile_profile .mx_GroupTile_groupId,.mx_GroupTile_profile .mx_GroupTile_name{padding-right:10px}.mx_GroupTile_profile .mx_GroupTile_name{margin:0;font-size:1.5rem}.mx_GroupTile_profile .mx_GroupTile_groupId{font-size:1.3rem;opacity:.7}.mx_GroupTile_profile .mx_GroupTile_desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:1.3rem;max-height:36px;overflow:hidden}.mx_NonUrgentToastContainer{position:absolute;bottom:30px;left:28px;z-index:101}.mx_NonUrgentToastContainer .mx_NonUrgentToastContainer_toast{padding:10px 12px;border-radius:8px;width:320px;font-size:1.3rem;margin-top:8px;background-color:#17191c;color:#fff}.mx_NotificationPanel{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_NotificationPanel .mx_RoomView_messageListWrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_NotificationPanel .mx_RoomView_MessageList{width:100%}.mx_NotificationPanel .mx_RoomView_MessageList h2{margin-left:0}.mx_NotificationPanel .mx_EventTile{word-break:break-word;position:relative;padding-bottom:18px}.mx_NotificationPanel .mx_EventTile:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection):after{position:absolute;bottom:0;left:0;right:0;background-color:#8d99a5;height:1px;opacity:.4;content:""}.mx_NotificationPanel .mx_EventTile_roomName{font-weight:700;font-size:1.4rem}.mx_NotificationPanel .mx_EventTile_roomName>*{vertical-align:middle}.mx_NotificationPanel .mx_EventTile_roomName>.mx_BaseAvatar{margin-right:8px}.mx_NotificationPanel .mx_EventTile_roomName a{color:#2e2f32}.mx_NotificationPanel .mx_EventTile_avatar{display:none}.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp,.mx_NotificationPanel .mx_EventTile .mx_SenderProfile{color:#2e2f32;font-size:1.2rem;display:inline;padding-left:0}.mx_NotificationPanel .mx_EventTile_senderDetails{padding-left:36px;position:relative}.mx_NotificationPanel .mx_EventTile_senderDetails a{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_NotificationPanel .mx_EventTile_roomName a,.mx_NotificationPanel .mx_EventTile_senderDetails a{text-decoration:none!important}.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp{visibility:visible;position:static;display:inline}.mx_NotificationPanel .mx_EventTile_line{margin-right:0;padding:0 0 0 36px}.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line{padding-left:0}.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line{background-color:#fff}.mx_NotificationPanel .mx_EventTile_content{margin-right:0}.mx_NotificationPanel_empty:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RightPanel{overflow-x:hidden;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-radius:8px;padding:4px 0;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%}.mx_RightPanel .mx_RoomView_MessageList{padding:14px 18px}.mx_RightPanel_header{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;border-bottom:1px solid transparent;-webkit-box-flex:0;-ms-flex:0 0 52px;flex:0 0 52px}.mx_RightPanel_headerButtonGroup{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;background-color:#fff;padding:0 9px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RightPanel_headerButton{cursor:pointer;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:1px;margin-right:1px;height:32px;width:32px;position:relative;border-radius:100%}.mx_RightPanel_headerButton:before{content:"";position:absolute;top:4px;left:4px;height:24px;width:24px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_RightPanel_headerButton:hover{background:rgba(13,189,139,.1)}.mx_RightPanel_headerButton:hover:before{background-color:#0dbd8b}.mx_RightPanel_notifsButton:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_roomSummaryButton:before{-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_groupMembersButton:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_roomsButton:before{-webkit-mask-image:url(../../img/element-icons/community-rooms.8f0b6c9.svg);mask-image:url(../../img/element-icons/community-rooms.8f0b6c9.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_headerButton_highlight:before{background-color:#0dbd8b!important}.mx_RightPanel_headerButton_badge{font-size:.8rem;border-radius:8px;color:#fff;background-color:#0dbd8b;font-weight:700;position:absolute;top:-4px;left:20px;padding:2px 4px}.mx_RightPanel_collapsebutton{-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:right;height:16px;border:none}.mx_RightPanel .mx_GroupRoomList,.mx_RightPanel .mx_MemberInfo,.mx_RightPanel .mx_MemberList,.mx_RightPanel_blank{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RightPanel .mx_RoomView_messagePanelSpinner{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin:auto}.mx_RightPanel_empty{margin-right:-28px}.mx_RightPanel_empty h2{font-weight:700;margin:16px 0}.mx_RightPanel_empty h2,.mx_RightPanel_empty p{font-size:1.4rem}.mx_RightPanel_empty:before{content:"";display:block;margin:11px auto 29px;height:42px;width:42px;background-color:#91a1c0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_RightPanel_scopeHeader{margin:24px;text-align:center;font-weight:600;font-size:1.8rem;line-height:2.2rem}.mx_RightPanel_scopeHeader .mx_BaseAvatar{margin-right:8px;vertical-align:middle}.mx_RightPanel_scopeHeader .mx_BaseAvatar_image{border-radius:8px}.mx_RoomDirectory_dialogWrapper>.mx_Dialog{max-width:960px;height:100%}.mx_RoomDirectory_dialog{height:100%;flex-direction:column}.mx_RoomDirectory,.mx_RoomDirectory_dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column}.mx_RoomDirectory{margin-bottom:12px;color:#2e2f32;word-break:break-word}.mx_RoomDirectory,.mx_RoomDirectory_list{flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_RoomDirectory_list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column}.mx_RoomDirectory_list .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_RoomDirectory_listheader{display:block;margin-top:13px}.mx_RoomDirectory_searchbox{-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important}.mx_RoomDirectory_listheader .mx_NetworkDropdown{-webkit-box-flex:0;-ms-flex:0 0 200px;flex:0 0 200px}.mx_RoomDirectory_tableWrapper{overflow-y:auto;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RoomDirectory_table{color:#2e2f32;display:grid;font-size:1.2rem;grid-template-columns:-webkit-max-content auto -webkit-max-content -webkit-max-content -webkit-max-content;grid-template-columns:max-content auto max-content max-content max-content;grid-row-gap:24px;row-gap:24px;text-align:left;width:100%}.mx_RoomDirectory_roomAvatar{padding:2px 14px 0 0}.mx_RoomDirectory_roomMemberCount{-ms-flex-item-align:center;align-self:center;color:#747474;padding:3px 10px 0}.mx_RoomDirectory_roomMemberCount:before{background-color:#747474;display:inline-block;vertical-align:text-top;margin-right:2px;content:"";-webkit-mask:url(../../img/feather-customised/user.7a4d23d.svg);mask:url(../../img/feather-customised/user.7a4d23d.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:80%;mask-size:80%;width:16px;height:16px}.mx_RoomDirectory_join,.mx_RoomDirectory_preview{-ms-flex-item-align:center;align-self:center;white-space:nowrap}.mx_RoomDirectory_name{display:inline-block;font-size:1.8rem;font-weight:600}.mx_RoomDirectory_perms{display:inline-block}.mx_RoomDirectory_perm{border-radius:10px;display:inline-block;height:20px;line-height:2rem;padding:0 5px;color:#fff;background-color:#aaa}.mx_RoomDirectory_topic{cursor:auto;color:#747474;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.mx_RoomDirectory_alias{font-size:1.2rem;color:#a2a2a2}.mx_RoomDirectory_table tr{padding-bottom:10px;cursor:pointer}.mx_RoomDirectory .mx_RoomView_MessageList{padding:0}.mx_RoomDirectory>span{font-size:1.5rem;margin-top:0}.mx_RoomDirectory>span .mx_AccessibleButton{padding:0}.mx_RoomSearch{-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:8px;background-color:rgba(141,151,165,.2);border:1px solid transparent;height:28px;padding:1px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSearch .mx_RoomSearch_icon{width:16px;height:16px;-webkit-mask:url(../../img/element-icons/roomlist/search.3774248.svg);mask:url(../../img/element-icons/roomlist/search.3774248.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#737d8c;margin-left:7px}.mx_RoomSearch .mx_RoomSearch_input{border:none!important;-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important;color:#2e2f32!important;padding:0;height:100%;width:100%;font-size:1.2rem;line-height:1.6rem}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-webkit-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-moz-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded):-ms-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-ms-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::placeholder{color:#8d99a5!important}.mx_RoomSearch.mx_RoomSearch_hasQuery{border-color:#737d8c}.mx_RoomSearch.mx_RoomSearch_focused{-webkit-box-shadow:0 0 4px 4px rgba(0,132,255,.5);box-shadow:0 0 4px 4px rgba(0,132,255,.5);border-color:transparent}.mx_RoomSearch.mx_RoomSearch_focused,.mx_RoomSearch.mx_RoomSearch_hasQuery{background-color:#fff}.mx_RoomSearch.mx_RoomSearch_focused .mx_RoomSearch_clearButton,.mx_RoomSearch.mx_RoomSearch_hasQuery .mx_RoomSearch_clearButton{width:16px;height:16px;-webkit-mask-image:url(../../img/element-icons/roomlist/search-clear.6164d97.svg);mask-image:url(../../img/element-icons/roomlist/search-clear.6164d97.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#737d8c;margin-right:8px}.mx_RoomSearch .mx_RoomSearch_clearButton{width:0;height:0}.mx_RoomSearch.mx_RoomSearch_minimized{border-radius:32px;height:auto;width:auto;padding:8px}.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_icon{margin-left:0}.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages){margin-left:65px;min-height:50px}.mx_RoomStatusBar_typingIndicatorAvatars{width:52px;margin-top:-1px;text-align:left}.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image{margin-right:-12px;border:1px solid #fff}.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial{padding-left:1px;padding-top:1px}.mx_RoomStatusBar_typingIndicatorRemaining{display:inline-block;color:#acacac;background-color:#ddd;border:1px solid #fff;border-radius:40px;width:24px;height:24px;line-height:2.4rem;font-size:.8em;vertical-align:top;text-align:center;position:absolute}.mx_RoomStatusBar_scrollDownIndicator{cursor:pointer;padding-left:1px}.mx_RoomStatusBar_unreadMessagesBar{padding-top:10px;color:#ff4b55;cursor:pointer}.mx_RoomStatusBar_connectionLostBar{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:19px;min-height:58px}.mx_RoomStatusBar_unsentMessages>div[role=alert]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:70px;margin:12px;padding-left:16px;background-color:#f3f8fd;border-radius:4px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge{margin-right:12px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge{width:24px!important;height:24px!important;border-radius:24px!important}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge .mx_NotificationBadge_count{font-size:1.6rem!important}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentTitle{color:#ff4b55;font-size:1.5rem}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentDescription{font-size:1.2rem}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right;margin-right:22px;color:#61708b}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton{padding:5px 10px 5px 28px;display:inline-block;position:relative}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:nth-child(2){border-left:1px solid #e3e8f0}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:before{content:"";position:absolute;left:10px;background-color:#61708b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentCancelAllBtn:before{-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);width:12px;height:16px;top:calc(50% - 8px)}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn{padding-left:34px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn:before{-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg);width:18px;height:18px;top:calc(50% - 9px)}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner{vertical-align:middle;margin-right:5px;top:1px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner+span{margin-right:10px}.mx_RoomStatusBar_connectionLostBar img{padding-left:10px;padding-right:10px;vertical-align:middle;float:left}.mx_RoomStatusBar_connectionLostBar_title{color:#ff4b55}.mx_RoomStatusBar_connectionLostBar_desc{color:#2e2f32;font-size:1.3rem;opacity:.5;padding-bottom:20px}.mx_RoomStatusBar_resend_link{color:#2e2f32!important;text-decoration:underline!important;cursor:pointer}.mx_RoomStatusBar_typingBar{height:50px;line-height:5rem;color:#2e2f32;opacity:.5;overflow-y:hidden;display:block}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages){min-height:40px}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_indicator{margin-top:10px}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_typingBar{height:40px;line-height:4rem}.mx_RoomView{word-wrap:break-word;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@-webkit-keyframes mx_RoomView_fileDropTarget_animation{0%{opacity:0}to{opacity:.95}}@keyframes mx_RoomView_fileDropTarget_animation{0%{opacity:0}to{opacity:.95}}.mx_RoomView_fileDropTarget{min-width:0;width:100%;height:100%;font-size:1.8rem;text-align:center;pointer-events:none;background-color:#fff;opacity:.95;position:absolute;z-index:3000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-animation:mx_RoomView_fileDropTarget_animation;animation:mx_RoomView_fileDropTarget_animation;-webkit-animation-duration:.5s;animation-duration:.5s}@-webkit-keyframes mx_RoomView_fileDropTarget_image_animation{0%{width:0}to{width:32px}}@keyframes mx_RoomView_fileDropTarget_image_animation{0%{width:0}to{width:32px}}.mx_RoomView_fileDropTarget_image{-webkit-animation:mx_RoomView_fileDropTarget_image_animation;animation:mx_RoomView_fileDropTarget_image_animation;-webkit-animation-duration:.5s;animation-duration:.5s;margin-bottom:16px}.mx_RoomView_auxPanel{min-width:0;width:100%;margin:0 auto;overflow:auto;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomView_auxPanel_fullHeight{position:absolute;top:0;bottom:0;left:0;right:0;z-index:3000;background-color:#fff}.mx_RoomView_auxPanel_hiddenHighlights{border-bottom:1px solid transparent;padding:10px 26px;color:#ff4b55;cursor:pointer}.mx_RoomView_auxPanel_apps{max-width:1920px!important}.mx_RoomView .mx_MainSplit,.mx_RoomView_messagePanel{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RoomView_messagePanel{width:100%;overflow-y:auto;overflow-anchor:none}.mx_RoomView_messagePanelSearchSpinner{-webkit-box-flex:1;-ms-flex:1;flex:1;background-image:url(../../img/typing-indicator-2x.0eb9f0e.gif);background-position:center 367px;background-size:25px;background-repeat:no-repeat;position:relative}.mx_RoomView_messagePanelSearchSpinner:before{background-color:#888;-webkit-mask:url(../../img/feather-customised/search-input.044bfa7.svg);mask:url(../../img/feather-customised/search-input.044bfa7.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:50px;mask-size:50px;content:"";position:absolute;top:286px;left:0;right:0;height:50px}.mx_RoomView_body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_RoomView_body .mx_RoomView_messagePanel,.mx_RoomView_body .mx_RoomView_messagePanelSearchSpinner,.mx_RoomView_body .mx_RoomView_messagePanelSpinner{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.mx_RoomView_body .mx_RoomView_timeline{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomView_statusArea{width:100%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;max-height:0;background-color:#fff;z-index:1000;overflow:hidden;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.mx_RoomView_statusArea_expanded{max-height:100px}.mx_RoomView_statusAreaBox{margin:auto;min-height:50px}.mx_RoomView_statusAreaBox_line{margin-left:65px;border-top:1px solid transparent;height:1px}.mx_RoomView_messageListWrapper{min-height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_RoomView_searchResultsPanel a{text-decoration:none;color:inherit}.mx_RoomView_empty{font-size:1.3rem;padding:0 24px;margin-right:30px;text-align:center;margin-bottom:80px}.mx_RoomView_MessageList{list-style-type:none;padding:18px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_RoomView_MessageList li{clear:both}li.mx_RoomView_myReadMarker_container{height:0;margin:0;padding:0;border:0}hr.mx_RoomView_myReadMarker{border-top:1px solid #0dbd8b;border-bottom:1px solid #0dbd8b;margin-top:0;position:relative;top:-1px;z-index:1;-webkit-transition:width easeinsine .4s 1s,opacity easeinsine .4s 1s;transition:width easeinsine .4s 1s,opacity easeinsine .4s 1s;width:99%;opacity:1}.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner{background-color:#fff}.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename{color:#fff;opacity:1}.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line{margin-top:2px;border:none;height:0}.mx_RoomView_inCall .mx_MessageComposer_wrapper{border-top:2px hidden;padding-top:1px}.mx_RoomView_voipChevron{position:absolute;bottom:-11px;right:11px}.mx_RoomView_voipButton{float:right;margin-right:13px;margin-top:13px;cursor:pointer}.mx_RoomView_voipButton object{pointer-events:none}.mx_RoomView .mx_MessageComposer{width:100%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:2px}.mx_RoomView_ongoingConfCallNotification{width:100%;text-align:center;background-color:#ff4b55;color:#fff;font-weight:700;padding:6px 0;cursor:pointer}.mx_RoomView_ongoingConfCallNotification a{color:#fff!important}.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList{margin-bottom:4px}.mx_MatrixChat_useCompactLayout .mx_RoomView_statusAreaBox{min-height:42px}.mx_ScrollPanel .mx_RoomView_MessageList{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_SearchBox{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0}.mx_SearchBox.mx_SearchBox_blurred:not(:hover){background-color:transparent}.mx_SearchBox .mx_SearchBox_closeButton{cursor:pointer;background-image:url(../../img/icons-close.11ff07c.svg);background-repeat:no-repeat;width:16px;height:16px;background-position:50%;padding:9px}.mx_SpacePanel{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;background-color:hsla(0,0%,91%,.77);padding:0;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto}.mx_SpacePanel .mx_SpacePanel_spaceTreeWrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:8px 8px 16px 0}.mx_SpacePanel .mx_SpacePanel_toggleCollapse{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:40px;height:40px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:32px;mask-size:32px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;margin-left:16px;margin-bottom:12px;background-color:#8d99a5;-webkit-mask-image:url(../../img/element-icons/expand-space-panel.e6f74b9.svg);mask-image:url(../../img/element-icons/expand-space-panel.e6f74b9.svg)}.mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.mx_SpacePanel ul{margin:0;list-style:none;padding:0}.mx_SpacePanel ul>.mx_SpaceItem{padding-left:16px}.mx_SpacePanel .mx_SpaceButton_toggleCollapse{cursor:pointer}.mx_SpacePanel .mx_SpaceTreeLevel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:250px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_SpacePanel .mx_SpaceItem{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:wrap;flex-flow:wrap}.mx_SpacePanel .mx_SpaceItem.mx_SpaceItem_narrow{-ms-flex-item-align:baseline;align-self:baseline}.mx_SpacePanel .mx_SpaceItem.collapsed>.mx_SpaceButton>.mx_SpaceButton_toggleCollapse{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_SpacePanel .mx_SpaceItem.collapsed>.mx_SpaceTreeLevel{display:none}.mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces)>.mx_SpaceButton{margin-left:16px;min-width:40px}.mx_SpacePanel .mx_SpaceButton{border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:4px 4px 4px 0;width:100%}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper{background-color:#fff}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper{padding:1px;border:3px solid #737d8c}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:12px;padding:4px}.mx_SpacePanel .mx_SpaceButton:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper{width:100%;padding-right:16px;overflow:hidden}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:8px;white-space:nowrap;display:block;text-overflow:ellipsis;overflow:hidden;padding-right:8px;font-size:1.4rem;line-height:1.8rem}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse{width:16px;height:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon{width:32px;min-width:32px;height:32px;border-radius:8px;position:relative}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon:before{position:absolute;content:"";width:32px;height:32px;top:0;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:18px;mask-size:18px}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon{background-color:#fff}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon:before{background-color:#3f3d3d;-webkit-mask-image:url(../../img/element-icons/home.b706c0e.svg);mask-image:url(../../img/element-icons/home.b706c0e.svg)}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon{background-color:#0dbd8b;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon:before{background-color:#fff;-webkit-mask-image:url(../../img/element-icons/plus.62cc275.svg);mask-image:url(../../img/element-icons/plus.62cc275.svg);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon{background-color:#c1c6cd}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.mx_SpacePanel .mx_SpaceButton .mx_BaseAvatar_image{border-radius:8px}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton{width:20px;min-width:20px;height:20px;margin-top:auto;margin-bottom:auto;display:none;position:absolute;right:4px}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton:before{top:2px;left:2px;content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);background:#2e2f32}.mx_SpacePanel .mx_SpacePanel_badgeContainer{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge{margin:0 2px}.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot{margin:0 7px}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer{right:0;top:0}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge{background-clip:padding-box}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot{margin:0 -1px 0 0;border:3px solid hsla(0,0%,91%,.77)}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_2char,.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_3char{margin:-5px -5px 0 0;border:2px solid hsla(0,0%,91%,.77)}.mx_SpacePanel.collapsed .mx_SpaceButton.mx_SpaceButton_active .mx_SpacePanel_badgeContainer{right:-3px;top:-3px}.mx_SpacePanel:not(.collapsed) .mx_SpacePanel_badgeContainer{position:absolute;right:4px}.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer{width:0;height:0;display:none}.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton{display:block}.mx_SpacePanel>.mx_AutoHideScrollbar>.mx_SpaceButton,.mx_SpacePanel>.mx_AutoHideScrollbar>.mx_SpaceButton.mx_SpaceButton_active:before{height:32px}.mx_SpacePanel>.mx_AutoHideScrollbar>ul{padding-left:0}.mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_header{margin:12px 16px;font-weight:600;font-size:1.5rem;line-height:1.8rem}.mx_SpacePanel_contextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton{color:#0dbd8b}.mx_SpacePanel_contextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton .mx_SpacePanel_iconInvite:before{background-color:#0dbd8b;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconLeave:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconMembers:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconPlus:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconHash:before{-webkit-mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_SpacePanel_sharePublicSpace{margin:0}.mx_SpaceRoomDirectory_dialogWrapper>.mx_Dialog{max-width:960px;height:100%}.mx_SpaceRoomDirectory{height:100%;margin-bottom:12px;color:#2e2f32;word-break:break-word;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_SpaceRoomDirectory,.mx_SpaceRoomDirectory .mx_Dialog_title,.mx_SpaceRoomView_landing .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar,.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar{margin-right:12px;-ms-flex-item-align:center;align-self:center}.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar_image,.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar_image{border-radius:8px}.mx_SpaceRoomDirectory .mx_Dialog_title>div>h1,.mx_SpaceRoomView_landing .mx_Dialog_title>div>h1{font-weight:600;font-size:1.8rem;line-height:2.2rem;margin:0}.mx_SpaceRoomDirectory .mx_Dialog_title>div>div,.mx_SpaceRoomView_landing .mx_Dialog_title>div>div{font-weight:400;color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_SpaceRoomDirectory .mx_AccessibleButton_kind_link,.mx_SpaceRoomView_landing .mx_AccessibleButton_kind_link{padding:0}.mx_SpaceRoomDirectory .mx_SearchBox,.mx_SpaceRoomView_landing .mx_SearchBox{margin:24px 0 16px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults{text-align:center}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults>div,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults>div{font-size:1.5rem;line-height:2.4rem;color:#737d8c}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:32px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.5rem;line-height:2.4rem;color:#2e2f32}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton{padding:4px 12px;font-weight:400}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton+.mx_AccessibleButton,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton+.mx_AccessibleButton{margin-left:16px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_primary_outline,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_primary_outline{padding:3px 12px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader>span,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader>span{margin-left:auto}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error{position:relative;font-weight:600;color:#ff4b55;font-size:1.5rem;line-height:1.8rem;margin:20px auto 12px;padding-left:24px;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error:before,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error:before{content:"";position:absolute;height:16px;width:16px;left:0;background-image:url(../../img/element-icons/warning-badge.de1033e.svg)}.mx_SpaceRoomDirectory_list{margin-top:16px;padding-bottom:40px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount>h3{display:inline;font-weight:600;font-size:1.8rem;line-height:2.2rem;color:#2e2f32}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount>span{margin-left:8px;font-size:1.5rem;line-height:2.4rem;color:#737d8c}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace .mx_BaseAvatar_image{border-radius:8px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle{position:absolute;left:-1px;top:10px;height:16px;width:16px;border-radius:4px;background-color:#fff}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle:before{content:"";position:absolute;top:0;left:0;height:16px;width:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#8d99a5;-webkit-mask-size:16px;mask-size:16px;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle.mx_SpaceRoomDirectory_subspace_toggle_shown:before{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children{position:relative;padding-left:12px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile{position:relative;padding:8px 16px;border-radius:8px;min-height:56px;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:20px auto -webkit-max-content;grid-template-columns:20px auto max-content;grid-column-gap:8px;grid-row-gap:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_BaseAvatar{grid-row:1;grid-column:1}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name{font-weight:600;font-size:1.5rem;line-height:1.8rem;grid-row:1;grid-column:2}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip{display:inline;margin-left:12px;color:#8d99a5;font-size:1.2rem;line-height:1.5rem}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon{margin-right:4px;position:relative;vertical-align:text-top}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon:before{position:absolute;top:0;left:0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_info{font-size:1.4rem;line-height:1.8rem;color:#737d8c;grid-row:2;grid-column:1/3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions{text-align:right;margin-left:20px;grid-column:3;grid-row:1/3}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton{line-height:2.4rem;padding:4px 16px;display:inline-block;visibility:hidden}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton_kind_primary_outline{padding:3px 16px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_Checkbox{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;margin-left:12px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover{background-color:hsla(0,0%,91%,.77)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover .mx_AccessibleButton{visibility:visible}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:before,.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children:before{content:"";position:absolute;background-color:hsla(0,0%,91%,.77);width:1px;height:100%;left:6px;top:0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_actions .mx_SpaceRoomDirectory_actionsText{font-weight:400;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_SpaceRoomDirectory_list>hr{border:none;height:1px;background-color:rgba(141,151,165,.2);margin:20px 0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_createRoom{display:block;margin:16px auto 0;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomView .mx_MainSplit>div:first-child{padding:80px 60px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-height:100%;overflow-y:auto}.mx_SpaceRoomView .mx_MainSplit>div:first-child h1{margin:0;font-size:2.4rem;font-weight:600;color:#2e2f32;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_description{font-size:1.5rem;color:#737d8c;margin-top:12px;margin-bottom:24px;max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AddExistingToSpace{max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AddExistingToSpace .mx_AddExistingToSpace_content{height:calc(100vh - 360px);max-height:400px}.mx_SpaceRoomView .mx_MainSplit>div:first-child:not(.mx_SpaceRoomView_landing) .mx_SpaceFeedbackPrompt{width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons{display:block;margin-top:44px;width:428px;text-align:right}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons .mx_AccessibleButton_hasKind{padding:8px 22px;margin-left:16px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons input.mx_AccessibleButton{border:none}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_Field{max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_Field+.mx_Field{margin-top:28px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_errorText{font-weight:600;font-size:1.2rem;line-height:1.5rem;color:#ff4b55;margin-bottom:28px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpaceRoomView .mx_SpaceRoomView_preview{padding:32px 24px!important;margin:auto;max-width:480px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:2px 15px 30px rgba(0,0,0,.48);box-shadow:2px 15px 30px rgba(0,0,0,.48);border-radius:8px;position:relative}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_BetaCard_betaPill{position:absolute;right:24px;top:32px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt{font-weight:600;font-size:1.4rem;line-height:2.4rem;color:#2e2f32;margin-top:24px;position:relative;padding-left:24px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt .mx_AccessibleButton_kind_link{display:inline;padding:0;font-size:inherit;line-height:inherit}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt:before{content:"";position:absolute;height:2.4rem;width:20px;left:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);background-color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:20px;font-size:1.5rem}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div{margin-left:8px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div .mx_SpaceRoomView_preview_inviter_name{line-height:1.8rem}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div .mx_SpaceRoomView_preview_inviter_mxid{line-height:2.4rem;color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_preview>.mx_BaseAvatar>.mx_BaseAvatar_image,.mx_SpaceRoomView .mx_SpaceRoomView_preview>.mx_BaseAvatar_image{border-radius:12px}.mx_SpaceRoomView .mx_SpaceRoomView_preview h1.mx_SpaceRoomView_preview_name{margin:20px 0!important}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_topic{font-size:1.4rem;line-height:2.2rem;color:#737d8c;margin:20px 0;max-height:160px;overflow-y:auto}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons{margin-top:20px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons .mx_AccessibleButton{width:200px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:14px 0}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:20px}.mx_SpaceRoomView .mx_SpaceRoomView_landing>.mx_BaseAvatar>.mx_BaseAvatar_image,.mx_SpaceRoomView .mx_SpaceRoomView_landing>.mx_BaseAvatar_image{border-radius:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name{margin:24px 0 16px;font-size:1.5rem;color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name>span{display:inline-block}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_nameRow{margin-top:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_nameRow>h1{display:inline-block}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_inviter .mx_BaseAvatar{margin-right:4px;vertical-align:middle}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_info{display:inline-block;margin:0 auto 0 0}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_FacePile{display:inline-block;margin-right:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_FacePile .mx_FacePile_faces{cursor:pointer}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_inviteButton{position:relative;padding:4px 18px 4px 40px;line-height:2.4rem;height:-webkit-min-content;height:-moz-min-content;height:min-content}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_inviteButton:before{position:absolute;content:"";left:8px;height:16px;width:16px;background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_settingsButton{position:relative;margin-left:16px;width:24px;height:24px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_settingsButton:before{position:absolute;content:"";left:0;top:0;height:24px;width:24px;background:#8d99a5;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_topic{font-size:1.5rem;margin-top:12px;margin-bottom:16px}.mx_SpaceRoomView .mx_SpaceRoomView_landing>hr{border:none;height:1px;background-color:hsla(0,0%,91%,.77)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SearchBox{margin:0 0 20px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt{margin-bottom:16px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt+hr{display:none}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton>h3{font-weight:600;margin:0 0 4px}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton>span{color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover{border-color:#0dbd8b}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover:before{background-color:#0dbd8b}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover>span{color:#2e2f32}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_justMeButton:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_betaDisclaimer{padding:58px 16px 16px;position:relative;border-radius:8px;background-color:#f3f8fd;max-width:428px;margin:20px 0 30px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_betaDisclaimer .mx_BetaCard_betaPill{position:absolute;left:16px;top:16px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons{color:#737d8c;margin-top:28px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton{position:relative;display:inline-block;padding-left:32px;line-height:24px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton:before{content:"";position:absolute;height:24px;width:24px;top:0;left:0;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:32px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_SpaceRoomView_inviteTeammates_inviteDialogButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpaceRoomView_info{color:#737d8c;font-size:1.5rem;line-height:2.4rem;margin:20px 0}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private,.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public{padding-left:20px;position:relative}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before,.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before{position:absolute;content:"";width:20px;height:20px;top:0;left:-2px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before{-webkit-mask-size:12px;mask-size:12px;-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before{-webkit-mask-size:14px;mask-size:14px;-webkit-mask-image:url(../../img/element-icons/lock.1f264bd.svg);mask-image:url(../../img/element-icons/lock.1f264bd.svg)}.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link{color:inherit;position:relative;padding-left:16px}.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link:before{content:"·";position:absolute;left:6px}.mx_SpaceFeedbackPrompt{margin-top:18px;margin-bottom:12px}.mx_SpaceFeedbackPrompt>hr{border:none;border-top:1px solid #e7e7e7;margin-bottom:12px}.mx_SpaceFeedbackPrompt>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-size:1.5rem;line-height:2.4rem}.mx_SpaceFeedbackPrompt>div>span{color:#737d8c;position:relative;padding-left:32px;font-size:inherit;line-height:inherit;margin-right:auto}.mx_SpaceFeedbackPrompt>div>span:before{content:"";position:absolute;left:0;top:2px;height:20px;width:20px;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_SpaceFeedbackPrompt>div .mx_AccessibleButton_kind_link{color:#0dbd8b;position:relative;padding:0 0 0 24px;margin-left:8px;font-size:inherit;line-height:inherit}.mx_SpaceFeedbackPrompt>div .mx_AccessibleButton_kind_link:before{content:"";position:absolute;left:0;height:16px;width:16px;background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);-webkit-mask-position:center;mask-position:center}.mx_TabbedView{padding:0 0 0 16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;top:0;bottom:0;left:0;right:0;margin:8px 0 0}.mx_TabbedView_tabLabels{width:170px;max-width:170px;color:#45474a;position:fixed}.mx_TabbedView_tabLabel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:text-top;cursor:pointer;padding:8px 0;border-radius:8px;font-size:1.3rem;position:relative}.mx_TabbedView_tabLabel_active{background-color:#0dbd8b;color:#fff}.mx_TabbedView_maskedIcon{margin-left:8px;margin-right:16px;width:16px;height:16px;display:inline-block}.mx_TabbedView_maskedIcon:before{display:inline-block;background-color:#454545;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px;width:16px;height:16px;-webkit-mask-position:center;mask-position:center;content:""}.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before{background-color:#fff}.mx_TabbedView_tabLabel_text{vertical-align:middle}.mx_TabbedView_tabPanel{margin-left:240px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_TabbedView_tabPanel,.mx_TabbedView_tabPanelContent{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-height:0}.mx_TabbedView_tabPanelContent{overflow:auto}.mx_ToastContainer{position:absolute;top:0;left:70px;z-index:101;padding:4px;display:grid;grid-template-rows:1fr 14px 6px}.mx_ToastContainer.mx_ToastContainer_stacked:before{content:"";margin:0 4px;grid-row:2/4}.mx_ToastContainer .mx_Toast_toast,.mx_ToastContainer.mx_ToastContainer_stacked:before{grid-column:1;background-color:#f2f5f8;-webkit-box-shadow:0 4px 20px rgba(0,0,0,.5);box-shadow:0 4px 20px rgba(0,0,0,.5);border-radius:8px}.mx_ToastContainer .mx_Toast_toast{grid-row:1/3;color:#2e2f32;overflow:hidden;display:grid;grid-template-columns:22px 1fr;grid-column-gap:8px;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;grid-row-gap:4px;row-gap:4px;padding:8px}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:after,.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:before{content:"";width:22px;height:22px;grid-column:1;grid-row:1;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-size:100%;background-repeat:no-repeat}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#2e2f32}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:before{background-color:#fff;-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);-webkit-mask-size:90%;mask-size:90%}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_secure_backup:after{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);background-color:#2e2f32}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_body,.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_title{grid-column:2}.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon){padding-left:12px}.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) .mx_Toast_title{grid-column:1/-1}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description,.mx_ToastContainer .mx_Toast_toast .mx_Toast_title{padding-right:8px}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2{grid-column:1/3;grid-row:1;margin:0;font-size:1.5rem;font-weight:600;display:inline;width:auto;vertical-align:middle}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title span{padding-left:8px;float:right;font-size:1.2rem;line-height:2.2rem;color:#61708b}.mx_ToastContainer .mx_Toast_toast .mx_Toast_body{grid-column:1/3;grid-row:2}.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons{float:right;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_FormButton{min-width:96px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description{max-width:272px;overflow:hidden;text-overflow:ellipsis;margin:4px 0 11px;font-size:1.2rem}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description .mx_AccessibleButton_kind_link{font-size:inherit;padding:0}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description a{text-decoration:none}.mx_ToastContainer .mx_Toast_toast .mx_Toast_detail{color:#737d8c}.mx_ToastContainer .mx_Toast_toast .mx_Toast_deviceID{font-size:1rem}.mx_UploadBar{padding-left:65px;position:relative}.mx_UploadBar .mx_ProgressBar{width:calc(100% - 40px)}.mx_UploadBar_filename{margin-top:5px;color:#61708b;position:relative;padding-left:22px;font-size:1.5rem;vertical-align:middle}.mx_UploadBar_filename:before{content:"";height:18px;width:18px;left:0;-webkit-mask-image:url(../../img/element-icons/upload.e2a53e0.svg);mask-image:url(../../img/element-icons/upload.e2a53e0.svg)}.mx_UploadBar_cancel,.mx_UploadBar_filename:before{position:absolute;top:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#61708b}.mx_UploadBar_cancel{right:0;height:16px;width:16px;margin-right:16px;-webkit-mask-image:url(../../img/icons-close.11ff07c.svg);mask-image:url(../../img/icons-close.11ff07c.svg)}.mx_UserMenu{padding-right:6px}.mx_UserMenu.mx_UserMenu_prototype{margin-bottom:6px;padding-right:0}.mx_UserMenu.mx_UserMenu_prototype .mx_UserMenu_headerButtons{margin-right:2px}.mx_UserMenu.mx_UserMenu_prototype:after{content:"";border-bottom:1px solid #2e2f32;opacity:.2;display:block;padding-top:8px}.mx_UserMenu .mx_UserMenu_headerButtons{width:16px;height:16px;position:relative;display:block}.mx_UserMenu .mx_UserMenu_headerButtons:before{content:"";width:16px;height:16px;position:absolute;top:0;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_UserMenu .mx_UserMenu_row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer{position:relative;margin-right:8px;height:32px;padding:3px 0}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer .mx_UserMenu_userAvatar{border-radius:32px;-o-object-fit:cover;object-fit:cover}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName,.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_userName{display:block}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName{color:#61708b;font-size:1.3rem;line-height:1.8rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userName{font-weight:600;font-size:1.5rem;line-height:2rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd{width:24px;height:24px;margin-right:8px;position:relative}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd:before{content:"";position:absolute;width:24px;height:24px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#61708b}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_noisy:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_muted:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg)}.mx_UserMenu.mx_UserMenu_minimized{padding-right:0}.mx_UserMenu.mx_UserMenu_minimized .mx_UserMenu_userAvatarContainer{margin-right:0}.mx_UserMenu_contextMenu{width:258px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype{padding-bottom:16px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype .mx_UserMenu_contextMenu_header{padding-bottom:0;padding-top:16px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype .mx_UserMenu_contextMenu_header:nth-child(n+2){padding-top:8px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype hr{width:85%;opacity:.2;border:none;border-bottom:1px solid #2e2f32}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList{margin-top:4px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList:before{border:none}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList>.mx_AccessibleButton{padding-top:2px;padding-bottom:2px}.mx_UserMenu_contextMenu.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton{padding-top:16px;padding-bottom:16px}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header{padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:calc(100% - 40px)}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name *{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_displayName{font-weight:700;font-size:1.5rem;line-height:2rem}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_userId{font-size:1.5rem;line-height:2.4rem}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_themeButton{min-width:32px;max-width:32px;width:32px;height:32px;margin-left:8px;border-radius:32px;background-color:#e3e8f0;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts,.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_hostingLink{padding-top:0}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts{display:inline-block}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts>span{font-weight:600;display:block}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts>span+span{margin-top:8px}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts .mx_AccessibleButton_kind_link{font-weight:400;font-size:inherit;padding:0}.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon{width:16px;height:16px;display:block}.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon:before{content:"";width:16px;height:16px;display:block;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_UserMenu_contextMenu .mx_UserMenu_iconHome:before{-webkit-mask-image:url(../../img/element-icons/roomlist/home.1b4edd5.svg);mask-image:url(../../img/element-icons/roomlist/home.1b4edd5.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconHosting:before{-webkit-mask-image:url(../../img/element-icons/brands/element.182040d.svg);mask-image:url(../../img/element-icons/brands/element.182040d.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconBell:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconLock:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconArchive:before{-webkit-mask-image:url(../../img/element-icons/roomlist/archived.226584d.svg);mask-image:url(../../img/element-icons/roomlist/archived.226584d.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconMessage:before{-webkit-mask-image:url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);mask-image:url(../../img/element-icons/roomlist/feedback.b9a3f53.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconSignOut:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconMembers:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_ViewSource_separator{clear:both;border-bottom:1px solid #e5e5e5;padding-top:.7em;padding-bottom:.7em}.mx_ViewSource_heading{font-size:1.7rem;font-weight:400;color:#2e2f32;margin-top:.7em}.mx_ViewSource pre{text-align:left;font-size:1.2rem;padding:.5em 1em;word-wrap:break-word;white-space:pre-wrap}.mx_ViewSource_details{margin-top:.8em}.mx_CompleteSecurity_header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CompleteSecurity_headerIcon{width:24px;height:24px;margin-right:4px;position:relative}.mx_CompleteSecurity_heroIcon{width:128px;height:128px;position:relative;margin:0 auto}.mx_CompleteSecurity_body{font-size:1.5rem}.mx_CompleteSecurity_waiting{color:#8d99a5}.mx_CompleteSecurity_actionRow{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:2.8rem}.mx_CompleteSecurity_actionRow .mx_AccessibleButton{-webkit-margin-start:18px;margin-inline-start:18px}.mx_CompleteSecurity_actionRow .mx_AccessibleButton.warning{color:#ff4b55}.mx_Login_submit{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;width:100%;margin-top:24px;margin-bottom:24px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center}.mx_Login_submit:disabled{opacity:.3;cursor:default}.mx_Login_loader{display:inline;position:relative;top:2px;left:8px}.mx_Login_loader .mx_Spinner{display:inline}.mx_Login_loader .mx_Spinner img{width:16px;height:16px}.mx_Login_error{color:#ff4b55;font-weight:700;text-align:center;margin-top:12px;margin-bottom:12px}.mx_Login_error.mx_Login_serverError{text-align:left;font-weight:400}.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal{color:#ff8d13}.mx_Login_type_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#232f32}.mx_Login_type_container .mx_Field{margin:0}.mx_Login_type_label{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_Login_underlinedServerName{width:-webkit-max-content;width:-moz-max-content;width:max-content;border-bottom:1px dashed #0dbd8b}div.mx_AccessibleButton_kind_link.mx_Login_forgot{display:block;margin:0 auto;font-size:inherit;padding:0}div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_AuthBody{width:500px;font-size:1.2rem;color:#61708b;background-color:#fff;border-radius:0 4px 4px 0;padding:25px 60px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AuthBody h2{font-size:2.4rem;font-weight:600;margin-top:8px;color:#232f32}.mx_AuthBody h3{font-size:1.4rem;font-weight:600;color:#61708b}.mx_AuthBody h3.mx_AuthBody_centered{text-align:center}.mx_AuthBody a:hover,.mx_AuthBody a:link,.mx_AuthBody a:visited{color:#0dbd8b;text-decoration:none}.mx_AuthBody input[type=password],.mx_AuthBody input[type=text]{color:#232f32}.mx_AuthBody .mx_Field input,.mx_AuthBody .mx_Field select{color:#232f32;background-color:#fff}.mx_AuthBody .mx_Field label{color:#232f32}.mx_AuthBody .mx_Field input:not(:-moz-placeholder-shown)+label,.mx_AuthBody .mx_Field textarea:not(:-moz-placeholder-shown)+label{background-color:#fff}.mx_AuthBody .mx_Field input:not(:-ms-input-placeholder)+label,.mx_AuthBody .mx_Field textarea:not(:-ms-input-placeholder)+label{background-color:#fff}.mx_AuthBody .mx_Field_labelAlwaysTopLeft label,.mx_AuthBody .mx_Field input:focus+label,.mx_AuthBody .mx_Field input:not(:placeholder-shown)+label,.mx_AuthBody .mx_Field select+label,.mx_AuthBody .mx_Field textarea:focus+label,.mx_AuthBody .mx_Field textarea:not(:placeholder-shown)+label{background-color:#fff}.mx_AuthBody input.error{color:#ff4b55}.mx_AuthBody .mx_Field input{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AuthBody .mx_Field_select:before{background-color:#232f32}.mx_AuthBody .mx_Dropdown{color:#232f32}.mx_AuthBody .mx_Dropdown_arrow{background:#232f32}.mx_AuthBody .mx_Dropdown_menu{background-color:#fff}.mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight{background-color:#ddd}.mx_AuthBody_fieldRow{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:10px}.mx_AuthBody_fieldRow>.mx_Field{margin:0 5px}.mx_AuthBody_fieldRow>.mx_Field:first-child{margin-left:0}.mx_AuthBody_fieldRow>.mx_Field:last-child{margin-right:0}.mx_AuthBody_paddedFooter{height:80px;padding-top:28px;text-align:center}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title{margin-top:16px;font-size:1.5rem;line-height:2.4rem}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title .mx_InlineSpinner img{vertical-align:sub;margin-right:5px}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_subtitle{margin-top:8px;font-size:1rem;line-height:1.4rem}.mx_AuthBody_changeFlow{display:block;text-align:center;width:100%}.mx_AuthBody_changeFlow>a{font-weight:600}.mx_SSOButtons+.mx_AuthBody_changeFlow{margin-top:24px}.mx_AuthBody_spinner{margin:1em 0}@media only screen and (max-width:480px){.mx_AuthBody{border-radius:4px;width:auto;max-width:500px;padding:10px}}.mx_AuthButtons{min-height:24px;height:unset!important;padding-top:13px!important;padding-bottom:14px!important;-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.mx_AuthButtons_loginButton_wrapper{text-align:center;width:100%}.mx_AuthButtons_loginButton,.mx_AuthButtons_registerButton{margin-top:3px;height:40px;border:0;border-radius:40px;margin-left:4px;margin-right:4px;min-width:80px;background-color:#0dbd8b;color:#fff;cursor:pointer;font-size:1.5rem;padding:0 11px;word-break:break-word}.mx_AuthFooter{text-align:center;width:100%;font-size:1.4rem;opacity:.72;padding:20px 0;background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.8)));background:linear-gradient(transparent,rgba(0,0,0,.8))}.mx_AuthFooter a:hover,.mx_AuthFooter a:link,.mx_AuthFooter a:visited{color:#fff;margin:0 22px}.mx_AuthHeader{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:206px;padding:25px;-webkit-box-sizing:border-box;box-sizing:border-box}@media only screen and (max-width:480px){.mx_AuthHeader{display:none}}.mx_AuthHeaderLogo{margin-top:15px;-webkit-box-flex:1;-ms-flex:1;flex:1;padding:0 25px}.mx_AuthHeaderLogo img{width:100%}@media only screen and (max-width:480px){.mx_AuthHeaderLogo{display:none}}.mx_AuthPage{width:100%;min-height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#2e3649}.mx_AuthPage,.mx_AuthPage_modal{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_AuthPage_modal{margin:100px auto auto;border-radius:4px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.33);box-shadow:0 2px 4px 0 rgba(0,0,0,.33);background-color:hsla(0,0%,96.1%,.9)}@media only screen and (max-width:480px){.mx_AuthPage_modal{margin-top:0}}.mx_CompleteSecurityBody{width:600px;color:#232f32;background-color:#fff;border-radius:4px;padding:20px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_CompleteSecurityBody h2{font-size:2.4rem;font-weight:600;margin-top:0}.mx_CompleteSecurityBody h3{font-size:1.4rem;font-weight:600}.mx_CompleteSecurityBody a:hover,.mx_CompleteSecurityBody a:link,.mx_CompleteSecurityBody a:visited{color:#0dbd8b;text-decoration:none}.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option{padding:0 3px}.mx_CountryDropdown .mx_Dropdown_arrow{padding-right:3px}.mx_CountryDropdown_shortOption{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:100%}.mx_CountryDropdown_option,.mx_CountryDropdown_shortOption{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CountryDropdown_option{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_InteractiveAuthEntryComponents_emailWrapper{padding-right:100px;position:relative;margin-top:32px;margin-bottom:32px}.mx_InteractiveAuthEntryComponents_emailWrapper:after,.mx_InteractiveAuthEntryComponents_emailWrapper:before{position:absolute;width:116px;height:116px;content:"";right:-10px}.mx_InteractiveAuthEntryComponents_emailWrapper:before{background-color:rgba(244,246,250,.91);border-radius:50%;top:-20px}.mx_InteractiveAuthEntryComponents_emailWrapper:after{background-image:url(../../img/element-icons/email-prompt.1d04dfe.svg);background-repeat:no-repeat;background-position:50%;background-size:contain;top:-25px}.mx_InteractiveAuthEntryComponents_msisdnWrapper{text-align:center}.mx_InteractiveAuthEntryComponents_msisdnEntry{font-size:200%;font-weight:700;border:1px solid #c7c7c7;border-radius:3px;width:6em}.mx_InteractiveAuthEntryComponents_msisdnEntry:focus{border:1px solid #0dbd8b}.mx_InteractiveAuthEntryComponents_msisdnSubmit{margin-top:4px;margin-bottom:5px}.mx_InteractiveAuthEntryComponents_termsSubmit{margin-top:20px;margin-bottom:5px;display:block;width:100%}.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled{background-color:#747474;cursor:default}.mx_InteractiveAuthEntryComponents_termsSubmit:disabled{background-color:#92caad;cursor:default}.mx_InteractiveAuthEntryComponents_termsPolicy{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_InteractiveAuthEntryComponents_passwordSection{width:300px}.mx_InteractiveAuthEntryComponents_sso_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:20px}.mx_InteractiveAuthEntryComponents_sso_buttons .mx_AccessibleButton{margin-left:5px}.mx_AuthBody_language{width:100%}.mx_AuthBody_language .mx_Dropdown_input{border:none;font-size:1.4rem;font-weight:600;color:#4e5054;width:auto}.mx_AuthBody_language .mx_Dropdown_arrow{background:#4e5054}progress.mx_PassphraseField_progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;border:0;height:4px;position:absolute;top:-12px;border-radius:"2px"}progress.mx_PassphraseField_progress::-moz-progress-bar{border-radius:"2px"}progress.mx_PassphraseField_progress::-webkit-progress-bar,progress.mx_PassphraseField_progress::-webkit-progress-value{border-radius:"2px"}progress.mx_PassphraseField_progress{color:#ff4b55}progress.mx_PassphraseField_progress::-moz-progress-bar{background-color:#ff4b55}progress.mx_PassphraseField_progress::-webkit-progress-value{background-color:#ff4b55}progress.mx_PassphraseField_progress[value="2"],progress.mx_PassphraseField_progress[value="3"]{color:#ff812d}progress.mx_PassphraseField_progress[value="2"]::-moz-progress-bar,progress.mx_PassphraseField_progress[value="3"]::-moz-progress-bar{background-color:#ff812d}progress.mx_PassphraseField_progress[value="2"]::-webkit-progress-value,progress.mx_PassphraseField_progress[value="3"]::-webkit-progress-value{background-color:#ff812d}progress.mx_PassphraseField_progress[value="4"]{color:#0dbd8b}progress.mx_PassphraseField_progress[value="4"]::-moz-progress-bar{background-color:#0dbd8b}progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value{background-color:#0dbd8b}.mx_Welcome{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Welcome.mx_WelcomePage_registrationDisabled .mx_ButtonCreateAccount{display:none}.mx_Welcome .mx_AuthBody_language{width:160px;margin-bottom:10px}.mx_BaseAvatar{position:relative;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_BaseAvatar_initial{position:absolute;left:0;color:#fff;text-align:center;speak:none;pointer-events:none;font-weight:400}.mx_BaseAvatar_image{-o-object-fit:cover;object-fit:cover;border-radius:125px;vertical-align:top;background-color:#fff}.mx_DecoratedRoomAvatar,.mx_ExtraTile{position:relative}.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar,.mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar{-webkit-mask-image:url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);mask-image:url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon{position:absolute;bottom:-2px;right:-2px;margin:4px;width:8px;height:8px;border-radius:50%}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon:before{content:"";width:8px;height:8px;position:absolute;border-radius:8px}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe:before{-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#737d8c;-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_offline:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_offline:before{background-color:#e3e8f0}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online:before{background-color:#0dbd8b}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_away:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_away:before{background-color:#d9b072}.mx_DecoratedRoomAvatar .mx_NotificationBadge,.mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer,.mx_ExtraTile .mx_NotificationBadge,.mx_ExtraTile .mx_RoomTile_badgeContainer{position:absolute;top:0;right:0;height:18px;width:18px}.mx_MessageComposer_avatar .mx_BaseAvatar{padding:2px;border:1px solid transparent;border-radius:100%}.mx_MessageComposer_avatar .mx_BaseAvatar_initial{left:2px}.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar{border-color:#0dbd8b}@-webkit-keyframes shadow-pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(13,189,139,.2);box-shadow:0 0 0 0 rgba(13,189,139,.2)}to{-webkit-box-shadow:0 0 0 6px rgba(13,189,139,0);box-shadow:0 0 0 6px rgba(13,189,139,0)}}@keyframes shadow-pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(13,189,139,.2);box-shadow:0 0 0 0 rgba(13,189,139,.2)}to{-webkit-box-shadow:0 0 0 6px rgba(13,189,139,0);box-shadow:0 0 0 6px rgba(13,189,139,0)}}.mx_PulsedAvatar img{-webkit-animation:shadow-pulse 1s infinite;animation:shadow-pulse 1s infinite}.mx_WidgetAvatar{border-radius:4px}.mx_BetaCard{margin-bottom:20px;padding:24px;background-color:#f4f6fa;border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_BetaCard>div .mx_BetaCard_title{font-weight:600;font-size:1.8rem;line-height:2.2rem;color:#2e2f32;margin:4px 0 14px}.mx_BetaCard>div .mx_BetaCard_title .mx_BetaCard_betaPill{margin-left:12px}.mx_BetaCard>div .mx_BetaCard_caption{font-size:1.5rem;line-height:2rem;color:#737d8c;margin-bottom:20px}.mx_BetaCard>div .mx_AccessibleButton{display:block;margin:12px 0;padding:7px 40px;width:auto}.mx_BetaCard>div .mx_BetaCard_disclaimer{font-size:1.2rem;line-height:1.5rem;color:#737d8c;margin-top:20px}.mx_BetaCard>img{margin:auto 0 auto 20px;width:300px;-o-object-fit:contain;object-fit:contain;height:100%}.mx_BetaCard_betaPill{background-color:#238cf5;padding:4px 10px;border-radius:8px;text-transform:uppercase;font-size:12px;line-height:15px;color:#fff;display:inline-block;vertical-align:text-bottom}.mx_BetaCard_betaPill.mx_BetaCard_betaPill_clickable{cursor:pointer}.mx_BetaDot{border-radius:50%;margin:10px;height:12px;width:12px;-webkit-transform:scale(1);transform:scale(1);background:#238cf5;-webkit-box-shadow:0 0 0 0 #238cf5;box-shadow:0 0 0 0 #238cf5;-webkit-animation:mx_Beta_bluePulse 2s infinite;animation:mx_Beta_bluePulse 2s infinite;-webkit-animation-iteration-count:20;animation-iteration-count:20}@-webkit-keyframes mx_Beta_bluePulse{0%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,.7);box-shadow:0 0 0 0 rgba(35,140,245,.7)}70%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:0 0 0 10px rgba(35,140,245,0);box-shadow:0 0 0 10px rgba(35,140,245,0)}to{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,0);box-shadow:0 0 0 0 rgba(35,140,245,0)}}@keyframes mx_Beta_bluePulse{0%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,.7);box-shadow:0 0 0 0 rgba(35,140,245,.7)}70%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:0 0 0 10px rgba(35,140,245,0);box-shadow:0 0 0 10px rgba(35,140,245,0)}to{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,0);box-shadow:0 0 0 0 rgba(35,140,245,0)}}.mx_CallContextMenu_item{width:205px;height:40px;padding-left:16px;line-height:40px;vertical-align:center}.mx_IconizedContextMenu{min-width:146px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList>*{padding-left:20px;padding-right:20px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_optionList_notFirst:before,.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:nth-child(n+2):before{border-top:1px solid #2e2f32;opacity:.1;content:"";width:100%;position:absolute;left:0}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:first-child .mx_AccessibleButton:first-child{border-radius:8px 8px 0 0}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_AccessibleButton:last-child{border-radius:0 0 8px 8px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton{padding-top:12px;padding-bottom:12px;text-decoration:none;color:#2e2f32;font-size:1.5rem;line-height:2.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton:hover{background-color:#f5f8fa}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_AccessibleButton_disabled{opacity:.5;cursor:not-allowed}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton .mx_IconizedContextMenu_icon,.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton img{width:16px;min-width:16px;max-width:16px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton span.mx_IconizedContextMenu_label{width:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton .mx_IconizedContextMenu_icon+.mx_IconizedContextMenu_label{padding-left:14px}.mx_IconizedContextMenu .mx_IconizedContextMenu_icon{position:relative;width:16px;height:16px}.mx_IconizedContextMenu .mx_IconizedContextMenu_icon:before{content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton{color:#ff4b55!important}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_IconizedContextMenu_icon:before{background-color:#ff4b55}.mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_AccessibleButton,.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_AccessibleButton{color:#0dbd8b!important}.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_IconizedContextMenu_icon:before{background-color:#0dbd8b}.mx_IconizedContextMenu.mx_IconizedContextMenu_compact .mx_IconizedContextMenu_optionList>*{padding:8px 16px 8px 11px}.mx_IconizedContextMenu .mx_IconizedContextMenu_checked{margin-left:16px;margin-right:-5px}.mx_IconizedContextMenu .mx_IconizedContextMenu_checked:before{-webkit-mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg)}.mx_MessageContextMenu{padding:6px}.mx_MessageContextMenu_field{display:block;padding:3px 6px;cursor:pointer;white-space:nowrap}.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet{font-weight:700}.mx_StatusMessageContextMenu{padding:10px}.mx_StatusMessageContextMenu_form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}input.mx_StatusMessageContextMenu_message{border-radius:4px;border:1px solid #e7e7e7;padding:6.5px 11px;background-color:#fff;font-weight:400;margin:0 0 10px}.mx_StatusMessageContextMenu_message::-webkit-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::-moz-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message:-ms-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::-ms-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::placeholder{color:#61708b}.mx_StatusMessageContextMenu_actionContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_StatusMessageContextMenu_clear,.mx_StatusMessageContextMenu_submit{vertical-align:middle;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;cursor:pointer;display:inline-block;outline:none;-ms-flex-item-align:start;align-self:start;font-size:1.2rem;padding:6px 1em;border:1px solid transparent;margin-right:10px}.mx_StatusMessageContextMenu_submit[disabled]{opacity:.49}.mx_StatusMessageContextMenu_clear{color:#ff4b55;background-color:transparent;border:1px solid #ff4b55}.mx_StatusMessageContextMenu_actionContainer .mx_Spinner{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_TagTileContextMenu_item{padding:8px 20px 8px 8px;cursor:pointer;white-space:nowrap;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.6rem}.mx_TagTileContextMenu_item:before{content:"";height:15px;width:15px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;margin-right:8px}.mx_TagTileContextMenu_viewCommunity:before{-webkit-mask-image:url(../../img/element-icons/view-community.0cad1a5.svg);mask-image:url(../../img/element-icons/view-community.0cad1a5.svg)}.mx_TagTileContextMenu_hideCommunity:before{-webkit-mask-image:url(../../img/element-icons/hide.2b52315.svg);mask-image:url(../../img/element-icons/hide.2b52315.svg)}.mx_TagTileContextMenu_separator{margin-top:0;margin-bottom:0;border-style:none;border-top:1px solid;border-color:#e7e7e7}.mx_AddExistingToSpaceDialog_wrapper .mx_Dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_AddExistingToSpace .mx_SearchBox{margin:0 0 15px;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.mx_AddExistingToSpace .mx_AddExistingToSpace_content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_AddExistingToSpace .mx_AddExistingToSpace_noResults{display:block;margin-top:24px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section:not(:first-child){margin-top:24px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section>h3{margin:0;color:#737d8c;font-size:1.2rem;font-weight:600;line-height:1.5rem}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_DecoratedRoomAvatar{margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_AddExistingToSpace_entry_name{font-size:1.5rem;line-height:30px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_Checkbox{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar{margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar_image{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental{position:relative;border-radius:8px;margin:12px 0;padding:8px 8px 8px 42px;background-color:#f3f8fd;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental:before{content:"";position:absolute;left:10px;top:calc(50% - 8px);height:16px;width:16px;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:20px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar{height:8px;width:100%;border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-moz-progress-bar{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-webkit-progress-bar,.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-webkit-progress-value{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_AddExistingToSpace_progressText{margin-top:8px;font-size:1.5rem;line-height:2.4rem;color:#2e2f32}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span>*{vertical-align:middle}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error{padding-left:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error>img{-ms-flex-item-align:center;align-self:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorHeading{font-weight:600;font-size:1.5rem;line-height:1.8rem;color:#ff4b55}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorCaption{margin-top:4px;font-size:1.2rem;line-height:1.5rem;color:#2e2f32}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton{display:inline-block;-ms-flex-item-align:center;align-self:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton_kind_primary{padding:8px 36px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton{margin-left:12px;padding-left:24px;position:relative}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton:before{content:"";position:absolute;background-color:#2e2f32;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg);width:18px;height:18px;left:0}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton_kind_link{padding:0}.mx_AddExistingToSpaceDialog{width:480px;color:#2e2f32;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;min-height:0;height:80vh}.mx_AddExistingToSpaceDialog,.mx_AddExistingToSpaceDialog .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar_image{border-radius:8px;margin:0;vertical-align:unset}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin:auto 16px auto 5px;vertical-align:middle}.mx_AddExistingToSpaceDialog .mx_Dialog_title>div>h1{font-weight:600;font-size:1.8rem;line-height:2.2rem;margin:0}.mx_AddExistingToSpaceDialog .mx_Dialog_title>div .mx_AddExistingToSpaceDialog_onlySpace{color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input{border:none}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input>.mx_Dropdown_option{padding-left:0;-webkit-box-flex:unset;-ms-flex:unset;flex:unset;height:unset;color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input>.mx_Dropdown_option .mx_BaseAvatar{display:none}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input .mx_Dropdown_menu .mx_AddExistingToSpaceDialog_dropdownOptionActive{color:#0dbd8b;padding-right:32px;position:relative}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input .mx_Dropdown_menu .mx_AddExistingToSpaceDialog_dropdownOptionActive:before{content:"";width:20px;height:20px;top:8px;right:0;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#0dbd8b;-webkit-mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg)}.mx_AddExistingToSpaceDialog .mx_AddExistingToSpace{display:contents}.mx_AddressPickerDialog a:hover,.mx_AddressPickerDialog a:link,.mx_AddressPickerDialog a:visited{color:#0dbd8b;text-decoration:none}.mx_AddressPickerDialog_input,.mx_AddressPickerDialog_input:focus{height:26px;font-size:1.4rem;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;padding-left:12px;padding-right:12px;margin:0!important;border:0!important;outline:0!important;width:1000%;resize:none;overflow:hidden;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box;word-wrap:nowrap}.mx_AddressPickerDialog .mx_Dialog_content{min-height:50px}.mx_AddressPickerDialog_inputContainer{border-radius:3px;border:1px solid #e7e7e7;line-height:3.6rem;padding:1px 4px;max-height:150px;overflow-x:hidden;overflow-y:auto}.mx_AddressPickerDialog_error{margin-top:10px;color:#ff4b55}.mx_AddressPickerDialog_cancel{position:absolute;right:11px;top:13px;cursor:pointer}.mx_AddressPickerDialog_cancel object{pointer-events:none}.mx_AddressPickerDialog_identityServer{margin-top:1em}.mx_AnalyticsModal table{margin:10px 0}.mx_BetaFeedbackDialog .mx_BetaFeedbackDialog_subheading{color:#2e2f32;font-size:1.4rem;line-height:2rem;margin-bottom:24px}.mx_BetaFeedbackDialog .mx_AccessibleButton_kind_link{padding:0;font-size:inherit;line-height:inherit}.mx_BugReportDialog .mx_BugReportDialog_download .mx_AccessibleButton_kind_link{padding-left:0}.mx_ChangelogDialog_content{max-height:300px;overflow:auto}.mx_ChangelogDialog_li{padding:.2em}.mx_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles{margin-top:24px}.mx_ChatCreateOrReuseDialog .mx_Dialog_content{margin-bottom:24px;min-height:100px}.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge{display:none}.mx_ChatCreateOrReuseDialog_profile{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ChatCreateOrReuseDialog_profile_name{padding:14px}.mx_CommunityPrototypeInviteDialog.mx_Dialog_fixedWidth{width:360px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content{margin-bottom:0}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_people{position:relative;margin-bottom:4px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_people .mx_AccessibleButton{display:inline-block;background-color:#ddd;border-radius:4px;padding:3px 5px;font-size:1.2rem;float:right}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_morePeople{margin-top:8px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person{position:relative;margin-top:4px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person>*{vertical-align:middle}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_Checkbox{position:absolute;right:0;top:calc(50% - 8px);width:16px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers{display:inline-block}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers>*{display:block}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers .mx_CommunityPrototypeInviteDialog_personName{font-weight:600;font-size:1.4rem;color:#2e2f32;margin-left:7px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers .mx_CommunityPrototypeInviteDialog_personId{font-size:1.2rem;color:#61708b;margin-left:7px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_primaryButton{display:block;font-size:1.3rem;line-height:20px;height:20px;margin-top:24px}.mx_ConfirmUserActionDialog .mx_Dialog_content{min-height:48px;margin-bottom:24px}.mx_ConfirmUserActionDialog_avatar{float:left;margin-right:20px;margin-top:-2px}.mx_ConfirmUserActionDialog_name{font-size:1.8rem}.mx_ConfirmUserActionDialog_userId{font-size:1.3rem}.mx_ConfirmUserActionDialog_reasonField{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#2e2f32;background-color:#fff;border-radius:3px;border:1px solid #e7e7e7;line-height:3.6rem;padding:1px 16px;margin-bottom:24px;width:90%}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:12px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName{-ms-flex-preferred-size:66.66%;flex-basis:66.66%;padding-right:100px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_Field input{font-size:1.6rem;line-height:2rem}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext{display:block;color:#61708b;margin-bottom:16px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext:last-child{margin-top:16px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext.mx_CreateCommunityPrototypeDialog_subtext_error{color:#ff4b55}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_communityId{position:relative}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_communityId .mx_InfoTooltip{float:right}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_AccessibleButton{display:block;height:32px;font-size:1.6rem;line-height:32px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar{-ms-flex-preferred-size:33.33%;flex-basis:33.33%}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer{margin-top:12px;margin-bottom:20px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_avatar,.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar{width:96px;height:96px;border-radius:96px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar{background-color:#368bd6}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar:before{display:inline-block;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:96px;mask-size:96px;width:96px;height:96px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg);mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg)}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_tip>b,.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_tip>span{display:block;color:#61708b}.mx_CreateGroupDialog_inputRow{margin-top:10px;margin-bottom:10px}.mx_CreateGroupDialog_label{text-align:left;padding-bottom:12px}.mx_CreateGroupDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff}.mx_CreateGroupDialog_input_hasPrefixAndSuffix{border-radius:0}.mx_CreateGroupDialog_input_group{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateGroupDialog_prefix,.mx_CreateGroupDialog_suffix{padding:0 5px;line-height:3.7rem;background-color:#e3e8f0;border:1px solid #e7e7e7;text-align:center}.mx_CreateGroupDialog_prefix{border-right:0;border-radius:3px 0 0 3px}.mx_CreateGroupDialog_suffix{border-left:0;border-radius:0 3px 3px 0}.mx_CreateRoomDialog_details{margin-top:15px}.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary{outline:none;list-style:none;font-weight:600;cursor:pointer;color:#0dbd8b}.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary::-webkit-details-marker{display:none}.mx_CreateRoomDialog_details>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin:5px 0}.mx_CreateRoomDialog_details>div input[type=checkbox]{margin-right:10px}.mx_CreateRoomDialog_label{text-align:left;padding-bottom:12px}.mx_CreateRoomDialog_input_container{padding-right:20px}.mx_CreateRoomDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff;width:100%}.mx_CreateRoomDialog_aliasContainer{display:-webkit-box;display:-ms-flexbox;display:flex;margin:10px 0}.mx_CreateRoomDialog_aliasContainer .mx_RoomAliasField{margin:0}.mx_CreateRoomDialog.mx_Dialog_fixedWidth{width:450px}.mx_CreateRoomDialog .mx_Dialog_content{margin-bottom:40px}.mx_CreateRoomDialog .mx_Field_input label,.mx_CreateRoomDialog p{color:#61708b}.mx_CreateRoomDialog .mx_SettingsFlag{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateRoomDialog .mx_SettingsFlag_label{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;font-weight:600}.mx_CreateRoomDialog .mx_ToggleSwitch{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:30px}.mx_CreateRoomDialog .mx_CreateRoomDialog_topic{margin-bottom:36px}.mx_CreateRoomDialog .mx_Dialog_content>.mx_SettingsFlag{margin-top:24px}.mx_CreateRoomDialog p{margin:0 85px 0 0;font-size:1.2rem}.mx_DeactivateAccountDialog .mx_Dialog_content{margin-bottom:30px}.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section{margin-top:60px}.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field{width:300px}.mx_DevTools_content{margin:10px 0}.mx_DevTools_ServersInRoomList_button{cursor:default!important}.mx_DevTools_RoomStateExplorer_query{margin-bottom:10px}.mx_DevTools_RoomStateExplorer_button,.mx_DevTools_ServersInRoomList_button{margin-bottom:10px;width:100%}.mx_DevTools_label_left{float:left}.mx_DevTools_label_right{float:right}.mx_DevTools_label_bottom{clear:both;border-bottom:1px solid #e5e5e5}.mx_DevTools_inputRow{display:table-row}.mx_DevTools_inputLabelCell{display:table-cell;font-weight:700;padding-right:24px}.mx_DevTools_inputCell{display:table-cell;width:240px}.mx_DevTools_inputCell input{display:inline-block;border:0;border-bottom:1px solid hsla(0,0%,59.2%,.5);padding:0;width:240px;color:rgba(74,74,74,.9);font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.6rem}.mx_DevTools_textarea{font-size:1.2rem;max-width:684px;min-height:250px;padding:10px}.mx_DevTools_eventTypeStateKeyGroup{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_DevTools_content .mx_Field_input:first-of-type{margin-right:42px}.mx_DevTools_tgl{display:none}.mx_DevTools_tgl,.mx_DevTools_tgl *,.mx_DevTools_tgl+.mx_DevTools_tgl-btn,.mx_DevTools_tgl:after,.mx_DevTools_tgl :after,.mx_DevTools_tgl:before,.mx_DevTools_tgl :before{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_DevTools_tgl+.mx_DevTools_tgl-btn::-moz-selection,.mx_DevTools_tgl::-moz-selection,.mx_DevTools_tgl ::-moz-selection,.mx_DevTools_tgl:after::-moz-selection,.mx_DevTools_tgl :after::-moz-selection,.mx_DevTools_tgl:before::-moz-selection,.mx_DevTools_tgl :before::-moz-selection{background:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn::selection,.mx_DevTools_tgl::selection,.mx_DevTools_tgl ::selection,.mx_DevTools_tgl:after::selection,.mx_DevTools_tgl :after::selection,.mx_DevTools_tgl:before::selection,.mx_DevTools_tgl :before::selection{background:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn{outline:0;display:block;width:7em;height:2em;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:after,.mx_DevTools_tgl+.mx_DevTools_tgl-btn:before{position:relative;display:block;content:"";width:50%;height:100%}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:after{left:0}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:before{display:none}.mx_DevTools_tgl:checked+.mx_DevTools_tgl-btn:after{left:50%}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn{padding:2px;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:sans-serif;-webkit-perspective:100px;perspective:100px}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:after,.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:before{display:inline-block;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:4px}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:after{content:attr(data-tg-on);background:#02c66f;-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:before{background:#ff3a19;content:attr(data-tg-off)}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:active:before{-webkit-transform:rotateY(-20deg);transform:rotateY(-20deg)}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:after{-webkit-transform:rotateY(0);transform:rotateY(0);left:0;background:#7fc6a6}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:active:after{-webkit-transform:rotateY(20deg);transform:rotateY(20deg)}.mx_DevTools_VerificationRequest{border:1px solid #ccc;border-radius:3px;padding:1px 5px;margin-bottom:6px;font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji}.mx_DevTools_VerificationRequest dl{display:grid;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto;margin:0}.mx_DevTools_VerificationRequest dd{grid-column-start:2}.mx_DevTools_VerificationRequest dd:empty{color:#666}.mx_DevTools_VerificationRequest dd:empty:after{content:"(empty)"}.mx_DevTools_VerificationRequest dt{font-weight:700;grid-column-start:1}.mx_DevTools_VerificationRequest dt:after{content:":"}.mx_DevTools_SettingsExplorer table{width:100%;table-layout:fixed;border-collapse:collapse}.mx_DevTools_SettingsExplorer table th{border-bottom:1px solid #0dbd8b;text-align:left}.mx_DevTools_SettingsExplorer table td,.mx_DevTools_SettingsExplorer table th{width:360px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_DevTools_SettingsExplorer table td+td,.mx_DevTools_SettingsExplorer table th+th{width:auto}.mx_DevTools_SettingsExplorer table tr:hover{background-color:rgba(13,189,139,.5)}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_mutable{background-color:#0dbd8b}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_immutable{background-color:#ff4b55}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_edit{float:right;margin-right:16px}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_warning{border:2px solid #ff4b55;border-radius:4px;padding:4px;margin-bottom:8px}.mx_EditCommunityPrototypeDialog.mx_Dialog_fixedWidth{width:360px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content{margin-bottom:12px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_AccessibleButton.mx_AccessibleButton_kind_primary{display:block;height:32px;font-size:1.6rem;line-height:32px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_rowAvatar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer{margin-top:20px;margin-bottom:20px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_avatar,.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar{width:96px;height:96px;border-radius:96px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar{background-color:#368bd6}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar:before{display:inline-block;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:96px;mask-size:96px;width:96px;height:96px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg);mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg)}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip{margin-left:20px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip>b,.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip>span{display:block;color:#61708b}.mx_FeedbackDialog hr{margin:24px 0;border-color:#e7e7e7}.mx_FeedbackDialog .mx_Dialog_content{margin-bottom:24px}.mx_FeedbackDialog .mx_Dialog_content>h2{margin-bottom:32px}.mx_FeedbackDialog .mx_FeedbackDialog_section{position:relative;padding-left:52px}.mx_FeedbackDialog .mx_FeedbackDialog_section>p{color:#8d99a5}.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link,.mx_FeedbackDialog .mx_FeedbackDialog_section a{color:#0dbd8b;text-decoration:underline}.mx_FeedbackDialog .mx_FeedbackDialog_section:after,.mx_FeedbackDialog .mx_FeedbackDialog_section:before{content:"";position:absolute;width:40px;height:40px;left:0;top:0}.mx_FeedbackDialog .mx_FeedbackDialog_section:before{background-color:#c1c6cd;border-radius:20px}.mx_FeedbackDialog .mx_FeedbackDialog_section:after{background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:24px;mask-size:24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_FeedbackDialog .mx_FeedbackDialog_reportBug:after{-webkit-mask-image:url(../../img/feather-customised/bug.3dc7afa.svg);mask-image:url(../../img/feather-customised/bug.3dc7afa.svg)}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:20px;-webkit-transition:font-size 1s,border .5s;transition:font-size 1s,border .5s;border-radius:50%;border:2px solid transparent;margin-top:12px;margin-bottom:24px;vertical-align:top;cursor:pointer}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton input[type=radio]+div{display:none}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton .mx_RadioButton_content{background:#c1c6cd;width:40px;height:40px;text-align:center;line-height:40px;border-radius:20px;margin:5px}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton .mx_RadioButton_spacer{display:none}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton+.mx_RadioButton{margin-left:16px}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton_checked{font-size:24px;border-color:#0dbd8b}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp:after{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_GroupAddressPicker_checkboxContainer{margin-top:10px;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_HostSignupDialog{width:90vw;max-width:580px;height:80vh;max-height:600px;background-color:#fff}.mx_HostSignupDialog .mx_HostSignupDialog_info{text-align:center}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_content_top{margin-bottom:24px}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_paragraphs{text-align:left;padding-left:25%;padding-right:25%}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons{margin-bottom:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons button{padding:12px;margin:0 16px}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer img{padding-right:5px}.mx_HostSignupDialog iframe{width:100%;height:100%;border:none;background-color:#fff;min-height:540px}.mx_HostSignupDialog_text_dark{color:#2e2f32}.mx_HostSignupDialog_text_light{color:#737d8c}.mx_HostSignup_maximize_button{-webkit-mask:url(../../img/feather-customised/maximise.dc32127.svg);mask:url(../../img/feather-customised/maximise.dc32127.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;right:10px}.mx_HostSignup_maximize_button,.mx_HostSignup_minimize_button{width:14px;height:14px;background-color:#c1c1c1;cursor:pointer;position:absolute;top:10px}.mx_HostSignup_minimize_button{-webkit-mask:url(../../img/feather-customised/minimise.aec9142.svg);mask:url(../../img/feather-customised/minimise.aec9142.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;right:25px}.mx_HostSignup_persisted{width:90vw;max-width:580px;height:80vh;max-height:600px;top:0;left:0;position:fixed;display:none}.mx_HostSignupDialog_minimized{position:fixed;bottom:80px;right:26px;width:314px;height:217px;overflow:hidden}.mx_HostSignupDialog_minimized.mx_Dialog{padding:12px}.mx_HostSignupDialog_minimized .mx_Dialog_title{text-align:left!important;padding-left:20px;font-size:1.5rem}.mx_HostSignupDialog_minimized iframe{width:100%;height:100%;border:none;background-color:#fff}.mx_IncomingSasDialog_opponentProfile_image{position:relative}.mx_IncomingSasDialog_opponentProfile h2{display:inline-block;margin-left:10px}.mx_InviteDialog_addressBar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_InviteDialog_addressBar .mx_InviteDialog_editor{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;background-color:#f3f8fd;border-radius:4px;min-height:25px;padding-left:8px;overflow-x:hidden;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_InviteDialog_addressBar .mx_InviteDialog_editor .mx_InviteDialog_userTile{margin:6px 6px 0 0;display:inline-block;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mx_InviteDialog_addressBar .mx_InviteDialog_editor>input[type=text]{margin:6px 0!important;height:24px;line-height:2.4rem;font-size:1.4rem;padding-left:12px;border:0!important;outline:0!important;resize:none;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:40%;-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important;color:#2e2f32!important}.mx_InviteDialog_addressBar .mx_InviteDialog_goButton{min-width:48px;margin-left:10px;height:25px;line-height:2.5rem}.mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner .mx_Spinner{width:20px;height:20px;margin-left:5px;display:inline-block;vertical-align:middle}.mx_InviteDialog_section{padding-bottom:10px}.mx_InviteDialog_section h3{font-size:1.2rem;color:#61708b;font-weight:700;text-transform:uppercase}.mx_InviteDialog_section .mx_InviteDialog_subname{margin-bottom:10px;margin-top:-10px;font-size:1.2rem;color:#61708b}.mx_InviteDialog_roomTile{cursor:pointer;padding:5px 10px}.mx_InviteDialog_roomTile:hover{background-color:#f3f8fd;border-radius:4px}.mx_InviteDialog_roomTile *{vertical-align:middle}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack{display:inline-block;position:relative;width:36px;height:36px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack>*{position:absolute;top:0;left:0}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected{width:36px;height:36px;border-radius:36px;background-color:#368bd6;display:inline-block;position:relative}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected:before{content:"";width:24px;height:24px;grid-column:1;grid-row:1;-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;top:6px;left:6px;background-color:#fff}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_nameStack{display:inline-block}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_name{font-weight:600;font-size:1.4rem;color:#2e2f32;margin-left:7px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_userId{font-size:1.2rem;color:#61708b;margin-left:7px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_time{text-align:right;font-size:1.2rem;color:#61708b;float:right;line-height:3.6rem}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_highlight{font-weight:900}.mx_InviteDialog_userTile{margin-right:8px}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill{background-color:#368bd6;border-radius:12px;display:inline-block;height:24px;line-height:2.4rem;padding-left:8px;padding-right:8px;color:#fff}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_avatar{border-radius:20px;position:relative;left:-5px;top:2px}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name,.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill img.mx_InviteDialog_userTile_avatar{vertical-align:top}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_threepidAvatar{background-color:#fff}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove{display:inline-block;margin-left:4px}.mx_InviteDialog{height:590px;padding-left:20px}.mx_InviteDialog_userSections{margin-top:10px;overflow-y:auto;padding-right:45px;height:455px}.mx_InviteDialog_addressBar,.mx_InviteDialog_helpText{margin-right:45px}.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link{padding:0}.mx_KeyboardShortcutsDialog{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-bottom:-50px;max-height:1100px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category{width:33.3333%;margin:0 0 40px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category>div{padding-left:5px}.mx_KeyboardShortcutsDialog h3{margin:0 0 10px}.mx_KeyboardShortcutsDialog h5{margin:15px 0 5px;font-weight:400}.mx_KeyboardShortcutsDialog kbd{padding:5px;border-radius:4px;background-color:#f3f8fd;margin-right:5px;min-width:20px;text-align:center;display:inline-block;border:1px solid #e9edf1;-webkit-box-shadow:0 2px #e9edf1;box-shadow:0 2px #e9edf1;margin-bottom:4px;text-transform:capitalize}.mx_KeyboardShortcutsDialog kbd+kbd{margin-left:5px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_inline div{display:inline}.mx_MessageEditHistoryDialog .mx_Dialog_header>.mx_Dialog_title{text-align:center}.mx_MessageEditHistoryDialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-height:60vh}.mx_MessageEditHistoryDialog_scrollPanel{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.mx_MessageEditHistoryDialog_error{color:#ff4b55;text-align:center}.mx_MessageEditHistoryDialog_edits{list-style-type:none;font-size:1.4rem;padding:0;color:#2e2f32}.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_deletion,.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_insertion{padding:0 2px}.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_deletion{color:#ff4c55;background-color:rgba(255,76,85,.1);text-decoration:line-through}.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_insertion{color:#1aa97b;background-color:rgba(26,169,123,.1);text-decoration:underline}.mx_MessageEditHistoryDialog_edits .mx_EventTile_content,.mx_MessageEditHistoryDialog_edits .mx_EventTile_line{margin-right:0}.mx_MessageEditHistoryDialog_edits .mx_MessageActionBar .mx_AccessibleButton{font-size:1rem;padding:0 8px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning{margin-bottom:24px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning>img{vertical-align:middle;margin-right:8px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons{float:right;margin-top:24px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:8px}.mx_ModalWidgetDialog iframe{width:100%;height:450px;border:0;border-radius:8px}.mx_NewSessionReviewDialog_header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:0}.mx_NewSessionReviewDialog_headerIcon{width:24px;height:24px;margin-right:4px;position:relative}.mx_NewSessionReviewDialog_deviceName{font-weight:600}.mx_NewSessionReviewDialog_deviceID{font-size:1.2rem;color:#8d99a5}.mx_RegistrationEmailPromptDialog{width:417px}.mx_RegistrationEmailPromptDialog .mx_Dialog_content{margin-bottom:24px;color:#8d99a5}.mx_RegistrationEmailPromptDialog .mx_Dialog_primary{width:100%}.mx_RoomSettingsDialog_settingsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_RoomSettingsDialog_securityIcon:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_RoomSettingsDialog_rolesIcon:before{-webkit-mask-image:url(../../img/element-icons/room/settings/roles.bad9a9e.svg);mask-image:url(../../img/element-icons/room/settings/roles.bad9a9e.svg)}.mx_RoomSettingsDialog_notificationsIcon:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RoomSettingsDialog_bridgesIcon:before{-webkit-mask-image:url(../../img/feather-customised/bridge.b2ca042.svg);mask-image:url(../../img/feather-customised/bridge.b2ca042.svg)}.mx_RoomSettingsDialog_warningIcon:before{-webkit-mask-image:url(../../img/element-icons/room/settings/advanced.e079c15.svg);mask-image:url(../../img/element-icons/room/settings/advanced.e079c15.svg)}.mx_RoomSettingsDialog .mx_Dialog_title{-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 auto;padding-right:80px}.mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before{-webkit-mask:url(../../img/feather-customised/image.a8671b8.svg);mask:url(../../img/feather-customised/image.a8671b8.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:36px;mask-size:36px;-webkit-mask-position:center;mask-position:center}.mx_RoomSettingsDialog_BridgeList{padding:0}.mx_RoomSettingsDialog_BridgeList .mx_AccessibleButton{display:inline;margin:0;padding:0}.mx_RoomSettingsDialog_BridgeList li{list-style-type:none;padding:5px;margin-bottom:8px;border:1px solid transparent;border-radius:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon{float:left;padding-right:10px}.mx_RoomSettingsDialog_BridgeList li .column-icon *{border-radius:5px;border:1px solid #e3e8f0}.mx_RoomSettingsDialog_BridgeList li .column-icon .noProtocolIcon{width:48px;height:48px;background:#e3e8f0;border-radius:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon{float:left;margin-right:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon img{border-radius:5px;border-width:1px;border-color:transparent}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon span{left:auto}.mx_RoomSettingsDialog_BridgeList li .column-data{display:inline-block;width:85%}.mx_RoomSettingsDialog_BridgeList li .column-data>h3{margin-top:0;margin-bottom:0;font-size:16pt;color:#2e2f32}.mx_RoomSettingsDialog_BridgeList li .column-data>*{margin-top:4px;margin-bottom:0}.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details{color:#2e2f32;font-weight:600}.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details .channel{margin-left:5px}.mx_RoomSettingsDialog_BridgeList li .column-data .metadata{color:#61708b;margin-bottom:0;overflow-y:visible;text-overflow:ellipsis;white-space:normal;padding:0}.mx_RoomSettingsDialog_BridgeList li .column-data .metadata>li{padding:0;border:0}.mx_RoomUpgradeDialog{padding-right:70px}.mx_RoomUpgradeWarningDialog{max-width:38vw;width:38vw}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag{font-weight:700}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-left:8px;float:right}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content{padding-right:85px;color:#2e2f32}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content hr{border-color:#2e2f32;opacity:.1;border-bottom:none}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul{padding:16px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul li:nth-child(n+2){margin-top:16px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timestamp{display:inline-block;width:115px;color:#61708b;line-height:24px;vertical-align:top}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline{display:inline-block;width:calc(100% - 155px)}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_timeline_header span{margin-left:8px;vertical-align:middle}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn{position:relative;margin-top:8px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_ServerOfflineDialog_content_context_txn_desc{width:calc(100% - 100px)}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_AccessibleButton{float:right;padding:0}.mx_ServerPickerDialog{width:468px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ServerPickerDialog .mx_Dialog_content{margin-bottom:0}.mx_ServerPickerDialog .mx_Dialog_content>p{color:#737d8c;font-size:1.4rem;margin:16px 0}.mx_ServerPickerDialog .mx_Dialog_content>p:first-of-type{margin-bottom:40px}.mx_ServerPickerDialog .mx_Dialog_content>p:last-of-type{margin:0 24px 24px}.mx_ServerPickerDialog .mx_Dialog_content>h4{font-size:1.5rem;font-weight:600;color:#737d8c;margin-left:8px}.mx_ServerPickerDialog .mx_Dialog_content>a{color:#0dbd8b;margin-left:8px}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserverRadio input[type=radio]+div{margin-top:auto;margin-bottom:auto}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver{border-top:none;border-left:none;border-right:none;border-radius:unset}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver>input{padding-left:0}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver>label{margin-left:0}.mx_ServerPickerDialog .mx_AccessibleButton_kind_primary{width:calc(100% - 64px);margin:0 8px;padding:15px 18px}.mx_SetEmailDialog_email_input{border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:rgba(74,74,74,.9);background-color:#fff;font-size:1.5rem;width:100%;max-width:280px;margin-bottom:10px}.mx_SetEmailDialog_email_input:focus{outline:none;-webkit-box-shadow:none;box-shadow:none;border:1px solid #0dbd8b}.mx_RoomSettingsDialog,.mx_UserSettingsDialog{width:90vw;max-width:1000px;height:80vh}.mx_RoomSettingsDialog .mx_TabbedView,.mx_UserSettingsDialog .mx_TabbedView{top:65px}.mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab{-webkit-box-sizing:border-box;box-sizing:border-box;min-width:580px;padding-right:100px;padding-bottom:100px}.mx_RoomSettingsDialog .mx_Dialog_title,.mx_UserSettingsDialog .mx_Dialog_title{margin-bottom:24px}.mx_ShareDialog hr{margin-top:25px;margin-bottom:25px;border-color:#747474}.mx_ShareDialog_content{margin:10px 0}.mx_ShareDialog_matrixto{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-radius:5px;border:1px solid #747474;margin-bottom:10px;margin-top:30px;padding:10px}.mx_ShareDialog_matrixto a{text-decoration:none}.mx_ShareDialog_matrixto_link{-ms-flex-negative:1;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.mx_ShareDialog_matrixto_copy{-ms-flex-negative:0;flex-shrink:0;cursor:pointer;margin-left:20px;display:inherit}.mx_ShareDialog_matrixto_copy>div{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);background-color:#2e2f32;margin-left:5px;width:20px;height:20px;background-repeat:no-repeat}.mx_ShareDialog_split{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_ShareDialog_qrcode_container{float:left;height:256px;width:256px;margin-right:64px}.mx_ShareDialog_qrcode_container+.mx_ShareDialog_social_container{width:299px}.mx_ShareDialog_social_container{display:inline-block}.mx_ShareDialog_social_icon{display:inline-grid;margin-right:10px;margin-bottom:10px}.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2{margin-bottom:2px}.mx_SlashCommandHelpDialog .mx_Dialog_content{margin-top:12px;margin-bottom:34px}.mx_SpaceSettingsDialog{width:480px;color:#2e2f32}.mx_SpaceSettingsDialog .mx_SpaceSettings_errorText{font-weight:600;font-size:1.2rem;line-height:1.5rem;color:#ff4b55;margin-bottom:28px}.mx_SpaceSettingsDialog .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-left:16px}.mx_SpaceSettingsDialog .mx_AccessibleButton_kind_danger{margin-top:28px}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:64px}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton{display:inline-block}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton_kind_link{margin-left:auto}.mx_SpaceSettingsDialog .mx_AccessibleButton_hasKind{padding:8px 22px}.mx_TabbedIntegrationManagerDialog .mx_Dialog{width:60%;height:70%;overflow:hidden;padding:0;max-width:none;max-height:none;position:relative}.mx_TabbedIntegrationManagerDialog_container{position:absolute;top:0;bottom:0;left:0;right:0}.mx_TabbedIntegrationManagerDialog_container .mx_TabbedIntegrationManagerDialog_currentManager{width:100%;height:100%;border-top:1px solid #0dbd8b}.mx_TabbedIntegrationManagerDialog_container .mx_TabbedIntegrationManagerDialog_currentManager iframe{background-color:#fff;border:0;width:100%;height:100%}.mx_TabbedIntegrationManagerDialog_tab{display:inline-block;border:1px solid #0dbd8b;border-bottom:0;border-top-left-radius:3px;border-top-right-radius:3px;padding:10px 8px;margin-right:5px}.mx_TabbedIntegrationManagerDialog_currentTab{background-color:#0dbd8b;color:#fff}.mx_TermsDialog_forIntegrationManager .mx_Dialog{width:60%;height:70%;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_TermsDialog_termsTableHeader{font-weight:700;text-align:left}.mx_TermsDialog_termsTable{font-size:1.2rem;width:100%}.mx_TermsDialog_service,.mx_TermsDialog_summary{padding-right:10px}.mx_TermsDialog_link{display:inline-block;-webkit-mask-image:url(../../img/external-link.a8d3e9b.svg);mask-image:url(../../img/external-link.a8d3e9b.svg);background-color:#0dbd8b;width:10px;height:10px}.mx_UntrustedDeviceDialog .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UntrustedDeviceDialog .mx_Dialog_title .mx_E2EIcon{margin-left:0}.mx_UploadConfirmDialog_fileIcon{margin-right:5px}.mx_UploadConfirmDialog_previewOuter{text-align:center}.mx_UploadConfirmDialog_previewInner{display:inline-block;text-align:left}.mx_UploadConfirmDialog_imagePreview{max-height:300px;max-width:100%;border-radius:4px;border:1px solid #c1c1c1}.mx_UserSettingsDialog_settingsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserSettingsDialog_appearanceIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/appearance.cdebd40.svg);mask-image:url(../../img/element-icons/settings/appearance.cdebd40.svg)}.mx_UserSettingsDialog_voiceIcon:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_UserSettingsDialog_bellIcon:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserSettingsDialog_preferencesIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/preference.82bfabd.svg);mask-image:url(../../img/element-icons/settings/preference.82bfabd.svg)}.mx_UserSettingsDialog_securityIcon:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_UserSettingsDialog_helpIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/help.68b703f.svg);mask-image:url(../../img/element-icons/settings/help.68b703f.svg)}.mx_UserSettingsDialog_labsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);mask-image:url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg)}.mx_UserSettingsDialog_mjolnirIcon:before{-webkit-mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg);mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg)}.mx_UserSettingsDialog_flairIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/flair.4227a88.svg);mask-image:url(../../img/element-icons/settings/flair.4227a88.svg)}.mx_WidgetCapabilitiesPromptDialog .text-muted{font-size:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_content{margin-bottom:16px}.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap{margin-top:20px;font-size:1.5rem;line-height:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap .mx_WidgetCapabilitiesPromptDialog_byline{color:#61708b;margin-left:26px;font-size:1.2rem;line-height:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_buttons{margin-top:40px}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag{line-height:calc(1.4rem + 14px);color:#61708b;font-size:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-right:8px;width:3.2rem;height:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch.mx_ToggleSwitch_on>.mx_ToggleSwitch_ball{left:calc(100% - 1.5rem)}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch .mx_ToggleSwitch_ball{width:1.5rem;height:1.5rem;border-radius:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-right:8px}.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_AccessSecretStorageDialog_reset{position:relative;padding-left:24px;margin-top:7px}.mx_AccessSecretStorageDialog_reset:before{content:"";display:inline-block;position:absolute;height:16px;width:16px;left:0;top:2px;background-image:url(../../img/element-icons/warning-badge.de1033e.svg)}.mx_AccessSecretStorageDialog_reset .mx_AccessSecretStorageDialog_reset_link{color:#ff4b55}.mx_AccessSecretStorageDialog_titleWithIcon:before{content:"";display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_AccessSecretStorageDialog_resetBadge:before{background-image:url(../../img/element-icons/warning-badge.de1033e.svg);background-size:24px;background-color:transparent}.mx_AccessSecretStorageDialog_secureBackupTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_AccessSecretStorageDialog_securePhraseTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_AccessSecretStorageDialog_keyStatus{height:30px}.mx_AccessSecretStorageDialog_passPhraseInput{width:300px;border:1px solid #0dbd8b;border-radius:5px;padding:10px}.mx_AccessSecretStorageDialog_recoveryKeyEntry{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText{margin:16px}.mx_AccessSecretStorageDialog_recoveryKeyFeedback:before{content:"";display:inline-block;vertical-align:bottom;width:20px;height:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;margin-right:5px}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid{color:#0dbd8b}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid:before{-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid{color:#ff4b55}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid:before{-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput{display:none}.mx_CreateCrossSigningDialog{width:560px}.mx_CreateCrossSigningDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateCrossSigningDialog .mx_Dialog_title,.mx_CreateKeyBackupDialog .mx_Dialog_title{margin-bottom:1em}.mx_CreateKeyBackupDialog_primaryContainer{padding:20px}.mx_CreateKeyBackupDialog_primaryContainer:after{content:"";clear:both;display:block}.mx_CreateKeyBackupDialog_passPhraseContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_CreateKeyBackupDialog_passPhraseInput{-webkit-box-flex:0;-ms-flex:none;flex:none;width:250px;border:1px solid #0dbd8b;border-radius:5px;padding:10px;margin-bottom:1em}.mx_CreateKeyBackupDialog_passPhraseMatch{margin-left:20px}.mx_CreateKeyBackupDialog_recoveryKeyHeader{margin-bottom:1em}.mx_CreateKeyBackupDialog_recoveryKeyContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateKeyBackupDialog_recoveryKey{width:262px;padding:20px;color:#888;background-color:#f7f7f7;margin-right:12px}.mx_CreateKeyBackupDialog_recoveryKeyButtons{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CreateKeyBackupDialog_recoveryKeyButtons button{-webkit-box-flex:1;-ms-flex:1;flex:1;white-space:nowrap}.mx_CreateKeyBackupDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateSecretStorageDialog{width:560px}.mx_CreateSecretStorageDialog .mx_SettingsFlag{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateSecretStorageDialog .mx_SettingsFlag_label{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;font-weight:600}.mx_CreateSecretStorageDialog .mx_ToggleSwitch{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:30px}.mx_CreateSecretStorageDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateSecretStorageDialog .mx_Dialog_title{margin-bottom:1em}.mx_CreateSecretStorageDialog_titleWithIcon:before{content:"";display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_CreateSecretStorageDialog_secureBackupTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_CreateSecretStorageDialog_securePhraseTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_CreateSecretStorageDialog_centeredBody,.mx_CreateSecretStorageDialog_centeredTitle{text-align:center}.mx_CreateSecretStorageDialog_primaryContainer{padding-top:20px}.mx_CreateSecretStorageDialog_primaryContainer:after{content:"";clear:both;display:block}.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton{margin-bottom:16px;padding:11px}.mx_CreateSecretStorageDialog_optionTitle{color:#45474a;font-weight:600;font-size:1.8rem;padding-bottom:10px}.mx_CreateSecretStorageDialog_optionIcon{display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_CreateSecretStorageDialog_optionIcon_securePhrase{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_CreateSecretStorageDialog_optionIcon_secureBackup{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_CreateSecretStorageDialog_passPhraseContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_Field.mx_CreateSecretStorageDialog_passPhraseField{margin-top:0}.mx_CreateSecretStorageDialog_passPhraseMatch{width:200px;margin-left:20px}.mx_CreateSecretStorageDialog_recoveryKeyContainer{width:380px;margin-left:auto;margin-right:auto}.mx_CreateSecretStorageDialog_recoveryKey{font-weight:700;text-align:center;padding:20px;color:#888;background-color:#f7f7f7;border-radius:6px;word-spacing:1em;margin-bottom:20px}.mx_CreateSecretStorageDialog_recoveryKeyButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton{width:160px;padding-left:0;padding-right:0;white-space:nowrap}.mx_CreateSecretStorageDialog_continueSpinner{margin-top:33px;text-align:right}.mx_CreateSecretStorageDialog_continueSpinner img{width:20px;height:20px}.mx_KeyBackupFailedDialog .mx_Dialog_title{margin-bottom:32px}.mx_KeyBackupFailedDialog_title{position:relative;padding-left:45px;padding-bottom:10px}.mx_KeyBackupFailedDialog_title:before{-webkit-mask:url(../../img/e2e/lock-warning-filled.993fb6c.svg);mask:url(../../img/e2e/lock-warning-filled.993fb6c.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#2e2f32;content:"";position:absolute;top:-6px;right:0;bottom:0;left:0}.mx_KeyBackupFailedDialog .mx_Dialog_buttons{margin-top:36px}.mx_RestoreKeyBackupDialog_keyStatus{height:30px}.mx_RestoreKeyBackupDialog_primaryContainer{padding:20px}.mx_RestoreKeyBackupDialog_passPhraseInput,.mx_RestoreKeyBackupDialog_recoveryKeyInput{width:300px;border:1px solid #0dbd8b;border-radius:5px;padding:10px}.mx_RestoreKeyBackupDialog_content>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:110px}.mx_NetworkDropdown{height:32px;position:relative;padding-right:32px;margin-left:auto;margin-right:9px;margin-top:12px}.mx_NetworkDropdown,.mx_NetworkDropdown .mx_AccessibleButton{width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_NetworkDropdown_menu{min-width:204px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border:1px solid #c1c1c1;background-color:#fff;max-height:calc(100vh - 20px);overflow-y:auto}.mx_NetworkDropdown_menu_network{font-weight:700}.mx_NetworkDropdown_server{padding:12px 0;border-bottom:1px solid #9fa9ba}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title{padding:0 10px;font-size:1.5rem;font-weight:600;line-height:2rem;margin-bottom:4px;position:relative}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title .mx_AccessibleButton{position:absolute;display:inline;right:10px;height:16px;width:16px;margin-top:2px}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title .mx_AccessibleButton:after{content:"";position:absolute;width:16px;height:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_subtitle{padding:0 10px;font-size:1rem;line-height:1.4rem;margin-top:-4px;margin-bottom:4px;color:#61708b}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network{font-size:1.2rem;line-height:1.6rem;padding:4px 10px;cursor:pointer;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network[aria-checked=true]:after{content:"";position:absolute;width:16px;height:16px;right:10px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_NetworkDropdown_server_add:hover,.mx_NetworkDropdown_server_network:hover{background-color:#f3f8fd}.mx_NetworkDropdown_server_add{padding:16px 10px 16px 32px;position:relative;border-radius:0 0 4px 4px}.mx_NetworkDropdown_server_add:before{content:"";position:absolute;width:16px;height:16px;left:7px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/plus.38ae979.svg);mask-image:url(../../img/feather-customised/plus.38ae979.svg);background-color:#61708b}.mx_NetworkDropdown_handle{position:relative}.mx_NetworkDropdown_handle:after{content:"";position:absolute;width:26px;height:26px;right:-27.5px;top:-3px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);background-color:#2e2f32}.mx_NetworkDropdown_handle .mx_NetworkDropdown_handle_server{color:#61708b;font-size:1.2rem}.mx_NetworkDropdown_dialog .mx_Dialog{width:45vw}.mx_AccessibleButton{cursor:pointer}.mx_AccessibleButton_disabled{cursor:default}.mx_AccessibleButton_hasKind{padding:7px 18px;text-align:center;border-radius:8px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:1.4rem}.mx_AccessibleButton_kind_primary{color:#fff;background-color:#0dbd8b;font-weight:600}.mx_AccessibleButton_kind_primary_outline{color:#0dbd8b;background-color:#fff;border:1px solid #0dbd8b;font-weight:600}.mx_AccessibleButton_kind_secondary{color:#0dbd8b;font-weight:600}.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm{padding:5px 12px;color:#fff;background-color:#0dbd8b}.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_kind_danger{color:#fff;background-color:#ff4b55}.mx_AccessibleButton_kind_danger_outline{color:#ff4b55;background-color:#fff;border:1px solid #ff4b55}.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled{color:#fff;background-color:#f5b6bb}.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled{color:#f5b6bb;border-color:#f5b6bb}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm{padding:5px 12px;color:#fff;background-color:#ff4b55}.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled{color:#fff;background-color:#f5b6bb}.mx_AccessibleButton_kind_link{color:#0dbd8b;background-color:transparent}.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm{padding:5px 12px;color:#0dbd8b;background-color:transparent}.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled{opacity:.4}.mx_AddressSelector{position:absolute;background-color:#fff;width:485px;max-height:116px;overflow-y:auto;border-radius:3px;border:1px solid #0dbd8b;cursor:pointer;z-index:1}.mx_AddressSelector.mx_AddressSelector_empty{display:none}.mx_AddressSelector_addressListElement .mx_AddressTile{background-color:#fff;border:1px solid #fff}.mx_AddressSelector_addressListElement.mx_AddressSelector_selected{background-color:#f2f5f8}.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile{background-color:#f2f5f8;border:1px solid #f2f5f8}.mx_AddressTile{display:inline-block;border-radius:3px;background-color:rgba(74,73,74,.1);border:1px solid #e7e7e7;line-height:2.6rem;color:#2e2f32;font-size:1.4rem;font-weight:400;margin-right:4px}.mx_AddressTile.mx_AddressTile_error{background-color:rgba(255,0,100,.1);color:#ff4b55;border-color:#ff4b55}.mx_AddressTile_network{padding-right:4px}.mx_AddressTile_avatar,.mx_AddressTile_network{display:inline-block;position:relative;padding-left:2px;vertical-align:middle}.mx_AddressTile_avatar{padding-right:7px}.mx_AddressTile_mx{display:inline-block;margin:0;border:0;padding:0}.mx_AddressTile_name{display:inline-block;padding-right:4px;font-weight:600;overflow:hidden;height:26px;vertical-align:middle}.mx_AddressTile_name.mx_AddressTile_justified{width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_id{display:inline-block;padding-right:11px}.mx_AddressTile_id.mx_AddressTile_justified{width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_unknownMx{display:inline-block;font-weight:600;padding-right:11px}.mx_AddressTile_unknownMxl.mx_AddressTile_justified{width:380px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_email{display:inline-block;font-weight:600;padding-right:11px}.mx_AddressTile_email.mx_AddressTile_justified{width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_unknown{display:inline-block;padding-right:11px}.mx_AddressTile_unknown.mx_AddressTile_justified{width:380px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_dismiss{display:inline-block;padding-right:11px;padding-left:1px;cursor:pointer}.mx_AddressTile_dismiss object{pointer-events:none}.mx_DesktopBuildsNotice{text-align:center;padding:0 16px}.mx_DesktopBuildsNotice>*{vertical-align:middle}.mx_DesktopBuildsNotice>img{margin-right:8px}.mx_desktopCapturerSourcePicker{overflow:hidden}.mx_desktopCapturerSourcePicker_tabLabels{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 0 8px}.mx_desktopCapturerSourcePicker_tabLabel,.mx_desktopCapturerSourcePicker_tabLabel_selected{width:100%;text-align:center;border-radius:8px;padding:8px 0;font-size:1.3rem}.mx_desktopCapturerSourcePicker_tabLabel_selected{background-color:#0dbd8b;color:#fff}.mx_desktopCapturerSourcePicker_panel{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;height:500px;overflow:overlay}.mx_desktopCapturerSourcePicker_stream_button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:8px;border-radius:4px}.mx_desktopCapturerSourcePicker_stream_button:focus,.mx_desktopCapturerSourcePicker_stream_button:hover{background:#fff}.mx_desktopCapturerSourcePicker_stream_thumbnail{margin:4px;width:312px}.mx_desktopCapturerSourcePicker_stream_name{margin:0 4px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:312px}.mx_DirectorySearchBox{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:9px;padding-right:9px}.mx_DirectorySearchBox_joinButton{display:table-cell;padding:3px 10px;background-color:#f2f5f8;border-radius:3px;background-image:url(../../img/icon-return.cb24475.svg);background-position:8px 70%;background-repeat:no-repeat;text-indent:18px;font-weight:600;font-size:1.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.mx_DirectorySearchBox_clear{background-color:#ff4b55;-webkit-mask:url(../../img/cancel.4b9715b.svg);mask:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:10px;mask-size:10px;width:15px;height:15px;cursor:pointer}.mx_Dropdown{position:relative;color:#2e2f32}.mx_Dropdown_disabled{opacity:.3}.mx_Dropdown_input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;border-radius:3px;border:1px solid #c7c7c7;font-size:1.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_Dropdown_input.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_Dropdown_input:focus{border-color:#238cf5}.mx_Dropdown_input.mx_AccessibleButton:focus{-webkit-filter:none;filter:none}.mx_Dropdown_arrow{width:10px;height:6px;padding-right:9px;-webkit-mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_Dropdown_option{height:35px;line-height:3.5rem;padding-left:8px;padding-right:8px}.mx_Dropdown_input>.mx_Dropdown_option{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Dropdown_input>.mx_Dropdown_option,.mx_Dropdown_option div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_Dropdown_option .mx_Dropdown_option_emoji,.mx_Dropdown_option img{margin:5px;width:16px;vertical-align:middle}.mx_Dropdown_option_emoji{font-size:1.6rem;line-height:1.6rem}input.mx_Dropdown_option,input.mx_Dropdown_option:focus{font-weight:400;border:0;padding-top:0;padding-bottom:0;width:60%}.mx_Dropdown_menu{position:absolute;left:-1px;right:-1px;top:100%;z-index:2;margin:0;padding:0;border-radius:3px;border:1px solid #238cf5;background-color:#fff;max-height:200px;overflow-y:auto}.mx_Dropdown_menu .mx_Dropdown_option{height:auto;min-height:35px}.mx_Dropdown_menu .mx_Dropdown_option_highlight{background-color:#ddd}.mx_Dropdown_searchPrompt{font-weight:400;margin-left:5px;margin-bottom:5px}.mx_EditableItemList{margin-top:12px;margin-bottom:10px}.mx_EditableItem{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:5px}.mx_EditableItem_delete{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;margin-right:5px;cursor:pointer;vertical-align:middle;width:14px;height:14px;-webkit-mask-image:url(../../img/feather-customised/cancel.23c2689.svg);mask-image:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#ff4b55;-webkit-mask-size:100%;mask-size:100%}.mx_EditableItem_email{vertical-align:middle}.mx_EditableItem_promptText{margin-right:10px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.mx_EditableItem_confirmBtn{margin-right:5px}.mx_EditableItem_item{-webkit-box-flex:1;-ms-flex:auto 1 0px;flex:auto 1 0;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:calc(100% - 14px);overflow-x:hidden;text-overflow:ellipsis}.mx_EditableItemList_label{margin-bottom:5px}.mx_ErrorBoundary{width:100%;height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_ErrorBoundary,.mx_ErrorBoundary_body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ErrorBoundary_body{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:400px}.mx_ErrorBoundary_body .mx_AccessibleButton{margin-top:5px}.mx_EventListSummary{position:relative}.mx_TextualEvent.mx_EventListSummary_summary{font-size:1.4rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_EventListSummary_avatars{display:inline-block;margin-right:8px;padding-top:8px;line-height:1.2rem}.mx_EventListSummary_avatars .mx_BaseAvatar{margin-right:-4px;cursor:pointer}.mx_EventListSummary_toggle{color:#0dbd8b;cursor:pointer;float:right;margin-right:10px;margin-top:8px}.mx_EventListSummary_line{border-bottom:1px solid transparent;margin-left:63px;line-height:3rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary{font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary .mx_EventTile_line{line-height:2rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary_line{line-height:2.2rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary_toggle{margin-top:3px}.mx_MatrixChat_useCompactLayout .mx_TextualEvent.mx_EventListSummary_summary{font-size:1.3rem}.mx_FacePile .mx_FacePile_faces{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;vertical-align:middle}.mx_FacePile .mx_FacePile_faces>.mx_FacePile_face+.mx_FacePile_face{margin-right:-8px}.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_image{border:1px solid #fff}.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_initial{margin:1px}.mx_FacePile .mx_FacePile_faces .mx_FacePile_more{position:relative;border-radius:100%;width:30px;height:30px;background-color:hsla(0,0%,91%,.77)}.mx_FacePile .mx_FacePile_faces .mx_FacePile_more:before{content:"";z-index:1;position:absolute;top:0;left:0;height:inherit;width:inherit;background:#8d99a5;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_FacePile .mx_FacePile_summary{margin-left:12px;font-size:1.4rem;line-height:2.4rem;color:#8d99a5}.mx_Field{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;position:relative;margin:1em 0;border-radius:4px;-webkit-transition:border-color .25s;transition:border-color .25s;border:1px solid #e7e7e7}.mx_Field_prefix{border-right:1px solid #e7e7e7}.mx_Field_postfix{border-left:1px solid #e7e7e7}.mx_Field input,.mx_Field select,.mx_Field textarea{font-weight:400;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;border:none;border-radius:4px;padding:8px 9px;color:#2e2f32;background-color:#fff;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_Field select{-moz-appearance:none;-webkit-appearance:none}.mx_Field_select:before{content:"";position:absolute;top:15px;right:10px;width:10px;height:6px;-webkit-mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#2e2f32;z-index:1;pointer-events:none}.mx_Field:focus-within{border-color:#238cf5}.mx_Field input:focus,.mx_Field select:focus,.mx_Field textarea:focus{outline:0}.mx_Field input::-webkit-input-placeholder,.mx_Field textarea::-webkit-input-placeholder{-webkit-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::-moz-placeholder,.mx_Field textarea::-moz-placeholder{-moz-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input:-ms-input-placeholder,.mx_Field textarea:-ms-input-placeholder{-ms-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::-ms-input-placeholder,.mx_Field textarea::-ms-input-placeholder{-ms-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::placeholder,.mx_Field textarea::placeholder{-webkit-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input:placeholder-shown:focus::-webkit-input-placeholder,.mx_Field textarea:placeholder-shown:focus::-webkit-input-placeholder{-webkit-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::-moz-placeholder,.mx_Field textarea:placeholder-shown:focus::-moz-placeholder{-moz-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus:-ms-input-placeholder,.mx_Field textarea:placeholder-shown:focus:-ms-input-placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::-ms-input-placeholder,.mx_Field textarea:placeholder-shown:focus::-ms-input-placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:-moz-placeholder-shown:focus::placeholder,.mx_Field textarea:-moz-placeholder-shown:focus::placeholder{-moz-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:-ms-input-placeholder:focus::placeholder,.mx_Field textarea:-ms-input-placeholder:focus::placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::placeholder,.mx_Field textarea:placeholder-shown:focus::placeholder{-webkit-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field label{-webkit-transition:font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s;transition:font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s;color:#2e2f32;background-color:transparent;font-size:1.4rem;position:absolute;left:0;top:0;margin:7px 8px;padding:2px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 20px)}.mx_Field input:not(:-moz-placeholder-shown)+label,.mx_Field textarea:not(:-moz-placeholder-shown)+label{-moz-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field input:not(:-ms-input-placeholder)+label,.mx_Field textarea:not(:-ms-input-placeholder)+label{-ms-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field_labelAlwaysTopLeft label,.mx_Field input:focus+label,.mx_Field input:not(:placeholder-shown)+label,.mx_Field select+label,.mx_Field textarea:focus+label,.mx_Field textarea:not(:placeholder-shown)+label{-webkit-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field input:focus+label,.mx_Field select:focus+label,.mx_Field textarea:focus+label{color:#238cf5}.mx_Field input:disabled,.mx_Field input:disabled+label,.mx_Field select:disabled,.mx_Field select:disabled+label,.mx_Field textarea:disabled,.mx_Field textarea:disabled+label{background-color:#fff;color:#888}.mx_Field_valid.mx_Field,.mx_Field_valid.mx_Field:focus-within{border-color:#0dbd8b}.mx_Field_valid.mx_Field:focus-within label,.mx_Field_valid.mx_Field label{color:#0dbd8b}.mx_Field_invalid.mx_Field,.mx_Field_invalid.mx_Field:focus-within{border-color:#ff4b55}.mx_Field_invalid.mx_Field:focus-within label,.mx_Field_invalid.mx_Field label{color:#ff4b55}.mx_Field_tooltip{margin-top:-12px;margin-left:4px;width:200px}.mx_Field_tooltip.mx_Field_valid{-webkit-animation:mx_fadeout 1s 2s forwards;animation:mx_fadeout 1s 2s forwards}.mx_Field .mx_Dropdown_input{border:initial;border-radius:0;border-radius:initial}.mx_Field .mx_CountryDropdown{width:7.8rem}.mx_FormButton{line-height:1.6rem;padding:5px 15px;font-size:1.2rem;height:-webkit-min-content;height:-moz-min-content;height:min-content}.mx_FormButton:not(:last-child){margin-right:8px}.mx_FormButton.mx_AccessibleButton_kind_primary{color:#0dbd8b;background-color:rgba(3,179,129,.16)}.mx_FormButton.mx_AccessibleButton_kind_danger{color:#ff4b55;background-color:rgba(255,75,85,.16)}.mx_FormButton.mx_AccessibleButton_kind_secondary{color:#737d8c;border:1px solid #737d8c;background-color:unset}.mx_ImageView{width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_ImageView,.mx_ImageView_image_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}.mx_ImageView_image_wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mx_ImageView_image{pointer-events:all;-ms-flex-negative:0;flex-shrink:0}.mx_ImageView_panel{width:100%;height:68px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_ImageView_info_wrapper,.mx_ImageView_panel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ImageView_info_wrapper{pointer-events:all;padding-left:32px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:#fff}.mx_ImageView_info{padding-left:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_ImageView_info_sender{font-weight:700}.mx_ImageView_toolbar{padding-right:16px;pointer-events:all;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ImageView_button{margin-left:24px;display:block}.mx_ImageView_button:before{content:"";height:22px;width:22px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;display:block;background-color:#c1c6cd}.mx_ImageView_button_rotateCW:before{-webkit-mask-image:url(../../img/image-view/rotate-cw.60d903e.svg);mask-image:url(../../img/image-view/rotate-cw.60d903e.svg)}.mx_ImageView_button_rotateCCW:before{-webkit-mask-image:url(../../img/image-view/rotate-ccw.b28ae4a.svg);mask-image:url(../../img/image-view/rotate-ccw.b28ae4a.svg)}.mx_ImageView_button_zoomOut:before{-webkit-mask-image:url(../../img/image-view/zoom-out.8506f80.svg);mask-image:url(../../img/image-view/zoom-out.8506f80.svg)}.mx_ImageView_button_zoomIn:before{-webkit-mask-image:url(../../img/image-view/zoom-in.3b3f32e.svg);mask-image:url(../../img/image-view/zoom-in.3b3f32e.svg)}.mx_ImageView_button_download:before{-webkit-mask-image:url(../../img/image-view/download.2eac468.svg);mask-image:url(../../img/image-view/download.2eac468.svg)}.mx_ImageView_button_more:before{-webkit-mask-image:url(../../img/image-view/more.0427c6c.svg);mask-image:url(../../img/image-view/more.0427c6c.svg)}.mx_ImageView_button_close{border-radius:100%;background:#21262c}.mx_ImageView_button_close:before{width:32px;height:32px;-webkit-mask-image:url(../../img/image-view/close.97d1731.svg);mask-image:url(../../img/image-view/close.97d1731.svg);-webkit-mask-size:40%;mask-size:40%}.mx_InfoTooltip_icon,.mx_InfoTooltip_icon:before{width:16px;height:16px;display:inline-block}.mx_InfoTooltip_icon:before{background-color:#61708b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/info.dc07e19.svg);mask-image:url(../../img/element-icons/info.dc07e19.svg)}.mx_InlineSpinner{display:inline}.mx_InlineSpinner_spin img{margin:0 6px;vertical-align:-3px}.mx_InviteReason{position:relative;margin-bottom:1em}.mx_InviteReason .mx_InviteReason_reason{visibility:visible}.mx_InviteReason .mx_InviteReason_view{display:none;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;color:#737d8c}.mx_InviteReason .mx_InviteReason_view:before{content:"";margin-right:8px;background-color:#737d8c;-webkit-mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);display:inline-block;width:18px;height:14px}.mx_InviteReason_hidden .mx_InviteReason_reason{visibility:hidden}.mx_InviteReason_hidden .mx_InviteReason_view{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ManageIntegsButton_error{position:relative;float:right;cursor:not-allowed}.mx_ManageIntegsButton_error img{position:absolute;right:-5px;top:-5px}.mx_ManageIntegsButton_errorPopup{position:absolute;top:110%;left:-275%;width:550%;padding:30%;font-size:10pt;line-height:1.5em;border-radius:5px;background-color:#0dbd8b;color:#fff;text-align:center;z-index:1000}.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup{display:none}.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup{display:inline}.mx_MiniAvatarUploader{position:relative;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_MiniAvatarUploader .mx_Tooltip{display:inline-block;position:absolute;z-index:unset;width:-webkit-max-content;width:-moz-max-content;width:max-content;left:72px;top:0}.mx_MiniAvatarUploader:after,.mx_MiniAvatarUploader:before{content:"";position:absolute;height:26px;width:26px;right:-6px;bottom:-6px}.mx_MiniAvatarUploader:before{background-color:#fff;border-radius:50%;z-index:1}.mx_MiniAvatarUploader:after{background-color:#737d8c;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/camera.a81a395.svg);mask-image:url(../../img/element-icons/camera.a81a395.svg);-webkit-mask-size:16px;mask-size:16px;z-index:2}.mx_MiniAvatarUploader.mx_MiniAvatarUploader_busy:after{background:url(../../img/spinner.0b29ec9.gif) no-repeat 50%;background-size:80%;-webkit-mask:unset;mask:unset}.mx_MiniAvatarUploader_input{display:none}.mx_PowerSelector{width:100%}.mx_PowerSelector .mx_Field input,.mx_PowerSelector .mx_Field select{-webkit-box-sizing:border-box;box-sizing:border-box}progress.mx_ProgressBar{height:6px;width:60px;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:6px}progress.mx_ProgressBar::-moz-progress-bar{border-radius:6px}progress.mx_ProgressBar::-webkit-progress-bar,progress.mx_ProgressBar::-webkit-progress-value{border-radius:6px}progress.mx_ProgressBar{color:#0dbd8b}progress.mx_ProgressBar::-moz-progress-bar{background-color:#0dbd8b}progress.mx_ProgressBar::-webkit-progress-value{background-color:#0dbd8b}progress.mx_ProgressBar{background-color:rgba(141,151,165,.2)}progress.mx_ProgressBar::-webkit-progress-bar{background-color:rgba(141,151,165,.2)}progress.mx_ProgressBar ::-webkit-progress-value{-webkit-transition:width 1s;transition:width 1s}progress.mx_ProgressBar ::-moz-progress-bar{-moz-transition:padding-bottom 1s;transition:padding-bottom 1s;padding-bottom:var(--value);transform-origin:0 0;transform:rotate(-90deg) translateX(-15px);padding-left:15px;height:0}.mx_QRCode img{border-radius:8px}.mx_ReplyThread{margin-top:0}.mx_ReplyThread .mx_DateSeparator{font-size:1em!important;margin-top:0;margin-bottom:0;padding-bottom:1px;bottom:-5px}.mx_ReplyThread_show{cursor:pointer}blockquote.mx_ReplyThread{margin-left:0;padding-left:10px;border-left:4px solid #ddd}.mx_ResizeHandle{cursor:row-resize;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;z-index:100}.mx_ResizeHandle.mx_ResizeHandle_horizontal{margin:0 -5px;padding:0 5px;cursor:col-resize}.mx_ResizeHandle.mx_ResizeHandle_vertical{margin:-5px 0;padding:5px 0;cursor:row-resize}.mx_MatrixChat>.mx_ResizeHandle.mx_ResizeHandle_horizontal{margin:0 -10px 0 0;padding:0 8px 0 0}.mx_ResizeHandle>div{background:transparent}.mx_ResizeHandle.mx_ResizeHandle_horizontal>div{width:1px;height:100%}.mx_ResizeHandle.mx_ResizeHandle_vertical>div{height:1px}.mx_AtRoomPill,.mx_GroupPill,.mx_RoomPill,.mx_UserPill{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;border-radius:1.6rem;line-height:1.5rem;padding-left:0}a.mx_Pill{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 1ch)}.mx_Pill{padding:.1rem .4em .1rem .1rem;vertical-align:text-top;line-height:1.7rem}.mx_EventTile_content .markdown-body a.mx_GroupPill,.mx_GroupPill{color:#fff;background-color:#aaa}.mx_EventTile_content .markdown-body a.mx_Pill{text-decoration:none}.mx_EventTile_content .markdown-body a.mx_UserPill,.mx_UserPill{color:#2e2f32;background-color:rgba(0,0,0,.1)}.mx_UserPill_selected{background-color:#0dbd8b!important}.mx_EventTile_content .markdown-body a.mx_AtRoomPill,.mx_EventTile_content .mx_AtRoomPill,.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,.mx_MessageComposer_input .mx_AtRoomPill{color:#fff;background-color:#ff4b55}.mx_EventTile_content .markdown-body a.mx_GroupPill,.mx_EventTile_content .markdown-body a.mx_RoomPill,.mx_GroupPill,.mx_RoomPill{color:#fff;background-color:#aaa}.mx_EventTile_body .mx_GroupPill,.mx_EventTile_body .mx_RoomPill,.mx_EventTile_body .mx_UserPill{cursor:pointer}.mx_AtRoomPill .mx_BaseAvatar,.mx_GroupPill .mx_BaseAvatar,.mx_RoomPill .mx_BaseAvatar,.mx_UserPill .mx_BaseAvatar{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:10rem;margin-right:.24rem}.mx_Markdown_BOLD{font-weight:700}.mx_Markdown_ITALIC{font-style:italic}.mx_Markdown_CODE{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.mx_Markdown_HR{display:block;background:#e9e9e9}.mx_Markdown_STRIKETHROUGH{text-decoration:line-through}.mx_RoleButton{margin-left:4px;margin-right:4px;cursor:pointer;display:inline-block}.mx_RoleButton object{pointer-events:none}.mx_RoleButton_tooltip{display:inline-block;position:relative;top:-25px;left:6px}.mx_RoomAliasField{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;min-width:0;max-width:100%}.mx_RoomAliasField input{width:150px;padding-left:0;padding-right:0}.mx_RoomAliasField input::-webkit-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::-moz-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input:-ms-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::-ms-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::placeholder{color:#888;font-weight:400}.mx_RoomAliasField .mx_Field_postfix,.mx_RoomAliasField .mx_Field_prefix{color:#888;border-left:none;border-right:none;font-weight:600;padding:9px 10px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomAliasField .mx_Field_postfix{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 180px)}.mx_SSOButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_SSOButtons .mx_SSOButtons_row+.mx_SSOButtons_row{margin-top:16px}.mx_SSOButtons .mx_SSOButton{position:relative;width:100%;padding:7px 32px;text-align:center;border-radius:8px;display:inline-block;font-size:1.4rem;font-weight:600;border:1px solid #e7e7e7;color:#2e2f32}.mx_SSOButtons .mx_SSOButton>img{-o-object-fit:contain;object-fit:contain;position:absolute;left:8px;top:4px}.mx_SSOButtons .mx_SSOButton_default{color:#0dbd8b;background-color:#fff;border-color:#0dbd8b}.mx_SSOButtons .mx_SSOButton_default.mx_SSOButton_primary{color:#fff;background-color:#0dbd8b}.mx_SSOButtons .mx_SSOButton_mini{-webkit-box-sizing:border-box;box-sizing:border-box;width:50px;height:50px;min-width:50px;padding:12px}.mx_SSOButtons .mx_SSOButton_mini>img{left:12px;top:12px}.mx_SSOButtons .mx_SSOButton_mini+.mx_SSOButton_mini{margin-left:16px}.mx_ServerPicker{margin-bottom:14px;border-bottom:1px solid rgba(141,151,165,.2);display:grid;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto auto;font-size:1.4rem;line-height:2rem}.mx_ServerPicker>h3{font-weight:600;margin:0 0 20px;grid-column:1;grid-row:1}.mx_ServerPicker .mx_ServerPicker_help{width:20px;height:20px;background-color:#c1c6cd;border-radius:10px;grid-column:2;grid-row:1;margin-left:auto;text-align:center;color:#fff;font-size:16px;position:relative}.mx_ServerPicker .mx_ServerPicker_help:before{content:"";width:24px;height:24px;position:absolute;top:-2px;left:-2px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/i.80d84f3.svg);mask-image:url(../../img/element-icons/i.80d84f3.svg);background:#fff}.mx_ServerPicker .mx_ServerPicker_server{color:#232f32;grid-column:1;grid-row:2;margin-bottom:16px}.mx_ServerPicker .mx_ServerPicker_change{padding:0;font-size:inherit;grid-column:2;grid-row:2}.mx_ServerPicker .mx_ServerPicker_desc{margin-top:-12px;color:#8d99a5;grid-column:1/2;grid-row:3;margin-bottom:16px}.mx_ServerPicker_helpDialog .mx_Dialog_content{width:456px}.mx_Slider{position:relative;margin:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_Slider_dotContainer{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_Slider_bar,.mx_Slider_dotContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_Slider_bar{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;height:1em;width:100%;padding:0 .5em;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Slider_bar>hr{width:100%;height:.4em;background-color:#c1c9d6;border:0}.mx_Slider_selection{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:calc(100% - 1em);height:1em;position:absolute;pointer-events:none}.mx_Slider_selectionDot{position:absolute;width:1.1em;height:1.1em;background-color:#0dbd8b;border-radius:50%;-webkit-box-shadow:0 0 6px #d3d3d3;box-shadow:0 0 6px #d3d3d3;z-index:10}.mx_Slider_selection>hr{margin:0;border:.2em solid #0dbd8b}.mx_Slider_dot{height:1em;width:1em;border-radius:50%;background-color:#c1c9d6;z-index:0}.mx_Slider_dotActive{background-color:#0dbd8b}.mx_Slider_dotValue{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#c1c9d6}.mx_Slider_labelContainer{width:1em}.mx_Slider_label{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;left:-50%}.mx_Spinner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_MatrixChat_middlePanel .mx_Spinner{height:auto}.mx_Checkbox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_Checkbox input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0}.mx_Checkbox input[type=checkbox]+label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_Checkbox input[type=checkbox]+label>.mx_Checkbox_background{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-negative:0;flex-shrink:0;height:1.6rem;width:1.6rem;size:.5rem;border:.15rem solid rgba(97,112,139,.5);-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:.4rem}.mx_Checkbox input[type=checkbox]+label>.mx_Checkbox_background img{display:none;height:100%;width:100%;-webkit-filter:invert(100%);filter:invert(100%)}.mx_Checkbox input[type=checkbox]:checked+label>.mx_Checkbox_background{background:#0dbd8b;border-color:#0dbd8b}.mx_Checkbox input[type=checkbox]:checked+label>.mx_Checkbox_background img{display:block}.mx_Checkbox input[type=checkbox]+label>:not(.mx_Checkbox_background){margin-left:10px}.mx_Checkbox input[type=checkbox]:disabled+label{opacity:.5;cursor:not-allowed}.mx_Checkbox input[type=checkbox]:checked:disabled+label>.mx_Checkbox_background{background-color:#0dbd8b;border-color:#0dbd8b}.mx_Checkbox input[type=checkbox].focus-visible+label .mx_Checkbox_background{outline-width:2px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.mx_Checkbox input[type=checkbox].focus-visible+label .mx_Checkbox_background{outline-color:-webkit-focus-ring-color;outline-style:auto}}.mx_RadioButton{position:relative;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.mx_RadioButton,.mx_RadioButton>.mx_RadioButton_content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_RadioButton>.mx_RadioButton_content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-left:8px;margin-right:8px}.mx_RadioButton .mx_RadioButton_spacer{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;height:1.6rem;width:1.6rem}.mx_RadioButton>input[type=radio]{margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mx_RadioButton>input[type=radio]+div{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:1.6rem;width:1.6rem;margin-left:2px;border:.15rem solid #61708b;border-radius:1.6rem}.mx_RadioButton>input[type=radio]+div>div{-webkit-box-sizing:border-box;box-sizing:border-box;height:.8rem;width:.8rem;border-radius:.8rem}.mx_RadioButton>input[type=radio].focus-visible+div{outline-width:2px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.mx_RadioButton>input[type=radio].focus-visible+div{outline-color:-webkit-focus-ring-color;outline-style:auto}}.mx_RadioButton>input[type=radio]:checked+div{border-color:#0dbd8b}.mx_RadioButton>input[type=radio]:checked+div>div{background:#0dbd8b}.mx_RadioButton>input[type=radio]:disabled+div,.mx_RadioButton>input[type=radio]:disabled+div+span{opacity:.5;cursor:not-allowed}.mx_RadioButton>input[type=radio]:disabled+div{border-color:#61708b}.mx_RadioButton>input[type=radio]:checked:disabled+div>div{background-color:#61708b}.mx_RadioButton_outlined{border:1px solid #e3e8f0;border-radius:8px}.mx_RadioButton_checked{border-color:#0dbd8b}.mx_SyntaxHighlight{background:none!important;color:#747474!important}.mx_TextWithTooltip_tooltip{display:none}.mx_ToggleSwitch{-webkit-transition:background-color .2s ease-out .1s;transition:background-color .2s ease-out .1s;width:4.4rem;height:2rem;border-radius:1.5rem;padding:2px;background-color:#c1c9d6;opacity:.5}.mx_ToggleSwitch_enabled{cursor:pointer;opacity:1}.mx_ToggleSwitch.mx_ToggleSwitch_on{background-color:#0dbd8b}.mx_ToggleSwitch.mx_ToggleSwitch_on>.mx_ToggleSwitch_ball{left:calc(100% - 2rem)}.mx_ToggleSwitch_ball{position:relative;width:2rem;height:2rem;border-radius:2rem;background-color:#fff;-webkit-transition:left .15s ease-out .1s;transition:left .15s ease-out .1s;left:0}@-webkit-keyframes mx_fadein{0%{opacity:0}to{opacity:1}}@keyframes mx_fadein{0%{opacity:0}to{opacity:1}}@-webkit-keyframes mx_fadeout{0%{opacity:1}to{opacity:0}}@keyframes mx_fadeout{0%{opacity:1}to{opacity:0}}.mx_Tooltip_chevron{position:absolute;left:-7px;top:10px;width:0;height:0;border-top:7px solid transparent;border-right:7px solid #e7e7e7;border-bottom:7px solid transparent}.mx_Tooltip_chevron:after{content:"";width:0;height:0;border-top:6px solid transparent;border-right:6px solid #fff;border-bottom:6px solid transparent;position:absolute;top:-6px;left:1px}.mx_Tooltip{position:fixed;border-radius:8px;-webkit-box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);z-index:6000;padding:10px;pointer-events:none;line-height:1.4rem;font-size:1.2rem;font-weight:500;max-width:200px;word-break:break-word;margin-right:50px;background-color:#27303a;color:#fff;border:0;text-align:center}.mx_Tooltip,.mx_Tooltip .mx_Tooltip_chevron{display:none}.mx_Tooltip.mx_Tooltip_visible{-webkit-animation:mx_fadein .2s forwards;animation:mx_fadein .2s forwards}.mx_Tooltip.mx_Tooltip_invisible{-webkit-animation:mx_fadeout .1s forwards;animation:mx_fadeout .1s forwards}.mx_Field_tooltip{background-color:#fff;color:#2e2f32;border:1px solid #e7e7e7;text-align:unset}.mx_Field_tooltip .mx_Tooltip_chevron{display:unset}.mx_Tooltip_title{font-weight:600}.mx_Tooltip_sub{opacity:.7;margin-top:4px}.mx_TooltipButton{display:inline-block;width:11px;height:11px;margin-left:5px;border:2px solid #dbdbdb;border-radius:20px;color:#dbdbdb;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;opacity:.6;line-height:1.1rem;text-align:center;cursor:pointer}.mx_TooltipButton:hover{opacity:1}.mx_TooltipButton_container{position:relative;top:-18px;left:4px}.mx_TooltipButton_helpText{width:400px;text-align:start;line-height:17px!important}.mx_Validation{position:relative}.mx_Validation_details{padding-left:20px;margin:0}.mx_Validation_description+.mx_Validation_details{margin:1em 0 0}.mx_Validation_detail{position:relative;font-weight:400;list-style:none;margin-bottom:.5em}.mx_Validation_detail:last-child{margin-bottom:0}.mx_Validation_detail:before{content:"";position:absolute;width:14px;height:14px;top:0;left:-18px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_Validation_detail.mx_Validation_valid{color:#0dbd8b}.mx_Validation_detail.mx_Validation_valid:before{-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_Validation_detail.mx_Validation_invalid{color:#ff4b55}.mx_Validation_detail.mx_Validation_invalid:before{-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_EmojiPicker{width:340px;height:450px;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_EmojiPicker_body{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.mx_EmojiPicker_header{padding:4px 8px 0;border-bottom:1px solid #e9edf1}.mx_EmojiPicker_anchor{padding:8px 8px 6px;border:none;border-bottom:2px solid transparent;background-color:transparent;border-radius:4px 4px 0 0;width:36px;height:38px}.mx_EmojiPicker_anchor:not(:disabled){cursor:pointer}.mx_EmojiPicker_anchor:not(:disabled):hover{background-color:#ddd;border-bottom:2px solid #0dbd8b}.mx_EmojiPicker_anchor:before{background-color:#2e2f32;content:"";display:inline-block;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:100%;height:100%}.mx_EmojiPicker_anchor:disabled:before{background-color:#ddd}.mx_EmojiPicker_anchor_activity:before{-webkit-mask-image:url(../../img/emojipicker/activity.921ec9f.svg);mask-image:url(../../img/emojipicker/activity.921ec9f.svg)}.mx_EmojiPicker_anchor_custom:before{-webkit-mask-image:url(../../img/emojipicker/custom.e1cd0fd.svg);mask-image:url(../../img/emojipicker/custom.e1cd0fd.svg)}.mx_EmojiPicker_anchor_flags:before{-webkit-mask-image:url(../../img/emojipicker/flags.1a8855e.svg);mask-image:url(../../img/emojipicker/flags.1a8855e.svg)}.mx_EmojiPicker_anchor_foods:before{-webkit-mask-image:url(../../img/emojipicker/foods.c6b220a.svg);mask-image:url(../../img/emojipicker/foods.c6b220a.svg)}.mx_EmojiPicker_anchor_nature:before{-webkit-mask-image:url(../../img/emojipicker/nature.6540b99.svg);mask-image:url(../../img/emojipicker/nature.6540b99.svg)}.mx_EmojiPicker_anchor_objects:before{-webkit-mask-image:url(../../img/emojipicker/objects.4d34f58.svg);mask-image:url(../../img/emojipicker/objects.4d34f58.svg)}.mx_EmojiPicker_anchor_people:before{-webkit-mask-image:url(../../img/emojipicker/people.e918580.svg);mask-image:url(../../img/emojipicker/people.e918580.svg)}.mx_EmojiPicker_anchor_places:before{-webkit-mask-image:url(../../img/emojipicker/places.7310322.svg);mask-image:url(../../img/emojipicker/places.7310322.svg)}.mx_EmojiPicker_anchor_recent:before{-webkit-mask-image:url(../../img/emojipicker/recent.13b42e2.svg);mask-image:url(../../img/emojipicker/recent.13b42e2.svg)}.mx_EmojiPicker_anchor_symbols:before{-webkit-mask-image:url(../../img/emojipicker/symbols.15a557d.svg);mask-image:url(../../img/emojipicker/symbols.15a557d.svg)}.mx_EmojiPicker_anchor_visible{border-bottom:2px solid #0dbd8b}.mx_EmojiPicker_search{margin:8px;border-radius:4px;border:1px solid #e7e7e7;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_EmojiPicker_search input{-webkit-box-flex:1;-ms-flex:1;flex:1;border:none;padding:8px 12px;border-radius:4px 0}.mx_EmojiPicker_search button{border:none;background-color:inherit;margin:0;padding:8px;-ms-flex-item-align:center;align-self:center;width:32px;height:32px}.mx_EmojiPicker_search_clear{cursor:pointer}.mx_EmojiPicker_search_icon{width:16px;margin:8px}.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear){pointer-events:none}.mx_EmojiPicker_search_icon:after{-webkit-mask:url(../../img/emojipicker/search.973c315.svg) no-repeat;mask:url(../../img/emojipicker/search.973c315.svg) no-repeat;-webkit-mask-size:100%;mask-size:100%;background-color:#2e2f32;content:"";display:inline-block;width:100%;height:100%}.mx_EmojiPicker_search_clear:after{-webkit-mask-image:url(../../img/emojipicker/delete.f7344c5.svg);mask-image:url(../../img/emojipicker/delete.f7344c5.svg)}.mx_EmojiPicker_category{padding:0 12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EmojiPicker_category_label{width:304px}.mx_EmojiPicker_list{width:304px;padding:0;margin:0}.mx_EmojiPicker_item_wrapper{display:inline-block;list-style:none;width:38px;cursor:pointer}.mx_EmojiPicker_item{display:inline-block;font-size:2rem;padding:5px;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;border-radius:4px}.mx_EmojiPicker_item:hover{background-color:#ddd}.mx_EmojiPicker_item_selected{color:rgba(0,0,0,.5);border:1px solid #0dbd8b;padding:4px}.mx_EmojiPicker_category_label,.mx_EmojiPicker_preview_name{font-size:1.6rem;font-weight:600;margin:0}.mx_EmojiPicker_footer{border-top:1px solid #e9edf1;min-height:72px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EmojiPicker_preview_emoji{font-size:3.2rem;padding:8px 16px}.mx_EmojiPicker_preview_text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_EmojiPicker_name{text-transform:capitalize}.mx_EmojiPicker_shortcode{color:#747474;font-size:1.4rem}.mx_EmojiPicker_shortcode:after,.mx_EmojiPicker_shortcode:before{content:":"}.mx_EmojiPicker_quick{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around}.mx_EmojiPicker_quick_header .mx_EmojiPicker_name{margin-right:4px}.mx_GroupPublicity_toggle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:8px}.mx_GroupPublicity_toggle .mx_GroupTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%}.mx_GroupPublicity_toggle .mx_ToggleSwitch{float:right}.mx_GroupRoomTile{position:relative;color:#2e2f32;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_GroupRoomList_wrapper{padding:10px}.mx_GroupUserSettings_groupPublicity_scrollbox{height:200px;border:1px solid transparent;border-radius:3px;overflow:hidden}.mx_CreateEvent:before{background-color:#91a1c0;-webkit-mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg)}.mx_DateSeparator{clear:both;margin:4px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.4rem;color:#9e9e9e}.mx_DateSeparator>hr{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;height:0;border:none;border-bottom:1px solid transparent}.mx_DateSeparator>div{margin:0 25px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_EventTileBubble{background-color:#f2f5f8;padding:10px;border-radius:8px;margin:10px auto;max-width:75%;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:24px minmax(0,1fr) -webkit-min-content;grid-template-columns:24px minmax(0,1fr) min-content}.mx_EventTileBubble:after,.mx_EventTileBubble:before{position:relative;grid-column:1;grid-row:1/3;width:16px;height:16px;content:"";top:0;bottom:0;left:0;right:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;margin-top:4px}.mx_EventTileBubble .mx_EventTileBubble_subtitle,.mx_EventTileBubble .mx_EventTileBubble_title{overflow-wrap:break-word}.mx_EventTileBubble .mx_EventTileBubble_title{font-weight:600;font-size:1.5rem;grid-column:2;grid-row:1}.mx_EventTileBubble .mx_EventTileBubble_subtitle{font-size:1.2rem;grid-column:2;grid-row:2}.mx_MEmoteBody{white-space:pre-wrap}.mx_MEmoteBody_sender{cursor:pointer}.mx_MFileBody_download{color:#0dbd8b}.mx_MFileBody_download .mx_MFileBody_download_icon{width:12px;height:12px;-webkit-mask-size:12px;mask-size:12px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/download.4f331f0.svg);mask-image:url(../../img/download.4f331f0.svg);background-color:#0dbd8b;display:inline-block}.mx_MFileBody_download a{color:#0dbd8b;text-decoration:none;cursor:pointer}.mx_MFileBody_download object{margin-left:-16px;padding-right:4px;margin-top:-4px;vertical-align:middle;pointer-events:none}.mx_MFileBody_download iframe{margin:0;padding:0;border:none;width:100%;height:1.5em}.mx_MFileBody_info{background-color:#e3e8f0;border-radius:12px;width:243px;padding:6px 12px;color:#737d8c}.mx_MFileBody_info .mx_MFileBody_info_icon{background-color:#fff;border-radius:20px;display:inline-block;width:32px;height:32px;position:relative;vertical-align:middle;margin-right:12px}.mx_MFileBody_info .mx_MFileBody_info_icon:before{content:"";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-image:url(../../img/element-icons/room/composer/attach.359c84e.svg);mask-image:url(../../img/element-icons/room/composer/attach.359c84e.svg);background-color:#737d8c;width:13px;height:15px;position:absolute;top:8px;left:9px}.mx_MFileBody_info .mx_MFileBody_info_filename{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block;width:calc(100% - 44px);vertical-align:middle}.mx_MImageBody{display:block;margin-right:34px}.mx_MImageBody_thumbnail{position:absolute;width:100%;height:100%;left:0;top:0;border-radius:4px}.mx_MImageBody_thumbnail_container{overflow:hidden;position:relative}.mx_MImageBody_thumbnail_spinner{position:absolute;left:50%;top:50%}.mx_MImageBody_thumbnail_spinner>*{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mx_MImageBody_gifLabel{position:absolute;display:block;top:0;left:14px;padding:5px;border-radius:5px;background:rgba(0,0,0,.7);border:2px solid rgba(0,0,0,.2);color:#fff;pointer-events:none}.mx_HiddenImagePlaceholder{position:absolute;left:0;top:0;bottom:0;right:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;cursor:pointer;background-color:#f3f8fd}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button{color:#0dbd8b}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span.mx_HiddenImagePlaceholder_eye{margin-right:8px;background-color:#0dbd8b;-webkit-mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);display:inline-block;width:18px;height:14px}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span:not(.mx_HiddenImagePlaceholder_eye){vertical-align:text-bottom}.mx_EventTile:hover .mx_HiddenImagePlaceholder{background-color:#fff}.mx_MJitsiWidgetEvent:before{background-color:#91a1c0;-webkit-mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg);mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg)}.mx_MNoticeBody{white-space:pre-wrap;opacity:.6}.mx_MStickerBody_wrapper{padding:20px 0}.mx_MStickerBody_tooltip{position:absolute;top:50%}.mx_MStickerBody_hidden{max-width:220px;text-decoration:none;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_MTextBody{white-space:pre-wrap}span.mx_MVideoBody video.mx_MVideoBody{max-width:100%;height:auto;border-radius:4px}.mx_MVoiceMessageBody{display:inline-block}.mx_MessageActionBar{position:absolute;visibility:hidden;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:24px;line-height:2.4rem;border-radius:4px;background:#fff;top:-26px;right:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.mx_MessageActionBar:before{content:"";position:absolute;width:calc(66px + 100%);height:calc(20px + 100%);top:-12px;left:-58px;z-index:-1;cursor:auto}.mx_MessageActionBar>*{white-space:nowrap;display:inline-block;position:relative;border:1px solid #e9edf1;margin-left:-1px}.mx_MessageActionBar>:hover{border-color:#ddd;z-index:1}.mx_MessageActionBar>:first-child{border-radius:3px 0 0 3px}.mx_MessageActionBar>:last-child{border-radius:0 3px 3px 0}.mx_MessageActionBar>:only-child{border-radius:3px}.mx_MessageActionBar_maskButton{width:27px}.mx_MessageActionBar_maskButton:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;-webkit-mask-size:18px;mask-size:18px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#2e2f32}.mx_MessageActionBar_reactButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg);mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg)}.mx_MessageActionBar_replyButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/reply.5812741.svg);mask-image:url(../../img/element-icons/room/message-bar/reply.5812741.svg)}.mx_MessageActionBar_editButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/edit.688678e.svg);mask-image:url(../../img/element-icons/room/message-bar/edit.688678e.svg)}.mx_MessageActionBar_optionsButton:after{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_MessageActionBar_resendButton:after{-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg)}.mx_MessageActionBar_cancelButton:after{-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg)}.mx_MessageTimestamp{color:#acacac;font-size:1rem;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.mx_MjolnirBody{opacity:.4}.mx_ReactionsRow{margin:6px 0;color:#2e2f32}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton{position:relative;display:inline-block;visibility:hidden;width:24px;height:24px;vertical-align:middle;margin-left:4px}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:before{content:"";position:absolute;height:100%;width:100%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#8d99a5;-webkit-mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg);mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg)}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active{visibility:visible}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active:before,.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:hover:before{background-color:#2e2f32}.mx_EventTile:hover .mx_ReactionsRow_addReactionButton{visibility:visible}.mx_ReactionsRow_showAll{text-decoration:none;font-size:1.2rem;line-height:2rem;margin-left:4px;vertical-align:middle}.mx_ReactionsRow_showAll:link,.mx_ReactionsRow_showAll:visited{color:#8d99a5}.mx_ReactionsRow_showAll:hover{color:#2e2f32}.mx_ReactionsRowButton{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;line-height:2rem;margin-right:6px;padding:1px 6px;border:1px solid #e9edf1;border-radius:10px;background-color:#f3f8fd;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.mx_ReactionsRowButton:hover{border-color:#ddd}.mx_ReactionsRowButton.mx_ReactionsRowButton_selected{background-color:#e9fff9;border-color:#0dbd8b}.mx_ReactionsRowButton.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_ReactionsRowButton .mx_ReactionsRowButton_content{max-width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:4px}.mx_RedactedBody{white-space:pre-wrap;color:#61708b;vertical-align:middle;padding-left:20px;position:relative}.mx_RedactedBody:before{height:14px;width:14px;background-color:#61708b;-webkit-mask-image:url(../../img/feather-customised/trash.custom.1e6ecd4.svg);mask-image:url(../../img/feather-customised/trash.custom.1e6ecd4.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;content:"";position:absolute;top:1px;left:0}.mx_RoomAvatarEvent{opacity:.5;overflow-y:hidden}.mx_RoomAvatarEvent_avatar{display:inline;position:relative;top:5px}.mx_SenderProfile_name{font-weight:600}.mx_TextualEvent{opacity:.5;overflow-y:hidden}.mx_UnknownBody{white-space:pre-wrap}.mx_EventTile_content.mx_ViewSourceEvent{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:.6;font-size:1.2rem}.mx_EventTile_content.mx_ViewSourceEvent code,.mx_EventTile_content.mx_ViewSourceEvent pre{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_EventTile_content.mx_ViewSourceEvent pre{line-height:1.2;margin:3.5px 0}.mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle{width:12px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:auto 12px;mask-size:auto 12px;visibility:hidden;background-color:#0dbd8b;-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg)}.mx_EventTile_content.mx_ViewSourceEvent.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle{-webkit-mask-position:0 bottom;mask-position:0 bottom;margin-bottom:7px;-webkit-mask-image:url(../../img/feather-customised/minimise.aec9142.svg);mask-image:url(../../img/feather-customised/minimise.aec9142.svg)}.mx_EventTile_content.mx_ViewSourceEvent:hover .mx_ViewSourceEvent_toggle{visibility:visible}.mx_cryptoEvent.mx_cryptoEvent_icon:before{background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:90%;mask-size:90%}.mx_cryptoEvent.mx_cryptoEvent_icon:after,.mx_cryptoEvent.mx_cryptoEvent_icon:before{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_cryptoEvent.mx_cryptoEvent_icon:after{background-color:#91a1c0}.mx_cryptoEvent.mx_cryptoEvent_icon_verified:after{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg);background-color:#0dbd8b}.mx_cryptoEvent.mx_cryptoEvent_icon_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_cryptoEvent .mx_cryptoEvent_buttons,.mx_cryptoEvent .mx_cryptoEvent_state{grid-column:3;grid-row:1/3}.mx_cryptoEvent .mx_cryptoEvent_buttons{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_cryptoEvent .mx_cryptoEvent_state{width:130px;padding:10px 20px;margin:auto 0;text-align:center;color:#8d99a5;overflow-wrap:break-word;font-size:1.2rem}.mx_BaseCard{padding:0 8px;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_BaseCard .mx_BaseCard_header{margin:8px 0}.mx_BaseCard .mx_BaseCard_header>h2{margin:0 44px;font-size:1.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back,.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close{position:absolute;background-color:rgba(141,151,165,.2);height:20px;width:20px;margin:12px;top:0;border-radius:10px}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before,.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before{content:"";position:absolute;height:20px;width:20px;top:0;left:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#91a1c0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back{left:0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-mask-size:22px;mask-size:22px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close{right:0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before{-webkit-mask-image:url(../../img/icons-close.11ff07c.svg);mask-image:url(../../img/icons-close.11ff07c.svg);-webkit-mask-size:8px;mask-size:8px}.mx_BaseCard .mx_AutoHideScrollbar{margin-right:-8px;padding-right:8px;min-height:0;width:100%;height:100%}.mx_BaseCard .mx_BaseCard_Group{margin:20px 0 16px}.mx_BaseCard .mx_BaseCard_Group>*{margin-left:12px;margin-right:12px}.mx_BaseCard .mx_BaseCard_Group>h1{color:#8d99a5;font-size:1.2rem;font-weight:500}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button{padding:10px 38px 10px 12px;margin:0;position:relative;font-size:1.3rem;height:20px;line-height:20px;border-radius:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:hover{background-color:rgba(141,151,165,.1)}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:after{content:"";position:absolute;top:10px;right:6px;height:20px;width:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#c1c6cd;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-mask-size:20px;mask-size:20px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button.mx_AccessibleButton_disabled{padding-right:12px}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button.mx_AccessibleButton_disabled:after{content:unset}.mx_BaseCard .mx_BaseCard_footer{padding-top:4px;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_kind_secondary{color:#737d8c;background-color:rgba(141,151,165,.2);font-weight:600;font-size:1.4rem}.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_FilePanel.mx_BaseCard,.mx_MemberList.mx_BaseCard,.mx_NotificationPanel.mx_BaseCard,.mx_UserInfo.mx_BaseCard{padding:32px 0 0}.mx_FilePanel.mx_BaseCard .mx_AutoHideScrollbar,.mx_MemberList.mx_BaseCard .mx_AutoHideScrollbar,.mx_NotificationPanel.mx_BaseCard .mx_AutoHideScrollbar,.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar{margin-right:unset;padding-right:unset}.mx_EncryptionInfo_spinner .mx_Spinner{margin-top:25px;margin-bottom:15px}.mx_EncryptionInfo_spinner{text-align:center}.mx_RoomSummaryCard .mx_BaseCard_header{text-align:center;margin-top:20px}.mx_RoomSummaryCard .mx_BaseCard_header h2{font-weight:600;font-size:1.8rem;margin:12px 0 4px}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias{font-size:1.3rem;color:#737d8c}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias,.mx_RoomSummaryCard .mx_BaseCard_header h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee{display:inline-block;position:relative;width:54px;height:54px;border-radius:50%;background-color:#737d8c;margin-top:-3px;margin-left:-10px;border:3px solid #f2f5f8}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee:before{content:"";position:absolute;top:13px;left:13px;height:28px;width:28px;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:url(../../img/e2e/disabled.6c5c6be.svg);mask-image:url(../../img/e2e/disabled.6c5c6be.svg);background-color:#fff}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_normal{background-color:#424446}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_normal:before{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_verified{background-color:#0dbd8b}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_verified:before{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg)}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_warning{background-color:#ff4b55}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_warning:before{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button{padding-left:44px}.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button:before{content:"";position:absolute;top:8px;left:10px;height:24px;width:24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#c1c6cd}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button{padding:0;height:auto;color:#8d99a5}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app{padding:10px 48px 10px 12px;text-overflow:ellipsis;overflow:hidden}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app .mx_BaseAvatar_image{vertical-align:top;margin-right:12px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app span{color:#2e2f32}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle{position:absolute;top:0;height:100%;width:24px;padding:12px 4px;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:24px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:hover:after,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:hover:after{content:"";position:absolute;height:24px;width:24px;top:8px;left:0;border-radius:12px;background-color:rgba(141,151,165,.1)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:before,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:before{content:"";position:absolute;height:16px;width:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:16px;mask-size:16px;background-color:#c1c6cd}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle{right:24px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:before{-webkit-mask-image:url(../../img/element-icons/room/pin-upright.65783fb.svg);mask-image:url(../../img/element-icons/room/pin-upright.65783fb.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options{right:48px;display:none}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:before{-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned:after{opacity:.2}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned .mx_RoomSummaryCard_app_pinToggle:before{background-color:#0dbd8b}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:hover .mx_RoomSummaryCard_icon_app{padding-right:72px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:hover .mx_RoomSummaryCard_app_options{display:unset}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:before{content:unset}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:after{top:8px;pointer-events:none}.mx_RoomSummaryCard .mx_AccessibleButton_kind_link{padding:0;margin-top:12px;margin-bottom:12px;font-size:1.3rem;font-weight:600}.mx_RoomSummaryCard_icon_people:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_RoomSummaryCard_icon_files:before{-webkit-mask-image:url(../../img/element-icons/room/files.5709c0c.svg);mask-image:url(../../img/element-icons/room/files.5709c0c.svg)}.mx_RoomSummaryCard_icon_share:before{-webkit-mask-image:url(../../img/element-icons/room/share.54dc3fb.svg);mask-image:url(../../img/element-icons/room/share.54dc3fb.svg)}.mx_RoomSummaryCard_icon_settings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserInfo.mx_BaseCard{padding-top:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;font-size:1.2rem}.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel{cursor:pointer;position:absolute;top:0;border-radius:4px;background-color:#f2f5f8;margin:9px;z-index:1}.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel div{height:16px;width:16px;padding:4px;-webkit-mask-image:url(../../img/minimise.871d2de.svg);mask-image:url(../../img/minimise.871d2de.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:7px center;mask-position:7px center;background-color:#91a1c0}.mx_UserInfo.mx_BaseCard h2{font-size:1.8rem;font-weight:600;margin:18px 0 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container{padding:8px 16px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_separator{border-bottom:1px solid rgba(46,47,50,.1)}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetailsContainer{padding-top:0;padding-bottom:0;margin-bottom:8px}.mx_UserInfo.mx_BaseCard .mx_RoomTile_nameContainer{width:154px}.mx_UserInfo.mx_BaseCard .mx_RoomTile_badge{display:none}.mx_UserInfo.mx_BaseCard .mx_RoomTile_name{width:160px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar{margin:24px 32px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div{max-width:30vh;margin:0 auto;-webkit-transition:.5s;transition:.5s}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div>div{padding-top:100%;position:relative}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div>div *{border-radius:100%;position:absolute;top:0;left:0;width:100%!important;height:100%!important}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar_initial{z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:6rem!important;width:100%!important;-webkit-transition:font-size .5s;transition:font-size .5s}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image{cursor:-webkit-zoom-in;cursor:zoom-in}.mx_UserInfo.mx_BaseCard h3{text-transform:uppercase;color:#8d99a5;font-weight:600;font-size:1.2rem;margin:4px 0}.mx_UserInfo.mx_BaseCard p{margin:5px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile{text-align:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.8rem;line-height:2.5rem;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-all;text-overflow:ellipsis}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 .mx_E2EIcon{margin-top:3px;margin-right:4px;min-width:18px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profileStatus{margin-top:12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField{margin:6px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField,.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription{margin:11px 0 12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_Field{margin:0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_field{cursor:pointer;color:#0dbd8b;line-height:1.6rem;margin:8px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_field.mx_UserInfo_destructive{color:#ff4b55}.mx_UserInfo.mx_BaseCard .mx_UserInfo_statusMessage{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator){padding-top:16px;padding-bottom:0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator)>:not(h3){margin-left:8px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device{display:-webkit-box;display:-ms-flexbox;display:flex;margin:8px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device.mx_UserInfo_device_verified .mx_UserInfo_device_trusted{color:#0dbd8b}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device.mx_UserInfo_device_unverified .mx_UserInfo_device_trusted{color:#ff4b55}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device .mx_UserInfo_device_name{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:5px;word-break:break-word}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_E2EIcon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin:2px 5px 0 0;width:12px;height:12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_expand{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:11px}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind{padding:8px 18px}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary{color:#0dbd8b;background-color:rgba(3,179,129,.16)}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger{color:#ff4b55;background-color:rgba(255,75,85,.16)}.mx_UserInfo.mx_BaseCard .mx_UserInfo_wideButton,.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton{display:block;margin:16px 0 8px}.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton+.mx_AccessibleButton{margin:8px 0}.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar>div{max-width:72px;margin:0 auto}.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar .mx_BaseAvatar_initial{font-size:40px!important}.mx_VerificationPanel_reciprocate_section .mx_E2EIcon,.mx_VerificationPanel_verified_section .mx_E2EIcon{margin:20px auto!important}.mx_UserInfo .mx_EncryptionPanel_cancel{-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#61708b;cursor:pointer;position:absolute;z-index:100;top:14px;right:14px}.mx_UserInfo .mx_VerificationPanel_qrCode{padding:4px 4px 0;background:#fff;border-radius:4px;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%;margin:0 auto!important}.mx_UserInfo .mx_VerificationPanel_qrCode canvas{height:auto!important;width:100%!important;max-width:240px}.mx_UserInfo .mx_VerificationPanel_reciprocate_section .mx_FormButton{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px;display:block;margin:10px 0}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:10px;margin-bottom:10px;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions>.mx_VerificationPanel_QRPhase_betweenText,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions>.mx_VerificationPanel_QRPhase_betweenText{width:50px;vertical-align:middle;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption{background-color:#f3f8fd;border-radius:10px;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;padding:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;max-width:310px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas{width:220px!important;height:220px!important;background-color:#fff;border-radius:4px;vertical-align:middle;text-align:center;padding:10px}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption>p,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption>p{margin-top:0;font-weight:700}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText{font-size:1.4rem;margin:30px 0;text-align:center}.mx_CompleteSecurity_body .mx_VerificationPanel_verified_section .mx_AccessibleButton,.mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton{float:right}.mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton,.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton{margin-left:10px;padding:7px 40px}.mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons,.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_WidgetCard{height:100%;display:contents}.mx_WidgetCard .mx_AppTileFullWidth{max-width:unset;height:100%;border:0}.mx_WidgetCard .mx_BaseCard_header{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_WidgetCard .mx_BaseCard_header>h2{margin-right:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton{position:relative;margin-right:44px;height:20px;width:20px;min-width:20px;padding:0}.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton:before{content:"";position:absolute;width:20px;height:20px;top:0;left:4px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);background-color:#737d8c}.mx_WidgetCard_maxPinnedTooltip{background-color:#ff4b55;color:#fff}.mx_AliasSettings_editable{border:0;border-bottom:1px solid #c7c7c7;padding:0;min-width:240px}.mx_AliasSettings_editable:focus{border-bottom:1px solid #0dbd8b;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_AliasSettings summary{cursor:pointer;color:#0dbd8b;font-weight:600;list-style:none}.mx_AliasSettings summary::-webkit-details-marker{display:none}.mx_AliasSettings .mx_AliasSettings_localAliasHeader{margin-top:35px}.mx_AppsDrawer{margin:5px 5px 5px 18px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.mx_AppsDrawer .mx_AppsContainer_resizerHandleContainer{width:100%;height:10px;margin-top:-3px;display:block;position:relative}.mx_AppsDrawer .mx_AppsContainer_resizerHandle{cursor:ns-resize;width:100%!important;height:100%!important;position:absolute;bottom:0!important}.mx_AppsDrawer .mx_AppsContainer_resizerHandle:after{content:"";position:absolute;border-radius:3px;top:6px;bottom:0;left:calc(50% - 32px);right:calc(50% - 32px)}.mx_AppsDrawer:hover .mx_AppsContainer_resizerHandle:after{opacity:.8;background:#2e2f32}.mx_AppsDrawer:hover .mx_ResizeHandle_horizontal:before{position:absolute;left:3px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px;width:4px;border-radius:4px;content:"";background-color:#2e2f32;opacity:.8}.mx_AppsContainer_resizer{margin-bottom:8px}.mx_AppsContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:100%;width:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.mx_AppsContainer .mx_AppTile:first-of-type{border-left-width:8px;border-radius:10px 0 0 10px}.mx_AppsContainer .mx_AppTile:last-of-type{border-right-width:8px;border-radius:0 10px 10px 0}.mx_AppsContainer .mx_ResizeHandle_horizontal{position:relative}.mx_AppsContainer .mx_ResizeHandle_horizontal>div{width:0}.mx_AppsDrawer_2apps .mx_AppTile{width:50%}.mx_AppsDrawer_2apps .mx_AppTile:nth-child(3){-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:0!important;min-width:240px!important}.mx_AppsDrawer_3apps .mx_AppTile{width:33%}.mx_AppsDrawer_3apps .mx_AppTile:nth-child(3){-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:0!important;min-width:240px!important}.mx_AppTile{width:50%;min-width:240px;border-color:#f2f5f8;border-style:solid;border-width:8px 5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#f2f5f8}.mx_AppTileFullWidth{width:100%!important;border:5px solid #f2f5f8;border-radius:8px;background-color:#f2f5f8}.mx_AppTile_mini,.mx_AppTileFullWidth{margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_AppTile_mini{width:100%;height:200px}.mx_AppTile .mx_AppTile_persistedWrapper,.mx_AppTile_mini .mx_AppTile_persistedWrapper,.mx_AppTileFullWidth .mx_AppTile_persistedWrapper{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_AppTile_persistedWrapper div{width:100%;height:100%}.mx_AppTileMenuBar{margin:0;font-size:1.2rem;background-color:#f2f5f8;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;padding-top:2px;padding-bottom:8px}.mx_AppTileMenuBarTitle{line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx_AppTileMenuBarTitle .mx_WidgetAvatar{margin-right:12px}.mx_AppTileMenuBarTitle>:last-child{margin-left:9px}.mx_AppTileMenuBarWidgets{float:right;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AppTileMenuBar_iconButton{width:12px;height:12px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:auto 12px;mask-size:auto 12px;background-color:#212121;margin:0 3px}.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout{-webkit-mask-image:url(../../img/feather-customised/widget/external-link.7ab6751.svg);mask-image:url(../../img/feather-customised/widget/external-link.7ab6751.svg)}.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu{-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_AppTileBody{height:100%;background-color:#fff}.mx_AppTileBody,.mx_AppTileBody_mini{width:100%;overflow:hidden;border-radius:8px}.mx_AppTileBody_mini{height:200px}.mx_AppTile .mx_AppTileBody,.mx_AppTile_mini .mx_AppTileBody_mini,.mx_AppTileFullWidth .mx_AppTileBody{height:inherit;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_AppTileBody_mini iframe,.mx_AppTileBody iframe{border:none;width:100%;height:100%}.mx_AppTileBody iframe{overflow:hidden;padding:0;margin:0;display:block}.mx_AppPermissionWarning{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.6rem}.mx_AppPermissionWarning_row{margin-bottom:12px}.mx_AppPermissionWarning_smallText{font-size:1.2rem}.mx_AppPermissionWarning_bolder{font-weight:600}.mx_AppPermissionWarning h4{margin:0;padding:0}.mx_AppPermissionWarning_helpIcon{margin-top:1px;margin-right:2px;width:10px;height:10px;display:inline-block}.mx_AppPermissionWarning_helpIcon:before{display:inline-block;background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:12px;mask-size:12px;width:12px;height:12px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/feather-customised/help-circle.03fb6cf.svg);mask-image:url(../../img/feather-customised/help-circle.03fb6cf.svg)}.mx_AppPermissionWarning_tooltip{-webkit-box-shadow:none;box-shadow:none;background-color:#27303a;color:#fff;border:none;border-radius:3px;padding:6px 8px}.mx_AppPermissionWarning_tooltip ul{list-style-position:inside;padding-left:2px;margin-left:0}.mx_AppLoading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:700;position:relative;height:100%;background-color:#fff!important;border-radius:8px}.mx_AppLoading .mx_Spinner{position:absolute;top:0;bottom:0;left:0;right:0}.mx_AppLoading_spinner_fadeIn{-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-name:mx_AppLoading_spinner_fadeIn_animation;animation-name:mx_AppLoading_spinner_fadeIn_animation}@-webkit-keyframes mx_AppLoading_spinner_fadeIn_animation{0%{opacity:0}to{opacity:1}}@keyframes mx_AppLoading_spinner_fadeIn_animation{0%{opacity:0}to{opacity:1}}.mx_AppLoading iframe{display:none}.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper{z-index:1}.mx_Autocomplete{position:absolute;bottom:0;z-index:1001;width:100%;background:#fff;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;max-height:50vh;overflow:auto;-webkit-box-shadow:0 -16px 32px rgba(0,0,0,.04);box-shadow:0 -16px 32px rgba(0,0,0,.04)}.mx_Autocomplete_ProviderSection{border-bottom:1px solid transparent}.mx_Autocomplete_Completion_block{height:34px;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32}.mx_Autocomplete_Completion_block *{margin:0 3px}.mx_Autocomplete_Completion_pill{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:2rem;height:3.4rem;padding:.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32}.mx_Autocomplete_Completion_pill>*{margin-right:.3rem}.mx_Autocomplete_Completion_subtitle{font-style:italic;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_Autocomplete_Completion_description{color:grey}.mx_Autocomplete_Completion_container_pill{margin:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap}.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_description,.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_subtitle,.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_title{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx_Autocomplete_Completion.selected,.mx_Autocomplete_Completion:hover{background:#f2f5f8;outline:none}.mx_Autocomplete_provider_name{margin:12px;color:#2e2f32;font-weight:400;opacity:.4}.m_RoomView_auxPanel_stateViews{padding:5px 5px 5px 19px;border-bottom:1px solid transparent}.m_RoomView_auxPanel_stateViews_span a{text-decoration:none;color:inherit}.m_RoomView_auxPanel_stateViews_span[data-severity=warning]{font-weight:700;color:orange}.m_RoomView_auxPanel_stateViews_span[data-severity=alert]{font-weight:700;color:red}.m_RoomView_auxPanel_stateViews_span[data-severity=normal]{font-weight:400}.m_RoomView_auxPanel_stateViews_span[data-severity=notice]{font-weight:400;color:#a2a2a2}.m_RoomView_auxPanel_stateViews_delim{padding:0 5px;color:#a2a2a2}.mx_BasicMessageComposer{position:relative}.mx_BasicMessageComposer .mx_BasicMessageComposer_inputEmpty>:first-child:before{content:var(--placeholder);opacity:.333;width:0;height:0;overflow:visible;display:inline-block;pointer-events:none;white-space:nowrap}@-webkit-keyframes visualbell{0%{background-color:#faa}to{background-color:#fff}}.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error{-webkit-animation:visualbell .2s;animation:visualbell .2s}.mx_BasicMessageComposer .mx_BasicMessageComposer_input{white-space:pre-wrap;word-wrap:break-word;outline:none;overflow-x:hidden}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill,.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill{position:relative}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill:before,.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill:before{content:var(--avatar-letter);width:1.6rem;height:1.6rem;margin-right:.24rem;background:var(--avatar-background),#fff;color:#fff;background-repeat:no-repeat;background-size:1.6rem;border-radius:1.6rem;text-align:center;font-weight:400;line-height:1.6rem;font-size:1.04rem}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_disabled{pointer-events:none}.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper{position:relative;height:0}.mx_E2EIcon{width:16px;height:16px;margin:0 9px;position:relative;display:block}.mx_E2EIcon_normal:after,.mx_E2EIcon_normal:before,.mx_E2EIcon_verified:after,.mx_E2EIcon_verified:before,.mx_E2EIcon_warning:after,.mx_E2EIcon_warning:before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_E2EIcon:before{background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:90%;mask-size:90%}.mx_E2EIcon:before,.mx_E2EIcon_bordered{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_E2EIcon_bordered{background-color:#f3f8fd}.mx_E2EIcon_bordered:after{-webkit-mask-size:75%;mask-size:75%}.mx_E2EIcon_bordered:before{-webkit-mask-size:65%;mask-size:65%}.mx_E2EIcon_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_E2EIcon_normal:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#91a1c0}.mx_E2EIcon_verified:after{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg);background-color:#0dbd8b}.mx_EditMessageComposer{padding:3px;margin:-7px -10px -5px;overflow:visible!important}.mx_EditMessageComposer .mx_BasicMessageComposer_input{border-radius:4px;border:1px solid transparent;background-color:#fff;max-height:200px;padding:3px 6px}.mx_EditMessageComposer .mx_BasicMessageComposer_input:focus{border-color:rgba(13,189,139,.5)}.mx_EditMessageComposer .mx_EditMessageComposer_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;position:absolute;left:0;background:#f3f8fd;z-index:100;right:0;margin:0 -110px 0 0;padding:5px 147px 5px 5px}.mx_EditMessageComposer .mx_EditMessageComposer_buttons .mx_AccessibleButton{margin-left:5px;padding:5px 40px}.mx_EventTile_last .mx_EditMessageComposer_buttons{position:static;margin-right:-147px}.mx_EntityTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32;cursor:pointer}.mx_EntityTile .mx_E2EIcon{margin:0;position:absolute;bottom:2px;right:7px}.mx_EntityTile:hover{padding-right:30px;position:relative}.mx_EntityTile:hover:before{content:"";position:absolute;top:calc(50% - 8px);right:-8px;-webkit-mask:url(../../img/member_chevron.4163a20.png);mask:url(../../img/member_chevron.4163a20.png);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:16px;height:16px;background-color:#91a1c0}.mx_EntityTile .mx_PresenceLabel{display:none}.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_PresenceLabel{display:block}.mx_EntityTile_invite{display:table-cell;vertical-align:middle;margin-left:10px;width:26px}.mx_EntityTile_avatar,.mx_GroupRoomTile_avatar{padding:4px 12px 4px 3px;position:relative}.mx_EntityTile_name,.mx_GroupRoomTile_name{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden;font-size:1.4rem;text-overflow:ellipsis;white-space:nowrap}.mx_EntityTile_details{overflow:hidden;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_EntityTile_ellipsis .mx_EntityTile_name,.mx_EntityTile_invitePlaceholder .mx_EntityTile_name{font-style:italic;color:#2e2f32}.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,.mx_EntityTile_offline_beenactive .mx_EntityTile_name,.mx_EntityTile_unavailable .mx_EntityTile_avatar,.mx_EntityTile_unavailable .mx_EntityTile_name{opacity:.5}.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,.mx_EntityTile_offline_neveractive .mx_EntityTile_name,.mx_EntityTile_unknown .mx_EntityTile_avatar,.mx_EntityTile_unknown .mx_EntityTile_name{opacity:.25}.mx_EntityTile_subtext{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_EntityTile_power{-webkit-padding-start:6px;padding-inline-start:6px;font-size:1rem;color:#8d99a5;max-width:6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_EntityTile:hover .mx_EntityTile_power{display:none}.mx_EventTile{max-width:100%;clear:both;padding-top:18px;font-size:1.4rem;position:relative}.mx_EventTile.mx_EventTile_info{padding-top:1px}.mx_EventTile_avatar{top:14px;left:8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{top:.6rem;left:64px}.mx_EventTile_continuation{padding-top:0!important}.mx_EventTile_continuation.mx_EventTile_isEditing{padding-top:5px!important;margin-top:-5px}.mx_EventTile_isEditing{background-color:#f3f8fd}.mx_EventTile .mx_SenderProfile{color:#2e2f32;font-size:1.4rem;display:inline-block;overflow:hidden;cursor:pointer;padding-bottom:0;padding-top:0;margin:0;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 64px)}.mx_EventTile .mx_SenderProfile .mx_Flair{opacity:.7;margin-left:5px;display:inline-block;vertical-align:top;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile .mx_SenderProfile .mx_Flair img{vertical-align:-2px;margin-right:2px;border-radius:8px}.mx_EventTile_isEditing .mx_MessageTimestamp{visibility:hidden!important}.mx_EventTile .mx_MessageTimestamp{display:block;visibility:hidden;white-space:nowrap;left:0;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile_continuation .mx_EventTile_line{clear:both}.mx_EventTile_line,.mx_EventTile_reply{position:relative;padding-left:64px;border-radius:4px}.mx_EventListSummary .mx_EventTile_line,.mx_RoomView_timeline_rr_enabled .mx_EventTile_line{margin-right:110px}.mx_EventTile_bubbleContainer{display:grid;grid-template-columns:1fr 100px}.mx_EventTile_bubbleContainer .mx_EventTile_line{margin-right:0;grid-column:1/3;padding:0!important}.mx_EventTile_bubbleContainer .mx_EventTile_msgOption{grid-column:2}.mx_EventTile_reply{margin-right:10px}.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji{font-size:48px!important;line-height:57px!important}.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp{visibility:visible}.mx_EventTile_selected>div>a>.mx_MessageTimestamp{left:3px;width:auto}.mx_EventTile.focus-visible:focus-within>div>a>.mx_MessageTimestamp,.mx_EventTile.mx_EventTile_actionBarFocused>div>a>.mx_MessageTimestamp,.mx_EventTile:hover>div>a>.mx_MessageTimestamp,.mx_EventTile_last>div>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile.focus-visible:focus-within>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile:hover>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile_last>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_ReplyThread .mx_EventTile>a>.mx_MessageTimestamp{visibility:visible}.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar,.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,.mx_EventTile:hover .mx_MessageActionBar,[data-whatinput=keyboard] .mx_EventTile:focus-within .mx_MessageActionBar{visibility:visible}.mx_EventTile_selected>.mx_EventTile_line{border-left:4px solid #0dbd8b;padding-left:60px;background-color:#f6f7f8}.mx_EventTile_highlight,.mx_EventTile_highlight .markdown-body{color:#ff4b55}.mx_EventTile_highlight .markdown-body .mx_EventTile_line,.mx_EventTile_highlight .mx_EventTile_line{background-color:#fff8e3}.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line{padding-left:78px}.mx_EventTile.focus-visible:focus-within .mx_EventTile_line,.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,.mx_EventTile:hover .mx_EventTile_line{background-color:#f6f7f8}.mx_EventTile_searchHighlight{border-radius:5px;padding-left:2px;padding-right:2px;cursor:pointer}.mx_EventTile_searchHighlight,.mx_EventTile_searchHighlight a{background-color:#0dbd8b;color:#fff}.mx_EventTile_receiptSending:before,.mx_EventTile_receiptSent:before{background-color:#8d99a5;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14px;mask-size:14px;width:14px;height:14px;content:"";position:absolute;top:0;left:0;right:0}.mx_EventTile_receiptSent:before{-webkit-mask-image:url(../../img/element-icons/circle-sent.5079cbe.svg);mask-image:url(../../img/element-icons/circle-sent.5079cbe.svg)}.mx_EventTile_receiptSending:before{-webkit-mask-image:url(../../img/element-icons/circle-sending.bcca6aa.svg);mask-image:url(../../img/element-icons/circle-sending.bcca6aa.svg)}.mx_EventTile_contextual{opacity:.4}.mx_EventTile_msgOption{float:right;text-align:right;position:relative;width:90px;height:1px;margin-right:10px}.mx_EventTile_msgOption a{text-decoration:none}.mx_EventTile_readAvatars{position:relative;display:inline-block;width:14px;height:14px;top:-2.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.mx_EventTile_readAvatars .mx_BaseAvatar{position:absolute;display:inline-block;height:1.4rem;width:1.4rem;-webkit-transition:left .1s ease-out,top .3s ease-out;transition:left .1s ease-out,top .3s ease-out;-webkit-transition:left var(--transition-short) ease-out,top var(--transition-standard) ease-out;transition:left var(--transition-short) ease-out,top var(--transition-standard) ease-out}.mx_EventTile_readAvatarRemainder{color:#acacac;font-size:1.1rem;position:absolute}.mx_EventTile_content{display:block;overflow-y:hidden;overflow-x:hidden;margin-right:34px}.mx_EventTile_body{overflow-y:hidden}.mx_EventTile_spoiler{cursor:pointer}.mx_EventTile_spoiler_reason{color:#acacac;font-size:1.1rem}.mx_EventTile_spoiler_content{-webkit-filter:blur(5px) saturate(.1) sepia(1);filter:blur(5px) saturate(.1) sepia(1);-webkit-transition-duration:.5s;transition-duration:.5s}.mx_EventTile_spoiler.visible>.mx_EventTile_spoiler_content{-webkit-filter:none;filter:none}.mx_EventTile_e2eIcon{position:absolute;top:6px;left:44px;width:14px;height:14px;display:block;bottom:0;right:0;opacity:.2;background-repeat:no-repeat;background-size:contain}.mx_EventTile_e2eIcon:after,.mx_EventTile_e2eIcon:before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-size:contain;mask-size:contain}.mx_EventTile_e2eIcon:after,.mx_EventTile_e2eIcon:before{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mx_EventTile_e2eIcon:before{background-color:#fff;-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);-webkit-mask-size:90%;mask-size:90%}.mx_EventTile_e2eIcon_undecryptable:after,.mx_EventTile_e2eIcon_unverified:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_undecryptable,.mx_EventTile_e2eIcon_unverified{opacity:1}.mx_EventTile_e2eIcon_unknown:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_unknown{opacity:1}.mx_EventTile_e2eIcon_unencrypted:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_unencrypted{opacity:1}.mx_EventTile_e2eIcon_unauthenticated:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#91a1c0}.mx_EventTile_e2eIcon_unauthenticated{opacity:1}.mx_EventTile_keyRequestInfo{font-size:1.2rem}.mx_EventTile_keyRequestInfo_text{opacity:.5}.mx_EventTile_keyRequestInfo_text a{color:#2e2f32;text-decoration:underline;cursor:pointer}.mx_EventTile_keyRequestInfo_tooltip_contents p{text-align:auto;margin-left:3px;margin-right:3px}.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child{margin-top:0}.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child{margin-bottom:0}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{padding-left:60px}.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{border-left:4px solid #76cfa5}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line{border-left:4px solid #e8bf37}.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line{padding-left:78px}.mx_EventTile:hover .mx_EventTile_e2eIcon{opacity:1}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line>a>.mx_MessageTimestamp,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line>a>.mx_MessageTimestamp,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line>a>.mx_MessageTimestamp{width:38px}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line>.mx_EventTile_e2eIcon,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line>.mx_EventTile_e2eIcon,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line>.mx_EventTile_e2eIcon{display:block;left:41px}.mx_EventTile_content .mx_EventTile_edited{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1.2rem;color:#9e9e9e;display:inline-block;margin-left:9px;cursor:pointer}.mx_EventTile_body pre{border:1px solid transparent}.mx_EventTile_content .markdown-body{font-family:inherit!important;white-space:normal!important;line-height:inherit!important;color:inherit;font-size:1.4rem}.mx_EventTile_content .markdown-body code,.mx_EventTile_content .markdown-body pre{font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji!important;color:#333}.mx_EventTile_content .markdown-body pre{overflow-x:overlay;overflow-y:visible}.mx_EventTile_content .markdown-body code{background-color:#f8f8f8}.mx_EventTile_lineNumbers{float:left;margin:0 .5em 0 -1.5em;color:grey}.mx_EventTile_lineNumber{text-align:right;display:block;padding-left:1em}.mx_EventTile_collapsedCodeBlock{max-height:30vh}.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre,.mx_EventTile:hover .mx_EventTile_body pre{border:1px solid #e5e5e5}.mx_EventTile_pre_container{position:relative}.mx_EventTile_button{position:absolute;display:inline-block;visibility:hidden;cursor:pointer;top:8px;right:8px;width:19px;height:19px;background-color:#2e2f32}.mx_EventTile_buttonBottom{top:33px}.mx_EventTile_copyButton{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg)}.mx_EventTile_collapseButton{-webkit-mask-image:url(../../img/feather-customised/minimise.aec9142.svg);mask-image:url(../../img/feather-customised/minimise.aec9142.svg)}.mx_EventTile_collapseButton,.mx_EventTile_expandButton{-webkit-mask-size:75%;mask-size:75%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_EventTile_expandButton{-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg)}.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton{visibility:visible}.mx_EventTile_content .markdown-body h1,.mx_EventTile_content .markdown-body h2,.mx_EventTile_content .markdown-body h3,.mx_EventTile_content .markdown-body h4,.mx_EventTile_content .markdown-body h5,.mx_EventTile_content .markdown-body h6{font-family:inherit!important;color:inherit}.mx_EventTile_content .markdown-body h1,.mx_EventTile_content .markdown-body h2{font-size:1.5em;border-bottom:none!important}.mx_EventTile_content .markdown-body a{color:#238cf5}.mx_EventTile_content .markdown-body .hljs{display:inline!important}.mx_EventTile_tileError{color:red;text-align:center;margin-right:0}.mx_EventTile_tileError .mx_EventTile_line{padding-left:0;margin-right:0}.mx_EventTile_tileError .mx_EventTile_line span{padding:4px 8px}.mx_EventTile_tileError a{margin-left:1em}@media only screen and (max-width:480px){.mx_EventTile_line,.mx_EventTile_reply{padding-left:0;margin-right:0}.mx_EventTile_content{margin-top:10px;margin-right:0}}.mx_GroupLayout .mx_EventTile>.mx_SenderProfile{line-height:2rem;margin-left:64px}.mx_GroupLayout .mx_EventTile>.mx_EventTile_line{padding-left:64px}.mx_GroupLayout .mx_EventTile>.mx_EventTile_avatar{position:absolute}.mx_GroupLayout .mx_EventTile .mx_MessageTimestamp{position:absolute;width:46px}.mx_GroupLayout .mx_EventTile .mx_EventTile_line,.mx_GroupLayout .mx_EventTile .mx_EventTile_reply{padding-top:1px;padding-bottom:3px;line-height:2.2rem}.mx_GroupLayout .mx_EventTile_info .mx_EventTile_line{padding-left:82px}.mx_MatrixChat_useCompactLayout .mx_EventTile{padding-top:4px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_reply{padding-top:0;padding-bottom:0}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info{padding-top:0;font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_reply{line-height:2rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{top:4px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_SenderProfile{font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote{padding-top:8px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_avatar{top:2px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_reply{padding-top:0;padding-bottom:1px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation{padding-top:0}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_reply{padding-top:0;padding-bottom:0}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_avatar{top:2px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_e2eIcon{top:3px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_readAvatars{top:-2rem}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body blockquote,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body dl,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body ol,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body p,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body pre,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body table,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body ul{margin-bottom:4px}.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList h2{margin-top:6px}.mx_IRCLayout{--name-width:70px;line-height:1.8rem!important}.mx_IRCLayout .mx_EventTile>a{text-decoration:none}.mx_IRCLayout .mx_EventTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding-top:0}.mx_IRCLayout .mx_EventTile>*{margin-right:5px}.mx_IRCLayout .mx_EventTile>.mx_EventTile_msgOption{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5;-ms-flex-negative:0;flex-shrink:0}.mx_IRCLayout .mx_EventTile>.mx_EventTile_msgOption .mx_EventTile_readAvatars{top:.2rem}.mx_IRCLayout .mx_EventTile>.mx_SenderProfile{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-ms-flex-negative:0;flex-shrink:0;width:var(--name-width);text-overflow:ellipsis;text-align:left;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:visible;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_IRCLayout .mx_EventTile .mx_EventTile_line,.mx_IRCLayout .mx_EventTile .mx_EventTile_reply{padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;min-width:0}.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;position:relative;top:0;left:0;-ms-flex-negative:0;flex-shrink:0;height:1.8rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar>.mx_BaseAvatar,.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar>.mx_BaseAvatar>*{height:1.4rem!important;width:1.4rem!important;font-size:1rem!important;line-height:1.5rem!important}.mx_IRCLayout .mx_EventTile .mx_MessageTimestamp{font-size:1rem;width:45px;text-align:right}.mx_IRCLayout .mx_EventTile>.mx_EventTile_e2eIcon{position:absolute;right:unset;left:unset;top:0;padding:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;height:1.8rem;background-position:50%}.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_EventTile_e2eIcon,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_MTextBody,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_ReplyThread_wrapper_empty,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_TextualEvent{display:inline-block}.mx_IRCLayout .mx_EventTile .mx_EventTile_reply{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.mx_IRCLayout .mx_EventTile .mx_EditMessageComposer_buttons{position:relative}.mx_IRCLayout .mx_EventTile_emote>.mx_EventTile_avatar{margin-left:calc(var(--name-width) + 19px)}.mx_IRCLayout blockquote{margin:0}.mx_IRCLayout .mx_EventListSummary>.mx_EventTile_line{padding-left:calc(var(--name-width) + 74px)}.mx_IRCLayout .mx_EventListSummary .mx_EventListSummary_avatars{padding:0;margin:0 9px 0 0}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{left:calc(var(--name-width) + 24px);top:0}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line{left:calc(var(--name-width) + 24px)}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_TextualEvent{line-height:1.8rem}.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{padding-left:0;border-left:0}.mx_IRCLayout .mx_SenderProfile_hover{background-color:#fff;overflow:hidden}.mx_IRCLayout .mx_SenderProfile_hover>span{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_IRCLayout .mx_SenderProfile_hover>span>.mx_SenderProfile_name{overflow:hidden;text-overflow:ellipsis;min-width:var(--name-width);text-align:end}.mx_IRCLayout .mx_SenderProfile:hover{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_IRCLayout .mx_SenderProfile_hover:hover{overflow:visible;width:max(auto,100%);z-index:10}.mx_IRCLayout .mx_ReplyThread{margin:0}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile{width:unset;max-width:var(--name-width)}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover{background:transparent}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover>span>.mx_SenderProfile_name{min-width:inherit}.mx_IRCLayout .mx_ReplyThread .mx_EventTile_emote>.mx_EventTile_avatar{margin-left:0}.mx_IRCLayout .mx_ReplyThread .mx_MessageTimestamp{width:auto}.mx_IRCLayout .mx_ReplyThread .mx_EventTile_e2eIcon{position:relative;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.mx_IRCLayout .mx_ProfileResizer{position:absolute;height:100%;width:15px;left:calc(80px + var(--name-width));cursor:col-resize;z-index:100}.mx_IRCLayout .mx_Flair>img{height:1.4rem!important;width:1.4rem!important}.mx_JumpToBottomButton{z-index:1000;position:absolute;bottom:12px;right:24px;width:38px;height:50px;text-align:center}.mx_JumpToBottomButton_badge{position:relative;top:-12px;border-radius:16px;font-weight:700;font-size:1.2rem;line-height:1.4rem;text-align:center;display:inline-block;padding:0 4px;color:#fff;background-color:#61708b}.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge{color:#f2f5f8;background-color:#ff4b55}.mx_JumpToBottomButton_scrollDown{position:relative;height:38px;border-radius:19px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1.3px solid #61708b;cursor:pointer}.mx_JumpToBottomButton_scrollDown:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;background:#61708b}.mx_LinkPreviewWidget{margin-top:15px;margin-right:15px;margin-bottom:15px;display:-webkit-box;display:-ms-flexbox;display:flex;border-left:4px solid #ddd;color:#888}.mx_LinkPreviewWidget_image{-webkit-box-flex:0;-ms-flex:0 0 100px;flex:0 0 100px;margin-left:15px;text-align:center;cursor:pointer}.mx_LinkPreviewWidget_caption{margin-left:15px;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.mx_LinkPreviewWidget_title{display:inline;font-weight:700;white-space:normal}.mx_LinkPreviewWidget_siteName{display:inline}.mx_LinkPreviewWidget_description{margin-top:8px;white-space:normal;word-wrap:break-word}.mx_LinkPreviewWidget_cancel{cursor:pointer;width:18px;height:18px}.mx_LinkPreviewWidget_cancel img{-webkit-box-flex:0;-ms-flex:0 0 40px;flex:0 0 40px;visibility:hidden}.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel img,.mx_LinkPreviewWidget_cancel.focus-visible:focus img{visibility:visible}.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget{margin-top:6px;margin-bottom:6px}.mx_MemberInfo{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;margin-top:8px}.mx_MemberInfo,.mx_MemberInfo_name{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_MemberInfo_name{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_MemberInfo_name>.mx_E2EIcon{margin-right:0}.mx_MemberInfo_cancel{height:16px;width:16px;padding:10px 0 10px 10px;cursor:pointer;-webkit-mask-image:url(../../img/minimise.871d2de.svg);mask-image:url(../../img/minimise.871d2de.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:16px center;mask-position:16px center;background-color:#91a1c0}.mx_MemberInfo_name h2{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-x:auto;max-height:50px}.mx_MemberInfo h2{font-size:1.8rem;font-weight:600;margin:16px 0 16px 15px}.mx_MemberInfo_container{margin:0 16px 16px}.mx_MemberInfo .mx_RoomTile_nameContainer{width:154px}.mx_MemberInfo .mx_RoomTile_badge{display:none}.mx_MemberInfo .mx_RoomTile_name{width:160px}.mx_MemberInfo_avatar{background:hsla(0,0%,91%,.77);margin-bottom:16px}.mx_MemberInfo_avatar>img{height:auto;width:100%;max-height:30vh;-o-object-fit:contain;object-fit:contain;display:block}.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image{cursor:-webkit-zoom-in;cursor:zoom-in}.mx_MemberInfo_profile{margin-bottom:16px}.mx_MemberInfo h3{text-transform:uppercase;color:#9fa9ba;font-weight:700;font-size:1.2rem;margin:4px 0}.mx_MemberInfo_profileField{font-size:1.5rem;position:relative}.mx_MemberInfo_buttons{margin-bottom:16px}.mx_MemberInfo_field{cursor:pointer;font-size:1.5rem;color:#2e2f32;margin-left:8px;line-height:2.3rem}.mx_MemberInfo_createRoom{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 8px}.mx_MemberInfo_createRoom_label{width:auto!important;cursor:pointer}.mx_MemberInfo label{font-size:1.3rem}.mx_MemberInfo label .mx_MemberInfo_label_text{display:inline-block;max-width:180px;vertical-align:text-top}.mx_MemberInfo input[type=radio]{vertical-align:-2px;margin-right:5px;margin-left:8px}.mx_MemberInfo_statusMessage{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_MemberInfo .mx_MemberInfo_scrollContainer{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_GroupMemberList,.mx_GroupRoomList,.mx_MemberList{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:0}.mx_GroupMemberList .mx_Spinner,.mx_GroupRoomList .mx_Spinner,.mx_MemberList .mx_Spinner{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.mx_GroupMemberList .mx_SearchBox,.mx_GroupRoomList .mx_SearchBox,.mx_MemberList .mx_SearchBox{margin-bottom:5px}.mx_GroupMemberList h2,.mx_GroupRoomList h2,.mx_MemberList h2{text-transform:uppercase;color:#3d3b39;font-weight:600;font-size:1.3rem;padding-left:3px;padding-right:12px;margin-top:8px;margin-bottom:4px}.mx_GroupMemberList .mx_AutoHideScrollbar,.mx_GroupRoomList .mx_AutoHideScrollbar,.mx_MemberList .mx_AutoHideScrollbar{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_GroupMemberList .mx_RightPanel_scopeHeader,.mx_GroupRoomList .mx_RightPanel_scopeHeader,.mx_MemberList .mx_RightPanel_scopeHeader{margin-top:-8px}.mx_GroupMemberList_query,.mx_GroupRoomList_query{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_MemberList_chevron{position:absolute;right:35px;margin-top:-15px}.mx_MemberList_border{overflow-y:auto;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0px}.mx_MemberList_query{height:16px}.mx_MemberList_query[type=text]{font-size:1.2rem}.mx_MemberList_wrapper{padding:10px}.mx_MemberList_invite{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;position:relative;background-color:#0dbd8b;border-radius:4px;margin:5px 9px 9px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;font-weight:600}.mx_MemberList_invite.mx_AccessibleButton_disabled{background-color:#888;cursor:not-allowed}.mx_MemberList_invite span{padding:8px 0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_MemberList_invite span:before{content:"";display:inline-block;background-color:#fff;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;width:20px;height:20px;margin-right:5px}.mx_MemberList_inviteCommunity span:before{-webkit-mask-image:url(../../img/icon-invite-people.d82f491.svg);mask-image:url(../../img/icon-invite-people.d82f491.svg)}.mx_MemberList_addRoomToCommunity span:before{-webkit-mask-image:url(../../img/icons-room-add.bd36e26.svg);mask-image:url(../../img/icons-room-add.bd36e26.svg)}.mx_MessageComposer_wrapper{vertical-align:middle;margin:auto;border-top:1px solid transparent;position:relative;padding-left:82px;padding-right:6px}.mx_MessageComposer_replaced_wrapper{margin-left:auto;margin-right:auto}.mx_MessageComposer_replaced_valign{height:60px;display:table-cell;vertical-align:middle}.mx_MessageComposer_roomReplaced_icon{float:left;margin-right:20px;margin-top:5px;width:31px;height:31px}.mx_MessageComposer_roomReplaced_header{font-weight:700}.mx_MessageComposer_autocomplete_wrapper{position:relative;height:0}.mx_MessageComposer_row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.mx_MessageComposer .mx_MessageComposer_avatar{position:absolute;left:26px}.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar{display:block}.mx_MessageComposer_composecontrols{width:100%}.mx_MessageComposer_e2eIcon.mx_E2EIcon{position:absolute;left:60px;margin-right:0;margin-left:3px;width:12px;height:12px}.mx_MessageComposer_noperm_error{width:100%;height:60px;font-style:italic;color:#888;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_MessageComposer_input_wrapper{cursor:text}.mx_MessageComposer_input,.mx_MessageComposer_input_wrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_MessageComposer_input{vertical-align:middle;min-height:60px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;font-size:1.4rem;margin-right:6px}.mx_MessageComposer_editor{width:100%;max-height:120px;min-height:19px;overflow-y:auto;overflow-x:hidden;word-break:break-word}.mx_MessageComposer_editor>:first-child{margin-top:0!important}.mx_MessageComposer_editor>:last-child{margin-bottom:0!important}@keyframes visualbell{0%{background-color:#faa}to{background-color:#fff}}.mx_MessageComposer_input_error{-webkit-animation:visualbell .2s;animation:visualbell .2s}.mx_MessageComposer_input blockquote{color:#777;margin:0 0 16px;padding:0 15px;border-left:4px solid #ddd}.mx_MessageComposer_input pre{background-color:rgba(0,0,0,.04);border-radius:3px;padding:10px}.mx_MessageComposer_input textarea{display:block;width:100%;padding:0;margin-top:6px;margin-bottom:6px;border:0;resize:none;outline:none;-webkit-box-shadow:none;box-shadow:none;color:#2e2f32;background-color:#fff;font-size:1.4rem;max-height:120px;overflow:auto;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji}.mx_MessageComposer_input textarea::-moz-placeholder{line-height:100%;color:#0dbd8b;opacity:1}.mx_MessageComposer_input textarea::-webkit-input-placeholder{color:#0dbd8b}.mx_MessageComposer_button_highlight{background:rgba(13,189,139,.25)}.mx_MessageComposer_button_highlight:before{background-color:#0dbd8b!important}.mx_MessageComposer_button{position:relative;margin-right:6px;cursor:pointer;height:26px;width:26px;border-radius:100%}.mx_MessageComposer_button:before{content:"";position:absolute;top:3px;left:3px;height:20px;width:20px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_MessageComposer_button:hover{background:rgba(13,189,139,.1)}.mx_MessageComposer_button:hover:before{background-color:#0dbd8b}.mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled):before{background-color:#ff4b55}.mx_MessageComposer_upload:before{-webkit-mask-image:url(../../img/element-icons/room/composer/attach.359c84e.svg);mask-image:url(../../img/element-icons/room/composer/attach.359c84e.svg)}.mx_MessageComposer_voiceMessage:before{-webkit-mask-image:url(../../img/voip/mic-on-mask.97ec7a0.svg);mask-image:url(../../img/voip/mic-on-mask.97ec7a0.svg)}.mx_MessageComposer_emoji:before{-webkit-mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg);mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg)}.mx_MessageComposer_stickers:before{-webkit-mask-image:url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);mask-image:url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg)}.mx_MessageComposer_sendMessage{cursor:pointer;position:relative;margin-right:6px;width:32px;height:32px;border-radius:100%;background-color:#0dbd8b}.mx_MessageComposer_sendMessage:before{position:absolute;height:16px;width:16px;top:8px;left:9px;-webkit-mask-image:url(../../img/element-icons/send-message.a4e9cf8.svg);mask-image:url(../../img/element-icons/send-message.a4e9cf8.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-color:#fff;content:""}.mx_MessageComposer_formatting{cursor:pointer;margin:0 11px;width:24px;height:18px}.mx_MessageComposer_formatbar_wrapper{width:100%;background-color:#fff;-webkit-box-shadow:inset 0 1px 0 0 rgba(0,0,0,.08);box-shadow:inset 0 1px 0 0 rgba(0,0,0,.08)}.mx_MessageComposer_formatbar{margin:auto;display:-webkit-box;display:-ms-flexbox;display:flex;height:30px;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:62px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1rem;color:#888}.mx_MessageComposer_formatbar *{margin-right:4px}.mx_MessageComposer_format_button,.mx_MessageComposer_formatbar_cancel,.mx_MessageComposer_formatbar_markdown{cursor:pointer}.mx_MessageComposer_formatbar_cancel{margin-right:22px}.mx_MessageComposer_formatbar_markdown{height:17px;width:30px;margin-right:64px}.mx_MessageComposer_input_markdownIndicator{height:10px;width:12px;padding:4px 4px 4px 0}.mx_MessageComposer_formatbar_markdown,.mx_MessageComposer_input_markdownIndicator{cursor:pointer;-webkit-mask-image:url(../../img/markdown.6905ba8.svg);mask-image:url(../../img/markdown.6905ba8.svg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#c1c6cd}.mx_MessageComposer_formatbar_markdown.mx_MessageComposer_markdownDisabled,.mx_MessageComposer_input_markdownIndicator.mx_MessageComposer_markdownDisabled{opacity:.2}.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input{min-height:50px}.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error{height:50px}.mx_MessageComposerFormatBar{display:none;width:130px;height:24px;position:absolute;cursor:pointer;border-radius:4px;background-color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1000}.mx_MessageComposerFormatBar.mx_MessageComposerFormatBar_shown{display:block}.mx_MessageComposerFormatBar>*{white-space:nowrap;display:inline-block;position:relative;border:1px solid #e9edf1;margin-left:-1px}.mx_MessageComposerFormatBar>:hover{border-color:#ddd;z-index:1}.mx_MessageComposerFormatBar>:first-child{border-radius:3px 0 0 3px}.mx_MessageComposerFormatBar>:last-child{border-radius:0 3px 3px 0}.mx_MessageComposerFormatBar>:only-child{border-radius:3px}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button{width:27px;height:24px;-webkit-box-sizing:border-box;box-sizing:border-box;background:none;vertical-align:middle}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#2e2f32}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconBold:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);mask-image:url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconItalic:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/italic.bf18054.svg);mask-image:url(../../img/element-icons/room/format-bar/italic.bf18054.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconStrikethrough:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);mask-image:url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconQuote:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);mask-image:url(../../img/element-icons/room/format-bar/quote.560cd8f.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconCode:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/code.27444ba.svg);mask-image:url(../../img/element-icons/room/format-bar/code.27444ba.svg)}.mx_MessageComposerFormatBar_buttonTooltip{white-space:nowrap;font-size:1.3rem;font-weight:600;min-width:54px;text-align:center}.mx_MessageComposerFormatBar_buttonTooltip .mx_MessageComposerFormatBar_tooltipShortcut{font-size:.9rem;opacity:.7}.mx_NewRoomIntro{margin:40px 0 48px 64px}.mx_NewRoomIntro .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):after,.mx_NewRoomIntro .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):before{content:unset}.mx_NewRoomIntro .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_NewRoomIntro .mx_NewRoomIntro_buttons{margin-top:28px}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton{line-height:2.4rem;display:inline-block}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:12px}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary_outline):before{content:"";display:inline-block;background-color:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;width:20px;height:20px;margin-right:5px;vertical-align:text-bottom}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_NewRoomIntro_inviteButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_NewRoomIntro>h2{margin-top:24px;font-size:2.4rem;font-weight:600}.mx_NewRoomIntro>p{margin:0;font-size:1.5rem;color:#737d8c}.mx_NotificationBadge:not(.mx_NotificationBadge_visible){display:none}.mx_NotificationBadge.mx_NotificationBadge_visible{background-color:#61708b;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_highlighted{background-color:#ff4b55}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot{background-color:#2e2f32;width:6px;height:6px;border-radius:6px}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char{width:1.6rem;height:1.6rem;border-radius:1.6rem}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_3char{width:2.6rem;height:1.6rem;border-radius:1.6rem}.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count{font-size:1rem;line-height:1.4rem;color:#fff}.mx_PinnedEventTile{min-height:40px;margin-bottom:5px;width:100%;border-radius:5px}.mx_PinnedEventTile:hover{background-color:#f6f7f8}.mx_PinnedEventTile .mx_PinnedEventTile_sender,.mx_PinnedEventTile .mx_PinnedEventTile_timestamp{color:#868686;font-size:.8em;vertical-align:top;display:inline-block;padding-bottom:3px}.mx_PinnedEventTile .mx_PinnedEventTile_timestamp{padding-left:15px;display:none}.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar{float:left;margin-right:10px}.mx_PinnedEventTile_actions{float:right;margin-right:10px;display:none}.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp{display:inline-block}.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions{display:block}.mx_PinnedEventTile_unpinButton{display:inline-block;cursor:pointer;margin-left:10px}.mx_PinnedEventTile_gotoButton{display:inline-block;font-size:.7em}.mx_PinnedEventTile_message{margin-left:50px;position:relative;top:0;left:0}.mx_PinnedEventsPanel{border-top:1px solid transparent}.mx_PinnedEventsPanel_body{max-height:300px;overflow-y:auto;padding-bottom:15px}.mx_PinnedEventsPanel_header{margin:0;padding-top:8px;padding-bottom:15px}.mx_PinnedEventsPanel_cancel{margin:12px;float:right;display:inline-block}.mx_PresenceLabel{font-size:1.1rem;opacity:.5}.mx_ReplyPreview{background:#fff;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;max-height:50vh;overflow:auto;-webkit-box-shadow:0 -16px 32px rgba(0,0,0,.04);box-shadow:0 -16px 32px rgba(0,0,0,.04)}.mx_ReplyPreview_section{border-bottom:1px solid transparent}.mx_ReplyPreview_header{margin:12px;color:#2e2f32;font-weight:400;opacity:.4}.mx_ReplyPreview_title{float:left}.mx_ReplyPreview_cancel{float:right;cursor:pointer}.mx_ReplyPreview_clear{clear:both}.mx_RoomBreadcrumbs{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb{margin-right:8px;width:32px}.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter{margin-left:-40px}.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter-active{margin-left:0;-webkit-transition:margin-left .64s cubic-bezier(.66,.02,.36,1);transition:margin-left .64s cubic-bezier(.66,.02,.36,1)}.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_placeholder{font-weight:600;font-size:1.4rem;line-height:32px;height:32px}.mx_RoomBreadcrumbs_Tooltip{margin-left:-42px;margin-top:-42px}.mx_RoomHeader{-webkit-box-flex:0;-ms-flex:0 0 50px;flex:0 0 50px;border-bottom:1px solid transparent;background-color:#fff}.mx_RoomHeader .mx_RoomHeader_e2eIcon{height:12px;width:12px}.mx_RoomHeader .mx_RoomHeader_e2eIcon .mx_E2EIcon{margin:0;position:absolute;height:12px;width:12px}.mx_RoomHeader_wrapper{margin:auto;height:50px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:0;padding:0 10px 0 18px}.mx_RoomHeader_wrapper .mx_InviteOnlyIcon_large{margin:0}.mx_RoomHeader_spinner{-webkit-box-flex:1;-ms-flex:1;flex:1;height:36px;padding-left:12px;padding-right:12px}.mx_RoomHeader_textButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;margin-right:8px;margin-top:-5px}.mx_RoomHeader_textButton_danger{background-color:#ff4b55}.mx_RoomHeader_cancelButton{cursor:pointer;padding-left:12px;padding-right:12px}.mx_RoomHeader_buttons{background-color:#fff}.mx_RoomHeader_buttons,.mx_RoomHeader_info{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_info{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomHeader_simpleHeader{line-height:5.2rem;color:#45474a;font-size:1.8rem;font-weight:600;overflow:hidden;margin-left:63px;text-overflow:ellipsis;width:100%}.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton{float:right}.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon{margin-left:14px;margin-right:24px;vertical-align:-4px}.mx_RoomHeader_name{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;overflow:hidden;color:#45474a;font-weight:600;font-size:1.8rem;margin:0 7px;border-bottom:1px solid transparent;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_nametext{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.mx_RoomHeader_settingsHint{color:#a2a2a2!important}.mx_RoomHeader_searchStatus{font-weight:400;opacity:.6}.mx_RoomHeader_avatar,.mx_RoomHeader_avatarPicker,.mx_RoomHeader_avatarPicker_edit,.mx_RoomHeader_avatarPicker_remove,.mx_RoomHeader_name{cursor:pointer}.mx_RoomHeader_avatarPicker_remove{position:absolute;top:-11px;right:-9px}.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable){color:#0dbd8b}.mx_RoomHeader_placeholder{color:#a2a2a2!important}.mx_RoomHeader_editable{border-bottom:1px solid #c7c7c7!important;min-width:150px;cursor:text}.mx_RoomHeader_editable:focus{border-bottom:1px solid #0dbd8b!important;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_RoomHeader_topic{-webkit-box-flex:1;-ms-flex:1;flex:1;color:#9e9e9e;font-weight:400;font-size:1.3rem;margin:4px 7px 0;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid transparent;line-height:1.2em;max-height:2.4em}.mx_RoomHeader_avatar{-webkit-box-flex:0;-ms-flex:0;flex:0;margin:0 6px 0 7px;position:relative}.mx_RoomHeader_avatar .mx_BaseAvatar_image{-o-object-fit:cover;object-fit:cover}.mx_RoomHeader_avatarPicker{position:relative}.mx_RoomHeader_avatarPicker_edit{position:absolute;left:16px;top:18px}.mx_RoomHeader_avatarPicker_edit>label{cursor:pointer}.mx_RoomHeader_avatarPicker_edit>input{display:none}.mx_RoomHeader_button{position:relative;margin-left:1px;margin-right:1px;cursor:pointer;height:32px;width:32px;border-radius:100%}.mx_RoomHeader_button:before{content:"";position:absolute;top:4px;left:4px;height:24px;width:24px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_RoomHeader_button:hover{background:rgba(13,189,139,.1)}.mx_RoomHeader_button:hover:before{background-color:#0dbd8b}.mx_RoomHeader_forgetButton:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg);width:26px}.mx_RoomHeader_appsButton:before{-webkit-mask-image:url(../../img/element-icons/room/apps.5ee9f78.svg);mask-image:url(../../img/element-icons/room/apps.5ee9f78.svg)}.mx_RoomHeader_appsButton_highlight:before{background-color:#0dbd8b}.mx_RoomHeader_searchButton:before{-webkit-mask-image:url(../../img/element-icons/room/search-inset.db6314d.svg);mask-image:url(../../img/element-icons/room/search-inset.db6314d.svg)}.mx_RoomHeader_voiceCallButton:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);-webkit-mask-size:20px;mask-size:20px;-webkit-mask-position:center;mask-position:center}.mx_RoomHeader_videoCallButton:before{-webkit-mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg);mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg)}.mx_RoomHeader_showPanel{height:16px}.mx_RoomHeader_voipButton{display:table-cell}.mx_RoomHeader_voipButtons{margin-top:18px}.mx_RoomHeader_pinnedButton:before{-webkit-mask-image:url(../../img/element-icons/room/pin.6ab67ed.svg);mask-image:url(../../img/element-icons/room/pin.6ab67ed.svg)}.mx_RoomHeader_pinsIndicator{position:absolute;right:0;bottom:4px;width:8px;height:8px;border-radius:8px;background-color:#8d99a5}.mx_RoomHeader_pinsIndicatorUnread{background-color:#ff4b55}@media only screen and (max-width:480px){.mx_RoomHeader_wrapper{padding:0}.mx_RoomHeader{overflow:hidden}}.mx_RoomList{padding-right:7px}.mx_RoomList_iconPlus:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg)}.mx_RoomList_iconHash:before{-webkit-mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg)}.mx_RoomList_iconExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_RoomList_iconBrowse:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_RoomList_iconDialpad:before{-webkit-mask-image:url(../../img/element-icons/roomlist/dialpad.37f876f.svg);mask-image:url(../../img/element-icons/roomlist/dialpad.37f876f.svg)}.mx_RoomList_explorePrompt{margin:4px 12px;padding-top:12px;border-top:1px solid #e7e7e7;font-size:1.4rem}.mx_RoomList_explorePrompt div:first-child{font-weight:600;line-height:1.8rem;color:#2e2f32}.mx_RoomList_explorePrompt .mx_AccessibleButton{color:#2e2f32;position:relative;padding:8px 8px 8px 32px;font-size:inherit;margin-top:12px;display:block;text-align:start;background-color:rgba(141,151,165,.2);border-radius:4px}.mx_RoomList_explorePrompt .mx_AccessibleButton:before{content:"";width:16px;height:16px;position:absolute;top:8px;left:8px;background:#737d8c;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_startChat:before{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_explore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_RoomPreviewBar{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-align-items:center}.mx_RoomPreviewBar h3{font-size:1.8rem;font-weight:600}.mx_RoomPreviewBar h3.mx_RoomPreviewBar_spinnerTitle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomPreviewBar .mx_RoomPreviewBar_message p,.mx_RoomPreviewBar h3{word-break:break-all;word-break:break-word}.mx_RoomPreviewBar .mx_Spinner{width:auto;height:auto;margin:10px 10px 10px 0;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomPreviewBar .mx_RoomPreviewBar_footer{font-size:1.2rem;line-height:2rem}.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner{vertical-align:middle;display:inline-block}.mx_RoomPreviewBar_actions,.mx_RoomPreviewBar_message{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomPreviewBar_message{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.mx_RoomPreviewBar_message p{overflow-wrap:break-word}.mx_RoomPreviewBar_panel{padding:8px 8px 8px 20px;border-top:1px solid transparent;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:3px 8px}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions>*{margin-left:12px}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;min-width:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message>*{margin:4px}.mx_RoomPreviewBar_dialog{margin:auto;-webkit-box-sizing:content;box-sizing:content;width:400px;border-radius:4px;padding:20px;text-align:center}.mx_RoomPreviewBar_dialog,.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message>*{margin:5px 0 20px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton{padding:7px 50px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions>*{margin-top:12px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton.mx_AccessibleButton_kind_primary{margin-bottom:7px}.mx_RoomPreviewBar_inviter{font-weight:600}a.mx_RoomPreviewBar_inviter{text-decoration:underline;cursor:pointer}.mx_RoomSublist{margin-left:8px;margin-bottom:4px}.mx_RoomSublist.mx_RoomSublist_hidden{display:none}.mx_RoomSublist .mx_RoomSublist_headerContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:8px;max-height:24px;color:#8d99a5}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky{position:fixed;height:32px;width:calc(100% - 22px)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer .mx_NotificationBadge{margin-left:8px}.mx_RoomSublist .mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_NotificationBadge{margin-right:4px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton{margin-left:8px;position:relative;width:24px;height:24px;border-radius:8px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:before{content:"";width:16px;height:16px;position:absolute;top:4px;left:4px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#61708b}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:hover{background:rgba(141,151,165,.2)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton{visibility:hidden;width:0;margin:0}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus.daac9ba.svg);mask-image:url(../../img/element-icons/roomlist/plus.daac9ba.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:before{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:calc(100% - 16px);line-height:1.6rem;font-size:1.3rem;font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn{display:inline-block;position:relative;width:14px;height:14px;margin-right:6px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn:before{content:"";width:18px;height:18px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn.mx_RoomSublist_collapseBtn_collapsed:before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_RoomSublist:first-child .mx_RoomSublist_headerContainer{height:0;padding-bottom:4px}.mx_RoomSublist .mx_RoomSublist_resizeBox{position:relative;-ms-flex-direction:column;flex-direction:column}.mx_RoomSublist .mx_RoomSublist_resizeBox,.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;overflow:hidden}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;-ms-flex-direction:column;flex-direction:column;-webkit-mask-image:linear-gradient(0deg,transparent,#000 4px);mask-image:linear-gradient(0deg,transparent,#000 4px)}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles_showNButton{-webkit-box-flex:0;-ms-flex:0 0 32px;flex:0 0 32px}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles{-webkit-box-flex:0;-ms-flex:0 0 4px;flex:0 0 4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandle{cursor:ns-resize;border-radius:3px;max-width:64px;height:4px!important;position:relative!important;bottom:0!important}.mx_RoomSublist .mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_resizerHandle,.mx_RoomSublist .mx_RoomSublist_resizeBox:hover .mx_RoomSublist_resizerHandle{opacity:.8;background-color:#2e2f32}.mx_RoomSublist .mx_RoomSublist_showNButton{cursor:pointer;font-size:1.3rem;line-height:1.8rem;color:#737d8c;height:24px;padding-bottom:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron{position:relative;width:18px;height:18px;margin-left:12px;margin-right:16px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#8d99a5;left:-1px}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron,.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showMoreButtonChevron{-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mx_RoomSublist.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,.mx_RoomSublist:not(.mx_RoomSublist_minimized)>.mx_RoomSublist_headerContainer:focus-within .mx_RoomSublist_menuButton,.mx_RoomSublist:not(.mx_RoomSublist_minimized)>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton{visibility:visible;width:24px;margin-left:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer{height:auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0;-ms-flex-item-align:end;align-self:flex-end;margin-right:0}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;max-width:100%}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;visibility:visible;width:32px!important;height:32px!important;margin-left:0!important;background-color:rgba(141,151,165,.2);margin-top:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before{top:8px;left:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_resizeBox{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron{margin-right:12px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_menuButton{height:16px}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton{visibility:visible;position:absolute;bottom:48px;right:0;width:16px;height:16px;border-radius:0;z-index:1;background-color:hsla(0,0%,96.1%,.9)}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton:before,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton:before{top:0;left:0}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton{bottom:8px}.mx_RoomSublist_contextMenu{padding:20px 16px;width:250px}.mx_RoomSublist_contextMenu hr{margin-top:16px;margin-bottom:16px;margin-right:16px;border:1px solid #2e2f32;opacity:.1}.mx_RoomSublist_contextMenu .mx_RoomSublist_contextMenu_title{font-size:1.5rem;line-height:2rem;font-weight:600;margin-bottom:4px}.mx_RoomSublist_contextMenu .mx_Checkbox,.mx_RoomSublist_contextMenu .mx_RadioButton{margin-top:8px}.mx_RoomSublist_addRoomTooltip{margin-top:-3px}.mx_RoomSublist_skeletonUI{position:relative;margin-left:4px;height:288px}.mx_RoomSublist_skeletonUI:before{background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(hsla(0,0%,100%,0)));background:linear-gradient(180deg,#fff,hsla(0,0%,100%,0));width:100%;height:100%;content:"";position:absolute;-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;-webkit-mask-size:auto 48px;mask-size:auto 48px;-webkit-mask-image:url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);mask-image:url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg)}.mx_RoomTile{margin-bottom:4px;padding:4px;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomTile.mx_RoomTile_hasMenuOpen,.mx_RoomTile.mx_RoomTile_selected,.mx_RoomTile:focus-within,.mx_RoomTile:hover{background-color:#fff;border-radius:8px}.mx_RoomTile .mx_DecoratedRoomAvatar,.mx_RoomTile .mx_RoomTile_avatarContainer{margin-right:8px}.mx_RoomTile .mx_RoomTile_nameContainer{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-width:0;margin-right:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview,.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name{margin:0 2px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name{font-size:1.4rem;line-height:1.8rem}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents{font-weight:600}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview{font-size:1.3rem;line-height:1.8rem;color:#737d8c}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_nameWithPreview{margin-top:-4px}.mx_RoomTile .mx_RoomTile_notificationsButton{margin-left:4px}.mx_RoomTile .mx_RoomTile_badgeContainer{height:16px;margin:auto 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge{margin-right:2px}.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge_dot{margin-left:5px;margin-right:7px}.mx_RoomTile .mx_RoomTile_menuButton,.mx_RoomTile .mx_RoomTile_notificationsButton{width:20px;min-width:20px;height:20px;margin-top:auto;margin-bottom:auto;position:relative;display:none}.mx_RoomTile .mx_RoomTile_menuButton:before,.mx_RoomTile .mx_RoomTile_notificationsButton:before{top:2px;left:2px;content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_RoomTile .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show{display:block}.mx_RoomTile .mx_RoomTile_menuButton:before{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_badgeContainer,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_badgeContainer,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_badgeContainer{width:0;height:0;display:none}.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_notificationsButton,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_notificationsButton,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_notificationsButton{display:block}.mx_RoomTile.mx_RoomTile_minimized{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative}.mx_RoomTile.mx_RoomTile_minimized .mx_DecoratedRoomAvatar,.mx_RoomTile.mx_RoomTile_minimized .mx_RoomTile_avatarContainer{margin-right:0}.mx_RoomTile_iconBell:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RoomTile_iconBellDot:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);mask-image:url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg)}.mx_RoomTile_iconBellCrossed:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg)}.mx_RoomTile_iconBellMentions:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);mask-image:url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconStar:before{-webkit-mask-image:url(../../img/element-icons/roomlist/favorite.ff7609d.svg);mask-image:url(../../img/element-icons/roomlist/favorite.ff7609d.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconArrowDown:before{-webkit-mask-image:url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);mask-image:url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconSignOut:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_RoomUpgradeWarningBar{max-height:235px;background-color:#f7f7f7;padding-left:20px;padding-right:20px;overflow:scroll}.mx_RoomUpgradeWarningBar_wrapped{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center}.mx_RoomUpgradeWarningBar_header{color:#ff4b55;font-weight:700}.mx_RoomUpgradeWarningBar_body{color:#ff4b55}.mx_RoomUpgradeWarningBar_upgradelink{color:#ff4b55;text-decoration:underline}.mx_RoomUpgradeWarningBar_small{color:#888;font-size:70%}.mx_SearchBar{height:56px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid transparent}.mx_SearchBar .mx_SearchBar_input{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;margin-left:22px}.mx_SearchBar .mx_SearchBar_searchButton{cursor:pointer;width:37px;height:37px;background-color:#0dbd8b;-webkit-mask:url(../../img/feather-customised/search-input.044bfa7.svg);mask:url(../../img/feather-customised/search-input.044bfa7.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mx_SearchBar .mx_SearchBar_buttons{display:inherit}.mx_SearchBar .mx_SearchBar_button{border:0;margin:0 0 0 22px;padding:5px;font-size:1.5rem;cursor:pointer;color:#2e2f32;border-bottom:2px solid #0dbd8b;font-weight:600}.mx_SearchBar .mx_SearchBar_unselected{color:#9fa9ba;border-color:transparent}.mx_SearchBar .mx_SearchBar_cancel{background-color:#ff4b55;-webkit-mask:url(../../img/cancel.4b9715b.svg);mask:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14px;mask-size:14px;padding:9px;margin:0 12px 0 3px;cursor:pointer}.mx_SendMessageComposer{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;font-size:1.4rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-right:6px;min-width:0}.mx_SendMessageComposer,.mx_SendMessageComposer .mx_BasicMessageComposer{-webkit-box-flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_SendMessageComposer .mx_BasicMessageComposer{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;min-height:50px}.mx_SendMessageComposer .mx_BasicMessageComposer .mx_BasicMessageComposer_input{padding:3px 0;margin:auto 0;max-height:140px;overflow-y:auto}.mx_Stickers_content{overflow:hidden}.mx_Stickers_content_container{overflow:hidden;height:300px}#mx_persistedElement_stickerPicker .mx_AppTileFullWidth{height:unset;-webkit-box-sizing:border-box;box-sizing:border-box;border-left:none;border-right:none;border-bottom:none}#mx_persistedElement_stickerPicker .mx_AppTileMenuBar{padding:0}#mx_persistedElement_stickerPicker iframe{height:283px}.mx_Stickers_contentPlaceholder{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.mx_Stickers_contentPlaceholder p{max-width:200px}.mx_Stickers_addLink{display:inline;cursor:pointer;color:#0dbd8b}.mx_Stickers_hideStickers{z-index:2001}.mx_TopUnreadMessagesBar{z-index:1000;position:absolute;top:24px;right:24px;width:38px}.mx_TopUnreadMessagesBar:after{content:"";position:absolute;top:-8px;left:10.5px;width:4px;height:4px;border-radius:16px;background-color:#f2f5f8;border:6px solid #0dbd8b;pointer-events:none}.mx_TopUnreadMessagesBar_scrollUp{height:38px;border-radius:19px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1.3px solid #61708b;cursor:pointer}.mx_TopUnreadMessagesBar_scrollUp:before{content:"";position:absolute;width:36px;height:36px;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;background:#61708b;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mx_TopUnreadMessagesBar_markAsRead{display:block;width:18px;height:18px;background:#fff;border:1.3px solid #61708b;border-radius:10px;margin:5px auto}.mx_TopUnreadMessagesBar_markAsRead:before{content:"";position:absolute;width:18px;height:18px;-webkit-mask-image:url(../../img/cancel.4b9715b.svg);mask-image:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:10px;mask-size:10px;-webkit-mask-position:4px 4px;mask-position:4px 4px;background:#61708b}.mx_VoiceRecordComposerTile_stop{width:28px;height:28px;border:2px solid #e3e8f0;border-radius:32px;margin-right:16px;position:relative}.mx_VoiceRecordComposerTile_stop:after{content:"";width:14px;height:14px;position:absolute;top:7px;left:7px;border-radius:2px;background-color:#ff4b55}.mx_VoiceRecordComposerTile_delete{width:14px;height:18px;vertical-align:middle;margin-right:11px;background-color:#8d99a5;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg)}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer{margin:6px 12px 6px 6px;position:relative}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording{padding-left:22px}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording:before{-webkit-animation:recording-pulse 2s infinite;animation:recording-pulse 2s infinite;content:"";background-color:#ff4b55;width:10px;height:10px;position:absolute;left:12px;top:18px;border-radius:10px}@-webkit-keyframes recording-pulse{0%{opacity:1}35%{opacity:0}65%{opacity:1}}@keyframes recording-pulse{0%{opacity:1}35%{opacity:0}65%{opacity:1}}.mx_WhoIsTypingTile{margin-left:-18px;padding-top:18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_WhoIsTypingTile_avatars{-webkit-box-flex:0;-ms-flex:0 0 83px;flex:0 0 83px;text-align:center}.mx_WhoIsTypingTile_avatars>:not(:first-child){margin-left:-12px}.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial{padding-top:1px}.mx_WhoIsTypingTile_avatars .mx_BaseAvatar{border:1px solid #fff;border-radius:40px}.mx_WhoIsTypingTile_remainingAvatarPlaceholder{position:relative;display:inline-block;color:#acacac;background-color:#ddd;border:1px solid #fff;border-radius:40px;width:24px;height:24px;line-height:2.4rem;font-size:.8em;vertical-align:top;text-align:center}.mx_WhoIsTypingTile_label{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:1.4rem;font-weight:600;color:#9e9e9e}.mx_WhoIsTypingTile_label>span{background-image:url(../../img/typing-indicator-2x.0eb9f0e.gif);background-size:25px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:15px;display:block}.mx_MatrixChat_useCompactLayout .mx_WhoIsTypingTile{padding-top:4px}.mx_AvatarSetting_avatar{width:90px;min-width:90px;height:90px;margin-top:8px;position:relative}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover{-webkit-transition:opacity .08s cubic-bezier(.46,.03,.52,.96);transition:opacity .08s cubic-bezier(.46,.03,.52,.96);position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;line-height:90px;text-align:center}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover>span{color:#fff;position:relative;font-weight:500}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover .mx_AvatarSetting_hoverBg{position:absolute;top:0;bottom:0;left:0;right:0;opacity:.5;background-color:#2e2f32;border-radius:90px}.mx_AvatarSetting_avatar.mx_AvatarSetting_avatar_hovering .mx_AvatarSetting_hover{opacity:1}.mx_AvatarSetting_avatar:not(.mx_AvatarSetting_avatar_hovering) .mx_AvatarSetting_hover{opacity:0}.mx_AvatarSetting_avatar>*{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_primary{margin-top:8px}.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm{width:100%}.mx_AvatarSetting_avatar>img{cursor:pointer;-o-object-fit:cover;object-fit:cover}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder,.mx_AvatarSetting_avatar>img{display:block;height:90px;width:inherit;border-radius:90px;cursor:pointer}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before{background-color:#2e2f32;-webkit-mask:url(../../img/feather-customised/user.7a4d23d.svg);mask:url(../../img/feather-customised/user.7a4d23d.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:36px;mask-size:36px;-webkit-mask-position:center;mask-position:center;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton{width:32px;height:32px;border-radius:32px;background-color:#e7e7e7;position:absolute;bottom:0;right:0}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton:before{content:"";display:block;width:100%;height:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:55%;mask-size:55%;background-color:#2e2f32;-webkit-mask-image:url(../../img/feather-customised/edit.fd55ec2.svg);mask-image:url(../../img/feather-customised/edit.fd55ec2.svg)}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder{background-color:#f4f6fa}.mx_CrossSigningPanel_statusList{border-spacing:0}.mx_CrossSigningPanel_statusList td{padding:0}.mx_CrossSigningPanel_statusList td:first-of-type{-webkit-padding-end:1em;padding-inline-end:1em}.mx_CrossSigningPanel_buttonRow{margin:1em 0}.mx_CrossSigningPanel_buttonRow :nth-child(n+1){-webkit-margin-end:10px;margin-inline-end:10px}.mx_DevicesPanel{display:table;table-layout:fixed;width:880px;border-spacing:10px}.mx_DevicesPanel_header{display:table-header-group;font-weight:700}.mx_DevicesPanel_header>.mx_DevicesPanel_deviceButtons{height:48px}.mx_DevicesPanel_header>div{display:table-cell;vertical-align:middle}.mx_DevicesPanel_header .mx_DevicesPanel_deviceName{width:50%}.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen{width:30%}.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons{width:20%}.mx_DevicesPanel_device{display:table-row}.mx_DevicesPanel_device>div{display:table-cell}.mx_DevicesPanel_myDevice{font-weight:700}.mx_E2eAdvancedPanel_settingLongDescription{margin-right:150px}.mx_ExistingEmailAddress{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingEmailAddress_delete{margin-right:5px;cursor:pointer;vertical-align:middle}.mx_ExistingEmailAddress_email,.mx_ExistingEmailAddress_promptText{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_ExistingEmailAddress_confirmBtn{margin-left:5px}.mx_IntegrationManager .mx_Dialog{width:60%;height:70%;overflow:hidden;padding:0;max-width:none;max-height:none}.mx_IntegrationManager iframe{background-color:#fff;border:0;width:100%;height:100%}.mx_IntegrationManager_loading h3{text-align:center}.mx_IntegrationManager_error{text-align:center;padding-top:20px}.mx_IntegrationManager_error h3{color:#ff4b55}.mx_UserNotifSettings_tableRow{display:table-row}.mx_UserNotifSettings_inputCell{display:table-cell;padding-bottom:8px;padding-right:8px;width:16px}.mx_UserNotifSettings_labelCell{padding-bottom:8px;width:400px;display:table-cell}.mx_UserNotifSettings_pushRulesTableWrapper{padding-bottom:8px}.mx_UserNotifSettings_pushRulesTable{width:100%;table-layout:fixed}.mx_UserNotifSettings_pushRulesTable thead{font-weight:700}.mx_UserNotifSettings_pushRulesTable tbody th{font-weight:400}.mx_UserNotifSettings_pushRulesTable tbody th:first-child{text-align:left}.mx_UserNotifSettings_keywords{cursor:pointer;color:#0dbd8b}.mx_UserNotifSettings_devicesTable td{padding-left:20px;padding-right:20px}.mx_UserNotifSettings_notifTable{display:table;position:relative}.mx_UserNotifSettings_notifTable .mx_Spinner{position:absolute}.mx_NotificationSound_soundUpload{display:none}.mx_NotificationSound_browse{color:#0dbd8b;border:1px solid #0dbd8b;background-color:transparent}.mx_NotificationSound_save{margin-left:5px;color:#fff;background-color:#0dbd8b}.mx_NotificationSound_resetSound{margin-top:5px;color:#fff;border:#ff4b55;background-color:#ff4b55}.mx_ExistingPhoneNumber{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingPhoneNumber_delete{margin-right:5px;cursor:pointer;vertical-align:middle}.mx_ExistingPhoneNumber_address,.mx_ExistingPhoneNumber_promptText{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_ExistingPhoneNumber_confirmBtn{margin-left:5px}.mx_ExistingPhoneNumber_verification{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ExistingPhoneNumber_verification .mx_Field{margin:0 0 0 1em}.mx_PhoneNumbers_input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_PhoneNumbers_input>.mx_Field{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_PhoneNumbers_country{width:80px}.mx_ProfileSettings_controls_topic>textarea{resize:vertical}.mx_ProfileSettings_profile{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ProfileSettings_controls{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin-right:54px}.mx_ProfileSettings_controls .mx_SettingsTab_subheading{margin-top:0}.mx_ProfileSettings_controls .mx_Field #profileTopic{height:4em}.mx_ProfileSettings_controls .mx_Field:first-child{margin-top:0}.mx_ProfileSettings_hostingSignup{margin-left:20px}.mx_ProfileSettings_hostingSignup img{margin-left:5px}.mx_ProfileSettings_avatarUpload{display:none}.mx_ProfileSettings_profileForm{margin-right:100px;border-bottom:1px solid #e7e7e7}.mx_ProfileSettings_buttons{margin-top:10px;margin-bottom:28px}.mx_ProfileSettings_buttons>.mx_AccessibleButton_kind_link{padding-left:0}.mx_SecureBackupPanel_deviceNotVerified,.mx_SecureBackupPanel_deviceVerified,.mx_SecureBackupPanel_sigInvalid,.mx_SecureBackupPanel_sigValid{font-weight:700}.mx_SecureBackupPanel_deviceVerified,.mx_SecureBackupPanel_sigValid{color:#76cfa5}.mx_SecureBackupPanel_deviceNotVerified,.mx_SecureBackupPanel_sigInvalid{color:#ba6363}.mx_SecureBackupPanel_deviceName{font-style:italic}.mx_SecureBackupPanel_buttonRow{margin:1em 0}.mx_SecureBackupPanel_buttonRow :nth-child(n+1){-webkit-margin-end:10px;margin-inline-end:10px}.mx_SecureBackupPanel_statusList{border-spacing:0}.mx_SecureBackupPanel_statusList td{padding:0}.mx_SecureBackupPanel_statusList td:first-of-type{-webkit-padding-end:1em;padding-inline-end:1em}.mx_SetIdServer .mx_Field_input{margin-right:100px}.mx_SetIdServer_tooltip{max-width:120px}.mx_SetIntegrationManager{margin-top:10px;margin-bottom:10px}.mx_SetIntegrationManager>.mx_SettingsTab_heading{margin-bottom:10px}.mx_SetIntegrationManager>.mx_SettingsTab_heading>.mx_SettingsTab_subheading{display:inline-block;padding-left:5px}.mx_SetIntegrationManager .mx_ToggleSwitch{display:inline-block;float:right;top:9px;margin-right:100px}.mx_ExistingSpellCheckLanguage{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingSpellCheckLanguage_language{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_GeneralUserSettingsTab_spellCheckLanguageInput{margin-top:1em;margin-bottom:1em}.mx_SpellCheckLanguages{margin-right:100px}.mx_UpdateCheckButton_summary{margin-left:16px}.mx_UpdateCheckButton_summary .mx_AccessibleButton_kind_link{padding:0}.mx_SettingsTab{color:#61708b}.mx_SettingsTab_warningText{color:#ff4b55}.mx_SettingsTab_heading{font-size:2rem;font-weight:600;color:#2e2f32;margin-bottom:10px}.mx_SettingsTab_heading:nth-child(n+2){margin-top:30px}.mx_SettingsTab_subheading{font-size:1.6rem;display:block;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-weight:600;color:#2e2f32;margin-bottom:10px;margin-top:12px}.mx_SettingsTab_subsectionText{color:#61708b;font-size:1.4rem;display:block;margin:10px 100px 10px 0}.mx_SettingsTab_section{margin-bottom:24px}.mx_SettingsTab_section .mx_SettingsFlag{margin-right:100px;margin-bottom:10px}.mx_SettingsTab_section.mx_SettingsTab_subsectionText .mx_SettingsFlag{margin-right:0!important}.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label{vertical-align:middle;display:inline-block;font-size:1.4rem;color:#2e2f32;max-width:calc(100% - 4.8rem);-webkit-box-sizing:border-box;box-sizing:border-box;padding-right:10px}.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch{float:right}.mx_SettingsTab_linkBtn{cursor:pointer;color:#0dbd8b;word-break:break-all}.mx_SettingsTab a{color:#238cf5}.mx_GeneralRoomSettingsTab_profileSection{margin-top:10px}.mx_RolesRoomSettingsTab ul{margin-bottom:0}.mx_RolesRoomSettingsTab_unbanBtn{margin-right:10px;margin-bottom:5px}.mx_SecurityRoomSettingsTab_warning{display:block}.mx_SecurityRoomSettingsTab_warning img{vertical-align:middle;margin-right:5px;margin-left:3px;margin-bottom:5px}.mx_SecurityRoomSettingsTab_encryptionSection{margin-bottom:25px}.mx_AppearanceUserSettingsTab_fontSlider,.mx_AppearanceUserSettingsTab_fontSlider_preview,.mx_AppearanceUserSettingsTab_Layout{margin-right:100px}.mx_AppearanceUserSettingsTab .mx_Field{width:256px}.mx_AppearanceUserSettingsTab_fontScaling{color:#2e2f32}.mx_AppearanceUserSettingsTab_fontSlider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:15px;background:rgba(227,232,240,.2);border-radius:10px;font-size:10px;margin-top:24px;margin-bottom:24px}.mx_AppearanceUserSettingsTab_fontSlider_preview{border:1px solid #e3e8f0;border-radius:10px;padding:0 16px 9px;pointer-events:none}.mx_AppearanceUserSettingsTab_fontSlider_preview .mx_EventTile_msgOption{display:none}.mx_AppearanceUserSettingsTab_fontSlider_preview.mx_IRCLayout{padding-top:9px}.mx_AppearanceUserSettingsTab_fontSlider_smallText{font-size:15px;padding-right:20px;padding-left:5px;font-weight:500}.mx_AppearanceUserSettingsTab_fontSlider_largeText{font-size:18px;padding-left:20px;padding-right:5px;font-weight:500}.mx_AppearanceUserSettingsTab>.mx_SettingsTab_SubHeading{margin-bottom:32px}.mx_AppearanceUserSettingsTab_themeSection{color:#2e2f32}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:4px;margin-bottom:30px}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton{padding:1.6rem;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:10px;width:180px;background:#e3e8f0;opacity:.4;-ms-flex-negative:1;flex-shrink:1;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;margin-right:15px;margin-top:10px;font-weight:600;color:#61708b}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton>span{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled{opacity:1}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_light{background-color:#f3f8fd;color:#2e2f32}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark{background-color:#25282e;color:#f3f8fd}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark>input>div,.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark>input>div>div{border-color:#e3e8f0}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black{background-color:#000;color:#f3f8fd}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black>input>div,.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black>input>div>div{border-color:#e3e8f0}.mx_SettingsTab_customFontSizeField{margin-left:calc(1.6rem + 10px)}.mx_AppearanceUserSettingsTab_Layout_RadioButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:#2e2f32}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_AppearanceUserSettingsTab_spacer{width:24px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:1;flex-shrink:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:300px;border:1px solid #e3e8f0;border-radius:10px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_EventTile_msgOption,.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_MessageActionBar{display:none}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px;pointer-events:none}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_RadioButton{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;padding:10px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_EventTile_content{margin-right:0}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected{border-color:#0dbd8b}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton{border-top:1px solid #e3e8f0}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton>input+div{border-color:rgba(97,112,139,.2)}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton_checked{background-color:rgba(13,189,139,.08)}.mx_AppearanceUserSettingsTab_Advanced{color:#2e2f32}.mx_AppearanceUserSettingsTab_Advanced>*{margin-bottom:16px}.mx_AppearanceUserSettingsTab_Advanced .mx_AppearanceUserSettingsTab_AdvancedToggle{color:#0dbd8b;cursor:pointer}.mx_AppearanceUserSettingsTab_Advanced .mx_AppearanceUserSettingsTab_systemFont{margin-left:calc(1.6rem + 10px)}.mx_GeneralUserSettingsTab_changePassword .mx_Field{margin-right:100px}.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child{margin-top:0}.mx_GeneralUserSettingsTab_accountSection .mx_SettingsTab_subheading:nth-child(n+1),.mx_GeneralUserSettingsTab_discovery .mx_SettingsTab_subheading:nth-child(n+2),.mx_SetIdServer .mx_SettingsTab_subheading{margin-top:24px}.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,.mx_GeneralUserSettingsTab_discovery .mx_Spinner{-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left}.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,.mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber,.mx_GeneralUserSettingsTab_languageInput{margin-right:100px}.mx_GeneralUserSettingsTab_warningIcon{vertical-align:middle}.mx_HelpUserSettingsTab_debugButton{margin-bottom:5px;margin-top:5px}.mx_HelpUserSettingsTab span.mx_AccessibleButton{word-break:break-word}.mx_HelpUserSettingsTab code{word-break:break-all;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.mx_HelpUserSettingsTab_accessToken{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-radius:5px;border:1px solid #747474;margin-bottom:10px;margin-top:10px;padding:10px}.mx_HelpUserSettingsTab_accessToken_copy{-ms-flex-negative:0;flex-shrink:0;cursor:pointer;margin-left:20px;display:inherit}.mx_HelpUserSettingsTab_accessToken_copy>div{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);background-color:#2e2f32;margin-left:5px;width:20px;height:20px;background-repeat:no-repeat}.mx_LabsUserSettingsTab .mx_SettingsTab_section{margin-top:32px}.mx_LabsUserSettingsTab .mx_SettingsTab_section .mx_SettingsFlag{margin-right:0}.mx_MjolnirUserSettingsTab .mx_Field{margin-right:100px}.mx_MjolnirUserSettingsTab_listItem{margin-bottom:2px}.mx_NotificationUserSettingsTab .mx_SettingsTab_heading{margin-bottom:10px}.mx_PreferencesUserSettingsTab .mx_Field{margin-right:100px}.mx_PreferencesUserSettingsTab .mx_SettingsTab_section{margin-bottom:30px}.mx_SecurityUserSettingsTab .mx_DevicesPanel{width:auto;max-width:880px}.mx_SecurityUserSettingsTab_deviceInfo{display:table;padding-left:0}.mx_SecurityUserSettingsTab_deviceInfo>li{display:table-row}.mx_SecurityUserSettingsTab_deviceInfo>li>label,.mx_SecurityUserSettingsTab_deviceInfo>li>span{display:table-cell;padding-right:1em}.mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton,.mx_SecurityUserSettingsTab_importExportButtons .mx_AccessibleButton{margin-right:10px}.mx_SecurityUserSettingsTab_importExportButtons{margin-bottom:15px}.mx_SecurityUserSettingsTab_ignoredUser{margin-bottom:5px}.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton{margin-right:10px}.mx_SecurityUserSettingsTab .mx_SettingsTab_section .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning{color:#ff4b55;position:relative;padding-left:40px;margin-top:30px}.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning:before{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:2.4rem;mask-size:2.4rem;position:absolute;width:2.4rem;height:2.4rem;content:"";top:0;left:0;background-color:#ff4b55;-webkit-mask-image:url(../../img/feather-customised/alert-triangle.38aca3a.svg);mask-image:url(../../img/feather-customised/alert-triangle.38aca3a.svg)}.mx_VoiceUserSettingsTab .mx_Field{margin-right:100px}.mx_VoiceUserSettingsTab_missingMediaPermissions{margin-bottom:15px}.mx_SpaceBasicSettings .mx_Field{margin:32px 0}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:24px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer .mx_SpaceBasicSettings_avatar{position:relative;height:80px;width:80px;background-color:#8d99a5;border-radius:16px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer img.mx_SpaceBasicSettings_avatar{width:80px;height:80px;-o-object-fit:cover;object-fit:cover;border-radius:16px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar{cursor:pointer}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar:before{content:"";position:absolute;height:80px;width:80px;top:0;left:0;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-image:url(../../img/element-icons/camera.a81a395.svg);mask-image:url(../../img/element-icons/camera.a81a395.svg)}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>input[type=file]{display:none}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>.mx_AccessibleButton_kind_link{display:inline-block;padding:0;margin:auto 16px;color:#368bd6}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>.mx_SpaceBasicSettings_avatar_remove{color:#ff4b55}.mx_SpaceBasicSettings .mx_FormButton{padding:8px 22px;margin-left:auto;display:block;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_SpaceBasicSettings .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background{background-color:rgba(46,48,51,.38);opacity:.6;left:71px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu{padding:24px;width:480px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#fff;position:relative}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu>div>h2{font-weight:600;font-size:1.8rem;margin-top:4px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu>div>p{font-size:1.5rem;color:#737d8c;margin:0}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_BetaCard_betaPill{position:absolute;top:24px;right:24px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType>h3{font-weight:600;margin:0 0 4px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType>span{color:#737d8c}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover{border-color:#0dbd8b}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover:before{background-color:#0dbd8b}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover>span{color:#2e2f32}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_public:before{-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_private:before{-webkit-mask-image:url(../../img/element-icons/lock.1f264bd.svg);mask-image:url(../../img/element-icons/lock.1f264bd.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back{width:28px;height:28px;position:relative;background-color:rgba(141,151,165,.2);border-radius:14px;margin-bottom:12px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back:before{content:"";position:absolute;height:28px;width:28px;top:0;left:0;background-color:#8d99a5;-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:2px 3px;mask-position:2px 3px;-webkit-mask-size:24px;mask-size:24px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_kind_primary{padding:8px 22px;margin-left:auto;display:block;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpacePublicShare .mx_AccessibleButton{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpacePublicShare .mx_AccessibleButton>h3{font-weight:600;margin:0 0 4px}.mx_SpacePublicShare .mx_AccessibleButton>span{color:#737d8c}.mx_SpacePublicShare .mx_AccessibleButton:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpacePublicShare .mx_AccessibleButton:hover{border-color:#0dbd8b}.mx_SpacePublicShare .mx_AccessibleButton:hover:before{background-color:#0dbd8b}.mx_SpacePublicShare .mx_AccessibleButton:hover>span{color:#2e2f32}.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_shareButton:before{-webkit-mask-image:url(../../img/element-icons/link.8f4b1fc.svg);mask-image:url(../../img/element-icons/link.8f4b1fc.svg)}.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_inviteButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_InlineTermsAgreement_cbContainer{margin-bottom:10px;font-size:1.4rem}.mx_InlineTermsAgreement_cbContainer a{color:#0dbd8b;text-decoration:none}.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox{margin-top:10px}.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox input{vertical-align:text-bottom}.mx_InlineTermsAgreement_link{display:inline-block;-webkit-mask-image:url(../../img/external-link.a8d3e9b.svg);mask-image:url(../../img/external-link.a8d3e9b.svg);background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:12px;height:12px;margin-left:3px;vertical-align:middle}.mx_AnalyticsToast .mx_AccessibleButton_kind_danger{background:none;color:#0dbd8b}.mx_AnalyticsToast .mx_AccessibleButton_kind_primary{background:#0dbd8b;color:#fff}.mx_NonUrgentEchoFailureToast .mx_NonUrgentEchoFailureToast_icon{display:inline-block;width:1.8rem;height:1.8rem;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#fff;-webkit-mask-image:url(../../img/element-icons/cloud-off.33cd28e.svg);mask-image:url(../../img/element-icons/cloud-off.33cd28e.svg);margin-right:8px}.mx_NonUrgentEchoFailureToast span{vertical-align:middle}.mx_NonUrgentEchoFailureToast .mx_AccessibleButton{padding:0}.mx_VerificationShowSas_decimalSas{text-align:center;font-weight:700;padding-left:3px;padding-right:3px}.mx_VerificationShowSas_decimalSas span{margin-left:5px;margin-right:5px}.mx_VerificationShowSas_emojiSas{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:25px 0}.mx_VerificationShowSas_emojiSas_block{display:inline-block;margin-bottom:16px;position:relative;width:52px}.mx_AuthPage_modal .mx_VerificationShowSas_emojiSas_block,.mx_Dialog .mx_VerificationShowSas_emojiSas_block{width:60px}.mx_VerificationShowSas_emojiSas_emoji{font-size:3.2rem}.mx_VerificationShowSas_emojiSas_label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:1.2rem}.mx_VerificationShowSas_emojiSas_break{-ms-flex-preferred-size:100%;flex-basis:100%}.mx_VerificationShowSas .mx_Dialog_buttons button.mx_VerificationShowSas_matchButton{color:#0dbd8b;background-color:rgba(3,179,129,.16);border:none}.mx_VerificationShowSas .mx_Dialog_buttons button.mx_VerificationShowSas_noMatchButton{color:#ff4b55;background-color:rgba(255,75,85,.16);border:none}.mx_PlayPauseButton{position:relative;width:32px;height:32px;border-radius:32px;background-color:#fff}.mx_PlayPauseButton:before{content:"";position:absolute;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_PlayPauseButton.mx_PlayPauseButton_disabled:before{opacity:.5}.mx_PlayPauseButton.mx_PlayPauseButton_play:before{width:13px;height:16px;top:8px;left:12px;-webkit-mask-image:url(../../img/element-icons/play.a72552b.svg);mask-image:url(../../img/element-icons/play.a72552b.svg)}.mx_PlayPauseButton.mx_PlayPauseButton_pause:before{width:10px;height:12px;top:10px;left:11px;-webkit-mask-image:url(../../img/element-icons/pause.c4c0886.svg);mask-image:url(../../img/element-icons/pause.c4c0886.svg)}.mx_VoiceMessagePrimaryContainer{padding:7px 12px 7px 11px;background-color:#e3e8f0;border-radius:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#737d8c;font-size:1.4rem;line-height:2.4rem}.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar{background-color:#c1c6cd}.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct{-webkit-transition:background-color .25s ease;transition:background-color .25s ease;background-color:#737d8c}.mx_VoiceMessagePrimaryContainer .mx_Clock{width:4.2rem;padding-right:6px;padding-left:8px}.mx_Waveform{position:relative;height:30px;top:1px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mx_Waveform .mx_Waveform_bar{width:0;border:1px solid transparent;border-radius:2px;min-height:0;max-height:100%;margin-left:1px;margin-right:1px}.mx_CallContainer{position:absolute;right:20px;bottom:72px;z-index:100;pointer-events:none}.mx_CallContainer .mx_CallPreview{pointer-events:auto;cursor:pointer}.mx_CallContainer .mx_CallPreview .mx_CallView_video{width:350px}.mx_CallContainer .mx_CallPreview .mx_VideoFeed_local{border-radius:8px;overflow:hidden}.mx_CallContainer .mx_AppTile_persistedWrapper div{min-width:350px}.mx_CallContainer .mx_IncomingCallBox{min-width:250px;background-color:#f4f6fa;padding:8px;-webkit-box-shadow:0 14px 24px rgba(0,0,0,.08);box-shadow:0 14px 24px rgba(0,0,0,.08);border-radius:8px;pointer-events:auto;cursor:pointer}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo{display:-webkit-box;display:-ms-flexbox;display:flex;direction:row}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo .mx_BaseAvatar_initial,.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo img{margin:8px}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1,.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo p{margin:0;padding:0;font-size:1.4rem;line-height:1.6rem}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1{font-weight:700}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons{padding:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons>.mx_IncomingCallBox_spacer{width:8px}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons>*{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin-right:0;font-size:1.5rem;line-height:2.4rem}.mx_CallView{border-radius:8px;background-color:#f2f5f8;padding-left:8px;padding-right:8px;pointer-events:auto}.mx_CallView_large{padding-bottom:10px;margin:5px 5px 5px 18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_CallView_large,.mx_CallView_large .mx_CallView_voice{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_CallView_pip{width:320px;padding-bottom:8px;margin-top:10px;background-color:#f4f6fa;-webkit-box-shadow:0 4px 20px rgba(0,0,0,.2);box-shadow:0 4px 20px rgba(0,0,0,.2);border-radius:8px}.mx_CallView_pip .mx_CallView_voice{height:180px}.mx_CallView_pip .mx_CallView_callControls{bottom:0}.mx_CallView_pip .mx_CallView_callControls_button:before{width:36px;height:36px}.mx_CallView_pip .mx_CallView_holdTransferContent{padding-top:10px;padding-bottom:25px}.mx_CallView_content{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:8px}.mx_CallView_voice{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;background-color:#27303a}.mx_CallView_voice,.mx_CallView_voice_avatarsContainer{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-direction:normal}.mx_CallView_voice_avatarsContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row}.mx_CallView_voice_avatarsContainer div{margin-left:12px;margin-right:12px}.mx_CallView_voice .mx_CallView_holdTransferContent .mx_CallView_voice_avatarContainer{border-radius:2000px;overflow:hidden;position:relative}.mx_CallView_holdTransferContent{height:20px;padding-top:20px;padding-bottom:15px;color:#fff}.mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind{padding:0;font-weight:700}.mx_CallView_video{width:100%;height:100%;z-index:30;overflow:hidden}.mx_CallView_video_hold{overflow:hidden}.mx_CallView_video_hold .mx_VideoFeed{visibility:hidden}.mx_CallView_video_holdBackground{position:absolute;width:100%;height:100%;left:0;right:0;background-repeat:no-repeat;background-size:cover;background-position:50%;-webkit-filter:blur(20px);filter:blur(20px)}.mx_CallView_video_holdBackground:after{content:"";display:block;position:absolute;width:100%;height:100%;left:0;right:0;background-color:rgba(0,0,0,.6)}.mx_CallView_video .mx_CallView_holdTransferContent{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-weight:700;color:#fff;text-align:center}.mx_CallView_video .mx_CallView_holdTransferContent:before{display:block;margin-left:auto;margin-right:auto;content:"";width:40px;height:40px;background-image:url(../../img/voip/paused.77799b3.svg);background-position:50%;background-size:cover}.mx_CallView_pip .mx_CallView_video .mx_CallView_holdTransferContent:before{width:30px;height:30px}.mx_CallView_video .mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind{padding:0}.mx_CallView_header{height:44px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;-ms-flex-negative:0;flex-shrink:0}.mx_CallView_header_callType{font-size:1.2rem;font-weight:700;vertical-align:middle}.mx_CallView_header_secondaryCallInfo:before{content:"·";margin-left:6px;margin-right:6px}.mx_CallView_header_controls{margin-left:auto}.mx_CallView_header_button{display:inline-block;vertical-align:middle;cursor:pointer}.mx_CallView_header_button:before{content:"";display:inline-block;height:20px;width:20px;vertical-align:middle;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_CallView_header_button_fullscreen:before{-webkit-mask-image:url(../../img/element-icons/call/fullscreen.43be138.svg);mask-image:url(../../img/element-icons/call/fullscreen.43be138.svg)}.mx_CallView_header_button_expand:before{-webkit-mask-image:url(../../img/element-icons/call/expand.7ef9f56.svg);mask-image:url(../../img/element-icons/call/expand.7ef9f56.svg)}.mx_CallView_header_callInfo{margin-left:12px;margin-right:16px}.mx_CallView_header_roomName{font-weight:700;font-size:12px;line-height:normal;height:15px}.mx_CallView_secondaryCall_roomName{margin-left:4px}.mx_CallView_header_callTypeSmall{font-size:12px;color:#737d8c;line-height:normal;height:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:240px}.mx_CallView_header_phoneIcon{display:inline-block;margin-right:6px;height:16px;width:16px;vertical-align:middle}.mx_CallView_header_phoneIcon:before{content:"";display:inline-block;vertical-align:top;height:16px;width:16px;background-color:#ff4b55;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_CallView_callControls{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;bottom:5px;width:100%;opacity:1;-webkit-transition:opacity .5s;transition:opacity .5s}.mx_CallView_callControls_hidden{opacity:.001;pointer-events:none}.mx_CallView_callControls_button{cursor:pointer;margin-left:8px;margin-right:8px}.mx_CallView_callControls_button:before{content:"";display:inline-block;height:48px;width:48px;background-repeat:no-repeat;background-size:contain;background-position:50%}.mx_CallView_callControls_dialpad{margin-right:auto}.mx_CallView_callControls_dialpad:before{background-image:url(../../img/voip/dialpad.fdda9a0.svg)}.mx_CallView_callControls_button_dialpad_hidden{margin-right:auto;cursor:auto}.mx_CallView_callControls_button_micOn:before{background-image:url(../../img/voip/mic-on.2592c14.svg)}.mx_CallView_callControls_button_micOff:before{background-image:url(../../img/voip/mic-off.774e42b.svg)}.mx_CallView_callControls_button_vidOn:before{background-image:url(../../img/voip/vid-on.b9b8bbf.svg)}.mx_CallView_callControls_button_vidOff:before{background-image:url(../../img/voip/vid-off.5552596.svg)}.mx_CallView_callControls_button_hangup:before{background-image:url(../../img/voip/hangup.9c3adeb.svg)}.mx_CallView_callControls_button_more{margin-left:auto}.mx_CallView_callControls_button_more:before{background-image:url(../../img/voip/more.5e8055e.svg)}.mx_CallView_callControls_button_more_hidden{margin-left:auto;cursor:auto}.mx_CallView_callControls_button_invisible{visibility:hidden;pointer-events:none;position:absolute}.mx_CallViewForRoom{overflow:hidden}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:8px}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper:hover .mx_CallViewForRoom_ResizeHandle{width:100%!important;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper:hover .mx_CallViewForRoom_ResizeHandle:after{content:"";margin-top:3px;border-radius:4px;height:4px;width:100%;max-width:64px;background-color:#2e2f32}.mx_DialPad{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:16px;gap:16px}.mx_DialPad_button{width:40px;height:40px;background-color:#e3e8f0;border-radius:40px;font-size:18px;font-weight:600;text-align:center;vertical-align:middle;line-height:40px}.mx_DialPad_deleteButton:before,.mx_DialPad_dialButton:before{content:"";display:inline-block;height:40px;width:40px;vertical-align:middle;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-position:center;mask-position:center;background-color:#fff}.mx_DialPad_deleteButton{background-color:#ff4b55}.mx_DialPad_deleteButton:before{-webkit-mask-image:url(../../img/element-icons/call/delete.833d785.svg);mask-image:url(../../img/element-icons/call/delete.833d785.svg);-webkit-mask-position:9px;mask-position:9px}.mx_DialPad_dialButton{background-color:#0dbd8b}.mx_DialPad_dialButton:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_DialPadContextMenu_header{margin-top:12px;margin-left:12px;margin-right:12px}.mx_DialPadContextMenu_title{color:#61708b;font-size:12px;font-weight:600}.mx_DialPadContextMenu_dialled{height:1em;font-size:18px;font-weight:600}.mx_DialPadContextMenu_dialPad{margin:16px}.mx_DialPadContextMenu_horizSep{position:relative}.mx_DialPadContextMenu_horizSep:before{content:"";position:absolute;width:100%;border-bottom:1px solid #e3e8f0}.mx_Dialog_dialPadWrapper .mx_Dialog{padding:0}.mx_DialPadModal{width:192px;height:368px}.mx_DialPadModal_header{margin-top:12px;margin-left:12px;margin-right:12px}.mx_DialPadModal_title{color:#61708b;font-size:12px;font-weight:600}.mx_DialPadModal_cancel{float:right;-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#c1c1c1;cursor:pointer}.mx_DialPadModal_field{border:none;margin:0}.mx_DialPadModal_field input{font-size:18px;font-weight:600}.mx_DialPadModal_dialPad{margin-left:16px;margin-right:16px;margin-top:16px}.mx_DialPadModal_horizSep{position:relative}.mx_DialPadModal_horizSep:before{content:"";position:absolute;width:100%;border-bottom:1px solid #e3e8f0}.mx_VideoFeed_voice{padding-bottom:52px;background-color:#27303a}.mx_VideoFeed_remote{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_VideoFeed_remote.mx_VideoFeed_video{background-color:#000}.mx_VideoFeed_local{max-width:25%;max-height:25%;position:absolute;right:10px;top:10px;z-index:100;border-radius:4px}.mx_VideoFeed_local.mx_VideoFeed_video{background-color:transparent}.mx_VideoFeed_mirror{-webkit-transform:scaleX(-1);transform:scaleX(-1)}
+@charset "utf-8";@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Regular.4232a67.woff2) format("woff2"),url(../../fonts/Inter/Inter-Regular.3a1908c.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:400;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Italic.b791861.woff2) format("woff2"),url(../../fonts/Inter/Inter-Italic.b13e6fe.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Medium.027d14e.woff2) format("woff2"),url(../../fonts/Inter/Inter-Medium.d1f6b6e.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:500;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-MediumItalic.8154ac2.woff2) format("woff2"),url(../../fonts/Inter/Inter-MediumItalic.1912849.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-SemiBold.0802d48.woff2) format("woff2"),url(../../fonts/Inter/Inter-SemiBold.8357f92.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:600;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-SemiBoldItalic.10a60d8.woff2) format("woff2"),url(../../fonts/Inter/Inter-SemiBoldItalic.1c70752.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Bold.fc28dff.woff2) format("woff2"),url(../../fonts/Inter/Inter-Bold.025b6f2.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:700;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-BoldItalic.2129bd0.woff2) format("woff2"),url(../../fonts/Inter/Inter-BoldItalic.80f8542.woff) format("woff")}@font-face{font-family:Inconsolata;font-style:normal;font-weight:400;src:local("Inconsolata Regular"),local("Inconsolata-Regular"),url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.2aafaa1.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Inconsolata;font-style:normal;font-weight:400;font-display:swap;src:local("Inconsolata Regular"),local("Inconsolata-Regular"),url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.5476fd3.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Inconsolata;font-style:normal;font-weight:700;font-display:swap;src:local("Inconsolata Bold"),local("Inconsolata-Bold"),url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.6bc411a.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Inconsolata;font-style:normal;font-weight:700;font-display:swap;src:local("Inconsolata Bold"),local("Inconsolata-Bold"),url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.000abc6.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.hljs-addition{background:#dfd}.hljs-deletion{background:#fdd}@supports ((-webkit-backdrop-filter:none) or (backdrop-filter:none)){.mx_LeftPanel{background-image:unset;background-image:var(--avatar-url,unset);background-repeat:no-repeat;background-size:cover;background-position:0 0}.mx_GroupFilterPanel,.mx_SpacePanel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.mx_LeftPanel .mx_LeftPanel_roomListContainer{-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}}.mx_RoomSublist_showNButton{background-color:transparent!important}a:hover,a:link,a:visited{text-decoration:none}:root{font-size:10px;--transition-short:.1s;--transition-standard:.3s}@media (prefers-reduced-motion){:root{--transition-short:0;--transition-standard:0}}html{height:100%;overflow:hidden}body{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.5rem;background-color:#fff;color:#2e2f32;border:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code,pre{font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji;font-size:100%!important}.error,.text-error,.text-warning,.warning{color:#ff4b55}.text-success{color:#0dbd8b}.text-muted{color:#61708b}b{font-weight:700}h2{color:#2e2f32;font-weight:400;font-size:1.8rem;margin-top:16px;margin-bottom:16px}a:hover,a:link,a:visited{color:#238cf5}input[type=password],input[type=search],input[type=text]{padding:9px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;font-weight:600;min-width:0}input[type=search].mx_textinput_icon,input[type=text].mx_textinput_icon{padding-left:36px;background-repeat:no-repeat;background-position:10px}input[type=search].mx_textinput_icon.mx_textinput_search,input[type=text].mx_textinput_icon.mx_textinput_search{background-image:url(../../img/feather-customised/search-input.044bfa7.svg)}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{opacity:1}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1}input::-ms-input-placeholder,textarea::-ms-input-placeholder{opacity:1}input::placeholder,textarea::placeholder{opacity:1}input[type=password],input[type=text],textarea{background-color:transparent;color:#2e2f32}textarea{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;color:#2e2f32}input[type=password]:focus,input[type=text]:focus,textarea:focus{outline:none;-webkit-box-shadow:none;box-shadow:none}:focus:not(.focus-visible){outline:none}.mx_Dialog .mx_textinput>input[type=search],.mx_Dialog .mx_textinput>input[type=text],.mx_MatrixChat .mx_textinput>input[type=search],.mx_MatrixChat .mx_textinput>input[type=text]{border:none;-webkit-box-flex:1;-ms-flex:1;flex:1;color:#2e2f32}.mx_Dialog .mx_textinput,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text],.mx_MatrixChat .mx_textinput,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent;color:#9fa9ba;border-radius:4px;border:1px solid rgba(46,47,50,.1);margin:9px}.mx_Dialog .mx_textinput,.mx_MatrixChat .mx_textinput{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Dialog .mx_textinput input::-webkit-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-webkit-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-webkit-input-placeholder,.mx_MatrixChat .mx_textinput input::-webkit-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-webkit-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-webkit-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::-moz-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-moz-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-moz-placeholder,.mx_MatrixChat .mx_textinput input::-moz-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-moz-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-moz-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input:-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]:-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]:-ms-input-placeholder,.mx_MatrixChat .mx_textinput input:-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]:-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]:-ms-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-ms-input-placeholder,.mx_MatrixChat .mx_textinput input::-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-ms-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::placeholder,.mx_MatrixChat .mx_textinput input::placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::placeholder{color:rgba(159,169,186,.75)}.dark-panel{background-color:#f2f5f8}.dark-panel .mx_textinput,.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{color:#9fa9ba;background-color:#fff;border:none}.light-panel .mx_textinput,.light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{color:#9fa9ba;background-color:#f2f5f8;border:none}::-moz-focus-inner{border:0}#mx_theme_accentColor{color:#0dbd8b}#mx_theme_secondaryAccentColor{color:#f2f5f8}#mx_theme_tertiaryAccentColor{color:#d3efe1}.mx_Dialog_wrapper{position:fixed;z-index:4000;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_Dialog{background-color:#fff;color:#747474;z-index:4012;font-weight:300;font-size:1.5rem;position:relative;padding:24px;max-height:80%;-webkit-box-shadow:2px 15px 30px 0 rgba(0,0,0,.48);box-shadow:2px 15px 30px 0 rgba(0,0,0,.48);border-radius:8px;overflow-y:auto}.mx_Dialog_fixedWidth{width:60vw;max-width:704px}.mx_Dialog_staticWrapper .mx_Dialog{z-index:4010}.mx_Dialog_background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(46,48,51,.38);opacity:.8;z-index:4011}.mx_Dialog_background.mx_Dialog_staticBackground{z-index:4009}.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background{opacity:.4}.mx_Dialog_lightbox .mx_Dialog_background{opacity:.95;background-color:#000}.mx_Dialog_lightbox .mx_Dialog{border-radius:0;background-color:transparent;width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:none;padding:0}.mx_Dialog_header{position:relative;margin-bottom:10px}.mx_Dialog_titleImage{vertical-align:sub;width:25px;height:25px;margin-left:-2px;margin-right:4px}.mx_Dialog_title{font-size:2.2rem;font-weight:600;line-height:3.6rem;color:#45474a}.mx_Dialog_header.mx_Dialog_headerWithButton>.mx_Dialog_title{text-align:center}.mx_Dialog_header.mx_Dialog_headerWithCancel>.mx_Dialog_title{margin-right:20px}.mx_Dialog_title.danger{color:#ff4b55}.mx_Dialog_cancelButton{-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#c1c1c1;cursor:pointer;position:absolute;top:10px;right:0}.mx_Dialog_content{margin:24px 0 68px;font-size:1.4rem;color:#2e2f32;word-wrap:break-word}.mx_Dialog_buttons{margin-top:20px;text-align:right}.mx_Dialog_buttons .mx_Dialog_buttons_additive{float:left}.mx_Dialog_buttons button,.mx_Dialog_buttons input[type=submit],.mx_Dialog button,.mx_Dialog input[type=submit]{vertical-align:middle;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;margin-left:0;margin-right:8px;font-weight:600;border:1px solid #0dbd8b;color:#0dbd8b;background-color:#fff;font-family:inherit}.mx_Dialog button:last-child{margin-right:0}.mx_Dialog_buttons button:focus,.mx_Dialog_buttons input[type=submit]:focus,.mx_Dialog button:focus,.mx_Dialog input[type=submit]:focus{-webkit-filter:brightness(105%);filter:brightness(105%)}.mx_Dialog_buttons button.mx_Dialog_primary,.mx_Dialog_buttons input[type=submit].mx_Dialog_primary,.mx_Dialog button.mx_Dialog_primary,.mx_Dialog input[type=submit].mx_Dialog_primary{color:#fff;background-color:#0dbd8b;min-width:156px}.mx_Dialog_buttons button.danger,.mx_Dialog_buttons input[type=submit].danger,.mx_Dialog button.danger,.mx_Dialog input[type=submit].danger{background-color:#ff4b55;border:1px solid #ff4b55;color:#fff}.mx_Dialog button.warning,.mx_Dialog input[type=submit].warning{border:1px solid #ff4b55;color:#ff4b55}.mx_Dialog_buttons button:disabled,.mx_Dialog_buttons input[type=submit]:disabled,.mx_Dialog button:disabled,.mx_Dialog input[type=submit]:disabled{background-color:#747474;border:1px solid #747474;opacity:.7}.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog{width:auto;border-radius:8px;padding:0;-webkit-box-shadow:none;box-shadow:none;overflow-x:hidden;overflow-y:hidden}.mx_GeneralButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;display:inline;margin:auto}.mx_linkButton{cursor:pointer;color:#0dbd8b}.mx_TextInputDialog_label{text-align:left;padding-bottom:12px}.mx_TextInputDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff}.mx_textButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;cursor:pointer;display:inline-block;outline:none;font-size:1.5rem;padding:0 1.5em}.mx_button_row{margin-top:69px}.mx_Username_color1{color:#368bd6}.mx_Username_color2{color:#ac3ba8}.mx_Username_color3{color:#0dbd8b}.mx_Username_color4{color:#e64f7a}.mx_Username_color5{color:#ff812d}.mx_Username_color6{color:#2dc2c5}.mx_Username_color7{color:#5c56f5}.mx_Username_color8{color:#74d12c}.mx_Tooltip_dark .mx_Tooltip_chevron:after{border-right-color:#27303a}html{scrollbar-color:rgba(0,0,0,.2) transparent}*{scrollbar-width:thin}::-webkit-scrollbar{width:6px;height:6px;background-color:transparent}::-webkit-scrollbar-thumb{border-radius:3px;background-color:rgba(0,0,0,.2)}.mx_AutoHideScrollbar:hover{scrollbar-color:rgba(0,0,0,.2) transparent}.mx_AutoHideScrollbar:hover::-webkit-scrollbar{background-color:transparent}.mx_AutoHideScrollbar:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2)}.mx_AutoHideScrollbar{overflow-x:hidden;overflow-y:auto;overflow-y:overlay;-ms-overflow-style:-ms-autohiding-scrollbar}.mx_AutoHideScrollbar::-webkit-scrollbar,.mx_AutoHideScrollbar::-webkit-scrollbar-thumb{background-color:transparent}.mx_AutoHideScrollbar{scrollbar-color:transparent transparent}.mx_CompatibilityPage{width:100%;height:100%;background-color:#e55}.mx_CompatibilityPage_box{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:500px;height:300px;border:1px solid;padding:10px;background-color:#fcc}.mx_ContextualMenu_wrapper{position:fixed;z-index:5000}.mx_ContextualMenu_background{position:fixed;top:0;left:0;width:100%;height:100%;opacity:1;z-index:5000}.mx_ContextualMenu{border-radius:8px;-webkit-box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);background-color:#fff;color:#2e2f32;position:absolute;font-size:1.4rem;z-index:5001}.mx_ContextualMenu_right{right:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_right{right:8px}.mx_ContextualMenu_chevron_right{position:absolute;right:-8px;top:0;width:0;height:0;border-top:8px solid transparent;border-left:8px solid #fff;border-bottom:8px solid transparent}.mx_ContextualMenu_left{left:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_left{left:8px}.mx_ContextualMenu_chevron_left{position:absolute;left:-8px;top:0;width:0;height:0;border-top:8px solid transparent;border-right:8px solid #fff;border-bottom:8px solid transparent}.mx_ContextualMenu_top{top:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_top{top:8px}.mx_ContextualMenu_chevron_top{position:absolute;left:0;top:-8px;width:0;height:0;border-left:8px solid transparent;border-bottom:8px solid #fff;border-right:8px solid transparent}.mx_ContextualMenu_bottom{bottom:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom{bottom:8px}.mx_ContextualMenu_chevron_bottom{position:absolute;left:0;bottom:-8px;width:0;height:0;border-left:8px solid transparent;border-top:8px solid #fff;border-right:8px solid transparent}.mx_ContextualMenu_spinner{display:block;margin:0 auto}.mx_CreateRoom{width:960px;margin-left:auto;margin-right:auto;color:#2e2f32}.mx_CreateRoom input,.mx_CreateRoom textarea{border-radius:3px;border:1px solid #c7c7c7;font-weight:300;font-size:1.3rem;padding:9px;margin-top:6px}.mx_CreateRoom_description{width:330px}.mx_CustomRoomTagPanel{background-color:hsla(0,0%,91%,.77);max-height:40vh}.mx_CustomRoomTagPanel_scroller{max-height:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CustomRoomTagPanel .mx_AccessibleButton{margin:0 auto;width:40px;padding:10px 0 9px;position:relative}.mx_CustomRoomTagPanel .mx_BaseAvatar_image{-webkit-box-sizing:border-box;box-sizing:border-box;width:40px;height:40px}.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected:before{content:"";height:56px;background-color:#238cf5;width:5px;position:absolute;left:-9px;border-radius:0 3px 3px 0;top:5px}.mx_FilePanel{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_FilePanel .mx_RoomView_messageListWrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_FilePanel .mx_RoomView_MessageList{width:100%}.mx_FilePanel .mx_EventTile_avatar,.mx_FilePanel .mx_RoomView_MessageList h2{display:none}.mx_FilePanel .mx_EventTile{word-break:break-word;margin-top:32px}.mx_FilePanel .mx_EventTile .mx_MImageBody{margin-right:0}.mx_FilePanel .mx_EventTile .mx_MFileBody{line-height:2.4rem}.mx_FilePanel .mx_EventTile .mx_MFileBody_download{padding-top:8px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.4rem;color:#acacac}.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;color:#747474}.mx_FilePanel .mx_EventTile .mx_MImageBody_size{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;font-size:1.4rem;text-align:right;white-space:nowrap}.mx_FilePanel .mx_EventTile_senderDetails{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:-2px}.mx_FilePanel .mx_EventTile_senderDetailsLink{text-decoration:none}.mx_FilePanel .mx_EventTile .mx_SenderProfile{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;line-height:normal;padding:0;font-size:1.4rem;opacity:1;color:#acacac}.mx_FilePanel .mx_EventTile .mx_MessageTimestamp{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;text-align:right;visibility:visible;position:static;font-size:1.4rem;opacity:1;color:#acacac}.mx_FilePanel .mx_EventTile_line{margin-right:0;padding-left:0}.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line{padding-left:0}.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line{background-color:#fff}.mx_FilePanel_empty:before{-webkit-mask-image:url(../../img/element-icons/room/files.5709c0c.svg);mask-image:url(../../img/element-icons/room/files.5709c0c.svg)}.mx_GenericErrorPage{width:100%;height:100%;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_GenericErrorPage_box{display:inline;width:500px;min-height:125px;border:1px solid #f22;padding:10px 10px 20px;background-color:#fcc}.mx_GroupFilterPanel{-webkit-box-flex:1;-ms-flex:1;flex:1;background-color:hsla(0,0%,91%,.77);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:0}.mx_GroupFilterPanel_items_selected{cursor:pointer}.mx_GroupFilterPanel .mx_GroupFilterPanel_divider{height:0;width:90%;border:none;border-bottom:1px solid #8d99a5}.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:100%}.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:6px}.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer>div{margin:6px 0}.mx_GroupFilterPanel .mx_TagTile{position:relative}.mx_GroupFilterPanel .mx_TagTile .mx_BetaDot{position:absolute;right:-13px;top:-11px}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype{padding:3px}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype{background-color:#fff;border-radius:6px}.mx_TagTile_selected_prototype .mx_TagTile_homeIcon:before{background-color:#2e2f32}.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon{background-color:rgba(92,100,112,.2);border-radius:48px}.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon:before{background-color:#5c6470}.mx_TagTile_homeIcon{width:32px;height:32px;position:relative}.mx_TagTile_homeIcon:before{-webkit-mask-image:url(../../img/element-icons/home.b706c0e.svg);mask-image:url(../../img/element-icons/home.b706c0e.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:21px;mask-size:21px;content:"";display:inline-block;width:32px;height:32px;position:absolute;top:calc(50% - 16px);left:calc(50% - 16px)}.mx_GroupFilterPanel .mx_TagTile_plus{margin-bottom:12px;height:32px;width:32px;border-radius:20px;background-color:rgba(92,100,112,.2);position:relative;display:block!important}.mx_GroupFilterPanel .mx_TagTile_plus:before{background-color:#5c6470;-webkit-mask-image:url(../../img/feather-customised/plus.38ae979.svg);mask-image:url(../../img/feather-customised/plus.38ae979.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected:before{content:"";height:100%;background-color:#0dbd8b;width:4px;position:absolute;left:-12px;border-radius:0 3px 3px 0}.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus{-webkit-filter:none;filter:none}.mx_TagTile_tooltip{position:relative;top:-30px;left:5px}.mx_TagTile_context_button{min-width:15px;height:15px;position:absolute;right:-5px;top:-8px;border-radius:8px;background-color:#dbdbdb;color:#000;font-weight:600;font-size:1rem;text-align:center;padding-top:1px;padding-left:4px;padding-right:4px}.mx_TagTile_avatar{position:relative}.mx_TagTile_badge{position:absolute;right:-4px;top:-2px;border-radius:8px;color:#fff;font-weight:600;font-size:1.4rem;padding:0 5px;background-color:#61708b}.mx_TagTile_badgeHighlight{background-color:#ff4b55}.mx_GroupView{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.mx_GroupView_error{margin:auto}.mx_GroupView_header{min-height:52px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:10px;padding-left:19px}.mx_GroupView_header_view{border-bottom:1px solid transparent;padding-bottom:0;padding-right:8px}.mx_GroupView_header_avatar,.mx_GroupView_header_info{display:table-cell;vertical-align:middle}.mx_GroupHeader_button{position:relative;margin-left:5px;margin-right:5px;cursor:pointer;height:20px;width:20px}.mx_GroupHeader_button:before{content:"";position:absolute;height:20px;width:20px;background-color:#91a1c0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_GroupHeader_editButton:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_GroupHeader_shareButton:before{-webkit-mask-image:url(../../img/element-icons/room/share.54dc3fb.svg);mask-image:url(../../img/element-icons/room/share.54dc3fb.svg)}.mx_GroupView_hostingSignup img{margin-left:5px}.mx_GroupView_editable{border-bottom:1px solid #c7c7c7!important;min-width:150px;cursor:text}.mx_GroupView_editable:focus{border-bottom:1px solid #0dbd8b!important;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable){color:#0dbd8b;cursor:pointer}.mx_GroupView_avatarPicker{position:relative}.mx_GroupView_avatarPicker_edit{position:absolute;top:50px;left:15px}.mx_GroupView_avatarPicker .mx_Spinner{width:48px;height:48px!important}.mx_GroupView_header_leftCol{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden}.mx_GroupView_header_rightCol{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_GroupView_textButton{display:inline-block}.mx_GroupView_header_groupid{font-weight:400;font-size:medium;padding-left:10px}.mx_GroupView_header_name{vertical-align:middle;width:100%;height:31px;color:#2e2f32;font-weight:700;font-size:2.2rem;padding-right:16px}.mx_GroupView_header_name,.mx_GroupView_header_shortDesc{overflow:hidden;padding-left:19px;text-overflow:ellipsis;border-bottom:1px solid transparent}.mx_GroupView_header_shortDesc{vertical-align:bottom;float:left;max-height:42px;color:#a2a2a2;font-weight:300;font-size:1.3rem;margin-right:16px}.mx_GroupView_avatarPicker_label{cursor:pointer}.mx_GroupView_cancelButton{padding-left:8px}.mx_GroupView_cancelButton img{position:relative;top:5px}.mx_GroupView input[type=radio]{margin:10px 10px 0}.mx_GroupView_label_text{display:inline-block;max-width:80%;vertical-align:.1em;line-height:2em}.mx_GroupView_body{margin:0 24px}.mx_GroupView_body,.mx_GroupView_rooms{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_GroupView_rooms{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_GroupView h3{text-transform:uppercase;color:#3d3b39;font-weight:600;font-size:1.3rem;margin-bottom:10px}.mx_GroupView_rooms_header .mx_AccessibleButton{padding-left:14px;margin-bottom:14px;height:24px}.mx_GroupView_group{border-top:1px solid transparent}.mx_GroupView_group_disabled{opacity:.3;pointer-events:none}.mx_GroupView_rooms_header_addRow_button{display:inline-block}.mx_GroupView_rooms_header_addRow_button object{pointer-events:none}.mx_GroupView_rooms_header_addRow_label{display:inline-block;vertical-align:top;line-height:2.4rem;padding-left:28px;color:#0dbd8b}.mx_GroupView_rooms .mx_RoomDetailList{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-top:1px solid transparent;padding-top:10px;word-break:break-word}.mx_GroupView .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_GroupView_membershipSection{color:#888;margin-top:10px}.mx_GroupView_membershipSubSection{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:8px}.mx_GroupView_membershipSubSection .mx_Spinner{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_GroupView_membershipSection_description{line-height:3.4rem}.mx_GroupView_membershipSection_description .mx_BaseAvatar{margin-right:10px}.mx_GroupView_membershipSection .mx_GroupView_textButton{margin-right:0;margin-top:0;margin-left:8px}.mx_GroupView_memberSettings_toggle label{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_GroupView_memberSettings input{margin-right:6px}.mx_GroupView_featuredThings{margin-top:20px}.mx_GroupView_featuredThings_header{font-weight:700;font-size:120%;margin-bottom:20px}.mx_GroupView_featuredThings_category{font-weight:700;font-size:110%;margin-top:10px}.mx_GroupView_featuredThings_container{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_GroupView_featuredThing,.mx_GroupView_featuredThings_addButton{display:table-cell;text-align:center;width:100px;margin:0 20px}.mx_GroupView_featuredThing{position:relative}.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton{position:absolute;top:-7px;right:11px;opacity:.4}.mx_GroupView_featuredThing .mx_BaseAvatar{vertical-align:baseline;vertical-align:initial}.mx_GroupView_featuredThings_addButton object{pointer-events:none}.mx_GroupView_featuredThing_name{word-wrap:break-word}.mx_GroupView_uploadInput{display:none}.mx_GroupView_body .mx_AutoHideScrollbar>*{margin:11px 50px 50px 68px}.mx_GroupView_groupDesc textarea{width:100%;max-width:100%;height:150px}.mx_GroupView_changeDelayWarning,.mx_GroupView_groupDesc_placeholder{background-color:#f7f7f7;color:#888;border-radius:10px;text-align:center;margin:20px 0}.mx_GroupView_groupDesc_placeholder{padding:100px 20px;cursor:pointer}.mx_GroupView_changeDelayWarning{padding:40px 20px}.mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar>:not(.mx_MemberInfo_avatar){padding-left:16px;padding-right:16px}.mx_HeaderButtons{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_buttons+.mx_HeaderButtons:before{content:unset}.mx_HeaderButtons:before{content:"";background-color:#91a1c0;opacity:.5;margin:6px 8px;border-radius:1px;width:1px}.mx_HomePage{max-width:960px;width:100%;height:100%;margin-left:auto;margin-right:auto}.mx_HomePage_default{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_HomePage_default .mx_HomePage_default_wrapper{margin:auto}.mx_HomePage_default img{height:48px}.mx_HomePage_default h1{font-weight:600;font-size:3.2rem;line-height:4.4rem;margin-bottom:4px}.mx_HomePage_default h4{margin-top:4px;font-weight:600;font-size:1.8rem;line-height:2.5rem;color:#61708b}.mx_HomePage_default .mx_MiniAvatarUploader{margin:0 auto}.mx_HomePage_default .mx_HomePage_default_buttons{margin:60px auto 0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton{padding:73px 8px 15px;width:160px;height:132px;margin:20px;position:relative;display:inline-block;border-radius:8px;vertical-align:top;word-break:break-word;-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:600;font-size:1.5rem;line-height:2rem;color:#fff;background-color:#0dbd8b}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:before{top:20px;left:60px;width:40px;height:40px;content:"";position:absolute;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_sendDm:before{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_explore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_createGroup:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg)}.mx_LeftPanel{background-color:hsla(0,0%,96.1%,.9);min-width:206px;max-width:50%;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:56px;flex-basis:56px;height:100%;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer,.mx_LeftPanel .mx_LeftPanel_roomListContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_LeftPanel .mx_LeftPanel_roomListContainer{background-color:hsla(0,0%,96.1%,.9);-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;min-width:0;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader{padding:12px;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer{overflow-y:hidden;overflow-x:scroll;margin:12px 12px 0;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_leftOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000));-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%);mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000));mask-image:linear-gradient(90deg,transparent,#000 5%)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(#000),color-stop(95%,#000),to(transparent));-webkit-mask-image:linear-gradient(90deg,#000,#000 95%,transparent);mask-image:-webkit-gradient(linear,left top,right top,from(#000),color-stop(95%,#000),to(transparent));mask-image:linear-gradient(90deg,#000,#000 95%,transparent)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000),color-stop(95%,#000),to(transparent));-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000),color-stop(95%,#000),to(transparent));mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer{margin-left:12px;margin-right:12px;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_focused+.mx_LeftPanel_exploreButton,.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_hasQuery+.mx_LeftPanel_exploreButton{-ms-flex-preferred-size:0;flex-basis:0;margin:0;width:0}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_focused+.mx_LeftPanel_exploreButton:before,.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_hasQuery+.mx_LeftPanel_exploreButton:before{content:none}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton{width:32px;height:32px;border-radius:8px;background-color:rgba(141,151,165,.2);position:relative;margin-left:8px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton:before{content:"";position:absolute;top:8px;left:8px;width:16px;height:16px;-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#737d8c}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton.mx_LeftPanel_exploreButton_space:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListFilterCount{font-size:1.3rem;font-weight:600;margin-left:12px;margin-top:14px;margin-bottom:-4px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper{overflow:hidden;margin-top:10px;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyBottom{padding-bottom:32px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyTop{padding-top:32px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_actualRoomListContainer{position:relative;height:100%}.mx_LeftPanel.mx_LeftPanel_minimized{min-width:unset;width:unset!important}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer{width:68px}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton{margin-left:0;margin-top:8px;background-color:transparent}.mx_LeftPanelWidget{margin-left:8px;margin-bottom:4px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:24px;color:#8d99a5;margin-top:4px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_stickable{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:calc(100% - 16px);line-height:1.6rem;font-size:1.3rem;font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn{display:inline-block;position:relative;width:14px;height:14px;margin-right:6px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn:before{content:"";width:18px;height:18px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn.mx_LeftPanelWidget_collapseBtn_collapsed:before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox{position:relative;-ms-flex-direction:column;flex-direction:column;overflow:visible}.mx_LeftPanelWidget .mx_AppTileFullWidth,.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_LeftPanelWidget .mx_AppTileFullWidth{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;overflow:hidden;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-mask-image:linear-gradient(0deg,transparent,#000 4px);mask-image:linear-gradient(0deg,transparent,#000 4px)}.mx_LeftPanelWidget .mx_LeftPanelWidget_resizerHandle{cursor:ns-resize;border-radius:3px;width:unset!important;height:4px!important;position:absolute;top:-24px!important;left:calc(50% - 32px)!important;right:calc(50% - 32px)!important}.mx_LeftPanelWidget:hover .mx_LeftPanelWidget_resizerHandle{opacity:.8;background-color:#2e2f32}.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton{margin-left:8px;margin-right:7px;position:relative;width:24px;height:24px;border-radius:32px}.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton:before{content:"";width:16px;height:16px;position:absolute;top:4px;left:4px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg);background:#61708b}.mx_LeftPanelWidget_maximizeButtonTooltip{margin-top:-3px}.mx_MainSplit{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-width:0;min-height:0;height:100%}.mx_MainSplit>.mx_RightPanel_ResizeWrapper{padding:5px;margin-left:8px;height:calc(100vh - 51px)}.mx_MainSplit>.mx_RightPanel_ResizeWrapper:hover .mx_RightPanel_ResizeHandle{top:50%!important;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px!important;width:4px!important;border-radius:4px!important;background-color:#2e2f32;opacity:.8}.mx_MatrixChat_splash{position:relative;height:100%}.mx_MatrixChat_splashButtons{text-align:center;width:100%;position:absolute;bottom:30px}.mx_MatrixChat_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.mx_MatrixToolbar{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;height:40px}.mx_MatrixChat{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.mx_MatrixChat_syncError{color:#fff;background-color:#df2a8b;border-radius:5px;display:table;padding:30px;position:absolute;top:100px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.mx_MatrixChat>:not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle){background-color:#fff;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;height:100%}.mx_MatrixChat>.mx_ResizeHandle_horizontal:hover{position:relative}.mx_MatrixChat>.mx_ResizeHandle_horizontal:hover:before{position:absolute;left:6px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px;width:4px;border-radius:4px;content:" ";background-color:#2e2f32;opacity:.8}.mx_MyGroups{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_MyGroups .mx_BetaCard{margin:0 72px;max-width:760px}.mx_MyGroups .mx_RoomHeader_simpleHeader{margin-left:0}.mx_MyGroups_header{margin-left:2px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_MyGroups>:not(.mx_RoomHeader):not(.mx_BetaCard){max-width:960px;margin:40px}.mx_MyGroups_headerCard{-webkit-box-flex:1;-ms-flex:1 0 50%;flex:1 0 50%;margin-bottom:30px;min-width:400px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:13px;height:40px;width:40px;border-radius:20px;background-color:rgba(92,100,112,.2);position:relative}.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button:before{background-color:#5c6470;-webkit-mask:url(../../img/icons-create-room.817ede2.svg);mask:url(../../img/icons-create-room.817ede2.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:80%;mask-size:80%;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_MyGroups_headerCard_header{font-weight:700;margin-bottom:10px}.mx_MyGroups_headerCard_content{padding-right:15px}.mx_MyGroups_joinBox{visibility:hidden;height:0;margin:0}.mx_MyGroups_content{margin-left:2px;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto}.mx_MyGroups_scrollable{overflow-y:inherit}.mx_MyGroups_placeholder{background-color:#f7f7f7;color:#888;line-height:40rem;border-radius:10px;text-align:center}.mx_MyGroups_joinedGroups{border-top:1px solid transparent;overflow-x:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-line-pack:start;align-content:flex-start}.mx_MyGroups_joinedGroups .mx_GroupTile{min-width:300px;max-width:33%;-webkit-box-flex:1;-ms-flex:1 0 300px;flex:1 0 300px;height:75px;margin:10px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;cursor:pointer}.mx_GroupTile_avatar{cursor:-webkit-grab,-webkit-grab;cursor:grab,-webkit-grab}.mx_GroupTile_profile{margin-left:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_GroupTile_profile .mx_GroupTile_desc,.mx_GroupTile_profile .mx_GroupTile_groupId,.mx_GroupTile_profile .mx_GroupTile_name{padding-right:10px}.mx_GroupTile_profile .mx_GroupTile_name{margin:0;font-size:1.5rem}.mx_GroupTile_profile .mx_GroupTile_groupId{font-size:1.3rem;opacity:.7}.mx_GroupTile_profile .mx_GroupTile_desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:1.3rem;max-height:36px;overflow:hidden}.mx_NonUrgentToastContainer{position:absolute;bottom:30px;left:28px;z-index:101}.mx_NonUrgentToastContainer .mx_NonUrgentToastContainer_toast{padding:10px 12px;border-radius:8px;width:320px;font-size:1.3rem;margin-top:8px;background-color:#17191c;color:#fff}.mx_NotificationPanel{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_NotificationPanel .mx_RoomView_messageListWrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_NotificationPanel .mx_RoomView_MessageList{width:100%}.mx_NotificationPanel .mx_RoomView_MessageList h2{margin-left:0}.mx_NotificationPanel .mx_EventTile{word-break:break-word;position:relative;padding-bottom:18px}.mx_NotificationPanel .mx_EventTile:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection):after{position:absolute;bottom:0;left:0;right:0;background-color:#8d99a5;height:1px;opacity:.4;content:""}.mx_NotificationPanel .mx_EventTile_roomName{font-weight:700;font-size:1.4rem}.mx_NotificationPanel .mx_EventTile_roomName>*{vertical-align:middle}.mx_NotificationPanel .mx_EventTile_roomName>.mx_BaseAvatar{margin-right:8px}.mx_NotificationPanel .mx_EventTile_roomName a{color:#2e2f32}.mx_NotificationPanel .mx_EventTile_avatar{display:none}.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp,.mx_NotificationPanel .mx_EventTile .mx_SenderProfile{color:#2e2f32;font-size:1.2rem;display:inline;padding-left:0}.mx_NotificationPanel .mx_EventTile_senderDetails{padding-left:36px;position:relative}.mx_NotificationPanel .mx_EventTile_senderDetails a{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_NotificationPanel .mx_EventTile_roomName a,.mx_NotificationPanel .mx_EventTile_senderDetails a{text-decoration:none!important}.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp{visibility:visible;position:static;display:inline}.mx_NotificationPanel .mx_EventTile_line{margin-right:0;padding:0 0 0 36px}.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line{padding-left:0}.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line{background-color:#fff}.mx_NotificationPanel .mx_EventTile_content{margin-right:0}.mx_NotificationPanel_empty:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RightPanel{overflow-x:hidden;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-radius:8px;padding:4px 0;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%}.mx_RightPanel .mx_RoomView_MessageList{padding:14px 18px}.mx_RightPanel_header{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;border-bottom:1px solid transparent;-webkit-box-flex:0;-ms-flex:0 0 52px;flex:0 0 52px}.mx_RightPanel_headerButtonGroup{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;background-color:#fff;padding:0 9px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RightPanel_headerButton{cursor:pointer;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:1px;margin-right:1px;height:32px;width:32px;position:relative;border-radius:100%}.mx_RightPanel_headerButton:before{content:"";position:absolute;top:4px;left:4px;height:24px;width:24px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_RightPanel_headerButton:hover{background:rgba(13,189,139,.1)}.mx_RightPanel_headerButton:hover:before{background-color:#0dbd8b}.mx_RightPanel_notifsButton:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_roomSummaryButton:before{-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_groupMembersButton:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_roomsButton:before{-webkit-mask-image:url(../../img/element-icons/community-rooms.8f0b6c9.svg);mask-image:url(../../img/element-icons/community-rooms.8f0b6c9.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_headerButton_highlight:before{background-color:#0dbd8b!important}.mx_RightPanel_headerButton_badge{font-size:.8rem;border-radius:8px;color:#fff;background-color:#0dbd8b;font-weight:700;position:absolute;top:-4px;left:20px;padding:2px 4px}.mx_RightPanel_collapsebutton{-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:right;height:16px;border:none}.mx_RightPanel .mx_GroupRoomList,.mx_RightPanel .mx_MemberInfo,.mx_RightPanel .mx_MemberList,.mx_RightPanel_blank{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RightPanel .mx_RoomView_messagePanelSpinner{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin:auto}.mx_RightPanel_empty{margin-right:-28px}.mx_RightPanel_empty h2{font-weight:700;margin:16px 0}.mx_RightPanel_empty h2,.mx_RightPanel_empty p{font-size:1.4rem}.mx_RightPanel_empty:before{content:"";display:block;margin:11px auto 29px;height:42px;width:42px;background-color:#91a1c0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_RightPanel_scopeHeader{margin:24px;text-align:center;font-weight:600;font-size:1.8rem;line-height:2.2rem}.mx_RightPanel_scopeHeader .mx_BaseAvatar{margin-right:8px;vertical-align:middle}.mx_RightPanel_scopeHeader .mx_BaseAvatar_image{border-radius:8px}.mx_RoomDirectory_dialogWrapper>.mx_Dialog{max-width:960px;height:100%}.mx_RoomDirectory_dialog{height:100%;flex-direction:column}.mx_RoomDirectory,.mx_RoomDirectory_dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column}.mx_RoomDirectory{margin-bottom:12px;color:#2e2f32;word-break:break-word}.mx_RoomDirectory,.mx_RoomDirectory_list{flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_RoomDirectory_list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column}.mx_RoomDirectory_list .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_RoomDirectory_listheader{display:block;margin-top:13px}.mx_RoomDirectory_searchbox{-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important}.mx_RoomDirectory_listheader .mx_NetworkDropdown{-webkit-box-flex:0;-ms-flex:0 0 200px;flex:0 0 200px}.mx_RoomDirectory_tableWrapper{overflow-y:auto;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RoomDirectory_table{color:#2e2f32;display:grid;font-size:1.2rem;grid-template-columns:-webkit-max-content auto -webkit-max-content -webkit-max-content -webkit-max-content;grid-template-columns:max-content auto max-content max-content max-content;grid-row-gap:24px;row-gap:24px;text-align:left;width:100%}.mx_RoomDirectory_roomAvatar{padding:2px 14px 0 0}.mx_RoomDirectory_roomMemberCount{-ms-flex-item-align:center;align-self:center;color:#747474;padding:3px 10px 0}.mx_RoomDirectory_roomMemberCount:before{background-color:#747474;display:inline-block;vertical-align:text-top;margin-right:2px;content:"";-webkit-mask:url(../../img/feather-customised/user.7a4d23d.svg);mask:url(../../img/feather-customised/user.7a4d23d.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:80%;mask-size:80%;width:16px;height:16px}.mx_RoomDirectory_join,.mx_RoomDirectory_preview{-ms-flex-item-align:center;align-self:center;white-space:nowrap}.mx_RoomDirectory_name{display:inline-block;font-size:1.8rem;font-weight:600}.mx_RoomDirectory_perms{display:inline-block}.mx_RoomDirectory_perm{border-radius:10px;display:inline-block;height:20px;line-height:2rem;padding:0 5px;color:#fff;background-color:#aaa}.mx_RoomDirectory_topic{cursor:auto;color:#747474;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.mx_RoomDirectory_alias{font-size:1.2rem;color:#a2a2a2}.mx_RoomDirectory_table tr{padding-bottom:10px;cursor:pointer}.mx_RoomDirectory .mx_RoomView_MessageList{padding:0}.mx_RoomDirectory>span{font-size:1.5rem;margin-top:0}.mx_RoomDirectory>span .mx_AccessibleButton{padding:0}.mx_RoomSearch{-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:8px;background-color:rgba(141,151,165,.2);border:1px solid transparent;height:28px;padding:1px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSearch .mx_RoomSearch_icon{width:16px;height:16px;-webkit-mask:url(../../img/element-icons/roomlist/search.3774248.svg);mask:url(../../img/element-icons/roomlist/search.3774248.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#737d8c;margin-left:7px}.mx_RoomSearch .mx_RoomSearch_input{border:none!important;-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important;color:#2e2f32!important;padding:0;height:100%;width:100%;font-size:1.2rem;line-height:1.6rem}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-webkit-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-moz-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded):-ms-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-ms-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::placeholder{color:#8d99a5!important}.mx_RoomSearch.mx_RoomSearch_hasQuery{border-color:#737d8c}.mx_RoomSearch.mx_RoomSearch_focused{-webkit-box-shadow:0 0 4px 4px rgba(0,132,255,.5);box-shadow:0 0 4px 4px rgba(0,132,255,.5);border-color:transparent}.mx_RoomSearch.mx_RoomSearch_focused,.mx_RoomSearch.mx_RoomSearch_hasQuery{background-color:#fff}.mx_RoomSearch.mx_RoomSearch_focused .mx_RoomSearch_clearButton,.mx_RoomSearch.mx_RoomSearch_hasQuery .mx_RoomSearch_clearButton{width:16px;height:16px;-webkit-mask-image:url(../../img/element-icons/roomlist/search-clear.6164d97.svg);mask-image:url(../../img/element-icons/roomlist/search-clear.6164d97.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#737d8c;margin-right:8px}.mx_RoomSearch .mx_RoomSearch_clearButton{width:0;height:0}.mx_RoomSearch.mx_RoomSearch_minimized{border-radius:32px;height:auto;width:auto;padding:8px}.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_icon{margin-left:0}.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages){margin-left:65px;min-height:50px}.mx_RoomStatusBar_typingIndicatorAvatars{width:52px;margin-top:-1px;text-align:left}.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image{margin-right:-12px;border:1px solid #fff}.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial{padding-left:1px;padding-top:1px}.mx_RoomStatusBar_typingIndicatorRemaining{display:inline-block;color:#acacac;background-color:#ddd;border:1px solid #fff;border-radius:40px;width:24px;height:24px;line-height:2.4rem;font-size:.8em;vertical-align:top;text-align:center;position:absolute}.mx_RoomStatusBar_scrollDownIndicator{cursor:pointer;padding-left:1px}.mx_RoomStatusBar_unreadMessagesBar{padding-top:10px;color:#ff4b55;cursor:pointer}.mx_RoomStatusBar_connectionLostBar{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:19px;min-height:58px}.mx_RoomStatusBar_unsentMessages>div[role=alert]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:70px;margin:12px;padding-left:16px;background-color:#f3f8fd;border-radius:4px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge{margin-right:12px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge{width:24px!important;height:24px!important;border-radius:24px!important}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge .mx_NotificationBadge_count{font-size:1.6rem!important}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentTitle{color:#ff4b55;font-size:1.5rem}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentDescription{font-size:1.2rem}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right;margin-right:22px;color:#61708b}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton{padding:5px 10px 5px 28px;display:inline-block;position:relative}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:nth-child(2){border-left:1px solid #e3e8f0}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:before{content:"";position:absolute;left:10px;background-color:#61708b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentCancelAllBtn:before{-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);width:12px;height:16px;top:calc(50% - 8px)}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn{padding-left:34px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn:before{-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg);width:18px;height:18px;top:calc(50% - 9px)}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner{vertical-align:middle;margin-right:5px;top:1px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner+span{margin-right:10px}.mx_RoomStatusBar_connectionLostBar img{padding-left:10px;padding-right:10px;vertical-align:middle;float:left}.mx_RoomStatusBar_connectionLostBar_title{color:#ff4b55}.mx_RoomStatusBar_connectionLostBar_desc{color:#2e2f32;font-size:1.3rem;opacity:.5;padding-bottom:20px}.mx_RoomStatusBar_resend_link{color:#2e2f32!important;text-decoration:underline!important;cursor:pointer}.mx_RoomStatusBar_typingBar{height:50px;line-height:5rem;color:#2e2f32;opacity:.5;overflow-y:hidden;display:block}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages){min-height:40px}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_indicator{margin-top:10px}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_typingBar{height:40px;line-height:4rem}.mx_RoomView{word-wrap:break-word;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@-webkit-keyframes mx_RoomView_fileDropTarget_animation{0%{opacity:0}to{opacity:.95}}@keyframes mx_RoomView_fileDropTarget_animation{0%{opacity:0}to{opacity:.95}}.mx_RoomView_fileDropTarget{min-width:0;width:100%;height:100%;font-size:1.8rem;text-align:center;pointer-events:none;background-color:#fff;opacity:.95;position:absolute;z-index:3000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-animation:mx_RoomView_fileDropTarget_animation;animation:mx_RoomView_fileDropTarget_animation;-webkit-animation-duration:.5s;animation-duration:.5s}@-webkit-keyframes mx_RoomView_fileDropTarget_image_animation{0%{width:0}to{width:32px}}@keyframes mx_RoomView_fileDropTarget_image_animation{0%{width:0}to{width:32px}}.mx_RoomView_fileDropTarget_image{-webkit-animation:mx_RoomView_fileDropTarget_image_animation;animation:mx_RoomView_fileDropTarget_image_animation;-webkit-animation-duration:.5s;animation-duration:.5s;margin-bottom:16px}.mx_RoomView_auxPanel{min-width:0;width:100%;margin:0 auto;overflow:auto;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomView_auxPanel_fullHeight{position:absolute;top:0;bottom:0;left:0;right:0;z-index:3000;background-color:#fff}.mx_RoomView_auxPanel_hiddenHighlights{border-bottom:1px solid transparent;padding:10px 26px;color:#ff4b55;cursor:pointer}.mx_RoomView_auxPanel_apps{max-width:1920px!important}.mx_RoomView .mx_MainSplit,.mx_RoomView_messagePanel{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RoomView_messagePanel{width:100%;overflow-y:auto;overflow-anchor:none}.mx_RoomView_messagePanelSearchSpinner{-webkit-box-flex:1;-ms-flex:1;flex:1;background-image:url(../../img/typing-indicator-2x.0eb9f0e.gif);background-position:center 367px;background-size:25px;background-repeat:no-repeat;position:relative}.mx_RoomView_messagePanelSearchSpinner:before{background-color:#888;-webkit-mask:url(../../img/feather-customised/search-input.044bfa7.svg);mask:url(../../img/feather-customised/search-input.044bfa7.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:50px;mask-size:50px;content:"";position:absolute;top:286px;left:0;right:0;height:50px}.mx_RoomView_body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_RoomView_body .mx_RoomView_messagePanel,.mx_RoomView_body .mx_RoomView_messagePanelSearchSpinner,.mx_RoomView_body .mx_RoomView_messagePanelSpinner{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.mx_RoomView_body .mx_RoomView_timeline{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomView_statusArea{width:100%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;max-height:0;background-color:#fff;z-index:1000;overflow:hidden;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.mx_RoomView_statusArea_expanded{max-height:100px}.mx_RoomView_statusAreaBox{margin:auto;min-height:50px}.mx_RoomView_statusAreaBox_line{margin-left:65px;border-top:1px solid transparent;height:1px}.mx_RoomView_messageListWrapper{min-height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_RoomView_searchResultsPanel a{text-decoration:none;color:inherit}.mx_RoomView_empty{font-size:1.3rem;padding:0 24px;margin-right:30px;text-align:center;margin-bottom:80px}.mx_RoomView_MessageList{list-style-type:none;padding:18px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_RoomView_MessageList li{clear:both}li.mx_RoomView_myReadMarker_container{height:0;margin:0;padding:0;border:0}hr.mx_RoomView_myReadMarker{border-top:1px solid #0dbd8b;border-bottom:1px solid #0dbd8b;margin-top:0;position:relative;top:-1px;z-index:1;-webkit-transition:width easeinsine .4s 1s,opacity easeinsine .4s 1s;transition:width easeinsine .4s 1s,opacity easeinsine .4s 1s;width:99%;opacity:1}.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner{background-color:#fff}.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename{color:#fff;opacity:1}.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line{margin-top:2px;border:none;height:0}.mx_RoomView_inCall .mx_MessageComposer_wrapper{border-top:2px hidden;padding-top:1px}.mx_RoomView_voipChevron{position:absolute;bottom:-11px;right:11px}.mx_RoomView_voipButton{float:right;margin-right:13px;margin-top:13px;cursor:pointer}.mx_RoomView_voipButton object{pointer-events:none}.mx_RoomView .mx_MessageComposer{width:100%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:2px}.mx_RoomView_ongoingConfCallNotification{width:100%;text-align:center;background-color:#ff4b55;color:#fff;font-weight:700;padding:6px 0;cursor:pointer}.mx_RoomView_ongoingConfCallNotification a{color:#fff!important}.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList{margin-bottom:4px}.mx_MatrixChat_useCompactLayout .mx_RoomView_statusAreaBox{min-height:42px}.mx_ScrollPanel .mx_RoomView_MessageList{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_SearchBox{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0}.mx_SearchBox.mx_SearchBox_blurred:not(:hover){background-color:transparent}.mx_SearchBox .mx_SearchBox_closeButton{cursor:pointer;background-image:url(../../img/icons-close.11ff07c.svg);background-repeat:no-repeat;width:16px;height:16px;background-position:50%;padding:9px}.mx_SpacePanel{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;background-color:hsla(0,0%,91%,.77);padding:0;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto}.mx_SpacePanel .mx_SpacePanel_spaceTreeWrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:8px 8px 16px 0}.mx_SpacePanel .mx_SpacePanel_toggleCollapse{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:40px;height:40px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:32px;mask-size:32px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;margin-left:16px;margin-bottom:12px;background-color:#8d99a5;-webkit-mask-image:url(../../img/element-icons/expand-space-panel.e6f74b9.svg);mask-image:url(../../img/element-icons/expand-space-panel.e6f74b9.svg)}.mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.mx_SpacePanel ul{margin:0;list-style:none;padding:0}.mx_SpacePanel ul>.mx_SpaceItem{padding-left:16px}.mx_SpacePanel .mx_SpaceButton_toggleCollapse{cursor:pointer}.mx_SpacePanel .mx_SpaceTreeLevel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:250px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_SpacePanel .mx_SpaceItem{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:wrap;flex-flow:wrap}.mx_SpacePanel .mx_SpaceItem.mx_SpaceItem_narrow{-ms-flex-item-align:baseline;align-self:baseline}.mx_SpacePanel .mx_SpaceItem.collapsed>.mx_SpaceButton>.mx_SpaceButton_toggleCollapse{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_SpacePanel .mx_SpaceItem.collapsed>.mx_SpaceTreeLevel{display:none}.mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces)>.mx_SpaceButton{margin-left:16px;min-width:40px}.mx_SpacePanel .mx_SpaceButton{border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:4px 4px 4px 0;width:100%}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper{background-color:#fff}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper{padding:1px;border:3px solid #737d8c}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:12px;padding:4px}.mx_SpacePanel .mx_SpaceButton:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper{width:100%;padding-right:16px;overflow:hidden}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:8px;white-space:nowrap;display:block;text-overflow:ellipsis;overflow:hidden;padding-right:8px;font-size:1.4rem;line-height:1.8rem}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse{width:16px;height:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon{width:32px;min-width:32px;height:32px;border-radius:8px;position:relative}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon:before{position:absolute;content:"";width:32px;height:32px;top:0;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:18px;mask-size:18px}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon{background-color:#fff}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon:before{background-color:#3f3d3d;-webkit-mask-image:url(../../img/element-icons/home.b706c0e.svg);mask-image:url(../../img/element-icons/home.b706c0e.svg)}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon{background-color:#0dbd8b;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon:before{background-color:#fff;-webkit-mask-image:url(../../img/element-icons/plus.62cc275.svg);mask-image:url(../../img/element-icons/plus.62cc275.svg);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon{background-color:#c1c6cd}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.mx_SpacePanel .mx_SpaceButton .mx_BaseAvatar_image{border-radius:8px}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton{width:20px;min-width:20px;height:20px;margin-top:auto;margin-bottom:auto;display:none;position:absolute;right:4px}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton:before{top:2px;left:2px;content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);background:#2e2f32}.mx_SpacePanel .mx_SpacePanel_badgeContainer{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge{margin:0 2px}.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot{margin:0 7px}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer{right:0;top:0}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge{background-clip:padding-box}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot{margin:0 -1px 0 0;border:3px solid hsla(0,0%,91%,.77)}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_2char,.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_3char{margin:-5px -5px 0 0;border:2px solid hsla(0,0%,91%,.77)}.mx_SpacePanel.collapsed .mx_SpaceButton.mx_SpaceButton_active .mx_SpacePanel_badgeContainer{right:-3px;top:-3px}.mx_SpacePanel:not(.collapsed) .mx_SpacePanel_badgeContainer{position:absolute;right:4px}.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer{width:0;height:0;display:none}.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton{display:block}.mx_SpacePanel>.mx_AutoHideScrollbar>.mx_SpaceButton,.mx_SpacePanel>.mx_AutoHideScrollbar>.mx_SpaceButton.mx_SpaceButton_active:before{height:32px}.mx_SpacePanel>.mx_AutoHideScrollbar>ul{padding-left:0}.mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_header{margin:12px 16px;font-weight:600;font-size:1.5rem;line-height:1.8rem}.mx_SpacePanel_contextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton{color:#0dbd8b}.mx_SpacePanel_contextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton .mx_SpacePanel_iconInvite:before{background-color:#0dbd8b;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconLeave:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconMembers:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconPlus:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconHash:before{-webkit-mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_SpacePanel_sharePublicSpace{margin:0}.mx_SpaceRoomDirectory_dialogWrapper>.mx_Dialog{max-width:960px;height:100%}.mx_SpaceRoomDirectory{height:100%;margin-bottom:12px;color:#2e2f32;word-break:break-word;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_SpaceRoomDirectory,.mx_SpaceRoomDirectory .mx_Dialog_title,.mx_SpaceRoomView_landing .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar,.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar{margin-right:12px;-ms-flex-item-align:center;align-self:center}.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar_image,.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar_image{border-radius:8px}.mx_SpaceRoomDirectory .mx_Dialog_title>div>h1,.mx_SpaceRoomView_landing .mx_Dialog_title>div>h1{font-weight:600;font-size:1.8rem;line-height:2.2rem;margin:0}.mx_SpaceRoomDirectory .mx_Dialog_title>div>div,.mx_SpaceRoomView_landing .mx_Dialog_title>div>div{font-weight:400;color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_SpaceRoomDirectory .mx_AccessibleButton_kind_link,.mx_SpaceRoomView_landing .mx_AccessibleButton_kind_link{padding:0}.mx_SpaceRoomDirectory .mx_SearchBox,.mx_SpaceRoomView_landing .mx_SearchBox{margin:24px 0 16px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults{text-align:center}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults>div,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults>div{font-size:1.5rem;line-height:2.4rem;color:#737d8c}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:32px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.5rem;line-height:2.4rem;color:#2e2f32}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton{padding:4px 12px;font-weight:400}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton+.mx_AccessibleButton,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton+.mx_AccessibleButton{margin-left:16px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_primary_outline,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_primary_outline{padding:3px 12px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader>span,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader>span{margin-left:auto}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error{position:relative;font-weight:600;color:#ff4b55;font-size:1.5rem;line-height:1.8rem;margin:20px auto 12px;padding-left:24px;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error:before,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error:before{content:"";position:absolute;height:16px;width:16px;left:0;background-image:url(../../img/element-icons/warning-badge.de1033e.svg)}.mx_SpaceRoomDirectory_list{margin-top:16px;padding-bottom:40px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount>h3{display:inline;font-weight:600;font-size:1.8rem;line-height:2.2rem;color:#2e2f32}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount>span{margin-left:8px;font-size:1.5rem;line-height:2.4rem;color:#737d8c}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace .mx_BaseAvatar_image{border-radius:8px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle{position:absolute;left:-1px;top:10px;height:16px;width:16px;border-radius:4px;background-color:#fff}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle:before{content:"";position:absolute;top:0;left:0;height:16px;width:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#8d99a5;-webkit-mask-size:16px;mask-size:16px;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle.mx_SpaceRoomDirectory_subspace_toggle_shown:before{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children{position:relative;padding-left:12px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile{position:relative;padding:8px 16px;border-radius:8px;min-height:56px;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:20px auto -webkit-max-content;grid-template-columns:20px auto max-content;grid-column-gap:8px;grid-row-gap:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_BaseAvatar{grid-row:1;grid-column:1}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name{font-weight:600;font-size:1.5rem;line-height:1.8rem;grid-row:1;grid-column:2}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip{display:inline;margin-left:12px;color:#8d99a5;font-size:1.2rem;line-height:1.5rem}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon{margin-right:4px;position:relative;vertical-align:text-top}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon:before{position:absolute;top:0;left:0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_info{font-size:1.4rem;line-height:1.8rem;color:#737d8c;grid-row:2;grid-column:1/3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions{text-align:right;margin-left:20px;grid-column:3;grid-row:1/3}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton{line-height:2.4rem;padding:4px 16px;display:inline-block;visibility:hidden}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton_kind_primary_outline{padding:3px 16px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_Checkbox{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;margin-left:12px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover{background-color:hsla(0,0%,91%,.77)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover .mx_AccessibleButton{visibility:visible}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:before,.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children:before{content:"";position:absolute;background-color:hsla(0,0%,91%,.77);width:1px;height:100%;left:6px;top:0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_actions .mx_SpaceRoomDirectory_actionsText{font-weight:400;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_SpaceRoomDirectory_list>hr{border:none;height:1px;background-color:rgba(141,151,165,.2);margin:20px 0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_createRoom{display:block;margin:16px auto 0;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomView .mx_MainSplit>div:first-child{padding:80px 60px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-height:100%;overflow-y:auto}.mx_SpaceRoomView .mx_MainSplit>div:first-child h1{margin:0;font-size:2.4rem;font-weight:600;color:#2e2f32;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_description{font-size:1.5rem;color:#737d8c;margin-top:12px;margin-bottom:24px;max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AddExistingToSpace{max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AddExistingToSpace .mx_AddExistingToSpace_content{height:calc(100vh - 360px);max-height:400px}.mx_SpaceRoomView .mx_MainSplit>div:first-child:not(.mx_SpaceRoomView_landing) .mx_SpaceFeedbackPrompt{width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons{display:block;margin-top:44px;width:428px;text-align:right}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons .mx_AccessibleButton_hasKind{padding:8px 22px;margin-left:16px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons input.mx_AccessibleButton{border:none}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_Field{max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_Field+.mx_Field{margin-top:28px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_errorText{font-weight:600;font-size:1.2rem;line-height:1.5rem;color:#ff4b55;margin-bottom:28px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpaceRoomView .mx_SpaceRoomView_preview{padding:32px 24px!important;margin:auto;max-width:480px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:2px 15px 30px rgba(0,0,0,.48);box-shadow:2px 15px 30px rgba(0,0,0,.48);border-radius:8px;position:relative}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_BetaCard_betaPill{position:absolute;right:24px;top:32px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt{font-weight:600;font-size:1.4rem;line-height:2.4rem;color:#2e2f32;margin-top:24px;position:relative;padding-left:24px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt .mx_AccessibleButton_kind_link{display:inline;padding:0;font-size:inherit;line-height:inherit}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt:before{content:"";position:absolute;height:2.4rem;width:20px;left:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);background-color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:20px;font-size:1.5rem}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div{margin-left:8px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div .mx_SpaceRoomView_preview_inviter_name{line-height:1.8rem}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div .mx_SpaceRoomView_preview_inviter_mxid{line-height:2.4rem;color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_preview>.mx_BaseAvatar>.mx_BaseAvatar_image,.mx_SpaceRoomView .mx_SpaceRoomView_preview>.mx_BaseAvatar_image{border-radius:12px}.mx_SpaceRoomView .mx_SpaceRoomView_preview h1.mx_SpaceRoomView_preview_name{margin:20px 0!important}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_topic{font-size:1.4rem;line-height:2.2rem;color:#737d8c;margin:20px 0;max-height:160px;overflow-y:auto}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons{margin-top:20px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons .mx_AccessibleButton{width:200px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:14px 0}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:20px}.mx_SpaceRoomView .mx_SpaceRoomView_landing>.mx_BaseAvatar>.mx_BaseAvatar_image,.mx_SpaceRoomView .mx_SpaceRoomView_landing>.mx_BaseAvatar_image{border-radius:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name{margin:24px 0 16px;font-size:1.5rem;color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name>span{display:inline-block}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_nameRow{margin-top:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_nameRow>h1{display:inline-block}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_inviter .mx_BaseAvatar{margin-right:4px;vertical-align:middle}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_info{display:inline-block;margin:0 auto 0 0}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_FacePile{display:inline-block;margin-right:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_FacePile .mx_FacePile_faces{cursor:pointer}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_inviteButton{position:relative;padding:4px 18px 4px 40px;line-height:2.4rem;height:-webkit-min-content;height:-moz-min-content;height:min-content}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_inviteButton:before{position:absolute;content:"";left:8px;height:16px;width:16px;background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_settingsButton{position:relative;margin-left:16px;width:24px;height:24px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_settingsButton:before{position:absolute;content:"";left:0;top:0;height:24px;width:24px;background:#8d99a5;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_topic{font-size:1.5rem;margin-top:12px;margin-bottom:16px}.mx_SpaceRoomView .mx_SpaceRoomView_landing>hr{border:none;height:1px;background-color:hsla(0,0%,91%,.77)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SearchBox{margin:0 0 20px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt{margin-bottom:16px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt+hr{display:none}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton>h3{font-weight:600;margin:0 0 4px}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton>span{color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover{border-color:#0dbd8b}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover:before{background-color:#0dbd8b}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover>span{color:#2e2f32}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_justMeButton:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_betaDisclaimer{padding:58px 16px 16px;position:relative;border-radius:8px;background-color:#f3f8fd;max-width:428px;margin:20px 0 30px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_betaDisclaimer .mx_BetaCard_betaPill{position:absolute;left:16px;top:16px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons{color:#737d8c;margin-top:28px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton{position:relative;display:inline-block;padding-left:32px;line-height:24px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton:before{content:"";position:absolute;height:24px;width:24px;top:0;left:0;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:32px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_SpaceRoomView_inviteTeammates_inviteDialogButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpaceRoomView_info{color:#737d8c;font-size:1.5rem;line-height:2.4rem;margin:20px 0}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private,.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public{padding-left:20px;position:relative}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before,.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before{position:absolute;content:"";width:20px;height:20px;top:0;left:-2px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before{-webkit-mask-size:12px;mask-size:12px;-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before{-webkit-mask-size:14px;mask-size:14px;-webkit-mask-image:url(../../img/element-icons/lock.1f264bd.svg);mask-image:url(../../img/element-icons/lock.1f264bd.svg)}.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link{color:inherit;position:relative;padding-left:16px}.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link:before{content:"·";position:absolute;left:6px}.mx_SpaceFeedbackPrompt{margin-top:18px;margin-bottom:12px}.mx_SpaceFeedbackPrompt>hr{border:none;border-top:1px solid #e7e7e7;margin-bottom:12px}.mx_SpaceFeedbackPrompt>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-size:1.5rem;line-height:2.4rem}.mx_SpaceFeedbackPrompt>div>span{color:#737d8c;position:relative;padding-left:32px;font-size:inherit;line-height:inherit;margin-right:auto}.mx_SpaceFeedbackPrompt>div>span:before{content:"";position:absolute;left:0;top:2px;height:20px;width:20px;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_SpaceFeedbackPrompt>div .mx_AccessibleButton_kind_link{color:#0dbd8b;position:relative;padding:0 0 0 24px;margin-left:8px;font-size:inherit;line-height:inherit}.mx_SpaceFeedbackPrompt>div .mx_AccessibleButton_kind_link:before{content:"";position:absolute;left:0;height:16px;width:16px;background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);-webkit-mask-position:center;mask-position:center}.mx_TabbedView{padding:0 0 0 16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;top:0;bottom:0;left:0;right:0;margin:8px 0 0}.mx_TabbedView_tabLabels{width:170px;max-width:170px;color:#45474a;position:fixed}.mx_TabbedView_tabLabel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:text-top;cursor:pointer;padding:8px 0;border-radius:8px;font-size:1.3rem;position:relative}.mx_TabbedView_tabLabel_active{background-color:#0dbd8b;color:#fff}.mx_TabbedView_maskedIcon{margin-left:8px;margin-right:16px;width:16px;height:16px;display:inline-block}.mx_TabbedView_maskedIcon:before{display:inline-block;background-color:#454545;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px;width:16px;height:16px;-webkit-mask-position:center;mask-position:center;content:""}.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before{background-color:#fff}.mx_TabbedView_tabLabel_text{vertical-align:middle}.mx_TabbedView_tabPanel{margin-left:240px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_TabbedView_tabPanel,.mx_TabbedView_tabPanelContent{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-height:0}.mx_TabbedView_tabPanelContent{overflow:auto}.mx_ToastContainer{position:absolute;top:0;left:70px;z-index:101;padding:4px;display:grid;grid-template-rows:1fr 14px 6px}.mx_ToastContainer.mx_ToastContainer_stacked:before{content:"";margin:0 4px;grid-row:2/4}.mx_ToastContainer .mx_Toast_toast,.mx_ToastContainer.mx_ToastContainer_stacked:before{grid-column:1;background-color:#f2f5f8;-webkit-box-shadow:0 4px 20px rgba(0,0,0,.5);box-shadow:0 4px 20px rgba(0,0,0,.5);border-radius:8px}.mx_ToastContainer .mx_Toast_toast{grid-row:1/3;color:#2e2f32;overflow:hidden;display:grid;grid-template-columns:22px 1fr;grid-column-gap:8px;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;grid-row-gap:4px;row-gap:4px;padding:8px}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:after,.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:before{content:"";width:22px;height:22px;grid-column:1;grid-row:1;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-size:100%;background-repeat:no-repeat}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#2e2f32}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:before{background-color:#fff;-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);-webkit-mask-size:90%;mask-size:90%}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_secure_backup:after{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);background-color:#2e2f32}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_body,.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_title{grid-column:2}.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon){padding-left:12px}.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) .mx_Toast_title{grid-column:1/-1}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description,.mx_ToastContainer .mx_Toast_toast .mx_Toast_title{padding-right:8px}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2{grid-column:1/3;grid-row:1;margin:0;font-size:1.5rem;font-weight:600;display:inline;width:auto;vertical-align:middle}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title span{padding-left:8px;float:right;font-size:1.2rem;line-height:2.2rem;color:#61708b}.mx_ToastContainer .mx_Toast_toast .mx_Toast_body{grid-column:1/3;grid-row:2}.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons{float:right;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_FormButton{min-width:96px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description{max-width:272px;overflow:hidden;text-overflow:ellipsis;margin:4px 0 11px;font-size:1.2rem}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description .mx_AccessibleButton_kind_link{font-size:inherit;padding:0}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description a{text-decoration:none}.mx_ToastContainer .mx_Toast_toast .mx_Toast_detail{color:#737d8c}.mx_ToastContainer .mx_Toast_toast .mx_Toast_deviceID{font-size:1rem}.mx_UploadBar{padding-left:65px;position:relative}.mx_UploadBar .mx_ProgressBar{width:calc(100% - 40px)}.mx_UploadBar_filename{margin-top:5px;color:#61708b;position:relative;padding-left:22px;font-size:1.5rem;vertical-align:middle}.mx_UploadBar_filename:before{content:"";height:18px;width:18px;left:0;-webkit-mask-image:url(../../img/element-icons/upload.e2a53e0.svg);mask-image:url(../../img/element-icons/upload.e2a53e0.svg)}.mx_UploadBar_cancel,.mx_UploadBar_filename:before{position:absolute;top:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#61708b}.mx_UploadBar_cancel{right:0;height:16px;width:16px;margin-right:16px;-webkit-mask-image:url(../../img/icons-close.11ff07c.svg);mask-image:url(../../img/icons-close.11ff07c.svg)}.mx_UserMenu{padding-right:6px}.mx_UserMenu.mx_UserMenu_prototype{margin-bottom:6px;padding-right:0}.mx_UserMenu.mx_UserMenu_prototype .mx_UserMenu_headerButtons{margin-right:2px}.mx_UserMenu.mx_UserMenu_prototype:after{content:"";border-bottom:1px solid #2e2f32;opacity:.2;display:block;padding-top:8px}.mx_UserMenu .mx_UserMenu_headerButtons{width:16px;height:16px;position:relative;display:block}.mx_UserMenu .mx_UserMenu_headerButtons:before{content:"";width:16px;height:16px;position:absolute;top:0;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_UserMenu .mx_UserMenu_row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer{position:relative;margin-right:8px;height:32px;padding:3px 0}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer .mx_UserMenu_userAvatar{border-radius:32px;-o-object-fit:cover;object-fit:cover}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName,.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_userName{display:block}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName{color:#61708b;font-size:1.3rem;line-height:1.8rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userName{font-weight:600;font-size:1.5rem;line-height:2rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd{width:24px;height:24px;margin-right:8px;position:relative}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd:before{content:"";position:absolute;width:24px;height:24px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#61708b}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_noisy:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_muted:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg)}.mx_UserMenu.mx_UserMenu_minimized{padding-right:0}.mx_UserMenu.mx_UserMenu_minimized .mx_UserMenu_userAvatarContainer{margin-right:0}.mx_UserMenu_contextMenu{width:258px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype{padding-bottom:16px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype .mx_UserMenu_contextMenu_header{padding-bottom:0;padding-top:16px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype .mx_UserMenu_contextMenu_header:nth-child(n+2){padding-top:8px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype hr{width:85%;opacity:.2;border:none;border-bottom:1px solid #2e2f32}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList{margin-top:4px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList:before{border:none}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList>.mx_AccessibleButton{padding-top:2px;padding-bottom:2px}.mx_UserMenu_contextMenu.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton{padding-top:16px;padding-bottom:16px}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header{padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:calc(100% - 40px)}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name *{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_displayName{font-weight:700;font-size:1.5rem;line-height:2rem}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_userId{font-size:1.5rem;line-height:2.4rem}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_themeButton{min-width:32px;max-width:32px;width:32px;height:32px;margin-left:8px;border-radius:32px;background-color:#e3e8f0;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts,.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_hostingLink{padding-top:0}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts{display:inline-block}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts>span{font-weight:600;display:block}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts>span+span{margin-top:8px}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts .mx_AccessibleButton_kind_link{font-weight:400;font-size:inherit;padding:0}.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon{width:16px;height:16px;display:block}.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon:before{content:"";width:16px;height:16px;display:block;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_UserMenu_contextMenu .mx_UserMenu_iconHome:before{-webkit-mask-image:url(../../img/element-icons/roomlist/home.1b4edd5.svg);mask-image:url(../../img/element-icons/roomlist/home.1b4edd5.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconHosting:before{-webkit-mask-image:url(../../img/element-icons/brands/element.182040d.svg);mask-image:url(../../img/element-icons/brands/element.182040d.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconBell:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconLock:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconArchive:before{-webkit-mask-image:url(../../img/element-icons/roomlist/archived.226584d.svg);mask-image:url(../../img/element-icons/roomlist/archived.226584d.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconMessage:before{-webkit-mask-image:url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);mask-image:url(../../img/element-icons/roomlist/feedback.b9a3f53.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconSignOut:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconMembers:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_ViewSource_separator{clear:both;border-bottom:1px solid #e5e5e5;padding-top:.7em;padding-bottom:.7em}.mx_ViewSource_heading{font-size:1.7rem;font-weight:400;color:#2e2f32;margin-top:.7em}.mx_ViewSource pre{text-align:left;font-size:1.2rem;padding:.5em 1em;word-wrap:break-word;white-space:pre-wrap}.mx_ViewSource_details{margin-top:.8em}.mx_CompleteSecurity_header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CompleteSecurity_headerIcon{width:24px;height:24px;margin-right:4px;position:relative}.mx_CompleteSecurity_heroIcon{width:128px;height:128px;position:relative;margin:0 auto}.mx_CompleteSecurity_body{font-size:1.5rem}.mx_CompleteSecurity_waiting{color:#8d99a5}.mx_CompleteSecurity_actionRow{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:2.8rem}.mx_CompleteSecurity_actionRow .mx_AccessibleButton{-webkit-margin-start:18px;margin-inline-start:18px}.mx_CompleteSecurity_actionRow .mx_AccessibleButton.warning{color:#ff4b55}.mx_Login_submit{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;width:100%;margin-top:24px;margin-bottom:24px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center}.mx_Login_submit:disabled{opacity:.3;cursor:default}.mx_Login_loader{display:inline;position:relative;top:2px;left:8px}.mx_Login_loader .mx_Spinner{display:inline}.mx_Login_loader .mx_Spinner img{width:16px;height:16px}.mx_Login_error{color:#ff4b55;font-weight:700;text-align:center;margin-top:12px;margin-bottom:12px}.mx_Login_error.mx_Login_serverError{text-align:left;font-weight:400}.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal{color:#ff8d13}.mx_Login_type_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#232f32}.mx_Login_type_container .mx_Field{margin:0}.mx_Login_type_label{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_Login_underlinedServerName{width:-webkit-max-content;width:-moz-max-content;width:max-content;border-bottom:1px dashed #0dbd8b}div.mx_AccessibleButton_kind_link.mx_Login_forgot{display:block;margin:0 auto;font-size:inherit;padding:0}div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_AuthBody{width:500px;font-size:1.2rem;color:#61708b;background-color:#fff;border-radius:0 4px 4px 0;padding:25px 60px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AuthBody h2{font-size:2.4rem;font-weight:600;margin-top:8px;color:#232f32}.mx_AuthBody h3{font-size:1.4rem;font-weight:600;color:#61708b}.mx_AuthBody h3.mx_AuthBody_centered{text-align:center}.mx_AuthBody a:hover,.mx_AuthBody a:link,.mx_AuthBody a:visited{color:#0dbd8b;text-decoration:none}.mx_AuthBody input[type=password],.mx_AuthBody input[type=text]{color:#232f32}.mx_AuthBody .mx_Field input,.mx_AuthBody .mx_Field select{color:#232f32;background-color:#fff}.mx_AuthBody .mx_Field label{color:#232f32}.mx_AuthBody .mx_Field input:not(:-moz-placeholder-shown)+label,.mx_AuthBody .mx_Field textarea:not(:-moz-placeholder-shown)+label{background-color:#fff}.mx_AuthBody .mx_Field input:not(:-ms-input-placeholder)+label,.mx_AuthBody .mx_Field textarea:not(:-ms-input-placeholder)+label{background-color:#fff}.mx_AuthBody .mx_Field_labelAlwaysTopLeft label,.mx_AuthBody .mx_Field input:focus+label,.mx_AuthBody .mx_Field input:not(:placeholder-shown)+label,.mx_AuthBody .mx_Field select+label,.mx_AuthBody .mx_Field textarea:focus+label,.mx_AuthBody .mx_Field textarea:not(:placeholder-shown)+label{background-color:#fff}.mx_AuthBody input.error{color:#ff4b55}.mx_AuthBody .mx_Field input{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AuthBody .mx_Field_select:before{background-color:#232f32}.mx_AuthBody .mx_Dropdown{color:#232f32}.mx_AuthBody .mx_Dropdown_arrow{background:#232f32}.mx_AuthBody .mx_Dropdown_menu{background-color:#fff}.mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight{background-color:#ddd}.mx_AuthBody_fieldRow{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:10px}.mx_AuthBody_fieldRow>.mx_Field{margin:0 5px}.mx_AuthBody_fieldRow>.mx_Field:first-child{margin-left:0}.mx_AuthBody_fieldRow>.mx_Field:last-child{margin-right:0}.mx_AuthBody_paddedFooter{height:80px;padding-top:28px;text-align:center}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title{margin-top:16px;font-size:1.5rem;line-height:2.4rem}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title .mx_InlineSpinner img{vertical-align:sub;margin-right:5px}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_subtitle{margin-top:8px;font-size:1rem;line-height:1.4rem}.mx_AuthBody_changeFlow{display:block;text-align:center;width:100%}.mx_AuthBody_changeFlow>a{font-weight:600}.mx_SSOButtons+.mx_AuthBody_changeFlow{margin-top:24px}.mx_AuthBody_spinner{margin:1em 0}@media only screen and (max-width:480px){.mx_AuthBody{border-radius:4px;width:auto;max-width:500px;padding:10px}}.mx_AuthButtons{min-height:24px;height:unset!important;padding-top:13px!important;padding-bottom:14px!important;-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.mx_AuthButtons_loginButton_wrapper{text-align:center;width:100%}.mx_AuthButtons_loginButton,.mx_AuthButtons_registerButton{margin-top:3px;height:40px;border:0;border-radius:40px;margin-left:4px;margin-right:4px;min-width:80px;background-color:#0dbd8b;color:#fff;cursor:pointer;font-size:1.5rem;padding:0 11px;word-break:break-word}.mx_AuthFooter{text-align:center;width:100%;font-size:1.4rem;opacity:.72;padding:20px 0;background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.8)));background:linear-gradient(transparent,rgba(0,0,0,.8))}.mx_AuthFooter a:hover,.mx_AuthFooter a:link,.mx_AuthFooter a:visited{color:#fff;margin:0 22px}.mx_AuthHeader{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:206px;padding:25px;-webkit-box-sizing:border-box;box-sizing:border-box}@media only screen and (max-width:480px){.mx_AuthHeader{display:none}}.mx_AuthHeaderLogo{margin-top:15px;-webkit-box-flex:1;-ms-flex:1;flex:1;padding:0 25px}.mx_AuthHeaderLogo img{width:100%}@media only screen and (max-width:480px){.mx_AuthHeaderLogo{display:none}}.mx_AuthPage{width:100%;min-height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#2e3649}.mx_AuthPage,.mx_AuthPage_modal{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_AuthPage_modal{margin:100px auto auto;border-radius:4px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.33);box-shadow:0 2px 4px 0 rgba(0,0,0,.33);background-color:hsla(0,0%,96.1%,.9)}@media only screen and (max-width:480px){.mx_AuthPage_modal{margin-top:0}}.mx_CompleteSecurityBody{width:600px;color:#232f32;background-color:#fff;border-radius:4px;padding:20px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_CompleteSecurityBody h2{font-size:2.4rem;font-weight:600;margin-top:0}.mx_CompleteSecurityBody h3{font-size:1.4rem;font-weight:600}.mx_CompleteSecurityBody a:hover,.mx_CompleteSecurityBody a:link,.mx_CompleteSecurityBody a:visited{color:#0dbd8b;text-decoration:none}.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option{padding:0 3px}.mx_CountryDropdown .mx_Dropdown_arrow{padding-right:3px}.mx_CountryDropdown_shortOption{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:100%}.mx_CountryDropdown_option,.mx_CountryDropdown_shortOption{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CountryDropdown_option{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_InteractiveAuthEntryComponents_emailWrapper{padding-right:100px;position:relative;margin-top:32px;margin-bottom:32px}.mx_InteractiveAuthEntryComponents_emailWrapper:after,.mx_InteractiveAuthEntryComponents_emailWrapper:before{position:absolute;width:116px;height:116px;content:"";right:-10px}.mx_InteractiveAuthEntryComponents_emailWrapper:before{background-color:rgba(244,246,250,.91);border-radius:50%;top:-20px}.mx_InteractiveAuthEntryComponents_emailWrapper:after{background-image:url(../../img/element-icons/email-prompt.1d04dfe.svg);background-repeat:no-repeat;background-position:50%;background-size:contain;top:-25px}.mx_InteractiveAuthEntryComponents_msisdnWrapper{text-align:center}.mx_InteractiveAuthEntryComponents_msisdnEntry{font-size:200%;font-weight:700;border:1px solid #c7c7c7;border-radius:3px;width:6em}.mx_InteractiveAuthEntryComponents_msisdnEntry:focus{border:1px solid #0dbd8b}.mx_InteractiveAuthEntryComponents_msisdnSubmit{margin-top:4px;margin-bottom:5px}.mx_InteractiveAuthEntryComponents_termsSubmit{margin-top:20px;margin-bottom:5px;display:block;width:100%}.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled{background-color:#747474;cursor:default}.mx_InteractiveAuthEntryComponents_termsSubmit:disabled{background-color:#92caad;cursor:default}.mx_InteractiveAuthEntryComponents_termsPolicy{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_InteractiveAuthEntryComponents_passwordSection{width:300px}.mx_InteractiveAuthEntryComponents_sso_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:20px}.mx_InteractiveAuthEntryComponents_sso_buttons .mx_AccessibleButton{margin-left:5px}.mx_AuthBody_language{width:100%}.mx_AuthBody_language .mx_Dropdown_input{border:none;font-size:1.4rem;font-weight:600;color:#4e5054;width:auto}.mx_AuthBody_language .mx_Dropdown_arrow{background:#4e5054}progress.mx_PassphraseField_progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;border:0;height:4px;position:absolute;top:-12px;border-radius:"2px"}progress.mx_PassphraseField_progress::-moz-progress-bar{border-radius:"2px"}progress.mx_PassphraseField_progress::-webkit-progress-bar,progress.mx_PassphraseField_progress::-webkit-progress-value{border-radius:"2px"}progress.mx_PassphraseField_progress{color:#ff4b55}progress.mx_PassphraseField_progress::-moz-progress-bar{background-color:#ff4b55}progress.mx_PassphraseField_progress::-webkit-progress-value{background-color:#ff4b55}progress.mx_PassphraseField_progress[value="2"],progress.mx_PassphraseField_progress[value="3"]{color:#ff812d}progress.mx_PassphraseField_progress[value="2"]::-moz-progress-bar,progress.mx_PassphraseField_progress[value="3"]::-moz-progress-bar{background-color:#ff812d}progress.mx_PassphraseField_progress[value="2"]::-webkit-progress-value,progress.mx_PassphraseField_progress[value="3"]::-webkit-progress-value{background-color:#ff812d}progress.mx_PassphraseField_progress[value="4"]{color:#0dbd8b}progress.mx_PassphraseField_progress[value="4"]::-moz-progress-bar{background-color:#0dbd8b}progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value{background-color:#0dbd8b}.mx_Welcome{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Welcome.mx_WelcomePage_registrationDisabled .mx_ButtonCreateAccount{display:none}.mx_Welcome .mx_AuthBody_language{width:160px;margin-bottom:10px}.mx_BaseAvatar{position:relative;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_BaseAvatar_initial{position:absolute;left:0;color:#fff;text-align:center;speak:none;pointer-events:none;font-weight:400}.mx_BaseAvatar_image{-o-object-fit:cover;object-fit:cover;border-radius:125px;vertical-align:top;background-color:#fff}.mx_DecoratedRoomAvatar,.mx_ExtraTile{position:relative}.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar,.mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar{-webkit-mask-image:url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);mask-image:url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon{position:absolute;bottom:-2px;right:-2px;margin:4px;width:8px;height:8px;border-radius:50%}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon:before{content:"";width:8px;height:8px;position:absolute;border-radius:8px}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe:before{-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#737d8c;-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_offline:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_offline:before{background-color:#e3e8f0}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online:before{background-color:#0dbd8b}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_away:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_away:before{background-color:#d9b072}.mx_DecoratedRoomAvatar .mx_NotificationBadge,.mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer,.mx_ExtraTile .mx_NotificationBadge,.mx_ExtraTile .mx_RoomTile_badgeContainer{position:absolute;top:0;right:0;height:18px;width:18px}.mx_MessageComposer_avatar .mx_BaseAvatar{padding:2px;border:1px solid transparent;border-radius:100%}.mx_MessageComposer_avatar .mx_BaseAvatar_initial{left:2px}.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar{border-color:#0dbd8b}@-webkit-keyframes shadow-pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(13,189,139,.2);box-shadow:0 0 0 0 rgba(13,189,139,.2)}to{-webkit-box-shadow:0 0 0 6px rgba(13,189,139,0);box-shadow:0 0 0 6px rgba(13,189,139,0)}}@keyframes shadow-pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(13,189,139,.2);box-shadow:0 0 0 0 rgba(13,189,139,.2)}to{-webkit-box-shadow:0 0 0 6px rgba(13,189,139,0);box-shadow:0 0 0 6px rgba(13,189,139,0)}}.mx_PulsedAvatar img{-webkit-animation:shadow-pulse 1s infinite;animation:shadow-pulse 1s infinite}.mx_WidgetAvatar{border-radius:4px}.mx_BetaCard{margin-bottom:20px;padding:24px;background-color:#f4f6fa;border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_BetaCard>div .mx_BetaCard_title{font-weight:600;font-size:1.8rem;line-height:2.2rem;color:#2e2f32;margin:4px 0 14px}.mx_BetaCard>div .mx_BetaCard_title .mx_BetaCard_betaPill{margin-left:12px}.mx_BetaCard>div .mx_BetaCard_caption{font-size:1.5rem;line-height:2rem;color:#737d8c;margin-bottom:20px}.mx_BetaCard>div .mx_AccessibleButton{display:block;margin:12px 0;padding:7px 40px;width:auto}.mx_BetaCard>div .mx_BetaCard_disclaimer{font-size:1.2rem;line-height:1.5rem;color:#737d8c;margin-top:20px}.mx_BetaCard>img{margin:auto 0 auto 20px;width:300px;-o-object-fit:contain;object-fit:contain;height:100%}.mx_BetaCard_betaPill{background-color:#238cf5;padding:4px 10px;border-radius:8px;text-transform:uppercase;font-size:12px;line-height:15px;color:#fff;display:inline-block;vertical-align:text-bottom}.mx_BetaCard_betaPill.mx_BetaCard_betaPill_clickable{cursor:pointer}.mx_BetaDot{border-radius:50%;margin:10px;height:12px;width:12px;-webkit-transform:scale(1);transform:scale(1);background:#238cf5;-webkit-box-shadow:0 0 0 0 #238cf5;box-shadow:0 0 0 0 #238cf5;-webkit-animation:mx_Beta_bluePulse 2s infinite;animation:mx_Beta_bluePulse 2s infinite;-webkit-animation-iteration-count:20;animation-iteration-count:20}@-webkit-keyframes mx_Beta_bluePulse{0%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,.7);box-shadow:0 0 0 0 rgba(35,140,245,.7)}70%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:0 0 0 10px rgba(35,140,245,0);box-shadow:0 0 0 10px rgba(35,140,245,0)}to{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,0);box-shadow:0 0 0 0 rgba(35,140,245,0)}}@keyframes mx_Beta_bluePulse{0%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,.7);box-shadow:0 0 0 0 rgba(35,140,245,.7)}70%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:0 0 0 10px rgba(35,140,245,0);box-shadow:0 0 0 10px rgba(35,140,245,0)}to{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,0);box-shadow:0 0 0 0 rgba(35,140,245,0)}}.mx_CallContextMenu_item{width:205px;height:40px;padding-left:16px;line-height:40px;vertical-align:center}.mx_IconizedContextMenu{min-width:146px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList>*{padding-left:20px;padding-right:20px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_optionList_notFirst:before,.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:nth-child(n+2):before{border-top:1px solid #2e2f32;opacity:.1;content:"";width:100%;position:absolute;left:0}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:first-child .mx_AccessibleButton:first-child{border-radius:8px 8px 0 0}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_AccessibleButton:last-child{border-radius:0 0 8px 8px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton{padding-top:12px;padding-bottom:12px;text-decoration:none;color:#2e2f32;font-size:1.5rem;line-height:2.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton:hover{background-color:#f5f8fa}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_AccessibleButton_disabled{opacity:.5;cursor:not-allowed}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton .mx_IconizedContextMenu_icon,.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton img{width:16px;min-width:16px;max-width:16px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton span.mx_IconizedContextMenu_label{width:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton .mx_IconizedContextMenu_icon+.mx_IconizedContextMenu_label{padding-left:14px}.mx_IconizedContextMenu .mx_IconizedContextMenu_icon{position:relative;width:16px;height:16px}.mx_IconizedContextMenu .mx_IconizedContextMenu_icon:before{content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton{color:#ff4b55!important}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_IconizedContextMenu_icon:before{background-color:#ff4b55}.mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_AccessibleButton,.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_AccessibleButton{color:#0dbd8b!important}.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_IconizedContextMenu_icon:before{background-color:#0dbd8b}.mx_IconizedContextMenu.mx_IconizedContextMenu_compact .mx_IconizedContextMenu_optionList>*{padding:8px 16px 8px 11px}.mx_IconizedContextMenu .mx_IconizedContextMenu_checked{margin-left:16px;margin-right:-5px}.mx_IconizedContextMenu .mx_IconizedContextMenu_checked:before{-webkit-mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg)}.mx_MessageContextMenu{padding:6px}.mx_MessageContextMenu_field{display:block;padding:3px 6px;cursor:pointer;white-space:nowrap}.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet{font-weight:700}.mx_StatusMessageContextMenu{padding:10px}.mx_StatusMessageContextMenu_form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}input.mx_StatusMessageContextMenu_message{border-radius:4px;border:1px solid #e7e7e7;padding:6.5px 11px;background-color:#fff;font-weight:400;margin:0 0 10px}.mx_StatusMessageContextMenu_message::-webkit-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::-moz-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message:-ms-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::-ms-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::placeholder{color:#61708b}.mx_StatusMessageContextMenu_actionContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_StatusMessageContextMenu_clear,.mx_StatusMessageContextMenu_submit{vertical-align:middle;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;cursor:pointer;display:inline-block;outline:none;-ms-flex-item-align:start;align-self:start;font-size:1.2rem;padding:6px 1em;border:1px solid transparent;margin-right:10px}.mx_StatusMessageContextMenu_submit[disabled]{opacity:.49}.mx_StatusMessageContextMenu_clear{color:#ff4b55;background-color:transparent;border:1px solid #ff4b55}.mx_StatusMessageContextMenu_actionContainer .mx_Spinner{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_TagTileContextMenu_item{padding:8px 20px 8px 8px;cursor:pointer;white-space:nowrap;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.6rem}.mx_TagTileContextMenu_item:before{content:"";height:15px;width:15px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;margin-right:8px}.mx_TagTileContextMenu_viewCommunity:before{-webkit-mask-image:url(../../img/element-icons/view-community.0cad1a5.svg);mask-image:url(../../img/element-icons/view-community.0cad1a5.svg)}.mx_TagTileContextMenu_hideCommunity:before{-webkit-mask-image:url(../../img/element-icons/hide.2b52315.svg);mask-image:url(../../img/element-icons/hide.2b52315.svg)}.mx_TagTileContextMenu_separator{margin-top:0;margin-bottom:0;border-style:none;border-top:1px solid;border-color:#e7e7e7}.mx_AddExistingToSpaceDialog_wrapper .mx_Dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_AddExistingToSpace .mx_SearchBox{margin:0 0 15px;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.mx_AddExistingToSpace .mx_AddExistingToSpace_content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_AddExistingToSpace .mx_AddExistingToSpace_noResults{display:block;margin-top:24px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section:not(:first-child){margin-top:24px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section>h3{margin:0;color:#737d8c;font-size:1.2rem;font-weight:600;line-height:1.5rem}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_DecoratedRoomAvatar{margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_AddExistingToSpace_entry_name{font-size:1.5rem;line-height:30px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_Checkbox{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar{margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar_image{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental{position:relative;border-radius:8px;margin:12px 0;padding:8px 8px 8px 42px;background-color:#f3f8fd;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental:before{content:"";position:absolute;left:10px;top:calc(50% - 8px);height:16px;width:16px;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:20px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar{height:8px;width:100%;border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-moz-progress-bar{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-webkit-progress-bar,.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-webkit-progress-value{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_AddExistingToSpace_progressText{margin-top:8px;font-size:1.5rem;line-height:2.4rem;color:#2e2f32}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span>*{vertical-align:middle}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error{padding-left:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error>img{-ms-flex-item-align:center;align-self:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorHeading{font-weight:600;font-size:1.5rem;line-height:1.8rem;color:#ff4b55}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorCaption{margin-top:4px;font-size:1.2rem;line-height:1.5rem;color:#2e2f32}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton{display:inline-block;-ms-flex-item-align:center;align-self:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton_kind_primary{padding:8px 36px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton{margin-left:12px;padding-left:24px;position:relative}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton:before{content:"";position:absolute;background-color:#2e2f32;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg);width:18px;height:18px;left:0}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton_kind_link{padding:0}.mx_AddExistingToSpaceDialog{width:480px;color:#2e2f32;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;min-height:0;height:80vh}.mx_AddExistingToSpaceDialog,.mx_AddExistingToSpaceDialog .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar_image{border-radius:8px;margin:0;vertical-align:unset}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin:auto 16px auto 5px;vertical-align:middle}.mx_AddExistingToSpaceDialog .mx_Dialog_title>div>h1{font-weight:600;font-size:1.8rem;line-height:2.2rem;margin:0}.mx_AddExistingToSpaceDialog .mx_Dialog_title>div .mx_AddExistingToSpaceDialog_onlySpace{color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input{border:none}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input>.mx_Dropdown_option{padding-left:0;-webkit-box-flex:unset;-ms-flex:unset;flex:unset;height:unset;color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input>.mx_Dropdown_option .mx_BaseAvatar{display:none}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input .mx_Dropdown_menu .mx_AddExistingToSpaceDialog_dropdownOptionActive{color:#0dbd8b;padding-right:32px;position:relative}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input .mx_Dropdown_menu .mx_AddExistingToSpaceDialog_dropdownOptionActive:before{content:"";width:20px;height:20px;top:8px;right:0;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#0dbd8b;-webkit-mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg)}.mx_AddExistingToSpaceDialog .mx_AddExistingToSpace{display:contents}.mx_AddressPickerDialog a:hover,.mx_AddressPickerDialog a:link,.mx_AddressPickerDialog a:visited{color:#0dbd8b;text-decoration:none}.mx_AddressPickerDialog_input,.mx_AddressPickerDialog_input:focus{height:26px;font-size:1.4rem;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;padding-left:12px;padding-right:12px;margin:0!important;border:0!important;outline:0!important;width:1000%;resize:none;overflow:hidden;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box;word-wrap:nowrap}.mx_AddressPickerDialog .mx_Dialog_content{min-height:50px}.mx_AddressPickerDialog_inputContainer{border-radius:3px;border:1px solid #e7e7e7;line-height:3.6rem;padding:1px 4px;max-height:150px;overflow-x:hidden;overflow-y:auto}.mx_AddressPickerDialog_error{margin-top:10px;color:#ff4b55}.mx_AddressPickerDialog_cancel{position:absolute;right:11px;top:13px;cursor:pointer}.mx_AddressPickerDialog_cancel object{pointer-events:none}.mx_AddressPickerDialog_identityServer{margin-top:1em}.mx_AnalyticsModal table{margin:10px 0}.mx_BetaFeedbackDialog .mx_BetaFeedbackDialog_subheading{color:#2e2f32;font-size:1.4rem;line-height:2rem;margin-bottom:24px}.mx_BetaFeedbackDialog .mx_AccessibleButton_kind_link{padding:0;font-size:inherit;line-height:inherit}.mx_BugReportDialog .mx_BugReportDialog_download .mx_AccessibleButton_kind_link{padding-left:0}.mx_ChangelogDialog_content{max-height:300px;overflow:auto}.mx_ChangelogDialog_li{padding:.2em}.mx_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles{margin-top:24px}.mx_ChatCreateOrReuseDialog .mx_Dialog_content{margin-bottom:24px;min-height:100px}.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge{display:none}.mx_ChatCreateOrReuseDialog_profile{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ChatCreateOrReuseDialog_profile_name{padding:14px}.mx_CommunityPrototypeInviteDialog.mx_Dialog_fixedWidth{width:360px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content{margin-bottom:0}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_people{position:relative;margin-bottom:4px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_people .mx_AccessibleButton{display:inline-block;background-color:#ddd;border-radius:4px;padding:3px 5px;font-size:1.2rem;float:right}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_morePeople{margin-top:8px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person{position:relative;margin-top:4px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person>*{vertical-align:middle}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_Checkbox{position:absolute;right:0;top:calc(50% - 8px);width:16px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers{display:inline-block}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers>*{display:block}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers .mx_CommunityPrototypeInviteDialog_personName{font-weight:600;font-size:1.4rem;color:#2e2f32;margin-left:7px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers .mx_CommunityPrototypeInviteDialog_personId{font-size:1.2rem;color:#61708b;margin-left:7px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_primaryButton{display:block;font-size:1.3rem;line-height:20px;height:20px;margin-top:24px}.mx_ConfirmUserActionDialog .mx_Dialog_content{min-height:48px;margin-bottom:24px}.mx_ConfirmUserActionDialog_avatar{float:left;margin-right:20px;margin-top:-2px}.mx_ConfirmUserActionDialog_name{font-size:1.8rem}.mx_ConfirmUserActionDialog_userId{font-size:1.3rem}.mx_ConfirmUserActionDialog_reasonField{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#2e2f32;background-color:#fff;border-radius:3px;border:1px solid #e7e7e7;line-height:3.6rem;padding:1px 16px;margin-bottom:24px;width:90%}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:12px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName{-ms-flex-preferred-size:66.66%;flex-basis:66.66%;padding-right:100px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_Field input{font-size:1.6rem;line-height:2rem}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext{display:block;color:#61708b;margin-bottom:16px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext:last-child{margin-top:16px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext.mx_CreateCommunityPrototypeDialog_subtext_error{color:#ff4b55}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_communityId{position:relative}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_communityId .mx_InfoTooltip{float:right}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_AccessibleButton{display:block;height:32px;font-size:1.6rem;line-height:32px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar{-ms-flex-preferred-size:33.33%;flex-basis:33.33%}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer{margin-top:12px;margin-bottom:20px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_avatar,.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar{width:96px;height:96px;border-radius:96px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar{background-color:#368bd6}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar:before{display:inline-block;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:96px;mask-size:96px;width:96px;height:96px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg);mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg)}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_tip>b,.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_tip>span{display:block;color:#61708b}.mx_CreateGroupDialog_inputRow{margin-top:10px;margin-bottom:10px}.mx_CreateGroupDialog_label{text-align:left;padding-bottom:12px}.mx_CreateGroupDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff}.mx_CreateGroupDialog_input_hasPrefixAndSuffix{border-radius:0}.mx_CreateGroupDialog_input_group{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateGroupDialog_prefix,.mx_CreateGroupDialog_suffix{padding:0 5px;line-height:3.7rem;background-color:#e3e8f0;border:1px solid #e7e7e7;text-align:center}.mx_CreateGroupDialog_prefix{border-right:0;border-radius:3px 0 0 3px}.mx_CreateGroupDialog_suffix{border-left:0;border-radius:0 3px 3px 0}.mx_CreateRoomDialog_details{margin-top:15px}.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary{outline:none;list-style:none;font-weight:600;cursor:pointer;color:#0dbd8b}.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary::-webkit-details-marker{display:none}.mx_CreateRoomDialog_details>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin:5px 0}.mx_CreateRoomDialog_details>div input[type=checkbox]{margin-right:10px}.mx_CreateRoomDialog_label{text-align:left;padding-bottom:12px}.mx_CreateRoomDialog_input_container{padding-right:20px}.mx_CreateRoomDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff;width:100%}.mx_CreateRoomDialog_aliasContainer{display:-webkit-box;display:-ms-flexbox;display:flex;margin:10px 0}.mx_CreateRoomDialog_aliasContainer .mx_RoomAliasField{margin:0}.mx_CreateRoomDialog.mx_Dialog_fixedWidth{width:450px}.mx_CreateRoomDialog .mx_Dialog_content{margin-bottom:40px}.mx_CreateRoomDialog .mx_Field_input label,.mx_CreateRoomDialog p{color:#61708b}.mx_CreateRoomDialog .mx_SettingsFlag{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateRoomDialog .mx_SettingsFlag_label{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;font-weight:600}.mx_CreateRoomDialog .mx_ToggleSwitch{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:30px}.mx_CreateRoomDialog .mx_CreateRoomDialog_topic{margin-bottom:36px}.mx_CreateRoomDialog .mx_Dialog_content>.mx_SettingsFlag{margin-top:24px}.mx_CreateRoomDialog p{margin:0 85px 0 0;font-size:1.2rem}.mx_DeactivateAccountDialog .mx_Dialog_content{margin-bottom:30px}.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section{margin-top:60px}.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field{width:300px}.mx_DevTools_content{margin:10px 0}.mx_DevTools_ServersInRoomList_button{cursor:default!important}.mx_DevTools_RoomStateExplorer_query{margin-bottom:10px}.mx_DevTools_RoomStateExplorer_button,.mx_DevTools_ServersInRoomList_button{margin-bottom:10px;width:100%}.mx_DevTools_label_left{float:left}.mx_DevTools_label_right{float:right}.mx_DevTools_label_bottom{clear:both;border-bottom:1px solid #e5e5e5}.mx_DevTools_inputRow{display:table-row}.mx_DevTools_inputLabelCell{display:table-cell;font-weight:700;padding-right:24px}.mx_DevTools_inputCell{display:table-cell;width:240px}.mx_DevTools_inputCell input{display:inline-block;border:0;border-bottom:1px solid hsla(0,0%,59.2%,.5);padding:0;width:240px;color:rgba(74,74,74,.9);font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.6rem}.mx_DevTools_textarea{font-size:1.2rem;max-width:684px;min-height:250px;padding:10px}.mx_DevTools_eventTypeStateKeyGroup{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_DevTools_content .mx_Field_input:first-of-type{margin-right:42px}.mx_DevTools_tgl{display:none}.mx_DevTools_tgl,.mx_DevTools_tgl *,.mx_DevTools_tgl+.mx_DevTools_tgl-btn,.mx_DevTools_tgl:after,.mx_DevTools_tgl :after,.mx_DevTools_tgl:before,.mx_DevTools_tgl :before{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_DevTools_tgl+.mx_DevTools_tgl-btn::-moz-selection,.mx_DevTools_tgl::-moz-selection,.mx_DevTools_tgl ::-moz-selection,.mx_DevTools_tgl:after::-moz-selection,.mx_DevTools_tgl :after::-moz-selection,.mx_DevTools_tgl:before::-moz-selection,.mx_DevTools_tgl :before::-moz-selection{background:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn::selection,.mx_DevTools_tgl::selection,.mx_DevTools_tgl ::selection,.mx_DevTools_tgl:after::selection,.mx_DevTools_tgl :after::selection,.mx_DevTools_tgl:before::selection,.mx_DevTools_tgl :before::selection{background:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn{outline:0;display:block;width:7em;height:2em;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:after,.mx_DevTools_tgl+.mx_DevTools_tgl-btn:before{position:relative;display:block;content:"";width:50%;height:100%}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:after{left:0}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:before{display:none}.mx_DevTools_tgl:checked+.mx_DevTools_tgl-btn:after{left:50%}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn{padding:2px;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:sans-serif;-webkit-perspective:100px;perspective:100px}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:after,.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:before{display:inline-block;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:4px}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:after{content:attr(data-tg-on);background:#02c66f;-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:before{background:#ff3a19;content:attr(data-tg-off)}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:active:before{-webkit-transform:rotateY(-20deg);transform:rotateY(-20deg)}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:after{-webkit-transform:rotateY(0);transform:rotateY(0);left:0;background:#7fc6a6}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:active:after{-webkit-transform:rotateY(20deg);transform:rotateY(20deg)}.mx_DevTools_VerificationRequest{border:1px solid #ccc;border-radius:3px;padding:1px 5px;margin-bottom:6px;font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji}.mx_DevTools_VerificationRequest dl{display:grid;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto;margin:0}.mx_DevTools_VerificationRequest dd{grid-column-start:2}.mx_DevTools_VerificationRequest dd:empty{color:#666}.mx_DevTools_VerificationRequest dd:empty:after{content:"(empty)"}.mx_DevTools_VerificationRequest dt{font-weight:700;grid-column-start:1}.mx_DevTools_VerificationRequest dt:after{content:":"}.mx_DevTools_SettingsExplorer table{width:100%;table-layout:fixed;border-collapse:collapse}.mx_DevTools_SettingsExplorer table th{border-bottom:1px solid #0dbd8b;text-align:left}.mx_DevTools_SettingsExplorer table td,.mx_DevTools_SettingsExplorer table th{width:360px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_DevTools_SettingsExplorer table td+td,.mx_DevTools_SettingsExplorer table th+th{width:auto}.mx_DevTools_SettingsExplorer table tr:hover{background-color:rgba(13,189,139,.5)}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_mutable{background-color:#0dbd8b}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_immutable{background-color:#ff4b55}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_edit{float:right;margin-right:16px}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_warning{border:2px solid #ff4b55;border-radius:4px;padding:4px;margin-bottom:8px}.mx_EditCommunityPrototypeDialog.mx_Dialog_fixedWidth{width:360px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content{margin-bottom:12px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_AccessibleButton.mx_AccessibleButton_kind_primary{display:block;height:32px;font-size:1.6rem;line-height:32px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_rowAvatar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer{margin-top:20px;margin-bottom:20px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_avatar,.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar{width:96px;height:96px;border-radius:96px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar{background-color:#368bd6}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar:before{display:inline-block;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:96px;mask-size:96px;width:96px;height:96px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg);mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg)}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip{margin-left:20px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip>b,.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip>span{display:block;color:#61708b}.mx_FeedbackDialog hr{margin:24px 0;border-color:#e7e7e7}.mx_FeedbackDialog .mx_Dialog_content{margin-bottom:24px}.mx_FeedbackDialog .mx_Dialog_content>h2{margin-bottom:32px}.mx_FeedbackDialog .mx_FeedbackDialog_section{position:relative;padding-left:52px}.mx_FeedbackDialog .mx_FeedbackDialog_section>p{color:#8d99a5}.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link,.mx_FeedbackDialog .mx_FeedbackDialog_section a{color:#0dbd8b;text-decoration:underline}.mx_FeedbackDialog .mx_FeedbackDialog_section:after,.mx_FeedbackDialog .mx_FeedbackDialog_section:before{content:"";position:absolute;width:40px;height:40px;left:0;top:0}.mx_FeedbackDialog .mx_FeedbackDialog_section:before{background-color:#c1c6cd;border-radius:20px}.mx_FeedbackDialog .mx_FeedbackDialog_section:after{background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:24px;mask-size:24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_FeedbackDialog .mx_FeedbackDialog_reportBug:after{-webkit-mask-image:url(../../img/feather-customised/bug.3dc7afa.svg);mask-image:url(../../img/feather-customised/bug.3dc7afa.svg)}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:20px;-webkit-transition:font-size 1s,border .5s;transition:font-size 1s,border .5s;border-radius:50%;border:2px solid transparent;margin-top:12px;margin-bottom:24px;vertical-align:top;cursor:pointer}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton input[type=radio]+div{display:none}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton .mx_RadioButton_content{background:#c1c6cd;width:40px;height:40px;text-align:center;line-height:40px;border-radius:20px;margin:5px}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton .mx_RadioButton_spacer{display:none}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton+.mx_RadioButton{margin-left:16px}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton_checked{font-size:24px;border-color:#0dbd8b}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp:after{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_GroupAddressPicker_checkboxContainer{margin-top:10px;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_HostSignupDialog{width:90vw;max-width:580px;height:80vh;max-height:600px;background-color:#fff}.mx_HostSignupDialog .mx_HostSignupDialog_info{text-align:center}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_content_top{margin-bottom:24px}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_paragraphs{text-align:left;padding-left:25%;padding-right:25%}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons{margin-bottom:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons button{padding:12px;margin:0 16px}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer img{padding-right:5px}.mx_HostSignupDialog iframe{width:100%;height:100%;border:none;background-color:#fff;min-height:540px}.mx_HostSignupDialog_text_dark{color:#2e2f32}.mx_HostSignupDialog_text_light{color:#737d8c}.mx_HostSignup_maximize_button{-webkit-mask:url(../../img/feather-customised/maximise.dc32127.svg);mask:url(../../img/feather-customised/maximise.dc32127.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;right:10px}.mx_HostSignup_maximize_button,.mx_HostSignup_minimize_button{width:14px;height:14px;background-color:#c1c1c1;cursor:pointer;position:absolute;top:10px}.mx_HostSignup_minimize_button{-webkit-mask:url(../../img/feather-customised/minimise.aec9142.svg);mask:url(../../img/feather-customised/minimise.aec9142.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;right:25px}.mx_HostSignup_persisted{width:90vw;max-width:580px;height:80vh;max-height:600px;top:0;left:0;position:fixed;display:none}.mx_HostSignupDialog_minimized{position:fixed;bottom:80px;right:26px;width:314px;height:217px;overflow:hidden}.mx_HostSignupDialog_minimized.mx_Dialog{padding:12px}.mx_HostSignupDialog_minimized .mx_Dialog_title{text-align:left!important;padding-left:20px;font-size:1.5rem}.mx_HostSignupDialog_minimized iframe{width:100%;height:100%;border:none;background-color:#fff}.mx_IncomingSasDialog_opponentProfile_image{position:relative}.mx_IncomingSasDialog_opponentProfile h2{display:inline-block;margin-left:10px}.mx_InviteDialog_addressBar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_InviteDialog_addressBar .mx_InviteDialog_editor{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;background-color:#f3f8fd;border-radius:4px;min-height:25px;padding-left:8px;overflow-x:hidden;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_InviteDialog_addressBar .mx_InviteDialog_editor .mx_InviteDialog_userTile{margin:6px 6px 0 0;display:inline-block;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mx_InviteDialog_addressBar .mx_InviteDialog_editor>input[type=text]{margin:6px 0!important;height:24px;line-height:2.4rem;font-size:1.4rem;padding-left:12px;border:0!important;outline:0!important;resize:none;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:40%;-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important;color:#2e2f32!important}.mx_InviteDialog_addressBar .mx_InviteDialog_goButton{min-width:48px;margin-left:10px;height:25px;line-height:2.5rem}.mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner .mx_Spinner{width:20px;height:20px;margin-left:5px;display:inline-block;vertical-align:middle}.mx_InviteDialog_section{padding-bottom:10px}.mx_InviteDialog_section h3{font-size:1.2rem;color:#61708b;font-weight:700;text-transform:uppercase}.mx_InviteDialog_section .mx_InviteDialog_subname{margin-bottom:10px;margin-top:-10px;font-size:1.2rem;color:#61708b}.mx_InviteDialog_roomTile{cursor:pointer;padding:5px 10px}.mx_InviteDialog_roomTile:hover{background-color:#f3f8fd;border-radius:4px}.mx_InviteDialog_roomTile *{vertical-align:middle}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack{display:inline-block;position:relative;width:36px;height:36px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack>*{position:absolute;top:0;left:0}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected{width:36px;height:36px;border-radius:36px;background-color:#368bd6;display:inline-block;position:relative}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected:before{content:"";width:24px;height:24px;grid-column:1;grid-row:1;-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;top:6px;left:6px;background-color:#fff}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_nameStack{display:inline-block}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_name{font-weight:600;font-size:1.4rem;color:#2e2f32;margin-left:7px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_userId{font-size:1.2rem;color:#61708b;margin-left:7px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_time{text-align:right;font-size:1.2rem;color:#61708b;float:right;line-height:3.6rem}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_highlight{font-weight:900}.mx_InviteDialog_userTile{margin-right:8px}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill{background-color:#368bd6;border-radius:12px;display:inline-block;height:24px;line-height:2.4rem;padding-left:8px;padding-right:8px;color:#fff}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_avatar{border-radius:20px;position:relative;left:-5px;top:2px}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name,.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill img.mx_InviteDialog_userTile_avatar{vertical-align:top}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_threepidAvatar{background-color:#fff}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove{display:inline-block;margin-left:4px}.mx_InviteDialog{height:590px;padding-left:20px}.mx_InviteDialog_userSections{margin-top:10px;overflow-y:auto;padding-right:45px;height:455px}.mx_InviteDialog_addressBar,.mx_InviteDialog_helpText{margin-right:45px}.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link{padding:0}.mx_KeyboardShortcutsDialog{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-bottom:-50px;max-height:1100px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category{width:33.3333%;margin:0 0 40px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category>div{padding-left:5px}.mx_KeyboardShortcutsDialog h3{margin:0 0 10px}.mx_KeyboardShortcutsDialog h5{margin:15px 0 5px;font-weight:400}.mx_KeyboardShortcutsDialog kbd{padding:5px;border-radius:4px;background-color:#f3f8fd;margin-right:5px;min-width:20px;text-align:center;display:inline-block;border:1px solid #e9edf1;-webkit-box-shadow:0 2px #e9edf1;box-shadow:0 2px #e9edf1;margin-bottom:4px;text-transform:capitalize}.mx_KeyboardShortcutsDialog kbd+kbd{margin-left:5px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_inline div{display:inline}.mx_MessageEditHistoryDialog .mx_Dialog_header>.mx_Dialog_title{text-align:center}.mx_MessageEditHistoryDialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-height:60vh}.mx_MessageEditHistoryDialog_scrollPanel{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.mx_MessageEditHistoryDialog_error{color:#ff4b55;text-align:center}.mx_MessageEditHistoryDialog_edits{list-style-type:none;font-size:1.4rem;padding:0;color:#2e2f32}.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_deletion,.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_insertion{padding:0 2px}.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_deletion{color:#ff4c55;background-color:rgba(255,76,85,.1);text-decoration:line-through}.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_insertion{color:#1aa97b;background-color:rgba(26,169,123,.1);text-decoration:underline}.mx_MessageEditHistoryDialog_edits .mx_EventTile_content,.mx_MessageEditHistoryDialog_edits .mx_EventTile_line{margin-right:0}.mx_MessageEditHistoryDialog_edits .mx_MessageActionBar .mx_AccessibleButton{font-size:1rem;padding:0 8px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning{margin-bottom:24px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning>img{vertical-align:middle;margin-right:8px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons{float:right;margin-top:24px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:8px}.mx_ModalWidgetDialog iframe{width:100%;height:450px;border:0;border-radius:8px}.mx_NewSessionReviewDialog_header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:0}.mx_NewSessionReviewDialog_headerIcon{width:24px;height:24px;margin-right:4px;position:relative}.mx_NewSessionReviewDialog_deviceName{font-weight:600}.mx_NewSessionReviewDialog_deviceID{font-size:1.2rem;color:#8d99a5}.mx_RegistrationEmailPromptDialog{width:417px}.mx_RegistrationEmailPromptDialog .mx_Dialog_content{margin-bottom:24px;color:#8d99a5}.mx_RegistrationEmailPromptDialog .mx_Dialog_primary{width:100%}.mx_RoomSettingsDialog_settingsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_RoomSettingsDialog_securityIcon:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_RoomSettingsDialog_rolesIcon:before{-webkit-mask-image:url(../../img/element-icons/room/settings/roles.bad9a9e.svg);mask-image:url(../../img/element-icons/room/settings/roles.bad9a9e.svg)}.mx_RoomSettingsDialog_notificationsIcon:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RoomSettingsDialog_bridgesIcon:before{-webkit-mask-image:url(../../img/feather-customised/bridge.b2ca042.svg);mask-image:url(../../img/feather-customised/bridge.b2ca042.svg)}.mx_RoomSettingsDialog_warningIcon:before{-webkit-mask-image:url(../../img/element-icons/room/settings/advanced.e079c15.svg);mask-image:url(../../img/element-icons/room/settings/advanced.e079c15.svg)}.mx_RoomSettingsDialog .mx_Dialog_title{-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 auto;padding-right:80px}.mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before{-webkit-mask:url(../../img/feather-customised/image.a8671b8.svg);mask:url(../../img/feather-customised/image.a8671b8.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:36px;mask-size:36px;-webkit-mask-position:center;mask-position:center}.mx_RoomSettingsDialog_BridgeList{padding:0}.mx_RoomSettingsDialog_BridgeList .mx_AccessibleButton{display:inline;margin:0;padding:0}.mx_RoomSettingsDialog_BridgeList li{list-style-type:none;padding:5px;margin-bottom:8px;border:1px solid transparent;border-radius:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon{float:left;padding-right:10px}.mx_RoomSettingsDialog_BridgeList li .column-icon *{border-radius:5px;border:1px solid #e3e8f0}.mx_RoomSettingsDialog_BridgeList li .column-icon .noProtocolIcon{width:48px;height:48px;background:#e3e8f0;border-radius:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon{float:left;margin-right:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon img{border-radius:5px;border-width:1px;border-color:transparent}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon span{left:auto}.mx_RoomSettingsDialog_BridgeList li .column-data{display:inline-block;width:85%}.mx_RoomSettingsDialog_BridgeList li .column-data>h3{margin-top:0;margin-bottom:0;font-size:16pt;color:#2e2f32}.mx_RoomSettingsDialog_BridgeList li .column-data>*{margin-top:4px;margin-bottom:0}.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details{color:#2e2f32;font-weight:600}.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details .channel{margin-left:5px}.mx_RoomSettingsDialog_BridgeList li .column-data .metadata{color:#61708b;margin-bottom:0;overflow-y:visible;text-overflow:ellipsis;white-space:normal;padding:0}.mx_RoomSettingsDialog_BridgeList li .column-data .metadata>li{padding:0;border:0}.mx_RoomUpgradeDialog{padding-right:70px}.mx_RoomUpgradeWarningDialog{max-width:38vw;width:38vw}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag{font-weight:700}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-left:8px;float:right}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content{padding-right:85px;color:#2e2f32}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content hr{border-color:#2e2f32;opacity:.1;border-bottom:none}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul{padding:16px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul li:nth-child(n+2){margin-top:16px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timestamp{display:inline-block;width:115px;color:#61708b;line-height:24px;vertical-align:top}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline{display:inline-block;width:calc(100% - 155px)}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_timeline_header span{margin-left:8px;vertical-align:middle}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn{position:relative;margin-top:8px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_ServerOfflineDialog_content_context_txn_desc{width:calc(100% - 100px)}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_AccessibleButton{float:right;padding:0}.mx_ServerPickerDialog{width:468px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ServerPickerDialog .mx_Dialog_content{margin-bottom:0}.mx_ServerPickerDialog .mx_Dialog_content>p{color:#737d8c;font-size:1.4rem;margin:16px 0}.mx_ServerPickerDialog .mx_Dialog_content>p:first-of-type{margin-bottom:40px}.mx_ServerPickerDialog .mx_Dialog_content>p:last-of-type{margin:0 24px 24px}.mx_ServerPickerDialog .mx_Dialog_content>h4{font-size:1.5rem;font-weight:600;color:#737d8c;margin-left:8px}.mx_ServerPickerDialog .mx_Dialog_content>a{color:#0dbd8b;margin-left:8px}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserverRadio input[type=radio]+div{margin-top:auto;margin-bottom:auto}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver{border-top:none;border-left:none;border-right:none;border-radius:unset}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver>input{padding-left:0}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver>label{margin-left:0}.mx_ServerPickerDialog .mx_AccessibleButton_kind_primary{width:calc(100% - 64px);margin:0 8px;padding:15px 18px}.mx_SetEmailDialog_email_input{border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:rgba(74,74,74,.9);background-color:#fff;font-size:1.5rem;width:100%;max-width:280px;margin-bottom:10px}.mx_SetEmailDialog_email_input:focus{outline:none;-webkit-box-shadow:none;box-shadow:none;border:1px solid #0dbd8b}.mx_RoomSettingsDialog,.mx_UserSettingsDialog{width:90vw;max-width:1000px;height:80vh}.mx_RoomSettingsDialog .mx_TabbedView,.mx_UserSettingsDialog .mx_TabbedView{top:65px}.mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab{-webkit-box-sizing:border-box;box-sizing:border-box;min-width:580px;padding-right:100px;padding-bottom:100px}.mx_RoomSettingsDialog .mx_Dialog_title,.mx_UserSettingsDialog .mx_Dialog_title{margin-bottom:24px}.mx_ShareDialog hr{margin-top:25px;margin-bottom:25px;border-color:#747474}.mx_ShareDialog_content{margin:10px 0}.mx_ShareDialog_matrixto{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-radius:5px;border:1px solid #747474;margin-bottom:10px;margin-top:30px;padding:10px}.mx_ShareDialog_matrixto a{text-decoration:none}.mx_ShareDialog_matrixto_link{-ms-flex-negative:1;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.mx_ShareDialog_matrixto_copy{-ms-flex-negative:0;flex-shrink:0;cursor:pointer;margin-left:20px;display:inherit}.mx_ShareDialog_matrixto_copy>div{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);background-color:#2e2f32;margin-left:5px;width:20px;height:20px;background-repeat:no-repeat}.mx_ShareDialog_split{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_ShareDialog_qrcode_container{float:left;height:256px;width:256px;margin-right:64px}.mx_ShareDialog_qrcode_container+.mx_ShareDialog_social_container{width:299px}.mx_ShareDialog_social_container{display:inline-block}.mx_ShareDialog_social_icon{display:inline-grid;margin-right:10px;margin-bottom:10px}.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2{margin-bottom:2px}.mx_SlashCommandHelpDialog .mx_Dialog_content{margin-top:12px;margin-bottom:34px}.mx_SpaceSettingsDialog{width:480px;color:#2e2f32}.mx_SpaceSettingsDialog .mx_SpaceSettings_errorText{font-weight:600;font-size:1.2rem;line-height:1.5rem;color:#ff4b55;margin-bottom:28px}.mx_SpaceSettingsDialog .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-left:16px}.mx_SpaceSettingsDialog .mx_AccessibleButton_kind_danger{margin-top:28px}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:64px}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton{display:inline-block}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton_kind_link{margin-left:auto}.mx_SpaceSettingsDialog .mx_AccessibleButton_hasKind{padding:8px 22px}.mx_TabbedIntegrationManagerDialog .mx_Dialog{width:60%;height:70%;overflow:hidden;padding:0;max-width:none;max-height:none;position:relative}.mx_TabbedIntegrationManagerDialog_container{position:absolute;top:0;bottom:0;left:0;right:0}.mx_TabbedIntegrationManagerDialog_container .mx_TabbedIntegrationManagerDialog_currentManager{width:100%;height:100%;border-top:1px solid #0dbd8b}.mx_TabbedIntegrationManagerDialog_container .mx_TabbedIntegrationManagerDialog_currentManager iframe{background-color:#fff;border:0;width:100%;height:100%}.mx_TabbedIntegrationManagerDialog_tab{display:inline-block;border:1px solid #0dbd8b;border-bottom:0;border-top-left-radius:3px;border-top-right-radius:3px;padding:10px 8px;margin-right:5px}.mx_TabbedIntegrationManagerDialog_currentTab{background-color:#0dbd8b;color:#fff}.mx_TermsDialog_forIntegrationManager .mx_Dialog{width:60%;height:70%;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_TermsDialog_termsTableHeader{font-weight:700;text-align:left}.mx_TermsDialog_termsTable{font-size:1.2rem;width:100%}.mx_TermsDialog_service,.mx_TermsDialog_summary{padding-right:10px}.mx_TermsDialog_link{display:inline-block;-webkit-mask-image:url(../../img/external-link.a8d3e9b.svg);mask-image:url(../../img/external-link.a8d3e9b.svg);background-color:#0dbd8b;width:10px;height:10px}.mx_UntrustedDeviceDialog .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UntrustedDeviceDialog .mx_Dialog_title .mx_E2EIcon{margin-left:0}.mx_UploadConfirmDialog_fileIcon{margin-right:5px}.mx_UploadConfirmDialog_previewOuter{text-align:center}.mx_UploadConfirmDialog_previewInner{display:inline-block;text-align:left}.mx_UploadConfirmDialog_imagePreview{max-height:300px;max-width:100%;border-radius:4px;border:1px solid #c1c1c1}.mx_UserSettingsDialog_settingsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserSettingsDialog_appearanceIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/appearance.cdebd40.svg);mask-image:url(../../img/element-icons/settings/appearance.cdebd40.svg)}.mx_UserSettingsDialog_voiceIcon:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_UserSettingsDialog_bellIcon:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserSettingsDialog_preferencesIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/preference.82bfabd.svg);mask-image:url(../../img/element-icons/settings/preference.82bfabd.svg)}.mx_UserSettingsDialog_securityIcon:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_UserSettingsDialog_helpIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/help.68b703f.svg);mask-image:url(../../img/element-icons/settings/help.68b703f.svg)}.mx_UserSettingsDialog_labsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);mask-image:url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg)}.mx_UserSettingsDialog_mjolnirIcon:before{-webkit-mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg);mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg)}.mx_UserSettingsDialog_flairIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/flair.4227a88.svg);mask-image:url(../../img/element-icons/settings/flair.4227a88.svg)}.mx_WidgetCapabilitiesPromptDialog .text-muted{font-size:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_content{margin-bottom:16px}.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap{margin-top:20px;font-size:1.5rem;line-height:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap .mx_WidgetCapabilitiesPromptDialog_byline{color:#61708b;margin-left:26px;font-size:1.2rem;line-height:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_buttons{margin-top:40px}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag{line-height:calc(1.4rem + 14px);color:#61708b;font-size:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-right:8px;width:3.2rem;height:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch.mx_ToggleSwitch_on>.mx_ToggleSwitch_ball{left:calc(100% - 1.5rem)}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch .mx_ToggleSwitch_ball{width:1.5rem;height:1.5rem;border-radius:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-right:8px}.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_AccessSecretStorageDialog_reset{position:relative;padding-left:24px;margin-top:7px}.mx_AccessSecretStorageDialog_reset:before{content:"";display:inline-block;position:absolute;height:16px;width:16px;left:0;top:2px;background-image:url(../../img/element-icons/warning-badge.de1033e.svg)}.mx_AccessSecretStorageDialog_reset .mx_AccessSecretStorageDialog_reset_link{color:#ff4b55}.mx_AccessSecretStorageDialog_titleWithIcon:before{content:"";display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_AccessSecretStorageDialog_resetBadge:before{background-image:url(../../img/element-icons/warning-badge.de1033e.svg);background-size:24px;background-color:transparent}.mx_AccessSecretStorageDialog_secureBackupTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_AccessSecretStorageDialog_securePhraseTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_AccessSecretStorageDialog_keyStatus{height:30px}.mx_AccessSecretStorageDialog_passPhraseInput{width:300px;border:1px solid #0dbd8b;border-radius:5px;padding:10px}.mx_AccessSecretStorageDialog_recoveryKeyEntry{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText{margin:16px}.mx_AccessSecretStorageDialog_recoveryKeyFeedback:before{content:"";display:inline-block;vertical-align:bottom;width:20px;height:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;margin-right:5px}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid{color:#0dbd8b}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid:before{-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid{color:#ff4b55}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid:before{-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput{display:none}.mx_CreateCrossSigningDialog{width:560px}.mx_CreateCrossSigningDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateCrossSigningDialog .mx_Dialog_title,.mx_CreateKeyBackupDialog .mx_Dialog_title{margin-bottom:1em}.mx_CreateKeyBackupDialog_primaryContainer{padding:20px}.mx_CreateKeyBackupDialog_primaryContainer:after{content:"";clear:both;display:block}.mx_CreateKeyBackupDialog_passPhraseContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_CreateKeyBackupDialog_passPhraseInput{-webkit-box-flex:0;-ms-flex:none;flex:none;width:250px;border:1px solid #0dbd8b;border-radius:5px;padding:10px;margin-bottom:1em}.mx_CreateKeyBackupDialog_passPhraseMatch{margin-left:20px}.mx_CreateKeyBackupDialog_recoveryKeyHeader{margin-bottom:1em}.mx_CreateKeyBackupDialog_recoveryKeyContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateKeyBackupDialog_recoveryKey{width:262px;padding:20px;color:#888;background-color:#f7f7f7;margin-right:12px}.mx_CreateKeyBackupDialog_recoveryKeyButtons{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CreateKeyBackupDialog_recoveryKeyButtons button{-webkit-box-flex:1;-ms-flex:1;flex:1;white-space:nowrap}.mx_CreateKeyBackupDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateSecretStorageDialog{width:560px}.mx_CreateSecretStorageDialog .mx_SettingsFlag{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateSecretStorageDialog .mx_SettingsFlag_label{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;font-weight:600}.mx_CreateSecretStorageDialog .mx_ToggleSwitch{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:30px}.mx_CreateSecretStorageDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateSecretStorageDialog .mx_Dialog_title{margin-bottom:1em}.mx_CreateSecretStorageDialog_titleWithIcon:before{content:"";display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_CreateSecretStorageDialog_secureBackupTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_CreateSecretStorageDialog_securePhraseTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_CreateSecretStorageDialog_centeredBody,.mx_CreateSecretStorageDialog_centeredTitle{text-align:center}.mx_CreateSecretStorageDialog_primaryContainer{padding-top:20px}.mx_CreateSecretStorageDialog_primaryContainer:after{content:"";clear:both;display:block}.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton{margin-bottom:16px;padding:11px}.mx_CreateSecretStorageDialog_optionTitle{color:#45474a;font-weight:600;font-size:1.8rem;padding-bottom:10px}.mx_CreateSecretStorageDialog_optionIcon{display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_CreateSecretStorageDialog_optionIcon_securePhrase{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_CreateSecretStorageDialog_optionIcon_secureBackup{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_CreateSecretStorageDialog_passPhraseContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_Field.mx_CreateSecretStorageDialog_passPhraseField{margin-top:0}.mx_CreateSecretStorageDialog_passPhraseMatch{width:200px;margin-left:20px}.mx_CreateSecretStorageDialog_recoveryKeyContainer{width:380px;margin-left:auto;margin-right:auto}.mx_CreateSecretStorageDialog_recoveryKey{font-weight:700;text-align:center;padding:20px;color:#888;background-color:#f7f7f7;border-radius:6px;word-spacing:1em;margin-bottom:20px}.mx_CreateSecretStorageDialog_recoveryKeyButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton{width:160px;padding-left:0;padding-right:0;white-space:nowrap}.mx_CreateSecretStorageDialog_continueSpinner{margin-top:33px;text-align:right}.mx_CreateSecretStorageDialog_continueSpinner img{width:20px;height:20px}.mx_KeyBackupFailedDialog .mx_Dialog_title{margin-bottom:32px}.mx_KeyBackupFailedDialog_title{position:relative;padding-left:45px;padding-bottom:10px}.mx_KeyBackupFailedDialog_title:before{-webkit-mask:url(../../img/e2e/lock-warning-filled.993fb6c.svg);mask:url(../../img/e2e/lock-warning-filled.993fb6c.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#2e2f32;content:"";position:absolute;top:-6px;right:0;bottom:0;left:0}.mx_KeyBackupFailedDialog .mx_Dialog_buttons{margin-top:36px}.mx_RestoreKeyBackupDialog_keyStatus{height:30px}.mx_RestoreKeyBackupDialog_primaryContainer{padding:20px}.mx_RestoreKeyBackupDialog_passPhraseInput,.mx_RestoreKeyBackupDialog_recoveryKeyInput{width:300px;border:1px solid #0dbd8b;border-radius:5px;padding:10px}.mx_RestoreKeyBackupDialog_content>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:110px}.mx_NetworkDropdown{height:32px;position:relative;padding-right:32px;margin-left:auto;margin-right:9px;margin-top:12px}.mx_NetworkDropdown,.mx_NetworkDropdown .mx_AccessibleButton{width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_NetworkDropdown_menu{min-width:204px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border:1px solid #c1c1c1;background-color:#fff;max-height:calc(100vh - 20px);overflow-y:auto}.mx_NetworkDropdown_menu_network{font-weight:700}.mx_NetworkDropdown_server{padding:12px 0;border-bottom:1px solid #9fa9ba}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title{padding:0 10px;font-size:1.5rem;font-weight:600;line-height:2rem;margin-bottom:4px;position:relative}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title .mx_AccessibleButton{position:absolute;display:inline;right:10px;height:16px;width:16px;margin-top:2px}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title .mx_AccessibleButton:after{content:"";position:absolute;width:16px;height:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_subtitle{padding:0 10px;font-size:1rem;line-height:1.4rem;margin-top:-4px;margin-bottom:4px;color:#61708b}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network{font-size:1.2rem;line-height:1.6rem;padding:4px 10px;cursor:pointer;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network[aria-checked=true]:after{content:"";position:absolute;width:16px;height:16px;right:10px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_NetworkDropdown_server_add:hover,.mx_NetworkDropdown_server_network:hover{background-color:#f3f8fd}.mx_NetworkDropdown_server_add{padding:16px 10px 16px 32px;position:relative;border-radius:0 0 4px 4px}.mx_NetworkDropdown_server_add:before{content:"";position:absolute;width:16px;height:16px;left:7px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/plus.38ae979.svg);mask-image:url(../../img/feather-customised/plus.38ae979.svg);background-color:#61708b}.mx_NetworkDropdown_handle{position:relative}.mx_NetworkDropdown_handle:after{content:"";position:absolute;width:26px;height:26px;right:-27.5px;top:-3px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);background-color:#2e2f32}.mx_NetworkDropdown_handle .mx_NetworkDropdown_handle_server{color:#61708b;font-size:1.2rem}.mx_NetworkDropdown_dialog .mx_Dialog{width:45vw}.mx_AccessibleButton{cursor:pointer}.mx_AccessibleButton_disabled{cursor:default}.mx_AccessibleButton_hasKind{padding:7px 18px;text-align:center;border-radius:8px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:1.4rem}.mx_AccessibleButton_kind_primary{color:#fff;background-color:#0dbd8b;font-weight:600}.mx_AccessibleButton_kind_primary_outline{color:#0dbd8b;background-color:#fff;border:1px solid #0dbd8b;font-weight:600}.mx_AccessibleButton_kind_secondary{color:#0dbd8b;font-weight:600}.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm{padding:5px 12px;color:#fff;background-color:#0dbd8b}.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_kind_danger{color:#fff;background-color:#ff4b55}.mx_AccessibleButton_kind_danger_outline{color:#ff4b55;background-color:#fff;border:1px solid #ff4b55}.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled{color:#fff;background-color:#f5b6bb}.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled{color:#f5b6bb;border-color:#f5b6bb}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm{padding:5px 12px;color:#fff;background-color:#ff4b55}.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled{color:#fff;background-color:#f5b6bb}.mx_AccessibleButton_kind_link{color:#0dbd8b;background-color:transparent}.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm{padding:5px 12px;color:#0dbd8b;background-color:transparent}.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled{opacity:.4}.mx_AddressSelector{position:absolute;background-color:#fff;width:485px;max-height:116px;overflow-y:auto;border-radius:3px;border:1px solid #0dbd8b;cursor:pointer;z-index:1}.mx_AddressSelector.mx_AddressSelector_empty{display:none}.mx_AddressSelector_addressListElement .mx_AddressTile{background-color:#fff;border:1px solid #fff}.mx_AddressSelector_addressListElement.mx_AddressSelector_selected{background-color:#f2f5f8}.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile{background-color:#f2f5f8;border:1px solid #f2f5f8}.mx_AddressTile{display:inline-block;border-radius:3px;background-color:rgba(74,73,74,.1);border:1px solid #e7e7e7;line-height:2.6rem;color:#2e2f32;font-size:1.4rem;font-weight:400;margin-right:4px}.mx_AddressTile.mx_AddressTile_error{background-color:rgba(255,0,100,.1);color:#ff4b55;border-color:#ff4b55}.mx_AddressTile_network{padding-right:4px}.mx_AddressTile_avatar,.mx_AddressTile_network{display:inline-block;position:relative;padding-left:2px;vertical-align:middle}.mx_AddressTile_avatar{padding-right:7px}.mx_AddressTile_mx{display:inline-block;margin:0;border:0;padding:0}.mx_AddressTile_name{display:inline-block;padding-right:4px;font-weight:600;overflow:hidden;height:26px;vertical-align:middle}.mx_AddressTile_name.mx_AddressTile_justified{width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_id{display:inline-block;padding-right:11px}.mx_AddressTile_id.mx_AddressTile_justified{width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_unknownMx{display:inline-block;font-weight:600;padding-right:11px}.mx_AddressTile_unknownMxl.mx_AddressTile_justified{width:380px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_email{display:inline-block;font-weight:600;padding-right:11px}.mx_AddressTile_email.mx_AddressTile_justified{width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_unknown{display:inline-block;padding-right:11px}.mx_AddressTile_unknown.mx_AddressTile_justified{width:380px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_dismiss{display:inline-block;padding-right:11px;padding-left:1px;cursor:pointer}.mx_AddressTile_dismiss object{pointer-events:none}.mx_DesktopBuildsNotice{text-align:center;padding:0 16px}.mx_DesktopBuildsNotice>*{vertical-align:middle}.mx_DesktopBuildsNotice>img{margin-right:8px}.mx_desktopCapturerSourcePicker{overflow:hidden}.mx_desktopCapturerSourcePicker_tabLabels{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 0 8px}.mx_desktopCapturerSourcePicker_tabLabel,.mx_desktopCapturerSourcePicker_tabLabel_selected{width:100%;text-align:center;border-radius:8px;padding:8px 0;font-size:1.3rem}.mx_desktopCapturerSourcePicker_tabLabel_selected{background-color:#0dbd8b;color:#fff}.mx_desktopCapturerSourcePicker_panel{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;height:500px;overflow:overlay}.mx_desktopCapturerSourcePicker_stream_button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:8px;border-radius:4px}.mx_desktopCapturerSourcePicker_stream_button:focus,.mx_desktopCapturerSourcePicker_stream_button:hover{background:#fff}.mx_desktopCapturerSourcePicker_stream_thumbnail{margin:4px;width:312px}.mx_desktopCapturerSourcePicker_stream_name{margin:0 4px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:312px}.mx_DirectorySearchBox{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:9px;padding-right:9px}.mx_DirectorySearchBox_joinButton{display:table-cell;padding:3px 10px;background-color:#f2f5f8;border-radius:3px;background-image:url(../../img/icon-return.cb24475.svg);background-position:8px 70%;background-repeat:no-repeat;text-indent:18px;font-weight:600;font-size:1.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.mx_DirectorySearchBox_clear{background-color:#ff4b55;-webkit-mask:url(../../img/cancel.4b9715b.svg);mask:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:10px;mask-size:10px;width:15px;height:15px;cursor:pointer}.mx_Dropdown{position:relative;color:#2e2f32}.mx_Dropdown_disabled{opacity:.3}.mx_Dropdown_input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;border-radius:3px;border:1px solid #c7c7c7;font-size:1.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_Dropdown_input.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_Dropdown_input:focus{border-color:#238cf5}.mx_Dropdown_input.mx_AccessibleButton:focus{-webkit-filter:none;filter:none}.mx_Dropdown_arrow{width:10px;height:6px;padding-right:9px;-webkit-mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_Dropdown_option{height:35px;line-height:3.5rem;padding-left:8px;padding-right:8px}.mx_Dropdown_input>.mx_Dropdown_option{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Dropdown_input>.mx_Dropdown_option,.mx_Dropdown_option div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_Dropdown_option .mx_Dropdown_option_emoji,.mx_Dropdown_option img{margin:5px;width:16px;vertical-align:middle}.mx_Dropdown_option_emoji{font-size:1.6rem;line-height:1.6rem}input.mx_Dropdown_option,input.mx_Dropdown_option:focus{font-weight:400;border:0;padding-top:0;padding-bottom:0;width:60%}.mx_Dropdown_menu{position:absolute;left:-1px;right:-1px;top:100%;z-index:2;margin:0;padding:0;border-radius:3px;border:1px solid #238cf5;background-color:#fff;max-height:200px;overflow-y:auto}.mx_Dropdown_menu .mx_Dropdown_option{height:auto;min-height:35px}.mx_Dropdown_menu .mx_Dropdown_option_highlight{background-color:#ddd}.mx_Dropdown_searchPrompt{font-weight:400;margin-left:5px;margin-bottom:5px}.mx_EditableItemList{margin-top:12px;margin-bottom:10px}.mx_EditableItem{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:5px}.mx_EditableItem_delete{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;margin-right:5px;cursor:pointer;vertical-align:middle;width:14px;height:14px;-webkit-mask-image:url(../../img/feather-customised/cancel.23c2689.svg);mask-image:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#ff4b55;-webkit-mask-size:100%;mask-size:100%}.mx_EditableItem_email{vertical-align:middle}.mx_EditableItem_promptText{margin-right:10px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.mx_EditableItem_confirmBtn{margin-right:5px}.mx_EditableItem_item{-webkit-box-flex:1;-ms-flex:auto 1 0px;flex:auto 1 0;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:calc(100% - 14px);overflow-x:hidden;text-overflow:ellipsis}.mx_EditableItemList_label{margin-bottom:5px}.mx_ErrorBoundary{width:100%;height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_ErrorBoundary,.mx_ErrorBoundary_body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ErrorBoundary_body{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:400px}.mx_ErrorBoundary_body .mx_AccessibleButton{margin-top:5px}.mx_EventListSummary{position:relative}.mx_TextualEvent.mx_EventListSummary_summary{font-size:1.4rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_EventListSummary_avatars{display:inline-block;margin-right:8px;padding-top:8px;line-height:1.2rem}.mx_EventListSummary_avatars .mx_BaseAvatar{margin-right:-4px;cursor:pointer}.mx_EventListSummary_toggle{color:#0dbd8b;cursor:pointer;float:right;margin-right:10px;margin-top:8px}.mx_EventListSummary_line{border-bottom:1px solid transparent;margin-left:63px;line-height:3rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary{font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary .mx_EventTile_line{line-height:2rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary_line{line-height:2.2rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary_toggle{margin-top:3px}.mx_MatrixChat_useCompactLayout .mx_TextualEvent.mx_EventListSummary_summary{font-size:1.3rem}.mx_FacePile .mx_FacePile_faces{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;vertical-align:middle}.mx_FacePile .mx_FacePile_faces>.mx_FacePile_face+.mx_FacePile_face{margin-right:-8px}.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_image{border:1px solid #fff}.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_initial{margin:1px}.mx_FacePile .mx_FacePile_faces .mx_FacePile_more{position:relative;border-radius:100%;width:30px;height:30px;background-color:hsla(0,0%,91%,.77)}.mx_FacePile .mx_FacePile_faces .mx_FacePile_more:before{content:"";z-index:1;position:absolute;top:0;left:0;height:inherit;width:inherit;background:#8d99a5;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_FacePile .mx_FacePile_summary{margin-left:12px;font-size:1.4rem;line-height:2.4rem;color:#8d99a5}.mx_Field{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;position:relative;margin:1em 0;border-radius:4px;-webkit-transition:border-color .25s;transition:border-color .25s;border:1px solid #e7e7e7}.mx_Field_prefix{border-right:1px solid #e7e7e7}.mx_Field_postfix{border-left:1px solid #e7e7e7}.mx_Field input,.mx_Field select,.mx_Field textarea{font-weight:400;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;border:none;border-radius:4px;padding:8px 9px;color:#2e2f32;background-color:#fff;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_Field select{-moz-appearance:none;-webkit-appearance:none}.mx_Field_select:before{content:"";position:absolute;top:15px;right:10px;width:10px;height:6px;-webkit-mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#2e2f32;z-index:1;pointer-events:none}.mx_Field:focus-within{border-color:#238cf5}.mx_Field input:focus,.mx_Field select:focus,.mx_Field textarea:focus{outline:0}.mx_Field input::-webkit-input-placeholder,.mx_Field textarea::-webkit-input-placeholder{-webkit-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::-moz-placeholder,.mx_Field textarea::-moz-placeholder{-moz-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input:-ms-input-placeholder,.mx_Field textarea:-ms-input-placeholder{-ms-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::-ms-input-placeholder,.mx_Field textarea::-ms-input-placeholder{-ms-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::placeholder,.mx_Field textarea::placeholder{-webkit-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input:placeholder-shown:focus::-webkit-input-placeholder,.mx_Field textarea:placeholder-shown:focus::-webkit-input-placeholder{-webkit-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::-moz-placeholder,.mx_Field textarea:placeholder-shown:focus::-moz-placeholder{-moz-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus:-ms-input-placeholder,.mx_Field textarea:placeholder-shown:focus:-ms-input-placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::-ms-input-placeholder,.mx_Field textarea:placeholder-shown:focus::-ms-input-placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:-moz-placeholder-shown:focus::placeholder,.mx_Field textarea:-moz-placeholder-shown:focus::placeholder{-moz-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:-ms-input-placeholder:focus::placeholder,.mx_Field textarea:-ms-input-placeholder:focus::placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::placeholder,.mx_Field textarea:placeholder-shown:focus::placeholder{-webkit-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field label{-webkit-transition:font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s;transition:font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s;color:#2e2f32;background-color:transparent;font-size:1.4rem;position:absolute;left:0;top:0;margin:7px 8px;padding:2px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 20px)}.mx_Field input:not(:-moz-placeholder-shown)+label,.mx_Field textarea:not(:-moz-placeholder-shown)+label{-moz-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field input:not(:-ms-input-placeholder)+label,.mx_Field textarea:not(:-ms-input-placeholder)+label{-ms-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field_labelAlwaysTopLeft label,.mx_Field input:focus+label,.mx_Field input:not(:placeholder-shown)+label,.mx_Field select+label,.mx_Field textarea:focus+label,.mx_Field textarea:not(:placeholder-shown)+label{-webkit-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field input:focus+label,.mx_Field select:focus+label,.mx_Field textarea:focus+label{color:#238cf5}.mx_Field input:disabled,.mx_Field input:disabled+label,.mx_Field select:disabled,.mx_Field select:disabled+label,.mx_Field textarea:disabled,.mx_Field textarea:disabled+label{background-color:#fff;color:#888}.mx_Field_valid.mx_Field,.mx_Field_valid.mx_Field:focus-within{border-color:#0dbd8b}.mx_Field_valid.mx_Field:focus-within label,.mx_Field_valid.mx_Field label{color:#0dbd8b}.mx_Field_invalid.mx_Field,.mx_Field_invalid.mx_Field:focus-within{border-color:#ff4b55}.mx_Field_invalid.mx_Field:focus-within label,.mx_Field_invalid.mx_Field label{color:#ff4b55}.mx_Field_tooltip{margin-top:-12px;margin-left:4px;width:200px}.mx_Field_tooltip.mx_Field_valid{-webkit-animation:mx_fadeout 1s 2s forwards;animation:mx_fadeout 1s 2s forwards}.mx_Field .mx_Dropdown_input{border:initial;border-radius:0;border-radius:initial}.mx_Field .mx_CountryDropdown{width:7.8rem}.mx_FormButton{line-height:1.6rem;padding:5px 15px;font-size:1.2rem;height:-webkit-min-content;height:-moz-min-content;height:min-content}.mx_FormButton:not(:last-child){margin-right:8px}.mx_FormButton.mx_AccessibleButton_kind_primary{color:#0dbd8b;background-color:rgba(3,179,129,.16)}.mx_FormButton.mx_AccessibleButton_kind_danger{color:#ff4b55;background-color:rgba(255,75,85,.16)}.mx_FormButton.mx_AccessibleButton_kind_secondary{color:#737d8c;border:1px solid #737d8c;background-color:unset}.mx_ImageView{width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_ImageView,.mx_ImageView_image_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}.mx_ImageView_image_wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mx_ImageView_image{pointer-events:all;-ms-flex-negative:0;flex-shrink:0}.mx_ImageView_panel{width:100%;height:68px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_ImageView_info_wrapper,.mx_ImageView_panel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ImageView_info_wrapper{pointer-events:all;padding-left:32px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:#fff}.mx_ImageView_info{padding-left:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_ImageView_info_sender{font-weight:700}.mx_ImageView_toolbar{padding-right:16px;pointer-events:all;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ImageView_button{margin-left:24px;display:block}.mx_ImageView_button:before{content:"";height:22px;width:22px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;display:block;background-color:#c1c6cd}.mx_ImageView_button_rotateCW:before{-webkit-mask-image:url(../../img/image-view/rotate-cw.60d903e.svg);mask-image:url(../../img/image-view/rotate-cw.60d903e.svg)}.mx_ImageView_button_rotateCCW:before{-webkit-mask-image:url(../../img/image-view/rotate-ccw.b28ae4a.svg);mask-image:url(../../img/image-view/rotate-ccw.b28ae4a.svg)}.mx_ImageView_button_zoomOut:before{-webkit-mask-image:url(../../img/image-view/zoom-out.8506f80.svg);mask-image:url(../../img/image-view/zoom-out.8506f80.svg)}.mx_ImageView_button_zoomIn:before{-webkit-mask-image:url(../../img/image-view/zoom-in.3b3f32e.svg);mask-image:url(../../img/image-view/zoom-in.3b3f32e.svg)}.mx_ImageView_button_download:before{-webkit-mask-image:url(../../img/image-view/download.2eac468.svg);mask-image:url(../../img/image-view/download.2eac468.svg)}.mx_ImageView_button_more:before{-webkit-mask-image:url(../../img/image-view/more.0427c6c.svg);mask-image:url(../../img/image-view/more.0427c6c.svg)}.mx_ImageView_button_close{border-radius:100%;background:#21262c}.mx_ImageView_button_close:before{width:32px;height:32px;-webkit-mask-image:url(../../img/image-view/close.97d1731.svg);mask-image:url(../../img/image-view/close.97d1731.svg);-webkit-mask-size:40%;mask-size:40%}.mx_InfoTooltip_icon,.mx_InfoTooltip_icon:before{width:16px;height:16px;display:inline-block}.mx_InfoTooltip_icon:before{background-color:#61708b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/info.dc07e19.svg);mask-image:url(../../img/element-icons/info.dc07e19.svg)}.mx_InlineSpinner{display:inline}.mx_InlineSpinner_spin img{margin:0 6px;vertical-align:-3px}.mx_InviteReason{position:relative;margin-bottom:1em}.mx_InviteReason .mx_InviteReason_reason{visibility:visible}.mx_InviteReason .mx_InviteReason_view{display:none;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;color:#737d8c}.mx_InviteReason .mx_InviteReason_view:before{content:"";margin-right:8px;background-color:#737d8c;-webkit-mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);display:inline-block;width:18px;height:14px}.mx_InviteReason_hidden .mx_InviteReason_reason{visibility:hidden}.mx_InviteReason_hidden .mx_InviteReason_view{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ManageIntegsButton_error{position:relative;float:right;cursor:not-allowed}.mx_ManageIntegsButton_error img{position:absolute;right:-5px;top:-5px}.mx_ManageIntegsButton_errorPopup{position:absolute;top:110%;left:-275%;width:550%;padding:30%;font-size:10pt;line-height:1.5em;border-radius:5px;background-color:#0dbd8b;color:#fff;text-align:center;z-index:1000}.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup{display:none}.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup{display:inline}.mx_MiniAvatarUploader{position:relative;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_MiniAvatarUploader .mx_Tooltip{display:inline-block;position:absolute;z-index:unset;width:-webkit-max-content;width:-moz-max-content;width:max-content;left:72px;top:0}.mx_MiniAvatarUploader:after,.mx_MiniAvatarUploader:before{content:"";position:absolute;height:26px;width:26px;right:-6px;bottom:-6px}.mx_MiniAvatarUploader:before{background-color:#fff;border-radius:50%;z-index:1}.mx_MiniAvatarUploader:after{background-color:#737d8c;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/camera.a81a395.svg);mask-image:url(../../img/element-icons/camera.a81a395.svg);-webkit-mask-size:16px;mask-size:16px;z-index:2}.mx_MiniAvatarUploader.mx_MiniAvatarUploader_busy:after{background:url(../../img/spinner.0b29ec9.gif) no-repeat 50%;background-size:80%;-webkit-mask:unset;mask:unset}.mx_MiniAvatarUploader_input{display:none}.mx_PowerSelector{width:100%}.mx_PowerSelector .mx_Field input,.mx_PowerSelector .mx_Field select{-webkit-box-sizing:border-box;box-sizing:border-box}progress.mx_ProgressBar{height:6px;width:60px;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:6px}progress.mx_ProgressBar::-moz-progress-bar{border-radius:6px}progress.mx_ProgressBar::-webkit-progress-bar,progress.mx_ProgressBar::-webkit-progress-value{border-radius:6px}progress.mx_ProgressBar{color:#0dbd8b}progress.mx_ProgressBar::-moz-progress-bar{background-color:#0dbd8b}progress.mx_ProgressBar::-webkit-progress-value{background-color:#0dbd8b}progress.mx_ProgressBar{background-color:rgba(141,151,165,.2)}progress.mx_ProgressBar::-webkit-progress-bar{background-color:rgba(141,151,165,.2)}progress.mx_ProgressBar ::-webkit-progress-value{-webkit-transition:width 1s;transition:width 1s}progress.mx_ProgressBar ::-moz-progress-bar{-moz-transition:padding-bottom 1s;transition:padding-bottom 1s;padding-bottom:var(--value);transform-origin:0 0;transform:rotate(-90deg) translateX(-15px);padding-left:15px;height:0}.mx_QRCode img{border-radius:8px}.mx_ReplyThread{margin-top:0}.mx_ReplyThread .mx_DateSeparator{font-size:1em!important;margin-top:0;margin-bottom:0;padding-bottom:1px;bottom:-5px}.mx_ReplyThread_show{cursor:pointer}blockquote.mx_ReplyThread{margin-left:0;padding-left:10px;border-left:4px solid #ddd}.mx_ResizeHandle{cursor:row-resize;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;z-index:100}.mx_ResizeHandle.mx_ResizeHandle_horizontal{margin:0 -5px;padding:0 5px;cursor:col-resize}.mx_ResizeHandle.mx_ResizeHandle_vertical{margin:-5px 0;padding:5px 0;cursor:row-resize}.mx_MatrixChat>.mx_ResizeHandle.mx_ResizeHandle_horizontal{margin:0 -10px 0 0;padding:0 8px 0 0}.mx_ResizeHandle>div{background:transparent}.mx_ResizeHandle.mx_ResizeHandle_horizontal>div{width:1px;height:100%}.mx_ResizeHandle.mx_ResizeHandle_vertical>div{height:1px}.mx_AtRoomPill,.mx_GroupPill,.mx_RoomPill,.mx_UserPill{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;border-radius:1.6rem;line-height:1.5rem;padding-left:0}a.mx_Pill{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 1ch)}.mx_Pill{padding:.1rem .4em .1rem .1rem;vertical-align:text-top;line-height:1.7rem}.mx_EventTile_content .markdown-body a.mx_GroupPill,.mx_GroupPill{color:#fff;background-color:#aaa}.mx_EventTile_content .markdown-body a.mx_Pill{text-decoration:none}.mx_EventTile_content .markdown-body a.mx_UserPill,.mx_UserPill{color:#2e2f32;background-color:rgba(0,0,0,.1)}.mx_UserPill_selected{background-color:#0dbd8b!important}.mx_EventTile_content .markdown-body a.mx_AtRoomPill,.mx_EventTile_content .mx_AtRoomPill,.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,.mx_MessageComposer_input .mx_AtRoomPill{color:#fff;background-color:#ff4b55}.mx_EventTile_content .markdown-body a.mx_GroupPill,.mx_EventTile_content .markdown-body a.mx_RoomPill,.mx_GroupPill,.mx_RoomPill{color:#fff;background-color:#aaa}.mx_EventTile_body .mx_GroupPill,.mx_EventTile_body .mx_RoomPill,.mx_EventTile_body .mx_UserPill{cursor:pointer}.mx_AtRoomPill .mx_BaseAvatar,.mx_GroupPill .mx_BaseAvatar,.mx_RoomPill .mx_BaseAvatar,.mx_UserPill .mx_BaseAvatar{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:10rem;margin-right:.24rem}.mx_Markdown_BOLD{font-weight:700}.mx_Markdown_ITALIC{font-style:italic}.mx_Markdown_CODE{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.mx_Markdown_HR{display:block;background:#e9e9e9}.mx_Markdown_STRIKETHROUGH{text-decoration:line-through}.mx_RoleButton{margin-left:4px;margin-right:4px;cursor:pointer;display:inline-block}.mx_RoleButton object{pointer-events:none}.mx_RoleButton_tooltip{display:inline-block;position:relative;top:-25px;left:6px}.mx_RoomAliasField{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;min-width:0;max-width:100%}.mx_RoomAliasField input{width:150px;padding-left:0;padding-right:0}.mx_RoomAliasField input::-webkit-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::-moz-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input:-ms-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::-ms-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::placeholder{color:#888;font-weight:400}.mx_RoomAliasField .mx_Field_postfix,.mx_RoomAliasField .mx_Field_prefix{color:#888;border-left:none;border-right:none;font-weight:600;padding:9px 10px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomAliasField .mx_Field_postfix{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 180px)}.mx_SSOButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_SSOButtons .mx_SSOButtons_row+.mx_SSOButtons_row{margin-top:16px}.mx_SSOButtons .mx_SSOButton{position:relative;width:100%;padding:7px 32px;text-align:center;border-radius:8px;display:inline-block;font-size:1.4rem;font-weight:600;border:1px solid #e7e7e7;color:#2e2f32}.mx_SSOButtons .mx_SSOButton>img{-o-object-fit:contain;object-fit:contain;position:absolute;left:8px;top:4px}.mx_SSOButtons .mx_SSOButton_default{color:#0dbd8b;background-color:#fff;border-color:#0dbd8b}.mx_SSOButtons .mx_SSOButton_default.mx_SSOButton_primary{color:#fff;background-color:#0dbd8b}.mx_SSOButtons .mx_SSOButton_mini{-webkit-box-sizing:border-box;box-sizing:border-box;width:50px;height:50px;min-width:50px;padding:12px}.mx_SSOButtons .mx_SSOButton_mini>img{left:12px;top:12px}.mx_SSOButtons .mx_SSOButton_mini+.mx_SSOButton_mini{margin-left:16px}.mx_ServerPicker{margin-bottom:14px;border-bottom:1px solid rgba(141,151,165,.2);display:grid;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto auto;font-size:1.4rem;line-height:2rem}.mx_ServerPicker>h3{font-weight:600;margin:0 0 20px;grid-column:1;grid-row:1}.mx_ServerPicker .mx_ServerPicker_help{width:20px;height:20px;background-color:#c1c6cd;border-radius:10px;grid-column:2;grid-row:1;margin-left:auto;text-align:center;color:#fff;font-size:16px;position:relative}.mx_ServerPicker .mx_ServerPicker_help:before{content:"";width:24px;height:24px;position:absolute;top:-2px;left:-2px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/i.80d84f3.svg);mask-image:url(../../img/element-icons/i.80d84f3.svg);background:#fff}.mx_ServerPicker .mx_ServerPicker_server{color:#232f32;grid-column:1;grid-row:2;margin-bottom:16px}.mx_ServerPicker .mx_ServerPicker_change{padding:0;font-size:inherit;grid-column:2;grid-row:2}.mx_ServerPicker .mx_ServerPicker_desc{margin-top:-12px;color:#8d99a5;grid-column:1/2;grid-row:3;margin-bottom:16px}.mx_ServerPicker_helpDialog .mx_Dialog_content{width:456px}.mx_Slider{position:relative;margin:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_Slider_dotContainer{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_Slider_bar,.mx_Slider_dotContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_Slider_bar{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;height:1em;width:100%;padding:0 .5em;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Slider_bar>hr{width:100%;height:.4em;background-color:#c1c9d6;border:0}.mx_Slider_selection{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:calc(100% - 1em);height:1em;position:absolute;pointer-events:none}.mx_Slider_selectionDot{position:absolute;width:1.1em;height:1.1em;background-color:#0dbd8b;border-radius:50%;-webkit-box-shadow:0 0 6px #d3d3d3;box-shadow:0 0 6px #d3d3d3;z-index:10}.mx_Slider_selection>hr{margin:0;border:.2em solid #0dbd8b}.mx_Slider_dot{height:1em;width:1em;border-radius:50%;background-color:#c1c9d6;z-index:0}.mx_Slider_dotActive{background-color:#0dbd8b}.mx_Slider_dotValue{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#c1c9d6}.mx_Slider_labelContainer{width:1em}.mx_Slider_label{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;left:-50%}.mx_Spinner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_MatrixChat_middlePanel .mx_Spinner{height:auto}.mx_Checkbox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_Checkbox input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0}.mx_Checkbox input[type=checkbox]+label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_Checkbox input[type=checkbox]+label>.mx_Checkbox_background{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-negative:0;flex-shrink:0;height:1.6rem;width:1.6rem;size:.5rem;border:.15rem solid rgba(97,112,139,.5);-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:.4rem}.mx_Checkbox input[type=checkbox]+label>.mx_Checkbox_background img{display:none;height:100%;width:100%;-webkit-filter:invert(100%);filter:invert(100%)}.mx_Checkbox input[type=checkbox]:checked+label>.mx_Checkbox_background{background:#0dbd8b;border-color:#0dbd8b}.mx_Checkbox input[type=checkbox]:checked+label>.mx_Checkbox_background img{display:block}.mx_Checkbox input[type=checkbox]+label>:not(.mx_Checkbox_background){margin-left:10px}.mx_Checkbox input[type=checkbox]:disabled+label{opacity:.5;cursor:not-allowed}.mx_Checkbox input[type=checkbox]:checked:disabled+label>.mx_Checkbox_background{background-color:#0dbd8b;border-color:#0dbd8b}.mx_Checkbox input[type=checkbox].focus-visible+label .mx_Checkbox_background{outline-width:2px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.mx_Checkbox input[type=checkbox].focus-visible+label .mx_Checkbox_background{outline-color:-webkit-focus-ring-color;outline-style:auto}}.mx_RadioButton{position:relative;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.mx_RadioButton,.mx_RadioButton>.mx_RadioButton_content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_RadioButton>.mx_RadioButton_content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-left:8px;margin-right:8px}.mx_RadioButton .mx_RadioButton_spacer{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;height:1.6rem;width:1.6rem}.mx_RadioButton>input[type=radio]{margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mx_RadioButton>input[type=radio]+div{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:1.6rem;width:1.6rem;margin-left:2px;border:.15rem solid #61708b;border-radius:1.6rem}.mx_RadioButton>input[type=radio]+div>div{-webkit-box-sizing:border-box;box-sizing:border-box;height:.8rem;width:.8rem;border-radius:.8rem}.mx_RadioButton>input[type=radio].focus-visible+div{outline-width:2px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.mx_RadioButton>input[type=radio].focus-visible+div{outline-color:-webkit-focus-ring-color;outline-style:auto}}.mx_RadioButton>input[type=radio]:checked+div{border-color:#0dbd8b}.mx_RadioButton>input[type=radio]:checked+div>div{background:#0dbd8b}.mx_RadioButton>input[type=radio]:disabled+div,.mx_RadioButton>input[type=radio]:disabled+div+span{opacity:.5;cursor:not-allowed}.mx_RadioButton>input[type=radio]:disabled+div{border-color:#61708b}.mx_RadioButton>input[type=radio]:checked:disabled+div>div{background-color:#61708b}.mx_RadioButton_outlined{border:1px solid #e3e8f0;border-radius:8px}.mx_RadioButton_checked{border-color:#0dbd8b}.mx_SyntaxHighlight{background:none!important;color:#747474!important}.mx_TextWithTooltip_tooltip{display:none}.mx_ToggleSwitch{-webkit-transition:background-color .2s ease-out .1s;transition:background-color .2s ease-out .1s;width:4.4rem;height:2rem;border-radius:1.5rem;padding:2px;background-color:#c1c9d6;opacity:.5}.mx_ToggleSwitch_enabled{cursor:pointer;opacity:1}.mx_ToggleSwitch.mx_ToggleSwitch_on{background-color:#0dbd8b}.mx_ToggleSwitch.mx_ToggleSwitch_on>.mx_ToggleSwitch_ball{left:calc(100% - 2rem)}.mx_ToggleSwitch_ball{position:relative;width:2rem;height:2rem;border-radius:2rem;background-color:#fff;-webkit-transition:left .15s ease-out .1s;transition:left .15s ease-out .1s;left:0}@-webkit-keyframes mx_fadein{0%{opacity:0}to{opacity:1}}@keyframes mx_fadein{0%{opacity:0}to{opacity:1}}@-webkit-keyframes mx_fadeout{0%{opacity:1}to{opacity:0}}@keyframes mx_fadeout{0%{opacity:1}to{opacity:0}}.mx_Tooltip_chevron{position:absolute;left:-7px;top:10px;width:0;height:0;border-top:7px solid transparent;border-right:7px solid #e7e7e7;border-bottom:7px solid transparent}.mx_Tooltip_chevron:after{content:"";width:0;height:0;border-top:6px solid transparent;border-right:6px solid #fff;border-bottom:6px solid transparent;position:absolute;top:-6px;left:1px}.mx_Tooltip{position:fixed;border-radius:8px;-webkit-box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);z-index:6000;padding:10px;pointer-events:none;line-height:1.4rem;font-size:1.2rem;font-weight:500;max-width:200px;word-break:break-word;margin-right:50px;background-color:#27303a;color:#fff;border:0;text-align:center}.mx_Tooltip,.mx_Tooltip .mx_Tooltip_chevron{display:none}.mx_Tooltip.mx_Tooltip_visible{-webkit-animation:mx_fadein .2s forwards;animation:mx_fadein .2s forwards}.mx_Tooltip.mx_Tooltip_invisible{-webkit-animation:mx_fadeout .1s forwards;animation:mx_fadeout .1s forwards}.mx_Field_tooltip{background-color:#fff;color:#2e2f32;border:1px solid #e7e7e7;text-align:unset}.mx_Field_tooltip .mx_Tooltip_chevron{display:unset}.mx_Tooltip_title{font-weight:600}.mx_Tooltip_sub{opacity:.7;margin-top:4px}.mx_TooltipButton{display:inline-block;width:11px;height:11px;margin-left:5px;border:2px solid #dbdbdb;border-radius:20px;color:#dbdbdb;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;opacity:.6;line-height:1.1rem;text-align:center;cursor:pointer}.mx_TooltipButton:hover{opacity:1}.mx_TooltipButton_container{position:relative;top:-18px;left:4px}.mx_TooltipButton_helpText{width:400px;text-align:start;line-height:17px!important}.mx_Validation{position:relative}.mx_Validation_details{padding-left:20px;margin:0}.mx_Validation_description+.mx_Validation_details{margin:1em 0 0}.mx_Validation_detail{position:relative;font-weight:400;list-style:none;margin-bottom:.5em}.mx_Validation_detail:last-child{margin-bottom:0}.mx_Validation_detail:before{content:"";position:absolute;width:14px;height:14px;top:0;left:-18px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_Validation_detail.mx_Validation_valid{color:#0dbd8b}.mx_Validation_detail.mx_Validation_valid:before{-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_Validation_detail.mx_Validation_invalid{color:#ff4b55}.mx_Validation_detail.mx_Validation_invalid:before{-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_EmojiPicker{width:340px;height:450px;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_EmojiPicker_body{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.mx_EmojiPicker_header{padding:4px 8px 0;border-bottom:1px solid #e9edf1}.mx_EmojiPicker_anchor{padding:8px 8px 6px;border:none;border-bottom:2px solid transparent;background-color:transparent;border-radius:4px 4px 0 0;width:36px;height:38px}.mx_EmojiPicker_anchor:not(:disabled){cursor:pointer}.mx_EmojiPicker_anchor:not(:disabled):hover{background-color:#ddd;border-bottom:2px solid #0dbd8b}.mx_EmojiPicker_anchor:before{background-color:#2e2f32;content:"";display:inline-block;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:100%;height:100%}.mx_EmojiPicker_anchor:disabled:before{background-color:#ddd}.mx_EmojiPicker_anchor_activity:before{-webkit-mask-image:url(../../img/emojipicker/activity.921ec9f.svg);mask-image:url(../../img/emojipicker/activity.921ec9f.svg)}.mx_EmojiPicker_anchor_custom:before{-webkit-mask-image:url(../../img/emojipicker/custom.e1cd0fd.svg);mask-image:url(../../img/emojipicker/custom.e1cd0fd.svg)}.mx_EmojiPicker_anchor_flags:before{-webkit-mask-image:url(../../img/emojipicker/flags.1a8855e.svg);mask-image:url(../../img/emojipicker/flags.1a8855e.svg)}.mx_EmojiPicker_anchor_foods:before{-webkit-mask-image:url(../../img/emojipicker/foods.c6b220a.svg);mask-image:url(../../img/emojipicker/foods.c6b220a.svg)}.mx_EmojiPicker_anchor_nature:before{-webkit-mask-image:url(../../img/emojipicker/nature.6540b99.svg);mask-image:url(../../img/emojipicker/nature.6540b99.svg)}.mx_EmojiPicker_anchor_objects:before{-webkit-mask-image:url(../../img/emojipicker/objects.4d34f58.svg);mask-image:url(../../img/emojipicker/objects.4d34f58.svg)}.mx_EmojiPicker_anchor_people:before{-webkit-mask-image:url(../../img/emojipicker/people.e918580.svg);mask-image:url(../../img/emojipicker/people.e918580.svg)}.mx_EmojiPicker_anchor_places:before{-webkit-mask-image:url(../../img/emojipicker/places.7310322.svg);mask-image:url(../../img/emojipicker/places.7310322.svg)}.mx_EmojiPicker_anchor_recent:before{-webkit-mask-image:url(../../img/emojipicker/recent.13b42e2.svg);mask-image:url(../../img/emojipicker/recent.13b42e2.svg)}.mx_EmojiPicker_anchor_symbols:before{-webkit-mask-image:url(../../img/emojipicker/symbols.15a557d.svg);mask-image:url(../../img/emojipicker/symbols.15a557d.svg)}.mx_EmojiPicker_anchor_visible{border-bottom:2px solid #0dbd8b}.mx_EmojiPicker_search{margin:8px;border-radius:4px;border:1px solid #e7e7e7;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_EmojiPicker_search input{-webkit-box-flex:1;-ms-flex:1;flex:1;border:none;padding:8px 12px;border-radius:4px 0}.mx_EmojiPicker_search button{border:none;background-color:inherit;margin:0;padding:8px;-ms-flex-item-align:center;align-self:center;width:32px;height:32px}.mx_EmojiPicker_search_clear{cursor:pointer}.mx_EmojiPicker_search_icon{width:16px;margin:8px}.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear){pointer-events:none}.mx_EmojiPicker_search_icon:after{-webkit-mask:url(../../img/emojipicker/search.973c315.svg) no-repeat;mask:url(../../img/emojipicker/search.973c315.svg) no-repeat;-webkit-mask-size:100%;mask-size:100%;background-color:#2e2f32;content:"";display:inline-block;width:100%;height:100%}.mx_EmojiPicker_search_clear:after{-webkit-mask-image:url(../../img/emojipicker/delete.f7344c5.svg);mask-image:url(../../img/emojipicker/delete.f7344c5.svg)}.mx_EmojiPicker_category{padding:0 12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EmojiPicker_category_label{width:304px}.mx_EmojiPicker_list{width:304px;padding:0;margin:0}.mx_EmojiPicker_item_wrapper{display:inline-block;list-style:none;width:38px;cursor:pointer}.mx_EmojiPicker_item{display:inline-block;font-size:2rem;padding:5px;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;border-radius:4px}.mx_EmojiPicker_item:hover{background-color:#ddd}.mx_EmojiPicker_item_selected{color:rgba(0,0,0,.5);border:1px solid #0dbd8b;padding:4px}.mx_EmojiPicker_category_label,.mx_EmojiPicker_preview_name{font-size:1.6rem;font-weight:600;margin:0}.mx_EmojiPicker_footer{border-top:1px solid #e9edf1;min-height:72px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EmojiPicker_preview_emoji{font-size:3.2rem;padding:8px 16px}.mx_EmojiPicker_preview_text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_EmojiPicker_name{text-transform:capitalize}.mx_EmojiPicker_shortcode{color:#747474;font-size:1.4rem}.mx_EmojiPicker_shortcode:after,.mx_EmojiPicker_shortcode:before{content:":"}.mx_EmojiPicker_quick{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around}.mx_EmojiPicker_quick_header .mx_EmojiPicker_name{margin-right:4px}.mx_GroupPublicity_toggle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:8px}.mx_GroupPublicity_toggle .mx_GroupTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%}.mx_GroupPublicity_toggle .mx_ToggleSwitch{float:right}.mx_GroupRoomTile{position:relative;color:#2e2f32;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_GroupRoomList_wrapper{padding:10px}.mx_GroupUserSettings_groupPublicity_scrollbox{height:200px;border:1px solid transparent;border-radius:3px;overflow:hidden}.mx_CreateEvent:before{background-color:#91a1c0;-webkit-mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg)}.mx_DateSeparator{clear:both;margin:4px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.4rem;color:#9e9e9e}.mx_DateSeparator>hr{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;height:0;border:none;border-bottom:1px solid transparent}.mx_DateSeparator>div{margin:0 25px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_EventTileBubble{background-color:#f2f5f8;padding:10px;border-radius:8px;margin:10px auto;max-width:75%;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:24px minmax(0,1fr) -webkit-min-content;grid-template-columns:24px minmax(0,1fr) min-content}.mx_EventTileBubble:after,.mx_EventTileBubble:before{position:relative;grid-column:1;grid-row:1/3;width:16px;height:16px;content:"";top:0;bottom:0;left:0;right:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;margin-top:4px}.mx_EventTileBubble .mx_EventTileBubble_subtitle,.mx_EventTileBubble .mx_EventTileBubble_title{overflow-wrap:break-word}.mx_EventTileBubble .mx_EventTileBubble_title{font-weight:600;font-size:1.5rem;grid-column:2;grid-row:1}.mx_EventTileBubble .mx_EventTileBubble_subtitle{font-size:1.2rem;grid-column:2;grid-row:2}.mx_MEmoteBody{white-space:pre-wrap}.mx_MEmoteBody_sender{cursor:pointer}.mx_MFileBody_download{color:#0dbd8b}.mx_MFileBody_download .mx_MFileBody_download_icon{width:12px;height:12px;-webkit-mask-size:12px;mask-size:12px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/download.4f331f0.svg);mask-image:url(../../img/download.4f331f0.svg);background-color:#0dbd8b;display:inline-block}.mx_MFileBody_download a{color:#0dbd8b;text-decoration:none;cursor:pointer}.mx_MFileBody_download object{margin-left:-16px;padding-right:4px;margin-top:-4px;vertical-align:middle;pointer-events:none}.mx_MFileBody_download iframe{margin:0;padding:0;border:none;width:100%;height:1.5em}.mx_MFileBody_info{background-color:#e3e8f0;border-radius:12px;width:243px;padding:6px 12px;color:#737d8c}.mx_MFileBody_info .mx_MFileBody_info_icon{background-color:#fff;border-radius:20px;display:inline-block;width:32px;height:32px;position:relative;vertical-align:middle;margin-right:12px}.mx_MFileBody_info .mx_MFileBody_info_icon:before{content:"";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-image:url(../icons/attach.svg);mask-image:url(../icons/attach.svg);background-color:#737d8c;width:13px;height:15px;position:absolute;top:8px;left:9px}.mx_MFileBody_info .mx_MFileBody_info_filename{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block;width:calc(100% - 44px);vertical-align:middle}.mx_MImageBody{display:block;margin-right:34px}.mx_MImageBody_thumbnail{position:absolute;width:100%;height:100%;left:0;top:0;border-radius:4px}.mx_MImageBody_thumbnail_container{overflow:hidden;position:relative}.mx_MImageBody_thumbnail_spinner{position:absolute;left:50%;top:50%}.mx_MImageBody_thumbnail_spinner>*{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mx_MImageBody_gifLabel{position:absolute;display:block;top:0;left:14px;padding:5px;border-radius:5px;background:rgba(0,0,0,.7);border:2px solid rgba(0,0,0,.2);color:#fff;pointer-events:none}.mx_HiddenImagePlaceholder{position:absolute;left:0;top:0;bottom:0;right:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;cursor:pointer;background-color:#f3f8fd}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button{color:#0dbd8b}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span.mx_HiddenImagePlaceholder_eye{margin-right:8px;background-color:#0dbd8b;-webkit-mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);display:inline-block;width:18px;height:14px}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span:not(.mx_HiddenImagePlaceholder_eye){vertical-align:text-bottom}.mx_EventTile:hover .mx_HiddenImagePlaceholder{background-color:#fff}.mx_MJitsiWidgetEvent:before{background-color:#91a1c0;-webkit-mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg);mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg)}.mx_MNoticeBody{white-space:pre-wrap;opacity:.6}.mx_MStickerBody_wrapper{padding:20px 0}.mx_MStickerBody_tooltip{position:absolute;top:50%}.mx_MStickerBody_hidden{max-width:220px;text-decoration:none;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_MTextBody{white-space:pre-wrap}span.mx_MVideoBody video.mx_MVideoBody{max-width:100%;height:auto;border-radius:4px}.mx_MVoiceMessageBody{display:inline-block}.mx_MessageActionBar{position:absolute;visibility:hidden;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:24px;line-height:2.4rem;border-radius:4px;background:#fff;top:-26px;right:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.mx_MessageActionBar:before{content:"";position:absolute;width:calc(66px + 100%);height:calc(20px + 100%);top:-12px;left:-58px;z-index:-1;cursor:auto}.mx_MessageActionBar>*{white-space:nowrap;display:inline-block;position:relative;border:1px solid #e9edf1;margin-left:-1px}.mx_MessageActionBar>:hover{border-color:#ddd;z-index:1}.mx_MessageActionBar>:first-child{border-radius:3px 0 0 3px}.mx_MessageActionBar>:last-child{border-radius:0 3px 3px 0}.mx_MessageActionBar>:only-child{border-radius:3px}.mx_MessageActionBar_maskButton{width:27px}.mx_MessageActionBar_maskButton:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;-webkit-mask-size:18px;mask-size:18px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#2e2f32}.mx_MessageActionBar_reactButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg);mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg)}.mx_MessageActionBar_replyButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/reply.5812741.svg);mask-image:url(../../img/element-icons/room/message-bar/reply.5812741.svg)}.mx_MessageActionBar_editButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/edit.688678e.svg);mask-image:url(../../img/element-icons/room/message-bar/edit.688678e.svg)}.mx_MessageActionBar_optionsButton:after{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_MessageActionBar_resendButton:after{-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg)}.mx_MessageActionBar_cancelButton:after{-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg)}.mx_MessageTimestamp{color:#acacac;font-size:1rem;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.mx_MjolnirBody{opacity:.4}.mx_ReactionsRow{margin:6px 0;color:#2e2f32}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton{position:relative;display:inline-block;visibility:hidden;width:24px;height:24px;vertical-align:middle;margin-left:4px}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:before{content:"";position:absolute;height:100%;width:100%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#8d99a5;-webkit-mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg);mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg)}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active{visibility:visible}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active:before,.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:hover:before{background-color:#2e2f32}.mx_EventTile:hover .mx_ReactionsRow_addReactionButton{visibility:visible}.mx_ReactionsRow_showAll{text-decoration:none;font-size:1.2rem;line-height:2rem;margin-left:4px;vertical-align:middle}.mx_ReactionsRow_showAll:link,.mx_ReactionsRow_showAll:visited{color:#8d99a5}.mx_ReactionsRow_showAll:hover{color:#2e2f32}.mx_ReactionsRowButton{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;line-height:2rem;margin-right:6px;padding:1px 6px;border:1px solid #e9edf1;border-radius:10px;background-color:#f3f8fd;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.mx_ReactionsRowButton:hover{border-color:#ddd}.mx_ReactionsRowButton.mx_ReactionsRowButton_selected{background-color:#e9fff9;border-color:#0dbd8b}.mx_ReactionsRowButton.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_ReactionsRowButton .mx_ReactionsRowButton_content{max-width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:4px}.mx_RedactedBody{white-space:pre-wrap;color:#61708b;vertical-align:middle;padding-left:20px;position:relative}.mx_RedactedBody:before{height:14px;width:14px;background-color:#61708b;-webkit-mask-image:url(../icons/trash.svg);mask-image:url(../icons/trash.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;content:"";position:absolute;top:1px;left:0}.mx_RoomAvatarEvent{opacity:.5;overflow-y:hidden}.mx_RoomAvatarEvent_avatar{display:inline;position:relative;top:5px}.mx_SenderProfile_name{font-weight:600}.mx_TextualEvent{opacity:.5;overflow-y:hidden}.mx_UnknownBody{white-space:pre-wrap}.mx_EventTile_content.mx_ViewSourceEvent{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:.6;font-size:1.2rem}.mx_EventTile_content.mx_ViewSourceEvent code,.mx_EventTile_content.mx_ViewSourceEvent pre{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_EventTile_content.mx_ViewSourceEvent pre{line-height:1.2;margin:3.5px 0}.mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle{width:12px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:auto 12px;mask-size:auto 12px;visibility:hidden;background-color:#0dbd8b;-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg)}.mx_EventTile_content.mx_ViewSourceEvent.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle{-webkit-mask-position:0 bottom;mask-position:0 bottom;margin-bottom:7px;-webkit-mask-image:url(../../img/feather-customised/minimise.aec9142.svg);mask-image:url(../../img/feather-customised/minimise.aec9142.svg)}.mx_EventTile_content.mx_ViewSourceEvent:hover .mx_ViewSourceEvent_toggle{visibility:visible}.mx_cryptoEvent.mx_cryptoEvent_icon:before{background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:90%;mask-size:90%}.mx_cryptoEvent.mx_cryptoEvent_icon:after,.mx_cryptoEvent.mx_cryptoEvent_icon:before{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_cryptoEvent.mx_cryptoEvent_icon:after{background-color:#91a1c0}.mx_cryptoEvent.mx_cryptoEvent_icon_verified:after{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg);background-color:#0dbd8b}.mx_cryptoEvent.mx_cryptoEvent_icon_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_cryptoEvent .mx_cryptoEvent_buttons,.mx_cryptoEvent .mx_cryptoEvent_state{grid-column:3;grid-row:1/3}.mx_cryptoEvent .mx_cryptoEvent_buttons{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_cryptoEvent .mx_cryptoEvent_state{width:130px;padding:10px 20px;margin:auto 0;text-align:center;color:#8d99a5;overflow-wrap:break-word;font-size:1.2rem}.mx_BaseCard{padding:0 8px;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_BaseCard .mx_BaseCard_header{margin:8px 0}.mx_BaseCard .mx_BaseCard_header>h2{margin:0 44px;font-size:1.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back,.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close{position:absolute;background-color:rgba(141,151,165,.2);height:20px;width:20px;margin:12px;top:0;border-radius:10px}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before,.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before{content:"";position:absolute;height:20px;width:20px;top:0;left:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#91a1c0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back{left:0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-mask-size:22px;mask-size:22px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close{right:0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before{-webkit-mask-image:url(../../img/icons-close.11ff07c.svg);mask-image:url(../../img/icons-close.11ff07c.svg);-webkit-mask-size:8px;mask-size:8px}.mx_BaseCard .mx_AutoHideScrollbar{margin-right:-8px;padding-right:8px;min-height:0;width:100%;height:100%}.mx_BaseCard .mx_BaseCard_Group{margin:20px 0 16px}.mx_BaseCard .mx_BaseCard_Group>*{margin-left:12px;margin-right:12px}.mx_BaseCard .mx_BaseCard_Group>h1{color:#8d99a5;font-size:1.2rem;font-weight:500}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button{padding:10px 38px 10px 12px;margin:0;position:relative;font-size:1.3rem;height:20px;line-height:20px;border-radius:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:hover{background-color:rgba(141,151,165,.1)}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:after{content:"";position:absolute;top:10px;right:6px;height:20px;width:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#c1c6cd;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-mask-size:20px;mask-size:20px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button.mx_AccessibleButton_disabled{padding-right:12px}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button.mx_AccessibleButton_disabled:after{content:unset}.mx_BaseCard .mx_BaseCard_footer{padding-top:4px;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_kind_secondary{color:#737d8c;background-color:rgba(141,151,165,.2);font-weight:600;font-size:1.4rem}.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_FilePanel.mx_BaseCard,.mx_MemberList.mx_BaseCard,.mx_NotificationPanel.mx_BaseCard,.mx_UserInfo.mx_BaseCard{padding:32px 0 0}.mx_FilePanel.mx_BaseCard .mx_AutoHideScrollbar,.mx_MemberList.mx_BaseCard .mx_AutoHideScrollbar,.mx_NotificationPanel.mx_BaseCard .mx_AutoHideScrollbar,.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar{margin-right:unset;padding-right:unset}.mx_EncryptionInfo_spinner .mx_Spinner{margin-top:25px;margin-bottom:15px}.mx_EncryptionInfo_spinner{text-align:center}.mx_RoomSummaryCard .mx_BaseCard_header{text-align:center;margin-top:20px}.mx_RoomSummaryCard .mx_BaseCard_header h2{font-weight:600;font-size:1.8rem;margin:12px 0 4px}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias{font-size:1.3rem;color:#737d8c}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias,.mx_RoomSummaryCard .mx_BaseCard_header h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee{display:inline-block;position:relative;width:54px;height:54px;border-radius:50%;background-color:#737d8c;margin-top:-3px;margin-left:-10px;border:3px solid #f2f5f8}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee:before{content:"";position:absolute;top:13px;left:13px;height:28px;width:28px;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:url(../../img/e2e/disabled.6c5c6be.svg);mask-image:url(../../img/e2e/disabled.6c5c6be.svg);background-color:#fff}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_normal{background-color:#424446}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_normal:before{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_verified{background-color:#0dbd8b}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_verified:before{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg)}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_warning{background-color:#ff4b55}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_warning:before{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button{padding-left:44px}.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button:before{content:"";position:absolute;top:8px;left:10px;height:24px;width:24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#c1c6cd}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button{padding:0;height:auto;color:#8d99a5}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app{padding:10px 48px 10px 12px;text-overflow:ellipsis;overflow:hidden}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app .mx_BaseAvatar_image{vertical-align:top;margin-right:12px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app span{color:#2e2f32}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle{position:absolute;top:0;height:100%;width:24px;padding:12px 4px;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:24px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:hover:after,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:hover:after{content:"";position:absolute;height:24px;width:24px;top:8px;left:0;border-radius:12px;background-color:rgba(141,151,165,.1)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:before,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:before{content:"";position:absolute;height:16px;width:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:16px;mask-size:16px;background-color:#c1c6cd}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle{right:24px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:before{-webkit-mask-image:url(../../img/element-icons/room/pin-upright.65783fb.svg);mask-image:url(../../img/element-icons/room/pin-upright.65783fb.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options{right:48px;display:none}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:before{-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned:after{opacity:.2}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned .mx_RoomSummaryCard_app_pinToggle:before{background-color:#0dbd8b}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:hover .mx_RoomSummaryCard_icon_app{padding-right:72px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:hover .mx_RoomSummaryCard_app_options{display:unset}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:before{content:unset}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:after{top:8px;pointer-events:none}.mx_RoomSummaryCard .mx_AccessibleButton_kind_link{padding:0;margin-top:12px;margin-bottom:12px;font-size:1.3rem;font-weight:600}.mx_RoomSummaryCard_icon_people:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_RoomSummaryCard_icon_files:before{-webkit-mask-image:url(../../img/element-icons/room/files.5709c0c.svg);mask-image:url(../../img/element-icons/room/files.5709c0c.svg)}.mx_RoomSummaryCard_icon_share:before{-webkit-mask-image:url(../../img/element-icons/room/share.54dc3fb.svg);mask-image:url(../../img/element-icons/room/share.54dc3fb.svg)}.mx_RoomSummaryCard_icon_settings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserInfo.mx_BaseCard{padding-top:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;font-size:1.2rem}.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel{cursor:pointer;position:absolute;top:0;border-radius:4px;background-color:#f2f5f8;margin:9px;z-index:1}.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel div{height:16px;width:16px;padding:4px;-webkit-mask-image:url(../../img/minimise.871d2de.svg);mask-image:url(../../img/minimise.871d2de.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:7px center;mask-position:7px center;background-color:#91a1c0}.mx_UserInfo.mx_BaseCard h2{font-size:1.8rem;font-weight:600;margin:18px 0 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container{padding:8px 16px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_separator{border-bottom:1px solid rgba(46,47,50,.1)}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetailsContainer{padding-top:0;padding-bottom:0;margin-bottom:8px}.mx_UserInfo.mx_BaseCard .mx_RoomTile_nameContainer{width:154px}.mx_UserInfo.mx_BaseCard .mx_RoomTile_badge{display:none}.mx_UserInfo.mx_BaseCard .mx_RoomTile_name{width:160px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar{margin:24px 32px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div{max-width:30vh;margin:0 auto;-webkit-transition:.5s;transition:.5s}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div>div{padding-top:100%;position:relative}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div>div *{border-radius:100%;position:absolute;top:0;left:0;width:100%!important;height:100%!important}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar_initial{z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:6rem!important;width:100%!important;-webkit-transition:font-size .5s;transition:font-size .5s}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image{cursor:-webkit-zoom-in;cursor:zoom-in}.mx_UserInfo.mx_BaseCard h3{text-transform:uppercase;color:#8d99a5;font-weight:600;font-size:1.2rem;margin:4px 0}.mx_UserInfo.mx_BaseCard p{margin:5px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile{text-align:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.8rem;line-height:2.5rem;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-all;text-overflow:ellipsis}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 .mx_E2EIcon{margin-top:3px;margin-right:4px;min-width:18px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profileStatus{margin-top:12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField{margin:6px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField,.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription{margin:11px 0 12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_Field{margin:0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_field{cursor:pointer;color:#0dbd8b;line-height:1.6rem;margin:8px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_field.mx_UserInfo_destructive{color:#ff4b55}.mx_UserInfo.mx_BaseCard .mx_UserInfo_statusMessage{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator){padding-top:16px;padding-bottom:0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator)>:not(h3){margin-left:8px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device{display:-webkit-box;display:-ms-flexbox;display:flex;margin:8px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device.mx_UserInfo_device_verified .mx_UserInfo_device_trusted{color:#0dbd8b}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device.mx_UserInfo_device_unverified .mx_UserInfo_device_trusted{color:#ff4b55}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device .mx_UserInfo_device_name{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:5px;word-break:break-word}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_E2EIcon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin:2px 5px 0 0;width:12px;height:12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_expand{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:11px}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind{padding:8px 18px}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary{color:#0dbd8b;background-color:rgba(3,179,129,.16)}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger{color:#ff4b55;background-color:rgba(255,75,85,.16)}.mx_UserInfo.mx_BaseCard .mx_UserInfo_wideButton,.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton{display:block;margin:16px 0 8px}.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton+.mx_AccessibleButton{margin:8px 0}.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar>div{max-width:72px;margin:0 auto}.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar .mx_BaseAvatar_initial{font-size:40px!important}.mx_VerificationPanel_reciprocate_section .mx_E2EIcon,.mx_VerificationPanel_verified_section .mx_E2EIcon{margin:20px auto!important}.mx_UserInfo .mx_EncryptionPanel_cancel{-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#61708b;cursor:pointer;position:absolute;z-index:100;top:14px;right:14px}.mx_UserInfo .mx_VerificationPanel_qrCode{padding:4px 4px 0;background:#fff;border-radius:4px;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%;margin:0 auto!important}.mx_UserInfo .mx_VerificationPanel_qrCode canvas{height:auto!important;width:100%!important;max-width:240px}.mx_UserInfo .mx_VerificationPanel_reciprocate_section .mx_FormButton{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px;display:block;margin:10px 0}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:10px;margin-bottom:10px;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions>.mx_VerificationPanel_QRPhase_betweenText,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions>.mx_VerificationPanel_QRPhase_betweenText{width:50px;vertical-align:middle;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption{background-color:#f3f8fd;border-radius:10px;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;padding:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;max-width:310px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas{width:220px!important;height:220px!important;background-color:#fff;border-radius:4px;vertical-align:middle;text-align:center;padding:10px}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption>p,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption>p{margin-top:0;font-weight:700}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText{font-size:1.4rem;margin:30px 0;text-align:center}.mx_CompleteSecurity_body .mx_VerificationPanel_verified_section .mx_AccessibleButton,.mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton{float:right}.mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton,.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton{margin-left:10px;padding:7px 40px}.mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons,.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_WidgetCard{height:100%;display:contents}.mx_WidgetCard .mx_AppTileFullWidth{max-width:unset;height:100%;border:0}.mx_WidgetCard .mx_BaseCard_header{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_WidgetCard .mx_BaseCard_header>h2{margin-right:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton{position:relative;margin-right:44px;height:20px;width:20px;min-width:20px;padding:0}.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton:before{content:"";position:absolute;width:20px;height:20px;top:0;left:4px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);background-color:#737d8c}.mx_WidgetCard_maxPinnedTooltip{background-color:#ff4b55;color:#fff}.mx_AliasSettings_editable{border:0;border-bottom:1px solid #c7c7c7;padding:0;min-width:240px}.mx_AliasSettings_editable:focus{border-bottom:1px solid #0dbd8b;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_AliasSettings summary{cursor:pointer;color:#0dbd8b;font-weight:600;list-style:none}.mx_AliasSettings summary::-webkit-details-marker{display:none}.mx_AliasSettings .mx_AliasSettings_localAliasHeader{margin-top:35px}.mx_AppsDrawer{margin:5px 5px 5px 18px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.mx_AppsDrawer .mx_AppsContainer_resizerHandleContainer{width:100%;height:10px;margin-top:-3px;display:block;position:relative}.mx_AppsDrawer .mx_AppsContainer_resizerHandle{cursor:ns-resize;width:100%!important;height:100%!important;position:absolute;bottom:0!important}.mx_AppsDrawer .mx_AppsContainer_resizerHandle:after{content:"";position:absolute;border-radius:3px;top:6px;bottom:0;left:calc(50% - 32px);right:calc(50% - 32px)}.mx_AppsDrawer:hover .mx_AppsContainer_resizerHandle:after{opacity:.8;background:#2e2f32}.mx_AppsDrawer:hover .mx_ResizeHandle_horizontal:before{position:absolute;left:3px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px;width:4px;border-radius:4px;content:"";background-color:#2e2f32;opacity:.8}.mx_AppsContainer_resizer{margin-bottom:8px}.mx_AppsContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:100%;width:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.mx_AppsContainer .mx_AppTile:first-of-type{border-left-width:8px;border-radius:10px 0 0 10px}.mx_AppsContainer .mx_AppTile:last-of-type{border-right-width:8px;border-radius:0 10px 10px 0}.mx_AppsContainer .mx_ResizeHandle_horizontal{position:relative}.mx_AppsContainer .mx_ResizeHandle_horizontal>div{width:0}.mx_AppsDrawer_2apps .mx_AppTile{width:50%}.mx_AppsDrawer_2apps .mx_AppTile:nth-child(3){-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:0!important;min-width:240px!important}.mx_AppsDrawer_3apps .mx_AppTile{width:33%}.mx_AppsDrawer_3apps .mx_AppTile:nth-child(3){-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:0!important;min-width:240px!important}.mx_AppTile{width:50%;min-width:240px;border-color:#f2f5f8;border-style:solid;border-width:8px 5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#f2f5f8}.mx_AppTileFullWidth{width:100%!important;border:5px solid #f2f5f8;border-radius:8px;background-color:#f2f5f8}.mx_AppTile_mini,.mx_AppTileFullWidth{margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_AppTile_mini{width:100%;height:200px}.mx_AppTile .mx_AppTile_persistedWrapper,.mx_AppTile_mini .mx_AppTile_persistedWrapper,.mx_AppTileFullWidth .mx_AppTile_persistedWrapper{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_AppTile_persistedWrapper div{width:100%;height:100%}.mx_AppTileMenuBar{margin:0;font-size:1.2rem;background-color:#f2f5f8;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;padding-top:2px;padding-bottom:8px}.mx_AppTileMenuBarTitle{line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx_AppTileMenuBarTitle .mx_WidgetAvatar{margin-right:12px}.mx_AppTileMenuBarTitle>:last-child{margin-left:9px}.mx_AppTileMenuBarWidgets{float:right;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AppTileMenuBar_iconButton{width:12px;height:12px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:auto 12px;mask-size:auto 12px;background-color:#212121;margin:0 3px}.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout{-webkit-mask-image:url(../../img/feather-customised/widget/external-link.7ab6751.svg);mask-image:url(../../img/feather-customised/widget/external-link.7ab6751.svg)}.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu{-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_AppTileBody{height:100%;background-color:#fff}.mx_AppTileBody,.mx_AppTileBody_mini{width:100%;overflow:hidden;border-radius:8px}.mx_AppTileBody_mini{height:200px}.mx_AppTile .mx_AppTileBody,.mx_AppTile_mini .mx_AppTileBody_mini,.mx_AppTileFullWidth .mx_AppTileBody{height:inherit;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_AppTileBody_mini iframe,.mx_AppTileBody iframe{border:none;width:100%;height:100%}.mx_AppTileBody iframe{overflow:hidden;padding:0;margin:0;display:block}.mx_AppPermissionWarning{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.6rem}.mx_AppPermissionWarning_row{margin-bottom:12px}.mx_AppPermissionWarning_smallText{font-size:1.2rem}.mx_AppPermissionWarning_bolder{font-weight:600}.mx_AppPermissionWarning h4{margin:0;padding:0}.mx_AppPermissionWarning_helpIcon{margin-top:1px;margin-right:2px;width:10px;height:10px;display:inline-block}.mx_AppPermissionWarning_helpIcon:before{display:inline-block;background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:12px;mask-size:12px;width:12px;height:12px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/feather-customised/help-circle.03fb6cf.svg);mask-image:url(../../img/feather-customised/help-circle.03fb6cf.svg)}.mx_AppPermissionWarning_tooltip{-webkit-box-shadow:none;box-shadow:none;background-color:#27303a;color:#fff;border:none;border-radius:3px;padding:6px 8px}.mx_AppPermissionWarning_tooltip ul{list-style-position:inside;padding-left:2px;margin-left:0}.mx_AppLoading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:700;position:relative;height:100%;background-color:#fff!important;border-radius:8px}.mx_AppLoading .mx_Spinner{position:absolute;top:0;bottom:0;left:0;right:0}.mx_AppLoading_spinner_fadeIn{-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-name:mx_AppLoading_spinner_fadeIn_animation;animation-name:mx_AppLoading_spinner_fadeIn_animation}@-webkit-keyframes mx_AppLoading_spinner_fadeIn_animation{0%{opacity:0}to{opacity:1}}@keyframes mx_AppLoading_spinner_fadeIn_animation{0%{opacity:0}to{opacity:1}}.mx_AppLoading iframe{display:none}.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper{z-index:1}.mx_Autocomplete{position:absolute;bottom:0;z-index:1001;width:100%;background:#fff;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;max-height:50vh;overflow:auto;-webkit-box-shadow:0 -16px 32px rgba(0,0,0,.04);box-shadow:0 -16px 32px rgba(0,0,0,.04)}.mx_Autocomplete_ProviderSection{border-bottom:1px solid transparent}.mx_Autocomplete_Completion_block{height:34px;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32}.mx_Autocomplete_Completion_block *{margin:0 3px}.mx_Autocomplete_Completion_pill{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:2rem;height:3.4rem;padding:.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32}.mx_Autocomplete_Completion_pill>*{margin-right:.3rem}.mx_Autocomplete_Completion_subtitle{font-style:italic;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_Autocomplete_Completion_description{color:grey}.mx_Autocomplete_Completion_container_pill{margin:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap}.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_description,.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_subtitle,.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_title{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx_Autocomplete_Completion.selected,.mx_Autocomplete_Completion:hover{background:#f2f5f8;outline:none}.mx_Autocomplete_provider_name{margin:12px;color:#2e2f32;font-weight:400;opacity:.4}.m_RoomView_auxPanel_stateViews{padding:5px 5px 5px 19px;border-bottom:1px solid transparent}.m_RoomView_auxPanel_stateViews_span a{text-decoration:none;color:inherit}.m_RoomView_auxPanel_stateViews_span[data-severity=warning]{font-weight:700;color:orange}.m_RoomView_auxPanel_stateViews_span[data-severity=alert]{font-weight:700;color:red}.m_RoomView_auxPanel_stateViews_span[data-severity=normal]{font-weight:400}.m_RoomView_auxPanel_stateViews_span[data-severity=notice]{font-weight:400;color:#a2a2a2}.m_RoomView_auxPanel_stateViews_delim{padding:0 5px;color:#a2a2a2}.mx_BasicMessageComposer{position:relative}.mx_BasicMessageComposer .mx_BasicMessageComposer_inputEmpty>:first-child:before{content:var(--placeholder);opacity:.333;width:0;height:0;overflow:visible;display:inline-block;pointer-events:none;white-space:nowrap}@-webkit-keyframes visualbell{0%{background-color:#faa}to{background-color:#fff}}.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error{-webkit-animation:visualbell .2s;animation:visualbell .2s}.mx_BasicMessageComposer .mx_BasicMessageComposer_input{white-space:pre-wrap;word-wrap:break-word;outline:none;overflow-x:hidden}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill,.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill{position:relative}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill:before,.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill:before{content:var(--avatar-letter);width:1.6rem;height:1.6rem;margin-right:.24rem;background:var(--avatar-background),#fff;color:#fff;background-repeat:no-repeat;background-size:1.6rem;border-radius:1.6rem;text-align:center;font-weight:400;line-height:1.6rem;font-size:1.04rem}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_disabled{pointer-events:none}.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper{position:relative;height:0}.mx_E2EIcon{width:16px;height:16px;margin:0 9px;position:relative;display:block}.mx_E2EIcon_normal:after,.mx_E2EIcon_normal:before,.mx_E2EIcon_verified:after,.mx_E2EIcon_verified:before,.mx_E2EIcon_warning:after,.mx_E2EIcon_warning:before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_E2EIcon:before{background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:90%;mask-size:90%}.mx_E2EIcon:before,.mx_E2EIcon_bordered{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_E2EIcon_bordered{background-color:#f3f8fd}.mx_E2EIcon_bordered:after{-webkit-mask-size:75%;mask-size:75%}.mx_E2EIcon_bordered:before{-webkit-mask-size:65%;mask-size:65%}.mx_E2EIcon_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_E2EIcon_normal:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#91a1c0}.mx_E2EIcon_verified:after{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg);background-color:#0dbd8b}.mx_EditMessageComposer{padding:3px;margin:-7px -10px -5px;overflow:visible!important}.mx_EditMessageComposer .mx_BasicMessageComposer_input{border-radius:4px;border:1px solid transparent;background-color:#fff;max-height:200px;padding:3px 6px}.mx_EditMessageComposer .mx_BasicMessageComposer_input:focus{border-color:rgba(13,189,139,.5)}.mx_EditMessageComposer .mx_EditMessageComposer_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;position:absolute;left:0;background:#f3f8fd;z-index:100;right:0;margin:0 -110px 0 0;padding:5px 147px 5px 5px}.mx_EditMessageComposer .mx_EditMessageComposer_buttons .mx_AccessibleButton{margin-left:5px;padding:5px 40px}.mx_EventTile_last .mx_EditMessageComposer_buttons{position:static;margin-right:-147px}.mx_EntityTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32;cursor:pointer}.mx_EntityTile .mx_E2EIcon{margin:0;position:absolute;bottom:2px;right:7px}.mx_EntityTile:hover{padding-right:30px;position:relative}.mx_EntityTile:hover:before{content:"";position:absolute;top:calc(50% - 8px);right:-8px;-webkit-mask:url(../../img/member_chevron.4163a20.png);mask:url(../../img/member_chevron.4163a20.png);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:16px;height:16px;background-color:#91a1c0}.mx_EntityTile .mx_PresenceLabel{display:none}.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_PresenceLabel{display:block}.mx_EntityTile_invite{display:table-cell;vertical-align:middle;margin-left:10px;width:26px}.mx_EntityTile_avatar,.mx_GroupRoomTile_avatar{padding:4px 12px 4px 3px;position:relative}.mx_EntityTile_name,.mx_GroupRoomTile_name{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden;font-size:1.4rem;text-overflow:ellipsis;white-space:nowrap}.mx_EntityTile_details{overflow:hidden;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_EntityTile_ellipsis .mx_EntityTile_name,.mx_EntityTile_invitePlaceholder .mx_EntityTile_name{font-style:italic;color:#2e2f32}.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,.mx_EntityTile_offline_beenactive .mx_EntityTile_name,.mx_EntityTile_unavailable .mx_EntityTile_avatar,.mx_EntityTile_unavailable .mx_EntityTile_name{opacity:.5}.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,.mx_EntityTile_offline_neveractive .mx_EntityTile_name,.mx_EntityTile_unknown .mx_EntityTile_avatar,.mx_EntityTile_unknown .mx_EntityTile_name{opacity:.25}.mx_EntityTile_subtext{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_EntityTile_power{-webkit-padding-start:6px;padding-inline-start:6px;font-size:1rem;color:#8d99a5;max-width:6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_EntityTile:hover .mx_EntityTile_power{display:none}.mx_EventTile{max-width:100%;clear:both;padding-top:18px;font-size:1.4rem;position:relative}.mx_EventTile.mx_EventTile_info{padding-top:1px}.mx_EventTile_avatar{top:14px;left:8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{top:.6rem;left:64px}.mx_EventTile_continuation{padding-top:0!important}.mx_EventTile_continuation.mx_EventTile_isEditing{padding-top:5px!important;margin-top:-5px}.mx_EventTile_isEditing{background-color:#f3f8fd}.mx_EventTile .mx_SenderProfile{color:#2e2f32;font-size:1.4rem;display:inline-block;overflow:hidden;cursor:pointer;padding-bottom:0;padding-top:0;margin:0;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 64px)}.mx_EventTile .mx_SenderProfile .mx_Flair{opacity:.7;margin-left:5px;display:inline-block;vertical-align:top;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile .mx_SenderProfile .mx_Flair img{vertical-align:-2px;margin-right:2px;border-radius:8px}.mx_EventTile_isEditing .mx_MessageTimestamp{visibility:hidden!important}.mx_EventTile .mx_MessageTimestamp{display:block;visibility:hidden;white-space:nowrap;left:0;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile_continuation .mx_EventTile_line{clear:both}.mx_EventTile_line,.mx_EventTile_reply{position:relative;padding-left:64px;border-radius:4px}.mx_EventListSummary .mx_EventTile_line,.mx_RoomView_timeline_rr_enabled .mx_EventTile_line{margin-right:110px}.mx_EventTile_bubbleContainer{display:grid;grid-template-columns:1fr 100px}.mx_EventTile_bubbleContainer .mx_EventTile_line{margin-right:0;grid-column:1/3;padding:0!important}.mx_EventTile_bubbleContainer .mx_EventTile_msgOption{grid-column:2}.mx_EventTile_reply{margin-right:10px}.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji{font-size:48px!important;line-height:57px!important}.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp{visibility:visible}.mx_EventTile_selected>div>a>.mx_MessageTimestamp{left:3px;width:auto}.mx_EventTile.focus-visible:focus-within>div>a>.mx_MessageTimestamp,.mx_EventTile.mx_EventTile_actionBarFocused>div>a>.mx_MessageTimestamp,.mx_EventTile:hover>div>a>.mx_MessageTimestamp,.mx_EventTile_last>div>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile.focus-visible:focus-within>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile:hover>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile_last>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_ReplyThread .mx_EventTile>a>.mx_MessageTimestamp{visibility:visible}.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar,.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,.mx_EventTile:hover .mx_MessageActionBar,[data-whatinput=keyboard] .mx_EventTile:focus-within .mx_MessageActionBar{visibility:visible}.mx_EventTile_selected>.mx_EventTile_line{border-left:4px solid #0dbd8b;padding-left:60px;background-color:#f6f7f8}.mx_EventTile_highlight,.mx_EventTile_highlight .markdown-body{color:#ff4b55}.mx_EventTile_highlight .markdown-body .mx_EventTile_line,.mx_EventTile_highlight .mx_EventTile_line{background-color:#fff8e3}.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line{padding-left:78px}.mx_EventTile.focus-visible:focus-within .mx_EventTile_line,.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,.mx_EventTile:hover .mx_EventTile_line{background-color:#f6f7f8}.mx_EventTile_searchHighlight{border-radius:5px;padding-left:2px;padding-right:2px;cursor:pointer}.mx_EventTile_searchHighlight,.mx_EventTile_searchHighlight a{background-color:#0dbd8b;color:#fff}.mx_EventTile_receiptSending:before,.mx_EventTile_receiptSent:before{background-color:#8d99a5;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14px;mask-size:14px;width:14px;height:14px;content:"";position:absolute;top:0;left:0;right:0}.mx_EventTile_receiptSent:before{-webkit-mask-image:url(../../img/element-icons/circle-sent.5079cbe.svg);mask-image:url(../../img/element-icons/circle-sent.5079cbe.svg)}.mx_EventTile_receiptSending:before{-webkit-mask-image:url(../../img/element-icons/circle-sending.bcca6aa.svg);mask-image:url(../../img/element-icons/circle-sending.bcca6aa.svg)}.mx_EventTile_contextual{opacity:.4}.mx_EventTile_msgOption{float:right;text-align:right;position:relative;width:90px;height:1px;margin-right:10px}.mx_EventTile_msgOption a{text-decoration:none}.mx_EventTile_readAvatars{position:relative;display:inline-block;width:14px;height:14px;top:-2.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.mx_EventTile_readAvatars .mx_BaseAvatar{position:absolute;display:inline-block;height:1.4rem;width:1.4rem;-webkit-transition:left .1s ease-out,top .3s ease-out;transition:left .1s ease-out,top .3s ease-out;-webkit-transition:left var(--transition-short) ease-out,top var(--transition-standard) ease-out;transition:left var(--transition-short) ease-out,top var(--transition-standard) ease-out}.mx_EventTile_readAvatarRemainder{color:#acacac;font-size:1.1rem;position:absolute}.mx_EventTile_content{display:block;overflow-y:hidden;overflow-x:hidden;margin-right:34px}.mx_EventTile_body{overflow-y:hidden}.mx_EventTile_spoiler{cursor:pointer}.mx_EventTile_spoiler_reason{color:#acacac;font-size:1.1rem}.mx_EventTile_spoiler_content{-webkit-filter:blur(5px) saturate(.1) sepia(1);filter:blur(5px) saturate(.1) sepia(1);-webkit-transition-duration:.5s;transition-duration:.5s}.mx_EventTile_spoiler.visible>.mx_EventTile_spoiler_content{-webkit-filter:none;filter:none}.mx_EventTile_e2eIcon{position:absolute;top:6px;left:44px;width:14px;height:14px;display:block;bottom:0;right:0;opacity:.2;background-repeat:no-repeat;background-size:contain}.mx_EventTile_e2eIcon:after,.mx_EventTile_e2eIcon:before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-size:contain;mask-size:contain}.mx_EventTile_e2eIcon:after,.mx_EventTile_e2eIcon:before{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mx_EventTile_e2eIcon:before{background-color:#fff;-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);-webkit-mask-size:90%;mask-size:90%}.mx_EventTile_e2eIcon_undecryptable:after,.mx_EventTile_e2eIcon_unverified:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_undecryptable,.mx_EventTile_e2eIcon_unverified{opacity:1}.mx_EventTile_e2eIcon_unknown:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_unknown{opacity:1}.mx_EventTile_e2eIcon_unencrypted:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_unencrypted{opacity:1}.mx_EventTile_e2eIcon_unauthenticated:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#91a1c0}.mx_EventTile_e2eIcon_unauthenticated{opacity:1}.mx_EventTile_keyRequestInfo{font-size:1.2rem}.mx_EventTile_keyRequestInfo_text{opacity:.5}.mx_EventTile_keyRequestInfo_text a{color:#2e2f32;text-decoration:underline;cursor:pointer}.mx_EventTile_keyRequestInfo_tooltip_contents p{text-align:auto;margin-left:3px;margin-right:3px}.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child{margin-top:0}.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child{margin-bottom:0}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{padding-left:60px}.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{border-left:4px solid #76cfa5}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line{border-left:4px solid #e8bf37}.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line{padding-left:78px}.mx_EventTile:hover .mx_EventTile_e2eIcon{opacity:1}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line>a>.mx_MessageTimestamp,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line>a>.mx_MessageTimestamp,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line>a>.mx_MessageTimestamp{width:38px}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line>.mx_EventTile_e2eIcon,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line>.mx_EventTile_e2eIcon,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line>.mx_EventTile_e2eIcon{display:block;left:41px}.mx_EventTile_content .mx_EventTile_edited{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1.2rem;color:#9e9e9e;display:inline-block;margin-left:9px;cursor:pointer}.mx_EventTile_body pre{border:1px solid transparent}.mx_EventTile_content .markdown-body{font-family:inherit!important;white-space:normal!important;line-height:inherit!important;color:inherit;font-size:1.4rem}.mx_EventTile_content .markdown-body code,.mx_EventTile_content .markdown-body pre{font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji!important;color:#333}.mx_EventTile_content .markdown-body pre{overflow-x:overlay;overflow-y:visible}.mx_EventTile_content .markdown-body code{background-color:#f8f8f8}.mx_EventTile_lineNumbers{float:left;margin:0 .5em 0 -1.5em;color:grey}.mx_EventTile_lineNumber{text-align:right;display:block;padding-left:1em}.mx_EventTile_collapsedCodeBlock{max-height:30vh}.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre,.mx_EventTile:hover .mx_EventTile_body pre{border:1px solid #e5e5e5}.mx_EventTile_pre_container{position:relative}.mx_EventTile_button{position:absolute;display:inline-block;visibility:hidden;cursor:pointer;top:8px;right:8px;width:19px;height:19px;background-color:#2e2f32}.mx_EventTile_buttonBottom{top:33px}.mx_EventTile_copyButton{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg)}.mx_EventTile_collapseButton{-webkit-mask-image:url(../../img/feather-customised/minimise.aec9142.svg);mask-image:url(../../img/feather-customised/minimise.aec9142.svg)}.mx_EventTile_collapseButton,.mx_EventTile_expandButton{-webkit-mask-size:75%;mask-size:75%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_EventTile_expandButton{-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg)}.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton{visibility:visible}.mx_EventTile_content .markdown-body h1,.mx_EventTile_content .markdown-body h2,.mx_EventTile_content .markdown-body h3,.mx_EventTile_content .markdown-body h4,.mx_EventTile_content .markdown-body h5,.mx_EventTile_content .markdown-body h6{font-family:inherit!important;color:inherit}.mx_EventTile_content .markdown-body h1,.mx_EventTile_content .markdown-body h2{font-size:1.5em;border-bottom:none!important}.mx_EventTile_content .markdown-body a{color:#238cf5}.mx_EventTile_content .markdown-body .hljs{display:inline!important}.mx_EventTile_tileError{color:red;text-align:center;margin-right:0}.mx_EventTile_tileError .mx_EventTile_line{padding-left:0;margin-right:0}.mx_EventTile_tileError .mx_EventTile_line span{padding:4px 8px}.mx_EventTile_tileError a{margin-left:1em}@media only screen and (max-width:480px){.mx_EventTile_line,.mx_EventTile_reply{padding-left:0;margin-right:0}.mx_EventTile_content{margin-top:10px;margin-right:0}}.mx_GroupLayout .mx_EventTile>.mx_SenderProfile{line-height:2rem;margin-left:64px}.mx_GroupLayout .mx_EventTile>.mx_EventTile_line{padding-left:64px}.mx_GroupLayout .mx_EventTile>.mx_EventTile_avatar{position:absolute}.mx_GroupLayout .mx_EventTile .mx_MessageTimestamp{position:absolute;width:46px}.mx_GroupLayout .mx_EventTile .mx_EventTile_line,.mx_GroupLayout .mx_EventTile .mx_EventTile_reply{padding-top:1px;padding-bottom:3px;line-height:2.2rem}.mx_GroupLayout .mx_EventTile_info .mx_EventTile_line{padding-left:82px}.mx_MatrixChat_useCompactLayout .mx_EventTile{padding-top:4px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_reply{padding-top:0;padding-bottom:0}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info{padding-top:0;font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_reply{line-height:2rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{top:4px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_SenderProfile{font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote{padding-top:8px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_avatar{top:2px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_reply{padding-top:0;padding-bottom:1px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation{padding-top:0}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_reply{padding-top:0;padding-bottom:0}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_avatar{top:2px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_e2eIcon{top:3px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_readAvatars{top:-2rem}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body blockquote,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body dl,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body ol,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body p,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body pre,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body table,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body ul{margin-bottom:4px}.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList h2{margin-top:6px}.mx_IRCLayout{--name-width:70px;line-height:1.8rem!important}.mx_IRCLayout .mx_EventTile>a{text-decoration:none}.mx_IRCLayout .mx_EventTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding-top:0}.mx_IRCLayout .mx_EventTile>*{margin-right:5px}.mx_IRCLayout .mx_EventTile>.mx_EventTile_msgOption{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5;-ms-flex-negative:0;flex-shrink:0}.mx_IRCLayout .mx_EventTile>.mx_EventTile_msgOption .mx_EventTile_readAvatars{top:.2rem}.mx_IRCLayout .mx_EventTile>.mx_SenderProfile{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-ms-flex-negative:0;flex-shrink:0;width:var(--name-width);text-overflow:ellipsis;text-align:left;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:visible;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_IRCLayout .mx_EventTile .mx_EventTile_line,.mx_IRCLayout .mx_EventTile .mx_EventTile_reply{padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;min-width:0}.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;position:relative;top:0;left:0;-ms-flex-negative:0;flex-shrink:0;height:1.8rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar>.mx_BaseAvatar,.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar>.mx_BaseAvatar>*{height:1.4rem!important;width:1.4rem!important;font-size:1rem!important;line-height:1.5rem!important}.mx_IRCLayout .mx_EventTile .mx_MessageTimestamp{font-size:1rem;width:45px;text-align:right}.mx_IRCLayout .mx_EventTile>.mx_EventTile_e2eIcon{position:absolute;right:unset;left:unset;top:0;padding:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;height:1.8rem;background-position:50%}.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_EventTile_e2eIcon,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_MTextBody,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_ReplyThread_wrapper_empty,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_TextualEvent{display:inline-block}.mx_IRCLayout .mx_EventTile .mx_EventTile_reply{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.mx_IRCLayout .mx_EventTile .mx_EditMessageComposer_buttons{position:relative}.mx_IRCLayout .mx_EventTile_emote>.mx_EventTile_avatar{margin-left:calc(var(--name-width) + 19px)}.mx_IRCLayout blockquote{margin:0}.mx_IRCLayout .mx_EventListSummary>.mx_EventTile_line{padding-left:calc(var(--name-width) + 74px)}.mx_IRCLayout .mx_EventListSummary .mx_EventListSummary_avatars{padding:0;margin:0 9px 0 0}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{left:calc(var(--name-width) + 24px);top:0}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line{left:calc(var(--name-width) + 24px)}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_TextualEvent{line-height:1.8rem}.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{padding-left:0;border-left:0}.mx_IRCLayout .mx_SenderProfile_hover{background-color:#fff;overflow:hidden}.mx_IRCLayout .mx_SenderProfile_hover>span{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_IRCLayout .mx_SenderProfile_hover>span>.mx_SenderProfile_name{overflow:hidden;text-overflow:ellipsis;min-width:var(--name-width);text-align:end}.mx_IRCLayout .mx_SenderProfile:hover{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_IRCLayout .mx_SenderProfile_hover:hover{overflow:visible;width:max(auto,100%);z-index:10}.mx_IRCLayout .mx_ReplyThread{margin:0}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile{width:unset;max-width:var(--name-width)}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover{background:transparent}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover>span>.mx_SenderProfile_name{min-width:inherit}.mx_IRCLayout .mx_ReplyThread .mx_EventTile_emote>.mx_EventTile_avatar{margin-left:0}.mx_IRCLayout .mx_ReplyThread .mx_MessageTimestamp{width:auto}.mx_IRCLayout .mx_ReplyThread .mx_EventTile_e2eIcon{position:relative;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.mx_IRCLayout .mx_ProfileResizer{position:absolute;height:100%;width:15px;left:calc(80px + var(--name-width));cursor:col-resize;z-index:100}.mx_IRCLayout .mx_Flair>img{height:1.4rem!important;width:1.4rem!important}.mx_JumpToBottomButton{z-index:1000;position:absolute;bottom:12px;right:24px;width:38px;height:50px;text-align:center}.mx_JumpToBottomButton_badge{position:relative;top:-12px;border-radius:16px;font-weight:700;font-size:1.2rem;line-height:1.4rem;text-align:center;display:inline-block;padding:0 4px;color:#fff;background-color:#61708b}.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge{color:#f2f5f8;background-color:#ff4b55}.mx_JumpToBottomButton_scrollDown{position:relative;height:38px;border-radius:19px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1.3px solid #61708b;cursor:pointer}.mx_JumpToBottomButton_scrollDown:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;background:#61708b}.mx_LinkPreviewWidget{margin-top:15px;margin-right:15px;margin-bottom:15px;display:-webkit-box;display:-ms-flexbox;display:flex;border-left:4px solid #ddd;color:#888}.mx_LinkPreviewWidget_image{-webkit-box-flex:0;-ms-flex:0 0 100px;flex:0 0 100px;margin-left:15px;text-align:center;cursor:pointer}.mx_LinkPreviewWidget_caption{margin-left:15px;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.mx_LinkPreviewWidget_title{display:inline;font-weight:700;white-space:normal}.mx_LinkPreviewWidget_siteName{display:inline}.mx_LinkPreviewWidget_description{margin-top:8px;white-space:normal;word-wrap:break-word}.mx_LinkPreviewWidget_cancel{cursor:pointer;width:18px;height:18px}.mx_LinkPreviewWidget_cancel img{-webkit-box-flex:0;-ms-flex:0 0 40px;flex:0 0 40px;visibility:hidden}.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel img,.mx_LinkPreviewWidget_cancel.focus-visible:focus img{visibility:visible}.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget{margin-top:6px;margin-bottom:6px}.mx_MemberInfo{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;margin-top:8px}.mx_MemberInfo,.mx_MemberInfo_name{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_MemberInfo_name{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_MemberInfo_name>.mx_E2EIcon{margin-right:0}.mx_MemberInfo_cancel{height:16px;width:16px;padding:10px 0 10px 10px;cursor:pointer;-webkit-mask-image:url(../../img/minimise.871d2de.svg);mask-image:url(../../img/minimise.871d2de.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:16px center;mask-position:16px center;background-color:#91a1c0}.mx_MemberInfo_name h2{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-x:auto;max-height:50px}.mx_MemberInfo h2{font-size:1.8rem;font-weight:600;margin:16px 0 16px 15px}.mx_MemberInfo_container{margin:0 16px 16px}.mx_MemberInfo .mx_RoomTile_nameContainer{width:154px}.mx_MemberInfo .mx_RoomTile_badge{display:none}.mx_MemberInfo .mx_RoomTile_name{width:160px}.mx_MemberInfo_avatar{background:hsla(0,0%,91%,.77);margin-bottom:16px}.mx_MemberInfo_avatar>img{height:auto;width:100%;max-height:30vh;-o-object-fit:contain;object-fit:contain;display:block}.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image{cursor:-webkit-zoom-in;cursor:zoom-in}.mx_MemberInfo_profile{margin-bottom:16px}.mx_MemberInfo h3{text-transform:uppercase;color:#9fa9ba;font-weight:700;font-size:1.2rem;margin:4px 0}.mx_MemberInfo_profileField{font-size:1.5rem;position:relative}.mx_MemberInfo_buttons{margin-bottom:16px}.mx_MemberInfo_field{cursor:pointer;font-size:1.5rem;color:#2e2f32;margin-left:8px;line-height:2.3rem}.mx_MemberInfo_createRoom{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 8px}.mx_MemberInfo_createRoom_label{width:auto!important;cursor:pointer}.mx_MemberInfo label{font-size:1.3rem}.mx_MemberInfo label .mx_MemberInfo_label_text{display:inline-block;max-width:180px;vertical-align:text-top}.mx_MemberInfo input[type=radio]{vertical-align:-2px;margin-right:5px;margin-left:8px}.mx_MemberInfo_statusMessage{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_MemberInfo .mx_MemberInfo_scrollContainer{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_GroupMemberList,.mx_GroupRoomList,.mx_MemberList{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:0}.mx_GroupMemberList .mx_Spinner,.mx_GroupRoomList .mx_Spinner,.mx_MemberList .mx_Spinner{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.mx_GroupMemberList .mx_SearchBox,.mx_GroupRoomList .mx_SearchBox,.mx_MemberList .mx_SearchBox{margin-bottom:5px}.mx_GroupMemberList h2,.mx_GroupRoomList h2,.mx_MemberList h2{text-transform:uppercase;color:#3d3b39;font-weight:600;font-size:1.3rem;padding-left:3px;padding-right:12px;margin-top:8px;margin-bottom:4px}.mx_GroupMemberList .mx_AutoHideScrollbar,.mx_GroupRoomList .mx_AutoHideScrollbar,.mx_MemberList .mx_AutoHideScrollbar{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_GroupMemberList .mx_RightPanel_scopeHeader,.mx_GroupRoomList .mx_RightPanel_scopeHeader,.mx_MemberList .mx_RightPanel_scopeHeader{margin-top:-8px}.mx_GroupMemberList_query,.mx_GroupRoomList_query{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_MemberList_chevron{position:absolute;right:35px;margin-top:-15px}.mx_MemberList_border{overflow-y:auto;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0px}.mx_MemberList_query{height:16px}.mx_MemberList_query[type=text]{font-size:1.2rem}.mx_MemberList_wrapper{padding:10px}.mx_MemberList_invite{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;position:relative;background-color:#0dbd8b;border-radius:4px;margin:5px 9px 9px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;font-weight:600}.mx_MemberList_invite.mx_AccessibleButton_disabled{background-color:#888;cursor:not-allowed}.mx_MemberList_invite span{padding:8px 0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_MemberList_invite span:before{content:"";display:inline-block;background-color:#fff;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;width:20px;height:20px;margin-right:5px}.mx_MemberList_inviteCommunity span:before{-webkit-mask-image:url(../../img/icon-invite-people.d82f491.svg);mask-image:url(../../img/icon-invite-people.d82f491.svg)}.mx_MemberList_addRoomToCommunity span:before{-webkit-mask-image:url(../../img/icons-room-add.bd36e26.svg);mask-image:url(../../img/icons-room-add.bd36e26.svg)}.mx_MessageComposer_wrapper{vertical-align:middle;margin:auto;border-top:1px solid transparent;position:relative;padding-left:82px;padding-right:6px}.mx_MessageComposer_replaced_wrapper{margin-left:auto;margin-right:auto}.mx_MessageComposer_replaced_valign{height:60px;display:table-cell;vertical-align:middle}.mx_MessageComposer_roomReplaced_icon{float:left;margin-right:20px;margin-top:5px;width:31px;height:31px}.mx_MessageComposer_roomReplaced_header{font-weight:700}.mx_MessageComposer_autocomplete_wrapper{position:relative;height:0}.mx_MessageComposer_row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.mx_MessageComposer .mx_MessageComposer_avatar{position:absolute;left:26px}.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar{display:block}.mx_MessageComposer_composecontrols{width:100%}.mx_MessageComposer_e2eIcon.mx_E2EIcon{position:absolute;left:60px;margin-right:0;margin-left:3px;width:12px;height:12px}.mx_MessageComposer_noperm_error{width:100%;height:60px;font-style:italic;color:#888;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_MessageComposer_input_wrapper{cursor:text}.mx_MessageComposer_input,.mx_MessageComposer_input_wrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_MessageComposer_input{vertical-align:middle;min-height:60px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;font-size:1.4rem;margin-right:6px}.mx_MessageComposer_editor{width:100%;max-height:120px;min-height:19px;overflow-y:auto;overflow-x:hidden;word-break:break-word}.mx_MessageComposer_editor>:first-child{margin-top:0!important}.mx_MessageComposer_editor>:last-child{margin-bottom:0!important}@keyframes visualbell{0%{background-color:#faa}to{background-color:#fff}}.mx_MessageComposer_input_error{-webkit-animation:visualbell .2s;animation:visualbell .2s}.mx_MessageComposer_input blockquote{color:#777;margin:0 0 16px;padding:0 15px;border-left:4px solid #ddd}.mx_MessageComposer_input pre{background-color:rgba(0,0,0,.04);border-radius:3px;padding:10px}.mx_MessageComposer_input textarea{display:block;width:100%;padding:0;margin-top:6px;margin-bottom:6px;border:0;resize:none;outline:none;-webkit-box-shadow:none;box-shadow:none;color:#2e2f32;background-color:#fff;font-size:1.4rem;max-height:120px;overflow:auto;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji}.mx_MessageComposer_input textarea::-moz-placeholder{line-height:100%;color:#0dbd8b;opacity:1}.mx_MessageComposer_input textarea::-webkit-input-placeholder{color:#0dbd8b}.mx_MessageComposer_button_highlight{background:rgba(13,189,139,.25)}.mx_MessageComposer_button_highlight:before{background-color:#0dbd8b!important}.mx_MessageComposer_button{position:relative;margin-right:6px;cursor:pointer;height:26px;width:26px;border-radius:100%}.mx_MessageComposer_button:before{content:"";position:absolute;top:3px;left:3px;height:20px;width:20px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_MessageComposer_button:hover{background:rgba(13,189,139,.1)}.mx_MessageComposer_button:hover:before{background-color:#0dbd8b}.mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled):before{background-color:#ff4b55}.mx_MessageComposer_upload:before{-webkit-mask-image:url(../icons/attach.svg);mask-image:url(../icons/attach.svg)}.mx_MessageComposer_voiceMessage:before{-webkit-mask-image:url(../../img/voip/mic-on-mask.97ec7a0.svg);mask-image:url(../../img/voip/mic-on-mask.97ec7a0.svg)}.mx_MessageComposer_emoji:before{-webkit-mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg);mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg)}.mx_MessageComposer_stickers:before{-webkit-mask-image:url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);mask-image:url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg)}.mx_MessageComposer_sendMessage{cursor:pointer;position:relative;margin-right:6px;width:32px;height:32px;border-radius:100%;background-color:#0dbd8b}.mx_MessageComposer_sendMessage:before{position:absolute;height:16px;width:16px;top:8px;left:9px;-webkit-mask-image:url(../../img/element-icons/send-message.a4e9cf8.svg);mask-image:url(../../img/element-icons/send-message.a4e9cf8.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-color:#fff;content:""}.mx_MessageComposer_formatting{cursor:pointer;margin:0 11px;width:24px;height:18px}.mx_MessageComposer_formatbar_wrapper{width:100%;background-color:#fff;-webkit-box-shadow:inset 0 1px 0 0 rgba(0,0,0,.08);box-shadow:inset 0 1px 0 0 rgba(0,0,0,.08)}.mx_MessageComposer_formatbar{margin:auto;display:-webkit-box;display:-ms-flexbox;display:flex;height:30px;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:62px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1rem;color:#888}.mx_MessageComposer_formatbar *{margin-right:4px}.mx_MessageComposer_format_button,.mx_MessageComposer_formatbar_cancel,.mx_MessageComposer_formatbar_markdown{cursor:pointer}.mx_MessageComposer_formatbar_cancel{margin-right:22px}.mx_MessageComposer_formatbar_markdown{height:17px;width:30px;margin-right:64px}.mx_MessageComposer_input_markdownIndicator{height:10px;width:12px;padding:4px 4px 4px 0}.mx_MessageComposer_formatbar_markdown,.mx_MessageComposer_input_markdownIndicator{cursor:pointer;-webkit-mask-image:url(../../img/markdown.6905ba8.svg);mask-image:url(../../img/markdown.6905ba8.svg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#c1c6cd}.mx_MessageComposer_formatbar_markdown.mx_MessageComposer_markdownDisabled,.mx_MessageComposer_input_markdownIndicator.mx_MessageComposer_markdownDisabled{opacity:.2}.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input{min-height:50px}.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error{height:50px}.mx_MessageComposerFormatBar{display:none;width:130px;height:24px;position:absolute;cursor:pointer;border-radius:4px;background-color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1000}.mx_MessageComposerFormatBar.mx_MessageComposerFormatBar_shown{display:block}.mx_MessageComposerFormatBar>*{white-space:nowrap;display:inline-block;position:relative;border:1px solid #e9edf1;margin-left:-1px}.mx_MessageComposerFormatBar>:hover{border-color:#ddd;z-index:1}.mx_MessageComposerFormatBar>:first-child{border-radius:3px 0 0 3px}.mx_MessageComposerFormatBar>:last-child{border-radius:0 3px 3px 0}.mx_MessageComposerFormatBar>:only-child{border-radius:3px}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button{width:27px;height:24px;-webkit-box-sizing:border-box;box-sizing:border-box;background:none;vertical-align:middle}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#2e2f32}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconBold:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);mask-image:url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconItalic:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/italic.bf18054.svg);mask-image:url(../../img/element-icons/room/format-bar/italic.bf18054.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconStrikethrough:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);mask-image:url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconQuote:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);mask-image:url(../../img/element-icons/room/format-bar/quote.560cd8f.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconCode:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/code.27444ba.svg);mask-image:url(../../img/element-icons/room/format-bar/code.27444ba.svg)}.mx_MessageComposerFormatBar_buttonTooltip{white-space:nowrap;font-size:1.3rem;font-weight:600;min-width:54px;text-align:center}.mx_MessageComposerFormatBar_buttonTooltip .mx_MessageComposerFormatBar_tooltipShortcut{font-size:.9rem;opacity:.7}.mx_NewRoomIntro{margin:40px 0 48px 64px}.mx_NewRoomIntro .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):after,.mx_NewRoomIntro .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):before{content:unset}.mx_NewRoomIntro .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_NewRoomIntro .mx_NewRoomIntro_buttons{margin-top:28px}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton{line-height:2.4rem;display:inline-block}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:12px}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary_outline):before{content:"";display:inline-block;background-color:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;width:20px;height:20px;margin-right:5px;vertical-align:text-bottom}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_NewRoomIntro_inviteButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_NewRoomIntro>h2{margin-top:24px;font-size:2.4rem;font-weight:600}.mx_NewRoomIntro>p{margin:0;font-size:1.5rem;color:#737d8c}.mx_NotificationBadge:not(.mx_NotificationBadge_visible){display:none}.mx_NotificationBadge.mx_NotificationBadge_visible{background-color:#61708b;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_highlighted{background-color:#ff4b55}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot{background-color:#2e2f32;width:6px;height:6px;border-radius:6px}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char{width:1.6rem;height:1.6rem;border-radius:1.6rem}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_3char{width:2.6rem;height:1.6rem;border-radius:1.6rem}.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count{font-size:1rem;line-height:1.4rem;color:#fff}.mx_PinnedEventTile{min-height:40px;margin-bottom:5px;width:100%;border-radius:5px}.mx_PinnedEventTile:hover{background-color:#f6f7f8}.mx_PinnedEventTile .mx_PinnedEventTile_sender,.mx_PinnedEventTile .mx_PinnedEventTile_timestamp{color:#868686;font-size:.8em;vertical-align:top;display:inline-block;padding-bottom:3px}.mx_PinnedEventTile .mx_PinnedEventTile_timestamp{padding-left:15px;display:none}.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar{float:left;margin-right:10px}.mx_PinnedEventTile_actions{float:right;margin-right:10px;display:none}.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp{display:inline-block}.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions{display:block}.mx_PinnedEventTile_unpinButton{display:inline-block;cursor:pointer;margin-left:10px}.mx_PinnedEventTile_gotoButton{display:inline-block;font-size:.7em}.mx_PinnedEventTile_message{margin-left:50px;position:relative;top:0;left:0}.mx_PinnedEventsPanel{border-top:1px solid transparent}.mx_PinnedEventsPanel_body{max-height:300px;overflow-y:auto;padding-bottom:15px}.mx_PinnedEventsPanel_header{margin:0;padding-top:8px;padding-bottom:15px}.mx_PinnedEventsPanel_cancel{margin:12px;float:right;display:inline-block}.mx_PresenceLabel{font-size:1.1rem;opacity:.5}.mx_ReplyPreview{background:#fff;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;max-height:50vh;overflow:auto;-webkit-box-shadow:0 -16px 32px rgba(0,0,0,.04);box-shadow:0 -16px 32px rgba(0,0,0,.04)}.mx_ReplyPreview_section{border-bottom:1px solid transparent}.mx_ReplyPreview_header{margin:12px;color:#2e2f32;font-weight:400;opacity:.4}.mx_ReplyPreview_title{float:left}.mx_ReplyPreview_cancel{float:right;cursor:pointer}.mx_ReplyPreview_clear{clear:both}.mx_RoomBreadcrumbs{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb{margin-right:8px;width:32px}.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter{margin-left:-40px}.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter-active{margin-left:0;-webkit-transition:margin-left .64s cubic-bezier(.66,.02,.36,1);transition:margin-left .64s cubic-bezier(.66,.02,.36,1)}.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_placeholder{font-weight:600;font-size:1.4rem;line-height:32px;height:32px}.mx_RoomBreadcrumbs_Tooltip{margin-left:-42px;margin-top:-42px}.mx_RoomHeader{-webkit-box-flex:0;-ms-flex:0 0 50px;flex:0 0 50px;border-bottom:1px solid transparent;background-color:#fff}.mx_RoomHeader .mx_RoomHeader_e2eIcon{height:12px;width:12px}.mx_RoomHeader .mx_RoomHeader_e2eIcon .mx_E2EIcon{margin:0;position:absolute;height:12px;width:12px}.mx_RoomHeader_wrapper{margin:auto;height:50px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:0;padding:0 10px 0 18px}.mx_RoomHeader_wrapper .mx_InviteOnlyIcon_large{margin:0}.mx_RoomHeader_spinner{-webkit-box-flex:1;-ms-flex:1;flex:1;height:36px;padding-left:12px;padding-right:12px}.mx_RoomHeader_textButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;margin-right:8px;margin-top:-5px}.mx_RoomHeader_textButton_danger{background-color:#ff4b55}.mx_RoomHeader_cancelButton{cursor:pointer;padding-left:12px;padding-right:12px}.mx_RoomHeader_buttons{background-color:#fff}.mx_RoomHeader_buttons,.mx_RoomHeader_info{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_info{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomHeader_simpleHeader{line-height:5.2rem;color:#45474a;font-size:1.8rem;font-weight:600;overflow:hidden;margin-left:63px;text-overflow:ellipsis;width:100%}.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton{float:right}.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon{margin-left:14px;margin-right:24px;vertical-align:-4px}.mx_RoomHeader_name{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;overflow:hidden;color:#45474a;font-weight:600;font-size:1.8rem;margin:0 7px;border-bottom:1px solid transparent;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_nametext{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.mx_RoomHeader_settingsHint{color:#a2a2a2!important}.mx_RoomHeader_searchStatus{font-weight:400;opacity:.6}.mx_RoomHeader_avatar,.mx_RoomHeader_avatarPicker,.mx_RoomHeader_avatarPicker_edit,.mx_RoomHeader_avatarPicker_remove,.mx_RoomHeader_name{cursor:pointer}.mx_RoomHeader_avatarPicker_remove{position:absolute;top:-11px;right:-9px}.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable){color:#0dbd8b}.mx_RoomHeader_placeholder{color:#a2a2a2!important}.mx_RoomHeader_editable{border-bottom:1px solid #c7c7c7!important;min-width:150px;cursor:text}.mx_RoomHeader_editable:focus{border-bottom:1px solid #0dbd8b!important;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_RoomHeader_topic{-webkit-box-flex:1;-ms-flex:1;flex:1;color:#9e9e9e;font-weight:400;font-size:1.3rem;margin:4px 7px 0;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid transparent;line-height:1.2em;max-height:2.4em}.mx_RoomHeader_avatar{-webkit-box-flex:0;-ms-flex:0;flex:0;margin:0 6px 0 7px;position:relative}.mx_RoomHeader_avatar .mx_BaseAvatar_image{-o-object-fit:cover;object-fit:cover}.mx_RoomHeader_avatarPicker{position:relative}.mx_RoomHeader_avatarPicker_edit{position:absolute;left:16px;top:18px}.mx_RoomHeader_avatarPicker_edit>label{cursor:pointer}.mx_RoomHeader_avatarPicker_edit>input{display:none}.mx_RoomHeader_button{position:relative;margin-left:1px;margin-right:1px;cursor:pointer;height:32px;width:32px;border-radius:100%}.mx_RoomHeader_button:before{content:"";position:absolute;top:4px;left:4px;height:24px;width:24px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_RoomHeader_button:hover{background:rgba(13,189,139,.1)}.mx_RoomHeader_button:hover:before{background-color:#0dbd8b}.mx_RoomHeader_forgetButton:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg);width:26px}.mx_RoomHeader_appsButton:before{-webkit-mask-image:url(../../img/element-icons/room/apps.5ee9f78.svg);mask-image:url(../../img/element-icons/room/apps.5ee9f78.svg)}.mx_RoomHeader_appsButton_highlight:before{background-color:#0dbd8b}.mx_RoomHeader_searchButton:before{-webkit-mask-image:url(../../img/element-icons/room/search-inset.db6314d.svg);mask-image:url(../../img/element-icons/room/search-inset.db6314d.svg)}.mx_RoomHeader_voiceCallButton:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);-webkit-mask-size:20px;mask-size:20px;-webkit-mask-position:center;mask-position:center}.mx_RoomHeader_videoCallButton:before{-webkit-mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg);mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg)}.mx_RoomHeader_showPanel{height:16px}.mx_RoomHeader_voipButton{display:table-cell}.mx_RoomHeader_voipButtons{margin-top:18px}.mx_RoomHeader_pinnedButton:before{-webkit-mask-image:url(../../img/element-icons/room/pin.6ab67ed.svg);mask-image:url(../../img/element-icons/room/pin.6ab67ed.svg)}.mx_RoomHeader_pinsIndicator{position:absolute;right:0;bottom:4px;width:8px;height:8px;border-radius:8px;background-color:#8d99a5}.mx_RoomHeader_pinsIndicatorUnread{background-color:#ff4b55}@media only screen and (max-width:480px){.mx_RoomHeader_wrapper{padding:0}.mx_RoomHeader{overflow:hidden}}.mx_RoomList{padding-right:7px}.mx_RoomList_iconPlus:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg)}.mx_RoomList_iconHash:before{-webkit-mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg)}.mx_RoomList_iconExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_RoomList_iconBrowse:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_RoomList_iconDialpad:before{-webkit-mask-image:url(../../img/element-icons/roomlist/dialpad.37f876f.svg);mask-image:url(../../img/element-icons/roomlist/dialpad.37f876f.svg)}.mx_RoomList_explorePrompt{margin:4px 12px;padding-top:12px;border-top:1px solid #e7e7e7;font-size:1.4rem}.mx_RoomList_explorePrompt div:first-child{font-weight:600;line-height:1.8rem;color:#2e2f32}.mx_RoomList_explorePrompt .mx_AccessibleButton{color:#2e2f32;position:relative;padding:8px 8px 8px 32px;font-size:inherit;margin-top:12px;display:block;text-align:start;background-color:rgba(141,151,165,.2);border-radius:4px}.mx_RoomList_explorePrompt .mx_AccessibleButton:before{content:"";width:16px;height:16px;position:absolute;top:8px;left:8px;background:#737d8c;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_startChat:before{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_explore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_RoomPreviewBar{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-align-items:center}.mx_RoomPreviewBar h3{font-size:1.8rem;font-weight:600}.mx_RoomPreviewBar h3.mx_RoomPreviewBar_spinnerTitle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomPreviewBar .mx_RoomPreviewBar_message p,.mx_RoomPreviewBar h3{word-break:break-all;word-break:break-word}.mx_RoomPreviewBar .mx_Spinner{width:auto;height:auto;margin:10px 10px 10px 0;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomPreviewBar .mx_RoomPreviewBar_footer{font-size:1.2rem;line-height:2rem}.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner{vertical-align:middle;display:inline-block}.mx_RoomPreviewBar_actions,.mx_RoomPreviewBar_message{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomPreviewBar_message{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.mx_RoomPreviewBar_message p{overflow-wrap:break-word}.mx_RoomPreviewBar_panel{padding:8px 8px 8px 20px;border-top:1px solid transparent;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:3px 8px}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions>*{margin-left:12px}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;min-width:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message>*{margin:4px}.mx_RoomPreviewBar_dialog{margin:auto;-webkit-box-sizing:content;box-sizing:content;width:400px;border-radius:4px;padding:20px;text-align:center}.mx_RoomPreviewBar_dialog,.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message>*{margin:5px 0 20px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton{padding:7px 50px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions>*{margin-top:12px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton.mx_AccessibleButton_kind_primary{margin-bottom:7px}.mx_RoomPreviewBar_inviter{font-weight:600}a.mx_RoomPreviewBar_inviter{text-decoration:underline;cursor:pointer}.mx_RoomSublist{margin-left:8px;margin-bottom:4px}.mx_RoomSublist.mx_RoomSublist_hidden{display:none}.mx_RoomSublist .mx_RoomSublist_headerContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:8px;max-height:24px;color:#8d99a5}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky{position:fixed;height:32px;width:calc(100% - 22px)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer .mx_NotificationBadge{margin-left:8px}.mx_RoomSublist .mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_NotificationBadge{margin-right:4px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton{margin-left:8px;position:relative;width:24px;height:24px;border-radius:8px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:before{content:"";width:16px;height:16px;position:absolute;top:4px;left:4px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#61708b}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:hover{background:rgba(141,151,165,.2)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton{visibility:hidden;width:0;margin:0}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus.daac9ba.svg);mask-image:url(../../img/element-icons/roomlist/plus.daac9ba.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:before{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:calc(100% - 16px);line-height:1.6rem;font-size:1.3rem;font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn{display:inline-block;position:relative;width:14px;height:14px;margin-right:6px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn:before{content:"";width:18px;height:18px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn.mx_RoomSublist_collapseBtn_collapsed:before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_RoomSublist:first-child .mx_RoomSublist_headerContainer{height:0;padding-bottom:4px}.mx_RoomSublist .mx_RoomSublist_resizeBox{position:relative;-ms-flex-direction:column;flex-direction:column}.mx_RoomSublist .mx_RoomSublist_resizeBox,.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;overflow:hidden}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;-ms-flex-direction:column;flex-direction:column;-webkit-mask-image:linear-gradient(0deg,transparent,#000 4px);mask-image:linear-gradient(0deg,transparent,#000 4px)}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles_showNButton{-webkit-box-flex:0;-ms-flex:0 0 32px;flex:0 0 32px}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles{-webkit-box-flex:0;-ms-flex:0 0 4px;flex:0 0 4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandle{cursor:ns-resize;border-radius:3px;max-width:64px;height:4px!important;position:relative!important;bottom:0!important}.mx_RoomSublist .mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_resizerHandle,.mx_RoomSublist .mx_RoomSublist_resizeBox:hover .mx_RoomSublist_resizerHandle{opacity:.8;background-color:#2e2f32}.mx_RoomSublist .mx_RoomSublist_showNButton{cursor:pointer;font-size:1.3rem;line-height:1.8rem;color:#737d8c;height:24px;padding-bottom:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron{position:relative;width:18px;height:18px;margin-left:12px;margin-right:16px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#8d99a5;left:-1px}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron,.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showMoreButtonChevron{-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mx_RoomSublist.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,.mx_RoomSublist:not(.mx_RoomSublist_minimized)>.mx_RoomSublist_headerContainer:focus-within .mx_RoomSublist_menuButton,.mx_RoomSublist:not(.mx_RoomSublist_minimized)>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton{visibility:visible;width:24px;margin-left:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer{height:auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0;-ms-flex-item-align:end;align-self:flex-end;margin-right:0}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;max-width:100%}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;visibility:visible;width:32px!important;height:32px!important;margin-left:0!important;background-color:rgba(141,151,165,.2);margin-top:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before{top:8px;left:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_resizeBox{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron{margin-right:12px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_menuButton{height:16px}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton{visibility:visible;position:absolute;bottom:48px;right:0;width:16px;height:16px;border-radius:0;z-index:1;background-color:hsla(0,0%,96.1%,.9)}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton:before,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton:before{top:0;left:0}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton{bottom:8px}.mx_RoomSublist_contextMenu{padding:20px 16px;width:250px}.mx_RoomSublist_contextMenu hr{margin-top:16px;margin-bottom:16px;margin-right:16px;border:1px solid #2e2f32;opacity:.1}.mx_RoomSublist_contextMenu .mx_RoomSublist_contextMenu_title{font-size:1.5rem;line-height:2rem;font-weight:600;margin-bottom:4px}.mx_RoomSublist_contextMenu .mx_Checkbox,.mx_RoomSublist_contextMenu .mx_RadioButton{margin-top:8px}.mx_RoomSublist_addRoomTooltip{margin-top:-3px}.mx_RoomSublist_skeletonUI{position:relative;margin-left:4px;height:288px}.mx_RoomSublist_skeletonUI:before{background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(hsla(0,0%,100%,0)));background:linear-gradient(180deg,#fff,hsla(0,0%,100%,0));width:100%;height:100%;content:"";position:absolute;-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;-webkit-mask-size:auto 48px;mask-size:auto 48px;-webkit-mask-image:url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);mask-image:url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg)}.mx_RoomTile{margin-bottom:4px;padding:4px;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomTile.mx_RoomTile_hasMenuOpen,.mx_RoomTile.mx_RoomTile_selected,.mx_RoomTile:focus-within,.mx_RoomTile:hover{background-color:#fff;border-radius:8px}.mx_RoomTile .mx_DecoratedRoomAvatar,.mx_RoomTile .mx_RoomTile_avatarContainer{margin-right:8px}.mx_RoomTile .mx_RoomTile_nameContainer{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-width:0;margin-right:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview,.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name{margin:0 2px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name{font-size:1.4rem;line-height:1.8rem}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents{font-weight:600}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview{font-size:1.3rem;line-height:1.8rem;color:#737d8c}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_nameWithPreview{margin-top:-4px}.mx_RoomTile .mx_RoomTile_notificationsButton{margin-left:4px}.mx_RoomTile .mx_RoomTile_badgeContainer{height:16px;margin:auto 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge{margin-right:2px}.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge_dot{margin-left:5px;margin-right:7px}.mx_RoomTile .mx_RoomTile_menuButton,.mx_RoomTile .mx_RoomTile_notificationsButton{width:20px;min-width:20px;height:20px;margin-top:auto;margin-bottom:auto;position:relative;display:none}.mx_RoomTile .mx_RoomTile_menuButton:before,.mx_RoomTile .mx_RoomTile_notificationsButton:before{top:2px;left:2px;content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_RoomTile .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show{display:block}.mx_RoomTile .mx_RoomTile_menuButton:before{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_badgeContainer,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_badgeContainer,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_badgeContainer{width:0;height:0;display:none}.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_notificationsButton,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_notificationsButton,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_notificationsButton{display:block}.mx_RoomTile.mx_RoomTile_minimized{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative}.mx_RoomTile.mx_RoomTile_minimized .mx_DecoratedRoomAvatar,.mx_RoomTile.mx_RoomTile_minimized .mx_RoomTile_avatarContainer{margin-right:0}.mx_RoomTile_iconBell:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RoomTile_iconBellDot:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);mask-image:url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg)}.mx_RoomTile_iconBellCrossed:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg)}.mx_RoomTile_iconBellMentions:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);mask-image:url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconStar:before{-webkit-mask-image:url(../../img/element-icons/roomlist/favorite.ff7609d.svg);mask-image:url(../../img/element-icons/roomlist/favorite.ff7609d.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconArrowDown:before{-webkit-mask-image:url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);mask-image:url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconSignOut:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_RoomUpgradeWarningBar{max-height:235px;background-color:#f7f7f7;padding-left:20px;padding-right:20px;overflow:scroll}.mx_RoomUpgradeWarningBar_wrapped{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center}.mx_RoomUpgradeWarningBar_header{color:#ff4b55;font-weight:700}.mx_RoomUpgradeWarningBar_body{color:#ff4b55}.mx_RoomUpgradeWarningBar_upgradelink{color:#ff4b55;text-decoration:underline}.mx_RoomUpgradeWarningBar_small{color:#888;font-size:70%}.mx_SearchBar{height:56px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid transparent}.mx_SearchBar .mx_SearchBar_input{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;margin-left:22px}.mx_SearchBar .mx_SearchBar_searchButton{cursor:pointer;width:37px;height:37px;background-color:#0dbd8b;-webkit-mask:url(../../img/feather-customised/search-input.044bfa7.svg);mask:url(../../img/feather-customised/search-input.044bfa7.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mx_SearchBar .mx_SearchBar_buttons{display:inherit}.mx_SearchBar .mx_SearchBar_button{border:0;margin:0 0 0 22px;padding:5px;font-size:1.5rem;cursor:pointer;color:#2e2f32;border-bottom:2px solid #0dbd8b;font-weight:600}.mx_SearchBar .mx_SearchBar_unselected{color:#9fa9ba;border-color:transparent}.mx_SearchBar .mx_SearchBar_cancel{background-color:#ff4b55;-webkit-mask:url(../../img/cancel.4b9715b.svg);mask:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14px;mask-size:14px;padding:9px;margin:0 12px 0 3px;cursor:pointer}.mx_SendMessageComposer{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;font-size:1.4rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-right:6px;min-width:0}.mx_SendMessageComposer,.mx_SendMessageComposer .mx_BasicMessageComposer{-webkit-box-flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_SendMessageComposer .mx_BasicMessageComposer{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;min-height:50px}.mx_SendMessageComposer .mx_BasicMessageComposer .mx_BasicMessageComposer_input{padding:3px 0;margin:auto 0;max-height:140px;overflow-y:auto}.mx_Stickers_content{overflow:hidden}.mx_Stickers_content_container{overflow:hidden;height:300px}#mx_persistedElement_stickerPicker .mx_AppTileFullWidth{height:unset;-webkit-box-sizing:border-box;box-sizing:border-box;border-left:none;border-right:none;border-bottom:none}#mx_persistedElement_stickerPicker .mx_AppTileMenuBar{padding:0}#mx_persistedElement_stickerPicker iframe{height:283px}.mx_Stickers_contentPlaceholder{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.mx_Stickers_contentPlaceholder p{max-width:200px}.mx_Stickers_addLink{display:inline;cursor:pointer;color:#0dbd8b}.mx_Stickers_hideStickers{z-index:2001}.mx_TopUnreadMessagesBar{z-index:1000;position:absolute;top:24px;right:24px;width:38px}.mx_TopUnreadMessagesBar:after{content:"";position:absolute;top:-8px;left:10.5px;width:4px;height:4px;border-radius:16px;background-color:#f2f5f8;border:6px solid #0dbd8b;pointer-events:none}.mx_TopUnreadMessagesBar_scrollUp{height:38px;border-radius:19px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1.3px solid #61708b;cursor:pointer}.mx_TopUnreadMessagesBar_scrollUp:before{content:"";position:absolute;width:36px;height:36px;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;background:#61708b;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mx_TopUnreadMessagesBar_markAsRead{display:block;width:18px;height:18px;background:#fff;border:1.3px solid #61708b;border-radius:10px;margin:5px auto}.mx_TopUnreadMessagesBar_markAsRead:before{content:"";position:absolute;width:18px;height:18px;-webkit-mask-image:url(../../img/cancel.4b9715b.svg);mask-image:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:10px;mask-size:10px;-webkit-mask-position:4px 4px;mask-position:4px 4px;background:#61708b}.mx_VoiceRecordComposerTile_stop{width:28px;height:28px;border:2px solid #e3e8f0;border-radius:32px;margin-right:16px;position:relative}.mx_VoiceRecordComposerTile_stop:after{content:"";width:14px;height:14px;position:absolute;top:7px;left:7px;border-radius:2px;background-color:#ff4b55}.mx_VoiceRecordComposerTile_delete{width:14px;height:18px;vertical-align:middle;margin-right:11px;background-color:#8d99a5;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg)}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer{margin:6px 12px 6px 6px;position:relative}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording{padding-left:22px}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording:before{-webkit-animation:recording-pulse 2s infinite;animation:recording-pulse 2s infinite;content:"";background-color:#ff4b55;width:10px;height:10px;position:absolute;left:12px;top:18px;border-radius:10px}@-webkit-keyframes recording-pulse{0%{opacity:1}35%{opacity:0}65%{opacity:1}}@keyframes recording-pulse{0%{opacity:1}35%{opacity:0}65%{opacity:1}}.mx_WhoIsTypingTile{margin-left:-18px;padding-top:18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_WhoIsTypingTile_avatars{-webkit-box-flex:0;-ms-flex:0 0 83px;flex:0 0 83px;text-align:center}.mx_WhoIsTypingTile_avatars>:not(:first-child){margin-left:-12px}.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial{padding-top:1px}.mx_WhoIsTypingTile_avatars .mx_BaseAvatar{border:1px solid #fff;border-radius:40px}.mx_WhoIsTypingTile_remainingAvatarPlaceholder{position:relative;display:inline-block;color:#acacac;background-color:#ddd;border:1px solid #fff;border-radius:40px;width:24px;height:24px;line-height:2.4rem;font-size:.8em;vertical-align:top;text-align:center}.mx_WhoIsTypingTile_label{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:1.4rem;font-weight:600;color:#9e9e9e}.mx_WhoIsTypingTile_label>span{background-image:url(../../img/typing-indicator-2x.0eb9f0e.gif);background-size:25px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:15px;display:block}.mx_MatrixChat_useCompactLayout .mx_WhoIsTypingTile{padding-top:4px}.mx_AvatarSetting_avatar{width:90px;min-width:90px;height:90px;margin-top:8px;position:relative}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover{-webkit-transition:opacity .08s cubic-bezier(.46,.03,.52,.96);transition:opacity .08s cubic-bezier(.46,.03,.52,.96);position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;line-height:90px;text-align:center}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover>span{color:#fff;position:relative;font-weight:500}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover .mx_AvatarSetting_hoverBg{position:absolute;top:0;bottom:0;left:0;right:0;opacity:.5;background-color:#2e2f32;border-radius:90px}.mx_AvatarSetting_avatar.mx_AvatarSetting_avatar_hovering .mx_AvatarSetting_hover{opacity:1}.mx_AvatarSetting_avatar:not(.mx_AvatarSetting_avatar_hovering) .mx_AvatarSetting_hover{opacity:0}.mx_AvatarSetting_avatar>*{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_primary{margin-top:8px}.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm{width:100%}.mx_AvatarSetting_avatar>img{cursor:pointer;-o-object-fit:cover;object-fit:cover}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder,.mx_AvatarSetting_avatar>img{display:block;height:90px;width:inherit;border-radius:90px;cursor:pointer}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before{background-color:#2e2f32;-webkit-mask:url(../../img/feather-customised/user.7a4d23d.svg);mask:url(../../img/feather-customised/user.7a4d23d.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:36px;mask-size:36px;-webkit-mask-position:center;mask-position:center;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton{width:32px;height:32px;border-radius:32px;background-color:#e7e7e7;position:absolute;bottom:0;right:0}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton:before{content:"";display:block;width:100%;height:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:55%;mask-size:55%;background-color:#2e2f32;-webkit-mask-image:url(../../img/feather-customised/edit.fd55ec2.svg);mask-image:url(../../img/feather-customised/edit.fd55ec2.svg)}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder{background-color:#f4f6fa}.mx_CrossSigningPanel_statusList{border-spacing:0}.mx_CrossSigningPanel_statusList td{padding:0}.mx_CrossSigningPanel_statusList td:first-of-type{-webkit-padding-end:1em;padding-inline-end:1em}.mx_CrossSigningPanel_buttonRow{margin:1em 0}.mx_CrossSigningPanel_buttonRow :nth-child(n+1){-webkit-margin-end:10px;margin-inline-end:10px}.mx_DevicesPanel{display:table;table-layout:fixed;width:880px;border-spacing:10px}.mx_DevicesPanel_header{display:table-header-group;font-weight:700}.mx_DevicesPanel_header>.mx_DevicesPanel_deviceButtons{height:48px}.mx_DevicesPanel_header>div{display:table-cell;vertical-align:middle}.mx_DevicesPanel_header .mx_DevicesPanel_deviceName{width:50%}.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen{width:30%}.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons{width:20%}.mx_DevicesPanel_device{display:table-row}.mx_DevicesPanel_device>div{display:table-cell}.mx_DevicesPanel_myDevice{font-weight:700}.mx_E2eAdvancedPanel_settingLongDescription{margin-right:150px}.mx_ExistingEmailAddress{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingEmailAddress_delete{margin-right:5px;cursor:pointer;vertical-align:middle}.mx_ExistingEmailAddress_email,.mx_ExistingEmailAddress_promptText{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_ExistingEmailAddress_confirmBtn{margin-left:5px}.mx_IntegrationManager .mx_Dialog{width:60%;height:70%;overflow:hidden;padding:0;max-width:none;max-height:none}.mx_IntegrationManager iframe{background-color:#fff;border:0;width:100%;height:100%}.mx_IntegrationManager_loading h3{text-align:center}.mx_IntegrationManager_error{text-align:center;padding-top:20px}.mx_IntegrationManager_error h3{color:#ff4b55}.mx_UserNotifSettings_tableRow{display:table-row}.mx_UserNotifSettings_inputCell{display:table-cell;padding-bottom:8px;padding-right:8px;width:16px}.mx_UserNotifSettings_labelCell{padding-bottom:8px;width:400px;display:table-cell}.mx_UserNotifSettings_pushRulesTableWrapper{padding-bottom:8px}.mx_UserNotifSettings_pushRulesTable{width:100%;table-layout:fixed}.mx_UserNotifSettings_pushRulesTable thead{font-weight:700}.mx_UserNotifSettings_pushRulesTable tbody th{font-weight:400}.mx_UserNotifSettings_pushRulesTable tbody th:first-child{text-align:left}.mx_UserNotifSettings_keywords{cursor:pointer;color:#0dbd8b}.mx_UserNotifSettings_devicesTable td{padding-left:20px;padding-right:20px}.mx_UserNotifSettings_notifTable{display:table;position:relative}.mx_UserNotifSettings_notifTable .mx_Spinner{position:absolute}.mx_NotificationSound_soundUpload{display:none}.mx_NotificationSound_browse{color:#0dbd8b;border:1px solid #0dbd8b;background-color:transparent}.mx_NotificationSound_save{margin-left:5px;color:#fff;background-color:#0dbd8b}.mx_NotificationSound_resetSound{margin-top:5px;color:#fff;border:#ff4b55;background-color:#ff4b55}.mx_ExistingPhoneNumber{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingPhoneNumber_delete{margin-right:5px;cursor:pointer;vertical-align:middle}.mx_ExistingPhoneNumber_address,.mx_ExistingPhoneNumber_promptText{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_ExistingPhoneNumber_confirmBtn{margin-left:5px}.mx_ExistingPhoneNumber_verification{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ExistingPhoneNumber_verification .mx_Field{margin:0 0 0 1em}.mx_PhoneNumbers_input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_PhoneNumbers_input>.mx_Field{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_PhoneNumbers_country{width:80px}.mx_ProfileSettings_controls_topic>textarea{resize:vertical}.mx_ProfileSettings_profile{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ProfileSettings_controls{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin-right:54px}.mx_ProfileSettings_controls .mx_SettingsTab_subheading{margin-top:0}.mx_ProfileSettings_controls .mx_Field #profileTopic{height:4em}.mx_ProfileSettings_controls .mx_Field:first-child{margin-top:0}.mx_ProfileSettings_hostingSignup{margin-left:20px}.mx_ProfileSettings_hostingSignup img{margin-left:5px}.mx_ProfileSettings_avatarUpload{display:none}.mx_ProfileSettings_profileForm{margin-right:100px;border-bottom:1px solid #e7e7e7}.mx_ProfileSettings_buttons{margin-top:10px;margin-bottom:28px}.mx_ProfileSettings_buttons>.mx_AccessibleButton_kind_link{padding-left:0}.mx_SecureBackupPanel_deviceNotVerified,.mx_SecureBackupPanel_deviceVerified,.mx_SecureBackupPanel_sigInvalid,.mx_SecureBackupPanel_sigValid{font-weight:700}.mx_SecureBackupPanel_deviceVerified,.mx_SecureBackupPanel_sigValid{color:#76cfa5}.mx_SecureBackupPanel_deviceNotVerified,.mx_SecureBackupPanel_sigInvalid{color:#ba6363}.mx_SecureBackupPanel_deviceName{font-style:italic}.mx_SecureBackupPanel_buttonRow{margin:1em 0}.mx_SecureBackupPanel_buttonRow :nth-child(n+1){-webkit-margin-end:10px;margin-inline-end:10px}.mx_SecureBackupPanel_statusList{border-spacing:0}.mx_SecureBackupPanel_statusList td{padding:0}.mx_SecureBackupPanel_statusList td:first-of-type{-webkit-padding-end:1em;padding-inline-end:1em}.mx_SetIdServer .mx_Field_input{margin-right:100px}.mx_SetIdServer_tooltip{max-width:120px}.mx_SetIntegrationManager{margin-top:10px;margin-bottom:10px}.mx_SetIntegrationManager>.mx_SettingsTab_heading{margin-bottom:10px}.mx_SetIntegrationManager>.mx_SettingsTab_heading>.mx_SettingsTab_subheading{display:inline-block;padding-left:5px}.mx_SetIntegrationManager .mx_ToggleSwitch{display:inline-block;float:right;top:9px;margin-right:100px}.mx_ExistingSpellCheckLanguage{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingSpellCheckLanguage_language{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_GeneralUserSettingsTab_spellCheckLanguageInput{margin-top:1em;margin-bottom:1em}.mx_SpellCheckLanguages{margin-right:100px}.mx_UpdateCheckButton_summary{margin-left:16px}.mx_UpdateCheckButton_summary .mx_AccessibleButton_kind_link{padding:0}.mx_SettingsTab{color:#61708b}.mx_SettingsTab_warningText{color:#ff4b55}.mx_SettingsTab_heading{font-size:2rem;font-weight:600;color:#2e2f32;margin-bottom:10px}.mx_SettingsTab_heading:nth-child(n+2){margin-top:30px}.mx_SettingsTab_subheading{font-size:1.6rem;display:block;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-weight:600;color:#2e2f32;margin-bottom:10px;margin-top:12px}.mx_SettingsTab_subsectionText{color:#61708b;font-size:1.4rem;display:block;margin:10px 100px 10px 0}.mx_SettingsTab_section{margin-bottom:24px}.mx_SettingsTab_section .mx_SettingsFlag{margin-right:100px;margin-bottom:10px}.mx_SettingsTab_section.mx_SettingsTab_subsectionText .mx_SettingsFlag{margin-right:0!important}.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label{vertical-align:middle;display:inline-block;font-size:1.4rem;color:#2e2f32;max-width:calc(100% - 4.8rem);-webkit-box-sizing:border-box;box-sizing:border-box;padding-right:10px}.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch{float:right}.mx_SettingsTab_linkBtn{cursor:pointer;color:#0dbd8b;word-break:break-all}.mx_SettingsTab a{color:#238cf5}.mx_GeneralRoomSettingsTab_profileSection{margin-top:10px}.mx_RolesRoomSettingsTab ul{margin-bottom:0}.mx_RolesRoomSettingsTab_unbanBtn{margin-right:10px;margin-bottom:5px}.mx_SecurityRoomSettingsTab_warning{display:block}.mx_SecurityRoomSettingsTab_warning img{vertical-align:middle;margin-right:5px;margin-left:3px;margin-bottom:5px}.mx_SecurityRoomSettingsTab_encryptionSection{margin-bottom:25px}.mx_AppearanceUserSettingsTab_fontSlider,.mx_AppearanceUserSettingsTab_fontSlider_preview,.mx_AppearanceUserSettingsTab_Layout{margin-right:100px}.mx_AppearanceUserSettingsTab .mx_Field{width:256px}.mx_AppearanceUserSettingsTab_fontScaling{color:#2e2f32}.mx_AppearanceUserSettingsTab_fontSlider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:15px;background:rgba(227,232,240,.2);border-radius:10px;font-size:10px;margin-top:24px;margin-bottom:24px}.mx_AppearanceUserSettingsTab_fontSlider_preview{border:1px solid #e3e8f0;border-radius:10px;padding:0 16px 9px;pointer-events:none}.mx_AppearanceUserSettingsTab_fontSlider_preview .mx_EventTile_msgOption{display:none}.mx_AppearanceUserSettingsTab_fontSlider_preview.mx_IRCLayout{padding-top:9px}.mx_AppearanceUserSettingsTab_fontSlider_smallText{font-size:15px;padding-right:20px;padding-left:5px;font-weight:500}.mx_AppearanceUserSettingsTab_fontSlider_largeText{font-size:18px;padding-left:20px;padding-right:5px;font-weight:500}.mx_AppearanceUserSettingsTab>.mx_SettingsTab_SubHeading{margin-bottom:32px}.mx_AppearanceUserSettingsTab_themeSection{color:#2e2f32}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:4px;margin-bottom:30px}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton{padding:1.6rem;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:10px;width:180px;background:#e3e8f0;opacity:.4;-ms-flex-negative:1;flex-shrink:1;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;margin-right:15px;margin-top:10px;font-weight:600;color:#61708b}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton>span{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled{opacity:1}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_light{background-color:#f3f8fd;color:#2e2f32}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark{background-color:#25282e;color:#f3f8fd}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark>input>div,.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark>input>div>div{border-color:#e3e8f0}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black{background-color:#000;color:#f3f8fd}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black>input>div,.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black>input>div>div{border-color:#e3e8f0}.mx_SettingsTab_customFontSizeField{margin-left:calc(1.6rem + 10px)}.mx_AppearanceUserSettingsTab_Layout_RadioButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:#2e2f32}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_AppearanceUserSettingsTab_spacer{width:24px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:1;flex-shrink:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:300px;border:1px solid #e3e8f0;border-radius:10px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_EventTile_msgOption,.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_MessageActionBar{display:none}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px;pointer-events:none}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_RadioButton{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;padding:10px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_EventTile_content{margin-right:0}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected{border-color:#0dbd8b}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton{border-top:1px solid #e3e8f0}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton>input+div{border-color:rgba(97,112,139,.2)}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton_checked{background-color:rgba(13,189,139,.08)}.mx_AppearanceUserSettingsTab_Advanced{color:#2e2f32}.mx_AppearanceUserSettingsTab_Advanced>*{margin-bottom:16px}.mx_AppearanceUserSettingsTab_Advanced .mx_AppearanceUserSettingsTab_AdvancedToggle{color:#0dbd8b;cursor:pointer}.mx_AppearanceUserSettingsTab_Advanced .mx_AppearanceUserSettingsTab_systemFont{margin-left:calc(1.6rem + 10px)}.mx_GeneralUserSettingsTab_changePassword .mx_Field{margin-right:100px}.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child{margin-top:0}.mx_GeneralUserSettingsTab_accountSection .mx_SettingsTab_subheading:nth-child(n+1),.mx_GeneralUserSettingsTab_discovery .mx_SettingsTab_subheading:nth-child(n+2),.mx_SetIdServer .mx_SettingsTab_subheading{margin-top:24px}.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,.mx_GeneralUserSettingsTab_discovery .mx_Spinner{-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left}.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,.mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber,.mx_GeneralUserSettingsTab_languageInput{margin-right:100px}.mx_GeneralUserSettingsTab_warningIcon{vertical-align:middle}.mx_HelpUserSettingsTab_debugButton{margin-bottom:5px;margin-top:5px}.mx_HelpUserSettingsTab span.mx_AccessibleButton{word-break:break-word}.mx_HelpUserSettingsTab code{word-break:break-all;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.mx_HelpUserSettingsTab_accessToken{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-radius:5px;border:1px solid #747474;margin-bottom:10px;margin-top:10px;padding:10px}.mx_HelpUserSettingsTab_accessToken_copy{-ms-flex-negative:0;flex-shrink:0;cursor:pointer;margin-left:20px;display:inherit}.mx_HelpUserSettingsTab_accessToken_copy>div{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);background-color:#2e2f32;margin-left:5px;width:20px;height:20px;background-repeat:no-repeat}.mx_LabsUserSettingsTab .mx_SettingsTab_section{margin-top:32px}.mx_LabsUserSettingsTab .mx_SettingsTab_section .mx_SettingsFlag{margin-right:0}.mx_MjolnirUserSettingsTab .mx_Field{margin-right:100px}.mx_MjolnirUserSettingsTab_listItem{margin-bottom:2px}.mx_NotificationUserSettingsTab .mx_SettingsTab_heading{margin-bottom:10px}.mx_PreferencesUserSettingsTab .mx_Field{margin-right:100px}.mx_PreferencesUserSettingsTab .mx_SettingsTab_section{margin-bottom:30px}.mx_SecurityUserSettingsTab .mx_DevicesPanel{width:auto;max-width:880px}.mx_SecurityUserSettingsTab_deviceInfo{display:table;padding-left:0}.mx_SecurityUserSettingsTab_deviceInfo>li{display:table-row}.mx_SecurityUserSettingsTab_deviceInfo>li>label,.mx_SecurityUserSettingsTab_deviceInfo>li>span{display:table-cell;padding-right:1em}.mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton,.mx_SecurityUserSettingsTab_importExportButtons .mx_AccessibleButton{margin-right:10px}.mx_SecurityUserSettingsTab_importExportButtons{margin-bottom:15px}.mx_SecurityUserSettingsTab_ignoredUser{margin-bottom:5px}.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton{margin-right:10px}.mx_SecurityUserSettingsTab .mx_SettingsTab_section .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning{color:#ff4b55;position:relative;padding-left:40px;margin-top:30px}.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning:before{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:2.4rem;mask-size:2.4rem;position:absolute;width:2.4rem;height:2.4rem;content:"";top:0;left:0;background-color:#ff4b55;-webkit-mask-image:url(../../img/feather-customised/alert-triangle.38aca3a.svg);mask-image:url(../../img/feather-customised/alert-triangle.38aca3a.svg)}.mx_VoiceUserSettingsTab .mx_Field{margin-right:100px}.mx_VoiceUserSettingsTab_missingMediaPermissions{margin-bottom:15px}.mx_SpaceBasicSettings .mx_Field{margin:32px 0}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:24px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer .mx_SpaceBasicSettings_avatar{position:relative;height:80px;width:80px;background-color:#8d99a5;border-radius:16px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer img.mx_SpaceBasicSettings_avatar{width:80px;height:80px;-o-object-fit:cover;object-fit:cover;border-radius:16px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar{cursor:pointer}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar:before{content:"";position:absolute;height:80px;width:80px;top:0;left:0;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-image:url(../../img/element-icons/camera.a81a395.svg);mask-image:url(../../img/element-icons/camera.a81a395.svg)}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>input[type=file]{display:none}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>.mx_AccessibleButton_kind_link{display:inline-block;padding:0;margin:auto 16px;color:#368bd6}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>.mx_SpaceBasicSettings_avatar_remove{color:#ff4b55}.mx_SpaceBasicSettings .mx_FormButton{padding:8px 22px;margin-left:auto;display:block;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_SpaceBasicSettings .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background{background-color:rgba(46,48,51,.38);opacity:.6;left:71px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu{padding:24px;width:480px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#fff;position:relative}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu>div>h2{font-weight:600;font-size:1.8rem;margin-top:4px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu>div>p{font-size:1.5rem;color:#737d8c;margin:0}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_BetaCard_betaPill{position:absolute;top:24px;right:24px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType>h3{font-weight:600;margin:0 0 4px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType>span{color:#737d8c}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover{border-color:#0dbd8b}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover:before{background-color:#0dbd8b}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover>span{color:#2e2f32}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_public:before{-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_private:before{-webkit-mask-image:url(../../img/element-icons/lock.1f264bd.svg);mask-image:url(../../img/element-icons/lock.1f264bd.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back{width:28px;height:28px;position:relative;background-color:rgba(141,151,165,.2);border-radius:14px;margin-bottom:12px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back:before{content:"";position:absolute;height:28px;width:28px;top:0;left:0;background-color:#8d99a5;-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:2px 3px;mask-position:2px 3px;-webkit-mask-size:24px;mask-size:24px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_kind_primary{padding:8px 22px;margin-left:auto;display:block;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpacePublicShare .mx_AccessibleButton{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpacePublicShare .mx_AccessibleButton>h3{font-weight:600;margin:0 0 4px}.mx_SpacePublicShare .mx_AccessibleButton>span{color:#737d8c}.mx_SpacePublicShare .mx_AccessibleButton:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpacePublicShare .mx_AccessibleButton:hover{border-color:#0dbd8b}.mx_SpacePublicShare .mx_AccessibleButton:hover:before{background-color:#0dbd8b}.mx_SpacePublicShare .mx_AccessibleButton:hover>span{color:#2e2f32}.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_shareButton:before{-webkit-mask-image:url(../../img/element-icons/link.8f4b1fc.svg);mask-image:url(../../img/element-icons/link.8f4b1fc.svg)}.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_inviteButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_InlineTermsAgreement_cbContainer{margin-bottom:10px;font-size:1.4rem}.mx_InlineTermsAgreement_cbContainer a{color:#0dbd8b;text-decoration:none}.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox{margin-top:10px}.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox input{vertical-align:text-bottom}.mx_InlineTermsAgreement_link{display:inline-block;-webkit-mask-image:url(../../img/external-link.a8d3e9b.svg);mask-image:url(../../img/external-link.a8d3e9b.svg);background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:12px;height:12px;margin-left:3px;vertical-align:middle}.mx_AnalyticsToast .mx_AccessibleButton_kind_danger{background:none;color:#0dbd8b}.mx_AnalyticsToast .mx_AccessibleButton_kind_primary{background:#0dbd8b;color:#fff}.mx_NonUrgentEchoFailureToast .mx_NonUrgentEchoFailureToast_icon{display:inline-block;width:1.8rem;height:1.8rem;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#fff;-webkit-mask-image:url(../../img/element-icons/cloud-off.33cd28e.svg);mask-image:url(../../img/element-icons/cloud-off.33cd28e.svg);margin-right:8px}.mx_NonUrgentEchoFailureToast span{vertical-align:middle}.mx_NonUrgentEchoFailureToast .mx_AccessibleButton{padding:0}.mx_VerificationShowSas_decimalSas{text-align:center;font-weight:700;padding-left:3px;padding-right:3px}.mx_VerificationShowSas_decimalSas span{margin-left:5px;margin-right:5px}.mx_VerificationShowSas_emojiSas{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:25px 0}.mx_VerificationShowSas_emojiSas_block{display:inline-block;margin-bottom:16px;position:relative;width:52px}.mx_AuthPage_modal .mx_VerificationShowSas_emojiSas_block,.mx_Dialog .mx_VerificationShowSas_emojiSas_block{width:60px}.mx_VerificationShowSas_emojiSas_emoji{font-size:3.2rem}.mx_VerificationShowSas_emojiSas_label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:1.2rem}.mx_VerificationShowSas_emojiSas_break{-ms-flex-preferred-size:100%;flex-basis:100%}.mx_VerificationShowSas .mx_Dialog_buttons button.mx_VerificationShowSas_matchButton{color:#0dbd8b;background-color:rgba(3,179,129,.16);border:none}.mx_VerificationShowSas .mx_Dialog_buttons button.mx_VerificationShowSas_noMatchButton{color:#ff4b55;background-color:rgba(255,75,85,.16);border:none}.mx_PlayPauseButton{position:relative;width:32px;height:32px;border-radius:32px;background-color:#fff}.mx_PlayPauseButton:before{content:"";position:absolute;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_PlayPauseButton.mx_PlayPauseButton_disabled:before{opacity:.5}.mx_PlayPauseButton.mx_PlayPauseButton_play:before{width:13px;height:16px;top:8px;left:12px;-webkit-mask-image:url(../../img/element-icons/play.a72552b.svg);mask-image:url(../../img/element-icons/play.a72552b.svg)}.mx_PlayPauseButton.mx_PlayPauseButton_pause:before{width:10px;height:12px;top:10px;left:11px;-webkit-mask-image:url(../../img/element-icons/pause.c4c0886.svg);mask-image:url(../../img/element-icons/pause.c4c0886.svg)}.mx_VoiceMessagePrimaryContainer{padding:7px 12px 7px 11px;background-color:#e3e8f0;border-radius:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#737d8c;font-size:1.4rem;line-height:2.4rem}.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar{background-color:#c1c6cd}.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct{-webkit-transition:background-color .25s ease;transition:background-color .25s ease;background-color:#737d8c}.mx_VoiceMessagePrimaryContainer .mx_Clock{width:4.2rem;padding-right:6px;padding-left:8px}.mx_Waveform{position:relative;height:30px;top:1px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mx_Waveform .mx_Waveform_bar{width:0;border:1px solid transparent;border-radius:2px;min-height:0;max-height:100%;margin-left:1px;margin-right:1px}.mx_CallContainer{position:absolute;right:20px;bottom:72px;z-index:100;pointer-events:none}.mx_CallContainer .mx_CallPreview{pointer-events:auto;cursor:pointer}.mx_CallContainer .mx_CallPreview .mx_CallView_video{width:350px}.mx_CallContainer .mx_CallPreview .mx_VideoFeed_local{border-radius:8px;overflow:hidden}.mx_CallContainer .mx_AppTile_persistedWrapper div{min-width:350px}.mx_CallContainer .mx_IncomingCallBox{min-width:250px;background-color:#f4f6fa;padding:8px;-webkit-box-shadow:0 14px 24px rgba(0,0,0,.08);box-shadow:0 14px 24px rgba(0,0,0,.08);border-radius:8px;pointer-events:auto;cursor:pointer}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo{display:-webkit-box;display:-ms-flexbox;display:flex;direction:row}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo .mx_BaseAvatar_initial,.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo img{margin:8px}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1,.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo p{margin:0;padding:0;font-size:1.4rem;line-height:1.6rem}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1{font-weight:700}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons{padding:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons>.mx_IncomingCallBox_spacer{width:8px}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons>*{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin-right:0;font-size:1.5rem;line-height:2.4rem}.mx_CallView{border-radius:8px;background-color:#f2f5f8;padding-left:8px;padding-right:8px;pointer-events:auto}.mx_CallView_large{padding-bottom:10px;margin:5px 5px 5px 18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_CallView_large,.mx_CallView_large .mx_CallView_voice{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_CallView_pip{width:320px;padding-bottom:8px;margin-top:10px;background-color:#f4f6fa;-webkit-box-shadow:0 4px 20px rgba(0,0,0,.2);box-shadow:0 4px 20px rgba(0,0,0,.2);border-radius:8px}.mx_CallView_pip .mx_CallView_voice{height:180px}.mx_CallView_pip .mx_CallView_callControls{bottom:0}.mx_CallView_pip .mx_CallView_callControls_button:before{width:36px;height:36px}.mx_CallView_pip .mx_CallView_holdTransferContent{padding-top:10px;padding-bottom:25px}.mx_CallView_content{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:8px}.mx_CallView_voice{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;background-color:#27303a}.mx_CallView_voice,.mx_CallView_voice_avatarsContainer{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-direction:normal}.mx_CallView_voice_avatarsContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row}.mx_CallView_voice_avatarsContainer div{margin-left:12px;margin-right:12px}.mx_CallView_voice .mx_CallView_holdTransferContent .mx_CallView_voice_avatarContainer{border-radius:2000px;overflow:hidden;position:relative}.mx_CallView_holdTransferContent{height:20px;padding-top:20px;padding-bottom:15px;color:#fff}.mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind{padding:0;font-weight:700}.mx_CallView_video{width:100%;height:100%;z-index:30;overflow:hidden}.mx_CallView_video_hold{overflow:hidden}.mx_CallView_video_hold .mx_VideoFeed{visibility:hidden}.mx_CallView_video_holdBackground{position:absolute;width:100%;height:100%;left:0;right:0;background-repeat:no-repeat;background-size:cover;background-position:50%;-webkit-filter:blur(20px);filter:blur(20px)}.mx_CallView_video_holdBackground:after{content:"";display:block;position:absolute;width:100%;height:100%;left:0;right:0;background-color:rgba(0,0,0,.6)}.mx_CallView_video .mx_CallView_holdTransferContent{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-weight:700;color:#fff;text-align:center}.mx_CallView_video .mx_CallView_holdTransferContent:before{display:block;margin-left:auto;margin-right:auto;content:"";width:40px;height:40px;background-image:url(../../img/voip/paused.77799b3.svg);background-position:50%;background-size:cover}.mx_CallView_pip .mx_CallView_video .mx_CallView_holdTransferContent:before{width:30px;height:30px}.mx_CallView_video .mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind{padding:0}.mx_CallView_header{height:44px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;-ms-flex-negative:0;flex-shrink:0}.mx_CallView_header_callType{font-size:1.2rem;font-weight:700;vertical-align:middle}.mx_CallView_header_secondaryCallInfo:before{content:"·";margin-left:6px;margin-right:6px}.mx_CallView_header_controls{margin-left:auto}.mx_CallView_header_button{display:inline-block;vertical-align:middle;cursor:pointer}.mx_CallView_header_button:before{content:"";display:inline-block;height:20px;width:20px;vertical-align:middle;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_CallView_header_button_fullscreen:before{-webkit-mask-image:url(../../img/element-icons/call/fullscreen.43be138.svg);mask-image:url(../../img/element-icons/call/fullscreen.43be138.svg)}.mx_CallView_header_button_expand:before{-webkit-mask-image:url(../../img/element-icons/call/expand.7ef9f56.svg);mask-image:url(../../img/element-icons/call/expand.7ef9f56.svg)}.mx_CallView_header_callInfo{margin-left:12px;margin-right:16px}.mx_CallView_header_roomName{font-weight:700;font-size:12px;line-height:normal;height:15px}.mx_CallView_secondaryCall_roomName{margin-left:4px}.mx_CallView_header_callTypeSmall{font-size:12px;color:#737d8c;line-height:normal;height:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:240px}.mx_CallView_header_phoneIcon{display:inline-block;margin-right:6px;height:16px;width:16px;vertical-align:middle}.mx_CallView_header_phoneIcon:before{content:"";display:inline-block;vertical-align:top;height:16px;width:16px;background-color:#ff4b55;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_CallView_callControls{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;bottom:5px;width:100%;opacity:1;-webkit-transition:opacity .5s;transition:opacity .5s}.mx_CallView_callControls_hidden{opacity:.001;pointer-events:none}.mx_CallView_callControls_button{cursor:pointer;margin-left:8px;margin-right:8px}.mx_CallView_callControls_button:before{content:"";display:inline-block;height:48px;width:48px;background-repeat:no-repeat;background-size:contain;background-position:50%}.mx_CallView_callControls_dialpad{margin-right:auto}.mx_CallView_callControls_dialpad:before{background-image:url(../../img/voip/dialpad.fdda9a0.svg)}.mx_CallView_callControls_button_dialpad_hidden{margin-right:auto;cursor:auto}.mx_CallView_callControls_button_micOn:before{background-image:url(../../img/voip/mic-on.2592c14.svg)}.mx_CallView_callControls_button_micOff:before{background-image:url(../../img/voip/mic-off.774e42b.svg)}.mx_CallView_callControls_button_vidOn:before{background-image:url(../../img/voip/vid-on.b9b8bbf.svg)}.mx_CallView_callControls_button_vidOff:before{background-image:url(../../img/voip/vid-off.5552596.svg)}.mx_CallView_callControls_button_hangup:before{background-image:url(../../img/voip/hangup.9c3adeb.svg)}.mx_CallView_callControls_button_more{margin-left:auto}.mx_CallView_callControls_button_more:before{background-image:url(../../img/voip/more.5e8055e.svg)}.mx_CallView_callControls_button_more_hidden{margin-left:auto;cursor:auto}.mx_CallView_callControls_button_invisible{visibility:hidden;pointer-events:none;position:absolute}.mx_CallViewForRoom{overflow:hidden}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:8px}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper:hover .mx_CallViewForRoom_ResizeHandle{width:100%!important;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper:hover .mx_CallViewForRoom_ResizeHandle:after{content:"";margin-top:3px;border-radius:4px;height:4px;width:100%;max-width:64px;background-color:#2e2f32}.mx_DialPad{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:16px;gap:16px}.mx_DialPad_button{width:40px;height:40px;background-color:#e3e8f0;border-radius:40px;font-size:18px;font-weight:600;text-align:center;vertical-align:middle;line-height:40px}.mx_DialPad_deleteButton:before,.mx_DialPad_dialButton:before{content:"";display:inline-block;height:40px;width:40px;vertical-align:middle;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-position:center;mask-position:center;background-color:#fff}.mx_DialPad_deleteButton{background-color:#ff4b55}.mx_DialPad_deleteButton:before{-webkit-mask-image:url(../../img/element-icons/call/delete.833d785.svg);mask-image:url(../../img/element-icons/call/delete.833d785.svg);-webkit-mask-position:9px;mask-position:9px}.mx_DialPad_dialButton{background-color:#0dbd8b}.mx_DialPad_dialButton:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_DialPadContextMenu_header{margin-top:12px;margin-left:12px;margin-right:12px}.mx_DialPadContextMenu_title{color:#61708b;font-size:12px;font-weight:600}.mx_DialPadContextMenu_dialled{height:1em;font-size:18px;font-weight:600}.mx_DialPadContextMenu_dialPad{margin:16px}.mx_DialPadContextMenu_horizSep{position:relative}.mx_DialPadContextMenu_horizSep:before{content:"";position:absolute;width:100%;border-bottom:1px solid #e3e8f0}.mx_Dialog_dialPadWrapper .mx_Dialog{padding:0}.mx_DialPadModal{width:192px;height:368px}.mx_DialPadModal_header{margin-top:12px;margin-left:12px;margin-right:12px}.mx_DialPadModal_title{color:#61708b;font-size:12px;font-weight:600}.mx_DialPadModal_cancel{float:right;-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#c1c1c1;cursor:pointer}.mx_DialPadModal_field{border:none;margin:0}.mx_DialPadModal_field input{font-size:18px;font-weight:600}.mx_DialPadModal_dialPad{margin-left:16px;margin-right:16px;margin-top:16px}.mx_DialPadModal_horizSep{position:relative}.mx_DialPadModal_horizSep:before{content:"";position:absolute;width:100%;border-bottom:1px solid #e3e8f0}.mx_VideoFeed_voice{padding-bottom:52px;background-color:#27303a}.mx_VideoFeed_remote{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_VideoFeed_remote.mx_VideoFeed_video{background-color:#000}.mx_VideoFeed_local{max-width:25%;max-height:25%;position:absolute;right:10px;top:10px;z-index:100;border-radius:4px}.mx_VideoFeed_local.mx_VideoFeed_video{background-color:transparent}.mx_VideoFeed_mirror{-webkit-transform:scaleX(-1);transform:scaleX(-1)}
`
const snackbarCSS = `
#snackbar {
diff --git a/src/utils/exportUtils/exportIcons.ts b/src/utils/exportUtils/exportIcons.ts
new file mode 100644
index 0000000000..2a19e9c4d1
--- /dev/null
+++ b/src/utils/exportUtils/exportIcons.ts
@@ -0,0 +1,15 @@
+/* eslint-disable max-len */
+export default {
+ "trash.svg": `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M2.25 5.5H5.16667H21.75" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M16.5 5.5L15 1H9L7.5 5.5" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.25 9.25V20.75C5.25 21.8546 6.14543 22.75 7.25 22.75H16.75C17.8546 22.75 18.75 21.8546 18.75 20.75V9.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M9.75 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M14.25 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ `,
+ "attach.svg": `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.8155 13.0336L11.2282 17.4193C9.08205 19.45 5.53015 19.6024 3.45617 17.4193C1.4888 15.3484 1.48412 12.0136 3.63032 9.98294L11.8691 2.10597C13.2999 0.752226 15.5435 0.535035 16.984 2.05147C18.5968 3.7491 18.1298 5.99061 16.699 7.34435L8.6284 14.9682C7.913 15.645 6.7551 15.7233 6.03771 14.9682C5.34842 14.2426 5.45967 13.0625 6.17507 12.3856L10.9045 7.86398" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ `,
+};
From 1382bd4fee3c1fcee27ff5b89e3828d84e4450b4 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 1 Jun 2021 14:47:01 +0530
Subject: [PATCH 033/313] Handle icons and skip decryption checks during export
---
src/components/views/messages/MAudioBody.js | 2 +-
src/components/views/messages/MFileBody.js | 5 ++++-
src/components/views/messages/MImageBody.js | 6 +++---
src/components/views/messages/MVideoBody.tsx | 2 +-
src/components/views/messages/MessageEvent.js | 4 ++++
.../views/messages/RedactedBody.tsx | 4 +++-
src/components/views/rooms/EventTile.tsx | 2 ++
src/utils/exportUtils/exportCSS.ts | 21 +++++++++++++++++++
8 files changed, 39 insertions(+), 7 deletions(-)
diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js
index 53aa013503..2c3eba8cb3 100644
--- a/src/components/views/messages/MAudioBody.js
+++ b/src/components/views/messages/MAudioBody.js
@@ -95,7 +95,7 @@ export default class MAudioBody extends React.Component {
);
}
- if (content.file !== undefined && this.state.decryptedUrl === null) {
+ if (!this.props.mediaSrc && content.file !== undefined && this.state.decryptedUrl === null) {
// Need to decrypt the attachment
// The attachment is decrypted in componentDidMount.
// For now add an img tag with a 16x16 spinner.
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 53d37d73da..19b8d7342b 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -104,6 +104,7 @@ export default class MFileBody extends React.Component {
showGenericPlaceholder: PropTypes.bool,
/* to set source to local file path during export */
mediaSrc: PropTypes.string,
+ isExporting: PropTypes.bool,
};
static defaultProps = {
@@ -174,7 +175,9 @@ export default class MFileBody extends React.Component {
if (this.props.showGenericPlaceholder) {
placeholder = (
<div className="mx_MFileBody_info">
- <span className="mx_MFileBody_info_icon" />
+ <span className="mx_MFileBody_info_icon" >
+ {this.props.isExporting ? <img class="mx_export_attach_icon" src="icons/attach.svg" /> : null}
+ </span>
<span className="mx_MFileBody_info_filename">{this.presentableTextForFile(content, false)}</span>
</div>
);
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 9937624a0e..56cc6a5eec 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -370,9 +370,9 @@ export default class MImageBody extends React.Component {
let gifLabel = null;
// e2e image hasn't been decrypted yet
- if (content.file !== undefined && this.state.decryptedUrl === null) {
+ if (!this.props.mediaSrc && content.file !== undefined && this.state.decryptedUrl === null) {
placeholder = <InlineSpinner w={32} h={32} />;
- } else if (!this.state.imgLoaded) {
+ } else if (!this.props.mediaSrc && !this.state.imgLoaded) {
// Deliberately, getSpinner is left unimplemented here, MStickerBody overides
placeholder = this.getPlaceholder();
}
@@ -407,7 +407,7 @@ export default class MImageBody extends React.Component {
<div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px" }} >
{ /* Calculate aspect ratio, using %padding will size _container correctly */ }
<div style={{ paddingBottom: (100 * infoHeight / infoWidth) + '%' }} />
- { !this.props.mediaSrc && showPlaceholder &&
+ {showPlaceholder &&
<div className="mx_MImageBody_thumbnail" style={{
// Constrain width here so that spinner appears central to the loaded thumbnail
maxWidth: infoWidth + "px",
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 68cbb6702c..2b4327068e 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -209,7 +209,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
}
// Important: If we aren't autoplaying and we haven't decrypted it yet, show a video with a poster.
- if (content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
+ if (!this.props.mediaSrc && content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
// Need to decrypt the attachment
// The attachment is decrypted in componentDidMount.
// For now add an img tag with a spinner.
diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js
index 84a3d56d77..e243c3c8bd 100644
--- a/src/components/views/messages/MessageEvent.js
+++ b/src/components/views/messages/MessageEvent.js
@@ -47,6 +47,9 @@ export default class MessageEvent extends React.Component {
/* to set source to local file path during export */
mediaSrc: PropTypes.string,
+ /* to set source to local file path during export */
+ isExporting: PropTypes.bool,
+
/* the maximum image height to use, if the event is an image */
maxImageHeight: PropTypes.number,
@@ -124,6 +127,7 @@ export default class MessageEvent extends React.Component {
showUrlPreview={this.props.showUrlPreview}
tileShape={this.props.tileShape}
mediaSrc={this.props.mediaSrc}
+ isExporting={this.props.isExporting}
maxImageHeight={this.props.maxImageHeight}
replacingEventId={this.props.replacingEventId}
editState={this.props.editState}
diff --git a/src/components/views/messages/RedactedBody.tsx b/src/components/views/messages/RedactedBody.tsx
index 5f80460d03..fb4f0b0efa 100644
--- a/src/components/views/messages/RedactedBody.tsx
+++ b/src/components/views/messages/RedactedBody.tsx
@@ -24,9 +24,10 @@ import SettingsStore from "../../../settings/SettingsStore";
interface IProps {
mxEvent: MatrixEvent;
+ isExporting: boolean;
}
-const RedactedBody = React.forwardRef<any, IProps>(({mxEvent}, ref) => {
+const RedactedBody = React.forwardRef<any, IProps>(({mxEvent, isExporting}, ref) => {
const cli: MatrixClient = useContext(MatrixClientContext);
let text = _t("Message deleted");
@@ -44,6 +45,7 @@ const RedactedBody = React.forwardRef<any, IProps>(({mxEvent}, ref) => {
return (
<span className="mx_RedactedBody" ref={ref} title={titleText}>
+ { isExporting ? <img className="mx_export_trash_icon" src="icons/trash.svg" title="Redacted" /> : null }
{ text }
</span>
);
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index a7bfb40ad0..302d35fcce 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -311,6 +311,7 @@ export default class EventTile extends React.Component<IProps, IState> {
static defaultProps = {
// no-op function because onHeightChanged is optional yet some sub-components assume its existence
onHeightChanged: function() {},
+ isExporting: false,
};
static contextType = MatrixClientContext;
@@ -1150,6 +1151,7 @@ export default class EventTile extends React.Component<IProps, IState> {
{ thread }
<EventTileType ref={this.tile}
mxEvent={this.props.mxEvent}
+ isExporting={this.props.isExporting}
replacingEventId={this.props.replacingEventId}
editState={this.props.editState}
mediaSrc={this.props.mediaSrc}
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index dd645b4362..b34d22cfae 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -58,5 +58,26 @@ a.mx_reply_anchor:hover{
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
+
+.mx_MFileBody_info .mx_MFileBody_info_icon img.mx_export_attach_icon {
+ content: '';
+ background-color: #ffffff;
+ width: 13px;
+ height: 15px;
+ position: absolute;
+ top: 8px;
+ left: 9px;
+}
+
+.mx_RedactedBody img.mx_export_trash_icon {
+ height: 14px;
+ width: 14px;
+ background-color: #ffffff;
+ content: '';
+ position: absolute;
+ top: 1px;
+ left: 0;
+}
+
`
export default lightCSS + snackbarCSS;
From 9c38af007583b7fda45620f20d26b6f53259e9b1 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 1 Jun 2021 17:06:39 +0530
Subject: [PATCH 034/313] Make reply UI work even when javascript is disabled
---
src/components/views/elements/ReplyThread.js | 2 +-
src/utils/exportUtils/HtmlExport.tsx | 2 +-
src/utils/exportUtils/exportCSS.ts | 20 +++++++++++++++
src/utils/exportUtils/exportJS.ts | 27 ++++++++------------
4 files changed, 33 insertions(+), 18 deletions(-)
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index 018c5d1e6e..f67889cca5 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -374,7 +374,7 @@ export default class ReplyThread extends React.Component {
} else if (this.props.isExporting) {
const eventId = ReplyThread.getParentEventId(this.props.parentEv);
header = <p style={{ marginTop: -5, marginBottom: 5 }}>
- In reply to <a className="mx_reply_anchor" scroll-to={`${eventId}`}>this message</a>
+ In reply to <a className="mx_reply_anchor" href={`#${eventId}`} scroll-to={eventId}>this message</a>
</p>;
} else if (this.state.loading) {
const Spinner = sdk.getComponent("elements.Spinner");
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index eeb9f6a684..87c11e59ad 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -216,7 +216,7 @@ export default class HTMLExporter extends Exporter {
const hasAvatar = this.hasAvatar(mxEv);
if (hasAvatar) this.saveAvatarIfNeeded(mxEv);
- return <li id={mxEv.getId()}>
+ return <li className="mx_Export_EventWrapper" id={mxEv.getId()}>
<EventTile
mxEvent={mxEv}
continuation={continuation}
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index b34d22cfae..8aee952cbc 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -69,6 +69,26 @@ a.mx_reply_anchor:hover{
left: 9px;
}
+* {
+ scroll-behavior: smooth !important;
+}
+
+
+li.mx_Export_EventWrapper:target {
+ background: white;
+ animation: mx_event_highlight_animation 2s linear;
+}
+
+
+@keyframes mx_event_highlight_animation {
+ 0%,100% {
+ background: white;
+ }
+ 50% {
+ background: #e3e2df;
+ }
+}
+
.mx_RedactedBody img.mx_export_trash_icon {
height: 14px;
width: 14px;
diff --git a/src/utils/exportUtils/exportJS.ts b/src/utils/exportUtils/exportJS.ts
index 4fd0a5159d..2f7ba550e7 100644
--- a/src/utils/exportUtils/exportJS.ts
+++ b/src/utils/exportUtils/exportJS.ts
@@ -1,16 +1,10 @@
export default `
-function scrollToElement(replyId){
- let el = document.getElementById(replyId);
- if(!el) {
- showToast("The message you're looking for wasn't exported");
- return;
- };
- el.scrollIntoView({ behavior: 'smooth', block: 'center' });
- el.style.backgroundColor = '#f6f7f8';
- el.style.transition = 'background-color 1s ease'
- setTimeout(() => {
- el.style.backgroundColor = "white"
- }, 2000);
+function showToastIfNeeded(replyId){
+ let el = document.getElementById(replyId);
+ if(!el) {
+ showToast("The message you're looking for wasn't exported");
+ return;
+ };
}
function showToast(text) {
@@ -23,10 +17,11 @@ function showToast(text) {
}
window.onload = () => {
- document.querySelectorAll('.mx_reply_anchor').forEach(element => {
- element.addEventListener('click', event => {
- scrollToElement(event.target.getAttribute("scroll-to"));
- })
+document.querySelectorAll('.mx_reply_anchor').forEach(element => {
+ element.addEventListener('click', event => {
+ showToastIfNeeded(event.target.getAttribute("scroll-to"));
})
+})
}
+
`
From fc61e96218398828a40ac30c7a585b39ce41e3b1 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 1 Jun 2021 17:22:13 +0530
Subject: [PATCH 035/313] Remove unnecessary export
---
src/HtmlUtils.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx
index 1d5defe45d..ef5ac383e3 100644
--- a/src/HtmlUtils.tsx
+++ b/src/HtmlUtils.tsx
@@ -233,7 +233,7 @@ const transformTags: IExtendedSanitizeOptions["transformTags"] = { // custom to
},
};
-export const sanitizeHtmlParams: IExtendedSanitizeOptions = {
+const sanitizeHtmlParams: IExtendedSanitizeOptions = {
allowedTags: [
'font', // custom to matrix for IRC-style font coloring
'del', // for markdown
From 01a3b854c3cad0198a631b873fffd099a66936ac Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 1 Jun 2021 20:08:10 +0530
Subject: [PATCH 036/313] Add sticker support
---
src/utils/exportUtils/HtmlExport.tsx | 24 +++++++++---------------
1 file changed, 9 insertions(+), 15 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 87c11e59ad..0babf01fe7 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -246,21 +246,15 @@ export default class HTMLExporter extends Exporter {
protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
let eventTile: JSX.Element;
- switch (mxEv.getContent().msgtype) {
- case "m.image":
- case "m.file":
- case "m.video":
- case "m.audio": {
- const blob = await this.getMediaBlob(mxEv);
- const filePath = this.getFilePath(mxEv);
- eventTile = this.getEventTile(mxEv, joined, filePath);
- this.zip.file(filePath, blob);
- break;
- }
- default:
- eventTile = this.getEventTile(mxEv, joined);
- break;
- }
+ const attachmentTypes = ["m.sticker", "m.image", "m.file", "m.video", "m.audio"]
+
+ if (mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype)) {
+ const blob = await this.getMediaBlob(mxEv);
+ const filePath = this.getFilePath(mxEv);
+ eventTile = this.getEventTile(mxEv, joined, filePath);
+ this.zip.file(filePath, blob);
+ } else eventTile = this.getEventTile(mxEv, joined);
+
return renderToStaticMarkup(eventTile);
}
From c63c59b4080de22b4a871773ac13454ce36cce37 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 1 Jun 2021 21:52:04 +0530
Subject: [PATCH 037/313] Rename date function
---
src/DateUtils.ts | 2 +-
src/utils/exportUtils/HtmlExport.tsx | 6 +++---
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/DateUtils.ts b/src/DateUtils.ts
index 6d390e9132..e629782d6f 100644
--- a/src/DateUtils.ts
+++ b/src/DateUtils.ts
@@ -138,7 +138,7 @@ export function wantsDateSeparator(prevEventDate: Date, nextEventDate: Date): bo
}
-export function formatFullDateNoDayNoTime(date: Date) {
+export function formatFullDateNoDay(date: Date) {
return (
date.getFullYear() +
"-" +
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 0babf01fe7..d5a4220304 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -9,7 +9,7 @@ import { Exporter } from "./Exporter";
import { renderToStaticMarkup } from 'react-dom/server'
import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
-import { formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
+import { formatFullDateNoDay, wantsDateSeparator } from "../../DateUtils";
import { RoomPermalinkCreator } from "../permalinks/Permalinks";
import * as ponyfill from "web-streams-polyfill/ponyfill"
import * as Avatar from "../../Avatar";
@@ -205,7 +205,7 @@ export default class HTMLExporter extends Exporter {
fileDirectory = "files";
break;
}
- const fileDate = formatFullDateNoDayNoTime(new Date(event.getTs()));
+ const fileDate = formatFullDateNoDay(new Date(event.getTs()));
const [fileName, fileExt] = this.splitFileName(event.getContent().body);
const filePath = fileDirectory + "/" + fileName + '-' + fileDate + '.' + fileExt;
return filePath;
@@ -283,7 +283,7 @@ export default class HTMLExporter extends Exporter {
for (const iconName in exportIcons) {
this.zip.file(`icons/${iconName}`, exportIcons[iconName]);
}
- const filename = `matrix-export-${formatFullDateNoDayNoTime(new Date())}.zip`;
+ const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
//Generate the zip file asynchronously
const blob = await this.zip.generateAsync({ type: "blob" });
From 692e499cf2711b4d8fce1f0799643dd8f99cb4f0 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 2 Jun 2021 12:06:00 +0530
Subject: [PATCH 038/313] Handle encrypted stickers and store stickers in a
separate folder
---
src/DateUtils.ts | 1 -
src/components/views/messages/MFileBody.js | 4 +++-
src/utils/exportUtils/HtmlExport.tsx | 11 ++++++-----
3 files changed, 9 insertions(+), 7 deletions(-)
diff --git a/src/DateUtils.ts b/src/DateUtils.ts
index e629782d6f..4bfe575e3c 100644
--- a/src/DateUtils.ts
+++ b/src/DateUtils.ts
@@ -137,7 +137,6 @@ export function wantsDateSeparator(prevEventDate: Date, nextEventDate: Date): bo
return prevEventDate.getDay() !== nextEventDate.getDay();
}
-
export function formatFullDateNoDay(date: Date) {
return (
date.getFullYear() +
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 19b8d7342b..8afd4abaf6 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -176,7 +176,9 @@ export default class MFileBody extends React.Component {
placeholder = (
<div className="mx_MFileBody_info">
<span className="mx_MFileBody_info_icon" >
- {this.props.isExporting ? <img class="mx_export_attach_icon" src="icons/attach.svg" /> : null}
+ {this.props.isExporting ?
+ <img className="mx_export_attach_icon" src="icons/attach.svg" />
+ : null}
</span>
<span className="mx_MFileBody_info_filename">{this.presentableTextForFile(content, false)}</span>
</div>
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index d5a4220304..47b318c409 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -156,7 +156,9 @@ export default class HTMLExporter extends Exporter {
try {
const isEncrypted = event.isEncrypted();
const content = event.getContent();
- if (isEncrypted && !content.hasOwnProperty("org.matrix.msc1767.file")) {
+ const shouldDecrypt = isEncrypted && !content.hasOwnProperty("org.matrix.msc1767.file")
+ && event.getType() !== "m.sticker";
+ if (shouldDecrypt) {
blob = await decryptFile(content.file);
} else {
const media = mediaFromContent(event.getContent());
@@ -185,7 +187,7 @@ export default class HTMLExporter extends Exporter {
if (lastDot === -1) return [file, ""];
const fileName = file.slice(0, lastDot);
const ext = file.slice(lastDot + 1);
- return [fileName, ext];
+ return [fileName, '.' + ext];
}
protected getFilePath(event: MatrixEvent) {
@@ -202,12 +204,11 @@ export default class HTMLExporter extends Exporter {
fileDirectory = "audio";
break;
default:
- fileDirectory = "files";
- break;
+ fileDirectory = event.getType() === "m.sticker" ? "stickers" : "files";
}
const fileDate = formatFullDateNoDay(new Date(event.getTs()));
const [fileName, fileExt] = this.splitFileName(event.getContent().body);
- const filePath = fileDirectory + "/" + fileName + '-' + fileDate + '.' + fileExt;
+ const filePath = fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
return filePath;
}
From f84ae4a1734f5b37f3836f7ce3de890168ae9049 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 2 Jun 2021 13:12:03 +0530
Subject: [PATCH 039/313] Add await
---
src/utils/exportUtils/HtmlExport.tsx | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 47b318c409..f4fa4d0cf4 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -213,9 +213,9 @@ export default class HTMLExporter extends Exporter {
}
- protected getEventTile(mxEv: MatrixEvent, continuation: boolean, mediaSrc?: string) {
+ protected async getEventTile(mxEv: MatrixEvent, continuation: boolean, mediaSrc?: string) {
const hasAvatar = this.hasAvatar(mxEv);
- if (hasAvatar) this.saveAvatarIfNeeded(mxEv);
+ if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
return <li className="mx_Export_EventWrapper" id={mxEv.getId()}>
<EventTile
@@ -252,9 +252,9 @@ export default class HTMLExporter extends Exporter {
if (mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype)) {
const blob = await this.getMediaBlob(mxEv);
const filePath = this.getFilePath(mxEv);
- eventTile = this.getEventTile(mxEv, joined, filePath);
+ eventTile = await this.getEventTile(mxEv, joined, filePath);
this.zip.file(filePath, blob);
- } else eventTile = this.getEventTile(mxEv, joined);
+ } else eventTile = await this.getEventTile(mxEv, joined);
return renderToStaticMarkup(eventTile);
}
From 183166c460f5e42605399d954d944874edc835fc Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 3 Jun 2021 12:40:00 +0530
Subject: [PATCH 040/313] Unminify CSS and apply suggestions from the design
team
---
src/DateUtils.ts | 12 +-
src/i18n/strings/en_EN.json | 3 +
src/utils/exportUtils/HtmlExport.tsx | 55 +-
src/utils/exportUtils/exportCSS.ts | 19469 ++++++++++++++++++++++++-
4 files changed, 19525 insertions(+), 14 deletions(-)
diff --git a/src/DateUtils.ts b/src/DateUtils.ts
index 4bfe575e3c..481afb312b 100644
--- a/src/DateUtils.ts
+++ b/src/DateUtils.ts
@@ -141,7 +141,7 @@ export function formatFullDateNoDay(date: Date) {
return (
date.getFullYear() +
"-" +
- pad(date.getMonth()) +
+ pad(date.getMonth() + 1) +
"-" +
pad(date.getDate()) +
_t(" at ") +
@@ -152,3 +152,13 @@ export function formatFullDateNoDay(date: Date) {
pad(date.getSeconds())
);
}
+
+export function formatFullDateNoDayNoTime(date: Date) {
+ return (
+ date.getFullYear() +
+ "/" +
+ pad(date.getMonth() + 1) +
+ "/" +
+ pad(date.getDate())
+ );
+}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 682a31e0a3..35e6839c52 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -725,6 +725,9 @@
"Invite to %(spaceName)s": "Invite to %(spaceName)s",
"Share your public space": "Share your public space",
"Unknown App": "Unknown App",
+ "%(creatorName)s created this room.": "%(creatorName)s created this room.",
+ "This is the start of export of <b>%(roomName)s</b>.\n Exported by %(exporterDetails)s at %(exportDate)s. ": "This is the start of export of <b>%(roomName)s</b>.\n Exported by %(exporterDetails)s at %(exportDate)s. ",
+ "Topic: %(topic)s": "Topic: %(topic)s",
"Help us improve %(brand)s": "Help us improve %(brand)s",
"Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.": "Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.",
"Yes": "Yes",
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index f4fa4d0cf4..1432b61e85 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -9,7 +9,7 @@ import { Exporter } from "./Exporter";
import { renderToStaticMarkup } from 'react-dom/server'
import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
-import { formatFullDateNoDay, wantsDateSeparator } from "../../DateUtils";
+import { formatFullDateNoDay, formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
import { RoomPermalinkCreator } from "../permalinks/Permalinks";
import * as ponyfill from "web-streams-polyfill/ponyfill"
import * as Avatar from "../../Avatar";
@@ -19,6 +19,9 @@ import exportCSS from "./exportCSS";
import exportJS from "./exportJS";
import BaseAvatar from "../../components/views/avatars/BaseAvatar";
import exportIcons from "./exportIcons";
+import { _t } from "../../languageHandler";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { EventType } from "matrix-js-sdk/src/@types/event";
export default class HTMLExporter extends Exporter {
protected zip: JSZip;
@@ -32,21 +35,22 @@ export default class HTMLExporter extends Exporter {
this.permalinkCreator = new RoomPermalinkCreator(this.room);
}
- protected async getRoomAvatar() {
+ protected async getRoomAvatar(avatarSide: number) {
let blob: Blob;
- const avatarUrl = Avatar.avatarUrlForRoom(this.room, 32, 32, "crop");
+ const avatarUrl = Avatar.avatarUrlForRoom(this.room, avatarSide, avatarSide, "crop");
+ const avatarPath = `room/avatar${avatarSide}.png`;
if (avatarUrl) {
const image = await fetch(avatarUrl);
blob = await image.blob();
- this.zip.file("room.png", blob);
+ this.zip.file(avatarPath, blob);
}
const avatar = (
<BaseAvatar
- width={32}
- height={32}
+ width={avatarSide}
+ height={avatarSide}
name={this.room.name}
title={this.room.name}
- url={blob ? "room.png" : null}
+ url={blob ? avatarPath : null}
resizeMethod={"crop"}
/>
);
@@ -54,7 +58,32 @@ export default class HTMLExporter extends Exporter {
}
protected async wrapHTML(content: string, room: Room) {
- const roomAvatar = await this.getRoomAvatar();
+ const roomAvatar32 = await this.getRoomAvatar(32);
+ const exportDate = formatFullDateNoDayNoTime(new Date());
+ const cli = MatrixClientPeg.get();
+ const creator = room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
+ const creatorName = room?.getMember(creator)?.rawDisplayName || creator;
+ const exporter = cli.getUserId();
+ const exporterName = room?.getMember(exporter)?.rawDisplayName;
+ const topic = room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic
+ || room.topic || "";
+ const createdText = _t("%(creatorName)s created this room.", {
+ creatorName,
+ });
+
+ const exportedText = _t(`This is the start of export of <b>%(roomName)s</b>.
+ Exported by %(exporterDetails)s at %(exportDate)s. `, {
+ exportDate,
+ roomName: room.name,
+ exporterDetails: `<a href="https://matrix.to/#/${exporter}" target="_blank" rel="noopener noreferrer">
+ ${exporterName ? `<b>${ exporterName }</b>(${ exporter })` : `<b>${ exporter }</b>`}
+ </a>`,
+ });
+
+ const topicText = topic ? _t("Topic: %(topic)s", { topic }) : "";
+ const roomAvatar52 = await this.getRoomAvatar(52);
+
+
return `
<!DOCTYPE html>
<html lang="en">
@@ -79,7 +108,7 @@ export default class HTMLExporter extends Exporter {
<div class="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
<div class="mx_RoomHeader_avatar">
<div class="mx_DecoratedRoomAvatar">
- ${roomAvatar}
+ ${roomAvatar32}
</div>
</div>
<div class="mx_RoomHeader_name">
@@ -91,7 +120,7 @@ export default class HTMLExporter extends Exporter {
${room.name}
</div>
</div>
- <div class="mx_RoomHeader_topic" dir="auto"></div>
+ <div class="mx_RoomHeader_topic" dir="auto"> ${topic} </div>
</div>
</div>
<div class="mx_MainSplit">
@@ -113,6 +142,12 @@ export default class HTMLExporter extends Exporter {
aria-live="polite"
role="list"
>
+ <div class="mx_NewRoomIntro">
+ ${roomAvatar52}
+ <h2> ${room.name} </h2>
+ <p> ${createdText} <br/><br/> ${exportedText} </p>
+ <p> ${topicText} </p>
+ </div>
${content}
</ol>
</div>
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 8aee952cbc..6f2284cc32 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -1,6 +1,19469 @@
/* eslint-disable max-len */
-const lightCSS = `
-@charset "utf-8";@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Regular.4232a67.woff2) format("woff2"),url(../../fonts/Inter/Inter-Regular.3a1908c.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:400;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Italic.b791861.woff2) format("woff2"),url(../../fonts/Inter/Inter-Italic.b13e6fe.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Medium.027d14e.woff2) format("woff2"),url(../../fonts/Inter/Inter-Medium.d1f6b6e.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:500;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-MediumItalic.8154ac2.woff2) format("woff2"),url(../../fonts/Inter/Inter-MediumItalic.1912849.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-SemiBold.0802d48.woff2) format("woff2"),url(../../fonts/Inter/Inter-SemiBold.8357f92.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:600;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-SemiBoldItalic.10a60d8.woff2) format("woff2"),url(../../fonts/Inter/Inter-SemiBoldItalic.1c70752.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-Bold.fc28dff.woff2) format("woff2"),url(../../fonts/Inter/Inter-Bold.025b6f2.woff) format("woff")}@font-face{font-family:Inter;font-style:italic;font-weight:700;font-display:swap;unicode-range:U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10ffff;src:url(../../fonts/Inter/Inter-BoldItalic.2129bd0.woff2) format("woff2"),url(../../fonts/Inter/Inter-BoldItalic.80f8542.woff) format("woff")}@font-face{font-family:Inconsolata;font-style:normal;font-weight:400;src:local("Inconsolata Regular"),local("Inconsolata-Regular"),url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.2aafaa1.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Inconsolata;font-style:normal;font-weight:400;font-display:swap;src:local("Inconsolata Regular"),local("Inconsolata-Regular"),url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.5476fd3.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Inconsolata;font-style:normal;font-weight:700;font-display:swap;src:local("Inconsolata Bold"),local("Inconsolata-Bold"),url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.6bc411a.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Inconsolata;font-style:normal;font-weight:700;font-display:swap;src:local("Inconsolata Bold"),local("Inconsolata-Bold"),url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.000abc6.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.hljs-addition{background:#dfd}.hljs-deletion{background:#fdd}@supports ((-webkit-backdrop-filter:none) or (backdrop-filter:none)){.mx_LeftPanel{background-image:unset;background-image:var(--avatar-url,unset);background-repeat:no-repeat;background-size:cover;background-position:0 0}.mx_GroupFilterPanel,.mx_SpacePanel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.mx_LeftPanel .mx_LeftPanel_roomListContainer{-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}}.mx_RoomSublist_showNButton{background-color:transparent!important}a:hover,a:link,a:visited{text-decoration:none}:root{font-size:10px;--transition-short:.1s;--transition-standard:.3s}@media (prefers-reduced-motion){:root{--transition-short:0;--transition-standard:0}}html{height:100%;overflow:hidden}body{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.5rem;background-color:#fff;color:#2e2f32;border:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code,pre{font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji;font-size:100%!important}.error,.text-error,.text-warning,.warning{color:#ff4b55}.text-success{color:#0dbd8b}.text-muted{color:#61708b}b{font-weight:700}h2{color:#2e2f32;font-weight:400;font-size:1.8rem;margin-top:16px;margin-bottom:16px}a:hover,a:link,a:visited{color:#238cf5}input[type=password],input[type=search],input[type=text]{padding:9px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;font-weight:600;min-width:0}input[type=search].mx_textinput_icon,input[type=text].mx_textinput_icon{padding-left:36px;background-repeat:no-repeat;background-position:10px}input[type=search].mx_textinput_icon.mx_textinput_search,input[type=text].mx_textinput_icon.mx_textinput_search{background-image:url(../../img/feather-customised/search-input.044bfa7.svg)}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{opacity:1}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1}input::-ms-input-placeholder,textarea::-ms-input-placeholder{opacity:1}input::placeholder,textarea::placeholder{opacity:1}input[type=password],input[type=text],textarea{background-color:transparent;color:#2e2f32}textarea{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;color:#2e2f32}input[type=password]:focus,input[type=text]:focus,textarea:focus{outline:none;-webkit-box-shadow:none;box-shadow:none}:focus:not(.focus-visible){outline:none}.mx_Dialog .mx_textinput>input[type=search],.mx_Dialog .mx_textinput>input[type=text],.mx_MatrixChat .mx_textinput>input[type=search],.mx_MatrixChat .mx_textinput>input[type=text]{border:none;-webkit-box-flex:1;-ms-flex:1;flex:1;color:#2e2f32}.mx_Dialog .mx_textinput,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text],.mx_MatrixChat .mx_textinput,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent;color:#9fa9ba;border-radius:4px;border:1px solid rgba(46,47,50,.1);margin:9px}.mx_Dialog .mx_textinput,.mx_MatrixChat .mx_textinput{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Dialog .mx_textinput input::-webkit-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-webkit-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-webkit-input-placeholder,.mx_MatrixChat .mx_textinput input::-webkit-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-webkit-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-webkit-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::-moz-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-moz-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-moz-placeholder,.mx_MatrixChat .mx_textinput input::-moz-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-moz-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-moz-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input:-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]:-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]:-ms-input-placeholder,.mx_MatrixChat .mx_textinput input:-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]:-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]:-ms-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-ms-input-placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-ms-input-placeholder,.mx_MatrixChat .mx_textinput input::-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::-ms-input-placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::-ms-input-placeholder{color:rgba(159,169,186,.75)}.mx_Dialog .mx_textinput input::placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::placeholder,.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::placeholder,.mx_MatrixChat .mx_textinput input::placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search]::placeholder,.mx_MatrixChat :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]::placeholder{color:rgba(159,169,186,.75)}.dark-panel{background-color:#f2f5f8}.dark-panel .mx_textinput,.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{color:#9fa9ba;background-color:#fff;border:none}.light-panel .mx_textinput,.light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=search],.light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)>input[type=text]{color:#9fa9ba;background-color:#f2f5f8;border:none}::-moz-focus-inner{border:0}#mx_theme_accentColor{color:#0dbd8b}#mx_theme_secondaryAccentColor{color:#f2f5f8}#mx_theme_tertiaryAccentColor{color:#d3efe1}.mx_Dialog_wrapper{position:fixed;z-index:4000;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_Dialog{background-color:#fff;color:#747474;z-index:4012;font-weight:300;font-size:1.5rem;position:relative;padding:24px;max-height:80%;-webkit-box-shadow:2px 15px 30px 0 rgba(0,0,0,.48);box-shadow:2px 15px 30px 0 rgba(0,0,0,.48);border-radius:8px;overflow-y:auto}.mx_Dialog_fixedWidth{width:60vw;max-width:704px}.mx_Dialog_staticWrapper .mx_Dialog{z-index:4010}.mx_Dialog_background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(46,48,51,.38);opacity:.8;z-index:4011}.mx_Dialog_background.mx_Dialog_staticBackground{z-index:4009}.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background{opacity:.4}.mx_Dialog_lightbox .mx_Dialog_background{opacity:.95;background-color:#000}.mx_Dialog_lightbox .mx_Dialog{border-radius:0;background-color:transparent;width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:none;padding:0}.mx_Dialog_header{position:relative;margin-bottom:10px}.mx_Dialog_titleImage{vertical-align:sub;width:25px;height:25px;margin-left:-2px;margin-right:4px}.mx_Dialog_title{font-size:2.2rem;font-weight:600;line-height:3.6rem;color:#45474a}.mx_Dialog_header.mx_Dialog_headerWithButton>.mx_Dialog_title{text-align:center}.mx_Dialog_header.mx_Dialog_headerWithCancel>.mx_Dialog_title{margin-right:20px}.mx_Dialog_title.danger{color:#ff4b55}.mx_Dialog_cancelButton{-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#c1c1c1;cursor:pointer;position:absolute;top:10px;right:0}.mx_Dialog_content{margin:24px 0 68px;font-size:1.4rem;color:#2e2f32;word-wrap:break-word}.mx_Dialog_buttons{margin-top:20px;text-align:right}.mx_Dialog_buttons .mx_Dialog_buttons_additive{float:left}.mx_Dialog_buttons button,.mx_Dialog_buttons input[type=submit],.mx_Dialog button,.mx_Dialog input[type=submit]{vertical-align:middle;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;margin-left:0;margin-right:8px;font-weight:600;border:1px solid #0dbd8b;color:#0dbd8b;background-color:#fff;font-family:inherit}.mx_Dialog button:last-child{margin-right:0}.mx_Dialog_buttons button:focus,.mx_Dialog_buttons input[type=submit]:focus,.mx_Dialog button:focus,.mx_Dialog input[type=submit]:focus{-webkit-filter:brightness(105%);filter:brightness(105%)}.mx_Dialog_buttons button.mx_Dialog_primary,.mx_Dialog_buttons input[type=submit].mx_Dialog_primary,.mx_Dialog button.mx_Dialog_primary,.mx_Dialog input[type=submit].mx_Dialog_primary{color:#fff;background-color:#0dbd8b;min-width:156px}.mx_Dialog_buttons button.danger,.mx_Dialog_buttons input[type=submit].danger,.mx_Dialog button.danger,.mx_Dialog input[type=submit].danger{background-color:#ff4b55;border:1px solid #ff4b55;color:#fff}.mx_Dialog button.warning,.mx_Dialog input[type=submit].warning{border:1px solid #ff4b55;color:#ff4b55}.mx_Dialog_buttons button:disabled,.mx_Dialog_buttons input[type=submit]:disabled,.mx_Dialog button:disabled,.mx_Dialog input[type=submit]:disabled{background-color:#747474;border:1px solid #747474;opacity:.7}.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog{width:auto;border-radius:8px;padding:0;-webkit-box-shadow:none;box-shadow:none;overflow-x:hidden;overflow-y:hidden}.mx_GeneralButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;display:inline;margin:auto}.mx_linkButton{cursor:pointer;color:#0dbd8b}.mx_TextInputDialog_label{text-align:left;padding-bottom:12px}.mx_TextInputDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff}.mx_textButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;cursor:pointer;display:inline-block;outline:none;font-size:1.5rem;padding:0 1.5em}.mx_button_row{margin-top:69px}.mx_Username_color1{color:#368bd6}.mx_Username_color2{color:#ac3ba8}.mx_Username_color3{color:#0dbd8b}.mx_Username_color4{color:#e64f7a}.mx_Username_color5{color:#ff812d}.mx_Username_color6{color:#2dc2c5}.mx_Username_color7{color:#5c56f5}.mx_Username_color8{color:#74d12c}.mx_Tooltip_dark .mx_Tooltip_chevron:after{border-right-color:#27303a}html{scrollbar-color:rgba(0,0,0,.2) transparent}*{scrollbar-width:thin}::-webkit-scrollbar{width:6px;height:6px;background-color:transparent}::-webkit-scrollbar-thumb{border-radius:3px;background-color:rgba(0,0,0,.2)}.mx_AutoHideScrollbar:hover{scrollbar-color:rgba(0,0,0,.2) transparent}.mx_AutoHideScrollbar:hover::-webkit-scrollbar{background-color:transparent}.mx_AutoHideScrollbar:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2)}.mx_AutoHideScrollbar{overflow-x:hidden;overflow-y:auto;overflow-y:overlay;-ms-overflow-style:-ms-autohiding-scrollbar}.mx_AutoHideScrollbar::-webkit-scrollbar,.mx_AutoHideScrollbar::-webkit-scrollbar-thumb{background-color:transparent}.mx_AutoHideScrollbar{scrollbar-color:transparent transparent}.mx_CompatibilityPage{width:100%;height:100%;background-color:#e55}.mx_CompatibilityPage_box{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:500px;height:300px;border:1px solid;padding:10px;background-color:#fcc}.mx_ContextualMenu_wrapper{position:fixed;z-index:5000}.mx_ContextualMenu_background{position:fixed;top:0;left:0;width:100%;height:100%;opacity:1;z-index:5000}.mx_ContextualMenu{border-radius:8px;-webkit-box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);background-color:#fff;color:#2e2f32;position:absolute;font-size:1.4rem;z-index:5001}.mx_ContextualMenu_right{right:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_right{right:8px}.mx_ContextualMenu_chevron_right{position:absolute;right:-8px;top:0;width:0;height:0;border-top:8px solid transparent;border-left:8px solid #fff;border-bottom:8px solid transparent}.mx_ContextualMenu_left{left:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_left{left:8px}.mx_ContextualMenu_chevron_left{position:absolute;left:-8px;top:0;width:0;height:0;border-top:8px solid transparent;border-right:8px solid #fff;border-bottom:8px solid transparent}.mx_ContextualMenu_top{top:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_top{top:8px}.mx_ContextualMenu_chevron_top{position:absolute;left:0;top:-8px;width:0;height:0;border-left:8px solid transparent;border-bottom:8px solid #fff;border-right:8px solid transparent}.mx_ContextualMenu_bottom{bottom:0}.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom{bottom:8px}.mx_ContextualMenu_chevron_bottom{position:absolute;left:0;bottom:-8px;width:0;height:0;border-left:8px solid transparent;border-top:8px solid #fff;border-right:8px solid transparent}.mx_ContextualMenu_spinner{display:block;margin:0 auto}.mx_CreateRoom{width:960px;margin-left:auto;margin-right:auto;color:#2e2f32}.mx_CreateRoom input,.mx_CreateRoom textarea{border-radius:3px;border:1px solid #c7c7c7;font-weight:300;font-size:1.3rem;padding:9px;margin-top:6px}.mx_CreateRoom_description{width:330px}.mx_CustomRoomTagPanel{background-color:hsla(0,0%,91%,.77);max-height:40vh}.mx_CustomRoomTagPanel_scroller{max-height:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CustomRoomTagPanel .mx_AccessibleButton{margin:0 auto;width:40px;padding:10px 0 9px;position:relative}.mx_CustomRoomTagPanel .mx_BaseAvatar_image{-webkit-box-sizing:border-box;box-sizing:border-box;width:40px;height:40px}.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected:before{content:"";height:56px;background-color:#238cf5;width:5px;position:absolute;left:-9px;border-radius:0 3px 3px 0;top:5px}.mx_FilePanel{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_FilePanel .mx_RoomView_messageListWrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_FilePanel .mx_RoomView_MessageList{width:100%}.mx_FilePanel .mx_EventTile_avatar,.mx_FilePanel .mx_RoomView_MessageList h2{display:none}.mx_FilePanel .mx_EventTile{word-break:break-word;margin-top:32px}.mx_FilePanel .mx_EventTile .mx_MImageBody{margin-right:0}.mx_FilePanel .mx_EventTile .mx_MFileBody{line-height:2.4rem}.mx_FilePanel .mx_EventTile .mx_MFileBody_download{padding-top:8px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.4rem;color:#acacac}.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;color:#747474}.mx_FilePanel .mx_EventTile .mx_MImageBody_size{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;font-size:1.4rem;text-align:right;white-space:nowrap}.mx_FilePanel .mx_EventTile_senderDetails{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:-2px}.mx_FilePanel .mx_EventTile_senderDetailsLink{text-decoration:none}.mx_FilePanel .mx_EventTile .mx_SenderProfile{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;line-height:normal;padding:0;font-size:1.4rem;opacity:1;color:#acacac}.mx_FilePanel .mx_EventTile .mx_MessageTimestamp{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;text-align:right;visibility:visible;position:static;font-size:1.4rem;opacity:1;color:#acacac}.mx_FilePanel .mx_EventTile_line{margin-right:0;padding-left:0}.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line{padding-left:0}.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line{background-color:#fff}.mx_FilePanel_empty:before{-webkit-mask-image:url(../../img/element-icons/room/files.5709c0c.svg);mask-image:url(../../img/element-icons/room/files.5709c0c.svg)}.mx_GenericErrorPage{width:100%;height:100%;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_GenericErrorPage_box{display:inline;width:500px;min-height:125px;border:1px solid #f22;padding:10px 10px 20px;background-color:#fcc}.mx_GroupFilterPanel{-webkit-box-flex:1;-ms-flex:1;flex:1;background-color:hsla(0,0%,91%,.77);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:0}.mx_GroupFilterPanel_items_selected{cursor:pointer}.mx_GroupFilterPanel .mx_GroupFilterPanel_divider{height:0;width:90%;border:none;border-bottom:1px solid #8d99a5}.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:100%}.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:6px}.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer>div{margin:6px 0}.mx_GroupFilterPanel .mx_TagTile{position:relative}.mx_GroupFilterPanel .mx_TagTile .mx_BetaDot{position:absolute;right:-13px;top:-11px}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype{padding:3px}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype{background-color:#fff;border-radius:6px}.mx_TagTile_selected_prototype .mx_TagTile_homeIcon:before{background-color:#2e2f32}.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon{background-color:rgba(92,100,112,.2);border-radius:48px}.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon:before{background-color:#5c6470}.mx_TagTile_homeIcon{width:32px;height:32px;position:relative}.mx_TagTile_homeIcon:before{-webkit-mask-image:url(../../img/element-icons/home.b706c0e.svg);mask-image:url(../../img/element-icons/home.b706c0e.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:21px;mask-size:21px;content:"";display:inline-block;width:32px;height:32px;position:absolute;top:calc(50% - 16px);left:calc(50% - 16px)}.mx_GroupFilterPanel .mx_TagTile_plus{margin-bottom:12px;height:32px;width:32px;border-radius:20px;background-color:rgba(92,100,112,.2);position:relative;display:block!important}.mx_GroupFilterPanel .mx_TagTile_plus:before{background-color:#5c6470;-webkit-mask-image:url(../../img/feather-customised/plus.38ae979.svg);mask-image:url(../../img/feather-customised/plus.38ae979.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected:before{content:"";height:100%;background-color:#0dbd8b;width:4px;position:absolute;left:-12px;border-radius:0 3px 3px 0}.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus{-webkit-filter:none;filter:none}.mx_TagTile_tooltip{position:relative;top:-30px;left:5px}.mx_TagTile_context_button{min-width:15px;height:15px;position:absolute;right:-5px;top:-8px;border-radius:8px;background-color:#dbdbdb;color:#000;font-weight:600;font-size:1rem;text-align:center;padding-top:1px;padding-left:4px;padding-right:4px}.mx_TagTile_avatar{position:relative}.mx_TagTile_badge{position:absolute;right:-4px;top:-2px;border-radius:8px;color:#fff;font-weight:600;font-size:1.4rem;padding:0 5px;background-color:#61708b}.mx_TagTile_badgeHighlight{background-color:#ff4b55}.mx_GroupView{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.mx_GroupView_error{margin:auto}.mx_GroupView_header{min-height:52px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:10px;padding-left:19px}.mx_GroupView_header_view{border-bottom:1px solid transparent;padding-bottom:0;padding-right:8px}.mx_GroupView_header_avatar,.mx_GroupView_header_info{display:table-cell;vertical-align:middle}.mx_GroupHeader_button{position:relative;margin-left:5px;margin-right:5px;cursor:pointer;height:20px;width:20px}.mx_GroupHeader_button:before{content:"";position:absolute;height:20px;width:20px;background-color:#91a1c0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_GroupHeader_editButton:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_GroupHeader_shareButton:before{-webkit-mask-image:url(../../img/element-icons/room/share.54dc3fb.svg);mask-image:url(../../img/element-icons/room/share.54dc3fb.svg)}.mx_GroupView_hostingSignup img{margin-left:5px}.mx_GroupView_editable{border-bottom:1px solid #c7c7c7!important;min-width:150px;cursor:text}.mx_GroupView_editable:focus{border-bottom:1px solid #0dbd8b!important;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable){color:#0dbd8b;cursor:pointer}.mx_GroupView_avatarPicker{position:relative}.mx_GroupView_avatarPicker_edit{position:absolute;top:50px;left:15px}.mx_GroupView_avatarPicker .mx_Spinner{width:48px;height:48px!important}.mx_GroupView_header_leftCol{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden}.mx_GroupView_header_rightCol{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_GroupView_textButton{display:inline-block}.mx_GroupView_header_groupid{font-weight:400;font-size:medium;padding-left:10px}.mx_GroupView_header_name{vertical-align:middle;width:100%;height:31px;color:#2e2f32;font-weight:700;font-size:2.2rem;padding-right:16px}.mx_GroupView_header_name,.mx_GroupView_header_shortDesc{overflow:hidden;padding-left:19px;text-overflow:ellipsis;border-bottom:1px solid transparent}.mx_GroupView_header_shortDesc{vertical-align:bottom;float:left;max-height:42px;color:#a2a2a2;font-weight:300;font-size:1.3rem;margin-right:16px}.mx_GroupView_avatarPicker_label{cursor:pointer}.mx_GroupView_cancelButton{padding-left:8px}.mx_GroupView_cancelButton img{position:relative;top:5px}.mx_GroupView input[type=radio]{margin:10px 10px 0}.mx_GroupView_label_text{display:inline-block;max-width:80%;vertical-align:.1em;line-height:2em}.mx_GroupView_body{margin:0 24px}.mx_GroupView_body,.mx_GroupView_rooms{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_GroupView_rooms{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_GroupView h3{text-transform:uppercase;color:#3d3b39;font-weight:600;font-size:1.3rem;margin-bottom:10px}.mx_GroupView_rooms_header .mx_AccessibleButton{padding-left:14px;margin-bottom:14px;height:24px}.mx_GroupView_group{border-top:1px solid transparent}.mx_GroupView_group_disabled{opacity:.3;pointer-events:none}.mx_GroupView_rooms_header_addRow_button{display:inline-block}.mx_GroupView_rooms_header_addRow_button object{pointer-events:none}.mx_GroupView_rooms_header_addRow_label{display:inline-block;vertical-align:top;line-height:2.4rem;padding-left:28px;color:#0dbd8b}.mx_GroupView_rooms .mx_RoomDetailList{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-top:1px solid transparent;padding-top:10px;word-break:break-word}.mx_GroupView .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_GroupView_membershipSection{color:#888;margin-top:10px}.mx_GroupView_membershipSubSection{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;display:-webkit-box;display:-ms-flexbox;display:flex;padding-bottom:8px}.mx_GroupView_membershipSubSection .mx_Spinner{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_GroupView_membershipSection_description{line-height:3.4rem}.mx_GroupView_membershipSection_description .mx_BaseAvatar{margin-right:10px}.mx_GroupView_membershipSection .mx_GroupView_textButton{margin-right:0;margin-top:0;margin-left:8px}.mx_GroupView_memberSettings_toggle label{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_GroupView_memberSettings input{margin-right:6px}.mx_GroupView_featuredThings{margin-top:20px}.mx_GroupView_featuredThings_header{font-weight:700;font-size:120%;margin-bottom:20px}.mx_GroupView_featuredThings_category{font-weight:700;font-size:110%;margin-top:10px}.mx_GroupView_featuredThings_container{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_GroupView_featuredThing,.mx_GroupView_featuredThings_addButton{display:table-cell;text-align:center;width:100px;margin:0 20px}.mx_GroupView_featuredThing{position:relative}.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton{position:absolute;top:-7px;right:11px;opacity:.4}.mx_GroupView_featuredThing .mx_BaseAvatar{vertical-align:baseline;vertical-align:initial}.mx_GroupView_featuredThings_addButton object{pointer-events:none}.mx_GroupView_featuredThing_name{word-wrap:break-word}.mx_GroupView_uploadInput{display:none}.mx_GroupView_body .mx_AutoHideScrollbar>*{margin:11px 50px 50px 68px}.mx_GroupView_groupDesc textarea{width:100%;max-width:100%;height:150px}.mx_GroupView_changeDelayWarning,.mx_GroupView_groupDesc_placeholder{background-color:#f7f7f7;color:#888;border-radius:10px;text-align:center;margin:20px 0}.mx_GroupView_groupDesc_placeholder{padding:100px 20px;cursor:pointer}.mx_GroupView_changeDelayWarning{padding:40px 20px}.mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar>:not(.mx_MemberInfo_avatar){padding-left:16px;padding-right:16px}.mx_HeaderButtons{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_buttons+.mx_HeaderButtons:before{content:unset}.mx_HeaderButtons:before{content:"";background-color:#91a1c0;opacity:.5;margin:6px 8px;border-radius:1px;width:1px}.mx_HomePage{max-width:960px;width:100%;height:100%;margin-left:auto;margin-right:auto}.mx_HomePage_default{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_HomePage_default .mx_HomePage_default_wrapper{margin:auto}.mx_HomePage_default img{height:48px}.mx_HomePage_default h1{font-weight:600;font-size:3.2rem;line-height:4.4rem;margin-bottom:4px}.mx_HomePage_default h4{margin-top:4px;font-weight:600;font-size:1.8rem;line-height:2.5rem;color:#61708b}.mx_HomePage_default .mx_MiniAvatarUploader{margin:0 auto}.mx_HomePage_default .mx_HomePage_default_buttons{margin:60px auto 0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton{padding:73px 8px 15px;width:160px;height:132px;margin:20px;position:relative;display:inline-block;border-radius:8px;vertical-align:top;word-break:break-word;-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:600;font-size:1.5rem;line-height:2rem;color:#fff;background-color:#0dbd8b}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:before{top:20px;left:60px;width:40px;height:40px;content:"";position:absolute;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_sendDm:before{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_explore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_createGroup:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg)}.mx_LeftPanel{background-color:hsla(0,0%,96.1%,.9);min-width:206px;max-width:50%;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:56px;flex-basis:56px;height:100%;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer,.mx_LeftPanel .mx_LeftPanel_roomListContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_LeftPanel .mx_LeftPanel_roomListContainer{background-color:hsla(0,0%,96.1%,.9);-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;min-width:0;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader{padding:12px;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer{overflow-y:hidden;overflow-x:scroll;margin:12px 12px 0;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_leftOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000));-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%);mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000));mask-image:linear-gradient(90deg,transparent,#000 5%)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(#000),color-stop(95%,#000),to(transparent));-webkit-mask-image:linear-gradient(90deg,#000,#000 95%,transparent);mask-image:-webkit-gradient(linear,left top,right top,from(#000),color-stop(95%,#000),to(transparent));mask-image:linear-gradient(90deg,#000,#000 95%,transparent)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000),color-stop(95%,#000),to(transparent));-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(5%,#000),color-stop(95%,#000),to(transparent));mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer{margin-left:12px;margin-right:12px;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_focused+.mx_LeftPanel_exploreButton,.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_hasQuery+.mx_LeftPanel_exploreButton{-ms-flex-preferred-size:0;flex-basis:0;margin:0;width:0}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_focused+.mx_LeftPanel_exploreButton:before,.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_hasQuery+.mx_LeftPanel_exploreButton:before{content:none}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton{width:32px;height:32px;border-radius:8px;background-color:rgba(141,151,165,.2);position:relative;margin-left:8px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton:before{content:"";position:absolute;top:8px;left:8px;width:16px;height:16px;-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#737d8c}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton.mx_LeftPanel_exploreButton_space:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListFilterCount{font-size:1.3rem;font-weight:600;margin-left:12px;margin-top:14px;margin-bottom:-4px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper{overflow:hidden;margin-top:10px;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyBottom{padding-bottom:32px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyTop{padding-top:32px}.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_actualRoomListContainer{position:relative;height:100%}.mx_LeftPanel.mx_LeftPanel_minimized{min-width:unset;width:unset!important}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer{width:68px}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton{margin-left:0;margin-top:8px;background-color:transparent}.mx_LeftPanelWidget{margin-left:8px;margin-bottom:4px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:24px;color:#8d99a5;margin-top:4px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_stickable{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:calc(100% - 16px);line-height:1.6rem;font-size:1.3rem;font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn{display:inline-block;position:relative;width:14px;height:14px;margin-right:6px}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn:before{content:"";width:18px;height:18px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer .mx_LeftPanelWidget_headerText .mx_LeftPanelWidget_collapseBtn.mx_LeftPanelWidget_collapseBtn_collapsed:before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox{position:relative;-ms-flex-direction:column;flex-direction:column;overflow:visible}.mx_LeftPanelWidget .mx_AppTileFullWidth,.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_LeftPanelWidget .mx_AppTileFullWidth{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;overflow:hidden;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-mask-image:linear-gradient(0deg,transparent,#000 4px);mask-image:linear-gradient(0deg,transparent,#000 4px)}.mx_LeftPanelWidget .mx_LeftPanelWidget_resizerHandle{cursor:ns-resize;border-radius:3px;width:unset!important;height:4px!important;position:absolute;top:-24px!important;left:calc(50% - 32px)!important;right:calc(50% - 32px)!important}.mx_LeftPanelWidget:hover .mx_LeftPanelWidget_resizerHandle{opacity:.8;background-color:#2e2f32}.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton{margin-left:8px;margin-right:7px;position:relative;width:24px;height:24px;border-radius:32px}.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton:before{content:"";width:16px;height:16px;position:absolute;top:4px;left:4px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg);background:#61708b}.mx_LeftPanelWidget_maximizeButtonTooltip{margin-top:-3px}.mx_MainSplit{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-width:0;min-height:0;height:100%}.mx_MainSplit>.mx_RightPanel_ResizeWrapper{padding:5px;margin-left:8px;height:calc(100vh - 51px)}.mx_MainSplit>.mx_RightPanel_ResizeWrapper:hover .mx_RightPanel_ResizeHandle{top:50%!important;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px!important;width:4px!important;border-radius:4px!important;background-color:#2e2f32;opacity:.8}.mx_MatrixChat_splash{position:relative;height:100%}.mx_MatrixChat_splashButtons{text-align:center;width:100%;position:absolute;bottom:30px}.mx_MatrixChat_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.mx_MatrixToolbar{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;height:40px}.mx_MatrixChat{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.mx_MatrixChat_syncError{color:#fff;background-color:#df2a8b;border-radius:5px;display:table;padding:30px;position:absolute;top:100px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.mx_MatrixChat>:not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle){background-color:#fff;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;height:100%}.mx_MatrixChat>.mx_ResizeHandle_horizontal:hover{position:relative}.mx_MatrixChat>.mx_ResizeHandle_horizontal:hover:before{position:absolute;left:6px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px;width:4px;border-radius:4px;content:" ";background-color:#2e2f32;opacity:.8}.mx_MyGroups{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_MyGroups .mx_BetaCard{margin:0 72px;max-width:760px}.mx_MyGroups .mx_RoomHeader_simpleHeader{margin-left:0}.mx_MyGroups_header{margin-left:2px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_MyGroups>:not(.mx_RoomHeader):not(.mx_BetaCard){max-width:960px;margin:40px}.mx_MyGroups_headerCard{-webkit-box-flex:1;-ms-flex:1 0 50%;flex:1 0 50%;margin-bottom:30px;min-width:400px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:13px;height:40px;width:40px;border-radius:20px;background-color:rgba(92,100,112,.2);position:relative}.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button:before{background-color:#5c6470;-webkit-mask:url(../../img/icons-create-room.817ede2.svg);mask:url(../../img/icons-create-room.817ede2.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:80%;mask-size:80%;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_MyGroups_headerCard_header{font-weight:700;margin-bottom:10px}.mx_MyGroups_headerCard_content{padding-right:15px}.mx_MyGroups_joinBox{visibility:hidden;height:0;margin:0}.mx_MyGroups_content{margin-left:2px;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto}.mx_MyGroups_scrollable{overflow-y:inherit}.mx_MyGroups_placeholder{background-color:#f7f7f7;color:#888;line-height:40rem;border-radius:10px;text-align:center}.mx_MyGroups_joinedGroups{border-top:1px solid transparent;overflow-x:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-line-pack:start;align-content:flex-start}.mx_MyGroups_joinedGroups .mx_GroupTile{min-width:300px;max-width:33%;-webkit-box-flex:1;-ms-flex:1 0 300px;flex:1 0 300px;height:75px;margin:10px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;cursor:pointer}.mx_GroupTile_avatar{cursor:-webkit-grab,-webkit-grab;cursor:grab,-webkit-grab}.mx_GroupTile_profile{margin-left:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_GroupTile_profile .mx_GroupTile_desc,.mx_GroupTile_profile .mx_GroupTile_groupId,.mx_GroupTile_profile .mx_GroupTile_name{padding-right:10px}.mx_GroupTile_profile .mx_GroupTile_name{margin:0;font-size:1.5rem}.mx_GroupTile_profile .mx_GroupTile_groupId{font-size:1.3rem;opacity:.7}.mx_GroupTile_profile .mx_GroupTile_desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:1.3rem;max-height:36px;overflow:hidden}.mx_NonUrgentToastContainer{position:absolute;bottom:30px;left:28px;z-index:101}.mx_NonUrgentToastContainer .mx_NonUrgentToastContainer_toast{padding:10px 12px;border-radius:8px;width:320px;font-size:1.3rem;margin-top:8px;background-color:#17191c;color:#fff}.mx_NotificationPanel{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_NotificationPanel .mx_RoomView_messageListWrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_NotificationPanel .mx_RoomView_MessageList{width:100%}.mx_NotificationPanel .mx_RoomView_MessageList h2{margin-left:0}.mx_NotificationPanel .mx_EventTile{word-break:break-word;position:relative;padding-bottom:18px}.mx_NotificationPanel .mx_EventTile:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection):after{position:absolute;bottom:0;left:0;right:0;background-color:#8d99a5;height:1px;opacity:.4;content:""}.mx_NotificationPanel .mx_EventTile_roomName{font-weight:700;font-size:1.4rem}.mx_NotificationPanel .mx_EventTile_roomName>*{vertical-align:middle}.mx_NotificationPanel .mx_EventTile_roomName>.mx_BaseAvatar{margin-right:8px}.mx_NotificationPanel .mx_EventTile_roomName a{color:#2e2f32}.mx_NotificationPanel .mx_EventTile_avatar{display:none}.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp,.mx_NotificationPanel .mx_EventTile .mx_SenderProfile{color:#2e2f32;font-size:1.2rem;display:inline;padding-left:0}.mx_NotificationPanel .mx_EventTile_senderDetails{padding-left:36px;position:relative}.mx_NotificationPanel .mx_EventTile_senderDetails a{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_NotificationPanel .mx_EventTile_roomName a,.mx_NotificationPanel .mx_EventTile_senderDetails a{text-decoration:none!important}.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp{visibility:visible;position:static;display:inline}.mx_NotificationPanel .mx_EventTile_line{margin-right:0;padding:0 0 0 36px}.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line{padding-left:0}.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line{background-color:#fff}.mx_NotificationPanel .mx_EventTile_content{margin-right:0}.mx_NotificationPanel_empty:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RightPanel{overflow-x:hidden;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-radius:8px;padding:4px 0;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%}.mx_RightPanel .mx_RoomView_MessageList{padding:14px 18px}.mx_RightPanel_header{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;border-bottom:1px solid transparent;-webkit-box-flex:0;-ms-flex:0 0 52px;flex:0 0 52px}.mx_RightPanel_headerButtonGroup{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;background-color:#fff;padding:0 9px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RightPanel_headerButton{cursor:pointer;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:1px;margin-right:1px;height:32px;width:32px;position:relative;border-radius:100%}.mx_RightPanel_headerButton:before{content:"";position:absolute;top:4px;left:4px;height:24px;width:24px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_RightPanel_headerButton:hover{background:rgba(13,189,139,.1)}.mx_RightPanel_headerButton:hover:before{background-color:#0dbd8b}.mx_RightPanel_notifsButton:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_roomSummaryButton:before{-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_groupMembersButton:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_roomsButton:before{-webkit-mask-image:url(../../img/element-icons/community-rooms.8f0b6c9.svg);mask-image:url(../../img/element-icons/community-rooms.8f0b6c9.svg);-webkit-mask-position:center;mask-position:center}.mx_RightPanel_headerButton_highlight:before{background-color:#0dbd8b!important}.mx_RightPanel_headerButton_badge{font-size:.8rem;border-radius:8px;color:#fff;background-color:#0dbd8b;font-weight:700;position:absolute;top:-4px;left:20px;padding:2px 4px}.mx_RightPanel_collapsebutton{-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:right;height:16px;border:none}.mx_RightPanel .mx_GroupRoomList,.mx_RightPanel .mx_MemberInfo,.mx_RightPanel .mx_MemberList,.mx_RightPanel_blank{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RightPanel .mx_RoomView_messagePanelSpinner{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin:auto}.mx_RightPanel_empty{margin-right:-28px}.mx_RightPanel_empty h2{font-weight:700;margin:16px 0}.mx_RightPanel_empty h2,.mx_RightPanel_empty p{font-size:1.4rem}.mx_RightPanel_empty:before{content:"";display:block;margin:11px auto 29px;height:42px;width:42px;background-color:#91a1c0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_RightPanel_scopeHeader{margin:24px;text-align:center;font-weight:600;font-size:1.8rem;line-height:2.2rem}.mx_RightPanel_scopeHeader .mx_BaseAvatar{margin-right:8px;vertical-align:middle}.mx_RightPanel_scopeHeader .mx_BaseAvatar_image{border-radius:8px}.mx_RoomDirectory_dialogWrapper>.mx_Dialog{max-width:960px;height:100%}.mx_RoomDirectory_dialog{height:100%;flex-direction:column}.mx_RoomDirectory,.mx_RoomDirectory_dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column}.mx_RoomDirectory{margin-bottom:12px;color:#2e2f32;word-break:break-word}.mx_RoomDirectory,.mx_RoomDirectory_list{flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_RoomDirectory_list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column}.mx_RoomDirectory_list .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_RoomDirectory_listheader{display:block;margin-top:13px}.mx_RoomDirectory_searchbox{-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important}.mx_RoomDirectory_listheader .mx_NetworkDropdown{-webkit-box-flex:0;-ms-flex:0 0 200px;flex:0 0 200px}.mx_RoomDirectory_tableWrapper{overflow-y:auto;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RoomDirectory_table{color:#2e2f32;display:grid;font-size:1.2rem;grid-template-columns:-webkit-max-content auto -webkit-max-content -webkit-max-content -webkit-max-content;grid-template-columns:max-content auto max-content max-content max-content;grid-row-gap:24px;row-gap:24px;text-align:left;width:100%}.mx_RoomDirectory_roomAvatar{padding:2px 14px 0 0}.mx_RoomDirectory_roomMemberCount{-ms-flex-item-align:center;align-self:center;color:#747474;padding:3px 10px 0}.mx_RoomDirectory_roomMemberCount:before{background-color:#747474;display:inline-block;vertical-align:text-top;margin-right:2px;content:"";-webkit-mask:url(../../img/feather-customised/user.7a4d23d.svg);mask:url(../../img/feather-customised/user.7a4d23d.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:80%;mask-size:80%;width:16px;height:16px}.mx_RoomDirectory_join,.mx_RoomDirectory_preview{-ms-flex-item-align:center;align-self:center;white-space:nowrap}.mx_RoomDirectory_name{display:inline-block;font-size:1.8rem;font-weight:600}.mx_RoomDirectory_perms{display:inline-block}.mx_RoomDirectory_perm{border-radius:10px;display:inline-block;height:20px;line-height:2rem;padding:0 5px;color:#fff;background-color:#aaa}.mx_RoomDirectory_topic{cursor:auto;color:#747474;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.mx_RoomDirectory_alias{font-size:1.2rem;color:#a2a2a2}.mx_RoomDirectory_table tr{padding-bottom:10px;cursor:pointer}.mx_RoomDirectory .mx_RoomView_MessageList{padding:0}.mx_RoomDirectory>span{font-size:1.5rem;margin-top:0}.mx_RoomDirectory>span .mx_AccessibleButton{padding:0}.mx_RoomSearch{-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:8px;background-color:rgba(141,151,165,.2);border:1px solid transparent;height:28px;padding:1px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSearch .mx_RoomSearch_icon{width:16px;height:16px;-webkit-mask:url(../../img/element-icons/roomlist/search.3774248.svg);mask:url(../../img/element-icons/roomlist/search.3774248.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#737d8c;margin-left:7px}.mx_RoomSearch .mx_RoomSearch_input{border:none!important;-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important;color:#2e2f32!important;padding:0;height:100%;width:100%;font-size:1.2rem;line-height:1.6rem}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-webkit-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-moz-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded):-ms-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-ms-input-placeholder{color:#8d99a5!important}.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::placeholder{color:#8d99a5!important}.mx_RoomSearch.mx_RoomSearch_hasQuery{border-color:#737d8c}.mx_RoomSearch.mx_RoomSearch_focused{-webkit-box-shadow:0 0 4px 4px rgba(0,132,255,.5);box-shadow:0 0 4px 4px rgba(0,132,255,.5);border-color:transparent}.mx_RoomSearch.mx_RoomSearch_focused,.mx_RoomSearch.mx_RoomSearch_hasQuery{background-color:#fff}.mx_RoomSearch.mx_RoomSearch_focused .mx_RoomSearch_clearButton,.mx_RoomSearch.mx_RoomSearch_hasQuery .mx_RoomSearch_clearButton{width:16px;height:16px;-webkit-mask-image:url(../../img/element-icons/roomlist/search-clear.6164d97.svg);mask-image:url(../../img/element-icons/roomlist/search-clear.6164d97.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#737d8c;margin-right:8px}.mx_RoomSearch .mx_RoomSearch_clearButton{width:0;height:0}.mx_RoomSearch.mx_RoomSearch_minimized{border-radius:32px;height:auto;width:auto;padding:8px}.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_icon{margin-left:0}.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages){margin-left:65px;min-height:50px}.mx_RoomStatusBar_typingIndicatorAvatars{width:52px;margin-top:-1px;text-align:left}.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image{margin-right:-12px;border:1px solid #fff}.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial{padding-left:1px;padding-top:1px}.mx_RoomStatusBar_typingIndicatorRemaining{display:inline-block;color:#acacac;background-color:#ddd;border:1px solid #fff;border-radius:40px;width:24px;height:24px;line-height:2.4rem;font-size:.8em;vertical-align:top;text-align:center;position:absolute}.mx_RoomStatusBar_scrollDownIndicator{cursor:pointer;padding-left:1px}.mx_RoomStatusBar_unreadMessagesBar{padding-top:10px;color:#ff4b55;cursor:pointer}.mx_RoomStatusBar_connectionLostBar{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:19px;min-height:58px}.mx_RoomStatusBar_unsentMessages>div[role=alert]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:70px;margin:12px;padding-left:16px;background-color:#f3f8fd;border-radius:4px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge{margin-right:12px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge{width:24px!important;height:24px!important;border-radius:24px!important}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge .mx_NotificationBadge_count{font-size:1.6rem!important}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentTitle{color:#ff4b55;font-size:1.5rem}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentDescription{font-size:1.2rem}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right;margin-right:22px;color:#61708b}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton{padding:5px 10px 5px 28px;display:inline-block;position:relative}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:nth-child(2){border-left:1px solid #e3e8f0}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:before{content:"";position:absolute;left:10px;background-color:#61708b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentCancelAllBtn:before{-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);width:12px;height:16px;top:calc(50% - 8px)}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn{padding-left:34px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn:before{-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg);width:18px;height:18px;top:calc(50% - 9px)}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner{vertical-align:middle;margin-right:5px;top:1px}.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner+span{margin-right:10px}.mx_RoomStatusBar_connectionLostBar img{padding-left:10px;padding-right:10px;vertical-align:middle;float:left}.mx_RoomStatusBar_connectionLostBar_title{color:#ff4b55}.mx_RoomStatusBar_connectionLostBar_desc{color:#2e2f32;font-size:1.3rem;opacity:.5;padding-bottom:20px}.mx_RoomStatusBar_resend_link{color:#2e2f32!important;text-decoration:underline!important;cursor:pointer}.mx_RoomStatusBar_typingBar{height:50px;line-height:5rem;color:#2e2f32;opacity:.5;overflow-y:hidden;display:block}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages){min-height:40px}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_indicator{margin-top:10px}.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_typingBar{height:40px;line-height:4rem}.mx_RoomView{word-wrap:break-word;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@-webkit-keyframes mx_RoomView_fileDropTarget_animation{0%{opacity:0}to{opacity:.95}}@keyframes mx_RoomView_fileDropTarget_animation{0%{opacity:0}to{opacity:.95}}.mx_RoomView_fileDropTarget{min-width:0;width:100%;height:100%;font-size:1.8rem;text-align:center;pointer-events:none;background-color:#fff;opacity:.95;position:absolute;z-index:3000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-animation:mx_RoomView_fileDropTarget_animation;animation:mx_RoomView_fileDropTarget_animation;-webkit-animation-duration:.5s;animation-duration:.5s}@-webkit-keyframes mx_RoomView_fileDropTarget_image_animation{0%{width:0}to{width:32px}}@keyframes mx_RoomView_fileDropTarget_image_animation{0%{width:0}to{width:32px}}.mx_RoomView_fileDropTarget_image{-webkit-animation:mx_RoomView_fileDropTarget_image_animation;animation:mx_RoomView_fileDropTarget_image_animation;-webkit-animation-duration:.5s;animation-duration:.5s;margin-bottom:16px}.mx_RoomView_auxPanel{min-width:0;width:100%;margin:0 auto;overflow:auto;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomView_auxPanel_fullHeight{position:absolute;top:0;bottom:0;left:0;right:0;z-index:3000;background-color:#fff}.mx_RoomView_auxPanel_hiddenHighlights{border-bottom:1px solid transparent;padding:10px 26px;color:#ff4b55;cursor:pointer}.mx_RoomView_auxPanel_apps{max-width:1920px!important}.mx_RoomView .mx_MainSplit,.mx_RoomView_messagePanel{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_RoomView_messagePanel{width:100%;overflow-y:auto;overflow-anchor:none}.mx_RoomView_messagePanelSearchSpinner{-webkit-box-flex:1;-ms-flex:1;flex:1;background-image:url(../../img/typing-indicator-2x.0eb9f0e.gif);background-position:center 367px;background-size:25px;background-repeat:no-repeat;position:relative}.mx_RoomView_messagePanelSearchSpinner:before{background-color:#888;-webkit-mask:url(../../img/feather-customised/search-input.044bfa7.svg);mask:url(../../img/feather-customised/search-input.044bfa7.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:50px;mask-size:50px;content:"";position:absolute;top:286px;left:0;right:0;height:50px}.mx_RoomView_body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_RoomView_body .mx_RoomView_messagePanel,.mx_RoomView_body .mx_RoomView_messagePanelSearchSpinner,.mx_RoomView_body .mx_RoomView_messagePanelSpinner{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.mx_RoomView_body .mx_RoomView_timeline{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomView_statusArea{width:100%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;max-height:0;background-color:#fff;z-index:1000;overflow:hidden;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.mx_RoomView_statusArea_expanded{max-height:100px}.mx_RoomView_statusAreaBox{margin:auto;min-height:50px}.mx_RoomView_statusAreaBox_line{margin-left:65px;border-top:1px solid transparent;height:1px}.mx_RoomView_messageListWrapper{min-height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_RoomView_searchResultsPanel a{text-decoration:none;color:inherit}.mx_RoomView_empty{font-size:1.3rem;padding:0 24px;margin-right:30px;text-align:center;margin-bottom:80px}.mx_RoomView_MessageList{list-style-type:none;padding:18px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_RoomView_MessageList li{clear:both}li.mx_RoomView_myReadMarker_container{height:0;margin:0;padding:0;border:0}hr.mx_RoomView_myReadMarker{border-top:1px solid #0dbd8b;border-bottom:1px solid #0dbd8b;margin-top:0;position:relative;top:-1px;z-index:1;-webkit-transition:width easeinsine .4s 1s,opacity easeinsine .4s 1s;transition:width easeinsine .4s 1s,opacity easeinsine .4s 1s;width:99%;opacity:1}.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner{background-color:#fff}.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename{color:#fff;opacity:1}.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line{margin-top:2px;border:none;height:0}.mx_RoomView_inCall .mx_MessageComposer_wrapper{border-top:2px hidden;padding-top:1px}.mx_RoomView_voipChevron{position:absolute;bottom:-11px;right:11px}.mx_RoomView_voipButton{float:right;margin-right:13px;margin-top:13px;cursor:pointer}.mx_RoomView_voipButton object{pointer-events:none}.mx_RoomView .mx_MessageComposer{width:100%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:2px}.mx_RoomView_ongoingConfCallNotification{width:100%;text-align:center;background-color:#ff4b55;color:#fff;font-weight:700;padding:6px 0;cursor:pointer}.mx_RoomView_ongoingConfCallNotification a{color:#fff!important}.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList{margin-bottom:4px}.mx_MatrixChat_useCompactLayout .mx_RoomView_statusAreaBox{min-height:42px}.mx_ScrollPanel .mx_RoomView_MessageList{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_SearchBox{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0}.mx_SearchBox.mx_SearchBox_blurred:not(:hover){background-color:transparent}.mx_SearchBox .mx_SearchBox_closeButton{cursor:pointer;background-image:url(../../img/icons-close.11ff07c.svg);background-repeat:no-repeat;width:16px;height:16px;background-position:50%;padding:9px}.mx_SpacePanel{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;background-color:hsla(0,0%,91%,.77);padding:0;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto}.mx_SpacePanel .mx_SpacePanel_spaceTreeWrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:8px 8px 16px 0}.mx_SpacePanel .mx_SpacePanel_toggleCollapse{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:40px;height:40px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:32px;mask-size:32px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;margin-left:16px;margin-bottom:12px;background-color:#8d99a5;-webkit-mask-image:url(../../img/element-icons/expand-space-panel.e6f74b9.svg);mask-image:url(../../img/element-icons/expand-space-panel.e6f74b9.svg)}.mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.mx_SpacePanel ul{margin:0;list-style:none;padding:0}.mx_SpacePanel ul>.mx_SpaceItem{padding-left:16px}.mx_SpacePanel .mx_SpaceButton_toggleCollapse{cursor:pointer}.mx_SpacePanel .mx_SpaceTreeLevel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:250px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_SpacePanel .mx_SpaceItem{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:wrap;flex-flow:wrap}.mx_SpacePanel .mx_SpaceItem.mx_SpaceItem_narrow{-ms-flex-item-align:baseline;align-self:baseline}.mx_SpacePanel .mx_SpaceItem.collapsed>.mx_SpaceButton>.mx_SpaceButton_toggleCollapse{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_SpacePanel .mx_SpaceItem.collapsed>.mx_SpaceTreeLevel{display:none}.mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces)>.mx_SpaceButton{margin-left:16px;min-width:40px}.mx_SpacePanel .mx_SpaceButton{border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:4px 4px 4px 0;width:100%}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper{background-color:#fff}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper{padding:1px;border:3px solid #737d8c}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:12px;padding:4px}.mx_SpacePanel .mx_SpaceButton:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper{width:100%;padding-right:16px;overflow:hidden}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:8px;white-space:nowrap;display:block;text-overflow:ellipsis;overflow:hidden;padding-right:8px;font-size:1.4rem;line-height:1.8rem}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse{width:16px;height:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon{width:32px;min-width:32px;height:32px;border-radius:8px;position:relative}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon:before{position:absolute;content:"";width:32px;height:32px;top:0;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:18px;mask-size:18px}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon{background-color:#fff}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon:before{background-color:#3f3d3d;-webkit-mask-image:url(../../img/element-icons/home.b706c0e.svg);mask-image:url(../../img/element-icons/home.b706c0e.svg)}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon{background-color:#0dbd8b;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon:before{background-color:#fff;-webkit-mask-image:url(../../img/element-icons/plus.62cc275.svg);mask-image:url(../../img/element-icons/plus.62cc275.svg);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon{background-color:#c1c6cd}.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.mx_SpacePanel .mx_SpaceButton .mx_BaseAvatar_image{border-radius:8px}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton{width:20px;min-width:20px;height:20px;margin-top:auto;margin-bottom:auto;display:none;position:absolute;right:4px}.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton:before{top:2px;left:2px;content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);background:#2e2f32}.mx_SpacePanel .mx_SpacePanel_badgeContainer{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge{margin:0 2px}.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot{margin:0 7px}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer{right:0;top:0}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge{background-clip:padding-box}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot{margin:0 -1px 0 0;border:3px solid hsla(0,0%,91%,.77)}.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_2char,.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer .mx_NotificationBadge_3char{margin:-5px -5px 0 0;border:2px solid hsla(0,0%,91%,.77)}.mx_SpacePanel.collapsed .mx_SpaceButton.mx_SpaceButton_active .mx_SpacePanel_badgeContainer{right:-3px;top:-3px}.mx_SpacePanel:not(.collapsed) .mx_SpacePanel_badgeContainer{position:absolute;right:4px}.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpacePanel_badgeContainer{width:0;height:0;display:none}.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton,.mx_SpacePanel:not(.collapsed) .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton{display:block}.mx_SpacePanel>.mx_AutoHideScrollbar>.mx_SpaceButton,.mx_SpacePanel>.mx_AutoHideScrollbar>.mx_SpaceButton.mx_SpaceButton_active:before{height:32px}.mx_SpacePanel>.mx_AutoHideScrollbar>ul{padding-left:0}.mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_header{margin:12px 16px;font-weight:600;font-size:1.5rem;line-height:1.8rem}.mx_SpacePanel_contextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton{color:#0dbd8b}.mx_SpacePanel_contextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton .mx_SpacePanel_iconInvite:before{background-color:#0dbd8b;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconLeave:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconMembers:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconPlus:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconHash:before{-webkit-mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg)}.mx_SpacePanel_contextMenu .mx_SpacePanel_iconExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_SpacePanel_sharePublicSpace{margin:0}.mx_SpaceRoomDirectory_dialogWrapper>.mx_Dialog{max-width:960px;height:100%}.mx_SpaceRoomDirectory{height:100%;margin-bottom:12px;color:#2e2f32;word-break:break-word;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_SpaceRoomDirectory,.mx_SpaceRoomDirectory .mx_Dialog_title,.mx_SpaceRoomView_landing .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar,.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar{margin-right:12px;-ms-flex-item-align:center;align-self:center}.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar_image,.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar_image{border-radius:8px}.mx_SpaceRoomDirectory .mx_Dialog_title>div>h1,.mx_SpaceRoomView_landing .mx_Dialog_title>div>h1{font-weight:600;font-size:1.8rem;line-height:2.2rem;margin:0}.mx_SpaceRoomDirectory .mx_Dialog_title>div>div,.mx_SpaceRoomView_landing .mx_Dialog_title>div>div{font-weight:400;color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_SpaceRoomDirectory .mx_AccessibleButton_kind_link,.mx_SpaceRoomView_landing .mx_AccessibleButton_kind_link{padding:0}.mx_SpaceRoomDirectory .mx_SearchBox,.mx_SpaceRoomView_landing .mx_SearchBox{margin:24px 0 16px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults{text-align:center}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults>div,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults>div{font-size:1.5rem;line-height:2.4rem;color:#737d8c}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:32px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.5rem;line-height:2.4rem;color:#2e2f32}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton{padding:4px 12px;font-weight:400}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton+.mx_AccessibleButton,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton+.mx_AccessibleButton{margin-left:16px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_primary_outline,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton_kind_primary_outline{padding:3px 12px}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader>span,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader>span{margin-left:auto}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error{position:relative;font-weight:600;color:#ff4b55;font-size:1.5rem;line-height:1.8rem;margin:20px auto 12px;padding-left:24px;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error:before,.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error:before{content:"";position:absolute;height:16px;width:16px;left:0;background-image:url(../../img/element-icons/warning-badge.de1033e.svg)}.mx_SpaceRoomDirectory_list{margin-top:16px;padding-bottom:40px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount>h3{display:inline;font-weight:600;font-size:1.8rem;line-height:2.2rem;color:#2e2f32}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount>span{margin-left:8px;font-size:1.5rem;line-height:2.4rem;color:#737d8c}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace .mx_BaseAvatar_image{border-radius:8px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle{position:absolute;left:-1px;top:10px;height:16px;width:16px;border-radius:4px;background-color:#fff}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle:before{content:"";position:absolute;top:0;left:0;height:16px;width:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#8d99a5;-webkit-mask-size:16px;mask-size:16px;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle.mx_SpaceRoomDirectory_subspace_toggle_shown:before{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children{position:relative;padding-left:12px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile{position:relative;padding:8px 16px;border-radius:8px;min-height:56px;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:20px auto -webkit-max-content;grid-template-columns:20px auto max-content;grid-column-gap:8px;grid-row-gap:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_BaseAvatar{grid-row:1;grid-column:1}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name{font-weight:600;font-size:1.5rem;line-height:1.8rem;grid-row:1;grid-column:2}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip{display:inline;margin-left:12px;color:#8d99a5;font-size:1.2rem;line-height:1.5rem}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon{margin-right:4px;position:relative;vertical-align:text-top}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon:before{position:absolute;top:0;left:0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_roomTile_info{font-size:1.4rem;line-height:1.8rem;color:#737d8c;grid-row:2;grid-column:1/3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions{text-align:right;margin-left:20px;grid-column:3;grid-row:1/3}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton{line-height:2.4rem;padding:4px 16px;display:inline-block;visibility:hidden}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton_kind_danger_outline,.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_AccessibleButton_kind_primary_outline{padding:3px 16px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_SpaceRoomDirectory_actions .mx_Checkbox{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;margin-left:12px}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover{background-color:hsla(0,0%,91%,.77)}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover .mx_AccessibleButton{visibility:visible}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:before,.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children:before{content:"";position:absolute;background-color:hsla(0,0%,91%,.77);width:1px;height:100%;left:6px;top:0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_actions .mx_SpaceRoomDirectory_actionsText{font-weight:400;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_SpaceRoomDirectory_list>hr{border:none;height:1px;background-color:rgba(141,151,165,.2);margin:20px 0}.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_createRoom{display:block;margin:16px auto 0;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomView .mx_MainSplit>div:first-child{padding:80px 60px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-height:100%;overflow-y:auto}.mx_SpaceRoomView .mx_MainSplit>div:first-child h1{margin:0;font-size:2.4rem;font-weight:600;color:#2e2f32;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_description{font-size:1.5rem;color:#737d8c;margin-top:12px;margin-bottom:24px;max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AddExistingToSpace{max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AddExistingToSpace .mx_AddExistingToSpace_content{height:calc(100vh - 360px);max-height:400px}.mx_SpaceRoomView .mx_MainSplit>div:first-child:not(.mx_SpaceRoomView_landing) .mx_SpaceFeedbackPrompt{width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons{display:block;margin-top:44px;width:428px;text-align:right}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons .mx_AccessibleButton_hasKind{padding:8px 22px;margin-left:16px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_buttons input.mx_AccessibleButton{border:none}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_Field{max-width:428px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_Field+.mx_Field{margin-top:28px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_SpaceRoomView_errorText{font-weight:600;font-size:1.2rem;line-height:1.5rem;color:#ff4b55;margin-bottom:28px}.mx_SpaceRoomView .mx_MainSplit>div:first-child .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpaceRoomView .mx_SpaceRoomView_preview{padding:32px 24px!important;margin:auto;max-width:480px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:2px 15px 30px rgba(0,0,0,.48);box-shadow:2px 15px 30px rgba(0,0,0,.48);border-radius:8px;position:relative}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_BetaCard_betaPill{position:absolute;right:24px;top:32px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt{font-weight:600;font-size:1.4rem;line-height:2.4rem;color:#2e2f32;margin-top:24px;position:relative;padding-left:24px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt .mx_AccessibleButton_kind_link{display:inline;padding:0;font-size:inherit;line-height:inherit}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_spaceBetaPrompt:before{content:"";position:absolute;height:2.4rem;width:20px;left:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);background-color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:20px;font-size:1.5rem}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div{margin-left:8px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div .mx_SpaceRoomView_preview_inviter_name{line-height:1.8rem}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter>div .mx_SpaceRoomView_preview_inviter_mxid{line-height:2.4rem;color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_preview>.mx_BaseAvatar>.mx_BaseAvatar_image,.mx_SpaceRoomView .mx_SpaceRoomView_preview>.mx_BaseAvatar_image{border-radius:12px}.mx_SpaceRoomView .mx_SpaceRoomView_preview h1.mx_SpaceRoomView_preview_name{margin:20px 0!important}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_topic{font-size:1.4rem;line-height:2.2rem;color:#737d8c;margin:20px 0;max-height:160px;overflow-y:auto}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons{margin-top:20px}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons .mx_AccessibleButton{width:200px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:14px 0}.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_joinButtons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:20px}.mx_SpaceRoomView .mx_SpaceRoomView_landing>.mx_BaseAvatar>.mx_BaseAvatar_image,.mx_SpaceRoomView .mx_SpaceRoomView_landing>.mx_BaseAvatar_image{border-radius:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name{margin:24px 0 16px;font-size:1.5rem;color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name>span{display:inline-block}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_nameRow{margin-top:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_nameRow>h1{display:inline-block}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_inviter .mx_BaseAvatar{margin-right:4px;vertical-align:middle}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_info{display:inline-block;margin:0 auto 0 0}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_FacePile{display:inline-block;margin-right:12px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_FacePile .mx_FacePile_faces{cursor:pointer}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_inviteButton{position:relative;padding:4px 18px 4px 40px;line-height:2.4rem;height:-webkit-min-content;height:-moz-min-content;height:min-content}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_inviteButton:before{position:absolute;content:"";left:8px;height:16px;width:16px;background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_settingsButton{position:relative;margin-left:16px;width:24px;height:24px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info .mx_SpaceRoomView_landing_settingsButton:before{position:absolute;content:"";left:0;top:0;height:24px;width:24px;background:#8d99a5;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_topic{font-size:1.5rem;margin-top:12px;margin-bottom:16px}.mx_SpaceRoomView .mx_SpaceRoomView_landing>hr{border:none;height:1px;background-color:hsla(0,0%,91%,.77)}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SearchBox{margin:0 0 20px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt{margin-bottom:16px}.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt+hr{display:none}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton>h3{font-weight:600;margin:0 0 4px}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton>span{color:#737d8c}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover{border-color:#0dbd8b}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover:before{background-color:#0dbd8b}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope>.mx_AccessibleButton:hover>span{color:#2e2f32}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_justMeButton:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton:before{-webkit-mask-image:url(../../img/element-icons/community-members.cbb31c1.svg);mask-image:url(../../img/element-icons/community-members.cbb31c1.svg)}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_betaDisclaimer{padding:58px 16px 16px;position:relative;border-radius:8px;background-color:#f3f8fd;max-width:428px;margin:20px 0 30px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_betaDisclaimer .mx_BetaCard_betaPill{position:absolute;left:16px;top:16px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons{color:#737d8c;margin-top:28px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton{position:relative;display:inline-block;padding-left:32px;line-height:24px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton:before{content:"";position:absolute;height:24px;width:24px;top:0;left:0;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:32px}.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_SpaceRoomView_inviteTeammates_inviteDialogButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_SpaceRoomView_info{color:#737d8c;font-size:1.5rem;line-height:2.4rem;margin:20px 0}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private,.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public{padding-left:20px;position:relative}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before,.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before{position:absolute;content:"";width:20px;height:20px;top:0;left:-2px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before{-webkit-mask-size:12px;mask-size:12px;-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before{-webkit-mask-size:14px;mask-size:14px;-webkit-mask-image:url(../../img/element-icons/lock.1f264bd.svg);mask-image:url(../../img/element-icons/lock.1f264bd.svg)}.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link{color:inherit;position:relative;padding-left:16px}.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link:before{content:"·";position:absolute;left:6px}.mx_SpaceFeedbackPrompt{margin-top:18px;margin-bottom:12px}.mx_SpaceFeedbackPrompt>hr{border:none;border-top:1px solid #e7e7e7;margin-bottom:12px}.mx_SpaceFeedbackPrompt>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-size:1.5rem;line-height:2.4rem}.mx_SpaceFeedbackPrompt>div>span{color:#737d8c;position:relative;padding-left:32px;font-size:inherit;line-height:inherit;margin-right:auto}.mx_SpaceFeedbackPrompt>div>span:before{content:"";position:absolute;left:0;top:2px;height:20px;width:20px;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_SpaceFeedbackPrompt>div .mx_AccessibleButton_kind_link{color:#0dbd8b;position:relative;padding:0 0 0 24px;margin-left:8px;font-size:inherit;line-height:inherit}.mx_SpaceFeedbackPrompt>div .mx_AccessibleButton_kind_link:before{content:"";position:absolute;left:0;height:16px;width:16px;background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);-webkit-mask-position:center;mask-position:center}.mx_TabbedView{padding:0 0 0 16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;top:0;bottom:0;left:0;right:0;margin:8px 0 0}.mx_TabbedView_tabLabels{width:170px;max-width:170px;color:#45474a;position:fixed}.mx_TabbedView_tabLabel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:text-top;cursor:pointer;padding:8px 0;border-radius:8px;font-size:1.3rem;position:relative}.mx_TabbedView_tabLabel_active{background-color:#0dbd8b;color:#fff}.mx_TabbedView_maskedIcon{margin-left:8px;margin-right:16px;width:16px;height:16px;display:inline-block}.mx_TabbedView_maskedIcon:before{display:inline-block;background-color:#454545;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px;width:16px;height:16px;-webkit-mask-position:center;mask-position:center;content:""}.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before{background-color:#fff}.mx_TabbedView_tabLabel_text{vertical-align:middle}.mx_TabbedView_tabPanel{margin-left:240px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_TabbedView_tabPanel,.mx_TabbedView_tabPanelContent{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-height:0}.mx_TabbedView_tabPanelContent{overflow:auto}.mx_ToastContainer{position:absolute;top:0;left:70px;z-index:101;padding:4px;display:grid;grid-template-rows:1fr 14px 6px}.mx_ToastContainer.mx_ToastContainer_stacked:before{content:"";margin:0 4px;grid-row:2/4}.mx_ToastContainer .mx_Toast_toast,.mx_ToastContainer.mx_ToastContainer_stacked:before{grid-column:1;background-color:#f2f5f8;-webkit-box-shadow:0 4px 20px rgba(0,0,0,.5);box-shadow:0 4px 20px rgba(0,0,0,.5);border-radius:8px}.mx_ToastContainer .mx_Toast_toast{grid-row:1/3;color:#2e2f32;overflow:hidden;display:grid;grid-template-columns:22px 1fr;grid-column-gap:8px;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;grid-row-gap:4px;row-gap:4px;padding:8px}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:after,.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:before{content:"";width:22px;height:22px;grid-column:1;grid-row:1;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-size:100%;background-repeat:no-repeat}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#2e2f32}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:before{background-color:#fff;-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);-webkit-mask-size:90%;mask-size:90%}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_secure_backup:after{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);background-color:#2e2f32}.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_body,.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_title{grid-column:2}.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon){padding-left:12px}.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) .mx_Toast_title{grid-column:1/-1}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description,.mx_ToastContainer .mx_Toast_toast .mx_Toast_title{padding-right:8px}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2{grid-column:1/3;grid-row:1;margin:0;font-size:1.5rem;font-weight:600;display:inline;width:auto;vertical-align:middle}.mx_ToastContainer .mx_Toast_toast .mx_Toast_title span{padding-left:8px;float:right;font-size:1.2rem;line-height:2.2rem;color:#61708b}.mx_ToastContainer .mx_Toast_toast .mx_Toast_body{grid-column:1/3;grid-row:2}.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons{float:right;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_FormButton{min-width:96px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description{max-width:272px;overflow:hidden;text-overflow:ellipsis;margin:4px 0 11px;font-size:1.2rem}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description .mx_AccessibleButton_kind_link{font-size:inherit;padding:0}.mx_ToastContainer .mx_Toast_toast .mx_Toast_description a{text-decoration:none}.mx_ToastContainer .mx_Toast_toast .mx_Toast_detail{color:#737d8c}.mx_ToastContainer .mx_Toast_toast .mx_Toast_deviceID{font-size:1rem}.mx_UploadBar{padding-left:65px;position:relative}.mx_UploadBar .mx_ProgressBar{width:calc(100% - 40px)}.mx_UploadBar_filename{margin-top:5px;color:#61708b;position:relative;padding-left:22px;font-size:1.5rem;vertical-align:middle}.mx_UploadBar_filename:before{content:"";height:18px;width:18px;left:0;-webkit-mask-image:url(../../img/element-icons/upload.e2a53e0.svg);mask-image:url(../../img/element-icons/upload.e2a53e0.svg)}.mx_UploadBar_cancel,.mx_UploadBar_filename:before{position:absolute;top:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#61708b}.mx_UploadBar_cancel{right:0;height:16px;width:16px;margin-right:16px;-webkit-mask-image:url(../../img/icons-close.11ff07c.svg);mask-image:url(../../img/icons-close.11ff07c.svg)}.mx_UserMenu{padding-right:6px}.mx_UserMenu.mx_UserMenu_prototype{margin-bottom:6px;padding-right:0}.mx_UserMenu.mx_UserMenu_prototype .mx_UserMenu_headerButtons{margin-right:2px}.mx_UserMenu.mx_UserMenu_prototype:after{content:"";border-bottom:1px solid #2e2f32;opacity:.2;display:block;padding-top:8px}.mx_UserMenu .mx_UserMenu_headerButtons{width:16px;height:16px;position:relative;display:block}.mx_UserMenu .mx_UserMenu_headerButtons:before{content:"";width:16px;height:16px;position:absolute;top:0;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_UserMenu .mx_UserMenu_row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer{position:relative;margin-right:8px;height:32px;padding:3px 0}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer .mx_UserMenu_userAvatar{border-radius:32px;-o-object-fit:cover;object-fit:cover}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName,.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_userName{display:block}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName{color:#61708b;font-size:1.3rem;line-height:1.8rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userName{font-weight:600;font-size:1.5rem;line-height:2rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd{width:24px;height:24px;margin-right:8px;position:relative}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd:before{content:"";position:absolute;width:24px;height:24px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#61708b}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_noisy:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_muted:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg)}.mx_UserMenu.mx_UserMenu_minimized{padding-right:0}.mx_UserMenu.mx_UserMenu_minimized .mx_UserMenu_userAvatarContainer{margin-right:0}.mx_UserMenu_contextMenu{width:258px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype{padding-bottom:16px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype .mx_UserMenu_contextMenu_header{padding-bottom:0;padding-top:16px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype .mx_UserMenu_contextMenu_header:nth-child(n+2){padding-top:8px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype hr{width:85%;opacity:.2;border:none;border-bottom:1px solid #2e2f32}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList{margin-top:4px}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList:before{border:none}.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu>.mx_IconizedContextMenu_optionList>.mx_AccessibleButton{padding-top:2px;padding-bottom:2px}.mx_UserMenu_contextMenu.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton{padding-top:16px;padding-bottom:16px}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header{padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:calc(100% - 40px)}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name *{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_displayName{font-weight:700;font-size:1.5rem;line-height:2rem}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_userId{font-size:1.5rem;line-height:2.4rem}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_themeButton{min-width:32px;max-width:32px;width:32px;height:32px;margin-left:8px;border-radius:32px;background-color:#e3e8f0;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts,.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_hostingLink{padding-top:0}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts{display:inline-block}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts>span{font-weight:600;display:block}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts>span+span{margin-top:8px}.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts .mx_AccessibleButton_kind_link{font-weight:400;font-size:inherit;padding:0}.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon{width:16px;height:16px;display:block}.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon:before{content:"";width:16px;height:16px;display:block;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_UserMenu_contextMenu .mx_UserMenu_iconHome:before{-webkit-mask-image:url(../../img/element-icons/roomlist/home.1b4edd5.svg);mask-image:url(../../img/element-icons/roomlist/home.1b4edd5.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconHosting:before{-webkit-mask-image:url(../../img/element-icons/brands/element.182040d.svg);mask-image:url(../../img/element-icons/brands/element.182040d.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconBell:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconLock:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconArchive:before{-webkit-mask-image:url(../../img/element-icons/roomlist/archived.226584d.svg);mask-image:url(../../img/element-icons/roomlist/archived.226584d.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconMessage:before{-webkit-mask-image:url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);mask-image:url(../../img/element-icons/roomlist/feedback.b9a3f53.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconSignOut:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconMembers:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_UserMenu_contextMenu .mx_UserMenu_iconInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_ViewSource_separator{clear:both;border-bottom:1px solid #e5e5e5;padding-top:.7em;padding-bottom:.7em}.mx_ViewSource_heading{font-size:1.7rem;font-weight:400;color:#2e2f32;margin-top:.7em}.mx_ViewSource pre{text-align:left;font-size:1.2rem;padding:.5em 1em;word-wrap:break-word;white-space:pre-wrap}.mx_ViewSource_details{margin-top:.8em}.mx_CompleteSecurity_header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CompleteSecurity_headerIcon{width:24px;height:24px;margin-right:4px;position:relative}.mx_CompleteSecurity_heroIcon{width:128px;height:128px;position:relative;margin:0 auto}.mx_CompleteSecurity_body{font-size:1.5rem}.mx_CompleteSecurity_waiting{color:#8d99a5}.mx_CompleteSecurity_actionRow{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:2.8rem}.mx_CompleteSecurity_actionRow .mx_AccessibleButton{-webkit-margin-start:18px;margin-inline-start:18px}.mx_CompleteSecurity_actionRow .mx_AccessibleButton.warning{color:#ff4b55}.mx_Login_submit{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;width:100%;margin-top:24px;margin-bottom:24px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center}.mx_Login_submit:disabled{opacity:.3;cursor:default}.mx_Login_loader{display:inline;position:relative;top:2px;left:8px}.mx_Login_loader .mx_Spinner{display:inline}.mx_Login_loader .mx_Spinner img{width:16px;height:16px}.mx_Login_error{color:#ff4b55;font-weight:700;text-align:center;margin-top:12px;margin-bottom:12px}.mx_Login_error.mx_Login_serverError{text-align:left;font-weight:400}.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal{color:#ff8d13}.mx_Login_type_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#232f32}.mx_Login_type_container .mx_Field{margin:0}.mx_Login_type_label{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_Login_underlinedServerName{width:-webkit-max-content;width:-moz-max-content;width:max-content;border-bottom:1px dashed #0dbd8b}div.mx_AccessibleButton_kind_link.mx_Login_forgot{display:block;margin:0 auto;font-size:inherit;padding:0}div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_AuthBody{width:500px;font-size:1.2rem;color:#61708b;background-color:#fff;border-radius:0 4px 4px 0;padding:25px 60px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AuthBody h2{font-size:2.4rem;font-weight:600;margin-top:8px;color:#232f32}.mx_AuthBody h3{font-size:1.4rem;font-weight:600;color:#61708b}.mx_AuthBody h3.mx_AuthBody_centered{text-align:center}.mx_AuthBody a:hover,.mx_AuthBody a:link,.mx_AuthBody a:visited{color:#0dbd8b;text-decoration:none}.mx_AuthBody input[type=password],.mx_AuthBody input[type=text]{color:#232f32}.mx_AuthBody .mx_Field input,.mx_AuthBody .mx_Field select{color:#232f32;background-color:#fff}.mx_AuthBody .mx_Field label{color:#232f32}.mx_AuthBody .mx_Field input:not(:-moz-placeholder-shown)+label,.mx_AuthBody .mx_Field textarea:not(:-moz-placeholder-shown)+label{background-color:#fff}.mx_AuthBody .mx_Field input:not(:-ms-input-placeholder)+label,.mx_AuthBody .mx_Field textarea:not(:-ms-input-placeholder)+label{background-color:#fff}.mx_AuthBody .mx_Field_labelAlwaysTopLeft label,.mx_AuthBody .mx_Field input:focus+label,.mx_AuthBody .mx_Field input:not(:placeholder-shown)+label,.mx_AuthBody .mx_Field select+label,.mx_AuthBody .mx_Field textarea:focus+label,.mx_AuthBody .mx_Field textarea:not(:placeholder-shown)+label{background-color:#fff}.mx_AuthBody input.error{color:#ff4b55}.mx_AuthBody .mx_Field input{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AuthBody .mx_Field_select:before{background-color:#232f32}.mx_AuthBody .mx_Dropdown{color:#232f32}.mx_AuthBody .mx_Dropdown_arrow{background:#232f32}.mx_AuthBody .mx_Dropdown_menu{background-color:#fff}.mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight{background-color:#ddd}.mx_AuthBody_fieldRow{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:10px}.mx_AuthBody_fieldRow>.mx_Field{margin:0 5px}.mx_AuthBody_fieldRow>.mx_Field:first-child{margin-left:0}.mx_AuthBody_fieldRow>.mx_Field:last-child{margin-right:0}.mx_AuthBody_paddedFooter{height:80px;padding-top:28px;text-align:center}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title{margin-top:16px;font-size:1.5rem;line-height:2.4rem}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title .mx_InlineSpinner img{vertical-align:sub;margin-right:5px}.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_subtitle{margin-top:8px;font-size:1rem;line-height:1.4rem}.mx_AuthBody_changeFlow{display:block;text-align:center;width:100%}.mx_AuthBody_changeFlow>a{font-weight:600}.mx_SSOButtons+.mx_AuthBody_changeFlow{margin-top:24px}.mx_AuthBody_spinner{margin:1em 0}@media only screen and (max-width:480px){.mx_AuthBody{border-radius:4px;width:auto;max-width:500px;padding:10px}}.mx_AuthButtons{min-height:24px;height:unset!important;padding-top:13px!important;padding-bottom:14px!important;-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.mx_AuthButtons_loginButton_wrapper{text-align:center;width:100%}.mx_AuthButtons_loginButton,.mx_AuthButtons_registerButton{margin-top:3px;height:40px;border:0;border-radius:40px;margin-left:4px;margin-right:4px;min-width:80px;background-color:#0dbd8b;color:#fff;cursor:pointer;font-size:1.5rem;padding:0 11px;word-break:break-word}.mx_AuthFooter{text-align:center;width:100%;font-size:1.4rem;opacity:.72;padding:20px 0;background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.8)));background:linear-gradient(transparent,rgba(0,0,0,.8))}.mx_AuthFooter a:hover,.mx_AuthFooter a:link,.mx_AuthFooter a:visited{color:#fff;margin:0 22px}.mx_AuthHeader{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:206px;padding:25px;-webkit-box-sizing:border-box;box-sizing:border-box}@media only screen and (max-width:480px){.mx_AuthHeader{display:none}}.mx_AuthHeaderLogo{margin-top:15px;-webkit-box-flex:1;-ms-flex:1;flex:1;padding:0 25px}.mx_AuthHeaderLogo img{width:100%}@media only screen and (max-width:480px){.mx_AuthHeaderLogo{display:none}}.mx_AuthPage{width:100%;min-height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#2e3649}.mx_AuthPage,.mx_AuthPage_modal{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_AuthPage_modal{margin:100px auto auto;border-radius:4px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.33);box-shadow:0 2px 4px 0 rgba(0,0,0,.33);background-color:hsla(0,0%,96.1%,.9)}@media only screen and (max-width:480px){.mx_AuthPage_modal{margin-top:0}}.mx_CompleteSecurityBody{width:600px;color:#232f32;background-color:#fff;border-radius:4px;padding:20px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_CompleteSecurityBody h2{font-size:2.4rem;font-weight:600;margin-top:0}.mx_CompleteSecurityBody h3{font-size:1.4rem;font-weight:600}.mx_CompleteSecurityBody a:hover,.mx_CompleteSecurityBody a:link,.mx_CompleteSecurityBody a:visited{color:#0dbd8b;text-decoration:none}.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option{padding:0 3px}.mx_CountryDropdown .mx_Dropdown_arrow{padding-right:3px}.mx_CountryDropdown_shortOption{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:100%}.mx_CountryDropdown_option,.mx_CountryDropdown_shortOption{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CountryDropdown_option{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_InteractiveAuthEntryComponents_emailWrapper{padding-right:100px;position:relative;margin-top:32px;margin-bottom:32px}.mx_InteractiveAuthEntryComponents_emailWrapper:after,.mx_InteractiveAuthEntryComponents_emailWrapper:before{position:absolute;width:116px;height:116px;content:"";right:-10px}.mx_InteractiveAuthEntryComponents_emailWrapper:before{background-color:rgba(244,246,250,.91);border-radius:50%;top:-20px}.mx_InteractiveAuthEntryComponents_emailWrapper:after{background-image:url(../../img/element-icons/email-prompt.1d04dfe.svg);background-repeat:no-repeat;background-position:50%;background-size:contain;top:-25px}.mx_InteractiveAuthEntryComponents_msisdnWrapper{text-align:center}.mx_InteractiveAuthEntryComponents_msisdnEntry{font-size:200%;font-weight:700;border:1px solid #c7c7c7;border-radius:3px;width:6em}.mx_InteractiveAuthEntryComponents_msisdnEntry:focus{border:1px solid #0dbd8b}.mx_InteractiveAuthEntryComponents_msisdnSubmit{margin-top:4px;margin-bottom:5px}.mx_InteractiveAuthEntryComponents_termsSubmit{margin-top:20px;margin-bottom:5px;display:block;width:100%}.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled{background-color:#747474;cursor:default}.mx_InteractiveAuthEntryComponents_termsSubmit:disabled{background-color:#92caad;cursor:default}.mx_InteractiveAuthEntryComponents_termsPolicy{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_InteractiveAuthEntryComponents_passwordSection{width:300px}.mx_InteractiveAuthEntryComponents_sso_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:20px}.mx_InteractiveAuthEntryComponents_sso_buttons .mx_AccessibleButton{margin-left:5px}.mx_AuthBody_language{width:100%}.mx_AuthBody_language .mx_Dropdown_input{border:none;font-size:1.4rem;font-weight:600;color:#4e5054;width:auto}.mx_AuthBody_language .mx_Dropdown_arrow{background:#4e5054}progress.mx_PassphraseField_progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;border:0;height:4px;position:absolute;top:-12px;border-radius:"2px"}progress.mx_PassphraseField_progress::-moz-progress-bar{border-radius:"2px"}progress.mx_PassphraseField_progress::-webkit-progress-bar,progress.mx_PassphraseField_progress::-webkit-progress-value{border-radius:"2px"}progress.mx_PassphraseField_progress{color:#ff4b55}progress.mx_PassphraseField_progress::-moz-progress-bar{background-color:#ff4b55}progress.mx_PassphraseField_progress::-webkit-progress-value{background-color:#ff4b55}progress.mx_PassphraseField_progress[value="2"],progress.mx_PassphraseField_progress[value="3"]{color:#ff812d}progress.mx_PassphraseField_progress[value="2"]::-moz-progress-bar,progress.mx_PassphraseField_progress[value="3"]::-moz-progress-bar{background-color:#ff812d}progress.mx_PassphraseField_progress[value="2"]::-webkit-progress-value,progress.mx_PassphraseField_progress[value="3"]::-webkit-progress-value{background-color:#ff812d}progress.mx_PassphraseField_progress[value="4"]{color:#0dbd8b}progress.mx_PassphraseField_progress[value="4"]::-moz-progress-bar{background-color:#0dbd8b}progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value{background-color:#0dbd8b}.mx_Welcome{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Welcome.mx_WelcomePage_registrationDisabled .mx_ButtonCreateAccount{display:none}.mx_Welcome .mx_AuthBody_language{width:160px;margin-bottom:10px}.mx_BaseAvatar{position:relative;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_BaseAvatar_initial{position:absolute;left:0;color:#fff;text-align:center;speak:none;pointer-events:none;font-weight:400}.mx_BaseAvatar_image{-o-object-fit:cover;object-fit:cover;border-radius:125px;vertical-align:top;background-color:#fff}.mx_DecoratedRoomAvatar,.mx_ExtraTile{position:relative}.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar,.mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar{-webkit-mask-image:url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);mask-image:url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon{position:absolute;bottom:-2px;right:-2px;margin:4px;width:8px;height:8px;border-radius:50%}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon:before{content:"";width:8px;height:8px;position:absolute;border-radius:8px}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe:before{-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#737d8c;-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_offline:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_offline:before{background-color:#e3e8f0}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online:before{background-color:#0dbd8b}.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_away:before,.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_away:before{background-color:#d9b072}.mx_DecoratedRoomAvatar .mx_NotificationBadge,.mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer,.mx_ExtraTile .mx_NotificationBadge,.mx_ExtraTile .mx_RoomTile_badgeContainer{position:absolute;top:0;right:0;height:18px;width:18px}.mx_MessageComposer_avatar .mx_BaseAvatar{padding:2px;border:1px solid transparent;border-radius:100%}.mx_MessageComposer_avatar .mx_BaseAvatar_initial{left:2px}.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar{border-color:#0dbd8b}@-webkit-keyframes shadow-pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(13,189,139,.2);box-shadow:0 0 0 0 rgba(13,189,139,.2)}to{-webkit-box-shadow:0 0 0 6px rgba(13,189,139,0);box-shadow:0 0 0 6px rgba(13,189,139,0)}}@keyframes shadow-pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(13,189,139,.2);box-shadow:0 0 0 0 rgba(13,189,139,.2)}to{-webkit-box-shadow:0 0 0 6px rgba(13,189,139,0);box-shadow:0 0 0 6px rgba(13,189,139,0)}}.mx_PulsedAvatar img{-webkit-animation:shadow-pulse 1s infinite;animation:shadow-pulse 1s infinite}.mx_WidgetAvatar{border-radius:4px}.mx_BetaCard{margin-bottom:20px;padding:24px;background-color:#f4f6fa;border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_BetaCard>div .mx_BetaCard_title{font-weight:600;font-size:1.8rem;line-height:2.2rem;color:#2e2f32;margin:4px 0 14px}.mx_BetaCard>div .mx_BetaCard_title .mx_BetaCard_betaPill{margin-left:12px}.mx_BetaCard>div .mx_BetaCard_caption{font-size:1.5rem;line-height:2rem;color:#737d8c;margin-bottom:20px}.mx_BetaCard>div .mx_AccessibleButton{display:block;margin:12px 0;padding:7px 40px;width:auto}.mx_BetaCard>div .mx_BetaCard_disclaimer{font-size:1.2rem;line-height:1.5rem;color:#737d8c;margin-top:20px}.mx_BetaCard>img{margin:auto 0 auto 20px;width:300px;-o-object-fit:contain;object-fit:contain;height:100%}.mx_BetaCard_betaPill{background-color:#238cf5;padding:4px 10px;border-radius:8px;text-transform:uppercase;font-size:12px;line-height:15px;color:#fff;display:inline-block;vertical-align:text-bottom}.mx_BetaCard_betaPill.mx_BetaCard_betaPill_clickable{cursor:pointer}.mx_BetaDot{border-radius:50%;margin:10px;height:12px;width:12px;-webkit-transform:scale(1);transform:scale(1);background:#238cf5;-webkit-box-shadow:0 0 0 0 #238cf5;box-shadow:0 0 0 0 #238cf5;-webkit-animation:mx_Beta_bluePulse 2s infinite;animation:mx_Beta_bluePulse 2s infinite;-webkit-animation-iteration-count:20;animation-iteration-count:20}@-webkit-keyframes mx_Beta_bluePulse{0%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,.7);box-shadow:0 0 0 0 rgba(35,140,245,.7)}70%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:0 0 0 10px rgba(35,140,245,0);box-shadow:0 0 0 10px rgba(35,140,245,0)}to{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,0);box-shadow:0 0 0 0 rgba(35,140,245,0)}}@keyframes mx_Beta_bluePulse{0%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,.7);box-shadow:0 0 0 0 rgba(35,140,245,.7)}70%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:0 0 0 10px rgba(35,140,245,0);box-shadow:0 0 0 10px rgba(35,140,245,0)}to{-webkit-transform:scale(.95);transform:scale(.95);-webkit-box-shadow:0 0 0 0 rgba(35,140,245,0);box-shadow:0 0 0 0 rgba(35,140,245,0)}}.mx_CallContextMenu_item{width:205px;height:40px;padding-left:16px;line-height:40px;vertical-align:center}.mx_IconizedContextMenu{min-width:146px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList>*{padding-left:20px;padding-right:20px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_optionList_notFirst:before,.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:nth-child(n+2):before{border-top:1px solid #2e2f32;opacity:.1;content:"";width:100%;position:absolute;left:0}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:first-child .mx_AccessibleButton:first-child{border-radius:8px 8px 0 0}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_AccessibleButton:last-child{border-radius:0 0 8px 8px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton{padding-top:12px;padding-bottom:12px;text-decoration:none;color:#2e2f32;font-size:1.5rem;line-height:2.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton:hover{background-color:#f5f8fa}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_AccessibleButton_disabled{opacity:.5;cursor:not-allowed}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton .mx_IconizedContextMenu_icon,.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton img{width:16px;min-width:16px;max-width:16px}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton span.mx_IconizedContextMenu_label{width:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton .mx_IconizedContextMenu_icon+.mx_IconizedContextMenu_label{padding-left:14px}.mx_IconizedContextMenu .mx_IconizedContextMenu_icon{position:relative;width:16px;height:16px}.mx_IconizedContextMenu .mx_IconizedContextMenu_icon:before{content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton{color:#ff4b55!important}.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_IconizedContextMenu_icon:before{background-color:#ff4b55}.mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_AccessibleButton,.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_AccessibleButton{color:#0dbd8b!important}.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_IconizedContextMenu_icon:before{background-color:#0dbd8b}.mx_IconizedContextMenu.mx_IconizedContextMenu_compact .mx_IconizedContextMenu_optionList>*{padding:8px 16px 8px 11px}.mx_IconizedContextMenu .mx_IconizedContextMenu_checked{margin-left:16px;margin-right:-5px}.mx_IconizedContextMenu .mx_IconizedContextMenu_checked:before{-webkit-mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg)}.mx_MessageContextMenu{padding:6px}.mx_MessageContextMenu_field{display:block;padding:3px 6px;cursor:pointer;white-space:nowrap}.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet{font-weight:700}.mx_StatusMessageContextMenu{padding:10px}.mx_StatusMessageContextMenu_form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}input.mx_StatusMessageContextMenu_message{border-radius:4px;border:1px solid #e7e7e7;padding:6.5px 11px;background-color:#fff;font-weight:400;margin:0 0 10px}.mx_StatusMessageContextMenu_message::-webkit-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::-moz-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message:-ms-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::-ms-input-placeholder{color:#61708b}.mx_StatusMessageContextMenu_message::placeholder{color:#61708b}.mx_StatusMessageContextMenu_actionContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_StatusMessageContextMenu_clear,.mx_StatusMessageContextMenu_submit{vertical-align:middle;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;cursor:pointer;display:inline-block;outline:none;-ms-flex-item-align:start;align-self:start;font-size:1.2rem;padding:6px 1em;border:1px solid transparent;margin-right:10px}.mx_StatusMessageContextMenu_submit[disabled]{opacity:.49}.mx_StatusMessageContextMenu_clear{color:#ff4b55;background-color:transparent;border:1px solid #ff4b55}.mx_StatusMessageContextMenu_actionContainer .mx_Spinner{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_TagTileContextMenu_item{padding:8px 20px 8px 8px;cursor:pointer;white-space:nowrap;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.6rem}.mx_TagTileContextMenu_item:before{content:"";height:15px;width:15px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;margin-right:8px}.mx_TagTileContextMenu_viewCommunity:before{-webkit-mask-image:url(../../img/element-icons/view-community.0cad1a5.svg);mask-image:url(../../img/element-icons/view-community.0cad1a5.svg)}.mx_TagTileContextMenu_hideCommunity:before{-webkit-mask-image:url(../../img/element-icons/hide.2b52315.svg);mask-image:url(../../img/element-icons/hide.2b52315.svg)}.mx_TagTileContextMenu_separator{margin-top:0;margin-bottom:0;border-style:none;border-top:1px solid;border-color:#e7e7e7}.mx_AddExistingToSpaceDialog_wrapper .mx_Dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_AddExistingToSpace .mx_SearchBox{margin:0 0 15px;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.mx_AddExistingToSpace .mx_AddExistingToSpace_content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_AddExistingToSpace .mx_AddExistingToSpace_noResults{display:block;margin-top:24px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section:not(:first-child){margin-top:24px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section>h3{margin:0;color:#737d8c;font-size:1.2rem;font-weight:600;line-height:1.5rem}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_DecoratedRoomAvatar{margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_AddExistingToSpace_entry_name{font-size:1.5rem;line-height:30px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AddExistingToSpace_entry .mx_Checkbox{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar{margin-right:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar_image{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental{position:relative;border-radius:8px;margin:12px 0;padding:8px 8px 8px 42px;background-color:#f3f8fd;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental:before{content:"";position:absolute;left:10px;top:calc(50% - 8px);height:16px;width:16px;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);mask-image:url(../../img/element-icons/room/room-summary.1ad0865.svg);-webkit-mask-position:center;mask-position:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:20px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:1.2rem;line-height:1.5rem;color:#737d8c}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar{height:8px;width:100%;border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-moz-progress-bar{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-webkit-progress-bar,.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_ProgressBar::-webkit-progress-value{border-radius:8px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span .mx_AddExistingToSpace_progressText{margin-top:8px;font-size:1.5rem;line-height:2.4rem;color:#2e2f32}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer>span>*{vertical-align:middle}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error{padding-left:12px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error>img{-ms-flex-item-align:center;align-self:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorHeading{font-weight:600;font-size:1.5rem;line-height:1.8rem;color:#ff4b55}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorCaption{margin-top:4px;font-size:1.2rem;line-height:1.5rem;color:#2e2f32}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton{display:inline-block;-ms-flex-item-align:center;align-self:center}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton_kind_primary{padding:8px 36px}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton{margin-left:12px;padding-left:24px;position:relative}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton:before{content:"";position:absolute;background-color:#2e2f32;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg);width:18px;height:18px;left:0}.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton_kind_link{padding:0}.mx_AddExistingToSpaceDialog{width:480px;color:#2e2f32;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;min-height:0;height:80vh}.mx_AddExistingToSpaceDialog,.mx_AddExistingToSpaceDialog .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar_image{border-radius:8px;margin:0;vertical-align:unset}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin:auto 16px auto 5px;vertical-align:middle}.mx_AddExistingToSpaceDialog .mx_Dialog_title>div>h1{font-weight:600;font-size:1.8rem;line-height:2.2rem;margin:0}.mx_AddExistingToSpaceDialog .mx_Dialog_title>div .mx_AddExistingToSpaceDialog_onlySpace{color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input{border:none}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input>.mx_Dropdown_option{padding-left:0;-webkit-box-flex:unset;-ms-flex:unset;flex:unset;height:unset;color:#737d8c;font-size:1.5rem;line-height:2.4rem}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input>.mx_Dropdown_option .mx_BaseAvatar{display:none}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input .mx_Dropdown_menu .mx_AddExistingToSpaceDialog_dropdownOptionActive{color:#0dbd8b;padding-right:32px;position:relative}.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input .mx_Dropdown_menu .mx_AddExistingToSpaceDialog_dropdownOptionActive:before{content:"";width:20px;height:20px;top:8px;right:0;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#0dbd8b;-webkit-mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);mask-image:url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg)}.mx_AddExistingToSpaceDialog .mx_AddExistingToSpace{display:contents}.mx_AddressPickerDialog a:hover,.mx_AddressPickerDialog a:link,.mx_AddressPickerDialog a:visited{color:#0dbd8b;text-decoration:none}.mx_AddressPickerDialog_input,.mx_AddressPickerDialog_input:focus{height:26px;font-size:1.4rem;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;padding-left:12px;padding-right:12px;margin:0!important;border:0!important;outline:0!important;width:1000%;resize:none;overflow:hidden;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box;word-wrap:nowrap}.mx_AddressPickerDialog .mx_Dialog_content{min-height:50px}.mx_AddressPickerDialog_inputContainer{border-radius:3px;border:1px solid #e7e7e7;line-height:3.6rem;padding:1px 4px;max-height:150px;overflow-x:hidden;overflow-y:auto}.mx_AddressPickerDialog_error{margin-top:10px;color:#ff4b55}.mx_AddressPickerDialog_cancel{position:absolute;right:11px;top:13px;cursor:pointer}.mx_AddressPickerDialog_cancel object{pointer-events:none}.mx_AddressPickerDialog_identityServer{margin-top:1em}.mx_AnalyticsModal table{margin:10px 0}.mx_BetaFeedbackDialog .mx_BetaFeedbackDialog_subheading{color:#2e2f32;font-size:1.4rem;line-height:2rem;margin-bottom:24px}.mx_BetaFeedbackDialog .mx_AccessibleButton_kind_link{padding:0;font-size:inherit;line-height:inherit}.mx_BugReportDialog .mx_BugReportDialog_download .mx_AccessibleButton_kind_link{padding-left:0}.mx_ChangelogDialog_content{max-height:300px;overflow:auto}.mx_ChangelogDialog_li{padding:.2em}.mx_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles{margin-top:24px}.mx_ChatCreateOrReuseDialog .mx_Dialog_content{margin-bottom:24px;min-height:100px}.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge{display:none}.mx_ChatCreateOrReuseDialog_profile{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ChatCreateOrReuseDialog_profile_name{padding:14px}.mx_CommunityPrototypeInviteDialog.mx_Dialog_fixedWidth{width:360px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content{margin-bottom:0}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_people{position:relative;margin-bottom:4px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_people .mx_AccessibleButton{display:inline-block;background-color:#ddd;border-radius:4px;padding:3px 5px;font-size:1.2rem;float:right}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_morePeople{margin-top:8px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person{position:relative;margin-top:4px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person>*{vertical-align:middle}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_Checkbox{position:absolute;right:0;top:calc(50% - 8px);width:16px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers{display:inline-block}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers>*{display:block}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers .mx_CommunityPrototypeInviteDialog_personName{font-weight:600;font-size:1.4rem;color:#2e2f32;margin-left:7px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_person .mx_CommunityPrototypeInviteDialog_personIdentifiers .mx_CommunityPrototypeInviteDialog_personId{font-size:1.2rem;color:#61708b;margin-left:7px}.mx_CommunityPrototypeInviteDialog .mx_Dialog_content .mx_CommunityPrototypeInviteDialog_primaryButton{display:block;font-size:1.3rem;line-height:20px;height:20px;margin-top:24px}.mx_ConfirmUserActionDialog .mx_Dialog_content{min-height:48px;margin-bottom:24px}.mx_ConfirmUserActionDialog_avatar{float:left;margin-right:20px;margin-top:-2px}.mx_ConfirmUserActionDialog_name{font-size:1.8rem}.mx_ConfirmUserActionDialog_userId{font-size:1.3rem}.mx_ConfirmUserActionDialog_reasonField{font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#2e2f32;background-color:#fff;border-radius:3px;border:1px solid #e7e7e7;line-height:3.6rem;padding:1px 16px;margin-bottom:24px;width:90%}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:12px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName{-ms-flex-preferred-size:66.66%;flex-basis:66.66%;padding-right:100px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_Field input{font-size:1.6rem;line-height:2rem}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext{display:block;color:#61708b;margin-bottom:16px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext:last-child{margin-top:16px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_subtext.mx_CreateCommunityPrototypeDialog_subtext_error{color:#ff4b55}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_communityId{position:relative}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_CreateCommunityPrototypeDialog_communityId .mx_InfoTooltip{float:right}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colName .mx_AccessibleButton{display:block;height:32px;font-size:1.6rem;line-height:32px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar{-ms-flex-preferred-size:33.33%;flex-basis:33.33%}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer{margin-top:12px;margin-bottom:20px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_avatar,.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar{width:96px;height:96px;border-radius:96px}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar{background-color:#368bd6}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_avatarContainer .mx_CreateCommunityPrototypeDialog_placeholderAvatar:before{display:inline-block;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:96px;mask-size:96px;width:96px;height:96px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg);mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg)}.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_tip>b,.mx_CreateCommunityPrototypeDialog .mx_Dialog_content .mx_CreateCommunityPrototypeDialog_colAvatar .mx_CreateCommunityPrototypeDialog_tip>span{display:block;color:#61708b}.mx_CreateGroupDialog_inputRow{margin-top:10px;margin-bottom:10px}.mx_CreateGroupDialog_label{text-align:left;padding-bottom:12px}.mx_CreateGroupDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff}.mx_CreateGroupDialog_input_hasPrefixAndSuffix{border-radius:0}.mx_CreateGroupDialog_input_group{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateGroupDialog_prefix,.mx_CreateGroupDialog_suffix{padding:0 5px;line-height:3.7rem;background-color:#e3e8f0;border:1px solid #e7e7e7;text-align:center}.mx_CreateGroupDialog_prefix{border-right:0;border-radius:3px 0 0 3px}.mx_CreateGroupDialog_suffix{border-left:0;border-radius:0 3px 3px 0}.mx_CreateRoomDialog_details{margin-top:15px}.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary{outline:none;list-style:none;font-weight:600;cursor:pointer;color:#0dbd8b}.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary::-webkit-details-marker{display:none}.mx_CreateRoomDialog_details>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin:5px 0}.mx_CreateRoomDialog_details>div input[type=checkbox]{margin-right:10px}.mx_CreateRoomDialog_label{text-align:left;padding-bottom:12px}.mx_CreateRoomDialog_input_container{padding-right:20px}.mx_CreateRoomDialog_input{font-size:1.5rem;border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:#2e2f32;background-color:#fff;width:100%}.mx_CreateRoomDialog_aliasContainer{display:-webkit-box;display:-ms-flexbox;display:flex;margin:10px 0}.mx_CreateRoomDialog_aliasContainer .mx_RoomAliasField{margin:0}.mx_CreateRoomDialog.mx_Dialog_fixedWidth{width:450px}.mx_CreateRoomDialog .mx_Dialog_content{margin-bottom:40px}.mx_CreateRoomDialog .mx_Field_input label,.mx_CreateRoomDialog p{color:#61708b}.mx_CreateRoomDialog .mx_SettingsFlag{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateRoomDialog .mx_SettingsFlag_label{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;font-weight:600}.mx_CreateRoomDialog .mx_ToggleSwitch{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:30px}.mx_CreateRoomDialog .mx_CreateRoomDialog_topic{margin-bottom:36px}.mx_CreateRoomDialog .mx_Dialog_content>.mx_SettingsFlag{margin-top:24px}.mx_CreateRoomDialog p{margin:0 85px 0 0;font-size:1.2rem}.mx_DeactivateAccountDialog .mx_Dialog_content{margin-bottom:30px}.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section{margin-top:60px}.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field{width:300px}.mx_DevTools_content{margin:10px 0}.mx_DevTools_ServersInRoomList_button{cursor:default!important}.mx_DevTools_RoomStateExplorer_query{margin-bottom:10px}.mx_DevTools_RoomStateExplorer_button,.mx_DevTools_ServersInRoomList_button{margin-bottom:10px;width:100%}.mx_DevTools_label_left{float:left}.mx_DevTools_label_right{float:right}.mx_DevTools_label_bottom{clear:both;border-bottom:1px solid #e5e5e5}.mx_DevTools_inputRow{display:table-row}.mx_DevTools_inputLabelCell{display:table-cell;font-weight:700;padding-right:24px}.mx_DevTools_inputCell{display:table-cell;width:240px}.mx_DevTools_inputCell input{display:inline-block;border:0;border-bottom:1px solid hsla(0,0%,59.2%,.5);padding:0;width:240px;color:rgba(74,74,74,.9);font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.6rem}.mx_DevTools_textarea{font-size:1.2rem;max-width:684px;min-height:250px;padding:10px}.mx_DevTools_eventTypeStateKeyGroup{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_DevTools_content .mx_Field_input:first-of-type{margin-right:42px}.mx_DevTools_tgl{display:none}.mx_DevTools_tgl,.mx_DevTools_tgl *,.mx_DevTools_tgl+.mx_DevTools_tgl-btn,.mx_DevTools_tgl:after,.mx_DevTools_tgl :after,.mx_DevTools_tgl:before,.mx_DevTools_tgl :before{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_DevTools_tgl+.mx_DevTools_tgl-btn::-moz-selection,.mx_DevTools_tgl::-moz-selection,.mx_DevTools_tgl ::-moz-selection,.mx_DevTools_tgl:after::-moz-selection,.mx_DevTools_tgl :after::-moz-selection,.mx_DevTools_tgl:before::-moz-selection,.mx_DevTools_tgl :before::-moz-selection{background:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn::selection,.mx_DevTools_tgl::selection,.mx_DevTools_tgl ::selection,.mx_DevTools_tgl:after::selection,.mx_DevTools_tgl :after::selection,.mx_DevTools_tgl:before::selection,.mx_DevTools_tgl :before::selection{background:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn{outline:0;display:block;width:7em;height:2em;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:after,.mx_DevTools_tgl+.mx_DevTools_tgl-btn:before{position:relative;display:block;content:"";width:50%;height:100%}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:after{left:0}.mx_DevTools_tgl+.mx_DevTools_tgl-btn:before{display:none}.mx_DevTools_tgl:checked+.mx_DevTools_tgl-btn:after{left:50%}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn{padding:2px;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:sans-serif;-webkit-perspective:100px;perspective:100px}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:after,.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:before{display:inline-block;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:4px}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:after{content:attr(data-tg-on);background:#02c66f;-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:before{background:#ff3a19;content:attr(data-tg-off)}.mx_DevTools_tgl-flip+.mx_DevTools_tgl-btn:active:before{-webkit-transform:rotateY(-20deg);transform:rotateY(-20deg)}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:after{-webkit-transform:rotateY(0);transform:rotateY(0);left:0;background:#7fc6a6}.mx_DevTools_tgl-flip:checked+.mx_DevTools_tgl-btn:active:after{-webkit-transform:rotateY(20deg);transform:rotateY(20deg)}.mx_DevTools_VerificationRequest{border:1px solid #ccc;border-radius:3px;padding:1px 5px;margin-bottom:6px;font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji}.mx_DevTools_VerificationRequest dl{display:grid;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto;margin:0}.mx_DevTools_VerificationRequest dd{grid-column-start:2}.mx_DevTools_VerificationRequest dd:empty{color:#666}.mx_DevTools_VerificationRequest dd:empty:after{content:"(empty)"}.mx_DevTools_VerificationRequest dt{font-weight:700;grid-column-start:1}.mx_DevTools_VerificationRequest dt:after{content:":"}.mx_DevTools_SettingsExplorer table{width:100%;table-layout:fixed;border-collapse:collapse}.mx_DevTools_SettingsExplorer table th{border-bottom:1px solid #0dbd8b;text-align:left}.mx_DevTools_SettingsExplorer table td,.mx_DevTools_SettingsExplorer table th{width:360px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_DevTools_SettingsExplorer table td+td,.mx_DevTools_SettingsExplorer table th+th{width:auto}.mx_DevTools_SettingsExplorer table tr:hover{background-color:rgba(13,189,139,.5)}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_mutable{background-color:#0dbd8b}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_immutable{background-color:#ff4b55}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_edit{float:right;margin-right:16px}.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_warning{border:2px solid #ff4b55;border-radius:4px;padding:4px;margin-bottom:8px}.mx_EditCommunityPrototypeDialog.mx_Dialog_fixedWidth{width:360px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content{margin-bottom:12px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_AccessibleButton.mx_AccessibleButton_kind_primary{display:block;height:32px;font-size:1.6rem;line-height:32px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_rowAvatar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer{margin-top:20px;margin-bottom:20px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_avatar,.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar{width:96px;height:96px;border-radius:96px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar{background-color:#368bd6}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_avatarContainer .mx_EditCommunityPrototypeDialog_placeholderAvatar:before{display:inline-block;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:96px;mask-size:96px;width:96px;height:96px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg);mask-image:url(../../img/element-icons/add-photo.c0b4c3b.svg)}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip{margin-left:20px}.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip>b,.mx_EditCommunityPrototypeDialog .mx_Dialog_content .mx_EditCommunityPrototypeDialog_tip>span{display:block;color:#61708b}.mx_FeedbackDialog hr{margin:24px 0;border-color:#e7e7e7}.mx_FeedbackDialog .mx_Dialog_content{margin-bottom:24px}.mx_FeedbackDialog .mx_Dialog_content>h2{margin-bottom:32px}.mx_FeedbackDialog .mx_FeedbackDialog_section{position:relative;padding-left:52px}.mx_FeedbackDialog .mx_FeedbackDialog_section>p{color:#8d99a5}.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link,.mx_FeedbackDialog .mx_FeedbackDialog_section a{color:#0dbd8b;text-decoration:underline}.mx_FeedbackDialog .mx_FeedbackDialog_section:after,.mx_FeedbackDialog .mx_FeedbackDialog_section:before{content:"";position:absolute;width:40px;height:40px;left:0;top:0}.mx_FeedbackDialog .mx_FeedbackDialog_section:before{background-color:#c1c6cd;border-radius:20px}.mx_FeedbackDialog .mx_FeedbackDialog_section:after{background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:24px;mask-size:24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_FeedbackDialog .mx_FeedbackDialog_reportBug:after{-webkit-mask-image:url(../../img/feather-customised/bug.3dc7afa.svg);mask-image:url(../../img/feather-customised/bug.3dc7afa.svg)}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:20px;-webkit-transition:font-size 1s,border .5s;transition:font-size 1s,border .5s;border-radius:50%;border:2px solid transparent;margin-top:12px;margin-bottom:24px;vertical-align:top;cursor:pointer}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton input[type=radio]+div{display:none}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton .mx_RadioButton_content{background:#c1c6cd;width:40px;height:40px;text-align:center;line-height:40px;border-radius:20px;margin:5px}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton .mx_RadioButton_spacer{display:none}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton+.mx_RadioButton{margin-left:16px}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton_checked{font-size:24px;border-color:#0dbd8b}.mx_FeedbackDialog .mx_FeedbackDialog_rateApp:after{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_GroupAddressPicker_checkboxContainer{margin-top:10px;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_HostSignupDialog{width:90vw;max-width:580px;height:80vh;max-height:600px;background-color:#fff}.mx_HostSignupDialog .mx_HostSignupDialog_info{text-align:center}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_content_top{margin-bottom:24px}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_paragraphs{text-align:left;padding-left:25%;padding-right:25%}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons{margin-bottom:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons button{padding:12px;margin:0 16px}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer img{padding-right:5px}.mx_HostSignupDialog iframe{width:100%;height:100%;border:none;background-color:#fff;min-height:540px}.mx_HostSignupDialog_text_dark{color:#2e2f32}.mx_HostSignupDialog_text_light{color:#737d8c}.mx_HostSignup_maximize_button{-webkit-mask:url(../../img/feather-customised/maximise.dc32127.svg);mask:url(../../img/feather-customised/maximise.dc32127.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;right:10px}.mx_HostSignup_maximize_button,.mx_HostSignup_minimize_button{width:14px;height:14px;background-color:#c1c1c1;cursor:pointer;position:absolute;top:10px}.mx_HostSignup_minimize_button{-webkit-mask:url(../../img/feather-customised/minimise.aec9142.svg);mask:url(../../img/feather-customised/minimise.aec9142.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;right:25px}.mx_HostSignup_persisted{width:90vw;max-width:580px;height:80vh;max-height:600px;top:0;left:0;position:fixed;display:none}.mx_HostSignupDialog_minimized{position:fixed;bottom:80px;right:26px;width:314px;height:217px;overflow:hidden}.mx_HostSignupDialog_minimized.mx_Dialog{padding:12px}.mx_HostSignupDialog_minimized .mx_Dialog_title{text-align:left!important;padding-left:20px;font-size:1.5rem}.mx_HostSignupDialog_minimized iframe{width:100%;height:100%;border:none;background-color:#fff}.mx_IncomingSasDialog_opponentProfile_image{position:relative}.mx_IncomingSasDialog_opponentProfile h2{display:inline-block;margin-left:10px}.mx_InviteDialog_addressBar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_InviteDialog_addressBar .mx_InviteDialog_editor{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;background-color:#f3f8fd;border-radius:4px;min-height:25px;padding-left:8px;overflow-x:hidden;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_InviteDialog_addressBar .mx_InviteDialog_editor .mx_InviteDialog_userTile{margin:6px 6px 0 0;display:inline-block;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mx_InviteDialog_addressBar .mx_InviteDialog_editor>input[type=text]{margin:6px 0!important;height:24px;line-height:2.4rem;font-size:1.4rem;padding-left:12px;border:0!important;outline:0!important;resize:none;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:40%;-webkit-box-flex:1!important;-ms-flex:1!important;flex:1!important;color:#2e2f32!important}.mx_InviteDialog_addressBar .mx_InviteDialog_goButton{min-width:48px;margin-left:10px;height:25px;line-height:2.5rem}.mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner .mx_Spinner{width:20px;height:20px;margin-left:5px;display:inline-block;vertical-align:middle}.mx_InviteDialog_section{padding-bottom:10px}.mx_InviteDialog_section h3{font-size:1.2rem;color:#61708b;font-weight:700;text-transform:uppercase}.mx_InviteDialog_section .mx_InviteDialog_subname{margin-bottom:10px;margin-top:-10px;font-size:1.2rem;color:#61708b}.mx_InviteDialog_roomTile{cursor:pointer;padding:5px 10px}.mx_InviteDialog_roomTile:hover{background-color:#f3f8fd;border-radius:4px}.mx_InviteDialog_roomTile *{vertical-align:middle}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack{display:inline-block;position:relative;width:36px;height:36px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack>*{position:absolute;top:0;left:0}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected{width:36px;height:36px;border-radius:36px;background-color:#368bd6;display:inline-block;position:relative}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected:before{content:"";width:24px;height:24px;grid-column:1;grid-row:1;-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;top:6px;left:6px;background-color:#fff}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_nameStack{display:inline-block}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_name{font-weight:600;font-size:1.4rem;color:#2e2f32;margin-left:7px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_userId{font-size:1.2rem;color:#61708b;margin-left:7px}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_time{text-align:right;font-size:1.2rem;color:#61708b;float:right;line-height:3.6rem}.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_highlight{font-weight:900}.mx_InviteDialog_userTile{margin-right:8px}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill{background-color:#368bd6;border-radius:12px;display:inline-block;height:24px;line-height:2.4rem;padding-left:8px;padding-right:8px;color:#fff}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_avatar{border-radius:20px;position:relative;left:-5px;top:2px}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name,.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill img.mx_InviteDialog_userTile_avatar{vertical-align:top}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_threepidAvatar{background-color:#fff}.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove{display:inline-block;margin-left:4px}.mx_InviteDialog{height:590px;padding-left:20px}.mx_InviteDialog_userSections{margin-top:10px;overflow-y:auto;padding-right:45px;height:455px}.mx_InviteDialog_addressBar,.mx_InviteDialog_helpText{margin-right:45px}.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link{padding:0}.mx_KeyboardShortcutsDialog{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-bottom:-50px;max-height:1100px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category{width:33.3333%;margin:0 0 40px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category>div{padding-left:5px}.mx_KeyboardShortcutsDialog h3{margin:0 0 10px}.mx_KeyboardShortcutsDialog h5{margin:15px 0 5px;font-weight:400}.mx_KeyboardShortcutsDialog kbd{padding:5px;border-radius:4px;background-color:#f3f8fd;margin-right:5px;min-width:20px;text-align:center;display:inline-block;border:1px solid #e9edf1;-webkit-box-shadow:0 2px #e9edf1;box-shadow:0 2px #e9edf1;margin-bottom:4px;text-transform:capitalize}.mx_KeyboardShortcutsDialog kbd+kbd{margin-left:5px}.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_inline div{display:inline}.mx_MessageEditHistoryDialog .mx_Dialog_header>.mx_Dialog_title{text-align:center}.mx_MessageEditHistoryDialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-height:60vh}.mx_MessageEditHistoryDialog_scrollPanel{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.mx_MessageEditHistoryDialog_error{color:#ff4b55;text-align:center}.mx_MessageEditHistoryDialog_edits{list-style-type:none;font-size:1.4rem;padding:0;color:#2e2f32}.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_deletion,.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_insertion{padding:0 2px}.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_deletion{color:#ff4c55;background-color:rgba(255,76,85,.1);text-decoration:line-through}.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_insertion{color:#1aa97b;background-color:rgba(26,169,123,.1);text-decoration:underline}.mx_MessageEditHistoryDialog_edits .mx_EventTile_content,.mx_MessageEditHistoryDialog_edits .mx_EventTile_line{margin-right:0}.mx_MessageEditHistoryDialog_edits .mx_MessageActionBar .mx_AccessibleButton{font-size:1rem;padding:0 8px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning{margin-bottom:24px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning>img{vertical-align:middle;margin-right:8px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons{float:right;margin-top:24px}.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:8px}.mx_ModalWidgetDialog iframe{width:100%;height:450px;border:0;border-radius:8px}.mx_NewSessionReviewDialog_header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:0}.mx_NewSessionReviewDialog_headerIcon{width:24px;height:24px;margin-right:4px;position:relative}.mx_NewSessionReviewDialog_deviceName{font-weight:600}.mx_NewSessionReviewDialog_deviceID{font-size:1.2rem;color:#8d99a5}.mx_RegistrationEmailPromptDialog{width:417px}.mx_RegistrationEmailPromptDialog .mx_Dialog_content{margin-bottom:24px;color:#8d99a5}.mx_RegistrationEmailPromptDialog .mx_Dialog_primary{width:100%}.mx_RoomSettingsDialog_settingsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_RoomSettingsDialog_securityIcon:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_RoomSettingsDialog_rolesIcon:before{-webkit-mask-image:url(../../img/element-icons/room/settings/roles.bad9a9e.svg);mask-image:url(../../img/element-icons/room/settings/roles.bad9a9e.svg)}.mx_RoomSettingsDialog_notificationsIcon:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RoomSettingsDialog_bridgesIcon:before{-webkit-mask-image:url(../../img/feather-customised/bridge.b2ca042.svg);mask-image:url(../../img/feather-customised/bridge.b2ca042.svg)}.mx_RoomSettingsDialog_warningIcon:before{-webkit-mask-image:url(../../img/element-icons/room/settings/advanced.e079c15.svg);mask-image:url(../../img/element-icons/room/settings/advanced.e079c15.svg)}.mx_RoomSettingsDialog .mx_Dialog_title{-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 auto;padding-right:80px}.mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before{-webkit-mask:url(../../img/feather-customised/image.a8671b8.svg);mask:url(../../img/feather-customised/image.a8671b8.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:36px;mask-size:36px;-webkit-mask-position:center;mask-position:center}.mx_RoomSettingsDialog_BridgeList{padding:0}.mx_RoomSettingsDialog_BridgeList .mx_AccessibleButton{display:inline;margin:0;padding:0}.mx_RoomSettingsDialog_BridgeList li{list-style-type:none;padding:5px;margin-bottom:8px;border:1px solid transparent;border-radius:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon{float:left;padding-right:10px}.mx_RoomSettingsDialog_BridgeList li .column-icon *{border-radius:5px;border:1px solid #e3e8f0}.mx_RoomSettingsDialog_BridgeList li .column-icon .noProtocolIcon{width:48px;height:48px;background:#e3e8f0;border-radius:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon{float:left;margin-right:5px}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon img{border-radius:5px;border-width:1px;border-color:transparent}.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon span{left:auto}.mx_RoomSettingsDialog_BridgeList li .column-data{display:inline-block;width:85%}.mx_RoomSettingsDialog_BridgeList li .column-data>h3{margin-top:0;margin-bottom:0;font-size:16pt;color:#2e2f32}.mx_RoomSettingsDialog_BridgeList li .column-data>*{margin-top:4px;margin-bottom:0}.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details{color:#2e2f32;font-weight:600}.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details .channel{margin-left:5px}.mx_RoomSettingsDialog_BridgeList li .column-data .metadata{color:#61708b;margin-bottom:0;overflow-y:visible;text-overflow:ellipsis;white-space:normal;padding:0}.mx_RoomSettingsDialog_BridgeList li .column-data .metadata>li{padding:0;border:0}.mx_RoomUpgradeDialog{padding-right:70px}.mx_RoomUpgradeWarningDialog{max-width:38vw;width:38vw}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag{font-weight:700}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-left:8px;float:right}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content{padding-right:85px;color:#2e2f32}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content hr{border-color:#2e2f32;opacity:.1;border-bottom:none}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul{padding:16px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul li:nth-child(n+2){margin-top:16px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timestamp{display:inline-block;width:115px;color:#61708b;line-height:24px;vertical-align:top}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline{display:inline-block;width:calc(100% - 155px)}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_timeline_header span{margin-left:8px;vertical-align:middle}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn{position:relative;margin-top:8px}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_ServerOfflineDialog_content_context_txn_desc{width:calc(100% - 100px)}.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_AccessibleButton{float:right;padding:0}.mx_ServerPickerDialog{width:468px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_ServerPickerDialog .mx_Dialog_content{margin-bottom:0}.mx_ServerPickerDialog .mx_Dialog_content>p{color:#737d8c;font-size:1.4rem;margin:16px 0}.mx_ServerPickerDialog .mx_Dialog_content>p:first-of-type{margin-bottom:40px}.mx_ServerPickerDialog .mx_Dialog_content>p:last-of-type{margin:0 24px 24px}.mx_ServerPickerDialog .mx_Dialog_content>h4{font-size:1.5rem;font-weight:600;color:#737d8c;margin-left:8px}.mx_ServerPickerDialog .mx_Dialog_content>a{color:#0dbd8b;margin-left:8px}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserverRadio input[type=radio]+div{margin-top:auto;margin-bottom:auto}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver{border-top:none;border-left:none;border-right:none;border-radius:unset}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver>input{padding-left:0}.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver>label{margin-left:0}.mx_ServerPickerDialog .mx_AccessibleButton_kind_primary{width:calc(100% - 64px);margin:0 8px;padding:15px 18px}.mx_SetEmailDialog_email_input{border-radius:3px;border:1px solid #e7e7e7;padding:9px;color:rgba(74,74,74,.9);background-color:#fff;font-size:1.5rem;width:100%;max-width:280px;margin-bottom:10px}.mx_SetEmailDialog_email_input:focus{outline:none;-webkit-box-shadow:none;box-shadow:none;border:1px solid #0dbd8b}.mx_RoomSettingsDialog,.mx_UserSettingsDialog{width:90vw;max-width:1000px;height:80vh}.mx_RoomSettingsDialog .mx_TabbedView,.mx_UserSettingsDialog .mx_TabbedView{top:65px}.mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab{-webkit-box-sizing:border-box;box-sizing:border-box;min-width:580px;padding-right:100px;padding-bottom:100px}.mx_RoomSettingsDialog .mx_Dialog_title,.mx_UserSettingsDialog .mx_Dialog_title{margin-bottom:24px}.mx_ShareDialog hr{margin-top:25px;margin-bottom:25px;border-color:#747474}.mx_ShareDialog_content{margin:10px 0}.mx_ShareDialog_matrixto{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-radius:5px;border:1px solid #747474;margin-bottom:10px;margin-top:30px;padding:10px}.mx_ShareDialog_matrixto a{text-decoration:none}.mx_ShareDialog_matrixto_link{-ms-flex-negative:1;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.mx_ShareDialog_matrixto_copy{-ms-flex-negative:0;flex-shrink:0;cursor:pointer;margin-left:20px;display:inherit}.mx_ShareDialog_matrixto_copy>div{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);background-color:#2e2f32;margin-left:5px;width:20px;height:20px;background-repeat:no-repeat}.mx_ShareDialog_split{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.mx_ShareDialog_qrcode_container{float:left;height:256px;width:256px;margin-right:64px}.mx_ShareDialog_qrcode_container+.mx_ShareDialog_social_container{width:299px}.mx_ShareDialog_social_container{display:inline-block}.mx_ShareDialog_social_icon{display:inline-grid;margin-right:10px;margin-bottom:10px}.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2{margin-bottom:2px}.mx_SlashCommandHelpDialog .mx_Dialog_content{margin-top:12px;margin-bottom:34px}.mx_SpaceSettingsDialog{width:480px;color:#2e2f32}.mx_SpaceSettingsDialog .mx_SpaceSettings_errorText{font-weight:600;font-size:1.2rem;line-height:1.5rem;color:#ff4b55;margin-bottom:28px}.mx_SpaceSettingsDialog .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-left:16px}.mx_SpaceSettingsDialog .mx_AccessibleButton_kind_danger{margin-top:28px}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:64px}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton{display:inline-block}.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton_kind_link{margin-left:auto}.mx_SpaceSettingsDialog .mx_AccessibleButton_hasKind{padding:8px 22px}.mx_TabbedIntegrationManagerDialog .mx_Dialog{width:60%;height:70%;overflow:hidden;padding:0;max-width:none;max-height:none;position:relative}.mx_TabbedIntegrationManagerDialog_container{position:absolute;top:0;bottom:0;left:0;right:0}.mx_TabbedIntegrationManagerDialog_container .mx_TabbedIntegrationManagerDialog_currentManager{width:100%;height:100%;border-top:1px solid #0dbd8b}.mx_TabbedIntegrationManagerDialog_container .mx_TabbedIntegrationManagerDialog_currentManager iframe{background-color:#fff;border:0;width:100%;height:100%}.mx_TabbedIntegrationManagerDialog_tab{display:inline-block;border:1px solid #0dbd8b;border-bottom:0;border-top-left-radius:3px;border-top-right-radius:3px;padding:10px 8px;margin-right:5px}.mx_TabbedIntegrationManagerDialog_currentTab{background-color:#0dbd8b;color:#fff}.mx_TermsDialog_forIntegrationManager .mx_Dialog{width:60%;height:70%;-webkit-box-sizing:border-box;box-sizing:border-box}.mx_TermsDialog_termsTableHeader{font-weight:700;text-align:left}.mx_TermsDialog_termsTable{font-size:1.2rem;width:100%}.mx_TermsDialog_service,.mx_TermsDialog_summary{padding-right:10px}.mx_TermsDialog_link{display:inline-block;-webkit-mask-image:url(../../img/external-link.a8d3e9b.svg);mask-image:url(../../img/external-link.a8d3e9b.svg);background-color:#0dbd8b;width:10px;height:10px}.mx_UntrustedDeviceDialog .mx_Dialog_title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UntrustedDeviceDialog .mx_Dialog_title .mx_E2EIcon{margin-left:0}.mx_UploadConfirmDialog_fileIcon{margin-right:5px}.mx_UploadConfirmDialog_previewOuter{text-align:center}.mx_UploadConfirmDialog_previewInner{display:inline-block;text-align:left}.mx_UploadConfirmDialog_imagePreview{max-height:300px;max-width:100%;border-radius:4px;border:1px solid #c1c1c1}.mx_UserSettingsDialog_settingsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserSettingsDialog_appearanceIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/appearance.cdebd40.svg);mask-image:url(../../img/element-icons/settings/appearance.cdebd40.svg)}.mx_UserSettingsDialog_voiceIcon:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_UserSettingsDialog_bellIcon:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_UserSettingsDialog_preferencesIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/preference.82bfabd.svg);mask-image:url(../../img/element-icons/settings/preference.82bfabd.svg)}.mx_UserSettingsDialog_securityIcon:before{-webkit-mask-image:url(../../img/element-icons/security.66f2fa6.svg);mask-image:url(../../img/element-icons/security.66f2fa6.svg)}.mx_UserSettingsDialog_helpIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/help.68b703f.svg);mask-image:url(../../img/element-icons/settings/help.68b703f.svg)}.mx_UserSettingsDialog_labsIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);mask-image:url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg)}.mx_UserSettingsDialog_mjolnirIcon:before{-webkit-mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg);mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg)}.mx_UserSettingsDialog_flairIcon:before{-webkit-mask-image:url(../../img/element-icons/settings/flair.4227a88.svg);mask-image:url(../../img/element-icons/settings/flair.4227a88.svg)}.mx_WidgetCapabilitiesPromptDialog .text-muted{font-size:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_content{margin-bottom:16px}.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap{margin-top:20px;font-size:1.5rem;line-height:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap .mx_WidgetCapabilitiesPromptDialog_byline{color:#61708b;margin-left:26px;font-size:1.2rem;line-height:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_buttons{margin-top:40px}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag{line-height:calc(1.4rem + 14px);color:#61708b;font-size:1.2rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-right:8px;width:3.2rem;height:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch.mx_ToggleSwitch_on>.mx_ToggleSwitch_ball{left:calc(100% - 1.5rem)}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch .mx_ToggleSwitch_ball{width:1.5rem;height:1.5rem;border-radius:1.5rem}.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_ToggleSwitch{display:inline-block;vertical-align:middle;margin-right:8px}.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_SettingsFlag_label{display:inline-block;vertical-align:middle}.mx_AccessSecretStorageDialog_reset{position:relative;padding-left:24px;margin-top:7px}.mx_AccessSecretStorageDialog_reset:before{content:"";display:inline-block;position:absolute;height:16px;width:16px;left:0;top:2px;background-image:url(../../img/element-icons/warning-badge.de1033e.svg)}.mx_AccessSecretStorageDialog_reset .mx_AccessSecretStorageDialog_reset_link{color:#ff4b55}.mx_AccessSecretStorageDialog_titleWithIcon:before{content:"";display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_AccessSecretStorageDialog_resetBadge:before{background-image:url(../../img/element-icons/warning-badge.de1033e.svg);background-size:24px;background-color:transparent}.mx_AccessSecretStorageDialog_secureBackupTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_AccessSecretStorageDialog_securePhraseTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_AccessSecretStorageDialog_keyStatus{height:30px}.mx_AccessSecretStorageDialog_passPhraseInput{width:300px;border:1px solid #0dbd8b;border-radius:5px;padding:10px}.mx_AccessSecretStorageDialog_recoveryKeyEntry{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText{margin:16px}.mx_AccessSecretStorageDialog_recoveryKeyFeedback:before{content:"";display:inline-block;vertical-align:bottom;width:20px;height:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;margin-right:5px}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid{color:#0dbd8b}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid:before{-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid{color:#ff4b55}.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid:before{-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput{display:none}.mx_CreateCrossSigningDialog{width:560px}.mx_CreateCrossSigningDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateCrossSigningDialog .mx_Dialog_title,.mx_CreateKeyBackupDialog .mx_Dialog_title{margin-bottom:1em}.mx_CreateKeyBackupDialog_primaryContainer{padding:20px}.mx_CreateKeyBackupDialog_primaryContainer:after{content:"";clear:both;display:block}.mx_CreateKeyBackupDialog_passPhraseContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_CreateKeyBackupDialog_passPhraseInput{-webkit-box-flex:0;-ms-flex:none;flex:none;width:250px;border:1px solid #0dbd8b;border-radius:5px;padding:10px;margin-bottom:1em}.mx_CreateKeyBackupDialog_passPhraseMatch{margin-left:20px}.mx_CreateKeyBackupDialog_recoveryKeyHeader{margin-bottom:1em}.mx_CreateKeyBackupDialog_recoveryKeyContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateKeyBackupDialog_recoveryKey{width:262px;padding:20px;color:#888;background-color:#f7f7f7;margin-right:12px}.mx_CreateKeyBackupDialog_recoveryKeyButtons{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CreateKeyBackupDialog_recoveryKeyButtons button{-webkit-box-flex:1;-ms-flex:1;flex:1;white-space:nowrap}.mx_CreateKeyBackupDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateSecretStorageDialog{width:560px}.mx_CreateSecretStorageDialog .mx_SettingsFlag{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_CreateSecretStorageDialog .mx_SettingsFlag_label{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;font-weight:600}.mx_CreateSecretStorageDialog .mx_ToggleSwitch{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-left:30px}.mx_CreateSecretStorageDialog details .mx_AccessibleButton{margin:1em 0}.mx_CreateSecretStorageDialog .mx_Dialog_title{margin-bottom:1em}.mx_CreateSecretStorageDialog_titleWithIcon:before{content:"";display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_CreateSecretStorageDialog_secureBackupTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_CreateSecretStorageDialog_securePhraseTitle:before{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_CreateSecretStorageDialog_centeredBody,.mx_CreateSecretStorageDialog_centeredTitle{text-align:center}.mx_CreateSecretStorageDialog_primaryContainer{padding-top:20px}.mx_CreateSecretStorageDialog_primaryContainer:after{content:"";clear:both;display:block}.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton{margin-bottom:16px;padding:11px}.mx_CreateSecretStorageDialog_optionTitle{color:#45474a;font-weight:600;font-size:1.8rem;padding-bottom:10px}.mx_CreateSecretStorageDialog_optionIcon{display:inline-block;width:24px;height:24px;margin-right:8px;position:relative;top:5px;background-color:#2e2f32}.mx_CreateSecretStorageDialog_optionIcon_securePhrase{-webkit-mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg);mask-image:url(../../img/feather-customised/secure-phrase.a9d3725.svg)}.mx_CreateSecretStorageDialog_optionIcon_secureBackup{-webkit-mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg);mask-image:url(../../img/feather-customised/secure-backup.329cb1c.svg)}.mx_CreateSecretStorageDialog_passPhraseContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_Field.mx_CreateSecretStorageDialog_passPhraseField{margin-top:0}.mx_CreateSecretStorageDialog_passPhraseMatch{width:200px;margin-left:20px}.mx_CreateSecretStorageDialog_recoveryKeyContainer{width:380px;margin-left:auto;margin-right:auto}.mx_CreateSecretStorageDialog_recoveryKey{font-weight:700;text-align:center;padding:20px;color:#888;background-color:#f7f7f7;border-radius:6px;word-spacing:1em;margin-bottom:20px}.mx_CreateSecretStorageDialog_recoveryKeyButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton{width:160px;padding-left:0;padding-right:0;white-space:nowrap}.mx_CreateSecretStorageDialog_continueSpinner{margin-top:33px;text-align:right}.mx_CreateSecretStorageDialog_continueSpinner img{width:20px;height:20px}.mx_KeyBackupFailedDialog .mx_Dialog_title{margin-bottom:32px}.mx_KeyBackupFailedDialog_title{position:relative;padding-left:45px;padding-bottom:10px}.mx_KeyBackupFailedDialog_title:before{-webkit-mask:url(../../img/e2e/lock-warning-filled.993fb6c.svg);mask:url(../../img/e2e/lock-warning-filled.993fb6c.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#2e2f32;content:"";position:absolute;top:-6px;right:0;bottom:0;left:0}.mx_KeyBackupFailedDialog .mx_Dialog_buttons{margin-top:36px}.mx_RestoreKeyBackupDialog_keyStatus{height:30px}.mx_RestoreKeyBackupDialog_primaryContainer{padding:20px}.mx_RestoreKeyBackupDialog_passPhraseInput,.mx_RestoreKeyBackupDialog_recoveryKeyInput{width:300px;border:1px solid #0dbd8b;border-radius:5px;padding:10px}.mx_RestoreKeyBackupDialog_content>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:110px}.mx_NetworkDropdown{height:32px;position:relative;padding-right:32px;margin-left:auto;margin-right:9px;margin-top:12px}.mx_NetworkDropdown,.mx_NetworkDropdown .mx_AccessibleButton{width:-webkit-max-content;width:-moz-max-content;width:max-content}.mx_NetworkDropdown_menu{min-width:204px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border:1px solid #c1c1c1;background-color:#fff;max-height:calc(100vh - 20px);overflow-y:auto}.mx_NetworkDropdown_menu_network{font-weight:700}.mx_NetworkDropdown_server{padding:12px 0;border-bottom:1px solid #9fa9ba}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title{padding:0 10px;font-size:1.5rem;font-weight:600;line-height:2rem;margin-bottom:4px;position:relative}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title .mx_AccessibleButton{position:absolute;display:inline;right:10px;height:16px;width:16px;margin-top:2px}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title .mx_AccessibleButton:after{content:"";position:absolute;width:16px;height:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_subtitle{padding:0 10px;font-size:1rem;line-height:1.4rem;margin-top:-4px;margin-bottom:4px;color:#61708b}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network{font-size:1.2rem;line-height:1.6rem;padding:4px 10px;cursor:pointer;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network[aria-checked=true]:after{content:"";position:absolute;width:16px;height:16px;right:10px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_NetworkDropdown_server_add:hover,.mx_NetworkDropdown_server_network:hover{background-color:#f3f8fd}.mx_NetworkDropdown_server_add{padding:16px 10px 16px 32px;position:relative;border-radius:0 0 4px 4px}.mx_NetworkDropdown_server_add:before{content:"";position:absolute;width:16px;height:16px;left:7px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/plus.38ae979.svg);mask-image:url(../../img/feather-customised/plus.38ae979.svg);background-color:#61708b}.mx_NetworkDropdown_handle{position:relative}.mx_NetworkDropdown_handle:after{content:"";position:absolute;width:26px;height:26px;right:-27.5px;top:-3px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);background-color:#2e2f32}.mx_NetworkDropdown_handle .mx_NetworkDropdown_handle_server{color:#61708b;font-size:1.2rem}.mx_NetworkDropdown_dialog .mx_Dialog{width:45vw}.mx_AccessibleButton{cursor:pointer}.mx_AccessibleButton_disabled{cursor:default}.mx_AccessibleButton_hasKind{padding:7px 18px;text-align:center;border-radius:8px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:1.4rem}.mx_AccessibleButton_kind_primary{color:#fff;background-color:#0dbd8b;font-weight:600}.mx_AccessibleButton_kind_primary_outline{color:#0dbd8b;background-color:#fff;border:1px solid #0dbd8b;font-weight:600}.mx_AccessibleButton_kind_secondary{color:#0dbd8b;font-weight:600}.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm{padding:5px 12px;color:#fff;background-color:#0dbd8b}.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_kind_danger{color:#fff;background-color:#ff4b55}.mx_AccessibleButton_kind_danger_outline{color:#ff4b55;background-color:#fff;border:1px solid #ff4b55}.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled{color:#fff;background-color:#f5b6bb}.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled{color:#f5b6bb;border-color:#f5b6bb}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm{padding:5px 12px;color:#fff;background-color:#ff4b55}.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled{color:#fff;background-color:#f5b6bb}.mx_AccessibleButton_kind_link{color:#0dbd8b;background-color:transparent}.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled{opacity:.4}.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm{padding:5px 12px;color:#0dbd8b;background-color:transparent}.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled{opacity:.4}.mx_AddressSelector{position:absolute;background-color:#fff;width:485px;max-height:116px;overflow-y:auto;border-radius:3px;border:1px solid #0dbd8b;cursor:pointer;z-index:1}.mx_AddressSelector.mx_AddressSelector_empty{display:none}.mx_AddressSelector_addressListElement .mx_AddressTile{background-color:#fff;border:1px solid #fff}.mx_AddressSelector_addressListElement.mx_AddressSelector_selected{background-color:#f2f5f8}.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile{background-color:#f2f5f8;border:1px solid #f2f5f8}.mx_AddressTile{display:inline-block;border-radius:3px;background-color:rgba(74,73,74,.1);border:1px solid #e7e7e7;line-height:2.6rem;color:#2e2f32;font-size:1.4rem;font-weight:400;margin-right:4px}.mx_AddressTile.mx_AddressTile_error{background-color:rgba(255,0,100,.1);color:#ff4b55;border-color:#ff4b55}.mx_AddressTile_network{padding-right:4px}.mx_AddressTile_avatar,.mx_AddressTile_network{display:inline-block;position:relative;padding-left:2px;vertical-align:middle}.mx_AddressTile_avatar{padding-right:7px}.mx_AddressTile_mx{display:inline-block;margin:0;border:0;padding:0}.mx_AddressTile_name{display:inline-block;padding-right:4px;font-weight:600;overflow:hidden;height:26px;vertical-align:middle}.mx_AddressTile_name.mx_AddressTile_justified{width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_id{display:inline-block;padding-right:11px}.mx_AddressTile_id.mx_AddressTile_justified{width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_unknownMx{display:inline-block;font-weight:600;padding-right:11px}.mx_AddressTile_unknownMxl.mx_AddressTile_justified{width:380px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_email{display:inline-block;font-weight:600;padding-right:11px}.mx_AddressTile_email.mx_AddressTile_justified{width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_unknown{display:inline-block;padding-right:11px}.mx_AddressTile_unknown.mx_AddressTile_justified{width:380px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.mx_AddressTile_dismiss{display:inline-block;padding-right:11px;padding-left:1px;cursor:pointer}.mx_AddressTile_dismiss object{pointer-events:none}.mx_DesktopBuildsNotice{text-align:center;padding:0 16px}.mx_DesktopBuildsNotice>*{vertical-align:middle}.mx_DesktopBuildsNotice>img{margin-right:8px}.mx_desktopCapturerSourcePicker{overflow:hidden}.mx_desktopCapturerSourcePicker_tabLabels{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 0 8px}.mx_desktopCapturerSourcePicker_tabLabel,.mx_desktopCapturerSourcePicker_tabLabel_selected{width:100%;text-align:center;border-radius:8px;padding:8px 0;font-size:1.3rem}.mx_desktopCapturerSourcePicker_tabLabel_selected{background-color:#0dbd8b;color:#fff}.mx_desktopCapturerSourcePicker_panel{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;height:500px;overflow:overlay}.mx_desktopCapturerSourcePicker_stream_button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:8px;border-radius:4px}.mx_desktopCapturerSourcePicker_stream_button:focus,.mx_desktopCapturerSourcePicker_stream_button:hover{background:#fff}.mx_desktopCapturerSourcePicker_stream_thumbnail{margin:4px;width:312px}.mx_desktopCapturerSourcePicker_stream_name{margin:0 4px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:312px}.mx_DirectorySearchBox{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:9px;padding-right:9px}.mx_DirectorySearchBox_joinButton{display:table-cell;padding:3px 10px;background-color:#f2f5f8;border-radius:3px;background-image:url(../../img/icon-return.cb24475.svg);background-position:8px 70%;background-repeat:no-repeat;text-indent:18px;font-weight:600;font-size:1.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.mx_DirectorySearchBox_clear{background-color:#ff4b55;-webkit-mask:url(../../img/cancel.4b9715b.svg);mask:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:10px;mask-size:10px;width:15px;height:15px;cursor:pointer}.mx_Dropdown{position:relative;color:#2e2f32}.mx_Dropdown_disabled{opacity:.3}.mx_Dropdown_input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;border-radius:3px;border:1px solid #c7c7c7;font-size:1.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_Dropdown_input.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_Dropdown_input:focus{border-color:#238cf5}.mx_Dropdown_input.mx_AccessibleButton:focus{-webkit-filter:none;filter:none}.mx_Dropdown_arrow{width:10px;height:6px;padding-right:9px;-webkit-mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_Dropdown_option{height:35px;line-height:3.5rem;padding-left:8px;padding-right:8px}.mx_Dropdown_input>.mx_Dropdown_option{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Dropdown_input>.mx_Dropdown_option,.mx_Dropdown_option div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_Dropdown_option .mx_Dropdown_option_emoji,.mx_Dropdown_option img{margin:5px;width:16px;vertical-align:middle}.mx_Dropdown_option_emoji{font-size:1.6rem;line-height:1.6rem}input.mx_Dropdown_option,input.mx_Dropdown_option:focus{font-weight:400;border:0;padding-top:0;padding-bottom:0;width:60%}.mx_Dropdown_menu{position:absolute;left:-1px;right:-1px;top:100%;z-index:2;margin:0;padding:0;border-radius:3px;border:1px solid #238cf5;background-color:#fff;max-height:200px;overflow-y:auto}.mx_Dropdown_menu .mx_Dropdown_option{height:auto;min-height:35px}.mx_Dropdown_menu .mx_Dropdown_option_highlight{background-color:#ddd}.mx_Dropdown_searchPrompt{font-weight:400;margin-left:5px;margin-bottom:5px}.mx_EditableItemList{margin-top:12px;margin-bottom:10px}.mx_EditableItem{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:5px}.mx_EditableItem_delete{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;margin-right:5px;cursor:pointer;vertical-align:middle;width:14px;height:14px;-webkit-mask-image:url(../../img/feather-customised/cancel.23c2689.svg);mask-image:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#ff4b55;-webkit-mask-size:100%;mask-size:100%}.mx_EditableItem_email{vertical-align:middle}.mx_EditableItem_promptText{margin-right:10px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.mx_EditableItem_confirmBtn{margin-right:5px}.mx_EditableItem_item{-webkit-box-flex:1;-ms-flex:auto 1 0px;flex:auto 1 0;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:calc(100% - 14px);overflow-x:hidden;text-overflow:ellipsis}.mx_EditableItemList_label{margin-bottom:5px}.mx_ErrorBoundary{width:100%;height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_ErrorBoundary,.mx_ErrorBoundary_body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ErrorBoundary_body{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:400px}.mx_ErrorBoundary_body .mx_AccessibleButton{margin-top:5px}.mx_EventListSummary{position:relative}.mx_TextualEvent.mx_EventListSummary_summary{font-size:1.4rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_EventListSummary_avatars{display:inline-block;margin-right:8px;padding-top:8px;line-height:1.2rem}.mx_EventListSummary_avatars .mx_BaseAvatar{margin-right:-4px;cursor:pointer}.mx_EventListSummary_toggle{color:#0dbd8b;cursor:pointer;float:right;margin-right:10px;margin-top:8px}.mx_EventListSummary_line{border-bottom:1px solid transparent;margin-left:63px;line-height:3rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary{font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary .mx_EventTile_line{line-height:2rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary_line{line-height:2.2rem}.mx_MatrixChat_useCompactLayout .mx_EventListSummary_toggle{margin-top:3px}.mx_MatrixChat_useCompactLayout .mx_TextualEvent.mx_EventListSummary_summary{font-size:1.3rem}.mx_FacePile .mx_FacePile_faces{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;vertical-align:middle}.mx_FacePile .mx_FacePile_faces>.mx_FacePile_face+.mx_FacePile_face{margin-right:-8px}.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_image{border:1px solid #fff}.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_initial{margin:1px}.mx_FacePile .mx_FacePile_faces .mx_FacePile_more{position:relative;border-radius:100%;width:30px;height:30px;background-color:hsla(0,0%,91%,.77)}.mx_FacePile .mx_FacePile_faces .mx_FacePile_more:before{content:"";z-index:1;position:absolute;top:0;left:0;height:inherit;width:inherit;background:#8d99a5;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_FacePile .mx_FacePile_summary{margin-left:12px;font-size:1.4rem;line-height:2.4rem;color:#8d99a5}.mx_Field{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;position:relative;margin:1em 0;border-radius:4px;-webkit-transition:border-color .25s;transition:border-color .25s;border:1px solid #e7e7e7}.mx_Field_prefix{border-right:1px solid #e7e7e7}.mx_Field_postfix{border-left:1px solid #e7e7e7}.mx_Field input,.mx_Field select,.mx_Field textarea{font-weight:400;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;border:none;border-radius:4px;padding:8px 9px;color:#2e2f32;background-color:#fff;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.mx_Field select{-moz-appearance:none;-webkit-appearance:none}.mx_Field_select:before{content:"";position:absolute;top:15px;right:10px;width:10px;height:6px;-webkit-mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);mask:url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#2e2f32;z-index:1;pointer-events:none}.mx_Field:focus-within{border-color:#238cf5}.mx_Field input:focus,.mx_Field select:focus,.mx_Field textarea:focus{outline:0}.mx_Field input::-webkit-input-placeholder,.mx_Field textarea::-webkit-input-placeholder{-webkit-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::-moz-placeholder,.mx_Field textarea::-moz-placeholder{-moz-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input:-ms-input-placeholder,.mx_Field textarea:-ms-input-placeholder{-ms-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::-ms-input-placeholder,.mx_Field textarea::-ms-input-placeholder{-ms-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input::placeholder,.mx_Field textarea::placeholder{-webkit-transition:color .25s ease-in 0s;transition:color .25s ease-in 0s;color:transparent}.mx_Field input:placeholder-shown:focus::-webkit-input-placeholder,.mx_Field textarea:placeholder-shown:focus::-webkit-input-placeholder{-webkit-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::-moz-placeholder,.mx_Field textarea:placeholder-shown:focus::-moz-placeholder{-moz-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus:-ms-input-placeholder,.mx_Field textarea:placeholder-shown:focus:-ms-input-placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::-ms-input-placeholder,.mx_Field textarea:placeholder-shown:focus::-ms-input-placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:-moz-placeholder-shown:focus::placeholder,.mx_Field textarea:-moz-placeholder-shown:focus::placeholder{-moz-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:-ms-input-placeholder:focus::placeholder,.mx_Field textarea:-ms-input-placeholder:focus::placeholder{-ms-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field input:placeholder-shown:focus::placeholder,.mx_Field textarea:placeholder-shown:focus::placeholder{-webkit-transition:color .25s ease-in .1s;transition:color .25s ease-in .1s;color:#888}.mx_Field label{-webkit-transition:font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s;transition:font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s;color:#2e2f32;background-color:transparent;font-size:1.4rem;position:absolute;left:0;top:0;margin:7px 8px;padding:2px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 20px)}.mx_Field input:not(:-moz-placeholder-shown)+label,.mx_Field textarea:not(:-moz-placeholder-shown)+label{-moz-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field input:not(:-ms-input-placeholder)+label,.mx_Field textarea:not(:-ms-input-placeholder)+label{-ms-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field_labelAlwaysTopLeft label,.mx_Field input:focus+label,.mx_Field input:not(:placeholder-shown)+label,.mx_Field select+label,.mx_Field textarea:focus+label,.mx_Field textarea:not(:placeholder-shown)+label{-webkit-transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;transition:font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s;font-size:1rem;top:-13px;padding:0 2px;background-color:#fff;pointer-events:auto}.mx_Field input:focus+label,.mx_Field select:focus+label,.mx_Field textarea:focus+label{color:#238cf5}.mx_Field input:disabled,.mx_Field input:disabled+label,.mx_Field select:disabled,.mx_Field select:disabled+label,.mx_Field textarea:disabled,.mx_Field textarea:disabled+label{background-color:#fff;color:#888}.mx_Field_valid.mx_Field,.mx_Field_valid.mx_Field:focus-within{border-color:#0dbd8b}.mx_Field_valid.mx_Field:focus-within label,.mx_Field_valid.mx_Field label{color:#0dbd8b}.mx_Field_invalid.mx_Field,.mx_Field_invalid.mx_Field:focus-within{border-color:#ff4b55}.mx_Field_invalid.mx_Field:focus-within label,.mx_Field_invalid.mx_Field label{color:#ff4b55}.mx_Field_tooltip{margin-top:-12px;margin-left:4px;width:200px}.mx_Field_tooltip.mx_Field_valid{-webkit-animation:mx_fadeout 1s 2s forwards;animation:mx_fadeout 1s 2s forwards}.mx_Field .mx_Dropdown_input{border:initial;border-radius:0;border-radius:initial}.mx_Field .mx_CountryDropdown{width:7.8rem}.mx_FormButton{line-height:1.6rem;padding:5px 15px;font-size:1.2rem;height:-webkit-min-content;height:-moz-min-content;height:min-content}.mx_FormButton:not(:last-child){margin-right:8px}.mx_FormButton.mx_AccessibleButton_kind_primary{color:#0dbd8b;background-color:rgba(3,179,129,.16)}.mx_FormButton.mx_AccessibleButton_kind_danger{color:#ff4b55;background-color:rgba(255,75,85,.16)}.mx_FormButton.mx_AccessibleButton_kind_secondary{color:#737d8c;border:1px solid #737d8c;background-color:unset}.mx_ImageView{width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_ImageView,.mx_ImageView_image_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}.mx_ImageView_image_wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mx_ImageView_image{pointer-events:all;-ms-flex-negative:0;flex-shrink:0}.mx_ImageView_panel{width:100%;height:68px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_ImageView_info_wrapper,.mx_ImageView_panel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ImageView_info_wrapper{pointer-events:all;padding-left:32px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:#fff}.mx_ImageView_info{padding-left:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_ImageView_info_sender{font-weight:700}.mx_ImageView_toolbar{padding-right:16px;pointer-events:all;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ImageView_button{margin-left:24px;display:block}.mx_ImageView_button:before{content:"";height:22px;width:22px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;display:block;background-color:#c1c6cd}.mx_ImageView_button_rotateCW:before{-webkit-mask-image:url(../../img/image-view/rotate-cw.60d903e.svg);mask-image:url(../../img/image-view/rotate-cw.60d903e.svg)}.mx_ImageView_button_rotateCCW:before{-webkit-mask-image:url(../../img/image-view/rotate-ccw.b28ae4a.svg);mask-image:url(../../img/image-view/rotate-ccw.b28ae4a.svg)}.mx_ImageView_button_zoomOut:before{-webkit-mask-image:url(../../img/image-view/zoom-out.8506f80.svg);mask-image:url(../../img/image-view/zoom-out.8506f80.svg)}.mx_ImageView_button_zoomIn:before{-webkit-mask-image:url(../../img/image-view/zoom-in.3b3f32e.svg);mask-image:url(../../img/image-view/zoom-in.3b3f32e.svg)}.mx_ImageView_button_download:before{-webkit-mask-image:url(../../img/image-view/download.2eac468.svg);mask-image:url(../../img/image-view/download.2eac468.svg)}.mx_ImageView_button_more:before{-webkit-mask-image:url(../../img/image-view/more.0427c6c.svg);mask-image:url(../../img/image-view/more.0427c6c.svg)}.mx_ImageView_button_close{border-radius:100%;background:#21262c}.mx_ImageView_button_close:before{width:32px;height:32px;-webkit-mask-image:url(../../img/image-view/close.97d1731.svg);mask-image:url(../../img/image-view/close.97d1731.svg);-webkit-mask-size:40%;mask-size:40%}.mx_InfoTooltip_icon,.mx_InfoTooltip_icon:before{width:16px;height:16px;display:inline-block}.mx_InfoTooltip_icon:before{background-color:#61708b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/element-icons/info.dc07e19.svg);mask-image:url(../../img/element-icons/info.dc07e19.svg)}.mx_InlineSpinner{display:inline}.mx_InlineSpinner_spin img{margin:0 6px;vertical-align:-3px}.mx_InviteReason{position:relative;margin-bottom:1em}.mx_InviteReason .mx_InviteReason_reason{visibility:visible}.mx_InviteReason .mx_InviteReason_view{display:none;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;color:#737d8c}.mx_InviteReason .mx_InviteReason_view:before{content:"";margin-right:8px;background-color:#737d8c;-webkit-mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);display:inline-block;width:18px;height:14px}.mx_InviteReason_hidden .mx_InviteReason_reason{visibility:hidden}.mx_InviteReason_hidden .mx_InviteReason_view{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ManageIntegsButton_error{position:relative;float:right;cursor:not-allowed}.mx_ManageIntegsButton_error img{position:absolute;right:-5px;top:-5px}.mx_ManageIntegsButton_errorPopup{position:absolute;top:110%;left:-275%;width:550%;padding:30%;font-size:10pt;line-height:1.5em;border-radius:5px;background-color:#0dbd8b;color:#fff;text-align:center;z-index:1000}.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup{display:none}.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup{display:inline}.mx_MiniAvatarUploader{position:relative;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_MiniAvatarUploader .mx_Tooltip{display:inline-block;position:absolute;z-index:unset;width:-webkit-max-content;width:-moz-max-content;width:max-content;left:72px;top:0}.mx_MiniAvatarUploader:after,.mx_MiniAvatarUploader:before{content:"";position:absolute;height:26px;width:26px;right:-6px;bottom:-6px}.mx_MiniAvatarUploader:before{background-color:#fff;border-radius:50%;z-index:1}.mx_MiniAvatarUploader:after{background-color:#737d8c;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/camera.a81a395.svg);mask-image:url(../../img/element-icons/camera.a81a395.svg);-webkit-mask-size:16px;mask-size:16px;z-index:2}.mx_MiniAvatarUploader.mx_MiniAvatarUploader_busy:after{background:url(../../img/spinner.0b29ec9.gif) no-repeat 50%;background-size:80%;-webkit-mask:unset;mask:unset}.mx_MiniAvatarUploader_input{display:none}.mx_PowerSelector{width:100%}.mx_PowerSelector .mx_Field input,.mx_PowerSelector .mx_Field select{-webkit-box-sizing:border-box;box-sizing:border-box}progress.mx_ProgressBar{height:6px;width:60px;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:6px}progress.mx_ProgressBar::-moz-progress-bar{border-radius:6px}progress.mx_ProgressBar::-webkit-progress-bar,progress.mx_ProgressBar::-webkit-progress-value{border-radius:6px}progress.mx_ProgressBar{color:#0dbd8b}progress.mx_ProgressBar::-moz-progress-bar{background-color:#0dbd8b}progress.mx_ProgressBar::-webkit-progress-value{background-color:#0dbd8b}progress.mx_ProgressBar{background-color:rgba(141,151,165,.2)}progress.mx_ProgressBar::-webkit-progress-bar{background-color:rgba(141,151,165,.2)}progress.mx_ProgressBar ::-webkit-progress-value{-webkit-transition:width 1s;transition:width 1s}progress.mx_ProgressBar ::-moz-progress-bar{-moz-transition:padding-bottom 1s;transition:padding-bottom 1s;padding-bottom:var(--value);transform-origin:0 0;transform:rotate(-90deg) translateX(-15px);padding-left:15px;height:0}.mx_QRCode img{border-radius:8px}.mx_ReplyThread{margin-top:0}.mx_ReplyThread .mx_DateSeparator{font-size:1em!important;margin-top:0;margin-bottom:0;padding-bottom:1px;bottom:-5px}.mx_ReplyThread_show{cursor:pointer}blockquote.mx_ReplyThread{margin-left:0;padding-left:10px;border-left:4px solid #ddd}.mx_ResizeHandle{cursor:row-resize;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;z-index:100}.mx_ResizeHandle.mx_ResizeHandle_horizontal{margin:0 -5px;padding:0 5px;cursor:col-resize}.mx_ResizeHandle.mx_ResizeHandle_vertical{margin:-5px 0;padding:5px 0;cursor:row-resize}.mx_MatrixChat>.mx_ResizeHandle.mx_ResizeHandle_horizontal{margin:0 -10px 0 0;padding:0 8px 0 0}.mx_ResizeHandle>div{background:transparent}.mx_ResizeHandle.mx_ResizeHandle_horizontal>div{width:1px;height:100%}.mx_ResizeHandle.mx_ResizeHandle_vertical>div{height:1px}.mx_AtRoomPill,.mx_GroupPill,.mx_RoomPill,.mx_UserPill{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;border-radius:1.6rem;line-height:1.5rem;padding-left:0}a.mx_Pill{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 1ch)}.mx_Pill{padding:.1rem .4em .1rem .1rem;vertical-align:text-top;line-height:1.7rem}.mx_EventTile_content .markdown-body a.mx_GroupPill,.mx_GroupPill{color:#fff;background-color:#aaa}.mx_EventTile_content .markdown-body a.mx_Pill{text-decoration:none}.mx_EventTile_content .markdown-body a.mx_UserPill,.mx_UserPill{color:#2e2f32;background-color:rgba(0,0,0,.1)}.mx_UserPill_selected{background-color:#0dbd8b!important}.mx_EventTile_content .markdown-body a.mx_AtRoomPill,.mx_EventTile_content .mx_AtRoomPill,.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,.mx_MessageComposer_input .mx_AtRoomPill{color:#fff;background-color:#ff4b55}.mx_EventTile_content .markdown-body a.mx_GroupPill,.mx_EventTile_content .markdown-body a.mx_RoomPill,.mx_GroupPill,.mx_RoomPill{color:#fff;background-color:#aaa}.mx_EventTile_body .mx_GroupPill,.mx_EventTile_body .mx_RoomPill,.mx_EventTile_body .mx_UserPill{cursor:pointer}.mx_AtRoomPill .mx_BaseAvatar,.mx_GroupPill .mx_BaseAvatar,.mx_RoomPill .mx_BaseAvatar,.mx_UserPill .mx_BaseAvatar{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:10rem;margin-right:.24rem}.mx_Markdown_BOLD{font-weight:700}.mx_Markdown_ITALIC{font-style:italic}.mx_Markdown_CODE{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.mx_Markdown_HR{display:block;background:#e9e9e9}.mx_Markdown_STRIKETHROUGH{text-decoration:line-through}.mx_RoleButton{margin-left:4px;margin-right:4px;cursor:pointer;display:inline-block}.mx_RoleButton object{pointer-events:none}.mx_RoleButton_tooltip{display:inline-block;position:relative;top:-25px;left:6px}.mx_RoomAliasField{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;min-width:0;max-width:100%}.mx_RoomAliasField input{width:150px;padding-left:0;padding-right:0}.mx_RoomAliasField input::-webkit-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::-moz-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input:-ms-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::-ms-input-placeholder{color:#888;font-weight:400}.mx_RoomAliasField input::placeholder{color:#888;font-weight:400}.mx_RoomAliasField .mx_Field_postfix,.mx_RoomAliasField .mx_Field_prefix{color:#888;border-left:none;border-right:none;font-weight:600;padding:9px 10px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomAliasField .mx_Field_postfix{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 180px)}.mx_SSOButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_SSOButtons .mx_SSOButtons_row+.mx_SSOButtons_row{margin-top:16px}.mx_SSOButtons .mx_SSOButton{position:relative;width:100%;padding:7px 32px;text-align:center;border-radius:8px;display:inline-block;font-size:1.4rem;font-weight:600;border:1px solid #e7e7e7;color:#2e2f32}.mx_SSOButtons .mx_SSOButton>img{-o-object-fit:contain;object-fit:contain;position:absolute;left:8px;top:4px}.mx_SSOButtons .mx_SSOButton_default{color:#0dbd8b;background-color:#fff;border-color:#0dbd8b}.mx_SSOButtons .mx_SSOButton_default.mx_SSOButton_primary{color:#fff;background-color:#0dbd8b}.mx_SSOButtons .mx_SSOButton_mini{-webkit-box-sizing:border-box;box-sizing:border-box;width:50px;height:50px;min-width:50px;padding:12px}.mx_SSOButtons .mx_SSOButton_mini>img{left:12px;top:12px}.mx_SSOButtons .mx_SSOButton_mini+.mx_SSOButton_mini{margin-left:16px}.mx_ServerPicker{margin-bottom:14px;border-bottom:1px solid rgba(141,151,165,.2);display:grid;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto auto;font-size:1.4rem;line-height:2rem}.mx_ServerPicker>h3{font-weight:600;margin:0 0 20px;grid-column:1;grid-row:1}.mx_ServerPicker .mx_ServerPicker_help{width:20px;height:20px;background-color:#c1c6cd;border-radius:10px;grid-column:2;grid-row:1;margin-left:auto;text-align:center;color:#fff;font-size:16px;position:relative}.mx_ServerPicker .mx_ServerPicker_help:before{content:"";width:24px;height:24px;position:absolute;top:-2px;left:-2px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/element-icons/i.80d84f3.svg);mask-image:url(../../img/element-icons/i.80d84f3.svg);background:#fff}.mx_ServerPicker .mx_ServerPicker_server{color:#232f32;grid-column:1;grid-row:2;margin-bottom:16px}.mx_ServerPicker .mx_ServerPicker_change{padding:0;font-size:inherit;grid-column:2;grid-row:2}.mx_ServerPicker .mx_ServerPicker_desc{margin-top:-12px;color:#8d99a5;grid-column:1/2;grid-row:3;margin-bottom:16px}.mx_ServerPicker_helpDialog .mx_Dialog_content{width:456px}.mx_Slider{position:relative;margin:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_Slider_dotContainer{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_Slider_bar,.mx_Slider_dotContainer{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_Slider_bar{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;height:1em;width:100%;padding:0 .5em;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_Slider_bar>hr{width:100%;height:.4em;background-color:#c1c9d6;border:0}.mx_Slider_selection{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:calc(100% - 1em);height:1em;position:absolute;pointer-events:none}.mx_Slider_selectionDot{position:absolute;width:1.1em;height:1.1em;background-color:#0dbd8b;border-radius:50%;-webkit-box-shadow:0 0 6px #d3d3d3;box-shadow:0 0 6px #d3d3d3;z-index:10}.mx_Slider_selection>hr{margin:0;border:.2em solid #0dbd8b}.mx_Slider_dot{height:1em;width:1em;border-radius:50%;background-color:#c1c9d6;z-index:0}.mx_Slider_dotActive{background-color:#0dbd8b}.mx_Slider_dotValue{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#c1c9d6}.mx_Slider_labelContainer{width:1em}.mx_Slider_label{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;left:-50%}.mx_Spinner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_MatrixChat_middlePanel .mx_Spinner{height:auto}.mx_Checkbox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_Checkbox input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0}.mx_Checkbox input[type=checkbox]+label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_Checkbox input[type=checkbox]+label>.mx_Checkbox_background{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-negative:0;flex-shrink:0;height:1.6rem;width:1.6rem;size:.5rem;border:.15rem solid rgba(97,112,139,.5);-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:.4rem}.mx_Checkbox input[type=checkbox]+label>.mx_Checkbox_background img{display:none;height:100%;width:100%;-webkit-filter:invert(100%);filter:invert(100%)}.mx_Checkbox input[type=checkbox]:checked+label>.mx_Checkbox_background{background:#0dbd8b;border-color:#0dbd8b}.mx_Checkbox input[type=checkbox]:checked+label>.mx_Checkbox_background img{display:block}.mx_Checkbox input[type=checkbox]+label>:not(.mx_Checkbox_background){margin-left:10px}.mx_Checkbox input[type=checkbox]:disabled+label{opacity:.5;cursor:not-allowed}.mx_Checkbox input[type=checkbox]:checked:disabled+label>.mx_Checkbox_background{background-color:#0dbd8b;border-color:#0dbd8b}.mx_Checkbox input[type=checkbox].focus-visible+label .mx_Checkbox_background{outline-width:2px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.mx_Checkbox input[type=checkbox].focus-visible+label .mx_Checkbox_background{outline-color:-webkit-focus-ring-color;outline-style:auto}}.mx_RadioButton{position:relative;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.mx_RadioButton,.mx_RadioButton>.mx_RadioButton_content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_RadioButton>.mx_RadioButton_content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-left:8px;margin-right:8px}.mx_RadioButton .mx_RadioButton_spacer{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;height:1.6rem;width:1.6rem}.mx_RadioButton>input[type=radio]{margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mx_RadioButton>input[type=radio]+div{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:1.6rem;width:1.6rem;margin-left:2px;border:.15rem solid #61708b;border-radius:1.6rem}.mx_RadioButton>input[type=radio]+div>div{-webkit-box-sizing:border-box;box-sizing:border-box;height:.8rem;width:.8rem;border-radius:.8rem}.mx_RadioButton>input[type=radio].focus-visible+div{outline-width:2px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.mx_RadioButton>input[type=radio].focus-visible+div{outline-color:-webkit-focus-ring-color;outline-style:auto}}.mx_RadioButton>input[type=radio]:checked+div{border-color:#0dbd8b}.mx_RadioButton>input[type=radio]:checked+div>div{background:#0dbd8b}.mx_RadioButton>input[type=radio]:disabled+div,.mx_RadioButton>input[type=radio]:disabled+div+span{opacity:.5;cursor:not-allowed}.mx_RadioButton>input[type=radio]:disabled+div{border-color:#61708b}.mx_RadioButton>input[type=radio]:checked:disabled+div>div{background-color:#61708b}.mx_RadioButton_outlined{border:1px solid #e3e8f0;border-radius:8px}.mx_RadioButton_checked{border-color:#0dbd8b}.mx_SyntaxHighlight{background:none!important;color:#747474!important}.mx_TextWithTooltip_tooltip{display:none}.mx_ToggleSwitch{-webkit-transition:background-color .2s ease-out .1s;transition:background-color .2s ease-out .1s;width:4.4rem;height:2rem;border-radius:1.5rem;padding:2px;background-color:#c1c9d6;opacity:.5}.mx_ToggleSwitch_enabled{cursor:pointer;opacity:1}.mx_ToggleSwitch.mx_ToggleSwitch_on{background-color:#0dbd8b}.mx_ToggleSwitch.mx_ToggleSwitch_on>.mx_ToggleSwitch_ball{left:calc(100% - 2rem)}.mx_ToggleSwitch_ball{position:relative;width:2rem;height:2rem;border-radius:2rem;background-color:#fff;-webkit-transition:left .15s ease-out .1s;transition:left .15s ease-out .1s;left:0}@-webkit-keyframes mx_fadein{0%{opacity:0}to{opacity:1}}@keyframes mx_fadein{0%{opacity:0}to{opacity:1}}@-webkit-keyframes mx_fadeout{0%{opacity:1}to{opacity:0}}@keyframes mx_fadeout{0%{opacity:1}to{opacity:0}}.mx_Tooltip_chevron{position:absolute;left:-7px;top:10px;width:0;height:0;border-top:7px solid transparent;border-right:7px solid #e7e7e7;border-bottom:7px solid transparent}.mx_Tooltip_chevron:after{content:"";width:0;height:0;border-top:6px solid transparent;border-right:6px solid #fff;border-bottom:6px solid transparent;position:absolute;top:-6px;left:1px}.mx_Tooltip{position:fixed;border-radius:8px;-webkit-box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);box-shadow:4px 4px 12px 0 rgba(118,131,156,.6);z-index:6000;padding:10px;pointer-events:none;line-height:1.4rem;font-size:1.2rem;font-weight:500;max-width:200px;word-break:break-word;margin-right:50px;background-color:#27303a;color:#fff;border:0;text-align:center}.mx_Tooltip,.mx_Tooltip .mx_Tooltip_chevron{display:none}.mx_Tooltip.mx_Tooltip_visible{-webkit-animation:mx_fadein .2s forwards;animation:mx_fadein .2s forwards}.mx_Tooltip.mx_Tooltip_invisible{-webkit-animation:mx_fadeout .1s forwards;animation:mx_fadeout .1s forwards}.mx_Field_tooltip{background-color:#fff;color:#2e2f32;border:1px solid #e7e7e7;text-align:unset}.mx_Field_tooltip .mx_Tooltip_chevron{display:unset}.mx_Tooltip_title{font-weight:600}.mx_Tooltip_sub{opacity:.7;margin-top:4px}.mx_TooltipButton{display:inline-block;width:11px;height:11px;margin-left:5px;border:2px solid #dbdbdb;border-radius:20px;color:#dbdbdb;-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;opacity:.6;line-height:1.1rem;text-align:center;cursor:pointer}.mx_TooltipButton:hover{opacity:1}.mx_TooltipButton_container{position:relative;top:-18px;left:4px}.mx_TooltipButton_helpText{width:400px;text-align:start;line-height:17px!important}.mx_Validation{position:relative}.mx_Validation_details{padding-left:20px;margin:0}.mx_Validation_description+.mx_Validation_details{margin:1em 0 0}.mx_Validation_detail{position:relative;font-weight:400;list-style:none;margin-bottom:.5em}.mx_Validation_detail:last-child{margin-bottom:0}.mx_Validation_detail:before{content:"";position:absolute;width:14px;height:14px;top:0;left:-18px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_Validation_detail.mx_Validation_valid{color:#0dbd8b}.mx_Validation_detail.mx_Validation_valid:before{-webkit-mask-image:url(../../img/feather-customised/check.5745b4e.svg);mask-image:url(../../img/feather-customised/check.5745b4e.svg);background-color:#0dbd8b}.mx_Validation_detail.mx_Validation_invalid{color:#ff4b55}.mx_Validation_detail.mx_Validation_invalid:before{-webkit-mask-image:url(../../img/feather-customised/x.9662221.svg);mask-image:url(../../img/feather-customised/x.9662221.svg);background-color:#ff4b55}.mx_EmojiPicker{width:340px;height:450px;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_EmojiPicker_body{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.mx_EmojiPicker_header{padding:4px 8px 0;border-bottom:1px solid #e9edf1}.mx_EmojiPicker_anchor{padding:8px 8px 6px;border:none;border-bottom:2px solid transparent;background-color:transparent;border-radius:4px 4px 0 0;width:36px;height:38px}.mx_EmojiPicker_anchor:not(:disabled){cursor:pointer}.mx_EmojiPicker_anchor:not(:disabled):hover{background-color:#ddd;border-bottom:2px solid #0dbd8b}.mx_EmojiPicker_anchor:before{background-color:#2e2f32;content:"";display:inline-block;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:100%;height:100%}.mx_EmojiPicker_anchor:disabled:before{background-color:#ddd}.mx_EmojiPicker_anchor_activity:before{-webkit-mask-image:url(../../img/emojipicker/activity.921ec9f.svg);mask-image:url(../../img/emojipicker/activity.921ec9f.svg)}.mx_EmojiPicker_anchor_custom:before{-webkit-mask-image:url(../../img/emojipicker/custom.e1cd0fd.svg);mask-image:url(../../img/emojipicker/custom.e1cd0fd.svg)}.mx_EmojiPicker_anchor_flags:before{-webkit-mask-image:url(../../img/emojipicker/flags.1a8855e.svg);mask-image:url(../../img/emojipicker/flags.1a8855e.svg)}.mx_EmojiPicker_anchor_foods:before{-webkit-mask-image:url(../../img/emojipicker/foods.c6b220a.svg);mask-image:url(../../img/emojipicker/foods.c6b220a.svg)}.mx_EmojiPicker_anchor_nature:before{-webkit-mask-image:url(../../img/emojipicker/nature.6540b99.svg);mask-image:url(../../img/emojipicker/nature.6540b99.svg)}.mx_EmojiPicker_anchor_objects:before{-webkit-mask-image:url(../../img/emojipicker/objects.4d34f58.svg);mask-image:url(../../img/emojipicker/objects.4d34f58.svg)}.mx_EmojiPicker_anchor_people:before{-webkit-mask-image:url(../../img/emojipicker/people.e918580.svg);mask-image:url(../../img/emojipicker/people.e918580.svg)}.mx_EmojiPicker_anchor_places:before{-webkit-mask-image:url(../../img/emojipicker/places.7310322.svg);mask-image:url(../../img/emojipicker/places.7310322.svg)}.mx_EmojiPicker_anchor_recent:before{-webkit-mask-image:url(../../img/emojipicker/recent.13b42e2.svg);mask-image:url(../../img/emojipicker/recent.13b42e2.svg)}.mx_EmojiPicker_anchor_symbols:before{-webkit-mask-image:url(../../img/emojipicker/symbols.15a557d.svg);mask-image:url(../../img/emojipicker/symbols.15a557d.svg)}.mx_EmojiPicker_anchor_visible{border-bottom:2px solid #0dbd8b}.mx_EmojiPicker_search{margin:8px;border-radius:4px;border:1px solid #e7e7e7;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_EmojiPicker_search input{-webkit-box-flex:1;-ms-flex:1;flex:1;border:none;padding:8px 12px;border-radius:4px 0}.mx_EmojiPicker_search button{border:none;background-color:inherit;margin:0;padding:8px;-ms-flex-item-align:center;align-self:center;width:32px;height:32px}.mx_EmojiPicker_search_clear{cursor:pointer}.mx_EmojiPicker_search_icon{width:16px;margin:8px}.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear){pointer-events:none}.mx_EmojiPicker_search_icon:after{-webkit-mask:url(../../img/emojipicker/search.973c315.svg) no-repeat;mask:url(../../img/emojipicker/search.973c315.svg) no-repeat;-webkit-mask-size:100%;mask-size:100%;background-color:#2e2f32;content:"";display:inline-block;width:100%;height:100%}.mx_EmojiPicker_search_clear:after{-webkit-mask-image:url(../../img/emojipicker/delete.f7344c5.svg);mask-image:url(../../img/emojipicker/delete.f7344c5.svg)}.mx_EmojiPicker_category{padding:0 12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EmojiPicker_category_label{width:304px}.mx_EmojiPicker_list{width:304px;padding:0;margin:0}.mx_EmojiPicker_item_wrapper{display:inline-block;list-style:none;width:38px;cursor:pointer}.mx_EmojiPicker_item{display:inline-block;font-size:2rem;padding:5px;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;border-radius:4px}.mx_EmojiPicker_item:hover{background-color:#ddd}.mx_EmojiPicker_item_selected{color:rgba(0,0,0,.5);border:1px solid #0dbd8b;padding:4px}.mx_EmojiPicker_category_label,.mx_EmojiPicker_preview_name{font-size:1.6rem;font-weight:600;margin:0}.mx_EmojiPicker_footer{border-top:1px solid #e9edf1;min-height:72px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_EmojiPicker_preview_emoji{font-size:3.2rem;padding:8px 16px}.mx_EmojiPicker_preview_text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_EmojiPicker_name{text-transform:capitalize}.mx_EmojiPicker_shortcode{color:#747474;font-size:1.4rem}.mx_EmojiPicker_shortcode:after,.mx_EmojiPicker_shortcode:before{content:":"}.mx_EmojiPicker_quick{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around}.mx_EmojiPicker_quick_header .mx_EmojiPicker_name{margin-right:4px}.mx_GroupPublicity_toggle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:8px}.mx_GroupPublicity_toggle .mx_GroupTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%}.mx_GroupPublicity_toggle .mx_ToggleSwitch{float:right}.mx_GroupRoomTile{position:relative;color:#2e2f32;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_GroupRoomList_wrapper{padding:10px}.mx_GroupUserSettings_groupPublicity_scrollbox{height:200px;border:1px solid transparent;border-radius:3px;overflow:hidden}.mx_CreateEvent:before{background-color:#91a1c0;-webkit-mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);mask-image:url(../../img/element-icons/chat-bubbles.e2bd2cb.svg)}.mx_DateSeparator{clear:both;margin:4px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.4rem;color:#9e9e9e}.mx_DateSeparator>hr{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;height:0;border:none;border-bottom:1px solid transparent}.mx_DateSeparator>div{margin:0 25px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_EventTileBubble{background-color:#f2f5f8;padding:10px;border-radius:8px;margin:10px auto;max-width:75%;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:24px minmax(0,1fr) -webkit-min-content;grid-template-columns:24px minmax(0,1fr) min-content}.mx_EventTileBubble:after,.mx_EventTileBubble:before{position:relative;grid-column:1;grid-row:1/3;width:16px;height:16px;content:"";top:0;bottom:0;left:0;right:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;margin-top:4px}.mx_EventTileBubble .mx_EventTileBubble_subtitle,.mx_EventTileBubble .mx_EventTileBubble_title{overflow-wrap:break-word}.mx_EventTileBubble .mx_EventTileBubble_title{font-weight:600;font-size:1.5rem;grid-column:2;grid-row:1}.mx_EventTileBubble .mx_EventTileBubble_subtitle{font-size:1.2rem;grid-column:2;grid-row:2}.mx_MEmoteBody{white-space:pre-wrap}.mx_MEmoteBody_sender{cursor:pointer}.mx_MFileBody_download{color:#0dbd8b}.mx_MFileBody_download .mx_MFileBody_download_icon{width:12px;height:12px;-webkit-mask-size:12px;mask-size:12px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(../../img/download.4f331f0.svg);mask-image:url(../../img/download.4f331f0.svg);background-color:#0dbd8b;display:inline-block}.mx_MFileBody_download a{color:#0dbd8b;text-decoration:none;cursor:pointer}.mx_MFileBody_download object{margin-left:-16px;padding-right:4px;margin-top:-4px;vertical-align:middle;pointer-events:none}.mx_MFileBody_download iframe{margin:0;padding:0;border:none;width:100%;height:1.5em}.mx_MFileBody_info{background-color:#e3e8f0;border-radius:12px;width:243px;padding:6px 12px;color:#737d8c}.mx_MFileBody_info .mx_MFileBody_info_icon{background-color:#fff;border-radius:20px;display:inline-block;width:32px;height:32px;position:relative;vertical-align:middle;margin-right:12px}.mx_MFileBody_info .mx_MFileBody_info_icon:before{content:"";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-image:url(../icons/attach.svg);mask-image:url(../icons/attach.svg);background-color:#737d8c;width:13px;height:15px;position:absolute;top:8px;left:9px}.mx_MFileBody_info .mx_MFileBody_info_filename{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block;width:calc(100% - 44px);vertical-align:middle}.mx_MImageBody{display:block;margin-right:34px}.mx_MImageBody_thumbnail{position:absolute;width:100%;height:100%;left:0;top:0;border-radius:4px}.mx_MImageBody_thumbnail_container{overflow:hidden;position:relative}.mx_MImageBody_thumbnail_spinner{position:absolute;left:50%;top:50%}.mx_MImageBody_thumbnail_spinner>*{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mx_MImageBody_gifLabel{position:absolute;display:block;top:0;left:14px;padding:5px;border-radius:5px;background:rgba(0,0,0,.7);border:2px solid rgba(0,0,0,.2);color:#fff;pointer-events:none}.mx_HiddenImagePlaceholder{position:absolute;left:0;top:0;bottom:0;right:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;cursor:pointer;background-color:#f3f8fd}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button{color:#0dbd8b}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span.mx_HiddenImagePlaceholder_eye{margin-right:8px;background-color:#0dbd8b;-webkit-mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);mask-image:url(../../img/feather-customised/eye.52aa0d2.svg);display:inline-block;width:18px;height:14px}.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span:not(.mx_HiddenImagePlaceholder_eye){vertical-align:text-bottom}.mx_EventTile:hover .mx_HiddenImagePlaceholder{background-color:#fff}.mx_MJitsiWidgetEvent:before{background-color:#91a1c0;-webkit-mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg);mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg)}.mx_MNoticeBody{white-space:pre-wrap;opacity:.6}.mx_MStickerBody_wrapper{padding:20px 0}.mx_MStickerBody_tooltip{position:absolute;top:50%}.mx_MStickerBody_hidden{max-width:220px;text-decoration:none;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_MTextBody{white-space:pre-wrap}span.mx_MVideoBody video.mx_MVideoBody{max-width:100%;height:auto;border-radius:4px}.mx_MVoiceMessageBody{display:inline-block}.mx_MessageActionBar{position:absolute;visibility:hidden;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:24px;line-height:2.4rem;border-radius:4px;background:#fff;top:-26px;right:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.mx_MessageActionBar:before{content:"";position:absolute;width:calc(66px + 100%);height:calc(20px + 100%);top:-12px;left:-58px;z-index:-1;cursor:auto}.mx_MessageActionBar>*{white-space:nowrap;display:inline-block;position:relative;border:1px solid #e9edf1;margin-left:-1px}.mx_MessageActionBar>:hover{border-color:#ddd;z-index:1}.mx_MessageActionBar>:first-child{border-radius:3px 0 0 3px}.mx_MessageActionBar>:last-child{border-radius:0 3px 3px 0}.mx_MessageActionBar>:only-child{border-radius:3px}.mx_MessageActionBar_maskButton{width:27px}.mx_MessageActionBar_maskButton:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;-webkit-mask-size:18px;mask-size:18px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#2e2f32}.mx_MessageActionBar_reactButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg);mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg)}.mx_MessageActionBar_replyButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/reply.5812741.svg);mask-image:url(../../img/element-icons/room/message-bar/reply.5812741.svg)}.mx_MessageActionBar_editButton:after{-webkit-mask-image:url(../../img/element-icons/room/message-bar/edit.688678e.svg);mask-image:url(../../img/element-icons/room/message-bar/edit.688678e.svg)}.mx_MessageActionBar_optionsButton:after{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_MessageActionBar_resendButton:after{-webkit-mask-image:url(../../img/element-icons/retry.6cd23ad.svg);mask-image:url(../../img/element-icons/retry.6cd23ad.svg)}.mx_MessageActionBar_cancelButton:after{-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg)}.mx_MessageTimestamp{color:#acacac;font-size:1rem;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.mx_MjolnirBody{opacity:.4}.mx_ReactionsRow{margin:6px 0;color:#2e2f32}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton{position:relative;display:inline-block;visibility:hidden;width:24px;height:24px;vertical-align:middle;margin-left:4px}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:before{content:"";position:absolute;height:100%;width:100%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#8d99a5;-webkit-mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg);mask-image:url(../../img/element-icons/room/message-bar/emoji.af14771.svg)}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active{visibility:visible}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active:before,.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:hover:before{background-color:#2e2f32}.mx_EventTile:hover .mx_ReactionsRow_addReactionButton{visibility:visible}.mx_ReactionsRow_showAll{text-decoration:none;font-size:1.2rem;line-height:2rem;margin-left:4px;vertical-align:middle}.mx_ReactionsRow_showAll:link,.mx_ReactionsRow_showAll:visited{color:#8d99a5}.mx_ReactionsRow_showAll:hover{color:#2e2f32}.mx_ReactionsRowButton{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;line-height:2rem;margin-right:6px;padding:1px 6px;border:1px solid #e9edf1;border-radius:10px;background-color:#f3f8fd;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.mx_ReactionsRowButton:hover{border-color:#ddd}.mx_ReactionsRowButton.mx_ReactionsRowButton_selected{background-color:#e9fff9;border-color:#0dbd8b}.mx_ReactionsRowButton.mx_AccessibleButton_disabled{cursor:not-allowed}.mx_ReactionsRowButton .mx_ReactionsRowButton_content{max-width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:4px}.mx_RedactedBody{white-space:pre-wrap;color:#61708b;vertical-align:middle;padding-left:20px;position:relative}.mx_RedactedBody:before{height:14px;width:14px;background-color:#61708b;-webkit-mask-image:url(../icons/trash.svg);mask-image:url(../icons/trash.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;content:"";position:absolute;top:1px;left:0}.mx_RoomAvatarEvent{opacity:.5;overflow-y:hidden}.mx_RoomAvatarEvent_avatar{display:inline;position:relative;top:5px}.mx_SenderProfile_name{font-weight:600}.mx_TextualEvent{opacity:.5;overflow-y:hidden}.mx_UnknownBody{white-space:pre-wrap}.mx_EventTile_content.mx_ViewSourceEvent{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:.6;font-size:1.2rem}.mx_EventTile_content.mx_ViewSourceEvent code,.mx_EventTile_content.mx_ViewSourceEvent pre{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_EventTile_content.mx_ViewSourceEvent pre{line-height:1.2;margin:3.5px 0}.mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle{width:12px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:auto 12px;mask-size:auto 12px;visibility:hidden;background-color:#0dbd8b;-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg)}.mx_EventTile_content.mx_ViewSourceEvent.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle{-webkit-mask-position:0 bottom;mask-position:0 bottom;margin-bottom:7px;-webkit-mask-image:url(../../img/feather-customised/minimise.aec9142.svg);mask-image:url(../../img/feather-customised/minimise.aec9142.svg)}.mx_EventTile_content.mx_ViewSourceEvent:hover .mx_ViewSourceEvent_toggle{visibility:visible}.mx_cryptoEvent.mx_cryptoEvent_icon:before{background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:90%;mask-size:90%}.mx_cryptoEvent.mx_cryptoEvent_icon:after,.mx_cryptoEvent.mx_cryptoEvent_icon:before{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_cryptoEvent.mx_cryptoEvent_icon:after{background-color:#91a1c0}.mx_cryptoEvent.mx_cryptoEvent_icon_verified:after{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg);background-color:#0dbd8b}.mx_cryptoEvent.mx_cryptoEvent_icon_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_cryptoEvent .mx_cryptoEvent_buttons,.mx_cryptoEvent .mx_cryptoEvent_state{grid-column:3;grid-row:1/3}.mx_cryptoEvent .mx_cryptoEvent_buttons{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_cryptoEvent .mx_cryptoEvent_state{width:130px;padding:10px 20px;margin:auto 0;text-align:center;color:#8d99a5;overflow-wrap:break-word;font-size:1.2rem}.mx_BaseCard{padding:0 8px;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_BaseCard .mx_BaseCard_header{margin:8px 0}.mx_BaseCard .mx_BaseCard_header>h2{margin:0 44px;font-size:1.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back,.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close{position:absolute;background-color:rgba(141,151,165,.2);height:20px;width:20px;margin:12px;top:0;border-radius:10px}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before,.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before{content:"";position:absolute;height:20px;width:20px;top:0;left:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#91a1c0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back{left:0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-mask-size:22px;mask-size:22px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close{right:0}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before{-webkit-mask-image:url(../../img/icons-close.11ff07c.svg);mask-image:url(../../img/icons-close.11ff07c.svg);-webkit-mask-size:8px;mask-size:8px}.mx_BaseCard .mx_AutoHideScrollbar{margin-right:-8px;padding-right:8px;min-height:0;width:100%;height:100%}.mx_BaseCard .mx_BaseCard_Group{margin:20px 0 16px}.mx_BaseCard .mx_BaseCard_Group>*{margin-left:12px;margin-right:12px}.mx_BaseCard .mx_BaseCard_Group>h1{color:#8d99a5;font-size:1.2rem;font-weight:500}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button{padding:10px 38px 10px 12px;margin:0;position:relative;font-size:1.3rem;height:20px;line-height:20px;border-radius:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:hover{background-color:rgba(141,151,165,.1)}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:after{content:"";position:absolute;top:10px;right:6px;height:20px;width:20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#c1c6cd;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-mask-size:20px;mask-size:20px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button.mx_AccessibleButton_disabled{padding-right:12px}.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button.mx_AccessibleButton_disabled:after{content:unset}.mx_BaseCard .mx_BaseCard_footer{padding-top:4px;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_kind_secondary{color:#737d8c;background-color:rgba(141,151,165,.2);font-weight:600;font-size:1.4rem}.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_FilePanel.mx_BaseCard,.mx_MemberList.mx_BaseCard,.mx_NotificationPanel.mx_BaseCard,.mx_UserInfo.mx_BaseCard{padding:32px 0 0}.mx_FilePanel.mx_BaseCard .mx_AutoHideScrollbar,.mx_MemberList.mx_BaseCard .mx_AutoHideScrollbar,.mx_NotificationPanel.mx_BaseCard .mx_AutoHideScrollbar,.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar{margin-right:unset;padding-right:unset}.mx_EncryptionInfo_spinner .mx_Spinner{margin-top:25px;margin-bottom:15px}.mx_EncryptionInfo_spinner{text-align:center}.mx_RoomSummaryCard .mx_BaseCard_header{text-align:center;margin-top:20px}.mx_RoomSummaryCard .mx_BaseCard_header h2{font-weight:600;font-size:1.8rem;margin:12px 0 4px}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias{font-size:1.3rem;color:#737d8c}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias,.mx_RoomSummaryCard .mx_BaseCard_header h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee{display:inline-block;position:relative;width:54px;height:54px;border-radius:50%;background-color:#737d8c;margin-top:-3px;margin-left:-10px;border:3px solid #f2f5f8}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee:before{content:"";position:absolute;top:13px;left:13px;height:28px;width:28px;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:url(../../img/e2e/disabled.6c5c6be.svg);mask-image:url(../../img/e2e/disabled.6c5c6be.svg);background-color:#fff}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_normal{background-color:#424446}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_normal:before{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_verified{background-color:#0dbd8b}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_verified:before{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg)}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_warning{background-color:#ff4b55}.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_warning:before{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button{padding-left:44px}.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button:before{content:"";position:absolute;top:8px;left:10px;height:24px;width:24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#c1c6cd}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button{padding:0;height:auto;color:#8d99a5}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app{padding:10px 48px 10px 12px;text-overflow:ellipsis;overflow:hidden}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app .mx_BaseAvatar_image{vertical-align:top;margin-right:12px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app span{color:#2e2f32}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle{position:absolute;top:0;height:100%;width:24px;padding:12px 4px;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:24px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:hover:after,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:hover:after{content:"";position:absolute;height:24px;width:24px;top:8px;left:0;border-radius:12px;background-color:rgba(141,151,165,.1)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:before,.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:before{content:"";position:absolute;height:16px;width:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:16px;mask-size:16px;background-color:#c1c6cd}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle{right:24px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:before{-webkit-mask-image:url(../../img/element-icons/room/pin-upright.65783fb.svg);mask-image:url(../../img/element-icons/room/pin-upright.65783fb.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options{right:48px;display:none}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:before{-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned:after{opacity:.2}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned .mx_RoomSummaryCard_app_pinToggle:before{background-color:#0dbd8b}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:hover .mx_RoomSummaryCard_icon_app{padding-right:72px}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:hover .mx_RoomSummaryCard_app_options{display:unset}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:before{content:unset}.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:after{top:8px;pointer-events:none}.mx_RoomSummaryCard .mx_AccessibleButton_kind_link{padding:0;margin-top:12px;margin-bottom:12px;font-size:1.3rem;font-weight:600}.mx_RoomSummaryCard_icon_people:before{-webkit-mask-image:url(../../img/element-icons/room/members.88c3e93.svg);mask-image:url(../../img/element-icons/room/members.88c3e93.svg)}.mx_RoomSummaryCard_icon_files:before{-webkit-mask-image:url(../../img/element-icons/room/files.5709c0c.svg);mask-image:url(../../img/element-icons/room/files.5709c0c.svg)}.mx_RoomSummaryCard_icon_share:before{-webkit-mask-image:url(../../img/element-icons/room/share.54dc3fb.svg);mask-image:url(../../img/element-icons/room/share.54dc3fb.svg)}.mx_RoomSummaryCard_icon_settings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_UserInfo.mx_BaseCard{padding-top:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;font-size:1.2rem}.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel{cursor:pointer;position:absolute;top:0;border-radius:4px;background-color:#f2f5f8;margin:9px;z-index:1}.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel div{height:16px;width:16px;padding:4px;-webkit-mask-image:url(../../img/minimise.871d2de.svg);mask-image:url(../../img/minimise.871d2de.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:7px center;mask-position:7px center;background-color:#91a1c0}.mx_UserInfo.mx_BaseCard h2{font-size:1.8rem;font-weight:600;margin:18px 0 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container{padding:8px 16px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_separator{border-bottom:1px solid rgba(46,47,50,.1)}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetailsContainer{padding-top:0;padding-bottom:0;margin-bottom:8px}.mx_UserInfo.mx_BaseCard .mx_RoomTile_nameContainer{width:154px}.mx_UserInfo.mx_BaseCard .mx_RoomTile_badge{display:none}.mx_UserInfo.mx_BaseCard .mx_RoomTile_name{width:160px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar{margin:24px 32px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div{max-width:30vh;margin:0 auto;-webkit-transition:.5s;transition:.5s}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div>div{padding-top:100%;position:relative}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar>div>div *{border-radius:100%;position:absolute;top:0;left:0;width:100%!important;height:100%!important}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar_initial{z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:6rem!important;width:100%!important;-webkit-transition:font-size .5s;transition:font-size .5s}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image{cursor:-webkit-zoom-in;cursor:zoom-in}.mx_UserInfo.mx_BaseCard h3{text-transform:uppercase;color:#8d99a5;font-weight:600;font-size:1.2rem;margin:4px 0}.mx_UserInfo.mx_BaseCard p{margin:5px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile{text-align:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.8rem;line-height:2.5rem;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-all;text-overflow:ellipsis}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 .mx_E2EIcon{margin-top:3px;margin-right:4px;min-width:18px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profileStatus{margin-top:12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField{margin:6px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField,.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription{margin:11px 0 12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_Field{margin:0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_field{cursor:pointer;color:#0dbd8b;line-height:1.6rem;margin:8px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_field.mx_UserInfo_destructive{color:#ff4b55}.mx_UserInfo.mx_BaseCard .mx_UserInfo_statusMessage{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator){padding-top:16px;padding-bottom:0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator)>:not(h3){margin-left:8px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device{display:-webkit-box;display:-ms-flexbox;display:flex;margin:8px 0}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device.mx_UserInfo_device_verified .mx_UserInfo_device_trusted{color:#0dbd8b}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device.mx_UserInfo_device_unverified .mx_UserInfo_device_trusted{color:#ff4b55}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device .mx_UserInfo_device_name{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:5px;word-break:break-word}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_E2EIcon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin:2px 5px 0 0;width:12px;height:12px}.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_expand{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:11px}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind{padding:8px 18px}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary{color:#0dbd8b;background-color:rgba(3,179,129,.16)}.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger{color:#ff4b55;background-color:rgba(255,75,85,.16)}.mx_UserInfo.mx_BaseCard .mx_UserInfo_wideButton,.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton{display:block;margin:16px 0 8px}.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton+.mx_AccessibleButton{margin:8px 0}.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar>div{max-width:72px;margin:0 auto}.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar .mx_BaseAvatar_initial{font-size:40px!important}.mx_VerificationPanel_reciprocate_section .mx_E2EIcon,.mx_VerificationPanel_verified_section .mx_E2EIcon{margin:20px auto!important}.mx_UserInfo .mx_EncryptionPanel_cancel{-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#61708b;cursor:pointer;position:absolute;z-index:100;top:14px;right:14px}.mx_UserInfo .mx_VerificationPanel_qrCode{padding:4px 4px 0;background:#fff;border-radius:4px;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%;margin:0 auto!important}.mx_UserInfo .mx_VerificationPanel_qrCode canvas{height:auto!important;width:100%!important;max-width:240px}.mx_UserInfo .mx_VerificationPanel_reciprocate_section .mx_FormButton{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px;display:block;margin:10px 0}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:10px;margin-bottom:10px;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions>.mx_VerificationPanel_QRPhase_betweenText,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions>.mx_VerificationPanel_QRPhase_betweenText{width:50px;vertical-align:middle;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption{background-color:#f3f8fd;border-radius:10px;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;padding:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;max-width:310px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas{width:220px!important;height:220px!important;background-color:#fff;border-radius:4px;vertical-align:middle;text-align:center;padding:10px}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption>p,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption>p{margin-top:0;font-weight:700}.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText,.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText{font-size:1.4rem;margin:30px 0;text-align:center}.mx_CompleteSecurity_body .mx_VerificationPanel_verified_section .mx_AccessibleButton,.mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton{float:right}.mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton,.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton{margin-left:10px;padding:7px 40px}.mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons,.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_WidgetCard{height:100%;display:contents}.mx_WidgetCard .mx_AppTileFullWidth{max-width:unset;height:100%;border:0}.mx_WidgetCard .mx_BaseCard_header{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_WidgetCard .mx_BaseCard_header>h2{margin-right:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton{position:relative;margin-right:44px;height:20px;width:20px;min-width:20px;padding:0}.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton:before{content:"";position:absolute;width:20px;height:20px;top:0;left:4px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);background-color:#737d8c}.mx_WidgetCard_maxPinnedTooltip{background-color:#ff4b55;color:#fff}.mx_AliasSettings_editable{border:0;border-bottom:1px solid #c7c7c7;padding:0;min-width:240px}.mx_AliasSettings_editable:focus{border-bottom:1px solid #0dbd8b;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_AliasSettings summary{cursor:pointer;color:#0dbd8b;font-weight:600;list-style:none}.mx_AliasSettings summary::-webkit-details-marker{display:none}.mx_AliasSettings .mx_AliasSettings_localAliasHeader{margin-top:35px}.mx_AppsDrawer{margin:5px 5px 5px 18px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.mx_AppsDrawer .mx_AppsContainer_resizerHandleContainer{width:100%;height:10px;margin-top:-3px;display:block;position:relative}.mx_AppsDrawer .mx_AppsContainer_resizerHandle{cursor:ns-resize;width:100%!important;height:100%!important;position:absolute;bottom:0!important}.mx_AppsDrawer .mx_AppsContainer_resizerHandle:after{content:"";position:absolute;border-radius:3px;top:6px;bottom:0;left:calc(50% - 32px);right:calc(50% - 32px)}.mx_AppsDrawer:hover .mx_AppsContainer_resizerHandle:after{opacity:.8;background:#2e2f32}.mx_AppsDrawer:hover .mx_ResizeHandle_horizontal:before{position:absolute;left:3px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:64px;width:4px;border-radius:4px;content:"";background-color:#2e2f32;opacity:.8}.mx_AppsContainer_resizer{margin-bottom:8px}.mx_AppsContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:100%;width:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.mx_AppsContainer .mx_AppTile:first-of-type{border-left-width:8px;border-radius:10px 0 0 10px}.mx_AppsContainer .mx_AppTile:last-of-type{border-right-width:8px;border-radius:0 10px 10px 0}.mx_AppsContainer .mx_ResizeHandle_horizontal{position:relative}.mx_AppsContainer .mx_ResizeHandle_horizontal>div{width:0}.mx_AppsDrawer_2apps .mx_AppTile{width:50%}.mx_AppsDrawer_2apps .mx_AppTile:nth-child(3){-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:0!important;min-width:240px!important}.mx_AppsDrawer_3apps .mx_AppTile{width:33%}.mx_AppsDrawer_3apps .mx_AppTile:nth-child(3){-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:0!important;min-width:240px!important}.mx_AppTile{width:50%;min-width:240px;border-color:#f2f5f8;border-style:solid;border-width:8px 5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#f2f5f8}.mx_AppTileFullWidth{width:100%!important;border:5px solid #f2f5f8;border-radius:8px;background-color:#f2f5f8}.mx_AppTile_mini,.mx_AppTileFullWidth{margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_AppTile_mini{width:100%;height:200px}.mx_AppTile .mx_AppTile_persistedWrapper,.mx_AppTile_mini .mx_AppTile_persistedWrapper,.mx_AppTileFullWidth .mx_AppTile_persistedWrapper{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_AppTile_persistedWrapper div{width:100%;height:100%}.mx_AppTileMenuBar{margin:0;font-size:1.2rem;background-color:#f2f5f8;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;padding-top:2px;padding-bottom:8px}.mx_AppTileMenuBarTitle{line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx_AppTileMenuBarTitle .mx_WidgetAvatar{margin-right:12px}.mx_AppTileMenuBarTitle>:last-child{margin-left:9px}.mx_AppTileMenuBarWidgets{float:right;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_AppTileMenuBar_iconButton{width:12px;height:12px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:auto 12px;mask-size:auto 12px;background-color:#212121;margin:0 3px}.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout{-webkit-mask-image:url(../../img/feather-customised/widget/external-link.7ab6751.svg);mask-image:url(../../img/feather-customised/widget/external-link.7ab6751.svg)}.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu{-webkit-mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg);mask-image:url(../../img/element-icons/room/ellipsis.b82ece6.svg)}.mx_AppTileBody{height:100%;background-color:#fff}.mx_AppTileBody,.mx_AppTileBody_mini{width:100%;overflow:hidden;border-radius:8px}.mx_AppTileBody_mini{height:200px}.mx_AppTile .mx_AppTileBody,.mx_AppTile_mini .mx_AppTileBody_mini,.mx_AppTileFullWidth .mx_AppTileBody{height:inherit;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_AppTileBody_mini iframe,.mx_AppTileBody iframe{border:none;width:100%;height:100%}.mx_AppTileBody iframe{overflow:hidden;padding:0;margin:0;display:block}.mx_AppPermissionWarning{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.6rem}.mx_AppPermissionWarning_row{margin-bottom:12px}.mx_AppPermissionWarning_smallText{font-size:1.2rem}.mx_AppPermissionWarning_bolder{font-weight:600}.mx_AppPermissionWarning h4{margin:0;padding:0}.mx_AppPermissionWarning_helpIcon{margin-top:1px;margin-right:2px;width:10px;height:10px;display:inline-block}.mx_AppPermissionWarning_helpIcon:before{display:inline-block;background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:12px;mask-size:12px;width:12px;height:12px;-webkit-mask-position:center;mask-position:center;content:"";vertical-align:middle;-webkit-mask-image:url(../../img/feather-customised/help-circle.03fb6cf.svg);mask-image:url(../../img/feather-customised/help-circle.03fb6cf.svg)}.mx_AppPermissionWarning_tooltip{-webkit-box-shadow:none;box-shadow:none;background-color:#27303a;color:#fff;border:none;border-radius:3px;padding:6px 8px}.mx_AppPermissionWarning_tooltip ul{list-style-position:inside;padding-left:2px;margin-left:0}.mx_AppLoading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:700;position:relative;height:100%;background-color:#fff!important;border-radius:8px}.mx_AppLoading .mx_Spinner{position:absolute;top:0;bottom:0;left:0;right:0}.mx_AppLoading_spinner_fadeIn{-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-name:mx_AppLoading_spinner_fadeIn_animation;animation-name:mx_AppLoading_spinner_fadeIn_animation}@-webkit-keyframes mx_AppLoading_spinner_fadeIn_animation{0%{opacity:0}to{opacity:1}}@keyframes mx_AppLoading_spinner_fadeIn_animation{0%{opacity:0}to{opacity:1}}.mx_AppLoading iframe{display:none}.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper{z-index:1}.mx_Autocomplete{position:absolute;bottom:0;z-index:1001;width:100%;background:#fff;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;max-height:50vh;overflow:auto;-webkit-box-shadow:0 -16px 32px rgba(0,0,0,.04);box-shadow:0 -16px 32px rgba(0,0,0,.04)}.mx_Autocomplete_ProviderSection{border-bottom:1px solid transparent}.mx_Autocomplete_Completion_block{height:34px;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32}.mx_Autocomplete_Completion_block *{margin:0 3px}.mx_Autocomplete_Completion_pill{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:2rem;height:3.4rem;padding:.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32}.mx_Autocomplete_Completion_pill>*{margin-right:.3rem}.mx_Autocomplete_Completion_subtitle{font-style:italic;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_Autocomplete_Completion_description{color:grey}.mx_Autocomplete_Completion_container_pill{margin:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap}.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_description,.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_subtitle,.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_title{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mx_Autocomplete_Completion.selected,.mx_Autocomplete_Completion:hover{background:#f2f5f8;outline:none}.mx_Autocomplete_provider_name{margin:12px;color:#2e2f32;font-weight:400;opacity:.4}.m_RoomView_auxPanel_stateViews{padding:5px 5px 5px 19px;border-bottom:1px solid transparent}.m_RoomView_auxPanel_stateViews_span a{text-decoration:none;color:inherit}.m_RoomView_auxPanel_stateViews_span[data-severity=warning]{font-weight:700;color:orange}.m_RoomView_auxPanel_stateViews_span[data-severity=alert]{font-weight:700;color:red}.m_RoomView_auxPanel_stateViews_span[data-severity=normal]{font-weight:400}.m_RoomView_auxPanel_stateViews_span[data-severity=notice]{font-weight:400;color:#a2a2a2}.m_RoomView_auxPanel_stateViews_delim{padding:0 5px;color:#a2a2a2}.mx_BasicMessageComposer{position:relative}.mx_BasicMessageComposer .mx_BasicMessageComposer_inputEmpty>:first-child:before{content:var(--placeholder);opacity:.333;width:0;height:0;overflow:visible;display:inline-block;pointer-events:none;white-space:nowrap}@-webkit-keyframes visualbell{0%{background-color:#faa}to{background-color:#fff}}.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error{-webkit-animation:visualbell .2s;animation:visualbell .2s}.mx_BasicMessageComposer .mx_BasicMessageComposer_input{white-space:pre-wrap;word-wrap:break-word;outline:none;overflow-x:hidden}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill,.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill{position:relative}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill:before,.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill:before{content:var(--avatar-letter);width:1.6rem;height:1.6rem;margin-right:.24rem;background:var(--avatar-background),#fff;color:#fff;background-repeat:no-repeat;background-size:1.6rem;border-radius:1.6rem;text-align:center;font-weight:400;line-height:1.6rem;font-size:1.04rem}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_disabled{pointer-events:none}.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper{position:relative;height:0}.mx_E2EIcon{width:16px;height:16px;margin:0 9px;position:relative;display:block}.mx_E2EIcon_normal:after,.mx_E2EIcon_normal:before,.mx_E2EIcon_verified:after,.mx_E2EIcon_verified:before,.mx_E2EIcon_warning:after,.mx_E2EIcon_warning:before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.mx_E2EIcon:before{background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:90%;mask-size:90%}.mx_E2EIcon:before,.mx_E2EIcon_bordered{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg)}.mx_E2EIcon_bordered{background-color:#f3f8fd}.mx_E2EIcon_bordered:after{-webkit-mask-size:75%;mask-size:75%}.mx_E2EIcon_bordered:before{-webkit-mask-size:65%;mask-size:65%}.mx_E2EIcon_warning:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_E2EIcon_normal:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#91a1c0}.mx_E2EIcon_verified:after{-webkit-mask-image:url(../../img/e2e/verified.5be6c9f.svg);mask-image:url(../../img/e2e/verified.5be6c9f.svg);background-color:#0dbd8b}.mx_EditMessageComposer{padding:3px;margin:-7px -10px -5px;overflow:visible!important}.mx_EditMessageComposer .mx_BasicMessageComposer_input{border-radius:4px;border:1px solid transparent;background-color:#fff;max-height:200px;padding:3px 6px}.mx_EditMessageComposer .mx_BasicMessageComposer_input:focus{border-color:rgba(13,189,139,.5)}.mx_EditMessageComposer .mx_EditMessageComposer_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;position:absolute;left:0;background:#f3f8fd;z-index:100;right:0;margin:0 -110px 0 0;padding:5px 147px 5px 5px}.mx_EditMessageComposer .mx_EditMessageComposer_buttons .mx_AccessibleButton{margin-left:5px;padding:5px 40px}.mx_EventTile_last .mx_EditMessageComposer_buttons{position:static;margin-right:-147px}.mx_EntityTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#2e2f32;cursor:pointer}.mx_EntityTile .mx_E2EIcon{margin:0;position:absolute;bottom:2px;right:7px}.mx_EntityTile:hover{padding-right:30px;position:relative}.mx_EntityTile:hover:before{content:"";position:absolute;top:calc(50% - 8px);right:-8px;-webkit-mask:url(../../img/member_chevron.4163a20.png);mask:url(../../img/member_chevron.4163a20.png);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:16px;height:16px;background-color:#91a1c0}.mx_EntityTile .mx_PresenceLabel{display:none}.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_PresenceLabel{display:block}.mx_EntityTile_invite{display:table-cell;vertical-align:middle;margin-left:10px;width:26px}.mx_EntityTile_avatar,.mx_GroupRoomTile_avatar{padding:4px 12px 4px 3px;position:relative}.mx_EntityTile_name,.mx_GroupRoomTile_name{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden;font-size:1.4rem;text-overflow:ellipsis;white-space:nowrap}.mx_EntityTile_details{overflow:hidden;-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_EntityTile_ellipsis .mx_EntityTile_name,.mx_EntityTile_invitePlaceholder .mx_EntityTile_name{font-style:italic;color:#2e2f32}.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,.mx_EntityTile_offline_beenactive .mx_EntityTile_name,.mx_EntityTile_unavailable .mx_EntityTile_avatar,.mx_EntityTile_unavailable .mx_EntityTile_name{opacity:.5}.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,.mx_EntityTile_offline_neveractive .mx_EntityTile_name,.mx_EntityTile_unknown .mx_EntityTile_avatar,.mx_EntityTile_unknown .mx_EntityTile_name{opacity:.25}.mx_EntityTile_subtext{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_EntityTile_power{-webkit-padding-start:6px;padding-inline-start:6px;font-size:1rem;color:#8d99a5;max-width:6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mx_EntityTile:hover .mx_EntityTile_power{display:none}.mx_EventTile{max-width:100%;clear:both;padding-top:18px;font-size:1.4rem;position:relative}.mx_EventTile.mx_EventTile_info{padding-top:1px}.mx_EventTile_avatar{top:14px;left:8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{top:.6rem;left:64px}.mx_EventTile_continuation{padding-top:0!important}.mx_EventTile_continuation.mx_EventTile_isEditing{padding-top:5px!important;margin-top:-5px}.mx_EventTile_isEditing{background-color:#f3f8fd}.mx_EventTile .mx_SenderProfile{color:#2e2f32;font-size:1.4rem;display:inline-block;overflow:hidden;cursor:pointer;padding-bottom:0;padding-top:0;margin:0;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 64px)}.mx_EventTile .mx_SenderProfile .mx_Flair{opacity:.7;margin-left:5px;display:inline-block;vertical-align:top;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile .mx_SenderProfile .mx_Flair img{vertical-align:-2px;margin-right:2px;border-radius:8px}.mx_EventTile_isEditing .mx_MessageTimestamp{visibility:hidden!important}.mx_EventTile .mx_MessageTimestamp{display:block;visibility:hidden;white-space:nowrap;left:0;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx_EventTile_continuation .mx_EventTile_line{clear:both}.mx_EventTile_line,.mx_EventTile_reply{position:relative;padding-left:64px;border-radius:4px}.mx_EventListSummary .mx_EventTile_line,.mx_RoomView_timeline_rr_enabled .mx_EventTile_line{margin-right:110px}.mx_EventTile_bubbleContainer{display:grid;grid-template-columns:1fr 100px}.mx_EventTile_bubbleContainer .mx_EventTile_line{margin-right:0;grid-column:1/3;padding:0!important}.mx_EventTile_bubbleContainer .mx_EventTile_msgOption{grid-column:2}.mx_EventTile_reply{margin-right:10px}.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji{font-size:48px!important;line-height:57px!important}.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp{visibility:visible}.mx_EventTile_selected>div>a>.mx_MessageTimestamp{left:3px;width:auto}.mx_EventTile.focus-visible:focus-within>div>a>.mx_MessageTimestamp,.mx_EventTile.mx_EventTile_actionBarFocused>div>a>.mx_MessageTimestamp,.mx_EventTile:hover>div>a>.mx_MessageTimestamp,.mx_EventTile_last>div>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile.focus-visible:focus-within>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile:hover>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_EventTile_last>a>.mx_MessageTimestamp,.mx_IRCLayout .mx_ReplyThread .mx_EventTile>a>.mx_MessageTimestamp{visibility:visible}.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar,.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,.mx_EventTile:hover .mx_MessageActionBar,[data-whatinput=keyboard] .mx_EventTile:focus-within .mx_MessageActionBar{visibility:visible}.mx_EventTile_selected>.mx_EventTile_line{border-left:4px solid #0dbd8b;padding-left:60px;background-color:#f6f7f8}.mx_EventTile_highlight,.mx_EventTile_highlight .markdown-body{color:#ff4b55}.mx_EventTile_highlight .markdown-body .mx_EventTile_line,.mx_EventTile_highlight .mx_EventTile_line{background-color:#fff8e3}.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line{padding-left:78px}.mx_EventTile.focus-visible:focus-within .mx_EventTile_line,.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,.mx_EventTile:hover .mx_EventTile_line{background-color:#f6f7f8}.mx_EventTile_searchHighlight{border-radius:5px;padding-left:2px;padding-right:2px;cursor:pointer}.mx_EventTile_searchHighlight,.mx_EventTile_searchHighlight a{background-color:#0dbd8b;color:#fff}.mx_EventTile_receiptSending:before,.mx_EventTile_receiptSent:before{background-color:#8d99a5;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14px;mask-size:14px;width:14px;height:14px;content:"";position:absolute;top:0;left:0;right:0}.mx_EventTile_receiptSent:before{-webkit-mask-image:url(../../img/element-icons/circle-sent.5079cbe.svg);mask-image:url(../../img/element-icons/circle-sent.5079cbe.svg)}.mx_EventTile_receiptSending:before{-webkit-mask-image:url(../../img/element-icons/circle-sending.bcca6aa.svg);mask-image:url(../../img/element-icons/circle-sending.bcca6aa.svg)}.mx_EventTile_contextual{opacity:.4}.mx_EventTile_msgOption{float:right;text-align:right;position:relative;width:90px;height:1px;margin-right:10px}.mx_EventTile_msgOption a{text-decoration:none}.mx_EventTile_readAvatars{position:relative;display:inline-block;width:14px;height:14px;top:-2.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.mx_EventTile_readAvatars .mx_BaseAvatar{position:absolute;display:inline-block;height:1.4rem;width:1.4rem;-webkit-transition:left .1s ease-out,top .3s ease-out;transition:left .1s ease-out,top .3s ease-out;-webkit-transition:left var(--transition-short) ease-out,top var(--transition-standard) ease-out;transition:left var(--transition-short) ease-out,top var(--transition-standard) ease-out}.mx_EventTile_readAvatarRemainder{color:#acacac;font-size:1.1rem;position:absolute}.mx_EventTile_content{display:block;overflow-y:hidden;overflow-x:hidden;margin-right:34px}.mx_EventTile_body{overflow-y:hidden}.mx_EventTile_spoiler{cursor:pointer}.mx_EventTile_spoiler_reason{color:#acacac;font-size:1.1rem}.mx_EventTile_spoiler_content{-webkit-filter:blur(5px) saturate(.1) sepia(1);filter:blur(5px) saturate(.1) sepia(1);-webkit-transition-duration:.5s;transition-duration:.5s}.mx_EventTile_spoiler.visible>.mx_EventTile_spoiler_content{-webkit-filter:none;filter:none}.mx_EventTile_e2eIcon{position:absolute;top:6px;left:44px;width:14px;height:14px;display:block;bottom:0;right:0;opacity:.2;background-repeat:no-repeat;background-size:contain}.mx_EventTile_e2eIcon:after,.mx_EventTile_e2eIcon:before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-size:contain;mask-size:contain}.mx_EventTile_e2eIcon:after,.mx_EventTile_e2eIcon:before{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mx_EventTile_e2eIcon:before{background-color:#fff;-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);-webkit-mask-size:90%;mask-size:90%}.mx_EventTile_e2eIcon_undecryptable:after,.mx_EventTile_e2eIcon_unverified:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_undecryptable,.mx_EventTile_e2eIcon_unverified{opacity:1}.mx_EventTile_e2eIcon_unknown:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_unknown{opacity:1}.mx_EventTile_e2eIcon_unencrypted:after{-webkit-mask-image:url(../../img/e2e/warning.78bb264.svg);mask-image:url(../../img/e2e/warning.78bb264.svg);background-color:#ff4b55}.mx_EventTile_e2eIcon_unencrypted{opacity:1}.mx_EventTile_e2eIcon_unauthenticated:after{-webkit-mask-image:url(../../img/e2e/normal.76f0c09.svg);mask-image:url(../../img/e2e/normal.76f0c09.svg);background-color:#91a1c0}.mx_EventTile_e2eIcon_unauthenticated{opacity:1}.mx_EventTile_keyRequestInfo{font-size:1.2rem}.mx_EventTile_keyRequestInfo_text{opacity:.5}.mx_EventTile_keyRequestInfo_text a{color:#2e2f32;text-decoration:underline;cursor:pointer}.mx_EventTile_keyRequestInfo_tooltip_contents p{text-align:auto;margin-left:3px;margin-right:3px}.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child{margin-top:0}.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child{margin-bottom:0}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{padding-left:60px}.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{border-left:4px solid #76cfa5}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line{border-left:4px solid #e8bf37}.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line{padding-left:78px}.mx_EventTile:hover .mx_EventTile_e2eIcon{opacity:1}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line>a>.mx_MessageTimestamp,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line>a>.mx_MessageTimestamp,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line>a>.mx_MessageTimestamp{width:38px}.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line>.mx_EventTile_e2eIcon,.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line>.mx_EventTile_e2eIcon,.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line>.mx_EventTile_e2eIcon{display:block;left:41px}.mx_EventTile_content .mx_EventTile_edited{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1.2rem;color:#9e9e9e;display:inline-block;margin-left:9px;cursor:pointer}.mx_EventTile_body pre{border:1px solid transparent}.mx_EventTile_content .markdown-body{font-family:inherit!important;white-space:normal!important;line-height:inherit!important;color:inherit;font-size:1.4rem}.mx_EventTile_content .markdown-body code,.mx_EventTile_content .markdown-body pre{font-family:Inconsolata,Twemoji,Apple Color Emoji,Segoe UI Emoji,Courier,monospace,Noto Color Emoji!important;color:#333}.mx_EventTile_content .markdown-body pre{overflow-x:overlay;overflow-y:visible}.mx_EventTile_content .markdown-body code{background-color:#f8f8f8}.mx_EventTile_lineNumbers{float:left;margin:0 .5em 0 -1.5em;color:grey}.mx_EventTile_lineNumber{text-align:right;display:block;padding-left:1em}.mx_EventTile_collapsedCodeBlock{max-height:30vh}.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre,.mx_EventTile:hover .mx_EventTile_body pre{border:1px solid #e5e5e5}.mx_EventTile_pre_container{position:relative}.mx_EventTile_button{position:absolute;display:inline-block;visibility:hidden;cursor:pointer;top:8px;right:8px;width:19px;height:19px;background-color:#2e2f32}.mx_EventTile_buttonBottom{top:33px}.mx_EventTile_copyButton{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg)}.mx_EventTile_collapseButton{-webkit-mask-image:url(../../img/feather-customised/minimise.aec9142.svg);mask-image:url(../../img/feather-customised/minimise.aec9142.svg)}.mx_EventTile_collapseButton,.mx_EventTile_expandButton{-webkit-mask-size:75%;mask-size:75%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_EventTile_expandButton{-webkit-mask-image:url(../../img/feather-customised/maximise.dc32127.svg);mask-image:url(../../img/feather-customised/maximise.dc32127.svg)}.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton,.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton{visibility:visible}.mx_EventTile_content .markdown-body h1,.mx_EventTile_content .markdown-body h2,.mx_EventTile_content .markdown-body h3,.mx_EventTile_content .markdown-body h4,.mx_EventTile_content .markdown-body h5,.mx_EventTile_content .markdown-body h6{font-family:inherit!important;color:inherit}.mx_EventTile_content .markdown-body h1,.mx_EventTile_content .markdown-body h2{font-size:1.5em;border-bottom:none!important}.mx_EventTile_content .markdown-body a{color:#238cf5}.mx_EventTile_content .markdown-body .hljs{display:inline!important}.mx_EventTile_tileError{color:red;text-align:center;margin-right:0}.mx_EventTile_tileError .mx_EventTile_line{padding-left:0;margin-right:0}.mx_EventTile_tileError .mx_EventTile_line span{padding:4px 8px}.mx_EventTile_tileError a{margin-left:1em}@media only screen and (max-width:480px){.mx_EventTile_line,.mx_EventTile_reply{padding-left:0;margin-right:0}.mx_EventTile_content{margin-top:10px;margin-right:0}}.mx_GroupLayout .mx_EventTile>.mx_SenderProfile{line-height:2rem;margin-left:64px}.mx_GroupLayout .mx_EventTile>.mx_EventTile_line{padding-left:64px}.mx_GroupLayout .mx_EventTile>.mx_EventTile_avatar{position:absolute}.mx_GroupLayout .mx_EventTile .mx_MessageTimestamp{position:absolute;width:46px}.mx_GroupLayout .mx_EventTile .mx_EventTile_line,.mx_GroupLayout .mx_EventTile .mx_EventTile_reply{padding-top:1px;padding-bottom:3px;line-height:2.2rem}.mx_GroupLayout .mx_EventTile_info .mx_EventTile_line{padding-left:82px}.mx_MatrixChat_useCompactLayout .mx_EventTile{padding-top:4px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_reply{padding-top:0;padding-bottom:0}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info{padding-top:0;font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_reply{line-height:2rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{top:4px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_SenderProfile{font-size:1.3rem}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote{padding-top:8px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_avatar{top:2px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote .mx_EventTile_reply{padding-top:0;padding-bottom:1px}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation{padding-top:0}.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_line,.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_reply{padding-top:0;padding-bottom:0}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_avatar{top:2px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_e2eIcon{top:3px}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_readAvatars{top:-2rem}.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body blockquote,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body dl,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body ol,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body p,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body pre,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body table,.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body ul{margin-bottom:4px}.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList h2{margin-top:6px}.mx_IRCLayout{--name-width:70px;line-height:1.8rem!important}.mx_IRCLayout .mx_EventTile>a{text-decoration:none}.mx_IRCLayout .mx_EventTile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding-top:0}.mx_IRCLayout .mx_EventTile>*{margin-right:5px}.mx_IRCLayout .mx_EventTile>.mx_EventTile_msgOption{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5;-ms-flex-negative:0;flex-shrink:0}.mx_IRCLayout .mx_EventTile>.mx_EventTile_msgOption .mx_EventTile_readAvatars{top:.2rem}.mx_IRCLayout .mx_EventTile>.mx_SenderProfile{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-ms-flex-negative:0;flex-shrink:0;width:var(--name-width);text-overflow:ellipsis;text-align:left;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:visible;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mx_IRCLayout .mx_EventTile .mx_EventTile_line,.mx_IRCLayout .mx_EventTile .mx_EventTile_reply{padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;min-width:0}.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;position:relative;top:0;left:0;-ms-flex-negative:0;flex-shrink:0;height:1.8rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar>.mx_BaseAvatar,.mx_IRCLayout .mx_EventTile>.mx_EventTile_avatar>.mx_BaseAvatar>*{height:1.4rem!important;width:1.4rem!important;font-size:1rem!important;line-height:1.5rem!important}.mx_IRCLayout .mx_EventTile .mx_MessageTimestamp{font-size:1rem;width:45px;text-align:right}.mx_IRCLayout .mx_EventTile>.mx_EventTile_e2eIcon{position:absolute;right:unset;left:unset;top:0;padding:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;height:1.8rem;background-position:50%}.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_EventTile_e2eIcon,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_MTextBody,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_ReplyThread_wrapper_empty,.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_TextualEvent{display:inline-block}.mx_IRCLayout .mx_EventTile .mx_EventTile_reply{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.mx_IRCLayout .mx_EventTile .mx_EditMessageComposer_buttons{position:relative}.mx_IRCLayout .mx_EventTile_emote>.mx_EventTile_avatar{margin-left:calc(var(--name-width) + 19px)}.mx_IRCLayout blockquote{margin:0}.mx_IRCLayout .mx_EventListSummary>.mx_EventTile_line{padding-left:calc(var(--name-width) + 74px)}.mx_IRCLayout .mx_EventListSummary .mx_EventListSummary_avatars{padding:0;margin:0 9px 0 0}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar{left:calc(var(--name-width) + 24px);top:0}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line{left:calc(var(--name-width) + 24px)}.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_TextualEvent{line-height:1.8rem}.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line{padding-left:0;border-left:0}.mx_IRCLayout .mx_SenderProfile_hover{background-color:#fff;overflow:hidden}.mx_IRCLayout .mx_SenderProfile_hover>span{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_IRCLayout .mx_SenderProfile_hover>span>.mx_SenderProfile_name{overflow:hidden;text-overflow:ellipsis;min-width:var(--name-width);text-align:end}.mx_IRCLayout .mx_SenderProfile:hover{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mx_IRCLayout .mx_SenderProfile_hover:hover{overflow:visible;width:max(auto,100%);z-index:10}.mx_IRCLayout .mx_ReplyThread{margin:0}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile{width:unset;max-width:var(--name-width)}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover{background:transparent}.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover>span>.mx_SenderProfile_name{min-width:inherit}.mx_IRCLayout .mx_ReplyThread .mx_EventTile_emote>.mx_EventTile_avatar{margin-left:0}.mx_IRCLayout .mx_ReplyThread .mx_MessageTimestamp{width:auto}.mx_IRCLayout .mx_ReplyThread .mx_EventTile_e2eIcon{position:relative;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.mx_IRCLayout .mx_ProfileResizer{position:absolute;height:100%;width:15px;left:calc(80px + var(--name-width));cursor:col-resize;z-index:100}.mx_IRCLayout .mx_Flair>img{height:1.4rem!important;width:1.4rem!important}.mx_JumpToBottomButton{z-index:1000;position:absolute;bottom:12px;right:24px;width:38px;height:50px;text-align:center}.mx_JumpToBottomButton_badge{position:relative;top:-12px;border-radius:16px;font-weight:700;font-size:1.2rem;line-height:1.4rem;text-align:center;display:inline-block;padding:0 4px;color:#fff;background-color:#61708b}.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge{color:#f2f5f8;background-color:#ff4b55}.mx_JumpToBottomButton_scrollDown{position:relative;height:38px;border-radius:19px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1.3px solid #61708b;cursor:pointer}.mx_JumpToBottomButton_scrollDown:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;background:#61708b}.mx_LinkPreviewWidget{margin-top:15px;margin-right:15px;margin-bottom:15px;display:-webkit-box;display:-ms-flexbox;display:flex;border-left:4px solid #ddd;color:#888}.mx_LinkPreviewWidget_image{-webkit-box-flex:0;-ms-flex:0 0 100px;flex:0 0 100px;margin-left:15px;text-align:center;cursor:pointer}.mx_LinkPreviewWidget_caption{margin-left:15px;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.mx_LinkPreviewWidget_title{display:inline;font-weight:700;white-space:normal}.mx_LinkPreviewWidget_siteName{display:inline}.mx_LinkPreviewWidget_description{margin-top:8px;white-space:normal;word-wrap:break-word}.mx_LinkPreviewWidget_cancel{cursor:pointer;width:18px;height:18px}.mx_LinkPreviewWidget_cancel img{-webkit-box-flex:0;-ms-flex:0 0 40px;flex:0 0 40px;visibility:hidden}.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel img,.mx_LinkPreviewWidget_cancel.focus-visible:focus img{visibility:visible}.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget{margin-top:6px;margin-bottom:6px}.mx_MemberInfo{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;margin-top:8px}.mx_MemberInfo,.mx_MemberInfo_name{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_MemberInfo_name{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_MemberInfo_name>.mx_E2EIcon{margin-right:0}.mx_MemberInfo_cancel{height:16px;width:16px;padding:10px 0 10px 10px;cursor:pointer;-webkit-mask-image:url(../../img/minimise.871d2de.svg);mask-image:url(../../img/minimise.871d2de.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:16px center;mask-position:16px center;background-color:#91a1c0}.mx_MemberInfo_name h2{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-x:auto;max-height:50px}.mx_MemberInfo h2{font-size:1.8rem;font-weight:600;margin:16px 0 16px 15px}.mx_MemberInfo_container{margin:0 16px 16px}.mx_MemberInfo .mx_RoomTile_nameContainer{width:154px}.mx_MemberInfo .mx_RoomTile_badge{display:none}.mx_MemberInfo .mx_RoomTile_name{width:160px}.mx_MemberInfo_avatar{background:hsla(0,0%,91%,.77);margin-bottom:16px}.mx_MemberInfo_avatar>img{height:auto;width:100%;max-height:30vh;-o-object-fit:contain;object-fit:contain;display:block}.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image{cursor:-webkit-zoom-in;cursor:zoom-in}.mx_MemberInfo_profile{margin-bottom:16px}.mx_MemberInfo h3{text-transform:uppercase;color:#9fa9ba;font-weight:700;font-size:1.2rem;margin:4px 0}.mx_MemberInfo_profileField{font-size:1.5rem;position:relative}.mx_MemberInfo_buttons{margin-bottom:16px}.mx_MemberInfo_field{cursor:pointer;font-size:1.5rem;color:#2e2f32;margin-left:8px;line-height:2.3rem}.mx_MemberInfo_createRoom{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 8px}.mx_MemberInfo_createRoom_label{width:auto!important;cursor:pointer}.mx_MemberInfo label{font-size:1.3rem}.mx_MemberInfo label .mx_MemberInfo_label_text{display:inline-block;max-width:180px;vertical-align:text-top}.mx_MemberInfo input[type=radio]{vertical-align:-2px;margin-right:5px;margin-left:8px}.mx_MemberInfo_statusMessage{font-size:1.1rem;opacity:.5;overflow:hidden;white-space:nowrap;text-overflow:clip}.mx_MemberInfo .mx_MemberInfo_scrollContainer{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_GroupMemberList,.mx_GroupRoomList,.mx_MemberList{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:0}.mx_GroupMemberList .mx_Spinner,.mx_GroupRoomList .mx_Spinner,.mx_MemberList .mx_Spinner{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.mx_GroupMemberList .mx_SearchBox,.mx_GroupRoomList .mx_SearchBox,.mx_MemberList .mx_SearchBox{margin-bottom:5px}.mx_GroupMemberList h2,.mx_GroupRoomList h2,.mx_MemberList h2{text-transform:uppercase;color:#3d3b39;font-weight:600;font-size:1.3rem;padding-left:3px;padding-right:12px;margin-top:8px;margin-bottom:4px}.mx_GroupMemberList .mx_AutoHideScrollbar,.mx_GroupRoomList .mx_AutoHideScrollbar,.mx_MemberList .mx_AutoHideScrollbar{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mx_GroupMemberList .mx_RightPanel_scopeHeader,.mx_GroupRoomList .mx_RightPanel_scopeHeader,.mx_MemberList .mx_RightPanel_scopeHeader{margin-top:-8px}.mx_GroupMemberList_query,.mx_GroupRoomList_query{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_MemberList_chevron{position:absolute;right:35px;margin-top:-15px}.mx_MemberList_border{overflow-y:auto;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0px}.mx_MemberList_query{height:16px}.mx_MemberList_query[type=text]{font-size:1.2rem}.mx_MemberList_wrapper{padding:10px}.mx_MemberList_invite{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;position:relative;background-color:#0dbd8b;border-radius:4px;margin:5px 9px 9px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;font-weight:600}.mx_MemberList_invite.mx_AccessibleButton_disabled{background-color:#888;cursor:not-allowed}.mx_MemberList_invite span{padding:8px 0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.mx_MemberList_invite span:before{content:"";display:inline-block;background-color:#fff;-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;width:20px;height:20px;margin-right:5px}.mx_MemberList_inviteCommunity span:before{-webkit-mask-image:url(../../img/icon-invite-people.d82f491.svg);mask-image:url(../../img/icon-invite-people.d82f491.svg)}.mx_MemberList_addRoomToCommunity span:before{-webkit-mask-image:url(../../img/icons-room-add.bd36e26.svg);mask-image:url(../../img/icons-room-add.bd36e26.svg)}.mx_MessageComposer_wrapper{vertical-align:middle;margin:auto;border-top:1px solid transparent;position:relative;padding-left:82px;padding-right:6px}.mx_MessageComposer_replaced_wrapper{margin-left:auto;margin-right:auto}.mx_MessageComposer_replaced_valign{height:60px;display:table-cell;vertical-align:middle}.mx_MessageComposer_roomReplaced_icon{float:left;margin-right:20px;margin-top:5px;width:31px;height:31px}.mx_MessageComposer_roomReplaced_header{font-weight:700}.mx_MessageComposer_autocomplete_wrapper{position:relative;height:0}.mx_MessageComposer_row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.mx_MessageComposer .mx_MessageComposer_avatar{position:absolute;left:26px}.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar{display:block}.mx_MessageComposer_composecontrols{width:100%}.mx_MessageComposer_e2eIcon.mx_E2EIcon{position:absolute;left:60px;margin-right:0;margin-left:3px;width:12px;height:12px}.mx_MessageComposer_noperm_error{width:100%;height:60px;font-style:italic;color:#888;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_MessageComposer_input_wrapper{cursor:text}.mx_MessageComposer_input,.mx_MessageComposer_input_wrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_MessageComposer_input{vertical-align:middle;min-height:60px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;font-size:1.4rem;margin-right:6px}.mx_MessageComposer_editor{width:100%;max-height:120px;min-height:19px;overflow-y:auto;overflow-x:hidden;word-break:break-word}.mx_MessageComposer_editor>:first-child{margin-top:0!important}.mx_MessageComposer_editor>:last-child{margin-bottom:0!important}@keyframes visualbell{0%{background-color:#faa}to{background-color:#fff}}.mx_MessageComposer_input_error{-webkit-animation:visualbell .2s;animation:visualbell .2s}.mx_MessageComposer_input blockquote{color:#777;margin:0 0 16px;padding:0 15px;border-left:4px solid #ddd}.mx_MessageComposer_input pre{background-color:rgba(0,0,0,.04);border-radius:3px;padding:10px}.mx_MessageComposer_input textarea{display:block;width:100%;padding:0;margin-top:6px;margin-bottom:6px;border:0;resize:none;outline:none;-webkit-box-shadow:none;box-shadow:none;color:#2e2f32;background-color:#fff;font-size:1.4rem;max-height:120px;overflow:auto;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji}.mx_MessageComposer_input textarea::-moz-placeholder{line-height:100%;color:#0dbd8b;opacity:1}.mx_MessageComposer_input textarea::-webkit-input-placeholder{color:#0dbd8b}.mx_MessageComposer_button_highlight{background:rgba(13,189,139,.25)}.mx_MessageComposer_button_highlight:before{background-color:#0dbd8b!important}.mx_MessageComposer_button{position:relative;margin-right:6px;cursor:pointer;height:26px;width:26px;border-radius:100%}.mx_MessageComposer_button:before{content:"";position:absolute;top:3px;left:3px;height:20px;width:20px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_MessageComposer_button:hover{background:rgba(13,189,139,.1)}.mx_MessageComposer_button:hover:before{background-color:#0dbd8b}.mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled):before{background-color:#ff4b55}.mx_MessageComposer_upload:before{-webkit-mask-image:url(../icons/attach.svg);mask-image:url(../icons/attach.svg)}.mx_MessageComposer_voiceMessage:before{-webkit-mask-image:url(../../img/voip/mic-on-mask.97ec7a0.svg);mask-image:url(../../img/voip/mic-on-mask.97ec7a0.svg)}.mx_MessageComposer_emoji:before{-webkit-mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg);mask-image:url(../../img/element-icons/room/composer/emoji.52d7369.svg)}.mx_MessageComposer_stickers:before{-webkit-mask-image:url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);mask-image:url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg)}.mx_MessageComposer_sendMessage{cursor:pointer;position:relative;margin-right:6px;width:32px;height:32px;border-radius:100%;background-color:#0dbd8b}.mx_MessageComposer_sendMessage:before{position:absolute;height:16px;width:16px;top:8px;left:9px;-webkit-mask-image:url(../../img/element-icons/send-message.a4e9cf8.svg);mask-image:url(../../img/element-icons/send-message.a4e9cf8.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-color:#fff;content:""}.mx_MessageComposer_formatting{cursor:pointer;margin:0 11px;width:24px;height:18px}.mx_MessageComposer_formatbar_wrapper{width:100%;background-color:#fff;-webkit-box-shadow:inset 0 1px 0 0 rgba(0,0,0,.08);box-shadow:inset 0 1px 0 0 rgba(0,0,0,.08)}.mx_MessageComposer_formatbar{margin:auto;display:-webkit-box;display:-ms-flexbox;display:flex;height:30px;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:62px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1rem;color:#888}.mx_MessageComposer_formatbar *{margin-right:4px}.mx_MessageComposer_format_button,.mx_MessageComposer_formatbar_cancel,.mx_MessageComposer_formatbar_markdown{cursor:pointer}.mx_MessageComposer_formatbar_cancel{margin-right:22px}.mx_MessageComposer_formatbar_markdown{height:17px;width:30px;margin-right:64px}.mx_MessageComposer_input_markdownIndicator{height:10px;width:12px;padding:4px 4px 4px 0}.mx_MessageComposer_formatbar_markdown,.mx_MessageComposer_input_markdownIndicator{cursor:pointer;-webkit-mask-image:url(../../img/markdown.6905ba8.svg);mask-image:url(../../img/markdown.6905ba8.svg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#c1c6cd}.mx_MessageComposer_formatbar_markdown.mx_MessageComposer_markdownDisabled,.mx_MessageComposer_input_markdownIndicator.mx_MessageComposer_markdownDisabled{opacity:.2}.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input{min-height:50px}.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error{height:50px}.mx_MessageComposerFormatBar{display:none;width:130px;height:24px;position:absolute;cursor:pointer;border-radius:4px;background-color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1000}.mx_MessageComposerFormatBar.mx_MessageComposerFormatBar_shown{display:block}.mx_MessageComposerFormatBar>*{white-space:nowrap;display:inline-block;position:relative;border:1px solid #e9edf1;margin-left:-1px}.mx_MessageComposerFormatBar>:hover{border-color:#ddd;z-index:1}.mx_MessageComposerFormatBar>:first-child{border-radius:3px 0 0 3px}.mx_MessageComposerFormatBar>:last-child{border-radius:0 3px 3px 0}.mx_MessageComposerFormatBar>:only-child{border-radius:3px}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button{width:27px;height:24px;-webkit-box-sizing:border-box;box-sizing:border-box;background:none;vertical-align:middle}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:#2e2f32}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconBold:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);mask-image:url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconItalic:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/italic.bf18054.svg);mask-image:url(../../img/element-icons/room/format-bar/italic.bf18054.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconStrikethrough:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);mask-image:url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconQuote:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);mask-image:url(../../img/element-icons/room/format-bar/quote.560cd8f.svg)}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconCode:after{-webkit-mask-image:url(../../img/element-icons/room/format-bar/code.27444ba.svg);mask-image:url(../../img/element-icons/room/format-bar/code.27444ba.svg)}.mx_MessageComposerFormatBar_buttonTooltip{white-space:nowrap;font-size:1.3rem;font-weight:600;min-width:54px;text-align:center}.mx_MessageComposerFormatBar_buttonTooltip .mx_MessageComposerFormatBar_tooltipShortcut{font-size:.9rem;opacity:.7}.mx_NewRoomIntro{margin:40px 0 48px 64px}.mx_NewRoomIntro .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):after,.mx_NewRoomIntro .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):before{content:unset}.mx_NewRoomIntro .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_NewRoomIntro .mx_NewRoomIntro_buttons{margin-top:28px}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton{line-height:2.4rem;display:inline-block}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton+.mx_AccessibleButton{margin-left:12px}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary_outline):before{content:"";display:inline-block;background-color:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;width:20px;height:20px;margin-right:5px;vertical-align:text-bottom}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_NewRoomIntro_inviteButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_NewRoomIntro>h2{margin-top:24px;font-size:2.4rem;font-weight:600}.mx_NewRoomIntro>p{margin:0;font-size:1.5rem;color:#737d8c}.mx_NotificationBadge:not(.mx_NotificationBadge_visible){display:none}.mx_NotificationBadge.mx_NotificationBadge_visible{background-color:#61708b;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_highlighted{background-color:#ff4b55}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot{background-color:#2e2f32;width:6px;height:6px;border-radius:6px}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char{width:1.6rem;height:1.6rem;border-radius:1.6rem}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_3char{width:2.6rem;height:1.6rem;border-radius:1.6rem}.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count{font-size:1rem;line-height:1.4rem;color:#fff}.mx_PinnedEventTile{min-height:40px;margin-bottom:5px;width:100%;border-radius:5px}.mx_PinnedEventTile:hover{background-color:#f6f7f8}.mx_PinnedEventTile .mx_PinnedEventTile_sender,.mx_PinnedEventTile .mx_PinnedEventTile_timestamp{color:#868686;font-size:.8em;vertical-align:top;display:inline-block;padding-bottom:3px}.mx_PinnedEventTile .mx_PinnedEventTile_timestamp{padding-left:15px;display:none}.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar{float:left;margin-right:10px}.mx_PinnedEventTile_actions{float:right;margin-right:10px;display:none}.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp{display:inline-block}.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions{display:block}.mx_PinnedEventTile_unpinButton{display:inline-block;cursor:pointer;margin-left:10px}.mx_PinnedEventTile_gotoButton{display:inline-block;font-size:.7em}.mx_PinnedEventTile_message{margin-left:50px;position:relative;top:0;left:0}.mx_PinnedEventsPanel{border-top:1px solid transparent}.mx_PinnedEventsPanel_body{max-height:300px;overflow-y:auto;padding-bottom:15px}.mx_PinnedEventsPanel_header{margin:0;padding-top:8px;padding-bottom:15px}.mx_PinnedEventsPanel_cancel{margin:12px;float:right;display:inline-block}.mx_PresenceLabel{font-size:1.1rem;opacity:.5}.mx_ReplyPreview{background:#fff;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;max-height:50vh;overflow:auto;-webkit-box-shadow:0 -16px 32px rgba(0,0,0,.04);box-shadow:0 -16px 32px rgba(0,0,0,.04)}.mx_ReplyPreview_section{border-bottom:1px solid transparent}.mx_ReplyPreview_header{margin:12px;color:#2e2f32;font-weight:400;opacity:.4}.mx_ReplyPreview_title{float:left}.mx_ReplyPreview_cancel{float:right;cursor:pointer}.mx_ReplyPreview_clear{clear:both}.mx_RoomBreadcrumbs{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb{margin-right:8px;width:32px}.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter{margin-left:-40px}.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter-active{margin-left:0;-webkit-transition:margin-left .64s cubic-bezier(.66,.02,.36,1);transition:margin-left .64s cubic-bezier(.66,.02,.36,1)}.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_placeholder{font-weight:600;font-size:1.4rem;line-height:32px;height:32px}.mx_RoomBreadcrumbs_Tooltip{margin-left:-42px;margin-top:-42px}.mx_RoomHeader{-webkit-box-flex:0;-ms-flex:0 0 50px;flex:0 0 50px;border-bottom:1px solid transparent;background-color:#fff}.mx_RoomHeader .mx_RoomHeader_e2eIcon{height:12px;width:12px}.mx_RoomHeader .mx_RoomHeader_e2eIcon .mx_E2EIcon{margin:0;position:absolute;height:12px;width:12px}.mx_RoomHeader_wrapper{margin:auto;height:50px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:0;padding:0 10px 0 18px}.mx_RoomHeader_wrapper .mx_InviteOnlyIcon_large{margin:0}.mx_RoomHeader_spinner{-webkit-box-flex:1;-ms-flex:1;flex:1;height:36px;padding-left:12px;padding-right:12px}.mx_RoomHeader_textButton{vertical-align:middle;border:0;border-radius:8px;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-size:1.4rem;color:#fff;background-color:#0dbd8b;width:auto;padding:7px 1.5em;cursor:pointer;display:inline-block;outline:none;margin-right:8px;margin-top:-5px}.mx_RoomHeader_textButton_danger{background-color:#ff4b55}.mx_RoomHeader_cancelButton{cursor:pointer;padding-left:12px;padding-right:12px}.mx_RoomHeader_buttons{background-color:#fff}.mx_RoomHeader_buttons,.mx_RoomHeader_info{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_info{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomHeader_simpleHeader{line-height:5.2rem;color:#45474a;font-size:1.8rem;font-weight:600;overflow:hidden;margin-left:63px;text-overflow:ellipsis;width:100%}.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton{float:right}.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon{margin-left:14px;margin-right:24px;vertical-align:-4px}.mx_RoomHeader_name{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;overflow:hidden;color:#45474a;font-weight:600;font-size:1.8rem;margin:0 7px;border-bottom:1px solid transparent;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomHeader_nametext{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.mx_RoomHeader_settingsHint{color:#a2a2a2!important}.mx_RoomHeader_searchStatus{font-weight:400;opacity:.6}.mx_RoomHeader_avatar,.mx_RoomHeader_avatarPicker,.mx_RoomHeader_avatarPicker_edit,.mx_RoomHeader_avatarPicker_remove,.mx_RoomHeader_name{cursor:pointer}.mx_RoomHeader_avatarPicker_remove{position:absolute;top:-11px;right:-9px}.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable){color:#0dbd8b}.mx_RoomHeader_placeholder{color:#a2a2a2!important}.mx_RoomHeader_editable{border-bottom:1px solid #c7c7c7!important;min-width:150px;cursor:text}.mx_RoomHeader_editable:focus{border-bottom:1px solid #0dbd8b!important;outline:none;-webkit-box-shadow:none;box-shadow:none}.mx_RoomHeader_topic{-webkit-box-flex:1;-ms-flex:1;flex:1;color:#9e9e9e;font-weight:400;font-size:1.3rem;margin:4px 7px 0;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid transparent;line-height:1.2em;max-height:2.4em}.mx_RoomHeader_avatar{-webkit-box-flex:0;-ms-flex:0;flex:0;margin:0 6px 0 7px;position:relative}.mx_RoomHeader_avatar .mx_BaseAvatar_image{-o-object-fit:cover;object-fit:cover}.mx_RoomHeader_avatarPicker{position:relative}.mx_RoomHeader_avatarPicker_edit{position:absolute;left:16px;top:18px}.mx_RoomHeader_avatarPicker_edit>label{cursor:pointer}.mx_RoomHeader_avatarPicker_edit>input{display:none}.mx_RoomHeader_button{position:relative;margin-left:1px;margin-right:1px;cursor:pointer;height:32px;width:32px;border-radius:100%}.mx_RoomHeader_button:before{content:"";position:absolute;top:4px;left:4px;height:24px;width:24px;background-color:#c1c6cd;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_RoomHeader_button:hover{background:rgba(13,189,139,.1)}.mx_RoomHeader_button:hover:before{background-color:#0dbd8b}.mx_RoomHeader_forgetButton:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg);width:26px}.mx_RoomHeader_appsButton:before{-webkit-mask-image:url(../../img/element-icons/room/apps.5ee9f78.svg);mask-image:url(../../img/element-icons/room/apps.5ee9f78.svg)}.mx_RoomHeader_appsButton_highlight:before{background-color:#0dbd8b}.mx_RoomHeader_searchButton:before{-webkit-mask-image:url(../../img/element-icons/room/search-inset.db6314d.svg);mask-image:url(../../img/element-icons/room/search-inset.db6314d.svg)}.mx_RoomHeader_voiceCallButton:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);-webkit-mask-size:20px;mask-size:20px;-webkit-mask-position:center;mask-position:center}.mx_RoomHeader_videoCallButton:before{-webkit-mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg);mask-image:url(../../img/element-icons/call/video-call.f465ed0.svg)}.mx_RoomHeader_showPanel{height:16px}.mx_RoomHeader_voipButton{display:table-cell}.mx_RoomHeader_voipButtons{margin-top:18px}.mx_RoomHeader_pinnedButton:before{-webkit-mask-image:url(../../img/element-icons/room/pin.6ab67ed.svg);mask-image:url(../../img/element-icons/room/pin.6ab67ed.svg)}.mx_RoomHeader_pinsIndicator{position:absolute;right:0;bottom:4px;width:8px;height:8px;border-radius:8px;background-color:#8d99a5}.mx_RoomHeader_pinsIndicatorUnread{background-color:#ff4b55}@media only screen and (max-width:480px){.mx_RoomHeader_wrapper{padding:0}.mx_RoomHeader{overflow:hidden}}.mx_RoomList{padding-right:7px}.mx_RoomList_iconPlus:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);mask-image:url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg)}.mx_RoomList_iconHash:before{-webkit-mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);mask-image:url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg)}.mx_RoomList_iconExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_RoomList_iconBrowse:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_RoomList_iconDialpad:before{-webkit-mask-image:url(../../img/element-icons/roomlist/dialpad.37f876f.svg);mask-image:url(../../img/element-icons/roomlist/dialpad.37f876f.svg)}.mx_RoomList_explorePrompt{margin:4px 12px;padding-top:12px;border-top:1px solid #e7e7e7;font-size:1.4rem}.mx_RoomList_explorePrompt div:first-child{font-weight:600;line-height:1.8rem;color:#2e2f32}.mx_RoomList_explorePrompt .mx_AccessibleButton{color:#2e2f32;position:relative;padding:8px 8px 8px 32px;font-size:inherit;margin-top:12px;display:block;text-align:start;background-color:rgba(141,151,165,.2);border-radius:4px}.mx_RoomList_explorePrompt .mx_AccessibleButton:before{content:"";width:16px;height:16px;position:absolute;top:8px;left:8px;background:#737d8c;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_startChat:before{-webkit-mask-image:url(../../img/element-icons/feedback.a91241e.svg);mask-image:url(../../img/element-icons/feedback.a91241e.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_explore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg);mask-image:url(../../img/element-icons/roomlist/explore.1523e65.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_RoomList_explorePrompt .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceExplore:before{-webkit-mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg);mask-image:url(../../img/element-icons/roomlist/browse.080f923.svg)}.mx_RoomPreviewBar{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-align-items:center}.mx_RoomPreviewBar h3{font-size:1.8rem;font-weight:600}.mx_RoomPreviewBar h3.mx_RoomPreviewBar_spinnerTitle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomPreviewBar .mx_RoomPreviewBar_message p,.mx_RoomPreviewBar h3{word-break:break-all;word-break:break-word}.mx_RoomPreviewBar .mx_Spinner{width:auto;height:auto;margin:10px 10px 10px 0;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mx_RoomPreviewBar .mx_RoomPreviewBar_footer{font-size:1.2rem;line-height:2rem}.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner{vertical-align:middle;display:inline-block}.mx_RoomPreviewBar_actions,.mx_RoomPreviewBar_message{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomPreviewBar_message{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.mx_RoomPreviewBar_message p{overflow-wrap:break-word}.mx_RoomPreviewBar_panel{padding:8px 8px 8px 20px;border-top:1px solid transparent;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:3px 8px}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions>*{margin-left:12px}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;min-width:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message>*{margin:4px}.mx_RoomPreviewBar_dialog{margin:auto;-webkit-box-sizing:content;box-sizing:content;width:400px;border-radius:4px;padding:20px;text-align:center}.mx_RoomPreviewBar_dialog,.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message>*{margin:5px 0 20px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton{padding:7px 50px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions>*{margin-top:12px}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton.mx_AccessibleButton_kind_primary{margin-bottom:7px}.mx_RoomPreviewBar_inviter{font-weight:600}a.mx_RoomPreviewBar_inviter{text-decoration:underline;cursor:pointer}.mx_RoomSublist{margin-left:8px;margin-bottom:4px}.mx_RoomSublist.mx_RoomSublist_hidden{display:none}.mx_RoomSublist .mx_RoomSublist_headerContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:8px;max-height:24px;color:#8d99a5}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky{position:fixed;height:32px;width:calc(100% - 22px)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer .mx_NotificationBadge{margin-left:8px}.mx_RoomSublist .mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_NotificationBadge{margin-right:4px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton{margin-left:8px;position:relative;width:24px;height:24px;border-radius:8px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:before{content:"";width:16px;height:16px;position:absolute;top:4px;left:4px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#61708b}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover,.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:hover{background:rgba(141,151,165,.2)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton{visibility:hidden;width:0;margin:0}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before{-webkit-mask-image:url(../../img/element-icons/roomlist/plus.daac9ba.svg);mask-image:url(../../img/element-icons/roomlist/plus.daac9ba.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:before{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:calc(100% - 16px);line-height:1.6rem;font-size:1.3rem;font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn{display:inline-block;position:relative;width:14px;height:14px;margin-right:6px}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn:before{content:"";width:18px;height:18px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#8d99a5;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn.mx_RoomSublist_collapseBtn_collapsed:before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mx_RoomSublist:first-child .mx_RoomSublist_headerContainer{height:0;padding-bottom:4px}.mx_RoomSublist .mx_RoomSublist_resizeBox{position:relative;-ms-flex-direction:column;flex-direction:column}.mx_RoomSublist .mx_RoomSublist_resizeBox,.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;overflow:hidden}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;-ms-flex-direction:column;flex-direction:column;-webkit-mask-image:linear-gradient(0deg,transparent,#000 4px);mask-image:linear-gradient(0deg,transparent,#000 4px)}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles_showNButton{-webkit-box-flex:0;-ms-flex:0 0 32px;flex:0 0 32px}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles{-webkit-box-flex:0;-ms-flex:0 0 4px;flex:0 0 4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandle{cursor:ns-resize;border-radius:3px;max-width:64px;height:4px!important;position:relative!important;bottom:0!important}.mx_RoomSublist .mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_resizerHandle,.mx_RoomSublist .mx_RoomSublist_resizeBox:hover .mx_RoomSublist_resizerHandle{opacity:.8;background-color:#2e2f32}.mx_RoomSublist .mx_RoomSublist_showNButton{cursor:pointer;font-size:1.3rem;line-height:1.8rem;color:#737d8c;height:24px;padding-bottom:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron{position:relative;width:18px;height:18px;margin-left:12px;margin-right:16px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#8d99a5;left:-1px}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron,.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showMoreButtonChevron{-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mx_RoomSublist.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,.mx_RoomSublist:not(.mx_RoomSublist_minimized)>.mx_RoomSublist_headerContainer:focus-within .mx_RoomSublist_menuButton,.mx_RoomSublist:not(.mx_RoomSublist_minimized)>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton{visibility:visible;width:24px;margin-left:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer{height:auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0;-ms-flex-item-align:end;align-self:flex-end;margin-right:0}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;max-width:100%}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;visibility:visible;width:32px!important;height:32px!important;margin-left:0!important;background-color:rgba(141,151,165,.2);margin-top:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before{top:8px;left:8px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_resizeBox{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron{margin-right:12px}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_menuButton{height:16px}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton{visibility:visible;position:absolute;bottom:48px;right:0;width:16px;height:16px;border-radius:0;z-index:1;background-color:hsla(0,0%,96.1%,.9)}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton:before,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton:before{top:0;left:0}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton,.mx_RoomSublist.mx_RoomSublist_minimized>.mx_RoomSublist_headerContainer:hover.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton{bottom:8px}.mx_RoomSublist_contextMenu{padding:20px 16px;width:250px}.mx_RoomSublist_contextMenu hr{margin-top:16px;margin-bottom:16px;margin-right:16px;border:1px solid #2e2f32;opacity:.1}.mx_RoomSublist_contextMenu .mx_RoomSublist_contextMenu_title{font-size:1.5rem;line-height:2rem;font-weight:600;margin-bottom:4px}.mx_RoomSublist_contextMenu .mx_Checkbox,.mx_RoomSublist_contextMenu .mx_RadioButton{margin-top:8px}.mx_RoomSublist_addRoomTooltip{margin-top:-3px}.mx_RoomSublist_skeletonUI{position:relative;margin-left:4px;height:288px}.mx_RoomSublist_skeletonUI:before{background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(hsla(0,0%,100%,0)));background:linear-gradient(180deg,#fff,hsla(0,0%,100%,0));width:100%;height:100%;content:"";position:absolute;-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;-webkit-mask-size:auto 48px;mask-size:auto 48px;-webkit-mask-image:url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);mask-image:url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg)}.mx_RoomTile{margin-bottom:4px;padding:4px;display:-webkit-box;display:-ms-flexbox;display:flex}.mx_RoomTile.mx_RoomTile_hasMenuOpen,.mx_RoomTile.mx_RoomTile_selected,.mx_RoomTile:focus-within,.mx_RoomTile:hover{background-color:#fff;border-radius:8px}.mx_RoomTile .mx_DecoratedRoomAvatar,.mx_RoomTile .mx_RoomTile_avatarContainer{margin-right:8px}.mx_RoomTile .mx_RoomTile_nameContainer{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-width:0;margin-right:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview,.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name{margin:0 2px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name{font-size:1.4rem;line-height:1.8rem}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents{font-weight:600}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview{font-size:1.3rem;line-height:1.8rem;color:#737d8c}.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_nameWithPreview{margin-top:-4px}.mx_RoomTile .mx_RoomTile_notificationsButton{margin-left:4px}.mx_RoomTile .mx_RoomTile_badgeContainer{height:16px;margin:auto 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge{margin-right:2px}.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge_dot{margin-left:5px;margin-right:7px}.mx_RoomTile .mx_RoomTile_menuButton,.mx_RoomTile .mx_RoomTile_notificationsButton{width:20px;min-width:20px;height:20px;margin-top:auto;margin-bottom:auto;position:relative;display:none}.mx_RoomTile .mx_RoomTile_menuButton:before,.mx_RoomTile .mx_RoomTile_notificationsButton:before{top:2px;left:2px;content:"";width:16px;height:16px;position:absolute;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:#2e2f32}.mx_RoomTile .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show{display:block}.mx_RoomTile .mx_RoomTile_menuButton:before{-webkit-mask-image:url(../../img/element-icons/context-menu.829cc1a.svg);mask-image:url(../../img/element-icons/context-menu.829cc1a.svg)}.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_badgeContainer,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_badgeContainer,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_badgeContainer{width:0;height:0;display:none}.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen .mx_RoomTile_notificationsButton,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_notificationsButton,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_menuButton,.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_notificationsButton{display:block}.mx_RoomTile.mx_RoomTile_minimized{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative}.mx_RoomTile.mx_RoomTile_minimized .mx_DecoratedRoomAvatar,.mx_RoomTile.mx_RoomTile_minimized .mx_RoomTile_avatarContainer{margin-right:0}.mx_RoomTile_iconBell:before{-webkit-mask-image:url(../../img/element-icons/notifications.d298b39.svg);mask-image:url(../../img/element-icons/notifications.d298b39.svg)}.mx_RoomTile_iconBellDot:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);mask-image:url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg)}.mx_RoomTile_iconBellCrossed:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);mask-image:url(../../img/element-icons/roomlist/notifications-off.0c57561.svg)}.mx_RoomTile_iconBellMentions:before{-webkit-mask-image:url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);mask-image:url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconStar:before{-webkit-mask-image:url(../../img/element-icons/roomlist/favorite.ff7609d.svg);mask-image:url(../../img/element-icons/roomlist/favorite.ff7609d.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconArrowDown:before{-webkit-mask-image:url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);mask-image:url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconSettings:before{-webkit-mask-image:url(../../img/element-icons/settings.6b381af.svg);mask-image:url(../../img/element-icons/settings.6b381af.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconInvite:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_RoomTile_contextMenu .mx_RoomTile_iconSignOut:before{-webkit-mask-image:url(../../img/element-icons/leave.bb917e7.svg);mask-image:url(../../img/element-icons/leave.bb917e7.svg)}.mx_RoomUpgradeWarningBar{max-height:235px;background-color:#f7f7f7;padding-left:20px;padding-right:20px;overflow:scroll}.mx_RoomUpgradeWarningBar_wrapped{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center}.mx_RoomUpgradeWarningBar_header{color:#ff4b55;font-weight:700}.mx_RoomUpgradeWarningBar_body{color:#ff4b55}.mx_RoomUpgradeWarningBar_upgradelink{color:#ff4b55;text-decoration:underline}.mx_RoomUpgradeWarningBar_small{color:#888;font-size:70%}.mx_SearchBar{height:56px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid transparent}.mx_SearchBar .mx_SearchBar_input{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;margin-left:22px}.mx_SearchBar .mx_SearchBar_searchButton{cursor:pointer;width:37px;height:37px;background-color:#0dbd8b;-webkit-mask:url(../../img/feather-customised/search-input.044bfa7.svg);mask:url(../../img/feather-customised/search-input.044bfa7.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mx_SearchBar .mx_SearchBar_buttons{display:inherit}.mx_SearchBar .mx_SearchBar_button{border:0;margin:0 0 0 22px;padding:5px;font-size:1.5rem;cursor:pointer;color:#2e2f32;border-bottom:2px solid #0dbd8b;font-weight:600}.mx_SearchBar .mx_SearchBar_unselected{color:#9fa9ba;border-color:transparent}.mx_SearchBar .mx_SearchBar_cancel{background-color:#ff4b55;-webkit-mask:url(../../img/cancel.4b9715b.svg);mask:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14px;mask-size:14px;padding:9px;margin:0 12px 0 3px;cursor:pointer}.mx_SendMessageComposer{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;font-size:1.4rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-right:6px;min-width:0}.mx_SendMessageComposer,.mx_SendMessageComposer .mx_BasicMessageComposer{-webkit-box-flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mx_SendMessageComposer .mx_BasicMessageComposer{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;min-height:50px}.mx_SendMessageComposer .mx_BasicMessageComposer .mx_BasicMessageComposer_input{padding:3px 0;margin:auto 0;max-height:140px;overflow-y:auto}.mx_Stickers_content{overflow:hidden}.mx_Stickers_content_container{overflow:hidden;height:300px}#mx_persistedElement_stickerPicker .mx_AppTileFullWidth{height:unset;-webkit-box-sizing:border-box;box-sizing:border-box;border-left:none;border-right:none;border-bottom:none}#mx_persistedElement_stickerPicker .mx_AppTileMenuBar{padding:0}#mx_persistedElement_stickerPicker iframe{height:283px}.mx_Stickers_contentPlaceholder{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.mx_Stickers_contentPlaceholder p{max-width:200px}.mx_Stickers_addLink{display:inline;cursor:pointer;color:#0dbd8b}.mx_Stickers_hideStickers{z-index:2001}.mx_TopUnreadMessagesBar{z-index:1000;position:absolute;top:24px;right:24px;width:38px}.mx_TopUnreadMessagesBar:after{content:"";position:absolute;top:-8px;left:10.5px;width:4px;height:4px;border-radius:16px;background-color:#f2f5f8;border:6px solid #0dbd8b;pointer-events:none}.mx_TopUnreadMessagesBar_scrollUp{height:38px;border-radius:19px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1.3px solid #61708b;cursor:pointer}.mx_TopUnreadMessagesBar_scrollUp:before{content:"";position:absolute;width:36px;height:36px;-webkit-mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);mask-image:url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;background:#61708b;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mx_TopUnreadMessagesBar_markAsRead{display:block;width:18px;height:18px;background:#fff;border:1.3px solid #61708b;border-radius:10px;margin:5px auto}.mx_TopUnreadMessagesBar_markAsRead:before{content:"";position:absolute;width:18px;height:18px;-webkit-mask-image:url(../../img/cancel.4b9715b.svg);mask-image:url(../../img/cancel.4b9715b.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:10px;mask-size:10px;-webkit-mask-position:4px 4px;mask-position:4px 4px;background:#61708b}.mx_VoiceRecordComposerTile_stop{width:28px;height:28px;border:2px solid #e3e8f0;border-radius:32px;margin-right:16px;position:relative}.mx_VoiceRecordComposerTile_stop:after{content:"";width:14px;height:14px;position:absolute;top:7px;left:7px;border-radius:2px;background-color:#ff4b55}.mx_VoiceRecordComposerTile_delete{width:14px;height:18px;vertical-align:middle;margin-right:11px;background-color:#8d99a5;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(../../img/element-icons/trashcan.26f6c28.svg);mask-image:url(../../img/element-icons/trashcan.26f6c28.svg)}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer{margin:6px 12px 6px 6px;position:relative}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording{padding-left:22px}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording:before{-webkit-animation:recording-pulse 2s infinite;animation:recording-pulse 2s infinite;content:"";background-color:#ff4b55;width:10px;height:10px;position:absolute;left:12px;top:18px;border-radius:10px}@-webkit-keyframes recording-pulse{0%{opacity:1}35%{opacity:0}65%{opacity:1}}@keyframes recording-pulse{0%{opacity:1}35%{opacity:0}65%{opacity:1}}.mx_WhoIsTypingTile{margin-left:-18px;padding-top:18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_WhoIsTypingTile_avatars{-webkit-box-flex:0;-ms-flex:0 0 83px;flex:0 0 83px;text-align:center}.mx_WhoIsTypingTile_avatars>:not(:first-child){margin-left:-12px}.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial{padding-top:1px}.mx_WhoIsTypingTile_avatars .mx_BaseAvatar{border:1px solid #fff;border-radius:40px}.mx_WhoIsTypingTile_remainingAvatarPlaceholder{position:relative;display:inline-block;color:#acacac;background-color:#ddd;border:1px solid #fff;border-radius:40px;width:24px;height:24px;line-height:2.4rem;font-size:.8em;vertical-align:top;text-align:center}.mx_WhoIsTypingTile_label{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:1.4rem;font-weight:600;color:#9e9e9e}.mx_WhoIsTypingTile_label>span{background-image:url(../../img/typing-indicator-2x.0eb9f0e.gif);background-size:25px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:15px;display:block}.mx_MatrixChat_useCompactLayout .mx_WhoIsTypingTile{padding-top:4px}.mx_AvatarSetting_avatar{width:90px;min-width:90px;height:90px;margin-top:8px;position:relative}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover{-webkit-transition:opacity .08s cubic-bezier(.46,.03,.52,.96);transition:opacity .08s cubic-bezier(.46,.03,.52,.96);position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;line-height:90px;text-align:center}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover>span{color:#fff;position:relative;font-weight:500}.mx_AvatarSetting_avatar .mx_AvatarSetting_hover .mx_AvatarSetting_hoverBg{position:absolute;top:0;bottom:0;left:0;right:0;opacity:.5;background-color:#2e2f32;border-radius:90px}.mx_AvatarSetting_avatar.mx_AvatarSetting_avatar_hovering .mx_AvatarSetting_hover{opacity:1}.mx_AvatarSetting_avatar:not(.mx_AvatarSetting_avatar_hovering) .mx_AvatarSetting_hover{opacity:0}.mx_AvatarSetting_avatar>*{-webkit-box-sizing:border-box;box-sizing:border-box}.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_primary{margin-top:8px}.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm{width:100%}.mx_AvatarSetting_avatar>img{cursor:pointer;-o-object-fit:cover;object-fit:cover}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder,.mx_AvatarSetting_avatar>img{display:block;height:90px;width:inherit;border-radius:90px;cursor:pointer}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before{background-color:#2e2f32;-webkit-mask:url(../../img/feather-customised/user.7a4d23d.svg);mask:url(../../img/feather-customised/user.7a4d23d.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:36px;mask-size:36px;-webkit-mask-position:center;mask-position:center;content:"";position:absolute;top:0;bottom:0;left:0;right:0}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton{width:32px;height:32px;border-radius:32px;background-color:#e7e7e7;position:absolute;bottom:0;right:0}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton:before{content:"";display:block;width:100%;height:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:55%;mask-size:55%;background-color:#2e2f32;-webkit-mask-image:url(../../img/feather-customised/edit.fd55ec2.svg);mask-image:url(../../img/feather-customised/edit.fd55ec2.svg)}.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder{background-color:#f4f6fa}.mx_CrossSigningPanel_statusList{border-spacing:0}.mx_CrossSigningPanel_statusList td{padding:0}.mx_CrossSigningPanel_statusList td:first-of-type{-webkit-padding-end:1em;padding-inline-end:1em}.mx_CrossSigningPanel_buttonRow{margin:1em 0}.mx_CrossSigningPanel_buttonRow :nth-child(n+1){-webkit-margin-end:10px;margin-inline-end:10px}.mx_DevicesPanel{display:table;table-layout:fixed;width:880px;border-spacing:10px}.mx_DevicesPanel_header{display:table-header-group;font-weight:700}.mx_DevicesPanel_header>.mx_DevicesPanel_deviceButtons{height:48px}.mx_DevicesPanel_header>div{display:table-cell;vertical-align:middle}.mx_DevicesPanel_header .mx_DevicesPanel_deviceName{width:50%}.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen{width:30%}.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons{width:20%}.mx_DevicesPanel_device{display:table-row}.mx_DevicesPanel_device>div{display:table-cell}.mx_DevicesPanel_myDevice{font-weight:700}.mx_E2eAdvancedPanel_settingLongDescription{margin-right:150px}.mx_ExistingEmailAddress{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingEmailAddress_delete{margin-right:5px;cursor:pointer;vertical-align:middle}.mx_ExistingEmailAddress_email,.mx_ExistingEmailAddress_promptText{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_ExistingEmailAddress_confirmBtn{margin-left:5px}.mx_IntegrationManager .mx_Dialog{width:60%;height:70%;overflow:hidden;padding:0;max-width:none;max-height:none}.mx_IntegrationManager iframe{background-color:#fff;border:0;width:100%;height:100%}.mx_IntegrationManager_loading h3{text-align:center}.mx_IntegrationManager_error{text-align:center;padding-top:20px}.mx_IntegrationManager_error h3{color:#ff4b55}.mx_UserNotifSettings_tableRow{display:table-row}.mx_UserNotifSettings_inputCell{display:table-cell;padding-bottom:8px;padding-right:8px;width:16px}.mx_UserNotifSettings_labelCell{padding-bottom:8px;width:400px;display:table-cell}.mx_UserNotifSettings_pushRulesTableWrapper{padding-bottom:8px}.mx_UserNotifSettings_pushRulesTable{width:100%;table-layout:fixed}.mx_UserNotifSettings_pushRulesTable thead{font-weight:700}.mx_UserNotifSettings_pushRulesTable tbody th{font-weight:400}.mx_UserNotifSettings_pushRulesTable tbody th:first-child{text-align:left}.mx_UserNotifSettings_keywords{cursor:pointer;color:#0dbd8b}.mx_UserNotifSettings_devicesTable td{padding-left:20px;padding-right:20px}.mx_UserNotifSettings_notifTable{display:table;position:relative}.mx_UserNotifSettings_notifTable .mx_Spinner{position:absolute}.mx_NotificationSound_soundUpload{display:none}.mx_NotificationSound_browse{color:#0dbd8b;border:1px solid #0dbd8b;background-color:transparent}.mx_NotificationSound_save{margin-left:5px;color:#fff;background-color:#0dbd8b}.mx_NotificationSound_resetSound{margin-top:5px;color:#fff;border:#ff4b55;background-color:#ff4b55}.mx_ExistingPhoneNumber{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingPhoneNumber_delete{margin-right:5px;cursor:pointer;vertical-align:middle}.mx_ExistingPhoneNumber_address,.mx_ExistingPhoneNumber_promptText{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_ExistingPhoneNumber_confirmBtn{margin-left:5px}.mx_ExistingPhoneNumber_verification{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_ExistingPhoneNumber_verification .mx_Field{margin:0 0 0 1em}.mx_PhoneNumbers_input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_PhoneNumbers_input>.mx_Field{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mx_PhoneNumbers_country{width:80px}.mx_ProfileSettings_controls_topic>textarea{resize:vertical}.mx_ProfileSettings_profile{display:-webkit-box;display:-ms-flexbox;display:flex}.mx_ProfileSettings_controls{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin-right:54px}.mx_ProfileSettings_controls .mx_SettingsTab_subheading{margin-top:0}.mx_ProfileSettings_controls .mx_Field #profileTopic{height:4em}.mx_ProfileSettings_controls .mx_Field:first-child{margin-top:0}.mx_ProfileSettings_hostingSignup{margin-left:20px}.mx_ProfileSettings_hostingSignup img{margin-left:5px}.mx_ProfileSettings_avatarUpload{display:none}.mx_ProfileSettings_profileForm{margin-right:100px;border-bottom:1px solid #e7e7e7}.mx_ProfileSettings_buttons{margin-top:10px;margin-bottom:28px}.mx_ProfileSettings_buttons>.mx_AccessibleButton_kind_link{padding-left:0}.mx_SecureBackupPanel_deviceNotVerified,.mx_SecureBackupPanel_deviceVerified,.mx_SecureBackupPanel_sigInvalid,.mx_SecureBackupPanel_sigValid{font-weight:700}.mx_SecureBackupPanel_deviceVerified,.mx_SecureBackupPanel_sigValid{color:#76cfa5}.mx_SecureBackupPanel_deviceNotVerified,.mx_SecureBackupPanel_sigInvalid{color:#ba6363}.mx_SecureBackupPanel_deviceName{font-style:italic}.mx_SecureBackupPanel_buttonRow{margin:1em 0}.mx_SecureBackupPanel_buttonRow :nth-child(n+1){-webkit-margin-end:10px;margin-inline-end:10px}.mx_SecureBackupPanel_statusList{border-spacing:0}.mx_SecureBackupPanel_statusList td{padding:0}.mx_SecureBackupPanel_statusList td:first-of-type{-webkit-padding-end:1em;padding-inline-end:1em}.mx_SetIdServer .mx_Field_input{margin-right:100px}.mx_SetIdServer_tooltip{max-width:120px}.mx_SetIntegrationManager{margin-top:10px;margin-bottom:10px}.mx_SetIntegrationManager>.mx_SettingsTab_heading{margin-bottom:10px}.mx_SetIntegrationManager>.mx_SettingsTab_heading>.mx_SettingsTab_subheading{display:inline-block;padding-left:5px}.mx_SetIntegrationManager .mx_ToggleSwitch{display:inline-block;float:right;top:9px;margin-right:100px}.mx_ExistingSpellCheckLanguage{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.mx_ExistingSpellCheckLanguage_language{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px}.mx_GeneralUserSettingsTab_spellCheckLanguageInput{margin-top:1em;margin-bottom:1em}.mx_SpellCheckLanguages{margin-right:100px}.mx_UpdateCheckButton_summary{margin-left:16px}.mx_UpdateCheckButton_summary .mx_AccessibleButton_kind_link{padding:0}.mx_SettingsTab{color:#61708b}.mx_SettingsTab_warningText{color:#ff4b55}.mx_SettingsTab_heading{font-size:2rem;font-weight:600;color:#2e2f32;margin-bottom:10px}.mx_SettingsTab_heading:nth-child(n+2){margin-top:30px}.mx_SettingsTab_subheading{font-size:1.6rem;display:block;font-family:Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,Sans-Serif,Noto Color Emoji;font-weight:600;color:#2e2f32;margin-bottom:10px;margin-top:12px}.mx_SettingsTab_subsectionText{color:#61708b;font-size:1.4rem;display:block;margin:10px 100px 10px 0}.mx_SettingsTab_section{margin-bottom:24px}.mx_SettingsTab_section .mx_SettingsFlag{margin-right:100px;margin-bottom:10px}.mx_SettingsTab_section.mx_SettingsTab_subsectionText .mx_SettingsFlag{margin-right:0!important}.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label{vertical-align:middle;display:inline-block;font-size:1.4rem;color:#2e2f32;max-width:calc(100% - 4.8rem);-webkit-box-sizing:border-box;box-sizing:border-box;padding-right:10px}.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch{float:right}.mx_SettingsTab_linkBtn{cursor:pointer;color:#0dbd8b;word-break:break-all}.mx_SettingsTab a{color:#238cf5}.mx_GeneralRoomSettingsTab_profileSection{margin-top:10px}.mx_RolesRoomSettingsTab ul{margin-bottom:0}.mx_RolesRoomSettingsTab_unbanBtn{margin-right:10px;margin-bottom:5px}.mx_SecurityRoomSettingsTab_warning{display:block}.mx_SecurityRoomSettingsTab_warning img{vertical-align:middle;margin-right:5px;margin-left:3px;margin-bottom:5px}.mx_SecurityRoomSettingsTab_encryptionSection{margin-bottom:25px}.mx_AppearanceUserSettingsTab_fontSlider,.mx_AppearanceUserSettingsTab_fontSlider_preview,.mx_AppearanceUserSettingsTab_Layout{margin-right:100px}.mx_AppearanceUserSettingsTab .mx_Field{width:256px}.mx_AppearanceUserSettingsTab_fontScaling{color:#2e2f32}.mx_AppearanceUserSettingsTab_fontSlider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:15px;background:rgba(227,232,240,.2);border-radius:10px;font-size:10px;margin-top:24px;margin-bottom:24px}.mx_AppearanceUserSettingsTab_fontSlider_preview{border:1px solid #e3e8f0;border-radius:10px;padding:0 16px 9px;pointer-events:none}.mx_AppearanceUserSettingsTab_fontSlider_preview .mx_EventTile_msgOption{display:none}.mx_AppearanceUserSettingsTab_fontSlider_preview.mx_IRCLayout{padding-top:9px}.mx_AppearanceUserSettingsTab_fontSlider_smallText{font-size:15px;padding-right:20px;padding-left:5px;font-weight:500}.mx_AppearanceUserSettingsTab_fontSlider_largeText{font-size:18px;padding-left:20px;padding-right:5px;font-weight:500}.mx_AppearanceUserSettingsTab>.mx_SettingsTab_SubHeading{margin-bottom:32px}.mx_AppearanceUserSettingsTab_themeSection{color:#2e2f32}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:4px;margin-bottom:30px}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton{padding:1.6rem;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:10px;width:180px;background:#e3e8f0;opacity:.4;-ms-flex-negative:1;flex-shrink:1;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;margin-right:15px;margin-top:10px;font-weight:600;color:#61708b}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton>span{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled{opacity:1}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_light{background-color:#f3f8fd;color:#2e2f32}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark{background-color:#25282e;color:#f3f8fd}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark>input>div,.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_dark>input>div>div{border-color:#e3e8f0}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black{background-color:#000;color:#f3f8fd}.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black>input>div,.mx_AppearanceUserSettingsTab_themeSection>.mx_ThemeSelectors>.mx_RadioButton_enabled.mx_ThemeSelector_black>input>div>div{border-color:#e3e8f0}.mx_SettingsTab_customFontSizeField{margin-left:calc(1.6rem + 10px)}.mx_AppearanceUserSettingsTab_Layout_RadioButtons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:#2e2f32}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_AppearanceUserSettingsTab_spacer{width:24px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:1;flex-shrink:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:300px;border:1px solid #e3e8f0;border-radius:10px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_EventTile_msgOption,.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_MessageActionBar{display:none}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px;pointer-events:none}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_RadioButton{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;padding:10px}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton .mx_EventTile_content{margin-right:0}.mx_AppearanceUserSettingsTab_Layout_RadioButtons>.mx_AppearanceUserSettingsTab_Layout_RadioButton.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected{border-color:#0dbd8b}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton{border-top:1px solid #e3e8f0}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton>input+div{border-color:rgba(97,112,139,.2)}.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton_checked{background-color:rgba(13,189,139,.08)}.mx_AppearanceUserSettingsTab_Advanced{color:#2e2f32}.mx_AppearanceUserSettingsTab_Advanced>*{margin-bottom:16px}.mx_AppearanceUserSettingsTab_Advanced .mx_AppearanceUserSettingsTab_AdvancedToggle{color:#0dbd8b;cursor:pointer}.mx_AppearanceUserSettingsTab_Advanced .mx_AppearanceUserSettingsTab_systemFont{margin-left:calc(1.6rem + 10px)}.mx_GeneralUserSettingsTab_changePassword .mx_Field{margin-right:100px}.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child{margin-top:0}.mx_GeneralUserSettingsTab_accountSection .mx_SettingsTab_subheading:nth-child(n+1),.mx_GeneralUserSettingsTab_discovery .mx_SettingsTab_subheading:nth-child(n+2),.mx_SetIdServer .mx_SettingsTab_subheading{margin-top:24px}.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,.mx_GeneralUserSettingsTab_discovery .mx_Spinner{-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left}.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,.mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber,.mx_GeneralUserSettingsTab_languageInput{margin-right:100px}.mx_GeneralUserSettingsTab_warningIcon{vertical-align:middle}.mx_HelpUserSettingsTab_debugButton{margin-bottom:5px;margin-top:5px}.mx_HelpUserSettingsTab span.mx_AccessibleButton{word-break:break-word}.mx_HelpUserSettingsTab code{word-break:break-all;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.mx_HelpUserSettingsTab_accessToken{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-radius:5px;border:1px solid #747474;margin-bottom:10px;margin-top:10px;padding:10px}.mx_HelpUserSettingsTab_accessToken_copy{-ms-flex-negative:0;flex-shrink:0;cursor:pointer;margin-left:20px;display:inherit}.mx_HelpUserSettingsTab_accessToken_copy>div{-webkit-mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);mask-image:url(../../img/feather-customised/clipboard.24dd87a.svg);background-color:#2e2f32;margin-left:5px;width:20px;height:20px;background-repeat:no-repeat}.mx_LabsUserSettingsTab .mx_SettingsTab_section{margin-top:32px}.mx_LabsUserSettingsTab .mx_SettingsTab_section .mx_SettingsFlag{margin-right:0}.mx_MjolnirUserSettingsTab .mx_Field{margin-right:100px}.mx_MjolnirUserSettingsTab_listItem{margin-bottom:2px}.mx_NotificationUserSettingsTab .mx_SettingsTab_heading{margin-bottom:10px}.mx_PreferencesUserSettingsTab .mx_Field{margin-right:100px}.mx_PreferencesUserSettingsTab .mx_SettingsTab_section{margin-bottom:30px}.mx_SecurityUserSettingsTab .mx_DevicesPanel{width:auto;max-width:880px}.mx_SecurityUserSettingsTab_deviceInfo{display:table;padding-left:0}.mx_SecurityUserSettingsTab_deviceInfo>li{display:table-row}.mx_SecurityUserSettingsTab_deviceInfo>li>label,.mx_SecurityUserSettingsTab_deviceInfo>li>span{display:table-cell;padding-right:1em}.mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton,.mx_SecurityUserSettingsTab_importExportButtons .mx_AccessibleButton{margin-right:10px}.mx_SecurityUserSettingsTab_importExportButtons{margin-bottom:15px}.mx_SecurityUserSettingsTab_ignoredUser{margin-bottom:5px}.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton{margin-right:10px}.mx_SecurityUserSettingsTab .mx_SettingsTab_section .mx_AccessibleButton_kind_link{padding:0;font-size:inherit}.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning{color:#ff4b55;position:relative;padding-left:40px;margin-top:30px}.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning:before{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 center;mask-position:0 center;-webkit-mask-size:2.4rem;mask-size:2.4rem;position:absolute;width:2.4rem;height:2.4rem;content:"";top:0;left:0;background-color:#ff4b55;-webkit-mask-image:url(../../img/feather-customised/alert-triangle.38aca3a.svg);mask-image:url(../../img/feather-customised/alert-triangle.38aca3a.svg)}.mx_VoiceUserSettingsTab .mx_Field{margin-right:100px}.mx_VoiceUserSettingsTab_missingMediaPermissions{margin-bottom:15px}.mx_SpaceBasicSettings .mx_Field{margin:32px 0}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:24px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer .mx_SpaceBasicSettings_avatar{position:relative;height:80px;width:80px;background-color:#8d99a5;border-radius:16px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer img.mx_SpaceBasicSettings_avatar{width:80px;height:80px;-o-object-fit:cover;object-fit:cover;border-radius:16px}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar{cursor:pointer}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar:before{content:"";position:absolute;height:80px;width:80px;top:0;left:0;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-image:url(../../img/element-icons/camera.a81a395.svg);mask-image:url(../../img/element-icons/camera.a81a395.svg)}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>input[type=file]{display:none}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>.mx_AccessibleButton_kind_link{display:inline-block;padding:0;margin:auto 16px;color:#368bd6}.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer>.mx_SpaceBasicSettings_avatar_remove{color:#ff4b55}.mx_SpaceBasicSettings .mx_FormButton{padding:8px 22px;margin-left:auto;display:block;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_SpaceBasicSettings .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background{background-color:rgba(46,48,51,.38);opacity:.6;left:71px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu{padding:24px;width:480px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#fff;position:relative}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu>div>h2{font-weight:600;font-size:1.8rem;margin-top:4px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu>div>p{font-size:1.5rem;color:#737d8c;margin:0}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_BetaCard_betaPill{position:absolute;top:24px;right:24px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType>h3{font-weight:600;margin:0 0 4px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType>span{color:#737d8c}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover{border-color:#0dbd8b}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover:before{background-color:#0dbd8b}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover>span{color:#2e2f32}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_public:before{-webkit-mask-image:url(../../img/globe.8201f08.svg);mask-image:url(../../img/globe.8201f08.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_private:before{-webkit-mask-image:url(../../img/element-icons/lock.1f264bd.svg);mask-image:url(../../img/element-icons/lock.1f264bd.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back{width:28px;height:28px;position:relative;background-color:rgba(141,151,165,.2);border-radius:14px;margin-bottom:12px}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back:before{content:"";position:absolute;height:28px;width:28px;top:0;left:0;background-color:#8d99a5;-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:2px 3px;mask-position:2px 3px;-webkit-mask-size:24px;mask-size:24px;-webkit-mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg);mask-image:url(../../img/feather-customised/chevron-down.5278abe.svg)}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_kind_primary{padding:8px 22px;margin-left:auto;display:block;width:-webkit-min-content;width:-moz-min-content;width:min-content}.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_disabled{cursor:not-allowed}.mx_SpacePublicShare .mx_AccessibleButton{position:relative;padding:16px 32px 16px 72px;width:432px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7e7e7;font-size:1.5rem;margin:20px 0}.mx_SpacePublicShare .mx_AccessibleButton>h3{font-weight:600;margin:0 0 4px}.mx_SpacePublicShare .mx_AccessibleButton>span{color:#737d8c}.mx_SpacePublicShare .mx_AccessibleButton:before{position:absolute;content:"";width:32px;height:32px;top:24px;left:20px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;background-color:#8d99a5}.mx_SpacePublicShare .mx_AccessibleButton:hover{border-color:#0dbd8b}.mx_SpacePublicShare .mx_AccessibleButton:hover:before{background-color:#0dbd8b}.mx_SpacePublicShare .mx_AccessibleButton:hover>span{color:#2e2f32}.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_shareButton:before{-webkit-mask-image:url(../../img/element-icons/link.8f4b1fc.svg);mask-image:url(../../img/element-icons/link.8f4b1fc.svg)}.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_inviteButton:before{-webkit-mask-image:url(../../img/element-icons/room/invite.946a71b.svg);mask-image:url(../../img/element-icons/room/invite.946a71b.svg)}.mx_InlineTermsAgreement_cbContainer{margin-bottom:10px;font-size:1.4rem}.mx_InlineTermsAgreement_cbContainer a{color:#0dbd8b;text-decoration:none}.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox{margin-top:10px}.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox input{vertical-align:text-bottom}.mx_InlineTermsAgreement_link{display:inline-block;-webkit-mask-image:url(../../img/external-link.a8d3e9b.svg);mask-image:url(../../img/external-link.a8d3e9b.svg);background-color:#0dbd8b;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:12px;height:12px;margin-left:3px;vertical-align:middle}.mx_AnalyticsToast .mx_AccessibleButton_kind_danger{background:none;color:#0dbd8b}.mx_AnalyticsToast .mx_AccessibleButton_kind_primary{background:#0dbd8b;color:#fff}.mx_NonUrgentEchoFailureToast .mx_NonUrgentEchoFailureToast_icon{display:inline-block;width:1.8rem;height:1.8rem;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:#fff;-webkit-mask-image:url(../../img/element-icons/cloud-off.33cd28e.svg);mask-image:url(../../img/element-icons/cloud-off.33cd28e.svg);margin-right:8px}.mx_NonUrgentEchoFailureToast span{vertical-align:middle}.mx_NonUrgentEchoFailureToast .mx_AccessibleButton{padding:0}.mx_VerificationShowSas_decimalSas{text-align:center;font-weight:700;padding-left:3px;padding-right:3px}.mx_VerificationShowSas_decimalSas span{margin-left:5px;margin-right:5px}.mx_VerificationShowSas_emojiSas{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:25px 0}.mx_VerificationShowSas_emojiSas_block{display:inline-block;margin-bottom:16px;position:relative;width:52px}.mx_AuthPage_modal .mx_VerificationShowSas_emojiSas_block,.mx_Dialog .mx_VerificationShowSas_emojiSas_block{width:60px}.mx_VerificationShowSas_emojiSas_emoji{font-size:3.2rem}.mx_VerificationShowSas_emojiSas_label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:1.2rem}.mx_VerificationShowSas_emojiSas_break{-ms-flex-preferred-size:100%;flex-basis:100%}.mx_VerificationShowSas .mx_Dialog_buttons button.mx_VerificationShowSas_matchButton{color:#0dbd8b;background-color:rgba(3,179,129,.16);border:none}.mx_VerificationShowSas .mx_Dialog_buttons button.mx_VerificationShowSas_noMatchButton{color:#ff4b55;background-color:rgba(255,75,85,.16);border:none}.mx_PlayPauseButton{position:relative;width:32px;height:32px;border-radius:32px;background-color:#fff}.mx_PlayPauseButton:before{content:"";position:absolute;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.mx_PlayPauseButton.mx_PlayPauseButton_disabled:before{opacity:.5}.mx_PlayPauseButton.mx_PlayPauseButton_play:before{width:13px;height:16px;top:8px;left:12px;-webkit-mask-image:url(../../img/element-icons/play.a72552b.svg);mask-image:url(../../img/element-icons/play.a72552b.svg)}.mx_PlayPauseButton.mx_PlayPauseButton_pause:before{width:10px;height:12px;top:10px;left:11px;-webkit-mask-image:url(../../img/element-icons/pause.c4c0886.svg);mask-image:url(../../img/element-icons/pause.c4c0886.svg)}.mx_VoiceMessagePrimaryContainer{padding:7px 12px 7px 11px;background-color:#e3e8f0;border-radius:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#737d8c;font-size:1.4rem;line-height:2.4rem}.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar{background-color:#c1c6cd}.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct{-webkit-transition:background-color .25s ease;transition:background-color .25s ease;background-color:#737d8c}.mx_VoiceMessagePrimaryContainer .mx_Clock{width:4.2rem;padding-right:6px;padding-left:8px}.mx_Waveform{position:relative;height:30px;top:1px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mx_Waveform .mx_Waveform_bar{width:0;border:1px solid transparent;border-radius:2px;min-height:0;max-height:100%;margin-left:1px;margin-right:1px}.mx_CallContainer{position:absolute;right:20px;bottom:72px;z-index:100;pointer-events:none}.mx_CallContainer .mx_CallPreview{pointer-events:auto;cursor:pointer}.mx_CallContainer .mx_CallPreview .mx_CallView_video{width:350px}.mx_CallContainer .mx_CallPreview .mx_VideoFeed_local{border-radius:8px;overflow:hidden}.mx_CallContainer .mx_AppTile_persistedWrapper div{min-width:350px}.mx_CallContainer .mx_IncomingCallBox{min-width:250px;background-color:#f4f6fa;padding:8px;-webkit-box-shadow:0 14px 24px rgba(0,0,0,.08);box-shadow:0 14px 24px rgba(0,0,0,.08);border-radius:8px;pointer-events:auto;cursor:pointer}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo{display:-webkit-box;display:-ms-flexbox;display:flex;direction:row}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo .mx_BaseAvatar_initial,.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo img{margin:8px}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1,.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo p{margin:0;padding:0;font-size:1.4rem;line-height:1.6rem}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1{font-weight:700}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons{padding:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons>.mx_IncomingCallBox_spacer{width:8px}.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons>*{-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin-right:0;font-size:1.5rem;line-height:2.4rem}.mx_CallView{border-radius:8px;background-color:#f2f5f8;padding-left:8px;padding-right:8px;pointer-events:auto}.mx_CallView_large{padding-bottom:10px;margin:5px 5px 5px 18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mx_CallView_large,.mx_CallView_large .mx_CallView_voice{-webkit-box-flex:1;-ms-flex:1;flex:1}.mx_CallView_pip{width:320px;padding-bottom:8px;margin-top:10px;background-color:#f4f6fa;-webkit-box-shadow:0 4px 20px rgba(0,0,0,.2);box-shadow:0 4px 20px rgba(0,0,0,.2);border-radius:8px}.mx_CallView_pip .mx_CallView_voice{height:180px}.mx_CallView_pip .mx_CallView_callControls{bottom:0}.mx_CallView_pip .mx_CallView_callControls_button:before{width:36px;height:36px}.mx_CallView_pip .mx_CallView_holdTransferContent{padding-top:10px;padding-bottom:25px}.mx_CallView_content{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:8px}.mx_CallView_voice{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;background-color:#27303a}.mx_CallView_voice,.mx_CallView_voice_avatarsContainer{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-direction:normal}.mx_CallView_voice_avatarsContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row}.mx_CallView_voice_avatarsContainer div{margin-left:12px;margin-right:12px}.mx_CallView_voice .mx_CallView_holdTransferContent .mx_CallView_voice_avatarContainer{border-radius:2000px;overflow:hidden;position:relative}.mx_CallView_holdTransferContent{height:20px;padding-top:20px;padding-bottom:15px;color:#fff}.mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind{padding:0;font-weight:700}.mx_CallView_video{width:100%;height:100%;z-index:30;overflow:hidden}.mx_CallView_video_hold{overflow:hidden}.mx_CallView_video_hold .mx_VideoFeed{visibility:hidden}.mx_CallView_video_holdBackground{position:absolute;width:100%;height:100%;left:0;right:0;background-repeat:no-repeat;background-size:cover;background-position:50%;-webkit-filter:blur(20px);filter:blur(20px)}.mx_CallView_video_holdBackground:after{content:"";display:block;position:absolute;width:100%;height:100%;left:0;right:0;background-color:rgba(0,0,0,.6)}.mx_CallView_video .mx_CallView_holdTransferContent{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-weight:700;color:#fff;text-align:center}.mx_CallView_video .mx_CallView_holdTransferContent:before{display:block;margin-left:auto;margin-right:auto;content:"";width:40px;height:40px;background-image:url(../../img/voip/paused.77799b3.svg);background-position:50%;background-size:cover}.mx_CallView_pip .mx_CallView_video .mx_CallView_holdTransferContent:before{width:30px;height:30px}.mx_CallView_video .mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind{padding:0}.mx_CallView_header{height:44px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;-ms-flex-negative:0;flex-shrink:0}.mx_CallView_header_callType{font-size:1.2rem;font-weight:700;vertical-align:middle}.mx_CallView_header_secondaryCallInfo:before{content:"·";margin-left:6px;margin-right:6px}.mx_CallView_header_controls{margin-left:auto}.mx_CallView_header_button{display:inline-block;vertical-align:middle;cursor:pointer}.mx_CallView_header_button:before{content:"";display:inline-block;height:20px;width:20px;vertical-align:middle;background-color:#737d8c;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.mx_CallView_header_button_fullscreen:before{-webkit-mask-image:url(../../img/element-icons/call/fullscreen.43be138.svg);mask-image:url(../../img/element-icons/call/fullscreen.43be138.svg)}.mx_CallView_header_button_expand:before{-webkit-mask-image:url(../../img/element-icons/call/expand.7ef9f56.svg);mask-image:url(../../img/element-icons/call/expand.7ef9f56.svg)}.mx_CallView_header_callInfo{margin-left:12px;margin-right:16px}.mx_CallView_header_roomName{font-weight:700;font-size:12px;line-height:normal;height:15px}.mx_CallView_secondaryCall_roomName{margin-left:4px}.mx_CallView_header_callTypeSmall{font-size:12px;color:#737d8c;line-height:normal;height:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:240px}.mx_CallView_header_phoneIcon{display:inline-block;margin-right:6px;height:16px;width:16px;vertical-align:middle}.mx_CallView_header_phoneIcon:before{content:"";display:inline-block;vertical-align:top;height:16px;width:16px;background-color:#ff4b55;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_CallView_callControls{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;bottom:5px;width:100%;opacity:1;-webkit-transition:opacity .5s;transition:opacity .5s}.mx_CallView_callControls_hidden{opacity:.001;pointer-events:none}.mx_CallView_callControls_button{cursor:pointer;margin-left:8px;margin-right:8px}.mx_CallView_callControls_button:before{content:"";display:inline-block;height:48px;width:48px;background-repeat:no-repeat;background-size:contain;background-position:50%}.mx_CallView_callControls_dialpad{margin-right:auto}.mx_CallView_callControls_dialpad:before{background-image:url(../../img/voip/dialpad.fdda9a0.svg)}.mx_CallView_callControls_button_dialpad_hidden{margin-right:auto;cursor:auto}.mx_CallView_callControls_button_micOn:before{background-image:url(../../img/voip/mic-on.2592c14.svg)}.mx_CallView_callControls_button_micOff:before{background-image:url(../../img/voip/mic-off.774e42b.svg)}.mx_CallView_callControls_button_vidOn:before{background-image:url(../../img/voip/vid-on.b9b8bbf.svg)}.mx_CallView_callControls_button_vidOff:before{background-image:url(../../img/voip/vid-off.5552596.svg)}.mx_CallView_callControls_button_hangup:before{background-image:url(../../img/voip/hangup.9c3adeb.svg)}.mx_CallView_callControls_button_more{margin-left:auto}.mx_CallView_callControls_button_more:before{background-image:url(../../img/voip/more.5e8055e.svg)}.mx_CallView_callControls_button_more_hidden{margin-left:auto;cursor:auto}.mx_CallView_callControls_button_invisible{visibility:hidden;pointer-events:none;position:absolute}.mx_CallViewForRoom{overflow:hidden}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:8px}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper:hover .mx_CallViewForRoom_ResizeHandle{width:100%!important;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper:hover .mx_CallViewForRoom_ResizeHandle:after{content:"";margin-top:3px;border-radius:4px;height:4px;width:100%;max-width:64px;background-color:#2e2f32}.mx_DialPad{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:16px;gap:16px}.mx_DialPad_button{width:40px;height:40px;background-color:#e3e8f0;border-radius:40px;font-size:18px;font-weight:600;text-align:center;vertical-align:middle;line-height:40px}.mx_DialPad_deleteButton:before,.mx_DialPad_dialButton:before{content:"";display:inline-block;height:40px;width:40px;vertical-align:middle;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:20px;mask-size:20px;-webkit-mask-position:center;mask-position:center;background-color:#fff}.mx_DialPad_deleteButton{background-color:#ff4b55}.mx_DialPad_deleteButton:before{-webkit-mask-image:url(../../img/element-icons/call/delete.833d785.svg);mask-image:url(../../img/element-icons/call/delete.833d785.svg);-webkit-mask-position:9px;mask-position:9px}.mx_DialPad_dialButton{background-color:#0dbd8b}.mx_DialPad_dialButton:before{-webkit-mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg);mask-image:url(../../img/element-icons/call/voice-call.303eba8.svg)}.mx_DialPadContextMenu_header{margin-top:12px;margin-left:12px;margin-right:12px}.mx_DialPadContextMenu_title{color:#61708b;font-size:12px;font-weight:600}.mx_DialPadContextMenu_dialled{height:1em;font-size:18px;font-weight:600}.mx_DialPadContextMenu_dialPad{margin:16px}.mx_DialPadContextMenu_horizSep{position:relative}.mx_DialPadContextMenu_horizSep:before{content:"";position:absolute;width:100%;border-bottom:1px solid #e3e8f0}.mx_Dialog_dialPadWrapper .mx_Dialog{padding:0}.mx_DialPadModal{width:192px;height:368px}.mx_DialPadModal_header{margin-top:12px;margin-left:12px;margin-right:12px}.mx_DialPadModal_title{color:#61708b;font-size:12px;font-weight:600}.mx_DialPadModal_cancel{float:right;-webkit-mask:url(../../img/feather-customised/cancel.23c2689.svg);mask:url(../../img/feather-customised/cancel.23c2689.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;width:14px;height:14px;background-color:#c1c1c1;cursor:pointer}.mx_DialPadModal_field{border:none;margin:0}.mx_DialPadModal_field input{font-size:18px;font-weight:600}.mx_DialPadModal_dialPad{margin-left:16px;margin-right:16px;margin-top:16px}.mx_DialPadModal_horizSep{position:relative}.mx_DialPadModal_horizSep:before{content:"";position:absolute;width:100%;border-bottom:1px solid #e3e8f0}.mx_VideoFeed_voice{padding-bottom:52px;background-color:#27303a}.mx_VideoFeed_remote{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mx_VideoFeed_remote.mx_VideoFeed_video{background-color:#000}.mx_VideoFeed_local{max-width:25%;max-height:25%;position:absolute;right:10px;top:10px;z-index:100;border-radius:4px}.mx_VideoFeed_local.mx_VideoFeed_video{background-color:transparent}.mx_VideoFeed_mirror{-webkit-transform:scaleX(-1);transform:scaleX(-1)}
+const lightCSS = `@charset "utf-8";
+.hljs-addition {
+ background: #dfd;
+}
+.hljs-deletion {
+ background: #fdd;
+}
+@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+ .mx_LeftPanel {
+ background-image: unset;
+ background-image: var(--avatar-url, unset);
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: 0 0;
+ }
+ .mx_GroupFilterPanel,
+ .mx_SpacePanel {
+ -webkit-backdrop-filter: blur(20px);
+ backdrop-filter: blur(20px);
+ }
+ .mx_LeftPanel .mx_LeftPanel_roomListContainer {
+ -webkit-backdrop-filter: blur(40px);
+ backdrop-filter: blur(40px);
+ }
+}
+.mx_RoomSublist_showNButton {
+ background-color: transparent !important;
+}
+a:hover,
+a:link,
+a:visited {
+ text-decoration: none;
+}
+:root {
+ font-size: 10px;
+ --transition-short: 0.1s;
+ --transition-standard: 0.3s;
+}
+@media (prefers-reduced-motion) {
+ :root {
+ --transition-short: 0;
+ --transition-standard: 0;
+ }
+}
+html {
+ height: 100%;
+ overflow: hidden;
+}
+body {
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-size: 1.5rem;
+ background-color: #fff;
+ color: #2e2f32;
+ border: 0;
+ margin: 0;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+code,
+pre {
+ font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+ font-size: 100% !important;
+}
+.error,
+.text-error,
+.text-warning,
+.warning {
+ color: #ff4b55;
+}
+.text-success {
+ color: #0dbd8b;
+}
+.text-muted {
+ color: #61708b;
+}
+b {
+ font-weight: 700;
+}
+h2 {
+ color: #2e2f32;
+ font-weight: 400;
+ font-size: 1.8rem;
+ margin-top: 16px;
+ margin-bottom: 16px;
+}
+a:hover,
+a:link,
+a:visited {
+ color: #238cf5;
+}
+input[type="password"],
+input[type="search"],
+input[type="text"] {
+ padding: 9px;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-size: 1.4rem;
+ font-weight: 600;
+ min-width: 0;
+}
+input[type="search"].mx_textinput_icon,
+input[type="text"].mx_textinput_icon {
+ padding-left: 36px;
+ background-repeat: no-repeat;
+ background-position: 10px;
+}
+input[type="search"].mx_textinput_icon.mx_textinput_search,
+input[type="text"].mx_textinput_icon.mx_textinput_search {
+ background-image: url(../../img/feather-customised/search-input.044bfa7.svg);
+}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+ display: none;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+ opacity: 1;
+}
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+ opacity: 1;
+}
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+ opacity: 1;
+}
+input::-ms-input-placeholder,
+textarea::-ms-input-placeholder {
+ opacity: 1;
+}
+input::placeholder,
+textarea::placeholder {
+ opacity: 1;
+}
+input[type="password"],
+input[type="text"],
+textarea {
+ background-color: transparent;
+ color: #2e2f32;
+}
+textarea {
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ color: #2e2f32;
+}
+input[type="password"]:focus,
+input[type="text"]:focus,
+textarea:focus {
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+:focus:not(.focus-visible) {
+ outline: none;
+}
+.mx_Dialog .mx_textinput > input[type="search"],
+.mx_Dialog .mx_textinput > input[type="text"],
+.mx_MatrixChat .mx_textinput > input[type="search"],
+.mx_MatrixChat .mx_textinput > input[type="text"] {
+ border: none;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ color: #2e2f32;
+}
+.mx_Dialog .mx_textinput,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"],
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"],
+.mx_MatrixChat .mx_textinput,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"],
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"] {
+ display: block;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ background-color: transparent;
+ color: #9fa9ba;
+ border-radius: 4px;
+ border: 1px solid rgba(46, 47, 50, 0.1);
+ margin: 9px;
+}
+.mx_Dialog .mx_textinput,
+.mx_MatrixChat .mx_textinput {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_Dialog .mx_textinput input::-webkit-input-placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]::-webkit-input-placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]::-webkit-input-placeholder,
+.mx_MatrixChat .mx_textinput input::-webkit-input-placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]::-webkit-input-placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]::-webkit-input-placeholder {
+ color: rgba(159, 169, 186, 0.75);
+}
+.mx_Dialog .mx_textinput input::-moz-placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]::-moz-placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]::-moz-placeholder,
+.mx_MatrixChat .mx_textinput input::-moz-placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]::-moz-placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]::-moz-placeholder {
+ color: rgba(159, 169, 186, 0.75);
+}
+.mx_Dialog .mx_textinput input:-ms-input-placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]:-ms-input-placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]:-ms-input-placeholder,
+.mx_MatrixChat .mx_textinput input:-ms-input-placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]:-ms-input-placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]:-ms-input-placeholder {
+ color: rgba(159, 169, 186, 0.75);
+}
+.mx_Dialog .mx_textinput input::-ms-input-placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]::-ms-input-placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]::-ms-input-placeholder,
+.mx_MatrixChat .mx_textinput input::-ms-input-placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]::-ms-input-placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]::-ms-input-placeholder {
+ color: rgba(159, 169, 186, 0.75);
+}
+.mx_Dialog .mx_textinput input::placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]::placeholder,
+.mx_Dialog
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]::placeholder,
+.mx_MatrixChat .mx_textinput input::placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"]::placeholder,
+.mx_MatrixChat
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"]::placeholder {
+ color: rgba(159, 169, 186, 0.75);
+}
+.dark-panel {
+ background-color: #f2f5f8;
+}
+.dark-panel .mx_textinput,
+.dark-panel
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"],
+.dark-panel
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"] {
+ color: #9fa9ba;
+ background-color: #fff;
+ border: none;
+}
+.light-panel .mx_textinput,
+.light-panel
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="search"],
+.light-panel
+ :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
+ > input[type="text"] {
+ color: #9fa9ba;
+ background-color: #f2f5f8;
+ border: none;
+}
+::-moz-focus-inner {
+ border: 0;
+}
+#mx_theme_accentColor {
+ color: #0dbd8b;
+}
+#mx_theme_secondaryAccentColor {
+ color: #f2f5f8;
+}
+#mx_theme_tertiaryAccentColor {
+ color: #d3efe1;
+}
+.mx_Dialog_wrapper {
+ position: fixed;
+ z-index: 4000;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_Dialog {
+ background-color: #fff;
+ color: #747474;
+ z-index: 4012;
+ font-weight: 300;
+ font-size: 1.5rem;
+ position: relative;
+ padding: 24px;
+ max-height: 80%;
+ -webkit-box-shadow: 2px 15px 30px 0 rgba(0, 0, 0, 0.48);
+ box-shadow: 2px 15px 30px 0 rgba(0, 0, 0, 0.48);
+ border-radius: 8px;
+ overflow-y: auto;
+}
+.mx_Dialog_fixedWidth {
+ width: 60vw;
+ max-width: 704px;
+}
+.mx_Dialog_staticWrapper .mx_Dialog {
+ z-index: 4010;
+}
+.mx_Dialog_background {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(46, 48, 51, 0.38);
+ opacity: 0.8;
+ z-index: 4011;
+}
+.mx_Dialog_background.mx_Dialog_staticBackground {
+ z-index: 4009;
+}
+.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background {
+ opacity: 0.4;
+}
+.mx_Dialog_lightbox .mx_Dialog_background {
+ opacity: 0.95;
+ background-color: #000;
+}
+.mx_Dialog_lightbox .mx_Dialog {
+ border-radius: 0;
+ background-color: transparent;
+ width: 100%;
+ height: 100%;
+ max-width: 100%;
+ max-height: 100%;
+ pointer-events: none;
+ padding: 0;
+}
+.mx_Dialog_header {
+ position: relative;
+ margin-bottom: 10px;
+}
+.mx_Dialog_titleImage {
+ vertical-align: sub;
+ width: 25px;
+ height: 25px;
+ margin-left: -2px;
+ margin-right: 4px;
+}
+.mx_Dialog_title {
+ font-size: 2.2rem;
+ font-weight: 600;
+ line-height: 3.6rem;
+ color: #45474a;
+}
+.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
+ text-align: center;
+}
+.mx_Dialog_header.mx_Dialog_headerWithCancel > .mx_Dialog_title {
+ margin-right: 20px;
+}
+.mx_Dialog_title.danger {
+ color: #ff4b55;
+}
+.mx_Dialog_cancelButton {
+ -webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
+ mask: url(../../img/feather-customised/cancel.23c2689.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: cover;
+ mask-size: cover;
+ width: 14px;
+ height: 14px;
+ background-color: #c1c1c1;
+ cursor: pointer;
+ position: absolute;
+ top: 10px;
+ right: 0;
+}
+.mx_Dialog_content {
+ margin: 24px 0 68px;
+ font-size: 1.4rem;
+ color: #2e2f32;
+ word-wrap: break-word;
+}
+.mx_Dialog_buttons {
+ margin-top: 20px;
+ text-align: right;
+}
+.mx_Dialog_buttons .mx_Dialog_buttons_additive {
+ float: left;
+}
+.mx_Dialog_buttons button,
+.mx_Dialog_buttons input[type="submit"],
+.mx_Dialog button,
+.mx_Dialog input[type="submit"] {
+ vertical-align: middle;
+ border-radius: 8px;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-size: 1.4rem;
+ color: #fff;
+ background-color: #0dbd8b;
+ width: auto;
+ padding: 7px 1.5em;
+ cursor: pointer;
+ display: inline-block;
+ outline: none;
+ margin-left: 0;
+ margin-right: 8px;
+ font-weight: 600;
+ border: 1px solid #0dbd8b;
+ color: #0dbd8b;
+ background-color: #fff;
+ font-family: inherit;
+}
+.mx_Dialog button:last-child {
+ margin-right: 0;
+}
+.mx_Dialog_buttons button:focus,
+.mx_Dialog_buttons input[type="submit"]:focus,
+.mx_Dialog button:focus,
+.mx_Dialog input[type="submit"]:focus {
+ -webkit-filter: brightness(105%);
+ filter: brightness(105%);
+}
+.mx_Dialog_buttons button.mx_Dialog_primary,
+.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary,
+.mx_Dialog button.mx_Dialog_primary,
+.mx_Dialog input[type="submit"].mx_Dialog_primary {
+ color: #fff;
+ background-color: #0dbd8b;
+ min-width: 156px;
+}
+.mx_Dialog_buttons button.danger,
+.mx_Dialog_buttons input[type="submit"].danger,
+.mx_Dialog button.danger,
+.mx_Dialog input[type="submit"].danger {
+ background-color: #ff4b55;
+ border: 1px solid #ff4b55;
+ color: #fff;
+}
+.mx_Dialog button.warning,
+.mx_Dialog input[type="submit"].warning {
+ border: 1px solid #ff4b55;
+ color: #ff4b55;
+}
+.mx_Dialog_buttons button:disabled,
+.mx_Dialog_buttons input[type="submit"]:disabled,
+.mx_Dialog button:disabled,
+.mx_Dialog input[type="submit"]:disabled {
+ background-color: #747474;
+ border: 1px solid #747474;
+ opacity: 0.7;
+}
+.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
+ width: auto;
+ border-radius: 8px;
+ padding: 0;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
+.mx_GeneralButton {
+ vertical-align: middle;
+ border: 0;
+ border-radius: 8px;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-size: 1.4rem;
+ color: #fff;
+ background-color: #0dbd8b;
+ width: auto;
+ padding: 7px 1.5em;
+ cursor: pointer;
+ display: inline-block;
+ outline: none;
+ display: inline;
+ margin: auto;
+}
+.mx_linkButton {
+ cursor: pointer;
+ color: #0dbd8b;
+}
+.mx_TextInputDialog_label {
+ text-align: left;
+ padding-bottom: 12px;
+}
+.mx_TextInputDialog_input {
+ font-size: 1.5rem;
+ border-radius: 3px;
+ border: 1px solid #e7e7e7;
+ padding: 9px;
+ color: #2e2f32;
+ background-color: #fff;
+}
+.mx_textButton {
+ vertical-align: middle;
+ border: 0;
+ border-radius: 8px;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-size: 1.4rem;
+ color: #fff;
+ background-color: #0dbd8b;
+ width: auto;
+ cursor: pointer;
+ display: inline-block;
+ outline: none;
+ font-size: 1.5rem;
+ padding: 0 1.5em;
+}
+.mx_button_row {
+ margin-top: 69px;
+}
+.mx_Username_color1 {
+ color: #368bd6;
+}
+.mx_Username_color2 {
+ color: #ac3ba8;
+}
+.mx_Username_color3 {
+ color: #0dbd8b;
+}
+.mx_Username_color4 {
+ color: #e64f7a;
+}
+.mx_Username_color5 {
+ color: #ff812d;
+}
+.mx_Username_color6 {
+ color: #2dc2c5;
+}
+.mx_Username_color7 {
+ color: #5c56f5;
+}
+.mx_Username_color8 {
+ color: #74d12c;
+}
+.mx_Tooltip_dark .mx_Tooltip_chevron:after {
+ border-right-color: #27303a;
+}
+html {
+ scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+* {
+ scrollbar-width: thin;
+}
+::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+ background-color: transparent;
+}
+::-webkit-scrollbar-thumb {
+ border-radius: 3px;
+ background-color: rgba(0, 0, 0, 0.2);
+}
+.mx_AutoHideScrollbar:hover {
+ scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+.mx_AutoHideScrollbar:hover::-webkit-scrollbar {
+ background-color: transparent;
+}
+.mx_AutoHideScrollbar:hover::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0.2);
+}
+.mx_AutoHideScrollbar {
+ overflow-x: hidden;
+ overflow-y: auto;
+ overflow-y: overlay;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+.mx_AutoHideScrollbar::-webkit-scrollbar,
+.mx_AutoHideScrollbar::-webkit-scrollbar-thumb {
+ background-color: transparent;
+}
+.mx_AutoHideScrollbar {
+ scrollbar-color: transparent transparent;
+}
+.mx_CompatibilityPage {
+ width: 100%;
+ height: 100%;
+ background-color: #e55;
+}
+.mx_CompatibilityPage_box {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ width: 500px;
+ height: 300px;
+ border: 1px solid;
+ padding: 10px;
+ background-color: #fcc;
+}
+.mx_ContextualMenu_wrapper {
+ position: fixed;
+ z-index: 5000;
+}
+.mx_ContextualMenu_background {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 1;
+ z-index: 5000;
+}
+.mx_ContextualMenu {
+ border-radius: 8px;
+ -webkit-box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
+ box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
+ background-color: #fff;
+ color: #2e2f32;
+ position: absolute;
+ font-size: 1.4rem;
+ z-index: 5001;
+}
+.mx_ContextualMenu_right {
+ right: 0;
+}
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_right {
+ right: 8px;
+}
+.mx_ContextualMenu_chevron_right {
+ position: absolute;
+ right: -8px;
+ top: 0;
+ width: 0;
+ height: 0;
+ border-top: 8px solid transparent;
+ border-left: 8px solid #fff;
+ border-bottom: 8px solid transparent;
+}
+.mx_ContextualMenu_left {
+ left: 0;
+}
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_left {
+ left: 8px;
+}
+.mx_ContextualMenu_chevron_left {
+ position: absolute;
+ left: -8px;
+ top: 0;
+ width: 0;
+ height: 0;
+ border-top: 8px solid transparent;
+ border-right: 8px solid #fff;
+ border-bottom: 8px solid transparent;
+}
+.mx_ContextualMenu_top {
+ top: 0;
+}
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_top {
+ top: 8px;
+}
+.mx_ContextualMenu_chevron_top {
+ position: absolute;
+ left: 0;
+ top: -8px;
+ width: 0;
+ height: 0;
+ border-left: 8px solid transparent;
+ border-bottom: 8px solid #fff;
+ border-right: 8px solid transparent;
+}
+.mx_ContextualMenu_bottom {
+ bottom: 0;
+}
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
+ bottom: 8px;
+}
+.mx_ContextualMenu_chevron_bottom {
+ position: absolute;
+ left: 0;
+ bottom: -8px;
+ width: 0;
+ height: 0;
+ border-left: 8px solid transparent;
+ border-top: 8px solid #fff;
+ border-right: 8px solid transparent;
+}
+.mx_ContextualMenu_spinner {
+ display: block;
+ margin: 0 auto;
+}
+.mx_CreateRoom {
+ width: 960px;
+ margin-left: auto;
+ margin-right: auto;
+ color: #2e2f32;
+}
+.mx_CreateRoom input,
+.mx_CreateRoom textarea {
+ border-radius: 3px;
+ border: 1px solid #c7c7c7;
+ font-weight: 300;
+ font-size: 1.3rem;
+ padding: 9px;
+ margin-top: 6px;
+}
+.mx_CreateRoom_description {
+ width: 330px;
+}
+.mx_CustomRoomTagPanel {
+ background-color: hsla(0, 0%, 91%, 0.77);
+ max-height: 40vh;
+}
+.mx_CustomRoomTagPanel_scroller {
+ max-height: inherit;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_CustomRoomTagPanel .mx_AccessibleButton {
+ margin: 0 auto;
+ width: 40px;
+ padding: 10px 0 9px;
+ position: relative;
+}
+.mx_CustomRoomTagPanel .mx_BaseAvatar_image {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 40px;
+ height: 40px;
+}
+.mx_CustomRoomTagPanel
+ .mx_AccessibleButton.CustomRoomTagPanel_tileSelected:before {
+ content: "";
+ height: 56px;
+ background-color: #238cf5;
+ width: 5px;
+ position: absolute;
+ left: -9px;
+ border-radius: 0 3px 3px 0;
+ top: 5px;
+}
+.mx_FilePanel {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+ overflow-y: auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_FilePanel .mx_RoomView_messageListWrapper {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_FilePanel .mx_RoomView_MessageList {
+ width: 100%;
+}
+.mx_FilePanel .mx_EventTile_avatar,
+.mx_FilePanel .mx_RoomView_MessageList h2 {
+ display: none;
+}
+.mx_FilePanel .mx_EventTile {
+ word-break: break-word;
+ margin-top: 32px;
+}
+.mx_FilePanel .mx_EventTile .mx_MImageBody {
+ margin-right: 0;
+}
+.mx_FilePanel .mx_EventTile .mx_MFileBody {
+ line-height: 2.4rem;
+}
+.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
+ padding-top: 8px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ font-size: 1.4rem;
+ color: #acacac;
+}
+.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ color: #747474;
+}
+.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 0px;
+ flex: 1 0 0;
+ font-size: 1.4rem;
+ text-align: right;
+ white-space: nowrap;
+}
+.mx_FilePanel .mx_EventTile_senderDetails {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-top: -2px;
+}
+.mx_FilePanel .mx_EventTile_senderDetailsLink {
+ text-decoration: none;
+}
+.mx_FilePanel .mx_EventTile .mx_SenderProfile {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ line-height: normal;
+ padding: 0;
+ font-size: 1.4rem;
+ opacity: 1;
+ color: #acacac;
+}
+.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 0px;
+ flex: 1 0 0;
+ text-align: right;
+ visibility: visible;
+ position: static;
+ font-size: 1.4rem;
+ opacity: 1;
+ color: #acacac;
+}
+.mx_FilePanel .mx_EventTile_line {
+ margin-right: 0;
+ padding-left: 0;
+}
+.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
+ padding-left: 0;
+}
+.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
+ background-color: #fff;
+}
+.mx_FilePanel_empty:before {
+ -webkit-mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
+ mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
+}
+.mx_GenericErrorPage {
+ width: 100%;
+ height: 100%;
+ background-color: #fff;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_GenericErrorPage_box {
+ display: inline;
+ width: 500px;
+ min-height: 125px;
+ border: 1px solid #f22;
+ padding: 10px 10px 20px;
+ background-color: #fcc;
+}
+.mx_GroupFilterPanel {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ background-color: hsla(0, 0%, 91%, 0.77);
+ cursor: pointer;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ min-height: 0;
+}
+.mx_GroupFilterPanel_items_selected {
+ cursor: pointer;
+}
+.mx_GroupFilterPanel .mx_GroupFilterPanel_divider {
+ height: 0;
+ width: 90%;
+ border: none;
+ border-bottom: 1px solid #8d99a5;
+}
+.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ width: 100%;
+}
+.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding-top: 6px;
+}
+.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer > div {
+ margin: 6px 0;
+}
+.mx_GroupFilterPanel .mx_TagTile {
+ position: relative;
+}
+.mx_GroupFilterPanel .mx_TagTile .mx_BetaDot {
+ position: absolute;
+ right: -13px;
+ top: -11px;
+}
+.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype {
+ padding: 3px;
+}
+.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
+ background-color: #fff;
+ border-radius: 6px;
+}
+.mx_TagTile_selected_prototype .mx_TagTile_homeIcon:before {
+ background-color: #2e2f32;
+}
+.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon {
+ background-color: rgba(92, 100, 112, 0.2);
+ border-radius: 48px;
+}
+.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon:before {
+ background-color: #5c6470;
+}
+.mx_TagTile_homeIcon {
+ width: 32px;
+ height: 32px;
+ position: relative;
+}
+.mx_TagTile_homeIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/home.b706c0e.svg);
+ mask-image: url(../../img/element-icons/home.b706c0e.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 21px;
+ mask-size: 21px;
+ content: "";
+ display: inline-block;
+ width: 32px;
+ height: 32px;
+ position: absolute;
+ top: calc(50% - 16px);
+ left: calc(50% - 16px);
+}
+.mx_GroupFilterPanel .mx_TagTile_plus {
+ margin-bottom: 12px;
+ height: 32px;
+ width: 32px;
+ border-radius: 20px;
+ background-color: rgba(92, 100, 112, 0.2);
+ position: relative;
+ display: block !important;
+}
+.mx_GroupFilterPanel .mx_TagTile_plus:before {
+ background-color: #5c6470;
+ -webkit-mask-image: url(../../img/feather-customised/plus.38ae979.svg);
+ mask-image: url(../../img/feather-customised/plus.38ae979.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected:before {
+ content: "";
+ height: 100%;
+ background-color: #0dbd8b;
+ width: 4px;
+ position: absolute;
+ left: -12px;
+ border-radius: 0 3px 3px 0;
+}
+.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus {
+ -webkit-filter: none;
+ filter: none;
+}
+.mx_TagTile_tooltip {
+ position: relative;
+ top: -30px;
+ left: 5px;
+}
+.mx_TagTile_context_button {
+ min-width: 15px;
+ height: 15px;
+ position: absolute;
+ right: -5px;
+ top: -8px;
+ border-radius: 8px;
+ background-color: #dbdbdb;
+ color: #000;
+ font-weight: 600;
+ font-size: 1rem;
+ text-align: center;
+ padding-top: 1px;
+ padding-left: 4px;
+ padding-right: 4px;
+}
+.mx_TagTile_avatar {
+ position: relative;
+}
+.mx_TagTile_badge {
+ position: absolute;
+ right: -4px;
+ top: -2px;
+ border-radius: 8px;
+ color: #fff;
+ font-weight: 600;
+ font-size: 1.4rem;
+ padding: 0 5px;
+ background-color: #61708b;
+}
+.mx_TagTile_badgeHighlight {
+ background-color: #ff4b55;
+}
+.mx_GroupView {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ overflow: hidden;
+}
+.mx_GroupView_error {
+ margin: auto;
+}
+.mx_GroupView_header {
+ min-height: 52px;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ padding-bottom: 10px;
+ padding-left: 19px;
+}
+.mx_GroupView_header_view {
+ border-bottom: 1px solid transparent;
+ padding-bottom: 0;
+ padding-right: 8px;
+}
+.mx_GroupView_header_avatar,
+.mx_GroupView_header_info {
+ display: table-cell;
+ vertical-align: middle;
+}
+.mx_GroupHeader_button {
+ position: relative;
+ margin-left: 5px;
+ margin-right: 5px;
+ cursor: pointer;
+ height: 20px;
+ width: 20px;
+}
+.mx_GroupHeader_button:before {
+ content: "";
+ position: absolute;
+ height: 20px;
+ width: 20px;
+ background-color: #91a1c0;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_GroupHeader_editButton:before {
+ -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
+ mask-image: url(../../img/element-icons/settings.6b381af.svg);
+}
+.mx_GroupHeader_shareButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
+ mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
+}
+.mx_GroupView_hostingSignup img {
+ margin-left: 5px;
+}
+.mx_GroupView_editable {
+ border-bottom: 1px solid #c7c7c7 !important;
+ min-width: 150px;
+ cursor: text;
+}
+.mx_GroupView_editable:focus {
+ border-bottom: 1px solid #0dbd8b !important;
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.mx_GroupView_header_isUserMember
+ .mx_GroupView_header_name:hover
+ div:not(.mx_GroupView_editable) {
+ color: #0dbd8b;
+ cursor: pointer;
+}
+.mx_GroupView_avatarPicker {
+ position: relative;
+}
+.mx_GroupView_avatarPicker_edit {
+ position: absolute;
+ top: 50px;
+ left: 15px;
+}
+.mx_GroupView_avatarPicker .mx_Spinner {
+ width: 48px;
+ height: 48px !important;
+}
+.mx_GroupView_header_leftCol {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ overflow: hidden;
+}
+.mx_GroupView_header_rightCol {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_GroupView_textButton {
+ display: inline-block;
+}
+.mx_GroupView_header_groupid {
+ font-weight: 400;
+ font-size: medium;
+ padding-left: 10px;
+}
+.mx_GroupView_header_name {
+ vertical-align: middle;
+ width: 100%;
+ height: 31px;
+ color: #2e2f32;
+ font-weight: 700;
+ font-size: 2.2rem;
+ padding-right: 16px;
+}
+.mx_GroupView_header_name,
+.mx_GroupView_header_shortDesc {
+ overflow: hidden;
+ padding-left: 19px;
+ text-overflow: ellipsis;
+ border-bottom: 1px solid transparent;
+}
+.mx_GroupView_header_shortDesc {
+ vertical-align: bottom;
+ float: left;
+ max-height: 42px;
+ color: #a2a2a2;
+ font-weight: 300;
+ font-size: 1.3rem;
+ margin-right: 16px;
+}
+.mx_GroupView_avatarPicker_label {
+ cursor: pointer;
+}
+.mx_GroupView_cancelButton {
+ padding-left: 8px;
+}
+.mx_GroupView_cancelButton img {
+ position: relative;
+ top: 5px;
+}
+.mx_GroupView input[type="radio"] {
+ margin: 10px 10px 0;
+}
+.mx_GroupView_label_text {
+ display: inline-block;
+ max-width: 80%;
+ vertical-align: 0.1em;
+ line-height: 2em;
+}
+.mx_GroupView_body {
+ margin: 0 24px;
+}
+.mx_GroupView_body,
+.mx_GroupView_rooms {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+.mx_GroupView_rooms {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ min-height: 200px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.mx_GroupView h3 {
+ text-transform: uppercase;
+ color: #3d3b39;
+ font-weight: 600;
+ font-size: 1.3rem;
+ margin-bottom: 10px;
+}
+.mx_GroupView_rooms_header .mx_AccessibleButton {
+ padding-left: 14px;
+ margin-bottom: 14px;
+ height: 24px;
+}
+.mx_GroupView_group {
+ border-top: 1px solid transparent;
+}
+.mx_GroupView_group_disabled {
+ opacity: 0.3;
+ pointer-events: none;
+}
+.mx_GroupView_rooms_header_addRow_button {
+ display: inline-block;
+}
+.mx_GroupView_rooms_header_addRow_button object {
+ pointer-events: none;
+}
+.mx_GroupView_rooms_header_addRow_label {
+ display: inline-block;
+ vertical-align: top;
+ line-height: 2.4rem;
+ padding-left: 28px;
+ color: #0dbd8b;
+}
+.mx_GroupView_rooms .mx_RoomDetailList {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ border-top: 1px solid transparent;
+ padding-top: 10px;
+ word-break: break-word;
+}
+.mx_GroupView .mx_RoomView_messageListWrapper {
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+}
+.mx_GroupView_membershipSection {
+ color: #888;
+ margin-top: 10px;
+}
+.mx_GroupView_membershipSubSection {
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ padding-bottom: 8px;
+}
+.mx_GroupView_membershipSubSection .mx_Spinner {
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+.mx_GroupView_membershipSection_description {
+ line-height: 3.4rem;
+}
+.mx_GroupView_membershipSection_description .mx_BaseAvatar {
+ margin-right: 10px;
+}
+.mx_GroupView_membershipSection .mx_GroupView_textButton {
+ margin-right: 0;
+ margin-top: 0;
+ margin-left: 8px;
+}
+.mx_GroupView_memberSettings_toggle label {
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.mx_GroupView_memberSettings input {
+ margin-right: 6px;
+}
+.mx_GroupView_featuredThings {
+ margin-top: 20px;
+}
+.mx_GroupView_featuredThings_header {
+ font-weight: 700;
+ font-size: 120%;
+ margin-bottom: 20px;
+}
+.mx_GroupView_featuredThings_category {
+ font-weight: 700;
+ font-size: 110%;
+ margin-top: 10px;
+}
+.mx_GroupView_featuredThings_container {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_GroupView_featuredThing,
+.mx_GroupView_featuredThings_addButton {
+ display: table-cell;
+ text-align: center;
+ width: 100px;
+ margin: 0 20px;
+}
+.mx_GroupView_featuredThing {
+ position: relative;
+}
+.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton {
+ position: absolute;
+ top: -7px;
+ right: 11px;
+ opacity: 0.4;
+}
+.mx_GroupView_featuredThing .mx_BaseAvatar {
+ vertical-align: baseline;
+ vertical-align: initial;
+}
+.mx_GroupView_featuredThings_addButton object {
+ pointer-events: none;
+}
+.mx_GroupView_featuredThing_name {
+ word-wrap: break-word;
+}
+.mx_GroupView_uploadInput {
+ display: none;
+}
+.mx_GroupView_body .mx_AutoHideScrollbar > * {
+ margin: 11px 50px 50px 68px;
+}
+.mx_GroupView_groupDesc textarea {
+ width: 100%;
+ max-width: 100%;
+ height: 150px;
+}
+.mx_GroupView_changeDelayWarning,
+.mx_GroupView_groupDesc_placeholder {
+ background-color: #f7f7f7;
+ color: #888;
+ border-radius: 10px;
+ text-align: center;
+ margin: 20px 0;
+}
+.mx_GroupView_groupDesc_placeholder {
+ padding: 100px 20px;
+ cursor: pointer;
+}
+.mx_GroupView_changeDelayWarning {
+ padding: 40px 20px;
+}
+.mx_GroupView
+ .mx_MemberInfo
+ .mx_AutoHideScrollbar
+ > :not(.mx_MemberInfo_avatar) {
+ padding-left: 16px;
+ padding-right: 16px;
+}
+.mx_HeaderButtons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_RoomHeader_buttons + .mx_HeaderButtons:before {
+ content: unset;
+}
+.mx_HeaderButtons:before {
+ content: "";
+ background-color: #91a1c0;
+ opacity: 0.5;
+ margin: 6px 8px;
+ border-radius: 1px;
+ width: 1px;
+}
+.mx_HomePage {
+ max-width: 960px;
+ width: 100%;
+ height: 100%;
+ margin-left: auto;
+ margin-right: auto;
+}
+.mx_HomePage_default {
+ text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_HomePage_default .mx_HomePage_default_wrapper {
+ margin: auto;
+}
+.mx_HomePage_default img {
+ height: 48px;
+}
+.mx_HomePage_default h1 {
+ font-weight: 600;
+ font-size: 3.2rem;
+ line-height: 4.4rem;
+ margin-bottom: 4px;
+}
+.mx_HomePage_default h4 {
+ margin-top: 4px;
+ font-weight: 600;
+ font-size: 1.8rem;
+ line-height: 2.5rem;
+ color: #61708b;
+}
+.mx_HomePage_default .mx_MiniAvatarUploader {
+ margin: 0 auto;
+}
+.mx_HomePage_default .mx_HomePage_default_buttons {
+ margin: 60px auto 0;
+ width: -webkit-fit-content;
+ width: -moz-fit-content;
+ width: fit-content;
+}
+.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton {
+ padding: 73px 8px 15px;
+ width: 160px;
+ height: 132px;
+ margin: 20px;
+ position: relative;
+ display: inline-block;
+ border-radius: 8px;
+ vertical-align: top;
+ word-break: break-word;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 2rem;
+ color: #fff;
+ background-color: #0dbd8b;
+}
+.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:before {
+ top: 20px;
+ left: 60px;
+ width: 40px;
+ height: 40px;
+ content: "";
+ position: absolute;
+ background-color: #fff;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_HomePage_default
+ .mx_HomePage_default_buttons
+ .mx_AccessibleButton.mx_HomePage_button_sendDm:before {
+ -webkit-mask-image: url(../../img/element-icons/feedback.a91241e.svg);
+ mask-image: url(../../img/element-icons/feedback.a91241e.svg);
+}
+.mx_HomePage_default
+ .mx_HomePage_default_buttons
+ .mx_AccessibleButton.mx_HomePage_button_explore:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
+ mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
+}
+.mx_HomePage_default
+ .mx_HomePage_default_buttons
+ .mx_AccessibleButton.mx_HomePage_button_createGroup:before {
+ -webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
+ mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
+}
+.mx_LeftPanel {
+ background-color: hsla(0, 0%, 96.1%, 0.9);
+ min-width: 206px;
+ max-width: 50%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer {
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ -ms-flex-preferred-size: 56px;
+ flex-basis: 56px;
+ height: 100%;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer,
+.mx_LeftPanel .mx_LeftPanel_roomListContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+}
+.mx_LeftPanel .mx_LeftPanel_roomListContainer {
+ background-color: hsla(0, 0%, 96.1%, 0.9);
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 0px;
+ flex: 1 0 0;
+ min-width: 0;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader {
+ padding: 12px;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_breadcrumbsContainer {
+ overflow-y: hidden;
+ overflow-x: scroll;
+ margin: 12px 12px 0;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_leftOverflow {
+ -webkit-mask-image: -webkit-gradient(
+ linear,
+ left top,
+ right top,
+ from(transparent),
+ color-stop(5%, #000)
+ );
+ -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%);
+ mask-image: -webkit-gradient(
+ linear,
+ left top,
+ right top,
+ from(transparent),
+ color-stop(5%, #000)
+ );
+ mask-image: linear-gradient(90deg, transparent, #000 5%);
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow {
+ -webkit-mask-image: -webkit-gradient(
+ linear,
+ left top,
+ right top,
+ from(#000),
+ color-stop(95%, #000),
+ to(transparent)
+ );
+ -webkit-mask-image: linear-gradient(90deg, #000, #000 95%, transparent);
+ mask-image: -webkit-gradient(
+ linear,
+ left top,
+ right top,
+ from(#000),
+ color-stop(95%, #000),
+ to(transparent)
+ );
+ mask-image: linear-gradient(90deg, #000, #000 95%, transparent);
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
+ -webkit-mask-image: -webkit-gradient(
+ linear,
+ left top,
+ right top,
+ from(transparent),
+ color-stop(5%, #000),
+ color-stop(95%, #000),
+ to(transparent)
+ );
+ -webkit-mask-image: linear-gradient(
+ 90deg,
+ transparent,
+ #000 5%,
+ #000 95%,
+ transparent
+ );
+ mask-image: -webkit-gradient(
+ linear,
+ left top,
+ right top,
+ from(transparent),
+ color-stop(5%, #000),
+ color-stop(95%, #000),
+ to(transparent)
+ );
+ mask-image: linear-gradient(
+ 90deg,
+ transparent,
+ #000 5%,
+ #000 95%,
+ transparent
+ );
+}
+.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer {
+ margin-left: 12px;
+ margin-right: 12px;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_RoomSearch_focused
+ + .mx_LeftPanel_exploreButton,
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_RoomSearch_hasQuery
+ + .mx_LeftPanel_exploreButton {
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ margin: 0;
+ width: 0;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_RoomSearch_focused
+ + .mx_LeftPanel_exploreButton:before,
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_RoomSearch_hasQuery
+ + .mx_LeftPanel_exploreButton:before {
+ content: none;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_LeftPanel_exploreButton {
+ width: 32px;
+ height: 32px;
+ border-radius: 8px;
+ background-color: rgba(141, 151, 165, 0.2);
+ position: relative;
+ margin-left: 8px;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_LeftPanel_exploreButton:before {
+ content: "";
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ width: 16px;
+ height: 16px;
+ -webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
+ mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #737d8c;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_LeftPanel_exploreButton.mx_LeftPanel_exploreButton_space:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
+ mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_roomListFilterCount {
+ font-size: 1.3rem;
+ font-weight: 600;
+ margin-left: 12px;
+ margin-top: 14px;
+ margin-bottom: -4px;
+}
+.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper {
+ overflow: hidden;
+ margin-top: 10px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 0px;
+ flex: 1 0 0;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyBottom {
+ padding-bottom: 32px;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyTop {
+ padding-top: 32px;
+}
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_actualRoomListContainer {
+ position: relative;
+ height: 100%;
+}
+.mx_LeftPanel.mx_LeftPanel_minimized {
+ min-width: unset;
+ width: unset !important;
+}
+.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer {
+ width: 68px;
+}
+.mx_LeftPanel.mx_LeftPanel_minimized
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_userHeader {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_LeftPanel.mx_LeftPanel_minimized
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_LeftPanel.mx_LeftPanel_minimized
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_LeftPanel_exploreButton {
+ margin-left: 0;
+ margin-top: 8px;
+ background-color: transparent;
+}
+.mx_LeftPanelWidget {
+ margin-left: 8px;
+ margin-bottom: 4px;
+}
+.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ height: 24px;
+ color: #8d99a5;
+ margin-top: 4px;
+}
+.mx_LeftPanelWidget
+ .mx_LeftPanelWidget_headerContainer
+ .mx_LeftPanelWidget_stickable {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_LeftPanelWidget
+ .mx_LeftPanelWidget_headerContainer
+ .mx_LeftPanelWidget_headerText {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ max-width: calc(100% - 16px);
+ line-height: 1.6rem;
+ font-size: 1.3rem;
+ font-weight: 600;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.mx_LeftPanelWidget
+ .mx_LeftPanelWidget_headerContainer
+ .mx_LeftPanelWidget_headerText
+ .mx_LeftPanelWidget_collapseBtn {
+ display: inline-block;
+ position: relative;
+ width: 14px;
+ height: 14px;
+ margin-right: 6px;
+}
+.mx_LeftPanelWidget
+ .mx_LeftPanelWidget_headerContainer
+ .mx_LeftPanelWidget_headerText
+ .mx_LeftPanelWidget_collapseBtn:before {
+ content: "";
+ width: 18px;
+ height: 18px;
+ position: absolute;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #8d99a5;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+.mx_LeftPanelWidget
+ .mx_LeftPanelWidget_headerContainer
+ .mx_LeftPanelWidget_headerText
+ .mx_LeftPanelWidget_collapseBtn.mx_LeftPanelWidget_collapseBtn_collapsed:before {
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+}
+.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox {
+ position: relative;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ overflow: visible;
+}
+.mx_LeftPanelWidget .mx_AppTileFullWidth,
+.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+}
+.mx_LeftPanelWidget .mx_AppTileFullWidth {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 0px;
+ flex: 1 0 0;
+ overflow: hidden;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ -webkit-mask-image: linear-gradient(0deg, transparent, #000 4px);
+ mask-image: linear-gradient(0deg, transparent, #000 4px);
+}
+.mx_LeftPanelWidget .mx_LeftPanelWidget_resizerHandle {
+ cursor: ns-resize;
+ border-radius: 3px;
+ width: unset !important;
+ height: 4px !important;
+ position: absolute;
+ top: -24px !important;
+ left: calc(50% - 32px) !important;
+ right: calc(50% - 32px) !important;
+}
+.mx_LeftPanelWidget:hover .mx_LeftPanelWidget_resizerHandle {
+ opacity: 0.8;
+ background-color: #2e2f32;
+}
+.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton {
+ margin-left: 8px;
+ margin-right: 7px;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ border-radius: 32px;
+}
+.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton:before {
+ content: "";
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ top: 4px;
+ left: 4px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
+ mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
+ background: #61708b;
+}
+.mx_LeftPanelWidget_maximizeButtonTooltip {
+ margin-top: -3px;
+}
+.mx_MainSplit {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ min-width: 0;
+ min-height: 0;
+ height: 100%;
+}
+.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
+ padding: 5px;
+ margin-left: 8px;
+ height: calc(100vh - 51px);
+}
+.mx_MainSplit > .mx_RightPanel_ResizeWrapper:hover .mx_RightPanel_ResizeHandle {
+ top: 50% !important;
+ -webkit-transform: translateY(-50%);
+ transform: translateY(-50%);
+ height: 64px !important;
+ width: 4px !important;
+ border-radius: 4px !important;
+ background-color: #2e2f32;
+ opacity: 0.8;
+}
+.mx_MatrixChat_splash {
+ position: relative;
+ height: 100%;
+}
+.mx_MatrixChat_splashButtons {
+ text-align: center;
+ width: 100%;
+ position: absolute;
+ bottom: 30px;
+}
+.mx_MatrixChat_wrapper {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+}
+.mx_MatrixToolbar {
+ -webkit-box-ordinal-group: 2;
+ -ms-flex-order: 1;
+ order: 1;
+ height: 40px;
+}
+.mx_MatrixChat {
+ width: 100%;
+ height: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ min-height: 0;
+}
+.mx_MatrixChat_syncError {
+ color: #fff;
+ background-color: #df2a8b;
+ border-radius: 5px;
+ display: table;
+ padding: 30px;
+ position: absolute;
+ top: 100px;
+ left: 50%;
+ -webkit-transform: translateX(-50%);
+ transform: translateX(-50%);
+}
+.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
+ background-color: #fff;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+ min-width: 0;
+ height: 100%;
+}
+.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
+ position: relative;
+}
+.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover:before {
+ position: absolute;
+ left: 6px;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ transform: translateY(-50%);
+ height: 64px;
+ width: 4px;
+ border-radius: 4px;
+ content: " ";
+ background-color: #2e2f32;
+ opacity: 0.8;
+}
+.mx_MyGroups {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_MyGroups .mx_BetaCard {
+ margin: 0 72px;
+ max-width: 760px;
+}
+.mx_MyGroups .mx_RoomHeader_simpleHeader {
+ margin-left: 0;
+}
+.mx_MyGroups_header {
+ margin-left: 2px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+}
+.mx_MyGroups > :not(.mx_RoomHeader):not(.mx_BetaCard) {
+ max-width: 960px;
+ margin: 40px;
+}
+.mx_MyGroups_headerCard {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 50%;
+ flex: 1 0 50%;
+ margin-bottom: 30px;
+ min-width: 400px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ margin-right: 13px;
+ height: 40px;
+ width: 40px;
+ border-radius: 20px;
+ background-color: rgba(92, 100, 112, 0.2);
+ position: relative;
+}
+.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button:before {
+ background-color: #5c6470;
+ -webkit-mask: url(../../img/icons-create-room.817ede2.svg);
+ mask: url(../../img/icons-create-room.817ede2.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 80%;
+ mask-size: 80%;
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+.mx_MyGroups_headerCard_header {
+ font-weight: 700;
+ margin-bottom: 10px;
+}
+.mx_MyGroups_headerCard_content {
+ padding-right: 15px;
+}
+.mx_MyGroups_joinBox {
+ visibility: hidden;
+ height: 0;
+ margin: 0;
+}
+.mx_MyGroups_content {
+ margin-left: 2px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 0px;
+ flex: 1 0 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ overflow-y: auto;
+}
+.mx_MyGroups_scrollable {
+ overflow-y: inherit;
+}
+.mx_MyGroups_placeholder {
+ background-color: #f7f7f7;
+ color: #888;
+ line-height: 40rem;
+ border-radius: 10px;
+ text-align: center;
+}
+.mx_MyGroups_joinedGroups {
+ border-top: 1px solid transparent;
+ overflow-x: hidden;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -ms-flex-line-pack: start;
+ align-content: flex-start;
+}
+.mx_MyGroups_joinedGroups .mx_GroupTile {
+ min-width: 300px;
+ max-width: 33%;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 300px;
+ flex: 1 0 300px;
+ height: 75px;
+ margin: 10px 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ cursor: pointer;
+}
+.mx_GroupTile_avatar {
+ cursor: -webkit-grab, -webkit-grab;
+ cursor: grab, -webkit-grab;
+}
+.mx_GroupTile_profile {
+ margin-left: 10px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_GroupTile_profile .mx_GroupTile_desc,
+.mx_GroupTile_profile .mx_GroupTile_groupId,
+.mx_GroupTile_profile .mx_GroupTile_name {
+ padding-right: 10px;
+}
+.mx_GroupTile_profile .mx_GroupTile_name {
+ margin: 0;
+ font-size: 1.5rem;
+}
+.mx_GroupTile_profile .mx_GroupTile_groupId {
+ font-size: 1.3rem;
+ opacity: 0.7;
+}
+.mx_GroupTile_profile .mx_GroupTile_desc {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ font-size: 1.3rem;
+ max-height: 36px;
+ overflow: hidden;
+}
+.mx_NonUrgentToastContainer {
+ position: absolute;
+ bottom: 30px;
+ left: 28px;
+ z-index: 101;
+}
+.mx_NonUrgentToastContainer .mx_NonUrgentToastContainer_toast {
+ padding: 10px 12px;
+ border-radius: 8px;
+ width: 320px;
+ font-size: 1.3rem;
+ margin-top: 8px;
+ background-color: #17191c;
+ color: #fff;
+}
+.mx_NotificationPanel {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+ overflow-y: auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_NotificationPanel .mx_RoomView_messageListWrapper {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_NotificationPanel .mx_RoomView_MessageList {
+ width: 100%;
+}
+.mx_NotificationPanel .mx_RoomView_MessageList h2 {
+ margin-left: 0;
+}
+.mx_NotificationPanel .mx_EventTile {
+ word-break: break-word;
+ position: relative;
+ padding-bottom: 18px;
+}
+.mx_NotificationPanel
+ .mx_EventTile:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection):after {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: #8d99a5;
+ height: 1px;
+ opacity: 0.4;
+ content: "";
+}
+.mx_NotificationPanel .mx_EventTile_roomName {
+ font-weight: 700;
+ font-size: 1.4rem;
+}
+.mx_NotificationPanel .mx_EventTile_roomName > * {
+ vertical-align: middle;
+}
+.mx_NotificationPanel .mx_EventTile_roomName > .mx_BaseAvatar {
+ margin-right: 8px;
+}
+.mx_NotificationPanel .mx_EventTile_roomName a {
+ color: #2e2f32;
+}
+.mx_NotificationPanel .mx_EventTile_avatar {
+ display: none;
+}
+.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp,
+.mx_NotificationPanel .mx_EventTile .mx_SenderProfile {
+ color: #2e2f32;
+ font-size: 1.2rem;
+ display: inline;
+ padding-left: 0;
+}
+.mx_NotificationPanel .mx_EventTile_senderDetails {
+ padding-left: 36px;
+ position: relative;
+}
+.mx_NotificationPanel .mx_EventTile_senderDetails a {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_NotificationPanel .mx_EventTile_roomName a,
+.mx_NotificationPanel .mx_EventTile_senderDetails a {
+ text-decoration: none !important;
+}
+.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
+ visibility: visible;
+ position: static;
+ display: inline;
+}
+.mx_NotificationPanel .mx_EventTile_line {
+ margin-right: 0;
+ padding: 0 0 0 36px;
+}
+.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
+ padding-left: 0;
+}
+.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
+ background-color: #fff;
+}
+.mx_NotificationPanel .mx_EventTile_content {
+ margin-right: 0;
+}
+.mx_NotificationPanel_empty:before {
+ -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+ mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+}
+.mx_RightPanel {
+ overflow-x: hidden;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ border-radius: 8px;
+ padding: 4px 0;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ height: 100%;
+}
+.mx_RightPanel .mx_RoomView_MessageList {
+ padding: 14px 18px;
+}
+.mx_RightPanel_header {
+ -webkit-box-ordinal-group: 2;
+ -ms-flex-order: 1;
+ order: 1;
+ border-bottom: 1px solid transparent;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 52px;
+ flex: 0 0 52px;
+}
+.mx_RightPanel_headerButtonGroup {
+ height: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ background-color: #fff;
+ padding: 0 9px;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_RightPanel_headerButton {
+ cursor: pointer;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ margin-left: 1px;
+ margin-right: 1px;
+ height: 32px;
+ width: 32px;
+ position: relative;
+ border-radius: 100%;
+}
+.mx_RightPanel_headerButton:before {
+ content: "";
+ position: absolute;
+ top: 4px;
+ left: 4px;
+ height: 24px;
+ width: 24px;
+ background-color: #c1c6cd;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_RightPanel_headerButton:hover {
+ background: rgba(13, 189, 139, 0.1);
+}
+.mx_RightPanel_headerButton:hover:before {
+ background-color: #0dbd8b;
+}
+.mx_RightPanel_notifsButton:before {
+ -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+ mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_RightPanel_roomSummaryButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_RightPanel_groupMembersButton:before {
+ -webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
+ mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_RightPanel_roomsButton:before {
+ -webkit-mask-image: url(../../img/element-icons/community-rooms.8f0b6c9.svg);
+ mask-image: url(../../img/element-icons/community-rooms.8f0b6c9.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_RightPanel_headerButton_highlight:before {
+ background-color: #0dbd8b !important;
+}
+.mx_RightPanel_headerButton_badge {
+ font-size: 0.8rem;
+ border-radius: 8px;
+ color: #fff;
+ background-color: #0dbd8b;
+ font-weight: 700;
+ position: absolute;
+ top: -4px;
+ left: 20px;
+ padding: 2px 4px;
+}
+.mx_RightPanel_collapsebutton {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ text-align: right;
+ height: 16px;
+ border: none;
+}
+.mx_RightPanel .mx_GroupRoomList,
+.mx_RightPanel .mx_MemberInfo,
+.mx_RightPanel .mx_MemberList,
+.mx_RightPanel_blank {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+}
+.mx_RightPanel .mx_RoomView_messagePanelSpinner {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ margin: auto;
+}
+.mx_RightPanel_empty {
+ margin-right: -28px;
+}
+.mx_RightPanel_empty h2 {
+ font-weight: 700;
+ margin: 16px 0;
+}
+.mx_RightPanel_empty h2,
+.mx_RightPanel_empty p {
+ font-size: 1.4rem;
+}
+.mx_RightPanel_empty:before {
+ content: "";
+ display: block;
+ margin: 11px auto 29px;
+ height: 42px;
+ width: 42px;
+ background-color: #91a1c0;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_RightPanel_scopeHeader {
+ margin: 24px;
+ text-align: center;
+ font-weight: 600;
+ font-size: 1.8rem;
+ line-height: 2.2rem;
+}
+.mx_RightPanel_scopeHeader .mx_BaseAvatar {
+ margin-right: 8px;
+ vertical-align: middle;
+}
+.mx_RightPanel_scopeHeader .mx_BaseAvatar_image {
+ border-radius: 8px;
+}
+.mx_RoomDirectory_dialogWrapper > .mx_Dialog {
+ max-width: 960px;
+ height: 100%;
+}
+.mx_RoomDirectory_dialog {
+ height: 100%;
+ flex-direction: column;
+}
+.mx_RoomDirectory,
+.mx_RoomDirectory_dialog {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+}
+.mx_RoomDirectory {
+ margin-bottom: 12px;
+ color: #2e2f32;
+ word-break: break-word;
+}
+.mx_RoomDirectory,
+.mx_RoomDirectory_list {
+ flex-direction: column;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_RoomDirectory_list {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+}
+.mx_RoomDirectory_list .mx_RoomView_messageListWrapper {
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+}
+.mx_RoomDirectory_listheader {
+ display: block;
+ margin-top: 13px;
+}
+.mx_RoomDirectory_searchbox {
+ -webkit-box-flex: 1 !important;
+ -ms-flex: 1 !important;
+ flex: 1 !important;
+}
+.mx_RoomDirectory_listheader .mx_NetworkDropdown {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 200px;
+ flex: 0 0 200px;
+}
+.mx_RoomDirectory_tableWrapper {
+ overflow-y: auto;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+}
+.mx_RoomDirectory_table {
+ color: #2e2f32;
+ display: grid;
+ font-size: 1.2rem;
+ grid-template-columns: -webkit-max-content auto -webkit-max-content -webkit-max-content -webkit-max-content;
+ grid-template-columns: max-content auto max-content max-content max-content;
+ grid-row-gap: 24px;
+ row-gap: 24px;
+ text-align: left;
+ width: 100%;
+}
+.mx_RoomDirectory_roomAvatar {
+ padding: 2px 14px 0 0;
+}
+.mx_RoomDirectory_roomMemberCount {
+ -ms-flex-item-align: center;
+ align-self: center;
+ color: #747474;
+ padding: 3px 10px 0;
+}
+.mx_RoomDirectory_roomMemberCount:before {
+ background-color: #747474;
+ display: inline-block;
+ vertical-align: text-top;
+ margin-right: 2px;
+ content: "";
+ -webkit-mask: url(../../img/feather-customised/user.7a4d23d.svg);
+ mask: url(../../img/feather-customised/user.7a4d23d.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 80%;
+ mask-size: 80%;
+ width: 16px;
+ height: 16px;
+}
+.mx_RoomDirectory_join,
+.mx_RoomDirectory_preview {
+ -ms-flex-item-align: center;
+ align-self: center;
+ white-space: nowrap;
+}
+.mx_RoomDirectory_name {
+ display: inline-block;
+ font-size: 1.8rem;
+ font-weight: 600;
+}
+.mx_RoomDirectory_perms {
+ display: inline-block;
+}
+.mx_RoomDirectory_perm {
+ border-radius: 10px;
+ display: inline-block;
+ height: 20px;
+ line-height: 2rem;
+ padding: 0 5px;
+ color: #fff;
+ background-color: #aaa;
+}
+.mx_RoomDirectory_topic {
+ cursor: auto;
+ color: #747474;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ overflow: hidden;
+}
+.mx_RoomDirectory_alias {
+ font-size: 1.2rem;
+ color: #a2a2a2;
+}
+.mx_RoomDirectory_table tr {
+ padding-bottom: 10px;
+ cursor: pointer;
+}
+.mx_RoomDirectory .mx_RoomView_MessageList {
+ padding: 0;
+}
+.mx_RoomDirectory > span {
+ font-size: 1.5rem;
+ margin-top: 0;
+}
+.mx_RoomDirectory > span .mx_AccessibleButton {
+ padding: 0;
+}
+.mx_RoomSearch {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ border-radius: 8px;
+ background-color: rgba(141, 151, 165, 0.2);
+ border: 1px solid transparent;
+ height: 28px;
+ padding: 1px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_RoomSearch .mx_RoomSearch_icon {
+ width: 16px;
+ height: 16px;
+ -webkit-mask: url(../../img/element-icons/roomlist/search.3774248.svg);
+ mask: url(../../img/element-icons/roomlist/search.3774248.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #737d8c;
+ margin-left: 7px;
+}
+.mx_RoomSearch .mx_RoomSearch_input {
+ border: none !important;
+ -webkit-box-flex: 1 !important;
+ -ms-flex: 1 !important;
+ flex: 1 !important;
+ color: #2e2f32 !important;
+ padding: 0;
+ height: 100%;
+ width: 100%;
+ font-size: 1.2rem;
+ line-height: 1.6rem;
+}
+.mx_RoomSearch
+ .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-webkit-input-placeholder {
+ color: #8d99a5 !important;
+}
+.mx_RoomSearch
+ .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-moz-placeholder {
+ color: #8d99a5 !important;
+}
+.mx_RoomSearch
+ .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded):-ms-input-placeholder {
+ color: #8d99a5 !important;
+}
+.mx_RoomSearch
+ .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-ms-input-placeholder {
+ color: #8d99a5 !important;
+}
+.mx_RoomSearch
+ .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::placeholder {
+ color: #8d99a5 !important;
+}
+.mx_RoomSearch.mx_RoomSearch_hasQuery {
+ border-color: #737d8c;
+}
+.mx_RoomSearch.mx_RoomSearch_focused {
+ -webkit-box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
+ box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
+ border-color: transparent;
+}
+.mx_RoomSearch.mx_RoomSearch_focused,
+.mx_RoomSearch.mx_RoomSearch_hasQuery {
+ background-color: #fff;
+}
+.mx_RoomSearch.mx_RoomSearch_focused .mx_RoomSearch_clearButton,
+.mx_RoomSearch.mx_RoomSearch_hasQuery .mx_RoomSearch_clearButton {
+ width: 16px;
+ height: 16px;
+ -webkit-mask-image: url(../../img/element-icons/roomlist/search-clear.6164d97.svg);
+ mask-image: url(../../img/element-icons/roomlist/search-clear.6164d97.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #737d8c;
+ margin-right: 8px;
+}
+.mx_RoomSearch .mx_RoomSearch_clearButton {
+ width: 0;
+ height: 0;
+}
+.mx_RoomSearch.mx_RoomSearch_minimized {
+ border-radius: 32px;
+ height: auto;
+ width: auto;
+ padding: 8px;
+}
+.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_icon {
+ margin-left: 0;
+}
+.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
+ margin-left: 65px;
+ min-height: 50px;
+}
+.mx_RoomStatusBar_typingIndicatorAvatars {
+ width: 52px;
+ margin-top: -1px;
+ text-align: left;
+}
+.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
+ margin-right: -12px;
+ border: 1px solid #fff;
+}
+.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
+ padding-left: 1px;
+ padding-top: 1px;
+}
+.mx_RoomStatusBar_typingIndicatorRemaining {
+ display: inline-block;
+ color: #acacac;
+ background-color: #ddd;
+ border: 1px solid #fff;
+ border-radius: 40px;
+ width: 24px;
+ height: 24px;
+ line-height: 2.4rem;
+ font-size: 0.8em;
+ vertical-align: top;
+ text-align: center;
+ position: absolute;
+}
+.mx_RoomStatusBar_scrollDownIndicator {
+ cursor: pointer;
+ padding-left: 1px;
+}
+.mx_RoomStatusBar_unreadMessagesBar {
+ padding-top: 10px;
+ color: #ff4b55;
+ cursor: pointer;
+}
+.mx_RoomStatusBar_connectionLostBar {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-top: 19px;
+ min-height: 58px;
+}
+.mx_RoomStatusBar_unsentMessages > div[role="alert"] {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ min-height: 70px;
+ margin: 12px;
+ padding-left: 16px;
+ background-color: #f3f8fd;
+ border-radius: 4px;
+}
+.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge {
+ margin-right: 12px;
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentBadge
+ .mx_NotificationBadge {
+ width: 24px !important;
+ height: 24px !important;
+ border-radius: 24px !important;
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentBadge
+ .mx_NotificationBadge
+ .mx_NotificationBadge_count {
+ font-size: 1.6rem !important;
+}
+.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentTitle {
+ color: #ff4b55;
+ font-size: 1.5rem;
+}
+.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentDescription {
+ font-size: 1.2rem;
+}
+.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ text-align: right;
+ margin-right: 22px;
+ color: #61708b;
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentButtonBar
+ .mx_AccessibleButton {
+ padding: 5px 10px 5px 28px;
+ display: inline-block;
+ position: relative;
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentButtonBar
+ .mx_AccessibleButton:nth-child(2) {
+ border-left: 1px solid #e3e8f0;
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentButtonBar
+ .mx_AccessibleButton:before {
+ content: "";
+ position: absolute;
+ left: 10px;
+ background-color: #61708b;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentButtonBar
+ .mx_AccessibleButton.mx_RoomStatusBar_unsentCancelAllBtn:before {
+ -webkit-mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
+ mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
+ width: 12px;
+ height: 16px;
+ top: calc(50% - 8px);
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentButtonBar
+ .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn {
+ padding-left: 34px;
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentButtonBar
+ .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn:before {
+ -webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
+ mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
+ width: 18px;
+ height: 18px;
+ top: calc(50% - 9px);
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentButtonBar
+ .mx_InlineSpinner {
+ vertical-align: middle;
+ margin-right: 5px;
+ top: 1px;
+}
+.mx_RoomStatusBar_unsentMessages
+ .mx_RoomStatusBar_unsentButtonBar
+ .mx_InlineSpinner
+ + span {
+ margin-right: 10px;
+}
+.mx_RoomStatusBar_connectionLostBar img {
+ padding-left: 10px;
+ padding-right: 10px;
+ vertical-align: middle;
+ float: left;
+}
+.mx_RoomStatusBar_connectionLostBar_title {
+ color: #ff4b55;
+}
+.mx_RoomStatusBar_connectionLostBar_desc {
+ color: #2e2f32;
+ font-size: 1.3rem;
+ opacity: 0.5;
+ padding-bottom: 20px;
+}
+.mx_RoomStatusBar_resend_link {
+ color: #2e2f32 !important;
+ text-decoration: underline !important;
+ cursor: pointer;
+}
+.mx_RoomStatusBar_typingBar {
+ height: 50px;
+ line-height: 5rem;
+ color: #2e2f32;
+ opacity: 0.5;
+ overflow-y: hidden;
+ display: block;
+}
+.mx_MatrixChat_useCompactLayout
+ .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
+ min-height: 40px;
+}
+.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_indicator {
+ margin-top: 10px;
+}
+.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_typingBar {
+ height: 40px;
+ line-height: 4rem;
+}
+.mx_RoomView {
+ word-wrap: break-word;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+@-webkit-keyframes mx_RoomView_fileDropTarget_animation {
+ 0% {
+ opacity: 0;
+ }
+ to {
+ opacity: 0.95;
+ }
+}
+@keyframes mx_RoomView_fileDropTarget_animation {
+ 0% {
+ opacity: 0;
+ }
+ to {
+ opacity: 0.95;
+ }
+}
+.mx_RoomView_fileDropTarget {
+ min-width: 0;
+ width: 100%;
+ height: 100%;
+ font-size: 1.8rem;
+ text-align: center;
+ pointer-events: none;
+ background-color: #fff;
+ opacity: 0.95;
+ position: absolute;
+ z-index: 3000;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-animation: mx_RoomView_fileDropTarget_animation;
+ animation: mx_RoomView_fileDropTarget_animation;
+ -webkit-animation-duration: 0.5s;
+ animation-duration: 0.5s;
+}
+@-webkit-keyframes mx_RoomView_fileDropTarget_image_animation {
+ 0% {
+ width: 0;
+ }
+ to {
+ width: 32px;
+ }
+}
+@keyframes mx_RoomView_fileDropTarget_image_animation {
+ 0% {
+ width: 0;
+ }
+ to {
+ width: 32px;
+ }
+}
+.mx_RoomView_fileDropTarget_image {
+ -webkit-animation: mx_RoomView_fileDropTarget_image_animation;
+ animation: mx_RoomView_fileDropTarget_image_animation;
+ -webkit-animation-duration: 0.5s;
+ animation-duration: 0.5s;
+ margin-bottom: 16px;
+}
+.mx_RoomView_auxPanel {
+ min-width: 0;
+ width: 100%;
+ margin: 0 auto;
+ overflow: auto;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.mx_RoomView_auxPanel_fullHeight {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 3000;
+ background-color: #fff;
+}
+.mx_RoomView_auxPanel_hiddenHighlights {
+ border-bottom: 1px solid transparent;
+ padding: 10px 26px;
+ color: #ff4b55;
+ cursor: pointer;
+}
+.mx_RoomView_auxPanel_apps {
+ max-width: 1920px !important;
+}
+.mx_RoomView .mx_MainSplit,
+.mx_RoomView_messagePanel {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+}
+.mx_RoomView_messagePanel {
+ width: 100%;
+ overflow-y: auto;
+ overflow-anchor: none;
+}
+.mx_RoomView_messagePanelSearchSpinner {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ background-image: url(../../img/typing-indicator-2x.0eb9f0e.gif);
+ background-position: center 367px;
+ background-size: 25px;
+ background-repeat: no-repeat;
+ position: relative;
+}
+.mx_RoomView_messagePanelSearchSpinner:before {
+ background-color: #888;
+ -webkit-mask: url(../../img/feather-customised/search-input.044bfa7.svg);
+ mask: url(../../img/feather-customised/search-input.044bfa7.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 50px;
+ mask-size: 50px;
+ content: "";
+ position: absolute;
+ top: 286px;
+ left: 0;
+ right: 0;
+ height: 50px;
+}
+.mx_RoomView_body {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ min-width: 0;
+}
+.mx_RoomView_body .mx_RoomView_messagePanel,
+.mx_RoomView_body .mx_RoomView_messagePanelSearchSpinner,
+.mx_RoomView_body .mx_RoomView_messagePanelSpinner {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+}
+.mx_RoomView_body .mx_RoomView_timeline {
+ position: relative;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_RoomView_statusArea {
+ width: 100%;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ max-height: 0;
+ background-color: #fff;
+ z-index: 1000;
+ overflow: hidden;
+ -webkit-transition: all 0.2s ease-out;
+ transition: all 0.2s ease-out;
+}
+.mx_RoomView_statusArea_expanded {
+ max-height: 100px;
+}
+.mx_RoomView_statusAreaBox {
+ margin: auto;
+ min-height: 50px;
+}
+.mx_RoomView_statusAreaBox_line {
+ margin-left: 65px;
+ border-top: 1px solid transparent;
+ height: 1px;
+}
+.mx_RoomView_messageListWrapper {
+ min-height: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+}
+.mx_RoomView_searchResultsPanel a {
+ text-decoration: none;
+ color: inherit;
+}
+.mx_RoomView_empty {
+ font-size: 1.3rem;
+ padding: 0 24px;
+ margin-right: 30px;
+ text-align: center;
+ margin-bottom: 80px;
+}
+.mx_RoomView_MessageList {
+ list-style-type: none;
+ padding: 18px;
+ margin: 0;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_RoomView_MessageList li {
+ clear: both;
+}
+li.mx_RoomView_myReadMarker_container {
+ height: 0;
+ margin: 0;
+ padding: 0;
+ border: 0;
+}
+hr.mx_RoomView_myReadMarker {
+ border-top: 1px solid #0dbd8b;
+ border-bottom: 1px solid #0dbd8b;
+ margin-top: 0;
+ position: relative;
+ top: -1px;
+ z-index: 1;
+ -webkit-transition: width easeinsine 0.4s 1s, opacity easeinsine 0.4s 1s;
+ transition: width easeinsine 0.4s 1s, opacity easeinsine 0.4s 1s;
+ width: 99%;
+ opacity: 1;
+}
+.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
+ background-color: #fff;
+}
+.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
+ color: #fff;
+ opacity: 1;
+}
+.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line {
+ margin-top: 2px;
+ border: none;
+ height: 0;
+}
+.mx_RoomView_inCall .mx_MessageComposer_wrapper {
+ border-top: 2px hidden;
+ padding-top: 1px;
+}
+.mx_RoomView_voipChevron {
+ position: absolute;
+ bottom: -11px;
+ right: 11px;
+}
+.mx_RoomView_voipButton {
+ float: right;
+ margin-right: 13px;
+ margin-top: 13px;
+ cursor: pointer;
+}
+.mx_RoomView_voipButton object {
+ pointer-events: none;
+}
+.mx_RoomView .mx_MessageComposer {
+ width: 100%;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ margin-right: 2px;
+}
+.mx_RoomView_ongoingConfCallNotification {
+ width: 100%;
+ text-align: center;
+ background-color: #ff4b55;
+ color: #fff;
+ font-weight: 700;
+ padding: 6px 0;
+ cursor: pointer;
+}
+.mx_RoomView_ongoingConfCallNotification a {
+ color: #fff !important;
+}
+.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList {
+ margin-bottom: 4px;
+}
+.mx_MatrixChat_useCompactLayout .mx_RoomView_statusAreaBox {
+ min-height: 42px;
+}
+.mx_ScrollPanel .mx_RoomView_MessageList {
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+.mx_SearchBox {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+ min-width: 0;
+}
+.mx_SearchBox.mx_SearchBox_blurred:not(:hover) {
+ background-color: transparent;
+}
+.mx_SearchBox .mx_SearchBox_closeButton {
+ cursor: pointer;
+ background-image: url(../../img/icons-close.11ff07c.svg);
+ background-repeat: no-repeat;
+ width: 16px;
+ height: 16px;
+ background-position: 50%;
+ padding: 9px;
+}
+.mx_SpacePanel {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ background-color: hsla(0, 0%, 91%, 0.77);
+ padding: 0;
+ margin: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ overflow-y: auto;
+}
+.mx_SpacePanel .mx_SpacePanel_spaceTreeWrapper {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding: 8px 8px 16px 0;
+}
+.mx_SpacePanel .mx_SpacePanel_toggleCollapse {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: 40px;
+ height: 40px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 32px;
+ mask-size: 32px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ margin-left: 16px;
+ margin-bottom: 12px;
+ background-color: #8d99a5;
+ -webkit-mask-image: url(../../img/element-icons/expand-space-panel.e6f74b9.svg);
+ mask-image: url(../../img/element-icons/expand-space-panel.e6f74b9.svg);
+}
+.mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded {
+ -webkit-transform: scaleX(-1);
+ transform: scaleX(-1);
+}
+.mx_SpacePanel ul {
+ margin: 0;
+ list-style: none;
+ padding: 0;
+}
+.mx_SpacePanel ul > .mx_SpaceItem {
+ padding-left: 16px;
+}
+.mx_SpacePanel .mx_SpaceButton_toggleCollapse {
+ cursor: pointer;
+}
+.mx_SpacePanel .mx_SpaceTreeLevel {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ max-width: 250px;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+.mx_SpacePanel .mx_SpaceItem {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -ms-flex-flow: wrap;
+ flex-flow: wrap;
+}
+.mx_SpacePanel .mx_SpaceItem.mx_SpaceItem_narrow {
+ -ms-flex-item-align: baseline;
+ align-self: baseline;
+}
+.mx_SpacePanel
+ .mx_SpaceItem.collapsed
+ > .mx_SpaceButton
+ > .mx_SpaceButton_toggleCollapse {
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+}
+.mx_SpacePanel .mx_SpaceItem.collapsed > .mx_SpaceTreeLevel {
+ display: none;
+}
+.mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
+ margin-left: 16px;
+ min-width: 40px;
+}
+.mx_SpacePanel .mx_SpaceButton {
+ border-radius: 8px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 4px 4px 4px 0;
+ width: 100%;
+}
+.mx_SpacePanel
+ .mx_SpaceButton.mx_SpaceButton_active:not(.mx_SpaceButton_narrow)
+ .mx_SpaceButton_selectionWrapper {
+ background-color: #fff;
+}
+.mx_SpacePanel
+ .mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow
+ .mx_SpaceButton_selectionWrapper {
+ padding: 1px;
+ border: 3px solid #737d8c;
+}
+.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper {
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border-radius: 12px;
+ padding: 4px;
+}
+.mx_SpacePanel
+ .mx_SpaceButton:not(.mx_SpaceButton_narrow)
+ .mx_SpaceButton_selectionWrapper {
+ width: 100%;
+ padding-right: 16px;
+ overflow: hidden;
+}
+.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ margin-left: 8px;
+ white-space: nowrap;
+ display: block;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ padding-right: 8px;
+ font-size: 1.4rem;
+ line-height: 1.8rem;
+}
+.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse {
+ width: 16px;
+ height: 20px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #8d99a5;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon {
+ width: 32px;
+ min-width: 32px;
+ height: 32px;
+ border-radius: 8px;
+ position: relative;
+}
+.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon:before {
+ position: absolute;
+ content: "";
+ width: 32px;
+ height: 32px;
+ top: 0;
+ left: 0;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 18px;
+ mask-size: 18px;
+}
+.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon {
+ background-color: #fff;
+}
+.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon:before {
+ background-color: #3f3d3d;
+ -webkit-mask-image: url(../../img/element-icons/home.b706c0e.svg);
+ mask-image: url(../../img/element-icons/home.b706c0e.svg);
+}
+.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon {
+ background-color: #0dbd8b;
+ -webkit-transition: all 0.1s ease-in-out;
+ transition: all 0.1s ease-in-out;
+}
+.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon:before {
+ background-color: #fff;
+ -webkit-mask-image: url(../../img/element-icons/plus.62cc275.svg);
+ mask-image: url(../../img/element-icons/plus.62cc275.svg);
+ -webkit-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+}
+.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon {
+ background-color: #c1c6cd;
+}
+.mx_SpacePanel
+ .mx_SpaceButton.mx_SpaceButton_newCancel
+ .mx_SpaceButton_icon:before {
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+.mx_SpacePanel .mx_SpaceButton .mx_BaseAvatar_image {
+ border-radius: 8px;
+}
+.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton {
+ width: 20px;
+ min-width: 20px;
+ height: 20px;
+ margin-top: auto;
+ margin-bottom: auto;
+ display: none;
+ position: absolute;
+ right: 4px;
+}
+.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton:before {
+ top: 2px;
+ left: 2px;
+ content: "";
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
+ mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
+ background: #2e2f32;
+}
+.mx_SpacePanel .mx_SpacePanel_badgeContainer {
+ position: absolute;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge {
+ margin: 0 2px;
+}
+.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot {
+ margin: 0 7px;
+}
+.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer {
+ right: 0;
+ top: 0;
+}
+.mx_SpacePanel.collapsed
+ .mx_SpaceButton
+ .mx_SpacePanel_badgeContainer
+ .mx_NotificationBadge {
+ background-clip: padding-box;
+}
+.mx_SpacePanel.collapsed
+ .mx_SpaceButton
+ .mx_SpacePanel_badgeContainer
+ .mx_NotificationBadge_dot {
+ margin: 0 -1px 0 0;
+ border: 3px solid hsla(0, 0%, 91%, 0.77);
+}
+.mx_SpacePanel.collapsed
+ .mx_SpaceButton
+ .mx_SpacePanel_badgeContainer
+ .mx_NotificationBadge_2char,
+.mx_SpacePanel.collapsed
+ .mx_SpaceButton
+ .mx_SpacePanel_badgeContainer
+ .mx_NotificationBadge_3char {
+ margin: -5px -5px 0 0;
+ border: 2px solid hsla(0, 0%, 91%, 0.77);
+}
+.mx_SpacePanel.collapsed
+ .mx_SpaceButton.mx_SpaceButton_active
+ .mx_SpacePanel_badgeContainer {
+ right: -3px;
+ top: -3px;
+}
+.mx_SpacePanel:not(.collapsed) .mx_SpacePanel_badgeContainer {
+ position: absolute;
+ right: 4px;
+}
+.mx_SpacePanel:not(.collapsed)
+ .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
+ .mx_SpacePanel_badgeContainer,
+.mx_SpacePanel:not(.collapsed)
+ .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
+ .mx_SpacePanel_badgeContainer,
+.mx_SpacePanel:not(.collapsed)
+ .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
+ .mx_SpacePanel_badgeContainer {
+ width: 0;
+ height: 0;
+ display: none;
+}
+.mx_SpacePanel:not(.collapsed)
+ .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
+ .mx_SpaceButton_menuButton,
+.mx_SpacePanel:not(.collapsed)
+ .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
+ .mx_SpaceButton_menuButton,
+.mx_SpacePanel:not(.collapsed)
+ .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
+ .mx_SpaceButton_menuButton {
+ display: block;
+}
+.mx_SpacePanel > .mx_AutoHideScrollbar > .mx_SpaceButton,
+.mx_SpacePanel
+ > .mx_AutoHideScrollbar
+ > .mx_SpaceButton.mx_SpaceButton_active:before {
+ height: 32px;
+}
+.mx_SpacePanel > .mx_AutoHideScrollbar > ul {
+ padding-left: 0;
+}
+.mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_header {
+ margin: 12px 16px;
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 1.8rem;
+}
+.mx_SpacePanel_contextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton {
+ color: #0dbd8b;
+}
+.mx_SpacePanel_contextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton
+ .mx_SpacePanel_iconInvite:before {
+ background-color: #0dbd8b;
+ -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+}
+.mx_SpacePanel_contextMenu .mx_SpacePanel_iconSettings:before {
+ -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
+ mask-image: url(../../img/element-icons/settings.6b381af.svg);
+}
+.mx_SpacePanel_contextMenu .mx_SpacePanel_iconLeave:before {
+ -webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
+ mask-image: url(../../img/element-icons/leave.bb917e7.svg);
+}
+.mx_SpacePanel_contextMenu .mx_SpacePanel_iconMembers:before {
+ -webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
+ mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
+}
+.mx_SpacePanel_contextMenu .mx_SpacePanel_iconPlus:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
+ mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
+}
+.mx_SpacePanel_contextMenu .mx_SpacePanel_iconHash:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
+ mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
+}
+.mx_SpacePanel_contextMenu .mx_SpacePanel_iconExplore:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
+ mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
+}
+.mx_SpacePanel_sharePublicSpace {
+ margin: 0;
+}
+.mx_SpaceRoomDirectory_dialogWrapper > .mx_Dialog {
+ max-width: 960px;
+ height: 100%;
+}
+.mx_SpaceRoomDirectory {
+ height: 100%;
+ margin-bottom: 12px;
+ color: #2e2f32;
+ word-break: break-word;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_SpaceRoomDirectory,
+.mx_SpaceRoomDirectory .mx_Dialog_title,
+.mx_SpaceRoomView_landing .mx_Dialog_title {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar,
+.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar {
+ margin-right: 12px;
+ -ms-flex-item-align: center;
+ align-self: center;
+}
+.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar_image,
+.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar_image {
+ border-radius: 8px;
+}
+.mx_SpaceRoomDirectory .mx_Dialog_title > div > h1,
+.mx_SpaceRoomView_landing .mx_Dialog_title > div > h1 {
+ font-weight: 600;
+ font-size: 1.8rem;
+ line-height: 2.2rem;
+ margin: 0;
+}
+.mx_SpaceRoomDirectory .mx_Dialog_title > div > div,
+.mx_SpaceRoomView_landing .mx_Dialog_title > div > div {
+ font-weight: 400;
+ color: #737d8c;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+}
+.mx_SpaceRoomDirectory .mx_AccessibleButton_kind_link,
+.mx_SpaceRoomView_landing .mx_AccessibleButton_kind_link {
+ padding: 0;
+}
+.mx_SpaceRoomDirectory .mx_SearchBox,
+.mx_SpaceRoomView_landing .mx_SearchBox {
+ margin: 24px 0 16px;
+}
+.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults,
+.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults {
+ text-align: center;
+}
+.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults > div,
+.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults > div {
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #737d8c;
+}
+.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader,
+.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ min-height: 32px;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #2e2f32;
+}
+.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton,
+.mx_SpaceRoomView_landing
+ .mx_SpaceRoomDirectory_listHeader
+ .mx_AccessibleButton {
+ padding: 4px 12px;
+ font-weight: 400;
+}
+.mx_SpaceRoomDirectory
+ .mx_SpaceRoomDirectory_listHeader
+ .mx_AccessibleButton
+ + .mx_AccessibleButton,
+.mx_SpaceRoomView_landing
+ .mx_SpaceRoomDirectory_listHeader
+ .mx_AccessibleButton
+ + .mx_AccessibleButton {
+ margin-left: 16px;
+}
+.mx_SpaceRoomDirectory
+ .mx_SpaceRoomDirectory_listHeader
+ .mx_AccessibleButton_kind_danger_outline,
+.mx_SpaceRoomDirectory
+ .mx_SpaceRoomDirectory_listHeader
+ .mx_AccessibleButton_kind_primary_outline,
+.mx_SpaceRoomView_landing
+ .mx_SpaceRoomDirectory_listHeader
+ .mx_AccessibleButton_kind_danger_outline,
+.mx_SpaceRoomView_landing
+ .mx_SpaceRoomDirectory_listHeader
+ .mx_AccessibleButton_kind_primary_outline {
+ padding: 3px 12px;
+}
+.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader > span,
+.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader > span {
+ margin-left: auto;
+}
+.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error,
+.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error {
+ position: relative;
+ font-weight: 600;
+ color: #ff4b55;
+ font-size: 1.5rem;
+ line-height: 1.8rem;
+ margin: 20px auto 12px;
+ padding-left: 24px;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+}
+.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error:before,
+.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error:before {
+ content: "";
+ position: absolute;
+ height: 16px;
+ width: 16px;
+ left: 0;
+ background-image: url(../../img/element-icons/warning-badge.de1033e.svg);
+}
+.mx_SpaceRoomDirectory_list {
+ margin-top: 16px;
+ padding-bottom: 40px;
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount > h3 {
+ display: inline;
+ font-weight: 600;
+ font-size: 1.8rem;
+ line-height: 2.2rem;
+ color: #2e2f32;
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount > span {
+ margin-left: 8px;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #737d8c;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_subspace
+ .mx_BaseAvatar_image {
+ border-radius: 8px;
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle {
+ position: absolute;
+ left: -1px;
+ top: 10px;
+ height: 16px;
+ width: 16px;
+ border-radius: 4px;
+ background-color: #fff;
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle:before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 16px;
+ width: 16px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #8d99a5;
+ -webkit-mask-size: 16px;
+ mask-size: 16px;
+ -webkit-transform: rotate(270deg);
+ transform: rotate(270deg);
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_subspace_toggle.mx_SpaceRoomDirectory_subspace_toggle_shown:before {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children {
+ position: relative;
+ padding-left: 12px;
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile {
+ position: relative;
+ padding: 8px 16px;
+ border-radius: 8px;
+ min-height: 56px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ display: grid;
+ grid-template-columns: 20px auto -webkit-max-content;
+ grid-template-columns: 20px auto max-content;
+ grid-column-gap: 8px;
+ grid-row-gap: 6px;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_BaseAvatar {
+ grid-row: 1;
+ grid-column: 1;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_roomTile_name {
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 1.8rem;
+ grid-row: 1;
+ grid-column: 2;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_roomTile_name
+ .mx_InfoTooltip {
+ display: inline;
+ margin-left: 12px;
+ color: #8d99a5;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_roomTile_name
+ .mx_InfoTooltip
+ .mx_InfoTooltip_icon {
+ margin-right: 4px;
+ position: relative;
+ vertical-align: text-top;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_roomTile_name
+ .mx_InfoTooltip
+ .mx_InfoTooltip_icon:before {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_roomTile_info {
+ font-size: 1.4rem;
+ line-height: 1.8rem;
+ color: #737d8c;
+ grid-row: 2;
+ grid-column: 1/3;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_actions {
+ text-align: right;
+ margin-left: 20px;
+ grid-column: 3;
+ grid-row: 1/3;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_actions
+ .mx_AccessibleButton {
+ line-height: 2.4rem;
+ padding: 4px 16px;
+ display: inline-block;
+ visibility: hidden;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_actions
+ .mx_AccessibleButton_kind_danger_outline,
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_actions
+ .mx_AccessibleButton_kind_primary_outline {
+ padding: 3px 16px;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile
+ .mx_SpaceRoomDirectory_actions
+ .mx_Checkbox {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ vertical-align: middle;
+ margin-left: 12px;
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover {
+ background-color: hsla(0, 0%, 91%, 0.77);
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_roomTile:hover
+ .mx_AccessibleButton {
+ visibility: visible;
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:before,
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children:before {
+ content: "";
+ position: absolute;
+ background-color: hsla(0, 0%, 91%, 0.77);
+ width: 1px;
+ height: 100%;
+ left: 6px;
+ top: 0;
+}
+.mx_SpaceRoomDirectory_list
+ .mx_SpaceRoomDirectory_actions
+ .mx_SpaceRoomDirectory_actionsText {
+ font-weight: 400;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #737d8c;
+}
+.mx_SpaceRoomDirectory_list > hr {
+ border: none;
+ height: 1px;
+ background-color: rgba(141, 151, 165, 0.2);
+ margin: 20px 0;
+}
+.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_createRoom {
+ display: block;
+ margin: 16px auto 0;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+}
+.mx_SpaceRoomView .mx_MainSplit > div:first-child {
+ padding: 80px 60px;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ max-height: 100%;
+ overflow-y: auto;
+}
+.mx_SpaceRoomView .mx_MainSplit > div:first-child h1 {
+ margin: 0;
+ font-size: 2.4rem;
+ font-weight: 600;
+ color: #2e2f32;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+}
+.mx_SpaceRoomView
+ .mx_MainSplit
+ > div:first-child
+ .mx_SpaceRoomView_description {
+ font-size: 1.5rem;
+ color: #737d8c;
+ margin-top: 12px;
+ margin-bottom: 24px;
+ max-width: 428px;
+}
+.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_AddExistingToSpace {
+ max-width: 428px;
+}
+.mx_SpaceRoomView
+ .mx_MainSplit
+ > div:first-child
+ .mx_AddExistingToSpace
+ .mx_AddExistingToSpace_content {
+ height: calc(100vh - 360px);
+ max-height: 400px;
+}
+.mx_SpaceRoomView
+ .mx_MainSplit
+ > div:first-child:not(.mx_SpaceRoomView_landing)
+ .mx_SpaceFeedbackPrompt {
+ width: 428px;
+}
+.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_buttons {
+ display: block;
+ margin-top: 44px;
+ width: 428px;
+ text-align: right;
+}
+.mx_SpaceRoomView
+ .mx_MainSplit
+ > div:first-child
+ .mx_SpaceRoomView_buttons
+ .mx_AccessibleButton_hasKind {
+ padding: 8px 22px;
+ margin-left: 16px;
+}
+.mx_SpaceRoomView
+ .mx_MainSplit
+ > div:first-child
+ .mx_SpaceRoomView_buttons
+ input.mx_AccessibleButton {
+ border: none;
+}
+.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_Field {
+ max-width: 428px;
+}
+.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_Field + .mx_Field {
+ margin-top: 28px;
+}
+.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_errorText {
+ font-weight: 600;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #ff4b55;
+ margin-bottom: 28px;
+}
+.mx_SpaceRoomView
+ .mx_MainSplit
+ > div:first-child
+ .mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_preview {
+ padding: 32px 24px !important;
+ margin: auto;
+ max-width: 480px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ -webkit-box-shadow: 2px 15px 30px rgba(0, 0, 0, 0.48);
+ box-shadow: 2px 15px 30px rgba(0, 0, 0, 0.48);
+ border-radius: 8px;
+ position: relative;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_BetaCard_betaPill {
+ position: absolute;
+ right: 24px;
+ top: 32px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ .mx_SpaceRoomView_preview_spaceBetaPrompt {
+ font-weight: 600;
+ font-size: 1.4rem;
+ line-height: 2.4rem;
+ color: #2e2f32;
+ margin-top: 24px;
+ position: relative;
+ padding-left: 24px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ .mx_SpaceRoomView_preview_spaceBetaPrompt
+ .mx_AccessibleButton_kind_link {
+ display: inline;
+ padding: 0;
+ font-size: inherit;
+ line-height: inherit;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ .mx_SpaceRoomView_preview_spaceBetaPrompt:before {
+ content: "";
+ position: absolute;
+ height: 2.4rem;
+ width: 20px;
+ left: 0;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ background-color: #737d8c;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ .mx_SpaceRoomView_preview_inviter
+ > div {
+ margin-left: 8px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ .mx_SpaceRoomView_preview_inviter
+ > div
+ .mx_SpaceRoomView_preview_inviter_name {
+ line-height: 1.8rem;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ .mx_SpaceRoomView_preview_inviter
+ > div
+ .mx_SpaceRoomView_preview_inviter_mxid {
+ line-height: 2.4rem;
+ color: #737d8c;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ > .mx_BaseAvatar
+ > .mx_BaseAvatar_image,
+.mx_SpaceRoomView .mx_SpaceRoomView_preview > .mx_BaseAvatar_image {
+ border-radius: 12px;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_preview h1.mx_SpaceRoomView_preview_name {
+ margin: 20px 0 !important;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_topic {
+ font-size: 1.4rem;
+ line-height: 2.2rem;
+ color: #737d8c;
+ margin: 20px 0;
+ max-height: 160px;
+ overflow-y: auto;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ .mx_SpaceRoomView_preview_joinButtons {
+ margin-top: 20px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ .mx_SpaceRoomView_preview_joinButtons
+ .mx_AccessibleButton {
+ width: 200px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 14px 0;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_preview
+ .mx_SpaceRoomView_preview_joinButtons
+ .mx_AccessibleButton
+ + .mx_AccessibleButton {
+ margin-left: 20px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ > .mx_BaseAvatar
+ > .mx_BaseAvatar_image,
+.mx_SpaceRoomView .mx_SpaceRoomView_landing > .mx_BaseAvatar_image {
+ border-radius: 12px;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name {
+ margin: 24px 0 16px;
+ font-size: 1.5rem;
+ color: #737d8c;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_name
+ > span {
+ display: inline-block;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_name
+ .mx_SpaceRoomView_landing_nameRow {
+ margin-top: 12px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_name
+ .mx_SpaceRoomView_landing_nameRow
+ > h1 {
+ display: inline-block;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_name
+ .mx_SpaceRoomView_landing_inviter
+ .mx_BaseAvatar {
+ margin-right: 4px;
+ vertical-align: middle;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_info
+ .mx_SpaceRoomView_info {
+ display: inline-block;
+ margin: 0 auto 0 0;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_info
+ .mx_FacePile {
+ display: inline-block;
+ margin-right: 12px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_info
+ .mx_FacePile
+ .mx_FacePile_faces {
+ cursor: pointer;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_info
+ .mx_SpaceRoomView_landing_inviteButton {
+ position: relative;
+ padding: 4px 18px 4px 40px;
+ line-height: 2.4rem;
+ height: -webkit-min-content;
+ height: -moz-min-content;
+ height: min-content;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_info
+ .mx_SpaceRoomView_landing_inviteButton:before {
+ position: absolute;
+ content: "";
+ left: 8px;
+ height: 16px;
+ width: 16px;
+ background: #fff;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 16px;
+ mask-size: 16px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_info
+ .mx_SpaceRoomView_landing_settingsButton {
+ position: relative;
+ margin-left: 16px;
+ width: 24px;
+ height: 24px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_landing
+ .mx_SpaceRoomView_landing_info
+ .mx_SpaceRoomView_landing_settingsButton:before {
+ position: absolute;
+ content: "";
+ left: 0;
+ top: 0;
+ height: 24px;
+ width: 24px;
+ background: #8d99a5;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
+ mask-image: url(../../img/element-icons/settings.6b381af.svg);
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_topic {
+ font-size: 1.5rem;
+ margin-top: 12px;
+ margin-bottom: 16px;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_landing > hr {
+ border: none;
+ height: 1px;
+ background-color: hsla(0, 0%, 91%, 0.77);
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SearchBox {
+ margin: 0 0 20px;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt {
+ margin-bottom: 16px;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt + hr {
+ display: none;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton {
+ position: relative;
+ padding: 16px 32px 16px 72px;
+ width: 432px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-radius: 8px;
+ border: 1px solid #e7e7e7;
+ font-size: 1.5rem;
+ margin: 20px 0;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton > h3 {
+ font-weight: 600;
+ margin: 0 0 4px;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton > span {
+ color: #737d8c;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:before {
+ position: absolute;
+ content: "";
+ width: 32px;
+ height: 32px;
+ top: 24px;
+ left: 20px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 24px;
+ mask-size: 24px;
+ background-color: #8d99a5;
+}
+.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:hover {
+ border-color: #0dbd8b;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_privateScope
+ > .mx_AccessibleButton:hover:before {
+ background-color: #0dbd8b;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_privateScope
+ > .mx_AccessibleButton:hover
+ > span {
+ color: #2e2f32;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_privateScope
+ .mx_SpaceRoomView_privateScope_justMeButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
+ mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_privateScope
+ .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton:before {
+ -webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
+ mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_inviteTeammates
+ .mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
+ padding: 58px 16px 16px;
+ position: relative;
+ border-radius: 8px;
+ background-color: #f3f8fd;
+ max-width: 428px;
+ margin: 20px 0 30px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_inviteTeammates
+ .mx_SpaceRoomView_inviteTeammates_betaDisclaimer
+ .mx_BetaCard_betaPill {
+ position: absolute;
+ left: 16px;
+ top: 16px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_inviteTeammates
+ .mx_SpaceRoomView_inviteTeammates_buttons {
+ color: #737d8c;
+ margin-top: 28px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_inviteTeammates
+ .mx_SpaceRoomView_inviteTeammates_buttons
+ .mx_AccessibleButton {
+ position: relative;
+ display: inline-block;
+ padding-left: 32px;
+ line-height: 24px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_inviteTeammates
+ .mx_SpaceRoomView_inviteTeammates_buttons
+ .mx_AccessibleButton:before {
+ content: "";
+ position: absolute;
+ height: 24px;
+ width: 24px;
+ top: 0;
+ left: 0;
+ background-color: #737d8c;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_inviteTeammates
+ .mx_SpaceRoomView_inviteTeammates_buttons
+ .mx_AccessibleButton
+ + .mx_AccessibleButton {
+ margin-left: 32px;
+}
+.mx_SpaceRoomView
+ .mx_SpaceRoomView_inviteTeammates
+ .mx_SpaceRoomView_inviteTeammates_buttons
+ .mx_SpaceRoomView_inviteTeammates_inviteDialogButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+}
+.mx_SpaceRoomView_info {
+ color: #737d8c;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ margin: 20px 0;
+}
+.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private,
+.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public {
+ padding-left: 20px;
+ position: relative;
+}
+.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before,
+.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before {
+ position: absolute;
+ content: "";
+ width: 20px;
+ height: 20px;
+ top: 0;
+ left: -2px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #8d99a5;
+}
+.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before {
+ -webkit-mask-size: 12px;
+ mask-size: 12px;
+ -webkit-mask-image: url(../../img/globe.8201f08.svg);
+ mask-image: url(../../img/globe.8201f08.svg);
+}
+.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before {
+ -webkit-mask-size: 14px;
+ mask-size: 14px;
+ -webkit-mask-image: url(../../img/element-icons/lock.1f264bd.svg);
+ mask-image: url(../../img/element-icons/lock.1f264bd.svg);
+}
+.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link {
+ color: inherit;
+ position: relative;
+ padding-left: 16px;
+}
+.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link:before {
+ content: "·";
+ position: absolute;
+ left: 6px;
+}
+.mx_SpaceFeedbackPrompt {
+ margin-top: 18px;
+ margin-bottom: 12px;
+}
+.mx_SpaceFeedbackPrompt > hr {
+ border: none;
+ border-top: 1px solid #e7e7e7;
+ margin-bottom: 12px;
+}
+.mx_SpaceFeedbackPrompt > div {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+}
+.mx_SpaceFeedbackPrompt > div > span {
+ color: #737d8c;
+ position: relative;
+ padding-left: 32px;
+ font-size: inherit;
+ line-height: inherit;
+ margin-right: auto;
+}
+.mx_SpaceFeedbackPrompt > div > span:before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 2px;
+ height: 20px;
+ width: 20px;
+ background-color: #737d8c;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_SpaceFeedbackPrompt > div .mx_AccessibleButton_kind_link {
+ color: #0dbd8b;
+ position: relative;
+ padding: 0 0 0 24px;
+ margin-left: 8px;
+ font-size: inherit;
+ line-height: inherit;
+}
+.mx_SpaceFeedbackPrompt > div .mx_AccessibleButton_kind_link:before {
+ content: "";
+ position: absolute;
+ left: 0;
+ height: 16px;
+ width: 16px;
+ background-color: #0dbd8b;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
+ mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_TabbedView {
+ padding: 0 0 0 16px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: 8px 0 0;
+}
+.mx_TabbedView_tabLabels {
+ width: 170px;
+ max-width: 170px;
+ color: #45474a;
+ position: fixed;
+}
+.mx_TabbedView_tabLabel {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ vertical-align: text-top;
+ cursor: pointer;
+ padding: 8px 0;
+ border-radius: 8px;
+ font-size: 1.3rem;
+ position: relative;
+}
+.mx_TabbedView_tabLabel_active {
+ background-color: #0dbd8b;
+ color: #fff;
+}
+.mx_TabbedView_maskedIcon {
+ margin-left: 8px;
+ margin-right: 16px;
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+}
+.mx_TabbedView_maskedIcon:before {
+ display: inline-block;
+ background-color: #454545;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 16px;
+ mask-size: 16px;
+ width: 16px;
+ height: 16px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ content: "";
+}
+.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
+ background-color: #fff;
+}
+.mx_TabbedView_tabLabel_text {
+ vertical-align: middle;
+}
+.mx_TabbedView_tabPanel {
+ margin-left: 240px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_TabbedView_tabPanel,
+.mx_TabbedView_tabPanelContent {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ min-height: 0;
+}
+.mx_TabbedView_tabPanelContent {
+ overflow: auto;
+}
+.mx_ToastContainer {
+ position: absolute;
+ top: 0;
+ left: 70px;
+ z-index: 101;
+ padding: 4px;
+ display: grid;
+ grid-template-rows: 1fr 14px 6px;
+}
+.mx_ToastContainer.mx_ToastContainer_stacked:before {
+ content: "";
+ margin: 0 4px;
+ grid-row: 2/4;
+}
+.mx_ToastContainer .mx_Toast_toast,
+.mx_ToastContainer.mx_ToastContainer_stacked:before {
+ grid-column: 1;
+ background-color: #f2f5f8;
+ -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+ border-radius: 8px;
+}
+.mx_ToastContainer .mx_Toast_toast {
+ grid-row: 1/3;
+ color: #2e2f32;
+ overflow: hidden;
+ display: grid;
+ grid-template-columns: 22px 1fr;
+ grid-column-gap: 8px;
+ -webkit-column-gap: 8px;
+ -moz-column-gap: 8px;
+ column-gap: 8px;
+ grid-row-gap: 4px;
+ row-gap: 4px;
+ padding: 8px;
+}
+.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:after,
+.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:before {
+ content: "";
+ width: 22px;
+ height: 22px;
+ grid-column: 1;
+ grid-row: 1;
+ -webkit-mask-size: 100%;
+ mask-size: 100%;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-size: 100%;
+ background-repeat: no-repeat;
+}
+.mx_ToastContainer
+ .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification:after {
+ -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ background-color: #2e2f32;
+}
+.mx_ToastContainer
+ .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:before {
+ background-color: #fff;
+ -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ -webkit-mask-size: 90%;
+ mask-size: 90%;
+}
+.mx_ToastContainer
+ .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:after {
+ -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
+ mask-image: url(../../img/e2e/warning.78bb264.svg);
+ background-color: #ff4b55;
+}
+.mx_ToastContainer
+ .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_secure_backup:after {
+ -webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
+ mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
+ background-color: #2e2f32;
+}
+.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_body,
+.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_title {
+ grid-column: 2;
+}
+.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) {
+ padding-left: 12px;
+}
+.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) .mx_Toast_title {
+ grid-column: 1/-1;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_description,
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_title {
+ padding-right: 8px;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_title {
+ width: 100%;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2 {
+ grid-column: 1/3;
+ grid-row: 1;
+ margin: 0;
+ font-size: 1.5rem;
+ font-weight: 600;
+ display: inline;
+ width: auto;
+ vertical-align: middle;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_title span {
+ padding-left: 8px;
+ float: right;
+ font-size: 1.2rem;
+ line-height: 2.2rem;
+ color: #61708b;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_body {
+ grid-column: 1/3;
+ grid-row: 2;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons {
+ float: right;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_FormButton {
+ min-width: 96px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_description {
+ max-width: 272px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin: 4px 0 11px;
+ font-size: 1.2rem;
+}
+.mx_ToastContainer
+ .mx_Toast_toast
+ .mx_Toast_description
+ .mx_AccessibleButton_kind_link {
+ font-size: inherit;
+ padding: 0;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_description a {
+ text-decoration: none;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_detail {
+ color: #737d8c;
+}
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_deviceID {
+ font-size: 1rem;
+}
+.mx_UploadBar {
+ padding-left: 65px;
+ position: relative;
+}
+.mx_UploadBar .mx_ProgressBar {
+ width: calc(100% - 40px);
+}
+.mx_UploadBar_filename {
+ margin-top: 5px;
+ color: #61708b;
+ position: relative;
+ padding-left: 22px;
+ font-size: 1.5rem;
+ vertical-align: middle;
+}
+.mx_UploadBar_filename:before {
+ content: "";
+ height: 18px;
+ width: 18px;
+ left: 0;
+ -webkit-mask-image: url(../../img/element-icons/upload.e2a53e0.svg);
+ mask-image: url(../../img/element-icons/upload.e2a53e0.svg);
+}
+.mx_UploadBar_cancel,
+.mx_UploadBar_filename:before {
+ position: absolute;
+ top: 0;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #61708b;
+}
+.mx_UploadBar_cancel {
+ right: 0;
+ height: 16px;
+ width: 16px;
+ margin-right: 16px;
+ -webkit-mask-image: url(../../img/icons-close.11ff07c.svg);
+ mask-image: url(../../img/icons-close.11ff07c.svg);
+}
+.mx_UserMenu {
+ padding-right: 6px;
+}
+.mx_UserMenu.mx_UserMenu_prototype {
+ margin-bottom: 6px;
+ padding-right: 0;
+}
+.mx_UserMenu.mx_UserMenu_prototype .mx_UserMenu_headerButtons {
+ margin-right: 2px;
+}
+.mx_UserMenu.mx_UserMenu_prototype:after {
+ content: "";
+ border-bottom: 1px solid #2e2f32;
+ opacity: 0.2;
+ display: block;
+ padding-top: 8px;
+}
+.mx_UserMenu .mx_UserMenu_headerButtons {
+ width: 16px;
+ height: 16px;
+ position: relative;
+ display: block;
+}
+.mx_UserMenu .mx_UserMenu_headerButtons:before {
+ content: "";
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #8d99a5;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+.mx_UserMenu .mx_UserMenu_row {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer {
+ position: relative;
+ margin-right: 8px;
+ height: 32px;
+ padding: 3px 0;
+}
+.mx_UserMenu
+ .mx_UserMenu_row
+ .mx_UserMenu_userAvatarContainer
+ .mx_UserMenu_userAvatar {
+ border-radius: 32px;
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ min-width: 0;
+}
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName,
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_userName {
+ display: block;
+}
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName {
+ color: #61708b;
+ font-size: 1.3rem;
+ line-height: 1.8rem;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userName {
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 2rem;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd {
+ width: 24px;
+ height: 24px;
+ margin-right: 8px;
+ position: relative;
+}
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd:before {
+ content: "";
+ position: absolute;
+ width: 24px;
+ height: 24px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #61708b;
+}
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_noisy:before {
+ -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+ mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+}
+.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_muted:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
+ mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
+}
+.mx_UserMenu.mx_UserMenu_minimized {
+ padding-right: 0;
+}
+.mx_UserMenu.mx_UserMenu_minimized .mx_UserMenu_userAvatarContainer {
+ margin-right: 0;
+}
+.mx_UserMenu_contextMenu {
+ width: 258px;
+}
+.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype {
+ padding-bottom: 16px;
+}
+.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype
+ .mx_UserMenu_contextMenu_header {
+ padding-bottom: 0;
+ padding-top: 16px;
+}
+.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype
+ .mx_UserMenu_contextMenu_header:nth-child(n + 2) {
+ padding-top: 8px;
+}
+.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype hr {
+ width: 85%;
+ opacity: 0.2;
+ border: none;
+ border-bottom: 1px solid #2e2f32;
+}
+.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu
+ > .mx_IconizedContextMenu_optionList {
+ margin-top: 4px;
+}
+.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu
+ > .mx_IconizedContextMenu_optionList:before {
+ border: none;
+}
+.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu
+ > .mx_IconizedContextMenu_optionList
+ > .mx_AccessibleButton {
+ padding-top: 2px;
+ padding-bottom: 2px;
+}
+.mx_UserMenu_contextMenu.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList_red
+ .mx_AccessibleButton {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header {
+ padding: 20px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header
+ .mx_UserMenu_contextMenu_name {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ width: calc(100% - 40px);
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header
+ .mx_UserMenu_contextMenu_name
+ * {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ width: 100%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header
+ .mx_UserMenu_contextMenu_name
+ .mx_UserMenu_contextMenu_displayName {
+ font-weight: 700;
+ font-size: 1.5rem;
+ line-height: 2rem;
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header
+ .mx_UserMenu_contextMenu_name
+ .mx_UserMenu_contextMenu_userId {
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header
+ .mx_UserMenu_contextMenu_themeButton {
+ min-width: 32px;
+ max-width: 32px;
+ width: 32px;
+ height: 32px;
+ margin-left: 8px;
+ border-radius: 32px;
+ background-color: #e3e8f0;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts,
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_hostingLink {
+ padding-top: 0;
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts {
+ display: inline-block;
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts
+ > span {
+ font-weight: 600;
+ display: block;
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts
+ > span
+ + span {
+ margin-top: 8px;
+}
+.mx_UserMenu_contextMenu
+ .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts
+ .mx_AccessibleButton_kind_link {
+ font-weight: 400;
+ font-size: inherit;
+ padding: 0;
+}
+.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon {
+ width: 16px;
+ height: 16px;
+ display: block;
+}
+.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon:before {
+ content: "";
+ width: 16px;
+ height: 16px;
+ display: block;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #2e2f32;
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconHome:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/home.1b4edd5.svg);
+ mask-image: url(../../img/element-icons/roomlist/home.1b4edd5.svg);
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconHosting:before {
+ -webkit-mask-image: url(../../img/element-icons/brands/element.182040d.svg);
+ mask-image: url(../../img/element-icons/brands/element.182040d.svg);
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconBell:before {
+ -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+ mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconLock:before {
+ -webkit-mask-image: url(../../img/element-icons/security.66f2fa6.svg);
+ mask-image: url(../../img/element-icons/security.66f2fa6.svg);
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconSettings:before {
+ -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
+ mask-image: url(../../img/element-icons/settings.6b381af.svg);
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconArchive:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/archived.226584d.svg);
+ mask-image: url(../../img/element-icons/roomlist/archived.226584d.svg);
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconMessage:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);
+ mask-image: url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconSignOut:before {
+ -webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
+ mask-image: url(../../img/element-icons/leave.bb917e7.svg);
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconMembers:before {
+ -webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
+ mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
+}
+.mx_UserMenu_contextMenu .mx_UserMenu_iconInvite:before {
+ -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+}
+.mx_ViewSource_separator {
+ clear: both;
+ border-bottom: 1px solid #e5e5e5;
+ padding-top: 0.7em;
+ padding-bottom: 0.7em;
+}
+.mx_ViewSource_heading {
+ font-size: 1.7rem;
+ font-weight: 400;
+ color: #2e2f32;
+ margin-top: 0.7em;
+}
+.mx_ViewSource pre {
+ text-align: left;
+ font-size: 1.2rem;
+ padding: 0.5em 1em;
+ word-wrap: break-word;
+ white-space: pre-wrap;
+}
+.mx_ViewSource_details {
+ margin-top: 0.8em;
+}
+.mx_CompleteSecurity_header {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_CompleteSecurity_headerIcon {
+ width: 24px;
+ height: 24px;
+ margin-right: 4px;
+ position: relative;
+}
+.mx_CompleteSecurity_heroIcon {
+ width: 128px;
+ height: 128px;
+ position: relative;
+ margin: 0 auto;
+}
+.mx_CompleteSecurity_body {
+ font-size: 1.5rem;
+}
+.mx_CompleteSecurity_waiting {
+ color: #8d99a5;
+}
+.mx_CompleteSecurity_actionRow {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ margin-top: 2.8rem;
+}
+.mx_CompleteSecurity_actionRow .mx_AccessibleButton {
+ -webkit-margin-start: 18px;
+ margin-inline-start: 18px;
+}
+.mx_CompleteSecurity_actionRow .mx_AccessibleButton.warning {
+ color: #ff4b55;
+}
+.mx_Login_submit {
+ vertical-align: middle;
+ border: 0;
+ border-radius: 8px;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
+ font-size: 1.4rem;
+ color: #fff;
+ background-color: #0dbd8b;
+ width: auto;
+ padding: 7px 1.5em;
+ cursor: pointer;
+ display: inline-block;
+ outline: none;
+ width: 100%;
+ margin-top: 24px;
+ margin-bottom: 24px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ text-align: center;
+}
+.mx_Login_submit:disabled {
+ opacity: 0.3;
+ cursor: default;
+}
+.mx_Login_loader {
+ display: inline;
+ position: relative;
+ top: 2px;
+ left: 8px;
+}
+.mx_Login_loader .mx_Spinner {
+ display: inline;
+}
+.mx_Login_loader .mx_Spinner img {
+ width: 16px;
+ height: 16px;
+}
+.mx_Login_error {
+ color: #ff4b55;
+ font-weight: 700;
+ text-align: center;
+ margin-top: 12px;
+ margin-bottom: 12px;
+}
+.mx_Login_error.mx_Login_serverError {
+ text-align: left;
+ font-weight: 400;
+}
+.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
+ color: #ff8d13;
+}
+.mx_Login_type_container {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #232f32;
+}
+.mx_Login_type_container .mx_Field {
+ margin: 0;
+}
+.mx_Login_type_label {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_Login_underlinedServerName {
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ border-bottom: 1px dashed #0dbd8b;
+}
+div.mx_AccessibleButton_kind_link.mx_Login_forgot {
+ display: block;
+ margin: 0 auto;
+ font-size: inherit;
+ padding: 0;
+}
+div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+}
+.mx_AuthBody {
+ width: 500px;
+ font-size: 1.2rem;
+ color: #61708b;
+ background-color: #fff;
+ border-radius: 0 4px 4px 0;
+ padding: 25px 60px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_AuthBody h2 {
+ font-size: 2.4rem;
+ font-weight: 600;
+ margin-top: 8px;
+ color: #232f32;
+}
+.mx_AuthBody h3 {
+ font-size: 1.4rem;
+ font-weight: 600;
+ color: #61708b;
+}
+.mx_AuthBody h3.mx_AuthBody_centered {
+ text-align: center;
+}
+.mx_AuthBody a:hover,
+.mx_AuthBody a:link,
+.mx_AuthBody a:visited {
+ color: #0dbd8b;
+ text-decoration: none;
+}
+.mx_AuthBody input[type="password"],
+.mx_AuthBody input[type="text"] {
+ color: #232f32;
+}
+.mx_AuthBody .mx_Field input,
+.mx_AuthBody .mx_Field select {
+ color: #232f32;
+ background-color: #fff;
+}
+.mx_AuthBody .mx_Field label {
+ color: #232f32;
+}
+.mx_AuthBody .mx_Field input:not(:-moz-placeholder-shown) + label,
+.mx_AuthBody .mx_Field textarea:not(:-moz-placeholder-shown) + label {
+ background-color: #fff;
+}
+.mx_AuthBody .mx_Field input:not(:-ms-input-placeholder) + label,
+.mx_AuthBody .mx_Field textarea:not(:-ms-input-placeholder) + label {
+ background-color: #fff;
+}
+.mx_AuthBody .mx_Field_labelAlwaysTopLeft label,
+.mx_AuthBody .mx_Field input:focus + label,
+.mx_AuthBody .mx_Field input:not(:placeholder-shown) + label,
+.mx_AuthBody .mx_Field select + label,
+.mx_AuthBody .mx_Field textarea:focus + label,
+.mx_AuthBody .mx_Field textarea:not(:placeholder-shown) + label {
+ background-color: #fff;
+}
+.mx_AuthBody input.error {
+ color: #ff4b55;
+}
+.mx_AuthBody .mx_Field input {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_AuthBody .mx_Field_select:before {
+ background-color: #232f32;
+}
+.mx_AuthBody .mx_Dropdown {
+ color: #232f32;
+}
+.mx_AuthBody .mx_Dropdown_arrow {
+ background: #232f32;
+}
+.mx_AuthBody .mx_Dropdown_menu {
+ background-color: #fff;
+}
+.mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight {
+ background-color: #ddd;
+}
+.mx_AuthBody_fieldRow {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-bottom: 10px;
+}
+.mx_AuthBody_fieldRow > .mx_Field {
+ margin: 0 5px;
+}
+.mx_AuthBody_fieldRow > .mx_Field:first-child {
+ margin-left: 0;
+}
+.mx_AuthBody_fieldRow > .mx_Field:last-child {
+ margin-right: 0;
+}
+.mx_AuthBody_paddedFooter {
+ height: 80px;
+ padding-top: 28px;
+ text-align: center;
+}
+.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title {
+ margin-top: 16px;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+}
+.mx_AuthBody_paddedFooter
+ .mx_AuthBody_paddedFooter_title
+ .mx_InlineSpinner
+ img {
+ vertical-align: sub;
+ margin-right: 5px;
+}
+.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_subtitle {
+ margin-top: 8px;
+ font-size: 1rem;
+ line-height: 1.4rem;
+}
+.mx_AuthBody_changeFlow {
+ display: block;
+ text-align: center;
+ width: 100%;
+}
+.mx_AuthBody_changeFlow > a {
+ font-weight: 600;
+}
+.mx_SSOButtons + .mx_AuthBody_changeFlow {
+ margin-top: 24px;
+}
+.mx_AuthBody_spinner {
+ margin: 1em 0;
+}
+@media only screen and (max-width: 480px) {
+ .mx_AuthBody {
+ border-radius: 4px;
+ width: auto;
+ max-width: 500px;
+ padding: 10px;
+ }
+}
+.mx_AuthButtons {
+ min-height: 24px;
+ height: unset !important;
+ padding-top: 13px !important;
+ padding-bottom: 14px !important;
+ -webkit-box-ordinal-group: 5;
+ -ms-flex-order: 4;
+ order: 4;
+}
+.mx_AuthButtons_loginButton_wrapper {
+ text-align: center;
+ width: 100%;
+}
+.mx_AuthButtons_loginButton,
+.mx_AuthButtons_registerButton {
+ margin-top: 3px;
+ height: 40px;
+ border: 0;
+ border-radius: 40px;
+ margin-left: 4px;
+ margin-right: 4px;
+ min-width: 80px;
+ background-color: #0dbd8b;
+ color: #fff;
+ cursor: pointer;
+ font-size: 1.5rem;
+ padding: 0 11px;
+ word-break: break-word;
+}
+.mx_AuthFooter {
+ text-align: center;
+ width: 100%;
+ font-size: 1.4rem;
+ opacity: 0.72;
+ padding: 20px 0;
+ background: -webkit-gradient(
+ linear,
+ left top,
+ left bottom,
+ from(transparent),
+ to(rgba(0, 0, 0, 0.8))
+ );
+ background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+}
+.mx_AuthFooter a:hover,
+.mx_AuthFooter a:link,
+.mx_AuthFooter a:visited {
+ color: #fff;
+ margin: 0 22px;
+}
+.mx_AuthHeader {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ width: 206px;
+ padding: 25px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+@media only screen and (max-width: 480px) {
+ .mx_AuthHeader {
+ display: none;
+ }
+}
+.mx_AuthHeaderLogo {
+ margin-top: 15px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding: 0 25px;
+}
+.mx_AuthHeaderLogo img {
+ width: 100%;
+}
+@media only screen and (max-width: 480px) {
+ .mx_AuthHeaderLogo {
+ display: none;
+ }
+}
+.mx_AuthPage {
+ width: 100%;
+ min-height: 100%;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ background-color: #2e3649;
+}
+.mx_AuthPage,
+.mx_AuthPage_modal {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_AuthPage_modal {
+ margin: 100px auto auto;
+ border-radius: 4px;
+ -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
+ background-color: hsla(0, 0%, 96.1%, 0.9);
+}
+@media only screen and (max-width: 480px) {
+ .mx_AuthPage_modal {
+ margin-top: 0;
+ }
+}
+.mx_CompleteSecurityBody {
+ width: 600px;
+ color: #232f32;
+ background-color: #fff;
+ border-radius: 4px;
+ padding: 20px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_CompleteSecurityBody h2 {
+ font-size: 2.4rem;
+ font-weight: 600;
+ margin-top: 0;
+}
+.mx_CompleteSecurityBody h3 {
+ font-size: 1.4rem;
+ font-weight: 600;
+}
+.mx_CompleteSecurityBody a:hover,
+.mx_CompleteSecurityBody a:link,
+.mx_CompleteSecurityBody a:visited {
+ color: #0dbd8b;
+ text-decoration: none;
+}
+.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option {
+ padding: 0 3px;
+}
+.mx_CountryDropdown .mx_Dropdown_arrow {
+ padding-right: 3px;
+}
+.mx_CountryDropdown_shortOption {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ height: 100%;
+}
+.mx_CountryDropdown_option,
+.mx_CountryDropdown_shortOption {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_CountryDropdown_option {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_InteractiveAuthEntryComponents_emailWrapper {
+ padding-right: 100px;
+ position: relative;
+ margin-top: 32px;
+ margin-bottom: 32px;
+}
+.mx_InteractiveAuthEntryComponents_emailWrapper:after,
+.mx_InteractiveAuthEntryComponents_emailWrapper:before {
+ position: absolute;
+ width: 116px;
+ height: 116px;
+ content: "";
+ right: -10px;
+}
+.mx_InteractiveAuthEntryComponents_emailWrapper:before {
+ background-color: rgba(244, 246, 250, 0.91);
+ border-radius: 50%;
+ top: -20px;
+}
+.mx_InteractiveAuthEntryComponents_emailWrapper:after {
+ background-image: url(../../img/element-icons/email-prompt.1d04dfe.svg);
+ background-repeat: no-repeat;
+ background-position: 50%;
+ background-size: contain;
+ top: -25px;
+}
+.mx_InteractiveAuthEntryComponents_msisdnWrapper {
+ text-align: center;
+}
+.mx_InteractiveAuthEntryComponents_msisdnEntry {
+ font-size: 200%;
+ font-weight: 700;
+ border: 1px solid #c7c7c7;
+ border-radius: 3px;
+ width: 6em;
+}
+.mx_InteractiveAuthEntryComponents_msisdnEntry:focus {
+ border: 1px solid #0dbd8b;
+}
+.mx_InteractiveAuthEntryComponents_msisdnSubmit {
+ margin-top: 4px;
+ margin-bottom: 5px;
+}
+.mx_InteractiveAuthEntryComponents_termsSubmit {
+ margin-top: 20px;
+ margin-bottom: 5px;
+ display: block;
+ width: 100%;
+}
+.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
+ background-color: #747474;
+ cursor: default;
+}
+.mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
+ background-color: #92caad;
+ cursor: default;
+}
+.mx_InteractiveAuthEntryComponents_termsPolicy {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: start;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_InteractiveAuthEntryComponents_passwordSection {
+ width: 300px;
+}
+.mx_InteractiveAuthEntryComponents_sso_buttons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ margin-top: 20px;
+}
+.mx_InteractiveAuthEntryComponents_sso_buttons .mx_AccessibleButton {
+ margin-left: 5px;
+}
+.mx_AuthBody_language {
+ width: 100%;
+}
+.mx_AuthBody_language .mx_Dropdown_input {
+ border: none;
+ font-size: 1.4rem;
+ font-weight: 600;
+ color: #4e5054;
+ width: auto;
+}
+.mx_AuthBody_language .mx_Dropdown_arrow {
+ background: #4e5054;
+}
+progress.mx_PassphraseField_progress {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ width: 100%;
+ border: 0;
+ height: 4px;
+ position: absolute;
+ top: -12px;
+ border-radius: "2px";
+}
+progress.mx_PassphraseField_progress::-moz-progress-bar {
+ border-radius: "2px";
+}
+progress.mx_PassphraseField_progress::-webkit-progress-bar,
+progress.mx_PassphraseField_progress::-webkit-progress-value {
+ border-radius: "2px";
+}
+progress.mx_PassphraseField_progress {
+ color: #ff4b55;
+}
+progress.mx_PassphraseField_progress::-moz-progress-bar {
+ background-color: #ff4b55;
+}
+progress.mx_PassphraseField_progress::-webkit-progress-value {
+ background-color: #ff4b55;
+}
+progress.mx_PassphraseField_progress[value="2"],
+progress.mx_PassphraseField_progress[value="3"] {
+ color: #ff812d;
+}
+progress.mx_PassphraseField_progress[value="2"]::-moz-progress-bar,
+progress.mx_PassphraseField_progress[value="3"]::-moz-progress-bar {
+ background-color: #ff812d;
+}
+progress.mx_PassphraseField_progress[value="2"]::-webkit-progress-value,
+progress.mx_PassphraseField_progress[value="3"]::-webkit-progress-value {
+ background-color: #ff812d;
+}
+progress.mx_PassphraseField_progress[value="4"] {
+ color: #0dbd8b;
+}
+progress.mx_PassphraseField_progress[value="4"]::-moz-progress-bar {
+ background-color: #0dbd8b;
+}
+progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
+ background-color: #0dbd8b;
+}
+.mx_Welcome {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_Welcome.mx_WelcomePage_registrationDisabled .mx_ButtonCreateAccount {
+ display: none;
+}
+.mx_Welcome .mx_AuthBody_language {
+ width: 160px;
+ margin-bottom: 10px;
+}
+.mx_BaseAvatar {
+ position: relative;
+ display: inline-block;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.mx_BaseAvatar_initial {
+ position: absolute;
+ left: 0;
+ color: #fff;
+ text-align: center;
+ speak: none;
+ pointer-events: none;
+ font-weight: 400;
+}
+.mx_BaseAvatar_image {
+ -o-object-fit: cover;
+ object-fit: cover;
+ border-radius: 125px;
+ vertical-align: top;
+ background-color: #fff;
+}
+.mx_DecoratedRoomAvatar,
+.mx_ExtraTile {
+ position: relative;
+}
+.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar,
+.mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);
+ mask-image: url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+}
+.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon,
+.mx_ExtraTile .mx_DecoratedRoomAvatar_icon {
+ position: absolute;
+ bottom: -2px;
+ right: -2px;
+ margin: 4px;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+}
+.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before,
+.mx_ExtraTile .mx_DecoratedRoomAvatar_icon:before {
+ content: "";
+ width: 8px;
+ height: 8px;
+ position: absolute;
+ border-radius: 8px;
+}
+.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe:before,
+.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe:before {
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #737d8c;
+ -webkit-mask-image: url(../../img/globe.8201f08.svg);
+ mask-image: url(../../img/globe.8201f08.svg);
+}
+.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_offline:before,
+.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_offline:before {
+ background-color: #e3e8f0;
+}
+.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online:before,
+.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online:before {
+ background-color: #0dbd8b;
+}
+.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_away:before,
+.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_away:before {
+ background-color: #d9b072;
+}
+.mx_DecoratedRoomAvatar .mx_NotificationBadge,
+.mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer,
+.mx_ExtraTile .mx_NotificationBadge,
+.mx_ExtraTile .mx_RoomTile_badgeContainer {
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 18px;
+ width: 18px;
+}
+.mx_MessageComposer_avatar .mx_BaseAvatar {
+ padding: 2px;
+ border: 1px solid transparent;
+ border-radius: 100%;
+}
+.mx_MessageComposer_avatar .mx_BaseAvatar_initial {
+ left: 2px;
+}
+.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar {
+ border-color: #0dbd8b;
+}
+@-webkit-keyframes shadow-pulse {
+ 0% {
+ -webkit-box-shadow: 0 0 0 0 rgba(13, 189, 139, 0.2);
+ box-shadow: 0 0 0 0 rgba(13, 189, 139, 0.2);
+ }
+ to {
+ -webkit-box-shadow: 0 0 0 6px rgba(13, 189, 139, 0);
+ box-shadow: 0 0 0 6px rgba(13, 189, 139, 0);
+ }
+}
+@keyframes shadow-pulse {
+ 0% {
+ -webkit-box-shadow: 0 0 0 0 rgba(13, 189, 139, 0.2);
+ box-shadow: 0 0 0 0 rgba(13, 189, 139, 0.2);
+ }
+ to {
+ -webkit-box-shadow: 0 0 0 6px rgba(13, 189, 139, 0);
+ box-shadow: 0 0 0 6px rgba(13, 189, 139, 0);
+ }
+}
+.mx_PulsedAvatar img {
+ -webkit-animation: shadow-pulse 1s infinite;
+ animation: shadow-pulse 1s infinite;
+}
+.mx_WidgetAvatar {
+ border-radius: 4px;
+}
+.mx_BetaCard {
+ margin-bottom: 20px;
+ padding: 24px;
+ background-color: #f4f6fa;
+ border-radius: 8px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_BetaCard > div .mx_BetaCard_title {
+ font-weight: 600;
+ font-size: 1.8rem;
+ line-height: 2.2rem;
+ color: #2e2f32;
+ margin: 4px 0 14px;
+}
+.mx_BetaCard > div .mx_BetaCard_title .mx_BetaCard_betaPill {
+ margin-left: 12px;
+}
+.mx_BetaCard > div .mx_BetaCard_caption {
+ font-size: 1.5rem;
+ line-height: 2rem;
+ color: #737d8c;
+ margin-bottom: 20px;
+}
+.mx_BetaCard > div .mx_AccessibleButton {
+ display: block;
+ margin: 12px 0;
+ padding: 7px 40px;
+ width: auto;
+}
+.mx_BetaCard > div .mx_BetaCard_disclaimer {
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #737d8c;
+ margin-top: 20px;
+}
+.mx_BetaCard > img {
+ margin: auto 0 auto 20px;
+ width: 300px;
+ -o-object-fit: contain;
+ object-fit: contain;
+ height: 100%;
+}
+.mx_BetaCard_betaPill {
+ background-color: #238cf5;
+ padding: 4px 10px;
+ border-radius: 8px;
+ text-transform: uppercase;
+ font-size: 12px;
+ line-height: 15px;
+ color: #fff;
+ display: inline-block;
+ vertical-align: text-bottom;
+}
+.mx_BetaCard_betaPill.mx_BetaCard_betaPill_clickable {
+ cursor: pointer;
+}
+.mx_BetaDot {
+ border-radius: 50%;
+ margin: 10px;
+ height: 12px;
+ width: 12px;
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ background: #238cf5;
+ -webkit-box-shadow: 0 0 0 0 #238cf5;
+ box-shadow: 0 0 0 0 #238cf5;
+ -webkit-animation: mx_Beta_bluePulse 2s infinite;
+ animation: mx_Beta_bluePulse 2s infinite;
+ -webkit-animation-iteration-count: 20;
+ animation-iteration-count: 20;
+}
+@-webkit-keyframes mx_Beta_bluePulse {
+ 0% {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95);
+ -webkit-box-shadow: 0 0 0 0 rgba(35, 140, 245, 0.7);
+ box-shadow: 0 0 0 0 rgba(35, 140, 245, 0.7);
+ }
+ 70% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-box-shadow: 0 0 0 10px rgba(35, 140, 245, 0);
+ box-shadow: 0 0 0 10px rgba(35, 140, 245, 0);
+ }
+ to {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95);
+ -webkit-box-shadow: 0 0 0 0 rgba(35, 140, 245, 0);
+ box-shadow: 0 0 0 0 rgba(35, 140, 245, 0);
+ }
+}
+@keyframes mx_Beta_bluePulse {
+ 0% {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95);
+ -webkit-box-shadow: 0 0 0 0 rgba(35, 140, 245, 0.7);
+ box-shadow: 0 0 0 0 rgba(35, 140, 245, 0.7);
+ }
+ 70% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-box-shadow: 0 0 0 10px rgba(35, 140, 245, 0);
+ box-shadow: 0 0 0 10px rgba(35, 140, 245, 0);
+ }
+ to {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95);
+ -webkit-box-shadow: 0 0 0 0 rgba(35, 140, 245, 0);
+ box-shadow: 0 0 0 0 rgba(35, 140, 245, 0);
+ }
+}
+.mx_CallContextMenu_item {
+ width: 205px;
+ height: 40px;
+ padding-left: 16px;
+ line-height: 40px;
+ vertical-align: center;
+}
+.mx_IconizedContextMenu {
+ min-width: 146px;
+}
+.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList > * {
+ padding-left: 20px;
+ padding-right: 20px;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_IconizedContextMenu_optionList_notFirst:before,
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList:nth-child(n + 2):before {
+ border-top: 1px solid #2e2f32;
+ opacity: 0.1;
+ content: "";
+ width: 100%;
+ position: absolute;
+ left: 0;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList:first-child
+ .mx_AccessibleButton:first-child {
+ border-radius: 8px 8px 0 0;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList:last-child
+ .mx_AccessibleButton:last-child {
+ border-radius: 0 0 8px 8px;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_AccessibleButton {
+ padding-top: 12px;
+ padding-bottom: 12px;
+ text-decoration: none;
+ color: #2e2f32;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_AccessibleButton:hover {
+ background-color: #f5f8fa;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_AccessibleButton.mx_AccessibleButton_disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_AccessibleButton
+ .mx_IconizedContextMenu_icon,
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_AccessibleButton
+ img {
+ width: 16px;
+ min-width: 16px;
+ max-width: 16px;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_AccessibleButton
+ span.mx_IconizedContextMenu_label {
+ width: 100%;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList
+ .mx_AccessibleButton
+ .mx_IconizedContextMenu_icon
+ + .mx_IconizedContextMenu_label {
+ padding-left: 14px;
+}
+.mx_IconizedContextMenu .mx_IconizedContextMenu_icon {
+ position: relative;
+ width: 16px;
+ height: 16px;
+}
+.mx_IconizedContextMenu .mx_IconizedContextMenu_icon:before {
+ content: "";
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #2e2f32;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList_red
+ .mx_AccessibleButton {
+ color: #ff4b55 !important;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_optionList_red
+ .mx_IconizedContextMenu_icon:before {
+ background-color: #ff4b55;
+}
+.mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_AccessibleButton,
+.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_AccessibleButton {
+ color: #0dbd8b !important;
+}
+.mx_IconizedContextMenu
+ .mx_IconizedContextMenu_active
+ .mx_IconizedContextMenu_icon:before {
+ background-color: #0dbd8b;
+}
+.mx_IconizedContextMenu.mx_IconizedContextMenu_compact
+ .mx_IconizedContextMenu_optionList
+ > * {
+ padding: 8px 16px 8px 11px;
+}
+.mx_IconizedContextMenu .mx_IconizedContextMenu_checked {
+ margin-left: 16px;
+ margin-right: -5px;
+}
+.mx_IconizedContextMenu .mx_IconizedContextMenu_checked:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
+ mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
+}
+.mx_MessageContextMenu {
+ padding: 6px;
+}
+.mx_MessageContextMenu_field {
+ display: block;
+ padding: 3px 6px;
+ cursor: pointer;
+ white-space: nowrap;
+}
+.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet {
+ font-weight: 700;
+}
+.mx_StatusMessageContextMenu {
+ padding: 10px;
+}
+.mx_StatusMessageContextMenu_form {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+input.mx_StatusMessageContextMenu_message {
+ border-radius: 4px;
+ border: 1px solid #e7e7e7;
+ padding: 6.5px 11px;
+ background-color: #fff;
+ font-weight: 400;
+ margin: 0 0 10px;
+}
+.mx_StatusMessageContextMenu_message::-webkit-input-placeholder {
+ color: #61708b;
+}
+.mx_StatusMessageContextMenu_message::-moz-placeholder {
+ color: #61708b;
+}
+.mx_StatusMessageContextMenu_message:-ms-input-placeholder {
+ color: #61708b;
+}
+.mx_StatusMessageContextMenu_message::-ms-input-placeholder {
+ color: #61708b;
+}
+.mx_StatusMessageContextMenu_message::placeholder {
+ color: #61708b;
+}
+.mx_StatusMessageContextMenu_actionContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_StatusMessageContextMenu_clear,
+.mx_StatusMessageContextMenu_submit {
+ vertical-align: middle;
+ border-radius: 8px;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
+ font-size: 1.4rem;
+ color: #fff;
+ background-color: #0dbd8b;
+ width: auto;
+ cursor: pointer;
+ display: inline-block;
+ outline: none;
+ -ms-flex-item-align: start;
+ align-self: start;
+ font-size: 1.2rem;
+ padding: 6px 1em;
+ border: 1px solid transparent;
+ margin-right: 10px;
+}
+.mx_StatusMessageContextMenu_submit[disabled] {
+ opacity: 0.49;
+}
+.mx_StatusMessageContextMenu_clear {
+ color: #ff4b55;
+ background-color: transparent;
+ border: 1px solid #ff4b55;
+}
+.mx_StatusMessageContextMenu_actionContainer .mx_Spinner {
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+}
+.mx_TagTileContextMenu_item {
+ padding: 8px 20px 8px 8px;
+ cursor: pointer;
+ white-space: nowrap;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ line-height: 1.6rem;
+}
+.mx_TagTileContextMenu_item:before {
+ content: "";
+ height: 15px;
+ width: 15px;
+ background-color: currentColor;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ margin-right: 8px;
+}
+.mx_TagTileContextMenu_viewCommunity:before {
+ -webkit-mask-image: url(../../img/element-icons/view-community.0cad1a5.svg);
+ mask-image: url(../../img/element-icons/view-community.0cad1a5.svg);
+}
+.mx_TagTileContextMenu_hideCommunity:before {
+ -webkit-mask-image: url(../../img/element-icons/hide.2b52315.svg);
+ mask-image: url(../../img/element-icons/hide.2b52315.svg);
+}
+.mx_TagTileContextMenu_separator {
+ margin-top: 0;
+ margin-bottom: 0;
+ border-style: none;
+ border-top: 1px solid;
+ border-color: #e7e7e7;
+}
+.mx_AddExistingToSpaceDialog_wrapper .mx_Dialog {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_AddExistingToSpace .mx_SearchBox {
+ margin: 0 0 15px;
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_content {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_noResults {
+ display: block;
+ margin-top: 24px;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_section:not(:first-child) {
+ margin-top: 24px;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_section > h3 {
+ margin: 0;
+ color: #737d8c;
+ font-size: 1.2rem;
+ font-weight: 600;
+ line-height: 1.5rem;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_section
+ .mx_AddExistingToSpace_entry {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-top: 12px;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_section
+ .mx_AddExistingToSpace_entry
+ .mx_DecoratedRoomAvatar {
+ margin-right: 12px;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_section
+ .mx_AddExistingToSpace_entry
+ .mx_AddExistingToSpace_entry_name {
+ font-size: 1.5rem;
+ line-height: 30px;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ margin-right: 12px;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_section
+ .mx_AddExistingToSpace_entry
+ .mx_Checkbox {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar {
+ margin-right: 12px;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_section_spaces
+ .mx_BaseAvatar_image {
+ border-radius: 8px;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental {
+ position: relative;
+ border-radius: 8px;
+ margin: 12px 0;
+ padding: 8px 8px 8px 42px;
+ background-color: #f3f8fd;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #737d8c;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental:before {
+ content: "";
+ position: absolute;
+ left: 10px;
+ top: calc(50% - 8px);
+ height: 16px;
+ width: 16px;
+ background-color: #737d8c;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_footer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-top: 20px;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #737d8c;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span .mx_ProgressBar {
+ height: 8px;
+ width: 100%;
+ border-radius: 8px;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ > span
+ .mx_ProgressBar::-moz-progress-bar {
+ border-radius: 8px;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ > span
+ .mx_ProgressBar::-webkit-progress-bar,
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ > span
+ .mx_ProgressBar::-webkit-progress-value {
+ border-radius: 8px;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ > span
+ .mx_AddExistingToSpace_progressText {
+ margin-top: 8px;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #2e2f32;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span > * {
+ vertical-align: middle;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ .mx_AddExistingToSpace_error {
+ padding-left: 12px;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ .mx_AddExistingToSpace_error
+ > img {
+ -ms-flex-item-align: center;
+ align-self: center;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ .mx_AddExistingToSpace_error
+ .mx_AddExistingToSpace_errorHeading {
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 1.8rem;
+ color: #ff4b55;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ .mx_AddExistingToSpace_error
+ .mx_AddExistingToSpace_errorCaption {
+ margin-top: 4px;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #2e2f32;
+}
+.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton {
+ display: inline-block;
+ -ms-flex-item-align: center;
+ align-self: center;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ .mx_AccessibleButton_kind_primary {
+ padding: 8px 36px;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ .mx_AddExistingToSpace_retryButton {
+ margin-left: 12px;
+ padding-left: 24px;
+ position: relative;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ .mx_AddExistingToSpace_retryButton:before {
+ content: "";
+ position: absolute;
+ background-color: #2e2f32;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
+ mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
+ width: 18px;
+ height: 18px;
+ left: 0;
+}
+.mx_AddExistingToSpace
+ .mx_AddExistingToSpace_footer
+ .mx_AccessibleButton_kind_link {
+ padding: 0;
+}
+.mx_AddExistingToSpaceDialog {
+ width: 480px;
+ color: #2e2f32;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ min-height: 0;
+ height: 80vh;
+}
+.mx_AddExistingToSpaceDialog,
+.mx_AddExistingToSpaceDialog .mx_Dialog_title {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar_image {
+ border-radius: 8px;
+ margin: 0;
+ vertical-align: unset;
+}
+.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ margin: auto 16px auto 5px;
+ vertical-align: middle;
+}
+.mx_AddExistingToSpaceDialog .mx_Dialog_title > div > h1 {
+ font-weight: 600;
+ font-size: 1.8rem;
+ line-height: 2.2rem;
+ margin: 0;
+}
+.mx_AddExistingToSpaceDialog
+ .mx_Dialog_title
+ > div
+ .mx_AddExistingToSpaceDialog_onlySpace {
+ color: #737d8c;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+}
+.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input {
+ border: none;
+}
+.mx_AddExistingToSpaceDialog
+ .mx_Dialog_title
+ .mx_Dropdown_input
+ > .mx_Dropdown_option {
+ padding-left: 0;
+ -webkit-box-flex: unset;
+ -ms-flex: unset;
+ flex: unset;
+ height: unset;
+ color: #737d8c;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+}
+.mx_AddExistingToSpaceDialog
+ .mx_Dialog_title
+ .mx_Dropdown_input
+ > .mx_Dropdown_option
+ .mx_BaseAvatar {
+ display: none;
+}
+.mx_AddExistingToSpaceDialog
+ .mx_Dialog_title
+ .mx_Dropdown_input
+ .mx_Dropdown_menu
+ .mx_AddExistingToSpaceDialog_dropdownOptionActive {
+ color: #0dbd8b;
+ padding-right: 32px;
+ position: relative;
+}
+.mx_AddExistingToSpaceDialog
+ .mx_Dialog_title
+ .mx_Dropdown_input
+ .mx_Dropdown_menu
+ .mx_AddExistingToSpaceDialog_dropdownOptionActive:before {
+ content: "";
+ width: 20px;
+ height: 20px;
+ top: 8px;
+ right: 0;
+ position: absolute;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #0dbd8b;
+ -webkit-mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
+ mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
+}
+.mx_AddExistingToSpaceDialog .mx_AddExistingToSpace {
+ display: contents;
+}
+.mx_AddressPickerDialog a:hover,
+.mx_AddressPickerDialog a:link,
+.mx_AddressPickerDialog a:visited {
+ color: #0dbd8b;
+ text-decoration: none;
+}
+.mx_AddressPickerDialog_input,
+.mx_AddressPickerDialog_input:focus {
+ height: 26px;
+ font-size: 1.4rem;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
+ padding-left: 12px;
+ padding-right: 12px;
+ margin: 0 !important;
+ border: 0 !important;
+ outline: 0 !important;
+ width: 1000%;
+ resize: none;
+ overflow: hidden;
+ vertical-align: middle;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ word-wrap: nowrap;
+}
+.mx_AddressPickerDialog .mx_Dialog_content {
+ min-height: 50px;
+}
+.mx_AddressPickerDialog_inputContainer {
+ border-radius: 3px;
+ border: 1px solid #e7e7e7;
+ line-height: 3.6rem;
+ padding: 1px 4px;
+ max-height: 150px;
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+.mx_AddressPickerDialog_error {
+ margin-top: 10px;
+ color: #ff4b55;
+}
+.mx_AddressPickerDialog_cancel {
+ position: absolute;
+ right: 11px;
+ top: 13px;
+ cursor: pointer;
+}
+.mx_AddressPickerDialog_cancel object {
+ pointer-events: none;
+}
+.mx_AddressPickerDialog_identityServer {
+ margin-top: 1em;
+}
+.mx_AnalyticsModal table {
+ margin: 10px 0;
+}
+.mx_BetaFeedbackDialog .mx_BetaFeedbackDialog_subheading {
+ color: #2e2f32;
+ font-size: 1.4rem;
+ line-height: 2rem;
+ margin-bottom: 24px;
+}
+.mx_BetaFeedbackDialog .mx_AccessibleButton_kind_link {
+ padding: 0;
+ font-size: inherit;
+ line-height: inherit;
+}
+.mx_BugReportDialog
+ .mx_BugReportDialog_download
+ .mx_AccessibleButton_kind_link {
+ padding-left: 0;
+}
+.mx_ChangelogDialog_content {
+ max-height: 300px;
+ overflow: auto;
+}
+.mx_ChangelogDialog_li {
+ padding: 0.2em;
+}
+.mx_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles {
+ margin-top: 24px;
+}
+.mx_ChatCreateOrReuseDialog .mx_Dialog_content {
+ margin-bottom: 24px;
+ min-height: 100px;
+}
+.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge {
+ display: none;
+}
+.mx_ChatCreateOrReuseDialog_profile {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_ChatCreateOrReuseDialog_profile_name {
+ padding: 14px;
+}
+.mx_CommunityPrototypeInviteDialog.mx_Dialog_fixedWidth {
+ width: 360px;
+}
+.mx_CommunityPrototypeInviteDialog .mx_Dialog_content {
+ margin-bottom: 0;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_people {
+ position: relative;
+ margin-bottom: 4px;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_people
+ .mx_AccessibleButton {
+ display: inline-block;
+ background-color: #ddd;
+ border-radius: 4px;
+ padding: 3px 5px;
+ font-size: 1.2rem;
+ float: right;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_morePeople {
+ margin-top: 8px;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_person {
+ position: relative;
+ margin-top: 4px;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_person
+ > * {
+ vertical-align: middle;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_person
+ .mx_Checkbox {
+ position: absolute;
+ right: 0;
+ top: calc(50% - 8px);
+ width: 16px;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_person
+ .mx_CommunityPrototypeInviteDialog_personIdentifiers {
+ display: inline-block;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_person
+ .mx_CommunityPrototypeInviteDialog_personIdentifiers
+ > * {
+ display: block;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_person
+ .mx_CommunityPrototypeInviteDialog_personIdentifiers
+ .mx_CommunityPrototypeInviteDialog_personName {
+ font-weight: 600;
+ font-size: 1.4rem;
+ color: #2e2f32;
+ margin-left: 7px;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_person
+ .mx_CommunityPrototypeInviteDialog_personIdentifiers
+ .mx_CommunityPrototypeInviteDialog_personId {
+ font-size: 1.2rem;
+ color: #61708b;
+ margin-left: 7px;
+}
+.mx_CommunityPrototypeInviteDialog
+ .mx_Dialog_content
+ .mx_CommunityPrototypeInviteDialog_primaryButton {
+ display: block;
+ font-size: 1.3rem;
+ line-height: 20px;
+ height: 20px;
+ margin-top: 24px;
+}
+.mx_ConfirmUserActionDialog .mx_Dialog_content {
+ min-height: 48px;
+ margin-bottom: 24px;
+}
+.mx_ConfirmUserActionDialog_avatar {
+ float: left;
+ margin-right: 20px;
+ margin-top: -2px;
+}
+.mx_ConfirmUserActionDialog_name {
+ font-size: 1.8rem;
+}
+.mx_ConfirmUserActionDialog_userId {
+ font-size: 1.3rem;
+}
+.mx_ConfirmUserActionDialog_reasonField {
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
+ font-size: 1.4rem;
+ color: #2e2f32;
+ background-color: #fff;
+ border-radius: 3px;
+ border: 1px solid #e7e7e7;
+ line-height: 3.6rem;
+ padding: 1px 16px;
+ margin-bottom: 24px;
+ width: 90%;
+}
+.mx_CreateCommunityPrototypeDialog .mx_Dialog_content {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-bottom: 12px;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colName {
+ -ms-flex-preferred-size: 66.66%;
+ flex-basis: 66.66%;
+ padding-right: 100px;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colName
+ .mx_Field
+ input {
+ font-size: 1.6rem;
+ line-height: 2rem;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colName
+ .mx_CreateCommunityPrototypeDialog_subtext {
+ display: block;
+ color: #61708b;
+ margin-bottom: 16px;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colName
+ .mx_CreateCommunityPrototypeDialog_subtext:last-child {
+ margin-top: 16px;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colName
+ .mx_CreateCommunityPrototypeDialog_subtext.mx_CreateCommunityPrototypeDialog_subtext_error {
+ color: #ff4b55;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colName
+ .mx_CreateCommunityPrototypeDialog_communityId {
+ position: relative;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colName
+ .mx_CreateCommunityPrototypeDialog_communityId
+ .mx_InfoTooltip {
+ float: right;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colName
+ .mx_AccessibleButton {
+ display: block;
+ height: 32px;
+ font-size: 1.6rem;
+ line-height: 32px;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colAvatar {
+ -ms-flex-preferred-size: 33.33%;
+ flex-basis: 33.33%;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colAvatar
+ .mx_CreateCommunityPrototypeDialog_avatarContainer {
+ margin-top: 12px;
+ margin-bottom: 20px;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colAvatar
+ .mx_CreateCommunityPrototypeDialog_avatarContainer
+ .mx_CreateCommunityPrototypeDialog_avatar,
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colAvatar
+ .mx_CreateCommunityPrototypeDialog_avatarContainer
+ .mx_CreateCommunityPrototypeDialog_placeholderAvatar {
+ width: 96px;
+ height: 96px;
+ border-radius: 96px;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colAvatar
+ .mx_CreateCommunityPrototypeDialog_avatarContainer
+ .mx_CreateCommunityPrototypeDialog_placeholderAvatar {
+ background-color: #368bd6;
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colAvatar
+ .mx_CreateCommunityPrototypeDialog_avatarContainer
+ .mx_CreateCommunityPrototypeDialog_placeholderAvatar:before {
+ display: inline-block;
+ background-color: #fff;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 96px;
+ mask-size: 96px;
+ width: 96px;
+ height: 96px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ content: "";
+ vertical-align: middle;
+ -webkit-mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
+ mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
+}
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colAvatar
+ .mx_CreateCommunityPrototypeDialog_tip
+ > b,
+.mx_CreateCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_CreateCommunityPrototypeDialog_colAvatar
+ .mx_CreateCommunityPrototypeDialog_tip
+ > span {
+ display: block;
+ color: #61708b;
+}
+.mx_CreateGroupDialog_inputRow {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+.mx_CreateGroupDialog_label {
+ text-align: left;
+ padding-bottom: 12px;
+}
+.mx_CreateGroupDialog_input {
+ font-size: 1.5rem;
+ border-radius: 3px;
+ border: 1px solid #e7e7e7;
+ padding: 9px;
+ color: #2e2f32;
+ background-color: #fff;
+}
+.mx_CreateGroupDialog_input_hasPrefixAndSuffix {
+ border-radius: 0;
+}
+.mx_CreateGroupDialog_input_group {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_CreateGroupDialog_prefix,
+.mx_CreateGroupDialog_suffix {
+ padding: 0 5px;
+ line-height: 3.7rem;
+ background-color: #e3e8f0;
+ border: 1px solid #e7e7e7;
+ text-align: center;
+}
+.mx_CreateGroupDialog_prefix {
+ border-right: 0;
+ border-radius: 3px 0 0 3px;
+}
+.mx_CreateGroupDialog_suffix {
+ border-left: 0;
+ border-radius: 0 3px 3px 0;
+}
+.mx_CreateRoomDialog_details {
+ margin-top: 15px;
+}
+.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary {
+ outline: none;
+ list-style: none;
+ font-weight: 600;
+ cursor: pointer;
+ color: #0dbd8b;
+}
+.mx_CreateRoomDialog_details
+ .mx_CreateRoomDialog_details_summary::-webkit-details-marker {
+ display: none;
+}
+.mx_CreateRoomDialog_details > div {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ margin: 5px 0;
+}
+.mx_CreateRoomDialog_details > div input[type="checkbox"] {
+ margin-right: 10px;
+}
+.mx_CreateRoomDialog_label {
+ text-align: left;
+ padding-bottom: 12px;
+}
+.mx_CreateRoomDialog_input_container {
+ padding-right: 20px;
+}
+.mx_CreateRoomDialog_input {
+ font-size: 1.5rem;
+ border-radius: 3px;
+ border: 1px solid #e7e7e7;
+ padding: 9px;
+ color: #2e2f32;
+ background-color: #fff;
+ width: 100%;
+}
+.mx_CreateRoomDialog_aliasContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin: 10px 0;
+}
+.mx_CreateRoomDialog_aliasContainer .mx_RoomAliasField {
+ margin: 0;
+}
+.mx_CreateRoomDialog.mx_Dialog_fixedWidth {
+ width: 450px;
+}
+.mx_CreateRoomDialog .mx_Dialog_content {
+ margin-bottom: 40px;
+}
+.mx_CreateRoomDialog .mx_Field_input label,
+.mx_CreateRoomDialog p {
+ color: #61708b;
+}
+.mx_CreateRoomDialog .mx_SettingsFlag {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_CreateRoomDialog .mx_SettingsFlag_label {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+ min-width: 0;
+ font-weight: 600;
+}
+.mx_CreateRoomDialog .mx_ToggleSwitch {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ margin-left: 30px;
+}
+.mx_CreateRoomDialog .mx_CreateRoomDialog_topic {
+ margin-bottom: 36px;
+}
+.mx_CreateRoomDialog .mx_Dialog_content > .mx_SettingsFlag {
+ margin-top: 24px;
+}
+.mx_CreateRoomDialog p {
+ margin: 0 85px 0 0;
+ font-size: 1.2rem;
+}
+.mx_DeactivateAccountDialog .mx_Dialog_content {
+ margin-bottom: 30px;
+}
+.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section {
+ margin-top: 60px;
+}
+.mx_DeactivateAccountDialog
+ .mx_DeactivateAccountDialog_input_section
+ .mx_Field {
+ width: 300px;
+}
+.mx_DevTools_content {
+ margin: 10px 0;
+}
+.mx_DevTools_ServersInRoomList_button {
+ cursor: default !important;
+}
+.mx_DevTools_RoomStateExplorer_query {
+ margin-bottom: 10px;
+}
+.mx_DevTools_RoomStateExplorer_button,
+.mx_DevTools_ServersInRoomList_button {
+ margin-bottom: 10px;
+ width: 100%;
+}
+.mx_DevTools_label_left {
+ float: left;
+}
+.mx_DevTools_label_right {
+ float: right;
+}
+.mx_DevTools_label_bottom {
+ clear: both;
+ border-bottom: 1px solid #e5e5e5;
+}
+.mx_DevTools_inputRow {
+ display: table-row;
+}
+.mx_DevTools_inputLabelCell {
+ display: table-cell;
+ font-weight: 700;
+ padding-right: 24px;
+}
+.mx_DevTools_inputCell {
+ display: table-cell;
+ width: 240px;
+}
+.mx_DevTools_inputCell input {
+ display: inline-block;
+ border: 0;
+ border-bottom: 1px solid hsla(0, 0%, 59.2%, 0.5);
+ padding: 0;
+ width: 240px;
+ color: rgba(74, 74, 74, 0.9);
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
+ font-size: 1.6rem;
+}
+.mx_DevTools_textarea {
+ font-size: 1.2rem;
+ max-width: 684px;
+ min-height: 250px;
+ padding: 10px;
+}
+.mx_DevTools_eventTypeStateKeyGroup {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+}
+.mx_DevTools_content .mx_Field_input:first-of-type {
+ margin-right: 42px;
+}
+.mx_DevTools_tgl {
+ display: none;
+}
+.mx_DevTools_tgl,
+.mx_DevTools_tgl *,
+.mx_DevTools_tgl + .mx_DevTools_tgl-btn,
+.mx_DevTools_tgl:after,
+.mx_DevTools_tgl :after,
+.mx_DevTools_tgl:before,
+.mx_DevTools_tgl :before {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_DevTools_tgl + .mx_DevTools_tgl-btn::-moz-selection,
+.mx_DevTools_tgl::-moz-selection,
+.mx_DevTools_tgl ::-moz-selection,
+.mx_DevTools_tgl:after::-moz-selection,
+.mx_DevTools_tgl :after::-moz-selection,
+.mx_DevTools_tgl:before::-moz-selection,
+.mx_DevTools_tgl :before::-moz-selection {
+ background: none;
+}
+.mx_DevTools_tgl + .mx_DevTools_tgl-btn::selection,
+.mx_DevTools_tgl::selection,
+.mx_DevTools_tgl ::selection,
+.mx_DevTools_tgl:after::selection,
+.mx_DevTools_tgl :after::selection,
+.mx_DevTools_tgl:before::selection,
+.mx_DevTools_tgl :before::selection {
+ background: none;
+}
+.mx_DevTools_tgl + .mx_DevTools_tgl-btn {
+ outline: 0;
+ display: block;
+ width: 7em;
+ height: 2em;
+ position: relative;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.mx_DevTools_tgl + .mx_DevTools_tgl-btn:after,
+.mx_DevTools_tgl + .mx_DevTools_tgl-btn:before {
+ position: relative;
+ display: block;
+ content: "";
+ width: 50%;
+ height: 100%;
+}
+.mx_DevTools_tgl + .mx_DevTools_tgl-btn:after {
+ left: 0;
+}
+.mx_DevTools_tgl + .mx_DevTools_tgl-btn:before {
+ display: none;
+}
+.mx_DevTools_tgl:checked + .mx_DevTools_tgl-btn:after {
+ left: 50%;
+}
+.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn {
+ padding: 2px;
+ -webkit-transition: all 0.2s ease;
+ transition: all 0.2s ease;
+ font-family: sans-serif;
+ -webkit-perspective: 100px;
+ perspective: 100px;
+}
+.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:after,
+.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:before {
+ display: inline-block;
+ -webkit-transition: all 0.4s ease;
+ transition: all 0.4s ease;
+ width: 100%;
+ text-align: center;
+ position: absolute;
+ line-height: 2em;
+ font-weight: 700;
+ color: #fff;
+ top: 0;
+ left: 0;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ border-radius: 4px;
+}
+.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:after {
+ content: attr(data-tg-on);
+ background: #02c66f;
+ -webkit-transform: rotateY(-180deg);
+ transform: rotateY(-180deg);
+}
+.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:before {
+ background: #ff3a19;
+ content: attr(data-tg-off);
+}
+.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:active:before {
+ -webkit-transform: rotateY(-20deg);
+ transform: rotateY(-20deg);
+}
+.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:before {
+ -webkit-transform: rotateY(180deg);
+ transform: rotateY(180deg);
+}
+.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:after {
+ -webkit-transform: rotateY(0);
+ transform: rotateY(0);
+ left: 0;
+ background: #7fc6a6;
+}
+.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:active:after {
+ -webkit-transform: rotateY(20deg);
+ transform: rotateY(20deg);
+}
+.mx_DevTools_VerificationRequest {
+ border: 1px solid #ccc;
+ border-radius: 3px;
+ padding: 1px 5px;
+ margin-bottom: 6px;
+ font-family: Inconsolata, Twemoji, Apple Color Emoji, Segoe UI Emoji, Courier,
+ monospace, Noto Color Emoji;
+}
+.mx_DevTools_VerificationRequest dl {
+ display: grid;
+ grid-template-columns: -webkit-max-content auto;
+ grid-template-columns: max-content auto;
+ margin: 0;
+}
+.mx_DevTools_VerificationRequest dd {
+ grid-column-start: 2;
+}
+.mx_DevTools_VerificationRequest dd:empty {
+ color: #666;
+}
+.mx_DevTools_VerificationRequest dd:empty:after {
+ content: "(empty)";
+}
+.mx_DevTools_VerificationRequest dt {
+ font-weight: 700;
+ grid-column-start: 1;
+}
+.mx_DevTools_VerificationRequest dt:after {
+ content: ":";
+}
+.mx_DevTools_SettingsExplorer table {
+ width: 100%;
+ table-layout: fixed;
+ border-collapse: collapse;
+}
+.mx_DevTools_SettingsExplorer table th {
+ border-bottom: 1px solid #0dbd8b;
+ text-align: left;
+}
+.mx_DevTools_SettingsExplorer table td,
+.mx_DevTools_SettingsExplorer table th {
+ width: 360px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.mx_DevTools_SettingsExplorer table td + td,
+.mx_DevTools_SettingsExplorer table th + th {
+ width: auto;
+}
+.mx_DevTools_SettingsExplorer table tr:hover {
+ background-color: rgba(13, 189, 139, 0.5);
+}
+.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_mutable {
+ background-color: #0dbd8b;
+}
+.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_immutable {
+ background-color: #ff4b55;
+}
+.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_edit {
+ float: right;
+ margin-right: 16px;
+}
+.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_warning {
+ border: 2px solid #ff4b55;
+ border-radius: 4px;
+ padding: 4px;
+ margin-bottom: 8px;
+}
+.mx_EditCommunityPrototypeDialog.mx_Dialog_fixedWidth {
+ width: 360px;
+}
+.mx_EditCommunityPrototypeDialog .mx_Dialog_content {
+ margin-bottom: 12px;
+}
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
+ display: block;
+ height: 32px;
+ font-size: 1.6rem;
+ line-height: 32px;
+}
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_EditCommunityPrototypeDialog_rowAvatar {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_EditCommunityPrototypeDialog_avatarContainer {
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_EditCommunityPrototypeDialog_avatarContainer
+ .mx_EditCommunityPrototypeDialog_avatar,
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_EditCommunityPrototypeDialog_avatarContainer
+ .mx_EditCommunityPrototypeDialog_placeholderAvatar {
+ width: 96px;
+ height: 96px;
+ border-radius: 96px;
+}
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_EditCommunityPrototypeDialog_avatarContainer
+ .mx_EditCommunityPrototypeDialog_placeholderAvatar {
+ background-color: #368bd6;
+}
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_EditCommunityPrototypeDialog_avatarContainer
+ .mx_EditCommunityPrototypeDialog_placeholderAvatar:before {
+ display: inline-block;
+ background-color: #fff;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 96px;
+ mask-size: 96px;
+ width: 96px;
+ height: 96px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ content: "";
+ vertical-align: middle;
+ -webkit-mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
+ mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
+}
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_EditCommunityPrototypeDialog_tip {
+ margin-left: 20px;
+}
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_EditCommunityPrototypeDialog_tip
+ > b,
+.mx_EditCommunityPrototypeDialog
+ .mx_Dialog_content
+ .mx_EditCommunityPrototypeDialog_tip
+ > span {
+ display: block;
+ color: #61708b;
+}
+.mx_FeedbackDialog hr {
+ margin: 24px 0;
+ border-color: #e7e7e7;
+}
+.mx_FeedbackDialog .mx_Dialog_content {
+ margin-bottom: 24px;
+}
+.mx_FeedbackDialog .mx_Dialog_content > h2 {
+ margin-bottom: 32px;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_section {
+ position: relative;
+ padding-left: 52px;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_section > p {
+ color: #8d99a5;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link {
+ padding: 0;
+ font-size: inherit;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link,
+.mx_FeedbackDialog .mx_FeedbackDialog_section a {
+ color: #0dbd8b;
+ text-decoration: underline;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_section:after,
+.mx_FeedbackDialog .mx_FeedbackDialog_section:before {
+ content: "";
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ left: 0;
+ top: 0;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_section:before {
+ background-color: #c1c6cd;
+ border-radius: 20px;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_section:after {
+ background: #fff;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 24px;
+ mask-size: 24px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_reportBug:after {
+ -webkit-mask-image: url(../../img/feather-customised/bug.3dc7afa.svg);
+ mask-image: url(../../img/feather-customised/bug.3dc7afa.svg);
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ font-size: 20px;
+ -webkit-transition: font-size 1s, border 0.5s;
+ transition: font-size 1s, border 0.5s;
+ border-radius: 50%;
+ border: 2px solid transparent;
+ margin-top: 12px;
+ margin-bottom: 24px;
+ vertical-align: top;
+ cursor: pointer;
+}
+.mx_FeedbackDialog
+ .mx_FeedbackDialog_rateApp
+ .mx_RadioButton
+ input[type="radio"]
+ + div {
+ display: none;
+}
+.mx_FeedbackDialog
+ .mx_FeedbackDialog_rateApp
+ .mx_RadioButton
+ .mx_RadioButton_content {
+ background: #c1c6cd;
+ width: 40px;
+ height: 40px;
+ text-align: center;
+ line-height: 40px;
+ border-radius: 20px;
+ margin: 5px;
+}
+.mx_FeedbackDialog
+ .mx_FeedbackDialog_rateApp
+ .mx_RadioButton
+ .mx_RadioButton_spacer {
+ display: none;
+}
+.mx_FeedbackDialog
+ .mx_FeedbackDialog_rateApp
+ .mx_RadioButton
+ + .mx_RadioButton {
+ margin-left: 16px;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton_checked {
+ font-size: 24px;
+ border-color: #0dbd8b;
+}
+.mx_FeedbackDialog .mx_FeedbackDialog_rateApp:after {
+ -webkit-mask-image: url(../../img/element-icons/feedback.a91241e.svg);
+ mask-image: url(../../img/element-icons/feedback.a91241e.svg);
+}
+.mx_GroupAddressPicker_checkboxContainer {
+ margin-top: 10px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_HostSignupDialog {
+ width: 90vw;
+ max-width: 580px;
+ height: 80vh;
+ max-height: 600px;
+ background-color: #fff;
+}
+.mx_HostSignupDialog .mx_HostSignupDialog_info {
+ text-align: center;
+}
+.mx_HostSignupDialog
+ .mx_HostSignupDialog_info
+ .mx_HostSignupDialog_content_top {
+ margin-bottom: 24px;
+}
+.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_paragraphs {
+ text-align: left;
+ padding-left: 25%;
+ padding-right: 25%;
+}
+.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons {
+ margin-bottom: 24px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_HostSignupDialog
+ .mx_HostSignupDialog_info
+ .mx_HostSignupDialog_buttons
+ button {
+ padding: 12px;
+ margin: 0 16px;
+}
+.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: baseline;
+ -ms-flex-align: baseline;
+ align-items: baseline;
+}
+.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer img {
+ padding-right: 5px;
+}
+.mx_HostSignupDialog iframe {
+ width: 100%;
+ height: 100%;
+ border: none;
+ background-color: #fff;
+ min-height: 540px;
+}
+.mx_HostSignupDialog_text_dark {
+ color: #2e2f32;
+}
+.mx_HostSignupDialog_text_light {
+ color: #737d8c;
+}
+.mx_HostSignup_maximize_button {
+ -webkit-mask: url(../../img/feather-customised/maximise.dc32127.svg);
+ mask: url(../../img/feather-customised/maximise.dc32127.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: cover;
+ mask-size: cover;
+ right: 10px;
+}
+.mx_HostSignup_maximize_button,
+.mx_HostSignup_minimize_button {
+ width: 14px;
+ height: 14px;
+ background-color: #c1c1c1;
+ cursor: pointer;
+ position: absolute;
+ top: 10px;
+}
+.mx_HostSignup_minimize_button {
+ -webkit-mask: url(../../img/feather-customised/minimise.aec9142.svg);
+ mask: url(../../img/feather-customised/minimise.aec9142.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: cover;
+ mask-size: cover;
+ right: 25px;
+}
+.mx_HostSignup_persisted {
+ width: 90vw;
+ max-width: 580px;
+ height: 80vh;
+ max-height: 600px;
+ top: 0;
+ left: 0;
+ position: fixed;
+ display: none;
+}
+.mx_HostSignupDialog_minimized {
+ position: fixed;
+ bottom: 80px;
+ right: 26px;
+ width: 314px;
+ height: 217px;
+ overflow: hidden;
+}
+.mx_HostSignupDialog_minimized.mx_Dialog {
+ padding: 12px;
+}
+.mx_HostSignupDialog_minimized .mx_Dialog_title {
+ text-align: left !important;
+ padding-left: 20px;
+ font-size: 1.5rem;
+}
+.mx_HostSignupDialog_minimized iframe {
+ width: 100%;
+ height: 100%;
+ border: none;
+ background-color: #fff;
+}
+.mx_IncomingSasDialog_opponentProfile_image {
+ position: relative;
+}
+.mx_IncomingSasDialog_opponentProfile h2 {
+ display: inline-block;
+ margin-left: 10px;
+}
+.mx_InviteDialog_addressBar {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+.mx_InviteDialog_addressBar .mx_InviteDialog_editor {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ width: 100%;
+ background-color: #f3f8fd;
+ border-radius: 4px;
+ min-height: 25px;
+ padding-left: 8px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+}
+.mx_InviteDialog_addressBar .mx_InviteDialog_editor .mx_InviteDialog_userTile {
+ margin: 6px 6px 0 0;
+ display: inline-block;
+ min-width: -webkit-max-content;
+ min-width: -moz-max-content;
+ min-width: max-content;
+}
+.mx_InviteDialog_addressBar .mx_InviteDialog_editor > input[type="text"] {
+ margin: 6px 0 !important;
+ height: 24px;
+ line-height: 2.4rem;
+ font-size: 1.4rem;
+ padding-left: 12px;
+ border: 0 !important;
+ outline: 0 !important;
+ resize: none;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ min-width: 40%;
+ -webkit-box-flex: 1 !important;
+ -ms-flex: 1 !important;
+ flex: 1 !important;
+ color: #2e2f32 !important;
+}
+.mx_InviteDialog_addressBar .mx_InviteDialog_goButton {
+ min-width: 48px;
+ margin-left: 10px;
+ height: 25px;
+ line-height: 2.5rem;
+}
+.mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner .mx_Spinner {
+ width: 20px;
+ height: 20px;
+ margin-left: 5px;
+ display: inline-block;
+ vertical-align: middle;
+}
+.mx_InviteDialog_section {
+ padding-bottom: 10px;
+}
+.mx_InviteDialog_section h3 {
+ font-size: 1.2rem;
+ color: #61708b;
+ font-weight: 700;
+ text-transform: uppercase;
+}
+.mx_InviteDialog_section .mx_InviteDialog_subname {
+ margin-bottom: 10px;
+ margin-top: -10px;
+ font-size: 1.2rem;
+ color: #61708b;
+}
+.mx_InviteDialog_roomTile {
+ cursor: pointer;
+ padding: 5px 10px;
+}
+.mx_InviteDialog_roomTile:hover {
+ background-color: #f3f8fd;
+ border-radius: 4px;
+}
+.mx_InviteDialog_roomTile * {
+ vertical-align: middle;
+}
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack {
+ display: inline-block;
+ position: relative;
+ width: 36px;
+ height: 36px;
+}
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack > * {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected {
+ width: 36px;
+ height: 36px;
+ border-radius: 36px;
+ background-color: #368bd6;
+ display: inline-block;
+ position: relative;
+}
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected:before {
+ content: "";
+ width: 24px;
+ height: 24px;
+ grid-column: 1;
+ grid-row: 1;
+ -webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
+ mask-image: url(../../img/feather-customised/check.5745b4e.svg);
+ -webkit-mask-size: 100%;
+ mask-size: 100%;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ position: absolute;
+ top: 6px;
+ left: 6px;
+ background-color: #fff;
+}
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_nameStack {
+ display: inline-block;
+}
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_name {
+ font-weight: 600;
+ font-size: 1.4rem;
+ color: #2e2f32;
+ margin-left: 7px;
+}
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_userId {
+ font-size: 1.2rem;
+ color: #61708b;
+ margin-left: 7px;
+}
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_time {
+ text-align: right;
+ font-size: 1.2rem;
+ color: #61708b;
+ float: right;
+ line-height: 3.6rem;
+}
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_highlight {
+ font-weight: 900;
+}
+.mx_InviteDialog_userTile {
+ margin-right: 8px;
+}
+.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill {
+ background-color: #368bd6;
+ border-radius: 12px;
+ display: inline-block;
+ height: 24px;
+ line-height: 2.4rem;
+ padding-left: 8px;
+ padding-right: 8px;
+ color: #fff;
+}
+.mx_InviteDialog_userTile
+ .mx_InviteDialog_userTile_pill
+ .mx_InviteDialog_userTile_avatar {
+ border-radius: 20px;
+ position: relative;
+ left: -5px;
+ top: 2px;
+}
+.mx_InviteDialog_userTile
+ .mx_InviteDialog_userTile_pill
+ .mx_InviteDialog_userTile_name,
+.mx_InviteDialog_userTile
+ .mx_InviteDialog_userTile_pill
+ img.mx_InviteDialog_userTile_avatar {
+ vertical-align: top;
+}
+.mx_InviteDialog_userTile
+ .mx_InviteDialog_userTile_pill
+ .mx_InviteDialog_userTile_threepidAvatar {
+ background-color: #fff;
+}
+.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove {
+ display: inline-block;
+ margin-left: 4px;
+}
+.mx_InviteDialog {
+ height: 590px;
+ padding-left: 20px;
+}
+.mx_InviteDialog_userSections {
+ margin-top: 10px;
+ overflow-y: auto;
+ padding-right: 45px;
+ height: 455px;
+}
+.mx_InviteDialog_addressBar,
+.mx_InviteDialog_helpText {
+ margin-right: 45px;
+}
+.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link {
+ padding: 0;
+}
+.mx_KeyboardShortcutsDialog {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ margin-bottom: -50px;
+ max-height: 1100px;
+}
+.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category {
+ width: 33.3333%;
+ margin: 0 0 40px;
+}
+.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category > div {
+ padding-left: 5px;
+}
+.mx_KeyboardShortcutsDialog h3 {
+ margin: 0 0 10px;
+}
+.mx_KeyboardShortcutsDialog h5 {
+ margin: 15px 0 5px;
+ font-weight: 400;
+}
+.mx_KeyboardShortcutsDialog kbd {
+ padding: 5px;
+ border-radius: 4px;
+ background-color: #f3f8fd;
+ margin-right: 5px;
+ min-width: 20px;
+ text-align: center;
+ display: inline-block;
+ border: 1px solid #e9edf1;
+ -webkit-box-shadow: 0 2px #e9edf1;
+ box-shadow: 0 2px #e9edf1;
+ margin-bottom: 4px;
+ text-transform: capitalize;
+}
+.mx_KeyboardShortcutsDialog kbd + kbd {
+ margin-left: 5px;
+}
+.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_inline div {
+ display: inline;
+}
+.mx_MessageEditHistoryDialog .mx_Dialog_header > .mx_Dialog_title {
+ text-align: center;
+}
+.mx_MessageEditHistoryDialog {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ max-height: 60vh;
+}
+.mx_MessageEditHistoryDialog_scrollPanel {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+.mx_MessageEditHistoryDialog_error {
+ color: #ff4b55;
+ text-align: center;
+}
+.mx_MessageEditHistoryDialog_edits {
+ list-style-type: none;
+ font-size: 1.4rem;
+ padding: 0;
+ color: #2e2f32;
+}
+.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_deletion,
+.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_insertion {
+ padding: 0 2px;
+}
+.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_deletion {
+ color: #ff4c55;
+ background-color: rgba(255, 76, 85, 0.1);
+ text-decoration: line-through;
+}
+.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_insertion {
+ color: #1aa97b;
+ background-color: rgba(26, 169, 123, 0.1);
+ text-decoration: underline;
+}
+.mx_MessageEditHistoryDialog_edits .mx_EventTile_content,
+.mx_MessageEditHistoryDialog_edits .mx_EventTile_line {
+ margin-right: 0;
+}
+.mx_MessageEditHistoryDialog_edits .mx_MessageActionBar .mx_AccessibleButton {
+ font-size: 1rem;
+ padding: 0 8px;
+}
+.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning {
+ margin-bottom: 24px;
+}
+.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning > img {
+ vertical-align: middle;
+ margin-right: 8px;
+}
+.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons {
+ float: right;
+ margin-top: 24px;
+}
+.mx_ModalWidgetDialog
+ .mx_ModalWidgetDialog_buttons
+ .mx_AccessibleButton
+ + .mx_AccessibleButton {
+ margin-left: 8px;
+}
+.mx_ModalWidgetDialog iframe {
+ width: 100%;
+ height: 450px;
+ border: 0;
+ border-radius: 8px;
+}
+.mx_NewSessionReviewDialog_header {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-top: 0;
+}
+.mx_NewSessionReviewDialog_headerIcon {
+ width: 24px;
+ height: 24px;
+ margin-right: 4px;
+ position: relative;
+}
+.mx_NewSessionReviewDialog_deviceName {
+ font-weight: 600;
+}
+.mx_NewSessionReviewDialog_deviceID {
+ font-size: 1.2rem;
+ color: #8d99a5;
+}
+.mx_RegistrationEmailPromptDialog {
+ width: 417px;
+}
+.mx_RegistrationEmailPromptDialog .mx_Dialog_content {
+ margin-bottom: 24px;
+ color: #8d99a5;
+}
+.mx_RegistrationEmailPromptDialog .mx_Dialog_primary {
+ width: 100%;
+}
+.mx_RoomSettingsDialog_settingsIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
+ mask-image: url(../../img/element-icons/settings.6b381af.svg);
+}
+.mx_RoomSettingsDialog_securityIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/security.66f2fa6.svg);
+ mask-image: url(../../img/element-icons/security.66f2fa6.svg);
+}
+.mx_RoomSettingsDialog_rolesIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/room/settings/roles.bad9a9e.svg);
+ mask-image: url(../../img/element-icons/room/settings/roles.bad9a9e.svg);
+}
+.mx_RoomSettingsDialog_notificationsIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+ mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+}
+.mx_RoomSettingsDialog_bridgesIcon:before {
+ -webkit-mask-image: url(../../img/feather-customised/bridge.b2ca042.svg);
+ mask-image: url(../../img/feather-customised/bridge.b2ca042.svg);
+}
+.mx_RoomSettingsDialog_warningIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/room/settings/advanced.e079c15.svg);
+ mask-image: url(../../img/element-icons/room/settings/advanced.e079c15.svg);
+}
+.mx_RoomSettingsDialog .mx_Dialog_title {
+ -ms-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ margin: 0 auto;
+ padding-right: 80px;
+}
+.mx_RoomSettingsDialog
+ .mx_AvatarSetting_avatar
+ .mx_AvatarSetting_avatarPlaceholder:before {
+ -webkit-mask: url(../../img/feather-customised/image.a8671b8.svg);
+ mask: url(../../img/feather-customised/image.a8671b8.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 36px;
+ mask-size: 36px;
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_RoomSettingsDialog_BridgeList {
+ padding: 0;
+}
+.mx_RoomSettingsDialog_BridgeList .mx_AccessibleButton {
+ display: inline;
+ margin: 0;
+ padding: 0;
+}
+.mx_RoomSettingsDialog_BridgeList li {
+ list-style-type: none;
+ padding: 5px;
+ margin-bottom: 8px;
+ border: 1px solid transparent;
+ border-radius: 5px;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-icon {
+ float: left;
+ padding-right: 10px;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-icon * {
+ border-radius: 5px;
+ border: 1px solid #e3e8f0;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-icon .noProtocolIcon {
+ width: 48px;
+ height: 48px;
+ background: #e3e8f0;
+ border-radius: 5px;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon {
+ float: left;
+ margin-right: 5px;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon img {
+ border-radius: 5px;
+ border-width: 1px;
+ border-color: transparent;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon span {
+ left: auto;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-data {
+ display: inline-block;
+ width: 85%;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-data > h3 {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 16pt;
+ color: #2e2f32;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-data > * {
+ margin-top: 4px;
+ margin-bottom: 0;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details {
+ color: #2e2f32;
+ font-weight: 600;
+}
+.mx_RoomSettingsDialog_BridgeList
+ li
+ .column-data
+ .workspace-channel-details
+ .channel {
+ margin-left: 5px;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-data .metadata {
+ color: #61708b;
+ margin-bottom: 0;
+ overflow-y: visible;
+ text-overflow: ellipsis;
+ white-space: normal;
+ padding: 0;
+}
+.mx_RoomSettingsDialog_BridgeList li .column-data .metadata > li {
+ padding: 0;
+ border: 0;
+}
+.mx_RoomUpgradeDialog {
+ padding-right: 70px;
+}
+.mx_RoomUpgradeWarningDialog {
+ max-width: 38vw;
+ width: 38vw;
+}
+.mx_RoomUpgradeWarningDialog .mx_SettingsFlag {
+ font-weight: 700;
+}
+.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_ToggleSwitch {
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: 8px;
+ float: right;
+}
+.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_SettingsFlag_label {
+ display: inline-block;
+ vertical-align: middle;
+}
+.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content {
+ padding-right: 85px;
+ color: #2e2f32;
+}
+.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content hr {
+ border-color: #2e2f32;
+ opacity: 0.1;
+ border-bottom: none;
+}
+.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul {
+ padding: 16px;
+}
+.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul li:nth-child(n + 2) {
+ margin-top: 16px;
+}
+.mx_ServerOfflineDialog
+ .mx_ServerOfflineDialog_content
+ .mx_ServerOfflineDialog_content_context
+ .mx_ServerOfflineDialog_content_context_timestamp {
+ display: inline-block;
+ width: 115px;
+ color: #61708b;
+ line-height: 24px;
+ vertical-align: top;
+}
+.mx_ServerOfflineDialog
+ .mx_ServerOfflineDialog_content
+ .mx_ServerOfflineDialog_content_context
+ .mx_ServerOfflineDialog_content_context_timeline {
+ display: inline-block;
+ width: calc(100% - 155px);
+}
+.mx_ServerOfflineDialog
+ .mx_ServerOfflineDialog_content
+ .mx_ServerOfflineDialog_content_context
+ .mx_ServerOfflineDialog_content_context_timeline
+ .mx_ServerOfflineDialog_content_context_timeline_header
+ span {
+ margin-left: 8px;
+ vertical-align: middle;
+}
+.mx_ServerOfflineDialog
+ .mx_ServerOfflineDialog_content
+ .mx_ServerOfflineDialog_content_context
+ .mx_ServerOfflineDialog_content_context_timeline
+ .mx_ServerOfflineDialog_content_context_txn {
+ position: relative;
+ margin-top: 8px;
+}
+.mx_ServerOfflineDialog
+ .mx_ServerOfflineDialog_content
+ .mx_ServerOfflineDialog_content_context
+ .mx_ServerOfflineDialog_content_context_timeline
+ .mx_ServerOfflineDialog_content_context_txn
+ .mx_ServerOfflineDialog_content_context_txn_desc {
+ width: calc(100% - 100px);
+}
+.mx_ServerOfflineDialog
+ .mx_ServerOfflineDialog_content
+ .mx_ServerOfflineDialog_content_context
+ .mx_ServerOfflineDialog_content_context_timeline
+ .mx_ServerOfflineDialog_content_context_txn
+ .mx_AccessibleButton {
+ float: right;
+ padding: 0;
+}
+.mx_ServerPickerDialog {
+ width: 468px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_ServerPickerDialog .mx_Dialog_content {
+ margin-bottom: 0;
+}
+.mx_ServerPickerDialog .mx_Dialog_content > p {
+ color: #737d8c;
+ font-size: 1.4rem;
+ margin: 16px 0;
+}
+.mx_ServerPickerDialog .mx_Dialog_content > p:first-of-type {
+ margin-bottom: 40px;
+}
+.mx_ServerPickerDialog .mx_Dialog_content > p:last-of-type {
+ margin: 0 24px 24px;
+}
+.mx_ServerPickerDialog .mx_Dialog_content > h4 {
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: #737d8c;
+ margin-left: 8px;
+}
+.mx_ServerPickerDialog .mx_Dialog_content > a {
+ color: #0dbd8b;
+ margin-left: 8px;
+}
+.mx_ServerPickerDialog
+ .mx_ServerPickerDialog_otherHomeserverRadio
+ input[type="radio"]
+ + div {
+ margin-top: auto;
+ margin-bottom: auto;
+}
+.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver {
+ border-top: none;
+ border-left: none;
+ border-right: none;
+ border-radius: unset;
+}
+.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > input {
+ padding-left: 0;
+}
+.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > label {
+ margin-left: 0;
+}
+.mx_ServerPickerDialog .mx_AccessibleButton_kind_primary {
+ width: calc(100% - 64px);
+ margin: 0 8px;
+ padding: 15px 18px;
+}
+.mx_SetEmailDialog_email_input {
+ border-radius: 3px;
+ border: 1px solid #e7e7e7;
+ padding: 9px;
+ color: rgba(74, 74, 74, 0.9);
+ background-color: #fff;
+ font-size: 1.5rem;
+ width: 100%;
+ max-width: 280px;
+ margin-bottom: 10px;
+}
+.mx_SetEmailDialog_email_input:focus {
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ border: 1px solid #0dbd8b;
+}
+.mx_RoomSettingsDialog,
+.mx_UserSettingsDialog {
+ width: 90vw;
+ max-width: 1000px;
+ height: 80vh;
+}
+.mx_RoomSettingsDialog .mx_TabbedView,
+.mx_UserSettingsDialog .mx_TabbedView {
+ top: 65px;
+}
+.mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,
+.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ min-width: 580px;
+ padding-right: 100px;
+ padding-bottom: 100px;
+}
+.mx_RoomSettingsDialog .mx_Dialog_title,
+.mx_UserSettingsDialog .mx_Dialog_title {
+ margin-bottom: 24px;
+}
+.mx_ShareDialog hr {
+ margin-top: 25px;
+ margin-bottom: 25px;
+ border-color: #747474;
+}
+.mx_ShareDialog_content {
+ margin: 10px 0;
+}
+.mx_ShareDialog_matrixto {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ border-radius: 5px;
+ border: 1px solid #747474;
+ margin-bottom: 10px;
+ margin-top: 30px;
+ padding: 10px;
+}
+.mx_ShareDialog_matrixto a {
+ text-decoration: none;
+}
+.mx_ShareDialog_matrixto_link {
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.mx_ShareDialog_matrixto_copy {
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ cursor: pointer;
+ margin-left: 20px;
+ display: inherit;
+}
+.mx_ShareDialog_matrixto_copy > div {
+ -webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
+ mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
+ background-color: #2e2f32;
+ margin-left: 5px;
+ width: 20px;
+ height: 20px;
+ background-repeat: no-repeat;
+}
+.mx_ShareDialog_split {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+}
+.mx_ShareDialog_qrcode_container {
+ float: left;
+ height: 256px;
+ width: 256px;
+ margin-right: 64px;
+}
+.mx_ShareDialog_qrcode_container + .mx_ShareDialog_social_container {
+ width: 299px;
+}
+.mx_ShareDialog_social_container {
+ display: inline-block;
+}
+.mx_ShareDialog_social_icon {
+ display: inline-grid;
+ margin-right: 10px;
+ margin-bottom: 10px;
+}
+.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 {
+ margin-bottom: 2px;
+}
+.mx_SlashCommandHelpDialog .mx_Dialog_content {
+ margin-top: 12px;
+ margin-bottom: 34px;
+}
+.mx_SpaceSettingsDialog {
+ width: 480px;
+ color: #2e2f32;
+}
+.mx_SpaceSettingsDialog .mx_SpaceSettings_errorText {
+ font-weight: 600;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #ff4b55;
+ margin-bottom: 28px;
+}
+.mx_SpaceSettingsDialog .mx_ToggleSwitch {
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: 16px;
+}
+.mx_SpaceSettingsDialog .mx_AccessibleButton_kind_danger {
+ margin-top: 28px;
+}
+.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-top: 64px;
+}
+.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton {
+ display: inline-block;
+}
+.mx_SpaceSettingsDialog
+ .mx_SpaceSettingsDialog_buttons
+ .mx_AccessibleButton_kind_link {
+ margin-left: auto;
+}
+.mx_SpaceSettingsDialog .mx_AccessibleButton_hasKind {
+ padding: 8px 22px;
+}
+.mx_TabbedIntegrationManagerDialog .mx_Dialog {
+ width: 60%;
+ height: 70%;
+ overflow: hidden;
+ padding: 0;
+ max-width: none;
+ max-height: none;
+ position: relative;
+}
+.mx_TabbedIntegrationManagerDialog_container {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+.mx_TabbedIntegrationManagerDialog_container
+ .mx_TabbedIntegrationManagerDialog_currentManager {
+ width: 100%;
+ height: 100%;
+ border-top: 1px solid #0dbd8b;
+}
+.mx_TabbedIntegrationManagerDialog_container
+ .mx_TabbedIntegrationManagerDialog_currentManager
+ iframe {
+ background-color: #fff;
+ border: 0;
+ width: 100%;
+ height: 100%;
+}
+.mx_TabbedIntegrationManagerDialog_tab {
+ display: inline-block;
+ border: 1px solid #0dbd8b;
+ border-bottom: 0;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ padding: 10px 8px;
+ margin-right: 5px;
+}
+.mx_TabbedIntegrationManagerDialog_currentTab {
+ background-color: #0dbd8b;
+ color: #fff;
+}
+.mx_TermsDialog_forIntegrationManager .mx_Dialog {
+ width: 60%;
+ height: 70%;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_TermsDialog_termsTableHeader {
+ font-weight: 700;
+ text-align: left;
+}
+.mx_TermsDialog_termsTable {
+ font-size: 1.2rem;
+ width: 100%;
+}
+.mx_TermsDialog_service,
+.mx_TermsDialog_summary {
+ padding-right: 10px;
+}
+.mx_TermsDialog_link {
+ display: inline-block;
+ -webkit-mask-image: url(../../img/external-link.a8d3e9b.svg);
+ mask-image: url(../../img/external-link.a8d3e9b.svg);
+ background-color: #0dbd8b;
+ width: 10px;
+ height: 10px;
+}
+.mx_UntrustedDeviceDialog .mx_Dialog_title {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_UntrustedDeviceDialog .mx_Dialog_title .mx_E2EIcon {
+ margin-left: 0;
+}
+.mx_UploadConfirmDialog_fileIcon {
+ margin-right: 5px;
+}
+.mx_UploadConfirmDialog_previewOuter {
+ text-align: center;
+}
+.mx_UploadConfirmDialog_previewInner {
+ display: inline-block;
+ text-align: left;
+}
+.mx_UploadConfirmDialog_imagePreview {
+ max-height: 300px;
+ max-width: 100%;
+ border-radius: 4px;
+ border: 1px solid #c1c1c1;
+}
+.mx_UserSettingsDialog_settingsIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
+ mask-image: url(../../img/element-icons/settings.6b381af.svg);
+}
+.mx_UserSettingsDialog_appearanceIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
+ mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
+}
+.mx_UserSettingsDialog_voiceIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+ mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+}
+.mx_UserSettingsDialog_bellIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+ mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+}
+.mx_UserSettingsDialog_preferencesIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/settings/preference.82bfabd.svg);
+ mask-image: url(../../img/element-icons/settings/preference.82bfabd.svg);
+}
+.mx_UserSettingsDialog_securityIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/security.66f2fa6.svg);
+ mask-image: url(../../img/element-icons/security.66f2fa6.svg);
+}
+.mx_UserSettingsDialog_helpIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/settings/help.68b703f.svg);
+ mask-image: url(../../img/element-icons/settings/help.68b703f.svg);
+}
+.mx_UserSettingsDialog_labsIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);
+ mask-image: url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);
+}
+.mx_UserSettingsDialog_mjolnirIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
+ mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
+}
+.mx_UserSettingsDialog_flairIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/settings/flair.4227a88.svg);
+ mask-image: url(../../img/element-icons/settings/flair.4227a88.svg);
+}
+.mx_WidgetCapabilitiesPromptDialog .text-muted {
+ font-size: 1.2rem;
+}
+.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_content {
+ margin-bottom: 16px;
+}
+.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap {
+ margin-top: 20px;
+ font-size: 1.5rem;
+ line-height: 1.5rem;
+}
+.mx_WidgetCapabilitiesPromptDialog
+ .mx_WidgetCapabilitiesPromptDialog_cap
+ .mx_WidgetCapabilitiesPromptDialog_byline {
+ color: #61708b;
+ margin-left: 26px;
+ font-size: 1.2rem;
+ line-height: 1.2rem;
+}
+.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_buttons {
+ margin-top: 40px;
+}
+.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag {
+ line-height: calc(1.4rem + 14px);
+ color: #61708b;
+ font-size: 1.2rem;
+}
+.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 8px;
+ width: 3.2rem;
+ height: 1.5rem;
+}
+.mx_WidgetCapabilitiesPromptDialog
+ .mx_SettingsFlag
+ .mx_ToggleSwitch.mx_ToggleSwitch_on
+ > .mx_ToggleSwitch_ball {
+ left: calc(100% - 1.5rem);
+}
+.mx_WidgetCapabilitiesPromptDialog
+ .mx_SettingsFlag
+ .mx_ToggleSwitch
+ .mx_ToggleSwitch_ball {
+ width: 1.5rem;
+ height: 1.5rem;
+ border-radius: 1.5rem;
+}
+.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_SettingsFlag_label {
+ display: inline-block;
+ vertical-align: middle;
+}
+.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_ToggleSwitch {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 8px;
+}
+.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_SettingsFlag_label {
+ display: inline-block;
+ vertical-align: middle;
+}
+.mx_AccessSecretStorageDialog_reset {
+ position: relative;
+ padding-left: 24px;
+ margin-top: 7px;
+}
+.mx_AccessSecretStorageDialog_reset:before {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ height: 16px;
+ width: 16px;
+ left: 0;
+ top: 2px;
+ background-image: url(../../img/element-icons/warning-badge.de1033e.svg);
+}
+.mx_AccessSecretStorageDialog_reset .mx_AccessSecretStorageDialog_reset_link {
+ color: #ff4b55;
+}
+.mx_AccessSecretStorageDialog_titleWithIcon:before {
+ content: "";
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ margin-right: 8px;
+ position: relative;
+ top: 5px;
+ background-color: #2e2f32;
+}
+.mx_AccessSecretStorageDialog_resetBadge:before {
+ background-image: url(../../img/element-icons/warning-badge.de1033e.svg);
+ background-size: 24px;
+ background-color: transparent;
+}
+.mx_AccessSecretStorageDialog_secureBackupTitle:before {
+ -webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
+ mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
+}
+.mx_AccessSecretStorageDialog_securePhraseTitle:before {
+ -webkit-mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
+ mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
+}
+.mx_AccessSecretStorageDialog_keyStatus {
+ height: 30px;
+}
+.mx_AccessSecretStorageDialog_passPhraseInput {
+ width: 300px;
+ border: 1px solid #0dbd8b;
+ border-radius: 5px;
+ padding: 10px;
+}
+.mx_AccessSecretStorageDialog_recoveryKeyEntry {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
+ margin: 16px;
+}
+.mx_AccessSecretStorageDialog_recoveryKeyFeedback:before {
+ content: "";
+ display: inline-block;
+ vertical-align: bottom;
+ width: 20px;
+ height: 20px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ margin-right: 5px;
+}
+.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid {
+ color: #0dbd8b;
+}
+.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid:before {
+ -webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
+ mask-image: url(../../img/feather-customised/check.5745b4e.svg);
+ background-color: #0dbd8b;
+}
+.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid {
+ color: #ff4b55;
+}
+.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid:before {
+ -webkit-mask-image: url(../../img/feather-customised/x.9662221.svg);
+ mask-image: url(../../img/feather-customised/x.9662221.svg);
+ background-color: #ff4b55;
+}
+.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
+ display: none;
+}
+.mx_CreateCrossSigningDialog {
+ width: 560px;
+}
+.mx_CreateCrossSigningDialog details .mx_AccessibleButton {
+ margin: 1em 0;
+}
+.mx_CreateCrossSigningDialog .mx_Dialog_title,
+.mx_CreateKeyBackupDialog .mx_Dialog_title {
+ margin-bottom: 1em;
+}
+.mx_CreateKeyBackupDialog_primaryContainer {
+ padding: 20px;
+}
+.mx_CreateKeyBackupDialog_primaryContainer:after {
+ content: "";
+ clear: both;
+ display: block;
+}
+.mx_CreateKeyBackupDialog_passPhraseContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+}
+.mx_CreateKeyBackupDialog_passPhraseInput {
+ -webkit-box-flex: 0;
+ -ms-flex: none;
+ flex: none;
+ width: 250px;
+ border: 1px solid #0dbd8b;
+ border-radius: 5px;
+ padding: 10px;
+ margin-bottom: 1em;
+}
+.mx_CreateKeyBackupDialog_passPhraseMatch {
+ margin-left: 20px;
+}
+.mx_CreateKeyBackupDialog_recoveryKeyHeader {
+ margin-bottom: 1em;
+}
+.mx_CreateKeyBackupDialog_recoveryKeyContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_CreateKeyBackupDialog_recoveryKey {
+ width: 262px;
+ padding: 20px;
+ color: #888;
+ background-color: #f7f7f7;
+ margin-right: 12px;
+}
+.mx_CreateKeyBackupDialog_recoveryKeyButtons {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_CreateKeyBackupDialog_recoveryKeyButtons button {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ white-space: nowrap;
+}
+.mx_CreateKeyBackupDialog details .mx_AccessibleButton {
+ margin: 1em 0;
+}
+.mx_CreateSecretStorageDialog {
+ width: 560px;
+}
+.mx_CreateSecretStorageDialog .mx_SettingsFlag {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_CreateSecretStorageDialog .mx_SettingsFlag_label {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+ min-width: 0;
+ font-weight: 600;
+}
+.mx_CreateSecretStorageDialog .mx_ToggleSwitch {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ margin-left: 30px;
+}
+.mx_CreateSecretStorageDialog details .mx_AccessibleButton {
+ margin: 1em 0;
+}
+.mx_CreateSecretStorageDialog .mx_Dialog_title {
+ margin-bottom: 1em;
+}
+.mx_CreateSecretStorageDialog_titleWithIcon:before {
+ content: "";
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ margin-right: 8px;
+ position: relative;
+ top: 5px;
+ background-color: #2e2f32;
+}
+.mx_CreateSecretStorageDialog_secureBackupTitle:before {
+ -webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
+ mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
+}
+.mx_CreateSecretStorageDialog_securePhraseTitle:before {
+ -webkit-mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
+ mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
+}
+.mx_CreateSecretStorageDialog_centeredBody,
+.mx_CreateSecretStorageDialog_centeredTitle {
+ text-align: center;
+}
+.mx_CreateSecretStorageDialog_primaryContainer {
+ padding-top: 20px;
+}
+.mx_CreateSecretStorageDialog_primaryContainer:after {
+ content: "";
+ clear: both;
+ display: block;
+}
+.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton {
+ margin-bottom: 16px;
+ padding: 11px;
+}
+.mx_CreateSecretStorageDialog_optionTitle {
+ color: #45474a;
+ font-weight: 600;
+ font-size: 1.8rem;
+ padding-bottom: 10px;
+}
+.mx_CreateSecretStorageDialog_optionIcon {
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ margin-right: 8px;
+ position: relative;
+ top: 5px;
+ background-color: #2e2f32;
+}
+.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
+ -webkit-mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
+ mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
+}
+.mx_CreateSecretStorageDialog_optionIcon_secureBackup {
+ -webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
+ mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
+}
+.mx_CreateSecretStorageDialog_passPhraseContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+}
+.mx_Field.mx_CreateSecretStorageDialog_passPhraseField {
+ margin-top: 0;
+}
+.mx_CreateSecretStorageDialog_passPhraseMatch {
+ width: 200px;
+ margin-left: 20px;
+}
+.mx_CreateSecretStorageDialog_recoveryKeyContainer {
+ width: 380px;
+ margin-left: auto;
+ margin-right: auto;
+}
+.mx_CreateSecretStorageDialog_recoveryKey {
+ font-weight: 700;
+ text-align: center;
+ padding: 20px;
+ color: #888;
+ background-color: #f7f7f7;
+ border-radius: 6px;
+ word-spacing: 1em;
+ margin-bottom: 20px;
+}
+.mx_CreateSecretStorageDialog_recoveryKeyButtons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
+ width: 160px;
+ padding-left: 0;
+ padding-right: 0;
+ white-space: nowrap;
+}
+.mx_CreateSecretStorageDialog_continueSpinner {
+ margin-top: 33px;
+ text-align: right;
+}
+.mx_CreateSecretStorageDialog_continueSpinner img {
+ width: 20px;
+ height: 20px;
+}
+.mx_KeyBackupFailedDialog .mx_Dialog_title {
+ margin-bottom: 32px;
+}
+.mx_KeyBackupFailedDialog_title {
+ position: relative;
+ padding-left: 45px;
+ padding-bottom: 10px;
+}
+.mx_KeyBackupFailedDialog_title:before {
+ -webkit-mask: url(../../img/e2e/lock-warning-filled.993fb6c.svg);
+ mask: url(../../img/e2e/lock-warning-filled.993fb6c.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #2e2f32;
+ content: "";
+ position: absolute;
+ top: -6px;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+.mx_KeyBackupFailedDialog .mx_Dialog_buttons {
+ margin-top: 36px;
+}
+.mx_RestoreKeyBackupDialog_keyStatus {
+ height: 30px;
+}
+.mx_RestoreKeyBackupDialog_primaryContainer {
+ padding: 20px;
+}
+.mx_RestoreKeyBackupDialog_passPhraseInput,
+.mx_RestoreKeyBackupDialog_recoveryKeyInput {
+ width: 300px;
+ border: 1px solid #0dbd8b;
+ border-radius: 5px;
+ padding: 10px;
+}
+.mx_RestoreKeyBackupDialog_content > div {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ min-height: 110px;
+}
+.mx_NetworkDropdown {
+ height: 32px;
+ position: relative;
+ padding-right: 32px;
+ margin-left: auto;
+ margin-right: 9px;
+ margin-top: 12px;
+}
+.mx_NetworkDropdown,
+.mx_NetworkDropdown .mx_AccessibleButton {
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+}
+.mx_NetworkDropdown_menu {
+ min-width: 204px;
+ margin: 0;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-radius: 4px;
+ border: 1px solid #c1c1c1;
+ background-color: #fff;
+ max-height: calc(100vh - 20px);
+ overflow-y: auto;
+}
+.mx_NetworkDropdown_menu_network {
+ font-weight: 700;
+}
+.mx_NetworkDropdown_server {
+ padding: 12px 0;
+ border-bottom: 1px solid #9fa9ba;
+}
+.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title {
+ padding: 0 10px;
+ font-size: 1.5rem;
+ font-weight: 600;
+ line-height: 2rem;
+ margin-bottom: 4px;
+ position: relative;
+}
+.mx_NetworkDropdown_server
+ .mx_NetworkDropdown_server_title
+ .mx_AccessibleButton {
+ position: absolute;
+ display: inline;
+ right: 10px;
+ height: 16px;
+ width: 16px;
+ margin-top: 2px;
+}
+.mx_NetworkDropdown_server
+ .mx_NetworkDropdown_server_title
+ .mx_AccessibleButton:after {
+ content: "";
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/feather-customised/x.9662221.svg);
+ mask-image: url(../../img/feather-customised/x.9662221.svg);
+ background-color: #ff4b55;
+}
+.mx_NetworkDropdown_server .mx_NetworkDropdown_server_subtitle {
+ padding: 0 10px;
+ font-size: 1rem;
+ line-height: 1.4rem;
+ margin-top: -4px;
+ margin-bottom: 4px;
+ color: #61708b;
+}
+.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network {
+ font-size: 1.2rem;
+ line-height: 1.6rem;
+ padding: 4px 10px;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+.mx_NetworkDropdown_server
+ .mx_NetworkDropdown_server_network[aria-checked="true"]:after {
+ content: "";
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ right: 10px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
+ mask-image: url(../../img/feather-customised/check.5745b4e.svg);
+ background-color: #0dbd8b;
+}
+.mx_NetworkDropdown_server_add:hover,
+.mx_NetworkDropdown_server_network:hover {
+ background-color: #f3f8fd;
+}
+.mx_NetworkDropdown_server_add {
+ padding: 16px 10px 16px 32px;
+ position: relative;
+ border-radius: 0 0 4px 4px;
+}
+.mx_NetworkDropdown_server_add:before {
+ content: "";
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ left: 7px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/feather-customised/plus.38ae979.svg);
+ mask-image: url(../../img/feather-customised/plus.38ae979.svg);
+ background-color: #61708b;
+}
+.mx_NetworkDropdown_handle {
+ position: relative;
+}
+.mx_NetworkDropdown_handle:after {
+ content: "";
+ position: absolute;
+ width: 26px;
+ height: 26px;
+ right: -27.5px;
+ top: -3px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
+ mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
+ background-color: #2e2f32;
+}
+.mx_NetworkDropdown_handle .mx_NetworkDropdown_handle_server {
+ color: #61708b;
+ font-size: 1.2rem;
+}
+.mx_NetworkDropdown_dialog .mx_Dialog {
+ width: 45vw;
+}
+.mx_AccessibleButton {
+ cursor: pointer;
+}
+.mx_AccessibleButton_disabled {
+ cursor: default;
+}
+.mx_AccessibleButton_hasKind {
+ padding: 7px 18px;
+ text-align: center;
+ border-radius: 8px;
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ font-size: 1.4rem;
+}
+.mx_AccessibleButton_kind_primary {
+ color: #fff;
+ background-color: #0dbd8b;
+ font-weight: 600;
+}
+.mx_AccessibleButton_kind_primary_outline {
+ color: #0dbd8b;
+ background-color: #fff;
+ border: 1px solid #0dbd8b;
+ font-weight: 600;
+}
+.mx_AccessibleButton_kind_secondary {
+ color: #0dbd8b;
+ font-weight: 600;
+}
+.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,
+.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled {
+ opacity: 0.4;
+}
+.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
+ padding: 5px 12px;
+ color: #fff;
+ background-color: #0dbd8b;
+}
+.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
+ opacity: 0.4;
+}
+.mx_AccessibleButton_kind_danger {
+ color: #fff;
+ background-color: #ff4b55;
+}
+.mx_AccessibleButton_kind_danger_outline {
+ color: #ff4b55;
+ background-color: #fff;
+ border: 1px solid #ff4b55;
+}
+.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
+ color: #fff;
+ background-color: #f5b6bb;
+}
+.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
+ color: #f5b6bb;
+ border-color: #f5b6bb;
+}
+.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
+ padding: 5px 12px;
+ color: #fff;
+ background-color: #ff4b55;
+}
+.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
+ color: #fff;
+ background-color: #f5b6bb;
+}
+.mx_AccessibleButton_kind_link {
+ color: #0dbd8b;
+ background-color: transparent;
+}
+.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled {
+ opacity: 0.4;
+}
+.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm {
+ padding: 5px 12px;
+ color: #0dbd8b;
+ background-color: transparent;
+}
+.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled {
+ opacity: 0.4;
+}
+.mx_AddressSelector {
+ position: absolute;
+ background-color: #fff;
+ width: 485px;
+ max-height: 116px;
+ overflow-y: auto;
+ border-radius: 3px;
+ border: 1px solid #0dbd8b;
+ cursor: pointer;
+ z-index: 1;
+}
+.mx_AddressSelector.mx_AddressSelector_empty {
+ display: none;
+}
+.mx_AddressSelector_addressListElement .mx_AddressTile {
+ background-color: #fff;
+ border: 1px solid #fff;
+}
+.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
+ background-color: #f2f5f8;
+}
+.mx_AddressSelector_addressListElement.mx_AddressSelector_selected
+ .mx_AddressTile {
+ background-color: #f2f5f8;
+ border: 1px solid #f2f5f8;
+}
+.mx_AddressTile {
+ display: inline-block;
+ border-radius: 3px;
+ background-color: rgba(74, 73, 74, 0.1);
+ border: 1px solid #e7e7e7;
+ line-height: 2.6rem;
+ color: #2e2f32;
+ font-size: 1.4rem;
+ font-weight: 400;
+ margin-right: 4px;
+}
+.mx_AddressTile.mx_AddressTile_error {
+ background-color: rgba(255, 0, 100, 0.1);
+ color: #ff4b55;
+ border-color: #ff4b55;
+}
+.mx_AddressTile_network {
+ padding-right: 4px;
+}
+.mx_AddressTile_avatar,
+.mx_AddressTile_network {
+ display: inline-block;
+ position: relative;
+ padding-left: 2px;
+ vertical-align: middle;
+}
+.mx_AddressTile_avatar {
+ padding-right: 7px;
+}
+.mx_AddressTile_mx {
+ display: inline-block;
+ margin: 0;
+ border: 0;
+ padding: 0;
+}
+.mx_AddressTile_name {
+ display: inline-block;
+ padding-right: 4px;
+ font-weight: 600;
+ overflow: hidden;
+ height: 26px;
+ vertical-align: middle;
+}
+.mx_AddressTile_name.mx_AddressTile_justified {
+ width: 180px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+}
+.mx_AddressTile_id {
+ display: inline-block;
+ padding-right: 11px;
+}
+.mx_AddressTile_id.mx_AddressTile_justified {
+ width: 200px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+}
+.mx_AddressTile_unknownMx {
+ display: inline-block;
+ font-weight: 600;
+ padding-right: 11px;
+}
+.mx_AddressTile_unknownMxl.mx_AddressTile_justified {
+ width: 380px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+}
+.mx_AddressTile_email {
+ display: inline-block;
+ font-weight: 600;
+ padding-right: 11px;
+}
+.mx_AddressTile_email.mx_AddressTile_justified {
+ width: 200px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+}
+.mx_AddressTile_unknown {
+ display: inline-block;
+ padding-right: 11px;
+}
+.mx_AddressTile_unknown.mx_AddressTile_justified {
+ width: 380px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+}
+.mx_AddressTile_dismiss {
+ display: inline-block;
+ padding-right: 11px;
+ padding-left: 1px;
+ cursor: pointer;
+}
+.mx_AddressTile_dismiss object {
+ pointer-events: none;
+}
+.mx_DesktopBuildsNotice {
+ text-align: center;
+ padding: 0 16px;
+}
+.mx_DesktopBuildsNotice > * {
+ vertical-align: middle;
+}
+.mx_DesktopBuildsNotice > img {
+ margin-right: 8px;
+}
+.mx_desktopCapturerSourcePicker {
+ overflow: hidden;
+}
+.mx_desktopCapturerSourcePicker_tabLabels {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 0 0 8px;
+}
+.mx_desktopCapturerSourcePicker_tabLabel,
+.mx_desktopCapturerSourcePicker_tabLabel_selected {
+ width: 100%;
+ text-align: center;
+ border-radius: 8px;
+ padding: 8px 0;
+ font-size: 1.3rem;
+}
+.mx_desktopCapturerSourcePicker_tabLabel_selected {
+ background-color: #0dbd8b;
+ color: #fff;
+}
+.mx_desktopCapturerSourcePicker_panel {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ height: 500px;
+ overflow: overlay;
+}
+.mx_desktopCapturerSourcePicker_stream_button {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ margin: 8px;
+ border-radius: 4px;
+}
+.mx_desktopCapturerSourcePicker_stream_button:focus,
+.mx_desktopCapturerSourcePicker_stream_button:hover {
+ background: #fff;
+}
+.mx_desktopCapturerSourcePicker_stream_thumbnail {
+ margin: 4px;
+ width: 312px;
+}
+.mx_desktopCapturerSourcePicker_stream_name {
+ margin: 0 4px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ width: 312px;
+}
+.mx_DirectorySearchBox {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ padding-left: 9px;
+ padding-right: 9px;
+}
+.mx_DirectorySearchBox_joinButton {
+ display: table-cell;
+ padding: 3px 10px;
+ background-color: #f2f5f8;
+ border-radius: 3px;
+ background-image: url(../../img/icon-return.cb24475.svg);
+ background-position: 8px 70%;
+ background-repeat: no-repeat;
+ text-indent: 18px;
+ font-weight: 600;
+ font-size: 1.2rem;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: pointer;
+}
+.mx_DirectorySearchBox_clear {
+ background-color: #ff4b55;
+ -webkit-mask: url(../../img/cancel.4b9715b.svg);
+ mask: url(../../img/cancel.4b9715b.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 10px;
+ mask-size: 10px;
+ width: 15px;
+ height: 15px;
+ cursor: pointer;
+}
+.mx_Dropdown {
+ position: relative;
+ color: #2e2f32;
+}
+.mx_Dropdown_disabled {
+ opacity: 0.3;
+}
+.mx_Dropdown_input {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ position: relative;
+ border-radius: 3px;
+ border: 1px solid #c7c7c7;
+ font-size: 1.2rem;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.mx_Dropdown_input.mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+}
+.mx_Dropdown_input:focus {
+ border-color: #238cf5;
+}
+.mx_Dropdown_input.mx_AccessibleButton:focus {
+ -webkit-filter: none;
+ filter: none;
+}
+.mx_Dropdown_arrow {
+ width: 10px;
+ height: 6px;
+ padding-right: 9px;
+ -webkit-mask: url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);
+ mask: url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #2e2f32;
+}
+.mx_Dropdown_option {
+ height: 35px;
+ line-height: 3.5rem;
+ padding-left: 8px;
+ padding-right: 8px;
+}
+.mx_Dropdown_input > .mx_Dropdown_option {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_Dropdown_input > .mx_Dropdown_option,
+.mx_Dropdown_option div {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.mx_Dropdown_option .mx_Dropdown_option_emoji,
+.mx_Dropdown_option img {
+ margin: 5px;
+ width: 16px;
+ vertical-align: middle;
+}
+.mx_Dropdown_option_emoji {
+ font-size: 1.6rem;
+ line-height: 1.6rem;
+}
+input.mx_Dropdown_option,
+input.mx_Dropdown_option:focus {
+ font-weight: 400;
+ border: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ width: 60%;
+}
+.mx_Dropdown_menu {
+ position: absolute;
+ left: -1px;
+ right: -1px;
+ top: 100%;
+ z-index: 2;
+ margin: 0;
+ padding: 0;
+ border-radius: 3px;
+ border: 1px solid #238cf5;
+ background-color: #fff;
+ max-height: 200px;
+ overflow-y: auto;
+}
+.mx_Dropdown_menu .mx_Dropdown_option {
+ height: auto;
+ min-height: 35px;
+}
+.mx_Dropdown_menu .mx_Dropdown_option_highlight {
+ background-color: #ddd;
+}
+.mx_Dropdown_searchPrompt {
+ font-weight: 400;
+ margin-left: 5px;
+ margin-bottom: 5px;
+}
+.mx_EditableItemList {
+ margin-top: 12px;
+ margin-bottom: 10px;
+}
+.mx_EditableItem {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-bottom: 5px;
+}
+.mx_EditableItem_delete {
+ -webkit-box-ordinal-group: 4;
+ -ms-flex-order: 3;
+ order: 3;
+ margin-right: 5px;
+ cursor: pointer;
+ vertical-align: middle;
+ width: 14px;
+ height: 14px;
+ -webkit-mask-image: url(../../img/feather-customised/cancel.23c2689.svg);
+ mask-image: url(../../img/feather-customised/cancel.23c2689.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #ff4b55;
+ -webkit-mask-size: 100%;
+ mask-size: 100%;
+}
+.mx_EditableItem_email {
+ vertical-align: middle;
+}
+.mx_EditableItem_promptText {
+ margin-right: 10px;
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+}
+.mx_EditableItem_confirmBtn {
+ margin-right: 5px;
+}
+.mx_EditableItem_item {
+ -webkit-box-flex: 1;
+ -ms-flex: auto 1 0px;
+ flex: auto 1 0;
+ -webkit-box-ordinal-group: 2;
+ -ms-flex-order: 1;
+ order: 1;
+ width: calc(100% - 14px);
+ overflow-x: hidden;
+ text-overflow: ellipsis;
+}
+.mx_EditableItemList_label {
+ margin-bottom: 5px;
+}
+.mx_ErrorBoundary {
+ width: 100%;
+ height: 100%;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_ErrorBoundary,
+.mx_ErrorBoundary_body {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_ErrorBoundary_body {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ max-width: 400px;
+}
+.mx_ErrorBoundary_body .mx_AccessibleButton {
+ margin-top: 5px;
+}
+.mx_EventListSummary {
+ position: relative;
+}
+.mx_TextualEvent.mx_EventListSummary_summary {
+ font-size: 1.4rem;
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+}
+.mx_EventListSummary_avatars {
+ display: inline-block;
+ margin-right: 8px;
+ padding-top: 8px;
+ line-height: 1.2rem;
+}
+.mx_EventListSummary_avatars .mx_BaseAvatar {
+ margin-right: -4px;
+ cursor: pointer;
+}
+.mx_EventListSummary_toggle {
+ color: #0dbd8b;
+ cursor: pointer;
+ float: right;
+ margin-right: 10px;
+ margin-top: 8px;
+}
+.mx_EventListSummary_line {
+ border-bottom: 1px solid transparent;
+ margin-left: 63px;
+ line-height: 3rem;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventListSummary {
+ font-size: 1.3rem;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventListSummary .mx_EventTile_line {
+ line-height: 2rem;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventListSummary_line {
+ line-height: 2.2rem;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventListSummary_toggle {
+ margin-top: 3px;
+}
+.mx_MatrixChat_useCompactLayout .mx_TextualEvent.mx_EventListSummary_summary {
+ font-size: 1.3rem;
+}
+.mx_FacePile .mx_FacePile_faces {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: reverse;
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse;
+ vertical-align: middle;
+}
+.mx_FacePile .mx_FacePile_faces > .mx_FacePile_face + .mx_FacePile_face {
+ margin-right: -8px;
+}
+.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_image {
+ border: 1px solid #fff;
+}
+.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_initial {
+ margin: 1px;
+}
+.mx_FacePile .mx_FacePile_faces .mx_FacePile_more {
+ position: relative;
+ border-radius: 100%;
+ width: 30px;
+ height: 30px;
+ background-color: hsla(0, 0%, 91%, 0.77);
+}
+.mx_FacePile .mx_FacePile_faces .mx_FacePile_more:before {
+ content: "";
+ z-index: 1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: inherit;
+ width: inherit;
+ background: #8d99a5;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
+ mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
+}
+.mx_FacePile .mx_FacePile_summary {
+ margin-left: 12px;
+ font-size: 1.4rem;
+ line-height: 2.4rem;
+ color: #8d99a5;
+}
+.mx_Field {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ min-width: 0;
+ position: relative;
+ margin: 1em 0;
+ border-radius: 4px;
+ -webkit-transition: border-color 0.25s;
+ transition: border-color 0.25s;
+ border: 1px solid #e7e7e7;
+}
+.mx_Field_prefix {
+ border-right: 1px solid #e7e7e7;
+}
+.mx_Field_postfix {
+ border-left: 1px solid #e7e7e7;
+}
+.mx_Field input,
+.mx_Field select,
+.mx_Field textarea {
+ font-weight: 400;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
+ font-size: 1.4rem;
+ border: none;
+ border-radius: 4px;
+ padding: 8px 9px;
+ color: #2e2f32;
+ background-color: #fff;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ min-width: 0;
+}
+.mx_Field select {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+}
+.mx_Field_select:before {
+ content: "";
+ position: absolute;
+ top: 15px;
+ right: 10px;
+ width: 10px;
+ height: 6px;
+ -webkit-mask: url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);
+ mask: url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #2e2f32;
+ z-index: 1;
+ pointer-events: none;
+}
+.mx_Field:focus-within {
+ border-color: #238cf5;
+}
+.mx_Field input:focus,
+.mx_Field select:focus,
+.mx_Field textarea:focus {
+ outline: 0;
+}
+.mx_Field input::-webkit-input-placeholder,
+.mx_Field textarea::-webkit-input-placeholder {
+ -webkit-transition: color 0.25s ease-in 0s;
+ transition: color 0.25s ease-in 0s;
+ color: transparent;
+}
+.mx_Field input::-moz-placeholder,
+.mx_Field textarea::-moz-placeholder {
+ -moz-transition: color 0.25s ease-in 0s;
+ transition: color 0.25s ease-in 0s;
+ color: transparent;
+}
+.mx_Field input:-ms-input-placeholder,
+.mx_Field textarea:-ms-input-placeholder {
+ -ms-transition: color 0.25s ease-in 0s;
+ transition: color 0.25s ease-in 0s;
+ color: transparent;
+}
+.mx_Field input::-ms-input-placeholder,
+.mx_Field textarea::-ms-input-placeholder {
+ -ms-transition: color 0.25s ease-in 0s;
+ transition: color 0.25s ease-in 0s;
+ color: transparent;
+}
+.mx_Field input::placeholder,
+.mx_Field textarea::placeholder {
+ -webkit-transition: color 0.25s ease-in 0s;
+ transition: color 0.25s ease-in 0s;
+ color: transparent;
+}
+.mx_Field input:placeholder-shown:focus::-webkit-input-placeholder,
+.mx_Field textarea:placeholder-shown:focus::-webkit-input-placeholder {
+ -webkit-transition: color 0.25s ease-in 0.1s;
+ transition: color 0.25s ease-in 0.1s;
+ color: #888;
+}
+.mx_Field input:placeholder-shown:focus::-moz-placeholder,
+.mx_Field textarea:placeholder-shown:focus::-moz-placeholder {
+ -moz-transition: color 0.25s ease-in 0.1s;
+ transition: color 0.25s ease-in 0.1s;
+ color: #888;
+}
+.mx_Field input:placeholder-shown:focus:-ms-input-placeholder,
+.mx_Field textarea:placeholder-shown:focus:-ms-input-placeholder {
+ -ms-transition: color 0.25s ease-in 0.1s;
+ transition: color 0.25s ease-in 0.1s;
+ color: #888;
+}
+.mx_Field input:placeholder-shown:focus::-ms-input-placeholder,
+.mx_Field textarea:placeholder-shown:focus::-ms-input-placeholder {
+ -ms-transition: color 0.25s ease-in 0.1s;
+ transition: color 0.25s ease-in 0.1s;
+ color: #888;
+}
+.mx_Field input:-moz-placeholder-shown:focus::placeholder,
+.mx_Field textarea:-moz-placeholder-shown:focus::placeholder {
+ -moz-transition: color 0.25s ease-in 0.1s;
+ transition: color 0.25s ease-in 0.1s;
+ color: #888;
+}
+.mx_Field input:-ms-input-placeholder:focus::placeholder,
+.mx_Field textarea:-ms-input-placeholder:focus::placeholder {
+ -ms-transition: color 0.25s ease-in 0.1s;
+ transition: color 0.25s ease-in 0.1s;
+ color: #888;
+}
+.mx_Field input:placeholder-shown:focus::placeholder,
+.mx_Field textarea:placeholder-shown:focus::placeholder {
+ -webkit-transition: color 0.25s ease-in 0.1s;
+ transition: color 0.25s ease-in 0.1s;
+ color: #888;
+}
+.mx_Field label {
+ -webkit-transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
+ top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
+ transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
+ top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
+ color: #2e2f32;
+ background-color: transparent;
+ font-size: 1.4rem;
+ position: absolute;
+ left: 0;
+ top: 0;
+ margin: 7px 8px;
+ padding: 2px;
+ pointer-events: none;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ max-width: calc(100% - 20px);
+}
+.mx_Field input:not(:-moz-placeholder-shown) + label,
+.mx_Field textarea:not(:-moz-placeholder-shown) + label {
+ -moz-transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
+ top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
+ transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
+ top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
+ font-size: 1rem;
+ top: -13px;
+ padding: 0 2px;
+ background-color: #fff;
+ pointer-events: auto;
+}
+.mx_Field input:not(:-ms-input-placeholder) + label,
+.mx_Field textarea:not(:-ms-input-placeholder) + label {
+ -ms-transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
+ top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
+ transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
+ top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
+ font-size: 1rem;
+ top: -13px;
+ padding: 0 2px;
+ background-color: #fff;
+ pointer-events: auto;
+}
+.mx_Field_labelAlwaysTopLeft label,
+.mx_Field input:focus + label,
+.mx_Field input:not(:placeholder-shown) + label,
+.mx_Field select + label,
+.mx_Field textarea:focus + label,
+.mx_Field textarea:not(:placeholder-shown) + label {
+ -webkit-transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
+ top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
+ transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
+ top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
+ font-size: 1rem;
+ top: -13px;
+ padding: 0 2px;
+ background-color: #fff;
+ pointer-events: auto;
+}
+.mx_Field input:focus + label,
+.mx_Field select:focus + label,
+.mx_Field textarea:focus + label {
+ color: #238cf5;
+}
+.mx_Field input:disabled,
+.mx_Field input:disabled + label,
+.mx_Field select:disabled,
+.mx_Field select:disabled + label,
+.mx_Field textarea:disabled,
+.mx_Field textarea:disabled + label {
+ background-color: #fff;
+ color: #888;
+}
+.mx_Field_valid.mx_Field,
+.mx_Field_valid.mx_Field:focus-within {
+ border-color: #0dbd8b;
+}
+.mx_Field_valid.mx_Field:focus-within label,
+.mx_Field_valid.mx_Field label {
+ color: #0dbd8b;
+}
+.mx_Field_invalid.mx_Field,
+.mx_Field_invalid.mx_Field:focus-within {
+ border-color: #ff4b55;
+}
+.mx_Field_invalid.mx_Field:focus-within label,
+.mx_Field_invalid.mx_Field label {
+ color: #ff4b55;
+}
+.mx_Field_tooltip {
+ margin-top: -12px;
+ margin-left: 4px;
+ width: 200px;
+}
+.mx_Field_tooltip.mx_Field_valid {
+ -webkit-animation: mx_fadeout 1s 2s forwards;
+ animation: mx_fadeout 1s 2s forwards;
+}
+.mx_Field .mx_Dropdown_input {
+ border: initial;
+ border-radius: 0;
+ border-radius: initial;
+}
+.mx_Field .mx_CountryDropdown {
+ width: 7.8rem;
+}
+.mx_FormButton {
+ line-height: 1.6rem;
+ padding: 5px 15px;
+ font-size: 1.2rem;
+ height: -webkit-min-content;
+ height: -moz-min-content;
+ height: min-content;
+}
+.mx_FormButton:not(:last-child) {
+ margin-right: 8px;
+}
+.mx_FormButton.mx_AccessibleButton_kind_primary {
+ color: #0dbd8b;
+ background-color: rgba(3, 179, 129, 0.16);
+}
+.mx_FormButton.mx_AccessibleButton_kind_danger {
+ color: #ff4b55;
+ background-color: rgba(255, 75, 85, 0.16);
+}
+.mx_FormButton.mx_AccessibleButton_kind_secondary {
+ color: #737d8c;
+ border: 1px solid #737d8c;
+ background-color: unset;
+}
+.mx_ImageView {
+ width: 100%;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_ImageView,
+.mx_ImageView_image_wrapper {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ height: 100%;
+}
+.mx_ImageView_image_wrapper {
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ overflow: hidden;
+}
+.mx_ImageView_image {
+ pointer-events: all;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+}
+.mx_ImageView_panel {
+ width: 100%;
+ height: 68px;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+.mx_ImageView_info_wrapper,
+.mx_ImageView_panel {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_ImageView_info_wrapper {
+ pointer-events: all;
+ padding-left: 32px;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ color: #fff;
+}
+.mx_ImageView_info {
+ padding-left: 12px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_ImageView_info_sender {
+ font-weight: 700;
+}
+.mx_ImageView_toolbar {
+ padding-right: 16px;
+ pointer-events: all;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_ImageView_button {
+ margin-left: 24px;
+ display: block;
+}
+.mx_ImageView_button:before {
+ content: "";
+ height: 22px;
+ width: 22px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+ display: block;
+ background-color: #c1c6cd;
+}
+.mx_ImageView_button_rotateCW:before {
+ -webkit-mask-image: url(../../img/image-view/rotate-cw.60d903e.svg);
+ mask-image: url(../../img/image-view/rotate-cw.60d903e.svg);
+}
+.mx_ImageView_button_rotateCCW:before {
+ -webkit-mask-image: url(../../img/image-view/rotate-ccw.b28ae4a.svg);
+ mask-image: url(../../img/image-view/rotate-ccw.b28ae4a.svg);
+}
+.mx_ImageView_button_zoomOut:before {
+ -webkit-mask-image: url(../../img/image-view/zoom-out.8506f80.svg);
+ mask-image: url(../../img/image-view/zoom-out.8506f80.svg);
+}
+.mx_ImageView_button_zoomIn:before {
+ -webkit-mask-image: url(../../img/image-view/zoom-in.3b3f32e.svg);
+ mask-image: url(../../img/image-view/zoom-in.3b3f32e.svg);
+}
+.mx_ImageView_button_download:before {
+ -webkit-mask-image: url(../../img/image-view/download.2eac468.svg);
+ mask-image: url(../../img/image-view/download.2eac468.svg);
+}
+.mx_ImageView_button_more:before {
+ -webkit-mask-image: url(../../img/image-view/more.0427c6c.svg);
+ mask-image: url(../../img/image-view/more.0427c6c.svg);
+}
+.mx_ImageView_button_close {
+ border-radius: 100%;
+ background: #21262c;
+}
+.mx_ImageView_button_close:before {
+ width: 32px;
+ height: 32px;
+ -webkit-mask-image: url(../../img/image-view/close.97d1731.svg);
+ mask-image: url(../../img/image-view/close.97d1731.svg);
+ -webkit-mask-size: 40%;
+ mask-size: 40%;
+}
+.mx_InfoTooltip_icon,
+.mx_InfoTooltip_icon:before {
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+}
+.mx_InfoTooltip_icon:before {
+ background-color: #61708b;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 16px;
+ mask-size: 16px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ content: "";
+ vertical-align: middle;
+ -webkit-mask-image: url(../../img/element-icons/info.dc07e19.svg);
+ mask-image: url(../../img/element-icons/info.dc07e19.svg);
+}
+.mx_InlineSpinner {
+ display: inline;
+}
+.mx_InlineSpinner_spin img {
+ margin: 0 6px;
+ vertical-align: -3px;
+}
+.mx_InviteReason {
+ position: relative;
+ margin-bottom: 1em;
+}
+.mx_InviteReason .mx_InviteReason_reason {
+ visibility: visible;
+}
+.mx_InviteReason .mx_InviteReason_view {
+ display: none;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ cursor: pointer;
+ color: #737d8c;
+}
+.mx_InviteReason .mx_InviteReason_view:before {
+ content: "";
+ margin-right: 8px;
+ background-color: #737d8c;
+ -webkit-mask-image: url(../../img/feather-customised/eye.52aa0d2.svg);
+ mask-image: url(../../img/feather-customised/eye.52aa0d2.svg);
+ display: inline-block;
+ width: 18px;
+ height: 14px;
+}
+.mx_InviteReason_hidden .mx_InviteReason_reason {
+ visibility: hidden;
+}
+.mx_InviteReason_hidden .mx_InviteReason_view {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_ManageIntegsButton_error {
+ position: relative;
+ float: right;
+ cursor: not-allowed;
+}
+.mx_ManageIntegsButton_error img {
+ position: absolute;
+ right: -5px;
+ top: -5px;
+}
+.mx_ManageIntegsButton_errorPopup {
+ position: absolute;
+ top: 110%;
+ left: -275%;
+ width: 550%;
+ padding: 30%;
+ font-size: 10pt;
+ line-height: 1.5em;
+ border-radius: 5px;
+ background-color: #0dbd8b;
+ color: #fff;
+ text-align: center;
+ z-index: 1000;
+}
+.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup {
+ display: none;
+}
+.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup {
+ display: inline;
+}
+.mx_MiniAvatarUploader {
+ position: relative;
+ width: -webkit-min-content;
+ width: -moz-min-content;
+ width: min-content;
+}
+.mx_MiniAvatarUploader .mx_Tooltip {
+ display: inline-block;
+ position: absolute;
+ z-index: unset;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ left: 72px;
+ top: 0;
+}
+.mx_MiniAvatarUploader:after,
+.mx_MiniAvatarUploader:before {
+ content: "";
+ position: absolute;
+ height: 26px;
+ width: 26px;
+ right: -6px;
+ bottom: -6px;
+}
+.mx_MiniAvatarUploader:before {
+ background-color: #fff;
+ border-radius: 50%;
+ z-index: 1;
+}
+.mx_MiniAvatarUploader:after {
+ background-color: #737d8c;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url(../../img/element-icons/camera.a81a395.svg);
+ mask-image: url(../../img/element-icons/camera.a81a395.svg);
+ -webkit-mask-size: 16px;
+ mask-size: 16px;
+ z-index: 2;
+}
+.mx_MiniAvatarUploader.mx_MiniAvatarUploader_busy:after {
+ background: url(../../img/spinner.0b29ec9.gif) no-repeat 50%;
+ background-size: 80%;
+ -webkit-mask: unset;
+ mask: unset;
+}
+.mx_MiniAvatarUploader_input {
+ display: none;
+}
+.mx_PowerSelector {
+ width: 100%;
+}
+.mx_PowerSelector .mx_Field input,
+.mx_PowerSelector .mx_Field select {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+progress.mx_ProgressBar {
+ height: 6px;
+ width: 60px;
+ overflow: hidden;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ border: none;
+ border-radius: 6px;
+}
+progress.mx_ProgressBar::-moz-progress-bar {
+ border-radius: 6px;
+}
+progress.mx_ProgressBar::-webkit-progress-bar,
+progress.mx_ProgressBar::-webkit-progress-value {
+ border-radius: 6px;
+}
+progress.mx_ProgressBar {
+ color: #0dbd8b;
+}
+progress.mx_ProgressBar::-moz-progress-bar {
+ background-color: #0dbd8b;
+}
+progress.mx_ProgressBar::-webkit-progress-value {
+ background-color: #0dbd8b;
+}
+progress.mx_ProgressBar {
+ background-color: rgba(141, 151, 165, 0.2);
+}
+progress.mx_ProgressBar::-webkit-progress-bar {
+ background-color: rgba(141, 151, 165, 0.2);
+}
+progress.mx_ProgressBar ::-webkit-progress-value {
+ -webkit-transition: width 1s;
+ transition: width 1s;
+}
+progress.mx_ProgressBar ::-moz-progress-bar {
+ -moz-transition: padding-bottom 1s;
+ transition: padding-bottom 1s;
+ padding-bottom: var(--value);
+ transform-origin: 0 0;
+ transform: rotate(-90deg) translateX(-15px);
+ padding-left: 15px;
+ height: 0;
+}
+.mx_QRCode img {
+ border-radius: 8px;
+}
+.mx_ReplyThread {
+ margin-top: 0;
+}
+.mx_ReplyThread .mx_DateSeparator {
+ font-size: 1em !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-bottom: 1px;
+ bottom: -5px;
+}
+.mx_ReplyThread_show {
+ cursor: pointer;
+}
+blockquote.mx_ReplyThread {
+ margin-left: 0;
+ padding-left: 10px;
+ border-left: 4px solid #ddd;
+}
+.mx_ResizeHandle {
+ cursor: row-resize;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ z-index: 100;
+}
+.mx_ResizeHandle.mx_ResizeHandle_horizontal {
+ margin: 0 -5px;
+ padding: 0 5px;
+ cursor: col-resize;
+}
+.mx_ResizeHandle.mx_ResizeHandle_vertical {
+ margin: -5px 0;
+ padding: 5px 0;
+ cursor: row-resize;
+}
+.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
+ margin: 0 -10px 0 0;
+ padding: 0 8px 0 0;
+}
+.mx_ResizeHandle > div {
+ background: transparent;
+}
+.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
+ width: 1px;
+ height: 100%;
+}
+.mx_ResizeHandle.mx_ResizeHandle_vertical > div {
+ height: 1px;
+}
+.mx_AtRoomPill,
+.mx_GroupPill,
+.mx_RoomPill,
+.mx_UserPill {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ vertical-align: middle;
+ border-radius: 1.6rem;
+ line-height: 1.5rem;
+ padding-left: 0;
+}
+a.mx_Pill {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: calc(100% - 1ch);
+}
+.mx_Pill {
+ padding: 0.1rem 0.4em 0.1rem 0.1rem;
+ vertical-align: text-top;
+ line-height: 1.7rem;
+}
+.mx_EventTile_content .markdown-body a.mx_GroupPill,
+.mx_GroupPill {
+ color: #fff;
+ background-color: #aaa;
+}
+.mx_EventTile_content .markdown-body a.mx_Pill {
+ text-decoration: none;
+}
+.mx_EventTile_content .markdown-body a.mx_UserPill,
+.mx_UserPill {
+ color: #2e2f32;
+ background-color: rgba(0, 0, 0, 0.1);
+}
+.mx_UserPill_selected {
+ background-color: #0dbd8b !important;
+}
+.mx_EventTile_content .markdown-body a.mx_AtRoomPill,
+.mx_EventTile_content .mx_AtRoomPill,
+.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
+.mx_MessageComposer_input .mx_AtRoomPill {
+ color: #fff;
+ background-color: #ff4b55;
+}
+.mx_EventTile_content .markdown-body a.mx_GroupPill,
+.mx_EventTile_content .markdown-body a.mx_RoomPill,
+.mx_GroupPill,
+.mx_RoomPill {
+ color: #fff;
+ background-color: #aaa;
+}
+.mx_EventTile_body .mx_GroupPill,
+.mx_EventTile_body .mx_RoomPill,
+.mx_EventTile_body .mx_UserPill {
+ cursor: pointer;
+}
+.mx_AtRoomPill .mx_BaseAvatar,
+.mx_GroupPill .mx_BaseAvatar,
+.mx_RoomPill .mx_BaseAvatar,
+.mx_UserPill .mx_BaseAvatar {
+ position: relative;
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border-radius: 10rem;
+ margin-right: 0.24rem;
+}
+.mx_Markdown_BOLD {
+ font-weight: 700;
+}
+.mx_Markdown_ITALIC {
+ font-style: italic;
+}
+.mx_Markdown_CODE {
+ padding: 0.2em 0;
+ margin: 0;
+ font-size: 85%;
+ background-color: rgba(0, 0, 0, 0.04);
+ border-radius: 3px;
+}
+.mx_Markdown_HR {
+ display: block;
+ background: #e9e9e9;
+}
+.mx_Markdown_STRIKETHROUGH {
+ text-decoration: line-through;
+}
+.mx_RoleButton {
+ margin-left: 4px;
+ margin-right: 4px;
+ cursor: pointer;
+ display: inline-block;
+}
+.mx_RoleButton object {
+ pointer-events: none;
+}
+.mx_RoleButton_tooltip {
+ display: inline-block;
+ position: relative;
+ top: -25px;
+ left: 6px;
+}
+.mx_RoomAliasField {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ min-width: 0;
+ max-width: 100%;
+}
+.mx_RoomAliasField input {
+ width: 150px;
+ padding-left: 0;
+ padding-right: 0;
+}
+.mx_RoomAliasField input::-webkit-input-placeholder {
+ color: #888;
+ font-weight: 400;
+}
+.mx_RoomAliasField input::-moz-placeholder {
+ color: #888;
+ font-weight: 400;
+}
+.mx_RoomAliasField input:-ms-input-placeholder {
+ color: #888;
+ font-weight: 400;
+}
+.mx_RoomAliasField input::-ms-input-placeholder {
+ color: #888;
+ font-weight: 400;
+}
+.mx_RoomAliasField input::placeholder {
+ color: #888;
+ font-weight: 400;
+}
+.mx_RoomAliasField .mx_Field_postfix,
+.mx_RoomAliasField .mx_Field_prefix {
+ color: #888;
+ border-left: none;
+ border-right: none;
+ font-weight: 600;
+ padding: 9px 10px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.mx_RoomAliasField .mx_Field_postfix {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: calc(100% - 180px);
+}
+.mx_SSOButtons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_SSOButtons .mx_SSOButtons_row + .mx_SSOButtons_row {
+ margin-top: 16px;
+}
+.mx_SSOButtons .mx_SSOButton {
+ position: relative;
+ width: 100%;
+ padding: 7px 32px;
+ text-align: center;
+ border-radius: 8px;
+ display: inline-block;
+ font-size: 1.4rem;
+ font-weight: 600;
+ border: 1px solid #e7e7e7;
+ color: #2e2f32;
+}
+.mx_SSOButtons .mx_SSOButton > img {
+ -o-object-fit: contain;
+ object-fit: contain;
+ position: absolute;
+ left: 8px;
+ top: 4px;
+}
+.mx_SSOButtons .mx_SSOButton_default {
+ color: #0dbd8b;
+ background-color: #fff;
+ border-color: #0dbd8b;
+}
+.mx_SSOButtons .mx_SSOButton_default.mx_SSOButton_primary {
+ color: #fff;
+ background-color: #0dbd8b;
+}
+.mx_SSOButtons .mx_SSOButton_mini {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 50px;
+ height: 50px;
+ min-width: 50px;
+ padding: 12px;
+}
+.mx_SSOButtons .mx_SSOButton_mini > img {
+ left: 12px;
+ top: 12px;
+}
+.mx_SSOButtons .mx_SSOButton_mini + .mx_SSOButton_mini {
+ margin-left: 16px;
+}
+.mx_ServerPicker {
+ margin-bottom: 14px;
+ border-bottom: 1px solid rgba(141, 151, 165, 0.2);
+ display: grid;
+ grid-template-columns: auto -webkit-min-content;
+ grid-template-columns: auto min-content;
+ grid-template-rows: auto auto auto;
+ font-size: 1.4rem;
+ line-height: 2rem;
+}
+.mx_ServerPicker > h3 {
+ font-weight: 600;
+ margin: 0 0 20px;
+ grid-column: 1;
+ grid-row: 1;
+}
+.mx_ServerPicker .mx_ServerPicker_help {
+ width: 20px;
+ height: 20px;
+ background-color: #c1c6cd;
+ border-radius: 10px;
+ grid-column: 2;
+ grid-row: 1;
+ margin-left: auto;
+ text-align: center;
+ color: #fff;
+ font-size: 16px;
+ position: relative;
+}
+.mx_ServerPicker .mx_ServerPicker_help:before {
+ content: "";
+ width: 24px;
+ height: 24px;
+ position: absolute;
+ top: -2px;
+ left: -2px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url(../../img/element-icons/i.80d84f3.svg);
+ mask-image: url(../../img/element-icons/i.80d84f3.svg);
+ background: #fff;
+}
+.mx_ServerPicker .mx_ServerPicker_server {
+ color: #232f32;
+ grid-column: 1;
+ grid-row: 2;
+ margin-bottom: 16px;
+}
+.mx_ServerPicker .mx_ServerPicker_change {
+ padding: 0;
+ font-size: inherit;
+ grid-column: 2;
+ grid-row: 2;
+}
+.mx_ServerPicker .mx_ServerPicker_desc {
+ margin-top: -12px;
+ color: #8d99a5;
+ grid-column: 1/2;
+ grid-row: 3;
+ margin-bottom: 16px;
+}
+.mx_ServerPicker_helpDialog .mx_Dialog_content {
+ width: 456px;
+}
+.mx_Slider {
+ position: relative;
+ margin: 0;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+.mx_Slider_dotContainer {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+.mx_Slider_bar,
+.mx_Slider_dotContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_Slider_bar {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ position: absolute;
+ height: 1em;
+ width: 100%;
+ padding: 0 0.5em;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_Slider_bar > hr {
+ width: 100%;
+ height: 0.4em;
+ background-color: #c1c9d6;
+ border: 0;
+}
+.mx_Slider_selection {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ width: calc(100% - 1em);
+ height: 1em;
+ position: absolute;
+ pointer-events: none;
+}
+.mx_Slider_selectionDot {
+ position: absolute;
+ width: 1.1em;
+ height: 1.1em;
+ background-color: #0dbd8b;
+ border-radius: 50%;
+ -webkit-box-shadow: 0 0 6px #d3d3d3;
+ box-shadow: 0 0 6px #d3d3d3;
+ z-index: 10;
+}
+.mx_Slider_selection > hr {
+ margin: 0;
+ border: 0.2em solid #0dbd8b;
+}
+.mx_Slider_dot {
+ height: 1em;
+ width: 1em;
+ border-radius: 50%;
+ background-color: #c1c9d6;
+ z-index: 0;
+}
+.mx_Slider_dotActive {
+ background-color: #0dbd8b;
+}
+.mx_Slider_dotValue {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #c1c9d6;
+}
+.mx_Slider_labelContainer {
+ width: 1em;
+}
+.mx_Slider_label {
+ position: relative;
+ width: -webkit-fit-content;
+ width: -moz-fit-content;
+ width: fit-content;
+ left: -50%;
+}
+.mx_Spinner {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_MatrixChat_middlePanel .mx_Spinner {
+ height: auto;
+}
+.mx_Checkbox {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+}
+.mx_Checkbox input[type="checkbox"] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ margin: 0;
+ padding: 0;
+}
+.mx_Checkbox input[type="checkbox"] + label {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+.mx_Checkbox input[type="checkbox"] + label > .mx_Checkbox_background {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ position: relative;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ height: 1.6rem;
+ width: 1.6rem;
+ size: 0.5rem;
+ border: 0.15rem solid rgba(97, 112, 139, 0.5);
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-radius: 0.4rem;
+}
+.mx_Checkbox input[type="checkbox"] + label > .mx_Checkbox_background img {
+ display: none;
+ height: 100%;
+ width: 100%;
+ -webkit-filter: invert(100%);
+ filter: invert(100%);
+}
+.mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background {
+ background: #0dbd8b;
+ border-color: #0dbd8b;
+}
+.mx_Checkbox
+ input[type="checkbox"]:checked
+ + label
+ > .mx_Checkbox_background
+ img {
+ display: block;
+}
+.mx_Checkbox input[type="checkbox"] + label > :not(.mx_Checkbox_background) {
+ margin-left: 10px;
+}
+.mx_Checkbox input[type="checkbox"]:disabled + label {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+.mx_Checkbox
+ input[type="checkbox"]:checked:disabled
+ + label
+ > .mx_Checkbox_background {
+ background-color: #0dbd8b;
+ border-color: #0dbd8b;
+}
+.mx_Checkbox
+ input[type="checkbox"].focus-visible
+ + label
+ .mx_Checkbox_background {
+ outline-width: 2px;
+ outline-style: solid;
+ outline-color: Highlight;
+}
+@media (-webkit-min-device-pixel-ratio: 0) {
+ .mx_Checkbox
+ input[type="checkbox"].focus-visible
+ + label
+ .mx_Checkbox_background {
+ outline-color: -webkit-focus-ring-color;
+ outline-style: auto;
+ }
+}
+.mx_RadioButton {
+ position: relative;
+ -webkit-box-align: baseline;
+ -ms-flex-align: baseline;
+ align-items: baseline;
+}
+.mx_RadioButton,
+.mx_RadioButton > .mx_RadioButton_content {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+.mx_RadioButton > .mx_RadioButton_content {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ margin-left: 8px;
+ margin-right: 8px;
+}
+.mx_RadioButton .mx_RadioButton_spacer {
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ height: 1.6rem;
+ width: 1.6rem;
+}
+.mx_RadioButton > input[type="radio"] {
+ margin: 0;
+ padding: 0;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
+.mx_RadioButton > input[type="radio"] + div {
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ height: 1.6rem;
+ width: 1.6rem;
+ margin-left: 2px;
+ border: 0.15rem solid #61708b;
+ border-radius: 1.6rem;
+}
+.mx_RadioButton > input[type="radio"] + div > div {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ height: 0.8rem;
+ width: 0.8rem;
+ border-radius: 0.8rem;
+}
+.mx_RadioButton > input[type="radio"].focus-visible + div {
+ outline-width: 2px;
+ outline-style: solid;
+ outline-color: Highlight;
+}
+@media (-webkit-min-device-pixel-ratio: 0) {
+ .mx_RadioButton > input[type="radio"].focus-visible + div {
+ outline-color: -webkit-focus-ring-color;
+ outline-style: auto;
+ }
+}
+.mx_RadioButton > input[type="radio"]:checked + div {
+ border-color: #0dbd8b;
+}
+.mx_RadioButton > input[type="radio"]:checked + div > div {
+ background: #0dbd8b;
+}
+.mx_RadioButton > input[type="radio"]:disabled + div,
+.mx_RadioButton > input[type="radio"]:disabled + div + span {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+.mx_RadioButton > input[type="radio"]:disabled + div {
+ border-color: #61708b;
+}
+.mx_RadioButton > input[type="radio"]:checked:disabled + div > div {
+ background-color: #61708b;
+}
+.mx_RadioButton_outlined {
+ border: 1px solid #e3e8f0;
+ border-radius: 8px;
+}
+.mx_RadioButton_checked {
+ border-color: #0dbd8b;
+}
+.mx_SyntaxHighlight {
+ background: none !important;
+ color: #747474 !important;
+}
+.mx_TextWithTooltip_tooltip {
+ display: none;
+}
+.mx_ToggleSwitch {
+ -webkit-transition: background-color 0.2s ease-out 0.1s;
+ transition: background-color 0.2s ease-out 0.1s;
+ width: 4.4rem;
+ height: 2rem;
+ border-radius: 1.5rem;
+ padding: 2px;
+ background-color: #c1c9d6;
+ opacity: 0.5;
+}
+.mx_ToggleSwitch_enabled {
+ cursor: pointer;
+ opacity: 1;
+}
+.mx_ToggleSwitch.mx_ToggleSwitch_on {
+ background-color: #0dbd8b;
+}
+.mx_ToggleSwitch.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
+ left: calc(100% - 2rem);
+}
+.mx_ToggleSwitch_ball {
+ position: relative;
+ width: 2rem;
+ height: 2rem;
+ border-radius: 2rem;
+ background-color: #fff;
+ -webkit-transition: left 0.15s ease-out 0.1s;
+ transition: left 0.15s ease-out 0.1s;
+ left: 0;
+}
+@-webkit-keyframes mx_fadein {
+ 0% {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+@keyframes mx_fadein {
+ 0% {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+@-webkit-keyframes mx_fadeout {
+ 0% {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+@keyframes mx_fadeout {
+ 0% {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+.mx_Tooltip_chevron {
+ position: absolute;
+ left: -7px;
+ top: 10px;
+ width: 0;
+ height: 0;
+ border-top: 7px solid transparent;
+ border-right: 7px solid #e7e7e7;
+ border-bottom: 7px solid transparent;
+}
+.mx_Tooltip_chevron:after {
+ content: "";
+ width: 0;
+ height: 0;
+ border-top: 6px solid transparent;
+ border-right: 6px solid #fff;
+ border-bottom: 6px solid transparent;
+ position: absolute;
+ top: -6px;
+ left: 1px;
+}
+.mx_Tooltip {
+ position: fixed;
+ border-radius: 8px;
+ -webkit-box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
+ box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
+ z-index: 6000;
+ padding: 10px;
+ pointer-events: none;
+ line-height: 1.4rem;
+ font-size: 1.2rem;
+ font-weight: 500;
+ max-width: 200px;
+ word-break: break-word;
+ margin-right: 50px;
+ background-color: #27303a;
+ color: #fff;
+ border: 0;
+ text-align: center;
+}
+.mx_Tooltip,
+.mx_Tooltip .mx_Tooltip_chevron {
+ display: none;
+}
+.mx_Tooltip.mx_Tooltip_visible {
+ -webkit-animation: mx_fadein 0.2s forwards;
+ animation: mx_fadein 0.2s forwards;
+}
+.mx_Tooltip.mx_Tooltip_invisible {
+ -webkit-animation: mx_fadeout 0.1s forwards;
+ animation: mx_fadeout 0.1s forwards;
+}
+.mx_Field_tooltip {
+ background-color: #fff;
+ color: #2e2f32;
+ border: 1px solid #e7e7e7;
+ text-align: unset;
+}
+.mx_Field_tooltip .mx_Tooltip_chevron {
+ display: unset;
+}
+.mx_Tooltip_title {
+ font-weight: 600;
+}
+.mx_Tooltip_sub {
+ opacity: 0.7;
+ margin-top: 4px;
+}
+.mx_TooltipButton {
+ display: inline-block;
+ width: 11px;
+ height: 11px;
+ margin-left: 5px;
+ border: 2px solid #dbdbdb;
+ border-radius: 20px;
+ color: #dbdbdb;
+ -webkit-transition: opacity 0.2s ease-in;
+ transition: opacity 0.2s ease-in;
+ opacity: 0.6;
+ line-height: 1.1rem;
+ text-align: center;
+ cursor: pointer;
+}
+.mx_TooltipButton:hover {
+ opacity: 1;
+}
+.mx_TooltipButton_container {
+ position: relative;
+ top: -18px;
+ left: 4px;
+}
+.mx_TooltipButton_helpText {
+ width: 400px;
+ text-align: start;
+ line-height: 17px !important;
+}
+.mx_Validation {
+ position: relative;
+}
+.mx_Validation_details {
+ padding-left: 20px;
+ margin: 0;
+}
+.mx_Validation_description + .mx_Validation_details {
+ margin: 1em 0 0;
+}
+.mx_Validation_detail {
+ position: relative;
+ font-weight: 400;
+ list-style: none;
+ margin-bottom: 0.5em;
+}
+.mx_Validation_detail:last-child {
+ margin-bottom: 0;
+}
+.mx_Validation_detail:before {
+ content: "";
+ position: absolute;
+ width: 14px;
+ height: 14px;
+ top: 0;
+ left: -18px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_Validation_detail.mx_Validation_valid {
+ color: #0dbd8b;
+}
+.mx_Validation_detail.mx_Validation_valid:before {
+ -webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
+ mask-image: url(../../img/feather-customised/check.5745b4e.svg);
+ background-color: #0dbd8b;
+}
+.mx_Validation_detail.mx_Validation_invalid {
+ color: #ff4b55;
+}
+.mx_Validation_detail.mx_Validation_invalid:before {
+ -webkit-mask-image: url(../../img/feather-customised/x.9662221.svg);
+ mask-image: url(../../img/feather-customised/x.9662221.svg);
+ background-color: #ff4b55;
+}
+.mx_EmojiPicker {
+ width: 340px;
+ height: 450px;
+ border-radius: 4px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_EmojiPicker_body {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ overflow-y: scroll;
+ scrollbar-width: thin;
+ scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+.mx_EmojiPicker_header {
+ padding: 4px 8px 0;
+ border-bottom: 1px solid #e9edf1;
+}
+.mx_EmojiPicker_anchor {
+ padding: 8px 8px 6px;
+ border: none;
+ border-bottom: 2px solid transparent;
+ background-color: transparent;
+ border-radius: 4px 4px 0 0;
+ width: 36px;
+ height: 38px;
+}
+.mx_EmojiPicker_anchor:not(:disabled) {
+ cursor: pointer;
+}
+.mx_EmojiPicker_anchor:not(:disabled):hover {
+ background-color: #ddd;
+ border-bottom: 2px solid #0dbd8b;
+}
+.mx_EmojiPicker_anchor:before {
+ background-color: #2e2f32;
+ content: "";
+ display: inline-block;
+ -webkit-mask-size: 100%;
+ mask-size: 100%;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ width: 100%;
+ height: 100%;
+}
+.mx_EmojiPicker_anchor:disabled:before {
+ background-color: #ddd;
+}
+.mx_EmojiPicker_anchor_activity:before {
+ -webkit-mask-image: url(../../img/emojipicker/activity.921ec9f.svg);
+ mask-image: url(../../img/emojipicker/activity.921ec9f.svg);
+}
+.mx_EmojiPicker_anchor_custom:before {
+ -webkit-mask-image: url(../../img/emojipicker/custom.e1cd0fd.svg);
+ mask-image: url(../../img/emojipicker/custom.e1cd0fd.svg);
+}
+.mx_EmojiPicker_anchor_flags:before {
+ -webkit-mask-image: url(../../img/emojipicker/flags.1a8855e.svg);
+ mask-image: url(../../img/emojipicker/flags.1a8855e.svg);
+}
+.mx_EmojiPicker_anchor_foods:before {
+ -webkit-mask-image: url(../../img/emojipicker/foods.c6b220a.svg);
+ mask-image: url(../../img/emojipicker/foods.c6b220a.svg);
+}
+.mx_EmojiPicker_anchor_nature:before {
+ -webkit-mask-image: url(../../img/emojipicker/nature.6540b99.svg);
+ mask-image: url(../../img/emojipicker/nature.6540b99.svg);
+}
+.mx_EmojiPicker_anchor_objects:before {
+ -webkit-mask-image: url(../../img/emojipicker/objects.4d34f58.svg);
+ mask-image: url(../../img/emojipicker/objects.4d34f58.svg);
+}
+.mx_EmojiPicker_anchor_people:before {
+ -webkit-mask-image: url(../../img/emojipicker/people.e918580.svg);
+ mask-image: url(../../img/emojipicker/people.e918580.svg);
+}
+.mx_EmojiPicker_anchor_places:before {
+ -webkit-mask-image: url(../../img/emojipicker/places.7310322.svg);
+ mask-image: url(../../img/emojipicker/places.7310322.svg);
+}
+.mx_EmojiPicker_anchor_recent:before {
+ -webkit-mask-image: url(../../img/emojipicker/recent.13b42e2.svg);
+ mask-image: url(../../img/emojipicker/recent.13b42e2.svg);
+}
+.mx_EmojiPicker_anchor_symbols:before {
+ -webkit-mask-image: url(../../img/emojipicker/symbols.15a557d.svg);
+ mask-image: url(../../img/emojipicker/symbols.15a557d.svg);
+}
+.mx_EmojiPicker_anchor_visible {
+ border-bottom: 2px solid #0dbd8b;
+}
+.mx_EmojiPicker_search {
+ margin: 8px;
+ border-radius: 4px;
+ border: 1px solid #e7e7e7;
+ background-color: #fff;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_EmojiPicker_search input {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ border: none;
+ padding: 8px 12px;
+ border-radius: 4px 0;
+}
+.mx_EmojiPicker_search button {
+ border: none;
+ background-color: inherit;
+ margin: 0;
+ padding: 8px;
+ -ms-flex-item-align: center;
+ align-self: center;
+ width: 32px;
+ height: 32px;
+}
+.mx_EmojiPicker_search_clear {
+ cursor: pointer;
+}
+.mx_EmojiPicker_search_icon {
+ width: 16px;
+ margin: 8px;
+}
+.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear) {
+ pointer-events: none;
+}
+.mx_EmojiPicker_search_icon:after {
+ -webkit-mask: url(../../img/emojipicker/search.973c315.svg) no-repeat;
+ mask: url(../../img/emojipicker/search.973c315.svg) no-repeat;
+ -webkit-mask-size: 100%;
+ mask-size: 100%;
+ background-color: #2e2f32;
+ content: "";
+ display: inline-block;
+ width: 100%;
+ height: 100%;
+}
+.mx_EmojiPicker_search_clear:after {
+ -webkit-mask-image: url(../../img/emojipicker/delete.f7344c5.svg);
+ mask-image: url(../../img/emojipicker/delete.f7344c5.svg);
+}
+.mx_EmojiPicker_category {
+ padding: 0 12px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_EmojiPicker_category_label {
+ width: 304px;
+}
+.mx_EmojiPicker_list {
+ width: 304px;
+ padding: 0;
+ margin: 0;
+}
+.mx_EmojiPicker_item_wrapper {
+ display: inline-block;
+ list-style: none;
+ width: 38px;
+ cursor: pointer;
+}
+.mx_EmojiPicker_item {
+ display: inline-block;
+ font-size: 2rem;
+ padding: 5px;
+ width: 100%;
+ height: 100%;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ text-align: center;
+ border-radius: 4px;
+}
+.mx_EmojiPicker_item:hover {
+ background-color: #ddd;
+}
+.mx_EmojiPicker_item_selected {
+ color: rgba(0, 0, 0, 0.5);
+ border: 1px solid #0dbd8b;
+ padding: 4px;
+}
+.mx_EmojiPicker_category_label,
+.mx_EmojiPicker_preview_name {
+ font-size: 1.6rem;
+ font-weight: 600;
+ margin: 0;
+}
+.mx_EmojiPicker_footer {
+ border-top: 1px solid #e9edf1;
+ min-height: 72px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_EmojiPicker_preview_emoji {
+ font-size: 3.2rem;
+ padding: 8px 16px;
+}
+.mx_EmojiPicker_preview_text {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_EmojiPicker_name {
+ text-transform: capitalize;
+}
+.mx_EmojiPicker_shortcode {
+ color: #747474;
+ font-size: 1.4rem;
+}
+.mx_EmojiPicker_shortcode:after,
+.mx_EmojiPicker_shortcode:before {
+ content: ":";
+}
+.mx_EmojiPicker_quick {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-flex-pack: distribute;
+ justify-content: space-around;
+}
+.mx_EmojiPicker_quick_header .mx_EmojiPicker_name {
+ margin-right: 4px;
+}
+.mx_GroupPublicity_toggle {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin: 8px;
+}
+.mx_GroupPublicity_toggle .mx_GroupTile {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ cursor: pointer;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 100%;
+}
+.mx_GroupPublicity_toggle .mx_ToggleSwitch {
+ float: right;
+}
+.mx_GroupRoomTile {
+ position: relative;
+ color: #2e2f32;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_GroupRoomList_wrapper {
+ padding: 10px;
+}
+.mx_GroupUserSettings_groupPublicity_scrollbox {
+ height: 200px;
+ border: 1px solid transparent;
+ border-radius: 3px;
+ overflow: hidden;
+}
+.mx_CreateEvent:before {
+ background-color: #91a1c0;
+ -webkit-mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
+ mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
+}
+.mx_DateSeparator {
+ clear: both;
+ margin: 4px 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 1.4rem;
+ color: #9e9e9e;
+}
+.mx_DateSeparator > hr {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+ height: 0;
+ border: none;
+ border-bottom: 1px solid transparent;
+}
+.mx_DateSeparator > div {
+ margin: 0 25px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.mx_EventTileBubble {
+ background-color: #f2f5f8;
+ padding: 10px;
+ border-radius: 8px;
+ margin: 10px auto;
+ max-width: 75%;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ display: grid;
+ grid-template-columns: 24px minmax(0, 1fr) -webkit-min-content;
+ grid-template-columns: 24px minmax(0, 1fr) min-content;
+}
+.mx_EventTileBubble:after,
+.mx_EventTileBubble:before {
+ position: relative;
+ grid-column: 1;
+ grid-row: 1/3;
+ width: 16px;
+ height: 16px;
+ content: "";
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ margin-top: 4px;
+}
+.mx_EventTileBubble .mx_EventTileBubble_subtitle,
+.mx_EventTileBubble .mx_EventTileBubble_title {
+ overflow-wrap: break-word;
+}
+.mx_EventTileBubble .mx_EventTileBubble_title {
+ font-weight: 600;
+ font-size: 1.5rem;
+ grid-column: 2;
+ grid-row: 1;
+}
+.mx_EventTileBubble .mx_EventTileBubble_subtitle {
+ font-size: 1.2rem;
+ grid-column: 2;
+ grid-row: 2;
+}
+.mx_MEmoteBody {
+ white-space: pre-wrap;
+}
+.mx_MEmoteBody_sender {
+ cursor: pointer;
+}
+.mx_MFileBody_download {
+ color: #0dbd8b;
+}
+.mx_MFileBody_download .mx_MFileBody_download_icon {
+ width: 12px;
+ height: 12px;
+ -webkit-mask-size: 12px;
+ mask-size: 12px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url(../../img/download.4f331f0.svg);
+ mask-image: url(../../img/download.4f331f0.svg);
+ background-color: #0dbd8b;
+ display: inline-block;
+}
+.mx_MFileBody_download a {
+ color: #0dbd8b;
+ text-decoration: none;
+ cursor: pointer;
+}
+.mx_MFileBody_download object {
+ margin-left: -16px;
+ padding-right: 4px;
+ margin-top: -4px;
+ vertical-align: middle;
+ pointer-events: none;
+}
+.mx_MFileBody_download iframe {
+ margin: 0;
+ padding: 0;
+ border: none;
+ width: 100%;
+ height: 1.5em;
+}
+.mx_MFileBody_info {
+ background-color: #e3e8f0;
+ border-radius: 12px;
+ width: 243px;
+ padding: 6px 12px;
+ color: #737d8c;
+}
+.mx_MFileBody_info .mx_MFileBody_info_icon {
+ background-color: #fff;
+ border-radius: 20px;
+ display: inline-block;
+ width: 32px;
+ height: 32px;
+ position: relative;
+ vertical-align: middle;
+ margin-right: 12px;
+}
+.mx_MFileBody_info .mx_MFileBody_info_icon:before {
+ content: "";
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: cover;
+ mask-size: cover;
+ -webkit-mask-image: url(../icons/attach.svg);
+ mask-image: url(../icons/attach.svg);
+ background-color: #737d8c;
+ width: 13px;
+ height: 15px;
+ position: absolute;
+ top: 8px;
+ left: 9px;
+}
+.mx_MFileBody_info .mx_MFileBody_info_filename {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ display: inline-block;
+ width: calc(100% - 44px);
+ vertical-align: middle;
+}
+.mx_MImageBody {
+ display: block;
+ margin-right: 34px;
+}
+.mx_MImageBody_thumbnail {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ border-radius: 4px;
+}
+.mx_MImageBody_thumbnail_container {
+ overflow: hidden;
+ position: relative;
+}
+.mx_MImageBody_thumbnail_spinner {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+}
+.mx_MImageBody_thumbnail_spinner > * {
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+}
+.mx_MImageBody_gifLabel {
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 14px;
+ padding: 5px;
+ border-radius: 5px;
+ background: rgba(0, 0, 0, 0.7);
+ border: 2px solid rgba(0, 0, 0, 0.2);
+ color: #fff;
+ pointer-events: none;
+}
+.mx_HiddenImagePlaceholder {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ text-align: center;
+ cursor: pointer;
+ background-color: #f3f8fd;
+}
+.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button {
+ color: #0dbd8b;
+}
+.mx_HiddenImagePlaceholder
+ .mx_HiddenImagePlaceholder_button
+ span.mx_HiddenImagePlaceholder_eye {
+ margin-right: 8px;
+ background-color: #0dbd8b;
+ -webkit-mask-image: url(../../img/feather-customised/eye.52aa0d2.svg);
+ mask-image: url(../../img/feather-customised/eye.52aa0d2.svg);
+ display: inline-block;
+ width: 18px;
+ height: 14px;
+}
+.mx_HiddenImagePlaceholder
+ .mx_HiddenImagePlaceholder_button
+ span:not(.mx_HiddenImagePlaceholder_eye) {
+ vertical-align: text-bottom;
+}
+.mx_EventTile:hover .mx_HiddenImagePlaceholder {
+ background-color: #fff;
+}
+.mx_MJitsiWidgetEvent:before {
+ background-color: #91a1c0;
+ -webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
+ mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
+}
+.mx_MNoticeBody {
+ white-space: pre-wrap;
+ opacity: 0.6;
+}
+.mx_MStickerBody_wrapper {
+ padding: 20px 0;
+}
+.mx_MStickerBody_tooltip {
+ position: absolute;
+ top: 50%;
+}
+.mx_MStickerBody_hidden {
+ max-width: 220px;
+ text-decoration: none;
+ text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_MTextBody {
+ white-space: pre-wrap;
+}
+span.mx_MVideoBody video.mx_MVideoBody {
+ max-width: 100%;
+ height: auto;
+ border-radius: 4px;
+}
+.mx_MVoiceMessageBody {
+ display: inline-block;
+}
+.mx_MessageActionBar {
+ position: absolute;
+ visibility: hidden;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ height: 24px;
+ line-height: 2.4rem;
+ border-radius: 4px;
+ background: #fff;
+ top: -26px;
+ right: 8px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ z-index: 1;
+}
+.mx_MessageActionBar:before {
+ content: "";
+ position: absolute;
+ width: calc(66px + 100%);
+ height: calc(20px + 100%);
+ top: -12px;
+ left: -58px;
+ z-index: -1;
+ cursor: auto;
+}
+.mx_MessageActionBar > * {
+ white-space: nowrap;
+ display: inline-block;
+ position: relative;
+ border: 1px solid #e9edf1;
+ margin-left: -1px;
+}
+.mx_MessageActionBar > :hover {
+ border-color: #ddd;
+ z-index: 1;
+}
+.mx_MessageActionBar > :first-child {
+ border-radius: 3px 0 0 3px;
+}
+.mx_MessageActionBar > :last-child {
+ border-radius: 0 3px 3px 0;
+}
+.mx_MessageActionBar > :only-child {
+ border-radius: 3px;
+}
+.mx_MessageActionBar_maskButton {
+ width: 27px;
+}
+.mx_MessageActionBar_maskButton:after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ -webkit-mask-size: 18px;
+ mask-size: 18px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #2e2f32;
+}
+.mx_MessageActionBar_reactButton:after {
+ -webkit-mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
+ mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
+}
+.mx_MessageActionBar_replyButton:after {
+ -webkit-mask-image: url(../../img/element-icons/room/message-bar/reply.5812741.svg);
+ mask-image: url(../../img/element-icons/room/message-bar/reply.5812741.svg);
+}
+.mx_MessageActionBar_editButton:after {
+ -webkit-mask-image: url(../../img/element-icons/room/message-bar/edit.688678e.svg);
+ mask-image: url(../../img/element-icons/room/message-bar/edit.688678e.svg);
+}
+.mx_MessageActionBar_optionsButton:after {
+ -webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
+ mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
+}
+.mx_MessageActionBar_resendButton:after {
+ -webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
+ mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
+}
+.mx_MessageActionBar_cancelButton:after {
+ -webkit-mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
+ mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
+}
+.mx_MessageTimestamp {
+ color: #acacac;
+ font-size: 1rem;
+ -webkit-font-feature-settings: "tnum";
+ font-feature-settings: "tnum";
+ font-variant-numeric: tabular-nums;
+}
+.mx_MjolnirBody {
+ opacity: 0.4;
+}
+.mx_ReactionsRow {
+ margin: 6px 0;
+ color: #2e2f32;
+}
+.mx_ReactionsRow .mx_ReactionsRow_addReactionButton {
+ position: relative;
+ display: inline-block;
+ visibility: hidden;
+ width: 24px;
+ height: 24px;
+ vertical-align: middle;
+ margin-left: 4px;
+}
+.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:before {
+ content: "";
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ -webkit-mask-size: 16px;
+ mask-size: 16px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #8d99a5;
+ -webkit-mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
+ mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
+}
+.mx_ReactionsRow
+ .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active {
+ visibility: visible;
+}
+.mx_ReactionsRow
+ .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active:before,
+.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:hover:before {
+ background-color: #2e2f32;
+}
+.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
+ visibility: visible;
+}
+.mx_ReactionsRow_showAll {
+ text-decoration: none;
+ font-size: 1.2rem;
+ line-height: 2rem;
+ margin-left: 4px;
+ vertical-align: middle;
+}
+.mx_ReactionsRow_showAll:link,
+.mx_ReactionsRow_showAll:visited {
+ color: #8d99a5;
+}
+.mx_ReactionsRow_showAll:hover {
+ color: #2e2f32;
+}
+.mx_ReactionsRowButton {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ line-height: 2rem;
+ margin-right: 6px;
+ padding: 1px 6px;
+ border: 1px solid #e9edf1;
+ border-radius: 10px;
+ background-color: #f3f8fd;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ vertical-align: middle;
+}
+.mx_ReactionsRowButton:hover {
+ border-color: #ddd;
+}
+.mx_ReactionsRowButton.mx_ReactionsRowButton_selected {
+ background-color: #e9fff9;
+ border-color: #0dbd8b;
+}
+.mx_ReactionsRowButton.mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+}
+.mx_ReactionsRowButton .mx_ReactionsRowButton_content {
+ max-width: 100px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ padding-right: 4px;
+}
+.mx_RedactedBody {
+ white-space: pre-wrap;
+ color: #61708b;
+ vertical-align: middle;
+ padding-left: 20px;
+ position: relative;
+}
+.mx_RedactedBody:before {
+ height: 14px;
+ width: 14px;
+ background-color: #61708b;
+ -webkit-mask-image: url(../icons/trash.svg);
+ mask-image: url(../icons/trash.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ content: "";
+ position: absolute;
+ top: 1px;
+ left: 0;
+}
+.mx_RoomAvatarEvent {
+ opacity: 0.5;
+ overflow-y: hidden;
+}
+.mx_RoomAvatarEvent_avatar {
+ display: inline;
+ position: relative;
+ top: 5px;
+}
+.mx_SenderProfile_name {
+ font-weight: 600;
+}
+.mx_TextualEvent {
+ opacity: 0.5;
+ overflow-y: hidden;
+}
+.mx_UnknownBody {
+ white-space: pre-wrap;
+}
+.mx_EventTile_content.mx_ViewSourceEvent {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ opacity: 0.6;
+ font-size: 1.2rem;
+}
+.mx_EventTile_content.mx_ViewSourceEvent code,
+.mx_EventTile_content.mx_ViewSourceEvent pre {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_EventTile_content.mx_ViewSourceEvent pre {
+ line-height: 1.2;
+ margin: 3.5px 0;
+}
+.mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle {
+ width: 12px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: 0 center;
+ mask-position: 0 center;
+ -webkit-mask-size: auto 12px;
+ mask-size: auto 12px;
+ visibility: hidden;
+ background-color: #0dbd8b;
+ -webkit-mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
+ mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
+}
+.mx_EventTile_content.mx_ViewSourceEvent.mx_ViewSourceEvent_expanded
+ .mx_ViewSourceEvent_toggle {
+ -webkit-mask-position: 0 bottom;
+ mask-position: 0 bottom;
+ margin-bottom: 7px;
+ -webkit-mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
+ mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
+}
+.mx_EventTile_content.mx_ViewSourceEvent:hover .mx_ViewSourceEvent_toggle {
+ visibility: visible;
+}
+.mx_cryptoEvent.mx_cryptoEvent_icon:before {
+ background-color: #fff;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 90%;
+ mask-size: 90%;
+}
+.mx_cryptoEvent.mx_cryptoEvent_icon:after,
+.mx_cryptoEvent.mx_cryptoEvent_icon:before {
+ -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ mask-image: url(../../img/e2e/normal.76f0c09.svg);
+}
+.mx_cryptoEvent.mx_cryptoEvent_icon:after {
+ background-color: #91a1c0;
+}
+.mx_cryptoEvent.mx_cryptoEvent_icon_verified:after {
+ -webkit-mask-image: url(../../img/e2e/verified.5be6c9f.svg);
+ mask-image: url(../../img/e2e/verified.5be6c9f.svg);
+ background-color: #0dbd8b;
+}
+.mx_cryptoEvent.mx_cryptoEvent_icon_warning:after {
+ -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
+ mask-image: url(../../img/e2e/warning.78bb264.svg);
+ background-color: #ff4b55;
+}
+.mx_cryptoEvent .mx_cryptoEvent_buttons,
+.mx_cryptoEvent .mx_cryptoEvent_state {
+ grid-column: 3;
+ grid-row: 1/3;
+}
+.mx_cryptoEvent .mx_cryptoEvent_buttons {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_cryptoEvent .mx_cryptoEvent_state {
+ width: 130px;
+ padding: 10px 20px;
+ margin: auto 0;
+ text-align: center;
+ color: #8d99a5;
+ overflow-wrap: break-word;
+ font-size: 1.2rem;
+}
+.mx_BaseCard {
+ padding: 0 8px;
+ overflow: hidden;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_BaseCard .mx_BaseCard_header {
+ margin: 8px 0;
+}
+.mx_BaseCard .mx_BaseCard_header > h2 {
+ margin: 0 44px;
+ font-size: 1.8rem;
+ font-weight: 600;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back,
+.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close {
+ position: absolute;
+ background-color: rgba(141, 151, 165, 0.2);
+ height: 20px;
+ width: 20px;
+ margin: 12px;
+ top: 0;
+ border-radius: 10px;
+}
+.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before,
+.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before {
+ content: "";
+ position: absolute;
+ height: 20px;
+ width: 20px;
+ top: 0;
+ left: 0;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #91a1c0;
+}
+.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back {
+ left: 0;
+}
+.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before {
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ -webkit-mask-size: 22px;
+ mask-size: 22px;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close {
+ right: 0;
+}
+.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before {
+ -webkit-mask-image: url(../../img/icons-close.11ff07c.svg);
+ mask-image: url(../../img/icons-close.11ff07c.svg);
+ -webkit-mask-size: 8px;
+ mask-size: 8px;
+}
+.mx_BaseCard .mx_AutoHideScrollbar {
+ margin-right: -8px;
+ padding-right: 8px;
+ min-height: 0;
+ width: 100%;
+ height: 100%;
+}
+.mx_BaseCard .mx_BaseCard_Group {
+ margin: 20px 0 16px;
+}
+.mx_BaseCard .mx_BaseCard_Group > * {
+ margin-left: 12px;
+ margin-right: 12px;
+}
+.mx_BaseCard .mx_BaseCard_Group > h1 {
+ color: #8d99a5;
+ font-size: 1.2rem;
+ font-weight: 500;
+}
+.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button {
+ padding: 10px 38px 10px 12px;
+ margin: 0;
+ position: relative;
+ font-size: 1.3rem;
+ height: 20px;
+ line-height: 20px;
+ border-radius: 8px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:hover {
+ background-color: rgba(141, 151, 165, 0.1);
+}
+.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:after {
+ content: "";
+ position: absolute;
+ top: 10px;
+ right: 6px;
+ height: 20px;
+ width: 20px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #c1c6cd;
+ -webkit-transform: rotate(270deg);
+ transform: rotate(270deg);
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+.mx_BaseCard
+ .mx_BaseCard_Group
+ .mx_BaseCard_Button.mx_AccessibleButton_disabled {
+ padding-right: 12px;
+}
+.mx_BaseCard
+ .mx_BaseCard_Group
+ .mx_BaseCard_Button.mx_AccessibleButton_disabled:after {
+ content: unset;
+}
+.mx_BaseCard .mx_BaseCard_footer {
+ padding-top: 4px;
+ text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-pack: distribute;
+ justify-content: space-around;
+}
+.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_kind_secondary {
+ color: #737d8c;
+ background-color: rgba(141, 151, 165, 0.2);
+ font-weight: 600;
+ font-size: 1.4rem;
+}
+.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+}
+.mx_FilePanel.mx_BaseCard,
+.mx_MemberList.mx_BaseCard,
+.mx_NotificationPanel.mx_BaseCard,
+.mx_UserInfo.mx_BaseCard {
+ padding: 32px 0 0;
+}
+.mx_FilePanel.mx_BaseCard .mx_AutoHideScrollbar,
+.mx_MemberList.mx_BaseCard .mx_AutoHideScrollbar,
+.mx_NotificationPanel.mx_BaseCard .mx_AutoHideScrollbar,
+.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar {
+ margin-right: unset;
+ padding-right: unset;
+}
+.mx_EncryptionInfo_spinner .mx_Spinner {
+ margin-top: 25px;
+ margin-bottom: 15px;
+}
+.mx_EncryptionInfo_spinner {
+ text-align: center;
+}
+.mx_RoomSummaryCard .mx_BaseCard_header {
+ text-align: center;
+ margin-top: 20px;
+}
+.mx_RoomSummaryCard .mx_BaseCard_header h2 {
+ font-weight: 600;
+ font-size: 1.8rem;
+ margin: 12px 0 4px;
+}
+.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias {
+ font-size: 1.3rem;
+ color: #737d8c;
+}
+.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias,
+.mx_RoomSummaryCard .mx_BaseCard_header h2 {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+}
+.mx_RoomSummaryCard
+ .mx_BaseCard_header
+ .mx_RoomSummaryCard_avatar
+ .mx_RoomSummaryCard_e2ee {
+ display: inline-block;
+ position: relative;
+ width: 54px;
+ height: 54px;
+ border-radius: 50%;
+ background-color: #737d8c;
+ margin-top: -3px;
+ margin-left: -10px;
+ border: 3px solid #f2f5f8;
+}
+.mx_RoomSummaryCard
+ .mx_BaseCard_header
+ .mx_RoomSummaryCard_avatar
+ .mx_RoomSummaryCard_e2ee:before {
+ content: "";
+ position: absolute;
+ top: 13px;
+ left: 13px;
+ height: 28px;
+ width: 28px;
+ -webkit-mask-size: cover;
+ mask-size: cover;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-image: url(../../img/e2e/disabled.6c5c6be.svg);
+ mask-image: url(../../img/e2e/disabled.6c5c6be.svg);
+ background-color: #fff;
+}
+.mx_RoomSummaryCard
+ .mx_BaseCard_header
+ .mx_RoomSummaryCard_avatar
+ .mx_RoomSummaryCard_e2ee_normal {
+ background-color: #424446;
+}
+.mx_RoomSummaryCard
+ .mx_BaseCard_header
+ .mx_RoomSummaryCard_avatar
+ .mx_RoomSummaryCard_e2ee_normal:before {
+ -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ mask-image: url(../../img/e2e/normal.76f0c09.svg);
+}
+.mx_RoomSummaryCard
+ .mx_BaseCard_header
+ .mx_RoomSummaryCard_avatar
+ .mx_RoomSummaryCard_e2ee_verified {
+ background-color: #0dbd8b;
+}
+.mx_RoomSummaryCard
+ .mx_BaseCard_header
+ .mx_RoomSummaryCard_avatar
+ .mx_RoomSummaryCard_e2ee_verified:before {
+ -webkit-mask-image: url(../../img/e2e/verified.5be6c9f.svg);
+ mask-image: url(../../img/e2e/verified.5be6c9f.svg);
+}
+.mx_RoomSummaryCard
+ .mx_BaseCard_header
+ .mx_RoomSummaryCard_avatar
+ .mx_RoomSummaryCard_e2ee_warning {
+ background-color: #ff4b55;
+}
+.mx_RoomSummaryCard
+ .mx_BaseCard_header
+ .mx_RoomSummaryCard_avatar
+ .mx_RoomSummaryCard_e2ee_warning:before {
+ -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
+ mask-image: url(../../img/e2e/warning.78bb264.svg);
+}
+.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button {
+ padding-left: 44px;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_aboutGroup
+ .mx_RoomSummaryCard_Button:before {
+ content: "";
+ position: absolute;
+ top: 8px;
+ left: 10px;
+ height: 24px;
+ width: 24px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #c1c6cd;
+}
+.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button {
+ padding: 0;
+ height: auto;
+ color: #8d99a5;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_icon_app {
+ padding: 10px 48px 10px 12px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_icon_app
+ .mx_BaseAvatar_image {
+ vertical-align: top;
+ margin-right: 12px;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_icon_app
+ span {
+ color: #2e2f32;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_options,
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_pinToggle {
+ position: absolute;
+ top: 0;
+ height: 100%;
+ width: 24px;
+ padding: 12px 4px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ min-width: 24px;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_options:hover:after,
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_pinToggle:hover:after {
+ content: "";
+ position: absolute;
+ height: 24px;
+ width: 24px;
+ top: 8px;
+ left: 0;
+ border-radius: 12px;
+ background-color: rgba(141, 151, 165, 0.1);
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_options:before,
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_pinToggle:before {
+ content: "";
+ position: absolute;
+ height: 16px;
+ width: 16px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 16px;
+ mask-size: 16px;
+ background-color: #c1c6cd;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_pinToggle {
+ right: 24px;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_pinToggle:before {
+ -webkit-mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
+ mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_options {
+ right: 48px;
+ display: none;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button
+ .mx_RoomSummaryCard_app_options:before {
+ -webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
+ mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned:after {
+ opacity: 0.2;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned
+ .mx_RoomSummaryCard_app_pinToggle:before {
+ background-color: #0dbd8b;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button:hover
+ .mx_RoomSummaryCard_icon_app {
+ padding-right: 72px;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button:hover
+ .mx_RoomSummaryCard_app_options {
+ display: unset;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button:before {
+ content: unset;
+}
+.mx_RoomSummaryCard
+ .mx_RoomSummaryCard_appsGroup
+ .mx_RoomSummaryCard_Button:after {
+ top: 8px;
+ pointer-events: none;
+}
+.mx_RoomSummaryCard .mx_AccessibleButton_kind_link {
+ padding: 0;
+ margin-top: 12px;
+ margin-bottom: 12px;
+ font-size: 1.3rem;
+ font-weight: 600;
+}
+.mx_RoomSummaryCard_icon_people:before {
+ -webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
+ mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
+}
+.mx_RoomSummaryCard_icon_files:before {
+ -webkit-mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
+ mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
+}
+.mx_RoomSummaryCard_icon_share:before {
+ -webkit-mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
+ mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
+}
+.mx_RoomSummaryCard_icon_settings:before {
+ -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
+ mask-image: url(../../img/element-icons/settings.6b381af.svg);
+}
+.mx_UserInfo.mx_BaseCard {
+ padding-top: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ overflow-y: auto;
+ font-size: 1.2rem;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel {
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ border-radius: 4px;
+ background-color: #f2f5f8;
+ margin: 9px;
+ z-index: 1;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel div {
+ height: 16px;
+ width: 16px;
+ padding: 4px;
+ -webkit-mask-image: url(../../img/minimise.871d2de.svg);
+ mask-image: url(../../img/minimise.871d2de.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: 7px center;
+ mask-position: 7px center;
+ background-color: #91a1c0;
+}
+.mx_UserInfo.mx_BaseCard h2 {
+ font-size: 1.8rem;
+ font-weight: 600;
+ margin: 18px 0 0;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_container {
+ padding: 8px 16px;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_separator {
+ border-bottom: 1px solid rgba(46, 47, 50, 0.1);
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetailsContainer {
+ padding-top: 0;
+ padding-bottom: 0;
+ margin-bottom: 8px;
+}
+.mx_UserInfo.mx_BaseCard .mx_RoomTile_nameContainer {
+ width: 154px;
+}
+.mx_UserInfo.mx_BaseCard .mx_RoomTile_badge {
+ display: none;
+}
+.mx_UserInfo.mx_BaseCard .mx_RoomTile_name {
+ width: 160px;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar {
+ margin: 24px 32px 0;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar > div {
+ max-width: 30vh;
+ margin: 0 auto;
+ -webkit-transition: 0.5s;
+ transition: 0.5s;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar > div > div {
+ padding-top: 100%;
+ position: relative;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar > div > div * {
+ border-radius: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100% !important;
+ height: 100% !important;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar_initial {
+ z-index: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ font-size: 6rem !important;
+ width: 100% !important;
+ -webkit-transition: font-size 0.5s;
+ transition: font-size 0.5s;
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_UserInfo_avatar
+ .mx_BaseAvatar.mx_BaseAvatar_image {
+ cursor: -webkit-zoom-in;
+ cursor: zoom-in;
+}
+.mx_UserInfo.mx_BaseCard h3 {
+ text-transform: uppercase;
+ color: #8d99a5;
+ font-weight: 600;
+ font-size: 1.2rem;
+ margin: 4px 0;
+}
+.mx_UserInfo.mx_BaseCard p {
+ margin: 5px 0;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile {
+ text-align: center;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ font-size: 1.8rem;
+ line-height: 2.5rem;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 span {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ word-break: break-all;
+ text-overflow: ellipsis;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 .mx_E2EIcon {
+ margin-top: 3px;
+ margin-right: 4px;
+ min-width: 18px;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profileStatus {
+ margin-top: 12px;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField {
+ margin: 6px 0;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField,
+.mx_UserInfo.mx_BaseCard
+ .mx_UserInfo_memberDetails
+ .mx_UserInfo_profileField
+ .mx_UserInfo_roleDescription {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_UserInfo_memberDetails
+ .mx_UserInfo_profileField
+ .mx_UserInfo_roleDescription {
+ margin: 11px 0 12px;
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_UserInfo_memberDetails
+ .mx_UserInfo_profileField
+ .mx_Field {
+ margin: 0;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_field {
+ cursor: pointer;
+ color: #0dbd8b;
+ line-height: 1.6rem;
+ margin: 8px 0;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_field.mx_UserInfo_destructive {
+ color: #ff4b55;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_statusMessage {
+ font-size: 1.1rem;
+ opacity: 0.5;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: clip;
+}
+.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) {
+ padding-top: 16px;
+ padding-bottom: 0;
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_UserInfo_container:not(.mx_UserInfo_separator)
+ > :not(h3) {
+ margin-left: 8px;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin: 8px 0;
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_UserInfo_devices
+ .mx_UserInfo_device.mx_UserInfo_device_verified
+ .mx_UserInfo_device_trusted {
+ color: #0dbd8b;
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_UserInfo_devices
+ .mx_UserInfo_device.mx_UserInfo_device_unverified
+ .mx_UserInfo_device_trusted {
+ color: #ff4b55;
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_UserInfo_devices
+ .mx_UserInfo_device
+ .mx_UserInfo_device_name {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ margin-right: 5px;
+ word-break: break-word;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_E2EIcon {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ margin: 2px 5px 0 0;
+ width: 12px;
+ height: 12px;
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_expand {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-top: 11px;
+}
+.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind {
+ padding: 8px 18px;
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary {
+ color: #0dbd8b;
+ background-color: rgba(3, 179, 129, 0.16);
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger {
+ color: #ff4b55;
+ background-color: rgba(255, 75, 85, 0.16);
+}
+.mx_UserInfo.mx_BaseCard .mx_UserInfo_wideButton,
+.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton {
+ display: block;
+ margin: 16px 0 8px;
+}
+.mx_UserInfo.mx_BaseCard
+ .mx_VerificationShowSas
+ .mx_AccessibleButton
+ + .mx_AccessibleButton {
+ margin: 8px 0;
+}
+.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar > div {
+ max-width: 72px;
+ margin: 0 auto;
+}
+.mx_UserInfo.mx_UserInfo_smallAvatar
+ .mx_UserInfo_avatar
+ .mx_BaseAvatar_initial {
+ font-size: 40px !important;
+}
+.mx_VerificationPanel_reciprocate_section .mx_E2EIcon,
+.mx_VerificationPanel_verified_section .mx_E2EIcon {
+ margin: 20px auto !important;
+}
+.mx_UserInfo .mx_EncryptionPanel_cancel {
+ -webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
+ mask: url(../../img/feather-customised/cancel.23c2689.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: cover;
+ mask-size: cover;
+ width: 14px;
+ height: 14px;
+ background-color: #61708b;
+ cursor: pointer;
+ position: absolute;
+ z-index: 100;
+ top: 14px;
+ right: 14px;
+}
+.mx_UserInfo .mx_VerificationPanel_qrCode {
+ padding: 4px 4px 0;
+ background: #fff;
+ border-radius: 4px;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ max-width: 100%;
+ margin: 0 auto !important;
+}
+.mx_UserInfo .mx_VerificationPanel_qrCode canvas {
+ height: auto !important;
+ width: 100% !important;
+ max-width: 240px;
+}
+.mx_UserInfo .mx_VerificationPanel_reciprocate_section .mx_FormButton {
+ width: 100%;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 10px;
+ display: block;
+ margin: 10px 0;
+}
+.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions,
+.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_CompleteSecurity_body
+ .mx_VerificationPanel_QRPhase_startOptions
+ > .mx_VerificationPanel_QRPhase_betweenText,
+.mx_Dialog
+ .mx_VerificationPanel_QRPhase_startOptions
+ > .mx_VerificationPanel_QRPhase_betweenText {
+ width: 50px;
+ vertical-align: middle;
+ text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_CompleteSecurity_body
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption,
+.mx_Dialog
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption {
+ background-color: #f3f8fd;
+ border-radius: 10px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 20px;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ position: relative;
+ max-width: 310px;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+.mx_CompleteSecurity_body
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption
+ .mx_VerificationPanel_QRPhase_noQR,
+.mx_CompleteSecurity_body
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption
+ canvas,
+.mx_Dialog
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption
+ .mx_VerificationPanel_QRPhase_noQR,
+.mx_Dialog
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption
+ canvas {
+ width: 220px !important;
+ height: 220px !important;
+ background-color: #fff;
+ border-radius: 4px;
+ vertical-align: middle;
+ text-align: center;
+ padding: 10px;
+}
+.mx_CompleteSecurity_body
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption
+ > p,
+.mx_Dialog
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption
+ > p {
+ margin-top: 0;
+ font-weight: 700;
+}
+.mx_CompleteSecurity_body
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption
+ .mx_VerificationPanel_QRPhase_helpText,
+.mx_Dialog
+ .mx_VerificationPanel_QRPhase_startOptions
+ .mx_VerificationPanel_QRPhase_startOption
+ .mx_VerificationPanel_QRPhase_helpText {
+ font-size: 1.4rem;
+ margin: 30px 0;
+ text-align: center;
+}
+.mx_CompleteSecurity_body
+ .mx_VerificationPanel_verified_section
+ .mx_AccessibleButton,
+.mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton {
+ float: right;
+}
+.mx_CompleteSecurity_body
+ .mx_VerificationPanel_reciprocate_section
+ .mx_AccessibleButton,
+.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton {
+ margin-left: 10px;
+ padding: 7px 40px;
+}
+.mx_CompleteSecurity_body
+ .mx_VerificationPanel_reciprocate_section
+ .mx_VerificationPanel_reciprocateButtons,
+.mx_Dialog
+ .mx_VerificationPanel_reciprocate_section
+ .mx_VerificationPanel_reciprocateButtons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+.mx_WidgetCard {
+ height: 100%;
+ display: contents;
+}
+.mx_WidgetCard .mx_AppTileFullWidth {
+ max-width: unset;
+ height: 100%;
+ border: 0;
+}
+.mx_WidgetCard .mx_BaseCard_header {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+}
+.mx_WidgetCard .mx_BaseCard_header > h2 {
+ margin-right: 0;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton {
+ position: relative;
+ margin-right: 44px;
+ height: 20px;
+ width: 20px;
+ min-width: 20px;
+ padding: 0;
+}
+.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton:before {
+ content: "";
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ top: 0;
+ left: 4px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
+ mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
+ background-color: #737d8c;
+}
+.mx_WidgetCard_maxPinnedTooltip {
+ background-color: #ff4b55;
+ color: #fff;
+}
+.mx_AliasSettings_editable {
+ border: 0;
+ border-bottom: 1px solid #c7c7c7;
+ padding: 0;
+ min-width: 240px;
+}
+.mx_AliasSettings_editable:focus {
+ border-bottom: 1px solid #0dbd8b;
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.mx_AliasSettings summary {
+ cursor: pointer;
+ color: #0dbd8b;
+ font-weight: 600;
+ list-style: none;
+}
+.mx_AliasSettings summary::-webkit-details-marker {
+ display: none;
+}
+.mx_AliasSettings .mx_AliasSettings_localAliasHeader {
+ margin-top: 35px;
+}
+.mx_AppsDrawer {
+ margin: 5px 5px 5px 18px;
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ overflow: hidden;
+}
+.mx_AppsDrawer .mx_AppsContainer_resizerHandleContainer {
+ width: 100%;
+ height: 10px;
+ margin-top: -3px;
+ display: block;
+ position: relative;
+}
+.mx_AppsDrawer .mx_AppsContainer_resizerHandle {
+ cursor: ns-resize;
+ width: 100% !important;
+ height: 100% !important;
+ position: absolute;
+ bottom: 0 !important;
+}
+.mx_AppsDrawer .mx_AppsContainer_resizerHandle:after {
+ content: "";
+ position: absolute;
+ border-radius: 3px;
+ top: 6px;
+ bottom: 0;
+ left: calc(50% - 32px);
+ right: calc(50% - 32px);
+}
+.mx_AppsDrawer:hover .mx_AppsContainer_resizerHandle:after {
+ opacity: 0.8;
+ background: #2e2f32;
+}
+.mx_AppsDrawer:hover .mx_ResizeHandle_horizontal:before {
+ position: absolute;
+ left: 3px;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ transform: translateY(-50%);
+ height: 64px;
+ width: 4px;
+ border-radius: 4px;
+ content: "";
+ background-color: #2e2f32;
+ opacity: 0.8;
+}
+.mx_AppsContainer_resizer {
+ margin-bottom: 8px;
+}
+.mx_AppsContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ min-height: 0;
+}
+.mx_AppsContainer .mx_AppTile:first-of-type {
+ border-left-width: 8px;
+ border-radius: 10px 0 0 10px;
+}
+.mx_AppsContainer .mx_AppTile:last-of-type {
+ border-right-width: 8px;
+ border-radius: 0 10px 10px 0;
+}
+.mx_AppsContainer .mx_ResizeHandle_horizontal {
+ position: relative;
+}
+.mx_AppsContainer .mx_ResizeHandle_horizontal > div {
+ width: 0;
+}
+.mx_AppsDrawer_2apps .mx_AppTile {
+ width: 50%;
+}
+.mx_AppsDrawer_2apps .mx_AppTile:nth-child(3) {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ width: 0 !important;
+ min-width: 240px !important;
+}
+.mx_AppsDrawer_3apps .mx_AppTile {
+ width: 33%;
+}
+.mx_AppsDrawer_3apps .mx_AppTile:nth-child(3) {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ width: 0 !important;
+ min-width: 240px !important;
+}
+.mx_AppTile {
+ width: 50%;
+ min-width: 240px;
+ border-color: #f2f5f8;
+ border-style: solid;
+ border-width: 8px 5px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ background-color: #f2f5f8;
+}
+.mx_AppTileFullWidth {
+ width: 100% !important;
+ border: 5px solid #f2f5f8;
+ border-radius: 8px;
+ background-color: #f2f5f8;
+}
+.mx_AppTile_mini,
+.mx_AppTileFullWidth {
+ margin: 0;
+ padding: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_AppTile_mini {
+ width: 100%;
+ height: 200px;
+}
+.mx_AppTile .mx_AppTile_persistedWrapper,
+.mx_AppTile_mini .mx_AppTile_persistedWrapper,
+.mx_AppTileFullWidth .mx_AppTile_persistedWrapper {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_AppTile_persistedWrapper div {
+ width: 100%;
+ height: 100%;
+}
+.mx_AppTileMenuBar {
+ margin: 0;
+ font-size: 1.2rem;
+ background-color: #f2f5f8;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ width: 100%;
+ padding-top: 2px;
+ padding-bottom: 8px;
+}
+.mx_AppTileMenuBarTitle {
+ line-height: 20px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.mx_AppTileMenuBarTitle .mx_WidgetAvatar {
+ margin-right: 12px;
+}
+.mx_AppTileMenuBarTitle > :last-child {
+ margin-left: 9px;
+}
+.mx_AppTileMenuBarWidgets {
+ float: right;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_AppTileMenuBar_iconButton {
+ width: 12px;
+ height: 12px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: 0 center;
+ mask-position: 0 center;
+ -webkit-mask-size: auto 12px;
+ mask-size: auto 12px;
+ background-color: #212121;
+ margin: 0 3px;
+}
+.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
+ -webkit-mask-image: url(../../img/feather-customised/widget/external-link.7ab6751.svg);
+ mask-image: url(../../img/feather-customised/widget/external-link.7ab6751.svg);
+}
+.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu {
+ -webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
+ mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
+}
+.mx_AppTileBody {
+ height: 100%;
+ background-color: #fff;
+}
+.mx_AppTileBody,
+.mx_AppTileBody_mini {
+ width: 100%;
+ overflow: hidden;
+ border-radius: 8px;
+}
+.mx_AppTileBody_mini {
+ height: 200px;
+}
+.mx_AppTile .mx_AppTileBody,
+.mx_AppTile_mini .mx_AppTileBody_mini,
+.mx_AppTileFullWidth .mx_AppTileBody {
+ height: inherit;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_AppTileBody_mini iframe,
+.mx_AppTileBody iframe {
+ border: none;
+ width: 100%;
+ height: 100%;
+}
+.mx_AppTileBody iframe {
+ overflow: hidden;
+ padding: 0;
+ margin: 0;
+ display: block;
+}
+.mx_AppPermissionWarning {
+ text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ height: 100%;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 1.6rem;
+}
+.mx_AppPermissionWarning_row {
+ margin-bottom: 12px;
+}
+.mx_AppPermissionWarning_smallText {
+ font-size: 1.2rem;
+}
+.mx_AppPermissionWarning_bolder {
+ font-weight: 600;
+}
+.mx_AppPermissionWarning h4 {
+ margin: 0;
+ padding: 0;
+}
+.mx_AppPermissionWarning_helpIcon {
+ margin-top: 1px;
+ margin-right: 2px;
+ width: 10px;
+ height: 10px;
+ display: inline-block;
+}
+.mx_AppPermissionWarning_helpIcon:before {
+ display: inline-block;
+ background-color: #0dbd8b;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 12px;
+ mask-size: 12px;
+ width: 12px;
+ height: 12px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ content: "";
+ vertical-align: middle;
+ -webkit-mask-image: url(../../img/feather-customised/help-circle.03fb6cf.svg);
+ mask-image: url(../../img/feather-customised/help-circle.03fb6cf.svg);
+}
+.mx_AppPermissionWarning_tooltip {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ background-color: #27303a;
+ color: #fff;
+ border: none;
+ border-radius: 3px;
+ padding: 6px 8px;
+}
+.mx_AppPermissionWarning_tooltip ul {
+ list-style-position: inside;
+ padding-left: 2px;
+ margin-left: 0;
+}
+.mx_AppLoading {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-weight: 700;
+ position: relative;
+ height: 100%;
+ background-color: #fff !important;
+ border-radius: 8px;
+}
+.mx_AppLoading .mx_Spinner {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+.mx_AppLoading_spinner_fadeIn {
+ -webkit-animation-fill-mode: backwards;
+ animation-fill-mode: backwards;
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-delay: 0.5s;
+ animation-delay: 0.5s;
+ -webkit-animation-name: mx_AppLoading_spinner_fadeIn_animation;
+ animation-name: mx_AppLoading_spinner_fadeIn_animation;
+}
+@-webkit-keyframes mx_AppLoading_spinner_fadeIn_animation {
+ 0% {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+@keyframes mx_AppLoading_spinner_fadeIn_animation {
+ 0% {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+.mx_AppLoading iframe {
+ display: none;
+}
+.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper {
+ z-index: 1;
+}
+.mx_Autocomplete {
+ position: absolute;
+ bottom: 0;
+ z-index: 1001;
+ width: 100%;
+ background: #fff;
+ border: 1px solid transparent;
+ border-bottom: none;
+ border-radius: 8px 8px 0 0;
+ max-height: 50vh;
+ overflow: auto;
+ -webkit-box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
+ box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
+}
+.mx_Autocomplete_ProviderSection {
+ border-bottom: 1px solid transparent;
+}
+.mx_Autocomplete_Completion_block {
+ height: 34px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 0 12px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #2e2f32;
+}
+.mx_Autocomplete_Completion_block * {
+ margin: 0 3px;
+}
+.mx_Autocomplete_Completion_pill {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-radius: 2rem;
+ height: 3.4rem;
+ padding: 0.4rem;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #2e2f32;
+}
+.mx_Autocomplete_Completion_pill > * {
+ margin-right: 0.3rem;
+}
+.mx_Autocomplete_Completion_subtitle {
+ font-style: italic;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_Autocomplete_Completion_description {
+ color: grey;
+}
+.mx_Autocomplete_Completion_container_pill {
+ margin: 12px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-flow: wrap;
+ flex-flow: wrap;
+}
+.mx_Autocomplete_Completion_container_truncate
+ .mx_Autocomplete_Completion_description,
+.mx_Autocomplete_Completion_container_truncate
+ .mx_Autocomplete_Completion_subtitle,
+.mx_Autocomplete_Completion_container_truncate
+ .mx_Autocomplete_Completion_title {
+ max-width: 150px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.mx_Autocomplete_Completion.selected,
+.mx_Autocomplete_Completion:hover {
+ background: #f2f5f8;
+ outline: none;
+}
+.mx_Autocomplete_provider_name {
+ margin: 12px;
+ color: #2e2f32;
+ font-weight: 400;
+ opacity: 0.4;
+}
+.m_RoomView_auxPanel_stateViews {
+ padding: 5px 5px 5px 19px;
+ border-bottom: 1px solid transparent;
+}
+.m_RoomView_auxPanel_stateViews_span a {
+ text-decoration: none;
+ color: inherit;
+}
+.m_RoomView_auxPanel_stateViews_span[data-severity="warning"] {
+ font-weight: 700;
+ color: orange;
+}
+.m_RoomView_auxPanel_stateViews_span[data-severity="alert"] {
+ font-weight: 700;
+ color: red;
+}
+.m_RoomView_auxPanel_stateViews_span[data-severity="normal"] {
+ font-weight: 400;
+}
+.m_RoomView_auxPanel_stateViews_span[data-severity="notice"] {
+ font-weight: 400;
+ color: #a2a2a2;
+}
+.m_RoomView_auxPanel_stateViews_delim {
+ padding: 0 5px;
+ color: #a2a2a2;
+}
+.mx_BasicMessageComposer {
+ position: relative;
+}
+.mx_BasicMessageComposer
+ .mx_BasicMessageComposer_inputEmpty
+ > :first-child:before {
+ content: var(--placeholder);
+ opacity: 0.333;
+ width: 0;
+ height: 0;
+ overflow: visible;
+ display: inline-block;
+ pointer-events: none;
+ white-space: nowrap;
+}
+@-webkit-keyframes visualbell {
+ 0% {
+ background-color: #faa;
+ }
+ to {
+ background-color: #fff;
+ }
+}
+.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error {
+ -webkit-animation: visualbell 0.2s;
+ animation: visualbell 0.2s;
+}
+.mx_BasicMessageComposer .mx_BasicMessageComposer_input {
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ outline: none;
+ overflow-x: hidden;
+}
+.mx_BasicMessageComposer
+ .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
+ span.mx_RoomPill,
+.mx_BasicMessageComposer
+ .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
+ span.mx_UserPill {
+ position: relative;
+}
+.mx_BasicMessageComposer
+ .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
+ span.mx_RoomPill:before,
+.mx_BasicMessageComposer
+ .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
+ span.mx_UserPill:before {
+ content: var(--avatar-letter);
+ width: 1.6rem;
+ height: 1.6rem;
+ margin-right: 0.24rem;
+ background: var(--avatar-background), #fff;
+ color: #fff;
+ background-repeat: no-repeat;
+ background-size: 1.6rem;
+ border-radius: 1.6rem;
+ text-align: center;
+ font-weight: 400;
+ line-height: 1.6rem;
+ font-size: 1.04rem;
+}
+.mx_BasicMessageComposer
+ .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_disabled {
+ pointer-events: none;
+}
+.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper {
+ position: relative;
+ height: 0;
+}
+.mx_E2EIcon {
+ width: 16px;
+ height: 16px;
+ margin: 0 9px;
+ position: relative;
+ display: block;
+}
+.mx_E2EIcon_normal:after,
+.mx_E2EIcon_normal:before,
+.mx_E2EIcon_verified:after,
+.mx_E2EIcon_verified:before,
+.mx_E2EIcon_warning:after,
+.mx_E2EIcon_warning:before {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_E2EIcon:before {
+ background-color: #fff;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 90%;
+ mask-size: 90%;
+}
+.mx_E2EIcon:before,
+.mx_E2EIcon_bordered {
+ -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ mask-image: url(../../img/e2e/normal.76f0c09.svg);
+}
+.mx_E2EIcon_bordered {
+ background-color: #f3f8fd;
+}
+.mx_E2EIcon_bordered:after {
+ -webkit-mask-size: 75%;
+ mask-size: 75%;
+}
+.mx_E2EIcon_bordered:before {
+ -webkit-mask-size: 65%;
+ mask-size: 65%;
+}
+.mx_E2EIcon_warning:after {
+ -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
+ mask-image: url(../../img/e2e/warning.78bb264.svg);
+ background-color: #ff4b55;
+}
+.mx_E2EIcon_normal:after {
+ -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ background-color: #91a1c0;
+}
+.mx_E2EIcon_verified:after {
+ -webkit-mask-image: url(../../img/e2e/verified.5be6c9f.svg);
+ mask-image: url(../../img/e2e/verified.5be6c9f.svg);
+ background-color: #0dbd8b;
+}
+.mx_EditMessageComposer {
+ padding: 3px;
+ margin: -7px -10px -5px;
+ overflow: visible !important;
+}
+.mx_EditMessageComposer .mx_BasicMessageComposer_input {
+ border-radius: 4px;
+ border: 1px solid transparent;
+ background-color: #fff;
+ max-height: 200px;
+ padding: 3px 6px;
+}
+.mx_EditMessageComposer .mx_BasicMessageComposer_input:focus {
+ border-color: rgba(13, 189, 139, 0.5);
+}
+.mx_EditMessageComposer .mx_EditMessageComposer_buttons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ position: absolute;
+ left: 0;
+ background: #f3f8fd;
+ z-index: 100;
+ right: 0;
+ margin: 0 -110px 0 0;
+ padding: 5px 147px 5px 5px;
+}
+.mx_EditMessageComposer .mx_EditMessageComposer_buttons .mx_AccessibleButton {
+ margin-left: 5px;
+ padding: 5px 40px;
+}
+.mx_EventTile_last .mx_EditMessageComposer_buttons {
+ position: static;
+ margin-right: -147px;
+}
+.mx_EntityTile {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #2e2f32;
+ cursor: pointer;
+}
+.mx_EntityTile .mx_E2EIcon {
+ margin: 0;
+ position: absolute;
+ bottom: 2px;
+ right: 7px;
+}
+.mx_EntityTile:hover {
+ padding-right: 30px;
+ position: relative;
+}
+.mx_EntityTile:hover:before {
+ content: "";
+ position: absolute;
+ top: calc(50% - 8px);
+ right: -8px;
+ -webkit-mask: url(../../img/member_chevron.4163a20.png);
+ mask: url(../../img/member_chevron.4163a20.png);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ width: 16px;
+ height: 16px;
+ background-color: #91a1c0;
+}
+.mx_EntityTile .mx_PresenceLabel {
+ display: none;
+}
+.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_PresenceLabel {
+ display: block;
+}
+.mx_EntityTile_invite {
+ display: table-cell;
+ vertical-align: middle;
+ margin-left: 10px;
+ width: 26px;
+}
+.mx_EntityTile_avatar,
+.mx_GroupRoomTile_avatar {
+ padding: 4px 12px 4px 3px;
+ position: relative;
+}
+.mx_EntityTile_name,
+.mx_GroupRoomTile_name {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+ overflow: hidden;
+ font-size: 1.4rem;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.mx_EntityTile_details {
+ overflow: hidden;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_EntityTile_ellipsis .mx_EntityTile_name,
+.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
+ font-style: italic;
+ color: #2e2f32;
+}
+.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,
+.mx_EntityTile_offline_beenactive .mx_EntityTile_name,
+.mx_EntityTile_unavailable .mx_EntityTile_avatar,
+.mx_EntityTile_unavailable .mx_EntityTile_name {
+ opacity: 0.5;
+}
+.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,
+.mx_EntityTile_offline_neveractive .mx_EntityTile_name,
+.mx_EntityTile_unknown .mx_EntityTile_avatar,
+.mx_EntityTile_unknown .mx_EntityTile_name {
+ opacity: 0.25;
+}
+.mx_EntityTile_subtext {
+ font-size: 1.1rem;
+ opacity: 0.5;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: clip;
+}
+.mx_EntityTile_power {
+ -webkit-padding-start: 6px;
+ padding-inline-start: 6px;
+ font-size: 1rem;
+ color: #8d99a5;
+ max-width: 6em;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.mx_EntityTile:hover .mx_EntityTile_power {
+ display: none;
+}
+.mx_EventTile {
+ max-width: 100%;
+ clear: both;
+ padding-top: 18px;
+ font-size: 1.4rem;
+ position: relative;
+}
+.mx_EventTile.mx_EventTile_info {
+ padding-top: 1px;
+}
+.mx_EventTile_avatar {
+ top: 14px;
+ left: 8px;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
+ top: 0.6rem;
+ left: 64px;
+}
+.mx_EventTile_continuation {
+ padding-top: 0 !important;
+}
+.mx_EventTile_continuation.mx_EventTile_isEditing {
+ padding-top: 5px !important;
+ margin-top: -5px;
+}
+.mx_EventTile_isEditing {
+ background-color: #f3f8fd;
+}
+.mx_EventTile .mx_SenderProfile {
+ color: #2e2f32;
+ font-size: 1.4rem;
+ display: inline-block;
+ overflow: hidden;
+ cursor: pointer;
+ padding-bottom: 0;
+ padding-top: 0;
+ margin: 0;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ max-width: calc(100% - 64px);
+}
+.mx_EventTile .mx_SenderProfile .mx_Flair {
+ opacity: 0.7;
+ margin-left: 5px;
+ display: inline-block;
+ vertical-align: top;
+ overflow: hidden;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.mx_EventTile .mx_SenderProfile .mx_Flair img {
+ vertical-align: -2px;
+ margin-right: 2px;
+ border-radius: 8px;
+}
+.mx_EventTile_isEditing .mx_MessageTimestamp {
+ visibility: hidden !important;
+}
+.mx_EventTile .mx_MessageTimestamp {
+ display: block;
+ visibility: hidden;
+ white-space: nowrap;
+ left: 0;
+ text-align: center;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.mx_EventTile_continuation .mx_EventTile_line {
+ clear: both;
+}
+.mx_EventTile_line,
+.mx_EventTile_reply {
+ position: relative;
+ padding-left: 64px;
+ border-radius: 4px;
+}
+.mx_EventListSummary .mx_EventTile_line,
+.mx_RoomView_timeline_rr_enabled .mx_EventTile_line {
+ margin-right: 110px;
+}
+.mx_EventTile_bubbleContainer {
+ display: grid;
+ grid-template-columns: 1fr 100px;
+}
+.mx_EventTile_bubbleContainer .mx_EventTile_line {
+ margin-right: 0;
+ grid-column: 1/3;
+ padding: 0 !important;
+}
+.mx_EventTile_bubbleContainer .mx_EventTile_msgOption {
+ grid-column: 2;
+}
+.mx_EventTile_reply {
+ margin-right: 10px;
+}
+.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
+ font-size: 48px !important;
+ line-height: 57px !important;
+}
+.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
+ visibility: visible;
+}
+.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
+ left: 3px;
+ width: auto;
+}
+.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp,
+.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp,
+.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
+.mx_EventTile_last > div > a > .mx_MessageTimestamp,
+.mx_IRCLayout
+ .mx_EventTile.focus-visible:focus-within
+ > a
+ > .mx_MessageTimestamp,
+.mx_IRCLayout
+ .mx_EventTile.mx_EventTile_actionBarFocused
+ > a
+ > .mx_MessageTimestamp,
+.mx_IRCLayout .mx_EventTile:hover > a > .mx_MessageTimestamp,
+.mx_IRCLayout .mx_EventTile_last > a > .mx_MessageTimestamp,
+.mx_IRCLayout .mx_ReplyThread .mx_EventTile > a > .mx_MessageTimestamp {
+ visibility: visible;
+}
+.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar,
+.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
+.mx_EventTile:hover .mx_MessageActionBar,
+[data-whatinput="keyboard"] .mx_EventTile:focus-within .mx_MessageActionBar {
+ visibility: visible;
+}
+.mx_EventTile_selected > .mx_EventTile_line {
+ border-left: 4px solid #0dbd8b;
+ padding-left: 60px;
+ background-color: #f6f7f8;
+}
+.mx_EventTile_highlight,
+.mx_EventTile_highlight .markdown-body {
+ color: #ff4b55;
+}
+.mx_EventTile_highlight .markdown-body .mx_EventTile_line,
+.mx_EventTile_highlight .mx_EventTile_line {
+ background-color: #fff8e3;
+}
+.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
+ padding-left: 78px;
+}
+.mx_EventTile.focus-visible:focus-within .mx_EventTile_line,
+.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
+.mx_EventTile:hover .mx_EventTile_line {
+ background-color: #f6f7f8;
+}
+.mx_EventTile_searchHighlight {
+ border-radius: 5px;
+ padding-left: 2px;
+ padding-right: 2px;
+ cursor: pointer;
+}
+.mx_EventTile_searchHighlight,
+.mx_EventTile_searchHighlight a {
+ background-color: #0dbd8b;
+ color: #fff;
+}
+.mx_EventTile_receiptSending:before,
+.mx_EventTile_receiptSent:before {
+ background-color: #8d99a5;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 14px;
+ mask-size: 14px;
+ width: 14px;
+ height: 14px;
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+}
+.mx_EventTile_receiptSent:before {
+ -webkit-mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
+ mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
+}
+.mx_EventTile_receiptSending:before {
+ -webkit-mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
+ mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
+}
+.mx_EventTile_contextual {
+ opacity: 0.4;
+}
+.mx_EventTile_msgOption {
+ float: right;
+ text-align: right;
+ position: relative;
+ width: 90px;
+ height: 1px;
+ margin-right: 10px;
+}
+.mx_EventTile_msgOption a {
+ text-decoration: none;
+}
+.mx_EventTile_readAvatars {
+ position: relative;
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ top: -2.2rem;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ z-index: 1;
+}
+.mx_EventTile_readAvatars .mx_BaseAvatar {
+ position: absolute;
+ display: inline-block;
+ height: 1.4rem;
+ width: 1.4rem;
+ -webkit-transition: left 0.1s ease-out, top 0.3s ease-out;
+ transition: left 0.1s ease-out, top 0.3s ease-out;
+ -webkit-transition: left var(--transition-short) ease-out,
+ top var(--transition-standard) ease-out;
+ transition: left var(--transition-short) ease-out,
+ top var(--transition-standard) ease-out;
+}
+.mx_EventTile_readAvatarRemainder {
+ color: #acacac;
+ font-size: 1.1rem;
+ position: absolute;
+}
+.mx_EventTile_content {
+ display: block;
+ overflow-y: hidden;
+ overflow-x: hidden;
+ margin-right: 34px;
+}
+.mx_EventTile_body {
+ overflow-y: hidden;
+}
+.mx_EventTile_spoiler {
+ cursor: pointer;
+}
+.mx_EventTile_spoiler_reason {
+ color: #acacac;
+ font-size: 1.1rem;
+}
+.mx_EventTile_spoiler_content {
+ -webkit-filter: blur(5px) saturate(0.1) sepia(1);
+ filter: blur(5px) saturate(0.1) sepia(1);
+ -webkit-transition-duration: 0.5s;
+ transition-duration: 0.5s;
+}
+.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
+ -webkit-filter: none;
+ filter: none;
+}
+.mx_EventTile_e2eIcon {
+ position: absolute;
+ top: 6px;
+ left: 44px;
+ width: 14px;
+ height: 14px;
+ display: block;
+ bottom: 0;
+ right: 0;
+ opacity: 0.2;
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+.mx_EventTile_e2eIcon:after,
+.mx_EventTile_e2eIcon:before {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_EventTile_e2eIcon:after,
+.mx_EventTile_e2eIcon:before {
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_EventTile_e2eIcon:before {
+ background-color: #fff;
+ -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ -webkit-mask-size: 90%;
+ mask-size: 90%;
+}
+.mx_EventTile_e2eIcon_undecryptable:after,
+.mx_EventTile_e2eIcon_unverified:after {
+ -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
+ mask-image: url(../../img/e2e/warning.78bb264.svg);
+ background-color: #ff4b55;
+}
+.mx_EventTile_e2eIcon_undecryptable,
+.mx_EventTile_e2eIcon_unverified {
+ opacity: 1;
+}
+.mx_EventTile_e2eIcon_unknown:after {
+ -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
+ mask-image: url(../../img/e2e/warning.78bb264.svg);
+ background-color: #ff4b55;
+}
+.mx_EventTile_e2eIcon_unknown {
+ opacity: 1;
+}
+.mx_EventTile_e2eIcon_unencrypted:after {
+ -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
+ mask-image: url(../../img/e2e/warning.78bb264.svg);
+ background-color: #ff4b55;
+}
+.mx_EventTile_e2eIcon_unencrypted {
+ opacity: 1;
+}
+.mx_EventTile_e2eIcon_unauthenticated:after {
+ -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ mask-image: url(../../img/e2e/normal.76f0c09.svg);
+ background-color: #91a1c0;
+}
+.mx_EventTile_e2eIcon_unauthenticated {
+ opacity: 1;
+}
+.mx_EventTile_keyRequestInfo {
+ font-size: 1.2rem;
+}
+.mx_EventTile_keyRequestInfo_text {
+ opacity: 0.5;
+}
+.mx_EventTile_keyRequestInfo_text a {
+ color: #2e2f32;
+ text-decoration: underline;
+ cursor: pointer;
+}
+.mx_EventTile_keyRequestInfo_tooltip_contents p {
+ text-align: auto;
+ margin-left: 3px;
+ margin-right: 3px;
+}
+.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
+ margin-top: 0;
+}
+.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
+ margin-bottom: 0;
+}
+.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
+ padding-left: 60px;
+}
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
+ border-left: 4px solid #76cfa5;
+}
+.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
+ border-left: 4px solid #e8bf37;
+}
+.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info
+ .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line {
+ padding-left: 78px;
+}
+.mx_EventTile:hover .mx_EventTile_e2eIcon {
+ opacity: 1;
+}
+.mx_EventTile:hover.mx_EventTile_unknown
+ .mx_EventTile_line
+ > a
+ > .mx_MessageTimestamp,
+.mx_EventTile:hover.mx_EventTile_unverified
+ .mx_EventTile_line
+ > a
+ > .mx_MessageTimestamp,
+.mx_EventTile:hover.mx_EventTile_verified
+ .mx_EventTile_line
+ > a
+ > .mx_MessageTimestamp {
+ width: 38px;
+}
+.mx_EventTile:hover.mx_EventTile_unknown
+ .mx_EventTile_line
+ > .mx_EventTile_e2eIcon,
+.mx_EventTile:hover.mx_EventTile_unverified
+ .mx_EventTile_line
+ > .mx_EventTile_e2eIcon,
+.mx_EventTile:hover.mx_EventTile_verified
+ .mx_EventTile_line
+ > .mx_EventTile_e2eIcon {
+ display: block;
+ left: 41px;
+}
+.mx_EventTile_content .mx_EventTile_edited {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ font-size: 1.2rem;
+ color: #9e9e9e;
+ display: inline-block;
+ margin-left: 9px;
+ cursor: pointer;
+}
+.mx_EventTile_body pre {
+ border: 1px solid transparent;
+}
+.mx_EventTile_content .markdown-body {
+ font-family: inherit !important;
+ white-space: normal !important;
+ line-height: inherit !important;
+ color: inherit;
+ font-size: 1.4rem;
+}
+.mx_EventTile_content .markdown-body code,
+.mx_EventTile_content .markdown-body pre {
+ font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+ color: #333;
+}
+.mx_EventTile_content .markdown-body pre {
+ overflow-x: overlay;
+ overflow-y: visible;
+}
+.mx_EventTile_content .markdown-body code {
+ background-color: #f8f8f8;
+}
+.mx_EventTile_lineNumbers {
+ float: left;
+ margin: 0 0.5em 0 -1.5em;
+ color: grey;
+}
+.mx_EventTile_lineNumber {
+ text-align: right;
+ display: block;
+ padding-left: 1em;
+}
+.mx_EventTile_collapsedCodeBlock {
+ max-height: 30vh;
+}
+.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre,
+.mx_EventTile:hover .mx_EventTile_body pre {
+ border: 1px solid #e5e5e5;
+}
+.mx_EventTile_pre_container {
+ position: relative;
+}
+.mx_EventTile_button {
+ position: absolute;
+ display: inline-block;
+ visibility: hidden;
+ cursor: pointer;
+ top: 8px;
+ right: 8px;
+ width: 19px;
+ height: 19px;
+ background-color: #2e2f32;
+}
+.mx_EventTile_buttonBottom {
+ top: 33px;
+}
+.mx_EventTile_copyButton {
+ -webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
+ mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
+}
+.mx_EventTile_collapseButton {
+ -webkit-mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
+ mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
+}
+.mx_EventTile_collapseButton,
+.mx_EventTile_expandButton {
+ -webkit-mask-size: 75%;
+ mask-size: 75%;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+}
+.mx_EventTile_expandButton {
+ -webkit-mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
+ mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
+}
+.mx_EventTile_body
+ .mx_EventTile_pre_container:focus-within
+ .mx_EventTile_collapseButton,
+.mx_EventTile_body
+ .mx_EventTile_pre_container:focus-within
+ .mx_EventTile_copyButton,
+.mx_EventTile_body
+ .mx_EventTile_pre_container:focus-within
+ .mx_EventTile_expandButton,
+.mx_EventTile_body
+ .mx_EventTile_pre_container:hover
+ .mx_EventTile_collapseButton,
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,
+.mx_EventTile_body
+ .mx_EventTile_pre_container:hover
+ .mx_EventTile_expandButton {
+ visibility: visible;
+}
+.mx_EventTile_content .markdown-body h1,
+.mx_EventTile_content .markdown-body h2,
+.mx_EventTile_content .markdown-body h3,
+.mx_EventTile_content .markdown-body h4,
+.mx_EventTile_content .markdown-body h5,
+.mx_EventTile_content .markdown-body h6 {
+ font-family: inherit !important;
+ color: inherit;
+}
+.mx_EventTile_content .markdown-body h1,
+.mx_EventTile_content .markdown-body h2 {
+ font-size: 1.5em;
+ border-bottom: none !important;
+}
+.mx_EventTile_content .markdown-body a {
+ color: #238cf5;
+}
+.mx_EventTile_content .markdown-body .hljs {
+ display: inline !important;
+}
+.mx_EventTile_tileError {
+ color: red;
+ text-align: center;
+ margin-right: 0;
+}
+.mx_EventTile_tileError .mx_EventTile_line {
+ padding-left: 0;
+ margin-right: 0;
+}
+.mx_EventTile_tileError .mx_EventTile_line span {
+ padding: 4px 8px;
+}
+.mx_EventTile_tileError a {
+ margin-left: 1em;
+}
+@media only screen and (max-width: 480px) {
+ .mx_EventTile_line,
+ .mx_EventTile_reply {
+ padding-left: 0;
+ margin-right: 0;
+ }
+ .mx_EventTile_content {
+ margin-top: 10px;
+ margin-right: 0;
+ }
+}
+.mx_GroupLayout .mx_EventTile > .mx_SenderProfile {
+ line-height: 2rem;
+ margin-left: 64px;
+}
+.mx_GroupLayout .mx_EventTile > .mx_EventTile_line {
+ padding-left: 64px;
+}
+.mx_GroupLayout .mx_EventTile > .mx_EventTile_avatar {
+ position: absolute;
+}
+.mx_GroupLayout .mx_EventTile .mx_MessageTimestamp {
+ position: absolute;
+ width: 46px;
+}
+.mx_GroupLayout .mx_EventTile .mx_EventTile_line,
+.mx_GroupLayout .mx_EventTile .mx_EventTile_reply {
+ padding-top: 1px;
+ padding-bottom: 3px;
+ line-height: 2.2rem;
+}
+.mx_GroupLayout .mx_EventTile_info .mx_EventTile_line {
+ padding-left: 82px;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventTile {
+ padding-top: 4px;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_line,
+.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_reply {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info {
+ padding-top: 0;
+ font-size: 1.3rem;
+}
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile.mx_EventTile_info
+ .mx_EventTile_line,
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile.mx_EventTile_info
+ .mx_EventTile_reply {
+ line-height: 2rem;
+}
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile.mx_EventTile_info
+ .mx_EventTile_avatar {
+ top: 4px;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_SenderProfile {
+ font-size: 1.3rem;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote {
+ padding-top: 8px;
+}
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile.mx_EventTile_emote
+ .mx_EventTile_avatar {
+ top: 2px;
+}
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile.mx_EventTile_emote
+ .mx_EventTile_line,
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile.mx_EventTile_emote
+ .mx_EventTile_reply {
+ padding-top: 0;
+ padding-bottom: 1px;
+}
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
+ padding-top: 0;
+}
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation
+ .mx_EventTile_line,
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation
+ .mx_EventTile_reply {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_avatar {
+ top: 2px;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_e2eIcon {
+ top: 3px;
+}
+.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_readAvatars {
+ top: -2rem;
+}
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile
+ .mx_EventTile_content
+ .markdown-body
+ blockquote,
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile
+ .mx_EventTile_content
+ .markdown-body
+ dl,
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile
+ .mx_EventTile_content
+ .markdown-body
+ ol,
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile
+ .mx_EventTile_content
+ .markdown-body
+ p,
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile
+ .mx_EventTile_content
+ .markdown-body
+ pre,
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile
+ .mx_EventTile_content
+ .markdown-body
+ table,
+.mx_MatrixChat_useCompactLayout
+ .mx_EventTile
+ .mx_EventTile_content
+ .markdown-body
+ ul {
+ margin-bottom: 4px;
+}
+.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList h2 {
+ margin-top: 6px;
+}
+.mx_IRCLayout {
+ --name-width: 70px;
+ line-height: 1.8rem !important;
+}
+.mx_IRCLayout .mx_EventTile > a {
+ text-decoration: none;
+}
+.mx_IRCLayout .mx_EventTile {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ padding-top: 0;
+}
+.mx_IRCLayout .mx_EventTile > * {
+ margin-right: 5px;
+}
+.mx_IRCLayout .mx_EventTile > .mx_EventTile_msgOption {
+ -webkit-box-ordinal-group: 6;
+ -ms-flex-order: 5;
+ order: 5;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+}
+.mx_IRCLayout
+ .mx_EventTile
+ > .mx_EventTile_msgOption
+ .mx_EventTile_readAvatars {
+ top: 0.2rem;
+}
+.mx_IRCLayout .mx_EventTile > .mx_SenderProfile {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ width: var(--name-width);
+ text-overflow: ellipsis;
+ text-align: left;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ overflow: visible;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+.mx_IRCLayout .mx_EventTile .mx_EventTile_line,
+.mx_IRCLayout .mx_EventTile .mx_EventTile_reply {
+ padding: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-ordinal-group: 4;
+ -ms-flex-order: 3;
+ order: 3;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ min-width: 0;
+}
+.mx_IRCLayout .mx_EventTile > .mx_EventTile_avatar {
+ -webkit-box-ordinal-group: 2;
+ -ms-flex-order: 1;
+ order: 1;
+ position: relative;
+ top: 0;
+ left: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ height: 1.8rem;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_IRCLayout .mx_EventTile > .mx_EventTile_avatar > .mx_BaseAvatar,
+.mx_IRCLayout .mx_EventTile > .mx_EventTile_avatar > .mx_BaseAvatar > * {
+ height: 1.4rem !important;
+ width: 1.4rem !important;
+ font-size: 1rem !important;
+ line-height: 1.5rem !important;
+}
+.mx_IRCLayout .mx_EventTile .mx_MessageTimestamp {
+ font-size: 1rem;
+ width: 45px;
+ text-align: right;
+}
+.mx_IRCLayout .mx_EventTile > .mx_EventTile_e2eIcon {
+ position: absolute;
+ right: unset;
+ left: unset;
+ top: 0;
+ padding: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ height: 1.8rem;
+ background-position: 50%;
+}
+.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_EventTile_e2eIcon,
+.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_MTextBody,
+.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_ReplyThread_wrapper_empty,
+.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_TextualEvent {
+ display: inline-block;
+}
+.mx_IRCLayout .mx_EventTile .mx_EventTile_reply {
+ -webkit-box-ordinal-group: 5;
+ -ms-flex-order: 4;
+ order: 4;
+}
+.mx_IRCLayout .mx_EventTile .mx_EditMessageComposer_buttons {
+ position: relative;
+}
+.mx_IRCLayout .mx_EventTile_emote > .mx_EventTile_avatar {
+ margin-left: calc(var(--name-width) + 19px);
+}
+.mx_IRCLayout blockquote {
+ margin: 0;
+}
+.mx_IRCLayout .mx_EventListSummary > .mx_EventTile_line {
+ padding-left: calc(var(--name-width) + 74px);
+}
+.mx_IRCLayout .mx_EventListSummary .mx_EventListSummary_avatars {
+ padding: 0;
+ margin: 0 9px 0 0;
+}
+.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
+ left: calc(var(--name-width) + 24px);
+ top: 0;
+}
+.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line {
+ left: calc(var(--name-width) + 24px);
+}
+.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_TextualEvent {
+ line-height: 1.8rem;
+}
+.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,
+.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
+.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
+ padding-left: 0;
+ border-left: 0;
+}
+.mx_IRCLayout .mx_SenderProfile_hover {
+ background-color: #fff;
+ overflow: hidden;
+}
+.mx_IRCLayout .mx_SenderProfile_hover > span {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_IRCLayout .mx_SenderProfile_hover > span > .mx_SenderProfile_name {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ min-width: var(--name-width);
+ text-align: end;
+}
+.mx_IRCLayout .mx_SenderProfile:hover {
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+}
+.mx_IRCLayout .mx_SenderProfile_hover:hover {
+ overflow: visible;
+ width: max(auto, 100%);
+ z-index: 10;
+}
+.mx_IRCLayout .mx_ReplyThread {
+ margin: 0;
+}
+.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile {
+ width: unset;
+ max-width: var(--name-width);
+}
+.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover {
+ background: transparent;
+}
+.mx_IRCLayout
+ .mx_ReplyThread
+ .mx_SenderProfile_hover
+ > span
+ > .mx_SenderProfile_name {
+ min-width: inherit;
+}
+.mx_IRCLayout .mx_ReplyThread .mx_EventTile_emote > .mx_EventTile_avatar {
+ margin-left: 0;
+}
+.mx_IRCLayout .mx_ReplyThread .mx_MessageTimestamp {
+ width: auto;
+}
+.mx_IRCLayout .mx_ReplyThread .mx_EventTile_e2eIcon {
+ position: relative;
+ -webkit-box-ordinal-group: 0;
+ -ms-flex-order: -1;
+ order: -1;
+}
+.mx_IRCLayout .mx_ProfileResizer {
+ position: absolute;
+ height: 100%;
+ width: 15px;
+ left: calc(80px + var(--name-width));
+ cursor: col-resize;
+ z-index: 100;
+}
+.mx_IRCLayout .mx_Flair > img {
+ height: 1.4rem !important;
+ width: 1.4rem !important;
+}
+.mx_JumpToBottomButton {
+ z-index: 1000;
+ position: absolute;
+ bottom: 12px;
+ right: 24px;
+ width: 38px;
+ height: 50px;
+ text-align: center;
+}
+.mx_JumpToBottomButton_badge {
+ position: relative;
+ top: -12px;
+ border-radius: 16px;
+ font-weight: 700;
+ font-size: 1.2rem;
+ line-height: 1.4rem;
+ text-align: center;
+ display: inline-block;
+ padding: 0 4px;
+ color: #fff;
+ background-color: #61708b;
+}
+.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
+ color: #f2f5f8;
+ background-color: #ff4b55;
+}
+.mx_JumpToBottomButton_scrollDown {
+ position: relative;
+ height: 38px;
+ border-radius: 19px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ background: #fff;
+ border: 1.3px solid #61708b;
+ cursor: pointer;
+}
+.mx_JumpToBottomButton_scrollDown:before {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
+ mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ background: #61708b;
+}
+.mx_LinkPreviewWidget {
+ margin-top: 15px;
+ margin-right: 15px;
+ margin-bottom: 15px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ border-left: 4px solid #ddd;
+ color: #888;
+}
+.mx_LinkPreviewWidget_image {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 100px;
+ flex: 0 0 100px;
+ margin-left: 15px;
+ text-align: center;
+ cursor: pointer;
+}
+.mx_LinkPreviewWidget_caption {
+ margin-left: 15px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+.mx_LinkPreviewWidget_title {
+ display: inline;
+ font-weight: 700;
+ white-space: normal;
+}
+.mx_LinkPreviewWidget_siteName {
+ display: inline;
+}
+.mx_LinkPreviewWidget_description {
+ margin-top: 8px;
+ white-space: normal;
+ word-wrap: break-word;
+}
+.mx_LinkPreviewWidget_cancel {
+ cursor: pointer;
+ width: 18px;
+ height: 18px;
+}
+.mx_LinkPreviewWidget_cancel img {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 40px;
+ flex: 0 0 40px;
+ visibility: hidden;
+}
+.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel img,
+.mx_LinkPreviewWidget_cancel.focus-visible:focus img {
+ visibility: visible;
+}
+.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget {
+ margin-top: 6px;
+ margin-bottom: 6px;
+}
+.mx_MemberInfo {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ overflow-y: auto;
+ margin-top: 8px;
+}
+.mx_MemberInfo,
+.mx_MemberInfo_name {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_MemberInfo_name {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_MemberInfo_name > .mx_E2EIcon {
+ margin-right: 0;
+}
+.mx_MemberInfo_cancel {
+ height: 16px;
+ width: 16px;
+ padding: 10px 0 10px 10px;
+ cursor: pointer;
+ -webkit-mask-image: url(../../img/minimise.871d2de.svg);
+ mask-image: url(../../img/minimise.871d2de.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: 16px center;
+ mask-position: 16px center;
+ background-color: #91a1c0;
+}
+.mx_MemberInfo_name h2 {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ overflow-x: auto;
+ max-height: 50px;
+}
+.mx_MemberInfo h2 {
+ font-size: 1.8rem;
+ font-weight: 600;
+ margin: 16px 0 16px 15px;
+}
+.mx_MemberInfo_container {
+ margin: 0 16px 16px;
+}
+.mx_MemberInfo .mx_RoomTile_nameContainer {
+ width: 154px;
+}
+.mx_MemberInfo .mx_RoomTile_badge {
+ display: none;
+}
+.mx_MemberInfo .mx_RoomTile_name {
+ width: 160px;
+}
+.mx_MemberInfo_avatar {
+ background: hsla(0, 0%, 91%, 0.77);
+ margin-bottom: 16px;
+}
+.mx_MemberInfo_avatar > img {
+ height: auto;
+ width: 100%;
+ max-height: 30vh;
+ -o-object-fit: contain;
+ object-fit: contain;
+ display: block;
+}
+.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
+ cursor: -webkit-zoom-in;
+ cursor: zoom-in;
+}
+.mx_MemberInfo_profile {
+ margin-bottom: 16px;
+}
+.mx_MemberInfo h3 {
+ text-transform: uppercase;
+ color: #9fa9ba;
+ font-weight: 700;
+ font-size: 1.2rem;
+ margin: 4px 0;
+}
+.mx_MemberInfo_profileField {
+ font-size: 1.5rem;
+ position: relative;
+}
+.mx_MemberInfo_buttons {
+ margin-bottom: 16px;
+}
+.mx_MemberInfo_field {
+ cursor: pointer;
+ font-size: 1.5rem;
+ color: #2e2f32;
+ margin-left: 8px;
+ line-height: 2.3rem;
+}
+.mx_MemberInfo_createRoom {
+ cursor: pointer;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 0 8px;
+}
+.mx_MemberInfo_createRoom_label {
+ width: auto !important;
+ cursor: pointer;
+}
+.mx_MemberInfo label {
+ font-size: 1.3rem;
+}
+.mx_MemberInfo label .mx_MemberInfo_label_text {
+ display: inline-block;
+ max-width: 180px;
+ vertical-align: text-top;
+}
+.mx_MemberInfo input[type="radio"] {
+ vertical-align: -2px;
+ margin-right: 5px;
+ margin-left: 8px;
+}
+.mx_MemberInfo_statusMessage {
+ font-size: 1.1rem;
+ opacity: 0.5;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: clip;
+}
+.mx_MemberInfo .mx_MemberInfo_scrollContainer {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_GroupMemberList,
+.mx_GroupRoomList,
+.mx_MemberList {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ min-height: 0;
+}
+.mx_GroupMemberList .mx_Spinner,
+.mx_GroupRoomList .mx_Spinner,
+.mx_MemberList .mx_Spinner {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+}
+.mx_GroupMemberList .mx_SearchBox,
+.mx_GroupRoomList .mx_SearchBox,
+.mx_MemberList .mx_SearchBox {
+ margin-bottom: 5px;
+}
+.mx_GroupMemberList h2,
+.mx_GroupRoomList h2,
+.mx_MemberList h2 {
+ text-transform: uppercase;
+ color: #3d3b39;
+ font-weight: 600;
+ font-size: 1.3rem;
+ padding-left: 3px;
+ padding-right: 12px;
+ margin-top: 8px;
+ margin-bottom: 4px;
+}
+.mx_GroupMemberList .mx_AutoHideScrollbar,
+.mx_GroupRoomList .mx_AutoHideScrollbar,
+.mx_MemberList .mx_AutoHideScrollbar {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+}
+.mx_GroupMemberList .mx_RightPanel_scopeHeader,
+.mx_GroupRoomList .mx_RightPanel_scopeHeader,
+.mx_MemberList .mx_RightPanel_scopeHeader {
+ margin-top: -8px;
+}
+.mx_GroupMemberList_query,
+.mx_GroupRoomList_query {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.mx_MemberList_chevron {
+ position: absolute;
+ right: 35px;
+ margin-top: -15px;
+}
+.mx_MemberList_border {
+ overflow-y: auto;
+ -webkit-box-ordinal-group: 2;
+ -ms-flex-order: 1;
+ order: 1;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0px;
+}
+.mx_MemberList_query {
+ height: 16px;
+}
+.mx_MemberList_query[type="text"] {
+ font-size: 1.2rem;
+}
+.mx_MemberList_wrapper {
+ padding: 10px;
+}
+.mx_MemberList_invite {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ position: relative;
+ background-color: #0dbd8b;
+ border-radius: 4px;
+ margin: 5px 9px 9px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ color: #fff;
+ font-weight: 600;
+}
+.mx_MemberList_invite.mx_AccessibleButton_disabled {
+ background-color: #888;
+ cursor: not-allowed;
+}
+.mx_MemberList_invite span {
+ padding: 8px 0;
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+}
+.mx_MemberList_invite span:before {
+ content: "";
+ display: inline-block;
+ background-color: #fff;
+ -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ width: 20px;
+ height: 20px;
+ margin-right: 5px;
+}
+.mx_MemberList_inviteCommunity span:before {
+ -webkit-mask-image: url(../../img/icon-invite-people.d82f491.svg);
+ mask-image: url(../../img/icon-invite-people.d82f491.svg);
+}
+.mx_MemberList_addRoomToCommunity span:before {
+ -webkit-mask-image: url(../../img/icons-room-add.bd36e26.svg);
+ mask-image: url(../../img/icons-room-add.bd36e26.svg);
+}
+.mx_MessageComposer_wrapper {
+ vertical-align: middle;
+ margin: auto;
+ border-top: 1px solid transparent;
+ position: relative;
+ padding-left: 82px;
+ padding-right: 6px;
+}
+.mx_MessageComposer_replaced_wrapper {
+ margin-left: auto;
+ margin-right: auto;
+}
+.mx_MessageComposer_replaced_valign {
+ height: 60px;
+ display: table-cell;
+ vertical-align: middle;
+}
+.mx_MessageComposer_roomReplaced_icon {
+ float: left;
+ margin-right: 20px;
+ margin-top: 5px;
+ width: 31px;
+ height: 31px;
+}
+.mx_MessageComposer_roomReplaced_header {
+ font-weight: 700;
+}
+.mx_MessageComposer_autocomplete_wrapper {
+ position: relative;
+ height: 0;
+}
+.mx_MessageComposer_row {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ width: 100%;
+}
+.mx_MessageComposer .mx_MessageComposer_avatar {
+ position: absolute;
+ left: 26px;
+}
+.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
+ display: block;
+}
+.mx_MessageComposer_composecontrols {
+ width: 100%;
+}
+.mx_MessageComposer_e2eIcon.mx_E2EIcon {
+ position: absolute;
+ left: 60px;
+ margin-right: 0;
+ margin-left: 3px;
+ width: 12px;
+ height: 12px;
+}
+.mx_MessageComposer_noperm_error {
+ width: 100%;
+ height: 60px;
+ font-style: italic;
+ color: #888;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_MessageComposer_input_wrapper {
+ cursor: text;
+}
+.mx_MessageComposer_input,
+.mx_MessageComposer_input_wrapper {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_MessageComposer_input {
+ vertical-align: middle;
+ min-height: 60px;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ font-size: 1.4rem;
+ margin-right: 6px;
+}
+.mx_MessageComposer_editor {
+ width: 100%;
+ max-height: 120px;
+ min-height: 19px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ word-break: break-word;
+}
+.mx_MessageComposer_editor > :first-child {
+ margin-top: 0 !important;
+}
+.mx_MessageComposer_editor > :last-child {
+ margin-bottom: 0 !important;
+}
+@keyframes visualbell {
+ 0% {
+ background-color: #faa;
+ }
+ to {
+ background-color: #fff;
+ }
+}
+.mx_MessageComposer_input_error {
+ -webkit-animation: visualbell 0.2s;
+ animation: visualbell 0.2s;
+}
+.mx_MessageComposer_input blockquote {
+ color: #777;
+ margin: 0 0 16px;
+ padding: 0 15px;
+ border-left: 4px solid #ddd;
+}
+.mx_MessageComposer_input pre {
+ background-color: rgba(0, 0, 0, 0.04);
+ border-radius: 3px;
+ padding: 10px;
+}
+.mx_MessageComposer_input textarea {
+ display: block;
+ width: 100%;
+ padding: 0;
+ margin-top: 6px;
+ margin-bottom: 6px;
+ border: 0;
+ resize: none;
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: #2e2f32;
+ background-color: #fff;
+ font-size: 1.4rem;
+ max-height: 120px;
+ overflow: auto;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+}
+.mx_MessageComposer_input textarea::-moz-placeholder {
+ line-height: 100%;
+ color: #0dbd8b;
+ opacity: 1;
+}
+.mx_MessageComposer_input textarea::-webkit-input-placeholder {
+ color: #0dbd8b;
+}
+.mx_MessageComposer_button_highlight {
+ background: rgba(13, 189, 139, 0.25);
+}
+.mx_MessageComposer_button_highlight:before {
+ background-color: #0dbd8b !important;
+}
+.mx_MessageComposer_button {
+ position: relative;
+ margin-right: 6px;
+ cursor: pointer;
+ height: 26px;
+ width: 26px;
+ border-radius: 100%;
+}
+.mx_MessageComposer_button:before {
+ content: "";
+ position: absolute;
+ top: 3px;
+ left: 3px;
+ height: 20px;
+ width: 20px;
+ background-color: #c1c6cd;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_MessageComposer_button:hover {
+ background: rgba(13, 189, 139, 0.1);
+}
+.mx_MessageComposer_button:hover:before {
+ background-color: #0dbd8b;
+}
+.mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled):before {
+ background-color: #ff4b55;
+}
+.mx_MessageComposer_upload:before {
+ -webkit-mask-image: url(../icons/attach.svg);
+ mask-image: url(../icons/attach.svg);
+}
+.mx_MessageComposer_voiceMessage:before {
+ -webkit-mask-image: url(../../img/voip/mic-on-mask.97ec7a0.svg);
+ mask-image: url(../../img/voip/mic-on-mask.97ec7a0.svg);
+}
+.mx_MessageComposer_emoji:before {
+ -webkit-mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
+ mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
+}
+.mx_MessageComposer_stickers:before {
+ -webkit-mask-image: url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);
+ mask-image: url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);
+}
+.mx_MessageComposer_sendMessage {
+ cursor: pointer;
+ position: relative;
+ margin-right: 6px;
+ width: 32px;
+ height: 32px;
+ border-radius: 100%;
+ background-color: #0dbd8b;
+}
+.mx_MessageComposer_sendMessage:before {
+ position: absolute;
+ height: 16px;
+ width: 16px;
+ top: 8px;
+ left: 9px;
+ -webkit-mask-image: url(../../img/element-icons/send-message.a4e9cf8.svg);
+ mask-image: url(../../img/element-icons/send-message.a4e9cf8.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #fff;
+ content: "";
+}
+.mx_MessageComposer_formatting {
+ cursor: pointer;
+ margin: 0 11px;
+ width: 24px;
+ height: 18px;
+}
+.mx_MessageComposer_formatbar_wrapper {
+ width: 100%;
+ background-color: #fff;
+ -webkit-box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
+ box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
+}
+.mx_MessageComposer_formatbar {
+ margin: auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ height: 30px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ padding-left: 62px;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 1rem;
+ color: #888;
+}
+.mx_MessageComposer_formatbar * {
+ margin-right: 4px;
+}
+.mx_MessageComposer_format_button,
+.mx_MessageComposer_formatbar_cancel,
+.mx_MessageComposer_formatbar_markdown {
+ cursor: pointer;
+}
+.mx_MessageComposer_formatbar_cancel {
+ margin-right: 22px;
+}
+.mx_MessageComposer_formatbar_markdown {
+ height: 17px;
+ width: 30px;
+ margin-right: 64px;
+}
+.mx_MessageComposer_input_markdownIndicator {
+ height: 10px;
+ width: 12px;
+ padding: 4px 4px 4px 0;
+}
+.mx_MessageComposer_formatbar_markdown,
+.mx_MessageComposer_input_markdownIndicator {
+ cursor: pointer;
+ -webkit-mask-image: url(../../img/markdown.6905ba8.svg);
+ mask-image: url(../../img/markdown.6905ba8.svg);
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #c1c6cd;
+}
+.mx_MessageComposer_formatbar_markdown.mx_MessageComposer_markdownDisabled,
+.mx_MessageComposer_input_markdownIndicator.mx_MessageComposer_markdownDisabled {
+ opacity: 0.2;
+}
+.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input {
+ min-height: 50px;
+}
+.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error {
+ height: 50px;
+}
+.mx_MessageComposerFormatBar {
+ display: none;
+ width: 130px;
+ height: 24px;
+ position: absolute;
+ cursor: pointer;
+ border-radius: 4px;
+ background-color: #fff;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ z-index: 1000;
+}
+.mx_MessageComposerFormatBar.mx_MessageComposerFormatBar_shown {
+ display: block;
+}
+.mx_MessageComposerFormatBar > * {
+ white-space: nowrap;
+ display: inline-block;
+ position: relative;
+ border: 1px solid #e9edf1;
+ margin-left: -1px;
+}
+.mx_MessageComposerFormatBar > :hover {
+ border-color: #ddd;
+ z-index: 1;
+}
+.mx_MessageComposerFormatBar > :first-child {
+ border-radius: 3px 0 0 3px;
+}
+.mx_MessageComposerFormatBar > :last-child {
+ border-radius: 0 3px 3px 0;
+}
+.mx_MessageComposerFormatBar > :only-child {
+ border-radius: 3px;
+}
+.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button {
+ width: 27px;
+ height: 24px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ background: none;
+ vertical-align: middle;
+}
+.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #2e2f32;
+}
+.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconBold:after {
+ -webkit-mask-image: url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);
+ mask-image: url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);
+}
+.mx_MessageComposerFormatBar
+ .mx_MessageComposerFormatBar_buttonIconItalic:after {
+ -webkit-mask-image: url(../../img/element-icons/room/format-bar/italic.bf18054.svg);
+ mask-image: url(../../img/element-icons/room/format-bar/italic.bf18054.svg);
+}
+.mx_MessageComposerFormatBar
+ .mx_MessageComposerFormatBar_buttonIconStrikethrough:after {
+ -webkit-mask-image: url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);
+ mask-image: url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);
+}
+.mx_MessageComposerFormatBar
+ .mx_MessageComposerFormatBar_buttonIconQuote:after {
+ -webkit-mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
+ mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
+}
+.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconCode:after {
+ -webkit-mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
+ mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
+}
+.mx_MessageComposerFormatBar_buttonTooltip {
+ white-space: nowrap;
+ font-size: 1.3rem;
+ font-weight: 600;
+ min-width: 54px;
+ text-align: center;
+}
+.mx_MessageComposerFormatBar_buttonTooltip
+ .mx_MessageComposerFormatBar_tooltipShortcut {
+ font-size: 0.9rem;
+ opacity: 0.7;
+}
+.mx_NewRoomIntro {
+ margin: 40px 0 48px 64px;
+}
+.mx_NewRoomIntro
+ .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):after,
+.mx_NewRoomIntro
+ .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):before {
+ content: unset;
+}
+.mx_NewRoomIntro .mx_AccessibleButton_kind_link {
+ padding: 0;
+ font-size: inherit;
+}
+.mx_NewRoomIntro .mx_NewRoomIntro_buttons {
+ margin-top: 28px;
+}
+.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton {
+ line-height: 2.4rem;
+ display: inline-block;
+}
+.mx_NewRoomIntro
+ .mx_NewRoomIntro_buttons
+ .mx_AccessibleButton
+ + .mx_AccessibleButton {
+ margin-left: 12px;
+}
+.mx_NewRoomIntro
+ .mx_NewRoomIntro_buttons
+ .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary_outline):before {
+ content: "";
+ display: inline-block;
+ background-color: #fff;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ width: 20px;
+ height: 20px;
+ margin-right: 5px;
+ vertical-align: text-bottom;
+}
+.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_NewRoomIntro_inviteButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+}
+.mx_NewRoomIntro > h2 {
+ margin-top: 24px;
+ font-size: 2.4rem;
+ font-weight: 600;
+}
+.mx_NewRoomIntro > p {
+ margin: 0;
+ font-size: 1.5rem;
+ color: #737d8c;
+}
+.mx_NotificationBadge:not(.mx_NotificationBadge_visible) {
+ display: none;
+}
+.mx_NotificationBadge.mx_NotificationBadge_visible {
+ background-color: #61708b;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_highlighted {
+ background-color: #ff4b55;
+}
+.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot {
+ background-color: #2e2f32;
+ width: 6px;
+ height: 6px;
+ border-radius: 6px;
+}
+.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char {
+ width: 1.6rem;
+ height: 1.6rem;
+ border-radius: 1.6rem;
+}
+.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_3char {
+ width: 2.6rem;
+ height: 1.6rem;
+ border-radius: 1.6rem;
+}
+.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count {
+ font-size: 1rem;
+ line-height: 1.4rem;
+ color: #fff;
+}
+.mx_PinnedEventTile {
+ min-height: 40px;
+ margin-bottom: 5px;
+ width: 100%;
+ border-radius: 5px;
+}
+.mx_PinnedEventTile:hover {
+ background-color: #f6f7f8;
+}
+.mx_PinnedEventTile .mx_PinnedEventTile_sender,
+.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
+ color: #868686;
+ font-size: 0.8em;
+ vertical-align: top;
+ display: inline-block;
+ padding-bottom: 3px;
+}
+.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
+ padding-left: 15px;
+ display: none;
+}
+.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar {
+ float: left;
+ margin-right: 10px;
+}
+.mx_PinnedEventTile_actions {
+ float: right;
+ margin-right: 10px;
+ display: none;
+}
+.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp {
+ display: inline-block;
+}
+.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
+ display: block;
+}
+.mx_PinnedEventTile_unpinButton {
+ display: inline-block;
+ cursor: pointer;
+ margin-left: 10px;
+}
+.mx_PinnedEventTile_gotoButton {
+ display: inline-block;
+ font-size: 0.7em;
+}
+.mx_PinnedEventTile_message {
+ margin-left: 50px;
+ position: relative;
+ top: 0;
+ left: 0;
+}
+.mx_PinnedEventsPanel {
+ border-top: 1px solid transparent;
+}
+.mx_PinnedEventsPanel_body {
+ max-height: 300px;
+ overflow-y: auto;
+ padding-bottom: 15px;
+}
+.mx_PinnedEventsPanel_header {
+ margin: 0;
+ padding-top: 8px;
+ padding-bottom: 15px;
+}
+.mx_PinnedEventsPanel_cancel {
+ margin: 12px;
+ float: right;
+ display: inline-block;
+}
+.mx_PresenceLabel {
+ font-size: 1.1rem;
+ opacity: 0.5;
+}
+.mx_ReplyPreview {
+ background: #fff;
+ border: 1px solid transparent;
+ border-bottom: none;
+ border-radius: 8px 8px 0 0;
+ max-height: 50vh;
+ overflow: auto;
+ -webkit-box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
+ box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
+}
+.mx_ReplyPreview_section {
+ border-bottom: 1px solid transparent;
+}
+.mx_ReplyPreview_header {
+ margin: 12px;
+ color: #2e2f32;
+ font-weight: 400;
+ opacity: 0.4;
+}
+.mx_ReplyPreview_title {
+ float: left;
+}
+.mx_ReplyPreview_cancel {
+ float: right;
+ cursor: pointer;
+}
+.mx_ReplyPreview_clear {
+ clear: both;
+}
+.mx_RoomBreadcrumbs {
+ width: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+}
+.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb {
+ margin-right: 8px;
+ width: 32px;
+}
+.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter {
+ margin-left: -40px;
+}
+.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter-active {
+ margin-left: 0;
+ -webkit-transition: margin-left 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
+ transition: margin-left 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
+}
+.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_placeholder {
+ font-weight: 600;
+ font-size: 1.4rem;
+ line-height: 32px;
+ height: 32px;
+}
+.mx_RoomBreadcrumbs_Tooltip {
+ margin-left: -42px;
+ margin-top: -42px;
+}
+.mx_RoomHeader {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 50px;
+ flex: 0 0 50px;
+ border-bottom: 1px solid transparent;
+ background-color: #fff;
+}
+.mx_RoomHeader .mx_RoomHeader_e2eIcon {
+ height: 12px;
+ width: 12px;
+}
+.mx_RoomHeader .mx_RoomHeader_e2eIcon .mx_E2EIcon {
+ margin: 0;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+}
+.mx_RoomHeader_wrapper {
+ margin: auto;
+ height: 50px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ min-width: 0;
+ padding: 0 10px 0 18px;
+}
+.mx_RoomHeader_wrapper .mx_InviteOnlyIcon_large {
+ margin: 0;
+}
+.mx_RoomHeader_spinner {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ height: 36px;
+ padding-left: 12px;
+ padding-right: 12px;
+}
+.mx_RoomHeader_textButton {
+ vertical-align: middle;
+ border: 0;
+ border-radius: 8px;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-size: 1.4rem;
+ color: #fff;
+ background-color: #0dbd8b;
+ width: auto;
+ padding: 7px 1.5em;
+ cursor: pointer;
+ display: inline-block;
+ outline: none;
+ margin-right: 8px;
+ margin-top: -5px;
+}
+.mx_RoomHeader_textButton_danger {
+ background-color: #ff4b55;
+}
+.mx_RoomHeader_cancelButton {
+ cursor: pointer;
+ padding-left: 12px;
+ padding-right: 12px;
+}
+.mx_RoomHeader_buttons {
+ background-color: #fff;
+}
+.mx_RoomHeader_buttons,
+.mx_RoomHeader_info {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_RoomHeader_info {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_RoomHeader_simpleHeader {
+ line-height: 5.2rem;
+ color: #45474a;
+ font-size: 1.8rem;
+ font-weight: 600;
+ overflow: hidden;
+ margin-left: 63px;
+ text-overflow: ellipsis;
+ width: 100%;
+}
+.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton {
+ float: right;
+}
+.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon {
+ margin-left: 14px;
+ margin-right: 24px;
+ vertical-align: -4px;
+}
+.mx_RoomHeader_name {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ overflow: hidden;
+ color: #45474a;
+ font-weight: 600;
+ font-size: 1.8rem;
+ margin: 0 7px;
+ border-bottom: 1px solid transparent;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_RoomHeader_nametext {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.mx_RoomHeader_settingsHint {
+ color: #a2a2a2 !important;
+}
+.mx_RoomHeader_searchStatus {
+ font-weight: 400;
+ opacity: 0.6;
+}
+.mx_RoomHeader_avatar,
+.mx_RoomHeader_avatarPicker,
+.mx_RoomHeader_avatarPicker_edit,
+.mx_RoomHeader_avatarPicker_remove,
+.mx_RoomHeader_name {
+ cursor: pointer;
+}
+.mx_RoomHeader_avatarPicker_remove {
+ position: absolute;
+ top: -11px;
+ right: -9px;
+}
+.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
+ color: #0dbd8b;
+}
+.mx_RoomHeader_placeholder {
+ color: #a2a2a2 !important;
+}
+.mx_RoomHeader_editable {
+ border-bottom: 1px solid #c7c7c7 !important;
+ min-width: 150px;
+ cursor: text;
+}
+.mx_RoomHeader_editable:focus {
+ border-bottom: 1px solid #0dbd8b !important;
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.mx_RoomHeader_topic {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ color: #9e9e9e;
+ font-weight: 400;
+ font-size: 1.3rem;
+ margin: 4px 7px 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ border-bottom: 1px solid transparent;
+ line-height: 1.2em;
+ max-height: 2.4em;
+}
+.mx_RoomHeader_avatar {
+ -webkit-box-flex: 0;
+ -ms-flex: 0;
+ flex: 0;
+ margin: 0 6px 0 7px;
+ position: relative;
+}
+.mx_RoomHeader_avatar .mx_BaseAvatar_image {
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+.mx_RoomHeader_avatarPicker {
+ position: relative;
+}
+.mx_RoomHeader_avatarPicker_edit {
+ position: absolute;
+ left: 16px;
+ top: 18px;
+}
+.mx_RoomHeader_avatarPicker_edit > label {
+ cursor: pointer;
+}
+.mx_RoomHeader_avatarPicker_edit > input {
+ display: none;
+}
+.mx_RoomHeader_button {
+ position: relative;
+ margin-left: 1px;
+ margin-right: 1px;
+ cursor: pointer;
+ height: 32px;
+ width: 32px;
+ border-radius: 100%;
+}
+.mx_RoomHeader_button:before {
+ content: "";
+ position: absolute;
+ top: 4px;
+ left: 4px;
+ height: 24px;
+ width: 24px;
+ background-color: #c1c6cd;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_RoomHeader_button:hover {
+ background: rgba(13, 189, 139, 0.1);
+}
+.mx_RoomHeader_button:hover:before {
+ background-color: #0dbd8b;
+}
+.mx_RoomHeader_forgetButton:before {
+ -webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
+ mask-image: url(../../img/element-icons/leave.bb917e7.svg);
+ width: 26px;
+}
+.mx_RoomHeader_appsButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/apps.5ee9f78.svg);
+ mask-image: url(../../img/element-icons/room/apps.5ee9f78.svg);
+}
+.mx_RoomHeader_appsButton_highlight:before {
+ background-color: #0dbd8b;
+}
+.mx_RoomHeader_searchButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/search-inset.db6314d.svg);
+ mask-image: url(../../img/element-icons/room/search-inset.db6314d.svg);
+}
+.mx_RoomHeader_voiceCallButton:before {
+ -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+ mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_RoomHeader_videoCallButton:before {
+ -webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
+ mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
+}
+.mx_RoomHeader_showPanel {
+ height: 16px;
+}
+.mx_RoomHeader_voipButton {
+ display: table-cell;
+}
+.mx_RoomHeader_voipButtons {
+ margin-top: 18px;
+}
+.mx_RoomHeader_pinnedButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/pin.6ab67ed.svg);
+ mask-image: url(../../img/element-icons/room/pin.6ab67ed.svg);
+}
+.mx_RoomHeader_pinsIndicator {
+ position: absolute;
+ right: 0;
+ bottom: 4px;
+ width: 8px;
+ height: 8px;
+ border-radius: 8px;
+ background-color: #8d99a5;
+}
+.mx_RoomHeader_pinsIndicatorUnread {
+ background-color: #ff4b55;
+}
+@media only screen and (max-width: 480px) {
+ .mx_RoomHeader_wrapper {
+ padding: 0;
+ }
+ .mx_RoomHeader {
+ overflow: hidden;
+ }
+}
+.mx_RoomList {
+ padding-right: 7px;
+}
+.mx_RoomList_iconPlus:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
+ mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
+}
+.mx_RoomList_iconHash:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
+ mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
+}
+.mx_RoomList_iconExplore:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
+ mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
+}
+.mx_RoomList_iconBrowse:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
+ mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
+}
+.mx_RoomList_iconDialpad:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/dialpad.37f876f.svg);
+ mask-image: url(../../img/element-icons/roomlist/dialpad.37f876f.svg);
+}
+.mx_RoomList_explorePrompt {
+ margin: 4px 12px;
+ padding-top: 12px;
+ border-top: 1px solid #e7e7e7;
+ font-size: 1.4rem;
+}
+.mx_RoomList_explorePrompt div:first-child {
+ font-weight: 600;
+ line-height: 1.8rem;
+ color: #2e2f32;
+}
+.mx_RoomList_explorePrompt .mx_AccessibleButton {
+ color: #2e2f32;
+ position: relative;
+ padding: 8px 8px 8px 32px;
+ font-size: inherit;
+ margin-top: 12px;
+ display: block;
+ text-align: start;
+ background-color: rgba(141, 151, 165, 0.2);
+ border-radius: 4px;
+}
+.mx_RoomList_explorePrompt .mx_AccessibleButton:before {
+ content: "";
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ background: #737d8c;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+}
+.mx_RoomList_explorePrompt
+ .mx_AccessibleButton.mx_RoomList_explorePrompt_startChat:before {
+ -webkit-mask-image: url(../../img/element-icons/feedback.a91241e.svg);
+ mask-image: url(../../img/element-icons/feedback.a91241e.svg);
+}
+.mx_RoomList_explorePrompt
+ .mx_AccessibleButton.mx_RoomList_explorePrompt_explore:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
+ mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
+}
+.mx_RoomList_explorePrompt
+ .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceInvite:before {
+ -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+}
+.mx_RoomList_explorePrompt
+ .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceExplore:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
+ mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
+}
+.mx_RoomPreviewBar {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+}
+.mx_RoomPreviewBar h3 {
+ font-size: 1.8rem;
+ font-weight: 600;
+}
+.mx_RoomPreviewBar h3.mx_RoomPreviewBar_spinnerTitle {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_RoomPreviewBar .mx_RoomPreviewBar_message p,
+.mx_RoomPreviewBar h3 {
+ word-break: break-all;
+ word-break: break-word;
+}
+.mx_RoomPreviewBar .mx_Spinner {
+ width: auto;
+ height: auto;
+ margin: 10px 10px 10px 0;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.mx_RoomPreviewBar .mx_RoomPreviewBar_footer {
+ font-size: 1.2rem;
+ line-height: 2rem;
+}
+.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner {
+ vertical-align: middle;
+ display: inline-block;
+}
+.mx_RoomPreviewBar_actions,
+.mx_RoomPreviewBar_message {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_RoomPreviewBar_message {
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+}
+.mx_RoomPreviewBar_message p {
+ overflow-wrap: break-word;
+}
+.mx_RoomPreviewBar_panel {
+ padding: 8px 8px 8px 20px;
+ border-top: 1px solid transparent;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ padding: 3px 8px;
+}
+.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions > * {
+ margin-left: 12px;
+}
+.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 0px;
+ flex: 1 0 0;
+ min-width: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message > * {
+ margin: 4px;
+}
+.mx_RoomPreviewBar_dialog {
+ margin: auto;
+ -webkit-box-sizing: content;
+ box-sizing: content;
+ width: 400px;
+ border-radius: 4px;
+ padding: 20px;
+ text-align: center;
+}
+.mx_RoomPreviewBar_dialog,
+.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message > * {
+ margin: 5px 0 20px;
+}
+.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: reverse;
+ -ms-flex-direction: column-reverse;
+ flex-direction: column-reverse;
+}
+.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton {
+ padding: 7px 50px;
+}
+.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions > * {
+ margin-top: 12px;
+}
+.mx_RoomPreviewBar_dialog
+ .mx_RoomPreviewBar_actions
+ .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
+ margin-bottom: 7px;
+}
+.mx_RoomPreviewBar_inviter {
+ font-weight: 600;
+}
+a.mx_RoomPreviewBar_inviter {
+ text-decoration: underline;
+ cursor: pointer;
+}
+.mx_RoomSublist {
+ margin-left: 8px;
+ margin-bottom: 4px;
+}
+.mx_RoomSublist.mx_RoomSublist_hidden {
+ display: none;
+}
+.mx_RoomSublist .mx_RoomSublist_headerContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding-bottom: 8px;
+ max-height: 24px;
+ color: #8d99a5;
+}
+.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky {
+ position: fixed;
+ height: 32px;
+ width: calc(100% - 22px);
+}
+.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_badgeContainer
+ .mx_NotificationBadge {
+ margin-left: 8px;
+}
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux)
+ .mx_NotificationBadge {
+ margin-right: 4px;
+}
+.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton,
+.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
+ margin-left: 8px;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ border-radius: 8px;
+}
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_auxButton:before,
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_menuButton:before {
+ content: "";
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ top: 4px;
+ left: 4px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #61708b;
+}
+.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover,
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_menuButton:hover {
+ background: rgba(141, 151, 165, 0.2);
+}
+.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
+ visibility: hidden;
+ width: 0;
+ margin: 0;
+}
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_auxButton:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/plus.daac9ba.svg);
+ mask-image: url(../../img/element-icons/roomlist/plus.daac9ba.svg);
+}
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_menuButton:before {
+ -webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
+ mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
+}
+.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ max-width: calc(100% - 16px);
+ line-height: 1.6rem;
+ font-size: 1.3rem;
+ font-weight: 600;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_headerText
+ .mx_RoomSublist_collapseBtn {
+ display: inline-block;
+ position: relative;
+ width: 14px;
+ height: 14px;
+ margin-right: 6px;
+}
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_headerText
+ .mx_RoomSublist_collapseBtn:before {
+ content: "";
+ width: 18px;
+ height: 18px;
+ position: absolute;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #8d99a5;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+.mx_RoomSublist
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_headerText
+ .mx_RoomSublist_collapseBtn.mx_RoomSublist_collapseBtn_collapsed:before {
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+}
+.mx_RoomSublist:first-child .mx_RoomSublist_headerContainer {
+ height: 0;
+ padding-bottom: 4px;
+}
+.mx_RoomSublist .mx_RoomSublist_resizeBox {
+ position: relative;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_RoomSublist .mx_RoomSublist_resizeBox,
+.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ overflow: hidden;
+}
+.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 0px;
+ flex: 1 0 0;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-mask-image: linear-gradient(0deg, transparent, #000 4px);
+ mask-image: linear-gradient(0deg, transparent, #000 4px);
+}
+.mx_RoomSublist
+ .mx_RoomSublist_resizeBox
+ .mx_RoomSublist_resizerHandles_showNButton {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 32px;
+ flex: 0 0 32px;
+}
+.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 4px;
+ flex: 0 0 4px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ width: 100%;
+}
+.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandle {
+ cursor: ns-resize;
+ border-radius: 3px;
+ max-width: 64px;
+ height: 4px !important;
+ position: relative !important;
+ bottom: 0 !important;
+}
+.mx_RoomSublist
+ .mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen
+ .mx_RoomSublist_resizerHandle,
+.mx_RoomSublist .mx_RoomSublist_resizeBox:hover .mx_RoomSublist_resizerHandle {
+ opacity: 0.8;
+ background-color: #2e2f32;
+}
+.mx_RoomSublist .mx_RoomSublist_showNButton {
+ cursor: pointer;
+ font-size: 1.3rem;
+ line-height: 1.8rem;
+ color: #737d8c;
+ height: 24px;
+ padding-bottom: 4px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron {
+ position: relative;
+ width: 18px;
+ height: 18px;
+ margin-left: 12px;
+ margin-right: 16px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #8d99a5;
+ left: -1px;
+}
+.mx_RoomSublist
+ .mx_RoomSublist_showNButton
+ .mx_RoomSublist_showLessButtonChevron,
+.mx_RoomSublist
+ .mx_RoomSublist_showNButton
+ .mx_RoomSublist_showMoreButtonChevron {
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+.mx_RoomSublist
+ .mx_RoomSublist_showNButton
+ .mx_RoomSublist_showLessButtonChevron {
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+.mx_RoomSublist.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,
+.mx_RoomSublist:not(.mx_RoomSublist_minimized)
+ > .mx_RoomSublist_headerContainer:focus-within
+ .mx_RoomSublist_menuButton,
+.mx_RoomSublist:not(.mx_RoomSublist_minimized)
+ > .mx_RoomSublist_headerContainer:hover
+ .mx_RoomSublist_menuButton {
+ visibility: visible;
+ width: 24px;
+ margin-left: 8px;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer {
+ height: auto;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ position: relative;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_badgeContainer {
+ -webkit-box-ordinal-group: 1;
+ -ms-flex-order: 0;
+ order: 0;
+ -ms-flex-item-align: end;
+ align-self: flex-end;
+ margin-right: 0;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_stickable {
+ -webkit-box-ordinal-group: 2;
+ -ms-flex-order: 1;
+ order: 1;
+ max-width: 100%;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_auxButton {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ visibility: visible;
+ width: 32px !important;
+ height: 32px !important;
+ margin-left: 0 !important;
+ background-color: rgba(141, 151, 165, 0.2);
+ margin-top: 8px;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized
+ .mx_RoomSublist_headerContainer
+ .mx_RoomSublist_auxButton:before {
+ top: 8px;
+ left: 8px;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_resizeBox {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized
+ .mx_RoomSublist_showNButton
+ .mx_RoomSublist_showNButtonChevron {
+ margin-right: 12px;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_menuButton {
+ height: 16px;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen
+ .mx_RoomSublist_menuButton,
+.mx_RoomSublist.mx_RoomSublist_minimized
+ > .mx_RoomSublist_headerContainer:hover
+ .mx_RoomSublist_menuButton {
+ visibility: visible;
+ position: absolute;
+ bottom: 48px;
+ right: 0;
+ width: 16px;
+ height: 16px;
+ border-radius: 0;
+ z-index: 1;
+ background-color: hsla(0, 0%, 96.1%, 0.9);
+}
+.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen
+ .mx_RoomSublist_menuButton:before,
+.mx_RoomSublist.mx_RoomSublist_minimized
+ > .mx_RoomSublist_headerContainer:hover
+ .mx_RoomSublist_menuButton:before {
+ top: 0;
+ left: 0;
+}
+.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux)
+ .mx_RoomSublist_menuButton,
+.mx_RoomSublist.mx_RoomSublist_minimized
+ > .mx_RoomSublist_headerContainer:hover.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux)
+ .mx_RoomSublist_menuButton {
+ bottom: 8px;
+}
+.mx_RoomSublist_contextMenu {
+ padding: 20px 16px;
+ width: 250px;
+}
+.mx_RoomSublist_contextMenu hr {
+ margin-top: 16px;
+ margin-bottom: 16px;
+ margin-right: 16px;
+ border: 1px solid #2e2f32;
+ opacity: 0.1;
+}
+.mx_RoomSublist_contextMenu .mx_RoomSublist_contextMenu_title {
+ font-size: 1.5rem;
+ line-height: 2rem;
+ font-weight: 600;
+ margin-bottom: 4px;
+}
+.mx_RoomSublist_contextMenu .mx_Checkbox,
+.mx_RoomSublist_contextMenu .mx_RadioButton {
+ margin-top: 8px;
+}
+.mx_RoomSublist_addRoomTooltip {
+ margin-top: -3px;
+}
+.mx_RoomSublist_skeletonUI {
+ position: relative;
+ margin-left: 4px;
+ height: 288px;
+}
+.mx_RoomSublist_skeletonUI:before {
+ background: -webkit-gradient(
+ linear,
+ left top,
+ left bottom,
+ from(#fff),
+ to(hsla(0, 0%, 100%, 0))
+ );
+ background: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, 0));
+ width: 100%;
+ height: 100%;
+ content: "";
+ position: absolute;
+ -webkit-mask-repeat: repeat-y;
+ mask-repeat: repeat-y;
+ -webkit-mask-size: auto 48px;
+ mask-size: auto 48px;
+ -webkit-mask-image: url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);
+ mask-image: url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);
+}
+.mx_RoomTile {
+ margin-bottom: 4px;
+ padding: 4px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_RoomTile.mx_RoomTile_hasMenuOpen,
+.mx_RoomTile.mx_RoomTile_selected,
+.mx_RoomTile:focus-within,
+.mx_RoomTile:hover {
+ background-color: #fff;
+ border-radius: 8px;
+}
+.mx_RoomTile .mx_DecoratedRoomAvatar,
+.mx_RoomTile .mx_RoomTile_avatarContainer {
+ margin-right: 8px;
+}
+.mx_RoomTile .mx_RoomTile_nameContainer {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ min-width: 0;
+ margin-right: 8px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview,
+.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name {
+ margin: 0 2px;
+ width: 100%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name {
+ font-size: 1.4rem;
+ line-height: 1.8rem;
+}
+.mx_RoomTile
+ .mx_RoomTile_nameContainer
+ .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
+ font-weight: 600;
+}
+.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview {
+ font-size: 1.3rem;
+ line-height: 1.8rem;
+ color: #737d8c;
+}
+.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_nameWithPreview {
+ margin-top: -4px;
+}
+.mx_RoomTile .mx_RoomTile_notificationsButton {
+ margin-left: 4px;
+}
+.mx_RoomTile .mx_RoomTile_badgeContainer {
+ height: 16px;
+ margin: auto 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge {
+ margin-right: 2px;
+}
+.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge_dot {
+ margin-left: 5px;
+ margin-right: 7px;
+}
+.mx_RoomTile .mx_RoomTile_menuButton,
+.mx_RoomTile .mx_RoomTile_notificationsButton {
+ width: 20px;
+ min-width: 20px;
+ height: 20px;
+ margin-top: auto;
+ margin-bottom: auto;
+ position: relative;
+ display: none;
+}
+.mx_RoomTile .mx_RoomTile_menuButton:before,
+.mx_RoomTile .mx_RoomTile_notificationsButton:before {
+ top: 2px;
+ left: 2px;
+ content: "";
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #2e2f32;
+}
+.mx_RoomTile
+ .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
+ display: block;
+}
+.mx_RoomTile .mx_RoomTile_menuButton:before {
+ -webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
+ mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
+}
+.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen
+ .mx_RoomTile_badgeContainer,
+.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within
+ .mx_RoomTile_badgeContainer,
+.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_badgeContainer {
+ width: 0;
+ height: 0;
+ display: none;
+}
+.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen
+ .mx_RoomTile_menuButton,
+.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen
+ .mx_RoomTile_notificationsButton,
+.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_menuButton,
+.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within
+ .mx_RoomTile_notificationsButton,
+.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_menuButton,
+.mx_RoomTile:not(.mx_RoomTile_minimized):hover
+ .mx_RoomTile_notificationsButton {
+ display: block;
+}
+.mx_RoomTile.mx_RoomTile_minimized {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ position: relative;
+}
+.mx_RoomTile.mx_RoomTile_minimized .mx_DecoratedRoomAvatar,
+.mx_RoomTile.mx_RoomTile_minimized .mx_RoomTile_avatarContainer {
+ margin-right: 0;
+}
+.mx_RoomTile_iconBell:before {
+ -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+ mask-image: url(../../img/element-icons/notifications.d298b39.svg);
+}
+.mx_RoomTile_iconBellDot:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);
+ mask-image: url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);
+}
+.mx_RoomTile_iconBellCrossed:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
+ mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
+}
+.mx_RoomTile_iconBellMentions:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);
+ mask-image: url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);
+}
+.mx_RoomTile_contextMenu .mx_RoomTile_iconStar:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/favorite.ff7609d.svg);
+ mask-image: url(../../img/element-icons/roomlist/favorite.ff7609d.svg);
+}
+.mx_RoomTile_contextMenu .mx_RoomTile_iconArrowDown:before {
+ -webkit-mask-image: url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);
+ mask-image: url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);
+}
+.mx_RoomTile_contextMenu .mx_RoomTile_iconSettings:before {
+ -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
+ mask-image: url(../../img/element-icons/settings.6b381af.svg);
+}
+.mx_RoomTile_contextMenu .mx_RoomTile_iconInvite:before {
+ -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+}
+.mx_RoomTile_contextMenu .mx_RoomTile_iconSignOut:before {
+ -webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
+ mask-image: url(../../img/element-icons/leave.bb917e7.svg);
+}
+.mx_RoomUpgradeWarningBar {
+ max-height: 235px;
+ background-color: #f7f7f7;
+ padding-left: 20px;
+ padding-right: 20px;
+ overflow: scroll;
+}
+.mx_RoomUpgradeWarningBar_wrapped {
+ width: 100%;
+ height: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ text-align: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-align-items: center;
+}
+.mx_RoomUpgradeWarningBar_header {
+ color: #ff4b55;
+ font-weight: 700;
+}
+.mx_RoomUpgradeWarningBar_body {
+ color: #ff4b55;
+}
+.mx_RoomUpgradeWarningBar_upgradelink {
+ color: #ff4b55;
+ text-decoration: underline;
+}
+.mx_RoomUpgradeWarningBar_small {
+ color: #888;
+ font-size: 70%;
+}
+.mx_SearchBar {
+ height: 56px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border-bottom: 1px solid transparent;
+}
+.mx_SearchBar .mx_SearchBar_input {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 0px;
+ flex: 1 1 0;
+ margin-left: 22px;
+}
+.mx_SearchBar .mx_SearchBar_searchButton {
+ cursor: pointer;
+ width: 37px;
+ height: 37px;
+ background-color: #0dbd8b;
+ -webkit-mask: url(../../img/feather-customised/search-input.044bfa7.svg);
+ mask: url(../../img/feather-customised/search-input.044bfa7.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_SearchBar .mx_SearchBar_buttons {
+ display: inherit;
+}
+.mx_SearchBar .mx_SearchBar_button {
+ border: 0;
+ margin: 0 0 0 22px;
+ padding: 5px;
+ font-size: 1.5rem;
+ cursor: pointer;
+ color: #2e2f32;
+ border-bottom: 2px solid #0dbd8b;
+ font-weight: 600;
+}
+.mx_SearchBar .mx_SearchBar_unselected {
+ color: #9fa9ba;
+ border-color: transparent;
+}
+.mx_SearchBar .mx_SearchBar_cancel {
+ background-color: #ff4b55;
+ -webkit-mask: url(../../img/cancel.4b9715b.svg);
+ mask: url(../../img/cancel.4b9715b.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 14px;
+ mask-size: 14px;
+ padding: 9px;
+ margin: 0 12px 0 3px;
+ cursor: pointer;
+}
+.mx_SendMessageComposer {
+ -ms-flex: 1;
+ flex: 1;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ font-size: 1.4rem;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ margin-right: 6px;
+ min-width: 0;
+}
+.mx_SendMessageComposer,
+.mx_SendMessageComposer .mx_BasicMessageComposer {
+ -webkit-box-flex: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+}
+.mx_SendMessageComposer .mx_BasicMessageComposer {
+ -ms-flex: 1;
+ flex: 1;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ min-height: 50px;
+}
+.mx_SendMessageComposer
+ .mx_BasicMessageComposer
+ .mx_BasicMessageComposer_input {
+ padding: 3px 0;
+ margin: auto 0;
+ max-height: 140px;
+ overflow-y: auto;
+}
+.mx_Stickers_content {
+ overflow: hidden;
+}
+.mx_Stickers_content_container {
+ overflow: hidden;
+ height: 300px;
+}
+#mx_persistedElement_stickerPicker .mx_AppTileFullWidth {
+ height: unset;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-left: none;
+ border-right: none;
+ border-bottom: none;
+}
+#mx_persistedElement_stickerPicker .mx_AppTileMenuBar {
+ padding: 0;
+}
+#mx_persistedElement_stickerPicker iframe {
+ height: 283px;
+}
+.mx_Stickers_contentPlaceholder {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ text-align: center;
+}
+.mx_Stickers_contentPlaceholder p {
+ max-width: 200px;
+}
+.mx_Stickers_addLink {
+ display: inline;
+ cursor: pointer;
+ color: #0dbd8b;
+}
+.mx_Stickers_hideStickers {
+ z-index: 2001;
+}
+.mx_TopUnreadMessagesBar {
+ z-index: 1000;
+ position: absolute;
+ top: 24px;
+ right: 24px;
+ width: 38px;
+}
+.mx_TopUnreadMessagesBar:after {
+ content: "";
+ position: absolute;
+ top: -8px;
+ left: 10.5px;
+ width: 4px;
+ height: 4px;
+ border-radius: 16px;
+ background-color: #f2f5f8;
+ border: 6px solid #0dbd8b;
+ pointer-events: none;
+}
+.mx_TopUnreadMessagesBar_scrollUp {
+ height: 38px;
+ border-radius: 19px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ background: #fff;
+ border: 1.3px solid #61708b;
+ cursor: pointer;
+}
+.mx_TopUnreadMessagesBar_scrollUp:before {
+ content: "";
+ position: absolute;
+ width: 36px;
+ height: 36px;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
+ mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ background: #61708b;
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+.mx_TopUnreadMessagesBar_markAsRead {
+ display: block;
+ width: 18px;
+ height: 18px;
+ background: #fff;
+ border: 1.3px solid #61708b;
+ border-radius: 10px;
+ margin: 5px auto;
+}
+.mx_TopUnreadMessagesBar_markAsRead:before {
+ content: "";
+ position: absolute;
+ width: 18px;
+ height: 18px;
+ -webkit-mask-image: url(../../img/cancel.4b9715b.svg);
+ mask-image: url(../../img/cancel.4b9715b.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 10px;
+ mask-size: 10px;
+ -webkit-mask-position: 4px 4px;
+ mask-position: 4px 4px;
+ background: #61708b;
+}
+.mx_VoiceRecordComposerTile_stop {
+ width: 28px;
+ height: 28px;
+ border: 2px solid #e3e8f0;
+ border-radius: 32px;
+ margin-right: 16px;
+ position: relative;
+}
+.mx_VoiceRecordComposerTile_stop:after {
+ content: "";
+ width: 14px;
+ height: 14px;
+ position: absolute;
+ top: 7px;
+ left: 7px;
+ border-radius: 2px;
+ background-color: #ff4b55;
+}
+.mx_VoiceRecordComposerTile_delete {
+ width: 14px;
+ height: 18px;
+ vertical-align: middle;
+ margin-right: 11px;
+ background-color: #8d99a5;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
+ mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
+}
+.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer {
+ margin: 6px 12px 6px 6px;
+ position: relative;
+}
+.mx_MessageComposer_row
+ .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording {
+ padding-left: 22px;
+}
+.mx_MessageComposer_row
+ .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording:before {
+ -webkit-animation: recording-pulse 2s infinite;
+ animation: recording-pulse 2s infinite;
+ content: "";
+ background-color: #ff4b55;
+ width: 10px;
+ height: 10px;
+ position: absolute;
+ left: 12px;
+ top: 18px;
+ border-radius: 10px;
+}
+@-webkit-keyframes recording-pulse {
+ 0% {
+ opacity: 1;
+ }
+ 35% {
+ opacity: 0;
+ }
+ 65% {
+ opacity: 1;
+ }
+}
+@keyframes recording-pulse {
+ 0% {
+ opacity: 1;
+ }
+ 35% {
+ opacity: 0;
+ }
+ 65% {
+ opacity: 1;
+ }
+}
+.mx_WhoIsTypingTile {
+ margin-left: -18px;
+ padding-top: 18px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_WhoIsTypingTile_avatars {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 83px;
+ flex: 0 0 83px;
+ text-align: center;
+}
+.mx_WhoIsTypingTile_avatars > :not(:first-child) {
+ margin-left: -12px;
+}
+.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial {
+ padding-top: 1px;
+}
+.mx_WhoIsTypingTile_avatars .mx_BaseAvatar {
+ border: 1px solid #fff;
+ border-radius: 40px;
+}
+.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
+ position: relative;
+ display: inline-block;
+ color: #acacac;
+ background-color: #ddd;
+ border: 1px solid #fff;
+ border-radius: 40px;
+ width: 24px;
+ height: 24px;
+ line-height: 2.4rem;
+ font-size: 0.8em;
+ vertical-align: top;
+ text-align: center;
+}
+.mx_WhoIsTypingTile_label {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ font-size: 1.4rem;
+ font-weight: 600;
+ color: #9e9e9e;
+}
+.mx_WhoIsTypingTile_label > span {
+ background-image: url(../../img/typing-indicator-2x.0eb9f0e.gif);
+ background-size: 25px;
+ background-position: 0 100%;
+ background-repeat: no-repeat;
+ padding-bottom: 15px;
+ display: block;
+}
+.mx_MatrixChat_useCompactLayout .mx_WhoIsTypingTile {
+ padding-top: 4px;
+}
+.mx_AvatarSetting_avatar {
+ width: 90px;
+ min-width: 90px;
+ height: 90px;
+ margin-top: 8px;
+ position: relative;
+}
+.mx_AvatarSetting_avatar .mx_AvatarSetting_hover {
+ -webkit-transition: opacity 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96);
+ transition: opacity 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96);
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ pointer-events: none;
+ line-height: 90px;
+ text-align: center;
+}
+.mx_AvatarSetting_avatar .mx_AvatarSetting_hover > span {
+ color: #fff;
+ position: relative;
+ font-weight: 500;
+}
+.mx_AvatarSetting_avatar .mx_AvatarSetting_hover .mx_AvatarSetting_hoverBg {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ opacity: 0.5;
+ background-color: #2e2f32;
+ border-radius: 90px;
+}
+.mx_AvatarSetting_avatar.mx_AvatarSetting_avatar_hovering
+ .mx_AvatarSetting_hover {
+ opacity: 1;
+}
+.mx_AvatarSetting_avatar:not(.mx_AvatarSetting_avatar_hovering)
+ .mx_AvatarSetting_hover {
+ opacity: 0;
+}
+.mx_AvatarSetting_avatar > * {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
+ margin-top: 8px;
+}
+.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm {
+ width: 100%;
+}
+.mx_AvatarSetting_avatar > img {
+ cursor: pointer;
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder,
+.mx_AvatarSetting_avatar > img {
+ display: block;
+ height: 90px;
+ width: inherit;
+ border-radius: 90px;
+ cursor: pointer;
+}
+.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before {
+ background-color: #2e2f32;
+ -webkit-mask: url(../../img/feather-customised/user.7a4d23d.svg);
+ mask: url(../../img/feather-customised/user.7a4d23d.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 36px;
+ mask-size: 36px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton {
+ width: 32px;
+ height: 32px;
+ border-radius: 32px;
+ background-color: #e7e7e7;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+}
+.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton:before {
+ content: "";
+ display: block;
+ width: 100%;
+ height: 100%;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 55%;
+ mask-size: 55%;
+ background-color: #2e2f32;
+ -webkit-mask-image: url(../../img/feather-customised/edit.fd55ec2.svg);
+ mask-image: url(../../img/feather-customised/edit.fd55ec2.svg);
+}
+.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder {
+ background-color: #f4f6fa;
+}
+.mx_CrossSigningPanel_statusList {
+ border-spacing: 0;
+}
+.mx_CrossSigningPanel_statusList td {
+ padding: 0;
+}
+.mx_CrossSigningPanel_statusList td:first-of-type {
+ -webkit-padding-end: 1em;
+ padding-inline-end: 1em;
+}
+.mx_CrossSigningPanel_buttonRow {
+ margin: 1em 0;
+}
+.mx_CrossSigningPanel_buttonRow :nth-child(n + 1) {
+ -webkit-margin-end: 10px;
+ margin-inline-end: 10px;
+}
+.mx_DevicesPanel {
+ display: table;
+ table-layout: fixed;
+ width: 880px;
+ border-spacing: 10px;
+}
+.mx_DevicesPanel_header {
+ display: table-header-group;
+ font-weight: 700;
+}
+.mx_DevicesPanel_header > .mx_DevicesPanel_deviceButtons {
+ height: 48px;
+}
+.mx_DevicesPanel_header > div {
+ display: table-cell;
+ vertical-align: middle;
+}
+.mx_DevicesPanel_header .mx_DevicesPanel_deviceName {
+ width: 50%;
+}
+.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen {
+ width: 30%;
+}
+.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons {
+ width: 20%;
+}
+.mx_DevicesPanel_device {
+ display: table-row;
+}
+.mx_DevicesPanel_device > div {
+ display: table-cell;
+}
+.mx_DevicesPanel_myDevice {
+ font-weight: 700;
+}
+.mx_E2eAdvancedPanel_settingLongDescription {
+ margin-right: 150px;
+}
+.mx_ExistingEmailAddress {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-bottom: 5px;
+}
+.mx_ExistingEmailAddress_delete {
+ margin-right: 5px;
+ cursor: pointer;
+ vertical-align: middle;
+}
+.mx_ExistingEmailAddress_email,
+.mx_ExistingEmailAddress_promptText {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ margin-right: 10px;
+}
+.mx_ExistingEmailAddress_confirmBtn {
+ margin-left: 5px;
+}
+.mx_IntegrationManager .mx_Dialog {
+ width: 60%;
+ height: 70%;
+ overflow: hidden;
+ padding: 0;
+ max-width: none;
+ max-height: none;
+}
+.mx_IntegrationManager iframe {
+ background-color: #fff;
+ border: 0;
+ width: 100%;
+ height: 100%;
+}
+.mx_IntegrationManager_loading h3 {
+ text-align: center;
+}
+.mx_IntegrationManager_error {
+ text-align: center;
+ padding-top: 20px;
+}
+.mx_IntegrationManager_error h3 {
+ color: #ff4b55;
+}
+.mx_UserNotifSettings_tableRow {
+ display: table-row;
+}
+.mx_UserNotifSettings_inputCell {
+ display: table-cell;
+ padding-bottom: 8px;
+ padding-right: 8px;
+ width: 16px;
+}
+.mx_UserNotifSettings_labelCell {
+ padding-bottom: 8px;
+ width: 400px;
+ display: table-cell;
+}
+.mx_UserNotifSettings_pushRulesTableWrapper {
+ padding-bottom: 8px;
+}
+.mx_UserNotifSettings_pushRulesTable {
+ width: 100%;
+ table-layout: fixed;
+}
+.mx_UserNotifSettings_pushRulesTable thead {
+ font-weight: 700;
+}
+.mx_UserNotifSettings_pushRulesTable tbody th {
+ font-weight: 400;
+}
+.mx_UserNotifSettings_pushRulesTable tbody th:first-child {
+ text-align: left;
+}
+.mx_UserNotifSettings_keywords {
+ cursor: pointer;
+ color: #0dbd8b;
+}
+.mx_UserNotifSettings_devicesTable td {
+ padding-left: 20px;
+ padding-right: 20px;
+}
+.mx_UserNotifSettings_notifTable {
+ display: table;
+ position: relative;
+}
+.mx_UserNotifSettings_notifTable .mx_Spinner {
+ position: absolute;
+}
+.mx_NotificationSound_soundUpload {
+ display: none;
+}
+.mx_NotificationSound_browse {
+ color: #0dbd8b;
+ border: 1px solid #0dbd8b;
+ background-color: transparent;
+}
+.mx_NotificationSound_save {
+ margin-left: 5px;
+ color: #fff;
+ background-color: #0dbd8b;
+}
+.mx_NotificationSound_resetSound {
+ margin-top: 5px;
+ color: #fff;
+ border: #ff4b55;
+ background-color: #ff4b55;
+}
+.mx_ExistingPhoneNumber {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-bottom: 5px;
+}
+.mx_ExistingPhoneNumber_delete {
+ margin-right: 5px;
+ cursor: pointer;
+ vertical-align: middle;
+}
+.mx_ExistingPhoneNumber_address,
+.mx_ExistingPhoneNumber_promptText {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ margin-right: 10px;
+}
+.mx_ExistingPhoneNumber_confirmBtn {
+ margin-left: 5px;
+}
+.mx_ExistingPhoneNumber_verification {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_ExistingPhoneNumber_verification .mx_Field {
+ margin: 0 0 0 1em;
+}
+.mx_PhoneNumbers_input {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_PhoneNumbers_input > .mx_Field {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+.mx_PhoneNumbers_country {
+ width: 80px;
+}
+.mx_ProfileSettings_controls_topic > textarea {
+ resize: vertical;
+}
+.mx_ProfileSettings_profile {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.mx_ProfileSettings_controls {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ margin-right: 54px;
+}
+.mx_ProfileSettings_controls .mx_SettingsTab_subheading {
+ margin-top: 0;
+}
+.mx_ProfileSettings_controls .mx_Field #profileTopic {
+ height: 4em;
+}
+.mx_ProfileSettings_controls .mx_Field:first-child {
+ margin-top: 0;
+}
+.mx_ProfileSettings_hostingSignup {
+ margin-left: 20px;
+}
+.mx_ProfileSettings_hostingSignup img {
+ margin-left: 5px;
+}
+.mx_ProfileSettings_avatarUpload {
+ display: none;
+}
+.mx_ProfileSettings_profileForm {
+ margin-right: 100px;
+ border-bottom: 1px solid #e7e7e7;
+}
+.mx_ProfileSettings_buttons {
+ margin-top: 10px;
+ margin-bottom: 28px;
+}
+.mx_ProfileSettings_buttons > .mx_AccessibleButton_kind_link {
+ padding-left: 0;
+}
+.mx_SecureBackupPanel_deviceNotVerified,
+.mx_SecureBackupPanel_deviceVerified,
+.mx_SecureBackupPanel_sigInvalid,
+.mx_SecureBackupPanel_sigValid {
+ font-weight: 700;
+}
+.mx_SecureBackupPanel_deviceVerified,
+.mx_SecureBackupPanel_sigValid {
+ color: #76cfa5;
+}
+.mx_SecureBackupPanel_deviceNotVerified,
+.mx_SecureBackupPanel_sigInvalid {
+ color: #ba6363;
+}
+.mx_SecureBackupPanel_deviceName {
+ font-style: italic;
+}
+.mx_SecureBackupPanel_buttonRow {
+ margin: 1em 0;
+}
+.mx_SecureBackupPanel_buttonRow :nth-child(n + 1) {
+ -webkit-margin-end: 10px;
+ margin-inline-end: 10px;
+}
+.mx_SecureBackupPanel_statusList {
+ border-spacing: 0;
+}
+.mx_SecureBackupPanel_statusList td {
+ padding: 0;
+}
+.mx_SecureBackupPanel_statusList td:first-of-type {
+ -webkit-padding-end: 1em;
+ padding-inline-end: 1em;
+}
+.mx_SetIdServer .mx_Field_input {
+ margin-right: 100px;
+}
+.mx_SetIdServer_tooltip {
+ max-width: 120px;
+}
+.mx_SetIntegrationManager {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+.mx_SetIntegrationManager > .mx_SettingsTab_heading {
+ margin-bottom: 10px;
+}
+.mx_SetIntegrationManager
+ > .mx_SettingsTab_heading
+ > .mx_SettingsTab_subheading {
+ display: inline-block;
+ padding-left: 5px;
+}
+.mx_SetIntegrationManager .mx_ToggleSwitch {
+ display: inline-block;
+ float: right;
+ top: 9px;
+ margin-right: 100px;
+}
+.mx_ExistingSpellCheckLanguage {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-bottom: 5px;
+}
+.mx_ExistingSpellCheckLanguage_language {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ margin-right: 10px;
+}
+.mx_GeneralUserSettingsTab_spellCheckLanguageInput {
+ margin-top: 1em;
+ margin-bottom: 1em;
+}
+.mx_SpellCheckLanguages {
+ margin-right: 100px;
+}
+.mx_UpdateCheckButton_summary {
+ margin-left: 16px;
+}
+.mx_UpdateCheckButton_summary .mx_AccessibleButton_kind_link {
+ padding: 0;
+}
+.mx_SettingsTab {
+ color: #61708b;
+}
+.mx_SettingsTab_warningText {
+ color: #ff4b55;
+}
+.mx_SettingsTab_heading {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #2e2f32;
+ margin-bottom: 10px;
+}
+.mx_SettingsTab_heading:nth-child(n + 2) {
+ margin-top: 30px;
+}
+.mx_SettingsTab_subheading {
+ font-size: 1.6rem;
+ display: block;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-weight: 600;
+ color: #2e2f32;
+ margin-bottom: 10px;
+ margin-top: 12px;
+}
+.mx_SettingsTab_subsectionText {
+ color: #61708b;
+ font-size: 1.4rem;
+ display: block;
+ margin: 10px 100px 10px 0;
+}
+.mx_SettingsTab_section {
+ margin-bottom: 24px;
+}
+.mx_SettingsTab_section .mx_SettingsFlag {
+ margin-right: 100px;
+ margin-bottom: 10px;
+}
+.mx_SettingsTab_section.mx_SettingsTab_subsectionText .mx_SettingsFlag {
+ margin-right: 0 !important;
+}
+.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
+ vertical-align: middle;
+ display: inline-block;
+ font-size: 1.4rem;
+ color: #2e2f32;
+ max-width: calc(100% - 4.8rem);
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ padding-right: 10px;
+}
+.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {
+ float: right;
+}
+.mx_SettingsTab_linkBtn {
+ cursor: pointer;
+ color: #0dbd8b;
+ word-break: break-all;
+}
+.mx_SettingsTab a {
+ color: #238cf5;
+}
+.mx_GeneralRoomSettingsTab_profileSection {
+ margin-top: 10px;
+}
+.mx_RolesRoomSettingsTab ul {
+ margin-bottom: 0;
+}
+.mx_RolesRoomSettingsTab_unbanBtn {
+ margin-right: 10px;
+ margin-bottom: 5px;
+}
+.mx_SecurityRoomSettingsTab_warning {
+ display: block;
+}
+.mx_SecurityRoomSettingsTab_warning img {
+ vertical-align: middle;
+ margin-right: 5px;
+ margin-left: 3px;
+ margin-bottom: 5px;
+}
+.mx_SecurityRoomSettingsTab_encryptionSection {
+ margin-bottom: 25px;
+}
+.mx_AppearanceUserSettingsTab_fontSlider,
+.mx_AppearanceUserSettingsTab_fontSlider_preview,
+.mx_AppearanceUserSettingsTab_Layout {
+ margin-right: 100px;
+}
+.mx_AppearanceUserSettingsTab .mx_Field {
+ width: 256px;
+}
+.mx_AppearanceUserSettingsTab_fontScaling {
+ color: #2e2f32;
+}
+.mx_AppearanceUserSettingsTab_fontSlider {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 15px;
+ background: rgba(227, 232, 240, 0.2);
+ border-radius: 10px;
+ font-size: 10px;
+ margin-top: 24px;
+ margin-bottom: 24px;
+}
+.mx_AppearanceUserSettingsTab_fontSlider_preview {
+ border: 1px solid #e3e8f0;
+ border-radius: 10px;
+ padding: 0 16px 9px;
+ pointer-events: none;
+}
+.mx_AppearanceUserSettingsTab_fontSlider_preview .mx_EventTile_msgOption {
+ display: none;
+}
+.mx_AppearanceUserSettingsTab_fontSlider_preview.mx_IRCLayout {
+ padding-top: 9px;
+}
+.mx_AppearanceUserSettingsTab_fontSlider_smallText {
+ font-size: 15px;
+ padding-right: 20px;
+ padding-left: 5px;
+ font-weight: 500;
+}
+.mx_AppearanceUserSettingsTab_fontSlider_largeText {
+ font-size: 18px;
+ padding-left: 20px;
+ padding-right: 5px;
+ font-weight: 500;
+}
+.mx_AppearanceUserSettingsTab > .mx_SettingsTab_SubHeading {
+ margin-bottom: 32px;
+}
+.mx_AppearanceUserSettingsTab_themeSection {
+ color: #2e2f32;
+}
+.mx_AppearanceUserSettingsTab_themeSection > .mx_ThemeSelectors {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ margin-top: 4px;
+ margin-bottom: 30px;
+}
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton {
+ padding: 1.6rem;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-radius: 10px;
+ width: 180px;
+ background: #e3e8f0;
+ opacity: 0.4;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ margin-right: 15px;
+ margin-top: 10px;
+ font-weight: 600;
+ color: #61708b;
+}
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton
+ > span {
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton_enabled {
+ opacity: 1;
+}
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton_enabled.mx_ThemeSelector_light {
+ background-color: #f3f8fd;
+ color: #2e2f32;
+}
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton_enabled.mx_ThemeSelector_dark {
+ background-color: #25282e;
+ color: #f3f8fd;
+}
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton_enabled.mx_ThemeSelector_dark
+ > input
+ > div,
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton_enabled.mx_ThemeSelector_dark
+ > input
+ > div
+ > div {
+ border-color: #e3e8f0;
+}
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton_enabled.mx_ThemeSelector_black {
+ background-color: #000;
+ color: #f3f8fd;
+}
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton_enabled.mx_ThemeSelector_black
+ > input
+ > div,
+.mx_AppearanceUserSettingsTab_themeSection
+ > .mx_ThemeSelectors
+ > .mx_RadioButton_enabled.mx_ThemeSelector_black
+ > input
+ > div
+ > div {
+ border-color: #e3e8f0;
+}
+.mx_SettingsTab_customFontSizeField {
+ margin-left: calc(1.6rem + 10px);
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ color: #2e2f32;
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ .mx_AppearanceUserSettingsTab_spacer {
+ width: 24px;
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ > .mx_AppearanceUserSettingsTab_Layout_RadioButton {
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ width: 300px;
+ border: 1px solid #e3e8f0;
+ border-radius: 10px;
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ > .mx_AppearanceUserSettingsTab_Layout_RadioButton
+ .mx_EventTile_msgOption,
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ > .mx_AppearanceUserSettingsTab_Layout_RadioButton
+ .mx_MessageActionBar {
+ display: none;
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ > .mx_AppearanceUserSettingsTab_Layout_RadioButton
+ .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 10px;
+ pointer-events: none;
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ > .mx_AppearanceUserSettingsTab_Layout_RadioButton
+ .mx_RadioButton {
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ padding: 10px;
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ > .mx_AppearanceUserSettingsTab_Layout_RadioButton
+ .mx_EventTile_content {
+ margin-right: 0;
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ > .mx_AppearanceUserSettingsTab_Layout_RadioButton.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected {
+ border-color: #0dbd8b;
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton {
+ border-top: 1px solid #e3e8f0;
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ .mx_RadioButton
+ > input
+ + div {
+ border-color: rgba(97, 112, 139, 0.2);
+}
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton_checked {
+ background-color: rgba(13, 189, 139, 0.08);
+}
+.mx_AppearanceUserSettingsTab_Advanced {
+ color: #2e2f32;
+}
+.mx_AppearanceUserSettingsTab_Advanced > * {
+ margin-bottom: 16px;
+}
+.mx_AppearanceUserSettingsTab_Advanced
+ .mx_AppearanceUserSettingsTab_AdvancedToggle {
+ color: #0dbd8b;
+ cursor: pointer;
+}
+.mx_AppearanceUserSettingsTab_Advanced
+ .mx_AppearanceUserSettingsTab_systemFont {
+ margin-left: calc(1.6rem + 10px);
+}
+.mx_GeneralUserSettingsTab_changePassword .mx_Field {
+ margin-right: 100px;
+}
+.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
+ margin-top: 0;
+}
+.mx_GeneralUserSettingsTab_accountSection
+ .mx_SettingsTab_subheading:nth-child(n + 1),
+.mx_GeneralUserSettingsTab_discovery
+ .mx_SettingsTab_subheading:nth-child(n + 2),
+.mx_SetIdServer .mx_SettingsTab_subheading {
+ margin-top: 24px;
+}
+.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,
+.mx_GeneralUserSettingsTab_discovery .mx_Spinner {
+ -webkit-box-pack: left;
+ -ms-flex-pack: left;
+ justify-content: left;
+}
+.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
+.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
+.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,
+.mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber,
+.mx_GeneralUserSettingsTab_languageInput {
+ margin-right: 100px;
+}
+.mx_GeneralUserSettingsTab_warningIcon {
+ vertical-align: middle;
+}
+.mx_HelpUserSettingsTab_debugButton {
+ margin-bottom: 5px;
+ margin-top: 5px;
+}
+.mx_HelpUserSettingsTab span.mx_AccessibleButton {
+ word-break: break-word;
+}
+.mx_HelpUserSettingsTab code {
+ word-break: break-all;
+ -webkit-user-select: all;
+ -moz-user-select: all;
+ -ms-user-select: all;
+ user-select: all;
+}
+.mx_HelpUserSettingsTab_accessToken {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ border-radius: 5px;
+ border: 1px solid #747474;
+ margin-bottom: 10px;
+ margin-top: 10px;
+ padding: 10px;
+}
+.mx_HelpUserSettingsTab_accessToken_copy {
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ cursor: pointer;
+ margin-left: 20px;
+ display: inherit;
+}
+.mx_HelpUserSettingsTab_accessToken_copy > div {
+ -webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
+ mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
+ background-color: #2e2f32;
+ margin-left: 5px;
+ width: 20px;
+ height: 20px;
+ background-repeat: no-repeat;
+}
+.mx_LabsUserSettingsTab .mx_SettingsTab_section {
+ margin-top: 32px;
+}
+.mx_LabsUserSettingsTab .mx_SettingsTab_section .mx_SettingsFlag {
+ margin-right: 0;
+}
+.mx_MjolnirUserSettingsTab .mx_Field {
+ margin-right: 100px;
+}
+.mx_MjolnirUserSettingsTab_listItem {
+ margin-bottom: 2px;
+}
+.mx_NotificationUserSettingsTab .mx_SettingsTab_heading {
+ margin-bottom: 10px;
+}
+.mx_PreferencesUserSettingsTab .mx_Field {
+ margin-right: 100px;
+}
+.mx_PreferencesUserSettingsTab .mx_SettingsTab_section {
+ margin-bottom: 30px;
+}
+.mx_SecurityUserSettingsTab .mx_DevicesPanel {
+ width: auto;
+ max-width: 880px;
+}
+.mx_SecurityUserSettingsTab_deviceInfo {
+ display: table;
+ padding-left: 0;
+}
+.mx_SecurityUserSettingsTab_deviceInfo > li {
+ display: table-row;
+}
+.mx_SecurityUserSettingsTab_deviceInfo > li > label,
+.mx_SecurityUserSettingsTab_deviceInfo > li > span {
+ display: table-cell;
+ padding-right: 1em;
+}
+.mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton,
+.mx_SecurityUserSettingsTab_importExportButtons .mx_AccessibleButton {
+ margin-right: 10px;
+}
+.mx_SecurityUserSettingsTab_importExportButtons {
+ margin-bottom: 15px;
+}
+.mx_SecurityUserSettingsTab_ignoredUser {
+ margin-bottom: 5px;
+}
+.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
+ margin-right: 10px;
+}
+.mx_SecurityUserSettingsTab
+ .mx_SettingsTab_section
+ .mx_AccessibleButton_kind_link {
+ padding: 0;
+ font-size: inherit;
+}
+.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning {
+ color: #ff4b55;
+ position: relative;
+ padding-left: 40px;
+ margin-top: 30px;
+}
+.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning:before {
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: 0 center;
+ mask-position: 0 center;
+ -webkit-mask-size: 2.4rem;
+ mask-size: 2.4rem;
+ position: absolute;
+ width: 2.4rem;
+ height: 2.4rem;
+ content: "";
+ top: 0;
+ left: 0;
+ background-color: #ff4b55;
+ -webkit-mask-image: url(../../img/feather-customised/alert-triangle.38aca3a.svg);
+ mask-image: url(../../img/feather-customised/alert-triangle.38aca3a.svg);
+}
+.mx_VoiceUserSettingsTab .mx_Field {
+ margin-right: 100px;
+}
+.mx_VoiceUserSettingsTab_missingMediaPermissions {
+ margin-bottom: 15px;
+}
+.mx_SpaceBasicSettings .mx_Field {
+ margin: 32px 0;
+}
+.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-top: 24px;
+}
+.mx_SpaceBasicSettings
+ .mx_SpaceBasicSettings_avatarContainer
+ .mx_SpaceBasicSettings_avatar {
+ position: relative;
+ height: 80px;
+ width: 80px;
+ background-color: #8d99a5;
+ border-radius: 16px;
+}
+.mx_SpaceBasicSettings
+ .mx_SpaceBasicSettings_avatarContainer
+ img.mx_SpaceBasicSettings_avatar {
+ width: 80px;
+ height: 80px;
+ -o-object-fit: cover;
+ object-fit: cover;
+ border-radius: 16px;
+}
+.mx_SpaceBasicSettings
+ .mx_SpaceBasicSettings_avatarContainer
+ div.mx_SpaceBasicSettings_avatar {
+ cursor: pointer;
+}
+.mx_SpaceBasicSettings
+ .mx_SpaceBasicSettings_avatarContainer
+ div.mx_SpaceBasicSettings_avatar:before {
+ content: "";
+ position: absolute;
+ height: 80px;
+ width: 80px;
+ top: 0;
+ left: 0;
+ background-color: #fff;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ -webkit-mask-image: url(../../img/element-icons/camera.a81a395.svg);
+ mask-image: url(../../img/element-icons/camera.a81a395.svg);
+}
+.mx_SpaceBasicSettings
+ .mx_SpaceBasicSettings_avatarContainer
+ > input[type="file"] {
+ display: none;
+}
+.mx_SpaceBasicSettings
+ .mx_SpaceBasicSettings_avatarContainer
+ > .mx_AccessibleButton_kind_link {
+ display: inline-block;
+ padding: 0;
+ margin: auto 16px;
+ color: #368bd6;
+}
+.mx_SpaceBasicSettings
+ .mx_SpaceBasicSettings_avatarContainer
+ > .mx_SpaceBasicSettings_avatar_remove {
+ color: #ff4b55;
+}
+.mx_SpaceBasicSettings .mx_FormButton {
+ padding: 8px 22px;
+ margin-left: auto;
+ display: block;
+ width: -webkit-min-content;
+ width: -moz-min-content;
+ width: min-content;
+}
+.mx_SpaceBasicSettings .mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background {
+ background-color: rgba(46, 48, 51, 0.38);
+ opacity: 0.6;
+ left: 71px;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu {
+ padding: 24px;
+ width: 480px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ background-color: #fff;
+ position: relative;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > h2 {
+ font-weight: 600;
+ font-size: 1.8rem;
+ margin-top: 4px;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > p {
+ font-size: 1.5rem;
+ color: #737d8c;
+ margin: 0;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_BetaCard_betaPill {
+ position: absolute;
+ top: 24px;
+ right: 24px;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType {
+ position: relative;
+ padding: 16px 32px 16px 72px;
+ width: 432px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-radius: 8px;
+ border: 1px solid #e7e7e7;
+ font-size: 1.5rem;
+ margin: 20px 0;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType > h3 {
+ font-weight: 600;
+ margin: 0 0 4px;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType > span {
+ color: #737d8c;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:before {
+ position: absolute;
+ content: "";
+ width: 32px;
+ height: 32px;
+ top: 24px;
+ left: 20px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 24px;
+ mask-size: 24px;
+ background-color: #8d99a5;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover {
+ border-color: #0dbd8b;
+}
+.mx_SpaceCreateMenu_wrapper
+ .mx_ContextualMenu
+ .mx_SpaceCreateMenuType:hover:before {
+ background-color: #0dbd8b;
+}
+.mx_SpaceCreateMenu_wrapper
+ .mx_ContextualMenu
+ .mx_SpaceCreateMenuType:hover
+ > span {
+ color: #2e2f32;
+}
+.mx_SpaceCreateMenu_wrapper
+ .mx_ContextualMenu
+ .mx_SpaceCreateMenuType_public:before {
+ -webkit-mask-image: url(../../img/globe.8201f08.svg);
+ mask-image: url(../../img/globe.8201f08.svg);
+}
+.mx_SpaceCreateMenu_wrapper
+ .mx_ContextualMenu
+ .mx_SpaceCreateMenuType_private:before {
+ -webkit-mask-image: url(../../img/element-icons/lock.1f264bd.svg);
+ mask-image: url(../../img/element-icons/lock.1f264bd.svg);
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back {
+ width: 28px;
+ height: 28px;
+ position: relative;
+ background-color: rgba(141, 151, 165, 0.2);
+ border-radius: 14px;
+ margin-bottom: 12px;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back:before {
+ content: "";
+ position: absolute;
+ height: 28px;
+ width: 28px;
+ top: 0;
+ left: 0;
+ background-color: #8d99a5;
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: 2px 3px;
+ mask-position: 2px 3px;
+ -webkit-mask-size: 24px;
+ mask-size: 24px;
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+.mx_SpaceCreateMenu_wrapper
+ .mx_ContextualMenu
+ .mx_AccessibleButton_kind_primary {
+ padding: 8px 22px;
+ margin-left: auto;
+ display: block;
+ width: -webkit-min-content;
+ width: -moz-min-content;
+ width: min-content;
+}
+.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_disabled {
+ cursor: not-allowed;
+}
+.mx_SpacePublicShare .mx_AccessibleButton {
+ position: relative;
+ padding: 16px 32px 16px 72px;
+ width: 432px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-radius: 8px;
+ border: 1px solid #e7e7e7;
+ font-size: 1.5rem;
+ margin: 20px 0;
+}
+.mx_SpacePublicShare .mx_AccessibleButton > h3 {
+ font-weight: 600;
+ margin: 0 0 4px;
+}
+.mx_SpacePublicShare .mx_AccessibleButton > span {
+ color: #737d8c;
+}
+.mx_SpacePublicShare .mx_AccessibleButton:before {
+ position: absolute;
+ content: "";
+ width: 32px;
+ height: 32px;
+ top: 24px;
+ left: 20px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 24px;
+ mask-size: 24px;
+ background-color: #8d99a5;
+}
+.mx_SpacePublicShare .mx_AccessibleButton:hover {
+ border-color: #0dbd8b;
+}
+.mx_SpacePublicShare .mx_AccessibleButton:hover:before {
+ background-color: #0dbd8b;
+}
+.mx_SpacePublicShare .mx_AccessibleButton:hover > span {
+ color: #2e2f32;
+}
+.mx_SpacePublicShare
+ .mx_AccessibleButton.mx_SpacePublicShare_shareButton:before {
+ -webkit-mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
+ mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
+}
+.mx_SpacePublicShare
+ .mx_AccessibleButton.mx_SpacePublicShare_inviteButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+ mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
+}
+.mx_InlineTermsAgreement_cbContainer {
+ margin-bottom: 10px;
+ font-size: 1.4rem;
+}
+.mx_InlineTermsAgreement_cbContainer a {
+ color: #0dbd8b;
+ text-decoration: none;
+}
+.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox {
+ margin-top: 10px;
+}
+.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox input {
+ vertical-align: text-bottom;
+}
+.mx_InlineTermsAgreement_link {
+ display: inline-block;
+ -webkit-mask-image: url(../../img/external-link.a8d3e9b.svg);
+ mask-image: url(../../img/external-link.a8d3e9b.svg);
+ background-color: #0dbd8b;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ width: 12px;
+ height: 12px;
+ margin-left: 3px;
+ vertical-align: middle;
+}
+.mx_AnalyticsToast .mx_AccessibleButton_kind_danger {
+ background: none;
+ color: #0dbd8b;
+}
+.mx_AnalyticsToast .mx_AccessibleButton_kind_primary {
+ background: #0dbd8b;
+ color: #fff;
+}
+.mx_NonUrgentEchoFailureToast .mx_NonUrgentEchoFailureToast_icon {
+ display: inline-block;
+ width: 1.8rem;
+ height: 1.8rem;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: #fff;
+ -webkit-mask-image: url(../../img/element-icons/cloud-off.33cd28e.svg);
+ mask-image: url(../../img/element-icons/cloud-off.33cd28e.svg);
+ margin-right: 8px;
+}
+.mx_NonUrgentEchoFailureToast span {
+ vertical-align: middle;
+}
+.mx_NonUrgentEchoFailureToast .mx_AccessibleButton {
+ padding: 0;
+}
+.mx_VerificationShowSas_decimalSas {
+ text-align: center;
+ font-weight: 700;
+ padding-left: 3px;
+ padding-right: 3px;
+}
+.mx_VerificationShowSas_decimalSas span {
+ margin-left: 5px;
+ margin-right: 5px;
+}
+.mx_VerificationShowSas_emojiSas {
+ text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ margin: 25px 0;
+}
+.mx_VerificationShowSas_emojiSas_block {
+ display: inline-block;
+ margin-bottom: 16px;
+ position: relative;
+ width: 52px;
+}
+.mx_AuthPage_modal .mx_VerificationShowSas_emojiSas_block,
+.mx_Dialog .mx_VerificationShowSas_emojiSas_block {
+ width: 60px;
+}
+.mx_VerificationShowSas_emojiSas_emoji {
+ font-size: 3.2rem;
+}
+.mx_VerificationShowSas_emojiSas_label {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ font-size: 1.2rem;
+}
+.mx_VerificationShowSas_emojiSas_break {
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+}
+.mx_VerificationShowSas
+ .mx_Dialog_buttons
+ button.mx_VerificationShowSas_matchButton {
+ color: #0dbd8b;
+ background-color: rgba(3, 179, 129, 0.16);
+ border: none;
+}
+.mx_VerificationShowSas
+ .mx_Dialog_buttons
+ button.mx_VerificationShowSas_noMatchButton {
+ color: #ff4b55;
+ background-color: rgba(255, 75, 85, 0.16);
+ border: none;
+}
+.mx_PlayPauseButton {
+ position: relative;
+ width: 32px;
+ height: 32px;
+ border-radius: 32px;
+ background-color: #fff;
+}
+.mx_PlayPauseButton:before {
+ content: "";
+ position: absolute;
+ background-color: #737d8c;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+.mx_PlayPauseButton.mx_PlayPauseButton_disabled:before {
+ opacity: 0.5;
+}
+.mx_PlayPauseButton.mx_PlayPauseButton_play:before {
+ width: 13px;
+ height: 16px;
+ top: 8px;
+ left: 12px;
+ -webkit-mask-image: url(../../img/element-icons/play.a72552b.svg);
+ mask-image: url(../../img/element-icons/play.a72552b.svg);
+}
+.mx_PlayPauseButton.mx_PlayPauseButton_pause:before {
+ width: 10px;
+ height: 12px;
+ top: 10px;
+ left: 11px;
+ -webkit-mask-image: url(../../img/element-icons/pause.c4c0886.svg);
+ mask-image: url(../../img/element-icons/pause.c4c0886.svg);
+}
+.mx_VoiceMessagePrimaryContainer {
+ padding: 7px 12px 7px 11px;
+ background-color: #e3e8f0;
+ border-radius: 12px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #737d8c;
+ font-size: 1.4rem;
+ line-height: 2.4rem;
+}
+.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar {
+ background-color: #c1c6cd;
+}
+.mx_VoiceMessagePrimaryContainer
+ .mx_Waveform
+ .mx_Waveform_bar.mx_Waveform_bar_100pct {
+ -webkit-transition: background-color 0.25s ease;
+ transition: background-color 0.25s ease;
+ background-color: #737d8c;
+}
+.mx_VoiceMessagePrimaryContainer .mx_Clock {
+ width: 4.2rem;
+ padding-right: 6px;
+ padding-left: 8px;
+}
+.mx_Waveform {
+ position: relative;
+ height: 30px;
+ top: 1px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ overflow: hidden;
+}
+.mx_Waveform .mx_Waveform_bar {
+ width: 0;
+ border: 1px solid transparent;
+ border-radius: 2px;
+ min-height: 0;
+ max-height: 100%;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+.mx_CallContainer {
+ position: absolute;
+ right: 20px;
+ bottom: 72px;
+ z-index: 100;
+ pointer-events: none;
+}
+.mx_CallContainer .mx_CallPreview {
+ pointer-events: auto;
+ cursor: pointer;
+}
+.mx_CallContainer .mx_CallPreview .mx_CallView_video {
+ width: 350px;
+}
+.mx_CallContainer .mx_CallPreview .mx_VideoFeed_local {
+ border-radius: 8px;
+ overflow: hidden;
+}
+.mx_CallContainer .mx_AppTile_persistedWrapper div {
+ min-width: 350px;
+}
+.mx_CallContainer .mx_IncomingCallBox {
+ min-width: 250px;
+ background-color: #f4f6fa;
+ padding: 8px;
+ -webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.08);
+ box-shadow: 0 14px 24px rgba(0, 0, 0, 0.08);
+ border-radius: 8px;
+ pointer-events: auto;
+ cursor: pointer;
+}
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ direction: row;
+}
+.mx_CallContainer
+ .mx_IncomingCallBox
+ .mx_IncomingCallBox_CallerInfo
+ .mx_BaseAvatar_initial,
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo img {
+ margin: 8px;
+}
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo > div {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1,
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo p {
+ margin: 0;
+ padding: 0;
+ font-size: 1.4rem;
+ line-height: 1.6rem;
+}
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1 {
+ font-weight: 700;
+}
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons {
+ padding: 8px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+.mx_CallContainer
+ .mx_IncomingCallBox
+ .mx_IncomingCallBox_buttons
+ > .mx_IncomingCallBox_spacer {
+ width: 8px;
+}
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons > * {
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ margin-right: 0;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+}
+.mx_CallView {
+ border-radius: 8px;
+ background-color: #f2f5f8;
+ padding-left: 8px;
+ padding-right: 8px;
+ pointer-events: auto;
+}
+.mx_CallView_large {
+ padding-bottom: 10px;
+ margin: 5px 5px 5px 18px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.mx_CallView_large,
+.mx_CallView_large .mx_CallView_voice {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+.mx_CallView_pip {
+ width: 320px;
+ padding-bottom: 8px;
+ margin-top: 10px;
+ background-color: #f4f6fa;
+ -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+ border-radius: 8px;
+}
+.mx_CallView_pip .mx_CallView_voice {
+ height: 180px;
+}
+.mx_CallView_pip .mx_CallView_callControls {
+ bottom: 0;
+}
+.mx_CallView_pip .mx_CallView_callControls_button:before {
+ width: 36px;
+ height: 36px;
+}
+.mx_CallView_pip .mx_CallView_holdTransferContent {
+ padding-top: 10px;
+ padding-bottom: 25px;
+}
+.mx_CallView_content {
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ border-radius: 8px;
+}
+.mx_CallView_voice {
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ background-color: #27303a;
+}
+.mx_CallView_voice,
+.mx_CallView_voice_avatarsContainer {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-direction: normal;
+}
+.mx_CallView_voice_avatarsContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+.mx_CallView_voice_avatarsContainer div {
+ margin-left: 12px;
+ margin-right: 12px;
+}
+.mx_CallView_voice
+ .mx_CallView_holdTransferContent
+ .mx_CallView_voice_avatarContainer {
+ border-radius: 2000px;
+ overflow: hidden;
+ position: relative;
+}
+.mx_CallView_holdTransferContent {
+ height: 20px;
+ padding-top: 20px;
+ padding-bottom: 15px;
+ color: #fff;
+}
+.mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind {
+ padding: 0;
+ font-weight: 700;
+}
+.mx_CallView_video {
+ width: 100%;
+ height: 100%;
+ z-index: 30;
+ overflow: hidden;
+}
+.mx_CallView_video_hold {
+ overflow: hidden;
+}
+.mx_CallView_video_hold .mx_VideoFeed {
+ visibility: hidden;
+}
+.mx_CallView_video_holdBackground {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ right: 0;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: 50%;
+ -webkit-filter: blur(20px);
+ filter: blur(20px);
+}
+.mx_CallView_video_holdBackground:after {
+ content: "";
+ display: block;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ right: 0;
+ background-color: rgba(0, 0, 0, 0.6);
+}
+.mx_CallView_video .mx_CallView_holdTransferContent {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ font-weight: 700;
+ color: #fff;
+ text-align: center;
+}
+.mx_CallView_video .mx_CallView_holdTransferContent:before {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ content: "";
+ width: 40px;
+ height: 40px;
+ background-image: url(../../img/voip/paused.77799b3.svg);
+ background-position: 50%;
+ background-size: cover;
+}
+.mx_CallView_pip .mx_CallView_video .mx_CallView_holdTransferContent:before {
+ width: 30px;
+ height: 30px;
+}
+.mx_CallView_video
+ .mx_CallView_holdTransferContent
+ .mx_AccessibleButton_hasKind {
+ padding: 0;
+}
+.mx_CallView_header {
+ height: 44px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: left;
+ -ms-flex-pack: left;
+ justify-content: left;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+}
+.mx_CallView_header_callType {
+ font-size: 1.2rem;
+ font-weight: 700;
+ vertical-align: middle;
+}
+.mx_CallView_header_secondaryCallInfo:before {
+ content: "·";
+ margin-left: 6px;
+ margin-right: 6px;
+}
+.mx_CallView_header_controls {
+ margin-left: auto;
+}
+.mx_CallView_header_button {
+ display: inline-block;
+ vertical-align: middle;
+ cursor: pointer;
+}
+.mx_CallView_header_button:before {
+ content: "";
+ display: inline-block;
+ height: 20px;
+ width: 20px;
+ vertical-align: middle;
+ background-color: #737d8c;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+.mx_CallView_header_button_fullscreen:before {
+ -webkit-mask-image: url(../../img/element-icons/call/fullscreen.43be138.svg);
+ mask-image: url(../../img/element-icons/call/fullscreen.43be138.svg);
+}
+.mx_CallView_header_button_expand:before {
+ -webkit-mask-image: url(../../img/element-icons/call/expand.7ef9f56.svg);
+ mask-image: url(../../img/element-icons/call/expand.7ef9f56.svg);
+}
+.mx_CallView_header_callInfo {
+ margin-left: 12px;
+ margin-right: 16px;
+}
+.mx_CallView_header_roomName {
+ font-weight: 700;
+ font-size: 12px;
+ line-height: normal;
+ height: 15px;
+}
+.mx_CallView_secondaryCall_roomName {
+ margin-left: 4px;
+}
+.mx_CallView_header_callTypeSmall {
+ font-size: 12px;
+ color: #737d8c;
+ line-height: normal;
+ height: 15px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ max-width: 240px;
+}
+.mx_CallView_header_phoneIcon {
+ display: inline-block;
+ margin-right: 6px;
+ height: 16px;
+ width: 16px;
+ vertical-align: middle;
+}
+.mx_CallView_header_phoneIcon:before {
+ content: "";
+ display: inline-block;
+ vertical-align: top;
+ height: 16px;
+ width: 16px;
+ background-color: #ff4b55;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+ mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+}
+.mx_CallView_callControls {
+ position: absolute;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ bottom: 5px;
+ width: 100%;
+ opacity: 1;
+ -webkit-transition: opacity 0.5s;
+ transition: opacity 0.5s;
+}
+.mx_CallView_callControls_hidden {
+ opacity: 0.001;
+ pointer-events: none;
+}
+.mx_CallView_callControls_button {
+ cursor: pointer;
+ margin-left: 8px;
+ margin-right: 8px;
+}
+.mx_CallView_callControls_button:before {
+ content: "";
+ display: inline-block;
+ height: 48px;
+ width: 48px;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: 50%;
+}
+.mx_CallView_callControls_dialpad {
+ margin-right: auto;
+}
+.mx_CallView_callControls_dialpad:before {
+ background-image: url(../../img/voip/dialpad.fdda9a0.svg);
+}
+.mx_CallView_callControls_button_dialpad_hidden {
+ margin-right: auto;
+ cursor: auto;
+}
+.mx_CallView_callControls_button_micOn:before {
+ background-image: url(../../img/voip/mic-on.2592c14.svg);
+}
+.mx_CallView_callControls_button_micOff:before {
+ background-image: url(../../img/voip/mic-off.774e42b.svg);
+}
+.mx_CallView_callControls_button_vidOn:before {
+ background-image: url(../../img/voip/vid-on.b9b8bbf.svg);
+}
+.mx_CallView_callControls_button_vidOff:before {
+ background-image: url(../../img/voip/vid-off.5552596.svg);
+}
+.mx_CallView_callControls_button_hangup:before {
+ background-image: url(../../img/voip/hangup.9c3adeb.svg);
+}
+.mx_CallView_callControls_button_more {
+ margin-left: auto;
+}
+.mx_CallView_callControls_button_more:before {
+ background-image: url(../../img/voip/more.5e8055e.svg);
+}
+.mx_CallView_callControls_button_more_hidden {
+ margin-left: auto;
+ cursor: auto;
+}
+.mx_CallView_callControls_button_invisible {
+ visibility: hidden;
+ pointer-events: none;
+ position: absolute;
+}
+.mx_CallViewForRoom {
+ overflow: hidden;
+}
+.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-bottom: 8px;
+}
+.mx_CallViewForRoom
+ .mx_CallViewForRoom_ResizeWrapper:hover
+ .mx_CallViewForRoom_ResizeHandle {
+ width: 100% !important;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.mx_CallViewForRoom
+ .mx_CallViewForRoom_ResizeWrapper:hover
+ .mx_CallViewForRoom_ResizeHandle:after {
+ content: "";
+ margin-top: 3px;
+ border-radius: 4px;
+ height: 4px;
+ width: 100%;
+ max-width: 64px;
+ background-color: #2e2f32;
+}
+.mx_DialPad {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-gap: 16px;
+ gap: 16px;
+}
+.mx_DialPad_button {
+ width: 40px;
+ height: 40px;
+ background-color: #e3e8f0;
+ border-radius: 40px;
+ font-size: 18px;
+ font-weight: 600;
+ text-align: center;
+ vertical-align: middle;
+ line-height: 40px;
+}
+.mx_DialPad_deleteButton:before,
+.mx_DialPad_dialButton:before {
+ content: "";
+ display: inline-block;
+ height: 40px;
+ width: 40px;
+ vertical-align: middle;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #fff;
+}
+.mx_DialPad_deleteButton {
+ background-color: #ff4b55;
+}
+.mx_DialPad_deleteButton:before {
+ -webkit-mask-image: url(../../img/element-icons/call/delete.833d785.svg);
+ mask-image: url(../../img/element-icons/call/delete.833d785.svg);
+ -webkit-mask-position: 9px;
+ mask-position: 9px;
+}
+.mx_DialPad_dialButton {
+ background-color: #0dbd8b;
+}
+.mx_DialPad_dialButton:before {
+ -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+ mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+}
+.mx_DialPadContextMenu_header {
+ margin-top: 12px;
+ margin-left: 12px;
+ margin-right: 12px;
+}
+.mx_DialPadContextMenu_title {
+ color: #61708b;
+ font-size: 12px;
+ font-weight: 600;
+}
+.mx_DialPadContextMenu_dialled {
+ height: 1em;
+ font-size: 18px;
+ font-weight: 600;
+}
+.mx_DialPadContextMenu_dialPad {
+ margin: 16px;
+}
+.mx_DialPadContextMenu_horizSep {
+ position: relative;
+}
+.mx_DialPadContextMenu_horizSep:before {
+ content: "";
+ position: absolute;
+ width: 100%;
+ border-bottom: 1px solid #e3e8f0;
+}
+.mx_Dialog_dialPadWrapper .mx_Dialog {
+ padding: 0;
+}
+.mx_DialPadModal {
+ width: 192px;
+ height: 368px;
+}
+.mx_DialPadModal_header {
+ margin-top: 12px;
+ margin-left: 12px;
+ margin-right: 12px;
+}
+.mx_DialPadModal_title {
+ color: #61708b;
+ font-size: 12px;
+ font-weight: 600;
+}
+.mx_DialPadModal_cancel {
+ float: right;
+ -webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
+ mask: url(../../img/feather-customised/cancel.23c2689.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: cover;
+ mask-size: cover;
+ width: 14px;
+ height: 14px;
+ background-color: #c1c1c1;
+ cursor: pointer;
+}
+.mx_DialPadModal_field {
+ border: none;
+ margin: 0;
+}
+.mx_DialPadModal_field input {
+ font-size: 18px;
+ font-weight: 600;
+}
+.mx_DialPadModal_dialPad {
+ margin-left: 16px;
+ margin-right: 16px;
+ margin-top: 16px;
+}
+.mx_DialPadModal_horizSep {
+ position: relative;
+}
+.mx_DialPadModal_horizSep:before {
+ content: "";
+ position: absolute;
+ width: 100%;
+ border-bottom: 1px solid #e3e8f0;
+}
+.mx_VideoFeed_voice {
+ padding-bottom: 52px;
+ background-color: #27303a;
+}
+.mx_VideoFeed_remote {
+ width: 100%;
+ height: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.mx_VideoFeed_remote.mx_VideoFeed_video {
+ background-color: #000;
+}
+.mx_VideoFeed_local {
+ max-width: 25%;
+ max-height: 25%;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ z-index: 100;
+ border-radius: 4px;
+}
+.mx_VideoFeed_local.mx_VideoFeed_video {
+ background-color: transparent;
+}
+.mx_VideoFeed_mirror {
+ -webkit-transform: scaleX(-1);
+ transform: scaleX(-1);
+}
`
const snackbarCSS = `
#snackbar {
@@ -17,7 +19480,7 @@ const snackbarCSS = `
bottom: 30px;
font-size: 17px;
padding: 6px 16px;
- font-family: Inter, "Roboto", "Helvetica", "Arial", sans-serif;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
font-weight: 400;
line-height: 1.43;
border-radius: 4px;
From 4c22d1f2a13b7a003d5eebe81e0fa23193d3cbf5 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 3 Jun 2021 13:21:56 +0530
Subject: [PATCH 041/313] Refactor
---
src/utils/exportUtils/Exporter.ts | 31 +++++++++++++++++++-
src/utils/exportUtils/HtmlExport.tsx | 42 +++++++++++++++-------------
src/utils/exportUtils/exportUtils.ts | 34 ++--------------------
3 files changed, 55 insertions(+), 52 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index c782cc5a63..5e2de1faf1 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -1,7 +1,36 @@
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
+import { arrayFastClone } from "../arrays";
export abstract class Exporter {
- constructor(protected res: MatrixEvent[], protected room: Room) {}
+ constructor(protected room: Room) {}
+
+ protected getTimelineConversation = () : MatrixEvent => {
+ if (!this.room) return;
+
+ const cli = MatrixClientPeg.get();
+
+ const timelineSet = this.room.getUnfilteredTimelineSet();
+
+ const timelineWindow = new TimelineWindow(
+ cli, timelineSet,
+ {windowLimit: Number.MAX_VALUE});
+
+ timelineWindow.load(null, 30);
+
+ const events = timelineWindow.getEvents();
+
+ // Clone and reverse the events so that we preserve the order
+ arrayFastClone(events)
+ .reverse()
+ .forEach(event => {
+ cli.decryptEventIfNeeded(event);
+ });
+
+ return events;
+ };
+
abstract export(): Promise<Blob>;
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 1432b61e85..c3174285e5 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -11,25 +11,25 @@ import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
import { formatFullDateNoDay, formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
import { RoomPermalinkCreator } from "../permalinks/Permalinks";
+import { _t } from "../../languageHandler";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { EventType } from "matrix-js-sdk/src/@types/event";
import * as ponyfill from "web-streams-polyfill/ponyfill"
import * as Avatar from "../../Avatar";
import EventTile, { haveTileForEvent } from "../../components/views/rooms/EventTile";
import DateSeparator from "../../components/views/messages/DateSeparator";
+import BaseAvatar from "../../components/views/avatars/BaseAvatar";
import exportCSS from "./exportCSS";
import exportJS from "./exportJS";
-import BaseAvatar from "../../components/views/avatars/BaseAvatar";
import exportIcons from "./exportIcons";
-import { _t } from "../../languageHandler";
-import { MatrixClientPeg } from "../../MatrixClientPeg";
-import { EventType } from "matrix-js-sdk/src/@types/event";
export default class HTMLExporter extends Exporter {
protected zip: JSZip;
protected avatars: Map<string, boolean>;
protected permalinkCreator: RoomPermalinkCreator;
- constructor(res: MatrixEvent[], room: Room) {
- super(res, room);
+ constructor(room: Room) {
+ super(room);
this.zip = new JSZip();
this.avatars = new Map<string, boolean>();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
@@ -57,16 +57,16 @@ export default class HTMLExporter extends Exporter {
return renderToStaticMarkup(avatar);
}
- protected async wrapHTML(content: string, room: Room) {
+ protected async wrapHTML(content: string) {
const roomAvatar32 = await this.getRoomAvatar(32);
const exportDate = formatFullDateNoDayNoTime(new Date());
const cli = MatrixClientPeg.get();
- const creator = room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
- const creatorName = room?.getMember(creator)?.rawDisplayName || creator;
+ const creator = this.room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
+ const creatorName = this.room?.getMember(creator)?.rawDisplayName || creator;
const exporter = cli.getUserId();
- const exporterName = room?.getMember(exporter)?.rawDisplayName;
- const topic = room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic
- || room.topic || "";
+ const exporterName = this.room?.getMember(exporter)?.rawDisplayName;
+ const topic = this.room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic
+ || this.room.topic || "";
const createdText = _t("%(creatorName)s created this room.", {
creatorName,
});
@@ -74,7 +74,7 @@ export default class HTMLExporter extends Exporter {
const exportedText = _t(`This is the start of export of <b>%(roomName)s</b>.
Exported by %(exporterDetails)s at %(exportDate)s. `, {
exportDate,
- roomName: room.name,
+ roomName: this.room.name,
exporterDetails: `<a href="https://matrix.to/#/${exporter}" target="_blank" rel="noopener noreferrer">
${exporterName ? `<b>${ exporterName }</b>(${ exporter })` : `<b>${ exporter }</b>`}
</a>`,
@@ -115,9 +115,9 @@ export default class HTMLExporter extends Exporter {
<div
dir="auto"
class="mx_RoomHeader_nametext"
- title="${room.name}"
+ title="${this.room.name}"
>
- ${room.name}
+ ${this.room.name}
</div>
</div>
<div class="mx_RoomHeader_topic" dir="auto"> ${topic} </div>
@@ -144,7 +144,7 @@ export default class HTMLExporter extends Exporter {
>
<div class="mx_NewRoomIntro">
${roomAvatar52}
- <h2> ${room.name} </h2>
+ <h2> ${this.room.name} </h2>
<p> ${createdText} <br/><br/> ${exportedText} </p>
<p> ${topicText} </p>
</div>
@@ -294,7 +294,7 @@ export default class HTMLExporter extends Exporter {
return renderToStaticMarkup(eventTile);
}
- protected async createHTML(events: MatrixEvent[], room: Room) {
+ protected async createHTML(events: MatrixEvent[]) {
let content = "";
let prevEvent = null;
for (const event of events) {
@@ -308,17 +308,21 @@ export default class HTMLExporter extends Exporter {
content += body;
prevEvent = event;
}
- return await this.wrapHTML(content, room);
+ return await this.wrapHTML(content);
}
public async export() {
- const html = await this.createHTML(this.res, this.room);
+ const res = this.getTimelineConversation();
+ const html = await this.createHTML(res);
+
this.zip.file("index.html", html);
this.zip.file("css/style.css", exportCSS);
this.zip.file("js/script.js", exportJS);
+
for (const iconName in exportIcons) {
this.zip.file(`icons/${iconName}`, exportIcons[iconName]);
}
+
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
//Generate the zip file asynchronously
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 5e1c4fffbb..34edee0ac6 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,7 +1,4 @@
-import { MatrixClientPeg } from "../../MatrixClientPeg";
-import { arrayFastClone } from "../arrays";
-import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
-import Room from 'matrix-js-sdk/src/models/room';
+import { Room } from 'matrix-js-sdk/src/models/room';
import HTMLExporter from "./HtmlExport";
export enum exportFormats {
@@ -14,37 +11,10 @@ export enum exportOptions {
TIMELINE = "TIMELINE",
}
-const getTimelineConversation = (room: Room) => {
- if (!room) return;
-
- const cli = MatrixClientPeg.get();
-
- const timelineSet = room.getUnfilteredTimelineSet();
-
- const timelineWindow = new TimelineWindow(
- cli, timelineSet,
- {windowLimit: Number.MAX_VALUE});
-
- timelineWindow.load(null, 30);
-
- const events = timelineWindow.getEvents();
-
- // Clone and reverse the events so that we preserve the order
- arrayFastClone(events)
- .reverse()
- .forEach(event => {
- cli.decryptEventIfNeeded(event);
- });
-
- return events;
-};
-
-
const exportConversationalHistory = async (room: Room, format: string, options) => {
- const res = getTimelineConversation(room);
switch (format) {
case exportFormats.HTML:
- await new HTMLExporter(res, room).export();
+ await new HTMLExporter(room).export();
break;
case exportFormats.JSON:
break;
From e7f0df7fcc57de7905abc6cf22971277f0572449 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 3 Jun 2021 13:39:14 +0530
Subject: [PATCH 042/313] Small fix
---
src/utils/exportUtils/Exporter.ts | 4 ++--
src/utils/exportUtils/HtmlExport.tsx | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 5e2de1faf1..6bdf5319f0 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -4,10 +4,10 @@ import { MatrixClientPeg } from "../../MatrixClientPeg";
import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
import { arrayFastClone } from "../arrays";
-export abstract class Exporter {
+export default abstract class Exporter {
constructor(protected room: Room) {}
- protected getTimelineConversation = () : MatrixEvent => {
+ protected getTimelineConversation = () : MatrixEvent[] => {
if (!this.room) return;
const cli = MatrixClientPeg.get();
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index c3174285e5..371ce9fffc 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -1,11 +1,11 @@
import React from "react"
import streamSaver from "streamsaver";
import JSZip from "jszip";
+import Exporter from "./Exporter";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent, mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { Exporter } from "./Exporter";
import { renderToStaticMarkup } from 'react-dom/server'
import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
From f32726d5ede52decae84812556bf94cfe6c5ebc0 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 4 Jun 2021 15:08:17 +0530
Subject: [PATCH 043/313] Begin extended implementation
---
src/components/views/rooms/RoomHeader.js | 5 +-
src/utils/exportUtils/Exporter.ts | 122 ++++++++++++++++++++++-
src/utils/exportUtils/HtmlExport.tsx | 23 +++--
src/utils/exportUtils/exportUtils.ts | 15 ++-
4 files changed, 145 insertions(+), 20 deletions(-)
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 717a5cecb7..b05156e1ef 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -32,8 +32,7 @@ import RoomTopic from "../elements/RoomTopic";
import RoomName from "../elements/RoomName";
import {PlaceCallType} from "../../../CallHandler";
import {replaceableComponent} from "../../../utils/replaceableComponent";
-import exportConversationalHistory from '../../../utils/exportUtils/exportUtils';
-import { exportFormats, exportOptions } from '../../../utils/exportUtils/exportUtils';
+import exportConversationalHistory, { exportTypes, exportFormats } from '../../../utils/exportUtils/exportUtils';
@replaceableComponent("views.rooms.RoomHeader")
@@ -121,7 +120,7 @@ export default class RoomHeader extends React.Component {
}
_exportConvertionalHistory = async () => {
- await exportConversationalHistory(this.props.room, exportFormats.HTML, exportOptions.TIMELINE);
+ await exportConversationalHistory(this.props.room, exportFormats.HTML, exportTypes.LAST_N_MESSAGES, 30);
}
render() {
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 6bdf5319f0..21b231163b 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -3,9 +3,11 @@ import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClientPeg } from "../../MatrixClientPeg";
import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
import { arrayFastClone } from "../arrays";
+import { exportTypes } from "./exportUtils";
+import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
export default abstract class Exporter {
- constructor(protected room: Room) {}
+ constructor(protected room: Room, protected exportType: exportTypes, protected numberOfEvents?: number) {}
protected getTimelineConversation = () : MatrixEvent[] => {
if (!this.room) return;
@@ -20,7 +22,7 @@ export default abstract class Exporter {
timelineWindow.load(null, 30);
- const events = timelineWindow.getEvents();
+ const events: MatrixEvent[] = timelineWindow.getEvents();
// Clone and reverse the events so that we preserve the order
arrayFastClone(events)
@@ -32,5 +34,121 @@ export default abstract class Exporter {
return events;
};
+ protected eventToJson(ev) {
+ const jsonEvent = ev.toJSON();
+ const e = ev.isEncrypted() ? jsonEvent.decrypted : jsonEvent;
+ if (ev.isEncrypted()) {
+ e.curve25519Key = ev.getSenderKey();
+ e.ed25519Key = ev.getClaimedEd25519Key();
+ e.algorithm = ev.getWireContent().algorithm;
+ e.forwardingCurve25519KeyChain = ev.getForwardingCurve25519KeyChain();
+ } else {
+ delete e.curve25519Key;
+ delete e.ed25519Key;
+ delete e.algorithm;
+ delete e.forwardingCurve25519KeyChain;
+ }
+ return e;
+ }
+
+
+ protected getRequiredEvents = async () : Promise<MatrixEvent[]> => {
+ const client = MatrixClientPeg.get();
+ const eventMapper = client.getEventMapper({ preventReEmit: true });
+
+ let prevToken: string|null = null;
+ let limit = this.numberOfEvents || Number.MAX_VALUE;
+ let events: MatrixEvent[] = [];
+ const stateRes: any[] = [];
+ while (limit) {
+ const eventsPerCrawl = Math.min(limit, 100);
+ const res = await client._createMessagesRequest(this.room.roomId, prevToken, eventsPerCrawl, "b");
+
+ if (res.state) stateRes.push(...res.state);
+ if (res.chunk.length === 0) break;
+
+ limit -= eventsPerCrawl;
+
+ const matrixEvents: MatrixEvent[] = res.chunk.map(eventMapper);
+
+ matrixEvents.forEach(mxEv => events.push(mxEv));
+
+ prevToken = res.end;
+ }
+ events = events.reverse()
+ let stateEvents = [];
+ if (stateRes !== undefined) {
+ stateEvents = stateRes.map(eventMapper);
+ }
+
+ const profiles = {};
+
+ stateEvents.forEach(ev => {
+ if (ev.event.content &&
+ ev.event.content.membership === "join") {
+ profiles[ev.event.sender] = {
+ displayname: ev.event.content.displayname,
+ avatar_url: ev.event.content.avatar_url,
+ };
+ }
+ });
+
+ const decryptionPromises = events
+ .filter(event => event.isEncrypted())
+ .map(event => {
+ return client.decryptEventIfNeeded(event, {
+ isRetry: true,
+ emit: false,
+ });
+ });
+
+ // Let us wait for all the events to get decrypted.
+ await Promise.all(decryptionPromises);
+
+ const eventsWithProfile = events.map((ev) => {
+ const e = this.eventToJson(ev);
+
+ let profile: any = {};
+ if (e.sender in profiles) profile = profiles[e.sender];
+ const object = {
+ event: e,
+ profile: profile,
+ };
+ return object;
+ });
+
+ const matrixEvents = eventsWithProfile.map(e => {
+ const matrixEvent = eventMapper(e.event);
+
+ const member = new RoomMember(this.room.roomId, matrixEvent.getSender());
+
+ member.name = e.profile.displayname;
+
+ const memberEvent = eventMapper(
+ {
+ content: {
+ membership: "join",
+ avatar_url: e.profile.avatar_url,
+ displayname: e.profile.displayname,
+ },
+ type: "m.room.member",
+ event_id: matrixEvent.getId() + ":eventIndex",
+ room_id: matrixEvent.getRoomId(),
+ sender: matrixEvent.getSender(),
+ origin_server_ts: matrixEvent.getTs(),
+ state_key: matrixEvent.getSender(),
+ },
+ );
+
+ member.events.member = memberEvent;
+ matrixEvent.sender = member;
+
+ return matrixEvent;
+ });
+
+
+ return matrixEvents;
+ }
+
abstract export(): Promise<Blob>;
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 371ce9fffc..069e47d15b 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -22,23 +22,24 @@ import BaseAvatar from "../../components/views/avatars/BaseAvatar";
import exportCSS from "./exportCSS";
import exportJS from "./exportJS";
import exportIcons from "./exportIcons";
+import { exportTypes } from "./exportUtils";
export default class HTMLExporter extends Exporter {
protected zip: JSZip;
protected avatars: Map<string, boolean>;
protected permalinkCreator: RoomPermalinkCreator;
- constructor(room: Room) {
- super(room);
+ constructor(room: Room, exportType: exportTypes, numberOfEvents?: number) {
+ super(room, exportType, numberOfEvents);
this.zip = new JSZip();
this.avatars = new Map<string, boolean>();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
}
- protected async getRoomAvatar(avatarSide: number) {
+ protected async getRoomAvatar() {
let blob: Blob;
- const avatarUrl = Avatar.avatarUrlForRoom(this.room, avatarSide, avatarSide, "crop");
- const avatarPath = `room/avatar${avatarSide}.png`;
+ const avatarUrl = Avatar.avatarUrlForRoom(this.room, 32, 32, "crop");
+ const avatarPath = "room.png";
if (avatarUrl) {
const image = await fetch(avatarUrl);
blob = await image.blob();
@@ -46,8 +47,8 @@ export default class HTMLExporter extends Exporter {
}
const avatar = (
<BaseAvatar
- width={avatarSide}
- height={avatarSide}
+ width={32}
+ height={32}
name={this.room.name}
title={this.room.name}
url={blob ? avatarPath : null}
@@ -58,7 +59,7 @@ export default class HTMLExporter extends Exporter {
}
protected async wrapHTML(content: string) {
- const roomAvatar32 = await this.getRoomAvatar(32);
+ const roomAvatar = await this.getRoomAvatar();
const exportDate = formatFullDateNoDayNoTime(new Date());
const cli = MatrixClientPeg.get();
const creator = this.room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
@@ -81,7 +82,6 @@ export default class HTMLExporter extends Exporter {
});
const topicText = topic ? _t("Topic: %(topic)s", { topic }) : "";
- const roomAvatar52 = await this.getRoomAvatar(52);
return `
@@ -108,7 +108,7 @@ export default class HTMLExporter extends Exporter {
<div class="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
<div class="mx_RoomHeader_avatar">
<div class="mx_DecoratedRoomAvatar">
- ${roomAvatar32}
+ ${roomAvatar}
</div>
</div>
<div class="mx_RoomHeader_name">
@@ -143,9 +143,10 @@ export default class HTMLExporter extends Exporter {
role="list"
>
<div class="mx_NewRoomIntro">
- ${roomAvatar52}
+ ${roomAvatar}
<h2> ${this.room.name} </h2>
<p> ${createdText} <br/><br/> ${exportedText} </p>
+ <br/>
<p> ${topicText} </p>
</div>
${content}
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 34edee0ac6..f2d85af636 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,4 +1,4 @@
-import { Room } from 'matrix-js-sdk/src/models/room';
+import { Room } from "matrix-js-sdk/src/models/room";
import HTMLExporter from "./HtmlExport";
export enum exportFormats {
@@ -7,14 +7,21 @@ export enum exportFormats {
LOGS = "LOGS",
}
-export enum exportOptions {
+export enum exportTypes {
TIMELINE = "TIMELINE",
+ BEGINNING = "BEGINNING",
+ LAST_N_MESSAGES = "LAST_N_MESSAGES",
}
-const exportConversationalHistory = async (room: Room, format: string, options) => {
+const exportConversationalHistory = async (
+ room: Room,
+ format: string,
+ exportType: exportTypes,
+ numberOfEvents?: number,
+) => {
switch (format) {
case exportFormats.HTML:
- await new HTMLExporter(room).export();
+ await new HTMLExporter(room, exportType, numberOfEvents).export();
break;
case exportFormats.JSON:
break;
From 56488d2c428ed10f228dc3bdce94f4c5f2e6b6b4 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 7 Jun 2021 11:34:03 +0530
Subject: [PATCH 044/313] Modify the process for setting event metadata and
refactor
---
src/components/views/rooms/RoomHeader.js | 6 +-
src/utils/exportUtils/Exporter.ts | 104 +++++------------------
src/utils/exportUtils/HtmlExport.tsx | 16 ++--
3 files changed, 32 insertions(+), 94 deletions(-)
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index ba3b72e779..ac621f7010 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -84,8 +84,8 @@ export default class RoomHeader extends React.Component {
}, 500);
- _exportConvertionalHistory = async () => {
- await exportConversationalHistory(this.props.room, exportFormats.HTML, exportTypes.LAST_N_MESSAGES, 30);
+ _exportConversationalHistory = async () => {
+ await exportConversationalHistory(this.props.room, exportFormats.HTML, exportTypes.LAST_N_MESSAGES, 250);
}
render() {
@@ -198,7 +198,7 @@ export default class RoomHeader extends React.Component {
const exportButton = <AccessibleTooltipButton
className="mx_RoomHeader_button mx_ImageView_button_download"
- onClick={this._exportConvertionalHistory}
+ onClick={this._exportConversationalHistory}
title={_t("Export conversation")} />;
const rightRow =
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 8e3a454e2e..b0f1104bd2 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -4,10 +4,9 @@ import { MatrixClientPeg } from "../../MatrixClientPeg";
import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
import { arrayFastClone } from "../arrays";
import { exportTypes } from "./exportUtils";
-import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
export default abstract class Exporter {
- constructor(protected room: Room, protected exportType: exportTypes, protected numberOfEvents?: number) {}
+ protected constructor(protected room: Room, protected exportType: exportTypes, protected numberOfEvents?: number) {}
protected getTimelineConversation = () : MatrixEvent[] => {
if (!this.room) return;
@@ -34,37 +33,32 @@ export default abstract class Exporter {
return events;
};
- protected eventToJson(ev) {
- const jsonEvent = ev.toJSON();
- const e = ev.isEncrypted() ? jsonEvent.decrypted : jsonEvent;
- if (ev.isEncrypted()) {
- e.curve25519Key = ev.getSenderKey();
- e.ed25519Key = ev.getClaimedEd25519Key();
- e.algorithm = ev.getWireContent().algorithm;
- e.forwardingCurve25519KeyChain = ev.getForwardingCurve25519KeyChain();
- } else {
- delete e.curve25519Key;
- delete e.ed25519Key;
- delete e.algorithm;
- delete e.forwardingCurve25519KeyChain;
+ protected setEventMetadata = (event: MatrixEvent) => {
+ const client = MatrixClientPeg.get();
+ const roomState = client.getRoom(this.room.roomId).currentState;
+ event.sender = roomState.getSentinelMember(
+ event.getSender(),
+ );
+ if (event.getType() === "m.room.member") {
+ event.target = roomState.getSentinelMember(
+ event.getStateKey(),
+ );
}
- return e;
+ return event;
}
-
protected getRequiredEvents = async () : Promise<MatrixEvent[]> => {
const client = MatrixClientPeg.get();
- const eventMapper = client.getEventMapper({ preventReEmit: true });
+ const eventMapper = client.getEventMapper();
let prevToken: string|null = null;
let limit = this.numberOfEvents || Number.MAX_VALUE;
let events: MatrixEvent[] = [];
- const stateRes: any[] = [];
+
while (limit) {
const eventsPerCrawl = Math.min(limit, 100);
const res: any = await client.createMessagesRequest(this.room.roomId, prevToken, eventsPerCrawl, "b");
- if (res.state) stateRes.push(...res.state);
if (res.chunk.length === 0) break;
limit -= eventsPerCrawl;
@@ -75,79 +69,25 @@ export default abstract class Exporter {
prevToken = res.end;
}
- events = events.reverse()
- let stateEvents = [];
- if (stateRes !== undefined) {
- stateEvents = stateRes.map(eventMapper);
- }
-
- const profiles = {};
-
- stateEvents.forEach(ev => {
- if (ev.event.content &&
- ev.event.content.membership === "join") {
- profiles[ev.event.sender] = {
- displayname: ev.event.content.displayname,
- avatar_url: ev.event.content.avatar_url,
- };
- }
- });
+ events = events.reverse();
const decryptionPromises = events
.filter(event => event.isEncrypted())
.map(event => {
return client.decryptEventIfNeeded(event, {
- isRetry: true,
- emit: false,
+ isRetry: true,
+ emit: false,
});
});
- // Let us wait for all the events to get decrypted.
+ //Wait for all the events to get decrypted.
await Promise.all(decryptionPromises);
- const eventsWithProfile = events.map((ev) => {
- const e = this.eventToJson(ev);
+ events.map((event) => {
+ return this.setEventMetadata(event);
+ })
- let profile: any = {};
- if (e.sender in profiles) profile = profiles[e.sender];
- const object = {
- event: e,
- profile: profile,
- };
- return object;
- });
-
- const matrixEvents = eventsWithProfile.map(e => {
- const matrixEvent = eventMapper(e.event);
-
- const member = new RoomMember(this.room.roomId, matrixEvent.getSender());
-
- member.name = e.profile.displayname;
-
- const memberEvent = eventMapper(
- {
- content: {
- membership: "join",
- avatar_url: e.profile.avatar_url,
- displayname: e.profile.displayname,
- },
- type: "m.room.member",
- event_id: matrixEvent.getId() + ":eventIndex",
- room_id: matrixEvent.getRoomId(),
- sender: matrixEvent.getSender(),
- origin_server_ts: matrixEvent.getTs(),
- state_key: matrixEvent.getSender(),
- },
- );
-
- member.events.member = memberEvent;
- matrixEvent.sender = member;
-
- return matrixEvent;
- });
-
-
- return matrixEvents;
+ return events;
}
abstract export(): Promise<Blob>;
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 069e47d15b..7a2b615dbd 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -77,7 +77,7 @@ export default class HTMLExporter extends Exporter {
exportDate,
roomName: this.room.name,
exporterDetails: `<a href="https://matrix.to/#/${exporter}" target="_blank" rel="noopener noreferrer">
- ${exporterName ? `<b>${ exporterName }</b>(${ exporter })` : `<b>${ exporter }</b>`}
+ ${exporterName ? `<b>${ exporterName }</b>(${ exporter })` : `<b>${ exporter }</b>`}
</a>`,
});
@@ -108,7 +108,7 @@ export default class HTMLExporter extends Exporter {
<div class="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
<div class="mx_RoomHeader_avatar">
<div class="mx_DecoratedRoomAvatar">
- ${roomAvatar}
+ ${roomAvatar}
</div>
</div>
<div class="mx_RoomHeader_name">
@@ -172,8 +172,7 @@ export default class HTMLExporter extends Exporter {
protected hasAvatar(event: MatrixEvent): boolean {
const member = event.sender;
- if (member.getMxcAvatarUrl()) return true;
- return false;
+ return !!member.getMxcAvatarUrl();
}
protected async saveAvatarIfNeeded(event: MatrixEvent) {
@@ -244,8 +243,7 @@ export default class HTMLExporter extends Exporter {
}
const fileDate = formatFullDateNoDay(new Date(event.getTs()));
const [fileName, fileExt] = this.splitFileName(event.getContent().body);
- const filePath = fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
- return filePath;
+ return fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
}
@@ -313,7 +311,7 @@ export default class HTMLExporter extends Exporter {
}
public async export() {
- const res = this.getTimelineConversation();
+ const res = await this.getRequiredEvents();
const html = await this.createHTML(res);
this.zip.file("index.html", html);
@@ -342,7 +340,7 @@ export default class HTMLExporter extends Exporter {
const blobPiece = blob.slice(fPointer, fPointer + sliceSize);
const reader = new FileReader();
- const waiter = new Promise<void>((resolve, reject) => {
+ const waiter = new Promise<void>((resolve) => {
reader.onloadend = evt => {
const arrayBufferNew: any = evt.target.result;
const uint8ArrayNew = new Uint8Array(arrayBufferNew);
@@ -353,7 +351,7 @@ export default class HTMLExporter extends Exporter {
});
await waiter;
}
- writer.close();
+ await writer.close();
return blob;
}
From 2b432a7718fe1b43a557b7e87a047d81e4213ecc Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 7 Jun 2021 11:50:19 +0530
Subject: [PATCH 045/313] Add markdown CSS
---
src/utils/exportUtils/exportCSS.ts | 15 +++++++++------
1 file changed, 9 insertions(+), 6 deletions(-)
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 6f2284cc32..7813c1651a 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -19503,7 +19503,7 @@ a.mx_reply_anchor:hover{
}
@-webkit-keyframes mx_snackbar_fadein {
- from {bottom: 0; opacity: 0;}
+ from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@@ -19513,7 +19513,7 @@ a.mx_reply_anchor:hover{
}
@-webkit-keyframes mx_snackbar_fadeout {
- from {bottom: 30px; opacity: 1;}
+ from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@@ -19544,11 +19544,11 @@ li.mx_Export_EventWrapper:target {
@keyframes mx_event_highlight_animation {
- 0%,100% {
+ 0%,100% {
background: white;
}
- 50% {
- background: #e3e2df;
+ 50% {
+ background: #e3e2df;
}
}
@@ -19563,4 +19563,7 @@ li.mx_Export_EventWrapper:target {
}
`
-export default lightCSS + snackbarCSS;
+
+const markdownCSS = `.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;overflow:hidden;font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;font-size:16px;line-height:1.6;word-wrap:break-word}.markdown-body *{-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a{background:0 0;color:#4183c4;text-decoration:none}.markdown-body a:active,.markdown-body a:hover{outline:0}.markdown-body a:active,.markdown-body a:focus,.markdown-body a:hover{text-decoration:underline}.markdown-body strong{font-weight:700}.markdown-body em{font-style:italic}.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;position:relative;margin-top:1em;margin-bottom:16px;font-weight:700;line-height:1.4}.markdown-body h1,.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid #eee}.markdown-body h1{font-size:2.25em;line-height:1.2}.markdown-body h2{font-size:1.75em;line-height:1.225}.markdown-body h3{font-size:1.5em}.markdown-body h4{font-size:1.25em}.markdown-body h5{font-size:1em}.markdown-body h6{font-size:1em;color:#777}.markdown-body code,.markdown-body kbd,.markdown-body pre{font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace}.markdown-body code{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.markdown-body code:after,.markdown-body code:before{letter-spacing:-.2em;content:'\\00a0'}.markdown-body pre{word-wrap:normal;padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.markdown-body pre code{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background:0 0}.markdown-body pre code:after,.markdown-body pre code:before{content:normal}.markdown-body pre>code{font-size:1em;word-break:normal;white-space:pre;border:0}.markdown-body kbd{background-color:#e7e7e7;background-image:-webkit-linear-gradient(#fefefe,#e7e7e7);background-image:linear-gradient(#fefefe,#e7e7e7);background-repeat:repeat-x;display:inline-block;padding:5px 5px 1px;margin:0 1px;font-size:11px;line-height:10px;color:#000;border:1px solid #cfcfcf;border-radius:2px;box-shadow:0 1px 0 #ccc}.markdown-body hr:after,.markdown-body hr:before{display:table;content:''}.markdown-body input{color:inherit;font:inherit;margin:0;font-size:13px;line-height:1.4;font-family:Helvetica,Arial,freesans,clean,sans-serif,'Segoe UI Emoji','Segoe UI Symbol'}.markdown-body input[disabled]{cursor:default}.markdown-body input[type=checkbox]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}.markdown-body blockquote{margin:0 0 16px;padding:0 15px;color:#777;border-left:4px solid #ddd}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body img{border:0;max-width:100%;-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body hr{-moz-box-sizing:content-box;box-sizing:content-box;overflow:hidden;background:#e7e7e7;height:4px;padding:0;margin:16px 0;border:0}.markdown-body hr:after{clear:both}.markdown-body td,.markdown-body th{padding:0}.markdown-body table{border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}.markdown-body table td,.markdown-body table th{padding:6px 13px;border:1px solid #ddd}.markdown-body table th{font-weight:700}.markdown-body table tr{background-color:#fff;border-top:1px solid #ccc}.markdown-body table tr:nth-child(2n){background-color:#f8f8f8}.markdown-body ol,.markdown-body ul{padding:0 0 0 2em}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol{list-style-type:lower-alpha}.markdown-body li>p{margin-top:16px}.markdown-body dd{margin-left:0}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}`
+
+export default lightCSS + markdownCSS + snackbarCSS;
From b68ea484447a2a4ed2ea52f313fa0dc5de869184 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 7 Jun 2021 12:22:02 +0530
Subject: [PATCH 046/313] Explicitly declare cli and use alt attribute for
images
---
src/components/views/messages/MFileBody.js | 2 +-
src/components/views/messages/RedactedBody.tsx | 16 +++++++++-------
2 files changed, 10 insertions(+), 8 deletions(-)
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 8afd4abaf6..195040518b 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -177,7 +177,7 @@ export default class MFileBody extends React.Component {
<div className="mx_MFileBody_info">
<span className="mx_MFileBody_info_icon" >
{this.props.isExporting ?
- <img className="mx_export_attach_icon" src="icons/attach.svg" />
+ <img alt="Attachment" className="mx_export_attach_icon" src="icons/attach.svg" />
: null}
</span>
<span className="mx_MFileBody_info_filename">{this.presentableTextForFile(content, false)}</span>
diff --git a/src/components/views/messages/RedactedBody.tsx b/src/components/views/messages/RedactedBody.tsx
index fb4f0b0efa..9490aeddf2 100644
--- a/src/components/views/messages/RedactedBody.tsx
+++ b/src/components/views/messages/RedactedBody.tsx
@@ -14,13 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React, {useContext} from "react";
-import {MatrixClient} from "matrix-js-sdk/src/client";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import React, { useContext } from "react";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { _t } from "../../../languageHandler";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {formatFullDate} from "../../../DateUtils";
+import { formatFullDate } from "../../../DateUtils";
import SettingsStore from "../../../settings/SettingsStore";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
interface IProps {
mxEvent: MatrixEvent;
@@ -28,8 +29,9 @@ interface IProps {
}
const RedactedBody = React.forwardRef<any, IProps>(({mxEvent, isExporting}, ref) => {
- const cli: MatrixClient = useContext(MatrixClientContext);
-
+ let cli: MatrixClient = useContext(MatrixClientContext);
+ // As context doesn't propagate during export, we'll have to explicitly declare
+ if (isExporting) cli = MatrixClientPeg.get();
let text = _t("Message deleted");
const unsigned = mxEvent.getUnsigned();
const redactedBecauseUserId = unsigned && unsigned.redacted_because && unsigned.redacted_because.sender;
@@ -45,7 +47,7 @@ const RedactedBody = React.forwardRef<any, IProps>(({mxEvent, isExporting}, ref)
return (
<span className="mx_RedactedBody" ref={ref} title={titleText}>
- { isExporting ? <img className="mx_export_trash_icon" src="icons/trash.svg" title="Redacted" /> : null }
+ { isExporting ? <img alt="Redacted" className="mx_export_trash_icon" src="icons/trash.svg" /> : null }
{ text }
</span>
);
From 0f06f1b9c4bc51dd68f2ad78bcfb57c12d4bea0f Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 7 Jun 2021 14:47:27 +0530
Subject: [PATCH 047/313] Replace map with for loop
---
src/utils/exportUtils/Exporter.ts | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index b0f1104bd2..a95833a461 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -69,6 +69,7 @@ export default abstract class Exporter {
prevToken = res.end;
}
+ //Reverse the events so that we preserve the order
events = events.reverse();
const decryptionPromises = events
@@ -83,9 +84,7 @@ export default abstract class Exporter {
//Wait for all the events to get decrypted.
await Promise.all(decryptionPromises);
- events.map((event) => {
- return this.setEventMetadata(event);
- })
+ for (let i = 0; i < events.length; i++) this.setEventMetadata(events[i]);
return events;
}
From 9e298e9f4503024583d4be6df99c1d226824745c Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 8 Jun 2021 12:36:28 +0530
Subject: [PATCH 048/313] Add logs and unload listener
---
src/components/views/rooms/RoomHeader.js | 2 +-
src/utils/exportUtils/Exporter.ts | 4 ++--
src/utils/exportUtils/HtmlExport.tsx | 23 ++++++++++++++++++++++-
3 files changed, 25 insertions(+), 4 deletions(-)
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index ac621f7010..31bd9ba167 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -85,7 +85,7 @@ export default class RoomHeader extends React.Component {
_exportConversationalHistory = async () => {
- await exportConversationalHistory(this.props.room, exportFormats.HTML, exportTypes.LAST_N_MESSAGES, 250);
+ await exportConversationalHistory(this.props.room, exportFormats.HTML, exportTypes.LAST_N_MESSAGES, 100);
}
render() {
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index a95833a461..583e16b1fd 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -26,8 +26,8 @@ export default abstract class Exporter {
// Clone and reverse the events so that we preserve the order
arrayFastClone(events)
.reverse()
- .forEach(event => {
- cli.decryptEventIfNeeded(event);
+ .forEach(async (event) => {
+ await cli.decryptEventIfNeeded(event);
});
return events;
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 7a2b615dbd..e553d3c900 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -34,6 +34,12 @@ export default class HTMLExporter extends Exporter {
this.zip = new JSZip();
this.avatars = new Map<string, boolean>();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
+ window.addEventListener("beforeunload", this.onBeforeUnload)
+ }
+
+ protected onBeforeUnload = (e: BeforeUnloadEvent) => {
+ e.preventDefault();
+ return e.returnValue = "Are you sure you want to exit during this export?";
}
protected async getRoomAvatar() {
@@ -311,22 +317,35 @@ export default class HTMLExporter extends Exporter {
}
public async export() {
+ console.info("Starting export process...");
+ console.info("Fetching events...");
+ const fetchStart = performance.now();
const res = await this.getRequiredEvents();
+ const fetchEnd = performance.now();
+
+ console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000} s`);
+ console.info("Creating HTML...");
+
const html = await this.createHTML(res);
this.zip.file("index.html", html);
this.zip.file("css/style.css", exportCSS);
this.zip.file("js/script.js", exportJS);
+
for (const iconName in exportIcons) {
this.zip.file(`icons/${iconName}`, exportIcons[iconName]);
}
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
+ console.info("HTML creation successful!");
+ console.info("Generating a ZIP...");
//Generate the zip file asynchronously
const blob = await this.zip.generateAsync({ type: "blob" });
+ console.log("ZIP generated successfully");
+ console.info("Writing to file system...")
//Support for firefox browser
streamSaver.WritableStream = ponyfill.WritableStream
//Create a writable stream to the directory
@@ -352,7 +371,9 @@ export default class HTMLExporter extends Exporter {
await waiter;
}
await writer.close();
-
+ const exportEnd = performance.now();
+ console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ window.removeEventListener("beforeunload", this.onBeforeUnload);
return blob;
}
}
From 6f8c1638aa43930413ecd2b234c1326d11d699fb Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 8 Jun 2021 18:35:45 +0530
Subject: [PATCH 049/313] isExporting -> forExport and wrap EventTile with
Context Provider
---
src/components/views/elements/ReplyThread.js | 10 ++--
.../views/messages/DateSeparator.js | 4 +-
src/components/views/messages/MFileBody.js | 4 +-
src/components/views/messages/MessageEvent.js | 4 +-
.../views/messages/RedactedBody.tsx | 11 ++--
src/components/views/rooms/EventTile.tsx | 14 ++---
src/utils/exportUtils/HtmlExport.tsx | 56 ++++++++++---------
src/utils/exportUtils/exportUtils.ts | 5 +-
8 files changed, 55 insertions(+), 53 deletions(-)
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index 6e265903d8..c6eeb2c879 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -46,7 +46,7 @@ export default class ReplyThread extends React.Component {
permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired,
// Specifies which layout to use.
layout: LayoutPropType,
- isExporting: PropTypes.bool,
+ forExport: PropTypes.bool,
};
static contextType = MatrixClientContext;
@@ -69,7 +69,7 @@ export default class ReplyThread extends React.Component {
this.unmounted = false;
- if (this.props.isExporting) return;
+ if (this.props.forExport) return;
this.context.on("Event.replaced", this.onEventReplaced);
this.room = this.context.getRoom(this.props.parentEv.getRoomId());
@@ -216,13 +216,13 @@ export default class ReplyThread extends React.Component {
};
}
- static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, layout, isExporting) {
+ static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, layout, forExport) {
if (!ReplyThread.getParentEventId(parentEv)) {
return null;
}
return <ReplyThread
parentEv={parentEv}
- isExporting={isExporting}
+ forExport={forExport}
onHeightChanged={onHeightChanged}
ref={ref}
permalinkCreator={permalinkCreator}
@@ -367,7 +367,7 @@ export default class ReplyThread extends React.Component {
})
}
</blockquote>;
- } else if (this.props.isExporting) {
+ } else if (this.props.forExport) {
const eventId = ReplyThread.getParentEventId(this.props.parentEv);
header = <p style={{ marginTop: -5, marginBottom: 5 }}>
In reply to <a className="mx_reply_anchor" href={`#${eventId}`} scroll-to={eventId}>this message</a>
diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.js
index 2aba0eaef8..5e15b584c5 100644
--- a/src/components/views/messages/DateSeparator.js
+++ b/src/components/views/messages/DateSeparator.js
@@ -37,14 +37,14 @@ function getdaysArray() {
export default class DateSeparator extends React.Component {
static propTypes = {
ts: PropTypes.number.isRequired,
- isExporting: PropTypes.bool,
+ forExport: PropTypes.bool,
};
getLabel() {
const date = new Date(this.props.ts);
// During the time the archive is being viewed, a specific day might not make sense, so we return the full date
- if (this.props.isExporting) return formatFullDateNoTime(date);
+ if (this.props.forExport) return formatFullDateNoTime(date);
const today = new Date();
const yesterday = new Date();
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 195040518b..1ef2c2eb64 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -104,7 +104,7 @@ export default class MFileBody extends React.Component {
showGenericPlaceholder: PropTypes.bool,
/* to set source to local file path during export */
mediaSrc: PropTypes.string,
- isExporting: PropTypes.bool,
+ forExport: PropTypes.bool,
};
static defaultProps = {
@@ -176,7 +176,7 @@ export default class MFileBody extends React.Component {
placeholder = (
<div className="mx_MFileBody_info">
<span className="mx_MFileBody_info_icon" >
- {this.props.isExporting ?
+ {this.props.forExport ?
<img alt="Attachment" className="mx_export_attach_icon" src="icons/attach.svg" />
: null}
</span>
diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js
index e243c3c8bd..49dcc7b5e2 100644
--- a/src/components/views/messages/MessageEvent.js
+++ b/src/components/views/messages/MessageEvent.js
@@ -48,7 +48,7 @@ export default class MessageEvent extends React.Component {
mediaSrc: PropTypes.string,
/* to set source to local file path during export */
- isExporting: PropTypes.bool,
+ forExport: PropTypes.bool,
/* the maximum image height to use, if the event is an image */
maxImageHeight: PropTypes.number,
@@ -127,7 +127,7 @@ export default class MessageEvent extends React.Component {
showUrlPreview={this.props.showUrlPreview}
tileShape={this.props.tileShape}
mediaSrc={this.props.mediaSrc}
- isExporting={this.props.isExporting}
+ forExport={this.props.forExport}
maxImageHeight={this.props.maxImageHeight}
replacingEventId={this.props.replacingEventId}
editState={this.props.editState}
diff --git a/src/components/views/messages/RedactedBody.tsx b/src/components/views/messages/RedactedBody.tsx
index 9490aeddf2..7fa6a3b093 100644
--- a/src/components/views/messages/RedactedBody.tsx
+++ b/src/components/views/messages/RedactedBody.tsx
@@ -21,17 +21,14 @@ import { _t } from "../../../languageHandler";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { formatFullDate } from "../../../DateUtils";
import SettingsStore from "../../../settings/SettingsStore";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
interface IProps {
mxEvent: MatrixEvent;
- isExporting: boolean;
+ forExport: boolean;
}
-const RedactedBody = React.forwardRef<any, IProps>(({mxEvent, isExporting}, ref) => {
- let cli: MatrixClient = useContext(MatrixClientContext);
- // As context doesn't propagate during export, we'll have to explicitly declare
- if (isExporting) cli = MatrixClientPeg.get();
+const RedactedBody = React.forwardRef<any, IProps>(({mxEvent, forExport}, ref) => {
+ const cli: MatrixClient = useContext(MatrixClientContext);
let text = _t("Message deleted");
const unsigned = mxEvent.getUnsigned();
const redactedBecauseUserId = unsigned && unsigned.redacted_because && unsigned.redacted_because.sender;
@@ -47,7 +44,7 @@ const RedactedBody = React.forwardRef<any, IProps>(({mxEvent, isExporting}, ref)
return (
<span className="mx_RedactedBody" ref={ref} title={titleText}>
- { isExporting ? <img alt="Redacted" className="mx_export_trash_icon" src="icons/trash.svg" /> : null }
+ { forExport ? <img alt="Redacted" className="mx_export_trash_icon" src="icons/trash.svg" /> : null }
{ text }
</span>
);
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 614c53735e..7d8bad0bed 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -249,7 +249,7 @@ interface IProps {
// for now.
tileShape?: 'notif' | 'file_grid' | 'reply' | 'reply_preview';
- isExporting?: boolean;
+ forExport?: boolean;
// Used while exporting to refer to the local source rather than the online one
mediaSrc?: string;
@@ -320,7 +320,7 @@ export default class EventTile extends React.Component<IProps, IState> {
static defaultProps = {
// no-op function because onHeightChanged is optional yet some sub-components assume its existence
onHeightChanged: function() {},
- isExporting: false,
+ forExport: false,
};
static contextType = MatrixClientContext;
@@ -427,8 +427,6 @@ export default class EventTile extends React.Component<IProps, IState> {
// TODO: [REACT-WARNING] Move into constructor
// eslint-disable-next-line camelcase
UNSAFE_componentWillMount() {
- // Context isn't propagated through renderToStaticMarkup so we'll have to explicitly set it during export
- if (this.props.isExporting) this.context = MatrixClientPeg.get();
this.verifyEvent(this.props.mxEvent);
}
@@ -631,7 +629,7 @@ export default class EventTile extends React.Component<IProps, IState> {
}
shouldHighlight() {
- if (this.props.isExporting) return false;
+ if (this.props.forExport) return false;
const actions = this.context.getPushActionsForEvent(this.props.mxEvent.replacingEvent() || this.props.mxEvent);
if (!actions || !actions.tweaks) { return false; }
@@ -981,7 +979,7 @@ export default class EventTile extends React.Component<IProps, IState> {
}
const MessageActionBar = sdk.getComponent('messages.MessageActionBar');
- const showMessageActionBar = !isEditing && !this.props.isExporting;
+ const showMessageActionBar = !isEditing && !this.props.forExport;
const actionBar = showMessageActionBar ? <MessageActionBar
mxEvent={this.props.mxEvent}
reactions={this.state.reactions}
@@ -1155,7 +1153,7 @@ export default class EventTile extends React.Component<IProps, IState> {
this.props.permalinkCreator,
this.replyThread,
this.props.layout,
- this.props.isExporting,
+ this.props.forExport,
);
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
@@ -1179,7 +1177,7 @@ export default class EventTile extends React.Component<IProps, IState> {
{ thread }
<EventTileType ref={this.tile}
mxEvent={this.props.mxEvent}
- isExporting={this.props.isExporting}
+ forExport={this.props.forExport}
replacingEventId={this.props.replacingEventId}
editState={this.props.editState}
mediaSrc={this.props.mediaSrc}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index e553d3c900..b9d4763153 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -23,16 +23,20 @@ import exportCSS from "./exportCSS";
import exportJS from "./exportJS";
import exportIcons from "./exportIcons";
import { exportTypes } from "./exportUtils";
+import MatrixClientContext from "../../contexts/MatrixClientContext";
+import { MatrixClient } from "matrix-js-sdk";
export default class HTMLExporter extends Exporter {
protected zip: JSZip;
protected avatars: Map<string, boolean>;
protected permalinkCreator: RoomPermalinkCreator;
+ protected matrixClient: MatrixClient;
constructor(room: Room, exportType: exportTypes, numberOfEvents?: number) {
super(room, exportType, numberOfEvents);
this.zip = new JSZip();
this.avatars = new Map<string, boolean>();
+ this.matrixClient = MatrixClientPeg.get();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
window.addEventListener("beforeunload", this.onBeforeUnload)
}
@@ -214,7 +218,7 @@ export default class HTMLExporter extends Exporter {
protected getDateSeparator(event: MatrixEvent) {
const ts = event.getTs();
- const dateSeparator = <li key={ts}><DateSeparator isExporting={true} key={ts} ts={ts} /></li>;
+ const dateSeparator = <li key={ts}><DateSeparator forExport={true} key={ts} ts={ts} /></li>;
return renderToStaticMarkup(dateSeparator);
}
@@ -258,30 +262,32 @@ export default class HTMLExporter extends Exporter {
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
return <li className="mx_Export_EventWrapper" id={mxEv.getId()}>
- <EventTile
- mxEvent={mxEv}
- continuation={continuation}
- isRedacted={mxEv.isRedacted()}
- replacingEventId={mxEv.replacingEventId()}
- isExporting={true}
- readReceipts={null}
- readReceiptMap={null}
- showUrlPreview={false}
- checkUnmounting={() => false}
- isTwelveHour={false}
- last={false}
- mediaSrc={mediaSrc}
- avatarSrc={hasAvatar ? `users/${mxEv.sender.userId}` : null}
- lastInSection={false}
- permalinkCreator={this.permalinkCreator}
- lastSuccessful={false}
- isSelectedEvent={false}
- getRelationsForEvent={null}
- showReactions={false}
- layout={Layout.Group}
- enableFlair={false}
- showReadReceipts={false}
- />
+ <MatrixClientContext.Provider value = {this.matrixClient}>
+ <EventTile
+ mxEvent={mxEv}
+ continuation={continuation}
+ isRedacted={mxEv.isRedacted()}
+ replacingEventId={mxEv.replacingEventId()}
+ forExport={true}
+ readReceipts={null}
+ readReceiptMap={null}
+ showUrlPreview={false}
+ checkUnmounting={() => false}
+ isTwelveHour={false}
+ last={false}
+ mediaSrc={mediaSrc}
+ avatarSrc={hasAvatar ? `users/${mxEv.sender.userId}` : null}
+ lastInSection={false}
+ permalinkCreator={this.permalinkCreator}
+ lastSuccessful={false}
+ isSelectedEvent={false}
+ getRelationsForEvent={null}
+ showReactions={false}
+ layout={Layout.Group}
+ enableFlair={false}
+ showReadReceipts={false}
+ />
+ </MatrixClientContext.Provider>
</li>
}
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index f2d85af636..531b5d98e4 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -10,6 +10,7 @@ export enum exportFormats {
export enum exportTypes {
TIMELINE = "TIMELINE",
BEGINNING = "BEGINNING",
+ START_DATE = "START_DATE",
LAST_N_MESSAGES = "LAST_N_MESSAGES",
}
@@ -17,11 +18,11 @@ const exportConversationalHistory = async (
room: Room,
format: string,
exportType: exportTypes,
- numberOfEvents?: number,
+ exportTypeMetadata?: number,
) => {
switch (format) {
case exportFormats.HTML:
- await new HTMLExporter(room, exportType, numberOfEvents).export();
+ await new HTMLExporter(room, exportType, exportTypeMetadata).export();
break;
case exportFormats.JSON:
break;
From 0f6d09a74b213f452e93bce831d745a7d420fb5f Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 8 Jun 2021 18:37:14 +0530
Subject: [PATCH 050/313] Update src/utils/exportUtils/Exporter.ts
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/utils/exportUtils/Exporter.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 583e16b1fd..0783f686a9 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -81,7 +81,7 @@ export default abstract class Exporter {
});
});
- //Wait for all the events to get decrypted.
+ // Wait for all the events to get decrypted.
await Promise.all(decryptionPromises);
for (let i = 0; i < events.length; i++) this.setEventMetadata(events[i]);
From 03d8e1f9313545e84d8dac559045e2b3cf597b33 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 8 Jun 2021 18:37:36 +0530
Subject: [PATCH 051/313] Update src/utils/exportUtils/Exporter.ts
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/utils/exportUtils/Exporter.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 0783f686a9..66bb287354 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -69,7 +69,7 @@ export default abstract class Exporter {
prevToken = res.end;
}
- //Reverse the events so that we preserve the order
+ // Reverse the events so that we preserve the order
events = events.reverse();
const decryptionPromises = events
From d80e008d288903be15a4fd435fec8a10551cc84f Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 8 Jun 2021 18:37:44 +0530
Subject: [PATCH 052/313] Update src/utils/exportUtils/Exporter.ts
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/utils/exportUtils/Exporter.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 66bb287354..270669374b 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -8,7 +8,7 @@ import { exportTypes } from "./exportUtils";
export default abstract class Exporter {
protected constructor(protected room: Room, protected exportType: exportTypes, protected numberOfEvents?: number) {}
- protected getTimelineConversation = () : MatrixEvent[] => {
+ protected getTimelineConversation = (): MatrixEvent[] => {
if (!this.room) return;
const cli = MatrixClientPeg.get();
From 573ababb8c249a0a6e2576bac4ae3b85feef255f Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 9 Jun 2021 15:23:47 +0530
Subject: [PATCH 053/313] Get rid of mediaSrc and avatarSrc props
---
src/components/views/avatars/MemberAvatar.tsx | 8 ++++----
src/components/views/messages/MAudioBody.js | 6 +++---
src/components/views/messages/MFileBody.js | 8 ++++----
src/components/views/messages/MImageBody.js | 12 ++++++------
src/components/views/messages/MVideoBody.tsx | 10 +++++-----
.../views/messages/MVoiceOrAudioBody.tsx | 4 ++--
src/components/views/messages/MessageEvent.js | 4 ----
src/components/views/rooms/EventTile.tsx | 9 +--------
src/utils/exportUtils/HtmlExport.tsx | 17 ++++++++++-------
9 files changed, 35 insertions(+), 43 deletions(-)
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 67d6ef38f0..48bf0d3423 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -34,10 +34,10 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
resizeMethod?: ResizeMethod;
// The onClick to give the avatar
onClick?: React.MouseEventHandler;
- // Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
+ // Whether the onClick of the avatar should be overridden to dispatch `Action.ViewUser`
viewUserOnClick?: boolean;
title?: string;
- avatarSrc?: string;
+ forExport?: boolean;
}
interface IState {
@@ -68,7 +68,7 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
private static getState(props: IProps): IState {
if (props.member?.name) {
let imageUrl = null;
- if (props.avatarSrc) imageUrl = props.avatarSrc;
+ if (props.forExport && props.member.getMxcAvatarUrl()) imageUrl = "AvatarForExport";
else if (props.member.getMxcAvatarUrl()) {
imageUrl = mediaFromMxc(props.member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
props.width,
@@ -95,7 +95,7 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
let {member, fallbackUserId, onClick, viewUserOnClick, ...otherProps} = this.props;
const userId = member ? member.userId : fallbackUserId;
- otherProps = omit(otherProps, "avatarSrc");
+ otherProps = omit(otherProps, "forExport");
if (viewUserOnClick) {
onClick = () => {
diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js
index 2c3eba8cb3..6c6a0527ea 100644
--- a/src/components/views/messages/MAudioBody.js
+++ b/src/components/views/messages/MAudioBody.js
@@ -42,7 +42,7 @@ export default class MAudioBody extends React.Component {
}
_getContentUrl() {
- if (this.props.mediaSrc) return this.props.mediaSrc;
+ if (this.props.forExport) return "forExport";
const media = mediaFromContent(this.props.mxEvent.getContent());
if (media.isEncrypted) {
return this.state.decryptedUrl;
@@ -52,7 +52,7 @@ export default class MAudioBody extends React.Component {
}
getFileBody() {
- if (this.props.mediaSrc) return null;
+ if (this.props.forExport) return null;
return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
}
@@ -95,7 +95,7 @@ export default class MAudioBody extends React.Component {
);
}
- if (!this.props.mediaSrc && content.file !== undefined && this.state.decryptedUrl === null) {
+ if (!this.props.forExport && content.file !== undefined && this.state.decryptedUrl === null) {
// Need to decrypt the attachment
// The attachment is decrypted in componentDidMount.
// For now add an img tag with a 16x16 spinner.
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 1ef2c2eb64..813b340bb9 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -102,8 +102,7 @@ export default class MFileBody extends React.Component {
tileShape: PropTypes.string,
/* whether or not to show the default placeholder for the file. Defaults to true. */
showGenericPlaceholder: PropTypes.bool,
- /* to set source to local file path during export */
- mediaSrc: PropTypes.string,
+
forExport: PropTypes.bool,
};
@@ -152,6 +151,7 @@ export default class MFileBody extends React.Component {
}
_getContentUrl() {
+ if (this.props.forExport) return null;
const media = mediaFromContent(this.props.mxEvent.getContent());
return media.srcHttp;
}
@@ -185,9 +185,9 @@ export default class MFileBody extends React.Component {
);
}
- if (this.props.mediaSrc) {
+ if (this.props.forExport) {
return <span className="mx_MFileBody">
- <a href={this.props.mediaSrc}>
+ <a href="forExport">
{ placeholder }
</a>
</span>;
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 56cc6a5eec..b8220d8a5c 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -172,7 +172,7 @@ export default class MImageBody extends React.Component {
}
_getContentUrl() {
- if (this.props.mediaSrc) return this.props.mediaSrc;
+ if (this.props.forExport) return "forExport";
const media = mediaFromContent(this.props.mxEvent.getContent());
if (media.isEncrypted) {
return this.state.decryptedUrl;
@@ -370,9 +370,9 @@ export default class MImageBody extends React.Component {
let gifLabel = null;
// e2e image hasn't been decrypted yet
- if (!this.props.mediaSrc && content.file !== undefined && this.state.decryptedUrl === null) {
+ if (!this.props.forExport && content.file !== undefined && this.state.decryptedUrl === null) {
placeholder = <InlineSpinner w={32} h={32} />;
- } else if (!this.props.mediaSrc && !this.state.imgLoaded) {
+ } else if (!this.props.forExport && !this.state.imgLoaded) {
// Deliberately, getSpinner is left unimplemented here, MStickerBody overides
placeholder = this.getPlaceholder();
}
@@ -418,7 +418,7 @@ export default class MImageBody extends React.Component {
</div>
}
- <div style={{display: this.props.mediaSrc ? "block" : !showPlaceholder ? undefined : 'none'}}>
+ <div style={{display: showPlaceholder ? 'none' : undefined}}>
{ img }
{ gifLabel }
</div>
@@ -450,7 +450,7 @@ export default class MImageBody extends React.Component {
// Overidden by MStickerBody
getFileBody() {
- if (this.props.mediaSrc) return null;
+ if (this.props.forExport) return null;
return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
}
@@ -468,7 +468,7 @@ export default class MImageBody extends React.Component {
const contentUrl = this._getContentUrl();
let thumbUrl;
- if ((this._isGif() && SettingsStore.getValue("autoplayGifsAndVideos")) || this.props.mediaSrc) {
+ if (this.props.forExport || (this._isGif() && SettingsStore.getValue("autoplayGifsAndVideos"))) {
thumbUrl = contentUrl;
} else {
thumbUrl = this._getThumbUrl();
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 2b4327068e..a6d849e836 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -30,7 +30,7 @@ interface IProps {
/* called when the video has loaded */
onHeightChanged: () => void;
/* used to refer to the local file while exporting */
- mediaSrc?: string;
+ forExport?: boolean;
}
interface IState {
@@ -78,7 +78,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
}
private getContentUrl(): string|null {
- if (this.props.mediaSrc) return this.props.mediaSrc;
+ if (this.props.forExport) return "forExport";
const media = mediaFromContent(this.props.mxEvent.getContent());
if (media.isEncrypted) {
return this.state.decryptedUrl;
@@ -94,7 +94,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
private getThumbUrl(): string|null {
// there's no need of thumbnail when the content is local
- if (this.props.mediaSrc) return null;
+ if (this.props.forExport) return null;
const content = this.props.mxEvent.getContent();
const media = mediaFromContent(content);
@@ -191,7 +191,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
}
private getFileBody = () => {
- if (this.props.mediaSrc) return null;
+ if (this.props.forExport) return null;
return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
}
@@ -209,7 +209,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
}
// Important: If we aren't autoplaying and we haven't decrypted it yet, show a video with a poster.
- if (!this.props.mediaSrc && content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
+ if (!this.props.forExport && content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
// Need to decrypt the attachment
// The attachment is decrypted in componentDidMount.
// For now add an img tag with a spinner.
diff --git a/src/components/views/messages/MVoiceOrAudioBody.tsx b/src/components/views/messages/MVoiceOrAudioBody.tsx
index d548d8d2fa..e5482c4b64 100644
--- a/src/components/views/messages/MVoiceOrAudioBody.tsx
+++ b/src/components/views/messages/MVoiceOrAudioBody.tsx
@@ -23,7 +23,7 @@ import MVoiceMessageBody from "./MVoiceMessageBody";
interface IProps {
mxEvent: MatrixEvent;
- mediaSrc?: string;
+ forExport?: boolean;
}
@replaceableComponent("views.messages.MVoiceOrAudioBody")
@@ -31,7 +31,7 @@ export default class MVoiceOrAudioBody extends React.PureComponent<IProps> {
public render() {
const isVoiceMessage = !!this.props.mxEvent.getContent()['org.matrix.msc2516.voice'];
const voiceMessagesEnabled = SettingsStore.getValue("feature_voice_messages");
- if (isVoiceMessage && voiceMessagesEnabled && !this.props.mediaSrc) {
+ if (!this.props.forExport && isVoiceMessage && voiceMessagesEnabled) {
return <MVoiceMessageBody {...this.props} />;
} else {
return <MAudioBody {...this.props} />;
diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js
index 49dcc7b5e2..e53a796f70 100644
--- a/src/components/views/messages/MessageEvent.js
+++ b/src/components/views/messages/MessageEvent.js
@@ -44,9 +44,6 @@ export default class MessageEvent extends React.Component {
/* the shape of the tile, used */
tileShape: PropTypes.string,
- /* to set source to local file path during export */
- mediaSrc: PropTypes.string,
-
/* to set source to local file path during export */
forExport: PropTypes.bool,
@@ -126,7 +123,6 @@ export default class MessageEvent extends React.Component {
highlightLink={this.props.highlightLink}
showUrlPreview={this.props.showUrlPreview}
tileShape={this.props.tileShape}
- mediaSrc={this.props.mediaSrc}
forExport={this.props.forExport}
maxImageHeight={this.props.maxImageHeight}
replacingEventId={this.props.replacingEventId}
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index e1aa7ca81a..f8e3cc4887 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -251,12 +251,6 @@ interface IProps {
forExport?: boolean;
- // Used while exporting to refer to the local source rather than the online one
- mediaSrc?: string;
-
- // Used while exporting to refer to the local avatar rather than the online one
- avatarSrc?: string;
-
// show twelve hour timestamps
isTwelveHour?: boolean;
@@ -963,7 +957,7 @@ export default class EventTile extends React.Component<IProps, IState> {
avatar = (
<div className="mx_EventTile_avatar">
<MemberAvatar
- avatarSrc={this.props.avatarSrc}
+ forExport={this.props.forExport}
member={member}
width={avatarSize}
height={avatarSize}
@@ -1190,7 +1184,6 @@ export default class EventTile extends React.Component<IProps, IState> {
forExport={this.props.forExport}
replacingEventId={this.props.replacingEventId}
editState={this.props.editState}
- mediaSrc={this.props.mediaSrc}
highlights={this.props.highlights}
highlightLink={this.props.highlightLink}
showUrlPreview={this.props.showUrlPreview}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index b9d4763153..8fb30b08a3 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -257,11 +257,10 @@ export default class HTMLExporter extends Exporter {
}
- protected async getEventTile(mxEv: MatrixEvent, continuation: boolean, mediaSrc?: string) {
+ protected async getEventTile(mxEv: MatrixEvent, continuation: boolean, filePath?: string) {
const hasAvatar = this.hasAvatar(mxEv);
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
-
- return <li className="mx_Export_EventWrapper" id={mxEv.getId()}>
+ const eventTile = <li className="mx_Export_EventWrapper" id={mxEv.getId()}>
<MatrixClientContext.Provider value = {this.matrixClient}>
<EventTile
mxEvent={mxEv}
@@ -275,8 +274,6 @@ export default class HTMLExporter extends Exporter {
checkUnmounting={() => false}
isTwelveHour={false}
last={false}
- mediaSrc={mediaSrc}
- avatarSrc={hasAvatar ? `users/${mxEv.sender.userId}` : null}
lastInSection={false}
permalinkCreator={this.permalinkCreator}
lastSuccessful={false}
@@ -289,10 +286,16 @@ export default class HTMLExporter extends Exporter {
/>
</MatrixClientContext.Provider>
</li>
+ let eventTileMarkup = renderToStaticMarkup(eventTile);
+ if (filePath) eventTileMarkup = eventTileMarkup.replace(/(src=|href=)"forExport"/, `$1"${filePath}"`);
+ if (hasAvatar) {
+ eventTileMarkup = eventTileMarkup.replace(/src="AvatarForExport"/, `src="users/${mxEv.sender.userId}"`);
+ }
+ return eventTileMarkup;
}
protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
- let eventTile: JSX.Element;
+ let eventTile: string;
const attachmentTypes = ["m.sticker", "m.image", "m.file", "m.video", "m.audio"]
if (mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype)) {
@@ -302,7 +305,7 @@ export default class HTMLExporter extends Exporter {
this.zip.file(filePath, blob);
} else eventTile = await this.getEventTile(mxEv, joined);
- return renderToStaticMarkup(eventTile);
+ return eventTile;
}
protected async createHTML(events: MatrixEvent[]) {
From 716e2effbc0a8948c0b6a3303a286f1a5d2f93b4 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 9 Jun 2021 16:12:57 +0530
Subject: [PATCH 054/313] Enable proper i18n for date utils
---
src/DateUtils.ts | 21 ++++++---------
src/i18n/strings/en_EN.json | 4 +--
src/utils/exportUtils/HtmlExport.tsx | 38 ++++++++++++++++++++++------
3 files changed, 40 insertions(+), 23 deletions(-)
diff --git a/src/DateUtils.ts b/src/DateUtils.ts
index 481afb312b..1eaa331f52 100644
--- a/src/DateUtils.ts
+++ b/src/DateUtils.ts
@@ -138,19 +138,14 @@ export function wantsDateSeparator(prevEventDate: Date, nextEventDate: Date): bo
}
export function formatFullDateNoDay(date: Date) {
- return (
- date.getFullYear() +
- "-" +
- pad(date.getMonth() + 1) +
- "-" +
- pad(date.getDate()) +
- _t(" at ") +
- pad(date.getHours()) +
- "." +
- pad(date.getMinutes()) +
- "." +
- pad(date.getSeconds())
- );
+ return _t("%(year)s-%(month)s-%(day)s at %(hours)s.%(minutes)s.%(seconds)s", {
+ year: date.getFullYear(),
+ month: pad(date.getMonth() + 1),
+ day: pad(date.getDate()),
+ hours: pad(date.getHours()),
+ minutes: pad(date.getMinutes()),
+ seconds: pad(date.getSeconds()),
+ });
}
export function formatFullDateNoDayNoTime(date: Date) {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 1c5fdcb848..c52ee00ae7 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -105,7 +105,7 @@
"%(weekDayName)s, %(monthName)s %(day)s %(time)s": "%(weekDayName)s, %(monthName)s %(day)s %(time)s",
"%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s",
"%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s",
- " at ": " at ",
+ "%(year)s-%(month)s-%(day)s at %(hours)s.%(minutes)s.%(seconds)s": "%(year)s-%(month)s-%(day)s at %(hours)s.%(minutes)s.%(seconds)s",
"Who would you like to add to this community?": "Who would you like to add to this community?",
"Warning: any person you add to a community will be publicly visible to anyone who knows the community ID": "Warning: any person you add to a community will be publicly visible to anyone who knows the community ID",
"Invite new community members": "Invite new community members",
@@ -728,7 +728,7 @@
"Share your public space": "Share your public space",
"Unknown App": "Unknown App",
"%(creatorName)s created this room.": "%(creatorName)s created this room.",
- "This is the start of export of <b>%(roomName)s</b>.\n Exported by %(exporterDetails)s at %(exportDate)s. ": "This is the start of export of <b>%(roomName)s</b>.\n Exported by %(exporterDetails)s at %(exportDate)s. ",
+ "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.": "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.",
"Topic: %(topic)s": "Topic: %(topic)s",
"Help us improve %(brand)s": "Help us improve %(brand)s",
"Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.": "Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.",
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 8fb30b08a3..3472d99507 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -82,14 +82,36 @@ export default class HTMLExporter extends Exporter {
creatorName,
});
- const exportedText = _t(`This is the start of export of <b>%(roomName)s</b>.
- Exported by %(exporterDetails)s at %(exportDate)s. `, {
- exportDate,
- roomName: this.room.name,
- exporterDetails: `<a href="https://matrix.to/#/${exporter}" target="_blank" rel="noopener noreferrer">
- ${exporterName ? `<b>${ exporterName }</b>(${ exporter })` : `<b>${ exporter }</b>`}
- </a>`,
- });
+ const exportedText = renderToStaticMarkup(
+ <p>
+ {_t(
+ "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.",
+ {
+ exportDate,
+ },
+ {
+ roomName: () => <b>{this.room.name}</b>,
+ exporterDetails: () => (
+ <a
+ href={`https://matrix.to/#/${exporter}`}
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ {exporterName ? (
+ <>
+ <b>{exporterName}</b>
+ {exporter}
+ </>
+ ) : (
+ <b>{exporter}</b>
+ )}
+ </a>
+ ),
+ },
+ )}
+ </p>,
+ );
+
const topicText = topic ? _t("Topic: %(topic)s", { topic }) : "";
From 9204ed30ce783d82f54c60384f38fec1ecc2625a Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 9 Jun 2021 16:40:52 +0530
Subject: [PATCH 055/313] Switch to localeDateString for i18n
---
src/DateUtils.ts | 10 +++-------
src/i18n/strings/en_EN.json | 2 +-
2 files changed, 4 insertions(+), 8 deletions(-)
diff --git a/src/DateUtils.ts b/src/DateUtils.ts
index 1eaa331f52..758971e58d 100644
--- a/src/DateUtils.ts
+++ b/src/DateUtils.ts
@@ -138,13 +138,9 @@ export function wantsDateSeparator(prevEventDate: Date, nextEventDate: Date): bo
}
export function formatFullDateNoDay(date: Date) {
- return _t("%(year)s-%(month)s-%(day)s at %(hours)s.%(minutes)s.%(seconds)s", {
- year: date.getFullYear(),
- month: pad(date.getMonth() + 1),
- day: pad(date.getDate()),
- hours: pad(date.getHours()),
- minutes: pad(date.getMinutes()),
- seconds: pad(date.getSeconds()),
+ return _t("%(date)s at %(time)s", {
+ date: date.toLocaleDateString().replace(/\//g, '-'),
+ time: date.toLocaleTimeString().replace(/:/g, '-'),
});
}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index c52ee00ae7..fc0b3c6c06 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -105,7 +105,7 @@
"%(weekDayName)s, %(monthName)s %(day)s %(time)s": "%(weekDayName)s, %(monthName)s %(day)s %(time)s",
"%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s",
"%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s",
- "%(year)s-%(month)s-%(day)s at %(hours)s.%(minutes)s.%(seconds)s": "%(year)s-%(month)s-%(day)s at %(hours)s.%(minutes)s.%(seconds)s",
+ "%(date)s at %(time)s": "%(date)s at %(time)s",
"Who would you like to add to this community?": "Who would you like to add to this community?",
"Warning: any person you add to a community will be publicly visible to anyone who knows the community ID": "Warning: any person you add to a community will be publicly visible to anyone who knows the community ID",
"Invite new community members": "Invite new community members",
From 80e5d4cd77686af850e69a3fce2a5e19bdb59d63 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 10 Jun 2021 11:53:41 +0530
Subject: [PATCH 056/313] Increase eventsPerCrawl for larger chunks and rely on
chunk's length for crawled events size
---
src/utils/exportUtils/Exporter.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 270669374b..36494e13ef 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -56,12 +56,12 @@ export default abstract class Exporter {
let events: MatrixEvent[] = [];
while (limit) {
- const eventsPerCrawl = Math.min(limit, 100);
+ const eventsPerCrawl = Math.min(limit, 1000);
const res: any = await client.createMessagesRequest(this.room.roomId, prevToken, eventsPerCrawl, "b");
if (res.chunk.length === 0) break;
- limit -= eventsPerCrawl;
+ limit -= res.chunk.length;
const matrixEvents: MatrixEvent[] = res.chunk.map(eventMapper);
From a1b614f2b38ad864fe26f828cc930901c9fd6b9c Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 11 Jun 2021 12:04:05 +0530
Subject: [PATCH 057/313] Implement exporting from a specific start date and
fix few bugs
---
src/components/views/messages/MImageBody.js | 2 +-
src/components/views/rooms/RoomHeader.js | 7 ++-
src/utils/exportUtils/Exporter.ts | 60 ++++++++++-----------
src/utils/exportUtils/HtmlExport.tsx | 13 ++---
src/utils/exportUtils/exportCSS.ts | 2 +-
src/utils/exportUtils/exportUtils.ts | 9 +++-
6 files changed, 52 insertions(+), 41 deletions(-)
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index b8220d8a5c..d854baec46 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -432,7 +432,7 @@ export default class MImageBody extends React.Component {
// Overidden by MStickerBody
wrapImage(contentUrl, children) {
- return <a href={contentUrl} onClick={this.onClick}>
+ return <a href={contentUrl} target={this.props.forExport ? "__blank" : undefined} onClick={this.onClick}>
{children}
</a>;
}
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index a0055e1b5c..3b507763fa 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -82,7 +82,12 @@ export default class RoomHeader extends React.Component {
_exportConversationalHistory = async () => {
- await exportConversationalHistory(this.props.room, exportFormats.HTML, exportTypes.LAST_N_MESSAGES, 100);
+ await exportConversationalHistory(
+ this.props.room,
+ exportFormats.HTML,
+ exportTypes.START_DATE,
+ { startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)) },
+ );
}
render() {
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 36494e13ef..5b0d2df188 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -1,37 +1,15 @@
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClientPeg } from "../../MatrixClientPeg";
-import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
-import { arrayFastClone } from "../arrays";
import { exportTypes } from "./exportUtils";
+import { exportOptions } from "./exportUtils";
export default abstract class Exporter {
- protected constructor(protected room: Room, protected exportType: exportTypes, protected numberOfEvents?: number) {}
-
- protected getTimelineConversation = (): MatrixEvent[] => {
- if (!this.room) return;
-
- const cli = MatrixClientPeg.get();
-
- const timelineSet = this.room.getUnfilteredTimelineSet();
-
- const timelineWindow = new TimelineWindow(
- cli, timelineSet,
- {windowLimit: Number.MAX_VALUE});
-
- timelineWindow.load(null, 30);
-
- const events: MatrixEvent[] = timelineWindow.getEvents();
-
- // Clone and reverse the events so that we preserve the order
- arrayFastClone(events)
- .reverse()
- .forEach(async (event) => {
- await cli.decryptEventIfNeeded(event);
- });
-
- return events;
- };
+ protected constructor(
+ protected room: Room,
+ protected exportType: exportTypes,
+ protected exportOptions?: exportOptions,
+ ) {}
protected setEventMetadata = (event: MatrixEvent) => {
const client = MatrixClientPeg.get();
@@ -47,12 +25,27 @@ export default abstract class Exporter {
return event;
}
+ protected getLimit = () => {
+ let limit: number;
+ switch (this.exportType) {
+ case exportTypes.LAST_N_MESSAGES:
+ limit = this.exportOptions.numberOfMessages;
+ break;
+ case exportTypes.TIMELINE:
+ limit = 40;
+ break;
+ default:
+ limit = Number.MAX_VALUE;
+ }
+ return limit;
+ }
+
protected getRequiredEvents = async () : Promise<MatrixEvent[]> => {
const client = MatrixClientPeg.get();
const eventMapper = client.getEventMapper();
let prevToken: string|null = null;
- let limit = this.numberOfEvents || Number.MAX_VALUE;
+ let limit = this.getLimit();
let events: MatrixEvent[] = [];
while (limit) {
@@ -65,7 +58,14 @@ export default abstract class Exporter {
const matrixEvents: MatrixEvent[] = res.chunk.map(eventMapper);
- matrixEvents.forEach(mxEv => events.push(mxEv));
+ for (const mxEv of matrixEvents) {
+ if (this.exportOptions.startDate && mxEv.getTs() < this.exportOptions.startDate) {
+ // Once the last message received is older than the start date, we break out of both the loops
+ limit = 0;
+ break;
+ }
+ events.push(mxEv);
+ }
prevToken = res.end;
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 3472d99507..ded4e82b84 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -23,6 +23,7 @@ import exportCSS from "./exportCSS";
import exportJS from "./exportJS";
import exportIcons from "./exportIcons";
import { exportTypes } from "./exportUtils";
+import { exportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
import { MatrixClient } from "matrix-js-sdk";
@@ -32,8 +33,8 @@ export default class HTMLExporter extends Exporter {
protected permalinkCreator: RoomPermalinkCreator;
protected matrixClient: MatrixClient;
- constructor(room: Room, exportType: exportTypes, numberOfEvents?: number) {
- super(room, exportType, numberOfEvents);
+ constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
+ super(room, exportType, exportOptions);
this.zip = new JSZip();
this.avatars = new Map<string, boolean>();
this.matrixClient = MatrixClientPeg.get();
@@ -282,7 +283,7 @@ export default class HTMLExporter extends Exporter {
protected async getEventTile(mxEv: MatrixEvent, continuation: boolean, filePath?: string) {
const hasAvatar = this.hasAvatar(mxEv);
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
- const eventTile = <li className="mx_Export_EventWrapper" id={mxEv.getId()}>
+ const eventTile = <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
<MatrixClientContext.Provider value = {this.matrixClient}>
<EventTile
mxEvent={mxEv}
@@ -307,11 +308,11 @@ export default class HTMLExporter extends Exporter {
showReadReceipts={false}
/>
</MatrixClientContext.Provider>
- </li>
+ </div>
let eventTileMarkup = renderToStaticMarkup(eventTile);
- if (filePath) eventTileMarkup = eventTileMarkup.replace(/(src=|href=)"forExport"/, `$1"${filePath}"`);
+ if (filePath) eventTileMarkup = eventTileMarkup.replace(/(src=|href=)"forExport"/g, `$1"${filePath}"`);
if (hasAvatar) {
- eventTileMarkup = eventTileMarkup.replace(/src="AvatarForExport"/, `src="users/${mxEv.sender.userId}"`);
+ eventTileMarkup = eventTileMarkup.replace(/src="AvatarForExport"/g, `src="users/${mxEv.sender.userId}"`);
}
return eventTileMarkup;
}
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 7813c1651a..cbba088361 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -19537,7 +19537,7 @@ a.mx_reply_anchor:hover{
}
-li.mx_Export_EventWrapper:target {
+.mx_Export_EventWrapper:target {
background: white;
animation: mx_event_highlight_animation 2s linear;
}
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 531b5d98e4..ed285b47bc 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -14,15 +14,20 @@ export enum exportTypes {
LAST_N_MESSAGES = "LAST_N_MESSAGES",
}
+export interface exportOptions {
+ startDate?: number;
+ numberOfMessages?: number;
+}
+
const exportConversationalHistory = async (
room: Room,
format: string,
exportType: exportTypes,
- exportTypeMetadata?: number,
+ exportOptions?: exportOptions,
) => {
switch (format) {
case exportFormats.HTML:
- await new HTMLExporter(room, exportType, exportTypeMetadata).export();
+ await new HTMLExporter(room, exportType, exportOptions).export();
break;
case exportFormats.JSON:
break;
From ab653d99520692ee8d8fca3e0d6635fa336ae46f Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 14 Jun 2021 11:08:17 +0530
Subject: [PATCH 058/313] Handle requests with no attachments
---
src/components/views/rooms/RoomHeader.js | 2 +-
src/utils/exportUtils/HtmlExport.tsx | 40 +++++++++++++++++-------
src/utils/exportUtils/exportUtils.ts | 1 +
3 files changed, 31 insertions(+), 12 deletions(-)
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 3b507763fa..3372785390 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -86,7 +86,7 @@ export default class RoomHeader extends React.Component {
this.props.room,
exportFormats.HTML,
exportTypes.START_DATE,
- { startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)) },
+ { startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)), attachmentsIncluded: false },
);
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index ded4e82b84..11b1fa80dc 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -72,10 +72,9 @@ export default class HTMLExporter extends Exporter {
protected async wrapHTML(content: string) {
const roomAvatar = await this.getRoomAvatar();
const exportDate = formatFullDateNoDayNoTime(new Date());
- const cli = MatrixClientPeg.get();
const creator = this.room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
const creatorName = this.room?.getMember(creator)?.rawDisplayName || creator;
- const exporter = cli.getUserId();
+ const exporter = this.matrixClient.getUserId();
const exporterName = this.room?.getMember(exporter)?.rawDisplayName;
const topic = this.room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic
|| this.room.topic || "";
@@ -113,10 +112,8 @@ export default class HTMLExporter extends Exporter {
</p>,
);
-
const topicText = topic ? _t("Topic: %(topic)s", { topic }) : "";
-
return `
<!DOCTYPE html>
<html lang="en">
@@ -279,10 +276,10 @@ export default class HTMLExporter extends Exporter {
return fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
}
-
protected async getEventTile(mxEv: MatrixEvent, continuation: boolean, filePath?: string) {
const hasAvatar = this.hasAvatar(mxEv);
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
+
const eventTile = <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
<MatrixClientContext.Provider value = {this.matrixClient}>
<EventTile
@@ -317,15 +314,36 @@ export default class HTMLExporter extends Exporter {
return eventTileMarkup;
}
+ protected isAttachment(mxEv: MatrixEvent) {
+ const attachmentTypes = ["m.sticker", "m.image", "m.file", "m.video", "m.audio"];
+ return mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype);
+ }
+
protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
let eventTile: string;
- const attachmentTypes = ["m.sticker", "m.image", "m.file", "m.video", "m.audio"]
- if (mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype)) {
- const blob = await this.getMediaBlob(mxEv);
- const filePath = this.getFilePath(mxEv);
- eventTile = await this.getEventTile(mxEv, joined, filePath);
- this.zip.file(filePath, blob);
+ if (this.isAttachment(mxEv)) {
+ if (this.exportOptions.attachmentsIncluded) {
+ const blob = await this.getMediaBlob(mxEv);
+ const filePath = this.getFilePath(mxEv);
+ eventTile = await this.getEventTile(mxEv, joined, filePath);
+ this.zip.file(filePath, blob);
+ } else {
+ const modifiedContent = {
+ msgtype: "m.text",
+ body: "**Media omitted**",
+ format: "org.matrix.custom.html",
+ formatted_body: "<strong>Media omitted</strong>",
+ }
+ if (mxEv.isEncrypted()) {
+ mxEv._clearEvent.content = modifiedContent;
+ mxEv._clearEvent.type = "m.room.message";
+ } else {
+ mxEv.event.content = modifiedContent;
+ mxEv.event.type = "m.room.message";
+ }
+ eventTile = await this.getEventTile(mxEv, joined);
+ }
} else eventTile = await this.getEventTile(mxEv, joined);
return eventTile;
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index ed285b47bc..407cef3077 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -17,6 +17,7 @@ export enum exportTypes {
export interface exportOptions {
startDate?: number;
numberOfMessages?: number;
+ attachmentsIncluded: boolean;
}
const exportConversationalHistory = async (
From 30c7017fadb3909648d22500412e623de850d71c Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 14 Jun 2021 18:06:40 +0530
Subject: [PATCH 059/313] Move generic functions into base class
---
src/utils/exportUtils/Exporter.ts | 57 ++++++++++++++++++++++++++++
src/utils/exportUtils/HtmlExport.tsx | 57 +---------------------------
2 files changed, 58 insertions(+), 56 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 5b0d2df188..8aeda1f3c5 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -3,6 +3,9 @@ import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClientPeg } from "../../MatrixClientPeg";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
+import { decryptFile } from "../DecryptFile";
+import { mediaFromContent } from "../../customisations/Media";
+import { formatFullDateNoDay } from "../../DateUtils";
export default abstract class Exporter {
protected constructor(
@@ -89,5 +92,59 @@ export default abstract class Exporter {
return events;
}
+ protected async getMediaBlob(event: MatrixEvent) {
+ let blob: Blob;
+ try {
+ const isEncrypted = event.isEncrypted();
+ const content = event.getContent();
+ const shouldDecrypt = isEncrypted && !content.hasOwnProperty("org.matrix.msc1767.file")
+ && event.getType() !== "m.sticker";
+ if (shouldDecrypt) {
+ blob = await decryptFile(content.file);
+ } else {
+ const media = mediaFromContent(event.getContent());
+ const image = await fetch(media.srcHttp);
+ blob = await image.blob();
+ }
+ } catch (err) {
+ console.log("Error decrypting media");
+ }
+ return blob;
+ }
+
+ protected splitFileName(file: string) {
+ const lastDot = file.lastIndexOf('.');
+ if (lastDot === -1) return [file, ""];
+ const fileName = file.slice(0, lastDot);
+ const ext = file.slice(lastDot + 1);
+ return [fileName, '.' + ext];
+ }
+
+ protected getFilePath(event: MatrixEvent) {
+ const mediaType = event.getContent().msgtype;
+ let fileDirectory: string;
+ switch (mediaType) {
+ case "m.image":
+ fileDirectory = "images";
+ break;
+ case "m.video":
+ fileDirectory = "videos";
+ break;
+ case "m.audio":
+ fileDirectory = "audio";
+ break;
+ default:
+ fileDirectory = event.getType() === "m.sticker" ? "stickers" : "files";
+ }
+ const fileDate = formatFullDateNoDay(new Date(event.getTs()));
+ const [fileName, fileExt] = this.splitFileName(event.getContent().body);
+ return fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
+ }
+
+ protected isAttachment(mxEv: MatrixEvent) {
+ const attachmentTypes = ["m.sticker", "m.image", "m.file", "m.video", "m.audio"];
+ return mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype);
+ }
+
abstract export(): Promise<Blob>;
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 11b1fa80dc..eed1a818e4 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -2,8 +2,7 @@ import React from "react"
import streamSaver from "streamsaver";
import JSZip from "jszip";
import Exporter from "./Exporter";
-import { decryptFile } from "../DecryptFile";
-import { mediaFromContent, mediaFromMxc } from "../../customisations/Media";
+import { mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { renderToStaticMarkup } from 'react-dom/server'
@@ -216,26 +215,6 @@ export default class HTMLExporter extends Exporter {
}
}
- protected async getMediaBlob(event: MatrixEvent) {
- let blob: Blob;
- try {
- const isEncrypted = event.isEncrypted();
- const content = event.getContent();
- const shouldDecrypt = isEncrypted && !content.hasOwnProperty("org.matrix.msc1767.file")
- && event.getType() !== "m.sticker";
- if (shouldDecrypt) {
- blob = await decryptFile(content.file);
- } else {
- const media = mediaFromContent(event.getContent());
- const image = await fetch(media.srcHttp);
- blob = await image.blob();
- }
- } catch (err) {
- console.log("Error decrypting media");
- }
- return blob;
- }
-
protected getDateSeparator(event: MatrixEvent) {
const ts = event.getTs();
const dateSeparator = <li key={ts}><DateSeparator forExport={true} key={ts} ts={ts} /></li>;
@@ -247,35 +226,6 @@ export default class HTMLExporter extends Exporter {
return wantsDateSeparator(prevEvent.getDate(), event.getDate());
}
- protected splitFileName(file: string) {
- const lastDot = file.lastIndexOf('.');
- if (lastDot === -1) return [file, ""];
- const fileName = file.slice(0, lastDot);
- const ext = file.slice(lastDot + 1);
- return [fileName, '.' + ext];
- }
-
- protected getFilePath(event: MatrixEvent) {
- const mediaType = event.getContent().msgtype;
- let fileDirectory: string;
- switch (mediaType) {
- case "m.image":
- fileDirectory = "images";
- break;
- case "m.video":
- fileDirectory = "videos";
- break;
- case "m.audio":
- fileDirectory = "audio";
- break;
- default:
- fileDirectory = event.getType() === "m.sticker" ? "stickers" : "files";
- }
- const fileDate = formatFullDateNoDay(new Date(event.getTs()));
- const [fileName, fileExt] = this.splitFileName(event.getContent().body);
- return fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
- }
-
protected async getEventTile(mxEv: MatrixEvent, continuation: boolean, filePath?: string) {
const hasAvatar = this.hasAvatar(mxEv);
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
@@ -314,11 +264,6 @@ export default class HTMLExporter extends Exporter {
return eventTileMarkup;
}
- protected isAttachment(mxEv: MatrixEvent) {
- const attachmentTypes = ["m.sticker", "m.image", "m.file", "m.video", "m.audio"];
- return mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype);
- }
-
protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
let eventTile: string;
From bd75849e73076aff42b8af38f866df5f2907cefa Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 15 Jun 2021 16:41:31 +0530
Subject: [PATCH 060/313] Enable option to set maximum file size
---
src/components/views/rooms/RoomHeader.js | 6 +++++-
src/i18n/strings/en_EN.json | 2 ++
src/utils/exportUtils/HtmlExport.tsx | 14 ++++++++++++--
src/utils/exportUtils/exportUtils.ts | 1 +
4 files changed, 20 insertions(+), 3 deletions(-)
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 3372785390..f0f9b4d646 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -86,7 +86,11 @@ export default class RoomHeader extends React.Component {
this.props.room,
exportFormats.HTML,
exportTypes.START_DATE,
- { startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)), attachmentsIncluded: false },
+ {
+ startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
+ attachmentsIncluded: true,
+ maxSize: 3 * 1024 * 1024, // 3 MB
+ },
);
}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 8640735557..8748c5ba80 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -727,6 +727,8 @@
"Invite to %(spaceName)s": "Invite to %(spaceName)s",
"Share your public space": "Share your public space",
"Unknown App": "Unknown App",
+ "Media omitted": "Media omitted",
+ "Media omitted - file size limit exceeded": "Media omitted - file size limit exceeded",
"%(creatorName)s created this room.": "%(creatorName)s created this room.",
"This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.": "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.",
"Topic: %(topic)s": "Topic: %(topic)s",
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index eed1a818e4..c1b2f4ea70 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -31,6 +31,8 @@ export default class HTMLExporter extends Exporter {
protected avatars: Map<string, boolean>;
protected permalinkCreator: RoomPermalinkCreator;
protected matrixClient: MatrixClient;
+ protected totalSize: number;
+ protected mediaOmitText: string;
constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
super(room, exportType, exportOptions);
@@ -38,6 +40,10 @@ export default class HTMLExporter extends Exporter {
this.avatars = new Map<string, boolean>();
this.matrixClient = MatrixClientPeg.get();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
+ this.totalSize = 0;
+ this.mediaOmitText = !this.exportOptions.attachmentsIncluded
+ ? _t("Media omitted")
+ : _t("Media omitted - file size limit exceeded");
window.addEventListener("beforeunload", this.onBeforeUnload)
}
@@ -270,15 +276,19 @@ export default class HTMLExporter extends Exporter {
if (this.isAttachment(mxEv)) {
if (this.exportOptions.attachmentsIncluded) {
const blob = await this.getMediaBlob(mxEv);
+ this.totalSize += blob.size;
const filePath = this.getFilePath(mxEv);
eventTile = await this.getEventTile(mxEv, joined, filePath);
+ if (this.totalSize > this.exportOptions.maxSize - 1024 * 1024) {
+ this.exportOptions.attachmentsIncluded = false;
+ }
this.zip.file(filePath, blob);
} else {
const modifiedContent = {
msgtype: "m.text",
- body: "**Media omitted**",
+ body: `**${this.mediaOmitText}**`,
format: "org.matrix.custom.html",
- formatted_body: "<strong>Media omitted</strong>",
+ formatted_body: `<strong>${this.mediaOmitText}</strong>`,
}
if (mxEv.isEncrypted()) {
mxEv._clearEvent.content = modifiedContent;
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 407cef3077..77fb23509e 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -18,6 +18,7 @@ export interface exportOptions {
startDate?: number;
numberOfMessages?: number;
attachmentsIncluded: boolean;
+ maxSize: number;
}
const exportConversationalHistory = async (
From 9e6b8ff9f5b0d2d7f6be4fd2ab1103ab0c934718 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 17 Jun 2021 10:46:08 +0530
Subject: [PATCH 061/313] Start implementation of plain text export
---
src/TextForEvent.ts | 4 +-
src/components/views/rooms/RoomHeader.js | 2 +-
src/utils/exportUtils/Exporter.ts | 2 +-
src/utils/exportUtils/PlainTextExport.ts | 68 ++++++++++++++++++++++++
src/utils/exportUtils/exportUtils.ts | 2 +
5 files changed, 74 insertions(+), 4 deletions(-)
create mode 100644 src/utils/exportUtils/PlainTextExport.ts
diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts
index 649c53664e..df2047a645 100644
--- a/src/TextForEvent.ts
+++ b/src/TextForEvent.ts
@@ -238,12 +238,12 @@ function textForServerACLEvent(ev): () => string | null {
function textForMessageEvent(ev): () => string | null {
return () => {
const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
- let message = senderDisplayName + ': ' + ev.getContent().body;
+ let message = ev.getContent().body;
if (ev.getContent().msgtype === "m.emote") {
message = "* " + senderDisplayName + " " + message;
} else if (ev.getContent().msgtype === "m.image") {
message = _t('%(senderDisplayName)s sent an image.', {senderDisplayName});
- }
+ } else message = senderDisplayName + ': ' + message;
return message;
};
}
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index f0f9b4d646..1a21e503f3 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -84,7 +84,7 @@ export default class RoomHeader extends React.Component {
_exportConversationalHistory = async () => {
await exportConversationalHistory(
this.props.room,
- exportFormats.HTML,
+ exportFormats.LOGS,
exportTypes.START_DATE,
{
startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 8aeda1f3c5..44bb7b6a88 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -146,5 +146,5 @@ export default abstract class Exporter {
return mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype);
}
- abstract export(): Promise<Blob>;
+ abstract export(): Promise<any>;
}
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
new file mode 100644
index 0000000000..6d29a4bb6d
--- /dev/null
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -0,0 +1,68 @@
+import streamSaver from "streamsaver";
+import Exporter from "./Exporter";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { formatFullDateNoDay } from "../../DateUtils";
+import { _t } from "../../languageHandler";
+import * as ponyfill from "web-streams-polyfill/ponyfill"
+import { haveTileForEvent } from "../../components/views/rooms/EventTile";
+import { exportTypes } from "./exportUtils";
+import { exportOptions } from "./exportUtils";
+import { textForEvent } from "../../TextForEvent";
+
+export default class PlainTextExporter extends Exporter {
+ protected totalSize: number;
+ protected mediaOmitText: string;
+
+ constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
+ super(room, exportType, exportOptions);
+ this.totalSize = 0;
+ this.mediaOmitText = !this.exportOptions.attachmentsIncluded
+ ? _t("Media omitted")
+ : _t("Media omitted - file size limit exceeded");
+ window.addEventListener("beforeunload", this.onBeforeUnload)
+ }
+
+ protected onBeforeUnload = (e: BeforeUnloadEvent) => {
+ e.preventDefault();
+ return e.returnValue = "Are you sure you want to exit during this export?";
+ }
+
+ protected async createOutput(events: MatrixEvent[]) {
+ let content = "";
+ for (const event of events) {
+ if (!haveTileForEvent(event)) continue;
+ content += `${new Date(event.getTs()).toLocaleString()} - ${textForEvent(event)}\n`;
+ }
+ return content;
+ }
+
+ public async export() {
+ console.info("Starting export process...");
+ console.info("Fetching events...");
+ const fetchStart = performance.now();
+ const res = await this.getRequiredEvents();
+ const fetchEnd = performance.now();
+
+ console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000} s`);
+ console.info("Creating Output...");
+
+ const text = await this.createOutput(res);
+
+ const filename = `matrix-export-${formatFullDateNoDay(new Date())}.txt`;
+
+ console.info("Writing to a file...");
+ //Support for firefox browser
+ streamSaver.WritableStream = ponyfill.WritableStream
+ //Create a writable stream to the directory
+ const fileStream = streamSaver.createWriteStream(filename);
+ const writer = fileStream.getWriter();
+ const data = new TextEncoder().encode(text);
+ await writer.write(data);
+ await writer.close();
+ const exportEnd = performance.now();
+ console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ window.removeEventListener("beforeunload", this.onBeforeUnload);
+ }
+}
+
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 77fb23509e..22457f926b 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,5 +1,6 @@
import { Room } from "matrix-js-sdk/src/models/room";
import HTMLExporter from "./HtmlExport";
+import PlainTextExporter from "./PlainTextExport";
export enum exportFormats {
HTML = "HTML",
@@ -34,6 +35,7 @@ const exportConversationalHistory = async (
case exportFormats.JSON:
break;
case exportFormats.LOGS:
+ await new PlainTextExporter(room, exportType, exportOptions).export();
break;
}
};
From 44f458d5770c03c507299a400775296cc2f5eebb Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 21 Jun 2021 11:43:47 +0530
Subject: [PATCH 062/313] Modify local avatar's url to not contain colons
---
src/components/views/avatars/MemberAvatar.tsx | 2 +-
src/utils/exportUtils/HtmlExport.tsx | 11 +++++++----
2 files changed, 8 insertions(+), 5 deletions(-)
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 48bf0d3423..7488616fb6 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -68,7 +68,7 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
private static getState(props: IProps): IState {
if (props.member?.name) {
let imageUrl = null;
- if (props.forExport && props.member.getMxcAvatarUrl()) imageUrl = "AvatarForExport";
+ if (props.forExport && props.member.getMxcAvatarUrl()) imageUrl = "avatarForExport";
else if (props.member.getMxcAvatarUrl()) {
imageUrl = mediaFromMxc(props.member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
props.width,
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index c1b2f4ea70..b5df531721 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -217,7 +217,7 @@ export default class HTMLExporter extends Exporter {
this.avatars.set(member.userId, true);
const image = await fetch(avatarUrl);
const blob = await image.blob();
- this.zip.file(`users/${member.userId}`, blob);
+ this.zip.file(`users/${member.userId.replace(/:/g, '-')}`, blob);
}
}
@@ -265,7 +265,10 @@ export default class HTMLExporter extends Exporter {
let eventTileMarkup = renderToStaticMarkup(eventTile);
if (filePath) eventTileMarkup = eventTileMarkup.replace(/(src=|href=)"forExport"/g, `$1"${filePath}"`);
if (hasAvatar) {
- eventTileMarkup = eventTileMarkup.replace(/src="AvatarForExport"/g, `src="users/${mxEv.sender.userId}"`);
+ eventTileMarkup = eventTileMarkup.replace(
+ /src="avatarForExport"/g,
+ `src="users/${mxEv.sender.userId.replace(/:/g, "-")}"`,
+ );
}
return eventTileMarkup;
}
@@ -291,8 +294,8 @@ export default class HTMLExporter extends Exporter {
formatted_body: `<strong>${this.mediaOmitText}</strong>`,
}
if (mxEv.isEncrypted()) {
- mxEv._clearEvent.content = modifiedContent;
- mxEv._clearEvent.type = "m.room.message";
+ mxEv.clearEvent.content = modifiedContent;
+ mxEv.clearEvent.type = "m.room.message";
} else {
mxEv.event.content = modifiedContent;
mxEv.event.type = "m.room.message";
From a0e0453635926cff3c9e63a5c3b5f5fdff52f6d5 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 22 Jun 2021 09:27:49 +0530
Subject: [PATCH 063/313] Fix type lint
---
src/utils/exportUtils/HtmlExport.tsx | 25 +++++++++++++------------
1 file changed, 13 insertions(+), 12 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index c1b2f4ea70..4456fd3737 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -217,7 +217,7 @@ export default class HTMLExporter extends Exporter {
this.avatars.set(member.userId, true);
const image = await fetch(avatarUrl);
const blob = await image.blob();
- this.zip.file(`users/${member.userId}`, blob);
+ this.zip.file(`users/${member.userId.replace(/:/g, '-')}`, blob);
}
}
@@ -265,7 +265,10 @@ export default class HTMLExporter extends Exporter {
let eventTileMarkup = renderToStaticMarkup(eventTile);
if (filePath) eventTileMarkup = eventTileMarkup.replace(/(src=|href=)"forExport"/g, `$1"${filePath}"`);
if (hasAvatar) {
- eventTileMarkup = eventTileMarkup.replace(/src="AvatarForExport"/g, `src="users/${mxEv.sender.userId}"`);
+ eventTileMarkup = eventTileMarkup.replace(
+ /src="avatarForExport"/g,
+ `src="users/${mxEv.sender.userId.replace(/:/g, "-")}"`,
+ );
}
return eventTileMarkup;
}
@@ -286,18 +289,16 @@ export default class HTMLExporter extends Exporter {
} else {
const modifiedContent = {
msgtype: "m.text",
- body: `**${this.mediaOmitText}**`,
+ body: `*${this.mediaOmitText}*`,
format: "org.matrix.custom.html",
- formatted_body: `<strong>${this.mediaOmitText}</strong>`,
+ formatted_body: `<em>${this.mediaOmitText}</em>`,
}
- if (mxEv.isEncrypted()) {
- mxEv._clearEvent.content = modifiedContent;
- mxEv._clearEvent.type = "m.room.message";
- } else {
- mxEv.event.content = modifiedContent;
- mxEv.event.type = "m.room.message";
- }
- eventTile = await this.getEventTile(mxEv, joined);
+ const modifiedEvent = new MatrixEvent();
+ modifiedEvent.event = mxEv.event;
+ modifiedEvent.sender = mxEv.sender;
+ modifiedEvent.event.type = "m.room.message";
+ modifiedEvent.event.content = modifiedContent;
+ eventTile = await this.getEventTile(modifiedEvent, joined);
}
} else eventTile = await this.getEventTile(mxEv, joined);
From bf189204f24110b68d058797d5303c32e08b47d3 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 22 Jun 2021 10:49:14 +0530
Subject: [PATCH 064/313] Implement IRC bridge style reply formatting
---
src/utils/exportUtils/Exporter.ts | 20 +++++++-----
src/utils/exportUtils/PlainTextExport.ts | 40 +++++++++++++++++++++++-
2 files changed, 51 insertions(+), 9 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 44bb7b6a88..177735f8d9 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -1,11 +1,10 @@
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { Room } from "matrix-js-sdk/src/models/room";
-import { MatrixClientPeg } from "../../MatrixClientPeg";
-import { exportTypes } from "./exportUtils";
-import { exportOptions } from "./exportUtils";
-import { decryptFile } from "../DecryptFile";
-import { mediaFromContent } from "../../customisations/Media";
-import { formatFullDateNoDay } from "../../DateUtils";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {Room} from "matrix-js-sdk/src/models/room";
+import {MatrixClientPeg} from "../../MatrixClientPeg";
+import {exportOptions, exportTypes} from "./exportUtils";
+import {decryptFile} from "../DecryptFile";
+import {mediaFromContent} from "../../customisations/Media";
+import {formatFullDateNoDay} from "../../DateUtils";
export default abstract class Exporter {
protected constructor(
@@ -141,6 +140,11 @@ export default abstract class Exporter {
return fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
}
+ protected isReply(mxEvent) {
+ const relatesTo = mxEvent.getContent()["m.relates_to"];
+ return !!(relatesTo && relatesTo["m.in_reply_to"]);
+ }
+
protected isAttachment(mxEv: MatrixEvent) {
const attachmentTypes = ["m.sticker", "m.image", "m.file", "m.video", "m.audio"];
return mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype);
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 6d29a4bb6d..72ab0f122f 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -28,11 +28,49 @@ export default class PlainTextExporter extends Exporter {
return e.returnValue = "Are you sure you want to exit during this export?";
}
+ protected textForReplyEvent = (ev : MatrixEvent) => {
+ const REPLY_REGEX = /> <(.*?)>(.*?)\n\n(.*)/;
+ const REPLY_SOURCE_MAX_LENGTH = 32;
+ const content = ev.getContent();
+
+ const match = REPLY_REGEX.exec(content.body);
+
+ let rplSource: string;
+ const rplName = match[1];
+ const rplText = match[3];
+ const sourceMatch = REPLY_REGEX.exec(content.body);
+ rplSource = sourceMatch && sourceMatch.length === 4 ? sourceMatch[3] : content.body;
+ rplSource = rplSource.substring(0, REPLY_SOURCE_MAX_LENGTH);
+ // Get the first non-blank line from the source.
+ const lines = rplSource.split('\n').filter((line) => !/^\s*$/.test(line))
+ if (lines.length > 0) {
+ // Cut to a maximum length.
+ rplSource = lines[0].substring(0, REPLY_SOURCE_MAX_LENGTH);
+ // Ellipsis if needed.
+ if (lines[0].length > REPLY_SOURCE_MAX_LENGTH) {
+ rplSource = rplSource + "...";
+ }
+ // Wrap in formatting
+ rplSource = ` "${rplSource}"`;
+ } else {
+ // Don't show a source because we couldn't format one.
+ rplSource = "";
+ }
+
+ return `<${rplName}${rplSource}> ${rplText}`;
+ }
+
+ protected _textForEvent = (mxEv: MatrixEvent) => {
+ const senderDisplayName = mxEv.sender && mxEv.sender.name ? mxEv.sender.name : mxEv.getSender();
+ if (this.isReply(mxEv)) return senderDisplayName + ": " + this.textForReplyEvent(mxEv);
+ else return textForEvent(mxEv);
+ }
+
protected async createOutput(events: MatrixEvent[]) {
let content = "";
for (const event of events) {
if (!haveTileForEvent(event)) continue;
- content += `${new Date(event.getTs()).toLocaleString()} - ${textForEvent(event)}\n`;
+ content += `${new Date(event.getTs()).toLocaleString()} - ${this._textForEvent(event)}\n`;
}
return content;
}
From c58abd9582b2a4d4bdd88dc32fcac1cc655ee253 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 22 Jun 2021 10:51:16 +0530
Subject: [PATCH 065/313] Revert auto format
---
src/utils/exportUtils/Exporter.ts | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 177735f8d9..ba35c5904f 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -1,10 +1,10 @@
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {MatrixClientPeg} from "../../MatrixClientPeg";
-import {exportOptions, exportTypes} from "./exportUtils";
-import {decryptFile} from "../DecryptFile";
-import {mediaFromContent} from "../../customisations/Media";
-import {formatFullDateNoDay} from "../../DateUtils";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { exportOptions, exportTypes } from "./exportUtils";
+import { decryptFile } from "../DecryptFile";
+import { mediaFromContent } from "../../customisations/Media";
+import { formatFullDateNoDay } from "../../DateUtils";
export default abstract class Exporter {
protected constructor(
From 8a1cd77ef4df4f343bb307145ffc18e945fb7b9d Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 22 Jun 2021 12:12:37 +0530
Subject: [PATCH 066/313] Handle no match cases and modify textForEvent to
handle redacted messages
---
src/TextForEvent.ts | 15 +++++++++------
src/utils/exportUtils/PlainTextExport.ts | 7 ++++---
2 files changed, 13 insertions(+), 9 deletions(-)
diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts
index df2047a645..70952eeca5 100644
--- a/src/TextForEvent.ts
+++ b/src/TextForEvent.ts
@@ -13,13 +13,14 @@ 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.
*/
-import {MatrixClientPeg} from './MatrixClientPeg';
+import { MatrixClientPeg } from './MatrixClientPeg';
import { _t } from './languageHandler';
import * as Roles from './Roles';
-import {isValid3pidInvite} from "./RoomInvite";
+import { isValid3pidInvite } from "./RoomInvite";
import SettingsStore from "./settings/SettingsStore";
-import {ALL_RULE_TYPES, ROOM_RULE_TYPES, SERVER_RULE_TYPES, USER_RULE_TYPES} from "./mjolnir/BanList";
-import {WIDGET_LAYOUT_EVENT_TYPE} from "./stores/widgets/WidgetLayoutStore";
+import { ALL_RULE_TYPES, ROOM_RULE_TYPES, SERVER_RULE_TYPES, USER_RULE_TYPES } from "./mjolnir/BanList";
+import { WIDGET_LAYOUT_EVENT_TYPE } from "./stores/widgets/WidgetLayoutStore";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
// These functions are frequently used just to check whether an event has
// any text to display at all. For this reason they return deferred values
@@ -235,11 +236,13 @@ function textForServerACLEvent(ev): () => string | null {
return getText;
}
-function textForMessageEvent(ev): () => string | null {
+function textForMessageEvent(ev: MatrixEvent): () => string | null {
return () => {
const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+ const isRedacted = ev.isRedacted();
let message = ev.getContent().body;
- if (ev.getContent().msgtype === "m.emote") {
+ if (isRedacted) message = "Message Deleted";
+ else if (ev.getContent().msgtype === "m.emote") {
message = "* " + senderDisplayName + " " + message;
} else if (ev.getContent().msgtype === "m.image") {
message = _t('%(senderDisplayName)s sent an image.', {senderDisplayName});
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 72ab0f122f..69c80122d6 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -35,12 +35,13 @@ export default class PlainTextExporter extends Exporter {
const match = REPLY_REGEX.exec(content.body);
+ if (!match) return content.body;
+
let rplSource: string;
const rplName = match[1];
const rplText = match[3];
- const sourceMatch = REPLY_REGEX.exec(content.body);
- rplSource = sourceMatch && sourceMatch.length === 4 ? sourceMatch[3] : content.body;
- rplSource = rplSource.substring(0, REPLY_SOURCE_MAX_LENGTH);
+
+ rplSource = match[2].substring(1, REPLY_SOURCE_MAX_LENGTH);
// Get the first non-blank line from the source.
const lines = rplSource.split('\n').filter((line) => !/^\s*$/.test(line))
if (lines.length > 0) {
From 12ecaf30df245a17093c2dfcef0ab6df07b8beee Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 22 Jun 2021 12:14:31 +0530
Subject: [PATCH 067/313] i18n
---
src/TextForEvent.ts | 2 +-
src/i18n/strings/en_EN.json | 1 +
2 files changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts
index 70952eeca5..6975550154 100644
--- a/src/TextForEvent.ts
+++ b/src/TextForEvent.ts
@@ -241,7 +241,7 @@ function textForMessageEvent(ev: MatrixEvent): () => string | null {
const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
const isRedacted = ev.isRedacted();
let message = ev.getContent().body;
- if (isRedacted) message = "Message Deleted";
+ if (isRedacted) message = _t("Message Deleted");
else if (ev.getContent().msgtype === "m.emote") {
message = "* " + senderDisplayName + " " + message;
} else if (ev.getContent().msgtype === "m.image") {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 71fbfd53e7..5c9c81dcfe 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -525,6 +525,7 @@
"%(senderDisplayName)s set the server ACLs for this room.": "%(senderDisplayName)s set the server ACLs for this room.",
"%(senderDisplayName)s changed the server ACLs for this room.": "%(senderDisplayName)s changed the server ACLs for this room.",
"🎉 All servers are banned from participating! This room can no longer be used.": "🎉 All servers are banned from participating! This room can no longer be used.",
+ "Message Deleted": "Message Deleted",
"%(senderDisplayName)s sent an image.": "%(senderDisplayName)s sent an image.",
"%(senderName)s set the main address for this room to %(address)s.": "%(senderName)s set the main address for this room to %(address)s.",
"%(senderName)s removed the main address for this room.": "%(senderName)s removed the main address for this room.",
From db875508d8379befb0f4d0fa1464e757570a1d72 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 22 Jun 2021 12:50:15 +0530
Subject: [PATCH 068/313] Add text for room avatar events and skip empty text
events
---
src/TextForEvent.ts | 13 +++++++++++--
src/i18n/strings/en_EN.json | 2 ++
src/utils/exportUtils/Exporter.ts | 7 +++++--
src/utils/exportUtils/PlainTextExport.ts | 3 ++-
4 files changed, 20 insertions(+), 5 deletions(-)
diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts
index 6975550154..de65733be8 100644
--- a/src/TextForEvent.ts
+++ b/src/TextForEvent.ts
@@ -116,6 +116,11 @@ function textForTopicEvent(ev): () => string | null {
});
}
+function textForRoomAvatarEvent(ev: MatrixEvent): () => string | null {
+ const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+ return () => _t('%(senderDisplayName)s changed the room avatar.', {senderDisplayName});
+}
+
function textForRoomNameEvent(ev): () => string | null {
const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
@@ -242,10 +247,12 @@ function textForMessageEvent(ev: MatrixEvent): () => string | null {
const isRedacted = ev.isRedacted();
let message = ev.getContent().body;
if (isRedacted) message = _t("Message Deleted");
- else if (ev.getContent().msgtype === "m.emote") {
+ if (ev.getContent().msgtype === "m.emote") {
message = "* " + senderDisplayName + " " + message;
} else if (ev.getContent().msgtype === "m.image") {
message = _t('%(senderDisplayName)s sent an image.', {senderDisplayName});
+ } else if (ev.getType() == "m.sticker") {
+ message = _t('%(senderDisplayName)s sent a sticker.', {senderDisplayName});
} else message = senderDisplayName + ': ' + message;
return message;
};
@@ -603,6 +610,7 @@ interface IHandlers {
const handlers: IHandlers = {
'm.room.message': textForMessageEvent,
'm.call.invite': textForCallInviteEvent,
+ 'm.sticker': textForMessageEvent,
'm.call.answer': textForCallAnswerEvent,
'm.call.hangup': textForCallHangupEvent,
'm.call.reject': textForCallRejectEvent,
@@ -613,6 +621,7 @@ const stateHandlers: IHandlers = {
'm.room.name': textForRoomNameEvent,
'm.room.topic': textForTopicEvent,
'm.room.member': textForMemberEvent,
+ "m.room.avatar": textForRoomAvatarEvent,
'm.room.third_party_invite': textForThreePidInviteEvent,
'm.room.history_visibility': textForHistoryVisibilityEvent,
'm.room.power_levels': textForPowerEvent,
@@ -638,7 +647,7 @@ export function hasText(ev): boolean {
return Boolean(handler?.(ev));
}
-export function textForEvent(ev): string {
+export function textForEvent(ev: MatrixEvent): string {
const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
return handler?.(ev)?.() || '';
}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 5c9c81dcfe..2bad735745 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -509,6 +509,7 @@
"%(senderName)s withdrew %(targetName)s's invitation.": "%(senderName)s withdrew %(targetName)s's invitation.",
"%(senderName)s kicked %(targetName)s.": "%(senderName)s kicked %(targetName)s.",
"%(senderDisplayName)s changed the topic to \"%(topic)s\".": "%(senderDisplayName)s changed the topic to \"%(topic)s\".",
+ "%(senderDisplayName)s changed the room avatar.": "%(senderDisplayName)s changed the room avatar.",
"%(senderDisplayName)s removed the room name.": "%(senderDisplayName)s removed the room name.",
"%(senderDisplayName)s changed the room name from %(oldRoomName)s to %(newRoomName)s.": "%(senderDisplayName)s changed the room name from %(oldRoomName)s to %(newRoomName)s.",
"%(senderDisplayName)s changed the room name to %(roomName)s.": "%(senderDisplayName)s changed the room name to %(roomName)s.",
@@ -527,6 +528,7 @@
"🎉 All servers are banned from participating! This room can no longer be used.": "🎉 All servers are banned from participating! This room can no longer be used.",
"Message Deleted": "Message Deleted",
"%(senderDisplayName)s sent an image.": "%(senderDisplayName)s sent an image.",
+ "%(senderDisplayName)s sent a sticker.": "%(senderDisplayName)s sent a sticker.",
"%(senderName)s set the main address for this room to %(address)s.": "%(senderName)s set the main address for this room to %(address)s.",
"%(senderName)s removed the main address for this room.": "%(senderName)s removed the main address for this room.",
"%(senderName)s added the alternative addresses %(addresses)s for this room.|other": "%(senderName)s added the alternative addresses %(addresses)s for this room.",
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index ba35c5904f..d5e1186b0f 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -140,8 +140,11 @@ export default abstract class Exporter {
return fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
}
- protected isReply(mxEvent) {
- const relatesTo = mxEvent.getContent()["m.relates_to"];
+ protected isReply(event: MatrixEvent) {
+ const isEncrypted = event.isEncrypted();
+ // If encrypted, in_reply_to lies in event.event.content
+ const content = isEncrypted ? event.event.content : event.getContent();
+ const relatesTo = content["m.relates_to"];
return !!(relatesTo && relatesTo["m.in_reply_to"]);
}
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 69c80122d6..d6e76b5968 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -71,7 +71,8 @@ export default class PlainTextExporter extends Exporter {
let content = "";
for (const event of events) {
if (!haveTileForEvent(event)) continue;
- content += `${new Date(event.getTs()).toLocaleString()} - ${this._textForEvent(event)}\n`;
+ const textForEvent = this._textForEvent(event);
+ content += textForEvent && `${new Date(event.getTs()).toLocaleString()} - ${textForEvent}\n`;
}
return content;
}
From 36a69313cdd3e1f9317f47b3a0cb0f6ef96c5dd4 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 22 Jun 2021 14:53:48 +0530
Subject: [PATCH 069/313] Display redactedBecauseUserId for redacted events
---
src/TextForEvent.ts | 12 ++++++++++--
src/i18n/strings/en_EN.json | 5 ++---
2 files changed, 12 insertions(+), 5 deletions(-)
diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts
index de65733be8..ad3417fd8c 100644
--- a/src/TextForEvent.ts
+++ b/src/TextForEvent.ts
@@ -244,9 +244,17 @@ function textForServerACLEvent(ev): () => string | null {
function textForMessageEvent(ev: MatrixEvent): () => string | null {
return () => {
const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
- const isRedacted = ev.isRedacted();
let message = ev.getContent().body;
- if (isRedacted) message = _t("Message Deleted");
+ if (ev.isRedacted()) {
+ message = _t("Message deleted");
+ const unsigned = ev.getUnsigned();
+ const redactedBecauseUserId = unsigned && unsigned.redacted_because && unsigned.redacted_because.sender;
+ if (redactedBecauseUserId && redactedBecauseUserId !== ev.getSender()) {
+ const room = MatrixClientPeg.get().getRoom(ev.getRoomId());
+ const sender = room && room.getMember(redactedBecauseUserId);
+ message = _t("Message deleted by %(name)s", { name: sender ? sender.name : redactedBecauseUserId });
+ }
+ }
if (ev.getContent().msgtype === "m.emote") {
message = "* " + senderDisplayName + " " + message;
} else if (ev.getContent().msgtype === "m.image") {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 2bad735745..7a25ebfb7a 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -526,7 +526,8 @@
"%(senderDisplayName)s set the server ACLs for this room.": "%(senderDisplayName)s set the server ACLs for this room.",
"%(senderDisplayName)s changed the server ACLs for this room.": "%(senderDisplayName)s changed the server ACLs for this room.",
"🎉 All servers are banned from participating! This room can no longer be used.": "🎉 All servers are banned from participating! This room can no longer be used.",
- "Message Deleted": "Message Deleted",
+ "Message deleted": "Message deleted",
+ "Message deleted by %(name)s": "Message deleted by %(name)s",
"%(senderDisplayName)s sent an image.": "%(senderDisplayName)s sent an image.",
"%(senderDisplayName)s sent a sticker.": "%(senderDisplayName)s sent a sticker.",
"%(senderName)s set the main address for this room to %(address)s.": "%(senderName)s set the main address for this room to %(address)s.",
@@ -1881,8 +1882,6 @@
"Reactions": "Reactions",
"<reactors/><reactedWith> reacted with %(content)s</reactedWith>": "<reactors/><reactedWith> reacted with %(content)s</reactedWith>",
"<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>": "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>",
- "Message deleted": "Message deleted",
- "Message deleted by %(name)s": "Message deleted by %(name)s",
"Message deleted on %(date)s": "Message deleted on %(date)s",
"%(senderDisplayName)s changed the avatar for %(roomName)s": "%(senderDisplayName)s changed the avatar for %(roomName)s",
"%(senderDisplayName)s removed the room avatar.": "%(senderDisplayName)s removed the room avatar.",
From 438b9d473079e01862b49fd5aff7c08c1302d853 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 23 Jun 2021 11:58:50 +0530
Subject: [PATCH 070/313] Get rid of jszip and replace it with a custom library
---
package.json | 1 -
.../views/elements/EventListSummary.tsx | 3 +-
src/components/views/rooms/EventTile.tsx | 2 +-
src/components/views/rooms/RoomHeader.js | 4 +-
src/utils/exportUtils/Exporter.ts | 27 +-
src/utils/exportUtils/HtmlExport.tsx | 58 ++--
src/utils/exportUtils/PlainTextExport.ts | 57 +++-
src/utils/exportUtils/StreamToZip.ts | 293 +++++++++++++++++-
yarn.lock | 34 +-
9 files changed, 377 insertions(+), 102 deletions(-)
diff --git a/package.json b/package.json
index 6e0a55de9c..485e4d7872 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,6 @@
"highlight.js": "^10.5.0",
"html-entities": "^1.4.0",
"is-ip": "^3.1.0",
- "jszip": "^3.6.0",
"katex": "^0.12.0",
"linkifyjs": "^2.1.9",
"lodash": "^4.17.20",
diff --git a/src/components/views/elements/EventListSummary.tsx b/src/components/views/elements/EventListSummary.tsx
index 86d3e082ad..ef40251dec 100644
--- a/src/components/views/elements/EventListSummary.tsx
+++ b/src/components/views/elements/EventListSummary.tsx
@@ -76,7 +76,8 @@ const EventListSummary: React.FC<IProps> = ({
{ children }
</React.Fragment>;
} else {
- const avatars = summaryMembers.map((m) => <MemberAvatar key={m.userId} member={m} width={14} height={14} />);
+ const avatars = summaryMembers.map((m, idx) =>
+ <MemberAvatar key={m.userId + idx} member={m} width={14} height={14} />);
body = (
<div className="mx_EventTile_line">
<div className="mx_EventTile_info">
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index a1687d146f..20f02ff96c 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -105,7 +105,7 @@ for (const evType of ALL_RULE_TYPES) {
stateEventTileTypes[evType] = 'messages.TextualEvent';
}
-export function getHandlerTile(ev: MatrixEvent) {
+export function getHandlerTile(ev) {
const type = ev.getType();
// don't show verification requests we're not involved in,
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 1a21e503f3..891b690f7b 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -84,12 +84,12 @@ export default class RoomHeader extends React.Component {
_exportConversationalHistory = async () => {
await exportConversationalHistory(
this.props.room,
- exportFormats.LOGS,
+ exportFormats.HTML,
exportTypes.START_DATE,
{
startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
attachmentsIncluded: true,
- maxSize: 3 * 1024 * 1024, // 3 MB
+ maxSize: 7 * 1024 * 1024, // 3 MB
},
);
}
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index d5e1186b0f..f6dce9c8e8 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -6,12 +6,37 @@ import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
+type FileStream = {
+ name: string,
+ stream(): ReadableStream,
+};
+
export default abstract class Exporter {
+ protected files: FileStream[];
protected constructor(
protected room: Room,
protected exportType: exportTypes,
protected exportOptions?: exportOptions,
- ) {}
+ ) {
+ this.files = [];
+ }
+
+ protected addFile = (filePath: string, blob: Blob) => {
+ const file = {
+ name: filePath,
+ stream: () => blob.stream(),
+ }
+ this.files.push(file);
+ }
+
+ protected pumpToFileStream = async (reader: ReadableStreamDefaultReader, writer: WritableStreamDefaultWriter) => {
+ const res = await reader.read();
+ if (res.done) await writer.close();
+ else {
+ await writer.write(res.value);
+ await this.pumpToFileStream(reader, writer)
+ }
+ }
protected setEventMetadata = (event: MatrixEvent) => {
const client = MatrixClientPeg.get();
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 4456fd3737..1dec02981c 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -1,6 +1,5 @@
import React from "react"
import streamSaver from "streamsaver";
-import JSZip from "jszip";
import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
@@ -25,9 +24,9 @@ import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
import { MatrixClient } from "matrix-js-sdk";
+import zip from "./StreamToZip";
export default class HTMLExporter extends Exporter {
- protected zip: JSZip;
protected avatars: Map<string, boolean>;
protected permalinkCreator: RoomPermalinkCreator;
protected matrixClient: MatrixClient;
@@ -36,7 +35,6 @@ export default class HTMLExporter extends Exporter {
constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
super(room, exportType, exportOptions);
- this.zip = new JSZip();
this.avatars = new Map<string, boolean>();
this.matrixClient = MatrixClientPeg.get();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
@@ -59,7 +57,7 @@ export default class HTMLExporter extends Exporter {
if (avatarUrl) {
const image = await fetch(avatarUrl);
blob = await image.blob();
- this.zip.file(avatarPath, blob);
+ this.addFile(avatarPath, blob);
}
const avatar = (
<BaseAvatar
@@ -217,7 +215,7 @@ export default class HTMLExporter extends Exporter {
this.avatars.set(member.userId, true);
const image = await fetch(avatarUrl);
const blob = await image.blob();
- this.zip.file(`users/${member.userId.replace(/:/g, '-')}`, blob);
+ this.addFile(`users/${member.userId.replace(/:/g, '-')}`, blob);
}
}
@@ -285,7 +283,7 @@ export default class HTMLExporter extends Exporter {
if (this.totalSize > this.exportOptions.maxSize - 1024 * 1024) {
this.exportOptions.attachmentsIncluded = false;
}
- this.zip.file(filePath, blob);
+ this.addFile(filePath, blob);
} else {
const modifiedContent = {
msgtype: "m.text",
@@ -334,53 +332,43 @@ export default class HTMLExporter extends Exporter {
const html = await this.createHTML(res);
- this.zip.file("index.html", html);
- this.zip.file("css/style.css", exportCSS);
- this.zip.file("js/script.js", exportJS);
+ this.addFile("index.html", new Blob([html]));
+ this.addFile("css/style.css", new Blob([exportCSS]));
+ this.addFile("js/script.js", new Blob([exportJS]));
for (const iconName in exportIcons) {
- this.zip.file(`icons/${iconName}`, exportIcons[iconName]);
+ this.addFile(`icons/${iconName}`, new Blob([exportIcons[iconName]]));
}
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
console.info("HTML creation successful!");
- console.info("Generating a ZIP...");
- //Generate the zip file asynchronously
- const blob = await this.zip.generateAsync({ type: "blob" });
- console.log("ZIP generated successfully");
- console.info("Writing to file system...")
//Support for firefox browser
streamSaver.WritableStream = ponyfill.WritableStream
//Create a writable stream to the directory
- const fileStream = streamSaver.createWriteStream(filename, { size: blob.size });
+ const fileStream = streamSaver.createWriteStream(filename);
+
const writer = fileStream.getWriter();
+ const files = this.files;
- // Here we chunk the blob into pieces of 10 MB, the size might be dynamically generated.
- // This can be used to keep track of the progress
- const sliceSize = 10 * 1e6;
- for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {
- const blobPiece = blob.slice(fPointer, fPointer + sliceSize);
- const reader = new FileReader();
+ console.info("Generating a ZIP...");
+ const readableZipStream = zip({
+ start(ctrl) {
+ for (const file of files) ctrl.enqueue(file);
+ ctrl.close();
+ },
+ });
+
+ console.info("Writing to file system...")
+
+ const reader = readableZipStream.getReader()
+ await this.pumpToFileStream(reader, writer);
- const waiter = new Promise<void>((resolve) => {
- reader.onloadend = evt => {
- const arrayBufferNew: any = evt.target.result;
- const uint8ArrayNew = new Uint8Array(arrayBufferNew);
- writer.write(uint8ArrayNew);
- resolve();
- };
- reader.readAsArrayBuffer(blobPiece);
- });
- await waiter;
- }
- await writer.close();
const exportEnd = performance.now();
console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
window.removeEventListener("beforeunload", this.onBeforeUnload);
- return blob;
}
}
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index d6e76b5968..862fac3aa1 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -5,18 +5,23 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay } from "../../DateUtils";
import { _t } from "../../languageHandler";
import * as ponyfill from "web-streams-polyfill/ponyfill"
+import "web-streams-polyfill/ponyfill" // to support blob.stream()
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import { textForEvent } from "../../TextForEvent";
+import zip from "./StreamToZip";
+
export default class PlainTextExporter extends Exporter {
protected totalSize: number;
protected mediaOmitText: string;
+ private readonly fileDir: string;
constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
super(room, exportType, exportOptions);
this.totalSize = 0;
+ this.fileDir = `matrix-export-${formatFullDateNoDay(new Date())}`;
this.mediaOmitText = !this.exportOptions.attachmentsIncluded
? _t("Media omitted")
: _t("Media omitted - file size limit exceeded");
@@ -61,8 +66,17 @@ export default class PlainTextExporter extends Exporter {
return `<${rplName}${rplSource}> ${rplText}`;
}
- protected _textForEvent = (mxEv: MatrixEvent) => {
+ protected _textForEvent = async (mxEv: MatrixEvent) => {
const senderDisplayName = mxEv.sender && mxEv.sender.name ? mxEv.sender.name : mxEv.getSender();
+ if (this.exportOptions.attachmentsIncluded && this.isAttachment(mxEv)) {
+ const blob = await this.getMediaBlob(mxEv);
+ this.totalSize += blob.size;
+ const filePath = this.getFilePath(mxEv);
+ this.addFile(filePath, blob);
+ if (this.totalSize > this.exportOptions.maxSize - 1024 * 1024) {
+ this.exportOptions.attachmentsIncluded = false;
+ }
+ }
if (this.isReply(mxEv)) return senderDisplayName + ": " + this.textForReplyEvent(mxEv);
else return textForEvent(mxEv);
}
@@ -71,12 +85,18 @@ export default class PlainTextExporter extends Exporter {
let content = "";
for (const event of events) {
if (!haveTileForEvent(event)) continue;
- const textForEvent = this._textForEvent(event);
+ const textForEvent = await this._textForEvent(event);
content += textForEvent && `${new Date(event.getTs()).toLocaleString()} - ${textForEvent}\n`;
}
return content;
}
+ protected getFileName = () => {
+ if (this.exportOptions.attachmentsIncluded) {
+ return `${this.room.name}.txt`;
+ } else return `${this.fileDir}.txt`
+ }
+
public async export() {
console.info("Starting export process...");
console.info("Fetching events...");
@@ -89,17 +109,30 @@ export default class PlainTextExporter extends Exporter {
const text = await this.createOutput(res);
- const filename = `matrix-export-${formatFullDateNoDay(new Date())}.txt`;
-
- console.info("Writing to a file...");
- //Support for firefox browser
+ console.info("Writing to the file system...");
streamSaver.WritableStream = ponyfill.WritableStream
- //Create a writable stream to the directory
- const fileStream = streamSaver.createWriteStream(filename);
- const writer = fileStream.getWriter();
- const data = new TextEncoder().encode(text);
- await writer.write(data);
- await writer.close();
+
+ const files = this.files;
+ if (files.length) {
+ this.addFile(this.getFileName(), new Blob([text]));
+ const fileStream = streamSaver.createWriteStream(`${this.fileDir}.zip`);
+ const readableZipStream = zip({
+ start(ctrl) {
+ for (const file of files) ctrl.enqueue(file);
+ ctrl.close();
+ },
+ });
+ const writer = fileStream.getWriter()
+ const reader = readableZipStream.getReader()
+ await this.pumpToFileStream(reader, writer);
+ } else {
+ const fileStream = streamSaver.createWriteStream(`${this.fileDir}.txt`);
+ const writer = fileStream.getWriter()
+ const data = new TextEncoder().encode(text);
+ await writer.write(data);
+ await writer.close();
+ }
+
const exportEnd = performance.now();
console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
window.removeEventListener("beforeunload", this.onBeforeUnload);
diff --git a/src/utils/exportUtils/StreamToZip.ts b/src/utils/exportUtils/StreamToZip.ts
index 01a2880386..b98e3e142f 100644
--- a/src/utils/exportUtils/StreamToZip.ts
+++ b/src/utils/exportUtils/StreamToZip.ts
@@ -1,17 +1,278 @@
-/*Not to be reviewed now*/
-// class fileCheckSum {
-// protected CRC32: number;
-// public table: any[];
-// constructor() {
-// this.CRC32 = -1
-// }
+/* global ReadableStream */
-// protected append(data: any[]) {
-// let crc = this.CRC32 | 0;
-// const table = this.table;
-// for (let offset = 0, len = data.length | 0; offset < len; offset++) {
-// crc = (crc >>> 8) ^ table[(crc ^ data[offset]) & 0xFF]
-// }
-// this.CRC32 = crc
-// }
-// }
+type TypedArray =
+ | Int8Array
+ | Uint8Array
+ | Int16Array
+ | Uint16Array
+ | Int32Array
+ | Uint32Array
+ | Uint8ClampedArray
+ | Float32Array
+ | Float64Array;
+
+
+/**
+ * 32-bit cyclic redundancy check, or CRC-32 - checksum
+ */
+class Crc32 {
+ crc: number;
+ table: any;
+ constructor() {
+ this.crc = -1;
+ this.table = (() => {
+ let i
+ let j
+ let t;
+ const table = [];
+
+ for (i = 0; i < 256; i++) {
+ t = i;
+ for (j = 0; j < 8; j++) {
+ t = (t & 1)
+ ? (t >>> 1) ^ 0xEDB88320
+ : t >>> 1;
+ }
+ table[i] = t;
+ }
+ return table
+ })()
+ }
+
+ append(data: TypedArray) {
+ let crc = this.crc | 0;
+ const table = this.table;
+ for (let offset = 0, len = data.length | 0; offset < len; offset++) {
+ crc = (crc >>> 8) ^ table[(crc ^ data[offset]) & 0xFF];
+ }
+ this.crc = crc;
+ }
+
+ get() {
+ return ~this.crc;
+ }
+}
+
+
+type DataHelper = {
+ array: Uint8Array,
+ view: DataView,
+}
+
+const getDataHelper = (byteLength: number): DataHelper => {
+ const uint8 = new Uint8Array(byteLength)
+ return {
+ array: uint8,
+ view: new DataView(uint8.buffer),
+ };
+}
+
+type FileLike = File & {
+ directory: string,
+ comment: string,
+ stream(): ReadableStream,
+}
+
+type ZipObj = {
+ crc?: Crc32,
+ uncompressedLength: number,
+ compressedLength: number,
+ ctrl: ReadableStreamDefaultController,
+ writeFooter: Function,
+ writeHeader: Function,
+ reader?: ReadableStreamDefaultReader,
+ offset: number
+ header?: DataHelper,
+ fileLike: FileLike,
+ level: number,
+ directory: boolean,
+}
+
+const pump = (zipObj: ZipObj) => zipObj.reader ? zipObj.reader.read().then(chunk => {
+ if (zipObj.crc) {
+ if (chunk.done) return zipObj.writeFooter();
+ const outputData = chunk.value;
+ zipObj.crc.append(outputData);
+ zipObj.uncompressedLength += outputData.length;
+ zipObj.compressedLength += outputData.length;
+ zipObj.ctrl.enqueue(outputData);
+ } else {
+ throw new Error('Missing zipObj.crc');
+ }
+}) : undefined;
+
+export default function ZIP(underlyingSource: UnderlyingSource) {
+ const files = Object.create(null);
+ const filenames: string[] = [];
+ const encoder = new TextEncoder();
+ let offset = 0;
+ let activeZipIndex = 0;
+ let ctrl: ReadableStreamDefaultController;
+ let activeZipObject: ZipObj;
+ let closed: boolean;
+
+ function next() {
+ activeZipIndex++;
+ activeZipObject = files[filenames[activeZipIndex]];
+ if (activeZipObject) processNextChunk();
+ else if (closed) closeZip();
+ }
+
+ const zipWriter: ReadableStreamDefaultController = {
+ desiredSize: null,
+
+ error(err) {
+ console.error(err)
+ },
+
+ enqueue(fileLike: FileLike) {
+ if (closed) {
+ throw new TypeError(
+ "Cannot enqueue a chunk into a readable stream that is closed or has been requested to be closed",
+ );
+ }
+
+ let name = fileLike.name.trim();
+ const date = new Date(typeof fileLike.lastModified === 'undefined' ? Date.now() : fileLike.lastModified);
+
+ if (fileLike.directory && !name.endsWith('/')) name += '/';
+ if (files[name]) throw new Error('File already exists.');
+
+ const nameBuf = encoder.encode(name);
+ filenames.push(name);
+
+ const zipObject: ZipObj = files[name] = {
+ level: 0,
+ ctrl,
+ directory: !!fileLike.directory,
+ nameBuf,
+ comment: encoder.encode(fileLike.comment || ''),
+ compressedLength: 0,
+ uncompressedLength: 0,
+ offset,
+
+ writeHeader() {
+ const header = getDataHelper(26)
+ const data = getDataHelper(30 + nameBuf.length)
+
+ zipObject.offset = offset;
+ zipObject.header = header;
+
+ if (zipObject.level !== 0 && !zipObject.directory) {
+ header.view.setUint16(4, 0x0800);
+ }
+
+ header.view.setUint32(0, 0x14000808);
+ header.view.setUint16(
+ 6,
+ (((date.getHours() << 6) | date.getMinutes()) << 5) | (date.getSeconds() / 2),
+ true,
+ );
+ header.view.setUint16(
+ 8,
+ ((((date.getFullYear() - 1980) << 4) | (date.getMonth() + 1)) << 5) |
+ date.getDate(),
+ true,
+ );
+ header.view.setUint16(22, nameBuf.length, true);
+ data.view.setUint32(0, 0x504b0304);
+ data.array.set(header.array, 4);
+ data.array.set(nameBuf, 30);
+ offset += data.array.length;
+ ctrl.enqueue(data.array);
+ },
+
+ writeFooter() {
+ const footer = getDataHelper(16);
+ footer.view.setUint32(0, 0x504b0708);
+
+ if (zipObject.crc && zipObject.header) {
+ zipObject.header.view.setUint32(10, zipObject.crc.get(), true);
+ zipObject.header.view.setUint32(14, zipObject.compressedLength, true);
+ zipObject.header.view.setUint32(18, zipObject.uncompressedLength, true);
+ footer.view.setUint32(4, zipObject.crc.get(), true);
+ footer.view.setUint32(8, zipObject.compressedLength, true);
+ footer.view.setUint32(12, zipObject.uncompressedLength, true);
+ }
+
+ ctrl.enqueue(footer.array);
+ offset += zipObject.compressedLength + 16;
+ next()
+ },
+ fileLike,
+ }
+
+ if (!activeZipObject) {
+ activeZipObject = zipObject;
+ processNextChunk();
+ }
+ },
+
+ close() {
+ if (closed) {
+ throw new TypeError(
+ "Cannot close a readable stream that has already been requested to be closed",
+ );
+ }
+ if (!activeZipObject) closeZip();
+ closed = true;
+ },
+ }
+
+ function closeZip() {
+ let length = 0;
+ let index = 0
+ let indexFilename;
+ let file;
+
+ for (indexFilename = 0; indexFilename < filenames.length; indexFilename++) {
+ file = files[filenames[indexFilename]];
+ length += 46 + file.nameBuf.length + file.comment.length;
+ }
+ const data = getDataHelper(length + 22)
+ for (indexFilename = 0; indexFilename < filenames.length; indexFilename++) {
+ file = files[filenames[indexFilename]];
+ data.view.setUint32(index, 0x504b0102);
+ data.view.setUint16(index + 4, 0x1400);
+ data.array.set(file.header.array, index + 6);
+ data.view.setUint16(index + 32, file.comment.length, true);
+ if (file.directory) {
+ data.view.setUint8(index + 38, 0x10);
+ }
+ data.view.setUint32(index + 42, file.offset, true);
+ data.array.set(file.nameBuf, index + 46);
+ data.array.set(file.comment, index + 46 + file.nameBuf.length);
+ index += 46 + file.nameBuf.length + file.comment.length;
+ }
+ data.view.setUint32(index, 0x504b0506);
+ data.view.setUint16(index + 8, filenames.length, true);
+ data.view.setUint16(index + 10, filenames.length, true);
+ data.view.setUint32(index + 12, length, true);
+ data.view.setUint32(index + 16, offset, true);
+ ctrl.enqueue(data.array);
+ ctrl.close();
+ }
+
+ function processNextChunk() {
+ if (!activeZipObject) return;
+ if (activeZipObject.reader) return pump(activeZipObject);
+ if (activeZipObject.fileLike.stream) {
+ activeZipObject.crc = new Crc32();
+ activeZipObject.reader = activeZipObject.fileLike.stream().getReader();
+ activeZipObject.writeHeader();
+ } else next();
+ }
+
+ return new ReadableStream({
+ start: c => {
+ ctrl = c;
+ underlyingSource.start && Promise.resolve(underlyingSource.start(zipWriter));
+ },
+ pull() {
+ return processNextChunk() || (
+ underlyingSource.pull &&
+ Promise.resolve(underlyingSource.pull(zipWriter))
+ )
+ },
+ });
+}
diff --git a/yarn.lock b/yarn.lock
index f02daedcd2..79d79db88f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4363,11 +4363,6 @@ ignore@^5.1.4, ignore@^5.1.8:
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
-immediate@~3.0.5:
- version "3.0.6"
- resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
- integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
-
immutable@^3.7.4:
version "3.8.2"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
@@ -5494,16 +5489,6 @@ jsprim@^1.2.2:
array-includes "^3.1.2"
object.assign "^4.1.2"
-jszip@^3.6.0:
- version "3.6.0"
- resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.6.0.tgz#839b72812e3f97819cc13ac4134ffced95dd6af9"
- integrity sha512-jgnQoG9LKnWO3mnVNBnfhkh0QknICd1FGSrXcgrl67zioyJ4wgx25o9ZqwNtrROSflGBCGYnJfjrIyRIby1OoQ==
- dependencies:
- lie "~3.3.0"
- pako "~1.0.2"
- readable-stream "~2.3.6"
- set-immediate-shim "~1.0.1"
-
katex@^0.12.0:
version "0.12.0"
resolved "https://registry.yarnpkg.com/katex/-/katex-0.12.0.tgz#2fb1c665dbd2b043edcf8a1f5c555f46beaa0cb9"
@@ -5571,13 +5556,6 @@ levn@^0.4.1:
prelude-ls "^1.2.1"
type-check "~0.4.0"
-lie@~3.3.0:
- version "3.3.0"
- resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
- integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
- dependencies:
- immediate "~3.0.5"
-
lines-and-columns@^1.1.6:
version "1.1.6"
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -6346,11 +6324,6 @@ pako@^2.0.3:
resolved "https://registry.yarnpkg.com/pako/-/pako-2.0.3.tgz#cdf475e31b678565251406de9e759196a0ea7a43"
integrity sha512-WjR1hOeg+kki3ZIOjaf4b5WVcay1jaliKSYiEaB1XzwhMQZJxRdQRv0V31EKBYlxb4T7SK3hjfc/jxyU64BoSw==
-pako@~1.0.2:
- version "1.0.11"
- resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
- integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
-
parent-module@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -6959,7 +6932,7 @@ read-pkg@^5.2.0:
parse-json "^5.0.0"
type-fest "^0.6.0"
-readable-stream@^2.0.2, readable-stream@~2.3.6:
+readable-stream@^2.0.2:
version "2.3.7"
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -7393,11 +7366,6 @@ set-blocking@^2.0.0:
resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
-set-immediate-shim@~1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
- integrity sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=
-
set-value@^2.0.0, set-value@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
From 5fff64f1280919640819601185799384ef81cb35 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 23 Jun 2021 12:14:20 +0530
Subject: [PATCH 071/313] Fix types
---
src/utils/exportUtils/HtmlExport.tsx | 3 +--
yarn.lock | 2 +-
2 files changed, 2 insertions(+), 3 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 1dec02981c..9271db241e 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -79,8 +79,7 @@ export default class HTMLExporter extends Exporter {
const creatorName = this.room?.getMember(creator)?.rawDisplayName || creator;
const exporter = this.matrixClient.getUserId();
const exporterName = this.room?.getMember(exporter)?.rawDisplayName;
- const topic = this.room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic
- || this.room.topic || "";
+ const topic = this.room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic || "";
const createdText = _t("%(creatorName)s created this room.", {
creatorName,
});
diff --git a/yarn.lock b/yarn.lock
index 7ebe0d2ba8..0cc8be983f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1486,7 +1486,7 @@
resolved "https://registry.yarnpkg.com/@types/counterpart/-/counterpart-0.18.1.tgz#b1b784d9e54d9879f0a8cb12f2caedab65430fe8"
integrity sha512-PRuFlBBkvdDOtxlIASzTmkEFar+S66Ek48NVVTWMUjtJAdn5vyMSN8y6IZIoIymGpR36q2nZbIYazBWyFxL+IQ==
-"@types/diff-match-patch@^1.0.32":
+"@types/diff-match-patch@^1.0.5":
version "1.0.32"
resolved "https://registry.yarnpkg.com/@types/diff-match-patch/-/diff-match-patch-1.0.32.tgz#d9c3b8c914aa8229485351db4865328337a3d09f"
integrity sha512-bPYT5ECFiblzsVzyURaNhljBH2Gh1t9LowgUwciMrNAhFewLkHT2H0Mto07Y4/3KCOGZHRQll3CTtQZ0X11D/A==
From dd40f81edf3263789724310cc831b0bbe1f356be Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 24 Jun 2021 14:03:12 +0530
Subject: [PATCH 072/313] Wrap media fetch in try catch
---
src/utils/exportUtils/HtmlExport.tsx | 57 ++++++++++++++++++----------
1 file changed, 36 insertions(+), 21 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 9271db241e..e05a7bd494 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -57,6 +57,7 @@ export default class HTMLExporter extends Exporter {
if (avatarUrl) {
const image = await fetch(avatarUrl);
blob = await image.blob();
+ this.totalSize += blob.size;
this.addFile(avatarPath, blob);
}
const avatar = (
@@ -270,32 +271,44 @@ export default class HTMLExporter extends Exporter {
return eventTileMarkup;
}
+ protected createModifiedEvent = (text: string, mxEv: MatrixEvent) => {
+ const modifiedContent = {
+ msgtype: "m.text",
+ body: `*${text}*`,
+ format: "org.matrix.custom.html",
+ formatted_body: `<em>${text}</em>`,
+ }
+ const modifiedEvent = new MatrixEvent();
+ modifiedEvent.event = mxEv.event;
+ modifiedEvent.sender = mxEv.sender;
+ modifiedEvent.event.type = "m.room.message";
+ modifiedEvent.event.content = modifiedContent;
+ return modifiedEvent;
+ }
+
protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
let eventTile: string;
if (this.isAttachment(mxEv)) {
if (this.exportOptions.attachmentsIncluded) {
- const blob = await this.getMediaBlob(mxEv);
- this.totalSize += blob.size;
- const filePath = this.getFilePath(mxEv);
- eventTile = await this.getEventTile(mxEv, joined, filePath);
- if (this.totalSize > this.exportOptions.maxSize - 1024 * 1024) {
- this.exportOptions.attachmentsIncluded = false;
+ try {
+ const blob = await this.getMediaBlob(mxEv);
+ this.totalSize += blob.size;
+ const filePath = this.getFilePath(mxEv);
+ eventTile = await this.getEventTile(mxEv, joined, filePath);
+ if (this.totalSize > this.exportOptions.maxSize - 1024 * 512) {
+ this.exportOptions.attachmentsIncluded = false;
+ }
+ this.addFile(filePath, blob);
+ } catch (e) {
+ console.log("Error while fetching file");
+ eventTile = await this.getEventTile(
+ this.createModifiedEvent(_t("Error fetching file"), mxEv),
+ joined,
+ );
}
- this.addFile(filePath, blob);
} else {
- const modifiedContent = {
- msgtype: "m.text",
- body: `*${this.mediaOmitText}*`,
- format: "org.matrix.custom.html",
- formatted_body: `<em>${this.mediaOmitText}</em>`,
- }
- const modifiedEvent = new MatrixEvent();
- modifiedEvent.event = mxEv.event;
- modifiedEvent.sender = mxEv.sender;
- modifiedEvent.event.type = "m.room.message";
- modifiedEvent.event.content = modifiedContent;
- eventTile = await this.getEventTile(modifiedEvent, joined);
+ eventTile = await this.getEventTile(this.createModifiedEvent(this.mediaOmitText, mxEv), joined);
}
} else eventTile = await this.getEventTile(mxEv, joined);
@@ -305,14 +318,16 @@ export default class HTMLExporter extends Exporter {
protected async createHTML(events: MatrixEvent[]) {
let content = "";
let prevEvent = null;
- for (const event of events) {
+ for (let i = 0; i < events.length; i++) {
+ const event = events[i];
+ console.log("Processing event " + i + " out of " + events.length);
if (!haveTileForEvent(event)) continue;
content += this._wantsDateSeparator(event, prevEvent) ? this.getDateSeparator(event) : "";
const shouldBeJoined = !this._wantsDateSeparator(event, prevEvent)
&& shouldFormContinuation(prevEvent, event);
const body = await this.createMessageBody(event, shouldBeJoined);
-
+ this.totalSize += Buffer.byteLength(body);
content += body;
prevEvent = event;
}
From 4bfac11911c139d926bb00ea120cbe4705249b00 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 24 Jun 2021 14:04:37 +0530
Subject: [PATCH 073/313] i18n
---
src/i18n/strings/en_EN.json | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index f0f8cd343b..ae9fc753e0 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -736,6 +736,7 @@
"%(creatorName)s created this room.": "%(creatorName)s created this room.",
"This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.": "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.",
"Topic: %(topic)s": "Topic: %(topic)s",
+ "Error fetching file": "Error fetching file",
"Help us improve %(brand)s": "Help us improve %(brand)s",
"Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.": "Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.",
"Yes": "Yes",
From 112dfa2b96fc7e4d6dd10348ea293034eeca6b36 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 24 Jun 2021 18:19:12 +0530
Subject: [PATCH 074/313] Finish JSON export implementation
---
src/components/views/rooms/RoomHeader.js | 6 +-
src/utils/exportUtils/Exporter.ts | 13 +--
src/utils/exportUtils/HtmlExport.tsx | 8 +-
src/utils/exportUtils/JSONExport.ts | 124 +++++++++++++++++++++++
src/utils/exportUtils/PlainTextExport.ts | 1 -
src/utils/exportUtils/exportUtils.ts | 2 +
6 files changed, 138 insertions(+), 16 deletions(-)
create mode 100644 src/utils/exportUtils/JSONExport.ts
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 891b690f7b..f37145261c 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -84,12 +84,12 @@ export default class RoomHeader extends React.Component {
_exportConversationalHistory = async () => {
await exportConversationalHistory(
this.props.room,
- exportFormats.HTML,
+ exportFormats.JSON,
exportTypes.START_DATE,
{
startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
- attachmentsIncluded: true,
- maxSize: 7 * 1024 * 1024, // 3 MB
+ attachmentsIncluded: false,
+ maxSize: 7 * 1024 * 1024, // 7 MB
},
);
}
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index f6dce9c8e8..5e766ff7ba 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -5,6 +5,7 @@ import { exportOptions, exportTypes } from "./exportUtils";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
+import { MatrixClient } from "matrix-js-sdk";
type FileStream = {
name: string,
@@ -13,12 +14,14 @@ type FileStream = {
export default abstract class Exporter {
protected files: FileStream[];
+ protected client: MatrixClient;
protected constructor(
protected room: Room,
protected exportType: exportTypes,
protected exportOptions?: exportOptions,
) {
this.files = [];
+ this.client = MatrixClientPeg.get();
}
protected addFile = (filePath: string, blob: Blob) => {
@@ -39,8 +42,7 @@ export default abstract class Exporter {
}
protected setEventMetadata = (event: MatrixEvent) => {
- const client = MatrixClientPeg.get();
- const roomState = client.getRoom(this.room.roomId).currentState;
+ const roomState = this.client.getRoom(this.room.roomId).currentState;
event.sender = roomState.getSentinelMember(
event.getSender(),
);
@@ -68,8 +70,7 @@ export default abstract class Exporter {
}
protected getRequiredEvents = async () : Promise<MatrixEvent[]> => {
- const client = MatrixClientPeg.get();
- const eventMapper = client.getEventMapper();
+ const eventMapper = this.client.getEventMapper();
let prevToken: string|null = null;
let limit = this.getLimit();
@@ -77,7 +78,7 @@ export default abstract class Exporter {
while (limit) {
const eventsPerCrawl = Math.min(limit, 1000);
- const res: any = await client.createMessagesRequest(this.room.roomId, prevToken, eventsPerCrawl, "b");
+ const res: any = await this.client.createMessagesRequest(this.room.roomId, prevToken, eventsPerCrawl, "b");
if (res.chunk.length === 0) break;
@@ -102,7 +103,7 @@ export default abstract class Exporter {
const decryptionPromises = events
.filter(event => event.isEncrypted())
.map(event => {
- return client.decryptEventIfNeeded(event, {
+ return this.client.decryptEventIfNeeded(event, {
isRetry: true,
emit: false,
});
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index e05a7bd494..2db4e243a7 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -10,7 +10,6 @@ import { shouldFormContinuation } from "../../components/structures/MessagePanel
import { formatFullDateNoDay, formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
import { RoomPermalinkCreator } from "../permalinks/Permalinks";
import { _t } from "../../languageHandler";
-import { MatrixClientPeg } from "../../MatrixClientPeg";
import { EventType } from "matrix-js-sdk/src/@types/event";
import * as ponyfill from "web-streams-polyfill/ponyfill"
import * as Avatar from "../../Avatar";
@@ -23,20 +22,17 @@ import exportIcons from "./exportIcons";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
-import { MatrixClient } from "matrix-js-sdk";
import zip from "./StreamToZip";
export default class HTMLExporter extends Exporter {
protected avatars: Map<string, boolean>;
protected permalinkCreator: RoomPermalinkCreator;
- protected matrixClient: MatrixClient;
protected totalSize: number;
protected mediaOmitText: string;
constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
super(room, exportType, exportOptions);
this.avatars = new Map<string, boolean>();
- this.matrixClient = MatrixClientPeg.get();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
this.totalSize = 0;
this.mediaOmitText = !this.exportOptions.attachmentsIncluded
@@ -78,7 +74,7 @@ export default class HTMLExporter extends Exporter {
const exportDate = formatFullDateNoDayNoTime(new Date());
const creator = this.room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
const creatorName = this.room?.getMember(creator)?.rawDisplayName || creator;
- const exporter = this.matrixClient.getUserId();
+ const exporter = this.client.getUserId();
const exporterName = this.room?.getMember(exporter)?.rawDisplayName;
const topic = this.room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic || "";
const createdText = _t("%(creatorName)s created this room.", {
@@ -235,7 +231,7 @@ export default class HTMLExporter extends Exporter {
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
const eventTile = <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
- <MatrixClientContext.Provider value = {this.matrixClient}>
+ <MatrixClientContext.Provider value = {this.client}>
<EventTile
mxEvent={mxEv}
continuation={continuation}
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
new file mode 100644
index 0000000000..89cfbcb4ff
--- /dev/null
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -0,0 +1,124 @@
+import streamSaver from "streamsaver";
+import Exporter from "./Exporter";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { formatFullDateNoDay, formatFullDateNoDayNoTime } from "../../DateUtils";
+import * as ponyfill from "web-streams-polyfill/ponyfill"
+import { haveTileForEvent } from "../../components/views/rooms/EventTile";
+import { exportTypes } from "./exportUtils";
+import { exportOptions } from "./exportUtils";
+import zip from "./StreamToZip";
+import { EventType } from "../../../../matrix-js-sdk/src/@types/event";
+
+
+export default class JSONExporter extends Exporter {
+ protected totalSize: number;
+
+ constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
+ super(room, exportType, exportOptions);
+ this.totalSize = 0;
+ window.addEventListener("beforeunload", this.onBeforeUnload)
+ }
+
+ protected wrapJSON(json: string): string {
+ const exportDate = formatFullDateNoDayNoTime(new Date());
+ const creator = this.room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
+ const creatorName = this.room?.getMember(creator)?.rawDisplayName || creator;
+ const topic = this.room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic || "";
+ const exporter = this.client.getUserId();
+ const exporterName = this.room?.getMember(exporter)?.rawDisplayName || exporter;
+ return `{
+"room_name": "${this.room.name}",
+"room_creator": "${creatorName}",
+"topic": "${topic}",
+"export_date": "${exportDate}",
+"exported_by": "${exporterName}",
+"messages": [
+${json}
+]
+}`
+ }
+
+ protected indentEachLine(string: string) {
+ const indent = ' ';
+ const regex = /^(?!\s*$)/gm;
+ return string.replace(regex, indent.repeat(1));
+ }
+
+ protected onBeforeUnload = (e: BeforeUnloadEvent) => {
+ e.preventDefault();
+ return e.returnValue = "Are you sure you want to exit during this export?";
+ }
+
+ protected async getJSONString(mxEv: MatrixEvent) {
+ if (this.exportOptions.attachmentsIncluded && this.isAttachment(mxEv)) {
+ try {
+ const blob = await this.getMediaBlob(mxEv);
+ this.totalSize += blob.size;
+ const filePath = this.getFilePath(mxEv);
+ this.addFile(filePath, blob);
+ if (this.totalSize > this.exportOptions.maxSize - 1024 * 1024) {
+ this.exportOptions.attachmentsIncluded = false;
+ }
+ } catch (err) {
+ console.log("Error fetching file: " + err);
+ }
+ }
+ const jsonEvent: any = mxEv.toJSON();
+ const clearEvent = mxEv.isEncrypted() ? jsonEvent.decrypted : jsonEvent;
+ const jsonString = JSON.stringify(clearEvent, null, 2);
+ return jsonString.length > 2 ? jsonString + ",\n" : "";
+ }
+
+ protected async createOutput(events: MatrixEvent[]) {
+ let content = "";
+ for (const event of events) {
+ if (!haveTileForEvent(event)) continue;
+ content += await this.getJSONString(event);
+ }
+ return this.wrapJSON(this.indentEachLine(content.slice(0, -2)));
+ }
+
+ public async export() {
+ console.info("Starting export process...");
+ console.info("Fetching events...");
+ const fetchStart = performance.now();
+ const res = await this.getRequiredEvents();
+ const fetchEnd = performance.now();
+
+ console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000} s`);
+ console.info("Creating Output...");
+
+ const text = await this.createOutput(res);
+
+ console.info("Writing to the file system...");
+ streamSaver.WritableStream = ponyfill.WritableStream
+
+ const fileName = `matrix-export-${formatFullDateNoDay(new Date())}.json`;
+ const files = this.files;
+ if (files.length) {
+ this.addFile("result.json", new Blob([text]));
+ const fileStream = streamSaver.createWriteStream(fileName.slice(0, -5) + ".zip");
+ const readableZipStream = zip({
+ start(ctrl) {
+ for (const file of files) ctrl.enqueue(file);
+ ctrl.close();
+ },
+ });
+ const writer = fileStream.getWriter()
+ const reader = readableZipStream.getReader()
+ await this.pumpToFileStream(reader, writer);
+ } else {
+ const fileStream = streamSaver.createWriteStream(fileName);
+ const writer = fileStream.getWriter()
+ const data = new TextEncoder().encode(text);
+ await writer.write(data);
+ await writer.close();
+ }
+
+ const exportEnd = performance.now();
+ console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ window.removeEventListener("beforeunload", this.onBeforeUnload);
+ }
+}
+
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 862fac3aa1..89a9ff4b98 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -5,7 +5,6 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay } from "../../DateUtils";
import { _t } from "../../languageHandler";
import * as ponyfill from "web-streams-polyfill/ponyfill"
-import "web-streams-polyfill/ponyfill" // to support blob.stream()
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 22457f926b..ba87dbdd67 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,5 +1,6 @@
import { Room } from "matrix-js-sdk/src/models/room";
import HTMLExporter from "./HtmlExport";
+import JSONExporter from "./JSONExport";
import PlainTextExporter from "./PlainTextExport";
export enum exportFormats {
@@ -33,6 +34,7 @@ const exportConversationalHistory = async (
await new HTMLExporter(room, exportType, exportOptions).export();
break;
case exportFormats.JSON:
+ await new JSONExporter(room, exportType, exportOptions).export();
break;
case exportFormats.LOGS:
await new PlainTextExporter(room, exportType, exportOptions).export();
From 70cc2b20d5dc8f035505d17fde47418d2eb385e6 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 24 Jun 2021 18:23:08 +0530
Subject: [PATCH 075/313] Fix auto import
---
src/utils/exportUtils/JSONExport.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 89cfbcb4ff..95903bfecd 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -8,7 +8,7 @@ import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import zip from "./StreamToZip";
-import { EventType } from "../../../../matrix-js-sdk/src/@types/event";
+import { EventType } from "matrix-js-sdk/src/@types/event";
export default class JSONExporter extends Exporter {
From ccd02c48b311f5b0ca5e7136e723c00578b720b2 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 24 Jun 2021 22:49:36 +0530
Subject: [PATCH 076/313] Nicer indentation
---
src/utils/exportUtils/JSONExport.ts | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 95903bfecd..af62428ae1 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -28,21 +28,21 @@ export default class JSONExporter extends Exporter {
const exporter = this.client.getUserId();
const exporterName = this.room?.getMember(exporter)?.rawDisplayName || exporter;
return `{
-"room_name": "${this.room.name}",
-"room_creator": "${creatorName}",
-"topic": "${topic}",
-"export_date": "${exportDate}",
-"exported_by": "${exporterName}",
-"messages": [
+ "room_name": "${this.room.name}",
+ "room_creator": "${creatorName}",
+ "topic": "${topic}",
+ "export_date": "${exportDate}",
+ "exported_by": "${exporterName}",
+ "messages": [
${json}
-]
+ ]
}`
}
protected indentEachLine(string: string) {
const indent = ' ';
const regex = /^(?!\s*$)/gm;
- return string.replace(regex, indent.repeat(1));
+ return string.replace(regex, indent.repeat(2));
}
protected onBeforeUnload = (e: BeforeUnloadEvent) => {
From 3718826e94bc163250c0f5ed397f4dd41f4a3e92 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 25 Jun 2021 11:16:59 +0530
Subject: [PATCH 077/313] refactor to share downloading code across all formats
---
src/components/views/rooms/RoomHeader.js | 4 +-
src/utils/exportUtils/Exporter.ts | 67 +++++++++++++++++++++---
src/utils/exportUtils/HtmlExport.tsx | 37 ++-----------
src/utils/exportUtils/JSONExport.ts | 43 ++++-----------
src/utils/exportUtils/PlainTextExport.ts | 44 +++-------------
src/utils/exportUtils/StreamToZip.ts | 2 +-
src/utils/exportUtils/exportUtils.ts | 4 +-
7 files changed, 83 insertions(+), 118 deletions(-)
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index f37145261c..d977b6d87b 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -84,11 +84,11 @@ export default class RoomHeader extends React.Component {
_exportConversationalHistory = async () => {
await exportConversationalHistory(
this.props.room,
- exportFormats.JSON,
+ exportFormats.PLAIN_TEXT,
exportTypes.START_DATE,
{
startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
- attachmentsIncluded: false,
+ attachmentsIncluded: true,
maxSize: 7 * 1024 * 1024, // 7 MB
},
);
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 5e766ff7ba..028b5c808e 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -1,3 +1,4 @@
+import streamSaver from "streamsaver";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClientPeg } from "../../MatrixClientPeg";
@@ -6,6 +7,9 @@ import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
import { MatrixClient } from "matrix-js-sdk";
+import streamToZIP from "./StreamToZip";
+import * as ponyfill from "web-streams-polyfill/ponyfill"
+import "web-streams-polyfill/ponyfill"; // to support streams API for older browsers
type FileStream = {
name: string,
@@ -15,6 +19,9 @@ type FileStream = {
export default abstract class Exporter {
protected files: FileStream[];
protected client: MatrixClient;
+ protected writer: WritableStreamDefaultWriter<any>;
+ protected fileStream: WritableStream<any>;
+
protected constructor(
protected room: Room,
protected exportType: exportTypes,
@@ -22,9 +29,16 @@ export default abstract class Exporter {
) {
this.files = [];
this.client = MatrixClientPeg.get();
+ window.addEventListener("beforeunload", this.onBeforeUnload);
+ window.addEventListener("onunload", this.abortExport);
}
- protected addFile = (filePath: string, blob: Blob) => {
+ protected onBeforeUnload(e: BeforeUnloadEvent) {
+ e.preventDefault();
+ return e.returnValue = "Are you sure you want to exit during this export?";
+ }
+
+ protected addFile(filePath: string, blob: Blob) {
const file = {
name: filePath,
stream: () => blob.stream(),
@@ -32,16 +46,53 @@ export default abstract class Exporter {
this.files.push(file);
}
- protected pumpToFileStream = async (reader: ReadableStreamDefaultReader, writer: WritableStreamDefaultWriter) => {
+ protected async downloadZIP() {
+ const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
+ //Support for firefox browser
+ streamSaver.WritableStream = ponyfill.WritableStream
+ //Create a writable stream to the directory
+ this.fileStream = streamSaver.createWriteStream(filename);
+
+ this.writer = this.fileStream.getWriter();
+ const files = this.files;
+
+ console.info("Generating a ZIP...");
+ const readableZipStream = streamToZIP({
+ start(ctrl) {
+ for (const file of files) ctrl.enqueue(file);
+ ctrl.close();
+ },
+ });
+
+ console.info("Writing to the file system...")
+
+ const reader = readableZipStream.getReader()
+ await this.pumpToFileStream(reader);
+ }
+
+ protected async downloadPlainText(fileName: string, text: string): Promise<any> {
+ this.fileStream = streamSaver.createWriteStream(fileName);
+ this.writer = this.fileStream.getWriter()
+ const data = new TextEncoder().encode(text);
+ await this.writer.write(data);
+ await this.writer.close();
+ }
+
+ protected async abortExport(): Promise<void> {
+ if (this.fileStream) await this.fileStream.abort();
+ if (this.writer) await this.writer.abort();
+ }
+
+ protected async pumpToFileStream(reader: ReadableStreamDefaultReader) {
const res = await reader.read();
- if (res.done) await writer.close();
+ if (res.done) await this.writer.close();
else {
- await writer.write(res.value);
- await this.pumpToFileStream(reader, writer)
+ await this.writer.write(res.value);
+ await this.pumpToFileStream(reader);
}
}
- protected setEventMetadata = (event: MatrixEvent) => {
+ protected setEventMetadata(event: MatrixEvent) {
const roomState = this.client.getRoom(this.room.roomId).currentState;
event.sender = roomState.getSentinelMember(
event.getSender(),
@@ -54,7 +105,7 @@ export default abstract class Exporter {
return event;
}
- protected getLimit = () => {
+ protected getLimit() {
let limit: number;
switch (this.exportType) {
case exportTypes.LAST_N_MESSAGES:
@@ -69,7 +120,7 @@ export default abstract class Exporter {
return limit;
}
- protected getRequiredEvents = async () : Promise<MatrixEvent[]> => {
+ protected async getRequiredEvents():Promise<MatrixEvent[]> {
const eventMapper = this.client.getEventMapper();
let prevToken: string|null = null;
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 2db4e243a7..6415f996db 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -1,5 +1,4 @@
import React from "react"
-import streamSaver from "streamsaver";
import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
@@ -7,11 +6,10 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { renderToStaticMarkup } from 'react-dom/server'
import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
-import { formatFullDateNoDay, formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
+import { formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
import { RoomPermalinkCreator } from "../permalinks/Permalinks";
import { _t } from "../../languageHandler";
import { EventType } from "matrix-js-sdk/src/@types/event";
-import * as ponyfill from "web-streams-polyfill/ponyfill"
import * as Avatar from "../../Avatar";
import EventTile, { haveTileForEvent } from "../../components/views/rooms/EventTile";
import DateSeparator from "../../components/views/messages/DateSeparator";
@@ -22,7 +20,6 @@ import exportIcons from "./exportIcons";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
-import zip from "./StreamToZip";
export default class HTMLExporter extends Exporter {
protected avatars: Map<string, boolean>;
@@ -38,12 +35,6 @@ export default class HTMLExporter extends Exporter {
this.mediaOmitText = !this.exportOptions.attachmentsIncluded
? _t("Media omitted")
: _t("Media omitted - file size limit exceeded");
- window.addEventListener("beforeunload", this.onBeforeUnload)
- }
-
- protected onBeforeUnload = (e: BeforeUnloadEvent) => {
- e.preventDefault();
- return e.returnValue = "Are you sure you want to exit during this export?";
}
protected async getRoomAvatar() {
@@ -267,7 +258,7 @@ export default class HTMLExporter extends Exporter {
return eventTileMarkup;
}
- protected createModifiedEvent = (text: string, mxEv: MatrixEvent) => {
+ protected createModifiedEvent(text: string, mxEv: MatrixEvent) {
const modifiedContent = {
msgtype: "m.text",
body: `*${text}*`,
@@ -351,34 +342,14 @@ export default class HTMLExporter extends Exporter {
this.addFile(`icons/${iconName}`, new Blob([exportIcons[iconName]]));
}
- const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
-
console.info("HTML creation successful!");
- //Support for firefox browser
- streamSaver.WritableStream = ponyfill.WritableStream
- //Create a writable stream to the directory
- const fileStream = streamSaver.createWriteStream(filename);
-
- const writer = fileStream.getWriter();
- const files = this.files;
-
- console.info("Generating a ZIP...");
- const readableZipStream = zip({
- start(ctrl) {
- for (const file of files) ctrl.enqueue(file);
- ctrl.close();
- },
- });
-
- console.info("Writing to file system...")
-
- const reader = readableZipStream.getReader()
- await this.pumpToFileStream(reader, writer);
+ await this.downloadZIP();
const exportEnd = performance.now();
console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
window.removeEventListener("beforeunload", this.onBeforeUnload);
+ window.removeEventListener("onunload", this.abortExport);
}
}
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index af62428ae1..b261b305f9 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -1,13 +1,10 @@
-import streamSaver from "streamsaver";
import Exporter from "./Exporter";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay, formatFullDateNoDayNoTime } from "../../DateUtils";
-import * as ponyfill from "web-streams-polyfill/ponyfill"
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
-import zip from "./StreamToZip";
import { EventType } from "matrix-js-sdk/src/@types/event";
@@ -17,7 +14,6 @@ export default class JSONExporter extends Exporter {
constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
super(room, exportType, exportOptions);
this.totalSize = 0;
- window.addEventListener("beforeunload", this.onBeforeUnload)
}
protected wrapJSON(json: string): string {
@@ -39,15 +35,10 @@ ${json}
}`
}
- protected indentEachLine(string: string) {
+ protected indentEachLine(JSONString: string, spaces: number) {
const indent = ' ';
const regex = /^(?!\s*$)/gm;
- return string.replace(regex, indent.repeat(2));
- }
-
- protected onBeforeUnload = (e: BeforeUnloadEvent) => {
- e.preventDefault();
- return e.returnValue = "Are you sure you want to exit during this export?";
+ return JSONString.replace(regex, indent.repeat(spaces));
}
protected async getJSONString(mxEv: MatrixEvent) {
@@ -76,7 +67,7 @@ ${json}
if (!haveTileForEvent(event)) continue;
content += await this.getJSONString(event);
}
- return this.wrapJSON(this.indentEachLine(content.slice(0, -2)));
+ return this.wrapJSON(this.indentEachLine(content.slice(0, -2), 2));
}
public async export() {
@@ -91,34 +82,18 @@ ${json}
const text = await this.createOutput(res);
- console.info("Writing to the file system...");
- streamSaver.WritableStream = ponyfill.WritableStream
-
- const fileName = `matrix-export-${formatFullDateNoDay(new Date())}.json`;
- const files = this.files;
- if (files.length) {
- this.addFile("result.json", new Blob([text]));
- const fileStream = streamSaver.createWriteStream(fileName.slice(0, -5) + ".zip");
- const readableZipStream = zip({
- start(ctrl) {
- for (const file of files) ctrl.enqueue(file);
- ctrl.close();
- },
- });
- const writer = fileStream.getWriter()
- const reader = readableZipStream.getReader()
- await this.pumpToFileStream(reader, writer);
+ if (this.files.length) {
+ this.addFile("export.json", new Blob([text]));
+ await this.downloadZIP();
} else {
- const fileStream = streamSaver.createWriteStream(fileName);
- const writer = fileStream.getWriter()
- const data = new TextEncoder().encode(text);
- await writer.write(data);
- await writer.close();
+ const fileName = `matrix-export-${formatFullDateNoDay(new Date())}.json`;
+ await this.downloadPlainText(fileName, text);
}
const exportEnd = performance.now();
console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
window.removeEventListener("beforeunload", this.onBeforeUnload);
+ window.removeEventListener("onunload", this.abortExport);
}
}
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 89a9ff4b98..61665d4646 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -1,35 +1,24 @@
-import streamSaver from "streamsaver";
import Exporter from "./Exporter";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay } from "../../DateUtils";
import { _t } from "../../languageHandler";
-import * as ponyfill from "web-streams-polyfill/ponyfill"
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import { textForEvent } from "../../TextForEvent";
-import zip from "./StreamToZip";
export default class PlainTextExporter extends Exporter {
protected totalSize: number;
protected mediaOmitText: string;
- private readonly fileDir: string;
constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
super(room, exportType, exportOptions);
this.totalSize = 0;
- this.fileDir = `matrix-export-${formatFullDateNoDay(new Date())}`;
this.mediaOmitText = !this.exportOptions.attachmentsIncluded
? _t("Media omitted")
: _t("Media omitted - file size limit exceeded");
- window.addEventListener("beforeunload", this.onBeforeUnload)
- }
-
- protected onBeforeUnload = (e: BeforeUnloadEvent) => {
- e.preventDefault();
- return e.returnValue = "Are you sure you want to exit during this export?";
}
protected textForReplyEvent = (ev : MatrixEvent) => {
@@ -90,12 +79,6 @@ export default class PlainTextExporter extends Exporter {
return content;
}
- protected getFileName = () => {
- if (this.exportOptions.attachmentsIncluded) {
- return `${this.room.name}.txt`;
- } else return `${this.fileDir}.txt`
- }
-
public async export() {
console.info("Starting export process...");
console.info("Fetching events...");
@@ -108,32 +91,17 @@ export default class PlainTextExporter extends Exporter {
const text = await this.createOutput(res);
- console.info("Writing to the file system...");
- streamSaver.WritableStream = ponyfill.WritableStream
-
- const files = this.files;
- if (files.length) {
- this.addFile(this.getFileName(), new Blob([text]));
- const fileStream = streamSaver.createWriteStream(`${this.fileDir}.zip`);
- const readableZipStream = zip({
- start(ctrl) {
- for (const file of files) ctrl.enqueue(file);
- ctrl.close();
- },
- });
- const writer = fileStream.getWriter()
- const reader = readableZipStream.getReader()
- await this.pumpToFileStream(reader, writer);
+ if (this.files.length) {
+ this.addFile("export.txt", new Blob([text]));
+ await this.downloadZIP();
} else {
- const fileStream = streamSaver.createWriteStream(`${this.fileDir}.txt`);
- const writer = fileStream.getWriter()
- const data = new TextEncoder().encode(text);
- await writer.write(data);
- await writer.close();
+ const fileName = `matrix-export-${formatFullDateNoDay(new Date())}.txt`;
+ await this.downloadPlainText(fileName, text);
}
const exportEnd = performance.now();
console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ window.removeEventListener("onunload", this.abortExport);
window.removeEventListener("beforeunload", this.onBeforeUnload);
}
}
diff --git a/src/utils/exportUtils/StreamToZip.ts b/src/utils/exportUtils/StreamToZip.ts
index b98e3e142f..a411d35190 100644
--- a/src/utils/exportUtils/StreamToZip.ts
+++ b/src/utils/exportUtils/StreamToZip.ts
@@ -101,7 +101,7 @@ const pump = (zipObj: ZipObj) => zipObj.reader ? zipObj.reader.read().then(chunk
}
}) : undefined;
-export default function ZIP(underlyingSource: UnderlyingSource) {
+export default function streamToZIP(underlyingSource: UnderlyingSource) {
const files = Object.create(null);
const filenames: string[] = [];
const encoder = new TextEncoder();
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index ba87dbdd67..0439d51ee2 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -6,7 +6,7 @@ import PlainTextExporter from "./PlainTextExport";
export enum exportFormats {
HTML = "HTML",
JSON = "JSON",
- LOGS = "LOGS",
+ PLAIN_TEXT = "PLAIN_TEXT",
}
export enum exportTypes {
@@ -36,7 +36,7 @@ const exportConversationalHistory = async (
case exportFormats.JSON:
await new JSONExporter(room, exportType, exportOptions).export();
break;
- case exportFormats.LOGS:
+ case exportFormats.PLAIN_TEXT:
await new PlainTextExporter(room, exportType, exportOptions).export();
break;
}
From 02f15d573ac9f98aa145706a0beaec2d6c2b3fbd Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 25 Jun 2021 11:52:26 +0530
Subject: [PATCH 078/313] Refactor
---
src/utils/exportUtils/Exporter.ts | 13 ++++++++-----
1 file changed, 8 insertions(+), 5 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 028b5c808e..2401bce0c8 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -48,15 +48,18 @@ export default abstract class Exporter {
protected async downloadZIP() {
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
- //Support for firefox browser
+
+ // Support for older browsers
streamSaver.WritableStream = ponyfill.WritableStream
- //Create a writable stream to the directory
+
+ // Create a writable stream to the directory
this.fileStream = streamSaver.createWriteStream(filename);
+ console.info("Generating a ZIP...");
+
this.writer = this.fileStream.getWriter();
const files = this.files;
- console.info("Generating a ZIP...");
const readableZipStream = streamToZIP({
start(ctrl) {
for (const file of files) ctrl.enqueue(file);
@@ -79,8 +82,8 @@ export default abstract class Exporter {
}
protected async abortExport(): Promise<void> {
- if (this.fileStream) await this.fileStream.abort();
- if (this.writer) await this.writer.abort();
+ await this.fileStream?.abort();
+ await this.writer?.abort();
}
protected async pumpToFileStream(reader: ReadableStreamDefaultReader) {
From abbe047bfdba27b8ecca2e4aa6a0c49f165464b8 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 25 Jun 2021 14:49:01 +0530
Subject: [PATCH 079/313] try catch for plain text
---
src/utils/exportUtils/Exporter.ts | 2 +-
src/utils/exportUtils/PlainTextExport.ts | 27 ++++++++++++++++--------
2 files changed, 19 insertions(+), 10 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 2401bce0c8..832d990f61 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -118,7 +118,7 @@ export default abstract class Exporter {
limit = 40;
break;
default:
- limit = Number.MAX_VALUE;
+ limit = 10**8;
}
return limit;
}
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 61665d4646..9852ea5301 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -56,16 +56,25 @@ export default class PlainTextExporter extends Exporter {
protected _textForEvent = async (mxEv: MatrixEvent) => {
const senderDisplayName = mxEv.sender && mxEv.sender.name ? mxEv.sender.name : mxEv.getSender();
- if (this.exportOptions.attachmentsIncluded && this.isAttachment(mxEv)) {
- const blob = await this.getMediaBlob(mxEv);
- this.totalSize += blob.size;
- const filePath = this.getFilePath(mxEv);
- this.addFile(filePath, blob);
- if (this.totalSize > this.exportOptions.maxSize - 1024 * 1024) {
- this.exportOptions.attachmentsIncluded = false;
- }
+ let mediaText = "";
+ if (this.isAttachment(mxEv)) {
+ if (this.exportOptions.attachmentsIncluded) {
+ try {
+ const blob = await this.getMediaBlob(mxEv);
+ this.totalSize += blob.size;
+ const filePath = this.getFilePath(mxEv);
+ mediaText = " (" + _t("File Attached") + ")";
+ this.addFile(filePath, blob);
+ if (this.totalSize > this.exportOptions.maxSize - 1024 * 1024) {
+ this.exportOptions.attachmentsIncluded = false;
+ }
+ } catch (error) {
+ mediaText = " (" + _t("Error fetching file") + ")";
+ console.log("Error fetching file" + error);
+ }
+ } else mediaText = ` (${this.mediaOmitText})`;
}
- if (this.isReply(mxEv)) return senderDisplayName + ": " + this.textForReplyEvent(mxEv);
+ if (this.isReply(mxEv)) return senderDisplayName + ": " + this.textForReplyEvent(mxEv) + mediaText;
else return textForEvent(mxEv);
}
From c885cd719fbd7a140b8f10c0ebecdae81e19d552 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 25 Jun 2021 14:58:59 +0530
Subject: [PATCH 080/313] i18n
---
src/i18n/strings/en_EN.json | 1 +
src/utils/exportUtils/PlainTextExport.ts | 2 +-
2 files changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index ca22dd04ab..d58a7e8831 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -741,6 +741,7 @@
"This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.": "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.",
"Topic: %(topic)s": "Topic: %(topic)s",
"Error fetching file": "Error fetching file",
+ "File Attached": "File Attached",
"Help us improve %(brand)s": "Help us improve %(brand)s",
"Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.": "Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.",
"Yes": "Yes",
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 9852ea5301..1777abc616 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -70,7 +70,7 @@ export default class PlainTextExporter extends Exporter {
}
} catch (error) {
mediaText = " (" + _t("Error fetching file") + ")";
- console.log("Error fetching file" + error);
+ console.log("Error fetching file " + error);
}
} else mediaText = ` (${this.mediaOmitText})`;
}
From 593f14beae8ba0cb412f2b9b62c2a41eef88eff9 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 25 Jun 2021 15:01:14 +0530
Subject: [PATCH 081/313] Append media text to text for event
---
src/utils/exportUtils/PlainTextExport.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 1777abc616..4ec2e81d9d 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -75,7 +75,7 @@ export default class PlainTextExporter extends Exporter {
} else mediaText = ` (${this.mediaOmitText})`;
}
if (this.isReply(mxEv)) return senderDisplayName + ": " + this.textForReplyEvent(mxEv) + mediaText;
- else return textForEvent(mxEv);
+ else return textForEvent(mxEv) + mediaText;
}
protected async createOutput(events: MatrixEvent[]) {
From 4af8ec4d408900c1464c526819b83343df781e28 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 25 Jun 2021 15:19:17 +0530
Subject: [PATCH 082/313] Explicitly declare file extensions for stickers and
log event fetching progress
---
src/utils/exportUtils/Exporter.ts | 5 +++--
src/utils/exportUtils/HtmlExport.tsx | 2 +-
src/utils/exportUtils/JSONExport.ts | 7 ++++---
src/utils/exportUtils/PlainTextExport.ts | 2 +-
4 files changed, 9 insertions(+), 7 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 832d990f61..0834cb7dc8 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -148,7 +148,7 @@ export default abstract class Exporter {
}
events.push(mxEv);
}
-
+ console.log("Fetched " + events.length + " events so far.");
prevToken = res.end;
}
// Reverse the events so that we preserve the order
@@ -216,7 +216,8 @@ export default abstract class Exporter {
fileDirectory = event.getType() === "m.sticker" ? "stickers" : "files";
}
const fileDate = formatFullDateNoDay(new Date(event.getTs()));
- const [fileName, fileExt] = this.splitFileName(event.getContent().body);
+ let [fileName, fileExt] = this.splitFileName(event.getContent().body);
+ if (event.getType() === "m.sticker") fileExt = ".png";
return fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 6415f996db..7b36439ad5 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -328,7 +328,7 @@ export default class HTMLExporter extends Exporter {
const res = await this.getRequiredEvents();
const fetchEnd = performance.now();
- console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000} s`);
+ console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
console.info("Creating HTML...");
const html = await this.createHTML(res);
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index b261b305f9..4612a37481 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -77,8 +77,8 @@ ${json}
const res = await this.getRequiredEvents();
const fetchEnd = performance.now();
- console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000} s`);
- console.info("Creating Output...");
+ console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
+ console.info("Creating output...");
const text = await this.createOutput(res);
@@ -91,7 +91,8 @@ ${json}
}
const exportEnd = performance.now();
- console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ console.info(`Export successful!`)
+ console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
window.removeEventListener("beforeunload", this.onBeforeUnload);
window.removeEventListener("onunload", this.abortExport);
}
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 4ec2e81d9d..f8bb6fe34e 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -95,7 +95,7 @@ export default class PlainTextExporter extends Exporter {
const res = await this.getRequiredEvents();
const fetchEnd = performance.now();
- console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000} s`);
+ console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
console.info("Creating Output...");
const text = await this.createOutput(res);
From 566e7bc8d6cb655a187c7cd6bcf89ec409d3e19e Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 25 Jun 2021 15:49:39 +0530
Subject: [PATCH 083/313] format
---
src/utils/exportUtils/HtmlExport.tsx | 9 ++++++---
src/utils/exportUtils/JSONExport.ts | 7 +++++--
src/utils/exportUtils/PlainTextExport.ts | 8 ++++++--
3 files changed, 17 insertions(+), 7 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 7b36439ad5..33d0e78915 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -324,20 +324,20 @@ export default class HTMLExporter extends Exporter {
public async export() {
console.info("Starting export process...");
console.info("Fetching events...");
+
const fetchStart = performance.now();
const res = await this.getRequiredEvents();
const fetchEnd = performance.now();
console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
- console.info("Creating HTML...");
+ console.info("Creating HTML...");
const html = await this.createHTML(res);
this.addFile("index.html", new Blob([html]));
this.addFile("css/style.css", new Blob([exportCSS]));
this.addFile("js/script.js", new Blob([exportJS]));
-
for (const iconName in exportIcons) {
this.addFile(`icons/${iconName}`, new Blob([exportIcons[iconName]]));
}
@@ -347,7 +347,10 @@ export default class HTMLExporter extends Exporter {
await this.downloadZIP();
const exportEnd = performance.now();
- console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+
+ console.info("Export successful!")
+ console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+
window.removeEventListener("beforeunload", this.onBeforeUnload);
window.removeEventListener("onunload", this.abortExport);
}
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 4612a37481..d25d96b2e4 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -73,13 +73,14 @@ ${json}
public async export() {
console.info("Starting export process...");
console.info("Fetching events...");
+
const fetchStart = performance.now();
const res = await this.getRequiredEvents();
const fetchEnd = performance.now();
console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
- console.info("Creating output...");
+ console.info("Creating output...");
const text = await this.createOutput(res);
if (this.files.length) {
@@ -91,8 +92,10 @@ ${json}
}
const exportEnd = performance.now();
- console.info(`Export successful!`)
+
+ console.info("Export successful!")
console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+
window.removeEventListener("beforeunload", this.onBeforeUnload);
window.removeEventListener("onunload", this.abortExport);
}
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index f8bb6fe34e..a207029955 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -91,13 +91,14 @@ export default class PlainTextExporter extends Exporter {
public async export() {
console.info("Starting export process...");
console.info("Fetching events...");
+
const fetchStart = performance.now();
const res = await this.getRequiredEvents();
const fetchEnd = performance.now();
console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
- console.info("Creating Output...");
+ console.info("Creating output...");
const text = await this.createOutput(res);
if (this.files.length) {
@@ -109,7 +110,10 @@ export default class PlainTextExporter extends Exporter {
}
const exportEnd = performance.now();
- console.info(`Export Successful! Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+
+ console.info("Export successful!")
+ console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+
window.removeEventListener("onunload", this.abortExport);
window.removeEventListener("beforeunload", this.onBeforeUnload);
}
From 4d6ad91e5262fbf917216cc36772243c7f57a2e9 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 25 Jun 2021 22:45:14 +0530
Subject: [PATCH 084/313] Add export option to right panel
---
res/css/views/right_panel/_RoomSummaryCard.scss | 4 ++++
res/img/element-icons/export.svg | 14 ++++++++++++++
.../views/right_panel/RoomSummaryCard.tsx | 3 +++
src/i18n/strings/en_EN.json | 1 +
4 files changed, 22 insertions(+)
create mode 100644 res/img/element-icons/export.svg
diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss
index dc7804d072..663682da2e 100644
--- a/res/css/views/right_panel/_RoomSummaryCard.scss
+++ b/res/css/views/right_panel/_RoomSummaryCard.scss
@@ -239,3 +239,7 @@ limitations under the License.
.mx_RoomSummaryCard_icon_settings::before {
mask-image: url('$(res)/img/element-icons/settings.svg');
}
+
+.mx_RoomSummaryCard_icon_export::before {
+ mask-image: url('$(res)/img/element-icons/export.svg');
+}
diff --git a/res/img/element-icons/export.svg b/res/img/element-icons/export.svg
new file mode 100644
index 0000000000..49899e9520
--- /dev/null
+++ b/res/img/element-icons/export.svg
@@ -0,0 +1,14 @@
+<svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+>
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47716 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12.7071 17.7071C12.6112 17.803 12.5007 17.8753 12.3828 17.9241L11.2929 17.7071L11.2925 17.7067L7.2929 13.7071C6.90237 13.3166 6.90237 12.6834 7.2929 12.2929C7.68342 11.9024 8.31658 11.9024 8.70711 12.2929L11 14.5858L11 7C11 6.44771 11.4477 6 12 6C12.5523 6 13 6.44771 13 7L13 14.5858L15.2929 12.2929C15.6834 11.9024 16.3166 11.9024 16.7071 12.2929C17.0976 12.6834 17.0976 13.3166 16.7071 13.7071L12.7071 17.7071ZM12.3828 17.9241L11.295 17.7092C11.4758 17.8889 11.7249 18 12 18C12.1356 18 12.2649 17.973 12.3828 17.9241Z"
+ fill="#C1C6CD"
+ />
+</svg>
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index 937037f644..28996305c7 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -279,6 +279,9 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
<Button className="mx_RoomSummaryCard_icon_settings" onClick={onRoomSettingsClick}>
{_t("Room settings")}
</Button>
+ <Button className="mx_RoomSummaryCard_icon_export" onClick = {() => {}}>
+ {_t("Export chat")}
+ </Button>
</Group>
{ SettingsStore.getValue(UIFeature.Widgets) && <AppsSection room={room} /> }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index d58a7e8831..189c686815 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1790,6 +1790,7 @@
"Show files": "Show files",
"Share room": "Share room",
"Room settings": "Room settings",
+ "Export chat": "Export chat",
"Trusted": "Trusted",
"Not trusted": "Not trusted",
"%(count)s verified sessions|other": "%(count)s verified sessions",
From c3dc51c4526eeb0c78b3c46bd59b4392781f74c1 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 26 Jun 2021 12:14:18 +0530
Subject: [PATCH 085/313] Create export dialog and async import export utils
---
src/components/views/dialogs/ExportDialog.tsx | 56 +++++++++++++++++++
.../views/right_panel/RoomSummaryCard.tsx | 9 ++-
src/components/views/rooms/RoomHeader.js | 21 -------
src/i18n/strings/en_EN.json | 4 +-
4 files changed, 66 insertions(+), 24 deletions(-)
create mode 100644 src/components/views/dialogs/ExportDialog.tsx
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
new file mode 100644
index 0000000000..22223848ea
--- /dev/null
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Room } from 'matrix-js-sdk/src';
+import { _t } from '../../../languageHandler';
+import { IDialogProps } from './IDialogProps';
+import BaseDialog from "./BaseDialog"
+import DialogButtons from "../elements/DialogButtons";
+
+interface IProps extends IDialogProps{
+ room: Room;
+}
+
+export default class ExportDialog extends React.PureComponent<IProps> {
+ onExportClick = async () => {
+ const {
+ default: exportConversationalHistory,
+ exportFormats,
+ exportTypes,
+ } = await import("../../../utils/exportUtils/exportUtils");
+
+ await exportConversationalHistory(
+ this.props.room,
+ exportFormats.PLAIN_TEXT,
+ exportTypes.START_DATE,
+ {
+ startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
+ attachmentsIncluded: true,
+ maxSize: 7 * 1024 * 1024, // 7 MB
+ },
+ );
+ };
+
+ onCancel = () => {
+ this.props.onFinished(false);
+ };
+
+ render() {
+ return (
+ <BaseDialog
+ title={_t("Export Chat")}
+ contentId='mx_Dialog_content'
+ hasCancel={true}
+ onFinished={this.props.onFinished}
+ fixedWidth={false}
+ >
+ <div className="mx_Dialog_content" id='mx_Dialog_content'>
+ Export
+ </div>
+ <DialogButtons
+ primaryButton={_t('Export')}
+ onPrimaryButtonClick={this.onExportClick}
+ onCancel={this.onCancel}
+ />
+ </BaseDialog>
+ );
+ }
+}
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index 28996305c7..0cc5bf8e7f 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -47,6 +47,7 @@ import {useRoomMemberCount} from "../../../hooks/useRoomMembers";
import { Container, MAX_PINNED, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
import RoomName from "../elements/RoomName";
import UIStore from "../../../stores/UIStore";
+import ExportDialog from "../dialogs/ExportDialog";
interface IProps {
room: Room;
@@ -233,6 +234,12 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
});
};
+ const onRoomExportClick = () => {
+ Modal.createTrackedDialog('export room dialog', '', ExportDialog, {
+ room,
+ });
+ };
+
const isRoomEncrypted = useIsEncrypted(cli, room);
const roomContext = useContext(RoomContext);
const e2eStatus = roomContext.e2eStatus;
@@ -279,7 +286,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
<Button className="mx_RoomSummaryCard_icon_settings" onClick={onRoomSettingsClick}>
{_t("Room settings")}
</Button>
- <Button className="mx_RoomSummaryCard_icon_export" onClick = {() => {}}>
+ <Button className="mx_RoomSummaryCard_icon_export" onClick = {onRoomExportClick}>
{_t("Export chat")}
</Button>
</Group>
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index d977b6d87b..0e1a7bc60b 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -31,7 +31,6 @@ import RoomTopic from "../elements/RoomTopic";
import RoomName from "../elements/RoomName";
import { PlaceCallType } from "../../../CallHandler";
import { replaceableComponent } from "../../../utils/replaceableComponent";
-import exportConversationalHistory, { exportTypes, exportFormats } from '../../../utils/exportUtils/exportUtils';
@replaceableComponent("views.rooms.RoomHeader")
@@ -80,20 +79,6 @@ export default class RoomHeader extends React.Component {
this.forceUpdate();
}, 500);
-
- _exportConversationalHistory = async () => {
- await exportConversationalHistory(
- this.props.room,
- exportFormats.PLAIN_TEXT,
- exportTypes.START_DATE,
- {
- startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
- attachmentsIncluded: true,
- maxSize: 7 * 1024 * 1024, // 7 MB
- },
- );
- }
-
render() {
let searchStatus = null;
@@ -197,14 +182,8 @@ export default class RoomHeader extends React.Component {
title={_t("Video call")} />;
}
- const exportButton = <AccessibleTooltipButton
- className="mx_RoomHeader_button mx_ImageView_button_download"
- onClick={this._exportConversationalHistory}
- title={_t("Export conversation")} />;
-
const rightRow =
<div className="mx_RoomHeader_buttons">
- { exportButton }
{ videoCallButton }
{ voiceCallButton }
{ forgetButton }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 189c686815..00212fa137 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1593,7 +1593,6 @@
"Search": "Search",
"Voice call": "Voice call",
"Video call": "Video call",
- "Export conversation": "Export conversation",
"Start a Conversation": "Start a Conversation",
"Open dial pad": "Open dial pad",
"Invites": "Invites",
@@ -2250,6 +2249,8 @@
"There was an error updating your community. The server is unable to process your request.": "There was an error updating your community. The server is unable to process your request.",
"Update community": "Update community",
"An error has occurred.": "An error has occurred.",
+ "Export Chat": "Export Chat",
+ "Export": "Export",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
"Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.",
@@ -2978,7 +2979,6 @@
"The exported file will allow anyone who can read it to decrypt any encrypted messages that you can see, so you should be careful to keep it secure. To help with this, you should enter a passphrase below, which will be used to encrypt the exported data. It will only be possible to import the data by using the same passphrase.": "The exported file will allow anyone who can read it to decrypt any encrypted messages that you can see, so you should be careful to keep it secure. To help with this, you should enter a passphrase below, which will be used to encrypt the exported data. It will only be possible to import the data by using the same passphrase.",
"Enter passphrase": "Enter passphrase",
"Confirm passphrase": "Confirm passphrase",
- "Export": "Export",
"Import room keys": "Import room keys",
"This process allows you to import encryption keys that you had previously exported from another Matrix client. You will then be able to decrypt any messages that the other client could decrypt.": "This process allows you to import encryption keys that you had previously exported from another Matrix client. You will then be able to decrypt any messages that the other client could decrypt.",
"The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.": "The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.",
From 92e34c7993b5303050676705667027e81b335a70 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 26 Jun 2021 13:04:10 +0530
Subject: [PATCH 086/313] Format dropdown
---
src/components/views/dialogs/ExportDialog.tsx | 95 +++++++++++--------
.../views/right_panel/RoomSummaryCard.tsx | 5 +-
src/i18n/strings/en_EN.json | 1 +
src/utils/exportUtils/exportUtils.ts | 20 +++-
4 files changed, 76 insertions(+), 45 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 22223848ea..7aba38c5c0 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -1,56 +1,75 @@
-import React from 'react';
-import { Room } from 'matrix-js-sdk/src';
-import { _t } from '../../../languageHandler';
-import { IDialogProps } from './IDialogProps';
-import BaseDialog from "./BaseDialog"
+import React, { useState } from "react";
+import { Room } from "matrix-js-sdk/src";
+import { _t } from "../../../languageHandler";
+import { IDialogProps } from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
import DialogButtons from "../elements/DialogButtons";
+import Dropdown from "../elements/Dropdown";
+import exportConversationalHistory, {
+ exportFormats,
+ exportTypes,
+} from "../../../utils/exportUtils/exportUtils";
-interface IProps extends IDialogProps{
+interface IProps extends IDialogProps {
room: Room;
}
-export default class ExportDialog extends React.PureComponent<IProps> {
- onExportClick = async () => {
- const {
- default: exportConversationalHistory,
- exportFormats,
- exportTypes,
- } = await import("../../../utils/exportUtils/exportUtils");
-
+const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
+ const [format, setFormat] = useState("HTML");
+ const onExportClick = async () => {
await exportConversationalHistory(
- this.props.room,
+ room,
exportFormats.PLAIN_TEXT,
exportTypes.START_DATE,
{
- startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
+ startDate: parseInt(
+ new Date("2021.05.20").getTime().toFixed(0),
+ ),
attachmentsIncluded: true,
maxSize: 7 * 1024 * 1024, // 7 MB
},
);
};
- onCancel = () => {
- this.props.onFinished(false);
+ const onCancel = () => {
+ onFinished(false);
};
- render() {
- return (
- <BaseDialog
- title={_t("Export Chat")}
- contentId='mx_Dialog_content'
- hasCancel={true}
- onFinished={this.props.onFinished}
- fixedWidth={false}
+ const options = Object.keys(exportFormats).map(key => {
+ return <div key={key}>
+ { exportFormats[key] }
+ </div>
+ })
+
+ return (
+ <BaseDialog
+ title={_t("Export Chat")}
+ contentId="mx_Dialog_content"
+ hasCancel={true}
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <p>
+ {_t(
+ "Select from the options below to export chats from your timeline",
+ )}
+ </p>
+
+ <Dropdown
+ onOptionChange={(key: string) => { setFormat(key) }}
+ value={format}
+ label={_t("Export formats")}
>
- <div className="mx_Dialog_content" id='mx_Dialog_content'>
- Export
- </div>
- <DialogButtons
- primaryButton={_t('Export')}
- onPrimaryButtonClick={this.onExportClick}
- onCancel={this.onCancel}
- />
- </BaseDialog>
- );
- }
-}
+ { options }
+ </Dropdown>
+
+ <DialogButtons
+ primaryButton={_t("Export")}
+ onPrimaryButtonClick={onExportClick}
+ onCancel={onCancel}
+ />
+ </BaseDialog>
+ );
+};
+
+export default ExportDialog;
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index 0cc5bf8e7f..5dd5790bfb 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -47,7 +47,6 @@ import {useRoomMemberCount} from "../../../hooks/useRoomMembers";
import { Container, MAX_PINNED, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
import RoomName from "../elements/RoomName";
import UIStore from "../../../stores/UIStore";
-import ExportDialog from "../dialogs/ExportDialog";
interface IProps {
room: Room;
@@ -234,7 +233,9 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
});
};
- const onRoomExportClick = () => {
+ const onRoomExportClick = async () => {
+ const {default: ExportDialog} = await import("../dialogs/ExportDialog");
+
Modal.createTrackedDialog('export room dialog', '', ExportDialog, {
room,
});
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 00212fa137..9ab4a77c9f 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2250,6 +2250,7 @@
"Update community": "Update community",
"An error has occurred.": "An error has occurred.",
"Export Chat": "Export Chat",
+ "Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
"Export": "Export",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 0439d51ee2..7a1d4a9f11 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,19 +1,29 @@
import { Room } from "matrix-js-sdk/src/models/room";
+import { _t } from "../../languageHandler";
import HTMLExporter from "./HtmlExport";
import JSONExporter from "./JSONExport";
import PlainTextExporter from "./PlainTextExport";
+_t("HTML");
+_t("JSON");
+_t("Plain Text");
+
export enum exportFormats {
HTML = "HTML",
JSON = "JSON",
- PLAIN_TEXT = "PLAIN_TEXT",
+ PLAIN_TEXT = "Plain Text",
}
+_t("Current Timeline");
+_t("From the beginning")
+_t("From a specific date")
+_t("Last n messages");
+
export enum exportTypes {
- TIMELINE = "TIMELINE",
- BEGINNING = "BEGINNING",
- START_DATE = "START_DATE",
- LAST_N_MESSAGES = "LAST_N_MESSAGES",
+ TIMELINE = "Current Timeline",
+ BEGINNING = "From the beginning",
+ START_DATE = "From a specific date",
+ LAST_N_MESSAGES = "Last n messages",
}
export interface exportOptions {
From e505646f2189965772e4f8c6b5fb7d3da7a87a66 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 26 Jun 2021 21:53:50 +0530
Subject: [PATCH 087/313] Finish dialog implementation of export settings
---
res/css/_components.scss | 1 +
res/css/views/dialogs/_ExportDialog.scss | 22 ++++
src/components/views/dialogs/ExportDialog.tsx | 107 ++++++++++++++----
src/components/views/elements/Field.tsx | 2 +-
src/i18n/strings/en_EN.json | 11 ++
src/utils/exportUtils/exportUtils.ts | 43 ++++---
6 files changed, 151 insertions(+), 35 deletions(-)
create mode 100644 res/css/views/dialogs/_ExportDialog.scss
diff --git a/res/css/_components.scss b/res/css/_components.scss
index ec3af8655e..c0fade8e5e 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -75,6 +75,7 @@
@import "./views/dialogs/_DeactivateAccountDialog.scss";
@import "./views/dialogs/_DevtoolsDialog.scss";
@import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
+@import "./views/dialogs/_ExportDialog.scss";
@import "./views/dialogs/_FeedbackDialog.scss";
@import "./views/dialogs/_ForwardDialog.scss";
@import "./views/dialogs/_GroupAddressPicker.scss";
diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
new file mode 100644
index 0000000000..69b76221bb
--- /dev/null
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -0,0 +1,22 @@
+.mx_ExportDialog_subheading {
+ font-size: $font-16px;
+ display: block;
+ font-family: $font-family;
+ font-weight: 600;
+ color: $primary-fg-color;
+ margin-top: 18px;
+ margin-bottom: 12px;
+}
+
+.mx_ExportDialog .mx_RadioButton > .mx_RadioButton_content {
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+
+.mx_ExportDialog .mx_Field {
+ width: 256px;
+}
+
+.mx_ExportDialog .mx_Field_postfix {
+ padding: 9px 10px;
+}
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 7aba38c5c0..8cefffaa9f 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -4,10 +4,14 @@ import { _t } from "../../../languageHandler";
import { IDialogProps } from "./IDialogProps";
import BaseDialog from "./BaseDialog";
import DialogButtons from "../elements/DialogButtons";
-import Dropdown from "../elements/Dropdown";
+import Field from "../elements/Field";
+import StyledRadioGroup from "../elements/StyledRadioGroup";
+import StyledCheckbox from "../elements/StyledCheckbox";
import exportConversationalHistory, {
exportFormats,
exportTypes,
+ textForFormat,
+ textForType,
} from "../../../utils/exportUtils/exportUtils";
interface IProps extends IDialogProps {
@@ -15,18 +19,21 @@ interface IProps extends IDialogProps {
}
const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
- const [format, setFormat] = useState("HTML");
+ const [exportFormat, setExportFormat] = useState("HTML");
+ const [exportType, setExportType] = useState("TIMELINE");
+ const [includeAttachments, setAttachments] = useState(false);
+ const [numberOfMessages, setNumberOfMessages] = useState<number | null>();
+ const [sizeLimit, setSizeLimit] = useState<number | null>(8);
+
const onExportClick = async () => {
await exportConversationalHistory(
room,
- exportFormats.PLAIN_TEXT,
- exportTypes.START_DATE,
+ exportFormats[exportFormat],
+ exportTypes[exportType],
{
- startDate: parseInt(
- new Date("2021.05.20").getTime().toFixed(0),
- ),
- attachmentsIncluded: true,
- maxSize: 7 * 1024 * 1024, // 7 MB
+ numberOfMessages,
+ attachmentsIncluded: includeAttachments,
+ maxSize: sizeLimit * 1024 * 1024,
},
);
};
@@ -35,15 +42,40 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
onFinished(false);
};
- const options = Object.keys(exportFormats).map(key => {
- return <div key={key}>
- { exportFormats[key] }
- </div>
- })
+ const exportFormatOptions = Object.keys(exportFormats).map((format) => ({
+ value: format,
+ label: textForFormat(format),
+ }));
+
+ const exportTypeOptions = Object.keys(exportTypes).map((type) => {
+ return (
+ <option key={type} value={type}>
+ {textForType(type)}
+ </option>
+ );
+ });
+
+ let MessageCount = null;
+ if (exportType === exportTypes.LAST_N_MESSAGES) {
+ MessageCount = (
+ <Field
+ element="input"
+ value={numberOfMessages}
+ label={_t("Number of messages")}
+ onChange={(e) => {
+ setNumberOfMessages(parseInt(e.target.value));
+ }}
+ type="number"
+ />
+ );
+ }
+
+ const sizePostFix = (<span title={_t("MB")}>{_t("MB")}</span>);
return (
<BaseDialog
title={_t("Export Chat")}
+ className="mx_ExportDialog"
contentId="mx_Dialog_content"
hasCancel={true}
onFinished={onFinished}
@@ -55,13 +87,48 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
)}
</p>
- <Dropdown
- onOptionChange={(key: string) => { setFormat(key) }}
- value={format}
- label={_t("Export formats")}
+ <span className="mx_ExportDialog_subheading">{_t("Format")}</span>
+
+ <StyledRadioGroup
+ name="feedbackRating"
+ value={exportFormat}
+ onChange={(key) => setExportFormat(key)}
+ definitions={exportFormatOptions}
+ />
+
+ <span className="mx_ExportDialog_subheading">{_t("Messages")}</span>
+
+ <Field
+ element="select"
+ value={exportType}
+ onChange={(e) => {
+ setExportType(e.target.value);
+ }}
>
- { options }
- </Dropdown>
+ {exportTypeOptions}
+ </Field>
+ { MessageCount }
+
+ <span className="mx_ExportDialog_subheading">
+ {_t("Size Limit")}
+ </span>
+
+ <Field
+ type="number"
+ autoComplete="off"
+ value={sizeLimit}
+ postfixComponent={sizePostFix}
+ onChange={(e) => setSizeLimit(e.target.value)}
+ />
+
+ <StyledCheckbox
+ checked={includeAttachments}
+ onChange={(e) =>
+ setAttachments((e.target as HTMLInputElement).checked)
+ }
+ >
+ {_t("Include Attachments")}
+ </StyledCheckbox>
<DialogButtons
primaryButton={_t("Export")}
diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index 1373c2df0e..ca02df71a9 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -77,7 +77,7 @@ export interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElemen
// The element to create. Defaults to "input".
element?: "input";
// The input's value. This is a controlled component, so the value is required.
- value: string;
+ value: string | number;
}
interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 9ab4a77c9f..cb28f2b07b 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -735,6 +735,12 @@
"Invite to %(spaceName)s": "Invite to %(spaceName)s",
"Share your public space": "Share your public space",
"Unknown App": "Unknown App",
+ "HTML": "HTML",
+ "JSON": "JSON",
+ "Plain Text": "Plain Text",
+ "From the beginning": "From the beginning",
+ "For a number of messages": "For a number of messages",
+ "Current Timeline": "Current Timeline",
"Media omitted": "Media omitted",
"Media omitted - file size limit exceeded": "Media omitted - file size limit exceeded",
"%(creatorName)s created this room.": "%(creatorName)s created this room.",
@@ -2249,8 +2255,13 @@
"There was an error updating your community. The server is unable to process your request.": "There was an error updating your community. The server is unable to process your request.",
"Update community": "Update community",
"An error has occurred.": "An error has occurred.",
+ "Number of messages": "Number of messages",
+ "MB": "MB",
"Export Chat": "Export Chat",
"Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
+ "Format": "Format",
+ "Size Limit": "Size Limit",
+ "Include Attachments": "Include Attachments",
"Export": "Export",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 7a1d4a9f11..37d0bbc524 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -4,26 +4,41 @@ import HTMLExporter from "./HtmlExport";
import JSONExporter from "./JSONExport";
import PlainTextExporter from "./PlainTextExport";
-_t("HTML");
-_t("JSON");
-_t("Plain Text");
-
export enum exportFormats {
HTML = "HTML",
JSON = "JSON",
- PLAIN_TEXT = "Plain Text",
+ PLAIN_TEXT = "PLAIN_TEXT",
}
-_t("Current Timeline");
-_t("From the beginning")
-_t("From a specific date")
-_t("Last n messages");
-
export enum exportTypes {
- TIMELINE = "Current Timeline",
- BEGINNING = "From the beginning",
- START_DATE = "From a specific date",
- LAST_N_MESSAGES = "Last n messages",
+ TIMELINE = "TIMELINE",
+ BEGINNING = "BEGINNING",
+ // START_DATE = "START_DATE",
+ LAST_N_MESSAGES = "LAST_N_MESSAGES",
+}
+
+export const textForFormat = (format: string) => {
+ switch (format) {
+ case exportFormats.HTML:
+ return _t("HTML");
+ case exportFormats.JSON:
+ return _t("JSON");
+ case exportFormats.PLAIN_TEXT:
+ return _t("Plain Text");
+ }
+}
+
+export const textForType = (type: string) => {
+ switch (type) {
+ case exportTypes.BEGINNING:
+ return _t("From the beginning");
+ case exportTypes.LAST_N_MESSAGES:
+ return _t("For a number of messages");
+ case exportTypes.TIMELINE:
+ return _t("Current Timeline");
+ // case exportTypes.START_DATE:
+ // return _t("From a specific date");
+ }
}
export interface exportOptions {
From 46f34ba4554dc59df0a360dff03c1e8a7d553eb6 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 26 Jun 2021 23:07:38 +0530
Subject: [PATCH 088/313] Add validation
---
src/components/views/dialogs/ExportDialog.tsx | 98 +++++++++++++++++--
src/i18n/strings/en_EN.json | 5 +
2 files changed, 96 insertions(+), 7 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 8cefffaa9f..c4eb031aa5 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
import { Room } from "matrix-js-sdk/src";
import { _t } from "../../../languageHandler";
import { IDialogProps } from "./IDialogProps";
@@ -13,6 +13,7 @@ import exportConversationalHistory, {
textForFormat,
textForType,
} from "../../../utils/exportUtils/exportUtils";
+import { IFieldState, IValidationResult } from "../elements/Validation";
interface IProps extends IDialogProps {
room: Room;
@@ -22,10 +23,26 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [exportFormat, setExportFormat] = useState("HTML");
const [exportType, setExportType] = useState("TIMELINE");
const [includeAttachments, setAttachments] = useState(false);
- const [numberOfMessages, setNumberOfMessages] = useState<number | null>();
+ const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
+ const [sizeLimitRef, messageCountRef] = [useRef<any>(), useRef<any>()];
const onExportClick = async () => {
+ const isValidSize = await sizeLimitRef.current.validate({
+ focused: false,
+ });
+ if (!isValidSize) {
+ sizeLimitRef.current.validate({ focused: true });
+ return;
+ }
+ if (exportType === exportTypes.LAST_N_MESSAGES) {
+ const isValidNumberOfMessages =
+ await messageCountRef.current.validate({ focused: false });
+ if (!isValidNumberOfMessages) {
+ messageCountRef.current.validate({ focused: true });
+ return;
+ }
+ }
await exportConversationalHistory(
room,
exportFormats[exportFormat],
@@ -38,6 +55,69 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
);
};
+ const onValidateSize = async ({
+ value,
+ }: Pick<IFieldState, "value">): Promise<IValidationResult> => {
+ const parsedSize = parseFloat(value);
+ const min = 1;
+ const max = 4000;
+
+ if (isNaN(parsedSize)) {
+ return { valid: false, feedback: _t("Size must be a number") };
+ }
+
+ if (!(min <= parsedSize && parsedSize <= max)) {
+ return {
+ valid: false,
+ feedback: _t(
+ "Size can only be between %(min)s MB and %(max)s MB",
+ { min, max },
+ ),
+ };
+ }
+
+ return {
+ valid: true,
+ feedback: _t("Enter size between %(min)s MB and %(max)s MB", {
+ min,
+ max,
+ }),
+ };
+ };
+
+ const onValidateNumberOfMessages = async ({
+ value,
+ }: Pick<IFieldState, "value">): Promise<IValidationResult> => {
+ const parsedSize = parseFloat(value);
+ const min = 1;
+ const max = 10 ** 8;
+
+ if (isNaN(parsedSize)) {
+ return {
+ valid: false,
+ feedback: _t("Number of messages must be a number"),
+ };
+ }
+
+ if (!(min <= parsedSize && parsedSize <= max)) {
+ return {
+ valid: false,
+ feedback: _t(
+ "Number of messages can only be between %(min)s and %(max)s",
+ { min, max },
+ ),
+ };
+ }
+
+ return {
+ valid: true,
+ feedback: _t("Enter a number between %(min)s and %(max)s", {
+ min,
+ max,
+ }),
+ };
+ };
+
const onCancel = () => {
onFinished(false);
};
@@ -54,23 +134,24 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
</option>
);
});
-
let MessageCount = null;
if (exportType === exportTypes.LAST_N_MESSAGES) {
MessageCount = (
<Field
element="input"
+ type="number"
value={numberOfMessages}
+ ref={messageCountRef}
+ onValidate={onValidateNumberOfMessages}
label={_t("Number of messages")}
onChange={(e) => {
setNumberOfMessages(parseInt(e.target.value));
}}
- type="number"
/>
);
}
- const sizePostFix = (<span title={_t("MB")}>{_t("MB")}</span>);
+ const sizePostFix = <span title={_t("MB")}>{_t("MB")}</span>;
return (
<BaseDialog
@@ -107,7 +188,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
>
{exportTypeOptions}
</Field>
- { MessageCount }
+ {MessageCount}
<span className="mx_ExportDialog_subheading">
{_t("Size Limit")}
@@ -116,9 +197,12 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
<Field
type="number"
autoComplete="off"
+ onValidate={onValidateSize}
+ element="input"
+ ref={sizeLimitRef}
value={sizeLimit}
postfixComponent={sizePostFix}
- onChange={(e) => setSizeLimit(e.target.value)}
+ onChange={(e) => setSizeLimit(parseInt(e.target.value))}
/>
<StyledCheckbox
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index cb28f2b07b..8af51cb580 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2255,6 +2255,11 @@
"There was an error updating your community. The server is unable to process your request.": "There was an error updating your community. The server is unable to process your request.",
"Update community": "Update community",
"An error has occurred.": "An error has occurred.",
+ "Size can only be between %(min)s MB and %(max)s MB": "Size can only be between %(min)s MB and %(max)s MB",
+ "Enter size between %(min)s MB and %(max)s MB": "Enter size between %(min)s MB and %(max)s MB",
+ "Number of messages must be a number": "Number of messages must be a number",
+ "Number of messages can only be between %(min)s and %(max)s": "Number of messages can only be between %(min)s and %(max)s",
+ "Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
"Number of messages": "Number of messages",
"MB": "MB",
"Export Chat": "Export Chat",
From 55ffb318e5f9cd34435f3fe5cad053fbfbb43ce9 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 26 Jun 2021 23:08:37 +0530
Subject: [PATCH 089/313] Change format order
---
src/utils/exportUtils/exportUtils.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 37d0bbc524..132783fdcc 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -6,8 +6,8 @@ import PlainTextExporter from "./PlainTextExport";
export enum exportFormats {
HTML = "HTML",
- JSON = "JSON",
PLAIN_TEXT = "PLAIN_TEXT",
+ JSON = "JSON",
}
export enum exportTypes {
From 685441baf55053706768b5a259e6056f286a28d8 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 26 Jun 2021 23:40:35 +0530
Subject: [PATCH 090/313] Remove avatarForExport string
---
src/components/views/avatars/MemberAvatar.tsx | 3 +--
src/utils/exportUtils/HtmlExport.tsx | 21 ++++++++++++-------
2 files changed, 15 insertions(+), 9 deletions(-)
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 81b75cb450..61723efb21 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -67,8 +67,7 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
private static getState(props: IProps): IState {
if (props.member?.name) {
let imageUrl = null;
- if (props.forExport && props.member.getMxcAvatarUrl()) imageUrl = "avatarForExport";
- else if (props.member.getMxcAvatarUrl()) {
+ if (props.member.getMxcAvatarUrl()) {
imageUrl = mediaFromMxc(props.member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
props.width,
props.height,
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 33d0e78915..f69cb4fb7f 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -190,19 +190,26 @@ export default class HTMLExporter extends Exporter {
</html>`
}
- protected hasAvatar(event: MatrixEvent): boolean {
+ protected getAvatarURL(event: MatrixEvent): string {
const member = event.sender;
- return !!member.getMxcAvatarUrl();
+ return (
+ member.getMxcAvatarUrl() &&
+ mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
+ 30,
+ 30,
+ "crop",
+ )
+ );
}
protected async saveAvatarIfNeeded(event: MatrixEvent) {
const member = event.sender;
- const avatarUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(30, 30, "crop");
if (!this.avatars.has(member.userId)) {
+ const avatarUrl = this.getAvatarURL(event);
this.avatars.set(member.userId, true);
const image = await fetch(avatarUrl);
const blob = await image.blob();
- this.addFile(`users/${member.userId.replace(/:/g, '-')}`, blob);
+ this.addFile(`users/${member.userId.replace(/:/g, '-')}.png`, blob);
}
}
@@ -218,7 +225,7 @@ export default class HTMLExporter extends Exporter {
}
protected async getEventTile(mxEv: MatrixEvent, continuation: boolean, filePath?: string) {
- const hasAvatar = this.hasAvatar(mxEv);
+ const hasAvatar = !!this.getAvatarURL(mxEv);
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
const eventTile = <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
@@ -251,8 +258,8 @@ export default class HTMLExporter extends Exporter {
if (filePath) eventTileMarkup = eventTileMarkup.replace(/(src=|href=)"forExport"/g, `$1"${filePath}"`);
if (hasAvatar) {
eventTileMarkup = eventTileMarkup.replace(
- /src="avatarForExport"/g,
- `src="users/${mxEv.sender.userId.replace(/:/g, "-")}"`,
+ encodeURI(this.getAvatarURL(mxEv)).replace(/&/g, '&'),
+ `users/${mxEv.sender.userId.replace(/:/g, "-")}.png`,
);
}
return eventTileMarkup;
From d46fe678b0e355148176af2414b25f1a72260ed0 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sun, 27 Jun 2021 20:55:54 +0530
Subject: [PATCH 091/313] Handle export cancellation
---
src/components/views/dialogs/ExportDialog.tsx | 66 +++++++++++++++----
src/utils/exportUtils/Exporter.ts | 30 ++++++++-
src/utils/exportUtils/HtmlExport.tsx | 15 +++--
src/utils/exportUtils/JSONExport.ts | 12 ++--
src/utils/exportUtils/PlainTextExport.ts | 14 ++--
src/utils/exportUtils/exportUtils.ts | 24 -------
6 files changed, 107 insertions(+), 54 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index c4eb031aa5..ed567c43e1 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -7,13 +7,17 @@ import DialogButtons from "../elements/DialogButtons";
import Field from "../elements/Field";
import StyledRadioGroup from "../elements/StyledRadioGroup";
import StyledCheckbox from "../elements/StyledCheckbox";
-import exportConversationalHistory, {
+import {
exportFormats,
exportTypes,
textForFormat,
textForType,
} from "../../../utils/exportUtils/exportUtils";
import { IFieldState, IValidationResult } from "../elements/Validation";
+import HTMLExporter from "../../../utils/exportUtils/HtmlExport";
+import JSONExporter from "../../../utils/exportUtils/JSONExport";
+import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
+import { useStateCallback } from "../../../hooks/useStateCallback";
interface IProps extends IDialogProps {
room: Room;
@@ -26,6 +30,52 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
const [sizeLimitRef, messageCountRef] = [useRef<any>(), useRef<any>()];
+ const [Exporter, setExporter] = useStateCallback(
+ null,
+ async (Exporter: HTMLExporter | PlainTextExporter | JSONExporter) => {
+ await Exporter?.export();
+ },
+ );
+
+ const startExport = async () => {
+ const exportOptions = {
+ numberOfMessages,
+ attachmentsIncluded: includeAttachments,
+ maxSize: sizeLimit * 1024 * 1024,
+ };
+ switch (exportFormat) {
+ case exportFormats.HTML:
+ setExporter(
+ new HTMLExporter(
+ room,
+ exportTypes[exportType],
+ exportOptions,
+ ),
+ );
+ break;
+ case exportFormats.JSON:
+ setExporter(
+ new JSONExporter(
+ room,
+ exportTypes[exportType],
+ exportOptions,
+ ),
+ );
+ break;
+ case exportFormats.PLAIN_TEXT:
+ setExporter(
+ new PlainTextExporter(
+ room,
+ exportTypes[exportType],
+ exportOptions,
+ ),
+ );
+ break;
+ default:
+ console.error("Unknown export format");
+ return;
+ }
+ };
const onExportClick = async () => {
const isValidSize = await sizeLimitRef.current.validate({
@@ -43,16 +93,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
return;
}
}
- await exportConversationalHistory(
- room,
- exportFormats[exportFormat],
- exportTypes[exportType],
- {
- numberOfMessages,
- attachmentsIncluded: includeAttachments,
- maxSize: sizeLimit * 1024 * 1024,
- },
- );
+ await startExport();
};
const onValidateSize = async ({
@@ -118,7 +159,8 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
};
};
- const onCancel = () => {
+ const onCancel = async () => {
+ await Exporter?.cancelExport();
onFinished(false);
};
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 0834cb7dc8..de9aba0ff7 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -21,16 +21,18 @@ export default abstract class Exporter {
protected client: MatrixClient;
protected writer: WritableStreamDefaultWriter<any>;
protected fileStream: WritableStream<any>;
+ protected cancelled: boolean;
protected constructor(
protected room: Room,
protected exportType: exportTypes,
protected exportOptions?: exportOptions,
) {
+ this.cancelled = false;
this.files = [];
this.client = MatrixClientPeg.get();
window.addEventListener("beforeunload", this.onBeforeUnload);
- window.addEventListener("onunload", this.abortExport);
+ window.addEventListener("onunload", this.abortWriter);
}
protected onBeforeUnload(e: BeforeUnloadEvent) {
@@ -55,7 +57,8 @@ export default abstract class Exporter {
// Create a writable stream to the directory
this.fileStream = streamSaver.createWriteStream(filename);
- console.info("Generating a ZIP...");
+ if (!this.cancelled) console.info("Generating a ZIP...");
+ else return this.cleanUp();
this.writer = this.fileStream.getWriter();
const files = this.files;
@@ -67,21 +70,37 @@ export default abstract class Exporter {
},
});
+ if (this.cancelled) return this.cleanUp();
+
console.info("Writing to the file system...")
const reader = readableZipStream.getReader()
await this.pumpToFileStream(reader);
}
+ protected cleanUp() {
+ console.log("Cleaning up...");
+ window.removeEventListener("beforeunload", this.onBeforeUnload);
+ window.removeEventListener("onunload", this.abortWriter);
+ return "";
+ }
+
+ public async cancelExport() {
+ console.log("Cancelling export...");
+ this.cancelled = true;
+ await this.abortWriter();
+ }
+
protected async downloadPlainText(fileName: string, text: string): Promise<any> {
this.fileStream = streamSaver.createWriteStream(fileName);
this.writer = this.fileStream.getWriter()
const data = new TextEncoder().encode(text);
+ if (this.cancelled) return this.cleanUp();
await this.writer.write(data);
await this.writer.close();
}
- protected async abortExport(): Promise<void> {
+ protected async abortWriter(): Promise<void> {
await this.fileStream?.abort();
await this.writer?.abort();
}
@@ -134,6 +153,11 @@ export default abstract class Exporter {
const eventsPerCrawl = Math.min(limit, 1000);
const res: any = await this.client.createMessagesRequest(this.room.roomId, prevToken, eventsPerCrawl, "b");
+ if (this.cancelled) {
+ this.cleanUp();
+ return [];
+ }
+
if (res.chunk.length === 0) break;
limit -= res.chunk.length;
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index f69cb4fb7f..a62f926097 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -314,7 +314,7 @@ export default class HTMLExporter extends Exporter {
let prevEvent = null;
for (let i = 0; i < events.length; i++) {
const event = events[i];
- console.log("Processing event " + i + " out of " + events.length);
+ if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
content += this._wantsDateSeparator(event, prevEvent) ? this.getDateSeparator(event) : "";
@@ -349,17 +349,18 @@ export default class HTMLExporter extends Exporter {
this.addFile(`icons/${iconName}`, new Blob([exportIcons[iconName]]));
}
- console.info("HTML creation successful!");
-
await this.downloadZIP();
const exportEnd = performance.now();
- console.info("Export successful!")
- console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ if (this.cancelled) {
+ console.info("Export cancelled successfully");
+ } else {
+ console.info("Export successful!")
+ console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ }
- window.removeEventListener("beforeunload", this.onBeforeUnload);
- window.removeEventListener("onunload", this.abortExport);
+ this.cleanUp();
}
}
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index d25d96b2e4..cbdc78a711 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -64,6 +64,7 @@ ${json}
protected async createOutput(events: MatrixEvent[]) {
let content = "";
for (const event of events) {
+ if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
content += await this.getJSONString(event);
}
@@ -93,11 +94,14 @@ ${json}
const exportEnd = performance.now();
- console.info("Export successful!")
- console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ if (this.cancelled) {
+ console.info("Export cancelled successfully");
+ } else {
+ console.info("Export successful!")
+ console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ }
- window.removeEventListener("beforeunload", this.onBeforeUnload);
- window.removeEventListener("onunload", this.abortExport);
+ this.cleanUp()
}
}
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index a207029955..dff4399b95 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -81,6 +81,7 @@ export default class PlainTextExporter extends Exporter {
protected async createOutput(events: MatrixEvent[]) {
let content = "";
for (const event of events) {
+ if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
const textForEvent = await this._textForEvent(event);
content += textForEvent && `${new Date(event.getTs()).toLocaleString()} - ${textForEvent}\n`;
@@ -101,6 +102,8 @@ export default class PlainTextExporter extends Exporter {
console.info("Creating output...");
const text = await this.createOutput(res);
+ if (this.cancelled) return this.cleanUp();
+
if (this.files.length) {
this.addFile("export.txt", new Blob([text]));
await this.downloadZIP();
@@ -111,11 +114,14 @@ export default class PlainTextExporter extends Exporter {
const exportEnd = performance.now();
- console.info("Export successful!")
- console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ if (this.cancelled) {
+ console.info("Export cancelled successfully");
+ } else {
+ console.info("Export successful!")
+ console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ }
- window.removeEventListener("onunload", this.abortExport);
- window.removeEventListener("beforeunload", this.onBeforeUnload);
+ this.cleanUp();
}
}
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 132783fdcc..2baff69b36 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,8 +1,4 @@
-import { Room } from "matrix-js-sdk/src/models/room";
import { _t } from "../../languageHandler";
-import HTMLExporter from "./HtmlExport";
-import JSONExporter from "./JSONExport";
-import PlainTextExporter from "./PlainTextExport";
export enum exportFormats {
HTML = "HTML",
@@ -48,23 +44,3 @@ export interface exportOptions {
maxSize: number;
}
-const exportConversationalHistory = async (
- room: Room,
- format: string,
- exportType: exportTypes,
- exportOptions?: exportOptions,
-) => {
- switch (format) {
- case exportFormats.HTML:
- await new HTMLExporter(room, exportType, exportOptions).export();
- break;
- case exportFormats.JSON:
- await new JSONExporter(room, exportType, exportOptions).export();
- break;
- case exportFormats.PLAIN_TEXT:
- await new PlainTextExporter(room, exportType, exportOptions).export();
- break;
- }
-};
-
-export default exportConversationalHistory;
From d8f763664b2aea8f30f9bca46d6193927c90b687 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sun, 27 Jun 2021 22:18:43 +0530
Subject: [PATCH 092/313] Add warning modal during export
---
src/components/views/dialogs/ExportDialog.tsx | 54 +++++++++++++++++--
src/i18n/strings/en_EN.json | 2 +
2 files changed, 52 insertions(+), 4 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index ed567c43e1..ec1e8d4cd9 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -18,6 +18,8 @@ import HTMLExporter from "../../../utils/exportUtils/HtmlExport";
import JSONExporter from "../../../utils/exportUtils/JSONExport";
import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
import { useStateCallback } from "../../../hooks/useStateCallback";
+import Modal from "../../../Modal";
+import QuestionDialog from "./QuestionDialog";
interface IProps extends IDialogProps {
room: Room;
@@ -27,13 +29,14 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [exportFormat, setExportFormat] = useState("HTML");
const [exportType, setExportType] = useState("TIMELINE");
const [includeAttachments, setAttachments] = useState(false);
+ const [isExporting, setExporting] = useState(false);
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
const [sizeLimitRef, messageCountRef] = [useRef<any>(), useRef<any>()];
const [Exporter, setExporter] = useStateCallback(
null,
async (Exporter: HTMLExporter | PlainTextExporter | JSONExporter) => {
- await Exporter?.export();
+ await Exporter?.export().then(() => setExporting(false));
},
);
@@ -93,6 +96,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
return;
}
}
+ setExporting(true);
await startExport();
};
@@ -160,8 +164,31 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
};
const onCancel = async () => {
- await Exporter?.cancelExport();
- onFinished(false);
+ if (isExporting) {
+ const { finished } = Modal.createTrackedDialog(
+ "Warning",
+ "",
+ QuestionDialog,
+ {
+ title: _t("Warning"),
+ description: (
+ <div>
+ <p>
+ {_t(`Are you sure you want to stop exporting your data?
+ If you do, you'll need to start over.`)}
+ </p>
+ </div>
+ ),
+ danger: true,
+ button: _t("Yes"),
+ },
+ );
+ const [proceed] = await finished;
+ if (!proceed) return;
+ await Exporter?.cancelExport();
+ setExporting(false);
+ setExporter(null);
+ } else onFinished(false);
};
const exportFormatOptions = Object.keys(exportFormats).map((format) => ({
@@ -195,7 +222,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const sizePostFix = <span title={_t("MB")}>{_t("MB")}</span>;
- return (
+ const ExportSettings = (
<BaseDialog
title={_t("Export Chat")}
className="mx_ExportDialog"
@@ -259,10 +286,29 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
<DialogButtons
primaryButton={_t("Export")}
onPrimaryButtonClick={onExportClick}
+ onCancel={() => onFinished(false)}
+ />
+ </BaseDialog>
+ );
+
+ const ExportProgress = (
+ <BaseDialog
+ title={_t("Exporting you data...")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <DialogButtons
+ primaryButton={_t("Cancel")}
+ primaryButtonClass="danger"
+ hasCancel={false}
onCancel={onCancel}
/>
</BaseDialog>
);
+
+ return isExporting ? ExportProgress : ExportSettings;
};
export default ExportDialog;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 5e443b1474..4d8b9806ab 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2259,6 +2259,7 @@
"Number of messages must be a number": "Number of messages must be a number",
"Number of messages can only be between %(min)s and %(max)s": "Number of messages can only be between %(min)s and %(max)s",
"Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
+ "Are you sure you want to stop exporting your data? \n If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? \n If you do, you'll need to start over.",
"Number of messages": "Number of messages",
"MB": "MB",
"Export Chat": "Export Chat",
@@ -2267,6 +2268,7 @@
"Size Limit": "Size Limit",
"Include Attachments": "Include Attachments",
"Export": "Export",
+ "Exporting you data...": "Exporting you data...",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
"Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.",
From efd8bf3a0fec30ed95d05830c1256e322701ba8a Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 28 Jun 2021 11:00:34 +0530
Subject: [PATCH 093/313] Delint
---
src/utils/exportUtils/PlainTextExport.ts | 2 --
1 file changed, 2 deletions(-)
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index dff4399b95..d6d686a841 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -102,8 +102,6 @@ export default class PlainTextExporter extends Exporter {
console.info("Creating output...");
const text = await this.createOutput(res);
- if (this.cancelled) return this.cleanUp();
-
if (this.files.length) {
this.addFile("export.txt", new Blob([text]));
await this.downloadZIP();
From 64b683a0df6639f0013ce79f5bee53db78f0206d Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 28 Jun 2021 12:20:41 +0530
Subject: [PATCH 094/313] Add cancel warning and progress completion modals
---
src/components/views/dialogs/ExportDialog.tsx | 122 +++++++++++++-----
src/i18n/strings/en_EN.json | 10 +-
2 files changed, 97 insertions(+), 35 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index ec1e8d4cd9..e5454b1c18 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -18,25 +18,28 @@ import HTMLExporter from "../../../utils/exportUtils/HtmlExport";
import JSONExporter from "../../../utils/exportUtils/JSONExport";
import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
import { useStateCallback } from "../../../hooks/useStateCallback";
-import Modal from "../../../Modal";
-import QuestionDialog from "./QuestionDialog";
interface IProps extends IDialogProps {
room: Room;
}
const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
- const [exportFormat, setExportFormat] = useState("HTML");
- const [exportType, setExportType] = useState("TIMELINE");
+ const [exportFormat, setExportFormat] = useState(exportFormats.HTML);
+ const [exportType, setExportType] = useState(exportTypes.TIMELINE);
const [includeAttachments, setAttachments] = useState(false);
const [isExporting, setExporting] = useState(false);
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
const [sizeLimitRef, messageCountRef] = [useRef<any>(), useRef<any>()];
+ const [displayCancel, setCancelWarning] = useState(false);
+ const [exportCancelled, setExportCancelled] = useState(false);
+ const [exportSuccessful, setExportSuccessful] = useState(false);
const [Exporter, setExporter] = useStateCallback(
null,
async (Exporter: HTMLExporter | PlainTextExporter | JSONExporter) => {
- await Exporter?.export().then(() => setExporting(false));
+ await Exporter?.export().then(() => {
+ if (!exportCancelled) setExportSuccessful(true);
+ });
},
);
@@ -164,31 +167,16 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
};
const onCancel = async () => {
- if (isExporting) {
- const { finished } = Modal.createTrackedDialog(
- "Warning",
- "",
- QuestionDialog,
- {
- title: _t("Warning"),
- description: (
- <div>
- <p>
- {_t(`Are you sure you want to stop exporting your data?
- If you do, you'll need to start over.`)}
- </p>
- </div>
- ),
- danger: true,
- button: _t("Yes"),
- },
- );
- const [proceed] = await finished;
- if (!proceed) return;
- await Exporter?.cancelExport();
+ if (isExporting) setCancelWarning(true);
+ else onFinished(false);
+ };
+
+ const confirmCanel = async () => {
+ await Exporter?.cancelExport().then(() => {
+ setExportCancelled(true);
setExporting(false);
setExporter(null);
- } else onFinished(false);
+ });
};
const exportFormatOptions = Object.keys(exportFormats).map((format) => ({
@@ -222,6 +210,31 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const sizePostFix = <span title={_t("MB")}>{_t("MB")}</span>;
+ const ExportCancelWarning = (
+ <BaseDialog
+ title={_t("Warning")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <p>
+ {" "}
+ {_t(
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
+ )}{" "}
+ </p>
+ <DialogButtons
+ primaryButton={_t("Abort export process")}
+ primaryButtonClass="danger"
+ hasCancel={true}
+ cancelButton={_t("Continue")}
+ onCancel={() => setCancelWarning(false)}
+ onPrimaryButtonClick={confirmCanel}
+ />
+ </BaseDialog>
+ );
+
const ExportSettings = (
<BaseDialog
title={_t("Export Chat")}
@@ -242,7 +255,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
<StyledRadioGroup
name="feedbackRating"
value={exportFormat}
- onChange={(key) => setExportFormat(key)}
+ onChange={(key) => setExportFormat(exportFormats[key])}
definitions={exportFormatOptions}
/>
@@ -252,7 +265,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
element="select"
value={exportType}
onChange={(e) => {
- setExportType(e.target.value);
+ setExportType(exportTypes[e.target.value]);
}}
>
{exportTypeOptions}
@@ -291,9 +304,45 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
</BaseDialog>
);
+ const ExportSuccessful = (
+ <BaseDialog
+ title={_t("Export Successful")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <p> {_t("Your messages were successfully exported")} </p>
+
+ <DialogButtons
+ primaryButton={_t("Okay")}
+ hasCancel={false}
+ onPrimaryButtonClick={onFinished}
+ />
+ </BaseDialog>
+ );
+
+ const ExportCancelSuccess = (
+ <BaseDialog
+ title={_t("Export Cancelled")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <p> {_t("The export was cancelled successfully")} </p>
+
+ <DialogButtons
+ primaryButton={_t("Okay")}
+ hasCancel={false}
+ onPrimaryButtonClick={onFinished}
+ />
+ </BaseDialog>
+ );
+
const ExportProgress = (
<BaseDialog
- title={_t("Exporting you data...")}
+ title={_t("Exporting your data...")}
className="mx_ExportDialog"
contentId="mx_Dialog_content"
onFinished={onFinished}
@@ -303,12 +352,19 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
primaryButton={_t("Cancel")}
primaryButtonClass="danger"
hasCancel={false}
- onCancel={onCancel}
+ onPrimaryButtonClick={onCancel}
/>
</BaseDialog>
);
- return isExporting ? ExportProgress : ExportSettings;
+ let componentToDisplay: JSX.Element;
+ if (exportCancelled) componentToDisplay = ExportCancelSuccess;
+ else if (exportSuccessful) componentToDisplay = ExportSuccessful;
+ else if (!isExporting) componentToDisplay = ExportSettings;
+ else if (displayCancel) componentToDisplay = ExportCancelWarning;
+ else componentToDisplay = ExportProgress;
+
+ return componentToDisplay;
};
export default ExportDialog;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 4d8b9806ab..7489846008 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2259,16 +2259,22 @@
"Number of messages must be a number": "Number of messages must be a number",
"Number of messages can only be between %(min)s and %(max)s": "Number of messages can only be between %(min)s and %(max)s",
"Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
- "Are you sure you want to stop exporting your data? \n If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? \n If you do, you'll need to start over.",
"Number of messages": "Number of messages",
"MB": "MB",
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
+ "Abort export process": "Abort export process",
"Export Chat": "Export Chat",
"Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
"Format": "Format",
"Size Limit": "Size Limit",
"Include Attachments": "Include Attachments",
"Export": "Export",
- "Exporting you data...": "Exporting you data...",
+ "Export Successful": "Export Successful",
+ "Your messages were successfully exported": "Your messages were successfully exported",
+ "Okay": "Okay",
+ "Export Cancelled": "Export Cancelled",
+ "The export was cancelled successfully": "The export was cancelled successfully",
+ "Exporting your data...": "Exporting your data...",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
"Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.",
From 00ee3efbff4f597b2996faca822c9ba35a41a813 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 28 Jun 2021 12:39:05 +0530
Subject: [PATCH 095/313] Wrap avatar fetch in try catch
---
src/utils/exportUtils/HtmlExport.tsx | 26 +++++++++++++++++---------
1 file changed, 17 insertions(+), 9 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index a62f926097..7ece487cf7 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -42,10 +42,14 @@ export default class HTMLExporter extends Exporter {
const avatarUrl = Avatar.avatarUrlForRoom(this.room, 32, 32, "crop");
const avatarPath = "room.png";
if (avatarUrl) {
- const image = await fetch(avatarUrl);
- blob = await image.blob();
- this.totalSize += blob.size;
- this.addFile(avatarPath, blob);
+ try {
+ const image = await fetch(avatarUrl);
+ blob = await image.blob();
+ this.totalSize += blob.size;
+ this.addFile(avatarPath, blob);
+ } catch (err) {
+ console.log("Failed to fetch room's avatar" + err);
+ }
}
const avatar = (
<BaseAvatar
@@ -205,11 +209,15 @@ export default class HTMLExporter extends Exporter {
protected async saveAvatarIfNeeded(event: MatrixEvent) {
const member = event.sender;
if (!this.avatars.has(member.userId)) {
- const avatarUrl = this.getAvatarURL(event);
- this.avatars.set(member.userId, true);
- const image = await fetch(avatarUrl);
- const blob = await image.blob();
- this.addFile(`users/${member.userId.replace(/:/g, '-')}.png`, blob);
+ try {
+ const avatarUrl = this.getAvatarURL(event);
+ this.avatars.set(member.userId, true);
+ const image = await fetch(avatarUrl);
+ const blob = await image.blob();
+ this.addFile(`users/${member.userId.replace(/:/g, '-')}.png`, blob);
+ } catch (err) {
+ console.log("Failed to fetch user's avatar" + err);
+ }
}
}
From fc8100131631ddf0597b4d1128fa81817d3f006f Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 28 Jun 2021 13:23:50 +0530
Subject: [PATCH 096/313] Hide alt text if the image isn't present (for
unavailable avatars)
---
src/utils/exportUtils/exportCSS.ts | 9 +++++++--
1 file changed, 7 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index cbba088361..0a3ccfb935 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -19465,7 +19465,7 @@ a.mx_RoomPreviewBar_inviter {
transform: scaleX(-1);
}
`
-const snackbarCSS = `
+const customCSS = `
#snackbar {
display: flex;
visibility: hidden;
@@ -19562,8 +19562,13 @@ a.mx_reply_anchor:hover{
left: 0;
}
+img {
+ white-space: nowrap;
+ overflow: hidden;
+}
+
`
const markdownCSS = `.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;overflow:hidden;font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;font-size:16px;line-height:1.6;word-wrap:break-word}.markdown-body *{-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a{background:0 0;color:#4183c4;text-decoration:none}.markdown-body a:active,.markdown-body a:hover{outline:0}.markdown-body a:active,.markdown-body a:focus,.markdown-body a:hover{text-decoration:underline}.markdown-body strong{font-weight:700}.markdown-body em{font-style:italic}.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;position:relative;margin-top:1em;margin-bottom:16px;font-weight:700;line-height:1.4}.markdown-body h1,.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid #eee}.markdown-body h1{font-size:2.25em;line-height:1.2}.markdown-body h2{font-size:1.75em;line-height:1.225}.markdown-body h3{font-size:1.5em}.markdown-body h4{font-size:1.25em}.markdown-body h5{font-size:1em}.markdown-body h6{font-size:1em;color:#777}.markdown-body code,.markdown-body kbd,.markdown-body pre{font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace}.markdown-body code{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.markdown-body code:after,.markdown-body code:before{letter-spacing:-.2em;content:'\\00a0'}.markdown-body pre{word-wrap:normal;padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.markdown-body pre code{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background:0 0}.markdown-body pre code:after,.markdown-body pre code:before{content:normal}.markdown-body pre>code{font-size:1em;word-break:normal;white-space:pre;border:0}.markdown-body kbd{background-color:#e7e7e7;background-image:-webkit-linear-gradient(#fefefe,#e7e7e7);background-image:linear-gradient(#fefefe,#e7e7e7);background-repeat:repeat-x;display:inline-block;padding:5px 5px 1px;margin:0 1px;font-size:11px;line-height:10px;color:#000;border:1px solid #cfcfcf;border-radius:2px;box-shadow:0 1px 0 #ccc}.markdown-body hr:after,.markdown-body hr:before{display:table;content:''}.markdown-body input{color:inherit;font:inherit;margin:0;font-size:13px;line-height:1.4;font-family:Helvetica,Arial,freesans,clean,sans-serif,'Segoe UI Emoji','Segoe UI Symbol'}.markdown-body input[disabled]{cursor:default}.markdown-body input[type=checkbox]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}.markdown-body blockquote{margin:0 0 16px;padding:0 15px;color:#777;border-left:4px solid #ddd}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body img{border:0;max-width:100%;-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body hr{-moz-box-sizing:content-box;box-sizing:content-box;overflow:hidden;background:#e7e7e7;height:4px;padding:0;margin:16px 0;border:0}.markdown-body hr:after{clear:both}.markdown-body td,.markdown-body th{padding:0}.markdown-body table{border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}.markdown-body table td,.markdown-body table th{padding:6px 13px;border:1px solid #ddd}.markdown-body table th{font-weight:700}.markdown-body table tr{background-color:#fff;border-top:1px solid #ccc}.markdown-body table tr:nth-child(2n){background-color:#f8f8f8}.markdown-body ol,.markdown-body ul{padding:0 0 0 2em}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol{list-style-type:lower-alpha}.markdown-body li>p{margin-top:16px}.markdown-body dd{margin-left:0}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}`
-export default lightCSS + markdownCSS + snackbarCSS;
+export default lightCSS + markdownCSS + customCSS;
From f0d0b77b8cd7c289a68457996a8cbfc706f49dc4 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:13:14 +0530
Subject: [PATCH 097/313] Update src/TextForEvent.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/TextForEvent.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index b1f3ebaef8..ac09060e22 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -137,7 +137,7 @@ function textForTopicEvent(ev): () => string | null {
function textForRoomAvatarEvent(ev: MatrixEvent): () => string | null {
const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
- return () => _t('%(senderDisplayName)s changed the room avatar.', {senderDisplayName});
+ return () => _t('%(senderDisplayName)s changed the room avatar.', { senderDisplayName });
}
function textForRoomNameEvent(ev): () => string | null {
From 4ddbe76fbde3084577dbad5eb976e7606c39eaa9 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:13:38 +0530
Subject: [PATCH 098/313] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index e5454b1c18..4556eed3bb 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -30,7 +30,8 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [isExporting, setExporting] = useState(false);
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
- const [sizeLimitRef, messageCountRef] = [useRef<any>(), useRef<any>()];
+ const sizeLimitRef = useRef<Field>();
+ const messageCountRef = useRef<Field>();
const [displayCancel, setCancelWarning] = useState(false);
const [exportCancelled, setExportCancelled] = useState(false);
const [exportSuccessful, setExportSuccessful] = useState(false);
From e6cb0666efae673657c496719e47900fcd85a57d Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:13:51 +0530
Subject: [PATCH 099/313] Update src/utils/exportUtils/exportUtils.ts
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/utils/exportUtils/exportUtils.ts | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 2baff69b36..07da0ee7af 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -13,7 +13,7 @@ export enum exportTypes {
LAST_N_MESSAGES = "LAST_N_MESSAGES",
}
-export const textForFormat = (format: string) => {
+export const textForFormat = (format: string): string => {
switch (format) {
case exportFormats.HTML:
return _t("HTML");
@@ -43,4 +43,3 @@ export interface exportOptions {
attachmentsIncluded: boolean;
maxSize: number;
}
-
From efccf19e9ef9af88872acc71b7659e018bb2294c Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:14:00 +0530
Subject: [PATCH 100/313] Update src/utils/exportUtils/exportUtils.ts
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/utils/exportUtils/exportUtils.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 07da0ee7af..7587ca4524 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -24,7 +24,7 @@ export const textForFormat = (format: string): string => {
}
}
-export const textForType = (type: string) => {
+export const textForType = (type: string): string => {
switch (type) {
case exportTypes.BEGINNING:
return _t("From the beginning");
From 7b683a1f6406545e54e9c74d63979041d48b5b83 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:14:24 +0530
Subject: [PATCH 101/313] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 4556eed3bb..60cd06a483 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -35,7 +35,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [displayCancel, setCancelWarning] = useState(false);
const [exportCancelled, setExportCancelled] = useState(false);
const [exportSuccessful, setExportSuccessful] = useState(false);
- const [Exporter, setExporter] = useStateCallback(
+ const [Exporter, setExporter] = useStateCallback<Exporter>(
null,
async (Exporter: HTMLExporter | PlainTextExporter | JSONExporter) => {
await Exporter?.export().then(() => {
From 1014e9ea48c4779e9b92ec9e2e0b3f4c83be4c32 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:14:56 +0530
Subject: [PATCH 102/313] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 60cd06a483..844c7eae5a 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -269,7 +269,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
setExportType(exportTypes[e.target.value]);
}}
>
- {exportTypeOptions}
+ { exportTypeOptions }
</Field>
{MessageCount}
From 7a5aea14418d716ee35594e487979b33e0203961 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:15:20 +0530
Subject: [PATCH 103/313] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 844c7eae5a..6189bb00c8 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -271,7 +271,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
>
{ exportTypeOptions }
</Field>
- {MessageCount}
+ { MessageCount }
<span className="mx_ExportDialog_subheading">
{_t("Size Limit")}
From b626a3d5cb9c50d1b50cffedc007469976a11eaf Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:15:46 +0530
Subject: [PATCH 104/313] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 6189bb00c8..b7dcf57d4a 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -260,7 +260,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
definitions={exportFormatOptions}
/>
- <span className="mx_ExportDialog_subheading">{_t("Messages")}</span>
+ <span className="mx_ExportDialog_subheading">{ _t("Messages") }</span>
<Field
element="select"
From 7bbfaed5005a156cb3bb1eac04918b54f42409fc Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:16:08 +0530
Subject: [PATCH 105/313] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index b7dcf57d4a..bfa719e247 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -251,7 +251,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
)}
</p>
- <span className="mx_ExportDialog_subheading">{_t("Format")}</span>
+ <span className="mx_ExportDialog_subheading">{ _t("Format") }</span>
<StyledRadioGroup
name="feedbackRating"
From a92ddb3f27527abb4449d4f68f58241f6c6fe174 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:16:32 +0530
Subject: [PATCH 106/313] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index bfa719e247..6c95ac809e 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -313,7 +313,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
onFinished={onFinished}
fixedWidth={true}
>
- <p> {_t("Your messages were successfully exported")} </p>
+ <p>{ _t("Your messages were successfully exported") }</p>
<DialogButtons
primaryButton={_t("Okay")}
From e459f3841d7df1cb6ab46b58519b68f6fb71aeab Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:17:14 +0530
Subject: [PATCH 107/313] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 6c95ac809e..e66012869f 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -274,7 +274,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
{ MessageCount }
<span className="mx_ExportDialog_subheading">
- {_t("Size Limit")}
+ { _t("Size Limit") }
</span>
<Field
From 7a09bcb5a20bef564c2da7bf2e3f5078620d9e6b Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:17:38 +0530
Subject: [PATCH 108/313] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index e66012869f..622630f5da 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -294,7 +294,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
setAttachments((e.target as HTMLInputElement).checked)
}
>
- {_t("Include Attachments")}
+ { _t("Include Attachments") }
</StyledCheckbox>
<DialogButtons
From 60c6af501b29ce946c5feb0bb907d786027110b0 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:18:17 +0530
Subject: [PATCH 109/313] Update src/components/views/dialogs/ExportDialog.tsx
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 622630f5da..a8bb0fd7fa 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -331,7 +331,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
onFinished={onFinished}
fixedWidth={true}
>
- <p> {_t("The export was cancelled successfully")} </p>
+ <p>{ _t("The export was cancelled successfully") }</p>
<DialogButtons
primaryButton={_t("Okay")}
From b506de098947a9391a903561ad484f30db1b0191 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:19:11 +0530
Subject: [PATCH 110/313] Update src/components/views/messages/MFileBody.js
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/components/views/messages/MFileBody.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 813b340bb9..af1c011f30 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -175,7 +175,7 @@ export default class MFileBody extends React.Component {
if (this.props.showGenericPlaceholder) {
placeholder = (
<div className="mx_MFileBody_info">
- <span className="mx_MFileBody_info_icon" >
+ <span className="mx_MFileBody_info_icon">
{this.props.forExport ?
<img alt="Attachment" className="mx_export_attach_icon" src="icons/attach.svg" />
: null}
From de6bc3f2eddded08d7e8530a7fc19debc2cf9668 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:19:57 +0530
Subject: [PATCH 111/313] Update src/utils/exportUtils/Exporter.ts
Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
src/utils/exportUtils/Exporter.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index de9aba0ff7..e26d25f595 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -12,8 +12,8 @@ import * as ponyfill from "web-streams-polyfill/ponyfill"
import "web-streams-polyfill/ponyfill"; // to support streams API for older browsers
type FileStream = {
- name: string,
- stream(): ReadableStream,
+ name: string;
+ stream(): ReadableStream;
};
export default abstract class Exporter {
From 025a7eb9a56ee99579366a67685ca3fcc4c25992 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:36:24 +0530
Subject: [PATCH 112/313] Iterate PR
---
res/css/views/dialogs/_ExportDialog.scss | 38 +++---
src/components/views/avatars/MemberAvatar.tsx | 3 +-
src/components/views/dialogs/ExportDialog.tsx | 119 ++++++++----------
.../views/elements/EventListSummary.tsx | 2 +-
4 files changed, 78 insertions(+), 84 deletions(-)
diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
index 69b76221bb..d3af6c843b 100644
--- a/res/css/views/dialogs/_ExportDialog.scss
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -1,22 +1,24 @@
-.mx_ExportDialog_subheading {
- font-size: $font-16px;
- display: block;
- font-family: $font-family;
- font-weight: 600;
- color: $primary-fg-color;
- margin-top: 18px;
- margin-bottom: 12px;
-}
+.mx_ExportDialog {
+ .mx_ExportDialog_subheading {
+ font-size: $font-16px;
+ display: block;
+ font-family: $font-family;
+ font-weight: $font-semi-bold;
+ color: $primary-fg-color;
+ margin-top: 18px;
+ margin-bottom: 12px;
+ }
-.mx_ExportDialog .mx_RadioButton > .mx_RadioButton_content {
- margin-top: 5px;
- margin-bottom: 5px;
-}
+ .mx_RadioButton > .mx_RadioButton_content {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ }
-.mx_ExportDialog .mx_Field {
- width: 256px;
-}
+ .mx_Field {
+ width: 256px;
+ }
-.mx_ExportDialog .mx_Field_postfix {
- padding: 9px 10px;
+ .mx_Field_postfix {
+ padding: 9px 10px;
+ }
}
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 61723efb21..6015e4f568 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -18,12 +18,13 @@ limitations under the License.
import React from 'react';
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
+import { omit } from "lodash";
+
import dis from "../../../dispatcher/dispatcher";
import { Action } from "../../../dispatcher/actions";
import BaseAvatar from "./BaseAvatar";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import { mediaFromMxc } from "../../../customisations/Media";
-import { omit } from "lodash";
interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
member: RoomMember;
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index a8bb0fd7fa..62fa7b5bc6 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -18,6 +18,7 @@ import HTMLExporter from "../../../utils/exportUtils/HtmlExport";
import JSONExporter from "../../../utils/exportUtils/JSONExport";
import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
import { useStateCallback } from "../../../hooks/useStateCallback";
+import Exporter from "../../../utils/exportUtils/Exporter";
interface IProps extends IDialogProps {
room: Room;
@@ -37,8 +38,8 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [exportSuccessful, setExportSuccessful] = useState(false);
const [Exporter, setExporter] = useStateCallback<Exporter>(
null,
- async (Exporter: HTMLExporter | PlainTextExporter | JSONExporter) => {
- await Exporter?.export().then(() => {
+ async (exporter: Exporter) => {
+ await exporter?.export().then(() => {
if (!exportCancelled) setExportSuccessful(true);
});
},
@@ -115,7 +116,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
return { valid: false, feedback: _t("Size must be a number") };
}
- if (!(min <= parsedSize && parsedSize <= max)) {
+ if (min >= parsedSize || parsedSize >= max) {
return {
valid: false,
feedback: _t(
@@ -148,7 +149,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
};
}
- if (!(min <= parsedSize && parsedSize <= max)) {
+ if (min >= parsedSize || parsedSize >= max) {
return {
valid: false,
feedback: _t(
@@ -192,9 +193,9 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
</option>
);
});
- let MessageCount = null;
+ let messageCount = null;
if (exportType === exportTypes.LAST_N_MESSAGES) {
- MessageCount = (
+ messageCount = (
<Field
element="input"
type="number"
@@ -209,34 +210,45 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
);
}
- const sizePostFix = <span title={_t("MB")}>{_t("MB")}</span>;
+ const sizePostFix = <span>{ _t("MB") }</span>;
- const ExportCancelWarning = (
- <BaseDialog
- title={_t("Warning")}
+ let componentToDisplay: JSX.Element;
+ if (exportCancelled) {
+ // Display successful cancellation message
+ return <BaseDialog
+ title={_t("Export Cancelled")}
className="mx_ExportDialog"
contentId="mx_Dialog_content"
onFinished={onFinished}
fixedWidth={true}
>
- <p>
- {" "}
- {_t(
- "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
- )}{" "}
- </p>
+ <p>{ _t("The export was cancelled successfully") }</p>
+
<DialogButtons
- primaryButton={_t("Abort export process")}
- primaryButtonClass="danger"
- hasCancel={true}
- cancelButton={_t("Continue")}
- onCancel={() => setCancelWarning(false)}
- onPrimaryButtonClick={confirmCanel}
+ primaryButton={_t("Okay")}
+ hasCancel={false}
+ onPrimaryButtonClick={onFinished}
/>
</BaseDialog>
- );
+ } else if (exportSuccessful) {
+ // Display successful export message
+ return <BaseDialog
+ title={_t("Export Successful")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <p>{ _t("Your messages were successfully exported") }</p>
- const ExportSettings = (
+ <DialogButtons
+ primaryButton={_t("Okay")}
+ hasCancel={false}
+ onPrimaryButtonClick={onFinished}
+ />
+ </BaseDialog>
+ } else if (!isExporting) {
+ // Display export settings
<BaseDialog
title={_t("Export Chat")}
className="mx_ExportDialog"
@@ -271,7 +283,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
>
{ exportTypeOptions }
</Field>
- { MessageCount }
+ { messageCount }
<span className="mx_ExportDialog_subheading">
{ _t("Size Limit") }
@@ -303,46 +315,32 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
onCancel={() => onFinished(false)}
/>
</BaseDialog>
- );
-
- const ExportSuccessful = (
+ } else if (displayCancel) {
+ // Display cancel warning
<BaseDialog
- title={_t("Export Successful")}
+ title={_t("Warning")}
className="mx_ExportDialog"
contentId="mx_Dialog_content"
onFinished={onFinished}
fixedWidth={true}
>
- <p>{ _t("Your messages were successfully exported") }</p>
-
+ <p>
+ {_t(
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
+ )}
+ </p>
<DialogButtons
- primaryButton={_t("Okay")}
- hasCancel={false}
- onPrimaryButtonClick={onFinished}
+ primaryButton={_t("Abort export process")}
+ primaryButtonClass="danger"
+ hasCancel={true}
+ cancelButton={_t("Continue")}
+ onCancel={() => setCancelWarning(false)}
+ onPrimaryButtonClick={confirmCanel}
/>
</BaseDialog>
- );
-
- const ExportCancelSuccess = (
- <BaseDialog
- title={_t("Export Cancelled")}
- className="mx_ExportDialog"
- contentId="mx_Dialog_content"
- onFinished={onFinished}
- fixedWidth={true}
- >
- <p>{ _t("The export was cancelled successfully") }</p>
-
- <DialogButtons
- primaryButton={_t("Okay")}
- hasCancel={false}
- onPrimaryButtonClick={onFinished}
- />
- </BaseDialog>
- );
-
- const ExportProgress = (
- <BaseDialog
+ } else {
+ // Display progress dialog
+ return <BaseDialog
title={_t("Exporting your data...")}
className="mx_ExportDialog"
contentId="mx_Dialog_content"
@@ -356,14 +354,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
onPrimaryButtonClick={onCancel}
/>
</BaseDialog>
- );
-
- let componentToDisplay: JSX.Element;
- if (exportCancelled) componentToDisplay = ExportCancelSuccess;
- else if (exportSuccessful) componentToDisplay = ExportSuccessful;
- else if (!isExporting) componentToDisplay = ExportSettings;
- else if (displayCancel) componentToDisplay = ExportCancelWarning;
- else componentToDisplay = ExportProgress;
+ }
return componentToDisplay;
};
diff --git a/src/components/views/elements/EventListSummary.tsx b/src/components/views/elements/EventListSummary.tsx
index ef40251dec..665263d19c 100644
--- a/src/components/views/elements/EventListSummary.tsx
+++ b/src/components/views/elements/EventListSummary.tsx
@@ -77,7 +77,7 @@ const EventListSummary: React.FC<IProps> = ({
</React.Fragment>;
} else {
const avatars = summaryMembers.map((m, idx) =>
- <MemberAvatar key={m.userId + idx} member={m} width={14} height={14} />);
+ <MemberAvatar key={m.userId} member={m} width={14} height={14} />);
body = (
<div className="mx_EventTile_line">
<div className="mx_EventTile_info">
From e404fa3caedb7ec78dcc5750b8b48328b0ca50d2 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 10:57:02 +0530
Subject: [PATCH 113/313] Apply suggestions
---
src/components/views/dialogs/ExportDialog.tsx | 257 +++++++++---------
src/components/views/elements/ReplyThread.js | 18 +-
src/i18n/strings/en_EN.json | 14 +-
src/utils/exportUtils/JSONExport.ts | 37 +--
4 files changed, 161 insertions(+), 165 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 62fa7b5bc6..21239edb3c 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -212,151 +212,154 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const sizePostFix = <span>{ _t("MB") }</span>;
- let componentToDisplay: JSX.Element;
if (exportCancelled) {
// Display successful cancellation message
- return <BaseDialog
- title={_t("Export Cancelled")}
- className="mx_ExportDialog"
- contentId="mx_Dialog_content"
- onFinished={onFinished}
- fixedWidth={true}
- >
- <p>{ _t("The export was cancelled successfully") }</p>
+ return (
+ <BaseDialog
+ title={_t("Export Cancelled")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <p>{ _t("The export was cancelled successfully") }</p>
- <DialogButtons
- primaryButton={_t("Okay")}
- hasCancel={false}
- onPrimaryButtonClick={onFinished}
- />
- </BaseDialog>
+ <DialogButtons
+ primaryButton={ _t("Okay") }
+ hasCancel={false}
+ onPrimaryButtonClick={onFinished}
+ />
+ </BaseDialog>
+ );
} else if (exportSuccessful) {
// Display successful export message
- return <BaseDialog
- title={_t("Export Successful")}
- className="mx_ExportDialog"
- contentId="mx_Dialog_content"
- onFinished={onFinished}
- fixedWidth={true}
- >
- <p>{ _t("Your messages were successfully exported") }</p>
+ return (
+ <BaseDialog
+ title={_t("Export Successful")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <p>{ _t("Your messages were successfully exported") }</p>
- <DialogButtons
- primaryButton={_t("Okay")}
- hasCancel={false}
- onPrimaryButtonClick={onFinished}
- />
- </BaseDialog>
+ <DialogButtons
+ primaryButton={_t("Okay")}
+ hasCancel={false}
+ onPrimaryButtonClick={onFinished}
+ />
+ </BaseDialog>
+ );
} else if (!isExporting) {
// Display export settings
- <BaseDialog
- title={_t("Export Chat")}
- className="mx_ExportDialog"
- contentId="mx_Dialog_content"
- hasCancel={true}
- onFinished={onFinished}
- fixedWidth={true}
- >
- <p>
- {_t(
- "Select from the options below to export chats from your timeline",
- )}
- </p>
-
- <span className="mx_ExportDialog_subheading">{ _t("Format") }</span>
-
- <StyledRadioGroup
- name="feedbackRating"
- value={exportFormat}
- onChange={(key) => setExportFormat(exportFormats[key])}
- definitions={exportFormatOptions}
- />
-
- <span className="mx_ExportDialog_subheading">{ _t("Messages") }</span>
-
- <Field
- element="select"
- value={exportType}
- onChange={(e) => {
- setExportType(exportTypes[e.target.value]);
- }}
+ return (
+ <BaseDialog
+ title={_t("Export Chat")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ hasCancel={true}
+ onFinished={onFinished}
+ fixedWidth={true}
>
- { exportTypeOptions }
- </Field>
- { messageCount }
+ <p>
+ { _t("Select from the options below to export chats from your timeline") }
+ </p>
- <span className="mx_ExportDialog_subheading">
- { _t("Size Limit") }
- </span>
+ <span className="mx_ExportDialog_subheading">{ _t("Format") }</span>
- <Field
- type="number"
- autoComplete="off"
- onValidate={onValidateSize}
- element="input"
- ref={sizeLimitRef}
- value={sizeLimit}
- postfixComponent={sizePostFix}
- onChange={(e) => setSizeLimit(parseInt(e.target.value))}
- />
+ <StyledRadioGroup
+ name="feedbackRating"
+ value={exportFormat}
+ onChange={(key) => setExportFormat(exportFormats[key])}
+ definitions={exportFormatOptions}
+ />
- <StyledCheckbox
- checked={includeAttachments}
- onChange={(e) =>
- setAttachments((e.target as HTMLInputElement).checked)
- }
- >
- { _t("Include Attachments") }
- </StyledCheckbox>
+ <span className="mx_ExportDialog_subheading">{ _t("Messages") }</span>
- <DialogButtons
- primaryButton={_t("Export")}
- onPrimaryButtonClick={onExportClick}
- onCancel={() => onFinished(false)}
- />
- </BaseDialog>
+ <Field
+ element="select"
+ value={exportType}
+ onChange={(e) => {
+ setExportType(exportTypes[e.target.value]);
+ }}
+ >
+ { exportTypeOptions }
+ </Field>
+ { messageCount }
+
+ <span className="mx_ExportDialog_subheading">{ _t("Size Limit") }</span>
+
+ <Field
+ type="number"
+ autoComplete="off"
+ onValidate={onValidateSize}
+ element="input"
+ ref={sizeLimitRef}
+ value={sizeLimit}
+ postfixComponent={sizePostFix}
+ onChange={(e) => setSizeLimit(parseInt(e.target.value))}
+ />
+
+ <StyledCheckbox
+ checked={includeAttachments}
+ onChange={(e) =>
+ setAttachments((e.target as HTMLInputElement).checked)
+ }
+ >
+ { _t("Include Attachments") }
+ </StyledCheckbox>
+
+ <DialogButtons
+ primaryButton={_t("Export")}
+ onPrimaryButtonClick={onExportClick}
+ onCancel={() => onFinished(false)}
+ />
+ </BaseDialog>
+ );
} else if (displayCancel) {
// Display cancel warning
- <BaseDialog
- title={_t("Warning")}
- className="mx_ExportDialog"
- contentId="mx_Dialog_content"
- onFinished={onFinished}
- fixedWidth={true}
- >
- <p>
- {_t(
- "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
- )}
- </p>
- <DialogButtons
- primaryButton={_t("Abort export process")}
- primaryButtonClass="danger"
- hasCancel={true}
- cancelButton={_t("Continue")}
- onCancel={() => setCancelWarning(false)}
- onPrimaryButtonClick={confirmCanel}
- />
- </BaseDialog>
+ return (
+ <BaseDialog
+ title={_t("Warning")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <p>
+ {_t(
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
+ )}
+ </p>
+ <DialogButtons
+ primaryButton={_t("Abort export process")}
+ primaryButtonClass="danger"
+ hasCancel={true}
+ cancelButton={_t("Continue")}
+ onCancel={() => setCancelWarning(false)}
+ onPrimaryButtonClick={confirmCanel}
+ />
+ </BaseDialog>
+ );
} else {
// Display progress dialog
- return <BaseDialog
- title={_t("Exporting your data...")}
- className="mx_ExportDialog"
- contentId="mx_Dialog_content"
- onFinished={onFinished}
- fixedWidth={true}
- >
- <DialogButtons
- primaryButton={_t("Cancel")}
- primaryButtonClass="danger"
- hasCancel={false}
- onPrimaryButtonClick={onCancel}
- />
- </BaseDialog>
+ return (
+ <BaseDialog
+ title={_t("Exporting your data...")}
+ className="mx_ExportDialog"
+ contentId="mx_Dialog_content"
+ onFinished={onFinished}
+ fixedWidth={true}
+ >
+ <DialogButtons
+ primaryButton={_t("Cancel")}
+ primaryButtonClass="danger"
+ hasCancel={false}
+ onPrimaryButtonClick={onCancel}
+ />
+ </BaseDialog>
+ );
}
-
- return componentToDisplay;
};
export default ExportDialog;
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index cda237f69d..a9bea25851 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -73,16 +73,16 @@ export default class ReplyThread extends React.Component {
this.unmounted = false;
- if (this.props.forExport) return;
+ if (this.props.forExport) {
+ this.context.on("Event.replaced", this.onEventReplaced);
+ this.room = this.context.getRoom(this.props.parentEv.getRoomId());
+ this.room.on("Room.redaction", this.onRoomRedaction);
+ this.room.on("Room.redactionCancelled", this.onRoomRedaction);
- this.context.on("Event.replaced", this.onEventReplaced);
- this.room = this.context.getRoom(this.props.parentEv.getRoomId());
- this.room.on("Room.redaction", this.onRoomRedaction);
- this.room.on("Room.redactionCancelled", this.onRoomRedaction);
-
- this.onQuoteClick = this.onQuoteClick.bind(this);
- this.canCollapse = this.canCollapse.bind(this);
- this.collapse = this.collapse.bind(this);
+ this.onQuoteClick = this.onQuoteClick.bind(this);
+ this.canCollapse = this.canCollapse.bind(this);
+ this.collapse = this.collapse.bind(this);
+ }
}
static getParentEventId(ev) {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 7489846008..3929cfa1a6 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2261,19 +2261,19 @@
"Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
"Number of messages": "Number of messages",
"MB": "MB",
- "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
- "Abort export process": "Abort export process",
+ "Export Cancelled": "Export Cancelled",
+ "The export was cancelled successfully": "The export was cancelled successfully",
+ "Okay": "Okay",
+ "Export Successful": "Export Successful",
+ "Your messages were successfully exported": "Your messages were successfully exported",
"Export Chat": "Export Chat",
"Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
"Format": "Format",
"Size Limit": "Size Limit",
"Include Attachments": "Include Attachments",
"Export": "Export",
- "Export Successful": "Export Successful",
- "Your messages were successfully exported": "Your messages were successfully exported",
- "Okay": "Okay",
- "Export Cancelled": "Export Cancelled",
- "The export was cancelled successfully": "The export was cancelled successfully",
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
+ "Abort export process": "Abort export process",
"Exporting your data...": "Exporting your data...",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index cbdc78a711..5c3b44da1b 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -10,35 +10,30 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
export default class JSONExporter extends Exporter {
protected totalSize: number;
+ protected messages: any[];
constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
super(room, exportType, exportOptions);
this.totalSize = 0;
+ this.messages = [];
}
- protected wrapJSON(json: string): string {
+ protected createJSONString(): string {
const exportDate = formatFullDateNoDayNoTime(new Date());
const creator = this.room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
const creatorName = this.room?.getMember(creator)?.rawDisplayName || creator;
const topic = this.room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic || "";
const exporter = this.client.getUserId();
const exporterName = this.room?.getMember(exporter)?.rawDisplayName || exporter;
- return `{
- "room_name": "${this.room.name}",
- "room_creator": "${creatorName}",
- "topic": "${topic}",
- "export_date": "${exportDate}",
- "exported_by": "${exporterName}",
- "messages": [
-${json}
- ]
-}`
- }
-
- protected indentEachLine(JSONString: string, spaces: number) {
- const indent = ' ';
- const regex = /^(?!\s*$)/gm;
- return JSONString.replace(regex, indent.repeat(spaces));
+ const jsonObject = {
+ room_name: this.room.name,
+ room_creator: creatorName,
+ topic,
+ export_date: exportDate,
+ exported_by: exporterName,
+ messages: this.messages,
+ }
+ return JSON.stringify(jsonObject, null, 2);
}
protected async getJSONString(mxEv: MatrixEvent) {
@@ -57,18 +52,16 @@ ${json}
}
const jsonEvent: any = mxEv.toJSON();
const clearEvent = mxEv.isEncrypted() ? jsonEvent.decrypted : jsonEvent;
- const jsonString = JSON.stringify(clearEvent, null, 2);
- return jsonString.length > 2 ? jsonString + ",\n" : "";
+ return clearEvent;
}
protected async createOutput(events: MatrixEvent[]) {
- let content = "";
for (const event of events) {
if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
- content += await this.getJSONString(event);
+ this.messages.push(await this.getJSONString(event));
}
- return this.wrapJSON(this.indentEachLine(content.slice(0, -2), 2));
+ return this.createJSONString();
}
public async export() {
From 6cbbc0ecb4d1be96e0aace9719bf0a03419f855b Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 11:29:05 +0530
Subject: [PATCH 114/313] Replace hard coded forExport string by mxc url
---
src/components/views/messages/MAudioBody.js | 2 +-
src/components/views/messages/MImageBody.js | 2 +-
src/components/views/messages/MVideoBody.tsx | 2 +-
src/utils/exportUtils/HtmlExport.tsx | 4 +++-
src/utils/exportUtils/StreamToZip.ts | 3 ++-
5 files changed, 8 insertions(+), 5 deletions(-)
diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js
index 6c6a0527ea..9a8d401185 100644
--- a/src/components/views/messages/MAudioBody.js
+++ b/src/components/views/messages/MAudioBody.js
@@ -42,7 +42,7 @@ export default class MAudioBody extends React.Component {
}
_getContentUrl() {
- if (this.props.forExport) return "forExport";
+ if (this.props.forExport) return this.props.mxEvent.getContent().url;
const media = mediaFromContent(this.props.mxEvent.getContent());
if (media.isEncrypted) {
return this.state.decryptedUrl;
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index d854baec46..2916391f58 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -172,7 +172,7 @@ export default class MImageBody extends React.Component {
}
_getContentUrl() {
- if (this.props.forExport) return "forExport";
+ if (this.props.forExport) return this.props.mxEvent.getContent().url;
const media = mediaFromContent(this.props.mxEvent.getContent());
if (media.isEncrypted) {
return this.state.decryptedUrl;
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index a6d849e836..505a1b5a7e 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -78,7 +78,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
}
private getContentUrl(): string|null {
- if (this.props.forExport) return "forExport";
+ if (this.props.forExport) return this.props.mxEvent.getContent().url;
const media = mediaFromContent(this.props.mxEvent.getContent());
if (media.isEncrypted) {
return this.state.decryptedUrl;
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 7ece487cf7..f96efaea4b 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -263,7 +263,9 @@ export default class HTMLExporter extends Exporter {
</MatrixClientContext.Provider>
</div>
let eventTileMarkup = renderToStaticMarkup(eventTile);
- if (filePath) eventTileMarkup = eventTileMarkup.replace(/(src=|href=)"forExport"/g, `$1"${filePath}"`);
+ if (filePath) {
+ eventTileMarkup = eventTileMarkup.split(mxEv.getContent().url).join(filePath);
+ }
if (hasAvatar) {
eventTileMarkup = eventTileMarkup.replace(
encodeURI(this.getAvatarURL(mxEv)).replace(/&/g, '&'),
diff --git a/src/utils/exportUtils/StreamToZip.ts b/src/utils/exportUtils/StreamToZip.ts
index a411d35190..5e5b692793 100644
--- a/src/utils/exportUtils/StreamToZip.ts
+++ b/src/utils/exportUtils/StreamToZip.ts
@@ -136,7 +136,8 @@ export default function streamToZIP(underlyingSource: UnderlyingSource) {
const date = new Date(typeof fileLike.lastModified === 'undefined' ? Date.now() : fileLike.lastModified);
if (fileLike.directory && !name.endsWith('/')) name += '/';
- if (files[name]) throw new Error('File already exists.');
+ // if file already exists, do not enqueue
+ if (files[name]) return;
const nameBuf = encoder.encode(name);
filenames.push(name);
From 3fc4be0be9d77001f2649ce2f97bd032651a7e9d Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 11:40:26 +0530
Subject: [PATCH 115/313] Add return types to ABC Exporter
---
src/utils/exportUtils/Exporter.ts | 26 +++++++++++++-------------
1 file changed, 13 insertions(+), 13 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index e26d25f595..3f2e8e3caa 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -35,12 +35,12 @@ export default abstract class Exporter {
window.addEventListener("onunload", this.abortWriter);
}
- protected onBeforeUnload(e: BeforeUnloadEvent) {
+ protected onBeforeUnload(e: BeforeUnloadEvent): string {
e.preventDefault();
return e.returnValue = "Are you sure you want to exit during this export?";
}
- protected addFile(filePath: string, blob: Blob) {
+ protected addFile(filePath: string, blob: Blob): void {
const file = {
name: filePath,
stream: () => blob.stream(),
@@ -48,7 +48,7 @@ export default abstract class Exporter {
this.files.push(file);
}
- protected async downloadZIP() {
+ protected async downloadZIP(): Promise<any> {
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
// Support for older browsers
@@ -78,14 +78,14 @@ export default abstract class Exporter {
await this.pumpToFileStream(reader);
}
- protected cleanUp() {
+ protected cleanUp(): string {
console.log("Cleaning up...");
window.removeEventListener("beforeunload", this.onBeforeUnload);
window.removeEventListener("onunload", this.abortWriter);
return "";
}
- public async cancelExport() {
+ public async cancelExport(): Promise<void> {
console.log("Cancelling export...");
this.cancelled = true;
await this.abortWriter();
@@ -105,7 +105,7 @@ export default abstract class Exporter {
await this.writer?.abort();
}
- protected async pumpToFileStream(reader: ReadableStreamDefaultReader) {
+ protected async pumpToFileStream(reader: ReadableStreamDefaultReader): Promise<void> {
const res = await reader.read();
if (res.done) await this.writer.close();
else {
@@ -114,7 +114,7 @@ export default abstract class Exporter {
}
}
- protected setEventMetadata(event: MatrixEvent) {
+ protected setEventMetadata(event: MatrixEvent): MatrixEvent {
const roomState = this.client.getRoom(this.room.roomId).currentState;
event.sender = roomState.getSentinelMember(
event.getSender(),
@@ -127,7 +127,7 @@ export default abstract class Exporter {
return event;
}
- protected getLimit() {
+ protected getLimit(): number {
let limit: number;
switch (this.exportType) {
case exportTypes.LAST_N_MESSAGES:
@@ -195,7 +195,7 @@ export default abstract class Exporter {
return events;
}
- protected async getMediaBlob(event: MatrixEvent) {
+ protected async getMediaBlob(event: MatrixEvent): Promise<Blob> {
let blob: Blob;
try {
const isEncrypted = event.isEncrypted();
@@ -215,7 +215,7 @@ export default abstract class Exporter {
return blob;
}
- protected splitFileName(file: string) {
+ protected splitFileName(file: string): string[] {
const lastDot = file.lastIndexOf('.');
if (lastDot === -1) return [file, ""];
const fileName = file.slice(0, lastDot);
@@ -223,7 +223,7 @@ export default abstract class Exporter {
return [fileName, '.' + ext];
}
- protected getFilePath(event: MatrixEvent) {
+ protected getFilePath(event: MatrixEvent): string {
const mediaType = event.getContent().msgtype;
let fileDirectory: string;
switch (mediaType) {
@@ -245,7 +245,7 @@ export default abstract class Exporter {
return fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
}
- protected isReply(event: MatrixEvent) {
+ protected isReply(event: MatrixEvent): boolean {
const isEncrypted = event.isEncrypted();
// If encrypted, in_reply_to lies in event.event.content
const content = isEncrypted ? event.event.content : event.getContent();
@@ -253,7 +253,7 @@ export default abstract class Exporter {
return !!(relatesTo && relatesTo["m.in_reply_to"]);
}
- protected isAttachment(mxEv: MatrixEvent) {
+ protected isAttachment(mxEv: MatrixEvent): boolean {
const attachmentTypes = ["m.sticker", "m.image", "m.file", "m.video", "m.audio"];
return mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype);
}
From 747273cc9caaed6134a64bb40036519ea20bfbdf Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 12:06:58 +0530
Subject: [PATCH 116/313] Convert input's value to string to use existing types
---
src/components/views/dialogs/ExportDialog.tsx | 8 ++++----
src/components/views/elements/Field.tsx | 2 +-
src/components/views/messages/MFileBody.js | 2 +-
3 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 21239edb3c..16d144c87b 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -116,7 +116,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
return { valid: false, feedback: _t("Size must be a number") };
}
- if (min >= parsedSize || parsedSize >= max) {
+ if (min > parsedSize || parsedSize > max) {
return {
valid: false,
feedback: _t(
@@ -149,7 +149,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
};
}
- if (min >= parsedSize || parsedSize >= max) {
+ if (min > parsedSize || parsedSize > max) {
return {
valid: false,
feedback: _t(
@@ -199,7 +199,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
<Field
element="input"
type="number"
- value={numberOfMessages}
+ value={numberOfMessages.toString()}
ref={messageCountRef}
onValidate={onValidateNumberOfMessages}
label={_t("Number of messages")}
@@ -295,7 +295,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
onValidate={onValidateSize}
element="input"
ref={sizeLimitRef}
- value={sizeLimit}
+ value={sizeLimit.toString()}
postfixComponent={sizePostFix}
onChange={(e) => setSizeLimit(parseInt(e.target.value))}
/>
diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index ca02df71a9..1373c2df0e 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -77,7 +77,7 @@ export interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElemen
// The element to create. Defaults to "input".
element?: "input";
// The input's value. This is a controlled component, so the value is required.
- value: string | number;
+ value: string;
}
interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index af1c011f30..d1a2903d76 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -187,7 +187,7 @@ export default class MFileBody extends React.Component {
if (this.props.forExport) {
return <span className="mx_MFileBody">
- <a href="forExport">
+ <a href={this.props.mxEvent.getContent().url}>
{ placeholder }
</a>
</span>;
From 497d8102e213b00792947a70695a0aaf747b95c3 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 12:54:44 +0530
Subject: [PATCH 117/313] Handle mxc urls for non-encrypted rooms
---
src/components/views/messages/MAudioBody.js | 5 +++--
src/components/views/messages/MFileBody.js | 3 ++-
src/components/views/messages/MImageBody.js | 5 +++--
src/components/views/messages/MVideoBody.tsx | 5 +++--
src/utils/exportUtils/HtmlExport.tsx | 5 +++--
5 files changed, 14 insertions(+), 9 deletions(-)
diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js
index 9a8d401185..2258aa1713 100644
--- a/src/components/views/messages/MAudioBody.js
+++ b/src/components/views/messages/MAudioBody.js
@@ -42,8 +42,9 @@ export default class MAudioBody extends React.Component {
}
_getContentUrl() {
- if (this.props.forExport) return this.props.mxEvent.getContent().url;
- const media = mediaFromContent(this.props.mxEvent.getContent());
+ const content = this.props.mxEvent.getContent();
+ if (this.props.forExport) return content.file?.url || content.url;
+ const media = mediaFromContent(content);
if (media.isEncrypted) {
return this.state.decryptedUrl;
} else {
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index d1a2903d76..c33ad5f21b 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -186,8 +186,9 @@ export default class MFileBody extends React.Component {
}
if (this.props.forExport) {
+ const content = this.props.mxEvent.getContent();
return <span className="mx_MFileBody">
- <a href={this.props.mxEvent.getContent().url}>
+ <a href={content.file?.url || content.url}>
{ placeholder }
</a>
</span>;
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 2916391f58..9229755d29 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -172,8 +172,9 @@ export default class MImageBody extends React.Component {
}
_getContentUrl() {
- if (this.props.forExport) return this.props.mxEvent.getContent().url;
- const media = mediaFromContent(this.props.mxEvent.getContent());
+ const content = this.props.mxEvent.getContent();
+ if (this.props.forExport) return content.url || content.file.url;
+ const media = mediaFromContent(content);
if (media.isEncrypted) {
return this.state.decryptedUrl;
} else {
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 505a1b5a7e..ec9cbcf7b5 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -78,8 +78,9 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
}
private getContentUrl(): string|null {
- if (this.props.forExport) return this.props.mxEvent.getContent().url;
- const media = mediaFromContent(this.props.mxEvent.getContent());
+ const content = this.props.mxEvent.getContent();
+ if (this.props.forExport) return content.file?.url || content.url;
+ const media = mediaFromContent(content);
if (media.isEncrypted) {
return this.state.decryptedUrl;
} else {
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index f96efaea4b..f05581a6cb 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -264,7 +264,8 @@ export default class HTMLExporter extends Exporter {
</div>
let eventTileMarkup = renderToStaticMarkup(eventTile);
if (filePath) {
- eventTileMarkup = eventTileMarkup.split(mxEv.getContent().url).join(filePath);
+ const mxc = mxEv.getContent().url || mxEv.getContent().file?.url;
+ eventTileMarkup = eventTileMarkup.split(mxc).join(filePath);
}
if (hasAvatar) {
eventTileMarkup = eventTileMarkup.replace(
@@ -305,7 +306,7 @@ export default class HTMLExporter extends Exporter {
}
this.addFile(filePath, blob);
} catch (e) {
- console.log("Error while fetching file");
+ console.log("Error while fetching file" + e);
eventTile = await this.getEventTile(
this.createModifiedEvent(_t("Error fetching file"), mxEv),
joined,
From b0be7d2861af9eb3a4ef3af6e60c4cc0da843168 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 29 Jun 2021 19:43:21 +0530
Subject: [PATCH 118/313] Add license and negate the conditional
---
src/components/views/elements/ReplyThread.js | 2 +-
src/utils/exportUtils/Exporter.ts | 2 +-
src/utils/exportUtils/{StreamToZip.ts => ZipStream.ts} | 2 ++
3 files changed, 4 insertions(+), 2 deletions(-)
rename src/utils/exportUtils/{StreamToZip.ts => ZipStream.ts} (98%)
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index a9bea25851..1ca68f18a8 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -73,7 +73,7 @@ export default class ReplyThread extends React.Component {
this.unmounted = false;
- if (this.props.forExport) {
+ if (!this.props.forExport) {
this.context.on("Event.replaced", this.onEventReplaced);
this.room = this.context.getRoom(this.props.parentEv.getRoomId());
this.room.on("Room.redaction", this.onRoomRedaction);
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 3f2e8e3caa..1a0b9fe187 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -7,7 +7,7 @@ import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
import { MatrixClient } from "matrix-js-sdk";
-import streamToZIP from "./StreamToZip";
+import streamToZIP from "./ZipStream";
import * as ponyfill from "web-streams-polyfill/ponyfill"
import "web-streams-polyfill/ponyfill"; // to support streams API for older browsers
diff --git a/src/utils/exportUtils/StreamToZip.ts b/src/utils/exportUtils/ZipStream.ts
similarity index 98%
rename from src/utils/exportUtils/StreamToZip.ts
rename to src/utils/exportUtils/ZipStream.ts
index 5e5b692793..4cb9060915 100644
--- a/src/utils/exportUtils/StreamToZip.ts
+++ b/src/utils/exportUtils/ZipStream.ts
@@ -1,3 +1,5 @@
+// Based on https://github.com/jimmywarting/StreamSaver.js/blob/master/examples/zip-stream.js
+
/* global ReadableStream */
type TypedArray =
From 7d5db4689c04bb3c012747db25ad11af7bf80b0b Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 30 Jun 2021 10:03:33 +0530
Subject: [PATCH 119/313] Disable close icon during export
---
src/components/views/dialogs/ExportDialog.tsx | 5 +++--
src/i18n/strings/en_EN.json | 2 +-
2 files changed, 4 insertions(+), 3 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 16d144c87b..ff542bfbf4 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -268,7 +268,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
<span className="mx_ExportDialog_subheading">{ _t("Format") }</span>
<StyledRadioGroup
- name="feedbackRating"
+ name="exportFormat"
value={exportFormat}
onChange={(key) => setExportFormat(exportFormats[key])}
definitions={exportFormatOptions}
@@ -332,7 +332,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
)}
</p>
<DialogButtons
- primaryButton={_t("Abort export process")}
+ primaryButton={_t("Stop")}
primaryButtonClass="danger"
hasCancel={true}
cancelButton={_t("Continue")}
@@ -348,6 +348,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
title={_t("Exporting your data...")}
className="mx_ExportDialog"
contentId="mx_Dialog_content"
+ hasCancel={false}
onFinished={onFinished}
fixedWidth={true}
>
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 3929cfa1a6..c6a3e033ec 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2273,7 +2273,7 @@
"Include Attachments": "Include Attachments",
"Export": "Export",
"Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
- "Abort export process": "Abort export process",
+ "Stop": "Stop",
"Exporting your data...": "Exporting your data...",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
From 08d886e9d1e6782cf2c2eaf2b5fb70f0982181c1 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 30 Jun 2021 14:08:22 +0530
Subject: [PATCH 120/313] Delint
---
src/TextForEvent.tsx | 4 +-
src/components/views/messages/MVideoBody.tsx | 2 +-
.../views/right_panel/RoomSummaryCard.tsx | 2 +-
src/components/views/rooms/RoomHeader.js | 1 -
src/utils/exportUtils/Exporter.ts | 14 ++--
src/utils/exportUtils/HtmlExport.tsx | 65 ++++++++++---------
src/utils/exportUtils/JSONExport.ts | 7 +-
src/utils/exportUtils/PlainTextExport.ts | 11 ++--
src/utils/exportUtils/ZipStream.ts | 38 +++++------
src/utils/exportUtils/exportCSS.ts | 6 +-
src/utils/exportUtils/exportJS.ts | 2 +-
src/utils/exportUtils/exportUtils.ts | 4 +-
12 files changed, 77 insertions(+), 79 deletions(-)
diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index 32e4a2d1fa..c4cc8d71df 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -277,9 +277,9 @@ function textForMessageEvent(ev: MatrixEvent): () => string | null {
if (ev.getContent().msgtype === "m.emote") {
message = "* " + senderDisplayName + " " + message;
} else if (ev.getContent().msgtype === "m.image") {
- message = _t('%(senderDisplayName)s sent an image.', {senderDisplayName});
+ message = _t('%(senderDisplayName)s sent an image.', { senderDisplayName });
} else if (ev.getType() == "m.sticker") {
- message = _t('%(senderDisplayName)s sent a sticker.', {senderDisplayName});
+ message = _t('%(senderDisplayName)s sent a sticker.', { senderDisplayName });
} else message = senderDisplayName + ': ' + message;
return message;
};
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 67394875f6..8950574c66 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -194,7 +194,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
private getFileBody = () => {
if (this.props.forExport) return null;
return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
- }
+ };
render() {
const content = this.props.mxEvent.getContent();
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index 75049811e1..8766400729 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -234,7 +234,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
};
const onRoomExportClick = async () => {
- const {default: ExportDialog} = await import("../dialogs/ExportDialog");
+ const { default: ExportDialog } = await import("../dialogs/ExportDialog");
Modal.createTrackedDialog('export room dialog', '', ExportDialog, {
room,
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index ed90760e48..886317f2bf 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -32,7 +32,6 @@ import RoomName from "../elements/RoomName";
import { PlaceCallType } from "../../../CallHandler";
import { replaceableComponent } from "../../../utils/replaceableComponent";
-
@replaceableComponent("views.rooms.RoomHeader")
export default class RoomHeader extends React.Component {
static propTypes = {
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 1a0b9fe187..7d7b1bed16 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -8,7 +8,7 @@ import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
import { MatrixClient } from "matrix-js-sdk";
import streamToZIP from "./ZipStream";
-import * as ponyfill from "web-streams-polyfill/ponyfill"
+import * as ponyfill from "web-streams-polyfill/ponyfill";
import "web-streams-polyfill/ponyfill"; // to support streams API for older browsers
type FileStream = {
@@ -44,7 +44,7 @@ export default abstract class Exporter {
const file = {
name: filePath,
stream: () => blob.stream(),
- }
+ };
this.files.push(file);
}
@@ -52,7 +52,7 @@ export default abstract class Exporter {
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
// Support for older browsers
- streamSaver.WritableStream = ponyfill.WritableStream
+ streamSaver.WritableStream = ponyfill.WritableStream;
// Create a writable stream to the directory
this.fileStream = streamSaver.createWriteStream(filename);
@@ -72,9 +72,9 @@ export default abstract class Exporter {
if (this.cancelled) return this.cleanUp();
- console.info("Writing to the file system...")
+ console.info("Writing to the file system...");
- const reader = readableZipStream.getReader()
+ const reader = readableZipStream.getReader();
await this.pumpToFileStream(reader);
}
@@ -93,7 +93,7 @@ export default abstract class Exporter {
protected async downloadPlainText(fileName: string, text: string): Promise<any> {
this.fileStream = streamSaver.createWriteStream(fileName);
- this.writer = this.fileStream.getWriter()
+ this.writer = this.fileStream.getWriter();
const data = new TextEncoder().encode(text);
if (this.cancelled) return this.cleanUp();
await this.writer.write(data);
@@ -142,7 +142,7 @@ export default abstract class Exporter {
return limit;
}
- protected async getRequiredEvents():Promise<MatrixEvent[]> {
+ protected async getRequiredEvents(): Promise<MatrixEvent[]> {
const eventMapper = this.client.getEventMapper();
let prevToken: string|null = null;
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index f05581a6cb..3c19c4280b 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -1,9 +1,9 @@
-import React from "react"
+import React from "react";
import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { renderToStaticMarkup } from 'react-dom/server'
+import { renderToStaticMarkup } from "react-dom/server";
import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
import { formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
@@ -191,7 +191,7 @@ export default class HTMLExporter extends Exporter {
</section>
<div id="snackbar"/>
</body>
- </html>`
+ </html>`;
}
protected getAvatarURL(event: MatrixEvent): string {
@@ -236,32 +236,35 @@ export default class HTMLExporter extends Exporter {
const hasAvatar = !!this.getAvatarURL(mxEv);
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
- const eventTile = <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
- <MatrixClientContext.Provider value = {this.client}>
- <EventTile
- mxEvent={mxEv}
- continuation={continuation}
- isRedacted={mxEv.isRedacted()}
- replacingEventId={mxEv.replacingEventId()}
- forExport={true}
- readReceipts={null}
- readReceiptMap={null}
- showUrlPreview={false}
- checkUnmounting={() => false}
- isTwelveHour={false}
- last={false}
- lastInSection={false}
- permalinkCreator={this.permalinkCreator}
- lastSuccessful={false}
- isSelectedEvent={false}
- getRelationsForEvent={null}
- showReactions={false}
- layout={Layout.Group}
- enableFlair={false}
- showReadReceipts={false}
- />
- </MatrixClientContext.Provider>
- </div>
+ const eventTile = (
+ <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
+ <MatrixClientContext.Provider value={this.client}>
+ <EventTile
+ mxEvent={mxEv}
+ continuation={continuation}
+ isRedacted={mxEv.isRedacted()}
+ replacingEventId={mxEv.replacingEventId()}
+ forExport={true}
+ readReceipts={null}
+ readReceiptMap={null}
+ showUrlPreview={false}
+ checkUnmounting={() => false}
+ isTwelveHour={false}
+ last={false}
+ lastInSection={false}
+ permalinkCreator={this.permalinkCreator}
+ lastSuccessful={false}
+ isSelectedEvent={false}
+ getRelationsForEvent={null}
+ showReactions={false}
+ layout={Layout.Group}
+ enableFlair={false}
+ showReadReceipts={false}
+ />
+ </MatrixClientContext.Provider>
+ </div>
+ );
+
let eventTileMarkup = renderToStaticMarkup(eventTile);
if (filePath) {
const mxc = mxEv.getContent().url || mxEv.getContent().file?.url;
@@ -282,7 +285,7 @@ export default class HTMLExporter extends Exporter {
body: `*${text}*`,
format: "org.matrix.custom.html",
formatted_body: `<em>${text}</em>`,
- }
+ };
const modifiedEvent = new MatrixEvent();
modifiedEvent.event = mxEv.event;
modifiedEvent.sender = mxEv.sender;
@@ -367,7 +370,7 @@ export default class HTMLExporter extends Exporter {
if (this.cancelled) {
console.info("Export cancelled successfully");
} else {
- console.info("Export successful!")
+ console.info("Export successful!");
console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
}
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 5c3b44da1b..37f5724289 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -7,7 +7,6 @@ import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import { EventType } from "matrix-js-sdk/src/@types/event";
-
export default class JSONExporter extends Exporter {
protected totalSize: number;
protected messages: any[];
@@ -32,7 +31,7 @@ export default class JSONExporter extends Exporter {
export_date: exportDate,
exported_by: exporterName,
messages: this.messages,
- }
+ };
return JSON.stringify(jsonObject, null, 2);
}
@@ -90,11 +89,11 @@ export default class JSONExporter extends Exporter {
if (this.cancelled) {
console.info("Export cancelled successfully");
} else {
- console.info("Export successful!")
+ console.info("Export successful!");
console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
}
- this.cleanUp()
+ this.cleanUp();
}
}
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index d6d686a841..0ab9407415 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -8,7 +8,6 @@ import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import { textForEvent } from "../../TextForEvent";
-
export default class PlainTextExporter extends Exporter {
protected totalSize: number;
protected mediaOmitText: string;
@@ -21,7 +20,7 @@ export default class PlainTextExporter extends Exporter {
: _t("Media omitted - file size limit exceeded");
}
- protected textForReplyEvent = (ev : MatrixEvent) => {
+ protected textForReplyEvent = (ev: MatrixEvent) => {
const REPLY_REGEX = /> <(.*?)>(.*?)\n\n(.*)/;
const REPLY_SOURCE_MAX_LENGTH = 32;
const content = ev.getContent();
@@ -36,7 +35,7 @@ export default class PlainTextExporter extends Exporter {
rplSource = match[2].substring(1, REPLY_SOURCE_MAX_LENGTH);
// Get the first non-blank line from the source.
- const lines = rplSource.split('\n').filter((line) => !/^\s*$/.test(line))
+ const lines = rplSource.split('\n').filter((line) => !/^\s*$/.test(line));
if (lines.length > 0) {
// Cut to a maximum length.
rplSource = lines[0].substring(0, REPLY_SOURCE_MAX_LENGTH);
@@ -52,7 +51,7 @@ export default class PlainTextExporter extends Exporter {
}
return `<${rplName}${rplSource}> ${rplText}`;
- }
+ };
protected _textForEvent = async (mxEv: MatrixEvent) => {
const senderDisplayName = mxEv.sender && mxEv.sender.name ? mxEv.sender.name : mxEv.getSender();
@@ -76,7 +75,7 @@ export default class PlainTextExporter extends Exporter {
}
if (this.isReply(mxEv)) return senderDisplayName + ": " + this.textForReplyEvent(mxEv) + mediaText;
else return textForEvent(mxEv) + mediaText;
- }
+ };
protected async createOutput(events: MatrixEvent[]) {
let content = "";
@@ -115,7 +114,7 @@ export default class PlainTextExporter extends Exporter {
if (this.cancelled) {
console.info("Export cancelled successfully");
} else {
- console.info("Export successful!")
+ console.info("Export successful!");
console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
}
diff --git a/src/utils/exportUtils/ZipStream.ts b/src/utils/exportUtils/ZipStream.ts
index 4cb9060915..098e2ed12c 100644
--- a/src/utils/exportUtils/ZipStream.ts
+++ b/src/utils/exportUtils/ZipStream.ts
@@ -13,7 +13,6 @@ type TypedArray =
| Float32Array
| Float64Array;
-
/**
* 32-bit cyclic redundancy check, or CRC-32 - checksum
*/
@@ -23,8 +22,8 @@ class Crc32 {
constructor() {
this.crc = -1;
this.table = (() => {
- let i
- let j
+ let i;
+ let j;
let t;
const table = [];
@@ -37,8 +36,8 @@ class Crc32 {
}
table[i] = t;
}
- return table
- })()
+ return table;
+ })();
}
append(data: TypedArray) {
@@ -55,25 +54,24 @@ class Crc32 {
}
}
-
type DataHelper = {
array: Uint8Array,
view: DataView,
-}
+};
const getDataHelper = (byteLength: number): DataHelper => {
- const uint8 = new Uint8Array(byteLength)
+ const uint8 = new Uint8Array(byteLength);
return {
array: uint8,
view: new DataView(uint8.buffer),
};
-}
+};
type FileLike = File & {
directory: string,
comment: string,
stream(): ReadableStream,
-}
+};
type ZipObj = {
crc?: Crc32,
@@ -88,7 +86,7 @@ type ZipObj = {
fileLike: FileLike,
level: number,
directory: boolean,
-}
+};
const pump = (zipObj: ZipObj) => zipObj.reader ? zipObj.reader.read().then(chunk => {
if (zipObj.crc) {
@@ -124,7 +122,7 @@ export default function streamToZIP(underlyingSource: UnderlyingSource) {
desiredSize: null,
error(err) {
- console.error(err)
+ console.error(err);
},
enqueue(fileLike: FileLike) {
@@ -155,8 +153,8 @@ export default function streamToZIP(underlyingSource: UnderlyingSource) {
offset,
writeHeader() {
- const header = getDataHelper(26)
- const data = getDataHelper(30 + nameBuf.length)
+ const header = getDataHelper(26);
+ const data = getDataHelper(30 + nameBuf.length);
zipObject.offset = offset;
zipObject.header = header;
@@ -200,10 +198,10 @@ export default function streamToZIP(underlyingSource: UnderlyingSource) {
ctrl.enqueue(footer.array);
offset += zipObject.compressedLength + 16;
- next()
+ next();
},
fileLike,
- }
+ };
if (!activeZipObject) {
activeZipObject = zipObject;
@@ -220,11 +218,11 @@ export default function streamToZIP(underlyingSource: UnderlyingSource) {
if (!activeZipObject) closeZip();
closed = true;
},
- }
+ };
function closeZip() {
let length = 0;
- let index = 0
+ let index = 0;
let indexFilename;
let file;
@@ -232,7 +230,7 @@ export default function streamToZIP(underlyingSource: UnderlyingSource) {
file = files[filenames[indexFilename]];
length += 46 + file.nameBuf.length + file.comment.length;
}
- const data = getDataHelper(length + 22)
+ const data = getDataHelper(length + 22);
for (indexFilename = 0; indexFilename < filenames.length; indexFilename++) {
file = files[filenames[indexFilename]];
data.view.setUint32(index, 0x504b0102);
@@ -275,7 +273,7 @@ export default function streamToZIP(underlyingSource: UnderlyingSource) {
return processNextChunk() || (
underlyingSource.pull &&
Promise.resolve(underlyingSource.pull(zipWriter))
- )
+ );
},
});
}
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 0a3ccfb935..7d07f19998 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -19464,7 +19464,7 @@ a.mx_RoomPreviewBar_inviter {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
-`
+`;
const customCSS = `
#snackbar {
display: flex;
@@ -19567,8 +19567,8 @@ img {
overflow: hidden;
}
-`
+`;
-const markdownCSS = `.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;overflow:hidden;font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;font-size:16px;line-height:1.6;word-wrap:break-word}.markdown-body *{-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a{background:0 0;color:#4183c4;text-decoration:none}.markdown-body a:active,.markdown-body a:hover{outline:0}.markdown-body a:active,.markdown-body a:focus,.markdown-body a:hover{text-decoration:underline}.markdown-body strong{font-weight:700}.markdown-body em{font-style:italic}.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;position:relative;margin-top:1em;margin-bottom:16px;font-weight:700;line-height:1.4}.markdown-body h1,.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid #eee}.markdown-body h1{font-size:2.25em;line-height:1.2}.markdown-body h2{font-size:1.75em;line-height:1.225}.markdown-body h3{font-size:1.5em}.markdown-body h4{font-size:1.25em}.markdown-body h5{font-size:1em}.markdown-body h6{font-size:1em;color:#777}.markdown-body code,.markdown-body kbd,.markdown-body pre{font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace}.markdown-body code{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.markdown-body code:after,.markdown-body code:before{letter-spacing:-.2em;content:'\\00a0'}.markdown-body pre{word-wrap:normal;padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.markdown-body pre code{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background:0 0}.markdown-body pre code:after,.markdown-body pre code:before{content:normal}.markdown-body pre>code{font-size:1em;word-break:normal;white-space:pre;border:0}.markdown-body kbd{background-color:#e7e7e7;background-image:-webkit-linear-gradient(#fefefe,#e7e7e7);background-image:linear-gradient(#fefefe,#e7e7e7);background-repeat:repeat-x;display:inline-block;padding:5px 5px 1px;margin:0 1px;font-size:11px;line-height:10px;color:#000;border:1px solid #cfcfcf;border-radius:2px;box-shadow:0 1px 0 #ccc}.markdown-body hr:after,.markdown-body hr:before{display:table;content:''}.markdown-body input{color:inherit;font:inherit;margin:0;font-size:13px;line-height:1.4;font-family:Helvetica,Arial,freesans,clean,sans-serif,'Segoe UI Emoji','Segoe UI Symbol'}.markdown-body input[disabled]{cursor:default}.markdown-body input[type=checkbox]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}.markdown-body blockquote{margin:0 0 16px;padding:0 15px;color:#777;border-left:4px solid #ddd}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body img{border:0;max-width:100%;-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body hr{-moz-box-sizing:content-box;box-sizing:content-box;overflow:hidden;background:#e7e7e7;height:4px;padding:0;margin:16px 0;border:0}.markdown-body hr:after{clear:both}.markdown-body td,.markdown-body th{padding:0}.markdown-body table{border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}.markdown-body table td,.markdown-body table th{padding:6px 13px;border:1px solid #ddd}.markdown-body table th{font-weight:700}.markdown-body table tr{background-color:#fff;border-top:1px solid #ccc}.markdown-body table tr:nth-child(2n){background-color:#f8f8f8}.markdown-body ol,.markdown-body ul{padding:0 0 0 2em}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol{list-style-type:lower-alpha}.markdown-body li>p{margin-top:16px}.markdown-body dd{margin-left:0}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}`
+const markdownCSS = `.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;overflow:hidden;font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;font-size:16px;line-height:1.6;word-wrap:break-word}.markdown-body *{-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a{background:0 0;color:#4183c4;text-decoration:none}.markdown-body a:active,.markdown-body a:hover{outline:0}.markdown-body a:active,.markdown-body a:focus,.markdown-body a:hover{text-decoration:underline}.markdown-body strong{font-weight:700}.markdown-body em{font-style:italic}.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;position:relative;margin-top:1em;margin-bottom:16px;font-weight:700;line-height:1.4}.markdown-body h1,.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid #eee}.markdown-body h1{font-size:2.25em;line-height:1.2}.markdown-body h2{font-size:1.75em;line-height:1.225}.markdown-body h3{font-size:1.5em}.markdown-body h4{font-size:1.25em}.markdown-body h5{font-size:1em}.markdown-body h6{font-size:1em;color:#777}.markdown-body code,.markdown-body kbd,.markdown-body pre{font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace}.markdown-body code{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.markdown-body code:after,.markdown-body code:before{letter-spacing:-.2em;content:'\\00a0'}.markdown-body pre{word-wrap:normal;padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.markdown-body pre code{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background:0 0}.markdown-body pre code:after,.markdown-body pre code:before{content:normal}.markdown-body pre>code{font-size:1em;word-break:normal;white-space:pre;border:0}.markdown-body kbd{background-color:#e7e7e7;background-image:-webkit-linear-gradient(#fefefe,#e7e7e7);background-image:linear-gradient(#fefefe,#e7e7e7);background-repeat:repeat-x;display:inline-block;padding:5px 5px 1px;margin:0 1px;font-size:11px;line-height:10px;color:#000;border:1px solid #cfcfcf;border-radius:2px;box-shadow:0 1px 0 #ccc}.markdown-body hr:after,.markdown-body hr:before{display:table;content:''}.markdown-body input{color:inherit;font:inherit;margin:0;font-size:13px;line-height:1.4;font-family:Helvetica,Arial,freesans,clean,sans-serif,'Segoe UI Emoji','Segoe UI Symbol'}.markdown-body input[disabled]{cursor:default}.markdown-body input[type=checkbox]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}.markdown-body blockquote{margin:0 0 16px;padding:0 15px;color:#777;border-left:4px solid #ddd}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body img{border:0;max-width:100%;-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body hr{-moz-box-sizing:content-box;box-sizing:content-box;overflow:hidden;background:#e7e7e7;height:4px;padding:0;margin:16px 0;border:0}.markdown-body hr:after{clear:both}.markdown-body td,.markdown-body th{padding:0}.markdown-body table{border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}.markdown-body table td,.markdown-body table th{padding:6px 13px;border:1px solid #ddd}.markdown-body table th{font-weight:700}.markdown-body table tr{background-color:#fff;border-top:1px solid #ccc}.markdown-body table tr:nth-child(2n){background-color:#f8f8f8}.markdown-body ol,.markdown-body ul{padding:0 0 0 2em}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol{list-style-type:lower-alpha}.markdown-body li>p{margin-top:16px}.markdown-body dd{margin-left:0}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}`;
export default lightCSS + markdownCSS + customCSS;
diff --git a/src/utils/exportUtils/exportJS.ts b/src/utils/exportUtils/exportJS.ts
index 2f7ba550e7..21b10b50d5 100644
--- a/src/utils/exportUtils/exportJS.ts
+++ b/src/utils/exportUtils/exportJS.ts
@@ -24,4 +24,4 @@ document.querySelectorAll('.mx_reply_anchor').forEach(element => {
})
}
-`
+`;
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 7587ca4524..6fa5ab9869 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -22,7 +22,7 @@ export const textForFormat = (format: string): string => {
case exportFormats.PLAIN_TEXT:
return _t("Plain Text");
}
-}
+};
export const textForType = (type: string): string => {
switch (type) {
@@ -35,7 +35,7 @@ export const textForType = (type: string): string => {
// case exportTypes.START_DATE:
// return _t("From a specific date");
}
-}
+};
export interface exportOptions {
startDate?: number;
From 6ca664636e523d83a45bb610c1e24053cef09c51 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 2 Jul 2021 10:23:25 +0530
Subject: [PATCH 121/313] Display progress
---
src/components/views/dialogs/ExportDialog.tsx | 5 +++++
src/utils/exportUtils/Exporter.ts | 18 +++++++++++----
src/utils/exportUtils/HtmlExport.tsx | 22 ++++++++++++-------
src/utils/exportUtils/JSONExport.ts | 13 ++++++++---
src/utils/exportUtils/PlainTextExport.ts | 19 +++++++++++-----
5 files changed, 56 insertions(+), 21 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index ff542bfbf4..d82bc1efd8 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -29,6 +29,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [exportType, setExportType] = useState(exportTypes.TIMELINE);
const [includeAttachments, setAttachments] = useState(false);
const [isExporting, setExporting] = useState(false);
+ const [exportProgressText, setExportProgressText] = useState("");
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
const sizeLimitRef = useRef<Field>();
@@ -58,6 +59,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
exportTypes[exportType],
exportOptions,
+ setExportProgressText,
),
);
break;
@@ -67,6 +69,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
exportTypes[exportType],
exportOptions,
+ setExportProgressText,
),
);
break;
@@ -76,6 +79,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
exportTypes[exportType],
exportOptions,
+ setExportProgressText,
),
);
break;
@@ -352,6 +356,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
onFinished={onFinished}
fixedWidth={true}
>
+ <p> { exportProgressText } </p>
<DialogButtons
primaryButton={_t("Cancel")}
primaryButtonClass="danger"
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 7d7b1bed16..3da058233d 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -26,7 +26,8 @@ export default abstract class Exporter {
protected constructor(
protected room: Room,
protected exportType: exportTypes,
- protected exportOptions?: exportOptions,
+ protected exportOptions: exportOptions,
+ protected setProgressText: React.Dispatch<React.SetStateAction<string>>,
) {
this.cancelled = false;
this.files = [];
@@ -40,6 +41,11 @@ export default abstract class Exporter {
return e.returnValue = "Are you sure you want to exit during this export?";
}
+ protected updateProgress(progress: string, log = true, show = true): void {
+ if (log) console.log(progress);
+ if (show) this.setProgressText(progress);
+ }
+
protected addFile(filePath: string, blob: Blob): void {
const file = {
name: filePath,
@@ -57,7 +63,7 @@ export default abstract class Exporter {
// Create a writable stream to the directory
this.fileStream = streamSaver.createWriteStream(filename);
- if (!this.cancelled) console.info("Generating a ZIP...");
+ if (!this.cancelled) this.updateProgress("Generating a ZIP...");
else return this.cleanUp();
this.writer = this.fileStream.getWriter();
@@ -72,7 +78,7 @@ export default abstract class Exporter {
if (this.cancelled) return this.cleanUp();
- console.info("Writing to the file system...");
+ this.updateProgress("Writing to the file system...");
const reader = readableZipStream.getReader();
await this.pumpToFileStream(reader);
@@ -172,7 +178,11 @@ export default abstract class Exporter {
}
events.push(mxEv);
}
- console.log("Fetched " + events.length + " events so far.");
+ this.updateProgress(
+ ("Fetched " + events.length + " events ") + (this.exportType === exportTypes.LAST_N_MESSAGES
+ ? `out of ${this.exportOptions.numberOfMessages}...`
+ : "so far..."),
+ );
prevToken = res.end;
}
// Reverse the events so that we preserve the order
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 3c19c4280b..fc963a27b8 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -27,8 +27,13 @@ export default class HTMLExporter extends Exporter {
protected totalSize: number;
protected mediaOmitText: string;
- constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
- super(room, exportType, exportOptions);
+ constructor(
+ room: Room,
+ exportType: exportTypes,
+ exportOptions: exportOptions,
+ setProgressText: React.Dispatch<React.SetStateAction<string>>,
+ ) {
+ super(room, exportType, exportOptions, setProgressText);
this.avatars = new Map<string, boolean>();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
this.totalSize = 0;
@@ -328,6 +333,7 @@ export default class HTMLExporter extends Exporter {
let prevEvent = null;
for (let i = 0; i < events.length; i++) {
const event = events[i];
+ if (i % 100 == 0) this.updateProgress(`Processing event ${i ? i : 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
@@ -343,16 +349,16 @@ export default class HTMLExporter extends Exporter {
}
public async export() {
- console.info("Starting export process...");
- console.info("Fetching events...");
+ this.updateProgress("Starting export process...", true, false);
+ this.updateProgress("Fetching events...");
const fetchStart = performance.now();
const res = await this.getRequiredEvents();
const fetchEnd = performance.now();
- console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
+ this.updateProgress(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`, true, false);
- console.info("Creating HTML...");
+ this.updateProgress("Creating HTML...");
const html = await this.createHTML(res);
this.addFile("index.html", new Blob([html]));
@@ -370,8 +376,8 @@ export default class HTMLExporter extends Exporter {
if (this.cancelled) {
console.info("Export cancelled successfully");
} else {
- console.info("Export successful!");
- console.log(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
+ this.updateProgress("Export successful!");
+ this.updateProgress(`Exported ${res.length} events in ${(exportEnd - fetchStart)/1000} seconds`);
}
this.cleanUp();
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 37f5724289..7b2a4f57a9 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -11,8 +11,13 @@ export default class JSONExporter extends Exporter {
protected totalSize: number;
protected messages: any[];
- constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
- super(room, exportType, exportOptions);
+ constructor(
+ room: Room,
+ exportType: exportTypes,
+ exportOptions: exportOptions,
+ setProgressText: React.Dispatch<React.SetStateAction<string>>,
+ ) {
+ super(room, exportType, exportOptions, setProgressText);
this.totalSize = 0;
this.messages = [];
}
@@ -55,7 +60,9 @@ export default class JSONExporter extends Exporter {
}
protected async createOutput(events: MatrixEvent[]) {
- for (const event of events) {
+ for (let i = 0; i < events.length; i++) {
+ const event = events[i];
+ if (i % 100 == 0) this.updateProgress(`Processing event ${i ? i : 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
this.messages.push(await this.getJSONString(event));
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 0ab9407415..c437c52de9 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -12,8 +12,13 @@ export default class PlainTextExporter extends Exporter {
protected totalSize: number;
protected mediaOmitText: string;
- constructor(room: Room, exportType: exportTypes, exportOptions: exportOptions) {
- super(room, exportType, exportOptions);
+ constructor(
+ room: Room,
+ exportType: exportTypes,
+ exportOptions: exportOptions,
+ setProgressText: React.Dispatch<React.SetStateAction<string>>,
+ ) {
+ super(room, exportType, exportOptions, setProgressText);
this.totalSize = 0;
this.mediaOmitText = !this.exportOptions.attachmentsIncluded
? _t("Media omitted")
@@ -79,7 +84,9 @@ export default class PlainTextExporter extends Exporter {
protected async createOutput(events: MatrixEvent[]) {
let content = "";
- for (const event of events) {
+ for (let i = 0; i < events.length; i++) {
+ const event = events[i];
+ if (i % 100 == 0) this.updateProgress(`Processing event ${i ? i : 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
const textForEvent = await this._textForEvent(event);
@@ -89,8 +96,8 @@ export default class PlainTextExporter extends Exporter {
}
public async export() {
- console.info("Starting export process...");
- console.info("Fetching events...");
+ this.updateProgress("Starting export process...");
+ this.updateProgress("Fetching events...");
const fetchStart = performance.now();
const res = await this.getRequiredEvents();
@@ -98,7 +105,7 @@ export default class PlainTextExporter extends Exporter {
console.log(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`);
- console.info("Creating output...");
+ this.updateProgress("Creating output...");
const text = await this.createOutput(res);
if (this.files.length) {
From f2e67604e733c8ed972dc0c44567bb059914dbc1 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 2 Jul 2021 10:49:24 +0530
Subject: [PATCH 122/313] Delint
---
.../views/messages/DateSeparator.tsx | 2 +-
src/utils/exportUtils/ZipStream.ts | 32 +++++++++----------
2 files changed, 17 insertions(+), 17 deletions(-)
diff --git a/src/components/views/messages/DateSeparator.tsx b/src/components/views/messages/DateSeparator.tsx
index fa363c7c4c..d66fcbf118 100644
--- a/src/components/views/messages/DateSeparator.tsx
+++ b/src/components/views/messages/DateSeparator.tsx
@@ -35,7 +35,7 @@ function getDaysArray(): string[] {
interface IProps {
ts: number;
- forExport?: boolean
+ forExport?: boolean;
}
@replaceableComponent("views.messages.DateSeparator")
diff --git a/src/utils/exportUtils/ZipStream.ts b/src/utils/exportUtils/ZipStream.ts
index 098e2ed12c..04cd61fb06 100644
--- a/src/utils/exportUtils/ZipStream.ts
+++ b/src/utils/exportUtils/ZipStream.ts
@@ -55,8 +55,8 @@ class Crc32 {
}
type DataHelper = {
- array: Uint8Array,
- view: DataView,
+ array: Uint8Array;
+ view: DataView;
};
const getDataHelper = (byteLength: number): DataHelper => {
@@ -68,24 +68,24 @@ const getDataHelper = (byteLength: number): DataHelper => {
};
type FileLike = File & {
- directory: string,
- comment: string,
- stream(): ReadableStream,
+ directory: string;
+ comment: string;
+ stream(): ReadableStream;
};
type ZipObj = {
crc?: Crc32,
- uncompressedLength: number,
- compressedLength: number,
- ctrl: ReadableStreamDefaultController,
- writeFooter: Function,
- writeHeader: Function,
- reader?: ReadableStreamDefaultReader,
- offset: number
- header?: DataHelper,
- fileLike: FileLike,
- level: number,
- directory: boolean,
+ uncompressedLength: number;
+ compressedLength: number;
+ ctrl: ReadableStreamDefaultController;
+ writeFooter: Function;
+ writeHeader: Function;
+ reader?: ReadableStreamDefaultReader;
+ offset: number;
+ header?: DataHelper;
+ fileLike: FileLike;
+ level: number;
+ directory: boolean;
};
const pump = (zipObj: ZipObj) => zipObj.reader ? zipObj.reader.read().then(chunk => {
From 3dcc7738f68a5ed13936696f3099014f21581221 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 2 Jul 2021 10:53:19 +0530
Subject: [PATCH 123/313] Add missing semicolon
---
src/utils/exportUtils/ZipStream.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/ZipStream.ts b/src/utils/exportUtils/ZipStream.ts
index 04cd61fb06..bf8020b7b6 100644
--- a/src/utils/exportUtils/ZipStream.ts
+++ b/src/utils/exportUtils/ZipStream.ts
@@ -74,7 +74,7 @@ type FileLike = File & {
};
type ZipObj = {
- crc?: Crc32,
+ crc?: Crc32;
uncompressedLength: number;
compressedLength: number;
ctrl: ReadableStreamDefaultController;
From 87c624d08578de0afab1a4505d0706c243b39c70 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 2 Jul 2021 16:52:33 +0530
Subject: [PATCH 124/313] Use ref for progress updates
---
src/components/views/dialogs/ExportDialog.tsx | 10 +++++-----
src/utils/exportUtils/Exporter.ts | 5 +++--
src/utils/exportUtils/HtmlExport.tsx | 8 ++++----
src/utils/exportUtils/JSONExport.ts | 7 ++++---
src/utils/exportUtils/PlainTextExport.ts | 7 ++++---
5 files changed, 20 insertions(+), 17 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index d82bc1efd8..64cac3364a 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -29,11 +29,11 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [exportType, setExportType] = useState(exportTypes.TIMELINE);
const [includeAttachments, setAttachments] = useState(false);
const [isExporting, setExporting] = useState(false);
- const [exportProgressText, setExportProgressText] = useState("");
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
const sizeLimitRef = useRef<Field>();
const messageCountRef = useRef<Field>();
+ const exportProgressRef = useRef<HTMLParagraphElement>();
const [displayCancel, setCancelWarning] = useState(false);
const [exportCancelled, setExportCancelled] = useState(false);
const [exportSuccessful, setExportSuccessful] = useState(false);
@@ -59,7 +59,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
exportTypes[exportType],
exportOptions,
- setExportProgressText,
+ exportProgressRef,
),
);
break;
@@ -69,7 +69,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
exportTypes[exportType],
exportOptions,
- setExportProgressText,
+ exportProgressRef,
),
);
break;
@@ -79,7 +79,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
exportTypes[exportType],
exportOptions,
- setExportProgressText,
+ exportProgressRef,
),
);
break;
@@ -356,7 +356,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
onFinished={onFinished}
fixedWidth={true}
>
- <p> { exportProgressText } </p>
+ <p ref={exportProgressRef} />
<DialogButtons
primaryButton={_t("Cancel")}
primaryButtonClass="danger"
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 3da058233d..d2b9df23e0 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -10,6 +10,7 @@ import { MatrixClient } from "matrix-js-sdk";
import streamToZIP from "./ZipStream";
import * as ponyfill from "web-streams-polyfill/ponyfill";
import "web-streams-polyfill/ponyfill"; // to support streams API for older browsers
+import { MutableRefObject } from "react";
type FileStream = {
name: string;
@@ -27,7 +28,7 @@ export default abstract class Exporter {
protected room: Room,
protected exportType: exportTypes,
protected exportOptions: exportOptions,
- protected setProgressText: React.Dispatch<React.SetStateAction<string>>,
+ protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
this.cancelled = false;
this.files = [];
@@ -43,7 +44,7 @@ export default abstract class Exporter {
protected updateProgress(progress: string, log = true, show = true): void {
if (log) console.log(progress);
- if (show) this.setProgressText(progress);
+ if (show) this.exportProgressRef.current.innerText = progress;
}
protected addFile(filePath: string, blob: Blob): void {
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index fc963a27b8..51ca9877bf 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MutableRefObject } from "react";
import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
@@ -31,9 +31,9 @@ export default class HTMLExporter extends Exporter {
room: Room,
exportType: exportTypes,
exportOptions: exportOptions,
- setProgressText: React.Dispatch<React.SetStateAction<string>>,
+ exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
- super(room, exportType, exportOptions, setProgressText);
+ super(room, exportType, exportOptions, exportProgressRef);
this.avatars = new Map<string, boolean>();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
this.totalSize = 0;
@@ -333,7 +333,7 @@ export default class HTMLExporter extends Exporter {
let prevEvent = null;
for (let i = 0; i < events.length; i++) {
const event = events[i];
- if (i % 100 == 0) this.updateProgress(`Processing event ${i ? i : 1} out of ${events.length}`, false, true);
+ this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 7b2a4f57a9..ed42936787 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -6,6 +6,7 @@ import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import { EventType } from "matrix-js-sdk/src/@types/event";
+import { MutableRefObject } from "react";
export default class JSONExporter extends Exporter {
protected totalSize: number;
@@ -15,9 +16,9 @@ export default class JSONExporter extends Exporter {
room: Room,
exportType: exportTypes,
exportOptions: exportOptions,
- setProgressText: React.Dispatch<React.SetStateAction<string>>,
+ exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
- super(room, exportType, exportOptions, setProgressText);
+ super(room, exportType, exportOptions, exportProgressRef);
this.totalSize = 0;
this.messages = [];
}
@@ -62,7 +63,7 @@ export default class JSONExporter extends Exporter {
protected async createOutput(events: MatrixEvent[]) {
for (let i = 0; i < events.length; i++) {
const event = events[i];
- if (i % 100 == 0) this.updateProgress(`Processing event ${i ? i : 1} out of ${events.length}`, false, true);
+ this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
this.messages.push(await this.getJSONString(event));
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index c437c52de9..109fa78162 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -7,6 +7,7 @@ import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils";
import { exportOptions } from "./exportUtils";
import { textForEvent } from "../../TextForEvent";
+import { MutableRefObject } from "react";
export default class PlainTextExporter extends Exporter {
protected totalSize: number;
@@ -16,9 +17,9 @@ export default class PlainTextExporter extends Exporter {
room: Room,
exportType: exportTypes,
exportOptions: exportOptions,
- setProgressText: React.Dispatch<React.SetStateAction<string>>,
+ exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
- super(room, exportType, exportOptions, setProgressText);
+ super(room, exportType, exportOptions, exportProgressRef);
this.totalSize = 0;
this.mediaOmitText = !this.exportOptions.attachmentsIncluded
? _t("Media omitted")
@@ -86,7 +87,7 @@ export default class PlainTextExporter extends Exporter {
let content = "";
for (let i = 0; i < events.length; i++) {
const event = events[i];
- if (i % 100 == 0) this.updateProgress(`Processing event ${i ? i : 1} out of ${events.length}`, false, true);
+ this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
const textForEvent = await this._textForEvent(event);
From ed93bf4c770846b02fed5aa9ce0e473ae1fac8c6 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 19 Jul 2021 13:00:37 +0530
Subject: [PATCH 125/313] Reverse events in-place
---
src/utils/exportUtils/Exporter.ts | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index d2b9df23e0..6cee2543d6 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -154,7 +154,7 @@ export default abstract class Exporter {
let prevToken: string|null = null;
let limit = this.getLimit();
- let events: MatrixEvent[] = [];
+ const events: MatrixEvent[] = [];
while (limit) {
const eventsPerCrawl = Math.min(limit, 1000);
@@ -187,7 +187,9 @@ export default abstract class Exporter {
prevToken = res.end;
}
// Reverse the events so that we preserve the order
- events = events.reverse();
+ for (let i = 0; i < Math.floor(events.length/2); i++) {
+ [events[i], events[events.length - i - 1]] = [events[events.length - i - 1], events[i]];
+ }
const decryptionPromises = events
.filter(event => event.isEncrypted())
From f07402d234940740bbf2b34cc416131443a32346 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 19 Jul 2021 13:17:19 +0530
Subject: [PATCH 126/313] Fix types and precompute blob sizes to avoid
overflows
---
src/components/views/messages/MImageBody.tsx | 2 +-
src/utils/exportUtils/HtmlExport.tsx | 18 +++++++++++-------
src/utils/exportUtils/JSONExport.ts | 12 +++++++-----
src/utils/exportUtils/PlainTextExport.ts | 16 ++++++++++------
src/utils/exportUtils/ZipStream.ts | 4 ++--
5 files changed, 31 insertions(+), 21 deletions(-)
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 7987ed007d..ee18046678 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -179,7 +179,7 @@ export default class MImageBody extends React.Component<IProps, IState> {
};
protected getContentUrl(): string {
- const content = this.props.mxEvent.getContent();
+ const content: IMediaEventContent= this.props.mxEvent.getContent();
if (this.props.forExport) return content.url || content.file.url;
const media = mediaFromContent(content);
if (media.isEncrypted) {
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 51ca9877bf..e545a32a17 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -306,13 +306,17 @@ export default class HTMLExporter extends Exporter {
if (this.exportOptions.attachmentsIncluded) {
try {
const blob = await this.getMediaBlob(mxEv);
- this.totalSize += blob.size;
- const filePath = this.getFilePath(mxEv);
- eventTile = await this.getEventTile(mxEv, joined, filePath);
- if (this.totalSize > this.exportOptions.maxSize - 1024 * 512) {
- this.exportOptions.attachmentsIncluded = false;
+ if (this.totalSize + blob.size > this.exportOptions.maxSize) {
+ eventTile = await this.getEventTile(this.createModifiedEvent(this.mediaOmitText, mxEv), joined);
+ } else {
+ this.totalSize += blob.size;
+ const filePath = this.getFilePath(mxEv);
+ eventTile = await this.getEventTile(mxEv, joined, filePath);
+ if (this.totalSize == this.exportOptions.maxSize) {
+ this.exportOptions.attachmentsIncluded = false;
+ }
+ this.addFile(filePath, blob);
}
- this.addFile(filePath, blob);
} catch (e) {
console.log("Error while fetching file" + e);
eventTile = await this.getEventTile(
@@ -339,7 +343,7 @@ export default class HTMLExporter extends Exporter {
content += this._wantsDateSeparator(event, prevEvent) ? this.getDateSeparator(event) : "";
const shouldBeJoined = !this._wantsDateSeparator(event, prevEvent)
- && shouldFormContinuation(prevEvent, event);
+ && shouldFormContinuation(prevEvent, event, false);
const body = await this.createMessageBody(event, shouldBeJoined);
this.totalSize += Buffer.byteLength(body);
content += body;
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index ed42936787..417a7a40f4 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -45,11 +45,13 @@ export default class JSONExporter extends Exporter {
if (this.exportOptions.attachmentsIncluded && this.isAttachment(mxEv)) {
try {
const blob = await this.getMediaBlob(mxEv);
- this.totalSize += blob.size;
- const filePath = this.getFilePath(mxEv);
- this.addFile(filePath, blob);
- if (this.totalSize > this.exportOptions.maxSize - 1024 * 1024) {
- this.exportOptions.attachmentsIncluded = false;
+ if (this.totalSize + blob.size < this.exportOptions.maxSize) {
+ this.totalSize += blob.size;
+ const filePath = this.getFilePath(mxEv);
+ if (this.totalSize == this.exportOptions.maxSize) {
+ this.exportOptions.attachmentsIncluded = false;
+ }
+ this.addFile(filePath, blob);
}
} catch (err) {
console.log("Error fetching file: " + err);
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 109fa78162..00efab0f33 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -66,12 +66,16 @@ export default class PlainTextExporter extends Exporter {
if (this.exportOptions.attachmentsIncluded) {
try {
const blob = await this.getMediaBlob(mxEv);
- this.totalSize += blob.size;
- const filePath = this.getFilePath(mxEv);
- mediaText = " (" + _t("File Attached") + ")";
- this.addFile(filePath, blob);
- if (this.totalSize > this.exportOptions.maxSize - 1024 * 1024) {
- this.exportOptions.attachmentsIncluded = false;
+ if (this.totalSize + blob.size > this.exportOptions.maxSize) {
+ mediaText = ` (${this.mediaOmitText})`;
+ } else {
+ this.totalSize += blob.size;
+ const filePath = this.getFilePath(mxEv);
+ mediaText = " (" + _t("File Attached") + ")";
+ this.addFile(filePath, blob);
+ if (this.totalSize == this.exportOptions.maxSize) {
+ this.exportOptions.attachmentsIncluded = false;
+ }
}
} catch (error) {
mediaText = " (" + _t("Error fetching file") + ")";
diff --git a/src/utils/exportUtils/ZipStream.ts b/src/utils/exportUtils/ZipStream.ts
index bf8020b7b6..2ee355f09c 100644
--- a/src/utils/exportUtils/ZipStream.ts
+++ b/src/utils/exportUtils/ZipStream.ts
@@ -223,8 +223,8 @@ export default function streamToZIP(underlyingSource: UnderlyingSource) {
function closeZip() {
let length = 0;
let index = 0;
- let indexFilename;
- let file;
+ let indexFilename: number;
+ let file: any;
for (indexFilename = 0; indexFilename < filenames.length; indexFilename++) {
file = files[filenames[indexFilename]];
From 6d0fd0322e29a2e4552028689e37109d8e86652e Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 19 Jul 2021 13:23:55 +0530
Subject: [PATCH 127/313] Delint
---
src/components/views/elements/ReplyThread.tsx | 2 +-
src/utils/exportUtils/Exporter.ts | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/components/views/elements/ReplyThread.tsx b/src/components/views/elements/ReplyThread.tsx
index 10cb5b1804..29b3d1b7f5 100644
--- a/src/components/views/elements/ReplyThread.tsx
+++ b/src/components/views/elements/ReplyThread.tsx
@@ -44,7 +44,7 @@ interface IProps {
layout?: Layout;
// Whether to always show a timestamp
alwaysShowTimestamps?: boolean;
- forExport?: boolean,
+ forExport?: boolean;
}
interface IState {
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 6cee2543d6..17e1af1660 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -6,7 +6,7 @@ import { exportOptions, exportTypes } from "./exportUtils";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
-import { MatrixClient } from "matrix-js-sdk";
+import { Direction, MatrixClient } from "matrix-js-sdk";
import streamToZIP from "./ZipStream";
import * as ponyfill from "web-streams-polyfill/ponyfill";
import "web-streams-polyfill/ponyfill"; // to support streams API for older browsers
@@ -158,7 +158,7 @@ export default abstract class Exporter {
while (limit) {
const eventsPerCrawl = Math.min(limit, 1000);
- const res: any = await this.client.createMessagesRequest(this.room.roomId, prevToken, eventsPerCrawl, "b");
+ const res: any = await this.client.createMessagesRequest(this.room.roomId, prevToken, eventsPerCrawl, Direction.Backward);
if (this.cancelled) {
this.cleanUp();
From c0d2dbe7fd203e9c3c081387d1b52810e5f2071d Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 19 Jul 2021 13:28:09 +0530
Subject: [PATCH 128/313] Delint once more
---
src/utils/exportUtils/Exporter.ts | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 17e1af1660..5366436dab 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -158,7 +158,12 @@ export default abstract class Exporter {
while (limit) {
const eventsPerCrawl = Math.min(limit, 1000);
- const res: any = await this.client.createMessagesRequest(this.room.roomId, prevToken, eventsPerCrawl, Direction.Backward);
+ const res = await this.client.createMessagesRequest(
+ this.room.roomId,
+ prevToken,
+ eventsPerCrawl,
+ Direction.Backward,
+ );
if (this.cancelled) {
this.cleanUp();
From 98aa1fe6b3d15b9da6fc495c812cb79f1c8a4eed Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 20 Jul 2021 13:47:51 +0530
Subject: [PATCH 129/313] Move @types/streamsaver to devDependencies
---
package.json | 2 +-
yarn.lock | 8 ++++----
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/package.json b/package.json
index f9766198f7..6611505b4c 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,6 @@
},
"dependencies": {
"@babel/runtime": "^7.12.5",
- "@types/streamsaver": "^2.0.0",
"await-lock": "^2.1.0",
"blurhash": "^1.1.3",
"browser-encrypt-attachment": "^0.3.0",
@@ -145,6 +144,7 @@
"@types/react-dom": "^17.0.2",
"@types/react-transition-group": "^4.4.0",
"@types/sanitize-html": "^2.3.1",
+ "@types/streamsaver": "^2.0.1",
"@types/zxcvbn": "^4.4.0",
"@typescript-eslint/eslint-plugin": "^4.17.0",
"@typescript-eslint/parser": "^4.17.0",
diff --git a/yarn.lock b/yarn.lock
index 7c01d03dff..d018678631 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1709,10 +1709,10 @@
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
-"@types/streamsaver@^2.0.0":
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/@types/streamsaver/-/streamsaver-2.0.0.tgz#2a6bdec0389f41a74c60091d37e84f8840d27ac9"
- integrity sha512-TzUEZk30QmNaS6GAhcOnH/Cl2mO7HCFhQUr6GpzvuoFziFCxmvuyLftHW79agJpZvIrqti9jSiDHMgflUwbejg==
+"@types/streamsaver@^2.0.1":
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/@types/streamsaver/-/streamsaver-2.0.1.tgz#fa5e5b891d1b282be3078c232a30ee004b8e0be0"
+ integrity sha512-I49NtT8w6syBI3Zg3ixCyygTHoTVMY0z2TMRcTgccdIsVd2MwlKk7ITLHLsJtgchUHcOd7QEARG9h0ifcA6l2Q==
"@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
version "2.0.3"
From 6dd3631a17cd8bbc16f586b26817558670f463ac Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 21 Jul 2021 11:48:37 +0530
Subject: [PATCH 130/313] Delint
---
src/components/views/dialogs/ExportDialog.tsx | 8 +++----
src/components/views/messages/MFileBody.tsx | 5 ++--
.../views/right_panel/RoomSummaryCard.tsx | 4 ++--
src/utils/exportUtils/HtmlExport.tsx | 24 +++++++++----------
src/utils/exportUtils/PlainTextExport.ts | 4 ++--
5 files changed, 22 insertions(+), 23 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 64cac3364a..b1de882950 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -193,7 +193,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const exportTypeOptions = Object.keys(exportTypes).map((type) => {
return (
<option key={type} value={type}>
- {textForType(type)}
+ { textForType(type) }
</option>
);
});
@@ -229,7 +229,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
<p>{ _t("The export was cancelled successfully") }</p>
<DialogButtons
- primaryButton={ _t("Okay") }
+ primaryButton={_t("Okay")}
hasCancel={false}
onPrimaryButtonClick={onFinished}
/>
@@ -331,9 +331,9 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
fixedWidth={true}
>
<p>
- {_t(
+ { _t(
"Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
- )}
+ ) }
</p>
<DialogButtons
primaryButton={_t("Stop")}
diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx
index e1cc1705d9..c2578625ac 100644
--- a/src/components/views/messages/MFileBody.tsx
+++ b/src/components/views/messages/MFileBody.tsx
@@ -125,7 +125,6 @@ export function presentableTextForFile(content: IContent, withSize = true): stri
interface IProps extends IBodyProps {
/* whether or not to show the default placeholder for the file. Defaults to true. */
showGenericPlaceholder: boolean;
- forExport?: boolean;
}
interface IState {
@@ -174,9 +173,9 @@ export default class MFileBody extends React.Component<IProps, IState> {
placeholder = (
<div className="mx_MFileBody_info">
<span className="mx_MFileBody_info_icon">
- {this.props.forExport ?
+ { this.props.forExport ?
<img alt="Attachment" className="mx_export_attach_icon" src="icons/attach.svg" />
- : null}
+ : null }
</span>
<span className="mx_MFileBody_info_filename">
{ presentableTextForFile(content, false) }
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index b0d8070b8c..c1b4112423 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -287,8 +287,8 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
<Button className="mx_RoomSummaryCard_icon_settings" onClick={onRoomSettingsClick}>
{ _t("Room settings") }
</Button>
- <Button className="mx_RoomSummaryCard_icon_export" onClick = {onRoomExportClick}>
- {_t("Export chat")}
+ <Button className="mx_RoomSummaryCard_icon_export" onClick={onRoomExportClick}>
+ { _t("Export chat") }
</Button>
</Group>
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index e545a32a17..5b1b8ee8c7 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -63,7 +63,7 @@ export default class HTMLExporter extends Exporter {
name={this.room.name}
title={this.room.name}
url={blob ? avatarPath : null}
- resizeMethod={"crop"}
+ resizeMethod="crop"
/>
);
return renderToStaticMarkup(avatar);
@@ -83,31 +83,31 @@ export default class HTMLExporter extends Exporter {
const exportedText = renderToStaticMarkup(
<p>
- {_t(
+ { _t(
"This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.",
{
exportDate,
},
{
- roomName: () => <b>{this.room.name}</b>,
+ roomName: () => <b>{ this.room.name }</b>,
exporterDetails: () => (
<a
href={`https://matrix.to/#/${exporter}`}
target="_blank"
rel="noopener noreferrer"
>
- {exporterName ? (
+ { exporterName ? (
<>
- <b>{exporterName}</b>
- {exporter}
+ <b>{ exporterName }</b>
+ { exporter }
</>
) : (
- <b>{exporter}</b>
- )}
+ <b>{ exporter }</b>
+ ) }
</a>
),
},
- )}
+ ) }
</p>,
);
@@ -232,7 +232,7 @@ export default class HTMLExporter extends Exporter {
return renderToStaticMarkup(dateSeparator);
}
- protected _wantsDateSeparator(event: MatrixEvent, prevEvent: MatrixEvent) {
+ protected needsDateSeparator(event: MatrixEvent, prevEvent: MatrixEvent) {
if (prevEvent == null) return true;
return wantsDateSeparator(prevEvent.getDate(), event.getDate());
}
@@ -341,8 +341,8 @@ export default class HTMLExporter extends Exporter {
if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
- content += this._wantsDateSeparator(event, prevEvent) ? this.getDateSeparator(event) : "";
- const shouldBeJoined = !this._wantsDateSeparator(event, prevEvent)
+ content += this.needsDateSeparator(event, prevEvent) ? this.getDateSeparator(event) : "";
+ const shouldBeJoined = !this.needsDateSeparator(event, prevEvent)
&& shouldFormContinuation(prevEvent, event, false);
const body = await this.createMessageBody(event, shouldBeJoined);
this.totalSize += Buffer.byteLength(body);
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 00efab0f33..feb4afe618 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -59,7 +59,7 @@ export default class PlainTextExporter extends Exporter {
return `<${rplName}${rplSource}> ${rplText}`;
};
- protected _textForEvent = async (mxEv: MatrixEvent) => {
+ protected plainTextForEvent = async (mxEv: MatrixEvent) => {
const senderDisplayName = mxEv.sender && mxEv.sender.name ? mxEv.sender.name : mxEv.getSender();
let mediaText = "";
if (this.isAttachment(mxEv)) {
@@ -94,7 +94,7 @@ export default class PlainTextExporter extends Exporter {
this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp();
if (!haveTileForEvent(event)) continue;
- const textForEvent = await this._textForEvent(event);
+ const textForEvent = await this.plainTextForEvent(event);
content += textForEvent && `${new Date(event.getTs()).toLocaleString()} - ${textForEvent}\n`;
}
return content;
From c81bac1a4c9d004f1d1f7c4a48d08149f9939266 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 23 Jul 2021 10:47:40 +0530
Subject: [PATCH 131/313] Add try catch for event tile errors
---
src/components/views/messages/CallEvent.tsx | 4 +-
src/utils/exportUtils/HtmlExport.tsx | 56 ++++++++++++---------
2 files changed, 34 insertions(+), 26 deletions(-)
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index c0be3b46bb..f760f29ea2 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -46,7 +46,7 @@ export default class CallEvent extends React.Component<IProps, IState> {
super(props);
this.state = {
- callState: this.props.callEventGrouper.state,
+ callState: this.props.callEventGrouper?.state,
silenced: false,
};
}
@@ -184,7 +184,7 @@ export default class CallEvent extends React.Component<IProps, IState> {
render() {
const event = this.props.mxEvent;
const sender = event.sender ? event.sender.name : event.getSender();
- const isVoice = this.props.callEventGrouper.isVoice;
+ const isVoice = this.props.callEventGrouper?.isVoice;
const callType = isVoice ? _t("Voice call") : _t("Video call");
const content = this.renderContent(this.state.callState);
const className = classNames({
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 5b1b8ee8c7..6f2394242c 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -301,33 +301,41 @@ export default class HTMLExporter extends Exporter {
protected async createMessageBody(mxEv: MatrixEvent, joined = false) {
let eventTile: string;
-
- if (this.isAttachment(mxEv)) {
- if (this.exportOptions.attachmentsIncluded) {
- try {
- const blob = await this.getMediaBlob(mxEv);
- if (this.totalSize + blob.size > this.exportOptions.maxSize) {
- eventTile = await this.getEventTile(this.createModifiedEvent(this.mediaOmitText, mxEv), joined);
- } else {
- this.totalSize += blob.size;
- const filePath = this.getFilePath(mxEv);
- eventTile = await this.getEventTile(mxEv, joined, filePath);
- if (this.totalSize == this.exportOptions.maxSize) {
- this.exportOptions.attachmentsIncluded = false;
+ try {
+ if (this.isAttachment(mxEv)) {
+ if (this.exportOptions.attachmentsIncluded) {
+ try {
+ const blob = await this.getMediaBlob(mxEv);
+ if (this.totalSize + blob.size > this.exportOptions.maxSize) {
+ eventTile = await this.getEventTile(
+ this.createModifiedEvent(this.mediaOmitText, mxEv),
+ joined,
+ );
+ } else {
+ this.totalSize += blob.size;
+ const filePath = this.getFilePath(mxEv);
+ eventTile = await this.getEventTile(mxEv, joined, filePath);
+ if (this.totalSize == this.exportOptions.maxSize) {
+ this.exportOptions.attachmentsIncluded = false;
+ }
+ this.addFile(filePath, blob);
}
- this.addFile(filePath, blob);
+ } catch (e) {
+ console.log("Error while fetching file" + e);
+ eventTile = await this.getEventTile(
+ this.createModifiedEvent(_t("Error fetching file"), mxEv),
+ joined,
+ );
}
- } catch (e) {
- console.log("Error while fetching file" + e);
- eventTile = await this.getEventTile(
- this.createModifiedEvent(_t("Error fetching file"), mxEv),
- joined,
- );
+ } else {
+ eventTile = await this.getEventTile(this.createModifiedEvent(this.mediaOmitText, mxEv), joined);
}
- } else {
- eventTile = await this.getEventTile(this.createModifiedEvent(this.mediaOmitText, mxEv), joined);
- }
- } else eventTile = await this.getEventTile(mxEv, joined);
+ } else eventTile = await this.getEventTile(mxEv, joined);
+ } catch (e) {
+ // TODO: Handle callEvent errors
+ console.error(e);
+ eventTile = await this.getEventTile(this.createModifiedEvent("Error parsing HTML", mxEv), joined);
+ }
return eventTile;
}
From 3d4d1d32d9cae26a73375d3932fd618cbca2e3ab Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 00:09:59 +0530
Subject: [PATCH 132/313] Modify design according to the design team
---
res/css/views/dialogs/_ExportDialog.scss | 49 +++++
src/components/views/dialogs/ExportDialog.tsx | 170 ++++++++++--------
src/i18n/strings/en_EN.json | 8 +-
src/utils/exportUtils/Exporter.ts | 10 +-
src/utils/exportUtils/HtmlExport.tsx | 4 +-
src/utils/exportUtils/exportUtils.ts | 2 +-
6 files changed, 154 insertions(+), 89 deletions(-)
diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
index d3af6c843b..03b7b2a8d3 100644
--- a/res/css/views/dialogs/_ExportDialog.scss
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -9,6 +9,34 @@
margin-bottom: 12px;
}
+ &.mx_ExportDialog_Exporting .mx_ExportDialog_options {
+ pointer-events: none;
+ }
+
+ .mx_ExportDialog_progress {
+ .mx_Dialog_buttons {
+ margin-top: unset;
+ margin-left: 18px;
+ }
+ .mx_ExportDialog_spinner {
+ animation: mx_rotate 2s linear infinite;
+ z-index: 2;
+ position: relative;
+ margin-right: 10px;
+ width: 24px;
+ height: 24px;
+ & .mx_ExportDialog_spinner_path {
+ stroke: #0dbd8b;
+ stroke-linecap: round;
+ animation: mx_dash 1.5s ease-in-out infinite;
+ }
+ }
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ }
+
.mx_RadioButton > .mx_RadioButton_content {
margin-top: 5px;
margin-bottom: 5px;
@@ -22,3 +50,24 @@
padding: 9px 10px;
}
}
+
+@keyframes mx_rotate {
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes mx_dash {
+ 0% {
+ stroke-dasharray: 1, 150;
+ stroke-dashoffset: 0;
+ }
+ 50% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -35;
+ }
+ 100% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -124;
+ }
+}
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index b1de882950..570308edc1 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -197,6 +197,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
</option>
);
});
+
let messageCount = null;
if (exportType === exportTypes.LAST_N_MESSAGES) {
messageCount = (
@@ -254,72 +255,6 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
/>
</BaseDialog>
);
- } else if (!isExporting) {
- // Display export settings
- return (
- <BaseDialog
- title={_t("Export Chat")}
- className="mx_ExportDialog"
- contentId="mx_Dialog_content"
- hasCancel={true}
- onFinished={onFinished}
- fixedWidth={true}
- >
- <p>
- { _t("Select from the options below to export chats from your timeline") }
- </p>
-
- <span className="mx_ExportDialog_subheading">{ _t("Format") }</span>
-
- <StyledRadioGroup
- name="exportFormat"
- value={exportFormat}
- onChange={(key) => setExportFormat(exportFormats[key])}
- definitions={exportFormatOptions}
- />
-
- <span className="mx_ExportDialog_subheading">{ _t("Messages") }</span>
-
- <Field
- element="select"
- value={exportType}
- onChange={(e) => {
- setExportType(exportTypes[e.target.value]);
- }}
- >
- { exportTypeOptions }
- </Field>
- { messageCount }
-
- <span className="mx_ExportDialog_subheading">{ _t("Size Limit") }</span>
-
- <Field
- type="number"
- autoComplete="off"
- onValidate={onValidateSize}
- element="input"
- ref={sizeLimitRef}
- value={sizeLimit.toString()}
- postfixComponent={sizePostFix}
- onChange={(e) => setSizeLimit(parseInt(e.target.value))}
- />
-
- <StyledCheckbox
- checked={includeAttachments}
- onChange={(e) =>
- setAttachments((e.target as HTMLInputElement).checked)
- }
- >
- { _t("Include Attachments") }
- </StyledCheckbox>
-
- <DialogButtons
- primaryButton={_t("Export")}
- onPrimaryButtonClick={onExportClick}
- onCancel={() => onFinished(false)}
- />
- </BaseDialog>
- );
} else if (displayCancel) {
// Display cancel warning
return (
@@ -346,23 +281,104 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
</BaseDialog>
);
} else {
- // Display progress dialog
+ // Display export settings
return (
<BaseDialog
- title={_t("Exporting your data...")}
- className="mx_ExportDialog"
+ title={_t("Export Chat")}
+ className={`mx_ExportDialog ${isExporting && "mx_ExportDialog_Exporting"}`}
contentId="mx_Dialog_content"
- hasCancel={false}
+ hasCancel={true}
onFinished={onFinished}
fixedWidth={true}
>
- <p ref={exportProgressRef} />
- <DialogButtons
- primaryButton={_t("Cancel")}
- primaryButtonClass="danger"
- hasCancel={false}
- onPrimaryButtonClick={onCancel}
- />
+ <p>
+ { _t(
+ "Select from the options below to export chats from your timeline",
+ ) }
+ </p>
+
+ <span className="mx_ExportDialog_subheading">
+ { _t("Format") }
+ </span>
+
+ <div className="mx_ExportDialog_options">
+ <StyledRadioGroup
+ name="exportFormat"
+ value={exportFormat}
+ onChange={(key) => setExportFormat(exportFormats[key])}
+ definitions={exportFormatOptions}
+ />
+
+ <span className="mx_ExportDialog_subheading">
+ { _t("Messages") }
+ </span>
+
+ <Field
+ element="select"
+ value={exportType}
+ onChange={(e) => {
+ setExportType(exportTypes[e.target.value]);
+ }}
+ >
+ { exportTypeOptions }
+ </Field>
+ { messageCount }
+
+ <span className="mx_ExportDialog_subheading">
+ { _t("Size Limit") }
+ </span>
+
+ <Field
+ type="number"
+ autoComplete="off"
+ onValidate={onValidateSize}
+ element="input"
+ ref={sizeLimitRef}
+ value={sizeLimit.toString()}
+ postfixComponent={sizePostFix}
+ onChange={(e) => setSizeLimit(parseInt(e.target.value))}
+ />
+
+ <StyledCheckbox
+ checked={includeAttachments}
+ onChange={(e) =>
+ setAttachments(
+ (e.target as HTMLInputElement).checked,
+ )
+ }
+ >
+ { _t("Include Attachments") }
+ </StyledCheckbox>
+ </div>
+ { isExporting ? (
+ <div className = "mx_ExportDialog_progress">
+ <svg className="mx_ExportDialog_spinner" viewBox="0 0 50 50">
+ <circle
+ className="mx_ExportDialog_spinner_path"
+ cx="25"
+ cy="25"
+ r="20"
+ fill="none"
+ stroke-width="5"
+ ></circle>
+ </svg>
+ <p ref={exportProgressRef}>
+ { _t("Processing...") }
+ </p>
+ <DialogButtons
+ primaryButton={_t("Cancel")}
+ primaryButtonClass="danger"
+ hasCancel={false}
+ onPrimaryButtonClick={onCancel}
+ />
+ </div>
+ ) : (
+ <DialogButtons
+ primaryButton={_t("Export")}
+ onPrimaryButtonClick={onExportClick}
+ onCancel={() => onFinished(false)}
+ />
+ ) }
</BaseDialog>
);
}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index d69b368550..01485741ef 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -730,7 +730,7 @@
"JSON": "JSON",
"Plain Text": "Plain Text",
"From the beginning": "From the beginning",
- "For a number of messages": "For a number of messages",
+ "Specify a number of messages": "Specify a number of messages",
"Current Timeline": "Current Timeline",
"Media omitted": "Media omitted",
"Media omitted - file size limit exceeded": "Media omitted - file size limit exceeded",
@@ -2272,15 +2272,15 @@
"Okay": "Okay",
"Export Successful": "Export Successful",
"Your messages were successfully exported": "Your messages were successfully exported",
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
+ "Stop": "Stop",
"Export Chat": "Export Chat",
"Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
"Format": "Format",
"Size Limit": "Size Limit",
"Include Attachments": "Include Attachments",
+ "Processing...": "Processing...",
"Export": "Export",
- "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
- "Stop": "Stop",
- "Exporting your data...": "Exporting your data...",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
"Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.",
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 5366436dab..d43f937c7b 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -44,7 +44,7 @@ export default abstract class Exporter {
protected updateProgress(progress: string, log = true, show = true): void {
if (log) console.log(progress);
- if (show) this.exportProgressRef.current.innerText = progress;
+ if (show && this.exportProgressRef.current) this.exportProgressRef.current.innerText = progress;
}
protected addFile(filePath: string, blob: Blob): void {
@@ -64,7 +64,7 @@ export default abstract class Exporter {
// Create a writable stream to the directory
this.fileStream = streamSaver.createWriteStream(filename);
- if (!this.cancelled) this.updateProgress("Generating a ZIP...");
+ if (!this.cancelled) this.updateProgress("Generating a ZIP");
else return this.cleanUp();
this.writer = this.fileStream.getWriter();
@@ -79,7 +79,7 @@ export default abstract class Exporter {
if (this.cancelled) return this.cleanUp();
- this.updateProgress("Writing to the file system...");
+ this.updateProgress("Writing to the file system");
const reader = readableZipStream.getReader();
await this.pumpToFileStream(reader);
@@ -186,8 +186,8 @@ export default abstract class Exporter {
}
this.updateProgress(
("Fetched " + events.length + " events ") + (this.exportType === exportTypes.LAST_N_MESSAGES
- ? `out of ${this.exportOptions.numberOfMessages}...`
- : "so far..."),
+ ? `out of ${this.exportOptions.numberOfMessages}`
+ : "so far"),
);
prevToken = res.end;
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 6f2394242c..3f98b4c92a 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -361,8 +361,8 @@ export default class HTMLExporter extends Exporter {
}
public async export() {
- this.updateProgress("Starting export process...", true, false);
- this.updateProgress("Fetching events...");
+ this.updateProgress("Starting export process", true, false);
+ this.updateProgress("Fetching events");
const fetchStart = performance.now();
const res = await this.getRequiredEvents();
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 6fa5ab9869..3e281269bf 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -29,7 +29,7 @@ export const textForType = (type: string): string => {
case exportTypes.BEGINNING:
return _t("From the beginning");
case exportTypes.LAST_N_MESSAGES:
- return _t("For a number of messages");
+ return _t("Specify a number of messages");
case exportTypes.TIMELINE:
return _t("Current Timeline");
// case exportTypes.START_DATE:
From 2487fe73803439ffff70694e6511f06aa53522c3 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 00:13:52 +0530
Subject: [PATCH 133/313] Delint
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 570308edc1..bb7ba1ed86 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -351,7 +351,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
</StyledCheckbox>
</div>
{ isExporting ? (
- <div className = "mx_ExportDialog_progress">
+ <div className="mx_ExportDialog_progress">
<svg className="mx_ExportDialog_spinner" viewBox="0 0 50 50">
<circle
className="mx_ExportDialog_spinner_path"
From 9fe64c34a50a7a833c39952f7b93db78e8d8db01 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 00:24:04 +0530
Subject: [PATCH 134/313] Delint
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
src/components/views/messages/MVideoBody.tsx | 3 +--
2 files changed, 2 insertions(+), 3 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index bb7ba1ed86..8dd6eb92fd 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -360,7 +360,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
r="20"
fill="none"
stroke-width="5"
- ></circle>
+ />
</svg>
<p ref={exportProgressRef}>
{ _t("Processing...") }
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 9ec45c2fb6..3239482515 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -279,8 +279,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
width={width}
poster={poster}
onPlay={this.videoOnPlay}
- >
- </video>
+ />
{ fileBody }
</span>
);
From 30a64a1b5a0e01c565771c605dd4d5a97a5da7c1 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 12:41:36 +0530
Subject: [PATCH 135/313] Gray out and hide some options during export
---
res/css/views/dialogs/_ExportDialog.scss | 30 +++++++++++++++++--
src/components/views/dialogs/ExportDialog.tsx | 6 ++--
src/i18n/strings/en_EN.json | 1 +
3 files changed, 31 insertions(+), 6 deletions(-)
diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
index 03b7b2a8d3..d01f258d62 100644
--- a/res/css/views/dialogs/_ExportDialog.scss
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -9,8 +9,32 @@
margin-bottom: 12px;
}
- &.mx_ExportDialog_Exporting .mx_ExportDialog_options {
- pointer-events: none;
+ &.mx_ExportDialog_Exporting {
+ .mx_ExportDialog_options {
+ pointer-events: none;
+ }
+
+ .mx_RadioButton input[type="radio"]:checked + div > div {
+ background: gray;
+ }
+
+ .mx_Field_valid.mx_Field label,
+ .mx_Field_valid.mx_Field:focus-within label {
+ color: unset;
+ }
+
+ .mx_Field_valid.mx_Field,
+ .mx_Field_valid.mx_Field:focus-within {
+ border-color: unset;
+ }
+
+ .mx_Checkbox
+ input[type="checkbox"]:checked
+ + label
+ > .mx_Checkbox_background {
+ background: gray;
+ border-color: gray;
+ }
}
.mx_ExportDialog_progress {
@@ -26,7 +50,7 @@
width: 24px;
height: 24px;
& .mx_ExportDialog_spinner_path {
- stroke: #0dbd8b;
+ stroke: $accent-color;
stroke-linecap: round;
animation: mx_dash 1.5s ease-in-out infinite;
}
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 8dd6eb92fd..82ea111ed4 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -284,18 +284,18 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
// Display export settings
return (
<BaseDialog
- title={_t("Export Chat")}
+ title={isExporting ? _t("Exporting your data") : _t("Export Chat")}
className={`mx_ExportDialog ${isExporting && "mx_ExportDialog_Exporting"}`}
contentId="mx_Dialog_content"
hasCancel={true}
onFinished={onFinished}
fixedWidth={true}
>
- <p>
+ { !isExporting ? <p>
{ _t(
"Select from the options below to export chats from your timeline",
) }
- </p>
+ </p> : null}
<span className="mx_ExportDialog_subheading">
{ _t("Format") }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 46926ee798..a55576921c 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2300,6 +2300,7 @@
"Your messages were successfully exported": "Your messages were successfully exported",
"Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
"Stop": "Stop",
+ "Exporting your data": "Exporting your data",
"Export Chat": "Export Chat",
"Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
"Format": "Format",
From 06d84a16d014ff18cec417f0cbdd988f36967702 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 12:58:17 +0530
Subject: [PATCH 136/313] Delint
---
res/css/views/dialogs/_ExportDialog.scss | 18 +++++++++++-------
1 file changed, 11 insertions(+), 7 deletions(-)
diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
index d01f258d62..4255768447 100644
--- a/res/css/views/dialogs/_ExportDialog.scss
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -14,24 +14,28 @@
pointer-events: none;
}
+ .mx_Field_select::before {
+ display: none;
+ }
+
.mx_RadioButton input[type="radio"]:checked + div > div {
background: gray;
}
+ .mx_RadioButton input[type=radio]:checked + div {
+ border-color: unset;
+ }
+
.mx_Field_valid.mx_Field label,
.mx_Field_valid.mx_Field:focus-within label {
color: unset;
}
- .mx_Field_valid.mx_Field,
- .mx_Field_valid.mx_Field:focus-within {
- border-color: unset;
+ .mx_Field_valid.mx_Field, .mx_Field_valid.mx_Field:focus-within {
+ border-color: $input-border-color;
}
- .mx_Checkbox
- input[type="checkbox"]:checked
- + label
- > .mx_Checkbox_background {
+ .mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background {
background: gray;
border-color: gray;
}
From ad1da9ea821fae42e6c96dd86a32a265a2c91c89 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 13:03:15 +0530
Subject: [PATCH 137/313] Delint2
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 82ea111ed4..82c38763c3 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -295,7 +295,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
{ _t(
"Select from the options below to export chats from your timeline",
) }
- </p> : null}
+ </p> : null }
<span className="mx_ExportDialog_subheading">
{ _t("Format") }
From a4da8f9e9ef0e553c947ea7ae88d76a0aa435286 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 15:07:45 +0530
Subject: [PATCH 138/313] Update exportCSS
---
src/utils/exportUtils/exportCSS.ts | 7612 ++++++++++++++++++++++++----
1 file changed, 6732 insertions(+), 880 deletions(-)
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 7d07f19998..49f3bf3bb7 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -3,9 +3,11 @@ const lightCSS = `@charset "utf-8";
.hljs-addition {
background: #dfd;
}
+
.hljs-deletion {
background: #fdd;
}
+
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
.mx_LeftPanel {
background-image: unset;
@@ -24,31 +26,40 @@ const lightCSS = `@charset "utf-8";
backdrop-filter: blur(40px);
}
}
+
.mx_RoomSublist_showNButton {
background-color: transparent !important;
}
+
a:hover,
a:link,
a:visited {
text-decoration: none;
}
+
:root {
font-size: 10px;
--transition-short: 0.1s;
--transition-standard: 0.3s;
}
+
@media (prefers-reduced-motion) {
:root {
--transition-short: 0;
--transition-standard: 0;
}
}
+
html {
height: 100%;
overflow: hidden;
+ -ms-scroll-chaining: none;
+ overscroll-behavior: none;
}
+
body {
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
font-size: 1.5rem;
background-color: #fff;
color: #2e2f32;
@@ -57,26 +68,33 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
+
code,
pre {
- font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+ font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
+ monospace;
font-size: 100% !important;
}
+
.error,
.text-error,
.text-warning,
.warning {
color: #ff4b55;
}
+
.text-success {
color: #0dbd8b;
}
+
.text-muted {
color: #61708b;
}
+
b {
font-weight: 700;
}
+
h2 {
color: #2e2f32;
font-weight: 400;
@@ -84,66 +102,81 @@ h2 {
margin-top: 16px;
margin-bottom: 16px;
}
+
a:hover,
a:link,
a:visited {
color: #238cf5;
}
+
input[type="password"],
input[type="search"],
input[type="text"] {
padding: 9px;
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
font-size: 1.4rem;
font-weight: 600;
min-width: 0;
}
+
input[type="search"].mx_textinput_icon,
input[type="text"].mx_textinput_icon {
padding-left: 36px;
background-repeat: no-repeat;
background-position: 10px;
}
+
input[type="search"].mx_textinput_icon.mx_textinput_search,
input[type="text"].mx_textinput_icon.mx_textinput_search {
background-image: url(../../img/feather-customised/search-input.044bfa7.svg);
}
+
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
+
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
opacity: 1;
}
+
input::-moz-placeholder,
textarea::-moz-placeholder {
opacity: 1;
}
+
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
opacity: 1;
}
+
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
opacity: 1;
}
+
input::placeholder,
textarea::placeholder {
opacity: 1;
}
+
input[type="password"],
input[type="text"],
textarea {
background-color: transparent;
color: #2e2f32;
}
+
textarea {
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
color: #2e2f32;
}
+
input[type="password"]:focus,
input[type="text"]:focus,
textarea:focus {
@@ -151,9 +184,11 @@ textarea:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
+
:focus:not(.focus-visible) {
outline: none;
}
+
.mx_Dialog .mx_textinput > input[type="search"],
.mx_Dialog .mx_textinput > input[type="text"],
.mx_MatrixChat .mx_textinput > input[type="search"],
@@ -164,6 +199,7 @@ textarea:focus {
flex: 1;
color: #2e2f32;
}
+
.mx_Dialog .mx_textinput,
.mx_Dialog
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
@@ -187,6 +223,7 @@ textarea:focus {
border: 1px solid rgba(46, 47, 50, 0.1);
margin: 9px;
}
+
.mx_Dialog .mx_textinput,
.mx_MatrixChat .mx_textinput {
display: -webkit-box;
@@ -196,6 +233,7 @@ textarea:focus {
-ms-flex-align: center;
align-items: center;
}
+
.mx_Dialog .mx_textinput input::-webkit-input-placeholder,
.mx_Dialog
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
@@ -212,6 +250,7 @@ textarea:focus {
> input[type="text"]::-webkit-input-placeholder {
color: rgba(159, 169, 186, 0.75);
}
+
.mx_Dialog .mx_textinput input::-moz-placeholder,
.mx_Dialog
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
@@ -228,6 +267,7 @@ textarea:focus {
> input[type="text"]::-moz-placeholder {
color: rgba(159, 169, 186, 0.75);
}
+
.mx_Dialog .mx_textinput input:-ms-input-placeholder,
.mx_Dialog
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
@@ -244,6 +284,7 @@ textarea:focus {
> input[type="text"]:-ms-input-placeholder {
color: rgba(159, 169, 186, 0.75);
}
+
.mx_Dialog .mx_textinput input::-ms-input-placeholder,
.mx_Dialog
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
@@ -260,6 +301,7 @@ textarea:focus {
> input[type="text"]::-ms-input-placeholder {
color: rgba(159, 169, 186, 0.75);
}
+
.mx_Dialog .mx_textinput input::placeholder,
.mx_Dialog
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
@@ -276,9 +318,11 @@ textarea:focus {
> input[type="text"]::placeholder {
color: rgba(159, 169, 186, 0.75);
}
+
.dark-panel {
background-color: #f2f5f8;
}
+
.dark-panel .mx_textinput,
.dark-panel
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
@@ -290,6 +334,7 @@ textarea:focus {
background-color: #fff;
border: none;
}
+
.light-panel .mx_textinput,
.light-panel
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
@@ -301,18 +346,23 @@ textarea:focus {
background-color: #f2f5f8;
border: none;
}
+
::-moz-focus-inner {
border: 0;
}
+
#mx_theme_accentColor {
color: #0dbd8b;
}
+
#mx_theme_secondaryAccentColor {
color: #f2f5f8;
}
+
#mx_theme_tertiaryAccentColor {
color: #d3efe1;
}
+
.mx_Dialog_wrapper {
position: fixed;
z-index: 4000;
@@ -330,6 +380,7 @@ textarea:focus {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_Dialog {
background-color: #fff;
color: #747474;
@@ -344,13 +395,17 @@ textarea:focus {
border-radius: 8px;
overflow-y: auto;
}
+
.mx_Dialog_fixedWidth {
width: 60vw;
max-width: 704px;
}
+
.mx_Dialog_staticWrapper .mx_Dialog {
z-index: 4010;
+ contain: content;
}
+
.mx_Dialog_background {
position: fixed;
top: 0;
@@ -361,16 +416,20 @@ textarea:focus {
opacity: 0.8;
z-index: 4011;
}
+
.mx_Dialog_background.mx_Dialog_staticBackground {
z-index: 4009;
}
+
.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background {
opacity: 0.4;
}
+
.mx_Dialog_lightbox .mx_Dialog_background {
opacity: 0.95;
background-color: #000;
}
+
.mx_Dialog_lightbox .mx_Dialog {
border-radius: 0;
background-color: transparent;
@@ -381,10 +440,12 @@ textarea:focus {
pointer-events: none;
padding: 0;
}
+
.mx_Dialog_header {
position: relative;
margin-bottom: 10px;
}
+
.mx_Dialog_titleImage {
vertical-align: sub;
width: 25px;
@@ -392,21 +453,26 @@ textarea:focus {
margin-left: -2px;
margin-right: 4px;
}
+
.mx_Dialog_title {
font-size: 2.2rem;
font-weight: 600;
line-height: 3.6rem;
color: #45474a;
}
+
.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
text-align: center;
}
+
.mx_Dialog_header.mx_Dialog_headerWithCancel > .mx_Dialog_title {
margin-right: 20px;
}
+
.mx_Dialog_title.danger {
color: #ff4b55;
}
+
.mx_Dialog_cancelButton {
-webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
mask: url(../../img/feather-customised/cancel.23c2689.svg);
@@ -424,26 +490,31 @@ textarea:focus {
top: 10px;
right: 0;
}
+
.mx_Dialog_content {
margin: 24px 0 68px;
font-size: 1.4rem;
color: #2e2f32;
word-wrap: break-word;
}
+
.mx_Dialog_buttons {
margin-top: 20px;
text-align: right;
}
+
.mx_Dialog_buttons .mx_Dialog_buttons_additive {
float: left;
}
+
.mx_Dialog_buttons button,
.mx_Dialog_buttons input[type="submit"],
.mx_Dialog button,
.mx_Dialog input[type="submit"] {
vertical-align: middle;
border-radius: 8px;
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
font-size: 1.4rem;
color: #fff;
background-color: #0dbd8b;
@@ -460,9 +531,11 @@ textarea:focus {
background-color: #fff;
font-family: inherit;
}
+
.mx_Dialog button:last-child {
margin-right: 0;
}
+
.mx_Dialog_buttons button:focus,
.mx_Dialog_buttons input[type="submit"]:focus,
.mx_Dialog button:focus,
@@ -470,6 +543,7 @@ textarea:focus {
-webkit-filter: brightness(105%);
filter: brightness(105%);
}
+
.mx_Dialog_buttons button.mx_Dialog_primary,
.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary,
.mx_Dialog button.mx_Dialog_primary,
@@ -478,6 +552,7 @@ textarea:focus {
background-color: #0dbd8b;
min-width: 156px;
}
+
.mx_Dialog_buttons button.danger,
.mx_Dialog_buttons input[type="submit"].danger,
.mx_Dialog button.danger,
@@ -486,11 +561,13 @@ textarea:focus {
border: 1px solid #ff4b55;
color: #fff;
}
+
.mx_Dialog button.warning,
.mx_Dialog input[type="submit"].warning {
border: 1px solid #ff4b55;
color: #ff4b55;
}
+
.mx_Dialog_buttons button:disabled,
.mx_Dialog_buttons input[type="submit"]:disabled,
.mx_Dialog button:disabled,
@@ -499,6 +576,7 @@ textarea:focus {
border: 1px solid #747474;
opacity: 0.7;
}
+
.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
width: auto;
border-radius: 8px;
@@ -508,11 +586,13 @@ textarea:focus {
overflow-x: hidden;
overflow-y: hidden;
}
+
.mx_GeneralButton {
vertical-align: middle;
border: 0;
border-radius: 8px;
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
font-size: 1.4rem;
color: #fff;
background-color: #0dbd8b;
@@ -524,14 +604,17 @@ textarea:focus {
display: inline;
margin: auto;
}
+
.mx_linkButton {
cursor: pointer;
color: #0dbd8b;
}
+
.mx_TextInputDialog_label {
text-align: left;
padding-bottom: 12px;
}
+
.mx_TextInputDialog_input {
font-size: 1.5rem;
border-radius: 3px;
@@ -540,11 +623,13 @@ textarea:focus {
color: #2e2f32;
background-color: #fff;
}
+
.mx_textButton {
vertical-align: middle;
border: 0;
border-radius: 8px;
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
font-size: 1.4rem;
color: #fff;
background-color: #0dbd8b;
@@ -555,78 +640,100 @@ textarea:focus {
font-size: 1.5rem;
padding: 0 1.5em;
}
+
.mx_button_row {
margin-top: 69px;
}
+
.mx_Username_color1 {
color: #368bd6;
}
+
.mx_Username_color2 {
color: #ac3ba8;
}
+
.mx_Username_color3 {
color: #0dbd8b;
}
+
.mx_Username_color4 {
color: #e64f7a;
}
+
.mx_Username_color5 {
color: #ff812d;
}
+
.mx_Username_color6 {
color: #2dc2c5;
}
+
.mx_Username_color7 {
color: #5c56f5;
}
+
.mx_Username_color8 {
color: #74d12c;
}
+
.mx_Tooltip_dark .mx_Tooltip_chevron:after {
border-right-color: #27303a;
}
+
html {
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
+
* {
scrollbar-width: thin;
}
+
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: transparent;
}
+
::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.2);
}
+
.mx_AutoHideScrollbar:hover {
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
+
.mx_AutoHideScrollbar:hover::-webkit-scrollbar {
background-color: transparent;
}
+
.mx_AutoHideScrollbar:hover::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
}
+
.mx_AutoHideScrollbar {
overflow-x: hidden;
overflow-y: auto;
overflow-y: overlay;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
+
.mx_AutoHideScrollbar::-webkit-scrollbar,
.mx_AutoHideScrollbar::-webkit-scrollbar-thumb {
background-color: transparent;
}
+
.mx_AutoHideScrollbar {
scrollbar-color: transparent transparent;
}
+
.mx_CompatibilityPage {
width: 100%;
height: 100%;
background-color: #e55;
}
+
.mx_CompatibilityPage_box {
position: absolute;
top: 0;
@@ -640,10 +747,12 @@ html {
padding: 10px;
background-color: #fcc;
}
+
.mx_ContextualMenu_wrapper {
position: fixed;
z-index: 5000;
}
+
.mx_ContextualMenu_background {
position: fixed;
top: 0;
@@ -653,6 +762,7 @@ html {
opacity: 1;
z-index: 5000;
}
+
.mx_ContextualMenu {
border-radius: 8px;
-webkit-box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
@@ -662,13 +772,17 @@ html {
position: absolute;
font-size: 1.4rem;
z-index: 5001;
+ contain: content;
}
+
.mx_ContextualMenu_right {
right: 0;
}
+
.mx_ContextualMenu.mx_ContextualMenu_withChevron_right {
right: 8px;
}
+
.mx_ContextualMenu_chevron_right {
position: absolute;
right: -8px;
@@ -679,12 +793,15 @@ html {
border-left: 8px solid #fff;
border-bottom: 8px solid transparent;
}
+
.mx_ContextualMenu_left {
left: 0;
}
+
.mx_ContextualMenu.mx_ContextualMenu_withChevron_left {
left: 8px;
}
+
.mx_ContextualMenu_chevron_left {
position: absolute;
left: -8px;
@@ -695,12 +812,15 @@ html {
border-right: 8px solid #fff;
border-bottom: 8px solid transparent;
}
+
.mx_ContextualMenu_top {
top: 0;
}
+
.mx_ContextualMenu.mx_ContextualMenu_withChevron_top {
top: 8px;
}
+
.mx_ContextualMenu_chevron_top {
position: absolute;
left: 0;
@@ -711,12 +831,15 @@ html {
border-bottom: 8px solid #fff;
border-right: 8px solid transparent;
}
+
.mx_ContextualMenu_bottom {
bottom: 0;
}
+
.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
bottom: 8px;
}
+
.mx_ContextualMenu_chevron_bottom {
position: absolute;
left: 0;
@@ -727,16 +850,14 @@ html {
border-top: 8px solid #fff;
border-right: 8px solid transparent;
}
-.mx_ContextualMenu_spinner {
- display: block;
- margin: 0 auto;
-}
+
.mx_CreateRoom {
width: 960px;
margin-left: auto;
margin-right: auto;
color: #2e2f32;
}
+
.mx_CreateRoom input,
.mx_CreateRoom textarea {
border-radius: 3px;
@@ -746,13 +867,16 @@ html {
padding: 9px;
margin-top: 6px;
}
+
.mx_CreateRoom_description {
width: 330px;
}
+
.mx_CustomRoomTagPanel {
background-color: hsla(0, 0%, 91%, 0.77);
max-height: 40vh;
}
+
.mx_CustomRoomTagPanel_scroller {
max-height: inherit;
display: -webkit-box;
@@ -766,18 +890,21 @@ html {
-ms-flex-align: center;
align-items: center;
}
+
.mx_CustomRoomTagPanel .mx_AccessibleButton {
margin: 0 auto;
width: 40px;
padding: 10px 0 9px;
position: relative;
}
+
.mx_CustomRoomTagPanel .mx_BaseAvatar_image {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 40px;
height: 40px;
}
+
.mx_CustomRoomTagPanel
.mx_AccessibleButton.CustomRoomTagPanel_tileSelected:before {
content: "";
@@ -789,6 +916,7 @@ html {
border-radius: 0 3px 3px 0;
top: 5px;
}
+
.mx_FilePanel {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
@@ -801,6 +929,7 @@ html {
display: -ms-flexbox;
display: flex;
}
+
.mx_FilePanel .mx_RoomView_messageListWrapper {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
@@ -813,23 +942,34 @@ html {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_FilePanel .mx_RoomView_MessageList {
width: 100%;
}
+
.mx_FilePanel .mx_EventTile_avatar,
.mx_FilePanel .mx_RoomView_MessageList h2 {
display: none;
}
-.mx_FilePanel .mx_EventTile {
+
+.mx_FilePanel .mx_EventTile:not([data-layout="bubble"]) {
word-break: break-word;
- margin-top: 32px;
+ margin-top: 10px;
+ padding-top: 0;
}
+
+.mx_FilePanel .mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_line {
+ padding-left: 0;
+}
+
.mx_FilePanel .mx_EventTile .mx_MImageBody {
margin-right: 0;
}
+
.mx_FilePanel .mx_EventTile .mx_MFileBody {
line-height: 2.4rem;
}
+
.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
padding-top: 8px;
display: -webkit-box;
@@ -838,12 +978,14 @@ html {
font-size: 1.4rem;
color: #acacac;
}
+
.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
color: #747474;
}
+
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
@@ -852,15 +994,18 @@ html {
text-align: right;
white-space: nowrap;
}
+
.mx_FilePanel .mx_EventTile_senderDetails {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: -2px;
}
+
.mx_FilePanel .mx_EventTile_senderDetailsLink {
text-decoration: none;
}
+
.mx_FilePanel .mx_EventTile .mx_SenderProfile {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
@@ -871,6 +1016,7 @@ html {
opacity: 1;
color: #acacac;
}
+
.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
@@ -882,20 +1028,21 @@ html {
opacity: 1;
color: #acacac;
}
+
.mx_FilePanel .mx_EventTile_line {
margin-right: 0;
padding-left: 0;
}
+
.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
padding-left: 0;
}
-.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
- background-color: #fff;
-}
+
.mx_FilePanel_empty:before {
-webkit-mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
}
+
.mx_GenericErrorPage {
width: 100%;
height: 100%;
@@ -910,6 +1057,7 @@ html {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_GenericErrorPage_box {
display: inline;
width: 500px;
@@ -918,6 +1066,7 @@ html {
padding: 10px 10px 20px;
background-color: #fcc;
}
+
.mx_GroupFilterPanel {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -939,21 +1088,25 @@ html {
justify-content: space-between;
min-height: 0;
}
+
.mx_GroupFilterPanel_items_selected {
cursor: pointer;
}
+
.mx_GroupFilterPanel .mx_GroupFilterPanel_divider {
height: 0;
width: 90%;
border: none;
border-bottom: 1px solid #8d99a5;
}
+
.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: 100%;
}
+
.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer {
display: -webkit-box;
display: -ms-flexbox;
@@ -967,39 +1120,49 @@ html {
align-items: center;
padding-top: 6px;
}
+
.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer > div {
margin: 6px 0;
}
+
.mx_GroupFilterPanel .mx_TagTile {
position: relative;
}
+
.mx_GroupFilterPanel .mx_TagTile .mx_BetaDot {
position: absolute;
right: -13px;
top: -11px;
}
+
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype {
padding: 3px;
}
+
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
background-color: #fff;
border-radius: 6px;
}
+
.mx_TagTile_selected_prototype .mx_TagTile_homeIcon:before {
background-color: #2e2f32;
}
+
.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon {
background-color: rgba(92, 100, 112, 0.2);
border-radius: 48px;
}
+
.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon:before {
background-color: #5c6470;
}
+
.mx_TagTile_homeIcon {
width: 32px;
height: 32px;
position: relative;
}
+
.mx_TagTile_homeIcon:before {
-webkit-mask-image: url(../../img/element-icons/home.b706c0e.svg);
mask-image: url(../../img/element-icons/home.b706c0e.svg);
@@ -1017,6 +1180,7 @@ html {
top: calc(50% - 16px);
left: calc(50% - 16px);
}
+
.mx_GroupFilterPanel .mx_TagTile_plus {
margin-bottom: 12px;
height: 32px;
@@ -1026,6 +1190,7 @@ html {
position: relative;
display: block !important;
}
+
.mx_GroupFilterPanel .mx_TagTile_plus:before {
background-color: #5c6470;
-webkit-mask-image: url(../../img/feather-customised/plus.38ae979.svg);
@@ -1041,6 +1206,7 @@ html {
left: 0;
right: 0;
}
+
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected:before {
content: "";
height: 100%;
@@ -1050,15 +1216,18 @@ html {
left: -12px;
border-radius: 0 3px 3px 0;
}
+
.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus {
-webkit-filter: none;
filter: none;
}
+
.mx_TagTile_tooltip {
position: relative;
top: -30px;
left: 5px;
}
+
.mx_TagTile_context_button {
min-width: 15px;
height: 15px;
@@ -1075,9 +1244,11 @@ html {
padding-left: 4px;
padding-right: 4px;
}
+
.mx_TagTile_avatar {
position: relative;
}
+
.mx_TagTile_badge {
position: absolute;
right: -4px;
@@ -1089,9 +1260,11 @@ html {
padding: 0 5px;
background-color: #61708b;
}
+
.mx_TagTile_badgeHighlight {
background-color: #ff4b55;
}
+
.mx_GroupView {
display: -webkit-box;
display: -ms-flexbox;
@@ -1102,9 +1275,11 @@ html {
flex-direction: column;
overflow: hidden;
}
+
.mx_GroupView_error {
margin: auto;
}
+
.mx_GroupView_header {
min-height: 52px;
-webkit-box-align: center;
@@ -1116,16 +1291,19 @@ html {
padding-bottom: 10px;
padding-left: 19px;
}
+
.mx_GroupView_header_view {
border-bottom: 1px solid transparent;
padding-bottom: 0;
padding-right: 8px;
}
+
.mx_GroupView_header_avatar,
.mx_GroupView_header_info {
display: table-cell;
vertical-align: middle;
}
+
.mx_GroupHeader_button {
position: relative;
margin-left: 5px;
@@ -1134,6 +1312,7 @@ html {
height: 20px;
width: 20px;
}
+
.mx_GroupHeader_button:before {
content: "";
position: absolute;
@@ -1145,52 +1324,63 @@ html {
-webkit-mask-size: contain;
mask-size: contain;
}
+
.mx_GroupHeader_editButton:before {
-webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
mask-image: url(../../img/element-icons/settings.6b381af.svg);
}
+
.mx_GroupHeader_shareButton:before {
-webkit-mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
}
+
.mx_GroupView_hostingSignup img {
margin-left: 5px;
}
+
.mx_GroupView_editable {
border-bottom: 1px solid #c7c7c7 !important;
min-width: 150px;
cursor: text;
}
+
.mx_GroupView_editable:focus {
border-bottom: 1px solid #0dbd8b !important;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
+
.mx_GroupView_header_isUserMember
.mx_GroupView_header_name:hover
div:not(.mx_GroupView_editable) {
color: #0dbd8b;
cursor: pointer;
}
+
.mx_GroupView_avatarPicker {
position: relative;
}
+
.mx_GroupView_avatarPicker_edit {
position: absolute;
top: 50px;
left: 15px;
}
+
.mx_GroupView_avatarPicker .mx_Spinner {
width: 48px;
height: 48px !important;
}
+
.mx_GroupView_header_leftCol {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
}
+
.mx_GroupView_header_rightCol {
display: -webkit-box;
display: -ms-flexbox;
@@ -1199,14 +1389,17 @@ html {
-ms-flex-align: center;
align-items: center;
}
+
.mx_GroupView_textButton {
display: inline-block;
}
+
.mx_GroupView_header_groupid {
font-weight: 400;
font-size: medium;
padding-left: 10px;
}
+
.mx_GroupView_header_name {
vertical-align: middle;
width: 100%;
@@ -1216,6 +1409,7 @@ html {
font-size: 2.2rem;
padding-right: 16px;
}
+
.mx_GroupView_header_name,
.mx_GroupView_header_shortDesc {
overflow: hidden;
@@ -1223,6 +1417,7 @@ html {
text-overflow: ellipsis;
border-bottom: 1px solid transparent;
}
+
.mx_GroupView_header_shortDesc {
vertical-align: bottom;
float: left;
@@ -1232,34 +1427,42 @@ html {
font-size: 1.3rem;
margin-right: 16px;
}
+
.mx_GroupView_avatarPicker_label {
cursor: pointer;
}
+
.mx_GroupView_cancelButton {
padding-left: 8px;
}
+
.mx_GroupView_cancelButton img {
position: relative;
top: 5px;
}
+
.mx_GroupView input[type="radio"] {
margin: 10px 10px 0;
}
+
.mx_GroupView_label_text {
display: inline-block;
max-width: 80%;
vertical-align: 0.1em;
line-height: 2em;
}
+
.mx_GroupView_body {
margin: 0 24px;
}
+
.mx_GroupView_body,
.mx_GroupView_rooms {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
+
.mx_GroupView_rooms {
display: -webkit-box;
display: -ms-flexbox;
@@ -1274,6 +1477,7 @@ html {
-ms-user-select: none;
user-select: none;
}
+
.mx_GroupView h3 {
text-transform: uppercase;
color: #3d3b39;
@@ -1281,24 +1485,30 @@ html {
font-size: 1.3rem;
margin-bottom: 10px;
}
+
.mx_GroupView_rooms_header .mx_AccessibleButton {
padding-left: 14px;
margin-bottom: 14px;
height: 24px;
}
+
.mx_GroupView_group {
border-top: 1px solid transparent;
}
+
.mx_GroupView_group_disabled {
opacity: 0.3;
pointer-events: none;
}
+
.mx_GroupView_rooms_header_addRow_button {
display: inline-block;
}
+
.mx_GroupView_rooms_header_addRow_button object {
pointer-events: none;
}
+
.mx_GroupView_rooms_header_addRow_label {
display: inline-block;
vertical-align: top;
@@ -1306,6 +1516,7 @@ html {
padding-left: 28px;
color: #0dbd8b;
}
+
.mx_GroupView_rooms .mx_RoomDetailList {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
@@ -1314,15 +1525,18 @@ html {
padding-top: 10px;
word-break: break-word;
}
+
.mx_GroupView .mx_RoomView_messageListWrapper {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
+
.mx_GroupView_membershipSection {
color: #888;
margin-top: 10px;
}
+
.mx_GroupView_membershipSubSection {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
@@ -1332,22 +1546,27 @@ html {
display: flex;
padding-bottom: 8px;
}
+
.mx_GroupView_membershipSubSection .mx_Spinner {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
+
.mx_GroupView_membershipSection_description {
line-height: 3.4rem;
}
+
.mx_GroupView_membershipSection_description .mx_BaseAvatar {
margin-right: 10px;
}
+
.mx_GroupView_membershipSection .mx_GroupView_textButton {
margin-right: 0;
margin-top: 0;
margin-left: 8px;
}
+
.mx_GroupView_memberSettings_toggle label {
cursor: pointer;
-webkit-user-select: none;
@@ -1355,27 +1574,33 @@ html {
-ms-user-select: none;
user-select: none;
}
+
.mx_GroupView_memberSettings input {
margin-right: 6px;
}
+
.mx_GroupView_featuredThings {
margin-top: 20px;
}
+
.mx_GroupView_featuredThings_header {
font-weight: 700;
font-size: 120%;
margin-bottom: 20px;
}
+
.mx_GroupView_featuredThings_category {
font-weight: 700;
font-size: 110%;
margin-top: 10px;
}
+
.mx_GroupView_featuredThings_container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_GroupView_featuredThing,
.mx_GroupView_featuredThings_addButton {
display: table-cell;
@@ -1383,36 +1608,45 @@ html {
width: 100px;
margin: 0 20px;
}
+
.mx_GroupView_featuredThing {
position: relative;
}
+
.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton {
position: absolute;
top: -7px;
right: 11px;
opacity: 0.4;
}
+
.mx_GroupView_featuredThing .mx_BaseAvatar {
vertical-align: baseline;
vertical-align: initial;
}
+
.mx_GroupView_featuredThings_addButton object {
pointer-events: none;
}
+
.mx_GroupView_featuredThing_name {
word-wrap: break-word;
}
+
.mx_GroupView_uploadInput {
display: none;
}
+
.mx_GroupView_body .mx_AutoHideScrollbar > * {
margin: 11px 50px 50px 68px;
}
+
.mx_GroupView_groupDesc textarea {
width: 100%;
max-width: 100%;
height: 150px;
}
+
.mx_GroupView_changeDelayWarning,
.mx_GroupView_groupDesc_placeholder {
background-color: #f7f7f7;
@@ -1421,13 +1655,16 @@ html {
text-align: center;
margin: 20px 0;
}
+
.mx_GroupView_groupDesc_placeholder {
padding: 100px 20px;
cursor: pointer;
}
+
.mx_GroupView_changeDelayWarning {
padding: 40px 20px;
}
+
.mx_GroupView
.mx_MemberInfo
.mx_AutoHideScrollbar
@@ -1435,14 +1672,17 @@ html {
padding-left: 16px;
padding-right: 16px;
}
+
.mx_HeaderButtons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_RoomHeader_buttons + .mx_HeaderButtons:before {
content: unset;
}
+
.mx_HeaderButtons:before {
content: "";
background-color: #91a1c0;
@@ -1451,6 +1691,7 @@ html {
border-radius: 1px;
width: 1px;
}
+
.mx_HomePage {
max-width: 960px;
width: 100%;
@@ -1458,24 +1699,29 @@ html {
margin-left: auto;
margin-right: auto;
}
+
.mx_HomePage_default {
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_HomePage_default .mx_HomePage_default_wrapper {
margin: auto;
}
+
.mx_HomePage_default img {
height: 48px;
}
+
.mx_HomePage_default h1 {
font-weight: 600;
font-size: 3.2rem;
line-height: 4.4rem;
margin-bottom: 4px;
}
+
.mx_HomePage_default h4 {
margin-top: 4px;
font-weight: 600;
@@ -1483,15 +1729,18 @@ html {
line-height: 2.5rem;
color: #61708b;
}
+
.mx_HomePage_default .mx_MiniAvatarUploader {
margin: 0 auto;
}
+
.mx_HomePage_default .mx_HomePage_default_buttons {
margin: 60px auto 0;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
+
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton {
padding: 73px 8px 15px;
width: 160px;
@@ -1510,6 +1759,7 @@ html {
color: #fff;
background-color: #0dbd8b;
}
+
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:before {
top: 20px;
left: 60px;
@@ -1523,24 +1773,28 @@ html {
-webkit-mask-size: contain;
mask-size: contain;
}
+
.mx_HomePage_default
.mx_HomePage_default_buttons
.mx_AccessibleButton.mx_HomePage_button_sendDm:before {
-webkit-mask-image: url(../../img/element-icons/feedback.a91241e.svg);
mask-image: url(../../img/element-icons/feedback.a91241e.svg);
}
+
.mx_HomePage_default
.mx_HomePage_default_buttons
.mx_AccessibleButton.mx_HomePage_button_explore:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
}
+
.mx_HomePage_default
.mx_HomePage_default_buttons
.mx_AccessibleButton.mx_HomePage_button_createGroup:before {
-webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
}
+
.mx_LeftPanel {
background-color: hsla(0, 0%, 96.1%, 0.9);
min-width: 206px;
@@ -1548,7 +1802,9 @@ html {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
+ contain: content;
}
+
.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
@@ -1561,6 +1817,7 @@ html {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer,
.mx_LeftPanel .mx_LeftPanel_roomListContainer {
display: -webkit-box;
@@ -1569,6 +1826,7 @@ html {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
+
.mx_LeftPanel .mx_LeftPanel_roomListContainer {
background-color: hsla(0, 0%, 96.1%, 0.9);
-webkit-box-flex: 1;
@@ -1578,6 +1836,7 @@ html {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader {
padding: 12px;
-ms-flex-negative: 0;
@@ -1590,6 +1849,7 @@ html {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_breadcrumbsContainer {
@@ -1605,7 +1865,9 @@ html {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
+ contain: content;
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_leftOverflow {
@@ -1626,6 +1888,7 @@ html {
);
mask-image: linear-gradient(90deg, transparent, #000 5%);
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow {
@@ -1648,6 +1911,7 @@ html {
);
mask-image: linear-gradient(90deg, #000, #000 95%, transparent);
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
@@ -1684,6 +1948,7 @@ html {
transparent
);
}
+
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer {
margin-left: 12px;
margin-right: 12px;
@@ -1696,6 +1961,7 @@ html {
-ms-flex-align: center;
align-items: center;
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_filterContainer
@@ -1711,6 +1977,7 @@ html {
margin: 0;
width: 0;
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_filterContainer
@@ -1723,6 +1990,40 @@ html {
+ .mx_LeftPanel_exploreButton:before {
content: none;
}
+
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_LeftPanel_dialPadButton {
+ width: 32px;
+ height: 32px;
+ border-radius: 8px;
+ background-color: rgba(141, 151, 165, 0.2);
+ position: relative;
+ margin-left: 8px;
+}
+
+.mx_LeftPanel
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_LeftPanel_dialPadButton:before {
+ content: "";
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ width: 16px;
+ height: 16px;
+ -webkit-mask-image: url(../../img/element-icons/call/dialpad.3be6cbc.svg);
+ mask-image: url(../../img/element-icons/call/dialpad.3be6cbc.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #737d8c;
+}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_filterContainer
@@ -1734,6 +2035,7 @@ html {
position: relative;
margin-left: 8px;
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_filterContainer
@@ -1754,6 +2056,7 @@ html {
mask-repeat: no-repeat;
background: #737d8c;
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_filterContainer
@@ -1761,6 +2064,7 @@ html {
-webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_roomListFilterCount {
@@ -1770,6 +2074,7 @@ html {
margin-top: 14px;
margin-bottom: -4px;
}
+
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper {
overflow: hidden;
margin-top: 10px;
@@ -1777,29 +2082,35 @@ html {
-ms-flex: 1 0 0px;
flex: 1 0 0;
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyBottom {
padding-bottom: 32px;
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyTop {
padding-top: 32px;
}
+
.mx_LeftPanel
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_actualRoomListContainer {
position: relative;
height: 100%;
}
+
.mx_LeftPanel.mx_LeftPanel_minimized {
min-width: unset;
width: unset !important;
}
+
.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer {
width: 68px;
}
+
.mx_LeftPanel.mx_LeftPanel_minimized
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_userHeader {
@@ -1811,6 +2122,7 @@ html {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_LeftPanel.mx_LeftPanel_minimized
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_filterContainer {
@@ -1822,6 +2134,11 @@ html {
-ms-flex-pack: center;
justify-content: center;
}
+
+.mx_LeftPanel.mx_LeftPanel_minimized
+ .mx_LeftPanel_roomListContainer
+ .mx_LeftPanel_filterContainer
+ .mx_LeftPanel_dialPadButton,
.mx_LeftPanel.mx_LeftPanel_minimized
.mx_LeftPanel_roomListContainer
.mx_LeftPanel_filterContainer
@@ -1830,10 +2147,12 @@ html {
margin-top: 8px;
background-color: transparent;
}
+
.mx_LeftPanelWidget {
margin-left: 8px;
margin-bottom: 4px;
}
+
.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer {
display: -webkit-box;
display: -ms-flexbox;
@@ -1845,6 +2164,7 @@ html {
color: #8d99a5;
margin-top: 4px;
}
+
.mx_LeftPanelWidget
.mx_LeftPanelWidget_headerContainer
.mx_LeftPanelWidget_stickable {
@@ -1859,6 +2179,7 @@ html {
-ms-flex-align: center;
align-items: center;
}
+
.mx_LeftPanelWidget
.mx_LeftPanelWidget_headerContainer
.mx_LeftPanelWidget_headerText {
@@ -1873,6 +2194,7 @@ html {
overflow: hidden;
white-space: nowrap;
}
+
.mx_LeftPanelWidget
.mx_LeftPanelWidget_headerContainer
.mx_LeftPanelWidget_headerText
@@ -1883,6 +2205,7 @@ html {
height: 14px;
margin-right: 6px;
}
+
.mx_LeftPanelWidget
.mx_LeftPanelWidget_headerContainer
.mx_LeftPanelWidget_headerText
@@ -1901,6 +2224,7 @@ html {
-webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
}
+
.mx_LeftPanelWidget
.mx_LeftPanelWidget_headerContainer
.mx_LeftPanelWidget_headerText
@@ -1908,12 +2232,14 @@ html {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
+
.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox {
position: relative;
-ms-flex-direction: column;
flex-direction: column;
overflow: visible;
}
+
.mx_LeftPanelWidget .mx_AppTileFullWidth,
.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox {
display: -webkit-box;
@@ -1922,6 +2248,7 @@ html {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
+
.mx_LeftPanelWidget .mx_AppTileFullWidth {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
@@ -1934,6 +2261,7 @@ html {
-webkit-mask-image: linear-gradient(0deg, transparent, #000 4px);
mask-image: linear-gradient(0deg, transparent, #000 4px);
}
+
.mx_LeftPanelWidget .mx_LeftPanelWidget_resizerHandle {
cursor: ns-resize;
border-radius: 3px;
@@ -1944,10 +2272,12 @@ html {
left: calc(50% - 32px) !important;
right: calc(50% - 32px) !important;
}
+
.mx_LeftPanelWidget:hover .mx_LeftPanelWidget_resizerHandle {
opacity: 0.8;
background-color: #2e2f32;
}
+
.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton {
margin-left: 8px;
margin-right: 7px;
@@ -1956,6 +2286,7 @@ html {
height: 24px;
border-radius: 32px;
}
+
.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton:before {
content: "";
width: 16px;
@@ -1973,9 +2304,11 @@ html {
mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
background: #61708b;
}
+
.mx_LeftPanelWidget_maximizeButtonTooltip {
margin-top: -3px;
}
+
.mx_MainSplit {
display: -webkit-box;
display: -ms-flexbox;
@@ -1988,11 +2321,13 @@ html {
min-height: 0;
height: 100%;
}
+
.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
padding: 5px;
margin-left: 8px;
height: calc(100vh - 51px);
}
+
.mx_MainSplit > .mx_RightPanel_ResizeWrapper:hover .mx_RightPanel_ResizeHandle {
top: 50% !important;
-webkit-transform: translateY(-50%);
@@ -2003,16 +2338,19 @@ html {
background-color: #2e2f32;
opacity: 0.8;
}
+
.mx_MatrixChat_splash {
position: relative;
height: 100%;
}
+
.mx_MatrixChat_splashButtons {
text-align: center;
width: 100%;
position: absolute;
bottom: 30px;
}
+
.mx_MatrixChat_wrapper {
display: -webkit-box;
display: -ms-flexbox;
@@ -2024,12 +2362,14 @@ html {
width: 100%;
height: 100%;
}
+
.mx_MatrixToolbar {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
height: 40px;
}
+
.mx_MatrixChat {
width: 100%;
height: 100%;
@@ -2044,6 +2384,7 @@ html {
flex: 1;
min-height: 0;
}
+
.mx_MatrixChat_syncError {
color: #fff;
background-color: #df2a8b;
@@ -2056,6 +2397,7 @@ html {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
+
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
background-color: #fff;
-webkit-box-flex: 1;
@@ -2064,9 +2406,11 @@ html {
min-width: 0;
height: 100%;
}
+
.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
position: relative;
}
+
.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover:before {
position: absolute;
left: 6px;
@@ -2080,6 +2424,7 @@ html {
background-color: #2e2f32;
opacity: 0.8;
}
+
.mx_MyGroups {
display: -webkit-box;
display: -ms-flexbox;
@@ -2089,13 +2434,16 @@ html {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_MyGroups .mx_BetaCard {
margin: 0 72px;
max-width: 760px;
}
+
.mx_MyGroups .mx_RoomHeader_simpleHeader {
margin-left: 0;
}
+
.mx_MyGroups_header {
margin-left: 2px;
display: -webkit-box;
@@ -2104,10 +2452,12 @@ html {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
+
.mx_MyGroups > :not(.mx_RoomHeader):not(.mx_BetaCard) {
max-width: 960px;
margin: 40px;
}
+
.mx_MyGroups_headerCard {
-webkit-box-flex: 1;
-ms-flex: 1 0 50%;
@@ -2121,6 +2471,7 @@ html {
-ms-flex-align: center;
align-items: center;
}
+
.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
@@ -2132,6 +2483,7 @@ html {
background-color: rgba(92, 100, 112, 0.2);
position: relative;
}
+
.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button:before {
background-color: #5c6470;
-webkit-mask: url(../../img/icons-create-room.817ede2.svg);
@@ -2149,18 +2501,22 @@ html {
left: 0;
right: 0;
}
+
.mx_MyGroups_headerCard_header {
font-weight: 700;
margin-bottom: 10px;
}
+
.mx_MyGroups_headerCard_content {
padding-right: 15px;
}
+
.mx_MyGroups_joinBox {
visibility: hidden;
height: 0;
margin: 0;
}
+
.mx_MyGroups_content {
margin-left: 2px;
-webkit-box-flex: 1;
@@ -2175,9 +2531,11 @@ html {
flex-direction: column;
overflow-y: auto;
}
+
.mx_MyGroups_scrollable {
overflow-y: inherit;
}
+
.mx_MyGroups_placeholder {
background-color: #f7f7f7;
color: #888;
@@ -2185,6 +2543,7 @@ html {
border-radius: 10px;
text-align: center;
}
+
.mx_MyGroups_joinedGroups {
border-top: 1px solid transparent;
overflow-x: hidden;
@@ -2198,6 +2557,7 @@ html {
-ms-flex-line-pack: start;
align-content: flex-start;
}
+
.mx_MyGroups_joinedGroups .mx_GroupTile {
min-width: 300px;
max-width: 33%;
@@ -2214,10 +2574,12 @@ html {
align-items: flex-start;
cursor: pointer;
}
+
.mx_GroupTile_avatar {
cursor: -webkit-grab, -webkit-grab;
cursor: grab, -webkit-grab;
}
+
.mx_GroupTile_profile {
margin-left: 10px;
display: -webkit-box;
@@ -2231,19 +2593,23 @@ html {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_GroupTile_profile .mx_GroupTile_desc,
.mx_GroupTile_profile .mx_GroupTile_groupId,
.mx_GroupTile_profile .mx_GroupTile_name {
padding-right: 10px;
}
+
.mx_GroupTile_profile .mx_GroupTile_name {
margin: 0;
font-size: 1.5rem;
}
+
.mx_GroupTile_profile .mx_GroupTile_groupId {
font-size: 1.3rem;
opacity: 0.7;
}
+
.mx_GroupTile_profile .mx_GroupTile_desc {
display: -webkit-box;
-webkit-line-clamp: 2;
@@ -2252,12 +2618,14 @@ html {
max-height: 36px;
overflow: hidden;
}
+
.mx_NonUrgentToastContainer {
position: absolute;
bottom: 30px;
left: 28px;
z-index: 101;
}
+
.mx_NonUrgentToastContainer .mx_NonUrgentToastContainer_toast {
padding: 10px 12px;
border-radius: 8px;
@@ -2267,6 +2635,7 @@ html {
background-color: #17191c;
color: #fff;
}
+
.mx_NotificationPanel {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
@@ -2279,6 +2648,7 @@ html {
display: -ms-flexbox;
display: flex;
}
+
.mx_NotificationPanel .mx_RoomView_messageListWrapper {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
@@ -2291,17 +2661,21 @@ html {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_NotificationPanel .mx_RoomView_MessageList {
width: 100%;
}
+
.mx_NotificationPanel .mx_RoomView_MessageList h2 {
margin-left: 0;
}
+
.mx_NotificationPanel .mx_EventTile {
word-break: break-word;
position: relative;
padding-bottom: 18px;
}
+
.mx_NotificationPanel
.mx_EventTile:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection):after {
position: absolute;
@@ -2313,64 +2687,87 @@ html {
opacity: 0.4;
content: "";
}
+
.mx_NotificationPanel .mx_EventTile_roomName {
font-weight: 700;
font-size: 1.4rem;
}
+
.mx_NotificationPanel .mx_EventTile_roomName > * {
vertical-align: middle;
}
+
.mx_NotificationPanel .mx_EventTile_roomName > .mx_BaseAvatar {
margin-right: 8px;
}
+
.mx_NotificationPanel .mx_EventTile_roomName a {
color: #2e2f32;
}
+
.mx_NotificationPanel .mx_EventTile_avatar {
display: none;
}
+
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp,
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile {
color: #2e2f32;
font-size: 1.2rem;
display: inline;
- padding-left: 0;
}
-.mx_NotificationPanel .mx_EventTile_senderDetails {
+
+.mx_NotificationPanel
+ .mx_EventTile:not([data-layout="bubble"])
+ .mx_EventTile_senderDetails {
padding-left: 36px;
position: relative;
}
-.mx_NotificationPanel .mx_EventTile_senderDetails a {
+
+.mx_NotificationPanel
+ .mx_EventTile:not([data-layout="bubble"])
+ .mx_EventTile_senderDetails
+ a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_NotificationPanel .mx_EventTile_roomName a,
.mx_NotificationPanel .mx_EventTile_senderDetails a {
text-decoration: none !important;
}
+
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
visibility: visible;
position: static;
display: inline;
+ padding-left: 5px;
}
-.mx_NotificationPanel .mx_EventTile_line {
+
+.mx_NotificationPanel
+ .mx_EventTile:not([data-layout="bubble"])
+ .mx_EventTile_line {
margin-right: 0;
padding: 0 0 0 36px;
}
+
.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
padding-left: 0;
}
+
.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
background-color: #fff;
}
+
.mx_NotificationPanel .mx_EventTile_content {
margin-right: 0;
}
+
.mx_NotificationPanel_empty:before {
-webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
mask-image: url(../../img/element-icons/notifications.d298b39.svg);
}
+
.mx_RightPanel {
overflow-x: hidden;
-webkit-box-flex: 0;
@@ -2389,10 +2786,13 @@ html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
+ contain: strict;
}
+
.mx_RightPanel .mx_RoomView_MessageList {
padding: 14px 18px;
}
+
.mx_RightPanel_header {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
@@ -2402,6 +2802,7 @@ html {
-ms-flex: 0 0 52px;
flex: 0 0 52px;
}
+
.mx_RightPanel_headerButtonGroup {
height: 100%;
display: -webkit-box;
@@ -2413,6 +2814,7 @@ html {
-ms-flex-align: center;
align-items: center;
}
+
.mx_RightPanel_headerButton {
cursor: pointer;
-webkit-box-flex: 0;
@@ -2425,6 +2827,7 @@ html {
position: relative;
border-radius: 100%;
}
+
.mx_RightPanel_headerButton:before {
content: "";
position: absolute;
@@ -2438,39 +2841,154 @@ html {
-webkit-mask-size: contain;
mask-size: contain;
}
+
.mx_RightPanel_headerButton:hover {
background: rgba(13, 189, 139, 0.1);
}
+
.mx_RightPanel_headerButton:hover:before {
background-color: #0dbd8b;
}
+
.mx_RightPanel_notifsButton:before {
-webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
mask-image: url(../../img/element-icons/notifications.d298b39.svg);
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_RightPanel_roomSummaryButton:before {
-webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_RightPanel_groupMembersButton:before {
-webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_RightPanel_roomsButton:before {
-webkit-mask-image: url(../../img/element-icons/community-rooms.8f0b6c9.svg);
mask-image: url(../../img/element-icons/community-rooms.8f0b6c9.svg);
-webkit-mask-position: center;
mask-position: center;
}
+
+.mx_RightPanel_pinnedMessagesButton:before {
+ -webkit-mask-image: url(../../img/element-icons/room/pin.a996417.svg);
+ mask-image: url(../../img/element-icons/room/pin.a996417.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+
+.mx_RightPanel_pinnedMessagesButton
+ .mx_RightPanel_pinnedMessagesButton_unreadIndicator {
+ position: absolute;
+ right: 0;
+ top: 0;
+ margin: 4px;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ background: #ff4b55;
+ -webkit-box-shadow: 0 0 0 0 #ff4b55;
+ box-shadow: 0 0 0 0 #ff4b55;
+ -webkit-animation: mx_RightPanel_indicator_pulse 2s infinite;
+ animation: mx_RightPanel_indicator_pulse 2s infinite;
+ -webkit-animation-iteration-count: 1;
+ animation-iteration-count: 1;
+}
+
+.mx_RightPanel_pinnedMessagesButton
+ .mx_RightPanel_pinnedMessagesButton_unreadIndicator:after {
+ content: "";
+ position: absolute;
+ width: inherit;
+ height: inherit;
+ top: 0;
+ left: 0;
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-animation-name: mx_RightPanel_indicator_pulse_shadow;
+ animation-name: mx_RightPanel_indicator_pulse_shadow;
+ -webkit-animation-duration: inherit;
+ animation-duration: inherit;
+ -webkit-animation-iteration-count: inherit;
+ animation-iteration-count: inherit;
+ border-radius: 50%;
+ background: #ff4b55;
+}
+
+@-webkit-keyframes mx_RightPanel_indicator_pulse {
+ 0% {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95);
+ }
+ 70% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+ to {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95);
+ }
+}
+
+@keyframes mx_RightPanel_indicator_pulse {
+ 0% {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95);
+ }
+ 70% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+ to {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95);
+ }
+}
+
+@-webkit-keyframes mx_RightPanel_indicator_pulse_shadow {
+ 0% {
+ opacity: 0.7;
+ }
+ 70% {
+ -webkit-transform: scale(2.2);
+ transform: scale(2.2);
+ opacity: 0;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes mx_RightPanel_indicator_pulse_shadow {
+ 0% {
+ opacity: 0.7;
+ }
+ 70% {
+ -webkit-transform: scale(2.2);
+ transform: scale(2.2);
+ opacity: 0;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
.mx_RightPanel_headerButton_highlight:before {
background-color: #0dbd8b !important;
}
+
.mx_RightPanel_headerButton_badge {
font-size: 0.8rem;
border-radius: 8px;
@@ -2482,6 +3000,7 @@ html {
left: 20px;
padding: 2px 4px;
}
+
.mx_RightPanel_collapsebutton {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -2490,6 +3009,7 @@ html {
height: 16px;
border: none;
}
+
.mx_RightPanel .mx_GroupRoomList,
.mx_RightPanel .mx_MemberInfo,
.mx_RightPanel .mx_MemberList,
@@ -2501,23 +3021,28 @@ html {
-ms-flex: 1 1 0px;
flex: 1 1 0;
}
+
.mx_RightPanel .mx_RoomView_messagePanelSpinner {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
margin: auto;
}
+
.mx_RightPanel_empty {
margin-right: -28px;
}
+
.mx_RightPanel_empty h2 {
font-weight: 700;
margin: 16px 0;
}
+
.mx_RightPanel_empty h2,
.mx_RightPanel_empty p {
font-size: 1.4rem;
}
+
.mx_RightPanel_empty:before {
content: "";
display: block;
@@ -2532,6 +3057,7 @@ html {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_RightPanel_scopeHeader {
margin: 24px;
text-align: center;
@@ -2539,21 +3065,26 @@ html {
font-size: 1.8rem;
line-height: 2.2rem;
}
+
.mx_RightPanel_scopeHeader .mx_BaseAvatar {
margin-right: 8px;
vertical-align: middle;
}
+
.mx_RightPanel_scopeHeader .mx_BaseAvatar_image {
border-radius: 8px;
}
+
.mx_RoomDirectory_dialogWrapper > .mx_Dialog {
max-width: 960px;
height: 100%;
}
+
.mx_RoomDirectory_dialog {
height: 100%;
flex-direction: column;
}
+
.mx_RoomDirectory,
.mx_RoomDirectory_dialog {
display: -webkit-box;
@@ -2563,11 +3094,13 @@ html {
-webkit-box-direction: normal;
-ms-flex-direction: column;
}
+
.mx_RoomDirectory {
margin-bottom: 12px;
color: #2e2f32;
word-break: break-word;
}
+
.mx_RoomDirectory,
.mx_RoomDirectory_list {
flex-direction: column;
@@ -2575,6 +3108,7 @@ html {
-ms-flex: 1;
flex: 1;
}
+
.mx_RoomDirectory_list {
display: -webkit-box;
display: -ms-flexbox;
@@ -2583,31 +3117,74 @@ html {
-webkit-box-direction: normal;
-ms-flex-direction: column;
}
+
.mx_RoomDirectory_list .mx_RoomView_messageListWrapper {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
+
.mx_RoomDirectory_listheader {
display: block;
margin-top: 13px;
}
+
.mx_RoomDirectory_searchbox {
-webkit-box-flex: 1 !important;
-ms-flex: 1 !important;
flex: 1 !important;
}
+
.mx_RoomDirectory_listheader .mx_NetworkDropdown {
-webkit-box-flex: 0;
-ms-flex: 0 0 200px;
flex: 0 0 200px;
}
+
.mx_RoomDirectory_tableWrapper {
overflow-y: auto;
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
}
+
+.mx_RoomDirectory_tableWrapper .mx_RoomDirectory_footer {
+ margin-top: 24px;
+ text-align: center;
+}
+
+.mx_RoomDirectory_tableWrapper .mx_RoomDirectory_footer > h5 {
+ margin: 0;
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 1.8rem;
+ color: #2e2f32;
+}
+
+.mx_RoomDirectory_tableWrapper .mx_RoomDirectory_footer > p {
+ margin: 40px auto 60px;
+ font-size: 1.4rem;
+ line-height: 2rem;
+ color: #737d8c;
+ max-width: 464px;
+}
+
+.mx_RoomDirectory_tableWrapper .mx_RoomDirectory_footer > hr {
+ margin: 0;
+ border: none;
+ height: 1px;
+ background-color: #f3f8fd;
+}
+
+.mx_RoomDirectory_tableWrapper
+ .mx_RoomDirectory_footer
+ .mx_RoomDirectory_newRoom {
+ margin: 24px auto 0;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+}
+
.mx_RoomDirectory_table {
color: #2e2f32;
display: grid;
@@ -2619,15 +3196,18 @@ html {
text-align: left;
width: 100%;
}
+
.mx_RoomDirectory_roomAvatar {
padding: 2px 14px 0 0;
}
+
.mx_RoomDirectory_roomMemberCount {
-ms-flex-item-align: center;
align-self: center;
color: #747474;
padding: 3px 10px 0;
}
+
.mx_RoomDirectory_roomMemberCount:before {
background-color: #747474;
display: inline-block;
@@ -2645,20 +3225,24 @@ html {
width: 16px;
height: 16px;
}
+
.mx_RoomDirectory_join,
.mx_RoomDirectory_preview {
-ms-flex-item-align: center;
align-self: center;
white-space: nowrap;
}
+
.mx_RoomDirectory_name {
display: inline-block;
font-size: 1.8rem;
font-weight: 600;
}
+
.mx_RoomDirectory_perms {
display: inline-block;
}
+
.mx_RoomDirectory_perm {
border-radius: 10px;
display: inline-block;
@@ -2668,6 +3252,7 @@ html {
color: #fff;
background-color: #aaa;
}
+
.mx_RoomDirectory_topic {
cursor: auto;
color: #747474;
@@ -2676,24 +3261,25 @@ html {
-webkit-line-clamp: 3;
overflow: hidden;
}
+
.mx_RoomDirectory_alias {
font-size: 1.2rem;
color: #a2a2a2;
}
-.mx_RoomDirectory_table tr {
- padding-bottom: 10px;
- cursor: pointer;
-}
+
.mx_RoomDirectory .mx_RoomView_MessageList {
padding: 0;
}
+
.mx_RoomDirectory > span {
font-size: 1.5rem;
margin-top: 0;
}
+
.mx_RoomDirectory > span .mx_AccessibleButton {
padding: 0;
}
+
.mx_RoomSearch {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -2710,6 +3296,7 @@ html {
-ms-flex-align: center;
align-items: center;
}
+
.mx_RoomSearch .mx_RoomSearch_icon {
width: 16px;
height: 16px;
@@ -2720,6 +3307,7 @@ html {
background-color: #737d8c;
margin-left: 7px;
}
+
.mx_RoomSearch .mx_RoomSearch_input {
border: none !important;
-webkit-box-flex: 1 !important;
@@ -2732,38 +3320,47 @@ html {
font-size: 1.2rem;
line-height: 1.6rem;
}
+
.mx_RoomSearch
.mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-webkit-input-placeholder {
color: #8d99a5 !important;
}
+
.mx_RoomSearch
.mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-moz-placeholder {
color: #8d99a5 !important;
}
+
.mx_RoomSearch
.mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded):-ms-input-placeholder {
color: #8d99a5 !important;
}
+
.mx_RoomSearch
.mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-ms-input-placeholder {
color: #8d99a5 !important;
}
+
.mx_RoomSearch
.mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::placeholder {
color: #8d99a5 !important;
}
+
.mx_RoomSearch.mx_RoomSearch_hasQuery {
border-color: #737d8c;
}
+
.mx_RoomSearch.mx_RoomSearch_focused {
-webkit-box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
border-color: transparent;
}
+
.mx_RoomSearch.mx_RoomSearch_focused,
.mx_RoomSearch.mx_RoomSearch_hasQuery {
background-color: #fff;
}
+
.mx_RoomSearch.mx_RoomSearch_focused .mx_RoomSearch_clearButton,
.mx_RoomSearch.mx_RoomSearch_hasQuery .mx_RoomSearch_clearButton {
width: 16px;
@@ -2779,36 +3376,44 @@ html {
background-color: #737d8c;
margin-right: 8px;
}
+
.mx_RoomSearch .mx_RoomSearch_clearButton {
width: 0;
height: 0;
}
+
.mx_RoomSearch.mx_RoomSearch_minimized {
border-radius: 32px;
height: auto;
width: auto;
padding: 8px;
}
+
.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_icon {
margin-left: 0;
}
+
.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
margin-left: 65px;
min-height: 50px;
}
+
.mx_RoomStatusBar_typingIndicatorAvatars {
width: 52px;
margin-top: -1px;
text-align: left;
}
+
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
margin-right: -12px;
border: 1px solid #fff;
}
+
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
padding-left: 1px;
padding-top: 1px;
}
+
.mx_RoomStatusBar_typingIndicatorRemaining {
display: inline-block;
color: #acacac;
@@ -2823,15 +3428,18 @@ html {
text-align: center;
position: absolute;
}
+
.mx_RoomStatusBar_scrollDownIndicator {
cursor: pointer;
padding-left: 1px;
}
+
.mx_RoomStatusBar_unreadMessagesBar {
padding-top: 10px;
color: #ff4b55;
cursor: pointer;
}
+
.mx_RoomStatusBar_connectionLostBar {
display: -webkit-box;
display: -ms-flexbox;
@@ -2839,6 +3447,7 @@ html {
margin-top: 19px;
min-height: 58px;
}
+
.mx_RoomStatusBar_unsentMessages > div[role="alert"] {
display: -webkit-box;
display: -ms-flexbox;
@@ -2852,9 +3461,11 @@ html {
background-color: #f3f8fd;
border-radius: 4px;
}
+
.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge {
margin-right: 12px;
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentBadge
.mx_NotificationBadge {
@@ -2862,19 +3473,23 @@ html {
height: 24px !important;
border-radius: 24px !important;
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentBadge
.mx_NotificationBadge
.mx_NotificationBadge_count {
font-size: 1.6rem !important;
}
+
.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentTitle {
color: #ff4b55;
font-size: 1.5rem;
}
+
.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentDescription {
font-size: 1.2rem;
}
+
.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
@@ -2883,18 +3498,21 @@ html {
margin-right: 22px;
color: #61708b;
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentButtonBar
.mx_AccessibleButton {
- padding: 5px 10px 5px 28px;
+ padding: 5px 10px 5px 30px;
display: inline-block;
position: relative;
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentButtonBar
.mx_AccessibleButton:nth-child(2) {
border-left: 1px solid #e3e8f0;
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentButtonBar
.mx_AccessibleButton:before {
@@ -2908,30 +3526,33 @@ html {
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
+ width: 18px;
+ height: 18px;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ transform: translateY(-50%);
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentButtonBar
.mx_AccessibleButton.mx_RoomStatusBar_unsentCancelAllBtn:before {
- -webkit-mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
- mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
- width: 12px;
- height: 16px;
- top: calc(50% - 8px);
+ -webkit-mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
+ mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentButtonBar
.mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn {
padding-left: 34px;
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentButtonBar
.mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn:before {
-webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
- width: 18px;
- height: 18px;
- top: calc(50% - 9px);
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentButtonBar
.mx_InlineSpinner {
@@ -2939,32 +3560,38 @@ html {
margin-right: 5px;
top: 1px;
}
+
.mx_RoomStatusBar_unsentMessages
.mx_RoomStatusBar_unsentButtonBar
.mx_InlineSpinner
+ span {
margin-right: 10px;
}
+
.mx_RoomStatusBar_connectionLostBar img {
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: left;
}
+
.mx_RoomStatusBar_connectionLostBar_title {
color: #ff4b55;
}
+
.mx_RoomStatusBar_connectionLostBar_desc {
color: #2e2f32;
font-size: 1.3rem;
opacity: 0.5;
padding-bottom: 20px;
}
+
.mx_RoomStatusBar_resend_link {
color: #2e2f32 !important;
text-decoration: underline !important;
cursor: pointer;
}
+
.mx_RoomStatusBar_typingBar {
height: 50px;
line-height: 5rem;
@@ -2973,17 +3600,21 @@ html {
overflow-y: hidden;
display: block;
}
+
.mx_MatrixChat_useCompactLayout
.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
min-height: 40px;
}
+
.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_indicator {
margin-top: 10px;
}
+
.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_typingBar {
height: 40px;
line-height: 4rem;
}
+
.mx_RoomView {
word-wrap: break-word;
display: -webkit-box;
@@ -2994,6 +3625,7 @@ html {
-ms-flex-direction: column;
flex-direction: column;
}
+
@-webkit-keyframes mx_RoomView_fileDropTarget_animation {
0% {
opacity: 0;
@@ -3002,6 +3634,7 @@ html {
opacity: 0.95;
}
}
+
@keyframes mx_RoomView_fileDropTarget_animation {
0% {
opacity: 0;
@@ -3010,6 +3643,7 @@ html {
opacity: 0.95;
}
}
+
.mx_RoomView_fileDropTarget {
min-width: 0;
width: 100%;
@@ -3039,29 +3673,38 @@ html {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
+
@-webkit-keyframes mx_RoomView_fileDropTarget_image_animation {
0% {
- width: 0;
+ -webkit-transform: scaleX(0);
+ transform: scaleX(0);
}
to {
- width: 32px;
+ -webkit-transform: scaleX(1);
+ transform: scaleX(1);
}
}
+
@keyframes mx_RoomView_fileDropTarget_image_animation {
0% {
- width: 0;
+ -webkit-transform: scaleX(0);
+ transform: scaleX(0);
}
to {
- width: 32px;
+ -webkit-transform: scaleX(1);
+ transform: scaleX(1);
}
}
+
.mx_RoomView_fileDropTarget_image {
+ width: 32px;
-webkit-animation: mx_RoomView_fileDropTarget_image_animation;
animation: mx_RoomView_fileDropTarget_image_animation;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
margin-bottom: 16px;
}
+
.mx_RoomView_auxPanel {
min-width: 0;
width: 100%;
@@ -3071,6 +3714,7 @@ html {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
+
.mx_RoomView_auxPanel_fullHeight {
position: absolute;
top: 0;
@@ -3080,26 +3724,31 @@ html {
z-index: 3000;
background-color: #fff;
}
+
.mx_RoomView_auxPanel_hiddenHighlights {
border-bottom: 1px solid transparent;
padding: 10px 26px;
color: #ff4b55;
cursor: pointer;
}
+
.mx_RoomView_auxPanel_apps {
max-width: 1920px !important;
}
+
.mx_RoomView .mx_MainSplit,
.mx_RoomView_messagePanel {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
}
+
.mx_RoomView_messagePanel {
width: 100%;
overflow-y: auto;
overflow-anchor: none;
}
+
.mx_RoomView_messagePanelSearchSpinner {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -3110,6 +3759,7 @@ html {
background-repeat: no-repeat;
position: relative;
}
+
.mx_RoomView_messagePanelSearchSpinner:before {
background-color: #888;
-webkit-mask: url(../../img/feather-customised/search-input.044bfa7.svg);
@@ -3127,6 +3777,7 @@ html {
right: 0;
height: 50px;
}
+
.mx_RoomView_body {
display: -webkit-box;
display: -ms-flexbox;
@@ -3140,6 +3791,7 @@ html {
flex: 1;
min-width: 0;
}
+
.mx_RoomView_body .mx_RoomView_messagePanel,
.mx_RoomView_body .mx_RoomView_messagePanelSearchSpinner,
.mx_RoomView_body .mx_RoomView_messagePanelSpinner {
@@ -3147,6 +3799,7 @@ html {
-ms-flex-order: 2;
order: 2;
}
+
.mx_RoomView_body .mx_RoomView_timeline {
position: relative;
-webkit-box-flex: 1;
@@ -3159,7 +3812,9 @@ html {
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
+ contain: content;
}
+
.mx_RoomView_statusArea {
width: 100%;
-webkit-box-flex: 0;
@@ -3172,18 +3827,22 @@ html {
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
+
.mx_RoomView_statusArea_expanded {
max-height: 100px;
}
+
.mx_RoomView_statusAreaBox {
margin: auto;
min-height: 50px;
}
+
.mx_RoomView_statusAreaBox_line {
margin-left: 65px;
border-top: 1px solid transparent;
height: 1px;
}
+
.mx_RoomView_messageListWrapper {
min-height: 100%;
display: -webkit-box;
@@ -3197,15 +3856,18 @@ html {
-ms-flex-pack: end;
justify-content: flex-end;
}
+
.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
+
.mx_RoomView_searchResultsPanel a {
text-decoration: none;
color: inherit;
}
+
.mx_RoomView_empty {
font-size: 1.3rem;
padding: 0 24px;
@@ -3213,6 +3875,7 @@ html {
text-align: center;
margin-bottom: 80px;
}
+
.mx_RoomView_MessageList {
list-style-type: none;
padding: 18px;
@@ -3220,15 +3883,18 @@ html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_RoomView_MessageList li {
clear: both;
}
+
li.mx_RoomView_myReadMarker_container {
height: 0;
margin: 0;
padding: 0;
border: 0;
}
+
hr.mx_RoomView_myReadMarker {
border-top: 1px solid #0dbd8b;
border-bottom: 1px solid #0dbd8b;
@@ -3236,41 +3902,50 @@ hr.mx_RoomView_myReadMarker {
position: relative;
top: -1px;
z-index: 1;
+ will-change: width;
-webkit-transition: width easeinsine 0.4s 1s, opacity easeinsine 0.4s 1s;
transition: width easeinsine 0.4s 1s, opacity easeinsine 0.4s 1s;
width: 99%;
opacity: 1;
}
+
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
background-color: #fff;
}
+
.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
color: #fff;
opacity: 1;
}
+
.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line {
margin-top: 2px;
border: none;
height: 0;
}
+
.mx_RoomView_inCall .mx_MessageComposer_wrapper {
border-top: 2px hidden;
padding-top: 1px;
}
+
.mx_RoomView_voipChevron {
position: absolute;
bottom: -11px;
right: 11px;
}
+
.mx_RoomView_voipButton {
float: right;
margin-right: 13px;
margin-top: 13px;
cursor: pointer;
}
+
.mx_RoomView_voipButton object {
pointer-events: none;
}
+
.mx_RoomView .mx_MessageComposer {
width: 100%;
-webkit-box-flex: 0;
@@ -3278,6 +3953,7 @@ hr.mx_RoomView_myReadMarker {
flex: 0 0 auto;
margin-right: 2px;
}
+
.mx_RoomView_ongoingConfCallNotification {
width: 100%;
text-align: center;
@@ -3287,15 +3963,19 @@ hr.mx_RoomView_myReadMarker {
padding: 6px 0;
cursor: pointer;
}
+
.mx_RoomView_ongoingConfCallNotification a {
color: #fff !important;
}
+
.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList {
margin-bottom: 4px;
}
+
.mx_MatrixChat_useCompactLayout .mx_RoomView_statusAreaBox {
min-height: 42px;
}
+
.mx_ScrollPanel .mx_RoomView_MessageList {
position: relative;
display: -webkit-box;
@@ -3308,16 +3988,21 @@ hr.mx_RoomView_myReadMarker {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
+ content-visibility: auto;
+ contain-intrinsic-size: 50px;
}
+
.mx_SearchBox {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
min-width: 0;
}
+
.mx_SearchBox.mx_SearchBox_blurred:not(:hover) {
background-color: transparent;
}
+
.mx_SearchBox .mx_SearchBox_closeButton {
cursor: pointer;
background-image: url(../../img/icons-close.11ff07c.svg);
@@ -3327,6 +4012,7 @@ hr.mx_RoomView_myReadMarker {
background-position: 50%;
padding: 9px;
}
+
.mx_SpacePanel {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
@@ -3341,14 +4027,15 @@ hr.mx_RoomView_myReadMarker {
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
- overflow-y: auto;
}
+
.mx_SpacePanel .mx_SpacePanel_spaceTreeWrapper {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 8px 8px 16px 0;
}
+
.mx_SpacePanel .mx_SpacePanel_toggleCollapse {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
@@ -3367,21 +4054,30 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/element-icons/expand-space-panel.e6f74b9.svg);
mask-image: url(../../img/element-icons/expand-space-panel.e6f74b9.svg);
}
+
.mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
+
.mx_SpacePanel ul {
margin: 0;
list-style: none;
padding: 0;
}
+
.mx_SpacePanel ul > .mx_SpaceItem {
padding-left: 16px;
}
+
.mx_SpacePanel .mx_SpaceButton_toggleCollapse {
cursor: pointer;
}
+
+.mx_SpacePanel .mx_SpaceItem_dragging .mx_SpaceButton_toggleCollapse {
+ visibility: hidden;
+}
+
.mx_SpacePanel .mx_SpaceTreeLevel {
display: -webkit-box;
display: -ms-flexbox;
@@ -3395,6 +4091,7 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-positive: 1;
flex-grow: 1;
}
+
.mx_SpacePanel .mx_SpaceItem {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
@@ -3402,10 +4099,12 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-flow: wrap;
flex-flow: wrap;
}
+
.mx_SpacePanel .mx_SpaceItem.mx_SpaceItem_narrow {
-ms-flex-item-align: baseline;
align-self: baseline;
}
+
.mx_SpacePanel
.mx_SpaceItem.collapsed
> .mx_SpaceButton
@@ -3413,13 +4112,16 @@ hr.mx_RoomView_myReadMarker {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
+
.mx_SpacePanel .mx_SpaceItem.collapsed > .mx_SpaceTreeLevel {
display: none;
}
+
.mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
margin-left: 16px;
min-width: 40px;
}
+
.mx_SpacePanel .mx_SpaceButton {
border-radius: 8px;
display: -webkit-box;
@@ -3431,17 +4133,20 @@ hr.mx_RoomView_myReadMarker {
padding: 4px 4px 4px 0;
width: 100%;
}
+
.mx_SpacePanel
.mx_SpaceButton.mx_SpaceButton_active:not(.mx_SpaceButton_narrow)
.mx_SpaceButton_selectionWrapper {
background-color: #fff;
}
+
.mx_SpacePanel
.mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow
.mx_SpaceButton_selectionWrapper {
padding: 1px;
border: 3px solid #737d8c;
}
+
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper {
position: relative;
display: -webkit-box;
@@ -3456,6 +4161,7 @@ hr.mx_RoomView_myReadMarker {
border-radius: 12px;
padding: 4px;
}
+
.mx_SpacePanel
.mx_SpaceButton:not(.mx_SpaceButton_narrow)
.mx_SpaceButton_selectionWrapper {
@@ -3463,6 +4169,7 @@ hr.mx_RoomView_myReadMarker {
padding-right: 16px;
overflow: hidden;
}
+
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -3476,6 +4183,7 @@ hr.mx_RoomView_myReadMarker {
font-size: 1.4rem;
line-height: 1.8rem;
}
+
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse {
width: 16px;
height: 20px;
@@ -3489,6 +4197,7 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
}
+
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon {
width: 32px;
min-width: 32px;
@@ -3496,6 +4205,7 @@ hr.mx_RoomView_myReadMarker {
border-radius: 8px;
position: relative;
}
+
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon:before {
position: absolute;
content: "";
@@ -3510,19 +4220,23 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-size: 18px;
mask-size: 18px;
}
+
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon {
background-color: #fff;
}
+
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon:before {
background-color: #3f3d3d;
-webkit-mask-image: url(../../img/element-icons/home.b706c0e.svg);
mask-image: url(../../img/element-icons/home.b706c0e.svg);
}
+
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon {
background-color: #0dbd8b;
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
+
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon:before {
background-color: #fff;
-webkit-mask-image: url(../../img/element-icons/plus.62cc275.svg);
@@ -3530,18 +4244,22 @@ hr.mx_RoomView_myReadMarker {
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
+
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon {
background-color: #c1c6cd;
}
+
.mx_SpacePanel
.mx_SpaceButton.mx_SpaceButton_newCancel
.mx_SpaceButton_icon:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
+
.mx_SpacePanel .mx_SpaceButton .mx_BaseAvatar_image {
border-radius: 8px;
}
+
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton {
width: 20px;
min-width: 20px;
@@ -3552,6 +4270,7 @@ hr.mx_RoomView_myReadMarker {
position: absolute;
right: 4px;
}
+
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton:before {
top: 2px;
left: 2px;
@@ -3569,6 +4288,7 @@ hr.mx_RoomView_myReadMarker {
mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
background: #2e2f32;
}
+
.mx_SpacePanel .mx_SpacePanel_badgeContainer {
position: absolute;
display: -webkit-box;
@@ -3578,22 +4298,27 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-align: center;
align-items: center;
}
+
.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge {
margin: 0 2px;
}
+
.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot {
margin: 0 7px;
}
+
.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer {
right: 0;
top: 0;
}
+
.mx_SpacePanel.collapsed
.mx_SpaceButton
.mx_SpacePanel_badgeContainer
.mx_NotificationBadge {
background-clip: padding-box;
}
+
.mx_SpacePanel.collapsed
.mx_SpaceButton
.mx_SpacePanel_badgeContainer
@@ -3601,6 +4326,7 @@ hr.mx_RoomView_myReadMarker {
margin: 0 -1px 0 0;
border: 3px solid hsla(0, 0%, 91%, 0.77);
}
+
.mx_SpacePanel.collapsed
.mx_SpaceButton
.mx_SpacePanel_badgeContainer
@@ -3612,16 +4338,19 @@ hr.mx_RoomView_myReadMarker {
margin: -5px -5px 0 0;
border: 2px solid hsla(0, 0%, 91%, 0.77);
}
+
.mx_SpacePanel.collapsed
.mx_SpaceButton.mx_SpaceButton_active
.mx_SpacePanel_badgeContainer {
right: -3px;
top: -3px;
}
+
.mx_SpacePanel:not(.collapsed) .mx_SpacePanel_badgeContainer {
position: absolute;
right: 4px;
}
+
.mx_SpacePanel:not(.collapsed)
.mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
.mx_SpacePanel_badgeContainer,
@@ -3635,6 +4364,7 @@ hr.mx_RoomView_myReadMarker {
height: 0;
display: none;
}
+
.mx_SpacePanel:not(.collapsed)
.mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
.mx_SpaceButton_menuButton,
@@ -3646,26 +4376,31 @@ hr.mx_RoomView_myReadMarker {
.mx_SpaceButton_menuButton {
display: block;
}
+
.mx_SpacePanel > .mx_AutoHideScrollbar > .mx_SpaceButton,
.mx_SpacePanel
> .mx_AutoHideScrollbar
> .mx_SpaceButton.mx_SpaceButton_active:before {
height: 32px;
}
+
.mx_SpacePanel > .mx_AutoHideScrollbar > ul {
padding-left: 0;
}
+
.mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_header {
margin: 12px 16px;
font-weight: 600;
font-size: 1.5rem;
line-height: 1.8rem;
}
+
.mx_SpacePanel_contextMenu
.mx_IconizedContextMenu_optionList
.mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton {
color: #0dbd8b;
}
+
.mx_SpacePanel_contextMenu
.mx_IconizedContextMenu_optionList
.mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton
@@ -3674,37 +4409,46 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
}
+
.mx_SpacePanel_contextMenu .mx_SpacePanel_iconSettings:before {
-webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
mask-image: url(../../img/element-icons/settings.6b381af.svg);
}
+
.mx_SpacePanel_contextMenu .mx_SpacePanel_iconLeave:before {
-webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
mask-image: url(../../img/element-icons/leave.bb917e7.svg);
}
+
.mx_SpacePanel_contextMenu .mx_SpacePanel_iconMembers:before {
-webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
}
+
.mx_SpacePanel_contextMenu .mx_SpacePanel_iconPlus:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
}
+
.mx_SpacePanel_contextMenu .mx_SpacePanel_iconHash:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
}
+
.mx_SpacePanel_contextMenu .mx_SpacePanel_iconExplore:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
}
+
.mx_SpacePanel_sharePublicSpace {
margin: 0;
}
+
.mx_SpaceRoomDirectory_dialogWrapper > .mx_Dialog {
max-width: 960px;
height: 100%;
}
+
.mx_SpaceRoomDirectory {
height: 100%;
margin-bottom: 12px;
@@ -3715,6 +4459,7 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_SpaceRoomDirectory,
.mx_SpaceRoomDirectory .mx_Dialog_title,
.mx_SpaceRoomView_landing .mx_Dialog_title {
@@ -3722,16 +4467,19 @@ hr.mx_RoomView_myReadMarker {
display: -ms-flexbox;
display: flex;
}
+
.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar,
.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar {
margin-right: 12px;
-ms-flex-item-align: center;
align-self: center;
}
+
.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar_image,
.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar_image {
border-radius: 8px;
}
+
.mx_SpaceRoomDirectory .mx_Dialog_title > div > h1,
.mx_SpaceRoomView_landing .mx_Dialog_title > div > h1 {
font-weight: 600;
@@ -3739,6 +4487,7 @@ hr.mx_RoomView_myReadMarker {
line-height: 2.2rem;
margin: 0;
}
+
.mx_SpaceRoomDirectory .mx_Dialog_title > div > div,
.mx_SpaceRoomView_landing .mx_Dialog_title > div > div {
font-weight: 400;
@@ -3746,24 +4495,29 @@ hr.mx_RoomView_myReadMarker {
font-size: 1.5rem;
line-height: 2.4rem;
}
+
.mx_SpaceRoomDirectory .mx_AccessibleButton_kind_link,
.mx_SpaceRoomView_landing .mx_AccessibleButton_kind_link {
padding: 0;
}
+
.mx_SpaceRoomDirectory .mx_SearchBox,
.mx_SpaceRoomView_landing .mx_SearchBox {
margin: 24px 0 16px;
}
+
.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults,
.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults {
text-align: center;
}
+
.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults > div,
.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults > div {
font-size: 1.5rem;
line-height: 2.4rem;
color: #737d8c;
}
+
.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader,
.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader {
display: -webkit-box;
@@ -3777,6 +4531,7 @@ hr.mx_RoomView_myReadMarker {
line-height: 2.4rem;
color: #2e2f32;
}
+
.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton,
.mx_SpaceRoomView_landing
.mx_SpaceRoomDirectory_listHeader
@@ -3784,6 +4539,7 @@ hr.mx_RoomView_myReadMarker {
padding: 4px 12px;
font-weight: 400;
}
+
.mx_SpaceRoomDirectory
.mx_SpaceRoomDirectory_listHeader
.mx_AccessibleButton
@@ -3794,6 +4550,7 @@ hr.mx_RoomView_myReadMarker {
+ .mx_AccessibleButton {
margin-left: 16px;
}
+
.mx_SpaceRoomDirectory
.mx_SpaceRoomDirectory_listHeader
.mx_AccessibleButton_kind_danger_outline,
@@ -3808,10 +4565,12 @@ hr.mx_RoomView_myReadMarker {
.mx_AccessibleButton_kind_primary_outline {
padding: 3px 12px;
}
+
.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader > span,
.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader > span {
margin-left: auto;
}
+
.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error,
.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error {
position: relative;
@@ -3825,6 +4584,7 @@ hr.mx_RoomView_myReadMarker {
width: -moz-max-content;
width: max-content;
}
+
.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error:before,
.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error:before {
content: "";
@@ -3832,12 +4592,14 @@ hr.mx_RoomView_myReadMarker {
height: 16px;
width: 16px;
left: 0;
- background-image: url(../../img/element-icons/warning-badge.de1033e.svg);
+ background-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
}
+
.mx_SpaceRoomDirectory_list {
margin-top: 16px;
padding-bottom: 40px;
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount > h3 {
display: inline;
font-weight: 600;
@@ -3845,17 +4607,20 @@ hr.mx_RoomView_myReadMarker {
line-height: 2.2rem;
color: #2e2f32;
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount > span {
margin-left: 8px;
font-size: 1.5rem;
line-height: 2.4rem;
color: #737d8c;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_subspace
.mx_BaseAvatar_image {
border-radius: 8px;
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle {
position: absolute;
left: -1px;
@@ -3865,6 +4630,7 @@ hr.mx_RoomView_myReadMarker {
border-radius: 4px;
background-color: #fff;
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle:before {
content: "";
position: absolute;
@@ -3884,15 +4650,18 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_subspace_toggle.mx_SpaceRoomDirectory_subspace_toggle_shown:before {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children {
position: relative;
padding-left: 12px;
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile {
position: relative;
padding: 8px 16px;
@@ -3909,10 +4678,12 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-align: center;
align-items: center;
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_BaseAvatar {
grid-row: 1;
grid-column: 1;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile
.mx_SpaceRoomDirectory_roomTile_name {
@@ -3922,6 +4693,7 @@ hr.mx_RoomView_myReadMarker {
grid-row: 1;
grid-column: 2;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile
.mx_SpaceRoomDirectory_roomTile_name
@@ -3932,6 +4704,7 @@ hr.mx_RoomView_myReadMarker {
font-size: 1.2rem;
line-height: 1.5rem;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile
.mx_SpaceRoomDirectory_roomTile_name
@@ -3941,6 +4714,7 @@ hr.mx_RoomView_myReadMarker {
position: relative;
vertical-align: text-top;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile
.mx_SpaceRoomDirectory_roomTile_name
@@ -3950,6 +4724,7 @@ hr.mx_RoomView_myReadMarker {
top: 0;
left: 0;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile
.mx_SpaceRoomDirectory_roomTile_info {
@@ -3963,6 +4738,7 @@ hr.mx_RoomView_myReadMarker {
-webkit-line-clamp: 2;
overflow: hidden;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile
.mx_SpaceRoomDirectory_actions {
@@ -3971,6 +4747,7 @@ hr.mx_RoomView_myReadMarker {
grid-column: 3;
grid-row: 1/3;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile
.mx_SpaceRoomDirectory_actions
@@ -3980,6 +4757,7 @@ hr.mx_RoomView_myReadMarker {
display: inline-block;
visibility: hidden;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile
.mx_SpaceRoomDirectory_actions
@@ -3990,6 +4768,7 @@ hr.mx_RoomView_myReadMarker {
.mx_AccessibleButton_kind_primary_outline {
padding: 3px 16px;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile
.mx_SpaceRoomDirectory_actions
@@ -4000,14 +4779,17 @@ hr.mx_RoomView_myReadMarker {
vertical-align: middle;
margin-left: 12px;
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover {
background-color: hsla(0, 0%, 91%, 0.77);
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_roomTile:hover
.mx_AccessibleButton {
visibility: visible;
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:before,
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children:before {
content: "";
@@ -4018,6 +4800,7 @@ hr.mx_RoomView_myReadMarker {
left: 6px;
top: 0;
}
+
.mx_SpaceRoomDirectory_list
.mx_SpaceRoomDirectory_actions
.mx_SpaceRoomDirectory_actionsText {
@@ -4026,12 +4809,14 @@ hr.mx_RoomView_myReadMarker {
line-height: 1.5rem;
color: #737d8c;
}
+
.mx_SpaceRoomDirectory_list > hr {
border: none;
height: 1px;
background-color: rgba(141, 151, 165, 0.2);
margin: 20px 0;
}
+
.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_createRoom {
display: block;
margin: 16px auto 0;
@@ -4039,6 +4824,7 @@ hr.mx_RoomView_myReadMarker {
width: -moz-max-content;
width: max-content;
}
+
.mx_SpaceRoomView .mx_MainSplit > div:first-child {
padding: 80px 60px;
-webkit-box-flex: 1;
@@ -4047,6 +4833,7 @@ hr.mx_RoomView_myReadMarker {
max-height: 100%;
overflow-y: auto;
}
+
.mx_SpaceRoomView .mx_MainSplit > div:first-child h1 {
margin: 0;
font-size: 2.4rem;
@@ -4056,6 +4843,7 @@ hr.mx_RoomView_myReadMarker {
width: -moz-max-content;
width: max-content;
}
+
.mx_SpaceRoomView
.mx_MainSplit
> div:first-child
@@ -4066,9 +4854,11 @@ hr.mx_RoomView_myReadMarker {
margin-bottom: 24px;
max-width: 428px;
}
+
.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_AddExistingToSpace {
max-width: 428px;
}
+
.mx_SpaceRoomView
.mx_MainSplit
> div:first-child
@@ -4077,18 +4867,21 @@ hr.mx_RoomView_myReadMarker {
height: calc(100vh - 360px);
max-height: 400px;
}
+
.mx_SpaceRoomView
.mx_MainSplit
> div:first-child:not(.mx_SpaceRoomView_landing)
.mx_SpaceFeedbackPrompt {
width: 428px;
}
+
.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_buttons {
display: block;
margin-top: 44px;
width: 428px;
text-align: right;
}
+
.mx_SpaceRoomView
.mx_MainSplit
> div:first-child
@@ -4097,6 +4890,7 @@ hr.mx_RoomView_myReadMarker {
padding: 8px 22px;
margin-left: 16px;
}
+
.mx_SpaceRoomView
.mx_MainSplit
> div:first-child
@@ -4104,12 +4898,15 @@ hr.mx_RoomView_myReadMarker {
input.mx_AccessibleButton {
border: none;
}
+
.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_Field {
max-width: 428px;
}
+
.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_Field + .mx_Field {
margin-top: 28px;
}
+
.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_errorText {
font-weight: 600;
font-size: 1.2rem;
@@ -4117,12 +4914,14 @@ hr.mx_RoomView_myReadMarker {
color: #ff4b55;
margin-bottom: 28px;
}
+
.mx_SpaceRoomView
.mx_MainSplit
> div:first-child
.mx_AccessibleButton_disabled {
cursor: not-allowed;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_preview {
padding: 32px 24px !important;
margin: auto;
@@ -4134,11 +4933,13 @@ hr.mx_RoomView_myReadMarker {
border-radius: 8px;
position: relative;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_BetaCard_betaPill {
position: absolute;
right: 24px;
top: 32px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
.mx_SpaceRoomView_preview_spaceBetaPrompt {
@@ -4150,6 +4951,7 @@ hr.mx_RoomView_myReadMarker {
position: relative;
padding-left: 24px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
.mx_SpaceRoomView_preview_spaceBetaPrompt
@@ -4159,6 +4961,7 @@ hr.mx_RoomView_myReadMarker {
font-size: inherit;
line-height: inherit;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
.mx_SpaceRoomView_preview_spaceBetaPrompt:before {
@@ -4177,6 +4980,7 @@ hr.mx_RoomView_myReadMarker {
mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
background-color: #737d8c;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter {
display: -webkit-box;
display: -ms-flexbox;
@@ -4187,12 +4991,14 @@ hr.mx_RoomView_myReadMarker {
margin-bottom: 20px;
font-size: 1.5rem;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
.mx_SpaceRoomView_preview_inviter
> div {
margin-left: 8px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
.mx_SpaceRoomView_preview_inviter
@@ -4200,6 +5006,7 @@ hr.mx_RoomView_myReadMarker {
.mx_SpaceRoomView_preview_inviter_name {
line-height: 1.8rem;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
.mx_SpaceRoomView_preview_inviter
@@ -4208,6 +5015,7 @@ hr.mx_RoomView_myReadMarker {
line-height: 2.4rem;
color: #737d8c;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
> .mx_BaseAvatar
@@ -4215,9 +5023,11 @@ hr.mx_RoomView_myReadMarker {
.mx_SpaceRoomView .mx_SpaceRoomView_preview > .mx_BaseAvatar_image {
border-radius: 12px;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_preview h1.mx_SpaceRoomView_preview_name {
margin: 20px 0 !important;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_topic {
font-size: 1.4rem;
line-height: 2.2rem;
@@ -4226,11 +5036,13 @@ hr.mx_RoomView_myReadMarker {
max-height: 160px;
overflow-y: auto;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
.mx_SpaceRoomView_preview_joinButtons {
margin-top: 20px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
.mx_SpaceRoomView_preview_joinButtons
@@ -4240,6 +5052,7 @@ hr.mx_RoomView_myReadMarker {
box-sizing: border-box;
padding: 14px 0;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_preview
.mx_SpaceRoomView_preview_joinButtons
@@ -4247,6 +5060,17 @@ hr.mx_RoomView_myReadMarker {
+ .mx_AccessibleButton {
margin-left: 20px;
}
+
+.mx_SpaceRoomView .mx_SpaceRoomView_landing {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
> .mx_BaseAvatar
@@ -4254,23 +5078,27 @@ hr.mx_RoomView_myReadMarker {
.mx_SpaceRoomView .mx_SpaceRoomView_landing > .mx_BaseAvatar_image {
border-radius: 12px;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name {
margin: 24px 0 16px;
font-size: 1.5rem;
color: #737d8c;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_name
> span {
display: inline-block;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_name
.mx_SpaceRoomView_landing_nameRow {
margin-top: 12px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_name
@@ -4278,6 +5106,7 @@ hr.mx_RoomView_myReadMarker {
> h1 {
display: inline-block;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_name
@@ -4286,6 +5115,7 @@ hr.mx_RoomView_myReadMarker {
margin-right: 4px;
vertical-align: middle;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info {
display: -webkit-box;
display: -ms-flexbox;
@@ -4294,6 +5124,7 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-align: center;
align-items: center;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_info
@@ -4301,6 +5132,7 @@ hr.mx_RoomView_myReadMarker {
display: inline-block;
margin: 0 auto 0 0;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_info
@@ -4308,6 +5140,7 @@ hr.mx_RoomView_myReadMarker {
display: inline-block;
margin-right: 12px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_info
@@ -4315,6 +5148,7 @@ hr.mx_RoomView_myReadMarker {
.mx_FacePile_faces {
cursor: pointer;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_info
@@ -4326,6 +5160,7 @@ hr.mx_RoomView_myReadMarker {
height: -moz-min-content;
height: min-content;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_info
@@ -4345,6 +5180,7 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_info
@@ -4354,6 +5190,7 @@ hr.mx_RoomView_myReadMarker {
width: 24px;
height: 24px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_landing
.mx_SpaceRoomView_landing_info
@@ -4374,25 +5211,40 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
mask-image: url(../../img/element-icons/settings.6b381af.svg);
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_topic {
font-size: 1.5rem;
margin-top: 12px;
margin-bottom: 16px;
+ white-space: pre-wrap;
+ word-wrap: break-word;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_landing > hr {
border: none;
height: 1px;
background-color: hsla(0, 0%, 91%, 0.77);
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SearchBox {
margin: 0 0 20px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0;
+ flex: 0;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt {
margin-bottom: 16px;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt + hr {
display: none;
}
+
+.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_list {
+ display: contents;
+}
+
.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton {
position: relative;
padding: 16px 32px 16px 72px;
@@ -4404,13 +5256,16 @@ hr.mx_RoomView_myReadMarker {
font-size: 1.5rem;
margin: 20px 0;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton > h3 {
font-weight: 600;
margin: 0 0 4px;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton > span {
color: #737d8c;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:before {
position: absolute;
content: "";
@@ -4426,32 +5281,82 @@ hr.mx_RoomView_myReadMarker {
mask-size: 24px;
background-color: #8d99a5;
}
+
.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:hover {
border-color: #0dbd8b;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_privateScope
> .mx_AccessibleButton:hover:before {
background-color: #0dbd8b;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_privateScope
> .mx_AccessibleButton:hover
> span {
color: #2e2f32;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_privateScope
.mx_SpaceRoomView_privateScope_justMeButton:before {
-webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_privateScope
.mx_SpaceRoomView_privateScope_meAndMyTeammatesButton:before {
-webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
}
+
+.mx_SpaceRoomView .mx_SpaceRoomView_betaWarning {
+ padding: 12px 12px 12px 54px;
+ position: relative;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ width: 432px;
+ border-radius: 8px;
+ background-color: #f7f7f7;
+ color: #737d8c;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.mx_SpaceRoomView .mx_SpaceRoomView_betaWarning > h3 {
+ font-weight: 600;
+ font-size: inherit;
+ line-height: inherit;
+ margin: 0;
+}
+
+.mx_SpaceRoomView .mx_SpaceRoomView_betaWarning > p {
+ font-size: inherit;
+ line-height: inherit;
+ margin: 0;
+}
+
+.mx_SpaceRoomView .mx_SpaceRoomView_betaWarning:before {
+ -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ content: "";
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ top: 14px;
+ left: 14px;
+ background-color: #737d8c;
+}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_inviteTeammates
.mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
@@ -4464,6 +5369,7 @@ hr.mx_RoomView_myReadMarker {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_inviteTeammates
.mx_SpaceRoomView_inviteTeammates_betaDisclaimer
@@ -4472,12 +5378,14 @@ hr.mx_RoomView_myReadMarker {
left: 16px;
top: 16px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_inviteTeammates
.mx_SpaceRoomView_inviteTeammates_buttons {
color: #737d8c;
margin-top: 28px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_inviteTeammates
.mx_SpaceRoomView_inviteTeammates_buttons
@@ -4487,6 +5395,7 @@ hr.mx_RoomView_myReadMarker {
padding-left: 32px;
line-height: 24px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_inviteTeammates
.mx_SpaceRoomView_inviteTeammates_buttons
@@ -4505,6 +5414,7 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-size: contain;
mask-size: contain;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_inviteTeammates
.mx_SpaceRoomView_inviteTeammates_buttons
@@ -4512,6 +5422,7 @@ hr.mx_RoomView_myReadMarker {
+ .mx_AccessibleButton {
margin-left: 32px;
}
+
.mx_SpaceRoomView
.mx_SpaceRoomView_inviteTeammates
.mx_SpaceRoomView_inviteTeammates_buttons
@@ -4519,17 +5430,20 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
}
+
.mx_SpaceRoomView_info {
color: #737d8c;
font-size: 1.5rem;
line-height: 2.4rem;
margin: 20px 0;
}
+
.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private,
.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public {
padding-left: 20px;
position: relative;
}
+
.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before,
.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before {
position: absolute;
@@ -4544,37 +5458,44 @@ hr.mx_RoomView_myReadMarker {
mask-repeat: no-repeat;
background-color: #8d99a5;
}
+
.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before {
-webkit-mask-size: 12px;
mask-size: 12px;
-webkit-mask-image: url(../../img/globe.8201f08.svg);
mask-image: url(../../img/globe.8201f08.svg);
}
+
.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before {
-webkit-mask-size: 14px;
mask-size: 14px;
-webkit-mask-image: url(../../img/element-icons/lock.1f264bd.svg);
mask-image: url(../../img/element-icons/lock.1f264bd.svg);
}
+
.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link {
color: inherit;
position: relative;
padding-left: 16px;
}
+
.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link:before {
content: "·";
position: absolute;
left: 6px;
}
+
.mx_SpaceFeedbackPrompt {
margin-top: 18px;
margin-bottom: 12px;
}
+
.mx_SpaceFeedbackPrompt > hr {
border: none;
border-top: 1px solid #e7e7e7;
margin-bottom: 12px;
}
+
.mx_SpaceFeedbackPrompt > div {
display: -webkit-box;
display: -ms-flexbox;
@@ -4586,6 +5507,7 @@ hr.mx_RoomView_myReadMarker {
font-size: 1.5rem;
line-height: 2.4rem;
}
+
.mx_SpaceFeedbackPrompt > div > span {
color: #737d8c;
position: relative;
@@ -4594,6 +5516,7 @@ hr.mx_RoomView_myReadMarker {
line-height: inherit;
margin-right: auto;
}
+
.mx_SpaceFeedbackPrompt > div > span:before {
content: "";
position: absolute;
@@ -4611,6 +5534,7 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_SpaceFeedbackPrompt > div .mx_AccessibleButton_kind_link {
color: #0dbd8b;
position: relative;
@@ -4619,6 +5543,7 @@ hr.mx_RoomView_myReadMarker {
font-size: inherit;
line-height: inherit;
}
+
.mx_SpaceFeedbackPrompt > div .mx_AccessibleButton_kind_link:before {
content: "";
position: absolute;
@@ -4635,28 +5560,132 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_TabbedView {
padding: 0 0 0 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 8px 0 0;
}
-.mx_TabbedView_tabLabels {
+
+.mx_TabbedView,
+.mx_TabbedView_tabsOnLeft {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.mx_TabbedView_tabsOnLeft {
+ position: absolute;
+}
+
+.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels {
width: 170px;
max-width: 170px;
- color: #45474a;
position: fixed;
}
+
+.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabPanel {
+ margin-left: 240px;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active {
+ background-color: #0dbd8b;
+ color: #fff;
+}
+
+.mx_TabbedView_tabsOnLeft
+ .mx_TabbedView_tabLabel_active
+ .mx_TabbedView_maskedIcon:before {
+ background-color: #fff;
+}
+
+.mx_TabbedView_tabsOnLeft .mx_TabbedView_maskedIcon {
+ width: 16px;
+ height: 16px;
+ margin-left: 8px;
+ margin-right: 16px;
+}
+
+.mx_TabbedView_tabsOnLeft .mx_TabbedView_maskedIcon:before {
+ -webkit-mask-size: 16px;
+ mask-size: 16px;
+ width: 16px;
+ height: 16px;
+}
+
+.mx_TabbedView_tabsOnTop {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabels {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-bottom: 8px;
+}
+
+.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel {
+ padding-left: 0;
+ padding-right: 52px;
+}
+
+.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel .mx_TabbedView_tabLabel_text {
+ font-size: 15px;
+ color: #8d99a5;
+}
+
+.mx_TabbedView_tabsOnTop .mx_TabbedView_tabPanel {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+
+.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel_active,
+.mx_TabbedView_tabsOnTop
+ .mx_TabbedView_tabLabel_active
+ .mx_TabbedView_tabLabel_text {
+ color: #0dbd8b;
+}
+
+.mx_TabbedView_tabsOnTop
+ .mx_TabbedView_tabLabel_active
+ .mx_TabbedView_maskedIcon:before {
+ background-color: #0dbd8b;
+}
+
+.mx_TabbedView_tabsOnTop .mx_TabbedView_maskedIcon {
+ width: 22px;
+ height: 22px;
+ margin-left: 0;
+ margin-right: 8px;
+}
+
+.mx_TabbedView_tabsOnTop .mx_TabbedView_maskedIcon:before {
+ -webkit-mask-size: 22px;
+ mask-size: 22px;
+ width: inherit;
+ height: inherit;
+}
+
+.mx_TabbedView_tabLabels {
+ color: #45474a;
+}
+
.mx_TabbedView_tabLabel {
display: -webkit-box;
display: -ms-flexbox;
@@ -4671,46 +5700,31 @@ hr.mx_RoomView_myReadMarker {
font-size: 1.3rem;
position: relative;
}
-.mx_TabbedView_tabLabel_active {
- background-color: #0dbd8b;
- color: #fff;
-}
+
.mx_TabbedView_maskedIcon {
- margin-left: 8px;
- margin-right: 16px;
- width: 16px;
- height: 16px;
display: inline-block;
}
+
.mx_TabbedView_maskedIcon:before {
display: inline-block;
- background-color: #454545;
+ background-color: #c1c6cd;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
- -webkit-mask-size: 16px;
- mask-size: 16px;
- width: 16px;
- height: 16px;
-webkit-mask-position: center;
mask-position: center;
content: "";
}
-.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
- background-color: #fff;
-}
+
.mx_TabbedView_tabLabel_text {
vertical-align: middle;
}
+
.mx_TabbedView_tabPanel {
- margin-left: 240px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
}
+
.mx_TabbedView_tabPanel,
.mx_TabbedView_tabPanelContent {
-webkit-box-flex: 1;
@@ -4718,9 +5732,11 @@ hr.mx_RoomView_myReadMarker {
flex-grow: 1;
min-height: 0;
}
+
.mx_TabbedView_tabPanelContent {
overflow: auto;
}
+
.mx_ToastContainer {
position: absolute;
top: 0;
@@ -4730,11 +5746,13 @@ hr.mx_RoomView_myReadMarker {
display: grid;
grid-template-rows: 1fr 14px 6px;
}
+
.mx_ToastContainer.mx_ToastContainer_stacked:before {
content: "";
margin: 0 4px;
grid-row: 2/4;
}
+
.mx_ToastContainer .mx_Toast_toast,
.mx_ToastContainer.mx_ToastContainer_stacked:before {
grid-column: 1;
@@ -4743,6 +5761,7 @@ hr.mx_RoomView_myReadMarker {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
border-radius: 8px;
}
+
.mx_ToastContainer .mx_Toast_toast {
grid-row: 1/3;
color: #2e2f32;
@@ -4757,6 +5776,7 @@ hr.mx_RoomView_myReadMarker {
row-gap: 4px;
padding: 8px;
}
+
.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:after,
.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:before {
content: "";
@@ -4773,51 +5793,61 @@ hr.mx_RoomView_myReadMarker {
background-size: 100%;
background-repeat: no-repeat;
}
+
.mx_ToastContainer
.mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification:after {
-webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
mask-image: url(../../img/e2e/normal.76f0c09.svg);
background-color: #2e2f32;
}
+
.mx_ToastContainer
.mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:before {
background-color: #fff;
-webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
mask-image: url(../../img/e2e/normal.76f0c09.svg);
- -webkit-mask-size: 90%;
- mask-size: 90%;
+ -webkit-mask-size: 80%;
+ mask-size: 80%;
}
+
.mx_ToastContainer
.mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:after {
-webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
mask-image: url(../../img/e2e/warning.78bb264.svg);
background-color: #ff4b55;
}
+
.mx_ToastContainer
.mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_secure_backup:after {
-webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
background-color: #2e2f32;
}
+
.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_body,
.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_title {
grid-column: 2;
}
+
.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) {
padding-left: 12px;
}
+
.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) .mx_Toast_title {
grid-column: 1/-1;
}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_description,
.mx_ToastContainer .mx_Toast_toast .mx_Toast_title {
padding-right: 8px;
}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_title {
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2 {
grid-column: 1/3;
grid-row: 1;
@@ -4828,6 +5858,7 @@ hr.mx_RoomView_myReadMarker {
width: auto;
vertical-align: middle;
}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_title span {
padding-left: 8px;
float: right;
@@ -4835,21 +5866,33 @@ hr.mx_RoomView_myReadMarker {
line-height: 2.2rem;
color: #61708b;
}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_body {
grid-column: 1/3;
grid-row: 2;
}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons {
float: right;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_FormButton {
+
+.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_AccessibleButton {
min-width: 96px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
+.mx_ToastContainer
+ .mx_Toast_toast
+ .mx_Toast_buttons
+ .mx_AccessibleButton
+ + .mx_AccessibleButton {
+ margin-left: 5px;
+}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_description {
max-width: 272px;
overflow: hidden;
@@ -4857,6 +5900,7 @@ hr.mx_RoomView_myReadMarker {
margin: 4px 0 11px;
font-size: 1.2rem;
}
+
.mx_ToastContainer
.mx_Toast_toast
.mx_Toast_description
@@ -4864,22 +5908,28 @@ hr.mx_RoomView_myReadMarker {
font-size: inherit;
padding: 0;
}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_description a {
text-decoration: none;
}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_detail {
color: #737d8c;
}
+
.mx_ToastContainer .mx_Toast_toast .mx_Toast_deviceID {
font-size: 1rem;
}
+
.mx_UploadBar {
padding-left: 65px;
position: relative;
}
+
.mx_UploadBar .mx_ProgressBar {
width: calc(100% - 40px);
}
+
.mx_UploadBar_filename {
margin-top: 5px;
color: #61708b;
@@ -4888,6 +5938,7 @@ hr.mx_RoomView_myReadMarker {
font-size: 1.5rem;
vertical-align: middle;
}
+
.mx_UploadBar_filename:before {
content: "";
height: 18px;
@@ -4896,6 +5947,7 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/element-icons/upload.e2a53e0.svg);
mask-image: url(../../img/element-icons/upload.e2a53e0.svg);
}
+
.mx_UploadBar_cancel,
.mx_UploadBar_filename:before {
position: absolute;
@@ -4906,6 +5958,7 @@ hr.mx_RoomView_myReadMarker {
mask-position: center;
background-color: #61708b;
}
+
.mx_UploadBar_cancel {
right: 0;
height: 16px;
@@ -4914,16 +5967,20 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/icons-close.11ff07c.svg);
mask-image: url(../../img/icons-close.11ff07c.svg);
}
+
.mx_UserMenu {
padding-right: 6px;
}
+
.mx_UserMenu.mx_UserMenu_prototype {
margin-bottom: 6px;
padding-right: 0;
}
+
.mx_UserMenu.mx_UserMenu_prototype .mx_UserMenu_headerButtons {
margin-right: 2px;
}
+
.mx_UserMenu.mx_UserMenu_prototype:after {
content: "";
border-bottom: 1px solid #2e2f32;
@@ -4931,12 +5988,14 @@ hr.mx_RoomView_myReadMarker {
display: block;
padding-top: 8px;
}
+
.mx_UserMenu .mx_UserMenu_headerButtons {
width: 16px;
height: 16px;
position: relative;
display: block;
}
+
.mx_UserMenu .mx_UserMenu_headerButtons:before {
content: "";
width: 16px;
@@ -4954,6 +6013,7 @@ hr.mx_RoomView_myReadMarker {
-webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
}
+
.mx_UserMenu .mx_UserMenu_row {
display: -webkit-box;
display: -ms-flexbox;
@@ -4962,12 +6022,14 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-align: center;
align-items: center;
}
+
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer {
position: relative;
margin-right: 8px;
height: 32px;
padding: 3px 0;
}
+
.mx_UserMenu
.mx_UserMenu_row
.mx_UserMenu_userAvatarContainer
@@ -4976,16 +6038,19 @@ hr.mx_RoomView_myReadMarker {
-o-object-fit: cover;
object-fit: cover;
}
+
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
min-width: 0;
}
+
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName,
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_userName {
display: block;
}
+
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName {
color: #61708b;
font-size: 1.3rem;
@@ -4997,6 +6062,7 @@ hr.mx_RoomView_myReadMarker {
overflow: hidden;
white-space: nowrap;
}
+
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userName {
font-weight: 600;
font-size: 1.5rem;
@@ -5008,12 +6074,14 @@ hr.mx_RoomView_myReadMarker {
overflow: hidden;
white-space: nowrap;
}
+
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd {
width: 24px;
height: 24px;
margin-right: 8px;
position: relative;
}
+
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd:before {
content: "";
position: absolute;
@@ -5027,61 +6095,75 @@ hr.mx_RoomView_myReadMarker {
mask-repeat: no-repeat;
background: #61708b;
}
+
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_noisy:before {
-webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
mask-image: url(../../img/element-icons/notifications.d298b39.svg);
}
+
.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_muted:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
}
+
.mx_UserMenu.mx_UserMenu_minimized {
padding-right: 0;
}
+
.mx_UserMenu.mx_UserMenu_minimized .mx_UserMenu_userAvatarContainer {
margin-right: 0;
}
+
.mx_UserMenu_contextMenu {
width: 258px;
}
+
.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype {
padding-bottom: 16px;
}
+
.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype
.mx_UserMenu_contextMenu_header {
padding-bottom: 0;
padding-top: 16px;
}
+
.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype
.mx_UserMenu_contextMenu_header:nth-child(n + 2) {
padding-top: 8px;
}
+
.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype hr {
width: 85%;
opacity: 0.2;
border: none;
border-bottom: 1px solid #2e2f32;
}
+
.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu
> .mx_IconizedContextMenu_optionList {
margin-top: 4px;
}
+
.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu
> .mx_IconizedContextMenu_optionList:before {
border: none;
}
+
.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu
> .mx_IconizedContextMenu_optionList
> .mx_AccessibleButton {
padding-top: 2px;
padding-bottom: 2px;
}
+
.mx_UserMenu_contextMenu.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList_red
.mx_AccessibleButton {
padding-top: 16px;
padding-bottom: 16px;
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header {
padding: 20px;
display: -webkit-box;
@@ -5091,6 +6173,7 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-align: center;
align-items: center;
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header
.mx_UserMenu_contextMenu_name {
@@ -5103,6 +6186,7 @@ hr.mx_RoomView_myReadMarker {
flex-direction: column;
width: calc(100% - 40px);
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header
.mx_UserMenu_contextMenu_name
@@ -5115,6 +6199,7 @@ hr.mx_RoomView_myReadMarker {
overflow: hidden;
white-space: nowrap;
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header
.mx_UserMenu_contextMenu_name
@@ -5123,6 +6208,7 @@ hr.mx_RoomView_myReadMarker {
font-size: 1.5rem;
line-height: 2rem;
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header
.mx_UserMenu_contextMenu_name
@@ -5130,6 +6216,7 @@ hr.mx_RoomView_myReadMarker {
font-size: 1.5rem;
line-height: 2.4rem;
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header
.mx_UserMenu_contextMenu_themeButton {
@@ -5151,28 +6238,33 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts,
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_hostingLink {
padding-top: 0;
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts {
display: inline-block;
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts
> span {
font-weight: 600;
display: block;
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts
> span
+ span {
margin-top: 8px;
}
+
.mx_UserMenu_contextMenu
.mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts
.mx_AccessibleButton_kind_link {
@@ -5180,11 +6272,13 @@ hr.mx_RoomView_myReadMarker {
font-size: inherit;
padding: 0;
}
+
.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon {
width: 16px;
height: 16px;
display: block;
}
+
.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon:before {
content: "";
width: 16px;
@@ -5198,58 +6292,71 @@ hr.mx_RoomView_myReadMarker {
mask-repeat: no-repeat;
background: #2e2f32;
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconHome:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/home.1b4edd5.svg);
mask-image: url(../../img/element-icons/roomlist/home.1b4edd5.svg);
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconHosting:before {
-webkit-mask-image: url(../../img/element-icons/brands/element.182040d.svg);
mask-image: url(../../img/element-icons/brands/element.182040d.svg);
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconBell:before {
-webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
mask-image: url(../../img/element-icons/notifications.d298b39.svg);
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconLock:before {
-webkit-mask-image: url(../../img/element-icons/security.66f2fa6.svg);
mask-image: url(../../img/element-icons/security.66f2fa6.svg);
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconSettings:before {
-webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
mask-image: url(../../img/element-icons/settings.6b381af.svg);
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconArchive:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/archived.226584d.svg);
mask-image: url(../../img/element-icons/roomlist/archived.226584d.svg);
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconMessage:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);
mask-image: url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconSignOut:before {
-webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
mask-image: url(../../img/element-icons/leave.bb917e7.svg);
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconMembers:before {
-webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
}
+
.mx_UserMenu_contextMenu .mx_UserMenu_iconInvite:before {
-webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
}
+
.mx_ViewSource_separator {
clear: both;
border-bottom: 1px solid #e5e5e5;
padding-top: 0.7em;
padding-bottom: 0.7em;
}
+
.mx_ViewSource_heading {
font-size: 1.7rem;
font-weight: 400;
color: #2e2f32;
margin-top: 0.7em;
}
+
.mx_ViewSource pre {
text-align: left;
font-size: 1.2rem;
@@ -5257,9 +6364,11 @@ hr.mx_RoomView_myReadMarker {
word-wrap: break-word;
white-space: pre-wrap;
}
+
.mx_ViewSource_details {
margin-top: 0.8em;
}
+
.mx_CompleteSecurity_header {
display: -webkit-box;
display: -ms-flexbox;
@@ -5268,24 +6377,29 @@ hr.mx_RoomView_myReadMarker {
-ms-flex-align: center;
align-items: center;
}
+
.mx_CompleteSecurity_headerIcon {
width: 24px;
height: 24px;
margin-right: 4px;
position: relative;
}
+
.mx_CompleteSecurity_heroIcon {
width: 128px;
height: 128px;
position: relative;
margin: 0 auto;
}
+
.mx_CompleteSecurity_body {
font-size: 1.5rem;
}
+
.mx_CompleteSecurity_waiting {
color: #8d99a5;
}
+
.mx_CompleteSecurity_actionRow {
display: -webkit-box;
display: -ms-flexbox;
@@ -5295,13 +6409,16 @@ hr.mx_RoomView_myReadMarker {
justify-content: flex-end;
margin-top: 2.8rem;
}
+
.mx_CompleteSecurity_actionRow .mx_AccessibleButton {
-webkit-margin-start: 18px;
margin-inline-start: 18px;
}
+
.mx_CompleteSecurity_actionRow .mx_AccessibleButton.warning {
color: #ff4b55;
}
+
.mx_Login_submit {
vertical-align: middle;
border: 0;
@@ -5323,23 +6440,28 @@ hr.mx_RoomView_myReadMarker {
box-sizing: border-box;
text-align: center;
}
+
.mx_Login_submit:disabled {
opacity: 0.3;
cursor: default;
}
+
.mx_Login_loader {
display: inline;
position: relative;
top: 2px;
left: 8px;
}
+
.mx_Login_loader .mx_Spinner {
display: inline;
}
+
.mx_Login_loader .mx_Spinner img {
width: 16px;
height: 16px;
}
+
.mx_Login_error {
color: #ff4b55;
font-weight: 700;
@@ -5347,13 +6469,16 @@ hr.mx_RoomView_myReadMarker {
margin-top: 12px;
margin-bottom: 12px;
}
+
.mx_Login_error.mx_Login_serverError {
text-align: left;
font-weight: 400;
}
+
.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
color: #ff8d13;
}
+
.mx_Login_type_container {
display: -webkit-box;
display: -ms-flexbox;
@@ -5363,29 +6488,274 @@ hr.mx_RoomView_myReadMarker {
align-items: center;
color: #232f32;
}
+
.mx_Login_type_container .mx_Field {
margin: 0;
}
+
.mx_Login_type_label {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
+
.mx_Login_underlinedServerName {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
border-bottom: 1px dashed #0dbd8b;
}
+
div.mx_AccessibleButton_kind_link.mx_Login_forgot {
display: block;
margin: 0 auto;
font-size: inherit;
padding: 0;
}
+
div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
cursor: not-allowed;
}
+
+.mx_MediaBody.mx_AudioPlayer_container {
+ padding: 16px 12px 12px;
+}
+
+.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.mx_MediaBody.mx_AudioPlayer_container
+ .mx_AudioPlayer_primaryContainer
+ .mx_PlayPauseButton {
+ margin-right: 8px;
+}
+
+.mx_MediaBody.mx_AudioPlayer_container
+ .mx_AudioPlayer_primaryContainer
+ .mx_AudioPlayer_mediaInfo {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ overflow: hidden;
+}
+
+.mx_MediaBody.mx_AudioPlayer_container
+ .mx_AudioPlayer_primaryContainer
+ .mx_AudioPlayer_mediaInfo
+ > * {
+ display: block;
+}
+
+.mx_MediaBody.mx_AudioPlayer_container
+ .mx_AudioPlayer_primaryContainer
+ .mx_AudioPlayer_mediaInfo
+ .mx_AudioPlayer_mediaName {
+ color: #2e2f32;
+ font-size: 1.5rem;
+ line-height: 1.5rem;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ padding-bottom: 4px;
+}
+
+.mx_MediaBody.mx_AudioPlayer_container
+ .mx_AudioPlayer_primaryContainer
+ .mx_AudioPlayer_mediaInfo
+ .mx_AudioPlayer_byline {
+ font-size: 1.2rem;
+ line-height: 1.2rem;
+}
+
+.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek .mx_SeekBar {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+
+.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek .mx_Clock {
+ width: 4.2rem;
+ min-width: 4.2rem;
+ padding-left: 4px;
+ text-align: right;
+}
+
+.mx_PlayPauseButton {
+ position: relative;
+ width: 32px;
+ height: 32px;
+ min-width: 32px;
+ min-height: 32px;
+ border-radius: 32px;
+ background-color: #f4f6fa;
+}
+
+.mx_PlayPauseButton:before {
+ content: "";
+ position: absolute;
+ background-color: #737d8c;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+
+.mx_PlayPauseButton.mx_PlayPauseButton_disabled:before {
+ opacity: 0.5;
+}
+
+.mx_PlayPauseButton.mx_PlayPauseButton_play:before {
+ width: 13px;
+ height: 16px;
+ top: 8px;
+ left: 12px;
+ -webkit-mask-image: url(../../img/element-icons/play.a72552b.svg);
+ mask-image: url(../../img/element-icons/play.a72552b.svg);
+}
+
+.mx_PlayPauseButton.mx_PlayPauseButton_pause:before {
+ width: 10px;
+ height: 12px;
+ top: 10px;
+ left: 11px;
+ -webkit-mask-image: url(../../img/element-icons/pause.c4c0886.svg);
+ mask-image: url(../../img/element-icons/pause.c4c0886.svg);
+}
+
+.mx_MediaBody.mx_VoiceMessagePrimaryContainer {
+ padding-right: 11px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ contain: content;
+}
+
+.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar {
+ background-color: #c1c6cd;
+ height: 100%;
+ -webkit-transform: scaleY(max(0.05, var(--barHeight)));
+ transform: scaleY(max(0.05, var(--barHeight)));
+}
+
+.mx_MediaBody.mx_VoiceMessagePrimaryContainer
+ .mx_Waveform
+ .mx_Waveform_bar.mx_Waveform_bar_100pct {
+ -webkit-transition: background-color 0.25s ease;
+ transition: background-color 0.25s ease;
+ background-color: #737d8c;
+}
+
+.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Clock {
+ width: 4.2rem;
+ padding-right: 6px;
+ padding-left: 8px;
+}
+
+.mx_MediaBody.mx_VoiceMessagePrimaryContainer.mx_VoiceMessagePrimaryContainer_noWaveform {
+ max-width: 162px;
+}
+
+.mx_SeekBar {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ width: 100%;
+ height: 1px;
+ background: #c1c6cd;
+ outline: none;
+ position: relative;
+ cursor: pointer;
+}
+
+.mx_SeekBar::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 8px;
+ height: 8px;
+ border-radius: 8px;
+ background-color: #8d99a5;
+ cursor: pointer;
+}
+
+.mx_SeekBar::-moz-range-thumb {
+ width: 8px;
+ height: 8px;
+ border-radius: 8px;
+ background-color: #8d99a5;
+ cursor: pointer;
+ border: none;
+}
+
+.mx_SeekBar:before {
+ content: "";
+ background-color: #8d99a5;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 1px;
+ -webkit-transform-origin: 0 100%;
+ transform-origin: 0 100%;
+ -webkit-transform: scaleX(var(--fillTo));
+ transform: scaleX(var(--fillTo));
+}
+
+.mx_SeekBar::-moz-range-progress {
+ background-color: #8d99a5;
+ height: 1px;
+}
+
+.mx_SeekBar:disabled {
+ opacity: 0.5;
+}
+
+.mx_SeekBar:after {
+ content: "";
+ position: absolute;
+ top: -6px;
+ bottom: -6px;
+ left: 0;
+ right: 0;
+}
+
+.mx_Waveform {
+ position: relative;
+ height: 30px;
+ top: 1px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ overflow: hidden;
+}
+
+.mx_Waveform .mx_Waveform_bar {
+ width: 0;
+ border: 1px solid transparent;
+ border-radius: 2px;
+ min-height: 0;
+ max-height: 100%;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
.mx_AuthBody {
width: 500px;
font-size: 1.2rem;
@@ -5396,46 +6766,56 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_AuthBody h2 {
font-size: 2.4rem;
font-weight: 600;
margin-top: 8px;
color: #232f32;
}
+
.mx_AuthBody h3 {
font-size: 1.4rem;
font-weight: 600;
color: #61708b;
}
+
.mx_AuthBody h3.mx_AuthBody_centered {
text-align: center;
}
+
.mx_AuthBody a:hover,
.mx_AuthBody a:link,
.mx_AuthBody a:visited {
color: #0dbd8b;
text-decoration: none;
}
+
.mx_AuthBody input[type="password"],
.mx_AuthBody input[type="text"] {
color: #232f32;
}
+
.mx_AuthBody .mx_Field input,
.mx_AuthBody .mx_Field select {
color: #232f32;
background-color: #fff;
}
+
.mx_AuthBody .mx_Field label {
color: #232f32;
}
+
.mx_AuthBody .mx_Field input:not(:-moz-placeholder-shown) + label,
.mx_AuthBody .mx_Field textarea:not(:-moz-placeholder-shown) + label {
background-color: #fff;
}
+
.mx_AuthBody .mx_Field input:not(:-ms-input-placeholder) + label,
.mx_AuthBody .mx_Field textarea:not(:-ms-input-placeholder) + label {
background-color: #fff;
}
+
.mx_AuthBody .mx_Field_labelAlwaysTopLeft label,
.mx_AuthBody .mx_Field input:focus + label,
.mx_AuthBody .mx_Field input:not(:placeholder-shown) + label,
@@ -5444,53 +6824,67 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
.mx_AuthBody .mx_Field textarea:not(:placeholder-shown) + label {
background-color: #fff;
}
+
.mx_AuthBody input.error {
color: #ff4b55;
}
+
.mx_AuthBody .mx_Field input {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_AuthBody .mx_Field_select:before {
background-color: #232f32;
}
+
.mx_AuthBody .mx_Dropdown {
color: #232f32;
}
+
.mx_AuthBody .mx_Dropdown_arrow {
background: #232f32;
}
+
.mx_AuthBody .mx_Dropdown_menu {
background-color: #fff;
}
+
.mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight {
background-color: #ddd;
}
+
.mx_AuthBody_fieldRow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 10px;
}
+
.mx_AuthBody_fieldRow > .mx_Field {
margin: 0 5px;
}
+
.mx_AuthBody_fieldRow > .mx_Field:first-child {
margin-left: 0;
}
+
.mx_AuthBody_fieldRow > .mx_Field:last-child {
margin-right: 0;
}
+
.mx_AuthBody_paddedFooter {
height: 80px;
padding-top: 28px;
text-align: center;
}
+
.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title {
margin-top: 16px;
font-size: 1.5rem;
line-height: 2.4rem;
}
+
.mx_AuthBody_paddedFooter
.mx_AuthBody_paddedFooter_title
.mx_InlineSpinner
@@ -5498,25 +6892,31 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
vertical-align: sub;
margin-right: 5px;
}
+
.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_subtitle {
margin-top: 8px;
font-size: 1rem;
line-height: 1.4rem;
}
+
.mx_AuthBody_changeFlow {
display: block;
text-align: center;
width: 100%;
}
+
.mx_AuthBody_changeFlow > a {
font-weight: 600;
}
+
.mx_SSOButtons + .mx_AuthBody_changeFlow {
margin-top: 24px;
}
+
.mx_AuthBody_spinner {
margin: 1em 0;
}
+
@media only screen and (max-width: 480px) {
.mx_AuthBody {
border-radius: 4px;
@@ -5525,6 +6925,7 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
padding: 10px;
}
}
+
.mx_AuthButtons {
min-height: 24px;
height: unset !important;
@@ -5534,10 +6935,12 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
-ms-flex-order: 4;
order: 4;
}
+
.mx_AuthButtons_loginButton_wrapper {
text-align: center;
width: 100%;
}
+
.mx_AuthButtons_loginButton,
.mx_AuthButtons_registerButton {
margin-top: 3px;
@@ -5554,6 +6957,7 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
padding: 0 11px;
word-break: break-word;
}
+
.mx_AuthFooter {
text-align: center;
width: 100%;
@@ -5569,12 +6973,14 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
);
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}
+
.mx_AuthFooter a:hover,
.mx_AuthFooter a:link,
.mx_AuthFooter a:visited {
color: #fff;
margin: 0 22px;
}
+
.mx_AuthHeader {
display: -webkit-box;
display: -ms-flexbox;
@@ -5588,11 +6994,13 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
@media only screen and (max-width: 480px) {
.mx_AuthHeader {
display: none;
}
}
+
.mx_AuthHeaderLogo {
margin-top: 15px;
-webkit-box-flex: 1;
@@ -5600,14 +7008,17 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
flex: 1;
padding: 0 25px;
}
+
.mx_AuthHeaderLogo img {
width: 100%;
}
+
@media only screen and (max-width: 480px) {
.mx_AuthHeaderLogo {
display: none;
}
}
+
.mx_AuthPage {
width: 100%;
min-height: 100%;
@@ -5617,12 +7028,14 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
flex-direction: column;
background-color: #2e3649;
}
+
.mx_AuthPage,
.mx_AuthPage_modal {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_AuthPage_modal {
margin: 100px auto auto;
border-radius: 4px;
@@ -5630,11 +7043,13 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
background-color: hsla(0, 0%, 96.1%, 0.9);
}
+
@media only screen and (max-width: 480px) {
.mx_AuthPage_modal {
margin-top: 0;
}
}
+
.mx_CompleteSecurityBody {
width: 600px;
color: #232f32;
@@ -5644,50 +7059,60 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_CompleteSecurityBody h2 {
font-size: 2.4rem;
font-weight: 600;
margin-top: 0;
}
+
.mx_CompleteSecurityBody h3 {
font-size: 1.4rem;
font-weight: 600;
}
+
.mx_CompleteSecurityBody a:hover,
.mx_CompleteSecurityBody a:link,
.mx_CompleteSecurityBody a:visited {
color: #0dbd8b;
text-decoration: none;
}
+
.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option {
padding: 0 3px;
}
+
.mx_CountryDropdown .mx_Dropdown_arrow {
padding-right: 3px;
}
+
.mx_CountryDropdown_shortOption {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
height: 100%;
}
+
.mx_CountryDropdown_option,
.mx_CountryDropdown_shortOption {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
+
.mx_CountryDropdown_option {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_InteractiveAuthEntryComponents_emailWrapper {
padding-right: 100px;
position: relative;
margin-top: 32px;
margin-bottom: 32px;
}
+
.mx_InteractiveAuthEntryComponents_emailWrapper:after,
.mx_InteractiveAuthEntryComponents_emailWrapper:before {
position: absolute;
@@ -5696,11 +7121,13 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
content: "";
right: -10px;
}
+
.mx_InteractiveAuthEntryComponents_emailWrapper:before {
background-color: rgba(244, 246, 250, 0.91);
border-radius: 50%;
top: -20px;
}
+
.mx_InteractiveAuthEntryComponents_emailWrapper:after {
background-image: url(../../img/element-icons/email-prompt.1d04dfe.svg);
background-repeat: no-repeat;
@@ -5708,9 +7135,11 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
background-size: contain;
top: -25px;
}
+
.mx_InteractiveAuthEntryComponents_msisdnWrapper {
text-align: center;
}
+
.mx_InteractiveAuthEntryComponents_msisdnEntry {
font-size: 200%;
font-weight: 700;
@@ -5718,27 +7147,33 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
border-radius: 3px;
width: 6em;
}
+
.mx_InteractiveAuthEntryComponents_msisdnEntry:focus {
border: 1px solid #0dbd8b;
}
+
.mx_InteractiveAuthEntryComponents_msisdnSubmit {
margin-top: 4px;
margin-bottom: 5px;
}
+
.mx_InteractiveAuthEntryComponents_termsSubmit {
margin-top: 20px;
margin-bottom: 5px;
display: block;
width: 100%;
}
+
.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
background-color: #747474;
cursor: default;
}
+
.mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
background-color: #92caad;
cursor: default;
}
+
.mx_InteractiveAuthEntryComponents_termsPolicy {
display: -webkit-box;
display: -ms-flexbox;
@@ -5754,9 +7189,11 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
-ms-flex-align: center;
align-items: center;
}
+
.mx_InteractiveAuthEntryComponents_passwordSection {
width: 300px;
}
+
.mx_InteractiveAuthEntryComponents_sso_buttons {
display: -webkit-box;
display: -ms-flexbox;
@@ -5770,12 +7207,15 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
justify-content: flex-end;
margin-top: 20px;
}
+
.mx_InteractiveAuthEntryComponents_sso_buttons .mx_AccessibleButton {
margin-left: 5px;
}
+
.mx_AuthBody_language {
width: 100%;
}
+
.mx_AuthBody_language .mx_Dropdown_input {
border: none;
font-size: 1.4rem;
@@ -5783,9 +7223,11 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
color: #4e5054;
width: auto;
}
+
.mx_AuthBody_language .mx_Dropdown_arrow {
background: #4e5054;
}
+
progress.mx_PassphraseField_progress {
-webkit-appearance: none;
-moz-appearance: none;
@@ -5797,43 +7239,55 @@ progress.mx_PassphraseField_progress {
top: -12px;
border-radius: "2px";
}
+
progress.mx_PassphraseField_progress::-moz-progress-bar {
border-radius: "2px";
}
+
progress.mx_PassphraseField_progress::-webkit-progress-bar,
progress.mx_PassphraseField_progress::-webkit-progress-value {
border-radius: "2px";
}
+
progress.mx_PassphraseField_progress {
color: #ff4b55;
}
+
progress.mx_PassphraseField_progress::-moz-progress-bar {
background-color: #ff4b55;
}
+
progress.mx_PassphraseField_progress::-webkit-progress-value {
background-color: #ff4b55;
}
+
progress.mx_PassphraseField_progress[value="2"],
progress.mx_PassphraseField_progress[value="3"] {
color: #ff812d;
}
+
progress.mx_PassphraseField_progress[value="2"]::-moz-progress-bar,
progress.mx_PassphraseField_progress[value="3"]::-moz-progress-bar {
background-color: #ff812d;
}
+
progress.mx_PassphraseField_progress[value="2"]::-webkit-progress-value,
progress.mx_PassphraseField_progress[value="3"]::-webkit-progress-value {
background-color: #ff812d;
}
+
progress.mx_PassphraseField_progress[value="4"] {
color: #0dbd8b;
}
+
progress.mx_PassphraseField_progress[value="4"]::-moz-progress-bar {
background-color: #0dbd8b;
}
+
progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
background-color: #0dbd8b;
}
+
.mx_Welcome {
display: -webkit-box;
display: -ms-flexbox;
@@ -5846,13 +7300,16 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
-ms-flex-align: center;
align-items: center;
}
+
.mx_Welcome.mx_WelcomePage_registrationDisabled .mx_ButtonCreateAccount {
display: none;
}
+
.mx_Welcome .mx_AuthBody_language {
width: 160px;
margin-bottom: 10px;
}
+
.mx_BaseAvatar {
position: relative;
display: inline-block;
@@ -5861,6 +7318,7 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
-ms-user-select: none;
user-select: none;
}
+
.mx_BaseAvatar_initial {
position: absolute;
left: 0;
@@ -5870,6 +7328,7 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
pointer-events: none;
font-weight: 400;
}
+
.mx_BaseAvatar_image {
-o-object-fit: cover;
object-fit: cover;
@@ -5877,10 +7336,13 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
vertical-align: top;
background-color: #fff;
}
+
.mx_DecoratedRoomAvatar,
.mx_ExtraTile {
position: relative;
+ contain: content;
}
+
.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar,
.mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
-webkit-mask-image: url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);
@@ -5892,6 +7354,7 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
+
.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon,
.mx_ExtraTile .mx_DecoratedRoomAvatar_icon {
position: absolute;
@@ -5902,6 +7365,7 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
height: 8px;
border-radius: 50%;
}
+
.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before,
.mx_ExtraTile .mx_DecoratedRoomAvatar_icon:before {
content: "";
@@ -5910,6 +7374,7 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
position: absolute;
border-radius: 8px;
}
+
.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe:before,
.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe:before {
-webkit-mask-position: center;
@@ -5922,18 +7387,22 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
-webkit-mask-image: url(../../img/globe.8201f08.svg);
mask-image: url(../../img/globe.8201f08.svg);
}
+
.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_offline:before,
.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_offline:before {
background-color: #e3e8f0;
}
+
.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online:before,
.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online:before {
background-color: #0dbd8b;
}
+
.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_away:before,
.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_away:before {
background-color: #d9b072;
}
+
.mx_DecoratedRoomAvatar .mx_NotificationBadge,
.mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer,
.mx_ExtraTile .mx_NotificationBadge,
@@ -5944,90 +7413,106 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
height: 18px;
width: 18px;
}
+
.mx_MessageComposer_avatar .mx_BaseAvatar {
padding: 2px;
border: 1px solid transparent;
border-radius: 100%;
}
+
.mx_MessageComposer_avatar .mx_BaseAvatar_initial {
left: 2px;
}
+
.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar {
border-color: #0dbd8b;
}
-@-webkit-keyframes shadow-pulse {
- 0% {
- -webkit-box-shadow: 0 0 0 0 rgba(13, 189, 139, 0.2);
- box-shadow: 0 0 0 0 rgba(13, 189, 139, 0.2);
- }
- to {
- -webkit-box-shadow: 0 0 0 6px rgba(13, 189, 139, 0);
- box-shadow: 0 0 0 6px rgba(13, 189, 139, 0);
- }
-}
-@keyframes shadow-pulse {
- 0% {
- -webkit-box-shadow: 0 0 0 0 rgba(13, 189, 139, 0.2);
- box-shadow: 0 0 0 0 rgba(13, 189, 139, 0.2);
- }
- to {
- -webkit-box-shadow: 0 0 0 6px rgba(13, 189, 139, 0);
- box-shadow: 0 0 0 6px rgba(13, 189, 139, 0);
- }
-}
-.mx_PulsedAvatar img {
- -webkit-animation: shadow-pulse 1s infinite;
- animation: shadow-pulse 1s infinite;
-}
+
.mx_WidgetAvatar {
border-radius: 4px;
}
+
.mx_BetaCard {
margin-bottom: 20px;
padding: 24px;
background-color: #f4f6fa;
border-radius: 8px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
-.mx_BetaCard > div .mx_BetaCard_title {
+
+.mx_BetaCard .mx_BetaCard_columns {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.mx_BetaCard .mx_BetaCard_columns > div .mx_BetaCard_title {
font-weight: 600;
font-size: 1.8rem;
line-height: 2.2rem;
color: #2e2f32;
margin: 4px 0 14px;
}
-.mx_BetaCard > div .mx_BetaCard_title .mx_BetaCard_betaPill {
+
+.mx_BetaCard
+ .mx_BetaCard_columns
+ > div
+ .mx_BetaCard_title
+ .mx_BetaCard_betaPill {
margin-left: 12px;
}
-.mx_BetaCard > div .mx_BetaCard_caption {
+
+.mx_BetaCard .mx_BetaCard_columns > div .mx_BetaCard_caption {
font-size: 1.5rem;
line-height: 2rem;
color: #737d8c;
margin-bottom: 20px;
}
-.mx_BetaCard > div .mx_AccessibleButton {
+
+.mx_BetaCard
+ .mx_BetaCard_columns
+ > div
+ .mx_BetaCard_buttons
+ .mx_AccessibleButton {
display: block;
margin: 12px 0;
padding: 7px 40px;
width: auto;
}
-.mx_BetaCard > div .mx_BetaCard_disclaimer {
+
+.mx_BetaCard .mx_BetaCard_columns > div .mx_BetaCard_disclaimer {
font-size: 1.2rem;
line-height: 1.5rem;
color: #737d8c;
margin-top: 20px;
}
-.mx_BetaCard > img {
+
+.mx_BetaCard .mx_BetaCard_columns > img {
margin: auto 0 auto 20px;
width: 300px;
-o-object-fit: contain;
object-fit: contain;
height: 100%;
}
+
+.mx_BetaCard .mx_BetaCard_relatedSettings .mx_SettingsFlag {
+ margin: 16px 0 0;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #2e2f32;
+}
+
+.mx_BetaCard
+ .mx_BetaCard_relatedSettings
+ .mx_SettingsFlag
+ .mx_SettingsFlag_microcopy {
+ margin-top: 4px;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #737d8c;
+}
+
.mx_BetaCard_betaPill {
background-color: #238cf5;
padding: 4px 10px;
@@ -6039,64 +7524,105 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
display: inline-block;
vertical-align: text-bottom;
}
+
.mx_BetaCard_betaPill.mx_BetaCard_betaPill_clickable {
cursor: pointer;
}
+
.mx_BetaDot {
- border-radius: 50%;
margin: 10px;
height: 12px;
width: 12px;
- -webkit-transform: scale(1);
- transform: scale(1);
- background: #238cf5;
- -webkit-box-shadow: 0 0 0 0 #238cf5;
- box-shadow: 0 0 0 0 #238cf5;
-webkit-animation: mx_Beta_bluePulse 2s infinite;
animation: mx_Beta_bluePulse 2s infinite;
-webkit-animation-iteration-count: 20;
animation-iteration-count: 20;
+ position: relative;
}
+
+.mx_BetaDot,
+.mx_BetaDot:after {
+ border-radius: 50%;
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ background: #238cf5;
+}
+
+.mx_BetaDot:after {
+ content: "";
+ position: absolute;
+ width: inherit;
+ height: inherit;
+ top: 0;
+ left: 0;
+ -webkit-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-animation-name: mx_Beta_bluePulse_shadow;
+ animation-name: mx_Beta_bluePulse_shadow;
+ -webkit-animation-duration: inherit;
+ animation-duration: inherit;
+ -webkit-animation-iteration-count: inherit;
+ animation-iteration-count: inherit;
+}
+
@-webkit-keyframes mx_Beta_bluePulse {
0% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
- -webkit-box-shadow: 0 0 0 0 rgba(35, 140, 245, 0.7);
- box-shadow: 0 0 0 0 rgba(35, 140, 245, 0.7);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
- -webkit-box-shadow: 0 0 0 10px rgba(35, 140, 245, 0);
- box-shadow: 0 0 0 10px rgba(35, 140, 245, 0);
}
to {
-webkit-transform: scale(0.95);
transform: scale(0.95);
- -webkit-box-shadow: 0 0 0 0 rgba(35, 140, 245, 0);
- box-shadow: 0 0 0 0 rgba(35, 140, 245, 0);
}
}
+
@keyframes mx_Beta_bluePulse {
0% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
- -webkit-box-shadow: 0 0 0 0 rgba(35, 140, 245, 0.7);
- box-shadow: 0 0 0 0 rgba(35, 140, 245, 0.7);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
- -webkit-box-shadow: 0 0 0 10px rgba(35, 140, 245, 0);
- box-shadow: 0 0 0 10px rgba(35, 140, 245, 0);
}
to {
-webkit-transform: scale(0.95);
transform: scale(0.95);
- -webkit-box-shadow: 0 0 0 0 rgba(35, 140, 245, 0);
- box-shadow: 0 0 0 0 rgba(35, 140, 245, 0);
}
}
+
+@-webkit-keyframes mx_Beta_bluePulse_shadow {
+ 0% {
+ opacity: 0.7;
+ }
+ 70% {
+ -webkit-transform: scale(2.2);
+ transform: scale(2.2);
+ opacity: 0;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes mx_Beta_bluePulse_shadow {
+ 0% {
+ opacity: 0.7;
+ }
+ 70% {
+ -webkit-transform: scale(2.2);
+ transform: scale(2.2);
+ opacity: 0;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
.mx_CallContextMenu_item {
width: 205px;
height: 40px;
@@ -6104,13 +7630,16 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
line-height: 40px;
vertical-align: center;
}
+
.mx_IconizedContextMenu {
min-width: 146px;
}
+
.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList > * {
padding-left: 20px;
padding-right: 20px;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList
.mx_IconizedContextMenu_optionList_notFirst:before,
@@ -6123,16 +7652,19 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
position: absolute;
left: 0;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList:first-child
.mx_AccessibleButton:first-child {
border-radius: 8px 8px 0 0;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList:last-child
.mx_AccessibleButton:last-child {
border-radius: 0 0 8px 8px;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList
.mx_AccessibleButton {
@@ -6149,17 +7681,20 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
-ms-flex-align: center;
align-items: center;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList
.mx_AccessibleButton:hover {
background-color: #f5f8fa;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList
.mx_AccessibleButton.mx_AccessibleButton_disabled {
opacity: 0.5;
cursor: not-allowed;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList
.mx_AccessibleButton
@@ -6172,6 +7707,7 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
min-width: 16px;
max-width: 16px;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList
.mx_AccessibleButton
@@ -6184,6 +7720,7 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
overflow: hidden;
white-space: nowrap;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList
.mx_AccessibleButton
@@ -6191,11 +7728,13 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
+ .mx_IconizedContextMenu_label {
padding-left: 14px;
}
+
.mx_IconizedContextMenu .mx_IconizedContextMenu_icon {
position: relative;
width: 16px;
height: 16px;
}
+
.mx_IconizedContextMenu .mx_IconizedContextMenu_icon:before {
content: "";
width: 16px;
@@ -6209,53 +7748,130 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
mask-repeat: no-repeat;
background: #2e2f32;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList_red
.mx_AccessibleButton {
color: #ff4b55 !important;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_optionList_red
.mx_IconizedContextMenu_icon:before {
background-color: #ff4b55;
}
+
.mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_AccessibleButton,
.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_AccessibleButton {
color: #0dbd8b !important;
}
+
.mx_IconizedContextMenu
.mx_IconizedContextMenu_active
.mx_IconizedContextMenu_icon:before {
background-color: #0dbd8b;
}
+
.mx_IconizedContextMenu.mx_IconizedContextMenu_compact
.mx_IconizedContextMenu_optionList
> * {
padding: 8px 16px 8px 11px;
}
+
.mx_IconizedContextMenu .mx_IconizedContextMenu_checked {
margin-left: 16px;
margin-right: -5px;
}
+
.mx_IconizedContextMenu .mx_IconizedContextMenu_checked:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
}
-.mx_MessageContextMenu {
- padding: 6px;
-}
-.mx_MessageContextMenu_field {
+
+.mx_MessageContextMenu .mx_IconizedContextMenu_icon {
+ width: 16px;
+ height: 16px;
display: block;
- padding: 3px 6px;
- cursor: pointer;
- white-space: nowrap;
}
-.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet {
- font-weight: 700;
+
+.mx_MessageContextMenu .mx_IconizedContextMenu_icon:before {
+ content: "";
+ width: 16px;
+ height: 16px;
+ display: block;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background: #2e2f32;
}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconCollapse:before {
+ -webkit-mask-image: url(../../img/element-icons/message/chevron-up.90f4709.svg);
+ mask-image: url(../../img/element-icons/message/chevron-up.90f4709.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconReport:before {
+ -webkit-mask-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
+ mask-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconLink:before {
+ -webkit-mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
+ mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconPermalink:before {
+ -webkit-mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
+ mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconUnhidePreview:before {
+ -webkit-mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
+ mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconForward:before {
+ -webkit-mask-image: url(../../img/element-icons/message/fwd.d1f50ee.svg);
+ mask-image: url(../../img/element-icons/message/fwd.d1f50ee.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconRedact:before {
+ -webkit-mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
+ mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconResend:before {
+ -webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
+ mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconSource:before {
+ -webkit-mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
+ mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconQuote:before {
+ -webkit-mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
+ mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconPin:before {
+ -webkit-mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
+ mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
+}
+
+.mx_MessageContextMenu .mx_MessageContextMenu_iconUnpin:before {
+ -webkit-mask-image: url(../../img/element-icons/room/pin.a996417.svg);
+ mask-image: url(../../img/element-icons/room/pin.a996417.svg);
+}
+
.mx_StatusMessageContextMenu {
padding: 10px;
}
+
.mx_StatusMessageContextMenu_form {
display: -webkit-box;
display: -ms-flexbox;
@@ -6265,6 +7881,7 @@ progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
-ms-flex-direction: column;
flex-direction: column;
}
+
input.mx_StatusMessageContextMenu_message {
border-radius: 4px;
border: 1px solid #e7e7e7;
@@ -6273,26 +7890,33 @@ input.mx_StatusMessageContextMenu_message {
font-weight: 400;
margin: 0 0 10px;
}
+
.mx_StatusMessageContextMenu_message::-webkit-input-placeholder {
color: #61708b;
}
+
.mx_StatusMessageContextMenu_message::-moz-placeholder {
color: #61708b;
}
+
.mx_StatusMessageContextMenu_message:-ms-input-placeholder {
color: #61708b;
}
+
.mx_StatusMessageContextMenu_message::-ms-input-placeholder {
color: #61708b;
}
+
.mx_StatusMessageContextMenu_message::placeholder {
color: #61708b;
}
+
.mx_StatusMessageContextMenu_actionContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_StatusMessageContextMenu_clear,
.mx_StatusMessageContextMenu_submit {
vertical-align: middle;
@@ -6313,19 +7937,23 @@ input.mx_StatusMessageContextMenu_message {
border: 1px solid transparent;
margin-right: 10px;
}
+
.mx_StatusMessageContextMenu_submit[disabled] {
opacity: 0.49;
}
+
.mx_StatusMessageContextMenu_clear {
color: #ff4b55;
background-color: transparent;
border: 1px solid #ff4b55;
}
+
.mx_StatusMessageContextMenu_actionContainer .mx_Spinner {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
+
.mx_TagTileContextMenu_item {
padding: 8px 20px 8px 8px;
cursor: pointer;
@@ -6338,6 +7966,7 @@ input.mx_StatusMessageContextMenu_message {
align-items: center;
line-height: 1.6rem;
}
+
.mx_TagTileContextMenu_item:before {
content: "";
height: 15px;
@@ -6349,14 +7978,28 @@ input.mx_StatusMessageContextMenu_message {
mask-size: contain;
margin-right: 8px;
}
+
.mx_TagTileContextMenu_viewCommunity:before {
-webkit-mask-image: url(../../img/element-icons/view-community.0cad1a5.svg);
mask-image: url(../../img/element-icons/view-community.0cad1a5.svg);
}
+
+.mx_TagTileContextMenu_moveUp:before {
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.mx_TagTileContextMenu_moveDown:before,
+.mx_TagTileContextMenu_moveUp:before {
+ -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+ mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
+}
+
.mx_TagTileContextMenu_hideCommunity:before {
-webkit-mask-image: url(../../img/element-icons/hide.2b52315.svg);
mask-image: url(../../img/element-icons/hide.2b52315.svg);
}
+
.mx_TagTileContextMenu_separator {
margin-top: 0;
margin-bottom: 0;
@@ -6364,6 +8007,7 @@ input.mx_StatusMessageContextMenu_message {
border-top: 1px solid;
border-color: #e7e7e7;
}
+
.mx_AddExistingToSpaceDialog_wrapper .mx_Dialog {
display: -webkit-box;
display: -ms-flexbox;
@@ -6373,24 +8017,29 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_AddExistingToSpace .mx_SearchBox {
margin: 0 0 15px;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_content {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_noResults {
display: block;
margin-top: 24px;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_section:not(:first-child) {
margin-top: 24px;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_section > h3 {
margin: 0;
color: #737d8c;
@@ -6398,6 +8047,7 @@ input.mx_StatusMessageContextMenu_message {
font-weight: 600;
line-height: 1.5rem;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_section
.mx_AddExistingToSpace_entry {
@@ -6406,12 +8056,14 @@ input.mx_StatusMessageContextMenu_message {
display: flex;
margin-top: 12px;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_section
.mx_AddExistingToSpace_entry
.mx_DecoratedRoomAvatar {
margin-right: 12px;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_section
.mx_AddExistingToSpace_entry
@@ -6426,6 +8078,7 @@ input.mx_StatusMessageContextMenu_message {
text-overflow: ellipsis;
margin-right: 12px;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_section
.mx_AddExistingToSpace_entry
@@ -6434,14 +8087,17 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: center;
align-items: center;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar {
margin-right: 12px;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_section_spaces
.mx_BaseAvatar_image {
border-radius: 8px;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental {
position: relative;
border-radius: 8px;
@@ -6452,6 +8108,7 @@ input.mx_StatusMessageContextMenu_message {
line-height: 1.5rem;
color: #737d8c;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental:before {
content: "";
position: absolute;
@@ -6469,12 +8126,14 @@ input.mx_StatusMessageContextMenu_message {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 20px;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
@@ -6483,17 +8142,20 @@ input.mx_StatusMessageContextMenu_message {
line-height: 1.5rem;
color: #737d8c;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span .mx_ProgressBar {
height: 8px;
width: 100%;
border-radius: 8px;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
> span
.mx_ProgressBar::-moz-progress-bar {
border-radius: 8px;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
> span
@@ -6504,6 +8166,7 @@ input.mx_StatusMessageContextMenu_message {
.mx_ProgressBar::-webkit-progress-value {
border-radius: 8px;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
> span
@@ -6513,14 +8176,17 @@ input.mx_StatusMessageContextMenu_message {
line-height: 2.4rem;
color: #2e2f32;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span > * {
vertical-align: middle;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
.mx_AddExistingToSpace_error {
padding-left: 12px;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
.mx_AddExistingToSpace_error
@@ -6528,6 +8194,7 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-item-align: center;
align-self: center;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
.mx_AddExistingToSpace_error
@@ -6537,6 +8204,7 @@ input.mx_StatusMessageContextMenu_message {
line-height: 1.8rem;
color: #ff4b55;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
.mx_AddExistingToSpace_error
@@ -6546,16 +8214,19 @@ input.mx_StatusMessageContextMenu_message {
line-height: 1.5rem;
color: #2e2f32;
}
+
.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton {
display: inline-block;
-ms-flex-item-align: center;
align-self: center;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
.mx_AccessibleButton_kind_primary {
padding: 8px 36px;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
.mx_AddExistingToSpace_retryButton {
@@ -6563,6 +8234,7 @@ input.mx_StatusMessageContextMenu_message {
padding-left: 24px;
position: relative;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
.mx_AddExistingToSpace_retryButton:before {
@@ -6581,11 +8253,13 @@ input.mx_StatusMessageContextMenu_message {
height: 18px;
left: 0;
}
+
.mx_AddExistingToSpace
.mx_AddExistingToSpace_footer
.mx_AccessibleButton_kind_link {
padding: 0;
}
+
.mx_AddExistingToSpaceDialog {
width: 480px;
color: #2e2f32;
@@ -6598,17 +8272,20 @@ input.mx_StatusMessageContextMenu_message {
min-height: 0;
height: 80vh;
}
+
.mx_AddExistingToSpaceDialog,
.mx_AddExistingToSpaceDialog .mx_Dialog_title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar_image {
border-radius: 8px;
margin: 0;
vertical-align: unset;
}
+
.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
@@ -6616,12 +8293,14 @@ input.mx_StatusMessageContextMenu_message {
margin: auto 16px auto 5px;
vertical-align: middle;
}
+
.mx_AddExistingToSpaceDialog .mx_Dialog_title > div > h1 {
font-weight: 600;
font-size: 1.8rem;
line-height: 2.2rem;
margin: 0;
}
+
.mx_AddExistingToSpaceDialog
.mx_Dialog_title
> div
@@ -6630,9 +8309,11 @@ input.mx_StatusMessageContextMenu_message {
font-size: 1.5rem;
line-height: 2.4rem;
}
+
.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input {
border: none;
}
+
.mx_AddExistingToSpaceDialog
.mx_Dialog_title
.mx_Dropdown_input
@@ -6646,6 +8327,7 @@ input.mx_StatusMessageContextMenu_message {
font-size: 1.5rem;
line-height: 2.4rem;
}
+
.mx_AddExistingToSpaceDialog
.mx_Dialog_title
.mx_Dropdown_input
@@ -6653,6 +8335,7 @@ input.mx_StatusMessageContextMenu_message {
.mx_BaseAvatar {
display: none;
}
+
.mx_AddExistingToSpaceDialog
.mx_Dialog_title
.mx_Dropdown_input
@@ -6662,6 +8345,7 @@ input.mx_StatusMessageContextMenu_message {
padding-right: 32px;
position: relative;
}
+
.mx_AddExistingToSpaceDialog
.mx_Dialog_title
.mx_Dropdown_input
@@ -6683,15 +8367,18 @@ input.mx_StatusMessageContextMenu_message {
-webkit-mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
}
+
.mx_AddExistingToSpaceDialog .mx_AddExistingToSpace {
display: contents;
}
+
.mx_AddressPickerDialog a:hover,
.mx_AddressPickerDialog a:link,
.mx_AddressPickerDialog a:visited {
color: #0dbd8b;
text-decoration: none;
}
+
.mx_AddressPickerDialog_input,
.mx_AddressPickerDialog_input:focus {
height: 26px;
@@ -6711,9 +8398,11 @@ input.mx_StatusMessageContextMenu_message {
box-sizing: border-box;
word-wrap: nowrap;
}
+
.mx_AddressPickerDialog .mx_Dialog_content {
min-height: 50px;
}
+
.mx_AddressPickerDialog_inputContainer {
border-radius: 3px;
border: 1px solid #e7e7e7;
@@ -6723,78 +8412,97 @@ input.mx_StatusMessageContextMenu_message {
overflow-x: hidden;
overflow-y: auto;
}
+
.mx_AddressPickerDialog_error {
margin-top: 10px;
color: #ff4b55;
}
+
.mx_AddressPickerDialog_cancel {
position: absolute;
right: 11px;
top: 13px;
cursor: pointer;
}
+
.mx_AddressPickerDialog_cancel object {
pointer-events: none;
}
+
.mx_AddressPickerDialog_identityServer {
margin-top: 1em;
}
+
.mx_AnalyticsModal table {
margin: 10px 0;
}
+
.mx_BetaFeedbackDialog .mx_BetaFeedbackDialog_subheading {
color: #2e2f32;
font-size: 1.4rem;
line-height: 2rem;
margin-bottom: 24px;
}
+
.mx_BetaFeedbackDialog .mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit;
line-height: inherit;
}
+
.mx_BugReportDialog
.mx_BugReportDialog_download
.mx_AccessibleButton_kind_link {
padding-left: 0;
}
+
.mx_ChangelogDialog_content {
max-height: 300px;
overflow: auto;
}
+
.mx_ChangelogDialog_li {
padding: 0.2em;
}
+
.mx_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles {
margin-top: 24px;
}
+
.mx_ChatCreateOrReuseDialog .mx_Dialog_content {
margin-bottom: 24px;
min-height: 100px;
}
+
.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge {
display: none;
}
+
.mx_ChatCreateOrReuseDialog_profile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_ChatCreateOrReuseDialog_profile_name {
padding: 14px;
}
+
.mx_CommunityPrototypeInviteDialog.mx_Dialog_fixedWidth {
width: 360px;
}
+
.mx_CommunityPrototypeInviteDialog .mx_Dialog_content {
margin-bottom: 0;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_people {
position: relative;
margin-bottom: 4px;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_people
@@ -6806,23 +8514,27 @@ input.mx_StatusMessageContextMenu_message {
font-size: 1.2rem;
float: right;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_morePeople {
margin-top: 8px;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_person {
position: relative;
margin-top: 4px;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_person
> * {
vertical-align: middle;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_person
@@ -6832,12 +8544,14 @@ input.mx_StatusMessageContextMenu_message {
top: calc(50% - 8px);
width: 16px;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_person
.mx_CommunityPrototypeInviteDialog_personIdentifiers {
display: inline-block;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_person
@@ -6845,6 +8559,7 @@ input.mx_StatusMessageContextMenu_message {
> * {
display: block;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_person
@@ -6855,6 +8570,7 @@ input.mx_StatusMessageContextMenu_message {
color: #2e2f32;
margin-left: 7px;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_person
@@ -6864,6 +8580,7 @@ input.mx_StatusMessageContextMenu_message {
color: #61708b;
margin-left: 7px;
}
+
.mx_CommunityPrototypeInviteDialog
.mx_Dialog_content
.mx_CommunityPrototypeInviteDialog_primaryButton {
@@ -6873,21 +8590,26 @@ input.mx_StatusMessageContextMenu_message {
height: 20px;
margin-top: 24px;
}
+
.mx_ConfirmUserActionDialog .mx_Dialog_content {
min-height: 48px;
margin-bottom: 24px;
}
+
.mx_ConfirmUserActionDialog_avatar {
float: left;
margin-right: 20px;
margin-top: -2px;
}
+
.mx_ConfirmUserActionDialog_name {
font-size: 1.8rem;
}
+
.mx_ConfirmUserActionDialog_userId {
font-size: 1.3rem;
}
+
.mx_ConfirmUserActionDialog_reasonField {
font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
Helvetica, Sans-Serif, Noto Color Emoji;
@@ -6901,6 +8623,7 @@ input.mx_StatusMessageContextMenu_message {
margin-bottom: 24px;
width: 90%;
}
+
.mx_CreateCommunityPrototypeDialog .mx_Dialog_content {
display: -webkit-box;
display: -ms-flexbox;
@@ -6911,6 +8634,7 @@ input.mx_StatusMessageContextMenu_message {
flex-direction: row;
margin-bottom: 12px;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colName {
@@ -6918,6 +8642,7 @@ input.mx_StatusMessageContextMenu_message {
flex-basis: 66.66%;
padding-right: 100px;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colName
@@ -6926,6 +8651,7 @@ input.mx_StatusMessageContextMenu_message {
font-size: 1.6rem;
line-height: 2rem;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colName
@@ -6934,24 +8660,28 @@ input.mx_StatusMessageContextMenu_message {
color: #61708b;
margin-bottom: 16px;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colName
.mx_CreateCommunityPrototypeDialog_subtext:last-child {
margin-top: 16px;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colName
.mx_CreateCommunityPrototypeDialog_subtext.mx_CreateCommunityPrototypeDialog_subtext_error {
color: #ff4b55;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colName
.mx_CreateCommunityPrototypeDialog_communityId {
position: relative;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colName
@@ -6959,6 +8689,7 @@ input.mx_StatusMessageContextMenu_message {
.mx_InfoTooltip {
float: right;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colName
@@ -6968,12 +8699,14 @@ input.mx_StatusMessageContextMenu_message {
font-size: 1.6rem;
line-height: 32px;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colAvatar {
-ms-flex-preferred-size: 33.33%;
flex-basis: 33.33%;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colAvatar
@@ -6981,6 +8714,7 @@ input.mx_StatusMessageContextMenu_message {
margin-top: 12px;
margin-bottom: 20px;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colAvatar
@@ -6995,6 +8729,7 @@ input.mx_StatusMessageContextMenu_message {
height: 96px;
border-radius: 96px;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colAvatar
@@ -7002,6 +8737,7 @@ input.mx_StatusMessageContextMenu_message {
.mx_CreateCommunityPrototypeDialog_placeholderAvatar {
background-color: #368bd6;
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colAvatar
@@ -7022,6 +8758,7 @@ input.mx_StatusMessageContextMenu_message {
-webkit-mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
}
+
.mx_CreateCommunityPrototypeDialog
.mx_Dialog_content
.mx_CreateCommunityPrototypeDialog_colAvatar
@@ -7035,14 +8772,17 @@ input.mx_StatusMessageContextMenu_message {
display: block;
color: #61708b;
}
+
.mx_CreateGroupDialog_inputRow {
margin-top: 10px;
margin-bottom: 10px;
}
+
.mx_CreateGroupDialog_label {
text-align: left;
padding-bottom: 12px;
}
+
.mx_CreateGroupDialog_input {
font-size: 1.5rem;
border-radius: 3px;
@@ -7051,14 +8791,17 @@ input.mx_StatusMessageContextMenu_message {
color: #2e2f32;
background-color: #fff;
}
+
.mx_CreateGroupDialog_input_hasPrefixAndSuffix {
border-radius: 0;
}
+
.mx_CreateGroupDialog_input_group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_CreateGroupDialog_prefix,
.mx_CreateGroupDialog_suffix {
padding: 0 5px;
@@ -7067,17 +8810,21 @@ input.mx_StatusMessageContextMenu_message {
border: 1px solid #e7e7e7;
text-align: center;
}
+
.mx_CreateGroupDialog_prefix {
border-right: 0;
border-radius: 3px 0 0 3px;
}
+
.mx_CreateGroupDialog_suffix {
border-left: 0;
border-radius: 0 3px 3px 0;
}
+
.mx_CreateRoomDialog_details {
margin-top: 15px;
}
+
.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary {
outline: none;
list-style: none;
@@ -7085,10 +8832,12 @@ input.mx_StatusMessageContextMenu_message {
cursor: pointer;
color: #0dbd8b;
}
+
.mx_CreateRoomDialog_details
.mx_CreateRoomDialog_details_summary::-webkit-details-marker {
display: none;
}
+
.mx_CreateRoomDialog_details > div {
display: -webkit-box;
display: -ms-flexbox;
@@ -7098,16 +8847,20 @@ input.mx_StatusMessageContextMenu_message {
align-items: flex-start;
margin: 5px 0;
}
+
.mx_CreateRoomDialog_details > div input[type="checkbox"] {
margin-right: 10px;
}
+
.mx_CreateRoomDialog_label {
text-align: left;
padding-bottom: 12px;
}
+
.mx_CreateRoomDialog_input_container {
padding-right: 20px;
}
+
.mx_CreateRoomDialog_input {
font-size: 1.5rem;
border-radius: 3px;
@@ -7117,30 +8870,37 @@ input.mx_StatusMessageContextMenu_message {
background-color: #fff;
width: 100%;
}
+
.mx_CreateRoomDialog_aliasContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- margin: 10px 0;
+ margin: 24px 0 10px;
}
+
.mx_CreateRoomDialog_aliasContainer .mx_RoomAliasField {
margin: 0;
}
+
.mx_CreateRoomDialog.mx_Dialog_fixedWidth {
width: 450px;
}
+
.mx_CreateRoomDialog .mx_Dialog_content {
margin-bottom: 40px;
}
+
.mx_CreateRoomDialog .mx_Field_input label,
.mx_CreateRoomDialog p {
color: #61708b;
}
+
.mx_CreateRoomDialog .mx_SettingsFlag {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_CreateRoomDialog .mx_SettingsFlag_label {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
@@ -7148,69 +8908,145 @@ input.mx_StatusMessageContextMenu_message {
min-width: 0;
font-weight: 600;
}
+
.mx_CreateRoomDialog .mx_ToggleSwitch {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin-left: 30px;
}
-.mx_CreateRoomDialog .mx_CreateRoomDialog_topic {
- margin-bottom: 36px;
-}
+
.mx_CreateRoomDialog .mx_Dialog_content > .mx_SettingsFlag {
margin-top: 24px;
}
+
.mx_CreateRoomDialog p {
margin: 0 85px 0 0;
font-size: 1.2rem;
}
+
+.mx_CreateRoomDialog .mx_Dropdown {
+ margin-bottom: 8px;
+ font-weight: 400;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
+ font-size: 1.4rem;
+ color: #2e2f32;
+}
+
+.mx_CreateRoomDialog .mx_Dropdown .mx_Dropdown_input {
+ border: 1px solid #e7e7e7;
+}
+
+.mx_CreateRoomDialog .mx_Dropdown .mx_Dropdown_option {
+ font-size: 1.4rem;
+ line-height: 3.2rem;
+ height: 32px;
+ min-height: 32px;
+}
+
+.mx_CreateRoomDialog .mx_Dropdown .mx_Dropdown_option > div {
+ padding-left: 30px;
+ position: relative;
+}
+
+.mx_CreateRoomDialog .mx_Dropdown .mx_Dropdown_option > div:before {
+ content: "";
+ position: absolute;
+ height: 16px;
+ width: 16px;
+ left: 6px;
+ top: 8px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ background-color: #737d8c;
+}
+
+.mx_CreateRoomDialog .mx_Dropdown .mx_CreateRoomDialog_dropdown_invite:before {
+ -webkit-mask-image: url(../../img/element-icons/lock.1f264bd.svg);
+ mask-image: url(../../img/element-icons/lock.1f264bd.svg);
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+
+.mx_CreateRoomDialog .mx_Dropdown .mx_CreateRoomDialog_dropdown_public:before {
+ -webkit-mask-image: url(../../img/globe.8201f08.svg);
+ mask-image: url(../../img/globe.8201f08.svg);
+ -webkit-mask-size: 12px;
+ mask-size: 12px;
+}
+
+.mx_CreateRoomDialog
+ .mx_Dropdown
+ .mx_CreateRoomDialog_dropdown_restricted:before {
+ -webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
+ mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+
.mx_DeactivateAccountDialog .mx_Dialog_content {
margin-bottom: 30px;
}
+
.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section {
margin-top: 60px;
}
+
.mx_DeactivateAccountDialog
.mx_DeactivateAccountDialog_input_section
.mx_Field {
width: 300px;
}
+
.mx_DevTools_content {
margin: 10px 0;
}
+
.mx_DevTools_ServersInRoomList_button {
cursor: default !important;
}
+
.mx_DevTools_RoomStateExplorer_query {
margin-bottom: 10px;
}
+
.mx_DevTools_RoomStateExplorer_button,
.mx_DevTools_ServersInRoomList_button {
margin-bottom: 10px;
width: 100%;
}
+
.mx_DevTools_label_left {
float: left;
}
+
.mx_DevTools_label_right {
float: right;
}
+
.mx_DevTools_label_bottom {
clear: both;
border-bottom: 1px solid #e5e5e5;
}
+
.mx_DevTools_inputRow {
display: table-row;
}
+
.mx_DevTools_inputLabelCell {
display: table-cell;
font-weight: 700;
padding-right: 24px;
}
+
.mx_DevTools_inputCell {
display: table-cell;
width: 240px;
}
+
.mx_DevTools_inputCell input {
display: inline-block;
border: 0;
@@ -7222,12 +9058,14 @@ input.mx_StatusMessageContextMenu_message {
Helvetica, Sans-Serif, Noto Color Emoji;
font-size: 1.6rem;
}
+
.mx_DevTools_textarea {
font-size: 1.2rem;
max-width: 684px;
min-height: 250px;
padding: 10px;
}
+
.mx_DevTools_eventTypeStateKeyGroup {
display: -webkit-box;
display: -ms-flexbox;
@@ -7235,12 +9073,15 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
+
.mx_DevTools_content .mx_Field_input:first-of-type {
margin-right: 42px;
}
+
.mx_DevTools_tgl {
display: none;
}
+
.mx_DevTools_tgl,
.mx_DevTools_tgl *,
.mx_DevTools_tgl + .mx_DevTools_tgl-btn,
@@ -7251,6 +9092,7 @@ input.mx_StatusMessageContextMenu_message {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_DevTools_tgl + .mx_DevTools_tgl-btn::-moz-selection,
.mx_DevTools_tgl::-moz-selection,
.mx_DevTools_tgl ::-moz-selection,
@@ -7260,6 +9102,7 @@ input.mx_StatusMessageContextMenu_message {
.mx_DevTools_tgl :before::-moz-selection {
background: none;
}
+
.mx_DevTools_tgl + .mx_DevTools_tgl-btn::selection,
.mx_DevTools_tgl::selection,
.mx_DevTools_tgl ::selection,
@@ -7269,6 +9112,7 @@ input.mx_StatusMessageContextMenu_message {
.mx_DevTools_tgl :before::selection {
background: none;
}
+
.mx_DevTools_tgl + .mx_DevTools_tgl-btn {
outline: 0;
display: block;
@@ -7281,6 +9125,7 @@ input.mx_StatusMessageContextMenu_message {
-ms-user-select: none;
user-select: none;
}
+
.mx_DevTools_tgl + .mx_DevTools_tgl-btn:after,
.mx_DevTools_tgl + .mx_DevTools_tgl-btn:before {
position: relative;
@@ -7289,15 +9134,19 @@ input.mx_StatusMessageContextMenu_message {
width: 50%;
height: 100%;
}
+
.mx_DevTools_tgl + .mx_DevTools_tgl-btn:after {
left: 0;
}
+
.mx_DevTools_tgl + .mx_DevTools_tgl-btn:before {
display: none;
}
+
.mx_DevTools_tgl:checked + .mx_DevTools_tgl-btn:after {
left: 50%;
}
+
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn {
padding: 2px;
-webkit-transition: all 0.2s ease;
@@ -7306,6 +9155,7 @@ input.mx_StatusMessageContextMenu_message {
-webkit-perspective: 100px;
perspective: 100px;
}
+
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:after,
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:before {
display: inline-block;
@@ -7323,73 +9173,89 @@ input.mx_StatusMessageContextMenu_message {
backface-visibility: hidden;
border-radius: 4px;
}
+
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:after {
content: attr(data-tg-on);
background: #02c66f;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
+
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:before {
background: #ff3a19;
content: attr(data-tg-off);
}
+
.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:active:before {
-webkit-transform: rotateY(-20deg);
transform: rotateY(-20deg);
}
+
.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:before {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
+
.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:after {
-webkit-transform: rotateY(0);
transform: rotateY(0);
left: 0;
background: #7fc6a6;
}
+
.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:active:after {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
+
.mx_DevTools_VerificationRequest {
border: 1px solid #ccc;
border-radius: 3px;
padding: 1px 5px;
margin-bottom: 6px;
- font-family: Inconsolata, Twemoji, Apple Color Emoji, Segoe UI Emoji, Courier,
- monospace, Noto Color Emoji;
+ font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
+ monospace;
}
+
.mx_DevTools_VerificationRequest dl {
display: grid;
grid-template-columns: -webkit-max-content auto;
grid-template-columns: max-content auto;
margin: 0;
}
+
.mx_DevTools_VerificationRequest dd {
grid-column-start: 2;
}
+
.mx_DevTools_VerificationRequest dd:empty {
color: #666;
}
+
.mx_DevTools_VerificationRequest dd:empty:after {
content: "(empty)";
}
+
.mx_DevTools_VerificationRequest dt {
font-weight: 700;
grid-column-start: 1;
}
+
.mx_DevTools_VerificationRequest dt:after {
content: ":";
}
+
.mx_DevTools_SettingsExplorer table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
+
.mx_DevTools_SettingsExplorer table th {
border-bottom: 1px solid #0dbd8b;
text-align: left;
}
+
.mx_DevTools_SettingsExplorer table td,
.mx_DevTools_SettingsExplorer table th {
width: 360px;
@@ -7397,35 +9263,44 @@ input.mx_StatusMessageContextMenu_message {
overflow: hidden;
white-space: nowrap;
}
+
.mx_DevTools_SettingsExplorer table td + td,
.mx_DevTools_SettingsExplorer table th + th {
width: auto;
}
+
.mx_DevTools_SettingsExplorer table tr:hover {
background-color: rgba(13, 189, 139, 0.5);
}
+
.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_mutable {
background-color: #0dbd8b;
}
+
.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_immutable {
background-color: #ff4b55;
}
+
.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_edit {
float: right;
margin-right: 16px;
}
+
.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_warning {
border: 2px solid #ff4b55;
border-radius: 4px;
padding: 4px;
margin-bottom: 8px;
}
+
.mx_EditCommunityPrototypeDialog.mx_Dialog_fixedWidth {
width: 360px;
}
+
.mx_EditCommunityPrototypeDialog .mx_Dialog_content {
margin-bottom: 12px;
}
+
.mx_EditCommunityPrototypeDialog
.mx_Dialog_content
.mx_AccessibleButton.mx_AccessibleButton_kind_primary {
@@ -7434,6 +9309,7 @@ input.mx_StatusMessageContextMenu_message {
font-size: 1.6rem;
line-height: 32px;
}
+
.mx_EditCommunityPrototypeDialog
.mx_Dialog_content
.mx_EditCommunityPrototypeDialog_rowAvatar {
@@ -7448,12 +9324,14 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: center;
align-items: center;
}
+
.mx_EditCommunityPrototypeDialog
.mx_Dialog_content
.mx_EditCommunityPrototypeDialog_avatarContainer {
margin-top: 20px;
margin-bottom: 20px;
}
+
.mx_EditCommunityPrototypeDialog
.mx_Dialog_content
.mx_EditCommunityPrototypeDialog_avatarContainer
@@ -7466,12 +9344,14 @@ input.mx_StatusMessageContextMenu_message {
height: 96px;
border-radius: 96px;
}
+
.mx_EditCommunityPrototypeDialog
.mx_Dialog_content
.mx_EditCommunityPrototypeDialog_avatarContainer
.mx_EditCommunityPrototypeDialog_placeholderAvatar {
background-color: #368bd6;
}
+
.mx_EditCommunityPrototypeDialog
.mx_Dialog_content
.mx_EditCommunityPrototypeDialog_avatarContainer
@@ -7491,11 +9371,13 @@ input.mx_StatusMessageContextMenu_message {
-webkit-mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
}
+
.mx_EditCommunityPrototypeDialog
.mx_Dialog_content
.mx_EditCommunityPrototypeDialog_tip {
margin-left: 20px;
}
+
.mx_EditCommunityPrototypeDialog
.mx_Dialog_content
.mx_EditCommunityPrototypeDialog_tip
@@ -7507,32 +9389,194 @@ input.mx_StatusMessageContextMenu_message {
display: block;
color: #61708b;
}
+
+.mx_ExportDialog .mx_ExportDialog_subheading {
+ font-size: 1.6rem;
+ display: block;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
+ font-weight: 600;
+ color: #2e2f32;
+ margin-top: 18px;
+ margin-bottom: 12px;
+}
+
+.mx_ExportDialog.mx_ExportDialog_Exporting .mx_ExportDialog_options {
+ pointer-events: none;
+}
+
+.mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_select:before {
+ display: none;
+}
+
+.mx_ExportDialog.mx_ExportDialog_Exporting
+ .mx_RadioButton
+ input[type="radio"]:checked
+ + div
+ > div {
+ background: grey;
+}
+
+.mx_ExportDialog.mx_ExportDialog_Exporting
+ .mx_RadioButton
+ input[type="radio"]:checked
+ + div {
+ border-color: unset;
+}
+
+.mx_ExportDialog.mx_ExportDialog_Exporting
+ .mx_Field_valid.mx_Field:focus-within
+ label,
+.mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_valid.mx_Field label {
+ color: unset;
+}
+
+.mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_valid.mx_Field,
+.mx_ExportDialog.mx_ExportDialog_Exporting
+ .mx_Field_valid.mx_Field:focus-within {
+ border-color: #e7e7e7;
+}
+
+.mx_ExportDialog.mx_ExportDialog_Exporting
+ .mx_Checkbox
+ input[type="checkbox"]:checked
+ + label
+ > .mx_Checkbox_background {
+ background: grey;
+ border-color: grey;
+}
+
+.mx_ExportDialog .mx_ExportDialog_progress .mx_Dialog_buttons {
+ margin-top: unset;
+ margin-left: 18px;
+}
+
+.mx_ExportDialog .mx_ExportDialog_progress .mx_ExportDialog_spinner {
+ -webkit-animation: mx_rotate 2s linear infinite;
+ animation: mx_rotate 2s linear infinite;
+ z-index: 2;
+ position: relative;
+ margin-right: 10px;
+ width: 24px;
+ height: 24px;
+}
+
+.mx_ExportDialog
+ .mx_ExportDialog_progress
+ .mx_ExportDialog_spinner
+ .mx_ExportDialog_spinner_path {
+ stroke: #0dbd8b;
+ stroke-linecap: round;
+ -webkit-animation: mx_dash 1.5s ease-in-out infinite;
+ animation: mx_dash 1.5s ease-in-out infinite;
+}
+
+.mx_ExportDialog .mx_ExportDialog_progress {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.mx_ExportDialog .mx_RadioButton > .mx_RadioButton_content {
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+
+.mx_ExportDialog .mx_Field {
+ width: 256px;
+}
+
+.mx_ExportDialog .mx_Field_postfix {
+ padding: 9px 10px;
+}
+
+@-webkit-keyframes mx_rotate {
+ to {
+ -webkit-transform: rotate(1turn);
+ transform: rotate(1turn);
+ }
+}
+
+@keyframes mx_rotate {
+ to {
+ -webkit-transform: rotate(1turn);
+ transform: rotate(1turn);
+ }
+}
+
+@-webkit-keyframes mx_dash {
+ 0% {
+ stroke-dasharray: 1, 150;
+ stroke-dashoffset: 0;
+ }
+ 50% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -35;
+ }
+ to {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -124;
+ }
+}
+
+@keyframes mx_dash {
+ 0% {
+ stroke-dasharray: 1, 150;
+ stroke-dashoffset: 0;
+ }
+ 50% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -35;
+ }
+ to {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -124;
+ }
+}
+
.mx_FeedbackDialog hr {
margin: 24px 0;
border-color: #e7e7e7;
}
+
.mx_FeedbackDialog .mx_Dialog_content {
margin-bottom: 24px;
}
+
.mx_FeedbackDialog .mx_Dialog_content > h2 {
margin-bottom: 32px;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_section {
position: relative;
padding-left: 52px;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_section > p {
color: #8d99a5;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link,
.mx_FeedbackDialog .mx_FeedbackDialog_section a {
color: #0dbd8b;
text-decoration: underline;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_section:after,
.mx_FeedbackDialog .mx_FeedbackDialog_section:before {
content: "";
@@ -7542,10 +9586,12 @@ input.mx_StatusMessageContextMenu_message {
left: 0;
top: 0;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_section:before {
background-color: #c1c6cd;
border-radius: 20px;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_section:after {
background: #fff;
-webkit-mask-position: center;
@@ -7555,10 +9601,12 @@ input.mx_StatusMessageContextMenu_message {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_reportBug:after {
-webkit-mask-image: url(../../img/feather-customised/bug.3dc7afa.svg);
mask-image: url(../../img/feather-customised/bug.3dc7afa.svg);
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
@@ -7573,6 +9621,7 @@ input.mx_StatusMessageContextMenu_message {
vertical-align: top;
cursor: pointer;
}
+
.mx_FeedbackDialog
.mx_FeedbackDialog_rateApp
.mx_RadioButton
@@ -7580,6 +9629,7 @@ input.mx_StatusMessageContextMenu_message {
+ div {
display: none;
}
+
.mx_FeedbackDialog
.mx_FeedbackDialog_rateApp
.mx_RadioButton
@@ -7592,32 +9642,254 @@ input.mx_StatusMessageContextMenu_message {
border-radius: 20px;
margin: 5px;
}
+
.mx_FeedbackDialog
.mx_FeedbackDialog_rateApp
.mx_RadioButton
.mx_RadioButton_spacer {
display: none;
}
+
.mx_FeedbackDialog
.mx_FeedbackDialog_rateApp
.mx_RadioButton
+ .mx_RadioButton {
margin-left: 16px;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton_checked {
font-size: 24px;
border-color: #0dbd8b;
}
+
.mx_FeedbackDialog .mx_FeedbackDialog_rateApp:after {
-webkit-mask-image: url(../../img/element-icons/feedback.a91241e.svg);
mask-image: url(../../img/element-icons/feedback.a91241e.svg);
}
+
+.mx_ForwardDialog {
+ width: 520px;
+ color: #2e2f32;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ min-height: 0;
+ height: 80vh;
+}
+
+.mx_ForwardDialog > h3 {
+ margin: 0 0 6px;
+ color: #737d8c;
+ font-size: 1.2rem;
+ font-weight: 600;
+ line-height: 1.5rem;
+}
+
+.mx_ForwardDialog > .mx_ForwardDialog_preview {
+ max-height: 30%;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ overflow-y: auto;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardDialog_preview
+ .mx_EventTile[data-layout="bubble"] {
+ margin-top: 20px;
+}
+
+.mx_ForwardDialog > .mx_ForwardDialog_preview div {
+ pointer-events: none;
+}
+
+.mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile_e2eIcon_unencrypted,
+.mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile_msgOption,
+.mx_ForwardDialog > .mx_ForwardDialog_preview .mx_MFileBody_download {
+ display: none;
+}
+
+.mx_ForwardDialog > hr {
+ width: 100%;
+ border: none;
+ border-top: 1px solid #e7e7e7;
+ margin: 12px 0;
+}
+
+.mx_ForwardDialog > .mx_ForwardList {
+ display: contents;
+}
+
+.mx_ForwardDialog > .mx_ForwardList .mx_SearchBox {
+ margin: 0 0 15px;
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+}
+
+.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_content {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+
+.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_noResults {
+ display: block;
+ margin-top: 24px;
+}
+
+.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results:not(:first-child) {
+ margin-top: 24px;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ height: 32px;
+ padding: 6px;
+ border-radius: 8px;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry:hover {
+ background-color: hsla(0, 0%, 91%, 0.77);
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_roomButton {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-right: 12px;
+ min-width: 0;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_roomButton
+ .mx_DecoratedRoomAvatar {
+ margin-right: 12px;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_roomButton
+ .mx_ForwardList_entry_name {
+ font-size: 1.5rem;
+ line-height: 30px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ margin-right: 12px;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_sendButton {
+ position: relative;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_sendButton:not(.mx_ForwardList_canSend)
+ .mx_ForwardList_sendLabel {
+ visibility: hidden;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_sendButton
+ .mx_ForwardList_sendIcon,
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_sendButton
+ .mx_NotificationBadge {
+ position: absolute;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_sendButton
+ .mx_NotificationBadge {
+ background-color: #fff;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_sendButton.mx_ForwardList_sending
+ .mx_ForwardList_sendIcon {
+ background-color: #0dbd8b;
+ -webkit-mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
+ mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 14px;
+ mask-size: 14px;
+ width: 14px;
+ height: 14px;
+}
+
+.mx_ForwardDialog
+ > .mx_ForwardList
+ .mx_ForwardList_results
+ .mx_ForwardList_entry
+ .mx_ForwardList_sendButton.mx_ForwardList_sent
+ .mx_ForwardList_sendIcon {
+ background-color: #0dbd8b;
+ -webkit-mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
+ mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 14px;
+ mask-size: 14px;
+ width: 14px;
+ height: 14px;
+}
+
.mx_GroupAddressPicker_checkboxContainer {
margin-top: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_HostSignupDialog {
width: 90vw;
max-width: 580px;
@@ -7625,19 +9897,23 @@ input.mx_StatusMessageContextMenu_message {
max-height: 600px;
background-color: #fff;
}
+
.mx_HostSignupDialog .mx_HostSignupDialog_info {
text-align: center;
}
+
.mx_HostSignupDialog
.mx_HostSignupDialog_info
.mx_HostSignupDialog_content_top {
margin-bottom: 24px;
}
+
.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_paragraphs {
text-align: left;
padding-left: 25%;
padding-right: 25%;
}
+
.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons {
margin-bottom: 24px;
display: -webkit-box;
@@ -7647,6 +9923,7 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_HostSignupDialog
.mx_HostSignupDialog_info
.mx_HostSignupDialog_buttons
@@ -7654,6 +9931,7 @@ input.mx_StatusMessageContextMenu_message {
padding: 12px;
margin: 0 16px;
}
+
.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer {
display: -webkit-box;
display: -ms-flexbox;
@@ -7665,9 +9943,11 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: baseline;
align-items: baseline;
}
+
.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer img {
padding-right: 5px;
}
+
.mx_HostSignupDialog iframe {
width: 100%;
height: 100%;
@@ -7675,12 +9955,15 @@ input.mx_StatusMessageContextMenu_message {
background-color: #fff;
min-height: 540px;
}
+
.mx_HostSignupDialog_text_dark {
color: #2e2f32;
}
+
.mx_HostSignupDialog_text_light {
color: #737d8c;
}
+
.mx_HostSignup_maximize_button {
-webkit-mask: url(../../img/feather-customised/maximise.dc32127.svg);
mask: url(../../img/feather-customised/maximise.dc32127.svg);
@@ -7692,6 +9975,7 @@ input.mx_StatusMessageContextMenu_message {
mask-size: cover;
right: 10px;
}
+
.mx_HostSignup_maximize_button,
.mx_HostSignup_minimize_button {
width: 14px;
@@ -7701,6 +9985,7 @@ input.mx_StatusMessageContextMenu_message {
position: absolute;
top: 10px;
}
+
.mx_HostSignup_minimize_button {
-webkit-mask: url(../../img/feather-customised/minimise.aec9142.svg);
mask: url(../../img/feather-customised/minimise.aec9142.svg);
@@ -7712,6 +9997,7 @@ input.mx_StatusMessageContextMenu_message {
mask-size: cover;
right: 25px;
}
+
.mx_HostSignup_persisted {
width: 90vw;
max-width: 580px;
@@ -7722,6 +10008,7 @@ input.mx_StatusMessageContextMenu_message {
position: fixed;
display: none;
}
+
.mx_HostSignupDialog_minimized {
position: fixed;
bottom: 80px;
@@ -7730,27 +10017,37 @@ input.mx_StatusMessageContextMenu_message {
height: 217px;
overflow: hidden;
}
+
.mx_HostSignupDialog_minimized.mx_Dialog {
padding: 12px;
}
+
.mx_HostSignupDialog_minimized .mx_Dialog_title {
text-align: left !important;
padding-left: 20px;
font-size: 1.5rem;
}
+
.mx_HostSignupDialog_minimized iframe {
width: 100%;
height: 100%;
border: none;
background-color: #fff;
}
+
.mx_IncomingSasDialog_opponentProfile_image {
position: relative;
}
+
.mx_IncomingSasDialog_opponentProfile h2 {
display: inline-block;
margin-left: 10px;
}
+
+.mx_InviteDialog_transferWrapper .mx_Dialog {
+ padding-bottom: 16px;
+}
+
.mx_InviteDialog_addressBar {
display: -webkit-box;
display: -ms-flexbox;
@@ -7759,7 +10056,9 @@ input.mx_StatusMessageContextMenu_message {
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
+ margin: 8px 45px 0 0;
}
+
.mx_InviteDialog_addressBar .mx_InviteDialog_editor {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -7777,6 +10076,7 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
+
.mx_InviteDialog_addressBar .mx_InviteDialog_editor .mx_InviteDialog_userTile {
margin: 6px 6px 0 0;
display: inline-block;
@@ -7784,6 +10084,7 @@ input.mx_StatusMessageContextMenu_message {
min-width: -moz-max-content;
min-width: max-content;
}
+
.mx_InviteDialog_addressBar .mx_InviteDialog_editor > input[type="text"] {
margin: 6px 0 !important;
height: 24px;
@@ -7801,12 +10102,14 @@ input.mx_StatusMessageContextMenu_message {
flex: 1 !important;
color: #2e2f32 !important;
}
+
.mx_InviteDialog_addressBar .mx_InviteDialog_goButton {
min-width: 48px;
margin-left: 10px;
height: 25px;
line-height: 2.5rem;
}
+
.mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner .mx_Spinner {
width: 20px;
height: 20px;
@@ -7814,43 +10117,124 @@ input.mx_StatusMessageContextMenu_message {
display: inline-block;
vertical-align: middle;
}
+
.mx_InviteDialog_section {
- padding-bottom: 10px;
+ padding-bottom: 4px;
}
+
.mx_InviteDialog_section h3 {
font-size: 1.2rem;
color: #61708b;
font-weight: 700;
text-transform: uppercase;
}
+
+.mx_InviteDialog_section > p {
+ margin: 0;
+}
+
+.mx_InviteDialog_section > span {
+ color: #2e2f32;
+}
+
.mx_InviteDialog_section .mx_InviteDialog_subname {
margin-bottom: 10px;
margin-top: -10px;
font-size: 1.2rem;
color: #61708b;
}
+
+.mx_InviteDialog_section_hidden_suggestions_disclaimer {
+ padding: 8px 0 16px;
+ font-size: 1.4rem;
+}
+
+.mx_InviteDialog_section_hidden_suggestions_disclaimer > span {
+ color: #2e2f32;
+ font-weight: 600;
+}
+
+.mx_InviteDialog_section_hidden_suggestions_disclaimer > p {
+ margin: 0;
+}
+
+.mx_InviteDialog_footer {
+ border-top: 1px solid #e7e7e7;
+}
+
+.mx_InviteDialog_footer > h3 {
+ margin: 12px 0;
+ font-size: 1.2rem;
+ color: #61708b;
+ font-weight: 700;
+ text-transform: uppercase;
+}
+
+.mx_InviteDialog_footer .mx_InviteDialog_footer_link {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ border-radius: 4px;
+ border: 1px solid #747474;
+ padding: 8px;
+}
+
+.mx_InviteDialog_footer .mx_InviteDialog_footer_link > a {
+ text-decoration: none;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.mx_InviteDialog_footer .mx_InviteDialog_footer_link_copy {
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ cursor: pointer;
+ margin-left: 20px;
+ display: inherit;
+}
+
+.mx_InviteDialog_footer .mx_InviteDialog_footer_link_copy > div {
+ -webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
+ mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
+ background-color: #2e2f32;
+ margin-left: 5px;
+ width: 20px;
+ height: 20px;
+ background-repeat: no-repeat;
+}
+
.mx_InviteDialog_roomTile {
cursor: pointer;
padding: 5px 10px;
}
+
.mx_InviteDialog_roomTile:hover {
background-color: #f3f8fd;
border-radius: 4px;
}
+
.mx_InviteDialog_roomTile * {
vertical-align: middle;
}
+
.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack {
display: inline-block;
position: relative;
width: 36px;
height: 36px;
}
+
.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack > * {
position: absolute;
top: 0;
left: 0;
}
+
.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected {
width: 36px;
height: 36px;
@@ -7859,6 +10243,7 @@ input.mx_StatusMessageContextMenu_message {
display: inline-block;
position: relative;
}
+
.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected:before {
content: "";
width: 24px;
@@ -7876,20 +10261,32 @@ input.mx_StatusMessageContextMenu_message {
left: 6px;
background-color: #fff;
}
+
.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_nameStack {
display: inline-block;
+ overflow: hidden;
}
+
.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_name {
font-weight: 600;
font-size: 1.4rem;
color: #2e2f32;
margin-left: 7px;
}
+
.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_userId {
font-size: 1.2rem;
color: #61708b;
margin-left: 7px;
}
+
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_name,
+.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_userId {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_time {
text-align: right;
font-size: 1.2rem;
@@ -7897,12 +10294,15 @@ input.mx_StatusMessageContextMenu_message {
float: right;
line-height: 3.6rem;
}
+
.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_highlight {
font-weight: 900;
}
+
.mx_InviteDialog_userTile {
margin-right: 8px;
}
+
.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill {
background-color: #368bd6;
border-radius: 12px;
@@ -7913,6 +10313,7 @@ input.mx_StatusMessageContextMenu_message {
padding-right: 8px;
color: #fff;
}
+
.mx_InviteDialog_userTile
.mx_InviteDialog_userTile_pill
.mx_InviteDialog_userTile_avatar {
@@ -7921,6 +10322,7 @@ input.mx_StatusMessageContextMenu_message {
left: -5px;
top: 2px;
}
+
.mx_InviteDialog_userTile
.mx_InviteDialog_userTile_pill
.mx_InviteDialog_userTile_name,
@@ -7929,32 +10331,200 @@ input.mx_StatusMessageContextMenu_message {
img.mx_InviteDialog_userTile_avatar {
vertical-align: top;
}
+
.mx_InviteDialog_userTile
.mx_InviteDialog_userTile_pill
.mx_InviteDialog_userTile_threepidAvatar {
background-color: #fff;
}
+
.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove {
display: inline-block;
margin-left: 4px;
}
-.mx_InviteDialog {
- height: 590px;
+
+.mx_InviteDialog_other {
+ height: 600px;
padding-left: 20px;
}
+
+.mx_InviteDialog_other .mx_InviteDialog_userSections {
+ height: calc(100% - 115px);
+}
+
+.mx_InviteDialog_content {
+ height: calc(100% - 36px);
+ overflow: hidden;
+}
+
+.mx_InviteDialog_transfer {
+ width: 496px;
+ height: 466px;
+}
+
+.mx_InviteDialog_transfer,
+.mx_InviteDialog_transfer .mx_InviteDialog_content {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.mx_InviteDialog_transfer .mx_InviteDialog_content .mx_TabbedView {
+ height: calc(100% - 60px);
+}
+
+.mx_InviteDialog_transfer .mx_InviteDialog_content {
+ overflow: visible;
+}
+
+.mx_InviteDialog_transfer .mx_InviteDialog_addressBar {
+ margin-top: 8px;
+}
+
+.mx_InviteDialog_transfer input[type="checkbox"] {
+ margin-right: 8px;
+}
+
.mx_InviteDialog_userSections {
- margin-top: 10px;
+ margin-top: 4px;
overflow-y: auto;
- padding-right: 45px;
- height: 455px;
+ padding: 0 45px 4px 0;
}
-.mx_InviteDialog_addressBar,
+
+.mx_InviteDialog_hasFooter .mx_InviteDialog_userSections {
+ height: calc(100% - 175px);
+}
+
.mx_InviteDialog_helpText {
- margin-right: 45px;
+ margin: 0;
}
+
.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link {
padding: 0;
}
+
+.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField {
+ border-top: 0;
+ border-left: 0;
+ border-right: 0;
+ border-radius: 0;
+ margin-top: 0;
+ border-color: #c1c6cd;
+}
+
+.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField input {
+ font-size: 18px;
+ font-weight: 600;
+ padding-top: 0;
+}
+
+.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField:focus-within {
+ border-color: #0dbd8b;
+}
+
+.mx_InviteDialog_dialPadField .mx_Field_postfix {
+ border-left: none;
+}
+
+.mx_InviteDialog_dialPad {
+ width: 224px;
+ margin-top: 16px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.mx_InviteDialog_dialPad .mx_DialPad {
+ grid-row-gap: 16px;
+ row-gap: 16px;
+ grid-column-gap: 48px;
+ -webkit-column-gap: 48px;
+ -moz-column-gap: 48px;
+ column-gap: 48px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.mx_InviteDialog_transferConsultConnect {
+ padding-top: 16px;
+ position: relative;
+ width: 496px;
+ left: -24px;
+ padding-left: 24px;
+ padding-right: 24px;
+ border-top: 1px solid #e3e8f0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.mx_InviteDialog_transferConsultConnect_pushRight {
+ margin-left: auto;
+}
+
+.mx_InviteDialog_userDirectoryIcon:before {
+ -webkit-mask-image: url(../../img/voip/tab-userdirectory.cc3ed9a.svg);
+ mask-image: url(../../img/voip/tab-userdirectory.cc3ed9a.svg);
+}
+
+.mx_InviteDialog_dialPadIcon:before {
+ -webkit-mask-image: url(../../img/voip/tab-dialpad.a4a190e.svg);
+ mask-image: url(../../img/voip/tab-dialpad.a4a190e.svg);
+}
+
+.mx_InviteDialog_multiInviterError > h4 {
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #737d8c;
+ font-weight: 400;
+}
+
+.mx_InviteDialog_multiInviterError
+ > div
+ .mx_InviteDialog_multiInviterError_entry {
+ margin-bottom: 24px;
+}
+
+.mx_InviteDialog_multiInviterError
+ > div
+ .mx_InviteDialog_multiInviterError_entry
+ .mx_InviteDialog_multiInviterError_entry_userProfile
+ .mx_InviteDialog_multiInviterError_entry_name {
+ margin-left: 6px;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ font-weight: 600;
+ color: #2e2f32;
+}
+
+.mx_InviteDialog_multiInviterError
+ > div
+ .mx_InviteDialog_multiInviterError_entry
+ .mx_InviteDialog_multiInviterError_entry_userProfile
+ .mx_InviteDialog_multiInviterError_entry_userId {
+ margin-left: 6px;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #8d99a5;
+}
+
+.mx_InviteDialog_multiInviterError
+ > div
+ .mx_InviteDialog_multiInviterError_entry
+ .mx_InviteDialog_multiInviterError_entry_error {
+ margin-left: 32px;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #ff4b55;
+}
+
.mx_KeyboardShortcutsDialog {
display: -webkit-box;
display: -ms-flexbox;
@@ -7968,20 +10538,25 @@ input.mx_StatusMessageContextMenu_message {
margin-bottom: -50px;
max-height: 1100px;
}
+
.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category {
width: 33.3333%;
margin: 0 0 40px;
}
+
.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category > div {
padding-left: 5px;
}
+
.mx_KeyboardShortcutsDialog h3 {
margin: 0 0 10px;
}
+
.mx_KeyboardShortcutsDialog h5 {
margin: 15px 0 5px;
font-weight: 400;
}
+
.mx_KeyboardShortcutsDialog kbd {
padding: 5px;
border-radius: 4px;
@@ -7996,15 +10571,211 @@ input.mx_StatusMessageContextMenu_message {
margin-bottom: 4px;
text-transform: capitalize;
}
+
.mx_KeyboardShortcutsDialog kbd + kbd {
margin-left: 5px;
}
+
.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_inline div {
display: inline;
}
+
+.mx_ManageRestrictedJoinRuleDialog,
+.mx_ManageRestrictedJoinRuleDialog_wrapper .mx_Dialog {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.mx_ManageRestrictedJoinRuleDialog {
+ width: 480px;
+ color: #2e2f32;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ min-height: 0;
+ height: 60vh;
+}
+
+.mx_ManageRestrictedJoinRuleDialog .mx_SearchBox {
+ margin: 0 0 15px;
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+}
+
+.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_content {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_noResults {
+ display: block;
+ margin-top: 24px;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section:not(:first-child) {
+ margin-top: 24px;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section
+ > h3 {
+ margin: 0;
+ color: #737d8c;
+ font-size: 1.2rem;
+ font-weight: 600;
+ line-height: 1.5rem;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section
+ .mx_ManageRestrictedJoinRuleDialog_entry {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-top: 12px;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section
+ .mx_ManageRestrictedJoinRuleDialog_entry
+ > div {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section
+ .mx_ManageRestrictedJoinRuleDialog_entry
+ .mx_RoomAvatar_isSpaceRoom
+ img,
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section
+ .mx_ManageRestrictedJoinRuleDialog_entry
+ img.mx_RoomAvatar_isSpaceRoom {
+ border-radius: 4px;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section
+ .mx_ManageRestrictedJoinRuleDialog_entry
+ .mx_ManageRestrictedJoinRuleDialog_entry_name {
+ margin: 0 8px;
+ font-size: 1.5rem;
+ line-height: 30px;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section
+ .mx_ManageRestrictedJoinRuleDialog_entry
+ .mx_ManageRestrictedJoinRuleDialog_entry_description {
+ margin-top: 8px;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #8d99a5;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section
+ .mx_ManageRestrictedJoinRuleDialog_entry
+ .mx_Checkbox {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section_spaces
+ .mx_BaseAvatar {
+ margin-right: 12px;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section_spaces
+ .mx_BaseAvatar_image {
+ border-radius: 8px;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section_info {
+ position: relative;
+ border-radius: 8px;
+ margin: 12px 0;
+ padding: 8px 8px 8px 42px;
+ background-color: #f3f8fd;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #737d8c;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_section_info:before {
+ content: "";
+ position: absolute;
+ left: 10px;
+ top: calc(50% - 8px);
+ height: 16px;
+ width: 16px;
+ background-color: #737d8c;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+
+.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_footer {
+ margin-top: 20px;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_footer
+ .mx_ManageRestrictedJoinRuleDialog_footer_buttons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ margin-left: auto;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_footer
+ .mx_ManageRestrictedJoinRuleDialog_footer_buttons
+ .mx_AccessibleButton {
+ display: inline-block;
+}
+
+.mx_ManageRestrictedJoinRuleDialog
+ .mx_ManageRestrictedJoinRuleDialog_footer
+ .mx_ManageRestrictedJoinRuleDialog_footer_buttons
+ .mx_AccessibleButton
+ + .mx_AccessibleButton {
+ margin-left: 24px;
+}
+
.mx_MessageEditHistoryDialog .mx_Dialog_header > .mx_Dialog_title {
text-align: center;
}
+
.mx_MessageEditHistoryDialog {
display: -webkit-box;
display: -ms-flexbox;
@@ -8015,66 +10786,80 @@ input.mx_StatusMessageContextMenu_message {
flex-direction: column;
max-height: 60vh;
}
+
.mx_MessageEditHistoryDialog_scrollPanel {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
+
.mx_MessageEditHistoryDialog_error {
color: #ff4b55;
text-align: center;
}
+
.mx_MessageEditHistoryDialog_edits {
list-style-type: none;
font-size: 1.4rem;
padding: 0;
color: #2e2f32;
}
+
.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_deletion,
.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_insertion {
padding: 0 2px;
}
+
.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_deletion {
color: #ff4c55;
background-color: rgba(255, 76, 85, 0.1);
text-decoration: line-through;
}
+
.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_insertion {
color: #1aa97b;
background-color: rgba(26, 169, 123, 0.1);
text-decoration: underline;
}
+
.mx_MessageEditHistoryDialog_edits .mx_EventTile_content,
.mx_MessageEditHistoryDialog_edits .mx_EventTile_line {
margin-right: 0;
}
+
.mx_MessageEditHistoryDialog_edits .mx_MessageActionBar .mx_AccessibleButton {
font-size: 1rem;
padding: 0 8px;
}
+
.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning {
margin-bottom: 24px;
}
+
.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning > img {
vertical-align: middle;
margin-right: 8px;
}
+
.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons {
float: right;
margin-top: 24px;
}
+
.mx_ModalWidgetDialog
.mx_ModalWidgetDialog_buttons
.mx_AccessibleButton
+ .mx_AccessibleButton {
margin-left: 8px;
}
+
.mx_ModalWidgetDialog iframe {
width: 100%;
height: 450px;
border: 0;
border-radius: 8px;
}
+
.mx_NewSessionReviewDialog_header {
display: -webkit-box;
display: -ms-flexbox;
@@ -8084,53 +10869,66 @@ input.mx_StatusMessageContextMenu_message {
align-items: center;
margin-top: 0;
}
+
.mx_NewSessionReviewDialog_headerIcon {
width: 24px;
height: 24px;
margin-right: 4px;
position: relative;
}
+
.mx_NewSessionReviewDialog_deviceName {
font-weight: 600;
}
+
.mx_NewSessionReviewDialog_deviceID {
font-size: 1.2rem;
color: #8d99a5;
}
+
.mx_RegistrationEmailPromptDialog {
width: 417px;
}
+
.mx_RegistrationEmailPromptDialog .mx_Dialog_content {
margin-bottom: 24px;
color: #8d99a5;
}
+
.mx_RegistrationEmailPromptDialog .mx_Dialog_primary {
width: 100%;
}
+
.mx_RoomSettingsDialog_settingsIcon:before {
-webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
mask-image: url(../../img/element-icons/settings.6b381af.svg);
}
+
.mx_RoomSettingsDialog_securityIcon:before {
-webkit-mask-image: url(../../img/element-icons/security.66f2fa6.svg);
mask-image: url(../../img/element-icons/security.66f2fa6.svg);
}
+
.mx_RoomSettingsDialog_rolesIcon:before {
-webkit-mask-image: url(../../img/element-icons/room/settings/roles.bad9a9e.svg);
mask-image: url(../../img/element-icons/room/settings/roles.bad9a9e.svg);
}
+
.mx_RoomSettingsDialog_notificationsIcon:before {
-webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
mask-image: url(../../img/element-icons/notifications.d298b39.svg);
}
+
.mx_RoomSettingsDialog_bridgesIcon:before {
-webkit-mask-image: url(../../img/feather-customised/bridge.b2ca042.svg);
mask-image: url(../../img/feather-customised/bridge.b2ca042.svg);
}
+
.mx_RoomSettingsDialog_warningIcon:before {
-webkit-mask-image: url(../../img/element-icons/room/settings/advanced.e079c15.svg);
mask-image: url(../../img/element-icons/room/settings/advanced.e079c15.svg);
}
+
.mx_RoomSettingsDialog .mx_Dialog_title {
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
@@ -8139,6 +10937,7 @@ input.mx_StatusMessageContextMenu_message {
margin: 0 auto;
padding-right: 80px;
}
+
.mx_RoomSettingsDialog
.mx_AvatarSetting_avatar
.mx_AvatarSetting_avatarPlaceholder:before {
@@ -8151,14 +10950,17 @@ input.mx_StatusMessageContextMenu_message {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_RoomSettingsDialog_BridgeList {
padding: 0;
}
+
.mx_RoomSettingsDialog_BridgeList .mx_AccessibleButton {
display: inline;
margin: 0;
padding: 0;
}
+
.mx_RoomSettingsDialog_BridgeList li {
list-style-type: none;
padding: 5px;
@@ -8166,50 +10968,61 @@ input.mx_StatusMessageContextMenu_message {
border: 1px solid transparent;
border-radius: 5px;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-icon {
float: left;
padding-right: 10px;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-icon * {
border-radius: 5px;
border: 1px solid #e3e8f0;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-icon .noProtocolIcon {
width: 48px;
height: 48px;
background: #e3e8f0;
border-radius: 5px;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon {
float: left;
margin-right: 5px;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon img {
border-radius: 5px;
border-width: 1px;
border-color: transparent;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon span {
left: auto;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-data {
display: inline-block;
width: 85%;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-data > h3 {
margin-top: 0;
margin-bottom: 0;
font-size: 16pt;
color: #2e2f32;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-data > * {
margin-top: 4px;
margin-bottom: 0;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details {
color: #2e2f32;
font-weight: 600;
}
+
.mx_RoomSettingsDialog_BridgeList
li
.column-data
@@ -8217,6 +11030,7 @@ input.mx_StatusMessageContextMenu_message {
.channel {
margin-left: 5px;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-data .metadata {
color: #61708b;
margin-bottom: 0;
@@ -8225,45 +11039,56 @@ input.mx_StatusMessageContextMenu_message {
white-space: normal;
padding: 0;
}
+
.mx_RoomSettingsDialog_BridgeList li .column-data .metadata > li {
padding: 0;
border: 0;
}
+
.mx_RoomUpgradeDialog {
padding-right: 70px;
}
+
.mx_RoomUpgradeWarningDialog {
max-width: 38vw;
width: 38vw;
}
+
.mx_RoomUpgradeWarningDialog .mx_SettingsFlag {
font-weight: 700;
}
+
.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_ToggleSwitch {
display: inline-block;
vertical-align: middle;
margin-left: 8px;
float: right;
}
+
.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_SettingsFlag_label {
display: inline-block;
vertical-align: middle;
}
+
.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content {
padding-right: 85px;
color: #2e2f32;
}
+
.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content hr {
border-color: #2e2f32;
opacity: 0.1;
border-bottom: none;
}
+
.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul {
padding: 16px;
}
+
.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul li:nth-child(n + 2) {
margin-top: 16px;
}
+
.mx_ServerOfflineDialog
.mx_ServerOfflineDialog_content
.mx_ServerOfflineDialog_content_context
@@ -8274,6 +11099,7 @@ input.mx_StatusMessageContextMenu_message {
line-height: 24px;
vertical-align: top;
}
+
.mx_ServerOfflineDialog
.mx_ServerOfflineDialog_content
.mx_ServerOfflineDialog_content_context
@@ -8281,6 +11107,7 @@ input.mx_StatusMessageContextMenu_message {
display: inline-block;
width: calc(100% - 155px);
}
+
.mx_ServerOfflineDialog
.mx_ServerOfflineDialog_content
.mx_ServerOfflineDialog_content_context
@@ -8290,6 +11117,7 @@ input.mx_StatusMessageContextMenu_message {
margin-left: 8px;
vertical-align: middle;
}
+
.mx_ServerOfflineDialog
.mx_ServerOfflineDialog_content
.mx_ServerOfflineDialog_content_context
@@ -8298,6 +11126,7 @@ input.mx_StatusMessageContextMenu_message {
position: relative;
margin-top: 8px;
}
+
.mx_ServerOfflineDialog
.mx_ServerOfflineDialog_content
.mx_ServerOfflineDialog_content_context
@@ -8306,6 +11135,7 @@ input.mx_StatusMessageContextMenu_message {
.mx_ServerOfflineDialog_content_context_txn_desc {
width: calc(100% - 100px);
}
+
.mx_ServerOfflineDialog
.mx_ServerOfflineDialog_content
.mx_ServerOfflineDialog_content_context
@@ -8315,35 +11145,43 @@ input.mx_StatusMessageContextMenu_message {
float: right;
padding: 0;
}
+
.mx_ServerPickerDialog {
width: 468px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_ServerPickerDialog .mx_Dialog_content {
margin-bottom: 0;
}
+
.mx_ServerPickerDialog .mx_Dialog_content > p {
color: #737d8c;
font-size: 1.4rem;
margin: 16px 0;
}
+
.mx_ServerPickerDialog .mx_Dialog_content > p:first-of-type {
margin-bottom: 40px;
}
+
.mx_ServerPickerDialog .mx_Dialog_content > p:last-of-type {
margin: 0 24px 24px;
}
+
.mx_ServerPickerDialog .mx_Dialog_content > h4 {
font-size: 1.5rem;
font-weight: 600;
color: #737d8c;
margin-left: 8px;
}
+
.mx_ServerPickerDialog .mx_Dialog_content > a {
color: #0dbd8b;
margin-left: 8px;
}
+
.mx_ServerPickerDialog
.mx_ServerPickerDialog_otherHomeserverRadio
input[type="radio"]
@@ -8351,23 +11189,28 @@ input.mx_StatusMessageContextMenu_message {
margin-top: auto;
margin-bottom: auto;
}
+
.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver {
border-top: none;
border-left: none;
border-right: none;
border-radius: unset;
}
+
.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > input {
padding-left: 0;
}
+
.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > label {
margin-left: 0;
}
+
.mx_ServerPickerDialog .mx_AccessibleButton_kind_primary {
width: calc(100% - 64px);
margin: 0 8px;
padding: 15px 18px;
}
+
.mx_SetEmailDialog_email_input {
border-radius: 3px;
border: 1px solid #e7e7e7;
@@ -8379,23 +11222,30 @@ input.mx_StatusMessageContextMenu_message {
max-width: 280px;
margin-bottom: 10px;
}
+
.mx_SetEmailDialog_email_input:focus {
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid #0dbd8b;
}
+
.mx_RoomSettingsDialog,
+.mx_SpaceSettingsDialog,
.mx_UserSettingsDialog {
width: 90vw;
max-width: 1000px;
height: 80vh;
}
+
.mx_RoomSettingsDialog .mx_TabbedView,
+.mx_SpaceSettingsDialog .mx_TabbedView,
.mx_UserSettingsDialog .mx_TabbedView {
top: 65px;
}
+
.mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,
+.mx_SpaceSettingsDialog .mx_TabbedView .mx_SettingsTab,
.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab {
-webkit-box-sizing: border-box;
box-sizing: border-box;
@@ -8403,18 +11253,23 @@ input.mx_StatusMessageContextMenu_message {
padding-right: 100px;
padding-bottom: 100px;
}
+
.mx_RoomSettingsDialog .mx_Dialog_title,
+.mx_SpaceSettingsDialog .mx_Dialog_title,
.mx_UserSettingsDialog .mx_Dialog_title {
margin-bottom: 24px;
}
+
.mx_ShareDialog hr {
margin-top: 25px;
margin-bottom: 25px;
border-color: #747474;
}
+
.mx_ShareDialog_content {
margin: 10px 0;
}
+
.mx_ShareDialog_matrixto {
display: -webkit-box;
display: -ms-flexbox;
@@ -8428,15 +11283,18 @@ input.mx_StatusMessageContextMenu_message {
margin-top: 30px;
padding: 10px;
}
+
.mx_ShareDialog_matrixto a {
text-decoration: none;
}
+
.mx_ShareDialog_matrixto_link {
-ms-flex-negative: 1;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
}
+
.mx_ShareDialog_matrixto_copy {
-ms-flex-negative: 0;
flex-shrink: 0;
@@ -8444,7 +11302,9 @@ input.mx_StatusMessageContextMenu_message {
margin-left: 20px;
display: inherit;
}
-.mx_ShareDialog_matrixto_copy > div {
+
+.mx_ShareDialog_matrixto_copy:after {
+ content: "";
-webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
background-color: #2e2f32;
@@ -8453,6 +11313,7 @@ input.mx_StatusMessageContextMenu_message {
height: 20px;
background-repeat: no-repeat;
}
+
.mx_ShareDialog_split {
display: -webkit-box;
display: -ms-flexbox;
@@ -8460,34 +11321,41 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
+
.mx_ShareDialog_qrcode_container {
float: left;
height: 256px;
width: 256px;
margin-right: 64px;
}
+
.mx_ShareDialog_qrcode_container + .mx_ShareDialog_social_container {
width: 299px;
}
+
.mx_ShareDialog_social_container {
display: inline-block;
}
+
.mx_ShareDialog_social_icon {
display: inline-grid;
margin-right: 10px;
margin-bottom: 10px;
}
+
.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 {
margin-bottom: 2px;
}
+
.mx_SlashCommandHelpDialog .mx_Dialog_content {
margin-top: 12px;
margin-bottom: 34px;
}
+
.mx_SpaceSettingsDialog {
- width: 480px;
color: #2e2f32;
}
+
.mx_SpaceSettingsDialog .mx_SpaceSettings_errorText {
font-weight: 600;
font-size: 1.2rem;
@@ -8495,31 +11363,91 @@ input.mx_StatusMessageContextMenu_message {
color: #ff4b55;
margin-bottom: 28px;
}
+
.mx_SpaceSettingsDialog .mx_ToggleSwitch {
display: inline-block;
vertical-align: middle;
margin-left: 16px;
}
-.mx_SpaceSettingsDialog .mx_AccessibleButton_kind_danger {
- margin-top: 28px;
+
+.mx_SpaceSettingsDialog
+ .mx_SettingsTab_section
+ .mx_SettingsTab_section_caption {
+ margin-top: 12px;
+ margin-bottom: 20px;
}
+
+.mx_SpaceSettingsDialog .mx_SettingsTab_section + .mx_SettingsTab_subheading {
+ border-top: 1px solid #e3e8f0;
+ margin-top: 0;
+ padding-top: 24px;
+}
+
+.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_RadioButton {
+ margin-top: 8px;
+ margin-bottom: 4px;
+}
+
+.mx_SpaceSettingsDialog
+ .mx_SettingsTab_section
+ .mx_RadioButton
+ .mx_RadioButton_content {
+ font-weight: 600;
+ line-height: 1.8rem;
+ color: #2e2f32;
+}
+
+.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_RadioButton + span {
+ font-size: 1.5rem;
+ line-height: 1.8rem;
+ color: #737d8c;
+ margin-left: 26px;
+}
+
+.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_SettingsTab_showAdvanced {
+ margin: 16px 0;
+ padding: 0;
+}
+
+.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_SettingsFlag {
+ margin-top: 24px;
+}
+
.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 64px;
}
+
.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton {
display: inline-block;
}
+
.mx_SpaceSettingsDialog
.mx_SpaceSettingsDialog_buttons
.mx_AccessibleButton_kind_link {
margin-left: auto;
}
+
.mx_SpaceSettingsDialog .mx_AccessibleButton_hasKind {
padding: 8px 22px;
}
+
+.mx_SpaceSettingsDialog
+ .mx_TabbedView_tabLabel
+ .mx_SpaceSettingsDialog_generalIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
+ mask-image: url(../../img/element-icons/settings.6b381af.svg);
+}
+
+.mx_SpaceSettingsDialog
+ .mx_TabbedView_tabLabel
+ .mx_SpaceSettingsDialog_visibilityIcon:before {
+ -webkit-mask-image: url(../../img/element-icons/eye.23b2229.svg);
+ mask-image: url(../../img/element-icons/eye.23b2229.svg);
+}
+
.mx_TabbedIntegrationManagerDialog .mx_Dialog {
width: 60%;
height: 70%;
@@ -8529,6 +11457,7 @@ input.mx_StatusMessageContextMenu_message {
max-height: none;
position: relative;
}
+
.mx_TabbedIntegrationManagerDialog_container {
position: absolute;
top: 0;
@@ -8536,12 +11465,14 @@ input.mx_StatusMessageContextMenu_message {
left: 0;
right: 0;
}
+
.mx_TabbedIntegrationManagerDialog_container
.mx_TabbedIntegrationManagerDialog_currentManager {
width: 100%;
height: 100%;
border-top: 1px solid #0dbd8b;
}
+
.mx_TabbedIntegrationManagerDialog_container
.mx_TabbedIntegrationManagerDialog_currentManager
iframe {
@@ -8550,6 +11481,7 @@ input.mx_StatusMessageContextMenu_message {
width: 100%;
height: 100%;
}
+
.mx_TabbedIntegrationManagerDialog_tab {
display: inline-block;
border: 1px solid #0dbd8b;
@@ -8559,28 +11491,34 @@ input.mx_StatusMessageContextMenu_message {
padding: 10px 8px;
margin-right: 5px;
}
+
.mx_TabbedIntegrationManagerDialog_currentTab {
background-color: #0dbd8b;
color: #fff;
}
+
.mx_TermsDialog_forIntegrationManager .mx_Dialog {
width: 60%;
height: 70%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_TermsDialog_termsTableHeader {
font-weight: 700;
text-align: left;
}
+
.mx_TermsDialog_termsTable {
font-size: 1.2rem;
width: 100%;
}
+
.mx_TermsDialog_service,
.mx_TermsDialog_summary {
padding-right: 10px;
}
+
.mx_TermsDialog_link {
display: inline-block;
-webkit-mask-image: url(../../img/external-link.a8d3e9b.svg);
@@ -8589,6 +11527,7 @@ input.mx_StatusMessageContextMenu_message {
width: 10px;
height: 10px;
}
+
.mx_UntrustedDeviceDialog .mx_Dialog_title {
display: -webkit-box;
display: -ms-flexbox;
@@ -8597,76 +11536,95 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: center;
align-items: center;
}
+
.mx_UntrustedDeviceDialog .mx_Dialog_title .mx_E2EIcon {
margin-left: 0;
}
+
.mx_UploadConfirmDialog_fileIcon {
margin-right: 5px;
}
+
.mx_UploadConfirmDialog_previewOuter {
text-align: center;
}
+
.mx_UploadConfirmDialog_previewInner {
display: inline-block;
text-align: left;
}
+
.mx_UploadConfirmDialog_imagePreview {
max-height: 300px;
max-width: 100%;
border-radius: 4px;
border: 1px solid #c1c1c1;
}
+
.mx_UserSettingsDialog_settingsIcon:before {
-webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
mask-image: url(../../img/element-icons/settings.6b381af.svg);
}
+
.mx_UserSettingsDialog_appearanceIcon:before {
-webkit-mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
}
+
.mx_UserSettingsDialog_voiceIcon:before {
-webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
}
+
.mx_UserSettingsDialog_bellIcon:before {
-webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
mask-image: url(../../img/element-icons/notifications.d298b39.svg);
}
+
.mx_UserSettingsDialog_preferencesIcon:before {
-webkit-mask-image: url(../../img/element-icons/settings/preference.82bfabd.svg);
mask-image: url(../../img/element-icons/settings/preference.82bfabd.svg);
}
+
.mx_UserSettingsDialog_securityIcon:before {
-webkit-mask-image: url(../../img/element-icons/security.66f2fa6.svg);
mask-image: url(../../img/element-icons/security.66f2fa6.svg);
}
+
.mx_UserSettingsDialog_helpIcon:before {
-webkit-mask-image: url(../../img/element-icons/settings/help.68b703f.svg);
mask-image: url(../../img/element-icons/settings/help.68b703f.svg);
}
+
.mx_UserSettingsDialog_labsIcon:before {
-webkit-mask-image: url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);
mask-image: url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);
}
+
.mx_UserSettingsDialog_mjolnirIcon:before {
-webkit-mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
}
+
.mx_UserSettingsDialog_flairIcon:before {
-webkit-mask-image: url(../../img/element-icons/settings/flair.4227a88.svg);
mask-image: url(../../img/element-icons/settings/flair.4227a88.svg);
}
+
.mx_WidgetCapabilitiesPromptDialog .text-muted {
font-size: 1.2rem;
}
+
.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_content {
margin-bottom: 16px;
}
+
.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap {
margin-top: 20px;
font-size: 1.5rem;
line-height: 1.5rem;
}
+
.mx_WidgetCapabilitiesPromptDialog
.mx_WidgetCapabilitiesPromptDialog_cap
.mx_WidgetCapabilitiesPromptDialog_byline {
@@ -8675,14 +11633,17 @@ input.mx_StatusMessageContextMenu_message {
font-size: 1.2rem;
line-height: 1.2rem;
}
+
.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_buttons {
margin-top: 40px;
}
+
.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag {
line-height: calc(1.4rem + 14px);
color: #61708b;
font-size: 1.2rem;
}
+
.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch {
display: inline-block;
vertical-align: middle;
@@ -8690,12 +11651,14 @@ input.mx_StatusMessageContextMenu_message {
width: 3.2rem;
height: 1.5rem;
}
+
.mx_WidgetCapabilitiesPromptDialog
.mx_SettingsFlag
.mx_ToggleSwitch.mx_ToggleSwitch_on
> .mx_ToggleSwitch_ball {
left: calc(100% - 1.5rem);
}
+
.mx_WidgetCapabilitiesPromptDialog
.mx_SettingsFlag
.mx_ToggleSwitch
@@ -8704,24 +11667,29 @@ input.mx_StatusMessageContextMenu_message {
height: 1.5rem;
border-radius: 1.5rem;
}
+
.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_SettingsFlag_label {
display: inline-block;
vertical-align: middle;
}
+
.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_ToggleSwitch {
display: inline-block;
vertical-align: middle;
margin-right: 8px;
}
+
.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_SettingsFlag_label {
display: inline-block;
vertical-align: middle;
}
+
.mx_AccessSecretStorageDialog_reset {
position: relative;
padding-left: 24px;
margin-top: 7px;
}
+
.mx_AccessSecretStorageDialog_reset:before {
content: "";
display: inline-block;
@@ -8730,11 +11698,14 @@ input.mx_StatusMessageContextMenu_message {
width: 16px;
left: 0;
top: 2px;
- background-image: url(../../img/element-icons/warning-badge.de1033e.svg);
+ background-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
+ background-size: contain;
}
+
.mx_AccessSecretStorageDialog_reset .mx_AccessSecretStorageDialog_reset_link {
color: #ff4b55;
}
+
.mx_AccessSecretStorageDialog_titleWithIcon:before {
content: "";
display: inline-block;
@@ -8745,28 +11716,34 @@ input.mx_StatusMessageContextMenu_message {
top: 5px;
background-color: #2e2f32;
}
+
.mx_AccessSecretStorageDialog_resetBadge:before {
- background-image: url(../../img/element-icons/warning-badge.de1033e.svg);
+ background-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
background-size: 24px;
background-color: transparent;
}
+
.mx_AccessSecretStorageDialog_secureBackupTitle:before {
-webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
}
+
.mx_AccessSecretStorageDialog_securePhraseTitle:before {
-webkit-mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
}
+
.mx_AccessSecretStorageDialog_keyStatus {
height: 30px;
}
+
.mx_AccessSecretStorageDialog_passPhraseInput {
width: 300px;
border: 1px solid #0dbd8b;
border-radius: 5px;
padding: 10px;
}
+
.mx_AccessSecretStorageDialog_recoveryKeyEntry {
display: -webkit-box;
display: -ms-flexbox;
@@ -8775,14 +11752,17 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: center;
align-items: center;
}
+
.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
+
.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
margin: 16px;
}
+
.mx_AccessSecretStorageDialog_recoveryKeyFeedback:before {
content: "";
display: inline-block;
@@ -8797,43 +11777,54 @@ input.mx_StatusMessageContextMenu_message {
mask-size: 20px;
margin-right: 5px;
}
+
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid {
color: #0dbd8b;
}
+
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid:before {
-webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
mask-image: url(../../img/feather-customised/check.5745b4e.svg);
background-color: #0dbd8b;
}
+
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid {
color: #ff4b55;
}
+
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid:before {
-webkit-mask-image: url(../../img/feather-customised/x.9662221.svg);
mask-image: url(../../img/feather-customised/x.9662221.svg);
background-color: #ff4b55;
}
+
.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
display: none;
}
+
.mx_CreateCrossSigningDialog {
width: 560px;
}
+
.mx_CreateCrossSigningDialog details .mx_AccessibleButton {
margin: 1em 0;
}
+
.mx_CreateCrossSigningDialog .mx_Dialog_title,
.mx_CreateKeyBackupDialog .mx_Dialog_title {
margin-bottom: 1em;
}
+
.mx_CreateKeyBackupDialog_primaryContainer {
padding: 20px;
}
+
.mx_CreateKeyBackupDialog_primaryContainer:after {
content: "";
clear: both;
display: block;
}
+
.mx_CreateKeyBackupDialog_passPhraseContainer {
display: -webkit-box;
display: -ms-flexbox;
@@ -8842,6 +11833,7 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: start;
align-items: flex-start;
}
+
.mx_CreateKeyBackupDialog_passPhraseInput {
-webkit-box-flex: 0;
-ms-flex: none;
@@ -8852,17 +11844,21 @@ input.mx_StatusMessageContextMenu_message {
padding: 10px;
margin-bottom: 1em;
}
+
.mx_CreateKeyBackupDialog_passPhraseMatch {
margin-left: 20px;
}
+
.mx_CreateKeyBackupDialog_recoveryKeyHeader {
margin-bottom: 1em;
}
+
.mx_CreateKeyBackupDialog_recoveryKeyContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_CreateKeyBackupDialog_recoveryKey {
width: 262px;
padding: 20px;
@@ -8870,6 +11866,7 @@ input.mx_StatusMessageContextMenu_message {
background-color: #f7f7f7;
margin-right: 12px;
}
+
.mx_CreateKeyBackupDialog_recoveryKeyButtons {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -8881,23 +11878,28 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: center;
align-items: center;
}
+
.mx_CreateKeyBackupDialog_recoveryKeyButtons button {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
white-space: nowrap;
}
+
.mx_CreateKeyBackupDialog details .mx_AccessibleButton {
margin: 1em 0;
}
+
.mx_CreateSecretStorageDialog {
width: 560px;
}
+
.mx_CreateSecretStorageDialog .mx_SettingsFlag {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_CreateSecretStorageDialog .mx_SettingsFlag_label {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
@@ -8905,18 +11907,22 @@ input.mx_StatusMessageContextMenu_message {
min-width: 0;
font-weight: 600;
}
+
.mx_CreateSecretStorageDialog .mx_ToggleSwitch {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin-left: 30px;
}
+
.mx_CreateSecretStorageDialog details .mx_AccessibleButton {
margin: 1em 0;
}
+
.mx_CreateSecretStorageDialog .mx_Dialog_title {
margin-bottom: 1em;
}
+
.mx_CreateSecretStorageDialog_titleWithIcon:before {
content: "";
display: inline-block;
@@ -8927,36 +11933,44 @@ input.mx_StatusMessageContextMenu_message {
top: 5px;
background-color: #2e2f32;
}
+
.mx_CreateSecretStorageDialog_secureBackupTitle:before {
-webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
}
+
.mx_CreateSecretStorageDialog_securePhraseTitle:before {
-webkit-mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
}
+
.mx_CreateSecretStorageDialog_centeredBody,
.mx_CreateSecretStorageDialog_centeredTitle {
text-align: center;
}
+
.mx_CreateSecretStorageDialog_primaryContainer {
padding-top: 20px;
}
+
.mx_CreateSecretStorageDialog_primaryContainer:after {
content: "";
clear: both;
display: block;
}
+
.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton {
margin-bottom: 16px;
padding: 11px;
}
+
.mx_CreateSecretStorageDialog_optionTitle {
color: #45474a;
font-weight: 600;
font-size: 1.8rem;
padding-bottom: 10px;
}
+
.mx_CreateSecretStorageDialog_optionIcon {
display: inline-block;
width: 24px;
@@ -8966,14 +11980,17 @@ input.mx_StatusMessageContextMenu_message {
top: 5px;
background-color: #2e2f32;
}
+
.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
-webkit-mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
}
+
.mx_CreateSecretStorageDialog_optionIcon_secureBackup {
-webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
}
+
.mx_CreateSecretStorageDialog_passPhraseContainer {
display: -webkit-box;
display: -ms-flexbox;
@@ -8982,18 +11999,22 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: start;
align-items: flex-start;
}
+
.mx_Field.mx_CreateSecretStorageDialog_passPhraseField {
margin-top: 0;
}
+
.mx_CreateSecretStorageDialog_passPhraseMatch {
width: 200px;
margin-left: 20px;
}
+
.mx_CreateSecretStorageDialog_recoveryKeyContainer {
width: 380px;
margin-left: auto;
margin-right: auto;
}
+
.mx_CreateSecretStorageDialog_recoveryKey {
font-weight: 700;
text-align: center;
@@ -9004,6 +12025,7 @@ input.mx_StatusMessageContextMenu_message {
word-spacing: 1em;
margin-bottom: 20px;
}
+
.mx_CreateSecretStorageDialog_recoveryKeyButtons {
display: -webkit-box;
display: -ms-flexbox;
@@ -9015,28 +12037,34 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: center;
align-items: center;
}
+
.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
width: 160px;
padding-left: 0;
padding-right: 0;
white-space: nowrap;
}
+
.mx_CreateSecretStorageDialog_continueSpinner {
margin-top: 33px;
text-align: right;
}
+
.mx_CreateSecretStorageDialog_continueSpinner img {
width: 20px;
height: 20px;
}
+
.mx_KeyBackupFailedDialog .mx_Dialog_title {
margin-bottom: 32px;
}
+
.mx_KeyBackupFailedDialog_title {
position: relative;
padding-left: 45px;
padding-bottom: 10px;
}
+
.mx_KeyBackupFailedDialog_title:before {
-webkit-mask: url(../../img/e2e/lock-warning-filled.993fb6c.svg);
mask: url(../../img/e2e/lock-warning-filled.993fb6c.svg);
@@ -9050,15 +12078,19 @@ input.mx_StatusMessageContextMenu_message {
bottom: 0;
left: 0;
}
+
.mx_KeyBackupFailedDialog .mx_Dialog_buttons {
margin-top: 36px;
}
+
.mx_RestoreKeyBackupDialog_keyStatus {
height: 30px;
}
+
.mx_RestoreKeyBackupDialog_primaryContainer {
padding: 20px;
}
+
.mx_RestoreKeyBackupDialog_passPhraseInput,
.mx_RestoreKeyBackupDialog_recoveryKeyInput {
width: 300px;
@@ -9066,6 +12098,7 @@ input.mx_StatusMessageContextMenu_message {
border-radius: 5px;
padding: 10px;
}
+
.mx_RestoreKeyBackupDialog_content > div {
display: -webkit-box;
display: -ms-flexbox;
@@ -9079,6 +12112,7 @@ input.mx_StatusMessageContextMenu_message {
justify-content: space-between;
min-height: 110px;
}
+
.mx_NetworkDropdown {
height: 32px;
position: relative;
@@ -9087,12 +12121,14 @@ input.mx_StatusMessageContextMenu_message {
margin-right: 9px;
margin-top: 12px;
}
+
.mx_NetworkDropdown,
.mx_NetworkDropdown .mx_AccessibleButton {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
+
.mx_NetworkDropdown_menu {
min-width: 204px;
margin: 0;
@@ -9104,13 +12140,16 @@ input.mx_StatusMessageContextMenu_message {
max-height: calc(100vh - 20px);
overflow-y: auto;
}
+
.mx_NetworkDropdown_menu_network {
font-weight: 700;
}
+
.mx_NetworkDropdown_server {
padding: 12px 0;
border-bottom: 1px solid #9fa9ba;
}
+
.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title {
padding: 0 10px;
font-size: 1.5rem;
@@ -9119,6 +12158,7 @@ input.mx_StatusMessageContextMenu_message {
margin-bottom: 4px;
position: relative;
}
+
.mx_NetworkDropdown_server
.mx_NetworkDropdown_server_title
.mx_AccessibleButton {
@@ -9129,6 +12169,7 @@ input.mx_StatusMessageContextMenu_message {
width: 16px;
margin-top: 2px;
}
+
.mx_NetworkDropdown_server
.mx_NetworkDropdown_server_title
.mx_AccessibleButton:after {
@@ -9146,6 +12187,7 @@ input.mx_StatusMessageContextMenu_message {
mask-image: url(../../img/feather-customised/x.9662221.svg);
background-color: #ff4b55;
}
+
.mx_NetworkDropdown_server .mx_NetworkDropdown_server_subtitle {
padding: 0 10px;
font-size: 1rem;
@@ -9154,6 +12196,7 @@ input.mx_StatusMessageContextMenu_message {
margin-bottom: 4px;
color: #61708b;
}
+
.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network {
font-size: 1.2rem;
line-height: 1.6rem;
@@ -9164,6 +12207,7 @@ input.mx_StatusMessageContextMenu_message {
white-space: nowrap;
text-overflow: ellipsis;
}
+
.mx_NetworkDropdown_server
.mx_NetworkDropdown_server_network[aria-checked="true"]:after {
content: "";
@@ -9181,15 +12225,18 @@ input.mx_StatusMessageContextMenu_message {
mask-image: url(../../img/feather-customised/check.5745b4e.svg);
background-color: #0dbd8b;
}
+
.mx_NetworkDropdown_server_add:hover,
.mx_NetworkDropdown_server_network:hover {
background-color: #f3f8fd;
}
+
.mx_NetworkDropdown_server_add {
padding: 16px 10px 16px 32px;
position: relative;
border-radius: 0 0 4px 4px;
}
+
.mx_NetworkDropdown_server_add:before {
content: "";
position: absolute;
@@ -9206,9 +12253,11 @@ input.mx_StatusMessageContextMenu_message {
mask-image: url(../../img/feather-customised/plus.38ae979.svg);
background-color: #61708b;
}
+
.mx_NetworkDropdown_handle {
position: relative;
}
+
.mx_NetworkDropdown_handle:after {
content: "";
position: absolute;
@@ -9226,19 +12275,24 @@ input.mx_StatusMessageContextMenu_message {
mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
background-color: #2e2f32;
}
+
.mx_NetworkDropdown_handle .mx_NetworkDropdown_handle_server {
color: #61708b;
font-size: 1.2rem;
}
+
.mx_NetworkDropdown_dialog .mx_Dialog {
width: 45vw;
}
+
.mx_AccessibleButton {
cursor: pointer;
}
+
.mx_AccessibleButton_disabled {
cursor: default;
}
+
.mx_AccessibleButton_hasKind {
padding: 7px 18px;
text-align: center;
@@ -9254,74 +12308,91 @@ input.mx_StatusMessageContextMenu_message {
justify-content: center;
font-size: 1.4rem;
}
+
.mx_AccessibleButton_kind_primary {
color: #fff;
background-color: #0dbd8b;
font-weight: 600;
}
+
.mx_AccessibleButton_kind_primary_outline {
color: #0dbd8b;
background-color: #fff;
border: 1px solid #0dbd8b;
font-weight: 600;
}
+
.mx_AccessibleButton_kind_secondary {
color: #0dbd8b;
font-weight: 600;
}
+
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,
.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled {
opacity: 0.4;
}
+
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
padding: 5px 12px;
color: #fff;
background-color: #0dbd8b;
}
+
.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
opacity: 0.4;
}
+
.mx_AccessibleButton_kind_danger {
color: #fff;
background-color: #ff4b55;
}
+
.mx_AccessibleButton_kind_danger_outline {
color: #ff4b55;
- background-color: #fff;
+ background-color: transparent;
border: 1px solid #ff4b55;
}
+
.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
color: #fff;
background-color: #f5b6bb;
}
+
.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
color: #f5b6bb;
border-color: #f5b6bb;
}
+
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
padding: 5px 12px;
color: #fff;
background-color: #ff4b55;
}
+
.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
color: #fff;
background-color: #f5b6bb;
}
+
.mx_AccessibleButton_kind_link {
color: #0dbd8b;
background-color: transparent;
}
+
.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled {
opacity: 0.4;
}
+
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm {
padding: 5px 12px;
color: #0dbd8b;
background-color: transparent;
}
+
.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled {
opacity: 0.4;
}
+
.mx_AddressSelector {
position: absolute;
background-color: #fff;
@@ -9333,21 +12404,26 @@ input.mx_StatusMessageContextMenu_message {
cursor: pointer;
z-index: 1;
}
+
.mx_AddressSelector.mx_AddressSelector_empty {
display: none;
}
+
.mx_AddressSelector_addressListElement .mx_AddressTile {
background-color: #fff;
border: 1px solid #fff;
}
+
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
background-color: #f2f5f8;
}
+
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected
.mx_AddressTile {
background-color: #f2f5f8;
border: 1px solid #f2f5f8;
}
+
.mx_AddressTile {
display: inline-block;
border-radius: 3px;
@@ -9359,14 +12435,17 @@ input.mx_StatusMessageContextMenu_message {
font-weight: 400;
margin-right: 4px;
}
+
.mx_AddressTile.mx_AddressTile_error {
background-color: rgba(255, 0, 100, 0.1);
color: #ff4b55;
border-color: #ff4b55;
}
+
.mx_AddressTile_network {
padding-right: 4px;
}
+
.mx_AddressTile_avatar,
.mx_AddressTile_network {
display: inline-block;
@@ -9374,15 +12453,18 @@ input.mx_StatusMessageContextMenu_message {
padding-left: 2px;
vertical-align: middle;
}
+
.mx_AddressTile_avatar {
padding-right: 7px;
}
+
.mx_AddressTile_mx {
display: inline-block;
margin: 0;
border: 0;
padding: 0;
}
+
.mx_AddressTile_name {
display: inline-block;
padding-right: 4px;
@@ -9391,6 +12473,7 @@ input.mx_StatusMessageContextMenu_message {
height: 26px;
vertical-align: middle;
}
+
.mx_AddressTile_name.mx_AddressTile_justified {
width: 180px;
overflow: hidden;
@@ -9398,10 +12481,12 @@ input.mx_StatusMessageContextMenu_message {
text-overflow: ellipsis;
vertical-align: middle;
}
+
.mx_AddressTile_id {
display: inline-block;
padding-right: 11px;
}
+
.mx_AddressTile_id.mx_AddressTile_justified {
width: 200px;
overflow: hidden;
@@ -9409,11 +12494,13 @@ input.mx_StatusMessageContextMenu_message {
text-overflow: ellipsis;
vertical-align: middle;
}
+
.mx_AddressTile_unknownMx {
display: inline-block;
font-weight: 600;
padding-right: 11px;
}
+
.mx_AddressTile_unknownMxl.mx_AddressTile_justified {
width: 380px;
overflow: hidden;
@@ -9421,11 +12508,13 @@ input.mx_StatusMessageContextMenu_message {
text-overflow: ellipsis;
vertical-align: middle;
}
+
.mx_AddressTile_email {
display: inline-block;
font-weight: 600;
padding-right: 11px;
}
+
.mx_AddressTile_email.mx_AddressTile_justified {
width: 200px;
overflow: hidden;
@@ -9433,10 +12522,12 @@ input.mx_StatusMessageContextMenu_message {
text-overflow: ellipsis;
vertical-align: middle;
}
+
.mx_AddressTile_unknown {
display: inline-block;
padding-right: 11px;
}
+
.mx_AddressTile_unknown.mx_AddressTile_justified {
width: 380px;
overflow: hidden;
@@ -9444,34 +12535,42 @@ input.mx_StatusMessageContextMenu_message {
text-overflow: ellipsis;
vertical-align: middle;
}
+
.mx_AddressTile_dismiss {
display: inline-block;
padding-right: 11px;
padding-left: 1px;
cursor: pointer;
}
+
.mx_AddressTile_dismiss object {
pointer-events: none;
}
+
.mx_DesktopBuildsNotice {
text-align: center;
padding: 0 16px;
}
+
.mx_DesktopBuildsNotice > * {
vertical-align: middle;
}
+
.mx_DesktopBuildsNotice > img {
margin-right: 8px;
}
+
.mx_desktopCapturerSourcePicker {
overflow: hidden;
}
+
.mx_desktopCapturerSourcePicker_tabLabels {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 0 8px;
}
+
.mx_desktopCapturerSourcePicker_tabLabel,
.mx_desktopCapturerSourcePicker_tabLabel_selected {
width: 100%;
@@ -9480,10 +12579,12 @@ input.mx_StatusMessageContextMenu_message {
padding: 8px 0;
font-size: 1.3rem;
}
+
.mx_desktopCapturerSourcePicker_tabLabel_selected {
background-color: #0dbd8b;
color: #fff;
}
+
.mx_desktopCapturerSourcePicker_panel {
display: -webkit-box;
display: -ms-flexbox;
@@ -9499,6 +12600,7 @@ input.mx_StatusMessageContextMenu_message {
height: 500px;
overflow: overlay;
}
+
.mx_desktopCapturerSourcePicker_stream_button {
display: -webkit-box;
display: -ms-flexbox;
@@ -9510,14 +12612,17 @@ input.mx_StatusMessageContextMenu_message {
margin: 8px;
border-radius: 4px;
}
+
.mx_desktopCapturerSourcePicker_stream_button:focus,
.mx_desktopCapturerSourcePicker_stream_button:hover {
background: #fff;
}
+
.mx_desktopCapturerSourcePicker_stream_thumbnail {
margin: 4px;
width: 312px;
}
+
.mx_desktopCapturerSourcePicker_stream_name {
margin: 0 4px;
white-space: nowrap;
@@ -9525,6 +12630,33 @@ input.mx_StatusMessageContextMenu_message {
overflow: hidden;
width: 312px;
}
+
+.mx_DialPadBackspaceButton {
+ position: relative;
+ height: 28px;
+ width: 28px;
+}
+
+.mx_DialPadBackspaceButton:before {
+ content: "";
+ background-color: #8d97a5;
+ width: inherit;
+ height: inherit;
+ top: 0;
+ left: 0;
+ position: absolute;
+ display: inline-block;
+ vertical-align: middle;
+ -webkit-mask-image: url(../../img/element-icons/call/delete.833d785.svg);
+ mask-image: url(../../img/element-icons/call/delete.833d785.svg);
+ -webkit-mask-position: 8px;
+ mask-position: 8px;
+ -webkit-mask-size: 20px;
+ mask-size: 20px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+}
+
.mx_DirectorySearchBox {
display: -webkit-box;
display: -ms-flexbox;
@@ -9532,6 +12664,7 @@ input.mx_StatusMessageContextMenu_message {
padding-left: 9px;
padding-right: 9px;
}
+
.mx_DirectorySearchBox_joinButton {
display: table-cell;
padding: 3px 10px;
@@ -9549,6 +12682,7 @@ input.mx_StatusMessageContextMenu_message {
user-select: none;
cursor: pointer;
}
+
.mx_DirectorySearchBox_clear {
background-color: #ff4b55;
-webkit-mask: url(../../img/cancel.4b9715b.svg);
@@ -9563,13 +12697,16 @@ input.mx_StatusMessageContextMenu_message {
height: 15px;
cursor: pointer;
}
+
.mx_Dropdown {
position: relative;
color: #2e2f32;
}
+
.mx_Dropdown_disabled {
opacity: 0.3;
}
+
.mx_Dropdown_input {
display: -webkit-box;
display: -ms-flexbox;
@@ -9578,7 +12715,7 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: center;
align-items: center;
position: relative;
- border-radius: 3px;
+ border-radius: 4px;
border: 1px solid #c7c7c7;
font-size: 1.2rem;
-webkit-user-select: none;
@@ -9586,16 +12723,20 @@ input.mx_StatusMessageContextMenu_message {
-ms-user-select: none;
user-select: none;
}
+
.mx_Dropdown_input.mx_AccessibleButton_disabled {
cursor: not-allowed;
}
+
.mx_Dropdown_input:focus {
border-color: #238cf5;
}
+
.mx_Dropdown_input.mx_AccessibleButton:focus {
-webkit-filter: none;
filter: none;
}
+
.mx_Dropdown_arrow {
width: 10px;
height: 6px;
@@ -9606,12 +12747,14 @@ input.mx_StatusMessageContextMenu_message {
mask-repeat: no-repeat;
background: #2e2f32;
}
+
.mx_Dropdown_option {
height: 35px;
line-height: 3.5rem;
padding-left: 8px;
padding-right: 8px;
}
+
.mx_Dropdown_input > .mx_Dropdown_option {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -9623,22 +12766,26 @@ input.mx_StatusMessageContextMenu_message {
-ms-flex-align: center;
align-items: center;
}
+
.mx_Dropdown_input > .mx_Dropdown_option,
.mx_Dropdown_option div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
+
.mx_Dropdown_option .mx_Dropdown_option_emoji,
.mx_Dropdown_option img {
margin: 5px;
width: 16px;
vertical-align: middle;
}
+
.mx_Dropdown_option_emoji {
font-size: 1.6rem;
line-height: 1.6rem;
}
+
input.mx_Dropdown_option,
input.mx_Dropdown_option:focus {
font-weight: 400;
@@ -9647,6 +12794,7 @@ input.mx_Dropdown_option:focus {
padding-bottom: 0;
width: 60%;
}
+
.mx_Dropdown_menu {
position: absolute;
left: -1px;
@@ -9655,34 +12803,40 @@ input.mx_Dropdown_option:focus {
z-index: 2;
margin: 0;
padding: 0;
- border-radius: 3px;
+ border-radius: 4px;
border: 1px solid #238cf5;
background-color: #fff;
max-height: 200px;
overflow-y: auto;
}
+
.mx_Dropdown_menu .mx_Dropdown_option {
height: auto;
min-height: 35px;
}
+
.mx_Dropdown_menu .mx_Dropdown_option_highlight {
background-color: #ddd;
}
+
.mx_Dropdown_searchPrompt {
font-weight: 400;
margin-left: 5px;
margin-bottom: 5px;
}
+
.mx_EditableItemList {
margin-top: 12px;
margin-bottom: 10px;
}
+
.mx_EditableItem {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 5px;
}
+
.mx_EditableItem_delete {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
@@ -9700,18 +12854,22 @@ input.mx_Dropdown_option:focus {
-webkit-mask-size: 100%;
mask-size: 100%;
}
+
.mx_EditableItem_email {
vertical-align: middle;
}
+
.mx_EditableItem_promptText {
margin-right: 10px;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
+
.mx_EditableItem_confirmBtn {
margin-right: 5px;
}
+
.mx_EditableItem_item {
-webkit-box-flex: 1;
-ms-flex: auto 1 0px;
@@ -9723,9 +12881,11 @@ input.mx_Dropdown_option:focus {
overflow-x: hidden;
text-overflow: ellipsis;
}
+
.mx_EditableItemList_label {
margin-bottom: 5px;
}
+
.mx_ErrorBoundary {
width: 100%;
height: 100%;
@@ -9733,6 +12893,7 @@ input.mx_Dropdown_option:focus {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_ErrorBoundary,
.mx_ErrorBoundary_body {
display: -webkit-box;
@@ -9742,6 +12903,7 @@ input.mx_Dropdown_option:focus {
-ms-flex-align: center;
align-items: center;
}
+
.mx_ErrorBoundary_body {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
@@ -9749,28 +12911,34 @@ input.mx_Dropdown_option:focus {
flex-direction: column;
max-width: 400px;
}
+
.mx_ErrorBoundary_body .mx_AccessibleButton {
margin-top: 5px;
}
+
.mx_EventListSummary {
position: relative;
}
+
.mx_TextualEvent.mx_EventListSummary_summary {
font-size: 1.4rem;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
+
.mx_EventListSummary_avatars {
display: inline-block;
margin-right: 8px;
padding-top: 8px;
line-height: 1.2rem;
}
+
.mx_EventListSummary_avatars .mx_BaseAvatar {
margin-right: -4px;
cursor: pointer;
}
+
.mx_EventListSummary_toggle {
color: #0dbd8b;
cursor: pointer;
@@ -9778,26 +12946,33 @@ input.mx_Dropdown_option:focus {
margin-right: 10px;
margin-top: 8px;
}
+
.mx_EventListSummary_line {
border-bottom: 1px solid transparent;
margin-left: 63px;
line-height: 3rem;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventListSummary {
font-size: 1.3rem;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventListSummary .mx_EventTile_line {
line-height: 2rem;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventListSummary_line {
line-height: 2.2rem;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventListSummary_toggle {
margin-top: 3px;
}
+
.mx_MatrixChat_useCompactLayout .mx_TextualEvent.mx_EventListSummary_summary {
font-size: 1.3rem;
}
+
.mx_FacePile .mx_FacePile_faces {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
@@ -9808,15 +12983,19 @@ input.mx_Dropdown_option:focus {
flex-direction: row-reverse;
vertical-align: middle;
}
+
.mx_FacePile .mx_FacePile_faces > .mx_FacePile_face + .mx_FacePile_face {
margin-right: -8px;
}
+
.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_image {
border: 1px solid #fff;
}
+
.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_initial {
margin: 1px;
}
+
.mx_FacePile .mx_FacePile_faces .mx_FacePile_more {
position: relative;
border-radius: 100%;
@@ -9824,6 +13003,7 @@ input.mx_Dropdown_option:focus {
height: 30px;
background-color: hsla(0, 0%, 91%, 0.77);
}
+
.mx_FacePile .mx_FacePile_faces .mx_FacePile_more:before {
content: "";
z-index: 1;
@@ -9842,12 +13022,14 @@ input.mx_Dropdown_option:focus {
-webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
}
+
.mx_FacePile .mx_FacePile_summary {
margin-left: 12px;
font-size: 1.4rem;
line-height: 2.4rem;
color: #8d99a5;
}
+
.mx_Field {
display: -webkit-box;
display: -ms-flexbox;
@@ -9863,12 +13045,15 @@ input.mx_Dropdown_option:focus {
transition: border-color 0.25s;
border: 1px solid #e7e7e7;
}
+
.mx_Field_prefix {
border-right: 1px solid #e7e7e7;
}
+
.mx_Field_postfix {
border-left: 1px solid #e7e7e7;
}
+
.mx_Field input,
.mx_Field select,
.mx_Field textarea {
@@ -9886,10 +13071,12 @@ input.mx_Dropdown_option:focus {
flex: 1;
min-width: 0;
}
+
.mx_Field select {
-moz-appearance: none;
-webkit-appearance: none;
}
+
.mx_Field_select:before {
content: "";
position: absolute;
@@ -9905,86 +13092,101 @@ input.mx_Dropdown_option:focus {
z-index: 1;
pointer-events: none;
}
+
.mx_Field:focus-within {
border-color: #238cf5;
}
+
.mx_Field input:focus,
.mx_Field select:focus,
.mx_Field textarea:focus {
outline: 0;
}
+
.mx_Field input::-webkit-input-placeholder,
.mx_Field textarea::-webkit-input-placeholder {
-webkit-transition: color 0.25s ease-in 0s;
transition: color 0.25s ease-in 0s;
color: transparent;
}
+
.mx_Field input::-moz-placeholder,
.mx_Field textarea::-moz-placeholder {
-moz-transition: color 0.25s ease-in 0s;
transition: color 0.25s ease-in 0s;
color: transparent;
}
+
.mx_Field input:-ms-input-placeholder,
.mx_Field textarea:-ms-input-placeholder {
-ms-transition: color 0.25s ease-in 0s;
transition: color 0.25s ease-in 0s;
color: transparent;
}
+
.mx_Field input::-ms-input-placeholder,
.mx_Field textarea::-ms-input-placeholder {
-ms-transition: color 0.25s ease-in 0s;
transition: color 0.25s ease-in 0s;
color: transparent;
}
+
.mx_Field input::placeholder,
.mx_Field textarea::placeholder {
-webkit-transition: color 0.25s ease-in 0s;
transition: color 0.25s ease-in 0s;
color: transparent;
}
+
.mx_Field input:placeholder-shown:focus::-webkit-input-placeholder,
.mx_Field textarea:placeholder-shown:focus::-webkit-input-placeholder {
-webkit-transition: color 0.25s ease-in 0.1s;
transition: color 0.25s ease-in 0.1s;
color: #888;
}
+
.mx_Field input:placeholder-shown:focus::-moz-placeholder,
.mx_Field textarea:placeholder-shown:focus::-moz-placeholder {
-moz-transition: color 0.25s ease-in 0.1s;
transition: color 0.25s ease-in 0.1s;
color: #888;
}
+
.mx_Field input:placeholder-shown:focus:-ms-input-placeholder,
.mx_Field textarea:placeholder-shown:focus:-ms-input-placeholder {
-ms-transition: color 0.25s ease-in 0.1s;
transition: color 0.25s ease-in 0.1s;
color: #888;
}
+
.mx_Field input:placeholder-shown:focus::-ms-input-placeholder,
.mx_Field textarea:placeholder-shown:focus::-ms-input-placeholder {
-ms-transition: color 0.25s ease-in 0.1s;
transition: color 0.25s ease-in 0.1s;
color: #888;
}
+
.mx_Field input:-moz-placeholder-shown:focus::placeholder,
.mx_Field textarea:-moz-placeholder-shown:focus::placeholder {
-moz-transition: color 0.25s ease-in 0.1s;
transition: color 0.25s ease-in 0.1s;
color: #888;
}
+
.mx_Field input:-ms-input-placeholder:focus::placeholder,
.mx_Field textarea:-ms-input-placeholder:focus::placeholder {
-ms-transition: color 0.25s ease-in 0.1s;
transition: color 0.25s ease-in 0.1s;
color: #888;
}
+
.mx_Field input:placeholder-shown:focus::placeholder,
.mx_Field textarea:placeholder-shown:focus::placeholder {
-webkit-transition: color 0.25s ease-in 0.1s;
transition: color 0.25s ease-in 0.1s;
color: #888;
}
+
.mx_Field label {
-webkit-transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
@@ -10004,6 +13206,7 @@ input.mx_Dropdown_option:focus {
text-overflow: ellipsis;
max-width: calc(100% - 20px);
}
+
.mx_Field input:not(:-moz-placeholder-shown) + label,
.mx_Field textarea:not(:-moz-placeholder-shown) + label {
-moz-transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
@@ -10016,6 +13219,7 @@ input.mx_Dropdown_option:focus {
background-color: #fff;
pointer-events: auto;
}
+
.mx_Field input:not(:-ms-input-placeholder) + label,
.mx_Field textarea:not(:-ms-input-placeholder) + label {
-ms-transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
@@ -10028,6 +13232,7 @@ input.mx_Dropdown_option:focus {
background-color: #fff;
pointer-events: auto;
}
+
.mx_Field_labelAlwaysTopLeft label,
.mx_Field input:focus + label,
.mx_Field input:not(:placeholder-shown) + label,
@@ -10044,11 +13249,13 @@ input.mx_Dropdown_option:focus {
background-color: #fff;
pointer-events: auto;
}
+
.mx_Field input:focus + label,
.mx_Field select:focus + label,
.mx_Field textarea:focus + label {
color: #238cf5;
}
+
.mx_Field input:disabled,
.mx_Field input:disabled + label,
.mx_Field select:disabled,
@@ -10058,63 +13265,48 @@ input.mx_Dropdown_option:focus {
background-color: #fff;
color: #888;
}
+
.mx_Field_valid.mx_Field,
.mx_Field_valid.mx_Field:focus-within {
border-color: #0dbd8b;
}
+
.mx_Field_valid.mx_Field:focus-within label,
.mx_Field_valid.mx_Field label {
color: #0dbd8b;
}
+
.mx_Field_invalid.mx_Field,
.mx_Field_invalid.mx_Field:focus-within {
border-color: #ff4b55;
}
+
.mx_Field_invalid.mx_Field:focus-within label,
.mx_Field_invalid.mx_Field label {
color: #ff4b55;
}
+
.mx_Field_tooltip {
margin-top: -12px;
margin-left: 4px;
width: 200px;
}
+
.mx_Field_tooltip.mx_Field_valid {
-webkit-animation: mx_fadeout 1s 2s forwards;
animation: mx_fadeout 1s 2s forwards;
}
+
.mx_Field .mx_Dropdown_input {
border: initial;
border-radius: 0;
border-radius: initial;
}
+
.mx_Field .mx_CountryDropdown {
width: 7.8rem;
}
-.mx_FormButton {
- line-height: 1.6rem;
- padding: 5px 15px;
- font-size: 1.2rem;
- height: -webkit-min-content;
- height: -moz-min-content;
- height: min-content;
-}
-.mx_FormButton:not(:last-child) {
- margin-right: 8px;
-}
-.mx_FormButton.mx_AccessibleButton_kind_primary {
- color: #0dbd8b;
- background-color: rgba(3, 179, 129, 0.16);
-}
-.mx_FormButton.mx_AccessibleButton_kind_danger {
- color: #ff4b55;
- background-color: rgba(255, 75, 85, 0.16);
-}
-.mx_FormButton.mx_AccessibleButton_kind_secondary {
- color: #737d8c;
- border: 1px solid #737d8c;
- background-color: unset;
-}
+
.mx_ImageView {
width: 100%;
-webkit-box-orient: vertical;
@@ -10122,6 +13314,7 @@ input.mx_Dropdown_option:focus {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_ImageView,
.mx_ImageView_image_wrapper {
display: -webkit-box;
@@ -10129,7 +13322,9 @@ input.mx_Dropdown_option:focus {
display: flex;
height: 100%;
}
+
.mx_ImageView_image_wrapper {
+ pointer-events: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
@@ -10138,11 +13333,12 @@ input.mx_Dropdown_option:focus {
align-items: center;
overflow: hidden;
}
+
.mx_ImageView_image {
- pointer-events: all;
-ms-flex-negative: 0;
flex-shrink: 0;
}
+
.mx_ImageView_panel {
width: 100%;
height: 68px;
@@ -10150,6 +13346,7 @@ input.mx_Dropdown_option:focus {
-ms-flex-pack: justify;
justify-content: space-between;
}
+
.mx_ImageView_info_wrapper,
.mx_ImageView_panel {
display: -webkit-box;
@@ -10159,8 +13356,9 @@ input.mx_Dropdown_option:focus {
-ms-flex-align: center;
align-items: center;
}
+
.mx_ImageView_info_wrapper {
- pointer-events: all;
+ pointer-events: auto;
padding-left: 32px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
@@ -10168,6 +13366,7 @@ input.mx_Dropdown_option:focus {
flex-direction: row;
color: #fff;
}
+
.mx_ImageView_info {
padding-left: 12px;
display: -webkit-box;
@@ -10178,23 +13377,29 @@ input.mx_Dropdown_option:focus {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_ImageView_info_sender {
font-weight: 700;
}
+
.mx_ImageView_toolbar {
padding-right: 16px;
- pointer-events: all;
+ pointer-events: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
+ grid-gap: 14px;
+ gap: 14px;
}
+
.mx_ImageView_button {
- margin-left: 24px;
+ padding: 5px;
display: block;
}
+
.mx_ImageView_button:before {
content: "";
height: 22px;
@@ -10208,34 +13413,43 @@ input.mx_Dropdown_option:focus {
display: block;
background-color: #c1c6cd;
}
+
.mx_ImageView_button_rotateCW:before {
-webkit-mask-image: url(../../img/image-view/rotate-cw.60d903e.svg);
mask-image: url(../../img/image-view/rotate-cw.60d903e.svg);
}
+
.mx_ImageView_button_rotateCCW:before {
-webkit-mask-image: url(../../img/image-view/rotate-ccw.b28ae4a.svg);
mask-image: url(../../img/image-view/rotate-ccw.b28ae4a.svg);
}
+
.mx_ImageView_button_zoomOut:before {
-webkit-mask-image: url(../../img/image-view/zoom-out.8506f80.svg);
mask-image: url(../../img/image-view/zoom-out.8506f80.svg);
}
+
.mx_ImageView_button_zoomIn:before {
-webkit-mask-image: url(../../img/image-view/zoom-in.3b3f32e.svg);
mask-image: url(../../img/image-view/zoom-in.3b3f32e.svg);
}
+
.mx_ImageView_button_download:before {
-webkit-mask-image: url(../../img/image-view/download.2eac468.svg);
mask-image: url(../../img/image-view/download.2eac468.svg);
}
+
.mx_ImageView_button_more:before {
-webkit-mask-image: url(../../img/image-view/more.0427c6c.svg);
mask-image: url(../../img/image-view/more.0427c6c.svg);
}
+
.mx_ImageView_button_close {
+ padding: 0;
border-radius: 100%;
background: #21262c;
}
+
.mx_ImageView_button_close:before {
width: 32px;
height: 32px;
@@ -10244,12 +13458,14 @@ input.mx_Dropdown_option:focus {
-webkit-mask-size: 40%;
mask-size: 40%;
}
+
.mx_InfoTooltip_icon,
.mx_InfoTooltip_icon:before {
width: 16px;
height: 16px;
display: inline-block;
}
+
.mx_InfoTooltip_icon:before {
background-color: #61708b;
-webkit-mask-repeat: no-repeat;
@@ -10260,23 +13476,41 @@ input.mx_Dropdown_option:focus {
mask-position: center;
content: "";
vertical-align: middle;
+}
+
+.mx_InfoTooltip_icon_info:before {
-webkit-mask-image: url(../../img/element-icons/info.dc07e19.svg);
mask-image: url(../../img/element-icons/info.dc07e19.svg);
}
+
+.mx_InfoTooltip_icon_warning:before {
+ -webkit-mask-image: url(../../img/element-icons/warning.d65f5be.svg);
+ mask-image: url(../../img/element-icons/warning.d65f5be.svg);
+}
+
.mx_InlineSpinner {
display: inline;
}
-.mx_InlineSpinner_spin img {
+
+.mx_InlineSpinner_icon,
+.mx_InlineSpinner img {
margin: 0 6px;
vertical-align: -3px;
}
+
+.mx_InlineSpinner_icon {
+ display: inline-block;
+}
+
.mx_InviteReason {
position: relative;
margin-bottom: 1em;
}
+
.mx_InviteReason .mx_InviteReason_reason {
visibility: visible;
}
+
.mx_InviteReason .mx_InviteReason_view {
display: none;
position: absolute;
@@ -10293,6 +13527,7 @@ input.mx_Dropdown_option:focus {
cursor: pointer;
color: #737d8c;
}
+
.mx_InviteReason .mx_InviteReason_view:before {
content: "";
margin-right: 8px;
@@ -10303,24 +13538,29 @@ input.mx_Dropdown_option:focus {
width: 18px;
height: 14px;
}
+
.mx_InviteReason_hidden .mx_InviteReason_reason {
visibility: hidden;
}
+
.mx_InviteReason_hidden .mx_InviteReason_view {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_ManageIntegsButton_error {
position: relative;
float: right;
cursor: not-allowed;
}
+
.mx_ManageIntegsButton_error img {
position: absolute;
right: -5px;
top: -5px;
}
+
.mx_ManageIntegsButton_errorPopup {
position: absolute;
top: 110%;
@@ -10335,18 +13575,22 @@ input.mx_Dropdown_option:focus {
text-align: center;
z-index: 1000;
}
+
.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup {
display: none;
}
+
.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup {
display: inline;
}
+
.mx_MiniAvatarUploader {
position: relative;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
+
.mx_MiniAvatarUploader .mx_Tooltip {
display: inline-block;
position: absolute;
@@ -10357,21 +13601,23 @@ input.mx_Dropdown_option:focus {
left: 72px;
top: 0;
}
-.mx_MiniAvatarUploader:after,
-.mx_MiniAvatarUploader:before {
- content: "";
+
+.mx_MiniAvatarUploader .mx_MiniAvatarUploader_indicator {
position: absolute;
height: 26px;
width: 26px;
right: -6px;
bottom: -6px;
-}
-.mx_MiniAvatarUploader:before {
background-color: #fff;
border-radius: 50%;
z-index: 1;
}
-.mx_MiniAvatarUploader:after {
+
+.mx_MiniAvatarUploader
+ .mx_MiniAvatarUploader_indicator
+ .mx_MiniAvatarUploader_cameraIcon {
+ height: 100%;
+ width: 100%;
background-color: #737d8c;
-webkit-mask-position: center;
mask-position: center;
@@ -10383,23 +13629,21 @@ input.mx_Dropdown_option:focus {
mask-size: 16px;
z-index: 2;
}
-.mx_MiniAvatarUploader.mx_MiniAvatarUploader_busy:after {
- background: url(../../img/spinner.0b29ec9.gif) no-repeat 50%;
- background-size: 80%;
- -webkit-mask: unset;
- mask: unset;
-}
+
.mx_MiniAvatarUploader_input {
display: none;
}
+
.mx_PowerSelector {
width: 100%;
}
+
.mx_PowerSelector .mx_Field input,
.mx_PowerSelector .mx_Field select {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
progress.mx_ProgressBar {
height: 6px;
width: 60px;
@@ -10410,32 +13654,41 @@ progress.mx_ProgressBar {
border: none;
border-radius: 6px;
}
+
progress.mx_ProgressBar::-moz-progress-bar {
border-radius: 6px;
}
+
progress.mx_ProgressBar::-webkit-progress-bar,
progress.mx_ProgressBar::-webkit-progress-value {
border-radius: 6px;
}
+
progress.mx_ProgressBar {
color: #0dbd8b;
}
+
progress.mx_ProgressBar::-moz-progress-bar {
background-color: #0dbd8b;
}
+
progress.mx_ProgressBar::-webkit-progress-value {
background-color: #0dbd8b;
}
+
progress.mx_ProgressBar {
background-color: rgba(141, 151, 165, 0.2);
}
+
progress.mx_ProgressBar::-webkit-progress-bar {
background-color: rgba(141, 151, 165, 0.2);
}
+
progress.mx_ProgressBar ::-webkit-progress-value {
-webkit-transition: width 1s;
transition: width 1s;
}
+
progress.mx_ProgressBar ::-moz-progress-bar {
-moz-transition: padding-bottom 1s;
transition: padding-bottom 1s;
@@ -10445,27 +13698,54 @@ progress.mx_ProgressBar ::-moz-progress-bar {
padding-left: 15px;
height: 0;
}
+
.mx_QRCode img {
border-radius: 8px;
}
+
.mx_ReplyThread {
- margin-top: 0;
+ margin: 0 0 8px;
+ padding: 0 10px;
+ border-left: 2px solid #0dbd8b;
+ border-radius: 2px;
}
-.mx_ReplyThread .mx_DateSeparator {
- font-size: 1em !important;
- margin-top: 0;
- margin-bottom: 0;
- padding-bottom: 1px;
- bottom: -5px;
-}
-.mx_ReplyThread_show {
+
+.mx_ReplyThread .mx_ReplyThread_show {
cursor: pointer;
}
-blockquote.mx_ReplyThread {
- margin-left: 0;
- padding-left: 10px;
- border-left: 4px solid #ddd;
+
+.mx_ReplyThread.mx_ReplyThread_color1 {
+ border-left-color: #368bd6;
}
+
+.mx_ReplyThread.mx_ReplyThread_color2 {
+ border-left-color: #ac3ba8;
+}
+
+.mx_ReplyThread.mx_ReplyThread_color3 {
+ border-left-color: #0dbd8b;
+}
+
+.mx_ReplyThread.mx_ReplyThread_color4 {
+ border-left-color: #e64f7a;
+}
+
+.mx_ReplyThread.mx_ReplyThread_color5 {
+ border-left-color: #ff812d;
+}
+
+.mx_ReplyThread.mx_ReplyThread_color6 {
+ border-left-color: #2dc2c5;
+}
+
+.mx_ReplyThread.mx_ReplyThread_color7 {
+ border-left-color: #5c56f5;
+}
+
+.mx_ReplyThread.mx_ReplyThread_color8 {
+ border-left-color: #74d12c;
+}
+
.mx_ResizeHandle {
cursor: row-resize;
-webkit-box-flex: 0;
@@ -10473,30 +13753,37 @@ blockquote.mx_ReplyThread {
flex: 0 0 auto;
z-index: 100;
}
+
.mx_ResizeHandle.mx_ResizeHandle_horizontal {
margin: 0 -5px;
padding: 0 5px;
cursor: col-resize;
}
+
.mx_ResizeHandle.mx_ResizeHandle_vertical {
margin: -5px 0;
padding: 5px 0;
cursor: row-resize;
}
+
.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
margin: 0 -10px 0 0;
padding: 0 8px 0 0;
}
+
.mx_ResizeHandle > div {
background: transparent;
}
+
.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
width: 1px;
height: 100%;
}
+
.mx_ResizeHandle.mx_ResizeHandle_vertical > div {
height: 1px;
}
+
.mx_AtRoomPill,
.mx_GroupPill,
.mx_RoomPill,
@@ -10512,33 +13799,40 @@ blockquote.mx_ReplyThread {
line-height: 1.5rem;
padding-left: 0;
}
+
a.mx_Pill {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: calc(100% - 1ch);
}
+
.mx_Pill {
padding: 0.1rem 0.4em 0.1rem 0.1rem;
vertical-align: text-top;
line-height: 1.7rem;
}
+
.mx_EventTile_content .markdown-body a.mx_GroupPill,
.mx_GroupPill {
color: #fff;
background-color: #aaa;
}
+
.mx_EventTile_content .markdown-body a.mx_Pill {
text-decoration: none;
}
+
.mx_EventTile_content .markdown-body a.mx_UserPill,
.mx_UserPill {
color: #2e2f32;
background-color: rgba(0, 0, 0, 0.1);
}
+
.mx_UserPill_selected {
background-color: #0dbd8b !important;
}
+
.mx_EventTile_content .markdown-body a.mx_AtRoomPill,
.mx_EventTile_content .mx_AtRoomPill,
.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
@@ -10546,6 +13840,7 @@ a.mx_Pill {
color: #fff;
background-color: #ff4b55;
}
+
.mx_EventTile_content .markdown-body a.mx_GroupPill,
.mx_EventTile_content .markdown-body a.mx_RoomPill,
.mx_GroupPill,
@@ -10553,11 +13848,13 @@ a.mx_Pill {
color: #fff;
background-color: #aaa;
}
+
.mx_EventTile_body .mx_GroupPill,
.mx_EventTile_body .mx_RoomPill,
.mx_EventTile_body .mx_UserPill {
cursor: pointer;
}
+
.mx_AtRoomPill .mx_BaseAvatar,
.mx_GroupPill .mx_BaseAvatar,
.mx_RoomPill .mx_BaseAvatar,
@@ -10572,12 +13869,15 @@ a.mx_Pill {
border-radius: 10rem;
margin-right: 0.24rem;
}
+
.mx_Markdown_BOLD {
font-weight: 700;
}
+
.mx_Markdown_ITALIC {
font-style: italic;
}
+
.mx_Markdown_CODE {
padding: 0.2em 0;
margin: 0;
@@ -10585,28 +13885,34 @@ a.mx_Pill {
background-color: rgba(0, 0, 0, 0.04);
border-radius: 3px;
}
+
.mx_Markdown_HR {
display: block;
background: #e9e9e9;
}
+
.mx_Markdown_STRIKETHROUGH {
text-decoration: line-through;
}
+
.mx_RoleButton {
margin-left: 4px;
margin-right: 4px;
cursor: pointer;
display: inline-block;
}
+
.mx_RoleButton object {
pointer-events: none;
}
+
.mx_RoleButton_tooltip {
display: inline-block;
position: relative;
top: -25px;
left: 6px;
}
+
.mx_RoomAliasField {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
@@ -10620,31 +13926,38 @@ a.mx_Pill {
min-width: 0;
max-width: 100%;
}
+
.mx_RoomAliasField input {
width: 150px;
padding-left: 0;
padding-right: 0;
}
+
.mx_RoomAliasField input::-webkit-input-placeholder {
color: #888;
font-weight: 400;
}
+
.mx_RoomAliasField input::-moz-placeholder {
color: #888;
font-weight: 400;
}
+
.mx_RoomAliasField input:-ms-input-placeholder {
color: #888;
font-weight: 400;
}
+
.mx_RoomAliasField input::-ms-input-placeholder {
color: #888;
font-weight: 400;
}
+
.mx_RoomAliasField input::placeholder {
color: #888;
font-weight: 400;
}
+
.mx_RoomAliasField .mx_Field_postfix,
.mx_RoomAliasField .mx_Field_prefix {
color: #888;
@@ -10656,12 +13969,14 @@ a.mx_Pill {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
+
.mx_RoomAliasField .mx_Field_postfix {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: calc(100% - 180px);
}
+
.mx_SSOButtons {
display: -webkit-box;
display: -ms-flexbox;
@@ -10672,9 +13987,11 @@ a.mx_Pill {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_SSOButtons .mx_SSOButtons_row + .mx_SSOButtons_row {
margin-top: 16px;
}
+
.mx_SSOButtons .mx_SSOButton {
position: relative;
width: 100%;
@@ -10687,6 +14004,7 @@ a.mx_Pill {
border: 1px solid #e7e7e7;
color: #2e2f32;
}
+
.mx_SSOButtons .mx_SSOButton > img {
-o-object-fit: contain;
object-fit: contain;
@@ -10694,15 +14012,18 @@ a.mx_Pill {
left: 8px;
top: 4px;
}
+
.mx_SSOButtons .mx_SSOButton_default {
color: #0dbd8b;
background-color: #fff;
border-color: #0dbd8b;
}
+
.mx_SSOButtons .mx_SSOButton_default.mx_SSOButton_primary {
color: #fff;
background-color: #0dbd8b;
}
+
.mx_SSOButtons .mx_SSOButton_mini {
-webkit-box-sizing: border-box;
box-sizing: border-box;
@@ -10711,13 +14032,16 @@ a.mx_Pill {
min-width: 50px;
padding: 12px;
}
+
.mx_SSOButtons .mx_SSOButton_mini > img {
left: 12px;
top: 12px;
}
+
.mx_SSOButtons .mx_SSOButton_mini + .mx_SSOButton_mini {
margin-left: 16px;
}
+
.mx_ServerPicker {
margin-bottom: 14px;
border-bottom: 1px solid rgba(141, 151, 165, 0.2);
@@ -10728,12 +14052,14 @@ a.mx_Pill {
font-size: 1.4rem;
line-height: 2rem;
}
+
.mx_ServerPicker > h3 {
font-weight: 600;
margin: 0 0 20px;
grid-column: 1;
grid-row: 1;
}
+
.mx_ServerPicker .mx_ServerPicker_help {
width: 20px;
height: 20px;
@@ -10747,6 +14073,7 @@ a.mx_Pill {
font-size: 16px;
position: relative;
}
+
.mx_ServerPicker .mx_ServerPicker_help:before {
content: "";
width: 24px;
@@ -10764,18 +14091,21 @@ a.mx_Pill {
mask-image: url(../../img/element-icons/i.80d84f3.svg);
background: #fff;
}
+
.mx_ServerPicker .mx_ServerPicker_server {
color: #232f32;
grid-column: 1;
grid-row: 2;
margin-bottom: 16px;
}
+
.mx_ServerPicker .mx_ServerPicker_change {
padding: 0;
font-size: inherit;
grid-column: 2;
grid-row: 2;
}
+
.mx_ServerPicker .mx_ServerPicker_desc {
margin-top: -12px;
color: #8d99a5;
@@ -10783,9 +14113,11 @@ a.mx_Pill {
grid-row: 3;
margin-bottom: 16px;
}
+
.mx_ServerPicker_helpDialog .mx_Dialog_content {
width: 456px;
}
+
.mx_Slider {
position: relative;
margin: 0;
@@ -10793,6 +14125,7 @@ a.mx_Pill {
-ms-flex-positive: 1;
flex-grow: 1;
}
+
.mx_Slider_dotContainer {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
@@ -10802,12 +14135,14 @@ a.mx_Pill {
-ms-flex-pack: justify;
justify-content: space-between;
}
+
.mx_Slider_bar,
.mx_Slider_dotContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_Slider_bar {
-webkit-box-sizing: border-box;
box-sizing: border-box;
@@ -10819,12 +14154,14 @@ a.mx_Pill {
-ms-flex-align: center;
align-items: center;
}
+
.mx_Slider_bar > hr {
width: 100%;
height: 0.4em;
background-color: #c1c9d6;
border: 0;
}
+
.mx_Slider_selection {
display: -webkit-box;
display: -ms-flexbox;
@@ -10837,6 +14174,7 @@ a.mx_Pill {
position: absolute;
pointer-events: none;
}
+
.mx_Slider_selectionDot {
position: absolute;
width: 1.1em;
@@ -10847,10 +14185,12 @@ a.mx_Pill {
box-shadow: 0 0 6px #d3d3d3;
z-index: 10;
}
+
.mx_Slider_selection > hr {
margin: 0;
border: 0.2em solid #0dbd8b;
}
+
.mx_Slider_dot {
height: 1em;
width: 1em;
@@ -10858,9 +14198,11 @@ a.mx_Pill {
background-color: #c1c9d6;
z-index: 0;
}
+
.mx_Slider_dotActive {
background-color: #0dbd8b;
}
+
.mx_Slider_dotValue {
display: -webkit-box;
display: -ms-flexbox;
@@ -10874,9 +14216,11 @@ a.mx_Pill {
align-items: center;
color: #c1c9d6;
}
+
.mx_Slider_labelContainer {
width: 1em;
}
+
.mx_Slider_label {
position: relative;
width: -webkit-fit-content;
@@ -10884,6 +14228,7 @@ a.mx_Pill {
width: fit-content;
left: -50%;
}
+
.mx_Spinner {
display: -webkit-box;
display: -ms-flexbox;
@@ -10900,9 +14245,43 @@ a.mx_Pill {
-ms-flex: 1;
flex: 1;
}
+
.mx_MatrixChat_middlePanel .mx_Spinner {
height: auto;
}
+
+@-webkit-keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ to {
+ -webkit-transform: rotate(1turn);
+ transform: rotate(1turn);
+ }
+}
+
+@keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ to {
+ -webkit-transform: rotate(1turn);
+ transform: rotate(1turn);
+ }
+}
+
+.mx_Spinner_icon {
+ background-color: #2e2f32;
+ -webkit-mask: url(../../img/spinner.5a0438d.svg);
+ mask: url(../../img/spinner.5a0438d.svg);
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-animation: spin 1.1s steps(12) infinite;
+ animation: spin 1.1s steps(12) infinite;
+}
+
.mx_Checkbox {
display: -webkit-box;
display: -ms-flexbox;
@@ -10911,6 +14290,7 @@ a.mx_Pill {
-ms-flex-align: start;
align-items: flex-start;
}
+
.mx_Checkbox input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
@@ -10918,6 +14298,7 @@ a.mx_Pill {
margin: 0;
padding: 0;
}
+
.mx_Checkbox input[type="checkbox"] + label {
display: -webkit-box;
display: -ms-flexbox;
@@ -10929,6 +14310,7 @@ a.mx_Pill {
-ms-flex-positive: 1;
flex-grow: 1;
}
+
.mx_Checkbox input[type="checkbox"] + label > .mx_Checkbox_background {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
@@ -10944,6 +14326,7 @@ a.mx_Pill {
box-sizing: border-box;
border-radius: 0.4rem;
}
+
.mx_Checkbox input[type="checkbox"] + label > .mx_Checkbox_background img {
display: none;
height: 100%;
@@ -10951,10 +14334,12 @@ a.mx_Pill {
-webkit-filter: invert(100%);
filter: invert(100%);
}
+
.mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background {
background: #0dbd8b;
border-color: #0dbd8b;
}
+
.mx_Checkbox
input[type="checkbox"]:checked
+ label
@@ -10962,13 +14347,16 @@ a.mx_Pill {
img {
display: block;
}
+
.mx_Checkbox input[type="checkbox"] + label > :not(.mx_Checkbox_background) {
margin-left: 10px;
}
+
.mx_Checkbox input[type="checkbox"]:disabled + label {
opacity: 0.5;
cursor: not-allowed;
}
+
.mx_Checkbox
input[type="checkbox"]:checked:disabled
+ label
@@ -10976,6 +14364,7 @@ a.mx_Pill {
background-color: #0dbd8b;
border-color: #0dbd8b;
}
+
.mx_Checkbox
input[type="checkbox"].focus-visible
+ label
@@ -10984,6 +14373,7 @@ a.mx_Pill {
outline-style: solid;
outline-color: Highlight;
}
+
@media (-webkit-min-device-pixel-ratio: 0) {
.mx_Checkbox
input[type="checkbox"].focus-visible
@@ -10993,12 +14383,14 @@ a.mx_Pill {
outline-style: auto;
}
}
+
.mx_RadioButton {
position: relative;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
+
.mx_RadioButton,
.mx_RadioButton > .mx_RadioButton_content {
display: -webkit-box;
@@ -11008,6 +14400,7 @@ a.mx_Pill {
-ms-flex-positive: 1;
flex-grow: 1;
}
+
.mx_RadioButton > .mx_RadioButton_content {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
@@ -11016,6 +14409,7 @@ a.mx_Pill {
margin-left: 8px;
margin-right: 8px;
}
+
.mx_RadioButton .mx_RadioButton_spacer {
-ms-flex-negative: 0;
flex-shrink: 0;
@@ -11025,14 +14419,16 @@ a.mx_Pill {
height: 1.6rem;
width: 1.6rem;
}
-.mx_RadioButton > input[type="radio"] {
+
+.mx_RadioButton input[type="radio"] {
margin: 0;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
-.mx_RadioButton > input[type="radio"] + div {
+
+.mx_RadioButton input[type="radio"] + div {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
@@ -11055,55 +14451,140 @@ a.mx_Pill {
border: 0.15rem solid #61708b;
border-radius: 1.6rem;
}
-.mx_RadioButton > input[type="radio"] + div > div {
+
+.mx_RadioButton input[type="radio"] + div > div {
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 0.8rem;
width: 0.8rem;
border-radius: 0.8rem;
}
-.mx_RadioButton > input[type="radio"].focus-visible + div {
+
+.mx_RadioButton input[type="radio"].focus-visible + div {
outline-width: 2px;
outline-style: solid;
outline-color: Highlight;
}
+
@media (-webkit-min-device-pixel-ratio: 0) {
- .mx_RadioButton > input[type="radio"].focus-visible + div {
+ .mx_RadioButton input[type="radio"].focus-visible + div {
outline-color: -webkit-focus-ring-color;
outline-style: auto;
}
}
-.mx_RadioButton > input[type="radio"]:checked + div {
+
+.mx_RadioButton input[type="radio"]:checked + div {
border-color: #0dbd8b;
}
-.mx_RadioButton > input[type="radio"]:checked + div > div {
+
+.mx_RadioButton input[type="radio"]:checked + div > div {
background: #0dbd8b;
}
-.mx_RadioButton > input[type="radio"]:disabled + div,
-.mx_RadioButton > input[type="radio"]:disabled + div + span {
+
+.mx_RadioButton input[type="radio"]:disabled + div,
+.mx_RadioButton input[type="radio"]:disabled + div + span {
opacity: 0.5;
cursor: not-allowed;
}
-.mx_RadioButton > input[type="radio"]:disabled + div {
+
+.mx_RadioButton input[type="radio"]:disabled + div {
border-color: #61708b;
}
-.mx_RadioButton > input[type="radio"]:checked:disabled + div > div {
+
+.mx_RadioButton input[type="radio"]:checked:disabled + div > div {
background-color: #61708b;
}
+
+.mx_RadioButton .mx_RadioButton_innerLabel {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ position: relative;
+ top: 4px;
+}
+
.mx_RadioButton_outlined {
border: 1px solid #e3e8f0;
border-radius: 8px;
}
+
.mx_RadioButton_checked {
border-color: #0dbd8b;
}
+
.mx_SyntaxHighlight {
background: none !important;
color: #747474 !important;
}
+
+.mx_TagComposer .mx_TagComposer_input {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.mx_TagComposer .mx_TagComposer_input .mx_Field {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ margin: 0;
+}
+
+.mx_TagComposer .mx_TagComposer_input .mx_AccessibleButton {
+ min-width: 70px;
+ padding: 0;
+ margin-left: 16px;
+}
+
+.mx_TagComposer .mx_TagComposer_input .mx_AccessibleButton,
+.mx_TagComposer .mx_TagComposer_input .mx_Field,
+.mx_TagComposer .mx_TagComposer_input .mx_Field input {
+ border-radius: 8px;
+}
+
+.mx_TagComposer .mx_TagComposer_tags {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ margin-top: 12px;
+}
+
+.mx_TagComposer .mx_TagComposer_tags .mx_TagComposer_tag {
+ padding: 6px 8px 8px 12px;
+ position: relative;
+ margin-right: 12px;
+ margin-top: 12px;
+}
+
+.mx_TagComposer .mx_TagComposer_tags .mx_TagComposer_tag:before {
+ content: "";
+ border-radius: 20px;
+ background-color: #8d99a5;
+ opacity: 0.15;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+}
+
+.mx_TagComposer .mx_TagComposer_tags .mx_AccessibleButton {
+ background-image: url(../../img/subtract.880420e.svg);
+ width: 16px;
+ height: 16px;
+ margin-left: 8px;
+ display: inline-block;
+ vertical-align: middle;
+ cursor: pointer;
+}
+
.mx_TextWithTooltip_tooltip {
display: none;
}
+
.mx_ToggleSwitch {
-webkit-transition: background-color 0.2s ease-out 0.1s;
transition: background-color 0.2s ease-out 0.1s;
@@ -11114,16 +14595,20 @@ a.mx_Pill {
background-color: #c1c9d6;
opacity: 0.5;
}
+
.mx_ToggleSwitch_enabled {
cursor: pointer;
opacity: 1;
}
+
.mx_ToggleSwitch.mx_ToggleSwitch_on {
background-color: #0dbd8b;
}
+
.mx_ToggleSwitch.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
left: calc(100% - 2rem);
}
+
.mx_ToggleSwitch_ball {
position: relative;
width: 2rem;
@@ -11134,6 +14619,7 @@ a.mx_Pill {
transition: left 0.15s ease-out 0.1s;
left: 0;
}
+
@-webkit-keyframes mx_fadein {
0% {
opacity: 0;
@@ -11142,6 +14628,7 @@ a.mx_Pill {
opacity: 1;
}
}
+
@keyframes mx_fadein {
0% {
opacity: 0;
@@ -11150,6 +14637,7 @@ a.mx_Pill {
opacity: 1;
}
}
+
@-webkit-keyframes mx_fadeout {
0% {
opacity: 1;
@@ -11158,6 +14646,7 @@ a.mx_Pill {
opacity: 0;
}
}
+
@keyframes mx_fadeout {
0% {
opacity: 1;
@@ -11166,6 +14655,7 @@ a.mx_Pill {
opacity: 0;
}
}
+
.mx_Tooltip_chevron {
position: absolute;
left: -7px;
@@ -11176,6 +14666,7 @@ a.mx_Pill {
border-right: 7px solid #e7e7e7;
border-bottom: 7px solid transparent;
}
+
.mx_Tooltip_chevron:after {
content: "";
width: 0;
@@ -11187,6 +14678,7 @@ a.mx_Pill {
top: -6px;
left: 1px;
}
+
.mx_Tooltip {
position: fixed;
border-radius: 8px;
@@ -11206,34 +14698,42 @@ a.mx_Pill {
border: 0;
text-align: center;
}
+
.mx_Tooltip,
.mx_Tooltip .mx_Tooltip_chevron {
display: none;
}
+
.mx_Tooltip.mx_Tooltip_visible {
-webkit-animation: mx_fadein 0.2s forwards;
animation: mx_fadein 0.2s forwards;
}
+
.mx_Tooltip.mx_Tooltip_invisible {
-webkit-animation: mx_fadeout 0.1s forwards;
animation: mx_fadeout 0.1s forwards;
}
+
.mx_Field_tooltip {
background-color: #fff;
color: #2e2f32;
border: 1px solid #e7e7e7;
text-align: unset;
}
+
.mx_Field_tooltip .mx_Tooltip_chevron {
display: unset;
}
+
.mx_Tooltip_title {
font-weight: 600;
}
+
.mx_Tooltip_sub {
opacity: 0.7;
margin-top: 4px;
}
+
.mx_TooltipButton {
display: inline-block;
width: 11px;
@@ -11249,38 +14749,47 @@ a.mx_Pill {
text-align: center;
cursor: pointer;
}
+
.mx_TooltipButton:hover {
opacity: 1;
}
+
.mx_TooltipButton_container {
position: relative;
top: -18px;
left: 4px;
}
+
.mx_TooltipButton_helpText {
width: 400px;
text-align: start;
line-height: 17px !important;
}
+
.mx_Validation {
position: relative;
}
+
.mx_Validation_details {
padding-left: 20px;
margin: 0;
}
+
.mx_Validation_description + .mx_Validation_details {
margin: 1em 0 0;
}
+
.mx_Validation_detail {
position: relative;
font-weight: 400;
list-style: none;
margin-bottom: 0.5em;
}
+
.mx_Validation_detail:last-child {
margin-bottom: 0;
}
+
.mx_Validation_detail:before {
content: "";
position: absolute;
@@ -11295,22 +14804,27 @@ a.mx_Pill {
-webkit-mask-size: contain;
mask-size: contain;
}
+
.mx_Validation_detail.mx_Validation_valid {
color: #0dbd8b;
}
+
.mx_Validation_detail.mx_Validation_valid:before {
-webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
mask-image: url(../../img/feather-customised/check.5745b4e.svg);
background-color: #0dbd8b;
}
+
.mx_Validation_detail.mx_Validation_invalid {
color: #ff4b55;
}
+
.mx_Validation_detail.mx_Validation_invalid:before {
-webkit-mask-image: url(../../img/feather-customised/x.9662221.svg);
mask-image: url(../../img/feather-customised/x.9662221.svg);
background-color: #ff4b55;
}
+
.mx_EmojiPicker {
width: 340px;
height: 450px;
@@ -11323,6 +14837,7 @@ a.mx_Pill {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_EmojiPicker_body {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -11331,10 +14846,12 @@ a.mx_Pill {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
+
.mx_EmojiPicker_header {
padding: 4px 8px 0;
border-bottom: 1px solid #e9edf1;
}
+
.mx_EmojiPicker_anchor {
padding: 8px 8px 6px;
border: none;
@@ -11344,13 +14861,16 @@ a.mx_Pill {
width: 36px;
height: 38px;
}
+
.mx_EmojiPicker_anchor:not(:disabled) {
cursor: pointer;
}
+
.mx_EmojiPicker_anchor:not(:disabled):hover {
background-color: #ddd;
border-bottom: 2px solid #0dbd8b;
}
+
.mx_EmojiPicker_anchor:before {
background-color: #2e2f32;
content: "";
@@ -11362,52 +14882,65 @@ a.mx_Pill {
width: 100%;
height: 100%;
}
+
.mx_EmojiPicker_anchor:disabled:before {
background-color: #ddd;
}
+
.mx_EmojiPicker_anchor_activity:before {
-webkit-mask-image: url(../../img/emojipicker/activity.921ec9f.svg);
mask-image: url(../../img/emojipicker/activity.921ec9f.svg);
}
+
.mx_EmojiPicker_anchor_custom:before {
-webkit-mask-image: url(../../img/emojipicker/custom.e1cd0fd.svg);
mask-image: url(../../img/emojipicker/custom.e1cd0fd.svg);
}
+
.mx_EmojiPicker_anchor_flags:before {
-webkit-mask-image: url(../../img/emojipicker/flags.1a8855e.svg);
mask-image: url(../../img/emojipicker/flags.1a8855e.svg);
}
+
.mx_EmojiPicker_anchor_foods:before {
-webkit-mask-image: url(../../img/emojipicker/foods.c6b220a.svg);
mask-image: url(../../img/emojipicker/foods.c6b220a.svg);
}
+
.mx_EmojiPicker_anchor_nature:before {
-webkit-mask-image: url(../../img/emojipicker/nature.6540b99.svg);
mask-image: url(../../img/emojipicker/nature.6540b99.svg);
}
+
.mx_EmojiPicker_anchor_objects:before {
-webkit-mask-image: url(../../img/emojipicker/objects.4d34f58.svg);
mask-image: url(../../img/emojipicker/objects.4d34f58.svg);
}
+
.mx_EmojiPicker_anchor_people:before {
-webkit-mask-image: url(../../img/emojipicker/people.e918580.svg);
mask-image: url(../../img/emojipicker/people.e918580.svg);
}
+
.mx_EmojiPicker_anchor_places:before {
-webkit-mask-image: url(../../img/emojipicker/places.7310322.svg);
mask-image: url(../../img/emojipicker/places.7310322.svg);
}
+
.mx_EmojiPicker_anchor_recent:before {
-webkit-mask-image: url(../../img/emojipicker/recent.13b42e2.svg);
mask-image: url(../../img/emojipicker/recent.13b42e2.svg);
}
+
.mx_EmojiPicker_anchor_symbols:before {
-webkit-mask-image: url(../../img/emojipicker/symbols.15a557d.svg);
mask-image: url(../../img/emojipicker/symbols.15a557d.svg);
}
+
.mx_EmojiPicker_anchor_visible {
border-bottom: 2px solid #0dbd8b;
}
+
.mx_EmojiPicker_search {
margin: 8px;
border-radius: 4px;
@@ -11417,6 +14950,7 @@ a.mx_Pill {
display: -ms-flexbox;
display: flex;
}
+
.mx_EmojiPicker_search input {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -11425,6 +14959,7 @@ a.mx_Pill {
padding: 8px 12px;
border-radius: 4px 0;
}
+
.mx_EmojiPicker_search button {
border: none;
background-color: inherit;
@@ -11435,16 +14970,20 @@ a.mx_Pill {
width: 32px;
height: 32px;
}
+
.mx_EmojiPicker_search_clear {
cursor: pointer;
}
+
.mx_EmojiPicker_search_icon {
width: 16px;
margin: 8px;
}
+
.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear) {
pointer-events: none;
}
+
.mx_EmojiPicker_search_icon:after {
-webkit-mask: url(../../img/emojipicker/search.973c315.svg) no-repeat;
mask: url(../../img/emojipicker/search.973c315.svg) no-repeat;
@@ -11456,10 +14995,12 @@ a.mx_Pill {
width: 100%;
height: 100%;
}
+
.mx_EmojiPicker_search_clear:after {
-webkit-mask-image: url(../../img/emojipicker/delete.f7344c5.svg);
mask-image: url(../../img/emojipicker/delete.f7344c5.svg);
}
+
.mx_EmojiPicker_category {
padding: 0 12px;
display: -webkit-box;
@@ -11473,20 +15014,24 @@ a.mx_Pill {
-ms-flex-align: center;
align-items: center;
}
+
.mx_EmojiPicker_category_label {
width: 304px;
}
+
.mx_EmojiPicker_list {
width: 304px;
padding: 0;
margin: 0;
}
+
.mx_EmojiPicker_item_wrapper {
display: inline-block;
list-style: none;
width: 38px;
cursor: pointer;
}
+
.mx_EmojiPicker_item {
display: inline-block;
font-size: 2rem;
@@ -11498,20 +15043,24 @@ a.mx_Pill {
text-align: center;
border-radius: 4px;
}
+
.mx_EmojiPicker_item:hover {
background-color: #ddd;
}
+
.mx_EmojiPicker_item_selected {
color: rgba(0, 0, 0, 0.5);
border: 1px solid #0dbd8b;
padding: 4px;
}
+
.mx_EmojiPicker_category_label,
.mx_EmojiPicker_preview_name {
font-size: 1.6rem;
font-weight: 600;
margin: 0;
}
+
.mx_EmojiPicker_footer {
border-top: 1px solid #e9edf1;
min-height: 72px;
@@ -11522,10 +15071,12 @@ a.mx_Pill {
-ms-flex-align: center;
align-items: center;
}
+
.mx_EmojiPicker_preview_emoji {
font-size: 3.2rem;
padding: 8px 16px;
}
+
.mx_EmojiPicker_preview_text {
display: -webkit-box;
display: -ms-flexbox;
@@ -11535,17 +15086,21 @@ a.mx_Pill {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_EmojiPicker_name {
text-transform: capitalize;
}
+
.mx_EmojiPicker_shortcode {
color: #747474;
font-size: 1.4rem;
}
+
.mx_EmojiPicker_shortcode:after,
.mx_EmojiPicker_shortcode:before {
content: ":";
}
+
.mx_EmojiPicker_quick {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
@@ -11554,9 +15109,11 @@ a.mx_Pill {
-ms-flex-pack: distribute;
justify-content: space-around;
}
+
.mx_EmojiPicker_quick_header .mx_EmojiPicker_name {
margin-right: 4px;
}
+
.mx_GroupPublicity_toggle {
display: -webkit-box;
display: -ms-flexbox;
@@ -11566,6 +15123,7 @@ a.mx_Pill {
align-items: center;
margin: 8px;
}
+
.mx_GroupPublicity_toggle .mx_GroupTile {
display: -webkit-box;
display: -ms-flexbox;
@@ -11578,9 +15136,11 @@ a.mx_Pill {
box-sizing: border-box;
width: 100%;
}
+
.mx_GroupPublicity_toggle .mx_ToggleSwitch {
float: right;
}
+
.mx_GroupRoomTile {
position: relative;
color: #2e2f32;
@@ -11592,20 +15152,228 @@ a.mx_Pill {
-ms-flex-align: center;
align-items: center;
}
+
.mx_GroupRoomList_wrapper {
padding: 10px;
}
+
.mx_GroupUserSettings_groupPublicity_scrollbox {
height: 200px;
border: 1px solid transparent;
border-radius: 3px;
overflow: hidden;
}
+
+.mx_CallEvent {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ background-color: #f2f5f8;
+ border-radius: 8px;
+ margin: 10px auto;
+ max-width: 75%;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ height: 60px;
+}
+
+.mx_CallEvent.mx_CallEvent_voice
+ .mx_CallEvent_content_button_answer
+ span:before,
+.mx_CallEvent.mx_CallEvent_voice
+ .mx_CallEvent_content_button_callBack
+ span:before,
+.mx_CallEvent.mx_CallEvent_voice .mx_CallEvent_type_icon:before {
+ -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+ mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
+}
+
+.mx_CallEvent.mx_CallEvent_video
+ .mx_CallEvent_content_button_answer
+ span:before,
+.mx_CallEvent.mx_CallEvent_video
+ .mx_CallEvent_content_button_callBack
+ span:before,
+.mx_CallEvent.mx_CallEvent_video .mx_CallEvent_type_icon:before {
+ -webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
+ mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
+}
+
+.mx_CallEvent .mx_CallEvent_info {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-left: 12px;
+}
+
+.mx_CallEvent .mx_CallEvent_info .mx_CallEvent_info_basic {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ margin-left: 10px;
+}
+
+.mx_CallEvent .mx_CallEvent_info .mx_CallEvent_info_basic .mx_CallEvent_sender {
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 1.8rem;
+ margin-bottom: 3px;
+}
+
+.mx_CallEvent .mx_CallEvent_info .mx_CallEvent_info_basic .mx_CallEvent_type {
+ font-weight: 400;
+ color: #737d8c;
+ font-size: 1.2rem;
+ line-height: 1.3rem;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.mx_CallEvent
+ .mx_CallEvent_info
+ .mx_CallEvent_info_basic
+ .mx_CallEvent_type
+ .mx_CallEvent_type_icon {
+ height: 13px;
+ width: 13px;
+ margin-right: 5px;
+}
+
+.mx_CallEvent
+ .mx_CallEvent_info
+ .mx_CallEvent_info_basic
+ .mx_CallEvent_type
+ .mx_CallEvent_type_icon:before {
+ content: "";
+ position: absolute;
+ height: 13px;
+ width: 13px;
+ background-color: #8d99a5;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
+
+.mx_CallEvent .mx_CallEvent_content {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #737d8c;
+ margin-right: 16px;
+}
+
+.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_content_button {
+ height: 24px;
+ padding: 0 12px;
+ margin-left: 8px;
+}
+
+.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_content_button span {
+ padding: 8px 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_content_button span:before {
+ content: "";
+ display: inline-block;
+ background-color: #fff;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 16px;
+ mask-size: 16px;
+ width: 16px;
+ height: 16px;
+ margin-right: 8px;
+}
+
+.mx_CallEvent
+ .mx_CallEvent_content
+ .mx_CallEvent_content_button_reject
+ span:before {
+ -webkit-mask-image: url(../../img/element-icons/call/hangup.a207e54.svg);
+ mask-image: url(../../img/element-icons/call/hangup.a207e54.svg);
+}
+
+.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_content_tooltip {
+ margin-right: 5px;
+}
+
+.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_iconButton {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ margin-right: 8px;
+}
+
+.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_iconButton:before {
+ content: "";
+ height: 16px;
+ width: 16px;
+ background-color: #8d99a5;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+
+.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_silence:before {
+ -webkit-mask-image: url(../../img/voip/silence.08cd2d6.svg);
+ mask-image: url(../../img/voip/silence.08cd2d6.svg);
+}
+
+.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_unSilence:before {
+ -webkit-mask-image: url(../../img/voip/un-silence.cebdd12.svg);
+ mask-image: url(../../img/voip/un-silence.cebdd12.svg);
+}
+
.mx_CreateEvent:before {
background-color: #91a1c0;
-webkit-mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
}
+
.mx_DateSeparator {
clear: both;
margin: 4px 0;
@@ -11618,6 +15386,7 @@ a.mx_Pill {
font-size: 1.4rem;
color: #9e9e9e;
}
+
.mx_DateSeparator > hr {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
@@ -11626,12 +15395,14 @@ a.mx_Pill {
border: none;
border-bottom: 1px solid transparent;
}
+
.mx_DateSeparator > div {
margin: 0 25px;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
+
.mx_EventTileBubble {
background-color: #f2f5f8;
padding: 10px;
@@ -11644,6 +15415,7 @@ a.mx_Pill {
grid-template-columns: 24px minmax(0, 1fr) -webkit-min-content;
grid-template-columns: 24px minmax(0, 1fr) min-content;
}
+
.mx_EventTileBubble:after,
.mx_EventTileBubble:before {
position: relative;
@@ -11664,30 +15436,37 @@ a.mx_Pill {
mask-size: contain;
margin-top: 4px;
}
+
.mx_EventTileBubble .mx_EventTileBubble_subtitle,
.mx_EventTileBubble .mx_EventTileBubble_title {
overflow-wrap: break-word;
}
+
.mx_EventTileBubble .mx_EventTileBubble_title {
font-weight: 600;
font-size: 1.5rem;
grid-column: 2;
grid-row: 1;
}
+
.mx_EventTileBubble .mx_EventTileBubble_subtitle {
font-size: 1.2rem;
grid-column: 2;
grid-row: 2;
}
+
.mx_MEmoteBody {
white-space: pre-wrap;
}
+
.mx_MEmoteBody_sender {
cursor: pointer;
}
+
.mx_MFileBody_download {
color: #0dbd8b;
}
+
.mx_MFileBody_download .mx_MFileBody_download_icon {
width: 12px;
height: 12px;
@@ -11702,11 +15481,13 @@ a.mx_Pill {
background-color: #0dbd8b;
display: inline-block;
}
+
.mx_MFileBody_download a {
color: #0dbd8b;
text-decoration: none;
cursor: pointer;
}
+
.mx_MFileBody_download object {
margin-left: -16px;
padding-right: 4px;
@@ -11714,6 +15495,7 @@ a.mx_Pill {
vertical-align: middle;
pointer-events: none;
}
+
.mx_MFileBody_download iframe {
margin: 0;
padding: 0;
@@ -11721,15 +15503,9 @@ a.mx_Pill {
width: 100%;
height: 1.5em;
}
-.mx_MFileBody_info {
- background-color: #e3e8f0;
- border-radius: 12px;
- width: 243px;
- padding: 6px 12px;
- color: #737d8c;
-}
+
.mx_MFileBody_info .mx_MFileBody_info_icon {
- background-color: #fff;
+ background-color: #f4f6fa;
border-radius: 20px;
display: inline-block;
width: 32px;
@@ -11738,6 +15514,7 @@ a.mx_Pill {
vertical-align: middle;
margin-right: 12px;
}
+
.mx_MFileBody_info .mx_MFileBody_info_icon:before {
content: "";
-webkit-mask-repeat: no-repeat;
@@ -11746,15 +15523,16 @@ a.mx_Pill {
mask-position: center;
-webkit-mask-size: cover;
mask-size: cover;
- -webkit-mask-image: url(../icons/attach.svg);
- mask-image: url(../icons/attach.svg);
+ -webkit-mask-image: url(../../img/element-icons/room/composer/attach.359c84e.svg);
+ mask-image: url(../../img/element-icons/room/composer/attach.359c84e.svg);
background-color: #737d8c;
- width: 13px;
+ width: 15px;
height: 15px;
position: absolute;
top: 8px;
- left: 9px;
+ left: 8px;
}
+
.mx_MFileBody_info .mx_MFileBody_info_filename {
text-overflow: ellipsis;
overflow: hidden;
@@ -11763,31 +15541,31 @@ a.mx_Pill {
width: calc(100% - 44px);
vertical-align: middle;
}
-.mx_MImageBody {
- display: block;
- margin-right: 34px;
-}
+
.mx_MImageBody_thumbnail {
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
+ -o-object-fit: contain;
+ object-fit: contain;
+ border-radius: 4px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.mx_MImageBody_thumbnail > div > canvas {
border-radius: 4px;
}
+
.mx_MImageBody_thumbnail_container {
overflow: hidden;
position: relative;
}
-.mx_MImageBody_thumbnail_spinner {
- position: absolute;
- left: 50%;
- top: 50%;
-}
-.mx_MImageBody_thumbnail_spinner > * {
- -webkit-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
-}
+
.mx_MImageBody_gifLabel {
position: absolute;
display: block;
@@ -11800,6 +15578,7 @@ a.mx_Pill {
color: #fff;
pointer-events: none;
}
+
.mx_HiddenImagePlaceholder {
position: absolute;
left: 0;
@@ -11819,9 +15598,11 @@ a.mx_Pill {
cursor: pointer;
background-color: #f3f8fd;
}
+
.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button {
color: #0dbd8b;
}
+
.mx_HiddenImagePlaceholder
.mx_HiddenImagePlaceholder_button
span.mx_HiddenImagePlaceholder_eye {
@@ -11833,30 +15614,64 @@ a.mx_Pill {
width: 18px;
height: 14px;
}
+
.mx_HiddenImagePlaceholder
.mx_HiddenImagePlaceholder_button
span:not(.mx_HiddenImagePlaceholder_eye) {
vertical-align: text-bottom;
}
+
.mx_EventTile:hover .mx_HiddenImagePlaceholder {
background-color: #fff;
}
+
+.mx_MImageReplyBody {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.mx_MImageReplyBody .mx_MImageBody_thumbnail_container {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ margin-right: 4px;
+}
+
+.mx_MImageReplyBody .mx_MImageReplyBody_info {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+
+.mx_MImageReplyBody .mx_MImageReplyBody_info .mx_MImageReplyBody_sender {
+ grid-area: sender;
+}
+
+.mx_MImageReplyBody .mx_MImageReplyBody_info .mx_MImageReplyBody_filename {
+ grid-area: filename;
+}
+
.mx_MJitsiWidgetEvent:before {
background-color: #91a1c0;
-webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
}
+
.mx_MNoticeBody {
white-space: pre-wrap;
opacity: 0.6;
}
+
.mx_MStickerBody_wrapper {
padding: 20px 0;
}
+
.mx_MStickerBody_tooltip {
position: absolute;
top: 50%;
}
+
.mx_MStickerBody_hidden {
max-width: 220px;
text-decoration: none;
@@ -11871,17 +15686,27 @@ a.mx_Pill {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_MTextBody {
white-space: pre-wrap;
}
+
span.mx_MVideoBody video.mx_MVideoBody {
max-width: 100%;
height: auto;
border-radius: 4px;
}
-.mx_MVoiceMessageBody {
- display: inline-block;
+
+.mx_MediaBody {
+ background-color: #e3e8f0;
+ border-radius: 12px;
+ max-width: 243px;
+ color: #737d8c;
+ font-size: 1.4rem;
+ line-height: 2.4rem;
+ padding: 6px 12px;
}
+
.mx_MessageActionBar {
position: absolute;
visibility: hidden;
@@ -11889,11 +15714,12 @@ span.mx_MVideoBody video.mx_MVideoBody {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- height: 24px;
+ height: 32px;
line-height: 2.4rem;
- border-radius: 4px;
+ border-radius: 8px;
background: #fff;
- top: -26px;
+ border: 1px solid #e7e7e7;
+ top: -32px;
right: 8px;
-webkit-user-select: none;
-moz-user-select: none;
@@ -11901,6 +15727,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
user-select: none;
z-index: 1;
}
+
.mx_MessageActionBar:before {
content: "";
position: absolute;
@@ -11911,29 +15738,25 @@ span.mx_MVideoBody video.mx_MVideoBody {
z-index: -1;
cursor: auto;
}
+
.mx_MessageActionBar > * {
white-space: nowrap;
display: inline-block;
position: relative;
- border: 1px solid #e9edf1;
- margin-left: -1px;
+ margin: 2px;
}
+
.mx_MessageActionBar > :hover {
- border-color: #ddd;
+ background: rgba(141, 151, 165, 0.2);
+ border-radius: 6px;
z-index: 1;
}
-.mx_MessageActionBar > :first-child {
- border-radius: 3px 0 0 3px;
-}
-.mx_MessageActionBar > :last-child {
- border-radius: 0 3px 3px 0;
-}
-.mx_MessageActionBar > :only-child {
- border-radius: 3px;
-}
+
.mx_MessageActionBar_maskButton {
- width: 27px;
+ width: 28px;
+ height: 28px;
}
+
.mx_MessageActionBar_maskButton:after {
content: "";
position: absolute;
@@ -11947,32 +15770,54 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
+ background-color: #737d8c;
+}
+
+.mx_MessageActionBar_maskButton:hover:after {
background-color: #2e2f32;
}
+
.mx_MessageActionBar_reactButton:after {
-webkit-mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
}
+
.mx_MessageActionBar_replyButton:after {
-webkit-mask-image: url(../../img/element-icons/room/message-bar/reply.5812741.svg);
mask-image: url(../../img/element-icons/room/message-bar/reply.5812741.svg);
}
+
.mx_MessageActionBar_editButton:after {
-webkit-mask-image: url(../../img/element-icons/room/message-bar/edit.688678e.svg);
mask-image: url(../../img/element-icons/room/message-bar/edit.688678e.svg);
}
+
.mx_MessageActionBar_optionsButton:after {
-webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
}
+
.mx_MessageActionBar_resendButton:after {
-webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
}
+
.mx_MessageActionBar_cancelButton:after {
- -webkit-mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
- mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
+ -webkit-mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
+ mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
}
+
+.mx_MessageActionBar_downloadButton:after {
+ -webkit-mask-size: 14px;
+ mask-size: 14px;
+ -webkit-mask-image: url(../../img/download.4f331f0.svg);
+ mask-image: url(../../img/download.4f331f0.svg);
+}
+
+.mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton:after {
+ background-color: transparent;
+}
+
.mx_MessageTimestamp {
color: #acacac;
font-size: 1rem;
@@ -11980,13 +15825,16 @@ span.mx_MVideoBody video.mx_MVideoBody {
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
+
.mx_MjolnirBody {
opacity: 0.4;
}
+
.mx_ReactionsRow {
margin: 6px 0;
color: #2e2f32;
}
+
.mx_ReactionsRow .mx_ReactionsRow_addReactionButton {
position: relative;
display: inline-block;
@@ -11995,7 +15843,9 @@ span.mx_MVideoBody video.mx_MVideoBody {
height: 24px;
vertical-align: middle;
margin-left: 4px;
+ margin-right: 4px;
}
+
.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:before {
content: "";
position: absolute;
@@ -12011,18 +15861,22 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
}
+
.mx_ReactionsRow
.mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active {
visibility: visible;
}
+
.mx_ReactionsRow
.mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active:before,
.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:hover:before {
background-color: #2e2f32;
}
+
.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
visibility: visible;
}
+
.mx_ReactionsRow_showAll {
text-decoration: none;
font-size: 1.2rem;
@@ -12030,13 +15884,16 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-left: 4px;
vertical-align: middle;
}
+
.mx_ReactionsRow_showAll:link,
.mx_ReactionsRow_showAll:visited {
color: #8d99a5;
}
+
.mx_ReactionsRow_showAll:hover {
color: #2e2f32;
}
+
.mx_ReactionsRowButton {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
@@ -12054,16 +15911,20 @@ span.mx_MVideoBody video.mx_MVideoBody {
user-select: none;
vertical-align: middle;
}
+
.mx_ReactionsRowButton:hover {
border-color: #ddd;
}
+
.mx_ReactionsRowButton.mx_ReactionsRowButton_selected {
background-color: #e9fff9;
border-color: #0dbd8b;
}
+
.mx_ReactionsRowButton.mx_AccessibleButton_disabled {
cursor: not-allowed;
}
+
.mx_ReactionsRowButton .mx_ReactionsRowButton_content {
max-width: 100px;
overflow: hidden;
@@ -12071,6 +15932,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
text-overflow: ellipsis;
padding-right: 4px;
}
+
.mx_RedactedBody {
white-space: pre-wrap;
color: #61708b;
@@ -12078,12 +15940,13 @@ span.mx_MVideoBody video.mx_MVideoBody {
padding-left: 20px;
position: relative;
}
+
.mx_RedactedBody:before {
height: 14px;
width: 14px;
background-color: #61708b;
- -webkit-mask-image: url(../icons/trash.svg);
- mask-image: url(../icons/trash.svg);
+ -webkit-mask-image: url(../../img/feather-customised/trash.custom.1e6ecd4.svg);
+ mask-image: url(../../img/feather-customised/trash.custom.1e6ecd4.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
@@ -12095,25 +15958,43 @@ span.mx_MVideoBody video.mx_MVideoBody {
top: 1px;
left: 0;
}
+
.mx_RoomAvatarEvent {
opacity: 0.5;
overflow-y: hidden;
}
+
.mx_RoomAvatarEvent_avatar {
display: inline;
position: relative;
top: 5px;
}
-.mx_SenderProfile_name {
+
+.mx_SenderProfile_displayName {
font-weight: 600;
}
+
+.mx_SenderProfile_mxid {
+ font-weight: 600;
+ font-size: 1.1rem;
+ margin-left: 5px;
+ opacity: 0.5;
+}
+
.mx_TextualEvent {
opacity: 0.5;
overflow-y: hidden;
}
+
+.mx_TextualEvent a {
+ color: #0dbd8b;
+ cursor: pointer;
+}
+
.mx_UnknownBody {
white-space: pre-wrap;
}
+
.mx_EventTile_content.mx_ViewSourceEvent {
display: -webkit-box;
display: -ms-flexbox;
@@ -12121,16 +16002,19 @@ span.mx_MVideoBody video.mx_MVideoBody {
opacity: 0.6;
font-size: 1.2rem;
}
+
.mx_EventTile_content.mx_ViewSourceEvent code,
.mx_EventTile_content.mx_ViewSourceEvent pre {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
+
.mx_EventTile_content.mx_ViewSourceEvent pre {
line-height: 1.2;
margin: 3.5px 0;
}
+
.mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle {
width: 12px;
-webkit-mask-repeat: no-repeat;
@@ -12144,6 +16028,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
}
+
.mx_EventTile_content.mx_ViewSourceEvent.mx_ViewSourceEvent_expanded
.mx_ViewSourceEvent_toggle {
-webkit-mask-position: 0 bottom;
@@ -12152,41 +16037,49 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
}
+
.mx_EventTile_content.mx_ViewSourceEvent:hover .mx_ViewSourceEvent_toggle {
visibility: visible;
}
+
.mx_cryptoEvent.mx_cryptoEvent_icon:before {
background-color: #fff;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
- -webkit-mask-size: 90%;
- mask-size: 90%;
+ -webkit-mask-size: 80%;
+ mask-size: 80%;
}
+
.mx_cryptoEvent.mx_cryptoEvent_icon:after,
.mx_cryptoEvent.mx_cryptoEvent_icon:before {
-webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
mask-image: url(../../img/e2e/normal.76f0c09.svg);
}
+
.mx_cryptoEvent.mx_cryptoEvent_icon:after {
background-color: #91a1c0;
}
+
.mx_cryptoEvent.mx_cryptoEvent_icon_verified:after {
-webkit-mask-image: url(../../img/e2e/verified.5be6c9f.svg);
mask-image: url(../../img/e2e/verified.5be6c9f.svg);
background-color: #0dbd8b;
}
+
.mx_cryptoEvent.mx_cryptoEvent_icon_warning:after {
-webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
mask-image: url(../../img/e2e/warning.78bb264.svg);
background-color: #ff4b55;
}
+
.mx_cryptoEvent .mx_cryptoEvent_buttons,
.mx_cryptoEvent .mx_cryptoEvent_state {
grid-column: 3;
grid-row: 1/3;
}
+
.mx_cryptoEvent .mx_cryptoEvent_buttons {
-webkit-box-align: center;
-ms-flex-align: center;
@@ -12194,7 +16087,10 @@ span.mx_MVideoBody video.mx_MVideoBody {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
+ grid-gap: 5px;
+ gap: 5px;
}
+
.mx_cryptoEvent .mx_cryptoEvent_state {
width: 130px;
padding: 10px 20px;
@@ -12204,6 +16100,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
overflow-wrap: break-word;
font-size: 1.2rem;
}
+
.mx_BaseCard {
padding: 0 8px;
overflow: hidden;
@@ -12218,9 +16115,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex: 1;
flex: 1;
}
+
.mx_BaseCard .mx_BaseCard_header {
margin: 8px 0;
}
+
.mx_BaseCard .mx_BaseCard_header > h2 {
margin: 0 44px;
font-size: 1.8rem;
@@ -12229,6 +16128,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
text-overflow: ellipsis;
white-space: nowrap;
}
+
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back,
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close {
position: absolute;
@@ -12239,6 +16139,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
top: 0;
border-radius: 10px;
}
+
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before,
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before {
content: "";
@@ -12253,9 +16154,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-position: center;
background-color: #91a1c0;
}
+
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back {
left: 0;
}
+
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
@@ -12264,15 +16167,18 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
}
+
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close {
right: 0;
}
+
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before {
-webkit-mask-image: url(../../img/icons-close.11ff07c.svg);
mask-image: url(../../img/icons-close.11ff07c.svg);
-webkit-mask-size: 8px;
mask-size: 8px;
}
+
.mx_BaseCard .mx_AutoHideScrollbar {
margin-right: -8px;
padding-right: 8px;
@@ -12280,18 +16186,22 @@ span.mx_MVideoBody video.mx_MVideoBody {
width: 100%;
height: 100%;
}
+
.mx_BaseCard .mx_BaseCard_Group {
margin: 20px 0 16px;
}
+
.mx_BaseCard .mx_BaseCard_Group > * {
margin-left: 12px;
margin-right: 12px;
}
+
.mx_BaseCard .mx_BaseCard_Group > h1 {
color: #8d99a5;
font-size: 1.2rem;
font-weight: 500;
}
+
.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button {
padding: 10px 38px 10px 12px;
margin: 0;
@@ -12304,9 +16214,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
white-space: nowrap;
text-overflow: ellipsis;
}
+
.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:hover {
background-color: rgba(141, 151, 165, 0.1);
}
+
.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:after {
content: "";
position: absolute;
@@ -12326,16 +16238,19 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
}
+
.mx_BaseCard
.mx_BaseCard_Group
.mx_BaseCard_Button.mx_AccessibleButton_disabled {
padding-right: 12px;
}
+
.mx_BaseCard
.mx_BaseCard_Group
.mx_BaseCard_Button.mx_AccessibleButton_disabled:after {
content: unset;
}
+
.mx_BaseCard .mx_BaseCard_footer {
padding-top: 4px;
text-align: center;
@@ -12345,21 +16260,25 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-pack: distribute;
justify-content: space-around;
}
+
.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_kind_secondary {
color: #737d8c;
background-color: rgba(141, 151, 165, 0.2);
font-weight: 600;
font-size: 1.4rem;
}
+
.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_disabled {
cursor: not-allowed;
}
+
.mx_FilePanel.mx_BaseCard,
.mx_MemberList.mx_BaseCard,
.mx_NotificationPanel.mx_BaseCard,
.mx_UserInfo.mx_BaseCard {
padding: 32px 0 0;
}
+
.mx_FilePanel.mx_BaseCard .mx_AutoHideScrollbar,
.mx_MemberList.mx_BaseCard .mx_AutoHideScrollbar,
.mx_NotificationPanel.mx_BaseCard .mx_AutoHideScrollbar,
@@ -12367,26 +16286,131 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-right: unset;
padding-right: unset;
}
+
.mx_EncryptionInfo_spinner .mx_Spinner {
margin-top: 25px;
margin-bottom: 15px;
}
+
.mx_EncryptionInfo_spinner {
text-align: center;
}
+
+.mx_PinnedMessagesCard {
+ padding-top: 0;
+}
+
+.mx_PinnedMessagesCard .mx_BaseCard_header {
+ text-align: center;
+ margin-top: 0;
+ border-bottom: 1px solid #e7e7e7;
+}
+
+.mx_PinnedMessagesCard .mx_BaseCard_header > h2 {
+ font-weight: 600;
+ font-size: 1.8rem;
+ margin: 8px 0;
+}
+
+.mx_PinnedMessagesCard .mx_BaseCard_header .mx_BaseCard_close {
+ margin-right: 6px;
+}
+
+.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ height: 100%;
+}
+
+.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty > div {
+ height: -webkit-max-content;
+ height: -moz-max-content;
+ height: max-content;
+ text-align: center;
+ margin: auto 40px;
+}
+
+.mx_PinnedMessagesCard
+ .mx_PinnedMessagesCard_empty
+ > div
+ .mx_PinnedMessagesCard_MessageActionBar {
+ pointer-events: none;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ height: 32px;
+ line-height: 2.4rem;
+ border-radius: 8px;
+ background: #fff;
+ border: 1px solid #e7e7e7;
+ padding: 1px;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ margin: 0 auto;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.mx_PinnedMessagesCard
+ .mx_PinnedMessagesCard_empty
+ > div
+ .mx_PinnedMessagesCard_MessageActionBar
+ .mx_MessageActionBar_maskButton {
+ display: inline-block;
+ position: relative;
+}
+
+.mx_PinnedMessagesCard
+ .mx_PinnedMessagesCard_empty
+ > div
+ .mx_PinnedMessagesCard_MessageActionBar
+ .mx_MessageActionBar_optionsButton {
+ background: rgba(141, 151, 165, 0.2);
+ border-radius: 6px;
+ z-index: 1;
+}
+
+.mx_PinnedMessagesCard
+ .mx_PinnedMessagesCard_empty
+ > div
+ .mx_PinnedMessagesCard_MessageActionBar
+ .mx_MessageActionBar_optionsButton:after {
+ background-color: #2e2f32;
+}
+
+.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty > div > h2 {
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #2e2f32;
+ margin-top: 24px;
+ margin-bottom: 20px;
+}
+
+.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty > div > span {
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ color: #737d8c;
+}
+
.mx_RoomSummaryCard .mx_BaseCard_header {
text-align: center;
margin-top: 20px;
}
+
.mx_RoomSummaryCard .mx_BaseCard_header h2 {
font-weight: 600;
font-size: 1.8rem;
margin: 12px 0 4px;
}
+
.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias {
font-size: 1.3rem;
color: #737d8c;
}
+
.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias,
.mx_RoomSummaryCard .mx_BaseCard_header h2 {
display: -webkit-box;
@@ -12394,12 +16418,15 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
+ white-space: pre-wrap;
}
+
.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
+
.mx_RoomSummaryCard
.mx_BaseCard_header
.mx_RoomSummaryCard_avatar
@@ -12414,6 +16441,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-left: -10px;
border: 3px solid #f2f5f8;
}
+
.mx_RoomSummaryCard
.mx_BaseCard_header
.mx_RoomSummaryCard_avatar
@@ -12434,12 +16462,14 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-image: url(../../img/e2e/disabled.6c5c6be.svg);
background-color: #fff;
}
+
.mx_RoomSummaryCard
.mx_BaseCard_header
.mx_RoomSummaryCard_avatar
.mx_RoomSummaryCard_e2ee_normal {
background-color: #424446;
}
+
.mx_RoomSummaryCard
.mx_BaseCard_header
.mx_RoomSummaryCard_avatar
@@ -12447,12 +16477,14 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
mask-image: url(../../img/e2e/normal.76f0c09.svg);
}
+
.mx_RoomSummaryCard
.mx_BaseCard_header
.mx_RoomSummaryCard_avatar
.mx_RoomSummaryCard_e2ee_verified {
background-color: #0dbd8b;
}
+
.mx_RoomSummaryCard
.mx_BaseCard_header
.mx_RoomSummaryCard_avatar
@@ -12460,12 +16492,14 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/e2e/verified.5be6c9f.svg);
mask-image: url(../../img/e2e/verified.5be6c9f.svg);
}
+
.mx_RoomSummaryCard
.mx_BaseCard_header
.mx_RoomSummaryCard_avatar
.mx_RoomSummaryCard_e2ee_warning {
background-color: #ff4b55;
}
+
.mx_RoomSummaryCard
.mx_BaseCard_header
.mx_RoomSummaryCard_avatar
@@ -12473,9 +16507,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
mask-image: url(../../img/e2e/warning.78bb264.svg);
}
+
.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button {
padding-left: 44px;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_aboutGroup
.mx_RoomSummaryCard_Button:before {
@@ -12491,11 +16527,13 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-position: center;
background-color: #c1c6cd;
}
+
.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button {
padding: 0;
height: auto;
color: #8d99a5;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
@@ -12504,6 +16542,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
text-overflow: ellipsis;
overflow: hidden;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
@@ -12512,6 +16551,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
vertical-align: top;
margin-right: 12px;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
@@ -12519,6 +16559,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
span {
color: #2e2f32;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
@@ -12536,6 +16577,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
box-sizing: border-box;
min-width: 24px;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
@@ -12553,6 +16595,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
border-radius: 12px;
background-color: rgba(141, 151, 165, 0.1);
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
@@ -12573,12 +16616,14 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-size: 16px;
background-color: #c1c6cd;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
.mx_RoomSummaryCard_app_pinToggle {
right: 24px;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
@@ -12586,6 +16631,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
@@ -12593,6 +16639,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
right: 48px;
display: none;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button
@@ -12600,40 +16647,47 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned:after {
opacity: 0.2;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned
.mx_RoomSummaryCard_app_pinToggle:before {
background-color: #0dbd8b;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button:hover
.mx_RoomSummaryCard_icon_app {
padding-right: 72px;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button:hover
.mx_RoomSummaryCard_app_options {
display: unset;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button:before {
content: unset;
}
+
.mx_RoomSummaryCard
.mx_RoomSummaryCard_appsGroup
.mx_RoomSummaryCard_Button:after {
top: 8px;
pointer-events: none;
}
+
.mx_RoomSummaryCard .mx_AccessibleButton_kind_link {
padding: 0;
margin-top: 12px;
@@ -12641,22 +16695,32 @@ span.mx_MVideoBody video.mx_MVideoBody {
font-size: 1.3rem;
font-weight: 600;
}
+
.mx_RoomSummaryCard_icon_people:before {
-webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
}
+
.mx_RoomSummaryCard_icon_files:before {
-webkit-mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
}
+
.mx_RoomSummaryCard_icon_share:before {
-webkit-mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
}
+
.mx_RoomSummaryCard_icon_settings:before {
-webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
mask-image: url(../../img/element-icons/settings.6b381af.svg);
}
+
+.mx_RoomSummaryCard_icon_export:before {
+ -webkit-mask-image: url(../../img/element-icons/export.57444c5.svg);
+ mask-image: url(../../img/element-icons/export.57444c5.svg);
+}
+
.mx_UserInfo.mx_BaseCard {
padding-top: 0;
display: -webkit-box;
@@ -12672,6 +16736,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
overflow-y: auto;
font-size: 1.2rem;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel {
cursor: pointer;
position: absolute;
@@ -12681,6 +16746,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin: 9px;
z-index: 1;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel div {
height: 16px;
width: 16px;
@@ -12693,44 +16759,55 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-position: 7px center;
background-color: #91a1c0;
}
+
.mx_UserInfo.mx_BaseCard h2 {
font-size: 1.8rem;
font-weight: 600;
margin: 18px 0 0;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_container {
padding: 8px 16px;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_separator {
border-bottom: 1px solid rgba(46, 47, 50, 0.1);
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetailsContainer {
padding-top: 0;
padding-bottom: 0;
margin-bottom: 8px;
}
+
.mx_UserInfo.mx_BaseCard .mx_RoomTile_nameContainer {
width: 154px;
}
+
.mx_UserInfo.mx_BaseCard .mx_RoomTile_badge {
display: none;
}
+
.mx_UserInfo.mx_BaseCard .mx_RoomTile_name {
width: 160px;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar {
margin: 24px 32px 0;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar > div {
max-width: 30vh;
margin: 0 auto;
-webkit-transition: 0.5s;
transition: 0.5s;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar > div > div {
padding-top: 100%;
position: relative;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar > div > div * {
border-radius: 100%;
position: absolute;
@@ -12739,6 +16816,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
width: 100% !important;
height: 100% !important;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar_initial {
z-index: 1;
display: -webkit-box;
@@ -12755,12 +16833,14 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-transition: font-size 0.5s;
transition: font-size 0.5s;
}
+
.mx_UserInfo.mx_BaseCard
.mx_UserInfo_avatar
.mx_BaseAvatar.mx_BaseAvatar_image {
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
+
.mx_UserInfo.mx_BaseCard h3 {
text-transform: uppercase;
color: #8d99a5;
@@ -12768,12 +16848,15 @@ span.mx_MVideoBody video.mx_MVideoBody {
font-size: 1.2rem;
margin: 4px 0;
}
+
.mx_UserInfo.mx_BaseCard p {
margin: 5px 0;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile {
text-align: center;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 {
display: -webkit-box;
display: -ms-flexbox;
@@ -12787,6 +16870,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 span {
display: -webkit-box;
-webkit-box-orient: vertical;
@@ -12795,17 +16879,21 @@ span.mx_MVideoBody video.mx_MVideoBody {
word-break: break-all;
text-overflow: ellipsis;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 .mx_E2EIcon {
margin-top: 3px;
margin-right: 4px;
min-width: 18px;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profileStatus {
margin-top: 12px;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField {
margin: 6px 0;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField,
.mx_UserInfo.mx_BaseCard
.mx_UserInfo_memberDetails
@@ -12821,27 +16909,32 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-align: center;
align-items: center;
}
+
.mx_UserInfo.mx_BaseCard
.mx_UserInfo_memberDetails
.mx_UserInfo_profileField
.mx_UserInfo_roleDescription {
margin: 11px 0 12px;
}
+
.mx_UserInfo.mx_BaseCard
.mx_UserInfo_memberDetails
.mx_UserInfo_profileField
.mx_Field {
margin: 0;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_field {
cursor: pointer;
color: #0dbd8b;
line-height: 1.6rem;
margin: 8px 0;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_field.mx_UserInfo_destructive {
color: #ff4b55;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_statusMessage {
font-size: 1.1rem;
opacity: 0.5;
@@ -12849,38 +16942,45 @@ span.mx_MVideoBody video.mx_MVideoBody {
white-space: nowrap;
text-overflow: clip;
}
+
.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) {
padding-top: 16px;
padding-bottom: 0;
}
+
.mx_UserInfo.mx_BaseCard
.mx_UserInfo_container:not(.mx_UserInfo_separator)
> :not(h3) {
margin-left: 8px;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 8px 0;
}
+
.mx_UserInfo.mx_BaseCard
.mx_UserInfo_devices
.mx_UserInfo_device.mx_UserInfo_device_verified
.mx_UserInfo_device_trusted {
color: #0dbd8b;
}
+
.mx_UserInfo.mx_BaseCard
.mx_UserInfo_devices
.mx_UserInfo_device.mx_UserInfo_device_unverified
.mx_UserInfo_device_trusted {
color: #ff4b55;
}
+
.mx_UserInfo.mx_BaseCard
.mx_UserInfo_devices
.mx_UserInfo_device
@@ -12891,6 +16991,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-right: 5px;
word-break: break-word;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_E2EIcon {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
@@ -12899,49 +17000,47 @@ span.mx_MVideoBody video.mx_MVideoBody {
width: 12px;
height: 12px;
}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_expand {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 11px;
}
+
.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind {
padding: 8px 18px;
}
-.mx_UserInfo.mx_BaseCard
- .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary {
- color: #0dbd8b;
- background-color: rgba(3, 179, 129, 0.16);
-}
-.mx_UserInfo.mx_BaseCard
- .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger {
- color: #ff4b55;
- background-color: rgba(255, 75, 85, 0.16);
-}
+
.mx_UserInfo.mx_BaseCard .mx_UserInfo_wideButton,
.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton {
display: block;
margin: 16px 0 8px;
}
+
.mx_UserInfo.mx_BaseCard
.mx_VerificationShowSas
.mx_AccessibleButton
+ .mx_AccessibleButton {
margin: 8px 0;
}
+
.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar > div {
max-width: 72px;
margin: 0 auto;
}
+
.mx_UserInfo.mx_UserInfo_smallAvatar
.mx_UserInfo_avatar
.mx_BaseAvatar_initial {
font-size: 40px !important;
}
+
.mx_VerificationPanel_reciprocate_section .mx_E2EIcon,
.mx_VerificationPanel_verified_section .mx_E2EIcon {
margin: 20px auto !important;
}
+
.mx_UserInfo .mx_EncryptionPanel_cancel {
-webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
mask: url(../../img/feather-customised/cancel.23c2689.svg);
@@ -12960,6 +17059,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
top: 14px;
right: 14px;
}
+
.mx_UserInfo .mx_VerificationPanel_qrCode {
padding: 4px 4px 0;
background: #fff;
@@ -12970,12 +17070,14 @@ span.mx_MVideoBody video.mx_MVideoBody {
max-width: 100%;
margin: 0 auto !important;
}
+
.mx_UserInfo .mx_VerificationPanel_qrCode canvas {
height: auto !important;
width: 100% !important;
max-width: 240px;
}
-.mx_UserInfo .mx_VerificationPanel_reciprocate_section .mx_FormButton {
+
+.mx_UserInfo .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton {
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
@@ -12983,6 +17085,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
display: block;
margin: 10px 0;
}
+
.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions,
.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions {
display: -webkit-box;
@@ -12997,6 +17100,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_CompleteSecurity_body
.mx_VerificationPanel_QRPhase_startOptions
> .mx_VerificationPanel_QRPhase_betweenText,
@@ -13016,6 +17120,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_CompleteSecurity_body
.mx_VerificationPanel_QRPhase_startOptions
.mx_VerificationPanel_QRPhase_startOption,
@@ -13044,6 +17149,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-pack: justify;
justify-content: space-between;
}
+
.mx_CompleteSecurity_body
.mx_VerificationPanel_QRPhase_startOptions
.mx_VerificationPanel_QRPhase_startOption
@@ -13068,6 +17174,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
text-align: center;
padding: 10px;
}
+
.mx_CompleteSecurity_body
.mx_VerificationPanel_QRPhase_startOptions
.mx_VerificationPanel_QRPhase_startOption
@@ -13079,6 +17186,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-top: 0;
font-weight: 700;
}
+
.mx_CompleteSecurity_body
.mx_VerificationPanel_QRPhase_startOptions
.mx_VerificationPanel_QRPhase_startOption
@@ -13091,12 +17199,14 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin: 30px 0;
text-align: center;
}
+
.mx_CompleteSecurity_body
.mx_VerificationPanel_verified_section
.mx_AccessibleButton,
.mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton {
float: right;
}
+
.mx_CompleteSecurity_body
.mx_VerificationPanel_reciprocate_section
.mx_AccessibleButton,
@@ -13104,6 +17214,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-left: 10px;
padding: 7px 40px;
}
+
.mx_CompleteSecurity_body
.mx_VerificationPanel_reciprocate_section
.mx_VerificationPanel_reciprocateButtons,
@@ -13121,26 +17232,31 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-pack: end;
justify-content: flex-end;
}
+
.mx_WidgetCard {
height: 100%;
display: contents;
}
+
.mx_WidgetCard .mx_AppTileFullWidth {
max-width: unset;
height: 100%;
border: 0;
}
+
.mx_WidgetCard .mx_BaseCard_header {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
+
.mx_WidgetCard .mx_BaseCard_header > h2 {
margin-right: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
+
.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton {
position: relative;
margin-right: 44px;
@@ -13149,6 +17265,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
min-width: 20px;
padding: 0;
}
+
.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton:before {
content: "";
position: absolute;
@@ -13166,34 +17283,41 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
background-color: #737d8c;
}
+
.mx_WidgetCard_maxPinnedTooltip {
background-color: #ff4b55;
color: #fff;
}
+
.mx_AliasSettings_editable {
border: 0;
border-bottom: 1px solid #c7c7c7;
padding: 0;
min-width: 240px;
}
+
.mx_AliasSettings_editable:focus {
border-bottom: 1px solid #0dbd8b;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
+
.mx_AliasSettings summary {
cursor: pointer;
color: #0dbd8b;
font-weight: 600;
list-style: none;
}
+
.mx_AliasSettings summary::-webkit-details-marker {
display: none;
}
+
.mx_AliasSettings .mx_AliasSettings_localAliasHeader {
margin-top: 35px;
}
+
.mx_AppsDrawer {
margin: 5px 5px 5px 18px;
position: relative;
@@ -13206,6 +17330,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
flex-direction: column;
overflow: hidden;
}
+
.mx_AppsDrawer .mx_AppsContainer_resizerHandleContainer {
width: 100%;
height: 10px;
@@ -13213,6 +17338,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
display: block;
position: relative;
}
+
.mx_AppsDrawer .mx_AppsContainer_resizerHandle {
cursor: ns-resize;
width: 100% !important;
@@ -13220,6 +17346,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
position: absolute;
bottom: 0 !important;
}
+
.mx_AppsDrawer .mx_AppsContainer_resizerHandle:after {
content: "";
position: absolute;
@@ -13229,10 +17356,12 @@ span.mx_MVideoBody video.mx_MVideoBody {
left: calc(50% - 32px);
right: calc(50% - 32px);
}
+
.mx_AppsDrawer:hover .mx_AppsContainer_resizerHandle:after {
opacity: 0.8;
background: #2e2f32;
}
+
.mx_AppsDrawer:hover .mx_ResizeHandle_horizontal:before {
position: absolute;
left: 3px;
@@ -13246,9 +17375,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
background-color: #2e2f32;
opacity: 0.8;
}
+
.mx_AppsContainer_resizer {
margin-bottom: 8px;
}
+
.mx_AppsContainer {
display: -webkit-box;
display: -ms-flexbox;
@@ -13270,23 +17401,29 @@ span.mx_MVideoBody video.mx_MVideoBody {
flex: 1;
min-height: 0;
}
+
.mx_AppsContainer .mx_AppTile:first-of-type {
border-left-width: 8px;
border-radius: 10px 0 0 10px;
}
+
.mx_AppsContainer .mx_AppTile:last-of-type {
border-right-width: 8px;
border-radius: 0 10px 10px 0;
}
+
.mx_AppsContainer .mx_ResizeHandle_horizontal {
position: relative;
}
+
.mx_AppsContainer .mx_ResizeHandle_horizontal > div {
width: 0;
}
+
.mx_AppsDrawer_2apps .mx_AppTile {
width: 50%;
}
+
.mx_AppsDrawer_2apps .mx_AppTile:nth-child(3) {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
@@ -13294,9 +17431,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
width: 0 !important;
min-width: 240px !important;
}
+
.mx_AppsDrawer_3apps .mx_AppTile {
width: 33%;
}
+
.mx_AppsDrawer_3apps .mx_AppTile:nth-child(3) {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
@@ -13304,6 +17443,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
width: 0 !important;
min-width: 240px !important;
}
+
.mx_AppTile {
width: 50%;
min-width: 240px;
@@ -13321,12 +17461,14 @@ span.mx_MVideoBody video.mx_MVideoBody {
box-sizing: border-box;
background-color: #f2f5f8;
}
+
.mx_AppTileFullWidth {
width: 100% !important;
border: 5px solid #f2f5f8;
border-radius: 8px;
background-color: #f2f5f8;
}
+
.mx_AppTile_mini,
.mx_AppTileFullWidth {
margin: 0;
@@ -13339,10 +17481,12 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_AppTile_mini {
width: 100%;
height: 200px;
}
+
.mx_AppTile .mx_AppTile_persistedWrapper,
.mx_AppTile_mini .mx_AppTile_persistedWrapper,
.mx_AppTileFullWidth .mx_AppTile_persistedWrapper {
@@ -13350,10 +17494,12 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex: 1;
flex: 1;
}
+
.mx_AppTile_persistedWrapper div {
width: 100%;
height: 100%;
}
+
.mx_AppTileMenuBar {
margin: 0;
font-size: 1.2rem;
@@ -13375,18 +17521,22 @@ span.mx_MVideoBody video.mx_MVideoBody {
padding-top: 2px;
padding-bottom: 8px;
}
+
.mx_AppTileMenuBarTitle {
line-height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
+
.mx_AppTileMenuBarTitle .mx_WidgetAvatar {
margin-right: 12px;
}
+
.mx_AppTileMenuBarTitle > :last-child {
margin-left: 9px;
}
+
.mx_AppTileMenuBarWidgets {
float: right;
display: -webkit-box;
@@ -13400,6 +17550,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-align: center;
align-items: center;
}
+
.mx_AppTileMenuBar_iconButton {
width: 12px;
height: 12px;
@@ -13412,27 +17563,33 @@ span.mx_MVideoBody video.mx_MVideoBody {
background-color: #212121;
margin: 0 3px;
}
+
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
-webkit-mask-image: url(../../img/feather-customised/widget/external-link.7ab6751.svg);
mask-image: url(../../img/feather-customised/widget/external-link.7ab6751.svg);
}
+
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu {
-webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
}
+
.mx_AppTileBody {
height: 100%;
background-color: #fff;
}
+
.mx_AppTileBody,
.mx_AppTileBody_mini {
width: 100%;
overflow: hidden;
border-radius: 8px;
}
+
.mx_AppTileBody_mini {
height: 200px;
}
+
.mx_AppTile .mx_AppTileBody,
.mx_AppTile_mini .mx_AppTileBody_mini,
.mx_AppTileFullWidth .mx_AppTileBody {
@@ -13441,18 +17598,21 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex: 1;
flex: 1;
}
+
.mx_AppTileBody_mini iframe,
.mx_AppTileBody iframe {
border: none;
width: 100%;
height: 100%;
}
+
.mx_AppTileBody iframe {
overflow: hidden;
padding: 0;
margin: 0;
display: block;
}
+
.mx_AppPermissionWarning {
text-align: center;
display: -webkit-box;
@@ -13471,19 +17631,24 @@ span.mx_MVideoBody video.mx_MVideoBody {
align-items: center;
font-size: 1.6rem;
}
+
.mx_AppPermissionWarning_row {
margin-bottom: 12px;
}
+
.mx_AppPermissionWarning_smallText {
font-size: 1.2rem;
}
+
.mx_AppPermissionWarning_bolder {
font-weight: 600;
}
+
.mx_AppPermissionWarning h4 {
margin: 0;
padding: 0;
}
+
.mx_AppPermissionWarning_helpIcon {
margin-top: 1px;
margin-right: 2px;
@@ -13491,6 +17656,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
height: 10px;
display: inline-block;
}
+
.mx_AppPermissionWarning_helpIcon:before {
display: inline-block;
background-color: #0dbd8b;
@@ -13507,6 +17673,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-image: url(../../img/feather-customised/help-circle.03fb6cf.svg);
mask-image: url(../../img/feather-customised/help-circle.03fb6cf.svg);
}
+
.mx_AppPermissionWarning_tooltip {
-webkit-box-shadow: none;
box-shadow: none;
@@ -13516,11 +17683,13 @@ span.mx_MVideoBody video.mx_MVideoBody {
border-radius: 3px;
padding: 6px 8px;
}
+
.mx_AppPermissionWarning_tooltip ul {
list-style-position: inside;
padding-left: 2px;
margin-left: 0;
}
+
.mx_AppLoading {
display: -webkit-box;
display: -ms-flexbox;
@@ -13541,6 +17710,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
background-color: #fff !important;
border-radius: 8px;
}
+
.mx_AppLoading .mx_Spinner {
position: absolute;
top: 0;
@@ -13548,6 +17718,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
left: 0;
right: 0;
}
+
.mx_AppLoading_spinner_fadeIn {
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
@@ -13558,6 +17729,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-animation-name: mx_AppLoading_spinner_fadeIn_animation;
animation-name: mx_AppLoading_spinner_fadeIn_animation;
}
+
@-webkit-keyframes mx_AppLoading_spinner_fadeIn_animation {
0% {
opacity: 0;
@@ -13566,6 +17738,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
opacity: 1;
}
}
+
@keyframes mx_AppLoading_spinner_fadeIn_animation {
0% {
opacity: 0;
@@ -13574,12 +17747,15 @@ span.mx_MVideoBody video.mx_MVideoBody {
opacity: 1;
}
}
+
.mx_AppLoading iframe {
display: none;
}
+
.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper {
z-index: 1;
}
+
.mx_Autocomplete {
position: absolute;
bottom: 0;
@@ -13594,9 +17770,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
}
+
.mx_Autocomplete_ProviderSection {
border-bottom: 1px solid transparent;
}
+
.mx_Autocomplete_Completion_block {
height: 34px;
display: -webkit-box;
@@ -13613,9 +17791,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
align-items: center;
color: #2e2f32;
}
+
.mx_Autocomplete_Completion_block * {
margin: 0 3px;
}
+
.mx_Autocomplete_Completion_pill {
-webkit-box-sizing: border-box;
box-sizing: border-box;
@@ -13635,18 +17815,22 @@ span.mx_MVideoBody video.mx_MVideoBody {
align-items: center;
color: #2e2f32;
}
+
.mx_Autocomplete_Completion_pill > * {
margin-right: 0.3rem;
}
+
.mx_Autocomplete_Completion_subtitle {
font-style: italic;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
+
.mx_Autocomplete_Completion_description {
color: grey;
}
+
.mx_Autocomplete_Completion_container_pill {
margin: 12px;
display: -webkit-box;
@@ -13655,6 +17839,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-flow: wrap;
flex-flow: wrap;
}
+
.mx_Autocomplete_Completion_container_truncate
.mx_Autocomplete_Completion_description,
.mx_Autocomplete_Completion_container_truncate
@@ -13666,47 +17851,58 @@ span.mx_MVideoBody video.mx_MVideoBody {
overflow: hidden;
text-overflow: ellipsis;
}
+
.mx_Autocomplete_Completion.selected,
.mx_Autocomplete_Completion:hover {
background: #f2f5f8;
outline: none;
}
+
.mx_Autocomplete_provider_name {
margin: 12px;
color: #2e2f32;
font-weight: 400;
opacity: 0.4;
}
+
.m_RoomView_auxPanel_stateViews {
padding: 5px 5px 5px 19px;
border-bottom: 1px solid transparent;
}
+
.m_RoomView_auxPanel_stateViews_span a {
text-decoration: none;
color: inherit;
}
+
.m_RoomView_auxPanel_stateViews_span[data-severity="warning"] {
font-weight: 700;
color: orange;
}
+
.m_RoomView_auxPanel_stateViews_span[data-severity="alert"] {
font-weight: 700;
color: red;
}
+
.m_RoomView_auxPanel_stateViews_span[data-severity="normal"] {
font-weight: 400;
}
+
.m_RoomView_auxPanel_stateViews_span[data-severity="notice"] {
font-weight: 400;
color: #a2a2a2;
}
+
.m_RoomView_auxPanel_stateViews_delim {
padding: 0 5px;
color: #a2a2a2;
}
+
.mx_BasicMessageComposer {
position: relative;
}
+
.mx_BasicMessageComposer
.mx_BasicMessageComposer_inputEmpty
> :first-child:before {
@@ -13719,6 +17915,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
pointer-events: none;
white-space: nowrap;
}
+
@-webkit-keyframes visualbell {
0% {
background-color: #faa;
@@ -13727,16 +17924,19 @@ span.mx_MVideoBody video.mx_MVideoBody {
background-color: #fff;
}
}
+
.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error {
-webkit-animation: visualbell 0.2s;
animation: visualbell 0.2s;
}
+
.mx_BasicMessageComposer .mx_BasicMessageComposer_input {
white-space: pre-wrap;
word-wrap: break-word;
outline: none;
overflow-x: hidden;
}
+
.mx_BasicMessageComposer
.mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
span.mx_RoomPill,
@@ -13745,6 +17945,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
span.mx_UserPill {
position: relative;
}
+
.mx_BasicMessageComposer
.mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
span.mx_RoomPill:before,
@@ -13765,14 +17966,17 @@ span.mx_MVideoBody video.mx_MVideoBody {
line-height: 1.6rem;
font-size: 1.04rem;
}
+
.mx_BasicMessageComposer
.mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_disabled {
pointer-events: none;
}
+
.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper {
position: relative;
height: 0;
}
+
.mx_E2EIcon {
width: 16px;
height: 16px;
@@ -13780,6 +17984,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
position: relative;
display: block;
}
+
.mx_E2EIcon_normal:after,
.mx_E2EIcon_normal:before,
.mx_E2EIcon_verified:after,
@@ -13800,51 +18005,61 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-size: contain;
mask-size: contain;
}
+
.mx_E2EIcon:before {
background-color: #fff;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
- -webkit-mask-size: 90%;
- mask-size: 90%;
+ -webkit-mask-size: 80%;
+ mask-size: 80%;
}
+
.mx_E2EIcon:before,
.mx_E2EIcon_bordered {
-webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
mask-image: url(../../img/e2e/normal.76f0c09.svg);
}
+
.mx_E2EIcon_bordered {
background-color: #f3f8fd;
}
+
.mx_E2EIcon_bordered:after {
-webkit-mask-size: 75%;
mask-size: 75%;
}
+
.mx_E2EIcon_bordered:before {
- -webkit-mask-size: 65%;
- mask-size: 65%;
+ -webkit-mask-size: 60%;
+ mask-size: 60%;
}
+
.mx_E2EIcon_warning:after {
-webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
mask-image: url(../../img/e2e/warning.78bb264.svg);
background-color: #ff4b55;
}
+
.mx_E2EIcon_normal:after {
-webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
mask-image: url(../../img/e2e/normal.76f0c09.svg);
background-color: #91a1c0;
}
+
.mx_E2EIcon_verified:after {
-webkit-mask-image: url(../../img/e2e/verified.5be6c9f.svg);
mask-image: url(../../img/e2e/verified.5be6c9f.svg);
background-color: #0dbd8b;
}
+
.mx_EditMessageComposer {
padding: 3px;
margin: -7px -10px -5px;
overflow: visible !important;
}
+
.mx_EditMessageComposer .mx_BasicMessageComposer_input {
border-radius: 4px;
border: 1px solid transparent;
@@ -13852,9 +18067,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
max-height: 200px;
padding: 3px 6px;
}
+
.mx_EditMessageComposer .mx_BasicMessageComposer_input:focus {
border-color: rgba(13, 189, 139, 0.5);
}
+
.mx_EditMessageComposer .mx_EditMessageComposer_buttons {
display: -webkit-box;
display: -ms-flexbox;
@@ -13874,14 +18091,17 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin: 0 -110px 0 0;
padding: 5px 147px 5px 5px;
}
+
.mx_EditMessageComposer .mx_EditMessageComposer_buttons .mx_AccessibleButton {
margin-left: 5px;
padding: 5px 40px;
}
+
.mx_EventTile_last .mx_EditMessageComposer_buttons {
position: static;
margin-right: -147px;
}
+
.mx_EntityTile {
display: -webkit-box;
display: -ms-flexbox;
@@ -13892,16 +18112,19 @@ span.mx_MVideoBody video.mx_MVideoBody {
color: #2e2f32;
cursor: pointer;
}
+
.mx_EntityTile .mx_E2EIcon {
margin: 0;
position: absolute;
bottom: 2px;
right: 7px;
}
+
.mx_EntityTile:hover {
padding-right: 30px;
position: relative;
}
+
.mx_EntityTile:hover:before {
content: "";
position: absolute;
@@ -13915,23 +18138,28 @@ span.mx_MVideoBody video.mx_MVideoBody {
height: 16px;
background-color: #91a1c0;
}
+
.mx_EntityTile .mx_PresenceLabel {
display: none;
}
+
.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_PresenceLabel {
display: block;
}
+
.mx_EntityTile_invite {
display: table-cell;
vertical-align: middle;
margin-left: 10px;
width: 26px;
}
+
.mx_EntityTile_avatar,
.mx_GroupRoomTile_avatar {
padding: 4px 12px 4px 3px;
position: relative;
}
+
.mx_EntityTile_name,
.mx_GroupRoomTile_name {
-webkit-box-flex: 1;
@@ -13942,29 +18170,34 @@ span.mx_MVideoBody video.mx_MVideoBody {
text-overflow: ellipsis;
white-space: nowrap;
}
+
.mx_EntityTile_details {
overflow: hidden;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
+
.mx_EntityTile_ellipsis .mx_EntityTile_name,
.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
font-style: italic;
color: #2e2f32;
}
+
.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,
.mx_EntityTile_offline_beenactive .mx_EntityTile_name,
.mx_EntityTile_unavailable .mx_EntityTile_avatar,
.mx_EntityTile_unavailable .mx_EntityTile_name {
opacity: 0.5;
}
+
.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,
.mx_EntityTile_offline_neveractive .mx_EntityTile_name,
.mx_EntityTile_unknown .mx_EntityTile_avatar,
.mx_EntityTile_unknown .mx_EntityTile_name {
opacity: 0.25;
}
+
.mx_EntityTile_subtext {
font-size: 1.1rem;
opacity: 0.5;
@@ -13972,6 +18205,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
white-space: nowrap;
text-overflow: clip;
}
+
.mx_EntityTile_power {
-webkit-padding-start: 6px;
padding-inline-start: 6px;
@@ -13982,20 +18216,420 @@ span.mx_MVideoBody video.mx_MVideoBody {
text-overflow: ellipsis;
white-space: nowrap;
}
+
.mx_EntityTile:hover .mx_EntityTile_power {
display: none;
}
-.mx_EventTile {
+
+.mx_EventTile[data-layout="bubble"],
+.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary {
+ --avatarSize: 32px;
+ --gutterSize: 11px;
+ --cornerRadius: 12px;
+ --maxWidth: 70%;
+}
+
+.mx_EventTile[data-layout="bubble"] {
+ position: relative;
+ margin-top: var(--gutterSize);
+ margin-left: 50px;
+ margin-right: 100px;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation {
+ margin-top: 2px;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EventTile {
+ padding-top: 0;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_selected:before,
+.mx_EventTile[data-layout="bubble"]:hover:before {
+ content: "";
+ position: absolute;
+ top: -1px;
+ bottom: -1px;
+ left: -60px;
+ right: -60px;
+ z-index: -1;
+ background: #fefcf5;
+ border-radius: 4px;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_selected
+ .mx_EventTile_avatar
+ img,
+.mx_EventTile[data-layout="bubble"]:hover .mx_EventTile_avatar img {
+ -webkit-box-shadow: 0 0 0 3px #fefcf5;
+ box-shadow: 0 0 0 3px #fefcf5;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EventTile_line,
+.mx_EventTile[data-layout="bubble"] .mx_SenderProfile {
+ width: -webkit-fit-content;
+ width: -moz-fit-content;
+ width: fit-content;
+ max-width: 70%;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_SenderProfile {
+ position: relative;
+ top: -2px;
+ left: 2px;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line {
+ border-bottom-right-radius: var(--cornerRadius);
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_avatar {
+ left: -34px;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar {
+ right: 0;
+ -webkit-transform: translate3d(90%, 50%, 0);
+ transform: translate3d(90%, 50%, 0);
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="false"] {
+ --backgroundColor: #f7f8f9;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line {
+ border-bottom-left-radius: var(--cornerRadius);
+ float: right;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line > a {
+ left: auto;
+ right: -68px;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_SenderProfile {
+ display: none;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="true"]
+ .mx_ReplyTile
+ .mx_SenderProfile {
+ display: block;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_ReactionsRow {
+ float: right;
+ clear: right;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="true"]
+ .mx_ReactionsRow
+ > :last-child {
+ -webkit-box-ordinal-group: 0;
+ -ms-flex-order: -1;
+ order: -1;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_avatar {
+ top: -19px;
+ right: -35px;
+}
+
+.mx_EventTile[data-layout="bubble"][data-self="true"] {
+ --backgroundColor: #f8fdfc;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
+ position: relative;
+ padding: var(--gutterSize);
+ border-top-left-radius: var(--cornerRadius);
+ border-top-right-radius: var(--cornerRadius);
+ background: var(--backgroundColor);
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ grid-gap: 5px;
+ gap: 5px;
+ margin: 0 -12px 0 -9px;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EventTile_line > a {
+ position: absolute;
+ padding: 10px 20px;
+ top: 0;
+ left: -68px;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"]
+ .mx_EventTile_line {
+ border-top-left-radius: 0;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="false"]
+ .mx_EventTile_line {
+ border-bottom-left-radius: var(--cornerRadius);
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"]
+ .mx_EventTile_line {
+ border-top-right-radius: 0;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="true"]
+ .mx_EventTile_line {
+ border-bottom-right-radius: var(--cornerRadius);
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EventTile_avatar {
+ position: absolute;
+ top: 0;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EventTile_avatar img {
+ -webkit-box-shadow: 0 0 0 3px #fff;
+ box-shadow: 0 0 0 3px #fff;
+ border-radius: 50%;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_BaseAvatar,
+.mx_EventTile[data-layout="bubble"] .mx_EventTile_avatar {
+ line-height: 1;
+}
+
+.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
+ > .mx_EventTile_line {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
+ .mx_ReplyThread_show {
+ -webkit-box-ordinal-group: 100000;
+ -ms-flex-order: 99999;
+ order: 99999;
+}
+
+.mx_EventTile[data-layout="bubble"][data-has-reply="true"] .mx_ReplyThread {
+ margin: 0 calc(var(--gutterSize) * -1);
+}
+
+.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
+ .mx_ReplyThread
+ .mx_EventTile_reply {
+ max-width: 90%;
+ padding: 0;
+}
+
+.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
+ .mx_ReplyThread
+ .mx_EventTile_reply
+ > a {
+ display: none !important;
+}
+
+.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
+ .mx_ReplyThread
+ .mx_EventTile {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ grid-gap: var(--gutterSize);
+ gap: var(--gutterSize);
+}
+
+.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
+ .mx_ReplyThread
+ .mx_EventTile
+ .mx_EventTile_avatar {
+ position: static;
+}
+
+.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
+ .mx_ReplyThread
+ .mx_EventTile
+ .mx_SenderProfile {
+ display: none;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EditMessageComposer_buttons {
+ position: static;
+ padding: 0;
+ margin: 0;
+ background: transparent;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_ReactionsRow {
+ margin-right: -18px;
+ margin-left: -9px;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_ReplyThread {
+ border-left-width: 2px;
+ border-left-color: #c1c6cd;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_bubbleContainer,
+.mx_EventTile[data-layout="bubble"].mx_EventTile_info,
+.mx_EventTile[data-layout="bubble"]
+ ~ .mx_EventListSummary[data-expanded="false"] {
+ --backgroundColor: transparent;
+ --gutterSize: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 5px 0;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_bubbleContainer
+ .mx_EventTile_avatar,
+.mx_EventTile[data-layout="bubble"].mx_EventTile_info .mx_EventTile_avatar,
+.mx_EventTile[data-layout="bubble"]
+ ~ .mx_EventListSummary[data-expanded="false"]
+ .mx_EventTile_avatar {
+ position: static;
+ -webkit-box-ordinal-group: 0;
+ -ms-flex-order: -1;
+ order: -1;
+ margin-right: 5px;
+}
+
+.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary {
+ --maxWidth: 80%;
+ margin-left: calc(var(--avatarSize) + var(--gutterSize));
+ margin-right: calc(var(--gutterSize) + var(--avatarSize));
+}
+
+.mx_EventTile[data-layout="bubble"]
+ ~ .mx_EventListSummary
+ .mx_EventListSummary_toggle {
+ float: none;
+ -webkit-box-ordinal-group: 10;
+ -ms-flex-order: 9;
+ order: 9;
+ margin: 0 0 0 5px;
+}
+
+.mx_EventTile[data-layout="bubble"]
+ ~ .mx_EventListSummary
+ .mx_EventListSummary_avatars {
+ padding-top: 0;
+}
+
+.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary:after {
+ content: "";
+ clear: both;
+}
+
+.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary .mx_EventTile {
+ margin: 0 6px;
+}
+
+.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary .mx_EventTile_line {
+ margin: 0 5px;
+}
+
+.mx_EventTile[data-layout="bubble"]
+ ~ .mx_EventListSummary
+ .mx_EventTile_line
+ > a {
+ left: auto;
+ right: 0;
+ -webkit-transform: translateX(calc(100% + 5px));
+ transform: translateX(calc(100% + 5px));
+}
+
+.mx_EventTile[data-layout="bubble"]
+ ~ .mx_EventListSummary
+ .mx_MessageActionBar {
+ -webkit-transform: translate3d(90%, 0, 0);
+ transform: translate3d(90%, 0, 0);
+}
+
+.mx_EventTile[data-layout="bubble"]
+ ~ .mx_EventListSummary[data-expanded="false"] {
+ padding: 0 34px;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line,
+.mx_EventTile[data-layout="bubble"].mx_EventTile_bad:hover:before,
+.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary .mx_EventTile_line,
+.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary:hover:before {
+ background: transparent;
+}
+
+.mx_EventTile[data-layout="bubble"] + .mx_EventListSummary .mx_EventTile {
+ margin-top: 0;
+ padding: 2px 0;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EventListSummary_toggle {
+ margin-right: 55px;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_bad > .mx_EventTile_line {
+ display: grid;
+ grid-template: "reply reply" auto "shield body" auto "shield link" auto/auto 1fr;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_bad
+ > .mx_EventTile_line
+ .mx_EventTile_e2eIcon {
+ grid-area: shield;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_bad
+ > .mx_EventTile_line
+ .mx_UnknownBody {
+ grid-area: body;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_bad
+ > .mx_EventTile_line
+ .mx_EventTile_keyRequestInfo {
+ grid-area: link;
+}
+
+.mx_EventTile[data-layout="bubble"].mx_EventTile_bad
+ > .mx_EventTile_line
+ .mx_ReplyThread_wrapper {
+ grid-area: reply;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EventTile_readAvatars {
+ position: absolute;
+ right: -110px;
+ bottom: 0;
+ top: auto;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_MTextBody {
+ max-width: 100%;
+}
+
+.mx_EventTile:not([data-layout="bubble"]) {
max-width: 100%;
clear: both;
padding-top: 18px;
font-size: 1.4rem;
position: relative;
}
-.mx_EventTile.mx_EventTile_info {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info {
padding-top: 1px;
}
-.mx_EventTile_avatar {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_avatar {
top: 14px;
left: 8px;
cursor: pointer;
@@ -14004,21 +18638,27 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-user-select: none;
user-select: none;
}
-.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info
+ .mx_EventTile_avatar {
top: 0.6rem;
left: 64px;
}
-.mx_EventTile_continuation {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_continuation {
padding-top: 0 !important;
}
-.mx_EventTile_continuation.mx_EventTile_isEditing {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_continuation.mx_EventTile_isEditing {
padding-top: 5px !important;
margin-top: -5px;
}
-.mx_EventTile_isEditing {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_isEditing {
background-color: #f3f8fd;
}
-.mx_EventTile .mx_SenderProfile {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_SenderProfile {
color: #2e2f32;
font-size: 1.4rem;
display: inline-block;
@@ -14031,7 +18671,8 @@ span.mx_MVideoBody video.mx_MVideoBody {
text-overflow: ellipsis;
max-width: calc(100% - 64px);
}
-.mx_EventTile .mx_SenderProfile .mx_Flair {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_SenderProfile .mx_Flair {
opacity: 0.7;
margin-left: 5px;
display: inline-block;
@@ -14042,17 +18683,20 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-user-select: none;
user-select: none;
}
-.mx_EventTile .mx_SenderProfile .mx_Flair img {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_SenderProfile .mx_Flair img {
vertical-align: -2px;
margin-right: 2px;
border-radius: 8px;
}
-.mx_EventTile_isEditing .mx_MessageTimestamp {
- visibility: hidden !important;
-}
-.mx_EventTile .mx_MessageTimestamp {
- display: block;
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_isEditing
+ .mx_MessageTimestamp {
visibility: hidden;
+}
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_MessageTimestamp {
+ display: block;
white-space: nowrap;
left: 0;
text-align: center;
@@ -14061,102 +18705,95 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-user-select: none;
user-select: none;
}
-.mx_EventTile_continuation .mx_EventTile_line {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_continuation
+ .mx_EventTile_line {
clear: both;
}
-.mx_EventTile_line,
-.mx_EventTile_reply {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_reply {
position: relative;
padding-left: 64px;
- border-radius: 4px;
+ border-radius: 8px;
}
-.mx_EventListSummary .mx_EventTile_line,
-.mx_RoomView_timeline_rr_enabled .mx_EventTile_line {
- margin-right: 110px;
-}
-.mx_EventTile_bubbleContainer {
- display: grid;
- grid-template-columns: 1fr 100px;
-}
-.mx_EventTile_bubbleContainer .mx_EventTile_line {
- margin-right: 0;
- grid-column: 1/3;
- padding: 0 !important;
-}
-.mx_EventTile_bubbleContainer .mx_EventTile_msgOption {
- grid-column: 2;
-}
-.mx_EventTile_reply {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_reply {
margin-right: 10px;
}
-.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
- font-size: 48px !important;
- line-height: 57px !important;
-}
-.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
- visibility: visible;
-}
-.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
- left: 3px;
- width: auto;
-}
-.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp,
-.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp,
-.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
-.mx_EventTile_last > div > a > .mx_MessageTimestamp,
-.mx_IRCLayout
- .mx_EventTile.focus-visible:focus-within
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_selected
+ > div
> a
- > .mx_MessageTimestamp,
-.mx_IRCLayout
- .mx_EventTile.mx_EventTile_actionBarFocused
- > a
- > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_EventTile:hover > a > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_EventTile_last > a > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_ReplyThread .mx_EventTile > a > .mx_MessageTimestamp {
- visibility: visible;
+ > .mx_MessageTimestamp {
+ left: -4px;
}
-.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar,
-.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
-.mx_EventTile:hover .mx_MessageActionBar,
-[data-whatinput="keyboard"] .mx_EventTile:focus-within .mx_MessageActionBar {
- visibility: visible;
-}
-.mx_EventTile_selected > .mx_EventTile_line {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_selected
+ > .mx_EventTile_line {
border-left: 4px solid #0dbd8b;
padding-left: 60px;
background-color: #f6f7f8;
}
-.mx_EventTile_highlight,
-.mx_EventTile_highlight .markdown-body {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_highlight,
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_highlight
+ .markdown-body {
color: #ff4b55;
}
-.mx_EventTile_highlight .markdown-body .mx_EventTile_line,
-.mx_EventTile_highlight .mx_EventTile_line {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_highlight
+ .markdown-body
+ .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_highlight
+ .mx_EventTile_line {
background-color: #fff8e3;
}
-.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"])
+ ~ .mx_EventListSummary
+ .mx_EventTile_avatar
+ ~ .mx_EventTile_line {
+ padding-left: 82px;
+}
+
+.mx_EventTile:not([data-layout="bubble"])
+ ~ .mx_EventListSummary
+ .mx_EventTile_line {
+ padding-left: 64px;
+}
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_selected.mx_EventTile_info
+ .mx_EventTile_line {
padding-left: 78px;
}
-.mx_EventTile.focus-visible:focus-within .mx_EventTile_line,
-.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
-.mx_EventTile:hover .mx_EventTile_line {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile.focus-visible:focus-within
+ .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile.mx_EventTile_actionBarFocused
+ .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile:hover
+ .mx_EventTile_line {
background-color: #f6f7f8;
}
-.mx_EventTile_searchHighlight {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_searchHighlight {
+ background-color: #0dbd8b;
+ color: #fff;
border-radius: 5px;
padding-left: 2px;
padding-right: 2px;
cursor: pointer;
}
-.mx_EventTile_searchHighlight,
-.mx_EventTile_searchHighlight a {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_searchHighlight a {
background-color: #0dbd8b;
color: #fff;
}
-.mx_EventTile_receiptSending:before,
-.mx_EventTile_receiptSent:before {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_receiptSending:before,
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_receiptSent:before {
background-color: #8d99a5;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
@@ -14172,18 +18809,22 @@ span.mx_MVideoBody video.mx_MVideoBody {
left: 0;
right: 0;
}
-.mx_EventTile_receiptSent:before {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_receiptSent:before {
-webkit-mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
}
-.mx_EventTile_receiptSending:before {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_receiptSending:before {
-webkit-mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
}
-.mx_EventTile_contextual {
+
+.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_contextual {
opacity: 0.4;
}
-.mx_EventTile_msgOption {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_msgOption {
float: right;
text-align: right;
position: relative;
@@ -14191,9 +18832,146 @@ span.mx_MVideoBody video.mx_MVideoBody {
height: 1px;
margin-right: 10px;
}
-.mx_EventTile_msgOption a {
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_msgOption a {
text-decoration: none;
}
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_body {
+ overflow-y: hidden;
+}
+
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown
+ .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified
+ .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified
+ .mx_EventTile_line {
+ padding-left: 60px;
+}
+
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified
+ .mx_EventTile_line {
+ border-left: 4px solid #76cfa5;
+}
+
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown
+ .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified
+ .mx_EventTile_line {
+ border-left: 4px solid #e8bf37;
+}
+
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown.mx_EventTile_info
+ .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified.mx_EventTile_info
+ .mx_EventTile_line,
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified.mx_EventTile_info
+ .mx_EventTile_line {
+ padding-left: 78px;
+}
+
+.mx_EventTile:not([data-layout="bubble"]):hover .mx_EventTile_e2eIcon {
+ opacity: 1;
+}
+
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown
+ .mx_EventTile_line
+ > a
+ > .mx_MessageTimestamp,
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified
+ .mx_EventTile_line
+ > a
+ > .mx_MessageTimestamp,
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified
+ .mx_EventTile_line
+ > a
+ > .mx_MessageTimestamp {
+ left: -4px;
+}
+
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown
+ .mx_EventTile_line
+ > .mx_EventTile_e2eIcon,
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified
+ .mx_EventTile_line
+ > .mx_EventTile_e2eIcon,
+.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified
+ .mx_EventTile_line
+ > .mx_EventTile_e2eIcon {
+ display: block;
+ left: 41px;
+}
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_MImageBody {
+ margin-right: 34px;
+}
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_e2eIcon {
+ position: absolute;
+ top: 6px;
+ left: 44px;
+ bottom: 0;
+ right: 0;
+}
+
+.mx_EventTile:not([data-layout="bubble"]) .mx_ReactionsRow {
+ margin: 0;
+ padding: 6px 60px;
+}
+
+.mx_EventTile_content {
+ overflow-y: hidden;
+ overflow-x: hidden;
+ margin-right: 34px;
+}
+
+.mx_EventTile_spoiler {
+ cursor: pointer;
+}
+
+.mx_EventTile_spoiler_reason {
+ color: #acacac;
+ font-size: 1.1rem;
+}
+
+.mx_EventTile_spoiler_content {
+ -webkit-filter: blur(5px) saturate(0.1) sepia(1);
+ filter: blur(5px) saturate(0.1) sepia(1);
+ -webkit-transition-duration: 0.5s;
+ transition-duration: 0.5s;
+}
+
+.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
+ -webkit-filter: none;
+ filter: none;
+}
+
+.mx_RoomView_timeline_rr_enabled
+ .mx_EventTile:not([data-layout="bubble"])
+ .mx_EventTile_line {
+ margin-right: 110px;
+}
+
+.mx_EventTile_bubbleContainer {
+ display: grid;
+ grid-template-columns: 1fr 100px;
+}
+
+.mx_EventTile_bubbleContainer .mx_EventTile_line {
+ margin-right: 0;
+ grid-column: 1/3;
+ padding: 0 !important;
+}
+
+.mx_EventTile_bubbleContainer .mx_EventTile_msgOption {
+ grid-column: 2;
+}
+
+.mx_EventTile_bubbleContainer:hover .mx_EventTile_line {
+ background-color: inherit !important;
+}
+
.mx_EventTile_readAvatars {
position: relative;
display: inline-block;
@@ -14206,11 +18984,13 @@ span.mx_MVideoBody video.mx_MVideoBody {
user-select: none;
z-index: 1;
}
+
.mx_EventTile_readAvatars .mx_BaseAvatar {
position: absolute;
display: inline-block;
height: 1.4rem;
width: 1.4rem;
+ will-change: left, top;
-webkit-transition: left 0.1s ease-out, top 0.3s ease-out;
transition: left 0.1s ease-out, top 0.3s ease-out;
-webkit-transition: left var(--transition-short) ease-out,
@@ -14218,50 +18998,40 @@ span.mx_MVideoBody video.mx_MVideoBody {
transition: left var(--transition-short) ease-out,
top var(--transition-standard) ease-out;
}
+
.mx_EventTile_readAvatarRemainder {
color: #acacac;
font-size: 1.1rem;
position: absolute;
}
-.mx_EventTile_content {
- display: block;
- overflow-y: hidden;
- overflow-x: hidden;
- margin-right: 34px;
+
+.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
+ font-size: 48px !important;
+ line-height: 57px !important;
}
-.mx_EventTile_body {
- overflow-y: hidden;
-}
-.mx_EventTile_spoiler {
+
+.mx_EventTile_content .mx_EventTile_edited {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ font-size: 1.2rem;
+ color: #9e9e9e;
+ display: inline-block;
+ margin-left: 9px;
cursor: pointer;
}
-.mx_EventTile_spoiler_reason {
- color: #acacac;
- font-size: 1.1rem;
-}
-.mx_EventTile_spoiler_content {
- -webkit-filter: blur(5px) saturate(0.1) sepia(1);
- filter: blur(5px) saturate(0.1) sepia(1);
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
-}
-.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
- -webkit-filter: none;
- filter: none;
-}
+
.mx_EventTile_e2eIcon {
- position: absolute;
- top: 6px;
- left: 44px;
+ position: relative;
width: 14px;
height: 14px;
display: block;
- bottom: 0;
- right: 0;
opacity: 0.2;
background-repeat: no-repeat;
background-size: contain;
}
+
.mx_EventTile_e2eIcon:after,
.mx_EventTile_e2eIcon:before {
content: "";
@@ -14274,6 +19044,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-size: contain;
mask-size: contain;
}
+
.mx_EventTile_e2eIcon:after,
.mx_EventTile_e2eIcon:before {
-webkit-mask-repeat: no-repeat;
@@ -14281,130 +19052,61 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_EventTile_e2eIcon:before {
background-color: #fff;
-webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
mask-image: url(../../img/e2e/normal.76f0c09.svg);
- -webkit-mask-size: 90%;
- mask-size: 90%;
+ -webkit-mask-size: 80%;
+ mask-size: 80%;
}
+
.mx_EventTile_e2eIcon_undecryptable:after,
.mx_EventTile_e2eIcon_unverified:after {
-webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
mask-image: url(../../img/e2e/warning.78bb264.svg);
background-color: #ff4b55;
}
+
.mx_EventTile_e2eIcon_undecryptable,
.mx_EventTile_e2eIcon_unverified {
opacity: 1;
}
+
.mx_EventTile_e2eIcon_unknown:after {
-webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
mask-image: url(../../img/e2e/warning.78bb264.svg);
background-color: #ff4b55;
}
+
.mx_EventTile_e2eIcon_unknown {
opacity: 1;
}
+
.mx_EventTile_e2eIcon_unencrypted:after {
-webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
mask-image: url(../../img/e2e/warning.78bb264.svg);
background-color: #ff4b55;
}
+
.mx_EventTile_e2eIcon_unencrypted {
opacity: 1;
}
+
.mx_EventTile_e2eIcon_unauthenticated:after {
-webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
mask-image: url(../../img/e2e/normal.76f0c09.svg);
background-color: #91a1c0;
}
+
.mx_EventTile_e2eIcon_unauthenticated {
opacity: 1;
}
-.mx_EventTile_keyRequestInfo {
- font-size: 1.2rem;
-}
-.mx_EventTile_keyRequestInfo_text {
- opacity: 0.5;
-}
-.mx_EventTile_keyRequestInfo_text a {
- color: #2e2f32;
- text-decoration: underline;
- cursor: pointer;
-}
-.mx_EventTile_keyRequestInfo_tooltip_contents p {
- text-align: auto;
- margin-left: 3px;
- margin-right: 3px;
-}
-.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
- margin-top: 0;
-}
-.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
- margin-bottom: 0;
-}
-.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
- padding-left: 60px;
-}
-.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
- border-left: 4px solid #76cfa5;
-}
-.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
- border-left: 4px solid #e8bf37;
-}
-.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info
- .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line {
- padding-left: 78px;
-}
-.mx_EventTile:hover .mx_EventTile_e2eIcon {
- opacity: 1;
-}
-.mx_EventTile:hover.mx_EventTile_unknown
- .mx_EventTile_line
- > a
- > .mx_MessageTimestamp,
-.mx_EventTile:hover.mx_EventTile_unverified
- .mx_EventTile_line
- > a
- > .mx_MessageTimestamp,
-.mx_EventTile:hover.mx_EventTile_verified
- .mx_EventTile_line
- > a
- > .mx_MessageTimestamp {
- width: 38px;
-}
-.mx_EventTile:hover.mx_EventTile_unknown
- .mx_EventTile_line
- > .mx_EventTile_e2eIcon,
-.mx_EventTile:hover.mx_EventTile_unverified
- .mx_EventTile_line
- > .mx_EventTile_e2eIcon,
-.mx_EventTile:hover.mx_EventTile_verified
- .mx_EventTile_line
- > .mx_EventTile_e2eIcon {
- display: block;
- left: 41px;
-}
-.mx_EventTile_content .mx_EventTile_edited {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- font-size: 1.2rem;
- color: #9e9e9e;
- display: inline-block;
- margin-left: 9px;
- cursor: pointer;
-}
+
.mx_EventTile_body pre {
border: 1px solid transparent;
}
+
.mx_EventTile_content .markdown-body {
font-family: inherit !important;
white-space: normal !important;
@@ -14412,38 +19114,47 @@ span.mx_MVideoBody video.mx_MVideoBody {
color: inherit;
font-size: 1.4rem;
}
+
.mx_EventTile_content .markdown-body code,
.mx_EventTile_content .markdown-body pre {
- font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
- color: #333;
+ font-family: Menlo, Consolas, Liberation Mono, Lucida Console, monospace !important;
+ background-color: #f3f8fd;
}
+
+.mx_EventTile_content .markdown-body pre code > * {
+ display: inline-block;
+}
+
.mx_EventTile_content .markdown-body pre {
overflow-x: overlay;
overflow-y: visible;
}
-.mx_EventTile_content .markdown-body code {
- background-color: #f8f8f8;
-}
+
.mx_EventTile_lineNumbers {
float: left;
margin: 0 0.5em 0 -1.5em;
color: grey;
}
+
.mx_EventTile_lineNumber {
text-align: right;
display: block;
padding-left: 1em;
}
+
.mx_EventTile_collapsedCodeBlock {
max-height: 30vh;
}
+
.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre,
.mx_EventTile:hover .mx_EventTile_body pre {
border: 1px solid #e5e5e5;
}
+
.mx_EventTile_pre_container {
position: relative;
}
+
.mx_EventTile_button {
position: absolute;
display: inline-block;
@@ -14455,17 +19166,21 @@ span.mx_MVideoBody video.mx_MVideoBody {
height: 19px;
background-color: #2e2f32;
}
+
.mx_EventTile_buttonBottom {
top: 33px;
}
+
.mx_EventTile_copyButton {
-webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
}
+
.mx_EventTile_collapseButton {
-webkit-mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
}
+
.mx_EventTile_collapseButton,
.mx_EventTile_expandButton {
-webkit-mask-size: 75%;
@@ -14475,10 +19190,12 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
+
.mx_EventTile_expandButton {
-webkit-mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
}
+
.mx_EventTile_body
.mx_EventTile_pre_container:focus-within
.mx_EventTile_collapseButton,
@@ -14497,6 +19214,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
.mx_EventTile_expandButton {
visibility: visible;
}
+
.mx_EventTile_content .markdown-body h1,
.mx_EventTile_content .markdown-body h2,
.mx_EventTile_content .markdown-body h3,
@@ -14506,32 +19224,75 @@ span.mx_MVideoBody video.mx_MVideoBody {
font-family: inherit !important;
color: inherit;
}
+
.mx_EventTile_content .markdown-body h1,
.mx_EventTile_content .markdown-body h2 {
font-size: 1.5em;
border-bottom: none !important;
}
+
.mx_EventTile_content .markdown-body a {
color: #238cf5;
}
+
.mx_EventTile_content .markdown-body .hljs {
display: inline !important;
}
+
+.mx_EventTile_keyRequestInfo {
+ font-size: 1.2rem;
+}
+
+.mx_EventTile_keyRequestInfo_text {
+ opacity: 0.5;
+}
+
+.mx_EventTile_keyRequestInfo_text a {
+ color: #2e2f32;
+ text-decoration: underline;
+ cursor: pointer;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p {
+ text-align: auto;
+ margin-left: 3px;
+ margin-right: 3px;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
+ margin-top: 0;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
+ margin-bottom: 0;
+}
+
.mx_EventTile_tileError {
color: red;
text-align: center;
margin-right: 0;
}
+
.mx_EventTile_tileError .mx_EventTile_line {
padding-left: 0;
margin-right: 0;
}
+
.mx_EventTile_tileError .mx_EventTile_line span {
padding: 4px 8px;
}
+
.mx_EventTile_tileError a {
margin-left: 1em;
}
+
+.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar,
+.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
+.mx_EventTile:hover .mx_MessageActionBar,
+[data-whatinput="keyboard"] .mx_EventTile:focus-within .mx_MessageActionBar {
+ visibility: visible;
+}
+
@media only screen and (max-width: 480px) {
.mx_EventTile_line,
.mx_EventTile_reply {
@@ -14543,41 +19304,44 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-right: 0;
}
}
+
.mx_GroupLayout .mx_EventTile > .mx_SenderProfile {
line-height: 2rem;
margin-left: 64px;
}
-.mx_GroupLayout .mx_EventTile > .mx_EventTile_line {
- padding-left: 64px;
-}
+
.mx_GroupLayout .mx_EventTile > .mx_EventTile_avatar {
position: absolute;
+ z-index: 9;
}
+
.mx_GroupLayout .mx_EventTile .mx_MessageTimestamp {
position: absolute;
width: 46px;
}
+
.mx_GroupLayout .mx_EventTile .mx_EventTile_line,
.mx_GroupLayout .mx_EventTile .mx_EventTile_reply {
padding-top: 1px;
padding-bottom: 3px;
line-height: 2.2rem;
}
-.mx_GroupLayout .mx_EventTile_info .mx_EventTile_line {
- padding-left: 82px;
-}
+
.mx_MatrixChat_useCompactLayout .mx_EventTile {
padding-top: 4px;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_line,
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_reply {
padding-top: 0;
padding-bottom: 0;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info {
padding-top: 0;
font-size: 1.3rem;
}
+
.mx_MatrixChat_useCompactLayout
.mx_EventTile.mx_EventTile_info
.mx_EventTile_line,
@@ -14586,22 +19350,27 @@ span.mx_MVideoBody video.mx_MVideoBody {
.mx_EventTile_reply {
line-height: 2rem;
}
+
.mx_MatrixChat_useCompactLayout
.mx_EventTile.mx_EventTile_info
.mx_EventTile_avatar {
top: 4px;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_SenderProfile {
font-size: 1.3rem;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote {
padding-top: 8px;
}
+
.mx_MatrixChat_useCompactLayout
.mx_EventTile.mx_EventTile_emote
.mx_EventTile_avatar {
top: 2px;
}
+
.mx_MatrixChat_useCompactLayout
.mx_EventTile.mx_EventTile_emote
.mx_EventTile_line,
@@ -14611,10 +19380,12 @@ span.mx_MVideoBody video.mx_MVideoBody {
padding-top: 0;
padding-bottom: 1px;
}
+
.mx_MatrixChat_useCompactLayout
.mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
padding-top: 0;
}
+
.mx_MatrixChat_useCompactLayout
.mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation
.mx_EventTile_line,
@@ -14624,15 +19395,19 @@ span.mx_MVideoBody video.mx_MVideoBody {
padding-top: 0;
padding-bottom: 0;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_avatar {
top: 2px;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_e2eIcon {
top: 3px;
}
+
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_readAvatars {
top: -2rem;
}
+
.mx_MatrixChat_useCompactLayout
.mx_EventTile
.mx_EventTile_content
@@ -14670,16 +19445,21 @@ span.mx_MVideoBody video.mx_MVideoBody {
ul {
margin-bottom: 4px;
}
+
.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList h2 {
margin-top: 6px;
}
+
.mx_IRCLayout {
--name-width: 70px;
line-height: 1.8rem !important;
}
+
.mx_IRCLayout .mx_EventTile > a {
text-decoration: none;
+ min-width: 45px;
}
+
.mx_IRCLayout .mx_EventTile {
display: -webkit-box;
display: -ms-flexbox;
@@ -14693,9 +19473,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
align-items: flex-start;
padding-top: 0;
}
+
.mx_IRCLayout .mx_EventTile > * {
margin-right: 5px;
}
+
.mx_IRCLayout .mx_EventTile > .mx_EventTile_msgOption {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
@@ -14703,32 +19485,14 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-negative: 0;
flex-shrink: 0;
}
+
.mx_IRCLayout
.mx_EventTile
> .mx_EventTile_msgOption
.mx_EventTile_readAvatars {
top: 0.2rem;
}
-.mx_IRCLayout .mx_EventTile > .mx_SenderProfile {
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- width: var(--name-width);
- text-overflow: ellipsis;
- text-align: left;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- overflow: visible;
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
-}
+
.mx_IRCLayout .mx_EventTile .mx_EventTile_line,
.mx_IRCLayout .mx_EventTile .mx_EventTile_reply {
padding: 0;
@@ -14749,6 +19513,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
flex-shrink: 1;
min-width: 0;
}
+
.mx_IRCLayout .mx_EventTile > .mx_EventTile_avatar {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
@@ -14766,6 +19531,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-align: center;
align-items: center;
}
+
.mx_IRCLayout .mx_EventTile > .mx_EventTile_avatar > .mx_BaseAvatar,
.mx_IRCLayout .mx_EventTile > .mx_EventTile_avatar > .mx_BaseAvatar > * {
height: 1.4rem !important;
@@ -14773,11 +19539,13 @@ span.mx_MVideoBody video.mx_MVideoBody {
font-size: 1rem !important;
line-height: 1.5rem !important;
}
+
.mx_IRCLayout .mx_EventTile .mx_MessageTimestamp {
font-size: 1rem;
width: 45px;
text-align: right;
}
+
.mx_IRCLayout .mx_EventTile > .mx_EventTile_e2eIcon {
position: absolute;
right: unset;
@@ -14792,103 +19560,130 @@ span.mx_MVideoBody video.mx_MVideoBody {
height: 1.8rem;
background-position: 50%;
}
+
.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_EventTile_e2eIcon,
.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_MTextBody,
-.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_ReplyThread_wrapper_empty,
.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_TextualEvent {
display: inline-block;
}
+
.mx_IRCLayout .mx_EventTile .mx_EventTile_reply {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
+
.mx_IRCLayout .mx_EventTile .mx_EditMessageComposer_buttons {
position: relative;
}
+
.mx_IRCLayout .mx_EventTile_emote > .mx_EventTile_avatar {
margin-left: calc(var(--name-width) + 19px);
}
+
.mx_IRCLayout blockquote {
margin: 0;
}
+
.mx_IRCLayout .mx_EventListSummary > .mx_EventTile_line {
padding-left: calc(var(--name-width) + 74px);
}
+
.mx_IRCLayout .mx_EventListSummary .mx_EventListSummary_avatars {
padding: 0;
margin: 0 9px 0 0;
}
+
.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
left: calc(var(--name-width) + 24px);
top: 0;
}
+
.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line {
left: calc(var(--name-width) + 24px);
}
+
.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_TextualEvent {
line-height: 1.8rem;
}
+
.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,
.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
padding-left: 0;
border-left: 0;
}
-.mx_IRCLayout .mx_SenderProfile_hover {
- background-color: #fff;
- overflow: hidden;
-}
-.mx_IRCLayout .mx_SenderProfile_hover > span {
+
+.mx_IRCLayout .mx_SenderProfile {
+ width: var(--name-width);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-}
-.mx_IRCLayout .mx_SenderProfile_hover > span > .mx_SenderProfile_name {
- overflow: hidden;
- text-overflow: ellipsis;
- min-width: var(--name-width);
- text-align: end;
-}
-.mx_IRCLayout .mx_SenderProfile:hover {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
-.mx_IRCLayout .mx_SenderProfile_hover:hover {
+
+.mx_IRCLayout .mx_SenderProfile > .mx_SenderProfile_displayName {
+ width: 100%;
+ text-align: end;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.mx_IRCLayout .mx_SenderProfile > .mx_SenderProfile_mxid {
+ visibility: collapse;
+}
+
+.mx_IRCLayout .mx_SenderProfile:hover {
overflow: visible;
- width: max(auto, 100%);
z-index: 10;
}
+
+.mx_IRCLayout .mx_SenderProfile:hover > .mx_SenderProfile_displayName {
+ overflow: visible;
+}
+
+.mx_IRCLayout .mx_SenderProfile:hover > .mx_SenderProfile_mxid {
+ visibility: visible;
+}
+
.mx_IRCLayout .mx_ReplyThread {
margin: 0;
}
+
.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile {
+ -webkit-box-ordinal-group: unset;
+ -ms-flex-order: unset;
+ order: unset;
+ max-width: unset;
width: unset;
- max-width: var(--name-width);
-}
-.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile_hover {
background: transparent;
}
-.mx_IRCLayout
- .mx_ReplyThread
- .mx_SenderProfile_hover
- > span
- > .mx_SenderProfile_name {
- min-width: inherit;
-}
+
.mx_IRCLayout .mx_ReplyThread .mx_EventTile_emote > .mx_EventTile_avatar {
margin-left: 0;
}
+
.mx_IRCLayout .mx_ReplyThread .mx_MessageTimestamp {
width: auto;
}
+
.mx_IRCLayout .mx_ReplyThread .mx_EventTile_e2eIcon {
position: relative;
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
+
.mx_IRCLayout .mx_ProfileResizer {
position: absolute;
height: 100%;
@@ -14897,10 +19692,12 @@ span.mx_MVideoBody video.mx_MVideoBody {
cursor: col-resize;
z-index: 100;
}
+
.mx_IRCLayout .mx_Flair > img {
height: 1.4rem !important;
width: 1.4rem !important;
}
+
.mx_JumpToBottomButton {
z-index: 1000;
position: absolute;
@@ -14910,6 +19707,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
height: 50px;
text-align: center;
}
+
.mx_JumpToBottomButton_badge {
position: relative;
top: -12px;
@@ -14923,12 +19721,15 @@ span.mx_MVideoBody video.mx_MVideoBody {
color: #fff;
background-color: #61708b;
}
+
.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
color: #f2f5f8;
background-color: #ff4b55;
}
+
.mx_JumpToBottomButton_scrollDown {
position: relative;
+ display: block;
height: 38px;
border-radius: 19px;
-webkit-box-sizing: border-box;
@@ -14937,6 +19738,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
border: 1.3px solid #61708b;
cursor: pointer;
}
+
.mx_JumpToBottomButton_scrollDown:before {
content: "";
position: absolute;
@@ -14952,6 +19754,30 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-size: contain;
background: #61708b;
}
+
+.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide {
+ cursor: pointer;
+ width: 18px;
+ height: 18px;
+}
+
+.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide img {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 40px;
+ flex: 0 0 40px;
+ visibility: hidden;
+}
+
+.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide.focus-visible:focus img,
+.mx_LinkPreviewGroup:hover .mx_LinkPreviewGroup_hide img {
+ visibility: visible;
+}
+
+.mx_LinkPreviewGroup > .mx_AccessibleButton {
+ color: #0dbd8b;
+ text-align: center;
+}
+
.mx_LinkPreviewWidget {
margin-top: 15px;
margin-right: 15px;
@@ -14959,9 +19785,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- border-left: 4px solid #ddd;
+ border-left: 2px solid #ddd;
+ border-radius: 2px;
color: #888;
}
+
.mx_LinkPreviewWidget_image {
-webkit-box-flex: 0;
-ms-flex: 0 0 100px;
@@ -14970,44 +19798,42 @@ span.mx_MVideoBody video.mx_MVideoBody {
text-align: center;
cursor: pointer;
}
+
.mx_LinkPreviewWidget_caption {
margin-left: 15px;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
+ overflow: hidden;
}
+
.mx_LinkPreviewWidget_title {
- display: inline;
font-weight: 700;
white-space: normal;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
}
-.mx_LinkPreviewWidget_siteName {
- display: inline;
+
+.mx_LinkPreviewWidget_title .mx_LinkPreviewWidget_siteName {
+ font-weight: 400;
}
+
.mx_LinkPreviewWidget_description {
margin-top: 8px;
white-space: normal;
word-wrap: break-word;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
}
-.mx_LinkPreviewWidget_cancel {
- cursor: pointer;
- width: 18px;
- height: 18px;
-}
-.mx_LinkPreviewWidget_cancel img {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 40px;
- flex: 0 0 40px;
- visibility: hidden;
-}
-.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel img,
-.mx_LinkPreviewWidget_cancel.focus-visible:focus img {
- visibility: visible;
-}
+
.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget {
margin-top: 6px;
margin-bottom: 6px;
}
+
.mx_MemberInfo {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
@@ -15019,20 +19845,24 @@ span.mx_MVideoBody video.mx_MVideoBody {
overflow-y: auto;
margin-top: 8px;
}
+
.mx_MemberInfo,
.mx_MemberInfo_name {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_MemberInfo_name {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
+
.mx_MemberInfo_name > .mx_E2EIcon {
margin-right: 0;
}
+
.mx_MemberInfo_cancel {
height: 16px;
width: 16px;
@@ -15046,6 +19876,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-position: 16px center;
background-color: #91a1c0;
}
+
.mx_MemberInfo_name h2 {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -15053,27 +19884,34 @@ span.mx_MVideoBody video.mx_MVideoBody {
overflow-x: auto;
max-height: 50px;
}
+
.mx_MemberInfo h2 {
font-size: 1.8rem;
font-weight: 600;
margin: 16px 0 16px 15px;
}
+
.mx_MemberInfo_container {
margin: 0 16px 16px;
}
+
.mx_MemberInfo .mx_RoomTile_nameContainer {
width: 154px;
}
+
.mx_MemberInfo .mx_RoomTile_badge {
display: none;
}
+
.mx_MemberInfo .mx_RoomTile_name {
width: 160px;
}
+
.mx_MemberInfo_avatar {
background: hsla(0, 0%, 91%, 0.77);
margin-bottom: 16px;
}
+
.mx_MemberInfo_avatar > img {
height: auto;
width: 100%;
@@ -15082,13 +19920,16 @@ span.mx_MVideoBody video.mx_MVideoBody {
object-fit: contain;
display: block;
}
+
.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
+
.mx_MemberInfo_profile {
margin-bottom: 16px;
}
+
.mx_MemberInfo h3 {
text-transform: uppercase;
color: #9fa9ba;
@@ -15096,13 +19937,16 @@ span.mx_MVideoBody video.mx_MVideoBody {
font-size: 1.2rem;
margin: 4px 0;
}
+
.mx_MemberInfo_profileField {
font-size: 1.5rem;
position: relative;
}
+
.mx_MemberInfo_buttons {
margin-bottom: 16px;
}
+
.mx_MemberInfo_field {
cursor: pointer;
font-size: 1.5rem;
@@ -15110,6 +19954,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-left: 8px;
line-height: 2.3rem;
}
+
.mx_MemberInfo_createRoom {
cursor: pointer;
display: -webkit-box;
@@ -15120,23 +19965,28 @@ span.mx_MVideoBody video.mx_MVideoBody {
align-items: center;
padding: 0 8px;
}
+
.mx_MemberInfo_createRoom_label {
width: auto !important;
cursor: pointer;
}
+
.mx_MemberInfo label {
font-size: 1.3rem;
}
+
.mx_MemberInfo label .mx_MemberInfo_label_text {
display: inline-block;
max-width: 180px;
vertical-align: text-top;
}
+
.mx_MemberInfo input[type="radio"] {
vertical-align: -2px;
margin-right: 5px;
margin-left: 8px;
}
+
.mx_MemberInfo_statusMessage {
font-size: 1.1rem;
opacity: 0.5;
@@ -15144,11 +19994,13 @@ span.mx_MVideoBody video.mx_MVideoBody {
white-space: nowrap;
text-overflow: clip;
}
+
.mx_MemberInfo .mx_MemberInfo_scrollContainer {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
+
.mx_GroupMemberList,
.mx_GroupRoomList,
.mx_MemberList {
@@ -15164,6 +20016,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
flex-direction: column;
min-height: 0;
}
+
.mx_GroupMemberList .mx_Spinner,
.mx_GroupRoomList .mx_Spinner,
.mx_MemberList .mx_Spinner {
@@ -15171,11 +20024,13 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
+
.mx_GroupMemberList .mx_SearchBox,
.mx_GroupRoomList .mx_SearchBox,
.mx_MemberList .mx_SearchBox {
margin-bottom: 5px;
}
+
.mx_GroupMemberList h2,
.mx_GroupRoomList h2,
.mx_MemberList h2 {
@@ -15188,6 +20043,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-top: 8px;
margin-bottom: 4px;
}
+
.mx_GroupMemberList .mx_AutoHideScrollbar,
.mx_GroupRoomList .mx_AutoHideScrollbar,
.mx_MemberList .mx_AutoHideScrollbar {
@@ -15195,22 +20051,26 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex: 1 1 0px;
flex: 1 1 0;
}
+
.mx_GroupMemberList .mx_RightPanel_scopeHeader,
.mx_GroupRoomList .mx_RightPanel_scopeHeader,
.mx_MemberList .mx_RightPanel_scopeHeader {
margin-top: -8px;
}
+
.mx_GroupMemberList_query,
.mx_GroupRoomList_query {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
+
.mx_MemberList_chevron {
position: absolute;
right: 35px;
margin-top: -15px;
}
+
.mx_MemberList_border {
overflow-y: auto;
-webkit-box-ordinal-group: 2;
@@ -15220,15 +20080,19 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex: 1 1 0px;
flex: 1 1 0px;
}
+
.mx_MemberList_query {
height: 16px;
}
+
.mx_MemberList_query[type="text"] {
font-size: 1.2rem;
}
+
.mx_MemberList_wrapper {
padding: 10px;
}
+
.mx_MemberList_invite {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
@@ -15246,16 +20110,19 @@ span.mx_MVideoBody video.mx_MVideoBody {
color: #fff;
font-weight: 600;
}
+
.mx_MemberList_invite.mx_AccessibleButton_disabled {
background-color: #888;
cursor: not-allowed;
}
+
.mx_MemberList_invite span {
padding: 8px 0;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
+
.mx_MemberList_invite span:before {
content: "";
display: inline-block;
@@ -15272,14 +20139,17 @@ span.mx_MVideoBody video.mx_MVideoBody {
height: 20px;
margin-right: 5px;
}
+
.mx_MemberList_inviteCommunity span:before {
-webkit-mask-image: url(../../img/icon-invite-people.d82f491.svg);
mask-image: url(../../img/icon-invite-people.d82f491.svg);
}
+
.mx_MemberList_addRoomToCommunity span:before {
-webkit-mask-image: url(../../img/icons-room-add.bd36e26.svg);
mask-image: url(../../img/icons-room-add.bd36e26.svg);
}
+
.mx_MessageComposer_wrapper {
vertical-align: middle;
margin: auto;
@@ -15288,15 +20158,18 @@ span.mx_MVideoBody video.mx_MVideoBody {
padding-left: 82px;
padding-right: 6px;
}
+
.mx_MessageComposer_replaced_wrapper {
margin-left: auto;
margin-right: auto;
}
+
.mx_MessageComposer_replaced_valign {
height: 60px;
display: table-cell;
vertical-align: middle;
}
+
.mx_MessageComposer_roomReplaced_icon {
float: left;
margin-right: 20px;
@@ -15304,13 +20177,16 @@ span.mx_MVideoBody video.mx_MVideoBody {
width: 31px;
height: 31px;
}
+
.mx_MessageComposer_roomReplaced_header {
font-weight: 700;
}
+
.mx_MessageComposer_autocomplete_wrapper {
position: relative;
height: 0;
}
+
.mx_MessageComposer_row {
display: -webkit-box;
display: -ms-flexbox;
@@ -15324,16 +20200,20 @@ span.mx_MVideoBody video.mx_MVideoBody {
align-items: center;
width: 100%;
}
+
.mx_MessageComposer .mx_MessageComposer_avatar {
position: absolute;
left: 26px;
}
+
.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
display: block;
}
+
.mx_MessageComposer_composecontrols {
width: 100%;
}
+
.mx_MessageComposer_e2eIcon.mx_E2EIcon {
position: absolute;
left: 60px;
@@ -15342,6 +20222,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
width: 12px;
height: 12px;
}
+
.mx_MessageComposer_noperm_error {
width: 100%;
height: 60px;
@@ -15357,9 +20238,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_MessageComposer_input_wrapper {
cursor: text;
}
+
.mx_MessageComposer_input,
.mx_MessageComposer_input_wrapper {
-webkit-box-flex: 1;
@@ -15373,6 +20256,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_MessageComposer_input {
vertical-align: middle;
min-height: 60px;
@@ -15385,6 +20269,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
font-size: 1.4rem;
margin-right: 6px;
}
+
.mx_MessageComposer_editor {
width: 100%;
max-height: 120px;
@@ -15393,12 +20278,15 @@ span.mx_MVideoBody video.mx_MVideoBody {
overflow-x: hidden;
word-break: break-word;
}
+
.mx_MessageComposer_editor > :first-child {
margin-top: 0 !important;
}
+
.mx_MessageComposer_editor > :last-child {
margin-bottom: 0 !important;
}
+
@keyframes visualbell {
0% {
background-color: #faa;
@@ -15407,21 +20295,25 @@ span.mx_MVideoBody video.mx_MVideoBody {
background-color: #fff;
}
}
+
.mx_MessageComposer_input_error {
-webkit-animation: visualbell 0.2s;
animation: visualbell 0.2s;
}
+
.mx_MessageComposer_input blockquote {
color: #777;
margin: 0 0 16px;
padding: 0 15px;
border-left: 4px solid #ddd;
}
+
.mx_MessageComposer_input pre {
background-color: rgba(0, 0, 0, 0.04);
border-radius: 3px;
padding: 10px;
}
+
.mx_MessageComposer_input textarea {
display: block;
width: 100%;
@@ -15438,22 +20330,28 @@ span.mx_MVideoBody video.mx_MVideoBody {
font-size: 1.4rem;
max-height: 120px;
overflow: auto;
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
}
+
.mx_MessageComposer_input textarea::-moz-placeholder {
line-height: 100%;
color: #0dbd8b;
opacity: 1;
}
+
.mx_MessageComposer_input textarea::-webkit-input-placeholder {
color: #0dbd8b;
}
+
.mx_MessageComposer_button_highlight {
background: rgba(13, 189, 139, 0.25);
}
+
.mx_MessageComposer_button_highlight:before {
background-color: #0dbd8b !important;
}
+
.mx_MessageComposer_button {
position: relative;
margin-right: 6px;
@@ -15462,6 +20360,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
width: 26px;
border-radius: 100%;
}
+
.mx_MessageComposer_button:before {
content: "";
position: absolute;
@@ -15477,31 +20376,39 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_MessageComposer_button:hover {
background: rgba(13, 189, 139, 0.1);
}
+
.mx_MessageComposer_button:hover:before {
background-color: #0dbd8b;
}
+
.mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled):before {
background-color: #ff4b55;
}
+
.mx_MessageComposer_upload:before {
- -webkit-mask-image: url(../icons/attach.svg);
- mask-image: url(../icons/attach.svg);
+ -webkit-mask-image: url(../../img/element-icons/room/composer/attach.359c84e.svg);
+ mask-image: url(../../img/element-icons/room/composer/attach.359c84e.svg);
}
+
.mx_MessageComposer_voiceMessage:before {
-webkit-mask-image: url(../../img/voip/mic-on-mask.97ec7a0.svg);
mask-image: url(../../img/voip/mic-on-mask.97ec7a0.svg);
}
+
.mx_MessageComposer_emoji:before {
-webkit-mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
}
+
.mx_MessageComposer_stickers:before {
-webkit-mask-image: url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);
mask-image: url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);
}
+
.mx_MessageComposer_sendMessage {
cursor: pointer;
position: relative;
@@ -15511,6 +20418,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
border-radius: 100%;
background-color: #0dbd8b;
}
+
.mx_MessageComposer_sendMessage:before {
position: absolute;
height: 16px;
@@ -15528,18 +20436,21 @@ span.mx_MVideoBody video.mx_MVideoBody {
background-color: #fff;
content: "";
}
+
.mx_MessageComposer_formatting {
cursor: pointer;
margin: 0 11px;
width: 24px;
height: 18px;
}
+
.mx_MessageComposer_formatbar_wrapper {
width: 100%;
background-color: #fff;
-webkit-box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
}
+
.mx_MessageComposer_formatbar {
margin: auto;
display: -webkit-box;
@@ -15559,27 +20470,33 @@ span.mx_MVideoBody video.mx_MVideoBody {
font-size: 1rem;
color: #888;
}
+
.mx_MessageComposer_formatbar * {
margin-right: 4px;
}
+
.mx_MessageComposer_format_button,
.mx_MessageComposer_formatbar_cancel,
.mx_MessageComposer_formatbar_markdown {
cursor: pointer;
}
+
.mx_MessageComposer_formatbar_cancel {
margin-right: 22px;
}
+
.mx_MessageComposer_formatbar_markdown {
height: 17px;
width: 30px;
margin-right: 64px;
}
+
.mx_MessageComposer_input_markdownIndicator {
height: 10px;
width: 12px;
padding: 4px 4px 4px 0;
}
+
.mx_MessageComposer_formatbar_markdown,
.mx_MessageComposer_input_markdownIndicator {
cursor: pointer;
@@ -15593,16 +20510,20 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-repeat: no-repeat;
background-color: #c1c6cd;
}
+
.mx_MessageComposer_formatbar_markdown.mx_MessageComposer_markdownDisabled,
.mx_MessageComposer_input_markdownIndicator.mx_MessageComposer_markdownDisabled {
opacity: 0.2;
}
+
.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input {
min-height: 50px;
}
+
.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error {
height: 50px;
}
+
.mx_MessageComposerFormatBar {
display: none;
width: 130px;
@@ -15617,9 +20538,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
user-select: none;
z-index: 1000;
}
+
.mx_MessageComposerFormatBar.mx_MessageComposerFormatBar_shown {
display: block;
}
+
.mx_MessageComposerFormatBar > * {
white-space: nowrap;
display: inline-block;
@@ -15627,19 +20550,24 @@ span.mx_MVideoBody video.mx_MVideoBody {
border: 1px solid #e9edf1;
margin-left: -1px;
}
+
.mx_MessageComposerFormatBar > :hover {
border-color: #ddd;
z-index: 1;
}
+
.mx_MessageComposerFormatBar > :first-child {
border-radius: 3px 0 0 3px;
}
+
.mx_MessageComposerFormatBar > :last-child {
border-radius: 0 3px 3px 0;
}
+
.mx_MessageComposerFormatBar > :only-child {
border-radius: 3px;
}
+
.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button {
width: 27px;
height: 24px;
@@ -15648,6 +20576,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
background: none;
vertical-align: middle;
}
+
.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:after {
content: "";
position: absolute;
@@ -15661,29 +20590,35 @@ span.mx_MVideoBody video.mx_MVideoBody {
mask-position: center;
background-color: #2e2f32;
}
+
.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconBold:after {
-webkit-mask-image: url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);
mask-image: url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);
}
+
.mx_MessageComposerFormatBar
.mx_MessageComposerFormatBar_buttonIconItalic:after {
-webkit-mask-image: url(../../img/element-icons/room/format-bar/italic.bf18054.svg);
mask-image: url(../../img/element-icons/room/format-bar/italic.bf18054.svg);
}
+
.mx_MessageComposerFormatBar
.mx_MessageComposerFormatBar_buttonIconStrikethrough:after {
-webkit-mask-image: url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);
mask-image: url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);
}
+
.mx_MessageComposerFormatBar
.mx_MessageComposerFormatBar_buttonIconQuote:after {
-webkit-mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
}
+
.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconCode:after {
-webkit-mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
}
+
.mx_MessageComposerFormatBar_buttonTooltip {
white-space: nowrap;
font-size: 1.3rem;
@@ -15691,37 +20626,44 @@ span.mx_MVideoBody video.mx_MVideoBody {
min-width: 54px;
text-align: center;
}
+
.mx_MessageComposerFormatBar_buttonTooltip
.mx_MessageComposerFormatBar_tooltipShortcut {
font-size: 0.9rem;
opacity: 0.7;
}
+
.mx_NewRoomIntro {
margin: 40px 0 48px 64px;
}
+
.mx_NewRoomIntro
- .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):after,
-.mx_NewRoomIntro
- .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover):before {
- content: unset;
+ .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover)
+ .mx_MiniAvatarUploader_indicator {
+ display: none;
}
+
.mx_NewRoomIntro .mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit;
}
+
.mx_NewRoomIntro .mx_NewRoomIntro_buttons {
margin-top: 28px;
}
+
.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton {
line-height: 2.4rem;
display: inline-block;
}
+
.mx_NewRoomIntro
.mx_NewRoomIntro_buttons
.mx_AccessibleButton
+ .mx_AccessibleButton {
margin-left: 12px;
}
+
.mx_NewRoomIntro
.mx_NewRoomIntro_buttons
.mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary_outline):before {
@@ -15739,23 +20681,28 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-right: 5px;
vertical-align: text-bottom;
}
+
.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_NewRoomIntro_inviteButton:before {
-webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
}
+
.mx_NewRoomIntro > h2 {
margin-top: 24px;
font-size: 2.4rem;
font-weight: 600;
}
+
.mx_NewRoomIntro > p {
margin: 0;
font-size: 1.5rem;
color: #737d8c;
}
+
.mx_NotificationBadge:not(.mx_NotificationBadge_visible) {
display: none;
}
+
.mx_NotificationBadge.mx_NotificationBadge_visible {
background-color: #61708b;
display: -webkit-box;
@@ -15768,103 +20715,129 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_highlighted {
background-color: #ff4b55;
}
+
.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot {
background-color: #2e2f32;
width: 6px;
height: 6px;
border-radius: 6px;
}
+
.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char {
width: 1.6rem;
height: 1.6rem;
border-radius: 1.6rem;
}
+
.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_3char {
width: 2.6rem;
height: 1.6rem;
border-radius: 1.6rem;
}
+
.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count {
font-size: 1rem;
line-height: 1.4rem;
color: #fff;
}
+
.mx_PinnedEventTile {
min-height: 40px;
- margin-bottom: 5px;
width: 100%;
- border-radius: 5px;
+ padding: 0 4px 12px;
+ display: grid;
+ grid-template-areas: "avatar name remove" "content content content" "footer footer footer";
+ grid-template-rows: -webkit-max-content auto -webkit-max-content;
+ grid-template-rows: max-content auto max-content;
+ grid-template-columns: 24px auto 24px;
+ grid-row-gap: 12px;
+ grid-column-gap: 8px;
}
-.mx_PinnedEventTile:hover {
- background-color: #f6f7f8;
+
+.mx_PinnedEventTile + .mx_PinnedEventTile {
+ padding: 12px 4px;
+ border-top: 1px solid #e7e7e7;
}
-.mx_PinnedEventTile .mx_PinnedEventTile_sender,
-.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
- color: #868686;
- font-size: 0.8em;
- vertical-align: top;
- display: inline-block;
- padding-bottom: 3px;
+
+.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar {
+ grid-area: avatar;
}
-.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
- padding-left: 15px;
- display: none;
+
+.mx_PinnedEventTile .mx_PinnedEventTile_sender {
+ grid-area: name;
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
}
-.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar {
- float: left;
- margin-right: 10px;
-}
-.mx_PinnedEventTile_actions {
- float: right;
- margin-right: 10px;
- display: none;
-}
-.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp {
- display: inline-block;
-}
-.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
- display: block;
-}
-.mx_PinnedEventTile_unpinButton {
- display: inline-block;
- cursor: pointer;
- margin-left: 10px;
-}
-.mx_PinnedEventTile_gotoButton {
- display: inline-block;
- font-size: 0.7em;
-}
-.mx_PinnedEventTile_message {
- margin-left: 50px;
+
+.mx_PinnedEventTile .mx_PinnedEventTile_unpinButton {
+ visibility: hidden;
+ grid-area: remove;
position: relative;
- top: 0;
- left: 0;
+ width: 24px;
+ height: 24px;
+ border-radius: 8px;
}
-.mx_PinnedEventsPanel {
- border-top: 1px solid transparent;
+
+.mx_PinnedEventTile .mx_PinnedEventTile_unpinButton:hover {
+ background-color: rgba(92, 100, 112, 0.2);
}
-.mx_PinnedEventsPanel_body {
- max-height: 300px;
- overflow-y: auto;
- padding-bottom: 15px;
+
+.mx_PinnedEventTile .mx_PinnedEventTile_unpinButton:before {
+ content: "";
+ position: absolute;
+ height: inherit;
+ width: inherit;
+ background: #737d8c;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: 8px;
+ mask-size: 8px;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-image: url(../../img/image-view/close.97d1731.svg);
+ mask-image: url(../../img/image-view/close.97d1731.svg);
}
-.mx_PinnedEventsPanel_header {
- margin: 0;
- padding-top: 8px;
- padding-bottom: 15px;
+
+.mx_PinnedEventTile .mx_PinnedEventTile_message {
+ grid-area: content;
}
-.mx_PinnedEventsPanel_cancel {
- margin: 12px;
- float: right;
- display: inline-block;
+
+.mx_PinnedEventTile .mx_PinnedEventTile_footer {
+ grid-area: footer;
+ font-size: 10px;
+ line-height: 12px;
}
+
+.mx_PinnedEventTile .mx_PinnedEventTile_footer .mx_PinnedEventTile_timestamp {
+ font-size: inherit;
+ line-height: inherit;
+ color: #737d8c;
+}
+
+.mx_PinnedEventTile .mx_PinnedEventTile_footer .mx_AccessibleButton_kind_link {
+ padding: 0;
+ margin-left: 12px;
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.mx_PinnedEventTile:hover .mx_PinnedEventTile_unpinButton {
+ visibility: visible;
+}
+
.mx_PresenceLabel {
font-size: 1.1rem;
opacity: 0.5;
}
+
.mx_ReplyPreview {
background: #fff;
border: 1px solid transparent;
@@ -15875,25 +20848,137 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
}
-.mx_ReplyPreview_section {
+
+.mx_ReplyPreview .mx_ReplyPreview_section {
border-bottom: 1px solid transparent;
}
-.mx_ReplyPreview_header {
- margin: 12px;
+
+.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_header {
+ margin: 8px;
color: #2e2f32;
font-weight: 400;
opacity: 0.4;
}
-.mx_ReplyPreview_title {
+
+.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_tile {
+ margin: 0 8px;
+}
+
+.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_title {
float: left;
}
-.mx_ReplyPreview_cancel {
+
+.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_cancel {
float: right;
cursor: pointer;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
}
-.mx_ReplyPreview_clear {
+
+.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_clear {
clear: both;
}
+
+.mx_ReplyTile {
+ position: relative;
+ padding: 2px 0;
+ font-size: 1.4rem;
+ line-height: 1.6rem;
+}
+
+.mx_ReplyTile.mx_ReplyTile_audio .mx_MFileBody_info_icon:before {
+ -webkit-mask-image: url(../../img/element-icons/speaker.7124b41.svg);
+ mask-image: url(../../img/element-icons/speaker.7124b41.svg);
+}
+
+.mx_ReplyTile.mx_ReplyTile_video .mx_MFileBody_info_icon:before {
+ -webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
+ mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
+}
+
+.mx_ReplyTile .mx_MFileBody .mx_MFileBody_info {
+ margin: 5px 0;
+}
+
+.mx_ReplyTile .mx_MFileBody .mx_MFileBody_download {
+ display: none;
+}
+
+.mx_ReplyTile > a {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ text-decoration: none;
+ color: #2e2f32;
+}
+
+.mx_ReplyTile .mx_RedactedBody {
+ padding: 4px 0 2px 20px;
+}
+
+.mx_ReplyTile .mx_RedactedBody:before {
+ height: 13px;
+ width: 13px;
+ top: 5px;
+}
+
+.mx_ReplyTile .mx_EventTile_content {
+ pointer-events: none;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ line-height: 2.2rem;
+}
+
+.mx_ReplyTile .mx_EventTile_content .mx_EventTile_body.mx_EventTile_bigEmoji {
+ line-height: 2.2rem !important;
+ font-size: 1.4rem !important;
+}
+
+.mx_ReplyTile .mx_EventTile_content .mx_EventTile_lineNumbers {
+ display: none;
+}
+
+.mx_ReplyTile .mx_EventTile_content .mx_EventTile_pre_container > pre {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ padding: 4px;
+}
+
+.mx_ReplyTile .mx_EventTile_content .markdown-body blockquote,
+.mx_ReplyTile .mx_EventTile_content .markdown-body dl,
+.mx_ReplyTile .mx_EventTile_content .markdown-body ol,
+.mx_ReplyTile .mx_EventTile_content .markdown-body p,
+.mx_ReplyTile .mx_EventTile_content .markdown-body pre,
+.mx_ReplyTile .mx_EventTile_content .markdown-body table,
+.mx_ReplyTile .mx_EventTile_content .markdown-body ul {
+ margin-bottom: 4px;
+}
+
+.mx_ReplyTile.mx_ReplyTile_info {
+ padding-top: 0;
+}
+
+.mx_ReplyTile .mx_SenderProfile {
+ font-size: 1.4rem;
+ line-height: 1.7rem;
+ display: inline-block;
+ padding: 0;
+ margin: 0;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
.mx_RoomBreadcrumbs {
width: 100%;
display: -webkit-box;
@@ -15907,28 +20992,39 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-align: start;
align-items: flex-start;
}
+
.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb {
margin-right: 8px;
width: 32px;
}
+
.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter {
- margin-left: -40px;
+ -webkit-transform: translateX(-40px);
+ transform: translateX(-40px);
}
+
.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter-active {
- margin-left: 0;
- -webkit-transition: margin-left 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
- transition: margin-left 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ -webkit-transition: -webkit-transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
+ transition: -webkit-transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
+ transition: transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
+ transition: transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1),
+ -webkit-transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
}
+
.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_placeholder {
font-weight: 600;
font-size: 1.4rem;
line-height: 32px;
height: 32px;
}
+
.mx_RoomBreadcrumbs_Tooltip {
margin-left: -42px;
margin-top: -42px;
}
+
.mx_RoomHeader {
-webkit-box-flex: 0;
-ms-flex: 0 0 50px;
@@ -15936,16 +21032,19 @@ span.mx_MVideoBody video.mx_MVideoBody {
border-bottom: 1px solid transparent;
background-color: #fff;
}
+
.mx_RoomHeader .mx_RoomHeader_e2eIcon {
height: 12px;
width: 12px;
}
+
.mx_RoomHeader .mx_RoomHeader_e2eIcon .mx_E2EIcon {
margin: 0;
position: absolute;
height: 12px;
width: 12px;
}
+
.mx_RoomHeader_wrapper {
margin: auto;
height: 50px;
@@ -15958,9 +21057,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
min-width: 0;
padding: 0 10px 0 18px;
}
+
.mx_RoomHeader_wrapper .mx_InviteOnlyIcon_large {
margin: 0;
}
+
.mx_RoomHeader_spinner {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -15969,11 +21070,13 @@ span.mx_MVideoBody video.mx_MVideoBody {
padding-left: 12px;
padding-right: 12px;
}
+
.mx_RoomHeader_textButton {
vertical-align: middle;
border: 0;
border-radius: 8px;
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
font-size: 1.4rem;
color: #fff;
background-color: #0dbd8b;
@@ -15985,23 +21088,28 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin-right: 8px;
margin-top: -5px;
}
+
.mx_RoomHeader_textButton_danger {
background-color: #ff4b55;
}
+
.mx_RoomHeader_cancelButton {
cursor: pointer;
padding-left: 12px;
padding-right: 12px;
}
+
.mx_RoomHeader_buttons {
background-color: #fff;
}
+
.mx_RoomHeader_buttons,
.mx_RoomHeader_info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_RoomHeader_info {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -16010,6 +21118,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-align: center;
align-items: center;
}
+
.mx_RoomHeader_simpleHeader {
line-height: 5.2rem;
color: #45474a;
@@ -16020,14 +21129,17 @@ span.mx_MVideoBody video.mx_MVideoBody {
text-overflow: ellipsis;
width: 100%;
}
+
.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton {
float: right;
}
+
.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon {
margin-left: 14px;
margin-right: 24px;
vertical-align: -4px;
}
+
.mx_RoomHeader_name {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
@@ -16042,18 +21154,22 @@ span.mx_MVideoBody video.mx_MVideoBody {
display: -ms-flexbox;
display: flex;
}
+
.mx_RoomHeader_nametext {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
+
.mx_RoomHeader_settingsHint {
color: #a2a2a2 !important;
}
+
.mx_RoomHeader_searchStatus {
font-weight: 400;
opacity: 0.6;
}
+
.mx_RoomHeader_avatar,
.mx_RoomHeader_avatarPicker,
.mx_RoomHeader_avatarPicker_edit,
@@ -16061,28 +21177,34 @@ span.mx_MVideoBody video.mx_MVideoBody {
.mx_RoomHeader_name {
cursor: pointer;
}
+
.mx_RoomHeader_avatarPicker_remove {
position: absolute;
top: -11px;
right: -9px;
}
+
.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
color: #0dbd8b;
}
+
.mx_RoomHeader_placeholder {
color: #a2a2a2 !important;
}
+
.mx_RoomHeader_editable {
border-bottom: 1px solid #c7c7c7 !important;
min-width: 150px;
cursor: text;
}
+
.mx_RoomHeader_editable:focus {
border-bottom: 1px solid #0dbd8b !important;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
+
.mx_RoomHeader_topic {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -16097,6 +21219,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
line-height: 1.2em;
max-height: 2.4em;
}
+
.mx_RoomHeader_avatar {
-webkit-box-flex: 0;
-ms-flex: 0;
@@ -16104,24 +21227,30 @@ span.mx_MVideoBody video.mx_MVideoBody {
margin: 0 6px 0 7px;
position: relative;
}
+
.mx_RoomHeader_avatar .mx_BaseAvatar_image {
-o-object-fit: cover;
object-fit: cover;
}
+
.mx_RoomHeader_avatarPicker {
position: relative;
}
+
.mx_RoomHeader_avatarPicker_edit {
position: absolute;
left: 16px;
top: 18px;
}
+
.mx_RoomHeader_avatarPicker_edit > label {
cursor: pointer;
}
+
.mx_RoomHeader_avatarPicker_edit > input {
display: none;
}
+
.mx_RoomHeader_button {
position: relative;
margin-left: 1px;
@@ -16131,6 +21260,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
width: 32px;
border-radius: 100%;
}
+
.mx_RoomHeader_button:before {
content: "";
position: absolute;
@@ -16144,28 +21274,35 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-size: contain;
mask-size: contain;
}
+
.mx_RoomHeader_button:hover {
background: rgba(13, 189, 139, 0.1);
}
+
.mx_RoomHeader_button:hover:before {
background-color: #0dbd8b;
}
+
.mx_RoomHeader_forgetButton:before {
-webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
mask-image: url(../../img/element-icons/leave.bb917e7.svg);
width: 26px;
}
+
.mx_RoomHeader_appsButton:before {
-webkit-mask-image: url(../../img/element-icons/room/apps.5ee9f78.svg);
mask-image: url(../../img/element-icons/room/apps.5ee9f78.svg);
}
+
.mx_RoomHeader_appsButton_highlight:before {
background-color: #0dbd8b;
}
+
.mx_RoomHeader_searchButton:before {
-webkit-mask-image: url(../../img/element-icons/room/search-inset.db6314d.svg);
mask-image: url(../../img/element-icons/room/search-inset.db6314d.svg);
}
+
.mx_RoomHeader_voiceCallButton:before {
-webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
@@ -16174,35 +21311,24 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_RoomHeader_videoCallButton:before {
-webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
}
+
.mx_RoomHeader_showPanel {
height: 16px;
}
+
.mx_RoomHeader_voipButton {
display: table-cell;
}
+
.mx_RoomHeader_voipButtons {
margin-top: 18px;
}
-.mx_RoomHeader_pinnedButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/pin.6ab67ed.svg);
- mask-image: url(../../img/element-icons/room/pin.6ab67ed.svg);
-}
-.mx_RoomHeader_pinsIndicator {
- position: absolute;
- right: 0;
- bottom: 4px;
- width: 8px;
- height: 8px;
- border-radius: 8px;
- background-color: #8d99a5;
-}
-.mx_RoomHeader_pinsIndicatorUnread {
- background-color: #ff4b55;
-}
+
@media only screen and (max-width: 480px) {
.mx_RoomHeader_wrapper {
padding: 0;
@@ -16211,40 +21337,49 @@ span.mx_MVideoBody video.mx_MVideoBody {
overflow: hidden;
}
}
+
.mx_RoomList {
padding-right: 7px;
}
+
.mx_RoomList_iconPlus:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
}
+
.mx_RoomList_iconHash:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
}
+
.mx_RoomList_iconExplore:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
}
+
.mx_RoomList_iconBrowse:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
}
+
.mx_RoomList_iconDialpad:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/dialpad.37f876f.svg);
mask-image: url(../../img/element-icons/roomlist/dialpad.37f876f.svg);
}
+
.mx_RoomList_explorePrompt {
margin: 4px 12px;
padding-top: 12px;
border-top: 1px solid #e7e7e7;
font-size: 1.4rem;
}
+
.mx_RoomList_explorePrompt div:first-child {
font-weight: 600;
line-height: 1.8rem;
color: #2e2f32;
}
+
.mx_RoomList_explorePrompt .mx_AccessibleButton {
color: #2e2f32;
position: relative;
@@ -16256,6 +21391,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
background-color: rgba(141, 151, 165, 0.2);
border-radius: 4px;
}
+
.mx_RoomList_explorePrompt .mx_AccessibleButton:before {
content: "";
width: 16px;
@@ -16271,26 +21407,31 @@ span.mx_MVideoBody video.mx_MVideoBody {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
+
.mx_RoomList_explorePrompt
.mx_AccessibleButton.mx_RoomList_explorePrompt_startChat:before {
-webkit-mask-image: url(../../img/element-icons/feedback.a91241e.svg);
mask-image: url(../../img/element-icons/feedback.a91241e.svg);
}
+
.mx_RoomList_explorePrompt
.mx_AccessibleButton.mx_RoomList_explorePrompt_explore:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
}
+
.mx_RoomList_explorePrompt
.mx_AccessibleButton.mx_RoomList_explorePrompt_spaceInvite:before {
-webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
}
+
.mx_RoomList_explorePrompt
.mx_AccessibleButton.mx_RoomList_explorePrompt_spaceExplore:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
}
+
.mx_RoomPreviewBar {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
@@ -16310,10 +21451,12 @@ span.mx_MVideoBody video.mx_MVideoBody {
display: flex;
-webkit-align-items: center;
}
+
.mx_RoomPreviewBar h3 {
font-size: 1.8rem;
font-weight: 600;
}
+
.mx_RoomPreviewBar h3.mx_RoomPreviewBar_spinnerTitle {
display: -webkit-box;
display: -ms-flexbox;
@@ -16326,11 +21469,13 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-align: center;
align-items: center;
}
+
.mx_RoomPreviewBar .mx_RoomPreviewBar_message p,
.mx_RoomPreviewBar h3 {
word-break: break-all;
word-break: break-word;
}
+
.mx_RoomPreviewBar .mx_Spinner {
width: auto;
height: auto;
@@ -16339,28 +21484,34 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
+
.mx_RoomPreviewBar .mx_RoomPreviewBar_footer {
font-size: 1.2rem;
line-height: 2rem;
}
+
.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner {
vertical-align: middle;
display: inline-block;
}
+
.mx_RoomPreviewBar_actions,
.mx_RoomPreviewBar_message {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_RoomPreviewBar_message {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
+
.mx_RoomPreviewBar_message p {
overflow-wrap: break-word;
}
+
.mx_RoomPreviewBar_panel {
padding: 8px 8px 8px 20px;
border-top: 1px solid transparent;
@@ -16369,6 +21520,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-direction: row;
flex-direction: row;
}
+
.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
@@ -16379,9 +21531,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
flex-direction: row;
padding: 3px 8px;
}
+
.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions > * {
margin-left: 12px;
}
+
.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
@@ -16395,9 +21549,11 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message > * {
margin: 4px;
}
+
.mx_RoomPreviewBar_dialog {
margin: auto;
-webkit-box-sizing: content;
@@ -16407,6 +21563,7 @@ span.mx_MVideoBody video.mx_MVideoBody {
padding: 20px;
text-align: center;
}
+
.mx_RoomPreviewBar_dialog,
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message {
-webkit-box-orient: vertical;
@@ -16414,40 +21571,50 @@ span.mx_MVideoBody video.mx_MVideoBody {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message > * {
margin: 5px 0 20px;
}
+
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
+
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton {
padding: 7px 50px;
}
+
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions > * {
margin-top: 12px;
}
+
.mx_RoomPreviewBar_dialog
.mx_RoomPreviewBar_actions
.mx_AccessibleButton.mx_AccessibleButton_kind_primary {
margin-bottom: 7px;
}
+
.mx_RoomPreviewBar_inviter {
font-weight: 600;
}
+
a.mx_RoomPreviewBar_inviter {
text-decoration: underline;
cursor: pointer;
}
+
.mx_RoomSublist {
margin-left: 8px;
margin-bottom: 4px;
}
+
.mx_RoomSublist.mx_RoomSublist_hidden {
display: none;
}
+
.mx_RoomSublist .mx_RoomSublist_headerContainer {
display: -webkit-box;
display: -ms-flexbox;
@@ -16459,6 +21626,7 @@ a.mx_RoomPreviewBar_inviter {
max-height: 24px;
color: #8d99a5;
}
+
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -16471,13 +21639,15 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-align: center;
align-items: center;
}
+
.mx_RoomSublist
.mx_RoomSublist_headerContainer
.mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky {
position: fixed;
height: 32px;
- width: calc(100% - 22px);
+ width: calc(100% - 15px);
}
+
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer {
display: -webkit-box;
display: -ms-flexbox;
@@ -16489,17 +21659,20 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_RoomSublist
.mx_RoomSublist_headerContainer
.mx_RoomSublist_badgeContainer
.mx_NotificationBadge {
margin-left: 8px;
}
+
.mx_RoomSublist
.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux)
.mx_NotificationBadge {
margin-right: 4px;
}
+
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton,
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
margin-left: 8px;
@@ -16508,6 +21681,7 @@ a.mx_RoomPreviewBar_inviter {
height: 24px;
border-radius: 8px;
}
+
.mx_RoomSublist
.mx_RoomSublist_headerContainer
.mx_RoomSublist_auxButton:before,
@@ -16528,29 +21702,34 @@ a.mx_RoomPreviewBar_inviter {
mask-repeat: no-repeat;
background: #61708b;
}
+
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover,
.mx_RoomSublist
.mx_RoomSublist_headerContainer
.mx_RoomSublist_menuButton:hover {
background: rgba(141, 151, 165, 0.2);
}
+
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
visibility: hidden;
width: 0;
margin: 0;
}
+
.mx_RoomSublist
.mx_RoomSublist_headerContainer
.mx_RoomSublist_auxButton:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/plus.daac9ba.svg);
mask-image: url(../../img/element-icons/roomlist/plus.daac9ba.svg);
}
+
.mx_RoomSublist
.mx_RoomSublist_headerContainer
.mx_RoomSublist_menuButton:before {
-webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
}
+
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -16563,6 +21742,7 @@ a.mx_RoomPreviewBar_inviter {
overflow: hidden;
white-space: nowrap;
}
+
.mx_RoomSublist
.mx_RoomSublist_headerContainer
.mx_RoomSublist_headerText
@@ -16573,6 +21753,7 @@ a.mx_RoomPreviewBar_inviter {
height: 14px;
margin-right: 6px;
}
+
.mx_RoomSublist
.mx_RoomSublist_headerContainer
.mx_RoomSublist_headerText
@@ -16591,6 +21772,7 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
}
+
.mx_RoomSublist
.mx_RoomSublist_headerContainer
.mx_RoomSublist_headerText
@@ -16598,15 +21780,18 @@ a.mx_RoomPreviewBar_inviter {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
+
.mx_RoomSublist:first-child .mx_RoomSublist_headerContainer {
height: 0;
padding-bottom: 4px;
}
+
.mx_RoomSublist .mx_RoomSublist_resizeBox {
position: relative;
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_RoomSublist .mx_RoomSublist_resizeBox,
.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles {
display: -webkit-box;
@@ -16616,15 +21801,19 @@ a.mx_RoomPreviewBar_inviter {
-webkit-box-direction: normal;
overflow: hidden;
}
+
.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
-ms-flex-direction: column;
flex-direction: column;
+ -ms-flex-item-align: stretch;
+ align-self: stretch;
-webkit-mask-image: linear-gradient(0deg, transparent, #000 4px);
mask-image: linear-gradient(0deg, transparent, #000 4px);
}
+
.mx_RoomSublist
.mx_RoomSublist_resizeBox
.mx_RoomSublist_resizerHandles_showNButton {
@@ -16632,6 +21821,7 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex: 0 0 32px;
flex: 0 0 32px;
}
+
.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles {
-webkit-box-flex: 0;
-ms-flex: 0 0 4px;
@@ -16644,6 +21834,7 @@ a.mx_RoomPreviewBar_inviter {
justify-content: center;
width: 100%;
}
+
.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandle {
cursor: ns-resize;
border-radius: 3px;
@@ -16652,6 +21843,7 @@ a.mx_RoomPreviewBar_inviter {
position: relative !important;
bottom: 0 !important;
}
+
.mx_RoomSublist
.mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen
.mx_RoomSublist_resizerHandle,
@@ -16659,6 +21851,7 @@ a.mx_RoomPreviewBar_inviter {
opacity: 0.8;
background-color: #2e2f32;
}
+
.mx_RoomSublist .mx_RoomSublist_showNButton {
cursor: pointer;
font-size: 1.3rem;
@@ -16673,6 +21866,7 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-align: center;
align-items: center;
}
+
.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron {
position: relative;
width: 18px;
@@ -16688,6 +21882,7 @@ a.mx_RoomPreviewBar_inviter {
background: #8d99a5;
left: -1px;
}
+
.mx_RoomSublist
.mx_RoomSublist_showNButton
.mx_RoomSublist_showLessButtonChevron,
@@ -16697,12 +21892,14 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
}
+
.mx_RoomSublist
.mx_RoomSublist_showNButton
.mx_RoomSublist_showLessButtonChevron {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
+
.mx_RoomSublist.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,
.mx_RoomSublist:not(.mx_RoomSublist_minimized)
> .mx_RoomSublist_headerContainer:focus-within
@@ -16714,6 +21911,7 @@ a.mx_RoomPreviewBar_inviter {
width: 24px;
margin-left: 8px;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer {
height: auto;
-webkit-box-orient: vertical;
@@ -16722,6 +21920,7 @@ a.mx_RoomPreviewBar_inviter {
flex-direction: column;
position: relative;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized
.mx_RoomSublist_headerContainer
.mx_RoomSublist_badgeContainer {
@@ -16732,6 +21931,7 @@ a.mx_RoomPreviewBar_inviter {
align-self: flex-end;
margin-right: 0;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized
.mx_RoomSublist_headerContainer
.mx_RoomSublist_stickable {
@@ -16740,6 +21940,7 @@ a.mx_RoomPreviewBar_inviter {
order: 1;
max-width: 100%;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized
.mx_RoomSublist_headerContainer
.mx_RoomSublist_auxButton {
@@ -16753,31 +21954,37 @@ a.mx_RoomPreviewBar_inviter {
background-color: rgba(141, 151, 165, 0.2);
margin-top: 8px;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized
.mx_RoomSublist_headerContainer
.mx_RoomSublist_auxButton:before {
top: 8px;
left: 8px;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_resizeBox {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized
.mx_RoomSublist_showNButton
.mx_RoomSublist_showNButtonChevron {
margin-right: 12px;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_menuButton {
height: 16px;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen
.mx_RoomSublist_menuButton,
.mx_RoomSublist.mx_RoomSublist_minimized
@@ -16793,6 +22000,7 @@ a.mx_RoomPreviewBar_inviter {
z-index: 1;
background-color: hsla(0, 0%, 96.1%, 0.9);
}
+
.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen
.mx_RoomSublist_menuButton:before,
.mx_RoomSublist.mx_RoomSublist_minimized
@@ -16801,6 +22009,7 @@ a.mx_RoomPreviewBar_inviter {
top: 0;
left: 0;
}
+
.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux)
.mx_RoomSublist_menuButton,
.mx_RoomSublist.mx_RoomSublist_minimized
@@ -16808,10 +22017,12 @@ a.mx_RoomPreviewBar_inviter {
.mx_RoomSublist_menuButton {
bottom: 8px;
}
+
.mx_RoomSublist_contextMenu {
padding: 20px 16px;
width: 250px;
}
+
.mx_RoomSublist_contextMenu hr {
margin-top: 16px;
margin-bottom: 16px;
@@ -16819,24 +22030,29 @@ a.mx_RoomPreviewBar_inviter {
border: 1px solid #2e2f32;
opacity: 0.1;
}
+
.mx_RoomSublist_contextMenu .mx_RoomSublist_contextMenu_title {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
margin-bottom: 4px;
}
+
.mx_RoomSublist_contextMenu .mx_Checkbox,
.mx_RoomSublist_contextMenu .mx_RadioButton {
margin-top: 8px;
}
+
.mx_RoomSublist_addRoomTooltip {
margin-top: -3px;
}
+
.mx_RoomSublist_skeletonUI {
position: relative;
margin-left: 4px;
height: 288px;
}
+
.mx_RoomSublist_skeletonUI:before {
background: -webkit-gradient(
linear,
@@ -16857,13 +22073,19 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-image: url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);
mask-image: url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);
}
+
.mx_RoomTile {
margin-bottom: 4px;
padding: 4px;
+ contain: content;
+ height: 40px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_RoomTile.mx_RoomTile_hasMenuOpen,
.mx_RoomTile.mx_RoomTile_selected,
.mx_RoomTile:focus-within,
@@ -16871,10 +22093,12 @@ a.mx_RoomPreviewBar_inviter {
background-color: #fff;
border-radius: 8px;
}
+
.mx_RoomTile .mx_DecoratedRoomAvatar,
.mx_RoomTile .mx_RoomTile_avatarContainer {
margin-right: 8px;
}
+
.mx_RoomTile .mx_RoomTile_nameContainer {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
@@ -16892,6 +22116,7 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview,
.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name {
margin: 0 2px;
@@ -16900,26 +22125,32 @@ a.mx_RoomPreviewBar_inviter {
overflow: hidden;
white-space: nowrap;
}
+
.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name {
font-size: 1.4rem;
line-height: 1.8rem;
}
+
.mx_RoomTile
.mx_RoomTile_nameContainer
.mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
font-weight: 600;
}
+
.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview {
font-size: 1.3rem;
line-height: 1.8rem;
color: #737d8c;
}
+
.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_nameWithPreview {
margin-top: -4px;
}
+
.mx_RoomTile .mx_RoomTile_notificationsButton {
margin-left: 4px;
}
+
.mx_RoomTile .mx_RoomTile_badgeContainer {
height: 16px;
margin: auto 0;
@@ -16930,13 +22161,16 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-align: center;
align-items: center;
}
+
.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge {
margin-right: 2px;
}
+
.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge_dot {
margin-left: 5px;
margin-right: 7px;
}
+
.mx_RoomTile .mx_RoomTile_menuButton,
.mx_RoomTile .mx_RoomTile_notificationsButton {
width: 20px;
@@ -16947,6 +22181,7 @@ a.mx_RoomPreviewBar_inviter {
position: relative;
display: none;
}
+
.mx_RoomTile .mx_RoomTile_menuButton:before,
.mx_RoomTile .mx_RoomTile_notificationsButton:before {
top: 2px;
@@ -16963,14 +22198,17 @@ a.mx_RoomPreviewBar_inviter {
mask-repeat: no-repeat;
background: #2e2f32;
}
+
.mx_RoomTile
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
display: block;
}
+
.mx_RoomTile .mx_RoomTile_menuButton:before {
-webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
}
+
.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen
.mx_RoomTile_badgeContainer,
.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within
@@ -16980,6 +22218,7 @@ a.mx_RoomPreviewBar_inviter {
height: 0;
display: none;
}
+
.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen
.mx_RoomTile_menuButton,
.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen
@@ -16992,6 +22231,7 @@ a.mx_RoomPreviewBar_inviter {
.mx_RoomTile_notificationsButton {
display: block;
}
+
.mx_RoomTile.mx_RoomTile_minimized {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
@@ -17002,46 +22242,62 @@ a.mx_RoomPreviewBar_inviter {
align-items: center;
position: relative;
}
+
.mx_RoomTile.mx_RoomTile_minimized .mx_DecoratedRoomAvatar,
.mx_RoomTile.mx_RoomTile_minimized .mx_RoomTile_avatarContainer {
margin-right: 0;
}
+
.mx_RoomTile_iconBell:before {
-webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
mask-image: url(../../img/element-icons/notifications.d298b39.svg);
}
+
.mx_RoomTile_iconBellDot:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);
mask-image: url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);
}
+
.mx_RoomTile_iconBellCrossed:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
}
+
.mx_RoomTile_iconBellMentions:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);
mask-image: url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);
}
+
.mx_RoomTile_contextMenu .mx_RoomTile_iconStar:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/favorite.ff7609d.svg);
mask-image: url(../../img/element-icons/roomlist/favorite.ff7609d.svg);
}
+
.mx_RoomTile_contextMenu .mx_RoomTile_iconArrowDown:before {
-webkit-mask-image: url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);
mask-image: url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);
}
+
.mx_RoomTile_contextMenu .mx_RoomTile_iconSettings:before {
-webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
mask-image: url(../../img/element-icons/settings.6b381af.svg);
}
+
+.mx_RoomTile_contextMenu .mx_RoomTile_iconCopyLink:before {
+ -webkit-mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
+ mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
+}
+
.mx_RoomTile_contextMenu .mx_RoomTile_iconInvite:before {
-webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
}
+
.mx_RoomTile_contextMenu .mx_RoomTile_iconSignOut:before {
-webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
mask-image: url(../../img/element-icons/leave.bb917e7.svg);
}
+
.mx_RoomUpgradeWarningBar {
max-height: 235px;
background-color: #f7f7f7;
@@ -17049,6 +22305,7 @@ a.mx_RoomPreviewBar_inviter {
padding-right: 20px;
overflow: scroll;
}
+
.mx_RoomUpgradeWarningBar_wrapped {
width: 100%;
height: 100%;
@@ -17068,21 +22325,26 @@ a.mx_RoomPreviewBar_inviter {
justify-content: center;
-webkit-align-items: center;
}
+
.mx_RoomUpgradeWarningBar_header {
color: #ff4b55;
font-weight: 700;
}
+
.mx_RoomUpgradeWarningBar_body {
color: #ff4b55;
}
+
.mx_RoomUpgradeWarningBar_upgradelink {
color: #ff4b55;
text-decoration: underline;
}
+
.mx_RoomUpgradeWarningBar_small {
color: #888;
font-size: 70%;
}
+
.mx_SearchBar {
height: 56px;
display: -webkit-box;
@@ -17093,12 +22355,14 @@ a.mx_RoomPreviewBar_inviter {
align-items: center;
border-bottom: 1px solid transparent;
}
+
.mx_SearchBar .mx_SearchBar_input {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
margin-left: 22px;
}
+
.mx_SearchBar .mx_SearchBar_searchButton {
cursor: pointer;
width: 37px;
@@ -17111,9 +22375,11 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_SearchBar .mx_SearchBar_buttons {
display: inherit;
}
+
.mx_SearchBar .mx_SearchBar_button {
border: 0;
margin: 0 0 0 22px;
@@ -17124,10 +22390,12 @@ a.mx_RoomPreviewBar_inviter {
border-bottom: 2px solid #0dbd8b;
font-weight: 600;
}
+
.mx_SearchBar .mx_SearchBar_unselected {
color: #9fa9ba;
border-color: transparent;
}
+
.mx_SearchBar .mx_SearchBar_cancel {
background-color: #ff4b55;
-webkit-mask: url(../../img/cancel.4b9715b.svg);
@@ -17142,6 +22410,7 @@ a.mx_RoomPreviewBar_inviter {
margin: 0 12px 0 3px;
cursor: pointer;
}
+
.mx_SendMessageComposer {
-ms-flex: 1;
flex: 1;
@@ -17154,6 +22423,7 @@ a.mx_RoomPreviewBar_inviter {
margin-right: 6px;
min-width: 0;
}
+
.mx_SendMessageComposer,
.mx_SendMessageComposer .mx_BasicMessageComposer {
-webkit-box-flex: 1;
@@ -17163,13 +22433,15 @@ a.mx_RoomPreviewBar_inviter {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
+
.mx_SendMessageComposer .mx_BasicMessageComposer {
-ms-flex: 1;
flex: 1;
-ms-flex-direction: column;
flex-direction: column;
- min-height: 50px;
+ min-height: 55px;
}
+
.mx_SendMessageComposer
.mx_BasicMessageComposer
.mx_BasicMessageComposer_input {
@@ -17178,13 +22450,16 @@ a.mx_RoomPreviewBar_inviter {
max-height: 140px;
overflow-y: auto;
}
+
.mx_Stickers_content {
overflow: hidden;
}
+
.mx_Stickers_content_container {
overflow: hidden;
height: 300px;
}
+
#mx_persistedElement_stickerPicker .mx_AppTileFullWidth {
height: unset;
-webkit-box-sizing: border-box;
@@ -17193,12 +22468,15 @@ a.mx_RoomPreviewBar_inviter {
border-right: none;
border-bottom: none;
}
+
#mx_persistedElement_stickerPicker .mx_AppTileMenuBar {
padding: 0;
}
+
#mx_persistedElement_stickerPicker iframe {
height: 283px;
}
+
.mx_Stickers_contentPlaceholder {
display: -webkit-box;
display: -ms-flexbox;
@@ -17218,17 +22496,21 @@ a.mx_RoomPreviewBar_inviter {
justify-content: center;
text-align: center;
}
+
.mx_Stickers_contentPlaceholder p {
max-width: 200px;
}
+
.mx_Stickers_addLink {
display: inline;
cursor: pointer;
color: #0dbd8b;
}
+
.mx_Stickers_hideStickers {
z-index: 2001;
}
+
.mx_TopUnreadMessagesBar {
z-index: 1000;
position: absolute;
@@ -17236,6 +22518,7 @@ a.mx_RoomPreviewBar_inviter {
right: 24px;
width: 38px;
}
+
.mx_TopUnreadMessagesBar:after {
content: "";
position: absolute;
@@ -17248,6 +22531,7 @@ a.mx_RoomPreviewBar_inviter {
border: 6px solid #0dbd8b;
pointer-events: none;
}
+
.mx_TopUnreadMessagesBar_scrollUp {
height: 38px;
border-radius: 19px;
@@ -17257,6 +22541,7 @@ a.mx_RoomPreviewBar_inviter {
border: 1.3px solid #61708b;
cursor: pointer;
}
+
.mx_TopUnreadMessagesBar_scrollUp:before {
content: "";
position: absolute;
@@ -17272,6 +22557,7 @@ a.mx_RoomPreviewBar_inviter {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
+
.mx_TopUnreadMessagesBar_markAsRead {
display: block;
width: 18px;
@@ -17281,6 +22567,7 @@ a.mx_RoomPreviewBar_inviter {
border-radius: 10px;
margin: 5px auto;
}
+
.mx_TopUnreadMessagesBar_markAsRead:before {
content: "";
position: absolute;
@@ -17296,6 +22583,7 @@ a.mx_RoomPreviewBar_inviter {
mask-position: 4px 4px;
background: #61708b;
}
+
.mx_VoiceRecordComposerTile_stop {
width: 28px;
height: 28px;
@@ -17304,6 +22592,7 @@ a.mx_RoomPreviewBar_inviter {
margin-right: 16px;
position: relative;
}
+
.mx_VoiceRecordComposerTile_stop:after {
content: "";
width: 14px;
@@ -17314,27 +22603,31 @@ a.mx_RoomPreviewBar_inviter {
border-radius: 2px;
background-color: #ff4b55;
}
+
.mx_VoiceRecordComposerTile_delete {
- width: 14px;
- height: 18px;
+ width: 24px;
+ height: 24px;
vertical-align: middle;
- margin-right: 11px;
+ margin-right: 8px;
background-color: #8d99a5;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
- -webkit-mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
- mask-image: url(../../img/element-icons/trashcan.26f6c28.svg);
+ -webkit-mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
+ mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
}
+
.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer {
margin: 6px 12px 6px 6px;
position: relative;
}
+
.mx_MessageComposer_row
.mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording {
padding-left: 22px;
}
+
.mx_MessageComposer_row
.mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording:before {
-webkit-animation: recording-pulse 2s infinite;
@@ -17348,6 +22641,7 @@ a.mx_RoomPreviewBar_inviter {
top: 18px;
border-radius: 10px;
}
+
@-webkit-keyframes recording-pulse {
0% {
opacity: 1;
@@ -17359,6 +22653,7 @@ a.mx_RoomPreviewBar_inviter {
opacity: 1;
}
}
+
@keyframes recording-pulse {
0% {
opacity: 1;
@@ -17370,6 +22665,7 @@ a.mx_RoomPreviewBar_inviter {
opacity: 1;
}
}
+
.mx_WhoIsTypingTile {
margin-left: -18px;
padding-top: 18px;
@@ -17380,22 +22676,27 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-align: center;
align-items: center;
}
+
.mx_WhoIsTypingTile_avatars {
-webkit-box-flex: 0;
-ms-flex: 0 0 83px;
flex: 0 0 83px;
text-align: center;
}
+
.mx_WhoIsTypingTile_avatars > :not(:first-child) {
margin-left: -12px;
}
+
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial {
padding-top: 1px;
}
+
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar {
border: 1px solid #fff;
border-radius: 40px;
}
+
.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
position: relative;
display: inline-block;
@@ -17410,6 +22711,7 @@ a.mx_RoomPreviewBar_inviter {
vertical-align: top;
text-align: center;
}
+
.mx_WhoIsTypingTile_label {
-webkit-box-flex: 1;
-ms-flex: 1;
@@ -17418,6 +22720,7 @@ a.mx_RoomPreviewBar_inviter {
font-weight: 600;
color: #9e9e9e;
}
+
.mx_WhoIsTypingTile_label > span {
background-image: url(../../img/typing-indicator-2x.0eb9f0e.gif);
background-size: 25px;
@@ -17426,9 +22729,11 @@ a.mx_RoomPreviewBar_inviter {
padding-bottom: 15px;
display: block;
}
+
.mx_MatrixChat_useCompactLayout .mx_WhoIsTypingTile {
padding-top: 4px;
}
+
.mx_AvatarSetting_avatar {
width: 90px;
min-width: 90px;
@@ -17436,6 +22741,7 @@ a.mx_RoomPreviewBar_inviter {
margin-top: 8px;
position: relative;
}
+
.mx_AvatarSetting_avatar .mx_AvatarSetting_hover {
-webkit-transition: opacity 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96);
transition: opacity 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96);
@@ -17448,11 +22754,13 @@ a.mx_RoomPreviewBar_inviter {
line-height: 90px;
text-align: center;
}
+
.mx_AvatarSetting_avatar .mx_AvatarSetting_hover > span {
color: #fff;
position: relative;
font-weight: 500;
}
+
.mx_AvatarSetting_avatar .mx_AvatarSetting_hover .mx_AvatarSetting_hoverBg {
position: absolute;
top: 0;
@@ -17463,29 +22771,36 @@ a.mx_RoomPreviewBar_inviter {
background-color: #2e2f32;
border-radius: 90px;
}
+
.mx_AvatarSetting_avatar.mx_AvatarSetting_avatar_hovering
.mx_AvatarSetting_hover {
opacity: 1;
}
+
.mx_AvatarSetting_avatar:not(.mx_AvatarSetting_avatar_hovering)
.mx_AvatarSetting_hover {
opacity: 0;
}
+
.mx_AvatarSetting_avatar > * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
+
.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
margin-top: 8px;
}
+
.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm {
width: 100%;
}
+
.mx_AvatarSetting_avatar > img {
cursor: pointer;
-o-object-fit: cover;
object-fit: cover;
}
+
.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder,
.mx_AvatarSetting_avatar > img {
display: block;
@@ -17494,6 +22809,7 @@ a.mx_RoomPreviewBar_inviter {
border-radius: 90px;
cursor: pointer;
}
+
.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before {
background-color: #2e2f32;
-webkit-mask: url(../../img/feather-customised/user.7a4d23d.svg);
@@ -17511,6 +22827,7 @@ a.mx_RoomPreviewBar_inviter {
left: 0;
right: 0;
}
+
.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton {
width: 32px;
height: 32px;
@@ -17520,6 +22837,7 @@ a.mx_RoomPreviewBar_inviter {
bottom: 0;
right: 0;
}
+
.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton:before {
content: "";
display: block;
@@ -17535,64 +22853,82 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-image: url(../../img/feather-customised/edit.fd55ec2.svg);
mask-image: url(../../img/feather-customised/edit.fd55ec2.svg);
}
+
.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder {
background-color: #f4f6fa;
}
+
.mx_CrossSigningPanel_statusList {
border-spacing: 0;
}
+
.mx_CrossSigningPanel_statusList td {
padding: 0;
}
+
.mx_CrossSigningPanel_statusList td:first-of-type {
-webkit-padding-end: 1em;
padding-inline-end: 1em;
}
+
.mx_CrossSigningPanel_buttonRow {
margin: 1em 0;
}
+
.mx_CrossSigningPanel_buttonRow :nth-child(n + 1) {
-webkit-margin-end: 10px;
margin-inline-end: 10px;
}
+
.mx_DevicesPanel {
display: table;
table-layout: fixed;
width: 880px;
border-spacing: 10px;
}
+
.mx_DevicesPanel_header {
display: table-header-group;
font-weight: 700;
}
+
.mx_DevicesPanel_header > .mx_DevicesPanel_deviceButtons {
height: 48px;
}
+
.mx_DevicesPanel_header > div {
display: table-cell;
vertical-align: middle;
}
+
.mx_DevicesPanel_header .mx_DevicesPanel_deviceName {
width: 50%;
}
+
.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen {
width: 30%;
}
+
.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons {
width: 20%;
}
+
.mx_DevicesPanel_device {
display: table-row;
}
+
.mx_DevicesPanel_device > div {
display: table-cell;
}
+
.mx_DevicesPanel_myDevice {
font-weight: 700;
}
+
.mx_E2eAdvancedPanel_settingLongDescription {
margin-right: 150px;
}
+
.mx_ExistingEmailAddress {
display: -webkit-box;
display: -ms-flexbox;
@@ -17602,11 +22938,13 @@ a.mx_RoomPreviewBar_inviter {
align-items: center;
margin-bottom: 5px;
}
+
.mx_ExistingEmailAddress_delete {
margin-right: 5px;
cursor: pointer;
vertical-align: middle;
}
+
.mx_ExistingEmailAddress_email,
.mx_ExistingEmailAddress_promptText {
-webkit-box-flex: 1;
@@ -17614,9 +22952,11 @@ a.mx_RoomPreviewBar_inviter {
flex: 1;
margin-right: 10px;
}
+
.mx_ExistingEmailAddress_confirmBtn {
margin-left: 5px;
}
+
.mx_IntegrationManager .mx_Dialog {
width: 60%;
height: 70%;
@@ -17625,86 +22965,117 @@ a.mx_RoomPreviewBar_inviter {
max-width: none;
max-height: none;
}
+
.mx_IntegrationManager iframe {
background-color: #fff;
border: 0;
width: 100%;
height: 100%;
}
+
.mx_IntegrationManager_loading h3 {
text-align: center;
}
+
.mx_IntegrationManager_error {
text-align: center;
padding-top: 20px;
}
+
.mx_IntegrationManager_error h3 {
color: #ff4b55;
}
-.mx_UserNotifSettings_tableRow {
- display: table-row;
+
+.mx_UserNotifSettings {
+ color: #2e2f32;
}
-.mx_UserNotifSettings_inputCell {
- display: table-cell;
- padding-bottom: 8px;
- padding-right: 8px;
- width: 16px;
-}
-.mx_UserNotifSettings_labelCell {
- padding-bottom: 8px;
- width: 400px;
- display: table-cell;
-}
-.mx_UserNotifSettings_pushRulesTableWrapper {
- padding-bottom: 8px;
-}
-.mx_UserNotifSettings_pushRulesTable {
- width: 100%;
+
+.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable {
+ width: calc(100% + 12px);
table-layout: fixed;
+ border-collapse: collapse;
+ border-spacing: 0;
+ margin-top: 40px;
}
-.mx_UserNotifSettings_pushRulesTable thead {
- font-weight: 700;
+
+.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable tr > th {
+ font-weight: 600;
}
-.mx_UserNotifSettings_pushRulesTable tbody th {
- font-weight: 400;
-}
-.mx_UserNotifSettings_pushRulesTable tbody th:first-child {
+
+.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable tr > th:first-child {
text-align: left;
+ font-size: 1.8rem;
}
-.mx_UserNotifSettings_keywords {
- cursor: pointer;
- color: #0dbd8b;
+
+.mx_UserNotifSettings
+ .mx_UserNotifSettings_pushRulesTable
+ tr
+ > th:nth-child(n + 2) {
+ color: #737d8c;
+ font-size: 1.2rem;
+ vertical-align: middle;
+ width: 66px;
}
-.mx_UserNotifSettings_devicesTable td {
- padding-left: 20px;
- padding-right: 20px;
+
+.mx_UserNotifSettings
+ .mx_UserNotifSettings_pushRulesTable
+ tr
+ > td:nth-child(n + 2) {
+ text-align: center;
}
-.mx_UserNotifSettings_notifTable {
- display: table;
- position: relative;
+
+.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable tr > td {
+ padding-top: 8px;
}
-.mx_UserNotifSettings_notifTable .mx_Spinner {
- position: absolute;
+
+.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable .mx_RadioButton {
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
}
-.mx_NotificationSound_soundUpload {
+
+.mx_UserNotifSettings
+ .mx_UserNotifSettings_pushRulesTable
+ .mx_RadioButton
+ .mx_RadioButton_content,
+.mx_UserNotifSettings
+ .mx_UserNotifSettings_pushRulesTable
+ .mx_RadioButton
+ .mx_RadioButton_spacer {
display: none;
}
-.mx_NotificationSound_browse {
- color: #0dbd8b;
- border: 1px solid #0dbd8b;
- background-color: transparent;
+
+.mx_UserNotifSettings .mx_UserNotifSettings_floatingSection {
+ margin-top: 40px;
}
-.mx_NotificationSound_save {
- margin-left: 5px;
- color: #fff;
- background-color: #0dbd8b;
+
+.mx_UserNotifSettings .mx_UserNotifSettings_floatingSection > div:first-child {
+ font-size: 1.8rem;
+ font-weight: 600;
}
-.mx_NotificationSound_resetSound {
- margin-top: 5px;
- color: #fff;
- border: #ff4b55;
- background-color: #ff4b55;
+
+.mx_UserNotifSettings .mx_UserNotifSettings_floatingSection > table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ margin-top: 8px;
}
+
+.mx_UserNotifSettings
+ .mx_UserNotifSettings_floatingSection
+ > table
+ tr
+ > td:first-child {
+ padding-right: 8px;
+}
+
+.mx_UserNotifSettings .mx_UserNotifSettings_clearNotifsButton {
+ margin-top: 8px;
+}
+
+.mx_UserNotifSettings .mx_TagComposer {
+ margin-top: 35px;
+}
+
.mx_ExistingPhoneNumber {
display: -webkit-box;
display: -ms-flexbox;
@@ -17714,11 +23085,13 @@ a.mx_RoomPreviewBar_inviter {
align-items: center;
margin-bottom: 5px;
}
+
.mx_ExistingPhoneNumber_delete {
margin-right: 5px;
cursor: pointer;
vertical-align: middle;
}
+
.mx_ExistingPhoneNumber_address,
.mx_ExistingPhoneNumber_promptText {
-webkit-box-flex: 1;
@@ -17726,9 +23099,11 @@ a.mx_RoomPreviewBar_inviter {
flex: 1;
margin-right: 10px;
}
+
.mx_ExistingPhoneNumber_confirmBtn {
margin-left: 5px;
}
+
.mx_ExistingPhoneNumber_verification {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
@@ -17737,9 +23112,11 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-align: center;
align-items: center;
}
+
.mx_ExistingPhoneNumber_verification .mx_Field {
margin: 0 0 0 1em;
}
+
.mx_PhoneNumbers_input {
display: -webkit-box;
display: -ms-flexbox;
@@ -17748,116 +23125,146 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-align: center;
align-items: center;
}
+
.mx_PhoneNumbers_input > .mx_Field {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
+
.mx_PhoneNumbers_country {
width: 80px;
}
+
.mx_ProfileSettings_controls_topic > textarea {
resize: vertical;
}
+
.mx_ProfileSettings_profile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
+
.mx_ProfileSettings_controls {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin-right: 54px;
}
+
.mx_ProfileSettings_controls .mx_SettingsTab_subheading {
margin-top: 0;
}
+
.mx_ProfileSettings_controls .mx_Field #profileTopic {
height: 4em;
}
+
.mx_ProfileSettings_controls .mx_Field:first-child {
margin-top: 0;
}
+
.mx_ProfileSettings_hostingSignup {
margin-left: 20px;
}
+
.mx_ProfileSettings_hostingSignup img {
margin-left: 5px;
}
+
.mx_ProfileSettings_avatarUpload {
display: none;
}
+
.mx_ProfileSettings_profileForm {
margin-right: 100px;
border-bottom: 1px solid #e7e7e7;
}
+
.mx_ProfileSettings_buttons {
margin-top: 10px;
margin-bottom: 28px;
}
+
.mx_ProfileSettings_buttons > .mx_AccessibleButton_kind_link {
padding-left: 0;
}
+
.mx_SecureBackupPanel_deviceNotVerified,
.mx_SecureBackupPanel_deviceVerified,
.mx_SecureBackupPanel_sigInvalid,
.mx_SecureBackupPanel_sigValid {
font-weight: 700;
}
+
.mx_SecureBackupPanel_deviceVerified,
.mx_SecureBackupPanel_sigValid {
color: #76cfa5;
}
+
.mx_SecureBackupPanel_deviceNotVerified,
.mx_SecureBackupPanel_sigInvalid {
color: #ba6363;
}
+
.mx_SecureBackupPanel_deviceName {
font-style: italic;
}
+
.mx_SecureBackupPanel_buttonRow {
margin: 1em 0;
}
+
.mx_SecureBackupPanel_buttonRow :nth-child(n + 1) {
-webkit-margin-end: 10px;
margin-inline-end: 10px;
}
+
.mx_SecureBackupPanel_statusList {
border-spacing: 0;
}
+
.mx_SecureBackupPanel_statusList td {
padding: 0;
}
+
.mx_SecureBackupPanel_statusList td:first-of-type {
-webkit-padding-end: 1em;
padding-inline-end: 1em;
}
+
.mx_SetIdServer .mx_Field_input {
margin-right: 100px;
}
+
.mx_SetIdServer_tooltip {
max-width: 120px;
}
+
.mx_SetIntegrationManager {
margin-top: 10px;
margin-bottom: 10px;
}
+
.mx_SetIntegrationManager > .mx_SettingsTab_heading {
margin-bottom: 10px;
}
+
.mx_SetIntegrationManager
> .mx_SettingsTab_heading
> .mx_SettingsTab_subheading {
display: inline-block;
padding-left: 5px;
}
+
.mx_SetIntegrationManager .mx_ToggleSwitch {
display: inline-block;
float: right;
top: 9px;
margin-right: 100px;
}
+
.mx_ExistingSpellCheckLanguage {
display: -webkit-box;
display: -ms-flexbox;
@@ -17867,65 +23274,81 @@ a.mx_RoomPreviewBar_inviter {
align-items: center;
margin-bottom: 5px;
}
+
.mx_ExistingSpellCheckLanguage_language {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 10px;
}
+
.mx_GeneralUserSettingsTab_spellCheckLanguageInput {
margin-top: 1em;
margin-bottom: 1em;
}
+
.mx_SpellCheckLanguages {
margin-right: 100px;
}
+
.mx_UpdateCheckButton_summary {
margin-left: 16px;
}
+
.mx_UpdateCheckButton_summary .mx_AccessibleButton_kind_link {
padding: 0;
}
+
.mx_SettingsTab {
color: #61708b;
}
+
.mx_SettingsTab_warningText {
color: #ff4b55;
}
+
.mx_SettingsTab_heading {
font-size: 2rem;
font-weight: 600;
color: #2e2f32;
margin-bottom: 10px;
}
+
.mx_SettingsTab_heading:nth-child(n + 2) {
margin-top: 30px;
}
+
.mx_SettingsTab_subheading {
font-size: 1.6rem;
display: block;
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
+ Helvetica, Sans-Serif, Noto Color Emoji;
font-weight: 600;
color: #2e2f32;
margin-bottom: 10px;
margin-top: 12px;
}
+
.mx_SettingsTab_subsectionText {
color: #61708b;
font-size: 1.4rem;
display: block;
- margin: 10px 100px 10px 0;
+ margin: 10px 80px 10px 0;
}
+
.mx_SettingsTab_section {
margin-bottom: 24px;
}
+
.mx_SettingsTab_section .mx_SettingsFlag {
- margin-right: 100px;
+ margin-right: 80px;
margin-bottom: 10px;
}
+
.mx_SettingsTab_section.mx_SettingsTab_subsectionText .mx_SettingsFlag {
margin-right: 0 !important;
}
+
.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
vertical-align: middle;
display: inline-block;
@@ -17936,50 +23359,155 @@ a.mx_RoomPreviewBar_inviter {
box-sizing: border-box;
padding-right: 10px;
}
+
.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {
float: right;
}
+
.mx_SettingsTab_linkBtn {
cursor: pointer;
color: #0dbd8b;
word-break: break-all;
}
+
.mx_SettingsTab a {
color: #238cf5;
}
+
.mx_GeneralRoomSettingsTab_profileSection {
margin-top: 10px;
}
+
.mx_RolesRoomSettingsTab ul {
margin-bottom: 0;
}
+
.mx_RolesRoomSettingsTab_unbanBtn {
margin-right: 10px;
margin-bottom: 5px;
}
+
+.mx_SecurityRoomSettingsTab .mx_SettingsTab_showAdvanced {
+ padding: 0;
+ margin-bottom: 16px;
+}
+
+.mx_SecurityRoomSettingsTab .mx_SecurityRoomSettingsTab_spacesWithAccess > h4 {
+ color: #737d8c;
+ font-weight: 600;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ text-transform: uppercase;
+}
+
+.mx_SecurityRoomSettingsTab
+ .mx_SecurityRoomSettingsTab_spacesWithAccess
+ > span {
+ font-weight: 500;
+ font-size: 1.4rem;
+ line-height: 32px;
+ color: #737d8c;
+ display: inline-block;
+}
+
+.mx_SecurityRoomSettingsTab
+ .mx_SecurityRoomSettingsTab_spacesWithAccess
+ > span
+ .mx_RoomAvatar_isSpaceRoom
+ img,
+.mx_SecurityRoomSettingsTab
+ .mx_SecurityRoomSettingsTab_spacesWithAccess
+ > span
+ img.mx_RoomAvatar_isSpaceRoom {
+ border-radius: 8px;
+}
+
+.mx_SecurityRoomSettingsTab
+ .mx_SecurityRoomSettingsTab_spacesWithAccess
+ > span
+ .mx_BaseAvatar {
+ margin-right: 8px;
+}
+
+.mx_SecurityRoomSettingsTab
+ .mx_SecurityRoomSettingsTab_spacesWithAccess
+ > span
+ + span {
+ margin-left: 16px;
+}
+
.mx_SecurityRoomSettingsTab_warning {
display: block;
}
+
.mx_SecurityRoomSettingsTab_warning img {
vertical-align: middle;
margin-right: 5px;
margin-left: 3px;
margin-bottom: 5px;
}
+
.mx_SecurityRoomSettingsTab_encryptionSection {
- margin-bottom: 25px;
+ padding-bottom: 24px;
+ border-bottom: 1px solid #e7e7e7;
+ margin-bottom: 32px;
}
+
+.mx_SecurityRoomSettingsTab_upgradeRequired {
+ margin-left: 16px;
+ padding: 4px 16px;
+ border: 1px solid #0dbd8b;
+ border-radius: 8px;
+ color: #0dbd8b;
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+}
+
+.mx_SecurityRoomSettingsTab_joinRule .mx_RadioButton {
+ padding-top: 16px;
+ margin-bottom: 8px;
+}
+
+.mx_SecurityRoomSettingsTab_joinRule .mx_RadioButton .mx_RadioButton_content {
+ margin-left: 14px;
+ font-weight: 600;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #2e2f32;
+ display: block;
+}
+
+.mx_SecurityRoomSettingsTab_joinRule > span {
+ display: inline-block;
+ margin-left: 34px;
+ margin-bottom: 16px;
+ font-size: 1.5rem;
+ line-height: 2.4rem;
+ color: #737d8c;
+}
+
+.mx_SecurityRoomSettingsTab_joinRule > span + .mx_RadioButton {
+ border-top: 1px solid #e7e7e7;
+}
+
+.mx_SecurityRoomSettingsTab_joinRule .mx_AccessibleButton_kind_link {
+ padding: 0;
+ font-size: inherit;
+}
+
.mx_AppearanceUserSettingsTab_fontSlider,
-.mx_AppearanceUserSettingsTab_fontSlider_preview,
-.mx_AppearanceUserSettingsTab_Layout {
+.mx_AppearanceUserSettingsTab_fontSlider_preview {
margin-right: 100px;
}
+
.mx_AppearanceUserSettingsTab .mx_Field {
width: 256px;
}
+
.mx_AppearanceUserSettingsTab_fontScaling {
color: #2e2f32;
}
+
.mx_AppearanceUserSettingsTab_fontSlider {
display: -webkit-box;
display: -ms-flexbox;
@@ -17998,36 +23526,50 @@ a.mx_RoomPreviewBar_inviter {
margin-top: 24px;
margin-bottom: 24px;
}
+
.mx_AppearanceUserSettingsTab_fontSlider_preview {
border: 1px solid #e3e8f0;
border-radius: 10px;
padding: 0 16px 9px;
pointer-events: none;
+ display: flow-root;
}
+
+.mx_AppearanceUserSettingsTab_fontSlider_preview
+ .mx_EventTile[data-layout="bubble"] {
+ margin-top: 30px;
+}
+
.mx_AppearanceUserSettingsTab_fontSlider_preview .mx_EventTile_msgOption {
display: none;
}
+
.mx_AppearanceUserSettingsTab_fontSlider_preview.mx_IRCLayout {
padding-top: 9px;
}
+
.mx_AppearanceUserSettingsTab_fontSlider_smallText {
font-size: 15px;
padding-right: 20px;
padding-left: 5px;
font-weight: 500;
}
+
.mx_AppearanceUserSettingsTab_fontSlider_largeText {
font-size: 18px;
padding-left: 20px;
padding-right: 5px;
font-weight: 500;
}
+
.mx_AppearanceUserSettingsTab > .mx_SettingsTab_SubHeading {
margin-bottom: 32px;
}
+
.mx_AppearanceUserSettingsTab_themeSection {
color: #2e2f32;
}
+
.mx_AppearanceUserSettingsTab_themeSection > .mx_ThemeSelectors {
display: -webkit-box;
display: -ms-flexbox;
@@ -18041,6 +23583,7 @@ a.mx_RoomPreviewBar_inviter {
margin-top: 4px;
margin-bottom: 30px;
}
+
.mx_AppearanceUserSettingsTab_themeSection
> .mx_ThemeSelectors
> .mx_RadioButton {
@@ -18061,6 +23604,7 @@ a.mx_RoomPreviewBar_inviter {
font-weight: 600;
color: #61708b;
}
+
.mx_AppearanceUserSettingsTab_themeSection
> .mx_ThemeSelectors
> .mx_RadioButton
@@ -18069,23 +23613,27 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_AppearanceUserSettingsTab_themeSection
> .mx_ThemeSelectors
> .mx_RadioButton_enabled {
opacity: 1;
}
+
.mx_AppearanceUserSettingsTab_themeSection
> .mx_ThemeSelectors
> .mx_RadioButton_enabled.mx_ThemeSelector_light {
background-color: #f3f8fd;
color: #2e2f32;
}
+
.mx_AppearanceUserSettingsTab_themeSection
> .mx_ThemeSelectors
> .mx_RadioButton_enabled.mx_ThemeSelector_dark {
background-color: #25282e;
color: #f3f8fd;
}
+
.mx_AppearanceUserSettingsTab_themeSection
> .mx_ThemeSelectors
> .mx_RadioButton_enabled.mx_ThemeSelector_dark
@@ -18099,12 +23647,14 @@ a.mx_RoomPreviewBar_inviter {
> div {
border-color: #e3e8f0;
}
+
.mx_AppearanceUserSettingsTab_themeSection
> .mx_ThemeSelectors
> .mx_RadioButton_enabled.mx_ThemeSelector_black {
background-color: #000;
color: #f3f8fd;
}
+
.mx_AppearanceUserSettingsTab_themeSection
> .mx_ThemeSelectors
> .mx_RadioButton_enabled.mx_ThemeSelector_black
@@ -18118,9 +23668,11 @@ a.mx_RoomPreviewBar_inviter {
> div {
border-color: #e3e8f0;
}
+
.mx_SettingsTab_customFontSizeField {
margin-left: calc(1.6rem + 10px);
}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons {
display: -webkit-box;
display: -ms-flexbox;
@@ -18129,12 +23681,11 @@ a.mx_RoomPreviewBar_inviter {
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
+ grid-gap: 24px;
+ gap: 24px;
color: #2e2f32;
}
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- .mx_AppearanceUserSettingsTab_spacer {
- width: 24px;
-}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons
> .mx_AppearanceUserSettingsTab_Layout_RadioButton {
-webkit-box-flex: 0;
@@ -18153,6 +23704,7 @@ a.mx_RoomPreviewBar_inviter {
border: 1px solid #e3e8f0;
border-radius: 10px;
}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons
> .mx_AppearanceUserSettingsTab_Layout_RadioButton
.mx_EventTile_msgOption,
@@ -18161,6 +23713,7 @@ a.mx_RoomPreviewBar_inviter {
.mx_MessageActionBar {
display: none;
}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons
> .mx_AppearanceUserSettingsTab_Layout_RadioButton
.mx_AppearanceUserSettingsTab_Layout_RadioButton_preview {
@@ -18176,6 +23729,7 @@ a.mx_RoomPreviewBar_inviter {
padding: 10px;
pointer-events: none;
}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons
> .mx_AppearanceUserSettingsTab_Layout_RadioButton
.mx_RadioButton {
@@ -18184,48 +23738,81 @@ a.mx_RoomPreviewBar_inviter {
flex-grow: 0;
padding: 10px;
}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons
> .mx_AppearanceUserSettingsTab_Layout_RadioButton
.mx_EventTile_content {
margin-right: 0;
}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons
> .mx_AppearanceUserSettingsTab_Layout_RadioButton.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected {
border-color: #0dbd8b;
}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton {
border-top: 1px solid #e3e8f0;
}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons
.mx_RadioButton
> input
+ div {
border-color: rgba(97, 112, 139, 0.2);
}
+
.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton_checked {
background-color: rgba(13, 189, 139, 0.08);
}
+
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_EventTile {
+ margin: 0;
+}
+
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ .mx_EventTile[data-layout="bubble"] {
+ margin-right: 40px;
+}
+
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ .mx_EventTile[data-layout="irc"]
+ > a {
+ display: none;
+}
+
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons
+ .mx_EventTile
+ .mx_EventTile_line {
+ max-width: 90%;
+}
+
.mx_AppearanceUserSettingsTab_Advanced {
color: #2e2f32;
}
+
.mx_AppearanceUserSettingsTab_Advanced > * {
margin-bottom: 16px;
}
+
.mx_AppearanceUserSettingsTab_Advanced
.mx_AppearanceUserSettingsTab_AdvancedToggle {
color: #0dbd8b;
cursor: pointer;
}
+
.mx_AppearanceUserSettingsTab_Advanced
.mx_AppearanceUserSettingsTab_systemFont {
margin-left: calc(1.6rem + 10px);
}
+
.mx_GeneralUserSettingsTab_changePassword .mx_Field {
margin-right: 100px;
}
+
.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
margin-top: 0;
}
+
.mx_GeneralUserSettingsTab_accountSection
.mx_SettingsTab_subheading:nth-child(n + 1),
.mx_GeneralUserSettingsTab_discovery
@@ -18233,12 +23820,14 @@ a.mx_RoomPreviewBar_inviter {
.mx_SetIdServer .mx_SettingsTab_subheading {
margin-top: 24px;
}
+
.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,
.mx_GeneralUserSettingsTab_discovery .mx_Spinner {
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
}
+
.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,
@@ -18246,16 +23835,20 @@ a.mx_RoomPreviewBar_inviter {
.mx_GeneralUserSettingsTab_languageInput {
margin-right: 100px;
}
+
.mx_GeneralUserSettingsTab_warningIcon {
vertical-align: middle;
}
+
.mx_HelpUserSettingsTab_debugButton {
margin-bottom: 5px;
margin-top: 5px;
}
+
.mx_HelpUserSettingsTab span.mx_AccessibleButton {
word-break: break-word;
}
+
.mx_HelpUserSettingsTab code {
word-break: break-all;
-webkit-user-select: all;
@@ -18263,6 +23856,7 @@ a.mx_RoomPreviewBar_inviter {
-ms-user-select: all;
user-select: all;
}
+
.mx_HelpUserSettingsTab_accessToken {
display: -webkit-box;
display: -ms-flexbox;
@@ -18276,6 +23870,7 @@ a.mx_RoomPreviewBar_inviter {
margin-top: 10px;
padding: 10px;
}
+
.mx_HelpUserSettingsTab_accessToken_copy {
-ms-flex-negative: 0;
flex-shrink: 0;
@@ -18283,6 +23878,7 @@ a.mx_RoomPreviewBar_inviter {
margin-left: 20px;
display: inherit;
}
+
.mx_HelpUserSettingsTab_accessToken_copy > div {
-webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
@@ -18292,68 +23888,86 @@ a.mx_RoomPreviewBar_inviter {
height: 20px;
background-repeat: no-repeat;
}
+
.mx_LabsUserSettingsTab .mx_SettingsTab_section {
margin-top: 32px;
}
+
.mx_LabsUserSettingsTab .mx_SettingsTab_section .mx_SettingsFlag {
margin-right: 0;
}
+
.mx_MjolnirUserSettingsTab .mx_Field {
margin-right: 100px;
}
+
.mx_MjolnirUserSettingsTab_listItem {
margin-bottom: 2px;
}
+
.mx_NotificationUserSettingsTab .mx_SettingsTab_heading {
margin-bottom: 10px;
}
+
.mx_PreferencesUserSettingsTab .mx_Field {
margin-right: 100px;
}
+
.mx_PreferencesUserSettingsTab .mx_SettingsTab_section {
margin-bottom: 30px;
}
+
.mx_SecurityUserSettingsTab .mx_DevicesPanel {
width: auto;
max-width: 880px;
}
+
.mx_SecurityUserSettingsTab_deviceInfo {
display: table;
padding-left: 0;
}
+
.mx_SecurityUserSettingsTab_deviceInfo > li {
display: table-row;
}
+
.mx_SecurityUserSettingsTab_deviceInfo > li > label,
.mx_SecurityUserSettingsTab_deviceInfo > li > span {
display: table-cell;
padding-right: 1em;
}
+
.mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton,
.mx_SecurityUserSettingsTab_importExportButtons .mx_AccessibleButton {
margin-right: 10px;
}
+
.mx_SecurityUserSettingsTab_importExportButtons {
margin-bottom: 15px;
}
+
.mx_SecurityUserSettingsTab_ignoredUser {
margin-bottom: 5px;
}
+
.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
margin-right: 10px;
}
+
.mx_SecurityUserSettingsTab
.mx_SettingsTab_section
.mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit;
}
+
.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning {
color: #ff4b55;
position: relative;
padding-left: 40px;
margin-top: 30px;
}
+
.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning:before {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
@@ -18371,21 +23985,26 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-image: url(../../img/feather-customised/alert-triangle.38aca3a.svg);
mask-image: url(../../img/feather-customised/alert-triangle.38aca3a.svg);
}
+
.mx_VoiceUserSettingsTab .mx_Field {
margin-right: 100px;
}
+
.mx_VoiceUserSettingsTab_missingMediaPermissions {
margin-bottom: 15px;
}
+
.mx_SpaceBasicSettings .mx_Field {
- margin: 32px 0;
+ margin: 24px 0;
}
+
.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 24px;
}
+
.mx_SpaceBasicSettings
.mx_SpaceBasicSettings_avatarContainer
.mx_SpaceBasicSettings_avatar {
@@ -18395,6 +24014,7 @@ a.mx_RoomPreviewBar_inviter {
background-color: #8d99a5;
border-radius: 16px;
}
+
.mx_SpaceBasicSettings
.mx_SpaceBasicSettings_avatarContainer
img.mx_SpaceBasicSettings_avatar {
@@ -18404,11 +24024,13 @@ a.mx_RoomPreviewBar_inviter {
object-fit: cover;
border-radius: 16px;
}
+
.mx_SpaceBasicSettings
.mx_SpaceBasicSettings_avatarContainer
div.mx_SpaceBasicSettings_avatar {
cursor: pointer;
}
+
.mx_SpaceBasicSettings
.mx_SpaceBasicSettings_avatarContainer
div.mx_SpaceBasicSettings_avatar:before {
@@ -18428,11 +24050,13 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-image: url(../../img/element-icons/camera.a81a395.svg);
mask-image: url(../../img/element-icons/camera.a81a395.svg);
}
+
.mx_SpaceBasicSettings
.mx_SpaceBasicSettings_avatarContainer
> input[type="file"] {
display: none;
}
+
.mx_SpaceBasicSettings
.mx_SpaceBasicSettings_avatarContainer
> .mx_AccessibleButton_kind_link {
@@ -18441,12 +24065,14 @@ a.mx_RoomPreviewBar_inviter {
margin: auto 16px;
color: #368bd6;
}
+
.mx_SpaceBasicSettings
.mx_SpaceBasicSettings_avatarContainer
> .mx_SpaceBasicSettings_avatar_remove {
color: #ff4b55;
}
-.mx_SpaceBasicSettings .mx_FormButton {
+
+.mx_SpaceBasicSettings .mx_AccessibleButton_hasKind {
padding: 8px 22px;
margin-left: auto;
display: block;
@@ -18454,14 +24080,17 @@ a.mx_RoomPreviewBar_inviter {
width: -moz-min-content;
width: min-content;
}
+
.mx_SpaceBasicSettings .mx_AccessibleButton_disabled {
cursor: not-allowed;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background {
background-color: rgba(46, 48, 51, 0.38);
opacity: 0.6;
left: 71px;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu {
padding: 24px;
width: 480px;
@@ -18470,21 +24099,25 @@ a.mx_RoomPreviewBar_inviter {
background-color: #fff;
position: relative;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > h2 {
font-weight: 600;
font-size: 1.8rem;
margin-top: 4px;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > p {
font-size: 1.5rem;
color: #737d8c;
margin: 0;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_BetaCard_betaPill {
position: absolute;
top: 24px;
right: 24px;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType {
position: relative;
padding: 16px 32px 16px 72px;
@@ -18496,13 +24129,16 @@ a.mx_RoomPreviewBar_inviter {
font-size: 1.5rem;
margin: 20px 0;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType > h3 {
font-weight: 600;
margin: 0 0 4px;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType > span {
color: #737d8c;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:before {
position: absolute;
content: "";
@@ -18518,32 +24154,38 @@ a.mx_RoomPreviewBar_inviter {
mask-size: 24px;
background-color: #8d99a5;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover {
border-color: #0dbd8b;
}
+
.mx_SpaceCreateMenu_wrapper
.mx_ContextualMenu
.mx_SpaceCreateMenuType:hover:before {
background-color: #0dbd8b;
}
+
.mx_SpaceCreateMenu_wrapper
.mx_ContextualMenu
.mx_SpaceCreateMenuType:hover
> span {
color: #2e2f32;
}
+
.mx_SpaceCreateMenu_wrapper
.mx_ContextualMenu
.mx_SpaceCreateMenuType_public:before {
-webkit-mask-image: url(../../img/globe.8201f08.svg);
mask-image: url(../../img/globe.8201f08.svg);
}
+
.mx_SpaceCreateMenu_wrapper
.mx_ContextualMenu
.mx_SpaceCreateMenuType_private:before {
-webkit-mask-image: url(../../img/element-icons/lock.1f264bd.svg);
mask-image: url(../../img/element-icons/lock.1f264bd.svg);
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back {
width: 28px;
height: 28px;
@@ -18552,6 +24194,7 @@ a.mx_RoomPreviewBar_inviter {
border-radius: 14px;
margin-bottom: 12px;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back:before {
content: "";
position: absolute;
@@ -18571,6 +24214,7 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
}
+
.mx_SpaceCreateMenu_wrapper
.mx_ContextualMenu
.mx_AccessibleButton_kind_primary {
@@ -18581,9 +24225,11 @@ a.mx_RoomPreviewBar_inviter {
width: -moz-min-content;
width: min-content;
}
+
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_disabled {
cursor: not-allowed;
}
+
.mx_SpacePublicShare .mx_AccessibleButton {
position: relative;
padding: 16px 32px 16px 72px;
@@ -18595,13 +24241,16 @@ a.mx_RoomPreviewBar_inviter {
font-size: 1.5rem;
margin: 20px 0;
}
+
.mx_SpacePublicShare .mx_AccessibleButton > h3 {
font-weight: 600;
margin: 0 0 4px;
}
+
.mx_SpacePublicShare .mx_AccessibleButton > span {
color: #737d8c;
}
+
.mx_SpacePublicShare .mx_AccessibleButton:before {
position: absolute;
content: "";
@@ -18617,39 +24266,49 @@ a.mx_RoomPreviewBar_inviter {
mask-size: 24px;
background-color: #8d99a5;
}
+
.mx_SpacePublicShare .mx_AccessibleButton:hover {
border-color: #0dbd8b;
}
+
.mx_SpacePublicShare .mx_AccessibleButton:hover:before {
background-color: #0dbd8b;
}
+
.mx_SpacePublicShare .mx_AccessibleButton:hover > span {
color: #2e2f32;
}
+
.mx_SpacePublicShare
.mx_AccessibleButton.mx_SpacePublicShare_shareButton:before {
-webkit-mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
}
+
.mx_SpacePublicShare
.mx_AccessibleButton.mx_SpacePublicShare_inviteButton:before {
-webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
}
+
.mx_InlineTermsAgreement_cbContainer {
margin-bottom: 10px;
font-size: 1.4rem;
}
+
.mx_InlineTermsAgreement_cbContainer a {
color: #0dbd8b;
text-decoration: none;
}
+
.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox {
margin-top: 10px;
}
+
.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox input {
vertical-align: text-bottom;
}
+
.mx_InlineTermsAgreement_link {
display: inline-block;
-webkit-mask-image: url(../../img/external-link.a8d3e9b.svg);
@@ -18664,14 +24323,17 @@ a.mx_RoomPreviewBar_inviter {
margin-left: 3px;
vertical-align: middle;
}
+
.mx_AnalyticsToast .mx_AccessibleButton_kind_danger {
background: none;
color: #0dbd8b;
}
+
.mx_AnalyticsToast .mx_AccessibleButton_kind_primary {
background: #0dbd8b;
color: #fff;
}
+
.mx_NonUrgentEchoFailureToast .mx_NonUrgentEchoFailureToast_icon {
display: inline-block;
width: 1.8rem;
@@ -18687,22 +24349,27 @@ a.mx_RoomPreviewBar_inviter {
mask-image: url(../../img/element-icons/cloud-off.33cd28e.svg);
margin-right: 8px;
}
+
.mx_NonUrgentEchoFailureToast span {
vertical-align: middle;
}
+
.mx_NonUrgentEchoFailureToast .mx_AccessibleButton {
padding: 0;
}
+
.mx_VerificationShowSas_decimalSas {
text-align: center;
font-weight: 700;
padding-left: 3px;
padding-right: 3px;
}
+
.mx_VerificationShowSas_decimalSas span {
margin-left: 5px;
margin-right: 5px;
}
+
.mx_VerificationShowSas_emojiSas {
text-align: center;
display: -webkit-box;
@@ -18715,29 +24382,35 @@ a.mx_RoomPreviewBar_inviter {
justify-content: center;
margin: 25px 0;
}
+
.mx_VerificationShowSas_emojiSas_block {
display: inline-block;
margin-bottom: 16px;
position: relative;
width: 52px;
}
+
.mx_AuthPage_modal .mx_VerificationShowSas_emojiSas_block,
.mx_Dialog .mx_VerificationShowSas_emojiSas_block {
width: 60px;
}
+
.mx_VerificationShowSas_emojiSas_emoji {
font-size: 3.2rem;
}
+
.mx_VerificationShowSas_emojiSas_label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 1.2rem;
}
+
.mx_VerificationShowSas_emojiSas_break {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
+
.mx_VerificationShowSas
.mx_Dialog_buttons
button.mx_VerificationShowSas_matchButton {
@@ -18745,6 +24418,7 @@ a.mx_RoomPreviewBar_inviter {
background-color: rgba(3, 179, 129, 0.16);
border: none;
}
+
.mx_VerificationShowSas
.mx_Dialog_buttons
button.mx_VerificationShowSas_noMatchButton {
@@ -18752,91 +24426,7 @@ a.mx_RoomPreviewBar_inviter {
background-color: rgba(255, 75, 85, 0.16);
border: none;
}
-.mx_PlayPauseButton {
- position: relative;
- width: 32px;
- height: 32px;
- border-radius: 32px;
- background-color: #fff;
-}
-.mx_PlayPauseButton:before {
- content: "";
- position: absolute;
- background-color: #737d8c;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-.mx_PlayPauseButton.mx_PlayPauseButton_disabled:before {
- opacity: 0.5;
-}
-.mx_PlayPauseButton.mx_PlayPauseButton_play:before {
- width: 13px;
- height: 16px;
- top: 8px;
- left: 12px;
- -webkit-mask-image: url(../../img/element-icons/play.a72552b.svg);
- mask-image: url(../../img/element-icons/play.a72552b.svg);
-}
-.mx_PlayPauseButton.mx_PlayPauseButton_pause:before {
- width: 10px;
- height: 12px;
- top: 10px;
- left: 11px;
- -webkit-mask-image: url(../../img/element-icons/pause.c4c0886.svg);
- mask-image: url(../../img/element-icons/pause.c4c0886.svg);
-}
-.mx_VoiceMessagePrimaryContainer {
- padding: 7px 12px 7px 11px;
- background-color: #e3e8f0;
- border-radius: 12px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #737d8c;
- font-size: 1.4rem;
- line-height: 2.4rem;
-}
-.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar {
- background-color: #c1c6cd;
-}
-.mx_VoiceMessagePrimaryContainer
- .mx_Waveform
- .mx_Waveform_bar.mx_Waveform_bar_100pct {
- -webkit-transition: background-color 0.25s ease;
- transition: background-color 0.25s ease;
- background-color: #737d8c;
-}
-.mx_VoiceMessagePrimaryContainer .mx_Clock {
- width: 4.2rem;
- padding-right: 6px;
- padding-left: 8px;
-}
-.mx_Waveform {
- position: relative;
- height: 30px;
- top: 1px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- overflow: hidden;
-}
-.mx_Waveform .mx_Waveform_bar {
- width: 0;
- border: 1px solid transparent;
- border-radius: 2px;
- min-height: 0;
- max-height: 100%;
- margin-left: 1px;
- margin-right: 1px;
-}
+
.mx_CallContainer {
position: absolute;
right: 20px;
@@ -18844,20 +24434,25 @@ a.mx_RoomPreviewBar_inviter {
z-index: 100;
pointer-events: none;
}
+
.mx_CallContainer .mx_CallPreview {
pointer-events: auto;
cursor: pointer;
}
-.mx_CallContainer .mx_CallPreview .mx_CallView_video {
- width: 350px;
+
+.mx_CallContainer .mx_CallPreview .mx_VideoFeed_remote.mx_VideoFeed_voice {
+ min-height: 150px;
}
+
.mx_CallContainer .mx_CallPreview .mx_VideoFeed_local {
border-radius: 8px;
overflow: hidden;
}
+
.mx_CallContainer .mx_AppTile_persistedWrapper div {
min-width: 350px;
}
+
.mx_CallContainer .mx_IncomingCallBox {
min-width: 250px;
background-color: #f4f6fa;
@@ -18868,12 +24463,14 @@ a.mx_RoomPreviewBar_inviter {
pointer-events: auto;
cursor: pointer;
}
+
.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
direction: row;
}
+
.mx_CallContainer
.mx_IncomingCallBox
.mx_IncomingCallBox_CallerInfo
@@ -18881,6 +24478,7 @@ a.mx_RoomPreviewBar_inviter {
.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo img {
margin: 8px;
}
+
.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo > div {
display: -webkit-box;
display: -ms-flexbox;
@@ -18893,6 +24491,7 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1,
.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo p {
margin: 0;
@@ -18900,9 +24499,11 @@ a.mx_RoomPreviewBar_inviter {
font-size: 1.4rem;
line-height: 1.6rem;
}
+
.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1 {
font-weight: 700;
}
+
.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons {
padding: 8px;
display: -webkit-box;
@@ -18913,12 +24514,14 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-direction: row;
flex-direction: row;
}
+
.mx_CallContainer
.mx_IncomingCallBox
.mx_IncomingCallBox_buttons
> .mx_IncomingCallBox_spacer {
width: 8px;
}
+
.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons > * {
-ms-flex-negative: 0;
flex-shrink: 0;
@@ -18929,6 +24532,41 @@ a.mx_RoomPreviewBar_inviter {
font-size: 1.5rem;
line-height: 2.4rem;
}
+
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_iconButton {
+ position: absolute;
+ right: 8px;
+}
+
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_iconButton:before {
+ content: "";
+ height: 20px;
+ width: 20px;
+ background-color: #c1c6cd;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+}
+
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_silence:before {
+ -webkit-mask-image: url(../../img/voip/silence.08cd2d6.svg);
+ mask-image: url(../../img/voip/silence.08cd2d6.svg);
+}
+
+.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_unSilence:before {
+ -webkit-mask-image: url(../../img/voip/un-silence.cebdd12.svg);
+ mask-image: url(../../img/voip/un-silence.cebdd12.svg);
+}
+
+.mx_CallPreview {
+ position: fixed;
+ left: 0;
+ top: 0;
+}
+
.mx_CallView {
border-radius: 8px;
background-color: #f2f5f8;
@@ -18936,6 +24574,7 @@ a.mx_RoomPreviewBar_inviter {
padding-right: 8px;
pointer-events: auto;
}
+
.mx_CallView_large {
padding-bottom: 10px;
margin: 5px 5px 5px 18px;
@@ -18947,35 +24586,41 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-direction: column;
flex-direction: column;
}
+
.mx_CallView_large,
.mx_CallView_large .mx_CallView_voice {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
+
.mx_CallView_pip {
width: 320px;
padding-bottom: 8px;
- margin-top: 10px;
background-color: #f4f6fa;
-webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
+
.mx_CallView_pip .mx_CallView_voice {
height: 180px;
}
+
.mx_CallView_pip .mx_CallView_callControls {
bottom: 0;
}
+
.mx_CallView_pip .mx_CallView_callControls_button:before {
width: 36px;
height: 36px;
}
+
.mx_CallView_pip .mx_CallView_holdTransferContent {
padding-top: 10px;
padding-bottom: 25px;
}
+
.mx_CallView_content {
position: relative;
display: -webkit-box;
@@ -18983,12 +24628,14 @@ a.mx_RoomPreviewBar_inviter {
display: flex;
border-radius: 8px;
}
+
.mx_CallView_voice {
-webkit-box-orient: vertical;
-ms-flex-direction: column;
flex-direction: column;
background-color: #27303a;
}
+
.mx_CallView_voice,
.mx_CallView_voice_avatarsContainer {
-webkit-box-align: center;
@@ -18999,6 +24646,7 @@ a.mx_RoomPreviewBar_inviter {
justify-content: center;
-webkit-box-direction: normal;
}
+
.mx_CallView_voice_avatarsContainer {
display: -webkit-box;
display: -ms-flexbox;
@@ -19007,10 +24655,12 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-direction: row;
flex-direction: row;
}
+
.mx_CallView_voice_avatarsContainer div {
margin-left: 12px;
margin-right: 12px;
}
+
.mx_CallView_voice
.mx_CallView_holdTransferContent
.mx_CallView_voice_avatarContainer {
@@ -19018,28 +24668,34 @@ a.mx_RoomPreviewBar_inviter {
overflow: hidden;
position: relative;
}
+
.mx_CallView_holdTransferContent {
height: 20px;
padding-top: 20px;
padding-bottom: 15px;
color: #fff;
}
+
.mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind {
padding: 0;
font-weight: 700;
}
+
.mx_CallView_video {
width: 100%;
height: 100%;
z-index: 30;
overflow: hidden;
}
+
.mx_CallView_video_hold {
overflow: hidden;
}
+
.mx_CallView_video_hold .mx_VideoFeed {
visibility: hidden;
}
+
.mx_CallView_video_holdBackground {
position: absolute;
width: 100%;
@@ -19052,6 +24708,7 @@ a.mx_RoomPreviewBar_inviter {
-webkit-filter: blur(20px);
filter: blur(20px);
}
+
.mx_CallView_video_holdBackground:after {
content: "";
display: block;
@@ -19062,6 +24719,7 @@ a.mx_RoomPreviewBar_inviter {
right: 0;
background-color: rgba(0, 0, 0, 0.6);
}
+
.mx_CallView_video .mx_CallView_holdTransferContent {
position: absolute;
top: 50%;
@@ -19072,6 +24730,7 @@ a.mx_RoomPreviewBar_inviter {
color: #fff;
text-align: center;
}
+
.mx_CallView_video .mx_CallView_holdTransferContent:before {
display: block;
margin-left: auto;
@@ -19083,15 +24742,18 @@ a.mx_RoomPreviewBar_inviter {
background-position: 50%;
background-size: cover;
}
+
.mx_CallView_pip .mx_CallView_video .mx_CallView_holdTransferContent:before {
width: 30px;
height: 30px;
}
+
.mx_CallView_video
.mx_CallView_holdTransferContent
.mx_AccessibleButton_hasKind {
padding: 0;
}
+
.mx_CallView_header {
height: 44px;
display: -webkit-box;
@@ -19110,24 +24772,29 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-negative: 0;
flex-shrink: 0;
}
+
.mx_CallView_header_callType {
font-size: 1.2rem;
font-weight: 700;
vertical-align: middle;
}
+
.mx_CallView_header_secondaryCallInfo:before {
content: "·";
margin-left: 6px;
margin-right: 6px;
}
+
.mx_CallView_header_controls {
margin-left: auto;
}
+
.mx_CallView_header_button {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
+
.mx_CallView_header_button:before {
content: "";
display: inline-block;
@@ -19142,27 +24809,33 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-position: center;
mask-position: center;
}
+
.mx_CallView_header_button_fullscreen:before {
-webkit-mask-image: url(../../img/element-icons/call/fullscreen.43be138.svg);
mask-image: url(../../img/element-icons/call/fullscreen.43be138.svg);
}
+
.mx_CallView_header_button_expand:before {
-webkit-mask-image: url(../../img/element-icons/call/expand.7ef9f56.svg);
mask-image: url(../../img/element-icons/call/expand.7ef9f56.svg);
}
+
.mx_CallView_header_callInfo {
margin-left: 12px;
margin-right: 16px;
}
+
.mx_CallView_header_roomName {
font-weight: 700;
font-size: 12px;
line-height: normal;
height: 15px;
}
+
.mx_CallView_secondaryCall_roomName {
margin-left: 4px;
}
+
.mx_CallView_header_callTypeSmall {
font-size: 12px;
color: #737d8c;
@@ -19173,6 +24846,7 @@ a.mx_RoomPreviewBar_inviter {
text-overflow: ellipsis;
max-width: 240px;
}
+
.mx_CallView_header_phoneIcon {
display: inline-block;
margin-right: 6px;
@@ -19180,6 +24854,7 @@ a.mx_RoomPreviewBar_inviter {
width: 16px;
vertical-align: middle;
}
+
.mx_CallView_header_phoneIcon:before {
content: "";
display: inline-block;
@@ -19196,6 +24871,7 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
}
+
.mx_CallView_callControls {
position: absolute;
display: -webkit-box;
@@ -19210,15 +24886,18 @@ a.mx_RoomPreviewBar_inviter {
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
+
.mx_CallView_callControls_hidden {
opacity: 0.001;
pointer-events: none;
}
+
.mx_CallView_callControls_button {
cursor: pointer;
margin-left: 8px;
margin-right: 8px;
}
+
.mx_CallView_callControls_button:before {
content: "";
display: inline-block;
@@ -19228,55 +24907,70 @@ a.mx_RoomPreviewBar_inviter {
background-size: contain;
background-position: 50%;
}
+
.mx_CallView_callControls_dialpad {
margin-right: auto;
}
+
.mx_CallView_callControls_dialpad:before {
background-image: url(../../img/voip/dialpad.fdda9a0.svg);
}
+
.mx_CallView_callControls_button_dialpad_hidden {
margin-right: auto;
cursor: auto;
}
+
.mx_CallView_callControls_button_micOn:before {
background-image: url(../../img/voip/mic-on.2592c14.svg);
}
+
.mx_CallView_callControls_button_micOff:before {
background-image: url(../../img/voip/mic-off.774e42b.svg);
}
+
.mx_CallView_callControls_button_vidOn:before {
background-image: url(../../img/voip/vid-on.b9b8bbf.svg);
}
+
.mx_CallView_callControls_button_vidOff:before {
background-image: url(../../img/voip/vid-off.5552596.svg);
}
+
.mx_CallView_callControls_button_hangup:before {
background-image: url(../../img/voip/hangup.9c3adeb.svg);
}
+
.mx_CallView_callControls_button_more {
margin-left: auto;
}
+
.mx_CallView_callControls_button_more:before {
background-image: url(../../img/voip/more.5e8055e.svg);
}
+
.mx_CallView_callControls_button_more_hidden {
margin-left: auto;
cursor: auto;
}
+
.mx_CallView_callControls_button_invisible {
visibility: hidden;
pointer-events: none;
position: absolute;
}
+
.mx_CallViewForRoom {
overflow: hidden;
}
+
.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 8px;
}
+
.mx_CallViewForRoom
.mx_CallViewForRoom_ResizeWrapper:hover
.mx_CallViewForRoom_ResizeHandle {
@@ -19288,6 +24982,7 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-pack: center;
justify-content: center;
}
+
.mx_CallViewForRoom
.mx_CallViewForRoom_ResizeWrapper:hover
.mx_CallViewForRoom_ResizeHandle:after {
@@ -19299,13 +24994,36 @@ a.mx_RoomPreviewBar_inviter {
max-width: 64px;
background-color: #2e2f32;
}
+
.mx_DialPad {
display: grid;
+ grid-row-gap: 16px;
+ row-gap: 16px;
+ grid-column-gap: 0;
+ -webkit-column-gap: 0;
+ -moz-column-gap: 0;
+ column-gap: 0;
+ margin-top: 24px;
grid-template-columns: repeat(3, 1fr);
- grid-gap: 16px;
- gap: 16px;
}
+
+.mx_DialPad,
.mx_DialPad_button {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.mx_DialPad_button {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
width: 40px;
height: 40px;
background-color: #e3e8f0;
@@ -19314,9 +25032,17 @@ a.mx_RoomPreviewBar_inviter {
font-weight: 600;
text-align: center;
vertical-align: middle;
- line-height: 40px;
}
-.mx_DialPad_deleteButton:before,
+
+.mx_DialPad_button .mx_DialPad_buttonSubText {
+ font-size: 8px;
+}
+
+.mx_DialPad_dialButton {
+ grid-column: 2;
+ background-color: #0dbd8b;
+}
+
.mx_DialPad_dialButton:before {
content: "";
display: inline-block;
@@ -19330,68 +25056,34 @@ a.mx_RoomPreviewBar_inviter {
-webkit-mask-position: center;
mask-position: center;
background-color: #fff;
-}
-.mx_DialPad_deleteButton {
- background-color: #ff4b55;
-}
-.mx_DialPad_deleteButton:before {
- -webkit-mask-image: url(../../img/element-icons/call/delete.833d785.svg);
- mask-image: url(../../img/element-icons/call/delete.833d785.svg);
- -webkit-mask-position: 9px;
- mask-position: 9px;
-}
-.mx_DialPad_dialButton {
- background-color: #0dbd8b;
-}
-.mx_DialPad_dialButton:before {
-webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
}
+
+.mx_DialPadContextMenu_dialPad .mx_DialPad {
+ grid-row-gap: 16px;
+ row-gap: 16px;
+ grid-column-gap: 32px;
+ -webkit-column-gap: 32px;
+ -moz-column-gap: 32px;
+ column-gap: 32px;
+}
+
+.mx_DialPadContextMenuWrapper {
+ padding: 15px;
+}
+
.mx_DialPadContextMenu_header {
- margin-top: 12px;
- margin-left: 12px;
- margin-right: 12px;
+ margin-top: 32px;
+ margin-left: 20px;
+ margin-right: 20px;
+ border: none;
+ border-bottom: 1px solid #c1c6cd;
+ -webkit-transition: border-bottom 0.25s;
+ transition: border-bottom 0.25s;
}
-.mx_DialPadContextMenu_title {
- color: #61708b;
- font-size: 12px;
- font-weight: 600;
-}
-.mx_DialPadContextMenu_dialled {
- height: 1em;
- font-size: 18px;
- font-weight: 600;
-}
-.mx_DialPadContextMenu_dialPad {
- margin: 16px;
-}
-.mx_DialPadContextMenu_horizSep {
- position: relative;
-}
-.mx_DialPadContextMenu_horizSep:before {
- content: "";
- position: absolute;
- width: 100%;
- border-bottom: 1px solid #e3e8f0;
-}
-.mx_Dialog_dialPadWrapper .mx_Dialog {
- padding: 0;
-}
-.mx_DialPadModal {
- width: 192px;
- height: 368px;
-}
-.mx_DialPadModal_header {
- margin-top: 12px;
- margin-left: 12px;
- margin-right: 12px;
-}
-.mx_DialPadModal_title {
- color: #61708b;
- font-size: 12px;
- font-weight: 600;
-}
-.mx_DialPadModal_cancel {
+
+.mx_DialPadContextMenu_cancel {
float: right;
-webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
mask: url(../../img/feather-customised/cancel.23c2689.svg);
@@ -19406,32 +25098,111 @@ a.mx_RoomPreviewBar_inviter {
background-color: #c1c1c1;
cursor: pointer;
}
-.mx_DialPadModal_field {
+
+.mx_DialPadContextMenu_header:focus-within {
+ border-bottom: 1px solid #0dbd8b;
+}
+
+.mx_DialPadContextMenu_title {
+ color: #61708b;
+ font-size: 12px;
+ font-weight: 600;
+}
+
+.mx_DialPadContextMenu_dialled {
+ height: 1.5em;
+ font-size: 18px;
+ font-weight: 600;
border: none;
margin: 0;
}
+
+.mx_DialPadContextMenu_dialled input {
+ font-size: 18px;
+ font-weight: 600;
+ overflow: hidden;
+ max-width: 185px;
+ text-align: left;
+ direction: rtl;
+ padding: 8px 0;
+ background-color: transparent;
+}
+
+.mx_DialPadContextMenu_dialPad {
+ margin: 16px;
+}
+
+.mx_Dialog_dialPadWrapper .mx_Dialog {
+ padding: 0;
+}
+
+.mx_DialPadModal {
+ width: 292px;
+ height: 370px;
+ padding: 16px 0 0;
+}
+
+.mx_DialPadModal_header {
+ margin-top: 32px;
+ margin-left: 40px;
+ margin-right: 40px;
+ border-bottom: 1px solid #c1c6cd;
+ -webkit-transition: border-bottom 0.25s;
+ transition: border-bottom 0.25s;
+}
+
+.mx_DialPadModal_header:focus-within {
+ border-bottom: 1px solid #0dbd8b;
+}
+
+.mx_DialPadModal_title {
+ color: #61708b;
+ font-size: 12px;
+ font-weight: 600;
+}
+
+.mx_DialPadModal_cancel {
+ float: right;
+ -webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
+ mask: url(../../img/feather-customised/cancel.23c2689.svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: cover;
+ mask-size: cover;
+ width: 14px;
+ height: 14px;
+ background-color: #c1c1c1;
+ cursor: pointer;
+ margin-right: 16px;
+}
+
+.mx_DialPadModal_field {
+ border: none;
+ margin: 0;
+ height: 30px;
+}
+
+.mx_DialPadModal_field .mx_Field_postfix {
+ border-left: none;
+}
+
.mx_DialPadModal_field input {
font-size: 18px;
font-weight: 600;
}
+
.mx_DialPadModal_dialPad {
margin-left: 16px;
margin-right: 16px;
margin-top: 16px;
}
-.mx_DialPadModal_horizSep {
- position: relative;
-}
-.mx_DialPadModal_horizSep:before {
- content: "";
- position: absolute;
- width: 100%;
- border-bottom: 1px solid #e3e8f0;
-}
+
.mx_VideoFeed_voice {
- padding-bottom: 52px;
background-color: #27303a;
}
+
.mx_VideoFeed_remote {
width: 100%;
height: 100%;
@@ -19445,9 +25216,11 @@ a.mx_RoomPreviewBar_inviter {
-ms-flex-align: center;
align-items: center;
}
+
.mx_VideoFeed_remote.mx_VideoFeed_video {
background-color: #000;
}
+
.mx_VideoFeed_local {
max-width: 25%;
max-height: 25%;
@@ -19457,14 +25230,94 @@ a.mx_RoomPreviewBar_inviter {
z-index: 100;
border-radius: 4px;
}
+
.mx_VideoFeed_local.mx_VideoFeed_video {
background-color: transparent;
}
+
.mx_VideoFeed_mirror {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
+
+.hljs {
+ display: block;
+ overflow-x: auto;
+ padding: 0.5em;
+ color: #383a42;
+ background: #fafafa;
+}
+
+.hljs-comment,
+.hljs-quote {
+ color: #a0a1a7;
+ font-style: italic;
+}
+
+.hljs-doctag,
+.hljs-formula,
+.hljs-keyword {
+ color: #a626a4;
+}
+
+.hljs-deletion,
+.hljs-name,
+.hljs-section,
+.hljs-selector-tag,
+.hljs-subst {
+ color: #e45649;
+}
+
+.hljs-literal {
+ color: #0184bb;
+}
+
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string,
+.hljs-regexp,
+.hljs-string {
+ color: #50a14f;
+}
+
+.hljs-built_in,
+.hljs-class .hljs-title {
+ color: #c18401;
+}
+
+.hljs-attr,
+.hljs-number,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-pseudo,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable {
+ color: #986801;
+}
+
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-symbol,
+.hljs-title {
+ color: #4078f2;
+}
+
+.hljs-emphasis {
+ font-style: italic;
+}
+
+.hljs-strong {
+ font-weight: 700;
+}
+
+.hljs-link {
+ text-decoration: underline;
+}
`;
+
const customCSS = `
#snackbar {
display: flex;
@@ -19566,7 +25419,6 @@ img {
white-space: nowrap;
overflow: hidden;
}
-
`;
const markdownCSS = `.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;overflow:hidden;font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;font-size:16px;line-height:1.6;word-wrap:break-word}.markdown-body *{-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a{background:0 0;color:#4183c4;text-decoration:none}.markdown-body a:active,.markdown-body a:hover{outline:0}.markdown-body a:active,.markdown-body a:focus,.markdown-body a:hover{text-decoration:underline}.markdown-body strong{font-weight:700}.markdown-body em{font-style:italic}.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;position:relative;margin-top:1em;margin-bottom:16px;font-weight:700;line-height:1.4}.markdown-body h1,.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid #eee}.markdown-body h1{font-size:2.25em;line-height:1.2}.markdown-body h2{font-size:1.75em;line-height:1.225}.markdown-body h3{font-size:1.5em}.markdown-body h4{font-size:1.25em}.markdown-body h5{font-size:1em}.markdown-body h6{font-size:1em;color:#777}.markdown-body code,.markdown-body kbd,.markdown-body pre{font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace}.markdown-body code{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.markdown-body code:after,.markdown-body code:before{letter-spacing:-.2em;content:'\\00a0'}.markdown-body pre{word-wrap:normal;padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.markdown-body pre code{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background:0 0}.markdown-body pre code:after,.markdown-body pre code:before{content:normal}.markdown-body pre>code{font-size:1em;word-break:normal;white-space:pre;border:0}.markdown-body kbd{background-color:#e7e7e7;background-image:-webkit-linear-gradient(#fefefe,#e7e7e7);background-image:linear-gradient(#fefefe,#e7e7e7);background-repeat:repeat-x;display:inline-block;padding:5px 5px 1px;margin:0 1px;font-size:11px;line-height:10px;color:#000;border:1px solid #cfcfcf;border-radius:2px;box-shadow:0 1px 0 #ccc}.markdown-body hr:after,.markdown-body hr:before{display:table;content:''}.markdown-body input{color:inherit;font:inherit;margin:0;font-size:13px;line-height:1.4;font-family:Helvetica,Arial,freesans,clean,sans-serif,'Segoe UI Emoji','Segoe UI Symbol'}.markdown-body input[disabled]{cursor:default}.markdown-body input[type=checkbox]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}.markdown-body blockquote{margin:0 0 16px;padding:0 15px;color:#777;border-left:4px solid #ddd}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body img{border:0;max-width:100%;-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body hr{-moz-box-sizing:content-box;box-sizing:content-box;overflow:hidden;background:#e7e7e7;height:4px;padding:0;margin:16px 0;border:0}.markdown-body hr:after{clear:both}.markdown-body td,.markdown-body th{padding:0}.markdown-body table{border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}.markdown-body table td,.markdown-body table th{padding:6px 13px;border:1px solid #ddd}.markdown-body table th{font-weight:700}.markdown-body table tr{background-color:#fff;border-top:1px solid #ccc}.markdown-body table tr:nth-child(2n){background-color:#f8f8f8}.markdown-body ol,.markdown-body ul{padding:0 0 0 2em}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol{list-style-type:lower-alpha}.markdown-body li>p{margin-top:16px}.markdown-body dd{margin-left:0}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}`;
From 41bc2b6481c85a476167fb7ccb2eaee1e1f8e950 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 22:15:05 +0530
Subject: [PATCH 139/313] Move away from streamsaver(for now)
---
package.json | 4 +-
src/utils/exportUtils/Exporter.ts | 63 ++-----
src/utils/exportUtils/ZipStream.ts | 279 -----------------------------
yarn.lock | 49 +++--
4 files changed, 51 insertions(+), 344 deletions(-)
delete mode 100644 src/utils/exportUtils/ZipStream.ts
diff --git a/package.json b/package.json
index 15c310c2ce..30254ed78d 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
"highlight.js": "^10.5.0",
"html-entities": "^1.4.0",
"is-ip": "^3.1.0",
+ "jszip": "^3.7.0",
"katex": "^0.12.0",
"linkifyjs": "^2.1.9",
"lodash": "^4.17.20",
@@ -99,10 +100,8 @@
"resize-observer-polyfill": "^1.5.1",
"rfc4648": "^1.4.0",
"sanitize-html": "^2.3.2",
- "streamsaver": "^2.0.5",
"tar-js": "^0.3.0",
"url": "^0.11.0",
- "web-streams-polyfill": "^3.0.3",
"what-input": "^5.2.10",
"zxcvbn": "^4.4.2"
},
@@ -131,6 +130,7 @@
"@types/counterpart": "^0.18.1",
"@types/css-font-loading-module": "^0.0.6",
"@types/diff-match-patch": "^1.0.32",
+ "@types/file-saver": "^2.0.3",
"@types/flux": "^3.1.9",
"@types/jest": "^26.0.20",
"@types/linkifyjs": "^2.1.3",
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index d43f937c7b..c840731d47 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -1,4 +1,3 @@
-import streamSaver from "streamsaver";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClientPeg } from "../../MatrixClientPeg";
@@ -7,21 +6,18 @@ import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
import { Direction, MatrixClient } from "matrix-js-sdk";
-import streamToZIP from "./ZipStream";
-import * as ponyfill from "web-streams-polyfill/ponyfill";
-import "web-streams-polyfill/ponyfill"; // to support streams API for older browsers
import { MutableRefObject } from "react";
+import JSZip from "jszip";
+import { saveAs } from "file-saver";
-type FileStream = {
+type BlobFile = {
name: string;
- stream(): ReadableStream;
+ blob: Blob;
};
export default abstract class Exporter {
- protected files: FileStream[];
+ protected files: BlobFile[];
protected client: MatrixClient;
- protected writer: WritableStreamDefaultWriter<any>;
- protected fileStream: WritableStream<any>;
protected cancelled: boolean;
protected constructor(
@@ -34,7 +30,6 @@ export default abstract class Exporter {
this.files = [];
this.client = MatrixClientPeg.get();
window.addEventListener("beforeunload", this.onBeforeUnload);
- window.addEventListener("onunload", this.abortWriter);
}
protected onBeforeUnload(e: BeforeUnloadEvent): string {
@@ -50,7 +45,7 @@ export default abstract class Exporter {
protected addFile(filePath: string, blob: Blob): void {
const file = {
name: filePath,
- stream: () => blob.stream(),
+ blob,
};
this.files.push(file);
}
@@ -58,67 +53,31 @@ export default abstract class Exporter {
protected async downloadZIP(): Promise<any> {
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
- // Support for older browsers
- streamSaver.WritableStream = ponyfill.WritableStream;
-
+ const zip = new JSZip();
// Create a writable stream to the directory
- this.fileStream = streamSaver.createWriteStream(filename);
-
if (!this.cancelled) this.updateProgress("Generating a ZIP");
else return this.cleanUp();
- this.writer = this.fileStream.getWriter();
- const files = this.files;
+ for (const file of this.files) zip.file(file.name, file.blob);
- const readableZipStream = streamToZIP({
- start(ctrl) {
- for (const file of files) ctrl.enqueue(file);
- ctrl.close();
- },
- });
+ const content = await zip.generateAsync({ type: "blob" });
- if (this.cancelled) return this.cleanUp();
-
- this.updateProgress("Writing to the file system");
-
- const reader = readableZipStream.getReader();
- await this.pumpToFileStream(reader);
+ await saveAs(content, filename);
}
protected cleanUp(): string {
console.log("Cleaning up...");
window.removeEventListener("beforeunload", this.onBeforeUnload);
- window.removeEventListener("onunload", this.abortWriter);
return "";
}
public async cancelExport(): Promise<void> {
console.log("Cancelling export...");
this.cancelled = true;
- await this.abortWriter();
}
protected async downloadPlainText(fileName: string, text: string): Promise<any> {
- this.fileStream = streamSaver.createWriteStream(fileName);
- this.writer = this.fileStream.getWriter();
- const data = new TextEncoder().encode(text);
- if (this.cancelled) return this.cleanUp();
- await this.writer.write(data);
- await this.writer.close();
- }
-
- protected async abortWriter(): Promise<void> {
- await this.fileStream?.abort();
- await this.writer?.abort();
- }
-
- protected async pumpToFileStream(reader: ReadableStreamDefaultReader): Promise<void> {
- const res = await reader.read();
- if (res.done) await this.writer.close();
- else {
- await this.writer.write(res.value);
- await this.pumpToFileStream(reader);
- }
+ await saveAs(new Blob[text], fileName);
}
protected setEventMetadata(event: MatrixEvent): MatrixEvent {
diff --git a/src/utils/exportUtils/ZipStream.ts b/src/utils/exportUtils/ZipStream.ts
deleted file mode 100644
index 2ee355f09c..0000000000
--- a/src/utils/exportUtils/ZipStream.ts
+++ /dev/null
@@ -1,279 +0,0 @@
-// Based on https://github.com/jimmywarting/StreamSaver.js/blob/master/examples/zip-stream.js
-
-/* global ReadableStream */
-
-type TypedArray =
- | Int8Array
- | Uint8Array
- | Int16Array
- | Uint16Array
- | Int32Array
- | Uint32Array
- | Uint8ClampedArray
- | Float32Array
- | Float64Array;
-
-/**
- * 32-bit cyclic redundancy check, or CRC-32 - checksum
- */
-class Crc32 {
- crc: number;
- table: any;
- constructor() {
- this.crc = -1;
- this.table = (() => {
- let i;
- let j;
- let t;
- const table = [];
-
- for (i = 0; i < 256; i++) {
- t = i;
- for (j = 0; j < 8; j++) {
- t = (t & 1)
- ? (t >>> 1) ^ 0xEDB88320
- : t >>> 1;
- }
- table[i] = t;
- }
- return table;
- })();
- }
-
- append(data: TypedArray) {
- let crc = this.crc | 0;
- const table = this.table;
- for (let offset = 0, len = data.length | 0; offset < len; offset++) {
- crc = (crc >>> 8) ^ table[(crc ^ data[offset]) & 0xFF];
- }
- this.crc = crc;
- }
-
- get() {
- return ~this.crc;
- }
-}
-
-type DataHelper = {
- array: Uint8Array;
- view: DataView;
-};
-
-const getDataHelper = (byteLength: number): DataHelper => {
- const uint8 = new Uint8Array(byteLength);
- return {
- array: uint8,
- view: new DataView(uint8.buffer),
- };
-};
-
-type FileLike = File & {
- directory: string;
- comment: string;
- stream(): ReadableStream;
-};
-
-type ZipObj = {
- crc?: Crc32;
- uncompressedLength: number;
- compressedLength: number;
- ctrl: ReadableStreamDefaultController;
- writeFooter: Function;
- writeHeader: Function;
- reader?: ReadableStreamDefaultReader;
- offset: number;
- header?: DataHelper;
- fileLike: FileLike;
- level: number;
- directory: boolean;
-};
-
-const pump = (zipObj: ZipObj) => zipObj.reader ? zipObj.reader.read().then(chunk => {
- if (zipObj.crc) {
- if (chunk.done) return zipObj.writeFooter();
- const outputData = chunk.value;
- zipObj.crc.append(outputData);
- zipObj.uncompressedLength += outputData.length;
- zipObj.compressedLength += outputData.length;
- zipObj.ctrl.enqueue(outputData);
- } else {
- throw new Error('Missing zipObj.crc');
- }
-}) : undefined;
-
-export default function streamToZIP(underlyingSource: UnderlyingSource) {
- const files = Object.create(null);
- const filenames: string[] = [];
- const encoder = new TextEncoder();
- let offset = 0;
- let activeZipIndex = 0;
- let ctrl: ReadableStreamDefaultController;
- let activeZipObject: ZipObj;
- let closed: boolean;
-
- function next() {
- activeZipIndex++;
- activeZipObject = files[filenames[activeZipIndex]];
- if (activeZipObject) processNextChunk();
- else if (closed) closeZip();
- }
-
- const zipWriter: ReadableStreamDefaultController = {
- desiredSize: null,
-
- error(err) {
- console.error(err);
- },
-
- enqueue(fileLike: FileLike) {
- if (closed) {
- throw new TypeError(
- "Cannot enqueue a chunk into a readable stream that is closed or has been requested to be closed",
- );
- }
-
- let name = fileLike.name.trim();
- const date = new Date(typeof fileLike.lastModified === 'undefined' ? Date.now() : fileLike.lastModified);
-
- if (fileLike.directory && !name.endsWith('/')) name += '/';
- // if file already exists, do not enqueue
- if (files[name]) return;
-
- const nameBuf = encoder.encode(name);
- filenames.push(name);
-
- const zipObject: ZipObj = files[name] = {
- level: 0,
- ctrl,
- directory: !!fileLike.directory,
- nameBuf,
- comment: encoder.encode(fileLike.comment || ''),
- compressedLength: 0,
- uncompressedLength: 0,
- offset,
-
- writeHeader() {
- const header = getDataHelper(26);
- const data = getDataHelper(30 + nameBuf.length);
-
- zipObject.offset = offset;
- zipObject.header = header;
-
- if (zipObject.level !== 0 && !zipObject.directory) {
- header.view.setUint16(4, 0x0800);
- }
-
- header.view.setUint32(0, 0x14000808);
- header.view.setUint16(
- 6,
- (((date.getHours() << 6) | date.getMinutes()) << 5) | (date.getSeconds() / 2),
- true,
- );
- header.view.setUint16(
- 8,
- ((((date.getFullYear() - 1980) << 4) | (date.getMonth() + 1)) << 5) |
- date.getDate(),
- true,
- );
- header.view.setUint16(22, nameBuf.length, true);
- data.view.setUint32(0, 0x504b0304);
- data.array.set(header.array, 4);
- data.array.set(nameBuf, 30);
- offset += data.array.length;
- ctrl.enqueue(data.array);
- },
-
- writeFooter() {
- const footer = getDataHelper(16);
- footer.view.setUint32(0, 0x504b0708);
-
- if (zipObject.crc && zipObject.header) {
- zipObject.header.view.setUint32(10, zipObject.crc.get(), true);
- zipObject.header.view.setUint32(14, zipObject.compressedLength, true);
- zipObject.header.view.setUint32(18, zipObject.uncompressedLength, true);
- footer.view.setUint32(4, zipObject.crc.get(), true);
- footer.view.setUint32(8, zipObject.compressedLength, true);
- footer.view.setUint32(12, zipObject.uncompressedLength, true);
- }
-
- ctrl.enqueue(footer.array);
- offset += zipObject.compressedLength + 16;
- next();
- },
- fileLike,
- };
-
- if (!activeZipObject) {
- activeZipObject = zipObject;
- processNextChunk();
- }
- },
-
- close() {
- if (closed) {
- throw new TypeError(
- "Cannot close a readable stream that has already been requested to be closed",
- );
- }
- if (!activeZipObject) closeZip();
- closed = true;
- },
- };
-
- function closeZip() {
- let length = 0;
- let index = 0;
- let indexFilename: number;
- let file: any;
-
- for (indexFilename = 0; indexFilename < filenames.length; indexFilename++) {
- file = files[filenames[indexFilename]];
- length += 46 + file.nameBuf.length + file.comment.length;
- }
- const data = getDataHelper(length + 22);
- for (indexFilename = 0; indexFilename < filenames.length; indexFilename++) {
- file = files[filenames[indexFilename]];
- data.view.setUint32(index, 0x504b0102);
- data.view.setUint16(index + 4, 0x1400);
- data.array.set(file.header.array, index + 6);
- data.view.setUint16(index + 32, file.comment.length, true);
- if (file.directory) {
- data.view.setUint8(index + 38, 0x10);
- }
- data.view.setUint32(index + 42, file.offset, true);
- data.array.set(file.nameBuf, index + 46);
- data.array.set(file.comment, index + 46 + file.nameBuf.length);
- index += 46 + file.nameBuf.length + file.comment.length;
- }
- data.view.setUint32(index, 0x504b0506);
- data.view.setUint16(index + 8, filenames.length, true);
- data.view.setUint16(index + 10, filenames.length, true);
- data.view.setUint32(index + 12, length, true);
- data.view.setUint32(index + 16, offset, true);
- ctrl.enqueue(data.array);
- ctrl.close();
- }
-
- function processNextChunk() {
- if (!activeZipObject) return;
- if (activeZipObject.reader) return pump(activeZipObject);
- if (activeZipObject.fileLike.stream) {
- activeZipObject.crc = new Crc32();
- activeZipObject.reader = activeZipObject.fileLike.stream().getReader();
- activeZipObject.writeHeader();
- } else next();
- }
-
- return new ReadableStream({
- start: c => {
- ctrl = c;
- underlyingSource.start && Promise.resolve(underlyingSource.start(zipWriter));
- },
- pull() {
- return processNextChunk() || (
- underlyingSource.pull &&
- Promise.resolve(underlyingSource.pull(zipWriter))
- );
- },
- });
-}
diff --git a/yarn.lock b/yarn.lock
index 8801940a35..dc3bc2ca7b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1468,6 +1468,11 @@
resolved "https://registry.yarnpkg.com/@types/fbemitter/-/fbemitter-2.0.32.tgz#8ed204da0f54e9c8eaec31b1eec91e25132d082c"
integrity sha1-jtIE2g9U6cjq7DGx7skeJRMtCCw=
+"@types/file-saver@^2.0.3":
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/@types/file-saver/-/file-saver-2.0.3.tgz#b734c4f5a04d20615eaed3dc106e2ab321082009"
+ integrity sha512-MBIou8pd/41jkff7s97B47bc9+p0BszqqDJsO51yDm49uUxeKzrfuNl5fSLC6BpLEWKA8zlwyqALVmXrFwoBHQ==
+
"@types/flux@^3.1.9":
version "3.1.10"
resolved "https://registry.yarnpkg.com/@types/flux/-/flux-3.1.10.tgz#7c6306e86ecb434d00f38cb82f092640c7bd4098"
@@ -4141,6 +4146,11 @@ ignore@^5.1.4, ignore@^5.1.8:
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
+immediate@~3.0.5:
+ version "3.0.6"
+ resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+ integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
+
immutable@^3.7.4:
version "3.8.2"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
@@ -5235,6 +5245,16 @@ jsprim@^1.2.2:
array-includes "^3.1.2"
object.assign "^4.1.2"
+jszip@^3.7.0:
+ version "3.7.0"
+ resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.7.0.tgz#9b8b995a4e7c9024653ce743e902076a82fdf4e6"
+ integrity sha512-Y2OlFIzrDOPWUnpU0LORIcDn2xN7rC9yKffFM/7pGhQuhO+SUhfm2trkJ/S5amjFvem0Y+1EALz/MEPkvHXVNw==
+ dependencies:
+ lie "~3.3.0"
+ pako "~1.0.2"
+ readable-stream "~2.3.6"
+ set-immediate-shim "~1.0.1"
+
katex@^0.12.0:
version "0.12.0"
resolved "https://registry.yarnpkg.com/katex/-/katex-0.12.0.tgz#2fb1c665dbd2b043edcf8a1f5c555f46beaa0cb9"
@@ -5302,6 +5322,13 @@ levn@~0.3.0:
prelude-ls "~1.1.2"
type-check "~0.3.2"
+lie@~3.3.0:
+ version "3.3.0"
+ resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
+ integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
+ dependencies:
+ immediate "~3.0.5"
+
lines-and-columns@^1.1.6:
version "1.1.6"
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -6015,6 +6042,11 @@ pako@^2.0.3:
resolved "https://registry.yarnpkg.com/pako/-/pako-2.0.3.tgz#cdf475e31b678565251406de9e759196a0ea7a43"
integrity sha512-WjR1hOeg+kki3ZIOjaf4b5WVcay1jaliKSYiEaB1XzwhMQZJxRdQRv0V31EKBYlxb4T7SK3hjfc/jxyU64BoSw==
+pako@~1.0.2:
+ version "1.0.11"
+ resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+ integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
parent-module@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -6552,7 +6584,7 @@ read-pkg@^5.2.0:
parse-json "^5.0.0"
type-fest "^0.6.0"
-readable-stream@^2.0.2:
+readable-stream@^2.0.2, readable-stream@~2.3.6:
version "2.3.7"
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -6953,6 +6985,11 @@ set-blocking@^2.0.0:
resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
+set-immediate-shim@~1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+ integrity sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=
+
set-value@^2.0.0, set-value@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -7206,11 +7243,6 @@ static-extend@^0.1.1:
define-property "^0.2.5"
object-copy "^0.1.0"
-streamsaver@^2.0.5:
- version "2.0.5"
- resolved "https://registry.yarnpkg.com/streamsaver/-/streamsaver-2.0.5.tgz#3212f0e908fcece5b3a65591094475cf87850d00"
- integrity sha512-KIWtBvi8A6FiFZGNSyuIZRZM6C8AvnWTiCx/TYa7so420vC5sQwcBKkdqInuGWoWMfeWy/P+/cRqMtWVf4RW9w==
-
string-length@^4.0.1:
version "4.0.2"
resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
@@ -7916,11 +7948,6 @@ walker@^1.0.7, walker@~1.0.5:
dependencies:
makeerror "1.0.x"
-web-streams-polyfill@^3.0.3:
- version "3.0.3"
- resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.0.3.tgz#f49e487eedeca47a207c1aee41ee5578f884b42f"
- integrity sha512-d2H/t0eqRNM4w2WvmTdoeIvzAUSpK7JmATB8Nr2lb7nQ9BTIJVjbQ/TRFVEh2gUH1HwclPdoPtfMoFfetXaZnA==
-
webcrypto-core@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/webcrypto-core/-/webcrypto-core-1.2.0.tgz#44fda3f9315ed6effe9a1e47466e0935327733b5"
From b91309be82e0550edebe8d6d25f087b3478ba116 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 26 Jul 2021 23:40:27 +0530
Subject: [PATCH 140/313] Apply suggestions from review
---
res/css/views/dialogs/_ExportDialog.scss | 54 ++++++++-----------
src/components/views/avatars/MemberAvatar.tsx | 6 +--
src/components/views/dialogs/ExportDialog.tsx | 28 ++++++----
.../views/elements/EventListSummary.tsx | 4 +-
src/components/views/elements/ReplyThread.tsx | 10 +++-
.../views/messages/RedactedBody.tsx | 2 +-
src/i18n/strings/en_EN.json | 3 ++
src/utils/exportUtils/Exporter.ts | 24 +++++++--
src/utils/exportUtils/HtmlExport.tsx | 20 ++++++-
src/utils/exportUtils/JSONExport.ts | 20 ++++++-
src/utils/exportUtils/PlainTextExport.ts | 20 ++++++-
src/utils/exportUtils/exportCSS.ts | 21 ++++++++
src/utils/exportUtils/exportUtils.ts | 18 ++++++-
13 files changed, 169 insertions(+), 61 deletions(-)
diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
index 4255768447..b4bc2b84b2 100644
--- a/res/css/views/dialogs/_ExportDialog.scss
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -1,3 +1,19 @@
+/*
+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_ExportDialog {
.mx_ExportDialog_subheading {
font-size: $font-16px;
@@ -46,19 +62,14 @@
margin-top: unset;
margin-left: 18px;
}
- .mx_ExportDialog_spinner {
- animation: mx_rotate 2s linear infinite;
- z-index: 2;
- position: relative;
+
+ .mx_Spinner {
+ width: unset;
+ height: unset;
+ flex: unset;
margin-right: 10px;
- width: 24px;
- height: 24px;
- & .mx_ExportDialog_spinner_path {
- stroke: $accent-color;
- stroke-linecap: round;
- animation: mx_dash 1.5s ease-in-out infinite;
- }
}
+
display: flex;
flex-direction: row;
justify-content: flex-end;
@@ -78,24 +89,3 @@
padding: 9px 10px;
}
}
-
-@keyframes mx_rotate {
- 100% {
- transform: rotate(360deg);
- }
-}
-
-@keyframes mx_dash {
- 0% {
- stroke-dasharray: 1, 150;
- stroke-dashoffset: 0;
- }
- 50% {
- stroke-dasharray: 90, 150;
- stroke-dashoffset: -35;
- }
- 100% {
- stroke-dasharray: 90, 150;
- stroke-dashoffset: -124;
- }
-}
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index f2f6920231..9554a50684 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -18,7 +18,6 @@ limitations under the License.
import React from 'react';
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
-import { omit } from "lodash";
import dis from "../../../dispatcher/dispatcher";
import { Action } from "../../../dispatcher/actions";
@@ -91,11 +90,10 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
}
render() {
- let { member, fallbackUserId, onClick, viewUserOnClick, ...otherProps } = this.props;
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ let { member, fallbackUserId, onClick, viewUserOnClick, forExport, ...otherProps } = this.props;
const userId = member ? member.userId : fallbackUserId;
- otherProps = omit(otherProps, "forExport");
-
if (viewUserOnClick) {
onClick = () => {
dis.dispatch({
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 82c38763c3..76f0074573 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -1,3 +1,19 @@
+/*
+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.
+*/
+
import React, { useRef, useState } from "react";
import { Room } from "matrix-js-sdk/src";
import { _t } from "../../../languageHandler";
@@ -19,6 +35,7 @@ import JSONExporter from "../../../utils/exportUtils/JSONExport";
import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
import { useStateCallback } from "../../../hooks/useStateCallback";
import Exporter from "../../../utils/exportUtils/Exporter";
+import Spinner from "../elements/Spinner";
interface IProps extends IDialogProps {
room: Room;
@@ -352,16 +369,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
</div>
{ isExporting ? (
<div className="mx_ExportDialog_progress">
- <svg className="mx_ExportDialog_spinner" viewBox="0 0 50 50">
- <circle
- className="mx_ExportDialog_spinner_path"
- cx="25"
- cy="25"
- r="20"
- fill="none"
- stroke-width="5"
- />
- </svg>
+ <Spinner w={24} h={24} />
<p ref={exportProgressRef}>
{ _t("Processing...") }
</p>
diff --git a/src/components/views/elements/EventListSummary.tsx b/src/components/views/elements/EventListSummary.tsx
index 1b29b0ed3f..99349a236e 100644
--- a/src/components/views/elements/EventListSummary.tsx
+++ b/src/components/views/elements/EventListSummary.tsx
@@ -76,8 +76,8 @@ const EventListSummary: React.FC<IProps> = ({
{ children }
</React.Fragment>;
} else {
- const avatars = summaryMembers.map((m, idx) =>
- <MemberAvatar key={m.userId} member={m} width={14} height={14} />);
+ const avatars = summaryMembers.map((m) => <MemberAvatar key={m.userId} member={m} width={14} height={14} />);
+
body = (
<div className="mx_EventTile_line">
<div className="mx_EventTile_info">
diff --git a/src/components/views/elements/ReplyThread.tsx b/src/components/views/elements/ReplyThread.tsx
index 29b3d1b7f5..2144cc602c 100644
--- a/src/components/views/elements/ReplyThread.tsx
+++ b/src/components/views/elements/ReplyThread.tsx
@@ -354,8 +354,14 @@ export default class ReplyThread extends React.Component<IProps, IState> {
</blockquote>;
} else if (this.props.forExport) {
const eventId = ReplyThread.getParentEventId(this.props.parentEv);
- header = <p style={{ marginTop: -5, marginBottom: 5 }}>
- In reply to <a className="mx_reply_anchor" href={`#${eventId}`} scroll-to={eventId}>this message</a>
+ header = <p className="mx_ReplyThread_Export">
+ { _t("In reply to <messageLink/>",
+ {},
+ { messageLink: () => (
+ <a className="mx_reply_anchor" href={`#${eventId}`} scroll-to={eventId}> { _t("this message") } </a>
+ ),
+ })
+ }
</p>;
} else if (this.state.loading) {
header = <Spinner w={16} h={16} />;
diff --git a/src/components/views/messages/RedactedBody.tsx b/src/components/views/messages/RedactedBody.tsx
index e326fa7b50..65933cb801 100644
--- a/src/components/views/messages/RedactedBody.tsx
+++ b/src/components/views/messages/RedactedBody.tsx
@@ -39,7 +39,7 @@ const RedactedBody = React.forwardRef<any, IBodyProps>(({ mxEvent, forExport },
return (
<span className="mx_RedactedBody" ref={ref} title={titleText}>
- { forExport ? <img alt="Redacted" className="mx_export_trash_icon" src="icons/trash.svg" /> : null }
+ { forExport ? <img alt={_t("Redacted")} className="mx_export_trash_icon" src="icons/trash.svg" /> : null }
{ text }
</span>
);
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index a55576921c..7197879983 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1951,6 +1951,7 @@
"<reactors/><reactedWith> reacted with %(content)s</reactedWith>": "<reactors/><reactedWith> reacted with %(content)s</reactedWith>",
"<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>": "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>",
"Message deleted on %(date)s": "Message deleted on %(date)s",
+ "Redacted": "Redacted",
"%(senderDisplayName)s changed the avatar for %(roomName)s": "%(senderDisplayName)s changed the avatar for %(roomName)s",
"%(senderDisplayName)s removed the room avatar.": "%(senderDisplayName)s removed the room avatar.",
"%(senderDisplayName)s changed the room avatar to <img/>": "%(senderDisplayName)s changed the room avatar to <img/>",
@@ -2098,6 +2099,8 @@
"QR Code": "QR Code",
"Unable to load event that was replied to, it either does not exist or you do not have permission to view it.": "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.",
"<a>In reply to</a> <pill>": "<a>In reply to</a> <pill>",
+ "In reply to <messageLink/>": "In reply to <messageLink/>",
+ "this message": "this message",
"Room address": "Room address",
"e.g. my-room": "e.g. my-room",
"Some characters not allowed": "Some characters not allowed",
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index c840731d47..8574a5ed67 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -1,7 +1,23 @@
+/*
+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.
+*/
+
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClientPeg } from "../../MatrixClientPeg";
-import { exportOptions, exportTypes } from "./exportUtils";
+import { IExportOptions, exportTypes } from "./exportUtils";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
@@ -23,7 +39,7 @@ export default abstract class Exporter {
protected constructor(
protected room: Room,
protected exportType: exportTypes,
- protected exportOptions: exportOptions,
+ protected exportOptions: IExportOptions,
protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
this.cancelled = false;
@@ -53,6 +69,8 @@ export default abstract class Exporter {
protected async downloadZIP(): Promise<any> {
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
+ console.log(this.files, this.files.length);
+
const zip = new JSZip();
// Create a writable stream to the directory
if (!this.cancelled) this.updateProgress("Generating a ZIP");
@@ -62,7 +80,7 @@ export default abstract class Exporter {
const content = await zip.generateAsync({ type: "blob" });
- await saveAs(content, filename);
+ saveAs(content, filename);
}
protected cleanUp(): string {
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 3f98b4c92a..ee5e395fe7 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -1,3 +1,19 @@
+/*
+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.
+*/
+
import React, { MutableRefObject } from "react";
import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media";
@@ -18,7 +34,7 @@ import exportCSS from "./exportCSS";
import exportJS from "./exportJS";
import exportIcons from "./exportIcons";
import { exportTypes } from "./exportUtils";
-import { exportOptions } from "./exportUtils";
+import { IExportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
export default class HTMLExporter extends Exporter {
@@ -30,7 +46,7 @@ export default class HTMLExporter extends Exporter {
constructor(
room: Room,
exportType: exportTypes,
- exportOptions: exportOptions,
+ exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
super(room, exportType, exportOptions, exportProgressRef);
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 417a7a40f4..5e07f4ae45 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -1,10 +1,26 @@
+/*
+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.
+*/
+
import Exporter from "./Exporter";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay, formatFullDateNoDayNoTime } from "../../DateUtils";
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils";
-import { exportOptions } from "./exportUtils";
+import { IExportOptions } from "./exportUtils";
import { EventType } from "matrix-js-sdk/src/@types/event";
import { MutableRefObject } from "react";
@@ -15,7 +31,7 @@ export default class JSONExporter extends Exporter {
constructor(
room: Room,
exportType: exportTypes,
- exportOptions: exportOptions,
+ exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
super(room, exportType, exportOptions, exportProgressRef);
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index feb4afe618..dc5df022a2 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -1,3 +1,19 @@
+/*
+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.
+*/
+
import Exporter from "./Exporter";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
@@ -5,7 +21,7 @@ import { formatFullDateNoDay } from "../../DateUtils";
import { _t } from "../../languageHandler";
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { exportTypes } from "./exportUtils";
-import { exportOptions } from "./exportUtils";
+import { IExportOptions } from "./exportUtils";
import { textForEvent } from "../../TextForEvent";
import { MutableRefObject } from "react";
@@ -16,7 +32,7 @@ export default class PlainTextExporter extends Exporter {
constructor(
room: Room,
exportType: exportTypes,
- exportOptions: exportOptions,
+ exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
super(room, exportType, exportOptions, exportProgressRef);
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 49f3bf3bb7..ff5c714079 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -1,3 +1,19 @@
+/*
+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.
+*/
+
/* eslint-disable max-len */
const lightCSS = `@charset "utf-8";
.hljs-addition {
@@ -25405,6 +25421,11 @@ a.mx_reply_anchor:hover{
}
}
+.mx_ReplyThread_Export {
+ margin-top: -5px;
+ margin-bottom: 5px;
+}
+
.mx_RedactedBody img.mx_export_trash_icon {
height: 14px;
width: 14px;
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 3e281269bf..e170bb2433 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,3 +1,19 @@
+/*
+Copyright 2018-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.
+*/
+
import { _t } from "../../languageHandler";
export enum exportFormats {
@@ -37,7 +53,7 @@ export const textForType = (type: string): string => {
}
};
-export interface exportOptions {
+export interface IExportOptions {
startDate?: number;
numberOfMessages?: number;
attachmentsIncluded: boolean;
From 9771f4d6c48230751ad8e914e97d7c38a6061c45 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 27 Jul 2021 00:00:52 +0530
Subject: [PATCH 141/313] PascalCasing for enums
---
src/components/views/dialogs/ExportDialog.tsx | 32 +++++++++----------
src/utils/exportUtils/Exporter.ts | 10 +++---
src/utils/exportUtils/HtmlExport.tsx | 4 +--
src/utils/exportUtils/JSONExport.ts | 4 +--
src/utils/exportUtils/PlainTextExport.ts | 4 +--
src/utils/exportUtils/exportUtils.ts | 18 +++++------
6 files changed, 36 insertions(+), 36 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 76f0074573..b98f375971 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -24,8 +24,8 @@ import Field from "../elements/Field";
import StyledRadioGroup from "../elements/StyledRadioGroup";
import StyledCheckbox from "../elements/StyledCheckbox";
import {
- exportFormats,
- exportTypes,
+ ExportFormats,
+ ExportTypes,
textForFormat,
textForType,
} from "../../../utils/exportUtils/exportUtils";
@@ -42,8 +42,8 @@ interface IProps extends IDialogProps {
}
const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
- const [exportFormat, setExportFormat] = useState(exportFormats.HTML);
- const [exportType, setExportType] = useState(exportTypes.TIMELINE);
+ const [exportFormat, setExportFormat] = useState(ExportFormats.HTML);
+ const [exportType, setExportType] = useState(ExportTypes.TIMELINE);
const [includeAttachments, setAttachments] = useState(false);
const [isExporting, setExporting] = useState(false);
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
@@ -70,31 +70,31 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
maxSize: sizeLimit * 1024 * 1024,
};
switch (exportFormat) {
- case exportFormats.HTML:
+ case ExportFormats.HTML:
setExporter(
new HTMLExporter(
room,
- exportTypes[exportType],
+ ExportTypes[exportType],
exportOptions,
exportProgressRef,
),
);
break;
- case exportFormats.JSON:
+ case ExportFormats.JSON:
setExporter(
new JSONExporter(
room,
- exportTypes[exportType],
+ ExportTypes[exportType],
exportOptions,
exportProgressRef,
),
);
break;
- case exportFormats.PLAIN_TEXT:
+ case ExportFormats.PLAIN_TEXT:
setExporter(
new PlainTextExporter(
room,
- exportTypes[exportType],
+ ExportTypes[exportType],
exportOptions,
exportProgressRef,
),
@@ -114,7 +114,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
sizeLimitRef.current.validate({ focused: true });
return;
}
- if (exportType === exportTypes.LAST_N_MESSAGES) {
+ if (exportType === ExportTypes.LAST_N_MESSAGES) {
const isValidNumberOfMessages =
await messageCountRef.current.validate({ focused: false });
if (!isValidNumberOfMessages) {
@@ -202,12 +202,12 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
});
};
- const exportFormatOptions = Object.keys(exportFormats).map((format) => ({
+ const exportFormatOptions = Object.keys(ExportFormats).map((format) => ({
value: format,
label: textForFormat(format),
}));
- const exportTypeOptions = Object.keys(exportTypes).map((type) => {
+ const exportTypeOptions = Object.keys(ExportTypes).map((type) => {
return (
<option key={type} value={type}>
{ textForType(type) }
@@ -216,7 +216,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
});
let messageCount = null;
- if (exportType === exportTypes.LAST_N_MESSAGES) {
+ if (exportType === ExportTypes.LAST_N_MESSAGES) {
messageCount = (
<Field
element="input"
@@ -322,7 +322,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
<StyledRadioGroup
name="exportFormat"
value={exportFormat}
- onChange={(key) => setExportFormat(exportFormats[key])}
+ onChange={(key) => setExportFormat(ExportFormats[key])}
definitions={exportFormatOptions}
/>
@@ -334,7 +334,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
element="select"
value={exportType}
onChange={(e) => {
- setExportType(exportTypes[e.target.value]);
+ setExportType(ExportTypes[e.target.value]);
}}
>
{ exportTypeOptions }
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 8574a5ed67..0786641f44 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -17,7 +17,7 @@ limitations under the License.
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClientPeg } from "../../MatrixClientPeg";
-import { IExportOptions, exportTypes } from "./exportUtils";
+import { IExportOptions, ExportTypes } from "./exportUtils";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
@@ -38,7 +38,7 @@ export default abstract class Exporter {
protected constructor(
protected room: Room,
- protected exportType: exportTypes,
+ protected exportType: ExportTypes,
protected exportOptions: IExportOptions,
protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
@@ -114,10 +114,10 @@ export default abstract class Exporter {
protected getLimit(): number {
let limit: number;
switch (this.exportType) {
- case exportTypes.LAST_N_MESSAGES:
+ case ExportTypes.LAST_N_MESSAGES:
limit = this.exportOptions.numberOfMessages;
break;
- case exportTypes.TIMELINE:
+ case ExportTypes.TIMELINE:
limit = 40;
break;
default:
@@ -162,7 +162,7 @@ export default abstract class Exporter {
events.push(mxEv);
}
this.updateProgress(
- ("Fetched " + events.length + " events ") + (this.exportType === exportTypes.LAST_N_MESSAGES
+ ("Fetched " + events.length + " events ") + (this.exportType === ExportTypes.LAST_N_MESSAGES
? `out of ${this.exportOptions.numberOfMessages}`
: "so far"),
);
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index ee5e395fe7..05ce8570da 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -33,7 +33,7 @@ import BaseAvatar from "../../components/views/avatars/BaseAvatar";
import exportCSS from "./exportCSS";
import exportJS from "./exportJS";
import exportIcons from "./exportIcons";
-import { exportTypes } from "./exportUtils";
+import { ExportTypes } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
@@ -45,7 +45,7 @@ export default class HTMLExporter extends Exporter {
constructor(
room: Room,
- exportType: exportTypes,
+ exportType: ExportTypes,
exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 5e07f4ae45..3a9b923b08 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -19,7 +19,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay, formatFullDateNoDayNoTime } from "../../DateUtils";
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
-import { exportTypes } from "./exportUtils";
+import { ExportTypes } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import { EventType } from "matrix-js-sdk/src/@types/event";
import { MutableRefObject } from "react";
@@ -30,7 +30,7 @@ export default class JSONExporter extends Exporter {
constructor(
room: Room,
- exportType: exportTypes,
+ exportType: ExportTypes,
exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index dc5df022a2..4f00a3aa06 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -20,7 +20,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay } from "../../DateUtils";
import { _t } from "../../languageHandler";
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
-import { exportTypes } from "./exportUtils";
+import { ExportTypes } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import { textForEvent } from "../../TextForEvent";
import { MutableRefObject } from "react";
@@ -31,7 +31,7 @@ export default class PlainTextExporter extends Exporter {
constructor(
room: Room,
- exportType: exportTypes,
+ exportType: ExportTypes,
exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index e170bb2433..6b356c3ed2 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -16,37 +16,37 @@ limitations under the License.
import { _t } from "../../languageHandler";
-export enum exportFormats {
+export enum ExportFormats {
HTML = "HTML",
PLAIN_TEXT = "PLAIN_TEXT",
JSON = "JSON",
}
-export enum exportTypes {
+export enum ExportTypes {
TIMELINE = "TIMELINE",
BEGINNING = "BEGINNING",
- // START_DATE = "START_DATE",
LAST_N_MESSAGES = "LAST_N_MESSAGES",
+ // START_DATE = "START_DATE",
}
export const textForFormat = (format: string): string => {
switch (format) {
- case exportFormats.HTML:
+ case ExportFormats.HTML:
return _t("HTML");
- case exportFormats.JSON:
+ case ExportFormats.JSON:
return _t("JSON");
- case exportFormats.PLAIN_TEXT:
+ case ExportFormats.PLAIN_TEXT:
return _t("Plain Text");
}
};
export const textForType = (type: string): string => {
switch (type) {
- case exportTypes.BEGINNING:
+ case ExportTypes.BEGINNING:
return _t("From the beginning");
- case exportTypes.LAST_N_MESSAGES:
+ case ExportTypes.LAST_N_MESSAGES:
return _t("Specify a number of messages");
- case exportTypes.TIMELINE:
+ case ExportTypes.TIMELINE:
return _t("Current Timeline");
// case exportTypes.START_DATE:
// return _t("From a specific date");
From 57590b9a8aa0d52200a8ee5013b7b58ed61a9ef2 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 27 Jul 2021 11:37:47 +0530
Subject: [PATCH 142/313] Use raw-loaders to import svgs and exportJS
---
package.json | 1 +
src/@types/raw-loader.d.ts | 20 +++++++++++++
src/utils/exportUtils/HtmlExport.tsx | 2 +-
src/utils/exportUtils/exportIcons.ts | 18 ++++-------
src/utils/exportUtils/exportJS.js | 25 ++++++++++++++++
src/utils/exportUtils/exportJS.ts | 27 -----------------
yarn.lock | 45 ++++++++++++++++++++++++++--
7 files changed, 95 insertions(+), 43 deletions(-)
create mode 100644 src/@types/raw-loader.d.ts
create mode 100644 src/utils/exportUtils/exportJS.js
delete mode 100644 src/utils/exportUtils/exportJS.ts
diff --git a/package.json b/package.json
index 30254ed78d..086a1006cf 100644
--- a/package.json
+++ b/package.json
@@ -167,6 +167,7 @@
"matrix-mock-request": "^1.2.3",
"matrix-react-test-utils": "^0.2.3",
"matrix-web-i18n": "github:matrix-org/matrix-web-i18n",
+ "raw-loader": "^4.0.2",
"react-test-renderer": "^17.0.2",
"rimraf": "^3.0.2",
"stylelint": "^13.9.0",
diff --git a/src/@types/raw-loader.d.ts b/src/@types/raw-loader.d.ts
new file mode 100644
index 0000000000..ee9277c662
--- /dev/null
+++ b/src/@types/raw-loader.d.ts
@@ -0,0 +1,20 @@
+/*
+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.
+*/
+
+declare module '!!raw-loader!*' {
+ const contents: string;
+ export = contents;
+}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 05ce8570da..c27f5b7d12 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -31,7 +31,7 @@ import EventTile, { haveTileForEvent } from "../../components/views/rooms/EventT
import DateSeparator from "../../components/views/messages/DateSeparator";
import BaseAvatar from "../../components/views/avatars/BaseAvatar";
import exportCSS from "./exportCSS";
-import exportJS from "./exportJS";
+import exportJS from "!!raw-loader!./exportJS";
import exportIcons from "./exportIcons";
import { ExportTypes } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
diff --git a/src/utils/exportUtils/exportIcons.ts b/src/utils/exportUtils/exportIcons.ts
index 2a19e9c4d1..865fb08a06 100644
--- a/src/utils/exportUtils/exportIcons.ts
+++ b/src/utils/exportUtils/exportIcons.ts
@@ -1,15 +1,7 @@
-/* eslint-disable max-len */
+import Trash from "!!raw-loader!../../../res/img/element-icons/trashcan.svg";
+import Attach from "!!raw-loader!../../../res/img/element-icons/room/composer/attach.svg";
+
export default {
- "trash.svg": `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M2.25 5.5H5.16667H21.75" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M16.5 5.5L15 1H9L7.5 5.5" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M5.25 9.25V20.75C5.25 21.8546 6.14543 22.75 7.25 22.75H16.75C17.8546 22.75 18.75 21.8546 18.75 20.75V9.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M9.75 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M14.25 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
- </svg>
- `,
- "attach.svg": `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M15.8155 13.0336L11.2282 17.4193C9.08205 19.45 5.53015 19.6024 3.45617 17.4193C1.4888 15.3484 1.48412 12.0136 3.63032 9.98294L11.8691 2.10597C13.2999 0.752226 15.5435 0.535035 16.984 2.05147C18.5968 3.7491 18.1298 5.99061 16.699 7.34435L8.6284 14.9682C7.913 15.645 6.7551 15.7233 6.03771 14.9682C5.34842 14.2426 5.45967 13.0625 6.17507 12.3856L10.9045 7.86398" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
- </svg>
- `,
+ "trash.svg": Trash,
+ "attach.svg": Attach,
};
diff --git a/src/utils/exportUtils/exportJS.js b/src/utils/exportUtils/exportJS.js
new file mode 100644
index 0000000000..9e58c8b99c
--- /dev/null
+++ b/src/utils/exportUtils/exportJS.js
@@ -0,0 +1,25 @@
+function showToastIfNeeded(replyId) {
+ const el = document.getElementById(replyId);
+ if (!el) {
+ showToast("The message you're looking for wasn't exported");
+ return;
+ }
+}
+
+function showToast(text) {
+ const el = document.getElementById("snackbar");
+ el.innerHTML = text;
+ el.className = "mx_show";
+ setTimeout(() => {
+ el.className = el.className.replace("mx_show", "");
+ }, 2000);
+}
+
+window.onload = () => {
+ document.querySelectorAll('.mx_reply_anchor').forEach(element => {
+ element.addEventListener('click', event => {
+ showToastIfNeeded(event.target.getAttribute("scroll-to"));
+ });
+ });
+};
+
diff --git a/src/utils/exportUtils/exportJS.ts b/src/utils/exportUtils/exportJS.ts
deleted file mode 100644
index 21b10b50d5..0000000000
--- a/src/utils/exportUtils/exportJS.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export default `
-function showToastIfNeeded(replyId){
- let el = document.getElementById(replyId);
- if(!el) {
- showToast("The message you're looking for wasn't exported");
- return;
- };
-}
-
-function showToast(text) {
- let el = document.getElementById("snackbar");
- el.innerHTML = text;
- el.className = "mx_show";
- setTimeout(() => {
- el.className = el.className.replace("mx_show", "");
- }, 2000);
-}
-
-window.onload = () => {
-document.querySelectorAll('.mx_reply_anchor').forEach(element => {
- element.addEventListener('click', event => {
- showToastIfNeeded(event.target.getAttribute("scroll-to"));
- })
-})
-}
-
-`;
diff --git a/yarn.lock b/yarn.lock
index dc3bc2ca7b..ea64ed5180 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1531,7 +1531,7 @@
jest-diff "^26.0.0"
pretty-format "^26.0.0"
-"@types/json-schema@^7.0.7":
+"@types/json-schema@^7.0.7", "@types/json-schema@^7.0.8":
version "7.0.8"
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.8.tgz#edf1bf1dbf4e04413ca8e5b17b3b7d7d54b59818"
integrity sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==
@@ -1840,7 +1840,12 @@ agent-base@6:
dependencies:
debug "4"
-ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4:
+ajv-keywords@^3.5.2:
+ version "3.5.2"
+ resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+ integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
version "6.12.6"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -2216,6 +2221,11 @@ bcrypt-pbkdf@^1.0.0:
dependencies:
tweetnacl "^0.14.3"
+big.js@^5.2.2:
+ version "5.2.2"
+ resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+ integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
binary-extensions@^1.0.0:
version "1.13.1"
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
@@ -3072,6 +3082,11 @@ emojibase-regex@^5.1.3:
resolved "https://registry.yarnpkg.com/emojibase-regex/-/emojibase-regex-5.1.3.tgz#f0ef621ed6ec624becd2326f999fd4ea01b94554"
integrity sha512-gT8T9LxLA8VJdI+8KQtyykB9qKzd7WuUL3M2yw6y9tplFeufOUANg3UKVaKUvkMcRNvZsSElWhxcJrx8WPE12g==
+emojis-list@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+ integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
encoding@^0.1.11:
version "0.1.13"
resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
@@ -5339,6 +5354,15 @@ linkifyjs@^2.1.9:
resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-2.1.9.tgz#af06e45a2866ff06c4766582590d098a4d584702"
integrity sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug==
+loader-utils@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
+ integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
+ dependencies:
+ big.js "^5.2.2"
+ emojis-list "^3.0.0"
+ json5 "^2.1.2"
+
locate-path@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -6445,6 +6469,14 @@ randexp@0.4.6:
discontinuous-range "1.0.0"
ret "~0.1.10"
+raw-loader@^4.0.2:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
+ integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
+ dependencies:
+ loader-utils "^2.0.0"
+ schema-utils "^3.0.0"
+
re-resizable@^6.9.0:
version "6.9.0"
resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.0.tgz#9c3059b389ced6ade602234cc5bb1e12d231cd47"
@@ -6958,6 +6990,15 @@ scheduler@^0.20.2:
loose-envify "^1.1.0"
object-assign "^4.1.1"
+schema-utils@^3.0.0:
+ version "3.1.1"
+ resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
+ integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==
+ dependencies:
+ "@types/json-schema" "^7.0.8"
+ ajv "^6.12.5"
+ ajv-keywords "^3.5.2"
+
"semver@2 || 3 || 4 || 5", semver@^5.5.0, semver@^5.6.0:
version "5.7.1"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
From 6f922769a34d7db2b2c85c6efa82eb31a52d84d4 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 27 Jul 2021 11:45:10 +0530
Subject: [PATCH 143/313] Reduce max size to 2000 MB
---
src/components/views/dialogs/ExportDialog.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index b98f375971..5ebe6ed7c5 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -131,7 +131,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
}: Pick<IFieldState, "value">): Promise<IValidationResult> => {
const parsedSize = parseFloat(value);
const min = 1;
- const max = 4000;
+ const max = 2000;
if (isNaN(parsedSize)) {
return { valid: false, feedback: _t("Size must be a number") };
From 371d1026fad0900f5017f958e146bf3679594b8b Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 27 Jul 2021 12:11:08 +0530
Subject: [PATCH 144/313] Add jest-raw-loader
---
package.json | 4 +++-
src/@types/raw-loader.d.ts | 2 +-
src/utils/exportUtils/Exporter.ts | 2 --
yarn.lock | 5 +++++
4 files changed, 9 insertions(+), 4 deletions(-)
diff --git a/package.json b/package.json
index 086a1006cf..775c297c21 100644
--- a/package.json
+++ b/package.json
@@ -164,6 +164,7 @@
"jest-canvas-mock": "^2.3.0",
"jest-environment-jsdom-sixteen": "^1.0.3",
"jest-fetch-mock": "^3.0.3",
+ "jest-raw-loader": "^1.0.1",
"matrix-mock-request": "^1.2.3",
"matrix-react-test-utils": "^0.2.3",
"matrix-web-i18n": "github:matrix-org/matrix-web-i18n",
@@ -193,7 +194,8 @@
"decoderWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
"decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
"waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
- "workers/(.+)\\.worker\\.ts": "<rootDir>/__mocks__/workerMock.js"
+ "workers/(.+)\\.worker\\.ts": "<rootDir>/__mocks__/workerMock.js",
+ "^!!raw-loader!.*": "jest-raw-loader"
},
"transformIgnorePatterns": [
"/node_modules/(?!matrix-js-sdk).+$"
diff --git a/src/@types/raw-loader.d.ts b/src/@types/raw-loader.d.ts
index ee9277c662..efd825204e 100644
--- a/src/@types/raw-loader.d.ts
+++ b/src/@types/raw-loader.d.ts
@@ -16,5 +16,5 @@ limitations under the License.
declare module '!!raw-loader!*' {
const contents: string;
- export = contents;
+ export default contents;
}
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 0786641f44..fd0f603cb5 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -69,8 +69,6 @@ export default abstract class Exporter {
protected async downloadZIP(): Promise<any> {
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
- console.log(this.files, this.files.length);
-
const zip = new JSZip();
// Create a writable stream to the directory
if (!this.cancelled) this.updateProgress("Generating a ZIP");
diff --git a/yarn.lock b/yarn.lock
index ea64ed5180..e0e3e830c8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4956,6 +4956,11 @@ jest-pnp-resolver@^1.2.2:
resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
+jest-raw-loader@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/jest-raw-loader/-/jest-raw-loader-1.0.1.tgz#ce9f56d54650f157c4a7d16d224ba5d613bcd626"
+ integrity sha1-zp9W1UZQ8VfEp9FtIkul1hO81iY=
+
jest-regex-util@^26.0.0:
version "26.0.0"
resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-26.0.0.tgz#d25e7184b36e39fd466c3bc41be0971e821fee28"
From 6f8f0e831408b1896755666e169edb2e7d3655b9 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 27 Jul 2021 19:29:22 +0530
Subject: [PATCH 145/313] Change copyright year
---
src/utils/exportUtils/exportCSS.ts | 4 ++--
src/utils/exportUtils/exportIcons.ts | 8 ++++----
src/utils/exportUtils/exportUtils.ts | 2 +-
3 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index ff5c714079..36dcea76bb 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -5,7 +5,7 @@ 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
+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,
@@ -13,8 +13,8 @@ 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.
*/
-
/* eslint-disable max-len */
+
const lightCSS = `@charset "utf-8";
.hljs-addition {
background: #dfd;
diff --git a/src/utils/exportUtils/exportIcons.ts b/src/utils/exportUtils/exportIcons.ts
index 865fb08a06..181a62848e 100644
--- a/src/utils/exportUtils/exportIcons.ts
+++ b/src/utils/exportUtils/exportIcons.ts
@@ -1,7 +1,7 @@
-import Trash from "!!raw-loader!../../../res/img/element-icons/trashcan.svg";
-import Attach from "!!raw-loader!../../../res/img/element-icons/room/composer/attach.svg";
+import trashSVG from "!!raw-loader!../../../res/img/element-icons/trashcan.svg";
+import attachSVG from "!!raw-loader!../../../res/img/element-icons/room/composer/attach.svg";
export default {
- "trash.svg": Trash,
- "attach.svg": Attach,
+ "trash.svg": trashSVG,
+ "attach.svg": attachSVG,
};
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 6b356c3ed2..9b360fb3f1 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -1,5 +1,5 @@
/*
-Copyright 2018-2021 The Matrix.org Foundation C.I.C.
+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.
From 04edf4103f1f78463b96551f01f1e191339d98da Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 30 Jul 2021 11:46:55 +0530
Subject: [PATCH 146/313] Remove unnecessary awaits
---
src/utils/exportUtils/Exporter.ts | 4 ++--
src/utils/exportUtils/JSONExport.ts | 2 +-
src/utils/exportUtils/PlainTextExport.ts | 2 +-
test/utils/export-test.ts | 15 +++++++++++++++
4 files changed, 19 insertions(+), 4 deletions(-)
create mode 100644 test/utils/export-test.ts
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index fd0f603cb5..b521b77aaa 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -92,8 +92,8 @@ export default abstract class Exporter {
this.cancelled = true;
}
- protected async downloadPlainText(fileName: string, text: string): Promise<any> {
- await saveAs(new Blob[text], fileName);
+ protected downloadPlainText(fileName: string, text: string) {
+ saveAs(new Blob[text], fileName);
}
protected setEventMetadata(event: MatrixEvent): MatrixEvent {
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 3a9b923b08..356f4282db 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -107,7 +107,7 @@ export default class JSONExporter extends Exporter {
await this.downloadZIP();
} else {
const fileName = `matrix-export-${formatFullDateNoDay(new Date())}.json`;
- await this.downloadPlainText(fileName, text);
+ this.downloadPlainText(fileName, text);
}
const exportEnd = performance.now();
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 4f00a3aa06..1c946bb048 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -134,7 +134,7 @@ export default class PlainTextExporter extends Exporter {
await this.downloadZIP();
} else {
const fileName = `matrix-export-${formatFullDateNoDay(new Date())}.txt`;
- await this.downloadPlainText(fileName, text);
+ this.downloadPlainText(fileName, text);
}
const exportEnd = performance.now();
diff --git a/test/utils/export-test.ts b/test/utils/export-test.ts
new file mode 100644
index 0000000000..42c4e33b5b
--- /dev/null
+++ b/test/utils/export-test.ts
@@ -0,0 +1,15 @@
+/*
+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.
+*/
From 4824c937070b853ac58082634c3eaa660aea4cc2 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 3 Aug 2021 14:36:21 +0530
Subject: [PATCH 147/313] Add a test file
---
src/utils/exportUtils/Exporter.ts | 19 +++---
src/utils/exportUtils/exportUtils.ts | 6 +-
test/test-utils.js | 3 +-
test/utils/export-test.ts | 15 -----
test/utils/export-test.tsx | 94 ++++++++++++++++++++++++++++
5 files changed, 112 insertions(+), 25 deletions(-)
delete mode 100644 test/utils/export-test.ts
create mode 100644 test/utils/export-test.tsx
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index b521b77aaa..47db141830 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -42,6 +42,9 @@ export default abstract class Exporter {
protected exportOptions: IExportOptions,
protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
+ if (exportOptions.maxSize < 1 || exportOptions.maxSize > 2000 || exportOptions.numberOfMessages > 10**8) {
+ throw new Error("Invalid export options");
+ }
this.cancelled = false;
this.files = [];
this.client = MatrixClientPeg.get();
@@ -109,7 +112,7 @@ export default abstract class Exporter {
return event;
}
- protected getLimit(): number {
+ public getLimit(): number {
let limit: number;
switch (this.exportType) {
case ExportTypes.LAST_N_MESSAGES:
@@ -152,11 +155,11 @@ export default abstract class Exporter {
const matrixEvents: MatrixEvent[] = res.chunk.map(eventMapper);
for (const mxEv of matrixEvents) {
- if (this.exportOptions.startDate && mxEv.getTs() < this.exportOptions.startDate) {
- // Once the last message received is older than the start date, we break out of both the loops
- limit = 0;
- break;
- }
+ // if (this.exportOptions.startDate && mxEv.getTs() < this.exportOptions.startDate) {
+ // // Once the last message received is older than the start date, we break out of both the loops
+ // limit = 0;
+ // break;
+ // }
events.push(mxEv);
}
this.updateProgress(
@@ -208,7 +211,7 @@ export default abstract class Exporter {
return blob;
}
- protected splitFileName(file: string): string[] {
+ public splitFileName(file: string): string[] {
const lastDot = file.lastIndexOf('.');
if (lastDot === -1) return [file, ""];
const fileName = file.slice(0, lastDot);
@@ -216,7 +219,7 @@ export default abstract class Exporter {
return [fileName, '.' + ext];
}
- protected getFilePath(event: MatrixEvent): string {
+ public getFilePath(event: MatrixEvent): string {
const mediaType = event.getContent().msgtype;
let fileDirectory: string;
switch (mediaType) {
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 9b360fb3f1..8410b747ea 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -37,6 +37,8 @@ export const textForFormat = (format: string): string => {
return _t("JSON");
case ExportFormats.PLAIN_TEXT:
return _t("Plain Text");
+ default:
+ throw new Error("Unknown format");
}
};
@@ -48,13 +50,15 @@ export const textForType = (type: string): string => {
return _t("Specify a number of messages");
case ExportTypes.TIMELINE:
return _t("Current Timeline");
+ default:
+ throw new Error("Unknown type: " + type);
// case exportTypes.START_DATE:
// return _t("From a specific date");
}
};
export interface IExportOptions {
- startDate?: number;
+ // startDate?: number;
numberOfMessages?: number;
attachmentsIncluded: boolean;
maxSize: number;
diff --git a/test/test-utils.js b/test/test-utils.js
index 5e29fd242e..4ce0c7f3ce 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -202,8 +202,9 @@ export function mkMembership(opts) {
* @param {Object} opts Values for the message
* @param {string} opts.room The room ID for the event.
* @param {string} opts.user The user ID for the event.
- * @param {string} opts.msg Optional. The content.body for the event.
+ * @param {number} opts.ts The timestamp for the event.
* @param {boolean} opts.event True to make a MatrixEvent.
+ * @param {string=} opts.msg Optional. The content.body for the event.
* @return {Object|MatrixEvent} The event
*/
export function mkMessage(opts) {
diff --git a/test/utils/export-test.ts b/test/utils/export-test.ts
deleted file mode 100644
index 42c4e33b5b..0000000000
--- a/test/utils/export-test.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
-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.
-*/
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
new file mode 100644
index 0000000000..3bcbadecd8
--- /dev/null
+++ b/test/utils/export-test.tsx
@@ -0,0 +1,94 @@
+/*
+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.
+*/
+
+import { MatrixClient, Room } from "matrix-js-sdk";
+import { MatrixClientPeg } from "../../src/MatrixClientPeg";
+import { textForFormat } from "../../src/utils/exportUtils/exportUtils";
+// import HTMLExporter from "../../src/utils/exportUtils/HtmlExport";
+// import PlainTextExporter from "../../src/utils/exportUtils/PlainTextExport";
+import * as TestUtilsMatrix from '../test-utils';
+import { stubClient } from '../test-utils';
+
+let client: MatrixClient;
+
+const MY_USER_ID = "@me:here";
+
+function generateRoomId() {
+ return '!' + Math.random().toString().slice(2, 10) + ':domain';
+}
+
+describe('export', function() {
+ stubClient();
+ client = MatrixClientPeg.get();
+ client.getUserId = () => {
+ return MY_USER_ID;
+ };
+
+ // const invalidExportOptions: IExportOptions[] = [
+ // {
+ // numberOfMessages: 10**9,
+ // maxSize: 1024,
+ // attachmentsIncluded: false,
+ // },
+ // {
+ // numberOfMessages: -1,
+ // maxSize: 4096,
+ // attachmentsIncluded: false,
+ // },
+ // {
+ // numberOfMessages: 0,
+ // maxSize: 1024,
+ // attachmentsIncluded: false,
+ // },
+ // ];
+
+ const events = mkEvents();
+ const room = createRoom();
+ console.log(events, room);
+ function createRoom() {
+ const room = new Room(generateRoomId(), null, client.getUserId());
+ return room;
+ }
+
+ function mkEvents() {
+ const events = [];
+ const ts0 = Date.now();
+ for (let i = 0; i < 10; i++) {
+ events.push(TestUtilsMatrix.mkMessage({
+ event: true, room: "!room:id", user: "@user:id",
+ ts: ts0 + i * 1000,
+ }));
+ }
+ return events;
+ }
+
+ it('checks if the export format is valid', function() {
+ expect(textForFormat('HTML')).toBeTruthy();
+ expect(textForFormat('JSON')).toBeTruthy();
+ expect(textForFormat('PLAIN_TEXT')).toBeTruthy();
+ try {
+ textForFormat('PDF');
+ throw new Error("Expected to throw an error");
+ } catch (e) {
+ expect(e.message).toBe("Unknown format");
+ }
+ });
+
+ it('checks if the export options are valid', function() {
+ // const html = new PlainTextExporter(room, ExportTypes.BEGINNING, invalidExportOptions[0], null);
+ });
+});
+
From b333612deab879160da92f8b4409d88ae6d4b398 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 3 Aug 2021 14:53:23 +0530
Subject: [PATCH 148/313] Fix comparing MB -> bytes
---
src/utils/exportUtils/Exporter.ts | 4 ++-
test/utils/export-test.tsx | 49 ++++++++++++++++++-------------
2 files changed, 31 insertions(+), 22 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 47db141830..f975e76ddd 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -42,7 +42,9 @@ export default abstract class Exporter {
protected exportOptions: IExportOptions,
protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
- if (exportOptions.maxSize < 1 || exportOptions.maxSize > 2000 || exportOptions.numberOfMessages > 10**8) {
+ if (exportOptions.maxSize < 1 * 1024 * 1024||
+ exportOptions.maxSize > 2000 * 1024 * 1024||
+ exportOptions.numberOfMessages > 10**8) {
throw new Error("Invalid export options");
}
this.cancelled = false;
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index 3bcbadecd8..279ebcff59 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -16,9 +16,9 @@ limitations under the License.
import { MatrixClient, Room } from "matrix-js-sdk";
import { MatrixClientPeg } from "../../src/MatrixClientPeg";
-import { textForFormat } from "../../src/utils/exportUtils/exportUtils";
-// import HTMLExporter from "../../src/utils/exportUtils/HtmlExport";
-// import PlainTextExporter from "../../src/utils/exportUtils/PlainTextExport";
+import { textForFormat, IExportOptions, ExportTypes } from "../../src/utils/exportUtils/exportUtils";
+import '../skinned-sdk';
+import PlainTextExporter from "../../src/utils/exportUtils/PlainTextExport";
import * as TestUtilsMatrix from '../test-utils';
import { stubClient } from '../test-utils';
@@ -37,23 +37,23 @@ describe('export', function() {
return MY_USER_ID;
};
- // const invalidExportOptions: IExportOptions[] = [
- // {
- // numberOfMessages: 10**9,
- // maxSize: 1024,
- // attachmentsIncluded: false,
- // },
- // {
- // numberOfMessages: -1,
- // maxSize: 4096,
- // attachmentsIncluded: false,
- // },
- // {
- // numberOfMessages: 0,
- // maxSize: 1024,
- // attachmentsIncluded: false,
- // },
- // ];
+ const invalidExportOptions: IExportOptions[] = [
+ {
+ numberOfMessages: 10**9,
+ maxSize: 1024 * 1024 * 1024,
+ attachmentsIncluded: false,
+ },
+ {
+ numberOfMessages: -1,
+ maxSize: 4096 * 1024 * 1024,
+ attachmentsIncluded: false,
+ },
+ {
+ numberOfMessages: 0,
+ maxSize: 0,
+ attachmentsIncluded: false,
+ },
+ ];
const events = mkEvents();
const room = createRoom();
@@ -88,7 +88,14 @@ describe('export', function() {
});
it('checks if the export options are valid', function() {
- // const html = new PlainTextExporter(room, ExportTypes.BEGINNING, invalidExportOptions[0], null);
+ for (const exportOption of invalidExportOptions) {
+ try {
+ new PlainTextExporter(room, ExportTypes.BEGINNING, exportOption, null);
+ throw new Error("Expected to throw an error");
+ } catch (e) {
+ expect(e.message).toBe("Invalid export options");
+ }
+ }
});
});
From e29d9db2e753dadd2729d9227d764416d5dc15fc Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 4 Aug 2021 12:37:13 +0530
Subject: [PATCH 149/313] Fetch exportCSS during export
---
src/utils/exportUtils/HtmlExport.tsx | 76 +-
src/utils/exportUtils/PlainTextExport.ts | 2 +-
src/utils/exportUtils/exportCSS.ts | 25530 +--------------------
3 files changed, 160 insertions(+), 25448 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index c27f5b7d12..54e21fdf14 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -30,12 +30,12 @@ import * as Avatar from "../../Avatar";
import EventTile, { haveTileForEvent } from "../../components/views/rooms/EventTile";
import DateSeparator from "../../components/views/messages/DateSeparator";
import BaseAvatar from "../../components/views/avatars/BaseAvatar";
-import exportCSS from "./exportCSS";
import exportJS from "!!raw-loader!./exportJS";
import exportIcons from "./exportIcons";
import { ExportTypes } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
+import getExportCSS from "./exportCSS";
export default class HTMLExporter extends Exporter {
protected avatars: Map<string, boolean>;
@@ -253,38 +253,40 @@ export default class HTMLExporter extends Exporter {
return wantsDateSeparator(prevEvent.getDate(), event.getDate());
}
- protected async getEventTile(mxEv: MatrixEvent, continuation: boolean, filePath?: string) {
+ public getEventTile(mxEv: MatrixEvent, continuation: boolean) {
+ return <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
+ <MatrixClientContext.Provider value={this.client}>
+ <EventTile
+ mxEvent={mxEv}
+ continuation={continuation}
+ isRedacted={mxEv.isRedacted()}
+ replacingEventId={mxEv.replacingEventId()}
+ forExport={true}
+ readReceipts={null}
+ readReceiptMap={null}
+ showUrlPreview={false}
+ checkUnmounting={() => false}
+ isTwelveHour={false}
+ last={false}
+ lastInSection={false}
+ permalinkCreator={this.permalinkCreator}
+ lastSuccessful={false}
+ isSelectedEvent={false}
+ getRelationsForEvent={null}
+ showReactions={false}
+ layout={Layout.Group}
+ enableFlair={false}
+ showReadReceipts={false}
+ />
+ </MatrixClientContext.Provider>
+ </div>;
+ }
+
+ protected async getEventTileMarkup(mxEv: MatrixEvent, continuation: boolean, filePath?: string) {
const hasAvatar = !!this.getAvatarURL(mxEv);
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
- const eventTile = (
- <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
- <MatrixClientContext.Provider value={this.client}>
- <EventTile
- mxEvent={mxEv}
- continuation={continuation}
- isRedacted={mxEv.isRedacted()}
- replacingEventId={mxEv.replacingEventId()}
- forExport={true}
- readReceipts={null}
- readReceiptMap={null}
- showUrlPreview={false}
- checkUnmounting={() => false}
- isTwelveHour={false}
- last={false}
- lastInSection={false}
- permalinkCreator={this.permalinkCreator}
- lastSuccessful={false}
- isSelectedEvent={false}
- getRelationsForEvent={null}
- showReactions={false}
- layout={Layout.Group}
- enableFlair={false}
- showReadReceipts={false}
- />
- </MatrixClientContext.Provider>
- </div>
- );
+ const eventTile = this.getEventTile(mxEv, continuation);
let eventTileMarkup = renderToStaticMarkup(eventTile);
if (filePath) {
@@ -323,14 +325,14 @@ export default class HTMLExporter extends Exporter {
try {
const blob = await this.getMediaBlob(mxEv);
if (this.totalSize + blob.size > this.exportOptions.maxSize) {
- eventTile = await this.getEventTile(
+ eventTile = await this.getEventTileMarkup(
this.createModifiedEvent(this.mediaOmitText, mxEv),
joined,
);
} else {
this.totalSize += blob.size;
const filePath = this.getFilePath(mxEv);
- eventTile = await this.getEventTile(mxEv, joined, filePath);
+ eventTile = await this.getEventTileMarkup(mxEv, joined, filePath);
if (this.totalSize == this.exportOptions.maxSize) {
this.exportOptions.attachmentsIncluded = false;
}
@@ -338,19 +340,19 @@ export default class HTMLExporter extends Exporter {
}
} catch (e) {
console.log("Error while fetching file" + e);
- eventTile = await this.getEventTile(
+ eventTile = await this.getEventTileMarkup(
this.createModifiedEvent(_t("Error fetching file"), mxEv),
joined,
);
}
} else {
- eventTile = await this.getEventTile(this.createModifiedEvent(this.mediaOmitText, mxEv), joined);
+ eventTile = await this.getEventTileMarkup(this.createModifiedEvent(this.mediaOmitText, mxEv), joined);
}
- } else eventTile = await this.getEventTile(mxEv, joined);
+ } else eventTile = await this.getEventTileMarkup(mxEv, joined);
} catch (e) {
// TODO: Handle callEvent errors
console.error(e);
- eventTile = await this.getEventTile(this.createModifiedEvent("Error parsing HTML", mxEv), joined);
+ eventTile = await this.getEventTileMarkup(this.createModifiedEvent("Error parsing HTML", mxEv), joined);
}
return eventTile;
@@ -388,7 +390,7 @@ export default class HTMLExporter extends Exporter {
this.updateProgress("Creating HTML...");
const html = await this.createHTML(res);
-
+ const exportCSS = await getExportCSS();
this.addFile("index.html", new Blob([html]));
this.addFile("css/style.css", new Blob([exportCSS]));
this.addFile("js/script.js", new Blob([exportJS]));
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 1c946bb048..7ab4748848 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -42,7 +42,7 @@ export default class PlainTextExporter extends Exporter {
: _t("Media omitted - file size limit exceeded");
}
- protected textForReplyEvent = (ev: MatrixEvent) => {
+ public textForReplyEvent = (ev: MatrixEvent) => {
const REPLY_REGEX = /> <(.*?)>(.*?)\n\n(.*)/;
const REPLY_SOURCE_MAX_LENGTH = 32;
const content = ev.getContent();
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 36dcea76bb..7079967d93 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -13,25435 +13,145 @@ 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.
*/
-/* eslint-disable max-len */
-const lightCSS = `@charset "utf-8";
-.hljs-addition {
- background: #dfd;
-}
-
-.hljs-deletion {
- background: #fdd;
-}
-
-@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
- .mx_LeftPanel {
- background-image: unset;
- background-image: var(--avatar-url, unset);
- background-repeat: no-repeat;
- background-size: cover;
- background-position: 0 0;
- }
- .mx_GroupFilterPanel,
- .mx_SpacePanel {
- -webkit-backdrop-filter: blur(20px);
- backdrop-filter: blur(20px);
- }
- .mx_LeftPanel .mx_LeftPanel_roomListContainer {
- -webkit-backdrop-filter: blur(40px);
- backdrop-filter: blur(40px);
- }
-}
-
-.mx_RoomSublist_showNButton {
- background-color: transparent !important;
-}
-
-a:hover,
-a:link,
-a:visited {
- text-decoration: none;
-}
-
-:root {
- font-size: 10px;
- --transition-short: 0.1s;
- --transition-standard: 0.3s;
-}
-
-@media (prefers-reduced-motion) {
- :root {
- --transition-short: 0;
- --transition-standard: 0;
- }
-}
-
-html {
- height: 100%;
- overflow: hidden;
- -ms-scroll-chaining: none;
- overscroll-behavior: none;
-}
-
-body {
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.5rem;
- background-color: #fff;
- color: #2e2f32;
- border: 0;
- margin: 0;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code,
-pre {
- font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
- monospace;
- font-size: 100% !important;
-}
-
-.error,
-.text-error,
-.text-warning,
-.warning {
- color: #ff4b55;
-}
-
-.text-success {
- color: #0dbd8b;
-}
-
-.text-muted {
- color: #61708b;
-}
-
-b {
- font-weight: 700;
-}
-
-h2 {
- color: #2e2f32;
- font-weight: 400;
- font-size: 1.8rem;
- margin-top: 16px;
- margin-bottom: 16px;
-}
-
-a:hover,
-a:link,
-a:visited {
- color: #238cf5;
-}
-
-input[type="password"],
-input[type="search"],
-input[type="text"] {
- padding: 9px;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- font-weight: 600;
- min-width: 0;
-}
-
-input[type="search"].mx_textinput_icon,
-input[type="text"].mx_textinput_icon {
- padding-left: 36px;
- background-repeat: no-repeat;
- background-position: 10px;
-}
-
-input[type="search"].mx_textinput_icon.mx_textinput_search,
-input[type="text"].mx_textinput_icon.mx_textinput_search {
- background-image: url(../../img/feather-customised/search-input.044bfa7.svg);
-}
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
- display: none;
-}
-
-input::-webkit-input-placeholder,
-textarea::-webkit-input-placeholder {
- opacity: 1;
-}
-
-input::-moz-placeholder,
-textarea::-moz-placeholder {
- opacity: 1;
-}
-
-input:-ms-input-placeholder,
-textarea:-ms-input-placeholder {
- opacity: 1;
-}
-
-input::-ms-input-placeholder,
-textarea::-ms-input-placeholder {
- opacity: 1;
-}
-
-input::placeholder,
-textarea::placeholder {
- opacity: 1;
-}
-
-input[type="password"],
-input[type="text"],
-textarea {
- background-color: transparent;
- color: #2e2f32;
-}
-
-textarea {
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- color: #2e2f32;
-}
-
-input[type="password"]:focus,
-input[type="text"]:focus,
-textarea:focus {
- outline: none;
- -webkit-box-shadow: none;
- box-shadow: none;
-}
-
-:focus:not(.focus-visible) {
- outline: none;
-}
-
-.mx_Dialog .mx_textinput > input[type="search"],
-.mx_Dialog .mx_textinput > input[type="text"],
-.mx_MatrixChat .mx_textinput > input[type="search"],
-.mx_MatrixChat .mx_textinput > input[type="text"] {
- border: none;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- color: #2e2f32;
-}
-
-.mx_Dialog .mx_textinput,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"],
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"],
-.mx_MatrixChat .mx_textinput,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"],
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"] {
- display: block;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- background-color: transparent;
- color: #9fa9ba;
- border-radius: 4px;
- border: 1px solid rgba(46, 47, 50, 0.1);
- margin: 9px;
-}
-
-.mx_Dialog .mx_textinput,
-.mx_MatrixChat .mx_textinput {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_Dialog .mx_textinput input::-webkit-input-placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]::-webkit-input-placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]::-webkit-input-placeholder,
-.mx_MatrixChat .mx_textinput input::-webkit-input-placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]::-webkit-input-placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]::-webkit-input-placeholder {
- color: rgba(159, 169, 186, 0.75);
-}
-
-.mx_Dialog .mx_textinput input::-moz-placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]::-moz-placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]::-moz-placeholder,
-.mx_MatrixChat .mx_textinput input::-moz-placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]::-moz-placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]::-moz-placeholder {
- color: rgba(159, 169, 186, 0.75);
-}
-
-.mx_Dialog .mx_textinput input:-ms-input-placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]:-ms-input-placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]:-ms-input-placeholder,
-.mx_MatrixChat .mx_textinput input:-ms-input-placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]:-ms-input-placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]:-ms-input-placeholder {
- color: rgba(159, 169, 186, 0.75);
-}
-
-.mx_Dialog .mx_textinput input::-ms-input-placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]::-ms-input-placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]::-ms-input-placeholder,
-.mx_MatrixChat .mx_textinput input::-ms-input-placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]::-ms-input-placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]::-ms-input-placeholder {
- color: rgba(159, 169, 186, 0.75);
-}
-
-.mx_Dialog .mx_textinput input::placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]::placeholder,
-.mx_Dialog
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]::placeholder,
-.mx_MatrixChat .mx_textinput input::placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"]::placeholder,
-.mx_MatrixChat
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"]::placeholder {
- color: rgba(159, 169, 186, 0.75);
-}
-
-.dark-panel {
- background-color: #f2f5f8;
-}
-
-.dark-panel .mx_textinput,
-.dark-panel
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"],
-.dark-panel
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"] {
- color: #9fa9ba;
- background-color: #fff;
- border: none;
-}
-
-.light-panel .mx_textinput,
-.light-panel
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="search"],
-.light-panel
- :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput)
- > input[type="text"] {
- color: #9fa9ba;
- background-color: #f2f5f8;
- border: none;
-}
-
-::-moz-focus-inner {
- border: 0;
-}
-
-#mx_theme_accentColor {
- color: #0dbd8b;
-}
-
-#mx_theme_secondaryAccentColor {
- color: #f2f5f8;
-}
-
-#mx_theme_tertiaryAccentColor {
- color: #d3efe1;
-}
-
-.mx_Dialog_wrapper {
- position: fixed;
- z-index: 4000;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_Dialog {
- background-color: #fff;
- color: #747474;
- z-index: 4012;
- font-weight: 300;
- font-size: 1.5rem;
- position: relative;
- padding: 24px;
- max-height: 80%;
- -webkit-box-shadow: 2px 15px 30px 0 rgba(0, 0, 0, 0.48);
- box-shadow: 2px 15px 30px 0 rgba(0, 0, 0, 0.48);
- border-radius: 8px;
- overflow-y: auto;
-}
-
-.mx_Dialog_fixedWidth {
- width: 60vw;
- max-width: 704px;
-}
-
-.mx_Dialog_staticWrapper .mx_Dialog {
- z-index: 4010;
- contain: content;
-}
-
-.mx_Dialog_background {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(46, 48, 51, 0.38);
- opacity: 0.8;
- z-index: 4011;
-}
-
-.mx_Dialog_background.mx_Dialog_staticBackground {
- z-index: 4009;
-}
-
-.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background {
- opacity: 0.4;
-}
-
-.mx_Dialog_lightbox .mx_Dialog_background {
- opacity: 0.95;
- background-color: #000;
-}
-
-.mx_Dialog_lightbox .mx_Dialog {
- border-radius: 0;
- background-color: transparent;
- width: 100%;
- height: 100%;
- max-width: 100%;
- max-height: 100%;
- pointer-events: none;
- padding: 0;
-}
-
-.mx_Dialog_header {
- position: relative;
- margin-bottom: 10px;
-}
-
-.mx_Dialog_titleImage {
- vertical-align: sub;
- width: 25px;
- height: 25px;
- margin-left: -2px;
- margin-right: 4px;
-}
-
-.mx_Dialog_title {
- font-size: 2.2rem;
- font-weight: 600;
- line-height: 3.6rem;
- color: #45474a;
-}
-
-.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
- text-align: center;
-}
-
-.mx_Dialog_header.mx_Dialog_headerWithCancel > .mx_Dialog_title {
- margin-right: 20px;
-}
-
-.mx_Dialog_title.danger {
- color: #ff4b55;
-}
-
-.mx_Dialog_cancelButton {
- -webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
- mask: url(../../img/feather-customised/cancel.23c2689.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: cover;
- mask-size: cover;
- width: 14px;
- height: 14px;
- background-color: #c1c1c1;
- cursor: pointer;
- position: absolute;
- top: 10px;
- right: 0;
-}
-
-.mx_Dialog_content {
- margin: 24px 0 68px;
- font-size: 1.4rem;
- color: #2e2f32;
- word-wrap: break-word;
-}
-
-.mx_Dialog_buttons {
- margin-top: 20px;
- text-align: right;
-}
-
-.mx_Dialog_buttons .mx_Dialog_buttons_additive {
- float: left;
-}
-
-.mx_Dialog_buttons button,
-.mx_Dialog_buttons input[type="submit"],
-.mx_Dialog button,
-.mx_Dialog input[type="submit"] {
- vertical-align: middle;
- border-radius: 8px;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- color: #fff;
- background-color: #0dbd8b;
- width: auto;
- padding: 7px 1.5em;
- cursor: pointer;
- display: inline-block;
- outline: none;
- margin-left: 0;
- margin-right: 8px;
- font-weight: 600;
- border: 1px solid #0dbd8b;
- color: #0dbd8b;
- background-color: #fff;
- font-family: inherit;
-}
-
-.mx_Dialog button:last-child {
- margin-right: 0;
-}
-
-.mx_Dialog_buttons button:focus,
-.mx_Dialog_buttons input[type="submit"]:focus,
-.mx_Dialog button:focus,
-.mx_Dialog input[type="submit"]:focus {
- -webkit-filter: brightness(105%);
- filter: brightness(105%);
-}
-
-.mx_Dialog_buttons button.mx_Dialog_primary,
-.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary,
-.mx_Dialog button.mx_Dialog_primary,
-.mx_Dialog input[type="submit"].mx_Dialog_primary {
- color: #fff;
- background-color: #0dbd8b;
- min-width: 156px;
-}
-
-.mx_Dialog_buttons button.danger,
-.mx_Dialog_buttons input[type="submit"].danger,
-.mx_Dialog button.danger,
-.mx_Dialog input[type="submit"].danger {
- background-color: #ff4b55;
- border: 1px solid #ff4b55;
- color: #fff;
-}
-
-.mx_Dialog button.warning,
-.mx_Dialog input[type="submit"].warning {
- border: 1px solid #ff4b55;
- color: #ff4b55;
-}
-
-.mx_Dialog_buttons button:disabled,
-.mx_Dialog_buttons input[type="submit"]:disabled,
-.mx_Dialog button:disabled,
-.mx_Dialog input[type="submit"]:disabled {
- background-color: #747474;
- border: 1px solid #747474;
- opacity: 0.7;
-}
-
-.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
- width: auto;
- border-radius: 8px;
- padding: 0;
- -webkit-box-shadow: none;
- box-shadow: none;
- overflow-x: hidden;
- overflow-y: hidden;
-}
-
-.mx_GeneralButton {
- vertical-align: middle;
- border: 0;
- border-radius: 8px;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- color: #fff;
- background-color: #0dbd8b;
- width: auto;
- padding: 7px 1.5em;
- cursor: pointer;
- display: inline-block;
- outline: none;
- display: inline;
- margin: auto;
-}
-
-.mx_linkButton {
- cursor: pointer;
- color: #0dbd8b;
-}
-
-.mx_TextInputDialog_label {
- text-align: left;
- padding-bottom: 12px;
-}
-
-.mx_TextInputDialog_input {
- font-size: 1.5rem;
- border-radius: 3px;
- border: 1px solid #e7e7e7;
- padding: 9px;
- color: #2e2f32;
- background-color: #fff;
-}
-
-.mx_textButton {
- vertical-align: middle;
- border: 0;
- border-radius: 8px;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- color: #fff;
- background-color: #0dbd8b;
- width: auto;
- cursor: pointer;
- display: inline-block;
- outline: none;
- font-size: 1.5rem;
- padding: 0 1.5em;
-}
-
-.mx_button_row {
- margin-top: 69px;
-}
-
-.mx_Username_color1 {
- color: #368bd6;
-}
-
-.mx_Username_color2 {
- color: #ac3ba8;
-}
-
-.mx_Username_color3 {
- color: #0dbd8b;
-}
-
-.mx_Username_color4 {
- color: #e64f7a;
-}
-
-.mx_Username_color5 {
- color: #ff812d;
-}
-
-.mx_Username_color6 {
- color: #2dc2c5;
-}
-
-.mx_Username_color7 {
- color: #5c56f5;
-}
-
-.mx_Username_color8 {
- color: #74d12c;
-}
-
-.mx_Tooltip_dark .mx_Tooltip_chevron:after {
- border-right-color: #27303a;
-}
-
-html {
- scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-}
-
-* {
- scrollbar-width: thin;
-}
-
-::-webkit-scrollbar {
- width: 6px;
- height: 6px;
- background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
- border-radius: 3px;
- background-color: rgba(0, 0, 0, 0.2);
-}
-
-.mx_AutoHideScrollbar:hover {
- scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-}
-
-.mx_AutoHideScrollbar:hover::-webkit-scrollbar {
- background-color: transparent;
-}
-
-.mx_AutoHideScrollbar:hover::-webkit-scrollbar-thumb {
- background-color: rgba(0, 0, 0, 0.2);
-}
-
-.mx_AutoHideScrollbar {
- overflow-x: hidden;
- overflow-y: auto;
- overflow-y: overlay;
- -ms-overflow-style: -ms-autohiding-scrollbar;
-}
-
-.mx_AutoHideScrollbar::-webkit-scrollbar,
-.mx_AutoHideScrollbar::-webkit-scrollbar-thumb {
- background-color: transparent;
-}
-
-.mx_AutoHideScrollbar {
- scrollbar-color: transparent transparent;
-}
-
-.mx_CompatibilityPage {
- width: 100%;
- height: 100%;
- background-color: #e55;
-}
-
-.mx_CompatibilityPage_box {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- width: 500px;
- height: 300px;
- border: 1px solid;
- padding: 10px;
- background-color: #fcc;
-}
-
-.mx_ContextualMenu_wrapper {
- position: fixed;
- z-index: 5000;
-}
-
-.mx_ContextualMenu_background {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 1;
- z-index: 5000;
-}
-
-.mx_ContextualMenu {
- border-radius: 8px;
- -webkit-box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
- box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
- background-color: #fff;
- color: #2e2f32;
- position: absolute;
- font-size: 1.4rem;
- z-index: 5001;
- contain: content;
-}
-
-.mx_ContextualMenu_right {
- right: 0;
-}
-
-.mx_ContextualMenu.mx_ContextualMenu_withChevron_right {
- right: 8px;
-}
-
-.mx_ContextualMenu_chevron_right {
- position: absolute;
- right: -8px;
- top: 0;
- width: 0;
- height: 0;
- border-top: 8px solid transparent;
- border-left: 8px solid #fff;
- border-bottom: 8px solid transparent;
-}
-
-.mx_ContextualMenu_left {
- left: 0;
-}
-
-.mx_ContextualMenu.mx_ContextualMenu_withChevron_left {
- left: 8px;
-}
-
-.mx_ContextualMenu_chevron_left {
- position: absolute;
- left: -8px;
- top: 0;
- width: 0;
- height: 0;
- border-top: 8px solid transparent;
- border-right: 8px solid #fff;
- border-bottom: 8px solid transparent;
-}
-
-.mx_ContextualMenu_top {
- top: 0;
-}
-
-.mx_ContextualMenu.mx_ContextualMenu_withChevron_top {
- top: 8px;
-}
-
-.mx_ContextualMenu_chevron_top {
- position: absolute;
- left: 0;
- top: -8px;
- width: 0;
- height: 0;
- border-left: 8px solid transparent;
- border-bottom: 8px solid #fff;
- border-right: 8px solid transparent;
-}
-
-.mx_ContextualMenu_bottom {
- bottom: 0;
-}
-
-.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
- bottom: 8px;
-}
-
-.mx_ContextualMenu_chevron_bottom {
- position: absolute;
- left: 0;
- bottom: -8px;
- width: 0;
- height: 0;
- border-left: 8px solid transparent;
- border-top: 8px solid #fff;
- border-right: 8px solid transparent;
-}
-
-.mx_CreateRoom {
- width: 960px;
- margin-left: auto;
- margin-right: auto;
- color: #2e2f32;
-}
-
-.mx_CreateRoom input,
-.mx_CreateRoom textarea {
- border-radius: 3px;
- border: 1px solid #c7c7c7;
- font-weight: 300;
- font-size: 1.3rem;
- padding: 9px;
- margin-top: 6px;
-}
-
-.mx_CreateRoom_description {
- width: 330px;
-}
-
-.mx_CustomRoomTagPanel {
- background-color: hsla(0, 0%, 91%, 0.77);
- max-height: 40vh;
-}
-
-.mx_CustomRoomTagPanel_scroller {
- max-height: inherit;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_CustomRoomTagPanel .mx_AccessibleButton {
- margin: 0 auto;
- width: 40px;
- padding: 10px 0 9px;
- position: relative;
-}
-
-.mx_CustomRoomTagPanel .mx_BaseAvatar_image {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- width: 40px;
- height: 40px;
-}
-
-.mx_CustomRoomTagPanel
- .mx_AccessibleButton.CustomRoomTagPanel_tileSelected:before {
- content: "";
- height: 56px;
- background-color: #238cf5;
- width: 5px;
- position: absolute;
- left: -9px;
- border-radius: 0 3px 3px 0;
- top: 5px;
-}
-
-.mx_FilePanel {
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- overflow-y: auto;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_FilePanel .mx_RoomView_messageListWrapper {
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_FilePanel .mx_RoomView_MessageList {
- width: 100%;
-}
-
-.mx_FilePanel .mx_EventTile_avatar,
-.mx_FilePanel .mx_RoomView_MessageList h2 {
- display: none;
-}
-
-.mx_FilePanel .mx_EventTile:not([data-layout="bubble"]) {
- word-break: break-word;
- margin-top: 10px;
- padding-top: 0;
-}
-
-.mx_FilePanel .mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_line {
- padding-left: 0;
-}
-
-.mx_FilePanel .mx_EventTile .mx_MImageBody {
- margin-right: 0;
-}
-
-.mx_FilePanel .mx_EventTile .mx_MFileBody {
- line-height: 2.4rem;
-}
-
-.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
- padding-top: 8px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- font-size: 1.4rem;
- color: #acacac;
-}
-
-.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- color: #747474;
-}
-
-.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
- -webkit-box-flex: 1;
- -ms-flex: 1 0 0px;
- flex: 1 0 0;
- font-size: 1.4rem;
- text-align: right;
- white-space: nowrap;
-}
-
-.mx_FilePanel .mx_EventTile_senderDetails {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-top: -2px;
-}
-
-.mx_FilePanel .mx_EventTile_senderDetailsLink {
- text-decoration: none;
-}
-
-.mx_FilePanel .mx_EventTile .mx_SenderProfile {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- line-height: normal;
- padding: 0;
- font-size: 1.4rem;
- opacity: 1;
- color: #acacac;
-}
-
-.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
- -webkit-box-flex: 1;
- -ms-flex: 1 0 0px;
- flex: 1 0 0;
- text-align: right;
- visibility: visible;
- position: static;
- font-size: 1.4rem;
- opacity: 1;
- color: #acacac;
-}
-
-.mx_FilePanel .mx_EventTile_line {
- margin-right: 0;
- padding-left: 0;
-}
-
-.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
- padding-left: 0;
-}
-
-.mx_FilePanel_empty:before {
- -webkit-mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
- mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
-}
-
-.mx_GenericErrorPage {
- width: 100%;
- height: 100%;
- background-color: #fff;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_GenericErrorPage_box {
- display: inline;
- width: 500px;
- min-height: 125px;
- border: 1px solid #f22;
- padding: 10px 10px 20px;
- background-color: #fcc;
-}
-
-.mx_GroupFilterPanel {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background-color: hsla(0, 0%, 91%, 0.77);
- cursor: pointer;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- min-height: 0;
-}
-
-.mx_GroupFilterPanel_items_selected {
- cursor: pointer;
-}
-
-.mx_GroupFilterPanel .mx_GroupFilterPanel_divider {
- height: 0;
- width: 90%;
- border: none;
- border-bottom: 1px solid #8d99a5;
-}
-
-.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- width: 100%;
-}
-
-.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 6px;
-}
-
-.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer > div {
- margin: 6px 0;
-}
-
-.mx_GroupFilterPanel .mx_TagTile {
- position: relative;
-}
-
-.mx_GroupFilterPanel .mx_TagTile .mx_BetaDot {
- position: absolute;
- right: -13px;
- top: -11px;
-}
-
-.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype {
- padding: 3px;
-}
-
-.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
- background-color: #fff;
- border-radius: 6px;
-}
-
-.mx_TagTile_selected_prototype .mx_TagTile_homeIcon:before {
- background-color: #2e2f32;
-}
-
-.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon {
- background-color: rgba(92, 100, 112, 0.2);
- border-radius: 48px;
-}
-
-.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon:before {
- background-color: #5c6470;
-}
-
-.mx_TagTile_homeIcon {
- width: 32px;
- height: 32px;
- position: relative;
-}
-
-.mx_TagTile_homeIcon:before {
- -webkit-mask-image: url(../../img/element-icons/home.b706c0e.svg);
- mask-image: url(../../img/element-icons/home.b706c0e.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 21px;
- mask-size: 21px;
- content: "";
- display: inline-block;
- width: 32px;
- height: 32px;
- position: absolute;
- top: calc(50% - 16px);
- left: calc(50% - 16px);
-}
-
-.mx_GroupFilterPanel .mx_TagTile_plus {
- margin-bottom: 12px;
- height: 32px;
- width: 32px;
- border-radius: 20px;
- background-color: rgba(92, 100, 112, 0.2);
- position: relative;
- display: block !important;
-}
-
-.mx_GroupFilterPanel .mx_TagTile_plus:before {
- background-color: #5c6470;
- -webkit-mask-image: url(../../img/feather-customised/plus.38ae979.svg);
- mask-image: url(../../img/feather-customised/plus.38ae979.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- content: "";
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
-}
-
-.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected:before {
- content: "";
- height: 100%;
- background-color: #0dbd8b;
- width: 4px;
- position: absolute;
- left: -12px;
- border-radius: 0 3px 3px 0;
-}
-
-.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus {
- -webkit-filter: none;
- filter: none;
-}
-
-.mx_TagTile_tooltip {
- position: relative;
- top: -30px;
- left: 5px;
-}
-
-.mx_TagTile_context_button {
- min-width: 15px;
- height: 15px;
- position: absolute;
- right: -5px;
- top: -8px;
- border-radius: 8px;
- background-color: #dbdbdb;
- color: #000;
- font-weight: 600;
- font-size: 1rem;
- text-align: center;
- padding-top: 1px;
- padding-left: 4px;
- padding-right: 4px;
-}
-
-.mx_TagTile_avatar {
- position: relative;
-}
-
-.mx_TagTile_badge {
- position: absolute;
- right: -4px;
- top: -2px;
- border-radius: 8px;
- color: #fff;
- font-weight: 600;
- font-size: 1.4rem;
- padding: 0 5px;
- background-color: #61708b;
-}
-
-.mx_TagTile_badgeHighlight {
- background-color: #ff4b55;
-}
-
-.mx_GroupView {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- overflow: hidden;
-}
-
-.mx_GroupView_error {
- margin: auto;
-}
-
-.mx_GroupView_header {
- min-height: 52px;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- padding-bottom: 10px;
- padding-left: 19px;
-}
-
-.mx_GroupView_header_view {
- border-bottom: 1px solid transparent;
- padding-bottom: 0;
- padding-right: 8px;
-}
-
-.mx_GroupView_header_avatar,
-.mx_GroupView_header_info {
- display: table-cell;
- vertical-align: middle;
-}
-
-.mx_GroupHeader_button {
- position: relative;
- margin-left: 5px;
- margin-right: 5px;
- cursor: pointer;
- height: 20px;
- width: 20px;
-}
-
-.mx_GroupHeader_button:before {
- content: "";
- position: absolute;
- height: 20px;
- width: 20px;
- background-color: #91a1c0;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_GroupHeader_editButton:before {
- -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
- mask-image: url(../../img/element-icons/settings.6b381af.svg);
-}
-
-.mx_GroupHeader_shareButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
- mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
-}
-
-.mx_GroupView_hostingSignup img {
- margin-left: 5px;
-}
-
-.mx_GroupView_editable {
- border-bottom: 1px solid #c7c7c7 !important;
- min-width: 150px;
- cursor: text;
-}
-
-.mx_GroupView_editable:focus {
- border-bottom: 1px solid #0dbd8b !important;
- outline: none;
- -webkit-box-shadow: none;
- box-shadow: none;
-}
-
-.mx_GroupView_header_isUserMember
- .mx_GroupView_header_name:hover
- div:not(.mx_GroupView_editable) {
- color: #0dbd8b;
- cursor: pointer;
-}
-
-.mx_GroupView_avatarPicker {
- position: relative;
-}
-
-.mx_GroupView_avatarPicker_edit {
- position: absolute;
- top: 50px;
- left: 15px;
-}
-
-.mx_GroupView_avatarPicker .mx_Spinner {
- width: 48px;
- height: 48px !important;
-}
-
-.mx_GroupView_header_leftCol {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- overflow: hidden;
-}
-
-.mx_GroupView_header_rightCol {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_GroupView_textButton {
- display: inline-block;
-}
-
-.mx_GroupView_header_groupid {
- font-weight: 400;
- font-size: medium;
- padding-left: 10px;
-}
-
-.mx_GroupView_header_name {
- vertical-align: middle;
- width: 100%;
- height: 31px;
- color: #2e2f32;
- font-weight: 700;
- font-size: 2.2rem;
- padding-right: 16px;
-}
-
-.mx_GroupView_header_name,
-.mx_GroupView_header_shortDesc {
- overflow: hidden;
- padding-left: 19px;
- text-overflow: ellipsis;
- border-bottom: 1px solid transparent;
-}
-
-.mx_GroupView_header_shortDesc {
- vertical-align: bottom;
- float: left;
- max-height: 42px;
- color: #a2a2a2;
- font-weight: 300;
- font-size: 1.3rem;
- margin-right: 16px;
-}
-
-.mx_GroupView_avatarPicker_label {
- cursor: pointer;
-}
-
-.mx_GroupView_cancelButton {
- padding-left: 8px;
-}
-
-.mx_GroupView_cancelButton img {
- position: relative;
- top: 5px;
-}
-
-.mx_GroupView input[type="radio"] {
- margin: 10px 10px 0;
-}
-
-.mx_GroupView_label_text {
- display: inline-block;
- max-width: 80%;
- vertical-align: 0.1em;
- line-height: 2em;
-}
-
-.mx_GroupView_body {
- margin: 0 24px;
-}
-
-.mx_GroupView_body,
-.mx_GroupView_rooms {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_GroupView_rooms {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- min-height: 200px;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.mx_GroupView h3 {
- text-transform: uppercase;
- color: #3d3b39;
- font-weight: 600;
- font-size: 1.3rem;
- margin-bottom: 10px;
-}
-
-.mx_GroupView_rooms_header .mx_AccessibleButton {
- padding-left: 14px;
- margin-bottom: 14px;
- height: 24px;
-}
-
-.mx_GroupView_group {
- border-top: 1px solid transparent;
-}
-
-.mx_GroupView_group_disabled {
- opacity: 0.3;
- pointer-events: none;
-}
-
-.mx_GroupView_rooms_header_addRow_button {
- display: inline-block;
-}
-
-.mx_GroupView_rooms_header_addRow_button object {
- pointer-events: none;
-}
-
-.mx_GroupView_rooms_header_addRow_label {
- display: inline-block;
- vertical-align: top;
- line-height: 2.4rem;
- padding-left: 28px;
- color: #0dbd8b;
-}
-
-.mx_GroupView_rooms .mx_RoomDetailList {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- border-top: 1px solid transparent;
- padding-top: 10px;
- word-break: break-word;
-}
-
-.mx_GroupView .mx_RoomView_messageListWrapper {
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
-}
-
-.mx_GroupView_membershipSection {
- color: #888;
- margin-top: 10px;
-}
-
-.mx_GroupView_membershipSubSection {
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- padding-bottom: 8px;
-}
-
-.mx_GroupView_membershipSubSection .mx_Spinner {
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
-}
-
-.mx_GroupView_membershipSection_description {
- line-height: 3.4rem;
-}
-
-.mx_GroupView_membershipSection_description .mx_BaseAvatar {
- margin-right: 10px;
-}
-
-.mx_GroupView_membershipSection .mx_GroupView_textButton {
- margin-right: 0;
- margin-top: 0;
- margin-left: 8px;
-}
-
-.mx_GroupView_memberSettings_toggle label {
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.mx_GroupView_memberSettings input {
- margin-right: 6px;
-}
-
-.mx_GroupView_featuredThings {
- margin-top: 20px;
-}
-
-.mx_GroupView_featuredThings_header {
- font-weight: 700;
- font-size: 120%;
- margin-bottom: 20px;
-}
-
-.mx_GroupView_featuredThings_category {
- font-weight: 700;
- font-size: 110%;
- margin-top: 10px;
-}
-
-.mx_GroupView_featuredThings_container {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_GroupView_featuredThing,
-.mx_GroupView_featuredThings_addButton {
- display: table-cell;
- text-align: center;
- width: 100px;
- margin: 0 20px;
-}
-
-.mx_GroupView_featuredThing {
- position: relative;
-}
-
-.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton {
- position: absolute;
- top: -7px;
- right: 11px;
- opacity: 0.4;
-}
-
-.mx_GroupView_featuredThing .mx_BaseAvatar {
- vertical-align: baseline;
- vertical-align: initial;
-}
-
-.mx_GroupView_featuredThings_addButton object {
- pointer-events: none;
-}
-
-.mx_GroupView_featuredThing_name {
- word-wrap: break-word;
-}
-
-.mx_GroupView_uploadInput {
- display: none;
-}
-
-.mx_GroupView_body .mx_AutoHideScrollbar > * {
- margin: 11px 50px 50px 68px;
-}
-
-.mx_GroupView_groupDesc textarea {
- width: 100%;
- max-width: 100%;
- height: 150px;
-}
-
-.mx_GroupView_changeDelayWarning,
-.mx_GroupView_groupDesc_placeholder {
- background-color: #f7f7f7;
- color: #888;
- border-radius: 10px;
- text-align: center;
- margin: 20px 0;
-}
-
-.mx_GroupView_groupDesc_placeholder {
- padding: 100px 20px;
- cursor: pointer;
-}
-
-.mx_GroupView_changeDelayWarning {
- padding: 40px 20px;
-}
-
-.mx_GroupView
- .mx_MemberInfo
- .mx_AutoHideScrollbar
- > :not(.mx_MemberInfo_avatar) {
- padding-left: 16px;
- padding-right: 16px;
-}
-
-.mx_HeaderButtons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_RoomHeader_buttons + .mx_HeaderButtons:before {
- content: unset;
-}
-
-.mx_HeaderButtons:before {
- content: "";
- background-color: #91a1c0;
- opacity: 0.5;
- margin: 6px 8px;
- border-radius: 1px;
- width: 1px;
-}
-
-.mx_HomePage {
- max-width: 960px;
- width: 100%;
- height: 100%;
- margin-left: auto;
- margin-right: auto;
-}
-
-.mx_HomePage_default {
- text-align: center;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_HomePage_default .mx_HomePage_default_wrapper {
- margin: auto;
-}
-
-.mx_HomePage_default img {
- height: 48px;
-}
-
-.mx_HomePage_default h1 {
- font-weight: 600;
- font-size: 3.2rem;
- line-height: 4.4rem;
- margin-bottom: 4px;
-}
-
-.mx_HomePage_default h4 {
- margin-top: 4px;
- font-weight: 600;
- font-size: 1.8rem;
- line-height: 2.5rem;
- color: #61708b;
-}
-
-.mx_HomePage_default .mx_MiniAvatarUploader {
- margin: 0 auto;
-}
-
-.mx_HomePage_default .mx_HomePage_default_buttons {
- margin: 60px auto 0;
- width: -webkit-fit-content;
- width: -moz-fit-content;
- width: fit-content;
-}
-
-.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton {
- padding: 73px 8px 15px;
- width: 160px;
- height: 132px;
- margin: 20px;
- position: relative;
- display: inline-block;
- border-radius: 8px;
- vertical-align: top;
- word-break: break-word;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 2rem;
- color: #fff;
- background-color: #0dbd8b;
-}
-
-.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:before {
- top: 20px;
- left: 60px;
- width: 40px;
- height: 40px;
- content: "";
- position: absolute;
- background-color: #fff;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_HomePage_default
- .mx_HomePage_default_buttons
- .mx_AccessibleButton.mx_HomePage_button_sendDm:before {
- -webkit-mask-image: url(../../img/element-icons/feedback.a91241e.svg);
- mask-image: url(../../img/element-icons/feedback.a91241e.svg);
-}
-
-.mx_HomePage_default
- .mx_HomePage_default_buttons
- .mx_AccessibleButton.mx_HomePage_button_explore:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
- mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
-}
-
-.mx_HomePage_default
- .mx_HomePage_default_buttons
- .mx_AccessibleButton.mx_HomePage_button_createGroup:before {
- -webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
- mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
-}
-
-.mx_LeftPanel {
- background-color: hsla(0, 0%, 96.1%, 0.9);
- min-width: 206px;
- max-width: 50%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- contain: content;
-}
-
-.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer {
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -ms-flex-preferred-size: 56px;
- flex-basis: 56px;
- height: 100%;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_LeftPanel .mx_LeftPanel_GroupFilterPanelContainer,
-.mx_LeftPanel .mx_LeftPanel_roomListContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
-}
-
-.mx_LeftPanel .mx_LeftPanel_roomListContainer {
- background-color: hsla(0, 0%, 96.1%, 0.9);
- -webkit-box-flex: 1;
- -ms-flex: 1 0 0px;
- flex: 1 0 0;
- min-width: 0;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader {
- padding: 12px;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_breadcrumbsContainer {
- overflow-y: hidden;
- overflow-x: scroll;
- margin: 12px 12px 0;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- contain: content;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_leftOverflow {
- -webkit-mask-image: -webkit-gradient(
- linear,
- left top,
- right top,
- from(transparent),
- color-stop(5%, #000)
- );
- -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%);
- mask-image: -webkit-gradient(
- linear,
- left top,
- right top,
- from(transparent),
- color-stop(5%, #000)
- );
- mask-image: linear-gradient(90deg, transparent, #000 5%);
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow {
- -webkit-mask-image: -webkit-gradient(
- linear,
- left top,
- right top,
- from(#000),
- color-stop(95%, #000),
- to(transparent)
- );
- -webkit-mask-image: linear-gradient(90deg, #000, #000 95%, transparent);
- mask-image: -webkit-gradient(
- linear,
- left top,
- right top,
- from(#000),
- color-stop(95%, #000),
- to(transparent)
- );
- mask-image: linear-gradient(90deg, #000, #000 95%, transparent);
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
- -webkit-mask-image: -webkit-gradient(
- linear,
- left top,
- right top,
- from(transparent),
- color-stop(5%, #000),
- color-stop(95%, #000),
- to(transparent)
- );
- -webkit-mask-image: linear-gradient(
- 90deg,
- transparent,
- #000 5%,
- #000 95%,
- transparent
- );
- mask-image: -webkit-gradient(
- linear,
- left top,
- right top,
- from(transparent),
- color-stop(5%, #000),
- color-stop(95%, #000),
- to(transparent)
- );
- mask-image: linear-gradient(
- 90deg,
- transparent,
- #000 5%,
- #000 95%,
- transparent
- );
-}
-
-.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer {
- margin-left: 12px;
- margin-right: 12px;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_RoomSearch_focused
- + .mx_LeftPanel_exploreButton,
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_RoomSearch_hasQuery
- + .mx_LeftPanel_exploreButton {
- -ms-flex-preferred-size: 0;
- flex-basis: 0;
- margin: 0;
- width: 0;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_RoomSearch_focused
- + .mx_LeftPanel_exploreButton:before,
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_RoomSearch_hasQuery
- + .mx_LeftPanel_exploreButton:before {
- content: none;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_LeftPanel_dialPadButton {
- width: 32px;
- height: 32px;
- border-radius: 8px;
- background-color: rgba(141, 151, 165, 0.2);
- position: relative;
- margin-left: 8px;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_LeftPanel_dialPadButton:before {
- content: "";
- position: absolute;
- top: 8px;
- left: 8px;
- width: 16px;
- height: 16px;
- -webkit-mask-image: url(../../img/element-icons/call/dialpad.3be6cbc.svg);
- mask-image: url(../../img/element-icons/call/dialpad.3be6cbc.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #737d8c;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_LeftPanel_exploreButton {
- width: 32px;
- height: 32px;
- border-radius: 8px;
- background-color: rgba(141, 151, 165, 0.2);
- position: relative;
- margin-left: 8px;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_LeftPanel_exploreButton:before {
- content: "";
- position: absolute;
- top: 8px;
- left: 8px;
- width: 16px;
- height: 16px;
- -webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
- mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #737d8c;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_LeftPanel_exploreButton.mx_LeftPanel_exploreButton_space:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
- mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_roomListFilterCount {
- font-size: 1.3rem;
- font-weight: 600;
- margin-left: 12px;
- margin-top: 14px;
- margin-bottom: -4px;
-}
-
-.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper {
- overflow: hidden;
- margin-top: 10px;
- -webkit-box-flex: 1;
- -ms-flex: 1 0 0px;
- flex: 1 0 0;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyBottom {
- padding-bottom: 32px;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyTop {
- padding-top: 32px;
-}
-
-.mx_LeftPanel
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_actualRoomListContainer {
- position: relative;
- height: 100%;
-}
-
-.mx_LeftPanel.mx_LeftPanel_minimized {
- min-width: unset;
- width: unset !important;
-}
-
-.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer {
- width: 68px;
-}
-
-.mx_LeftPanel.mx_LeftPanel_minimized
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_userHeader {
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_LeftPanel.mx_LeftPanel_minimized
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_LeftPanel.mx_LeftPanel_minimized
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_LeftPanel_dialPadButton,
-.mx_LeftPanel.mx_LeftPanel_minimized
- .mx_LeftPanel_roomListContainer
- .mx_LeftPanel_filterContainer
- .mx_LeftPanel_exploreButton {
- margin-left: 0;
- margin-top: 8px;
- background-color: transparent;
-}
-
-.mx_LeftPanelWidget {
- margin-left: 8px;
- margin-bottom: 4px;
-}
-
-.mx_LeftPanelWidget .mx_LeftPanelWidget_headerContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- height: 24px;
- color: #8d99a5;
- margin-top: 4px;
-}
-
-.mx_LeftPanelWidget
- .mx_LeftPanelWidget_headerContainer
- .mx_LeftPanelWidget_stickable {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- max-width: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_LeftPanelWidget
- .mx_LeftPanelWidget_headerContainer
- .mx_LeftPanelWidget_headerText {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- max-width: calc(100% - 16px);
- line-height: 1.6rem;
- font-size: 1.3rem;
- font-weight: 600;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.mx_LeftPanelWidget
- .mx_LeftPanelWidget_headerContainer
- .mx_LeftPanelWidget_headerText
- .mx_LeftPanelWidget_collapseBtn {
- display: inline-block;
- position: relative;
- width: 14px;
- height: 14px;
- margin-right: 6px;
-}
-
-.mx_LeftPanelWidget
- .mx_LeftPanelWidget_headerContainer
- .mx_LeftPanelWidget_headerText
- .mx_LeftPanelWidget_collapseBtn:before {
- content: "";
- width: 18px;
- height: 18px;
- position: absolute;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #8d99a5;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_LeftPanelWidget
- .mx_LeftPanelWidget_headerContainer
- .mx_LeftPanelWidget_headerText
- .mx_LeftPanelWidget_collapseBtn.mx_LeftPanelWidget_collapseBtn_collapsed:before {
- -webkit-transform: rotate(-90deg);
- transform: rotate(-90deg);
-}
-
-.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox {
- position: relative;
- -ms-flex-direction: column;
- flex-direction: column;
- overflow: visible;
-}
-
-.mx_LeftPanelWidget .mx_AppTileFullWidth,
-.mx_LeftPanelWidget .mx_LeftPanelWidget_resizeBox {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
-}
-
-.mx_LeftPanelWidget .mx_AppTileFullWidth {
- -webkit-box-flex: 1;
- -ms-flex: 1 0 0px;
- flex: 1 0 0;
- overflow: hidden;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- -webkit-mask-image: linear-gradient(0deg, transparent, #000 4px);
- mask-image: linear-gradient(0deg, transparent, #000 4px);
-}
-
-.mx_LeftPanelWidget .mx_LeftPanelWidget_resizerHandle {
- cursor: ns-resize;
- border-radius: 3px;
- width: unset !important;
- height: 4px !important;
- position: absolute;
- top: -24px !important;
- left: calc(50% - 32px) !important;
- right: calc(50% - 32px) !important;
-}
-
-.mx_LeftPanelWidget:hover .mx_LeftPanelWidget_resizerHandle {
- opacity: 0.8;
- background-color: #2e2f32;
-}
-
-.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton {
- margin-left: 8px;
- margin-right: 7px;
- position: relative;
- width: 24px;
- height: 24px;
- border-radius: 32px;
-}
-
-.mx_LeftPanelWidget .mx_LeftPanelWidget_maximizeButton:before {
- content: "";
- width: 16px;
- height: 16px;
- position: absolute;
- top: 4px;
- left: 4px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
- mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
- background: #61708b;
-}
-
-.mx_LeftPanelWidget_maximizeButtonTooltip {
- margin-top: -3px;
-}
-
-.mx_MainSplit {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- min-width: 0;
- min-height: 0;
- height: 100%;
-}
-
-.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
- padding: 5px;
- margin-left: 8px;
- height: calc(100vh - 51px);
-}
-
-.mx_MainSplit > .mx_RightPanel_ResizeWrapper:hover .mx_RightPanel_ResizeHandle {
- top: 50% !important;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- height: 64px !important;
- width: 4px !important;
- border-radius: 4px !important;
- background-color: #2e2f32;
- opacity: 0.8;
-}
-
-.mx_MatrixChat_splash {
- position: relative;
- height: 100%;
-}
-
-.mx_MatrixChat_splashButtons {
- text-align: center;
- width: 100%;
- position: absolute;
- bottom: 30px;
-}
-
-.mx_MatrixChat_wrapper {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- width: 100%;
- height: 100%;
-}
-
-.mx_MatrixToolbar {
- -webkit-box-ordinal-group: 2;
- -ms-flex-order: 1;
- order: 1;
- height: 40px;
-}
-
-.mx_MatrixChat {
- width: 100%;
- height: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- min-height: 0;
-}
-
-.mx_MatrixChat_syncError {
- color: #fff;
- background-color: #df2a8b;
- border-radius: 5px;
- display: table;
- padding: 30px;
- position: absolute;
- top: 100px;
- left: 50%;
- -webkit-transform: translateX(-50%);
- transform: translateX(-50%);
-}
-
-.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
- background-color: #fff;
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- min-width: 0;
- height: 100%;
-}
-
-.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
- position: relative;
-}
-
-.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover:before {
- position: absolute;
- left: 6px;
- top: 50%;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- height: 64px;
- width: 4px;
- border-radius: 4px;
- content: " ";
- background-color: #2e2f32;
- opacity: 0.8;
-}
-
-.mx_MyGroups {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_MyGroups .mx_BetaCard {
- margin: 0 72px;
- max-width: 760px;
-}
-
-.mx_MyGroups .mx_RoomHeader_simpleHeader {
- margin-left: 0;
-}
-
-.mx_MyGroups_header {
- margin-left: 2px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
-}
-
-.mx_MyGroups > :not(.mx_RoomHeader):not(.mx_BetaCard) {
- max-width: 960px;
- margin: 40px;
-}
-
-.mx_MyGroups_headerCard {
- -webkit-box-flex: 1;
- -ms-flex: 1 0 50%;
- flex: 1 0 50%;
- margin-bottom: 30px;
- min-width: 400px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- margin-right: 13px;
- height: 40px;
- width: 40px;
- border-radius: 20px;
- background-color: rgba(92, 100, 112, 0.2);
- position: relative;
-}
-
-.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button:before {
- background-color: #5c6470;
- -webkit-mask: url(../../img/icons-create-room.817ede2.svg);
- mask: url(../../img/icons-create-room.817ede2.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 80%;
- mask-size: 80%;
- content: "";
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
-}
-
-.mx_MyGroups_headerCard_header {
- font-weight: 700;
- margin-bottom: 10px;
-}
-
-.mx_MyGroups_headerCard_content {
- padding-right: 15px;
-}
-
-.mx_MyGroups_joinBox {
- visibility: hidden;
- height: 0;
- margin: 0;
-}
-
-.mx_MyGroups_content {
- margin-left: 2px;
- -webkit-box-flex: 1;
- -ms-flex: 1 0 0px;
- flex: 1 0 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- overflow-y: auto;
-}
-
-.mx_MyGroups_scrollable {
- overflow-y: inherit;
-}
-
-.mx_MyGroups_placeholder {
- background-color: #f7f7f7;
- color: #888;
- line-height: 40rem;
- border-radius: 10px;
- text-align: center;
-}
-
-.mx_MyGroups_joinedGroups {
- border-top: 1px solid transparent;
- overflow-x: hidden;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-flow: row wrap;
- flex-flow: row wrap;
- -ms-flex-line-pack: start;
- align-content: flex-start;
-}
-
-.mx_MyGroups_joinedGroups .mx_GroupTile {
- min-width: 300px;
- max-width: 33%;
- -webkit-box-flex: 1;
- -ms-flex: 1 0 300px;
- flex: 1 0 300px;
- height: 75px;
- margin: 10px 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
- cursor: pointer;
-}
-
-.mx_GroupTile_avatar {
- cursor: -webkit-grab, -webkit-grab;
- cursor: grab, -webkit-grab;
-}
-
-.mx_GroupTile_profile {
- margin-left: 10px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_GroupTile_profile .mx_GroupTile_desc,
-.mx_GroupTile_profile .mx_GroupTile_groupId,
-.mx_GroupTile_profile .mx_GroupTile_name {
- padding-right: 10px;
-}
-
-.mx_GroupTile_profile .mx_GroupTile_name {
- margin: 0;
- font-size: 1.5rem;
-}
-
-.mx_GroupTile_profile .mx_GroupTile_groupId {
- font-size: 1.3rem;
- opacity: 0.7;
-}
-
-.mx_GroupTile_profile .mx_GroupTile_desc {
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- font-size: 1.3rem;
- max-height: 36px;
- overflow: hidden;
-}
-
-.mx_NonUrgentToastContainer {
- position: absolute;
- bottom: 30px;
- left: 28px;
- z-index: 101;
-}
-
-.mx_NonUrgentToastContainer .mx_NonUrgentToastContainer_toast {
- padding: 10px 12px;
- border-radius: 8px;
- width: 320px;
- font-size: 1.3rem;
- margin-top: 8px;
- background-color: #17191c;
- color: #fff;
-}
-
-.mx_NotificationPanel {
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- overflow-y: auto;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_NotificationPanel .mx_RoomView_messageListWrapper {
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_NotificationPanel .mx_RoomView_MessageList {
- width: 100%;
-}
-
-.mx_NotificationPanel .mx_RoomView_MessageList h2 {
- margin-left: 0;
-}
-
-.mx_NotificationPanel .mx_EventTile {
- word-break: break-word;
- position: relative;
- padding-bottom: 18px;
-}
-
-.mx_NotificationPanel
- .mx_EventTile:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection):after {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- background-color: #8d99a5;
- height: 1px;
- opacity: 0.4;
- content: "";
-}
-
-.mx_NotificationPanel .mx_EventTile_roomName {
- font-weight: 700;
- font-size: 1.4rem;
-}
-
-.mx_NotificationPanel .mx_EventTile_roomName > * {
- vertical-align: middle;
-}
-
-.mx_NotificationPanel .mx_EventTile_roomName > .mx_BaseAvatar {
- margin-right: 8px;
-}
-
-.mx_NotificationPanel .mx_EventTile_roomName a {
- color: #2e2f32;
-}
-
-.mx_NotificationPanel .mx_EventTile_avatar {
- display: none;
-}
-
-.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp,
-.mx_NotificationPanel .mx_EventTile .mx_SenderProfile {
- color: #2e2f32;
- font-size: 1.2rem;
- display: inline;
-}
-
-.mx_NotificationPanel
- .mx_EventTile:not([data-layout="bubble"])
- .mx_EventTile_senderDetails {
- padding-left: 36px;
- position: relative;
-}
-
-.mx_NotificationPanel
- .mx_EventTile:not([data-layout="bubble"])
- .mx_EventTile_senderDetails
- a {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_NotificationPanel .mx_EventTile_roomName a,
-.mx_NotificationPanel .mx_EventTile_senderDetails a {
- text-decoration: none !important;
-}
-
-.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
- visibility: visible;
- position: static;
- display: inline;
- padding-left: 5px;
-}
-
-.mx_NotificationPanel
- .mx_EventTile:not([data-layout="bubble"])
- .mx_EventTile_line {
- margin-right: 0;
- padding: 0 0 0 36px;
-}
-
-.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
- padding-left: 0;
-}
-
-.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
- background-color: #fff;
-}
-
-.mx_NotificationPanel .mx_EventTile_content {
- margin-right: 0;
-}
-
-.mx_NotificationPanel_empty:before {
- -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
- mask-image: url(../../img/element-icons/notifications.d298b39.svg);
-}
-
-.mx_RightPanel {
- overflow-x: hidden;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- position: relative;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- border-radius: 8px;
- padding: 4px 0;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- height: 100%;
- contain: strict;
-}
-
-.mx_RightPanel .mx_RoomView_MessageList {
- padding: 14px 18px;
-}
-
-.mx_RightPanel_header {
- -webkit-box-ordinal-group: 2;
- -ms-flex-order: 1;
- order: 1;
- border-bottom: 1px solid transparent;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 52px;
- flex: 0 0 52px;
-}
-
-.mx_RightPanel_headerButtonGroup {
- height: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- background-color: #fff;
- padding: 0 9px;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_RightPanel_headerButton {
- cursor: pointer;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- margin-left: 1px;
- margin-right: 1px;
- height: 32px;
- width: 32px;
- position: relative;
- border-radius: 100%;
-}
-
-.mx_RightPanel_headerButton:before {
- content: "";
- position: absolute;
- top: 4px;
- left: 4px;
- height: 24px;
- width: 24px;
- background-color: #c1c6cd;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_RightPanel_headerButton:hover {
- background: rgba(13, 189, 139, 0.1);
-}
-
-.mx_RightPanel_headerButton:hover:before {
- background-color: #0dbd8b;
-}
-
-.mx_RightPanel_notifsButton:before {
- -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
- mask-image: url(../../img/element-icons/notifications.d298b39.svg);
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_RightPanel_roomSummaryButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_RightPanel_groupMembersButton:before {
- -webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
- mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_RightPanel_roomsButton:before {
- -webkit-mask-image: url(../../img/element-icons/community-rooms.8f0b6c9.svg);
- mask-image: url(../../img/element-icons/community-rooms.8f0b6c9.svg);
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_RightPanel_pinnedMessagesButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/pin.a996417.svg);
- mask-image: url(../../img/element-icons/room/pin.a996417.svg);
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_RightPanel_pinnedMessagesButton
- .mx_RightPanel_pinnedMessagesButton_unreadIndicator {
- position: absolute;
- right: 0;
- top: 0;
- margin: 4px;
- width: 8px;
- height: 8px;
- border-radius: 50%;
- -webkit-transform: scale(1);
- transform: scale(1);
- background: #ff4b55;
- -webkit-box-shadow: 0 0 0 0 #ff4b55;
- box-shadow: 0 0 0 0 #ff4b55;
- -webkit-animation: mx_RightPanel_indicator_pulse 2s infinite;
- animation: mx_RightPanel_indicator_pulse 2s infinite;
- -webkit-animation-iteration-count: 1;
- animation-iteration-count: 1;
-}
-
-.mx_RightPanel_pinnedMessagesButton
- .mx_RightPanel_pinnedMessagesButton_unreadIndicator:after {
- content: "";
- position: absolute;
- width: inherit;
- height: inherit;
- top: 0;
- left: 0;
- -webkit-transform: scale(1);
- transform: scale(1);
- -webkit-transform-origin: center center;
- transform-origin: center center;
- -webkit-animation-name: mx_RightPanel_indicator_pulse_shadow;
- animation-name: mx_RightPanel_indicator_pulse_shadow;
- -webkit-animation-duration: inherit;
- animation-duration: inherit;
- -webkit-animation-iteration-count: inherit;
- animation-iteration-count: inherit;
- border-radius: 50%;
- background: #ff4b55;
-}
-
-@-webkit-keyframes mx_RightPanel_indicator_pulse {
- 0% {
- -webkit-transform: scale(0.95);
- transform: scale(0.95);
- }
- 70% {
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- to {
- -webkit-transform: scale(0.95);
- transform: scale(0.95);
- }
-}
-
-@keyframes mx_RightPanel_indicator_pulse {
- 0% {
- -webkit-transform: scale(0.95);
- transform: scale(0.95);
- }
- 70% {
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- to {
- -webkit-transform: scale(0.95);
- transform: scale(0.95);
- }
-}
-
-@-webkit-keyframes mx_RightPanel_indicator_pulse_shadow {
- 0% {
- opacity: 0.7;
- }
- 70% {
- -webkit-transform: scale(2.2);
- transform: scale(2.2);
- opacity: 0;
- }
- to {
- opacity: 0;
- }
-}
-
-@keyframes mx_RightPanel_indicator_pulse_shadow {
- 0% {
- opacity: 0.7;
- }
- 70% {
- -webkit-transform: scale(2.2);
- transform: scale(2.2);
- opacity: 0;
- }
- to {
- opacity: 0;
- }
-}
-
-.mx_RightPanel_headerButton_highlight:before {
- background-color: #0dbd8b !important;
-}
-
-.mx_RightPanel_headerButton_badge {
- font-size: 0.8rem;
- border-radius: 8px;
- color: #fff;
- background-color: #0dbd8b;
- font-weight: 700;
- position: absolute;
- top: -4px;
- left: 20px;
- padding: 2px 4px;
-}
-
-.mx_RightPanel_collapsebutton {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- text-align: right;
- height: 16px;
- border: none;
-}
-
-.mx_RightPanel .mx_GroupRoomList,
-.mx_RightPanel .mx_MemberInfo,
-.mx_RightPanel .mx_MemberList,
-.mx_RightPanel_blank {
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
-}
-
-.mx_RightPanel .mx_RoomView_messagePanelSpinner {
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
- margin: auto;
-}
-
-.mx_RightPanel_empty {
- margin-right: -28px;
-}
-
-.mx_RightPanel_empty h2 {
- font-weight: 700;
- margin: 16px 0;
-}
-
-.mx_RightPanel_empty h2,
-.mx_RightPanel_empty p {
- font-size: 1.4rem;
-}
-
-.mx_RightPanel_empty:before {
- content: "";
- display: block;
- margin: 11px auto 29px;
- height: 42px;
- width: 42px;
- background-color: #91a1c0;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_RightPanel_scopeHeader {
- margin: 24px;
- text-align: center;
- font-weight: 600;
- font-size: 1.8rem;
- line-height: 2.2rem;
-}
-
-.mx_RightPanel_scopeHeader .mx_BaseAvatar {
- margin-right: 8px;
- vertical-align: middle;
-}
-
-.mx_RightPanel_scopeHeader .mx_BaseAvatar_image {
- border-radius: 8px;
-}
-
-.mx_RoomDirectory_dialogWrapper > .mx_Dialog {
- max-width: 960px;
- height: 100%;
-}
-
-.mx_RoomDirectory_dialog {
- height: 100%;
- flex-direction: column;
-}
-
-.mx_RoomDirectory,
-.mx_RoomDirectory_dialog {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
-}
-
-.mx_RoomDirectory {
- margin-bottom: 12px;
- color: #2e2f32;
- word-break: break-word;
-}
-
-.mx_RoomDirectory,
-.mx_RoomDirectory_list {
- flex-direction: column;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_RoomDirectory_list {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
-}
-
-.mx_RoomDirectory_list .mx_RoomView_messageListWrapper {
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
-}
-
-.mx_RoomDirectory_listheader {
- display: block;
- margin-top: 13px;
-}
-
-.mx_RoomDirectory_searchbox {
- -webkit-box-flex: 1 !important;
- -ms-flex: 1 !important;
- flex: 1 !important;
-}
-
-.mx_RoomDirectory_listheader .mx_NetworkDropdown {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 200px;
- flex: 0 0 200px;
-}
-
-.mx_RoomDirectory_tableWrapper {
- overflow-y: auto;
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
-}
-
-.mx_RoomDirectory_tableWrapper .mx_RoomDirectory_footer {
- margin-top: 24px;
- text-align: center;
-}
-
-.mx_RoomDirectory_tableWrapper .mx_RoomDirectory_footer > h5 {
- margin: 0;
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 1.8rem;
- color: #2e2f32;
-}
-
-.mx_RoomDirectory_tableWrapper .mx_RoomDirectory_footer > p {
- margin: 40px auto 60px;
- font-size: 1.4rem;
- line-height: 2rem;
- color: #737d8c;
- max-width: 464px;
-}
-
-.mx_RoomDirectory_tableWrapper .mx_RoomDirectory_footer > hr {
- margin: 0;
- border: none;
- height: 1px;
- background-color: #f3f8fd;
-}
-
-.mx_RoomDirectory_tableWrapper
- .mx_RoomDirectory_footer
- .mx_RoomDirectory_newRoom {
- margin: 24px auto 0;
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
-}
-
-.mx_RoomDirectory_table {
- color: #2e2f32;
- display: grid;
- font-size: 1.2rem;
- grid-template-columns: -webkit-max-content auto -webkit-max-content -webkit-max-content -webkit-max-content;
- grid-template-columns: max-content auto max-content max-content max-content;
- grid-row-gap: 24px;
- row-gap: 24px;
- text-align: left;
- width: 100%;
-}
-
-.mx_RoomDirectory_roomAvatar {
- padding: 2px 14px 0 0;
-}
-
-.mx_RoomDirectory_roomMemberCount {
- -ms-flex-item-align: center;
- align-self: center;
- color: #747474;
- padding: 3px 10px 0;
-}
-
-.mx_RoomDirectory_roomMemberCount:before {
- background-color: #747474;
- display: inline-block;
- vertical-align: text-top;
- margin-right: 2px;
- content: "";
- -webkit-mask: url(../../img/feather-customised/user.7a4d23d.svg);
- mask: url(../../img/feather-customised/user.7a4d23d.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 80%;
- mask-size: 80%;
- width: 16px;
- height: 16px;
-}
-
-.mx_RoomDirectory_join,
-.mx_RoomDirectory_preview {
- -ms-flex-item-align: center;
- align-self: center;
- white-space: nowrap;
-}
-
-.mx_RoomDirectory_name {
- display: inline-block;
- font-size: 1.8rem;
- font-weight: 600;
-}
-
-.mx_RoomDirectory_perms {
- display: inline-block;
-}
-
-.mx_RoomDirectory_perm {
- border-radius: 10px;
- display: inline-block;
- height: 20px;
- line-height: 2rem;
- padding: 0 5px;
- color: #fff;
- background-color: #aaa;
-}
-
-.mx_RoomDirectory_topic {
- cursor: auto;
- color: #747474;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 3;
- overflow: hidden;
-}
-
-.mx_RoomDirectory_alias {
- font-size: 1.2rem;
- color: #a2a2a2;
-}
-
-.mx_RoomDirectory .mx_RoomView_MessageList {
- padding: 0;
-}
-
-.mx_RoomDirectory > span {
- font-size: 1.5rem;
- margin-top: 0;
-}
-
-.mx_RoomDirectory > span .mx_AccessibleButton {
- padding: 0;
-}
-
-.mx_RoomSearch {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- border-radius: 8px;
- background-color: rgba(141, 151, 165, 0.2);
- border: 1px solid transparent;
- height: 28px;
- padding: 1px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_RoomSearch .mx_RoomSearch_icon {
- width: 16px;
- height: 16px;
- -webkit-mask: url(../../img/element-icons/roomlist/search.3774248.svg);
- mask: url(../../img/element-icons/roomlist/search.3774248.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #737d8c;
- margin-left: 7px;
-}
-
-.mx_RoomSearch .mx_RoomSearch_input {
- border: none !important;
- -webkit-box-flex: 1 !important;
- -ms-flex: 1 !important;
- flex: 1 !important;
- color: #2e2f32 !important;
- padding: 0;
- height: 100%;
- width: 100%;
- font-size: 1.2rem;
- line-height: 1.6rem;
-}
-
-.mx_RoomSearch
- .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-webkit-input-placeholder {
- color: #8d99a5 !important;
-}
-
-.mx_RoomSearch
- .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-moz-placeholder {
- color: #8d99a5 !important;
-}
-
-.mx_RoomSearch
- .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded):-ms-input-placeholder {
- color: #8d99a5 !important;
-}
-
-.mx_RoomSearch
- .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::-ms-input-placeholder {
- color: #8d99a5 !important;
-}
-
-.mx_RoomSearch
- .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::placeholder {
- color: #8d99a5 !important;
-}
-
-.mx_RoomSearch.mx_RoomSearch_hasQuery {
- border-color: #737d8c;
-}
-
-.mx_RoomSearch.mx_RoomSearch_focused {
- -webkit-box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
- box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
- border-color: transparent;
-}
-
-.mx_RoomSearch.mx_RoomSearch_focused,
-.mx_RoomSearch.mx_RoomSearch_hasQuery {
- background-color: #fff;
-}
-
-.mx_RoomSearch.mx_RoomSearch_focused .mx_RoomSearch_clearButton,
-.mx_RoomSearch.mx_RoomSearch_hasQuery .mx_RoomSearch_clearButton {
- width: 16px;
- height: 16px;
- -webkit-mask-image: url(../../img/element-icons/roomlist/search-clear.6164d97.svg);
- mask-image: url(../../img/element-icons/roomlist/search-clear.6164d97.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #737d8c;
- margin-right: 8px;
-}
-
-.mx_RoomSearch .mx_RoomSearch_clearButton {
- width: 0;
- height: 0;
-}
-
-.mx_RoomSearch.mx_RoomSearch_minimized {
- border-radius: 32px;
- height: auto;
- width: auto;
- padding: 8px;
-}
-
-.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_icon {
- margin-left: 0;
-}
-
-.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
- margin-left: 65px;
- min-height: 50px;
-}
-
-.mx_RoomStatusBar_typingIndicatorAvatars {
- width: 52px;
- margin-top: -1px;
- text-align: left;
-}
-
-.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
- margin-right: -12px;
- border: 1px solid #fff;
-}
-
-.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
- padding-left: 1px;
- padding-top: 1px;
-}
-
-.mx_RoomStatusBar_typingIndicatorRemaining {
- display: inline-block;
- color: #acacac;
- background-color: #ddd;
- border: 1px solid #fff;
- border-radius: 40px;
- width: 24px;
- height: 24px;
- line-height: 2.4rem;
- font-size: 0.8em;
- vertical-align: top;
- text-align: center;
- position: absolute;
-}
-
-.mx_RoomStatusBar_scrollDownIndicator {
- cursor: pointer;
- padding-left: 1px;
-}
-
-.mx_RoomStatusBar_unreadMessagesBar {
- padding-top: 10px;
- color: #ff4b55;
- cursor: pointer;
-}
-
-.mx_RoomStatusBar_connectionLostBar {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-top: 19px;
- min-height: 58px;
-}
-
-.mx_RoomStatusBar_unsentMessages > div[role="alert"] {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- min-height: 70px;
- margin: 12px;
- padding-left: 16px;
- background-color: #f3f8fd;
- border-radius: 4px;
-}
-
-.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge {
- margin-right: 12px;
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentBadge
- .mx_NotificationBadge {
- width: 24px !important;
- height: 24px !important;
- border-radius: 24px !important;
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentBadge
- .mx_NotificationBadge
- .mx_NotificationBadge_count {
- font-size: 1.6rem !important;
-}
-
-.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentTitle {
- color: #ff4b55;
- font-size: 1.5rem;
-}
-
-.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentDescription {
- font-size: 1.2rem;
-}
-
-.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- text-align: right;
- margin-right: 22px;
- color: #61708b;
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentButtonBar
- .mx_AccessibleButton {
- padding: 5px 10px 5px 30px;
- display: inline-block;
- position: relative;
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentButtonBar
- .mx_AccessibleButton:nth-child(2) {
- border-left: 1px solid #e3e8f0;
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentButtonBar
- .mx_AccessibleButton:before {
- content: "";
- position: absolute;
- left: 10px;
- background-color: #61708b;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- width: 18px;
- height: 18px;
- top: 50%;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentButtonBar
- .mx_AccessibleButton.mx_RoomStatusBar_unsentCancelAllBtn:before {
- -webkit-mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
- mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentButtonBar
- .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn {
- padding-left: 34px;
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentButtonBar
- .mx_AccessibleButton.mx_RoomStatusBar_unsentResendAllBtn:before {
- -webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
- mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentButtonBar
- .mx_InlineSpinner {
- vertical-align: middle;
- margin-right: 5px;
- top: 1px;
-}
-
-.mx_RoomStatusBar_unsentMessages
- .mx_RoomStatusBar_unsentButtonBar
- .mx_InlineSpinner
- + span {
- margin-right: 10px;
-}
-
-.mx_RoomStatusBar_connectionLostBar img {
- padding-left: 10px;
- padding-right: 10px;
- vertical-align: middle;
- float: left;
-}
-
-.mx_RoomStatusBar_connectionLostBar_title {
- color: #ff4b55;
-}
-
-.mx_RoomStatusBar_connectionLostBar_desc {
- color: #2e2f32;
- font-size: 1.3rem;
- opacity: 0.5;
- padding-bottom: 20px;
-}
-
-.mx_RoomStatusBar_resend_link {
- color: #2e2f32 !important;
- text-decoration: underline !important;
- cursor: pointer;
-}
-
-.mx_RoomStatusBar_typingBar {
- height: 50px;
- line-height: 5rem;
- color: #2e2f32;
- opacity: 0.5;
- overflow-y: hidden;
- display: block;
-}
-
-.mx_MatrixChat_useCompactLayout
- .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
- min-height: 40px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_indicator {
- margin-top: 10px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_typingBar {
- height: 40px;
- line-height: 4rem;
-}
-
-.mx_RoomView {
- word-wrap: break-word;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-@-webkit-keyframes mx_RoomView_fileDropTarget_animation {
- 0% {
- opacity: 0;
- }
- to {
- opacity: 0.95;
- }
-}
-
-@keyframes mx_RoomView_fileDropTarget_animation {
- 0% {
- opacity: 0;
- }
- to {
- opacity: 0.95;
- }
-}
-
-.mx_RoomView_fileDropTarget {
- min-width: 0;
- width: 100%;
- height: 100%;
- font-size: 1.8rem;
- text-align: center;
- pointer-events: none;
- background-color: #fff;
- opacity: 0.95;
- position: absolute;
- z-index: 3000;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-animation: mx_RoomView_fileDropTarget_animation;
- animation: mx_RoomView_fileDropTarget_animation;
- -webkit-animation-duration: 0.5s;
- animation-duration: 0.5s;
-}
-
-@-webkit-keyframes mx_RoomView_fileDropTarget_image_animation {
- 0% {
- -webkit-transform: scaleX(0);
- transform: scaleX(0);
- }
- to {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
-}
-
-@keyframes mx_RoomView_fileDropTarget_image_animation {
- 0% {
- -webkit-transform: scaleX(0);
- transform: scaleX(0);
- }
- to {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
-}
-
-.mx_RoomView_fileDropTarget_image {
- width: 32px;
- -webkit-animation: mx_RoomView_fileDropTarget_image_animation;
- animation: mx_RoomView_fileDropTarget_image_animation;
- -webkit-animation-duration: 0.5s;
- animation-duration: 0.5s;
- margin-bottom: 16px;
-}
-
-.mx_RoomView_auxPanel {
- min-width: 0;
- width: 100%;
- margin: 0 auto;
- overflow: auto;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
-}
-
-.mx_RoomView_auxPanel_fullHeight {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 3000;
- background-color: #fff;
-}
-
-.mx_RoomView_auxPanel_hiddenHighlights {
- border-bottom: 1px solid transparent;
- padding: 10px 26px;
- color: #ff4b55;
- cursor: pointer;
-}
-
-.mx_RoomView_auxPanel_apps {
- max-width: 1920px !important;
-}
-
-.mx_RoomView .mx_MainSplit,
-.mx_RoomView_messagePanel {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
-}
-
-.mx_RoomView_messagePanel {
- width: 100%;
- overflow-y: auto;
- overflow-anchor: none;
-}
-
-.mx_RoomView_messagePanelSearchSpinner {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background-image: url(../../img/typing-indicator-2x.0eb9f0e.gif);
- background-position: center 367px;
- background-size: 25px;
- background-repeat: no-repeat;
- position: relative;
-}
-
-.mx_RoomView_messagePanelSearchSpinner:before {
- background-color: #888;
- -webkit-mask: url(../../img/feather-customised/search-input.044bfa7.svg);
- mask: url(../../img/feather-customised/search-input.044bfa7.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 50px;
- mask-size: 50px;
- content: "";
- position: absolute;
- top: 286px;
- left: 0;
- right: 0;
- height: 50px;
-}
-
-.mx_RoomView_body {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- min-width: 0;
-}
-
-.mx_RoomView_body .mx_RoomView_messagePanel,
-.mx_RoomView_body .mx_RoomView_messagePanelSearchSpinner,
-.mx_RoomView_body .mx_RoomView_messagePanelSpinner {
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
-}
-
-.mx_RoomView_body .mx_RoomView_timeline {
- position: relative;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- contain: content;
-}
-
-.mx_RoomView_statusArea {
- width: 100%;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- max-height: 0;
- background-color: #fff;
- z-index: 1000;
- overflow: hidden;
- -webkit-transition: all 0.2s ease-out;
- transition: all 0.2s ease-out;
-}
-
-.mx_RoomView_statusArea_expanded {
- max-height: 100px;
-}
-
-.mx_RoomView_statusAreaBox {
- margin: auto;
- min-height: 50px;
-}
-
-.mx_RoomView_statusAreaBox_line {
- margin-left: 65px;
- border-top: 1px solid transparent;
- height: 1px;
-}
-
-.mx_RoomView_messageListWrapper {
- min-height: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
-}
-
-.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
-}
-
-.mx_RoomView_searchResultsPanel a {
- text-decoration: none;
- color: inherit;
-}
-
-.mx_RoomView_empty {
- font-size: 1.3rem;
- padding: 0 24px;
- margin-right: 30px;
- text-align: center;
- margin-bottom: 80px;
-}
-
-.mx_RoomView_MessageList {
- list-style-type: none;
- padding: 18px;
- margin: 0;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_RoomView_MessageList li {
- clear: both;
-}
-
-li.mx_RoomView_myReadMarker_container {
- height: 0;
- margin: 0;
- padding: 0;
- border: 0;
-}
-
-hr.mx_RoomView_myReadMarker {
- border-top: 1px solid #0dbd8b;
- border-bottom: 1px solid #0dbd8b;
- margin-top: 0;
- position: relative;
- top: -1px;
- z-index: 1;
- will-change: width;
- -webkit-transition: width easeinsine 0.4s 1s, opacity easeinsine 0.4s 1s;
- transition: width easeinsine 0.4s 1s, opacity easeinsine 0.4s 1s;
- width: 99%;
- opacity: 1;
-}
-
-.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
- background-color: #fff;
-}
-
-.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
- color: #fff;
- opacity: 1;
-}
-
-.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line {
- margin-top: 2px;
- border: none;
- height: 0;
-}
-
-.mx_RoomView_inCall .mx_MessageComposer_wrapper {
- border-top: 2px hidden;
- padding-top: 1px;
-}
-
-.mx_RoomView_voipChevron {
- position: absolute;
- bottom: -11px;
- right: 11px;
-}
-
-.mx_RoomView_voipButton {
- float: right;
- margin-right: 13px;
- margin-top: 13px;
- cursor: pointer;
-}
-
-.mx_RoomView_voipButton object {
- pointer-events: none;
-}
-
-.mx_RoomView .mx_MessageComposer {
- width: 100%;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- margin-right: 2px;
-}
-
-.mx_RoomView_ongoingConfCallNotification {
- width: 100%;
- text-align: center;
- background-color: #ff4b55;
- color: #fff;
- font-weight: 700;
- padding: 6px 0;
- cursor: pointer;
-}
-
-.mx_RoomView_ongoingConfCallNotification a {
- color: #fff !important;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList {
- margin-bottom: 4px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_RoomView_statusAreaBox {
- min-height: 42px;
-}
-
-.mx_ScrollPanel .mx_RoomView_MessageList {
- position: relative;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- content-visibility: auto;
- contain-intrinsic-size: 50px;
-}
-
-.mx_SearchBox {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- min-width: 0;
-}
-
-.mx_SearchBox.mx_SearchBox_blurred:not(:hover) {
- background-color: transparent;
-}
-
-.mx_SearchBox .mx_SearchBox_closeButton {
- cursor: pointer;
- background-image: url(../../img/icons-close.11ff07c.svg);
- background-repeat: no-repeat;
- width: 16px;
- height: 16px;
- background-position: 50%;
- padding: 9px;
-}
-
-.mx_SpacePanel {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- background-color: hsla(0, 0%, 91%, 0.77);
- padding: 0;
- margin: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_SpacePanel .mx_SpacePanel_spaceTreeWrapper {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- padding: 8px 8px 16px 0;
-}
-
-.mx_SpacePanel .mx_SpacePanel_toggleCollapse {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- width: 40px;
- height: 40px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 32px;
- mask-size: 32px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- margin-left: 16px;
- margin-bottom: 12px;
- background-color: #8d99a5;
- -webkit-mask-image: url(../../img/element-icons/expand-space-panel.e6f74b9.svg);
- mask-image: url(../../img/element-icons/expand-space-panel.e6f74b9.svg);
-}
-
-.mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded {
- -webkit-transform: scaleX(-1);
- transform: scaleX(-1);
-}
-
-.mx_SpacePanel ul {
- margin: 0;
- list-style: none;
- padding: 0;
-}
-
-.mx_SpacePanel ul > .mx_SpaceItem {
- padding-left: 16px;
-}
-
-.mx_SpacePanel .mx_SpaceButton_toggleCollapse {
- cursor: pointer;
-}
-
-.mx_SpacePanel .mx_SpaceItem_dragging .mx_SpaceButton_toggleCollapse {
- visibility: hidden;
-}
-
-.mx_SpacePanel .mx_SpaceTreeLevel {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- max-width: 250px;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_SpacePanel .mx_SpaceItem {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -ms-flex-flow: wrap;
- flex-flow: wrap;
-}
-
-.mx_SpacePanel .mx_SpaceItem.mx_SpaceItem_narrow {
- -ms-flex-item-align: baseline;
- align-self: baseline;
-}
-
-.mx_SpacePanel
- .mx_SpaceItem.collapsed
- > .mx_SpaceButton
- > .mx_SpaceButton_toggleCollapse {
- -webkit-transform: rotate(-90deg);
- transform: rotate(-90deg);
-}
-
-.mx_SpacePanel .mx_SpaceItem.collapsed > .mx_SpaceTreeLevel {
- display: none;
-}
-
-.mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
- margin-left: 16px;
- min-width: 40px;
-}
-
-.mx_SpacePanel .mx_SpaceButton {
- border-radius: 8px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding: 4px 4px 4px 0;
- width: 100%;
-}
-
-.mx_SpacePanel
- .mx_SpaceButton.mx_SpaceButton_active:not(.mx_SpaceButton_narrow)
- .mx_SpaceButton_selectionWrapper {
- background-color: #fff;
-}
-
-.mx_SpacePanel
- .mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow
- .mx_SpaceButton_selectionWrapper {
- padding: 1px;
- border: 3px solid #737d8c;
-}
-
-.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper {
- position: relative;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- border-radius: 12px;
- padding: 4px;
-}
-
-.mx_SpacePanel
- .mx_SpaceButton:not(.mx_SpaceButton_narrow)
- .mx_SpaceButton_selectionWrapper {
- width: 100%;
- padding-right: 16px;
- overflow: hidden;
-}
-
-.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- margin-left: 8px;
- white-space: nowrap;
- display: block;
- text-overflow: ellipsis;
- overflow: hidden;
- padding-right: 8px;
- font-size: 1.4rem;
- line-height: 1.8rem;
-}
-
-.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse {
- width: 16px;
- height: 20px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 20px;
- mask-size: 20px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #8d99a5;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon {
- width: 32px;
- min-width: 32px;
- height: 32px;
- border-radius: 8px;
- position: relative;
-}
-
-.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon:before {
- position: absolute;
- content: "";
- width: 32px;
- height: 32px;
- top: 0;
- left: 0;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 18px;
- mask-size: 18px;
-}
-
-.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon {
- background-color: #fff;
-}
-
-.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon:before {
- background-color: #3f3d3d;
- -webkit-mask-image: url(../../img/element-icons/home.b706c0e.svg);
- mask-image: url(../../img/element-icons/home.b706c0e.svg);
-}
-
-.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon {
- background-color: #0dbd8b;
- -webkit-transition: all 0.1s ease-in-out;
- transition: all 0.1s ease-in-out;
-}
-
-.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon:before {
- background-color: #fff;
- -webkit-mask-image: url(../../img/element-icons/plus.62cc275.svg);
- mask-image: url(../../img/element-icons/plus.62cc275.svg);
- -webkit-transition: all 0.2s ease-in-out;
- transition: all 0.2s ease-in-out;
-}
-
-.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon {
- background-color: #c1c6cd;
-}
-
-.mx_SpacePanel
- .mx_SpaceButton.mx_SpaceButton_newCancel
- .mx_SpaceButton_icon:before {
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
-}
-
-.mx_SpacePanel .mx_SpaceButton .mx_BaseAvatar_image {
- border-radius: 8px;
-}
-
-.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton {
- width: 20px;
- min-width: 20px;
- height: 20px;
- margin-top: auto;
- margin-bottom: auto;
- display: none;
- position: absolute;
- right: 4px;
-}
-
-.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton:before {
- top: 2px;
- left: 2px;
- content: "";
- width: 16px;
- height: 16px;
- position: absolute;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
- mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
- background: #2e2f32;
-}
-
-.mx_SpacePanel .mx_SpacePanel_badgeContainer {
- position: absolute;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge {
- margin: 0 2px;
-}
-
-.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot {
- margin: 0 7px;
-}
-
-.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpacePanel_badgeContainer {
- right: 0;
- top: 0;
-}
-
-.mx_SpacePanel.collapsed
- .mx_SpaceButton
- .mx_SpacePanel_badgeContainer
- .mx_NotificationBadge {
- background-clip: padding-box;
-}
-
-.mx_SpacePanel.collapsed
- .mx_SpaceButton
- .mx_SpacePanel_badgeContainer
- .mx_NotificationBadge_dot {
- margin: 0 -1px 0 0;
- border: 3px solid hsla(0, 0%, 91%, 0.77);
-}
-
-.mx_SpacePanel.collapsed
- .mx_SpaceButton
- .mx_SpacePanel_badgeContainer
- .mx_NotificationBadge_2char,
-.mx_SpacePanel.collapsed
- .mx_SpaceButton
- .mx_SpacePanel_badgeContainer
- .mx_NotificationBadge_3char {
- margin: -5px -5px 0 0;
- border: 2px solid hsla(0, 0%, 91%, 0.77);
-}
-
-.mx_SpacePanel.collapsed
- .mx_SpaceButton.mx_SpaceButton_active
- .mx_SpacePanel_badgeContainer {
- right: -3px;
- top: -3px;
-}
-
-.mx_SpacePanel:not(.collapsed) .mx_SpacePanel_badgeContainer {
- position: absolute;
- right: 4px;
-}
-
-.mx_SpacePanel:not(.collapsed)
- .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
- .mx_SpacePanel_badgeContainer,
-.mx_SpacePanel:not(.collapsed)
- .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
- .mx_SpacePanel_badgeContainer,
-.mx_SpacePanel:not(.collapsed)
- .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
- .mx_SpacePanel_badgeContainer {
- width: 0;
- height: 0;
- display: none;
-}
-
-.mx_SpacePanel:not(.collapsed)
- .mx_SpaceButton:focus-within:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
- .mx_SpaceButton_menuButton,
-.mx_SpacePanel:not(.collapsed)
- .mx_SpaceButton:hover:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
- .mx_SpaceButton_menuButton,
-.mx_SpacePanel:not(.collapsed)
- .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite)
- .mx_SpaceButton_menuButton {
- display: block;
-}
-
-.mx_SpacePanel > .mx_AutoHideScrollbar > .mx_SpaceButton,
-.mx_SpacePanel
- > .mx_AutoHideScrollbar
- > .mx_SpaceButton.mx_SpaceButton_active:before {
- height: 32px;
-}
-
-.mx_SpacePanel > .mx_AutoHideScrollbar > ul {
- padding-left: 0;
-}
-
-.mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_header {
- margin: 12px 16px;
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 1.8rem;
-}
-
-.mx_SpacePanel_contextMenu
- .mx_IconizedContextMenu_optionList
- .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton {
- color: #0dbd8b;
-}
-
-.mx_SpacePanel_contextMenu
- .mx_IconizedContextMenu_optionList
- .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton
- .mx_SpacePanel_iconInvite:before {
- background-color: #0dbd8b;
- -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
-}
-
-.mx_SpacePanel_contextMenu .mx_SpacePanel_iconSettings:before {
- -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
- mask-image: url(../../img/element-icons/settings.6b381af.svg);
-}
-
-.mx_SpacePanel_contextMenu .mx_SpacePanel_iconLeave:before {
- -webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
- mask-image: url(../../img/element-icons/leave.bb917e7.svg);
-}
-
-.mx_SpacePanel_contextMenu .mx_SpacePanel_iconMembers:before {
- -webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
- mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
-}
-
-.mx_SpacePanel_contextMenu .mx_SpacePanel_iconPlus:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
- mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
-}
-
-.mx_SpacePanel_contextMenu .mx_SpacePanel_iconHash:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
- mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
-}
-
-.mx_SpacePanel_contextMenu .mx_SpacePanel_iconExplore:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
- mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
-}
-
-.mx_SpacePanel_sharePublicSpace {
- margin: 0;
-}
-
-.mx_SpaceRoomDirectory_dialogWrapper > .mx_Dialog {
- max-width: 960px;
- height: 100%;
-}
-
-.mx_SpaceRoomDirectory {
- height: 100%;
- margin-bottom: 12px;
- color: #2e2f32;
- word-break: break-word;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_SpaceRoomDirectory,
-.mx_SpaceRoomDirectory .mx_Dialog_title,
-.mx_SpaceRoomView_landing .mx_Dialog_title {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar,
-.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar {
- margin-right: 12px;
- -ms-flex-item-align: center;
- align-self: center;
-}
-
-.mx_SpaceRoomDirectory .mx_Dialog_title .mx_BaseAvatar_image,
-.mx_SpaceRoomView_landing .mx_Dialog_title .mx_BaseAvatar_image {
- border-radius: 8px;
-}
-
-.mx_SpaceRoomDirectory .mx_Dialog_title > div > h1,
-.mx_SpaceRoomView_landing .mx_Dialog_title > div > h1 {
- font-weight: 600;
- font-size: 1.8rem;
- line-height: 2.2rem;
- margin: 0;
-}
-
-.mx_SpaceRoomDirectory .mx_Dialog_title > div > div,
-.mx_SpaceRoomView_landing .mx_Dialog_title > div > div {
- font-weight: 400;
- color: #737d8c;
- font-size: 1.5rem;
- line-height: 2.4rem;
-}
-
-.mx_SpaceRoomDirectory .mx_AccessibleButton_kind_link,
-.mx_SpaceRoomView_landing .mx_AccessibleButton_kind_link {
- padding: 0;
-}
-
-.mx_SpaceRoomDirectory .mx_SearchBox,
-.mx_SpaceRoomView_landing .mx_SearchBox {
- margin: 24px 0 16px;
-}
-
-.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults,
-.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults {
- text-align: center;
-}
-
-.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_noResults > div,
-.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_noResults > div {
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #737d8c;
-}
-
-.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader,
-.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- min-height: 32px;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #2e2f32;
-}
-
-.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader .mx_AccessibleButton,
-.mx_SpaceRoomView_landing
- .mx_SpaceRoomDirectory_listHeader
- .mx_AccessibleButton {
- padding: 4px 12px;
- font-weight: 400;
-}
-
-.mx_SpaceRoomDirectory
- .mx_SpaceRoomDirectory_listHeader
- .mx_AccessibleButton
- + .mx_AccessibleButton,
-.mx_SpaceRoomView_landing
- .mx_SpaceRoomDirectory_listHeader
- .mx_AccessibleButton
- + .mx_AccessibleButton {
- margin-left: 16px;
-}
-
-.mx_SpaceRoomDirectory
- .mx_SpaceRoomDirectory_listHeader
- .mx_AccessibleButton_kind_danger_outline,
-.mx_SpaceRoomDirectory
- .mx_SpaceRoomDirectory_listHeader
- .mx_AccessibleButton_kind_primary_outline,
-.mx_SpaceRoomView_landing
- .mx_SpaceRoomDirectory_listHeader
- .mx_AccessibleButton_kind_danger_outline,
-.mx_SpaceRoomView_landing
- .mx_SpaceRoomDirectory_listHeader
- .mx_AccessibleButton_kind_primary_outline {
- padding: 3px 12px;
-}
-
-.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_listHeader > span,
-.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_listHeader > span {
- margin-left: auto;
-}
-
-.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error,
-.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error {
- position: relative;
- font-weight: 600;
- color: #ff4b55;
- font-size: 1.5rem;
- line-height: 1.8rem;
- margin: 20px auto 12px;
- padding-left: 24px;
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
-}
-
-.mx_SpaceRoomDirectory .mx_SpaceRoomDirectory_error:before,
-.mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_error:before {
- content: "";
- position: absolute;
- height: 16px;
- width: 16px;
- left: 0;
- background-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
-}
-
-.mx_SpaceRoomDirectory_list {
- margin-top: 16px;
- padding-bottom: 40px;
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount > h3 {
- display: inline;
- font-weight: 600;
- font-size: 1.8rem;
- line-height: 2.2rem;
- color: #2e2f32;
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomCount > span {
- margin-left: 8px;
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #737d8c;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_subspace
- .mx_BaseAvatar_image {
- border-radius: 8px;
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle {
- position: absolute;
- left: -1px;
- top: 10px;
- height: 16px;
- width: 16px;
- border-radius: 4px;
- background-color: #fff;
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_toggle:before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- height: 16px;
- width: 16px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #8d99a5;
- -webkit-mask-size: 16px;
- mask-size: 16px;
- -webkit-transform: rotate(270deg);
- transform: rotate(270deg);
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_subspace_toggle.mx_SpaceRoomDirectory_subspace_toggle_shown:before {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children {
- position: relative;
- padding-left: 12px;
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile {
- position: relative;
- padding: 8px 16px;
- border-radius: 8px;
- min-height: 56px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- display: grid;
- grid-template-columns: 20px auto -webkit-max-content;
- grid-template-columns: 20px auto max-content;
- grid-column-gap: 8px;
- grid-row-gap: 6px;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile .mx_BaseAvatar {
- grid-row: 1;
- grid-column: 1;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_roomTile_name {
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 1.8rem;
- grid-row: 1;
- grid-column: 2;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_roomTile_name
- .mx_InfoTooltip {
- display: inline;
- margin-left: 12px;
- color: #8d99a5;
- font-size: 1.2rem;
- line-height: 1.5rem;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_roomTile_name
- .mx_InfoTooltip
- .mx_InfoTooltip_icon {
- margin-right: 4px;
- position: relative;
- vertical-align: text-top;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_roomTile_name
- .mx_InfoTooltip
- .mx_InfoTooltip_icon:before {
- position: absolute;
- top: 0;
- left: 0;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_roomTile_info {
- font-size: 1.4rem;
- line-height: 1.8rem;
- color: #737d8c;
- grid-row: 2;
- grid-column: 1/3;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_actions {
- text-align: right;
- margin-left: 20px;
- grid-column: 3;
- grid-row: 1/3;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_actions
- .mx_AccessibleButton {
- line-height: 2.4rem;
- padding: 4px 16px;
- display: inline-block;
- visibility: hidden;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_actions
- .mx_AccessibleButton_kind_danger_outline,
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_actions
- .mx_AccessibleButton_kind_primary_outline {
- padding: 3px 16px;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile
- .mx_SpaceRoomDirectory_actions
- .mx_Checkbox {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- vertical-align: middle;
- margin-left: 12px;
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:hover {
- background-color: hsla(0, 0%, 91%, 0.77);
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_roomTile:hover
- .mx_AccessibleButton {
- visibility: visible;
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_roomTile:before,
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_subspace_children:before {
- content: "";
- position: absolute;
- background-color: hsla(0, 0%, 91%, 0.77);
- width: 1px;
- height: 100%;
- left: 6px;
- top: 0;
-}
-
-.mx_SpaceRoomDirectory_list
- .mx_SpaceRoomDirectory_actions
- .mx_SpaceRoomDirectory_actionsText {
- font-weight: 400;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #737d8c;
-}
-
-.mx_SpaceRoomDirectory_list > hr {
- border: none;
- height: 1px;
- background-color: rgba(141, 151, 165, 0.2);
- margin: 20px 0;
-}
-
-.mx_SpaceRoomDirectory_list .mx_SpaceRoomDirectory_createRoom {
- display: block;
- margin: 16px auto 0;
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
-}
-
-.mx_SpaceRoomView .mx_MainSplit > div:first-child {
- padding: 80px 60px;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- max-height: 100%;
- overflow-y: auto;
-}
-
-.mx_SpaceRoomView .mx_MainSplit > div:first-child h1 {
- margin: 0;
- font-size: 2.4rem;
- font-weight: 600;
- color: #2e2f32;
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
-}
-
-.mx_SpaceRoomView
- .mx_MainSplit
- > div:first-child
- .mx_SpaceRoomView_description {
- font-size: 1.5rem;
- color: #737d8c;
- margin-top: 12px;
- margin-bottom: 24px;
- max-width: 428px;
-}
-
-.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_AddExistingToSpace {
- max-width: 428px;
-}
-
-.mx_SpaceRoomView
- .mx_MainSplit
- > div:first-child
- .mx_AddExistingToSpace
- .mx_AddExistingToSpace_content {
- height: calc(100vh - 360px);
- max-height: 400px;
-}
-
-.mx_SpaceRoomView
- .mx_MainSplit
- > div:first-child:not(.mx_SpaceRoomView_landing)
- .mx_SpaceFeedbackPrompt {
- width: 428px;
-}
-
-.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_buttons {
- display: block;
- margin-top: 44px;
- width: 428px;
- text-align: right;
-}
-
-.mx_SpaceRoomView
- .mx_MainSplit
- > div:first-child
- .mx_SpaceRoomView_buttons
- .mx_AccessibleButton_hasKind {
- padding: 8px 22px;
- margin-left: 16px;
-}
-
-.mx_SpaceRoomView
- .mx_MainSplit
- > div:first-child
- .mx_SpaceRoomView_buttons
- input.mx_AccessibleButton {
- border: none;
-}
-
-.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_Field {
- max-width: 428px;
-}
-
-.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_Field + .mx_Field {
- margin-top: 28px;
-}
-
-.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_errorText {
- font-weight: 600;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #ff4b55;
- margin-bottom: 28px;
-}
-
-.mx_SpaceRoomView
- .mx_MainSplit
- > div:first-child
- .mx_AccessibleButton_disabled {
- cursor: not-allowed;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_preview {
- padding: 32px 24px !important;
- margin: auto;
- max-width: 480px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- -webkit-box-shadow: 2px 15px 30px rgba(0, 0, 0, 0.48);
- box-shadow: 2px 15px 30px rgba(0, 0, 0, 0.48);
- border-radius: 8px;
- position: relative;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_BetaCard_betaPill {
- position: absolute;
- right: 24px;
- top: 32px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- .mx_SpaceRoomView_preview_spaceBetaPrompt {
- font-weight: 600;
- font-size: 1.4rem;
- line-height: 2.4rem;
- color: #2e2f32;
- margin-top: 24px;
- position: relative;
- padding-left: 24px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- .mx_SpaceRoomView_preview_spaceBetaPrompt
- .mx_AccessibleButton_kind_link {
- display: inline;
- padding: 0;
- font-size: inherit;
- line-height: inherit;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- .mx_SpaceRoomView_preview_spaceBetaPrompt:before {
- content: "";
- position: absolute;
- height: 2.4rem;
- width: 20px;
- left: 0;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- background-color: #737d8c;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_inviter {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- margin-bottom: 20px;
- font-size: 1.5rem;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- .mx_SpaceRoomView_preview_inviter
- > div {
- margin-left: 8px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- .mx_SpaceRoomView_preview_inviter
- > div
- .mx_SpaceRoomView_preview_inviter_name {
- line-height: 1.8rem;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- .mx_SpaceRoomView_preview_inviter
- > div
- .mx_SpaceRoomView_preview_inviter_mxid {
- line-height: 2.4rem;
- color: #737d8c;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- > .mx_BaseAvatar
- > .mx_BaseAvatar_image,
-.mx_SpaceRoomView .mx_SpaceRoomView_preview > .mx_BaseAvatar_image {
- border-radius: 12px;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_preview h1.mx_SpaceRoomView_preview_name {
- margin: 20px 0 !important;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_preview .mx_SpaceRoomView_preview_topic {
- font-size: 1.4rem;
- line-height: 2.2rem;
- color: #737d8c;
- margin: 20px 0;
- max-height: 160px;
- overflow-y: auto;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- .mx_SpaceRoomView_preview_joinButtons {
- margin-top: 20px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- .mx_SpaceRoomView_preview_joinButtons
- .mx_AccessibleButton {
- width: 200px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- padding: 14px 0;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_preview
- .mx_SpaceRoomView_preview_joinButtons
- .mx_AccessibleButton
- + .mx_AccessibleButton {
- margin-left: 20px;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_landing {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- > .mx_BaseAvatar
- > .mx_BaseAvatar_image,
-.mx_SpaceRoomView .mx_SpaceRoomView_landing > .mx_BaseAvatar_image {
- border-radius: 12px;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name {
- margin: 24px 0 16px;
- font-size: 1.5rem;
- color: #737d8c;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_name
- > span {
- display: inline-block;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_name
- .mx_SpaceRoomView_landing_nameRow {
- margin-top: 12px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_name
- .mx_SpaceRoomView_landing_nameRow
- > h1 {
- display: inline-block;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_name
- .mx_SpaceRoomView_landing_inviter
- .mx_BaseAvatar {
- margin-right: 4px;
- vertical-align: middle;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_info {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_info
- .mx_SpaceRoomView_info {
- display: inline-block;
- margin: 0 auto 0 0;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_info
- .mx_FacePile {
- display: inline-block;
- margin-right: 12px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_info
- .mx_FacePile
- .mx_FacePile_faces {
- cursor: pointer;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_info
- .mx_SpaceRoomView_landing_inviteButton {
- position: relative;
- padding: 4px 18px 4px 40px;
- line-height: 2.4rem;
- height: -webkit-min-content;
- height: -moz-min-content;
- height: min-content;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_info
- .mx_SpaceRoomView_landing_inviteButton:before {
- position: absolute;
- content: "";
- left: 8px;
- height: 16px;
- width: 16px;
- background: #fff;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 16px;
- mask-size: 16px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_info
- .mx_SpaceRoomView_landing_settingsButton {
- position: relative;
- margin-left: 16px;
- width: 24px;
- height: 24px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_landing
- .mx_SpaceRoomView_landing_info
- .mx_SpaceRoomView_landing_settingsButton:before {
- position: absolute;
- content: "";
- left: 0;
- top: 0;
- height: 24px;
- width: 24px;
- background: #8d99a5;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
- mask-image: url(../../img/element-icons/settings.6b381af.svg);
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_topic {
- font-size: 1.5rem;
- margin-top: 12px;
- margin-bottom: 16px;
- white-space: pre-wrap;
- word-wrap: break-word;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_landing > hr {
- border: none;
- height: 1px;
- background-color: hsla(0, 0%, 91%, 0.77);
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SearchBox {
- margin: 0 0 20px;
- -webkit-box-flex: 0;
- -ms-flex: 0;
- flex: 0;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt {
- margin-bottom: 16px;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceFeedbackPrompt + hr {
- display: none;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomDirectory_list {
- display: contents;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton {
- position: relative;
- padding: 16px 32px 16px 72px;
- width: 432px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-radius: 8px;
- border: 1px solid #e7e7e7;
- font-size: 1.5rem;
- margin: 20px 0;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton > h3 {
- font-weight: 600;
- margin: 0 0 4px;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton > span {
- color: #737d8c;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:before {
- position: absolute;
- content: "";
- width: 32px;
- height: 32px;
- top: 24px;
- left: 20px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 24px;
- mask-size: 24px;
- background-color: #8d99a5;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:hover {
- border-color: #0dbd8b;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_privateScope
- > .mx_AccessibleButton:hover:before {
- background-color: #0dbd8b;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_privateScope
- > .mx_AccessibleButton:hover
- > span {
- color: #2e2f32;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_privateScope
- .mx_SpaceRoomView_privateScope_justMeButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
- mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_privateScope
- .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton:before {
- -webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
- mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_betaWarning {
- padding: 12px 12px 12px 54px;
- position: relative;
- font-size: 1.5rem;
- line-height: 2.4rem;
- width: 432px;
- border-radius: 8px;
- background-color: #f7f7f7;
- color: #737d8c;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_betaWarning > h3 {
- font-weight: 600;
- font-size: inherit;
- line-height: inherit;
- margin: 0;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_betaWarning > p {
- font-size: inherit;
- line-height: inherit;
- margin: 0;
-}
-
-.mx_SpaceRoomView .mx_SpaceRoomView_betaWarning:before {
- -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- content: "";
- width: 20px;
- height: 20px;
- position: absolute;
- top: 14px;
- left: 14px;
- background-color: #737d8c;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_inviteTeammates
- .mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
- padding: 58px 16px 16px;
- position: relative;
- border-radius: 8px;
- background-color: #f3f8fd;
- max-width: 428px;
- margin: 20px 0 30px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_inviteTeammates
- .mx_SpaceRoomView_inviteTeammates_betaDisclaimer
- .mx_BetaCard_betaPill {
- position: absolute;
- left: 16px;
- top: 16px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_inviteTeammates
- .mx_SpaceRoomView_inviteTeammates_buttons {
- color: #737d8c;
- margin-top: 28px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_inviteTeammates
- .mx_SpaceRoomView_inviteTeammates_buttons
- .mx_AccessibleButton {
- position: relative;
- display: inline-block;
- padding-left: 32px;
- line-height: 24px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_inviteTeammates
- .mx_SpaceRoomView_inviteTeammates_buttons
- .mx_AccessibleButton:before {
- content: "";
- position: absolute;
- height: 24px;
- width: 24px;
- top: 0;
- left: 0;
- background-color: #737d8c;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_inviteTeammates
- .mx_SpaceRoomView_inviteTeammates_buttons
- .mx_AccessibleButton
- + .mx_AccessibleButton {
- margin-left: 32px;
-}
-
-.mx_SpaceRoomView
- .mx_SpaceRoomView_inviteTeammates
- .mx_SpaceRoomView_inviteTeammates_buttons
- .mx_SpaceRoomView_inviteTeammates_inviteDialogButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
-}
-
-.mx_SpaceRoomView_info {
- color: #737d8c;
- font-size: 1.5rem;
- line-height: 2.4rem;
- margin: 20px 0;
-}
-
-.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private,
-.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public {
- padding-left: 20px;
- position: relative;
-}
-
-.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before,
-.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before {
- position: absolute;
- content: "";
- width: 20px;
- height: 20px;
- top: 0;
- left: -2px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #8d99a5;
-}
-
-.mx_SpaceRoomView_info .mx_SpaceRoomView_info_public:before {
- -webkit-mask-size: 12px;
- mask-size: 12px;
- -webkit-mask-image: url(../../img/globe.8201f08.svg);
- mask-image: url(../../img/globe.8201f08.svg);
-}
-
-.mx_SpaceRoomView_info .mx_SpaceRoomView_info_private:before {
- -webkit-mask-size: 14px;
- mask-size: 14px;
- -webkit-mask-image: url(../../img/element-icons/lock.1f264bd.svg);
- mask-image: url(../../img/element-icons/lock.1f264bd.svg);
-}
-
-.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link {
- color: inherit;
- position: relative;
- padding-left: 16px;
-}
-
-.mx_SpaceRoomView_info .mx_AccessibleButton_kind_link:before {
- content: "·";
- position: absolute;
- left: 6px;
-}
-
-.mx_SpaceFeedbackPrompt {
- margin-top: 18px;
- margin-bottom: 12px;
-}
-
-.mx_SpaceFeedbackPrompt > hr {
- border: none;
- border-top: 1px solid #e7e7e7;
- margin-bottom: 12px;
-}
-
-.mx_SpaceFeedbackPrompt > div {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- font-size: 1.5rem;
- line-height: 2.4rem;
-}
-
-.mx_SpaceFeedbackPrompt > div > span {
- color: #737d8c;
- position: relative;
- padding-left: 32px;
- font-size: inherit;
- line-height: inherit;
- margin-right: auto;
-}
-
-.mx_SpaceFeedbackPrompt > div > span:before {
- content: "";
- position: absolute;
- left: 0;
- top: 2px;
- height: 20px;
- width: 20px;
- background-color: #737d8c;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_SpaceFeedbackPrompt > div .mx_AccessibleButton_kind_link {
- color: #0dbd8b;
- position: relative;
- padding: 0 0 0 24px;
- margin-left: 8px;
- font-size: inherit;
- line-height: inherit;
-}
-
-.mx_SpaceFeedbackPrompt > div .mx_AccessibleButton_kind_link:before {
- content: "";
- position: absolute;
- left: 0;
- height: 16px;
- width: 16px;
- background-color: #0dbd8b;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
- mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_TabbedView {
- padding: 0 0 0 16px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: 8px 0 0;
-}
-
-.mx_TabbedView,
-.mx_TabbedView_tabsOnLeft {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_TabbedView_tabsOnLeft {
- position: absolute;
-}
-
-.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels {
- width: 170px;
- max-width: 170px;
- position: fixed;
-}
-
-.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabPanel {
- margin-left: 240px;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active {
- background-color: #0dbd8b;
- color: #fff;
-}
-
-.mx_TabbedView_tabsOnLeft
- .mx_TabbedView_tabLabel_active
- .mx_TabbedView_maskedIcon:before {
- background-color: #fff;
-}
-
-.mx_TabbedView_tabsOnLeft .mx_TabbedView_maskedIcon {
- width: 16px;
- height: 16px;
- margin-left: 8px;
- margin-right: 16px;
-}
-
-.mx_TabbedView_tabsOnLeft .mx_TabbedView_maskedIcon:before {
- -webkit-mask-size: 16px;
- mask-size: 16px;
- width: 16px;
- height: 16px;
-}
-
-.mx_TabbedView_tabsOnTop {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabels {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-bottom: 8px;
-}
-
-.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel {
- padding-left: 0;
- padding-right: 52px;
-}
-
-.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel .mx_TabbedView_tabLabel_text {
- font-size: 15px;
- color: #8d99a5;
-}
-
-.mx_TabbedView_tabsOnTop .mx_TabbedView_tabPanel {
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
-}
-
-.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel_active,
-.mx_TabbedView_tabsOnTop
- .mx_TabbedView_tabLabel_active
- .mx_TabbedView_tabLabel_text {
- color: #0dbd8b;
-}
-
-.mx_TabbedView_tabsOnTop
- .mx_TabbedView_tabLabel_active
- .mx_TabbedView_maskedIcon:before {
- background-color: #0dbd8b;
-}
-
-.mx_TabbedView_tabsOnTop .mx_TabbedView_maskedIcon {
- width: 22px;
- height: 22px;
- margin-left: 0;
- margin-right: 8px;
-}
-
-.mx_TabbedView_tabsOnTop .mx_TabbedView_maskedIcon:before {
- -webkit-mask-size: 22px;
- mask-size: 22px;
- width: inherit;
- height: inherit;
-}
-
-.mx_TabbedView_tabLabels {
- color: #45474a;
-}
-
-.mx_TabbedView_tabLabel {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- vertical-align: text-top;
- cursor: pointer;
- padding: 8px 0;
- border-radius: 8px;
- font-size: 1.3rem;
- position: relative;
-}
-
-.mx_TabbedView_maskedIcon {
- display: inline-block;
-}
-
-.mx_TabbedView_maskedIcon:before {
- display: inline-block;
- background-color: #c1c6cd;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- content: "";
-}
-
-.mx_TabbedView_tabLabel_text {
- vertical-align: middle;
-}
-
-.mx_TabbedView_tabPanel {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_TabbedView_tabPanel,
-.mx_TabbedView_tabPanelContent {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- min-height: 0;
-}
-
-.mx_TabbedView_tabPanelContent {
- overflow: auto;
-}
-
-.mx_ToastContainer {
- position: absolute;
- top: 0;
- left: 70px;
- z-index: 101;
- padding: 4px;
- display: grid;
- grid-template-rows: 1fr 14px 6px;
-}
-
-.mx_ToastContainer.mx_ToastContainer_stacked:before {
- content: "";
- margin: 0 4px;
- grid-row: 2/4;
-}
-
-.mx_ToastContainer .mx_Toast_toast,
-.mx_ToastContainer.mx_ToastContainer_stacked:before {
- grid-column: 1;
- background-color: #f2f5f8;
- -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
- border-radius: 8px;
-}
-
-.mx_ToastContainer .mx_Toast_toast {
- grid-row: 1/3;
- color: #2e2f32;
- overflow: hidden;
- display: grid;
- grid-template-columns: 22px 1fr;
- grid-column-gap: 8px;
- -webkit-column-gap: 8px;
- -moz-column-gap: 8px;
- column-gap: 8px;
- grid-row-gap: 4px;
- row-gap: 4px;
- padding: 8px;
-}
-
-.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:after,
-.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:before {
- content: "";
- width: 22px;
- height: 22px;
- grid-column: 1;
- grid-row: 1;
- -webkit-mask-size: 100%;
- mask-size: 100%;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-size: 100%;
- background-repeat: no-repeat;
-}
-
-.mx_ToastContainer
- .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification:after {
- -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
- mask-image: url(../../img/e2e/normal.76f0c09.svg);
- background-color: #2e2f32;
-}
-
-.mx_ToastContainer
- .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:before {
- background-color: #fff;
- -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
- mask-image: url(../../img/e2e/normal.76f0c09.svg);
- -webkit-mask-size: 80%;
- mask-size: 80%;
-}
-
-.mx_ToastContainer
- .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:after {
- -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
- mask-image: url(../../img/e2e/warning.78bb264.svg);
- background-color: #ff4b55;
-}
-
-.mx_ToastContainer
- .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_secure_backup:after {
- -webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
- mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
- background-color: #2e2f32;
-}
-
-.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_body,
-.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_title {
- grid-column: 2;
-}
-
-.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) {
- padding-left: 12px;
-}
-
-.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) .mx_Toast_title {
- grid-column: 1/-1;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_description,
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_title {
- padding-right: 8px;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_title {
- width: 100%;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2 {
- grid-column: 1/3;
- grid-row: 1;
- margin: 0;
- font-size: 1.5rem;
- font-weight: 600;
- display: inline;
- width: auto;
- vertical-align: middle;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_title span {
- padding-left: 8px;
- float: right;
- font-size: 1.2rem;
- line-height: 2.2rem;
- color: #61708b;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_body {
- grid-column: 1/3;
- grid-row: 2;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons {
- float: right;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_AccessibleButton {
- min-width: 96px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_ToastContainer
- .mx_Toast_toast
- .mx_Toast_buttons
- .mx_AccessibleButton
- + .mx_AccessibleButton {
- margin-left: 5px;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_description {
- max-width: 272px;
- overflow: hidden;
- text-overflow: ellipsis;
- margin: 4px 0 11px;
- font-size: 1.2rem;
-}
-
-.mx_ToastContainer
- .mx_Toast_toast
- .mx_Toast_description
- .mx_AccessibleButton_kind_link {
- font-size: inherit;
- padding: 0;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_description a {
- text-decoration: none;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_detail {
- color: #737d8c;
-}
-
-.mx_ToastContainer .mx_Toast_toast .mx_Toast_deviceID {
- font-size: 1rem;
-}
-
-.mx_UploadBar {
- padding-left: 65px;
- position: relative;
-}
-
-.mx_UploadBar .mx_ProgressBar {
- width: calc(100% - 40px);
-}
-
-.mx_UploadBar_filename {
- margin-top: 5px;
- color: #61708b;
- position: relative;
- padding-left: 22px;
- font-size: 1.5rem;
- vertical-align: middle;
-}
-
-.mx_UploadBar_filename:before {
- content: "";
- height: 18px;
- width: 18px;
- left: 0;
- -webkit-mask-image: url(../../img/element-icons/upload.e2a53e0.svg);
- mask-image: url(../../img/element-icons/upload.e2a53e0.svg);
-}
-
-.mx_UploadBar_cancel,
-.mx_UploadBar_filename:before {
- position: absolute;
- top: 0;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #61708b;
-}
-
-.mx_UploadBar_cancel {
- right: 0;
- height: 16px;
- width: 16px;
- margin-right: 16px;
- -webkit-mask-image: url(../../img/icons-close.11ff07c.svg);
- mask-image: url(../../img/icons-close.11ff07c.svg);
-}
-
-.mx_UserMenu {
- padding-right: 6px;
-}
-
-.mx_UserMenu.mx_UserMenu_prototype {
- margin-bottom: 6px;
- padding-right: 0;
-}
-
-.mx_UserMenu.mx_UserMenu_prototype .mx_UserMenu_headerButtons {
- margin-right: 2px;
-}
-
-.mx_UserMenu.mx_UserMenu_prototype:after {
- content: "";
- border-bottom: 1px solid #2e2f32;
- opacity: 0.2;
- display: block;
- padding-top: 8px;
-}
-
-.mx_UserMenu .mx_UserMenu_headerButtons {
- width: 16px;
- height: 16px;
- position: relative;
- display: block;
-}
-
-.mx_UserMenu .mx_UserMenu_headerButtons:before {
- content: "";
- width: 16px;
- height: 16px;
- position: absolute;
- top: 0;
- left: 0;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #8d99a5;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_UserMenu .mx_UserMenu_row {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userAvatarContainer {
- position: relative;
- margin-right: 8px;
- height: 32px;
- padding: 3px 0;
-}
-
-.mx_UserMenu
- .mx_UserMenu_row
- .mx_UserMenu_userAvatarContainer
- .mx_UserMenu_userAvatar {
- border-radius: 32px;
- -o-object-fit: cover;
- object-fit: cover;
-}
-
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- min-width: 0;
-}
-
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName,
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_userName {
- display: block;
-}
-
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_doubleName .mx_UserMenu_subUserName {
- color: #61708b;
- font-size: 1.3rem;
- line-height: 1.8rem;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_userName {
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 2rem;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd {
- width: 24px;
- height: 24px;
- margin-right: 8px;
- position: relative;
-}
-
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd:before {
- content: "";
- position: absolute;
- width: 24px;
- height: 24px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #61708b;
-}
-
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_noisy:before {
- -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
- mask-image: url(../../img/element-icons/notifications.d298b39.svg);
-}
-
-.mx_UserMenu .mx_UserMenu_row .mx_UserMenu_dnd.mx_UserMenu_dnd_muted:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
- mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
-}
-
-.mx_UserMenu.mx_UserMenu_minimized {
- padding-right: 0;
-}
-
-.mx_UserMenu.mx_UserMenu_minimized .mx_UserMenu_userAvatarContainer {
- margin-right: 0;
-}
-
-.mx_UserMenu_contextMenu {
- width: 258px;
-}
-
-.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype {
- padding-bottom: 16px;
-}
-
-.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype
- .mx_UserMenu_contextMenu_header {
- padding-bottom: 0;
- padding-top: 16px;
-}
-
-.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype
- .mx_UserMenu_contextMenu_header:nth-child(n + 2) {
- padding-top: 8px;
-}
-
-.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype hr {
- width: 85%;
- opacity: 0.2;
- border: none;
- border-bottom: 1px solid #2e2f32;
-}
-
-.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu
- > .mx_IconizedContextMenu_optionList {
- margin-top: 4px;
-}
-
-.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu
- > .mx_IconizedContextMenu_optionList:before {
- border: none;
-}
-
-.mx_UserMenu_contextMenu.mx_UserMenu_contextMenu_prototype.mx_IconizedContextMenu
- > .mx_IconizedContextMenu_optionList
- > .mx_AccessibleButton {
- padding-top: 2px;
- padding-bottom: 2px;
-}
-
-.mx_UserMenu_contextMenu.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList_red
- .mx_AccessibleButton {
- padding-top: 16px;
- padding-bottom: 16px;
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header {
- padding: 20px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header
- .mx_UserMenu_contextMenu_name {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- width: calc(100% - 40px);
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header
- .mx_UserMenu_contextMenu_name
- * {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- width: 100%;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header
- .mx_UserMenu_contextMenu_name
- .mx_UserMenu_contextMenu_displayName {
- font-weight: 700;
- font-size: 1.5rem;
- line-height: 2rem;
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header
- .mx_UserMenu_contextMenu_name
- .mx_UserMenu_contextMenu_userId {
- font-size: 1.5rem;
- line-height: 2.4rem;
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header
- .mx_UserMenu_contextMenu_themeButton {
- min-width: 32px;
- max-width: 32px;
- width: 32px;
- height: 32px;
- margin-left: 8px;
- border-radius: 32px;
- background-color: #e3e8f0;
- cursor: pointer;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts,
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_hostingLink {
- padding-top: 0;
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts {
- display: inline-block;
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts
- > span {
- font-weight: 600;
- display: block;
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts
- > span
- + span {
- margin-top: 8px;
-}
-
-.mx_UserMenu_contextMenu
- .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts
- .mx_AccessibleButton_kind_link {
- font-weight: 400;
- font-size: inherit;
- padding: 0;
-}
-
-.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon {
- width: 16px;
- height: 16px;
- display: block;
-}
-
-.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon:before {
- content: "";
- width: 16px;
- height: 16px;
- display: block;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #2e2f32;
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconHome:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/home.1b4edd5.svg);
- mask-image: url(../../img/element-icons/roomlist/home.1b4edd5.svg);
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconHosting:before {
- -webkit-mask-image: url(../../img/element-icons/brands/element.182040d.svg);
- mask-image: url(../../img/element-icons/brands/element.182040d.svg);
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconBell:before {
- -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
- mask-image: url(../../img/element-icons/notifications.d298b39.svg);
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconLock:before {
- -webkit-mask-image: url(../../img/element-icons/security.66f2fa6.svg);
- mask-image: url(../../img/element-icons/security.66f2fa6.svg);
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconSettings:before {
- -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
- mask-image: url(../../img/element-icons/settings.6b381af.svg);
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconArchive:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/archived.226584d.svg);
- mask-image: url(../../img/element-icons/roomlist/archived.226584d.svg);
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconMessage:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);
- mask-image: url(../../img/element-icons/roomlist/feedback.b9a3f53.svg);
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconSignOut:before {
- -webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
- mask-image: url(../../img/element-icons/leave.bb917e7.svg);
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconMembers:before {
- -webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
- mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
-}
-
-.mx_UserMenu_contextMenu .mx_UserMenu_iconInvite:before {
- -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
-}
-
-.mx_ViewSource_separator {
- clear: both;
- border-bottom: 1px solid #e5e5e5;
- padding-top: 0.7em;
- padding-bottom: 0.7em;
-}
-
-.mx_ViewSource_heading {
- font-size: 1.7rem;
- font-weight: 400;
- color: #2e2f32;
- margin-top: 0.7em;
-}
-
-.mx_ViewSource pre {
- text-align: left;
- font-size: 1.2rem;
- padding: 0.5em 1em;
- word-wrap: break-word;
- white-space: pre-wrap;
-}
-
-.mx_ViewSource_details {
- margin-top: 0.8em;
-}
-
-.mx_CompleteSecurity_header {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_CompleteSecurity_headerIcon {
- width: 24px;
- height: 24px;
- margin-right: 4px;
- position: relative;
-}
-
-.mx_CompleteSecurity_heroIcon {
- width: 128px;
- height: 128px;
- position: relative;
- margin: 0 auto;
-}
-
-.mx_CompleteSecurity_body {
- font-size: 1.5rem;
-}
-
-.mx_CompleteSecurity_waiting {
- color: #8d99a5;
-}
-
-.mx_CompleteSecurity_actionRow {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- margin-top: 2.8rem;
-}
-
-.mx_CompleteSecurity_actionRow .mx_AccessibleButton {
- -webkit-margin-start: 18px;
- margin-inline-start: 18px;
-}
-
-.mx_CompleteSecurity_actionRow .mx_AccessibleButton.warning {
- color: #ff4b55;
-}
-
-.mx_Login_submit {
- vertical-align: middle;
- border: 0;
- border-radius: 8px;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- color: #fff;
- background-color: #0dbd8b;
- width: auto;
- padding: 7px 1.5em;
- cursor: pointer;
- display: inline-block;
- outline: none;
- width: 100%;
- margin-top: 24px;
- margin-bottom: 24px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- text-align: center;
-}
-
-.mx_Login_submit:disabled {
- opacity: 0.3;
- cursor: default;
-}
-
-.mx_Login_loader {
- display: inline;
- position: relative;
- top: 2px;
- left: 8px;
-}
-
-.mx_Login_loader .mx_Spinner {
- display: inline;
-}
-
-.mx_Login_loader .mx_Spinner img {
- width: 16px;
- height: 16px;
-}
-
-.mx_Login_error {
- color: #ff4b55;
- font-weight: 700;
- text-align: center;
- margin-top: 12px;
- margin-bottom: 12px;
-}
-
-.mx_Login_error.mx_Login_serverError {
- text-align: left;
- font-weight: 400;
-}
-
-.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
- color: #ff8d13;
-}
-
-.mx_Login_type_container {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #232f32;
-}
-
-.mx_Login_type_container .mx_Field {
- margin: 0;
-}
-
-.mx_Login_type_label {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_Login_underlinedServerName {
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
- border-bottom: 1px dashed #0dbd8b;
-}
-
-div.mx_AccessibleButton_kind_link.mx_Login_forgot {
- display: block;
- margin: 0 auto;
- font-size: inherit;
- padding: 0;
-}
-
-div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
- cursor: not-allowed;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container {
- padding: 16px 12px 12px;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container
- .mx_AudioPlayer_primaryContainer
- .mx_PlayPauseButton {
- margin-right: 8px;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container
- .mx_AudioPlayer_primaryContainer
- .mx_AudioPlayer_mediaInfo {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- overflow: hidden;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container
- .mx_AudioPlayer_primaryContainer
- .mx_AudioPlayer_mediaInfo
- > * {
- display: block;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container
- .mx_AudioPlayer_primaryContainer
- .mx_AudioPlayer_mediaInfo
- .mx_AudioPlayer_mediaName {
- color: #2e2f32;
- font-size: 1.5rem;
- line-height: 1.5rem;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- padding-bottom: 4px;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container
- .mx_AudioPlayer_primaryContainer
- .mx_AudioPlayer_mediaInfo
- .mx_AudioPlayer_byline {
- font-size: 1.2rem;
- line-height: 1.2rem;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek .mx_SeekBar {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek .mx_Clock {
- width: 4.2rem;
- min-width: 4.2rem;
- padding-left: 4px;
- text-align: right;
-}
-
-.mx_PlayPauseButton {
- position: relative;
- width: 32px;
- height: 32px;
- min-width: 32px;
- min-height: 32px;
- border-radius: 32px;
- background-color: #f4f6fa;
-}
-
-.mx_PlayPauseButton:before {
- content: "";
- position: absolute;
- background-color: #737d8c;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_PlayPauseButton.mx_PlayPauseButton_disabled:before {
- opacity: 0.5;
-}
-
-.mx_PlayPauseButton.mx_PlayPauseButton_play:before {
- width: 13px;
- height: 16px;
- top: 8px;
- left: 12px;
- -webkit-mask-image: url(../../img/element-icons/play.a72552b.svg);
- mask-image: url(../../img/element-icons/play.a72552b.svg);
-}
-
-.mx_PlayPauseButton.mx_PlayPauseButton_pause:before {
- width: 10px;
- height: 12px;
- top: 10px;
- left: 11px;
- -webkit-mask-image: url(../../img/element-icons/pause.c4c0886.svg);
- mask-image: url(../../img/element-icons/pause.c4c0886.svg);
-}
-
-.mx_MediaBody.mx_VoiceMessagePrimaryContainer {
- padding-right: 11px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- contain: content;
-}
-
-.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar {
- background-color: #c1c6cd;
- height: 100%;
- -webkit-transform: scaleY(max(0.05, var(--barHeight)));
- transform: scaleY(max(0.05, var(--barHeight)));
-}
-
-.mx_MediaBody.mx_VoiceMessagePrimaryContainer
- .mx_Waveform
- .mx_Waveform_bar.mx_Waveform_bar_100pct {
- -webkit-transition: background-color 0.25s ease;
- transition: background-color 0.25s ease;
- background-color: #737d8c;
-}
-
-.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Clock {
- width: 4.2rem;
- padding-right: 6px;
- padding-left: 8px;
-}
-
-.mx_MediaBody.mx_VoiceMessagePrimaryContainer.mx_VoiceMessagePrimaryContainer_noWaveform {
- max-width: 162px;
-}
-
-.mx_SeekBar {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- width: 100%;
- height: 1px;
- background: #c1c6cd;
- outline: none;
- position: relative;
- cursor: pointer;
-}
-
-.mx_SeekBar::-webkit-slider-thumb {
- -webkit-appearance: none;
- appearance: none;
- width: 8px;
- height: 8px;
- border-radius: 8px;
- background-color: #8d99a5;
- cursor: pointer;
-}
-
-.mx_SeekBar::-moz-range-thumb {
- width: 8px;
- height: 8px;
- border-radius: 8px;
- background-color: #8d99a5;
- cursor: pointer;
- border: none;
-}
-
-.mx_SeekBar:before {
- content: "";
- background-color: #8d99a5;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 1px;
- -webkit-transform-origin: 0 100%;
- transform-origin: 0 100%;
- -webkit-transform: scaleX(var(--fillTo));
- transform: scaleX(var(--fillTo));
-}
-
-.mx_SeekBar::-moz-range-progress {
- background-color: #8d99a5;
- height: 1px;
-}
-
-.mx_SeekBar:disabled {
- opacity: 0.5;
-}
-
-.mx_SeekBar:after {
- content: "";
- position: absolute;
- top: -6px;
- bottom: -6px;
- left: 0;
- right: 0;
-}
-
-.mx_Waveform {
- position: relative;
- height: 30px;
- top: 1px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- overflow: hidden;
-}
-
-.mx_Waveform .mx_Waveform_bar {
- width: 0;
- border: 1px solid transparent;
- border-radius: 2px;
- min-height: 0;
- max-height: 100%;
- margin-left: 1px;
- margin-right: 1px;
-}
-
-.mx_AuthBody {
- width: 500px;
- font-size: 1.2rem;
- color: #61708b;
- background-color: #fff;
- border-radius: 0 4px 4px 0;
- padding: 25px 60px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_AuthBody h2 {
- font-size: 2.4rem;
- font-weight: 600;
- margin-top: 8px;
- color: #232f32;
-}
-
-.mx_AuthBody h3 {
- font-size: 1.4rem;
- font-weight: 600;
- color: #61708b;
-}
-
-.mx_AuthBody h3.mx_AuthBody_centered {
- text-align: center;
-}
-
-.mx_AuthBody a:hover,
-.mx_AuthBody a:link,
-.mx_AuthBody a:visited {
- color: #0dbd8b;
- text-decoration: none;
-}
-
-.mx_AuthBody input[type="password"],
-.mx_AuthBody input[type="text"] {
- color: #232f32;
-}
-
-.mx_AuthBody .mx_Field input,
-.mx_AuthBody .mx_Field select {
- color: #232f32;
- background-color: #fff;
-}
-
-.mx_AuthBody .mx_Field label {
- color: #232f32;
-}
-
-.mx_AuthBody .mx_Field input:not(:-moz-placeholder-shown) + label,
-.mx_AuthBody .mx_Field textarea:not(:-moz-placeholder-shown) + label {
- background-color: #fff;
-}
-
-.mx_AuthBody .mx_Field input:not(:-ms-input-placeholder) + label,
-.mx_AuthBody .mx_Field textarea:not(:-ms-input-placeholder) + label {
- background-color: #fff;
-}
-
-.mx_AuthBody .mx_Field_labelAlwaysTopLeft label,
-.mx_AuthBody .mx_Field input:focus + label,
-.mx_AuthBody .mx_Field input:not(:placeholder-shown) + label,
-.mx_AuthBody .mx_Field select + label,
-.mx_AuthBody .mx_Field textarea:focus + label,
-.mx_AuthBody .mx_Field textarea:not(:placeholder-shown) + label {
- background-color: #fff;
-}
-
-.mx_AuthBody input.error {
- color: #ff4b55;
-}
-
-.mx_AuthBody .mx_Field input {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_AuthBody .mx_Field_select:before {
- background-color: #232f32;
-}
-
-.mx_AuthBody .mx_Dropdown {
- color: #232f32;
-}
-
-.mx_AuthBody .mx_Dropdown_arrow {
- background: #232f32;
-}
-
-.mx_AuthBody .mx_Dropdown_menu {
- background-color: #fff;
-}
-
-.mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight {
- background-color: #ddd;
-}
-
-.mx_AuthBody_fieldRow {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-bottom: 10px;
-}
-
-.mx_AuthBody_fieldRow > .mx_Field {
- margin: 0 5px;
-}
-
-.mx_AuthBody_fieldRow > .mx_Field:first-child {
- margin-left: 0;
-}
-
-.mx_AuthBody_fieldRow > .mx_Field:last-child {
- margin-right: 0;
-}
-
-.mx_AuthBody_paddedFooter {
- height: 80px;
- padding-top: 28px;
- text-align: center;
-}
-
-.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title {
- margin-top: 16px;
- font-size: 1.5rem;
- line-height: 2.4rem;
-}
-
-.mx_AuthBody_paddedFooter
- .mx_AuthBody_paddedFooter_title
- .mx_InlineSpinner
- img {
- vertical-align: sub;
- margin-right: 5px;
-}
-
-.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_subtitle {
- margin-top: 8px;
- font-size: 1rem;
- line-height: 1.4rem;
-}
-
-.mx_AuthBody_changeFlow {
- display: block;
- text-align: center;
- width: 100%;
-}
-
-.mx_AuthBody_changeFlow > a {
- font-weight: 600;
-}
-
-.mx_SSOButtons + .mx_AuthBody_changeFlow {
- margin-top: 24px;
-}
-
-.mx_AuthBody_spinner {
- margin: 1em 0;
-}
-
-@media only screen and (max-width: 480px) {
- .mx_AuthBody {
+/* global __webpack_hash__ */
+
+import ThemeWatcher from "../../settings/watchers/ThemeWatcher";
+
+const getExportCSS = async (): Promise<string> => {
+ const theme = new ThemeWatcher().getEffectiveTheme();
+ const hash = __webpack_hash__;
+ const bundle = await fetch(`bundles/${hash}/bundle.css`);
+ const bundleCSS = await bundle.text();
+ let themeCSS: string;
+ if (theme === 'light') {
+ const res = await fetch(`bundles/${hash}/theme-light.css`);
+ themeCSS = await res.text();
+ } else {
+ const res = await fetch(`bundles/${hash}/theme-dark.css`);
+ themeCSS = await res.text();
+ }
+ const fontFaceRegex = /@font-face {.*?}/sg;
+ themeCSS.replace(fontFaceRegex, '');
+ themeCSS.replace(
+ /font-family: Inter/g,
+ `font-family: -apple-system, BlinkMacSystemFont, avenir next,
+ avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif`,
+ );
+ themeCSS.replace(
+ /font-family: Inconsolata/g,
+ "font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace",
+ );
+
+ const customCSS = `
+#snackbar {
+ display: flex;
+ visibility: hidden;
+ min-width: 250px;
+ margin-left: -125px;
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ position: fixed;
+ z-index: 1;
+ left: 50%;
+ bottom: 30px;
+ font-size: 17px;
+ padding: 6px 16px;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+ font-weight: 400;
+ line-height: 1.43;
border-radius: 4px;
- width: auto;
- max-width: 500px;
- padding: 10px;
+ letter-spacing: 0.01071em;
}
-}
-
-.mx_AuthButtons {
- min-height: 24px;
- height: unset !important;
- padding-top: 13px !important;
- padding-bottom: 14px !important;
- -webkit-box-ordinal-group: 5;
- -ms-flex-order: 4;
- order: 4;
-}
-
-.mx_AuthButtons_loginButton_wrapper {
- text-align: center;
- width: 100%;
-}
-
-.mx_AuthButtons_loginButton,
-.mx_AuthButtons_registerButton {
- margin-top: 3px;
- height: 40px;
- border: 0;
- border-radius: 40px;
- margin-left: 4px;
- margin-right: 4px;
- min-width: 80px;
- background-color: #0dbd8b;
- color: #fff;
- cursor: pointer;
- font-size: 1.5rem;
- padding: 0 11px;
- word-break: break-word;
-}
-
-.mx_AuthFooter {
- text-align: center;
- width: 100%;
- font-size: 1.4rem;
- opacity: 0.72;
- padding: 20px 0;
- background: -webkit-gradient(
- linear,
- left top,
- left bottom,
- from(transparent),
- to(rgba(0, 0, 0, 0.8))
- );
- background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
-}
-
-.mx_AuthFooter a:hover,
-.mx_AuthFooter a:link,
-.mx_AuthFooter a:visited {
- color: #fff;
- margin: 0 22px;
-}
-
-.mx_AuthHeader {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- width: 206px;
- padding: 25px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-@media only screen and (max-width: 480px) {
- .mx_AuthHeader {
- display: none;
+
+ #snackbar.mx_show {
+ visibility: visible;
+ -webkit-animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
+ animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
}
-}
-
-.mx_AuthHeaderLogo {
- margin-top: 15px;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- padding: 0 25px;
-}
-
-.mx_AuthHeaderLogo img {
- width: 100%;
-}
-
-@media only screen and (max-width: 480px) {
- .mx_AuthHeaderLogo {
- display: none;
+
+ a.mx_reply_anchor{
+ cursor: pointer;
+ color: #238cf5;
}
-}
-
-.mx_AuthPage {
- width: 100%;
- min-height: 100%;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- background-color: #2e3649;
-}
-
-.mx_AuthPage,
-.mx_AuthPage_modal {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_AuthPage_modal {
- margin: 100px auto auto;
- border-radius: 4px;
- -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
- background-color: hsla(0, 0%, 96.1%, 0.9);
-}
-
-@media only screen and (max-width: 480px) {
- .mx_AuthPage_modal {
- margin-top: 0;
+
+ a.mx_reply_anchor:hover{
+ text-decoration: underline;
}
-}
-
-.mx_CompleteSecurityBody {
- width: 600px;
- color: #232f32;
- background-color: #fff;
- border-radius: 4px;
- padding: 20px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_CompleteSecurityBody h2 {
- font-size: 2.4rem;
- font-weight: 600;
- margin-top: 0;
-}
-
-.mx_CompleteSecurityBody h3 {
- font-size: 1.4rem;
- font-weight: 600;
-}
-
-.mx_CompleteSecurityBody a:hover,
-.mx_CompleteSecurityBody a:link,
-.mx_CompleteSecurityBody a:visited {
- color: #0dbd8b;
- text-decoration: none;
-}
-
-.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option {
- padding: 0 3px;
-}
-
-.mx_CountryDropdown .mx_Dropdown_arrow {
- padding-right: 3px;
-}
-
-.mx_CountryDropdown_shortOption {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- height: 100%;
-}
-
-.mx_CountryDropdown_option,
-.mx_CountryDropdown_shortOption {
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_CountryDropdown_option {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_InteractiveAuthEntryComponents_emailWrapper {
- padding-right: 100px;
- position: relative;
- margin-top: 32px;
- margin-bottom: 32px;
-}
-
-.mx_InteractiveAuthEntryComponents_emailWrapper:after,
-.mx_InteractiveAuthEntryComponents_emailWrapper:before {
- position: absolute;
- width: 116px;
- height: 116px;
- content: "";
- right: -10px;
-}
-
-.mx_InteractiveAuthEntryComponents_emailWrapper:before {
- background-color: rgba(244, 246, 250, 0.91);
- border-radius: 50%;
- top: -20px;
-}
-
-.mx_InteractiveAuthEntryComponents_emailWrapper:after {
- background-image: url(../../img/element-icons/email-prompt.1d04dfe.svg);
- background-repeat: no-repeat;
- background-position: 50%;
- background-size: contain;
- top: -25px;
-}
-
-.mx_InteractiveAuthEntryComponents_msisdnWrapper {
- text-align: center;
-}
-
-.mx_InteractiveAuthEntryComponents_msisdnEntry {
- font-size: 200%;
- font-weight: 700;
- border: 1px solid #c7c7c7;
- border-radius: 3px;
- width: 6em;
-}
-
-.mx_InteractiveAuthEntryComponents_msisdnEntry:focus {
- border: 1px solid #0dbd8b;
-}
-
-.mx_InteractiveAuthEntryComponents_msisdnSubmit {
- margin-top: 4px;
- margin-bottom: 5px;
-}
-
-.mx_InteractiveAuthEntryComponents_termsSubmit {
- margin-top: 20px;
- margin-bottom: 5px;
- display: block;
- width: 100%;
-}
-
-.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
- background-color: #747474;
- cursor: default;
-}
-
-.mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
- background-color: #92caad;
- cursor: default;
-}
-
-.mx_InteractiveAuthEntryComponents_termsPolicy {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: start;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_InteractiveAuthEntryComponents_passwordSection {
- width: 300px;
-}
-
-.mx_InteractiveAuthEntryComponents_sso_buttons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- margin-top: 20px;
-}
-
-.mx_InteractiveAuthEntryComponents_sso_buttons .mx_AccessibleButton {
- margin-left: 5px;
-}
-
-.mx_AuthBody_language {
- width: 100%;
-}
-
-.mx_AuthBody_language .mx_Dropdown_input {
- border: none;
- font-size: 1.4rem;
- font-weight: 600;
- color: #4e5054;
- width: auto;
-}
-
-.mx_AuthBody_language .mx_Dropdown_arrow {
- background: #4e5054;
-}
-
-progress.mx_PassphraseField_progress {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- width: 100%;
- border: 0;
- height: 4px;
- position: absolute;
- top: -12px;
- border-radius: "2px";
-}
-
-progress.mx_PassphraseField_progress::-moz-progress-bar {
- border-radius: "2px";
-}
-
-progress.mx_PassphraseField_progress::-webkit-progress-bar,
-progress.mx_PassphraseField_progress::-webkit-progress-value {
- border-radius: "2px";
-}
-
-progress.mx_PassphraseField_progress {
- color: #ff4b55;
-}
-
-progress.mx_PassphraseField_progress::-moz-progress-bar {
- background-color: #ff4b55;
-}
-
-progress.mx_PassphraseField_progress::-webkit-progress-value {
- background-color: #ff4b55;
-}
-
-progress.mx_PassphraseField_progress[value="2"],
-progress.mx_PassphraseField_progress[value="3"] {
- color: #ff812d;
-}
-
-progress.mx_PassphraseField_progress[value="2"]::-moz-progress-bar,
-progress.mx_PassphraseField_progress[value="3"]::-moz-progress-bar {
- background-color: #ff812d;
-}
-
-progress.mx_PassphraseField_progress[value="2"]::-webkit-progress-value,
-progress.mx_PassphraseField_progress[value="3"]::-webkit-progress-value {
- background-color: #ff812d;
-}
-
-progress.mx_PassphraseField_progress[value="4"] {
- color: #0dbd8b;
-}
-
-progress.mx_PassphraseField_progress[value="4"]::-moz-progress-bar {
- background-color: #0dbd8b;
-}
-
-progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
- background-color: #0dbd8b;
-}
-
-.mx_Welcome {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_Welcome.mx_WelcomePage_registrationDisabled .mx_ButtonCreateAccount {
- display: none;
-}
-
-.mx_Welcome .mx_AuthBody_language {
- width: 160px;
- margin-bottom: 10px;
-}
-
-.mx_BaseAvatar {
- position: relative;
- display: inline-block;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.mx_BaseAvatar_initial {
- position: absolute;
- left: 0;
- color: #fff;
- text-align: center;
- speak: none;
- pointer-events: none;
- font-weight: 400;
-}
-
-.mx_BaseAvatar_image {
- -o-object-fit: cover;
- object-fit: cover;
- border-radius: 125px;
- vertical-align: top;
- background-color: #fff;
-}
-
-.mx_DecoratedRoomAvatar,
-.mx_ExtraTile {
- position: relative;
- contain: content;
-}
-
-.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar,
-.mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
- -webkit-mask-image: url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);
- mask-image: url(../../img/element-icons/roomlist/decorated-avatar-mask.76c407f.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
-}
-
-.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon,
-.mx_ExtraTile .mx_DecoratedRoomAvatar_icon {
- position: absolute;
- bottom: -2px;
- right: -2px;
- margin: 4px;
- width: 8px;
- height: 8px;
- border-radius: 50%;
-}
-
-.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before,
-.mx_ExtraTile .mx_DecoratedRoomAvatar_icon:before {
- content: "";
- width: 8px;
- height: 8px;
- position: absolute;
- border-radius: 8px;
-}
-
-.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe:before,
-.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe:before {
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #737d8c;
- -webkit-mask-image: url(../../img/globe.8201f08.svg);
- mask-image: url(../../img/globe.8201f08.svg);
-}
-
-.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_offline:before,
-.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_offline:before {
- background-color: #e3e8f0;
-}
-
-.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online:before,
-.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online:before {
- background-color: #0dbd8b;
-}
-
-.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_away:before,
-.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_away:before {
- background-color: #d9b072;
-}
-
-.mx_DecoratedRoomAvatar .mx_NotificationBadge,
-.mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer,
-.mx_ExtraTile .mx_NotificationBadge,
-.mx_ExtraTile .mx_RoomTile_badgeContainer {
- position: absolute;
- top: 0;
- right: 0;
- height: 18px;
- width: 18px;
-}
-
-.mx_MessageComposer_avatar .mx_BaseAvatar {
- padding: 2px;
- border: 1px solid transparent;
- border-radius: 100%;
-}
-
-.mx_MessageComposer_avatar .mx_BaseAvatar_initial {
- left: 2px;
-}
-
-.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar {
- border-color: #0dbd8b;
-}
-
-.mx_WidgetAvatar {
- border-radius: 4px;
-}
-
-.mx_BetaCard {
- margin-bottom: 20px;
- padding: 24px;
- background-color: #f4f6fa;
- border-radius: 8px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_BetaCard .mx_BetaCard_columns {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_BetaCard .mx_BetaCard_columns > div .mx_BetaCard_title {
- font-weight: 600;
- font-size: 1.8rem;
- line-height: 2.2rem;
- color: #2e2f32;
- margin: 4px 0 14px;
-}
-
-.mx_BetaCard
- .mx_BetaCard_columns
- > div
- .mx_BetaCard_title
- .mx_BetaCard_betaPill {
- margin-left: 12px;
-}
-
-.mx_BetaCard .mx_BetaCard_columns > div .mx_BetaCard_caption {
- font-size: 1.5rem;
- line-height: 2rem;
- color: #737d8c;
- margin-bottom: 20px;
-}
-
-.mx_BetaCard
- .mx_BetaCard_columns
- > div
- .mx_BetaCard_buttons
- .mx_AccessibleButton {
- display: block;
- margin: 12px 0;
- padding: 7px 40px;
- width: auto;
-}
-
-.mx_BetaCard .mx_BetaCard_columns > div .mx_BetaCard_disclaimer {
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #737d8c;
- margin-top: 20px;
-}
-
-.mx_BetaCard .mx_BetaCard_columns > img {
- margin: auto 0 auto 20px;
- width: 300px;
- -o-object-fit: contain;
- object-fit: contain;
- height: 100%;
-}
-
-.mx_BetaCard .mx_BetaCard_relatedSettings .mx_SettingsFlag {
- margin: 16px 0 0;
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #2e2f32;
-}
-
-.mx_BetaCard
- .mx_BetaCard_relatedSettings
- .mx_SettingsFlag
- .mx_SettingsFlag_microcopy {
- margin-top: 4px;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #737d8c;
-}
-
-.mx_BetaCard_betaPill {
- background-color: #238cf5;
- padding: 4px 10px;
- border-radius: 8px;
- text-transform: uppercase;
- font-size: 12px;
- line-height: 15px;
- color: #fff;
- display: inline-block;
- vertical-align: text-bottom;
-}
-
-.mx_BetaCard_betaPill.mx_BetaCard_betaPill_clickable {
- cursor: pointer;
-}
-
-.mx_BetaDot {
- margin: 10px;
- height: 12px;
- width: 12px;
- -webkit-animation: mx_Beta_bluePulse 2s infinite;
- animation: mx_Beta_bluePulse 2s infinite;
- -webkit-animation-iteration-count: 20;
- animation-iteration-count: 20;
- position: relative;
-}
-
-.mx_BetaDot,
-.mx_BetaDot:after {
- border-radius: 50%;
- -webkit-transform: scale(1);
- transform: scale(1);
- background: #238cf5;
-}
-
-.mx_BetaDot:after {
- content: "";
- position: absolute;
- width: inherit;
- height: inherit;
- top: 0;
- left: 0;
- -webkit-transform-origin: center center;
- transform-origin: center center;
- -webkit-animation-name: mx_Beta_bluePulse_shadow;
- animation-name: mx_Beta_bluePulse_shadow;
- -webkit-animation-duration: inherit;
- animation-duration: inherit;
- -webkit-animation-iteration-count: inherit;
- animation-iteration-count: inherit;
-}
-
-@-webkit-keyframes mx_Beta_bluePulse {
- 0% {
- -webkit-transform: scale(0.95);
- transform: scale(0.95);
+
+ @-webkit-keyframes mx_snackbar_fadein {
+ from {bottom: 0; opacity: 0;}
+ to {bottom: 30px; opacity: 1;}
}
- 70% {
- -webkit-transform: scale(1);
- transform: scale(1);
+
+ @keyframes mx_snackbar_fadein {
+ from {bottom: 0; opacity: 0;}
+ to {bottom: 30px; opacity: 1;}
}
- to {
- -webkit-transform: scale(0.95);
- transform: scale(0.95);
+
+ @-webkit-keyframes mx_snackbar_fadeout {
+ from {bottom: 30px; opacity: 1;}
+ to {bottom: 0; opacity: 0;}
}
-}
-
-@keyframes mx_Beta_bluePulse {
- 0% {
- -webkit-transform: scale(0.95);
- transform: scale(0.95);
+
+ @keyframes mx_snackbar_fadeout {
+ from {bottom: 30px; opacity: 1;}
+ to {bottom: 0; opacity: 0;}
}
- 70% {
- -webkit-transform: scale(1);
- transform: scale(1);
+
+ .mx_MFileBody_info .mx_MFileBody_info_icon img.mx_export_attach_icon {
+ content: '';
+ background-color: ${theme == 'light' ? "#ffffff": "inherit"};
+ width: 13px;
+ height: 15px;
+ position: absolute;
+ top: 8px;
+ left: 9px;
}
- to {
- -webkit-transform: scale(0.95);
- transform: scale(0.95);
+
+ * {
+ scroll-behavior: smooth !important;
}
-}
-
-@-webkit-keyframes mx_Beta_bluePulse_shadow {
- 0% {
- opacity: 0.7;
+
+
+ .mx_Export_EventWrapper:target {
+ background: ${theme == 'light' ? "white" : "#15191E"};
+ animation: mx_event_highlight_animation 2s linear;
}
- 70% {
- -webkit-transform: scale(2.2);
- transform: scale(2.2);
- opacity: 0;
+
+
+ @keyframes mx_event_highlight_animation {
+ 0%,100% {
+ background: ${theme == 'light' ? "white" : "#15191E"};
+ }
+ 50% {
+ background: ${theme == 'light' ? "#e3e2df" : "#21262c"};
+ }
}
- to {
- opacity: 0;
+
+ .mx_ReplyThread_Export {
+ margin-top: -5px;
+ margin-bottom: 5px;
}
-}
-
-@keyframes mx_Beta_bluePulse_shadow {
- 0% {
- opacity: 0.7;
+
+ .mx_RedactedBody img.mx_export_trash_icon {
+ height: 14px;
+ width: 14px;
+ background-color: ${theme == 'light' ? "#ffffff": "inherit"};
+ content: '';
+ position: absolute;
+ top: 1px;
+ left: 0;
}
- 70% {
- -webkit-transform: scale(2.2);
- transform: scale(2.2);
- opacity: 0;
- }
- to {
- opacity: 0;
- }
-}
-
-.mx_CallContextMenu_item {
- width: 205px;
- height: 40px;
- padding-left: 16px;
- line-height: 40px;
- vertical-align: center;
-}
-
-.mx_IconizedContextMenu {
- min-width: 146px;
-}
-
-.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList > * {
- padding-left: 20px;
- padding-right: 20px;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList
- .mx_IconizedContextMenu_optionList_notFirst:before,
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList:nth-child(n + 2):before {
- border-top: 1px solid #2e2f32;
- opacity: 0.1;
- content: "";
- width: 100%;
- position: absolute;
- left: 0;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList:first-child
- .mx_AccessibleButton:first-child {
- border-radius: 8px 8px 0 0;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList:last-child
- .mx_AccessibleButton:last-child {
- border-radius: 0 0 8px 8px;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList
- .mx_AccessibleButton {
- padding-top: 12px;
- padding-bottom: 12px;
- text-decoration: none;
- color: #2e2f32;
- font-size: 1.5rem;
- line-height: 2.4rem;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList
- .mx_AccessibleButton:hover {
- background-color: #f5f8fa;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList
- .mx_AccessibleButton.mx_AccessibleButton_disabled {
- opacity: 0.5;
- cursor: not-allowed;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList
- .mx_AccessibleButton
- .mx_IconizedContextMenu_icon,
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList
- .mx_AccessibleButton
+
img {
- width: 16px;
- min-width: 16px;
- max-width: 16px;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList
- .mx_AccessibleButton
- span.mx_IconizedContextMenu_label {
- width: 100%;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList
- .mx_AccessibleButton
- .mx_IconizedContextMenu_icon
- + .mx_IconizedContextMenu_label {
- padding-left: 14px;
-}
-
-.mx_IconizedContextMenu .mx_IconizedContextMenu_icon {
- position: relative;
- width: 16px;
- height: 16px;
-}
-
-.mx_IconizedContextMenu .mx_IconizedContextMenu_icon:before {
- content: "";
- width: 16px;
- height: 16px;
- position: absolute;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #2e2f32;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList_red
- .mx_AccessibleButton {
- color: #ff4b55 !important;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_optionList_red
- .mx_IconizedContextMenu_icon:before {
- background-color: #ff4b55;
-}
-
-.mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_AccessibleButton,
-.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_AccessibleButton {
- color: #0dbd8b !important;
-}
-
-.mx_IconizedContextMenu
- .mx_IconizedContextMenu_active
- .mx_IconizedContextMenu_icon:before {
- background-color: #0dbd8b;
-}
-
-.mx_IconizedContextMenu.mx_IconizedContextMenu_compact
- .mx_IconizedContextMenu_optionList
- > * {
- padding: 8px 16px 8px 11px;
-}
-
-.mx_IconizedContextMenu .mx_IconizedContextMenu_checked {
- margin-left: 16px;
- margin-right: -5px;
-}
-
-.mx_IconizedContextMenu .mx_IconizedContextMenu_checked:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
- mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
-}
-
-.mx_MessageContextMenu .mx_IconizedContextMenu_icon {
- width: 16px;
- height: 16px;
- display: block;
-}
-
-.mx_MessageContextMenu .mx_IconizedContextMenu_icon:before {
- content: "";
- width: 16px;
- height: 16px;
- display: block;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #2e2f32;
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconCollapse:before {
- -webkit-mask-image: url(../../img/element-icons/message/chevron-up.90f4709.svg);
- mask-image: url(../../img/element-icons/message/chevron-up.90f4709.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconReport:before {
- -webkit-mask-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
- mask-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconLink:before {
- -webkit-mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
- mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconPermalink:before {
- -webkit-mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
- mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconUnhidePreview:before {
- -webkit-mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
- mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconForward:before {
- -webkit-mask-image: url(../../img/element-icons/message/fwd.d1f50ee.svg);
- mask-image: url(../../img/element-icons/message/fwd.d1f50ee.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconRedact:before {
- -webkit-mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
- mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconResend:before {
- -webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
- mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconSource:before {
- -webkit-mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
- mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconQuote:before {
- -webkit-mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
- mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconPin:before {
- -webkit-mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
- mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
-}
-
-.mx_MessageContextMenu .mx_MessageContextMenu_iconUnpin:before {
- -webkit-mask-image: url(../../img/element-icons/room/pin.a996417.svg);
- mask-image: url(../../img/element-icons/room/pin.a996417.svg);
-}
-
-.mx_StatusMessageContextMenu {
- padding: 10px;
-}
-
-.mx_StatusMessageContextMenu_form {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-input.mx_StatusMessageContextMenu_message {
- border-radius: 4px;
- border: 1px solid #e7e7e7;
- padding: 6.5px 11px;
- background-color: #fff;
- font-weight: 400;
- margin: 0 0 10px;
-}
-
-.mx_StatusMessageContextMenu_message::-webkit-input-placeholder {
- color: #61708b;
-}
-
-.mx_StatusMessageContextMenu_message::-moz-placeholder {
- color: #61708b;
-}
-
-.mx_StatusMessageContextMenu_message:-ms-input-placeholder {
- color: #61708b;
-}
-
-.mx_StatusMessageContextMenu_message::-ms-input-placeholder {
- color: #61708b;
-}
-
-.mx_StatusMessageContextMenu_message::placeholder {
- color: #61708b;
-}
-
-.mx_StatusMessageContextMenu_actionContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_StatusMessageContextMenu_clear,
-.mx_StatusMessageContextMenu_submit {
- vertical-align: middle;
- border-radius: 8px;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- color: #fff;
- background-color: #0dbd8b;
- width: auto;
- cursor: pointer;
- display: inline-block;
- outline: none;
- -ms-flex-item-align: start;
- align-self: start;
- font-size: 1.2rem;
- padding: 6px 1em;
- border: 1px solid transparent;
- margin-right: 10px;
-}
-
-.mx_StatusMessageContextMenu_submit[disabled] {
- opacity: 0.49;
-}
-
-.mx_StatusMessageContextMenu_clear {
- color: #ff4b55;
- background-color: transparent;
- border: 1px solid #ff4b55;
-}
-
-.mx_StatusMessageContextMenu_actionContainer .mx_Spinner {
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
-}
-
-.mx_TagTileContextMenu_item {
- padding: 8px 20px 8px 8px;
- cursor: pointer;
- white-space: nowrap;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- line-height: 1.6rem;
-}
-
-.mx_TagTileContextMenu_item:before {
- content: "";
- height: 15px;
- width: 15px;
- background-color: currentColor;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- margin-right: 8px;
-}
-
-.mx_TagTileContextMenu_viewCommunity:before {
- -webkit-mask-image: url(../../img/element-icons/view-community.0cad1a5.svg);
- mask-image: url(../../img/element-icons/view-community.0cad1a5.svg);
-}
-
-.mx_TagTileContextMenu_moveUp:before {
- -webkit-transform: rotate(180deg);
- transform: rotate(180deg);
-}
-
-.mx_TagTileContextMenu_moveDown:before,
-.mx_TagTileContextMenu_moveUp:before {
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_TagTileContextMenu_hideCommunity:before {
- -webkit-mask-image: url(../../img/element-icons/hide.2b52315.svg);
- mask-image: url(../../img/element-icons/hide.2b52315.svg);
-}
-
-.mx_TagTileContextMenu_separator {
- margin-top: 0;
- margin-bottom: 0;
- border-style: none;
- border-top: 1px solid;
- border-color: #e7e7e7;
-}
-
-.mx_AddExistingToSpaceDialog_wrapper .mx_Dialog {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_AddExistingToSpace .mx_SearchBox {
- margin: 0 0 15px;
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_content {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_noResults {
- display: block;
- margin-top: 24px;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_section:not(:first-child) {
- margin-top: 24px;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_section > h3 {
- margin: 0;
- color: #737d8c;
- font-size: 1.2rem;
- font-weight: 600;
- line-height: 1.5rem;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_section
- .mx_AddExistingToSpace_entry {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-top: 12px;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_section
- .mx_AddExistingToSpace_entry
- .mx_DecoratedRoomAvatar {
- margin-right: 12px;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_section
- .mx_AddExistingToSpace_entry
- .mx_AddExistingToSpace_entry_name {
- font-size: 1.5rem;
- line-height: 30px;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- margin-right: 12px;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_section
- .mx_AddExistingToSpace_entry
- .mx_Checkbox {
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_section_spaces .mx_BaseAvatar {
- margin-right: 12px;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_section_spaces
- .mx_BaseAvatar_image {
- border-radius: 8px;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental {
- position: relative;
- border-radius: 8px;
- margin: 12px 0;
- padding: 8px 8px 8px 42px;
- background-color: #f3f8fd;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #737d8c;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_section_experimental:before {
- content: "";
- position: absolute;
- left: 10px;
- top: calc(50% - 8px);
- height: 16px;
- width: 16px;
- background-color: #737d8c;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_footer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-top: 20px;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #737d8c;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span .mx_ProgressBar {
- height: 8px;
- width: 100%;
- border-radius: 8px;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- > span
- .mx_ProgressBar::-moz-progress-bar {
- border-radius: 8px;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- > span
- .mx_ProgressBar::-webkit-progress-bar,
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- > span
- .mx_ProgressBar::-webkit-progress-value {
- border-radius: 8px;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- > span
- .mx_AddExistingToSpace_progressText {
- margin-top: 8px;
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #2e2f32;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span > * {
- vertical-align: middle;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- .mx_AddExistingToSpace_error {
- padding-left: 12px;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- .mx_AddExistingToSpace_error
- > img {
- -ms-flex-item-align: center;
- align-self: center;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- .mx_AddExistingToSpace_error
- .mx_AddExistingToSpace_errorHeading {
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 1.8rem;
- color: #ff4b55;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- .mx_AddExistingToSpace_error
- .mx_AddExistingToSpace_errorCaption {
- margin-top: 4px;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #2e2f32;
-}
-
-.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton {
- display: inline-block;
- -ms-flex-item-align: center;
- align-self: center;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- .mx_AccessibleButton_kind_primary {
- padding: 8px 36px;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- .mx_AddExistingToSpace_retryButton {
- margin-left: 12px;
- padding-left: 24px;
- position: relative;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- .mx_AddExistingToSpace_retryButton:before {
- content: "";
- position: absolute;
- background-color: #2e2f32;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
- mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
- width: 18px;
- height: 18px;
- left: 0;
-}
-
-.mx_AddExistingToSpace
- .mx_AddExistingToSpace_footer
- .mx_AccessibleButton_kind_link {
- padding: 0;
-}
-
-.mx_AddExistingToSpaceDialog {
- width: 480px;
- color: #2e2f32;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -ms-flex-wrap: nowrap;
- flex-wrap: nowrap;
- min-height: 0;
- height: 80vh;
-}
-
-.mx_AddExistingToSpaceDialog,
-.mx_AddExistingToSpaceDialog .mx_Dialog_title {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar_image {
- border-radius: 8px;
- margin: 0;
- vertical-align: unset;
-}
-
-.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_BaseAvatar {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- margin: auto 16px auto 5px;
- vertical-align: middle;
-}
-
-.mx_AddExistingToSpaceDialog .mx_Dialog_title > div > h1 {
- font-weight: 600;
- font-size: 1.8rem;
- line-height: 2.2rem;
- margin: 0;
-}
-
-.mx_AddExistingToSpaceDialog
- .mx_Dialog_title
- > div
- .mx_AddExistingToSpaceDialog_onlySpace {
- color: #737d8c;
- font-size: 1.5rem;
- line-height: 2.4rem;
-}
-
-.mx_AddExistingToSpaceDialog .mx_Dialog_title .mx_Dropdown_input {
- border: none;
-}
-
-.mx_AddExistingToSpaceDialog
- .mx_Dialog_title
- .mx_Dropdown_input
- > .mx_Dropdown_option {
- padding-left: 0;
- -webkit-box-flex: unset;
- -ms-flex: unset;
- flex: unset;
- height: unset;
- color: #737d8c;
- font-size: 1.5rem;
- line-height: 2.4rem;
-}
-
-.mx_AddExistingToSpaceDialog
- .mx_Dialog_title
- .mx_Dropdown_input
- > .mx_Dropdown_option
- .mx_BaseAvatar {
- display: none;
-}
-
-.mx_AddExistingToSpaceDialog
- .mx_Dialog_title
- .mx_Dropdown_input
- .mx_Dropdown_menu
- .mx_AddExistingToSpaceDialog_dropdownOptionActive {
- color: #0dbd8b;
- padding-right: 32px;
- position: relative;
-}
-
-.mx_AddExistingToSpaceDialog
- .mx_Dialog_title
- .mx_Dropdown_input
- .mx_Dropdown_menu
- .mx_AddExistingToSpaceDialog_dropdownOptionActive:before {
- content: "";
- width: 20px;
- height: 20px;
- top: 8px;
- right: 0;
- position: absolute;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #0dbd8b;
- -webkit-mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
- mask-image: url(../../img/element-icons/roomlist/checkmark.a8c4d72.svg);
-}
-
-.mx_AddExistingToSpaceDialog .mx_AddExistingToSpace {
- display: contents;
-}
-
-.mx_AddressPickerDialog a:hover,
-.mx_AddressPickerDialog a:link,
-.mx_AddressPickerDialog a:visited {
- color: #0dbd8b;
- text-decoration: none;
-}
-
-.mx_AddressPickerDialog_input,
-.mx_AddressPickerDialog_input:focus {
- height: 26px;
- font-size: 1.4rem;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- padding-left: 12px;
- padding-right: 12px;
- margin: 0 !important;
- border: 0 !important;
- outline: 0 !important;
- width: 1000%;
- resize: none;
- overflow: hidden;
- vertical-align: middle;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- word-wrap: nowrap;
-}
-
-.mx_AddressPickerDialog .mx_Dialog_content {
- min-height: 50px;
-}
-
-.mx_AddressPickerDialog_inputContainer {
- border-radius: 3px;
- border: 1px solid #e7e7e7;
- line-height: 3.6rem;
- padding: 1px 4px;
- max-height: 150px;
- overflow-x: hidden;
- overflow-y: auto;
-}
-
-.mx_AddressPickerDialog_error {
- margin-top: 10px;
- color: #ff4b55;
-}
-
-.mx_AddressPickerDialog_cancel {
- position: absolute;
- right: 11px;
- top: 13px;
- cursor: pointer;
-}
-
-.mx_AddressPickerDialog_cancel object {
- pointer-events: none;
-}
-
-.mx_AddressPickerDialog_identityServer {
- margin-top: 1em;
-}
-
-.mx_AnalyticsModal table {
- margin: 10px 0;
-}
-
-.mx_BetaFeedbackDialog .mx_BetaFeedbackDialog_subheading {
- color: #2e2f32;
- font-size: 1.4rem;
- line-height: 2rem;
- margin-bottom: 24px;
-}
-
-.mx_BetaFeedbackDialog .mx_AccessibleButton_kind_link {
- padding: 0;
- font-size: inherit;
- line-height: inherit;
-}
-
-.mx_BugReportDialog
- .mx_BugReportDialog_download
- .mx_AccessibleButton_kind_link {
- padding-left: 0;
-}
-
-.mx_ChangelogDialog_content {
- max-height: 300px;
- overflow: auto;
-}
-
-.mx_ChangelogDialog_li {
- padding: 0.2em;
-}
-
-.mx_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles {
- margin-top: 24px;
-}
-
-.mx_ChatCreateOrReuseDialog .mx_Dialog_content {
- margin-bottom: 24px;
- min-height: 100px;
-}
-
-.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge {
- display: none;
-}
-
-.mx_ChatCreateOrReuseDialog_profile {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_ChatCreateOrReuseDialog_profile_name {
- padding: 14px;
-}
-
-.mx_CommunityPrototypeInviteDialog.mx_Dialog_fixedWidth {
- width: 360px;
-}
-
-.mx_CommunityPrototypeInviteDialog .mx_Dialog_content {
- margin-bottom: 0;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_people {
- position: relative;
- margin-bottom: 4px;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_people
- .mx_AccessibleButton {
- display: inline-block;
- background-color: #ddd;
- border-radius: 4px;
- padding: 3px 5px;
- font-size: 1.2rem;
- float: right;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_morePeople {
- margin-top: 8px;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_person {
- position: relative;
- margin-top: 4px;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_person
- > * {
- vertical-align: middle;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_person
- .mx_Checkbox {
- position: absolute;
- right: 0;
- top: calc(50% - 8px);
- width: 16px;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_person
- .mx_CommunityPrototypeInviteDialog_personIdentifiers {
- display: inline-block;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_person
- .mx_CommunityPrototypeInviteDialog_personIdentifiers
- > * {
- display: block;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_person
- .mx_CommunityPrototypeInviteDialog_personIdentifiers
- .mx_CommunityPrototypeInviteDialog_personName {
- font-weight: 600;
- font-size: 1.4rem;
- color: #2e2f32;
- margin-left: 7px;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_person
- .mx_CommunityPrototypeInviteDialog_personIdentifiers
- .mx_CommunityPrototypeInviteDialog_personId {
- font-size: 1.2rem;
- color: #61708b;
- margin-left: 7px;
-}
-
-.mx_CommunityPrototypeInviteDialog
- .mx_Dialog_content
- .mx_CommunityPrototypeInviteDialog_primaryButton {
- display: block;
- font-size: 1.3rem;
- line-height: 20px;
- height: 20px;
- margin-top: 24px;
-}
-
-.mx_ConfirmUserActionDialog .mx_Dialog_content {
- min-height: 48px;
- margin-bottom: 24px;
-}
-
-.mx_ConfirmUserActionDialog_avatar {
- float: left;
- margin-right: 20px;
- margin-top: -2px;
-}
-
-.mx_ConfirmUserActionDialog_name {
- font-size: 1.8rem;
-}
-
-.mx_ConfirmUserActionDialog_userId {
- font-size: 1.3rem;
-}
-
-.mx_ConfirmUserActionDialog_reasonField {
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- color: #2e2f32;
- background-color: #fff;
- border-radius: 3px;
- border: 1px solid #e7e7e7;
- line-height: 3.6rem;
- padding: 1px 16px;
- margin-bottom: 24px;
- width: 90%;
-}
-
-.mx_CreateCommunityPrototypeDialog .mx_Dialog_content {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- margin-bottom: 12px;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colName {
- -ms-flex-preferred-size: 66.66%;
- flex-basis: 66.66%;
- padding-right: 100px;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colName
- .mx_Field
- input {
- font-size: 1.6rem;
- line-height: 2rem;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colName
- .mx_CreateCommunityPrototypeDialog_subtext {
- display: block;
- color: #61708b;
- margin-bottom: 16px;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colName
- .mx_CreateCommunityPrototypeDialog_subtext:last-child {
- margin-top: 16px;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colName
- .mx_CreateCommunityPrototypeDialog_subtext.mx_CreateCommunityPrototypeDialog_subtext_error {
- color: #ff4b55;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colName
- .mx_CreateCommunityPrototypeDialog_communityId {
- position: relative;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colName
- .mx_CreateCommunityPrototypeDialog_communityId
- .mx_InfoTooltip {
- float: right;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colName
- .mx_AccessibleButton {
- display: block;
- height: 32px;
- font-size: 1.6rem;
- line-height: 32px;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colAvatar {
- -ms-flex-preferred-size: 33.33%;
- flex-basis: 33.33%;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colAvatar
- .mx_CreateCommunityPrototypeDialog_avatarContainer {
- margin-top: 12px;
- margin-bottom: 20px;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colAvatar
- .mx_CreateCommunityPrototypeDialog_avatarContainer
- .mx_CreateCommunityPrototypeDialog_avatar,
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colAvatar
- .mx_CreateCommunityPrototypeDialog_avatarContainer
- .mx_CreateCommunityPrototypeDialog_placeholderAvatar {
- width: 96px;
- height: 96px;
- border-radius: 96px;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colAvatar
- .mx_CreateCommunityPrototypeDialog_avatarContainer
- .mx_CreateCommunityPrototypeDialog_placeholderAvatar {
- background-color: #368bd6;
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colAvatar
- .mx_CreateCommunityPrototypeDialog_avatarContainer
- .mx_CreateCommunityPrototypeDialog_placeholderAvatar:before {
- display: inline-block;
- background-color: #fff;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 96px;
- mask-size: 96px;
- width: 96px;
- height: 96px;
- -webkit-mask-position: center;
- mask-position: center;
- content: "";
- vertical-align: middle;
- -webkit-mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
- mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
-}
-
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colAvatar
- .mx_CreateCommunityPrototypeDialog_tip
- > b,
-.mx_CreateCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_CreateCommunityPrototypeDialog_colAvatar
- .mx_CreateCommunityPrototypeDialog_tip
- > span {
- display: block;
- color: #61708b;
-}
-
-.mx_CreateGroupDialog_inputRow {
- margin-top: 10px;
- margin-bottom: 10px;
-}
-
-.mx_CreateGroupDialog_label {
- text-align: left;
- padding-bottom: 12px;
-}
-
-.mx_CreateGroupDialog_input {
- font-size: 1.5rem;
- border-radius: 3px;
- border: 1px solid #e7e7e7;
- padding: 9px;
- color: #2e2f32;
- background-color: #fff;
-}
-
-.mx_CreateGroupDialog_input_hasPrefixAndSuffix {
- border-radius: 0;
-}
-
-.mx_CreateGroupDialog_input_group {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_CreateGroupDialog_prefix,
-.mx_CreateGroupDialog_suffix {
- padding: 0 5px;
- line-height: 3.7rem;
- background-color: #e3e8f0;
- border: 1px solid #e7e7e7;
- text-align: center;
-}
-
-.mx_CreateGroupDialog_prefix {
- border-right: 0;
- border-radius: 3px 0 0 3px;
-}
-
-.mx_CreateGroupDialog_suffix {
- border-left: 0;
- border-radius: 0 3px 3px 0;
-}
-
-.mx_CreateRoomDialog_details {
- margin-top: 15px;
-}
-
-.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary {
- outline: none;
- list-style: none;
- font-weight: 600;
- cursor: pointer;
- color: #0dbd8b;
-}
-
-.mx_CreateRoomDialog_details
- .mx_CreateRoomDialog_details_summary::-webkit-details-marker {
- display: none;
-}
-
-.mx_CreateRoomDialog_details > div {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
- margin: 5px 0;
-}
-
-.mx_CreateRoomDialog_details > div input[type="checkbox"] {
- margin-right: 10px;
-}
-
-.mx_CreateRoomDialog_label {
- text-align: left;
- padding-bottom: 12px;
-}
-
-.mx_CreateRoomDialog_input_container {
- padding-right: 20px;
-}
-
-.mx_CreateRoomDialog_input {
- font-size: 1.5rem;
- border-radius: 3px;
- border: 1px solid #e7e7e7;
- padding: 9px;
- color: #2e2f32;
- background-color: #fff;
- width: 100%;
-}
-
-.mx_CreateRoomDialog_aliasContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin: 24px 0 10px;
-}
-
-.mx_CreateRoomDialog_aliasContainer .mx_RoomAliasField {
- margin: 0;
-}
-
-.mx_CreateRoomDialog.mx_Dialog_fixedWidth {
- width: 450px;
-}
-
-.mx_CreateRoomDialog .mx_Dialog_content {
- margin-bottom: 40px;
-}
-
-.mx_CreateRoomDialog .mx_Field_input label,
-.mx_CreateRoomDialog p {
- color: #61708b;
-}
-
-.mx_CreateRoomDialog .mx_SettingsFlag {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_CreateRoomDialog .mx_SettingsFlag_label {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- min-width: 0;
- font-weight: 600;
-}
-
-.mx_CreateRoomDialog .mx_ToggleSwitch {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- margin-left: 30px;
-}
-
-.mx_CreateRoomDialog .mx_Dialog_content > .mx_SettingsFlag {
- margin-top: 24px;
-}
-
-.mx_CreateRoomDialog p {
- margin: 0 85px 0 0;
- font-size: 1.2rem;
-}
-
-.mx_CreateRoomDialog .mx_Dropdown {
- margin-bottom: 8px;
- font-weight: 400;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- color: #2e2f32;
-}
-
-.mx_CreateRoomDialog .mx_Dropdown .mx_Dropdown_input {
- border: 1px solid #e7e7e7;
-}
-
-.mx_CreateRoomDialog .mx_Dropdown .mx_Dropdown_option {
- font-size: 1.4rem;
- line-height: 3.2rem;
- height: 32px;
- min-height: 32px;
-}
-
-.mx_CreateRoomDialog .mx_Dropdown .mx_Dropdown_option > div {
- padding-left: 30px;
- position: relative;
-}
-
-.mx_CreateRoomDialog .mx_Dropdown .mx_Dropdown_option > div:before {
- content: "";
- position: absolute;
- height: 16px;
- width: 16px;
- left: 6px;
- top: 8px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #737d8c;
-}
-
-.mx_CreateRoomDialog .mx_Dropdown .mx_CreateRoomDialog_dropdown_invite:before {
- -webkit-mask-image: url(../../img/element-icons/lock.1f264bd.svg);
- mask-image: url(../../img/element-icons/lock.1f264bd.svg);
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_CreateRoomDialog .mx_Dropdown .mx_CreateRoomDialog_dropdown_public:before {
- -webkit-mask-image: url(../../img/globe.8201f08.svg);
- mask-image: url(../../img/globe.8201f08.svg);
- -webkit-mask-size: 12px;
- mask-size: 12px;
-}
-
-.mx_CreateRoomDialog
- .mx_Dropdown
- .mx_CreateRoomDialog_dropdown_restricted:before {
- -webkit-mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
- mask-image: url(../../img/element-icons/community-members.cbb31c1.svg);
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_DeactivateAccountDialog .mx_Dialog_content {
- margin-bottom: 30px;
-}
-
-.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section {
- margin-top: 60px;
-}
-
-.mx_DeactivateAccountDialog
- .mx_DeactivateAccountDialog_input_section
- .mx_Field {
- width: 300px;
-}
-
-.mx_DevTools_content {
- margin: 10px 0;
-}
-
-.mx_DevTools_ServersInRoomList_button {
- cursor: default !important;
-}
-
-.mx_DevTools_RoomStateExplorer_query {
- margin-bottom: 10px;
-}
-
-.mx_DevTools_RoomStateExplorer_button,
-.mx_DevTools_ServersInRoomList_button {
- margin-bottom: 10px;
- width: 100%;
-}
-
-.mx_DevTools_label_left {
- float: left;
-}
-
-.mx_DevTools_label_right {
- float: right;
-}
-
-.mx_DevTools_label_bottom {
- clear: both;
- border-bottom: 1px solid #e5e5e5;
-}
-
-.mx_DevTools_inputRow {
- display: table-row;
-}
-
-.mx_DevTools_inputLabelCell {
- display: table-cell;
- font-weight: 700;
- padding-right: 24px;
-}
-
-.mx_DevTools_inputCell {
- display: table-cell;
- width: 240px;
-}
-
-.mx_DevTools_inputCell input {
- display: inline-block;
- border: 0;
- border-bottom: 1px solid hsla(0, 0%, 59.2%, 0.5);
- padding: 0;
- width: 240px;
- color: rgba(74, 74, 74, 0.9);
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.6rem;
-}
-
-.mx_DevTools_textarea {
- font-size: 1.2rem;
- max-width: 684px;
- min-height: 250px;
- padding: 10px;
-}
-
-.mx_DevTools_eventTypeStateKeyGroup {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
-}
-
-.mx_DevTools_content .mx_Field_input:first-of-type {
- margin-right: 42px;
-}
-
-.mx_DevTools_tgl {
- display: none;
-}
-
-.mx_DevTools_tgl,
-.mx_DevTools_tgl *,
-.mx_DevTools_tgl + .mx_DevTools_tgl-btn,
-.mx_DevTools_tgl:after,
-.mx_DevTools_tgl :after,
-.mx_DevTools_tgl:before,
-.mx_DevTools_tgl :before {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_DevTools_tgl + .mx_DevTools_tgl-btn::-moz-selection,
-.mx_DevTools_tgl::-moz-selection,
-.mx_DevTools_tgl ::-moz-selection,
-.mx_DevTools_tgl:after::-moz-selection,
-.mx_DevTools_tgl :after::-moz-selection,
-.mx_DevTools_tgl:before::-moz-selection,
-.mx_DevTools_tgl :before::-moz-selection {
- background: none;
-}
-
-.mx_DevTools_tgl + .mx_DevTools_tgl-btn::selection,
-.mx_DevTools_tgl::selection,
-.mx_DevTools_tgl ::selection,
-.mx_DevTools_tgl:after::selection,
-.mx_DevTools_tgl :after::selection,
-.mx_DevTools_tgl:before::selection,
-.mx_DevTools_tgl :before::selection {
- background: none;
-}
-
-.mx_DevTools_tgl + .mx_DevTools_tgl-btn {
- outline: 0;
- display: block;
- width: 7em;
- height: 2em;
- position: relative;
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.mx_DevTools_tgl + .mx_DevTools_tgl-btn:after,
-.mx_DevTools_tgl + .mx_DevTools_tgl-btn:before {
- position: relative;
- display: block;
- content: "";
- width: 50%;
- height: 100%;
-}
-
-.mx_DevTools_tgl + .mx_DevTools_tgl-btn:after {
- left: 0;
-}
-
-.mx_DevTools_tgl + .mx_DevTools_tgl-btn:before {
- display: none;
-}
-
-.mx_DevTools_tgl:checked + .mx_DevTools_tgl-btn:after {
- left: 50%;
-}
-
-.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn {
- padding: 2px;
- -webkit-transition: all 0.2s ease;
- transition: all 0.2s ease;
- font-family: sans-serif;
- -webkit-perspective: 100px;
- perspective: 100px;
-}
-
-.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:after,
-.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:before {
- display: inline-block;
- -webkit-transition: all 0.4s ease;
- transition: all 0.4s ease;
- width: 100%;
- text-align: center;
- position: absolute;
- line-height: 2em;
- font-weight: 700;
- color: #fff;
- top: 0;
- left: 0;
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- border-radius: 4px;
-}
-
-.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:after {
- content: attr(data-tg-on);
- background: #02c66f;
- -webkit-transform: rotateY(-180deg);
- transform: rotateY(-180deg);
-}
-
-.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:before {
- background: #ff3a19;
- content: attr(data-tg-off);
-}
-
-.mx_DevTools_tgl-flip + .mx_DevTools_tgl-btn:active:before {
- -webkit-transform: rotateY(-20deg);
- transform: rotateY(-20deg);
-}
-
-.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:before {
- -webkit-transform: rotateY(180deg);
- transform: rotateY(180deg);
-}
-
-.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:after {
- -webkit-transform: rotateY(0);
- transform: rotateY(0);
- left: 0;
- background: #7fc6a6;
-}
-
-.mx_DevTools_tgl-flip:checked + .mx_DevTools_tgl-btn:active:after {
- -webkit-transform: rotateY(20deg);
- transform: rotateY(20deg);
-}
-
-.mx_DevTools_VerificationRequest {
- border: 1px solid #ccc;
- border-radius: 3px;
- padding: 1px 5px;
- margin-bottom: 6px;
- font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
- monospace;
-}
-
-.mx_DevTools_VerificationRequest dl {
- display: grid;
- grid-template-columns: -webkit-max-content auto;
- grid-template-columns: max-content auto;
- margin: 0;
-}
-
-.mx_DevTools_VerificationRequest dd {
- grid-column-start: 2;
-}
-
-.mx_DevTools_VerificationRequest dd:empty {
- color: #666;
-}
-
-.mx_DevTools_VerificationRequest dd:empty:after {
- content: "(empty)";
-}
-
-.mx_DevTools_VerificationRequest dt {
- font-weight: 700;
- grid-column-start: 1;
-}
-
-.mx_DevTools_VerificationRequest dt:after {
- content: ":";
-}
-
-.mx_DevTools_SettingsExplorer table {
- width: 100%;
- table-layout: fixed;
- border-collapse: collapse;
-}
-
-.mx_DevTools_SettingsExplorer table th {
- border-bottom: 1px solid #0dbd8b;
- text-align: left;
-}
-
-.mx_DevTools_SettingsExplorer table td,
-.mx_DevTools_SettingsExplorer table th {
- width: 360px;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.mx_DevTools_SettingsExplorer table td + td,
-.mx_DevTools_SettingsExplorer table th + th {
- width: auto;
-}
-
-.mx_DevTools_SettingsExplorer table tr:hover {
- background-color: rgba(13, 189, 139, 0.5);
-}
-
-.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_mutable {
- background-color: #0dbd8b;
-}
-
-.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_immutable {
- background-color: #ff4b55;
-}
-
-.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_edit {
- float: right;
- margin-right: 16px;
-}
-
-.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_warning {
- border: 2px solid #ff4b55;
- border-radius: 4px;
- padding: 4px;
- margin-bottom: 8px;
-}
-
-.mx_EditCommunityPrototypeDialog.mx_Dialog_fixedWidth {
- width: 360px;
-}
-
-.mx_EditCommunityPrototypeDialog .mx_Dialog_content {
- margin-bottom: 12px;
-}
-
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
- display: block;
- height: 32px;
- font-size: 1.6rem;
- line-height: 32px;
-}
-
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_EditCommunityPrototypeDialog_rowAvatar {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_EditCommunityPrototypeDialog_avatarContainer {
- margin-top: 20px;
- margin-bottom: 20px;
-}
-
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_EditCommunityPrototypeDialog_avatarContainer
- .mx_EditCommunityPrototypeDialog_avatar,
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_EditCommunityPrototypeDialog_avatarContainer
- .mx_EditCommunityPrototypeDialog_placeholderAvatar {
- width: 96px;
- height: 96px;
- border-radius: 96px;
-}
-
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_EditCommunityPrototypeDialog_avatarContainer
- .mx_EditCommunityPrototypeDialog_placeholderAvatar {
- background-color: #368bd6;
-}
-
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_EditCommunityPrototypeDialog_avatarContainer
- .mx_EditCommunityPrototypeDialog_placeholderAvatar:before {
- display: inline-block;
- background-color: #fff;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 96px;
- mask-size: 96px;
- width: 96px;
- height: 96px;
- -webkit-mask-position: center;
- mask-position: center;
- content: "";
- vertical-align: middle;
- -webkit-mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
- mask-image: url(../../img/element-icons/add-photo.c0b4c3b.svg);
-}
-
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_EditCommunityPrototypeDialog_tip {
- margin-left: 20px;
-}
-
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_EditCommunityPrototypeDialog_tip
- > b,
-.mx_EditCommunityPrototypeDialog
- .mx_Dialog_content
- .mx_EditCommunityPrototypeDialog_tip
- > span {
- display: block;
- color: #61708b;
-}
-
-.mx_ExportDialog .mx_ExportDialog_subheading {
- font-size: 1.6rem;
- display: block;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-weight: 600;
- color: #2e2f32;
- margin-top: 18px;
- margin-bottom: 12px;
-}
-
-.mx_ExportDialog.mx_ExportDialog_Exporting .mx_ExportDialog_options {
- pointer-events: none;
-}
-
-.mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_select:before {
- display: none;
-}
-
-.mx_ExportDialog.mx_ExportDialog_Exporting
- .mx_RadioButton
- input[type="radio"]:checked
- + div
- > div {
- background: grey;
-}
-
-.mx_ExportDialog.mx_ExportDialog_Exporting
- .mx_RadioButton
- input[type="radio"]:checked
- + div {
- border-color: unset;
-}
-
-.mx_ExportDialog.mx_ExportDialog_Exporting
- .mx_Field_valid.mx_Field:focus-within
- label,
-.mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_valid.mx_Field label {
- color: unset;
-}
-
-.mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_valid.mx_Field,
-.mx_ExportDialog.mx_ExportDialog_Exporting
- .mx_Field_valid.mx_Field:focus-within {
- border-color: #e7e7e7;
-}
-
-.mx_ExportDialog.mx_ExportDialog_Exporting
- .mx_Checkbox
- input[type="checkbox"]:checked
- + label
- > .mx_Checkbox_background {
- background: grey;
- border-color: grey;
-}
-
-.mx_ExportDialog .mx_ExportDialog_progress .mx_Dialog_buttons {
- margin-top: unset;
- margin-left: 18px;
-}
-
-.mx_ExportDialog .mx_ExportDialog_progress .mx_ExportDialog_spinner {
- -webkit-animation: mx_rotate 2s linear infinite;
- animation: mx_rotate 2s linear infinite;
- z-index: 2;
- position: relative;
- margin-right: 10px;
- width: 24px;
- height: 24px;
-}
-
-.mx_ExportDialog
- .mx_ExportDialog_progress
- .mx_ExportDialog_spinner
- .mx_ExportDialog_spinner_path {
- stroke: #0dbd8b;
- stroke-linecap: round;
- -webkit-animation: mx_dash 1.5s ease-in-out infinite;
- animation: mx_dash 1.5s ease-in-out infinite;
-}
-
-.mx_ExportDialog .mx_ExportDialog_progress {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_ExportDialog .mx_RadioButton > .mx_RadioButton_content {
- margin-top: 5px;
- margin-bottom: 5px;
-}
-
-.mx_ExportDialog .mx_Field {
- width: 256px;
-}
-
-.mx_ExportDialog .mx_Field_postfix {
- padding: 9px 10px;
-}
-
-@-webkit-keyframes mx_rotate {
- to {
- -webkit-transform: rotate(1turn);
- transform: rotate(1turn);
- }
-}
-
-@keyframes mx_rotate {
- to {
- -webkit-transform: rotate(1turn);
- transform: rotate(1turn);
- }
-}
-
-@-webkit-keyframes mx_dash {
- 0% {
- stroke-dasharray: 1, 150;
- stroke-dashoffset: 0;
- }
- 50% {
- stroke-dasharray: 90, 150;
- stroke-dashoffset: -35;
- }
- to {
- stroke-dasharray: 90, 150;
- stroke-dashoffset: -124;
- }
-}
-
-@keyframes mx_dash {
- 0% {
- stroke-dasharray: 1, 150;
- stroke-dashoffset: 0;
- }
- 50% {
- stroke-dasharray: 90, 150;
- stroke-dashoffset: -35;
- }
- to {
- stroke-dasharray: 90, 150;
- stroke-dashoffset: -124;
- }
-}
-
-.mx_FeedbackDialog hr {
- margin: 24px 0;
- border-color: #e7e7e7;
-}
-
-.mx_FeedbackDialog .mx_Dialog_content {
- margin-bottom: 24px;
-}
-
-.mx_FeedbackDialog .mx_Dialog_content > h2 {
- margin-bottom: 32px;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_section {
- position: relative;
- padding-left: 52px;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_section > p {
- color: #8d99a5;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link {
- padding: 0;
- font-size: inherit;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link,
-.mx_FeedbackDialog .mx_FeedbackDialog_section a {
- color: #0dbd8b;
- text-decoration: underline;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_section:after,
-.mx_FeedbackDialog .mx_FeedbackDialog_section:before {
- content: "";
- position: absolute;
- width: 40px;
- height: 40px;
- left: 0;
- top: 0;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_section:before {
- background-color: #c1c6cd;
- border-radius: 20px;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_section:after {
- background: #fff;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 24px;
- mask-size: 24px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_reportBug:after {
- -webkit-mask-image: url(../../img/feather-customised/bug.3dc7afa.svg);
- mask-image: url(../../img/feather-customised/bug.3dc7afa.svg);
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- font-size: 20px;
- -webkit-transition: font-size 1s, border 0.5s;
- transition: font-size 1s, border 0.5s;
- border-radius: 50%;
- border: 2px solid transparent;
- margin-top: 12px;
- margin-bottom: 24px;
- vertical-align: top;
- cursor: pointer;
-}
-
-.mx_FeedbackDialog
- .mx_FeedbackDialog_rateApp
- .mx_RadioButton
- input[type="radio"]
- + div {
- display: none;
-}
-
-.mx_FeedbackDialog
- .mx_FeedbackDialog_rateApp
- .mx_RadioButton
- .mx_RadioButton_content {
- background: #c1c6cd;
- width: 40px;
- height: 40px;
- text-align: center;
- line-height: 40px;
- border-radius: 20px;
- margin: 5px;
-}
-
-.mx_FeedbackDialog
- .mx_FeedbackDialog_rateApp
- .mx_RadioButton
- .mx_RadioButton_spacer {
- display: none;
-}
-
-.mx_FeedbackDialog
- .mx_FeedbackDialog_rateApp
- .mx_RadioButton
- + .mx_RadioButton {
- margin-left: 16px;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_RadioButton_checked {
- font-size: 24px;
- border-color: #0dbd8b;
-}
-
-.mx_FeedbackDialog .mx_FeedbackDialog_rateApp:after {
- -webkit-mask-image: url(../../img/element-icons/feedback.a91241e.svg);
- mask-image: url(../../img/element-icons/feedback.a91241e.svg);
-}
-
-.mx_ForwardDialog {
- width: 520px;
- color: #2e2f32;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -ms-flex-wrap: nowrap;
- flex-wrap: nowrap;
- min-height: 0;
- height: 80vh;
-}
-
-.mx_ForwardDialog > h3 {
- margin: 0 0 6px;
- color: #737d8c;
- font-size: 1.2rem;
- font-weight: 600;
- line-height: 1.5rem;
-}
-
-.mx_ForwardDialog > .mx_ForwardDialog_preview {
- max-height: 30%;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- overflow-y: auto;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardDialog_preview
- .mx_EventTile[data-layout="bubble"] {
- margin-top: 20px;
-}
-
-.mx_ForwardDialog > .mx_ForwardDialog_preview div {
- pointer-events: none;
-}
-
-.mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile_e2eIcon_unencrypted,
-.mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile_msgOption,
-.mx_ForwardDialog > .mx_ForwardDialog_preview .mx_MFileBody_download {
- display: none;
-}
-
-.mx_ForwardDialog > hr {
- width: 100%;
- border: none;
- border-top: 1px solid #e7e7e7;
- margin: 12px 0;
-}
-
-.mx_ForwardDialog > .mx_ForwardList {
- display: contents;
-}
-
-.mx_ForwardDialog > .mx_ForwardList .mx_SearchBox {
- margin: 0 0 15px;
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
-}
-
-.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_content {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_noResults {
- display: block;
- margin-top: 24px;
-}
-
-.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results:not(:first-child) {
- margin-top: 24px;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- height: 32px;
- padding: 6px;
- border-radius: 8px;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry:hover {
- background-color: hsla(0, 0%, 91%, 0.77);
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_roomButton {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-right: 12px;
- min-width: 0;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_roomButton
- .mx_DecoratedRoomAvatar {
- margin-right: 12px;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_roomButton
- .mx_ForwardList_entry_name {
- font-size: 1.5rem;
- line-height: 30px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- margin-right: 12px;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_sendButton {
- position: relative;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_sendButton:not(.mx_ForwardList_canSend)
- .mx_ForwardList_sendLabel {
- visibility: hidden;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_sendButton
- .mx_ForwardList_sendIcon,
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_sendButton
- .mx_NotificationBadge {
- position: absolute;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_sendButton
- .mx_NotificationBadge {
- background-color: #fff;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_sendButton.mx_ForwardList_sending
- .mx_ForwardList_sendIcon {
- background-color: #0dbd8b;
- -webkit-mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
- mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 14px;
- mask-size: 14px;
- width: 14px;
- height: 14px;
-}
-
-.mx_ForwardDialog
- > .mx_ForwardList
- .mx_ForwardList_results
- .mx_ForwardList_entry
- .mx_ForwardList_sendButton.mx_ForwardList_sent
- .mx_ForwardList_sendIcon {
- background-color: #0dbd8b;
- -webkit-mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
- mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 14px;
- mask-size: 14px;
- width: 14px;
- height: 14px;
-}
-
-.mx_GroupAddressPicker_checkboxContainer {
- margin-top: 10px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_HostSignupDialog {
- width: 90vw;
- max-width: 580px;
- height: 80vh;
- max-height: 600px;
- background-color: #fff;
-}
-
-.mx_HostSignupDialog .mx_HostSignupDialog_info {
- text-align: center;
-}
-
-.mx_HostSignupDialog
- .mx_HostSignupDialog_info
- .mx_HostSignupDialog_content_top {
- margin-bottom: 24px;
-}
-
-.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_paragraphs {
- text-align: left;
- padding-left: 25%;
- padding-right: 25%;
-}
-
-.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_buttons {
- margin-bottom: 24px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_HostSignupDialog
- .mx_HostSignupDialog_info
- .mx_HostSignupDialog_buttons
- button {
- padding: 12px;
- margin: 0 16px;
-}
-
-.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: baseline;
- -ms-flex-align: baseline;
- align-items: baseline;
-}
-
-.mx_HostSignupDialog .mx_HostSignupDialog_info .mx_HostSignupDialog_footer img {
- padding-right: 5px;
-}
-
-.mx_HostSignupDialog iframe {
- width: 100%;
- height: 100%;
- border: none;
- background-color: #fff;
- min-height: 540px;
-}
-
-.mx_HostSignupDialog_text_dark {
- color: #2e2f32;
-}
-
-.mx_HostSignupDialog_text_light {
- color: #737d8c;
-}
-
-.mx_HostSignup_maximize_button {
- -webkit-mask: url(../../img/feather-customised/maximise.dc32127.svg);
- mask: url(../../img/feather-customised/maximise.dc32127.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: cover;
- mask-size: cover;
- right: 10px;
-}
-
-.mx_HostSignup_maximize_button,
-.mx_HostSignup_minimize_button {
- width: 14px;
- height: 14px;
- background-color: #c1c1c1;
- cursor: pointer;
- position: absolute;
- top: 10px;
-}
-
-.mx_HostSignup_minimize_button {
- -webkit-mask: url(../../img/feather-customised/minimise.aec9142.svg);
- mask: url(../../img/feather-customised/minimise.aec9142.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: cover;
- mask-size: cover;
- right: 25px;
-}
-
-.mx_HostSignup_persisted {
- width: 90vw;
- max-width: 580px;
- height: 80vh;
- max-height: 600px;
- top: 0;
- left: 0;
- position: fixed;
- display: none;
-}
-
-.mx_HostSignupDialog_minimized {
- position: fixed;
- bottom: 80px;
- right: 26px;
- width: 314px;
- height: 217px;
- overflow: hidden;
-}
-
-.mx_HostSignupDialog_minimized.mx_Dialog {
- padding: 12px;
-}
-
-.mx_HostSignupDialog_minimized .mx_Dialog_title {
- text-align: left !important;
- padding-left: 20px;
- font-size: 1.5rem;
-}
-
-.mx_HostSignupDialog_minimized iframe {
- width: 100%;
- height: 100%;
- border: none;
- background-color: #fff;
-}
-
-.mx_IncomingSasDialog_opponentProfile_image {
- position: relative;
-}
-
-.mx_IncomingSasDialog_opponentProfile h2 {
- display: inline-block;
- margin-left: 10px;
-}
-
-.mx_InviteDialog_transferWrapper .mx_Dialog {
- padding-bottom: 16px;
-}
-
-.mx_InviteDialog_addressBar {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- margin: 8px 45px 0 0;
-}
-
-.mx_InviteDialog_addressBar .mx_InviteDialog_editor {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- width: 100%;
- background-color: #f3f8fd;
- border-radius: 4px;
- min-height: 25px;
- padding-left: 8px;
- overflow-x: hidden;
- overflow-y: auto;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
-}
-
-.mx_InviteDialog_addressBar .mx_InviteDialog_editor .mx_InviteDialog_userTile {
- margin: 6px 6px 0 0;
- display: inline-block;
- min-width: -webkit-max-content;
- min-width: -moz-max-content;
- min-width: max-content;
-}
-
-.mx_InviteDialog_addressBar .mx_InviteDialog_editor > input[type="text"] {
- margin: 6px 0 !important;
- height: 24px;
- line-height: 2.4rem;
- font-size: 1.4rem;
- padding-left: 12px;
- border: 0 !important;
- outline: 0 !important;
- resize: none;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- min-width: 40%;
- -webkit-box-flex: 1 !important;
- -ms-flex: 1 !important;
- flex: 1 !important;
- color: #2e2f32 !important;
-}
-
-.mx_InviteDialog_addressBar .mx_InviteDialog_goButton {
- min-width: 48px;
- margin-left: 10px;
- height: 25px;
- line-height: 2.5rem;
-}
-
-.mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner .mx_Spinner {
- width: 20px;
- height: 20px;
- margin-left: 5px;
- display: inline-block;
- vertical-align: middle;
-}
-
-.mx_InviteDialog_section {
- padding-bottom: 4px;
-}
-
-.mx_InviteDialog_section h3 {
- font-size: 1.2rem;
- color: #61708b;
- font-weight: 700;
- text-transform: uppercase;
-}
-
-.mx_InviteDialog_section > p {
- margin: 0;
-}
-
-.mx_InviteDialog_section > span {
- color: #2e2f32;
-}
-
-.mx_InviteDialog_section .mx_InviteDialog_subname {
- margin-bottom: 10px;
- margin-top: -10px;
- font-size: 1.2rem;
- color: #61708b;
-}
-
-.mx_InviteDialog_section_hidden_suggestions_disclaimer {
- padding: 8px 0 16px;
- font-size: 1.4rem;
-}
-
-.mx_InviteDialog_section_hidden_suggestions_disclaimer > span {
- color: #2e2f32;
- font-weight: 600;
-}
-
-.mx_InviteDialog_section_hidden_suggestions_disclaimer > p {
- margin: 0;
-}
-
-.mx_InviteDialog_footer {
- border-top: 1px solid #e7e7e7;
-}
-
-.mx_InviteDialog_footer > h3 {
- margin: 12px 0;
- font-size: 1.2rem;
- color: #61708b;
- font-weight: 700;
- text-transform: uppercase;
-}
-
-.mx_InviteDialog_footer .mx_InviteDialog_footer_link {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- border-radius: 4px;
- border: 1px solid #747474;
- padding: 8px;
-}
-
-.mx_InviteDialog_footer .mx_InviteDialog_footer_link > a {
- text-decoration: none;
- -ms-flex-negative: 1;
- flex-shrink: 1;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.mx_InviteDialog_footer .mx_InviteDialog_footer_link_copy {
- -ms-flex-negative: 0;
- flex-shrink: 0;
- cursor: pointer;
- margin-left: 20px;
- display: inherit;
-}
-
-.mx_InviteDialog_footer .mx_InviteDialog_footer_link_copy > div {
- -webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
- mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
- background-color: #2e2f32;
- margin-left: 5px;
- width: 20px;
- height: 20px;
- background-repeat: no-repeat;
-}
-
-.mx_InviteDialog_roomTile {
- cursor: pointer;
- padding: 5px 10px;
-}
-
-.mx_InviteDialog_roomTile:hover {
- background-color: #f3f8fd;
- border-radius: 4px;
-}
-
-.mx_InviteDialog_roomTile * {
- vertical-align: middle;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack {
- display: inline-block;
- position: relative;
- width: 36px;
- height: 36px;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_avatarStack > * {
- position: absolute;
- top: 0;
- left: 0;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected {
- width: 36px;
- height: 36px;
- border-radius: 36px;
- background-color: #368bd6;
- display: inline-block;
- position: relative;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_selected:before {
- content: "";
- width: 24px;
- height: 24px;
- grid-column: 1;
- grid-row: 1;
- -webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
- mask-image: url(../../img/feather-customised/check.5745b4e.svg);
- -webkit-mask-size: 100%;
- mask-size: 100%;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- position: absolute;
- top: 6px;
- left: 6px;
- background-color: #fff;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_nameStack {
- display: inline-block;
- overflow: hidden;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_name {
- font-weight: 600;
- font-size: 1.4rem;
- color: #2e2f32;
- margin-left: 7px;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_userId {
- font-size: 1.2rem;
- color: #61708b;
- margin-left: 7px;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_name,
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_userId {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_time {
- text-align: right;
- font-size: 1.2rem;
- color: #61708b;
- float: right;
- line-height: 3.6rem;
-}
-
-.mx_InviteDialog_roomTile .mx_InviteDialog_roomTile_highlight {
- font-weight: 900;
-}
-
-.mx_InviteDialog_userTile {
- margin-right: 8px;
-}
-
-.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill {
- background-color: #368bd6;
- border-radius: 12px;
- display: inline-block;
- height: 24px;
- line-height: 2.4rem;
- padding-left: 8px;
- padding-right: 8px;
- color: #fff;
-}
-
-.mx_InviteDialog_userTile
- .mx_InviteDialog_userTile_pill
- .mx_InviteDialog_userTile_avatar {
- border-radius: 20px;
- position: relative;
- left: -5px;
- top: 2px;
-}
-
-.mx_InviteDialog_userTile
- .mx_InviteDialog_userTile_pill
- .mx_InviteDialog_userTile_name,
-.mx_InviteDialog_userTile
- .mx_InviteDialog_userTile_pill
- img.mx_InviteDialog_userTile_avatar {
- vertical-align: top;
-}
-
-.mx_InviteDialog_userTile
- .mx_InviteDialog_userTile_pill
- .mx_InviteDialog_userTile_threepidAvatar {
- background-color: #fff;
-}
-
-.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove {
- display: inline-block;
- margin-left: 4px;
-}
-
-.mx_InviteDialog_other {
- height: 600px;
- padding-left: 20px;
-}
-
-.mx_InviteDialog_other .mx_InviteDialog_userSections {
- height: calc(100% - 115px);
-}
-
-.mx_InviteDialog_content {
- height: calc(100% - 36px);
- overflow: hidden;
-}
-
-.mx_InviteDialog_transfer {
- width: 496px;
- height: 466px;
-}
-
-.mx_InviteDialog_transfer,
-.mx_InviteDialog_transfer .mx_InviteDialog_content {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_InviteDialog_transfer .mx_InviteDialog_content .mx_TabbedView {
- height: calc(100% - 60px);
-}
-
-.mx_InviteDialog_transfer .mx_InviteDialog_content {
- overflow: visible;
-}
-
-.mx_InviteDialog_transfer .mx_InviteDialog_addressBar {
- margin-top: 8px;
-}
-
-.mx_InviteDialog_transfer input[type="checkbox"] {
- margin-right: 8px;
-}
-
-.mx_InviteDialog_userSections {
- margin-top: 4px;
- overflow-y: auto;
- padding: 0 45px 4px 0;
-}
-
-.mx_InviteDialog_hasFooter .mx_InviteDialog_userSections {
- height: calc(100% - 175px);
-}
-
-.mx_InviteDialog_helpText {
- margin: 0;
-}
-
-.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link {
- padding: 0;
-}
-
-.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField {
- border-top: 0;
- border-left: 0;
- border-right: 0;
- border-radius: 0;
- margin-top: 0;
- border-color: #c1c6cd;
-}
-
-.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField input {
- font-size: 18px;
- font-weight: 600;
- padding-top: 0;
-}
-
-.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField:focus-within {
- border-color: #0dbd8b;
-}
-
-.mx_InviteDialog_dialPadField .mx_Field_postfix {
- border-left: none;
-}
-
-.mx_InviteDialog_dialPad {
- width: 224px;
- margin-top: 16px;
- margin-left: auto;
- margin-right: auto;
-}
-
-.mx_InviteDialog_dialPad .mx_DialPad {
- grid-row-gap: 16px;
- row-gap: 16px;
- grid-column-gap: 48px;
- -webkit-column-gap: 48px;
- -moz-column-gap: 48px;
- column-gap: 48px;
- margin-left: auto;
- margin-right: auto;
-}
-
-.mx_InviteDialog_transferConsultConnect {
- padding-top: 16px;
- position: relative;
- width: 496px;
- left: -24px;
- padding-left: 24px;
- padding-right: 24px;
- border-top: 1px solid #e3e8f0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_InviteDialog_transferConsultConnect_pushRight {
- margin-left: auto;
-}
-
-.mx_InviteDialog_userDirectoryIcon:before {
- -webkit-mask-image: url(../../img/voip/tab-userdirectory.cc3ed9a.svg);
- mask-image: url(../../img/voip/tab-userdirectory.cc3ed9a.svg);
-}
-
-.mx_InviteDialog_dialPadIcon:before {
- -webkit-mask-image: url(../../img/voip/tab-dialpad.a4a190e.svg);
- mask-image: url(../../img/voip/tab-dialpad.a4a190e.svg);
-}
-
-.mx_InviteDialog_multiInviterError > h4 {
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #737d8c;
- font-weight: 400;
-}
-
-.mx_InviteDialog_multiInviterError
- > div
- .mx_InviteDialog_multiInviterError_entry {
- margin-bottom: 24px;
-}
-
-.mx_InviteDialog_multiInviterError
- > div
- .mx_InviteDialog_multiInviterError_entry
- .mx_InviteDialog_multiInviterError_entry_userProfile
- .mx_InviteDialog_multiInviterError_entry_name {
- margin-left: 6px;
- font-size: 1.5rem;
- line-height: 2.4rem;
- font-weight: 600;
- color: #2e2f32;
-}
-
-.mx_InviteDialog_multiInviterError
- > div
- .mx_InviteDialog_multiInviterError_entry
- .mx_InviteDialog_multiInviterError_entry_userProfile
- .mx_InviteDialog_multiInviterError_entry_userId {
- margin-left: 6px;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #8d99a5;
-}
-
-.mx_InviteDialog_multiInviterError
- > div
- .mx_InviteDialog_multiInviterError_entry
- .mx_InviteDialog_multiInviterError_entry_error {
- margin-left: 32px;
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #ff4b55;
-}
-
-.mx_KeyboardShortcutsDialog {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- margin-bottom: -50px;
- max-height: 1100px;
-}
-
-.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category {
- width: 33.3333%;
- margin: 0 0 40px;
-}
-
-.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_category > div {
- padding-left: 5px;
-}
-
-.mx_KeyboardShortcutsDialog h3 {
- margin: 0 0 10px;
-}
-
-.mx_KeyboardShortcutsDialog h5 {
- margin: 15px 0 5px;
- font-weight: 400;
-}
-
-.mx_KeyboardShortcutsDialog kbd {
- padding: 5px;
- border-radius: 4px;
- background-color: #f3f8fd;
- margin-right: 5px;
- min-width: 20px;
- text-align: center;
- display: inline-block;
- border: 1px solid #e9edf1;
- -webkit-box-shadow: 0 2px #e9edf1;
- box-shadow: 0 2px #e9edf1;
- margin-bottom: 4px;
- text-transform: capitalize;
-}
-
-.mx_KeyboardShortcutsDialog kbd + kbd {
- margin-left: 5px;
-}
-
-.mx_KeyboardShortcutsDialog .mx_KeyboardShortcutsDialog_inline div {
- display: inline;
-}
-
-.mx_ManageRestrictedJoinRuleDialog,
-.mx_ManageRestrictedJoinRuleDialog_wrapper .mx_Dialog {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_ManageRestrictedJoinRuleDialog {
- width: 480px;
- color: #2e2f32;
- -ms-flex-wrap: nowrap;
- flex-wrap: nowrap;
- min-height: 0;
- height: 60vh;
-}
-
-.mx_ManageRestrictedJoinRuleDialog .mx_SearchBox {
- margin: 0 0 15px;
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
-}
-
-.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_content {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_noResults {
- display: block;
- margin-top: 24px;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section:not(:first-child) {
- margin-top: 24px;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section
- > h3 {
- margin: 0;
- color: #737d8c;
- font-size: 1.2rem;
- font-weight: 600;
- line-height: 1.5rem;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section
- .mx_ManageRestrictedJoinRuleDialog_entry {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-top: 12px;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section
- .mx_ManageRestrictedJoinRuleDialog_entry
- > div {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section
- .mx_ManageRestrictedJoinRuleDialog_entry
- .mx_RoomAvatar_isSpaceRoom
- img,
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section
- .mx_ManageRestrictedJoinRuleDialog_entry
- img.mx_RoomAvatar_isSpaceRoom {
- border-radius: 4px;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section
- .mx_ManageRestrictedJoinRuleDialog_entry
- .mx_ManageRestrictedJoinRuleDialog_entry_name {
- margin: 0 8px;
- font-size: 1.5rem;
- line-height: 30px;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section
- .mx_ManageRestrictedJoinRuleDialog_entry
- .mx_ManageRestrictedJoinRuleDialog_entry_description {
- margin-top: 8px;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #8d99a5;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section
- .mx_ManageRestrictedJoinRuleDialog_entry
- .mx_Checkbox {
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section_spaces
- .mx_BaseAvatar {
- margin-right: 12px;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section_spaces
- .mx_BaseAvatar_image {
- border-radius: 8px;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section_info {
- position: relative;
- border-radius: 8px;
- margin: 12px 0;
- padding: 8px 8px 8px 42px;
- background-color: #f3f8fd;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #737d8c;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_section_info:before {
- content: "";
- position: absolute;
- left: 10px;
- top: calc(50% - 8px);
- height: 16px;
- width: 16px;
- background-color: #737d8c;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- mask-image: url(../../img/element-icons/room/room-summary.1ad0865.svg);
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_footer {
- margin-top: 20px;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_footer
- .mx_ManageRestrictedJoinRuleDialog_footer_buttons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
- margin-left: auto;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_footer
- .mx_ManageRestrictedJoinRuleDialog_footer_buttons
- .mx_AccessibleButton {
- display: inline-block;
-}
-
-.mx_ManageRestrictedJoinRuleDialog
- .mx_ManageRestrictedJoinRuleDialog_footer
- .mx_ManageRestrictedJoinRuleDialog_footer_buttons
- .mx_AccessibleButton
- + .mx_AccessibleButton {
- margin-left: 24px;
-}
-
-.mx_MessageEditHistoryDialog .mx_Dialog_header > .mx_Dialog_title {
- text-align: center;
-}
-
-.mx_MessageEditHistoryDialog {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- max-height: 60vh;
-}
-
-.mx_MessageEditHistoryDialog_scrollPanel {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
-}
-
-.mx_MessageEditHistoryDialog_error {
- color: #ff4b55;
- text-align: center;
-}
-
-.mx_MessageEditHistoryDialog_edits {
- list-style-type: none;
- font-size: 1.4rem;
- padding: 0;
- color: #2e2f32;
-}
-
-.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_deletion,
-.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_insertion {
- padding: 0 2px;
-}
-
-.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_deletion {
- color: #ff4c55;
- background-color: rgba(255, 76, 85, 0.1);
- text-decoration: line-through;
-}
-
-.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_insertion {
- color: #1aa97b;
- background-color: rgba(26, 169, 123, 0.1);
- text-decoration: underline;
-}
-
-.mx_MessageEditHistoryDialog_edits .mx_EventTile_content,
-.mx_MessageEditHistoryDialog_edits .mx_EventTile_line {
- margin-right: 0;
-}
-
-.mx_MessageEditHistoryDialog_edits .mx_MessageActionBar .mx_AccessibleButton {
- font-size: 1rem;
- padding: 0 8px;
-}
-
-.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning {
- margin-bottom: 24px;
-}
-
-.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning > img {
- vertical-align: middle;
- margin-right: 8px;
-}
-
-.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons {
- float: right;
- margin-top: 24px;
-}
-
-.mx_ModalWidgetDialog
- .mx_ModalWidgetDialog_buttons
- .mx_AccessibleButton
- + .mx_AccessibleButton {
- margin-left: 8px;
-}
-
-.mx_ModalWidgetDialog iframe {
- width: 100%;
- height: 450px;
- border: 0;
- border-radius: 8px;
-}
-
-.mx_NewSessionReviewDialog_header {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- margin-top: 0;
-}
-
-.mx_NewSessionReviewDialog_headerIcon {
- width: 24px;
- height: 24px;
- margin-right: 4px;
- position: relative;
-}
-
-.mx_NewSessionReviewDialog_deviceName {
- font-weight: 600;
-}
-
-.mx_NewSessionReviewDialog_deviceID {
- font-size: 1.2rem;
- color: #8d99a5;
-}
-
-.mx_RegistrationEmailPromptDialog {
- width: 417px;
-}
-
-.mx_RegistrationEmailPromptDialog .mx_Dialog_content {
- margin-bottom: 24px;
- color: #8d99a5;
-}
-
-.mx_RegistrationEmailPromptDialog .mx_Dialog_primary {
- width: 100%;
-}
-
-.mx_RoomSettingsDialog_settingsIcon:before {
- -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
- mask-image: url(../../img/element-icons/settings.6b381af.svg);
-}
-
-.mx_RoomSettingsDialog_securityIcon:before {
- -webkit-mask-image: url(../../img/element-icons/security.66f2fa6.svg);
- mask-image: url(../../img/element-icons/security.66f2fa6.svg);
-}
-
-.mx_RoomSettingsDialog_rolesIcon:before {
- -webkit-mask-image: url(../../img/element-icons/room/settings/roles.bad9a9e.svg);
- mask-image: url(../../img/element-icons/room/settings/roles.bad9a9e.svg);
-}
-
-.mx_RoomSettingsDialog_notificationsIcon:before {
- -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
- mask-image: url(../../img/element-icons/notifications.d298b39.svg);
-}
-
-.mx_RoomSettingsDialog_bridgesIcon:before {
- -webkit-mask-image: url(../../img/feather-customised/bridge.b2ca042.svg);
- mask-image: url(../../img/feather-customised/bridge.b2ca042.svg);
-}
-
-.mx_RoomSettingsDialog_warningIcon:before {
- -webkit-mask-image: url(../../img/element-icons/room/settings/advanced.e079c15.svg);
- mask-image: url(../../img/element-icons/room/settings/advanced.e079c15.svg);
-}
-
-.mx_RoomSettingsDialog .mx_Dialog_title {
- -ms-text-overflow: ellipsis;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- margin: 0 auto;
- padding-right: 80px;
-}
-
-.mx_RoomSettingsDialog
- .mx_AvatarSetting_avatar
- .mx_AvatarSetting_avatarPlaceholder:before {
- -webkit-mask: url(../../img/feather-customised/image.a8671b8.svg);
- mask: url(../../img/feather-customised/image.a8671b8.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 36px;
- mask-size: 36px;
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_RoomSettingsDialog_BridgeList {
- padding: 0;
-}
-
-.mx_RoomSettingsDialog_BridgeList .mx_AccessibleButton {
- display: inline;
- margin: 0;
- padding: 0;
-}
-
-.mx_RoomSettingsDialog_BridgeList li {
- list-style-type: none;
- padding: 5px;
- margin-bottom: 8px;
- border: 1px solid transparent;
- border-radius: 5px;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-icon {
- float: left;
- padding-right: 10px;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-icon * {
- border-radius: 5px;
- border: 1px solid #e3e8f0;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-icon .noProtocolIcon {
- width: 48px;
- height: 48px;
- background: #e3e8f0;
- border-radius: 5px;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon {
- float: left;
- margin-right: 5px;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon img {
- border-radius: 5px;
- border-width: 1px;
- border-color: transparent;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-icon .protocol-icon span {
- left: auto;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-data {
- display: inline-block;
- width: 85%;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-data > h3 {
- margin-top: 0;
- margin-bottom: 0;
- font-size: 16pt;
- color: #2e2f32;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-data > * {
- margin-top: 4px;
- margin-bottom: 0;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-data .workspace-channel-details {
- color: #2e2f32;
- font-weight: 600;
-}
-
-.mx_RoomSettingsDialog_BridgeList
- li
- .column-data
- .workspace-channel-details
- .channel {
- margin-left: 5px;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-data .metadata {
- color: #61708b;
- margin-bottom: 0;
- overflow-y: visible;
- text-overflow: ellipsis;
- white-space: normal;
- padding: 0;
-}
-
-.mx_RoomSettingsDialog_BridgeList li .column-data .metadata > li {
- padding: 0;
- border: 0;
-}
-
-.mx_RoomUpgradeDialog {
- padding-right: 70px;
-}
-
-.mx_RoomUpgradeWarningDialog {
- max-width: 38vw;
- width: 38vw;
-}
-
-.mx_RoomUpgradeWarningDialog .mx_SettingsFlag {
- font-weight: 700;
-}
-
-.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_ToggleSwitch {
- display: inline-block;
- vertical-align: middle;
- margin-left: 8px;
- float: right;
-}
-
-.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_SettingsFlag_label {
- display: inline-block;
- vertical-align: middle;
-}
-
-.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content {
- padding-right: 85px;
- color: #2e2f32;
-}
-
-.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content hr {
- border-color: #2e2f32;
- opacity: 0.1;
- border-bottom: none;
-}
-
-.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul {
- padding: 16px;
-}
-
-.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul li:nth-child(n + 2) {
- margin-top: 16px;
-}
-
-.mx_ServerOfflineDialog
- .mx_ServerOfflineDialog_content
- .mx_ServerOfflineDialog_content_context
- .mx_ServerOfflineDialog_content_context_timestamp {
- display: inline-block;
- width: 115px;
- color: #61708b;
- line-height: 24px;
- vertical-align: top;
-}
-
-.mx_ServerOfflineDialog
- .mx_ServerOfflineDialog_content
- .mx_ServerOfflineDialog_content_context
- .mx_ServerOfflineDialog_content_context_timeline {
- display: inline-block;
- width: calc(100% - 155px);
-}
-
-.mx_ServerOfflineDialog
- .mx_ServerOfflineDialog_content
- .mx_ServerOfflineDialog_content_context
- .mx_ServerOfflineDialog_content_context_timeline
- .mx_ServerOfflineDialog_content_context_timeline_header
- span {
- margin-left: 8px;
- vertical-align: middle;
-}
-
-.mx_ServerOfflineDialog
- .mx_ServerOfflineDialog_content
- .mx_ServerOfflineDialog_content_context
- .mx_ServerOfflineDialog_content_context_timeline
- .mx_ServerOfflineDialog_content_context_txn {
- position: relative;
- margin-top: 8px;
-}
-
-.mx_ServerOfflineDialog
- .mx_ServerOfflineDialog_content
- .mx_ServerOfflineDialog_content_context
- .mx_ServerOfflineDialog_content_context_timeline
- .mx_ServerOfflineDialog_content_context_txn
- .mx_ServerOfflineDialog_content_context_txn_desc {
- width: calc(100% - 100px);
-}
-
-.mx_ServerOfflineDialog
- .mx_ServerOfflineDialog_content
- .mx_ServerOfflineDialog_content_context
- .mx_ServerOfflineDialog_content_context_timeline
- .mx_ServerOfflineDialog_content_context_txn
- .mx_AccessibleButton {
- float: right;
- padding: 0;
-}
-
-.mx_ServerPickerDialog {
- width: 468px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_ServerPickerDialog .mx_Dialog_content {
- margin-bottom: 0;
-}
-
-.mx_ServerPickerDialog .mx_Dialog_content > p {
- color: #737d8c;
- font-size: 1.4rem;
- margin: 16px 0;
-}
-
-.mx_ServerPickerDialog .mx_Dialog_content > p:first-of-type {
- margin-bottom: 40px;
-}
-
-.mx_ServerPickerDialog .mx_Dialog_content > p:last-of-type {
- margin: 0 24px 24px;
-}
-
-.mx_ServerPickerDialog .mx_Dialog_content > h4 {
- font-size: 1.5rem;
- font-weight: 600;
- color: #737d8c;
- margin-left: 8px;
-}
-
-.mx_ServerPickerDialog .mx_Dialog_content > a {
- color: #0dbd8b;
- margin-left: 8px;
-}
-
-.mx_ServerPickerDialog
- .mx_ServerPickerDialog_otherHomeserverRadio
- input[type="radio"]
- + div {
- margin-top: auto;
- margin-bottom: auto;
-}
-
-.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver {
- border-top: none;
- border-left: none;
- border-right: none;
- border-radius: unset;
-}
-
-.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > input {
- padding-left: 0;
-}
-
-.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > label {
- margin-left: 0;
-}
-
-.mx_ServerPickerDialog .mx_AccessibleButton_kind_primary {
- width: calc(100% - 64px);
- margin: 0 8px;
- padding: 15px 18px;
-}
-
-.mx_SetEmailDialog_email_input {
- border-radius: 3px;
- border: 1px solid #e7e7e7;
- padding: 9px;
- color: rgba(74, 74, 74, 0.9);
- background-color: #fff;
- font-size: 1.5rem;
- width: 100%;
- max-width: 280px;
- margin-bottom: 10px;
-}
-
-.mx_SetEmailDialog_email_input:focus {
- outline: none;
- -webkit-box-shadow: none;
- box-shadow: none;
- border: 1px solid #0dbd8b;
-}
-
-.mx_RoomSettingsDialog,
-.mx_SpaceSettingsDialog,
-.mx_UserSettingsDialog {
- width: 90vw;
- max-width: 1000px;
- height: 80vh;
-}
-
-.mx_RoomSettingsDialog .mx_TabbedView,
-.mx_SpaceSettingsDialog .mx_TabbedView,
-.mx_UserSettingsDialog .mx_TabbedView {
- top: 65px;
-}
-
-.mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,
-.mx_SpaceSettingsDialog .mx_TabbedView .mx_SettingsTab,
-.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- min-width: 580px;
- padding-right: 100px;
- padding-bottom: 100px;
-}
-
-.mx_RoomSettingsDialog .mx_Dialog_title,
-.mx_SpaceSettingsDialog .mx_Dialog_title,
-.mx_UserSettingsDialog .mx_Dialog_title {
- margin-bottom: 24px;
-}
-
-.mx_ShareDialog hr {
- margin-top: 25px;
- margin-bottom: 25px;
- border-color: #747474;
-}
-
-.mx_ShareDialog_content {
- margin: 10px 0;
-}
-
-.mx_ShareDialog_matrixto {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- border-radius: 5px;
- border: 1px solid #747474;
- margin-bottom: 10px;
- margin-top: 30px;
- padding: 10px;
-}
-
-.mx_ShareDialog_matrixto a {
- text-decoration: none;
-}
-
-.mx_ShareDialog_matrixto_link {
- -ms-flex-negative: 1;
- flex-shrink: 1;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.mx_ShareDialog_matrixto_copy {
- -ms-flex-negative: 0;
- flex-shrink: 0;
- cursor: pointer;
- margin-left: 20px;
- display: inherit;
-}
-
-.mx_ShareDialog_matrixto_copy:after {
- content: "";
- -webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
- mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
- background-color: #2e2f32;
- margin-left: 5px;
- width: 20px;
- height: 20px;
- background-repeat: no-repeat;
-}
-
-.mx_ShareDialog_split {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
-}
-
-.mx_ShareDialog_qrcode_container {
- float: left;
- height: 256px;
- width: 256px;
- margin-right: 64px;
-}
-
-.mx_ShareDialog_qrcode_container + .mx_ShareDialog_social_container {
- width: 299px;
-}
-
-.mx_ShareDialog_social_container {
- display: inline-block;
-}
-
-.mx_ShareDialog_social_icon {
- display: inline-grid;
- margin-right: 10px;
- margin-bottom: 10px;
-}
-
-.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 {
- margin-bottom: 2px;
-}
-
-.mx_SlashCommandHelpDialog .mx_Dialog_content {
- margin-top: 12px;
- margin-bottom: 34px;
-}
-
-.mx_SpaceSettingsDialog {
- color: #2e2f32;
-}
-
-.mx_SpaceSettingsDialog .mx_SpaceSettings_errorText {
- font-weight: 600;
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #ff4b55;
- margin-bottom: 28px;
-}
-
-.mx_SpaceSettingsDialog .mx_ToggleSwitch {
- display: inline-block;
- vertical-align: middle;
- margin-left: 16px;
-}
-
-.mx_SpaceSettingsDialog
- .mx_SettingsTab_section
- .mx_SettingsTab_section_caption {
- margin-top: 12px;
- margin-bottom: 20px;
-}
-
-.mx_SpaceSettingsDialog .mx_SettingsTab_section + .mx_SettingsTab_subheading {
- border-top: 1px solid #e3e8f0;
- margin-top: 0;
- padding-top: 24px;
-}
-
-.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_RadioButton {
- margin-top: 8px;
- margin-bottom: 4px;
-}
-
-.mx_SpaceSettingsDialog
- .mx_SettingsTab_section
- .mx_RadioButton
- .mx_RadioButton_content {
- font-weight: 600;
- line-height: 1.8rem;
- color: #2e2f32;
-}
-
-.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_RadioButton + span {
- font-size: 1.5rem;
- line-height: 1.8rem;
- color: #737d8c;
- margin-left: 26px;
-}
-
-.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_SettingsTab_showAdvanced {
- margin: 16px 0;
- padding: 0;
-}
-
-.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_SettingsFlag {
- margin-top: 24px;
-}
-
-.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-top: 64px;
-}
-
-.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton {
- display: inline-block;
-}
-
-.mx_SpaceSettingsDialog
- .mx_SpaceSettingsDialog_buttons
- .mx_AccessibleButton_kind_link {
- margin-left: auto;
-}
-
-.mx_SpaceSettingsDialog .mx_AccessibleButton_hasKind {
- padding: 8px 22px;
-}
-
-.mx_SpaceSettingsDialog
- .mx_TabbedView_tabLabel
- .mx_SpaceSettingsDialog_generalIcon:before {
- -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
- mask-image: url(../../img/element-icons/settings.6b381af.svg);
-}
-
-.mx_SpaceSettingsDialog
- .mx_TabbedView_tabLabel
- .mx_SpaceSettingsDialog_visibilityIcon:before {
- -webkit-mask-image: url(../../img/element-icons/eye.23b2229.svg);
- mask-image: url(../../img/element-icons/eye.23b2229.svg);
-}
-
-.mx_TabbedIntegrationManagerDialog .mx_Dialog {
- width: 60%;
- height: 70%;
- overflow: hidden;
- padding: 0;
- max-width: none;
- max-height: none;
- position: relative;
-}
-
-.mx_TabbedIntegrationManagerDialog_container {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
-}
-
-.mx_TabbedIntegrationManagerDialog_container
- .mx_TabbedIntegrationManagerDialog_currentManager {
- width: 100%;
- height: 100%;
- border-top: 1px solid #0dbd8b;
-}
-
-.mx_TabbedIntegrationManagerDialog_container
- .mx_TabbedIntegrationManagerDialog_currentManager
- iframe {
- background-color: #fff;
- border: 0;
- width: 100%;
- height: 100%;
-}
-
-.mx_TabbedIntegrationManagerDialog_tab {
- display: inline-block;
- border: 1px solid #0dbd8b;
- border-bottom: 0;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- padding: 10px 8px;
- margin-right: 5px;
-}
-
-.mx_TabbedIntegrationManagerDialog_currentTab {
- background-color: #0dbd8b;
- color: #fff;
-}
-
-.mx_TermsDialog_forIntegrationManager .mx_Dialog {
- width: 60%;
- height: 70%;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_TermsDialog_termsTableHeader {
- font-weight: 700;
- text-align: left;
-}
-
-.mx_TermsDialog_termsTable {
- font-size: 1.2rem;
- width: 100%;
-}
-
-.mx_TermsDialog_service,
-.mx_TermsDialog_summary {
- padding-right: 10px;
-}
-
-.mx_TermsDialog_link {
- display: inline-block;
- -webkit-mask-image: url(../../img/external-link.a8d3e9b.svg);
- mask-image: url(../../img/external-link.a8d3e9b.svg);
- background-color: #0dbd8b;
- width: 10px;
- height: 10px;
-}
-
-.mx_UntrustedDeviceDialog .mx_Dialog_title {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_UntrustedDeviceDialog .mx_Dialog_title .mx_E2EIcon {
- margin-left: 0;
-}
-
-.mx_UploadConfirmDialog_fileIcon {
- margin-right: 5px;
-}
-
-.mx_UploadConfirmDialog_previewOuter {
- text-align: center;
-}
-
-.mx_UploadConfirmDialog_previewInner {
- display: inline-block;
- text-align: left;
-}
-
-.mx_UploadConfirmDialog_imagePreview {
- max-height: 300px;
- max-width: 100%;
- border-radius: 4px;
- border: 1px solid #c1c1c1;
-}
-
-.mx_UserSettingsDialog_settingsIcon:before {
- -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
- mask-image: url(../../img/element-icons/settings.6b381af.svg);
-}
-
-.mx_UserSettingsDialog_appearanceIcon:before {
- -webkit-mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
- mask-image: url(../../img/element-icons/settings/appearance.cdebd40.svg);
-}
-
-.mx_UserSettingsDialog_voiceIcon:before {
- -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
- mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
-}
-
-.mx_UserSettingsDialog_bellIcon:before {
- -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
- mask-image: url(../../img/element-icons/notifications.d298b39.svg);
-}
-
-.mx_UserSettingsDialog_preferencesIcon:before {
- -webkit-mask-image: url(../../img/element-icons/settings/preference.82bfabd.svg);
- mask-image: url(../../img/element-icons/settings/preference.82bfabd.svg);
-}
-
-.mx_UserSettingsDialog_securityIcon:before {
- -webkit-mask-image: url(../../img/element-icons/security.66f2fa6.svg);
- mask-image: url(../../img/element-icons/security.66f2fa6.svg);
-}
-
-.mx_UserSettingsDialog_helpIcon:before {
- -webkit-mask-image: url(../../img/element-icons/settings/help.68b703f.svg);
- mask-image: url(../../img/element-icons/settings/help.68b703f.svg);
-}
-
-.mx_UserSettingsDialog_labsIcon:before {
- -webkit-mask-image: url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);
- mask-image: url(../../img/element-icons/settings/lab-flags.6fbe5e2.svg);
-}
-
-.mx_UserSettingsDialog_mjolnirIcon:before {
- -webkit-mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
- mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
-}
-
-.mx_UserSettingsDialog_flairIcon:before {
- -webkit-mask-image: url(../../img/element-icons/settings/flair.4227a88.svg);
- mask-image: url(../../img/element-icons/settings/flair.4227a88.svg);
-}
-
-.mx_WidgetCapabilitiesPromptDialog .text-muted {
- font-size: 1.2rem;
-}
-
-.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_content {
- margin-bottom: 16px;
-}
-
-.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap {
- margin-top: 20px;
- font-size: 1.5rem;
- line-height: 1.5rem;
-}
-
-.mx_WidgetCapabilitiesPromptDialog
- .mx_WidgetCapabilitiesPromptDialog_cap
- .mx_WidgetCapabilitiesPromptDialog_byline {
- color: #61708b;
- margin-left: 26px;
- font-size: 1.2rem;
- line-height: 1.2rem;
-}
-
-.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_buttons {
- margin-top: 40px;
-}
-
-.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag {
- line-height: calc(1.4rem + 14px);
- color: #61708b;
- font-size: 1.2rem;
-}
-
-.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch {
- display: inline-block;
- vertical-align: middle;
- margin-right: 8px;
- width: 3.2rem;
- height: 1.5rem;
-}
-
-.mx_WidgetCapabilitiesPromptDialog
- .mx_SettingsFlag
- .mx_ToggleSwitch.mx_ToggleSwitch_on
- > .mx_ToggleSwitch_ball {
- left: calc(100% - 1.5rem);
-}
-
-.mx_WidgetCapabilitiesPromptDialog
- .mx_SettingsFlag
- .mx_ToggleSwitch
- .mx_ToggleSwitch_ball {
- width: 1.5rem;
- height: 1.5rem;
- border-radius: 1.5rem;
-}
-
-.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_SettingsFlag_label {
- display: inline-block;
- vertical-align: middle;
-}
-
-.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_ToggleSwitch {
- display: inline-block;
- vertical-align: middle;
- margin-right: 8px;
-}
-
-.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag .mx_SettingsFlag_label {
- display: inline-block;
- vertical-align: middle;
-}
-
-.mx_AccessSecretStorageDialog_reset {
- position: relative;
- padding-left: 24px;
- margin-top: 7px;
-}
-
-.mx_AccessSecretStorageDialog_reset:before {
- content: "";
- display: inline-block;
- position: absolute;
- height: 16px;
- width: 16px;
- left: 0;
- top: 2px;
- background-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
- background-size: contain;
-}
-
-.mx_AccessSecretStorageDialog_reset .mx_AccessSecretStorageDialog_reset_link {
- color: #ff4b55;
-}
-
-.mx_AccessSecretStorageDialog_titleWithIcon:before {
- content: "";
- display: inline-block;
- width: 24px;
- height: 24px;
- margin-right: 8px;
- position: relative;
- top: 5px;
- background-color: #2e2f32;
-}
-
-.mx_AccessSecretStorageDialog_resetBadge:before {
- background-image: url(../../img/element-icons/warning-badge.413c9a9.svg);
- background-size: 24px;
- background-color: transparent;
-}
-
-.mx_AccessSecretStorageDialog_secureBackupTitle:before {
- -webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
- mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
-}
-
-.mx_AccessSecretStorageDialog_securePhraseTitle:before {
- -webkit-mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
- mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
-}
-
-.mx_AccessSecretStorageDialog_keyStatus {
- height: 30px;
-}
-
-.mx_AccessSecretStorageDialog_passPhraseInput {
- width: 300px;
- border: 1px solid #0dbd8b;
- border-radius: 5px;
- padding: 10px;
-}
-
-.mx_AccessSecretStorageDialog_recoveryKeyEntry {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
- margin: 16px;
-}
-
-.mx_AccessSecretStorageDialog_recoveryKeyFeedback:before {
- content: "";
- display: inline-block;
- vertical-align: bottom;
- width: 20px;
- height: 20px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 20px;
- mask-size: 20px;
- margin-right: 5px;
-}
-
-.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid {
- color: #0dbd8b;
-}
-
-.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid:before {
- -webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
- mask-image: url(../../img/feather-customised/check.5745b4e.svg);
- background-color: #0dbd8b;
-}
-
-.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid {
- color: #ff4b55;
-}
-
-.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid:before {
- -webkit-mask-image: url(../../img/feather-customised/x.9662221.svg);
- mask-image: url(../../img/feather-customised/x.9662221.svg);
- background-color: #ff4b55;
-}
-
-.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
- display: none;
-}
-
-.mx_CreateCrossSigningDialog {
- width: 560px;
-}
-
-.mx_CreateCrossSigningDialog details .mx_AccessibleButton {
- margin: 1em 0;
-}
-
-.mx_CreateCrossSigningDialog .mx_Dialog_title,
-.mx_CreateKeyBackupDialog .mx_Dialog_title {
- margin-bottom: 1em;
-}
-
-.mx_CreateKeyBackupDialog_primaryContainer {
- padding: 20px;
-}
-
-.mx_CreateKeyBackupDialog_primaryContainer:after {
- content: "";
- clear: both;
- display: block;
-}
-
-.mx_CreateKeyBackupDialog_passPhraseContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
-}
-
-.mx_CreateKeyBackupDialog_passPhraseInput {
- -webkit-box-flex: 0;
- -ms-flex: none;
- flex: none;
- width: 250px;
- border: 1px solid #0dbd8b;
- border-radius: 5px;
- padding: 10px;
- margin-bottom: 1em;
-}
-
-.mx_CreateKeyBackupDialog_passPhraseMatch {
- margin-left: 20px;
-}
-
-.mx_CreateKeyBackupDialog_recoveryKeyHeader {
- margin-bottom: 1em;
-}
-
-.mx_CreateKeyBackupDialog_recoveryKeyContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_CreateKeyBackupDialog_recoveryKey {
- width: 262px;
- padding: 20px;
- color: #888;
- background-color: #f7f7f7;
- margin-right: 12px;
-}
-
-.mx_CreateKeyBackupDialog_recoveryKeyButtons {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_CreateKeyBackupDialog_recoveryKeyButtons button {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- white-space: nowrap;
-}
-
-.mx_CreateKeyBackupDialog details .mx_AccessibleButton {
- margin: 1em 0;
-}
-
-.mx_CreateSecretStorageDialog {
- width: 560px;
-}
-
-.mx_CreateSecretStorageDialog .mx_SettingsFlag {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_CreateSecretStorageDialog .mx_SettingsFlag_label {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- min-width: 0;
- font-weight: 600;
-}
-
-.mx_CreateSecretStorageDialog .mx_ToggleSwitch {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- margin-left: 30px;
-}
-
-.mx_CreateSecretStorageDialog details .mx_AccessibleButton {
- margin: 1em 0;
-}
-
-.mx_CreateSecretStorageDialog .mx_Dialog_title {
- margin-bottom: 1em;
-}
-
-.mx_CreateSecretStorageDialog_titleWithIcon:before {
- content: "";
- display: inline-block;
- width: 24px;
- height: 24px;
- margin-right: 8px;
- position: relative;
- top: 5px;
- background-color: #2e2f32;
-}
-
-.mx_CreateSecretStorageDialog_secureBackupTitle:before {
- -webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
- mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
-}
-
-.mx_CreateSecretStorageDialog_securePhraseTitle:before {
- -webkit-mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
- mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
-}
-
-.mx_CreateSecretStorageDialog_centeredBody,
-.mx_CreateSecretStorageDialog_centeredTitle {
- text-align: center;
-}
-
-.mx_CreateSecretStorageDialog_primaryContainer {
- padding-top: 20px;
-}
-
-.mx_CreateSecretStorageDialog_primaryContainer:after {
- content: "";
- clear: both;
- display: block;
-}
-
-.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton {
- margin-bottom: 16px;
- padding: 11px;
-}
-
-.mx_CreateSecretStorageDialog_optionTitle {
- color: #45474a;
- font-weight: 600;
- font-size: 1.8rem;
- padding-bottom: 10px;
-}
-
-.mx_CreateSecretStorageDialog_optionIcon {
- display: inline-block;
- width: 24px;
- height: 24px;
- margin-right: 8px;
- position: relative;
- top: 5px;
- background-color: #2e2f32;
-}
-
-.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
- -webkit-mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
- mask-image: url(../../img/feather-customised/secure-phrase.a9d3725.svg);
-}
-
-.mx_CreateSecretStorageDialog_optionIcon_secureBackup {
- -webkit-mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
- mask-image: url(../../img/feather-customised/secure-backup.329cb1c.svg);
-}
-
-.mx_CreateSecretStorageDialog_passPhraseContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
-}
-
-.mx_Field.mx_CreateSecretStorageDialog_passPhraseField {
- margin-top: 0;
-}
-
-.mx_CreateSecretStorageDialog_passPhraseMatch {
- width: 200px;
- margin-left: 20px;
-}
-
-.mx_CreateSecretStorageDialog_recoveryKeyContainer {
- width: 380px;
- margin-left: auto;
- margin-right: auto;
-}
-
-.mx_CreateSecretStorageDialog_recoveryKey {
- font-weight: 700;
- text-align: center;
- padding: 20px;
- color: #888;
- background-color: #f7f7f7;
- border-radius: 6px;
- word-spacing: 1em;
- margin-bottom: 20px;
-}
-
-.mx_CreateSecretStorageDialog_recoveryKeyButtons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
- width: 160px;
- padding-left: 0;
- padding-right: 0;
- white-space: nowrap;
-}
-
-.mx_CreateSecretStorageDialog_continueSpinner {
- margin-top: 33px;
- text-align: right;
-}
-
-.mx_CreateSecretStorageDialog_continueSpinner img {
- width: 20px;
- height: 20px;
-}
-
-.mx_KeyBackupFailedDialog .mx_Dialog_title {
- margin-bottom: 32px;
-}
-
-.mx_KeyBackupFailedDialog_title {
- position: relative;
- padding-left: 45px;
- padding-bottom: 10px;
-}
-
-.mx_KeyBackupFailedDialog_title:before {
- -webkit-mask: url(../../img/e2e/lock-warning-filled.993fb6c.svg);
- mask: url(../../img/e2e/lock-warning-filled.993fb6c.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #2e2f32;
- content: "";
- position: absolute;
- top: -6px;
- right: 0;
- bottom: 0;
- left: 0;
-}
-
-.mx_KeyBackupFailedDialog .mx_Dialog_buttons {
- margin-top: 36px;
-}
-
-.mx_RestoreKeyBackupDialog_keyStatus {
- height: 30px;
-}
-
-.mx_RestoreKeyBackupDialog_primaryContainer {
- padding: 20px;
-}
-
-.mx_RestoreKeyBackupDialog_passPhraseInput,
-.mx_RestoreKeyBackupDialog_recoveryKeyInput {
- width: 300px;
- border: 1px solid #0dbd8b;
- border-radius: 5px;
- padding: 10px;
-}
-
-.mx_RestoreKeyBackupDialog_content > div {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- min-height: 110px;
-}
-
-.mx_NetworkDropdown {
- height: 32px;
- position: relative;
- padding-right: 32px;
- margin-left: auto;
- margin-right: 9px;
- margin-top: 12px;
-}
-
-.mx_NetworkDropdown,
-.mx_NetworkDropdown .mx_AccessibleButton {
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
-}
-
-.mx_NetworkDropdown_menu {
- min-width: 204px;
- margin: 0;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-radius: 4px;
- border: 1px solid #c1c1c1;
- background-color: #fff;
- max-height: calc(100vh - 20px);
- overflow-y: auto;
-}
-
-.mx_NetworkDropdown_menu_network {
- font-weight: 700;
-}
-
-.mx_NetworkDropdown_server {
- padding: 12px 0;
- border-bottom: 1px solid #9fa9ba;
-}
-
-.mx_NetworkDropdown_server .mx_NetworkDropdown_server_title {
- padding: 0 10px;
- font-size: 1.5rem;
- font-weight: 600;
- line-height: 2rem;
- margin-bottom: 4px;
- position: relative;
-}
-
-.mx_NetworkDropdown_server
- .mx_NetworkDropdown_server_title
- .mx_AccessibleButton {
- position: absolute;
- display: inline;
- right: 10px;
- height: 16px;
- width: 16px;
- margin-top: 2px;
-}
-
-.mx_NetworkDropdown_server
- .mx_NetworkDropdown_server_title
- .mx_AccessibleButton:after {
- content: "";
- position: absolute;
- width: 16px;
- height: 16px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/feather-customised/x.9662221.svg);
- mask-image: url(../../img/feather-customised/x.9662221.svg);
- background-color: #ff4b55;
-}
-
-.mx_NetworkDropdown_server .mx_NetworkDropdown_server_subtitle {
- padding: 0 10px;
- font-size: 1rem;
- line-height: 1.4rem;
- margin-top: -4px;
- margin-bottom: 4px;
- color: #61708b;
-}
-
-.mx_NetworkDropdown_server .mx_NetworkDropdown_server_network {
- font-size: 1.2rem;
- line-height: 1.6rem;
- padding: 4px 10px;
- cursor: pointer;
- position: relative;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-
-.mx_NetworkDropdown_server
- .mx_NetworkDropdown_server_network[aria-checked="true"]:after {
- content: "";
- position: absolute;
- width: 16px;
- height: 16px;
- right: 10px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
- mask-image: url(../../img/feather-customised/check.5745b4e.svg);
- background-color: #0dbd8b;
-}
-
-.mx_NetworkDropdown_server_add:hover,
-.mx_NetworkDropdown_server_network:hover {
- background-color: #f3f8fd;
-}
-
-.mx_NetworkDropdown_server_add {
- padding: 16px 10px 16px 32px;
- position: relative;
- border-radius: 0 0 4px 4px;
-}
-
-.mx_NetworkDropdown_server_add:before {
- content: "";
- position: absolute;
- width: 16px;
- height: 16px;
- left: 7px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/feather-customised/plus.38ae979.svg);
- mask-image: url(../../img/feather-customised/plus.38ae979.svg);
- background-color: #61708b;
-}
-
-.mx_NetworkDropdown_handle {
- position: relative;
-}
-
-.mx_NetworkDropdown_handle:after {
- content: "";
- position: absolute;
- width: 26px;
- height: 26px;
- right: -27.5px;
- top: -3px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
- mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
- background-color: #2e2f32;
-}
-
-.mx_NetworkDropdown_handle .mx_NetworkDropdown_handle_server {
- color: #61708b;
- font-size: 1.2rem;
-}
-
-.mx_NetworkDropdown_dialog .mx_Dialog {
- width: 45vw;
-}
-
-.mx_AccessibleButton {
- cursor: pointer;
-}
-
-.mx_AccessibleButton_disabled {
- cursor: default;
-}
-
-.mx_AccessibleButton_hasKind {
- padding: 7px 18px;
- text-align: center;
- border-radius: 8px;
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- font-size: 1.4rem;
-}
-
-.mx_AccessibleButton_kind_primary {
- color: #fff;
- background-color: #0dbd8b;
- font-weight: 600;
-}
-
-.mx_AccessibleButton_kind_primary_outline {
- color: #0dbd8b;
- background-color: #fff;
- border: 1px solid #0dbd8b;
- font-weight: 600;
-}
-
-.mx_AccessibleButton_kind_secondary {
- color: #0dbd8b;
- font-weight: 600;
-}
-
-.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,
-.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled {
- opacity: 0.4;
-}
-
-.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
- padding: 5px 12px;
- color: #fff;
- background-color: #0dbd8b;
-}
-
-.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
- opacity: 0.4;
-}
-
-.mx_AccessibleButton_kind_danger {
- color: #fff;
- background-color: #ff4b55;
-}
-
-.mx_AccessibleButton_kind_danger_outline {
- color: #ff4b55;
- background-color: transparent;
- border: 1px solid #ff4b55;
-}
-
-.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
- color: #fff;
- background-color: #f5b6bb;
-}
-
-.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
- color: #f5b6bb;
- border-color: #f5b6bb;
-}
-
-.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
- padding: 5px 12px;
- color: #fff;
- background-color: #ff4b55;
-}
-
-.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
- color: #fff;
- background-color: #f5b6bb;
-}
-
-.mx_AccessibleButton_kind_link {
- color: #0dbd8b;
- background-color: transparent;
-}
-
-.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled {
- opacity: 0.4;
-}
-
-.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm {
- padding: 5px 12px;
- color: #0dbd8b;
- background-color: transparent;
-}
-
-.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled {
- opacity: 0.4;
-}
-
-.mx_AddressSelector {
- position: absolute;
- background-color: #fff;
- width: 485px;
- max-height: 116px;
- overflow-y: auto;
- border-radius: 3px;
- border: 1px solid #0dbd8b;
- cursor: pointer;
- z-index: 1;
-}
-
-.mx_AddressSelector.mx_AddressSelector_empty {
- display: none;
-}
-
-.mx_AddressSelector_addressListElement .mx_AddressTile {
- background-color: #fff;
- border: 1px solid #fff;
-}
-
-.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
- background-color: #f2f5f8;
-}
-
-.mx_AddressSelector_addressListElement.mx_AddressSelector_selected
- .mx_AddressTile {
- background-color: #f2f5f8;
- border: 1px solid #f2f5f8;
-}
-
-.mx_AddressTile {
- display: inline-block;
- border-radius: 3px;
- background-color: rgba(74, 73, 74, 0.1);
- border: 1px solid #e7e7e7;
- line-height: 2.6rem;
- color: #2e2f32;
- font-size: 1.4rem;
- font-weight: 400;
- margin-right: 4px;
-}
-
-.mx_AddressTile.mx_AddressTile_error {
- background-color: rgba(255, 0, 100, 0.1);
- color: #ff4b55;
- border-color: #ff4b55;
-}
-
-.mx_AddressTile_network {
- padding-right: 4px;
-}
-
-.mx_AddressTile_avatar,
-.mx_AddressTile_network {
- display: inline-block;
- position: relative;
- padding-left: 2px;
- vertical-align: middle;
-}
-
-.mx_AddressTile_avatar {
- padding-right: 7px;
-}
-
-.mx_AddressTile_mx {
- display: inline-block;
- margin: 0;
- border: 0;
- padding: 0;
-}
-
-.mx_AddressTile_name {
- display: inline-block;
- padding-right: 4px;
- font-weight: 600;
- overflow: hidden;
- height: 26px;
- vertical-align: middle;
-}
-
-.mx_AddressTile_name.mx_AddressTile_justified {
- width: 180px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- vertical-align: middle;
-}
-
-.mx_AddressTile_id {
- display: inline-block;
- padding-right: 11px;
-}
-
-.mx_AddressTile_id.mx_AddressTile_justified {
- width: 200px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- vertical-align: middle;
-}
-
-.mx_AddressTile_unknownMx {
- display: inline-block;
- font-weight: 600;
- padding-right: 11px;
-}
-
-.mx_AddressTile_unknownMxl.mx_AddressTile_justified {
- width: 380px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- vertical-align: middle;
-}
-
-.mx_AddressTile_email {
- display: inline-block;
- font-weight: 600;
- padding-right: 11px;
-}
-
-.mx_AddressTile_email.mx_AddressTile_justified {
- width: 200px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- vertical-align: middle;
-}
-
-.mx_AddressTile_unknown {
- display: inline-block;
- padding-right: 11px;
-}
-
-.mx_AddressTile_unknown.mx_AddressTile_justified {
- width: 380px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- vertical-align: middle;
-}
-
-.mx_AddressTile_dismiss {
- display: inline-block;
- padding-right: 11px;
- padding-left: 1px;
- cursor: pointer;
-}
-
-.mx_AddressTile_dismiss object {
- pointer-events: none;
-}
-
-.mx_DesktopBuildsNotice {
- text-align: center;
- padding: 0 16px;
-}
-
-.mx_DesktopBuildsNotice > * {
- vertical-align: middle;
-}
-
-.mx_DesktopBuildsNotice > img {
- margin-right: 8px;
-}
-
-.mx_desktopCapturerSourcePicker {
- overflow: hidden;
-}
-
-.mx_desktopCapturerSourcePicker_tabLabels {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- padding: 0 0 8px;
-}
-
-.mx_desktopCapturerSourcePicker_tabLabel,
-.mx_desktopCapturerSourcePicker_tabLabel_selected {
- width: 100%;
- text-align: center;
- border-radius: 8px;
- padding: 8px 0;
- font-size: 1.3rem;
-}
-
-.mx_desktopCapturerSourcePicker_tabLabel_selected {
- background-color: #0dbd8b;
- color: #fff;
-}
-
-.mx_desktopCapturerSourcePicker_panel {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
- height: 500px;
- overflow: overlay;
-}
-
-.mx_desktopCapturerSourcePicker_stream_button {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- margin: 8px;
- border-radius: 4px;
-}
-
-.mx_desktopCapturerSourcePicker_stream_button:focus,
-.mx_desktopCapturerSourcePicker_stream_button:hover {
- background: #fff;
-}
-
-.mx_desktopCapturerSourcePicker_stream_thumbnail {
- margin: 4px;
- width: 312px;
-}
-
-.mx_desktopCapturerSourcePicker_stream_name {
- margin: 0 4px;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- width: 312px;
-}
-
-.mx_DialPadBackspaceButton {
- position: relative;
- height: 28px;
- width: 28px;
-}
-
-.mx_DialPadBackspaceButton:before {
- content: "";
- background-color: #8d97a5;
- width: inherit;
- height: inherit;
- top: 0;
- left: 0;
- position: absolute;
- display: inline-block;
- vertical-align: middle;
- -webkit-mask-image: url(../../img/element-icons/call/delete.833d785.svg);
- mask-image: url(../../img/element-icons/call/delete.833d785.svg);
- -webkit-mask-position: 8px;
- mask-position: 8px;
- -webkit-mask-size: 20px;
- mask-size: 20px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
-}
-
-.mx_DirectorySearchBox {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- padding-left: 9px;
- padding-right: 9px;
-}
-
-.mx_DirectorySearchBox_joinButton {
- display: table-cell;
- padding: 3px 10px;
- background-color: #f2f5f8;
- border-radius: 3px;
- background-image: url(../../img/icon-return.cb24475.svg);
- background-position: 8px 70%;
- background-repeat: no-repeat;
- text-indent: 18px;
- font-weight: 600;
- font-size: 1.2rem;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- cursor: pointer;
-}
-
-.mx_DirectorySearchBox_clear {
- background-color: #ff4b55;
- -webkit-mask: url(../../img/cancel.4b9715b.svg);
- mask: url(../../img/cancel.4b9715b.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 10px;
- mask-size: 10px;
- width: 15px;
- height: 15px;
- cursor: pointer;
-}
-
-.mx_Dropdown {
- position: relative;
- color: #2e2f32;
-}
-
-.mx_Dropdown_disabled {
- opacity: 0.3;
-}
-
-.mx_Dropdown_input {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- position: relative;
- border-radius: 4px;
- border: 1px solid #c7c7c7;
- font-size: 1.2rem;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.mx_Dropdown_input.mx_AccessibleButton_disabled {
- cursor: not-allowed;
-}
-
-.mx_Dropdown_input:focus {
- border-color: #238cf5;
-}
-
-.mx_Dropdown_input.mx_AccessibleButton:focus {
- -webkit-filter: none;
- filter: none;
-}
-
-.mx_Dropdown_arrow {
- width: 10px;
- height: 6px;
- padding-right: 9px;
- -webkit-mask: url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);
- mask: url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #2e2f32;
-}
-
-.mx_Dropdown_option {
- height: 35px;
- line-height: 3.5rem;
- padding-left: 8px;
- padding-right: 8px;
-}
-
-.mx_Dropdown_input > .mx_Dropdown_option {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_Dropdown_input > .mx_Dropdown_option,
-.mx_Dropdown_option div {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.mx_Dropdown_option .mx_Dropdown_option_emoji,
-.mx_Dropdown_option img {
- margin: 5px;
- width: 16px;
- vertical-align: middle;
-}
-
-.mx_Dropdown_option_emoji {
- font-size: 1.6rem;
- line-height: 1.6rem;
-}
-
-input.mx_Dropdown_option,
-input.mx_Dropdown_option:focus {
- font-weight: 400;
- border: 0;
- padding-top: 0;
- padding-bottom: 0;
- width: 60%;
-}
-
-.mx_Dropdown_menu {
- position: absolute;
- left: -1px;
- right: -1px;
- top: 100%;
- z-index: 2;
- margin: 0;
- padding: 0;
- border-radius: 4px;
- border: 1px solid #238cf5;
- background-color: #fff;
- max-height: 200px;
- overflow-y: auto;
-}
-
-.mx_Dropdown_menu .mx_Dropdown_option {
- height: auto;
- min-height: 35px;
-}
-
-.mx_Dropdown_menu .mx_Dropdown_option_highlight {
- background-color: #ddd;
-}
-
-.mx_Dropdown_searchPrompt {
- font-weight: 400;
- margin-left: 5px;
- margin-bottom: 5px;
-}
-
-.mx_EditableItemList {
- margin-top: 12px;
- margin-bottom: 10px;
-}
-
-.mx_EditableItem {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-bottom: 5px;
-}
-
-.mx_EditableItem_delete {
- -webkit-box-ordinal-group: 4;
- -ms-flex-order: 3;
- order: 3;
- margin-right: 5px;
- cursor: pointer;
- vertical-align: middle;
- width: 14px;
- height: 14px;
- -webkit-mask-image: url(../../img/feather-customised/cancel.23c2689.svg);
- mask-image: url(../../img/feather-customised/cancel.23c2689.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #ff4b55;
- -webkit-mask-size: 100%;
- mask-size: 100%;
-}
-
-.mx_EditableItem_email {
- vertical-align: middle;
-}
-
-.mx_EditableItem_promptText {
- margin-right: 10px;
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
-}
-
-.mx_EditableItem_confirmBtn {
- margin-right: 5px;
-}
-
-.mx_EditableItem_item {
- -webkit-box-flex: 1;
- -ms-flex: auto 1 0px;
- flex: auto 1 0;
- -webkit-box-ordinal-group: 2;
- -ms-flex-order: 1;
- order: 1;
- width: calc(100% - 14px);
- overflow-x: hidden;
- text-overflow: ellipsis;
-}
-
-.mx_EditableItemList_label {
- margin-bottom: 5px;
-}
-
-.mx_ErrorBoundary {
- width: 100%;
- height: 100%;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_ErrorBoundary,
-.mx_ErrorBoundary_body {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_ErrorBoundary_body {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- max-width: 400px;
-}
-
-.mx_ErrorBoundary_body .mx_AccessibleButton {
- margin-top: 5px;
-}
-
-.mx_EventListSummary {
- position: relative;
-}
-
-.mx_TextualEvent.mx_EventListSummary_summary {
- font-size: 1.4rem;
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
-}
-
-.mx_EventListSummary_avatars {
- display: inline-block;
- margin-right: 8px;
- padding-top: 8px;
- line-height: 1.2rem;
-}
-
-.mx_EventListSummary_avatars .mx_BaseAvatar {
- margin-right: -4px;
- cursor: pointer;
-}
-
-.mx_EventListSummary_toggle {
- color: #0dbd8b;
- cursor: pointer;
- float: right;
- margin-right: 10px;
- margin-top: 8px;
-}
-
-.mx_EventListSummary_line {
- border-bottom: 1px solid transparent;
- margin-left: 63px;
- line-height: 3rem;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventListSummary {
- font-size: 1.3rem;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventListSummary .mx_EventTile_line {
- line-height: 2rem;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventListSummary_line {
- line-height: 2.2rem;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventListSummary_toggle {
- margin-top: 3px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_TextualEvent.mx_EventListSummary_summary {
- font-size: 1.3rem;
-}
-
-.mx_FacePile .mx_FacePile_faces {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: reverse;
- -ms-flex-direction: row-reverse;
- flex-direction: row-reverse;
- vertical-align: middle;
-}
-
-.mx_FacePile .mx_FacePile_faces > .mx_FacePile_face + .mx_FacePile_face {
- margin-right: -8px;
-}
-
-.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_image {
- border: 1px solid #fff;
-}
-
-.mx_FacePile .mx_FacePile_faces .mx_BaseAvatar_initial {
- margin: 1px;
-}
-
-.mx_FacePile .mx_FacePile_faces .mx_FacePile_more {
- position: relative;
- border-radius: 100%;
- width: 30px;
- height: 30px;
- background-color: hsla(0, 0%, 91%, 0.77);
-}
-
-.mx_FacePile .mx_FacePile_faces .mx_FacePile_more:before {
- content: "";
- z-index: 1;
- position: absolute;
- top: 0;
- left: 0;
- height: inherit;
- width: inherit;
- background: #8d99a5;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 20px;
- mask-size: 20px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
- mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
-}
-
-.mx_FacePile .mx_FacePile_summary {
- margin-left: 12px;
- font-size: 1.4rem;
- line-height: 2.4rem;
- color: #8d99a5;
-}
-
-.mx_Field {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- min-width: 0;
- position: relative;
- margin: 1em 0;
- border-radius: 4px;
- -webkit-transition: border-color 0.25s;
- transition: border-color 0.25s;
- border: 1px solid #e7e7e7;
-}
-
-.mx_Field_prefix {
- border-right: 1px solid #e7e7e7;
-}
-
-.mx_Field_postfix {
- border-left: 1px solid #e7e7e7;
-}
-
-.mx_Field input,
-.mx_Field select,
-.mx_Field textarea {
- font-weight: 400;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- border: none;
- border-radius: 4px;
- padding: 8px 9px;
- color: #2e2f32;
- background-color: #fff;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- min-width: 0;
-}
-
-.mx_Field select {
- -moz-appearance: none;
- -webkit-appearance: none;
-}
-
-.mx_Field_select:before {
- content: "";
- position: absolute;
- top: 15px;
- right: 10px;
- width: 10px;
- height: 6px;
- -webkit-mask: url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);
- mask: url(../../img/feather-customised/dropdown-arrow.1a22ebc.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #2e2f32;
- z-index: 1;
- pointer-events: none;
-}
-
-.mx_Field:focus-within {
- border-color: #238cf5;
-}
-
-.mx_Field input:focus,
-.mx_Field select:focus,
-.mx_Field textarea:focus {
- outline: 0;
-}
-
-.mx_Field input::-webkit-input-placeholder,
-.mx_Field textarea::-webkit-input-placeholder {
- -webkit-transition: color 0.25s ease-in 0s;
- transition: color 0.25s ease-in 0s;
- color: transparent;
-}
-
-.mx_Field input::-moz-placeholder,
-.mx_Field textarea::-moz-placeholder {
- -moz-transition: color 0.25s ease-in 0s;
- transition: color 0.25s ease-in 0s;
- color: transparent;
-}
-
-.mx_Field input:-ms-input-placeholder,
-.mx_Field textarea:-ms-input-placeholder {
- -ms-transition: color 0.25s ease-in 0s;
- transition: color 0.25s ease-in 0s;
- color: transparent;
-}
-
-.mx_Field input::-ms-input-placeholder,
-.mx_Field textarea::-ms-input-placeholder {
- -ms-transition: color 0.25s ease-in 0s;
- transition: color 0.25s ease-in 0s;
- color: transparent;
-}
-
-.mx_Field input::placeholder,
-.mx_Field textarea::placeholder {
- -webkit-transition: color 0.25s ease-in 0s;
- transition: color 0.25s ease-in 0s;
- color: transparent;
-}
-
-.mx_Field input:placeholder-shown:focus::-webkit-input-placeholder,
-.mx_Field textarea:placeholder-shown:focus::-webkit-input-placeholder {
- -webkit-transition: color 0.25s ease-in 0.1s;
- transition: color 0.25s ease-in 0.1s;
- color: #888;
-}
-
-.mx_Field input:placeholder-shown:focus::-moz-placeholder,
-.mx_Field textarea:placeholder-shown:focus::-moz-placeholder {
- -moz-transition: color 0.25s ease-in 0.1s;
- transition: color 0.25s ease-in 0.1s;
- color: #888;
-}
-
-.mx_Field input:placeholder-shown:focus:-ms-input-placeholder,
-.mx_Field textarea:placeholder-shown:focus:-ms-input-placeholder {
- -ms-transition: color 0.25s ease-in 0.1s;
- transition: color 0.25s ease-in 0.1s;
- color: #888;
-}
-
-.mx_Field input:placeholder-shown:focus::-ms-input-placeholder,
-.mx_Field textarea:placeholder-shown:focus::-ms-input-placeholder {
- -ms-transition: color 0.25s ease-in 0.1s;
- transition: color 0.25s ease-in 0.1s;
- color: #888;
-}
-
-.mx_Field input:-moz-placeholder-shown:focus::placeholder,
-.mx_Field textarea:-moz-placeholder-shown:focus::placeholder {
- -moz-transition: color 0.25s ease-in 0.1s;
- transition: color 0.25s ease-in 0.1s;
- color: #888;
-}
-
-.mx_Field input:-ms-input-placeholder:focus::placeholder,
-.mx_Field textarea:-ms-input-placeholder:focus::placeholder {
- -ms-transition: color 0.25s ease-in 0.1s;
- transition: color 0.25s ease-in 0.1s;
- color: #888;
-}
-
-.mx_Field input:placeholder-shown:focus::placeholder,
-.mx_Field textarea:placeholder-shown:focus::placeholder {
- -webkit-transition: color 0.25s ease-in 0.1s;
- transition: color 0.25s ease-in 0.1s;
- color: #888;
-}
-
-.mx_Field label {
- -webkit-transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
- top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
- transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
- top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
- color: #2e2f32;
- background-color: transparent;
- font-size: 1.4rem;
- position: absolute;
- left: 0;
- top: 0;
- margin: 7px 8px;
- padding: 2px;
- pointer-events: none;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- max-width: calc(100% - 20px);
-}
-
-.mx_Field input:not(:-moz-placeholder-shown) + label,
-.mx_Field textarea:not(:-moz-placeholder-shown) + label {
- -moz-transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
- top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
- transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
- top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
- font-size: 1rem;
- top: -13px;
- padding: 0 2px;
- background-color: #fff;
- pointer-events: auto;
-}
-
-.mx_Field input:not(:-ms-input-placeholder) + label,
-.mx_Field textarea:not(:-ms-input-placeholder) + label {
- -ms-transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
- top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
- transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
- top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
- font-size: 1rem;
- top: -13px;
- padding: 0 2px;
- background-color: #fff;
- pointer-events: auto;
-}
-
-.mx_Field_labelAlwaysTopLeft label,
-.mx_Field input:focus + label,
-.mx_Field input:not(:placeholder-shown) + label,
-.mx_Field select + label,
-.mx_Field textarea:focus + label,
-.mx_Field textarea:not(:placeholder-shown) + label {
- -webkit-transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
- top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
- transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
- top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
- font-size: 1rem;
- top: -13px;
- padding: 0 2px;
- background-color: #fff;
- pointer-events: auto;
-}
-
-.mx_Field input:focus + label,
-.mx_Field select:focus + label,
-.mx_Field textarea:focus + label {
- color: #238cf5;
-}
-
-.mx_Field input:disabled,
-.mx_Field input:disabled + label,
-.mx_Field select:disabled,
-.mx_Field select:disabled + label,
-.mx_Field textarea:disabled,
-.mx_Field textarea:disabled + label {
- background-color: #fff;
- color: #888;
-}
-
-.mx_Field_valid.mx_Field,
-.mx_Field_valid.mx_Field:focus-within {
- border-color: #0dbd8b;
-}
-
-.mx_Field_valid.mx_Field:focus-within label,
-.mx_Field_valid.mx_Field label {
- color: #0dbd8b;
-}
-
-.mx_Field_invalid.mx_Field,
-.mx_Field_invalid.mx_Field:focus-within {
- border-color: #ff4b55;
-}
-
-.mx_Field_invalid.mx_Field:focus-within label,
-.mx_Field_invalid.mx_Field label {
- color: #ff4b55;
-}
-
-.mx_Field_tooltip {
- margin-top: -12px;
- margin-left: 4px;
- width: 200px;
-}
-
-.mx_Field_tooltip.mx_Field_valid {
- -webkit-animation: mx_fadeout 1s 2s forwards;
- animation: mx_fadeout 1s 2s forwards;
-}
-
-.mx_Field .mx_Dropdown_input {
- border: initial;
- border-radius: 0;
- border-radius: initial;
-}
-
-.mx_Field .mx_CountryDropdown {
- width: 7.8rem;
-}
-
-.mx_ImageView {
- width: 100%;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_ImageView,
-.mx_ImageView_image_wrapper {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- height: 100%;
-}
-
-.mx_ImageView_image_wrapper {
- pointer-events: auto;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- overflow: hidden;
-}
-
-.mx_ImageView_image {
- -ms-flex-negative: 0;
- flex-shrink: 0;
-}
-
-.mx_ImageView_panel {
- width: 100%;
- height: 68px;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-.mx_ImageView_info_wrapper,
-.mx_ImageView_panel {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_ImageView_info_wrapper {
- pointer-events: auto;
- padding-left: 32px;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- color: #fff;
-}
-
-.mx_ImageView_info {
- padding-left: 12px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_ImageView_info_sender {
- font-weight: 700;
-}
-
-.mx_ImageView_toolbar {
- padding-right: 16px;
- pointer-events: auto;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- grid-gap: 14px;
- gap: 14px;
-}
-
-.mx_ImageView_button {
- padding: 5px;
- display: block;
-}
-
-.mx_ImageView_button:before {
- content: "";
- height: 22px;
- width: 22px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
- display: block;
- background-color: #c1c6cd;
-}
-
-.mx_ImageView_button_rotateCW:before {
- -webkit-mask-image: url(../../img/image-view/rotate-cw.60d903e.svg);
- mask-image: url(../../img/image-view/rotate-cw.60d903e.svg);
-}
-
-.mx_ImageView_button_rotateCCW:before {
- -webkit-mask-image: url(../../img/image-view/rotate-ccw.b28ae4a.svg);
- mask-image: url(../../img/image-view/rotate-ccw.b28ae4a.svg);
-}
-
-.mx_ImageView_button_zoomOut:before {
- -webkit-mask-image: url(../../img/image-view/zoom-out.8506f80.svg);
- mask-image: url(../../img/image-view/zoom-out.8506f80.svg);
-}
-
-.mx_ImageView_button_zoomIn:before {
- -webkit-mask-image: url(../../img/image-view/zoom-in.3b3f32e.svg);
- mask-image: url(../../img/image-view/zoom-in.3b3f32e.svg);
-}
-
-.mx_ImageView_button_download:before {
- -webkit-mask-image: url(../../img/image-view/download.2eac468.svg);
- mask-image: url(../../img/image-view/download.2eac468.svg);
-}
-
-.mx_ImageView_button_more:before {
- -webkit-mask-image: url(../../img/image-view/more.0427c6c.svg);
- mask-image: url(../../img/image-view/more.0427c6c.svg);
-}
-
-.mx_ImageView_button_close {
- padding: 0;
- border-radius: 100%;
- background: #21262c;
-}
-
-.mx_ImageView_button_close:before {
- width: 32px;
- height: 32px;
- -webkit-mask-image: url(../../img/image-view/close.97d1731.svg);
- mask-image: url(../../img/image-view/close.97d1731.svg);
- -webkit-mask-size: 40%;
- mask-size: 40%;
-}
-
-.mx_InfoTooltip_icon,
-.mx_InfoTooltip_icon:before {
- width: 16px;
- height: 16px;
- display: inline-block;
-}
-
-.mx_InfoTooltip_icon:before {
- background-color: #61708b;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 16px;
- mask-size: 16px;
- -webkit-mask-position: center;
- mask-position: center;
- content: "";
- vertical-align: middle;
-}
-
-.mx_InfoTooltip_icon_info:before {
- -webkit-mask-image: url(../../img/element-icons/info.dc07e19.svg);
- mask-image: url(../../img/element-icons/info.dc07e19.svg);
-}
-
-.mx_InfoTooltip_icon_warning:before {
- -webkit-mask-image: url(../../img/element-icons/warning.d65f5be.svg);
- mask-image: url(../../img/element-icons/warning.d65f5be.svg);
-}
-
-.mx_InlineSpinner {
- display: inline;
-}
-
-.mx_InlineSpinner_icon,
-.mx_InlineSpinner img {
- margin: 0 6px;
- vertical-align: -3px;
-}
-
-.mx_InlineSpinner_icon {
- display: inline-block;
-}
-
-.mx_InviteReason {
- position: relative;
- margin-bottom: 1em;
-}
-
-.mx_InviteReason .mx_InviteReason_reason {
- visibility: visible;
-}
-
-.mx_InviteReason .mx_InviteReason_view {
- display: none;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- cursor: pointer;
- color: #737d8c;
-}
-
-.mx_InviteReason .mx_InviteReason_view:before {
- content: "";
- margin-right: 8px;
- background-color: #737d8c;
- -webkit-mask-image: url(../../img/feather-customised/eye.52aa0d2.svg);
- mask-image: url(../../img/feather-customised/eye.52aa0d2.svg);
- display: inline-block;
- width: 18px;
- height: 14px;
-}
-
-.mx_InviteReason_hidden .mx_InviteReason_reason {
- visibility: hidden;
-}
-
-.mx_InviteReason_hidden .mx_InviteReason_view {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_ManageIntegsButton_error {
- position: relative;
- float: right;
- cursor: not-allowed;
-}
-
-.mx_ManageIntegsButton_error img {
- position: absolute;
- right: -5px;
- top: -5px;
-}
-
-.mx_ManageIntegsButton_errorPopup {
- position: absolute;
- top: 110%;
- left: -275%;
- width: 550%;
- padding: 30%;
- font-size: 10pt;
- line-height: 1.5em;
- border-radius: 5px;
- background-color: #0dbd8b;
- color: #fff;
- text-align: center;
- z-index: 1000;
-}
-
-.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup {
- display: none;
-}
-
-.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup {
- display: inline;
-}
-
-.mx_MiniAvatarUploader {
- position: relative;
- width: -webkit-min-content;
- width: -moz-min-content;
- width: min-content;
-}
-
-.mx_MiniAvatarUploader .mx_Tooltip {
- display: inline-block;
- position: absolute;
- z-index: unset;
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
- left: 72px;
- top: 0;
-}
-
-.mx_MiniAvatarUploader .mx_MiniAvatarUploader_indicator {
- position: absolute;
- height: 26px;
- width: 26px;
- right: -6px;
- bottom: -6px;
- background-color: #fff;
- border-radius: 50%;
- z-index: 1;
-}
-
-.mx_MiniAvatarUploader
- .mx_MiniAvatarUploader_indicator
- .mx_MiniAvatarUploader_cameraIcon {
- height: 100%;
- width: 100%;
- background-color: #737d8c;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-image: url(../../img/element-icons/camera.a81a395.svg);
- mask-image: url(../../img/element-icons/camera.a81a395.svg);
- -webkit-mask-size: 16px;
- mask-size: 16px;
- z-index: 2;
-}
-
-.mx_MiniAvatarUploader_input {
- display: none;
-}
-
-.mx_PowerSelector {
- width: 100%;
-}
-
-.mx_PowerSelector .mx_Field input,
-.mx_PowerSelector .mx_Field select {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-progress.mx_ProgressBar {
- height: 6px;
- width: 60px;
- overflow: hidden;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: none;
- border-radius: 6px;
-}
-
-progress.mx_ProgressBar::-moz-progress-bar {
- border-radius: 6px;
-}
-
-progress.mx_ProgressBar::-webkit-progress-bar,
-progress.mx_ProgressBar::-webkit-progress-value {
- border-radius: 6px;
-}
-
-progress.mx_ProgressBar {
- color: #0dbd8b;
-}
-
-progress.mx_ProgressBar::-moz-progress-bar {
- background-color: #0dbd8b;
-}
-
-progress.mx_ProgressBar::-webkit-progress-value {
- background-color: #0dbd8b;
-}
-
-progress.mx_ProgressBar {
- background-color: rgba(141, 151, 165, 0.2);
-}
-
-progress.mx_ProgressBar::-webkit-progress-bar {
- background-color: rgba(141, 151, 165, 0.2);
-}
-
-progress.mx_ProgressBar ::-webkit-progress-value {
- -webkit-transition: width 1s;
- transition: width 1s;
-}
-
-progress.mx_ProgressBar ::-moz-progress-bar {
- -moz-transition: padding-bottom 1s;
- transition: padding-bottom 1s;
- padding-bottom: var(--value);
- transform-origin: 0 0;
- transform: rotate(-90deg) translateX(-15px);
- padding-left: 15px;
- height: 0;
-}
-
-.mx_QRCode img {
- border-radius: 8px;
-}
-
-.mx_ReplyThread {
- margin: 0 0 8px;
- padding: 0 10px;
- border-left: 2px solid #0dbd8b;
- border-radius: 2px;
-}
-
-.mx_ReplyThread .mx_ReplyThread_show {
- cursor: pointer;
-}
-
-.mx_ReplyThread.mx_ReplyThread_color1 {
- border-left-color: #368bd6;
-}
-
-.mx_ReplyThread.mx_ReplyThread_color2 {
- border-left-color: #ac3ba8;
-}
-
-.mx_ReplyThread.mx_ReplyThread_color3 {
- border-left-color: #0dbd8b;
-}
-
-.mx_ReplyThread.mx_ReplyThread_color4 {
- border-left-color: #e64f7a;
-}
-
-.mx_ReplyThread.mx_ReplyThread_color5 {
- border-left-color: #ff812d;
-}
-
-.mx_ReplyThread.mx_ReplyThread_color6 {
- border-left-color: #2dc2c5;
-}
-
-.mx_ReplyThread.mx_ReplyThread_color7 {
- border-left-color: #5c56f5;
-}
-
-.mx_ReplyThread.mx_ReplyThread_color8 {
- border-left-color: #74d12c;
-}
-
-.mx_ResizeHandle {
- cursor: row-resize;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- z-index: 100;
-}
-
-.mx_ResizeHandle.mx_ResizeHandle_horizontal {
- margin: 0 -5px;
- padding: 0 5px;
- cursor: col-resize;
-}
-
-.mx_ResizeHandle.mx_ResizeHandle_vertical {
- margin: -5px 0;
- padding: 5px 0;
- cursor: row-resize;
-}
-
-.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
- margin: 0 -10px 0 0;
- padding: 0 8px 0 0;
-}
-
-.mx_ResizeHandle > div {
- background: transparent;
-}
-
-.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
- width: 1px;
- height: 100%;
-}
-
-.mx_ResizeHandle.mx_ResizeHandle_vertical > div {
- height: 1px;
-}
-
-.mx_AtRoomPill,
-.mx_GroupPill,
-.mx_RoomPill,
-.mx_UserPill {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- vertical-align: middle;
- border-radius: 1.6rem;
- line-height: 1.5rem;
- padding-left: 0;
-}
-
-a.mx_Pill {
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- max-width: calc(100% - 1ch);
-}
-
-.mx_Pill {
- padding: 0.1rem 0.4em 0.1rem 0.1rem;
- vertical-align: text-top;
- line-height: 1.7rem;
-}
-
-.mx_EventTile_content .markdown-body a.mx_GroupPill,
-.mx_GroupPill {
- color: #fff;
- background-color: #aaa;
-}
-
-.mx_EventTile_content .markdown-body a.mx_Pill {
- text-decoration: none;
-}
-
-.mx_EventTile_content .markdown-body a.mx_UserPill,
-.mx_UserPill {
- color: #2e2f32;
- background-color: rgba(0, 0, 0, 0.1);
-}
-
-.mx_UserPill_selected {
- background-color: #0dbd8b !important;
-}
-
-.mx_EventTile_content .markdown-body a.mx_AtRoomPill,
-.mx_EventTile_content .mx_AtRoomPill,
-.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
-.mx_MessageComposer_input .mx_AtRoomPill {
- color: #fff;
- background-color: #ff4b55;
-}
-
-.mx_EventTile_content .markdown-body a.mx_GroupPill,
-.mx_EventTile_content .markdown-body a.mx_RoomPill,
-.mx_GroupPill,
-.mx_RoomPill {
- color: #fff;
- background-color: #aaa;
-}
-
-.mx_EventTile_body .mx_GroupPill,
-.mx_EventTile_body .mx_RoomPill,
-.mx_EventTile_body .mx_UserPill {
- cursor: pointer;
-}
-
-.mx_AtRoomPill .mx_BaseAvatar,
-.mx_GroupPill .mx_BaseAvatar,
-.mx_RoomPill .mx_BaseAvatar,
-.mx_UserPill .mx_BaseAvatar {
- position: relative;
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- border-radius: 10rem;
- margin-right: 0.24rem;
-}
-
-.mx_Markdown_BOLD {
- font-weight: 700;
-}
-
-.mx_Markdown_ITALIC {
- font-style: italic;
-}
-
-.mx_Markdown_CODE {
- padding: 0.2em 0;
- margin: 0;
- font-size: 85%;
- background-color: rgba(0, 0, 0, 0.04);
- border-radius: 3px;
-}
-
-.mx_Markdown_HR {
- display: block;
- background: #e9e9e9;
-}
-
-.mx_Markdown_STRIKETHROUGH {
- text-decoration: line-through;
-}
-
-.mx_RoleButton {
- margin-left: 4px;
- margin-right: 4px;
- cursor: pointer;
- display: inline-block;
-}
-
-.mx_RoleButton object {
- pointer-events: none;
-}
-
-.mx_RoleButton_tooltip {
- display: inline-block;
- position: relative;
- top: -25px;
- left: 6px;
-}
-
-.mx_RoomAliasField {
- -webkit-box-flex: 0;
- -ms-flex: 0 1 auto;
- flex: 0 1 auto;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
- align-items: stretch;
- min-width: 0;
- max-width: 100%;
-}
-
-.mx_RoomAliasField input {
- width: 150px;
- padding-left: 0;
- padding-right: 0;
-}
-
-.mx_RoomAliasField input::-webkit-input-placeholder {
- color: #888;
- font-weight: 400;
-}
-
-.mx_RoomAliasField input::-moz-placeholder {
- color: #888;
- font-weight: 400;
-}
-
-.mx_RoomAliasField input:-ms-input-placeholder {
- color: #888;
- font-weight: 400;
-}
-
-.mx_RoomAliasField input::-ms-input-placeholder {
- color: #888;
- font-weight: 400;
-}
-
-.mx_RoomAliasField input::placeholder {
- color: #888;
- font-weight: 400;
-}
-
-.mx_RoomAliasField .mx_Field_postfix,
-.mx_RoomAliasField .mx_Field_prefix {
- color: #888;
- border-left: none;
- border-right: none;
- font-weight: 600;
- padding: 9px 10px;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
-}
-
-.mx_RoomAliasField .mx_Field_postfix {
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- max-width: calc(100% - 180px);
-}
-
-.mx_SSOButtons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_SSOButtons .mx_SSOButtons_row + .mx_SSOButtons_row {
- margin-top: 16px;
-}
-
-.mx_SSOButtons .mx_SSOButton {
- position: relative;
- width: 100%;
- padding: 7px 32px;
- text-align: center;
- border-radius: 8px;
- display: inline-block;
- font-size: 1.4rem;
- font-weight: 600;
- border: 1px solid #e7e7e7;
- color: #2e2f32;
-}
-
-.mx_SSOButtons .mx_SSOButton > img {
- -o-object-fit: contain;
- object-fit: contain;
- position: absolute;
- left: 8px;
- top: 4px;
-}
-
-.mx_SSOButtons .mx_SSOButton_default {
- color: #0dbd8b;
- background-color: #fff;
- border-color: #0dbd8b;
-}
-
-.mx_SSOButtons .mx_SSOButton_default.mx_SSOButton_primary {
- color: #fff;
- background-color: #0dbd8b;
-}
-
-.mx_SSOButtons .mx_SSOButton_mini {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- width: 50px;
- height: 50px;
- min-width: 50px;
- padding: 12px;
-}
-
-.mx_SSOButtons .mx_SSOButton_mini > img {
- left: 12px;
- top: 12px;
-}
-
-.mx_SSOButtons .mx_SSOButton_mini + .mx_SSOButton_mini {
- margin-left: 16px;
-}
-
-.mx_ServerPicker {
- margin-bottom: 14px;
- border-bottom: 1px solid rgba(141, 151, 165, 0.2);
- display: grid;
- grid-template-columns: auto -webkit-min-content;
- grid-template-columns: auto min-content;
- grid-template-rows: auto auto auto;
- font-size: 1.4rem;
- line-height: 2rem;
-}
-
-.mx_ServerPicker > h3 {
- font-weight: 600;
- margin: 0 0 20px;
- grid-column: 1;
- grid-row: 1;
-}
-
-.mx_ServerPicker .mx_ServerPicker_help {
- width: 20px;
- height: 20px;
- background-color: #c1c6cd;
- border-radius: 10px;
- grid-column: 2;
- grid-row: 1;
- margin-left: auto;
- text-align: center;
- color: #fff;
- font-size: 16px;
- position: relative;
-}
-
-.mx_ServerPicker .mx_ServerPicker_help:before {
- content: "";
- width: 24px;
- height: 24px;
- position: absolute;
- top: -2px;
- left: -2px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-image: url(../../img/element-icons/i.80d84f3.svg);
- mask-image: url(../../img/element-icons/i.80d84f3.svg);
- background: #fff;
-}
-
-.mx_ServerPicker .mx_ServerPicker_server {
- color: #232f32;
- grid-column: 1;
- grid-row: 2;
- margin-bottom: 16px;
-}
-
-.mx_ServerPicker .mx_ServerPicker_change {
- padding: 0;
- font-size: inherit;
- grid-column: 2;
- grid-row: 2;
-}
-
-.mx_ServerPicker .mx_ServerPicker_desc {
- margin-top: -12px;
- color: #8d99a5;
- grid-column: 1/2;
- grid-row: 3;
- margin-bottom: 16px;
-}
-
-.mx_ServerPicker_helpDialog .mx_Dialog_content {
- width: 456px;
-}
-
-.mx_Slider {
- position: relative;
- margin: 0;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_Slider_dotContainer {
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-.mx_Slider_bar,
-.mx_Slider_dotContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_Slider_bar {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- position: absolute;
- height: 1em;
- width: 100%;
- padding: 0 0.5em;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_Slider_bar > hr {
- width: 100%;
- height: 0.4em;
- background-color: #c1c9d6;
- border: 0;
-}
-
-.mx_Slider_selection {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- width: calc(100% - 1em);
- height: 1em;
- position: absolute;
- pointer-events: none;
-}
-
-.mx_Slider_selectionDot {
- position: absolute;
- width: 1.1em;
- height: 1.1em;
- background-color: #0dbd8b;
- border-radius: 50%;
- -webkit-box-shadow: 0 0 6px #d3d3d3;
- box-shadow: 0 0 6px #d3d3d3;
- z-index: 10;
-}
-
-.mx_Slider_selection > hr {
- margin: 0;
- border: 0.2em solid #0dbd8b;
-}
-
-.mx_Slider_dot {
- height: 1em;
- width: 1em;
- border-radius: 50%;
- background-color: #c1c9d6;
- z-index: 0;
-}
-
-.mx_Slider_dotActive {
- background-color: #0dbd8b;
-}
-
-.mx_Slider_dotValue {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #c1c9d6;
-}
-
-.mx_Slider_labelContainer {
- width: 1em;
-}
-
-.mx_Slider_label {
- position: relative;
- width: -webkit-fit-content;
- width: -moz-fit-content;
- width: fit-content;
- left: -50%;
-}
-
-.mx_Spinner {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
- height: 100%;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_MatrixChat_middlePanel .mx_Spinner {
- height: auto;
-}
-
-@-webkit-keyframes spin {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(1turn);
- transform: rotate(1turn);
- }
-}
-
-@keyframes spin {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(1turn);
- transform: rotate(1turn);
- }
-}
-
-.mx_Spinner_icon {
- background-color: #2e2f32;
- -webkit-mask: url(../../img/spinner.5a0438d.svg);
- mask: url(../../img/spinner.5a0438d.svg);
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-animation: spin 1.1s steps(12) infinite;
- animation: spin 1.1s steps(12) infinite;
-}
-
-.mx_Checkbox {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
-}
-
-.mx_Checkbox input[type="checkbox"] {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0;
-}
-
-.mx_Checkbox input[type="checkbox"] + label {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_Checkbox input[type="checkbox"] + label > .mx_Checkbox_background {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- position: relative;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- height: 1.6rem;
- width: 1.6rem;
- size: 0.5rem;
- border: 0.15rem solid rgba(97, 112, 139, 0.5);
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-radius: 0.4rem;
-}
-
-.mx_Checkbox input[type="checkbox"] + label > .mx_Checkbox_background img {
- display: none;
- height: 100%;
- width: 100%;
- -webkit-filter: invert(100%);
- filter: invert(100%);
-}
-
-.mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background {
- background: #0dbd8b;
- border-color: #0dbd8b;
-}
-
-.mx_Checkbox
- input[type="checkbox"]:checked
- + label
- > .mx_Checkbox_background
- img {
- display: block;
-}
-
-.mx_Checkbox input[type="checkbox"] + label > :not(.mx_Checkbox_background) {
- margin-left: 10px;
-}
-
-.mx_Checkbox input[type="checkbox"]:disabled + label {
- opacity: 0.5;
- cursor: not-allowed;
-}
-
-.mx_Checkbox
- input[type="checkbox"]:checked:disabled
- + label
- > .mx_Checkbox_background {
- background-color: #0dbd8b;
- border-color: #0dbd8b;
-}
-
-.mx_Checkbox
- input[type="checkbox"].focus-visible
- + label
- .mx_Checkbox_background {
- outline-width: 2px;
- outline-style: solid;
- outline-color: Highlight;
-}
-
-@media (-webkit-min-device-pixel-ratio: 0) {
- .mx_Checkbox
- input[type="checkbox"].focus-visible
- + label
- .mx_Checkbox_background {
- outline-color: -webkit-focus-ring-color;
- outline-style: auto;
- }
-}
-
-.mx_RadioButton {
- position: relative;
- -webkit-box-align: baseline;
- -ms-flex-align: baseline;
- align-items: baseline;
-}
-
-.mx_RadioButton,
-.mx_RadioButton > .mx_RadioButton_content {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_RadioButton > .mx_RadioButton_content {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- margin-left: 8px;
- margin-right: 8px;
-}
-
-.mx_RadioButton .mx_RadioButton_spacer {
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- height: 1.6rem;
- width: 1.6rem;
-}
-
-.mx_RadioButton input[type="radio"] {
- margin: 0;
- padding: 0;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
-}
-
-.mx_RadioButton input[type="radio"] + div {
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- height: 1.6rem;
- width: 1.6rem;
- margin-left: 2px;
- border: 0.15rem solid #61708b;
- border-radius: 1.6rem;
-}
-
-.mx_RadioButton input[type="radio"] + div > div {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- height: 0.8rem;
- width: 0.8rem;
- border-radius: 0.8rem;
-}
-
-.mx_RadioButton input[type="radio"].focus-visible + div {
- outline-width: 2px;
- outline-style: solid;
- outline-color: Highlight;
-}
-
-@media (-webkit-min-device-pixel-ratio: 0) {
- .mx_RadioButton input[type="radio"].focus-visible + div {
- outline-color: -webkit-focus-ring-color;
- outline-style: auto;
- }
-}
-
-.mx_RadioButton input[type="radio"]:checked + div {
- border-color: #0dbd8b;
-}
-
-.mx_RadioButton input[type="radio"]:checked + div > div {
- background: #0dbd8b;
-}
-
-.mx_RadioButton input[type="radio"]:disabled + div,
-.mx_RadioButton input[type="radio"]:disabled + div + span {
- opacity: 0.5;
- cursor: not-allowed;
-}
-
-.mx_RadioButton input[type="radio"]:disabled + div {
- border-color: #61708b;
-}
-
-.mx_RadioButton input[type="radio"]:checked:disabled + div > div {
- background-color: #61708b;
-}
-
-.mx_RadioButton .mx_RadioButton_innerLabel {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- position: relative;
- top: 4px;
-}
-
-.mx_RadioButton_outlined {
- border: 1px solid #e3e8f0;
- border-radius: 8px;
-}
-
-.mx_RadioButton_checked {
- border-color: #0dbd8b;
-}
-
-.mx_SyntaxHighlight {
- background: none !important;
- color: #747474 !important;
-}
-
-.mx_TagComposer .mx_TagComposer_input {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_TagComposer .mx_TagComposer_input .mx_Field {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- margin: 0;
-}
-
-.mx_TagComposer .mx_TagComposer_input .mx_AccessibleButton {
- min-width: 70px;
- padding: 0;
- margin-left: 16px;
-}
-
-.mx_TagComposer .mx_TagComposer_input .mx_AccessibleButton,
-.mx_TagComposer .mx_TagComposer_input .mx_Field,
-.mx_TagComposer .mx_TagComposer_input .mx_Field input {
- border-radius: 8px;
-}
-
-.mx_TagComposer .mx_TagComposer_tags {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- margin-top: 12px;
-}
-
-.mx_TagComposer .mx_TagComposer_tags .mx_TagComposer_tag {
- padding: 6px 8px 8px 12px;
- position: relative;
- margin-right: 12px;
- margin-top: 12px;
-}
-
-.mx_TagComposer .mx_TagComposer_tags .mx_TagComposer_tag:before {
- content: "";
- border-radius: 20px;
- background-color: #8d99a5;
- opacity: 0.15;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
-}
-
-.mx_TagComposer .mx_TagComposer_tags .mx_AccessibleButton {
- background-image: url(../../img/subtract.880420e.svg);
- width: 16px;
- height: 16px;
- margin-left: 8px;
- display: inline-block;
- vertical-align: middle;
- cursor: pointer;
-}
-
-.mx_TextWithTooltip_tooltip {
- display: none;
-}
-
-.mx_ToggleSwitch {
- -webkit-transition: background-color 0.2s ease-out 0.1s;
- transition: background-color 0.2s ease-out 0.1s;
- width: 4.4rem;
- height: 2rem;
- border-radius: 1.5rem;
- padding: 2px;
- background-color: #c1c9d6;
- opacity: 0.5;
-}
-
-.mx_ToggleSwitch_enabled {
- cursor: pointer;
- opacity: 1;
-}
-
-.mx_ToggleSwitch.mx_ToggleSwitch_on {
- background-color: #0dbd8b;
-}
-
-.mx_ToggleSwitch.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
- left: calc(100% - 2rem);
-}
-
-.mx_ToggleSwitch_ball {
- position: relative;
- width: 2rem;
- height: 2rem;
- border-radius: 2rem;
- background-color: #fff;
- -webkit-transition: left 0.15s ease-out 0.1s;
- transition: left 0.15s ease-out 0.1s;
- left: 0;
-}
-
-@-webkit-keyframes mx_fadein {
- 0% {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-@keyframes mx_fadein {
- 0% {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-@-webkit-keyframes mx_fadeout {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
-}
-
-@keyframes mx_fadeout {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
-}
-
-.mx_Tooltip_chevron {
- position: absolute;
- left: -7px;
- top: 10px;
- width: 0;
- height: 0;
- border-top: 7px solid transparent;
- border-right: 7px solid #e7e7e7;
- border-bottom: 7px solid transparent;
-}
-
-.mx_Tooltip_chevron:after {
- content: "";
- width: 0;
- height: 0;
- border-top: 6px solid transparent;
- border-right: 6px solid #fff;
- border-bottom: 6px solid transparent;
- position: absolute;
- top: -6px;
- left: 1px;
-}
-
-.mx_Tooltip {
- position: fixed;
- border-radius: 8px;
- -webkit-box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
- box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
- z-index: 6000;
- padding: 10px;
- pointer-events: none;
- line-height: 1.4rem;
- font-size: 1.2rem;
- font-weight: 500;
- max-width: 200px;
- word-break: break-word;
- margin-right: 50px;
- background-color: #27303a;
- color: #fff;
- border: 0;
- text-align: center;
-}
-
-.mx_Tooltip,
-.mx_Tooltip .mx_Tooltip_chevron {
- display: none;
-}
-
-.mx_Tooltip.mx_Tooltip_visible {
- -webkit-animation: mx_fadein 0.2s forwards;
- animation: mx_fadein 0.2s forwards;
-}
-
-.mx_Tooltip.mx_Tooltip_invisible {
- -webkit-animation: mx_fadeout 0.1s forwards;
- animation: mx_fadeout 0.1s forwards;
-}
-
-.mx_Field_tooltip {
- background-color: #fff;
- color: #2e2f32;
- border: 1px solid #e7e7e7;
- text-align: unset;
-}
-
-.mx_Field_tooltip .mx_Tooltip_chevron {
- display: unset;
-}
-
-.mx_Tooltip_title {
- font-weight: 600;
-}
-
-.mx_Tooltip_sub {
- opacity: 0.7;
- margin-top: 4px;
-}
-
-.mx_TooltipButton {
- display: inline-block;
- width: 11px;
- height: 11px;
- margin-left: 5px;
- border: 2px solid #dbdbdb;
- border-radius: 20px;
- color: #dbdbdb;
- -webkit-transition: opacity 0.2s ease-in;
- transition: opacity 0.2s ease-in;
- opacity: 0.6;
- line-height: 1.1rem;
- text-align: center;
- cursor: pointer;
-}
-
-.mx_TooltipButton:hover {
- opacity: 1;
-}
-
-.mx_TooltipButton_container {
- position: relative;
- top: -18px;
- left: 4px;
-}
-
-.mx_TooltipButton_helpText {
- width: 400px;
- text-align: start;
- line-height: 17px !important;
-}
-
-.mx_Validation {
- position: relative;
-}
-
-.mx_Validation_details {
- padding-left: 20px;
- margin: 0;
-}
-
-.mx_Validation_description + .mx_Validation_details {
- margin: 1em 0 0;
-}
-
-.mx_Validation_detail {
- position: relative;
- font-weight: 400;
- list-style: none;
- margin-bottom: 0.5em;
-}
-
-.mx_Validation_detail:last-child {
- margin-bottom: 0;
-}
-
-.mx_Validation_detail:before {
- content: "";
- position: absolute;
- width: 14px;
- height: 14px;
- top: 0;
- left: -18px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_Validation_detail.mx_Validation_valid {
- color: #0dbd8b;
-}
-
-.mx_Validation_detail.mx_Validation_valid:before {
- -webkit-mask-image: url(../../img/feather-customised/check.5745b4e.svg);
- mask-image: url(../../img/feather-customised/check.5745b4e.svg);
- background-color: #0dbd8b;
-}
-
-.mx_Validation_detail.mx_Validation_invalid {
- color: #ff4b55;
-}
-
-.mx_Validation_detail.mx_Validation_invalid:before {
- -webkit-mask-image: url(../../img/feather-customised/x.9662221.svg);
- mask-image: url(../../img/feather-customised/x.9662221.svg);
- background-color: #ff4b55;
-}
-
-.mx_EmojiPicker {
- width: 340px;
- height: 450px;
- border-radius: 4px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_EmojiPicker_body {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- overflow-y: scroll;
- scrollbar-width: thin;
- scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-}
-
-.mx_EmojiPicker_header {
- padding: 4px 8px 0;
- border-bottom: 1px solid #e9edf1;
-}
-
-.mx_EmojiPicker_anchor {
- padding: 8px 8px 6px;
- border: none;
- border-bottom: 2px solid transparent;
- background-color: transparent;
- border-radius: 4px 4px 0 0;
- width: 36px;
- height: 38px;
-}
-
-.mx_EmojiPicker_anchor:not(:disabled) {
- cursor: pointer;
-}
-
-.mx_EmojiPicker_anchor:not(:disabled):hover {
- background-color: #ddd;
- border-bottom: 2px solid #0dbd8b;
-}
-
-.mx_EmojiPicker_anchor:before {
- background-color: #2e2f32;
- content: "";
- display: inline-block;
- -webkit-mask-size: 100%;
- mask-size: 100%;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- width: 100%;
- height: 100%;
-}
-
-.mx_EmojiPicker_anchor:disabled:before {
- background-color: #ddd;
-}
-
-.mx_EmojiPicker_anchor_activity:before {
- -webkit-mask-image: url(../../img/emojipicker/activity.921ec9f.svg);
- mask-image: url(../../img/emojipicker/activity.921ec9f.svg);
-}
-
-.mx_EmojiPicker_anchor_custom:before {
- -webkit-mask-image: url(../../img/emojipicker/custom.e1cd0fd.svg);
- mask-image: url(../../img/emojipicker/custom.e1cd0fd.svg);
-}
-
-.mx_EmojiPicker_anchor_flags:before {
- -webkit-mask-image: url(../../img/emojipicker/flags.1a8855e.svg);
- mask-image: url(../../img/emojipicker/flags.1a8855e.svg);
-}
-
-.mx_EmojiPicker_anchor_foods:before {
- -webkit-mask-image: url(../../img/emojipicker/foods.c6b220a.svg);
- mask-image: url(../../img/emojipicker/foods.c6b220a.svg);
-}
-
-.mx_EmojiPicker_anchor_nature:before {
- -webkit-mask-image: url(../../img/emojipicker/nature.6540b99.svg);
- mask-image: url(../../img/emojipicker/nature.6540b99.svg);
-}
-
-.mx_EmojiPicker_anchor_objects:before {
- -webkit-mask-image: url(../../img/emojipicker/objects.4d34f58.svg);
- mask-image: url(../../img/emojipicker/objects.4d34f58.svg);
-}
-
-.mx_EmojiPicker_anchor_people:before {
- -webkit-mask-image: url(../../img/emojipicker/people.e918580.svg);
- mask-image: url(../../img/emojipicker/people.e918580.svg);
-}
-
-.mx_EmojiPicker_anchor_places:before {
- -webkit-mask-image: url(../../img/emojipicker/places.7310322.svg);
- mask-image: url(../../img/emojipicker/places.7310322.svg);
-}
-
-.mx_EmojiPicker_anchor_recent:before {
- -webkit-mask-image: url(../../img/emojipicker/recent.13b42e2.svg);
- mask-image: url(../../img/emojipicker/recent.13b42e2.svg);
-}
-
-.mx_EmojiPicker_anchor_symbols:before {
- -webkit-mask-image: url(../../img/emojipicker/symbols.15a557d.svg);
- mask-image: url(../../img/emojipicker/symbols.15a557d.svg);
-}
-
-.mx_EmojiPicker_anchor_visible {
- border-bottom: 2px solid #0dbd8b;
-}
-
-.mx_EmojiPicker_search {
- margin: 8px;
- border-radius: 4px;
- border: 1px solid #e7e7e7;
- background-color: #fff;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_EmojiPicker_search input {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- border: none;
- padding: 8px 12px;
- border-radius: 4px 0;
-}
-
-.mx_EmojiPicker_search button {
- border: none;
- background-color: inherit;
- margin: 0;
- padding: 8px;
- -ms-flex-item-align: center;
- align-self: center;
- width: 32px;
- height: 32px;
-}
-
-.mx_EmojiPicker_search_clear {
- cursor: pointer;
-}
-
-.mx_EmojiPicker_search_icon {
- width: 16px;
- margin: 8px;
-}
-
-.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear) {
- pointer-events: none;
-}
-
-.mx_EmojiPicker_search_icon:after {
- -webkit-mask: url(../../img/emojipicker/search.973c315.svg) no-repeat;
- mask: url(../../img/emojipicker/search.973c315.svg) no-repeat;
- -webkit-mask-size: 100%;
- mask-size: 100%;
- background-color: #2e2f32;
- content: "";
- display: inline-block;
- width: 100%;
- height: 100%;
-}
-
-.mx_EmojiPicker_search_clear:after {
- -webkit-mask-image: url(../../img/emojipicker/delete.f7344c5.svg);
- mask-image: url(../../img/emojipicker/delete.f7344c5.svg);
-}
-
-.mx_EmojiPicker_category {
- padding: 0 12px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_EmojiPicker_category_label {
- width: 304px;
-}
-
-.mx_EmojiPicker_list {
- width: 304px;
- padding: 0;
- margin: 0;
-}
-
-.mx_EmojiPicker_item_wrapper {
- display: inline-block;
- list-style: none;
- width: 38px;
- cursor: pointer;
-}
-
-.mx_EmojiPicker_item {
- display: inline-block;
- font-size: 2rem;
- padding: 5px;
- width: 100%;
- height: 100%;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- text-align: center;
- border-radius: 4px;
-}
-
-.mx_EmojiPicker_item:hover {
- background-color: #ddd;
-}
-
-.mx_EmojiPicker_item_selected {
- color: rgba(0, 0, 0, 0.5);
- border: 1px solid #0dbd8b;
- padding: 4px;
-}
-
-.mx_EmojiPicker_category_label,
-.mx_EmojiPicker_preview_name {
- font-size: 1.6rem;
- font-weight: 600;
- margin: 0;
-}
-
-.mx_EmojiPicker_footer {
- border-top: 1px solid #e9edf1;
- min-height: 72px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_EmojiPicker_preview_emoji {
- font-size: 3.2rem;
- padding: 8px 16px;
-}
-
-.mx_EmojiPicker_preview_text {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_EmojiPicker_name {
- text-transform: capitalize;
-}
-
-.mx_EmojiPicker_shortcode {
- color: #747474;
- font-size: 1.4rem;
-}
-
-.mx_EmojiPicker_shortcode:after,
-.mx_EmojiPicker_shortcode:before {
- content: ":";
-}
-
-.mx_EmojiPicker_quick {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -ms-flex-pack: distribute;
- justify-content: space-around;
-}
-
-.mx_EmojiPicker_quick_header .mx_EmojiPicker_name {
- margin-right: 4px;
-}
-
-.mx_GroupPublicity_toggle {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- margin: 8px;
-}
-
-.mx_GroupPublicity_toggle .mx_GroupTile {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
- cursor: pointer;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- width: 100%;
-}
-
-.mx_GroupPublicity_toggle .mx_ToggleSwitch {
- float: right;
-}
-
-.mx_GroupRoomTile {
- position: relative;
- color: #2e2f32;
- cursor: pointer;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_GroupRoomList_wrapper {
- padding: 10px;
-}
-
-.mx_GroupUserSettings_groupPublicity_scrollbox {
- height: 200px;
- border: 1px solid transparent;
- border-radius: 3px;
- overflow: hidden;
-}
-
-.mx_CallEvent {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- background-color: #f2f5f8;
- border-radius: 8px;
- margin: 10px auto;
- max-width: 75%;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- height: 60px;
-}
-
-.mx_CallEvent.mx_CallEvent_voice
- .mx_CallEvent_content_button_answer
- span:before,
-.mx_CallEvent.mx_CallEvent_voice
- .mx_CallEvent_content_button_callBack
- span:before,
-.mx_CallEvent.mx_CallEvent_voice .mx_CallEvent_type_icon:before {
- -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
- mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
-}
-
-.mx_CallEvent.mx_CallEvent_video
- .mx_CallEvent_content_button_answer
- span:before,
-.mx_CallEvent.mx_CallEvent_video
- .mx_CallEvent_content_button_callBack
- span:before,
-.mx_CallEvent.mx_CallEvent_video .mx_CallEvent_type_icon:before {
- -webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
- mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
-}
-
-.mx_CallEvent .mx_CallEvent_info {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- margin-left: 12px;
-}
-
-.mx_CallEvent .mx_CallEvent_info .mx_CallEvent_info_basic {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- margin-left: 10px;
-}
-
-.mx_CallEvent .mx_CallEvent_info .mx_CallEvent_info_basic .mx_CallEvent_sender {
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 1.8rem;
- margin-bottom: 3px;
-}
-
-.mx_CallEvent .mx_CallEvent_info .mx_CallEvent_info_basic .mx_CallEvent_type {
- font-weight: 400;
- color: #737d8c;
- font-size: 1.2rem;
- line-height: 1.3rem;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_CallEvent
- .mx_CallEvent_info
- .mx_CallEvent_info_basic
- .mx_CallEvent_type
- .mx_CallEvent_type_icon {
- height: 13px;
- width: 13px;
- margin-right: 5px;
-}
-
-.mx_CallEvent
- .mx_CallEvent_info
- .mx_CallEvent_info_basic
- .mx_CallEvent_type
- .mx_CallEvent_type_icon:before {
- content: "";
- position: absolute;
- height: 13px;
- width: 13px;
- background-color: #8d99a5;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_CallEvent .mx_CallEvent_content {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #737d8c;
- margin-right: 16px;
-}
-
-.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_content_button {
- height: 24px;
- padding: 0 12px;
- margin-left: 8px;
-}
-
-.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_content_button span {
- padding: 8px 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_content_button span:before {
- content: "";
- display: inline-block;
- background-color: #fff;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 16px;
- mask-size: 16px;
- width: 16px;
- height: 16px;
- margin-right: 8px;
-}
-
-.mx_CallEvent
- .mx_CallEvent_content
- .mx_CallEvent_content_button_reject
- span:before {
- -webkit-mask-image: url(../../img/element-icons/call/hangup.a207e54.svg);
- mask-image: url(../../img/element-icons/call/hangup.a207e54.svg);
-}
-
-.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_content_tooltip {
- margin-right: 5px;
-}
-
-.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_iconButton {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- margin-right: 8px;
-}
-
-.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_iconButton:before {
- content: "";
- height: 16px;
- width: 16px;
- background-color: #8d99a5;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_silence:before {
- -webkit-mask-image: url(../../img/voip/silence.08cd2d6.svg);
- mask-image: url(../../img/voip/silence.08cd2d6.svg);
-}
-
-.mx_CallEvent .mx_CallEvent_content .mx_CallEvent_unSilence:before {
- -webkit-mask-image: url(../../img/voip/un-silence.cebdd12.svg);
- mask-image: url(../../img/voip/un-silence.cebdd12.svg);
-}
-
-.mx_CreateEvent:before {
- background-color: #91a1c0;
- -webkit-mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
- mask-image: url(../../img/element-icons/chat-bubbles.e2bd2cb.svg);
-}
-
-.mx_DateSeparator {
- clear: both;
- margin: 4px 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- font-size: 1.4rem;
- color: #9e9e9e;
-}
-
-.mx_DateSeparator > hr {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- height: 0;
- border: none;
- border-bottom: 1px solid transparent;
-}
-
-.mx_DateSeparator > div {
- margin: 0 25px;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
-}
-
-.mx_EventTileBubble {
- background-color: #f2f5f8;
- padding: 10px;
- border-radius: 8px;
- margin: 10px auto;
- max-width: 75%;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- display: grid;
- grid-template-columns: 24px minmax(0, 1fr) -webkit-min-content;
- grid-template-columns: 24px minmax(0, 1fr) min-content;
-}
-
-.mx_EventTileBubble:after,
-.mx_EventTileBubble:before {
- position: relative;
- grid-column: 1;
- grid-row: 1/3;
- width: 16px;
- height: 16px;
- content: "";
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- margin-top: 4px;
-}
-
-.mx_EventTileBubble .mx_EventTileBubble_subtitle,
-.mx_EventTileBubble .mx_EventTileBubble_title {
- overflow-wrap: break-word;
-}
-
-.mx_EventTileBubble .mx_EventTileBubble_title {
- font-weight: 600;
- font-size: 1.5rem;
- grid-column: 2;
- grid-row: 1;
-}
-
-.mx_EventTileBubble .mx_EventTileBubble_subtitle {
- font-size: 1.2rem;
- grid-column: 2;
- grid-row: 2;
-}
-
-.mx_MEmoteBody {
- white-space: pre-wrap;
-}
-
-.mx_MEmoteBody_sender {
- cursor: pointer;
-}
-
-.mx_MFileBody_download {
- color: #0dbd8b;
-}
-
-.mx_MFileBody_download .mx_MFileBody_download_icon {
- width: 12px;
- height: 12px;
- -webkit-mask-size: 12px;
- mask-size: 12px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-image: url(../../img/download.4f331f0.svg);
- mask-image: url(../../img/download.4f331f0.svg);
- background-color: #0dbd8b;
- display: inline-block;
-}
-
-.mx_MFileBody_download a {
- color: #0dbd8b;
- text-decoration: none;
- cursor: pointer;
-}
-
-.mx_MFileBody_download object {
- margin-left: -16px;
- padding-right: 4px;
- margin-top: -4px;
- vertical-align: middle;
- pointer-events: none;
-}
-
-.mx_MFileBody_download iframe {
- margin: 0;
- padding: 0;
- border: none;
- width: 100%;
- height: 1.5em;
-}
-
-.mx_MFileBody_info .mx_MFileBody_info_icon {
- background-color: #f4f6fa;
- border-radius: 20px;
- display: inline-block;
- width: 32px;
- height: 32px;
- position: relative;
- vertical-align: middle;
- margin-right: 12px;
-}
-
-.mx_MFileBody_info .mx_MFileBody_info_icon:before {
- content: "";
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: cover;
- mask-size: cover;
- -webkit-mask-image: url(../../img/element-icons/room/composer/attach.359c84e.svg);
- mask-image: url(../../img/element-icons/room/composer/attach.359c84e.svg);
- background-color: #737d8c;
- width: 15px;
- height: 15px;
- position: absolute;
- top: 8px;
- left: 8px;
-}
-
-.mx_MFileBody_info .mx_MFileBody_info_filename {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- display: inline-block;
- width: calc(100% - 44px);
- vertical-align: middle;
-}
-
-.mx_MImageBody_thumbnail {
- -o-object-fit: contain;
- object-fit: contain;
- border-radius: 4px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_MImageBody_thumbnail > div > canvas {
- border-radius: 4px;
-}
-
-.mx_MImageBody_thumbnail_container {
- overflow: hidden;
- position: relative;
-}
-
-.mx_MImageBody_gifLabel {
- position: absolute;
- display: block;
- top: 0;
- left: 14px;
- padding: 5px;
- border-radius: 5px;
- background: rgba(0, 0, 0, 0.7);
- border: 2px solid rgba(0, 0, 0, 0.2);
- color: #fff;
- pointer-events: none;
-}
-
-.mx_HiddenImagePlaceholder {
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- text-align: center;
- cursor: pointer;
- background-color: #f3f8fd;
-}
-
-.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button {
- color: #0dbd8b;
-}
-
-.mx_HiddenImagePlaceholder
- .mx_HiddenImagePlaceholder_button
- span.mx_HiddenImagePlaceholder_eye {
- margin-right: 8px;
- background-color: #0dbd8b;
- -webkit-mask-image: url(../../img/feather-customised/eye.52aa0d2.svg);
- mask-image: url(../../img/feather-customised/eye.52aa0d2.svg);
- display: inline-block;
- width: 18px;
- height: 14px;
-}
-
-.mx_HiddenImagePlaceholder
- .mx_HiddenImagePlaceholder_button
- span:not(.mx_HiddenImagePlaceholder_eye) {
- vertical-align: text-bottom;
-}
-
-.mx_EventTile:hover .mx_HiddenImagePlaceholder {
- background-color: #fff;
-}
-
-.mx_MImageReplyBody {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_MImageReplyBody .mx_MImageBody_thumbnail_container {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- margin-right: 4px;
-}
-
-.mx_MImageReplyBody .mx_MImageReplyBody_info {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_MImageReplyBody .mx_MImageReplyBody_info .mx_MImageReplyBody_sender {
- grid-area: sender;
-}
-
-.mx_MImageReplyBody .mx_MImageReplyBody_info .mx_MImageReplyBody_filename {
- grid-area: filename;
-}
-
-.mx_MJitsiWidgetEvent:before {
- background-color: #91a1c0;
- -webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
- mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
-}
-
-.mx_MNoticeBody {
- white-space: pre-wrap;
- opacity: 0.6;
-}
-
-.mx_MStickerBody_wrapper {
- padding: 20px 0;
-}
-
-.mx_MStickerBody_tooltip {
- position: absolute;
- top: 50%;
-}
-
-.mx_MStickerBody_hidden {
- max-width: 220px;
- text-decoration: none;
- text-align: center;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_MTextBody {
- white-space: pre-wrap;
-}
-
-span.mx_MVideoBody video.mx_MVideoBody {
- max-width: 100%;
- height: auto;
- border-radius: 4px;
-}
-
-.mx_MediaBody {
- background-color: #e3e8f0;
- border-radius: 12px;
- max-width: 243px;
- color: #737d8c;
- font-size: 1.4rem;
- line-height: 2.4rem;
- padding: 6px 12px;
-}
-
-.mx_MessageActionBar {
- position: absolute;
- visibility: hidden;
- cursor: pointer;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- height: 32px;
- line-height: 2.4rem;
- border-radius: 8px;
- background: #fff;
- border: 1px solid #e7e7e7;
- top: -32px;
- right: 8px;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- z-index: 1;
-}
-
-.mx_MessageActionBar:before {
- content: "";
- position: absolute;
- width: calc(66px + 100%);
- height: calc(20px + 100%);
- top: -12px;
- left: -58px;
- z-index: -1;
- cursor: auto;
-}
-
-.mx_MessageActionBar > * {
- white-space: nowrap;
- display: inline-block;
- position: relative;
- margin: 2px;
-}
-
-.mx_MessageActionBar > :hover {
- background: rgba(141, 151, 165, 0.2);
- border-radius: 6px;
- z-index: 1;
-}
-
-.mx_MessageActionBar_maskButton {
- width: 28px;
- height: 28px;
-}
-
-.mx_MessageActionBar_maskButton:after {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- -webkit-mask-size: 18px;
- mask-size: 18px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #737d8c;
-}
-
-.mx_MessageActionBar_maskButton:hover:after {
- background-color: #2e2f32;
-}
-
-.mx_MessageActionBar_reactButton:after {
- -webkit-mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
- mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
-}
-
-.mx_MessageActionBar_replyButton:after {
- -webkit-mask-image: url(../../img/element-icons/room/message-bar/reply.5812741.svg);
- mask-image: url(../../img/element-icons/room/message-bar/reply.5812741.svg);
-}
-
-.mx_MessageActionBar_editButton:after {
- -webkit-mask-image: url(../../img/element-icons/room/message-bar/edit.688678e.svg);
- mask-image: url(../../img/element-icons/room/message-bar/edit.688678e.svg);
-}
-
-.mx_MessageActionBar_optionsButton:after {
- -webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
- mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
-}
-
-.mx_MessageActionBar_resendButton:after {
- -webkit-mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
- mask-image: url(../../img/element-icons/retry.6cd23ad.svg);
-}
-
-.mx_MessageActionBar_cancelButton:after {
- -webkit-mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
- mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
-}
-
-.mx_MessageActionBar_downloadButton:after {
- -webkit-mask-size: 14px;
- mask-size: 14px;
- -webkit-mask-image: url(../../img/download.4f331f0.svg);
- mask-image: url(../../img/download.4f331f0.svg);
-}
-
-.mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton:after {
- background-color: transparent;
-}
-
-.mx_MessageTimestamp {
- color: #acacac;
- font-size: 1rem;
- -webkit-font-feature-settings: "tnum";
- font-feature-settings: "tnum";
- font-variant-numeric: tabular-nums;
-}
-
-.mx_MjolnirBody {
- opacity: 0.4;
-}
-
-.mx_ReactionsRow {
- margin: 6px 0;
- color: #2e2f32;
-}
-
-.mx_ReactionsRow .mx_ReactionsRow_addReactionButton {
- position: relative;
- display: inline-block;
- visibility: hidden;
- width: 24px;
- height: 24px;
- vertical-align: middle;
- margin-left: 4px;
- margin-right: 4px;
-}
-
-.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:before {
- content: "";
- position: absolute;
- height: 100%;
- width: 100%;
- -webkit-mask-size: 16px;
- mask-size: 16px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #8d99a5;
- -webkit-mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
- mask-image: url(../../img/element-icons/room/message-bar/emoji.af14771.svg);
-}
-
-.mx_ReactionsRow
- .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active {
- visibility: visible;
-}
-
-.mx_ReactionsRow
- .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active:before,
-.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:hover:before {
- background-color: #2e2f32;
-}
-
-.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
- visibility: visible;
-}
-
-.mx_ReactionsRow_showAll {
- text-decoration: none;
- font-size: 1.2rem;
- line-height: 2rem;
- margin-left: 4px;
- vertical-align: middle;
-}
-
-.mx_ReactionsRow_showAll:link,
-.mx_ReactionsRow_showAll:visited {
- color: #8d99a5;
-}
-
-.mx_ReactionsRow_showAll:hover {
- color: #2e2f32;
-}
-
-.mx_ReactionsRowButton {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- line-height: 2rem;
- margin-right: 6px;
- padding: 1px 6px;
- border: 1px solid #e9edf1;
- border-radius: 10px;
- background-color: #f3f8fd;
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- vertical-align: middle;
-}
-
-.mx_ReactionsRowButton:hover {
- border-color: #ddd;
-}
-
-.mx_ReactionsRowButton.mx_ReactionsRowButton_selected {
- background-color: #e9fff9;
- border-color: #0dbd8b;
-}
-
-.mx_ReactionsRowButton.mx_AccessibleButton_disabled {
- cursor: not-allowed;
-}
-
-.mx_ReactionsRowButton .mx_ReactionsRowButton_content {
- max-width: 100px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- padding-right: 4px;
-}
-
-.mx_RedactedBody {
- white-space: pre-wrap;
- color: #61708b;
- vertical-align: middle;
- padding-left: 20px;
- position: relative;
-}
-
-.mx_RedactedBody:before {
- height: 14px;
- width: 14px;
- background-color: #61708b;
- -webkit-mask-image: url(../../img/feather-customised/trash.custom.1e6ecd4.svg);
- mask-image: url(../../img/feather-customised/trash.custom.1e6ecd4.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- content: "";
- position: absolute;
- top: 1px;
- left: 0;
-}
-
-.mx_RoomAvatarEvent {
- opacity: 0.5;
- overflow-y: hidden;
-}
-
-.mx_RoomAvatarEvent_avatar {
- display: inline;
- position: relative;
- top: 5px;
-}
-
-.mx_SenderProfile_displayName {
- font-weight: 600;
-}
-
-.mx_SenderProfile_mxid {
- font-weight: 600;
- font-size: 1.1rem;
- margin-left: 5px;
- opacity: 0.5;
-}
-
-.mx_TextualEvent {
- opacity: 0.5;
- overflow-y: hidden;
-}
-
-.mx_TextualEvent a {
- color: #0dbd8b;
- cursor: pointer;
-}
-
-.mx_UnknownBody {
- white-space: pre-wrap;
-}
-
-.mx_EventTile_content.mx_ViewSourceEvent {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- opacity: 0.6;
- font-size: 1.2rem;
-}
-
-.mx_EventTile_content.mx_ViewSourceEvent code,
-.mx_EventTile_content.mx_ViewSourceEvent pre {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_EventTile_content.mx_ViewSourceEvent pre {
- line-height: 1.2;
- margin: 3.5px 0;
-}
-
-.mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle {
- width: 12px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: 0 center;
- mask-position: 0 center;
- -webkit-mask-size: auto 12px;
- mask-size: auto 12px;
- visibility: hidden;
- background-color: #0dbd8b;
- -webkit-mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
- mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
-}
-
-.mx_EventTile_content.mx_ViewSourceEvent.mx_ViewSourceEvent_expanded
- .mx_ViewSourceEvent_toggle {
- -webkit-mask-position: 0 bottom;
- mask-position: 0 bottom;
- margin-bottom: 7px;
- -webkit-mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
- mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
-}
-
-.mx_EventTile_content.mx_ViewSourceEvent:hover .mx_ViewSourceEvent_toggle {
- visibility: visible;
-}
-
-.mx_cryptoEvent.mx_cryptoEvent_icon:before {
- background-color: #fff;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 80%;
- mask-size: 80%;
-}
-
-.mx_cryptoEvent.mx_cryptoEvent_icon:after,
-.mx_cryptoEvent.mx_cryptoEvent_icon:before {
- -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
- mask-image: url(../../img/e2e/normal.76f0c09.svg);
-}
-
-.mx_cryptoEvent.mx_cryptoEvent_icon:after {
- background-color: #91a1c0;
-}
-
-.mx_cryptoEvent.mx_cryptoEvent_icon_verified:after {
- -webkit-mask-image: url(../../img/e2e/verified.5be6c9f.svg);
- mask-image: url(../../img/e2e/verified.5be6c9f.svg);
- background-color: #0dbd8b;
-}
-
-.mx_cryptoEvent.mx_cryptoEvent_icon_warning:after {
- -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
- mask-image: url(../../img/e2e/warning.78bb264.svg);
- background-color: #ff4b55;
-}
-
-.mx_cryptoEvent .mx_cryptoEvent_buttons,
-.mx_cryptoEvent .mx_cryptoEvent_state {
- grid-column: 3;
- grid-row: 1/3;
-}
-
-.mx_cryptoEvent .mx_cryptoEvent_buttons {
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- grid-gap: 5px;
- gap: 5px;
-}
-
-.mx_cryptoEvent .mx_cryptoEvent_state {
- width: 130px;
- padding: 10px 20px;
- margin: auto 0;
- text-align: center;
- color: #8d99a5;
- overflow-wrap: break-word;
- font-size: 1.2rem;
-}
-
-.mx_BaseCard {
- padding: 0 8px;
- overflow: hidden;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_BaseCard .mx_BaseCard_header {
- margin: 8px 0;
-}
-
-.mx_BaseCard .mx_BaseCard_header > h2 {
- margin: 0 44px;
- font-size: 1.8rem;
- font-weight: 600;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back,
-.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close {
- position: absolute;
- background-color: rgba(141, 151, 165, 0.2);
- height: 20px;
- width: 20px;
- margin: 12px;
- top: 0;
- border-radius: 10px;
-}
-
-.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before,
-.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before {
- content: "";
- position: absolute;
- height: 20px;
- width: 20px;
- top: 0;
- left: 0;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #91a1c0;
-}
-
-.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back {
- left: 0;
-}
-
-.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back:before {
- -webkit-transform: rotate(90deg);
- transform: rotate(90deg);
- -webkit-mask-size: 22px;
- mask-size: 22px;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close {
- right: 0;
-}
-
-.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close:before {
- -webkit-mask-image: url(../../img/icons-close.11ff07c.svg);
- mask-image: url(../../img/icons-close.11ff07c.svg);
- -webkit-mask-size: 8px;
- mask-size: 8px;
-}
-
-.mx_BaseCard .mx_AutoHideScrollbar {
- margin-right: -8px;
- padding-right: 8px;
- min-height: 0;
- width: 100%;
- height: 100%;
-}
-
-.mx_BaseCard .mx_BaseCard_Group {
- margin: 20px 0 16px;
-}
-
-.mx_BaseCard .mx_BaseCard_Group > * {
- margin-left: 12px;
- margin-right: 12px;
-}
-
-.mx_BaseCard .mx_BaseCard_Group > h1 {
- color: #8d99a5;
- font-size: 1.2rem;
- font-weight: 500;
-}
-
-.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button {
- padding: 10px 38px 10px 12px;
- margin: 0;
- position: relative;
- font-size: 1.3rem;
- height: 20px;
- line-height: 20px;
- border-radius: 8px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-
-.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:hover {
- background-color: rgba(141, 151, 165, 0.1);
-}
-
-.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:after {
- content: "";
- position: absolute;
- top: 10px;
- right: 6px;
- height: 20px;
- width: 20px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #c1c6cd;
- -webkit-transform: rotate(270deg);
- transform: rotate(270deg);
- -webkit-mask-size: 20px;
- mask-size: 20px;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_BaseCard
- .mx_BaseCard_Group
- .mx_BaseCard_Button.mx_AccessibleButton_disabled {
- padding-right: 12px;
-}
-
-.mx_BaseCard
- .mx_BaseCard_Group
- .mx_BaseCard_Button.mx_AccessibleButton_disabled:after {
- content: unset;
-}
-
-.mx_BaseCard .mx_BaseCard_footer {
- padding-top: 4px;
- text-align: center;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-pack: distribute;
- justify-content: space-around;
-}
-
-.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_kind_secondary {
- color: #737d8c;
- background-color: rgba(141, 151, 165, 0.2);
- font-weight: 600;
- font-size: 1.4rem;
-}
-
-.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_disabled {
- cursor: not-allowed;
-}
-
-.mx_FilePanel.mx_BaseCard,
-.mx_MemberList.mx_BaseCard,
-.mx_NotificationPanel.mx_BaseCard,
-.mx_UserInfo.mx_BaseCard {
- padding: 32px 0 0;
-}
-
-.mx_FilePanel.mx_BaseCard .mx_AutoHideScrollbar,
-.mx_MemberList.mx_BaseCard .mx_AutoHideScrollbar,
-.mx_NotificationPanel.mx_BaseCard .mx_AutoHideScrollbar,
-.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar {
- margin-right: unset;
- padding-right: unset;
-}
-
-.mx_EncryptionInfo_spinner .mx_Spinner {
- margin-top: 25px;
- margin-bottom: 15px;
-}
-
-.mx_EncryptionInfo_spinner {
- text-align: center;
-}
-
-.mx_PinnedMessagesCard {
- padding-top: 0;
-}
-
-.mx_PinnedMessagesCard .mx_BaseCard_header {
- text-align: center;
- margin-top: 0;
- border-bottom: 1px solid #e7e7e7;
-}
-
-.mx_PinnedMessagesCard .mx_BaseCard_header > h2 {
- font-weight: 600;
- font-size: 1.8rem;
- margin: 8px 0;
-}
-
-.mx_PinnedMessagesCard .mx_BaseCard_header .mx_BaseCard_close {
- margin-right: 6px;
-}
-
-.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- height: 100%;
-}
-
-.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty > div {
- height: -webkit-max-content;
- height: -moz-max-content;
- height: max-content;
- text-align: center;
- margin: auto 40px;
-}
-
-.mx_PinnedMessagesCard
- .mx_PinnedMessagesCard_empty
- > div
- .mx_PinnedMessagesCard_MessageActionBar {
- pointer-events: none;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- height: 32px;
- line-height: 2.4rem;
- border-radius: 8px;
- background: #fff;
- border: 1px solid #e7e7e7;
- padding: 1px;
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
- margin: 0 auto;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_PinnedMessagesCard
- .mx_PinnedMessagesCard_empty
- > div
- .mx_PinnedMessagesCard_MessageActionBar
- .mx_MessageActionBar_maskButton {
- display: inline-block;
- position: relative;
-}
-
-.mx_PinnedMessagesCard
- .mx_PinnedMessagesCard_empty
- > div
- .mx_PinnedMessagesCard_MessageActionBar
- .mx_MessageActionBar_optionsButton {
- background: rgba(141, 151, 165, 0.2);
- border-radius: 6px;
- z-index: 1;
-}
-
-.mx_PinnedMessagesCard
- .mx_PinnedMessagesCard_empty
- > div
- .mx_PinnedMessagesCard_MessageActionBar
- .mx_MessageActionBar_optionsButton:after {
- background-color: #2e2f32;
-}
-
-.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty > div > h2 {
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #2e2f32;
- margin-top: 24px;
- margin-bottom: 20px;
-}
-
-.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty > div > span {
- font-size: 1.2rem;
- line-height: 1.5rem;
- color: #737d8c;
-}
-
-.mx_RoomSummaryCard .mx_BaseCard_header {
- text-align: center;
- margin-top: 20px;
-}
-
-.mx_RoomSummaryCard .mx_BaseCard_header h2 {
- font-weight: 600;
- font-size: 1.8rem;
- margin: 12px 0 4px;
-}
-
-.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias {
- font-size: 1.3rem;
- color: #737d8c;
-}
-
-.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_alias,
-.mx_RoomSummaryCard .mx_BaseCard_header h2 {
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: pre-wrap;
-}
-
-.mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
-}
-
-.mx_RoomSummaryCard
- .mx_BaseCard_header
- .mx_RoomSummaryCard_avatar
- .mx_RoomSummaryCard_e2ee {
- display: inline-block;
- position: relative;
- width: 54px;
- height: 54px;
- border-radius: 50%;
- background-color: #737d8c;
- margin-top: -3px;
- margin-left: -10px;
- border: 3px solid #f2f5f8;
-}
-
-.mx_RoomSummaryCard
- .mx_BaseCard_header
- .mx_RoomSummaryCard_avatar
- .mx_RoomSummaryCard_e2ee:before {
- content: "";
- position: absolute;
- top: 13px;
- left: 13px;
- height: 28px;
- width: 28px;
- -webkit-mask-size: cover;
- mask-size: cover;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-image: url(../../img/e2e/disabled.6c5c6be.svg);
- mask-image: url(../../img/e2e/disabled.6c5c6be.svg);
- background-color: #fff;
-}
-
-.mx_RoomSummaryCard
- .mx_BaseCard_header
- .mx_RoomSummaryCard_avatar
- .mx_RoomSummaryCard_e2ee_normal {
- background-color: #424446;
-}
-
-.mx_RoomSummaryCard
- .mx_BaseCard_header
- .mx_RoomSummaryCard_avatar
- .mx_RoomSummaryCard_e2ee_normal:before {
- -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
- mask-image: url(../../img/e2e/normal.76f0c09.svg);
-}
-
-.mx_RoomSummaryCard
- .mx_BaseCard_header
- .mx_RoomSummaryCard_avatar
- .mx_RoomSummaryCard_e2ee_verified {
- background-color: #0dbd8b;
-}
-
-.mx_RoomSummaryCard
- .mx_BaseCard_header
- .mx_RoomSummaryCard_avatar
- .mx_RoomSummaryCard_e2ee_verified:before {
- -webkit-mask-image: url(../../img/e2e/verified.5be6c9f.svg);
- mask-image: url(../../img/e2e/verified.5be6c9f.svg);
-}
-
-.mx_RoomSummaryCard
- .mx_BaseCard_header
- .mx_RoomSummaryCard_avatar
- .mx_RoomSummaryCard_e2ee_warning {
- background-color: #ff4b55;
-}
-
-.mx_RoomSummaryCard
- .mx_BaseCard_header
- .mx_RoomSummaryCard_avatar
- .mx_RoomSummaryCard_e2ee_warning:before {
- -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
- mask-image: url(../../img/e2e/warning.78bb264.svg);
-}
-
-.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button {
- padding-left: 44px;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_aboutGroup
- .mx_RoomSummaryCard_Button:before {
- content: "";
- position: absolute;
- top: 8px;
- left: 10px;
- height: 24px;
- width: 24px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #c1c6cd;
-}
-
-.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button {
- padding: 0;
- height: auto;
- color: #8d99a5;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_icon_app {
- padding: 10px 48px 10px 12px;
- text-overflow: ellipsis;
- overflow: hidden;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_icon_app
- .mx_BaseAvatar_image {
- vertical-align: top;
- margin-right: 12px;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_icon_app
- span {
- color: #2e2f32;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_options,
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_pinToggle {
- position: absolute;
- top: 0;
- height: 100%;
- width: 24px;
- padding: 12px 4px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- min-width: 24px;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_options:hover:after,
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_pinToggle:hover:after {
- content: "";
- position: absolute;
- height: 24px;
- width: 24px;
- top: 8px;
- left: 0;
- border-radius: 12px;
- background-color: rgba(141, 151, 165, 0.1);
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_options:before,
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_pinToggle:before {
- content: "";
- position: absolute;
- height: 16px;
- width: 16px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 16px;
- mask-size: 16px;
- background-color: #c1c6cd;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_pinToggle {
- right: 24px;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_pinToggle:before {
- -webkit-mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
- mask-image: url(../../img/element-icons/room/pin-upright.65783fb.svg);
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_options {
- right: 48px;
- display: none;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button
- .mx_RoomSummaryCard_app_options:before {
- -webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
- mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned:after {
- opacity: 0.2;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned
- .mx_RoomSummaryCard_app_pinToggle:before {
- background-color: #0dbd8b;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button:hover
- .mx_RoomSummaryCard_icon_app {
- padding-right: 72px;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button:hover
- .mx_RoomSummaryCard_app_options {
- display: unset;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button:before {
- content: unset;
-}
-
-.mx_RoomSummaryCard
- .mx_RoomSummaryCard_appsGroup
- .mx_RoomSummaryCard_Button:after {
- top: 8px;
- pointer-events: none;
-}
-
-.mx_RoomSummaryCard .mx_AccessibleButton_kind_link {
- padding: 0;
- margin-top: 12px;
- margin-bottom: 12px;
- font-size: 1.3rem;
- font-weight: 600;
-}
-
-.mx_RoomSummaryCard_icon_people:before {
- -webkit-mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
- mask-image: url(../../img/element-icons/room/members.88c3e93.svg);
-}
-
-.mx_RoomSummaryCard_icon_files:before {
- -webkit-mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
- mask-image: url(../../img/element-icons/room/files.5709c0c.svg);
-}
-
-.mx_RoomSummaryCard_icon_share:before {
- -webkit-mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
- mask-image: url(../../img/element-icons/room/share.54dc3fb.svg);
-}
-
-.mx_RoomSummaryCard_icon_settings:before {
- -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
- mask-image: url(../../img/element-icons/settings.6b381af.svg);
-}
-
-.mx_RoomSummaryCard_icon_export:before {
- -webkit-mask-image: url(../../img/element-icons/export.57444c5.svg);
- mask-image: url(../../img/element-icons/export.57444c5.svg);
-}
-
-.mx_UserInfo.mx_BaseCard {
- padding-top: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- overflow-y: auto;
- font-size: 1.2rem;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel {
- cursor: pointer;
- position: absolute;
- top: 0;
- border-radius: 4px;
- background-color: #f2f5f8;
- margin: 9px;
- z-index: 1;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel div {
- height: 16px;
- width: 16px;
- padding: 4px;
- -webkit-mask-image: url(../../img/minimise.871d2de.svg);
- mask-image: url(../../img/minimise.871d2de.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: 7px center;
- mask-position: 7px center;
- background-color: #91a1c0;
-}
-
-.mx_UserInfo.mx_BaseCard h2 {
- font-size: 1.8rem;
- font-weight: 600;
- margin: 18px 0 0;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_container {
- padding: 8px 16px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_separator {
- border-bottom: 1px solid rgba(46, 47, 50, 0.1);
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetailsContainer {
- padding-top: 0;
- padding-bottom: 0;
- margin-bottom: 8px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_RoomTile_nameContainer {
- width: 154px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_RoomTile_badge {
- display: none;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_RoomTile_name {
- width: 160px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar {
- margin: 24px 32px 0;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar > div {
- max-width: 30vh;
- margin: 0 auto;
- -webkit-transition: 0.5s;
- transition: 0.5s;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar > div > div {
- padding-top: 100%;
- position: relative;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar > div > div * {
- border-radius: 100%;
- position: absolute;
- top: 0;
- left: 0;
- width: 100% !important;
- height: 100% !important;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_BaseAvatar_initial {
- z-index: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- font-size: 6rem !important;
- width: 100% !important;
- -webkit-transition: font-size 0.5s;
- transition: font-size 0.5s;
-}
-
-.mx_UserInfo.mx_BaseCard
- .mx_UserInfo_avatar
- .mx_BaseAvatar.mx_BaseAvatar_image {
- cursor: -webkit-zoom-in;
- cursor: zoom-in;
-}
-
-.mx_UserInfo.mx_BaseCard h3 {
- text-transform: uppercase;
- color: #8d99a5;
- font-weight: 600;
- font-size: 1.2rem;
- margin: 4px 0;
-}
-
-.mx_UserInfo.mx_BaseCard p {
- margin: 5px 0;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile {
- text-align: center;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- font-size: 1.8rem;
- line-height: 2.5rem;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 span {
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
- word-break: break-all;
- text-overflow: ellipsis;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 .mx_E2EIcon {
- margin-top: 3px;
- margin-right: 4px;
- min-width: 18px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profileStatus {
- margin-top: 12px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField {
- margin: 6px 0;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField,
-.mx_UserInfo.mx_BaseCard
- .mx_UserInfo_memberDetails
- .mx_UserInfo_profileField
- .mx_UserInfo_roleDescription {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_UserInfo.mx_BaseCard
- .mx_UserInfo_memberDetails
- .mx_UserInfo_profileField
- .mx_UserInfo_roleDescription {
- margin: 11px 0 12px;
-}
-
-.mx_UserInfo.mx_BaseCard
- .mx_UserInfo_memberDetails
- .mx_UserInfo_profileField
- .mx_Field {
- margin: 0;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_field {
- cursor: pointer;
- color: #0dbd8b;
- line-height: 1.6rem;
- margin: 8px 0;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_field.mx_UserInfo_destructive {
- color: #ff4b55;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_statusMessage {
- font-size: 1.1rem;
- opacity: 0.5;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: clip;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) {
- padding-top: 16px;
- padding-bottom: 0;
-}
-
-.mx_UserInfo.mx_BaseCard
- .mx_UserInfo_container:not(.mx_UserInfo_separator)
- > :not(h3) {
- margin-left: 8px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin: 8px 0;
-}
-
-.mx_UserInfo.mx_BaseCard
- .mx_UserInfo_devices
- .mx_UserInfo_device.mx_UserInfo_device_verified
- .mx_UserInfo_device_trusted {
- color: #0dbd8b;
-}
-
-.mx_UserInfo.mx_BaseCard
- .mx_UserInfo_devices
- .mx_UserInfo_device.mx_UserInfo_device_unverified
- .mx_UserInfo_device_trusted {
- color: #ff4b55;
-}
-
-.mx_UserInfo.mx_BaseCard
- .mx_UserInfo_devices
- .mx_UserInfo_device
- .mx_UserInfo_device_name {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- margin-right: 5px;
- word-break: break-word;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_E2EIcon {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- margin: 2px 5px 0 0;
- width: 12px;
- height: 12px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_expand {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-top: 11px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_AccessibleButton.mx_AccessibleButton_hasKind {
- padding: 8px 18px;
-}
-
-.mx_UserInfo.mx_BaseCard .mx_UserInfo_wideButton,
-.mx_UserInfo.mx_BaseCard .mx_VerificationShowSas .mx_AccessibleButton {
- display: block;
- margin: 16px 0 8px;
-}
-
-.mx_UserInfo.mx_BaseCard
- .mx_VerificationShowSas
- .mx_AccessibleButton
- + .mx_AccessibleButton {
- margin: 8px 0;
-}
-
-.mx_UserInfo.mx_UserInfo_smallAvatar .mx_UserInfo_avatar > div {
- max-width: 72px;
- margin: 0 auto;
-}
-
-.mx_UserInfo.mx_UserInfo_smallAvatar
- .mx_UserInfo_avatar
- .mx_BaseAvatar_initial {
- font-size: 40px !important;
-}
-
-.mx_VerificationPanel_reciprocate_section .mx_E2EIcon,
-.mx_VerificationPanel_verified_section .mx_E2EIcon {
- margin: 20px auto !important;
-}
-
-.mx_UserInfo .mx_EncryptionPanel_cancel {
- -webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
- mask: url(../../img/feather-customised/cancel.23c2689.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: cover;
- mask-size: cover;
- width: 14px;
- height: 14px;
- background-color: #61708b;
- cursor: pointer;
- position: absolute;
- z-index: 100;
- top: 14px;
- right: 14px;
-}
-
-.mx_UserInfo .mx_VerificationPanel_qrCode {
- padding: 4px 4px 0;
- background: #fff;
- border-radius: 4px;
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
- max-width: 100%;
- margin: 0 auto !important;
-}
-
-.mx_UserInfo .mx_VerificationPanel_qrCode canvas {
- height: auto !important;
- width: 100% !important;
- max-width: 240px;
-}
-
-.mx_UserInfo .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton {
- width: 100%;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- padding: 10px;
- display: block;
- margin: 10px 0;
-}
-
-.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions,
-.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-top: 10px;
- margin-bottom: 10px;
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
- align-items: stretch;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_CompleteSecurity_body
- .mx_VerificationPanel_QRPhase_startOptions
- > .mx_VerificationPanel_QRPhase_betweenText,
-.mx_Dialog
- .mx_VerificationPanel_QRPhase_startOptions
- > .mx_VerificationPanel_QRPhase_betweenText {
- width: 50px;
- vertical-align: middle;
- text-align: center;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_CompleteSecurity_body
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption,
-.mx_Dialog
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption {
- background-color: #f3f8fd;
- border-radius: 10px;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- padding: 20px;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- position: relative;
- max-width: 310px;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-.mx_CompleteSecurity_body
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption
- .mx_VerificationPanel_QRPhase_noQR,
-.mx_CompleteSecurity_body
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption
- canvas,
-.mx_Dialog
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption
- .mx_VerificationPanel_QRPhase_noQR,
-.mx_Dialog
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption
- canvas {
- width: 220px !important;
- height: 220px !important;
- background-color: #fff;
- border-radius: 4px;
- vertical-align: middle;
- text-align: center;
- padding: 10px;
-}
-
-.mx_CompleteSecurity_body
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption
- > p,
-.mx_Dialog
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption
- > p {
- margin-top: 0;
- font-weight: 700;
-}
-
-.mx_CompleteSecurity_body
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption
- .mx_VerificationPanel_QRPhase_helpText,
-.mx_Dialog
- .mx_VerificationPanel_QRPhase_startOptions
- .mx_VerificationPanel_QRPhase_startOption
- .mx_VerificationPanel_QRPhase_helpText {
- font-size: 1.4rem;
- margin: 30px 0;
- text-align: center;
-}
-
-.mx_CompleteSecurity_body
- .mx_VerificationPanel_verified_section
- .mx_AccessibleButton,
-.mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton {
- float: right;
-}
-
-.mx_CompleteSecurity_body
- .mx_VerificationPanel_reciprocate_section
- .mx_AccessibleButton,
-.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton {
- margin-left: 10px;
- padding: 7px 40px;
-}
-
-.mx_CompleteSecurity_body
- .mx_VerificationPanel_reciprocate_section
- .mx_VerificationPanel_reciprocateButtons,
-.mx_Dialog
- .mx_VerificationPanel_reciprocate_section
- .mx_VerificationPanel_reciprocateButtons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
-}
-
-.mx_WidgetCard {
- height: 100%;
- display: contents;
-}
-
-.mx_WidgetCard .mx_AppTileFullWidth {
- max-width: unset;
- height: 100%;
- border: 0;
-}
-
-.mx_WidgetCard .mx_BaseCard_header {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
-}
-
-.mx_WidgetCard .mx_BaseCard_header > h2 {
- margin-right: 0;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton {
- position: relative;
- margin-right: 44px;
- height: 20px;
- width: 20px;
- min-width: 20px;
- padding: 0;
-}
-
-.mx_WidgetCard .mx_BaseCard_header .mx_WidgetCard_optionsButton:before {
- content: "";
- position: absolute;
- width: 20px;
- height: 20px;
- top: 0;
- left: 4px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
- mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
- background-color: #737d8c;
-}
-
-.mx_WidgetCard_maxPinnedTooltip {
- background-color: #ff4b55;
- color: #fff;
-}
-
-.mx_AliasSettings_editable {
- border: 0;
- border-bottom: 1px solid #c7c7c7;
- padding: 0;
- min-width: 240px;
-}
-
-.mx_AliasSettings_editable:focus {
- border-bottom: 1px solid #0dbd8b;
- outline: none;
- -webkit-box-shadow: none;
- box-shadow: none;
-}
-
-.mx_AliasSettings summary {
- cursor: pointer;
- color: #0dbd8b;
- font-weight: 600;
- list-style: none;
-}
-
-.mx_AliasSettings summary::-webkit-details-marker {
- display: none;
-}
-
-.mx_AliasSettings .mx_AliasSettings_localAliasHeader {
- margin-top: 35px;
-}
-
-.mx_AppsDrawer {
- margin: 5px 5px 5px 18px;
- position: relative;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- overflow: hidden;
-}
-
-.mx_AppsDrawer .mx_AppsContainer_resizerHandleContainer {
- width: 100%;
- height: 10px;
- margin-top: -3px;
- display: block;
- position: relative;
-}
-
-.mx_AppsDrawer .mx_AppsContainer_resizerHandle {
- cursor: ns-resize;
- width: 100% !important;
- height: 100% !important;
- position: absolute;
- bottom: 0 !important;
-}
-
-.mx_AppsDrawer .mx_AppsContainer_resizerHandle:after {
- content: "";
- position: absolute;
- border-radius: 3px;
- top: 6px;
- bottom: 0;
- left: calc(50% - 32px);
- right: calc(50% - 32px);
-}
-
-.mx_AppsDrawer:hover .mx_AppsContainer_resizerHandle:after {
- opacity: 0.8;
- background: #2e2f32;
-}
-
-.mx_AppsDrawer:hover .mx_ResizeHandle_horizontal:before {
- position: absolute;
- left: 3px;
- top: 50%;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- height: 64px;
- width: 4px;
- border-radius: 4px;
- content: "";
- background-color: #2e2f32;
- opacity: 0.8;
-}
-
-.mx_AppsContainer_resizer {
- margin-bottom: 8px;
-}
-
-.mx_AppsContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
- align-items: stretch;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- height: 100%;
- width: 100%;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- min-height: 0;
-}
-
-.mx_AppsContainer .mx_AppTile:first-of-type {
- border-left-width: 8px;
- border-radius: 10px 0 0 10px;
-}
-
-.mx_AppsContainer .mx_AppTile:last-of-type {
- border-right-width: 8px;
- border-radius: 0 10px 10px 0;
-}
-
-.mx_AppsContainer .mx_ResizeHandle_horizontal {
- position: relative;
-}
-
-.mx_AppsContainer .mx_ResizeHandle_horizontal > div {
- width: 0;
-}
-
-.mx_AppsDrawer_2apps .mx_AppTile {
- width: 50%;
-}
-
-.mx_AppsDrawer_2apps .mx_AppTile:nth-child(3) {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- width: 0 !important;
- min-width: 240px !important;
-}
-
-.mx_AppsDrawer_3apps .mx_AppTile {
- width: 33%;
-}
-
-.mx_AppsDrawer_3apps .mx_AppTile:nth-child(3) {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- width: 0 !important;
- min-width: 240px !important;
-}
-
-.mx_AppTile {
- width: 50%;
- min-width: 240px;
- border-color: #f2f5f8;
- border-style: solid;
- border-width: 8px 5px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- background-color: #f2f5f8;
-}
-
-.mx_AppTileFullWidth {
- width: 100% !important;
- border: 5px solid #f2f5f8;
- border-radius: 8px;
- background-color: #f2f5f8;
-}
-
-.mx_AppTile_mini,
-.mx_AppTileFullWidth {
- margin: 0;
- padding: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_AppTile_mini {
- width: 100%;
- height: 200px;
-}
-
-.mx_AppTile .mx_AppTile_persistedWrapper,
-.mx_AppTile_mini .mx_AppTile_persistedWrapper,
-.mx_AppTileFullWidth .mx_AppTile_persistedWrapper {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_AppTile_persistedWrapper div {
- width: 100%;
- height: 100%;
-}
-
-.mx_AppTileMenuBar {
- margin: 0;
- font-size: 1.2rem;
- background-color: #f2f5f8;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- width: 100%;
- padding-top: 2px;
- padding-bottom: 8px;
-}
-
-.mx_AppTileMenuBarTitle {
- line-height: 20px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.mx_AppTileMenuBarTitle .mx_WidgetAvatar {
- margin-right: 12px;
-}
-
-.mx_AppTileMenuBarTitle > :last-child {
- margin-left: 9px;
-}
-
-.mx_AppTileMenuBarWidgets {
- float: right;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_AppTileMenuBar_iconButton {
- width: 12px;
- height: 12px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: 0 center;
- mask-position: 0 center;
- -webkit-mask-size: auto 12px;
- mask-size: auto 12px;
- background-color: #212121;
- margin: 0 3px;
-}
-
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
- -webkit-mask-image: url(../../img/feather-customised/widget/external-link.7ab6751.svg);
- mask-image: url(../../img/feather-customised/widget/external-link.7ab6751.svg);
-}
-
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu {
- -webkit-mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
- mask-image: url(../../img/element-icons/room/ellipsis.b82ece6.svg);
-}
-
-.mx_AppTileBody {
- height: 100%;
- background-color: #fff;
-}
-
-.mx_AppTileBody,
-.mx_AppTileBody_mini {
- width: 100%;
- overflow: hidden;
- border-radius: 8px;
-}
-
-.mx_AppTileBody_mini {
- height: 200px;
-}
-
-.mx_AppTile .mx_AppTileBody,
-.mx_AppTile_mini .mx_AppTileBody_mini,
-.mx_AppTileFullWidth .mx_AppTileBody {
- height: inherit;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_AppTileBody_mini iframe,
-.mx_AppTileBody iframe {
- border: none;
- width: 100%;
- height: 100%;
-}
-
-.mx_AppTileBody iframe {
- overflow: hidden;
- padding: 0;
- margin: 0;
- display: block;
-}
-
-.mx_AppPermissionWarning {
- text-align: center;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- height: 100%;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- font-size: 1.6rem;
-}
-
-.mx_AppPermissionWarning_row {
- margin-bottom: 12px;
-}
-
-.mx_AppPermissionWarning_smallText {
- font-size: 1.2rem;
-}
-
-.mx_AppPermissionWarning_bolder {
- font-weight: 600;
-}
-
-.mx_AppPermissionWarning h4 {
- margin: 0;
- padding: 0;
-}
-
-.mx_AppPermissionWarning_helpIcon {
- margin-top: 1px;
- margin-right: 2px;
- width: 10px;
- height: 10px;
- display: inline-block;
-}
-
-.mx_AppPermissionWarning_helpIcon:before {
- display: inline-block;
- background-color: #0dbd8b;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 12px;
- mask-size: 12px;
- width: 12px;
- height: 12px;
- -webkit-mask-position: center;
- mask-position: center;
- content: "";
- vertical-align: middle;
- -webkit-mask-image: url(../../img/feather-customised/help-circle.03fb6cf.svg);
- mask-image: url(../../img/feather-customised/help-circle.03fb6cf.svg);
-}
-
-.mx_AppPermissionWarning_tooltip {
- -webkit-box-shadow: none;
- box-shadow: none;
- background-color: #27303a;
- color: #fff;
- border: none;
- border-radius: 3px;
- padding: 6px 8px;
-}
-
-.mx_AppPermissionWarning_tooltip ul {
- list-style-position: inside;
- padding-left: 2px;
- margin-left: 0;
-}
-
-.mx_AppLoading {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- font-weight: 700;
- position: relative;
- height: 100%;
- background-color: #fff !important;
- border-radius: 8px;
-}
-
-.mx_AppLoading .mx_Spinner {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
-}
-
-.mx_AppLoading_spinner_fadeIn {
- -webkit-animation-fill-mode: backwards;
- animation-fill-mode: backwards;
- -webkit-animation-duration: 0.2s;
- animation-duration: 0.2s;
- -webkit-animation-delay: 0.5s;
- animation-delay: 0.5s;
- -webkit-animation-name: mx_AppLoading_spinner_fadeIn_animation;
- animation-name: mx_AppLoading_spinner_fadeIn_animation;
-}
-
-@-webkit-keyframes mx_AppLoading_spinner_fadeIn_animation {
- 0% {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-@keyframes mx_AppLoading_spinner_fadeIn_animation {
- 0% {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-.mx_AppLoading iframe {
- display: none;
-}
-
-.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper {
- z-index: 1;
-}
-
-.mx_Autocomplete {
- position: absolute;
- bottom: 0;
- z-index: 1001;
- width: 100%;
- background: #fff;
- border: 1px solid transparent;
- border-bottom: none;
- border-radius: 8px 8px 0 0;
- max-height: 50vh;
- overflow: auto;
- -webkit-box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
- box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
-}
-
-.mx_Autocomplete_ProviderSection {
- border-bottom: 1px solid transparent;
-}
-
-.mx_Autocomplete_Completion_block {
- height: 34px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- padding: 0 12px;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- cursor: pointer;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #2e2f32;
-}
-
-.mx_Autocomplete_Completion_block * {
- margin: 0 3px;
-}
-
-.mx_Autocomplete_Completion_pill {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-radius: 2rem;
- height: 3.4rem;
- padding: 0.4rem;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- cursor: pointer;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #2e2f32;
-}
-
-.mx_Autocomplete_Completion_pill > * {
- margin-right: 0.3rem;
-}
-
-.mx_Autocomplete_Completion_subtitle {
- font-style: italic;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_Autocomplete_Completion_description {
- color: grey;
-}
-
-.mx_Autocomplete_Completion_container_pill {
- margin: 12px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-flow: wrap;
- flex-flow: wrap;
-}
-
-.mx_Autocomplete_Completion_container_truncate
- .mx_Autocomplete_Completion_description,
-.mx_Autocomplete_Completion_container_truncate
- .mx_Autocomplete_Completion_subtitle,
-.mx_Autocomplete_Completion_container_truncate
- .mx_Autocomplete_Completion_title {
- max-width: 150px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.mx_Autocomplete_Completion.selected,
-.mx_Autocomplete_Completion:hover {
- background: #f2f5f8;
- outline: none;
-}
-
-.mx_Autocomplete_provider_name {
- margin: 12px;
- color: #2e2f32;
- font-weight: 400;
- opacity: 0.4;
-}
-
-.m_RoomView_auxPanel_stateViews {
- padding: 5px 5px 5px 19px;
- border-bottom: 1px solid transparent;
-}
-
-.m_RoomView_auxPanel_stateViews_span a {
- text-decoration: none;
- color: inherit;
-}
-
-.m_RoomView_auxPanel_stateViews_span[data-severity="warning"] {
- font-weight: 700;
- color: orange;
-}
-
-.m_RoomView_auxPanel_stateViews_span[data-severity="alert"] {
- font-weight: 700;
- color: red;
-}
-
-.m_RoomView_auxPanel_stateViews_span[data-severity="normal"] {
- font-weight: 400;
-}
-
-.m_RoomView_auxPanel_stateViews_span[data-severity="notice"] {
- font-weight: 400;
- color: #a2a2a2;
-}
-
-.m_RoomView_auxPanel_stateViews_delim {
- padding: 0 5px;
- color: #a2a2a2;
-}
-
-.mx_BasicMessageComposer {
- position: relative;
-}
-
-.mx_BasicMessageComposer
- .mx_BasicMessageComposer_inputEmpty
- > :first-child:before {
- content: var(--placeholder);
- opacity: 0.333;
- width: 0;
- height: 0;
- overflow: visible;
- display: inline-block;
- pointer-events: none;
- white-space: nowrap;
-}
-
-@-webkit-keyframes visualbell {
- 0% {
- background-color: #faa;
- }
- to {
- background-color: #fff;
- }
-}
-
-.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error {
- -webkit-animation: visualbell 0.2s;
- animation: visualbell 0.2s;
-}
-
-.mx_BasicMessageComposer .mx_BasicMessageComposer_input {
- white-space: pre-wrap;
- word-wrap: break-word;
- outline: none;
- overflow-x: hidden;
-}
-
-.mx_BasicMessageComposer
- .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
- span.mx_RoomPill,
-.mx_BasicMessageComposer
- .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
- span.mx_UserPill {
- position: relative;
-}
-
-.mx_BasicMessageComposer
- .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
- span.mx_RoomPill:before,
-.mx_BasicMessageComposer
- .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar
- span.mx_UserPill:before {
- content: var(--avatar-letter);
- width: 1.6rem;
- height: 1.6rem;
- margin-right: 0.24rem;
- background: var(--avatar-background), #fff;
- color: #fff;
- background-repeat: no-repeat;
- background-size: 1.6rem;
- border-radius: 1.6rem;
- text-align: center;
- font-weight: 400;
- line-height: 1.6rem;
- font-size: 1.04rem;
-}
-
-.mx_BasicMessageComposer
- .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_disabled {
- pointer-events: none;
-}
-
-.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper {
- position: relative;
- height: 0;
-}
-
-.mx_E2EIcon {
- width: 16px;
- height: 16px;
- margin: 0 9px;
- position: relative;
- display: block;
-}
-
-.mx_E2EIcon_normal:after,
-.mx_E2EIcon_normal:before,
-.mx_E2EIcon_verified:after,
-.mx_E2EIcon_verified:before,
-.mx_E2EIcon_warning:after,
-.mx_E2EIcon_warning:before {
- content: "";
- display: block;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_E2EIcon:before {
- background-color: #fff;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 80%;
- mask-size: 80%;
-}
-
-.mx_E2EIcon:before,
-.mx_E2EIcon_bordered {
- -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
- mask-image: url(../../img/e2e/normal.76f0c09.svg);
-}
-
-.mx_E2EIcon_bordered {
- background-color: #f3f8fd;
-}
-
-.mx_E2EIcon_bordered:after {
- -webkit-mask-size: 75%;
- mask-size: 75%;
-}
-
-.mx_E2EIcon_bordered:before {
- -webkit-mask-size: 60%;
- mask-size: 60%;
-}
-
-.mx_E2EIcon_warning:after {
- -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
- mask-image: url(../../img/e2e/warning.78bb264.svg);
- background-color: #ff4b55;
-}
-
-.mx_E2EIcon_normal:after {
- -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
- mask-image: url(../../img/e2e/normal.76f0c09.svg);
- background-color: #91a1c0;
-}
-
-.mx_E2EIcon_verified:after {
- -webkit-mask-image: url(../../img/e2e/verified.5be6c9f.svg);
- mask-image: url(../../img/e2e/verified.5be6c9f.svg);
- background-color: #0dbd8b;
-}
-
-.mx_EditMessageComposer {
- padding: 3px;
- margin: -7px -10px -5px;
- overflow: visible !important;
-}
-
-.mx_EditMessageComposer .mx_BasicMessageComposer_input {
- border-radius: 4px;
- border: 1px solid transparent;
- background-color: #fff;
- max-height: 200px;
- padding: 3px 6px;
-}
-
-.mx_EditMessageComposer .mx_BasicMessageComposer_input:focus {
- border-color: rgba(13, 189, 139, 0.5);
-}
-
-.mx_EditMessageComposer .mx_EditMessageComposer_buttons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- position: absolute;
- left: 0;
- background: #f3f8fd;
- z-index: 100;
- right: 0;
- margin: 0 -110px 0 0;
- padding: 5px 147px 5px 5px;
-}
-
-.mx_EditMessageComposer .mx_EditMessageComposer_buttons .mx_AccessibleButton {
- margin-left: 5px;
- padding: 5px 40px;
-}
-
-.mx_EventTile_last .mx_EditMessageComposer_buttons {
- position: static;
- margin-right: -147px;
-}
-
-.mx_EntityTile {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #2e2f32;
- cursor: pointer;
-}
-
-.mx_EntityTile .mx_E2EIcon {
- margin: 0;
- position: absolute;
- bottom: 2px;
- right: 7px;
-}
-
-.mx_EntityTile:hover {
- padding-right: 30px;
- position: relative;
-}
-
-.mx_EntityTile:hover:before {
- content: "";
- position: absolute;
- top: calc(50% - 8px);
- right: -8px;
- -webkit-mask: url(../../img/member_chevron.4163a20.png);
- mask: url(../../img/member_chevron.4163a20.png);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- width: 16px;
- height: 16px;
- background-color: #91a1c0;
-}
-
-.mx_EntityTile .mx_PresenceLabel {
- display: none;
-}
-
-.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_PresenceLabel {
- display: block;
-}
-
-.mx_EntityTile_invite {
- display: table-cell;
- vertical-align: middle;
- margin-left: 10px;
- width: 26px;
-}
-
-.mx_EntityTile_avatar,
-.mx_GroupRoomTile_avatar {
- padding: 4px 12px 4px 3px;
- position: relative;
-}
-
-.mx_EntityTile_name,
-.mx_GroupRoomTile_name {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- overflow: hidden;
- font-size: 1.4rem;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.mx_EntityTile_details {
- overflow: hidden;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_EntityTile_ellipsis .mx_EntityTile_name,
-.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
- font-style: italic;
- color: #2e2f32;
-}
-
-.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,
-.mx_EntityTile_offline_beenactive .mx_EntityTile_name,
-.mx_EntityTile_unavailable .mx_EntityTile_avatar,
-.mx_EntityTile_unavailable .mx_EntityTile_name {
- opacity: 0.5;
-}
-
-.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,
-.mx_EntityTile_offline_neveractive .mx_EntityTile_name,
-.mx_EntityTile_unknown .mx_EntityTile_avatar,
-.mx_EntityTile_unknown .mx_EntityTile_name {
- opacity: 0.25;
-}
-
-.mx_EntityTile_subtext {
- font-size: 1.1rem;
- opacity: 0.5;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: clip;
-}
-
-.mx_EntityTile_power {
- -webkit-padding-start: 6px;
- padding-inline-start: 6px;
- font-size: 1rem;
- color: #8d99a5;
- max-width: 6em;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.mx_EntityTile:hover .mx_EntityTile_power {
- display: none;
-}
-
-.mx_EventTile[data-layout="bubble"],
-.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary {
- --avatarSize: 32px;
- --gutterSize: 11px;
- --cornerRadius: 12px;
- --maxWidth: 70%;
-}
-
-.mx_EventTile[data-layout="bubble"] {
- position: relative;
- margin-top: var(--gutterSize);
- margin-left: 50px;
- margin-right: 100px;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation {
- margin-top: 2px;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_EventTile {
- padding-top: 0;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_selected:before,
-.mx_EventTile[data-layout="bubble"]:hover:before {
- content: "";
- position: absolute;
- top: -1px;
- bottom: -1px;
- left: -60px;
- right: -60px;
- z-index: -1;
- background: #fefcf5;
- border-radius: 4px;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_selected
- .mx_EventTile_avatar
- img,
-.mx_EventTile[data-layout="bubble"]:hover .mx_EventTile_avatar img {
- -webkit-box-shadow: 0 0 0 3px #fefcf5;
- box-shadow: 0 0 0 3px #fefcf5;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_EventTile_line,
-.mx_EventTile[data-layout="bubble"] .mx_SenderProfile {
- width: -webkit-fit-content;
- width: -moz-fit-content;
- width: fit-content;
- max-width: 70%;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_SenderProfile {
- position: relative;
- top: -2px;
- left: 2px;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line {
- border-bottom-right-radius: var(--cornerRadius);
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_avatar {
- left: -34px;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar {
- right: 0;
- -webkit-transform: translate3d(90%, 50%, 0);
- transform: translate3d(90%, 50%, 0);
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="false"] {
- --backgroundColor: #f7f8f9;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line {
- border-bottom-left-radius: var(--cornerRadius);
- float: right;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line > a {
- left: auto;
- right: -68px;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_SenderProfile {
- display: none;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="true"]
- .mx_ReplyTile
- .mx_SenderProfile {
- display: block;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_ReactionsRow {
- float: right;
- clear: right;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="true"]
- .mx_ReactionsRow
- > :last-child {
- -webkit-box-ordinal-group: 0;
- -ms-flex-order: -1;
- order: -1;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_avatar {
- top: -19px;
- right: -35px;
-}
-
-.mx_EventTile[data-layout="bubble"][data-self="true"] {
- --backgroundColor: #f8fdfc;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
- position: relative;
- padding: var(--gutterSize);
- border-top-left-radius: var(--cornerRadius);
- border-top-right-radius: var(--cornerRadius);
- background: var(--backgroundColor);
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- grid-gap: 5px;
- gap: 5px;
- margin: 0 -12px 0 -9px;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_EventTile_line > a {
- position: absolute;
- padding: 10px 20px;
- top: 0;
- left: -68px;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"]
- .mx_EventTile_line {
- border-top-left-radius: 0;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="false"]
- .mx_EventTile_line {
- border-bottom-left-radius: var(--cornerRadius);
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"]
- .mx_EventTile_line {
- border-top-right-radius: 0;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="true"]
- .mx_EventTile_line {
- border-bottom-right-radius: var(--cornerRadius);
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_EventTile_avatar {
- position: absolute;
- top: 0;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_EventTile_avatar img {
- -webkit-box-shadow: 0 0 0 3px #fff;
- box-shadow: 0 0 0 3px #fff;
- border-radius: 50%;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_BaseAvatar,
-.mx_EventTile[data-layout="bubble"] .mx_EventTile_avatar {
- line-height: 1;
-}
-
-.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
- > .mx_EventTile_line {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
- .mx_ReplyThread_show {
- -webkit-box-ordinal-group: 100000;
- -ms-flex-order: 99999;
- order: 99999;
-}
-
-.mx_EventTile[data-layout="bubble"][data-has-reply="true"] .mx_ReplyThread {
- margin: 0 calc(var(--gutterSize) * -1);
-}
-
-.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
- .mx_ReplyThread
- .mx_EventTile_reply {
- max-width: 90%;
- padding: 0;
-}
-
-.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
- .mx_ReplyThread
- .mx_EventTile_reply
- > a {
- display: none !important;
-}
-
-.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
- .mx_ReplyThread
- .mx_EventTile {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- grid-gap: var(--gutterSize);
- gap: var(--gutterSize);
-}
-
-.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
- .mx_ReplyThread
- .mx_EventTile
- .mx_EventTile_avatar {
- position: static;
-}
-
-.mx_EventTile[data-layout="bubble"][data-has-reply="true"]
- .mx_ReplyThread
- .mx_EventTile
- .mx_SenderProfile {
- display: none;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_EditMessageComposer_buttons {
- position: static;
- padding: 0;
- margin: 0;
- background: transparent;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_ReactionsRow {
- margin-right: -18px;
- margin-left: -9px;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_ReplyThread {
- border-left-width: 2px;
- border-left-color: #c1c6cd;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_bubbleContainer,
-.mx_EventTile[data-layout="bubble"].mx_EventTile_info,
-.mx_EventTile[data-layout="bubble"]
- ~ .mx_EventListSummary[data-expanded="false"] {
- --backgroundColor: transparent;
- --gutterSize: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- padding: 5px 0;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_bubbleContainer
- .mx_EventTile_avatar,
-.mx_EventTile[data-layout="bubble"].mx_EventTile_info .mx_EventTile_avatar,
-.mx_EventTile[data-layout="bubble"]
- ~ .mx_EventListSummary[data-expanded="false"]
- .mx_EventTile_avatar {
- position: static;
- -webkit-box-ordinal-group: 0;
- -ms-flex-order: -1;
- order: -1;
- margin-right: 5px;
-}
-
-.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary {
- --maxWidth: 80%;
- margin-left: calc(var(--avatarSize) + var(--gutterSize));
- margin-right: calc(var(--gutterSize) + var(--avatarSize));
-}
-
-.mx_EventTile[data-layout="bubble"]
- ~ .mx_EventListSummary
- .mx_EventListSummary_toggle {
- float: none;
- -webkit-box-ordinal-group: 10;
- -ms-flex-order: 9;
- order: 9;
- margin: 0 0 0 5px;
-}
-
-.mx_EventTile[data-layout="bubble"]
- ~ .mx_EventListSummary
- .mx_EventListSummary_avatars {
- padding-top: 0;
-}
-
-.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary:after {
- content: "";
- clear: both;
-}
-
-.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary .mx_EventTile {
- margin: 0 6px;
-}
-
-.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary .mx_EventTile_line {
- margin: 0 5px;
-}
-
-.mx_EventTile[data-layout="bubble"]
- ~ .mx_EventListSummary
- .mx_EventTile_line
- > a {
- left: auto;
- right: 0;
- -webkit-transform: translateX(calc(100% + 5px));
- transform: translateX(calc(100% + 5px));
-}
-
-.mx_EventTile[data-layout="bubble"]
- ~ .mx_EventListSummary
- .mx_MessageActionBar {
- -webkit-transform: translate3d(90%, 0, 0);
- transform: translate3d(90%, 0, 0);
-}
-
-.mx_EventTile[data-layout="bubble"]
- ~ .mx_EventListSummary[data-expanded="false"] {
- padding: 0 34px;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line,
-.mx_EventTile[data-layout="bubble"].mx_EventTile_bad:hover:before,
-.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary .mx_EventTile_line,
-.mx_EventTile[data-layout="bubble"] ~ .mx_EventListSummary:hover:before {
- background: transparent;
-}
-
-.mx_EventTile[data-layout="bubble"] + .mx_EventListSummary .mx_EventTile {
- margin-top: 0;
- padding: 2px 0;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_EventListSummary_toggle {
- margin-right: 55px;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_bad > .mx_EventTile_line {
- display: grid;
- grid-template: "reply reply" auto "shield body" auto "shield link" auto/auto 1fr;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_bad
- > .mx_EventTile_line
- .mx_EventTile_e2eIcon {
- grid-area: shield;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_bad
- > .mx_EventTile_line
- .mx_UnknownBody {
- grid-area: body;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_bad
- > .mx_EventTile_line
- .mx_EventTile_keyRequestInfo {
- grid-area: link;
-}
-
-.mx_EventTile[data-layout="bubble"].mx_EventTile_bad
- > .mx_EventTile_line
- .mx_ReplyThread_wrapper {
- grid-area: reply;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_EventTile_readAvatars {
- position: absolute;
- right: -110px;
- bottom: 0;
- top: auto;
-}
-
-.mx_EventTile[data-layout="bubble"] .mx_MTextBody {
- max-width: 100%;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) {
- max-width: 100%;
- clear: both;
- padding-top: 18px;
- font-size: 1.4rem;
- position: relative;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info {
- padding-top: 1px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_avatar {
- top: 14px;
- left: 8px;
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info
- .mx_EventTile_avatar {
- top: 0.6rem;
- left: 64px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_continuation {
- padding-top: 0 !important;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_continuation.mx_EventTile_isEditing {
- padding-top: 5px !important;
- margin-top: -5px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_isEditing {
- background-color: #f3f8fd;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_SenderProfile {
- color: #2e2f32;
- font-size: 1.4rem;
- display: inline-block;
- overflow: hidden;
- cursor: pointer;
- padding-bottom: 0;
- padding-top: 0;
- margin: 0;
- white-space: nowrap;
- text-overflow: ellipsis;
- max-width: calc(100% - 64px);
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_SenderProfile .mx_Flair {
- opacity: 0.7;
- margin-left: 5px;
- display: inline-block;
- vertical-align: top;
- overflow: hidden;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_SenderProfile .mx_Flair img {
- vertical-align: -2px;
- margin-right: 2px;
- border-radius: 8px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_isEditing
- .mx_MessageTimestamp {
- visibility: hidden;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_MessageTimestamp {
- display: block;
- white-space: nowrap;
- left: 0;
- text-align: center;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_continuation
- .mx_EventTile_line {
- clear: both;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_reply {
- position: relative;
- padding-left: 64px;
- border-radius: 8px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_reply {
- margin-right: 10px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_selected
- > div
- > a
- > .mx_MessageTimestamp {
- left: -4px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_selected
- > .mx_EventTile_line {
- border-left: 4px solid #0dbd8b;
- padding-left: 60px;
- background-color: #f6f7f8;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_highlight,
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_highlight
- .markdown-body {
- color: #ff4b55;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_highlight
- .markdown-body
- .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_highlight
- .mx_EventTile_line {
- background-color: #fff8e3;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"])
- ~ .mx_EventListSummary
- .mx_EventTile_avatar
- ~ .mx_EventTile_line {
- padding-left: 82px;
-}
-
-.mx_EventTile:not([data-layout="bubble"])
- ~ .mx_EventListSummary
- .mx_EventTile_line {
- padding-left: 64px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_selected.mx_EventTile_info
- .mx_EventTile_line {
- padding-left: 78px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile.focus-visible:focus-within
- .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile.mx_EventTile_actionBarFocused
- .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile:hover
- .mx_EventTile_line {
- background-color: #f6f7f8;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_searchHighlight {
- background-color: #0dbd8b;
- color: #fff;
- border-radius: 5px;
- padding-left: 2px;
- padding-right: 2px;
- cursor: pointer;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_searchHighlight a {
- background-color: #0dbd8b;
- color: #fff;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_receiptSending:before,
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_receiptSent:before {
- background-color: #8d99a5;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 14px;
- mask-size: 14px;
- width: 14px;
- height: 14px;
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_receiptSent:before {
- -webkit-mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
- mask-image: url(../../img/element-icons/circle-sent.5079cbe.svg);
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_receiptSending:before {
- -webkit-mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
- mask-image: url(../../img/element-icons/circle-sending.bcca6aa.svg);
-}
-
-.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_contextual {
- opacity: 0.4;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_msgOption {
- float: right;
- text-align: right;
- position: relative;
- width: 90px;
- height: 1px;
- margin-right: 10px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_msgOption a {
- text-decoration: none;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_body {
- overflow-y: hidden;
-}
-
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown
- .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified
- .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified
- .mx_EventTile_line {
- padding-left: 60px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified
- .mx_EventTile_line {
- border-left: 4px solid #76cfa5;
-}
-
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown
- .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified
- .mx_EventTile_line {
- border-left: 4px solid #e8bf37;
-}
-
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown.mx_EventTile_info
- .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified.mx_EventTile_info
- .mx_EventTile_line,
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified.mx_EventTile_info
- .mx_EventTile_line {
- padding-left: 78px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]):hover .mx_EventTile_e2eIcon {
- opacity: 1;
-}
-
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown
- .mx_EventTile_line
- > a
- > .mx_MessageTimestamp,
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified
- .mx_EventTile_line
- > a
- > .mx_MessageTimestamp,
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified
- .mx_EventTile_line
- > a
- > .mx_MessageTimestamp {
- left: -4px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unknown
- .mx_EventTile_line
- > .mx_EventTile_e2eIcon,
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_unverified
- .mx_EventTile_line
- > .mx_EventTile_e2eIcon,
-.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified
- .mx_EventTile_line
- > .mx_EventTile_e2eIcon {
- display: block;
- left: 41px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_MImageBody {
- margin-right: 34px;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_e2eIcon {
- position: absolute;
- top: 6px;
- left: 44px;
- bottom: 0;
- right: 0;
-}
-
-.mx_EventTile:not([data-layout="bubble"]) .mx_ReactionsRow {
- margin: 0;
- padding: 6px 60px;
-}
-
-.mx_EventTile_content {
- overflow-y: hidden;
- overflow-x: hidden;
- margin-right: 34px;
-}
-
-.mx_EventTile_spoiler {
- cursor: pointer;
-}
-
-.mx_EventTile_spoiler_reason {
- color: #acacac;
- font-size: 1.1rem;
-}
-
-.mx_EventTile_spoiler_content {
- -webkit-filter: blur(5px) saturate(0.1) sepia(1);
- filter: blur(5px) saturate(0.1) sepia(1);
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
-}
-
-.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
- -webkit-filter: none;
- filter: none;
-}
-
-.mx_RoomView_timeline_rr_enabled
- .mx_EventTile:not([data-layout="bubble"])
- .mx_EventTile_line {
- margin-right: 110px;
-}
-
-.mx_EventTile_bubbleContainer {
- display: grid;
- grid-template-columns: 1fr 100px;
-}
-
-.mx_EventTile_bubbleContainer .mx_EventTile_line {
- margin-right: 0;
- grid-column: 1/3;
- padding: 0 !important;
-}
-
-.mx_EventTile_bubbleContainer .mx_EventTile_msgOption {
- grid-column: 2;
-}
-
-.mx_EventTile_bubbleContainer:hover .mx_EventTile_line {
- background-color: inherit !important;
-}
-
-.mx_EventTile_readAvatars {
- position: relative;
- display: inline-block;
- width: 14px;
- height: 14px;
- top: -2.2rem;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- z-index: 1;
-}
-
-.mx_EventTile_readAvatars .mx_BaseAvatar {
- position: absolute;
- display: inline-block;
- height: 1.4rem;
- width: 1.4rem;
- will-change: left, top;
- -webkit-transition: left 0.1s ease-out, top 0.3s ease-out;
- transition: left 0.1s ease-out, top 0.3s ease-out;
- -webkit-transition: left var(--transition-short) ease-out,
- top var(--transition-standard) ease-out;
- transition: left var(--transition-short) ease-out,
- top var(--transition-standard) ease-out;
-}
-
-.mx_EventTile_readAvatarRemainder {
- color: #acacac;
- font-size: 1.1rem;
- position: absolute;
-}
-
-.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
- font-size: 48px !important;
- line-height: 57px !important;
-}
-
-.mx_EventTile_content .mx_EventTile_edited {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- font-size: 1.2rem;
- color: #9e9e9e;
- display: inline-block;
- margin-left: 9px;
- cursor: pointer;
-}
-
-.mx_EventTile_e2eIcon {
- position: relative;
- width: 14px;
- height: 14px;
- display: block;
- opacity: 0.2;
- background-repeat: no-repeat;
- background-size: contain;
-}
-
-.mx_EventTile_e2eIcon:after,
-.mx_EventTile_e2eIcon:before {
- content: "";
- display: block;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_EventTile_e2eIcon:after,
-.mx_EventTile_e2eIcon:before {
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_EventTile_e2eIcon:before {
- background-color: #fff;
- -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
- mask-image: url(../../img/e2e/normal.76f0c09.svg);
- -webkit-mask-size: 80%;
- mask-size: 80%;
-}
-
-.mx_EventTile_e2eIcon_undecryptable:after,
-.mx_EventTile_e2eIcon_unverified:after {
- -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
- mask-image: url(../../img/e2e/warning.78bb264.svg);
- background-color: #ff4b55;
-}
-
-.mx_EventTile_e2eIcon_undecryptable,
-.mx_EventTile_e2eIcon_unverified {
- opacity: 1;
-}
-
-.mx_EventTile_e2eIcon_unknown:after {
- -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
- mask-image: url(../../img/e2e/warning.78bb264.svg);
- background-color: #ff4b55;
-}
-
-.mx_EventTile_e2eIcon_unknown {
- opacity: 1;
-}
-
-.mx_EventTile_e2eIcon_unencrypted:after {
- -webkit-mask-image: url(../../img/e2e/warning.78bb264.svg);
- mask-image: url(../../img/e2e/warning.78bb264.svg);
- background-color: #ff4b55;
-}
-
-.mx_EventTile_e2eIcon_unencrypted {
- opacity: 1;
-}
-
-.mx_EventTile_e2eIcon_unauthenticated:after {
- -webkit-mask-image: url(../../img/e2e/normal.76f0c09.svg);
- mask-image: url(../../img/e2e/normal.76f0c09.svg);
- background-color: #91a1c0;
-}
-
-.mx_EventTile_e2eIcon_unauthenticated {
- opacity: 1;
-}
-
-.mx_EventTile_body pre {
- border: 1px solid transparent;
-}
-
-.mx_EventTile_content .markdown-body {
- font-family: inherit !important;
- white-space: normal !important;
- line-height: inherit !important;
- color: inherit;
- font-size: 1.4rem;
-}
-
-.mx_EventTile_content .markdown-body code,
-.mx_EventTile_content .markdown-body pre {
- font-family: Menlo, Consolas, Liberation Mono, Lucida Console, monospace !important;
- background-color: #f3f8fd;
-}
-
-.mx_EventTile_content .markdown-body pre code > * {
- display: inline-block;
-}
-
-.mx_EventTile_content .markdown-body pre {
- overflow-x: overlay;
- overflow-y: visible;
-}
-
-.mx_EventTile_lineNumbers {
- float: left;
- margin: 0 0.5em 0 -1.5em;
- color: grey;
-}
-
-.mx_EventTile_lineNumber {
- text-align: right;
- display: block;
- padding-left: 1em;
-}
-
-.mx_EventTile_collapsedCodeBlock {
- max-height: 30vh;
-}
-
-.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre,
-.mx_EventTile:hover .mx_EventTile_body pre {
- border: 1px solid #e5e5e5;
-}
-
-.mx_EventTile_pre_container {
- position: relative;
-}
-
-.mx_EventTile_button {
- position: absolute;
- display: inline-block;
- visibility: hidden;
- cursor: pointer;
- top: 8px;
- right: 8px;
- width: 19px;
- height: 19px;
- background-color: #2e2f32;
-}
-
-.mx_EventTile_buttonBottom {
- top: 33px;
-}
-
-.mx_EventTile_copyButton {
- -webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
- mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
-}
-
-.mx_EventTile_collapseButton {
- -webkit-mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
- mask-image: url(../../img/feather-customised/minimise.aec9142.svg);
-}
-
-.mx_EventTile_collapseButton,
-.mx_EventTile_expandButton {
- -webkit-mask-size: 75%;
- mask-size: 75%;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
-}
-
-.mx_EventTile_expandButton {
- -webkit-mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
- mask-image: url(../../img/feather-customised/maximise.dc32127.svg);
-}
-
-.mx_EventTile_body
- .mx_EventTile_pre_container:focus-within
- .mx_EventTile_collapseButton,
-.mx_EventTile_body
- .mx_EventTile_pre_container:focus-within
- .mx_EventTile_copyButton,
-.mx_EventTile_body
- .mx_EventTile_pre_container:focus-within
- .mx_EventTile_expandButton,
-.mx_EventTile_body
- .mx_EventTile_pre_container:hover
- .mx_EventTile_collapseButton,
-.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton,
-.mx_EventTile_body
- .mx_EventTile_pre_container:hover
- .mx_EventTile_expandButton {
- visibility: visible;
-}
-
-.mx_EventTile_content .markdown-body h1,
-.mx_EventTile_content .markdown-body h2,
-.mx_EventTile_content .markdown-body h3,
-.mx_EventTile_content .markdown-body h4,
-.mx_EventTile_content .markdown-body h5,
-.mx_EventTile_content .markdown-body h6 {
- font-family: inherit !important;
- color: inherit;
-}
-
-.mx_EventTile_content .markdown-body h1,
-.mx_EventTile_content .markdown-body h2 {
- font-size: 1.5em;
- border-bottom: none !important;
-}
-
-.mx_EventTile_content .markdown-body a {
- color: #238cf5;
-}
-
-.mx_EventTile_content .markdown-body .hljs {
- display: inline !important;
-}
-
-.mx_EventTile_keyRequestInfo {
- font-size: 1.2rem;
-}
-
-.mx_EventTile_keyRequestInfo_text {
- opacity: 0.5;
-}
-
-.mx_EventTile_keyRequestInfo_text a {
- color: #2e2f32;
- text-decoration: underline;
- cursor: pointer;
-}
-
-.mx_EventTile_keyRequestInfo_tooltip_contents p {
- text-align: auto;
- margin-left: 3px;
- margin-right: 3px;
-}
-
-.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
- margin-top: 0;
-}
-
-.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
- margin-bottom: 0;
-}
-
-.mx_EventTile_tileError {
- color: red;
- text-align: center;
- margin-right: 0;
-}
-
-.mx_EventTile_tileError .mx_EventTile_line {
- padding-left: 0;
- margin-right: 0;
-}
-
-.mx_EventTile_tileError .mx_EventTile_line span {
- padding: 4px 8px;
-}
-
-.mx_EventTile_tileError a {
- margin-left: 1em;
-}
-
-.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar,
-.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
-.mx_EventTile:hover .mx_MessageActionBar,
-[data-whatinput="keyboard"] .mx_EventTile:focus-within .mx_MessageActionBar {
- visibility: visible;
-}
-
-@media only screen and (max-width: 480px) {
- .mx_EventTile_line,
- .mx_EventTile_reply {
- padding-left: 0;
- margin-right: 0;
- }
- .mx_EventTile_content {
- margin-top: 10px;
- margin-right: 0;
- }
-}
-
-.mx_GroupLayout .mx_EventTile > .mx_SenderProfile {
- line-height: 2rem;
- margin-left: 64px;
-}
-
-.mx_GroupLayout .mx_EventTile > .mx_EventTile_avatar {
- position: absolute;
- z-index: 9;
-}
-
-.mx_GroupLayout .mx_EventTile .mx_MessageTimestamp {
- position: absolute;
- width: 46px;
-}
-
-.mx_GroupLayout .mx_EventTile .mx_EventTile_line,
-.mx_GroupLayout .mx_EventTile .mx_EventTile_reply {
- padding-top: 1px;
- padding-bottom: 3px;
- line-height: 2.2rem;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventTile {
- padding-top: 4px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_line,
-.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_reply {
- padding-top: 0;
- padding-bottom: 0;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_info {
- padding-top: 0;
- font-size: 1.3rem;
-}
-
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile.mx_EventTile_info
- .mx_EventTile_line,
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile.mx_EventTile_info
- .mx_EventTile_reply {
- line-height: 2rem;
-}
-
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile.mx_EventTile_info
- .mx_EventTile_avatar {
- top: 4px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_SenderProfile {
- font-size: 1.3rem;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventTile.mx_EventTile_emote {
- padding-top: 8px;
-}
-
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile.mx_EventTile_emote
- .mx_EventTile_avatar {
- top: 2px;
-}
-
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile.mx_EventTile_emote
- .mx_EventTile_line,
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile.mx_EventTile_emote
- .mx_EventTile_reply {
- padding-top: 0;
- padding-bottom: 1px;
-}
-
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
- padding-top: 0;
-}
-
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation
- .mx_EventTile_line,
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation
- .mx_EventTile_reply {
- padding-top: 0;
- padding-bottom: 0;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_avatar {
- top: 2px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_e2eIcon {
- top: 3px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_readAvatars {
- top: -2rem;
-}
-
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile
- .mx_EventTile_content
- .markdown-body
- blockquote,
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile
- .mx_EventTile_content
- .markdown-body
- dl,
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile
- .mx_EventTile_content
- .markdown-body
- ol,
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile
- .mx_EventTile_content
- .markdown-body
- p,
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile
- .mx_EventTile_content
- .markdown-body
- pre,
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile
- .mx_EventTile_content
- .markdown-body
- table,
-.mx_MatrixChat_useCompactLayout
- .mx_EventTile
- .mx_EventTile_content
- .markdown-body
- ul {
- margin-bottom: 4px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList h2 {
- margin-top: 6px;
-}
-
-.mx_IRCLayout {
- --name-width: 70px;
- line-height: 1.8rem !important;
-}
-
-.mx_IRCLayout .mx_EventTile > a {
- text-decoration: none;
- min-width: 45px;
-}
-
-.mx_IRCLayout .mx_EventTile {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
- padding-top: 0;
-}
-
-.mx_IRCLayout .mx_EventTile > * {
- margin-right: 5px;
-}
-
-.mx_IRCLayout .mx_EventTile > .mx_EventTile_msgOption {
- -webkit-box-ordinal-group: 6;
- -ms-flex-order: 5;
- order: 5;
- -ms-flex-negative: 0;
- flex-shrink: 0;
-}
-
-.mx_IRCLayout
- .mx_EventTile
- > .mx_EventTile_msgOption
- .mx_EventTile_readAvatars {
- top: 0.2rem;
-}
-
-.mx_IRCLayout .mx_EventTile .mx_EventTile_line,
-.mx_IRCLayout .mx_EventTile .mx_EventTile_reply {
- padding: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-ordinal-group: 4;
- -ms-flex-order: 3;
- order: 3;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- -ms-flex-negative: 1;
- flex-shrink: 1;
- min-width: 0;
-}
-
-.mx_IRCLayout .mx_EventTile > .mx_EventTile_avatar {
- -webkit-box-ordinal-group: 2;
- -ms-flex-order: 1;
- order: 1;
- position: relative;
- top: 0;
- left: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- height: 1.8rem;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_IRCLayout .mx_EventTile > .mx_EventTile_avatar > .mx_BaseAvatar,
-.mx_IRCLayout .mx_EventTile > .mx_EventTile_avatar > .mx_BaseAvatar > * {
- height: 1.4rem !important;
- width: 1.4rem !important;
- font-size: 1rem !important;
- line-height: 1.5rem !important;
-}
-
-.mx_IRCLayout .mx_EventTile .mx_MessageTimestamp {
- font-size: 1rem;
- width: 45px;
- text-align: right;
-}
-
-.mx_IRCLayout .mx_EventTile > .mx_EventTile_e2eIcon {
- position: absolute;
- right: unset;
- left: unset;
- top: 0;
- padding: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- height: 1.8rem;
- background-position: 50%;
-}
-
-.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_EventTile_e2eIcon,
-.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_MTextBody,
-.mx_IRCLayout .mx_EventTile .mx_EventTile_line .mx_TextualEvent {
- display: inline-block;
-}
-
-.mx_IRCLayout .mx_EventTile .mx_EventTile_reply {
- -webkit-box-ordinal-group: 5;
- -ms-flex-order: 4;
- order: 4;
-}
-
-.mx_IRCLayout .mx_EventTile .mx_EditMessageComposer_buttons {
- position: relative;
-}
-
-.mx_IRCLayout .mx_EventTile_emote > .mx_EventTile_avatar {
- margin-left: calc(var(--name-width) + 19px);
-}
-
-.mx_IRCLayout blockquote {
- margin: 0;
-}
-
-.mx_IRCLayout .mx_EventListSummary > .mx_EventTile_line {
- padding-left: calc(var(--name-width) + 74px);
-}
-
-.mx_IRCLayout .mx_EventListSummary .mx_EventListSummary_avatars {
- padding: 0;
- margin: 0 9px 0 0;
-}
-
-.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
- left: calc(var(--name-width) + 24px);
- top: 0;
-}
-
-.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_EventTile_line {
- left: calc(var(--name-width) + 24px);
-}
-
-.mx_IRCLayout .mx_EventTile.mx_EventTile_info .mx_TextualEvent {
- line-height: 1.8rem;
-}
-
-.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line,
-.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
-.mx_IRCLayout .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
- padding-left: 0;
- border-left: 0;
-}
-
-.mx_IRCLayout .mx_SenderProfile {
- width: var(--name-width);
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_IRCLayout .mx_SenderProfile > .mx_SenderProfile_displayName {
- width: 100%;
- text-align: end;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.mx_IRCLayout .mx_SenderProfile > .mx_SenderProfile_mxid {
- visibility: collapse;
-}
-
-.mx_IRCLayout .mx_SenderProfile:hover {
- overflow: visible;
- z-index: 10;
-}
-
-.mx_IRCLayout .mx_SenderProfile:hover > .mx_SenderProfile_displayName {
- overflow: visible;
-}
-
-.mx_IRCLayout .mx_SenderProfile:hover > .mx_SenderProfile_mxid {
- visibility: visible;
-}
-
-.mx_IRCLayout .mx_ReplyThread {
- margin: 0;
-}
-
-.mx_IRCLayout .mx_ReplyThread .mx_SenderProfile {
- -webkit-box-ordinal-group: unset;
- -ms-flex-order: unset;
- order: unset;
- max-width: unset;
- width: unset;
- background: transparent;
-}
-
-.mx_IRCLayout .mx_ReplyThread .mx_EventTile_emote > .mx_EventTile_avatar {
- margin-left: 0;
-}
-
-.mx_IRCLayout .mx_ReplyThread .mx_MessageTimestamp {
- width: auto;
-}
-
-.mx_IRCLayout .mx_ReplyThread .mx_EventTile_e2eIcon {
- position: relative;
- -webkit-box-ordinal-group: 0;
- -ms-flex-order: -1;
- order: -1;
-}
-
-.mx_IRCLayout .mx_ProfileResizer {
- position: absolute;
- height: 100%;
- width: 15px;
- left: calc(80px + var(--name-width));
- cursor: col-resize;
- z-index: 100;
-}
-
-.mx_IRCLayout .mx_Flair > img {
- height: 1.4rem !important;
- width: 1.4rem !important;
-}
-
-.mx_JumpToBottomButton {
- z-index: 1000;
- position: absolute;
- bottom: 12px;
- right: 24px;
- width: 38px;
- height: 50px;
- text-align: center;
-}
-
-.mx_JumpToBottomButton_badge {
- position: relative;
- top: -12px;
- border-radius: 16px;
- font-weight: 700;
- font-size: 1.2rem;
- line-height: 1.4rem;
- text-align: center;
- display: inline-block;
- padding: 0 4px;
- color: #fff;
- background-color: #61708b;
-}
-
-.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
- color: #f2f5f8;
- background-color: #ff4b55;
-}
-
-.mx_JumpToBottomButton_scrollDown {
- position: relative;
- display: block;
- height: 38px;
- border-radius: 19px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- background: #fff;
- border: 1.3px solid #61708b;
- cursor: pointer;
-}
-
-.mx_JumpToBottomButton_scrollDown:before {
- content: "";
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
- mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- background: #61708b;
-}
-
-.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide {
- cursor: pointer;
- width: 18px;
- height: 18px;
-}
-
-.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide img {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 40px;
- flex: 0 0 40px;
- visibility: hidden;
-}
-
-.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide.focus-visible:focus img,
-.mx_LinkPreviewGroup:hover .mx_LinkPreviewGroup_hide img {
- visibility: visible;
-}
-
-.mx_LinkPreviewGroup > .mx_AccessibleButton {
- color: #0dbd8b;
- text-align: center;
-}
-
-.mx_LinkPreviewWidget {
- margin-top: 15px;
- margin-right: 15px;
- margin-bottom: 15px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- border-left: 2px solid #ddd;
- border-radius: 2px;
- color: #888;
-}
-
-.mx_LinkPreviewWidget_image {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 100px;
- flex: 0 0 100px;
- margin-left: 15px;
- text-align: center;
- cursor: pointer;
-}
-
-.mx_LinkPreviewWidget_caption {
- margin-left: 15px;
- -webkit-box-flex: 1;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- overflow: hidden;
-}
-
-.mx_LinkPreviewWidget_title {
- font-weight: 700;
- white-space: normal;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
-}
-
-.mx_LinkPreviewWidget_title .mx_LinkPreviewWidget_siteName {
- font-weight: 400;
-}
-
-.mx_LinkPreviewWidget_description {
- margin-top: 8px;
- white-space: normal;
- word-wrap: break-word;
- display: -webkit-box;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget {
- margin-top: 6px;
- margin-bottom: 6px;
-}
-
-.mx_MemberInfo {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- overflow-y: auto;
- margin-top: 8px;
-}
-
-.mx_MemberInfo,
-.mx_MemberInfo_name {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_MemberInfo_name {
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_MemberInfo_name > .mx_E2EIcon {
- margin-right: 0;
-}
-
-.mx_MemberInfo_cancel {
- height: 16px;
- width: 16px;
- padding: 10px 0 10px 10px;
- cursor: pointer;
- -webkit-mask-image: url(../../img/minimise.871d2de.svg);
- mask-image: url(../../img/minimise.871d2de.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: 16px center;
- mask-position: 16px center;
- background-color: #91a1c0;
-}
-
-.mx_MemberInfo_name h2 {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- overflow-x: auto;
- max-height: 50px;
-}
-
-.mx_MemberInfo h2 {
- font-size: 1.8rem;
- font-weight: 600;
- margin: 16px 0 16px 15px;
-}
-
-.mx_MemberInfo_container {
- margin: 0 16px 16px;
-}
-
-.mx_MemberInfo .mx_RoomTile_nameContainer {
- width: 154px;
-}
-
-.mx_MemberInfo .mx_RoomTile_badge {
- display: none;
-}
-
-.mx_MemberInfo .mx_RoomTile_name {
- width: 160px;
-}
-
-.mx_MemberInfo_avatar {
- background: hsla(0, 0%, 91%, 0.77);
- margin-bottom: 16px;
-}
-
-.mx_MemberInfo_avatar > img {
- height: auto;
- width: 100%;
- max-height: 30vh;
- -o-object-fit: contain;
- object-fit: contain;
- display: block;
-}
-
-.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
- cursor: -webkit-zoom-in;
- cursor: zoom-in;
-}
-
-.mx_MemberInfo_profile {
- margin-bottom: 16px;
-}
-
-.mx_MemberInfo h3 {
- text-transform: uppercase;
- color: #9fa9ba;
- font-weight: 700;
- font-size: 1.2rem;
- margin: 4px 0;
-}
-
-.mx_MemberInfo_profileField {
- font-size: 1.5rem;
- position: relative;
-}
-
-.mx_MemberInfo_buttons {
- margin-bottom: 16px;
-}
-
-.mx_MemberInfo_field {
- cursor: pointer;
- font-size: 1.5rem;
- color: #2e2f32;
- margin-left: 8px;
- line-height: 2.3rem;
-}
-
-.mx_MemberInfo_createRoom {
- cursor: pointer;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding: 0 8px;
-}
-
-.mx_MemberInfo_createRoom_label {
- width: auto !important;
- cursor: pointer;
-}
-
-.mx_MemberInfo label {
- font-size: 1.3rem;
-}
-
-.mx_MemberInfo label .mx_MemberInfo_label_text {
- display: inline-block;
- max-width: 180px;
- vertical-align: text-top;
-}
-
-.mx_MemberInfo input[type="radio"] {
- vertical-align: -2px;
- margin-right: 5px;
- margin-left: 8px;
-}
-
-.mx_MemberInfo_statusMessage {
- font-size: 1.1rem;
- opacity: 0.5;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: clip;
-}
-
-.mx_MemberInfo .mx_MemberInfo_scrollContainer {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_GroupMemberList,
-.mx_GroupRoomList,
-.mx_MemberList {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- min-height: 0;
-}
-
-.mx_GroupMemberList .mx_Spinner,
-.mx_GroupRoomList .mx_Spinner,
-.mx_MemberList .mx_Spinner {
- -webkit-box-flex: 1;
- -ms-flex: 1 0 auto;
- flex: 1 0 auto;
-}
-
-.mx_GroupMemberList .mx_SearchBox,
-.mx_GroupRoomList .mx_SearchBox,
-.mx_MemberList .mx_SearchBox {
- margin-bottom: 5px;
-}
-
-.mx_GroupMemberList h2,
-.mx_GroupRoomList h2,
-.mx_MemberList h2 {
- text-transform: uppercase;
- color: #3d3b39;
- font-weight: 600;
- font-size: 1.3rem;
- padding-left: 3px;
- padding-right: 12px;
- margin-top: 8px;
- margin-bottom: 4px;
-}
-
-.mx_GroupMemberList .mx_AutoHideScrollbar,
-.mx_GroupRoomList .mx_AutoHideScrollbar,
-.mx_MemberList .mx_AutoHideScrollbar {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
-}
-
-.mx_GroupMemberList .mx_RightPanel_scopeHeader,
-.mx_GroupRoomList .mx_RightPanel_scopeHeader,
-.mx_MemberList .mx_RightPanel_scopeHeader {
- margin-top: -8px;
-}
-
-.mx_GroupMemberList_query,
-.mx_GroupRoomList_query {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
-}
-
-.mx_MemberList_chevron {
- position: absolute;
- right: 35px;
- margin-top: -15px;
-}
-
-.mx_MemberList_border {
- overflow-y: auto;
- -webkit-box-ordinal-group: 2;
- -ms-flex-order: 1;
- order: 1;
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0px;
-}
-
-.mx_MemberList_query {
- height: 16px;
-}
-
-.mx_MemberList_query[type="text"] {
- font-size: 1.2rem;
-}
-
-.mx_MemberList_wrapper {
- padding: 10px;
-}
-
-.mx_MemberList_invite {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- position: relative;
- background-color: #0dbd8b;
- border-radius: 4px;
- margin: 5px 9px 9px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- color: #fff;
- font-weight: 600;
-}
-
-.mx_MemberList_invite.mx_AccessibleButton_disabled {
- background-color: #888;
- cursor: not-allowed;
-}
-
-.mx_MemberList_invite span {
- padding: 8px 0;
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
-}
-
-.mx_MemberList_invite span:before {
- content: "";
- display: inline-block;
- background-color: #fff;
- -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 20px;
- mask-size: 20px;
- width: 20px;
- height: 20px;
- margin-right: 5px;
-}
-
-.mx_MemberList_inviteCommunity span:before {
- -webkit-mask-image: url(../../img/icon-invite-people.d82f491.svg);
- mask-image: url(../../img/icon-invite-people.d82f491.svg);
-}
-
-.mx_MemberList_addRoomToCommunity span:before {
- -webkit-mask-image: url(../../img/icons-room-add.bd36e26.svg);
- mask-image: url(../../img/icons-room-add.bd36e26.svg);
-}
-
-.mx_MessageComposer_wrapper {
- vertical-align: middle;
- margin: auto;
- border-top: 1px solid transparent;
- position: relative;
- padding-left: 82px;
- padding-right: 6px;
-}
-
-.mx_MessageComposer_replaced_wrapper {
- margin-left: auto;
- margin-right: auto;
-}
-
-.mx_MessageComposer_replaced_valign {
- height: 60px;
- display: table-cell;
- vertical-align: middle;
-}
-
-.mx_MessageComposer_roomReplaced_icon {
- float: left;
- margin-right: 20px;
- margin-top: 5px;
- width: 31px;
- height: 31px;
-}
-
-.mx_MessageComposer_roomReplaced_header {
- font-weight: 700;
-}
-
-.mx_MessageComposer_autocomplete_wrapper {
- position: relative;
- height: 0;
-}
-
-.mx_MessageComposer_row {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- width: 100%;
-}
-
-.mx_MessageComposer .mx_MessageComposer_avatar {
- position: absolute;
- left: 26px;
-}
-
-.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
- display: block;
-}
-
-.mx_MessageComposer_composecontrols {
- width: 100%;
-}
-
-.mx_MessageComposer_e2eIcon.mx_E2EIcon {
- position: absolute;
- left: 60px;
- margin-right: 0;
- margin-left: 3px;
- width: 12px;
- height: 12px;
-}
-
-.mx_MessageComposer_noperm_error {
- width: 100%;
- height: 60px;
- font-style: italic;
- color: #888;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_MessageComposer_input_wrapper {
- cursor: text;
-}
-
-.mx_MessageComposer_input,
-.mx_MessageComposer_input_wrapper {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_MessageComposer_input {
- vertical-align: middle;
- min-height: 60px;
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
- font-size: 1.4rem;
- margin-right: 6px;
-}
-
-.mx_MessageComposer_editor {
- width: 100%;
- max-height: 120px;
- min-height: 19px;
- overflow-y: auto;
- overflow-x: hidden;
- word-break: break-word;
-}
-
-.mx_MessageComposer_editor > :first-child {
- margin-top: 0 !important;
-}
-
-.mx_MessageComposer_editor > :last-child {
- margin-bottom: 0 !important;
-}
-
-@keyframes visualbell {
- 0% {
- background-color: #faa;
- }
- to {
- background-color: #fff;
- }
-}
-
-.mx_MessageComposer_input_error {
- -webkit-animation: visualbell 0.2s;
- animation: visualbell 0.2s;
-}
-
-.mx_MessageComposer_input blockquote {
- color: #777;
- margin: 0 0 16px;
- padding: 0 15px;
- border-left: 4px solid #ddd;
-}
-
-.mx_MessageComposer_input pre {
- background-color: rgba(0, 0, 0, 0.04);
- border-radius: 3px;
- padding: 10px;
-}
-
-.mx_MessageComposer_input textarea {
- display: block;
- width: 100%;
- padding: 0;
- margin-top: 6px;
- margin-bottom: 6px;
- border: 0;
- resize: none;
- outline: none;
- -webkit-box-shadow: none;
- box-shadow: none;
- color: #2e2f32;
- background-color: #fff;
- font-size: 1.4rem;
- max-height: 120px;
- overflow: auto;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
-}
-
-.mx_MessageComposer_input textarea::-moz-placeholder {
- line-height: 100%;
- color: #0dbd8b;
- opacity: 1;
-}
-
-.mx_MessageComposer_input textarea::-webkit-input-placeholder {
- color: #0dbd8b;
-}
-
-.mx_MessageComposer_button_highlight {
- background: rgba(13, 189, 139, 0.25);
-}
-
-.mx_MessageComposer_button_highlight:before {
- background-color: #0dbd8b !important;
-}
-
-.mx_MessageComposer_button {
- position: relative;
- margin-right: 6px;
- cursor: pointer;
- height: 26px;
- width: 26px;
- border-radius: 100%;
-}
-
-.mx_MessageComposer_button:before {
- content: "";
- position: absolute;
- top: 3px;
- left: 3px;
- height: 20px;
- width: 20px;
- background-color: #c1c6cd;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_MessageComposer_button:hover {
- background: rgba(13, 189, 139, 0.1);
-}
-
-.mx_MessageComposer_button:hover:before {
- background-color: #0dbd8b;
-}
-
-.mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled):before {
- background-color: #ff4b55;
-}
-
-.mx_MessageComposer_upload:before {
- -webkit-mask-image: url(../../img/element-icons/room/composer/attach.359c84e.svg);
- mask-image: url(../../img/element-icons/room/composer/attach.359c84e.svg);
-}
-
-.mx_MessageComposer_voiceMessage:before {
- -webkit-mask-image: url(../../img/voip/mic-on-mask.97ec7a0.svg);
- mask-image: url(../../img/voip/mic-on-mask.97ec7a0.svg);
-}
-
-.mx_MessageComposer_emoji:before {
- -webkit-mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
- mask-image: url(../../img/element-icons/room/composer/emoji.52d7369.svg);
-}
-
-.mx_MessageComposer_stickers:before {
- -webkit-mask-image: url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);
- mask-image: url(../../img/element-icons/room/composer/sticker.8dbe5ec.svg);
-}
-
-.mx_MessageComposer_sendMessage {
- cursor: pointer;
- position: relative;
- margin-right: 6px;
- width: 32px;
- height: 32px;
- border-radius: 100%;
- background-color: #0dbd8b;
-}
-
-.mx_MessageComposer_sendMessage:before {
- position: absolute;
- height: 16px;
- width: 16px;
- top: 8px;
- left: 9px;
- -webkit-mask-image: url(../../img/element-icons/send-message.a4e9cf8.svg);
- mask-image: url(../../img/element-icons/send-message.a4e9cf8.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #fff;
- content: "";
-}
-
-.mx_MessageComposer_formatting {
- cursor: pointer;
- margin: 0 11px;
- width: 24px;
- height: 18px;
-}
-
-.mx_MessageComposer_formatbar_wrapper {
- width: 100%;
- background-color: #fff;
- -webkit-box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
- box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
-}
-
-.mx_MessageComposer_formatbar {
- margin: auto;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- height: 30px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- padding-left: 62px;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- font-size: 1rem;
- color: #888;
-}
-
-.mx_MessageComposer_formatbar * {
- margin-right: 4px;
-}
-
-.mx_MessageComposer_format_button,
-.mx_MessageComposer_formatbar_cancel,
-.mx_MessageComposer_formatbar_markdown {
- cursor: pointer;
-}
-
-.mx_MessageComposer_formatbar_cancel {
- margin-right: 22px;
-}
-
-.mx_MessageComposer_formatbar_markdown {
- height: 17px;
- width: 30px;
- margin-right: 64px;
-}
-
-.mx_MessageComposer_input_markdownIndicator {
- height: 10px;
- width: 12px;
- padding: 4px 4px 4px 0;
-}
-
-.mx_MessageComposer_formatbar_markdown,
-.mx_MessageComposer_input_markdownIndicator {
- cursor: pointer;
- -webkit-mask-image: url(../../img/markdown.6905ba8.svg);
- mask-image: url(../../img/markdown.6905ba8.svg);
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #c1c6cd;
-}
-
-.mx_MessageComposer_formatbar_markdown.mx_MessageComposer_markdownDisabled,
-.mx_MessageComposer_input_markdownIndicator.mx_MessageComposer_markdownDisabled {
- opacity: 0.2;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input {
- min-height: 50px;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error {
- height: 50px;
-}
-
-.mx_MessageComposerFormatBar {
- display: none;
- width: 130px;
- height: 24px;
- position: absolute;
- cursor: pointer;
- border-radius: 4px;
- background-color: #fff;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- z-index: 1000;
-}
-
-.mx_MessageComposerFormatBar.mx_MessageComposerFormatBar_shown {
- display: block;
-}
-
-.mx_MessageComposerFormatBar > * {
- white-space: nowrap;
- display: inline-block;
- position: relative;
- border: 1px solid #e9edf1;
- margin-left: -1px;
-}
-
-.mx_MessageComposerFormatBar > :hover {
- border-color: #ddd;
- z-index: 1;
-}
-
-.mx_MessageComposerFormatBar > :first-child {
- border-radius: 3px 0 0 3px;
-}
-
-.mx_MessageComposerFormatBar > :last-child {
- border-radius: 0 3px 3px 0;
-}
-
-.mx_MessageComposerFormatBar > :only-child {
- border-radius: 3px;
-}
-
-.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button {
- width: 27px;
- height: 24px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- background: none;
- vertical-align: middle;
-}
-
-.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:after {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #2e2f32;
-}
-
-.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconBold:after {
- -webkit-mask-image: url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);
- mask-image: url(../../img/element-icons/room/format-bar/bold.0d80ac7.svg);
-}
-
-.mx_MessageComposerFormatBar
- .mx_MessageComposerFormatBar_buttonIconItalic:after {
- -webkit-mask-image: url(../../img/element-icons/room/format-bar/italic.bf18054.svg);
- mask-image: url(../../img/element-icons/room/format-bar/italic.bf18054.svg);
-}
-
-.mx_MessageComposerFormatBar
- .mx_MessageComposerFormatBar_buttonIconStrikethrough:after {
- -webkit-mask-image: url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);
- mask-image: url(../../img/element-icons/room/format-bar/strikethrough.0264f7b.svg);
-}
-
-.mx_MessageComposerFormatBar
- .mx_MessageComposerFormatBar_buttonIconQuote:after {
- -webkit-mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
- mask-image: url(../../img/element-icons/room/format-bar/quote.560cd8f.svg);
-}
-
-.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconCode:after {
- -webkit-mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
- mask-image: url(../../img/element-icons/room/format-bar/code.27444ba.svg);
-}
-
-.mx_MessageComposerFormatBar_buttonTooltip {
- white-space: nowrap;
- font-size: 1.3rem;
- font-weight: 600;
- min-width: 54px;
- text-align: center;
-}
-
-.mx_MessageComposerFormatBar_buttonTooltip
- .mx_MessageComposerFormatBar_tooltipShortcut {
- font-size: 0.9rem;
- opacity: 0.7;
-}
-
-.mx_NewRoomIntro {
- margin: 40px 0 48px 64px;
-}
-
-.mx_NewRoomIntro
- .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover)
- .mx_MiniAvatarUploader_indicator {
- display: none;
-}
-
-.mx_NewRoomIntro .mx_AccessibleButton_kind_link {
- padding: 0;
- font-size: inherit;
-}
-
-.mx_NewRoomIntro .mx_NewRoomIntro_buttons {
- margin-top: 28px;
-}
-
-.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton {
- line-height: 2.4rem;
- display: inline-block;
-}
-
-.mx_NewRoomIntro
- .mx_NewRoomIntro_buttons
- .mx_AccessibleButton
- + .mx_AccessibleButton {
- margin-left: 12px;
-}
-
-.mx_NewRoomIntro
- .mx_NewRoomIntro_buttons
- .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary_outline):before {
- content: "";
- display: inline-block;
- background-color: #fff;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 20px;
- mask-size: 20px;
- width: 20px;
- height: 20px;
- margin-right: 5px;
- vertical-align: text-bottom;
-}
-
-.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_NewRoomIntro_inviteButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
-}
-
-.mx_NewRoomIntro > h2 {
- margin-top: 24px;
- font-size: 2.4rem;
- font-weight: 600;
-}
-
-.mx_NewRoomIntro > p {
- margin: 0;
- font-size: 1.5rem;
- color: #737d8c;
-}
-
-.mx_NotificationBadge:not(.mx_NotificationBadge_visible) {
- display: none;
-}
-
-.mx_NotificationBadge.mx_NotificationBadge_visible {
- background-color: #61708b;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_highlighted {
- background-color: #ff4b55;
-}
-
-.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot {
- background-color: #2e2f32;
- width: 6px;
- height: 6px;
- border-radius: 6px;
-}
-
-.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char {
- width: 1.6rem;
- height: 1.6rem;
- border-radius: 1.6rem;
-}
-
-.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_3char {
- width: 2.6rem;
- height: 1.6rem;
- border-radius: 1.6rem;
-}
-
-.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count {
- font-size: 1rem;
- line-height: 1.4rem;
- color: #fff;
-}
-
-.mx_PinnedEventTile {
- min-height: 40px;
- width: 100%;
- padding: 0 4px 12px;
- display: grid;
- grid-template-areas: "avatar name remove" "content content content" "footer footer footer";
- grid-template-rows: -webkit-max-content auto -webkit-max-content;
- grid-template-rows: max-content auto max-content;
- grid-template-columns: 24px auto 24px;
- grid-row-gap: 12px;
- grid-column-gap: 8px;
-}
-
-.mx_PinnedEventTile + .mx_PinnedEventTile {
- padding: 12px 4px;
- border-top: 1px solid #e7e7e7;
-}
-
-.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar {
- grid-area: avatar;
-}
-
-.mx_PinnedEventTile .mx_PinnedEventTile_sender {
- grid-area: name;
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 2.4rem;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.mx_PinnedEventTile .mx_PinnedEventTile_unpinButton {
- visibility: hidden;
- grid-area: remove;
- position: relative;
- width: 24px;
- height: 24px;
- border-radius: 8px;
-}
-
-.mx_PinnedEventTile .mx_PinnedEventTile_unpinButton:hover {
- background-color: rgba(92, 100, 112, 0.2);
-}
-
-.mx_PinnedEventTile .mx_PinnedEventTile_unpinButton:before {
- content: "";
- position: absolute;
- height: inherit;
- width: inherit;
- background: #737d8c;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 8px;
- mask-size: 8px;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-image: url(../../img/image-view/close.97d1731.svg);
- mask-image: url(../../img/image-view/close.97d1731.svg);
-}
-
-.mx_PinnedEventTile .mx_PinnedEventTile_message {
- grid-area: content;
-}
-
-.mx_PinnedEventTile .mx_PinnedEventTile_footer {
- grid-area: footer;
- font-size: 10px;
- line-height: 12px;
-}
-
-.mx_PinnedEventTile .mx_PinnedEventTile_footer .mx_PinnedEventTile_timestamp {
- font-size: inherit;
- line-height: inherit;
- color: #737d8c;
-}
-
-.mx_PinnedEventTile .mx_PinnedEventTile_footer .mx_AccessibleButton_kind_link {
- padding: 0;
- margin-left: 12px;
- font-size: inherit;
- line-height: inherit;
-}
-
-.mx_PinnedEventTile:hover .mx_PinnedEventTile_unpinButton {
- visibility: visible;
-}
-
-.mx_PresenceLabel {
- font-size: 1.1rem;
- opacity: 0.5;
-}
-
-.mx_ReplyPreview {
- background: #fff;
- border: 1px solid transparent;
- border-bottom: none;
- border-radius: 8px 8px 0 0;
- max-height: 50vh;
- overflow: auto;
- -webkit-box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
- box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.04);
-}
-
-.mx_ReplyPreview .mx_ReplyPreview_section {
- border-bottom: 1px solid transparent;
-}
-
-.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_header {
- margin: 8px;
- color: #2e2f32;
- font-weight: 400;
- opacity: 0.4;
-}
-
-.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_tile {
- margin: 0 8px;
-}
-
-.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_title {
- float: left;
-}
-
-.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_cancel {
- float: right;
- cursor: pointer;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_clear {
- clear: both;
-}
-
-.mx_ReplyTile {
- position: relative;
- padding: 2px 0;
- font-size: 1.4rem;
- line-height: 1.6rem;
-}
-
-.mx_ReplyTile.mx_ReplyTile_audio .mx_MFileBody_info_icon:before {
- -webkit-mask-image: url(../../img/element-icons/speaker.7124b41.svg);
- mask-image: url(../../img/element-icons/speaker.7124b41.svg);
-}
-
-.mx_ReplyTile.mx_ReplyTile_video .mx_MFileBody_info_icon:before {
- -webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
- mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
-}
-
-.mx_ReplyTile .mx_MFileBody .mx_MFileBody_info {
- margin: 5px 0;
-}
-
-.mx_ReplyTile .mx_MFileBody .mx_MFileBody_download {
- display: none;
-}
-
-.mx_ReplyTile > a {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- text-decoration: none;
- color: #2e2f32;
-}
-
-.mx_ReplyTile .mx_RedactedBody {
- padding: 4px 0 2px 20px;
-}
-
-.mx_ReplyTile .mx_RedactedBody:before {
- height: 13px;
- width: 13px;
- top: 5px;
-}
-
-.mx_ReplyTile .mx_EventTile_content {
- pointer-events: none;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- line-height: 2.2rem;
-}
-
-.mx_ReplyTile .mx_EventTile_content .mx_EventTile_body.mx_EventTile_bigEmoji {
- line-height: 2.2rem !important;
- font-size: 1.4rem !important;
-}
-
-.mx_ReplyTile .mx_EventTile_content .mx_EventTile_lineNumbers {
- display: none;
-}
-
-.mx_ReplyTile .mx_EventTile_content .mx_EventTile_pre_container > pre {
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- padding: 4px;
-}
-
-.mx_ReplyTile .mx_EventTile_content .markdown-body blockquote,
-.mx_ReplyTile .mx_EventTile_content .markdown-body dl,
-.mx_ReplyTile .mx_EventTile_content .markdown-body ol,
-.mx_ReplyTile .mx_EventTile_content .markdown-body p,
-.mx_ReplyTile .mx_EventTile_content .markdown-body pre,
-.mx_ReplyTile .mx_EventTile_content .markdown-body table,
-.mx_ReplyTile .mx_EventTile_content .markdown-body ul {
- margin-bottom: 4px;
-}
-
-.mx_ReplyTile.mx_ReplyTile_info {
- padding-top: 0;
-}
-
-.mx_ReplyTile .mx_SenderProfile {
- font-size: 1.4rem;
- line-height: 1.7rem;
- display: inline-block;
- padding: 0;
- margin: 0;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-
-.mx_RoomBreadcrumbs {
- width: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
-}
-
-.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb {
- margin-right: 8px;
- width: 32px;
-}
-
-.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter {
- -webkit-transform: translateX(-40px);
- transform: translateX(-40px);
-}
-
-.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter-active {
- -webkit-transform: translateX(0);
- transform: translateX(0);
- -webkit-transition: -webkit-transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
- transition: -webkit-transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
- transition: transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
- transition: transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1),
- -webkit-transform 0.64s cubic-bezier(0.66, 0.02, 0.36, 1);
-}
-
-.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_placeholder {
- font-weight: 600;
- font-size: 1.4rem;
- line-height: 32px;
- height: 32px;
-}
-
-.mx_RoomBreadcrumbs_Tooltip {
- margin-left: -42px;
- margin-top: -42px;
-}
-
-.mx_RoomHeader {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 50px;
- flex: 0 0 50px;
- border-bottom: 1px solid transparent;
- background-color: #fff;
-}
-
-.mx_RoomHeader .mx_RoomHeader_e2eIcon {
- height: 12px;
- width: 12px;
-}
-
-.mx_RoomHeader .mx_RoomHeader_e2eIcon .mx_E2EIcon {
- margin: 0;
- position: absolute;
- height: 12px;
- width: 12px;
-}
-
-.mx_RoomHeader_wrapper {
- margin: auto;
- height: 50px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- min-width: 0;
- padding: 0 10px 0 18px;
-}
-
-.mx_RoomHeader_wrapper .mx_InviteOnlyIcon_large {
- margin: 0;
-}
-
-.mx_RoomHeader_spinner {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- height: 36px;
- padding-left: 12px;
- padding-right: 12px;
-}
-
-.mx_RoomHeader_textButton {
- vertical-align: middle;
- border: 0;
- border-radius: 8px;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-size: 1.4rem;
- color: #fff;
- background-color: #0dbd8b;
- width: auto;
- padding: 7px 1.5em;
- cursor: pointer;
- display: inline-block;
- outline: none;
- margin-right: 8px;
- margin-top: -5px;
-}
-
-.mx_RoomHeader_textButton_danger {
- background-color: #ff4b55;
-}
-
-.mx_RoomHeader_cancelButton {
- cursor: pointer;
- padding-left: 12px;
- padding-right: 12px;
-}
-
-.mx_RoomHeader_buttons {
- background-color: #fff;
-}
-
-.mx_RoomHeader_buttons,
-.mx_RoomHeader_info {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_RoomHeader_info {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_RoomHeader_simpleHeader {
- line-height: 5.2rem;
- color: #45474a;
- font-size: 1.8rem;
- font-weight: 600;
- overflow: hidden;
- margin-left: 63px;
- text-overflow: ellipsis;
- width: 100%;
-}
-
-.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton {
- float: right;
-}
-
-.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon {
- margin-left: 14px;
- margin-right: 24px;
- vertical-align: -4px;
-}
-
-.mx_RoomHeader_name {
- -webkit-box-flex: 0;
- -ms-flex: 0 1 auto;
- flex: 0 1 auto;
- overflow: hidden;
- color: #45474a;
- font-weight: 600;
- font-size: 1.8rem;
- margin: 0 7px;
- border-bottom: 1px solid transparent;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_RoomHeader_nametext {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
-}
-
-.mx_RoomHeader_settingsHint {
- color: #a2a2a2 !important;
-}
-
-.mx_RoomHeader_searchStatus {
- font-weight: 400;
- opacity: 0.6;
-}
-
-.mx_RoomHeader_avatar,
-.mx_RoomHeader_avatarPicker,
-.mx_RoomHeader_avatarPicker_edit,
-.mx_RoomHeader_avatarPicker_remove,
-.mx_RoomHeader_name {
- cursor: pointer;
-}
-
-.mx_RoomHeader_avatarPicker_remove {
- position: absolute;
- top: -11px;
- right: -9px;
-}
-
-.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
- color: #0dbd8b;
-}
-
-.mx_RoomHeader_placeholder {
- color: #a2a2a2 !important;
-}
-
-.mx_RoomHeader_editable {
- border-bottom: 1px solid #c7c7c7 !important;
- min-width: 150px;
- cursor: text;
-}
-
-.mx_RoomHeader_editable:focus {
- border-bottom: 1px solid #0dbd8b !important;
- outline: none;
- -webkit-box-shadow: none;
- box-shadow: none;
-}
-
-.mx_RoomHeader_topic {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- color: #9e9e9e;
- font-weight: 400;
- font-size: 1.3rem;
- margin: 4px 7px 0;
- overflow: hidden;
- text-overflow: ellipsis;
- border-bottom: 1px solid transparent;
- line-height: 1.2em;
- max-height: 2.4em;
-}
-
-.mx_RoomHeader_avatar {
- -webkit-box-flex: 0;
- -ms-flex: 0;
- flex: 0;
- margin: 0 6px 0 7px;
- position: relative;
-}
-
-.mx_RoomHeader_avatar .mx_BaseAvatar_image {
- -o-object-fit: cover;
- object-fit: cover;
-}
-
-.mx_RoomHeader_avatarPicker {
- position: relative;
-}
-
-.mx_RoomHeader_avatarPicker_edit {
- position: absolute;
- left: 16px;
- top: 18px;
-}
-
-.mx_RoomHeader_avatarPicker_edit > label {
- cursor: pointer;
-}
-
-.mx_RoomHeader_avatarPicker_edit > input {
- display: none;
-}
-
-.mx_RoomHeader_button {
- position: relative;
- margin-left: 1px;
- margin-right: 1px;
- cursor: pointer;
- height: 32px;
- width: 32px;
- border-radius: 100%;
-}
-
-.mx_RoomHeader_button:before {
- content: "";
- position: absolute;
- top: 4px;
- left: 4px;
- height: 24px;
- width: 24px;
- background-color: #c1c6cd;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-
-.mx_RoomHeader_button:hover {
- background: rgba(13, 189, 139, 0.1);
-}
-
-.mx_RoomHeader_button:hover:before {
- background-color: #0dbd8b;
-}
-
-.mx_RoomHeader_forgetButton:before {
- -webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
- mask-image: url(../../img/element-icons/leave.bb917e7.svg);
- width: 26px;
-}
-
-.mx_RoomHeader_appsButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/apps.5ee9f78.svg);
- mask-image: url(../../img/element-icons/room/apps.5ee9f78.svg);
-}
-
-.mx_RoomHeader_appsButton_highlight:before {
- background-color: #0dbd8b;
-}
-
-.mx_RoomHeader_searchButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/search-inset.db6314d.svg);
- mask-image: url(../../img/element-icons/room/search-inset.db6314d.svg);
-}
-
-.mx_RoomHeader_voiceCallButton:before {
- -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
- mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
- -webkit-mask-size: 20px;
- mask-size: 20px;
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_RoomHeader_videoCallButton:before {
- -webkit-mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
- mask-image: url(../../img/element-icons/call/video-call.f465ed0.svg);
-}
-
-.mx_RoomHeader_showPanel {
- height: 16px;
-}
-
-.mx_RoomHeader_voipButton {
- display: table-cell;
-}
-
-.mx_RoomHeader_voipButtons {
- margin-top: 18px;
-}
-
-@media only screen and (max-width: 480px) {
- .mx_RoomHeader_wrapper {
- padding: 0;
- }
- .mx_RoomHeader {
+ white-space: nowrap;
overflow: hidden;
}
-}
-
-.mx_RoomList {
- padding-right: 7px;
-}
-
-.mx_RoomList_iconPlus:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
- mask-image: url(../../img/element-icons/roomlist/plus-circle.aa44b1a.svg);
-}
-
-.mx_RoomList_iconHash:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
- mask-image: url(../../img/element-icons/roomlist/hash-circle.c36ee5b.svg);
-}
-
-.mx_RoomList_iconExplore:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
- mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
-}
-
-.mx_RoomList_iconBrowse:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
- mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
-}
-
-.mx_RoomList_iconDialpad:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/dialpad.37f876f.svg);
- mask-image: url(../../img/element-icons/roomlist/dialpad.37f876f.svg);
-}
-
-.mx_RoomList_explorePrompt {
- margin: 4px 12px;
- padding-top: 12px;
- border-top: 1px solid #e7e7e7;
- font-size: 1.4rem;
-}
-
-.mx_RoomList_explorePrompt div:first-child {
- font-weight: 600;
- line-height: 1.8rem;
- color: #2e2f32;
-}
-
-.mx_RoomList_explorePrompt .mx_AccessibleButton {
- color: #2e2f32;
- position: relative;
- padding: 8px 8px 8px 32px;
- font-size: inherit;
- margin-top: 12px;
- display: block;
- text-align: start;
- background-color: rgba(141, 151, 165, 0.2);
- border-radius: 4px;
-}
-
-.mx_RoomList_explorePrompt .mx_AccessibleButton:before {
- content: "";
- width: 16px;
- height: 16px;
- position: absolute;
- top: 8px;
- left: 8px;
- background: #737d8c;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
-}
-
-.mx_RoomList_explorePrompt
- .mx_AccessibleButton.mx_RoomList_explorePrompt_startChat:before {
- -webkit-mask-image: url(../../img/element-icons/feedback.a91241e.svg);
- mask-image: url(../../img/element-icons/feedback.a91241e.svg);
-}
-
-.mx_RoomList_explorePrompt
- .mx_AccessibleButton.mx_RoomList_explorePrompt_explore:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
- mask-image: url(../../img/element-icons/roomlist/explore.1523e65.svg);
-}
-
-.mx_RoomList_explorePrompt
- .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceInvite:before {
- -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
-}
-
-.mx_RoomList_explorePrompt
- .mx_AccessibleButton.mx_RoomList_explorePrompt_spaceExplore:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
- mask-image: url(../../img/element-icons/roomlist/browse.080f923.svg);
-}
-
-.mx_RoomPreviewBar {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
-}
-
-.mx_RoomPreviewBar h3 {
- font-size: 1.8rem;
- font-weight: 600;
-}
-
-.mx_RoomPreviewBar h3.mx_RoomPreviewBar_spinnerTitle {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_RoomPreviewBar .mx_RoomPreviewBar_message p,
-.mx_RoomPreviewBar h3 {
- word-break: break-all;
- word-break: break-word;
-}
-
-.mx_RoomPreviewBar .mx_Spinner {
- width: auto;
- height: auto;
- margin: 10px 10px 10px 0;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
-}
-
-.mx_RoomPreviewBar .mx_RoomPreviewBar_footer {
- font-size: 1.2rem;
- line-height: 2rem;
-}
-
-.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner {
- vertical-align: middle;
- display: inline-block;
-}
-
-.mx_RoomPreviewBar_actions,
-.mx_RoomPreviewBar_message {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_RoomPreviewBar_message {
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
- align-items: stretch;
-}
-
-.mx_RoomPreviewBar_message p {
- overflow-wrap: break-word;
-}
-
-.mx_RoomPreviewBar_panel {
- padding: 8px 8px 8px 20px;
- border-top: 1px solid transparent;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
-}
-
-.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- padding: 3px 8px;
-}
-
-.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions > * {
- margin-left: 12px;
-}
-
-.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message {
- -webkit-box-flex: 1;
- -ms-flex: 1 0 0px;
- flex: 1 0 0;
- min-width: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message > * {
- margin: 4px;
-}
-
-.mx_RoomPreviewBar_dialog {
- margin: auto;
- -webkit-box-sizing: content;
- box-sizing: content;
- width: 400px;
- border-radius: 4px;
- padding: 20px;
- text-align: center;
-}
-
-.mx_RoomPreviewBar_dialog,
-.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message > * {
- margin: 5px 0 20px;
-}
-
-.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions {
- -webkit-box-orient: vertical;
- -webkit-box-direction: reverse;
- -ms-flex-direction: column-reverse;
- flex-direction: column-reverse;
-}
-
-.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton {
- padding: 7px 50px;
-}
-
-.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions > * {
- margin-top: 12px;
-}
-
-.mx_RoomPreviewBar_dialog
- .mx_RoomPreviewBar_actions
- .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
- margin-bottom: 7px;
-}
-
-.mx_RoomPreviewBar_inviter {
- font-weight: 600;
-}
-
-a.mx_RoomPreviewBar_inviter {
- text-decoration: underline;
- cursor: pointer;
-}
-
-.mx_RoomSublist {
- margin-left: 8px;
- margin-bottom: 4px;
-}
-
-.mx_RoomSublist.mx_RoomSublist_hidden {
- display: none;
-}
-
-.mx_RoomSublist .mx_RoomSublist_headerContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-bottom: 8px;
- max-height: 24px;
- color: #8d99a5;
-}
-
-.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- max-width: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky {
- position: fixed;
- height: 32px;
- width: calc(100% - 15px);
-}
-
-.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_badgeContainer
- .mx_NotificationBadge {
- margin-left: 8px;
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux)
- .mx_NotificationBadge {
- margin-right: 4px;
-}
-
-.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton,
-.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
- margin-left: 8px;
- position: relative;
- width: 24px;
- height: 24px;
- border-radius: 8px;
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_auxButton:before,
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_menuButton:before {
- content: "";
- width: 16px;
- height: 16px;
- position: absolute;
- top: 4px;
- left: 4px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #61708b;
-}
-
-.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover,
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_menuButton:hover {
- background: rgba(141, 151, 165, 0.2);
-}
-
-.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
- visibility: hidden;
- width: 0;
- margin: 0;
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_auxButton:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/plus.daac9ba.svg);
- mask-image: url(../../img/element-icons/roomlist/plus.daac9ba.svg);
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_menuButton:before {
- -webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
- mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
-}
-
-.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- max-width: calc(100% - 16px);
- line-height: 1.6rem;
- font-size: 1.3rem;
- font-weight: 600;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_headerText
- .mx_RoomSublist_collapseBtn {
- display: inline-block;
- position: relative;
- width: 14px;
- height: 14px;
- margin-right: 6px;
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_headerText
- .mx_RoomSublist_collapseBtn:before {
- content: "";
- width: 18px;
- height: 18px;
- position: absolute;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #8d99a5;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_headerText
- .mx_RoomSublist_collapseBtn.mx_RoomSublist_collapseBtn_collapsed:before {
- -webkit-transform: rotate(-90deg);
- transform: rotate(-90deg);
-}
-
-.mx_RoomSublist:first-child .mx_RoomSublist_headerContainer {
- height: 0;
- padding-bottom: 4px;
-}
-
-.mx_RoomSublist .mx_RoomSublist_resizeBox {
- position: relative;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_RoomSublist .mx_RoomSublist_resizeBox,
-.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- overflow: hidden;
-}
-
-.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles {
- -webkit-box-flex: 1;
- -ms-flex: 1 0 0px;
- flex: 1 0 0;
- -ms-flex-direction: column;
- flex-direction: column;
- -ms-flex-item-align: stretch;
- align-self: stretch;
- -webkit-mask-image: linear-gradient(0deg, transparent, #000 4px);
- mask-image: linear-gradient(0deg, transparent, #000 4px);
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_resizeBox
- .mx_RoomSublist_resizerHandles_showNButton {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 32px;
- flex: 0 0 32px;
-}
-
-.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 4px;
- flex: 0 0 4px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
-}
-
-.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandle {
- cursor: ns-resize;
- border-radius: 3px;
- max-width: 64px;
- height: 4px !important;
- position: relative !important;
- bottom: 0 !important;
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen
- .mx_RoomSublist_resizerHandle,
-.mx_RoomSublist .mx_RoomSublist_resizeBox:hover .mx_RoomSublist_resizerHandle {
- opacity: 0.8;
- background-color: #2e2f32;
-}
-
-.mx_RoomSublist .mx_RoomSublist_showNButton {
- cursor: pointer;
- font-size: 1.3rem;
- line-height: 1.8rem;
- color: #737d8c;
- height: 24px;
- padding-bottom: 4px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron {
- position: relative;
- width: 18px;
- height: 18px;
- margin-left: 12px;
- margin-right: 16px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #8d99a5;
- left: -1px;
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_showNButton
- .mx_RoomSublist_showLessButtonChevron,
-.mx_RoomSublist
- .mx_RoomSublist_showNButton
- .mx_RoomSublist_showMoreButtonChevron {
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_RoomSublist
- .mx_RoomSublist_showNButton
- .mx_RoomSublist_showLessButtonChevron {
- -webkit-transform: rotate(180deg);
- transform: rotate(180deg);
-}
-
-.mx_RoomSublist.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton,
-.mx_RoomSublist:not(.mx_RoomSublist_minimized)
- > .mx_RoomSublist_headerContainer:focus-within
- .mx_RoomSublist_menuButton,
-.mx_RoomSublist:not(.mx_RoomSublist_minimized)
- > .mx_RoomSublist_headerContainer:hover
- .mx_RoomSublist_menuButton {
- visibility: visible;
- width: 24px;
- margin-left: 8px;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer {
- height: auto;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- position: relative;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_badgeContainer {
- -webkit-box-ordinal-group: 1;
- -ms-flex-order: 0;
- order: 0;
- -ms-flex-item-align: end;
- align-self: flex-end;
- margin-right: 0;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_stickable {
- -webkit-box-ordinal-group: 2;
- -ms-flex-order: 1;
- order: 1;
- max-width: 100%;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_auxButton {
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
- visibility: visible;
- width: 32px !important;
- height: 32px !important;
- margin-left: 0 !important;
- background-color: rgba(141, 151, 165, 0.2);
- margin-top: 8px;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized
- .mx_RoomSublist_headerContainer
- .mx_RoomSublist_auxButton:before {
- top: 8px;
- left: 8px;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_resizeBox {
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized
- .mx_RoomSublist_showNButton
- .mx_RoomSublist_showNButtonChevron {
- margin-right: 12px;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_menuButton {
- height: 16px;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen
- .mx_RoomSublist_menuButton,
-.mx_RoomSublist.mx_RoomSublist_minimized
- > .mx_RoomSublist_headerContainer:hover
- .mx_RoomSublist_menuButton {
- visibility: visible;
- position: absolute;
- bottom: 48px;
- right: 0;
- width: 16px;
- height: 16px;
- border-radius: 0;
- z-index: 1;
- background-color: hsla(0, 0%, 96.1%, 0.9);
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen
- .mx_RoomSublist_menuButton:before,
-.mx_RoomSublist.mx_RoomSublist_minimized
- > .mx_RoomSublist_headerContainer:hover
- .mx_RoomSublist_menuButton:before {
- top: 0;
- left: 0;
-}
-
-.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux)
- .mx_RoomSublist_menuButton,
-.mx_RoomSublist.mx_RoomSublist_minimized
- > .mx_RoomSublist_headerContainer:hover.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux)
- .mx_RoomSublist_menuButton {
- bottom: 8px;
-}
-
-.mx_RoomSublist_contextMenu {
- padding: 20px 16px;
- width: 250px;
-}
-
-.mx_RoomSublist_contextMenu hr {
- margin-top: 16px;
- margin-bottom: 16px;
- margin-right: 16px;
- border: 1px solid #2e2f32;
- opacity: 0.1;
-}
-
-.mx_RoomSublist_contextMenu .mx_RoomSublist_contextMenu_title {
- font-size: 1.5rem;
- line-height: 2rem;
- font-weight: 600;
- margin-bottom: 4px;
-}
-
-.mx_RoomSublist_contextMenu .mx_Checkbox,
-.mx_RoomSublist_contextMenu .mx_RadioButton {
- margin-top: 8px;
-}
-
-.mx_RoomSublist_addRoomTooltip {
- margin-top: -3px;
-}
-
-.mx_RoomSublist_skeletonUI {
- position: relative;
- margin-left: 4px;
- height: 288px;
-}
-
-.mx_RoomSublist_skeletonUI:before {
- background: -webkit-gradient(
- linear,
- left top,
- left bottom,
- from(#fff),
- to(hsla(0, 0%, 100%, 0))
- );
- background: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, 0));
- width: 100%;
- height: 100%;
- content: "";
- position: absolute;
- -webkit-mask-repeat: repeat-y;
- mask-repeat: repeat-y;
- -webkit-mask-size: auto 48px;
- mask-size: auto 48px;
- -webkit-mask-image: url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);
- mask-image: url(../../img/element-icons/roomlist/skeleton-ui.1f67400.svg);
-}
-
-.mx_RoomTile {
- margin-bottom: 4px;
- padding: 4px;
- contain: content;
- height: 40px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_RoomTile.mx_RoomTile_hasMenuOpen,
-.mx_RoomTile.mx_RoomTile_selected,
-.mx_RoomTile:focus-within,
-.mx_RoomTile:hover {
- background-color: #fff;
- border-radius: 8px;
-}
-
-.mx_RoomTile .mx_DecoratedRoomAvatar,
-.mx_RoomTile .mx_RoomTile_avatarContainer {
- margin-right: 8px;
-}
-
-.mx_RoomTile .mx_RoomTile_nameContainer {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- min-width: 0;
- margin-right: 8px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview,
-.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name {
- margin: 0 2px;
- width: 100%;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name {
- font-size: 1.4rem;
- line-height: 1.8rem;
-}
-
-.mx_RoomTile
- .mx_RoomTile_nameContainer
- .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
- font-weight: 600;
-}
-
-.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_messagePreview {
- font-size: 1.3rem;
- line-height: 1.8rem;
- color: #737d8c;
-}
-
-.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_nameWithPreview {
- margin-top: -4px;
-}
-
-.mx_RoomTile .mx_RoomTile_notificationsButton {
- margin-left: 4px;
-}
-
-.mx_RoomTile .mx_RoomTile_badgeContainer {
- height: 16px;
- margin: auto 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge {
- margin-right: 2px;
-}
-
-.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge_dot {
- margin-left: 5px;
- margin-right: 7px;
-}
-
-.mx_RoomTile .mx_RoomTile_menuButton,
-.mx_RoomTile .mx_RoomTile_notificationsButton {
- width: 20px;
- min-width: 20px;
- height: 20px;
- margin-top: auto;
- margin-bottom: auto;
- position: relative;
- display: none;
-}
-
-.mx_RoomTile .mx_RoomTile_menuButton:before,
-.mx_RoomTile .mx_RoomTile_notificationsButton:before {
- top: 2px;
- left: 2px;
- content: "";
- width: 16px;
- height: 16px;
- position: absolute;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background: #2e2f32;
-}
-
-.mx_RoomTile
- .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
- display: block;
-}
-
-.mx_RoomTile .mx_RoomTile_menuButton:before {
- -webkit-mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
- mask-image: url(../../img/element-icons/context-menu.829cc1a.svg);
-}
-
-.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen
- .mx_RoomTile_badgeContainer,
-.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within
- .mx_RoomTile_badgeContainer,
-.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_badgeContainer {
- width: 0;
- height: 0;
- display: none;
-}
-
-.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen
- .mx_RoomTile_menuButton,
-.mx_RoomTile:not(.mx_RoomTile_minimized).mx_RoomTile_hasMenuOpen
- .mx_RoomTile_notificationsButton,
-.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within .mx_RoomTile_menuButton,
-.mx_RoomTile:not(.mx_RoomTile_minimized):focus-within
- .mx_RoomTile_notificationsButton,
-.mx_RoomTile:not(.mx_RoomTile_minimized):hover .mx_RoomTile_menuButton,
-.mx_RoomTile:not(.mx_RoomTile_minimized):hover
- .mx_RoomTile_notificationsButton {
- display: block;
-}
-
-.mx_RoomTile.mx_RoomTile_minimized {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- position: relative;
-}
-
-.mx_RoomTile.mx_RoomTile_minimized .mx_DecoratedRoomAvatar,
-.mx_RoomTile.mx_RoomTile_minimized .mx_RoomTile_avatarContainer {
- margin-right: 0;
-}
-
-.mx_RoomTile_iconBell:before {
- -webkit-mask-image: url(../../img/element-icons/notifications.d298b39.svg);
- mask-image: url(../../img/element-icons/notifications.d298b39.svg);
-}
-
-.mx_RoomTile_iconBellDot:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);
- mask-image: url(../../img/element-icons/roomlist/notifications-default.8b8509e.svg);
-}
-
-.mx_RoomTile_iconBellCrossed:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
- mask-image: url(../../img/element-icons/roomlist/notifications-off.0c57561.svg);
-}
-
-.mx_RoomTile_iconBellMentions:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);
- mask-image: url(../../img/element-icons/roomlist/notifications-dm.ffa8881.svg);
-}
-
-.mx_RoomTile_contextMenu .mx_RoomTile_iconStar:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/favorite.ff7609d.svg);
- mask-image: url(../../img/element-icons/roomlist/favorite.ff7609d.svg);
-}
-
-.mx_RoomTile_contextMenu .mx_RoomTile_iconArrowDown:before {
- -webkit-mask-image: url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);
- mask-image: url(../../img/element-icons/roomlist/low-priority.6c7fb97.svg);
-}
-
-.mx_RoomTile_contextMenu .mx_RoomTile_iconSettings:before {
- -webkit-mask-image: url(../../img/element-icons/settings.6b381af.svg);
- mask-image: url(../../img/element-icons/settings.6b381af.svg);
-}
-
-.mx_RoomTile_contextMenu .mx_RoomTile_iconCopyLink:before {
- -webkit-mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
- mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
-}
-
-.mx_RoomTile_contextMenu .mx_RoomTile_iconInvite:before {
- -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
-}
-
-.mx_RoomTile_contextMenu .mx_RoomTile_iconSignOut:before {
- -webkit-mask-image: url(../../img/element-icons/leave.bb917e7.svg);
- mask-image: url(../../img/element-icons/leave.bb917e7.svg);
-}
-
-.mx_RoomUpgradeWarningBar {
- max-height: 235px;
- background-color: #f7f7f7;
- padding-left: 20px;
- padding-right: 20px;
- overflow: scroll;
-}
-
-.mx_RoomUpgradeWarningBar_wrapped {
- width: 100%;
- height: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- text-align: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-align-items: center;
-}
-
-.mx_RoomUpgradeWarningBar_header {
- color: #ff4b55;
- font-weight: 700;
-}
-
-.mx_RoomUpgradeWarningBar_body {
- color: #ff4b55;
-}
-
-.mx_RoomUpgradeWarningBar_upgradelink {
- color: #ff4b55;
- text-decoration: underline;
-}
-
-.mx_RoomUpgradeWarningBar_small {
- color: #888;
- font-size: 70%;
-}
-
-.mx_SearchBar {
- height: 56px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- border-bottom: 1px solid transparent;
-}
-
-.mx_SearchBar .mx_SearchBar_input {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- margin-left: 22px;
-}
-
-.mx_SearchBar .mx_SearchBar_searchButton {
- cursor: pointer;
- width: 37px;
- height: 37px;
- background-color: #0dbd8b;
- -webkit-mask: url(../../img/feather-customised/search-input.044bfa7.svg);
- mask: url(../../img/feather-customised/search-input.044bfa7.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_SearchBar .mx_SearchBar_buttons {
- display: inherit;
-}
-
-.mx_SearchBar .mx_SearchBar_button {
- border: 0;
- margin: 0 0 0 22px;
- padding: 5px;
- font-size: 1.5rem;
- cursor: pointer;
- color: #2e2f32;
- border-bottom: 2px solid #0dbd8b;
- font-weight: 600;
-}
-
-.mx_SearchBar .mx_SearchBar_unselected {
- color: #9fa9ba;
- border-color: transparent;
-}
-
-.mx_SearchBar .mx_SearchBar_cancel {
- background-color: #ff4b55;
- -webkit-mask: url(../../img/cancel.4b9715b.svg);
- mask: url(../../img/cancel.4b9715b.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 14px;
- mask-size: 14px;
- padding: 9px;
- margin: 0 12px 0 3px;
- cursor: pointer;
-}
-
-.mx_SendMessageComposer {
- -ms-flex: 1;
- flex: 1;
- -ms-flex-direction: column;
- flex-direction: column;
- font-size: 1.4rem;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- margin-right: 6px;
- min-width: 0;
-}
-
-.mx_SendMessageComposer,
-.mx_SendMessageComposer .mx_BasicMessageComposer {
- -webkit-box-flex: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
-}
-
-.mx_SendMessageComposer .mx_BasicMessageComposer {
- -ms-flex: 1;
- flex: 1;
- -ms-flex-direction: column;
- flex-direction: column;
- min-height: 55px;
-}
-
-.mx_SendMessageComposer
- .mx_BasicMessageComposer
- .mx_BasicMessageComposer_input {
- padding: 3px 0;
- margin: auto 0;
- max-height: 140px;
- overflow-y: auto;
-}
-
-.mx_Stickers_content {
- overflow: hidden;
-}
-
-.mx_Stickers_content_container {
- overflow: hidden;
- height: 300px;
-}
-
-#mx_persistedElement_stickerPicker .mx_AppTileFullWidth {
- height: unset;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-left: none;
- border-right: none;
- border-bottom: none;
-}
-
-#mx_persistedElement_stickerPicker .mx_AppTileMenuBar {
- padding: 0;
-}
-
-#mx_persistedElement_stickerPicker iframe {
- height: 283px;
-}
-
-.mx_Stickers_contentPlaceholder {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- text-align: center;
-}
-
-.mx_Stickers_contentPlaceholder p {
- max-width: 200px;
-}
-
-.mx_Stickers_addLink {
- display: inline;
- cursor: pointer;
- color: #0dbd8b;
-}
-
-.mx_Stickers_hideStickers {
- z-index: 2001;
-}
-
-.mx_TopUnreadMessagesBar {
- z-index: 1000;
- position: absolute;
- top: 24px;
- right: 24px;
- width: 38px;
-}
-
-.mx_TopUnreadMessagesBar:after {
- content: "";
- position: absolute;
- top: -8px;
- left: 10.5px;
- width: 4px;
- height: 4px;
- border-radius: 16px;
- background-color: #f2f5f8;
- border: 6px solid #0dbd8b;
- pointer-events: none;
-}
-
-.mx_TopUnreadMessagesBar_scrollUp {
- height: 38px;
- border-radius: 19px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- background: #fff;
- border: 1.3px solid #61708b;
- cursor: pointer;
-}
-
-.mx_TopUnreadMessagesBar_scrollUp:before {
- content: "";
- position: absolute;
- width: 36px;
- height: 36px;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
- mask-image: url(../../img/feather-customised/chevron-down-thin.f9a2477.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- background: #61708b;
- -webkit-transform: rotate(180deg);
- transform: rotate(180deg);
-}
-
-.mx_TopUnreadMessagesBar_markAsRead {
- display: block;
- width: 18px;
- height: 18px;
- background: #fff;
- border: 1.3px solid #61708b;
- border-radius: 10px;
- margin: 5px auto;
-}
-
-.mx_TopUnreadMessagesBar_markAsRead:before {
- content: "";
- position: absolute;
- width: 18px;
- height: 18px;
- -webkit-mask-image: url(../../img/cancel.4b9715b.svg);
- mask-image: url(../../img/cancel.4b9715b.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 10px;
- mask-size: 10px;
- -webkit-mask-position: 4px 4px;
- mask-position: 4px 4px;
- background: #61708b;
-}
-
-.mx_VoiceRecordComposerTile_stop {
- width: 28px;
- height: 28px;
- border: 2px solid #e3e8f0;
- border-radius: 32px;
- margin-right: 16px;
- position: relative;
-}
-
-.mx_VoiceRecordComposerTile_stop:after {
- content: "";
- width: 14px;
- height: 14px;
- position: absolute;
- top: 7px;
- left: 7px;
- border-radius: 2px;
- background-color: #ff4b55;
-}
-
-.mx_VoiceRecordComposerTile_delete {
- width: 24px;
- height: 24px;
- vertical-align: middle;
- margin-right: 8px;
- background-color: #8d99a5;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
- mask-image: url(../../img/element-icons/trashcan.3b626db.svg);
-}
-
-.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer {
- margin: 6px 12px 6px 6px;
- position: relative;
-}
-
-.mx_MessageComposer_row
- .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording {
- padding-left: 22px;
-}
-
-.mx_MessageComposer_row
- .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording:before {
- -webkit-animation: recording-pulse 2s infinite;
- animation: recording-pulse 2s infinite;
- content: "";
- background-color: #ff4b55;
- width: 10px;
- height: 10px;
- position: absolute;
- left: 12px;
- top: 18px;
- border-radius: 10px;
-}
-
-@-webkit-keyframes recording-pulse {
- 0% {
- opacity: 1;
- }
- 35% {
- opacity: 0;
- }
- 65% {
- opacity: 1;
- }
-}
-
-@keyframes recording-pulse {
- 0% {
- opacity: 1;
- }
- 35% {
- opacity: 0;
- }
- 65% {
- opacity: 1;
- }
-}
-
-.mx_WhoIsTypingTile {
- margin-left: -18px;
- padding-top: 18px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_WhoIsTypingTile_avatars {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 83px;
- flex: 0 0 83px;
- text-align: center;
-}
-
-.mx_WhoIsTypingTile_avatars > :not(:first-child) {
- margin-left: -12px;
-}
-
-.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial {
- padding-top: 1px;
-}
-
-.mx_WhoIsTypingTile_avatars .mx_BaseAvatar {
- border: 1px solid #fff;
- border-radius: 40px;
-}
-
-.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
- position: relative;
- display: inline-block;
- color: #acacac;
- background-color: #ddd;
- border: 1px solid #fff;
- border-radius: 40px;
- width: 24px;
- height: 24px;
- line-height: 2.4rem;
- font-size: 0.8em;
- vertical-align: top;
- text-align: center;
-}
-
-.mx_WhoIsTypingTile_label {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- font-size: 1.4rem;
- font-weight: 600;
- color: #9e9e9e;
-}
-
-.mx_WhoIsTypingTile_label > span {
- background-image: url(../../img/typing-indicator-2x.0eb9f0e.gif);
- background-size: 25px;
- background-position: 0 100%;
- background-repeat: no-repeat;
- padding-bottom: 15px;
- display: block;
-}
-
-.mx_MatrixChat_useCompactLayout .mx_WhoIsTypingTile {
- padding-top: 4px;
-}
-
-.mx_AvatarSetting_avatar {
- width: 90px;
- min-width: 90px;
- height: 90px;
- margin-top: 8px;
- position: relative;
-}
-
-.mx_AvatarSetting_avatar .mx_AvatarSetting_hover {
- -webkit-transition: opacity 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96);
- transition: opacity 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96);
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- pointer-events: none;
- line-height: 90px;
- text-align: center;
-}
-
-.mx_AvatarSetting_avatar .mx_AvatarSetting_hover > span {
- color: #fff;
- position: relative;
- font-weight: 500;
-}
-
-.mx_AvatarSetting_avatar .mx_AvatarSetting_hover .mx_AvatarSetting_hoverBg {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- opacity: 0.5;
- background-color: #2e2f32;
- border-radius: 90px;
-}
-
-.mx_AvatarSetting_avatar.mx_AvatarSetting_avatar_hovering
- .mx_AvatarSetting_hover {
- opacity: 1;
-}
-
-.mx_AvatarSetting_avatar:not(.mx_AvatarSetting_avatar_hovering)
- .mx_AvatarSetting_hover {
- opacity: 0;
-}
-
-.mx_AvatarSetting_avatar > * {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
- margin-top: 8px;
-}
-
-.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm {
- width: 100%;
-}
-
-.mx_AvatarSetting_avatar > img {
- cursor: pointer;
- -o-object-fit: cover;
- object-fit: cover;
-}
-
-.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder,
-.mx_AvatarSetting_avatar > img {
- display: block;
- height: 90px;
- width: inherit;
- border-radius: 90px;
- cursor: pointer;
-}
-
-.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before {
- background-color: #2e2f32;
- -webkit-mask: url(../../img/feather-customised/user.7a4d23d.svg);
- mask: url(../../img/feather-customised/user.7a4d23d.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 36px;
- mask-size: 36px;
- -webkit-mask-position: center;
- mask-position: center;
- content: "";
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
-}
-
-.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton {
- width: 32px;
- height: 32px;
- border-radius: 32px;
- background-color: #e7e7e7;
- position: absolute;
- bottom: 0;
- right: 0;
-}
-
-.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton:before {
- content: "";
- display: block;
- width: 100%;
- height: 100%;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 55%;
- mask-size: 55%;
- background-color: #2e2f32;
- -webkit-mask-image: url(../../img/feather-customised/edit.fd55ec2.svg);
- mask-image: url(../../img/feather-customised/edit.fd55ec2.svg);
-}
-
-.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder {
- background-color: #f4f6fa;
-}
-
-.mx_CrossSigningPanel_statusList {
- border-spacing: 0;
-}
-
-.mx_CrossSigningPanel_statusList td {
- padding: 0;
-}
-
-.mx_CrossSigningPanel_statusList td:first-of-type {
- -webkit-padding-end: 1em;
- padding-inline-end: 1em;
-}
-
-.mx_CrossSigningPanel_buttonRow {
- margin: 1em 0;
-}
-
-.mx_CrossSigningPanel_buttonRow :nth-child(n + 1) {
- -webkit-margin-end: 10px;
- margin-inline-end: 10px;
-}
-
-.mx_DevicesPanel {
- display: table;
- table-layout: fixed;
- width: 880px;
- border-spacing: 10px;
-}
-
-.mx_DevicesPanel_header {
- display: table-header-group;
- font-weight: 700;
-}
-
-.mx_DevicesPanel_header > .mx_DevicesPanel_deviceButtons {
- height: 48px;
-}
-
-.mx_DevicesPanel_header > div {
- display: table-cell;
- vertical-align: middle;
-}
-
-.mx_DevicesPanel_header .mx_DevicesPanel_deviceName {
- width: 50%;
-}
-
-.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen {
- width: 30%;
-}
-
-.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons {
- width: 20%;
-}
-
-.mx_DevicesPanel_device {
- display: table-row;
-}
-
-.mx_DevicesPanel_device > div {
- display: table-cell;
-}
-
-.mx_DevicesPanel_myDevice {
- font-weight: 700;
-}
-
-.mx_E2eAdvancedPanel_settingLongDescription {
- margin-right: 150px;
-}
-
-.mx_ExistingEmailAddress {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- margin-bottom: 5px;
-}
-
-.mx_ExistingEmailAddress_delete {
- margin-right: 5px;
- cursor: pointer;
- vertical-align: middle;
-}
-
-.mx_ExistingEmailAddress_email,
-.mx_ExistingEmailAddress_promptText {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- margin-right: 10px;
-}
-
-.mx_ExistingEmailAddress_confirmBtn {
- margin-left: 5px;
-}
-
-.mx_IntegrationManager .mx_Dialog {
- width: 60%;
- height: 70%;
- overflow: hidden;
- padding: 0;
- max-width: none;
- max-height: none;
-}
-
-.mx_IntegrationManager iframe {
- background-color: #fff;
- border: 0;
- width: 100%;
- height: 100%;
-}
-
-.mx_IntegrationManager_loading h3 {
- text-align: center;
-}
-
-.mx_IntegrationManager_error {
- text-align: center;
- padding-top: 20px;
-}
-
-.mx_IntegrationManager_error h3 {
- color: #ff4b55;
-}
-
-.mx_UserNotifSettings {
- color: #2e2f32;
-}
-
-.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable {
- width: calc(100% + 12px);
- table-layout: fixed;
- border-collapse: collapse;
- border-spacing: 0;
- margin-top: 40px;
-}
-
-.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable tr > th {
- font-weight: 600;
-}
-
-.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable tr > th:first-child {
- text-align: left;
- font-size: 1.8rem;
-}
-
-.mx_UserNotifSettings
- .mx_UserNotifSettings_pushRulesTable
- tr
- > th:nth-child(n + 2) {
- color: #737d8c;
- font-size: 1.2rem;
- vertical-align: middle;
- width: 66px;
-}
-
-.mx_UserNotifSettings
- .mx_UserNotifSettings_pushRulesTable
- tr
- > td:nth-child(n + 2) {
- text-align: center;
-}
-
-.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable tr > td {
- padding-top: 8px;
-}
-
-.mx_UserNotifSettings .mx_UserNotifSettings_pushRulesTable .mx_RadioButton {
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_UserNotifSettings
- .mx_UserNotifSettings_pushRulesTable
- .mx_RadioButton
- .mx_RadioButton_content,
-.mx_UserNotifSettings
- .mx_UserNotifSettings_pushRulesTable
- .mx_RadioButton
- .mx_RadioButton_spacer {
- display: none;
-}
-
-.mx_UserNotifSettings .mx_UserNotifSettings_floatingSection {
- margin-top: 40px;
-}
-
-.mx_UserNotifSettings .mx_UserNotifSettings_floatingSection > div:first-child {
- font-size: 1.8rem;
- font-weight: 600;
-}
-
-.mx_UserNotifSettings .mx_UserNotifSettings_floatingSection > table {
- border-collapse: collapse;
- border-spacing: 0;
- margin-top: 8px;
-}
-
-.mx_UserNotifSettings
- .mx_UserNotifSettings_floatingSection
- > table
- tr
- > td:first-child {
- padding-right: 8px;
-}
-
-.mx_UserNotifSettings .mx_UserNotifSettings_clearNotifsButton {
- margin-top: 8px;
-}
-
-.mx_UserNotifSettings .mx_TagComposer {
- margin-top: 35px;
-}
-
-.mx_ExistingPhoneNumber {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- margin-bottom: 5px;
-}
-
-.mx_ExistingPhoneNumber_delete {
- margin-right: 5px;
- cursor: pointer;
- vertical-align: middle;
-}
-
-.mx_ExistingPhoneNumber_address,
-.mx_ExistingPhoneNumber_promptText {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- margin-right: 10px;
-}
-
-.mx_ExistingPhoneNumber_confirmBtn {
- margin-left: 5px;
-}
-
-.mx_ExistingPhoneNumber_verification {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_ExistingPhoneNumber_verification .mx_Field {
- margin: 0 0 0 1em;
-}
-
-.mx_PhoneNumbers_input {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_PhoneNumbers_input > .mx_Field {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
-}
-
-.mx_PhoneNumbers_country {
- width: 80px;
-}
-
-.mx_ProfileSettings_controls_topic > textarea {
- resize: vertical;
-}
-
-.mx_ProfileSettings_profile {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-
-.mx_ProfileSettings_controls {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- margin-right: 54px;
-}
-
-.mx_ProfileSettings_controls .mx_SettingsTab_subheading {
- margin-top: 0;
-}
-
-.mx_ProfileSettings_controls .mx_Field #profileTopic {
- height: 4em;
-}
-
-.mx_ProfileSettings_controls .mx_Field:first-child {
- margin-top: 0;
-}
-
-.mx_ProfileSettings_hostingSignup {
- margin-left: 20px;
-}
-
-.mx_ProfileSettings_hostingSignup img {
- margin-left: 5px;
-}
-
-.mx_ProfileSettings_avatarUpload {
- display: none;
-}
-
-.mx_ProfileSettings_profileForm {
- margin-right: 100px;
- border-bottom: 1px solid #e7e7e7;
-}
-
-.mx_ProfileSettings_buttons {
- margin-top: 10px;
- margin-bottom: 28px;
-}
-
-.mx_ProfileSettings_buttons > .mx_AccessibleButton_kind_link {
- padding-left: 0;
-}
-
-.mx_SecureBackupPanel_deviceNotVerified,
-.mx_SecureBackupPanel_deviceVerified,
-.mx_SecureBackupPanel_sigInvalid,
-.mx_SecureBackupPanel_sigValid {
- font-weight: 700;
-}
-
-.mx_SecureBackupPanel_deviceVerified,
-.mx_SecureBackupPanel_sigValid {
- color: #76cfa5;
-}
-
-.mx_SecureBackupPanel_deviceNotVerified,
-.mx_SecureBackupPanel_sigInvalid {
- color: #ba6363;
-}
-
-.mx_SecureBackupPanel_deviceName {
- font-style: italic;
-}
-
-.mx_SecureBackupPanel_buttonRow {
- margin: 1em 0;
-}
-
-.mx_SecureBackupPanel_buttonRow :nth-child(n + 1) {
- -webkit-margin-end: 10px;
- margin-inline-end: 10px;
-}
-
-.mx_SecureBackupPanel_statusList {
- border-spacing: 0;
-}
-
-.mx_SecureBackupPanel_statusList td {
- padding: 0;
-}
-
-.mx_SecureBackupPanel_statusList td:first-of-type {
- -webkit-padding-end: 1em;
- padding-inline-end: 1em;
-}
-
-.mx_SetIdServer .mx_Field_input {
- margin-right: 100px;
-}
-
-.mx_SetIdServer_tooltip {
- max-width: 120px;
-}
-
-.mx_SetIntegrationManager {
- margin-top: 10px;
- margin-bottom: 10px;
-}
-
-.mx_SetIntegrationManager > .mx_SettingsTab_heading {
- margin-bottom: 10px;
-}
-
-.mx_SetIntegrationManager
- > .mx_SettingsTab_heading
- > .mx_SettingsTab_subheading {
- display: inline-block;
- padding-left: 5px;
-}
-
-.mx_SetIntegrationManager .mx_ToggleSwitch {
- display: inline-block;
- float: right;
- top: 9px;
- margin-right: 100px;
-}
-
-.mx_ExistingSpellCheckLanguage {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- margin-bottom: 5px;
-}
-
-.mx_ExistingSpellCheckLanguage_language {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- margin-right: 10px;
-}
-
-.mx_GeneralUserSettingsTab_spellCheckLanguageInput {
- margin-top: 1em;
- margin-bottom: 1em;
-}
-
-.mx_SpellCheckLanguages {
- margin-right: 100px;
-}
-
-.mx_UpdateCheckButton_summary {
- margin-left: 16px;
-}
-
-.mx_UpdateCheckButton_summary .mx_AccessibleButton_kind_link {
- padding: 0;
-}
-
-.mx_SettingsTab {
- color: #61708b;
-}
-
-.mx_SettingsTab_warningText {
- color: #ff4b55;
-}
-
-.mx_SettingsTab_heading {
- font-size: 2rem;
- font-weight: 600;
- color: #2e2f32;
- margin-bottom: 10px;
-}
-
-.mx_SettingsTab_heading:nth-child(n + 2) {
- margin-top: 30px;
-}
-
-.mx_SettingsTab_subheading {
- font-size: 1.6rem;
- display: block;
- font-family: Inter, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial,
- Helvetica, Sans-Serif, Noto Color Emoji;
- font-weight: 600;
- color: #2e2f32;
- margin-bottom: 10px;
- margin-top: 12px;
-}
-
-.mx_SettingsTab_subsectionText {
- color: #61708b;
- font-size: 1.4rem;
- display: block;
- margin: 10px 80px 10px 0;
-}
-
-.mx_SettingsTab_section {
- margin-bottom: 24px;
-}
-
-.mx_SettingsTab_section .mx_SettingsFlag {
- margin-right: 80px;
- margin-bottom: 10px;
-}
-
-.mx_SettingsTab_section.mx_SettingsTab_subsectionText .mx_SettingsFlag {
- margin-right: 0 !important;
-}
-
-.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
- vertical-align: middle;
- display: inline-block;
- font-size: 1.4rem;
- color: #2e2f32;
- max-width: calc(100% - 4.8rem);
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- padding-right: 10px;
-}
-
-.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {
- float: right;
-}
-
-.mx_SettingsTab_linkBtn {
- cursor: pointer;
- color: #0dbd8b;
- word-break: break-all;
-}
-
-.mx_SettingsTab a {
- color: #238cf5;
-}
-
-.mx_GeneralRoomSettingsTab_profileSection {
- margin-top: 10px;
-}
-
-.mx_RolesRoomSettingsTab ul {
- margin-bottom: 0;
-}
-
-.mx_RolesRoomSettingsTab_unbanBtn {
- margin-right: 10px;
- margin-bottom: 5px;
-}
-
-.mx_SecurityRoomSettingsTab .mx_SettingsTab_showAdvanced {
- padding: 0;
- margin-bottom: 16px;
-}
-
-.mx_SecurityRoomSettingsTab .mx_SecurityRoomSettingsTab_spacesWithAccess > h4 {
- color: #737d8c;
- font-weight: 600;
- font-size: 1.2rem;
- line-height: 1.5rem;
- text-transform: uppercase;
-}
-
-.mx_SecurityRoomSettingsTab
- .mx_SecurityRoomSettingsTab_spacesWithAccess
- > span {
- font-weight: 500;
- font-size: 1.4rem;
- line-height: 32px;
- color: #737d8c;
- display: inline-block;
-}
-
-.mx_SecurityRoomSettingsTab
- .mx_SecurityRoomSettingsTab_spacesWithAccess
- > span
- .mx_RoomAvatar_isSpaceRoom
- img,
-.mx_SecurityRoomSettingsTab
- .mx_SecurityRoomSettingsTab_spacesWithAccess
- > span
- img.mx_RoomAvatar_isSpaceRoom {
- border-radius: 8px;
-}
-
-.mx_SecurityRoomSettingsTab
- .mx_SecurityRoomSettingsTab_spacesWithAccess
- > span
- .mx_BaseAvatar {
- margin-right: 8px;
-}
-
-.mx_SecurityRoomSettingsTab
- .mx_SecurityRoomSettingsTab_spacesWithAccess
- > span
- + span {
- margin-left: 16px;
-}
-
-.mx_SecurityRoomSettingsTab_warning {
- display: block;
-}
-
-.mx_SecurityRoomSettingsTab_warning img {
- vertical-align: middle;
- margin-right: 5px;
- margin-left: 3px;
- margin-bottom: 5px;
-}
-
-.mx_SecurityRoomSettingsTab_encryptionSection {
- padding-bottom: 24px;
- border-bottom: 1px solid #e7e7e7;
- margin-bottom: 32px;
-}
-
-.mx_SecurityRoomSettingsTab_upgradeRequired {
- margin-left: 16px;
- padding: 4px 16px;
- border: 1px solid #0dbd8b;
- border-radius: 8px;
- color: #0dbd8b;
- font-size: 1.2rem;
- line-height: 1.5rem;
-}
-
-.mx_SecurityRoomSettingsTab_joinRule .mx_RadioButton {
- padding-top: 16px;
- margin-bottom: 8px;
-}
-
-.mx_SecurityRoomSettingsTab_joinRule .mx_RadioButton .mx_RadioButton_content {
- margin-left: 14px;
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #2e2f32;
- display: block;
-}
-
-.mx_SecurityRoomSettingsTab_joinRule > span {
- display: inline-block;
- margin-left: 34px;
- margin-bottom: 16px;
- font-size: 1.5rem;
- line-height: 2.4rem;
- color: #737d8c;
-}
-
-.mx_SecurityRoomSettingsTab_joinRule > span + .mx_RadioButton {
- border-top: 1px solid #e7e7e7;
-}
-
-.mx_SecurityRoomSettingsTab_joinRule .mx_AccessibleButton_kind_link {
- padding: 0;
- font-size: inherit;
-}
-
-.mx_AppearanceUserSettingsTab_fontSlider,
-.mx_AppearanceUserSettingsTab_fontSlider_preview {
- margin-right: 100px;
-}
-
-.mx_AppearanceUserSettingsTab .mx_Field {
- width: 256px;
-}
-
-.mx_AppearanceUserSettingsTab_fontScaling {
- color: #2e2f32;
-}
-
-.mx_AppearanceUserSettingsTab_fontSlider {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding: 15px;
- background: rgba(227, 232, 240, 0.2);
- border-radius: 10px;
- font-size: 10px;
- margin-top: 24px;
- margin-bottom: 24px;
-}
-
-.mx_AppearanceUserSettingsTab_fontSlider_preview {
- border: 1px solid #e3e8f0;
- border-radius: 10px;
- padding: 0 16px 9px;
- pointer-events: none;
- display: flow-root;
-}
-
-.mx_AppearanceUserSettingsTab_fontSlider_preview
- .mx_EventTile[data-layout="bubble"] {
- margin-top: 30px;
-}
-
-.mx_AppearanceUserSettingsTab_fontSlider_preview .mx_EventTile_msgOption {
- display: none;
-}
-
-.mx_AppearanceUserSettingsTab_fontSlider_preview.mx_IRCLayout {
- padding-top: 9px;
-}
-
-.mx_AppearanceUserSettingsTab_fontSlider_smallText {
- font-size: 15px;
- padding-right: 20px;
- padding-left: 5px;
- font-weight: 500;
-}
-
-.mx_AppearanceUserSettingsTab_fontSlider_largeText {
- font-size: 18px;
- padding-left: 20px;
- padding-right: 5px;
- font-weight: 500;
-}
-
-.mx_AppearanceUserSettingsTab > .mx_SettingsTab_SubHeading {
- margin-bottom: 32px;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection {
- color: #2e2f32;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection > .mx_ThemeSelectors {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- margin-top: 4px;
- margin-bottom: 30px;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton {
- padding: 1.6rem;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-radius: 10px;
- width: 180px;
- background: #e3e8f0;
- opacity: 0.4;
- -ms-flex-negative: 1;
- flex-shrink: 1;
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- margin-right: 15px;
- margin-top: 10px;
- font-weight: 600;
- color: #61708b;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton
- > span {
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton_enabled {
- opacity: 1;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton_enabled.mx_ThemeSelector_light {
- background-color: #f3f8fd;
- color: #2e2f32;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton_enabled.mx_ThemeSelector_dark {
- background-color: #25282e;
- color: #f3f8fd;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton_enabled.mx_ThemeSelector_dark
- > input
- > div,
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton_enabled.mx_ThemeSelector_dark
- > input
- > div
- > div {
- border-color: #e3e8f0;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton_enabled.mx_ThemeSelector_black {
- background-color: #000;
- color: #f3f8fd;
-}
-
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton_enabled.mx_ThemeSelector_black
- > input
- > div,
-.mx_AppearanceUserSettingsTab_themeSection
- > .mx_ThemeSelectors
- > .mx_RadioButton_enabled.mx_ThemeSelector_black
- > input
- > div
- > div {
- border-color: #e3e8f0;
-}
-
-.mx_SettingsTab_customFontSizeField {
- margin-left: calc(1.6rem + 10px);
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- grid-gap: 24px;
- gap: 24px;
- color: #2e2f32;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- > .mx_AppearanceUserSettingsTab_Layout_RadioButton {
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- -ms-flex-negative: 1;
- flex-shrink: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- width: 300px;
- border: 1px solid #e3e8f0;
- border-radius: 10px;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- > .mx_AppearanceUserSettingsTab_Layout_RadioButton
- .mx_EventTile_msgOption,
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- > .mx_AppearanceUserSettingsTab_Layout_RadioButton
- .mx_MessageActionBar {
- display: none;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- > .mx_AppearanceUserSettingsTab_Layout_RadioButton
- .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview {
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding: 10px;
- pointer-events: none;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- > .mx_AppearanceUserSettingsTab_Layout_RadioButton
- .mx_RadioButton {
- -webkit-box-flex: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
- padding: 10px;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- > .mx_AppearanceUserSettingsTab_Layout_RadioButton
- .mx_EventTile_content {
- margin-right: 0;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- > .mx_AppearanceUserSettingsTab_Layout_RadioButton.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected {
- border-color: #0dbd8b;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton {
- border-top: 1px solid #e3e8f0;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- .mx_RadioButton
- > input
- + div {
- border-color: rgba(97, 112, 139, 0.2);
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_RadioButton_checked {
- background-color: rgba(13, 189, 139, 0.08);
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons .mx_EventTile {
- margin: 0;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- .mx_EventTile[data-layout="bubble"] {
- margin-right: 40px;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- .mx_EventTile[data-layout="irc"]
- > a {
- display: none;
-}
-
-.mx_AppearanceUserSettingsTab_Layout_RadioButtons
- .mx_EventTile
- .mx_EventTile_line {
- max-width: 90%;
-}
-
-.mx_AppearanceUserSettingsTab_Advanced {
- color: #2e2f32;
-}
-
-.mx_AppearanceUserSettingsTab_Advanced > * {
- margin-bottom: 16px;
-}
-
-.mx_AppearanceUserSettingsTab_Advanced
- .mx_AppearanceUserSettingsTab_AdvancedToggle {
- color: #0dbd8b;
- cursor: pointer;
-}
-
-.mx_AppearanceUserSettingsTab_Advanced
- .mx_AppearanceUserSettingsTab_systemFont {
- margin-left: calc(1.6rem + 10px);
-}
-
-.mx_GeneralUserSettingsTab_changePassword .mx_Field {
- margin-right: 100px;
-}
-
-.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
- margin-top: 0;
-}
-
-.mx_GeneralUserSettingsTab_accountSection
- .mx_SettingsTab_subheading:nth-child(n + 1),
-.mx_GeneralUserSettingsTab_discovery
- .mx_SettingsTab_subheading:nth-child(n + 2),
-.mx_SetIdServer .mx_SettingsTab_subheading {
- margin-top: 24px;
-}
-
-.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,
-.mx_GeneralUserSettingsTab_discovery .mx_Spinner {
- -webkit-box-pack: left;
- -ms-flex-pack: left;
- justify-content: left;
-}
-
-.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
-.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
-.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,
-.mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber,
-.mx_GeneralUserSettingsTab_languageInput {
- margin-right: 100px;
-}
-
-.mx_GeneralUserSettingsTab_warningIcon {
- vertical-align: middle;
-}
-
-.mx_HelpUserSettingsTab_debugButton {
- margin-bottom: 5px;
- margin-top: 5px;
-}
-
-.mx_HelpUserSettingsTab span.mx_AccessibleButton {
- word-break: break-word;
-}
-
-.mx_HelpUserSettingsTab code {
- word-break: break-all;
- -webkit-user-select: all;
- -moz-user-select: all;
- -ms-user-select: all;
- user-select: all;
-}
-
-.mx_HelpUserSettingsTab_accessToken {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- border-radius: 5px;
- border: 1px solid #747474;
- margin-bottom: 10px;
- margin-top: 10px;
- padding: 10px;
-}
-
-.mx_HelpUserSettingsTab_accessToken_copy {
- -ms-flex-negative: 0;
- flex-shrink: 0;
- cursor: pointer;
- margin-left: 20px;
- display: inherit;
-}
-
-.mx_HelpUserSettingsTab_accessToken_copy > div {
- -webkit-mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
- mask-image: url(../../img/feather-customised/clipboard.24dd87a.svg);
- background-color: #2e2f32;
- margin-left: 5px;
- width: 20px;
- height: 20px;
- background-repeat: no-repeat;
-}
-
-.mx_LabsUserSettingsTab .mx_SettingsTab_section {
- margin-top: 32px;
-}
-
-.mx_LabsUserSettingsTab .mx_SettingsTab_section .mx_SettingsFlag {
- margin-right: 0;
-}
-
-.mx_MjolnirUserSettingsTab .mx_Field {
- margin-right: 100px;
-}
-
-.mx_MjolnirUserSettingsTab_listItem {
- margin-bottom: 2px;
-}
-
-.mx_NotificationUserSettingsTab .mx_SettingsTab_heading {
- margin-bottom: 10px;
-}
-
-.mx_PreferencesUserSettingsTab .mx_Field {
- margin-right: 100px;
-}
-
-.mx_PreferencesUserSettingsTab .mx_SettingsTab_section {
- margin-bottom: 30px;
-}
-
-.mx_SecurityUserSettingsTab .mx_DevicesPanel {
- width: auto;
- max-width: 880px;
-}
-
-.mx_SecurityUserSettingsTab_deviceInfo {
- display: table;
- padding-left: 0;
-}
-
-.mx_SecurityUserSettingsTab_deviceInfo > li {
- display: table-row;
-}
-
-.mx_SecurityUserSettingsTab_deviceInfo > li > label,
-.mx_SecurityUserSettingsTab_deviceInfo > li > span {
- display: table-cell;
- padding-right: 1em;
-}
-
-.mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton,
-.mx_SecurityUserSettingsTab_importExportButtons .mx_AccessibleButton {
- margin-right: 10px;
-}
-
-.mx_SecurityUserSettingsTab_importExportButtons {
- margin-bottom: 15px;
-}
-
-.mx_SecurityUserSettingsTab_ignoredUser {
- margin-bottom: 5px;
-}
-
-.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
- margin-right: 10px;
-}
-
-.mx_SecurityUserSettingsTab
- .mx_SettingsTab_section
- .mx_AccessibleButton_kind_link {
- padding: 0;
- font-size: inherit;
-}
-
-.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning {
- color: #ff4b55;
- position: relative;
- padding-left: 40px;
- margin-top: 30px;
-}
-
-.mx_SecurityUserSettingsTab .mx_SecurityUserSettingsTab_warning:before {
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: 0 center;
- mask-position: 0 center;
- -webkit-mask-size: 2.4rem;
- mask-size: 2.4rem;
- position: absolute;
- width: 2.4rem;
- height: 2.4rem;
- content: "";
- top: 0;
- left: 0;
- background-color: #ff4b55;
- -webkit-mask-image: url(../../img/feather-customised/alert-triangle.38aca3a.svg);
- mask-image: url(../../img/feather-customised/alert-triangle.38aca3a.svg);
-}
-
-.mx_VoiceUserSettingsTab .mx_Field {
- margin-right: 100px;
-}
-
-.mx_VoiceUserSettingsTab_missingMediaPermissions {
- margin-bottom: 15px;
-}
-
-.mx_SpaceBasicSettings .mx_Field {
- margin: 24px 0;
-}
-
-.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-top: 24px;
-}
-
-.mx_SpaceBasicSettings
- .mx_SpaceBasicSettings_avatarContainer
- .mx_SpaceBasicSettings_avatar {
- position: relative;
- height: 80px;
- width: 80px;
- background-color: #8d99a5;
- border-radius: 16px;
-}
-
-.mx_SpaceBasicSettings
- .mx_SpaceBasicSettings_avatarContainer
- img.mx_SpaceBasicSettings_avatar {
- width: 80px;
- height: 80px;
- -o-object-fit: cover;
- object-fit: cover;
- border-radius: 16px;
-}
-
-.mx_SpaceBasicSettings
- .mx_SpaceBasicSettings_avatarContainer
- div.mx_SpaceBasicSettings_avatar {
- cursor: pointer;
-}
-
-.mx_SpaceBasicSettings
- .mx_SpaceBasicSettings_avatarContainer
- div.mx_SpaceBasicSettings_avatar:before {
- content: "";
- position: absolute;
- height: 80px;
- width: 80px;
- top: 0;
- left: 0;
- background-color: #fff;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: 20px;
- mask-size: 20px;
- -webkit-mask-image: url(../../img/element-icons/camera.a81a395.svg);
- mask-image: url(../../img/element-icons/camera.a81a395.svg);
-}
-
-.mx_SpaceBasicSettings
- .mx_SpaceBasicSettings_avatarContainer
- > input[type="file"] {
- display: none;
-}
-
-.mx_SpaceBasicSettings
- .mx_SpaceBasicSettings_avatarContainer
- > .mx_AccessibleButton_kind_link {
- display: inline-block;
- padding: 0;
- margin: auto 16px;
- color: #368bd6;
-}
-
-.mx_SpaceBasicSettings
- .mx_SpaceBasicSettings_avatarContainer
- > .mx_SpaceBasicSettings_avatar_remove {
- color: #ff4b55;
-}
-
-.mx_SpaceBasicSettings .mx_AccessibleButton_hasKind {
- padding: 8px 22px;
- margin-left: auto;
- display: block;
- width: -webkit-min-content;
- width: -moz-min-content;
- width: min-content;
-}
-
-.mx_SpaceBasicSettings .mx_AccessibleButton_disabled {
- cursor: not-allowed;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background {
- background-color: rgba(46, 48, 51, 0.38);
- opacity: 0.6;
- left: 71px;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu {
- padding: 24px;
- width: 480px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- background-color: #fff;
- position: relative;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > h2 {
- font-weight: 600;
- font-size: 1.8rem;
- margin-top: 4px;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > p {
- font-size: 1.5rem;
- color: #737d8c;
- margin: 0;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_BetaCard_betaPill {
- position: absolute;
- top: 24px;
- right: 24px;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType {
- position: relative;
- padding: 16px 32px 16px 72px;
- width: 432px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-radius: 8px;
- border: 1px solid #e7e7e7;
- font-size: 1.5rem;
- margin: 20px 0;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType > h3 {
- font-weight: 600;
- margin: 0 0 4px;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType > span {
- color: #737d8c;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:before {
- position: absolute;
- content: "";
- width: 32px;
- height: 32px;
- top: 24px;
- left: 20px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 24px;
- mask-size: 24px;
- background-color: #8d99a5;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover {
- border-color: #0dbd8b;
-}
-
-.mx_SpaceCreateMenu_wrapper
- .mx_ContextualMenu
- .mx_SpaceCreateMenuType:hover:before {
- background-color: #0dbd8b;
-}
-
-.mx_SpaceCreateMenu_wrapper
- .mx_ContextualMenu
- .mx_SpaceCreateMenuType:hover
- > span {
- color: #2e2f32;
-}
-
-.mx_SpaceCreateMenu_wrapper
- .mx_ContextualMenu
- .mx_SpaceCreateMenuType_public:before {
- -webkit-mask-image: url(../../img/globe.8201f08.svg);
- mask-image: url(../../img/globe.8201f08.svg);
-}
-
-.mx_SpaceCreateMenu_wrapper
- .mx_ContextualMenu
- .mx_SpaceCreateMenuType_private:before {
- -webkit-mask-image: url(../../img/element-icons/lock.1f264bd.svg);
- mask-image: url(../../img/element-icons/lock.1f264bd.svg);
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back {
- width: 28px;
- height: 28px;
- position: relative;
- background-color: rgba(141, 151, 165, 0.2);
- border-radius: 14px;
- margin-bottom: 12px;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back:before {
- content: "";
- position: absolute;
- height: 28px;
- width: 28px;
- top: 0;
- left: 0;
- background-color: #8d99a5;
- -webkit-transform: rotate(90deg);
- transform: rotate(90deg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: 2px 3px;
- mask-position: 2px 3px;
- -webkit-mask-size: 24px;
- mask-size: 24px;
- -webkit-mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
- mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
-}
-
-.mx_SpaceCreateMenu_wrapper
- .mx_ContextualMenu
- .mx_AccessibleButton_kind_primary {
- padding: 8px 22px;
- margin-left: auto;
- display: block;
- width: -webkit-min-content;
- width: -moz-min-content;
- width: min-content;
-}
-
-.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_disabled {
- cursor: not-allowed;
-}
-
-.mx_SpacePublicShare .mx_AccessibleButton {
- position: relative;
- padding: 16px 32px 16px 72px;
- width: 432px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-radius: 8px;
- border: 1px solid #e7e7e7;
- font-size: 1.5rem;
- margin: 20px 0;
-}
-
-.mx_SpacePublicShare .mx_AccessibleButton > h3 {
- font-weight: 600;
- margin: 0 0 4px;
-}
-
-.mx_SpacePublicShare .mx_AccessibleButton > span {
- color: #737d8c;
-}
-
-.mx_SpacePublicShare .mx_AccessibleButton:before {
- position: absolute;
- content: "";
- width: 32px;
- height: 32px;
- top: 24px;
- left: 20px;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 24px;
- mask-size: 24px;
- background-color: #8d99a5;
-}
-
-.mx_SpacePublicShare .mx_AccessibleButton:hover {
- border-color: #0dbd8b;
-}
-
-.mx_SpacePublicShare .mx_AccessibleButton:hover:before {
- background-color: #0dbd8b;
-}
-
-.mx_SpacePublicShare .mx_AccessibleButton:hover > span {
- color: #2e2f32;
-}
-
-.mx_SpacePublicShare
- .mx_AccessibleButton.mx_SpacePublicShare_shareButton:before {
- -webkit-mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
- mask-image: url(../../img/element-icons/link.8f4b1fc.svg);
-}
-
-.mx_SpacePublicShare
- .mx_AccessibleButton.mx_SpacePublicShare_inviteButton:before {
- -webkit-mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
- mask-image: url(../../img/element-icons/room/invite.946a71b.svg);
-}
-
-.mx_InlineTermsAgreement_cbContainer {
- margin-bottom: 10px;
- font-size: 1.4rem;
-}
-
-.mx_InlineTermsAgreement_cbContainer a {
- color: #0dbd8b;
- text-decoration: none;
-}
-
-.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox {
- margin-top: 10px;
-}
-
-.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox input {
- vertical-align: text-bottom;
-}
-
-.mx_InlineTermsAgreement_link {
- display: inline-block;
- -webkit-mask-image: url(../../img/external-link.a8d3e9b.svg);
- mask-image: url(../../img/external-link.a8d3e9b.svg);
- background-color: #0dbd8b;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- width: 12px;
- height: 12px;
- margin-left: 3px;
- vertical-align: middle;
-}
-
-.mx_AnalyticsToast .mx_AccessibleButton_kind_danger {
- background: none;
- color: #0dbd8b;
-}
-
-.mx_AnalyticsToast .mx_AccessibleButton_kind_primary {
- background: #0dbd8b;
- color: #fff;
-}
-
-.mx_NonUrgentEchoFailureToast .mx_NonUrgentEchoFailureToast_icon {
- display: inline-block;
- width: 1.8rem;
- height: 1.8rem;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- background-color: #fff;
- -webkit-mask-image: url(../../img/element-icons/cloud-off.33cd28e.svg);
- mask-image: url(../../img/element-icons/cloud-off.33cd28e.svg);
- margin-right: 8px;
-}
-
-.mx_NonUrgentEchoFailureToast span {
- vertical-align: middle;
-}
-
-.mx_NonUrgentEchoFailureToast .mx_AccessibleButton {
- padding: 0;
-}
-
-.mx_VerificationShowSas_decimalSas {
- text-align: center;
- font-weight: 700;
- padding-left: 3px;
- padding-right: 3px;
-}
-
-.mx_VerificationShowSas_decimalSas span {
- margin-left: 5px;
- margin-right: 5px;
-}
-
-.mx_VerificationShowSas_emojiSas {
- text-align: center;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- margin: 25px 0;
-}
-
-.mx_VerificationShowSas_emojiSas_block {
- display: inline-block;
- margin-bottom: 16px;
- position: relative;
- width: 52px;
-}
-
-.mx_AuthPage_modal .mx_VerificationShowSas_emojiSas_block,
-.mx_Dialog .mx_VerificationShowSas_emojiSas_block {
- width: 60px;
-}
-
-.mx_VerificationShowSas_emojiSas_emoji {
- font-size: 3.2rem;
-}
-
-.mx_VerificationShowSas_emojiSas_label {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- font-size: 1.2rem;
-}
-
-.mx_VerificationShowSas_emojiSas_break {
- -ms-flex-preferred-size: 100%;
- flex-basis: 100%;
-}
-
-.mx_VerificationShowSas
- .mx_Dialog_buttons
- button.mx_VerificationShowSas_matchButton {
- color: #0dbd8b;
- background-color: rgba(3, 179, 129, 0.16);
- border: none;
-}
-
-.mx_VerificationShowSas
- .mx_Dialog_buttons
- button.mx_VerificationShowSas_noMatchButton {
- color: #ff4b55;
- background-color: rgba(255, 75, 85, 0.16);
- border: none;
-}
-
-.mx_CallContainer {
- position: absolute;
- right: 20px;
- bottom: 72px;
- z-index: 100;
- pointer-events: none;
-}
-
-.mx_CallContainer .mx_CallPreview {
- pointer-events: auto;
- cursor: pointer;
-}
-
-.mx_CallContainer .mx_CallPreview .mx_VideoFeed_remote.mx_VideoFeed_voice {
- min-height: 150px;
-}
-
-.mx_CallContainer .mx_CallPreview .mx_VideoFeed_local {
- border-radius: 8px;
- overflow: hidden;
-}
-
-.mx_CallContainer .mx_AppTile_persistedWrapper div {
- min-width: 350px;
-}
-
-.mx_CallContainer .mx_IncomingCallBox {
- min-width: 250px;
- background-color: #f4f6fa;
- padding: 8px;
- -webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.08);
- box-shadow: 0 14px 24px rgba(0, 0, 0, 0.08);
- border-radius: 8px;
- pointer-events: auto;
- cursor: pointer;
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- direction: row;
-}
-
-.mx_CallContainer
- .mx_IncomingCallBox
- .mx_IncomingCallBox_CallerInfo
- .mx_BaseAvatar_initial,
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo img {
- margin: 8px;
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo > div {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1,
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo p {
- margin: 0;
- padding: 0;
- font-size: 1.4rem;
- line-height: 1.6rem;
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_CallerInfo h1 {
- font-weight: 700;
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons {
- padding: 8px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
-}
-
-.mx_CallContainer
- .mx_IncomingCallBox
- .mx_IncomingCallBox_buttons
- > .mx_IncomingCallBox_spacer {
- width: 8px;
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_buttons > * {
- -ms-flex-negative: 0;
- flex-shrink: 0;
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- margin-right: 0;
- font-size: 1.5rem;
- line-height: 2.4rem;
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_iconButton {
- position: absolute;
- right: 8px;
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_iconButton:before {
- content: "";
- height: 20px;
- width: 20px;
- background-color: #c1c6cd;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_silence:before {
- -webkit-mask-image: url(../../img/voip/silence.08cd2d6.svg);
- mask-image: url(../../img/voip/silence.08cd2d6.svg);
-}
-
-.mx_CallContainer .mx_IncomingCallBox .mx_IncomingCallBox_unSilence:before {
- -webkit-mask-image: url(../../img/voip/un-silence.cebdd12.svg);
- mask-image: url(../../img/voip/un-silence.cebdd12.svg);
-}
-
-.mx_CallPreview {
- position: fixed;
- left: 0;
- top: 0;
-}
-
-.mx_CallView {
- border-radius: 8px;
- background-color: #f2f5f8;
- padding-left: 8px;
- padding-right: 8px;
- pointer-events: auto;
-}
-
-.mx_CallView_large {
- padding-bottom: 10px;
- margin: 5px 5px 5px 18px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.mx_CallView_large,
-.mx_CallView_large .mx_CallView_voice {
- -webkit-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.mx_CallView_pip {
- width: 320px;
- padding-bottom: 8px;
- background-color: #f4f6fa;
- -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
- border-radius: 8px;
-}
-
-.mx_CallView_pip .mx_CallView_voice {
- height: 180px;
-}
-
-.mx_CallView_pip .mx_CallView_callControls {
- bottom: 0;
-}
-
-.mx_CallView_pip .mx_CallView_callControls_button:before {
- width: 36px;
- height: 36px;
-}
-
-.mx_CallView_pip .mx_CallView_holdTransferContent {
- padding-top: 10px;
- padding-bottom: 25px;
-}
-
-.mx_CallView_content {
- position: relative;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- border-radius: 8px;
-}
-
-.mx_CallView_voice {
- -webkit-box-orient: vertical;
- -ms-flex-direction: column;
- flex-direction: column;
- background-color: #27303a;
-}
-
-.mx_CallView_voice,
-.mx_CallView_voice_avatarsContainer {
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-direction: normal;
-}
-
-.mx_CallView_voice_avatarsContainer {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -ms-flex-direction: row;
- flex-direction: row;
-}
-
-.mx_CallView_voice_avatarsContainer div {
- margin-left: 12px;
- margin-right: 12px;
-}
-
-.mx_CallView_voice
- .mx_CallView_holdTransferContent
- .mx_CallView_voice_avatarContainer {
- border-radius: 2000px;
- overflow: hidden;
- position: relative;
-}
-
-.mx_CallView_holdTransferContent {
- height: 20px;
- padding-top: 20px;
- padding-bottom: 15px;
- color: #fff;
-}
-
-.mx_CallView_holdTransferContent .mx_AccessibleButton_hasKind {
- padding: 0;
- font-weight: 700;
-}
-
-.mx_CallView_video {
- width: 100%;
- height: 100%;
- z-index: 30;
- overflow: hidden;
-}
-
-.mx_CallView_video_hold {
- overflow: hidden;
-}
-
-.mx_CallView_video_hold .mx_VideoFeed {
- visibility: hidden;
-}
-
-.mx_CallView_video_holdBackground {
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- right: 0;
- background-repeat: no-repeat;
- background-size: cover;
- background-position: 50%;
- -webkit-filter: blur(20px);
- filter: blur(20px);
-}
-
-.mx_CallView_video_holdBackground:after {
- content: "";
- display: block;
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- right: 0;
- background-color: rgba(0, 0, 0, 0.6);
-}
-
-.mx_CallView_video .mx_CallView_holdTransferContent {
- position: absolute;
- top: 50%;
- left: 50%;
- -webkit-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- font-weight: 700;
- color: #fff;
- text-align: center;
-}
-
-.mx_CallView_video .mx_CallView_holdTransferContent:before {
- display: block;
- margin-left: auto;
- margin-right: auto;
- content: "";
- width: 40px;
- height: 40px;
- background-image: url(../../img/voip/paused.77799b3.svg);
- background-position: 50%;
- background-size: cover;
-}
-
-.mx_CallView_pip .mx_CallView_video .mx_CallView_holdTransferContent:before {
- width: 30px;
- height: 30px;
-}
-
-.mx_CallView_video
- .mx_CallView_holdTransferContent
- .mx_AccessibleButton_hasKind {
- padding: 0;
-}
-
-.mx_CallView_header {
- height: 44px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: left;
- -ms-flex-pack: left;
- justify-content: left;
- -ms-flex-negative: 0;
- flex-shrink: 0;
-}
-
-.mx_CallView_header_callType {
- font-size: 1.2rem;
- font-weight: 700;
- vertical-align: middle;
-}
-
-.mx_CallView_header_secondaryCallInfo:before {
- content: "·";
- margin-left: 6px;
- margin-right: 6px;
-}
-
-.mx_CallView_header_controls {
- margin-left: auto;
-}
-
-.mx_CallView_header_button {
- display: inline-block;
- vertical-align: middle;
- cursor: pointer;
-}
-
-.mx_CallView_header_button:before {
- content: "";
- display: inline-block;
- height: 20px;
- width: 20px;
- vertical-align: middle;
- background-color: #737d8c;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
-}
-
-.mx_CallView_header_button_fullscreen:before {
- -webkit-mask-image: url(../../img/element-icons/call/fullscreen.43be138.svg);
- mask-image: url(../../img/element-icons/call/fullscreen.43be138.svg);
-}
-
-.mx_CallView_header_button_expand:before {
- -webkit-mask-image: url(../../img/element-icons/call/expand.7ef9f56.svg);
- mask-image: url(../../img/element-icons/call/expand.7ef9f56.svg);
-}
-
-.mx_CallView_header_callInfo {
- margin-left: 12px;
- margin-right: 16px;
-}
-
-.mx_CallView_header_roomName {
- font-weight: 700;
- font-size: 12px;
- line-height: normal;
- height: 15px;
-}
-
-.mx_CallView_secondaryCall_roomName {
- margin-left: 4px;
-}
-
-.mx_CallView_header_callTypeSmall {
- font-size: 12px;
- color: #737d8c;
- line-height: normal;
- height: 15px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- max-width: 240px;
-}
-
-.mx_CallView_header_phoneIcon {
- display: inline-block;
- margin-right: 6px;
- height: 16px;
- width: 16px;
- vertical-align: middle;
-}
-
-.mx_CallView_header_phoneIcon:before {
- content: "";
- display: inline-block;
- vertical-align: top;
- height: 16px;
- width: 16px;
- background-color: #ff4b55;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
- mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
-}
-
-.mx_CallView_callControls {
- position: absolute;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- bottom: 5px;
- width: 100%;
- opacity: 1;
- -webkit-transition: opacity 0.5s;
- transition: opacity 0.5s;
-}
-
-.mx_CallView_callControls_hidden {
- opacity: 0.001;
- pointer-events: none;
-}
-
-.mx_CallView_callControls_button {
- cursor: pointer;
- margin-left: 8px;
- margin-right: 8px;
-}
-
-.mx_CallView_callControls_button:before {
- content: "";
- display: inline-block;
- height: 48px;
- width: 48px;
- background-repeat: no-repeat;
- background-size: contain;
- background-position: 50%;
-}
-
-.mx_CallView_callControls_dialpad {
- margin-right: auto;
-}
-
-.mx_CallView_callControls_dialpad:before {
- background-image: url(../../img/voip/dialpad.fdda9a0.svg);
-}
-
-.mx_CallView_callControls_button_dialpad_hidden {
- margin-right: auto;
- cursor: auto;
-}
-
-.mx_CallView_callControls_button_micOn:before {
- background-image: url(../../img/voip/mic-on.2592c14.svg);
-}
-
-.mx_CallView_callControls_button_micOff:before {
- background-image: url(../../img/voip/mic-off.774e42b.svg);
-}
-
-.mx_CallView_callControls_button_vidOn:before {
- background-image: url(../../img/voip/vid-on.b9b8bbf.svg);
-}
-
-.mx_CallView_callControls_button_vidOff:before {
- background-image: url(../../img/voip/vid-off.5552596.svg);
-}
-
-.mx_CallView_callControls_button_hangup:before {
- background-image: url(../../img/voip/hangup.9c3adeb.svg);
-}
-
-.mx_CallView_callControls_button_more {
- margin-left: auto;
-}
-
-.mx_CallView_callControls_button_more:before {
- background-image: url(../../img/voip/more.5e8055e.svg);
-}
-
-.mx_CallView_callControls_button_more_hidden {
- margin-left: auto;
- cursor: auto;
-}
-
-.mx_CallView_callControls_button_invisible {
- visibility: hidden;
- pointer-events: none;
- position: absolute;
-}
-
-.mx_CallViewForRoom {
- overflow: hidden;
-}
-
-.mx_CallViewForRoom .mx_CallViewForRoom_ResizeWrapper {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- margin-bottom: 8px;
-}
-
-.mx_CallViewForRoom
- .mx_CallViewForRoom_ResizeWrapper:hover
- .mx_CallViewForRoom_ResizeHandle {
- width: 100% !important;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
-}
-
-.mx_CallViewForRoom
- .mx_CallViewForRoom_ResizeWrapper:hover
- .mx_CallViewForRoom_ResizeHandle:after {
- content: "";
- margin-top: 3px;
- border-radius: 4px;
- height: 4px;
- width: 100%;
- max-width: 64px;
- background-color: #2e2f32;
-}
-
-.mx_DialPad {
- display: grid;
- grid-row-gap: 16px;
- row-gap: 16px;
- grid-column-gap: 0;
- -webkit-column-gap: 0;
- -moz-column-gap: 0;
- column-gap: 0;
- margin-top: 24px;
- grid-template-columns: repeat(3, 1fr);
-}
-
-.mx_DialPad,
-.mx_DialPad_button {
- margin-left: auto;
- margin-right: auto;
-}
-
-.mx_DialPad_button {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 40px;
- height: 40px;
- background-color: #e3e8f0;
- border-radius: 40px;
- font-size: 18px;
- font-weight: 600;
- text-align: center;
- vertical-align: middle;
-}
-
-.mx_DialPad_button .mx_DialPad_buttonSubText {
- font-size: 8px;
-}
-
-.mx_DialPad_dialButton {
- grid-column: 2;
- background-color: #0dbd8b;
-}
-
-.mx_DialPad_dialButton:before {
- content: "";
- display: inline-block;
- height: 40px;
- width: 40px;
- vertical-align: middle;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 20px;
- mask-size: 20px;
- -webkit-mask-position: center;
- mask-position: center;
- background-color: #fff;
- -webkit-mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
- mask-image: url(../../img/element-icons/call/voice-call.303eba8.svg);
-}
-
-.mx_DialPadContextMenu_dialPad .mx_DialPad {
- grid-row-gap: 16px;
- row-gap: 16px;
- grid-column-gap: 32px;
- -webkit-column-gap: 32px;
- -moz-column-gap: 32px;
- column-gap: 32px;
-}
-
-.mx_DialPadContextMenuWrapper {
- padding: 15px;
-}
-
-.mx_DialPadContextMenu_header {
- margin-top: 32px;
- margin-left: 20px;
- margin-right: 20px;
- border: none;
- border-bottom: 1px solid #c1c6cd;
- -webkit-transition: border-bottom 0.25s;
- transition: border-bottom 0.25s;
-}
-
-.mx_DialPadContextMenu_cancel {
- float: right;
- -webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
- mask: url(../../img/feather-customised/cancel.23c2689.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: cover;
- mask-size: cover;
- width: 14px;
- height: 14px;
- background-color: #c1c1c1;
- cursor: pointer;
-}
-
-.mx_DialPadContextMenu_header:focus-within {
- border-bottom: 1px solid #0dbd8b;
-}
-
-.mx_DialPadContextMenu_title {
- color: #61708b;
- font-size: 12px;
- font-weight: 600;
-}
-
-.mx_DialPadContextMenu_dialled {
- height: 1.5em;
- font-size: 18px;
- font-weight: 600;
- border: none;
- margin: 0;
-}
-
-.mx_DialPadContextMenu_dialled input {
- font-size: 18px;
- font-weight: 600;
- overflow: hidden;
- max-width: 185px;
- text-align: left;
- direction: rtl;
- padding: 8px 0;
- background-color: transparent;
-}
-
-.mx_DialPadContextMenu_dialPad {
- margin: 16px;
-}
-
-.mx_Dialog_dialPadWrapper .mx_Dialog {
- padding: 0;
-}
-
-.mx_DialPadModal {
- width: 292px;
- height: 370px;
- padding: 16px 0 0;
-}
-
-.mx_DialPadModal_header {
- margin-top: 32px;
- margin-left: 40px;
- margin-right: 40px;
- border-bottom: 1px solid #c1c6cd;
- -webkit-transition: border-bottom 0.25s;
- transition: border-bottom 0.25s;
-}
-
-.mx_DialPadModal_header:focus-within {
- border-bottom: 1px solid #0dbd8b;
-}
-
-.mx_DialPadModal_title {
- color: #61708b;
- font-size: 12px;
- font-weight: 600;
-}
-
-.mx_DialPadModal_cancel {
- float: right;
- -webkit-mask: url(../../img/feather-customised/cancel.23c2689.svg);
- mask: url(../../img/feather-customised/cancel.23c2689.svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: center;
- mask-position: center;
- -webkit-mask-size: cover;
- mask-size: cover;
- width: 14px;
- height: 14px;
- background-color: #c1c1c1;
- cursor: pointer;
- margin-right: 16px;
-}
-
-.mx_DialPadModal_field {
- border: none;
- margin: 0;
- height: 30px;
-}
-
-.mx_DialPadModal_field .mx_Field_postfix {
- border-left: none;
-}
-
-.mx_DialPadModal_field input {
- font-size: 18px;
- font-weight: 600;
-}
-
-.mx_DialPadModal_dialPad {
- margin-left: 16px;
- margin-right: 16px;
- margin-top: 16px;
-}
-
-.mx_VideoFeed_voice {
- background-color: #27303a;
-}
-
-.mx_VideoFeed_remote {
- width: 100%;
- height: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.mx_VideoFeed_remote.mx_VideoFeed_video {
- background-color: #000;
-}
-
-.mx_VideoFeed_local {
- max-width: 25%;
- max-height: 25%;
- position: absolute;
- right: 10px;
- top: 10px;
- z-index: 100;
- border-radius: 4px;
-}
-
-.mx_VideoFeed_local.mx_VideoFeed_video {
- background-color: transparent;
-}
-
-.mx_VideoFeed_mirror {
- -webkit-transform: scaleX(-1);
- transform: scaleX(-1);
-}
-
-.hljs {
- display: block;
- overflow-x: auto;
- padding: 0.5em;
- color: #383a42;
- background: #fafafa;
-}
-
-.hljs-comment,
-.hljs-quote {
- color: #a0a1a7;
- font-style: italic;
-}
-
-.hljs-doctag,
-.hljs-formula,
-.hljs-keyword {
- color: #a626a4;
-}
-
-.hljs-deletion,
-.hljs-name,
-.hljs-section,
-.hljs-selector-tag,
-.hljs-subst {
- color: #e45649;
-}
-
-.hljs-literal {
- color: #0184bb;
-}
-
-.hljs-addition,
-.hljs-attribute,
-.hljs-meta-string,
-.hljs-regexp,
-.hljs-string {
- color: #50a14f;
-}
-
-.hljs-built_in,
-.hljs-class .hljs-title {
- color: #c18401;
-}
-
-.hljs-attr,
-.hljs-number,
-.hljs-selector-attr,
-.hljs-selector-class,
-.hljs-selector-pseudo,
-.hljs-template-variable,
-.hljs-type,
-.hljs-variable {
- color: #986801;
-}
-
-.hljs-bullet,
-.hljs-link,
-.hljs-meta,
-.hljs-selector-id,
-.hljs-symbol,
-.hljs-title {
- color: #4078f2;
-}
-
-.hljs-emphasis {
- font-style: italic;
-}
-
-.hljs-strong {
- font-weight: 700;
-}
-
-.hljs-link {
- text-decoration: underline;
-}
`;
-const customCSS = `
-#snackbar {
- display: flex;
- visibility: hidden;
- min-width: 250px;
- margin-left: -125px;
- background-color: #333;
- color: #fff;
- text-align: center;
- position: fixed;
- z-index: 1;
- left: 50%;
- bottom: 30px;
- font-size: 17px;
- padding: 6px 16px;
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
- font-weight: 400;
- line-height: 1.43;
- border-radius: 4px;
- letter-spacing: 0.01071em;
-}
+ return themeCSS + bundleCSS + customCSS;
+};
-#snackbar.mx_show {
- visibility: visible;
- -webkit-animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
- animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
-}
-
-a.mx_reply_anchor{
- cursor: pointer;
- color: #238cf5;
-}
-
-a.mx_reply_anchor:hover{
- text-decoration: underline;
-}
-
-@-webkit-keyframes mx_snackbar_fadein {
- from {bottom: 0; opacity: 0;}
- to {bottom: 30px; opacity: 1;}
-}
-
-@keyframes mx_snackbar_fadein {
- from {bottom: 0; opacity: 0;}
- to {bottom: 30px; opacity: 1;}
-}
-
-@-webkit-keyframes mx_snackbar_fadeout {
- from {bottom: 30px; opacity: 1;}
- to {bottom: 0; opacity: 0;}
-}
-
-@keyframes mx_snackbar_fadeout {
- from {bottom: 30px; opacity: 1;}
- to {bottom: 0; opacity: 0;}
-}
-
-.mx_MFileBody_info .mx_MFileBody_info_icon img.mx_export_attach_icon {
- content: '';
- background-color: #ffffff;
- width: 13px;
- height: 15px;
- position: absolute;
- top: 8px;
- left: 9px;
-}
-
-* {
- scroll-behavior: smooth !important;
-}
-
-
-.mx_Export_EventWrapper:target {
- background: white;
- animation: mx_event_highlight_animation 2s linear;
-}
-
-
-@keyframes mx_event_highlight_animation {
- 0%,100% {
- background: white;
- }
- 50% {
- background: #e3e2df;
- }
-}
-
-.mx_ReplyThread_Export {
- margin-top: -5px;
- margin-bottom: 5px;
-}
-
-.mx_RedactedBody img.mx_export_trash_icon {
- height: 14px;
- width: 14px;
- background-color: #ffffff;
- content: '';
- position: absolute;
- top: 1px;
- left: 0;
-}
-
-img {
- white-space: nowrap;
- overflow: hidden;
-}
-`;
-
-const markdownCSS = `.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;overflow:hidden;font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;font-size:16px;line-height:1.6;word-wrap:break-word}.markdown-body *{-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a{background:0 0;color:#4183c4;text-decoration:none}.markdown-body a:active,.markdown-body a:hover{outline:0}.markdown-body a:active,.markdown-body a:focus,.markdown-body a:hover{text-decoration:underline}.markdown-body strong{font-weight:700}.markdown-body em{font-style:italic}.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;position:relative;margin-top:1em;margin-bottom:16px;font-weight:700;line-height:1.4}.markdown-body h1,.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid #eee}.markdown-body h1{font-size:2.25em;line-height:1.2}.markdown-body h2{font-size:1.75em;line-height:1.225}.markdown-body h3{font-size:1.5em}.markdown-body h4{font-size:1.25em}.markdown-body h5{font-size:1em}.markdown-body h6{font-size:1em;color:#777}.markdown-body code,.markdown-body kbd,.markdown-body pre{font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace}.markdown-body code{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.markdown-body code:after,.markdown-body code:before{letter-spacing:-.2em;content:'\\00a0'}.markdown-body pre{word-wrap:normal;padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.markdown-body pre code{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background:0 0}.markdown-body pre code:after,.markdown-body pre code:before{content:normal}.markdown-body pre>code{font-size:1em;word-break:normal;white-space:pre;border:0}.markdown-body kbd{background-color:#e7e7e7;background-image:-webkit-linear-gradient(#fefefe,#e7e7e7);background-image:linear-gradient(#fefefe,#e7e7e7);background-repeat:repeat-x;display:inline-block;padding:5px 5px 1px;margin:0 1px;font-size:11px;line-height:10px;color:#000;border:1px solid #cfcfcf;border-radius:2px;box-shadow:0 1px 0 #ccc}.markdown-body hr:after,.markdown-body hr:before{display:table;content:''}.markdown-body input{color:inherit;font:inherit;margin:0;font-size:13px;line-height:1.4;font-family:Helvetica,Arial,freesans,clean,sans-serif,'Segoe UI Emoji','Segoe UI Symbol'}.markdown-body input[disabled]{cursor:default}.markdown-body input[type=checkbox]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}.markdown-body blockquote{margin:0 0 16px;padding:0 15px;color:#777;border-left:4px solid #ddd}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body img{border:0;max-width:100%;-moz-box-sizing:border-box;box-sizing:border-box}.markdown-body hr{-moz-box-sizing:content-box;box-sizing:content-box;overflow:hidden;background:#e7e7e7;height:4px;padding:0;margin:16px 0;border:0}.markdown-body hr:after{clear:both}.markdown-body td,.markdown-body th{padding:0}.markdown-body table{border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}.markdown-body table td,.markdown-body table th{padding:6px 13px;border:1px solid #ddd}.markdown-body table th{font-weight:700}.markdown-body table tr{background-color:#fff;border-top:1px solid #ccc}.markdown-body table tr:nth-child(2n){background-color:#f8f8f8}.markdown-body ol,.markdown-body ul{padding:0 0 0 2em}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol{list-style-type:lower-alpha}.markdown-body li>p{margin-top:16px}.markdown-body dd{margin-left:0}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}`;
-
-export default lightCSS + markdownCSS + customCSS;
+export default getExportCSS;
From c74d6c6fff8f8f8ed9404e3343b7fac9378cf248 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 4 Aug 2021 12:39:35 +0530
Subject: [PATCH 150/313] Assign replacements
---
src/utils/exportUtils/HtmlExport.tsx | 8 ++++++--
src/utils/exportUtils/exportCSS.ts | 8 +++++---
test/utils/export-test.tsx | 30 ++++++++++++++++++++++++++++
3 files changed, 41 insertions(+), 5 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 54e21fdf14..124914a210 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -36,6 +36,7 @@ import { ExportTypes } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
import getExportCSS from "./exportCSS";
+import { textForEvent } from "../../TextForEvent";
export default class HTMLExporter extends Exporter {
protected avatars: Map<string, boolean>;
@@ -346,13 +347,16 @@ export default class HTMLExporter extends Exporter {
);
}
} else {
- eventTile = await this.getEventTileMarkup(this.createModifiedEvent(this.mediaOmitText, mxEv), joined);
+ eventTile = await this.getEventTileMarkup(
+ this.createModifiedEvent(this.mediaOmitText, mxEv),
+ joined,
+ );
}
} else eventTile = await this.getEventTileMarkup(mxEv, joined);
} catch (e) {
// TODO: Handle callEvent errors
console.error(e);
- eventTile = await this.getEventTileMarkup(this.createModifiedEvent("Error parsing HTML", mxEv), joined);
+ eventTile = await this.getEventTileMarkup(this.createModifiedEvent(textForEvent(mxEv), mxEv), joined);
}
return eventTile;
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 7079967d93..8ae92b17ee 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -20,6 +20,7 @@ import ThemeWatcher from "../../settings/watchers/ThemeWatcher";
const getExportCSS = async (): Promise<string> => {
const theme = new ThemeWatcher().getEffectiveTheme();
+ // eslint-disable-next-line camelcase
const hash = __webpack_hash__;
const bundle = await fetch(`bundles/${hash}/bundle.css`);
const bundleCSS = await bundle.text();
@@ -32,13 +33,14 @@ const getExportCSS = async (): Promise<string> => {
themeCSS = await res.text();
}
const fontFaceRegex = /@font-face {.*?}/sg;
- themeCSS.replace(fontFaceRegex, '');
- themeCSS.replace(
+
+ themeCSS = themeCSS.replace(fontFaceRegex, '');
+ themeCSS = themeCSS.replace(
/font-family: Inter/g,
`font-family: -apple-system, BlinkMacSystemFont, avenir next,
avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif`,
);
- themeCSS.replace(
+ themeCSS = themeCSS.replace(
/font-family: Inconsolata/g,
"font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace",
);
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index 279ebcff59..25bf17d0ea 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -37,6 +37,12 @@ describe('export', function() {
return MY_USER_ID;
};
+ const mockExportOptions: IExportOptions = {
+ numberOfMessages: 5,
+ maxSize: 100 * 1024 * 1024,
+ attachmentsIncluded: false,
+ };
+
const invalidExportOptions: IExportOptions[] = [
{
numberOfMessages: 10**9,
@@ -97,5 +103,29 @@ describe('export', function() {
}
}
});
+
+ it('tests the file extension splitter', function() {
+ const exporter = new PlainTextExporter(room, ExportTypes.BEGINNING, mockExportOptions, null);
+ const fileNameWithExtensions = {
+ "": ["", ""],
+ "name": ["name", ""],
+ "name.txt": ["name", ".txt"],
+ ".htpasswd": ["", ".htpasswd"],
+ "name.with.many.dots.myext": ["name.with.many.dots", ".myext"],
+ };
+ for (const fileName in fileNameWithExtensions) {
+ expect(exporter.splitFileName(fileName)).toStrictEqual(fileNameWithExtensions[fileName]);
+ }
+ });
+
+ // it('checks if the reply regex executes correctly', function() {
+ // const eventContents = [
+ // {
+ // "msgtype": "m.text",
+ // "body": "> <@me:here> Testing....\n\nTest",
+ // "expectedText": "",
+ // },
+ // ];
+ // });
});
From f00ab0460bde2e156d82c81c4484bba98228b0f3 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 4 Aug 2021 13:06:07 +0530
Subject: [PATCH 151/313] Delint
---
src/utils/exportUtils/exportCSS.ts | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 8ae92b17ee..1a3a575f07 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -14,14 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-/* global __webpack_hash__ */
+/* eslint-disable max-len, camelcase */
+
+declare const __webpack_hash__: string;
import ThemeWatcher from "../../settings/watchers/ThemeWatcher";
const getExportCSS = async (): Promise<string> => {
const theme = new ThemeWatcher().getEffectiveTheme();
- // eslint-disable-next-line camelcase
const hash = __webpack_hash__;
+
const bundle = await fetch(`bundles/${hash}/bundle.css`);
const bundleCSS = await bundle.text();
let themeCSS: string;
From 850b5452a0ff62905b8387e0b650cfb68b93649e Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 9 Aug 2021 12:36:06 +0530
Subject: [PATCH 152/313] Add tests for reply regex
---
package.json | 2 +-
src/utils/exportUtils/Exporter.ts | 3 +-
src/utils/exportUtils/PlainTextExport.ts | 11 +++---
test/utils/export-test.tsx | 50 ++++++++++++++++++------
4 files changed, 45 insertions(+), 21 deletions(-)
diff --git a/package.json b/package.json
index 32f0db29f2..8f927c7bca 100644
--- a/package.json
+++ b/package.json
@@ -199,7 +199,7 @@
"decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
"waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
"workers/(.+)\\.worker\\.ts": "<rootDir>/__mocks__/workerMock.js",
- "^!!raw-loader!.*": "jest-raw-loader"
+ "^!!raw-loader!.*": "jest-raw-loader",
"RecorderWorklet": "<rootDir>/__mocks__/empty.js"
},
"transformIgnorePatterns": [
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index f975e76ddd..92f2c3e3d2 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -98,7 +98,8 @@ export default abstract class Exporter {
}
protected downloadPlainText(fileName: string, text: string) {
- saveAs(new Blob[text], fileName);
+ const content = new Blob([text], { type: "text" });
+ saveAs(content, fileName);
}
protected setEventMetadata(event: MatrixEvent): MatrixEvent {
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 7ab4748848..7421118470 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -16,7 +16,7 @@ limitations under the License.
import Exporter from "./Exporter";
import { Room } from "matrix-js-sdk/src/models/room";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { IContent, MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay } from "../../DateUtils";
import { _t } from "../../languageHandler";
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
@@ -42,10 +42,9 @@ export default class PlainTextExporter extends Exporter {
: _t("Media omitted - file size limit exceeded");
}
- public textForReplyEvent = (ev: MatrixEvent) => {
- const REPLY_REGEX = /> <(.*?)>(.*?)\n\n(.*)/;
+ public textForReplyEvent = (content: IContent) => {
+ const REPLY_REGEX = /> <(.*?)>(.*?)\n\n(.*)/s;
const REPLY_SOURCE_MAX_LENGTH = 32;
- const content = ev.getContent();
const match = REPLY_REGEX.exec(content.body);
@@ -55,7 +54,7 @@ export default class PlainTextExporter extends Exporter {
const rplName = match[1];
const rplText = match[3];
- rplSource = match[2].substring(1, REPLY_SOURCE_MAX_LENGTH);
+ rplSource = match[2].substring(1);
// Get the first non-blank line from the source.
const lines = rplSource.split('\n').filter((line) => !/^\s*$/.test(line));
if (lines.length > 0) {
@@ -99,7 +98,7 @@ export default class PlainTextExporter extends Exporter {
}
} else mediaText = ` (${this.mediaOmitText})`;
}
- if (this.isReply(mxEv)) return senderDisplayName + ": " + this.textForReplyEvent(mxEv) + mediaText;
+ if (this.isReply(mxEv)) return senderDisplayName + ": " + this.textForReplyEvent(mxEv.getContent()) + mediaText;
else return textForEvent(mxEv) + mediaText;
};
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index 25bf17d0ea..141fbe1280 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { MatrixClient, Room } from "matrix-js-sdk";
+import { IContent, MatrixClient, Room } from "matrix-js-sdk";
import { MatrixClientPeg } from "../../src/MatrixClientPeg";
import { textForFormat, IExportOptions, ExportTypes } from "../../src/utils/exportUtils/exportUtils";
import '../skinned-sdk';
@@ -30,6 +30,10 @@ function generateRoomId() {
return '!' + Math.random().toString().slice(2, 10) + ':domain';
}
+interface ITestContent extends IContent {
+ expectedText: string;
+}
+
describe('export', function() {
stubClient();
client = MatrixClientPeg.get();
@@ -63,7 +67,7 @@ describe('export', function() {
const events = mkEvents();
const room = createRoom();
- console.log(events, room);
+ console.log(events);
function createRoom() {
const room = new Room(generateRoomId(), null, client.getUserId());
return room;
@@ -74,8 +78,8 @@ describe('export', function() {
const ts0 = Date.now();
for (let i = 0; i < 10; i++) {
events.push(TestUtilsMatrix.mkMessage({
- event: true, room: "!room:id", user: "@user:id",
- ts: ts0 + i * 1000,
+ event: true, room: "!room:id", user: "@user:id",
+ ts: ts0 + i * 1000,
}));
}
return events;
@@ -118,14 +122,34 @@ describe('export', function() {
}
});
- // it('checks if the reply regex executes correctly', function() {
- // const eventContents = [
- // {
- // "msgtype": "m.text",
- // "body": "> <@me:here> Testing....\n\nTest",
- // "expectedText": "",
- // },
- // ];
- // });
+ it('checks if the reply regex executes correctly', function() {
+ const eventContents: ITestContent[] = [
+ {
+ "msgtype": "m.text",
+ "body": "> <@me:here> Source\n\nReply",
+ "expectedText": "<@me:here \"Source\"> Reply",
+ },
+ {
+ "msgtype": "m.text",
+ // if the reply format is invalid, then return the original string as it is
+ "body": "Invalid reply format",
+ "expectedText": "Invalid reply format",
+ },
+ {
+ "msgtype": "m.text",
+ "body": "> <@me:here> The source is more than 32 characters\n\nReply",
+ "expectedText": "<@me:here \"The source is more than 32 chara...\"> Reply",
+ },
+ {
+ "msgtype": "m.text",
+ "body": "> <@me:here> This\nsource\nhas\nnew\nlines\n\nReply",
+ "expectedText": "<@me:here \"This\"> Reply",
+ },
+ ];
+ const exporter = new PlainTextExporter(room, ExportTypes.BEGINNING, mockExportOptions, null);
+ for (const content of eventContents) {
+ expect(exporter.textForReplyEvent(content)).toBe(content.expectedText);
+ }
+ });
});
From b3c03c9b68f0776f06c86c2a3614bfd09d8a35f5 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 9 Aug 2021 12:41:41 +0530
Subject: [PATCH 153/313] Fix lint errors
---
src/components/views/messages/MFileBody.tsx | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx
index 4fecaf0a5c..9c4a09e695 100644
--- a/src/components/views/messages/MFileBody.tsx
+++ b/src/components/views/messages/MFileBody.tsx
@@ -277,13 +277,13 @@ export default class MFileBody extends React.Component<IProps, IState> {
);
} else if (contentUrl) {
const downloadProps = {
- target: "_blank",
- rel: "noreferrer noopener",
+ target: "_blank",
+ rel: "noreferrer noopener",
- // We set the href regardless of whether or not we intercept the download
- // because we don't really want to convert the file to a blob eagerly, and
- // still want "open in new tab" and "save link as" to work.
- href: contentUrl,
+ // We set the href regardless of whether or not we intercept the download
+ // because we don't really want to convert the file to a blob eagerly, and
+ // still want "open in new tab" and "save link as" to work.
+ href: contentUrl,
};
// Blobs can only have up to 500mb, so if the file reports as being too large then
From 900accd823f3ea01db2d7595ec553add0e218609 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Mon, 9 Aug 2021 13:24:54 +0530
Subject: [PATCH 154/313] Add test for renderToString
---
src/utils/exportUtils/PlainTextExport.ts | 1 +
test/utils/export-test.tsx | 17 +++++++++++++----
2 files changed, 14 insertions(+), 4 deletions(-)
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 7421118470..86f714140e 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -48,6 +48,7 @@ export default class PlainTextExporter extends Exporter {
const match = REPLY_REGEX.exec(content.body);
+ // if the reply format is invalid, then return the body
if (!match) return content.body;
let rplSource: string;
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index 141fbe1280..1b8fc9c31b 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -14,13 +14,15 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { IContent, MatrixClient, Room } from "matrix-js-sdk";
+import { IContent, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk";
import { MatrixClientPeg } from "../../src/MatrixClientPeg";
import { textForFormat, IExportOptions, ExportTypes } from "../../src/utils/exportUtils/exportUtils";
import '../skinned-sdk';
import PlainTextExporter from "../../src/utils/exportUtils/PlainTextExport";
+import HTMLExporter from "../../src/utils/exportUtils/HtmlExport";
import * as TestUtilsMatrix from '../test-utils';
import { stubClient } from '../test-utils';
+import { renderToString } from "react-dom/server";
let client: MatrixClient;
@@ -65,9 +67,8 @@ describe('export', function() {
},
];
- const events = mkEvents();
+ const events: MatrixEvent[] = mkEvents();
const room = createRoom();
- console.log(events);
function createRoom() {
const room = new Room(generateRoomId(), null, client.getUserId());
return room;
@@ -131,7 +132,7 @@ describe('export', function() {
},
{
"msgtype": "m.text",
- // if the reply format is invalid, then return the original string as it is
+ // if the reply format is invalid, then return the body
"body": "Invalid reply format",
"expectedText": "Invalid reply format",
},
@@ -151,5 +152,13 @@ describe('export', function() {
expect(exporter.textForReplyEvent(content)).toBe(content.expectedText);
}
});
+
+ it('checks if the render to string works for eventTile', function() {
+ // Todo: Generate different event types
+ const exporter = new HTMLExporter(room, ExportTypes.BEGINNING, mockExportOptions, null);
+ for (const event of events) {
+ expect(renderToString(exporter.getEventTile(event, false))).toBeTruthy();
+ }
+ });
});
From ecf0aba97ce42fcf124125398d747da2bb329886 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 10 Aug 2021 12:25:11 +0530
Subject: [PATCH 155/313] Test for different types of events
---
src/utils/exportUtils/HtmlExport.tsx | 15 ++--
test/test-utils.js | 6 +-
test/utils/export-test.tsx | 101 +++++++++++++++++++++++----
3 files changed, 104 insertions(+), 18 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 124914a210..daa411826e 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -303,13 +303,17 @@ export default class HTMLExporter extends Exporter {
return eventTileMarkup;
}
- protected createModifiedEvent(text: string, mxEv: MatrixEvent) {
+ protected createModifiedEvent(text: string, mxEv: MatrixEvent, italic=true) {
const modifiedContent = {
msgtype: "m.text",
- body: `*${text}*`,
+ body: `${text}`,
format: "org.matrix.custom.html",
- formatted_body: `<em>${text}</em>`,
+ formatted_body: `${text}`,
};
+ if (italic) {
+ modifiedContent.formatted_body = '<em>' + modifiedContent.formatted_body + '</em>';
+ modifiedContent.body = '*' + modifiedContent.body + '*';
+ }
const modifiedEvent = new MatrixEvent();
modifiedEvent.event = mxEv.event;
modifiedEvent.sender = mxEv.sender;
@@ -356,7 +360,10 @@ export default class HTMLExporter extends Exporter {
} catch (e) {
// TODO: Handle callEvent errors
console.error(e);
- eventTile = await this.getEventTileMarkup(this.createModifiedEvent(textForEvent(mxEv), mxEv), joined);
+ eventTile = await this.getEventTileMarkup(
+ this.createModifiedEvent(textForEvent(mxEv), mxEv, false),
+ joined,
+ );
}
return eventTile;
diff --git a/test/test-utils.js b/test/test-utils.js
index d25fbe5207..46b8e9bbc9 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -113,6 +113,7 @@ export function createTestClient() {
* @param {number=} opts.ts Optional. Timestamp for the event
* @param {Object} opts.content The event.content
* @param {boolean} opts.event True to make a MatrixEvent.
+ * @param {unsigned=} opts.unsigned
* @return {Object} a JSON object representing this event.
*/
export function mkEvent(opts) {
@@ -167,12 +168,13 @@ export function mkPresence(opts) {
* @param {string} opts.room The room ID for the event.
* @param {string} opts.mship The content.membership for the event.
* @param {string} opts.prevMship The prev_content.membership for the event.
+ * @param {number=} opts.ts Optional. Timestamp for the event
* @param {string} opts.user The user ID for the event.
* @param {RoomMember} opts.target The target of the event.
- * @param {string} opts.skey The other user ID for the event if applicable
+ * @param {string=} opts.skey The other user ID for the event if applicable
* e.g. for invites/bans.
* @param {string} opts.name The content.displayname for the event.
- * @param {string} opts.url The content.avatar_url for the event.
+ * @param {string=} opts.url The content.avatar_url for the event.
* @param {boolean} opts.event True to make a MatrixEvent.
* @return {Object|MatrixEvent} The event
*/
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index 1b8fc9c31b..e3811ea957 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -67,25 +67,103 @@ describe('export', function() {
},
];
- const events: MatrixEvent[] = mkEvents();
- const room = createRoom();
function createRoom() {
const room = new Room(generateRoomId(), null, client.getUserId());
return room;
}
+ const mockRoom = createRoom();
function mkEvents() {
- const events = [];
+ const matrixEvents = [];
const ts0 = Date.now();
- for (let i = 0; i < 10; i++) {
- events.push(TestUtilsMatrix.mkMessage({
+ let i: number;
+ // plain text
+ for (i = 0; i < 10; i++) {
+ matrixEvents.push(TestUtilsMatrix.mkMessage({
event: true, room: "!room:id", user: "@user:id",
ts: ts0 + i * 1000,
}));
}
- return events;
+ // reply events
+ for (i = 0; i < 10; i++) {
+ matrixEvents.push(TestUtilsMatrix.mkEvent({
+ "content": {
+ "body": "> <@me:here> Hi\n\nTest",
+ "format": "org.matrix.custom.html",
+ "m.relates_to": {
+ "m.in_reply_to": {
+ "event_id": "$" + Math.random() + "-" + Math.random(),
+ },
+ },
+ "msgtype": "m.text",
+ },
+ "user": "@me:here",
+ "type": "m.room.message",
+ "room": mockRoom.roomId,
+ "event": true,
+ }));
+ }
+ // membership events
+ for (i = 0; i < 10; i++) {
+ matrixEvents.push(TestUtilsMatrix.mkMembership({
+ event: true, room: "!room:id", user: "@user:id",
+ target: {
+ userId: "@user:id",
+ name: "Bob",
+ getAvatarUrl: () => {
+ return "avatar.jpeg";
+ },
+ getMxcAvatarUrl: () => 'mxc://avatar.url/image.png',
+ },
+ ts: ts0 + i*1000,
+ mship: 'join',
+ prevMship: 'join',
+ name: 'A user',
+ }));
+ }
+ // emote
+ matrixEvents.push(TestUtilsMatrix.mkEvent({
+ "content": {
+ "body": "waves",
+ "msgtype": "m.emote",
+ },
+ "user": "@me:here",
+ "type": "m.room.message",
+ "room": mockRoom.roomId,
+ "event": true,
+ }));
+ // redacted events
+ for (i = 0; i < 10; i++) {
+ matrixEvents.push(new MatrixEvent({
+ type: "m.room.message",
+ sender: MY_USER_ID,
+ content: {},
+ unsigned: {
+ "age": 72,
+ "transaction_id": "m1212121212.23",
+ "redacted_because": {
+ "content": {},
+ "origin_server_ts": ts0 + i*1000,
+ "redacts": "$9999999999999999999999999999999999999999998",
+ "sender": "@me:here",
+ "type": "m.room.redaction",
+ "unsigned": {
+ "age": 94,
+ "transaction_id": "m1111111111.1",
+ },
+ "event_id": "$9999999999999999999999999999999999999999998",
+ "room_id": mockRoom.roomId,
+ },
+ },
+ event_id: "$9999999999999999999999999999999999999999999",
+ room_id: mockRoom.roomId,
+ }));
+ }
+ return matrixEvents;
}
+ const events: MatrixEvent[] = mkEvents();
+
it('checks if the export format is valid', function() {
expect(textForFormat('HTML')).toBeTruthy();
expect(textForFormat('JSON')).toBeTruthy();
@@ -101,7 +179,7 @@ describe('export', function() {
it('checks if the export options are valid', function() {
for (const exportOption of invalidExportOptions) {
try {
- new PlainTextExporter(room, ExportTypes.BEGINNING, exportOption, null);
+ new PlainTextExporter(mockRoom, ExportTypes.BEGINNING, exportOption, null);
throw new Error("Expected to throw an error");
} catch (e) {
expect(e.message).toBe("Invalid export options");
@@ -110,7 +188,7 @@ describe('export', function() {
});
it('tests the file extension splitter', function() {
- const exporter = new PlainTextExporter(room, ExportTypes.BEGINNING, mockExportOptions, null);
+ const exporter = new PlainTextExporter(mockRoom, ExportTypes.BEGINNING, mockExportOptions, null);
const fileNameWithExtensions = {
"": ["", ""],
"name": ["name", ""],
@@ -147,15 +225,14 @@ describe('export', function() {
"expectedText": "<@me:here \"This\"> Reply",
},
];
- const exporter = new PlainTextExporter(room, ExportTypes.BEGINNING, mockExportOptions, null);
+ const exporter = new PlainTextExporter(mockRoom, ExportTypes.BEGINNING, mockExportOptions, null);
for (const content of eventContents) {
expect(exporter.textForReplyEvent(content)).toBe(content.expectedText);
}
});
- it('checks if the render to string works for eventTile', function() {
- // Todo: Generate different event types
- const exporter = new HTMLExporter(room, ExportTypes.BEGINNING, mockExportOptions, null);
+ it("checks if the render to string doesn't throw any error for different kinds of strings", function() {
+ const exporter = new HTMLExporter(mockRoom, ExportTypes.BEGINNING, mockExportOptions, null);
for (const event of events) {
expect(renderToString(exporter.getEventTile(event, false))).toBeTruthy();
}
From e396dcfb102c8182766f2de0d674e63b5ee9712e Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 10 Aug 2021 13:22:40 +0530
Subject: [PATCH 156/313] Remove @types/streamsaver
---
package.json | 1 -
.../views/elements/EventListSummary.tsx | 1 -
test/utils/export-test.tsx | 2 +-
yarn.lock | 15 +++++----------
4 files changed, 6 insertions(+), 13 deletions(-)
diff --git a/package.json b/package.json
index 8f927c7bca..6927fd627d 100644
--- a/package.json
+++ b/package.json
@@ -147,7 +147,6 @@
"@types/react-dom": "^17.0.2",
"@types/react-transition-group": "^4.4.0",
"@types/sanitize-html": "^2.3.1",
- "@types/streamsaver": "^2.0.1",
"@types/zxcvbn": "^4.4.0",
"@typescript-eslint/eslint-plugin": "^4.17.0",
"@typescript-eslint/parser": "^4.17.0",
diff --git a/src/components/views/elements/EventListSummary.tsx b/src/components/views/elements/EventListSummary.tsx
index c5630f8346..cbb0e17b42 100644
--- a/src/components/views/elements/EventListSummary.tsx
+++ b/src/components/views/elements/EventListSummary.tsx
@@ -81,7 +81,6 @@ const EventListSummary: React.FC<IProps> = ({
</React.Fragment>;
} else {
const avatars = summaryMembers.map((m) => <MemberAvatar key={m.userId} member={m} width={14} height={14} />);
-
body = (
<div className="mx_EventTile_line">
<div className="mx_EventTile_info">
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index e3811ea957..437dcbbd60 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -231,7 +231,7 @@ describe('export', function() {
}
});
- it("checks if the render to string doesn't throw any error for different kinds of strings", function() {
+ it("checks if the render to string doesn't throw any error for different types of events", function() {
const exporter = new HTMLExporter(mockRoom, ExportTypes.BEGINNING, mockExportOptions, null);
for (const event of events) {
expect(renderToString(exporter.getEventTile(event, false))).toBeTruthy();
diff --git a/yarn.lock b/yarn.lock
index 348f120f18..6f24e45f81 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1785,11 +1785,6 @@
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
-"@types/streamsaver@^2.0.1":
- version "2.0.1"
- resolved "https://registry.yarnpkg.com/@types/streamsaver/-/streamsaver-2.0.1.tgz#fa5e5b891d1b282be3078c232a30ee004b8e0be0"
- integrity sha512-I49NtT8w6syBI3Zg3ixCyygTHoTVMY0z2TMRcTgccdIsVd2MwlKk7ITLHLsJtgchUHcOd7QEARG9h0ifcA6l2Q==
-
"@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
version "2.0.6"
resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
@@ -2348,16 +2343,16 @@ bcrypt-pbkdf@^1.0.0:
dependencies:
tweetnacl "^0.14.3"
-big.js@^5.2.2:
- version "5.2.2"
- resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
- integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
-
before-after-hook@^2.2.0:
version "2.2.2"
resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.2.tgz#a6e8ca41028d90ee2c24222f201c90956091613e"
integrity sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==
+big.js@^5.2.2:
+ version "5.2.2"
+ resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+ integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
binary-extensions@^1.0.0:
version "1.13.1"
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
From edfc8af6cf93a1a6884c244e965434cc0e7aeef2 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 13 Aug 2021 08:30:50 +0530
Subject: [PATCH 157/313] Apply PR Suggestions
---
src/components/views/dialogs/ExportDialog.tsx | 32 +--
src/components/views/messages/MFileBody.tsx | 182 +++++++++---------
src/utils/exportUtils/Exporter.ts | 17 +-
src/utils/exportUtils/HtmlExport.tsx | 4 +-
src/utils/exportUtils/JSONExport.ts | 10 +-
src/utils/exportUtils/PlainTextExport.ts | 4 +-
src/utils/exportUtils/exportUtils.ts | 28 +--
test/utils/export-test.tsx | 10 +-
8 files changed, 143 insertions(+), 144 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 5ebe6ed7c5..6116faf1e1 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -24,8 +24,8 @@ import Field from "../elements/Field";
import StyledRadioGroup from "../elements/StyledRadioGroup";
import StyledCheckbox from "../elements/StyledCheckbox";
import {
- ExportFormats,
- ExportTypes,
+ ExportFormat,
+ ExportType,
textForFormat,
textForType,
} from "../../../utils/exportUtils/exportUtils";
@@ -42,8 +42,8 @@ interface IProps extends IDialogProps {
}
const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
- const [exportFormat, setExportFormat] = useState(ExportFormats.HTML);
- const [exportType, setExportType] = useState(ExportTypes.TIMELINE);
+ const [exportFormat, setExportFormat] = useState(ExportFormat.Html);
+ const [exportType, setExportType] = useState(ExportType.Timeline);
const [includeAttachments, setAttachments] = useState(false);
const [isExporting, setExporting] = useState(false);
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
@@ -70,31 +70,31 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
maxSize: sizeLimit * 1024 * 1024,
};
switch (exportFormat) {
- case ExportFormats.HTML:
+ case ExportFormat.Html:
setExporter(
new HTMLExporter(
room,
- ExportTypes[exportType],
+ ExportType[exportType],
exportOptions,
exportProgressRef,
),
);
break;
- case ExportFormats.JSON:
+ case ExportFormat.Json:
setExporter(
new JSONExporter(
room,
- ExportTypes[exportType],
+ ExportType[exportType],
exportOptions,
exportProgressRef,
),
);
break;
- case ExportFormats.PLAIN_TEXT:
+ case ExportFormat.PlainText:
setExporter(
new PlainTextExporter(
room,
- ExportTypes[exportType],
+ ExportType[exportType],
exportOptions,
exportProgressRef,
),
@@ -114,7 +114,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
sizeLimitRef.current.validate({ focused: true });
return;
}
- if (exportType === ExportTypes.LAST_N_MESSAGES) {
+ if (exportType === ExportType.LastNMessages) {
const isValidNumberOfMessages =
await messageCountRef.current.validate({ focused: false });
if (!isValidNumberOfMessages) {
@@ -202,12 +202,12 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
});
};
- const exportFormatOptions = Object.keys(ExportFormats).map((format) => ({
+ const exportFormatOptions = Object.keys(ExportFormat).map((format) => ({
value: format,
label: textForFormat(format),
}));
- const exportTypeOptions = Object.keys(ExportTypes).map((type) => {
+ const exportTypeOptions = Object.keys(ExportType).map((type) => {
return (
<option key={type} value={type}>
{ textForType(type) }
@@ -216,7 +216,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
});
let messageCount = null;
- if (exportType === ExportTypes.LAST_N_MESSAGES) {
+ if (exportType === ExportType.LastNMessages) {
messageCount = (
<Field
element="input"
@@ -322,7 +322,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
<StyledRadioGroup
name="exportFormat"
value={exportFormat}
- onChange={(key) => setExportFormat(ExportFormats[key])}
+ onChange={(key) => setExportFormat(ExportFormat[key])}
definitions={exportFormatOptions}
/>
@@ -334,7 +334,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
element="select"
value={exportType}
onChange={(e) => {
- setExportType(ExportTypes[e.target.value]);
+ setExportType(ExportType[e.target.value]);
}}
>
{ exportTypeOptions }
diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx
index 9c4a09e695..1f079cd1e2 100644
--- a/src/components/views/messages/MFileBody.tsx
+++ b/src/components/views/messages/MFileBody.tsx
@@ -222,125 +222,125 @@ export default class MFileBody extends React.Component<IProps, IState> {
{ placeholder }
</a>
</span>;
- } else {
- const showDownloadLink = this.props.tileShape || !this.props.showGenericPlaceholder;
+ }
- if (isEncrypted) {
- if (!this.state.decryptedBlob) {
+ const showDownloadLink = this.props.tileShape || !this.props.showGenericPlaceholder;
+
+ if (isEncrypted) {
+ if (!this.state.decryptedBlob) {
// Need to decrypt the attachment
// Wait for the user to click on the link before downloading
// and decrypting the attachment.
- // This button should actually Download because usercontent/ will try to click itself
- // but it is not guaranteed between various browsers' settings.
- return (
- <span className="mx_MFileBody">
- { placeholder }
- { showDownloadLink && <div className="mx_MFileBody_download">
- <AccessibleButton onClick={this.decryptFile}>
- { _t("Decrypt %(text)s", { text: this.linkText }) }
- </AccessibleButton>
- </div> }
- </span>
- );
- }
-
- const url = "usercontent/"; // XXX: this path should probably be passed from the skin
-
- // If the attachment is encrypted then put the link inside an iframe.
+ // This button should actually Download because usercontent/ will try to click itself
+ // but it is not guaranteed between various browsers' settings.
return (
<span className="mx_MFileBody">
{ placeholder }
{ showDownloadLink && <div className="mx_MFileBody_download">
- <div style={{ display: "none" }}>
- { /*
+ <AccessibleButton onClick={this.decryptFile}>
+ { _t("Decrypt %(text)s", { text: this.linkText }) }
+ </AccessibleButton>
+ </div> }
+ </span>
+ );
+ }
+
+ const url = "usercontent/"; // XXX: this path should probably be passed from the skin
+
+ // If the attachment is encrypted then put the link inside an iframe.
+ return (
+ <span className="mx_MFileBody">
+ { placeholder }
+ { showDownloadLink && <div className="mx_MFileBody_download">
+ <div style={{ display: "none" }}>
+ { /*
* Add dummy copy of the "a" tag
* We'll use it to learn how the download link
* would have been styled if it was rendered inline.
*/ }
- <a ref={this.dummyLink} />
- </div>
- { /*
+ <a ref={this.dummyLink} />
+ </div>
+ { /*
TODO: Move iframe (and dummy link) into FileDownloader.
We currently have it set up this way because of styles applied to the iframe
itself which cannot be easily handled/overridden by the FileDownloader. In
future, the download link may disappear entirely at which point it could also
be suitable to just remove this bit of code.
*/ }
- <iframe
- src={url}
- onLoad={() => this.downloadFile(this.fileName, this.linkText)}
- ref={this.iframe}
- sandbox="allow-scripts allow-downloads allow-downloads-without-user-activation" />
- </div> }
- </span>
- );
- } else if (contentUrl) {
- const downloadProps = {
- target: "_blank",
- rel: "noreferrer noopener",
+ <iframe
+ src={url}
+ onLoad={() => this.downloadFile(this.fileName, this.linkText)}
+ ref={this.iframe}
+ sandbox="allow-scripts allow-downloads allow-downloads-without-user-activation" />
+ </div> }
+ </span>
+ );
+ } else if (contentUrl) {
+ const downloadProps = {
+ target: "_blank",
+ rel: "noreferrer noopener",
- // We set the href regardless of whether or not we intercept the download
- // because we don't really want to convert the file to a blob eagerly, and
- // still want "open in new tab" and "save link as" to work.
- href: contentUrl,
- };
+ // We set the href regardless of whether or not we intercept the download
+ // because we don't really want to convert the file to a blob eagerly, and
+ // still want "open in new tab" and "save link as" to work.
+ href: contentUrl,
+ };
- // Blobs can only have up to 500mb, so if the file reports as being too large then
- // we won't try and convert it. Likewise, if the file size is unknown then we'll assume
- // it is too big. There is the risk of the reported file size and the actual file size
- // being different, however the user shouldn't normally run into this problem.
- const fileTooBig = typeof(fileSize) === 'number' ? fileSize > 524288000 : true;
+ // Blobs can only have up to 500mb, so if the file reports as being too large then
+ // we won't try and convert it. Likewise, if the file size is unknown then we'll assume
+ // it is too big. There is the risk of the reported file size and the actual file size
+ // being different, however the user shouldn't normally run into this problem.
+ const fileTooBig = typeof(fileSize) === 'number' ? fileSize > 524288000 : true;
- if (["application/pdf"].includes(fileType) && !fileTooBig) {
+ if (["application/pdf"].includes(fileType) && !fileTooBig) {
// We want to force a download on this type, so use an onClick handler.
- downloadProps["onClick"] = (e) => {
- console.log(`Downloading ${fileType} as blob (unencrypted)`);
+ downloadProps["onClick"] = (e) => {
+ console.log(`Downloading ${fileType} as blob (unencrypted)`);
- // Avoid letting the <a> do its thing
- e.preventDefault();
- e.stopPropagation();
+ // Avoid letting the <a> do its thing
+ e.preventDefault();
+ e.stopPropagation();
- // Start a fetch for the download
- // Based upon https://stackoverflow.com/a/49500465
- this.props.mediaEventHelper.sourceBlob.value.then((blob) => {
- const blobUrl = URL.createObjectURL(blob);
+ // Start a fetch for the download
+ // Based upon https://stackoverflow.com/a/49500465
+ this.props.mediaEventHelper.sourceBlob.value.then((blob) => {
+ const blobUrl = URL.createObjectURL(blob);
- // We have to create an anchor to download the file
- const tempAnchor = document.createElement('a');
- tempAnchor.download = this.fileName;
- tempAnchor.href = blobUrl;
- document.body.appendChild(tempAnchor); // for firefox: https://stackoverflow.com/a/32226068
- tempAnchor.click();
- tempAnchor.remove();
- });
- };
- } else {
- // Else we are hoping the browser will do the right thing
- downloadProps["download"] = this.fileName;
- }
-
- return (
- <span className="mx_MFileBody">
- { placeholder }
- { showDownloadLink && <div className="mx_MFileBody_download">
- <a {...downloadProps}>
- <span className="mx_MFileBody_download_icon" />
- { _t("Download %(text)s", { text: this.linkText }) }
- </a>
- { this.props.tileShape === TileShape.FileGrid && <div className="mx_MImageBody_size">
- { this.content.info && this.content.info.size ? filesize(this.content.info.size) : "" }
- </div> }
- </div> }
- </span>
- );
+ // We have to create an anchor to download the file
+ const tempAnchor = document.createElement('a');
+ tempAnchor.download = this.fileName;
+ tempAnchor.href = blobUrl;
+ document.body.appendChild(tempAnchor); // for firefox: https://stackoverflow.com/a/32226068
+ tempAnchor.click();
+ tempAnchor.remove();
+ });
+ };
} else {
- const extra = this.linkText ? (': ' + this.linkText) : '';
- return <span className="mx_MFileBody">
- { placeholder }
- { _t("Invalid file%(extra)s", { extra: extra }) }
- </span>;
+ // Else we are hoping the browser will do the right thing
+ downloadProps["download"] = this.fileName;
}
+
+ return (
+ <span className="mx_MFileBody">
+ { placeholder }
+ { showDownloadLink && <div className="mx_MFileBody_download">
+ <a {...downloadProps}>
+ <span className="mx_MFileBody_download_icon" />
+ { _t("Download %(text)s", { text: this.linkText }) }
+ </a>
+ { this.props.tileShape === TileShape.FileGrid && <div className="mx_MImageBody_size">
+ { this.content.info && this.content.info.size ? filesize(this.content.info.size) : "" }
+ </div> }
+ </div> }
+ </span>
+ );
+ } else {
+ const extra = this.linkText ? (': ' + this.linkText) : '';
+ return <span className="mx_MFileBody">
+ { placeholder }
+ { _t("Invalid file%(extra)s", { extra: extra }) }
+ </span>;
}
}
}
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 92f2c3e3d2..920d690174 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -17,7 +17,7 @@ limitations under the License.
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClientPeg } from "../../MatrixClientPeg";
-import { IExportOptions, ExportTypes } from "./exportUtils";
+import { IExportOptions, ExportType } from "./exportUtils";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
@@ -38,13 +38,14 @@ export default abstract class Exporter {
protected constructor(
protected room: Room,
- protected exportType: ExportTypes,
+ protected exportType: ExportType,
protected exportOptions: IExportOptions,
protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
- if (exportOptions.maxSize < 1 * 1024 * 1024||
- exportOptions.maxSize > 2000 * 1024 * 1024||
- exportOptions.numberOfMessages > 10**8) {
+ if (exportOptions.maxSize < 1 * 1024 * 1024|| // Less than 1 MB
+ exportOptions.maxSize > 2000 * 1024 * 1024|| // More than ~ 2 GB
+ exportOptions.numberOfMessages > 10**8
+ ) {
throw new Error("Invalid export options");
}
this.cancelled = false;
@@ -118,10 +119,10 @@ export default abstract class Exporter {
public getLimit(): number {
let limit: number;
switch (this.exportType) {
- case ExportTypes.LAST_N_MESSAGES:
+ case ExportType.LastNMessages:
limit = this.exportOptions.numberOfMessages;
break;
- case ExportTypes.TIMELINE:
+ case ExportType.Timeline:
limit = 40;
break;
default:
@@ -166,7 +167,7 @@ export default abstract class Exporter {
events.push(mxEv);
}
this.updateProgress(
- ("Fetched " + events.length + " events ") + (this.exportType === ExportTypes.LAST_N_MESSAGES
+ ("Fetched " + events.length + " events ") + (this.exportType === ExportType.LastNMessages
? `out of ${this.exportOptions.numberOfMessages}`
: "so far"),
);
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index daa411826e..6cdbae6c48 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -32,7 +32,7 @@ import DateSeparator from "../../components/views/messages/DateSeparator";
import BaseAvatar from "../../components/views/avatars/BaseAvatar";
import exportJS from "!!raw-loader!./exportJS";
import exportIcons from "./exportIcons";
-import { ExportTypes } from "./exportUtils";
+import { ExportType } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
import getExportCSS from "./exportCSS";
@@ -46,7 +46,7 @@ export default class HTMLExporter extends Exporter {
constructor(
room: Room,
- exportType: ExportTypes,
+ exportType: ExportType,
exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 356f4282db..a2273ad918 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -19,24 +19,22 @@ import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay, formatFullDateNoDayNoTime } from "../../DateUtils";
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
-import { ExportTypes } from "./exportUtils";
+import { ExportType } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import { EventType } from "matrix-js-sdk/src/@types/event";
import { MutableRefObject } from "react";
export default class JSONExporter extends Exporter {
- protected totalSize: number;
- protected messages: any[];
+ protected totalSize = 0;
+ protected messages: any[] = [];
constructor(
room: Room,
- exportType: ExportTypes,
+ exportType: ExportType,
exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
super(room, exportType, exportOptions, exportProgressRef);
- this.totalSize = 0;
- this.messages = [];
}
protected createJSONString(): string {
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 86f714140e..23ed6c7bbd 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -20,7 +20,7 @@ import { IContent, MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay } from "../../DateUtils";
import { _t } from "../../languageHandler";
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
-import { ExportTypes } from "./exportUtils";
+import { ExportType } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import { textForEvent } from "../../TextForEvent";
import { MutableRefObject } from "react";
@@ -31,7 +31,7 @@ export default class PlainTextExporter extends Exporter {
constructor(
room: Room,
- exportType: ExportTypes,
+ exportType: ExportType,
exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 8410b747ea..2f6e2c2cbc 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -16,26 +16,26 @@ limitations under the License.
import { _t } from "../../languageHandler";
-export enum ExportFormats {
- HTML = "HTML",
- PLAIN_TEXT = "PLAIN_TEXT",
- JSON = "JSON",
+export enum ExportFormat {
+ Html = "HTML",
+ PlainText = "PLAIN_TEXT",
+ Json = "JSON",
}
-export enum ExportTypes {
- TIMELINE = "TIMELINE",
- BEGINNING = "BEGINNING",
- LAST_N_MESSAGES = "LAST_N_MESSAGES",
+export enum ExportType {
+ Timeline = "TIMELINE",
+ Beginning = "BEGINNING",
+ LastNMessages = "LAST_N_MESSAGES",
// START_DATE = "START_DATE",
}
export const textForFormat = (format: string): string => {
switch (format) {
- case ExportFormats.HTML:
+ case ExportFormat.Html:
return _t("HTML");
- case ExportFormats.JSON:
+ case ExportFormat.Json:
return _t("JSON");
- case ExportFormats.PLAIN_TEXT:
+ case ExportFormat.PlainText:
return _t("Plain Text");
default:
throw new Error("Unknown format");
@@ -44,11 +44,11 @@ export const textForFormat = (format: string): string => {
export const textForType = (type: string): string => {
switch (type) {
- case ExportTypes.BEGINNING:
+ case ExportType.Beginning:
return _t("From the beginning");
- case ExportTypes.LAST_N_MESSAGES:
+ case ExportType.LastNMessages:
return _t("Specify a number of messages");
- case ExportTypes.TIMELINE:
+ case ExportType.Timeline:
return _t("Current Timeline");
default:
throw new Error("Unknown type: " + type);
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index 437dcbbd60..c23f15c24b 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -16,7 +16,7 @@ limitations under the License.
import { IContent, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk";
import { MatrixClientPeg } from "../../src/MatrixClientPeg";
-import { textForFormat, IExportOptions, ExportTypes } from "../../src/utils/exportUtils/exportUtils";
+import { textForFormat, IExportOptions, ExportType } from "../../src/utils/exportUtils/exportUtils";
import '../skinned-sdk';
import PlainTextExporter from "../../src/utils/exportUtils/PlainTextExport";
import HTMLExporter from "../../src/utils/exportUtils/HtmlExport";
@@ -179,7 +179,7 @@ describe('export', function() {
it('checks if the export options are valid', function() {
for (const exportOption of invalidExportOptions) {
try {
- new PlainTextExporter(mockRoom, ExportTypes.BEGINNING, exportOption, null);
+ new PlainTextExporter(mockRoom, ExportType.Beginning, exportOption, null);
throw new Error("Expected to throw an error");
} catch (e) {
expect(e.message).toBe("Invalid export options");
@@ -188,7 +188,7 @@ describe('export', function() {
});
it('tests the file extension splitter', function() {
- const exporter = new PlainTextExporter(mockRoom, ExportTypes.BEGINNING, mockExportOptions, null);
+ const exporter = new PlainTextExporter(mockRoom, ExportType.Beginning, mockExportOptions, null);
const fileNameWithExtensions = {
"": ["", ""],
"name": ["name", ""],
@@ -225,14 +225,14 @@ describe('export', function() {
"expectedText": "<@me:here \"This\"> Reply",
},
];
- const exporter = new PlainTextExporter(mockRoom, ExportTypes.BEGINNING, mockExportOptions, null);
+ const exporter = new PlainTextExporter(mockRoom, ExportType.Beginning, mockExportOptions, null);
for (const content of eventContents) {
expect(exporter.textForReplyEvent(content)).toBe(content.expectedText);
}
});
it("checks if the render to string doesn't throw any error for different types of events", function() {
- const exporter = new HTMLExporter(mockRoom, ExportTypes.BEGINNING, mockExportOptions, null);
+ const exporter = new HTMLExporter(mockRoom, ExportType.Beginning, mockExportOptions, null);
for (const event of events) {
expect(renderToString(exporter.getEventTile(event, false))).toBeTruthy();
}
From 9cbdc4a6136ab8c0a4ed87dcd9b2fe5a882af183 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 13 Aug 2021 08:34:54 +0530
Subject: [PATCH 158/313] Use throw error instead of try-catch
---
test/utils/export-test.tsx | 17 +++++------------
1 file changed, 5 insertions(+), 12 deletions(-)
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index c23f15c24b..c4d9b43765 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -168,22 +168,15 @@ describe('export', function() {
expect(textForFormat('HTML')).toBeTruthy();
expect(textForFormat('JSON')).toBeTruthy();
expect(textForFormat('PLAIN_TEXT')).toBeTruthy();
- try {
- textForFormat('PDF');
- throw new Error("Expected to throw an error");
- } catch (e) {
- expect(e.message).toBe("Unknown format");
- }
+ expect(() => textForFormat('PDF')).toThrowError("Unknown format");
});
it('checks if the export options are valid', function() {
for (const exportOption of invalidExportOptions) {
- try {
- new PlainTextExporter(mockRoom, ExportType.Beginning, exportOption, null);
- throw new Error("Expected to throw an error");
- } catch (e) {
- expect(e.message).toBe("Invalid export options");
- }
+ expect(
+ () =>
+ new PlainTextExporter(mockRoom, ExportType.Beginning, exportOption, null),
+ ).toThrowError("Invalid export options");
}
});
From dda24da20435a0d0b701199dfa9769614b50c47b Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 13 Aug 2021 08:59:14 +0530
Subject: [PATCH 159/313] Add copyright headers
---
src/components/views/dialogs/ExportDialog.tsx | 12 ++++++------
src/utils/exportUtils/exportIcons.ts | 16 ++++++++++++++++
src/utils/exportUtils/exportJS.js | 17 +++++++++++++++++
src/utils/exportUtils/exportUtils.ts | 16 ++++++++--------
4 files changed, 47 insertions(+), 14 deletions(-)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 6116faf1e1..d2f1da861a 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -54,7 +54,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [displayCancel, setCancelWarning] = useState(false);
const [exportCancelled, setExportCancelled] = useState(false);
const [exportSuccessful, setExportSuccessful] = useState(false);
- const [Exporter, setExporter] = useStateCallback<Exporter>(
+ const [exporter, setExporter] = useStateCallback<Exporter>(
null,
async (exporter: Exporter) => {
await exporter?.export().then(() => {
@@ -195,7 +195,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
};
const confirmCanel = async () => {
- await Exporter?.cancelExport().then(() => {
+ await exporter?.cancelExport().then(() => {
setExportCancelled(true);
setExporting(false);
setExporter(null);
@@ -203,14 +203,14 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
};
const exportFormatOptions = Object.keys(ExportFormat).map((format) => ({
- value: format,
- label: textForFormat(format),
+ value: ExportFormat[format],
+ label: textForFormat(ExportFormat[format]),
}));
const exportTypeOptions = Object.keys(ExportType).map((type) => {
return (
- <option key={type} value={type}>
- { textForType(type) }
+ <option key={type} value={ExportType[type]}>
+ { textForType(ExportType[type]) }
</option>
);
});
diff --git a/src/utils/exportUtils/exportIcons.ts b/src/utils/exportUtils/exportIcons.ts
index 181a62848e..7a8264f7e9 100644
--- a/src/utils/exportUtils/exportIcons.ts
+++ b/src/utils/exportUtils/exportIcons.ts
@@ -1,3 +1,19 @@
+/*
+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.
+*/
+
import trashSVG from "!!raw-loader!../../../res/img/element-icons/trashcan.svg";
import attachSVG from "!!raw-loader!../../../res/img/element-icons/room/composer/attach.svg";
diff --git a/src/utils/exportUtils/exportJS.js b/src/utils/exportUtils/exportJS.js
index 9e58c8b99c..e082f88d98 100644
--- a/src/utils/exportUtils/exportJS.js
+++ b/src/utils/exportUtils/exportJS.js
@@ -1,3 +1,20 @@
+/*
+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.
+*/
+
+// This file is raw-imported (imported as plain text) for the export bundle, which is why this is in JS
function showToastIfNeeded(replyId) {
const el = document.getElementById(replyId);
if (!el) {
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 2f6e2c2cbc..139e3a3740 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -17,19 +17,19 @@ limitations under the License.
import { _t } from "../../languageHandler";
export enum ExportFormat {
- Html = "HTML",
- PlainText = "PLAIN_TEXT",
- Json = "JSON",
+ Html = "Html",
+ PlainText = "PlainText",
+ Json = "Json",
}
export enum ExportType {
- Timeline = "TIMELINE",
- Beginning = "BEGINNING",
- LastNMessages = "LAST_N_MESSAGES",
+ Timeline = "Timeline",
+ Beginning = "Beginning",
+ LastNMessages = "LastNMessages",
// START_DATE = "START_DATE",
}
-export const textForFormat = (format: string): string => {
+export const textForFormat = (format: ExportFormat): string => {
switch (format) {
case ExportFormat.Html:
return _t("HTML");
@@ -42,7 +42,7 @@ export const textForFormat = (format: string): string => {
}
};
-export const textForType = (type: string): string => {
+export const textForType = (type: ExportType): string => {
switch (type) {
case ExportType.Beginning:
return _t("From the beginning");
From 00d5a0baa4832e9a4f1c35dd100d0a71758ab675 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 13 Aug 2021 08:59:28 +0530
Subject: [PATCH 160/313] Apply suggestions from code review
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/TextForEvent.tsx | 9 +++++----
src/components/views/messages/MImageBody.tsx | 2 +-
src/utils/exportUtils/Exporter.ts | 10 ++++------
src/utils/exportUtils/exportUtils.ts | 4 ++--
4 files changed, 12 insertions(+), 13 deletions(-)
diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index 5ab1ceb9f4..7845091c48 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -167,7 +167,7 @@ function textForTopicEvent(ev: MatrixEvent): () => string | null {
}
function textForRoomAvatarEvent(ev: MatrixEvent): () => string | null {
- const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+ const senderDisplayName = ev?.sender?.name || ev.getSender();
return () => _t('%(senderDisplayName)s changed the room avatar.', { senderDisplayName });
}
@@ -298,11 +298,12 @@ function textForMessageEvent(ev: MatrixEvent): () => string | null {
if (ev.isRedacted()) {
message = _t("Message deleted");
const unsigned = ev.getUnsigned();
- const redactedBecauseUserId = unsigned && unsigned.redacted_because && unsigned.redacted_because.sender;
+ const redactedBecauseUserId = unsigned?.redacted_because?.sender;
if (redactedBecauseUserId && redactedBecauseUserId !== ev.getSender()) {
const room = MatrixClientPeg.get().getRoom(ev.getRoomId());
- const sender = room && room.getMember(redactedBecauseUserId);
- message = _t("Message deleted by %(name)s", { name: sender ? sender.name : redactedBecauseUserId });
+ const sender = room?.getMember(redactedBecauseUserId);
+ message = _t("Message deleted by %(name)s", { name: sender?.name
+ || redactedBecauseUserId });
}
}
if (ev.getContent().msgtype === "m.emote") {
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 4fa1161d82..ae82c57a5e 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -428,7 +428,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
// Overidden by MStickerBody
protected wrapImage(contentUrl: string, children: JSX.Element): JSX.Element {
- return <a href={contentUrl} target={this.props.forExport ? "__blank" : undefined} onClick={this.onClick}>
+ return <a href={contentUrl} target={this.props.forExport ? "_blank" : undefined} onClick={this.onClick}>
{ children }
</a>;
}
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 92f2c3e3d2..e497fb7e38 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -32,9 +32,9 @@ type BlobFile = {
};
export default abstract class Exporter {
- protected files: BlobFile[];
+ protected files: BlobFile[] = [];
protected client: MatrixClient;
- protected cancelled: boolean;
+ protected cancelled = false;
protected constructor(
protected room: Room,
@@ -47,8 +47,6 @@ export default abstract class Exporter {
exportOptions.numberOfMessages > 10**8) {
throw new Error("Invalid export options");
}
- this.cancelled = false;
- this.files = [];
this.client = MatrixClientPeg.get();
window.addEventListener("beforeunload", this.onBeforeUnload);
}
@@ -71,7 +69,7 @@ export default abstract class Exporter {
this.files.push(file);
}
- protected async downloadZIP(): Promise<any> {
+ protected async downloadZIP(): Promise<void> {
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
const zip = new JSZip();
@@ -257,5 +255,5 @@ export default abstract class Exporter {
return mxEv.getType() === attachmentTypes[0] || attachmentTypes.includes(mxEv.getContent().msgtype);
}
- abstract export(): Promise<any>;
+ abstract export(): Promise<void>;
}
diff --git a/src/utils/exportUtils/exportUtils.ts b/src/utils/exportUtils/exportUtils.ts
index 8410b747ea..b69eef4edb 100644
--- a/src/utils/exportUtils/exportUtils.ts
+++ b/src/utils/exportUtils/exportUtils.ts
@@ -29,7 +29,7 @@ export enum ExportTypes {
// START_DATE = "START_DATE",
}
-export const textForFormat = (format: string): string => {
+export const textForFormat = (format: ExportFormat): string => {
switch (format) {
case ExportFormats.HTML:
return _t("HTML");
@@ -42,7 +42,7 @@ export const textForFormat = (format: string): string => {
}
};
-export const textForType = (type: string): string => {
+export const textForType = (type: ExportType): string => {
switch (type) {
case ExportTypes.BEGINNING:
return _t("From the beginning");
From 7207329c15a1d0bd851b7e99cf9ec1bf7ca612df Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 13 Aug 2021 23:44:07 +0530
Subject: [PATCH 161/313] Apply review suggestions
---
res/css/views/dialogs/_ExportDialog.scss | 6 +-
src/TextForEvent.tsx | 5 +-
src/components/views/avatars/MemberAvatar.tsx | 4 +-
src/components/views/dialogs/ExportDialog.tsx | 182 +++++++++---------
src/components/views/elements/ReplyThread.tsx | 6 +-
src/components/views/messages/CallEvent.tsx | 4 +-
src/components/views/messages/MFileBody.tsx | 6 +-
.../views/messages/RedactedBody.tsx | 1 -
src/i18n/strings/en_EN.json | 12 +-
src/utils/exportUtils/Exporter.ts | 5 +-
src/utils/exportUtils/HtmlExport.tsx | 6 +-
src/utils/exportUtils/exportCSS.ts | 36 ++--
src/utils/exportUtils/exportIcons.ts | 23 ---
test/utils/export-test.tsx | 100 +++++++---
14 files changed, 201 insertions(+), 195 deletions(-)
delete mode 100644 src/utils/exportUtils/exportIcons.ts
diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
index b4bc2b84b2..f3e418354c 100644
--- a/res/css/views/dialogs/_ExportDialog.scss
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -35,7 +35,7 @@ limitations under the License.
}
.mx_RadioButton input[type="radio"]:checked + div > div {
- background: gray;
+ background: $greyed-fg-color;
}
.mx_RadioButton input[type=radio]:checked + div {
@@ -52,8 +52,8 @@ limitations under the License.
}
.mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background {
- background: gray;
- border-color: gray;
+ background: $greyed-fg-color;
+ border-color: $greyed-fg-color;
}
}
diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index 7845091c48..5f4ae4a702 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -312,7 +312,10 @@ function textForMessageEvent(ev: MatrixEvent): () => string | null {
message = _t('%(senderDisplayName)s sent an image.', { senderDisplayName });
} else if (ev.getType() == "m.sticker") {
message = _t('%(senderDisplayName)s sent a sticker.', { senderDisplayName });
- } else message = senderDisplayName + ': ' + message;
+ } else {
+ // in this case, parse it as a plain text message
+ message = senderDisplayName + ': ' + message;
+ }
return message;
};
}
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 9554a50684..933cd58880 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -36,7 +36,6 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
// Whether the onClick of the avatar should be overridden to dispatch `Action.ViewUser`
viewUserOnClick?: boolean;
title?: string;
- forExport?: boolean;
}
interface IState {
@@ -90,8 +89,7 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
}
render() {
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- let { member, fallbackUserId, onClick, viewUserOnClick, forExport, ...otherProps } = this.props;
+ let { member, fallbackUserId, onClick, viewUserOnClick, ...otherProps } = this.props;
const userId = member ? member.userId : fallbackUserId;
if (viewUserOnClick) {
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index d2f1da861a..f474bcdb70 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -29,13 +29,15 @@ import {
textForFormat,
textForType,
} from "../../../utils/exportUtils/exportUtils";
-import { IFieldState, IValidationResult } from "../elements/Validation";
+import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
import HTMLExporter from "../../../utils/exportUtils/HtmlExport";
import JSONExporter from "../../../utils/exportUtils/JSONExport";
import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
import { useStateCallback } from "../../../hooks/useStateCallback";
import Exporter from "../../../utils/exportUtils/Exporter";
import Spinner from "../elements/Spinner";
+import Modal from "../../../Modal";
+import InfoDialog from "./InfoDialog";
interface IProps extends IDialogProps {
room: Room;
@@ -126,67 +128,85 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
await startExport();
};
- const onValidateSize = async ({
- value,
- }: Pick<IFieldState, "value">): Promise<IValidationResult> => {
- const parsedSize = parseFloat(value);
- const min = 1;
- const max = 2000;
+ const validateSize = withValidation({
+ rules: [
+ {
+ key: "required",
+ test({ value, allowEmpty }) {
+ return allowEmpty || !!value;
+ },
+ invalid: () => {
+ const min = 1;
+ const max = 10 ** 8;
+ return _t("Enter a number between %(min)s and %(max)s", {
+ min,
+ max,
+ });
+ },
+ }, {
+ key: "number",
+ test: ({ value }) => {
+ const parsedSize = parseFloat(value);
+ const min = 1;
+ const max = 2000;
+ return !(isNaN(parsedSize) || min > parsedSize || parsedSize > max);
+ },
+ invalid: () => {
+ const min = 1;
+ const max = 2000;
+ return _t(
+ "Size can only be a number between %(min)s MB and %(max)s MB",
+ { min, max },
+ );
+ },
+ },
+ ],
+ });
- if (isNaN(parsedSize)) {
- return { valid: false, feedback: _t("Size must be a number") };
- }
-
- if (min > parsedSize || parsedSize > max) {
- return {
- valid: false,
- feedback: _t(
- "Size can only be between %(min)s MB and %(max)s MB",
- { min, max },
- ),
- };
- }
-
- return {
- valid: true,
- feedback: _t("Enter size between %(min)s MB and %(max)s MB", {
- min,
- max,
- }),
- };
+ const onValidateSize = async (fieldState: IFieldState): Promise<IValidationResult> => {
+ const result = await validateSize(fieldState);
+ return result;
};
- const onValidateNumberOfMessages = async ({
- value,
- }: Pick<IFieldState, "value">): Promise<IValidationResult> => {
- const parsedSize = parseFloat(value);
- const min = 1;
- const max = 10 ** 8;
+ const validateNumberOfMessages = withValidation({
+ rules: [
+ {
+ key: "required",
+ test({ value, allowEmpty }) {
+ return allowEmpty || !!value;
+ },
+ invalid: () => {
+ const min = 1;
+ const max = 10 ** 8;
+ return _t("Enter a number between %(min)s and %(max)s", {
+ min,
+ max,
+ });
+ },
+ }, {
+ key: "number",
+ test: ({ value }) => {
+ const parsedSize = parseFloat(value);
+ const min = 1;
+ const max = 10 ** 8;
+ if (isNaN(parsedSize)) return false;
+ return !(min > parsedSize || parsedSize > max);
+ },
+ invalid: () => {
+ const min = 1;
+ const max = 10 ** 8;
+ return _t(
+ "Number of messages can only be a number between %(min)s and %(max)s",
+ { min, max },
+ );
+ },
+ },
+ ],
+ });
- if (isNaN(parsedSize)) {
- return {
- valid: false,
- feedback: _t("Number of messages must be a number"),
- };
- }
-
- if (min > parsedSize || parsedSize > max) {
- return {
- valid: false,
- feedback: _t(
- "Number of messages can only be between %(min)s and %(max)s",
- { min, max },
- ),
- };
- }
-
- return {
- valid: true,
- feedback: _t("Enter a number between %(min)s and %(max)s", {
- min,
- max,
- }),
- };
+ const onValidateNumberOfMessages = async (fieldState: IFieldState): Promise<IValidationResult> => {
+ const result = await validateNumberOfMessages(fieldState);
+ return result;
};
const onCancel = async () => {
@@ -236,42 +256,20 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
if (exportCancelled) {
// Display successful cancellation message
- return (
- <BaseDialog
- title={_t("Export Cancelled")}
- className="mx_ExportDialog"
- contentId="mx_Dialog_content"
- onFinished={onFinished}
- fixedWidth={true}
- >
- <p>{ _t("The export was cancelled successfully") }</p>
-
- <DialogButtons
- primaryButton={_t("Okay")}
- hasCancel={false}
- onPrimaryButtonClick={onFinished}
- />
- </BaseDialog>
- );
+ Modal.createTrackedDialog("Export Cancelled", "", InfoDialog, {
+ title: _t("Export Cancelled"),
+ description: <p>{ _t("The export was cancelled successfully") }</p>,
+ hasCloseButton: true,
+ });
+ return null;
} else if (exportSuccessful) {
// Display successful export message
- return (
- <BaseDialog
- title={_t("Export Successful")}
- className="mx_ExportDialog"
- contentId="mx_Dialog_content"
- onFinished={onFinished}
- fixedWidth={true}
- >
- <p>{ _t("Your messages were successfully exported") }</p>
-
- <DialogButtons
- primaryButton={_t("Okay")}
- hasCancel={false}
- onPrimaryButtonClick={onFinished}
- />
- </BaseDialog>
- );
+ Modal.createTrackedDialog("Export Successful", "", InfoDialog, {
+ title: _t("Export Successful"),
+ description: <p>{ _t("Your messages were successfully exported") }</p>,
+ hasCloseButton: true,
+ });
+ return null;
} else if (displayCancel) {
// Display cancel warning
return (
diff --git a/src/components/views/elements/ReplyThread.tsx b/src/components/views/elements/ReplyThread.tsx
index 2144cc602c..86330c1dbc 100644
--- a/src/components/views/elements/ReplyThread.tsx
+++ b/src/components/views/elements/ReplyThread.tsx
@@ -355,10 +355,10 @@ export default class ReplyThread extends React.Component<IProps, IState> {
} else if (this.props.forExport) {
const eventId = ReplyThread.getParentEventId(this.props.parentEv);
header = <p className="mx_ReplyThread_Export">
- { _t("In reply to <messageLink/>",
+ { _t("In reply to <a>this message</a>",
{},
- { messageLink: () => (
- <a className="mx_reply_anchor" href={`#${eventId}`} scroll-to={eventId}> { _t("this message") } </a>
+ { a: (sub) => (
+ <a className="mx_reply_anchor" href={`#${eventId}`} scroll-to={eventId}> { sub } </a>
),
})
}
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index 0a32e7f637..bc868c35b3 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -47,7 +47,7 @@ export default class CallEvent extends React.Component<IProps, IState> {
super(props);
this.state = {
- callState: this.props.callEventGrouper?.state,
+ callState: this.props.callEventGrouper.state,
silenced: false,
};
}
@@ -210,7 +210,7 @@ export default class CallEvent extends React.Component<IProps, IState> {
render() {
const event = this.props.mxEvent;
const sender = event.sender ? event.sender.name : event.getSender();
- const isVoice = this.props.callEventGrouper?.isVoice;
+ const isVoice = this.props.callEventGrouper.isVoice;
const callType = isVoice ? _t("Voice call") : _t("Video call");
const callState = this.state.callState;
const hangupReason = this.props.callEventGrouper.hangupReason;
diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx
index 1f079cd1e2..3675b14295 100644
--- a/src/components/views/messages/MFileBody.tsx
+++ b/src/components/views/messages/MFileBody.tsx
@@ -201,11 +201,7 @@ export default class MFileBody extends React.Component<IProps, IState> {
if (this.props.showGenericPlaceholder) {
placeholder = (
<AccessibleButton className="mx_MediaBody mx_MFileBody_info" onClick={this.onPlaceholderClick}>
- <span className="mx_MFileBody_info_icon">
- { this.props.forExport ?
- <img alt="Attachment" className="mx_export_attach_icon" src="icons/attach.svg" />
- : null }
- </span>
+ <span className="mx_MFileBody_info_icon" />
<TextWithTooltip tooltip={presentableTextForFile(this.content, _t("Attachment"), true)}>
<span className="mx_MFileBody_info_filename">
{ presentableTextForFile(this.content, _t("Attachment"), true, true) }
diff --git a/src/components/views/messages/RedactedBody.tsx b/src/components/views/messages/RedactedBody.tsx
index 65933cb801..4ec528fdf3 100644
--- a/src/components/views/messages/RedactedBody.tsx
+++ b/src/components/views/messages/RedactedBody.tsx
@@ -39,7 +39,6 @@ const RedactedBody = React.forwardRef<any, IBodyProps>(({ mxEvent, forExport },
return (
<span className="mx_RedactedBody" ref={ref} title={titleText}>
- { forExport ? <img alt={_t("Redacted")} className="mx_export_trash_icon" src="icons/trash.svg" /> : null }
{ text }
</span>
);
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 81f8375000..f05025ea32 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -725,6 +725,7 @@
"Invite to %(spaceName)s": "Invite to %(spaceName)s",
"Share your public space": "Share your public space",
"Unknown App": "Unknown App",
+ "Are you sure you want to exit during this export?": "Are you sure you want to exit during this export?",
"HTML": "HTML",
"JSON": "JSON",
"Plain Text": "Plain Text",
@@ -1972,7 +1973,6 @@
"<reactors/><reactedWith> reacted with %(content)s</reactedWith>": "<reactors/><reactedWith> reacted with %(content)s</reactedWith>",
"<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>": "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>",
"Message deleted on %(date)s": "Message deleted on %(date)s",
- "Redacted": "Redacted",
"%(senderDisplayName)s changed the avatar for %(roomName)s": "%(senderDisplayName)s changed the avatar for %(roomName)s",
"%(senderDisplayName)s removed the room avatar.": "%(senderDisplayName)s removed the room avatar.",
"%(senderDisplayName)s changed the room avatar to <img/>": "%(senderDisplayName)s changed the room avatar to <img/>",
@@ -2122,8 +2122,7 @@
"QR Code": "QR Code",
"Unable to load event that was replied to, it either does not exist or you do not have permission to view it.": "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.",
"<a>In reply to</a> <pill>": "<a>In reply to</a> <pill>",
- "In reply to <messageLink/>": "In reply to <messageLink/>",
- "this message": "this message",
+ "In reply to <a>this message</a>": "In reply to <a>this message</a>",
"Room address": "Room address",
"e.g. my-room": "e.g. my-room",
"Some characters not allowed": "Some characters not allowed",
@@ -2329,16 +2328,13 @@
"There was an error updating your community. The server is unable to process your request.": "There was an error updating your community. The server is unable to process your request.",
"Update community": "Update community",
"An error has occurred.": "An error has occurred.",
- "Size can only be between %(min)s MB and %(max)s MB": "Size can only be between %(min)s MB and %(max)s MB",
- "Enter size between %(min)s MB and %(max)s MB": "Enter size between %(min)s MB and %(max)s MB",
- "Number of messages must be a number": "Number of messages must be a number",
- "Number of messages can only be between %(min)s and %(max)s": "Number of messages can only be between %(min)s and %(max)s",
"Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
+ "Size can only be a number between %(min)s MB and %(max)s MB": "Size can only be a number between %(min)s MB and %(max)s MB",
+ "Number of messages can only be a number between %(min)s and %(max)s": "Number of messages can only be a number between %(min)s and %(max)s",
"Number of messages": "Number of messages",
"MB": "MB",
"Export Cancelled": "Export Cancelled",
"The export was cancelled successfully": "The export was cancelled successfully",
- "Okay": "Okay",
"Export Successful": "Export Successful",
"Your messages were successfully exported": "Your messages were successfully exported",
"Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 8c419ce657..0151836792 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -25,6 +25,7 @@ import { Direction, MatrixClient } from "matrix-js-sdk";
import { MutableRefObject } from "react";
import JSZip from "jszip";
import { saveAs } from "file-saver";
+import { _t } from "../../languageHandler";
type BlobFile = {
name: string;
@@ -54,7 +55,7 @@ export default abstract class Exporter {
protected onBeforeUnload(e: BeforeUnloadEvent): string {
e.preventDefault();
- return e.returnValue = "Are you sure you want to exit during this export?";
+ return e.returnValue = _t("Are you sure you want to exit during this export?");
}
protected updateProgress(progress: string, log = true, show = true): void {
@@ -70,7 +71,7 @@ export default abstract class Exporter {
this.files.push(file);
}
- protected async downloadZIP(): Promise<string | null> {
+ protected async downloadZIP(): Promise<string | void> {
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
const zip = new JSZip();
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 6cdbae6c48..3608cff1f2 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -31,7 +31,6 @@ import EventTile, { haveTileForEvent } from "../../components/views/rooms/EventT
import DateSeparator from "../../components/views/messages/DateSeparator";
import BaseAvatar from "../../components/views/avatars/BaseAvatar";
import exportJS from "!!raw-loader!./exportJS";
-import exportIcons from "./exportIcons";
import { ExportType } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
@@ -294,6 +293,7 @@ export default class HTMLExporter extends Exporter {
const mxc = mxEv.getContent().url || mxEv.getContent().file?.url;
eventTileMarkup = eventTileMarkup.split(mxc).join(filePath);
}
+ eventTileMarkup = eventTileMarkup.replace(/<span class="mx_MFileBody_info_icon".*?>.*?<\/span>/, '');
if (hasAvatar) {
eventTileMarkup = eventTileMarkup.replace(
encodeURI(this.getAvatarURL(mxEv)).replace(/&/g, '&'),
@@ -406,10 +406,6 @@ export default class HTMLExporter extends Exporter {
this.addFile("css/style.css", new Blob([exportCSS]));
this.addFile("js/script.js", new Blob([exportJS]));
- for (const iconName in exportIcons) {
- this.addFile(`icons/${iconName}`, new Blob([exportIcons[iconName]]));
- }
-
await this.downloadZIP();
const exportEnd = performance.now();
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 1a3a575f07..f19bc1004b 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -16,33 +16,31 @@ limitations under the License.
/* eslint-disable max-len, camelcase */
-declare const __webpack_hash__: string;
-
import ThemeWatcher from "../../settings/watchers/ThemeWatcher";
const getExportCSS = async (): Promise<string> => {
const theme = new ThemeWatcher().getEffectiveTheme();
- const hash = __webpack_hash__;
-
- const bundle = await fetch(`bundles/${hash}/bundle.css`);
- const bundleCSS = await bundle.text();
- let themeCSS: string;
- if (theme === 'light') {
- const res = await fetch(`bundles/${hash}/theme-light.css`);
- themeCSS = await res.text();
- } else {
- const res = await fetch(`bundles/${hash}/theme-dark.css`);
- themeCSS = await res.text();
+ const stylesheets: string[] = [];
+ document.querySelectorAll('link[rel="stylesheet"]').forEach((e: any) => {
+ if (e.href.endsWith("bundle.css") || e.href.endsWith(`theme-${theme}.css`)) {
+ stylesheets.push(e.href);
+ }
+ });
+ let CSS: string;
+ for (const stylesheet of stylesheets) {
+ const res = await fetch(stylesheet);
+ const innerText = await res.text();
+ CSS += innerText;
}
const fontFaceRegex = /@font-face {.*?}/sg;
- themeCSS = themeCSS.replace(fontFaceRegex, '');
- themeCSS = themeCSS.replace(
+ CSS = CSS.replace(fontFaceRegex, '');
+ CSS = CSS.replace(
/font-family: Inter/g,
`font-family: -apple-system, BlinkMacSystemFont, avenir next,
avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif`,
);
- themeCSS = themeCSS.replace(
+ CSS = CSS.replace(
/font-family: Inconsolata/g,
"font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace",
);
@@ -148,6 +146,10 @@ const getExportCSS = async (): Promise<string> => {
top: 1px;
left: 0;
}
+
+ .mx_RedactedBody {
+ padding-left: unset;
+ }
img {
white-space: nowrap;
@@ -155,7 +157,7 @@ const getExportCSS = async (): Promise<string> => {
}
`;
- return themeCSS + bundleCSS + customCSS;
+ return CSS + customCSS;
};
export default getExportCSS;
diff --git a/src/utils/exportUtils/exportIcons.ts b/src/utils/exportUtils/exportIcons.ts
deleted file mode 100644
index 7a8264f7e9..0000000000
--- a/src/utils/exportUtils/exportIcons.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-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.
-*/
-
-import trashSVG from "!!raw-loader!../../../res/img/element-icons/trashcan.svg";
-import attachSVG from "!!raw-loader!../../../res/img/element-icons/room/composer/attach.svg";
-
-export default {
- "trash.svg": trashSVG,
- "attach.svg": attachSVG,
-};
diff --git a/test/utils/export-test.tsx b/test/utils/export-test.tsx
index c4d9b43765..66436da9c5 100644
--- a/test/utils/export-test.tsx
+++ b/test/utils/export-test.tsx
@@ -16,7 +16,7 @@ limitations under the License.
import { IContent, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk";
import { MatrixClientPeg } from "../../src/MatrixClientPeg";
-import { textForFormat, IExportOptions, ExportType } from "../../src/utils/exportUtils/exportUtils";
+import { IExportOptions, ExportType, ExportFormat } from "../../src/utils/exportUtils/exportUtils";
import '../skinned-sdk';
import PlainTextExporter from "../../src/utils/exportUtils/PlainTextExport";
import HTMLExporter from "../../src/utils/exportUtils/HtmlExport";
@@ -73,9 +73,60 @@ describe('export', function() {
}
const mockRoom = createRoom();
+ const ts0 = Date.now();
+
+ function mkRedactedEvent(i = 0) {
+ return new MatrixEvent({
+ type: "m.room.message",
+ sender: MY_USER_ID,
+ content: {},
+ unsigned: {
+ "age": 72,
+ "transaction_id": "m1212121212.23",
+ "redacted_because": {
+ "content": {},
+ "origin_server_ts": ts0 + i*1000,
+ "redacts": "$9999999999999999999999999999999999999999998",
+ "sender": "@me:here",
+ "type": "m.room.redaction",
+ "unsigned": {
+ "age": 94,
+ "transaction_id": "m1111111111.1",
+ },
+ "event_id": "$9999999999999999999999999999999999999999998",
+ "room_id": mockRoom.roomId,
+ },
+ },
+ event_id: "$9999999999999999999999999999999999999999999",
+ room_id: mockRoom.roomId,
+ });
+ }
+
+ function mkFileEvent() {
+ return new MatrixEvent({
+ "content": {
+ "body": "index.html",
+ "info": {
+ "mimetype": "text/html",
+ "size": 31613,
+ },
+ "msgtype": "m.file",
+ "url": "mxc://test.org",
+ },
+ "origin_server_ts": 1628872988364,
+ "sender": MY_USER_ID,
+ "type": "m.room.message",
+ "unsigned": {
+ "age": 266,
+ "transaction_id": "m99999999.2",
+ },
+ "event_id": "$99999999999999999999",
+ "room_id": mockRoom.roomId,
+ });
+ }
+
function mkEvents() {
const matrixEvents = [];
- const ts0 = Date.now();
let i: number;
// plain text
for (i = 0; i < 10; i++) {
@@ -134,30 +185,7 @@ describe('export', function() {
}));
// redacted events
for (i = 0; i < 10; i++) {
- matrixEvents.push(new MatrixEvent({
- type: "m.room.message",
- sender: MY_USER_ID,
- content: {},
- unsigned: {
- "age": 72,
- "transaction_id": "m1212121212.23",
- "redacted_because": {
- "content": {},
- "origin_server_ts": ts0 + i*1000,
- "redacts": "$9999999999999999999999999999999999999999998",
- "sender": "@me:here",
- "type": "m.room.redaction",
- "unsigned": {
- "age": 94,
- "transaction_id": "m1111111111.1",
- },
- "event_id": "$9999999999999999999999999999999999999999998",
- "room_id": mockRoom.roomId,
- },
- },
- event_id: "$9999999999999999999999999999999999999999999",
- room_id: mockRoom.roomId,
- }));
+ matrixEvents.push(mkRedactedEvent(i));
}
return matrixEvents;
}
@@ -165,10 +193,22 @@ describe('export', function() {
const events: MatrixEvent[] = mkEvents();
it('checks if the export format is valid', function() {
- expect(textForFormat('HTML')).toBeTruthy();
- expect(textForFormat('JSON')).toBeTruthy();
- expect(textForFormat('PLAIN_TEXT')).toBeTruthy();
- expect(() => textForFormat('PDF')).toThrowError("Unknown format");
+ function isValidFormat(format: string): boolean {
+ const options: string[] = Object.values(ExportFormat);
+ return options.includes(format);
+ }
+ expect(isValidFormat("Html")).toBeTruthy();
+ expect(isValidFormat("Json")).toBeTruthy();
+ expect(isValidFormat("PlainText")).toBeTruthy();
+ expect(isValidFormat("Pdf")).toBeFalsy();
+ });
+
+ it("checks if the icons' html corresponds to export regex", function() {
+ const exporter = new HTMLExporter(mockRoom, ExportType.Beginning, mockExportOptions, null);
+ const fileRegex = /<span class="mx_MFileBody_info_icon">.*?<\/span>/;
+ expect(fileRegex.test(
+ renderToString(exporter.getEventTile(mkFileEvent(), true))),
+ ).toBeTruthy();
});
it('checks if the export options are valid', function() {
From 31c9e5962cc52cc1e4672a81ddb4b0a618d83a44 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 14 Aug 2021 00:03:02 +0530
Subject: [PATCH 162/313] Move export dialog to async-components
---
.../views/dialogs/ExportDialog.tsx | 30 +++++++++----------
.../views/right_panel/RoomSummaryCard.tsx | 3 +-
src/utils/exportUtils/Exporter.ts | 5 ++--
src/utils/exportUtils/HtmlExport.tsx | 6 ++--
src/utils/exportUtils/JSONExport.ts | 4 +--
src/utils/exportUtils/PlainTextExport.ts | 4 +--
src/utils/exportUtils/exportCSS.ts | 28 ++---------------
7 files changed, 28 insertions(+), 52 deletions(-)
rename src/{components => async-components}/views/dialogs/ExportDialog.tsx (93%)
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/async-components/views/dialogs/ExportDialog.tsx
similarity index 93%
rename from src/components/views/dialogs/ExportDialog.tsx
rename to src/async-components/views/dialogs/ExportDialog.tsx
index f474bcdb70..b61d7975bf 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/async-components/views/dialogs/ExportDialog.tsx
@@ -17,27 +17,27 @@ limitations under the License.
import React, { useRef, useState } from "react";
import { Room } from "matrix-js-sdk/src";
import { _t } from "../../../languageHandler";
-import { IDialogProps } from "./IDialogProps";
-import BaseDialog from "./BaseDialog";
-import DialogButtons from "../elements/DialogButtons";
-import Field from "../elements/Field";
-import StyledRadioGroup from "../elements/StyledRadioGroup";
-import StyledCheckbox from "../elements/StyledCheckbox";
+import { IDialogProps } from "../../../components/views/dialogs/IDialogProps";
+import BaseDialog from "../../../components/views/dialogs/BaseDialog";
+import DialogButtons from "../../../components/views/elements/DialogButtons";
+import Field from "../../../components/views/elements/Field";
+import StyledRadioGroup from "../../../components/views/elements/StyledRadioGroup";
+import StyledCheckbox from "../../../components/views/elements/StyledCheckbox";
import {
ExportFormat,
ExportType,
textForFormat,
textForType,
} from "../../../utils/exportUtils/exportUtils";
-import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
+import withValidation, { IFieldState, IValidationResult } from "../../../components/views/elements/Validation";
import HTMLExporter from "../../../utils/exportUtils/HtmlExport";
import JSONExporter from "../../../utils/exportUtils/JSONExport";
import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
import { useStateCallback } from "../../../hooks/useStateCallback";
import Exporter from "../../../utils/exportUtils/Exporter";
-import Spinner from "../elements/Spinner";
+import Spinner from "../../../components/views/elements/Spinner";
import Modal from "../../../Modal";
-import InfoDialog from "./InfoDialog";
+import InfoDialog from "../../../components/views/dialogs/InfoDialog";
interface IProps extends IDialogProps {
room: Room;
@@ -52,7 +52,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
const sizeLimitRef = useRef<Field>();
const messageCountRef = useRef<Field>();
- const exportProgressRef = useRef<HTMLParagraphElement>();
+ const [exportProgressText, setExportProgressText] = useState("Processing...");
const [displayCancel, setCancelWarning] = useState(false);
const [exportCancelled, setExportCancelled] = useState(false);
const [exportSuccessful, setExportSuccessful] = useState(false);
@@ -78,7 +78,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
ExportType[exportType],
exportOptions,
- exportProgressRef,
+ setExportProgressText,
),
);
break;
@@ -88,7 +88,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
ExportType[exportType],
exportOptions,
- exportProgressRef,
+ setExportProgressText,
),
);
break;
@@ -98,7 +98,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
ExportType[exportType],
exportOptions,
- exportProgressRef,
+ setExportProgressText,
),
);
break;
@@ -368,8 +368,8 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
{ isExporting ? (
<div className="mx_ExportDialog_progress">
<Spinner w={24} h={24} />
- <p ref={exportProgressRef}>
- { _t("Processing...") }
+ <p>
+ { exportProgressText }
</p>
<DialogButtons
primaryButton={_t("Cancel")}
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index c1b4112423..b59d664aa2 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -234,8 +234,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
};
const onRoomExportClick = async () => {
- const { default: ExportDialog } = await import("../dialogs/ExportDialog");
-
+ const { default: ExportDialog } = await import("../../../async-components/views/dialogs/ExportDialog");
Modal.createTrackedDialog('export room dialog', '', ExportDialog, {
room,
});
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 0151836792..7254bdc3a4 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -22,7 +22,6 @@ import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
import { Direction, MatrixClient } from "matrix-js-sdk";
-import { MutableRefObject } from "react";
import JSZip from "jszip";
import { saveAs } from "file-saver";
import { _t } from "../../languageHandler";
@@ -41,7 +40,7 @@ export default abstract class Exporter {
protected room: Room,
protected exportType: ExportType,
protected exportOptions: IExportOptions,
- protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
+ protected setProgressText: React.Dispatch<React.SetStateAction<string>>,
) {
if (exportOptions.maxSize < 1 * 1024 * 1024|| // Less than 1 MB
exportOptions.maxSize > 2000 * 1024 * 1024|| // More than ~ 2 GB
@@ -60,7 +59,7 @@ export default abstract class Exporter {
protected updateProgress(progress: string, log = true, show = true): void {
if (log) console.log(progress);
- if (show && this.exportProgressRef.current) this.exportProgressRef.current.innerText = progress;
+ if (show) this.setProgressText(progress);
}
protected addFile(filePath: string, blob: Blob): void {
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 3608cff1f2..39fa762596 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React, { MutableRefObject } from "react";
+import React from "react";
import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
@@ -47,9 +47,9 @@ export default class HTMLExporter extends Exporter {
room: Room,
exportType: ExportType,
exportOptions: IExportOptions,
- exportProgressRef: MutableRefObject<HTMLParagraphElement>,
+ setProgressText: React.Dispatch<React.SetStateAction<string>>,
) {
- super(room, exportType, exportOptions, exportProgressRef);
+ super(room, exportType, exportOptions, setProgressText);
this.avatars = new Map<string, boolean>();
this.permalinkCreator = new RoomPermalinkCreator(this.room);
this.totalSize = 0;
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index a2273ad918..fe9b81fd0a 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -32,9 +32,9 @@ export default class JSONExporter extends Exporter {
room: Room,
exportType: ExportType,
exportOptions: IExportOptions,
- exportProgressRef: MutableRefObject<HTMLParagraphElement>,
+ setProgressText: React.Dispatch<React.SetStateAction<string>>,
) {
- super(room, exportType, exportOptions, exportProgressRef);
+ super(room, exportType, exportOptions, setProgressText);
}
protected createJSONString(): string {
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index 23ed6c7bbd..c95866ce9b 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -33,9 +33,9 @@ export default class PlainTextExporter extends Exporter {
room: Room,
exportType: ExportType,
exportOptions: IExportOptions,
- exportProgressRef: MutableRefObject<HTMLParagraphElement>,
+ setProgressText: React.Dispatch<React.SetStateAction<string>>,
) {
- super(room, exportType, exportOptions, exportProgressRef);
+ super(room, exportType, exportOptions, setProgressText);
this.totalSize = 0;
this.mediaOmitText = !this.exportOptions.attachmentsIncluded
? _t("Media omitted")
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index f19bc1004b..67795830a2 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -101,28 +101,16 @@ const getExportCSS = async (): Promise<string> => {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
-
- .mx_MFileBody_info .mx_MFileBody_info_icon img.mx_export_attach_icon {
- content: '';
- background-color: ${theme == 'light' ? "#ffffff": "inherit"};
- width: 13px;
- height: 15px;
- position: absolute;
- top: 8px;
- left: 9px;
- }
-
+
* {
scroll-behavior: smooth !important;
}
-
.mx_Export_EventWrapper:target {
background: ${theme == 'light' ? "white" : "#15191E"};
animation: mx_event_highlight_animation 2s linear;
}
-
@keyframes mx_event_highlight_animation {
0%,100% {
background: ${theme == 'light' ? "white" : "#15191E"};
@@ -131,26 +119,16 @@ const getExportCSS = async (): Promise<string> => {
background: ${theme == 'light' ? "#e3e2df" : "#21262c"};
}
}
-
+
.mx_ReplyThread_Export {
margin-top: -5px;
margin-bottom: 5px;
}
-
- .mx_RedactedBody img.mx_export_trash_icon {
- height: 14px;
- width: 14px;
- background-color: ${theme == 'light' ? "#ffffff": "inherit"};
- content: '';
- position: absolute;
- top: 1px;
- left: 0;
- }
.mx_RedactedBody {
padding-left: unset;
}
-
+
img {
white-space: nowrap;
overflow: hidden;
From 5c78acfca4fb6af193f7479a722c3054b58c500c Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 14 Aug 2021 00:07:13 +0530
Subject: [PATCH 163/313] Remove forExport prop for MemberAvatar
---
src/components/views/rooms/EventTile.tsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 6e94a17388..9dc9f8d484 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -961,7 +961,6 @@ export default class EventTile extends React.Component<IProps, IState> {
avatar = (
<div className="mx_EventTile_avatar">
<MemberAvatar
- forExport={this.props.forExport}
member={member}
width={avatarSize}
height={avatarSize}
From 3efa699b88e2bd3a4e4f29a6fbbe6f7febe4c887 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 14 Aug 2021 00:14:57 +0530
Subject: [PATCH 164/313] Delint
---
src/components/views/messages/MAudioBody.tsx | 1 +
src/components/views/messages/MFileBody.tsx | 1 +
src/components/views/messages/MImageBody.tsx | 3 +-
src/components/views/messages/MVideoBody.tsx | 1 +
src/i18n/strings/en_EN.json | 37 ++++++++++----------
src/utils/exportUtils/JSONExport.ts | 1 -
src/utils/exportUtils/PlainTextExport.ts | 1 -
7 files changed, 23 insertions(+), 22 deletions(-)
diff --git a/src/components/views/messages/MAudioBody.tsx b/src/components/views/messages/MAudioBody.tsx
index 836b1eb79a..6cbd2f2b70 100644
--- a/src/components/views/messages/MAudioBody.tsx
+++ b/src/components/views/messages/MAudioBody.tsx
@@ -86,6 +86,7 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
if (this.props.forExport) {
const content = this.props.mxEvent.getContent();
+ // During export, the content url will point to the MSC, which will later point to a local url
const contentUrl = content.file?.url || content.url;
return (
<span className="mx_MAudioBody">
diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx
index 3675b14295..49c148c56c 100644
--- a/src/components/views/messages/MFileBody.tsx
+++ b/src/components/views/messages/MFileBody.tsx
@@ -213,6 +213,7 @@ export default class MFileBody extends React.Component<IProps, IState> {
if (this.props.forExport) {
const content = this.props.mxEvent.getContent();
+ // During export, the content url will point to the MSC, which will later point to a local url
return <span className="mx_MFileBody">
<a href={content.file?.url || content.url}>
{ placeholder }
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index ae82c57a5e..2d402bdc21 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -164,7 +164,8 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
protected getContentUrl(): string {
const content: IMediaEventContent = this.props.mxEvent.getContent();
- if (this.props.forExport) return content.url || content.file.url;
+ // During export, the content url will point to the MSC, which will later point to a local url
+ if (this.props.forExport) return content.url || content.file?.url;
if (this.media.isEncrypted) {
return this.state.decryptedUrl;
} else {
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 3239482515..8cb03bfa7b 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -78,6 +78,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
private getContentUrl(): string|null {
const content = this.props.mxEvent.getContent<IMediaEventContent>();
+ // During export, the content url will point to the MSC, which will later point to a local url
if (this.props.forExport) return content.file?.url || content.url;
const media = mediaFromContent(content);
if (media.isEncrypted) {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 090ee23ba8..d62871af23 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2329,25 +2329,6 @@
"There was an error updating your community. The server is unable to process your request.": "There was an error updating your community. The server is unable to process your request.",
"Update community": "Update community",
"An error has occurred.": "An error has occurred.",
- "Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
- "Size can only be a number between %(min)s MB and %(max)s MB": "Size can only be a number between %(min)s MB and %(max)s MB",
- "Number of messages can only be a number between %(min)s and %(max)s": "Number of messages can only be a number between %(min)s and %(max)s",
- "Number of messages": "Number of messages",
- "MB": "MB",
- "Export Cancelled": "Export Cancelled",
- "The export was cancelled successfully": "The export was cancelled successfully",
- "Export Successful": "Export Successful",
- "Your messages were successfully exported": "Your messages were successfully exported",
- "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
- "Stop": "Stop",
- "Exporting your data": "Exporting your data",
- "Export Chat": "Export Chat",
- "Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
- "Format": "Format",
- "Size Limit": "Size Limit",
- "Include Attachments": "Include Attachments",
- "Processing...": "Processing...",
- "Export": "Export",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
"Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.",
@@ -3048,6 +3029,24 @@
"Space Autocomplete": "Space Autocomplete",
"Users": "Users",
"User Autocomplete": "User Autocomplete",
+ "Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
+ "Size can only be a number between %(min)s MB and %(max)s MB": "Size can only be a number between %(min)s MB and %(max)s MB",
+ "Number of messages can only be a number between %(min)s and %(max)s": "Number of messages can only be a number between %(min)s and %(max)s",
+ "Number of messages": "Number of messages",
+ "MB": "MB",
+ "Export Cancelled": "Export Cancelled",
+ "The export was cancelled successfully": "The export was cancelled successfully",
+ "Export Successful": "Export Successful",
+ "Your messages were successfully exported": "Your messages were successfully exported",
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
+ "Stop": "Stop",
+ "Exporting your data": "Exporting your data",
+ "Export Chat": "Export Chat",
+ "Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
+ "Format": "Format",
+ "Size Limit": "Size Limit",
+ "Include Attachments": "Include Attachments",
+ "Export": "Export",
"We'll store an encrypted copy of your keys on our server. Secure your backup with a Security Phrase.": "We'll store an encrypted copy of your keys on our server. Secure your backup with a Security Phrase.",
"For maximum security, this should be different from your account password.": "For maximum security, this should be different from your account password.",
"Enter a Security Phrase": "Enter a Security Phrase",
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index fe9b81fd0a..8166920b6a 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -22,7 +22,6 @@ import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { ExportType } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import { EventType } from "matrix-js-sdk/src/@types/event";
-import { MutableRefObject } from "react";
export default class JSONExporter extends Exporter {
protected totalSize = 0;
diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts
index c95866ce9b..8e3ba81c4e 100644
--- a/src/utils/exportUtils/PlainTextExport.ts
+++ b/src/utils/exportUtils/PlainTextExport.ts
@@ -23,7 +23,6 @@ import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { ExportType } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import { textForEvent } from "../../TextForEvent";
-import { MutableRefObject } from "react";
export default class PlainTextExporter extends Exporter {
protected totalSize: number;
From 5dbc1034865328b0bac7b9de6086160807bbe43e Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Sat, 14 Aug 2021 11:50:13 +0530
Subject: [PATCH 165/313] Modify font-regex and declare json type
---
src/utils/exportUtils/JSONExport.ts | 2 +-
src/utils/exportUtils/exportCSS.ts | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts
index 8166920b6a..4d862e69e3 100644
--- a/src/utils/exportUtils/JSONExport.ts
+++ b/src/utils/exportUtils/JSONExport.ts
@@ -25,7 +25,7 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
export default class JSONExporter extends Exporter {
protected totalSize = 0;
- protected messages: any[] = [];
+ protected messages: Record<string, any>[] = [];
constructor(
room: Room,
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 67795830a2..965c7d775a 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -36,7 +36,7 @@ const getExportCSS = async (): Promise<string> => {
CSS = CSS.replace(fontFaceRegex, '');
CSS = CSS.replace(
- /font-family: Inter/g,
+ /font-family: (Inter|'Inter')/g,
`font-family: -apple-system, BlinkMacSystemFont, avenir next,
avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif`,
);
From 33bc26f0390afb98c76a5ec19822f1a8b7ada4da Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 17 Aug 2021 20:04:28 +0530
Subject: [PATCH 166/313] Change summary tiles order
---
src/components/views/right_panel/RoomSummaryCard.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index b59d664aa2..86106f3018 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -280,15 +280,15 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
<Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
{ _t("Show files") }
</Button>
+ <Button className="mx_RoomSummaryCard_icon_export" onClick={onRoomExportClick}>
+ { _t("Export chat") }
+ </Button>
<Button className="mx_RoomSummaryCard_icon_share" onClick={onShareRoomClick}>
{ _t("Share room") }
</Button>
<Button className="mx_RoomSummaryCard_icon_settings" onClick={onRoomSettingsClick}>
{ _t("Room settings") }
</Button>
- <Button className="mx_RoomSummaryCard_icon_export" onClick={onRoomExportClick}>
- { _t("Export chat") }
- </Button>
</Group>
{ SettingsStore.getValue(UIFeature.Widgets) && <AppsSection room={room} /> }
From 4dae737922c11473e1bb5d9253860defe1ec561e Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 17 Aug 2021 20:06:09 +0530
Subject: [PATCH 167/313] i18n
---
src/i18n/strings/en_EN.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index d62871af23..53654fef80 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1818,9 +1818,9 @@
"%(count)s people|other": "%(count)s people",
"%(count)s people|one": "%(count)s person",
"Show files": "Show files",
+ "Export chat": "Export chat",
"Share room": "Share room",
"Room settings": "Room settings",
- "Export chat": "Export chat",
"Trusted": "Trusted",
"Not trusted": "Not trusted",
"%(count)s verified sessions|other": "%(count)s verified sessions",
From 7bad0b99d1812adeab376ed8b474ed451daa2cb7 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 18 Aug 2021 08:37:10 +0530
Subject: [PATCH 168/313] Fix links, header and export text
---
src/components/views/rooms/EventTile.tsx | 20 ++++++++-------
src/utils/exportUtils/HtmlExport.tsx | 31 ++++++++++++++++++------
src/utils/exportUtils/exportCSS.ts | 2 +-
3 files changed, 36 insertions(+), 17 deletions(-)
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 9dc9f8d484..b4a2e46feb 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -443,16 +443,18 @@ export default class EventTile extends React.Component<IProps, IState> {
componentDidMount() {
this.suppressReadReceiptAnimation = false;
const client = this.context;
- client.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
- client.on("userTrustStatusChanged", this.onUserVerificationChanged);
- this.props.mxEvent.on("Event.decrypted", this.onDecrypted);
- if (this.props.showReactions) {
- this.props.mxEvent.on("Event.relationsCreated", this.onReactionsCreated);
- }
+ if (!this.props.forExport) {
+ client.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
+ client.on("userTrustStatusChanged", this.onUserVerificationChanged);
+ this.props.mxEvent.on("Event.decrypted", this.onDecrypted);
+ if (this.props.showReactions) {
+ this.props.mxEvent.on("Event.relationsCreated", this.onReactionsCreated);
+ }
- if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
- client.on("Room.receipt", this.onRoomReceipt);
- this.isListeningForReceipts = true;
+ if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
+ client.on("Room.receipt", this.onRoomReceipt);
+ this.isListeningForReceipts = true;
+ }
}
}
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 39fa762596..124b390293 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -15,17 +15,18 @@ limitations under the License.
*/
import React from "react";
+import ReactDOM from "react-dom";
import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { renderToStaticMarkup } from "react-dom/server";
+import { renderToStaticMarkup, renderToString } from "react-dom/server";
import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
import { formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
import { RoomPermalinkCreator } from "../permalinks/Permalinks";
import { _t } from "../../languageHandler";
-import { EventType } from "matrix-js-sdk/src/@types/event";
+import { EventType, MsgType } from "matrix-js-sdk/src/@types/event";
import * as Avatar from "../../Avatar";
import EventTile, { haveTileForEvent } from "../../components/views/rooms/EventTile";
import DateSeparator from "../../components/views/messages/DateSeparator";
@@ -115,7 +116,7 @@ export default class HTMLExporter extends Exporter {
{ exporterName ? (
<>
<b>{ exporterName }</b>
- { exporter }
+ { " (" + exporter + ")" }
</>
) : (
<b>{ exporter }</b>
@@ -263,6 +264,7 @@ export default class HTMLExporter extends Exporter {
replacingEventId={mxEv.replacingEventId()}
forExport={true}
readReceipts={null}
+ alwaysShowTimestamps={true}
readReceiptMap={null}
showUrlPreview={false}
checkUnmounting={() => false}
@@ -285,10 +287,26 @@ export default class HTMLExporter extends Exporter {
protected async getEventTileMarkup(mxEv: MatrixEvent, continuation: boolean, filePath?: string) {
const hasAvatar = !!this.getAvatarURL(mxEv);
if (hasAvatar) await this.saveAvatarIfNeeded(mxEv);
+ const EventTile = this.getEventTile(mxEv, continuation);
+ let eventTileMarkup: string;
- const eventTile = this.getEventTile(mxEv, continuation);
+ if (
+ mxEv.getContent().msgtype == MsgType.Emote ||
+ mxEv.getContent().msgtype == MsgType.Notice ||
+ mxEv.getContent().msgtype === MsgType.Text
+ ) {
+ // to linkify textual events, we'll need lifecycle methods which won't be invoked in renderToString
+ // So, we'll have to render the component into a temporary root element
+ const tempRoot = document.createElement('div');
+ ReactDOM.render(
+ EventTile,
+ tempRoot,
+ );
+ eventTileMarkup = tempRoot.innerHTML;
+ } else {
+ eventTileMarkup = renderToString(EventTile);
+ }
- let eventTileMarkup = renderToStaticMarkup(eventTile);
if (filePath) {
const mxc = mxEv.getContent().url || mxEv.getContent().file?.url;
eventTileMarkup = eventTileMarkup.split(mxc).join(filePath);
@@ -390,8 +408,7 @@ export default class HTMLExporter extends Exporter {
}
public async export() {
- this.updateProgress("Starting export process", true, false);
- this.updateProgress("Fetching events");
+ this.updateProgress("Starting export...");
const fetchStart = performance.now();
const res = await this.getRequiredEvents();
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 965c7d775a..7f83711fc2 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -121,7 +121,7 @@ const getExportCSS = async (): Promise<string> => {
}
.mx_ReplyThread_Export {
- margin-top: -5px;
+ margin-top: 0px;
margin-bottom: 5px;
}
From fea9f4a4df552f2e07915eb5a4ac83a00a4a3a54 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 18 Aug 2021 08:38:39 +0530
Subject: [PATCH 169/313] Use staticMarkup instead of string
---
src/utils/exportUtils/HtmlExport.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 124b390293..1c39dfe844 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -20,7 +20,7 @@ import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { renderToStaticMarkup, renderToString } from "react-dom/server";
+import { renderToStaticMarkup } from "react-dom/server";
import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
import { formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
@@ -304,7 +304,7 @@ export default class HTMLExporter extends Exporter {
);
eventTileMarkup = tempRoot.innerHTML;
} else {
- eventTileMarkup = renderToString(EventTile);
+ eventTileMarkup = renderToStaticMarkup(EventTile);
}
if (filePath) {
From 98b0642b65fcb5358ddf24a7494620d91c2aaace Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 20 Aug 2021 15:01:48 +0530
Subject: [PATCH 170/313] Split html into multiple files to improve scroll
performance
---
src/async-components/views/dialogs/ExportDialog.tsx | 6 ++++++
src/utils/exportUtils/HtmlExport.tsx | 10 ++++++----
2 files changed, 12 insertions(+), 4 deletions(-)
diff --git a/src/async-components/views/dialogs/ExportDialog.tsx b/src/async-components/views/dialogs/ExportDialog.tsx
index b61d7975bf..40c9db0a67 100644
--- a/src/async-components/views/dialogs/ExportDialog.tsx
+++ b/src/async-components/views/dialogs/ExportDialog.tsx
@@ -260,6 +260,9 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
title: _t("Export Cancelled"),
description: <p>{ _t("The export was cancelled successfully") }</p>,
hasCloseButton: true,
+ onFinished: () => {
+ setExportCancelled(false);
+ },
});
return null;
} else if (exportSuccessful) {
@@ -268,6 +271,9 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
title: _t("Export Successful"),
description: <p>{ _t("Your messages were successfully exported") }</p>,
hasCloseButton: true,
+ onFinished: () => {
+ setExportSuccessful(false);
+ },
});
return null;
} else if (displayCancel) {
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 1c39dfe844..5f8413fad8 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -387,10 +387,10 @@ export default class HTMLExporter extends Exporter {
return eventTile;
}
- protected async createHTML(events: MatrixEvent[]) {
+ protected async createHTML(events: MatrixEvent[], start: number) {
let content = "";
let prevEvent = null;
- for (let i = 0; i < events.length; i++) {
+ for (let i = start; i < Math.min(start + 1000, events.length); i++) {
const event = events[i];
this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp();
@@ -417,9 +417,11 @@ export default class HTMLExporter extends Exporter {
this.updateProgress(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`, true, false);
this.updateProgress("Creating HTML...");
- const html = await this.createHTML(res);
+ for (let page = 0; page < res.length / 1000; page++) {
+ const html = await this.createHTML(res, page * 1000);
+ this.addFile(`messages${page ? page + 1 : ""}.html`, new Blob([html]));
+ }
const exportCSS = await getExportCSS();
- this.addFile("index.html", new Blob([html]));
this.addFile("css/style.css", new Blob([exportCSS]));
this.addFile("js/script.js", new Blob([exportJS]));
From b49c8ebf601ececb2f79027b220c98e17ecb4650 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 20 Aug 2021 17:12:52 +0530
Subject: [PATCH 171/313] Increase max_width for exported html
---
src/utils/exportUtils/exportCSS.ts | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 7f83711fc2..46024590a7 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -133,6 +133,10 @@ const getExportCSS = async (): Promise<string> => {
white-space: nowrap;
overflow: hidden;
}
+
+ .mx_MatrixChat{
+ max_width: 100%;
+ }
`;
return CSS + customCSS;
From 54cd385e6d5bf07c0e47dee2e448e9d9c4f14245 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 27 Aug 2021 13:31:43 +0200
Subject: [PATCH 172/313] Improve AUX panel behaviour
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
res/css/structures/_RoomView.scss | 1 -
src/components/structures/RoomView.tsx | 34 -------------------
src/components/views/rooms/AuxPanel.tsx | 32 ++---------------
src/components/views/voip/CallViewForRoom.tsx | 7 +---
4 files changed, 3 insertions(+), 71 deletions(-)
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index 86c2efeb4a..fd9c4a14fc 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -89,7 +89,6 @@ limitations under the License.
margin: 0px auto;
overflow: auto;
- flex: 0 0 auto;
}
.mx_RoomView_auxPanel_fullHeight {
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 474b99262d..ef5600eed2 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -78,7 +78,6 @@ import { objectHasDiff } from "../../utils/objects";
import SpaceRoomView from "./SpaceRoomView";
import { IOpts } from "../../createRoom";
import { replaceableComponent } from "../../utils/replaceableComponent";
-import UIStore from "../../stores/UIStore";
import EditorStateTransfer from "../../utils/EditorStateTransfer";
import { throttle } from "lodash";
import ErrorDialog from '../views/dialogs/ErrorDialog';
@@ -156,7 +155,6 @@ export interface IState {
// used by componentDidUpdate to avoid unnecessary checks
atEndOfLiveTimelineInit: boolean;
showTopUnreadMessagesBar: boolean;
- auxPanelMaxHeight?: number;
statusBarVisible: boolean;
// We load this later by asking the js-sdk to suggest a version for us.
// This object is the result of Room#getRecommendedVersion()
@@ -563,10 +561,6 @@ export default class RoomView extends React.Component<IProps, IState> {
});
window.addEventListener('beforeunload', this.onPageUnload);
- if (this.props.resizeNotifier) {
- this.props.resizeNotifier.on("middlePanelResized", this.onResize);
- }
- this.onResize();
}
shouldComponentUpdate(nextProps, nextState) {
@@ -654,9 +648,6 @@ export default class RoomView extends React.Component<IProps, IState> {
}
window.removeEventListener('beforeunload', this.onPageUnload);
- if (this.props.resizeNotifier) {
- this.props.resizeNotifier.removeListener("middlePanelResized", this.onResize);
- }
// Remove RoomStore listener
if (this.roomStoreToken) {
@@ -1617,28 +1608,6 @@ export default class RoomView extends React.Component<IProps, IState> {
};
}
- private onResize = () => {
- // It seems flexbox doesn't give us a way to constrain the auxPanel height to have
- // a minimum of the height of the video element, whilst also capping it from pushing out the page
- // so we have to do it via JS instead. In this implementation we cap the height by putting
- // a maxHeight on the underlying remote video tag.
-
- // header + footer + status + give us at least 120px of scrollback at all times.
- let auxPanelMaxHeight = UIStore.instance.windowHeight -
- (54 + // height of RoomHeader
- 36 + // height of the status area
- 51 + // minimum height of the message composer
- 120); // amount of desired scrollback
-
- // XXX: this is a bit of a hack and might possibly cause the video to push out the page anyway
- // but it's better than the video going missing entirely
- if (auxPanelMaxHeight < 50) auxPanelMaxHeight = 50;
-
- if (this.state.auxPanelMaxHeight !== auxPanelMaxHeight) {
- this.setState({ auxPanelMaxHeight });
- }
- };
-
private onStatusBarVisible = () => {
if (this.unmounted || this.state.statusBarVisible) return;
this.setState({ statusBarVisible: true });
@@ -1926,11 +1895,8 @@ export default class RoomView extends React.Component<IProps, IState> {
const auxPanel = (
<AuxPanel
room={this.state.room}
- fullHeight={false}
userId={this.context.credentials.userId}
- maxHeight={this.state.auxPanelMaxHeight}
showApps={this.state.showApps}
- onResize={this.onResize}
resizeNotifier={this.props.resizeNotifier}
>
{ aux }
diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx
index 4a62d6711e..7d3877025c 100644
--- a/src/components/views/rooms/AuxPanel.tsx
+++ b/src/components/views/rooms/AuxPanel.tsx
@@ -35,16 +35,6 @@ interface IProps {
room: Room;
userId: string;
showApps: boolean; // Render apps
-
- // maxHeight attribute for the aux panel and the video
- // therein
- maxHeight: number;
-
- // a callback which is called when the content of the aux panel changes
- // content in a way that is likely to make it change size.
- onResize: () => void;
- fullHeight: boolean;
-
resizeNotifier: ResizeNotifier;
}
@@ -92,13 +82,6 @@ export default class AuxPanel extends React.Component<IProps, IState> {
return objectHasDiff(this.props, nextProps) || objectHasDiff(this.state, nextState);
}
- componentDidUpdate(prevProps, prevState) {
- // most changes are likely to cause a resize
- if (this.props.onResize) {
- this.props.onResize();
- }
- }
-
private rateLimitedUpdate = throttle(() => {
this.setState({ counters: this.computeCounters() });
}, 500, { leading: true, trailing: true });
@@ -138,7 +121,6 @@ export default class AuxPanel extends React.Component<IProps, IState> {
const callView = (
<CallViewForRoom
roomId={this.props.room.roomId}
- maxVideoHeight={this.props.maxHeight}
resizeNotifier={this.props.resizeNotifier}
/>
);
@@ -148,7 +130,6 @@ export default class AuxPanel extends React.Component<IProps, IState> {
appsDrawer = <AppsDrawer
room={this.props.room}
userId={this.props.userId}
- maxHeight={this.props.maxHeight}
showApps={this.props.showApps}
resizeNotifier={this.props.resizeNotifier}
/>;
@@ -204,21 +185,12 @@ export default class AuxPanel extends React.Component<IProps, IState> {
}
}
- const classes = classNames({
- "mx_RoomView_auxPanel": true,
- "mx_RoomView_auxPanel_fullHeight": this.props.fullHeight,
- });
- const style: React.CSSProperties = {};
- if (!this.props.fullHeight) {
- style.maxHeight = this.props.maxHeight;
- }
-
return (
- <AutoHideScrollbar className={classes} style={style}>
+ <AutoHideScrollbar className="mx_RoomView_auxPanel">
{ stateViews }
+ { this.props.children }
{ appsDrawer }
{ callView }
- { this.props.children }
</AutoHideScrollbar>
);
}
diff --git a/src/components/views/voip/CallViewForRoom.tsx b/src/components/views/voip/CallViewForRoom.tsx
index a5aa3e7734..b0a6f17095 100644
--- a/src/components/views/voip/CallViewForRoom.tsx
+++ b/src/components/views/voip/CallViewForRoom.tsx
@@ -27,9 +27,6 @@ interface IProps {
// What room we should display the call for
roomId: string;
- // maxHeight style attribute for the video panel
- maxVideoHeight?: number;
-
resizeNotifier: ResizeNotifier;
}
@@ -99,14 +96,12 @@ export default class CallViewForRoom extends React.Component<IProps, IState> {
public render() {
if (!this.state.call) return null;
- // We subtract 8 as it the margin-bottom of the mx_CallViewForRoom_ResizeWrapper
- const maxHeight = this.props.maxVideoHeight - 8;
return (
<div className="mx_CallViewForRoom">
<Resizable
minHeight={380}
- maxHeight={maxHeight}
+ maxHeight="80vh"
enable={{
top: false,
right: false,
From c86dbe195e44769622e4fd86e0678d6bfb919faf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 27 Aug 2021 14:07:36 +0200
Subject: [PATCH 173/313] Remove unused import
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/components/views/rooms/AuxPanel.tsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx
index 7d3877025c..7afa29624a 100644
--- a/src/components/views/rooms/AuxPanel.tsx
+++ b/src/components/views/rooms/AuxPanel.tsx
@@ -15,7 +15,6 @@ limitations under the License.
*/
import React from 'react';
-import classNames from 'classnames';
import { lexicographicCompare } from 'matrix-js-sdk/src/utils';
import { Room } from 'matrix-js-sdk/src/models/room';
From 2fc36628308bbc4a3949faf93f837c0272d4843c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 17 Sep 2021 09:38:59 +0100
Subject: [PATCH 174/313] Fix space admin check false positive on multiple
admins
---
src/components/views/dialogs/LeaveSpaceDialog.tsx | 9 +++++++--
1 file changed, 7 insertions(+), 2 deletions(-)
diff --git a/src/components/views/dialogs/LeaveSpaceDialog.tsx b/src/components/views/dialogs/LeaveSpaceDialog.tsx
index 841fa14407..d26c0a8b6a 100644
--- a/src/components/views/dialogs/LeaveSpaceDialog.tsx
+++ b/src/components/views/dialogs/LeaveSpaceDialog.tsx
@@ -131,8 +131,13 @@ interface IProps {
}
const isOnlyAdmin = (room: Room): boolean => {
- return !room.getJoinedMembers().some(member => {
- return member.userId !== room.client.credentials.userId && member.powerLevelNorm === 100;
+ const userId = room.client.getUserId();
+ if (room.getMember(userId).powerLevelNorm !== 100) {
+ return false; // user is not an admin
+ }
+ return room.getJoinedMembers().every(member => {
+ // return true if every other member has a lower power level (we are highest)
+ return member.userId === userId || member.powerLevelNorm < 100;
});
};
From 308f6b1d868b7383d95a2e4c94d0d004d1b26bfc Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Tue, 21 Sep 2021 09:39:41 +0100
Subject: [PATCH 175/313] Upgrade matrix-js-sdk to 13.0.0-rc.1
---
package.json | 2 +-
yarn.lock | 7 ++++---
2 files changed, 5 insertions(+), 4 deletions(-)
diff --git a/package.json b/package.json
index 3e3d9383c4..0498ee948e 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
"katex": "^0.12.0",
"linkifyjs": "^2.1.9",
"lodash": "^4.17.20",
- "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+ "matrix-js-sdk": "13.0.0-rc.1",
"matrix-widget-api": "^0.1.0-beta.16",
"minimist": "^1.2.5",
"opus-recorder": "^8.0.3",
diff --git a/yarn.lock b/yarn.lock
index 546e762224..f5931c8c6e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5806,9 +5806,10 @@ mathml-tag-names@^2.1.3:
resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
-"matrix-js-sdk@github:matrix-org/matrix-js-sdk#develop":
- version "12.5.0"
- resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/f84905b00398072b592addfb1dae64c8f3a07fa2"
+matrix-js-sdk@13.0.0-rc.1:
+ version "13.0.0-rc.1"
+ resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-13.0.0-rc.1.tgz#12deab353862852acae8342108d30ce080d364da"
+ integrity sha512-dfqJwXmG1+Ky2geaNADWYb7mwB2IfLFTE+T4q16gCoh2HM0W5yTMvi+kiJs0QspWFXICTps7eBSSq0827QNU8A==
dependencies:
"@babel/runtime" "^7.12.5"
another-json "^0.2.0"
From afbd52e28b9d9cd36775d44b61a383f83c311d5c Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Tue, 21 Sep 2021 09:41:49 +0100
Subject: [PATCH 176/313] Prepare changelog for v3.31.0-rc.1
---
CHANGELOG.md | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 49 insertions(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9a445a4041..d2da9dad17 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,52 @@
+Changes in [3.31.0-rc.1](https://github.com/vector-im/element-desktop/releases/tag/v3.31.0-rc.1) (2021-09-21)
+=============================================================================================================
+
+## ✨ Features
+ * Say Joining space instead of Joining room where we know its a space ([\#6818](https://github.com/matrix-org/matrix-react-sdk/pull/6818)). Fixes vector-im/element-web#19064 and vector-im/element-web#19064.
+ * Add warning that some spaces may not be relinked to the newly upgraded room ([\#6805](https://github.com/matrix-org/matrix-react-sdk/pull/6805)). Fixes vector-im/element-web#18858 and vector-im/element-web#18858.
+ * Delabs Spaces, iterate some copy and move communities/space toggle to preferences ([\#6594](https://github.com/matrix-org/matrix-react-sdk/pull/6594)). Fixes vector-im/element-web#18088, vector-im/element-web#18524 vector-im/element-web#18088 and vector-im/element-web#18088.
+ * Show "Message" in the user info panel instead of "Start chat" ([\#6319](https://github.com/matrix-org/matrix-react-sdk/pull/6319)). Fixes vector-im/element-web#17877 and vector-im/element-web#17877. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Fix space keyboard shortcuts conflicting with native zoom shortcuts ([\#6804](https://github.com/matrix-org/matrix-react-sdk/pull/6804)).
+ * Replace plain text emoji at the end of a line ([\#6784](https://github.com/matrix-org/matrix-react-sdk/pull/6784)). Fixes vector-im/element-web#18833 and vector-im/element-web#18833. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Simplify Space Panel layout and fix some edge cases ([\#6800](https://github.com/matrix-org/matrix-react-sdk/pull/6800)). Fixes vector-im/element-web#18694 and vector-im/element-web#18694.
+ * Show unsent message warning on Space Panel buttons ([\#6778](https://github.com/matrix-org/matrix-react-sdk/pull/6778)). Fixes vector-im/element-web#18891 and vector-im/element-web#18891.
+ * Hide mute/unmute button in UserInfo for Spaces as it makes no sense ([\#6790](https://github.com/matrix-org/matrix-react-sdk/pull/6790)). Fixes vector-im/element-web#19007 and vector-im/element-web#19007.
+ * Fix automatic field population in space create menu not validating ([\#6792](https://github.com/matrix-org/matrix-react-sdk/pull/6792)). Fixes vector-im/element-web#19005 and vector-im/element-web#19005.
+ * Optimize input label transition on focus ([\#6783](https://github.com/matrix-org/matrix-react-sdk/pull/6783)). Fixes vector-im/element-web#12876 and vector-im/element-web#12876. Contributed by [MadLittleMods](https://github.com/MadLittleMods).
+ * Adapt and re-use the RolesRoomSettingsTab for Spaces ([\#6779](https://github.com/matrix-org/matrix-react-sdk/pull/6779)). Fixes vector-im/element-web#18908 vector-im/element-web#18909 and vector-im/element-web#18908.
+ * Deduplicate join rule management between rooms and spaces ([\#6724](https://github.com/matrix-org/matrix-react-sdk/pull/6724)). Fixes vector-im/element-web#18798 and vector-im/element-web#18798.
+ * Add config option to turn on in-room event sending timing metrics ([\#6766](https://github.com/matrix-org/matrix-react-sdk/pull/6766)).
+ * Improve the upgrade for restricted user experience ([\#6764](https://github.com/matrix-org/matrix-react-sdk/pull/6764)). Fixes vector-im/element-web#18677 and vector-im/element-web#18677.
+ * Improve tooltips on space quick actions and explore button ([\#6760](https://github.com/matrix-org/matrix-react-sdk/pull/6760)). Fixes vector-im/element-web#18528 and vector-im/element-web#18528.
+ * Make space members and user info behave more expectedly ([\#6765](https://github.com/matrix-org/matrix-react-sdk/pull/6765)). Fixes vector-im/element-web#17018 and vector-im/element-web#17018.
+ * hide no-op m.room.encryption events and better word param changes ([\#6747](https://github.com/matrix-org/matrix-react-sdk/pull/6747)). Fixes vector-im/element-web#18597 and vector-im/element-web#18597.
+ * Respect m.space.parent relations if they hold valid permissions ([\#6746](https://github.com/matrix-org/matrix-react-sdk/pull/6746)). Fixes vector-im/element-web#10935 and vector-im/element-web#10935.
+ * Space panel accessibility improvements ([\#6744](https://github.com/matrix-org/matrix-react-sdk/pull/6744)). Fixes vector-im/element-web#18892 and vector-im/element-web#18892.
+
+## 🐛 Bug Fixes
+ * Revert Firefox composer deletion hacks ([\#6844](https://github.com/matrix-org/matrix-react-sdk/pull/6844)). Fixes vector-im/element-web#19103 and vector-im/element-web#19103. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Fix accessing field on oobData which may be undefined ([\#6830](https://github.com/matrix-org/matrix-react-sdk/pull/6830)). Fixes vector-im/element-web#19085 and vector-im/element-web#19085.
+ * Fix pill deletion on Firefox 78 ([\#6832](https://github.com/matrix-org/matrix-react-sdk/pull/6832)). Fixes vector-im/element-web#19077 and vector-im/element-web#19077. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Fix reactions aria-label not being a string and thus being read as [Object object] ([\#6828](https://github.com/matrix-org/matrix-react-sdk/pull/6828)).
+ * Fix missing null guard in space hierarchy pagination ([\#6821](https://github.com/matrix-org/matrix-react-sdk/pull/6821)). Fixes matrix-org/element-web-rageshakes#6299 and matrix-org/element-web-rageshakes#6299.
+ * Fix checks to show prompt to start new chats ([\#6812](https://github.com/matrix-org/matrix-react-sdk/pull/6812)).
+ * Fix room list scroll jumps ([\#6777](https://github.com/matrix-org/matrix-react-sdk/pull/6777)). Fixes vector-im/element-web#17460 vector-im/element-web#18440 and vector-im/element-web#17460. Contributed by [robintown](https://github.com/robintown).
+ * Fix various message bubble alignment issues ([\#6785](https://github.com/matrix-org/matrix-react-sdk/pull/6785)). Fixes vector-im/element-web#18293, vector-im/element-web#18294 vector-im/element-web#18305 and vector-im/element-web#18293. Contributed by [robintown](https://github.com/robintown).
+ * Make message bubble font size consistent ([\#6795](https://github.com/matrix-org/matrix-react-sdk/pull/6795)). Contributed by [robintown](https://github.com/robintown).
+ * Fix edge cases around joining new room which does not belong to active space ([\#6797](https://github.com/matrix-org/matrix-react-sdk/pull/6797)). Fixes vector-im/element-web#19025 and vector-im/element-web#19025.
+ * Fix edge case space issues around creation and initial view ([\#6798](https://github.com/matrix-org/matrix-react-sdk/pull/6798)). Fixes vector-im/element-web#19023 and vector-im/element-web#19023.
+ * Stop spinner on space preview if the join fails ([\#6803](https://github.com/matrix-org/matrix-react-sdk/pull/6803)). Fixes vector-im/element-web#19034 and vector-im/element-web#19034.
+ * Fix emoji picker and stickerpicker not appearing correctly when opened ([\#6793](https://github.com/matrix-org/matrix-react-sdk/pull/6793)). Fixes vector-im/element-web#19012 and vector-im/element-web#19012. Contributed by [Palid](https://github.com/Palid).
+ * Fix autocomplete not having y-scroll ([\#6794](https://github.com/matrix-org/matrix-react-sdk/pull/6794)). Fixes vector-im/element-web#18997 and vector-im/element-web#18997. Contributed by [Palid](https://github.com/Palid).
+ * Fix broken edge case with public space creation with no alias ([\#6791](https://github.com/matrix-org/matrix-react-sdk/pull/6791)). Fixes vector-im/element-web#19003 and vector-im/element-web#19003.
+ * Redirect from /#/welcome to /#/home if already logged in ([\#6786](https://github.com/matrix-org/matrix-react-sdk/pull/6786)). Fixes vector-im/element-web#18990 and vector-im/element-web#18990. Contributed by [aaronraimist](https://github.com/aaronraimist).
+ * Fix build issues from two conflicting PRs landing without merge conflict ([\#6780](https://github.com/matrix-org/matrix-react-sdk/pull/6780)).
+ * Render guest settings only in public rooms/spaces ([\#6693](https://github.com/matrix-org/matrix-react-sdk/pull/6693)). Fixes vector-im/element-web#18776 and vector-im/element-web#18776. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Fix message bubble corners being wrong in the presence of hidden events ([\#6776](https://github.com/matrix-org/matrix-react-sdk/pull/6776)). Fixes vector-im/element-web#18124 and vector-im/element-web#18124. Contributed by [robintown](https://github.com/robintown).
+ * Debounce read marker update on scroll ([\#6771](https://github.com/matrix-org/matrix-react-sdk/pull/6771)). Fixes vector-im/element-web#18961 and vector-im/element-web#18961.
+ * Use cursor:pointer on space panel buttons ([\#6770](https://github.com/matrix-org/matrix-react-sdk/pull/6770)). Fixes vector-im/element-web#18951 and vector-im/element-web#18951.
+ * Fix regressed tab view buttons in space update toast ([\#6761](https://github.com/matrix-org/matrix-react-sdk/pull/6761)). Fixes vector-im/element-web#18781 and vector-im/element-web#18781.
+
Changes in [3.30.0](https://github.com/vector-im/element-desktop/releases/tag/v3.30.0) (2021-09-14)
===================================================================================================
From 531622f3b5946b88255b3ee4a72e0d16826e718b Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Tue, 21 Sep 2021 09:41:50 +0100
Subject: [PATCH 177/313] v3.31.0-rc.1
---
package.json | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/package.json b/package.json
index 0498ee948e..edf4c88c61 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "matrix-react-sdk",
- "version": "3.30.0",
+ "version": "3.31.0-rc.1",
"description": "SDK for matrix.org using React",
"author": "matrix.org",
"repository": {
@@ -25,7 +25,7 @@
"bin": {
"reskindex": "scripts/reskindex.js"
},
- "main": "./src/index.js",
+ "main": "./lib/index.js",
"matrix_src_main": "./src/index.js",
"matrix_lib_main": "./lib/index.js",
"matrix_lib_typings": "./lib/index.d.ts",
@@ -210,5 +210,6 @@
"coverageReporters": [
"text"
]
- }
+ },
+ "typings": "./lib/index.d.ts"
}
From 18415e435ca6da9f9c2c3f853e5b973b06737f0e Mon Sep 17 00:00:00 2001
From: Jeff Huang <s8321414@gmail.com>
Date: Wed, 22 Sep 2021 04:01:36 +0000
Subject: [PATCH 178/313] Translated using Weblate (Chinese (Traditional))
Currently translated at 100.0% (3166 of 3166 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/zh_Hant/
---
src/i18n/strings/zh_Hant.json | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/zh_Hant.json b/src/i18n/strings/zh_Hant.json
index 9d644d424b..d4da600284 100644
--- a/src/i18n/strings/zh_Hant.json
+++ b/src/i18n/strings/zh_Hant.json
@@ -3160,5 +3160,12 @@
"To join a space you'll need an invite.": "若要加入空間，您必須被邀請。",
"You can also make Spaces from <a>communities</a>.": "您也可以從<a>社群</a>建立空間。",
"Temporarily show communities instead of Spaces for this session. Support for this will be removed in the near future. This will reload Element.": "為此工作階段暫時顯示社群而非空間。對此功能的支援將在不久的將來移除。這將會重新載入 Element。",
- "Display Communities instead of Spaces": "顯示社群而非空間"
+ "Display Communities instead of Spaces": "顯示社群而非空間",
+ "Would you like to leave the rooms in this space?": "您想要離開此空間中的聊天室嗎？",
+ "You are about to leave <spaceName/>.": "您將要離開 <spaceName/>。",
+ "Leave some rooms": "離開部份聊天室",
+ "Leave all rooms": "離開所有聊天室",
+ "Don't leave any rooms": "不要離開任何聊天室",
+ "%(reactors)s reacted with %(content)s": "%(reactors)s 使用了 %(content)s 反應",
+ "Joining space …": "正在加入空間……"
}
From 66cd3970ae2fc8d80dcb6b5ffdebc7cf1154288f Mon Sep 17 00:00:00 2001
From: Kim Tae Kyeong <kim@taekyeong.me>
Date: Wed, 22 Sep 2021 00:40:13 +0000
Subject: [PATCH 179/313] Translated using Weblate (Korean)
Currently translated at 44.9% (1424 of 3166 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/ko/
---
src/i18n/strings/ko.json | 11 +++++++----
1 file changed, 7 insertions(+), 4 deletions(-)
diff --git a/src/i18n/strings/ko.json b/src/i18n/strings/ko.json
index a675a151b0..5843fe8969 100644
--- a/src/i18n/strings/ko.json
+++ b/src/i18n/strings/ko.json
@@ -271,7 +271,7 @@
"This process allows you to export the keys for messages you have received in encrypted rooms to a local file. You will then be able to import the file into another Matrix client in the future, so that client will also be able to decrypt these messages.": "이 과정으로 암호화한 방에서 받은 메시지의 키를 로컬 파일로 내보낼 수 있습니다. 그런 다음 나중에 다른 Matrix 클라이언트에서 파일을 가져와서, 해당 클라이언트에서도 이 메시지를 복호화할 수 있도록 할 수 있습니다.",
"The exported file will allow anyone who can read it to decrypt any encrypted messages that you can see, so you should be careful to keep it secure. To help with this, you should enter a passphrase below, which will be used to encrypt the exported data. It will only be possible to import the data by using the same passphrase.": "내보낸 파일이 있으면 누구든 암호화한 메시지를 복호화해서 읽을 수 있으므로, 보안에 신경을 써야 합니다. 이런 이유로 내보낸 파일을 암호화하도록 아래에 암호를 입력하는 것을 추천합니다. 같은 암호를 사용해야 데이터를 불러올 수 있을 것입니다.",
"This process allows you to import encryption keys that you had previously exported from another Matrix client. You will then be able to decrypt any messages that the other client could decrypt.": "이 과정으로 다른 Matrix 클라이언트에서 내보낸 암호화 키를 가져올 수 있습니다. 그런 다음 이전 클라이언트에서 복호화할 수 있는 모든 메시지를 복호화할 수 있습니다.",
- "The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.": "내보낸 파일이 암호로 보호되어 있습니다. 파일을 복호화하려면, 여기에 암호를 입력해야 합니다.",
+ "The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.": "내보낸 파일이 암호로 보호되어 있습니다. 파일을 복호화하려면, 여기에 암호를 입력해야 합니다.",
"Are you sure you wish to remove (delete) this event? Note that if you delete a room name or topic change, it could undo the change.": "이 이벤트를 감추길(삭제하길) 원하세요? 방 이름을 삭제하거나 주제를 바꾸면, 다시 생길 수도 있습니다.",
"Unable to restore session": "세션을 복구할 수 없음",
"If you have previously used a more recent version of %(brand)s, your session may be incompatible with this version. Close this window and return to the more recent version.": "이전에 최근 버전의 %(brand)s을 썼다면, 세션이 이 버전과 맞지 않을 것입니다. 창을 닫고 최근 버전으로 돌아가세요.",
@@ -840,7 +840,7 @@
"There was an error joining the room": "방에 참가하는 동안 오류가 발생했습니다",
"Sorry, your homeserver is too old to participate in this room.": "죄송합니다, 이 방에 참여하기엔 홈서버가 너무 오래됬습니다.",
"Custom user status messages": "맞춤 사용자 상태 메시지",
- "Group & filter rooms by custom tags (refresh to apply changes)": "맞춤 태그로 방을 그룹 & 필터\n(변경 사항을 적용하려면 새로고침)",
+ "Group & filter rooms by custom tags (refresh to apply changes)": "맞춤 태그로 방을 그룹 & 필터 (변경 사항을 적용하려면 새로고침)",
"You do not have the required permissions to use this command.": "이 명령어를 사용하기 위해 필요한 권한이 없습니다.",
"Render simple counters in room header": "방 헤더에 간단한 카운터 표현",
"Enable Emoji suggestions while typing": "입력 중 이모지 제안 켜기",
@@ -1414,10 +1414,13 @@
"Create Account": "계정 만들기",
"Integration manager": "통합 관리자",
"Using this widget may share data <helpIcon /> with %(widgetDomain)s & your integration manager.": "이 위젯을 사용하면 <helpcon /> %(widgetDomain)s & 통합 관리자와 데이터를 공유합니다.",
- "Identity server is": "ID 서버:",
+ "Identity server is": "ID 서버는",
"Identity server": "ID 서버",
"Identity server (%(server)s)": "ID 서버 (%(server)s)",
"Could not connect to identity server": "ID 서버에 연결할 수 없음",
"Not a valid identity server (status code %(code)s)": "올바르지 않은 ID 서버 (상태 코드 %(code)s)",
- "Identity server URL must be HTTPS": "ID 서버 URL은 HTTPS이어야 함"
+ "Identity server URL must be HTTPS": "ID 서버 URL은 HTTPS이어야 함",
+ "Appearance": "모습",
+ "Appearance Settings only affect this %(brand)s session.": "모습 설정은 이 %(brand)s 세션에만 영향을 끼칩니다.",
+ "Customise your appearance": "모습 개인화하기"
}
From f15951f35fbbe9b4b2d64349de83be05ca65427e Mon Sep 17 00:00:00 2001
From: waclaw66 <waclaw66@seznam.cz>
Date: Wed, 22 Sep 2021 05:05:11 +0000
Subject: [PATCH 180/313] Translated using Weblate (Czech)
Currently translated at 100.0% (3166 of 3166 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/cs/
---
src/i18n/strings/cs.json | 11 ++++++++---
1 file changed, 8 insertions(+), 3 deletions(-)
diff --git a/src/i18n/strings/cs.json b/src/i18n/strings/cs.json
index 6ef1a3dd1e..bf6c2c08f3 100644
--- a/src/i18n/strings/cs.json
+++ b/src/i18n/strings/cs.json
@@ -2901,7 +2901,7 @@
"e.g. my-space": "např. můj-prostor",
"Silence call": "Ztlumit zvonění",
"Sound on": "Zvuk zapnutý",
- "Show all rooms in Home": "Zobrazit všechny místnosti na domácí obrazovce",
+ "Show all rooms in Home": "Zobrazit všechny místnosti na úvodní obrazovce",
"Report to moderators prototype. In rooms that support moderation, the `report` button will let you report abuse to room moderators": "Prototyp Nahlášování moderátorům. V místnostech, které podporují moderování, vám tlačítko `nahlásit` umožní nahlásit zneužití moderátorům místnosti",
"%(senderName)s changed the <a>pinned messages</a> for the room.": "%(senderName)s změnil(a) <a>připnuté zprávy</a> v místnosti.",
"%(senderName)s kicked %(targetName)s": "%(senderName)s vykopl(a) uživatele %(targetName)s",
@@ -3056,7 +3056,7 @@
"Want to add a new space instead?": "Chcete místo toho přidat nový prostor?",
"Decrypting": "Dešifrování",
"Show all rooms": "Zobrazit všechny místnosti",
- "All rooms you're in will appear in Home.": "Všechny místnosti, ve kterých se nacházíte, se zobrazí na domovské obrazovce.",
+ "All rooms you're in will appear in Home.": "Všechny místnosti, ve kterých se nacházíte, se zobrazí na úvodní obrazovce.",
"Send pseudonymous analytics data": "Odeslat pseudonymní analytická data",
"Missed call": "Zmeškaný hovor",
"Call declined": "Hovor odmítnut",
@@ -3162,5 +3162,10 @@
"Temporarily show communities instead of Spaces for this session. Support for this will be removed in the near future. This will reload Element.": "Dočasně zobrazit skupiny místo prostorů pro tuto relaci. Podpora bude v blízké budoucnosti odstraněna. Toto provede přenačtení Elementu.",
"Display Communities instead of Spaces": "Zobrazit skupiny místo prostorů",
"Joining space …": "Připojování k prostoru…",
- "%(reactors)s reacted with %(content)s": "%(reactors)s reagoval(a) na %(content)s"
+ "%(reactors)s reacted with %(content)s": "%(reactors)s reagoval(a) na %(content)s",
+ "Would you like to leave the rooms in this space?": "Chcete odejít z místností v tomto prostoru?",
+ "You are about to leave <spaceName/>.": "Odcházíte z <spaceName/>.",
+ "Leave some rooms": "Odejít z některých místností",
+ "Don't leave any rooms": "Neodcházet z žádné místnosti",
+ "Leave all rooms": "Odejít ze všech místností"
}
From 350f93191a2ddbed82f0b269faf14d84d2354208 Mon Sep 17 00:00:00 2001
From: XoseM <correoxm@disroot.org>
Date: Wed, 22 Sep 2021 04:47:33 +0000
Subject: [PATCH 181/313] Translated using Weblate (Galician)
Currently translated at 100.0% (3166 of 3166 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/gl/
---
src/i18n/strings/gl.json | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/gl.json b/src/i18n/strings/gl.json
index 82c01da943..875a3ff2d2 100644
--- a/src/i18n/strings/gl.json
+++ b/src/i18n/strings/gl.json
@@ -3157,5 +3157,12 @@
"To join a space you'll need an invite.": "Para unirte a un espazo precisas un convite.",
"You can also make Spaces from <a>communities</a>.": "Tamén podes crear Espazos a partir de <a>comunidades</a>.",
"Temporarily show communities instead of Spaces for this session. Support for this will be removed in the near future. This will reload Element.": "De xeito temporal, mostrar comunidades no lugar de Espazos durante esta sesión. Esta función vai ser eliminada en próximas versións. Reiniciará Element.",
- "Display Communities instead of Spaces": "Mostrar Comunidades no lugar de Espazos"
+ "Display Communities instead of Spaces": "Mostrar Comunidades no lugar de Espazos",
+ "Would you like to leave the rooms in this space?": "Queres sair destas salas neste espazo?",
+ "You are about to leave <spaceName/>.": "Vas saír de <spaceName/>.",
+ "Leave some rooms": "Sair de algunhas salas",
+ "Leave all rooms": "Sair de tódalas salas",
+ "Don't leave any rooms": "Non saír de ningunha sala",
+ "%(reactors)s reacted with %(content)s": "%(reactors)s reaccionou con %(content)s",
+ "Joining space …": "Uníndote ao espazo…"
}
From 8a8b8a156e210673e26cf2eb99d90cca0d0713a7 Mon Sep 17 00:00:00 2001
From: iaiz <git@iapellaniz.com>
Date: Wed, 22 Sep 2021 11:01:21 +0000
Subject: [PATCH 182/313] Translated using Weblate (Spanish)
Currently translated at 99.7% (3158 of 3166 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/es/
---
src/i18n/strings/es.json | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/es.json b/src/i18n/strings/es.json
index d5568f003c..a4761610a9 100644
--- a/src/i18n/strings/es.json
+++ b/src/i18n/strings/es.json
@@ -3151,5 +3151,10 @@
"To join a space you'll need an invite.": "Para unirte a un espacio, necesitas que te inviten a él.",
"You can also make Spaces from <a>communities</a>.": "También puedes crear espacios a partir de <a>comunidades</a>.",
"Temporarily show communities instead of Spaces for this session. Support for this will be removed in the near future. This will reload Element.": "Ver temporalmente comunidades en vez de espacios durante esta sesión. Esta opción desaparecerá en el futuro. Element se recargará.",
- "Display Communities instead of Spaces": "Ver comunidades en vez de espacios"
+ "Display Communities instead of Spaces": "Ver comunidades en vez de espacios",
+ "Don't leave any rooms": "No salir de ninguna sala",
+ "Leave all rooms": "Salir de todas las salas",
+ "Leave some rooms": "Salir de algunas salas",
+ "Would you like to leave the rooms in this space?": "¿Quieres salir también de las salas del espacio?",
+ "You are about to leave <spaceName/>.": "Estás a punto de salirte de <spaceName/>."
}
From 9c69869f63f3fe933d482a6bdad2650a4ad61c78 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germains@element.io>
Date: Wed, 22 Sep 2021 11:55:25 +0100
Subject: [PATCH 183/313] Fix spacing for message composer buttons
---
res/css/views/rooms/_MessageComposer.scss | 14 ++++++++++++--
1 file changed, 12 insertions(+), 2 deletions(-)
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index 9ba966c083..c20dd43daf 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -185,16 +185,26 @@ limitations under the License.
}
}
+.mx_ContextualMenu {
+ .mx_MessageComposer_button {
+ padding-left: calc(var(--size) + 6px);
+ }
+}
+
.mx_MessageComposer_button {
--size: 26px;
position: relative;
- margin-right: 6px;
cursor: pointer;
height: var(--size);
line-height: var(--size);
width: auto;
- padding-left: calc(var(--size) + 5px);
+ padding-left: var(--size);
border-radius: 100%;
+ margin-right: 6px;
+
+ &:last-child {
+ margin-right: auto;
+ }
&::before {
content: '';
From 672cdf5330d0207767f94e49bfefad00fec9ac72 Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Wed, 22 Sep 2021 14:35:24 +0100
Subject: [PATCH 184/313] Prepare changelog for v3.31.0-rc.2
---
CHANGELOG.md | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d2da9dad17..71ddb1c5fe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+Changes in [3.31.0-rc.2](https://github.com/vector-im/element-desktop/releases/tag/v3.31.0-rc.2) (2021-09-22)
+=============================================================================================================
+
+## 🐛 Bug Fixes
+ * Fix spacing for message composer buttons ([\#6854](https://github.com/matrix-org/matrix-react-sdk/pull/6854)).
+
Changes in [3.31.0-rc.1](https://github.com/vector-im/element-desktop/releases/tag/v3.31.0-rc.1) (2021-09-21)
=============================================================================================================
From a22e2ef874767da9250f97913642c66f87f61006 Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Wed, 22 Sep 2021 14:35:24 +0100
Subject: [PATCH 185/313] v3.31.0-rc.2
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index edf4c88c61..9593f74aae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "matrix-react-sdk",
- "version": "3.31.0-rc.1",
+ "version": "3.31.0-rc.2",
"description": "SDK for matrix.org using React",
"author": "matrix.org",
"repository": {
From d1e3d35d40dbba00dd9d767767b9d821159c0244 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 22 Sep 2021 22:17:23 +0530
Subject: [PATCH 186/313] Change export bundle filename format, light theme for
all exports and import jszip after export cta
---
res/css/views/dialogs/_ExportDialog.scss | 2 +-
.../views/dialogs/ExportDialog.tsx | 64 ++++----
.../views/right_panel/RoomSummaryCard.tsx | 2 +-
src/i18n/strings/en_EN.json | 2 +-
src/utils/exportUtils/Exporter.ts | 6 +-
src/utils/exportUtils/exportCSS.ts | 99 +------------
src/utils/exportUtils/exportCustomCSS.css | 138 ++++++++++++++++++
7 files changed, 178 insertions(+), 135 deletions(-)
rename src/{async-components => components}/views/dialogs/ExportDialog.tsx (89%)
create mode 100644 src/utils/exportUtils/exportCustomCSS.css
diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
index f3e418354c..4727ab5f31 100644
--- a/res/css/views/dialogs/_ExportDialog.scss
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -20,7 +20,7 @@ limitations under the License.
display: block;
font-family: $font-family;
font-weight: $font-semi-bold;
- color: $primary-fg-color;
+ color: $accent-fg-color;
margin-top: 18px;
margin-bottom: 12px;
}
diff --git a/src/async-components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
similarity index 89%
rename from src/async-components/views/dialogs/ExportDialog.tsx
rename to src/components/views/dialogs/ExportDialog.tsx
index 40c9db0a67..33a14887fb 100644
--- a/src/async-components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -17,27 +17,26 @@ limitations under the License.
import React, { useRef, useState } from "react";
import { Room } from "matrix-js-sdk/src";
import { _t } from "../../../languageHandler";
-import { IDialogProps } from "../../../components/views/dialogs/IDialogProps";
-import BaseDialog from "../../../components/views/dialogs/BaseDialog";
-import DialogButtons from "../../../components/views/elements/DialogButtons";
-import Field from "../../../components/views/elements/Field";
-import StyledRadioGroup from "../../../components/views/elements/StyledRadioGroup";
-import StyledCheckbox from "../../../components/views/elements/StyledCheckbox";
+import { IDialogProps } from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+import Field from "../elements/Field";
+import StyledRadioGroup from "../elements/StyledRadioGroup";
+import StyledCheckbox from "../elements/StyledCheckbox";
import {
ExportFormat,
ExportType,
textForFormat,
textForType,
} from "../../../utils/exportUtils/exportUtils";
-import withValidation, { IFieldState, IValidationResult } from "../../../components/views/elements/Validation";
+import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
import HTMLExporter from "../../../utils/exportUtils/HtmlExport";
import JSONExporter from "../../../utils/exportUtils/JSONExport";
import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
import { useStateCallback } from "../../../hooks/useStateCallback";
import Exporter from "../../../utils/exportUtils/Exporter";
-import Spinner from "../../../components/views/elements/Spinner";
-import Modal from "../../../Modal";
-import InfoDialog from "../../../components/views/dialogs/InfoDialog";
+import Spinner from "../elements/Spinner";
+import InfoDialog from "./InfoDialog";
interface IProps extends IDialogProps {
room: Room;
@@ -215,11 +214,10 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
};
const confirmCanel = async () => {
- await exporter?.cancelExport().then(() => {
- setExportCancelled(true);
- setExporting(false);
- setExporter(null);
- });
+ await exporter?.cancelExport();
+ setExportCancelled(true);
+ setExporting(false);
+ setExporter(null);
};
const exportFormatOptions = Object.keys(ExportFormat).map((format) => ({
@@ -256,26 +254,26 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
if (exportCancelled) {
// Display successful cancellation message
- Modal.createTrackedDialog("Export Cancelled", "", InfoDialog, {
- title: _t("Export Cancelled"),
- description: <p>{ _t("The export was cancelled successfully") }</p>,
- hasCloseButton: true,
- onFinished: () => {
- setExportCancelled(false);
- },
- });
- return null;
+ return (
+ <InfoDialog
+ title={_t("Export Successful")}
+ description={_t("The export was cancelled successfully")}
+ hasCloseButton={true}
+ onFinished={onFinished}
+ />
+ );
} else if (exportSuccessful) {
// Display successful export message
- Modal.createTrackedDialog("Export Successful", "", InfoDialog, {
- title: _t("Export Successful"),
- description: <p>{ _t("Your messages were successfully exported") }</p>,
- hasCloseButton: true,
- onFinished: () => {
- setExportSuccessful(false);
- },
- });
- return null;
+ return (
+ <InfoDialog
+ title={_t("Export Successful")}
+ description={_t(
+ "Your export was successful. Find it in your Downloads folder.",
+ )}
+ hasCloseButton={true}
+ onFinished={onFinished}
+ />
+ );
} else if (displayCancel) {
// Display cancel warning
return (
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index db642ead3d..1fe556dde2 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -47,6 +47,7 @@ import { useRoomMemberCount } from "../../../hooks/useRoomMembers";
import { Container, MAX_PINNED, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
import RoomName from "../elements/RoomName";
import UIStore from "../../../stores/UIStore";
+import ExportDialog from "../dialogs/ExportDialog";
interface IProps {
room: Room;
@@ -241,7 +242,6 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
};
const onRoomExportClick = async () => {
- const { default: ExportDialog } = await import("../../../async-components/views/dialogs/ExportDialog");
Modal.createTrackedDialog('export room dialog', '', ExportDialog, {
room,
});
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 9e6c90ec72..e80aabdd61 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -3061,7 +3061,7 @@
"Export Cancelled": "Export Cancelled",
"The export was cancelled successfully": "The export was cancelled successfully",
"Export Successful": "Export Successful",
- "Your messages were successfully exported": "Your messages were successfully exported",
+ "Your export was successful. Find it in your Downloads folder.": "Your export was successful. Find it in your Downloads folder.",
"Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
"Stop": "Stop",
"Exporting your data": "Exporting your data",
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 7254bdc3a4..becc36449d 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -22,9 +22,9 @@ import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
import { Direction, MatrixClient } from "matrix-js-sdk";
-import JSZip from "jszip";
import { saveAs } from "file-saver";
import { _t } from "../../languageHandler";
+import SdkConfig from "../../SdkConfig";
type BlobFile = {
name: string;
@@ -71,7 +71,9 @@ export default abstract class Exporter {
}
protected async downloadZIP(): Promise<string | void> {
- const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
+ const brand = SdkConfig.get().brand;
+ const filename = `${brand} - Chat Export -${formatFullDateNoDay(new Date())}.zip`;
+ const { default: JSZip } = await import('jszip');
const zip = new JSZip();
// Create a writable stream to the directory
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 46024590a7..3bad94d938 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -16,13 +16,12 @@ limitations under the License.
/* eslint-disable max-len, camelcase */
-import ThemeWatcher from "../../settings/watchers/ThemeWatcher";
+import customCSS from "!!raw-loader!./exportCustomCSS.css";
const getExportCSS = async (): Promise<string> => {
- const theme = new ThemeWatcher().getEffectiveTheme();
const stylesheets: string[] = [];
document.querySelectorAll('link[rel="stylesheet"]').forEach((e: any) => {
- if (e.href.endsWith("bundle.css") || e.href.endsWith(`theme-${theme}.css`)) {
+ if (e.href.endsWith("bundle.css") || e.href.endsWith("theme-light.css")) {
stylesheets.push(e.href);
}
});
@@ -45,100 +44,6 @@ const getExportCSS = async (): Promise<string> => {
"font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace",
);
- const customCSS = `
-#snackbar {
- display: flex;
- visibility: hidden;
- min-width: 250px;
- margin-left: -125px;
- background-color: #333;
- color: #fff;
- text-align: center;
- position: fixed;
- z-index: 1;
- left: 50%;
- bottom: 30px;
- font-size: 17px;
- padding: 6px 16px;
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
- font-weight: 400;
- line-height: 1.43;
- border-radius: 4px;
- letter-spacing: 0.01071em;
- }
-
- #snackbar.mx_show {
- visibility: visible;
- -webkit-animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
- animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
- }
-
- a.mx_reply_anchor{
- cursor: pointer;
- color: #238cf5;
- }
-
- a.mx_reply_anchor:hover{
- text-decoration: underline;
- }
-
- @-webkit-keyframes mx_snackbar_fadein {
- from {bottom: 0; opacity: 0;}
- to {bottom: 30px; opacity: 1;}
- }
-
- @keyframes mx_snackbar_fadein {
- from {bottom: 0; opacity: 0;}
- to {bottom: 30px; opacity: 1;}
- }
-
- @-webkit-keyframes mx_snackbar_fadeout {
- from {bottom: 30px; opacity: 1;}
- to {bottom: 0; opacity: 0;}
- }
-
- @keyframes mx_snackbar_fadeout {
- from {bottom: 30px; opacity: 1;}
- to {bottom: 0; opacity: 0;}
- }
-
- * {
- scroll-behavior: smooth !important;
- }
-
- .mx_Export_EventWrapper:target {
- background: ${theme == 'light' ? "white" : "#15191E"};
- animation: mx_event_highlight_animation 2s linear;
- }
-
- @keyframes mx_event_highlight_animation {
- 0%,100% {
- background: ${theme == 'light' ? "white" : "#15191E"};
- }
- 50% {
- background: ${theme == 'light' ? "#e3e2df" : "#21262c"};
- }
- }
-
- .mx_ReplyThread_Export {
- margin-top: 0px;
- margin-bottom: 5px;
- }
-
- .mx_RedactedBody {
- padding-left: unset;
- }
-
- img {
- white-space: nowrap;
- overflow: hidden;
- }
-
- .mx_MatrixChat{
- max_width: 100%;
- }
-`;
-
return CSS + customCSS;
};
diff --git a/src/utils/exportUtils/exportCustomCSS.css b/src/utils/exportUtils/exportCustomCSS.css
new file mode 100644
index 0000000000..284f54ac08
--- /dev/null
+++ b/src/utils/exportUtils/exportCustomCSS.css
@@ -0,0 +1,138 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/*
+ This file is raw-imported (imported as plain text) for the export bundle, which is the reason for the .css format and the colours being hard-coded hard-coded.
+*/
+
+#snackbar {
+ display: flex;
+ visibility: hidden;
+ min-width: 250px;
+ margin-left: -125px;
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ position: fixed;
+ z-index: 1;
+ left: 50%;
+ bottom: 30px;
+ font-size: 17px;
+ padding: 6px 16px;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
+ segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial,
+ sans-serif;
+ font-weight: 400;
+ line-height: 1.43;
+ border-radius: 4px;
+ letter-spacing: 0.01071em;
+}
+
+#snackbar.mx_show {
+ visibility: visible;
+ -webkit-animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
+ animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
+}
+
+a.mx_reply_anchor {
+ cursor: pointer;
+ color: #238cf5;
+}
+
+a.mx_reply_anchor:hover {
+ text-decoration: underline;
+}
+
+@-webkit-keyframes mx_snackbar_fadein {
+ from {
+ bottom: 0;
+ opacity: 0;
+ }
+ to {
+ bottom: 30px;
+ opacity: 1;
+ }
+}
+
+@keyframes mx_snackbar_fadein {
+ from {
+ bottom: 0;
+ opacity: 0;
+ }
+ to {
+ bottom: 30px;
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes mx_snackbar_fadeout {
+ from {
+ bottom: 30px;
+ opacity: 1;
+ }
+ to {
+ bottom: 0;
+ opacity: 0;
+ }
+}
+
+@keyframes mx_snackbar_fadeout {
+ from {
+ bottom: 30px;
+ opacity: 1;
+ }
+ to {
+ bottom: 0;
+ opacity: 0;
+ }
+}
+
+* {
+ scroll-behavior: smooth !important;
+}
+
+.mx_Export_EventWrapper:target {
+ background: white;
+ animation: mx_event_highlight_animation 2s linear;
+}
+
+@keyframes mx_event_highlight_animation {
+ 0%,
+ 100% {
+ background: white;
+ }
+ 50% {
+ background: #e3e2df;
+ }
+}
+
+.mx_ReplyThread_Export {
+ margin-top: 0px;
+ margin-bottom: 5px;
+}
+
+.mx_RedactedBody {
+ padding-left: unset;
+}
+
+img {
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.mx_MatrixChat {
+ max-width: 100%;
+}
From f35dae8c943e3dc0edeada13f498d19a71e2c414 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 22 Sep 2021 22:22:45 +0530
Subject: [PATCH 187/313] i18n
---
src/i18n/strings/en_EN.json | 35 +++++++++++++++++------------------
1 file changed, 17 insertions(+), 18 deletions(-)
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index e80aabdd61..32e8411a26 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2355,6 +2355,23 @@
"There was an error updating your community. The server is unable to process your request.": "There was an error updating your community. The server is unable to process your request.",
"Update community": "Update community",
"An error has occurred.": "An error has occurred.",
+ "Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
+ "Size can only be a number between %(min)s MB and %(max)s MB": "Size can only be a number between %(min)s MB and %(max)s MB",
+ "Number of messages can only be a number between %(min)s and %(max)s": "Number of messages can only be a number between %(min)s and %(max)s",
+ "Number of messages": "Number of messages",
+ "MB": "MB",
+ "Export Successful": "Export Successful",
+ "The export was cancelled successfully": "The export was cancelled successfully",
+ "Your export was successful. Find it in your Downloads folder.": "Your export was successful. Find it in your Downloads folder.",
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
+ "Stop": "Stop",
+ "Exporting your data": "Exporting your data",
+ "Export Chat": "Export Chat",
+ "Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
+ "Format": "Format",
+ "Size Limit": "Size Limit",
+ "Include Attachments": "Include Attachments",
+ "Export": "Export",
"Feedback sent": "Feedback sent",
"Rate %(brand)s": "Rate %(brand)s",
"Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.",
@@ -3053,24 +3070,6 @@
"Space Autocomplete": "Space Autocomplete",
"Users": "Users",
"User Autocomplete": "User Autocomplete",
- "Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
- "Size can only be a number between %(min)s MB and %(max)s MB": "Size can only be a number between %(min)s MB and %(max)s MB",
- "Number of messages can only be a number between %(min)s and %(max)s": "Number of messages can only be a number between %(min)s and %(max)s",
- "Number of messages": "Number of messages",
- "MB": "MB",
- "Export Cancelled": "Export Cancelled",
- "The export was cancelled successfully": "The export was cancelled successfully",
- "Export Successful": "Export Successful",
- "Your export was successful. Find it in your Downloads folder.": "Your export was successful. Find it in your Downloads folder.",
- "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
- "Stop": "Stop",
- "Exporting your data": "Exporting your data",
- "Export Chat": "Export Chat",
- "Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
- "Format": "Format",
- "Size Limit": "Size Limit",
- "Include Attachments": "Include Attachments",
- "Export": "Export",
"We'll store an encrypted copy of your keys on our server. Secure your backup with a Security Phrase.": "We'll store an encrypted copy of your keys on our server. Secure your backup with a Security Phrase.",
"For maximum security, this should be different from your account password.": "For maximum security, this should be different from your account password.",
"Enter a Security Phrase": "Enter a Security Phrase",
From 0c59389ae101e8d4e6df1c32c52934506bf1bc39 Mon Sep 17 00:00:00 2001
From: LinAGKar <linus.kardell@gmail.com>
Date: Thu, 23 Sep 2021 07:12:25 +0000
Subject: [PATCH 188/313] Translated using Weblate (Swedish)
Currently translated at 100.0% (3166 of 3166 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sv/
---
src/i18n/strings/sv.json | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/sv.json b/src/i18n/strings/sv.json
index ea2e06e381..50ff9f5056 100644
--- a/src/i18n/strings/sv.json
+++ b/src/i18n/strings/sv.json
@@ -3159,5 +3159,10 @@
"To join a space you'll need an invite.": "För att gå med i ett utrymme så behöver du en inbjudan.",
"You can also make Spaces from <a>communities</a>.": "Du kan också göra utrymmen av <a>gemenskaper</a>.",
"Temporarily show communities instead of Spaces for this session. Support for this will be removed in the near future. This will reload Element.": "Visa tillfälligt gemenskaper istället för utrymmen för den här sessionen. Stöd för detta kommer snart att tas bort. Detta kommer att ladda om Element.",
- "Display Communities instead of Spaces": "Visa gemenskaper istället för utrymmen"
+ "Display Communities instead of Spaces": "Visa gemenskaper istället för utrymmen",
+ "Would you like to leave the rooms in this space?": "Vill du lämna rummen i det här utrymmet?",
+ "You are about to leave <spaceName/>.": "Du kommer att lämna <spaceName/>.",
+ "Leave some rooms": "Lämna vissa rum",
+ "Leave all rooms": "Lämna alla rum",
+ "Don't leave any rooms": "Lämna inga rum"
}
From 7dbdeacd2bfd6b05482df713eba75b5881d89c10 Mon Sep 17 00:00:00 2001
From: Wiktor Przybylski <wikprzybylski@gmail.com>
Date: Fri, 24 Sep 2021 06:06:36 +0000
Subject: [PATCH 189/313] Translated using Weblate (Polish)
Currently translated at 65.6% (2078 of 3166 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/pl/
---
src/i18n/strings/pl.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/i18n/strings/pl.json b/src/i18n/strings/pl.json
index 174f77d955..88d8b53afc 100644
--- a/src/i18n/strings/pl.json
+++ b/src/i18n/strings/pl.json
@@ -1068,7 +1068,7 @@
"Find a room… (e.g. %(exampleRoom)s)": "Znajdź pokój… (np. %(exampleRoom)s)",
"If you can't find the room you're looking for, ask for an invite or <a>Create a new room</a>.": "Jeżeli nie możesz znaleźć szukanego pokoju, poproś o zaproszenie albo <a>stwórz nowy pokój</a>.",
"Show typing notifications": "Pokazuj powiadomienia o pisaniu",
- "Match system theme": "Dopasuj do motywu systemego",
+ "Match system theme": "Dopasuj do motywu systemowego",
"They match": "Pasują do siebie",
"They don't match": "Nie pasują do siebie",
"Upload": "Prześlij",
From 5c7f5dae6fc0f3ceedee053fbef26b0afe38c357 Mon Sep 17 00:00:00 2001
From: Hubert Jasudowicz <hubert.jasudowicz@gmail.com>
Date: Thu, 23 Sep 2021 14:33:01 +0000
Subject: [PATCH 190/313] Translated using Weblate (Polish)
Currently translated at 65.6% (2078 of 3166 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/pl/
---
src/i18n/strings/pl.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/i18n/strings/pl.json b/src/i18n/strings/pl.json
index 88d8b53afc..d82e55daf0 100644
--- a/src/i18n/strings/pl.json
+++ b/src/i18n/strings/pl.json
@@ -933,7 +933,7 @@
"Show hidden events in timeline": "Pokaż ukryte wydarzenia na linii czasowej",
"Allow fallback call assist server turn.matrix.org when your homeserver does not offer one (your IP address would be shared during a call)": "Pozwól na awaryjny serwer wspomagania połączeń turn.matrix.org, gdy Twój serwer domowy takiego nie oferuje (Twój adres IP będzie udostępniony podczas połączenia)",
"Messages containing my username": "Wiadomości zawierające moją nazwę użytkownika",
- "Encrypted messages in one-to-one chats": "Zaszyforwane wiadomości w rozmowach jeden-do-jednego",
+ "Encrypted messages in one-to-one chats": "Zaszyfrowane wiadomości w rozmowach jeden-do-jednego",
"Encrypted messages in group chats": "Zaszyfrowane wiadomości w rozmowach grupowych",
"When rooms are upgraded": "Kiedy pokoje są uaktualniane",
"The other party cancelled the verification.": "Druga strona anulowała weryfikację.",
From 8694d88177713840b1d0848245e3f8bc8bd63486 Mon Sep 17 00:00:00 2001
From: random <dictionary@tutamail.com>
Date: Thu, 23 Sep 2021 09:24:33 +0000
Subject: [PATCH 191/313] Translated using Weblate (Italian)
Currently translated at 99.9% (3165 of 3166 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/it/
---
src/i18n/strings/it.json | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/it.json b/src/i18n/strings/it.json
index 6cf5ff1e07..6792e62c9f 100644
--- a/src/i18n/strings/it.json
+++ b/src/i18n/strings/it.json
@@ -3161,5 +3161,10 @@
"Temporarily show communities instead of Spaces for this session. Support for this will be removed in the near future. This will reload Element.": "Mostra temporaneamente le comunità invece degli spazi per questa sessione. Il supporto per questa azione verrà rimosso nel breve termine. Element verrà ricaricato.",
"Display Communities instead of Spaces": "Mostra le comunità invece degli spazi",
"%(reactors)s reacted with %(content)s": "%(reactors)s ha reagito con %(content)s",
- "Joining space …": "Ingresso nello spazio …"
+ "Joining space …": "Ingresso nello spazio …",
+ "Would you like to leave the rooms in this space?": "Vuoi uscire dalle stanze di questo spazio?",
+ "You are about to leave <spaceName/>.": "Stai per uscire da <spaceName/>.",
+ "Leave some rooms": "Esci da alcune stanze",
+ "Leave all rooms": "Esci da tutte le stanze",
+ "Don't leave any rooms": "Non uscire da alcuna stanza"
}
From 6dbe61de2b94343b717809d3559d8632bd33667a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Priit=20J=C3=B5er=C3=BC=C3=BCt?= <riot@joeruut.com>
Date: Wed, 22 Sep 2021 19:46:36 +0000
Subject: [PATCH 192/313] Translated using Weblate (Estonian)
Currently translated at 99.9% (3165 of 3166 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/et/
---
src/i18n/strings/et.json | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/et.json b/src/i18n/strings/et.json
index cb158ad4cf..b4f58e04da 100644
--- a/src/i18n/strings/et.json
+++ b/src/i18n/strings/et.json
@@ -3158,5 +3158,10 @@
"Before you upgrade": "Enne uuendamist",
"To join a space you'll need an invite.": "Kogukonnakeskusega liitumiseks vajad kutset.",
"%(reactors)s reacted with %(content)s": "%(reactors)s kasutajat reageeris järgnevalt: %(content)s",
- "Joining space …": "Liitun kohukonnakeskusega…"
+ "Joining space …": "Liitun kohukonnakeskusega…",
+ "Would you like to leave the rooms in this space?": "Kas sa soovid lahkuda ka selle kogukonna jututubadest?",
+ "You are about to leave <spaceName/>.": "Sa oled lahkumas <spaceName/> kogukonnast.",
+ "Leave some rooms": "Lahku mõnedest jututubadest",
+ "Leave all rooms": "Lahku kõikidest jututubadest",
+ "Don't leave any rooms": "Ära lahku ühestki jututoast"
}
From 8348add67fb647e54d2dfb1218f2367176076f66 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germains@element.io>
Date: Fri, 24 Sep 2021 14:19:11 +0100
Subject: [PATCH 193/313] Add MessageActionBar to ThreadView
---
src/components/structures/ThreadView.tsx | 2 +-
.../views/messages/MessageActionBar.tsx | 7 +++-
src/components/views/rooms/EventTile.tsx | 37 +++++++++++++++++++
3 files changed, 44 insertions(+), 2 deletions(-)
diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx
index bb31c32877..180a870cd5 100644
--- a/src/components/structures/ThreadView.tsx
+++ b/src/components/structures/ThreadView.tsx
@@ -139,7 +139,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
sendReadReceiptOnLoad={false} // No RR support in thread's MVP
timelineSet={this.state?.thread?.timelineSet}
showUrlPreview={true}
- tileShape={TileShape.Notif}
+ tileShape={TileShape.Thread}
empty={<div>empty</div>}
alwaysShowTimestamps={true}
layout={Layout.Group}
diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx
index f76fa32ddc..f7c58e27dc 100644
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/src/components/views/messages/MessageActionBar.tsx
@@ -133,12 +133,17 @@ interface IMessageActionBarProps {
getTile: () => any; // TODO: FIXME, haven't figured out what the return type is here
getReplyThread?: () => ReplyThread;
onFocusChange?: (menuDisplayed: boolean) => void;
+ isInThreadTimeline?: boolean;
}
@replaceableComponent("views.messages.MessageActionBar")
export default class MessageActionBar extends React.PureComponent<IMessageActionBarProps> {
public static contextType = RoomContext;
+ public static defaultProps = {
+ isInThreadTimeline: false,
+ };
+
public componentDidMount(): void {
if (this.props.mxEvent.status && this.props.mxEvent.status !== EventStatus.SENT) {
this.props.mxEvent.on("Event.status", this.onSent);
@@ -283,7 +288,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
// Like the resend button, the react and reply buttons need to appear before the edit.
// The only catch is we do the reply button first so that we can make sure the react
// button is the very first button without having to do length checks for `splice()`.
- if (this.context.canReply) {
+ if (this.context.canReply && !this.props.isInThreadTimeline) {
toolbarOpts.splice(0, 0, <>
<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index e1f0eb5368..06be8f943e 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -192,6 +192,7 @@ export enum TileShape {
Notif = "notif",
FileGrid = "file_grid",
Pinned = "pinned",
+ Thread = "thread",
}
interface IProps {
@@ -1047,6 +1048,7 @@ export default class EventTile extends React.Component<IProps, IState> {
}
}
+ const isInThreadTimeline = this.props.tileShape === TileShape.Thread;
const actionBar = !isEditing ? <MessageActionBar
mxEvent={this.props.mxEvent}
reactions={this.state.reactions}
@@ -1054,6 +1056,7 @@ export default class EventTile extends React.Component<IProps, IState> {
getTile={this.getTile}
getReplyThread={this.getReplyThread}
onFocusChange={this.onActionBarFocusChange}
+ isInThreadTimeline={isInThreadTimeline}
/> : undefined;
const showTimestamp = this.props.mxEvent.getTs()
@@ -1160,6 +1163,40 @@ export default class EventTile extends React.Component<IProps, IState> {
</div>,
]);
}
+ case TileShape.Thread: {
+ const room = this.context.getRoom(this.props.mxEvent.getRoomId());
+ return React.createElement(this.props.as || "li", {
+ "className": classes,
+ "aria-live": ariaLive,
+ "aria-atomic": true,
+ "data-scroll-tokens": scrollToken,
+ }, [
+ <div className="mx_EventTile_roomName" key="mx_EventTile_roomName">
+ <RoomAvatar room={room} width={28} height={28} />
+ <a href={permalink} onClick={this.onPermalinkClicked}>
+ { room ? room.name : '' }
+ </a>
+ </div>,
+ <div className="mx_EventTile_senderDetails" key="mx_EventTile_senderDetails">
+ { avatar }
+ <a href={permalink} onClick={this.onPermalinkClicked}>
+ { sender }
+ { timestamp }
+ </a>
+ </div>,
+ <div className="mx_EventTile_line" key="mx_EventTile_line">
+ <EventTileType ref={this.tile}
+ mxEvent={this.props.mxEvent}
+ highlights={this.props.highlights}
+ highlightLink={this.props.highlightLink}
+ showUrlPreview={this.props.showUrlPreview}
+ onHeightChanged={this.props.onHeightChanged}
+ tileShape={this.props.tileShape}
+ />
+ { actionBar }
+ </div>,
+ ]);
+ }
case TileShape.FileGrid: {
return React.createElement(this.props.as || "li", {
"className": classes,
From bffebb9304099822e06838917ed2894a6638ebc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 24 Sep 2021 20:37:59 +0200
Subject: [PATCH 194/313] Convert index to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/usercontent/{index.js => index.ts} | 34 ++++++++++++--------------
1 file changed, 16 insertions(+), 18 deletions(-)
rename src/usercontent/{index.js => index.ts} (61%)
diff --git a/src/usercontent/index.js b/src/usercontent/index.ts
similarity index 61%
rename from src/usercontent/index.js
rename to src/usercontent/index.ts
index c03126ec80..f143f16720 100644
--- a/src/usercontent/index.js
+++ b/src/usercontent/index.ts
@@ -1,5 +1,5 @@
let hasCalled = false;
-function remoteRender(event) {
+function remoteRender(event: MessageEvent): void {
const data = event.data;
// If we're handling secondary calls, start from scratch
@@ -11,10 +11,11 @@ function remoteRender(event) {
const img = document.createElement("span"); // we'll mask it as an image
img.id = "img";
- const a = document.createElement("a");
+ const a: HTMLAnchorElement = document.createElement("a");
a.id = "a";
a.rel = "noreferrer noopener";
a.download = data.download;
+ // @ts-ignore
a.style = data.style;
a.style.fontFamily = "Arial, Helvetica, Sans-Serif";
a.href = window.URL.createObjectURL(data.blob);
@@ -23,24 +24,21 @@ function remoteRender(event) {
// Apply image style after so we can steal the anchor's colour.
// Style copied from a rendered version of mx_MFileBody_download_icon
- img.style = (data.imgStyle || "" +
- "width: 12px; height: 12px;" +
- "-webkit-mask-size: 12px;" +
- "mask-size: 12px;" +
- "-webkit-mask-position: center;" +
- "mask-position: center;" +
- "-webkit-mask-repeat: no-repeat;" +
- "mask-repeat: no-repeat;" +
- "display: inline-block;") + "" +
-
- // Always add these styles
- `-webkit-mask-image: url('${data.imgSrc}');` +
- `mask-image: url('${data.imgSrc}');` +
- `background-color: ${a.style.color};`;
+ // @ts-ignore
+ img.style = data.imgStyle ?? "";
+ img.style.width = "12px";
+ img.style.height = "12px";
+ img.style.webkitMaskSize = "12px";
+ img.style.webkitMaskPosition = "center";
+ img.style.webkitMaskRepeat = "no-repeat";
+ img.style.display = "inline-block";
+ img.style.webkitMaskImage = `url('${data.imgSrc}')`;
+ img.style.backgroundColor = `${a.style.color}`;
const body = document.body;
// Don't display scrollbars if the link takes more than one line to display.
- body.style = "margin: 0px; overflow: hidden";
+ body.style .margin = "0px";
+ body.style.overflow = "hidden";
body.appendChild(a);
if (event.data.auto) {
@@ -48,7 +46,7 @@ function remoteRender(event) {
}
}
-window.onmessage = function(e) {
+window.onmessage = function(e: MessageEvent): void {
if (e.origin === window.location.origin) {
if (e.data.blob) remoteRender(e);
}
From 27f74b3ebd0a72e192e2d9bc7c07de00813b47c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 25 Sep 2021 07:53:38 +0200
Subject: [PATCH 195/313] Remove unnecessary type
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/usercontent/index.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/usercontent/index.ts b/src/usercontent/index.ts
index f143f16720..82e8ee0d81 100644
--- a/src/usercontent/index.ts
+++ b/src/usercontent/index.ts
@@ -11,7 +11,7 @@ function remoteRender(event: MessageEvent): void {
const img = document.createElement("span"); // we'll mask it as an image
img.id = "img";
- const a: HTMLAnchorElement = document.createElement("a");
+ const a = document.createElement("a");
a.id = "a";
a.rel = "noreferrer noopener";
a.download = data.download;
From 1a2476609c0bea8505063eae00a08b5c37930c68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 25 Sep 2021 07:55:40 +0200
Subject: [PATCH 196/313] Fix code to be equivalent to the previous one
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/usercontent/index.ts | 23 +++++++++++++----------
1 file changed, 13 insertions(+), 10 deletions(-)
diff --git a/src/usercontent/index.ts b/src/usercontent/index.ts
index 82e8ee0d81..eaa8c86ec6 100644
--- a/src/usercontent/index.ts
+++ b/src/usercontent/index.ts
@@ -24,16 +24,19 @@ function remoteRender(event: MessageEvent): void {
// Apply image style after so we can steal the anchor's colour.
// Style copied from a rendered version of mx_MFileBody_download_icon
- // @ts-ignore
- img.style = data.imgStyle ?? "";
- img.style.width = "12px";
- img.style.height = "12px";
- img.style.webkitMaskSize = "12px";
- img.style.webkitMaskPosition = "center";
- img.style.webkitMaskRepeat = "no-repeat";
- img.style.display = "inline-block";
- img.style.webkitMaskImage = `url('${data.imgSrc}')`;
- img.style.backgroundColor = `${a.style.color}`;
+ if (data.imgStyle) {
+ // @ts-ignore
+ img.style = data.imgStyle;
+ } else {
+ img.style.width = "12px";
+ img.style.height = "12px";
+ img.style.webkitMaskSize = "12px";
+ img.style.webkitMaskPosition = "center";
+ img.style.webkitMaskRepeat = "no-repeat";
+ img.style.display = "inline-block";
+ img.style.webkitMaskImage = `url('${data.imgSrc}')`;
+ img.style.backgroundColor = `${a.style.color}`;
+ }
const body = document.body;
// Don't display scrollbars if the link takes more than one line to display.
From 3450e91e32cc830a07226f7a2cfe12a0cb8a22b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 25 Sep 2021 09:58:01 +0200
Subject: [PATCH 197/313] Improve typing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/usercontent/index.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/usercontent/index.ts b/src/usercontent/index.ts
index eaa8c86ec6..df551e88e6 100644
--- a/src/usercontent/index.ts
+++ b/src/usercontent/index.ts
@@ -8,10 +8,10 @@ function remoteRender(event: MessageEvent): void {
}
hasCalled = true;
- const img = document.createElement("span"); // we'll mask it as an image
+ const img: HTMLSpanElement = document.createElement("span"); // we'll mask it as an image
img.id = "img";
- const a = document.createElement("a");
+ const a: HTMLAnchorElement = document.createElement("a");
a.id = "a";
a.rel = "noreferrer noopener";
a.download = data.download;
From c21533f7afe774a6a3ab8478323e8a97099eca8e Mon Sep 17 00:00:00 2001
From: jelv <post@jelv.nl>
Date: Sat, 25 Sep 2021 08:06:29 +0000
Subject: [PATCH 198/313] Translated using Weblate (Dutch)
Currently translated at 100.0% (3166 of 3166 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/nl/
---
src/i18n/strings/nl.json | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/i18n/strings/nl.json b/src/i18n/strings/nl.json
index 8fe877544c..950eaa68a2 100644
--- a/src/i18n/strings/nl.json
+++ b/src/i18n/strings/nl.json
@@ -1271,7 +1271,7 @@
"Find a room…": "Zoek een gesprek…",
"Find a room… (e.g. %(exampleRoom)s)": "Zoek een gesprek… (bv. %(exampleRoom)s)",
"If you can't find the room you're looking for, ask for an invite or <a>Create a new room</a>.": "Als u de kamer niet kunt vinden is het mogelijk privé, vraag dan om een uitnodiging of <a>maak een nieuwe kamer aan</a>.",
- "Explore rooms": "Ontdek kamers",
+ "Explore rooms": "Kamers ontdekken",
"Show previews/thumbnails for images": "Miniaturen voor afbeeldingen tonen",
"Clear cache and reload": "Cache wissen en herladen",
"You are about to remove %(count)s messages by %(user)s. This cannot be undone. Do you wish to continue?|one": "U staat op het punt 1 bericht door %(user)s te verwijderen. Dit kan niet ongedaan gemaakt worden. Wilt u doorgaan?",
@@ -2345,7 +2345,7 @@
"Page Down": "Page Down",
"Esc": "Esc",
"Enter": "Enter",
- "Space": "Spatie",
+ "Space": "Ruimte",
"Ctrl": "Ctrl",
"Super": "Super",
"Shift": "Shift",
From 4f8c2ecaa2adee822a78c658da936598dfac54fa Mon Sep 17 00:00:00 2001
From: Tirifto <tirifto@posteo.cz>
Date: Sat, 25 Sep 2021 13:39:30 +0000
Subject: [PATCH 199/313] Translated using Weblate (Esperanto)
Currently translated at 98.6% (3123 of 3166 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/eo/
---
src/i18n/strings/eo.json | 27 ++++++++++++++++++++++++++-
1 file changed, 26 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/eo.json b/src/i18n/strings/eo.json
index 86ffb94251..fd3631c297 100644
--- a/src/i18n/strings/eo.json
+++ b/src/i18n/strings/eo.json
@@ -3099,5 +3099,30 @@
"What kind of Space do you want to create?": "Kian aron volas vi krei?",
"All rooms you're in will appear in Home.": "Ĉiuj ĉambroj, kie vi estas, aperos en la ĉefpaĝo.",
"Show all rooms in Home": "Montri ĉiujn ĉambrojn en ĉefpaĝo",
- "%(senderName)s pinned <a>a message</a> to this room. See all <b>pinned messages</b>.": "%(senderName)s fiksis <a>mesaĝon</a> al ĉi tiu ĉambro. Vidu ĉiujn <b>fiksitajn mesaĝojn</b>."
+ "%(senderName)s pinned <a>a message</a> to this room. See all <b>pinned messages</b>.": "%(senderName)s fiksis <a>mesaĝon</a> al ĉi tiu ĉambro. Vidu ĉiujn <b>fiksitajn mesaĝojn</b>.",
+ "To avoid these issues, create a <a>new encrypted room</a> for the conversation you plan to have.": "Por eviti tiujn problemojn, kreu <a>novan ĉifritan ĉambron</a> por la planata interparolo.",
+ "<b>It's not recommended to add encryption to public rooms.</b>Anyone can find and join public rooms, so anyone can read messages in them. You'll get none of the benefits of encryption, and you won't be able to turn it off later. Encrypting messages in a public room will make receiving and sending messages slower.": "<b>Ne rekomendate estas aldoni ĉifradon al publikaj ĉambroj.</b> Ĉiu ajn povas trovi publikajn ĉambrojn kaj aliĝi, do ĉiu ajn povas legi ties mesaĝojn. Vi havos neniujn avantaĝojn de ĉifrado, kaj vi ne povos ĝin malŝalti pli poste. Ĉifrado en publikaj ĉambroj malrapidigos ricevadon kaj sendadon de mesaĝoj.",
+ "Are you sure you want to add encryption to this public room?": "Ĉu vi certas, ke vi volas aldoni ĉifradon al ĉi tiu publika ĉambro?",
+ "Select the roles required to change various parts of the space": "Elekti rolojn bezonatajn por ŝanĝado de diversaj partoj de la aro",
+ "Change description": "Ŝanĝi priskribon",
+ "Change main address for the space": "Ŝanĝi ĉefadreson de aro",
+ "Change space name": "Ŝanĝi nomon de aro",
+ "Change space avatar": "Ŝanĝi bildon de aro",
+ "Upgrade anyway": "Tamen gradaltigi",
+ "This room is in some spaces you’re not an admin of. In those spaces, the old room will still be shown, but people will be prompted to join the new one.": "Ĉi tiu ĉambro estas en iuj aroj, kiujn vi ne administras. En tiuj aroj, la malnova ĉambro aperos, sed tie oni ricevos avizon aliĝi al la nova.",
+ "Before you upgrade": "Antaŭ ol vi gradaltigos",
+ "Anyone in <spaceName/> can find and join. You can select other spaces too.": "Ĉiu en <spaceName/> povas trovi kaj aliĝi. Vi povas elekti ankaŭ aliajn arojn.",
+ "Currently, %(count)s spaces have access|one": "Nun, aro povas aliri",
+ "& %(count)s more|one": "kaj %(count)s pli",
+ "To join a space you'll need an invite.": "Por aliĝi al aro, vi bezonas inviton.",
+ "You can also make Spaces from <a>communities</a>.": "Vi ankaŭ povas krei Arojn el <a>komunumoj</a>.",
+ "Temporarily show communities instead of Spaces for this session. Support for this will be removed in the near future. This will reload Element.": "Provizore montri komunumojn anstataŭ arojn por tiu ĉi salutaĵo. Subteno de tio ĉi baldaŭ malaperos. Ĉi tio re-enlegos Elementon.",
+ "Display Communities instead of Spaces": "Montri komunumojn anstataŭ arojn",
+ "Autoplay videos": "Memage ludi filmojn",
+ "Autoplay GIFs": "Memage ludi GIF-ojn",
+ "Multiple integration managers (requires manual setup)": "Pluraj kunigiloj (bezonas permanan agordon)",
+ "Threaded messaging": "Mesaĝaj fadenoj",
+ "%(senderName)s unpinned a message from this room. See all pinned messages.": "%(senderName)s malfiksis mesaĝon de ĉi tiu ĉambro. Vidu ĉiujn fiksitajn mesaĝojn.",
+ "%(senderName)s unpinned <a>a message</a> from this room. See all <b>pinned messages</b>.": "%(senderName)s malfiksis <a>mesaĝon</a> de ĉi tiu ĉambro. Vidu ĉiujn <b>fiksitajn mesaĝojn</b>.",
+ "%(senderName)s pinned a message to this room. See all pinned messages.": "%(senderName)s fiksis mesaĝon al ĉi tiu ĉambro. Vidu ĉiujn fiksitajn mesaĝojn."
}
From 97fb55bd37cc63b0342cb7c3dccb85b59b6abc45 Mon Sep 17 00:00:00 2001
From: Linerly <linerly@protonmail.com>
Date: Sat, 25 Sep 2021 00:32:07 +0000
Subject: [PATCH 200/313] Translated using Weblate (Indonesian)
Currently translated at 6.8% (216 of 3166 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/id/
---
src/i18n/strings/id.json | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/i18n/strings/id.json b/src/i18n/strings/id.json
index c0dc0b926a..c96a10ea2a 100644
--- a/src/i18n/strings/id.json
+++ b/src/i18n/strings/id.json
@@ -199,7 +199,7 @@
"The version of %(brand)s": "Versi %(brand)s",
"Your language of choice": "Pilihan bahasamu",
"Your homeserver's URL": "URL Homeserver Anda",
- "e.g. %(exampleValue)s": "",
+ "e.g. %(exampleValue)s": "mis. %(exampleValue)s",
"Every page you use in the app": "Setiap halaman yang digunakan di app",
"e.g. <CurrentPageURL>": "e.g. <URLHalamanSaatIni>",
"Your device resolution": "Resolusi perangkat Anda",
@@ -214,5 +214,5 @@
"Explore rooms": "Jelajahi ruang",
"Sign In": "Masuk",
"Create Account": "Buat Akun",
- "Identity server": "Server Identitas"
+ "Identity server": "Server identitas"
}
From bee85a0bcd16bae07a53272484901f95dc6dd5f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 24 Sep 2021 19:55:52 +0200
Subject: [PATCH 201/313] Convert EditHistoryMessage to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
...storyMessage.js => EditHistoryMessage.tsx} | 85 ++++++++++---------
.../views/messages/RedactedBody.tsx | 7 +-
2 files changed, 53 insertions(+), 39 deletions(-)
rename src/components/views/messages/{EditHistoryMessage.js => EditHistoryMessage.tsx} (73%)
diff --git a/src/components/views/messages/EditHistoryMessage.js b/src/components/views/messages/EditHistoryMessage.tsx
similarity index 73%
rename from src/components/views/messages/EditHistoryMessage.js
rename to src/components/views/messages/EditHistoryMessage.tsx
index 2c6a567f6b..1abed87b76 100644
--- a/src/components/views/messages/EditHistoryMessage.js
+++ b/src/components/views/messages/EditHistoryMessage.tsx
@@ -15,107 +15,112 @@ limitations under the License.
*/
import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
import * as HtmlUtils from '../../../HtmlUtils';
import { editBodyDiffToHtml } from '../../../utils/MessageDiffUtils';
import { formatTime } from '../../../DateUtils';
-import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { EventStatus, MatrixEvent } from 'matrix-js-sdk/src/models/event';
import { pillifyLinks, unmountPills } from '../../../utils/pillify';
import { _t } from '../../../languageHandler';
-import * as sdk from '../../../index';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import Modal from '../../../Modal';
import classNames from 'classnames';
import RedactedBody from "./RedactedBody";
import { replaceableComponent } from "../../../utils/replaceableComponent";
+import AccessibleButton from "../elements/AccessibleButton";
+import ConfirmAndWaitRedactDialog from "../dialogs/ConfirmAndWaitRedactDialog";
+import ViewSource from "../../structures/ViewSource";
function getReplacedContent(event) {
const originalContent = event.getOriginalContent();
return originalContent["m.new_content"] || originalContent;
}
-@replaceableComponent("views.messages.EditHistoryMessage")
-export default class EditHistoryMessage extends React.PureComponent {
- static propTypes = {
- // the message event being edited
- mxEvent: PropTypes.instanceOf(MatrixEvent).isRequired,
- previousEdit: PropTypes.instanceOf(MatrixEvent),
- isBaseEvent: PropTypes.bool,
- };
+interface IProps {
+ // the message event being edited
+ mxEvent: MatrixEvent;
+ previousEdit?: MatrixEvent;
+ isBaseEvent?: boolean;
+ isTwelveHour?: boolean;
+}
- constructor(props) {
+interface IState {
+ canRedact: boolean;
+ sendStatus: EventStatus;
+}
+
+@replaceableComponent("views.messages.EditHistoryMessage")
+export default class EditHistoryMessage extends React.PureComponent<IProps, IState> {
+ private content = createRef<HTMLDivElement>();
+ private pills: Element[] = [];
+
+ constructor(props: IProps) {
super(props);
+
const cli = MatrixClientPeg.get();
const { userId } = cli.credentials;
const event = this.props.mxEvent;
const room = cli.getRoom(event.getRoomId());
if (event.localRedactionEvent()) {
- event.localRedactionEvent().on("status", this._onAssociatedStatusChanged);
+ event.localRedactionEvent().on("status", this.onAssociatedStatusChanged);
}
const canRedact = room.currentState.maySendRedactionForEvent(event, userId);
this.state = { canRedact, sendStatus: event.getAssociatedStatus() };
-
- this._content = createRef();
- this._pills = [];
}
- _onAssociatedStatusChanged = () => {
+ private onAssociatedStatusChanged = (): void => {
this.setState({ sendStatus: this.props.mxEvent.getAssociatedStatus() });
};
- _onRedactClick = async () => {
+ private onRedactClick = async (): Promise<void> => {
const event = this.props.mxEvent;
const cli = MatrixClientPeg.get();
- const ConfirmAndWaitRedactDialog = sdk.getComponent("dialogs.ConfirmAndWaitRedactDialog");
Modal.createTrackedDialog('Confirm Redact Dialog', 'Edit history', ConfirmAndWaitRedactDialog, {
redact: () => cli.redactEvent(event.getRoomId(), event.getId()),
}, 'mx_Dialog_confirmredact');
};
- _onViewSourceClick = () => {
- const ViewSource = sdk.getComponent('structures.ViewSource');
+ private onViewSourceClick = (): void => {
Modal.createTrackedDialog('View Event Source', 'Edit history', ViewSource, {
mxEvent: this.props.mxEvent,
}, 'mx_Dialog_viewsource');
};
- pillifyLinks() {
+ private pillifyLinks(): void {
// not present for redacted events
- if (this._content.current) {
- pillifyLinks(this._content.current.children, this.props.mxEvent, this._pills);
+ if (this.content.current) {
+ pillifyLinks(this.content.current.children, this.props.mxEvent, this.pills);
}
}
- componentDidMount() {
+ public componentDidMount(): void {
this.pillifyLinks();
}
- componentWillUnmount() {
- unmountPills(this._pills);
+ public componentWillUnmount(): void {
+ unmountPills(this.pills);
const event = this.props.mxEvent;
if (event.localRedactionEvent()) {
- event.localRedactionEvent().off("status", this._onAssociatedStatusChanged);
+ event.localRedactionEvent().off("status", this.onAssociatedStatusChanged);
}
}
- componentDidUpdate() {
+ public componentDidUpdate(): void {
this.pillifyLinks();
}
- _renderActionBar() {
- const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+ private renderActionBar(): JSX.Element {
// hide the button when already redacted
let redactButton;
if (!this.props.mxEvent.isRedacted() && !this.props.isBaseEvent && this.state.canRedact) {
redactButton = (
- <AccessibleButton onClick={this._onRedactClick}>
+ <AccessibleButton onClick={this.onRedactClick}>
{ _t("Remove") }
</AccessibleButton>
);
}
const viewSourceButton = (
- <AccessibleButton onClick={this._onViewSourceClick}>
+ <AccessibleButton onClick={this.onViewSourceClick}>
{ _t("View Source") }
</AccessibleButton>
);
@@ -128,7 +133,7 @@ export default class EditHistoryMessage extends React.PureComponent {
);
}
- render() {
+ public render(): JSX.Element {
const { mxEvent } = this.props;
const content = getReplacedContent(mxEvent);
let contentContainer;
@@ -139,18 +144,22 @@ export default class EditHistoryMessage extends React.PureComponent {
if (this.props.previousEdit) {
contentElements = editBodyDiffToHtml(getReplacedContent(this.props.previousEdit), content);
} else {
- contentElements = HtmlUtils.bodyToHtml(content, null, { stripReplyFallback: true });
+ contentElements = HtmlUtils.bodyToHtml(
+ content,
+ null,
+ { stripReplyFallback: true, returnString: false },
+ );
}
if (mxEvent.getContent().msgtype === "m.emote") {
const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
contentContainer = (
- <div className="mx_EventTile_content" ref={this._content}>*
+ <div className="mx_EventTile_content" ref={this.content}>*
<span className="mx_MEmoteBody_sender">{ name }</span>
{ contentElements }
</div>
);
} else {
- contentContainer = <div className="mx_EventTile_content" ref={this._content}>{ contentElements }</div>;
+ contentContainer = <div className="mx_EventTile_content" ref={this.content}>{ contentElements }</div>;
}
}
@@ -167,7 +176,7 @@ export default class EditHistoryMessage extends React.PureComponent {
<div className="mx_EventTile_line">
<span className="mx_MessageTimestamp">{ timestamp }</span>
{ contentContainer }
- { this._renderActionBar() }
+ { this.renderActionBar() }
</div>
</div>
</li>
diff --git a/src/components/views/messages/RedactedBody.tsx b/src/components/views/messages/RedactedBody.tsx
index c2e137c97b..7202e3a2e5 100644
--- a/src/components/views/messages/RedactedBody.tsx
+++ b/src/components/views/messages/RedactedBody.tsx
@@ -21,8 +21,13 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { formatFullDate } from "../../../DateUtils";
import SettingsStore from "../../../settings/SettingsStore";
import { IBodyProps } from "./IBodyProps";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-const RedactedBody = React.forwardRef<any, IBodyProps>(({ mxEvent }, ref) => {
+interface IProps {
+ mxEvent: MatrixEvent;
+}
+
+const RedactedBody = React.forwardRef<any, IProps | IBodyProps>(({ mxEvent }, ref) => {
const cli: MatrixClient = useContext(MatrixClientContext);
let text = _t("Message deleted");
From ff1c1fbc7852b7b86aeb3bd899a974f638c6e14e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 24 Sep 2021 19:58:28 +0200
Subject: [PATCH 202/313] Convert MjolnirBody to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
.../{MjolnirBody.js => MjolnirBody.tsx} | 24 +++++++++----------
1 file changed, 12 insertions(+), 12 deletions(-)
rename src/components/views/messages/{MjolnirBody.js => MjolnirBody.tsx} (73%)
diff --git a/src/components/views/messages/MjolnirBody.js b/src/components/views/messages/MjolnirBody.tsx
similarity index 73%
rename from src/components/views/messages/MjolnirBody.js
rename to src/components/views/messages/MjolnirBody.tsx
index 23f255b569..c21a9a353e 100644
--- a/src/components/views/messages/MjolnirBody.js
+++ b/src/components/views/messages/MjolnirBody.tsx
@@ -15,22 +15,22 @@ limitations under the License.
*/
import React from 'react';
-import PropTypes from 'prop-types';
import { _t } from '../../../languageHandler';
import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
+interface IProps {
+ mxEvent: MatrixEvent;
+ onMessageAllowed: () => void;
+}
@replaceableComponent("views.messages.MjolnirBody")
-export default class MjolnirBody extends React.Component {
- static propTypes = {
- mxEvent: PropTypes.object.isRequired,
- onMessageAllowed: PropTypes.func.isRequired,
- };
-
- constructor() {
- super();
+export default class MjolnirBody extends React.Component<IProps> {
+ constructor(props: IProps) {
+ super(props);
}
- _onAllowClick = (e) => {
+ private onAllowClick = (e: React.MouseEvent): void => {
e.preventDefault();
e.stopPropagation();
@@ -39,11 +39,11 @@ export default class MjolnirBody extends React.Component {
this.props.onMessageAllowed();
};
- render() {
+ public render(): JSX.Element {
return (
<div className='mx_MjolnirBody'><i>{ _t(
"You have ignored this user, so their message is hidden. <a>Show anyways.</a>",
- {}, { a: (sub) => <a href="#" onClick={this._onAllowClick}>{ sub }</a> },
+ {}, { a: (sub) => <a href="#" onClick={this.onAllowClick}>{ sub }</a> },
) }</i></div>
);
}
From 421fa1ab69b2d9f9cb512f5395d6fbd34301312b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 24 Sep 2021 20:06:00 +0200
Subject: [PATCH 203/313] Convert RoomAvatarEvent to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
...RoomAvatarEvent.js => RoomAvatarEvent.tsx} | 23 +++++++++----------
1 file changed, 11 insertions(+), 12 deletions(-)
rename src/components/views/messages/{RoomAvatarEvent.js => RoomAvatarEvent.tsx} (88%)
diff --git a/src/components/views/messages/RoomAvatarEvent.js b/src/components/views/messages/RoomAvatarEvent.tsx
similarity index 88%
rename from src/components/views/messages/RoomAvatarEvent.js
rename to src/components/views/messages/RoomAvatarEvent.tsx
index 9832332311..c29460b002 100644
--- a/src/components/views/messages/RoomAvatarEvent.js
+++ b/src/components/views/messages/RoomAvatarEvent.tsx
@@ -17,23 +17,24 @@ limitations under the License.
*/
import React from 'react';
-import PropTypes from 'prop-types';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import { _t } from '../../../languageHandler';
-import * as sdk from '../../../index';
import Modal from '../../../Modal';
import AccessibleButton from '../elements/AccessibleButton';
import { replaceableComponent } from "../../../utils/replaceableComponent";
import { mediaFromMxc } from "../../../customisations/Media";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import RoomAvatar from "../avatars/RoomAvatar";
+import ImageView from "../elements/ImageView";
+
+interface IProps {
+ /* the MatrixEvent to show */
+ mxEvent: MatrixEvent;
+}
@replaceableComponent("views.messages.RoomAvatarEvent")
-export default class RoomAvatarEvent extends React.Component {
- static propTypes = {
- /* the MatrixEvent to show */
- mxEvent: PropTypes.object.isRequired,
- };
-
- onAvatarClick = () => {
+export default class RoomAvatarEvent extends React.Component<IProps> {
+ private onAvatarClick = (): void => {
const cli = MatrixClientPeg.get();
const ev = this.props.mxEvent;
const httpUrl = mediaFromMxc(ev.getContent().url).srcHttp;
@@ -44,7 +45,6 @@ export default class RoomAvatarEvent extends React.Component {
roomName: room ? room.name : '',
});
- const ImageView = sdk.getComponent("elements.ImageView");
const params = {
src: httpUrl,
name: text,
@@ -52,10 +52,9 @@ export default class RoomAvatarEvent extends React.Component {
Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
};
- render() {
+ public render(): JSX.Element {
const ev = this.props.mxEvent;
const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
- const RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
if (!ev.getContent().url || ev.getContent().url.trim().length === 0) {
return (
From c287d15fa0b314cbe52d3ab552ad144c64e75fdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 24 Sep 2021 20:08:15 +0200
Subject: [PATCH 204/313] Convert RoomCreate to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
.../{RoomCreate.js => RoomCreate.tsx} | 20 +++++++++----------
1 file changed, 10 insertions(+), 10 deletions(-)
rename src/components/views/messages/{RoomCreate.js => RoomCreate.tsx} (85%)
diff --git a/src/components/views/messages/RoomCreate.js b/src/components/views/messages/RoomCreate.tsx
similarity index 85%
rename from src/components/views/messages/RoomCreate.js
rename to src/components/views/messages/RoomCreate.tsx
index a0bc8daa64..c846ba5632 100644
--- a/src/components/views/messages/RoomCreate.js
+++ b/src/components/views/messages/RoomCreate.tsx
@@ -16,7 +16,6 @@ limitations under the License.
*/
import React from 'react';
-import PropTypes from 'prop-types';
import dis from '../../../dispatcher/dispatcher';
import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
@@ -24,15 +23,16 @@ import { _t } from '../../../languageHandler';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import EventTileBubble from "./EventTileBubble";
import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
+interface IProps {
+ /* the MatrixEvent to show */
+ mxEvent: MatrixEvent;
+}
@replaceableComponent("views.messages.RoomCreate")
-export default class RoomCreate extends React.Component {
- static propTypes = {
- /* the MatrixEvent to show */
- mxEvent: PropTypes.object.isRequired,
- };
-
- _onLinkClicked = e => {
+export default class RoomCreate extends React.Component<IProps> {
+ private onLinkClicked = (e: React.MouseEvent): void => {
e.preventDefault();
const predecessor = this.props.mxEvent.getContent()['predecessor'];
@@ -45,7 +45,7 @@ export default class RoomCreate extends React.Component {
});
};
- render() {
+ public render(): JSX.Element {
const predecessor = this.props.mxEvent.getContent()['predecessor'];
if (predecessor === undefined) {
return <div />; // We should never have been instantiated in this case
@@ -55,7 +55,7 @@ export default class RoomCreate extends React.Component {
permalinkCreator.load();
const predecessorPermalink = permalinkCreator.forEvent(predecessor['event_id']);
const link = (
- <a href={predecessorPermalink} onClick={this._onLinkClicked}>
+ <a href={predecessorPermalink} onClick={this.onLinkClicked}>
{ _t("Click here to see older messages.") }
</a>
);
From fb5c18caa0e9bb0c700e1bf95da17b054e2da079 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 24 Sep 2021 20:04:03 +0200
Subject: [PATCH 205/313] Convert MKeyVerificationConclusion to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
...sion.js => MKeyVerificationConclusion.tsx} | 47 ++++++++++---------
src/components/views/rooms/EventTile.tsx | 4 +-
2 files changed, 26 insertions(+), 25 deletions(-)
rename src/components/views/messages/{MKeyVerificationConclusion.js => MKeyVerificationConclusion.tsx} (74%)
diff --git a/src/components/views/messages/MKeyVerificationConclusion.js b/src/components/views/messages/MKeyVerificationConclusion.tsx
similarity index 74%
rename from src/components/views/messages/MKeyVerificationConclusion.js
rename to src/components/views/messages/MKeyVerificationConclusion.tsx
index a5f12df47d..3e2ae9fa9b 100644
--- a/src/components/views/messages/MKeyVerificationConclusion.js
+++ b/src/components/views/messages/MKeyVerificationConclusion.tsx
@@ -16,44 +16,50 @@ limitations under the License.
import React from 'react';
import classNames from 'classnames';
-import PropTypes from 'prop-types';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import { _t } from '../../../languageHandler';
-import { getNameForEventRoom, userLabelForEventRoom }
- from '../../../utils/KeyVerificationStateObserver';
+import { getNameForEventRoom, userLabelForEventRoom } from '../../../utils/KeyVerificationStateObserver';
import EventTileBubble from "./EventTileBubble";
import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+
+interface IProps {
+ /* the MatrixEvent to show */
+ mxEvent: MatrixEvent;
+}
@replaceableComponent("views.messages.MKeyVerificationConclusion")
-export default class MKeyVerificationConclusion extends React.Component {
- constructor(props) {
+export default class MKeyVerificationConclusion extends React.Component<IProps> {
+ constructor(props: IProps) {
super(props);
}
- componentDidMount() {
+ public componentDidMount(): void {
const request = this.props.mxEvent.verificationRequest;
if (request) {
- request.on("change", this._onRequestChanged);
+ request.on("change", this.onRequestChanged);
}
- MatrixClientPeg.get().on("userTrustStatusChanged", this._onTrustChanged);
+ MatrixClientPeg.get().on("userTrustStatusChanged", this.onTrustChanged);
}
- componentWillUnmount() {
+ public componentWillUnmount(): void {
const request = this.props.mxEvent.verificationRequest;
if (request) {
- request.off("change", this._onRequestChanged);
+ request.off("change", this.onRequestChanged);
}
const cli = MatrixClientPeg.get();
if (cli) {
- cli.removeListener("userTrustStatusChanged", this._onTrustChanged);
+ cli.removeListener("userTrustStatusChanged", this.onTrustChanged);
}
}
- _onRequestChanged = () => {
+ private onRequestChanged = () => {
this.forceUpdate();
};
- _onTrustChanged = (userId, status) => {
+ private onTrustChanged = (userId: string): void => {
const { mxEvent } = this.props;
const request = mxEvent.verificationRequest;
if (!request || request.otherUserId !== userId) {
@@ -62,17 +68,17 @@ export default class MKeyVerificationConclusion extends React.Component {
this.forceUpdate();
};
- _shouldRender(mxEvent, request) {
+ public static shouldRender(mxEvent: MatrixEvent, request: VerificationRequest): boolean {
// normally should not happen
if (!request) {
return false;
}
// .cancel event that was sent after the verification finished, ignore
- if (mxEvent.getType() === "m.key.verification.cancel" && !request.cancelled) {
+ if (mxEvent.getType() === EventType.KeyVerificationCancel && !request.cancelled) {
return false;
}
// .done event that was sent after the verification cancelled, ignore
- if (mxEvent.getType() === "m.key.verification.done" && !request.done) {
+ if (mxEvent.getType() === EventType.KeyVerificationDone && !request.done) {
return false;
}
@@ -89,11 +95,11 @@ export default class MKeyVerificationConclusion extends React.Component {
return true;
}
- render() {
+ public render(): JSX.Element {
const { mxEvent } = this.props;
const request = mxEvent.verificationRequest;
- if (!this._shouldRender(mxEvent, request)) {
+ if (!MKeyVerificationConclusion.shouldRender(mxEvent, request)) {
return null;
}
@@ -129,8 +135,3 @@ export default class MKeyVerificationConclusion extends React.Component {
return null;
}
}
-
-MKeyVerificationConclusion.propTypes = {
- /* the MatrixEvent to show */
- mxEvent: PropTypes.object.isRequired,
-};
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index e1f0eb5368..d1ac06b199 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -58,6 +58,7 @@ import ReactionsRow from '../messages/ReactionsRow';
import { getEventDisplayInfo } from '../../../utils/EventUtils';
import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
import SettingsStore from "../../../settings/SettingsStore";
+import MKeyVerificationConclusion from "../messages/MKeyVerificationConclusion";
const eventTileTypes = {
[EventType.RoomMessage]: 'messages.MessageEvent',
@@ -144,8 +145,7 @@ export function getHandlerTile(ev) {
// XXX: This is extremely a hack. Possibly these components should have an interface for
// declining to render?
if (type === "m.key.verification.cancel" || type === "m.key.verification.done") {
- const MKeyVerificationConclusion = sdk.getComponent("messages.MKeyVerificationConclusion");
- if (!MKeyVerificationConclusion.prototype._shouldRender.call(null, ev, ev.request)) {
+ if (!MKeyVerificationConclusion.shouldRender(ev, ev.request)) {
return;
}
}
From 755bfb4562ef1faba9c2bd415bb2d906ca72a446 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 26 Sep 2021 15:02:07 +0200
Subject: [PATCH 206/313] Convert DirectoryUtils to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/utils/{DirectoryUtils.js => DirectoryUtils.ts} | 7 +++++--
1 file changed, 5 insertions(+), 2 deletions(-)
rename src/utils/{DirectoryUtils.js => DirectoryUtils.ts} (81%)
diff --git a/src/utils/DirectoryUtils.js b/src/utils/DirectoryUtils.ts
similarity index 81%
rename from src/utils/DirectoryUtils.js
rename to src/utils/DirectoryUtils.ts
index 577a6441f8..255ae0e3fd 100644
--- a/src/utils/DirectoryUtils.js
+++ b/src/utils/DirectoryUtils.ts
@@ -14,9 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+import { IInstance } from "matrix-js-sdk/src/client";
+import { Protocols } from "../components/views/directory/NetworkDropdown";
+
// Find a protocol 'instance' with a given instance_id
// in the supplied protocols dict
-export function instanceForInstanceId(protocols, instanceId) {
+export function instanceForInstanceId(protocols: Protocols, instanceId: string): IInstance {
if (!instanceId) return null;
for (const proto of Object.keys(protocols)) {
if (!protocols[proto].instances && protocols[proto].instances instanceof Array) continue;
@@ -28,7 +31,7 @@ export function instanceForInstanceId(protocols, instanceId) {
// given an instance_id, return the name of the protocol for
// that instance ID in the supplied protocols dict
-export function protocolNameForInstanceId(protocols, instanceId) {
+export function protocolNameForInstanceId(protocols: Protocols, instanceId: string): string {
if (!instanceId) return null;
for (const proto of Object.keys(protocols)) {
if (!protocols[proto].instances && protocols[proto].instances instanceof Array) continue;
From 0c6bf950f6d84bd5bea5a6a22a3ff09228fce1e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 26 Sep 2021 15:03:50 +0200
Subject: [PATCH 207/313] Convert HostingLink to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/utils/{HostingLink.js => HostingLink.ts} | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
rename src/utils/{HostingLink.js => HostingLink.ts} (91%)
diff --git a/src/utils/HostingLink.js b/src/utils/HostingLink.ts
similarity index 91%
rename from src/utils/HostingLink.js
rename to src/utils/HostingLink.ts
index 134e045ca2..f8c0f12c3f 100644
--- a/src/utils/HostingLink.js
+++ b/src/utils/HostingLink.ts
@@ -17,7 +17,7 @@ limitations under the License.
import SdkConfig from '../SdkConfig';
import { MatrixClientPeg } from '../MatrixClientPeg';
-export function getHostingLink(campaign) {
+export function getHostingLink(campaign: string): string {
const hostingLink = SdkConfig.get().hosting_signup_link;
if (!hostingLink) return null;
if (!campaign) return hostingLink;
@@ -27,7 +27,7 @@ export function getHostingLink(campaign) {
try {
const hostingUrl = new URL(hostingLink);
hostingUrl.searchParams.set("utm_campaign", campaign);
- return hostingUrl.format();
+ return hostingUrl.toString();
} catch (e) {
return hostingLink;
}
From aa10cf45a5876880474ba82a07096732d5f1d45b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 26 Sep 2021 15:05:51 +0200
Subject: [PATCH 208/313] Convert KeyVerificationStateObserver to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
...cationStateObserver.js => KeyVerificationStateObserver.ts} | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
rename src/utils/{KeyVerificationStateObserver.js => KeyVerificationStateObserver.ts} (86%)
diff --git a/src/utils/KeyVerificationStateObserver.js b/src/utils/KeyVerificationStateObserver.ts
similarity index 86%
rename from src/utils/KeyVerificationStateObserver.js
rename to src/utils/KeyVerificationStateObserver.ts
index 023cdf3a75..e4fae3f3c8 100644
--- a/src/utils/KeyVerificationStateObserver.js
+++ b/src/utils/KeyVerificationStateObserver.ts
@@ -17,14 +17,14 @@ limitations under the License.
import { MatrixClientPeg } from '../MatrixClientPeg';
import { _t } from '../languageHandler';
-export function getNameForEventRoom(userId, roomId) {
+export function getNameForEventRoom(userId: string, roomId: string): string {
const client = MatrixClientPeg.get();
const room = client.getRoom(roomId);
const member = room && room.getMember(userId);
return member ? member.name : userId;
}
-export function userLabelForEventRoom(userId, roomId) {
+export function userLabelForEventRoom(userId: string, roomId: string): string {
const name = getNameForEventRoom(userId, roomId);
if (name !== userId) {
return _t("%(name)s (%(userId)s)", { name, userId });
From ee344efb3d725b7c4b0c1a4acdd0c2e707b9ee38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 26 Sep 2021 15:20:42 +0200
Subject: [PATCH 209/313] Convert MegolmExportEncryption to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
...ncryption.js => MegolmExportEncryption.ts} | 34 +++++++++++--------
1 file changed, 20 insertions(+), 14 deletions(-)
rename src/utils/{MegolmExportEncryption.js => MegolmExportEncryption.ts} (90%)
diff --git a/src/utils/MegolmExportEncryption.js b/src/utils/MegolmExportEncryption.ts
similarity index 90%
rename from src/utils/MegolmExportEncryption.js
rename to src/utils/MegolmExportEncryption.ts
index 8e7ee2005d..4fab271015 100644
--- a/src/utils/MegolmExportEncryption.js
+++ b/src/utils/MegolmExportEncryption.ts
@@ -26,17 +26,17 @@ const subtleCrypto = window.crypto.subtle || window.crypto.webkitSubtle;
* Make an Error object which has a friendlyText property which is already
* translated and suitable for showing to the user.
*
- * @param {string} msg message for the exception
+ * @param {string} message message for the exception
* @param {string} friendlyText
* @returns {Error}
*/
-function friendlyError(msg, friendlyText) {
- const e = new Error(msg);
- e.friendlyText = friendlyText;
- return e;
+function friendlyError(
+ message: string, friendlyText: string,
+): { message: string, friendlyText: string } {
+ return { message, friendlyText };
}
-function cryptoFailMsg() {
+function cryptoFailMsg(): string {
return _t('Your browser does not support the required cryptography extensions');
}
@@ -49,7 +49,7 @@ function cryptoFailMsg() {
*
*
*/
-export async function decryptMegolmKeyFile(data, password) {
+export async function decryptMegolmKeyFile(data: ArrayBuffer, password: string): Promise<string> {
const body = unpackMegolmKeyFile(data);
const brand = SdkConfig.get().brand;
@@ -124,7 +124,11 @@ export async function decryptMegolmKeyFile(data, password) {
* key-derivation function.
* @return {Promise<ArrayBuffer>} promise for encrypted output
*/
-export async function encryptMegolmKeyFile(data, password, options) {
+export async function encryptMegolmKeyFile(
+ data: string,
+ password: string,
+ options?: { kdf_rounds?: number }, // eslint-disable-line camelcase
+): Promise<ArrayBuffer> {
options = options || {};
const kdfRounds = options.kdf_rounds || 500000;
@@ -196,7 +200,7 @@ export async function encryptMegolmKeyFile(data, password, options) {
* @param {String} password password
* @return {Promise<[CryptoKey, CryptoKey]>} promise for [aes key, hmac key]
*/
-async function deriveKeys(salt, iterations, password) {
+async function deriveKeys(salt: Uint8Array, iterations: number, password: string): Promise<[CryptoKey, CryptoKey]> {
const start = new Date();
let key;
@@ -229,7 +233,7 @@ async function deriveKeys(salt, iterations, password) {
}
const now = new Date();
- logger.log("E2e import/export: deriveKeys took " + (now - start) + "ms");
+ logger.log("E2e import/export: deriveKeys took " + (now.getTime() - start.getTime()) + "ms");
const aesKey = keybits.slice(0, 32);
const hmacKey = keybits.slice(32);
@@ -271,7 +275,7 @@ const TRAILER_LINE = '-----END MEGOLM SESSION DATA-----';
* @param {ArrayBuffer} data input file
* @return {Uint8Array} unbase64ed content
*/
-function unpackMegolmKeyFile(data) {
+function unpackMegolmKeyFile(data: ArrayBuffer): Uint8Array {
// parse the file as a great big String. This should be safe, because there
// should be no non-ASCII characters, and it means that we can do string
// comparisons to find the header and footer, and feed it into window.atob.
@@ -279,6 +283,7 @@ function unpackMegolmKeyFile(data) {
// look for the start line
let lineStart = 0;
+ // eslint-disable-next-line no-constant-condition
while (1) {
const lineEnd = fileStr.indexOf('\n', lineStart);
if (lineEnd < 0) {
@@ -297,6 +302,7 @@ function unpackMegolmKeyFile(data) {
const dataStart = lineStart;
// look for the end line
+ // eslint-disable-next-line no-constant-condition
while (1) {
const lineEnd = fileStr.indexOf('\n', lineStart);
const line = fileStr.slice(lineStart, lineEnd < 0 ? undefined : lineEnd).trim();
@@ -324,7 +330,7 @@ function unpackMegolmKeyFile(data) {
* @param {Uint8Array} data raw data
* @return {ArrayBuffer} formatted file
*/
-function packMegolmKeyFile(data) {
+function packMegolmKeyFile(data: Uint8Array): ArrayBuffer {
// we split into lines before base64ing, because encodeBase64 doesn't deal
// terribly well with large arrays.
const LINE_LENGTH = (72 * 4 / 3);
@@ -347,7 +353,7 @@ function packMegolmKeyFile(data) {
* @param {Uint8Array} uint8Array The data to encode.
* @return {string} The base64.
*/
-function encodeBase64(uint8Array) {
+function encodeBase64(uint8Array: Uint8Array): string {
// Misinterpt the Uint8Array as Latin-1.
// window.btoa expects a unicode string with codepoints in the range 0-255.
const latin1String = String.fromCharCode.apply(null, uint8Array);
@@ -360,7 +366,7 @@ function encodeBase64(uint8Array) {
* @param {string} base64 The base64 to decode.
* @return {Uint8Array} The decoded data.
*/
-function decodeBase64(base64) {
+function decodeBase64(base64: string): Uint8Array {
// window.atob returns a unicode string with codepoints in the range 0-255.
const latin1String = window.atob(base64);
// Encode the string as a Uint8Array
From b08e05ebe7c8217e5b06d01298ca18958281b5c9 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Sun, 26 Sep 2021 10:24:46 -0400
Subject: [PATCH 210/313] Fix pills being cut off in message bubble layout
Signed-off-by: Robin Townsend <robin@robin.town>
---
res/css/views/elements/_RichText.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss
index b9d845ea7a..1043fd08d1 100644
--- a/res/css/views/elements/_RichText.scss
+++ b/res/css/views/elements/_RichText.scss
@@ -18,7 +18,7 @@ a.mx_Pill {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
- max-width: calc(100% - 1ch);
+ max-width: 100%;
}
.mx_Pill {
From 2584b5bc6bfecd80bc548135fd971beb480f1482 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 26 Sep 2021 16:04:28 +0200
Subject: [PATCH 211/313] Convert rageshake to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/@types/global.d.ts | 10 +++
src/rageshake/{rageshake.js => rageshake.ts} | 79 +++++++++++---------
2 files changed, 52 insertions(+), 37 deletions(-)
rename src/rageshake/{rageshake.js => rageshake.ts} (91%)
diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
index 8ad93fa960..06bb822f36 100644
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -49,6 +49,7 @@ import PerformanceMonitor from "../performance";
import UIStore from "../stores/UIStore";
import { SetupEncryptionStore } from "../stores/SetupEncryptionStore";
import { RoomScrollStateStore } from "../stores/RoomScrollStateStore";
+import { ConsoleLogger, IndexedDBLogStore } from "../rageshake/rageshake";
/* eslint-disable @typescript-eslint/naming-convention */
@@ -223,6 +224,15 @@ declare global {
) => string;
isReady: () => boolean;
};
+
+ // eslint-disable-next-line no-var, camelcase
+ var mx_rage_logger: ConsoleLogger;
+ // eslint-disable-next-line no-var, camelcase
+ var mx_rage_initPromise: Promise<void>;
+ // eslint-disable-next-line no-var, camelcase
+ var mx_rage_initStoragePromise: Promise<void>;
+ // eslint-disable-next-line no-var, camelcase
+ var mx_rage_store: IndexedDBLogStore;
}
/* eslint-enable @typescript-eslint/naming-convention */
diff --git a/src/rageshake/rageshake.js b/src/rageshake/rageshake.ts
similarity index 91%
rename from src/rageshake/rageshake.js
rename to src/rageshake/rageshake.ts
index 0dc36e3a9f..acf77c31c0 100644
--- a/src/rageshake/rageshake.js
+++ b/src/rageshake/rageshake.ts
@@ -46,12 +46,10 @@ const FLUSH_RATE_MS = 30 * 1000;
const MAX_LOG_SIZE = 1024 * 1024 * 5; // 5 MB
// A class which monkey-patches the global console and stores log lines.
-class ConsoleLogger {
- constructor() {
- this.logs = "";
- }
+export class ConsoleLogger {
+ private logs = "";
- monkeyPatch(consoleObj) {
+ public monkeyPatch(consoleObj: Console): void {
// Monkey-patch console logging
const consoleFunctionsToLevels = {
log: "I",
@@ -69,14 +67,14 @@ class ConsoleLogger {
});
}
- log(level, ...args) {
+ private log(level: string, ...args: (Error | DOMException | object | string)[]): void {
// We don't know what locale the user may be running so use ISO strings
const ts = new Date().toISOString();
// Convert objects and errors to helpful things
args = args.map((arg) => {
if (arg instanceof DOMException) {
- return arg.message + ` (${arg.name} | ${arg.code}) ` + (arg.stack ? `\n${arg.stack}` : '');
+ return arg.message + ` (${arg.name} | ${arg.code})`;
} else if (arg instanceof Error) {
return arg.message + (arg.stack ? `\n${arg.stack}` : '');
} else if (typeof (arg) === 'object') {
@@ -118,7 +116,7 @@ class ConsoleLogger {
* @param {boolean} keepLogs True to not delete logs after flushing.
* @return {string} \n delimited log lines to flush.
*/
- flush(keepLogs) {
+ public flush(keepLogs?: boolean): string {
// The ConsoleLogger doesn't care how these end up on disk, it just
// flushes them to the caller.
if (keepLogs) {
@@ -131,27 +129,28 @@ class ConsoleLogger {
}
// A class which stores log lines in an IndexedDB instance.
-class IndexedDBLogStore {
- constructor(indexedDB, logger) {
- this.indexedDB = indexedDB;
- this.logger = logger;
- this.id = "instance-" + Math.random() + Date.now();
- this.index = 0;
- this.db = null;
+export class IndexedDBLogStore {
+ private id: string;
+ private index = 0;
+ private db = null;
+ private flushPromise = null;
+ private flushAgainPromise = null;
- // these promises are cleared as soon as fulfilled
- this.flushPromise = null;
- // set if flush() is called whilst one is ongoing
- this.flushAgainPromise = null;
+ constructor(
+ private indexedDB: IDBFactory,
+ private logger: ConsoleLogger,
+ ) {
+ this.id = "instance-" + Math.random() + Date.now();
}
/**
* @return {Promise} Resolves when the store is ready.
*/
- connect() {
+ public connect(): Promise<void> {
const req = this.indexedDB.open("logs");
return new Promise((resolve, reject) => {
- req.onsuccess = (event) => {
+ req.onsuccess = (event: Event) => {
+ // @ts-ignore
this.db = event.target.result;
// Periodically flush logs to local storage / indexeddb
setInterval(this.flush.bind(this), FLUSH_RATE_MS);
@@ -160,6 +159,7 @@ class IndexedDBLogStore {
req.onerror = (event) => {
const err = (
+ // @ts-ignore
"Failed to open log database: " + event.target.error.name
);
console.error(err);
@@ -168,6 +168,7 @@ class IndexedDBLogStore {
// First time: Setup the object store
req.onupgradeneeded = (event) => {
+ // @ts-ignore
const db = event.target.result;
const logObjStore = db.createObjectStore("logs", {
keyPath: ["id", "index"],
@@ -178,7 +179,7 @@ class IndexedDBLogStore {
logObjStore.createIndex("id", "id", { unique: false });
logObjStore.add(
- this._generateLogEntry(
+ this.generateLogEntry(
new Date() + " ::: Log database was created.",
),
);
@@ -186,7 +187,7 @@ class IndexedDBLogStore {
const lastModifiedStore = db.createObjectStore("logslastmod", {
keyPath: "id",
});
- lastModifiedStore.add(this._generateLastModifiedTime());
+ lastModifiedStore.add(this.generateLastModifiedTime());
};
});
}
@@ -210,7 +211,7 @@ class IndexedDBLogStore {
*
* @return {Promise} Resolved when the logs have been flushed.
*/
- flush() {
+ public flush(): Promise<void> {
// check if a flush() operation is ongoing
if (this.flushPromise) {
if (this.flushAgainPromise) {
@@ -227,7 +228,7 @@ class IndexedDBLogStore {
}
// there is no flush promise or there was but it has finished, so do
// a brand new one, destroying the chain which may have been built up.
- this.flushPromise = new Promise((resolve, reject) => {
+ this.flushPromise = new Promise<void>((resolve, reject) => {
if (!this.db) {
// not connected yet or user rejected access for us to r/w to the db.
reject(new Error("No connected database"));
@@ -251,9 +252,9 @@ class IndexedDBLogStore {
new Error("Failed to write logs: " + event.target.errorCode),
);
};
- objStore.add(this._generateLogEntry(lines));
+ objStore.add(this.generateLogEntry(lines));
const lastModStore = txn.objectStore("logslastmod");
- lastModStore.put(this._generateLastModifiedTime());
+ lastModStore.put(this.generateLastModifiedTime());
}).then(() => {
this.flushPromise = null;
});
@@ -270,12 +271,12 @@ class IndexedDBLogStore {
* log ID). The objects have said log ID in an "id" field and "lines" which
* is a big string with all the new-line delimited logs.
*/
- async consume() {
+ public async consume(): Promise<{lines: string, id: string}[]> {
const db = this.db;
// Returns: a string representing the concatenated logs for this ID.
// Stops adding log fragments when the size exceeds maxSize
- function fetchLogs(id, maxSize) {
+ function fetchLogs(id: string, maxSize: number): Promise<string> {
const objectStore = db.transaction("logs", "readonly").objectStore("logs");
return new Promise((resolve, reject) => {
@@ -301,7 +302,7 @@ class IndexedDBLogStore {
}
// Returns: A sorted array of log IDs. (newest first)
- function fetchLogIds() {
+ function fetchLogIds(): Promise<string[]> {
// To gather all the log IDs, query for all records in logslastmod.
const o = db.transaction("logslastmod", "readonly").objectStore(
"logslastmod",
@@ -319,8 +320,8 @@ class IndexedDBLogStore {
});
}
- function deleteLogs(id) {
- return new Promise((resolve, reject) => {
+ function deleteLogs(id: number): Promise<void> {
+ return new Promise<void>((resolve, reject) => {
const txn = db.transaction(
["logs", "logslastmod"], "readwrite",
);
@@ -389,7 +390,7 @@ class IndexedDBLogStore {
return logs;
}
- _generateLogEntry(lines) {
+ private generateLogEntry(lines: string): {id: string, lines: string, index: number} {
return {
id: this.id,
lines: lines,
@@ -397,7 +398,7 @@ class IndexedDBLogStore {
};
}
- _generateLastModifiedTime() {
+ private generateLastModifiedTime(): {id: string, ts: number} {
return {
id: this.id,
ts: Date.now(),
@@ -415,15 +416,19 @@ class IndexedDBLogStore {
* @return {Promise<T[]>} Resolves to an array of whatever you returned from
* resultMapper.
*/
-function selectQuery(store, keyRange, resultMapper) {
+function selectQuery<T>(
+ store: IDBIndex, keyRange: IDBKeyRange, resultMapper: (cursor: IDBCursorWithValue) => T,
+): Promise<T[]> {
const query = store.openCursor(keyRange);
return new Promise((resolve, reject) => {
const results = [];
query.onerror = (event) => {
+ // @ts-ignore
reject(new Error("Query failed: " + event.target.errorCode));
};
// collect results
query.onsuccess = (event) => {
+ // @ts-ignore
const cursor = event.target.result;
if (!cursor) {
resolve(results);
@@ -442,7 +447,7 @@ function selectQuery(store, keyRange, resultMapper) {
* be set up immediately for the logs.
* @return {Promise} Resolves when set up.
*/
-export function init(setUpPersistence = true) {
+export function init(setUpPersistence = true): Promise<void> {
if (global.mx_rage_initPromise) {
return global.mx_rage_initPromise;
}
@@ -462,7 +467,7 @@ export function init(setUpPersistence = true) {
* then this no-ops.
* @return {Promise} Resolves when complete.
*/
-export function tryInitStorage() {
+export function tryInitStorage(): Promise<void> {
if (global.mx_rage_initStoragePromise) {
return global.mx_rage_initStoragePromise;
}
From af9429c8a067c248515d9d8d703e31460f6d1b16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 26 Sep 2021 19:57:02 +0200
Subject: [PATCH 212/313] Convert ActiveWidgetStore to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/@types/global.d.ts | 2 +
src/Lifecycle.ts | 4 +-
src/components/views/elements/AppTile.tsx | 8 +-
.../views/elements/PersistentApp.tsx | 18 +--
src/stores/ActiveWidgetStore.js | 110 -----------------
src/stores/ActiveWidgetStore.ts | 112 ++++++++++++++++++
src/stores/WidgetStore.ts | 8 +-
src/stores/widgets/StopGapWidget.ts | 8 +-
8 files changed, 137 insertions(+), 133 deletions(-)
delete mode 100644 src/stores/ActiveWidgetStore.js
create mode 100644 src/stores/ActiveWidgetStore.ts
diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
index 8ad93fa960..220a34c688 100644
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -49,6 +49,7 @@ import PerformanceMonitor from "../performance";
import UIStore from "../stores/UIStore";
import { SetupEncryptionStore } from "../stores/SetupEncryptionStore";
import { RoomScrollStateStore } from "../stores/RoomScrollStateStore";
+import ActiveWidgetStore from "../stores/ActiveWidgetStore";
/* eslint-disable @typescript-eslint/naming-convention */
@@ -92,6 +93,7 @@ declare global {
mxUIStore: UIStore;
mxSetupEncryptionStore?: SetupEncryptionStore;
mxRoomScrollStateStore?: RoomScrollStateStore;
+ mxActiveWidgetStore?: ActiveWidgetStore;
mxOnRecaptchaLoaded?: () => void;
electron?: Electron;
}
diff --git a/src/Lifecycle.ts b/src/Lifecycle.ts
index 57c922aeb7..3685f7b938 100644
--- a/src/Lifecycle.ts
+++ b/src/Lifecycle.ts
@@ -786,7 +786,7 @@ async function startMatrixClient(startSyncing = true): Promise<void> {
UserActivity.sharedInstance().start();
DMRoomMap.makeShared().start();
IntegrationManagers.sharedInstance().startWatching();
- ActiveWidgetStore.start();
+ ActiveWidgetStore.instance.start();
CallHandler.sharedInstance().start();
// Start Mjolnir even though we haven't checked the feature flag yet. Starting
@@ -892,7 +892,7 @@ export function stopMatrixClient(unsetClient = true): void {
UserActivity.sharedInstance().stop();
TypingStore.sharedInstance().reset();
Presence.stop();
- ActiveWidgetStore.stop();
+ ActiveWidgetStore.instance.stop();
IntegrationManagers.sharedInstance().stopWatching();
Mjolnir.sharedInstance().stop();
DeviceListener.sharedInstance().stop();
diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx
index ea9ef71626..3f4d75df27 100644
--- a/src/components/views/elements/AppTile.tsx
+++ b/src/components/views/elements/AppTile.tsx
@@ -163,7 +163,7 @@ export default class AppTile extends React.Component<IProps, IState> {
if (this.state.hasPermissionToLoad && !hasPermissionToLoad) {
// Force the widget to be non-persistent (able to be deleted/forgotten)
- ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
+ ActiveWidgetStore.instance.destroyPersistentWidget(this.props.app.id);
PersistedElement.destroyElement(this.persistKey);
if (this.sgWidget) this.sgWidget.stop();
}
@@ -198,8 +198,8 @@ export default class AppTile extends React.Component<IProps, IState> {
if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
// if it's not remaining on screen, get rid of the PersistedElement container
- if (!ActiveWidgetStore.getWidgetPersistence(this.props.app.id)) {
- ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
+ if (!ActiveWidgetStore.instance.getWidgetPersistence(this.props.app.id)) {
+ ActiveWidgetStore.instance.destroyPersistentWidget(this.props.app.id);
PersistedElement.destroyElement(this.persistKey);
}
@@ -282,7 +282,7 @@ export default class AppTile extends React.Component<IProps, IState> {
// Delete the widget from the persisted store for good measure.
PersistedElement.destroyElement(this.persistKey);
- ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
+ ActiveWidgetStore.instance.destroyPersistentWidget(this.props.app.id);
if (this.sgWidget) this.sgWidget.stop({ forceDestroy: true });
}
diff --git a/src/components/views/elements/PersistentApp.tsx b/src/components/views/elements/PersistentApp.tsx
index 1f911659e2..8d0751cc1d 100644
--- a/src/components/views/elements/PersistentApp.tsx
+++ b/src/components/views/elements/PersistentApp.tsx
@@ -17,7 +17,7 @@ limitations under the License.
import React from 'react';
import RoomViewStore from '../../../stores/RoomViewStore';
-import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
+import ActiveWidgetStore, { ActiveWidgetStoreEvent } from '../../../stores/ActiveWidgetStore';
import WidgetUtils from '../../../utils/WidgetUtils';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import { replaceableComponent } from "../../../utils/replaceableComponent";
@@ -39,13 +39,13 @@ export default class PersistentApp extends React.Component<{}, IState> {
this.state = {
roomId: RoomViewStore.getRoomId(),
- persistentWidgetId: ActiveWidgetStore.getPersistentWidgetId(),
+ persistentWidgetId: ActiveWidgetStore.instance.getPersistentWidgetId(),
};
}
public componentDidMount(): void {
this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
- ActiveWidgetStore.on('update', this.onActiveWidgetStoreUpdate);
+ ActiveWidgetStore.instance.on(ActiveWidgetStoreEvent.Update, this.onActiveWidgetStoreUpdate);
MatrixClientPeg.get().on("Room.myMembership", this.onMyMembership);
}
@@ -53,7 +53,7 @@ export default class PersistentApp extends React.Component<{}, IState> {
if (this.roomStoreToken) {
this.roomStoreToken.remove();
}
- ActiveWidgetStore.removeListener('update', this.onActiveWidgetStoreUpdate);
+ ActiveWidgetStore.instance.removeListener(ActiveWidgetStoreEvent.Update, this.onActiveWidgetStoreUpdate);
if (MatrixClientPeg.get()) {
MatrixClientPeg.get().removeListener("Room.myMembership", this.onMyMembership);
}
@@ -68,23 +68,23 @@ export default class PersistentApp extends React.Component<{}, IState> {
private onActiveWidgetStoreUpdate = (): void => {
this.setState({
- persistentWidgetId: ActiveWidgetStore.getPersistentWidgetId(),
+ persistentWidgetId: ActiveWidgetStore.instance.getPersistentWidgetId(),
});
};
private onMyMembership = async (room: Room, membership: string): Promise<void> => {
- const persistentWidgetInRoomId = ActiveWidgetStore.getRoomId(this.state.persistentWidgetId);
+ const persistentWidgetInRoomId = ActiveWidgetStore.instance.getRoomId(this.state.persistentWidgetId);
if (membership !== "join") {
// we're not in the room anymore - delete
if (room .roomId === persistentWidgetInRoomId) {
- ActiveWidgetStore.destroyPersistentWidget(this.state.persistentWidgetId);
+ ActiveWidgetStore.instance.destroyPersistentWidget(this.state.persistentWidgetId);
}
}
};
public render(): JSX.Element {
if (this.state.persistentWidgetId) {
- const persistentWidgetInRoomId = ActiveWidgetStore.getRoomId(this.state.persistentWidgetId);
+ const persistentWidgetInRoomId = ActiveWidgetStore.instance.getRoomId(this.state.persistentWidgetId);
const persistentWidgetInRoom = MatrixClientPeg.get().getRoom(persistentWidgetInRoomId);
@@ -96,7 +96,7 @@ export default class PersistentApp extends React.Component<{}, IState> {
if (this.state.roomId !== persistentWidgetInRoomId && myMembership === "join") {
// get the widget data
const appEvent = WidgetUtils.getRoomWidgets(persistentWidgetInRoom).find((ev) => {
- return ev.getStateKey() === ActiveWidgetStore.getPersistentWidgetId();
+ return ev.getStateKey() === ActiveWidgetStore.instance.getPersistentWidgetId();
});
const app = WidgetUtils.makeAppConfig(
appEvent.getStateKey(), appEvent.getContent(), appEvent.getSender(),
diff --git a/src/stores/ActiveWidgetStore.js b/src/stores/ActiveWidgetStore.js
deleted file mode 100644
index b270d99693..0000000000
--- a/src/stores/ActiveWidgetStore.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/*
-Copyright 2018 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.
-*/
-
-import EventEmitter from 'events';
-
-import { MatrixClientPeg } from '../MatrixClientPeg';
-import { WidgetMessagingStore } from "./widgets/WidgetMessagingStore";
-
-/**
- * Stores information about the widgets active in the app right now:
- * * What widget is set to remain always-on-screen, if any
- * Only one widget may be 'always on screen' at any one time.
- * * Negotiated capabilities for active apps
- */
-class ActiveWidgetStore extends EventEmitter {
- constructor() {
- super();
- this._persistentWidgetId = null;
-
- // What room ID each widget is associated with (if it's a room widget)
- this._roomIdByWidgetId = {};
-
- this.onRoomStateEvents = this.onRoomStateEvents.bind(this);
-
- this.dispatcherRef = null;
- }
-
- start() {
- MatrixClientPeg.get().on('RoomState.events', this.onRoomStateEvents);
- }
-
- stop() {
- if (MatrixClientPeg.get()) {
- MatrixClientPeg.get().removeListener('RoomState.events', this.onRoomStateEvents);
- }
- this._roomIdByWidgetId = {};
- }
-
- onRoomStateEvents(ev, state) {
- // XXX: This listens for state events in order to remove the active widget.
- // Everything else relies on views listening for events and calling setters
- // on this class which is terrible. This store should just listen for events
- // and keep itself up to date.
- // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111)
- if (ev.getType() !== 'im.vector.modular.widgets') return;
-
- if (ev.getStateKey() === this._persistentWidgetId) {
- this.destroyPersistentWidget(this._persistentWidgetId);
- }
- }
-
- destroyPersistentWidget(id) {
- if (id !== this._persistentWidgetId) return;
- const toDeleteId = this._persistentWidgetId;
-
- WidgetMessagingStore.instance.stopMessagingById(id);
-
- this.setWidgetPersistence(toDeleteId, false);
- this.delRoomId(toDeleteId);
- }
-
- setWidgetPersistence(widgetId, val) {
- if (this._persistentWidgetId === widgetId && !val) {
- this._persistentWidgetId = null;
- } else if (this._persistentWidgetId !== widgetId && val) {
- this._persistentWidgetId = widgetId;
- }
- this.emit('update');
- }
-
- getWidgetPersistence(widgetId) {
- return this._persistentWidgetId === widgetId;
- }
-
- getPersistentWidgetId() {
- return this._persistentWidgetId;
- }
-
- getRoomId(widgetId) {
- return this._roomIdByWidgetId[widgetId];
- }
-
- setRoomId(widgetId, roomId) {
- this._roomIdByWidgetId[widgetId] = roomId;
- this.emit('update');
- }
-
- delRoomId(widgetId) {
- delete this._roomIdByWidgetId[widgetId];
- this.emit('update');
- }
-}
-
-if (global.singletonActiveWidgetStore === undefined) {
- global.singletonActiveWidgetStore = new ActiveWidgetStore();
-}
-export default global.singletonActiveWidgetStore;
diff --git a/src/stores/ActiveWidgetStore.ts b/src/stores/ActiveWidgetStore.ts
new file mode 100644
index 0000000000..ca50689188
--- /dev/null
+++ b/src/stores/ActiveWidgetStore.ts
@@ -0,0 +1,112 @@
+/*
+Copyright 2018 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.
+*/
+
+import EventEmitter from 'events';
+import { MatrixEvent } from "matrix-js-sdk";
+
+import { MatrixClientPeg } from '../MatrixClientPeg';
+import { WidgetMessagingStore } from "./widgets/WidgetMessagingStore";
+
+export enum ActiveWidgetStoreEvent {
+ Update = "update",
+}
+
+/**
+ * Stores information about the widgets active in the app right now:
+ * * What widget is set to remain always-on-screen, if any
+ * Only one widget may be 'always on screen' at any one time.
+ * * Negotiated capabilities for active apps
+ */
+export default class ActiveWidgetStore extends EventEmitter {
+ private static internalInstance: ActiveWidgetStore;
+ private persistentWidgetId: string;
+ // What room ID each widget is associated with (if it's a room widget)
+ private roomIdByWidgetId = new Map<string, string>();
+
+ public static get instance(): ActiveWidgetStore {
+ if (!ActiveWidgetStore.internalInstance) {
+ ActiveWidgetStore.internalInstance = new ActiveWidgetStore();
+ }
+ return ActiveWidgetStore.internalInstance;
+ }
+
+ public start(): void {
+ MatrixClientPeg.get().on('RoomState.events', this.onRoomStateEvents);
+ }
+
+ public stop(): void {
+ if (MatrixClientPeg.get()) {
+ MatrixClientPeg.get().removeListener('RoomState.events', this.onRoomStateEvents);
+ }
+ this.roomIdByWidgetId.clear();
+ }
+
+ private onRoomStateEvents = (ev: MatrixEvent): void => {
+ // XXX: This listens for state events in order to remove the active widget.
+ // Everything else relies on views listening for events and calling setters
+ // on this class which is terrible. This store should just listen for events
+ // and keep itself up to date.
+ // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111)
+ if (ev.getType() !== 'im.vector.modular.widgets') return;
+
+ if (ev.getStateKey() === this.persistentWidgetId) {
+ this.destroyPersistentWidget(this.persistentWidgetId);
+ }
+ };
+
+ public destroyPersistentWidget(id: string): void {
+ if (id !== this.persistentWidgetId) return;
+ const toDeleteId = this.persistentWidgetId;
+
+ WidgetMessagingStore.instance.stopMessagingById(id);
+
+ this.setWidgetPersistence(toDeleteId, false);
+ this.delRoomId(toDeleteId);
+ }
+
+ public setWidgetPersistence(widgetId: string, val: boolean): void {
+ if (this.persistentWidgetId === widgetId && !val) {
+ this.persistentWidgetId = null;
+ } else if (this.persistentWidgetId !== widgetId && val) {
+ this.persistentWidgetId = widgetId;
+ }
+ this.emit(ActiveWidgetStoreEvent.Update);
+ }
+
+ public getWidgetPersistence(widgetId: string): boolean {
+ return this.persistentWidgetId === widgetId;
+ }
+
+ public getPersistentWidgetId(): string {
+ return this.persistentWidgetId;
+ }
+
+ public getRoomId(widgetId: string): string {
+ return this.roomIdByWidgetId.get(widgetId);
+ }
+
+ public setRoomId(widgetId: string, roomId: string): void {
+ this.roomIdByWidgetId.set(widgetId, roomId);
+ this.emit(ActiveWidgetStoreEvent.Update);
+ }
+
+ public delRoomId(widgetId: string): void {
+ this.roomIdByWidgetId.delete(widgetId);
+ this.emit(ActiveWidgetStoreEvent.Update);
+ }
+}
+
+window.mxActiveWidgetStore = ActiveWidgetStore.instance;
diff --git a/src/stores/WidgetStore.ts b/src/stores/WidgetStore.ts
index bd03e2065b..44c8327c04 100644
--- a/src/stores/WidgetStore.ts
+++ b/src/stores/WidgetStore.ts
@@ -142,14 +142,14 @@ export default class WidgetStore extends AsyncStoreWithClient<IState> {
// If a persistent widget is active, check to see if it's just been removed.
// If it has, it needs to destroyed otherwise unmounting the node won't kill it
- const persistentWidgetId = ActiveWidgetStore.getPersistentWidgetId();
+ const persistentWidgetId = ActiveWidgetStore.instance.getPersistentWidgetId();
if (persistentWidgetId) {
if (
- ActiveWidgetStore.getRoomId(persistentWidgetId) === room.roomId &&
+ ActiveWidgetStore.instance.getRoomId(persistentWidgetId) === room.roomId &&
!roomInfo.widgets.some(w => w.id === persistentWidgetId)
) {
logger.log(`Persistent widget ${persistentWidgetId} removed from room ${room.roomId}: destroying.`);
- ActiveWidgetStore.destroyPersistentWidget(persistentWidgetId);
+ ActiveWidgetStore.instance.destroyPersistentWidget(persistentWidgetId);
}
}
@@ -195,7 +195,7 @@ export default class WidgetStore extends AsyncStoreWithClient<IState> {
// A persistent conference widget indicates that we're participating
const widgets = roomInfo.widgets.filter(w => WidgetType.JITSI.matches(w.type));
- return widgets.some(w => ActiveWidgetStore.getWidgetPersistence(w.id));
+ return widgets.some(w => ActiveWidgetStore.instance.getWidgetPersistence(w.id));
}
}
diff --git a/src/stores/widgets/StopGapWidget.ts b/src/stores/widgets/StopGapWidget.ts
index 361b02bc3e..e00c4c6c0b 100644
--- a/src/stores/widgets/StopGapWidget.ts
+++ b/src/stores/widgets/StopGapWidget.ts
@@ -266,7 +266,7 @@ export class StopGapWidget extends EventEmitter {
WidgetMessagingStore.instance.storeMessaging(this.mockWidget, this.messaging);
if (!this.appTileProps.userWidget && this.appTileProps.room) {
- ActiveWidgetStore.setRoomId(this.mockWidget.id, this.appTileProps.room.roomId);
+ ActiveWidgetStore.instance.setRoomId(this.mockWidget.id, this.appTileProps.room.roomId);
}
// Always attach a handler for ViewRoom, but permission check it internally
@@ -319,7 +319,7 @@ export class StopGapWidget extends EventEmitter {
if (WidgetType.JITSI.matches(this.mockWidget.type)) {
CountlyAnalytics.instance.trackJoinCall(this.appTileProps.room.roomId, true, true);
}
- ActiveWidgetStore.setWidgetPersistence(this.mockWidget.id, ev.detail.data.value);
+ ActiveWidgetStore.instance.setWidgetPersistence(this.mockWidget.id, ev.detail.data.value);
ev.preventDefault();
this.messaging.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{}); // ack
}
@@ -406,13 +406,13 @@ export class StopGapWidget extends EventEmitter {
}
public stop(opts = { forceDestroy: false }) {
- if (!opts?.forceDestroy && ActiveWidgetStore.getPersistentWidgetId() === this.mockWidget.id) {
+ if (!opts?.forceDestroy && ActiveWidgetStore.instance.getPersistentWidgetId() === this.mockWidget.id) {
logger.log("Skipping destroy - persistent widget");
return;
}
if (!this.started) return;
WidgetMessagingStore.instance.stopMessaging(this.mockWidget);
- ActiveWidgetStore.delRoomId(this.mockWidget.id);
+ ActiveWidgetStore.instance.delRoomId(this.mockWidget.id);
if (MatrixClientPeg.get()) {
MatrixClientPeg.get().off('event', this.onEvent);
From 861b4c957f6a8cb22c4daea190c654d2548ad118 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 08:35:02 +0200
Subject: [PATCH 213/313] Allow for customization of compound colors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
res/themes/light-custom/css/_custom.scss | 19 +++++++++++++++++++
1 file changed, 19 insertions(+)
diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss
index 455798a556..fe8c869fcb 100644
--- a/res/themes/light-custom/css/_custom.scss
+++ b/res/themes/light-custom/css/_custom.scss
@@ -16,6 +16,25 @@ limitations under the License.
$font-family: var(--font-family, $font-family);
$monospace-font-family: var(--font-family-monospace, $monospace-font-family);
+
+// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741
+$accent: var(--accent);
+$alert: var(--alert);
+$links: var(--links);
+$primary-content: var(--primary-content);
+$secondary-content: var(--secondary-content);
+$tertiary-content: var(--tertiary-content);
+$quaternary-content: var(--quaternary-content);
+$quinary-content: var(--quinary-content);
+$system: var(--system);
+$background: var(--background);
+$panels: rgba($system, 0.9);
+$panel-base: var(--panel-base); // This color is not intended for use in the app
+$panel-selected: rgba($panel-base, 0.3);
+$panel-hover: rgba($panel-base, 0.1);
+$panel-actions: rgba($panel-base, 0.2);
+$space-nav: rgba($panel-base, 0.1);
+
//
// --accent-color
$accent-color: var(--accent-color);
From 42d332ce41a0378fd01970399e01a994a5f22015 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 3 Sep 2021 18:21:09 +0200
Subject: [PATCH 214/313] Fix Toast container color
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
res/css/structures/_ToastContainer.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
index 6024df5dc0..55181a8b53 100644
--- a/res/css/structures/_ToastContainer.scss
+++ b/res/css/structures/_ToastContainer.scss
@@ -122,7 +122,7 @@ limitations under the License.
float: right;
font-size: $font-12px;
line-height: $font-22px;
- color: $muted-fg-color;
+ color: $secondary-content;
}
}
From 86cccc716c8725e7186db493c9e2f624188fd1fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 25 Aug 2021 11:51:27 +0200
Subject: [PATCH 215/313] Remove $interactive-tooltip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
res/themes/dark/css/_dark.scss | 3 ---
res/themes/legacy-dark/css/_legacy-dark.scss | 3 ---
res/themes/legacy-light/css/_legacy-light.scss | 3 ---
res/themes/light-custom/css/_custom.scss | 1 -
res/themes/light/css/_light.scss | 3 ---
5 files changed, 13 deletions(-)
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 0bc61d438d..e824b5638a 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -206,9 +206,6 @@ $kbd-border-color: #000000;
$tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
$tooltip-timeline-fg-color: $primary-content;
-$interactive-tooltip-bg-color: $background;
-$interactive-tooltip-fg-color: $primary-content;
-
$breadcrumb-placeholder-bg-color: #272c35;
$user-tile-hover-bg-color: $header-panel-bg-color;
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index d5bc5e6dd7..22bd748f9a 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -202,9 +202,6 @@ $kbd-border-color: #000000;
$tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
$tooltip-timeline-fg-color: #ffffff;
-$interactive-tooltip-bg-color: $base-color;
-$interactive-tooltip-fg-color: #ffffff;
-
$breadcrumb-placeholder-bg-color: #272c35;
$user-tile-hover-bg-color: $header-panel-bg-color;
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index 47247e5e23..da0af6c905 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -326,9 +326,6 @@ $kbd-border-color: $reaction-row-button-border-color;
$tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
$tooltip-timeline-fg-color: #ffffff;
-$interactive-tooltip-bg-color: #27303a;
-$interactive-tooltip-fg-color: #ffffff;
-
$breadcrumb-placeholder-bg-color: #e8eef5;
$user-tile-hover-bg-color: $header-panel-bg-color;
diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss
index 455798a556..cef15f613f 100644
--- a/res/themes/light-custom/css/_custom.scss
+++ b/res/themes/light-custom/css/_custom.scss
@@ -48,7 +48,6 @@ $roomheader-bg-color: var(--timeline-background-color);
$roomtile-selected-bg-color: var(--roomlist-highlights-color);
//
// --sidebar-color
-$interactive-tooltip-bg-color: var(--sidebar-color);
$groupFilterPanel-bg-color: var(--sidebar-color);
$tooltip-timeline-bg-color: var(--sidebar-color);
$dialog-backdrop-color: var(--sidebar-color-50pct);
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 96e5fd7155..192327a03a 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -326,9 +326,6 @@ $inverted-bg-color: #27303a;
$tooltip-timeline-bg-color: $inverted-bg-color;
$tooltip-timeline-fg-color: $background;
-$interactive-tooltip-bg-color: #27303a;
-$interactive-tooltip-fg-color: $background;
-
$breadcrumb-placeholder-bg-color: #e8eef5;
$user-tile-hover-bg-color: $header-panel-bg-color;
From 02d42244a8a9dfdef0739f50c85e6a8104e1a3a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 25 Aug 2021 11:49:02 +0200
Subject: [PATCH 216/313] $user-tile-hover-bg-color -> $header-panel-bg-color
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
res/css/views/dialogs/_InviteDialog.scss | 4 ++--
res/css/views/right_panel/_VerificationPanel.scss | 2 +-
res/themes/dark/css/_dark.scss | 2 --
res/themes/legacy-dark/css/_legacy-dark.scss | 2 --
res/themes/legacy-light/css/_legacy-light.scss | 2 --
res/themes/light/css/_light.scss | 2 --
6 files changed, 3 insertions(+), 11 deletions(-)
diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
index 3a2918f9ec..b1de9c8c37 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -28,7 +28,7 @@ limitations under the License.
.mx_InviteDialog_editor {
flex: 1;
width: 100%; // Needed to make the Field inside grow
- background-color: $user-tile-hover-bg-color;
+ background-color: $header-panel-bg-color;
border-radius: 4px;
min-height: 25px;
padding-left: 8px;
@@ -167,7 +167,7 @@ limitations under the License.
padding: 5px 10px;
&:hover {
- background-color: $user-tile-hover-bg-color;
+ background-color: $header-panel-bg-color;
border-radius: 4px;
}
diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss
index 12148b09de..95856a5d69 100644
--- a/res/css/views/right_panel/_VerificationPanel.scss
+++ b/res/css/views/right_panel/_VerificationPanel.scss
@@ -87,7 +87,7 @@ limitations under the License.
}
.mx_VerificationPanel_QRPhase_startOption {
- background-color: $user-tile-hover-bg-color;
+ background-color: $header-panel-bg-color;
border-radius: 10px;
flex: 1;
display: flex;
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index e824b5638a..bf65af69e3 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -208,8 +208,6 @@ $tooltip-timeline-fg-color: $primary-content;
$breadcrumb-placeholder-bg-color: #272c35;
-$user-tile-hover-bg-color: $header-panel-bg-color;
-
$message-body-panel-fg-color: $secondary-content;
$message-body-panel-bg-color: $quinary-content;
$message-body-panel-icon-bg-color: $system;
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index 22bd748f9a..f4dbc25f8f 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -204,8 +204,6 @@ $tooltip-timeline-fg-color: #ffffff;
$breadcrumb-placeholder-bg-color: #272c35;
-$user-tile-hover-bg-color: $header-panel-bg-color;
-
$message-body-panel-fg-color: $secondary-fg-color;
$message-body-panel-bg-color: #394049;
$message-body-panel-icon-fg-color: $secondary-fg-color;
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index da0af6c905..92ff4ec722 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -328,8 +328,6 @@ $tooltip-timeline-fg-color: #ffffff;
$breadcrumb-placeholder-bg-color: #e8eef5;
-$user-tile-hover-bg-color: $header-panel-bg-color;
-
$message-body-panel-fg-color: $secondary-fg-color;
$message-body-panel-bg-color: #E3E8F0;
$message-body-panel-icon-fg-color: $secondary-fg-color;
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 192327a03a..ac19174b77 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -328,8 +328,6 @@ $tooltip-timeline-fg-color: $background;
$breadcrumb-placeholder-bg-color: #e8eef5;
-$user-tile-hover-bg-color: $header-panel-bg-color;
-
$message-body-panel-fg-color: $secondary-content;
$message-body-panel-bg-color: $quinary-content;
$message-body-panel-icon-bg-color: $system;
From 71d1196692d91911f8529034689d82dd99fce04b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 25 Aug 2021 11:46:48 +0200
Subject: [PATCH 217/313] Get rid of message-body-panel colors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
res/css/views/audio_messages/_PlaybackContainer.scss | 2 +-
res/css/views/dialogs/_InviteDialog.scss | 2 +-
res/css/views/dialogs/_SpaceSettingsDialog.scss | 2 +-
res/css/views/messages/_MFileBody.scss | 4 ++--
res/css/views/messages/_MediaBody.scss | 4 ++--
res/themes/dark/css/_dark.scss | 9 ++-------
res/themes/legacy-dark/css/_legacy-dark.scss | 5 -----
res/themes/legacy-light/css/_legacy-light.scss | 9 ++-------
res/themes/light/css/_light.scss | 9 ++-------
9 files changed, 13 insertions(+), 33 deletions(-)
diff --git a/res/css/views/audio_messages/_PlaybackContainer.scss b/res/css/views/audio_messages/_PlaybackContainer.scss
index 773fc50fb9..3886e38583 100644
--- a/res/css/views/audio_messages/_PlaybackContainer.scss
+++ b/res/css/views/audio_messages/_PlaybackContainer.scss
@@ -39,7 +39,7 @@ limitations under the License.
&.mx_Waveform_bar_100pct {
// Small animation to remove the mechanical feel of progress
transition: background-color 250ms ease;
- background-color: $message-body-panel-fg-color;
+ background-color: $secondary-content;
}
}
}
diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
index b1de9c8c37..a753115614 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -395,7 +395,7 @@ limitations under the License.
left: -24px;
padding-left: 24px;
padding-right: 24px;
- border-top: 1px solid $message-body-panel-bg-color;
+ border-top: 1px solid $quinary-content;
display: flex;
flex-direction: row;
diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.scss b/res/css/views/dialogs/_SpaceSettingsDialog.scss
index a1fa9d52a8..e26e4f8b49 100644
--- a/res/css/views/dialogs/_SpaceSettingsDialog.scss
+++ b/res/css/views/dialogs/_SpaceSettingsDialog.scss
@@ -38,7 +38,7 @@ limitations under the License.
}
& + .mx_SettingsTab_subheading {
- border-top: 1px solid $message-body-panel-bg-color;
+ border-top: 1px solid $quinary-content;
margin-top: 0;
padding-top: 24px;
}
diff --git a/res/css/views/messages/_MFileBody.scss b/res/css/views/messages/_MFileBody.scss
index d941a8132f..e23696e6a9 100644
--- a/res/css/views/messages/_MFileBody.scss
+++ b/res/css/views/messages/_MFileBody.scss
@@ -63,7 +63,7 @@ limitations under the License.
cursor: pointer;
.mx_MFileBody_info_icon {
- background-color: $message-body-panel-icon-bg-color;
+ background-color: $system;
border-radius: 20px;
display: inline-block;
width: 32px;
@@ -78,7 +78,7 @@ limitations under the License.
mask-position: center;
mask-size: cover;
mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
- background-color: $message-body-panel-icon-fg-color;
+ background-color: $secondary-content;
width: 15px;
height: 15px;
diff --git a/res/css/views/messages/_MediaBody.scss b/res/css/views/messages/_MediaBody.scss
index 7f4bfd3fdc..874de05c71 100644
--- a/res/css/views/messages/_MediaBody.scss
+++ b/res/css/views/messages/_MediaBody.scss
@@ -18,11 +18,11 @@ limitations under the License.
// have unique styles).
.mx_MediaBody {
- background-color: $message-body-panel-bg-color;
+ background-color: $quinary-content;
border-radius: 12px;
max-width: 243px; // use max-width instead of width so it fits within right panels
- color: $message-body-panel-fg-color;
+ color: $secondary-content;
font-size: $font-14px;
line-height: $font-24px;
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index bf65af69e3..f012dff0a1 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -208,16 +208,11 @@ $tooltip-timeline-fg-color: $primary-content;
$breadcrumb-placeholder-bg-color: #272c35;
-$message-body-panel-fg-color: $secondary-content;
-$message-body-panel-bg-color: $quinary-content;
-$message-body-panel-icon-bg-color: $system;
-$message-body-panel-icon-fg-color: $secondary-content;
-
$voice-record-stop-border-color: $quaternary-content;
$voice-record-waveform-incomplete-fg-color: $quaternary-content;
$voice-record-icon-color: $quaternary-content;
-$voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
-$voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
+$voice-playback-button-bg-color: $system;
+$voice-playback-button-fg-color: $secondary-content;
// Appearance tab colors
$appearance-tab-border-color: $room-highlight-color;
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index f4dbc25f8f..bed1e9c661 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -204,11 +204,6 @@ $tooltip-timeline-fg-color: #ffffff;
$breadcrumb-placeholder-bg-color: #272c35;
-$message-body-panel-fg-color: $secondary-fg-color;
-$message-body-panel-bg-color: #394049;
-$message-body-panel-icon-fg-color: $secondary-fg-color;
-$message-body-panel-icon-bg-color: #21262C;
-
// See non-legacy dark for variable information
$voice-record-stop-border-color: #6F7882;
$voice-record-waveform-incomplete-fg-color: #6F7882;
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index 92ff4ec722..2ce5b6062c 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -328,19 +328,14 @@ $tooltip-timeline-fg-color: #ffffff;
$breadcrumb-placeholder-bg-color: #e8eef5;
-$message-body-panel-fg-color: $secondary-fg-color;
-$message-body-panel-bg-color: #E3E8F0;
-$message-body-panel-icon-fg-color: $secondary-fg-color;
-$message-body-panel-icon-bg-color: $system;
-
// See non-legacy _light for variable information
$voice-record-stop-symbol-color: #ff4b55;
$voice-record-live-circle-color: #ff4b55;
$voice-record-stop-border-color: #E3E8F0;
$voice-record-waveform-incomplete-fg-color: #C1C6CD;
$voice-record-icon-color: $tertiary-fg-color;
-$voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
-$voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
+$voice-playback-button-bg-color: $system;
+$voice-playback-button-fg-color: $secondary-content;
// FontSlider colors
$appearance-tab-border-color: $input-darker-bg-color;
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index ac19174b77..26cd1766c1 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -328,11 +328,6 @@ $tooltip-timeline-fg-color: $background;
$breadcrumb-placeholder-bg-color: #e8eef5;
-$message-body-panel-fg-color: $secondary-content;
-$message-body-panel-bg-color: $quinary-content;
-$message-body-panel-icon-bg-color: $system;
-$message-body-panel-icon-fg-color: $secondary-content;
-
// These two don't change between themes. They are the $warning-color, but we don't
// want custom themes to affect them by accident.
$voice-record-stop-symbol-color: #ff4b55;
@@ -341,8 +336,8 @@ $voice-record-live-circle-color: #ff4b55;
$voice-record-stop-border-color: $quinary-content;
$voice-record-waveform-incomplete-fg-color: $quaternary-content;
$voice-record-icon-color: $tertiary-content;
-$voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
-$voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
+$voice-playback-button-bg-color: $system;
+$voice-playback-button-fg-color: $secondary-content;
// FontSlider colors
$appearance-tab-border-color: $input-darker-bg-color;
From a3a1820064ee1a20e21a7729e27672d9ea91a7b0 Mon Sep 17 00:00:00 2001
From: Tirifto <tirifto@posteo.cz>
Date: Mon, 27 Sep 2021 00:56:13 +0000
Subject: [PATCH 218/313] Translated using Weblate (Esperanto)
Currently translated at 99.6% (3155 of 3166 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/eo/
---
src/i18n/strings/eo.json | 34 +++++++++++++++++++++++++++++++++-
1 file changed, 33 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/eo.json b/src/i18n/strings/eo.json
index fd3631c297..a109b102e6 100644
--- a/src/i18n/strings/eo.json
+++ b/src/i18n/strings/eo.json
@@ -3124,5 +3124,37 @@
"Threaded messaging": "Mesaĝaj fadenoj",
"%(senderName)s unpinned a message from this room. See all pinned messages.": "%(senderName)s malfiksis mesaĝon de ĉi tiu ĉambro. Vidu ĉiujn fiksitajn mesaĝojn.",
"%(senderName)s unpinned <a>a message</a> from this room. See all <b>pinned messages</b>.": "%(senderName)s malfiksis <a>mesaĝon</a> de ĉi tiu ĉambro. Vidu ĉiujn <b>fiksitajn mesaĝojn</b>.",
- "%(senderName)s pinned a message to this room. See all pinned messages.": "%(senderName)s fiksis mesaĝon al ĉi tiu ĉambro. Vidu ĉiujn fiksitajn mesaĝojn."
+ "%(senderName)s pinned a message to this room. See all pinned messages.": "%(senderName)s fiksis mesaĝon al ĉi tiu ĉambro. Vidu ĉiujn fiksitajn mesaĝojn.",
+ "To join this Space, hide communities in your <a>preferences</a>": "Por aliĝi al ĉi tiu aro, kaŝu komunumojn per viaj <a>agordoj</a>",
+ "To view this Space, hide communities in your <a>preferences</a>": "Por vidi ĉi tiun aron, kaŝu komunumojn per viaj <a>agordoj</a>",
+ "Rooms and spaces": "Ĉambroj kaj aroj",
+ "Results": "Rezultoj",
+ "To join %(communityName)s, swap to communities in your <a>preferences</a>": "Por aliĝi al %(communityName)s, ŝaltu komunumojn en viaj <a>agordoj</a>",
+ "To view %(communityName)s, swap to communities in your <a>preferences</a>": "Por vidi komunumon %(communityName)s, ŝaltu komunumojn en viaj <a>agordoj</a>",
+ "Private community": "Privata komunumo",
+ "Public community": "Publika komunumo",
+ "Forward": "Plusendi",
+ "Would you like to leave the rooms in this space?": "Ĉu vi volus foriri de la ĉambroj en ĉi tiu aro?",
+ "You are about to leave <spaceName/>.": "Vi foriros de <spaceName/>.",
+ "Leave some rooms": "Foriri de iuj ĉambroj",
+ "Leave all rooms": "Foriri de ĉiuj ĉambroj",
+ "Don't leave any rooms": "Foriru de neniuj ĉambroj",
+ "%(reactors)s reacted with %(content)s": "%(reactors)s reagis per %(content)s",
+ "Thread": "Fadeno",
+ "Some encryption parameters have been changed.": "Ŝanĝiĝis iuj parametroj de ĉifrado.",
+ "Role in <RoomName/>": "Rolo en <RoomName/>",
+ "Message": "Mesaĝo",
+ "Show threads": "Montri fadenojn",
+ "Joining space …": "Aliĝante al aro…",
+ "Explore %(spaceName)s": "Esplori aron %(spaceName)s",
+ "Message didn't send. Click for info.": "Mesaĝo ne sendiĝis. Klaku por akiri informojn.",
+ "Send a sticker": "Sendi glumarkon",
+ "Reply to thread…": "Respondi al fadeno…",
+ "Reply to encrypted thread…": "Respondi al ĉifrita fadeno…",
+ "Add emoji": "Aldoni bildosignon",
+ "To avoid these issues, create a <a>new public room</a> for the conversation you plan to have.": "Por eviti ĉi tiujn problemojn, kreu <a>novan publikan ĉambron</a> por la dezirata interparolo.",
+ "<b>It's not recommended to make encrypted rooms public.</b> It will mean anyone can find and join the room, so anyone can read messages. You'll get none of the benefits of encryption. Encrypting messages in a public room will make receiving and sending messages slower.": "<b>Publikigo de ĉifrataj ĉambroj estas malrekomendata.</b> Ĝi implicas, ke ĉiu povos trovi la ĉambron kaj aliĝi al ĝi, kaj ĉiu do povos legi mesaĝojn. Vi havos neniujn avantaĝojn de ĉifrado. Ĉifrado de mesaĝoj en publika ĉambro malrapidigos iliajn ricevadon kaj sendadon.",
+ "Are you sure you want to make this encrypted room public?": "Ĉu vi certas, ke vi volas publikigi ĉi tiun ĉifratan ĉambron?",
+ "Unknown failure": "Nekonata malsukceso",
+ "Failed to update the join rules": "Malsukcesis ĝisdatigi regulojn pri aliĝo"
}
From 0928a2fcee3705f50d1a727393c6e7f8c6b2a79f Mon Sep 17 00:00:00 2001
From: Andrejs <tlpbu@droplar.com>
Date: Sun, 26 Sep 2021 15:37:19 +0000
Subject: [PATCH 219/313] Translated using Weblate (Latvian)
Currently translated at 60.6% (1921 of 3166 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/lv/
---
src/i18n/strings/lv.json | 298 +++++++++++++++++++++++++++------------
1 file changed, 211 insertions(+), 87 deletions(-)
diff --git a/src/i18n/strings/lv.json b/src/i18n/strings/lv.json
index 30a455ad50..d8e2a21638 100644
--- a/src/i18n/strings/lv.json
+++ b/src/i18n/strings/lv.json
@@ -12,7 +12,7 @@
"Microphone": "Mikrofons",
"Camera": "Kamera",
"Advanced": "Papildu",
- "Always show message timestamps": "Vienmēr rādīt ziņojumu laika zīmogu",
+ "Always show message timestamps": "Vienmēr rādīt ziņas laika zīmogu",
"Authentication": "Autentifikācija",
"%(items)s and %(lastItem)s": "%(items)s un %(lastItem)s",
"A new password must be entered.": "Nepieciešams ievadīt jauno paroli.",
@@ -23,7 +23,7 @@
"Are you sure you want to reject the invitation?": "Vai tiešām vēlaties noraidīt šo uzaicinājumu?",
"Attachment": "Pielikums",
"Ban": "Liegt pieeju",
- "Banned users": "Lietotāji, kuriem liegta pieeju",
+ "Banned users": "Lietotāji, kuriem liegta pieeja",
"Bans user with given id": "Liedz pieeju lietotājam ar norādīto id",
"Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.": "Neizdodas savienoties ar bāzes serveri. Pārbaudi tīkla savienojumu un pārliecinies, ka <a> bāzes servera SSL sertifikāts</a> ir uzticams, kā arī pārlūkā instalētie paplašinājumi nebloķē pieprasījumus.",
"Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. Either use HTTPS or <a>enable unsafe scripts</a>.": "Neizdodas savienoties ar bāzes serveri izmantojot HTTP protokolu, kad pārlūka adreses laukā norādīts HTTPS protokols. Tā vietā izmanto HTTPS vai <a>iespējo nedrošos skriptus</a>.",
@@ -32,7 +32,7 @@
"%(senderDisplayName)s changed the room name to %(roomName)s.": "%(senderDisplayName)s nomainīja istabas nosaukumu uz %(roomName)s.",
"%(senderDisplayName)s removed the room name.": "%(senderDisplayName)s dzēsa istabas nosaukumu.",
"%(senderDisplayName)s changed the topic to \"%(topic)s\".": "%(senderDisplayName)s nomainīja istabas tematu uz \"%(topic)s\".",
- "Changes your display nickname": "Nomaina jūsu parādāmo vārdu",
+ "Changes your display nickname": "Maina jūsu parādāmo vārdu",
"Close": "Aizvērt",
"Command error": "Komandas kļūda",
"Commands": "Komandas",
@@ -47,7 +47,7 @@
"Decrypt %(text)s": "Atšifrēt %(text)s",
"Deops user with given id": "Atceļ operatora statusu lietotājam ar norādīto Id",
"Default": "Noklusējuma",
- "Disinvite": "Atsaukt",
+ "Disinvite": "Atsaukt uzaicinājumu",
"Displays action": "Parāda darbību",
"Download %(text)s": "Lejupielādēt: %(text)s",
"Email": "Epasts",
@@ -75,12 +75,12 @@
"Failed to set display name": "Neizdevās iestatīt parādāmo vārdu",
"Failed to unban": "Neizdevās atbanot/atbloķēt (atcelt pieejas liegumu)",
"Failed to upload profile picture!": "Neizdevās augšupielādēt profila attēlu!",
- "Failed to verify email address: make sure you clicked the link in the email": "Neizdevās apstiprināt epasta adresi. Pārbaudi, vai Tu esi noklikšķinājis/usi saiti epasta ziņā",
+ "Failed to verify email address: make sure you clicked the link in the email": "Neizdevās apstiprināt epasta adresi. Pārbaudi, vai esat noklikšķinājis/usi saiti epasta ziņā",
"Failure to create room": "Neizdevās izveidot istabu",
"Favourite": "Izlase",
"Favourites": "Izlase",
- "Filter room members": "Filtrēt istabas biedrus",
- "Forget room": "\"Aizmirst\" istabu",
+ "Filter room members": "Atfiltrēt istabas dalībniekus",
+ "Forget room": "Aizmirst istabu",
"For security, this session has been signed out. Please sign in again.": "Drošības nolūkos šī sesija ir pārtraukta. Lūdzu, pieraksties par jaunu.",
"%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s": "%(userId)s no %(fromPowerLevel)s uz %(toPowerLevel)s",
"Hangup": "Beigt zvanu",
@@ -107,9 +107,9 @@
"Leave room": "Pamest istabu",
"Logout": "Izrakstīties",
"Low priority": "Zema prioritāte",
- "%(senderName)s made future room history visible to all room members, from the point they are invited.": "%(senderName)s padarīja istabas ziņu turpmāko vēsturi redzamu visiem istabas biedriem no brīža, kad tie tika uzaicināti.",
- "%(senderName)s made future room history visible to all room members, from the point they joined.": "%(senderName)s padarīja istabas ziņu turpmāko vēsturi redzamu visiem istabas biedriem ar brīdi, kad tie pievienojās.",
- "%(senderName)s made future room history visible to all room members.": "%(senderName)s padarīja istabas ziņu turpmāko vēsturi redzamu visiem istabas biedriem.",
+ "%(senderName)s made future room history visible to all room members, from the point they are invited.": "%(senderName)s padarīja istabas ziņu turpmāko vēsturi redzamu visiem istabas dalībniekiem no brīža, kad tie tika uzaicināti.",
+ "%(senderName)s made future room history visible to all room members, from the point they joined.": "%(senderName)s padarīja istabas ziņu turpmāko vēsturi redzamu visiem istabas dalībniekiem ar brīdi, kad tie pievienojās.",
+ "%(senderName)s made future room history visible to all room members.": "%(senderName)s padarīja istabas ziņu turpmāko vēsturi redzamu visiem istabas dalībniekiem.",
"%(senderName)s made future room history visible to anyone.": "%(senderName)s padarīja istabas ziņu turpmāko vēsturi redzamu ikvienam.",
"%(senderName)s made future room history visible to unknown (%(visibility)s).": "%(senderName)s padarīja istabas ziņu turpmāko vēsturi redzamu nepazīstamajiem (%(visibility)s).",
"Missing room_id in request": "Iztrūkstošs room_id pieprasījumā",
@@ -193,7 +193,7 @@
"This phone number is already in use": "Šis telefona numurs jau tiek izmantots",
"This room": "Šajā istabā",
"This room is not accessible by remote Matrix servers": "Šī istaba nav pieejama no citiem Matrix serveriem",
- "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "Notika mēģinājums ielādēt šīs istabas specifisku laikpaziņojumu sadaļu, bet Tev nav atļaujas skatīt šo ziņu.",
+ "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "Notika mēģinājums specifisku posmu šīs istabas laika skalā, bet jums nav atļaujas skatīt konkrēto ziņu.",
"Tried to load a specific point in this room's timeline, but was unable to find it.": "Mēģinājums ielādēt šīs istabas čata vēstures izvēlēto posmu neizdevās, jo tas netika atrasts.",
"Unable to add email address": "Neizdevās pievienot epasta adresi",
"Unable to remove contact information": "Neizdevās dzēst kontaktinformāciju",
@@ -206,7 +206,7 @@
"Create new room": "Izveidot jaunu istabu",
"Dismiss": "Aizvērt/atcelt",
"You have <a>enabled</a> URL previews by default.": "URL priekšskatījumi pēc noklusējuma jums ir<a>iespējoti</a> .",
- "Upload avatar": "Augšupielādēt avataru (profila attēlu)",
+ "Upload avatar": "Augšupielādēt avataru",
"Upload Failed": "Augšupielāde (nosūtīšana) neizdevās",
"Upload file": "Augšupielādēt failu",
"Upload new:": "Augšupielādēt jaunu:",
@@ -312,7 +312,7 @@
"Create": "Izveidot",
"Featured Rooms:": "Ieteiktās istabas:",
"Featured Users:": "Ieteiktie lietotāji:",
- "Automatically replace plain text Emoji": "Automātiski aizvietot tekstu ar emocīšiem (emoji)",
+ "Automatically replace plain text Emoji": "Automātiski aizstāt vienkāršā teksta emocijzīmes",
"Failed to upload image": "Neizdevās augšupielādēt attēlu",
"%(widgetName)s widget added by %(senderName)s": "%(senderName)s pievienoja %(widgetName)s vidžetu",
"%(widgetName)s widget removed by %(senderName)s": "%(senderName)s dzēsa vidžetu %(widgetName)s",
@@ -322,7 +322,7 @@
"Send": "Sūtīt",
"Leave": "Pamest",
"Unnamed room": "Nenosaukta istaba",
- "Guests can join": "Var pievienoties viesi",
+ "Guests can join": "Viesi var pievienoties",
"The platform you're on": "Izmantotā operētājsistēma",
"The version of %(brand)s": "%(brand)s versija",
"Your language of choice": "Izvēlētā valoda",
@@ -335,10 +335,10 @@
"%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s",
"Who would you like to add to this community?": "Kurus cilvēkus Tu vēlētos pievienot šai kopienai?",
"Warning: any person you add to a community will be publicly visible to anyone who knows the community ID": "Brīdinājums: ikviens, kurš tiek pievienots kopienai būs publiski redzams visiem, kuri zin kopienas Id",
- "Invite new community members": "Uzaicināt jaunus kopienas biedrus",
+ "Invite new community members": "Uzaicināt jaunus kopienas dalībniekus",
"Invite to Community": "Uzaicināt kopienā",
"Which rooms would you like to add to this community?": "Kuras istabas vēlies pievienot šai kopienai?",
- "Show these rooms to non-members on the community page and room list?": "Vai ne-biedriem rādīt kopienas lapā un istabu sarakstā šīs istabas?",
+ "Show these rooms to non-members on the community page and room list?": "Vai rādīt šis istabas kopienas lapā un istabu sarakstā tiem, kas nav dalībnieki?",
"Add rooms to the community": "Pievienot istabas kopienai",
"Add to community": "Pievienot kopienai",
"Failed to invite the following users to %(groupId)s:": "Neizdevās uzaicināt sekojošus lietotājus grupā %(groupId)s:",
@@ -384,10 +384,10 @@
"World readable": "Pieejama ikvienam un no visurienes",
"Failed to remove tag %(tagName)s from room": "Neizdevās istabai noņemt birku %(tagName)s",
"Failed to add tag %(tagName)s to room": "Neizdevās istabai pievienot birku %(tagName)s",
- "Banned by %(displayName)s": "%(displayName)s liedzis piekļuvi",
- "Members only (since the point in time of selecting this option)": "Tikai biedri (no šī parametra iestatīšanas brīža)",
- "Members only (since they were invited)": "Tikai biedri (no to uzaicināšanas brīža)",
- "Members only (since they joined)": "Tikai biedri (kopš pievienošanās)",
+ "Banned by %(displayName)s": "%(displayName)s liedzis pieeju",
+ "Members only (since the point in time of selecting this option)": "Tikai dalībnieki (no šī parametra iestatīšanas brīža)",
+ "Members only (since they were invited)": "Tikai dalībnieki (no to uzaicināšanas brīža)",
+ "Members only (since they joined)": "Tikai dalībnieki (kopš pievienošanās)",
"Invalid community ID": "Nederīgs kopienas Id",
"'%(groupId)s' is not a valid community ID": "'%(groupId)s' nav derīgs kopienas Id",
"Flair": "Noskaņa",
@@ -400,11 +400,11 @@
"Failed to copy": "Nokopēt neizdevās",
"A text message has been sent to %(msisdn)s": "Teksta ziņa tika nosūtīta uz %(msisdn)s",
"Remove from community": "Dzēst no kopienas",
- "Disinvite this user from community?": "Atcelt šim lietotājam nosūtīto uzaicinājumu pievienoties kopienai?",
+ "Disinvite this user from community?": "Atsaukt šim lietotājam nosūtīto uzaicinājumu pievienoties kopienai?",
"Remove this user from community?": "Izdzēst šo lietotāju no kopienas?",
"Failed to withdraw invitation": "Neizdevās atcelt uzaicinājumu",
"Failed to remove user from community": "Neizdevās izdzēst lietotāju no kopienas",
- "Filter community members": "Kopienas biedru filtrs",
+ "Filter community members": "Kopienas dalībnieku filtrs",
"Are you sure you want to remove '%(roomName)s' from %(groupId)s?": "Vai tiešām vēlaties dzēst '%(roomName)s' no %(groupId)s?",
"Removing a room from the community will also remove it from the community page.": "Dzēšot istabu no kopienas tā tiks dzēsta arī no kopienas lapas.",
"Failed to remove room from community": "Neizdevās dzēst istabu no kopienas",
@@ -526,8 +526,8 @@
"Unable to reject invite": "Neizdevās noraidīt uzaicinājumu",
"Leave %(groupName)s?": "Pamest %(groupName)s?",
"%(inviter)s has invited you to join this community": "%(inviter)s uzaicināja jūs pievienoties šai kopienai",
- "You are an administrator of this community": "Tu esi šīs kopienas administrators",
- "You are a member of this community": "Tu esi šīs kopienas biedrs",
+ "You are an administrator of this community": "Jūs esat šīs kopienas administrators",
+ "You are a member of this community": "Jūs esat šīs kopienas dalībnieks",
"Long Description (HTML)": "Garais apraksts (HTML)",
"Community %(groupId)s not found": "Kopiena %(groupId)s nav atrasta",
"Your Communities": "Jūsu kopienas",
@@ -546,7 +546,7 @@
"Update": "Atjaunināt",
"What's New": "Kas jauns",
"On": "Ieslēgt",
- "Changelog": "Izmaiņu saraksts (vēsture)",
+ "Changelog": "Izmaiņu vēsture",
"Waiting for response from server": "Tiek gaidīta atbilde no servera",
"Send Custom Event": "Sūtīt individuālu notikumu",
"Failed to send logs: ": "Neizdevās nosūtīt logfailus: ",
@@ -560,7 +560,7 @@
"Source URL": "Avota URL adrese",
"Messages sent by bot": "Botu nosūtītās ziņas",
"Filter results": "Filtrēt rezultātus",
- "Members": "Biedri",
+ "Members": "Dalībnieki",
"No update available.": "Nav atjauninājumu.",
"Resend": "Nosūtīt atkārtoti",
"Collecting app version information": "Tiek iegūta programmas versijas informācija",
@@ -842,7 +842,7 @@
"Interactively verify by Emoji": "Abpusēji verificēt ar emocijzīmēm",
"Manually Verify by Text": "Manuāli verificēt ar tekstu",
"%(senderName)s revoked the invitation for %(targetDisplayName)s to join the room.": "%(senderName)s atsauca uzaicinājumu %(targetDisplayName)s pievienoties istabai.",
- "%(senderName)s changed the addresses for this room.": "%(senderName)s izmainīja istabas adreses.",
+ "%(senderName)s changed the addresses for this room.": "%(senderName)s nomainīja istabas adreses.",
"%(senderName)s removed the main address for this room.": "%(senderName)s dzēsa galveno adresi šai istabai.",
"%(senderName)s set the main address for this room to %(address)s.": "%(senderName)s iestatīja istabas galveno adresi kā %(address)s.",
"Afghanistan": "Afganistāna",
@@ -920,7 +920,7 @@
"Phone numbers": "Tālruņa numuri",
"Email Address": "Epasta adrese",
"Email addresses": "Epasta adreses",
- "Change topic": "Mainīt tematu",
+ "Change topic": "Nomainīt tematu",
"Change room avatar": "Mainīt istabas avataru",
"Change main address for the room": "Mainīt istabas galveno adresi",
"%(senderName)s changed the main and alternative addresses for this room.": "%(senderName)s nomainīja istabas galveno un alternatīvo adresi.",
@@ -932,7 +932,7 @@
"Invite users": "Uzaicināt lietotājus",
"Send messages": "Sūtīt ziņas",
"Default role": "Noklusējuma loma",
- "Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.": "Izmaiņas attiecībā uz to, kas var lasīt vēsturi, attieksies tikai uz nākamajiem ziņojumiem šajā istabā. Esošās vēstures redzamība nemainīsies.",
+ "Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.": "Izmaiņas attiecībā uz to, kas var lasīt vēsturi, attieksies tikai uz nākamajiem ziņām šajā istabā. Esošās vēstures redzamība nemainīsies.",
"Never send encrypted messages to unverified sessions in this room from this session": "Nesūtīt šifrētas ziņas no šīs sesijas neverificētām sesijām šajā istabā",
"Encrypted": "Šifrēts",
"Enable room encryption": "Iespējot istabas šifrēšanu",
@@ -1053,7 +1053,7 @@
"Reject & Ignore user": "Noraidīt un ignorēt lietotāju",
"Do you want to chat with %(user)s?": "Vai vēlaties sarakstīties ar %(user)s?",
"This homeserver doesn't offer any login flows which are supported by this client.": "Šis bāzes serveris neatbalsta nevienu pierakstīšanās metodi, kuru atbalstītu šis klients.",
- "Explore rooms": "Pārlūkot telpas",
+ "Explore rooms": "Pārlūkot istabas",
"Confirm Security Phrase": "Apstipriniet slepeno frāzi",
"Safeguard against losing access to encrypted messages & data by backing up encryption keys on your server.": "Nodrošinieties pret piekļuves zaudēšanu šifrētām ziņām un datiem, dublējot šifrēšanas atslēgas savā serverī.",
"Use a secret phrase only you know, and optionally save a Security Key to use for backup.": "Izmantojiet tikai jums zināmu slepeno frāzi un pēc izvēles saglabājiet drošības atslēgu, lai to izmantotu dublēšanai.",
@@ -1113,7 +1113,7 @@
"The homeserver may be unavailable or overloaded.": "Iespējams, bāzes serveris nav pieejams vai ir pārslogots.",
"%(brand)s failed to get the public room list.": "%(brand)s neizdevās iegūt publisko istabu sarakstu.",
"%(brand)s failed to get the protocol list from the homeserver. The homeserver may be too old to support third party networks.": "%(brand)s neizdevās iegūt protokolu sarakstu no bāzes servera. Iespējams, bāzes serveris ir pārāk vecs, lai atbalstītu trešo pušu tīklus.",
- "Add a photo so people know it's you.": "Pievienot foto, lai cilvēki zina, ka tas esi tu.",
+ "Add a photo so people know it's you.": "Pievienot foto, lai cilvēki zina, ka tas esat jūs.",
"Great, that'll help people know it's you": "Lieliski, tas ļaus cilvēkiem tevi atpazīt",
"This homeserver does not support communities": "Šis bāzes serveris neatbalsta kopienas",
"Everyone": "Jebkurš",
@@ -1148,7 +1148,7 @@
"Bulk options": "Lielapjoma opcijas",
"Clear cache and reload": "Notīrīt kešatmiņu un pārlādēt",
"Versions": "Versijas",
- "Keyboard Shortcuts": "Klaviatūras saīsnes",
+ "Keyboard Shortcuts": "Īsinājumtaustiņi",
"FAQ": "BUJ",
"For help with using %(brand)s, click <a>here</a>.": "Palīdzībai %(brand)s izmantošanā, spiediet <a>šeit</a>.",
"Account management": "Konta pārvaldība",
@@ -1388,38 +1388,38 @@
"You can log in, but some features will be unavailable until the identity server is back online. If you keep seeing this warning, check your configuration or contact a server admin.": "Jūs varat ierakstīties, taču dažas funkcijas nebūs pieejamas, kamēr nebūs pieejams identitāšu serveris. Ja arī turpmāk redzat šo brīdinājumu, lūdzu, pārbaudiet konfigurāciju vai sazinieties ar servera administratoru.",
"Cannot reach identity server": "Neizdodas sasniegt identitāšu serveri",
"Ask your %(brand)s admin to check <a>your config</a> for incorrect or duplicate entries.": "Paprasiet %(brand)s administratoram pārbaudīt, vai <a> jūsu konfigurācijas failā</a> nav nepareizu vai dublējošos ierakstu.",
- "See <b>%(msgtype)s</b> messages posted to your active room": "Redzēt jūsu aktīvajā telpā izliktās <b>%(msgtype)s</b> ziņas",
- "See <b>%(msgtype)s</b> messages posted to this room": "Redzēt šajā telpā izliktās <b>%(msgtype)s</b> ziņas",
+ "See <b>%(msgtype)s</b> messages posted to your active room": "Apskatīt <b>%(msgtype)s</b> ziņas, kas publicētas jūsu aktīvajā istabā",
+ "See <b>%(msgtype)s</b> messages posted to this room": "Apskatīt <b>%(msgtype)s</b> ziņas, kas publicētas šajā istabā",
"Send <b>%(msgtype)s</b> messages as you in your active room": "Sūtīt <b>%(msgtype)s</b> ziņas savā vārdā savā aktīvajā telpā",
"Send <b>%(msgtype)s</b> messages as you in this room": "Sūtīt <b>%(msgtype)s</b> ziņas savā vārdā šajā telpā",
"See general files posted to your active room": "Redzēt jūsu aktīvajā telpā izliktos failus",
"See general files posted to this room": "Redzēt šajā telpā izliktos failus",
- "Send general files as you in your active room": "Sūtīt failus savā vārdā jūsu aktīvajā telpā",
- "Send general files as you in this room": "Sūtīt failus savā vārdā šajā telpā",
+ "Send general files as you in your active room": "Sūtīt failus savā vārdā jūsu aktīvajā istabā",
+ "Send general files as you in this room": "Sūtīt failus savā vārdā šajā istabā",
"See videos posted to your active room": "Redzēt video, kuri izlikti jūsu aktīvajā telpā",
"See videos posted to this room": "Redzēt video, kuri izlikti šajā telpā",
- "Send videos as you in your active room": "Sūtīt video savā vārdā savā aktīvajā telpā",
- "Send videos as you in this room": "Sūtīt video savā vārdā šajā telpā",
+ "Send videos as you in your active room": "Sūtīt video savā vārdā savā aktīvajā istabā",
+ "Send videos as you in this room": "Sūtīt video savā vārdā šajā istabā",
"See images posted to your active room": "Redzēt attēlus, kuri izlikti jūsu aktīvajā telpā",
"See images posted to this room": "Redzēt attēlus, kuri izlikti šajā telpā",
- "Send images as you in your active room": "Sūtīt attēlus savā vārdā savā aktīvajā telpā",
- "Send images as you in this room": "Sūtīt attēlus savā vārdā šajā telpā",
+ "Send images as you in your active room": "Sūtīt attēlus savā vārdā savā aktīvajā istabā",
+ "Send images as you in this room": "Sūtīt attēlus savā vārdā šajā istabā",
"See emotes posted to your active room": "Redzēt emocijas, kuras izvietotas jūsu aktīvajā telpā",
"See emotes posted to this room": "Redzēt emocijas, kuras izvietotas šajā telpā",
- "Send emotes as you in your active room": "Nosūtīt emocijas savā vārdā uz savu aktīvo telpu",
- "Send emotes as you in this room": "Nosūtīt emocijas savā vārdā uz šo telpu",
+ "Send emotes as you in your active room": "Nosūtīt emocijas savā vārdā uz savu aktīvo istabu",
+ "Send emotes as you in this room": "Nosūtīt emocijas savā vārdā uz šo istabu",
"See text messages posted to your active room": "Redzēt teksta ziņas, kuras izvietotas jūsu aktīvajā telpā",
"See text messages posted to this room": "Redzēt teksta ziņas, kas izvietotas šajā telpā",
- "Send text messages as you in your active room": "Sūtīt teksta ziņas savā vārdā jūsu aktīvajā telpā",
- "Send text messages as you in this room": "Sūtīt teksta ziņas savā vārdā šajā telpā",
+ "Send text messages as you in your active room": "Sūtīt teksta ziņas savā vārdā jūsu aktīvajā istabā",
+ "Send text messages as you in this room": "Sūtīt teksta ziņas savā vārdā šajā istabā",
"See messages posted to your active room": "Redzēt ziņas, kas izvietotas jūsu aktīvajā telpā",
"See messages posted to this room": "Redzēt ziņas, kas izvietotas šajā telpā",
- "Send messages as you in your active room": "Sūtiet ziņas savā vārdā jūsu aktīvajā telpā",
- "Send messages as you in this room": "Sūtīt ziņas savā vārdā šajā telpā",
+ "Send messages as you in your active room": "Sūtiet ziņas savā vārdā jūsu aktīvajā istabā",
+ "Send messages as you in this room": "Sūtīt ziņas savā vārdā šajā istabā",
"The <b>%(capability)s</b> capability": "<b>%(capability)s</b> iespējas",
- "See <b>%(eventType)s</b> events posted to your active room": "Redzēt, kad <b>%(eventType)s</b> notikumi izvietoti jūsu aktīvajā telpā",
+ "See <b>%(eventType)s</b> events posted to your active room": "Apskatīt <b>%(eventType)s</b> notikumus jūsu aktīvajā istabā",
"Send <b>%(eventType)s</b> events as you in your active room": "Sūtīt <b>%(eventType)s</b> notikumus savā vārdā savā aktīvajā telpā",
- "See <b>%(eventType)s</b> events posted to this room": "Redzēt <b>%(eventType)s</b> notikumus, kas izvietoti šajā telpā",
+ "See <b>%(eventType)s</b> events posted to this room": "Apskatīt <b>%(eventType)s</b> notikumus šajā istabā",
"Send <b>%(eventType)s</b> events as you in this room": "Sūtiet <b>%(eventType)s</b> notikumus jūsu vārdā šajā telpā",
"with state key %(stateKey)s": "ar stāvokļa/statusa atslēgu %(stateKey)s",
"with an empty state key": "ar tukšu stāvokļa/statusa atslēgu",
@@ -1428,23 +1428,23 @@
"See when a sticker is posted in this room": "Redzēt, kad šajā telpā parādās stikers",
"Send stickers to this room as you": "Nosūtīt stikerus savā vārdā uz šo telpu",
"See when people join, leave, or are invited to your active room": "Redzēt, kad cilvēki ienāk/pievienojas, pamet/atvienojas vai ir uzaicināti uz jūsu aktīvo telpu",
- "Kick, ban, or invite people to this room, and make you leave": "Izspert, liegt vai uzaicināt cilvēkus uz šo telpu un likt jums aiziet",
- "Kick, ban, or invite people to your active room, and make you leave": "Izspert, liegt vai uzaicināt cilvēkus uz jūsu aktīvo telpu un likt jums aiziet",
+ "Kick, ban, or invite people to this room, and make you leave": "Padzīt, liegt pieeju vai uzaicināt cilvēkus uz šo istabu un likt jums aiziet",
+ "Kick, ban, or invite people to your active room, and make you leave": "Padzīt, liegt pieeju vai uzaicināt cilvēkus uz jūsu aktīvo istabu un likt jums aiziet",
"See when people join, leave, or are invited to this room": "Redzēt, kad cilvēki ienāk/pievienojas, pamet/atvienojas vai ir uzaicināti uz šo telpu",
"See when the avatar changes in your active room": "Redzēt, kad notiek jūsu aktīvās istabas avatara izmaiņas",
- "Change the avatar of your active room": "Mainīt jūsu aktīvās telpas avataru",
+ "Change the avatar of your active room": "Nomainīt jūsu aktīvās istabas avataru",
"See when the avatar changes in this room": "Redzēt, kad notiek šīs istabas avatara izmaiņas",
- "Change the avatar of this room": "Mainīt šīs istabas avataru",
+ "Change the avatar of this room": "Nomainīt šīs istabas avataru",
"See when the name changes in your active room": "Redzēt, kad notiek aktīvās telpas nosaukuma izmaiņas",
- "Change the name of your active room": "Mainīt jūsu aktīvās telpas nosaukumu",
+ "Change the name of your active room": "Nomainīt jūsu aktīvās istabas nosaukumu",
"See when the name changes in this room": "Redzēt, kad mainās šīs telpas nosaukums",
- "Change the name of this room": "Mainīt šīs telpas nosaukumu",
+ "Change the name of this room": "Nomainīt šīs istabas nosaukumu",
"See when the topic changes in this room": "Redzēt, kad mainās šīs telpas temats",
"See when the topic changes in your active room": "Redzēt, kad mainās pašreizējā tērziņa temats",
"Change the topic of your active room": "Nomainīt jūsu aktīvās istabas tematu",
- "Change the topic of this room": "Nomainīt šīs telpas tematu",
- "Change which room, message, or user you're viewing": "Nomainīt telpu, ziņu vai lietotāju, kurš ir fokusā (kuru jūs skatiet)",
- "Change which room you're viewing": "Nomainīt telpu, kuru jūs skatiet",
+ "Change the topic of this room": "Nomainīt šīs istabas tematu",
+ "Change which room, message, or user you're viewing": "Nomainīt istabu, ziņu vai lietotāju, kuru jūs skatiet",
+ "Change which room you're viewing": "Nomainīt istabu, kuru jūs skatiet",
"Send stickers into your active room": "Iesūtīt stikerus jūsu aktīvajā telpā",
"Send stickers into this room": "Šajā telpā iesūtīt stikerus",
"Remain on your screen while running": "Darbības laikā paliek uz ekrāna",
@@ -1452,21 +1452,21 @@
"Dark": "Tumša",
"Light": "Gaiša",
"%(senderName)s updated a ban rule that was matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s pārjaunoja lieguma noteikumu šablonu %(oldGlob)s uz šablonu %(newGlob)s dēļ %(reason)s",
- "%(senderName)s changed a rule that was banning servers matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s aizstāja noteikumu, kas piekļuvi liedza serveriem, kas atbilst pazīmei %(oldGlob)s, ar atbilstošu pazīmei %(newGlob)s dēļ %(reason)s",
- "%(senderName)s changed a rule that was banning rooms matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s aizstāja noteikumu, kurš liedza %(oldGlob)s pazīmei atbilstošas telpas ar jaunu noteikumu, kurš liedz %(newGlob)s dēļ %(reason)s",
- "%(senderName)s changed a rule that was banning users matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s aizstāja noteikumu, kurš aizliedza lietotājus %(oldGlob)s ar jaunu noteikumu, kurš aizliedz %(newGlob)s dēļ %(reason)s",
+ "%(senderName)s changed a rule that was banning servers matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s aizstāja noteikumu, kas liedza pieeju serveriem, kas atbilst pazīmei %(oldGlob)s, ar atbilstošu pazīmei %(newGlob)s dēļ %(reason)s",
+ "%(senderName)s changed a rule that was banning rooms matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s izmainīja noteikumu, kurš liedz pieeju istabām, kas atbilst %(oldGlob)s pazīmei pret %(newGlob)s dēļ %(reason)s",
+ "%(senderName)s changed a rule that was banning users matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s aizstāja noteikumu, kurš liedza pieeju lietotājiem %(oldGlob)s ar jaunu noteikumu, kurš aizliedz %(newGlob)s dēļ %(reason)s",
"%(senderName)s has updated the widget layout": "%(senderName)s ir aktualizējis vidžeta/logrīka izkārtojumu",
- "%(senderName)s changed the <a>pinned messages</a> for the room.": "%(senderName)s mainīja telpas <a>piekabinātās ziņas</a>.",
- "%(senderDisplayName)s upgraded this room.": "%(senderDisplayName)s modernizēja šo telpu.",
- "%(senderName)s kicked %(targetName)s": "%(senderName)s izspēra %(targetName)s",
- "%(senderName)s kicked %(targetName)s: %(reason)s": "%(senderName)s izspēra %(targetName)s: %(reason)s",
+ "%(senderName)s changed the <a>pinned messages</a> for the room.": "%(senderName)s nomainīja <a>piespraustās ziņas</a> šai istabai.",
+ "%(senderDisplayName)s upgraded this room.": "%(senderDisplayName)s atjaunināja šo istabu.",
+ "%(senderName)s kicked %(targetName)s": "%(senderName)s padzina %(targetName)s",
+ "%(senderName)s kicked %(targetName)s: %(reason)s": "%(senderName)s padzina %(targetName)s: %(reason)s",
"%(senderName)s withdrew %(targetName)s's invitation": "%(senderName)s atsauca %(targetName)s paredzēto uzaicinājumu",
"%(senderName)s withdrew %(targetName)s's invitation: %(reason)s": "%(senderName)s atsauca %(targetName)s paredzēto uzaicinājumu: %(reason)s",
"%(senderName)s unbanned %(targetName)s": "%(senderName)s noņēma liegumu/atbanoja %(targetName)s",
- "%(targetName)s left the room": "%(targetName)s pameta/atvienojās no telpas",
- "%(targetName)s left the room: %(reason)s": "%(targetName)s pameta/atvienojās no telpas: %(reason)s",
+ "%(targetName)s left the room": "%(targetName)s pameta istabu",
+ "%(targetName)s left the room: %(reason)s": "%(targetName)s pameta istabu: %(reason)s",
"%(targetName)s rejected the invitation": "%(targetName)s noraidīja uzaicinājumu",
- "%(targetName)s joined the room": "%(targetName)s ienāca (pievienojās) telpā",
+ "%(targetName)s joined the room": "%(targetName)s pievienojās istabai",
"%(senderName)s made no change": "%(senderName)s neizdarīja izmaiņas",
"%(senderName)s set a profile picture": "%(senderName)s iestatīja profila attēlu",
"%(senderName)s changed their profile picture": "%(senderName)s nomainīja savu profila attēlu",
@@ -1474,13 +1474,13 @@
"%(senderName)s removed their display name (%(oldDisplayName)s)": "%(senderName)s dzēsa savu redzamo vārdu (%(oldDisplayName)s)",
"%(senderName)s set their display name to %(displayName)s": "%(senderName)s iestatīja %(displayName)s kā savu redzamo vārdu",
"%(oldDisplayName)s changed their display name to %(displayName)s": "%(oldDisplayName)s nomainīja savu redzamo vārdu uz %(displayName)s",
- "%(senderName)s banned %(targetName)s": "%(senderName)s aizliedza/nobanoja %(targetName)s",
- "%(senderName)s banned %(targetName)s: %(reason)s": "%(senderName)s aizliedza/nobanoja %(targetName)s: %(reason)s",
+ "%(senderName)s banned %(targetName)s": "%(senderName)s liedza pieeju %(targetName)s",
+ "%(senderName)s banned %(targetName)s: %(reason)s": "%(senderName)s liedza pieeju %(targetName)s: %(reason)s",
"%(senderName)s invited %(targetName)s": "%(senderName)s uzaicināja %(targetName)s",
"%(targetName)s accepted an invitation": "%(targetName)s pieņēma uzaicinājumu",
"%(targetName)s accepted the invitation for %(displayName)s": "%(targetName)s pieņēma uzaicinājumu uz %(displayName)s",
- "Converts the DM to a room": "Pārvērst DM par telpu",
- "Converts the room to a DM": "Pārvērst telpu par DM",
+ "Converts the DM to a room": "Pārveido DM par istabu",
+ "Converts the room to a DM": "Pārveido istabu par DM",
"Places the call in the current room on hold": "Iepauzē sarunu šajā telpā",
"Takes the call in the current room off hold": "Šajā telpā iepauzētās sarunas atpauzēšana",
"Sends a message to the given user": "Nosūtīt ziņu dotajam lietotājam",
@@ -1490,28 +1490,28 @@
"Displays list of commands with usages and descriptions": "Parāda komandu sarakstu ar pielietojumiem un aprakstiem",
"Sends the given emote coloured as a rainbow": "Nosūta šo emociju iekrāsotu varavīksnes krāsās",
"Sends the given message coloured as a rainbow": "Nosūta šo ziņu iekrāsotu varavīksnes krāsās",
- "Forces the current outbound group session in an encrypted room to be discarded": "Piespiedu kārtā atmet/izbeidz pašreizējo izejošo grupas sesiju šifrētajā telpā",
+ "Forces the current outbound group session in an encrypted room to be discarded": "Piespiedu kārtā pārtrauc pašreizējo izejošo grupas sesiju šifrētajā istabā",
"The signing key you provided matches the signing key you received from %(userId)s's session %(deviceId)s. Session marked as verified.": "Jūsu iesniegtā parakstīšanas atslēga atbilst parakstīšanas atslēgai, kuru saņēmāt no %(userId)s sesijas %(deviceId)s. Sesija atzīmēta kā verificēta.",
"WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and session %(deviceId)s is \"%(fprint)s\" which does not match the provided key \"%(fingerprint)s\". This could mean your communications are being intercepted!": "BRĪDINĀJUMS: ATSLĒGU VERIFIKĀCIJA NEIZDEVĀS! Parakstīšanas atslēga lietotājam %(userId)s un sesijai %(deviceId)s ir \"%(fprint)s\", kura neatbilst norādītajai atslēgai \"%(fingerprint)s\". Tas var nozīmēt, ka jūsu saziņa tiek pārtverta!",
"Verifies a user, session, and pubkey tuple": "Verificē lietotāju, sesiju un publiskās atslēgas",
"WARNING: Session already verified, but keys do NOT MATCH!": "BRĪDINĀJUMS: Sesija jau ir verificēta, bet atslēgas NESAKRĪT!",
"Unknown (user, session) pair:": "Nezināms (lietotājs, sesija) pāris:",
- "You cannot modify widgets in this room.": "Jūs šajā telpā nevarat mainīt vidžetus/logrīkus.",
+ "You cannot modify widgets in this room.": "Jūs nevarat mainīt vidžetus/logrīkus šajā istabā.",
"Please supply a https:// or http:// widget URL": "Lūdzu ievadiet logrīka URL https:// vai http:// formā",
"Please supply a widget URL or embed code": "Ievadiet vidžeta/logrīka URL vai ievietojiet kodu",
- "Adds a custom widget by URL to the room": "Pievieno telpai individuālu/pielāgotu logrīku/vidžetu ar URL-adresi",
+ "Adds a custom widget by URL to the room": "Pievieno istabai pielāgotu logrīku/vidžetu ar URL-adresi",
"Command failed": "Neizdevās izpildīt komandu",
- "Joins room with given address": "Pievienojas telpai ar šādu adresi",
+ "Joins room with given address": "Pievienojas istabai ar šādu adresi",
"Use an identity server to invite by email. Manage in Settings.": "Izmantojiet identitātes serveri, lai uzaicinātu pa e-pastu. Pārvaldība pieejama Iestatījumos.",
"Use an identity server to invite by email. Click continue to use the default identity server (%(defaultIdentityServerName)s) or manage in Settings.": "Izmantojiet identitātes serveri, lai uzaicinātu pa e-pastu. Noklikšķiniet uz Turpināt, lai izmantotu noklusējuma identitātes serveri (%(defaultIdentityServerName)s) vai nomainītu to Iestatījumos.",
"Use an identity server": "Izmantot identitāšu serveri",
- "Sets the room name": "Iestata telpas nosaukumu",
- "Gets or sets the room topic": "Nolasa vai iestata telpas tematu",
- "Changes your avatar in all rooms": "Maina jūsu avataru visām telpām",
- "Changes your avatar in this current room only": "Maina jūsu avataru tikai šajā telpā",
- "Changes the avatar of the current room": "Maina šīs telpas avataru",
- "Changes your display nickname in the current room only": "Maina rādāmo pseidonīmu/segvārdu tikai šai telpai",
- "Upgrades a room to a new version": "Modernizē telpu uz Jauno versiju",
+ "Sets the room name": "Iestata istabas nosaukumu",
+ "Gets or sets the room topic": "Nolasa vai iestata istabas tematu",
+ "Changes your avatar in all rooms": "Maina jūsu avataru visās istabās",
+ "Changes your avatar in this current room only": "Maina jūsu avataru tikai šajā istabā",
+ "Changes the avatar of the current room": "Maina šīs istabas avataru",
+ "Changes your display nickname in the current room only": "Maina jūsu parādāmo vārdu tikai šajā istabā",
+ "Upgrades a room to a new version": "Atjaunina istabu uz jaunu versiju",
"Sends a message as html, without interpreting it as markdown": "Nosūta ziņu kā HTML, to neinterpretējot kā Markdown",
"Sends a message as plain text, without interpreting it as markdown": "Nosūta ziņu kā vienkāršu tekstu, to neinterpretējot kā Markdown",
"Prepends ( ͡° ͜ʖ ͡°) to a plain-text message": "Pievieno ( ͡° ͜ʖ ͡°) pirms vienkārša teksta ziņas",
@@ -1783,17 +1783,141 @@
"The call could not be established": "Savienojums nevarēja tikt izveidots",
"The user you called is busy.": "Lietotājs, kuram zvanāt, ir aizņemts.",
"User Busy": "Lietotājs aizņemts",
- "Your user agent": "Jūsu lietotāja-aģents",
+ "Your user agent": "Jūsu lietotāja aģents",
"Whether you're using %(brand)s as an installed Progressive Web App": "Vai izmantojiet %(brand)s kā instalētu progresīvo tīmekļa lietotni",
"Whether you're using %(brand)s on a device where touch is the primary input mechanism": "Vai izmantojat %(brand)s ierīcē, kurā skārnienjūtīgs ekrāns ir galvenais ievades mehānisms",
- "This room is used for important messages from the Homeserver, so you cannot leave it.": "Šī telpa tiek izmantota svarīgiem ziņojumiem no bāzes servera, tāpēc jūs nevarat to atstāt.",
- "Can't leave Server Notices room": "Nevar iziet no servera Paziņojumu telpas",
- "Unexpected server error trying to leave the room": "Mēģinot atstāt telpu radās negaidīta servera kļūme",
+ "This room is used for important messages from the Homeserver, so you cannot leave it.": "Šī istaba tiek izmantota svarīgiem ziņojumiem no bāzes servera, tāpēc jūs nevarat to pamest.",
+ "Can't leave Server Notices room": "Nevar pamest Server Notices istabu",
+ "Unexpected server error trying to leave the room": "Mēģinot pamest istabu radās negaidīta servera kļūme",
"Unable to connect to Homeserver. Retrying...": "Nevar izveidot savienojumu ar bāzes/mājas serveri. Mēģinam vēlreiz ...",
"Please <a>contact your service administrator</a> to continue using the service.": "Lūdzu <a>sazinieties ar savu administratoru</a>, lai turpinātu izmantot pakalpojumu.",
"This homeserver has exceeded one of its resource limits.": "Šis bāzes/mājas serveris ir pārsniedzis vienu no tā resursu ierobežojumiem.",
"This homeserver has been blocked by its administrator.": "Šo bāzes/mājas serveri ir bloķējis tā administrators.",
"This homeserver has hit its Monthly Active User limit.": "Šis bāzes/mājas serveris ir sasniedzis ikmēneša aktīvo lietotāju ierobežojumu.",
"Unexpected error resolving identity server configuration": "Negaidīta kļūda identitātes servera konfigurācijā",
- "Unexpected error resolving homeserver configuration": "Negaidīta kļūme mājas servera konfigurācijā"
+ "Unexpected error resolving homeserver configuration": "Negaidīta kļūme mājas servera konfigurācijā",
+ "Cancel All": "Atcelt visu",
+ "Reporting this message will send its unique 'event ID' to the administrator of your homeserver. If messages in this room are encrypted, your homeserver administrator will not be able to read the message text or view any files or images.": "Iesniedzot ziņojumu par konkrēto ziņu, tās unikālais notikuma ID tiks nosūtīts jūsu bāzes servera administratoram. Ja ziņas šajā istabā ir šifrētas, jūsu bāzes servera administrators nevarēs lasīt ziņas tekstu vai skatīt failus un attēlus.",
+ "Sending": "Sūta",
+ "Adding...": "Pievienošana…",
+ "Can't load this message": "Nevar ielādēt šo ziņu",
+ "Send voice message": "Sūtīt balss ziņu",
+ "Sending your message...": "Sūta jūsu ziņu…",
+ "Address": "Adrese",
+ "%(sharerName)s is presenting": "%(sharerName)s prezentē",
+ "Group & filter rooms by custom tags (refresh to apply changes)": "Grupēt un filtrēt istabas pēc pielāgotiem tagiem (atsvaidzināt, lai piemērotu izmaiņas)",
+ "Hey you. You're the best!": "Sveiks! Tu esi labākais!",
+ "Inviting...": "Uzaicina…",
+ "Share %(name)s": "Dalīties ar %(name)s",
+ "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Izmēģiniet citus vārdus vai pārbaudiet drukas kļūdas. Daži rezultāti var nebūt redzami, jo tie ir privāti un ir nepieciešams uzaicinājums, lai pievienotos.",
+ "No results for \"%(query)s\"": "Meklējumam \"%(query)s\" nav rezultātu",
+ "Explore Public Rooms": "Pārlūkot publiskas istabas",
+ "Show preview": "Rādīt priekšskatījumu",
+ "View source": "Skatīt pirmkodu",
+ "Forward": "Pārsūtīt",
+ "Forgotten or lost all recovery methods? <a>Reset all</a>": "Aizmirsāt vai pazaudējāt visas atkopšanās iespējas? <a>Atiestatiet visu</a>",
+ "Share Community": "Dalīties ar kopienu",
+ "Link to most recent message": "Saite uz jaunāko ziņu",
+ "Share Room": "Dalīties ar istabu",
+ "Report Content to Your Homeserver Administrator": "Ziņojums par saturu bāzes servera administratoram",
+ "Send report": "Nosūtīt ziņojumu",
+ "Report the entire room": "Ziņot par visu istabu",
+ "Leave all rooms": "Pamest visas istabas",
+ "Invited people will be able to read old messages.": "Uzaicinātie cilvēki varēs lasīt vecās ziņas.",
+ "Or send invite link": "Vai nosūtiet uzaicinājuma saiti",
+ "If you can't see who you’re looking for, send them your invite link below.": "Ja neredzat meklēto, nosūtiet savu uzaicinājuma saiti zemāk.",
+ "Some suggestions may be hidden for privacy.": "Daži ieteikumi var būt slēpti dēļ privātuma.",
+ "Search for rooms or people": "Meklēt istabas vai cilvēkus",
+ "Message preview": "Ziņas priekšskatījums",
+ "Forward message": "Pārsūtīt ziņu",
+ "Public room": "Publiska istaba",
+ "Private room (invite only)": "Privāta istaba (tikai ar ielūgumiem)",
+ "Only people invited will be able to find and join this room.": "Tikai uzaicinātās cilvēki varēs atrast un pievienoties šai istabai.",
+ "Anyone will be able to find and join this room.": "Ikviens varēs atrast un pievienoties šai istabai.",
+ "You can change this at any time from room settings.": "Jūs to varat mainīt istabas iestatījumos jebkurā laikā.",
+ "Private rooms can be found and joined by invitation only. Public rooms can be found and joined by anyone in this community.": "Privātas istabas var atrast un tām pievienoties tikai pēc uzaicinājuma. Publiskas istabas atrast un tām pievienoties var ikviens no šis kopienas.",
+ "Show": "Rādīt",
+ "Search for rooms": "Meklēt istabas",
+ "Server name": "Servera nosaukums",
+ "Enter the name of a new server you want to explore.": "Ievadiet nosaukumu jaunam serverim, kuru vēlaties pārlūkot.",
+ "%(severalUsers)schanged the <a>pinned messages</a> for the room %(count)s times.|other": "%(severalUsers)smainīja <a>piespraustās ziņas</a> istabā %(count)s reizes.",
+ "Zoom in": "Pietuvināt",
+ "Zoom out": "Attālināt",
+ "Join": "Pievienoties",
+ "Share content": "Dalīties ar saturu",
+ "Your theme": "Jūsu tēma",
+ "Your user ID": "Jūsu lietotāja ID",
+ "Show all": "Rādīt visu",
+ "Show image": "Rādīt attēlu",
+ "Call back": "Atzvanīt",
+ "Call declined": "Zvans noraidīts",
+ "Copy Room Link": "Kopēt istabas saiti",
+ "Invite People": "Uzaicināt cilvēkus",
+ "Forget Room": "Aizmirst istabu",
+ "Join the discussion": "Pievienoties diskusijai",
+ "Forget this room": "Aizmirst šo istabu",
+ "Joining room …": "Pievienošanās istabai…",
+ "Explore %(spaceName)s": "Pālūkot %(spaceName)s",
+ "Explore public rooms": "Pārlūkot publiskas istabas",
+ "Explore community rooms": "Pārlūkot kopienas istabas",
+ "Enable encryption in settings.": "Iespējot šifrēšanu iestatījumos.",
+ "%(seconds)ss left": "%(seconds)s sekundes atlikušas",
+ "Show %(count)s other previews|one": "Rādīt %(count)s citu priekšskatījumu",
+ "Show %(count)s other previews|other": "Rādīt %(count)s citus priekšskatījumus",
+ "Share": "Dalīties",
+ "Access": "Piekļuve",
+ "People with supported clients will be able to join the room without having a registered account.": "Cilvēki ar atbalstītām lietotnēm varēs pievienoties istabai bez reģistrēta konta.",
+ "Decide who can join %(roomName)s.": "Nosakiet, kas var pievienoties %(roomName)s.",
+ "Select the roles required to change various parts of the room": "Izvēlieties lomas, kas nepieciešamas, lai mainītu dažādus istabas parametrus",
+ "Timeline": "Laika skala",
+ "Code blocks": "Koda bloki",
+ "Displaying time": "Laika attēlošana",
+ "To view all keyboard shortcuts, click here.": "Lai apskatītu visus īsinājumtaustiņus, noklikšķiniet šeit.",
+ "Keyboard shortcuts": "Īsinājumtaustiņi",
+ "Theme": "Tēma",
+ "Custom theme URL": "Pielāgotas tēmas URL",
+ "Theme added!": "Tēma pievienota!",
+ "Enter a new identity server": "Ievadiet jaunu identitāšu serveri",
+ "Mentions & keywords": "Pieminēšana un atslēgvārdi",
+ "New keyword": "Jauns atslēgvārds",
+ "Keyword": "Atslēgvārds",
+ "Enable for this account": "Iespējot šim kontam",
+ "Messages containing keywords": "Ziņas, kas satur atslēgvārdus",
+ "Anyone can find and join.": "Ikviens var atrast un pievienoties.",
+ "Only invited people can join.": "Tikai uzaicināti cilvēki var pievienoties.",
+ "Private (invite only)": "Privāta (tikai ar ielūgumiem)",
+ "Expand": "Izvērst",
+ "Decide who can view and join %(spaceName)s.": "Nosakiet, kas var skatīt un pievienoties %(spaceName)s.",
+ "Enable guest access": "Iespējot piekļuvi viesiem",
+ "Invite people": "Uzaicināt cilvēkus",
+ "Show all rooms": "Rādīt visas istabas",
+ "Creating...": "Izveidošana…",
+ "Public": "Publiska",
+ "Corn": "Kukurūza",
+ "Show previews/thumbnails for images": "Rādīt attēlu priekšskatījumus/sīktēlus",
+ "Show hidden events in timeline": "Rādīt slēptos notikumus laika skalā",
+ "Show developer tools": "Rādīt izstrādātāja rīkus",
+ "Match system theme": "Pielāgoties sistēmas tēmai",
+ "Surround selected text when typing special characters": "Iekļaut iezīmēto tekstu, rakstot speciālās rakstzīmes",
+ "Use Ctrl + Enter to send a message": "Lietot Ctrl + Enter ziņas nosūtīšanai",
+ "Use Command + Enter to send a message": "Lietot Command + Enter ziņas nosūtīšanai",
+ "Use Ctrl + F to search timeline": "Lietot Ctrl + F meklēšanai laika skalā",
+ "Use Command + F to search timeline": "Lietot Command + F meklēšanai laika skalā",
+ "Enable big emoji in chat": "Iespējot lielas emocijzīmes čatā",
+ "Jump to the bottom of the timeline when you send a message": "Nosūtot ziņu, pāriet uz laika skalas beigām",
+ "Show line numbers in code blocks": "Rādīt rindu numurus koda blokos",
+ "Expand code blocks by default": "Izvērst koda blokus pēc noklusējuma",
+ "Autoplay videos": "Automātski atskaņot videoklipus",
+ "Autoplay GIFs": "Automātiski atskaņot GIF",
+ "Show read receipts sent by other users": "Rādīt izlasīšanas apliecinājumus no citiem lietotājiem",
+ "Show a placeholder for removed messages": "Rādīt dzēstu ziņu vietturus",
+ "Use custom size": "Izmantot pielāgotu izmēru",
+ "Font size": "Šrifta izmērs",
+ "Call ended": "Zvans beidzās",
+ "Guest": "Viesis",
+ "Dates are often easy to guess": "Datumi bieži vien ir viegli uzminami",
+ "%(senderName)s unpinned a message from this room. See all pinned messages.": "%(senderName)s noņēma piespraustu ziņu šajā istabā. Skatīt visas piespraustās ziņas.",
+ "%(senderName)s unpinned <a>a message</a> from this room. See all <b>pinned messages</b>.": "%(senderName)s noņēma piespraustu <a>ziņu</a> šajā istabā. Skatīt visas <b>piespraustās ziņas</b>.",
+ "%(senderName)s pinned a message to this room. See all pinned messages.": "%(senderName)s piesprauda ziņu šajā istabā. Skatīt visas piespraustās ziņas.",
+ "%(senderName)s pinned <a>a message</a> to this room. See all <b>pinned messages</b>.": "%(senderName)s piesprauda <a>ziņu</a> šajā istabā. Skatīt visas <b>piespraustās ziņas</b>."
}
From 6aa5d98741b7642a0c9eb1dbc1bd73e59a582017 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 10:12:45 +0200
Subject: [PATCH 220/313] Remove constructor
Co-authored-by: Germain <germain@souquet.com>
---
src/components/views/messages/MjolnirBody.tsx | 3 ---
1 file changed, 3 deletions(-)
diff --git a/src/components/views/messages/MjolnirBody.tsx b/src/components/views/messages/MjolnirBody.tsx
index c21a9a353e..db806e3a15 100644
--- a/src/components/views/messages/MjolnirBody.tsx
+++ b/src/components/views/messages/MjolnirBody.tsx
@@ -26,9 +26,6 @@ interface IProps {
@replaceableComponent("views.messages.MjolnirBody")
export default class MjolnirBody extends React.Component<IProps> {
- constructor(props: IProps) {
- super(props);
- }
private onAllowClick = (e: React.MouseEvent): void => {
e.preventDefault();
From a1d5e7ba66c94e2679a6cd596c83f319a0d69167 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 10:12:55 +0200
Subject: [PATCH 221/313] Add return type
Co-authored-by: Germain <germain@souquet.com>
---
src/components/views/messages/MKeyVerificationConclusion.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/messages/MKeyVerificationConclusion.tsx b/src/components/views/messages/MKeyVerificationConclusion.tsx
index 3e2ae9fa9b..66ae3766d6 100644
--- a/src/components/views/messages/MKeyVerificationConclusion.tsx
+++ b/src/components/views/messages/MKeyVerificationConclusion.tsx
@@ -55,7 +55,7 @@ export default class MKeyVerificationConclusion extends React.Component<IProps>
}
}
- private onRequestChanged = () => {
+ private onRequestChanged = (): void => {
this.forceUpdate();
};
From 1ed4a9eb4f994bbfca17a0768df97b8f850abdf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 10:19:53 +0200
Subject: [PATCH 222/313] Fix JSDoc type
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/utils/MegolmExportEncryption.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/MegolmExportEncryption.ts b/src/utils/MegolmExportEncryption.ts
index 4fab271015..47c395bfb7 100644
--- a/src/utils/MegolmExportEncryption.ts
+++ b/src/utils/MegolmExportEncryption.ts
@@ -28,7 +28,7 @@ const subtleCrypto = window.crypto.subtle || window.crypto.webkitSubtle;
*
* @param {string} message message for the exception
* @param {string} friendlyText
- * @returns {Error}
+ * @returns {{message: string, friendlyText: string}}
*/
function friendlyError(
message: string, friendlyText: string,
From dd92f8f1f9e013a379b0f280ec9050876de48a6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 10:21:46 +0200
Subject: [PATCH 223/313] Move imports
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/components/views/messages/RedactedBody.tsx | 2 +-
src/components/views/messages/RoomAvatarEvent.tsx | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/views/messages/RedactedBody.tsx b/src/components/views/messages/RedactedBody.tsx
index 7202e3a2e5..66200036cd 100644
--- a/src/components/views/messages/RedactedBody.tsx
+++ b/src/components/views/messages/RedactedBody.tsx
@@ -16,12 +16,12 @@ limitations under the License.
import React, { useContext } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { _t } from "../../../languageHandler";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { formatFullDate } from "../../../DateUtils";
import SettingsStore from "../../../settings/SettingsStore";
import { IBodyProps } from "./IBodyProps";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
interface IProps {
mxEvent: MatrixEvent;
diff --git a/src/components/views/messages/RoomAvatarEvent.tsx b/src/components/views/messages/RoomAvatarEvent.tsx
index c29460b002..12a8c88913 100644
--- a/src/components/views/messages/RoomAvatarEvent.tsx
+++ b/src/components/views/messages/RoomAvatarEvent.tsx
@@ -17,13 +17,13 @@ limitations under the License.
*/
import React from 'react';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import { _t } from '../../../languageHandler';
import Modal from '../../../Modal';
import AccessibleButton from '../elements/AccessibleButton';
import { replaceableComponent } from "../../../utils/replaceableComponent";
import { mediaFromMxc } from "../../../customisations/Media";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import RoomAvatar from "../avatars/RoomAvatar";
import ImageView from "../elements/ImageView";
From 2712dde581d1c2e0eeb1137677c745c56e5aa5a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 10:28:07 +0200
Subject: [PATCH 224/313] Remove empty line
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/components/views/messages/MjolnirBody.tsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/components/views/messages/MjolnirBody.tsx b/src/components/views/messages/MjolnirBody.tsx
index db806e3a15..7e922a5715 100644
--- a/src/components/views/messages/MjolnirBody.tsx
+++ b/src/components/views/messages/MjolnirBody.tsx
@@ -26,7 +26,6 @@ interface IProps {
@replaceableComponent("views.messages.MjolnirBody")
export default class MjolnirBody extends React.Component<IProps> {
-
private onAllowClick = (e: React.MouseEvent): void => {
e.preventDefault();
e.stopPropagation();
From 0cba943f9648d675573dd990333569073a40021e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 10:35:33 +0200
Subject: [PATCH 225/313] Fix types
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
.../views/messages/MKeyVerificationConclusion.tsx | 9 ++++++---
1 file changed, 6 insertions(+), 3 deletions(-)
diff --git a/src/components/views/messages/MKeyVerificationConclusion.tsx b/src/components/views/messages/MKeyVerificationConclusion.tsx
index 66ae3766d6..1ce39e1157 100644
--- a/src/components/views/messages/MKeyVerificationConclusion.tsx
+++ b/src/components/views/messages/MKeyVerificationConclusion.tsx
@@ -109,15 +109,18 @@ export default class MKeyVerificationConclusion extends React.Component<IProps>
let title;
if (request.done) {
- title = _t("You verified %(name)s", { name: getNameForEventRoom(request.otherUserId, mxEvent) });
+ title = _t(
+ "You verified %(name)s",
+ { name: getNameForEventRoom(request.otherUserId, mxEvent.getRoomId()) },
+ );
} else if (request.cancelled) {
const userId = request.cancellingUserId;
if (userId === myUserId) {
title = _t("You cancelled verifying %(name)s",
- { name: getNameForEventRoom(request.otherUserId, mxEvent) });
+ { name: getNameForEventRoom(request.otherUserId, mxEvent.getRoomId()) });
} else {
title = _t("%(name)s cancelled verifying",
- { name: getNameForEventRoom(userId, mxEvent) });
+ { name: getNameForEventRoom(userId, mxEvent.getRoomId()) });
}
}
From 0cfa2a58c7867eec05d5611c342da3cfc8e0fc8e Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <3636685+Palid@users.noreply.github.com>
Date: Mon, 27 Sep 2021 12:20:37 +0200
Subject: [PATCH 226/313] Add ability to expand and collapse long quoted
messages (#6701)
In case where we had a very long message the experience of going between
messages to see the full quote isn't very nice on desktop, therefore this commit
adds a button with additional hotkey to normalize the experience a bit.
Fixes https://github.com/vector-im/element-web/issues/18884
---
res/css/views/elements/_ReplyThread.scss | 11 +++
res/css/views/messages/_MessageActionBar.scss | 10 +++
res/img/element-icons/collapse-message.svg | 1 +
res/img/element-icons/expand-message.svg | 1 +
src/components/structures/ContextMenu.tsx | 8 +-
.../context_menus/MessageContextMenu.tsx | 4 +-
src/components/views/elements/ReplyThread.tsx | 78 ++++++++++++-------
.../views/messages/MessageActionBar.tsx | 39 +++++++---
src/components/views/messages/TextualBody.tsx | 1 +
src/components/views/rooms/EventTile.tsx | 44 ++++++-----
src/components/views/rooms/ReplyTile.tsx | 18 +++--
src/i18n/strings/en_EN.json | 2 +
12 files changed, 153 insertions(+), 64 deletions(-)
create mode 100644 res/img/element-icons/collapse-message.svg
create mode 100644 res/img/element-icons/expand-message.svg
diff --git a/res/css/views/elements/_ReplyThread.scss b/res/css/views/elements/_ReplyThread.scss
index 032cb49359..e19be82e25 100644
--- a/res/css/views/elements/_ReplyThread.scss
+++ b/res/css/views/elements/_ReplyThread.scss
@@ -59,3 +59,14 @@ limitations under the License.
border-left-color: $username-variant8-color;
}
}
+
+.mx_ReplyThread--expanded {
+ .mx_EventTile_body {
+ display: block;
+ overflow-y: scroll !important;
+ }
+ .mx_EventTile_collapsedCodeBlock {
+ // !important needed due to .mx_ReplyTile .mx_EventTile_content .mx_EventTile_pre_container > pre
+ display: block !important;
+ }
+}
diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss
index 6805036e3d..46fc11956f 100644
--- a/res/css/views/messages/_MessageActionBar.scss
+++ b/res/css/views/messages/_MessageActionBar.scss
@@ -117,6 +117,16 @@ limitations under the License.
mask-image: url('$(res)/img/download.svg');
}
+.mx_MessageActionBar_expandMessageButton::after {
+ mask-size: 12px;
+ mask-image: url('$(res)/img/element-icons/expand-message.svg');
+}
+
+.mx_MessageActionBar_collapseMessageButton::after {
+ mask-size: 12px;
+ mask-image: url('$(res)/img/element-icons/collapse-message.svg');
+}
+
.mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton::after {
background-color: transparent; // hide the download icon mask
}
diff --git a/res/img/element-icons/collapse-message.svg b/res/img/element-icons/collapse-message.svg
new file mode 100644
index 0000000000..91b0713f43
--- /dev/null
+++ b/res/img/element-icons/collapse-message.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 11 14"><defs/><path fill="#737D8C" fill-rule="evenodd" d="M.2192.234A.753.753 0 011.2815.2321l3.7243 3.7003L8.7181.2202A.753.753 0 019.7805.2185a.747.747 0 01.0017 1.0589L5.5396 5.52a.753.753 0 01-1.0624.0018L.221 1.2928A.747.747 0 01.2192.234zM9.7822 13.7663a.7529.7529 0 01-1.0623.0017l-3.7243-3.7003L1.2833 13.78a.753.753 0 01-1.0624.0018.7471.7471 0 01-.0017-1.059l4.2426-4.2426a.753.753 0 011.0624-.0017l4.2563 4.2289a.747.747 0 01.0017 1.0589z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/res/img/element-icons/expand-message.svg b/res/img/element-icons/expand-message.svg
new file mode 100644
index 0000000000..a1c5149718
--- /dev/null
+++ b/res/img/element-icons/expand-message.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 11 14"><defs/><path fill="#17191C" fill-rule="evenodd" d="M.2192 8.494a.753.753 0 011.0623-.0018l3.7243 3.7003 3.7123-3.7123a.753.753 0 011.0624-.0017.747.747 0 01.0017 1.059L5.5396 13.78a.753.753 0 01-1.0624.0018L.221 9.5528A.747.747 0 01.2192 8.494zM9.7822 5.5063A.753.753 0 018.72 5.508L4.9956 1.8077 1.2833 5.52a.753.753 0 01-1.0624.0018.747.747 0 01-.0017-1.059L4.4618.2202A.753.753 0 015.5242.2185l4.2563 4.2289a.747.747 0 01.0017 1.0589z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx
index d65f8e3a10..2173230627 100644
--- a/src/components/structures/ContextMenu.tsx
+++ b/src/components/structures/ContextMenu.tsx
@@ -45,7 +45,7 @@ function getOrCreateContainer(): HTMLDivElement {
const ARIA_MENU_ITEM_ROLES = new Set(["menuitem", "menuitemcheckbox", "menuitemradio"]);
-interface IPosition {
+export interface IPosition {
top?: number;
bottom?: number;
left?: number;
@@ -430,7 +430,11 @@ export type AboveLeftOf = IPosition & {
// Placement method for <ContextMenu /> to position context menu right-aligned and flowing to the left of elementRect,
// and either above or below: wherever there is more space (maybe this should be aboveOrBelowLeftOf?)
-export const aboveLeftOf = (elementRect: DOMRect, chevronFace = ChevronFace.None, vPadding = 0): AboveLeftOf => {
+export const aboveLeftOf = (
+ elementRect: DOMRect,
+ chevronFace = ChevronFace.None,
+ vPadding = 0,
+): AboveLeftOf => {
const menuOptions: IPosition & { chevronFace: ChevronFace } = { chevronFace };
const buttonRight = elementRect.right + window.pageXOffset;
diff --git a/src/components/views/context_menus/MessageContextMenu.tsx b/src/components/views/context_menus/MessageContextMenu.tsx
index 8f5d3baa17..c7fcf32260 100644
--- a/src/components/views/context_menus/MessageContextMenu.tsx
+++ b/src/components/views/context_menus/MessageContextMenu.tsx
@@ -38,6 +38,7 @@ import ConfirmRedactDialog from '../dialogs/ConfirmRedactDialog';
import ErrorDialog from '../dialogs/ErrorDialog';
import ShareDialog from '../dialogs/ShareDialog';
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
+import { IPosition, ChevronFace } from '../../structures/ContextMenu';
export function canCancel(eventStatus: EventStatus): boolean {
return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
@@ -52,7 +53,8 @@ export interface IOperableEventTile {
getEventTileOps(): IEventTileOps;
}
-interface IProps {
+interface IProps extends IPosition {
+ chevronFace: ChevronFace;
/* the MatrixEvent associated with the context menu */
mxEvent: MatrixEvent;
/* an optional EventTileOps implementation that can be used to unhide preview widgets */
diff --git a/src/components/views/elements/ReplyThread.tsx b/src/components/views/elements/ReplyThread.tsx
index 59c827d5d8..bd81218623 100644
--- a/src/components/views/elements/ReplyThread.tsx
+++ b/src/components/views/elements/ReplyThread.tsx
@@ -16,6 +16,8 @@ limitations under the License.
*/
import React from 'react';
+import classNames from 'classnames';
+
import { _t } from '../../../languageHandler';
import dis from '../../../dispatcher/dispatcher';
import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
@@ -35,6 +37,12 @@ import ReplyTile from "../rooms/ReplyTile";
import Pill from './Pill';
import { Room } from 'matrix-js-sdk/src/models/room';
+/**
+ * This number is based on the previous behavior - if we have message of height
+ * over 60px then we want to show button that will allow to expand it.
+ */
+const SHOW_EXPAND_QUOTE_PIXELS = 60;
+
interface IProps {
// the latest event in this chain of replies
parentEv?: MatrixEvent;
@@ -45,6 +53,8 @@ interface IProps {
layout?: Layout;
// Whether to always show a timestamp
alwaysShowTimestamps?: boolean;
+ isQuoteExpanded?: boolean;
+ setQuoteExpanded: (isExpanded: boolean) => void;
}
interface IState {
@@ -66,6 +76,7 @@ export default class ReplyThread extends React.Component<IProps, IState> {
static contextType = MatrixClientContext;
private unmounted = false;
private room: Room;
+ private blockquoteRef = React.createRef<HTMLElement>();
constructor(props, context) {
super(props, context);
@@ -80,7 +91,7 @@ export default class ReplyThread extends React.Component<IProps, IState> {
this.room = this.context.getRoom(this.props.parentEv.getRoomId());
}
- public static getParentEventId(ev: MatrixEvent): string {
+ public static getParentEventId(ev: MatrixEvent): string | undefined {
if (!ev || ev.isRedacted()) return;
// XXX: For newer relations (annotations, replacements, etc.), we now
@@ -137,7 +148,7 @@ export default class ReplyThread extends React.Component<IProps, IState> {
public static getNestedReplyText(
ev: MatrixEvent,
permalinkCreator: RoomPermalinkCreator,
- ): { body: string, html: string } {
+ ): { body: string, html: string } | null {
if (!ev) return null;
let { body, formatted_body: html } = ev.getContent();
@@ -237,37 +248,38 @@ export default class ReplyThread extends React.Component<IProps, IState> {
return replyMixin;
}
- public static makeThread(
- parentEv: MatrixEvent,
- onHeightChanged: () => void,
- permalinkCreator: RoomPermalinkCreator,
- ref: React.RefObject<ReplyThread>,
- layout: Layout,
- alwaysShowTimestamps: boolean,
- ): JSX.Element {
- if (!ReplyThread.getParentEventId(parentEv)) return null;
- return <ReplyThread
- parentEv={parentEv}
- onHeightChanged={onHeightChanged}
- ref={ref}
- permalinkCreator={permalinkCreator}
- layout={layout}
- alwaysShowTimestamps={alwaysShowTimestamps}
- />;
+ public static hasThreadReply(event: MatrixEvent) {
+ return Boolean(ReplyThread.getParentEventId(event));
}
componentDidMount() {
this.initialize();
+ this.trySetExpandableQuotes();
}
componentDidUpdate() {
this.props.onHeightChanged();
+ this.trySetExpandableQuotes();
}
componentWillUnmount() {
this.unmounted = true;
}
+ private trySetExpandableQuotes() {
+ if (this.props.isQuoteExpanded === undefined && this.blockquoteRef.current) {
+ const el: HTMLElement | null = this.blockquoteRef.current.querySelector('.mx_EventTile_body');
+ if (el) {
+ const code: HTMLElement | null = el.querySelector('code');
+ const isCodeEllipsisShown = code ? code.offsetHeight >= SHOW_EXPAND_QUOTE_PIXELS : false;
+ const isElipsisShown = el.offsetHeight >= SHOW_EXPAND_QUOTE_PIXELS || isCodeEllipsisShown;
+ if (isElipsisShown) {
+ this.props.setQuoteExpanded(false);
+ }
+ }
+ }
+ }
+
private async initialize(): Promise<void> {
const { parentEv } = this.props;
// at time of making this component we checked that props.parentEv has a parentEventId
@@ -321,7 +333,7 @@ export default class ReplyThread extends React.Component<IProps, IState> {
this.initialize();
};
- private onQuoteClick = async (): Promise<void> => {
+ private onQuoteClick = async (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>): Promise<void> => {
const events = [this.state.loadedEv, ...this.state.events];
let loadedEv = null;
@@ -373,14 +385,26 @@ export default class ReplyThread extends React.Component<IProps, IState> {
header = <Spinner w={16} h={16} />;
}
+ const { isQuoteExpanded } = this.props;
const evTiles = this.state.events.map((ev) => {
- return <blockquote className={`mx_ReplyThread ${this.getReplyThreadColorClass(ev)}`} key={ev.getId()}>
- <ReplyTile
- mxEvent={ev}
- onHeightChanged={this.props.onHeightChanged}
- permalinkCreator={this.props.permalinkCreator}
- />
- </blockquote>;
+ const classname = classNames({
+ 'mx_ReplyThread': true,
+ [this.getReplyThreadColorClass(ev)]: true,
+ // We don't want to add the class if it's undefined, it should only be expanded/collapsed when it's true/false
+ 'mx_ReplyThread--expanded': isQuoteExpanded === true,
+ // We don't want to add the class if it's undefined, it should only be expanded/collapsed when it's true/false
+ 'mx_ReplyThread--collapsed': isQuoteExpanded === false,
+ });
+ return (
+ <blockquote ref={this.blockquoteRef} className={classname} key={ev.getId()}>
+ <ReplyTile
+ mxEvent={ev}
+ onHeightChanged={this.props.onHeightChanged}
+ permalinkCreator={this.props.permalinkCreator}
+ toggleExpandedQuote={() => this.props.setQuoteExpanded(!this.props.isQuoteExpanded)}
+ />
+ </blockquote>
+ );
});
return <div className="mx_ReplyThread_wrapper">
diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx
index f76fa32ddc..e835584387 100644
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/src/components/views/messages/MessageActionBar.tsx
@@ -17,7 +17,8 @@ limitations under the License.
*/
import React, { useEffect } from 'react';
-import { MatrixEvent, EventStatus } from 'matrix-js-sdk/src/models/event';
+import { EventStatus, MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import type { Relations } from 'matrix-js-sdk/src/models/relations';
import { _t } from '../../../languageHandler';
import * as sdk from '../../../index';
@@ -35,13 +36,17 @@ import Resend from "../../../Resend";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { MediaEventHelper } from "../../../utils/MediaEventHelper";
import DownloadActionButton from "./DownloadActionButton";
+import MessageContextMenu from "../context_menus/MessageContextMenu";
+import classNames from 'classnames';
+
import SettingsStore from '../../../settings/SettingsStore';
import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
import ReplyThread from '../elements/ReplyThread';
interface IOptionsButtonProps {
mxEvent: MatrixEvent;
- getTile: () => any; // TODO: FIXME, haven't figured out what the return type is here
+ // TODO: Types
+ getTile: () => any | null;
getReplyThread: () => ReplyThread;
permalinkCreator: RoomPermalinkCreator;
onFocusChange: (menuDisplayed: boolean) => void;
@@ -57,8 +62,6 @@ const OptionsButton: React.FC<IOptionsButtonProps> =
let contextMenu;
if (menuDisplayed) {
- const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
-
const tile = getTile && getTile();
const replyThread = getReplyThread && getReplyThread();
@@ -90,7 +93,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> =
interface IReactButtonProps {
mxEvent: MatrixEvent;
- reactions: any; // TODO: types
+ reactions: Relations;
onFocusChange: (menuDisplayed: boolean) => void;
}
@@ -127,12 +130,14 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
interface IMessageActionBarProps {
mxEvent: MatrixEvent;
- // The Relations model from the JS SDK for reactions to `mxEvent`
- reactions?: any; // TODO: types
+ reactions?: Relations;
+ // TODO: Types
+ getTile: () => any | null;
+ getReplyThread: () => ReplyThread | undefined;
permalinkCreator?: RoomPermalinkCreator;
- getTile: () => any; // TODO: FIXME, haven't figured out what the return type is here
- getReplyThread?: () => ReplyThread;
- onFocusChange?: (menuDisplayed: boolean) => void;
+ onFocusChange: (menuDisplayed: boolean) => void;
+ isQuoteExpanded?: boolean;
+ toggleThreadExpanded: () => void;
}
@replaceableComponent("views.messages.MessageActionBar")
@@ -324,6 +329,20 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
toolbarOpts.push(cancelSendingButton);
}
+ if (this.props.isQuoteExpanded !== undefined && ReplyThread.hasThreadReply(this.props.mxEvent)) {
+ const expandClassName = classNames({
+ 'mx_MessageActionBar_maskButton': true,
+ 'mx_MessageActionBar_expandMessageButton': !this.props.isQuoteExpanded,
+ 'mx_MessageActionBar_collapseMessageButton': this.props.isQuoteExpanded,
+ });
+ toolbarOpts.push(<RovingAccessibleTooltipButton
+ className={expandClassName}
+ title={this.props.isQuoteExpanded ? _t("Collapse quotes │ ⇧+click") : _t("Expand quotes │ ⇧+click")}
+ onClick={this.props.toggleThreadExpanded}
+ key="expand"
+ />);
+ }
+
// The menu button should be last, so dump it there.
toolbarOpts.push(<OptionsButton
mxEvent={this.props.mxEvent}
diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx
index 83fe7f5a3d..63ff39721d 100644
--- a/src/components/views/messages/TextualBody.tsx
+++ b/src/components/views/messages/TextualBody.tsx
@@ -138,6 +138,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
// If it's less than 30% we don't add the expansion button.
// We also round the number as it sometimes can be 29.99...
const percentageOfViewport = Math.round(pre.offsetHeight / UIStore.instance.windowHeight * 100);
+ // TODO: additionally show the button if it's an expanded quoted message
if (percentageOfViewport < 30) return;
const button = document.createElement("span");
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index d1ac06b199..592827eaf5 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -322,7 +322,7 @@ interface IState {
reactions: Relations;
hover: boolean;
-
+ isQuoteExpanded?: boolean;
thread?: Thread;
}
@@ -330,7 +330,8 @@ interface IState {
export default class EventTile extends React.Component<IProps, IState> {
private suppressReadReceiptAnimation: boolean;
private isListeningForReceipts: boolean;
- private tile = React.createRef();
+ // TODO: Types
+ private tile = React.createRef<unknown>();
private replyThread = React.createRef<ReplyThread>();
public readonly ref = createRef<HTMLElement>();
@@ -888,8 +889,8 @@ export default class EventTile extends React.Component<IProps, IState> {
actionBarFocused: focused,
});
};
-
- getTile = () => this.tile.current;
+ // TODO: Types
+ getTile: () => any | null = () => this.tile.current;
getReplyThread = () => this.replyThread.current;
@@ -914,6 +915,11 @@ export default class EventTile extends React.Component<IProps, IState> {
});
};
+ private setQuoteExpanded = (expanded: boolean) => {
+ this.setState({
+ isQuoteExpanded: expanded,
+ });
+ };
render() {
const msgtype = this.props.mxEvent.getContent().msgtype;
const eventType = this.props.mxEvent.getType() as EventType;
@@ -923,6 +929,7 @@ export default class EventTile extends React.Component<IProps, IState> {
isInfoMessage,
isLeftAlignedBubbleMessage,
} = getEventDisplayInfo(this.props.mxEvent);
+ const { isQuoteExpanded } = this.state;
// This shouldn't happen: the caller should check we support this type
// before trying to instantiate us
@@ -935,6 +942,7 @@ export default class EventTile extends React.Component<IProps, IState> {
</div>
</div>;
}
+
const EventTileType = sdk.getComponent(tileHandler);
const isSending = (['sending', 'queued', 'encrypting'].indexOf(this.props.eventSendStatus) !== -1);
@@ -1054,6 +1062,8 @@ export default class EventTile extends React.Component<IProps, IState> {
getTile={this.getTile}
getReplyThread={this.getReplyThread}
onFocusChange={this.onActionBarFocusChange}
+ isQuoteExpanded={isQuoteExpanded}
+ toggleThreadExpanded={() => this.setQuoteExpanded(!isQuoteExpanded)}
/> : undefined;
const showTimestamp = this.props.mxEvent.getTs()
@@ -1192,20 +1202,18 @@ export default class EventTile extends React.Component<IProps, IState> {
}
default: {
- let thread;
- // When the "showHiddenEventsInTimeline" lab is enabled,
- // avoid showing replies for hidden events (events without tiles)
- if (haveTileForEvent(this.props.mxEvent)) {
- thread = ReplyThread.makeThread(
- this.props.mxEvent,
- this.props.onHeightChanged,
- this.props.permalinkCreator,
- this.replyThread,
- this.props.layout,
- this.props.alwaysShowTimestamps || this.state.hover,
- );
- }
-
+ const thread = haveTileForEvent(this.props.mxEvent) &&
+ ReplyThread.hasThreadReply(this.props.mxEvent) ? (
+ <ReplyThread
+ parentEv={this.props.mxEvent}
+ onHeightChanged={this.props.onHeightChanged}
+ ref={this.replyThread}
+ permalinkCreator={this.props.permalinkCreator}
+ layout={this.props.layout}
+ alwaysShowTimestamps={this.props.alwaysShowTimestamps || this.state.hover}
+ isQuoteExpanded={isQuoteExpanded}
+ setQuoteExpanded={this.setQuoteExpanded}
+ />) : null;
const isOwnEvent = this.props.mxEvent?.sender?.userId === MatrixClientPeg.get().getUserId();
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index cf7d1ce945..01a9e2f18b 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -35,6 +35,7 @@ interface IProps {
highlights?: string[];
highlightLink?: string;
onHeightChanged?(): void;
+ toggleExpandedQuote?: () => void;
}
@replaceableComponent("views.rooms.ReplyTile")
@@ -82,12 +83,17 @@ export default class ReplyTile extends React.PureComponent<IProps> {
// This allows the permalink to be opened in a new tab/window or copied as
// matrix.to, but also for it to enable routing within Riot when clicked.
e.preventDefault();
- dis.dispatch({
- action: 'view_room',
- event_id: this.props.mxEvent.getId(),
- highlighted: true,
- room_id: this.props.mxEvent.getRoomId(),
- });
+ // Expand thread on shift key
+ if (this.props.toggleExpandedQuote && e.shiftKey) {
+ this.props.toggleExpandedQuote();
+ } else {
+ dis.dispatch({
+ action: 'view_room',
+ event_id: this.props.mxEvent.getId(),
+ highlighted: true,
+ room_id: this.props.mxEvent.getRoomId(),
+ });
+ }
}
};
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index b5d90f6671..bc45caedb5 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1944,6 +1944,8 @@
"Edit": "Edit",
"Reply": "Reply",
"Thread": "Thread",
+ "Collapse quotes │ ⇧+click": "Collapse quotes │ ⇧+click",
+ "Expand quotes │ ⇧+click": "Expand quotes │ ⇧+click",
"Message Actions": "Message Actions",
"Download %(text)s": "Download %(text)s",
"Error decrypting attachment": "Error decrypting attachment",
From 9c8f98172bf7c8d8fb74cd0f31dc3c566f068a1d Mon Sep 17 00:00:00 2001
From: random <dictionary@tutamail.com>
Date: Mon, 27 Sep 2021 10:19:58 +0000
Subject: [PATCH 227/313] Translated using Weblate (Italian)
Currently translated at 99.9% (3165 of 3166 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/it/
---
src/i18n/strings/it.json | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/src/i18n/strings/it.json b/src/i18n/strings/it.json
index 6792e62c9f..022149e3c6 100644
--- a/src/i18n/strings/it.json
+++ b/src/i18n/strings/it.json
@@ -1218,14 +1218,14 @@
"Do not use an identity server": "Non usare un server di identità",
"You do not have the required permissions to use this command.": "Non hai l'autorizzazione necessaria per usare questo comando.",
"Use an identity server": "Usa un server di identità",
- "Use an identity server to invite by email. Click continue to use the default identity server (%(defaultIdentityServerName)s) or manage in Settings.": "Usa un server di identità per invitare via email. Clicca \"Continua\" per usare quello predefinito (%(defaultIdentityServerName)s) o gestiscilo nelle impostazioni.",
+ "Use an identity server to invite by email. Click continue to use the default identity server (%(defaultIdentityServerName)s) or manage in Settings.": "Usa un server d'identità per invitare via email. Clicca \"Continua\" per usare quello predefinito (%(defaultIdentityServerName)s) o gestiscilo nelle impostazioni.",
"Use an identity server to invite by email. Manage in Settings.": "Usa un server di identità per invitare via email. Gestisci nelle impostazioni.",
"Upgrade the room": "Aggiorna la stanza",
"Enable room encryption": "Attiva la crittografia della stanza",
"Deactivate user?": "Disattivare l'utente?",
"Deactivating this user will log them out and prevent them from logging back in. Additionally, they will leave all the rooms they are in. This action cannot be reversed. Are you sure you want to deactivate this user?": "Disattivare questo utente lo disconnetterà e ne impedirà nuovi accessi. In aggiunta, abbandonerà tutte le stanze in cui è presente. Questa azione non può essere annullata. Sei sicuro di volere disattivare questo utente?",
"Deactivate user": "Disattiva utente",
- "Use an identity server to invite by email. <default>Use the default (%(defaultIdentityServerName)s)</default> or manage in <settings>Settings</settings>.": "Usa un server di identità per invitare via email. <default>Usa quello predefinito (%(defaultIdentityServerName)s)</default> o gestiscilo nelle <settings>impostazioni</settings>.",
+ "Use an identity server to invite by email. <default>Use the default (%(defaultIdentityServerName)s)</default> or manage in <settings>Settings</settings>.": "Usa un server d'identità per invitare via email. <default>Usa quello predefinito (%(defaultIdentityServerName)s)</default> o gestiscilo nelle <settings>impostazioni</settings>.",
"Use an identity server to invite by email. Manage in <settings>Settings</settings>.": "Usa un server di identità per invitare via email. Gestisci nelle <settings>impostazioni</settings>.",
"Sends a message as plain text, without interpreting it as markdown": "Invia un messaggio in testo semplice, senza interpretarlo come markdown",
"Error changing power level": "Errore cambiando il livello di poteri",
@@ -1236,11 +1236,11 @@
"This invite to %(roomName)s was sent to %(email)s": "Questo invito per %(roomName)s è stato inviato a %(email)s",
"Use an identity server in Settings to receive invites directly in %(brand)s.": "Usa un server di identià nelle impostazioni per ricevere inviti direttamente in %(brand)s.",
"Share this email in Settings to receive invites directly in %(brand)s.": "Condividi questa email nelle impostazioni per ricevere inviti direttamente in %(brand)s.",
- "Change identity server": "Cambia Identity Server",
- "Disconnect from the identity server <current /> and connect to <new /> instead?": "Disconnettersi dall'Identity Server <current /> e connettesi invece a <new />?",
- "Disconnect identity server": "Disconnetti dall'Identity Server",
- "You are still <b>sharing your personal data</b> on the identity server <idserver />.": "Stai ancora <b> fornendo le tue informazioni personali </b> sull'Identity Server <idserver />.",
- "We recommend that you remove your email addresses and phone numbers from the identity server before disconnecting.": "Ti suggeriamo di rimuovere il tuo indirizzo email e numero di telefono dall'Identity Server prima di disconnetterti.",
+ "Change identity server": "Cambia server d'identità",
+ "Disconnect from the identity server <current /> and connect to <new /> instead?": "Disconnettersi dal server d'identità <current /> e connettesi invece a <new />?",
+ "Disconnect identity server": "Disconnetti dal server d'identità",
+ "You are still <b>sharing your personal data</b> on the identity server <idserver />.": "Stai ancora <b> fornendo le tue informazioni personali </b> sul server d'identità <idserver />.",
+ "We recommend that you remove your email addresses and phone numbers from the identity server before disconnecting.": "Ti suggeriamo di rimuovere il tuo indirizzo email e numero di telefono dal server d'identità prima di disconnetterti.",
"Disconnect anyway": "Disconnetti comunque",
"Error changing power level requirement": "Errore nella modifica del livello dei permessi",
"An error occurred changing the room's power level requirements. Ensure you have sufficient permissions and try again.": "C'é stato un errore nel cambio di libelli dei permessi. Assicurati di avere i permessi necessari e riprova.",
From e30d4e67463144f44617da5f8b5bfc626f6ae492 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 09:31:34 +0200
Subject: [PATCH 228/313] Convert boundThreepid to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/{boundThreepids.js => boundThreepids.ts} | 8 ++++++--
src/utils/promise.ts | 4 ++--
2 files changed, 8 insertions(+), 4 deletions(-)
rename src/{boundThreepids.js => boundThreepids.ts} (84%)
diff --git a/src/boundThreepids.js b/src/boundThreepids.ts
similarity index 84%
rename from src/boundThreepids.js
rename to src/boundThreepids.ts
index 3b32815913..94ff36ad4f 100644
--- a/src/boundThreepids.js
+++ b/src/boundThreepids.ts
@@ -14,9 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+import { IThreepid, ThreepidMedium } from "matrix-js-sdk/src/@types/threepids";
+import { MatrixClient } from "matrix-js-sdk/src/client";
import IdentityAuthClient from './IdentityAuthClient';
-export async function getThreepidsWithBindStatus(client, filterMedium) {
+export async function getThreepidsWithBindStatus(
+ client: MatrixClient, filterMedium?: ThreepidMedium,
+): Promise<IThreepid[]> {
const userId = client.getUserId();
let { threepids } = await client.getThreePids();
@@ -31,7 +35,7 @@ export async function getThreepidsWithBindStatus(client, filterMedium) {
const identityAccessToken = await authClient.getAccessToken({ check: false });
// Restructure for lookup query
- const query = threepids.map(({ medium, address }) => [medium, address]);
+ const query = threepids.map(({ medium, address }): [string, string] => [medium, address]);
const lookupResults = await client.bulkLookupThreePids(query, identityAccessToken);
// Record which are already bound
diff --git a/src/utils/promise.ts b/src/utils/promise.ts
index 853c172269..abcfc49a08 100644
--- a/src/utils/promise.ts
+++ b/src/utils/promise.ts
@@ -16,8 +16,8 @@ limitations under the License.
// Returns a promise which resolves when the input promise resolves with its value
// or when the timeout of ms is reached with the value of given timeoutValue
-export async function timeout<T>(promise: Promise<T>, timeoutValue: T, ms: number): Promise<T> {
- const timeoutPromise = new Promise<T>((resolve) => {
+export async function timeout<T, Y>(promise: Promise<T>, timeoutValue: Y, ms: number): Promise<T | Y> {
+ const timeoutPromise = new Promise<T | Y>((resolve) => {
const timeoutId = setTimeout(resolve, ms, timeoutValue);
promise.then(() => {
clearTimeout(timeoutId);
From 84c665ec2b72e399657cf9422ceb3dd02044a92c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 09:44:30 +0200
Subject: [PATCH 229/313] Convert AddThreepid to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/{AddThreepid.js => AddThreepid.ts} | 44 ++++++++++++--------------
1 file changed, 21 insertions(+), 23 deletions(-)
rename src/{AddThreepid.js => AddThreepid.ts} (91%)
diff --git a/src/AddThreepid.js b/src/AddThreepid.ts
similarity index 91%
rename from src/AddThreepid.js
rename to src/AddThreepid.ts
index ab291128a7..54250c5eb3 100644
--- a/src/AddThreepid.js
+++ b/src/AddThreepid.ts
@@ -17,13 +17,14 @@ limitations under the License.
*/
import { MatrixClientPeg } from './MatrixClientPeg';
-import * as sdk from './index';
import Modal from './Modal';
import { _t } from './languageHandler';
import IdentityAuthClient from './IdentityAuthClient';
import { SSOAuthEntry } from "./components/views/auth/InteractiveAuthEntryComponents";
+import { IRequestMsisdnTokenResponse, IRequestTokenResponse } from "matrix-js-sdk";
+import InteractiveAuthDialog from "./components/views/dialogs/InteractiveAuthDialog";
-function getIdServerDomain() {
+function getIdServerDomain(): string {
return MatrixClientPeg.get().idBaseUrl.split("://")[1];
}
@@ -40,10 +41,13 @@ function getIdServerDomain() {
* https://gist.github.com/jryans/839a09bf0c5a70e2f36ed990d50ed928
*/
export default class AddThreepid {
+ private sessionId: string;
+ private submitUrl: string;
+ private clientSecret: string;
+ private bind: boolean;
+
constructor() {
this.clientSecret = MatrixClientPeg.get().generateClientSecret();
- this.sessionId = null;
- this.submitUrl = null;
}
/**
@@ -52,7 +56,7 @@ export default class AddThreepid {
* @param {string} emailAddress The email address to add
* @return {Promise} Resolves when the email has been sent. Then call checkEmailLinkClicked().
*/
- addEmailAddress(emailAddress) {
+ public addEmailAddress(emailAddress: string): Promise<IRequestTokenResponse> {
return MatrixClientPeg.get().requestAdd3pidEmailToken(emailAddress, this.clientSecret, 1).then((res) => {
this.sessionId = res.sid;
return res;
@@ -72,7 +76,7 @@ export default class AddThreepid {
* @param {string} emailAddress The email address to add
* @return {Promise} Resolves when the email has been sent. Then call checkEmailLinkClicked().
*/
- async bindEmailAddress(emailAddress) {
+ public async bindEmailAddress(emailAddress: string): Promise<IRequestTokenResponse> {
this.bind = true;
if (await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) {
// For separate bind, request a token directly from the IS.
@@ -105,7 +109,7 @@ export default class AddThreepid {
* @param {string} phoneNumber The national or international formatted phone number to add
* @return {Promise} Resolves when the text message has been sent. Then call haveMsisdnToken().
*/
- addMsisdn(phoneCountry, phoneNumber) {
+ public addMsisdn(phoneCountry: string, phoneNumber: string): Promise<IRequestMsisdnTokenResponse> {
return MatrixClientPeg.get().requestAdd3pidMsisdnToken(
phoneCountry, phoneNumber, this.clientSecret, 1,
).then((res) => {
@@ -129,7 +133,7 @@ export default class AddThreepid {
* @param {string} phoneNumber The national or international formatted phone number to add
* @return {Promise} Resolves when the text message has been sent. Then call haveMsisdnToken().
*/
- async bindMsisdn(phoneCountry, phoneNumber) {
+ public async bindMsisdn(phoneCountry: string, phoneNumber: string): Promise<IRequestMsisdnTokenResponse> {
this.bind = true;
if (await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) {
// For separate bind, request a token directly from the IS.
@@ -161,7 +165,7 @@ export default class AddThreepid {
* with a "message" property which contains a human-readable message detailing why
* the request failed.
*/
- async checkEmailLinkClicked() {
+ public async checkEmailLinkClicked(): Promise<any[]> {
try {
if (await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) {
if (this.bind) {
@@ -175,7 +179,7 @@ export default class AddThreepid {
});
} else {
try {
- await this._makeAddThreepidOnlyRequest();
+ await this.makeAddThreepidOnlyRequest();
// The spec has always required this to use UI auth but synapse briefly
// implemented it without, so this may just succeed and that's OK.
@@ -186,9 +190,6 @@ export default class AddThreepid {
throw e;
}
- // pop up an interactive auth dialog
- const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
-
const dialogAesthetics = {
[SSOAuthEntry.PHASE_PREAUTH]: {
title: _t("Use Single Sign On to continue"),
@@ -208,7 +209,7 @@ export default class AddThreepid {
title: _t("Add Email Address"),
matrixClient: MatrixClientPeg.get(),
authData: e.data,
- makeRequest: this._makeAddThreepidOnlyRequest,
+ makeRequest: this.makeAddThreepidOnlyRequest,
aestheticsForStagePhases: {
[SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
[SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
@@ -235,16 +236,16 @@ export default class AddThreepid {
}
/**
- * @param {Object} auth UI auth object
+ * @param {{type: string, session?: string}} auth UI auth object
* @return {Promise<Object>} Response from /3pid/add call (in current spec, an empty object)
*/
- _makeAddThreepidOnlyRequest = (auth) => {
+ private makeAddThreepidOnlyRequest = (auth?: {type: string, session?: string}): Promise<{}> => {
return MatrixClientPeg.get().addThreePidOnly({
sid: this.sessionId,
client_secret: this.clientSecret,
auth,
});
- }
+ };
/**
* Takes a phone number verification code as entered by the user and validates
@@ -254,7 +255,7 @@ export default class AddThreepid {
* with a "message" property which contains a human-readable message detailing why
* the request failed.
*/
- async haveMsisdnToken(msisdnToken) {
+ public async haveMsisdnToken(msisdnToken: string): Promise<any[]> {
const authClient = new IdentityAuthClient();
const supportsSeparateAddAndBind =
await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind();
@@ -291,7 +292,7 @@ export default class AddThreepid {
});
} else {
try {
- await this._makeAddThreepidOnlyRequest();
+ await this.makeAddThreepidOnlyRequest();
// The spec has always required this to use UI auth but synapse briefly
// implemented it without, so this may just succeed and that's OK.
@@ -302,9 +303,6 @@ export default class AddThreepid {
throw e;
}
- // pop up an interactive auth dialog
- const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
-
const dialogAesthetics = {
[SSOAuthEntry.PHASE_PREAUTH]: {
title: _t("Use Single Sign On to continue"),
@@ -324,7 +322,7 @@ export default class AddThreepid {
title: _t("Add Phone Number"),
matrixClient: MatrixClientPeg.get(),
authData: e.data,
- makeRequest: this._makeAddThreepidOnlyRequest,
+ makeRequest: this.makeAddThreepidOnlyRequest,
aestheticsForStagePhases: {
[SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
[SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
From 1fe96cae8ac9f93c08df498e9f5b2e724eb5e89c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 09:54:55 +0200
Subject: [PATCH 230/313] Convert IdentityAuthClient to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
...tyAuthClient.js => IdentityAuthClient.tsx} | 55 +++++++++----------
1 file changed, 27 insertions(+), 28 deletions(-)
rename src/{IdentityAuthClient.js => IdentityAuthClient.tsx} (82%)
diff --git a/src/IdentityAuthClient.js b/src/IdentityAuthClient.tsx
similarity index 82%
rename from src/IdentityAuthClient.js
rename to src/IdentityAuthClient.tsx
index 54cf3b43e3..116875cab2 100644
--- a/src/IdentityAuthClient.js
+++ b/src/IdentityAuthClient.tsx
@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+import React from "react";
import { SERVICE_TYPES } from 'matrix-js-sdk/src/service-types';
-import { createClient } from 'matrix-js-sdk/src/matrix';
+import { createClient, MatrixClient } from 'matrix-js-sdk/src/matrix';
import { MatrixClientPeg } from './MatrixClientPeg';
import Modal from './Modal';
-import * as sdk from './index';
import { _t } from './languageHandler';
import { Service, startTermsFlow, TermsNotSignedError } from './Terms';
import {
@@ -27,23 +27,25 @@ import {
doesIdentityServerHaveTerms,
useDefaultIdentityServer,
} from './utils/IdentityServerUtils';
-import { abbreviateUrl } from './utils/UrlUtils';
import { logger } from "matrix-js-sdk/src/logger";
+import QuestionDialog from "./components/views/dialogs/QuestionDialog";
+import { abbreviateUrl } from "./utils/UrlUtils";
export class AbortedIdentityActionError extends Error {}
export default class IdentityAuthClient {
+ accessToken: string;
+ tempClient: MatrixClient;
+ authEnabled = true;
+
/**
* Creates a new identity auth client
* @param {string} identityUrl The URL to contact the identity server with.
* When provided, this class will operate solely within memory, refusing to
* persist any information such as tokens. Default null (not provided).
*/
- constructor(identityUrl = null) {
- this.accessToken = null;
- this.authEnabled = true;
-
+ constructor(identityUrl?: string) {
if (identityUrl) {
// XXX: We shouldn't have to create a whole new MatrixClient just to
// do identity server auth. The functions don't take an identity URL
@@ -54,32 +56,29 @@ export default class IdentityAuthClient {
baseUrl: "", // invalid by design
idBaseUrl: identityUrl,
});
- } else {
- // Indicates that we're using the real client, not some workaround.
- this.tempClient = null;
}
}
- get _matrixClient() {
+ private get matrixClient(): MatrixClient {
return this.tempClient ? this.tempClient : MatrixClientPeg.get();
}
- _writeToken() {
+ private writeToken(): void {
if (this.tempClient) return; // temporary client: ignore
window.localStorage.setItem("mx_is_access_token", this.accessToken);
}
- _readToken() {
+ private readToken(): string {
if (this.tempClient) return null; // temporary client: ignore
return window.localStorage.getItem("mx_is_access_token");
}
- hasCredentials() {
- return this.accessToken != null; // undef or null
+ public hasCredentials(): boolean {
+ return Boolean(this.accessToken);
}
// Returns a promise that resolves to the access_token string from the IS
- async getAccessToken({ check = true } = {}) {
+ public async getAccessToken({ check = true } = {}): Promise<string> {
if (!this.authEnabled) {
// The current IS doesn't support authentication
return null;
@@ -87,21 +86,21 @@ export default class IdentityAuthClient {
let token = this.accessToken;
if (!token) {
- token = this._readToken();
+ token = this.readToken();
}
if (!token) {
token = await this.registerForToken(check);
if (token) {
this.accessToken = token;
- this._writeToken();
+ this.writeToken();
}
return token;
}
if (check) {
try {
- await this._checkToken(token);
+ await this.checkToken(token);
} catch (e) {
if (
e instanceof TermsNotSignedError ||
@@ -114,7 +113,7 @@ export default class IdentityAuthClient {
token = await this.registerForToken();
if (token) {
this.accessToken = token;
- this._writeToken();
+ this.writeToken();
}
}
}
@@ -122,11 +121,11 @@ export default class IdentityAuthClient {
return token;
}
- async _checkToken(token) {
- const identityServerUrl = this._matrixClient.getIdentityServerUrl();
+ private async checkToken(token: string): Promise<void> {
+ const identityServerUrl = this.matrixClient.getIdentityServerUrl();
try {
- await this._matrixClient.getIdentityAccount(token);
+ await this.matrixClient.getIdentityAccount(token);
} catch (e) {
if (e.errcode === "M_TERMS_NOT_SIGNED") {
logger.log("Identity server requires new terms to be agreed to");
@@ -145,8 +144,8 @@ export default class IdentityAuthClient {
!doesAccountDataHaveIdentityServer() &&
!(await doesIdentityServerHaveTerms(identityServerUrl))
) {
- const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
- const { finished } = Modal.createTrackedDialog('Default identity server terms warning', '',
+ const { finished } = Modal.createTrackedDialog(
+ 'Default identity server terms warning', '',
QuestionDialog, {
title: _t("Identity server has no terms of service"),
description: (
@@ -184,13 +183,13 @@ export default class IdentityAuthClient {
// See also https://github.com/vector-im/element-web/issues/10455.
}
- async registerForToken(check=true) {
+ public async registerForToken(check = true): Promise<string> {
const hsOpenIdToken = await MatrixClientPeg.get().getOpenIdToken();
// XXX: The spec is `token`, but we used `access_token` for a Sydent release.
const { access_token: accessToken, token } =
- await this._matrixClient.registerWithIdentityServer(hsOpenIdToken);
+ await this.matrixClient.registerWithIdentityServer(hsOpenIdToken);
const identityAccessToken = token ? token : accessToken;
- if (check) await this._checkToken(identityAccessToken);
+ if (check) await this.checkToken(identityAccessToken);
return identityAccessToken;
}
}
From b621f928059988768af35f4851c69419e95dd5f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 12:38:56 +0200
Subject: [PATCH 231/313] Convert NodeAnimator to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/{NodeAnimator.js => NodeAnimator.tsx} | 67 ++++++++++++-----------
1 file changed, 36 insertions(+), 31 deletions(-)
rename src/{NodeAnimator.js => NodeAnimator.tsx} (63%)
diff --git a/src/NodeAnimator.js b/src/NodeAnimator.tsx
similarity index 63%
rename from src/NodeAnimator.js
rename to src/NodeAnimator.tsx
index 8456e6e9fd..b0d74ec00e 100644
--- a/src/NodeAnimator.js
+++ b/src/NodeAnimator.tsx
@@ -1,6 +1,21 @@
import React from "react";
import ReactDom from "react-dom";
-import PropTypes from 'prop-types';
+
+interface IChildProps {
+ style: React.CSSProperties;
+ ref: (node: React.ReactInstance) => void;
+}
+
+interface IProps {
+ // either a list of child nodes, or a single child.
+ children: React.ReactNode;
+
+ // optional transition information for changing existing children
+ transition?: object;
+
+ // a list of state objects to apply to each child node in turn
+ startStyles: React.CSSProperties[];
+}
/**
* The NodeAnimator contains components and animates transitions.
@@ -9,55 +24,45 @@ import PropTypes from 'prop-types';
* from DOM order. This makes it a lot simpler and lighter: if you need fully
* automatic positional animation, look at react-shuffle or similar libraries.
*/
-export default class NodeAnimator extends React.Component {
- static propTypes = {
- // either a list of child nodes, or a single child.
- children: PropTypes.any,
-
- // optional transition information for changing existing children
- transition: PropTypes.object,
-
- // a list of state objects to apply to each child node in turn
- startStyles: PropTypes.array,
- };
-
- static defaultProps = {
+export default class NodeAnimator extends React.Component<IProps> {
+ private nodes = {};
+ private children: { [key: string]: React.DetailedReactHTMLElement<any, HTMLElement> };
+ static defaultProps: Partial<IProps> = {
startStyles: [],
};
- constructor(props) {
+ constructor(props: IProps) {
super(props);
- this.nodes = {};
- this._updateChildren(this.props.children);
+ this.updateChildren(this.props.children);
}
- componentDidUpdate() {
- this._updateChildren(this.props.children);
+ public componentDidUpdate(): void {
+ this.updateChildren(this.props.children);
}
/**
*
* @param {HTMLElement} node element to apply styles to
- * @param {object} styles a key/value pair of CSS properties
+ * @param {React.CSSProperties} styles a key/value pair of CSS properties
* @returns {void}
*/
- _applyStyles(node, styles) {
+ private applyStyles(node: HTMLElement, styles: React.CSSProperties): void {
Object.entries(styles).forEach(([property, value]) => {
node.style[property] = value;
});
}
- _updateChildren(newChildren) {
+ private updateChildren(newChildren: React.ReactNode): void {
const oldChildren = this.children || {};
this.children = {};
- React.Children.toArray(newChildren).forEach((c) => {
+ React.Children.toArray(newChildren).forEach((c: any) => {
if (oldChildren[c.key]) {
const old = oldChildren[c.key];
const oldNode = ReactDom.findDOMNode(this.nodes[old.key]);
- if (oldNode && oldNode.style.left !== c.props.style.left) {
- this._applyStyles(oldNode, { left: c.props.style.left });
+ if (oldNode && (oldNode as HTMLElement).style.left !== c.props.style.left) {
+ this.applyStyles(oldNode as HTMLElement, { left: c.props.style.left });
// console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left);
}
// clone the old element with the props (and children) of the new element
@@ -66,7 +71,7 @@ export default class NodeAnimator extends React.Component {
} else {
// new element. If we have a startStyle, use that as the style and go through
// the enter animations
- const newProps = {};
+ const newProps: Partial<IChildProps> = {};
const restingStyle = c.props.style;
const startStyles = this.props.startStyles;
@@ -76,7 +81,7 @@ export default class NodeAnimator extends React.Component {
// console.log("mounted@startstyle0: "+JSON.stringify(startStyle));
}
- newProps.ref = ((n) => this._collectNode(
+ newProps.ref = ((n) => this.collectNode(
c.key, n, restingStyle,
));
@@ -85,7 +90,7 @@ export default class NodeAnimator extends React.Component {
});
}
- _collectNode(k, node, restingStyle) {
+ private collectNode(k: string, node: React.ReactInstance, restingStyle: React.CSSProperties): void {
if (
node &&
this.nodes[k] === undefined &&
@@ -96,7 +101,7 @@ export default class NodeAnimator extends React.Component {
// start from startStyle 1: 0 is the one we gave it
// to start with, so now we animate 1 etc.
for (let i = 1; i < startStyles.length; ++i) {
- this._applyStyles(domNode, startStyles[i]);
+ this.applyStyles(domNode as HTMLElement, startStyles[i]);
// console.log("start:"
// JSON.stringify(startStyles[i]),
// );
@@ -104,7 +109,7 @@ export default class NodeAnimator extends React.Component {
// and then we animate to the resting state
setTimeout(() => {
- this._applyStyles(domNode, restingStyle);
+ this.applyStyles(domNode as HTMLElement, restingStyle);
}, 0);
// console.log("enter:",
@@ -113,7 +118,7 @@ export default class NodeAnimator extends React.Component {
this.nodes[k] = node;
}
- render() {
+ public render(): JSX.Element {
return (
<>{ Object.values(this.children) }</>
);
From 30599554f17b5094d8f4c9f76aabeb95be66bdb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 12:40:34 +0200
Subject: [PATCH 232/313] Convert PageTypes to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/{PageTypes.js => PageTypes.ts} | 18 ++++++++++--------
src/components/structures/MatrixChat.tsx | 18 +++++++++---------
2 files changed, 19 insertions(+), 17 deletions(-)
rename src/{PageTypes.js => PageTypes.ts} (74%)
diff --git a/src/PageTypes.js b/src/PageTypes.ts
similarity index 74%
rename from src/PageTypes.js
rename to src/PageTypes.ts
index 09e0eadbd7..73967f351e 100644
--- a/src/PageTypes.js
+++ b/src/PageTypes.ts
@@ -16,11 +16,13 @@ limitations under the License.
*/
/** The types of page which can be shown by the LoggedInView */
-export default {
- HomePage: "home_page",
- RoomView: "room_view",
- RoomDirectory: "room_directory",
- UserView: "user_view",
- GroupView: "group_view",
- MyGroups: "my_groups",
-};
+enum PageType {
+ HomePage = "home_page",
+ RoomView = "room_view",
+ RoomDirectory = "room_directory",
+ UserView = "user_view",
+ GroupView = "group_view",
+ MyGroups = "my_groups",
+}
+
+export default PageType;
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index b6d2e21918..90ac47ffb5 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -42,7 +42,7 @@ import linkifyMatrix from "../../linkify-matrix";
import * as Lifecycle from '../../Lifecycle';
// LifecycleStore is not used but does listen to and dispatch actions
import '../../stores/LifecycleStore';
-import PageTypes from '../../PageTypes';
+import PageType from '../../PageTypes';
import createRoom, { IOpts } from "../../createRoom";
import { _t, _td, getCurrentLanguage } from '../../languageHandler';
@@ -207,7 +207,7 @@ interface IState {
view: Views;
// What the LoggedInView would be showing if visible
// eslint-disable-next-line camelcase
- page_type?: PageTypes;
+ page_type?: PageType;
// The ID of the room we're viewing. This is either populated directly
// in the case where we view a room by ID or by RoomView when it resolves
// what ID an alias points at.
@@ -723,7 +723,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
break;
}
case 'view_my_groups':
- this.setPage(PageTypes.MyGroups);
+ this.setPage(PageType.MyGroups);
this.notifyNewScreen('groups');
break;
case 'view_group':
@@ -756,7 +756,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
localStorage.setItem("mx_seenSpacesBeta", "1");
// We just dispatch the page change rather than have to worry about
// what the logic is for each of these branches.
- if (this.state.page_type === PageTypes.MyGroups) {
+ if (this.state.page_type === PageType.MyGroups) {
dis.dispatch({ action: 'view_last_screen' });
} else {
dis.dispatch({ action: 'view_my_groups' });
@@ -842,7 +842,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
}
};
- private setPage(pageType: string) {
+ private setPage(pageType: PageType) {
this.setState({
page_type: pageType,
});
@@ -949,7 +949,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
this.setState({
view: Views.LOGGED_IN,
currentRoomId: roomInfo.room_id || null,
- page_type: PageTypes.RoomView,
+ page_type: PageType.RoomView,
threepidInvite: roomInfo.threepid_invite,
roomOobData: roomInfo.oob_data,
ready: true,
@@ -977,7 +977,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
currentGroupId: groupId,
currentGroupIsNew: payload.group_is_new,
});
- this.setPage(PageTypes.GroupView);
+ this.setPage(PageType.GroupView);
this.notifyNewScreen('group/' + groupId);
}
@@ -1020,7 +1020,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
justRegistered,
currentRoomId: null,
});
- this.setPage(PageTypes.HomePage);
+ this.setPage(PageType.HomePage);
this.notifyNewScreen('home');
ThemeController.isLogin = false;
this.themeWatcher.recheck();
@@ -1038,7 +1038,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
}
this.notifyNewScreen('user/' + userId);
this.setState({ currentUserId: userId });
- this.setPage(PageTypes.UserView);
+ this.setPage(PageType.UserView);
});
}
From a680b5f96832ac40dff5b701f3e7c9a4680ca875 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 12:47:47 +0200
Subject: [PATCH 233/313] Convert Registration to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/{Registration.js => Registration.tsx} | 9 ++++++---
1 file changed, 6 insertions(+), 3 deletions(-)
rename src/{Registration.js => Registration.tsx} (89%)
diff --git a/src/Registration.js b/src/Registration.tsx
similarity index 89%
rename from src/Registration.js
rename to src/Registration.tsx
index c59d244149..90e81c0d45 100644
--- a/src/Registration.js
+++ b/src/Registration.tsx
@@ -20,10 +20,11 @@ limitations under the License.
* registration code.
*/
+import React from "react";
import dis from './dispatcher/dispatcher';
-import * as sdk from './index';
import Modal from './Modal';
import { _t } from './languageHandler';
+import QuestionDialog from "./components/views/dialogs/QuestionDialog";
// Regex for what a "safe" or "Matrix-looking" localpart would be.
// TODO: Update as needed for https://github.com/matrix-org/matrix-doc/issues/1514
@@ -41,9 +42,11 @@ export const SAFE_LOCALPART_REGEX = /^[a-z0-9=_\-./]+$/;
* @param {bool} options.screen_after
* If present the screen to redirect to after a successful login or register.
*/
-export async function startAnyRegistrationFlow(options) {
+export async function startAnyRegistrationFlow(
+ // eslint-disable-next-line camelcase
+ options: { go_home_on_cancel?: boolean, go_welcome_on_cancel?: boolean, screen_after?: boolean},
+): Promise<void> {
if (options === undefined) options = {};
- const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
const modal = Modal.createTrackedDialog('Registration required', '', QuestionDialog, {
hasCancelButton: true,
quitOnly: true,
From 6adf762569282320dbed52748182d9b2811674f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 13:04:00 +0200
Subject: [PATCH 234/313] Convert Skinner to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/@types/global.d.ts | 2 ++
src/{Skinner.js => Skinner.ts} | 33 +++++++++++++++++++++------------
2 files changed, 23 insertions(+), 12 deletions(-)
rename src/{Skinner.js => Skinner.ts} (84%)
diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
index d5856a5702..6309056bc2 100644
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -51,6 +51,7 @@ import { SetupEncryptionStore } from "../stores/SetupEncryptionStore";
import { RoomScrollStateStore } from "../stores/RoomScrollStateStore";
import { ConsoleLogger, IndexedDBLogStore } from "../rageshake/rageshake";
import ActiveWidgetStore from "../stores/ActiveWidgetStore";
+import { Skinner } from "../Skinner";
/* eslint-disable @typescript-eslint/naming-convention */
@@ -95,6 +96,7 @@ declare global {
mxSetupEncryptionStore?: SetupEncryptionStore;
mxRoomScrollStateStore?: RoomScrollStateStore;
mxActiveWidgetStore?: ActiveWidgetStore;
+ mxSkinner?: Skinner;
mxOnRecaptchaLoaded?: () => void;
electron?: Electron;
}
diff --git a/src/Skinner.js b/src/Skinner.ts
similarity index 84%
rename from src/Skinner.js
rename to src/Skinner.ts
index ef340e4052..6b20781b59 100644
--- a/src/Skinner.js
+++ b/src/Skinner.ts
@@ -14,12 +14,20 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-class Skinner {
- constructor() {
- this.components = null;
- }
+import React from "react";
- getComponent(name) {
+export interface IComponents {
+ [key: string]: React.Component;
+}
+
+export interface ISkinObject {
+ components: IComponents;
+}
+
+export class Skinner {
+ public components: IComponents = null;
+
+ public getComponent(name: string): React.Component {
if (!name) throw new Error(`Invalid component name: ${name}`);
if (this.components === null) {
throw new Error(
@@ -30,7 +38,7 @@ class Skinner {
);
}
- const doLookup = (components) => {
+ const doLookup = (components: IComponents): React.Component => {
if (!components) return null;
let comp = components[name];
// XXX: Temporarily also try 'views.' as we're currently
@@ -58,7 +66,7 @@ class Skinner {
return comp;
}
- load(skinObject) {
+ public load(skinObject: ISkinObject): void {
if (this.components !== null) {
throw new Error(
"Attempted to load a skin while a skin is already loaded"+
@@ -72,6 +80,7 @@ class Skinner {
}
// Now that we have a skin, load our components too
+ // eslint-disable-next-line @typescript-eslint/no-var-requires
const idx = require("./component-index");
if (!idx || !idx.components) throw new Error("Invalid react-sdk component index");
for (const c in idx.components) {
@@ -79,7 +88,7 @@ class Skinner {
}
}
- addComponent(name, comp) {
+ public addComponent(name: string, comp: any) {
let slot = name;
if (comp.replaces !== undefined) {
if (comp.replaces.indexOf('.') > -1) {
@@ -91,7 +100,7 @@ class Skinner {
this.components[slot] = comp;
}
- reset() {
+ public reset(): void {
this.components = null;
}
}
@@ -105,8 +114,8 @@ class Skinner {
// See https://derickbailey.com/2016/03/09/creating-a-true-singleton-in-node-js-with-es6-symbols/
// or https://nodejs.org/api/modules.html#modules_module_caching_caveats
// ("Modules are cached based on their resolved filename")
-if (global.mxSkinner === undefined) {
- global.mxSkinner = new Skinner();
+if (window.mxSkinner === undefined) {
+ window.mxSkinner = new Skinner();
}
-export default global.mxSkinner;
+export default window.mxSkinner;
From ff30dacc84fd198094af67463012e1fb405025ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 14:13:30 +0200
Subject: [PATCH 235/313] Convert theme to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/@types/global.d.ts | 4 ++++
src/{theme.js => theme.ts} | 40 +++++++++++++++++++++++++++++---------
2 files changed, 35 insertions(+), 9 deletions(-)
rename src/{theme.js => theme.ts} (89%)
diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
index 6309056bc2..38f237b9c3 100644
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -159,6 +159,10 @@ declare global {
setSinkId(outputId: string);
}
+ interface HTMLStyleElement {
+ disabled?: boolean;
+ }
+
// Add Chrome-specific `instant` ScrollBehaviour
type _ScrollBehavior = ScrollBehavior | "instant";
diff --git a/src/theme.js b/src/theme.ts
similarity index 89%
rename from src/theme.js
rename to src/theme.ts
index cd14d2d9db..8f95f8c784 100644
--- a/src/theme.js
+++ b/src/theme.ts
@@ -17,11 +17,32 @@ limitations under the License.
import { _t } from "./languageHandler";
-export const DEFAULT_THEME = "light";
import SettingsStore from "./settings/SettingsStore";
import ThemeWatcher from "./settings/watchers/ThemeWatcher";
-export function enumerateThemes() {
+export const DEFAULT_THEME = "light";
+
+interface IFontFaces {
+ src: {
+ format: string;
+ url: string;
+ local: string;
+ }[];
+}
+
+interface ICustomTheme {
+ colors: {
+ [key: string]: string;
+ };
+ fonts: {
+ faces: IFontFaces[];
+ general: string;
+ monospace: string;
+ };
+ is_dark?: boolean; // eslint-disable-line camelcase
+}
+
+export function enumerateThemes(): {[key: string]: string} {
const BUILTIN_THEMES = {
"light": _t("Light"),
"dark": _t("Dark"),
@@ -34,7 +55,7 @@ export function enumerateThemes() {
return Object.assign({}, customThemeNames, BUILTIN_THEMES);
}
-function clearCustomTheme() {
+function clearCustomTheme(): void {
// remove all css variables, we assume these are there because of the custom theme
const inlineStyleProps = Object.values(document.body.style);
for (const prop of inlineStyleProps) {
@@ -61,7 +82,7 @@ const allowedFontFaceProps = [
"unicode-range",
];
-function generateCustomFontFaceCSS(faces) {
+function generateCustomFontFaceCSS(faces: IFontFaces[]): string {
return faces.map(face => {
const src = face.src && face.src.map(srcElement => {
let format;
@@ -91,7 +112,7 @@ function generateCustomFontFaceCSS(faces) {
}).join("\n");
}
-function setCustomThemeVars(customTheme) {
+function setCustomThemeVars(customTheme: ICustomTheme): void {
const { style } = document.body;
function setCSSColorVariable(name, hexColor, doPct = true) {
@@ -134,7 +155,7 @@ function setCustomThemeVars(customTheme) {
}
}
-export function getCustomTheme(themeName) {
+export function getCustomTheme(themeName: string): ICustomTheme {
// set css variables
const customThemes = SettingsStore.getValue("custom_themes");
if (!customThemes) {
@@ -155,7 +176,7 @@ export function getCustomTheme(themeName) {
*
* @param {string} theme new theme
*/
-export async function setTheme(theme) {
+export async function setTheme(theme: string): Promise<void> {
if (!theme) {
const themeWatcher = new ThemeWatcher();
theme = themeWatcher.getEffectiveTheme();
@@ -200,13 +221,14 @@ export async function setTheme(theme) {
// We could alternatively lock or similar to stop the race, but
// this is probably good enough for now.
styleElements[stylesheetName].disabled = false;
- Object.values(styleElements).forEach((a) => {
+ Object.values(styleElements).forEach((a: HTMLStyleElement) => {
if (a == styleElements[stylesheetName]) return;
a.disabled = true;
});
const bodyStyles = global.getComputedStyle(document.body);
if (bodyStyles.backgroundColor) {
- document.querySelector('meta[name="theme-color"]').content = bodyStyles.backgroundColor;
+ const metaElement: HTMLMetaElement = document.querySelector('meta[name="theme-color"]');
+ metaElement.content = bodyStyles.backgroundColor;
}
resolve();
};
From 9f492fb4ff8c91ba7208f0b0fdaafed6770316c7 Mon Sep 17 00:00:00 2001
From: Glandos <bugs-github@antipoul.fr>
Date: Mon, 27 Sep 2021 12:14:10 +0000
Subject: [PATCH 236/313] Translated using Weblate (French)
Currently translated at 99.9% (3165 of 3168 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/fr/
---
src/i18n/strings/fr.json | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/fr.json b/src/i18n/strings/fr.json
index 6b6bc98a9e..8af2e8cee1 100644
--- a/src/i18n/strings/fr.json
+++ b/src/i18n/strings/fr.json
@@ -3162,5 +3162,12 @@
"To join a space you'll need an invite.": "Vous avez besoin d’une invitation pour rejoindre un espace.",
"You can also make Spaces from <a>communities</a>.": "Vous pouvez également créer des espaces à partir de <a>communautés</a>.",
"Temporarily show communities instead of Spaces for this session. Support for this will be removed in the near future. This will reload Element.": "Montre temporairement les communautés au lieu des espaces pour cette session. Il ne sera plus possible de le faire dans un futur proche. Cela va recharger Element.",
- "Display Communities instead of Spaces": "Afficher les communautés au lieu des espaces"
+ "Display Communities instead of Spaces": "Afficher les communautés au lieu des espaces",
+ "Would you like to leave the rooms in this space?": "Voulez-vous quitter les salons de cet espace ?",
+ "You are about to leave <spaceName/>.": "Vous êtes sur le point de quitter <spaceName/>.",
+ "Leave some rooms": "Quitter certains salons",
+ "Leave all rooms": "Quitter tous les salons",
+ "Don't leave any rooms": "Ne quitter aucun salon",
+ "Expand quotes │ ⇧+click": "Développer les citations │ ⇧+clic",
+ "Collapse quotes │ ⇧+click": "Réduire les citations │ ⇧+clic"
}
From 866c9334bc7b416a1b5453798c9c2d4bfb42815b Mon Sep 17 00:00:00 2001
From: sr093906 <spice2wolf@gmail.com>
Date: Mon, 27 Sep 2021 10:38:43 +0000
Subject: [PATCH 237/313] Translated using Weblate (Chinese (Simplified))
Currently translated at 100.0% (3168 of 3168 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/zh_Hans/
---
src/i18n/strings/zh_Hans.json | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/zh_Hans.json b/src/i18n/strings/zh_Hans.json
index 7ed706b61a..62e24c3091 100644
--- a/src/i18n/strings/zh_Hans.json
+++ b/src/i18n/strings/zh_Hans.json
@@ -3164,5 +3164,7 @@
"You are about to leave <spaceName/>.": "你即将离开 <spaceName/>。",
"Leave some rooms": "离开一些聊天室",
"Leave all rooms": "离开所有聊天室",
- "Don't leave any rooms": "不离开任何聊天室"
+ "Don't leave any rooms": "不离开任何聊天室",
+ "Collapse quotes │ ⇧+click": "折叠引号│ ⇧+click",
+ "Expand quotes │ ⇧+click": "展开引号│ ⇧+click"
}
From d2a1507f41c6929e262313e22708c2aa297027c0 Mon Sep 17 00:00:00 2001
From: waclaw66 <waclaw66@seznam.cz>
Date: Mon, 27 Sep 2021 10:58:13 +0000
Subject: [PATCH 238/313] Translated using Weblate (Czech)
Currently translated at 100.0% (3168 of 3168 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/cs/
---
src/i18n/strings/cs.json | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/cs.json b/src/i18n/strings/cs.json
index bf6c2c08f3..be6a78588b 100644
--- a/src/i18n/strings/cs.json
+++ b/src/i18n/strings/cs.json
@@ -3167,5 +3167,7 @@
"You are about to leave <spaceName/>.": "Odcházíte z <spaceName/>.",
"Leave some rooms": "Odejít z některých místností",
"Don't leave any rooms": "Neodcházet z žádné místnosti",
- "Leave all rooms": "Odejít ze všech místností"
+ "Leave all rooms": "Odejít ze všech místností",
+ "Expand quotes │ ⇧+click": "Rozbalit uvozovky │ ⇧+kliknutí",
+ "Collapse quotes │ ⇧+click": "Sbalit uvozovky │ ⇧+kliknutí"
}
From a66cc7a3bbb35b37afc03aa2b58bef6a82ca5a65 Mon Sep 17 00:00:00 2001
From: Besnik Bleta <besnik@programeshqip.org>
Date: Mon, 27 Sep 2021 10:42:46 +0000
Subject: [PATCH 239/313] Translated using Weblate (Albanian)
Currently translated at 99.7% (3161 of 3168 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sq/
---
src/i18n/strings/sq.json | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/sq.json b/src/i18n/strings/sq.json
index 4bfd16b802..618dd71163 100644
--- a/src/i18n/strings/sq.json
+++ b/src/i18n/strings/sq.json
@@ -3161,5 +3161,7 @@
"You are about to leave <spaceName/>.": "Ju ndan një hap nga braktisja e <spaceName/>.",
"Leave some rooms": "Braktis disa dhoma",
"Leave all rooms": "Braktisi krejt dhomat",
- "Don't leave any rooms": "Mos braktis ndonjë dhomë"
+ "Don't leave any rooms": "Mos braktis ndonjë dhomë",
+ "Expand quotes │ ⇧+click": "Hapi citimet │ ⇧+klikim",
+ "Collapse quotes │ ⇧+click": "Tkurri citimet │ ⇧+klikim"
}
From ccfc57657ab6d59921a088e24f32880959ccdcbe Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Mon, 27 Sep 2021 14:27:26 +0100
Subject: [PATCH 240/313] Upgrade matrix-js-sdk to 13.0.0
---
package.json | 2 +-
yarn.lock | 8 ++++----
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/package.json b/package.json
index 9593f74aae..7b6aa14bf9 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
"katex": "^0.12.0",
"linkifyjs": "^2.1.9",
"lodash": "^4.17.20",
- "matrix-js-sdk": "13.0.0-rc.1",
+ "matrix-js-sdk": "13.0.0",
"matrix-widget-api": "^0.1.0-beta.16",
"minimist": "^1.2.5",
"opus-recorder": "^8.0.3",
diff --git a/yarn.lock b/yarn.lock
index f5931c8c6e..56b4f74f4a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5806,10 +5806,10 @@ mathml-tag-names@^2.1.3:
resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
-matrix-js-sdk@13.0.0-rc.1:
- version "13.0.0-rc.1"
- resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-13.0.0-rc.1.tgz#12deab353862852acae8342108d30ce080d364da"
- integrity sha512-dfqJwXmG1+Ky2geaNADWYb7mwB2IfLFTE+T4q16gCoh2HM0W5yTMvi+kiJs0QspWFXICTps7eBSSq0827QNU8A==
+matrix-js-sdk@13.0.0:
+ version "13.0.0"
+ resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-13.0.0.tgz#a57a4b73892e98fcd5eb0081e4745fac567211dd"
+ integrity sha512-VkZhQBd6jlRNjsqjLIoHV3fnjOSljPDuJklKsF4l6yffkra7llxQctyMsrCnoiosdAQWigbLZsKSb+HbSFmcnw==
dependencies:
"@babel/runtime" "^7.12.5"
another-json "^0.2.0"
From d5dddadc3b54782959204f3bf646963754b9015d Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Mon, 27 Sep 2021 14:31:25 +0100
Subject: [PATCH 241/313] Prepare changelog for v3.31.0
---
CHANGELOG.md | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 48 insertions(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 71ddb1c5fe..c28d72a3eb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,51 @@
+Changes in [3.31.0](https://github.com/vector-im/element-desktop/releases/tag/v3.31.0) (2021-09-27)
+===================================================================================================
+
+## ✨ Features
+ * Say Joining space instead of Joining room where we know its a space ([\#6818](https://github.com/matrix-org/matrix-react-sdk/pull/6818)). Fixes vector-im/element-web#19064 and vector-im/element-web#19064.
+ * Add warning that some spaces may not be relinked to the newly upgraded room ([\#6805](https://github.com/matrix-org/matrix-react-sdk/pull/6805)). Fixes vector-im/element-web#18858 and vector-im/element-web#18858.
+ * Delabs Spaces, iterate some copy and move communities/space toggle to preferences ([\#6594](https://github.com/matrix-org/matrix-react-sdk/pull/6594)). Fixes vector-im/element-web#18088, vector-im/element-web#18524 vector-im/element-web#18088 and vector-im/element-web#18088.
+ * Show "Message" in the user info panel instead of "Start chat" ([\#6319](https://github.com/matrix-org/matrix-react-sdk/pull/6319)). Fixes vector-im/element-web#17877 and vector-im/element-web#17877. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Fix space keyboard shortcuts conflicting with native zoom shortcuts ([\#6804](https://github.com/matrix-org/matrix-react-sdk/pull/6804)).
+ * Replace plain text emoji at the end of a line ([\#6784](https://github.com/matrix-org/matrix-react-sdk/pull/6784)). Fixes vector-im/element-web#18833 and vector-im/element-web#18833. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Simplify Space Panel layout and fix some edge cases ([\#6800](https://github.com/matrix-org/matrix-react-sdk/pull/6800)). Fixes vector-im/element-web#18694 and vector-im/element-web#18694.
+ * Show unsent message warning on Space Panel buttons ([\#6778](https://github.com/matrix-org/matrix-react-sdk/pull/6778)). Fixes vector-im/element-web#18891 and vector-im/element-web#18891.
+ * Hide mute/unmute button in UserInfo for Spaces as it makes no sense ([\#6790](https://github.com/matrix-org/matrix-react-sdk/pull/6790)). Fixes vector-im/element-web#19007 and vector-im/element-web#19007.
+ * Fix automatic field population in space create menu not validating ([\#6792](https://github.com/matrix-org/matrix-react-sdk/pull/6792)). Fixes vector-im/element-web#19005 and vector-im/element-web#19005.
+ * Optimize input label transition on focus ([\#6783](https://github.com/matrix-org/matrix-react-sdk/pull/6783)). Fixes vector-im/element-web#12876 and vector-im/element-web#12876. Contributed by [MadLittleMods](https://github.com/MadLittleMods).
+ * Adapt and re-use the RolesRoomSettingsTab for Spaces ([\#6779](https://github.com/matrix-org/matrix-react-sdk/pull/6779)). Fixes vector-im/element-web#18908 vector-im/element-web#18909 and vector-im/element-web#18908.
+ * Deduplicate join rule management between rooms and spaces ([\#6724](https://github.com/matrix-org/matrix-react-sdk/pull/6724)). Fixes vector-im/element-web#18798 and vector-im/element-web#18798.
+ * Add config option to turn on in-room event sending timing metrics ([\#6766](https://github.com/matrix-org/matrix-react-sdk/pull/6766)).
+ * Improve the upgrade for restricted user experience ([\#6764](https://github.com/matrix-org/matrix-react-sdk/pull/6764)). Fixes vector-im/element-web#18677 and vector-im/element-web#18677.
+ * Improve tooltips on space quick actions and explore button ([\#6760](https://github.com/matrix-org/matrix-react-sdk/pull/6760)). Fixes vector-im/element-web#18528 and vector-im/element-web#18528.
+ * Make space members and user info behave more expectedly ([\#6765](https://github.com/matrix-org/matrix-react-sdk/pull/6765)). Fixes vector-im/element-web#17018 and vector-im/element-web#17018.
+ * hide no-op m.room.encryption events and better word param changes ([\#6747](https://github.com/matrix-org/matrix-react-sdk/pull/6747)). Fixes vector-im/element-web#18597 and vector-im/element-web#18597.
+ * Respect m.space.parent relations if they hold valid permissions ([\#6746](https://github.com/matrix-org/matrix-react-sdk/pull/6746)). Fixes vector-im/element-web#10935 and vector-im/element-web#10935.
+ * Space panel accessibility improvements ([\#6744](https://github.com/matrix-org/matrix-react-sdk/pull/6744)). Fixes vector-im/element-web#18892 and vector-im/element-web#18892.
+
+## 🐛 Bug Fixes
+ * Fix spacing for message composer buttons ([\#6854](https://github.com/matrix-org/matrix-react-sdk/pull/6854)).
+ * Fix accessing field on oobData which may be undefined ([\#6830](https://github.com/matrix-org/matrix-react-sdk/pull/6830)). Fixes vector-im/element-web#19085 and vector-im/element-web#19085.
+ * Fix reactions aria-label not being a string and thus being read as [Object object] ([\#6828](https://github.com/matrix-org/matrix-react-sdk/pull/6828)).
+ * Fix missing null guard in space hierarchy pagination ([\#6821](https://github.com/matrix-org/matrix-react-sdk/pull/6821)). Fixes matrix-org/element-web-rageshakes#6299 and matrix-org/element-web-rageshakes#6299.
+ * Fix checks to show prompt to start new chats ([\#6812](https://github.com/matrix-org/matrix-react-sdk/pull/6812)).
+ * Fix room list scroll jumps ([\#6777](https://github.com/matrix-org/matrix-react-sdk/pull/6777)). Fixes vector-im/element-web#17460 vector-im/element-web#18440 and vector-im/element-web#17460. Contributed by [robintown](https://github.com/robintown).
+ * Fix various message bubble alignment issues ([\#6785](https://github.com/matrix-org/matrix-react-sdk/pull/6785)). Fixes vector-im/element-web#18293, vector-im/element-web#18294 vector-im/element-web#18305 and vector-im/element-web#18293. Contributed by [robintown](https://github.com/robintown).
+ * Make message bubble font size consistent ([\#6795](https://github.com/matrix-org/matrix-react-sdk/pull/6795)). Contributed by [robintown](https://github.com/robintown).
+ * Fix edge cases around joining new room which does not belong to active space ([\#6797](https://github.com/matrix-org/matrix-react-sdk/pull/6797)). Fixes vector-im/element-web#19025 and vector-im/element-web#19025.
+ * Fix edge case space issues around creation and initial view ([\#6798](https://github.com/matrix-org/matrix-react-sdk/pull/6798)). Fixes vector-im/element-web#19023 and vector-im/element-web#19023.
+ * Stop spinner on space preview if the join fails ([\#6803](https://github.com/matrix-org/matrix-react-sdk/pull/6803)). Fixes vector-im/element-web#19034 and vector-im/element-web#19034.
+ * Fix emoji picker and stickerpicker not appearing correctly when opened ([\#6793](https://github.com/matrix-org/matrix-react-sdk/pull/6793)). Fixes vector-im/element-web#19012 and vector-im/element-web#19012. Contributed by [Palid](https://github.com/Palid).
+ * Fix autocomplete not having y-scroll ([\#6794](https://github.com/matrix-org/matrix-react-sdk/pull/6794)). Fixes vector-im/element-web#18997 and vector-im/element-web#18997. Contributed by [Palid](https://github.com/Palid).
+ * Fix broken edge case with public space creation with no alias ([\#6791](https://github.com/matrix-org/matrix-react-sdk/pull/6791)). Fixes vector-im/element-web#19003 and vector-im/element-web#19003.
+ * Redirect from /#/welcome to /#/home if already logged in ([\#6786](https://github.com/matrix-org/matrix-react-sdk/pull/6786)). Fixes vector-im/element-web#18990 and vector-im/element-web#18990. Contributed by [aaronraimist](https://github.com/aaronraimist).
+ * Fix build issues from two conflicting PRs landing without merge conflict ([\#6780](https://github.com/matrix-org/matrix-react-sdk/pull/6780)).
+ * Render guest settings only in public rooms/spaces ([\#6693](https://github.com/matrix-org/matrix-react-sdk/pull/6693)). Fixes vector-im/element-web#18776 and vector-im/element-web#18776. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
+ * Fix message bubble corners being wrong in the presence of hidden events ([\#6776](https://github.com/matrix-org/matrix-react-sdk/pull/6776)). Fixes vector-im/element-web#18124 and vector-im/element-web#18124. Contributed by [robintown](https://github.com/robintown).
+ * Debounce read marker update on scroll ([\#6771](https://github.com/matrix-org/matrix-react-sdk/pull/6771)). Fixes vector-im/element-web#18961 and vector-im/element-web#18961.
+ * Use cursor:pointer on space panel buttons ([\#6770](https://github.com/matrix-org/matrix-react-sdk/pull/6770)). Fixes vector-im/element-web#18951 and vector-im/element-web#18951.
+ * Fix regressed tab view buttons in space update toast ([\#6761](https://github.com/matrix-org/matrix-react-sdk/pull/6761)). Fixes vector-im/element-web#18781 and vector-im/element-web#18781.
+
Changes in [3.31.0-rc.2](https://github.com/vector-im/element-desktop/releases/tag/v3.31.0-rc.2) (2021-09-22)
=============================================================================================================
From dad60804ba336c5d3ad8844c4b07733d46e0b30a Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Mon, 27 Sep 2021 14:31:26 +0100
Subject: [PATCH 242/313] v3.31.0
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 7b6aa14bf9..c8a7d0f74e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "matrix-react-sdk",
- "version": "3.31.0-rc.2",
+ "version": "3.31.0",
"description": "SDK for matrix.org using React",
"author": "matrix.org",
"repository": {
From 3e2e3fcd2014d6f7ac7f62b53c99f2e79bc1289f Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Mon, 27 Sep 2021 14:33:46 +0100
Subject: [PATCH 243/313] Resetting package fields for development
---
package.json | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/package.json b/package.json
index c8a7d0f74e..9e740fa8a7 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
"bin": {
"reskindex": "scripts/reskindex.js"
},
- "main": "./lib/index.js",
+ "main": "./src/index.js",
"matrix_src_main": "./src/index.js",
"matrix_lib_main": "./lib/index.js",
"matrix_lib_typings": "./lib/index.d.ts",
@@ -210,6 +210,5 @@
"coverageReporters": [
"text"
]
- },
- "typings": "./lib/index.d.ts"
+ }
}
From b635d017799e198fa0391e51af0b12e9d5843992 Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Mon, 27 Sep 2021 14:33:56 +0100
Subject: [PATCH 244/313] Reset matrix-js-sdk back to develop branch
---
package.json | 2 +-
yarn.lock | 5 ++---
2 files changed, 3 insertions(+), 4 deletions(-)
diff --git a/package.json b/package.json
index 9e740fa8a7..89084acd68 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
"katex": "^0.12.0",
"linkifyjs": "^2.1.9",
"lodash": "^4.17.20",
- "matrix-js-sdk": "13.0.0",
+ "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
"matrix-widget-api": "^0.1.0-beta.16",
"minimist": "^1.2.5",
"opus-recorder": "^8.0.3",
diff --git a/yarn.lock b/yarn.lock
index 107caf1730..39c50464d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5806,10 +5806,9 @@ mathml-tag-names@^2.1.3:
resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
-matrix-js-sdk@13.0.0:
+"matrix-js-sdk@github:matrix-org/matrix-js-sdk#develop":
version "13.0.0"
- resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-13.0.0.tgz#a57a4b73892e98fcd5eb0081e4745fac567211dd"
- integrity sha512-VkZhQBd6jlRNjsqjLIoHV3fnjOSljPDuJklKsF4l6yffkra7llxQctyMsrCnoiosdAQWigbLZsKSb+HbSFmcnw==
+ resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/2515d07c8fc3bf5e1afc8352e3e330cca30dde85"
dependencies:
"@babel/runtime" "^7.12.5"
another-json "^0.2.0"
From e2b6c2cbd609f2825b9a5bd3af6bfa493a38f900 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 14:32:04 +0200
Subject: [PATCH 245/313] Convert RoomNotifs to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/{RoomNotifs.js => RoomNotifs.ts} | 82 ++++++++++---------
src/RoomNotifsTypes.ts | 24 ------
src/components/views/rooms/RoomTile.tsx | 31 ++++---
src/stores/local-echo/RoomEchoChamber.ts | 17 ++--
.../notifications/RoomNotificationState.ts | 8 +-
5 files changed, 69 insertions(+), 93 deletions(-)
rename src/{RoomNotifs.js => RoomNotifs.ts} (66%)
delete mode 100644 src/RoomNotifsTypes.ts
diff --git a/src/RoomNotifs.js b/src/RoomNotifs.ts
similarity index 66%
rename from src/RoomNotifs.js
rename to src/RoomNotifs.ts
index 5d109094af..5abee9a6ad 100644
--- a/src/RoomNotifs.js
+++ b/src/RoomNotifs.ts
@@ -17,27 +17,31 @@ limitations under the License.
import { MatrixClientPeg } from './MatrixClientPeg';
import { PushProcessor } from 'matrix-js-sdk/src/pushprocessor';
+import { NotificationCountType, Room } from "matrix-js-sdk/src/models/room";
+import { IAnnotatedPushRule, PushRuleKind } from "matrix-js-sdk/src/@types/PushRules";
-export const ALL_MESSAGES_LOUD = 'all_messages_loud';
-export const ALL_MESSAGES = 'all_messages';
-export const MENTIONS_ONLY = 'mentions_only';
-export const MUTE = 'mute';
+export enum RoomNotifState {
+ AllMessagesLoud = 'all_messages_loud',
+ AllMessages = 'all_messages',
+ MentionsOnly = 'mentions_only',
+ Mute = 'mute',
+}
-export const BADGE_STATES = [ALL_MESSAGES, ALL_MESSAGES_LOUD];
-export const MENTION_BADGE_STATES = [...BADGE_STATES, MENTIONS_ONLY];
+export const BADGE_STATES = [RoomNotifState.AllMessages, RoomNotifState.AllMessagesLoud];
+export const MENTION_BADGE_STATES = [...BADGE_STATES, RoomNotifState.MentionsOnly];
-export function shouldShowNotifBadge(roomNotifState) {
+export function shouldShowNotifBadge(roomNotifState: RoomNotifState): boolean {
return BADGE_STATES.includes(roomNotifState);
}
-export function shouldShowMentionBadge(roomNotifState) {
+export function shouldShowMentionBadge(roomNotifState: RoomNotifState): boolean {
return MENTION_BADGE_STATES.includes(roomNotifState);
}
-export function aggregateNotificationCount(rooms) {
- return rooms.reduce((result, room) => {
+export function aggregateNotificationCount(rooms: Room[]): {count: number, highlight: boolean} {
+ return rooms.reduce<{count: number, highlight: boolean}>((result, room) => {
const roomNotifState = getRoomNotifsState(room.roomId);
- const highlight = room.getUnreadNotificationCount('highlight') > 0;
+ const highlight = room.getUnreadNotificationCount(NotificationCountType.Highlight) > 0;
// use helper method to include highlights in the previous version of the room
const notificationCount = getUnreadNotificationCount(room);
@@ -55,9 +59,9 @@ export function aggregateNotificationCount(rooms) {
}, { count: 0, highlight: false });
}
-export function getRoomHasBadge(room) {
+export function getRoomHasBadge(room: Room): boolean {
const roomNotifState = getRoomNotifsState(room.roomId);
- const highlight = room.getUnreadNotificationCount('highlight') > 0;
+ const highlight = room.getUnreadNotificationCount(NotificationCountType.Highlight) > 0;
const notificationCount = room.getUnreadNotificationCount();
const notifBadges = notificationCount > 0 && shouldShowNotifBadge(roomNotifState);
@@ -66,14 +70,14 @@ export function getRoomHasBadge(room) {
return notifBadges || mentionBadges;
}
-export function getRoomNotifsState(roomId) {
- if (MatrixClientPeg.get().isGuest()) return ALL_MESSAGES;
+export function getRoomNotifsState(roomId: string): RoomNotifState {
+ if (MatrixClientPeg.get().isGuest()) return RoomNotifState.AllMessages;
// look through the override rules for a rule affecting this room:
// if one exists, it will take precedence.
const muteRule = findOverrideMuteRule(roomId);
if (muteRule) {
- return MUTE;
+ return RoomNotifState.Mute;
}
// for everything else, look at the room rule.
@@ -89,27 +93,27 @@ export function getRoomNotifsState(roomId) {
// XXX: We have to assume the default is to notify for all messages
// (in particular this will be 'wrong' for one to one rooms because
// they will notify loudly for all messages)
- if (!roomRule || !roomRule.enabled) return ALL_MESSAGES;
+ if (!roomRule || !roomRule.enabled) return RoomNotifState.AllMessages;
// a mute at the room level will still allow mentions
// to notify
- if (isMuteRule(roomRule)) return MENTIONS_ONLY;
+ if (isMuteRule(roomRule)) return RoomNotifState.MentionsOnly;
const actionsObject = PushProcessor.actionListToActionsObject(roomRule.actions);
- if (actionsObject.tweaks.sound) return ALL_MESSAGES_LOUD;
+ if (actionsObject.tweaks.sound) return RoomNotifState.AllMessagesLoud;
return null;
}
-export function setRoomNotifsState(roomId, newState) {
- if (newState === MUTE) {
+export function setRoomNotifsState(roomId: string, newState: RoomNotifState): Promise<void> {
+ if (newState === RoomNotifState.Mute) {
return setRoomNotifsStateMuted(roomId);
} else {
return setRoomNotifsStateUnmuted(roomId, newState);
}
}
-export function getUnreadNotificationCount(room, type=null) {
+export function getUnreadNotificationCount(room: Room, type: NotificationCountType = null): number {
let notificationCount = room.getUnreadNotificationCount(type);
// Check notification counts in the old room just in case there's some lost
@@ -124,21 +128,21 @@ export function getUnreadNotificationCount(room, type=null) {
// notifying the user for unread messages because they would have extreme
// difficulty changing their notification preferences away from "All Messages"
// and "Noisy".
- notificationCount += oldRoom.getUnreadNotificationCount("highlight");
+ notificationCount += oldRoom.getUnreadNotificationCount(NotificationCountType.Highlight);
}
}
return notificationCount;
}
-function setRoomNotifsStateMuted(roomId) {
+function setRoomNotifsStateMuted(roomId: string): Promise<any> {
const cli = MatrixClientPeg.get();
const promises = [];
// delete the room rule
const roomRule = cli.getRoomPushRule('global', roomId);
if (roomRule) {
- promises.push(cli.deletePushRule('global', 'room', roomRule.rule_id));
+ promises.push(cli.deletePushRule('global', PushRuleKind.RoomSpecific, roomRule.rule_id));
}
// add/replace an override rule to squelch everything in this room
@@ -146,7 +150,7 @@ function setRoomNotifsStateMuted(roomId) {
// is an override rule, not a room rule: it still pertains to this room
// though, so using the room ID as the rule ID is logical and prevents
// duplicate copies of the rule.
- promises.push(cli.addPushRule('global', 'override', roomId, {
+ promises.push(cli.addPushRule('global', PushRuleKind.Override, roomId, {
conditions: [
{
kind: 'event_match',
@@ -162,30 +166,30 @@ function setRoomNotifsStateMuted(roomId) {
return Promise.all(promises);
}
-function setRoomNotifsStateUnmuted(roomId, newState) {
+function setRoomNotifsStateUnmuted(roomId: string, newState: RoomNotifState): Promise<any> {
const cli = MatrixClientPeg.get();
const promises = [];
const overrideMuteRule = findOverrideMuteRule(roomId);
if (overrideMuteRule) {
- promises.push(cli.deletePushRule('global', 'override', overrideMuteRule.rule_id));
+ promises.push(cli.deletePushRule('global', PushRuleKind.Override, overrideMuteRule.rule_id));
}
- if (newState === 'all_messages') {
+ if (newState === RoomNotifState.AllMessages) {
const roomRule = cli.getRoomPushRule('global', roomId);
if (roomRule) {
- promises.push(cli.deletePushRule('global', 'room', roomRule.rule_id));
+ promises.push(cli.deletePushRule('global', PushRuleKind.RoomSpecific, roomRule.rule_id));
}
- } else if (newState === 'mentions_only') {
- promises.push(cli.addPushRule('global', 'room', roomId, {
+ } else if (newState === RoomNotifState.MentionsOnly) {
+ promises.push(cli.addPushRule('global', PushRuleKind.RoomSpecific, roomId, {
actions: [
'dont_notify',
],
}));
// https://matrix.org/jira/browse/SPEC-400
- promises.push(cli.setPushRuleEnabled('global', 'room', roomId, true));
- } else if ('all_messages_loud') {
- promises.push(cli.addPushRule('global', 'room', roomId, {
+ promises.push(cli.setPushRuleEnabled('global', PushRuleKind.RoomSpecific, roomId, true));
+ } else if (newState === RoomNotifState.AllMessagesLoud) {
+ promises.push(cli.addPushRule('global', PushRuleKind.RoomSpecific, roomId, {
actions: [
'notify',
{
@@ -195,13 +199,13 @@ function setRoomNotifsStateUnmuted(roomId, newState) {
],
}));
// https://matrix.org/jira/browse/SPEC-400
- promises.push(cli.setPushRuleEnabled('global', 'room', roomId, true));
+ promises.push(cli.setPushRuleEnabled('global', PushRuleKind.RoomSpecific, roomId, true));
}
return Promise.all(promises);
}
-function findOverrideMuteRule(roomId) {
+function findOverrideMuteRule(roomId: string): IAnnotatedPushRule {
const cli = MatrixClientPeg.get();
if (!cli.pushRules ||
!cli.pushRules['global'] ||
@@ -218,7 +222,7 @@ function findOverrideMuteRule(roomId) {
return null;
}
-function isRuleForRoom(roomId, rule) {
+function isRuleForRoom(roomId: string, rule: IAnnotatedPushRule): boolean {
if (rule.conditions.length !== 1) {
return false;
}
@@ -226,6 +230,6 @@ function isRuleForRoom(roomId, rule) {
return (cond.kind === 'event_match' && cond.key === 'room_id' && cond.pattern === roomId);
}
-function isMuteRule(rule) {
+function isMuteRule(rule: IAnnotatedPushRule): boolean {
return (rule.actions.length === 1 && rule.actions[0] === 'dont_notify');
}
diff --git a/src/RoomNotifsTypes.ts b/src/RoomNotifsTypes.ts
deleted file mode 100644
index 0e7093e434..0000000000
--- a/src/RoomNotifsTypes.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {
- ALL_MESSAGES,
- ALL_MESSAGES_LOUD,
- MENTIONS_ONLY,
- MUTE,
-} from "./RoomNotifs";
-
-export type Volume = ALL_MESSAGES_LOUD | ALL_MESSAGES | MENTIONS_ONLY | MUTE;
diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx
index 970915d653..dbefcbd333 100644
--- a/src/components/views/rooms/RoomTile.tsx
+++ b/src/components/views/rooms/RoomTile.tsx
@@ -29,10 +29,9 @@ import { ChevronFace, ContextMenuTooltipButton } from "../../structures/ContextM
import { DefaultTagID, TagID } from "../../../stores/room-list/models";
import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
-import { ALL_MESSAGES, ALL_MESSAGES_LOUD, MENTIONS_ONLY, MUTE } from "../../../RoomNotifs";
+import { RoomNotifState } from "../../../RoomNotifs";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import NotificationBadge from "./NotificationBadge";
-import { Volume } from "../../../RoomNotifsTypes";
import RoomListStore from "../../../stores/room-list/RoomListStore";
import RoomListActions from "../../../actions/RoomListActions";
import { ActionPayload } from "../../../dispatcher/payloads";
@@ -364,7 +363,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
this.setState({ generalMenuPosition: null }); // hide the menu
};
- private async saveNotifState(ev: ButtonEvent, newState: Volume) {
+ private async saveNotifState(ev: ButtonEvent, newState: RoomNotifState) {
ev.preventDefault();
ev.stopPropagation();
if (MatrixClientPeg.get().isGuest()) return;
@@ -378,10 +377,10 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
}
}
- private onClickAllNotifs = ev => this.saveNotifState(ev, ALL_MESSAGES);
- private onClickAlertMe = ev => this.saveNotifState(ev, ALL_MESSAGES_LOUD);
- private onClickMentions = ev => this.saveNotifState(ev, MENTIONS_ONLY);
- private onClickMute = ev => this.saveNotifState(ev, MUTE);
+ private onClickAllNotifs = ev => this.saveNotifState(ev, RoomNotifState.AllMessages);
+ private onClickAlertMe = ev => this.saveNotifState(ev, RoomNotifState.AllMessagesLoud);
+ private onClickMentions = ev => this.saveNotifState(ev, RoomNotifState.MentionsOnly);
+ private onClickMute = ev => this.saveNotifState(ev, RoomNotifState.Mute);
private renderNotificationsMenu(isActive: boolean): React.ReactElement {
if (MatrixClientPeg.get().isGuest() || this.props.tag === DefaultTagID.Archived ||
@@ -404,25 +403,25 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
<IconizedContextMenuOptionList first>
<IconizedContextMenuRadio
label={_t("Use default")}
- active={state === ALL_MESSAGES}
+ active={state === RoomNotifState.AllMessages}
iconClassName="mx_RoomTile_iconBell"
onClick={this.onClickAllNotifs}
/>
<IconizedContextMenuRadio
label={_t("All messages")}
- active={state === ALL_MESSAGES_LOUD}
+ active={state === RoomNotifState.AllMessagesLoud}
iconClassName="mx_RoomTile_iconBellDot"
onClick={this.onClickAlertMe}
/>
<IconizedContextMenuRadio
label={_t("Mentions & Keywords")}
- active={state === MENTIONS_ONLY}
+ active={state === RoomNotifState.MentionsOnly}
iconClassName="mx_RoomTile_iconBellMentions"
onClick={this.onClickMentions}
/>
<IconizedContextMenuRadio
label={_t("None")}
- active={state === MUTE}
+ active={state === RoomNotifState.Mute}
iconClassName="mx_RoomTile_iconBellCrossed"
onClick={this.onClickMute}
/>
@@ -432,14 +431,14 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
const classes = classNames("mx_RoomTile_notificationsButton", {
// Show bell icon for the default case too.
- mx_RoomTile_iconBell: state === ALL_MESSAGES,
- mx_RoomTile_iconBellDot: state === ALL_MESSAGES_LOUD,
- mx_RoomTile_iconBellMentions: state === MENTIONS_ONLY,
- mx_RoomTile_iconBellCrossed: state === MUTE,
+ mx_RoomTile_iconBell: state === RoomNotifState.AllMessages,
+ mx_RoomTile_iconBellDot: state === RoomNotifState.AllMessagesLoud,
+ mx_RoomTile_iconBellMentions: state === RoomNotifState.MentionsOnly,
+ mx_RoomTile_iconBellCrossed: state === RoomNotifState.Mute,
// Only show the icon by default if the room is overridden to muted.
// TODO: [FTUE Notifications] Probably need to detect global mute state
- mx_RoomTile_notificationsButton_show: state === MUTE,
+ mx_RoomTile_notificationsButton_show: state === RoomNotifState.Mute,
});
return (
diff --git a/src/stores/local-echo/RoomEchoChamber.ts b/src/stores/local-echo/RoomEchoChamber.ts
index e113f68c32..fb40e23a85 100644
--- a/src/stores/local-echo/RoomEchoChamber.ts
+++ b/src/stores/local-echo/RoomEchoChamber.ts
@@ -15,20 +15,17 @@ limitations under the License.
*/
import { GenericEchoChamber, implicitlyReverted, PROPERTY_UPDATED } from "./GenericEchoChamber";
-import { getRoomNotifsState, setRoomNotifsState } from "../../RoomNotifs";
+import { getRoomNotifsState, RoomNotifState, setRoomNotifsState } from "../../RoomNotifs";
import { RoomEchoContext } from "./RoomEchoContext";
import { _t } from "../../languageHandler";
-import { Volume } from "../../RoomNotifsTypes";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-export type CachedRoomValues = Volume;
-
export enum CachedRoomKey {
NotificationVolume,
}
-export class RoomEchoChamber extends GenericEchoChamber<RoomEchoContext, CachedRoomKey, CachedRoomValues> {
- private properties = new Map<CachedRoomKey, CachedRoomValues>();
+export class RoomEchoChamber extends GenericEchoChamber<RoomEchoContext, CachedRoomKey, RoomNotifState> {
+ private properties = new Map<CachedRoomKey, RoomNotifState>();
public constructor(context: RoomEchoContext) {
super(context, (k) => this.properties.get(k));
@@ -50,8 +47,8 @@ export class RoomEchoChamber extends GenericEchoChamber<RoomEchoContext, CachedR
private onAccountData = (event: MatrixEvent) => {
if (event.getType() === "m.push_rules") {
- const currentVolume = this.properties.get(CachedRoomKey.NotificationVolume) as Volume;
- const newVolume = getRoomNotifsState(this.context.room.roomId) as Volume;
+ const currentVolume = this.properties.get(CachedRoomKey.NotificationVolume) as RoomNotifState;
+ const newVolume = getRoomNotifsState(this.context.room.roomId) as RoomNotifState;
if (currentVolume !== newVolume) {
this.updateNotificationVolume();
}
@@ -66,11 +63,11 @@ export class RoomEchoChamber extends GenericEchoChamber<RoomEchoContext, CachedR
// ---- helpers below here ----
- public get notificationVolume(): Volume {
+ public get notificationVolume(): RoomNotifState {
return this.getValue(CachedRoomKey.NotificationVolume);
}
- public set notificationVolume(v: Volume) {
+ public set notificationVolume(v: RoomNotifState) {
this.setValue(_t("Change notification settings"), CachedRoomKey.NotificationVolume, v, async () => {
return setRoomNotifsState(this.context.room.roomId, v);
}, implicitlyReverted);
diff --git a/src/stores/notifications/RoomNotificationState.ts b/src/stores/notifications/RoomNotificationState.ts
index d0479200bd..3ad0080183 100644
--- a/src/stores/notifications/RoomNotificationState.ts
+++ b/src/stores/notifications/RoomNotificationState.ts
@@ -20,7 +20,7 @@ import { MatrixClientPeg } from "../../MatrixClientPeg";
import { EffectiveMembership, getEffectiveMembership } from "../../utils/membership";
import { readReceiptChangeIsFor } from "../../utils/read-receipts";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { Room } from "matrix-js-sdk/src/models/room";
+import { NotificationCountType, Room } from "matrix-js-sdk/src/models/room";
import * as RoomNotifs from '../../RoomNotifs';
import * as Unread from '../../Unread';
import { NotificationState } from "./NotificationState";
@@ -91,7 +91,7 @@ export class RoomNotificationState extends NotificationState implements IDestroy
this._color = NotificationColor.Unsent;
this._symbol = "!";
this._count = 1; // not used, technically
- } else if (RoomNotifs.getRoomNotifsState(this.room.roomId) === RoomNotifs.MUTE) {
+ } else if (RoomNotifs.getRoomNotifsState(this.room.roomId) === RoomNotifs.RoomNotifState.Mute) {
// When muted we suppress all notification states, even if we have context on them.
this._color = NotificationColor.None;
this._symbol = null;
@@ -101,8 +101,8 @@ export class RoomNotificationState extends NotificationState implements IDestroy
this._symbol = "!";
this._count = 1; // not used, technically
} else {
- const redNotifs = RoomNotifs.getUnreadNotificationCount(this.room, 'highlight');
- const greyNotifs = RoomNotifs.getUnreadNotificationCount(this.room, 'total');
+ const redNotifs = RoomNotifs.getUnreadNotificationCount(this.room, NotificationCountType.Highlight);
+ const greyNotifs = RoomNotifs.getUnreadNotificationCount(this.room, NotificationCountType.Total);
// For a 'true count' we pick the grey notifications first because they include the
// red notifications. If we don't have a grey count for some reason we use the red
From de44b3aacc34458b9539316351b3c9df38d36bd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 14:44:43 +0200
Subject: [PATCH 246/313] Convert index to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
package.json | 6 +++---
src/{index.js => index.ts} | 9 +++++----
2 files changed, 8 insertions(+), 7 deletions(-)
rename src/{index.js => index.ts} (81%)
diff --git a/package.json b/package.json
index 3e3d9383c4..bb1d2a38fd 100644
--- a/package.json
+++ b/package.json
@@ -25,9 +25,9 @@
"bin": {
"reskindex": "scripts/reskindex.js"
},
- "main": "./src/index.js",
- "matrix_src_main": "./src/index.js",
- "matrix_lib_main": "./lib/index.js",
+ "main": "./src/index.ts",
+ "matrix_src_main": "./src/index.ts",
+ "matrix_lib_main": "./lib/index.ts",
"matrix_lib_typings": "./lib/index.d.ts",
"scripts": {
"prepublishOnly": "yarn build",
diff --git a/src/index.js b/src/index.ts
similarity index 81%
rename from src/index.js
rename to src/index.ts
index e360c04f4f..2c88265438 100644
--- a/src/index.js
+++ b/src/index.ts
@@ -15,20 +15,21 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import Skinner from './Skinner';
+import Skinner, { ISkinObject } from './Skinner';
-export function loadSkin(skinObject) {
+export function loadSkin(skinObject: ISkinObject): void {
Skinner.load(skinObject);
}
-export function resetSkin() {
+export function resetSkin(): void {
Skinner.reset();
}
-export function getComponent(componentName) {
+export function getComponent(componentName: string): any {
return Skinner.getComponent(componentName);
}
// Import the js-sdk so the proper `request` object can be set. This does some
// magic with the browser injection to make all subsequent imports work fine.
import "matrix-js-sdk";
+
From f12b1423114ceffec56672aac4282cc7e65b6ec6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 15:18:31 +0200
Subject: [PATCH 247/313] Convert ScalarMessaging to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
...{ScalarMessaging.js => ScalarMessaging.ts} | 92 +++++++++++--------
1 file changed, 56 insertions(+), 36 deletions(-)
rename src/{ScalarMessaging.js => ScalarMessaging.ts} (87%)
diff --git a/src/ScalarMessaging.js b/src/ScalarMessaging.ts
similarity index 87%
rename from src/ScalarMessaging.js
rename to src/ScalarMessaging.ts
index 609ac5c67c..888b9ce9ed 100644
--- a/src/ScalarMessaging.js
+++ b/src/ScalarMessaging.ts
@@ -247,13 +247,31 @@ import { objectClone } from "./utils/objects";
import { logger } from "matrix-js-sdk/src/logger";
-function sendResponse(event, res) {
+enum Action {
+ CloseScalar = "close_scalar",
+ GetWidgets = "get_widgets",
+ SetWidgets = "set_widgets",
+ SetWidget = "set_widget",
+ JoinRulesState = "join_rules_state",
+ SetPlumbingState = "set_plumbing_state",
+ GetMembershipCount = "get_membership_count",
+ GetRoomEncryptionState = "get_room_enc_state",
+ CanSendEvent = "can_send_event",
+ MembershipState = "membership_state",
+ invite = "invite",
+ BotOptions = "bot_options",
+ SetBotOptions = "set_bot_options",
+ SetBotPower = "set_bot_power",
+}
+
+function sendResponse(event: MessageEvent<any>, res: any): void {
const data = objectClone(event.data);
data.response = res;
+ // @ts-ignore
event.source.postMessage(data, event.origin);
}
-function sendError(event, msg, nestedError) {
+function sendError(event: MessageEvent<any>, msg: string, nestedError?: Error): void {
console.error("Action:" + event.data.action + " failed with message: " + msg);
const data = objectClone(event.data);
data.response = {
@@ -264,10 +282,11 @@ function sendError(event, msg, nestedError) {
if (nestedError) {
data.response.error._error = nestedError;
}
+ // @ts-ignore
event.source.postMessage(data, event.origin);
}
-function inviteUser(event, roomId, userId) {
+function inviteUser(event: MessageEvent<any>, roomId: string, userId: string): void {
logger.log(`Received request to invite ${userId} into room ${roomId}`);
const client = MatrixClientPeg.get();
if (!client) {
@@ -295,7 +314,7 @@ function inviteUser(event, roomId, userId) {
});
}
-function setWidget(event, roomId) {
+function setWidget(event: MessageEvent<any>, roomId: string): void {
const widgetId = event.data.widget_id;
let widgetType = event.data.type;
const widgetUrl = event.data.url;
@@ -356,7 +375,7 @@ function setWidget(event, roomId) {
}
}
-function getWidgets(event, roomId) {
+function getWidgets(event: MessageEvent<any>, roomId: string): void {
const client = MatrixClientPeg.get();
if (!client) {
sendError(event, _t('You need to be logged in.'));
@@ -382,7 +401,7 @@ function getWidgets(event, roomId) {
sendResponse(event, widgetStateEvents);
}
-function getRoomEncState(event, roomId) {
+function getRoomEncState(event: MessageEvent<any>, roomId: string): void {
const client = MatrixClientPeg.get();
if (!client) {
sendError(event, _t('You need to be logged in.'));
@@ -398,7 +417,7 @@ function getRoomEncState(event, roomId) {
sendResponse(event, roomIsEncrypted);
}
-function setPlumbingState(event, roomId, status) {
+function setPlumbingState(event: MessageEvent<any>, roomId: string, status: string): void {
if (typeof status !== 'string') {
throw new Error('Plumbing state status should be a string');
}
@@ -417,7 +436,7 @@ function setPlumbingState(event, roomId, status) {
});
}
-function setBotOptions(event, roomId, userId) {
+function setBotOptions(event: MessageEvent<any>, roomId: string, userId: string): void {
logger.log(`Received request to set options for bot ${userId} in room ${roomId}`);
const client = MatrixClientPeg.get();
if (!client) {
@@ -433,7 +452,7 @@ function setBotOptions(event, roomId, userId) {
});
}
-function setBotPower(event, roomId, userId, level) {
+function setBotPower(event: MessageEvent<any>, roomId: string, userId: string, level: number): void {
if (!(Number.isInteger(level) && level >= 0)) {
sendError(event, _t('Power level must be positive integer.'));
return;
@@ -464,22 +483,22 @@ function setBotPower(event, roomId, userId, level) {
});
}
-function getMembershipState(event, roomId, userId) {
+function getMembershipState(event: MessageEvent<any>, roomId: string, userId: string): void {
logger.log(`membership_state of ${userId} in room ${roomId} requested.`);
returnStateEvent(event, roomId, "m.room.member", userId);
}
-function getJoinRules(event, roomId) {
+function getJoinRules(event: MessageEvent<any>, roomId: string): void {
logger.log(`join_rules of ${roomId} requested.`);
returnStateEvent(event, roomId, "m.room.join_rules", "");
}
-function botOptions(event, roomId, userId) {
+function botOptions(event: MessageEvent<any>, roomId: string, userId: string): void {
logger.log(`bot_options of ${userId} in room ${roomId} requested.`);
returnStateEvent(event, roomId, "m.room.bot.options", "_" + userId);
}
-function getMembershipCount(event, roomId) {
+function getMembershipCount(event: MessageEvent<any>, roomId: string): void {
const client = MatrixClientPeg.get();
if (!client) {
sendError(event, _t('You need to be logged in.'));
@@ -494,7 +513,7 @@ function getMembershipCount(event, roomId) {
sendResponse(event, count);
}
-function canSendEvent(event, roomId) {
+function canSendEvent(event: MessageEvent<any>, roomId: string): void {
const evType = "" + event.data.event_type; // force stringify
const isState = Boolean(event.data.is_state);
const client = MatrixClientPeg.get();
@@ -528,7 +547,7 @@ function canSendEvent(event, roomId) {
sendResponse(event, true);
}
-function returnStateEvent(event, roomId, eventType, stateKey) {
+function returnStateEvent(event: MessageEvent<any>, roomId: string, eventType: string, stateKey: string): void {
const client = MatrixClientPeg.get();
if (!client) {
sendError(event, _t('You need to be logged in.'));
@@ -547,8 +566,9 @@ function returnStateEvent(event, roomId, eventType, stateKey) {
sendResponse(event, stateEvent.getContent());
}
-const onMessage = function(event) {
+const onMessage = function(event: MessageEvent<any>): void {
if (!event.origin) { // stupid chrome
+ // @ts-ignore
event.origin = event.originalEvent.origin;
}
@@ -582,8 +602,8 @@ const onMessage = function(event) {
return;
}
- if (event.data.action === "close_scalar") {
- dis.dispatch({ action: "close_scalar" });
+ if (event.data.action === Action.CloseScalar) {
+ dis.dispatch({ action: Action.CloseScalar });
sendResponse(event, null);
return;
}
@@ -596,10 +616,10 @@ const onMessage = function(event) {
// Get and set user widgets (not associated with a specific room)
// If roomId is specified, it must be validated, so room-based widgets agreed
// handled further down.
- if (event.data.action === "get_widgets") {
+ if (event.data.action === Action.GetWidgets) {
getWidgets(event, null);
return;
- } else if (event.data.action === "set_widget") {
+ } else if (event.data.action === Action.SetWidgets) {
setWidget(event, null);
return;
} else {
@@ -614,28 +634,28 @@ const onMessage = function(event) {
}
// Get and set room-based widgets
- if (event.data.action === "get_widgets") {
+ if (event.data.action === Action.GetWidgets) {
getWidgets(event, roomId);
return;
- } else if (event.data.action === "set_widget") {
+ } else if (event.data.action === Action.SetWidget) {
setWidget(event, roomId);
return;
}
// These APIs don't require userId
- if (event.data.action === "join_rules_state") {
+ if (event.data.action === Action.JoinRulesState) {
getJoinRules(event, roomId);
return;
- } else if (event.data.action === "set_plumbing_state") {
+ } else if (event.data.action === Action.SetPlumbingState) {
setPlumbingState(event, roomId, event.data.status);
return;
- } else if (event.data.action === "get_membership_count") {
+ } else if (event.data.action === Action.GetMembershipCount) {
getMembershipCount(event, roomId);
return;
- } else if (event.data.action === "get_room_enc_state") {
+ } else if (event.data.action === Action.GetRoomEncryptionState) {
getRoomEncState(event, roomId);
return;
- } else if (event.data.action === "can_send_event") {
+ } else if (event.data.action === Action.CanSendEvent) {
canSendEvent(event, roomId);
return;
}
@@ -645,19 +665,19 @@ const onMessage = function(event) {
return;
}
switch (event.data.action) {
- case "membership_state":
+ case Action.MembershipState:
getMembershipState(event, roomId, userId);
break;
- case "invite":
+ case Action.invite:
inviteUser(event, roomId, userId);
break;
- case "bot_options":
+ case Action.BotOptions:
botOptions(event, roomId, userId);
break;
- case "set_bot_options":
+ case Action.SetBotOptions:
setBotOptions(event, roomId, userId);
break;
- case "set_bot_power":
+ case Action.SetBotPower:
setBotPower(event, roomId, userId, event.data.level);
break;
default:
@@ -667,16 +687,16 @@ const onMessage = function(event) {
};
let listenerCount = 0;
-let openManagerUrl = null;
+let openManagerUrl: string = null;
-export function startListening() {
+export function startListening(): void {
if (listenerCount === 0) {
window.addEventListener("message", onMessage, false);
}
listenerCount += 1;
}
-export function stopListening() {
+export function stopListening(): void {
listenerCount -= 1;
if (listenerCount === 0) {
window.removeEventListener("message", onMessage);
@@ -691,6 +711,6 @@ export function stopListening() {
}
}
-export function setOpenManagerUrl(url) {
+export function setOpenManagerUrl(url: string): void {
openManagerUrl = url;
}
From 05b83d1fae57e19f5182bdbb75ef61fb8ce58a12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 15:24:44 +0200
Subject: [PATCH 248/313] Convert linkify-matrix to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/{linkify-matrix.js => linkify-matrix.ts} | 47 +++++++++++---------
1 file changed, 27 insertions(+), 20 deletions(-)
rename src/{linkify-matrix.js => linkify-matrix.ts} (88%)
diff --git a/src/linkify-matrix.js b/src/linkify-matrix.ts
similarity index 88%
rename from src/linkify-matrix.js
rename to src/linkify-matrix.ts
index e670bfcdab..57cc3939b8 100644
--- a/src/linkify-matrix.js
+++ b/src/linkify-matrix.ts
@@ -22,7 +22,14 @@ import {
tryTransformPermalinkToLocalHref,
} from "./utils/permalinks/Permalinks";
-function matrixLinkify(linkify) {
+enum Type {
+ URL = "url",
+ UserId = "userid",
+ RoomAlias = "roomalias",
+ GroupId = "groupid"
+}
+
+function matrixLinkify(linkify): void {
// Text tokens
const TT = linkify.scanner.TOKENS;
// Multi tokens
@@ -173,11 +180,11 @@ function matrixLinkify(linkify) {
}
// stubs, overwritten in MatrixChat's componentDidMount
-matrixLinkify.onUserClick = function(e, userId) { e.preventDefault(); };
-matrixLinkify.onAliasClick = function(e, roomAlias) { e.preventDefault(); };
-matrixLinkify.onGroupClick = function(e, groupId) { e.preventDefault(); };
+matrixLinkify.onUserClick = function(e: MouseEvent, userId: string) { e.preventDefault(); };
+matrixLinkify.onAliasClick = function(e: MouseEvent, roomAlias: string) { e.preventDefault(); };
+matrixLinkify.onGroupClick = function(e: MouseEvent, groupId: string) { e.preventDefault(); };
-const escapeRegExp = function(string) {
+const escapeRegExp = function(string): string {
return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
};
@@ -196,15 +203,15 @@ matrixLinkify.MATRIXTO_MD_LINK_PATTERN =
matrixLinkify.MATRIXTO_BASE_URL= baseUrl;
matrixLinkify.options = {
- events: function(href, type) {
+ events: function(href: string, type: Type | string): Partial<GlobalEventHandlers> {
switch (type) {
- case "url": {
+ case Type.URL: {
// intercept local permalinks to users and show them like userids (in userinfo of current room)
try {
const permalink = parsePermalink(href);
if (permalink && permalink.userId) {
return {
- click: function(e) {
+ onclick: function(e) {
matrixLinkify.onUserClick(e, permalink.userId);
},
};
@@ -214,32 +221,32 @@ matrixLinkify.options = {
}
break;
}
- case "userid":
+ case Type.UserId:
return {
- click: function(e) {
+ onclick: function(e) {
matrixLinkify.onUserClick(e, href);
},
};
- case "roomalias":
+ case Type.RoomAlias:
return {
- click: function(e) {
+ onclick: function(e) {
matrixLinkify.onAliasClick(e, href);
},
};
- case "groupid":
+ case Type.GroupId:
return {
- click: function(e) {
+ onclick: function(e) {
matrixLinkify.onGroupClick(e, href);
},
};
}
},
- formatHref: function(href, type) {
+ formatHref: function(href: string, type: Type | string): string {
switch (type) {
- case 'roomalias':
- case 'userid':
- case 'groupid':
+ case Type.RoomAlias:
+ case Type.UserId:
+ case Type.GroupId:
default: {
return tryTransformEntityToPermalink(href);
}
@@ -250,8 +257,8 @@ matrixLinkify.options = {
rel: 'noreferrer noopener',
},
- target: function(href, type) {
- if (type === 'url') {
+ target: function(href: string, type: Type | string): string {
+ if (type === Type.URL) {
try {
const transformed = tryTransformPermalinkToLocalHref(href);
if (transformed !== href || decodeURIComponent(href).match(matrixLinkify.ELEMENT_URL_PATTERN)) {
From dabc13c98fbcad659a89a84dfc22e5bd4e1b01b1 Mon Sep 17 00:00:00 2001
From: Paulo Pinto <paulo.pinto@automattic.com>
Date: Mon, 27 Sep 2021 16:32:01 +0100
Subject: [PATCH 249/313] Extract logic to a function
For better readability of the call to useAsyncMemo()
Signed-off-by: Paulo Pinto <paulo.pinto@automattic.com>
---
.../views/rooms/LinkPreviewGroup.tsx | 21 ++++++++++++-------
1 file changed, 13 insertions(+), 8 deletions(-)
diff --git a/src/components/views/rooms/LinkPreviewGroup.tsx b/src/components/views/rooms/LinkPreviewGroup.tsx
index c9842bdd33..f9d0c76e99 100644
--- a/src/components/views/rooms/LinkPreviewGroup.tsx
+++ b/src/components/views/rooms/LinkPreviewGroup.tsx
@@ -16,7 +16,7 @@ limitations under the License.
import React, { useContext, useEffect } from "react";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { IPreviewUrlResponse } from "matrix-js-sdk/src/client";
+import { IPreviewUrlResponse, MatrixClient } from "matrix-js-sdk/src/client";
import { useStateToggle } from "../../../hooks/useStateToggle";
import LinkPreviewWidget from "./LinkPreviewWidget";
@@ -40,13 +40,7 @@ const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick, onH
const ts = mxEvent.getTs();
const previews = useAsyncMemo<[string, IPreviewUrlResponse][]>(async () => {
- return Promise.all<[string, IPreviewUrlResponse] | void>(links.map(async link => {
- try {
- return [link, await cli.getUrlPreview(link, ts)];
- } catch (error) {
- console.error("Failed to get URL preview: " + error);
- }
- })).then(a => a.filter(Boolean)) as Promise<[string, IPreviewUrlResponse][]>;
+ return fetchPreviews(cli, links, ts);
}, [links, ts], []);
useEffect(() => {
@@ -89,4 +83,15 @@ const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick, onH
</div>;
};
+const fetchPreviews = (cli: MatrixClient, links: string[], ts: number):
+ Promise<[string, IPreviewUrlResponse][]> => {
+ return Promise.all<[string, IPreviewUrlResponse] | void>(links.map(async link => {
+ try {
+ return [link, await cli.getUrlPreview(link, ts)];
+ } catch (error) {
+ console.error("Failed to get URL preview: " + error);
+ }
+ })).then(a => a.filter(Boolean)) as Promise<[string, IPreviewUrlResponse][]>;
+};
+
export default LinkPreviewGroup;
From 432dd994bdf70add062235c3c6aa5e2cc158fe4c Mon Sep 17 00:00:00 2001
From: Paulo Pinto <paulo.pinto@automattic.com>
Date: Mon, 27 Sep 2021 18:03:15 +0100
Subject: [PATCH 250/313] Filter out invalid previews
The call to cli.getUrlPreview() might return an empty object ({}), which means
there is in fact no preview for that URL.
Signed-off-by: Paulo Pinto <paulo.pinto@automattic.com>
---
src/components/views/rooms/LinkPreviewGroup.tsx | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/src/components/views/rooms/LinkPreviewGroup.tsx b/src/components/views/rooms/LinkPreviewGroup.tsx
index f9d0c76e99..eed13aff0f 100644
--- a/src/components/views/rooms/LinkPreviewGroup.tsx
+++ b/src/components/views/rooms/LinkPreviewGroup.tsx
@@ -87,7 +87,10 @@ const fetchPreviews = (cli: MatrixClient, links: string[], ts: number):
Promise<[string, IPreviewUrlResponse][]> => {
return Promise.all<[string, IPreviewUrlResponse] | void>(links.map(async link => {
try {
- return [link, await cli.getUrlPreview(link, ts)];
+ const preview = await cli.getUrlPreview(link, ts);
+ if (preview && Object.keys(preview).length > 0) {
+ return [link, preview];
+ }
} catch (error) {
console.error("Failed to get URL preview: " + error);
}
From 14f547f0eb2973d2bdeae3a76aa48698f8ce81cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 28 Sep 2021 07:48:56 +0200
Subject: [PATCH 251/313] Add some member access qualifiers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/IdentityAuthClient.tsx | 6 +++---
src/NodeAnimator.tsx | 2 +-
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/IdentityAuthClient.tsx b/src/IdentityAuthClient.tsx
index 116875cab2..ae55c20438 100644
--- a/src/IdentityAuthClient.tsx
+++ b/src/IdentityAuthClient.tsx
@@ -35,9 +35,9 @@ import { abbreviateUrl } from "./utils/UrlUtils";
export class AbortedIdentityActionError extends Error {}
export default class IdentityAuthClient {
- accessToken: string;
- tempClient: MatrixClient;
- authEnabled = true;
+ private accessToken: string;
+ private tempClient: MatrixClient;
+ private authEnabled = true;
/**
* Creates a new identity auth client
diff --git a/src/NodeAnimator.tsx b/src/NodeAnimator.tsx
index b0d74ec00e..1a8942f5f5 100644
--- a/src/NodeAnimator.tsx
+++ b/src/NodeAnimator.tsx
@@ -27,7 +27,7 @@ interface IProps {
export default class NodeAnimator extends React.Component<IProps> {
private nodes = {};
private children: { [key: string]: React.DetailedReactHTMLElement<any, HTMLElement> };
- static defaultProps: Partial<IProps> = {
+ public static defaultProps: Partial<IProps> = {
startStyles: [],
};
From aee27836d66b17916a14830e744da8ed66739d14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 28 Sep 2021 07:53:52 +0200
Subject: [PATCH 252/313] Use click not onclick
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
src/linkify-matrix.ts | 12 ++++++++----
1 file changed, 8 insertions(+), 4 deletions(-)
diff --git a/src/linkify-matrix.ts b/src/linkify-matrix.ts
index 57cc3939b8..20f1b1e213 100644
--- a/src/linkify-matrix.ts
+++ b/src/linkify-matrix.ts
@@ -211,7 +211,8 @@ matrixLinkify.options = {
const permalink = parsePermalink(href);
if (permalink && permalink.userId) {
return {
- onclick: function(e) {
+ // @ts-ignore see https://linkify.js.org/docs/options.html
+ click: function(e) {
matrixLinkify.onUserClick(e, permalink.userId);
},
};
@@ -223,19 +224,22 @@ matrixLinkify.options = {
}
case Type.UserId:
return {
- onclick: function(e) {
+ // @ts-ignore see https://linkify.js.org/docs/options.html
+ click: function(e) {
matrixLinkify.onUserClick(e, href);
},
};
case Type.RoomAlias:
return {
- onclick: function(e) {
+ // @ts-ignore see https://linkify.js.org/docs/options.html
+ click: function(e) {
matrixLinkify.onAliasClick(e, href);
},
};
case Type.GroupId:
return {
- onclick: function(e) {
+ // @ts-ignore see https://linkify.js.org/docs/options.html
+ click: function(e) {
matrixLinkify.onGroupClick(e, href);
},
};
From d71f2345fb01f0cfca1fdb9d546633e71908d9b6 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 28 Sep 2021 10:34:32 +0100
Subject: [PATCH 253/313] Null guard around the matrixClient in SpaceStore
---
src/stores/SpaceStore.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index f28d279d00..d440c33c83 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -818,7 +818,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
}
protected async onAction(payload: ActionPayload) {
- if (!spacesEnabled) return;
+ if (!spacesEnabled || !this.matrixClient) return;
switch (payload.action) {
case "view_room": {
// Don't auto-switch rooms when reacting to a context-switch
From ba8ec1763b3f309ae68a32eae8dda5ca5b680cc3 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 28 Sep 2021 11:05:03 +0100
Subject: [PATCH 254/313] Fix space panel width mismatch for creation modal
shade
---
res/css/views/spaces/_SpaceCreateMenu.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/res/css/views/spaces/_SpaceCreateMenu.scss b/res/css/views/spaces/_SpaceCreateMenu.scss
index 3f526a6bba..7084c2f20e 100644
--- a/res/css/views/spaces/_SpaceCreateMenu.scss
+++ b/res/css/views/spaces/_SpaceCreateMenu.scss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-$spacePanelWidth: 71px;
+$spacePanelWidth: 68px;
.mx_SpaceCreateMenu_wrapper {
// background blur everything except SpacePanel
From 160bf8e21f1737a369e5a91f46dbc31ea358c4e3 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germains@element.io>
Date: Tue, 28 Sep 2021 11:06:06 +0100
Subject: [PATCH 255/313] Fix missing prop
---
res/img/element-icons/message/view-in-timeline.svg | 1 +
src/components/views/messages/MessageActionBar.tsx | 3 +--
2 files changed, 2 insertions(+), 2 deletions(-)
create mode 100644 res/img/element-icons/message/view-in-timeline.svg
diff --git a/res/img/element-icons/message/view-in-timeline.svg b/res/img/element-icons/message/view-in-timeline.svg
new file mode 100644
index 0000000000..9f05950ce0
--- /dev/null
+++ b/res/img/element-icons/message/view-in-timeline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#737D8C" fill-rule="evenodd" d="M1 2.75A.75.75 0 0 1 1.75 2h.005a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75Zm2.495 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.005a.75.75 0 0 1 0 1.5h-.005a.75.75 0 0 1-.75-.75ZM1 6.75A.75.75 0 0 1 1.75 6h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 1 6.75ZM1 9.75A.75.75 0 0 1 1.75 9h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 1 9.75ZM1 13.75a.75.75 0 0 1 .75-.75h.005a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1-.75-.75Zm2.495 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5h-.01a.75.75 0 0 1-.75-.75Zm2.5 0a.75.75 0 0 1 .75-.75h.005a.75.75 0 0 1 0 1.5h-.005a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx
index 3be24d47ab..d3d4d5a693 100644
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/src/components/views/messages/MessageActionBar.tsx
@@ -135,11 +135,10 @@ interface IMessageActionBarProps {
getTile: () => any | null;
getReplyThread: () => ReplyThread | undefined;
permalinkCreator?: RoomPermalinkCreator;
- getTile: () => any; // TODO: FIXME, haven't figured out what the return type is here
- getReplyThread?: () => ReplyThread;
onFocusChange?: (menuDisplayed: boolean) => void;
toggleThreadExpanded: () => void;
isInThreadTimeline?: boolean;
+ isQuoteExpanded?: boolean;
}
@replaceableComponent("views.messages.MessageActionBar")
From ce0f16d58b63d1530e98c87625ad34c94692bb7e Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 28 Sep 2021 13:52:30 +0100
Subject: [PATCH 256/313] Fix pagination when filtering space hierarchy
---
src/components/structures/SpaceHierarchy.tsx | 19 +++++++++----------
1 file changed, 9 insertions(+), 10 deletions(-)
diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx
index db16011917..5d38cc16c2 100644
--- a/src/components/structures/SpaceHierarchy.tsx
+++ b/src/components/structures/SpaceHierarchy.tsx
@@ -446,7 +446,7 @@ export const useSpaceSummary = (space: Room): {
}));
const loadMore = useCallback(async (pageSize?: number) => {
- if (!hierarchy.canLoadMore || hierarchy.noSupport) return;
+ if (loading || !hierarchy.canLoadMore || hierarchy.noSupport) return;
setLoading(true);
await hierarchy.load(pageSize);
@@ -648,8 +648,6 @@ const SpaceHierarchy = ({
return <RovingTabIndexProvider onKeyDown={onKeyDown} handleHomeEnd handleUpDown>
{ ({ onKeyDownHandler }) => {
let content: JSX.Element;
- let loader: JSX.Element;
-
if (loading && !rooms.length) {
content = <Spinner />;
} else {
@@ -671,19 +669,20 @@ const SpaceHierarchy = ({
}}
/>
</>;
-
- if (hierarchy.canLoadMore) {
- loader = <div ref={loaderRef}>
- <Spinner />
- </div>;
- }
- } else {
+ } else if (!hierarchy.canLoadMore) {
results = <div className="mx_SpaceHierarchy_noResults">
<h3>{ _t("No results found") }</h3>
<div>{ _t("You may want to try a different search or check for typos.") }</div>
</div>;
}
+ let loader: JSX.Element;
+ if (hierarchy.canLoadMore) {
+ loader = <div ref={loaderRef}>
+ <Spinner />
+ </div>;
+ }
+
content = <>
<div className="mx_SpaceHierarchy_listHeader">
<h4>{ query.trim() ? _t("Results") : _t("Rooms and spaces") }</h4>
From e892984abd4e43028250b48cda5e8f9d536c1475 Mon Sep 17 00:00:00 2001
From: iaiz <git@iapellaniz.com>
Date: Tue, 28 Sep 2021 12:54:05 +0000
Subject: [PATCH 257/313] Translated using Weblate (Spanish)
Currently translated at 99.8% (3163 of 3168 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/es/
---
src/i18n/strings/es.json | 363 ++++++++++++++++++++-------------------
1 file changed, 184 insertions(+), 179 deletions(-)
diff --git a/src/i18n/strings/es.json b/src/i18n/strings/es.json
index a4761610a9..b88bd56886 100644
--- a/src/i18n/strings/es.json
+++ b/src/i18n/strings/es.json
@@ -2,7 +2,7 @@
"Account": "Cuenta",
"Admin": "Admin",
"Advanced": "Avanzado",
- "Always show message timestamps": "Siempre mostrar las marcas temporales de mensajes",
+ "Always show message timestamps": "Mostrar siempre la fecha y hora de envío junto a los mensajes",
"Authentication": "Autenticación",
"%(items)s and %(lastItem)s": "%(items)s y %(lastItem)s",
"and %(count)s others...|other": "y otros %(count)s…",
@@ -16,7 +16,7 @@
"Banned users": "Usuarios vetados",
"Bans user with given id": "Veta al usuario con la ID dada",
"Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. Either use HTTPS or <a>enable unsafe scripts</a>.": "No se ha podido conectar al servidor base a través de HTTP, cuando es necesario un enlace HTTPS en la barra de direcciones de tu navegador. Ya sea usando HTTPS o <a>activando los scripts inseguros</a>.",
- "Change Password": "Cambiar contraseña",
+ "Change Password": "Cambiar la contraseña",
"%(senderName)s changed the power level of %(powerLevelDiffText)s.": "%(senderName)s ha cambiado el nivel de acceso de %(powerLevelDiffText)s.",
"%(senderDisplayName)s changed the room name to %(roomName)s.": "%(senderDisplayName)s cambió el nombre de la sala a %(roomName)s.",
"%(senderDisplayName)s changed the topic to \"%(topic)s\".": "%(senderDisplayName)s cambió el tema a \"%(topic)s\".",
@@ -43,7 +43,7 @@
"Export E2E room keys": "Exportar claves de salas con cifrado de extremo a extremo",
"Failed to ban user": "Bloqueo del usuario falló",
"Failed to change password. Is your password correct?": "No se ha podido cambiar la contraseña. ¿Has escrito tu contraseña actual correctamente?",
- "Failed to change power level": "Falló al cambiar de nivel de acceso",
+ "Failed to change power level": "Fallo al cambiar de nivel de acceso",
"Failed to forget room %(errCode)s": "No se pudo olvidar la sala %(errCode)s",
"Failed to join room": "No se ha podido entrar a la sala",
"Failed to kick": "No se ha podido echar",
@@ -84,8 +84,8 @@
"Accept": "Aceptar",
"Add": "Añadir",
"Admin Tools": "Herramientas de administración",
- "No Microphones detected": "No se ha detectado un micrófono",
- "No Webcams detected": "No se ha detectado una cámara",
+ "No Microphones detected": "Micrófono no detectado",
+ "No Webcams detected": "Cámara no detectada",
"Default Device": "Dispositivo por defecto",
"Microphone": "Micrófono",
"Camera": "Cámara",
@@ -95,7 +95,7 @@
"Decline": "Rechazar",
"Enter passphrase": "Introducir frase de contraseña",
"Export": "Exportar",
- "Failed to upload profile picture!": "¡No se pudo subir la imagen de perfil!",
+ "Failed to upload profile picture!": "¡No se ha podido enviar la imagen de perfil!",
"Home": "Inicio",
"Import": "Importar",
"Incorrect username and/or password.": "Nombre de usuario y/o contraseña incorrectos.",
@@ -121,7 +121,7 @@
"File to import": "Fichero a importar",
"You must join the room to see its files": "Debes unirte a la sala para ver sus archivos",
"Reject all %(invitedRooms)s invites": "Rechazar todas las invitaciones a %(invitedRooms)s",
- "Failed to invite": "No se pudo invitar",
+ "Failed to invite": "No se ha podido invitar",
"Unknown error": "Error desconocido",
"Incorrect password": "Contraseña incorrecta",
"Unable to restore session": "No se puede recuperar la sesión",
@@ -187,7 +187,7 @@
"%(brand)s was not given permission to send notifications - please try again": "No le has dado permiso a %(brand)s para enviar notificaciones. Por favor, inténtalo de nuevo",
"%(brand)s version:": "Versión de %(brand)s:",
"Room %(roomId)s not visible": "La sala %(roomId)s no es visible",
- "Show timestamps in 12 hour format (e.g. 2:30pm)": "Mostrar marcas temporales en formato de 12 horas (ej. 2:30pm)",
+ "Show timestamps in 12 hour format (e.g. 2:30pm)": "Mostrar las horas con el modelo de 12 horas (ej.: 2:30pm)",
"This email address is already in use": "Esta dirección de correo electrónico ya está en uso",
"This email address was not found": "No se ha encontrado la dirección de correo electrónico",
"The email address linked to your account must be entered.": "Debes ingresar la dirección de correo electrónico vinculada a tu cuenta.",
@@ -196,7 +196,7 @@
"This doesn't appear to be a valid email address": "Esto no parece un e-mail váido",
"This phone number is already in use": "Este número de teléfono ya está en uso",
"This room": "Esta sala",
- "This room is not accessible by remote Matrix servers": "Esta sala no es accesible por otros servidores Matrix",
+ "This room is not accessible by remote Matrix servers": "Esta sala no es accesible desde otros servidores de Matrix",
"Cancel": "Cancelar",
"Dismiss": "Omitir",
"powered by Matrix": "con el poder de Matrix",
@@ -221,10 +221,10 @@
"Uploading %(filename)s and %(count)s others|zero": "Subiendo %(filename)s",
"Uploading %(filename)s and %(count)s others|one": "Subiendo %(filename)s y otros %(count)s",
"Uploading %(filename)s and %(count)s others|other": "Subiendo %(filename)s y otros %(count)s",
- "Upload avatar": "Subir avatar",
+ "Upload avatar": "Adjuntar avatar",
"Upload Failed": "Subida fallida",
- "Upload file": "Subir archivo",
- "Upload new:": "Subir nuevo:",
+ "Upload file": "Enviar un archivo",
+ "Upload new:": "Enviar uno nuevo:",
"Usage": "Uso",
"Users": "Usuarios",
"Verification Pending": "Verificación Pendiente",
@@ -237,7 +237,7 @@
"You are not in this room.": "No estás en esta sala.",
"You do not have permission to do that in this room.": "No tienes permiso para realizar esa acción en esta sala.",
"You cannot place a call with yourself.": "No puedes llamarte a ti mismo.",
- "Publish this room to the public in %(domain)s's room directory?": "¿Quieres que la sala aparezca en el directorio de salas de %(domain)s?",
+ "Publish this room to the public in %(domain)s's room directory?": "¿Quieres incluir esta sala en la lista pública de salas de %(domain)s?",
"AM": "AM",
"PM": "PM",
"Unmute": "Dejar de silenciar",
@@ -247,7 +247,7 @@
"You have <a>disabled</a> URL previews by default.": "Has <a>desactivado</a> la vista previa de URLs por defecto.",
"You have <a>enabled</a> URL previews by default.": "Has <a>activado</a> las vista previa de URLs por defecto.",
"You must <a>register</a> to use this functionality": "<a>Regístrate</a> para usar esta funcionalidad",
- "You need to be able to invite users to do that.": "Debes ser capaz de invitar usuarios para realizar esa acción.",
+ "You need to be able to invite users to do that.": "Debes tener permisos para invitar usuarios para hacer eso.",
"You need to be logged in.": "Necesitas haber iniciado sesión.",
"Your email address does not appear to be associated with a Matrix ID on this Homeserver.": "Tu dirección de correo electrónico no parece estar asociada a una ID de Matrix en este servidor base.",
"You seem to be in a call, are you sure you want to quit?": "Parece estar en medio de una llamada, ¿esta seguro que desea salir?",
@@ -260,20 +260,20 @@
"Thu": "jue.",
"Fri": "vie.",
"Sat": "sáb.",
- "Jan": "Ene",
- "Feb": "Feb",
- "Mar": "Mar",
- "Apr": "Abr",
- "May": "May",
- "Jun": "Jun",
- "Jul": "Jul",
- "Aug": "Ago",
+ "Jan": "en.",
+ "Feb": "febr.",
+ "Mar": "mzo.",
+ "Apr": "abr.",
+ "May": "my.",
+ "Jun": "jun.",
+ "Jul": "jul.",
+ "Aug": "ag.",
"Add rooms to this community": "Añadir salas a esta comunidad",
"Call Failed": "Llamada fallida",
- "Sep": "Sep",
- "Oct": "Oct",
- "Nov": "Nov",
- "Dec": "Dic",
+ "Sep": "sept.",
+ "Oct": "oct.",
+ "Nov": "nov.",
+ "Dec": "dic.",
"Warning": "Advertencia",
"Online": "En línea",
"Submit debug logs": "Enviar registros de depuración",
@@ -354,7 +354,7 @@
"You cannot delete this message. (%(code)s)": "No puedes eliminar este mensaje. (%(code)s)",
"Thursday": "Jueves",
"Logs sent": "Registros enviados",
- "Back": "Atrás",
+ "Back": "Volver",
"Reply": "Responder",
"Show message in desktop notification": "Mostrar mensaje en las notificaciones de escritorio",
"Unable to join network": "No se puede unir a la red",
@@ -384,7 +384,7 @@
"You do not have permission to start a conference call in this room": "No tienes permiso para iniciar una llamada de conferencia en esta sala",
"%(weekDayName)s %(time)s": "%(weekDayName)s a las %(time)s",
"%(weekDayName)s, %(monthName)s %(day)s %(time)s": "%(weekDayName)s %(day)s de %(monthName)s a las %(time)s",
- "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s": "%(weekDayName)s %(day)s de %(monthName)s del %(fullYear)s",
+ "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s": "%(weekDayName)s %(day)s de %(monthName)s de %(fullYear)s",
"%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s": "%(weekDayName)s %(day)s de %(monthName)s del %(fullYear)s a las %(time)s",
"Show these rooms to non-members on the community page and room list?": "¿Mostrar estas salas a los que no son miembros en la página de la comunidad y la lista de salas?",
"Add rooms to the community": "Añadir salas a la comunidad",
@@ -409,17 +409,17 @@
"Your browser does not support the required cryptography extensions": "Su navegador no soporta las extensiones de criptografía requeridas",
"Not a valid %(brand)s keyfile": "No es un archivo de claves de %(brand)s válido",
"Message Pinning": "Mensajes anclados",
- "Automatically replace plain text Emoji": "Reemplazar automáticamente texto por Emojis",
- "Mirror local video feed": "Invertir horizontalmente el vídeo local (espejo)",
- "Send analytics data": "Enviar datos de análisis de estadísticas",
- "Enable inline URL previews by default": "Activar vistas previas de URLs en línea por defecto",
- "Enable URL previews for this room (only affects you)": "Activar vista previa de URLs en esta sala (solo para ti)",
- "Enable URL previews by default for participants in this room": "Activar vista previa de URLs por defecto para los participantes en esta sala",
+ "Automatically replace plain text Emoji": "Sustituir automáticamente caritas de texto por sus emojis equivalentes",
+ "Mirror local video feed": "Invertir el vídeo local horizontalmente (espejo)",
+ "Send analytics data": "Enviar datos estadísticos de uso",
+ "Enable inline URL previews by default": "Activar la vista previa de URLs en línea por defecto",
+ "Enable URL previews for this room (only affects you)": "Activar la vista previa de URLs en esta sala (solo para ti)",
+ "Enable URL previews by default for participants in this room": "Activar la vista previa de URLs por defecto para los participantes de esta sala",
"Enable widget screenshots on supported widgets": "Activar capturas de pantalla de widget en los widgets soportados",
- "Drop file here to upload": "Soltar aquí el fichero a subir",
- "This event could not be displayed": "No se pudo mostrar este evento",
+ "Drop file here to upload": "Suelta aquí el archivo para enviarlo",
+ "This event could not be displayed": "No se ha podido mostrar este evento",
"Key request sent.": "Solicitud de clave enviada.",
- "Disinvite this user?": "¿Dejar de invitar a este usuario?",
+ "Disinvite this user?": "¿Borrar la invitación a este usuario?",
"Kick this user?": "¿Echar a este usuario?",
"Unban this user?": "¿Quitarle el veto a este usuario?",
"Ban this user?": "¿Vetar a este usuario?",
@@ -450,7 +450,7 @@
"Replying": "Respondiendo",
"(~%(count)s results)|other": "(~%(count)s resultados)",
"(~%(count)s results)|one": "(~%(count)s resultado)",
- "Share room": "Compartir sala",
+ "Share room": "Compartir la sala",
"Banned by %(displayName)s": "Vetado por %(displayName)s",
"Muted Users": "Usuarios silenciados",
"Members only (since the point in time of selecting this option)": "Solo participantes (desde el momento en que se selecciona esta opción)",
@@ -558,7 +558,7 @@
"%(oneUser)schanged their avatar %(count)s times|one": "%(oneUser)s cambió su avatar",
"%(items)s and %(count)s others|other": "%(items)s y otros %(count)s",
"%(items)s and %(count)s others|one": "%(items)s y otro más",
- "collapse": "colapsar",
+ "collapse": "encoger",
"expand": "expandir",
"Unable to load event that was replied to, it either does not exist or you do not have permission to view it.": "No se pudo cargar el evento al que se respondió, bien porque no existe o no tiene permiso para verlo.",
"<a>In reply to</a> <pill>": "<a>Respondiendo a </a> <pill>",
@@ -571,7 +571,7 @@
"Confirm Removal": "Confirmar eliminación",
"Are you sure you wish to remove (delete) this event? Note that if you delete a room name or topic change, it could undo the change.": "¿Seguro que quieres eliminar este evento? Ten en cuenta que, si borras un cambio de nombre o asunto de sala, podrías deshacer el cambio.",
"Community IDs cannot be empty.": "Las IDs de comunidad no pueden estar vacías.",
- "Community IDs may only contain characters a-z, 0-9, or '=_-./'": "Las IDs de comunidad solo pueden contener caracteres de la «a» a la «z» excluyendo la «ñ», dígitos o «=_-./»",
+ "Community IDs may only contain characters a-z, 0-9, or '=_-./'": "Las IDs de comunidad solo pueden contener caracteres sin acento de la «a» a la «z» (quitando la «ñ»), dígitos o los caracteres «=_-./»",
"Something went wrong whilst creating your community": "Algo fue mal mientras se creaba la comunidad",
"Create Community": "Crear Comunidad",
"Community Name": "Nombre de Comunidad",
@@ -590,15 +590,15 @@
"We encountered an error trying to restore your previous session.": "Encontramos un error al intentar restaurar su sesión anterior.",
"If you have previously used a more recent version of %(brand)s, your session may be incompatible with this version. Close this window and return to the more recent version.": "Si ha usado anteriormente una versión más reciente de %(brand)s, su sesión puede ser incompatible con ésta. Cierre la ventana y vuelva a la versión más reciente.",
"Clearing your browser's storage may fix the problem, but will sign you out and cause any encrypted chat history to become unreadable.": "Limpiando el almacenamiento del navegador puede arreglar el problema, pero le desconectará y cualquier historial de conversación cifrado se volverá ilegible.",
- "Share Room": "Compartir sala",
- "Link to most recent message": "Enlazar a mensaje más reciente",
+ "Share Room": "Compartir la sala",
+ "Link to most recent message": "Enlazar al mensaje más reciente",
"Share User": "Compartir usuario",
"Share Community": "Compartir Comunidad",
- "Share Room Message": "Compartir el mensaje de la sala",
- "Link to selected message": "Enlazar a mensaje seleccionado",
+ "Share Room Message": "Compartir un mensaje de esta sala",
+ "Link to selected message": "Enlazar al mensaje seleccionado",
"Unable to reject invite": "No se pudo rechazar la invitación",
"Add rooms to the community summary": "Añadir salas al resumen de la comunidad",
- "Which rooms would you like to add to this summary?": "¿Cuáles salas quieres añadir a este resumen?",
+ "Which rooms would you like to add to this summary?": "¿Qué salas quieres añadir al resumen?",
"Add to summary": "Añadir al resumen",
"Failed to add the following rooms to the summary of %(groupId)s:": "Falló la agregación de las salas siguientes al resumen de %(groupId)s:",
"Add a Room": "Añadir una sala",
@@ -652,11 +652,11 @@
"Sent messages will be stored until your connection has returned.": "Los mensajes enviados se almacenarán hasta que vuelva la conexión.",
"Room": "Sala",
"Clear filter": "Borrar filtro",
- "%(brand)s collects anonymous analytics to allow us to improve the application.": "%(brand)s recopila análisis de estadísticas anónimas para permitirnos mejorar la aplicación.",
- "Privacy is important to us, so we don't collect any personal or identifiable data for our analytics.": "La privacidad es importante para nosotros, por lo que no se recopila información personal o identificable en los análisis de estadísticas.",
+ "%(brand)s collects anonymous analytics to allow us to improve the application.": "%(brand)s recoge información sobre cómo usas la aplicación para ayudarnos a mejorarla.",
+ "Privacy is important to us, so we don't collect any personal or identifiable data for our analytics.": "La privacidad nos importa, por lo que incluimos tus datos personales o que te puedan identificar para en las estadísticas.",
"Learn more about how we use analytics.": "Más información sobre el uso de los análisis de estadísticas.",
"Check for update": "Comprobar actualizaciones",
- "Start automatically after system login": "Ejecutar automáticamente después de iniciar sesión en el sistema",
+ "Start automatically after system login": "Abrir automáticamente después de iniciar sesión en el sistema",
"No Audio Outputs detected": "No se han detectado salidas de sonido",
"Audio Output": "Salida de sonido",
"An email has been sent to %(emailAddress)s. Once you've followed the link it contains, click below.": "Se envió un correo electrónico a %(emailAddress)s. Una vez hayas seguido el enlace que contiene, haz clic a continuación.",
@@ -759,15 +759,15 @@
"Custom user status messages": "Mensajes de estado de usuario personalizados",
"Group & filter rooms by custom tags (refresh to apply changes)": "Agrupa y filtra salas por etiquetas personalizadas (refresca para aplicar cambios)",
"Render simple counters in room header": "Muestra contadores simples en la cabecera de la sala",
- "Enable Emoji suggestions while typing": "Activar sugerencias de emojis al escribir",
- "Show a placeholder for removed messages": "Mostrar una marca para los mensaje borrados",
+ "Enable Emoji suggestions while typing": "Sugerir emojis mientras escribes",
+ "Show a placeholder for removed messages": "Dejar un indicador cuando se borre un mensaje",
"Show join/leave messages (invites/kicks/bans unaffected)": "Mostrar mensajes de entrada/salida (no afecta a invitaciones/expulsiones/baneos)",
"Show avatar changes": "Mostrar cambios de avatar",
"Show display name changes": "Muestra cambios en los nombres",
"Show avatars in user and room mentions": "Mostrar avatares en menciones a usuarios y salas",
"Enable big emoji in chat": "Activar emojis grandes en el chat",
"Send typing notifications": "Enviar notificaciones de tecleo",
- "Prompt before sending invites to potentially invalid matrix IDs": "Pedir confirmación antes de enviar invitaciones a IDs de matrix que parezcan inválidas",
+ "Prompt before sending invites to potentially invalid matrix IDs": "Preguntarme antes de enviar invitaciones a IDs de matrix que no parezcan válidas",
"Show developer tools": "Mostrar herramientas de desarrollo",
"Messages containing my username": "Mensajes que contengan mi nombre",
"Messages containing @room": "Mensajes que contengan @room",
@@ -845,12 +845,12 @@
"No": "No",
"We've sent you an email to verify your address. Please follow the instructions there and then click the button below.": "Te hemos enviado un mensaje para verificar tu dirección de correo. Por favor, sigue las instrucciones y después haz clic el botón de abajo.",
"Email Address": "Dirección de correo",
- "Delete Backup": "Borrar copia",
+ "Delete Backup": "Borrar copia de seguridad",
"Are you sure? You will lose your encrypted messages if your keys are not backed up properly.": "¿Estás seguro? Perderás tus mensajes cifrados si las claves no se copian adecuadamente.",
"Encrypted messages are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.": "Los mensajes cifrados son seguros con el cifrado punto a punto. Solo tú y el/los destinatario/s tiene/n las claves para leer estos mensajes.",
"Unable to load key backup status": "No se pudo cargar el estado de la copia de la clave",
- "Restore from Backup": "Restaurar desde copia",
- "Back up your keys before signing out to avoid losing them.": "Haz copia de tus claves antes de salir para evitar perderlas.",
+ "Restore from Backup": "Restaurar una copia de seguridad",
+ "Back up your keys before signing out to avoid losing them.": "Haz copia de seguridad de tus claves antes de cerrar sesión para evitar perderlas.",
"Backing up %(sessionsRemaining)s keys...": "Haciendo copia de %(sessionsRemaining)s claves…",
"All keys backed up": "Se han copiado todas las claves",
"Start using Key Backup": "Comenzar a usar la copia de claves",
@@ -858,12 +858,12 @@
"Verification code": "Código de verificación",
"Phone Number": "Número de teléfono",
"Profile picture": "Foto de perfil",
- "Display Name": "Nombre a mostrar",
+ "Display Name": "Nombre público",
"Internal room ID:": "ID de sala Interna:",
"Open Devtools": "Abrir devtools",
"General": "General",
- "Room Addresses": "Direcciones de sala",
- "Set a new account password...": "Cambiar la contraseña de tu cuenta…",
+ "Room Addresses": "Direcciones de la sala",
+ "Set a new account password...": "Cambia la contraseña de tu cuenta…",
"Account management": "Gestión de la cuenta",
"Deactivating your account is a permanent action - be careful!": "Desactivar tu cuenta es permanente. ¡Cuidado!",
"Credits": "Créditos",
@@ -881,7 +881,7 @@
"Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.": "Los cambios que se hagan sobre quién puede leer el historial se aplicarán solo a nuevos mensajes. La visibilidad del historial actual no cambiará.",
"Security & Privacy": "Seguridad y privacidad",
"Encryption": "Cifrado",
- "Once enabled, encryption cannot be disabled.": "Una vez activado, el cifrado no se puede desactivar.",
+ "Once enabled, encryption cannot be disabled.": "Una vez actives el cifrado ya no podrás desactivarlo.",
"Encrypted": "Cifrado",
"Ignored users": "Usuarios ignorados",
"Bulk options": "Opciones generales",
@@ -896,13 +896,13 @@
"That doesn't look like a valid email address": "No parece ser una dirección de correo válida",
"The following users may not exist": "Puede que estos usuarios no existan",
"Unable to find profiles for the Matrix IDs listed below - would you like to invite them anyway?": "No se pudieron encontrar perfiles para los IDs Matrix listados a continuación, ¿Quieres invitarles igualmente?",
- "Invite anyway and never warn me again": "Invitar igualmente y no preguntarme más",
+ "Invite anyway and never warn me again": "Invitar igualmente, y no preguntar más en el futuro",
"Invite anyway": "Invitar igualmente",
"Before submitting logs, you must <a>create a GitHub issue</a> to describe your problem.": "Antes de enviar logs, debes <a>crear un GitHub issue</a> para describir el problema.",
"Unable to load commit detail: %(msg)s": "No se pudo cargar el detalle del commit: %(msg)s",
"To avoid losing your chat history, you must export your room keys before logging out. You will need to go back to the newer version of %(brand)s to do this": "Para evitar perder tu historial de chat, debes exportar las claves de la sala antes de salir. Debes volver a la versión actual de %(brand)s para esto",
"Incompatible Database": "Base de datos incompatible",
- "Continue With Encryption Disabled": "Seguir con cifrado desactivado",
+ "Continue With Encryption Disabled": "Seguir con el cifrado desactivado",
"Verify this user to mark them as trusted. Trusting users gives you extra peace of mind when using end-to-end encrypted messages.": "Verifica a este usuario para marcarlo como de confianza. Confiar en usuarios aporta tranquilidad en los mensajes cifrados de extremo a extremo.",
"Waiting for partner to confirm...": "Esperando que confirme la otra parte…",
"Incoming Verification Request": "Petición de verificación entrante",
@@ -915,7 +915,7 @@
"Whether or not you're logged in (we don't record your username)": "Si has iniciado sesión o no (no guardamos tu nombre de usuario)",
"Whether or not you're using the 'breadcrumbs' feature (avatars above the room list)": "Si estás usando o no las «migas de pan» (iconos sobre la lista de salas)",
"Replying With Files": "Respondiendo con archivos",
- "At this time it is not possible to reply with a file. Would you like to upload this file without replying?": "En este momento no es posible responder con un archivo. ¿Te gustaría subir el archivo sin responder?",
+ "At this time it is not possible to reply with a file. Would you like to upload this file without replying?": "Todavía no es posible responder incluyendo un archivo. ¿Quieres enviar el archivo sin responder directamente?",
"The file '%(fileName)s' failed to upload.": "La subida del archivo «%(fileName)s ha fallado.",
"The server does not support the room version specified.": "El servidor no soporta la versión de sala especificada.",
"Name or Matrix ID": "Nombre o ID de Matrix",
@@ -960,7 +960,7 @@
"Changes the avatar of the current room": "Cambia la imagen de la sala actual",
"Use an identity server": "Usar un servidor de identidad",
"Use an identity server to invite by email. Click continue to use the default identity server (%(defaultIdentityServerName)s) or manage in Settings.": "Usar un servidor de identidad para invitar por correo. Presiona continuar par usar el servidor de identidad por defecto (%(defaultIdentityServerName)s) o adminístralo en Ajustes.",
- "Use an identity server to invite by email. Manage in Settings.": "Usar un servidor de identidad para invitar por correo. Gestiónalo en ajustes.",
+ "Use an identity server to invite by email. Manage in Settings.": "Usa un servidor de identidad para invitar por correo. Puedes configurarlo en tus ajustes.",
"Adds a custom widget by URL to the room": "Añade un widget personalizado por URL a la sala",
"Please supply a https:// or http:// widget URL": "Por favor provisiona un URL de widget de http:// o https://",
"You cannot modify widgets in this room.": "No puedes modificar widgets en esta sala.",
@@ -1023,13 +1023,13 @@
"Upgrade": "Actualizar",
"Verify": "Verificar",
"Later": "Más tarde",
- "Upload": "Subir",
- "Show less": "Mostrar menos",
- "Show more": "Mostrar más",
+ "Upload": "Enviar",
+ "Show less": "Ver menos",
+ "Show more": "Ver más",
"Changing password will currently reset any end-to-end encryption keys on all sessions, making encrypted chat history unreadable, unless you first export your room keys and re-import them afterwards. In future this will be improved.": "Cambiar la contraseña reiniciará cualquier clave de cifrado end-to-end en todas las sesiones, haciendo el historial de conversaciones encriptado ilegible, a no ser que primero exportes tus claves de sala y después las reimportes. En un futuro esto será mejorado.",
"in memory": "en memoria",
"not found": "no encontrado",
- "You are currently using <server></server> to discover and be discoverable by existing contacts you know. You can change your identity server below.": "Estás usando actualmente <server></server>para descubrir y ser descubierto por contactos existentes que conoces. Puedes cambiar tu servidor de identidad más abajo.",
+ "You are currently using <server></server> to discover and be discoverable by existing contacts you know. You can change your identity server below.": "Estás usando actualmente <server></server> para descubrir y ser descubierto por contactos existentes que conoces. Puedes cambiar tu servidor de identidad más abajo.",
"If you don't want to use <server /> to discover and be discoverable by existing contacts you know, enter another identity server below.": "Si no quieres usar <server /> para descubrir y ser descubierto por contactos existentes que conoces, introduce otro servidor de identidad más abajo.",
"You are not currently using an identity server. To discover and be discoverable by existing contacts you know, add one below.": "No estás usando un servidor de identidad ahora mismo. Para descubrir y ser descubierto por contactos existentes que conoces, introduce uno más abajo.",
"Disconnecting from your identity server will mean you won't be discoverable by other users and you won't be able to invite others by email or phone.": "Desconectarte de tu servidor de identidad significa que no podrás ser descubierto por otros usuarios y no podrás invitar a otros por email o teléfono.",
@@ -1038,7 +1038,7 @@
"Enter a new identity server": "Introducir un servidor de identidad nuevo",
"Change": "Cambiar",
"Manage integrations": "Gestor de integraciones",
- "Something went wrong trying to invite the users.": "Algo salió mal al intentar invitar a los usuarios.",
+ "Something went wrong trying to invite the users.": "Algo ha salido mal al intentar invitar a los usuarios.",
"We couldn't invite those users. Please check the users you want to invite and try again.": "No se pudo invitar a esos usuarios. Por favor, revisa los usuarios que quieres invitar e inténtalo de nuevo.",
"Failed to find the following users": "No se encontró a los siguientes usuarios",
"The following users might not exist or are invalid, and cannot be invited: %(csvNames)s": "Puede que los siguientes usuarios no existan o sean inválidos, y no pueden ser invitados: %(csvNames)s",
@@ -1079,14 +1079,14 @@
"Summary": "Resumen",
"Document": "Documento",
"Next": "Siguiente",
- "Upload files (%(current)s of %(total)s)": "Subir archivos (%(current)s de %(total)s)",
- "Upload files": "Subir archivos",
- "Upload all": "Subir todo",
- "This file is <b>too large</b> to upload. The file size limit is %(limit)s but this file is %(sizeOfThisFile)s.": "Este archivo es <b> demasiado grande</b> para subirse. El limite de tamaño de archivo es %(limit)s pero el archivo es %(sizeOfThisFile)s.",
+ "Upload files (%(current)s of %(total)s)": "Enviar archivos (%(current)s de %(total)s)",
+ "Upload files": "Enviar archivos",
+ "Upload all": "Enviar todo",
+ "This file is <b>too large</b> to upload. The file size limit is %(limit)s but this file is %(sizeOfThisFile)s.": "Este archivo es <b>demasiado grande</b> para enviarse. El tamaño máximo es %(limit)s pero el archivo pesa %(sizeOfThisFile)s.",
"These files are <b>too large</b> to upload. The file size limit is %(limit)s.": "Estos archivos son <b> demasiado grandes</b> para ser subidos. El límite de tamaño de archivos es %(limit)s.",
"Some files are <b>too large</b> to be uploaded. The file size limit is %(limit)s.": "Algunos archivos son <b> demasiado grandes</b> para ser subidos. El límite de tamaño de archivos es %(limit)s.",
- "Upload %(count)s other files|other": "Subir %(count)s otros archivos",
- "Upload %(count)s other files|one": "Subir %(count)s otro archivo",
+ "Upload %(count)s other files|other": "Enviar otros %(count)s archivos",
+ "Upload %(count)s other files|one": "Enviar %(count)s archivo más",
"Cancel All": "Cancelar todo",
"Upload Error": "Error de subida",
"Remember my selection for this widget": "Recordar mi selección para este widget",
@@ -1140,7 +1140,7 @@
"%(num)s hours from now": "dentro de %(num)s horas",
"about a day from now": "dentro de un día",
"%(num)s days from now": "dentro de %(num)s días",
- "Show typing notifications": "Mostrar notificaciones de escritura",
+ "Show typing notifications": "Mostrar un indicador cuando alguien más esté escribiendo en la sala",
"Never send encrypted messages to unverified sessions from this session": "No enviar nunca mensajes cifrados a sesiones sin verificar desde esta sesión",
"Never send encrypted messages to unverified sessions in this room from this session": "No enviar nunca mensajes cifrados a sesiones sin verificar en esta sala desde esta sesión",
"Enable message search in encrypted rooms": "Activar la búsqueda de mensajes en salas cifradas",
@@ -1168,17 +1168,17 @@
"this room": "esta sala",
"View older messages in %(roomName)s.": "Ver mensajes más antiguos en %(roomName)s.",
"Sounds": "Sonidos",
- "Notification sound": "Sonido de notificación",
+ "Notification sound": "Sonido para las notificaciones",
"Set a new custom sound": "Usar un nuevo sonido personalizado",
"Browse": "Seleccionar",
- "Change room avatar": "Cambiar avatar de sala",
- "Change room name": "Cambiar nombre de sala",
- "Change main address for the room": "Cambiar la dirección principal para la sala",
- "Change history visibility": "Cambiar visibilidad del historial",
- "Change permissions": "Cambiar permisos",
- "Change topic": "Cambiar tema",
+ "Change room avatar": "Cambiar el avatar de la sala",
+ "Change room name": "Cambiar el nombre de sala",
+ "Change main address for the room": "Cambiar la dirección principal de la sala",
+ "Change history visibility": "Cambiar la visibilidad del historial",
+ "Change permissions": "Cambiar los permisos",
+ "Change topic": "Cambiar el tema",
"Upgrade the room": "Actualizar la sala",
- "Enable room encryption": "Activar el cifrado de sala",
+ "Enable room encryption": "Activar cifrado para la sala",
"Modify widgets": "Modificar widgets",
"Error changing power level requirement": "Error al cambiar el requerimiento de nivel de poder",
"An error occurred changing the room's power level requirements. Ensure you have sufficient permissions and try again.": "Ocurrió un error cambiando los requerimientos de nivel de poder de la sala. Asegúrate de tener los permisos suficientes e inténtalo de nuevo.",
@@ -1189,10 +1189,10 @@
"Invite users": "Invitar usuarios",
"Change settings": "Cambiar la configuración",
"Kick users": "Echar usuarios",
- "Ban users": "Bloquear a usuarios",
- "Notify everyone": "Notificar a todos",
+ "Ban users": "Vetar usuarios",
+ "Notify everyone": "Notificar a todo el mundo",
"Send %(eventType)s events": "Enviar eventos %(eventType)s",
- "Select the roles required to change various parts of the room": "Selecciona los roles requeridos para cambiar varias partes de la sala",
+ "Select the roles required to change various parts of the room": "Elige los roles que los usuarios deben tener para poder cambiar los distintos ajustes de la sala",
"Enable encryption?": "¿Activar cifrado?",
"Your email address hasn't been verified yet": "Tu dirección de email no ha sido verificada",
"Verify the link in your inbox": "Verifica el enlace en tu bandeja de entrada",
@@ -1206,7 +1206,7 @@
"Enable desktop notifications for this session": "Activa las notificaciones de escritorio para esta sesión",
"Enable audible notifications for this session": "Activar notificaciones sonoras para esta sesión",
"Checking server": "Comprobando servidor",
- "Change identity server": "Cambiar servidor de identidad",
+ "Change identity server": "Cambiar el servidor de identidad",
"Disconnect from the identity server <current /> and connect to <new /> instead?": "¿Desconectarse del servidor de identidad <current /> y conectarse a <new/>?",
"Terms of service not accepted or the identity server is invalid.": "Términos de servicio no aceptados o el servidor de identidad es inválido.",
"The identity server you have chosen does not have any terms of service.": "El servidor de identidad que has elegido no tiene ningún término de servicio.",
@@ -1255,11 +1255,11 @@
"Interactively verify by Emoji": "Verificar interactivamente con emojis",
"Done": "Listo",
"Support adding custom themes": "Soporta la adición de temas personalizados",
- "Show info about bridges in room settings": "Mostrar información sobre puentes en la configuración de salas",
+ "Show info about bridges in room settings": "Incluir información sobre puentes en la configuración de las salas",
"Order rooms by name": "Ordenar las salas por nombre",
- "Show rooms with unread notifications first": "Mostrar primero las salas con notificaciones no leídas",
- "Show shortcuts to recently viewed rooms above the room list": "Mostrar atajos a las salas recientemente vistas por encima de la lista de salas",
- "Allow fallback call assist server turn.matrix.org when your homeserver does not offer one (your IP address would be shared during a call)": "Permitir el servidor de respaldo de asistencia de llamadas turn.matrix.org cuando tu servidor base no lo ofrezca (tu dirección IP se compartiría durante una llamada)",
+ "Show rooms with unread notifications first": "Colocar primero las salas con notificaciones no leídas",
+ "Show shortcuts to recently viewed rooms above the room list": "Incluir encima de la lista de salas unos atajos a las últimas salas que hayas visto",
+ "Allow fallback call assist server turn.matrix.org when your homeserver does not offer one (your IP address would be shared during a call)": "Permitir el servidor de respaldo de asistencia de llamadas turn.matrix.org cuando tu servidor base no lo ofrezca (tu dirección IP se compartirá durante las llamadas)",
"Manually verify all remote sessions": "Verificar manualmente todas las sesiones remotas",
"Confirm the emoji below are displayed on both sessions, in the same order:": "Confirma que los emojis de abajo son los mismos y tienen el mismo orden en los dos sitios:",
"Verify this session by confirming the following number appears on its screen.": "Verifica esta sesión confirmando que el siguiente número aparece en su pantalla.",
@@ -1278,7 +1278,7 @@
"cached locally": "almacenado localmente",
"not found locally": "no encontrado localmente",
"User signing private key:": "Usuario firmando llave privada:",
- "Homeserver feature support:": "Características apoyadas por servidor local:",
+ "Homeserver feature support:": "Características compatibles con tu servidor base:",
"exists": "existe",
"Your homeserver does not support session management.": "Su servidor local no soporta la gestión de sesiones.",
"Confirm deleting these sessions by using Single Sign On to prove your identity.|other": "Confirme eliminar estas sesiones, probando su identidad con el Registro Único.",
@@ -1293,9 +1293,9 @@
"%(brand)s is missing some components required for securely caching encrypted messages locally. If you'd like to experiment with this feature, build a custom %(brand)s Desktop with <nativeLink>search components added</nativeLink>.": "A %(brand)s le faltan algunos componentes necesarios para el almacenamiento seguro de mensajes cifrados a nivel local. Si quieres experimentar con esta característica, construye un Escritorio %(brand)s personalizado con <nativeLink> componentes de búsqueda añadidos</nativeLink>.",
"This session is <b>not backing up your keys</b>, but you do have an existing backup you can restore from and add to going forward.": "Esta sesión no <b> ha creado una copia de seguridad de tus llaves</b>, pero tienes una copia de seguridad existente de la que puedes restaurar y añadir para proceder.",
"Connect this session to key backup before signing out to avoid losing any keys that may only be on this session.": "Conecte esta sesión a la copia de seguridad de las claves antes de firmar y así evitar perder las claves que sólo existen en esta sesión.",
- "Connect this session to Key Backup": "Conecte esta sesión a la copia de respaldo de tu clave",
+ "Connect this session to Key Backup": "Conecta esta sesión a la copia de respaldo de tu clave",
"Backup has a <validity>valid</validity> signature from this user": "La copia de seguridad tiene una firma <validity>válida</validity> de este usuario",
- "Backup has a <validity>invalid</validity> signature from this user": "La copia de seguridad tiene una firma <validity>inválida</validity> de este usuario",
+ "Backup has a <validity>invalid</validity> signature from this user": "La copia de seguridad tiene una firma <validity>no válida</validity> de este usuario",
"Backup has a signature from <verify>unknown</verify> user with ID %(deviceId)s": "La copia de seguridad tiene una firma <verify>desconocida</verify> del usuario con ID %(deviceId)s",
"Backup has a signature from <verify>unknown</verify> session with ID %(deviceId)s": "La copia de seguridad tiene una firma de <verify>desconocido</verify> de la sesión con ID %(deviceId)s",
"Backup has a <validity>valid</validity> signature from this session": "La copia de seguridad tiene una firma <validity>válida</validity> de esta sesión",
@@ -1331,7 +1331,7 @@
"If this isn't what you want, please use a different tool to ignore users.": "Si esto no es lo que quieres, por favor usa una herramienta diferente para ignorar usuarios.",
"Subscribe": "Suscribir",
"Always show the window menu bar": "Siempre mostrar la barra de menú de la ventana",
- "Show tray icon and minimize window to it on close": "Mostrar el icono en el Área de Notificación y minimizar la ventana al cerrarla",
+ "Show tray icon and minimize window to it on close": "Mostrar un icono en el área de notificaciones y guardar la ventana minimizada ahí al cerrarla",
"Composer": "Editor",
"Timeline": "Línea de tiempo",
"Read Marker lifetime (ms)": "Permanencia del marcador de lectura (en ms)",
@@ -1342,7 +1342,7 @@
"Cross-signing": "Firma cruzada",
"Where you’re logged in": "Sesiones",
"Manage the names of and sign out of your sessions below or <a>verify them in your User Profile</a>.": "Gestiona los nombres de sus sesiones y ciérralas abajo o <a>verifícalas en tu perfil de usuario</a>.",
- "A session's public name is visible to people you communicate with": "El nombre público de una sesión es visible para las personas con las que te comunicas",
+ "A session's public name is visible to people you communicate with": "El nombre público de tus sesiones lo puede ver cualquiera con quien te comuniques",
"This room is bridging messages to the following platforms. <a>Learn more.</a>": "Esta sala está haciendo puente con las siguientes plataformas. <a>Aprende más.</a>",
"This room isn’t bridging messages to any platforms. <a>Learn more.</a>": "Esta sala no está haciendo puente con ninguna plataforma. <a>Aprende más</a>",
"Bridges": "Puentes",
@@ -1355,7 +1355,7 @@
"Discovery options will appear once you have added an email above.": "Las opciones de descubrimiento aparecerán una vez que haya añadido un correo electrónico arriba.",
"Unable to revoke sharing for phone number": "No se logró revocar el intercambio de un número de teléfono",
"Unable to share phone number": "No se logró compartir el número de teléfono",
- "Please enter verification code sent via text.": "Por favor, introduce el código de verificación enviado por SMS.",
+ "Please enter verification code sent via text.": "Por favor, escribe el código de verificación que te hemos enviado por SMS.",
"Discovery options will appear once you have added a phone number above.": "Las opciones de descubrimiento aparecerán una vez que haya añadido un número de teléfono arriba.",
"Remove %(phone)s?": "¿Eliminar %(phone)s?",
"A text message has been sent to +%(msisdn)s. Please enter the verification code it contains.": "Se ha enviado un mensaje de texto a +%(msisdn)s. Por favor, escribe el código de verificación que contiene.",
@@ -1380,21 +1380,21 @@
"e.g. my-room": "p.ej. mi-sala",
"Some characters not allowed": "Algunos caracteres no están permitidos",
"Sign in with single sign-on": "Ingresar con un Registro Único",
- "Enter a server name": "Introduce un nombre de servidor",
+ "Enter a server name": "Escribe un nombre de servidor",
"Looks good": "Se ve bien",
"Can't find this server or its room list": "No se ha podido encontrar este servidor o su lista de salas",
"All rooms": "Todas las salas",
- "Your server": "Tu",
+ "Your server": "Tu servidor",
"Are you sure you want to remove <b>%(serverName)s</b>": "¿Estás seguro de querer eliminar <b>%(serverName)s</b>?",
"Remove server": "Quitar servidor",
"Matrix": "Matrix",
"Add a new server": "Añadir un nuevo servidor",
- "Enter the name of a new server you want to explore.": "Introduce el nombre de un nuevo servidor que quieras explorar.",
+ "Enter the name of a new server you want to explore.": "Escribe el nombre de un nuevo servidor que quieras explorar.",
"Server name": "Nombre del servidor",
"Add a new server...": "Añadir otro servidor…",
"%(networkName)s rooms": "%(networkName)s sala",
"Matrix rooms": "Salas de Matrix",
- "Use an identity server to invite by email. <default>Use the default (%(defaultIdentityServerName)s)</default> or manage in <settings>Settings</settings>.": "Usar un servidor de identidad para invitar vía correo electrónico. <default>. Usar (%(defaultIdentityServerName)s)</default>o seleccione en <settings>Ajustes</settings>.",
+ "Use an identity server to invite by email. <default>Use the default (%(defaultIdentityServerName)s)</default> or manage in <settings>Settings</settings>.": "Usar un servidor de identidad para invitar a través de correo electrónico. <default>. Usar (%(defaultIdentityServerName)s)</default>o seleccione en <settings>Ajustes</settings>.",
"Use an identity server to invite by email. Manage in <settings>Settings</settings>.": "Utilice un servidor de identidad para invitar por correo electrónico. Gestionar en <settings>Ajustes</settings>.",
"Close dialog": "Cerrar diálogo",
"Please tell us what went wrong or, better, create a GitHub issue that describes the problem.": "Por favor, cuéntanos qué ha ido mal o, mejor aún, cree una incidencia en GitHub que describa el problema.",
@@ -1575,12 +1575,12 @@
"You cancelled verification.": "Has cancelado la verificación.",
"Verification cancelled": "Verificación cancelada",
"Compare emoji": "Comparar emoji",
- "Encryption enabled": "Cifrado activado",
- "Encryption not enabled": "Cifrado no activado",
+ "Encryption enabled": "El cifrado está activado",
+ "Encryption not enabled": "El cifrado no está activado",
"The encryption used by this room isn't supported.": "El cifrado usado por esta sala no es compatible.",
"React": "Reaccionar",
"Message Actions": "Acciones de mensaje",
- "Show image": "Mostrar imagen",
+ "Show image": "Ver imagen",
"You have ignored this user, so their message is hidden. <a>Show anyways.</a>": "Ha ignorado a esta cuenta, así que su mensaje está oculto. <a>Ver de todos modos.</a>",
"You verified %(name)s": "Has verificado a %(name)s",
"You cancelled verifying %(name)s": "Has cancelado la verificación de %(name)s",
@@ -1595,12 +1595,12 @@
"Declining …": "Declinando…",
"%(name)s wants to verify": "%(name)s quiere verificar",
"You sent a verification request": "Has enviado solicitud de verificación",
- "Show all": "Mostrar todo",
+ "Show all": "Ver todo",
"Reactions": "Reacciones",
"<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>": "<reactors/><reactedWith> reaccionó con %(shortName)s</reactedWith>",
"Message deleted": "Mensaje eliminado",
"Message deleted by %(name)s": "Mensaje eliminado por %(name)s",
- "Edited at %(date)s. Click to view edits.": "Editado el día %(date)s. Haz clic para ver las ediciones.",
+ "Edited at %(date)s. Click to view edits.": "Última vez editado: %(date)s. Haz clic para ver los cambios.",
"edited": "editado",
"Can't load this message": "No se ha podido cargar este mensaje",
"Submit logs": "Enviar registros",
@@ -1632,7 +1632,7 @@
"Rotate Left": "Girar a la izquierda",
"Upload completed": "Subida completada",
"Cancelled signature upload": "Subida de firma cancelada",
- "Unable to upload": "No se puede subir",
+ "Unable to upload": "No se ha podido enviar",
"Signature upload success": "Subida de firma exitosa",
"Signature upload failed": "Subida de firma ha fallado",
"Confirm by comparing the following with the User Settings in your other session:": "Confirme comparando lo siguiente con los ajustes de usuario de su otra sesión:",
@@ -1652,13 +1652,13 @@
"Failed to decrypt %(failedCount)s sessions!": "¡Error al descifrar %(failedCount)s sesiones!",
"Successfully restored %(sessionCount)s keys": "%(sessionCount)s claves restauradas con éxito",
"<b>Warning</b>: you should only set up key backup from a trusted computer.": "<b>Advertencia</b>: deberías configurar la copia de seguridad de claves solamente usando un ordenador de confianza.",
- "<b>Warning</b>: You should only set up key backup from a trusted computer.": "<b>Advertencia</b>: Configurar la copia de seguridad de claves solamente usando un ordenador de confianza.",
+ "<b>Warning</b>: You should only set up key backup from a trusted computer.": "<b>Advertencia</b>: Configura la copia de seguridad de claves solo si estás usando un ordenador de confianza.",
"Resend %(unsentCount)s reaction(s)": "Reenviar %(unsentCount)s reacción(es)",
"Report Content": "Reportar contenido",
"Notification settings": "Notificaciones",
"Clear status": "Borrar estado",
"Update status": "Actualizar estado",
- "Set status": "Cambiar estado",
+ "Set status": "Cambiar el estado",
"Set a new status...": "Elegir un nuevo estado…",
"Hide": "Ocultar",
"Remove for everyone": "Eliminar para todos",
@@ -1694,7 +1694,7 @@
"Liberate your communication": "Libera tu comunicación",
"Send a Direct Message": "Envía un mensaje directo",
"Explore Public Rooms": "Explora las salas públicas",
- "Create a Group Chat": "Crea una conversación grupal",
+ "Create a Group Chat": "Crea un grupo",
"Filter": "Filtrar",
"%(creator)s created and configured the room.": "Sala creada y configurada por %(creator)s.",
"%(brand)s failed to get the protocol list from the homeserver. The homeserver may be too old to support third party networks.": "%(brand)s no ha posido obtener la lista de protocolo del servidor base. El servidor base puede ser demasiado viejo para admitir redes de terceros.",
@@ -1707,7 +1707,7 @@
"If you can't find the room you're looking for, ask for an invite or <a>Create a new room</a>.": "Si no encuentras la sala que buscas, pide que te inviten a ella o <a>crea una nueva</a>.",
"Explore rooms": "Explorar salas",
"Jump to first invite.": "Salte a la primera invitación.",
- "Add room": "Añadir sala",
+ "Add room": "Añadir una sala",
"Guest": "Invitado",
"Could not load user profile": "No se pudo cargar el perfil de usuario",
"Verify this login": "Verifica este inicio de sesión",
@@ -1767,7 +1767,7 @@
"Font size": "Tamaño del texto",
"Use custom size": "Usar un tamaño personalizado",
"Use a more compact ‘Modern’ layout": "Usar un diseño más «moderno y compacto»",
- "Use a system font": "Usar una fuente del sistema",
+ "Use a system font": "Usar un tipo de letra del sistema",
"System font name": "Nombre de la fuente",
"Enable experimental, compact IRC style layout": "Activar el diseño experimental de IRC compacto",
"Uploading logs": "Subiendo registros",
@@ -1775,7 +1775,7 @@
"Waiting for your other session to verify…": "Esperando a tu otra sesión confirme…",
"Your server isn't responding to some <a>requests</a>.": "Tú servidor no esta respondiendo a ciertas <a>solicitudes</a>.",
"New version available. <a>Update now.</a>": "Nueva versión disponible. <a>Actualizar ahora.</a>",
- "Hey you. You're the best!": "Oye, tú. ¡Eres genial!",
+ "Hey you. You're the best!": "Oye, tú… ¡eres genial!",
"Size must be a number": "El tamaño debe ser un dígito",
"Custom font size can only be between %(min)s pt and %(max)s pt": "El tamaño de la fuente solo puede estar entre los valores %(min)s y %(max)s",
"Use between %(min)s pt and %(max)s pt": "Utiliza un valor entre %(min)s y %(max)s",
@@ -1785,7 +1785,7 @@
"Customise your appearance": "Personaliza la apariencia",
"Appearance Settings only affect this %(brand)s session.": "Cambiar las opciones de apariencia solo afecta a esta sesión de %(brand)s.",
"Please verify the room ID or address and try again.": "Por favor, verifica la ID o dirección de esta sala e inténtalo de nuevo.",
- "Your server admin has disabled end-to-end encryption by default in private rooms & Direct Messages.": "El administrador del servidor base ha desactivado el cifrado de extremo a extremo en salas privadas y mensajes directos.",
+ "Your server admin has disabled end-to-end encryption by default in private rooms & Direct Messages.": "El administrador de tu servidor base ha desactivado el cifrado de extremo a extremo en salas privadas y mensajes directos.",
"To link to this room, please add an address.": "Para obtener un enlace a esta sala, añade una dirección.",
"The authenticity of this encrypted message can't be guaranteed on this device.": "La autenticidad de este mensaje cifrado no puede ser garantizada en este dispositivo.",
"No recently visited rooms": "No hay salas visitadas recientemente",
@@ -1804,7 +1804,7 @@
"Cross-signing is not set up.": "La firma cruzada no está configurada.",
"Master private key:": "Clave privada maestra:",
"%(brand)s can't securely cache encrypted messages locally while running in a web browser. Use <desktopLink>%(brand)s Desktop</desktopLink> for encrypted messages to appear in search results.": "%(brand)s no puede almacenar en caché de forma segura mensajes cifrados localmente mientras se ejecuta en un navegador web. Usa <desktopLink> %(brand)s Escritorio</desktopLink> para que los mensajes cifrados aparezcan en los resultados de búsqueda.",
- "Backup version:": "Versión de respaldo:",
+ "Backup version:": "Versión de la copia de seguridad:",
"Algorithm:": "Algoritmo:",
"Backup key stored:": "Clave de respaldo almacenada:",
"Backup key cached:": "Clave de respaldo almacenada en caché:",
@@ -1814,22 +1814,22 @@
"Room ID or address of ban list": "ID de sala o dirección de la lista de prohibición",
"Secure Backup": "Copia de seguridad segura",
"Privacy": "Privacidad",
- "Emoji picker": "Selector de emoji",
+ "Emoji picker": "Elegir emoji",
"Explore community rooms": "Explore las salas comunitarias",
"Custom Tag": "Etiqueta personalizada",
"%(count)s results|one": "%(count)s resultado",
"Appearance": "Apariencia",
- "Show rooms with unread messages first": "Mostrar primero las salas con mensajes no leídos",
- "Show previews of messages": "Mostrar vistas previas de mensajes",
+ "Show rooms with unread messages first": "Colocar al principio las salas con mensajes sin leer",
+ "Show previews of messages": "Incluir una vista previa del último mensaje",
"Sort by": "Ordenar por",
"Activity": "Actividad",
"A-Z": "A-Z",
- "List options": "Opciones de lista",
- "Show %(count)s more|other": "Mostrar %(count)s más",
- "Show %(count)s more|one": "Mostrar %(count)s más",
+ "List options": "Opciones de la lista",
+ "Show %(count)s more|other": "Ver %(count)s más",
+ "Show %(count)s more|one": "Ver %(count)s más",
"Use default": "Usar valor por defecto",
"Mentions & Keywords": "Menciones y palabras clave",
- "Notification options": "Opciones de notificación",
+ "Notification options": "Ajustes de notificaciones",
"Forget Room": "Olvidar sala",
"Favourited": "Favorecido",
"Leave Room": "Salir de la sala",
@@ -1849,7 +1849,7 @@
"You've successfully verified your device!": "¡Ha verificado correctamente su dispositivo!",
"Take a picture": "Toma una foto",
"Message deleted on %(date)s": "Mensaje eliminado el %(date)s",
- "Edited at %(date)s": "Editado el %(date)s",
+ "Edited at %(date)s": "Última vez editado: %(date)s",
"Click to view edits": "Haz clic para ver las ediciones",
"Categories": "Categorías",
"Information": "Información",
@@ -1868,13 +1868,13 @@
"There was an error creating your community. The name may be taken or the server is unable to process your request.": "Ha ocurrido un error al crear la comunidad. El nombre puede que ya esté siendo usado o el servidor no puede procesar la solicitud.",
"Community ID: +<localpart />:%(domain)s": "ID de comunidad: +<localpart />:%(domain)s",
"Use this when referencing your community to others. The community ID cannot be changed.": "Usa esto cuando hagas referencia a tu comunidad con otras. El ID de la comunidad no se puede cambiar.",
- "You can change this later if needed.": "Puede cambiar esto más tarde si es necesario.",
+ "You can change this later if needed.": "Puedes cambiar esto más adelante si hace falta.",
"What's the name of your community or team?": "¿Cuál es el nombre de tu comunidad o equipo?",
"Enter name": "Introduce un nombre",
"Add image (optional)": "Añadir imagen (opcional)",
"An image will help people identify your community.": "Una imagen ayudará a las personas a identificar su comunidad.",
"Private rooms can be found and joined by invitation only. Public rooms can be found and joined by anyone in this community.": "Las salas privadas solo se pueden encontrar y unirse con invitación. Cualquier persona de esta comunidad puede encontrar salas públicas y unirse a ellas.",
- "You might enable this if the room will only be used for collaborating with internal teams on your homeserver. This cannot be changed later.": "Puedes activar esto si la sala solo se usará para colaborar con equipos internos en tu servidor base. No se puede cambiar después.",
+ "You might enable this if the room will only be used for collaborating with internal teams on your homeserver. This cannot be changed later.": "Puedes activar esto si la sala solo se usará para colaborar con equipos internos en tu servidor base. No se podrá cambiar después.",
"You might disable this if the room will be used for collaborating with external teams who have their own homeserver. This cannot be changed later.": "Puedes desactivar esto si la sala se utilizará para colaborar con equipos externos que tengan su propio servidor base. Esto no se puede cambiar después.",
"Create a room in %(communityName)s": "Crea una sala en %(communityName)s",
"Block anyone not part of %(serverName)s from ever joining this room.": "Evita que cualquier persona que no sea parte de %(serverName)s se una a esta sala.",
@@ -1965,11 +1965,11 @@
"Restore": "Restaurar",
"You'll need to authenticate with the server to confirm the upgrade.": "Deberá autenticarse con el servidor para confirmar la actualización.",
"Upgrade this session to allow it to verify other sessions, granting them access to encrypted messages and marking them as trusted for other users.": "Actualice esta sesión para permitirle verificar otras sesiones, otorgándoles acceso a mensajes cifrados y marcándolos como confiables para otros usuarios.",
- "Enter a security phrase only you know, as it’s used to safeguard your data. To be secure, you shouldn’t re-use your account password.": "Ingrese una frase de seguridad que solo usted conozca, ya que se usa para proteger sus datos. Para estar seguro, no debe volver a utilizar la contraseña de su cuenta.",
+ "Enter a security phrase only you know, as it’s used to safeguard your data. To be secure, you shouldn’t re-use your account password.": "Elige una frase de seguridad que solo tú conozcas, ya que se usa para proteger tus datos. Para que sea todavía más segura, no vuelvas a usar la contraseña de tu cuenta.",
"That matches!": "¡Eso combina!",
"Use a different passphrase?": "¿Utiliza una frase de contraseña diferente?",
"That doesn't match.": "No coincide.",
- "Go back to set it again.": "Regrese para configurarlo nuevamente.",
+ "Go back to set it again.": "Volver y ponerlo de nuevo.",
"Store your Security Key somewhere safe, like a password manager or a safe, as it’s used to safeguard your encrypted data.": "Guarde su llave de seguridad en un lugar seguro, como un administrador de contraseñas o una caja fuerte, ya que se usa para proteger sus datos cifrados.",
"Download": "Descargar",
"Unable to query secret storage status": "No se puede consultar el estado del almacenamiento secreto",
@@ -1985,12 +1985,12 @@
"For maximum security, this should be different from your account password.": "Para mayor seguridad, esta debe ser diferente a la contraseña de su cuenta.",
"Keep a copy of it somewhere secure, like a password manager or even a safe.": "Guarde una copia en un lugar seguro, como un administrador de contraseñas o incluso una caja fuerte.",
"<b>Print it</b> and store it somewhere safe": "<b>Imprímelo</b> y guárdalo en un lugar seguro",
- "<b>Save it</b> on a USB key or backup drive": "<b>Guárdelo</b> en una llave USB o unidad de respaldo",
+ "<b>Save it</b> on a USB key or backup drive": "<b>Guárdalo</b> en un USB o disco de copias de seguridad",
"<b>Copy it</b> to your personal cloud storage": "<b>Cópielo</b> a su almacenamiento personal en la nube",
"Your keys are being backed up (the first backup could take a few minutes).": "Se está realizando una copia de seguridad de sus claves (la primera copia de seguridad puede tardar unos minutos).",
"Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another session.": "Sin configurar Secure Message Recovery, no podrás restaurar tu historial de mensajes encriptados si cierras sesión o usas otra sesión.",
"Set up Secure Message Recovery": "Configurar la recuperación segura de mensajes",
- "Starting backup...": "Empezando copia de seguridad…",
+ "Starting backup...": "Empezando la copia de seguridad…",
"Success!": "¡Éxito!",
"Create key backup": "Crear copia de seguridad de claves",
"Unable to create key backup": "No se puede crear una copia de seguridad de la clave",
@@ -2023,13 +2023,13 @@
"Toggle Bold": "Alternar negrita",
"Toggle Italics": "Alternar cursiva",
"Toggle Quote": "Alternar cita",
- "New line": "Nueva línea",
+ "New line": "Insertar salto de línea",
"Navigate recent messages to edit": "Navegar entre mensajes recientes para editar",
"Jump to start/end of the composer": "Saltar al inicio o final del editor",
"Navigate composer history": "Navegar por el historial del editor",
"Cancel replying to a message": "Cancelar responder al mensaje",
- "Toggle microphone mute": "Alternar silencio del micrófono",
- "Toggle video on/off": "Activar/desactivar vídeo",
+ "Toggle microphone mute": "Activar o desactivar tu micrófono",
+ "Toggle video on/off": "Activar o desactivar tu cámara",
"Scroll up/down in the timeline": "Desplazarse hacia arriba o hacia abajo en la línea de tiempo",
"Dismiss read marker and jump to bottom": "Descartar el marcador de lectura y saltar al final",
"Jump to oldest unread message": "Ir al mensaje no leído más antiguo",
@@ -2037,7 +2037,7 @@
"Jump to room search": "Ir a la búsqueda de salas",
"Navigate up/down in the room list": "Navegar hacia arriba/abajo en la lista de salas",
"Select room from the room list": "Seleccionar sala de la lista de salas",
- "Collapse room list section": "Contraer la sección de lista de salas",
+ "Collapse room list section": "Encoger la sección de lista de salas",
"Expand room list section": "Expandir la sección de la lista de salas",
"Clear room list filter field": "Borrar campo de filtro de lista de salas",
"Previous/next unread room or DM": "Sala o mensaje directo anterior/siguiente sin leer",
@@ -2081,7 +2081,7 @@
"There was an error looking up the phone number": "Ha ocurrido un error al buscar el número de teléfono",
"Unable to look up phone number": "No se ha podido buscar el número de teléfono",
"Fill Screen": "Llenar pantalla",
- "Show stickers button": "Mostrar botón de pegatinas",
+ "Show stickers button": "Incluir el botón de pegatinas",
"See emotes posted to this room": "Ver los emoticonos publicados en esta sala",
"Send emotes as you in this room": "Enviar emoticonos en tu nombre a esta sala",
"Send messages as you in this room": "Enviar mensajes en tu nombre a esta sala",
@@ -2361,21 +2361,21 @@
"Video conference started by %(senderName)s": "Videoconferencia iniciada por %(senderName)s",
"Video conference updated by %(senderName)s": "Videoconferencia actualizada por %(senderName)s",
"You held the call <a>Resume</a>": "Has puesto la llamada en espera <a>Recuperar</a>",
- "You held the call <a>Switch</a>": "Has puesto la llamada en espera <a>Cambiar</a>",
+ "You held the call <a>Switch</a>": "Has puesto esta llamada en espera <a>Volver</a>",
"Reason (optional)": "Motivo (opcional)",
"Homeserver": "Servidor base",
"Server Options": "Opciones del servidor",
"Messages here are end-to-end encrypted. Verify %(displayName)s in their profile - tap on their avatar.": "Estos mensajes se cifran de extremo a extremo. Verifica a %(displayName)s en su perfil - toca su imagen.",
"Start a new chat": "Empezar una nueva conversación",
"Open dial pad": "Abrir teclado numérico",
- "This is the start of <roomName/>.": "Este es el inicio de <roomName/>.",
+ "This is the start of <roomName/>.": "Aquí empieza <roomName/>.",
"Add a photo, so people can easily spot your room.": "Añade una imagen para que la gente reconozca la sala fácilmente.",
"%(displayName)s created this room.": "%(displayName)s creó esta sala.",
"You created this room.": "Creaste esta sala.",
- "<a>Add a topic</a> to help people know what it is about.": "<a>Escribe un asunto</a> para que la gente sepa de qué va esta sala.",
+ "<a>Add a topic</a> to help people know what it is about.": "<a>Añade un asunto</a> para que la gente sepa de qué va la sala.",
"Topic: %(topic)s ": "Tema: %(topic)s ",
"Topic: %(topic)s (<a>edit</a>)": "Tema: %(topic)s (<a>cambiar</a>)",
- "Remove messages sent by others": "Eliminar mensajes mandados por otros",
+ "Remove messages sent by others": "Eliminar los mensajes enviados por otras personas",
"Back up your encryption keys with your account data in case you lose access to your sessions. Your keys will be secured with a unique Security Key.": "Haz una copia de seguridad de tus claves de cifrado con los datos de tu cuenta por si pierdes acceso a tus sesiones. Las clave serán aseguradas con una clave de seguridad única.",
"The operation could not be completed": "No se ha podido completar la operación",
"Failed to save your profile": "No se ha podido guardar tu perfil",
@@ -2392,7 +2392,7 @@
"Sends the given message with fireworks": "Envía el mensaje con fuegos artificiales",
"sends confetti": "envía confeti",
"Sends the given message with confetti": "Envía el mensaje con confeti",
- "Use Ctrl + Enter to send a message": "Usa Control + Intro para enviar un mensaje",
+ "Use Ctrl + Enter to send a message": "Hacer que para enviar un mensaje haya que pulsar Control + Intro",
"Use Command + Enter to send a message": "Usa Comando + Intro para enviar un mensje",
"Render LaTeX maths in messages": "Mostrar matemáticas en los mensajes usando LaTeX",
"%(senderName)s ended the call": "%(senderName)s ha terminado la llamada",
@@ -2624,7 +2624,7 @@
"Sending your message...": "Enviando tu mensaje…",
"Creating...": "Creando…",
"You will not be able to undo this change as you are demoting yourself, if you are the last privileged user in the space it will be impossible to regain privileges.": "No podrás deshacer esto, ya que te estás quitando tus permisos. Si eres la última persona con permisos en este usuario, no será posible recuperarlos.",
- "Jump to the bottom of the timeline when you send a message": "Saltar abajo del todo cuando envíes un mensaje",
+ "Jump to the bottom of the timeline when you send a message": "Saltar abajo del todo al enviar un mensaje",
"Welcome to <name/>": "Te damos la bienvenida a <name/>",
"Already in call": "Ya en una llamada",
"Original event source": "Fuente original del evento",
@@ -2643,7 +2643,7 @@
"Random": "Al azar",
"%(count)s members|one": "%(count)s miembro",
"%(count)s members|other": "%(count)s miembros",
- "Your server does not support showing space hierarchies.": "Este servidor no soporta mostrar jerarquías de espacios.",
+ "Your server does not support showing space hierarchies.": "Este servidor no es compatible con la función de las jerarquías de espacios.",
"Your message wasn't sent because this homeserver has been blocked by it's administrator. Please <a>contact your service administrator</a> to continue using the service.": "Tu mensaje no ha sido enviado porque este servidor base ha sido bloqueado por su administración. Por favor, <a>ponte en contacto con ellos</a> para continuar usando el servicio.",
"Are you sure you want to leave the space '%(spaceName)s'?": "¿Salir del espacio «%(spaceName)s»?",
"This space is not public. You will not be able to rejoin without an invite.": "Este espacio es privado. No podrás volverte a unir sin una invitación.",
@@ -2655,11 +2655,11 @@
"Edit settings relating to your space.": "Editar ajustes relacionados con tu espacio.",
"Space settings": "Ajustes del espacio",
"Failed to save space settings.": "No se han podido guardar los ajustes del espacio.",
- "Invite someone using their name, email address, username (like <userId/>) or <a>share this space</a>.": "Invita a más gente usando su nombre, correo electrónico, nombre de usuario (ej.: <userId/>) o <a>compartiendo este espacio</a>.",
- "Invite someone using their name, username (like <userId/>) or <a>share this space</a>.": "Invita a más gente usando su nombre, nombre de usuario (ej.: <userId/>) o <a>compartiendo este espacio</a>.",
+ "Invite someone using their name, email address, username (like <userId/>) or <a>share this space</a>.": "Invita a más gente usando su nombre, correo electrónico, nombre de usuario (ej.: <userId/>) o <a>compartiendo el enlace a este espacio</a>.",
+ "Invite someone using their name, username (like <userId/>) or <a>share this space</a>.": "Invita a más gente usando su nombre, nombre de usuario (ej.: <userId/>) o <a>compartiendo el enlace a este espacio</a>.",
"Unnamed Space": "Espacio sin nombre",
"Invite to %(spaceName)s": "Invitar a %(spaceName)s",
- "Create a new room": "Crear una nueva sala",
+ "Create a new room": "Crear una sala nueva",
"Spaces": "Espacios",
"Space selection": "Selección de espacio",
"Empty room": "Sala vacía",
@@ -2668,22 +2668,22 @@
"Add existing room": "Añadir sala ya existente",
"You do not have permissions to create new rooms in this space": "No tienes permisos para crear nuevas salas en este espacio",
"Send message": "Enviar mensaje",
- "Invite to this space": "Invitar a este espacio",
+ "Invite to this space": "Invitar al espacio",
"Your message was sent": "Mensaje enviado",
- "Spell check dictionaries": "Diccionarios de comprobación de ortografía",
+ "Spell check dictionaries": "Diccionarios del corrector de ortografía",
"Space options": "Opciones del espacio",
"Leave space": "Salir del espacio",
- "Invite people": "Invitar a gente",
+ "Invite people": "Invitar gente",
"Share your public space": "Comparte tu espacio público",
"Share invite link": "Compartir enlace de invitación",
"Click to copy": "Haz clic para copiar",
- "Collapse space panel": "Colapsar panel del espacio",
- "Expand space panel": "Expandir panel del espacio",
+ "Collapse space panel": "Encoger panel de los espacios",
+ "Expand space panel": "Expandir panel de los espacios",
"Your private space": "Tu espacio privado",
"Your public space": "Tu espacio público",
- "Invite only, best for yourself or teams": "Solo con invitación, mejor para ti o para equipos",
+ "Invite only, best for yourself or teams": "Acceso por invitación, mejor para equipos o solo tú",
"Private": "Privado",
- "Open space for anyone, best for communities": "Espacio abierto para todo el mundo, la mejor opción para comunidades",
+ "Open space for anyone, best for communities": "Abierto para todo el mundo, la mejor opción para comunidades",
"Public": "Público",
"Create a space": "Crear un espacio",
"Delete": "Borrar",
@@ -2717,7 +2717,7 @@
"%(count)s messages deleted.|other": "%(count)s mensajes eliminados.",
"Invite to %(roomName)s": "Invitar a %(roomName)s",
"Edit devices": "Editar dispositivos",
- "Invite People": "Invitar a gente",
+ "Invite People": "Invitar gente",
"Invite with email or username": "Invitar correos electrónicos o nombres de usuario",
"You can change these anytime.": "Puedes cambiar todo esto en cualquier momento.",
"Add some details to help people recognise it.": "Añade algún detalle para ayudar a que la gente lo reconozca.",
@@ -2730,13 +2730,13 @@
"Invited people will be able to read old messages.": "Las personas invitadas podrán leer mensajes antiguos.",
"We couldn't create your DM.": "No hemos podido crear tu mensaje directo.",
"Adding...": "Añadiendo...",
- "Add existing rooms": "Añadir salas existentes",
+ "Add existing rooms": "Añadir salas que ya existan",
"%(count)s people you know have already joined|one": "%(count)s persona que ya conoces se ha unido",
"%(count)s people you know have already joined|other": "%(count)s personas que ya conoces se han unido",
"Accept on your other login…": "Acepta en otro sitio donde hayas iniciado sesión…",
"Quick actions": "Acciones rápidas",
"Invite to just this room": "Invitar solo a esta sala",
- "Warn before quitting": "Avisar antes de salir",
+ "Warn before quitting": "Pedir confirmación antes de salir",
"Manage & explore rooms": "Gestionar y explorar salas",
"unknown person": "persona desconocida",
"%(deviceId)s from %(ip)s": "%(deviceId)s desde %(ip)s",
@@ -2798,8 +2798,8 @@
"Not all selected were added": "No se han añadido todas las seleccionadas",
"You are not allowed to view this server's rooms list": "No tienes permiso para ver la lista de salas de este servidor",
"Error processing voice message": "Ha ocurrido un error al procesar el mensaje de voz",
- "We didn't find a microphone on your device. Please check your settings and try again.": "No hemos encontrado un micrófono en tu dispositivo. Por favor, consulta tus ajustes e inténtalo de nuevo.",
- "No microphone found": "No se ha encontrado ningún micrófono",
+ "We didn't find a microphone on your device. Please check your settings and try again.": "No hemos encontrado un micrófono en tu dispositivo. Por favor, revisa tus ajustes e inténtalo de nuevo.",
+ "No microphone found": "Micrófono no detectado",
"We were unable to access your microphone. Please check your browser settings and try again.": "No hemos podido acceder a tu micrófono. Por favor, comprueba los ajustes de tu navegador e inténtalo de nuevo.",
"Unable to access your microphone": "No se ha podido acceder a tu micrófono",
"Your access token gives full access to your account. Do not share it with anyone.": "Tu token de acceso da acceso completo a tu cuenta. No lo compartas con nadie.",
@@ -2812,7 +2812,7 @@
"You may contact me if you have any follow up questions": "Os podéis poner en contacto conmigo si tenéis alguna pregunta",
"To leave the beta, visit your settings.": "Para salir de la beta, ve a tus ajustes.",
"Your platform and username will be noted to help us use your feedback as much as we can.": "Tu nombre de usuario y plataforma serán adjuntados, para que podamos interpretar tus comentarios lo mejor posible.",
- "%(featureName)s beta feedback": "Comentarios sobre la funcionalidad beta %(featureName)s",
+ "%(featureName)s beta feedback": "Danos tu opinión sobre la funcionalidad beta de %(featureName)s",
"Thank you for your feedback, we really appreciate it.": "Muchas gracias por tus comentarios.",
"Add reaction": "Reaccionar",
"Feeling experimental? Labs are the best way to get things early, test out new features and help shape them before they actually launch. <a>Learn more</a>.": "¿Te apetece probar cosas nuevas? Los experimentos son la mejor manera de conseguir acceso anticipado a nuevas funcionalidades, probarlas y ayudar a mejorarlas antes de su lanzamiento. <a>Más información</a>.",
@@ -2820,10 +2820,10 @@
"Go to my space": "Ir a mi espacio",
"sends space invaders": "enviar space invaders",
"Sends the given message with a space themed effect": "Envía un mensaje con efectos espaciales",
- "Allow Peer-to-Peer for 1:1 calls (if you enable this, the other party might be able to see your IP address)": "Permitir conexión directa (peer-to-peer) en las llamadas individuales (si lo activas, la otra persona podría ver tu dirección IP)",
+ "Allow Peer-to-Peer for 1:1 calls (if you enable this, the other party might be able to see your IP address)": "Permitir conexiones directas (peer-to-peer) en las llamadas individuales (si lo activas, la otra persona podría llegar a ver tu dirección IP)",
"See when people join, leave, or are invited to your active room": "Ver cuando alguien se una, salga o se le invite a tu sala activa",
- "Kick, ban, or invite people to this room, and make you leave": "Expulsar, vetar o invitar personas a esta sala, y hacerte salir de ella",
- "Kick, ban, or invite people to your active room, and make you leave": "Expulsar, vetar o invitar a gente a tu sala activa, o hacerte salir",
+ "Kick, ban, or invite people to this room, and make you leave": "Echar, vetar o invitar personas a esta sala, y hacerte salir de ella",
+ "Kick, ban, or invite people to your active room, and make you leave": "Echar, vetar o invitar gente a tu sala activa, o hacerte salir de la sala",
"See when people join, leave, or are invited to this room": "Ver cuando alguien se une, sale o se le invita a la sala",
"Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Prueba con sinónimos o revisa si te has equivocado al escribir. Puede que algunos resultados no sean visibles si son privados y necesites que te inviten para verlos.",
"Currently joining %(count)s rooms|one": "Entrando en %(count)s sala",
@@ -2846,10 +2846,10 @@
"Error loading Widget": "Error al cargar el widget",
"Pinned messages": "Mensajes fijados",
"If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.": "Si tienes permisos, abre el menú de cualquier mensaje y selecciona <b>Fijar</b> para colocarlo aquí.",
- "Nothing pinned, yet": "Nada fijado, todavía",
+ "Nothing pinned, yet": "Ningún mensaje fijado… todavía",
"%(senderName)s removed their display name (%(oldDisplayName)s)": "%(senderName)s se ha quitado el nombre personalizado (%(oldDisplayName)s)",
"%(senderName)s set their display name to %(displayName)s": "%(senderName)s ha elegido %(displayName)s como su nombre",
- "%(senderName)s changed the <a>pinned messages</a> for the room.": "%(senderName)s ha cambiado los <a>mensajes fijados</a> de la sala.",
+ "%(senderName)s changed the <a>pinned messages</a> for the room.": "%(senderName)s cambió los <a>mensajes fijados</a> de la sala.",
"%(senderName)s kicked %(targetName)s": "%(senderName)s ha echado a %(targetName)s",
"%(senderName)s kicked %(targetName)s: %(reason)s": "%(senderName)s ha echado a %(targetName)s: %(reason)s",
"Disagree": "No estoy de acuerdo",
@@ -2888,7 +2888,7 @@
"Published addresses can be used by anyone on any server to join your space.": "Los espacios publicados pueden usarse por cualquiera, independientemente de su servidor base.",
"This space has no local addresses": "Este espacio no tiene direcciones locales",
"Space information": "Información del espacio",
- "Collapse": "Colapsar",
+ "Collapse": "Encoger",
"Expand": "Expandir",
"Recommended for public spaces.": "Recomendado para espacios públicos.",
"Allow people to preview your space before they join.": "Permitir que se pueda ver una vista previa del espacio antes de unirse a él.",
@@ -2905,7 +2905,7 @@
"e.g. my-space": "ej.: mi-espacio",
"Silence call": "Silenciar llamada",
"Sound on": "Sonido activado",
- "Show all rooms in Home": "Mostrar todas las salas en la pantalla de inicio",
+ "Show all rooms in Home": "Incluir todas las salas en Inicio",
"Report to moderators prototype. In rooms that support moderation, the `report` button will let you report abuse to room moderators": "Prototipo de reportes a los moderadores. En las salas que lo permitan, verás el botón «reportar», que te permitirá avisar de mensajes abusivos a los moderadores de la sala",
"%(senderName)s withdrew %(targetName)s's invitation": "%(senderName)s ha anulado la invitación a %(targetName)s",
"%(senderName)s withdrew %(targetName)s's invitation: %(reason)s": "%(senderName)s ha anulado la invitación a %(targetName)s: %(reason)s",
@@ -2965,14 +2965,14 @@
"Image": "Imagen",
"Sticker": "Pegatina",
"The call is in an unknown state!": "¡La llamada está en un estado desconocido!",
- "Call back": "Devolver",
+ "Call back": "Devolver llamada",
"No answer": "Sin respuesta",
"An unknown error occurred": "Ha ocurrido un error desconocido",
"Connection failed": "Ha fallado la conexión",
"Copy Room Link": "Copiar enlace a la sala",
- "Displaying time": "Mostrando la hora",
+ "Displaying time": "Fecha y hora",
"IRC": "IRC",
- "Use Ctrl + F to search timeline": "Usa Control + F para buscar dentro de la conversación",
+ "Use Ctrl + F to search timeline": "Activar el atajo Control + F, que permite buscar dentro de una conversación",
"<b>Please note upgrading will make a new version of the room</b>. All current messages will stay in this archived room.": "<b>Ten en cuenta que actualizar crea una nueva versión de la sala</b>. Todos los mensajes hasta ahora quedarán archivados aquí, en esta sala.",
"Automatically invite members from this room to the new one": "Invitar a la nueva sala automáticamente a los miembros que tiene ahora",
"These are likely ones other room admins are a part of.": "Otros administradores de la sala estarán dentro.",
@@ -3010,21 +3010,21 @@
"Your camera is turned off": "Tu cámara está apagada",
"%(sharerName)s is presenting": "%(sharerName)s está presentando",
"You are presenting": "Estás presentando",
- "All rooms you're in will appear in Home.": "En la página de inicio aparecerán todas las salas a las que te hayas unido.",
+ "All rooms you're in will appear in Home.": "Elige si quieres que en Inicio aparezcan todas las salas a las que te hayas unido.",
"To help space members find and join a private room, go to that room's Security & Privacy settings.": "Para ayudar a los miembros de tus espacios a encontrar y unirse a salas privadas, ve a los ajustes seguridad y privacidad de la sala en cuestión.",
"Help space members find private rooms": "Ayuda a los miembros de tus espacios a encontrar salas privadas",
"Help people in spaces to find and join private rooms": "Ayuda a la gente en tus espacios a encontrar y unirse a salas privadas",
"New in the Spaces beta": "Novedades en la beta de los espacios",
"We're working on this, but just want to let you know.": "Todavía estamos trabajando en esto, pero queríamos enseñártelo.",
"Search for rooms or spaces": "Buscar salas o espacios",
- "Add space": "Añadir espacio",
+ "Add space": "Añadir un espacio",
"Spaces you know that contain this room": "Espacios que conoces que contienen esta sala",
"Search spaces": "Buscar espacios",
"Select spaces": "Elegir espacios",
"Leave %(spaceName)s": "Salir de %(spaceName)s",
"You're the only admin of some of the rooms or spaces you wish to leave. Leaving them will leave them without any admins.": "Eres la única persona con permisos de administración en algunos de los espacios de los que quieres irte. Al salir de ellos, nadie podrá gestionarlos.",
- "You're the only admin of this space. Leaving it will mean no one has control over it.": "Eres la única persona con permisos de administración en el espacio. Al salir, nadie podrá gestionarlo.",
- "You won't be able to rejoin unless you are re-invited.": "No podrás volverte a unir hasta que te vuelvan a invitar.",
+ "You're the only admin of this space. Leaving it will mean no one has control over it.": "Eres la única persona con permisos de administración en este espacio. Cuando salgas, nadie más podrá gestionarlo.",
+ "You won't be able to rejoin unless you are re-invited.": "No te podrás unir de nuevo hasta que te inviten otra vez a él.",
"Search %(spaceName)s": "Buscar en %(spaceName)s",
"Want to add an existing space instead?": "¿Quieres añadir un espacio que ya exista?",
"Private space (invite only)": "Espacio privado (solo por invitación)",
@@ -3057,7 +3057,7 @@
"Missed call": "Llamada perdida",
"Call declined": "Llamada rechazada",
"Stop recording": "Dejar de grabar",
- "Send voice message": "Enviar mensaje de voz",
+ "Send voice message": "Enviar un mensaje de voz",
"Olm version:": "Versión de Olm:",
"Mute the microphone": "Silenciar el micrófono",
"Unmute the microphone": "Activar el micrófono",
@@ -3092,8 +3092,8 @@
"To create a Space from another community, just pick the community in Preferences.": "Para crear un espacio a partir de otra comunidad, escoge la comunidad en ajustes.",
"Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited, which UI elements you last interacted with, and the usernames of other users. They do not contain messages.": "Los registros de depuración contienen datos de uso de la aplicación como tu nombre de usuario, las IDs o los nombres de las salas o grupos que has visitado, con qué elementos de la interfaz has interactuado recientemente, y nombres de usuario de otras personas. No incluyen mensajes.",
"To avoid these issues, create a <a>new public room</a> for the conversation you plan to have.": "Para evitar estos problemas, crea una <a>nueva sala pública</a> para la conversación que planees tener.",
- "%(severalUsers)schanged the <a>pinned messages</a> for the room %(count)s times.|other": "%(severalUsers)s han cambiado los <a>mensajes anclados</a> de la sala %(count)s veces.",
- "%(oneUser)schanged the <a>pinned messages</a> for the room %(count)s times.|other": "%(oneUser)s han cambiado los <a>mensajes anclados</a> de la sala %(count)s veces.",
+ "%(severalUsers)schanged the <a>pinned messages</a> for the room %(count)s times.|other": "%(severalUsers)s han cambiado los <a>mensajes fijados</a> de la sala %(count)s veces.",
+ "%(oneUser)schanged the <a>pinned messages</a> for the room %(count)s times.|other": "%(oneUser)s han cambiado los <a>mensajes fijados</a> de la sala %(count)s veces.",
"Cross-signing is ready but keys are not backed up.": "La firma cruzada está lista, pero no hay copia de seguridad de las claves.",
"Rooms and spaces": "Salas y espacios",
"Results": "Resultados",
@@ -3122,13 +3122,13 @@
"The above, but in <Room /> as well": "Lo de arriba, pero también en <Room />",
"Autoplay videos": "Reproducir automáticamente los vídeos",
"Autoplay GIFs": "Reproducir automáticamente los GIFs",
- "%(senderName)s pinned a message to this room. See all pinned messages.": "%(senderName)s ha anclado un mensaje en esta sala. Mira todos los mensajes anclados.",
- "%(senderName)s pinned <a>a message</a> to this room. See all <b>pinned messages</b>.": "%(senderName)s ha anclado <a>un mensaje</a> en esta sala. Mira todos los <b>mensajes anclados</b>.",
+ "%(senderName)s pinned a message to this room. See all pinned messages.": "%(senderName)s ha fijado un mensaje en esta sala. Mira todos los mensajes fijados.",
+ "%(senderName)s pinned <a>a message</a> to this room. See all <b>pinned messages</b>.": "%(senderName)s ha fijado <a>un mensaje</a> en esta sala. Mira todos los <b>mensajes fijados</b>.",
"Some encryption parameters have been changed.": "Algunos parámetros del cifrado han cambiado.",
"Role in <RoomName/>": "Rol en <RoomName/>",
"Currently, %(count)s spaces have access|one": "Ahora mismo, un espacio tiene acceso",
"& %(count)s more|one": "y %(count)s más",
- "Select the roles required to change various parts of the space": "Selecciona los roles necesarios para cambiar varios ajustes del espacio",
+ "Select the roles required to change various parts of the space": "Elige los roles que los usuarios deben tener para poder cambiar los distintos ajustes del espacio",
"Failed to update the join rules": "Fallo al actualizar las reglas para unirse",
"Anyone in <spaceName/> can find and join. You can select other spaces too.": "Cualquiera en <spaceName/> puede encontrar y unirse. También puedes seleccionar otros espacios.",
"Explore %(spaceName)s": "Explorar %(spaceName)s",
@@ -3139,8 +3139,8 @@
"Unknown failure": "Fallo desconocido",
"Change space avatar": "Cambiar la imagen del espacio",
"Change space name": "Cambiar el nombre del espacio",
- "Change main address for the space": "Cambiar dirección principal del espacio",
- "Change description": "Cambiar descripción",
+ "Change main address for the space": "Cambiar la dirección principal del espacio",
+ "Change description": "Cambiar la descripción",
"Private community": "Comunidad privada",
"Public community": "Comunidad pública",
"Message": "Mensaje",
@@ -3156,5 +3156,10 @@
"Leave all rooms": "Salir de todas las salas",
"Leave some rooms": "Salir de algunas salas",
"Would you like to leave the rooms in this space?": "¿Quieres salir también de las salas del espacio?",
- "You are about to leave <spaceName/>.": "Estás a punto de salirte de <spaceName/>."
+ "You are about to leave <spaceName/>.": "Estás a punto de salirte de <spaceName/>.",
+ "Collapse quotes │ ⇧+click": "Encoger citas │ ⇧+click",
+ "%(senderName)s unpinned a message from this room. See all pinned messages.": "%(senderName)s ha dejado de fijar un mensaje de esta sala. Ver todos los mensajes fijados.",
+ "%(senderName)s unpinned <a>a message</a> from this room. See all <b>pinned messages</b>.": "%(senderName)s ha dejado de fijar <a>un mensaje</a> de esta sala. Ver todos los <b>mensajes fijados</b>.",
+ "%(reactors)s reacted with %(content)s": "%(reactors)s han reaccionado con %(content)s",
+ "Expand quotes │ ⇧+click": "Expandir citas │ ⇧+clic"
}
From d5a6339c8d2392ce5cdf093e00d7622c90a6abb9 Mon Sep 17 00:00:00 2001
From: Jeff Huang <s8321414@gmail.com>
Date: Tue, 28 Sep 2021 01:47:22 +0000
Subject: [PATCH 258/313] Translated using Weblate (Chinese (Traditional))
Currently translated at 100.0% (3168 of 3168 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/zh_Hant/
---
src/i18n/strings/zh_Hant.json | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/zh_Hant.json b/src/i18n/strings/zh_Hant.json
index d4da600284..006cf630ac 100644
--- a/src/i18n/strings/zh_Hant.json
+++ b/src/i18n/strings/zh_Hant.json
@@ -3167,5 +3167,7 @@
"Leave all rooms": "離開所有聊天室",
"Don't leave any rooms": "不要離開任何聊天室",
"%(reactors)s reacted with %(content)s": "%(reactors)s 使用了 %(content)s 反應",
- "Joining space …": "正在加入空間……"
+ "Joining space …": "正在加入空間……",
+ "Expand quotes │ ⇧+click": "展開引用 │ ⇧+點擊",
+ "Collapse quotes │ ⇧+click": "折疊引用 │ ⇧+點擊"
}
From 0a41385c78c1b52481c064e0d8dd921ae86ca1ba Mon Sep 17 00:00:00 2001
From: Andrejs <tlpbu@droplar.com>
Date: Tue, 28 Sep 2021 05:44:35 +0000
Subject: [PATCH 259/313] Translated using Weblate (Latvian)
Currently translated at 60.6% (1921 of 3168 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/lv/
---
src/i18n/strings/lv.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/i18n/strings/lv.json b/src/i18n/strings/lv.json
index d8e2a21638..a242fb0f49 100644
--- a/src/i18n/strings/lv.json
+++ b/src/i18n/strings/lv.json
@@ -204,7 +204,7 @@
"Unnamed Room": "Istaba bez nosaukuma",
"Cancel": "Atcelt",
"Create new room": "Izveidot jaunu istabu",
- "Dismiss": "Aizvērt/atcelt",
+ "Dismiss": "Aizvērt",
"You have <a>enabled</a> URL previews by default.": "URL priekšskatījumi pēc noklusējuma jums ir<a>iespējoti</a> .",
"Upload avatar": "Augšupielādēt avataru",
"Upload Failed": "Augšupielāde (nosūtīšana) neizdevās",
From 0b8b3c49bc1b7312c989ea5b2978bb5f8b11a47d Mon Sep 17 00:00:00 2001
From: XoseM <correoxm@disroot.org>
Date: Tue, 28 Sep 2021 05:49:26 +0000
Subject: [PATCH 260/313] Translated using Weblate (Galician)
Currently translated at 100.0% (3168 of 3168 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/gl/
---
src/i18n/strings/gl.json | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/gl.json b/src/i18n/strings/gl.json
index 875a3ff2d2..63fc7d4804 100644
--- a/src/i18n/strings/gl.json
+++ b/src/i18n/strings/gl.json
@@ -3164,5 +3164,7 @@
"Leave all rooms": "Sair de tódalas salas",
"Don't leave any rooms": "Non saír de ningunha sala",
"%(reactors)s reacted with %(content)s": "%(reactors)s reaccionou con %(content)s",
- "Joining space …": "Uníndote ao espazo…"
+ "Joining space …": "Uníndote ao espazo…",
+ "Expand quotes │ ⇧+click": "Despregar citas | ⇧+click",
+ "Collapse quotes │ ⇧+click": "Pechar citas | ⇧+click"
}
From 3df7f3790b61e17a02170610c6c1659473fa49c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Priit=20J=C3=B5er=C3=BC=C3=BCt?= <riot@joeruut.com>
Date: Mon, 27 Sep 2021 21:57:39 +0000
Subject: [PATCH 261/313] Translated using Weblate (Estonian)
Currently translated at 99.9% (3167 of 3168 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/et/
---
src/i18n/strings/et.json | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/i18n/strings/et.json b/src/i18n/strings/et.json
index b4f58e04da..81e8fc3b6c 100644
--- a/src/i18n/strings/et.json
+++ b/src/i18n/strings/et.json
@@ -2705,7 +2705,7 @@
"Invite by username": "Kutsu kasutajanime alusel",
"What projects are you working on?": "Mis ettevõtmistega sa tegeled?",
"Decrypted event source": "Sündmuse dekrüptitud lähtekood",
- "Original event source": "Algse sündmuse lähtekood",
+ "Original event source": "Sündmuse töötlemata lähtekood",
"Failed to remove some rooms. Try again later": "Mõnede jututubade eemaldamine ei õnnestunud. Proovi hiljem uuesti",
"Removing...": "Eemaldan...",
"Mark as not suggested": "Eemalda soovitus",
@@ -3163,5 +3163,7 @@
"You are about to leave <spaceName/>.": "Sa oled lahkumas <spaceName/> kogukonnast.",
"Leave some rooms": "Lahku mõnedest jututubadest",
"Leave all rooms": "Lahku kõikidest jututubadest",
- "Don't leave any rooms": "Ära lahku ühestki jututoast"
+ "Don't leave any rooms": "Ära lahku ühestki jututoast",
+ "Expand quotes │ ⇧+click": "Näita tsitaate │ ⇧+click",
+ "Collapse quotes │ ⇧+click": "Ahenda tsitaadid │ ⇧+click"
}
From 7f63f496be54326b299fe971156ddd1d858883d8 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 28 Sep 2021 14:03:41 +0100
Subject: [PATCH 262/313] delint
---
src/components/structures/SpaceHierarchy.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx
index 5d38cc16c2..ed87b04c8a 100644
--- a/src/components/structures/SpaceHierarchy.tsx
+++ b/src/components/structures/SpaceHierarchy.tsx
@@ -452,7 +452,7 @@ export const useSpaceSummary = (space: Room): {
await hierarchy.load(pageSize);
setRooms(hierarchy.rooms);
setLoading(false);
- }, [hierarchy]);
+ }, [loading, hierarchy]);
return { loading, rooms, hierarchy, loadMore };
};
From c1165830edff18015caf808c28f020c36eaf7d73 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germains@element.io>
Date: Tue, 28 Sep 2021 14:55:00 +0100
Subject: [PATCH 263/313] Create rendering context enum for MessageActionBar
---
src/components/views/messages/MessageActionBar.tsx | 11 ++++++++---
src/components/views/rooms/EventTile.tsx | 9 ++++++---
2 files changed, 14 insertions(+), 6 deletions(-)
diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx
index d3d4d5a693..06817b910a 100644
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/src/components/views/messages/MessageActionBar.tsx
@@ -128,6 +128,11 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
</React.Fragment>;
};
+export enum ActionBarRenderingContext {
+ Room,
+ Thread
+}
+
interface IMessageActionBarProps {
mxEvent: MatrixEvent;
reactions?: Relations;
@@ -137,7 +142,7 @@ interface IMessageActionBarProps {
permalinkCreator?: RoomPermalinkCreator;
onFocusChange?: (menuDisplayed: boolean) => void;
toggleThreadExpanded: () => void;
- isInThreadTimeline?: boolean;
+ renderingContext?: ActionBarRenderingContext;
isQuoteExpanded?: boolean;
}
@@ -146,7 +151,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
public static contextType = RoomContext;
public static defaultProps = {
- isInThreadTimeline: false,
+ renderingContext: ActionBarRenderingContext.Room,
};
public componentDidMount(): void {
@@ -293,7 +298,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
// Like the resend button, the react and reply buttons need to appear before the edit.
// The only catch is we do the reply button first so that we can make sure the react
// button is the very first button without having to do length checks for `splice()`.
- if (this.context.canReply && !this.props.isInThreadTimeline) {
+ if (this.context.canReply && this.props.renderingContext === ActionBarRenderingContext.Room) {
toolbarOpts.splice(0, 0, <>
<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 00f4c058fd..27cf7d761f 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -53,7 +53,7 @@ import SenderProfile from '../messages/SenderProfile';
import MessageTimestamp from '../messages/MessageTimestamp';
import TooltipButton from '../elements/TooltipButton';
import ReadReceiptMarker from "./ReadReceiptMarker";
-import MessageActionBar from "../messages/MessageActionBar";
+import MessageActionBar, { ActionBarRenderingContext } from "../messages/MessageActionBar";
import ReactionsRow from '../messages/ReactionsRow';
import { getEventDisplayInfo } from '../../../utils/EventUtils';
import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
@@ -1056,7 +1056,9 @@ export default class EventTile extends React.Component<IProps, IState> {
}
}
- const isInThreadTimeline = this.props.tileShape === TileShape.Thread;
+ const renderingContext = this.props.tileShape === TileShape.Thread
+ ? ActionBarRenderingContext.Thread
+ : ActionBarRenderingContext.Room;
const actionBar = !isEditing ? <MessageActionBar
mxEvent={this.props.mxEvent}
reactions={this.state.reactions}
@@ -1064,7 +1066,8 @@ export default class EventTile extends React.Component<IProps, IState> {
getTile={this.getTile}
getReplyThread={this.getReplyThread}
onFocusChange={this.onActionBarFocusChange}
- isInThreadTimeline={isInThreadTimeline}
+ renderingContext={renderingContext}
+ isQuoteExpanded={isQuoteExpanded}
toggleThreadExpanded={() => this.setQuoteExpanded(!isQuoteExpanded)}
/> : undefined;
From 8331d4c7b725c4312b6e86a4d3037f09796f871f Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <3636685+Palid@users.noreply.github.com>
Date: Tue, 28 Sep 2021 16:04:25 +0200
Subject: [PATCH 264/313] Happily handle empty text messages (#6825)
This commig refactors the message-deletion modal and reuses it for case of removing
the entire message and trying to send it, which should trigger removal flow instead.
Fix vector-im/element-web#18873
---
.../context_menus/MessageContextMenu.tsx | 36 +++-------------
.../views/dialogs/ConfirmRedactDialog.tsx | 41 +++++++++++++++++++
.../views/rooms/EditMessageComposer.tsx | 9 ++++
src/editor/serialize.ts | 2 +-
4 files changed, 57 insertions(+), 31 deletions(-)
diff --git a/src/components/views/context_menus/MessageContextMenu.tsx b/src/components/views/context_menus/MessageContextMenu.tsx
index c7fcf32260..22dd3ac438 100644
--- a/src/components/views/context_menus/MessageContextMenu.tsx
+++ b/src/components/views/context_menus/MessageContextMenu.tsx
@@ -34,8 +34,7 @@ import ForwardDialog from "../dialogs/ForwardDialog";
import { Action } from "../../../dispatcher/actions";
import ReportEventDialog from '../dialogs/ReportEventDialog';
import ViewSource from '../../structures/ViewSource';
-import ConfirmRedactDialog from '../dialogs/ConfirmRedactDialog';
-import ErrorDialog from '../dialogs/ErrorDialog';
+import { createRedactEventDialog } from '../dialogs/ConfirmRedactDialog';
import ShareDialog from '../dialogs/ShareDialog';
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
import { IPosition, ChevronFace } from '../../structures/ContextMenu';
@@ -140,34 +139,11 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
};
private onRedactClick = (): void => {
- Modal.createTrackedDialog('Confirm Redact Dialog', '', ConfirmRedactDialog, {
- onFinished: async (proceed: boolean, reason?: string) => {
- if (!proceed) return;
-
- const cli = MatrixClientPeg.get();
- try {
- this.props.onCloseDialog?.();
- await cli.redactEvent(
- this.props.mxEvent.getRoomId(),
- this.props.mxEvent.getId(),
- undefined,
- reason ? { reason } : {},
- );
- } catch (e) {
- const code = e.errcode || e.statusCode;
- // only show the dialog if failing for something other than a network error
- // (e.g. no errcode or statusCode) as in that case the redactions end up in the
- // detached queue and we show the room status bar to allow retry
- if (typeof code !== "undefined") {
- // display error message stating you couldn't delete this.
- Modal.createTrackedDialog('You cannot delete this message', '', ErrorDialog, {
- title: _t('Error'),
- description: _t('You cannot delete this message. (%(code)s)', { code }),
- });
- }
- }
- },
- }, 'mx_Dialog_confirmredact');
+ const { mxEvent, onCloseDialog } = this.props;
+ createRedactEventDialog({
+ mxEvent,
+ onCloseDialog,
+ });
this.closeMenu();
};
diff --git a/src/components/views/dialogs/ConfirmRedactDialog.tsx b/src/components/views/dialogs/ConfirmRedactDialog.tsx
index b346d2d44c..74b3320fdf 100644
--- a/src/components/views/dialogs/ConfirmRedactDialog.tsx
+++ b/src/components/views/dialogs/ConfirmRedactDialog.tsx
@@ -14,9 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
import React from 'react';
import { _t } from '../../../languageHandler';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import Modal from '../../../Modal';
import { replaceableComponent } from "../../../utils/replaceableComponent";
+import ErrorDialog from './ErrorDialog';
import TextInputDialog from "./TextInputDialog";
interface IProps {
@@ -42,3 +46,40 @@ export default class ConfirmRedactDialog extends React.Component<IProps> {
);
}
}
+
+export function createRedactEventDialog({
+ mxEvent,
+ onCloseDialog = () => {},
+}: {
+ mxEvent: MatrixEvent;
+ onCloseDialog?: () => void;
+}) {
+ Modal.createTrackedDialog('Confirm Redact Dialog', '', ConfirmRedactDialog, {
+ onFinished: async (proceed: boolean, reason?: string) => {
+ if (!proceed) return;
+
+ const cli = MatrixClientPeg.get();
+ try {
+ onCloseDialog?.();
+ await cli.redactEvent(
+ mxEvent.getRoomId(),
+ mxEvent.getId(),
+ undefined,
+ reason ? { reason } : {},
+ );
+ } catch (e) {
+ const code = e.errcode || e.statusCode;
+ // only show the dialog if failing for something other than a network error
+ // (e.g. no errcode or statusCode) as in that case the redactions end up in the
+ // detached queue and we show the room status bar to allow retry
+ if (typeof code !== "undefined") {
+ // display error message stating you couldn't delete this.
+ Modal.createTrackedDialog('You cannot delete this message', '', ErrorDialog, {
+ title: _t('Error'),
+ description: _t('You cannot delete this message. (%(code)s)', { code }),
+ });
+ }
+ }
+ },
+ }, 'mx_Dialog_confirmredact');
+}
diff --git a/src/components/views/rooms/EditMessageComposer.tsx b/src/components/views/rooms/EditMessageComposer.tsx
index f2f80b7670..33273f1f95 100644
--- a/src/components/views/rooms/EditMessageComposer.tsx
+++ b/src/components/views/rooms/EditMessageComposer.tsx
@@ -42,6 +42,7 @@ import ErrorDialog from "../dialogs/ErrorDialog";
import QuestionDialog from "../dialogs/QuestionDialog";
import { ActionPayload } from "../../../dispatcher/payloads";
import AccessibleButton from '../elements/AccessibleButton';
+import { createRedactEventDialog } from '../dialogs/ConfirmRedactDialog';
import SettingsStore from "../../../settings/SettingsStore";
import { logger } from "matrix-js-sdk/src/logger";
@@ -331,6 +332,14 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
let shouldSend = true;
+ if (newContent?.body === '') {
+ this.cancelPreviousPendingEdit();
+ createRedactEventDialog({
+ mxEvent: editedEvent,
+ });
+ return;
+ }
+
// If content is modified then send an updated event into the room
if (this.isContentModified(newContent)) {
const roomId = editedEvent.getRoomId();
diff --git a/src/editor/serialize.ts b/src/editor/serialize.ts
index 38a73cc945..9822046a0d 100644
--- a/src/editor/serialize.ts
+++ b/src/editor/serialize.ts
@@ -185,7 +185,7 @@ export function startsWith(model: EditorModel, prefix: string, caseSensitive = t
const firstPart = model.parts[0];
// part type will be "plain" while editing,
// and "command" while composing a message.
- let text = firstPart && firstPart.text;
+ let text = firstPart?.text || '';
if (!caseSensitive) {
prefix = prefix.toLowerCase();
text = text.toLowerCase();
From 0bc0dbac17201cdd0599f8a5a739b92381a82103 Mon Sep 17 00:00:00 2001
From: Szimszon <github@oregpreshaz.eu>
Date: Tue, 28 Sep 2021 13:11:37 +0000
Subject: [PATCH 265/313] Translated using Weblate (Hungarian)
Currently translated at 100.0% (3168 of 3168 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/hu/
---
src/i18n/strings/hu.json | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/hu.json b/src/i18n/strings/hu.json
index a547f99c74..4957bc6efa 100644
--- a/src/i18n/strings/hu.json
+++ b/src/i18n/strings/hu.json
@@ -3164,5 +3164,7 @@
"You are about to leave <spaceName/>.": "Éppen el akarja hagyni <spaceName/> teret.",
"Leave some rooms": "Kilépés néhány szobából",
"Leave all rooms": "Kilépés minden szobából",
- "Don't leave any rooms": "Ne lépjen ki egy szobából sem"
+ "Don't leave any rooms": "Ne lépjen ki egy szobából sem",
+ "Expand quotes │ ⇧+click": "Idézetek megnyitása │ ⇧+kattintás",
+ "Collapse quotes │ ⇧+click": "Idézetek bezárása│ ⇧+kattintás"
}
From f4353ea7a4e1d5d6a8ba4c3fb2ab128f14372a4b Mon Sep 17 00:00:00 2001
From: Nikita Epifanov <NikGreens@protonmail.com>
Date: Tue, 28 Sep 2021 13:12:36 +0000
Subject: [PATCH 266/313] Translated using Weblate (Russian)
Currently translated at 98.2% (3114 of 3168 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/ru/
---
src/i18n/strings/ru.json | 26 +++++++++++++++++++++++++-
1 file changed, 25 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/ru.json b/src/i18n/strings/ru.json
index 40d6935a82..a06dd2f72f 100644
--- a/src/i18n/strings/ru.json
+++ b/src/i18n/strings/ru.json
@@ -3138,5 +3138,29 @@
"%(senderName)s unpinned a message from this room. See all pinned messages.": "%(senderName)s открепляет сообщение из этой комнаты. Просмотрите все прикрепленые сообщения.",
"%(senderName)s unpinned <a>a message</a> from this room. See all <b>pinned messages</b>.": "%(senderName)s открепляет <a>сообщение</a> из этой комнаты. Просмотрите все <b>прикрепленые сообщения</b>.",
"%(senderName)s pinned a message to this room. See all pinned messages.": "%(senderName)s прикрепляет сообщение в этой комнате. Просмотрите все прикрепленные сообщения.",
- "%(senderName)s pinned <a>a message</a> to this room. See all <b>pinned messages</b>.": "%(senderName)s прикрепляет <a>сообщение</a> в этой комнате. Просмотрите все <b>прикрепленые сообщения</b>."
+ "%(senderName)s pinned <a>a message</a> to this room. See all <b>pinned messages</b>.": "%(senderName)s прикрепляет <a>сообщение</a> в этой комнате. Просмотрите все <b>прикрепленые сообщения</b>.",
+ "To join this Space, hide communities in your <a>preferences</a>": "Чтобы присоединиться к этому пространству, скройте сообщества в ваших <a>настройках</a>",
+ "To view this Space, hide communities in your <a>preferences</a>": "Чтобы просмотреть это пространство, скройте сообщества в ваших <a>настройках</a>",
+ "To join %(communityName)s, swap to communities in your <a>preferences</a>": "Чтобы присоединиться к %(communityName)s, переключитесь на сообщества в ваших <a>настройках</a>",
+ "To view %(communityName)s, swap to communities in your <a>preferences</a>": "Для просмотра %(communityName)s, переключитесь на сообщества в ваших <a>настройках</a>",
+ "Private community": "Приватное сообщество",
+ "Public community": "Публичное сообщество",
+ "Leave some rooms": "Покинуть несколько комнат",
+ "Leave all rooms": "Покинуть все комнаты",
+ "Don't leave any rooms": "Не покидать ни одну комнату",
+ "Would you like to leave the rooms in this space?": "Хотите ли вы покинуть комнаты в этом пространстве?",
+ "You are about to leave <spaceName/>.": "Вы собираетесь покинуть <spaceName/>.",
+ "%(reactors)s reacted with %(content)s": "%(reactors)s отреагировали %(content)s",
+ "Expand quotes │ ⇧+click": "Развернуть цитаты │ ⇧+нажатие",
+ "Collapse quotes │ ⇧+click": "Свернуть цитаты │ ⇧+нажатие",
+ "Message": "Сообщение",
+ "Joining space …": "Присоединение к пространству…",
+ "Message didn't send. Click for info.": "Сообщение не отправлено. Нажмите для получения информации.",
+ "Upgrade anyway": "Обновить в любом случае",
+ "This room is in some spaces you’re not an admin of. In those spaces, the old room will still be shown, but people will be prompted to join the new one.": "Эта комната находится в некоторых пространствах, администратором которых вы не являетесь. В этих пространствах старая комната будет по-прежнему отображаться, но людям будет предложено присоединиться к новой.",
+ "Before you upgrade": "Перед обновлением",
+ "To join a space you'll need an invite.": "Чтобы присоединиться к пространству, вам нужно получить приглашение.",
+ "Temporarily show communities instead of Spaces for this session. Support for this will be removed in the near future. This will reload Element.": "Временно показывать сообщества вместо пространств для этой сессии. Поддержка этого будет удалена в ближайшем будущем. Это перезагрузит Element.",
+ "Display Communities instead of Spaces": "Показывать сообщества вместо пространств",
+ "You can also make Spaces from <a>communities</a>.": "Вы также можете создать пространство из <a>сообщества</a>."
}
From d7c43c7cf8b5a9701ab7003b7c7e4c9bc3fa5171 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 28 Sep 2021 15:37:57 +0100
Subject: [PATCH 267/313] Fix space children without specific `order` being
sorted after those with one
---
src/stores/SpaceStore.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index d440c33c83..73feb300a5 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -93,7 +93,7 @@ const validOrder = (order: string): string | undefined => {
// For sorting space children using a validated `order`, `m.room.create`'s `origin_server_ts`, `room_id`
export const getChildOrder = (order: string, creationTs: number, roomId: string): Array<Many<ListIteratee<any>>> => {
- return [validOrder(order), creationTs, roomId];
+ return [validOrder(order) ?? NaN, creationTs, roomId]; // NaN has lodash sort it at the end in asc
};
const getRoomFn: FetchRoomFn = (room: Room) => {
From 4335cd03c5f5d5c9ff5f5da60b3c5738b7b15062 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 28 Sep 2021 16:30:17 +0100
Subject: [PATCH 268/313] Pluck out JoinRuleSettings styles so they apply in
space settings too
---
res/css/_components.scss | 4 +-
res/css/views/settings/_JoinRuleSettings.scss | 56 +++++++++++++++++++
.../tabs/room/_SecurityRoomSettingsTab.scss | 41 --------------
.../views/settings/JoinRuleSettings.tsx | 4 +-
4 files changed, 61 insertions(+), 44 deletions(-)
create mode 100644 res/css/views/settings/_JoinRuleSettings.scss
diff --git a/res/css/_components.scss b/res/css/_components.scss
index ffaec43b68..4ef95e8cd8 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -1,8 +1,10 @@
// autogenerated by rethemendex.sh
+@import "./_animations.scss";
@import "./_common.scss";
@import "./_font-sizes.scss";
@import "./_font-weights.scss";
@import "./structures/_AutoHideScrollbar.scss";
+@import "./structures/_BackdropPanel.scss";
@import "./structures/_CompatibilityPage.scss";
@import "./structures/_ContextualMenu.scss";
@import "./structures/_CreateRoom.scss";
@@ -17,7 +19,6 @@
@import "./structures/_LeftPanelWidget.scss";
@import "./structures/_MainSplit.scss";
@import "./structures/_MatrixChat.scss";
-@import "./structures/_BackdropPanel.scss";
@import "./structures/_MyGroups.scss";
@import "./structures/_NonUrgentToastContainer.scss";
@import "./structures/_NotificationPanel.scss";
@@ -243,6 +244,7 @@
@import "./views/settings/_E2eAdvancedPanel.scss";
@import "./views/settings/_EmailAddresses.scss";
@import "./views/settings/_IntegrationManager.scss";
+@import "./views/settings/_JoinRuleSettings.scss";
@import "./views/settings/_LayoutSwitcher.scss";
@import "./views/settings/_Notifications.scss";
@import "./views/settings/_PhoneNumbers.scss";
diff --git a/res/css/views/settings/_JoinRuleSettings.scss b/res/css/views/settings/_JoinRuleSettings.scss
new file mode 100644
index 0000000000..35c58c92a1
--- /dev/null
+++ b/res/css/views/settings/_JoinRuleSettings.scss
@@ -0,0 +1,56 @@
+/*
+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_JoinRuleSettings_upgradeRequired {
+ margin-left: 16px;
+ padding: 4px 16px;
+ border: 1px solid $accent-color;
+ border-radius: 8px;
+ color: $accent-color;
+ font-size: $font-12px;
+ line-height: $font-15px;
+}
+
+.mx_JoinRuleSettings_spacesWithAccess {
+ > h4 {
+ color: $secondary-content;
+ font-weight: $font-semi-bold;
+ font-size: $font-12px;
+ line-height: $font-15px;
+ text-transform: uppercase;
+ }
+
+ > span {
+ font-weight: 500;
+ font-size: $font-14px;
+ line-height: 32px; // matches height of avatar for v-align
+ color: $secondary-content;
+ display: inline-block;
+
+ img.mx_RoomAvatar_isSpaceRoom,
+ .mx_RoomAvatar_isSpaceRoom img {
+ border-radius: 8px;
+ }
+
+ .mx_BaseAvatar {
+ margin-right: 8px;
+ }
+
+ & + span {
+ margin-left: 16px;
+ }
+ }
+}
diff --git a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
index 8fd0f14418..c43c2aa1d7 100644
--- a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
+++ b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
@@ -19,37 +19,6 @@ limitations under the License.
padding: 0;
margin-bottom: 16px;
}
-
- .mx_SecurityRoomSettingsTab_spacesWithAccess {
- > h4 {
- color: $secondary-content;
- font-weight: $font-semi-bold;
- font-size: $font-12px;
- line-height: $font-15px;
- text-transform: uppercase;
- }
-
- > span {
- font-weight: 500;
- font-size: $font-14px;
- line-height: 32px; // matches height of avatar for v-align
- color: $secondary-content;
- display: inline-block;
-
- img.mx_RoomAvatar_isSpaceRoom,
- .mx_RoomAvatar_isSpaceRoom img {
- border-radius: 8px;
- }
-
- .mx_BaseAvatar {
- margin-right: 8px;
- }
-
- & + span {
- margin-left: 16px;
- }
- }
- }
}
.mx_SecurityRoomSettingsTab_warning {
@@ -69,16 +38,6 @@ limitations under the License.
margin-bottom: 32px;
}
-.mx_SecurityRoomSettingsTab_upgradeRequired {
- margin-left: 16px;
- padding: 4px 16px;
- border: 1px solid $accent-color;
- border-radius: 8px;
- color: $accent-color;
- font-size: $font-12px;
- line-height: $font-15px;
-}
-
.mx_SecurityRoomSettingsTab_joinRule {
.mx_RadioButton {
padding-top: 16px;
diff --git a/src/components/views/settings/JoinRuleSettings.tsx b/src/components/views/settings/JoinRuleSettings.tsx
index a32d147d3a..2dec4e601a 100644
--- a/src/components/views/settings/JoinRuleSettings.tsx
+++ b/src/components/views/settings/JoinRuleSettings.tsx
@@ -97,7 +97,7 @@ const JoinRuleSettings = ({ room, promptUpgrade, onError, beforeChange, closeSet
if (roomSupportsRestricted || preferredRestrictionVersion || joinRule === JoinRule.Restricted) {
let upgradeRequiredPill;
if (preferredRestrictionVersion) {
- upgradeRequiredPill = <span className="mx_SecurityRoomSettingsTab_upgradeRequired">
+ upgradeRequiredPill = <span className="mx_JoinRuleSettings_upgradeRequired">
{ _t("Upgrade required") }
</span>;
}
@@ -165,7 +165,7 @@ const JoinRuleSettings = ({ room, promptUpgrade, onError, beforeChange, closeSet
}) }
</span>
- <div className="mx_SecurityRoomSettingsTab_spacesWithAccess">
+ <div className="mx_JoinRuleSettings_spacesWithAccess">
<h4>{ _t("Spaces with access") }</h4>
{ shownSpaces.map(room => {
return <span key={room.roomId}>
From 02c5b7e28d10f8a361b353999ab0fdd222dab6ee Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 28 Sep 2021 16:36:25 +0100
Subject: [PATCH 269/313] Pluck out some more applicable styles
---
res/css/views/settings/_JoinRuleSettings.scss | 32 +++++++++++++++++
.../tabs/room/_SecurityRoomSettingsTab.scss | 34 -------------------
.../views/settings/JoinRuleSettings.tsx | 2 ++
3 files changed, 34 insertions(+), 34 deletions(-)
diff --git a/res/css/views/settings/_JoinRuleSettings.scss b/res/css/views/settings/_JoinRuleSettings.scss
index 35c58c92a1..8b520b2ab1 100644
--- a/res/css/views/settings/_JoinRuleSettings.scss
+++ b/res/css/views/settings/_JoinRuleSettings.scss
@@ -54,3 +54,35 @@ limitations under the License.
}
}
}
+
+.mx_JoinRuleSettings_radioButton {
+ padding-top: 16px;
+ margin-bottom: 8px;
+
+ .mx_RadioButton_content {
+ margin-left: 14px;
+ font-weight: $font-semi-bold;
+ font-size: $font-15px;
+ line-height: $font-24px;
+ color: $primary-content;
+ display: block;
+ }
+
+ & + span {
+ display: inline-block;
+ margin-left: 34px;
+ margin-bottom: 16px;
+ font-size: $font-15px;
+ line-height: $font-24px;
+ color: $secondary-content;
+
+ & + .mx_RadioButton {
+ border-top: 1px solid $menu-border-color;
+ }
+ }
+}
+
+.mx_JoinRuleSettings_linkButton {
+ padding: 0;
+ font-size: inherit;
+}
diff --git a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
index c43c2aa1d7..a3b3b17899 100644
--- a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
+++ b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
@@ -37,37 +37,3 @@ limitations under the License.
border-bottom: 1px solid $menu-border-color;
margin-bottom: 32px;
}
-
-.mx_SecurityRoomSettingsTab_joinRule {
- .mx_RadioButton {
- padding-top: 16px;
- margin-bottom: 8px;
-
- .mx_RadioButton_content {
- margin-left: 14px;
- font-weight: $font-semi-bold;
- font-size: $font-15px;
- line-height: $font-24px;
- color: $primary-content;
- display: block;
- }
- }
-
- > span {
- display: inline-block;
- margin-left: 34px;
- margin-bottom: 16px;
- font-size: $font-15px;
- line-height: $font-24px;
- color: $secondary-content;
-
- & + .mx_RadioButton {
- border-top: 1px solid $menu-border-color;
- }
- }
-
- .mx_AccessibleButton_kind_link {
- padding: 0;
- font-size: inherit;
- }
-}
diff --git a/src/components/views/settings/JoinRuleSettings.tsx b/src/components/views/settings/JoinRuleSettings.tsx
index 2dec4e601a..76596103f5 100644
--- a/src/components/views/settings/JoinRuleSettings.tsx
+++ b/src/components/views/settings/JoinRuleSettings.tsx
@@ -159,6 +159,7 @@ const JoinRuleSettings = ({ room, promptUpgrade, onError, beforeChange, closeSet
disabled={disabled}
onClick={onEditRestrictedClick}
kind="link"
+ className="mx_JoinRuleSettings_linkButton"
>
{ sub }
</AccessibleButton>,
@@ -286,6 +287,7 @@ const JoinRuleSettings = ({ room, promptUpgrade, onError, beforeChange, closeSet
onChange={onChange}
definitions={definitions}
disabled={disabled}
+ className="mx_JoinRuleSettings_radioButton"
/>
);
};
From e24924e3d6da7553b412a5746a327f3f42d77283 Mon Sep 17 00:00:00 2001
From: libexus <libexus@gmail.com>
Date: Tue, 28 Sep 2021 16:34:53 +0000
Subject: [PATCH 270/313] Translated using Weblate (German)
Currently translated at 99.1% (3141 of 3168 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/
---
src/i18n/strings/de_DE.json | 23 ++++++++++++++++++++++-
1 file changed, 22 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/de_DE.json b/src/i18n/strings/de_DE.json
index 61f6239929..a85a662dd3 100644
--- a/src/i18n/strings/de_DE.json
+++ b/src/i18n/strings/de_DE.json
@@ -3134,5 +3134,26 @@
"Joining space …": "Space beitreten…",
"To join a space you'll need an invite.": "Um einem Space beizutreten brauchst du eine Einladung.",
"Temporarily show communities instead of Spaces for this session. Support for this will be removed in the near future. This will reload Element.": "In dieser Sitzung temporär Communities statt Spaces anzeigen. Unterstützung hierfür wird in naher Zukunft entfernt. Dies wird Element neu laden.",
- "Display Communities instead of Spaces": "Communities statt Spaces anzeigen"
+ "Display Communities instead of Spaces": "Communities statt Spaces anzeigen",
+ "To join this Space, hide communities in your <a>preferences</a>": "<a>Deaktiviere Communities in den Einstellungen</a>, um diesen Space beizutreten.",
+ "To view this Space, hide communities in your <a>preferences</a>": "<a>Deaktiviere Communities in den Einstellungen</a>, um diesen Space anzuzeigen.",
+ "To join %(communityName)s, swap to communities in your <a>preferences</a>": "Um %(communityName)s beizutreten, <a>aktiviere Communities in den Einstellungen</a>",
+ "To view %(communityName)s, swap to communities in your <a>preferences</a>": "Um %(communityName)s anzuzeigen, <a>aktiviere Communities in den Einstellungen</a>",
+ "Private community": "Private Community",
+ "Public community": "Öffentliche Community",
+ "You are about to leave <spaceName/>.": "Du bist dabei, <spaceName/> zu verlassen.",
+ "Leave some rooms": "Zu verlassende Räume auswählen",
+ "Leave all rooms": "Alle Räume verlassen",
+ "Don't leave any rooms": "Räume nicht verlassen",
+ "%(reactors)s reacted with %(content)s": "%(reactors)s hat mit %(content)s reagiert",
+ "Some encryption parameters have been changed.": "Einige Verschlüsselungsoptionen wurden geändert.",
+ "Message": "Nachricht",
+ "Message didn't send. Click for info.": "Nachricht nicht gesendet. Klicke für Details.",
+ "To avoid these issues, create a <a>new public room</a> for the conversation you plan to have.": "<a>Erstelle einen neuen Raum für deine Konversation</a>, um diese Probleme zu umgehen.",
+ "<b>It's not recommended to make encrypted rooms public.</b> It will mean anyone can find and join the room, so anyone can read messages. You'll get none of the benefits of encryption. Encrypting messages in a public room will make receiving and sending messages slower.": "<b>Es ist nicht sinnvoll, verschlüsselte Räume öffentlich zu machen.</b> Da jeder den Raum betreten kann, kann auch jeder Nachrichten lesen, was die Verschlüsselung sinnlos macht. Außerdem wird das Senden und Empfangen von Nachrichten langsamer werden.",
+ "Select the roles required to change various parts of the space": "Wähle, von wem folgende Aktionen ausgeführt werden können",
+ "Upgrade anyway": "Trotzdem upgraden",
+ "This room is in some spaces you’re not an admin of. In those spaces, the old room will still be shown, but people will be prompted to join the new one.": "Dieser Raum ist in einigen Spaces, in denen du nicht Admin bist. Daher wird dort noch der alte Raum angezeigt, die Leute werden aber auf den neuen Raum hingewiesen.",
+ "Before you upgrade": "Bevor du upgradest",
+ "You can also make Spaces from <a>communities</a>.": "Du kannst Spaces auch aus <a>Communities</a> erstellen."
}
From d91116134d760e343dbc16ead403185739c25351 Mon Sep 17 00:00:00 2001
From: jelv <post@jelv.nl>
Date: Tue, 28 Sep 2021 19:11:51 +0000
Subject: [PATCH 271/313] Translated using Weblate (Dutch)
Currently translated at 100.0% (3168 of 3168 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/nl/
---
src/i18n/strings/nl.json | 8 +++++---
1 file changed, 5 insertions(+), 3 deletions(-)
diff --git a/src/i18n/strings/nl.json b/src/i18n/strings/nl.json
index 950eaa68a2..cf289f40de 100644
--- a/src/i18n/strings/nl.json
+++ b/src/i18n/strings/nl.json
@@ -3035,7 +3035,7 @@
"Search for rooms or spaces": "Kamers of ruimtes zoeken",
"Add space": "Ruimte toevoegen",
"Leave %(spaceName)s": "%(spaceName)s verlaten",
- "You're the only admin of some of the rooms or spaces you wish to leave. Leaving them will leave them without any admins.": "U bent de enige beheerder van sommige kamers of spaces die u wilt verlaten. Door deze te verlaten hebben ze geen beheerder meer.",
+ "You're the only admin of some of the rooms or spaces you wish to leave. Leaving them will leave them without any admins.": "U bent de enige beheerder van sommige kamers of ruimtes die u wilt verlaten. Door deze te verlaten hebben ze geen beheerder meer.",
"You're the only admin of this space. Leaving it will mean no one has control over it.": "U bent de enige beheerder van deze ruimte. Door het te verlaten zal er niemand meer controle over hebben.",
"You won't be able to rejoin unless you are re-invited.": "U kunt niet opnieuw deelnemen behalve als u opnieuw wordt uitgenodigd.",
"Search %(spaceName)s": "Zoek %(spaceName)s",
@@ -3094,7 +3094,7 @@
"A link to the Space will be put in your community description.": "In de gemeenschapsomschrijving zal een link naar deze ruimte worden geplaatst.",
"Create Space from community": "Ruimte van gemeenschap maken",
"Failed to migrate community": "Omzetten van de gemeenschap is mislukt",
- "To create a Space from another community, just pick the community in Preferences.": "Om een Space te maken van een gemeenschap kiest u de gemeenschap in Instellingen.",
+ "To create a Space from another community, just pick the community in Preferences.": "Om een ruimte te maken van een gemeenschap kiest u de gemeenschap in Instellingen.",
"<SpaceName/> has been made and everyone who was a part of the community has been invited to it.": "<SpaceName/> is gemaakt en iedereen die lid was van de gemeenschap is ervoor uitgenodigd.",
"Space created": "Ruimte aangemaakt",
"To view Spaces, hide communities in <a>Preferences</a>": "Om ruimtes te zien, verberg gemeenschappen in uw <a>Instellingen</a>",
@@ -3164,5 +3164,7 @@
"You are about to leave <spaceName/>.": "U staat op het punt <spaceName/> te verlaten.",
"Leave some rooms": "Sommige kamers verlaten",
"Leave all rooms": "Alle kamers verlaten",
- "Don't leave any rooms": "Geen kamers verlaten"
+ "Don't leave any rooms": "Geen kamers verlaten",
+ "Expand quotes │ ⇧+click": "Quotes uitvouwen │ ⇧+click",
+ "Collapse quotes │ ⇧+click": "Quotes invouwen │ ⇧+click"
}
From e135d0e0b362c8809aa20599e1ea94ecb0bb446d Mon Sep 17 00:00:00 2001
From: random <dictionary@tutamail.com>
Date: Tue, 28 Sep 2021 15:50:33 +0000
Subject: [PATCH 272/313] Translated using Weblate (Italian)
Currently translated at 99.9% (3167 of 3168 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/it/
---
src/i18n/strings/it.json | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/it.json b/src/i18n/strings/it.json
index 022149e3c6..b12554e256 100644
--- a/src/i18n/strings/it.json
+++ b/src/i18n/strings/it.json
@@ -3166,5 +3166,7 @@
"You are about to leave <spaceName/>.": "Stai per uscire da <spaceName/>.",
"Leave some rooms": "Esci da alcune stanze",
"Leave all rooms": "Esci da tutte le stanze",
- "Don't leave any rooms": "Non uscire da alcuna stanza"
+ "Don't leave any rooms": "Non uscire da alcuna stanza",
+ "Expand quotes │ ⇧+click": "Espandi le menzioni │ ⇧+clic",
+ "Collapse quotes │ ⇧+click": "Riduci le menzioni │ ⇧+clic"
}
From b285315cb8a5566e444754784cd6c8df3f812b83 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 29 Sep 2021 11:16:41 +0100
Subject: [PATCH 273/313] Fix `ScrollPanel.isAtBottom` for non-standard DPI
settings
---
src/components/structures/ScrollPanel.tsx | 11 +++++++++--
1 file changed, 9 insertions(+), 2 deletions(-)
diff --git a/src/components/structures/ScrollPanel.tsx b/src/components/structures/ScrollPanel.tsx
index 2eae585f4f..563686cee4 100644
--- a/src/components/structures/ScrollPanel.tsx
+++ b/src/components/structures/ScrollPanel.tsx
@@ -277,8 +277,15 @@ export default class ScrollPanel extends React.Component<IProps> {
// fractional values (both too big and too small)
// for scrollTop happen on certain browsers/platforms
// when scrolled all the way down. E.g. Chrome 72 on debian.
- // so check difference <= 1;
- return Math.abs(sn.scrollHeight - (sn.scrollTop + sn.clientHeight)) <= 1;
+ //
+ // We therefore leave a bit of wiggle-room and assume we're at the
+ // bottom if the unscrolled area is less than one pixel high.
+ //
+ // non-standard DPI settings also seem to have effect here and can
+ // actually lead to scrollTop+clientHeight being *larger* than
+ // scrollHeight. (observed in element-desktop on Ubuntu 20.04)
+ //
+ return sn.scrollHeight - (sn.scrollTop + sn.clientHeight) <= 1;
};
// returns the vertical height in the given direction that can be removed from
From c99216814f141202a766b041e467c9d124d938ef Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 29 Sep 2021 11:20:51 +0100
Subject: [PATCH 274/313] fix lint
---
src/components/structures/ScrollPanel.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/structures/ScrollPanel.tsx b/src/components/structures/ScrollPanel.tsx
index 563686cee4..0ea070627a 100644
--- a/src/components/structures/ScrollPanel.tsx
+++ b/src/components/structures/ScrollPanel.tsx
@@ -284,7 +284,7 @@ export default class ScrollPanel extends React.Component<IProps> {
// non-standard DPI settings also seem to have effect here and can
// actually lead to scrollTop+clientHeight being *larger* than
// scrollHeight. (observed in element-desktop on Ubuntu 20.04)
- //
+ //
return sn.scrollHeight - (sn.scrollTop + sn.clientHeight) <= 1;
};
From 842ab0af05f8f83e92b4bec80fd056fe8440b1e4 Mon Sep 17 00:00:00 2001
From: Andy Balaam <andyb@element.io>
Date: Wed, 29 Sep 2021 11:18:15 +0100
Subject: [PATCH 275/313] Remove extra 'are' in README
Signed-off-by: Andy Balaam <andyb@element.io>
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 67e5e12f59..4588a0586e 100644
--- a/README.md
+++ b/README.md
@@ -48,7 +48,7 @@ Code should be committed as follows:
* CSS: https://github.com/matrix-org/matrix-react-sdk/tree/master/res/css
* Theme specific CSS & resources: https://github.com/matrix-org/matrix-react-sdk/tree/master/res/themes
-React components in matrix-react-sdk are come in two different flavours:
+React components in matrix-react-sdk come in two different flavours:
'structures' and 'views'. Structures are stateful components which handle the
more complicated business logic of the app, delegating their actual presentation
rendering to stateless 'view' components. For instance, the RoomView component
From af8c07a69b5e65e7f10cfd5943f2605a6d7496d6 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 29 Sep 2021 11:45:27 +0100
Subject: [PATCH 276/313] Ensure that sub-spaces aren't considered for
notification badges
---
src/stores/SpaceStore.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index d440c33c83..ea482ffb9b 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -595,7 +595,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
// Update NotificationStates
this.getNotificationState(s).setRooms(visibleRooms.filter(room => {
- if (!roomIds.has(room.roomId)) return false;
+ if (!roomIds.has(room.roomId) || room.isSpaceRoom()) return false;
if (DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
return s === HOME_SPACE;
From 0e79daee4bd25d139c630e6b512bf9fd774902b6 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 29 Sep 2021 11:53:13 +0100
Subject: [PATCH 277/313] Remove stale new in the spaces beta toast & modal
---
src/stores/SpaceStore.tsx | 59 ---------------------------------------
1 file changed, 59 deletions(-)
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index d440c33c83..30df579fdf 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -233,65 +233,6 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
window.localStorage.removeItem(ACTIVE_SPACE_LS_KEY);
}
- // New in Spaces beta toast for Restricted Join Rule
- const lsKey = "mx_SpaceBeta_restrictedJoinRuleToastSeen";
- if (contextSwitch && space?.getJoinRule() === JoinRule.Invite && shouldShowSpaceSettings(space) &&
- space.getJoinedMemberCount() > 1 && !localStorage.getItem(lsKey)
- && this.restrictedJoinRuleSupport?.preferred
- ) {
- const toastKey = "restrictedjoinrule";
- ToastStore.sharedInstance().addOrReplaceToast({
- key: toastKey,
- title: _t("New in the Spaces beta"),
- props: {
- description: _t("Help people in spaces to find and join private rooms"),
- acceptLabel: _t("Learn more"),
- onAccept: () => {
- localStorage.setItem(lsKey, "true");
- ToastStore.sharedInstance().dismissToast(toastKey);
-
- Modal.createTrackedDialog("New in the Spaces beta", "restricted join rule", InfoDialog, {
- title: _t("Help space members find private rooms"),
- description: <>
- <p>{ _t("To help space members find and join a private room, " +
- "go to that room's Security & Privacy settings.") }</p>
-
- { /* Reuses classes from TabbedView for simplicity, non-interactive */ }
- <div className="mx_TabbedView_tabsOnLeft" style={{ width: "190px", position: "relative" }}>
- <div className="mx_TabbedView_tabLabel">
- <span className="mx_TabbedView_maskedIcon mx_RoomSettingsDialog_settingsIcon" />
- <span className="mx_TabbedView_tabLabel_text">{ _t("General") }</span>
- </div>
- <div className="mx_TabbedView_tabLabel mx_TabbedView_tabLabel_active">
- <span className="mx_TabbedView_maskedIcon mx_RoomSettingsDialog_securityIcon" />
- <span className="mx_TabbedView_tabLabel_text">{ _t("Security & Privacy") }</span>
- </div>
- <div className="mx_TabbedView_tabLabel">
- <span className="mx_TabbedView_maskedIcon mx_RoomSettingsDialog_rolesIcon" />
- <span className="mx_TabbedView_tabLabel_text">{ _t("Roles & Permissions") }</span>
- </div>
- </div>
-
- <p>{ _t("This makes it easy for rooms to stay private to a space, " +
- "while letting people in the space find and join them. " +
- "All new rooms in a space will have this option available.") }</p>
- </>,
- button: _t("OK"),
- hasCloseButton: false,
- fixedWidth: true,
- });
- },
- rejectLabel: _t("Skip"),
- onReject: () => {
- localStorage.setItem(lsKey, "true");
- ToastStore.sharedInstance().dismissToast(toastKey);
- },
- },
- component: GenericToast,
- priority: 35,
- });
- }
-
if (space) {
this.loadSuggestedRooms(space);
}
From c9915421f883b9829b0ebf67e0909ec579ad8d6c Mon Sep 17 00:00:00 2001
From: jelv <post@jelv.nl>
Date: Wed, 29 Sep 2021 10:34:23 +0000
Subject: [PATCH 278/313] Translated using Weblate (Dutch)
Currently translated at 100.0% (3168 of 3168 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/nl/
---
src/i18n/strings/nl.json | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/i18n/strings/nl.json b/src/i18n/strings/nl.json
index cf289f40de..f13b8e77f9 100644
--- a/src/i18n/strings/nl.json
+++ b/src/i18n/strings/nl.json
@@ -902,7 +902,7 @@
"Select the roles required to change various parts of the room": "Selecteer de vereiste rollen om verschillende delen van het gesprek te wijzigen",
"Enable encryption?": "Versleuteling inschakelen?",
"Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly. <a>Learn more about encryption.</a>": "Kamerversleuteling is onomkeerbaar. Berichten in versleutelde kamers zijn niet leesbaar voor de server; enkel voor de deelnemers. Veel robots en bruggen werken niet correct in versleutelde kamers. <a>Lees meer over versleuteling.</a>",
- "Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.": "Wijzigingen aan wie de geschiedenis kan lezen gelden enkel voor toekomstige berichten in dit gesprek. De zichtbaarheid van de bestaande geschiedenis blijft ongewijzigd.",
+ "Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.": "Wijzigingen aan de leesregels van de geschiedenis gelden alleen voor toekomstige berichten in deze kamer. De zichtbaarheid van de bestaande geschiedenis blijft ongewijzigd.",
"Encryption": "Versleuteling",
"Once enabled, encryption cannot be disabled.": "Eenmaal ingeschakeld kan versleuteling niet meer worden uitgeschakeld.",
"Encrypted": "Versleuteld",
@@ -2977,7 +2977,7 @@
"Connection failed": "Verbinding mislukt",
"Could not connect media": "Mediaverbinding mislukt",
"Spaces with access": "Ruimtes met toegang",
- "Anyone in a space can find and join. <a>Edit which spaces can access here.</a>": "Iedereen in een ruimte kan zoeken en deelnemen. <a>Wijzig hier welke ruimtes toegang hebben.</a>",
+ "Anyone in a space can find and join. <a>Edit which spaces can access here.</a>": "Iedereen in een ruimte kan hem vinden en deelnemen. <a>Wijzig hier welke ruimtes toegang hebben.</a>",
"Currently, %(count)s spaces have access|other": "Momenteel hebben %(count)s ruimtes toegang",
"& %(count)s more|other": "& %(count)s meer",
"Upgrade required": "Upgrade noodzakelijk",
@@ -2997,7 +2997,7 @@
"People with supported clients will be able to join the room without having a registered account.": "Personen met geschikte apps zullen aan de kamer kunnen deelnemen zonder een account te hebben.",
"Decide who can join %(roomName)s.": "Kies wie kan deelnemen aan %(roomName)s.",
"Space members": "Ruimte leden",
- "Anyone in a space can find and join. You can select multiple spaces.": "Iedereen in een ruimte kan zoeken en deelnemen. U kunt meerdere ruimtes selecteren.",
+ "Anyone in a space can find and join. You can select multiple spaces.": "Iedereen in een ruimte kan hem vinden en deelnemen. U kunt meerdere ruimtes selecteren.",
"Visible to space members": "Zichtbaar voor ruimte leden",
"Public room": "Openbaar gesprek",
"Private room (invite only)": "Privégesprek (alleen op uitnodiging)",
@@ -3142,7 +3142,7 @@
"Change main address for the space": "Hoofdadres van ruimte wijzigen",
"Change space name": "Ruimtenaam wijzigen",
"Change space avatar": "Ruimte-afbeelding wijzigen",
- "Anyone in <spaceName/> can find and join. You can select other spaces too.": "Iedereen in <spaceName/> kan zoeken en deelnemen. U kunt ook andere ruimtes selecteren.",
+ "Anyone in <spaceName/> can find and join. You can select other spaces too.": "Iedereen in <spaceName/> kan hem vinden en deelnemen. U kunt ook andere ruimtes selecteren.",
"Message didn't send. Click for info.": "Bericht is niet verstuur. Klik voor meer info.",
"To join %(communityName)s, swap to communities in your <a>preferences</a>": "Om aan %(communityName)s deel te nemen, wissel naar gemeenschappen in uw <a>instellingen</a>",
"To view %(communityName)s, swap to communities in your <a>preferences</a>": "Om %(communityName)s te bekijken, wissel naar gemeenschappen in uw <a>instellingen</a>",
From 21e93febb6c5447ba1d23ed0e12aedcb7d59ec6f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 29 Sep 2021 11:54:03 +0100
Subject: [PATCH 279/313] i18n
---
src/i18n/strings/en_EN.json | 15 +++++----------
1 file changed, 5 insertions(+), 10 deletions(-)
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index bc45caedb5..62cd130110 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -773,16 +773,6 @@
"The person who invited you already left the room.": "The person who invited you already left the room.",
"The person who invited you already left the room, or their server is offline.": "The person who invited you already left the room, or their server is offline.",
"Failed to join room": "Failed to join room",
- "New in the Spaces beta": "New in the Spaces beta",
- "Help people in spaces to find and join private rooms": "Help people in spaces to find and join private rooms",
- "Learn more": "Learn more",
- "Help space members find private rooms": "Help space members find private rooms",
- "To help space members find and join a private room, go to that room's Security & Privacy settings.": "To help space members find and join a private room, go to that room's Security & Privacy settings.",
- "General": "General",
- "Security & Privacy": "Security & Privacy",
- "Roles & Permissions": "Roles & Permissions",
- "This makes it easy for rooms to stay private to a space, while letting people in the space find and join them. All new rooms in a space will have this option available.": "This makes it easy for rooms to stay private to a space, while letting people in the space find and join them. All new rooms in a space will have this option available.",
- "Skip": "Skip",
"You joined the call": "You joined the call",
"%(senderName)s joined the call": "%(senderName)s joined the call",
"Call in progress": "Call in progress",
@@ -1056,6 +1046,7 @@
"Invite people": "Invite people",
"Invite with email or username": "Invite with email or username",
"Failed to save space settings.": "Failed to save space settings.",
+ "General": "General",
"Edit settings relating to your space.": "Edit settings relating to your space.",
"Saving...": "Saving...",
"Save Changes": "Save Changes",
@@ -1465,6 +1456,7 @@
"Muted Users": "Muted Users",
"Banned users": "Banned users",
"Send %(eventType)s events": "Send %(eventType)s events",
+ "Roles & Permissions": "Roles & Permissions",
"Permissions": "Permissions",
"Select the roles required to change various parts of the space": "Select the roles required to change various parts of the space",
"Select the roles required to change various parts of the room": "Select the roles required to change various parts of the room",
@@ -1487,6 +1479,7 @@
"Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.": "Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.",
"People with supported clients will be able to join the room without having a registered account.": "People with supported clients will be able to join the room without having a registered account.",
"Who can read history?": "Who can read history?",
+ "Security & Privacy": "Security & Privacy",
"Once enabled, encryption cannot be disabled.": "Once enabled, encryption cannot be disabled.",
"Encrypted": "Encrypted",
"Access": "Access",
@@ -2211,6 +2204,7 @@
"People you know on %(brand)s": "People you know on %(brand)s",
"Hide": "Hide",
"Show": "Show",
+ "Skip": "Skip",
"Send %(count)s invites|other": "Send %(count)s invites",
"Send %(count)s invites|one": "Send %(count)s invite",
"Invite people to join %(communityName)s": "Invite people to join %(communityName)s",
@@ -2532,6 +2526,7 @@
"We call the places where you can host your account ‘homeservers’.": "We call the places where you can host your account ‘homeservers’.",
"Other homeserver": "Other homeserver",
"Use your preferred Matrix homeserver if you have one, or host your own.": "Use your preferred Matrix homeserver if you have one, or host your own.",
+ "Learn more": "Learn more",
"About homeservers": "About homeservers",
"Reset event store?": "Reset event store?",
"You most likely do not want to reset your event index store": "You most likely do not want to reset your event index store",
From d7aaeb37b946632d0197aed502254ac085108b35 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 29 Sep 2021 14:05:31 +0100
Subject: [PATCH 280/313] delint
---
src/stores/{SpaceStore.tsx => SpaceStore.ts} | 8 --------
1 file changed, 8 deletions(-)
rename src/stores/{SpaceStore.tsx => SpaceStore.ts} (98%)
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.ts
similarity index 98%
rename from src/stores/SpaceStore.tsx
rename to src/stores/SpaceStore.ts
index 30df579fdf..6b2d06c369 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.ts
@@ -14,13 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React from "react";
import { ListIteratee, Many, sortBy, throttle } from "lodash";
import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { IHierarchyRoom } from "matrix-js-sdk/src/@types/spaces";
-import { JoinRule } from "matrix-js-sdk/src/@types/partials";
import { IRoomCapability } from "matrix-js-sdk/src/client";
import { AsyncStoreWithClient } from "./AsyncStoreWithClient";
@@ -41,12 +39,6 @@ import { arrayHasDiff, arrayHasOrderChange } from "../utils/arrays";
import { objectDiff } from "../utils/objects";
import { reorderLexicographically } from "../utils/stringOrderField";
import { TAG_ORDER } from "../components/views/rooms/RoomList";
-import { shouldShowSpaceSettings } from "../utils/space";
-import ToastStore from "./ToastStore";
-import { _t } from "../languageHandler";
-import GenericToast from "../components/views/toasts/GenericToast";
-import Modal from "../Modal";
-import InfoDialog from "../components/views/dialogs/InfoDialog";
import { SettingUpdatedPayload } from "../dispatcher/payloads/SettingUpdatedPayload";
type SpaceKey = string | symbol;
From ad5842c87a01a44499505c97e4bd37fa2894b199 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 29 Sep 2021 14:24:12 +0100
Subject: [PATCH 281/313] Allow closing Dropdown via its chevron
---
src/components/views/elements/Dropdown.tsx | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/src/components/views/elements/Dropdown.tsx b/src/components/views/elements/Dropdown.tsx
index b4f382c9c3..86e0822b11 100644
--- a/src/components/views/elements/Dropdown.tsx
+++ b/src/components/views/elements/Dropdown.tsx
@@ -178,6 +178,14 @@ export default class Dropdown extends React.Component<IProps, IState> {
this.ignoreEvent = ev;
};
+ private onChevronClick = (ev: React.MouseEvent) => {
+ if (this.state.expanded) {
+ this.setState({ expanded: false });
+ ev.stopPropagation();
+ ev.preventDefault();
+ }
+ };
+
private onAccessibleButtonClick = (ev: ButtonEvent) => {
if (this.props.disabled) return;
@@ -375,7 +383,7 @@ export default class Dropdown extends React.Component<IProps, IState> {
onKeyDown={this.onKeyDown}
>
{ currentValue }
- <span className="mx_Dropdown_arrow" />
+ <span onClick={this.onChevronClick} className="mx_Dropdown_arrow" />
{ menu }
</AccessibleButton>
</div>;
From 56745f29c0efa9754cec7956d69166d58fa0f558 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 29 Sep 2021 15:01:58 +0100
Subject: [PATCH 282/313] Fix spaces null-guard breaking the dispatcher
settings watching
---
src/stores/SpaceStore.ts | 10 ++++++----
1 file changed, 6 insertions(+), 4 deletions(-)
diff --git a/src/stores/SpaceStore.ts b/src/stores/SpaceStore.ts
index 008d1107e7..66f350c5d9 100644
--- a/src/stores/SpaceStore.ts
+++ b/src/stores/SpaceStore.ts
@@ -183,7 +183,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
* should not be done when the space switch is done implicitly due to another event like switching room.
*/
public setActiveSpace(space: Room | null, contextSwitch = true) {
- if (space === this.activeSpace || (space && !space.isSpaceRoom())) return;
+ if (!this.matrixClient || space === this.activeSpace || (space && !space.isSpaceRoom())) return;
this._activeSpace = space;
this.emit(UPDATE_SELECTED_SPACE, this.activeSpace);
@@ -197,7 +197,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
// else if the last viewed room in this space is joined then view that
// else view space home or home depending on what is being clicked on
if (space?.getMyMembership() !== "invite" &&
- this.matrixClient?.getRoom(roomId)?.getMyMembership() === "join" &&
+ this.matrixClient.getRoom(roomId)?.getMyMembership() === "join" &&
this.getSpaceFilteredRoomIds(space).has(roomId)
) {
defaultDispatcher.dispatch({
@@ -230,7 +230,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
}
}
- private async loadSuggestedRooms(space) {
+ private async loadSuggestedRooms(space: Room): Promise<void> {
const suggestedRooms = await this.fetchSuggestedRooms(space);
if (this._activeSpace === space) {
this._suggestedRooms = suggestedRooms;
@@ -335,6 +335,8 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
};
private rebuild = throttle(() => {
+ if (!this.matrixClient) return;
+
const [visibleSpaces, visibleRooms] = partitionSpacesAndRooms(this.matrixClient.getVisibleRooms());
const [joinedSpaces, invitedSpaces] = visibleSpaces.reduce((arr, s) => {
if (s.getMyMembership() === "join") {
@@ -751,7 +753,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
}
protected async onAction(payload: ActionPayload) {
- if (!spacesEnabled || !this.matrixClient) return;
+ if (!spacesEnabled) return;
switch (payload.action) {
case "view_room": {
// Don't auto-switch rooms when reacting to a context-switch
From 6ccb7e91452a34eab31eab9a1e92cfa5685b84f6 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 29 Sep 2021 19:37:21 +0530
Subject: [PATCH 283/313] Space after brand
---
src/utils/exportUtils/Exporter.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index becc36449d..3209dd085b 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -72,7 +72,7 @@ export default abstract class Exporter {
protected async downloadZIP(): Promise<string | void> {
const brand = SdkConfig.get().brand;
- const filename = `${brand} - Chat Export -${formatFullDateNoDay(new Date())}.zip`;
+ const filename = `${brand} - Chat Export - ${formatFullDateNoDay(new Date())}.zip`;
const { default: JSZip } = await import('jszip');
const zip = new JSZip();
From d264f5f98e8984751dc11cd8abecc3018847d62f Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Wed, 29 Sep 2021 20:51:18 +0530
Subject: [PATCH 284/313] Change js-sdk import style
---
src/utils/exportUtils/Exporter.ts | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 3209dd085b..128db47390 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -21,7 +21,8 @@ import { IExportOptions, ExportType } from "./exportUtils";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
-import { Direction, MatrixClient } from "matrix-js-sdk";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { Direction } from "matrix-js-sdk/src/models/event-timeline";
import { saveAs } from "file-saver";
import { _t } from "../../languageHandler";
import SdkConfig from "../../SdkConfig";
From e0267258a46f1998a0788aaeca399e92b1df9f5e Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 30 Sep 2021 16:24:31 +0530
Subject: [PATCH 285/313] Initialize css string
---
src/utils/exportUtils/exportCSS.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index 3bad94d938..f7f471fda3 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -25,7 +25,7 @@ const getExportCSS = async (): Promise<string> => {
stylesheets.push(e.href);
}
});
- let CSS: string;
+ let CSS = "";
for (const stylesheet of stylesheets) {
const res = await fetch(stylesheet);
const innerText = await res.text();
From d068cee54c808d6a7826808810b8ee0dc10eeea7 Mon Sep 17 00:00:00 2001
From: Ihor Hordiichuk <igor_ck@outlook.com>
Date: Thu, 30 Sep 2021 02:48:53 +0000
Subject: [PATCH 286/313] Translated using Weblate (Ukrainian)
Currently translated at 66.6% (2108 of 3163 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/uk/
---
src/i18n/strings/uk.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/i18n/strings/uk.json b/src/i18n/strings/uk.json
index cccfb83610..896431d3e6 100644
--- a/src/i18n/strings/uk.json
+++ b/src/i18n/strings/uk.json
@@ -42,7 +42,7 @@
"Anyone": "Кожний",
"Are you sure?": "Ви впевнені?",
"Are you sure you want to leave the room '%(roomName)s'?": "Ви впевнені, що хочете вийти з «%(roomName)s»?",
- "Are you sure you want to reject the invitation?": "Ви впевнені, що ви хочете відхилити запрошення?",
+ "Are you sure you want to reject the invitation?": "Ви впевнені, що хочете відхилити запрошення?",
"Attachment": "Прикріплення",
"Ban": "Заблокувати",
"Banned users": "Заблоковані користувачі",
From c81c01978e7141efb296be6d3458a9d80e5a112b Mon Sep 17 00:00:00 2001
From: waclaw66 <waclaw66@seznam.cz>
Date: Thu, 30 Sep 2021 07:55:30 +0000
Subject: [PATCH 287/313] Translated using Weblate (Czech)
Currently translated at 100.0% (3163 of 3163 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/cs/
---
src/i18n/strings/cs.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/i18n/strings/cs.json b/src/i18n/strings/cs.json
index be6a78588b..64a0306ab3 100644
--- a/src/i18n/strings/cs.json
+++ b/src/i18n/strings/cs.json
@@ -3158,7 +3158,7 @@
"This room is in some spaces you’re not an admin of. In those spaces, the old room will still be shown, but people will be prompted to join the new one.": "Tato místnost se nachází v některých prostorech, jejichž nejste správcem. V těchto prostorech bude stará místnost stále zobrazena, ale lidé budou vyzváni, aby se připojili k nové místnosti.",
"Before you upgrade": "Než provedete aktualizaci",
"To join a space you'll need an invite.": "Pro připojení k prostoru potřebujete pozvánku.",
- "You can also make Spaces from <a>communities</a>.": "Můžete také vytvořit prostory ze <a>skupin</a>.",
+ "You can also make Spaces from <a>communities</a>.": "Prostory můžete vytvořit také ze <a>skupin</a>.",
"Temporarily show communities instead of Spaces for this session. Support for this will be removed in the near future. This will reload Element.": "Dočasně zobrazit skupiny místo prostorů pro tuto relaci. Podpora bude v blízké budoucnosti odstraněna. Toto provede přenačtení Elementu.",
"Display Communities instead of Spaces": "Zobrazit skupiny místo prostorů",
"Joining space …": "Připojování k prostoru…",
From 1e90043eb31bd27fa984695b6d26449bf63c5648 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Thu, 30 Sep 2021 20:58:03 +0530
Subject: [PATCH 288/313] Change colour variable for export dialog subheading
---
res/css/views/dialogs/_ExportDialog.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
index 4727ab5f31..d578e72ead 100644
--- a/res/css/views/dialogs/_ExportDialog.scss
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -20,7 +20,7 @@ limitations under the License.
display: block;
font-family: $font-family;
font-weight: $font-semi-bold;
- color: $accent-fg-color;
+ color: $primary-content;
margin-top: 18px;
margin-bottom: 12px;
}
From 6268f5deb0d95604972a586c6accd16cab9fc7b8 Mon Sep 17 00:00:00 2001
From: Szimszon <github@oregpreshaz.eu>
Date: Thu, 30 Sep 2021 14:27:54 +0000
Subject: [PATCH 289/313] Translated using Weblate (Hungarian)
Currently translated at 99.7% (3191 of 3198 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/hu/
---
src/i18n/strings/hu.json | 30 +++++++++++++++++++++++++++++-
1 file changed, 29 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/hu.json b/src/i18n/strings/hu.json
index 4957bc6efa..c561759db9 100644
--- a/src/i18n/strings/hu.json
+++ b/src/i18n/strings/hu.json
@@ -3166,5 +3166,33 @@
"Leave all rooms": "Kilépés minden szobából",
"Don't leave any rooms": "Ne lépjen ki egy szobából sem",
"Expand quotes │ ⇧+click": "Idézetek megnyitása │ ⇧+kattintás",
- "Collapse quotes │ ⇧+click": "Idézetek bezárása│ ⇧+kattintás"
+ "Collapse quotes │ ⇧+click": "Idézetek bezárása│ ⇧+kattintás",
+ "Include Attachments": "Csatolmányokkal együtt",
+ "Size Limit": "Méret korlát",
+ "Format": "Formátum",
+ "Export Chat": "Beszélgetés kimentése",
+ "Exporting your data": "Adatai kimentése",
+ "Stop": "Állj",
+ "The export was cancelled successfully": "Az exportálás sikeresen félbeszakítva",
+ "Export Successful": "Exportálás sikeres",
+ "MB": "MB",
+ "Number of messages": "Üzenetek száma",
+ "In reply to <a>this message</a>": "Válasz erre az <a>üzenetre</a>",
+ "Export chat": "Beszélgetés kimentése",
+ "File Attached": "Fájl csatolva",
+ "Error fetching file": "Fájl letöltés hiba",
+ "Topic: %(topic)s": "Téma: %(topic)s",
+ "%(creatorName)s created this room.": "%(creatorName)s hozta létre ezt a szobát.",
+ "Media omitted - file size limit exceeded": "Média fájl kihagyva - fájl méret korlát túllépés",
+ "Media omitted": "Média nélkül",
+ "Current Timeline": "Aktuális idővonal",
+ "Specify a number of messages": "Üzenetek számának megadása",
+ "From the beginning": "Az elejétől",
+ "Plain Text": "Sima szöveg",
+ "JSON": "JSON",
+ "HTML": "HTML",
+ "Are you sure you want to exit during this export?": "Biztos, hogy kilép az exportálás közben?",
+ "%(senderDisplayName)s sent a sticker.": "%(senderDisplayName)s matricát küldött.",
+ "%(senderDisplayName)s changed the room avatar.": "%(senderDisplayName)s megváltoztatta a szoba avatar képét.",
+ "%(date)s at %(time)s": "%(date)s %(time)s"
}
From 32c4ae53ebfa4ec1523643ca906ab0e990ff5de1 Mon Sep 17 00:00:00 2001
From: sr093906 <spice2wolf@gmail.com>
Date: Thu, 30 Sep 2021 13:01:02 +0000
Subject: [PATCH 290/313] Translated using Weblate (Chinese (Simplified))
Currently translated at 100.0% (3198 of 3198 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/zh_Hans/
---
src/i18n/strings/zh_Hans.json | 37 ++++++++++++++++++++++++++++++++++-
1 file changed, 36 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/zh_Hans.json b/src/i18n/strings/zh_Hans.json
index 62e24c3091..7084e9f649 100644
--- a/src/i18n/strings/zh_Hans.json
+++ b/src/i18n/strings/zh_Hans.json
@@ -3166,5 +3166,40 @@
"Leave all rooms": "离开所有聊天室",
"Don't leave any rooms": "不离开任何聊天室",
"Collapse quotes │ ⇧+click": "折叠引号│ ⇧+click",
- "Expand quotes │ ⇧+click": "展开引号│ ⇧+click"
+ "Expand quotes │ ⇧+click": "展开引号│ ⇧+click",
+ "Number of messages can only be a number between %(min)s and %(max)s": "消息数只能是一个介于 %(min)s 和 %(max)s 之间的整数",
+ "Include Attachments": "包括附件",
+ "Size Limit": "大小限制",
+ "Format": "格式",
+ "Select from the options below to export chats from your timeline": "从下面的选项中选择以从时间轴导出聊天记录",
+ "Export Chat": "导出聊天",
+ "Exporting your data": "导出你的数据",
+ "Stop": "停止",
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "您确定要停止导出数据吗？如果你这样做了，你需要重新开始。",
+ "Your export was successful. Find it in your Downloads folder.": "导出成功了。你可以在下载文件夹中找到导出文件。",
+ "The export was cancelled successfully": "成功取消了导出",
+ "Export Successful": "成功导出",
+ "MB": "MB",
+ "Number of messages": "消息数",
+ "Size can only be a number between %(min)s MB and %(max)s MB": "大小只能是 %(min)sMB 和 %(max)sMB 之间的一个数字",
+ "Enter a number between %(min)s and %(max)s": "输入一个 %(min)s 和 %(max)s 之间的数字",
+ "In reply to <a>this message</a>": "回复<a>此消息</a>",
+ "Export chat": "导出聊天",
+ "File Attached": "已附加文件",
+ "Error fetching file": "获取文件出错",
+ "Topic: %(topic)s": "话题：%(topic)s",
+ "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.": "这是 <roomName/> 导出的开始。导出人 <exporterDetails/>，导出日期 %(exportDate)s。",
+ "%(creatorName)s created this room.": "%(creatorName)s 创建了此聊天室。",
+ "Media omitted - file size limit exceeded": "省略了媒体文件 - 超出了文件大小限制",
+ "Media omitted": "省略了媒体文件",
+ "Current Timeline": "当前时间线",
+ "Specify a number of messages": "指定消息数",
+ "From the beginning": "从开头",
+ "Plain Text": "纯文本",
+ "JSON": "JSON",
+ "HTML": "HTML",
+ "Are you sure you want to exit during this export?": "您确定要在导出未完成时退出吗？",
+ "%(senderDisplayName)s sent a sticker.": "%(senderDisplayName)s 发送了一张贴纸。",
+ "%(senderDisplayName)s changed the room avatar.": "%(senderDisplayName)s 更改了聊天室头像。",
+ "%(date)s at %(time)s": "%(date)s 的 %(time)s"
}
From 140d11f959a12f47939807c7110e391170cab64a Mon Sep 17 00:00:00 2001
From: waclaw66 <waclaw66@seznam.cz>
Date: Thu, 30 Sep 2021 12:29:06 +0000
Subject: [PATCH 291/313] Translated using Weblate (Czech)
Currently translated at 100.0% (3198 of 3198 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/cs/
---
src/i18n/strings/cs.json | 37 ++++++++++++++++++++++++++++++++++++-
1 file changed, 36 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/cs.json b/src/i18n/strings/cs.json
index 64a0306ab3..2b225077d8 100644
--- a/src/i18n/strings/cs.json
+++ b/src/i18n/strings/cs.json
@@ -3169,5 +3169,40 @@
"Don't leave any rooms": "Neodcházet z žádné místnosti",
"Leave all rooms": "Odejít ze všech místností",
"Expand quotes │ ⇧+click": "Rozbalit uvozovky │ ⇧+kliknutí",
- "Collapse quotes │ ⇧+click": "Sbalit uvozovky │ ⇧+kliknutí"
+ "Collapse quotes │ ⇧+click": "Sbalit uvozovky │ ⇧+kliknutí",
+ "Include Attachments": "Zahrnout přílohy",
+ "Size Limit": "Omezení velikosti",
+ "Format": "Formát",
+ "Select from the options below to export chats from your timeline": "Vyberte jednu z níže uvedených možností pro export chatů z časové osy",
+ "Export Chat": "Exportovat chat",
+ "Exporting your data": "Exportování dat",
+ "Stop": "Zastavit",
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Opravdu chcete ukončit export dat? Pokud ano, budete muset začít znovu.",
+ "Your export was successful. Find it in your Downloads folder.": "Váš export proběhl úspěšně. Najdete jej ve složce pro stažené soubory.",
+ "The export was cancelled successfully": "Export byl úspěšně zrušen",
+ "Export Successful": "Export proběhl úspěšně",
+ "MB": "MB",
+ "Number of messages": "Počet zpráv",
+ "Number of messages can only be a number between %(min)s and %(max)s": "Počet zpráv může být pouze číslo mezi %(min)s a %(max)s",
+ "Size can only be a number between %(min)s MB and %(max)s MB": "Velikost může být pouze číslo mezi %(min)s MB a %(max)s MB",
+ "Enter a number between %(min)s and %(max)s": "Zadejte číslo mezi %(min)s a %(max)s",
+ "In reply to <a>this message</a>": "V odpovědi na <a>tuto zprávu</a>",
+ "Export chat": "Exportovat chat",
+ "File Attached": "Přiložený soubor",
+ "Error fetching file": "Chyba při načítání souboru",
+ "Topic: %(topic)s": "Téma: %(topic)s",
+ "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.": "Toto je začátek exportu <roomName/>. Exportováno pomocí <exporterDetails/> v %(exportDate)s.",
+ "%(creatorName)s created this room.": "%(creatorName)s vytvořil(a) tuto místnost.",
+ "Media omitted - file size limit exceeded": "Vynechaná média - překročen limit velikosti souboru",
+ "Media omitted": "Vynechaná média",
+ "Current Timeline": "Aktuální časová osa",
+ "Specify a number of messages": "Zadejte počet zpráv",
+ "From the beginning": "Od začátku",
+ "Plain Text": "Prostý text",
+ "JSON": "JSON",
+ "HTML": "HTML",
+ "Are you sure you want to exit during this export?": "Opravdu chcete skončit během tohoto exportu?",
+ "%(senderDisplayName)s sent a sticker.": "%(senderDisplayName)s poslal(a) nálepku.",
+ "%(senderDisplayName)s changed the room avatar.": "%(senderDisplayName)s změnil(a) avatar místnosti.",
+ "%(date)s at %(time)s": "%(date)s v %(time)s"
}
From 1ddee2f85526d85225fc23cc133c09c10f309079 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Priit=20J=C3=B5er=C3=BC=C3=BCt?= <riot@joeruut.com>
Date: Thu, 30 Sep 2021 16:16:35 +0000
Subject: [PATCH 292/313] Translated using Weblate (Estonian)
Currently translated at 99.9% (3197 of 3198 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/et/
---
src/i18n/strings/et.json | 37 ++++++++++++++++++++++++++++++++++++-
1 file changed, 36 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/et.json b/src/i18n/strings/et.json
index 81e8fc3b6c..9fa345f435 100644
--- a/src/i18n/strings/et.json
+++ b/src/i18n/strings/et.json
@@ -3165,5 +3165,40 @@
"Leave all rooms": "Lahku kõikidest jututubadest",
"Don't leave any rooms": "Ära lahku ühestki jututoast",
"Expand quotes │ ⇧+click": "Näita tsitaate │ ⇧+click",
- "Collapse quotes │ ⇧+click": "Ahenda tsitaadid │ ⇧+click"
+ "Collapse quotes │ ⇧+click": "Ahenda tsitaadid │ ⇧+click",
+ "Media omitted": "Osa meediat jäi eksportimata",
+ "Media omitted - file size limit exceeded": "Osa meediat jäi vahele failisuuruse piirangu tõttu",
+ "Include Attachments": "Kaasa manused",
+ "Size Limit": "Andmemahu piir",
+ "Format": "Vorming",
+ "Select from the options below to export chats from your timeline": "Kui soovid oma ajajoonelt mõnda vestlust eksportida, siis vali tingimused alljärgnevalt",
+ "Export Chat": "Ekspordi vestlus",
+ "Exporting your data": "Ekspordin sinu andmeid",
+ "Stop": "Peata",
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Kas sa oled kindel, et soovid oma andmete eksporti katkestada? Kui nii toimid, siis pead hiljem uuesti alustama.",
+ "Your export was successful. Find it in your Downloads folder.": "Sinu andmete eksport õnnestus. Faili leiad tavapärasest allalaadimiste kaustast.",
+ "The export was cancelled successfully": "Ekspordi tühistamine õnnestus",
+ "Export Successful": "Eksport õnnestus",
+ "MB": "MB",
+ "Number of messages": "Sõnumite arv",
+ "Number of messages can only be a number between %(min)s and %(max)s": "Sõnumite arv saab olla ainult number%(min)s ja %(max)s vahemikust",
+ "Size can only be a number between %(min)s MB and %(max)s MB": "Suurus saab olla number %(min)s MB ja %(max)s MB vahemikust",
+ "Enter a number between %(min)s and %(max)s": "Sisesta number %(min)s ja %(max)s vahemikust",
+ "In reply to <a>this message</a>": "Vastuseks <a>sellele sõnumile</a>",
+ "Export chat": "Ekspordi vestlus",
+ "File Attached": "Fail on manustatud",
+ "Error fetching file": "Viga faili laadimisel",
+ "Topic: %(topic)s": "Teema: %(topic)s",
+ "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.": "See on <roomName/> jututoast eksporditud andmekogu. Viited: <exporterDetails/>, %(exportDate)s.",
+ "%(creatorName)s created this room.": "%(creatorName)s lõi selle jututoa.",
+ "Current Timeline": "Praegune ajajoon",
+ "Specify a number of messages": "Määra sõnumite arv",
+ "From the beginning": "Algusest alates",
+ "Plain Text": "Vormindamata tekst",
+ "JSON": "JSON",
+ "HTML": "HTML",
+ "Are you sure you want to exit during this export?": "Kas sa oled kindel, et soovid lõpetada tegevuse selle ekspordi ajal?",
+ "%(senderDisplayName)s sent a sticker.": "%(senderDisplayName)s saatis kleepsu.",
+ "%(senderDisplayName)s changed the room avatar.": "%(senderDisplayName)s muutis jututoa tunnuspilti.",
+ "%(date)s at %(time)s": "%(date)s %(time)s"
}
From b84a0300aa69cd77d6b4b0aef6f758cceeed55bf Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 1 Oct 2021 08:58:46 +0100
Subject: [PATCH 293/313] Fix leaving space via other client leaving you in
undefined-land
---
src/stores/SpaceStore.ts | 3 +++
1 file changed, 3 insertions(+)
diff --git a/src/stores/SpaceStore.ts b/src/stores/SpaceStore.ts
index 5f243a9d5d..4d54f5b553 100644
--- a/src/stores/SpaceStore.ts
+++ b/src/stores/SpaceStore.ts
@@ -608,6 +608,9 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
if (membership === "join" && room.roomId === RoomViewStore.getRoomId()) {
// if the user was looking at the space and then joined: select that space
this.setActiveSpace(room, false);
+ } else if (membership === "leave") {
+ // user's active space has gone away, go back to home
+ this.setActiveSpace(null, true);
}
};
From 5f751569ae3aeb5ec24f7c6761d1f3fc5d79480c Mon Sep 17 00:00:00 2001
From: Jeff Huang <s8321414@gmail.com>
Date: Fri, 1 Oct 2021 01:36:24 +0000
Subject: [PATCH 294/313] Translated using Weblate (Chinese (Traditional))
Currently translated at 100.0% (3198 of 3198 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/zh_Hant/
---
src/i18n/strings/zh_Hant.json | 37 ++++++++++++++++++++++++++++++++++-
1 file changed, 36 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/zh_Hant.json b/src/i18n/strings/zh_Hant.json
index 006cf630ac..798f7a99c2 100644
--- a/src/i18n/strings/zh_Hant.json
+++ b/src/i18n/strings/zh_Hant.json
@@ -3169,5 +3169,40 @@
"%(reactors)s reacted with %(content)s": "%(reactors)s 使用了 %(content)s 反應",
"Joining space …": "正在加入空間……",
"Expand quotes │ ⇧+click": "展開引用 │ ⇧+點擊",
- "Collapse quotes │ ⇧+click": "折疊引用 │ ⇧+點擊"
+ "Collapse quotes │ ⇧+click": "折疊引用 │ ⇧+點擊",
+ "Include Attachments": "包含附件",
+ "Size Limit": "大小限制",
+ "Format": "格式",
+ "Select from the options below to export chats from your timeline": "從下面的選項中選擇以從您的時間軸匯出聊天",
+ "Export Chat": "匯出聊天",
+ "Exporting your data": "正在匯出您的資料",
+ "Stop": "停止",
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "您確定您要停止匯出您的資料嗎？若您這麼做，您就必須重新開始。",
+ "Your export was successful. Find it in your Downloads folder.": "您匯出成功。請在您的下載資料夾中尋找它。",
+ "The export was cancelled successfully": "匯出已成功取消",
+ "Export Successful": "匯出成功",
+ "MB": "MB",
+ "Number of messages": "訊息數",
+ "Number of messages can only be a number between %(min)s and %(max)s": "訊息數只能是 %(min)s MB 至 %(max)s MB 間的數字",
+ "Size can only be a number between %(min)s MB and %(max)s MB": "大小只能是 %(min)s MB 至 %(max)s MB 間的數字",
+ "Enter a number between %(min)s and %(max)s": "輸入介於 %(min)s 至 %(max)s 間的數字",
+ "In reply to <a>this message</a>": "回覆<a>此訊息</a>",
+ "Export chat": "匯出聊天",
+ "File Attached": "已附加檔案",
+ "Error fetching file": "擷取檔案錯誤",
+ "Topic: %(topic)s": "主題：%(topic)s",
+ "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.": "這是 <roomName/> 匯出的開始。由 <exporterDetails/> 於 %(exportDate)s 匯出。",
+ "%(creatorName)s created this room.": "%(creatorName)s 建立了此聊天室。",
+ "Media omitted - file size limit exceeded": "媒體省略 - 超過檔案大小限制",
+ "Media omitted": "媒體省略",
+ "Current Timeline": "目前時間軸",
+ "Specify a number of messages": "指定訊息數量",
+ "From the beginning": "從一開始",
+ "Plain Text": "純文字",
+ "JSON": "JSON",
+ "HTML": "HTML",
+ "Are you sure you want to exit during this export?": "您確定您要從此匯出流程中退出嗎？",
+ "%(senderDisplayName)s sent a sticker.": "%(senderDisplayName)s 傳送了貼圖。",
+ "%(senderDisplayName)s changed the room avatar.": "%(senderDisplayName)s 變更了聊天室大頭照。",
+ "%(date)s at %(time)s": "%(date)s 於 %(time)s"
}
From fa0586af9ddf79a62a77170517f28e383e2e48f2 Mon Sep 17 00:00:00 2001
From: Ihor Hordiichuk <igor_ck@outlook.com>
Date: Thu, 30 Sep 2021 23:45:40 +0000
Subject: [PATCH 295/313] Translated using Weblate (Ukrainian)
Currently translated at 66.3% (2121 of 3198 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/uk/
---
src/i18n/strings/uk.json | 15 ++++++++++++++-
1 file changed, 14 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/uk.json b/src/i18n/strings/uk.json
index 896431d3e6..8627e34ec1 100644
--- a/src/i18n/strings/uk.json
+++ b/src/i18n/strings/uk.json
@@ -2110,5 +2110,18 @@
"There was an error finding this widget.": "Сталася помилка під час пошуку розширення.",
"Active Widgets": "Активні розширення",
"Verification Requests": "Запит перевірки",
- "There was a problem communicating with the server. Please try again.": "Виникла проблема зв'язку з сервером. Повторіть спробу."
+ "There was a problem communicating with the server. Please try again.": "Виникла проблема зв'язку з сервером. Повторіть спробу.",
+ "You're not currently a member of any communities.": "Ви не приєдналися до жодної групи.",
+ "Loading...": "Завантаження...",
+ "Failed to load group members": "Не вдалося завантажити учасників групи",
+ "Can't load this message": "Не вдалося завантажити це повідомлення",
+ "Click here to see older messages.": "Клацніть тут, щоб переглянути давніші повідомлення.",
+ "%(senderDisplayName)s removed the room avatar.": "%(senderDisplayName)s вилучає аватар кімнати.",
+ "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>": "<reactors/><reactedWith>реагує на %(shortName)s</reactedWith>",
+ "%(reactors)s reacted with %(content)s": "%(reactors)s реагує на %(content)s",
+ "Reactions": "Реакції",
+ "Add reaction": "Додати реакцію",
+ "%(senderDisplayName)s sent a sticker.": "%(senderDisplayName)s надсилає наліпку.",
+ "%(senderDisplayName)s changed the room avatar.": "%(senderDisplayName)s змінює аватар кімнати.",
+ "%(date)s at %(time)s": "%(date)s о %(time)s"
}
From 273a895caaf4c9255ef24818084596794620f316 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 1 Oct 2021 09:25:47 +0100
Subject: [PATCH 296/313] fix logic
---
src/stores/SpaceStore.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/stores/SpaceStore.ts b/src/stores/SpaceStore.ts
index 4d54f5b553..bb22aa4dbb 100644
--- a/src/stores/SpaceStore.ts
+++ b/src/stores/SpaceStore.ts
@@ -608,7 +608,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
if (membership === "join" && room.roomId === RoomViewStore.getRoomId()) {
// if the user was looking at the space and then joined: select that space
this.setActiveSpace(room, false);
- } else if (membership === "leave") {
+ } else if (membership === "leave" && room.roomId === this.activeSpace?.roomId) {
// user's active space has gone away, go back to home
this.setActiveSpace(null, true);
}
From 898e4acb4f1302af5f50c96d889e062e437de9b0 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 1 Oct 2021 10:00:53 +0100
Subject: [PATCH 297/313] Don't let click events propagate out of context menus
---
src/components/structures/ContextMenu.tsx | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx
index 2173230627..9f1a5adc9d 100644
--- a/src/components/structures/ContextMenu.tsx
+++ b/src/components/structures/ContextMenu.tsx
@@ -226,6 +226,11 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
}
};
+ private onClick = (ev: React.MouseEvent) => {
+ // Don't allow clicks to escape the context menu wrapper
+ ev.stopPropagation();
+ };
+
private onKeyDown = (ev: React.KeyboardEvent) => {
// don't let keyboard handling escape the context menu
ev.stopPropagation();
@@ -383,6 +388,7 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
className={classNames("mx_ContextualMenu_wrapper", this.props.wrapperClassName)}
style={{ ...position, ...wrapperStyle }}
onKeyDown={this.onKeyDown}
+ onClick={this.onClick}
onContextMenu={this.onContextMenuPreventBubbling}
>
<div
From 5a1234b69dc4510e5f3a8389fb489e63b9076092 Mon Sep 17 00:00:00 2001
From: Besnik Bleta <besnik@programeshqip.org>
Date: Fri, 1 Oct 2021 08:18:55 +0000
Subject: [PATCH 298/313] Translated using Weblate (Albanian)
Currently translated at 99.7% (3191 of 3198 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sq/
---
src/i18n/strings/sq.json | 37 ++++++++++++++++++++++++++++++++++++-
1 file changed, 36 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/sq.json b/src/i18n/strings/sq.json
index 618dd71163..9aad3d737f 100644
--- a/src/i18n/strings/sq.json
+++ b/src/i18n/strings/sq.json
@@ -3163,5 +3163,40 @@
"Leave all rooms": "Braktisi krejt dhomat",
"Don't leave any rooms": "Mos braktis ndonjë dhomë",
"Expand quotes │ ⇧+click": "Hapi citimet │ ⇧+klikim",
- "Collapse quotes │ ⇧+click": "Tkurri citimet │ ⇧+klikim"
+ "Collapse quotes │ ⇧+click": "Tkurri citimet │ ⇧+klikim",
+ "Format": "Format",
+ "MB": "MB",
+ "JSON": "JSON",
+ "HTML": "HTML",
+ "Include Attachments": "Përfshi Bashkëngjitje",
+ "Size Limit": "Kufi Madhësie",
+ "Select from the options below to export chats from your timeline": "Që të eksportohen fjalosje prej rrjedhës tuaj kohore, përzgjidhni prej mundësive më poshtë",
+ "Export Chat": "Eksportoni Fjalosje",
+ "Exporting your data": "Eksportim i të dhënave tuaja",
+ "Stop": "Ndale",
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Jeni i sigurt se doni të ndalet eksportimi i të dhënave tuaja? Nëse po, do t’ju duhet t’ia filloni nga e para.",
+ "Your export was successful. Find it in your Downloads folder.": "Eksportimi juaj qe i suksesshëm. E keni te dosja juaj Shkarkime.",
+ "The export was cancelled successfully": "Eksportimi u anulua me sukses",
+ "Export Successful": "Eksportim i Suksesshëm",
+ "Number of messages": "Numër mesazhesh",
+ "Number of messages can only be a number between %(min)s and %(max)s": "Numri i mesazheve mund të jetë vetëm një numër mes %(min)s dhe %(max)s",
+ "Size can only be a number between %(min)s MB and %(max)s MB": "Madhësia mund të jetë vetëm një numër mes %(min)s MB dhe %(max)s MB",
+ "Enter a number between %(min)s and %(max)s": "Jepni një numër mes %(min)s dhe %(max)s",
+ "In reply to <a>this message</a>": "Në përgjigje të <a>këtij mesazhi</a>",
+ "Export chat": "Eksportoni fjalosje",
+ "File Attached": "Kartelë Bashkëngjitur",
+ "Error fetching file": "Gabim në sjellje kartele",
+ "Topic: %(topic)s": "Temë: %(topic)s",
+ "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.": "Ky është fillimi i eksportimit të <roomName/>. Eksportuar nga <exporterDetails/> më %(exportDate)s.",
+ "%(creatorName)s created this room.": "%(creatorName)s krijoi këtë dhomë.",
+ "Media omitted - file size limit exceeded": "U la jashtë media - u tejkalua kufi madhësie kartele",
+ "Media omitted": "U la jashtë media",
+ "Current Timeline": "Rrjedhë Kohore e Tanishme",
+ "Specify a number of messages": "Përcaktoni një numër mesazhesh",
+ "From the beginning": "Që nga fillimi",
+ "Plain Text": "Tekst i Thjeshtë",
+ "Are you sure you want to exit during this export?": "Jeni i sigurt se doni të dilet gjatë këtij eksportimi?",
+ "%(senderDisplayName)s sent a sticker.": "%(senderDisplayName)s dërgoi një ngjitës.",
+ "%(senderDisplayName)s changed the room avatar.": "%(senderDisplayName)s ndryshoi avatarin e dhomës.",
+ "%(date)s at %(time)s": "%(date)s më %(time)s"
}
From 5568d533c05517a77694ddfca6c2f3f04effde43 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 1 Oct 2021 14:52:37 +0530
Subject: [PATCH 299/313] Handle newer voice message format
---
src/utils/exportUtils/Exporter.ts | 12 ++++++++----
1 file changed, 8 insertions(+), 4 deletions(-)
diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts
index 128db47390..db28508c68 100644
--- a/src/utils/exportUtils/Exporter.ts
+++ b/src/utils/exportUtils/Exporter.ts
@@ -21,8 +21,10 @@ import { IExportOptions, ExportType } from "./exportUtils";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
+import { isVoiceMessage } from "../EventUtils";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { Direction } from "matrix-js-sdk/src/models/event-timeline";
+import { IMediaEventContent } from "../../customisations/models/IMediaEventContent";
import { saveAs } from "file-saver";
import { _t } from "../../languageHandler";
import SdkConfig from "../../SdkConfig";
@@ -200,13 +202,12 @@ export default abstract class Exporter {
let blob: Blob;
try {
const isEncrypted = event.isEncrypted();
- const content = event.getContent();
- const shouldDecrypt = isEncrypted && !content.hasOwnProperty("org.matrix.msc1767.file")
- && event.getType() !== "m.sticker";
+ const content: IMediaEventContent = event.getContent();
+ const shouldDecrypt = isEncrypted && content.hasOwnProperty("file") && event.getType() !== "m.sticker";
if (shouldDecrypt) {
blob = await decryptFile(content.file);
} else {
- const media = mediaFromContent(event.getContent());
+ const media = mediaFromContent(content);
const image = await fetch(media.srcHttp);
blob = await image.blob();
}
@@ -242,7 +243,10 @@ export default abstract class Exporter {
}
const fileDate = formatFullDateNoDay(new Date(event.getTs()));
let [fileName, fileExt] = this.splitFileName(event.getContent().body);
+
if (event.getType() === "m.sticker") fileExt = ".png";
+ if (isVoiceMessage(event)) fileExt = ".ogg";
+
return fileDirectory + "/" + fileName + '-' + fileDate + fileExt;
}
From 1331e960fa497ee8e920b00fe155a4fdf71806ef Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <3636685+Palid@users.noreply.github.com>
Date: Fri, 1 Oct 2021 15:35:54 +0200
Subject: [PATCH 300/313] Add ability to properly edit messages in Threads.
(#6877)
* Fix infinite rerender loop when editing message
* Refactor "edit_event" to Action.EditEvent
* Make up-arrow edit working in Threads
* Properly handle timeline events edit state
* Properly traverse messages to be edited
* Add MatrixClientContextHOC
* Refactor RoomContext to use AppRenderingContext
* Typescriptify test
Co-authored-by: Germain <germains@element.io>
---
src/components/structures/MessagePanel.tsx | 28 ++--
src/components/structures/RoomView.tsx | 28 +++-
src/components/structures/ThreadView.tsx | 106 +++++++-----
.../views/messages/MessageActionBar.tsx | 17 +-
.../views/rooms/EditMessageComposer.tsx | 77 ++++++---
src/components/views/rooms/EventTile.tsx | 9 +-
.../views/rooms/MessageComposer.tsx | 18 +-
.../views/rooms/SendMessageComposer.tsx | 49 +++---
src/contexts/MatrixClientContext.ts | 22 ---
src/contexts/MatrixClientContext.tsx | 46 +++++
src/contexts/RoomContext.ts | 11 +-
src/dispatcher/actions.ts | 7 +-
src/shouldHideEvent.ts | 4 +-
src/utils/EventUtils.ts | 13 +-
...r-test.js => SendMessageComposer-test.tsx} | 157 ++++++++++++++----
15 files changed, 403 insertions(+), 189 deletions(-)
delete mode 100644 src/contexts/MatrixClientContext.ts
create mode 100644 src/contexts/MatrixClientContext.tsx
rename test/components/views/rooms/{SendMessageComposer-test.js => SendMessageComposer-test.tsx} (64%)
diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx
index fe5f8699b4..42980efc57 100644
--- a/src/components/structures/MessagePanel.tsx
+++ b/src/components/structures/MessagePanel.tsx
@@ -48,6 +48,8 @@ import Spinner from "../views/elements/Spinner";
import TileErrorBoundary from '../views/messages/TileErrorBoundary';
import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
import EditorStateTransfer from "../../utils/EditorStateTransfer";
+import { logger } from 'matrix-js-sdk/src/logger';
+import { Action } from '../../dispatcher/actions';
const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
const continuedTypes = [EventType.Sticker, EventType.RoomMessage];
@@ -287,6 +289,15 @@ export default class MessagePanel extends React.Component<IProps, IState> {
ghostReadMarkers,
});
}
+
+ const pendingEditItem = this.pendingEditItem;
+ if (!this.props.editState && this.props.room && pendingEditItem) {
+ defaultDispatcher.dispatch({
+ action: Action.EditEvent,
+ event: this.props.room.findEventById(pendingEditItem),
+ timelineRenderingType: this.context.timelineRenderingType,
+ });
+ }
}
private calculateRoomMembersCount = (): void => {
@@ -550,10 +561,14 @@ export default class MessagePanel extends React.Component<IProps, IState> {
return { nextEvent, nextTile };
}
- private get roomHasPendingEdit(): string {
- return this.props.room && localStorage.getItem(`mx_edit_room_${this.props.room.roomId}`);
+ private get pendingEditItem(): string | undefined {
+ try {
+ return localStorage.getItem(`mx_edit_room_${this.props.room.roomId}_${this.context.timelineRenderingType}`);
+ } catch (err) {
+ logger.error(err);
+ return undefined;
+ }
}
-
private getEventTiles(): ReactNode[] {
this.eventNodes = {};
@@ -663,13 +678,6 @@ export default class MessagePanel extends React.Component<IProps, IState> {
}
}
- if (!this.props.editState && this.roomHasPendingEdit) {
- defaultDispatcher.dispatch({
- action: "edit_event",
- event: this.props.room.findEventById(this.roomHasPendingEdit),
- });
- }
-
if (grouper) {
ret.push(...grouper.getTiles());
}
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 15bf327a74..e5067f1fcf 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -48,8 +48,8 @@ import { Layout } from "../../settings/Layout";
import AccessibleButton from "../views/elements/AccessibleButton";
import RightPanelStore from "../../stores/RightPanelStore";
import { haveTileForEvent } from "../views/rooms/EventTile";
-import RoomContext from "../../contexts/RoomContext";
-import MatrixClientContext from "../../contexts/MatrixClientContext";
+import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
+import MatrixClientContext, { withMatrixClientHOC, MatrixClientProps } from "../../contexts/MatrixClientContext";
import { E2EStatus, shieldStatusForRoom } from '../../utils/ShieldUtils';
import { Action } from "../../dispatcher/actions";
import { IMatrixClientCreds } from "../../MatrixClientPeg";
@@ -91,6 +91,7 @@ import TopUnreadMessagesBar from "../views/rooms/TopUnreadMessagesBar";
import SpaceStore from "../../stores/SpaceStore";
import { logger } from "matrix-js-sdk/src/logger";
+import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline';
const DEBUG = false;
let debuglog = function(msg: string) {};
@@ -102,7 +103,7 @@ if (DEBUG) {
debuglog = logger.log.bind(console);
}
-interface IProps {
+interface IRoomProps extends MatrixClientProps {
threepidInvite: IThreepidInvite;
oobData?: IOOBData;
@@ -113,7 +114,7 @@ interface IProps {
onRegistered?(credentials: IMatrixClientCreds): void;
}
-export interface IState {
+export interface IRoomState {
room?: Room;
roomId?: string;
roomAlias?: string;
@@ -187,10 +188,12 @@ export interface IState {
// if it did we don't want the room to be marked as read as soon as it is loaded.
wasContextSwitch?: boolean;
editState?: EditorStateTransfer;
+ timelineRenderingType: TimelineRenderingType;
+ liveTimeline?: EventTimeline;
}
@replaceableComponent("structures.RoomView")
-export default class RoomView extends React.Component<IProps, IState> {
+export class RoomView extends React.Component<IRoomProps, IRoomState> {
private readonly dispatcherRef: string;
private readonly roomStoreToken: EventSubscription;
private readonly rightPanelStoreToken: EventSubscription;
@@ -247,6 +250,8 @@ export default class RoomView extends React.Component<IProps, IState> {
showDisplaynameChanges: true,
matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
dragCounter: 0,
+ timelineRenderingType: TimelineRenderingType.Room,
+ liveTimeline: undefined,
};
this.dispatcherRef = dis.register(this.onAction);
@@ -336,7 +341,7 @@ export default class RoomView extends React.Component<IProps, IState> {
const roomId = RoomViewStore.getRoomId();
- const newState: Pick<IState, any> = {
+ const newState: Pick<IRoomState, any> = {
roomId,
roomAlias: RoomViewStore.getRoomAlias(),
roomLoading: RoomViewStore.isRoomLoading(),
@@ -808,7 +813,9 @@ export default class RoomView extends React.Component<IProps, IState> {
this.onSearchClick();
break;
- case "edit_event": {
+ case Action.EditEvent: {
+ // Quit early if we're trying to edit events in wrong rendering context
+ if (payload.timelineRenderingType !== this.state.timelineRenderingType) return;
const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
this.setState({ editState }, () => {
if (payload.event) {
@@ -932,6 +939,10 @@ export default class RoomView extends React.Component<IProps, IState> {
this.updateE2EStatus(room);
this.updatePermissions(room);
this.checkWidgets(room);
+
+ this.setState({
+ liveTimeline: room.getLiveTimeline(),
+ });
};
private async calculateRecommendedVersion(room: Room) {
@@ -2086,3 +2097,6 @@ export default class RoomView extends React.Component<IProps, IState> {
);
}
}
+
+const RoomViewWithMatrixClient = withMatrixClientHOC(RoomView);
+export default RoomViewWithMatrixClient;
diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx
index 180a870cd5..8fac538bbc 100644
--- a/src/components/structures/ThreadView.tsx
+++ b/src/components/structures/ThreadView.tsx
@@ -34,6 +34,8 @@ import { SetRightPanelPhasePayload } from '../../dispatcher/payloads/SetRightPan
import { Action } from '../../dispatcher/actions';
import { MatrixClientPeg } from '../../MatrixClientPeg';
import { E2EStatus } from '../../utils/ShieldUtils';
+import EditorStateTransfer from '../../utils/EditorStateTransfer';
+import RoomContext, { TimelineRenderingType } from '../../contexts/RoomContext';
interface IProps {
room: Room;
@@ -47,10 +49,14 @@ interface IProps {
interface IState {
replyToEvent?: MatrixEvent;
thread?: Thread;
+ editState?: EditorStateTransfer;
+
}
@replaceableComponent("structures.ThreadView")
export default class ThreadView extends React.Component<IProps, IState> {
+ static contextType = RoomContext;
+
private dispatcherRef: string;
private timelinePanelRef: React.RefObject<TimelinePanel> = React.createRef();
@@ -90,6 +96,23 @@ export default class ThreadView extends React.Component<IProps, IState> {
this.setupThread(payload.event);
}
}
+ switch (payload.action) {
+ case Action.EditEvent: {
+ // Quit early if it's not a thread context
+ if (payload.timelineRenderingType !== TimelineRenderingType.Thread) return;
+ // Quit early if that's not a thread event
+ if (payload.event && !payload.event.getThread()) return;
+ const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
+ this.setState({ editState }, () => {
+ if (payload.event) {
+ this.timelinePanelRef.current?.scrollToEventIfNeeded(payload.event.getId());
+ }
+ });
+ break;
+ }
+ default:
+ break;
+ }
};
private setupThread = (mxEv: MatrixEvent) => {
@@ -124,44 +147,53 @@ export default class ThreadView extends React.Component<IProps, IState> {
public render(): JSX.Element {
return (
- <BaseCard
- className="mx_ThreadView"
- onClose={this.props.onClose}
- previousPhase={RightPanelPhases.RoomSummary}
- withoutScrollContainer={true}
- >
- { this.state.thread && (
- <TimelinePanel
- ref={this.timelinePanelRef}
- showReadReceipts={false} // No RR support in thread's MVP
- manageReadReceipts={false} // No RR support in thread's MVP
- manageReadMarkers={false} // No RM support in thread's MVP
- sendReadReceiptOnLoad={false} // No RR support in thread's MVP
- timelineSet={this.state?.thread?.timelineSet}
- showUrlPreview={true}
- tileShape={TileShape.Thread}
- empty={<div>empty</div>}
- alwaysShowTimestamps={true}
- layout={Layout.Group}
- hideThreadedMessages={false}
- hidden={false}
- showReactions={true}
- className="mx_RoomView_messagePanel mx_GroupLayout"
+ <RoomContext.Provider value={{
+ ...this.context,
+ timelineRenderingType: TimelineRenderingType.Thread,
+ liveTimeline: this.state?.thread?.timelineSet?.getLiveTimeline(),
+ }}>
+
+ <BaseCard
+ className="mx_ThreadView"
+ onClose={this.props.onClose}
+ previousPhase={RightPanelPhases.RoomSummary}
+ withoutScrollContainer={true}
+ >
+ { this.state.thread && (
+ <TimelinePanel
+ ref={this.timelinePanelRef}
+ showReadReceipts={false} // No RR support in thread's MVP
+ manageReadReceipts={false} // No RR support in thread's MVP
+ manageReadMarkers={false} // No RM support in thread's MVP
+ sendReadReceiptOnLoad={false} // No RR support in thread's MVP
+ timelineSet={this.state?.thread?.timelineSet}
+ showUrlPreview={true}
+ tileShape={TileShape.Thread}
+ empty={<div>empty</div>}
+ alwaysShowTimestamps={true}
+ layout={Layout.Group}
+ hideThreadedMessages={false}
+ hidden={false}
+ showReactions={true}
+ className="mx_RoomView_messagePanel mx_GroupLayout"
+ permalinkCreator={this.props.permalinkCreator}
+ membersLoaded={true}
+ editState={this.state.editState}
+ />
+ ) }
+
+ { this.state?.thread?.timelineSet && (<MessageComposer
+ room={this.props.room}
+ resizeNotifier={this.props.resizeNotifier}
+ replyInThread={true}
+ replyToEvent={this.state?.thread?.replyToEvent}
+ showReplyPreview={false}
permalinkCreator={this.props.permalinkCreator}
- membersLoaded={true}
- />
- ) }
- <MessageComposer
- room={this.props.room}
- resizeNotifier={this.props.resizeNotifier}
- replyInThread={true}
- replyToEvent={this.state?.thread?.replyToEvent}
- showReplyPreview={false}
- permalinkCreator={this.props.permalinkCreator}
- e2eStatus={this.props.e2eStatus}
- compact={true}
- />
- </BaseCard>
+ e2eStatus={this.props.e2eStatus}
+ compact={true}
+ />) }
+ </BaseCard>
+ </RoomContext.Provider>
);
}
}
diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx
index 06817b910a..7ee951a812 100644
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/src/components/views/messages/MessageActionBar.tsx
@@ -27,7 +27,7 @@ import { Action } from '../../../dispatcher/actions';
import { RightPanelPhases } from '../../../stores/RightPanelStorePhases';
import { aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu } from '../../structures/ContextMenu';
import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
-import RoomContext from "../../../contexts/RoomContext";
+import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
import Toolbar from "../../../accessibility/Toolbar";
import { RovingAccessibleTooltipButton, useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
import { replaceableComponent } from "../../../utils/replaceableComponent";
@@ -128,11 +128,6 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
</React.Fragment>;
};
-export enum ActionBarRenderingContext {
- Room,
- Thread
-}
-
interface IMessageActionBarProps {
mxEvent: MatrixEvent;
reactions?: Relations;
@@ -142,7 +137,6 @@ interface IMessageActionBarProps {
permalinkCreator?: RoomPermalinkCreator;
onFocusChange?: (menuDisplayed: boolean) => void;
toggleThreadExpanded: () => void;
- renderingContext?: ActionBarRenderingContext;
isQuoteExpanded?: boolean;
}
@@ -150,10 +144,6 @@ interface IMessageActionBarProps {
export default class MessageActionBar extends React.PureComponent<IMessageActionBarProps> {
public static contextType = RoomContext;
- public static defaultProps = {
- renderingContext: ActionBarRenderingContext.Room,
- };
-
public componentDidMount(): void {
if (this.props.mxEvent.status && this.props.mxEvent.status !== EventStatus.SENT) {
this.props.mxEvent.on("Event.status", this.onSent);
@@ -217,8 +207,9 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
private onEditClick = (ev: React.MouseEvent): void => {
dis.dispatch({
- action: 'edit_event',
+ action: Action.EditEvent,
event: this.props.mxEvent,
+ timelineRenderingType: this.context.timelineRenderingType,
});
};
@@ -298,7 +289,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
// Like the resend button, the react and reply buttons need to appear before the edit.
// The only catch is we do the reply button first so that we can make sure the react
// button is the very first button without having to do length checks for `splice()`.
- if (this.context.canReply && this.props.renderingContext === ActionBarRenderingContext.Room) {
+ if (this.context.canReply && this.context.timelineRenderingType === TimelineRenderingType.Room) {
toolbarOpts.splice(0, 0, <>
<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
diff --git a/src/components/views/rooms/EditMessageComposer.tsx b/src/components/views/rooms/EditMessageComposer.tsx
index 33273f1f95..bc1ebe881c 100644
--- a/src/components/views/rooms/EditMessageComposer.tsx
+++ b/src/components/views/rooms/EditMessageComposer.tsx
@@ -28,7 +28,6 @@ import { parseEvent } from '../../../editor/deserialize';
import { CommandPartCreator, Part, PartCreator, Type } from '../../../editor/parts';
import EditorStateTransfer from '../../../utils/EditorStateTransfer';
import BasicMessageComposer, { REGEX_EMOTICON } from "./BasicMessageComposer";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { Command, CommandCategories, getCommand } from '../../../SlashCommands';
import { Action } from "../../../dispatcher/actions";
import CountlyAnalytics from "../../../CountlyAnalytics";
@@ -46,6 +45,8 @@ import { createRedactEventDialog } from '../dialogs/ConfirmRedactDialog';
import SettingsStore from "../../../settings/SettingsStore";
import { logger } from "matrix-js-sdk/src/logger";
+import { withMatrixClientHOC, MatrixClientProps } from '../../../contexts/MatrixClientContext';
+import RoomContext from '../../../contexts/RoomContext';
function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
const html = mxEvent.getContent().formatted_body;
@@ -108,25 +109,24 @@ function createEditContent(model: EditorModel, editedEvent: MatrixEvent): IConte
}, contentBody);
}
-interface IProps {
+interface IEditMessageComposerProps extends MatrixClientProps {
editState: EditorStateTransfer;
className?: string;
}
-
interface IState {
saveDisabled: boolean;
}
@replaceableComponent("views.rooms.EditMessageComposer")
-export default class EditMessageComposer extends React.Component<IProps, IState> {
- static contextType = MatrixClientContext;
- context!: React.ContextType<typeof MatrixClientContext>;
+class EditMessageComposer extends React.Component<IEditMessageComposerProps, IState> {
+ static contextType = RoomContext;
+ context!: React.ContextType<typeof RoomContext>;
private readonly editorRef = createRef<BasicMessageComposer>();
private readonly dispatcherRef: string;
private model: EditorModel = null;
- constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
+ constructor(props: IEditMessageComposerProps, context: React.ContextType<typeof RoomContext>) {
super(props);
this.context = context; // otherwise React will only set it prior to render due to type def above
@@ -141,7 +141,7 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
}
private getRoom(): Room {
- return this.context.getRoom(this.props.editState.getEvent().getRoomId());
+ return this.props.mxClient.getRoom(this.props.editState.getEvent().getRoomId());
}
private onKeyDown = (event: KeyboardEvent): void => {
@@ -162,10 +162,17 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
if (this.editorRef.current?.isModified() || !this.editorRef.current?.isCaretAtStart()) {
return;
}
- const previousEvent = findEditableEvent(this.getRoom(), false,
- this.props.editState.getEvent().getId());
+ const previousEvent = findEditableEvent({
+ events: this.events,
+ isForward: false,
+ fromEventId: this.props.editState.getEvent().getId(),
+ });
if (previousEvent) {
- dis.dispatch({ action: 'edit_event', event: previousEvent });
+ dis.dispatch({
+ action: Action.EditEvent,
+ event: previousEvent,
+ timelineRenderingType: this.context.timelineRenderingType,
+ });
event.preventDefault();
}
break;
@@ -174,12 +181,24 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
if (this.editorRef.current?.isModified() || !this.editorRef.current?.isCaretAtEnd()) {
return;
}
- const nextEvent = findEditableEvent(this.getRoom(), true, this.props.editState.getEvent().getId());
+ const nextEvent = findEditableEvent({
+ events: this.events,
+ isForward: true,
+ fromEventId: this.props.editState.getEvent().getId(),
+ });
if (nextEvent) {
- dis.dispatch({ action: 'edit_event', event: nextEvent });
+ dis.dispatch({
+ action: Action.EditEvent,
+ event: nextEvent,
+ timelineRenderingType: this.context.timelineRenderingType,
+ });
} else {
this.clearStoredEditorState();
- dis.dispatch({ action: 'edit_event', event: null });
+ dis.dispatch({
+ action: Action.EditEvent,
+ event: null,
+ timelineRenderingType: this.context.timelineRenderingType,
+ });
dis.fire(Action.FocusSendMessageComposer);
}
event.preventDefault();
@@ -189,16 +208,27 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
};
private get editorRoomKey(): string {
- return `mx_edit_room_${this.getRoom().roomId}`;
+ return `mx_edit_room_${this.getRoom().roomId}_${this.context.timelineRenderingType}`;
}
private get editorStateKey(): string {
return `mx_edit_state_${this.props.editState.getEvent().getId()}`;
}
+ private get events(): MatrixEvent[] {
+ const liveTimelineEvents = this.context.liveTimeline.getEvents();
+ const pendingEvents = this.getRoom().getPendingEvents();
+ const isInThread = Boolean(this.props.editState.getEvent().getThread());
+ return liveTimelineEvents.concat(isInThread ? [] : pendingEvents);
+ }
+
private cancelEdit = (): void => {
this.clearStoredEditorState();
- dis.dispatch({ action: "edit_event", event: null });
+ dis.dispatch({
+ action: Action.EditEvent,
+ event: null,
+ timelineRenderingType: this.context.timelineRenderingType,
+ });
dis.fire(Action.FocusSendMessageComposer);
};
@@ -381,7 +411,7 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
}
if (shouldSend) {
this.cancelPreviousPendingEdit();
- const prom = this.context.sendMessage(roomId, editContent);
+ const prom = this.props.mxClient.sendMessage(roomId, editContent);
this.clearStoredEditorState();
dis.dispatch({ action: "message_sent" });
CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, true, false, editContent);
@@ -389,7 +419,11 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
}
// close the event editing and focus composer
- dis.dispatch({ action: "edit_event", event: null });
+ dis.dispatch({
+ action: Action.EditEvent,
+ event: null,
+ timelineRenderingType: this.context.timelineRenderingType,
+ });
dis.fire(Action.FocusSendMessageComposer);
};
@@ -400,7 +434,7 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
previousEdit.status === EventStatus.QUEUED ||
previousEdit.status === EventStatus.NOT_SENT
)) {
- this.context.cancelPendingEvent(previousEdit);
+ this.props.mxClient.cancelPendingEvent(previousEdit);
}
}
@@ -428,7 +462,7 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
private createEditorModel(): boolean {
const { editState } = this.props;
const room = this.getRoom();
- const partCreator = new CommandPartCreator(room, this.context);
+ const partCreator = new CommandPartCreator(room, this.props.mxClient);
let parts;
let isRestored = false;
@@ -493,3 +527,6 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
</div>);
}
}
+
+const EditMessageComposerWithMatrixClient = withMatrixClientHOC(EditMessageComposer);
+export default EditMessageComposerWithMatrixClient;
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index cfdedc8310..2f3173fa56 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -53,7 +53,7 @@ import SenderProfile from '../messages/SenderProfile';
import MessageTimestamp from '../messages/MessageTimestamp';
import TooltipButton from '../elements/TooltipButton';
import ReadReceiptMarker from "./ReadReceiptMarker";
-import MessageActionBar, { ActionBarRenderingContext } from "../messages/MessageActionBar";
+import MessageActionBar from "../messages/MessageActionBar";
import ReactionsRow from '../messages/ReactionsRow';
import { getEventDisplayInfo } from '../../../utils/EventUtils';
import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
@@ -1063,9 +1063,6 @@ export default class EventTile extends React.Component<IProps, IState> {
}
const showMessageActionBar = !isEditing && !this.props.forExport;
- const renderingContext = this.props.tileShape === TileShape.Thread
- ? ActionBarRenderingContext.Thread
- : ActionBarRenderingContext.Room;
const actionBar = showMessageActionBar ? <MessageActionBar
mxEvent={this.props.mxEvent}
reactions={this.state.reactions}
@@ -1073,7 +1070,6 @@ export default class EventTile extends React.Component<IProps, IState> {
getTile={this.getTile}
getReplyThread={this.getReplyThread}
onFocusChange={this.onActionBarFocusChange}
- renderingContext={renderingContext}
isQuoteExpanded={isQuoteExpanded}
toggleThreadExpanded={() => this.setQuoteExpanded(!isQuoteExpanded)}
/> : undefined;
@@ -1178,6 +1174,7 @@ export default class EventTile extends React.Component<IProps, IState> {
showUrlPreview={this.props.showUrlPreview}
onHeightChanged={this.props.onHeightChanged}
tileShape={this.props.tileShape}
+ editState={this.props.editState}
/>
</div>,
]);
@@ -1211,6 +1208,7 @@ export default class EventTile extends React.Component<IProps, IState> {
showUrlPreview={this.props.showUrlPreview}
onHeightChanged={this.props.onHeightChanged}
tileShape={this.props.tileShape}
+ editState={this.props.editState}
/>
{ actionBar }
</div>,
@@ -1231,6 +1229,7 @@ export default class EventTile extends React.Component<IProps, IState> {
showUrlPreview={this.props.showUrlPreview}
tileShape={this.props.tileShape}
onHeightChanged={this.props.onHeightChanged}
+ editState={this.props.editState}
/>
</div>,
<a
diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index 332341fd23..f14af69a6d 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -45,7 +45,7 @@ import { RecordingState } from "../../../audio/VoiceRecording";
import Tooltip, { Alignment } from "../elements/Tooltip";
import ResizeNotifier from "../../../utils/ResizeNotifier";
import { E2EStatus } from '../../../utils/ShieldUtils';
-import SendMessageComposer from "./SendMessageComposer";
+import SendMessageComposer, { SendMessageComposer as SendMessageComposerClass } from "./SendMessageComposer";
import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
import { Action } from "../../../dispatcher/actions";
import EditorModel from "../../../editor/model";
@@ -219,8 +219,8 @@ interface IState {
@replaceableComponent("views.rooms.MessageComposer")
export default class MessageComposer extends React.Component<IProps, IState> {
private dispatcherRef: string;
- private messageComposerInput: SendMessageComposer;
- private voiceRecordingButton: VoiceRecordComposerTile;
+ private messageComposerInput = createRef<SendMessageComposerClass>();
+ private voiceRecordingButton = createRef<VoiceRecordComposerTile>();
private ref: React.RefObject<HTMLDivElement> = createRef();
private instanceId: number;
@@ -378,14 +378,14 @@ export default class MessageComposer extends React.Component<IProps, IState> {
}
private sendMessage = async () => {
- if (this.state.haveRecording && this.voiceRecordingButton) {
+ if (this.state.haveRecording && this.voiceRecordingButton.current) {
// There shouldn't be any text message to send when a voice recording is active, so
// just send out the voice recording.
- await this.voiceRecordingButton.send();
+ await this.voiceRecordingButton.current?.send();
return;
}
- this.messageComposerInput.sendMessage();
+ this.messageComposerInput.current?.sendMessage();
};
private onChange = (model: EditorModel) => {
@@ -460,7 +460,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
buttons.push(
<AccessibleTooltipButton
className="mx_MessageComposer_button mx_MessageComposer_voiceMessage"
- onClick={() => this.voiceRecordingButton?.onRecordStartEndClick()}
+ onClick={() => this.voiceRecordingButton.current?.onRecordStartEndClick()}
title={_t("Send voice message")}
/>,
);
@@ -521,7 +521,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
if (!this.state.tombstone && this.state.canSendMessages) {
controls.push(
<SendMessageComposer
- ref={(c) => this.messageComposerInput = c}
+ ref={this.messageComposerInput}
key="controls_input"
room={this.props.room}
placeholder={this.renderPlaceholderText()}
@@ -535,7 +535,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
controls.push(<VoiceRecordComposerTile
key="controls_voice_record"
- ref={c => this.voiceRecordingButton = c}
+ ref={this.voiceRecordingButton}
room={this.props.room} />);
} else if (this.state.tombstone) {
const replacementRoomId = this.state.tombstone.getContent()['replacement_room'];
diff --git a/src/components/views/rooms/SendMessageComposer.tsx b/src/components/views/rooms/SendMessageComposer.tsx
index cc27ccf153..35a028aadc 100644
--- a/src/components/views/rooms/SendMessageComposer.tsx
+++ b/src/components/views/rooms/SendMessageComposer.tsx
@@ -19,6 +19,7 @@ import EMOJI_REGEX from 'emojibase-regex';
import { IContent, MatrixEvent } from 'matrix-js-sdk/src/models/event';
import { DebouncedFunc, throttle } from 'lodash';
import { EventType, RelationType } from "matrix-js-sdk/src/@types/event";
+import { logger } from "matrix-js-sdk/src/logger";
import dis from '../../../dispatcher/dispatcher';
import EditorModel from '../../../editor/model';
@@ -40,7 +41,7 @@ import { Command, CommandCategories, getCommand } from '../../../SlashCommands';
import Modal from '../../../Modal';
import { _t, _td } from '../../../languageHandler';
import ContentMessages from '../../../ContentMessages';
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { withMatrixClientHOC, MatrixClientProps } from "../../../contexts/MatrixClientContext";
import { Action } from "../../../dispatcher/actions";
import { containsEmoji } from "../../../effects/utils";
import { CHAT_EFFECTS } from '../../../effects';
@@ -55,8 +56,7 @@ import ErrorDialog from "../dialogs/ErrorDialog";
import QuestionDialog from "../dialogs/QuestionDialog";
import { ActionPayload } from "../../../dispatcher/payloads";
import { decorateStartSendingTime, sendRoundTripMetric } from "../../../sendTimePerformanceMetrics";
-
-import { logger } from "matrix-js-sdk/src/logger";
+import RoomContext from '../../../contexts/RoomContext';
function addReplyToMessageContent(
content: IContent,
@@ -130,7 +130,7 @@ export function isQuickReaction(model: EditorModel): boolean {
return false;
}
-interface IProps {
+interface ISendMessageComposerProps extends MatrixClientProps {
room: Room;
placeholder?: string;
permalinkCreator: RoomPermalinkCreator;
@@ -141,10 +141,8 @@ interface IProps {
}
@replaceableComponent("views.rooms.SendMessageComposer")
-export default class SendMessageComposer extends React.Component<IProps> {
- static contextType = MatrixClientContext;
- context!: React.ContextType<typeof MatrixClientContext>;
-
+export class SendMessageComposer extends React.Component<ISendMessageComposerProps> {
+ static contextType = RoomContext;
private readonly prepareToEncrypt?: DebouncedFunc<() => void>;
private readonly editorRef = createRef<BasicMessageComposer>();
private model: EditorModel = null;
@@ -152,26 +150,25 @@ export default class SendMessageComposer extends React.Component<IProps> {
private dispatcherRef: string;
private sendHistoryManager: SendHistoryManager;
- constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
+ constructor(props: ISendMessageComposerProps, context: React.ContextType<typeof RoomContext>) {
super(props);
- this.context = context; // otherwise React will only set it prior to render due to type def above
- if (this.context.isCryptoEnabled() && this.context.isRoomEncrypted(this.props.room.roomId)) {
+ if (this.props.mxClient.isCryptoEnabled() && this.props.mxClient.isRoomEncrypted(this.props.room.roomId)) {
this.prepareToEncrypt = throttle(() => {
- this.context.prepareToEncrypt(this.props.room);
+ this.props.mxClient.prepareToEncrypt(this.props.room);
}, 60000, { leading: true, trailing: false });
}
window.addEventListener("beforeunload", this.saveStoredEditorState);
}
- public componentDidUpdate(prevProps: IProps): void {
+ public componentDidUpdate(prevProps: ISendMessageComposerProps): void {
const replyToEventChanged = this.props.replyInThread && (this.props.replyToEvent !== prevProps.replyToEvent);
if (replyToEventChanged) {
this.model.reset([]);
}
if (this.props.replyInThread && this.props.replyToEvent && (!prevProps.replyToEvent || replyToEventChanged)) {
- const partCreator = new CommandPartCreator(this.props.room, this.context);
+ const partCreator = new CommandPartCreator(this.props.room, this.props.mxClient);
const parts = this.restoreStoredEditorState(partCreator) || [];
this.model.reset(parts);
this.editorRef.current?.focus();
@@ -202,13 +199,20 @@ export default class SendMessageComposer extends React.Component<IProps> {
case MessageComposerAction.EditPrevMessage:
// selection must be collapsed and caret at start
if (this.editorRef.current?.isSelectionCollapsed() && this.editorRef.current?.isCaretAtStart()) {
- const editEvent = findEditableEvent(this.props.room, false);
+ const events =
+ this.context.liveTimeline.getEvents()
+ .concat(this.props.replyInThread ? [] : this.props.room.getPendingEvents());
+ const editEvent = findEditableEvent({
+ events,
+ isForward: false,
+ });
if (editEvent) {
// We're selecting history, so prevent the key event from doing anything else
event.preventDefault();
dis.dispatch({
- action: 'edit_event',
+ action: Action.EditEvent,
event: editEvent,
+ timelineRenderingType: this.context.timelineRenderingType,
});
}
}
@@ -275,7 +279,7 @@ export default class SendMessageComposer extends React.Component<IProps> {
}
private sendQuickReaction(): void {
- const timeline = this.props.room.getLiveTimeline();
+ const timeline = this.context.liveTimeline();
const events = timeline.getEvents();
const reaction = this.model.parts[1].text;
for (let i = events.length - 1; i >= 0; i--) {
@@ -448,7 +452,7 @@ export default class SendMessageComposer extends React.Component<IProps> {
decorateStartSendingTime(content);
}
- const prom = this.context.sendMessage(roomId, content);
+ const prom = this.props.mxClient.sendMessage(roomId, content);
if (replyToEvent) {
// Clear reply_to_event as we put the message into the queue
// if the send fails, retry will handle resending.
@@ -465,7 +469,7 @@ export default class SendMessageComposer extends React.Component<IProps> {
});
if (SettingsStore.getValue("Performance.addSendMessageTimingMetadata")) {
prom.then(resp => {
- sendRoundTripMetric(this.context, roomId, resp.event_id);
+ sendRoundTripMetric(this.props.mxClient, roomId, resp.event_id);
});
}
CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, false, !!replyToEvent, content);
@@ -490,7 +494,7 @@ export default class SendMessageComposer extends React.Component<IProps> {
// TODO: [REACT-WARNING] Move this to constructor
UNSAFE_componentWillMount() { // eslint-disable-line
- const partCreator = new CommandPartCreator(this.props.room, this.context);
+ const partCreator = new CommandPartCreator(this.props.room, this.props.mxClient);
const parts = this.restoreStoredEditorState(partCreator) || [];
this.model = new EditorModel(parts, partCreator);
this.dispatcherRef = dis.register(this.onAction);
@@ -577,7 +581,7 @@ export default class SendMessageComposer extends React.Component<IProps> {
// it puts the filename in as text/plain which we want to ignore.
if (clipboardData.files.length && !clipboardData.types.includes("text/rtf")) {
ContentMessages.sharedInstance().sendContentListToRoom(
- Array.from(clipboardData.files), this.props.room.roomId, this.context,
+ Array.from(clipboardData.files), this.props.room.roomId, this.props.mxClient,
);
return true; // to skip internal onPaste handler
}
@@ -608,3 +612,6 @@ export default class SendMessageComposer extends React.Component<IProps> {
);
}
}
+
+const SendMessageComposerWithMatrixClient = withMatrixClientHOC(SendMessageComposer);
+export default SendMessageComposerWithMatrixClient;
diff --git a/src/contexts/MatrixClientContext.ts b/src/contexts/MatrixClientContext.ts
deleted file mode 100644
index 7e8a92064d..0000000000
--- a/src/contexts/MatrixClientContext.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { createContext } from "react";
-import { MatrixClient } from "matrix-js-sdk/src/client";
-
-const MatrixClientContext = createContext<MatrixClient>(undefined);
-MatrixClientContext.displayName = "MatrixClientContext";
-export default MatrixClientContext;
diff --git a/src/contexts/MatrixClientContext.tsx b/src/contexts/MatrixClientContext.tsx
new file mode 100644
index 0000000000..292c1e34d8
--- /dev/null
+++ b/src/contexts/MatrixClientContext.tsx
@@ -0,0 +1,46 @@
+/*
+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.
+*/
+
+import React, { ComponentClass, createContext, forwardRef, useContext } from "react";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+
+const MatrixClientContext = createContext<MatrixClient>(undefined);
+MatrixClientContext.displayName = "MatrixClientContext";
+export default MatrixClientContext;
+
+export interface MatrixClientProps {
+ mxClient: MatrixClient;
+}
+
+const matrixHOC = <ComposedComponentProps extends {}>(
+ ComposedComponent: ComponentClass<ComposedComponentProps>,
+) => {
+ type ComposedComponentInstance = InstanceType<typeof ComposedComponent>;
+
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+
+ const TypedComponent = ComposedComponent;
+
+ return forwardRef<ComposedComponentInstance, Omit<ComposedComponentProps, 'mxClient'>>(
+ (props, ref) => {
+ const client = useContext(MatrixClientContext);
+
+ // @ts-ignore
+ return <TypedComponent ref={ref} {...props} mxClient={client} />;
+ },
+ );
+};
+export const withMatrixClientHOC = matrixHOC;
diff --git a/src/contexts/RoomContext.ts b/src/contexts/RoomContext.ts
index 0507a3e252..a57c14d90f 100644
--- a/src/contexts/RoomContext.ts
+++ b/src/contexts/RoomContext.ts
@@ -16,10 +16,15 @@ limitations under the License.
import { createContext } from "react";
-import { IState } from "../components/structures/RoomView";
+import { IRoomState } from "../components/structures/RoomView";
import { Layout } from "../settings/Layout";
-const RoomContext = createContext<IState>({
+export enum TimelineRenderingType {
+ Room,
+ Thread
+}
+
+const RoomContext = createContext<IRoomState>({
roomLoading: true,
peekLoading: false,
shouldPeek: true,
@@ -53,6 +58,8 @@ const RoomContext = createContext<IState>({
showDisplaynameChanges: true,
matrixClientIsReady: false,
dragCounter: 0,
+ timelineRenderingType: TimelineRenderingType.Room,
+ liveTimeline: undefined,
});
RoomContext.displayName = "RoomContext";
export default RoomContext;
diff --git a/src/dispatcher/actions.ts b/src/dispatcher/actions.ts
index 2a8ce7a08b..796dbbeeb6 100644
--- a/src/dispatcher/actions.ts
+++ b/src/dispatcher/actions.ts
@@ -128,7 +128,7 @@ export enum Action {
* Start a call transfer to a phone number
* payload: TransferCallPayload
*/
- TransferCallToPhoneNumber = "transfer_call_to_phone_number",
+ TransferCallToPhoneNumber = "transfer_call_to_phone_number",
/**
* Fired when CallHandler has checked for PSTN protocol support
@@ -205,4 +205,9 @@ export enum Action {
* Should be used with SettingUpdatedPayload.
*/
SettingUpdated = "setting_updated",
+
+ /**
+ * Fires when a user starts to edit event (e.g. up arrow in compositor)
+ */
+ EditEvent = "edit_event",
}
diff --git a/src/shouldHideEvent.ts b/src/shouldHideEvent.ts
index 985eae85a0..c31da5bd4f 100644
--- a/src/shouldHideEvent.ts
+++ b/src/shouldHideEvent.ts
@@ -17,7 +17,7 @@
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import SettingsStore from "./settings/SettingsStore";
-import { IState } from "./components/structures/RoomView";
+import { IRoomState } from "./components/structures/RoomView";
interface IDiff {
isMemberEvent: boolean;
@@ -54,7 +54,7 @@ function memberEventDiff(ev: MatrixEvent): IDiff {
* @param ctx An optional RoomContext to pull cached settings values from to avoid
* hitting the settings store
*/
-export default function shouldHideEvent(ev: MatrixEvent, ctx?: IState): boolean {
+export default function shouldHideEvent(ev: MatrixEvent, ctx?: IRoomState): boolean {
// Accessing the settings store directly can be expensive if done frequently,
// so we should prefer using cached values if a RoomContext is available
const isEnabled = ctx ?
diff --git a/src/utils/EventUtils.ts b/src/utils/EventUtils.ts
index ee8d9bceae..e16e58e0d2 100644
--- a/src/utils/EventUtils.ts
+++ b/src/utils/EventUtils.ts
@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { Room } from 'matrix-js-sdk/src/models/room';
import { MatrixEvent, EventStatus } from 'matrix-js-sdk/src/models/event';
import { MatrixClientPeg } from '../MatrixClientPeg';
@@ -73,9 +72,15 @@ export function canEditOwnEvent(mxEvent: MatrixEvent): boolean {
}
const MAX_JUMP_DISTANCE = 100;
-export function findEditableEvent(room: Room, isForward: boolean, fromEventId: string = undefined): MatrixEvent {
- const liveTimeline = room.getLiveTimeline();
- const events = liveTimeline.getEvents().concat(room.getPendingEvents());
+export function findEditableEvent({
+ events,
+ isForward,
+ fromEventId,
+}: {
+ events: MatrixEvent[];
+ isForward: boolean;
+ fromEventId?: string;
+}): MatrixEvent {
const maxIdx = events.length - 1;
const inc = isForward ? 1 : -1;
const beginIdx = isForward ? 0 : maxIdx;
diff --git a/test/components/views/rooms/SendMessageComposer-test.js b/test/components/views/rooms/SendMessageComposer-test.tsx
similarity index 64%
rename from test/components/views/rooms/SendMessageComposer-test.js
rename to test/components/views/rooms/SendMessageComposer-test.tsx
index db5b55df90..73fa388767 100644
--- a/test/components/views/rooms/SendMessageComposer-test.js
+++ b/test/components/views/rooms/SendMessageComposer-test.tsx
@@ -24,8 +24,10 @@ import { sleep } from "matrix-js-sdk/src/utils";
import SendMessageComposer, {
createMessageContent,
isQuickReaction,
+ SendMessageComposer as SendMessageComposerClass,
} from "../../../../src/components/views/rooms/SendMessageComposer";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
+import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/RoomContext";
import EditorModel from "../../../../src/editor/model";
import { createPartCreator, createRenderer } from "../../../editor/mock";
import { createTestClient, mkEvent, mkStubRoom } from "../../../test-utils";
@@ -33,18 +35,58 @@ import BasicMessageComposer from "../../../../src/components/views/rooms/BasicMe
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import SpecPermalinkConstructor from "../../../../src/utils/permalinks/SpecPermalinkConstructor";
import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
+import DocumentOffset from '../../../../src/editor/offset';
+import { Layout } from '../../../../src/settings/Layout';
jest.mock("../../../../src/stores/RoomViewStore");
configure({ adapter: new Adapter() });
describe('<SendMessageComposer/>', () => {
+ const roomContext = {
+ roomLoading: true,
+ peekLoading: false,
+ shouldPeek: true,
+ membersLoaded: false,
+ numUnreadMessages: 0,
+ draggingFile: false,
+ searching: false,
+ guestsCanJoin: false,
+ canPeek: false,
+ showApps: false,
+ isPeeking: false,
+ showRightPanel: true,
+ joining: false,
+ atEndOfLiveTimeline: true,
+ atEndOfLiveTimelineInit: false,
+ showTopUnreadMessagesBar: false,
+ statusBarVisible: false,
+ canReact: false,
+ canReply: false,
+ layout: Layout.Group,
+ lowBandwidth: false,
+ alwaysShowTimestamps: false,
+ showTwelveHourTimestamps: false,
+ readMarkerInViewThresholdMs: 3000,
+ readMarkerOutOfViewThresholdMs: 30000,
+ showHiddenEventsInTimeline: false,
+ showReadReceipts: true,
+ showRedactions: true,
+ showJoinLeaves: true,
+ showAvatarChanges: true,
+ showDisplaynameChanges: true,
+ matrixClientIsReady: false,
+ dragCounter: 0,
+ timelineRenderingType: TimelineRenderingType.Room,
+ liveTimeline: undefined,
+ };
describe("createMessageContent", () => {
- const permalinkCreator = jest.fn();
+ const permalinkCreator = jest.fn() as any;
it("sends plaintext messages correctly", () => {
const model = new EditorModel([], createPartCreator(), createRenderer());
- model.update("hello world", "insertText", { offset: 11, atNodeEnd: true });
+ const documentOffset = new DocumentOffset(11, true);
+ model.update("hello world", "insertText", documentOffset);
const content = createMessageContent(model, null, false, permalinkCreator);
@@ -56,7 +98,8 @@ describe('<SendMessageComposer/>', () => {
it("sends markdown messages correctly", () => {
const model = new EditorModel([], createPartCreator(), createRenderer());
- model.update("hello *world*", "insertText", { offset: 13, atNodeEnd: true });
+ const documentOffset = new DocumentOffset(13, true);
+ model.update("hello *world*", "insertText", documentOffset);
const content = createMessageContent(model, null, false, permalinkCreator);
@@ -70,7 +113,8 @@ describe('<SendMessageComposer/>', () => {
it("strips /me from messages and marks them as m.emote accordingly", () => {
const model = new EditorModel([], createPartCreator(), createRenderer());
- model.update("/me blinks __quickly__", "insertText", { offset: 22, atNodeEnd: true });
+ const documentOffset = new DocumentOffset(22, true);
+ model.update("/me blinks __quickly__", "insertText", documentOffset);
const content = createMessageContent(model, null, false, permalinkCreator);
@@ -84,7 +128,9 @@ describe('<SendMessageComposer/>', () => {
it("allows sending double-slash escaped slash commands correctly", () => {
const model = new EditorModel([], createPartCreator(), createRenderer());
- model.update("//dev/null is my favourite place", "insertText", { offset: 32, atNodeEnd: true });
+ const documentOffset = new DocumentOffset(32, true);
+
+ model.update("//dev/null is my favourite place", "insertText", documentOffset);
const content = createMessageContent(model, null, false, permalinkCreator);
@@ -97,9 +143,11 @@ describe('<SendMessageComposer/>', () => {
describe("functions correctly mounted", () => {
const mockClient = MatrixClientPeg.matrixClient = createTestClient();
- const mockRoom = mkStubRoom();
+ const mockRoom = mkStubRoom('myfakeroom') as any;
const mockEvent = mkEvent({
type: "m.room.message",
+ room: 'myfakeroom',
+ user: 'myfakeuser',
content: "Replying to this",
event: true,
});
@@ -116,11 +164,13 @@ describe('<SendMessageComposer/>', () => {
it("renders text and placeholder correctly", () => {
const wrapper = mount(<MatrixClientContext.Provider value={mockClient}>
- <SendMessageComposer
- room={mockRoom}
- placeholder="placeholder string"
- permalinkCreator={new SpecPermalinkConstructor()}
- />
+ <RoomContext.Provider value={roomContext}>
+ <SendMessageComposer
+ room={mockRoom as any}
+ placeholder="placeholder string"
+ permalinkCreator={new SpecPermalinkConstructor() as any}
+ />
+ </RoomContext.Provider>
</MatrixClientContext.Provider>);
expect(wrapper.find('[aria-label="placeholder string"]')).toHaveLength(1);
@@ -135,12 +185,15 @@ describe('<SendMessageComposer/>', () => {
it("correctly persists state to and from localStorage", () => {
const wrapper = mount(<MatrixClientContext.Provider value={mockClient}>
- <SendMessageComposer
- room={mockRoom}
- placeholder=""
- permalinkCreator={new SpecPermalinkConstructor()}
- replyToEvent={mockEvent}
- />
+ <RoomContext.Provider value={roomContext}>
+
+ <SendMessageComposer
+ room={mockRoom as any}
+ placeholder=""
+ permalinkCreator={new SpecPermalinkConstructor() as any}
+ replyToEvent={mockEvent}
+ />
+ </RoomContext.Provider>
</MatrixClientContext.Provider>);
act(() => {
@@ -148,7 +201,7 @@ describe('<SendMessageComposer/>', () => {
wrapper.update();
});
- const key = wrapper.find(SendMessageComposer).instance().editorStateKey;
+ const key = wrapper.find(SendMessageComposerClass).instance().editorStateKey;
expect(wrapper.text()).toBe("Test Text");
expect(localStorage.getItem(key)).toBeNull();
@@ -177,11 +230,14 @@ describe('<SendMessageComposer/>', () => {
it("persists state correctly without replyToEvent onbeforeunload", () => {
const wrapper = mount(<MatrixClientContext.Provider value={mockClient}>
- <SendMessageComposer
- room={mockRoom}
- placeholder=""
- permalinkCreator={new SpecPermalinkConstructor()}
- />
+ <RoomContext.Provider value={roomContext}>
+
+ <SendMessageComposer
+ room={mockRoom as any}
+ placeholder=""
+ permalinkCreator={new SpecPermalinkConstructor() as any}
+ />
+ </RoomContext.Provider>
</MatrixClientContext.Provider>);
act(() => {
@@ -189,7 +245,7 @@ describe('<SendMessageComposer/>', () => {
wrapper.update();
});
- const key = wrapper.find(SendMessageComposer).instance().editorStateKey;
+ const key = wrapper.find(SendMessageComposerClass).instance().editorStateKey;
expect(wrapper.text()).toBe("Hello World");
expect(localStorage.getItem(key)).toBeNull();
@@ -203,12 +259,15 @@ describe('<SendMessageComposer/>', () => {
it("persists to session history upon sending", async () => {
const wrapper = mount(<MatrixClientContext.Provider value={mockClient}>
- <SendMessageComposer
- room={mockRoom}
- placeholder="placeholder"
- permalinkCreator={new SpecPermalinkConstructor()}
- replyToEvent={mockEvent}
- />
+ <RoomContext.Provider value={roomContext}>
+
+ <SendMessageComposer
+ room={mockRoom as any}
+ placeholder="placeholder"
+ permalinkCreator={new SpecPermalinkConstructor() as any}
+ replyToEvent={mockEvent}
+ />
+ </RoomContext.Provider>
</MatrixClientContext.Provider>);
act(() => {
@@ -230,12 +289,38 @@ describe('<SendMessageComposer/>', () => {
replyEventId: mockEvent.getId(),
});
});
+
+ it('correctly sets the editorStateKey for threads', () => {
+ const mockThread ={
+ getThread: () => {
+ return {
+ id: 'myFakeThreadId',
+ };
+ },
+ } as any;
+ const wrapper = mount(<MatrixClientContext.Provider value={mockClient}>
+ <RoomContext.Provider value={roomContext}>
+
+ <SendMessageComposer
+ room={mockRoom as any}
+ placeholder=""
+ permalinkCreator={new SpecPermalinkConstructor() as any}
+ replyToEvent={mockThread}
+ />
+ </RoomContext.Provider>
+ </MatrixClientContext.Provider>);
+
+ const instance = wrapper.find(SendMessageComposerClass).instance();
+ const key = instance.editorStateKey;
+
+ expect(key).toEqual('mx_cider_state_myfakeroom_myFakeThreadId');
+ });
});
describe("isQuickReaction", () => {
it("correctly detects quick reaction", () => {
const model = new EditorModel([], createPartCreator(), createRenderer());
- model.update("+😊", "insertText", { offset: 3, atNodeEnd: true });
+ model.update("+😊", "insertText", new DocumentOffset(3, true));
const isReaction = isQuickReaction(model);
@@ -244,7 +329,7 @@ describe('<SendMessageComposer/>', () => {
it("correctly detects quick reaction with space", () => {
const model = new EditorModel([], createPartCreator(), createRenderer());
- model.update("+ 😊", "insertText", { offset: 4, atNodeEnd: true });
+ model.update("+ 😊", "insertText", new DocumentOffset(4, true));
const isReaction = isQuickReaction(model);
@@ -256,10 +341,10 @@ describe('<SendMessageComposer/>', () => {
const model2 = new EditorModel([], createPartCreator(), createRenderer());
const model3 = new EditorModel([], createPartCreator(), createRenderer());
const model4 = new EditorModel([], createPartCreator(), createRenderer());
- model.update("+😊hello", "insertText", { offset: 8, atNodeEnd: true });
- model2.update(" +😊", "insertText", { offset: 4, atNodeEnd: true });
- model3.update("+ 😊😊", "insertText", { offset: 6, atNodeEnd: true });
- model4.update("+smiley", "insertText", { offset: 7, atNodeEnd: true });
+ model.update("+😊hello", "insertText", new DocumentOffset( 8, true));
+ model2.update(" +😊", "insertText", new DocumentOffset( 4, true));
+ model3.update("+ 😊😊", "insertText", new DocumentOffset( 6, true));
+ model4.update("+smiley", "insertText", new DocumentOffset( 7, true));
expect(isQuickReaction(model)).toBeFalsy();
expect(isQuickReaction(model2)).toBeFalsy();
From 65c7657e3c795fc2df50e7105572cd96f50cad6a Mon Sep 17 00:00:00 2001
From: Germain Souquet <germains@element.io>
Date: Thu, 30 Sep 2021 14:01:33 +0100
Subject: [PATCH 301/313] Pass replacingEventId for edits to appear in thread's
view
---
src/components/views/rooms/EventTile.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 2f3173fa56..b74ee3a8cf 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -1209,6 +1209,7 @@ export default class EventTile extends React.Component<IProps, IState> {
onHeightChanged={this.props.onHeightChanged}
tileShape={this.props.tileShape}
editState={this.props.editState}
+ replacingEventId={this.props.replacingEventId}
/>
{ actionBar }
</div>,
From 94573568fddba01914e9ccf2df103d973bbde307 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germains@element.io>
Date: Thu, 30 Sep 2021 14:27:23 +0100
Subject: [PATCH 302/313] Add reply in thread hint to m.replace relations
---
.../views/rooms/EditMessageComposer.tsx | 29 ++++++++++++++-----
1 file changed, 21 insertions(+), 8 deletions(-)
diff --git a/src/components/views/rooms/EditMessageComposer.tsx b/src/components/views/rooms/EditMessageComposer.tsx
index bc1ebe881c..eaf2ea9673 100644
--- a/src/components/views/rooms/EditMessageComposer.tsx
+++ b/src/components/views/rooms/EditMessageComposer.tsx
@@ -35,7 +35,7 @@ import { getKeyBindingsManager, MessageComposerAction } from '../../../KeyBindin
import { replaceableComponent } from "../../../utils/replaceableComponent";
import SendHistoryManager from '../../../SendHistoryManager';
import Modal from '../../../Modal';
-import { MsgType } from 'matrix-js-sdk/src/@types/event';
+import { MsgType, UNSTABLE_ELEMENT_REPLY_IN_THREAD } from 'matrix-js-sdk/src/@types/event';
import { Room } from 'matrix-js-sdk/src/models/room';
import ErrorDialog from "../dialogs/ErrorDialog";
import QuestionDialog from "../dialogs/QuestionDialog";
@@ -46,7 +46,7 @@ import SettingsStore from "../../../settings/SettingsStore";
import { logger } from "matrix-js-sdk/src/logger";
import { withMatrixClientHOC, MatrixClientProps } from '../../../contexts/MatrixClientContext';
-import RoomContext from '../../../contexts/RoomContext';
+import RoomContext, { AppRenderingContext } from '../../../contexts/RoomContext';
function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
const html = mxEvent.getContent().formatted_body;
@@ -67,7 +67,11 @@ function getTextReplyFallback(mxEvent: MatrixEvent): string {
return "";
}
-function createEditContent(model: EditorModel, editedEvent: MatrixEvent): IContent {
+function createEditContent(
+ model: EditorModel,
+ editedEvent: MatrixEvent,
+ renderingContext?: AppRenderingContext,
+): IContent {
const isEmote = containsEmote(model);
if (isEmote) {
model = stripEmoteCommand(model);
@@ -100,13 +104,19 @@ function createEditContent(model: EditorModel, editedEvent: MatrixEvent): IConte
contentBody.formatted_body = `${htmlPrefix} * ${formattedBody}`;
}
- return Object.assign({
+ const relation = {
"m.new_content": newContent,
"m.relates_to": {
"rel_type": "m.replace",
"event_id": editedEvent.getId(),
},
- }, contentBody);
+ };
+
+ if (renderingContext === AppRenderingContext.Thread) {
+ relation['m.relates_to'][UNSTABLE_ELEMENT_REPLY_IN_THREAD.name] = true;
+ }
+
+ return Object.assign(relation, contentBody);
}
interface IEditMessageComposerProps extends MatrixClientProps {
@@ -132,8 +142,11 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
const isRestored = this.createEditorModel();
const ev = this.props.editState.getEvent();
+
+ const renderingContext = this.context.renderingContext;
+ const editContent = createEditContent(this.model, ev, renderingContext);
this.state = {
- saveDisabled: !isRestored || !this.isContentModified(createEditContent(this.model, ev)["m.new_content"]),
+ saveDisabled: !isRestored || !this.isContentModified(editContent["m.new_content"]),
};
window.addEventListener("beforeunload", this.saveStoredEditorState);
@@ -356,8 +369,8 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
const position = this.model.positionForOffset(caret.offset, caret.atNodeEnd);
this.editorRef.current?.replaceEmoticon(position, REGEX_EMOTICON);
}
-
- const editContent = createEditContent(this.model, editedEvent);
+ const renderingContext = this.context.renderingContext;
+ const editContent = createEditContent(this.model, editedEvent, renderingContext);
const newContent = editContent["m.new_content"];
let shouldSend = true;
From 25896880ca60cf5e2c22fdc8855cc0673766c4bf Mon Sep 17 00:00:00 2001
From: Germain Souquet <germains@element.io>
Date: Fri, 1 Oct 2021 14:50:35 +0100
Subject: [PATCH 303/313] Rename rendering context to timeline rendering type
---
src/components/views/rooms/EditMessageComposer.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/components/views/rooms/EditMessageComposer.tsx b/src/components/views/rooms/EditMessageComposer.tsx
index eaf2ea9673..f246361d06 100644
--- a/src/components/views/rooms/EditMessageComposer.tsx
+++ b/src/components/views/rooms/EditMessageComposer.tsx
@@ -46,7 +46,7 @@ import SettingsStore from "../../../settings/SettingsStore";
import { logger } from "matrix-js-sdk/src/logger";
import { withMatrixClientHOC, MatrixClientProps } from '../../../contexts/MatrixClientContext';
-import RoomContext, { AppRenderingContext } from '../../../contexts/RoomContext';
+import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
const html = mxEvent.getContent().formatted_body;
@@ -70,7 +70,7 @@ function getTextReplyFallback(mxEvent: MatrixEvent): string {
function createEditContent(
model: EditorModel,
editedEvent: MatrixEvent,
- renderingContext?: AppRenderingContext,
+ renderingContext?: TimelineRenderingType,
): IContent {
const isEmote = containsEmote(model);
if (isEmote) {
@@ -112,7 +112,7 @@ function createEditContent(
},
};
- if (renderingContext === AppRenderingContext.Thread) {
+ if (renderingContext === TimelineRenderingType.Thread) {
relation['m.relates_to'][UNSTABLE_ELEMENT_REPLY_IN_THREAD.name] = true;
}
From 597bfc9ca55e5d0a934c09dc93a696496e6b885d Mon Sep 17 00:00:00 2001
From: Germain Souquet <germains@element.io>
Date: Fri, 1 Oct 2021 15:10:32 +0100
Subject: [PATCH 304/313] Rename changed variable
---
src/components/views/rooms/EditMessageComposer.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/views/rooms/EditMessageComposer.tsx b/src/components/views/rooms/EditMessageComposer.tsx
index f246361d06..ce42131b6d 100644
--- a/src/components/views/rooms/EditMessageComposer.tsx
+++ b/src/components/views/rooms/EditMessageComposer.tsx
@@ -143,7 +143,7 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
const isRestored = this.createEditorModel();
const ev = this.props.editState.getEvent();
- const renderingContext = this.context.renderingContext;
+ const renderingContext = this.context.timelineRenderingType;
const editContent = createEditContent(this.model, ev, renderingContext);
this.state = {
saveDisabled: !isRestored || !this.isContentModified(editContent["m.new_content"]),
@@ -369,7 +369,7 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
const position = this.model.positionForOffset(caret.offset, caret.atNodeEnd);
this.editorRef.current?.replaceEmoticon(position, REGEX_EMOTICON);
}
- const renderingContext = this.context.renderingContext;
+ const renderingContext = this.context.timelineRenderingType;
const editContent = createEditContent(this.model, editedEvent, renderingContext);
const newContent = editContent["m.new_content"];
From f5ef133f1e83ab801d28014dcc66406c74eccd40 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <3636685+Palid@users.noreply.github.com>
Date: Fri, 1 Oct 2021 16:40:04 +0200
Subject: [PATCH 305/313] Fix setTheme types (#6894)
---
src/theme.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/theme.ts b/src/theme.ts
index 8f95f8c784..aaebe3746d 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -176,7 +176,7 @@ export function getCustomTheme(themeName: string): ICustomTheme {
*
* @param {string} theme new theme
*/
-export async function setTheme(theme: string): Promise<void> {
+export async function setTheme(theme?: string): Promise<void> {
if (!theme) {
const themeWatcher = new ThemeWatcher();
theme = themeWatcher.getEffectiveTheme();
From 51eac4ed9686635f3d3c739b1236fa11151483af Mon Sep 17 00:00:00 2001
From: jelv <post@jelv.nl>
Date: Sat, 2 Oct 2021 06:49:47 +0000
Subject: [PATCH 306/313] Translated using Weblate (Dutch)
Currently translated at 98.9% (3166 of 3198 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/nl/
---
src/i18n/strings/nl.json | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/nl.json b/src/i18n/strings/nl.json
index f13b8e77f9..0b9fb7641f 100644
--- a/src/i18n/strings/nl.json
+++ b/src/i18n/strings/nl.json
@@ -3166,5 +3166,8 @@
"Leave all rooms": "Alle kamers verlaten",
"Don't leave any rooms": "Geen kamers verlaten",
"Expand quotes │ ⇧+click": "Quotes uitvouwen │ ⇧+click",
- "Collapse quotes │ ⇧+click": "Quotes invouwen │ ⇧+click"
+ "Collapse quotes │ ⇧+click": "Quotes invouwen │ ⇧+click",
+ "%(senderDisplayName)s sent a sticker.": "%(senderDisplayName)s Verstuurde een sticker.",
+ "%(senderDisplayName)s changed the room avatar.": "%(senderDisplayName)s veranderde de kamerafbeelding.",
+ "%(date)s at %(time)s": "%(date)s om %(time)s"
}
From 65e67003f332dbffe6d936d6ca0d5cc8f723b674 Mon Sep 17 00:00:00 2001
From: Andrew Ferrazzutti <fair@miscworks.net>
Date: Sat, 2 Oct 2021 00:52:17 -0400
Subject: [PATCH 307/313] Allow hiding "Sign Up" in the guest preview bar
Hide the button when "UIFeature.registration" is set to false in
Element's config.json.
Fixes https://github.com/vector-im/element-web/issues/19264
Signed-off-by: Andrew Ferrazzutti <fair@miscworks.net>
---
src/components/views/rooms/RoomPreviewBar.tsx | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/src/components/views/rooms/RoomPreviewBar.tsx b/src/components/views/rooms/RoomPreviewBar.tsx
index 2acefc93d6..82437a5c14 100644
--- a/src/components/views/rooms/RoomPreviewBar.tsx
+++ b/src/components/views/rooms/RoomPreviewBar.tsx
@@ -35,6 +35,8 @@ import InviteReason from "../elements/InviteReason";
import { IOOBData } from "../../../stores/ThreepidInviteStore";
import Spinner from "../elements/Spinner";
import AccessibleButton from "../elements/AccessibleButton";
+import { UIFeature } from "../../../settings/UIFeature";
+import SettingsStore from "../../../settings/SettingsStore";
const MemberEventHtmlReasonField = "io.element.html_reason";
@@ -339,8 +341,10 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
}
case MessageCase.NotLoggedIn: {
title = _t("Join the conversation with an account");
- primaryActionLabel = _t("Sign Up");
- primaryActionHandler = this.onRegisterClick;
+ if (SettingsStore.getValue(UIFeature.Registration)) {
+ primaryActionLabel = _t("Sign Up");
+ primaryActionHandler = this.onRegisterClick;
+ }
secondaryActionLabel = _t("Sign In");
secondaryActionHandler = this.onLoginClick;
if (this.props.previewLoading) {
From a076bee7647e90e88be4a88241b8c1109f3decbd Mon Sep 17 00:00:00 2001
From: ColonisationCaptain
<52425971+ColonisationCaptain@users.noreply.github.com>
Date: Sun, 3 Oct 2021 19:51:46 +0100
Subject: [PATCH 308/313] Decrease profile button touch target
---
res/css/views/settings/_ProfileSettings.scss | 2 ++
1 file changed, 2 insertions(+)
diff --git a/res/css/views/settings/_ProfileSettings.scss b/res/css/views/settings/_ProfileSettings.scss
index 63a5fa7edf..35e517b5ac 100644
--- a/res/css/views/settings/_ProfileSettings.scss
+++ b/res/css/views/settings/_ProfileSettings.scss
@@ -67,5 +67,7 @@ limitations under the License.
> .mx_AccessibleButton_kind_link {
padding-left: 0; // to align with left side
+ padding-right: 0;
+ margin-right: 10px;
}
}
From 2d02bb691be95ceec3b4e4258424fcded5d52887 Mon Sep 17 00:00:00 2001
From: iaiz <git@iapellaniz.com>
Date: Mon, 4 Oct 2021 10:32:46 +0000
Subject: [PATCH 309/313] Translated using Weblate (Spanish)
Currently translated at 99.5% (3183 of 3198 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/es/
---
src/i18n/strings/es.json | 29 +++++++++++++++++++++++++++--
1 file changed, 27 insertions(+), 2 deletions(-)
diff --git a/src/i18n/strings/es.json b/src/i18n/strings/es.json
index b88bd56886..a508a9e40f 100644
--- a/src/i18n/strings/es.json
+++ b/src/i18n/strings/es.json
@@ -655,7 +655,7 @@
"%(brand)s collects anonymous analytics to allow us to improve the application.": "%(brand)s recoge información sobre cómo usas la aplicación para ayudarnos a mejorarla.",
"Privacy is important to us, so we don't collect any personal or identifiable data for our analytics.": "La privacidad nos importa, por lo que incluimos tus datos personales o que te puedan identificar para en las estadísticas.",
"Learn more about how we use analytics.": "Más información sobre el uso de los análisis de estadísticas.",
- "Check for update": "Comprobar actualizaciones",
+ "Check for update": "Comprobar si hay actualizaciones",
"Start automatically after system login": "Abrir automáticamente después de iniciar sesión en el sistema",
"No Audio Outputs detected": "No se han detectado salidas de sonido",
"Audio Output": "Salida de sonido",
@@ -3161,5 +3161,30 @@
"%(senderName)s unpinned a message from this room. See all pinned messages.": "%(senderName)s ha dejado de fijar un mensaje de esta sala. Ver todos los mensajes fijados.",
"%(senderName)s unpinned <a>a message</a> from this room. See all <b>pinned messages</b>.": "%(senderName)s ha dejado de fijar <a>un mensaje</a> de esta sala. Ver todos los <b>mensajes fijados</b>.",
"%(reactors)s reacted with %(content)s": "%(reactors)s han reaccionado con %(content)s",
- "Expand quotes │ ⇧+click": "Expandir citas │ ⇧+clic"
+ "Expand quotes │ ⇧+click": "Expandir citas │ ⇧+clic",
+ "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.": "Aquí empieza la exportación de <roomName/>. Exportado por <exporterDetails/> el %(exportDate)s.",
+ "Media omitted - file size limit exceeded": "Archivo omitido - supera el límite de tamaño",
+ "Media omitted": "Archivo omitido",
+ "Exporting your data": "Exportando tus datos",
+ "Export Chat": "Exportar conversación",
+ "Include Attachments": "Incluir archivos adjuntos",
+ "Size Limit": "Límite de tamaño",
+ "Format": "Formato",
+ "Stop": "Parar",
+ "MB": "MB",
+ "In reply to <a>this message</a>": "En respuesta a <a>este mensaje</a>",
+ "Export chat": "Exportar conversación",
+ "File Attached": "Archivo adjunto",
+ "Error fetching file": "Error al recuperar el archivo",
+ "Topic: %(topic)s": "Tema:",
+ "%(creatorName)s created this room.": "%(creatorName)s creó esta sala.",
+ "Current Timeline": "Línea de tiempo actual",
+ "Specify a number of messages": "Indica una cantidad de mensajes",
+ "From the beginning": "Desde el principio",
+ "Plain Text": "Texto",
+ "JSON": "JSON",
+ "HTML": "HTML",
+ "Are you sure you want to exit during this export?": "¿Seguro que quieres salir durante la exportación?",
+ "%(senderDisplayName)s changed the room avatar.": "%(senderDisplayName)s cambió la imagen de la sala.",
+ "%(senderDisplayName)s sent a sticker.": "%(senderDisplayName)s envió una pegatina."
}
From 287f4ae2f2c16ffad87db3d9d393cea2a6cae190 Mon Sep 17 00:00:00 2001
From: jelv <post@jelv.nl>
Date: Sun, 3 Oct 2021 13:12:17 +0000
Subject: [PATCH 310/313] Translated using Weblate (Dutch)
Currently translated at 100.0% (3198 of 3198 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/nl/
---
src/i18n/strings/nl.json | 34 +++++++++++++++++++++++++++++++++-
1 file changed, 33 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/nl.json b/src/i18n/strings/nl.json
index 0b9fb7641f..cce71ac8f2 100644
--- a/src/i18n/strings/nl.json
+++ b/src/i18n/strings/nl.json
@@ -3169,5 +3169,37 @@
"Collapse quotes │ ⇧+click": "Quotes invouwen │ ⇧+click",
"%(senderDisplayName)s sent a sticker.": "%(senderDisplayName)s Verstuurde een sticker.",
"%(senderDisplayName)s changed the room avatar.": "%(senderDisplayName)s veranderde de kamerafbeelding.",
- "%(date)s at %(time)s": "%(date)s om %(time)s"
+ "%(date)s at %(time)s": "%(date)s om %(time)s",
+ "Include Attachments": "Bijlages toevoegen",
+ "Size Limit": "Bestandsgrootte",
+ "Format": "Formaat",
+ "Select from the options below to export chats from your timeline": "Selecteer met welke opties u uw chats wilt exporteren van uw tijdlijn",
+ "Export Chat": "Chat exporteren",
+ "Exporting your data": "Uw data aan het exporteren",
+ "Stop": "Stop",
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Weet u zeker dat u wilt stoppen terwijl u uw data exporteert? Als u dit doet moet u later opnieuw beginnen.",
+ "Your export was successful. Find it in your Downloads folder.": "Uw export was succesvol. U vindt hem in uw Downloads-map.",
+ "The export was cancelled successfully": "De export was succesvol geannulleerd",
+ "Export Successful": "Export succesvol",
+ "MB": "MB",
+ "Number of messages": "Berichten aantal",
+ "Number of messages can only be a number between %(min)s and %(max)s": "Aantal berichten moet een getal zijn tussen %(min)s en %(max)s",
+ "Size can only be a number between %(min)s MB and %(max)s MB": "Bestand moet een grootte hebben tussen %(min)s MB en %(max)s MB",
+ "Enter a number between %(min)s and %(max)s": "Voer een nummer tussen %(min)s en %(max)s in",
+ "In reply to <a>this message</a>": "In antwoord op <a>dit bericht</a>",
+ "Export chat": "Chat exporteren",
+ "File Attached": "Bijgevoegd bestand",
+ "Error fetching file": "Fout bij bestand opvragen",
+ "Topic: %(topic)s": "Onderwerp: %(topic)s",
+ "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.": "Dit is de start van de export van <roomName/>. Geëxporteerd door <exporterDetails/> op %(exportDate)s.",
+ "%(creatorName)s created this room.": "%(creatorName)s heeft deze kamer gemaakt.",
+ "Media omitted - file size limit exceeded": "Media weggelaten - limiet bestandsgrootte overschreden",
+ "Media omitted": "Media weglaten",
+ "Current Timeline": "Huidige tijdlijn",
+ "Specify a number of messages": "Kies het aantal berichten",
+ "From the beginning": "Van het begin",
+ "Plain Text": "Platte tekst",
+ "JSON": "JSON",
+ "HTML": "HTML",
+ "Are you sure you want to exit during this export?": "Weet u zeker dat u wilt afsluiten tijdens een export?"
}
From dbd3829d3f28ddcfe684c7c3b9d5a41b5c3df3d4 Mon Sep 17 00:00:00 2001
From: Nikita Epifanov <NikGreens@protonmail.com>
Date: Mon, 4 Oct 2021 09:35:12 +0000
Subject: [PATCH 311/313] Translated using Weblate (Russian)
Currently translated at 98.2% (3141 of 3198 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/ru/
---
src/i18n/strings/ru.json | 35 ++++++++++++++++++++++++++++++++++-
1 file changed, 34 insertions(+), 1 deletion(-)
diff --git a/src/i18n/strings/ru.json b/src/i18n/strings/ru.json
index a06dd2f72f..d2766949fb 100644
--- a/src/i18n/strings/ru.json
+++ b/src/i18n/strings/ru.json
@@ -3162,5 +3162,38 @@
"To join a space you'll need an invite.": "Чтобы присоединиться к пространству, вам нужно получить приглашение.",
"Temporarily show communities instead of Spaces for this session. Support for this will be removed in the near future. This will reload Element.": "Временно показывать сообщества вместо пространств для этой сессии. Поддержка этого будет удалена в ближайшем будущем. Это перезагрузит Element.",
"Display Communities instead of Spaces": "Показывать сообщества вместо пространств",
- "You can also make Spaces from <a>communities</a>.": "Вы также можете создать пространство из <a>сообщества</a>."
+ "You can also make Spaces from <a>communities</a>.": "Вы также можете создать пространство из <a>сообщества</a>.",
+ "Include Attachments": "Включить вложения",
+ "Size Limit": "Ограничение по размеру",
+ "Format": "Формат",
+ "Export Chat": "Экспорт чата",
+ "Exporting your data": "Экспорт ваших данных",
+ "Stop": "Стоп",
+ "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Вы уверены, что хотите прекратить экспорт данных? Если да, то вам придется начать все сначала.",
+ "Your export was successful. Find it in your Downloads folder.": "Ваш экспорт звершен. Найдите его в папке \"Загрузки\".",
+ "The export was cancelled successfully": "Экспорт был отменен",
+ "Export Successful": "Экспорт завершен",
+ "MB": "Мб",
+ "Number of messages": "Количество сообщений",
+ "Number of messages can only be a number between %(min)s and %(max)s": "Количество сообщений может быть только числом между %(min)s и %(max)s",
+ "Size can only be a number between %(min)s MB and %(max)s MB": "Размер может быть только числом между %(min)s Мб и %(max)s Мб",
+ "Enter a number between %(min)s and %(max)s": "Введите число между %(min)s и %(max)s",
+ "In reply to <a>this message</a>": "В ответ на <a>это сообщение</a>",
+ "Export chat": "Экспорт чата",
+ "File Attached": "Файл прикреплен",
+ "Error fetching file": "Ошибка при получении файла",
+ "Topic: %(topic)s": "Тема: %(topic)s",
+ "This is the start of export of <roomName/>. Exported by <exporterDetails/> at %(exportDate)s.": "Это начало экспорта <roomName/>. Экспортировано <exporterDetails/> в %(exportDate)s.",
+ "%(creatorName)s created this room.": "%(creatorName)s создал(а) эту комнату.",
+ "Media omitted - file size limit exceeded": "Медиа пропущены - превышен лимит размера файла",
+ "Media omitted": "Медиа пропущены",
+ "Specify a number of messages": "Укажите количество сообщений",
+ "From the beginning": "С начала",
+ "Plain Text": "Текст",
+ "JSON": "JSON",
+ "HTML": "HTML",
+ "Are you sure you want to exit during this export?": "Вы уверены, что хотите выйти во время экспорта?",
+ "%(senderDisplayName)s sent a sticker.": "%(senderDisplayName)s отправил(а) стикер.",
+ "%(senderDisplayName)s changed the room avatar.": "%(senderDisplayName)s сменил(а) аватар комнаты.",
+ "%(date)s at %(time)s": "%(date)s в %(time)s"
}
From 27cd1f73bc41f35deeea8b5fe6b9ae389eb79ed3 Mon Sep 17 00:00:00 2001
From: Ihor Hordiichuk <igor_ck@outlook.com>
Date: Sun, 3 Oct 2021 21:01:53 +0000
Subject: [PATCH 312/313] Translated using Weblate (Ukrainian)
Currently translated at 66.7% (2134 of 3198 strings)
Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/uk/
---
src/i18n/strings/uk.json | 73 +++++++++++++++++++++++-----------------
1 file changed, 43 insertions(+), 30 deletions(-)
diff --git a/src/i18n/strings/uk.json b/src/i18n/strings/uk.json
index 8627e34ec1..4fe75dd2ff 100644
--- a/src/i18n/strings/uk.json
+++ b/src/i18n/strings/uk.json
@@ -511,12 +511,12 @@
"Command failed": "Не вдалося виконати команду",
"Could not find user in room": "Не вдалося знайти користувача в кімнаті",
"Please supply a widget URL or embed code": "Вкажіть URL або код вбудовування розширення",
- "Verifies a user, session, and pubkey tuple": "Звіряє користувача, сеанс та кортеж відкритого ключа",
+ "Verifies a user, session, and pubkey tuple": "Звіряє користувача, сеанс та супровід відкритого ключа",
"Unknown (user, session) pair:": "Невідома пара (користувача, сеансу):",
- "Session already verified!": "Сеанс вже підтверджений!",
- "WARNING: Session already verified, but keys do NOT MATCH!": "УВАГА: Сеанс вже підтверджений, проте ключі НЕ ЗБІГАЮТЬСЯ!",
- "WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and session %(deviceId)s is \"%(fprint)s\" which does not match the provided key \"%(fingerprint)s\". This could mean your communications are being intercepted!": "УВАГА: НЕ ВДАЛОСЯ ЗДІЙСНИТИ ЗВІРЯННЯ КЛЮЧА! Ключем для %(userId)s та сеансу %(deviceId)s є \"%(fprint)s\", що не відповідає наданому ключу \"%(fingerprint)s\". Це може означати, що ваші повідомлення перехоплюють!",
- "The signing key you provided matches the signing key you received from %(userId)s's session %(deviceId)s. Session marked as verified.": "Наданий вами ключ підпису збігається з ключем підпису, що ви отримали від сеансу %(deviceId)s %(userId)s. Сеанс позначено як звірений.",
+ "Session already verified!": "Сеанс вже звірено!",
+ "WARNING: Session already verified, but keys do NOT MATCH!": "УВАГА: Сеанс вже звірено, проте ключі НЕ ЗБІГАЮТЬСЯ!",
+ "WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and session %(deviceId)s is \"%(fprint)s\" which does not match the provided key \"%(fingerprint)s\". This could mean your communications are being intercepted!": "УВАГА: НЕ ВДАЛОСЯ ЗВІРИТИ КЛЮЧ! Ключем для %(userId)s та сеансу %(deviceId)s є «%(fprint)s», що не збігається з наданим ключем «%(fingerprint)s». Це може означати, що ваші повідомлення перехоплюють!",
+ "The signing key you provided matches the signing key you received from %(userId)s's session %(deviceId)s. Session marked as verified.": "Наданий вами ключ підпису збігається з ключем підпису, що ви отримали від сеансу %(deviceId)s %(userId)s. Сеанс позначено звіреним.",
"Sends the given emote coloured as a rainbow": "Надсилає вказаний смайлик, розфарбований веселкою",
"Displays list of commands with usages and descriptions": "Відбиває перелік команд із прикладами вжитку та описом",
"Displays information about a user": "Показує відомості про користувача",
@@ -559,10 +559,10 @@
"%(senderName)s created a rule banning servers matching %(glob)s for %(reason)s": "%(senderName)s створює правило блокування серверів зі збігом з %(glob)s через %(reason)s",
"Light": "Світла",
"Dark": "Темна",
- "You signed in to a new session without verifying it:": "Ви увійшли в новий сеанс, не підтвердивши його:",
- "Verify your other session using one of the options below.": "Перевірте інший сеанс за допомогою одного із варіантів знизу.",
- "%(name)s (%(userId)s) signed in to a new session without verifying it:": "%(name)s (%(userId)s) починає новий сеанс без його підтвердження:",
- "Ask this user to verify their session, or manually verify it below.": "Попросіть цього користувача підтвердити сеанс, або підтвердьте його власноруч унизу.",
+ "You signed in to a new session without verifying it:": "Ви увійшли в новий сеанс, не звіривши його:",
+ "Verify your other session using one of the options below.": "Звірте інший сеанс за допомогою одного з варіантів знизу.",
+ "%(name)s (%(userId)s) signed in to a new session without verifying it:": "%(name)s (%(userId)s) починає новий сеанс без його звірення:",
+ "Ask this user to verify their session, or manually verify it below.": "Попросіть цього користувача звірити сеанс, або звірте його власноруч унизу.",
"Not Trusted": "Не довірений",
"Manually Verify by Text": "Ручна перевірка за допомогою тексту",
"Interactively verify by Emoji": "Інтерактивно звірити за допомогою емодзі",
@@ -907,7 +907,7 @@
"Upgrade public room": "Поліпшити відкриту кімнату",
"Restore your key backup to upgrade your encryption": "Відновіть резервну копію вашого ключа, щоб поліпшити шифрування",
"You'll need to authenticate with the server to confirm the upgrade.": "Ви матимете пройти розпізнання на сервері щоб підтвердити поліпшування.",
- "Upgrade this session to allow it to verify other sessions, granting them access to encrypted messages and marking them as trusted for other users.": "Поліпште цей сеанс щоб уможливити звіряння інших сеансів, надаючи їм доступ до зашифрованих повідомлень та позначуючи їх довіреними для інших користувачів.",
+ "Upgrade this session to allow it to verify other sessions, granting them access to encrypted messages and marking them as trusted for other users.": "Оновіть цей сеанс, щоб уможливити звірення інших сеансів, надаючи їм доступ до зашифрованих повідомлень та позначаючи їх довіреними для інших користувачів.",
"Upgrade your encryption": "Поліпшити ваше шифрування",
"Show a placeholder for removed messages": "Показувати замісну позначку замість видалених повідомлень",
"Show join/leave messages (invites/kicks/bans unaffected)": "Показувати повідомлення про приєднання/вихід (не впливає на запрошення/викидання/блокування)",
@@ -971,11 +971,11 @@
"Verify this user by confirming the following emoji appear on their screen.": "Звірте цього користувача підтвердженням того, що наступні емодзі з'являються на його екрані.",
"Emoji picker": "Обирач емодзі",
"The session you are trying to verify doesn't support scanning a QR code or emoji verification, which is what %(brand)s supports. Try with a different client.": "Сеанс, який ви намагаєтесь звірити, не підтримує сканування QR-коду або звіряння за допомогою емодзі, що є підтримувані %(brand)s. Спробуйте використати інший клієнт.",
- "If you can't scan the code above, verify by comparing unique emoji.": "Якщо ви не можете відсканувати вищезазначений код, звірте порівнянням унікальних емодзі.",
+ "If you can't scan the code above, verify by comparing unique emoji.": "Якщо ви не можете сканувати зазначений код, звірте порівнянням унікальних емодзі.",
"Verify by comparing unique emoji.": "Звірити порівнянням унікальних емодзі.",
"Verify by emoji": "Звірити за допомогою емодзі",
"Compare emoji": "Порівняти емодзі",
- "Your new session is now verified. It has access to your encrypted messages, and other users will see it as trusted.": "Ваш новий сеанс тепер є звірений. Він має доступ до ваших зашифрованих повідомлень, а інші користувачі бачитимуть його як довірений.",
+ "Your new session is now verified. It has access to your encrypted messages, and other users will see it as trusted.": "Ваш новий сеанс звірено. Він має доступ до ваших зашифрованих повідомлень, а інші користувачі бачитимуть його довіреним.",
"Emoji": "Емодзі",
"Emoji Autocomplete": "Самодоповнення емодзі",
"%(senderName)s created a ban rule matching %(glob)s for %(reason)s": "%(senderName)s створює правило блокування зі збігом з %(glob)s через %(reason)s",
@@ -1355,11 +1355,11 @@
"%(severalUsers)sjoined %(count)s times|other": "%(severalUsers)sприєдналися %(count)s разів",
"Members only (since they joined)": "Лише учасники (від часу приєднання)",
"This room is not accessible by remote Matrix servers": "Ця кімната недоступна для віддалених серверів Matrix",
- "Manually verify all remote sessions": "Перевірити всі сеанси власноруч",
+ "Manually verify all remote sessions": "Звірити всі сеанси власноруч",
"Explore rooms": "Каталог кімнат",
"Session key:": "Ключ сеансу:",
"Hide sessions": "Сховати сеанси",
- "Hide verified sessions": "Сховати підтверджені сеанси",
+ "Hide verified sessions": "Сховати звірені сеанси",
"Session ID:": "ID сеансу:",
"Click the button below to confirm setting up encryption.": "Клацніть на кнопку внизу, щоб підтвердити налаштування шифрування.",
"Confirm encryption setup": "Підтвердити налаштування шифрування",
@@ -1377,7 +1377,7 @@
"Try again": "Спробувати ще раз",
"%(creator)s created this DM.": "%(creator)s створює цю приватну розмову.",
"Share Link to User": "Поділитися посиланням на користувача",
- "Messages here are end-to-end encrypted. Verify %(displayName)s in their profile - tap on their avatar.": "Повідомлення тут захищено наскрізним шифруванням. Підтвердьте %(displayName)s у їхньому профілі — натиснувши на їх аватар.",
+ "Messages here are end-to-end encrypted. Verify %(displayName)s in their profile - tap on their avatar.": "Повідомлення тут захищено наскрізним шифруванням. Звірте %(displayName)s у їхньому профілі — натиснувши на їх аватар.",
"<a>In reply to</a> <pill>": "<a>У відповідь на</a> <pill>",
"The user you called is busy.": "Користувач, якого ви викликаєте, зайнятий.",
"User Busy": "Користувач зайнятий",
@@ -1419,7 +1419,7 @@
"Not trusted": "Не довірений",
"Trusted": "Довірений",
"This backup is trusted because it has been restored on this session": "Ця резервна копія довірена, оскільки її було відновлено у цьому сеансі",
- "Individually verify each session used by a user to mark it as trusted, not trusting cross-signed devices.": "Індивідуально перевіряйте кожен сеанс, який використовується користувачем, щоб позначити його довіреним, не довіряючи пристроям перехресного підписування.",
+ "Individually verify each session used by a user to mark it as trusted, not trusting cross-signed devices.": "Індивідуально звіряйте кожен сеанс, який використовується користувачем, щоб позначити його довіреним, не довіряючи пристроям перехресного підписування.",
"To be secure, do this in person or use a trusted way to communicate.": "Для забезпечення безпеки зробіть це особисто або скористайтесь надійним способом зв'язку.",
"You can change this at any time from room settings.": "Ви завжди можете змінити це у налаштуваннях кімнати.",
"Room settings": "Налаштування кімнати",
@@ -1623,12 +1623,12 @@
"Your homeserver rejected your log in attempt. This could be due to things just taking too long. Please try again. If this continues, please contact your homeserver administrator.": "Ваш домашній сервер намагався відхилити спробу вашого входу. Це може бути пов'язано з занадто тривалим часом входу. Повторіть спробу. Якщо це триватиме й далі, зверніться до адміністратора домашнього сервера.",
"Your homeserver was unreachable and was not able to log you in. Please try again. If this continues, please contact your homeserver administrator.": "Ваш домашній сервер був недоступний і вхід не виконано. Повторіть спробу. Якщо це триватиме й далі, зверніться до адміністратора свого домашнього сервера.",
"We asked the browser to remember which homeserver you use to let you sign in, but unfortunately your browser has forgotten it. Go to the sign in page and try again.": "Ми попросили переглядач запам’ятати, який домашній сервер ви використовуєте, щоб дозволити вам увійти, але, на жаль, ваш переглядач забув його. Перейдіть на сторінку входу та повторіть спробу.",
- "You've successfully verified %(deviceName)s (%(deviceId)s)!": "Ви успішно підтвердили %(deviceName)s (%(deviceId)s)!",
- "You've successfully verified your device!": "Ви успішно підтвердили свій пристрій!",
- "You've successfully verified %(displayName)s!": "Ви успішно підтвердили %(displayName)s!",
+ "You've successfully verified %(deviceName)s (%(deviceId)s)!": "Ви успішно звірили %(deviceName)s (%(deviceId)s)!",
+ "You've successfully verified your device!": "Ви успішно звірили свій пристрій!",
+ "You've successfully verified %(displayName)s!": "Ви успішно звірили %(displayName)s!",
"Almost there! Is %(displayName)s showing the same shield?": "Майже готово! Ваш %(displayName)s показує той самий щит?",
"Almost there! Is your other session showing the same shield?": "Майже готово! Ваш інший сеанс показує той самий щит?",
- "Verify by scanning": "Підтвердити скануванням",
+ "Verify by scanning": "Звірити скануванням",
"Remove recent messages by %(user)s": "Вилучити останні повідомлення від %(user)s",
"Remove recent messages": "Видалити останні повідомлення",
"Edit devices": "Керувати пристроями",
@@ -1638,11 +1638,11 @@
"Server Options": "Опції сервера",
"Verify your identity to access encrypted messages and prove your identity to others.": "Підтвердьте свою особу, щоб отримати доступ до зашифрованих повідомлень і довести свою справжність іншим.",
"Allow this widget to verify your identity": "Дозволити цьому розширенню перевіряти вашу особу",
- "Verify this login": "Підтвердити цей вхід",
- "Verify other login": "Підтвердити інший вхід",
+ "Verify this login": "Звірити цей вхід",
+ "Verify other login": "Звірити інший вхід",
"Use another login": "Інший обліковий запис",
"Use Security Key": "Використати ключ безпеки",
- "Without verifying, you won’t have access to all your messages and may appear as untrusted to others.": "Без підтвердження ви не матимете доступу до всіх своїх повідомлень, а інші бачитимуть вас ненадійними.",
+ "Without verifying, you won’t have access to all your messages and may appear as untrusted to others.": "Без звірки ви не матимете доступу до всіх своїх повідомлень, а інші бачитимуть вас недовіреними.",
"New? <a>Create account</a>": "Вперше тут? <a>Створіть обліковий запис</a>",
"Forgotten your password?": "Забули свій пароль?",
"Forgot password?": "Забули пароль?",
@@ -1659,8 +1659,8 @@
"%(senderName)s unpinned <a>a message</a> from this room. See all <b>pinned messages</b>.": "%(senderName)s відкріплює <a>повідомлення</a> з цієї кімнати. Перегляньте всі <b>прикріплені повідомлення</b>.",
"%(senderName)s pinned a message to this room. See all pinned messages.": "%(senderName)s прикріплює повідомлення до цієї кімнати. Перегляньте всі прикріплені повідомлення.",
"%(senderName)s pinned <a>a message</a> to this room. See all <b>pinned messages</b>.": "%(senderName)s прикріплює <a>повідомлення</a> до цієї кімнати. Перегляньте всі <b>прикріплені повідомлення</b>.",
- "Verify this user by confirming the following number appears on their screen.": "Перевірте цього користувача, підтвердивши, що на екрані з'явилося таке число.",
- "Verify this session by confirming the following number appears on its screen.": "Перевірте цей сеанс, підтвердивши, що на екрані з'явилося це число.",
+ "Verify this user by confirming the following number appears on their screen.": "Звірте справжність цього користувача, підтвердивши, що на екрані з'явилося таке число.",
+ "Verify this session by confirming the following number appears on its screen.": "Звірте цей сеанс, підтвердивши, що на екрані з'явилося це число.",
"They don't match": "Вони не збігаються",
"They match": "Вони збігаються",
"Return to call": "Повернутися до виклику",
@@ -1692,7 +1692,7 @@
"Enable desktop notifications": "Увімкнути сповіщення стільниці",
"Don't miss a reply": "Не пропустіть відповідей",
"Review to ensure your account is safe": "Перевірте, щоб переконатися, що ваш обліковий запис у безпеці",
- "You have unverified logins": "У вас є не підтверджені сеанси",
+ "You have unverified logins": "У вас є незвірені сеанси",
"Error leaving room": "Помилка під час виходу з кімнати",
"This homeserver has been blocked by its administrator.": "Цей домашній сервер заблокований адміністратором.",
"See when the name changes in your active room": "Бачити, коли зміниться назва активної кімнати",
@@ -1726,7 +1726,7 @@
"Start sharing your screen": "Почати показ екрана",
"Start the camera": "Запустити камеру",
"Scan this unique code": "Скануйте цей унікальний код",
- "Verify this session by completing one of the following:": "Підтвердьте цей сеанс одним із запропонованих способів:",
+ "Verify this session by completing one of the following:": "Звірте цей сеанс одним із запропонованих способів:",
"Leave %(groupName)s?": "Вийти з %(groupName)s?",
"Leave Community": "Вийти зі спільноти",
"Add a User": "Додати користувача",
@@ -1900,7 +1900,7 @@
"Community Autocomplete": "Автозаповнення спільноти",
"Command Autocomplete": "Команда автозаповнення",
"Commands": "Команди",
- "Your new session is now verified. Other users will see it as trusted.": "Тепер ваша новий сеанс тепер підтверджено. Інші користувачі побачать її довіреною.",
+ "Your new session is now verified. Other users will see it as trusted.": "Ваш новий сеанс звірено. Інші користувачі побачать його довіреним.",
"Registration Successful": "Реєстрацію успішно виконано",
"You can now close this window or <a>log in</a> to your new account.": "Тепер можете закрити це вікно або <a>увійти</a> до свого нового облікового запису.",
"<a>Log in</a> to your new account.": "<a>Увійти</a> до нового облікового запису.",
@@ -1908,7 +1908,7 @@
"Set a new password": "Установити новий пароль",
"Return to login screen": "Повернутися на сторінку входу",
"Send Reset Email": "Надіслати електронного листа скидання пароля",
- "Session verified": "Сеанс підтверджено",
+ "Session verified": "Сеанс звірено",
"User settings": "Користувацькі налаштування",
"Community settings": "Налаштування спільноти",
"Switch theme": "Змінити тему",
@@ -2123,5 +2123,18 @@
"Add reaction": "Додати реакцію",
"%(senderDisplayName)s sent a sticker.": "%(senderDisplayName)s надсилає наліпку.",
"%(senderDisplayName)s changed the room avatar.": "%(senderDisplayName)s змінює аватар кімнати.",
- "%(date)s at %(time)s": "%(date)s о %(time)s"
+ "%(date)s at %(time)s": "%(date)s о %(time)s",
+ "Manually export keys": "Експорт ключів власноруч",
+ "Don't leave any rooms": "Не виходити з будь-якої кімнати",
+ "Updating %(brand)s": "Оновлення %(brand)s",
+ "Clear cache and resync": "Очистити кеш і повторно синхронізувати",
+ "Incompatible local cache": "Несумісний локальний кеш",
+ "Signature upload failed": "Не вдалося вивантажити підпис",
+ "Signature upload success": "Підпис успішно вивантажено",
+ "Unable to upload": "Не вдалося вивантажити",
+ "Cancelled signature upload": "Вивантаження підпису скасовано",
+ "Upload completed": "Вивантаження виконано",
+ "Search %(spaceName)s": "Пошук %(spaceName)s",
+ "Leave some rooms": "Вийте з кількох кімнат",
+ "Leave all rooms": "Вийти з кімнати"
}
From c670d95e2791da7eaf96abb05d2dbfb2f397d017 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germains@element.io>
Date: Mon, 4 Oct 2021 12:30:26 +0100
Subject: [PATCH 313/313] Update dependencies
---
yarn.lock | 782 +++++++++++++++++++++++++++---------------------------
1 file changed, 387 insertions(+), 395 deletions(-)
diff --git a/yarn.lock b/yarn.lock
index ec2d9e08ea..84d82220f4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3,9 +3,11 @@
"@actions/core@^1.4.0":
- version "1.5.0"
- resolved "https://registry.yarnpkg.com/@actions/core/-/core-1.5.0.tgz#885b864700001a1b9a6fba247833a036e75ad9d3"
- integrity sha512-eDOLH1Nq9zh+PJlYLqEMkS/jLQxhksPNmUGNBHfa4G+tQmnIhzpctxmchETtVGyBOvXgOVVpYuE40+eS4cUnwQ==
+ version "1.6.0"
+ resolved "https://registry.yarnpkg.com/@actions/core/-/core-1.6.0.tgz#0568e47039bfb6a9170393a73f3b7eb3b22462cb"
+ integrity sha512-NB1UAZomZlCV/LmJqkLhNTqtKfFXJZAUPcfl/zqG7EfsQdeUJtaWO98SGbuQ3pydJ3fHl2CvI/51OKYlCYYcaw==
+ dependencies:
+ "@actions/http-client" "^1.0.11"
"@actions/github@^5.0.0":
version "5.0.0"
@@ -25,9 +27,9 @@
tunnel "0.0.6"
"@babel/cli@^7.12.10":
- version "7.15.4"
- resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.15.4.tgz#00e21e192b738dec7900c8bb36270e377217c0a4"
- integrity sha512-9RhhQ7tgKRcSO/jI3rNLxalLSk30cHqeM8bb+nGOJTyYBDpkoXw/A9QHZ2SYjlslAt4tr90pZQGIEobwWHSIDw==
+ version "7.15.7"
+ resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.15.7.tgz#62658abedb786d09c1f70229224b11a65440d7a1"
+ integrity sha512-YW5wOprO2LzMjoWZ5ZG6jfbY9JnkDxuHDwvnrThnuYtByorova/I0HNXJedrUfwuXFQfYOjcqDA4PU3qlZGZjg==
dependencies:
commander "^4.0.1"
convert-source-map "^1.1.0"
@@ -37,7 +39,7 @@
slash "^2.0.0"
source-map "^0.5.0"
optionalDependencies:
- "@nicolo-ribaudo/chokidar-2" "2.1.8-no-fsevents.2"
+ "@nicolo-ribaudo/chokidar-2" "2.1.8-no-fsevents.3"
chokidar "^3.4.0"
"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.14.5":
@@ -74,9 +76,9 @@
source-map "^0.5.0"
"@babel/eslint-parser@^7.12.10":
- version "7.15.4"
- resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.15.4.tgz#46385943726291fb3e8db99522c8099b15684387"
- integrity sha512-hPMIAmGNbmQzXJIo2P43Zj9UhRmGev5f9nqdBFOWNGDGh6XKmjby79woBvg6y0Jur6yRfQBneDbUQ8ZVc1krFw==
+ version "7.15.7"
+ resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.15.7.tgz#2dc3d0ff0ea22bb1e08d93b4eeb1149bf1c75f2d"
+ integrity sha512-yJkHyomClm6A2Xzb8pdAo4HzYMSXFn1O5zrCYvbFP0yQFvHueLedV8WiEno8yJOKStjUXzBZzJFeWQ7b3YMsqQ==
dependencies:
eslint-scope "^5.1.1"
eslint-visitor-keys "^2.1.0"
@@ -202,18 +204,18 @@
"@babel/types" "^7.15.4"
"@babel/helper-module-transforms@^7.14.5", "@babel/helper-module-transforms@^7.15.4":
- version "7.15.4"
- resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.15.4.tgz#962cc629a7f7f9a082dd62d0307fa75fe8788d7c"
- integrity sha512-9fHHSGE9zTC++KuXLZcB5FKgvlV83Ox+NLUmQTawovwlJ85+QMhk1CnVk406CQVj97LaWod6KVjl2Sfgw9Aktw==
+ version "7.15.7"
+ resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.15.7.tgz#7da80c8cbc1f02655d83f8b79d25866afe50d226"
+ integrity sha512-ZNqjjQG/AuFfekFTY+7nY4RgBSklgTu970c7Rj3m/JOhIu5KPBUuTA9AY6zaKcUvk4g6EbDXdBnhi35FAssdSw==
dependencies:
"@babel/helper-module-imports" "^7.15.4"
"@babel/helper-replace-supers" "^7.15.4"
"@babel/helper-simple-access" "^7.15.4"
"@babel/helper-split-export-declaration" "^7.15.4"
- "@babel/helper-validator-identifier" "^7.14.9"
+ "@babel/helper-validator-identifier" "^7.15.7"
"@babel/template" "^7.15.4"
"@babel/traverse" "^7.15.4"
- "@babel/types" "^7.15.4"
+ "@babel/types" "^7.15.6"
"@babel/helper-optimise-call-expression@^7.15.4":
version "7.15.4"
@@ -267,10 +269,10 @@
dependencies:
"@babel/types" "^7.15.4"
-"@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.9":
- version "7.14.9"
- resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48"
- integrity sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==
+"@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.15.7":
+ version "7.15.7"
+ resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
+ integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
"@babel/helper-validator-option@^7.14.5":
version "7.14.5"
@@ -306,9 +308,9 @@
js-tokens "^4.0.0"
"@babel/parser@^7.1.0", "@babel/parser@^7.12.11", "@babel/parser@^7.13.16", "@babel/parser@^7.15.4", "@babel/parser@^7.15.5":
- version "7.15.6"
- resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.6.tgz#043b9aa3c303c0722e5377fef9197f4cf1796549"
- integrity sha512-S/TSCcsRuCkmpUuoWijua0Snt+f3ewU/8spLo+4AXJCZfT0bVCzLD5MuOKdrx0mlAptbKzn5AdgEIIKXxXkz9Q==
+ version "7.15.7"
+ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.7.tgz#0c3ed4a2eb07b165dfa85b3cc45c727334c4edae"
+ integrity sha512-rycZXvQ+xS9QyIcJ9HXeDWf1uxqlbVFAUq0Rq0dbc50Zb/+wUe/ehyfzGfm9KZZF0kBejYgxltBXocP+gKdL2g==
"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.15.4":
version "7.15.4"
@@ -1308,22 +1310,10 @@
version "3.2.3"
resolved "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz#cc332fdd25c08ef0e40f4d33fc3f822a0f98b6f4"
-"@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.2":
- version "2.1.8-no-fsevents.2"
- resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.2.tgz#e324c0a247a5567192dd7180647709d7e2faf94b"
- integrity sha512-Fb8WxUFOBQVl+CX4MWet5o7eCc6Pj04rXIwVKZ6h1NnqTo45eOQW6aWyhG25NIODvWFwTDMwBsYxrQ3imxpetg==
- dependencies:
- anymatch "^2.0.0"
- async-each "^1.0.1"
- braces "^2.3.2"
- glob-parent "^5.1.2"
- inherits "^2.0.3"
- is-binary-path "^1.0.0"
- is-glob "^4.0.0"
- normalize-path "^3.0.0"
- path-is-absolute "^1.0.0"
- readdirp "^2.2.1"
- upath "^1.1.1"
+"@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3":
+ version "2.1.8-no-fsevents.3"
+ resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b"
+ integrity sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==
"@nodelib/fs.scandir@2.1.5":
version "2.1.5"
@@ -1347,9 +1337,9 @@
fastq "^1.6.0"
"@octokit/auth-token@^2.4.4":
- version "2.4.5"
- resolved "https://registry.yarnpkg.com/@octokit/auth-token/-/auth-token-2.4.5.tgz#568ccfb8cb46f36441fac094ce34f7a875b197f3"
- integrity sha512-BpGYsPgJt05M7/L/5FoE1PiAbdxXFZkX/3kDYcsvd1v6UhlnE5e96dTDr0ezX/EFwciQxf3cNV0loipsURU+WA==
+ version "2.5.0"
+ resolved "https://registry.yarnpkg.com/@octokit/auth-token/-/auth-token-2.5.0.tgz#27c37ea26c205f28443402477ffd261311f21e36"
+ integrity sha512-r5FVUJCOLl19AxiuZD2VRZ/ORjp/4IN98Of6YJoJOkY75CIBuYfmiNHGrDwXr+aLGG55igl9QrxX3hbiXlLb+g==
dependencies:
"@octokit/types" "^6.0.3"
@@ -1384,29 +1374,29 @@
"@octokit/types" "^6.0.3"
universal-user-agent "^6.0.0"
-"@octokit/openapi-types@^10.2.2":
- version "10.2.2"
- resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-10.2.2.tgz#6c1c839d7d169feabaf1d2a69c79439c75d979cd"
- integrity sha512-EVcXQ+ZrC04cg17AMg1ofocWMxHDn17cB66ZHgYc0eUwjFtxS0oBzkyw2VqIrHBwVgtfoYrq1WMQfQmMjUwthw==
+"@octokit/openapi-types@^10.6.4":
+ version "10.6.4"
+ resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-10.6.4.tgz#c8b5b1f5c60ab7c62858abe2ef57bc709f426a30"
+ integrity sha512-JVmwWzYTIs6jACYOwD6zu5rdrqGIYsiAsLzTCxdrWIPNKNVjEF6vPTL20shmgJ4qZsq7WPBcLXLsaQD+NLChfg==
-"@octokit/plugin-paginate-rest@^2.13.3", "@octokit/plugin-paginate-rest@^2.16.0":
- version "2.16.3"
- resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.16.3.tgz#6dbf74a12a53e04da6ca731d4c93f20c0b5c6fe9"
- integrity sha512-kdc65UEsqze/9fCISq6BxLzeB9qf0vKvKojIfzgwf4tEF+Wy6c9dXnPFE6vgpoDFB1Z5Jek5WFVU6vL1w22+Iw==
+"@octokit/plugin-paginate-rest@^2.13.3", "@octokit/plugin-paginate-rest@^2.16.4":
+ version "2.16.7"
+ resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.16.7.tgz#d25b6e650ba5a007002986f5fda66958d44e70a4"
+ integrity sha512-TMlyVhMPx6La1Ud4PSY4YxqAvb9YPEMs/7R1nBSbsw4wNqG73aBqls0r0dRRCWe5Pm0ZUGS9a94N46iAxlOR8A==
dependencies:
- "@octokit/types" "^6.28.1"
+ "@octokit/types" "^6.31.3"
"@octokit/plugin-request-log@^1.0.4":
version "1.0.4"
resolved "https://registry.yarnpkg.com/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz#5e50ed7083a613816b1e4a28aeec5fb7f1462e85"
integrity sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==
-"@octokit/plugin-rest-endpoint-methods@^5.1.1", "@octokit/plugin-rest-endpoint-methods@^5.9.0":
- version "5.10.4"
- resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.10.4.tgz#97e85eb7375e30b9bf193894670f9da205e79408"
- integrity sha512-Dh+EAMCYR9RUHwQChH94Skl0lM8Fh99auT8ggck/xTzjJrwVzvsd0YH68oRPqp/HxICzmUjLfaQ9sy1o1sfIiA==
+"@octokit/plugin-rest-endpoint-methods@5.11.4", "@octokit/plugin-rest-endpoint-methods@^5.1.1":
+ version "5.11.4"
+ resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.11.4.tgz#221dedcbdc45d6bfa54228d469e8c34acb4e0e34"
+ integrity sha512-iS+GYTijrPUiEiLoDsGJhrbXIvOPfm2+schvr+FxNMs7PeE9Nl4bAMhE8ftfNX3Z1xLxSKwEZh0O7GbWurX5HQ==
dependencies:
- "@octokit/types" "^6.28.1"
+ "@octokit/types" "^6.31.2"
deprecation "^2.3.1"
"@octokit/request-error@^2.0.5", "@octokit/request-error@^2.1.0":
@@ -1419,9 +1409,9 @@
once "^1.4.0"
"@octokit/request@^5.6.0":
- version "5.6.1"
- resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.6.1.tgz#f97aff075c37ab1d427c49082fefeef0dba2d8ce"
- integrity sha512-Ls2cfs1OfXaOKzkcxnqw5MR6drMA/zWX/LIS/p8Yjdz7QKTPQLMsB3R+OvoxE6XnXeXEE2X7xe4G4l4X0gRiKQ==
+ version "5.6.2"
+ resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.6.2.tgz#1aa74d5da7b9e04ac60ef232edd9a7438dcf32d8"
+ integrity sha512-je66CvSEVf0jCpRISxkUcCa0UkxmFs6eGDRSbfJtAVwbLH5ceqF+YEyC8lj8ystKyZTy8adWr0qmkY52EfOeLA==
dependencies:
"@octokit/endpoint" "^6.0.1"
"@octokit/request-error" "^2.1.0"
@@ -1431,21 +1421,21 @@
universal-user-agent "^6.0.0"
"@octokit/rest@^18.6.7":
- version "18.10.0"
- resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-18.10.0.tgz#8a0add9611253e0e31d3ed5b4bc941a3795a7648"
- integrity sha512-esHR5OKy38bccL/sajHqZudZCvmv4yjovMJzyXlphaUo7xykmtOdILGJ3aAm0mFHmMLmPFmDMJXf39cAjNJsrw==
+ version "18.11.4"
+ resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-18.11.4.tgz#9fb6d826244554fbf8c110b9064018d7198eec51"
+ integrity sha512-QplypCyYxqMK05JdMSm/bDWZO8VWWaBdzQ9tbF9rEV9rIEiICh+v6q+Vu/Y5hdze8JJaxfUC+PBC7vrnEkZvZg==
dependencies:
"@octokit/core" "^3.5.1"
- "@octokit/plugin-paginate-rest" "^2.16.0"
+ "@octokit/plugin-paginate-rest" "^2.16.4"
"@octokit/plugin-request-log" "^1.0.4"
- "@octokit/plugin-rest-endpoint-methods" "^5.9.0"
+ "@octokit/plugin-rest-endpoint-methods" "5.11.4"
-"@octokit/types@^6.0.3", "@octokit/types@^6.16.1", "@octokit/types@^6.28.1":
- version "6.28.1"
- resolved "https://registry.yarnpkg.com/@octokit/types/-/types-6.28.1.tgz#ab990d1fe952226055e81c7650480e6bacfb877c"
- integrity sha512-XlxDoQLFO5JnFZgKVQTYTvXRsQFfr/GwDUU108NJ9R5yFPkA2qXhTJjYuul3vE4eLXP40FA2nysOu2zd6boE+w==
+"@octokit/types@^6.0.3", "@octokit/types@^6.16.1", "@octokit/types@^6.31.2", "@octokit/types@^6.31.3":
+ version "6.31.3"
+ resolved "https://registry.yarnpkg.com/@octokit/types/-/types-6.31.3.tgz#14c2961baea853b2bf148d892256357a936343f8"
+ integrity sha512-IUG3uMpsLHrtEL6sCVXbxCgnbKcgpkS4K7gVEytLDvYYalkK3XcuMCHK1YPD8xJglSJAOAbL4MgXp47rS9G49w==
dependencies:
- "@octokit/openapi-types" "^10.2.2"
+ "@octokit/openapi-types" "^10.6.4"
"@peculiar/asn1-schema@^2.0.32", "@peculiar/asn1-schema@^2.0.38":
version "2.0.38"
@@ -1476,66 +1466,66 @@
webcrypto-core "^1.2.0"
"@sentry/browser@^6.11.0":
- version "6.12.0"
- resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-6.12.0.tgz#970cd68fa117a1e1336fdb373e3b1fa76cd63e2d"
- integrity sha512-wsJi1NLOmfwtPNYxEC50dpDcVY7sdYckzwfqz1/zHrede1mtxpqSw+7iP4bHADOJXuF+ObYYTHND0v38GSXznQ==
+ version "6.13.2"
+ resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-6.13.2.tgz#8b731ecf8c3cdd92a4b6893a26f975fd5844056d"
+ integrity sha512-bkFXK4vAp2UX/4rQY0pj2Iky55Gnwr79CtveoeeMshoLy5iDgZ8gvnLNAz7om4B9OQk1u7NzLEa4IXAmHTUyag==
dependencies:
- "@sentry/core" "6.12.0"
- "@sentry/types" "6.12.0"
- "@sentry/utils" "6.12.0"
+ "@sentry/core" "6.13.2"
+ "@sentry/types" "6.13.2"
+ "@sentry/utils" "6.13.2"
tslib "^1.9.3"
-"@sentry/core@6.12.0":
- version "6.12.0"
- resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.12.0.tgz#bc7c5f0785b6a392d9ad47bd9b1fae3f5389996c"
- integrity sha512-mU/zdjlzFHzdXDZCPZm8OeCw7c9xsbL49Mq0TrY0KJjLt4CJBkiq5SDTGfRsenBLgTedYhe5Z/J8Z+xVVq+MfQ==
+"@sentry/core@6.13.2":
+ version "6.13.2"
+ resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.13.2.tgz#2ce164f81667aa89cd116f807d772b4718434583"
+ integrity sha512-snXNNFLwlS7yYxKTX4DBXebvJK+6ikBWN6noQ1CHowvM3ReFBlrdrs0Z0SsSFEzXm2S4q7f6HHbm66GSQZ/8FQ==
dependencies:
- "@sentry/hub" "6.12.0"
- "@sentry/minimal" "6.12.0"
- "@sentry/types" "6.12.0"
- "@sentry/utils" "6.12.0"
+ "@sentry/hub" "6.13.2"
+ "@sentry/minimal" "6.13.2"
+ "@sentry/types" "6.13.2"
+ "@sentry/utils" "6.13.2"
tslib "^1.9.3"
-"@sentry/hub@6.12.0":
- version "6.12.0"
- resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.12.0.tgz#29e323ab6a95e178fb14fffb684aa0e09707197f"
- integrity sha512-yR/UQVU+ukr42bSYpeqvb989SowIXlKBanU0cqLFDmv5LPCnaQB8PGeXwJAwWhQgx44PARhmB82S6Xor8gYNxg==
+"@sentry/hub@6.13.2":
+ version "6.13.2"
+ resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.13.2.tgz#ebc66fd55c96c7686a53ffd3521b6a63f883bb79"
+ integrity sha512-sppSuJdNMiMC/vFm/dQowCBh11uTrmvks00fc190YWgxHshodJwXMdpc+pN61VSOmy2QA4MbQ5aMAgHzPzel3A==
dependencies:
- "@sentry/types" "6.12.0"
- "@sentry/utils" "6.12.0"
+ "@sentry/types" "6.13.2"
+ "@sentry/utils" "6.13.2"
tslib "^1.9.3"
-"@sentry/minimal@6.12.0":
- version "6.12.0"
- resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.12.0.tgz#cbe20e95056cedb9709d7d5b2119ef95206a9f8c"
- integrity sha512-r3C54Q1KN+xIqUvcgX9DlcoWE7ezWvFk2pSu1Ojx9De81hVqR9u5T3sdSAP2Xma+um0zr6coOtDJG4WtYlOtsw==
+"@sentry/minimal@6.13.2":
+ version "6.13.2"
+ resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.13.2.tgz#de3ecc62b9463bf56ccdbcf4c75f7ea1aeeebc11"
+ integrity sha512-6iJfEvHzzpGBHDfLxSHcGObh73XU1OSQKWjuhDOe7UQDyI4BQmTfcXAC+Fr8sm8C/tIsmpVi/XJhs8cubFdSMw==
dependencies:
- "@sentry/hub" "6.12.0"
- "@sentry/types" "6.12.0"
+ "@sentry/hub" "6.13.2"
+ "@sentry/types" "6.13.2"
tslib "^1.9.3"
"@sentry/tracing@^6.11.0":
- version "6.12.0"
- resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-6.12.0.tgz#a05c8985ee7fed7310b029b147d8f9f14f2a2e67"
- integrity sha512-u10QHNknPBzbWSUUNMkvuH53sQd5NaBo6YdNPj4p5b7sE7445Sh0PwBpRbY3ZiUUiwyxV59fx9UQ4yVnPGxZQA==
+ version "6.13.2"
+ resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-6.13.2.tgz#512389ba459f48ae75e14f1528ab062dc46e4956"
+ integrity sha512-bHJz+C/nd6biWTNcYAu91JeRilsvVgaye4POkdzWSmD0XoLWHVMrpCQobGpXe7onkp2noU3YQjhqgtBqPHtnpw==
dependencies:
- "@sentry/hub" "6.12.0"
- "@sentry/minimal" "6.12.0"
- "@sentry/types" "6.12.0"
- "@sentry/utils" "6.12.0"
+ "@sentry/hub" "6.13.2"
+ "@sentry/minimal" "6.13.2"
+ "@sentry/types" "6.13.2"
+ "@sentry/utils" "6.13.2"
tslib "^1.9.3"
-"@sentry/types@6.12.0", "@sentry/types@^6.10.0":
- version "6.12.0"
- resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.12.0.tgz#b7395688a79403c6df8d8bb8d81deb8222519853"
- integrity sha512-urtgLzE4EDMAYQHYdkgC0Ei9QvLajodK1ntg71bGn0Pm84QUpaqpPDfHRU+i6jLeteyC7kWwa5O5W1m/jrjGXA==
+"@sentry/types@6.13.2", "@sentry/types@^6.10.0":
+ version "6.13.2"
+ resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.13.2.tgz#8388d5b92ea8608936e7aae842801dc90e0184e6"
+ integrity sha512-6WjGj/VjjN8LZDtqJH5ikeB1o39rO1gYS6anBxiS3d0sXNBb3Ux0pNNDFoBxQpOhmdDHXYS57MEptX9EV82gmg==
-"@sentry/utils@6.12.0":
- version "6.12.0"
- resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.12.0.tgz#3de261e8d11bdfdc7add64a3065d43517802e975"
- integrity sha512-oRHQ7TH5TSsJqoP9Gqq25Jvn9LKexXfAh/OoKwjMhYCGKGhqpDNUIZVgl9DWsGw5A5N5xnQyLOxDfyRV5RshdA==
+"@sentry/utils@6.13.2":
+ version "6.13.2"
+ resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.13.2.tgz#fb8010e7b67cc8c084d8067d64ef25289269cda5"
+ integrity sha512-foF4PbxqPMWNbuqdXkdoOmKm3quu3PP7Q7j/0pXkri4DtCuvF/lKY92mbY0V9rHS/phCoj+3/Se5JvM2ymh2/w==
dependencies:
- "@sentry/types" "6.12.0"
+ "@sentry/types" "6.13.2"
tslib "^1.9.3"
"@sinonjs/commons@^1.7.0":
@@ -1718,9 +1708,9 @@
pretty-format "^26.0.0"
"@types/json-schema@^7.0.7", "@types/json-schema@^7.0.8":
- version "7.0.8"
- resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.8.tgz#edf1bf1dbf4e04413ca8e5b17b3b7d7d54b59818"
- integrity sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==
+ version "7.0.9"
+ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
+ integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
"@types/linkifyjs@^2.1.3":
version "2.1.4"
@@ -1730,9 +1720,9 @@
"@types/react" "*"
"@types/lodash@^4.14.168":
- version "4.14.172"
- resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.172.tgz#aad774c28e7bfd7a67de25408e03ee5a8c3d028a"
- integrity sha512-/BHF5HAx3em7/KkzVKm3LrsD6HZAXuXO1AJZQ3cRRBZj4oHZDviWPYu0aEplAqDFNHZPW6d3G7KN+ONcCCC7pw==
+ version "4.14.175"
+ resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.175.tgz#b78dfa959192b01fae0ad90e166478769b215f45"
+ integrity sha512-XmdEOrKQ8a1Y/yxQFOMbC47G/V2VDO1GvMRnl4O75M4GW/abC5tnfzadQYkqEveqRM1dEJGFFegfPNA2vvx2iw==
"@types/mdast@^3.0.0":
version "3.0.10"
@@ -1752,14 +1742,14 @@
integrity sha512-jhMOZSS0UGYTS9pqvt6q3wtT3uvOSve5piTEmTMx3zzTuBLvSIMxSIBIc3d5lajVD5h4xc41AMZD2M5orN3PxA==
"@types/node@*":
- version "16.9.1"
- resolved "https://registry.yarnpkg.com/@types/node/-/node-16.9.1.tgz#0611b37db4246c937feef529ddcc018cf8e35708"
- integrity sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==
+ version "16.10.2"
+ resolved "https://registry.yarnpkg.com/@types/node/-/node-16.10.2.tgz#5764ca9aa94470adb4e1185fe2e9f19458992b2e"
+ integrity sha512-zCclL4/rx+W5SQTzFs9wyvvyCwoK9QtBpratqz2IYJ3O8Umrn0m3nsTv0wQBk9sRGpvUe9CwPDrQFB10f1FIjQ==
"@types/node@^14.14.22":
- version "14.17.16"
- resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.16.tgz#2b9252bd4fdf0393696190cd9550901dd967c777"
- integrity sha512-WiFf2izl01P1CpeY8WqFAeKWwByMueBEkND38EcN8N68qb0aDG3oIS1P5MhAX5kUdr469qRyqsY/MjanLjsFbQ==
+ version "14.17.20"
+ resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.20.tgz#74cc80438fd0467dc4377ee5bbad89a886df3c10"
+ integrity sha512-gI5Sl30tmhXsqkNvopFydP7ASc4c2cLfGNQrVKN3X90ADFWFsPEsotm/8JHSUJQKTHbwowAHtcJPeyVhtKv0TQ==
"@types/normalize-package-data@^2.4.0":
version "2.4.1"
@@ -1782,9 +1772,9 @@
integrity sha512-ARATsLdrGPUnaBvxLhUlnltcMgn7pQG312S8ccdYlnyijabrX9RN/KN/iGj9Am96CoW8e/K9628BA7Bv4XHdrA==
"@types/prettier@^2.0.0":
- version "2.3.2"
- resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.3.2.tgz#fc8c2825e4ed2142473b4a81064e6e081463d1b3"
- integrity sha512-eI5Yrz3Qv4KPUa/nSIAi0h+qX0XyewOliug5F2QAtuRg6Kjg6jfmxe1GIwoIRhZspD1A0RP8ANrPwvEXXtRFog==
+ version "2.4.1"
+ resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.4.1.tgz#e1303048d5389563e130f5bdd89d37a99acb75eb"
+ integrity sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw==
"@types/prop-types@*":
version "15.7.4"
@@ -1823,9 +1813,9 @@
redux "^4.0.0"
"@types/react-transition-group@^4.4.0":
- version "4.4.2"
- resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.2.tgz#38890fd9db68bf1f2252b99a942998dc7877c5b3"
- integrity sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==
+ version "4.4.3"
+ resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.3.tgz#b0994da0a7023d67dbb4a8910a62112bc00d5688"
+ integrity sha512-fUx5muOWSYP8Bw2BUQ9M9RK9+W1XBK/7FLJ8PTQpnpTEkn0ccyMffyEQvan4C3h53gHdx7KE5Qrxi/LnUGQtdg==
dependencies:
"@types/react" "*"
@@ -1888,72 +1878,73 @@
integrity sha512-3NoqvZC2W5gAC5DZbTpCeJ251vGQmgcWIHQJGq2J240HY6ErQ9aWKkwfoKJlHLx+A83WPNTZ9+3cd2ILxbvr1w==
"@typescript-eslint/eslint-plugin@^4.17.0":
- version "4.31.1"
- resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.31.1.tgz#e938603a136f01dcabeece069da5fb2e331d4498"
- integrity sha512-UDqhWmd5i0TvPLmbK5xY3UZB0zEGseF+DHPghZ37Sb83Qd3p8ujhvAtkU4OF46Ka5Pm5kWvFIx0cCTBFKo0alA==
+ version "4.32.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.32.0.tgz#46d2370ae9311092f2a6f7246d28357daf2d4e89"
+ integrity sha512-+OWTuWRSbWI1KDK8iEyG/6uK2rTm3kpS38wuVifGUTDB6kjEuNrzBI1MUtxnkneuWG/23QehABe2zHHrj+4yuA==
dependencies:
- "@typescript-eslint/experimental-utils" "4.31.1"
- "@typescript-eslint/scope-manager" "4.31.1"
+ "@typescript-eslint/experimental-utils" "4.32.0"
+ "@typescript-eslint/scope-manager" "4.32.0"
debug "^4.3.1"
functional-red-black-tree "^1.0.1"
+ ignore "^5.1.8"
regexpp "^3.1.0"
semver "^7.3.5"
tsutils "^3.21.0"
-"@typescript-eslint/experimental-utils@4.31.1":
- version "4.31.1"
- resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.31.1.tgz#0c900f832f270b88e13e51753647b02d08371ce5"
- integrity sha512-NtoPsqmcSsWty0mcL5nTZXMf7Ei0Xr2MT8jWjXMVgRK0/1qeQ2jZzLFUh4QtyJ4+/lPUyMw5cSfeeME+Zrtp9Q==
+"@typescript-eslint/experimental-utils@4.32.0":
+ version "4.32.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.32.0.tgz#53a8267d16ca5a79134739129871966c56a59dc4"
+ integrity sha512-WLoXcc+cQufxRYjTWr4kFt0DyEv6hDgSaFqYhIzQZ05cF+kXfqXdUh+//kgquPJVUBbL3oQGKQxwPbLxHRqm6A==
dependencies:
"@types/json-schema" "^7.0.7"
- "@typescript-eslint/scope-manager" "4.31.1"
- "@typescript-eslint/types" "4.31.1"
- "@typescript-eslint/typescript-estree" "4.31.1"
+ "@typescript-eslint/scope-manager" "4.32.0"
+ "@typescript-eslint/types" "4.32.0"
+ "@typescript-eslint/typescript-estree" "4.32.0"
eslint-scope "^5.1.1"
eslint-utils "^3.0.0"
"@typescript-eslint/parser@^4.17.0":
- version "4.31.1"
- resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.31.1.tgz#8f9a2672033e6f6d33b1c0260eebdc0ddf539064"
- integrity sha512-dnVZDB6FhpIby6yVbHkwTKkn2ypjVIfAR9nh+kYsA/ZL0JlTsd22BiDjouotisY3Irmd3OW1qlk9EI5R8GrvRQ==
+ version "4.32.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.32.0.tgz#751ecca0e2fecd3d44484a9b3049ffc1871616e5"
+ integrity sha512-lhtYqQ2iEPV5JqV7K+uOVlPePjClj4dOw7K4/Z1F2yvjIUvyr13yJnDzkK6uon4BjHYuHy3EG0c2Z9jEhFk56w==
dependencies:
- "@typescript-eslint/scope-manager" "4.31.1"
- "@typescript-eslint/types" "4.31.1"
- "@typescript-eslint/typescript-estree" "4.31.1"
+ "@typescript-eslint/scope-manager" "4.32.0"
+ "@typescript-eslint/types" "4.32.0"
+ "@typescript-eslint/typescript-estree" "4.32.0"
debug "^4.3.1"
-"@typescript-eslint/scope-manager@4.31.1":
- version "4.31.1"
- resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.31.1.tgz#0c21e8501f608d6a25c842fcf59541ef4f1ab561"
- integrity sha512-N1Uhn6SqNtU2XpFSkD4oA+F0PfKdWHyr4bTX0xTj8NRx1314gBDRL1LUuZd5+L3oP+wo6hCbZpaa1in6SwMcVQ==
+"@typescript-eslint/scope-manager@4.32.0":
+ version "4.32.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.32.0.tgz#e03c8668f8b954072b3f944d5b799c0c9225a7d5"
+ integrity sha512-DK+fMSHdM216C0OM/KR1lHXjP1CNtVIhJ54kQxfOE6x8UGFAjha8cXgDMBEIYS2XCYjjCtvTkjQYwL3uvGOo0w==
dependencies:
- "@typescript-eslint/types" "4.31.1"
- "@typescript-eslint/visitor-keys" "4.31.1"
+ "@typescript-eslint/types" "4.32.0"
+ "@typescript-eslint/visitor-keys" "4.32.0"
-"@typescript-eslint/types@4.31.1":
- version "4.31.1"
- resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.31.1.tgz#5f255b695627a13401d2fdba5f7138bc79450d66"
- integrity sha512-kixltt51ZJGKENNW88IY5MYqTBA8FR0Md8QdGbJD2pKZ+D5IvxjTYDNtJPDxFBiXmka2aJsITdB1BtO1fsgmsQ==
+"@typescript-eslint/types@4.32.0":
+ version "4.32.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.32.0.tgz#52c633c18da47aee09449144bf59565ab36df00d"
+ integrity sha512-LE7Z7BAv0E2UvqzogssGf1x7GPpUalgG07nGCBYb1oK4mFsOiFC/VrSMKbZQzFJdN2JL5XYmsx7C7FX9p9ns0w==
-"@typescript-eslint/typescript-estree@4.31.1":
- version "4.31.1"
- resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.31.1.tgz#4a04d5232cf1031232b7124a9c0310b577a62d17"
- integrity sha512-EGHkbsUvjFrvRnusk6yFGqrqMBTue5E5ROnS5puj3laGQPasVUgwhrxfcgkdHNFECHAewpvELE1Gjv0XO3mdWg==
+"@typescript-eslint/typescript-estree@4.32.0":
+ version "4.32.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.32.0.tgz#db00ccc41ccedc8d7367ea3f50c6994b8efa9f3b"
+ integrity sha512-tRYCgJ3g1UjMw1cGG8Yn1KzOzNlQ6u1h9AmEtPhb5V5a1TmiHWcRyF/Ic+91M4f43QeChyYlVTcf3DvDTZR9vw==
dependencies:
- "@typescript-eslint/types" "4.31.1"
- "@typescript-eslint/visitor-keys" "4.31.1"
+ "@typescript-eslint/types" "4.32.0"
+ "@typescript-eslint/visitor-keys" "4.32.0"
debug "^4.3.1"
globby "^11.0.3"
is-glob "^4.0.1"
semver "^7.3.5"
tsutils "^3.21.0"
-"@typescript-eslint/visitor-keys@4.31.1":
- version "4.31.1"
- resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.31.1.tgz#f2e7a14c7f20c4ae07d7fc3c5878c4441a1da9cc"
- integrity sha512-PCncP8hEqKw6SOJY+3St4LVtoZpPPn+Zlpm7KW5xnviMhdqcsBty4Lsg4J/VECpJjw1CkROaZhH4B8M1OfnXTQ==
+"@typescript-eslint/visitor-keys@4.32.0":
+ version "4.32.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.32.0.tgz#455ba8b51242f2722a497ffae29313f33b14cb7f"
+ integrity sha512-e7NE0qz8W+atzv3Cy9qaQ7BTLwWsm084Z0c4nIO2l3Bp6u9WIgdqCgyPyV5oSPDMIW3b20H59OOCmVk3jw3Ptw==
dependencies:
- "@typescript-eslint/types" "4.31.1"
+ "@typescript-eslint/types" "4.32.0"
eslint-visitor-keys "^2.0.0"
"@wojtekmaj/enzyme-adapter-react-17@^0.6.1":
@@ -2087,7 +2078,7 @@ ansi-regex@^4.1.0:
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
-ansi-regex@^5.0.0:
+ansi-regex@^5.0.0, ansi-regex@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
@@ -2149,7 +2140,7 @@ arr-union@^3.1.0:
resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
-array-includes@^3.1.2, array-includes@^3.1.3:
+array-includes@^3.1.3:
version "3.1.3"
resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.3.tgz#c7f619b382ad2afaf5326cddfdc0afc61af7690a"
integrity sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==
@@ -2171,34 +2162,33 @@ array-unique@^0.3.2:
integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
array.prototype.filter@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/array.prototype.filter/-/array.prototype.filter-1.0.0.tgz#24d63e38983cdc6bf023a3c574b2f2a3f384c301"
- integrity sha512-TfO1gz+tLm+Bswq0FBOXPqAchtCr2Rn48T8dLJoRFl8NoEosjZmzptmuo1X8aZBzZcqsR1W8U761tjACJtngTQ==
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/array.prototype.filter/-/array.prototype.filter-1.0.1.tgz#20688792acdb97a09488eaaee9eebbf3966aae21"
+ integrity sha512-Dk3Ty7N42Odk7PjU/Ci3zT4pLj20YvuVnneG/58ICM6bt4Ij5kZaJTVQ9TSaWaIECX2sFyz4KItkVZqHNnciqw==
dependencies:
call-bind "^1.0.2"
define-properties "^1.1.3"
- es-abstract "^1.18.0"
+ es-abstract "^1.19.0"
es-array-method-boxes-properly "^1.0.0"
- is-string "^1.0.5"
+ is-string "^1.0.7"
array.prototype.flat@^1.2.3:
- version "1.2.4"
- resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz#6ef638b43312bd401b4c6199fdec7e2dc9e9a123"
- integrity sha512-4470Xi3GAPAjZqFcljX2xzckv1qeKPizoNkiS0+O4IoPR2ZNpcjE0pkhdihlDouK+x6QOast26B4Q/O9DJnwSg==
+ version "1.2.5"
+ resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.5.tgz#07e0975d84bbc7c48cd1879d609e682598d33e13"
+ integrity sha512-KaYU+S+ndVqyUnignHftkwc58o3uVU1jzczILJ1tN2YaIZpFIKBiP/x/j97E5MVPsaCloPbqWLB/8qCTVvT2qg==
dependencies:
- call-bind "^1.0.0"
+ call-bind "^1.0.2"
define-properties "^1.1.3"
- es-abstract "^1.18.0-next.1"
+ es-abstract "^1.19.0"
array.prototype.flatmap@^1.2.4:
- version "1.2.4"
- resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz#94cfd47cc1556ec0747d97f7c7738c58122004c9"
- integrity sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==
+ version "1.2.5"
+ resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz#908dc82d8a406930fdf38598d51e7411d18d4446"
+ integrity sha512-08u6rVyi1Lj7oqWbS9nUxliETrtIROT4XGTA4D/LWGten6E3ocm7cy9SIrmNHOL5XVbVuckUp3X6Xyg8/zpvHA==
dependencies:
call-bind "^1.0.0"
define-properties "^1.1.3"
- es-abstract "^1.18.0-next.1"
- function-bind "^1.1.1"
+ es-abstract "^1.19.0"
arrify@^1.0.1:
version "1.0.1"
@@ -2239,11 +2229,6 @@ astral-regex@^2.0.0:
resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
-async-each@^1.0.1:
- version "1.0.3"
- resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
- integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
-
asynckit@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -2255,13 +2240,13 @@ atob@^2.1.2:
integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
autoprefixer@^9.8.6:
- version "9.8.6"
- resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
- integrity sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==
+ version "9.8.7"
+ resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.7.tgz#e3c12de18a800af1a1a8155fbc01dc7de29ea184"
+ integrity sha512-7Hg99B1eTH5+LgmUBUSmov1Z3bsggQJS7v3IMGo6wcScnbRuvtMc871J9J+4bSbIqa9LSX/zypFXJ8sXHpMJeQ==
dependencies:
browserslist "^4.12.0"
caniuse-lite "^1.0.30001109"
- colorette "^1.2.1"
+ nanocolors "^0.2.8"
normalize-range "^0.1.2"
num2fraction "^1.2.2"
postcss "^7.0.32"
@@ -2339,12 +2324,12 @@ babel-plugin-polyfill-corejs2@^0.2.2:
semver "^6.1.1"
babel-plugin-polyfill-corejs3@^0.2.2:
- version "0.2.4"
- resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.4.tgz#68cb81316b0e8d9d721a92e0009ec6ecd4cd2ca9"
- integrity sha512-z3HnJE5TY/j4EFEa/qpQMSbcUJZ5JQi+3UFjXzn6pQCmIKc5Ug5j98SuYyH+m4xQnvKlMDIW4plLfgyVnd0IcQ==
+ version "0.2.5"
+ resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.5.tgz#2779846a16a1652244ae268b1e906ada107faf92"
+ integrity sha512-ninF5MQNwAX9Z7c9ED+H2pGt1mXdP4TqzlHKyPIYmJIYz0N+++uwdM7RnJukklhzJ54Q84vA4ZJkgs7lu5vqcw==
dependencies:
"@babel/helper-define-polyfill-provider" "^0.2.2"
- core-js-compat "^3.14.0"
+ core-js-compat "^3.16.2"
babel-plugin-polyfill-regenerator@^0.2.2:
version "0.2.2"
@@ -2436,11 +2421,6 @@ big.js@^5.2.2:
resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
-binary-extensions@^1.0.0:
- version "1.13.1"
- resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
- integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
-
binary-extensions@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -2469,7 +2449,7 @@ brace-expansion@^1.1.7:
balanced-match "^1.0.0"
concat-map "0.0.1"
-braces@^2.3.1, braces@^2.3.2:
+braces@^2.3.1:
version "2.3.2"
resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
@@ -2507,16 +2487,16 @@ browser-request@^0.3.3:
resolved "https://registry.yarnpkg.com/browser-request/-/browser-request-0.3.3.tgz#9ece5b5aca89a29932242e18bf933def9876cc17"
integrity sha1-ns5bWsqJopkyJC4Yv5M975h2zBc=
-browserslist@^4.12.0, browserslist@^4.16.6, browserslist@^4.17.0:
- version "4.17.0"
- resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.17.0.tgz#1fcd81ec75b41d6d4994fb0831b92ac18c01649c"
- integrity sha512-g2BJ2a0nEYvEFQC208q8mVAhfNwpZ5Mu8BwgtCdZKO3qx98HChmeg448fPdUzld8aFmfLgVh7yymqV+q1lJZ5g==
+browserslist@^4.12.0, browserslist@^4.16.6, browserslist@^4.17.1:
+ version "4.17.2"
+ resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.17.2.tgz#aa15dbd2fab399a399fe4df601bb09363c5458a6"
+ integrity sha512-jSDZyqJmkKMEMi7SZAgX5UltFdR5NAO43vY0AwTpu4X3sGH7GLLQ83KiUomgrnvZRCeW0yPPnKqnxPqQOER9zQ==
dependencies:
- caniuse-lite "^1.0.30001254"
- colorette "^1.3.0"
- electron-to-chromium "^1.3.830"
+ caniuse-lite "^1.0.30001261"
+ electron-to-chromium "^1.3.854"
escalade "^3.1.1"
- node-releases "^1.1.75"
+ nanocolors "^0.2.12"
+ node-releases "^1.1.76"
bs58@^4.0.1:
version "4.0.1"
@@ -2610,10 +2590,10 @@ camelcase@^6.0.0:
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
-caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001254:
- version "1.0.30001257"
- resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001257.tgz#150aaf649a48bee531104cfeda57f92ce587f6e5"
- integrity sha512-JN49KplOgHSXpIsVSF+LUyhD8PUp6xPpAXeRrrcBh4KBeP7W864jHn6RvzJgDlrReyeVjMFJL3PLpPvKIxlIHA==
+caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001261:
+ version "1.0.30001264"
+ resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001264.tgz#88f625a60efb6724c7c62ac698bc8dbd9757e55b"
+ integrity sha512-Ftfqqfcs/ePiUmyaySsQ4PUsdcYyXG2rfoBVsk3iY1ahHaJEw65vfb7Suzqm+cEkwwPIv/XWkg27iCpRavH4zA==
capture-exit@^2.0.0:
version "2.0.0"
@@ -2833,11 +2813,6 @@ color-name@^1.1.4, color-name@~1.1.4:
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-colorette@^1.2.1, colorette@^1.2.2, colorette@^1.3.0:
- version "1.4.0"
- resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
- integrity sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==
-
combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
version "1.0.8"
resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -2912,12 +2887,12 @@ copy-descriptor@^0.1.0:
resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
-core-js-compat@^3.14.0, core-js-compat@^3.16.0:
- version "3.17.3"
- resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.17.3.tgz#b39c8e4dec71ecdc735c653ce5233466e561324e"
- integrity sha512-+in61CKYs4hQERiADCJsdgewpdl/X0GhEX77pjKgbeibXviIt2oxEjTc8O2fqHX8mDdBrDvX8MYD/RYsBv4OiA==
+core-js-compat@^3.16.0, core-js-compat@^3.16.2:
+ version "3.18.1"
+ resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.18.1.tgz#01942a0877caf9c6e5007c027183cf0bdae6a191"
+ integrity sha512-XJMYx58zo4W0kLPmIingVZA10+7TuKrMLPt83+EzDmxFJQUMcTVVmQ+n5JP4r6Z14qSzhQBRi3NSWoeVyKKXUg==
dependencies:
- browserslist "^4.17.0"
+ browserslist "^4.17.1"
semver "7.0.0"
core-js@^1.0.0:
@@ -3069,9 +3044,9 @@ data-urls@^2.0.0:
whatwg-url "^8.0.0"
date-fns@^2.0.1:
- version "2.23.0"
- resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.23.0.tgz#4e886c941659af0cf7b30fafdd1eaa37e88788a9"
- integrity sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA==
+ version "2.24.0"
+ resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.24.0.tgz#7d86dc0d93c87b76b63d213b4413337cfd1c105d"
+ integrity sha512-6ujwvwgPID6zbI0o7UbURi2vlLDR9uP26+tW6Lg+Ji3w7dd0i3DOcjcClLjLPranT60SSEFBwdSyYwn/ZkPIuw==
date-names@^0.1.11:
version "0.1.13"
@@ -3301,10 +3276,10 @@ ecc-jsbn@~0.1.1:
jsbn "~0.1.0"
safer-buffer "^2.1.0"
-electron-to-chromium@^1.3.830:
- version "1.3.839"
- resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.839.tgz#27a5b21468e9fefb0e328a029403617f20acec9c"
- integrity sha512-0O7uPs9LJNjQ/U5mW78qW8gXv9H6Ba3DHZ5/yt8aBsvomOWDkV3MddT7enUYvLQEUVOURjWmgJJWVZ3K98tIwQ==
+electron-to-chromium@^1.3.854:
+ version "1.3.857"
+ resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.857.tgz#dcc239ff8a12b6e4b501e6a5ad20fd0d5a3210f9"
+ integrity sha512-a5kIr2lajm4bJ5E4D3fp8Y/BRB0Dx2VOcCRE5Gtb679mXIME/OFhWler8Gy2ksrf8gFX+EFCSIGA33FB3gqYpg==
emittery@^0.7.1:
version "0.7.2"
@@ -3415,10 +3390,10 @@ error-ex@^1.3.1:
dependencies:
is-arrayish "^0.2.1"
-es-abstract@^1.18.0, es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2, es-abstract@^1.18.2, es-abstract@^1.18.5, es-abstract@^1.18.6:
- version "1.18.6"
- resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.6.tgz#2c44e3ea7a6255039164d26559777a6d978cb456"
- integrity sha512-kAeIT4cku5eNLNuUKhlmtuk1/TRZvQoYccn6TO0cSVdf1kzB0T7+dYuVK9MWM7l+/53W2Q8M7N2c6MQvhXFcUQ==
+es-abstract@^1.18.0-next.2, es-abstract@^1.18.2, es-abstract@^1.18.5, es-abstract@^1.19.0, es-abstract@^1.19.1:
+ version "1.19.1"
+ resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.19.1.tgz#d4885796876916959de78edaa0df456627115ec3"
+ integrity sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==
dependencies:
call-bind "^1.0.2"
es-to-primitive "^1.2.1"
@@ -3431,7 +3406,9 @@ es-abstract@^1.18.0, es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2, es-
is-callable "^1.2.4"
is-negative-zero "^2.0.1"
is-regex "^1.1.4"
+ is-shared-array-buffer "^1.0.1"
is-string "^1.0.7"
+ is-weakref "^1.0.1"
object-inspect "^1.11.0"
object-keys "^1.1.1"
object.assign "^4.1.2"
@@ -3555,22 +3532,23 @@ eslint-plugin-react-hooks@^4.2.0:
integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==
eslint-plugin-react@^7.22.0:
- version "7.25.1"
- resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.25.1.tgz#9286b7cd9bf917d40309760f403e53016eda8331"
- integrity sha512-P4j9K1dHoFXxDNP05AtixcJEvIT6ht8FhYKsrkY0MPCPaUMYijhpWwNiRDZVtA8KFuZOkGSeft6QwH8KuVpJug==
+ version "7.26.1"
+ resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.26.1.tgz#41bcfe3e39e6a5ac040971c1af94437c80daa40e"
+ integrity sha512-Lug0+NOFXeOE+ORZ5pbsh6mSKjBKXDXItUD2sQoT+5Yl0eoT82DqnXeTMfUare4QVCn9QwXbfzO/dBLjLXwVjQ==
dependencies:
array-includes "^3.1.3"
array.prototype.flatmap "^1.2.4"
doctrine "^2.1.0"
estraverse "^5.2.0"
- has "^1.0.3"
jsx-ast-utils "^2.4.1 || ^3.0.0"
minimatch "^3.0.4"
object.entries "^1.1.4"
object.fromentries "^2.0.4"
+ object.hasown "^1.0.0"
object.values "^1.1.4"
prop-types "^15.7.2"
resolve "^2.0.0-next.3"
+ semver "^6.3.0"
string.prototype.matchall "^4.0.5"
eslint-rule-composer@^0.3.0:
@@ -3800,9 +3778,9 @@ expect@^26.6.2:
jest-regex-util "^26.0.0"
ext@^1.1.2:
- version "1.5.0"
- resolved "https://registry.yarnpkg.com/ext/-/ext-1.5.0.tgz#e93b97ae0cb23f8370380f6107d2d2b7887687ad"
- integrity sha512-+ONcYoWj/SoQwUofMr94aGu05Ou4FepKi7N7b+O8T4jVfyIsZQV1/xeS8jpaBzF0csAk0KLXoHCxU7cKYZjo1Q==
+ version "1.6.0"
+ resolved "https://registry.yarnpkg.com/ext/-/ext-1.6.0.tgz#3871d50641e874cc172e2b53f919842d19db4c52"
+ integrity sha512-sdBImtzkq2HpkdRLtlLWDa6w4DX22ijZLKx8BMPUuKe1c5lbN6xwQDQCxSfxBQnHZ13ls/FH0MQZx/q/gr6FQg==
dependencies:
type "^2.5.0"
@@ -4092,13 +4070,13 @@ function-bind@^1.1.1:
integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
function.prototype.name@^1.1.0, function.prototype.name@^1.1.2, function.prototype.name@^1.1.4:
- version "1.1.4"
- resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.4.tgz#e4ea839b9d3672ae99d0efd9f38d9191c5eaac83"
- integrity sha512-iqy1pIotY/RmhdFZygSSlW0wko2yxkSCKqsuv4pr8QESohpYyG/Z7B/XXvPRKTJS//960rgguE5mSRUsDdaJrQ==
+ version "1.1.5"
+ resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
+ integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
dependencies:
call-bind "^1.0.2"
define-properties "^1.1.3"
- es-abstract "^1.18.0-next.2"
+ es-abstract "^1.19.0"
functions-have-names "^1.2.2"
functional-red-black-tree@^1.0.1:
@@ -4192,9 +4170,9 @@ glob-to-regexp@^0.4.1:
integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
- version "7.1.7"
- resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
- integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+ version "7.2.0"
+ resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
+ integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
dependencies:
fs.realpath "^1.0.0"
inflight "^1.0.4"
@@ -4255,7 +4233,7 @@ gonzales-pe@^4.3.0:
dependencies:
minimist "^1.2.5"
-graceful-fs@^4.1.11, graceful-fs@^4.2.4:
+graceful-fs@^4.2.4:
version "4.2.8"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
@@ -4508,9 +4486,9 @@ import-lazy@^4.0.0:
integrity sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==
import-local@^3.0.2:
- version "3.0.2"
- resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.0.2.tgz#a8cfd0431d1de4a2199703d003e3e62364fa6db6"
- integrity sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.0.3.tgz#4d51c2c495ca9393da259ec66b62e022920211e0"
+ integrity sha512-bE9iaUY3CXH8Cwfan/abDKAxe1KGT9kyGsBPqf6DMK/z0a2OzAsrukeYNgIH6cH5Xr452jb1TUL8rSfCLjZ9uA==
dependencies:
pkg-dir "^4.2.0"
resolve-cwd "^3.0.0"
@@ -4621,13 +4599,6 @@ is-bigint@^1.0.1, is-bigint@^1.0.3:
dependencies:
has-bigints "^1.0.1"
-is-binary-path@^1.0.0:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
- integrity sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=
- dependencies:
- binary-extensions "^1.0.0"
-
is-binary-path@~2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -4666,9 +4637,9 @@ is-ci@^2.0.0:
ci-info "^2.0.0"
is-core-module@^2.2.0, is-core-module@^2.5.0:
- version "2.6.0"
- resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.6.0.tgz#d7553b2526fe59b92ba3e40c8df757ec8a709e19"
- integrity sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==
+ version "2.7.0"
+ resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.7.0.tgz#3c0ef7d31b4acfc574f80c58409d568a836848e3"
+ integrity sha512-ByY+tjCciCr+9nLryBYcSD50EOGWt95c7tIsKTG1J2ixKKXPvF7Ej3AVd+UfDydAJom3biBGDBALaO79ktwgEQ==
dependencies:
has "^1.0.3"
@@ -4793,9 +4764,9 @@ is-generator-function@^1.0.10:
has-tostringtag "^1.0.0"
is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
- integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
+ version "4.0.3"
+ resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+ integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
dependencies:
is-extglob "^2.1.1"
@@ -4890,6 +4861,11 @@ is-set@^2.0.1, is-set@^2.0.2:
resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
+is-shared-array-buffer@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz#97b0c85fbdacb59c9c446fe653b82cf2b5b7cfe6"
+ integrity sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==
+
is-stream@^1.0.1, is-stream@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -5010,9 +4986,9 @@ isstream@~0.1.2:
integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
istanbul-lib-coverage@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
- integrity sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.1.tgz#e8900b3ed6069759229cf30f7067388d148aeb5e"
+ integrity sha512-GvCYYTxaCPqwMjobtVcVKvSHtAGe48MNhGjpK8LtVF8K0ISX7hCKl85LgtuaSneWVyQmaGcW3iXVV3GaZSLpmQ==
istanbul-lib-instrument@^4.0.0, istanbul-lib-instrument@^4.0.3:
version "4.0.3"
@@ -5607,17 +5583,17 @@ jsprim@^1.2.2:
verror "1.10.0"
"jsx-ast-utils@^2.4.1 || ^3.0.0":
- version "3.2.0"
- resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz#41108d2cec408c3453c1bbe8a4aae9e1e2bd8f82"
- integrity sha512-EIsmt3O3ljsU6sot/J4E1zDRxfBNrhjyf/OKjlydwgEimQuznlM4Wv7U+ueONJMyEn1WRE0K8dhi3dVAXYT24Q==
+ version "3.2.1"
+ resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz#720b97bfe7d901b927d87c3773637ae8ea48781b"
+ integrity sha512-uP5vu8xfy2F9A6LGC22KO7e2/vGTS1MhP+18f++ZNlf0Ohaxbc9nIEwHAsejlJKyzfZzU5UIhe5ItYkitcZnZA==
dependencies:
- array-includes "^3.1.2"
+ array-includes "^3.1.3"
object.assign "^4.1.2"
jszip@^3.7.0:
- version "3.7.0"
- resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.7.0.tgz#9b8b995a4e7c9024653ce743e902076a82fdf4e6"
- integrity sha512-Y2OlFIzrDOPWUnpU0LORIcDn2xN7rC9yKffFM/7pGhQuhO+SUhfm2trkJ/S5amjFvem0Y+1EALz/MEPkvHXVNw==
+ version "3.7.1"
+ resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.7.1.tgz#bd63401221c15625a1228c556ca8a68da6fda3d9"
+ integrity sha512-ghL0tz1XG9ZEmRMcEN2vt7xabrDdqHHeykgARpmZ0BiIctWxM47Vt63ZO2dnp4QYt/xJVLLy5Zv1l/xRdh2byg==
dependencies:
lie "~3.3.0"
pako "~1.0.2"
@@ -5846,9 +5822,9 @@ map-obj@^1.0.0:
integrity sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=
map-obj@^4.0.0:
- version "4.2.1"
- resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.2.1.tgz#e4ea399dbc979ae735c83c863dd31bdf364277b7"
- integrity sha512-+WA2/1sPmDj1dlvvJmB5G6JKfY9dpn7EVBUL06+y6PoljPkh+6V1QihwxNkbcGxCRjt2b0F9K0taiCuo7MbdFQ==
+ version "4.3.0"
+ resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
+ integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
map-visit@^1.0.0:
version "1.0.0"
@@ -5864,7 +5840,7 @@ mathml-tag-names@^2.1.3:
"matrix-js-sdk@github:matrix-org/matrix-js-sdk#develop":
version "13.0.0"
- resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/2515d07c8fc3bf5e1afc8352e3e330cca30dde85"
+ resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/a7a08fd760e6e99c4cc631fca42e6f06af9d594e"
dependencies:
"@babel/runtime" "^7.12.5"
another-json "^0.2.0"
@@ -5994,7 +5970,7 @@ micromark@~2.11.0:
debug "^4.0.0"
parse-entities "^2.0.0"
-micromatch@^3.1.10, micromatch@^3.1.4:
+micromatch@^3.1.4:
version "3.1.10"
resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
@@ -6021,17 +5997,17 @@ micromatch@^4.0.2, micromatch@^4.0.4:
braces "^3.0.1"
picomatch "^2.2.3"
-mime-db@1.49.0:
- version "1.49.0"
- resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.49.0.tgz#f3dfde60c99e9cf3bc9701d687778f537001cbed"
- integrity sha512-CIc8j9URtOVApSFCQIF+VBkX1RwXp/oMMOrqdyXSBXq5RWNEsRfyj1kiRnQgmNXmHxPoFIxOroKA3zcU9P+nAA==
+mime-db@1.50.0:
+ version "1.50.0"
+ resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.50.0.tgz#abd4ac94e98d3c0e185016c67ab45d5fde40c11f"
+ integrity sha512-9tMZCDlYHqeERXEHO9f/hKfNXhre5dK2eE/krIvUjZbS2KPcqGDfNShIWS1uW9XOTKQKqK6qbeOci18rbfW77A==
mime-types@^2.1.12, mime-types@~2.1.19:
- version "2.1.32"
- resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.32.tgz#1d00e89e7de7fe02008db61001d9e02852670fd5"
- integrity sha512-hJGaVS4G4c9TSMYh2n6SQAGrC4RnfU+daP8G7cSCmaqNjiOoUY0VHCMS42pxnQmVF1GWwFhbHWn3RIxCqTmZ9A==
+ version "2.1.33"
+ resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.33.tgz#1fa12a904472fafd068e48d9e8401f74d3f70edb"
+ integrity sha512-plLElXp7pRDd0bNZHw+nMd52vRYjLwQjygaNg7ddJ2uJtTlmnTCjWuPKxVu6//AdaRuME84SvLW91sIkBqGT0g==
dependencies:
- mime-db "1.49.0"
+ mime-db "1.50.0"
mimic-fn@^2.1.0:
version "2.1.0"
@@ -6094,10 +6070,15 @@ ms@2.1.2:
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
-nanoid@^3.1.23:
- version "3.1.25"
- resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.25.tgz#09ca32747c0e543f0e1814b7d3793477f9c8e152"
- integrity sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==
+nanocolors@^0.2.12, nanocolors@^0.2.2, nanocolors@^0.2.8:
+ version "0.2.12"
+ resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.2.12.tgz#4d05932e70116078673ea4cc6699a1c56cc77777"
+ integrity sha512-SFNdALvzW+rVlzqexid6epYdt8H9Zol7xDoQarioEFcFN0JHo4CYNztAxmtfgGTVRCmFlEOqqhBpoFGKqSAMug==
+
+nanoid@^3.1.25:
+ version "3.1.28"
+ resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.28.tgz#3c01bac14cb6c5680569014cc65a2f26424c6bd4"
+ integrity sha512-gSu9VZ2HtmoKYe/lmyPFES5nknFrHa+/DT9muUFWFMi6Jh9E1I7bkvlQ8xxf1Kos9pi9o8lBnIOkatMhKX/YUw==
nanomatch@^1.2.9:
version "1.2.13"
@@ -6160,9 +6141,11 @@ node-fetch@^1.0.1:
is-stream "^1.0.1"
node-fetch@^2.6.1:
- version "2.6.2"
- resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.2.tgz#986996818b73785e47b1965cc34eb093a1d464d0"
- integrity sha512-aLoxToI6RfZ+0NOjmWAgn9+LEd30YCkJKFSyWacNZdEKTit/ZMcKjGkTRo8uWEsnIb/hfKecNPEbln02PdWbcA==
+ version "2.6.5"
+ resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.5.tgz#42735537d7f080a7e5f78b6c549b7146be1742fd"
+ integrity sha512-mmlIVHJEu5rnIxgEgez6b9GgWXbkZj5YZ7fx+2r94a2E+Uirsp6HsPTPlomfdHtpt/B0cdKviwkoaM6pyvUOpQ==
+ dependencies:
+ whatwg-url "^5.0.0"
node-int64@^0.4.0:
version "0.4.0"
@@ -6186,10 +6169,10 @@ node-notifier@^8.0.0:
uuid "^8.3.0"
which "^2.0.2"
-node-releases@^1.1.75:
- version "1.1.75"
- resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.75.tgz#6dd8c876b9897a1b8e5a02de26afa79bb54ebbfe"
- integrity sha512-Qe5OUajvqrqDSy6wrWFmMwfJ0jVgwiw4T3KqmbTcZ62qW0gQkheXYhcFM1+lOVcGUoRxcEcfyvFMAnDgaF1VWw==
+node-releases@^1.1.76:
+ version "1.1.77"
+ resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.77.tgz#50b0cfede855dd374e7585bf228ff34e57c1c32e"
+ integrity sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ==
normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
version "2.5.0"
@@ -6319,33 +6302,40 @@ object.assign@^4.1.0, object.assign@^4.1.2:
object-keys "^1.1.1"
object.entries@^1.1.1, object.entries@^1.1.4:
- version "1.1.4"
- resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.4.tgz#43ccf9a50bc5fd5b649d45ab1a579f24e088cafd"
- integrity sha512-h4LWKWE+wKQGhtMjZEBud7uLGhqyLwj8fpHOarZhD2uY3C9cRtk57VQ89ke3moByLXMedqs3XCHzyb4AmA2DjA==
+ version "1.1.5"
+ resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.5.tgz#e1acdd17c4de2cd96d5a08487cfb9db84d881861"
+ integrity sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==
dependencies:
call-bind "^1.0.2"
define-properties "^1.1.3"
- es-abstract "^1.18.2"
+ es-abstract "^1.19.1"
object.fromentries@^2.0.0, object.fromentries@^2.0.4:
- version "2.0.4"
- resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.4.tgz#26e1ba5c4571c5c6f0890cef4473066456a120b8"
- integrity sha512-EsFBshs5RUUpQEY1D4q/m59kMfz4YJvxuNCJcv/jWwOJr34EaVnG11ZrZa0UHB3wnzV1wx8m58T4hQL8IuNXlQ==
+ version "2.0.5"
+ resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.5.tgz#7b37b205109c21e741e605727fe8b0ad5fa08251"
+ integrity sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==
dependencies:
call-bind "^1.0.2"
define-properties "^1.1.3"
- es-abstract "^1.18.0-next.2"
- has "^1.0.3"
+ es-abstract "^1.19.1"
object.getprototypeof@^1.0.1:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/object.getprototypeof/-/object.getprototypeof-1.0.2.tgz#a993d88ca63d68f9c328186dd17d76d4188b3624"
- integrity sha512-7KoF7BcUJi6YZ+7g9XqbaJzxsmp4jSjUw8TkOSdN/GF9ZAhDM/ssERDddC+WR556niTKtCk9HtwwsbnaEeWNlg==
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/object.getprototypeof/-/object.getprototypeof-1.0.3.tgz#92e0c2320ffd3990f3378c9c3489929af31a190f"
+ integrity sha512-EP3J0rXZA4OuvSl98wYa0hY5zHUJo2kGrp2eYDro0yCe3yrKm7xtXDgbpT+YPK2RzdtdvJtm0IfaAyXeehQR0w==
dependencies:
call-bind "^1.0.2"
define-properties "^1.1.3"
- es-abstract "^1.18.6"
- reflect.getprototypeof "^1.0.0"
+ es-abstract "^1.19.1"
+ reflect.getprototypeof "^1.0.2"
+
+object.hasown@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.0.tgz#7232ed266f34d197d15cac5880232f7a4790afe5"
+ integrity sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==
+ dependencies:
+ define-properties "^1.1.3"
+ es-abstract "^1.19.1"
object.pick@^1.3.0:
version "1.3.0"
@@ -6355,13 +6345,13 @@ object.pick@^1.3.0:
isobject "^3.0.1"
object.values@^1.1.0, object.values@^1.1.1, object.values@^1.1.4:
- version "1.1.4"
- resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.4.tgz#0d273762833e816b693a637d30073e7051535b30"
- integrity sha512-TnGo7j4XSnKQoK3MfvkzqKCi0nVe/D9I9IjwTNYdb/fxYHpjrluHVOgw0AF6jrRFGMPHdfuidR09tIDiIvnaSg==
+ version "1.1.5"
+ resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.5.tgz#959f63e3ce9ef108720333082131e4a459b716ac"
+ integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
dependencies:
call-bind "^1.0.2"
define-properties "^1.1.3"
- es-abstract "^1.18.2"
+ es-abstract "^1.19.1"
once@^1.3.0, once@^1.3.1, once@^1.4.0:
version "1.4.0"
@@ -6682,21 +6672,20 @@ postcss-value-parser@^4.1.0:
integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.6:
- version "7.0.36"
- resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb"
- integrity sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==
+ version "7.0.38"
+ resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.38.tgz#5365a9c5126643d977046ad239f60eadda2491d6"
+ integrity sha512-wNrSHWjHDQJR/IZL5IKGxRtFgrYNaAA/UrkW2WqbtZO6uxSLMxMN+s2iqUMwnAWm3fMROlDYZB41dr0Mt7vBwQ==
dependencies:
- chalk "^2.4.2"
+ nanocolors "^0.2.2"
source-map "^0.6.1"
- supports-color "^6.1.0"
postcss@^8.0.2:
- version "8.3.6"
- resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.6.tgz#2730dd76a97969f37f53b9a6096197be311cc4ea"
- integrity sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==
+ version "8.3.8"
+ resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.8.tgz#9ebe2a127396b4b4570ae9f7770e7fb83db2bac1"
+ integrity sha512-GT5bTjjZnwDifajzczOC+r3FI3Cu+PgPvrsjhQdRqa2kTJ4968/X9CUce9xttIB0xOs5c6xf0TCWZo/y9lF6bA==
dependencies:
- colorette "^1.2.2"
- nanoid "^3.1.23"
+ nanocolors "^0.2.2"
+ nanoid "^3.1.25"
source-map-js "^0.6.2"
posthog-js@1.12.2:
@@ -6789,11 +6778,11 @@ punycode@^2.1.0, punycode@^2.1.1:
integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
pvtsutils@^1.1.6, pvtsutils@^1.2.0:
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/pvtsutils/-/pvtsutils-1.2.0.tgz#619e4767093d23cd600482600c16f4c36d3025bb"
- integrity sha512-IDefMJEQl7HX0FP2hIKJFnAR11klP1js2ixCrOaMhe3kXFK6RQ2ABUCuwWaaD4ib0hSbh2fGTICvWJJhDfNecA==
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/pvtsutils/-/pvtsutils-1.2.1.tgz#8212e846ca9afb21e40cebb0691755649f9f498a"
+ integrity sha512-Q867jEr30lBR2YSFFLZ0/XsEvpweqH6Kj096wmlRAFXrdRGPCNq2iz9B5Tk085EZ+OBZyYAVA5UhPkjSHGrUzQ==
dependencies:
- tslib "^2.2.0"
+ tslib "^2.3.1"
pvutils@latest:
version "1.0.17"
@@ -7012,7 +7001,16 @@ read-pkg@^5.2.0:
parse-json "^5.0.0"
type-fest "^0.6.0"
-readable-stream@^2.0.2, readable-stream@~2.3.6:
+readable-stream@^3.1.1:
+ version "3.6.0"
+ resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
+ integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
+ dependencies:
+ inherits "^2.0.3"
+ string_decoder "^1.1.1"
+ util-deprecate "^1.0.1"
+
+readable-stream@~2.3.6:
version "2.3.7"
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -7025,24 +7023,6 @@ readable-stream@^2.0.2, readable-stream@~2.3.6:
string_decoder "~1.1.1"
util-deprecate "~1.0.1"
-readable-stream@^3.1.1:
- version "3.6.0"
- resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
- integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
- dependencies:
- inherits "^2.0.3"
- string_decoder "^1.1.1"
- util-deprecate "^1.0.1"
-
-readdirp@^2.2.1:
- version "2.2.1"
- resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
- integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
- dependencies:
- graceful-fs "^4.1.11"
- micromatch "^3.1.10"
- readable-stream "^2.0.2"
-
readdirp@~3.6.0:
version "3.6.0"
resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -7065,14 +7045,14 @@ redux@^4.0.0, redux@^4.0.4:
dependencies:
"@babel/runtime" "^7.9.2"
-reflect.getprototypeof@^1.0.0:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.1.tgz#f113f15e19d103d60b8d52ce7e0d45867efdddfc"
- integrity sha512-z0FhUSaxXxnFQi+YyGfAvUJjCGPPwe0AO51LU/HtRLj/+a4LROrmSD6eYA3zr6aAK6GSbl8BCh/m5SAqUdAgTg==
+reflect.getprototypeof@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.2.tgz#dd231808828913fd2198e151eb3e213d9dddf708"
+ integrity sha512-C1+ANgX50UkWlntmOJ8SD1VTuk28+7X1ackBdfXzLQG5+bmriEMHvBaor9YlotCfBHo277q/YWd/JKEOzr5Dxg==
dependencies:
call-bind "^1.0.2"
define-properties "^1.1.3"
- es-abstract "^1.18.6"
+ es-abstract "^1.19.1"
get-intrinsic "^1.1.1"
which-builtin-type "^1.1.1"
@@ -7493,9 +7473,9 @@ side-channel@^1.0.4:
object-inspect "^1.9.0"
signal-exit@^3.0.0, signal-exit@^3.0.2:
- version "3.0.3"
- resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
- integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
+ version "3.0.5"
+ resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.5.tgz#9e3e8cc0c75a99472b44321033a7702e7738252f"
+ integrity sha512-KWcOiKeQj6ZyXx7zq4YxSMgHRlod4czeBQZrPb8OKcohcqAXShm7E20kEMle9WBt26hFcAf0qLOcp5zmY7kOqQ==
sisteransi@^1.0.5:
version "1.0.5"
@@ -7567,7 +7547,7 @@ source-map-resolve@^0.5.0:
source-map-url "^0.4.0"
urix "^0.1.0"
-source-map-support@^0.5.16, source-map-support@^0.5.20, source-map-support@^0.5.6:
+source-map-support@^0.5.16, source-map-support@^0.5.6:
version "0.5.20"
resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.20.tgz#12166089f8f5e5e8c56926b377633392dd2cb6c9"
integrity sha512-n1lZZ8Ve4ksRqizaBQgxXDgKwttHDhyfQjA6YZZn8+AroHbsIz+JjwxQDxbp+7y5OYCI8t1Yk7etjD9CRd2hIw==
@@ -7671,12 +7651,11 @@ stack-utils@^1.0.1:
escape-string-regexp "^2.0.0"
stack-utils@^2.0.2:
- version "2.0.4"
- resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.4.tgz#bf967ae2813d3d2d1e1f59a4408676495c8112ab"
- integrity sha512-ERg+H//lSSYlZhBIUu+wJnqg30AbyBbpZlIhcshpn7BNzpoRODZgfyr9J+8ERf3ooC6af3u7Lcl01nleau7MrA==
+ version "2.0.5"
+ resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.5.tgz#d25265fca995154659dbbfba3b49254778d2fdd5"
+ integrity sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==
dependencies:
escape-string-regexp "^2.0.0"
- source-map-support "^0.5.20"
static-extend@^0.1.1:
version "0.1.2"
@@ -7703,14 +7682,14 @@ string-width@^3.0.0, string-width@^3.1.0:
is-fullwidth-code-point "^2.0.0"
strip-ansi "^5.1.0"
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2:
- version "4.2.2"
- resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"
- integrity sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+ version "4.2.3"
+ resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+ integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
dependencies:
emoji-regex "^8.0.0"
is-fullwidth-code-point "^3.0.0"
- strip-ansi "^6.0.0"
+ strip-ansi "^6.0.1"
string.prototype.matchall@^4.0.5:
version "4.0.5"
@@ -7732,13 +7711,13 @@ string.prototype.repeat@^0.2.0:
integrity sha1-q6Nt4I3O5qWjN9SbLqHaGyj8Ds8=
string.prototype.trim@^1.2.1:
- version "1.2.4"
- resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.4.tgz#6014689baf5efaf106ad031a5fa45157666ed1bd"
- integrity sha512-hWCk/iqf7lp0/AgTF7/ddO1IWtSNPASjlzCicV5irAVdE1grjsneK26YG6xACMBEdCvO8fUST0UzDMh/2Qy+9Q==
+ version "1.2.5"
+ resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.5.tgz#a587bcc8bfad8cb9829a577f5de30dd170c1682c"
+ integrity sha512-Lnh17webJVsD6ECeovpVN17RlAKjmz4rF9S+8Y45CkMc/ufVpTkU3vZIyIC7sllQ1FCvObZnnCdNs/HXTUOTlg==
dependencies:
call-bind "^1.0.2"
define-properties "^1.1.3"
- es-abstract "^1.18.0-next.2"
+ es-abstract "^1.19.1"
string.prototype.trimend@^1.0.4:
version "1.0.4"
@@ -7777,12 +7756,12 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
dependencies:
ansi-regex "^4.1.0"
-strip-ansi@^6.0.0:
- version "6.0.0"
- resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
- integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+ version "6.0.1"
+ resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+ integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
dependencies:
- ansi-regex "^5.0.0"
+ ansi-regex "^5.0.1"
strip-bom@^4.0.0:
version "4.0.0"
@@ -7940,16 +7919,16 @@ symbol-tree@^3.2.4:
integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
table@^6.0.4, table@^6.6.0:
- version "6.7.1"
- resolved "https://registry.yarnpkg.com/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2"
- integrity sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==
+ version "6.7.2"
+ resolved "https://registry.yarnpkg.com/table/-/table-6.7.2.tgz#a8d39b9f5966693ca8b0feba270a78722cbaf3b0"
+ integrity sha512-UFZK67uvyNivLeQbVtkiUs8Uuuxv24aSL4/Vil2PJVtMgU8Lx0CYkP12uCGa3kjyQzOSgV1+z9Wkb82fCGsO0g==
dependencies:
ajv "^8.0.1"
lodash.clonedeep "^4.5.0"
lodash.truncate "^4.4.2"
slice-ansi "^4.0.0"
- string-width "^4.2.0"
- strip-ansi "^6.0.0"
+ string-width "^4.2.3"
+ strip-ansi "^6.0.1"
tar-js@^0.3.0:
version "0.3.0"
@@ -8067,6 +8046,11 @@ tr46@^2.1.0:
dependencies:
punycode "^2.1.1"
+tr46@~0.0.3:
+ version "0.0.3"
+ resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+ integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=
+
tree-kill@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
@@ -8279,11 +8263,6 @@ unset-value@^1.0.0:
has-value "^0.3.1"
isobject "^3.0.0"
-upath@^1.1.1:
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
- integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
-
uri-js@^4.2.2:
version "4.4.1"
resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@@ -8406,9 +8385,9 @@ w3c-xmlserializer@^2.0.0:
xml-name-validator "^3.0.0"
walk@^2.3.14:
- version "2.3.14"
- resolved "https://registry.yarnpkg.com/walk/-/walk-2.3.14.tgz#60ec8631cfd23276ae1e7363ce11d626452e1ef3"
- integrity sha512-5skcWAUmySj6hkBdH6B6+3ddMjVQYH5Qy9QGbPmN8kVmLteXk+yVXg+yfk1nbX30EYakahLrr8iPcCxJQSCBeg==
+ version "2.3.15"
+ resolved "https://registry.yarnpkg.com/walk/-/walk-2.3.15.tgz#1b4611e959d656426bc521e2da5db3acecae2424"
+ integrity sha512-4eRTBZljBfIISK1Vnt69Gvr2w/wc3U6Vtrw7qiN5iqYJPH7LElcYh/iU4XWhdCy2dZqv1ToMyYlybDylfG/5Vg==
dependencies:
foreachasync "^3.0.0"
@@ -8430,6 +8409,11 @@ webcrypto-core@^1.2.0:
pvtsutils "^1.2.0"
tslib "^2.3.1"
+webidl-conversions@^3.0.0:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+ integrity sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=
+
webidl-conversions@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
@@ -8467,6 +8451,14 @@ whatwg-mimetype@^2.3.0:
resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
+whatwg-url@^5.0.0:
+ version "5.0.0"
+ resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+ integrity sha1-lmRU6HZUYuN2RNNib2dCzotwll0=
+ dependencies:
+ tr46 "~0.0.3"
+ webidl-conversions "^3.0.0"
+
whatwg-url@^8.0.0, whatwg-url@^8.5.0:
version "8.7.0"
resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.7.0.tgz#656a78e510ff8f3937bc0bcbe9f5c0ac35941b77"
@@ -8683,9 +8675,9 @@ yargs@^15.4.1:
yargs-parser "^18.1.2"
yargs@^17.0.1:
- version "17.1.1"
- resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.1.1.tgz#c2a8091564bdb196f7c0a67c1d12e5b85b8067ba"
- integrity sha512-c2k48R0PwKIqKhPMWjeiF6y2xY/gPMUlro0sgxqXpbOIohWiLNXWslsootttv7E1e73QPAMQSg5FeySbVcpsPQ==
+ version "17.2.1"
+ resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.2.1.tgz#e2c95b9796a0e1f7f3bf4427863b42e0418191ea"
+ integrity sha512-XfR8du6ua4K6uLGm5S6fA+FIJom/MdJcFNVY8geLlp2v8GYbOXD4EB1tPNZsRn4vBzKGMgb5DRZMeWuFc2GO8Q==
dependencies:
cliui "^7.0.2"
escalade "^3.1.1"