update hydrogen

hydrogen-465980817.css

@@ -0,0 +1,469 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+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.
+*/
+/** from https://gist.github.com/mfornos/9991865 */
+@font-face {
+  font-family: 'emoji';
+  src: local('Apple Color Emoji'),
+       local('Segoe UI Emoji'),
+       local('Segoe UI Symbol'),
+       local('Noto Color Emoji'),
+       local('Android Emoji'),
+       local('EmojiSymbols'),
+       local('Symbola');
+
+  /* Emoji unicode blocks */
+  unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF;
+}
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+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.
+*/
+html {
+    height: 100%;
+}
+@media screen and (min-width: 600px) {
+    .PreSessionScreen {
+        width: 600px;
+        box-sizing: border-box;
+        margin: 0 auto;
+        margin-top: 50px;
+    }
+}
+.SessionView {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+.SessionView > .main {
+    flex: 1 1;
+    display: flex;
+    min-height: 0;
+    min-width: 0;
+    width: 100vw;
+}
+/* mobile layout */
+@media screen and (max-width: 800px) {
+    .RoomHeader button.back { display: block; }
+    div.RoomView, div.RoomPlaceholderView { display: none; }
+    div.LeftPanel {flex-grow: 1;}
+    div.room-shown div.RoomView { display: flex; }
+    div.room-shown div.LeftPanel { display: none; }
+    div.right-shown div.TimelinePanel { display: none; }
+}
+.LeftPanel {
+    flex: 0 0 300px;
+    min-width: 0;
+}
+.RoomPlaceholderView, .RoomView {
+    flex: 1 0;
+    min-width: 0;
+}
+.RoomView {
+    min-width: 0;
+    display: flex;
+}
+.TimelinePanel {
+    flex: 3 1;
+    min-height: 0;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+.TimelinePanel ul {
+    flex: 1 0;
+}
+.RoomHeader {
+    display: flex;
+}
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+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.
+*/
+/** contains styles for everything before the session view, like the session picker, login, load view, ... */
+.SessionPickerView {
+    padding: 0.4em;
+}
+.SessionPickerView ul {
+    list-style: none;
+    padding: 0;
+}
+.SessionPickerView li {
+    margin: 0.4em 0;
+}
+.SessionPickerView .session-info {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.SessionPickerView li .user-id {
+    flex: 1 1;
+}
+.SessionPickerView li .error {
+    margin: 0 20px;
+}
+.LoginView {
+    padding: 0.4em;
+}
+.SessionLoadView {
+    display: flex;
+}
+.SessionLoadView p {
+    flex: 1 1;
+    margin: 0 0 0 10px;
+}
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+
+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.
+*/
+.LeftPanel {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+.LeftPanel ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+.LeftPanel li {
+    display: flex;
+    align-items: center;
+}
+.LeftPanel div.description {
+    margin: 0;
+    flex: 1 1;
+    min-width: 0;
+}
+.LeftPanel .description > * {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+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.
+*/
+.RoomPlaceholderView {
+    display: flex;
+    flex-direction: row;
+}
+.RoomHeader {
+    align-items: center;
+}
+.RoomHeader > *:last-child {
+    margin-right: 0;
+}
+.RoomHeader > * {
+    margin-right: 10px;
+    flex: 0 0 auto;
+}
+.RoomHeader button {
+    display: block;
+}
+.RoomHeader .back {
+    display: none;
+}
+.RoomHeader .room-description {
+    flex: 1 1;
+    min-width: 0;
+}
+.RoomHeader .topic {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.RoomHeader .description {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+.RoomHeader h2 {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin: 0;
+}
+.MessageComposer {
+    display: flex;
+}
+.MessageComposer > input {
+    display: block;
+    flex: 1 1;
+    box-sizing: border-box;
+}
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+
+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.
+*/
+.TimelinePanel ul {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+.TimelinePanel li {
+}
+.message-container {
+    flex: 0 1 auto;
+    /* first try break-all, then break-word, which isn't supported everywhere */
+    word-break: break-all;  
+    word-break: break-word;
+}
+.message-container .sender {
+    margin: 5px 0;
+    font-size: 0.9em;
+    font-weight: bold;
+}
+.message-container a {
+    display: block;
+    position: relative;
+    max-width: 100%;
+    /* width and padding-top set inline to maintain aspect ratio,
+    replace with css aspect-ratio once supported */
+}
+.message-container img {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+}
+.TextMessageView {
+    display: flex;
+    min-width: 0;
+}
+.AnnouncementView {
+    display: flex;
+    align-items: center;
+}
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+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.
+*/
+.avatar {
+    width: 32px;
+    height: 32px;
+    overflow: hidden;
+    flex-shrink: 0;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    line-height: 32px;
+    font-size: calc(32px * 0.6);
+    text-align: center;
+    letter-spacing: calc(32px * -0.05);
+    speak: none;
+}
+.avatar img {
+    width: 100%;
+    height: 100%;
+}
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+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.
+*/
+@keyframes spinner {
+    0% {
+        transform: rotate(0);
+        stroke-dasharray: 0 0 10 90;
+    }
+    45% {
+        stroke-dasharray: 0 0 90 10;
+    }
+    75% {
+        stroke-dasharray: 0 50 50 0;
+    }
+    100% {
+        transform: rotate(360deg);
+        stroke-dasharray: 10 90 0 0;
+    }
+}
+.spinner circle {
+    transform-origin: 50% 50%;
+    animation-name: spinner;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    /**
+     * TODO
+     * see if with IE11 we can just set a static stroke state and make it rotate?
+     */
+    stroke-dasharray: 0 0 85 85;
+
+    fill: none;
+    stroke: currentcolor;
+    stroke-width: 12;
+    stroke-linecap: butt;
+}
+.spinner {
+    width: 20px;
+    height: 20px;
+}
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+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.
+*/
+.form input {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+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.
+*/
+.SessionStatusView {
+    display: flex;
+}
+.SessionStatusView p {
+    margin: 0 10px;
+    word-break: break-all;
+    word-break: break-word;
+}
+.SessionStatusView button {
+    border: none;
+    background: none;
+    color: currentcolor;
+    text-decoration: underline;
+}
+/* only if the body contains the whole app (e.g. we're not embedded in a page), make some changes */
+body.hydrogen {
+    /* make sure to disable rubber-banding and pull to refresh in a PWA if we'd end up having a scrollbar */
+    overscroll-behavior: none;
+    /* disable rubberband scrolling on document in IE11 */
+    overflow: hidden;
+}
+.hydrogen {
+    margin: 0;
+}
+.hiddenWithLayout {
+    visibility: hidden;
+}
+.hidden {
+    display: none !important;
+}

index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html><html manifest="manifest.appcache"><head>
+		<meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, user-scalable=no">
+        <meta name="application-name" content="Hydrogen Chat">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+        <meta name="apple-mobile-web-app-title" content="Hydrogen Chat">
+        <meta name="description" content="A matrix chat application">
+        <link rel="stylesheet" type="text/css" href="hydrogen-465980817.css">
+        <link rel="stylesheet" type="text/css" href="themes/element/bundle-1467704481.css" title="Element Theme">
+        <link rel="alternate stylesheet" type="text/css" href="themes/bubbles/bundle-2682099160.css" title="Bubbles Theme">
+	<link rel="manifest" href="manifest-2714077836.json"></head>
+	<body class="hydrogen">
+        <script id="version" type="text/javascript">
+            window.HYDROGEN_VERSION = "0.0.27";
+        </script>
+		<script type="text/javascript" src="hydrogen-legacy-907456704.js"></script><script type="text/javascript">hydrogenBundle.main(document.body);</script>
+        <script id="service-worker" type="text/javascript">
+            if('serviceWorker' in navigator) {
+                navigator.serviceWorker.register('sw.js')
+                    .then(function() { console.log("Service Worker registered"); });
+            }
+        </script>
+	
+
+</body></html>

manifest-2714077836.json

@@ -0,0 +1 @@
+{"name":"Hydrogen Chat","short_name":"Hydrogen","display":"fullscreen","start_url":"index.html","icons":[{"src":"icon-192.png","sizes":"192x192","type":"image/png"}]}

manifest.appcache

@@ -0,0 +1,11 @@
+CACHE MANIFEST
+# v0.0.27
+NETWORK
+"*"
+CACHE
+hydrogen-legacy-907456704.js
+hydrogen-465980817.css
+index.html
+icon-192.png
+themes/element/bundle-1467704481.css
+themes/bubbles/bundle-2682099160.css

sw.js

@@ -0,0 +1,51 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+
+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.
+*/
+
+const VERSION = "0.0.27";
+const OFFLINE_FILES = ["hydrogen-legacy-907456704.js","hydrogen-465980817.css","index.html","icon-192.png","themes/element/bundle-1467704481.css","themes/bubbles/bundle-2682099160.css"];
+// TODO: cache these files when requested
+// The difficulty is that these are relative filenames, and we don't have access to document.baseURI
+// Clients.match({type: "window"}).url and assume they are all the same? they really should be ... safari doesn't support this though
+const CACHE_FILES = ["themes/element/element-logo-2959259787.svg","themes/element/icons/chevron-right-787082136.svg","themes/element/icons/send-4065347741.svg","themes/element/inter/Inter-Black-276207522.woff","themes/element/inter/Inter-BlackItalic-3159247813.woff","themes/element/inter/Inter-Bold-4187626158.woff","themes/element/inter/Inter-BoldItalic-641187949.woff","themes/element/inter/Inter-ExtraBold-3888913940.woff","themes/element/inter/Inter-ExtraBoldItalic-2880676406.woff","themes/element/inter/Inter-ExtraLight-3277895962.woff","themes/element/inter/Inter-ExtraLightItalic-3022762143.woff","themes/element/inter/Inter-Italic-4024721388.woff","themes/element/inter/Inter-Light-3990448997.woff","themes/element/inter/Inter-LightItalic-412813693.woff","themes/element/inter/Inter-Medium-2285329551.woff","themes/element/inter/Inter-MediumItalic-1722521156.woff","themes/element/inter/Inter-Regular-2779214592.woff","themes/element/inter/Inter-SemiBold-1906312195.woff","themes/element/inter/Inter-SemiBoldItalic-3778207334.woff","themes/element/inter/Inter-Thin-1593561269.woff","themes/element/inter/Inter-ThinItalic-1888295987.woff"];
+const cacheName = `hydrogen-${VERSION}`;
+
+self.addEventListener('install', function(e) {
+    e.waitUntil(
+        caches.open(cacheName).then(function(cache) {
+            return cache.addAll(OFFLINE_FILES);
+        })
+    );
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keyList) => {
+      return Promise.all(keyList.map((key) => {
+        if (key !== cacheName) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.open(cacheName)
+        .then(cache => cache.match(event.request))
+        .then((response) => response || fetch(event.request))
+  );
+});

themes/bubbles/bundle-2682099160.css

@@ -0,0 +1,184 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+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.
+*/
+
+.hydrogen {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif, 'emoji';
+    background-color: black;
+    color: white;
+}
+
+.avatar {
+    border-radius: 100%;
+    background: white;
+    color: black;
+}
+
+.LeftPanel {
+    background: #333;
+    color: white;
+}
+
+.LeftPanel ul {
+    padding: 0;
+    margin: 0;
+}
+
+.LeftPanel li {
+    margin: 5px;
+    padding: 10px;
+    /* vertical align */
+    align-items: center;
+}
+
+.LeftPanel li {
+    border-bottom: 1px #555 solid;
+}
+
+.LeftPanel li:last-child {
+    border-bottom: none;
+}
+
+.LeftPanel li > * {
+    margin-right: 10px;
+}
+
+.LeftPanel .description .last-message {
+    font-size: 0.8em;
+}
+
+a {
+    color: white;
+}
+
+.SessionStatusView {
+    padding: 5px;
+    background-color: #555;
+}
+
+.RoomPlaceholderView {
+    align-items: center;
+    justify-content: center;
+}
+
+.SessionPickerView li {
+  font-size: 1.2em;
+  background-color: grey;
+}
+
+.RoomHeader {
+    padding: 10px;
+    background-color: #333;
+}
+
+.RoomHeader button {
+    width: 40px;
+    height: 40px;
+    font-size: 1.5em;
+    padding: 0;
+    background: white;
+    border: none;
+    font-weight: bolder;
+    line-height: 40px;
+}
+
+.back::before {
+    content: "☰";
+}
+
+.more::before {
+    content: "⋮";
+}
+
+.RoomHeader .topic {
+    font-size: 0.8em;
+}
+
+.RoomHeader {
+    padding: 10px;
+    background-color: #333;
+}
+
+.RoomView_error {
+    color: red;
+}
+
+.MessageComposer > input {
+    padding: 0.8em;
+    border: none;
+}
+
+.message-container {
+    max-width: 80%;
+    padding: 5px 10px;
+    margin: 5px 10px;
+    background: blue;
+}
+
+.message-container .sender {
+    margin: 5px 0;
+    font-size: 0.9em;
+    font-weight: bold;
+}
+
+.TextMessageView .message-container time {
+    padding: 2px 0 0px 20px;
+    font-size: 0.9em;
+    color: lightblue;
+}
+
+.message-container time {
+    font-size: 0.9em;
+    color: lightblue;
+}
+
+.own time {
+    color: lightgreen;
+}
+
+.own .message-container {
+    background-color: darkgreen;
+}
+
+.TextMessageView.own .message-container {
+    margin-left: auto;
+}
+
+.TextMessageView.pending .message-container {
+    background-color: #333;
+}
+
+.TextMessageView .message-container time {
+    float: right;
+}
+
+.message-container p {
+    margin: 5px 0;
+}
+
+.AnnouncementView {
+    margin: 5px 0;
+    padding: 5px 10%;
+}
+
+.AnnouncementView > div {
+    margin: 0 auto;
+    padding: 10px 20px;
+    background-color: #333;
+    font-size: 0.9em;
+    color: #CCC;
+    text-align: center;
+}

themes/element/bundle-1467704481.css

@@ -0,0 +1,506 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+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.
+*/
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("inter/Inter-Thin.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-Thin-1593561269.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url("inter/Inter-ThinItalic.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-ThinItalic-1888295987.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("inter/Inter-ExtraLight.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-ExtraLight-3277895962.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url("inter/Inter-ExtraLightItalic.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-ExtraLightItalic-3022762143.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("inter/Inter-Light.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-Light-3990448997.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("inter/Inter-LightItalic.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-LightItalic-412813693.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("inter/Inter-Regular.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-Regular-2779214592.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("inter/Inter-Italic.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-Italic-4024721388.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("inter/Inter-Medium.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-Medium-2285329551.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("inter/Inter-MediumItalic.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-MediumItalic-1722521156.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("inter/Inter-SemiBold.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-SemiBold-1906312195.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("inter/Inter-SemiBoldItalic.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-SemiBoldItalic-3778207334.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("inter/Inter-Bold.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-Bold-4187626158.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("inter/Inter-BoldItalic.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-BoldItalic-641187949.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("inter/Inter-ExtraBold.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-ExtraBold-3888913940.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url("inter/Inter-ExtraBoldItalic.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-ExtraBoldItalic-2880676406.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("inter/Inter-Black.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-Black-276207522.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url("inter/Inter-BlackItalic.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-BlackItalic-3159247813.woff") format("woff");
+}
+
+.hydrogen {
+    font-family: 'Inter', sans-serif, 'emoji';
+    font-size: 15px;
+    background-color: white;
+    color: #2e2f32;
+}
+
+.avatar {
+    border-radius: 100%;
+    background: #3D88FA;
+    color: white;
+}
+
+.hydrogen .avatar.usercolor1 { background-color: #368BD6; }
+
+.hydrogen .avatar.usercolor2 { background-color: #AC3BA8; }
+
+.hydrogen .avatar.usercolor3 { background-color: #03B381; }
+
+.hydrogen .avatar.usercolor4 { background-color: #E64F7A; }
+
+.hydrogen .avatar.usercolor5 { background-color: #FF812D; }
+
+.hydrogen .avatar.usercolor6 { background-color: #2DC2C5; }
+
+.hydrogen .avatar.usercolor7 { background-color: #5C56F5; }
+
+.hydrogen .avatar.usercolor8 { background-color: #74D12C; }
+
+.logo {
+    height: 48px;
+    min-width: 48px;
+    background-image: url('element-logo-2959259787.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+/** buttons */
+
+.button-row {
+    display: flex;
+}
+
+.button-row > * {
+    margin-right: 10px;
+}
+
+.button-row > *:last-child {
+    margin-right: 0px;
+}
+
+.button-row button {
+    margin: 10px 0;
+    flex: 1 0 auto;
+}
+
+.form-row {
+    margin: 12px 0;
+}
+
+.form-row input {
+    padding: 12px;
+    border: 1px solid rgba(141, 151, 165, 0.15);
+    border-radius: 8px;
+    margin-top: 5px;
+    font-size: 1em;
+}
+
+.form-row label, .form-row input {
+    display: block;
+}
+
+button.styled.secondary {
+    color: #03B381;
+}
+
+button.styled.primary {
+    background-color: #03B381;
+    border-radius: 8px;
+    color: white;
+}
+
+button.styled.primary.destructive {
+    background-color: #FF4B55;
+}
+
+button.styled.secondary.destructive {
+    color: #FF4B55;
+}
+
+button.styled {
+    border: none;
+    padding: 10px;
+    background: none;
+    font-weight: 500;
+}
+
+.PreSessionScreen {
+    padding: 30px;
+}
+
+.PreSessionScreen h1 {
+    font-size: 16px;
+    text-align: center;
+}
+
+@media screen and (min-width: 600px) {
+    .PreSessionScreen {
+        box-shadow: 0px 6px 32px rgba(0, 0, 0, 0.1);
+        border-radius: 8px;
+    }
+}
+
+.PreSessionScreen .logo {
+    height: 48px;
+    min-width: 48px;
+}
+
+.LeftPanel {
+    background: rgba(245, 245, 245, 0.90);
+}
+
+.LeftPanel ul {
+    padding: 0;
+    margin: 0;
+}
+
+.LeftPanel li {
+    margin: 5px 10px;
+    padding: 5px;
+    /* vertical align */
+    align-items: center;
+}
+
+.LeftPanel li.active {
+    background: rgba(141, 151, 165, 0.1);
+    border-radius: 5px;
+}
+
+.LeftPanel li > * {
+    margin-right: 10px;
+}
+
+.LeftPanel .description .last-message {
+    font-size: 0.8em;
+}
+
+a {
+    color: inherit;
+}
+
+.SessionStatusView {
+    padding: 5px;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background-color: #3D88FA;
+    color: white;
+    border-radius: 10px;
+}
+
+.room-shown .SessionStatusView {
+    top: 72px;
+}
+
+.RoomPlaceholderView {
+    align-items: center;
+    justify-content: center;
+}
+
+.SessionPickerView li {
+  font-size: 1.2em;
+}
+
+.SessionPickerView .session-info {
+    padding: 12px;
+    border: 1px solid rgba(141, 151, 165, 0.15);
+    border-radius: 8px;
+    background-image: url('icons/chevron-right-787082136.svg');
+    background-position: center right 30px;
+    background-repeat: no-repeat;
+    font-weight: 500;
+}
+
+.SessionPickerView .session-actions {
+    margin: 10px 0 20px 0;
+    display: flex;
+}
+
+.SessionPickerView .session-actions > * {
+    margin-right: 10px;
+}
+
+.SessionPickerView .session-actions > *:last-child {
+    margin-right: 0px;
+}
+
+.SessionPickerView .session-actions button {
+    border: none;
+    background: none;
+    color: inherit;
+}
+
+.SessionPickerView button.destructive {
+    color: #FF4B55;
+}
+
+.RoomHeader {
+    background: rgba(245, 245, 245, 0.90);
+    padding: 10px;
+}
+
+.RoomHeader button {
+    width: 40px;
+    height: 40px;
+    font-size: 1.5em;
+    padding: 0;
+    background: white;
+    border: none;
+    font-weight: bolder;
+    line-height: 40px;
+}
+
+.back::before {
+    content: "☰";
+}
+
+.more::before {
+    content: "⋮";
+}
+
+.RoomHeader .topic {
+    font-size: 0.8em;
+}
+
+.RoomView_error {
+    color: red;
+}
+
+.MessageComposer {
+    border-top: 1px solid rgba(245, 245, 245, 0.90);
+}
+
+.MessageComposer > input {
+    padding: 0.8em;
+    border: none;
+}
+
+.MessageComposer > button.send {
+    margin: 8px;
+    width: 32px;
+    height: 32px;
+    display: block;
+    border-radius: 100%;
+    border: none;
+    text-indent: 200%;
+    overflow: hidden;
+
+    background-color: #03B381;
+    background-image: url('icons/send-4065347741.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.MessageComposer > button.send:disabled {
+    background-color: #E3E8F0;
+}
+
+.message-container {
+    padding: 2px 10px;
+    margin: 5px 10px 0 10px;
+}
+
+.TextMessageView.continuation .message-container {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.message-container .sender {
+    margin: 5px 0;
+    font-size: 0.9em;
+    font-weight: bold;
+}
+
+.hydrogen .sender.usercolor1 { color: #368BD6; }
+
+.hydrogen .sender.usercolor2 { color: #AC3BA8; }
+
+.hydrogen .sender.usercolor3 { color: #03B381; }
+
+.hydrogen .sender.usercolor4 { color: #E64F7A; }
+
+.hydrogen .sender.usercolor5 { color: #FF812D; }
+
+.hydrogen .sender.usercolor6 { color: #2DC2C5; }
+
+.hydrogen .sender.usercolor7 { color: #5C56F5; }
+
+.hydrogen .sender.usercolor8 { color: #74D12C; }
+
+.message-container time {
+    padding: 2px 0 0px 10px;
+    font-size: 0.8em;
+    color: #aaa;
+}
+
+.TextMessageView.pending .message-container {
+    color: #ccc;
+}
+
+.message-container p {
+    margin: 5px 0;
+}
+
+.AnnouncementView {
+    margin: 5px 0;
+    padding: 5px 10%;
+}
+
+.AnnouncementView > div {
+    margin: 0 auto;
+    padding: 10px 20px;
+    background-color: rgba(245, 245, 245, 0.90);
+    font-size: 0.9em;
+    text-align: center;
+    border-radius: 10px;
+}

themes/element/element-logo-2959259787.svg

@@ -0,0 +1,6 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.28 2.88C17.28 1.28942 18.5694 0 20.16 0C30.7639 0 39.36 8.59613 39.36 19.2C39.36 20.7906 38.0706 22.08 36.48 22.08C34.8894 22.08 33.6 20.7906 33.6 19.2C33.6 11.7773 27.5827 5.76 20.16 5.76C18.5694 5.76 17.28 4.47058 17.28 2.88Z" fill="#0DBD8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.72 45.12C30.72 46.7106 29.4306 48 27.84 48C17.2361 48 8.64 39.4039 8.64 28.8C8.64 27.2094 9.92942 25.92 11.52 25.92C13.1106 25.92 14.4 27.2094 14.4 28.8C14.4 36.2227 20.4173 42.24 27.84 42.24C29.4306 42.24 30.72 43.5294 30.72 45.12Z" fill="#0DBD8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.88 30.72C1.28942 30.72 -5.63623e-08 29.4306 -1.25889e-07 27.84C-5.89399e-07 17.2361 8.59613 8.63997 19.2 8.63997C20.7906 8.63997 22.08 9.92939 22.08 11.52C22.08 13.1106 20.7906 14.4 19.2 14.4C11.7773 14.4 5.76 20.4173 5.76 27.84C5.76 29.4306 4.47058 30.72 2.88 30.72Z" fill="#0DBD8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M45.12 17.28C46.7106 17.28 48 18.5694 48 20.16C48 30.7639 39.4039 39.36 28.8 39.36C27.2094 39.36 25.92 38.0706 25.92 36.48C25.92 34.8894 27.2094 33.6 28.8 33.6C36.2227 33.6 42.24 27.5827 42.24 20.16C42.24 18.5694 43.5294 17.28 45.12 17.28Z" fill="#0DBD8B"/>
+</svg>

themes/element/icons/chevron-right-787082136.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 18L15 12L9 6" stroke="#8D99A5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

themes/element/icons/send-4065347741.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7372 8.96458L1.89656 15.8816C0.963879 16.3478 -0.00645849 15.3477 0.449387 14.4353C0.449387 14.4353 2.16481 10.9711 2.63665 10.0637C3.10849 9.15633 3.64864 8.99926 8.6646 8.35098C8.85021 8.32697 9.00215 8.1869 9.00215 7.99982C9.00215 7.81307 8.85021 7.67301 8.6646 7.649C3.64864 7.00071 3.10849 6.84364 2.63665 5.93624C2.16481 5.02918 0.449387 1.56465 0.449387 1.56465C-0.00645849 0.65258 0.963879 -0.347862 1.89656 0.118344L15.7372 7.03573C16.5319 7.43257 16.5319 8.5674 15.7372 8.96458Z" fill="white"/>
+</svg>