Convert sass to css

1 files changed, 85 insertions, 0 deletions

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;
+    }
+}