2 files changed, 90 insertions, 0 deletions
diff --git a/WebInterface/src/style/partials/modal/_base.scss b/WebInterface/src/style/partials/modal/_base.scss
new file mode 100644
index 0000000..006c241
--- /dev/null
+++ b/WebInterface/src/style/partials/modal/_base.scss
@@ -0,0 +1,35 @@
+@import '../colors';
+
+.modal-container {
+  position:absolute;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: #000000AA;
+  display: flex;
+  opacity: 1;
+  transition: opacity 200ms ease;
+
+  &.hidden {
+    opacity: 0;
+  }
+
+  .modal {
+    background-color: $primary;
+    margin: auto;
+    padding: 1rem;
+    border-style: none;
+    border-radius: 8px;
+    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
+  }
+
+  .modal-title {
+    max-width: 85vw;
+    margin: 1rem;
+    text-align: center;
+  }
+
+  .modal-body {
+    margin: 0.25rem;
+  }
+}
diff --git a/WebInterface/src/style/partials/modal/_login.scss b/WebInterface/src/style/partials/modal/_login.scss
new file mode 100644
index 0000000..71adf61
--- /dev/null
+++ b/WebInterface/src/style/partials/modal/_login.scss
@@ -0,0 +1,55 @@
+.modal {
+  .modal-title {
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .modal-body {
+    display: grid;
+    grid-template-columns: 10em 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-row-gap: 0.5rem;
+
+    &.frst-warning {
+      grid-template-rows: 1fr 1rem 1fr 1fr;
+    }
+
+    &.scnd-warning {
+      grid-template-rows: 1fr 1fr 1rem 1fr;
+    }
+
+    div {
+      display: contents;
+      font-size: 1.25rem;
+
+      label {
+        margin-right: 2rem;
+        grid-column: 1 / 2;
+        line-height: 1.25em;
+      }
+
+      input {
+        grid-column: 2 / 3;
+        border-color: none;
+      }
+
+      span {
+        margin-top: -0.5rem;
+        grid-column: 1 / 3;
+        color: $primary-warning-text;
+        background-color: $primary;
+        font-size: 0.9rem;
+        line-height: 1.2rem;
+        padding: 0.25rem;
+
+        &.hidden {
+          display: none;
+        }
+      }
+
+      button {
+        grid-column: 1 / 3;
+      }
+    }
+  }
+}