1 files changed, 180 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;
+    }
+}