* Create a minimalistic toast

* Profile editing (WIP)
2024-12-04 17:39:56 +01:00 · 2024-12-04 17:39:56 +01:00 · 1c79cc890d
commit 1c79cc890d
parent 327b2d0a5b
25 changed files with 1133 additions and 575 deletions
--- a/backend/scss/toast.scss
+++ b/backend/scss/toast.scss
@ -0,0 +1,44 @@
+#toast {
+    visibility: hidden;
+    max-width: 300px;
+    margin-left: -125px;
+    background-color: black;
+    text-align: center;
+    border-radius: 2px;
+    padding: 16px; // TODO: 'rem' better?
+    position: fixed;
+    z-index: 1;
+    left: 50%;
+    bottom: 30px;
+    box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3);
+}
+
+#toast.show {
+    visibility: visible;
+    animation: fadein 0.5s, fadeout 0.5s 3.6s;
+    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;
+    }
+}