Improve start page style

Signed-off-by: metamuffin <metamuffin@disroot.org>

1 files changed, 59 insertions, 26 deletions

diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css
index 8d77ca1..d4cdac8 100644
--- a/client-web/public/assets/style/master.css
+++ b/client-web/public/assets/style/master.css
@@ -22,8 +22,14 @@ body.start {
     background-image: linear-gradient(var(--ac-dark-transparent), black 150%),
         url("./tile-backdrop.svg");
     background-attachment: fixed;
-    background-size: cover, 40vw;
+    background-size: cover, 750px;
     background-color: var(--ac-dark);
+    position: absolute;
+    inset: 0;
+    display: flex;
+    place-content: center;
+    align-items: center;
+    overflow: hidden;
 }
 
 body {
@@ -74,62 +80,89 @@ button:disabled {
 }
 
 .start-box {
+    text-align: center;
     position: absolute;
-    top: 50vh;
-    left: 50vw;
-    transform: translate(-50%, -50%);
+    max-width: 64em;
 }
 
-.start-box p {
+.instructions {
     margin-bottom: 0.5em;
     font-size: x-large;
+    color: #c5c5c5;
+    text-align: left;
 }
 
 .start-box input[type="text"] {
     margin: 2em 0 1em 0;
-    font-size: xx-large;
+    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: 100%;
+    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;
 }
 
 #room-id-input {
     padding: 0.5em;
     font-size: x-large;
-    width: calc(100% - 1em);
 }
 
-@media (max-width: 800px), (max-height: 700px) {
-    h1 {
-        font-size: xxx-large;
-    }
+@media (max-width: 1100px) {
     .start-box {
-        position: relative;
-        top: 0;
-        left: 0;
-        transform: none;
+        max-width: 90%;
+    }
+    .start-box input[type="text"] {
         width: 90%;
-        margin: 0 auto;
-        margin-top: 1em;
     }
-    .start-box p {
-        margin-bottom: 0.5em;
-        font-size: large !important;
+}
+
+@media (max-width: 900px) and (max-height: 700px), (max-height: 550px) {
+    h1 {
+        font-size: 3em;
+        font-weight: 700;
+        text-align: center;
     }
-    .start-box input[type="text"] {
-        margin: 1em 0 0.5em 0;
-        font-size: large !important;
+    .instructions {
+        font-size: large;
+    }
+    .start-box .description {
+        font-size: large;
+    }
+    #room-id-input {
+        padding: 0.5em;
+        font-size: large;
     }
     .start-box input[type="button"] {
-        margin: 0.5em 0 0.5em 0;
-        font-size: large !important;
+        font-size: large;
     }
 }