1 files changed, 138 insertions, 0 deletions
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);
+}