- CSS for modal dialog

- User can click outside modal dialog to close it

backend/scss/main.scss

@@ -251,10 +251,7 @@ body {
 
             input,
             button {
-                // background-color: rgb(52, 40, 85);
                 border-width: 1px;
-                // border-color: white;
-                // color: white;
             }
         }
 

backend/scss/mixins.scss

@@ -1,3 +1,5 @@
+@use 'constants' as consts;
+
 @mixin markdown {
     h1 {
         font-size: 140%;
@@ -23,4 +25,15 @@
     h6 {
         font-size: 100%;
     }
+}
+
+// Common style for popup box like modal dialog and toast.
+@mixin popup {
+    border: 0.1em solid consts.$color-3;
+    border-radius: 0.5em;
+    background-color: consts.$color-2;
+
+    text-align: center;
+    padding: calc(2 * consts.$margin) calc(2 * consts.$margin);
+    box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3);
 }

backend/scss/modal-dialog.scss

@@ -1,19 +1,21 @@
+@use 'mixins';
+@use 'constants' as consts;
+
 #modal-dialog {
-    // visibility: hidden;
-    color: white;
-    width: 800px;
-    margin-left: -400px;
-    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);
-}
+    width: 50%;
+    transform: translate(-50%, 0%);
 
-#modal-dialog.show {
-    visibility: visible;
+    @include mixins.popup;
+
+    // The inner div will cover the entire dialog and prevent user to
+    // click on it to close the dialog. Thus, The use can click outside
+    // the div and it will be considered as a click on the dialog.
+    padding: 0;
+
+    >div {
+        padding: calc(2 * consts.$margin) calc(2 * consts.$margin);
+    }
 }

backend/scss/toast.scss

@@ -1,4 +1,5 @@
 @use 'constants' as consts;
+@use 'mixins';
 
 #toasts {
     position: fixed;
@@ -11,18 +12,11 @@
     flex-direction: column;
 
     .toast {
-        // visibility: hidden;
         display: none;
         width: fit-content;
         align-self: center;
 
-        border: 0.1em solid consts.$color-3;
-        border-radius: 0.5em;
-        background-color: consts.$color-2;
-
-        text-align: center;
-        padding: calc(2 * consts.$margin) calc(2 * consts.$margin);
-        box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3);
+        @include mixins.popup;
 
         margin: consts.$margin;
 
@@ -36,14 +30,6 @@
     }
 }
 
-// #toast.show {
-//     visibility: visible;
-//     animation:
-//         fadein 0.5s,
-//         fadeout 0.5s 9.5s;
-// animation-iteration-count: 1;
-// }
-
 @keyframes fadein {
     from {
         opacity: 0;

backend/templates/modal_dialog.html

@@ -1,6 +1,8 @@
 {# Needed by the frontend modal_dialog module. #}
 <dialog id="modal-dialog">
-    <div class="content"></div>
-    <input type="button" class="ok" value="OK">
-    <input type="button" class="cancel" value="Cancel">
+    <div>
+        <div class="content"></div>
+        <input type="button" class="ok" value="OK">
+        <input type="button" class="cancel" value="Cancel">
+    </div>
 </dialog>