Merge https://codeberg.org/tpart/keks-meet

3 files changed, 295 insertions, 0 deletions

diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css
new file mode 100644
index 0000000..e08e8c2
--- /dev/null
+++ b/client-web/public/assets/style/master.css
@@ -0,0 +1,180 @@
+/*
+    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) 2022 metamuffin <metamuffin@disroot.org>
+*/
+@import url("../font/include.css");
+@import url("./logger.css");
+@import url("./chat.css");
+@import url("./room.css");
+@import url("./prefs.css");
+@import url("./menu.css");
+@import url("/overrides.css");
+
+* {
+    font-family: "Ubuntu", sans-serif;
+    color: white;
+    margin: 0px;
+    padding: 0px;
+}
+
+body.start {
+    background-image: linear-gradient(var(--ac-dark-transparent), black 150%),
+        url("./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;
+}
+
+body {
+    font-weight: 300;
+    background-color: var(--bg-dark);
+}
+
+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 {
+    padding: 0.5em;
+    margin: 0.25em;
+    background-color: var(--ac);
+    border: 0px solid transparent;
+    border-radius: 3px;
+    font-size: small;
+    font-weight: 400;
+}
+
+input[type="button"]:hover,
+button:hover,
+.side-ui-control:hover {
+    filter: brightness(130%);
+}
+
+input[type="button"].active,
+button.active,
+.side-ui-control:active {
+    filter: hue-rotate(20deg);
+}
+
+input[type="text"],
+select,
+input[type="number"] {
+    background-color: var(--bg-dark);
+    border: 1px solid var(--ac-light);
+}
+
+input:disabled,
+button:disabled,
+.side-ui-control:disabled {
+    filter: sepia(90%);
+}
+
+.side-ui-control input {
+    display: none;
+}
+
+.start-box {
+    text-align: center;
+    position: absolute;
+    max-width: 64em;
+}
+
+.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;
+}
+
+.main {
+    height: calc(100vh - 64px);
+    display: flex;
+}
+
+#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: 900px) and (max-height: 700px), (max-height: 550px) {
+    h1 {
+        font-size: 3em;
+        font-weight: 700;
+        text-align: center;
+    }
+    .instructions {
+        font-size: large;
+    }
+    .start-box .description {
+        font-size: large;
+    }
+    #room-id-input {
+        padding: 0.5em;
+        font-size: large;
+    }
+    .start-box input[type="button"] {
+        font-size: large;
+    }
+}
diff --git a/client-web/public/assets/style/menu.css b/client-web/public/assets/style/menu.css
new file mode 100644
index 0000000..6f67af0
--- /dev/null
+++ b/client-web/public/assets/style/menu.css
@@ -0,0 +1,37 @@
+/*
+    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) 2022 metamuffin <metamuffin@disroot.org>
+*/
+
+.control-bar {
+    background-color: var(--bg);    
+    border: 0px solid transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 64px;
+    z-index: 100;
+}
+
+.menu-br {
+    position: fixed;
+    bottom: 0px;
+    right: 0px;
+    display: block;
+    text-align: right;
+}
+.menu-br .version {
+    font-size: medium;
+    font-weight: bold;
+    color: var(--ac-light);
+    padding: 0.5em;
+}
+
+.info-br {
+    position: absolute;
+    right: 0.5em;
+    bottom: calc(64px + 0.5em);
+    text-align: right;
+}
\ No newline at end of file
diff --git a/client-web/public/assets/style/room.css b/client-web/public/assets/style/room.css
new file mode 100644
index 0000000..1a82f0c
--- /dev/null
+++ b/client-web/public/assets/style/room.css
@@ -0,0 +1,78 @@
+/*
+    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) 2022 metamuffin <metamuffin@disroot.org>
+*/
+.room {
+    overflow-y: scroll;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.user {
+    background-color: var(--bg);
+    border: 0px solid transparent;
+    border-radius: 5px;
+    padding: 1em;
+    margin: 0.5em;
+    vertical-align: top;
+    min-width: fit-content;
+    height: 13em;
+    display: inline-block;
+    position: relative;
+}
+
+.user .info .name {
+    font-weight: 400;
+}
+
+.user.local .info .name {
+    text-decoration: underline;
+}
+
+.user .info {
+    margin-bottom: 1em;
+}
+
+.user .resource {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.media {
+    max-height: 9em;
+    border: 0px solid transparent;
+    border-radius: 5px;
+}
+
+.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>div {
+    border: 2px solid transparent;
+    border-radius: 4px;
+}
+
+.resource-track>div.audio-active {
+    border: 2px solid var(--ac-light);
+}