23 files changed, 611 insertions, 534 deletions
diff --git a/client-web/.gitignore b/client-web/.gitignore
index 99be205..00fa77d 100644
--- a/client-web/.gitignore
+++ b/client-web/.gitignore
@@ -1,3 +1,4 @@
 /public/assets/bundle.js
+/public/assets/bundle.css
 /public/assets/sw.js
 /public/assets/font
diff --git a/client-web/makefile b/client-web/makefile
index 2ff29d5..7a9e36b 100644
--- a/client-web/makefile
+++ b/client-web/makefile
@@ -1,14 +1,16 @@
 ESFLAGS = --bundle --target=esnext --format=esm
 
 .PHONY: all watch
-all: public/assets/bundle.js public/assets/sw.js public/assets/font/include.css
-watch:
+all: public/assets/bundle.js public/assets/sw.js public/assets/font/include.css public/assets/bundle.css
+watch: public/assets/font/include.css # TODO watch css
 	esbuild $(ESFLAGS) source/index.ts --outfile=public/assets/bundle.js --watch=forever &
 	esbuild $(ESFLAGS) source/sw/worker.ts --outfile=public/assets/sw.js --watch=forever
 public/assets/bundle.js: $(shell find source -type f -name '*.ts')
 	esbuild $(ESFLAGS) source/index.ts --outfile=$@
 public/assets/sw.js: $(shell find source/sw -type f -name '*.ts')
 	esbuild $(ESFLAGS) source/sw/worker.ts --outfile=$@
+public/assets/bundle.css: $(shell find style -type f -name '*.css')
+	cat style/imports $^ >$@
 public/assets/font/include.css:
 	mkdir -p public/assets/font
 	curl 'https://s.metamuffin.org/static/font-ubuntu.tar' | tar -xC public/assets/font
diff --git a/client-web/public/app.html b/client-web/public/app.html
index c2414ce..42c5052 100644
--- a/client-web/public/app.html
+++ b/client-web/public/app.html
@@ -8,7 +8,7 @@
             content="A simple secure web conferencing application using webrtc"
         />
         <script type="module" src="/assets/bundle.js"></script>
-        <link rel="stylesheet" href="/style.css" />
+        <link rel="stylesheet" href="/assets/bundle.css" />
         <title>keks-meet</title>
     </head>
     <body>
diff --git a/client-web/public/start.html b/client-web/public/start.html
index 4c90934..67cad7f 100644
--- a/client-web/public/start.html
+++ b/client-web/public/start.html
@@ -7,7 +7,7 @@
             name="description"
             content="A simple secure web conferencing application using webrtc"
         />
-        <link rel="stylesheet" href="/style.css" />
+        <link rel="stylesheet" href="/assets/bundle.css" />
         <title>keks-meet</title>
     </head>
     <body class="start">
@@ -18,8 +18,9 @@
             </p>
             <br />
             <p class="instructions">
-                To start a meeting, click 'Create room' and share the URL with all
-                participants. You can also optionally set the room name below.
+                To start a meeting, click 'Create room' and share the URL with
+                all participants. You can also optionally set the room name
+                below.
             </p>
             <p class="instructions">
                 keks-meet is free software! It is licenced under the terms of
@@ -81,7 +82,7 @@
                         ],
                     ];
                     return frags
-                        .map(f => f[Math.floor(Math.random() * f.length)])
+                        .map((f) => f[Math.floor(Math.random() * f.length)])
                         .join("")
                         .trim();
                 }
