Toast and modal dialog CSS (WIP).

backend/scss/toast.scss

@@ -1,44 +1,47 @@
+@use 'constants' as consts;
+
 #toast {
     visibility: hidden;
-    max-width: 300px;
+    width: 300px;
     margin-left: -125px;
-    background-color: black;
+
+    border: 0.1em solid consts.$color-3;
+    border-radius: 0.5em;
+    background-color: consts.$color-2;
+
     text-align: center;
-    border-radius: 2px;
-    padding: 16px; // TODO: 'rem' better?
+    padding: consts.$margin;
     position: fixed;
     z-index: 1;
     left: 50%;
-    bottom: 30px;
+    top: 30px;
     box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3);
 }
 
-#toast.show {
-    visibility: visible;
-    animation: fadein 0.5s, fadeout 0.5s 9.6s;
-    animation-iteration-count: 1;
-}
+// #toast.show {
+//     visibility: visible;
+//     animation:
+//         fadein 0.5s,
+//         fadeout 0.5s 9.5s;
+// animation-iteration-count: 1;
+// }
 
 @keyframes fadein {
     from {
-        bottom: 0;
         opacity: 0;
     }
 
     to {
-        bottom: 30px;
         opacity: 1;
     }
 }
 
 @keyframes fadeout {
     from {
-        bottom: 30px;
         opacity: 1;
     }
 
     to {
-        bottom: 0;
         opacity: 0;
     }
 }

backend/templates/base.html

@@ -23,7 +23,9 @@
             dispatchEvent(new CustomEvent("TrunkApplicationStarted", {detail: {wasm}}));
         </script>
 
-        <div id="toast"></div>
+        <div id="toasts">
+            <div id="toast"></div>
+        </div>
 
         <dialog id="modal-dialog">
             <div class="content"></div>