diff --git a/index.html b/index.html index 99f41f7b..09e51f34 100644 --- a/index.html +++ b/index.html @@ -9,38 +9,17 @@ + + - - ` + ``); - removeOrEnableScript(doc("script#phone-debug-pre"), debug); - removeOrEnableScript(doc("script#phone-debug-post"), debug); removeOrEnableScript(doc("script#service-worker"), offline); const versionScript = doc("script#version"); @@ -146,9 +196,17 @@ async function buildJsLegacy(bundleName) { }); } -async function buildOffline(version, bundleName) { +async function buildOffline(version, bundleName, themeAssets) { + const {offlineAssets, cacheAssets} = themeAssets.reduce((result, asset) => { + if (asset.endsWith(".css")) { + result.offlineAssets.push(asset); + } else { + result.cacheAssets.push(asset); + } + return result; + }, {offlineAssets: [], cacheAssets: []}); // write offline availability - const offlineFiles = [bundleName, `${PROJECT_ID}.css`, "index.html", "icon-192.png"]; + const offlineFiles = [bundleName, `${PROJECT_ID}.css`, "index.html", "icon-192.png"].concat(offlineAssets); // write appcache manifest const manifestLines = [ @@ -164,7 +222,8 @@ async function buildOffline(version, bundleName) { // write service worker let swSource = await fs.readFile(path.join(projectDir, "src/service-worker.template.js"), "utf8"); swSource = swSource.replace(`"%%VERSION%%"`, `"${version}"`); - swSource = swSource.replace(`"%%FILES%%"`, JSON.stringify(offlineFiles)); + swSource = swSource.replace(`"%%OFFLINE_FILES%%"`, JSON.stringify(offlineFiles)); + swSource = swSource.replace(`"%%CACHE_FILES%%"`, JSON.stringify(cacheAssets)); await fs.writeFile(path.join(targetDir, "sw.js"), swSource, "utf8"); // write web manifest const webManifest = { @@ -180,25 +239,31 @@ async function buildOffline(version, bundleName) { await fs.writeFile(path.join(targetDir, "icon-192.png"), icon); } -async function buildCss() { - // create css bundle - const cssMainFile = path.join(projectDir, "src/ui/web/css/main.css"); - const preCss = await fs.readFile(cssMainFile, "utf8"); +async function buildCssBundles(buildFn, themes) { + const cssMainFile = path.join(cssDir, "main.css"); + await buildFn(cssMainFile, path.join(targetDir, `${PROJECT_ID}.css`)); + for (const theme of themes) { + await buildFn( + path.join(cssDir, `themes/${theme}/theme.css`), + path.join(targetDir, `themes/${theme}/bundle.css`) + ); + } +} + +async function buildCss(entryPath, bundlePath) { + const preCss = await fs.readFile(entryPath, "utf8"); const cssBundler = postcss([postcssImport]); - const result = await cssBundler.process(preCss, {from: cssMainFile}); - await fs.writeFile(path.join(targetDir, `${PROJECT_ID}.css`), result.css, "utf8"); + const result = await cssBundler.process(preCss, {from: entryPath}); + await fs.writeFile(bundlePath, result.css, "utf8"); } -async function buildCssLegacy() { - // create css bundle - const cssMainFile = path.join(projectDir, "src/ui/web/css/main.css"); - const preCss = await fs.readFile(cssMainFile, "utf8"); +async function buildCssLegacy(entryPath, bundlePath) { + const preCss = await fs.readFile(entryPath, "utf8"); const cssBundler = postcss([postcssImport, cssvariables(), flexbugsFixes()]); - const result = await cssBundler.process(preCss, {from: cssMainFile}); - await fs.writeFile(path.join(targetDir, `${PROJECT_ID}.css`), result.css, "utf8"); + const result = await cssBundler.process(preCss, {from: entryPath}); + await fs.writeFile(bundlePath, result.css, "utf8"); } - function removeOrEnableScript(scriptNode, enable) { if (enable) { scriptNode.attr("type", "text/javascript"); @@ -209,9 +274,7 @@ function removeOrEnableScript(scriptNode, enable) { async function removeDirIfExists(targetDir) { try { - const files = await fs.readdir(targetDir); - await Promise.all(files.map(filename => fs.unlink(path.join(targetDir, filename)))); - await fs.rmdir(targetDir); + await fs.rmdir(targetDir, {recursive: true}); } catch (err) { if (err.code !== "ENOENT") { throw err; @@ -219,4 +282,18 @@ async function removeDirIfExists(targetDir) { } } +async function copyFolder(srcRoot, dstRoot, filter) { + const dirEnts = await fs.readdir(srcRoot, {withFileTypes: true}); + for (const dirEnt of dirEnts) { + const dstPath = path.join(dstRoot, dirEnt.name); + const srcPath = path.join(srcRoot, dirEnt.name); + if (dirEnt.isDirectory()) { + await fs.mkdir(dstPath); + await copyFolder(srcPath, dstPath, filter); + } else if (dirEnt.isFile() && filter(srcPath)) { + await fs.copyFile(srcPath, dstPath); + } + } +} + build().catch(err => console.error(err)); diff --git a/src/service-worker.template.js b/src/service-worker.template.js index 331f5cb7..485afba8 100644 --- a/src/service-worker.template.js +++ b/src/service-worker.template.js @@ -15,13 +15,17 @@ limitations under the License. */ const VERSION = "%%VERSION%%"; -const FILES = "%%FILES%%"; -const cacheName = `brawl-${VERSION}`; +const OFFLINE_FILES = "%%OFFLINE_FILES%%"; +// 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 = "%%CACHE_FILES%%"; +const cacheName = `hydrogen-${VERSION}`; self.addEventListener('install', function(e) { e.waitUntil( caches.open(cacheName).then(function(cache) { - return cache.addAll(FILES); + return cache.addAll(OFFLINE_FILES); }) ); }); diff --git a/src/ui/web/css/avatar.css b/src/ui/web/css/avatar.css index 0314fd45..f64d39ae 100644 --- a/src/ui/web/css/avatar.css +++ b/src/ui/web/css/avatar.css @@ -1,5 +1,6 @@ /* Copyright 2020 Bruno Windels +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. @@ -18,7 +19,6 @@ limitations under the License. --avatar-size: 32px; width: var(--avatar-size); height: var(--avatar-size); - border-radius: 100px; overflow: hidden; flex-shrink: 0; -moz-user-select: none; @@ -29,8 +29,6 @@ limitations under the License. font-size: calc(var(--avatar-size) * 0.6); text-align: center; letter-spacing: calc(var(--avatar-size) * -0.05); - background: white; - color: black; speak: none; } diff --git a/src/ui/web/css/font.css b/src/ui/web/css/font.css new file mode 100644 index 00000000..f6ef9a29 --- /dev/null +++ b/src/ui/web/css/font.css @@ -0,0 +1,15 @@ +/** 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; +} diff --git a/src/ui/web/css/form.css b/src/ui/web/css/form.css new file mode 100644 index 00000000..14dba7f3 --- /dev/null +++ b/src/ui/web/css/form.css @@ -0,0 +1,26 @@ +/* +Copyright 2020 Bruno Windels +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 > div { + margin: 0.4em 0; +} + +.form input { + display: block; + width: 100%; + box-sizing: border-box; +} diff --git a/src/ui/web/css/layout.css b/src/ui/web/css/layout.css index b49955ec..d48dfd98 100644 --- a/src/ui/web/css/layout.css +++ b/src/ui/web/css/layout.css @@ -1,5 +1,6 @@ /* Copyright 2020 Bruno Windels +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. @@ -17,9 +18,6 @@ limitations under the License. html { height: 100%; } -body { - margin: 0; -} .SessionView { display: flex; diff --git a/src/ui/web/css/left-panel.css b/src/ui/web/css/left-panel.css index e8f82cc5..9400da4d 100644 --- a/src/ui/web/css/left-panel.css +++ b/src/ui/web/css/left-panel.css @@ -16,8 +16,6 @@ limitations under the License. .LeftPanel { - background: #333; - color: white; overflow-y: auto; overscroll-behavior: contain; } @@ -29,24 +27,10 @@ limitations under the License. } .LeftPanel li { - margin: 5px; - padding: 10px; display: flex; align-items: center; } -.LeftPanel li { - border-bottom: 1px #555 solid; -} - -.LeftPanel li:last-child { - border-bottom: none; -} - -.LeftPanel li > * { - margin-right: 10px; -} - .LeftPanel div.description { margin: 0; flex: 1 1 0; @@ -58,7 +42,3 @@ limitations under the License. white-space: nowrap; text-overflow: ellipsis; } - -.LeftPanel .description .last-message { - font-size: 0.8em; -} diff --git a/src/ui/web/css/login.css b/src/ui/web/css/login.css index 6286589f..d8387e73 100644 --- a/src/ui/web/css/login.css +++ b/src/ui/web/css/login.css @@ -1,5 +1,6 @@ /* Copyright 2020 Bruno Windels +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. @@ -14,6 +15,39 @@ 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; + padding: 0.5em; +} + +.SessionPickerView .sessionInfo { + cursor: pointer; + display: flex; +} + +.SessionPickerView li span.userId { + flex: 1; +} + +.SessionPickerView li span.error { + margin: 0 20px; +} + +.LoginView { + padding: 0.4em; +} + .SessionLoadView { display: flex; } diff --git a/src/ui/web/css/main.css b/src/ui/web/css/main.css index 56b16eb4..496f76db 100644 --- a/src/ui/web/css/main.css +++ b/src/ui/web/css/main.css @@ -1,5 +1,6 @@ /* Copyright 2020 Bruno Windels +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. @@ -13,7 +14,7 @@ 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 url('font.css'); @import url('layout.css'); @import url('login.css'); @import url('left-panel.css'); @@ -21,6 +22,8 @@ limitations under the License. @import url('timeline.css'); @import url('avatar.css'); @import url('spinner.css'); +@import url('form.css'); +@import url('status.css'); /* only if the body contains the whole app (e.g. we're not embedded in a page), make some changes */ body.hydrogen { @@ -32,10 +35,6 @@ body.hydrogen { .hydrogen { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - background-color: black; - color: white; } .hiddenWithLayout { @@ -45,78 +44,3 @@ body.hydrogen { .hidden { display: none !important; } - -.SessionStatusView { - display: flex; - padding: 5px; - background-color: #555; -} - -.SessionStatusView p { - margin: 0 10px; - word-break: break-all; - word-break: break-word; -} - -.SessionStatusView button { - border: none; - background: none; - color: currentcolor; - text-decoration: underline; -} - - -.RoomPlaceholderView { - display: flex; - align-items: center; - justify-content: center; - flex-direction: row; -} - -.SessionPickerView { - padding: 0.4em; -} - -.SessionPickerView ul { - list-style: none; - padding: 0; -} - -.SessionPickerView li { - margin: 0.4em 0; - font-size: 1.2em; - background-color: grey; - padding: 0.5em; -} - -.SessionPickerView .sessionInfo { - cursor: pointer; - display: flex; -} - -.SessionPickerView li span.userId { - flex: 1; -} - -.SessionPickerView li span.error { - margin: 0 20px; -} - -.LoginView { - padding: 0.4em; -} - -a { - color: white; -} - -.form > div { - margin: 0.4em 0; -} - -.form input { - display: block; - width: 100%; - box-sizing: border-box; -} - diff --git a/src/ui/web/css/room.css b/src/ui/web/css/room.css index f8994aff..2f00ec0c 100644 --- a/src/ui/web/css/room.css +++ b/src/ui/web/css/room.css @@ -1,5 +1,6 @@ /* Copyright 2020 Bruno Windels +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. @@ -14,10 +15,13 @@ See the License for the specific language governing permissions and limitations under the License. */ +.RoomPlaceholderView { + display: flex; + flex-direction: row; +} .RoomHeader { - padding: 10px; - background-color: #333; + align-items: center; } .RoomHeader > *:last-child { @@ -30,16 +34,7 @@ limitations under the License. } .RoomHeader button { - width: 40px; - height: 40px; - display: none; - font-size: 1.5em; - padding: 0; display: block; - background: white; - border: none; - font-weight: bolder; - line-height: 40px; } .RoomHeader .back { @@ -52,24 +47,11 @@ limitations under the License. } .RoomHeader .topic { - font-size: 0.8em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } -.back::before { - content: "☰"; -} - -.more::before { - content: "⋮"; -} - -.RoomHeader { - align-items: center; -} - .RoomHeader .description { flex: 1 1 auto; min-width: 0; @@ -82,14 +64,8 @@ limitations under the License. margin: 0; } -.RoomView_error { - color: red; -} - .MessageComposer > input { display: block; width: 100%; box-sizing: border-box; - padding: 0.8em; - border: none; } diff --git a/src/ui/web/css/spinner.css b/src/ui/web/css/spinner.css index 55eca628..69793447 100644 --- a/src/ui/web/css/spinner.css +++ b/src/ui/web/css/spinner.css @@ -1,5 +1,6 @@ /* Copyright 2020 Bruno Windels +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. @@ -37,6 +38,12 @@ limitations under the License. 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 10 90; + fill: none; stroke: currentcolor; stroke-width: 12; diff --git a/src/ui/web/css/status.css b/src/ui/web/css/status.css new file mode 100644 index 00000000..de891de1 --- /dev/null +++ b/src/ui/web/css/status.css @@ -0,0 +1,33 @@ +/* +Copyright 2020 Bruno Windels +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; +} diff --git a/src/ui/web/css/themes/README.md b/src/ui/web/css/themes/README.md new file mode 100644 index 00000000..9078da14 --- /dev/null +++ b/src/ui/web/css/themes/README.md @@ -0,0 +1,7 @@ +things that go in the theme: + - margin specialization + - padding + - colors (foreground, background, border, ...) + - border-radius + - font faces, weights and sizes + - alignment diff --git a/src/ui/web/css/themes/bubbles/theme.css b/src/ui/web/css/themes/bubbles/theme.css new file mode 100644 index 00000000..d06b49f1 --- /dev/null +++ b/src/ui/web/css/themes/bubbles/theme.css @@ -0,0 +1,186 @@ +/* +Copyright 2020 Bruno Windels +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; +} diff --git a/src/ui/web/css/themes/element/inter.css b/src/ui/web/css/themes/element/inter.css new file mode 100644 index 00000000..5c69d7e6 --- /dev/null +++ b/src/ui/web/css/themes/element/inter.css @@ -0,0 +1,152 @@ +@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.woff?v=3.13") 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.woff?v=3.13") 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.woff?v=3.13") 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.woff?v=3.13") 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.woff?v=3.13") 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.woff?v=3.13") 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.woff?v=3.13") 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.woff?v=3.13") 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.woff?v=3.13") 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.woff?v=3.13") 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.woff?v=3.13") 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.woff?v=3.13") 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.woff?v=3.13") 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.woff?v=3.13") 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.woff?v=3.13") 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.woff?v=3.13") 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.woff?v=3.13") 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.woff?v=3.13") format("woff"); +} diff --git a/src/ui/web/css/themes/element/inter/Inter-Black.woff b/src/ui/web/css/themes/element/inter/Inter-Black.woff new file mode 100644 index 00000000..07800f4b Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Black.woff differ diff --git a/src/ui/web/css/themes/element/inter/Inter-Black.woff2 b/src/ui/web/css/themes/element/inter/Inter-Black.woff2 new file mode 100644 index 00000000..9a615e6e Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Black.woff2 differ diff --git a/src/ui/web/css/themes/element/inter/Inter-BlackItalic.woff b/src/ui/web/css/themes/element/inter/Inter-BlackItalic.woff new file mode 100644 index 00000000..8790638b Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-BlackItalic.woff differ diff --git a/src/ui/web/css/themes/element/inter/Inter-BlackItalic.woff2 b/src/ui/web/css/themes/element/inter/Inter-BlackItalic.woff2 new file mode 100644 index 00000000..9dfced91 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-BlackItalic.woff2 differ diff --git a/src/ui/web/css/themes/element/inter/Inter-Bold.woff b/src/ui/web/css/themes/element/inter/Inter-Bold.woff new file mode 100644 index 00000000..61e1c25e Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Bold.woff differ diff --git a/src/ui/web/css/themes/element/inter/Inter-Bold.woff2 b/src/ui/web/css/themes/element/inter/Inter-Bold.woff2 new file mode 100644 index 00000000..6c401bb0 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Bold.woff2 differ diff --git a/src/ui/web/css/themes/element/inter/Inter-BoldItalic.woff b/src/ui/web/css/themes/element/inter/Inter-BoldItalic.woff new file mode 100644 index 00000000..2de403ed Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-BoldItalic.woff differ diff --git a/src/ui/web/css/themes/element/inter/Inter-BoldItalic.woff2 b/src/ui/web/css/themes/element/inter/Inter-BoldItalic.woff2 new file mode 100644 index 00000000..80efd484 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-BoldItalic.woff2 differ diff --git a/src/ui/web/css/themes/element/inter/Inter-ExtraBold.woff b/src/ui/web/css/themes/element/inter/Inter-ExtraBold.woff new file mode 100644 index 00000000..433fb328 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ExtraBold.woff differ diff --git a/src/ui/web/css/themes/element/inter/Inter-ExtraBold.woff2 b/src/ui/web/css/themes/element/inter/Inter-ExtraBold.woff2 new file mode 100644 index 00000000..5a08b364 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ExtraBold.woff2 differ diff --git a/src/ui/web/css/themes/element/inter/Inter-ExtraBoldItalic.woff b/src/ui/web/css/themes/element/inter/Inter-ExtraBoldItalic.woff new file mode 100644 index 00000000..bd97df37 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ExtraBoldItalic.woff differ diff --git a/src/ui/web/css/themes/element/inter/Inter-ExtraBoldItalic.woff2 b/src/ui/web/css/themes/element/inter/Inter-ExtraBoldItalic.woff2 new file mode 100644 index 00000000..97bda246 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ExtraBoldItalic.woff2 differ diff --git a/src/ui/web/css/themes/element/inter/Inter-ExtraLight.woff b/src/ui/web/css/themes/element/inter/Inter-ExtraLight.woff new file mode 100644 index 00000000..39e6f971 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ExtraLight.woff differ diff --git a/src/ui/web/css/themes/element/inter/Inter-ExtraLight.woff2 b/src/ui/web/css/themes/element/inter/Inter-ExtraLight.woff2 new file mode 100644 index 00000000..442e2255 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ExtraLight.woff2 differ diff --git a/src/ui/web/css/themes/element/inter/Inter-ExtraLightItalic.woff b/src/ui/web/css/themes/element/inter/Inter-ExtraLightItalic.woff new file mode 100644 index 00000000..a6e1d14b Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ExtraLightItalic.woff differ diff --git a/src/ui/web/css/themes/element/inter/Inter-ExtraLightItalic.woff2 b/src/ui/web/css/themes/element/inter/Inter-ExtraLightItalic.woff2 new file mode 100644 index 00000000..db6880b1 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ExtraLightItalic.woff2 differ diff --git a/src/ui/web/css/themes/element/inter/Inter-Italic.woff b/src/ui/web/css/themes/element/inter/Inter-Italic.woff new file mode 100644 index 00000000..e7da6663 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Italic.woff differ diff --git a/src/ui/web/css/themes/element/inter/Inter-Italic.woff2 b/src/ui/web/css/themes/element/inter/Inter-Italic.woff2 new file mode 100644 index 00000000..8559dfde Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Italic.woff2 differ diff --git a/src/ui/web/css/themes/element/inter/Inter-Light.woff b/src/ui/web/css/themes/element/inter/Inter-Light.woff new file mode 100644 index 00000000..108c1120 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Light.woff differ diff --git a/src/ui/web/css/themes/element/inter/Inter-Light.woff2 b/src/ui/web/css/themes/element/inter/Inter-Light.woff2 new file mode 100644 index 00000000..80378a31 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Light.woff2 differ diff --git a/src/ui/web/css/themes/element/inter/Inter-LightItalic.woff b/src/ui/web/css/themes/element/inter/Inter-LightItalic.woff new file mode 100644 index 00000000..b30452af Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-LightItalic.woff differ diff --git a/src/ui/web/css/themes/element/inter/Inter-LightItalic.woff2 b/src/ui/web/css/themes/element/inter/Inter-LightItalic.woff2 new file mode 100644 index 00000000..091ff4ed Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-LightItalic.woff2 differ diff --git a/src/ui/web/css/themes/element/inter/Inter-Medium.woff b/src/ui/web/css/themes/element/inter/Inter-Medium.woff new file mode 100644 index 00000000..8c36a634 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Medium.woff differ diff --git a/src/ui/web/css/themes/element/inter/Inter-Medium.woff2 b/src/ui/web/css/themes/element/inter/Inter-Medium.woff2 new file mode 100644 index 00000000..3b31d335 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Medium.woff2 differ diff --git a/src/ui/web/css/themes/element/inter/Inter-MediumItalic.woff b/src/ui/web/css/themes/element/inter/Inter-MediumItalic.woff new file mode 100644 index 00000000..fb79e91f Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-MediumItalic.woff differ diff --git a/src/ui/web/css/themes/element/inter/Inter-MediumItalic.woff2 b/src/ui/web/css/themes/element/inter/Inter-MediumItalic.woff2 new file mode 100644 index 00000000..d32c111f Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-MediumItalic.woff2 differ diff --git a/src/ui/web/css/themes/element/inter/Inter-Regular.woff b/src/ui/web/css/themes/element/inter/Inter-Regular.woff new file mode 100644 index 00000000..7d587c40 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Regular.woff differ diff --git a/src/ui/web/css/themes/element/inter/Inter-Regular.woff2 b/src/ui/web/css/themes/element/inter/Inter-Regular.woff2 new file mode 100644 index 00000000..d5ffd2a1 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Regular.woff2 differ diff --git a/src/ui/web/css/themes/element/inter/Inter-SemiBold.woff b/src/ui/web/css/themes/element/inter/Inter-SemiBold.woff new file mode 100644 index 00000000..99df06cb Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-SemiBold.woff differ diff --git a/src/ui/web/css/themes/element/inter/Inter-SemiBold.woff2 b/src/ui/web/css/themes/element/inter/Inter-SemiBold.woff2 new file mode 100644 index 00000000..df746af9 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-SemiBold.woff2 differ diff --git a/src/ui/web/css/themes/element/inter/Inter-SemiBoldItalic.woff b/src/ui/web/css/themes/element/inter/Inter-SemiBoldItalic.woff new file mode 100644 index 00000000..91e192b9 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-SemiBoldItalic.woff differ diff --git a/src/ui/web/css/themes/element/inter/Inter-SemiBoldItalic.woff2 b/src/ui/web/css/themes/element/inter/Inter-SemiBoldItalic.woff2 new file mode 100644 index 00000000..ff8774cc Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-SemiBoldItalic.woff2 differ diff --git a/src/ui/web/css/themes/element/inter/Inter-Thin.woff b/src/ui/web/css/themes/element/inter/Inter-Thin.woff new file mode 100644 index 00000000..9d2e3e54 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Thin.woff differ diff --git a/src/ui/web/css/themes/element/inter/Inter-Thin.woff2 b/src/ui/web/css/themes/element/inter/Inter-Thin.woff2 new file mode 100644 index 00000000..5f7bc37c Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Thin.woff2 differ diff --git a/src/ui/web/css/themes/element/inter/Inter-ThinItalic.woff b/src/ui/web/css/themes/element/inter/Inter-ThinItalic.woff new file mode 100644 index 00000000..885d8d5d Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ThinItalic.woff differ diff --git a/src/ui/web/css/themes/element/inter/Inter-ThinItalic.woff2 b/src/ui/web/css/themes/element/inter/Inter-ThinItalic.woff2 new file mode 100644 index 00000000..2ceec604 Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ThinItalic.woff2 differ diff --git a/src/ui/web/css/themes/element/theme.css b/src/ui/web/css/themes/element/theme.css new file mode 100644 index 00000000..3bdd8f02 --- /dev/null +++ b/src/ui/web/css/themes/element/theme.css @@ -0,0 +1,188 @@ +/* +Copyright 2020 Bruno Windels +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 url('inter.css'); + +.hydrogen { + font-family: 'Inter', sans-serif, 'emoji'; + background-color: white; + color: black; +} + +.avatar { + border-radius: 100%; + background: black; + color: white; +} + +.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; +} diff --git a/src/ui/web/css/timeline.css b/src/ui/web/css/timeline.css index a6f356bc..db7574f7 100644 --- a/src/ui/web/css/timeline.css +++ b/src/ui/web/css/timeline.css @@ -28,21 +28,11 @@ limitations under the License. .message-container { flex: 0 1 auto; - max-width: 80%; - padding: 5px 10px; - margin: 5px 10px; - background: blue; /* 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 img { display: block; width: 100%; @@ -54,50 +44,7 @@ limitations under the License. min-width: 0; } -.TextMessageView.own .message-container { - margin-left: auto; -} - -.TextMessageView .message-container time { - float: right; - 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.pending .message-container { - background-color: #333; -} - -.message-container p { - margin: 5px 0; -} - .AnnouncementView { - margin: 5px 0; - padding: 5px 10%; display: flex; align-items: center; } - -.AnnouncementView > div { - margin: 0 auto; - padding: 10px 20px; - background-color: #333; - font-size: 0.9em; - color: #CCC; - text-align: center; -} diff --git a/src/ui/web/view-gallery.html b/src/ui/web/view-gallery.html index a6e849b1..f5db307f 100644 --- a/src/ui/web/view-gallery.html +++ b/src/ui/web/view-gallery.html @@ -3,6 +3,7 @@ +