diff --git a/client-web/source/menu.ts b/client-web/source/menu.ts
index dd9e4d4..93deef1 100644
--- a/client-web/source/menu.ts
+++ b/client-web/source/menu.ts
@@ -38,7 +38,7 @@ export function info_br() {
 export let chat_control: (s?: boolean) => void;
 
 export function control_bar(state: AppState, side_ui_container: HTMLElement): HTMLElement {
-    const leave = e("button", { icon: "leave", class: "abort", onclick() { window.location.href = "/" } },PO.leave)
+    const leave = e("button", { icon: "leave", class: "abort", onclick() { globalThis.location.href = "/" } }, PO.leave)
     const chat = side_ui(side_ui_container, state.chat.element, "chat", PO.chat, state.chat)
     const prefs = side_ui(side_ui_container, ui_preferences(), "settings", PO.settings)
     const rwatches = side_ui(side_ui_container, ui_room_watches(state.conn), "room", PO.known_rooms)
diff --git a/client-web/source/user/remote.ts b/client-web/source/user/remote.ts
index 4cb31a2..aa5b1b4 100644
--- a/client-web/source/user/remote.ts
+++ b/client-web/source/user/remote.ts
@@ -157,6 +157,7 @@ export class RemoteUser extends User {
     async offer() {
         this.negotiation_busy = true
         const offer_description = await this.pc.createOffer()
+        // if (offer_description.sdp) offer_description.sdp = filter_sdp(offer_description.sdp)
         await this.pc.setLocalDescription(offer_description)
         log("webrtc", `sent offer: ${this.display_name}`, { offer: offer_description.sdp })
         this.send_to({ offer: offer_description.sdp })
@@ -170,6 +171,7 @@ export class RemoteUser extends User {
     }
     async answer() {
         const answer_description = await this.pc.createAnswer()
+        // if (answer_description.sdp) answer_description.sdp = filter_sdp(answer_description.sdp)
         await this.pc.setLocalDescription(answer_description)
         log("webrtc", `sent answer: ${this.display_name}`, { answer: answer_description.sdp })
         this.send_to({ answer: answer_description.sdp })
@@ -219,4 +221,11 @@ export class RemoteUser extends User {
             console.warn(e);
         }
     }
-}
-\ No newline at end of file
+}
+
+// function filter_sdp(s: string): string {
+//     return s.split("\n")
+//         .filter(l => l.search("VP8") == -1)
+//         .filter(l => l.search("VP9") == -1)
+//         .join("\n")
+// }
diff --git a/client-web/style/chat.css b/client-web/style/chat.css
new file mode 100644
index 0000000..0cd8441
--- /dev/null
+++ b/client-web/style/chat.css
@@ -0,0 +1,47 @@
+/*
+    This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2023 metamuffin <metamuffin.org>
+*/
+
+.chat {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+.chat .message {
+    margin: 0.2em;
+}
+.chat .control-message {
+    font-style: italic;
+    color: var(--ac-light);
+    filter: brightness(160%); /* TODO filter is a bad approach here. */
+}
+.chat .author {
+    font-weight: bold;
+}
+.chat .text {
+    color: white;
+}
+.chat .image {
+    width: min(20em, 30vw);
+    max-height: 50em; /* TODO squishes the image if too high */
+}
+.chat .messages {
+    flex: 1;
+    width: 100%;
+    overflow: auto;
+}
+.chat .controls {
+    flex: 0;
+}
+.chat input[type="text"] {
+    font-size: medium;
+    width: 100%;
+    border-radius: 5px;
+    padding: 0.5em;
+    box-sizing: border-box;
+}
+.chat .chat-link {
+    color: var(--ac-light);
+}
diff --git a/client-web/style/chat.sass b/client-web/style/chat.sass
deleted file mode 100644
index 1e0c1d6..0000000
--- a/client-web/style/chat.sass
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
- which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
- Copyright (C) 2023 metamuffin <metamuffin.org>
-
-.chat
-    display: flex
-    flex-direction: column
-    height: 100%
-
-    .message
-        margin: 0.2em
-    .control-message
-        font-style: italic
-        color: var(--ac-light)
-        filter: brightness(160%) // TODO filter is a bad approach here.
-    .author
-        font-weight: bold
-    .text
-        color: white
-    .image
-        width: min(20em, 30vw)
-        max-height: 50em // TODO squishes the image if too high
-
-    .messages
-        flex: 1
-        width: 100%
-        overflow: auto
-
-    .controls
-        flex: 0
-
-    input[type="text"]
-        font-size: medium
-        width: 100%
-        border-radius: 5px
-        padding: 0.5em
-        box-sizing: border-box
-
-    .chat-link
-        color: var(--ac-light)
-\ No newline at end of file
diff --git a/client-web/style/imports b/client-web/style/imports
new file mode 100644
index 0000000..11f19b7
--- /dev/null
+++ b/client-web/style/imports
@@ -0,0 +1,2 @@
+@import url("/assets/font/include.css");
+@import url("/overrides.css");
diff --git a/client-web/style/logger.css b/client-web/style/logger.css
new file mode 100644
index 0000000..7f3d1fd
--- /dev/null
+++ b/client-web/style/logger.css
@@ -0,0 +1,63 @@
+/*
+    This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2023 metamuffin <metamuffin.org>
+*/
+
+.logger-container {
+    z-index: 9999;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    transition: width 1s;
+    background-color: rgba(0, 0, 0, 0.376);
+    border-radius: 0.2em;
+    border: 0px solid transparent;
+    padding: 0.2em;
+}
+
+.logger-error {
+    font-size: 1.5em !important;
+    color: red;
+}
+
+.logger-warn {
+    font-size: 1.5em !important;
+    color: yellow;
+}
+
+.logger-line {
+    font-size: 1em;
+    height: 1.2em;
+    font-family: monospace;
+    animation-name: appear;
+    animation-timing-function: linear;
+    animation-duration: 0.3s;
+    animation-fill-mode: forwards;
+}
+
+.logger-line-disappear {
+    animation-name: disappear;
+    animation-timing-function: linear;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes appear {
+    from {
+        margin-top: -1.2em;
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@keyframes disappear {
+    from {
+        opacity: 1;
+    }
+    to {
+        margin-top: -1.2em;
+        opacity: 0;
+    }
+}
diff --git a/client-web/style/logger.sass b/client-web/style/logger.sass
deleted file mode 100644
index 2e16ffa..0000000
--- a/client-web/style/logger.sass
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
- which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
- Copyright (C) 2023 metamuffin <metamuffin.org>
-
-.logger-container
-    z-index: 9999
-    position: absolute
-    top: 0px
-    right: 0px
-    transition: width 1s
-    background-color: rgba(0, 0, 0, 0.376)
-    border-radius: 0.2em
-    border: 0px solid transparent
-    padding: 0.2em
-
-.logger-error
-    font-size: 1.5em !important
-    color: red
-
-.logger-warn
-    font-size: 1.5em !important
-    color: yellow
-
-.logger-line
-    font-size: 1em
-    height: 1.2em
-    font-family: monospace
-    animation-name: appear
-    animation-timing-function: linear
-    animation-duration: 0.3s
-    animation-fill-mode: forwards
-
-.logger-line-disappear
-    animation-name: disappear
-    animation-timing-function: linear
-    animation-duration: 1s
-    animation-fill-mode: forwards
-
-@keyframes appear
-    from
-        margin-top: -1.2em
-        opacity: 0
-
-    to
-        opacity: 1
-
-@keyframes disappear
-    from
-        opacity: 1
-
-    to
-        margin-top: -1.2em
-        opacity: 0
diff --git a/client-web/style/master.css b/client-web/style/master.css
new file mode 100644
index 0000000..15c3d82
--- /dev/null
+++ b/client-web/style/master.css
@@ -0,0 +1,120 @@
+/*
+    This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2023 metamuffin <metamuffin.org>
+*/
+
+:root {
+    --green: rgb(146, 243, 73);
+    --red: #cf3f3f;
+    --textgrey: #bbbbbb;
+    font-weight: 300;
+    color: white;
+}
+
+* {
+    font-family: "Ubuntu", sans-serif;
+    margin: 0px;
+    padding: 0px;
+}
+
+body.start {
+    background-image:
+        linear-gradient(var(--ac-dark-transparent), black 150%),
+        url("/assets/tile-backdrop.svg");
+    background-attachment: fixed;
+    background-size: cover, 750px;
+    background-color: var(--ac-dark);
+    position: absolute;
+    inset: 0;
+    display: flex;
+    place-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+@media (max-width: 1000px) or (max-height: 700px) {
+    body.start {
+        background-size: cover, 500px;
+    }
+}
+
+body {
+    height: 100dvh;
+    width: 100dvw;
+    overflow: hidden;
+    background-color: var(--bg-dark);
+    display: flex;
+    flex-direction: column;
+}
+
+h1 {
+    text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75);
+    font-size: 5em;
+    font-weight: 700;
+    text-align: center;
+    margin-bottom: 0.1em;
+}
+
+input[type="button"],
+button,
+.side-ui-control {
+    color: white;
+    padding: 0.5em;
+    margin: 0.25em;
+    background-color: var(--ac);
+    border: 0px solid transparent;
+    user-select: none;
+    border-radius: 3px;
+    font-size: small;
+    font-weight: 400;
+    cursor: pointer;
+    transition: filter 0.1s;
+}
+
+input[type="button"]:hover,
+button:hover,
+.side-ui-control:hover {
+    filter: brightness(130%);
+}
+
+input:disabled,
+button:disabled,
+.side-ui-control:disabled {
+    filter: saturate(30%);
+}
+
+input[type="button"].active,
+button.active,
+.side-ui-control.checked {
+    filter: brightness(80%);
+}
+
+input[type="text"],
+select,
+input[type="number"] {
+    color: white;
+    background-color: var(--bg-dark);
+    border: 1.5px solid grey;
+    border-radius: 3px;
+}
+
+input:focus {
+    border-color: var(--ac-light);
+    outline: none;
+}
+
+button.abort {
+    background-color: #9a2020;
+}
+
+.side-ui-control input {
+    display: none;
+}
+
+.icon {
+    height: 15px;
+    width: 15px;
+    vertical-align: sub;
+    margin-right: 0.25em;
+}
diff --git a/client-web/style/master.sass b/client-web/style/master.sass
deleted file mode 100644
index d6caab8..0000000
--- a/client-web/style/master.sass
+++ /dev/null
@@ -1,112 +0,0 @@
-/*
- This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
- which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
- Copyright (C) 2023 metamuffin <metamuffin.org>
-
-@use 'chat'
-@use 'logger'
-@use 'room'
-@use 'side'
-@use 'menu'
-@use 'start'
-@use 'watches'
-
-@import url("/assets/font/include.css")
-@import url("/overrides.css")
-
-:root
-    --green: rgb(146, 243, 73)
-    --red: #cf3f3f
-    --textgrey: #bbbbbb
-    font-weight: 300
-    color: white
-
-*
-    font-family: "Ubuntu", sans-serif
-    margin: 0px
-    padding: 0px
-
-body.start
-    background-image: linear-gradient(var(--ac-dark-transparent), black 150%), url("/assets/tile-backdrop.svg")
-    background-attachment: fixed
-    background-size: cover, 750px
-    background-color: var(--ac-dark)
-    position: absolute
-    inset: 0
-    display: flex
-    place-content: center
-    align-items: center
-    overflow: hidden
-
-@media (max-width: 1000px) or (max-height: 700px)
-    body.start
-        background-size: cover, 500px
-
-body
-    height: 100dvh
-    width: 100dvw
-    overflow: hidden
-    background-color: var(--bg-dark)
-    display: flex
-    flex-direction: column
-
-h1
-    text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75)
-    font-size: 5em
-    font-weight: 700
-    text-align: center
-    margin-bottom: 0.1em
-
-input[type="button"],
-button,
-.side-ui-control
-    color: white
-    padding: 0.5em
-    margin: 0.25em
-    background-color: var(--ac)
-    border: 0px solid transparent
-    user-select: none
-    border-radius: 3px
-    font-size: small
-    font-weight: 400
-    cursor: pointer
-    transition: filter 0.1s
-
-input[type="button"]:hover,
-button:hover,
-.side-ui-control:hover
-    filter: brightness(130%)
-
-input:disabled,
-button:disabled,
-.side-ui-control:disabled
-    filter: saturate(30%)
-
-input[type="button"].active,
-button.active,
-.side-ui-control.checked
-    filter: brightness(80%)
-
-input[type="text"],
-select,
-input[type="number"]
-    color: white
-    background-color: var(--bg-dark)
-    border: 1.5px solid grey
-    border-radius: 3px
-
-input:focus
-    border-color: var(--ac-light)
-    outline: none
-
-button.abort
-    background-color: #9a2020
-
-.side-ui-control input
-    display: none
-
-.icon
-    height: 15px
-    width: 15px
-    vertical-align: sub
-    margin-right: 0.25em
-\ No newline at end of file
diff --git a/client-web/style/menu.css b/client-web/style/menu.css
new file mode 100644
index 0000000..cc7a2e9
--- /dev/null
+++ b/client-web/style/menu.css
@@ -0,0 +1,35 @@
+/*
+    This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2023 metamuffin <metamuffin.org>
+*/
+
+.control-bar {
+    background-color: var(--bg);
+    padding: 0.75em;
+    width: auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+}
+.main {
+    position: relative;
+}
+.info-br {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    display: block;
+    text-align: right;
+}
+.info-br a {
+    color: lightgrey;
+}
+
+.info-br .version {
+    font-size: medium;
+    font-weight: bold;
+    color: white;
+    padding: 0.5em;
+}
diff --git a/client-web/style/menu.sass b/client-web/style/menu.sass
deleted file mode 100644
index 3c06680..0000000
--- a/client-web/style/menu.sass
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
- which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
- Copyright (C) 2023 metamuffin <metamuffin.org>
-
-.control-bar
-    background-color: var(--bg)
-    padding: 0.75em
-    width: auto
-    display: flex
-    flex-wrap: wrap
-    align-items: center
-    justify-content: center
-
-.main
-    position: relative
-.info-br
-    position: absolute
-    bottom: 0px
-    right: 0px
-    display: block
-    text-align: right
-    a
-        color: lightgrey
-
-.info-br .version
-    font-size: medium
-    font-weight: bold
-    color: white
-    padding: 0.5em
diff --git a/client-web/style/room.css b/client-web/style/room.css
new file mode 100644
index 0000000..70e73c4
--- /dev/null
+++ b/client-web/style/room.css
@@ -0,0 +1,138 @@
+/*
+    This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2023 metamuffin <metamuffin.org>
+*/
+
+.room {
+    overflow-y: auto;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-content: stretch;
+    padding: 0.5em;
+}
+.user {
+    background-color: var(--bg);
+    border: 0px solid transparent;
+    border-radius: 5px;
+    padding: 1em;
+    margin: 0.5em;
+    vertical-align: top;
+    min-width: 15em;
+    position: relative;
+    flex: 1 1;
+    display: flex;
+    flex-direction: column;
+}
+.user .info .name {
+    font-weight: 400;
+}
+.user.local .info .name {
+    text-decoration: underline;
+}
+.user .info {
+    margin-bottom: 1em;
+}
+.user .resource {
+    display: inline-block;
+}
+.resource {
+    position: relative;
+    margin: 0.5em;
+}
+.local-controls {
+    display: inline;
+}
+.local-controls::before {
+    content: "|";
+}
+.transfer-status {
+    background-color: #00000040;
+}
+.progress-bar {
+    z-index: -1;
+    padding: 0px;
+    margin: 0px;
+    height: 6px;
+    border-radius: 3px;
+    background-color: var(--ac-light);
+}
+.resource-track {
+    border-radius: 4px;
+    border: 2px solid transparent;
+    box-sizing: border-box;
+    transition: border 0.15s;
+}
+.resource-track.audio-active {
+    border: 2px solid var(--ac-light);
+}
+.resource-track.audio-mute {
+    border: 2px solid rgb(255, 86, 86);
+}
+.connection-status {
+    font-size: small;
+}
+.status-neutral {
+    color: var(--textgrey);
+}
+.status-good {
+    color: var(--green);
+}
+.status-fail {
+    color: var(--red);
+}
+.media-video {
+    border-radius: 5px;
+    transition: filter 0.5s;
+    flex: 1 1 auto;
+    background-color: black;
+}
+.media-video button.center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 0px 0px 50px 0px rgb(0, 0, 0);
+}
+.media-video button.topleft {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+.media-video button.topright {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+}
+
+.fullscreen {
+    background-color: rgb(48, 48, 48);
+    z-index: 1;
+}
+.media-audio {
+    border-radius: 5px;
+    height: 5em;
+    width: 20em;
+}
+.media-freeze {
+    filter: saturate(0%);
+}
+
+video, .preview {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+video {
+    max-width: 100%;
+    max-height: 100%;
+}
+.preview {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    filter: blur(5px);
+}
diff --git a/client-web/style/room.sass b/client-web/style/room.sass
deleted file mode 100644
index 7c530ee..0000000
--- a/client-web/style/room.sass
+++ /dev/null
@@ -1,128 +0,0 @@
-/*
- This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
- which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
- Copyright (C) 2023 metamuffin <metamuffin.org>
-
-.room
-    overflow-y: auto
-    width: 100%
-    display: flex
-    flex-wrap: wrap
-    justify-content: space-around
-    align-content: stretch
-    padding: 0.5em
-
-.user
-    background-color: var(--bg)
-    border: 0px solid transparent
-    border-radius: 5px
-    padding: 1em
-    margin: 0.5em
-    vertical-align: top
-    min-width: 15em
-    position: relative
-    flex: 1 1
-    display: flex
-    flex-direction: column
-
-.user .info .name
-    font-weight: 400
-
-.user.local .info .name
-    text-decoration: underline
-
-.user .info
-    margin-bottom: 1em
-
-.user .resource
-    display: inline-block
-
-.resource
-    position: relative
-    margin: 0.5em
-
-.local-controls
-    display: inline
-
-.local-controls::before
-    content: "|"
-
-.transfer-status
-    background-color: #00000040
-
-.progress-bar
-    z-index: -1
-    padding: 0px
-    margin: 0px
-    height: 6px
-    border-radius: 3px
-    background-color: var(--ac-light)
-
-.resource-track
-    border-radius: 4px
-    border: 2px solid transparent
-    box-sizing: border-box
-    transition: border 0.15s
-
-.resource-track.audio-active
-    border: 2px solid var(--ac-light)
-
-.resource-track.audio-mute
-    border: 2px solid rgb(255, 86, 86)
-
-.connection-status
-    font-size: small
-.status-neutral
-    color: var(--textgrey)
-.status-good
-    color: var(--green)
-.status-fail
-    color: var(--red)
-
-.media-video
-    border-radius: 5px
-    button.center
-        position: absolute
-        top: 50%
-        left: 50%
-        transform: translate(-50%,-50%)
-        box-shadow: 0px 0px 50px 0px rgb(0,0,0)
-    button.topleft
-        position: absolute
-        top: 0px
-        left: 0px
-    button.topright
-        position: absolute
-        top: 0px
-        right: 0px
-    transition: filter 0.5s
-    flex: 1 1 auto
-    background-color: black
-
-.fullscreen
-    background-color: rgb(48,48,48)
-    z-index: 1
-
-.media-audio
-    border-radius: 5px
-    height: 5em
-    width: 20em
-
-.media-freeze
-    filter: saturate(0%)
-
-
-video, .preview
-    position: absolute
-    left: 50%
-    top: 50%
-    transform: translate(-50%, -50%)
-
-video
-    max-width: 100%
-    max-height: 100%
-.preview
-    width: 100%
-    height: 100%
-    object-fit: contain
-    filter: blur(5px)
diff --git a/client-web/style/side.css b/client-web/style/side.css
new file mode 100644
index 0000000..a0c8514
--- /dev/null
+++ b/client-web/style/side.css
@@ -0,0 +1,63 @@
+/*
+    This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2023 metamuffin <metamuffin.org>
+*/
+
+.side-ui {
+    flex: 0;
+    z-index: 99;
+}
+.side-ui .side-tray {
+    height: 100%;
+    padding: 1em;
+    box-sizing: border-box;
+    overflow-y: auto;
+    background-color: var(--bg);
+}
+.side-ui > .animate-in {
+    animation-name: side-slide-in;
+    animation-duration: 0.2s;
+}
+.side-ui > .animate-out {
+    animation-name: side-slide-out;
+    animation-duration: 0.2s;
+    transform: translateX(100%);
+}
+
+@keyframes side-slide-in {
+    from {
+        transform: translateX(100%);
+    }
+    to {
+        transform: translateX(0%);
+    }
+}
+@keyframes side-slide-out {
+    from {
+        transform: translateX(0%);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}
+
+.main {
+    flex: 1;
+    display: flex;
+    flex-flow: row;
+    overflow: hidden;
+}
+.control-bar {
+    flex: 0;
+}
+.preferences {
+    width: min(50em, 100vw);
+    height: 100%;
+}
+.chat {
+    width: min(30em, 100vw);
+}
+.room-watches {
+    width: min(30em, 100vw);
+}
diff --git a/client-web/style/side.sass b/client-web/style/side.sass
deleted file mode 100644
index ba00d49..0000000
--- a/client-web/style/side.sass
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
- which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
- Copyright (C) 2023 metamuffin <metamuffin.org>
-
-.side-ui
-    flex: 0
-    z-index: 99
-    .side-tray
-        height: 100%
-        padding: 1em
-        box-sizing: border-box
-        overflow-y: auto
-        background-color: var(--bg)
-
-    >.animate-in
-        animation-name: side-slide-in
-        animation-duration: 0.2s
-    >.animate-out
-        animation-name: side-slide-out
-        animation-duration: 0.2s
-        transform: translateX(100%)
-
-@keyframes side-slide-in
-    from
-        transform: translateX(100%)
-    to
-        transform: translateX(0%)
-@keyframes side-slide-out
-    from
-        transform: translateX(0%)
-    to
-        transform: translateX(100%)
-
-.main
-    flex: 1
-    display: flex
-    flex-flow: row
-    overflow: hidden
-
-.control-bar
-    flex: 0
-.preferences
-    width: min(50em, 100vw)
-    height: 100%
-.chat
-    width: min(30em, 100vw)
-.room-watches
-    width: min(30em, 100vw)
diff --git a/client-web/style/start.css b/client-web/style/start.css
new file mode 100644
index 0000000..ab60e6b
--- /dev/null
+++ b/client-web/style/start.css
@@ -0,0 +1,85 @@
+/*
+    This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2023 metamuffin <metamuffin.org>
+*/
+
+.start-box {
+    text-align: center;
+    position: absolute;
+    max-width: 64em;
+}
+.start-box .instructions {
+    margin-bottom: 0.5em;
+    font-size: x-large;
+    color: #c5c5c5;
+    text-align: left;
+}
+.start-box input[type="text"] {
+    margin: 2em 0 1em 0;
+    width: 25em;
+    font-weight: 500;
+    color: whitesmoke;
+    border: 0.15em solid var(--ac);
+    background-color: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(5px);
+    border-radius: 0.5em;
+    outline: none;
+}
+.start-box input[type="text"]:focus {
+    transition: 0.1s ease-out;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-color: lightgray !important;
+}
+.start-box input[type="button"] {
+    margin: 1em 0 1em 0;
+    border-radius: 0.5em;
+    font-size: x-large;
+    width: 12em;
+    padding: 0.5em;
+    font-weight: 500;
+    color: white;
+    background-color: var(--ac);
+    backdrop-filter: blur(5px);
+    border: 0;
+    cursor: pointer;
+    border: 0.15em solid var(--ac);
+}
+.start-box .description {
+    margin-bottom: 1.5em;
+    font-size: x-large;
+    font-weight: bold;
+    text-align: center;
+}
+.start-box #room-id-input {
+    padding: 0.5em;
+    font-size: x-large;
+}
+@media (max-width: 1100px) {
+    .start-box {
+        max-width: 90%;
+    }
+    .start-box input[type="text"] {
+        width: 90%;
+    }
+}
+@media (max-width: 1000px) or (max-height: 700px) {
+    .start-box h1 {
+        font-size: 3em;
+        font-weight: 700;
+        text-align: center;
+    }
+    .start-box .instructions {
+        font-size: large;
+    }
+    .start-box .description {
+        font-size: large;
+    }
+    .start-box #room-id-input {
+        padding: 0.5em;
+        font-size: large;
+    }
+    .start-box input[type="button"] {
+        font-size: large;
+    }
+}
diff --git a/client-web/style/start.sass b/client-web/style/start.sass
deleted file mode 100644
index 0afb07e..0000000
--- a/client-web/style/start.sass
+++ /dev/null
@@ -1,79 +0,0 @@
-/*
- This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
- which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
- Copyright (C) 2023 metamuffin <metamuffin.org>
-
-.start-box
-    text-align: center
-    position: absolute
-    max-width: 64em
-
-    .instructions
-        margin-bottom: 0.5em
-        font-size: x-large
-        color: #c5c5c5
-        text-align: left
-
-    input[type="text"]
-        margin: 2em 0 1em 0
-        width: 25em
-        font-weight: 500
-        color: whitesmoke
-        border: 0.15em solid var(--ac)
-        background-color: rgba(0, 0, 0, 0.3)
-        backdrop-filter: blur(5px)
-        border-radius: 0.5em
-        outline: none
-
-    input[type="text"]:focus
-        transition: 0.1s ease-out
-        background-color: rgba(0, 0, 0, 0.5)
-        border-color: lightgray !important
-
-    input[type="button"]
-        margin: 1em 0 1em 0
-        border-radius: 0.5em
-        font-size: x-large
-        width: 12em
-        padding: 0.5em
-        font-weight: 500
-        color: white
-        background-color: var(--ac)
-        backdrop-filter: blur(5px)
-        border: 0
-        cursor: pointer
-        border: 0.15em solid var(--ac)
-
-    .description
-        margin-bottom: 1.5em
-        font-size: x-large
-        font-weight: bold
-        text-align: center
-
-    #room-id-input
-        padding: 0.5em
-        font-size: x-large
-
-    @media (max-width: 1100px)
-        max-width: 90%
-        input[type="text"]
-            width: 90%
-
-    @media (max-width: 1000px) or (max-height: 700px)
-        h1
-            font-size: 3em
-            font-weight: 700
-            text-align: center
-
-        .instructions
-            font-size: large
-
-        .description
-            font-size: large
-
-        #room-id-input
-            padding: 0.5em
-            font-size: large
-
-        input[type="button"]
-            font-size: large
-\ No newline at end of file
diff --git a/client-web/style/watches.css b/client-web/style/watches.css
new file mode 100644
index 0000000..3d7db19
--- /dev/null
+++ b/client-web/style/watches.css
@@ -0,0 +1,36 @@
+/*
+    This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2023 metamuffin <metamuffin.org>
+*/
+
+.room-watches-listing {
+    list-style: none;
+}
+.room-watches-listing a {
+    color: white;
+    display: inline-block;
+    width: 100%;
+    margin: 0.5em;
+    border-radius: 4px;
+    padding: 0.5em;
+    background-color: var(--bg-light);
+}
+.room-watches-listing .current-room {
+    background-color: var(--ac-dark);
+}
+.room-watches-listing .users {
+    float: right;
+}
+.room-watches-listing .users div {
+    margin: 0.25em;
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    border-radius: 3px;
+    background-color: var(--green);
+}
+.room-watches-listing .users span {
+    display: inline-block;
+    color: var(--textgrey);
+}
diff --git a/client-web/style/watches.sass b/client-web/style/watches.sass
deleted file mode 100644
index 1816b91..0000000
--- a/client-web/style/watches.sass
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
- which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
- Copyright (C) 2023 metamuffin <metamuffin.org>
-
-.room-watches-listing
-    list-style: none
-    a
-        color: white
-        display: inline-block
-        width: 100%
-        margin: 0.5em
-        border-radius: 4px
-        padding: 0.5em
-        background-color: var(--bg-light)
-
-    .current-room
-        background-color: var(--ac-dark)
-
-    .users
-        float: right
-        display: inline-block
-        div
-            margin: 0.25em
-            display: inline-block
-            width: 1em
-            height: 1em
-            border-radius: 3px
-            background-color: var(--green)
-        span
-            display: inline-block
-            color: var(--textgrey)