refactor ui layout

2 files changed, 48 insertions, 34 deletions

diff --git a/client-web/public/assets/style/logger.css b/client-web/public/assets/style/logger.css
index cb76586..3d5c6e3 100644
--- a/client-web/public/assets/style/logger.css
+++ b/client-web/public/assets/style/logger.css
@@ -1,42 +1,56 @@
 .logger-container {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  transition: width 1s;
-  
-  background-color: rgba(0, 0, 0, 0.376);
-  border-radius: 0.2em;
-  border: 0px solid transparent;
-  padding: 0.2em;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    transition: width 1s;
+
+    background-color: rgba(0, 0, 0, 0.376);
+    border-radius: 0.2em;
+    border: 0px solid transparent;
+    padding: 0.2em;
 }
 
 .logger-line {
-  font-size: 1em;
-  height: 1.2em;
+    font-size: 1em;
+    height: 1.2em;
+    font-family: monospace;
+    animation-name: appear;
+    animation-timing-function: linear;
+    animation-duration: 0.3s;
+    animation-fill-mode: forwards;
+}
+.logger-line-disappear {
+    animation-name: disappear;
+    animation-timing-function: linear;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+}
 
-  animation-name: appear, disappear;
-  animation-timing-function: linear, linear;
-  animation-delay: 0s, 3s;
-  animation-duration: 0.3s, 1s;
-  animation-fill-mode: forwards, forwards;
+.logger-error {
+    font-size: 2em;
+    color: red;
+}
+.logger-warn {
+    font-size: 2em;
+    color: yellow;
 }
 
 @keyframes appear {
-  from {
-    margin-top: -1.2em;
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+    from {
+        margin-top: -1.2em;
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 @keyframes disappear {
-  from {
-    opacity: 1;
-  }
-  to {
-    margin-top: -1.2em;
-    opacity: 0;
-  }
+    from {
+        opacity: 1;
+    }
+    to {
+        margin-top: -1.2em;
+        opacity: 0;
+    }
 }
diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css
index a8e8ce9..3013fa7 100644
--- a/client-web/public/assets/style/master.css
+++ b/client-web/public/assets/style/master.css
@@ -10,9 +10,9 @@
 }
 
 :root {
-    --bg: #151515;
+    --bg: #151315;
     --bg-dark: #070707;
-    --bg-light: #494949;
+    --bg-light: #417143;
     --bg-lighter: #949494;
     --bg-disabled: #720000;
     --bg-enabled: #097200;
@@ -47,10 +47,10 @@ input[type="text"] {
     border: 1px solid var(--ac-light);
 }
 
-.local-controls {
+.bottom-container {
     background-color: var(--bg);
     padding: 0.5em;
-    position: absolute;
+    position: fixed;
     bottom: 0.5em;
     border: 0px solid transparent;
     border-radius: 5px;