Fix CSS and add new chat design

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

5 files changed, 21 insertions, 7 deletions

diff --git a/client-web/source/chat.ts b/client-web/source/chat.ts
index a38a135..a28f6c7 100644
--- a/client-web/source/chat.ts
+++ b/client-web/source/chat.ts
@@ -27,12 +27,11 @@ export class Chat {
         const send = document.createElement("input")
         send.ariaLabel = "send message"
         send.type = "text"
-        send.placeholder = "send a message..."
+        send.placeholder = "Type a message"
 
         const messages = e("div", { class: "messages", aria_live: "polite" })
         const controls = e("div", { class: "controls" })
         controls.append(send)
-        messages.append(document.createElement("hr"))
 
         this.element = e("section", { class: "chat", aria_label: "chat", role: "dialog" }, messages, controls)
         this.messages = messages
diff --git a/client-web/style/chat.sass b/client-web/style/chat.sass
index ea5f06f..b5a92dd 100644
--- a/client-web/style/chat.sass
+++ b/client-web/style/chat.sass
@@ -6,6 +6,7 @@
 .chat
     display: flex
     flex-direction: column
+    height: 100%
 
     .message
         margin: 0.2em
@@ -21,11 +22,17 @@
         flex: 1
         width: 100%
         overflow: scroll
+        padding: 1em
+        box-sizing: border-box
 
     .controls
         flex: 0
         padding: 1em
     
     input
-        font-size: x-large
+        font-size: medium
         width: 100%
+        border-radius: 5px
+        padding: 0.5em
+        box-sizing: border-box
+        
diff --git a/client-web/style/master.sass b/client-web/style/master.sass
index c5c1cc9..854bdae 100644
--- a/client-web/style/master.sass
+++ b/client-web/style/master.sass
@@ -86,7 +86,11 @@ input[type="text"],
 select,
 input[type="number"]
     background-color: var(--bg-dark)
-    border: 1px solid var(--ac-light)
+    border: 1.5px solid grey
+
+input:focus
+    border-color: var(--ac-light)
+    outline: none
 
 button.abort
     left: 0px
diff --git a/client-web/style/menu.sass b/client-web/style/menu.sass
index f2f7868..26a9cfd 100644
--- a/client-web/style/menu.sass
+++ b/client-web/style/menu.sass
@@ -6,10 +6,11 @@
 .control-bar
     background-color: var(--bg)
     padding: 0.75em
-    z-index: 100
     width: auto
     display: flex
     flex-wrap: wrap
+    align-items: center
+    justify-content: center
 
 .main
     position: relative
@@ -19,7 +20,6 @@
     right: 0px
     display: block
     text-align: right
-    z-index: 100
 
 .info-br .version
     font-size: medium
diff --git a/client-web/style/side.sass b/client-web/style/side.sass
index ba95f1b..956df25 100644
--- a/client-web/style/side.sass
+++ b/client-web/style/side.sass
@@ -5,10 +5,10 @@
 
 .side-ui
     flex: 0
+    z-index: 99
     .side-tray
         height: 100%
         overflow-y: auto
-        padding: 2em
         background-color: var(--bg)
 
     >.animate-in
@@ -34,6 +34,7 @@
     flex: 1
     display: flex
     flex-flow: row
+    overflow: hidden
     @media (max-width: 900px)
         flex-flow: column
 
@@ -41,6 +42,9 @@
     flex: 0
 .preferences
     width: min(50em, 100vw)
+    height: 100%
+    padding: 1em
+    box-sizing: border-box
 .chat
     width: min(30em, 100vw)
 .room-watches