[design] make design more glassy

assets/glass.scss

@@ -0,0 +1,38 @@
+@supports (backdrop-filter: blur($glassBlur)) {
+    @include media-breakpoint-up('lg', $grid-breakpoints) {
+        header {
+            backdrop-filter: blur($glassBlur);
+            background-color: transparent !important;
+        }
+    }
+
+    .modal {
+        backdrop-filter: blur($glassBlur);
+        background-color: rgba($black, .2) !important;
+    }
+
+    //.modal-content {
+    //    backdrop-filter: blur($glassBlur) brightness(200%);
+    //    background-color: transparent !important;
+    //}
+    //}
+
+    // disabled until we can use Vue3 teleport
+    //.dropdown-menu {
+    //    backdrop-filter: blur($glassBlur);
+    //    background-color: transparent !important;
+    //}
+
+    details {
+        backdrop-filter: blur($glassBlur-sm);
+        background-color: transparent !important;
+    }
+
+    .btn-group {
+        backdrop-filter: blur($glassBlur-sm);
+    }
+}
+
+//.input-group, .btn-group, .btn-group-vertical {
+//    @extend .shadow;
+//}

assets/style.scss

@@ -44,6 +44,8 @@ $fa-font-path: "~@fortawesome/fontawesome-pro/webfonts";
 
 @import "./dark";
 
+@import "./glass";
+
 html {
     scroll-behavior: smooth;
     scroll-padding-top: 92px;

assets/variables.scss

@@ -16,6 +16,11 @@ $header-margin: $header-height + 36px;
 $container-width: 920px;
 $container-wide-width: 1300px;
 
+$modal-backdrop-opacity: .1;
+
+$glassBlur: 12px;
+$glassBlur-sm: $glassBlur / 2;
+
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";

components/DialogueBox.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['modal', shown ? 'd-block' : '']" @click="hideClick">
+    <div :class="['modal', shown ? 'd-block' : '', shownFull ? 'modal-shown' : '']" @click="hideClick">
         <div class="modal-dialog modal-dialog-centered" role="document">
             <div class="modal-content shadow">
                 <div class="modal-header" v-if="choice">
@@ -34,6 +34,7 @@
         data() {
             return {
                 shown: false,
+                shownFull: false,
                 choice: false,
                 message: undefined,
                 resolve: undefined,
@@ -68,30 +69,33 @@
                 this.reject = reject;
                 this.color = color;
                 this.shown = true;
+                requestAnimationFrame(() => this.shownFull = true);
             },
             confirm() {
                 const resolve = this.resolve;
-                this.shown = false;
-                this.choice = false;
-                this.message = undefined;
-                this.resolve = undefined;
-                this.reject = undefined;
-                this.color = null;
+                this.hide();
                 if (resolve) {
                     resolve();
                 }
             },
             cancel(event) {
                 const reject = this.reject;
-                this.shown = false;
-                this.message = undefined;
-                this.resolve = undefined;
-                this.reject = undefined;
-                this.color = null;
+                this.hide();
                 if (reject) {
                     reject();
                 }
             },
+            hide() {
+                this.shownFull = false;
+                setTimeout(() => {
+                    this.shown = false;
+                    this.choice = false;
+                    this.message = undefined;
+                    this.resolve = undefined;
+                    this.reject = undefined;
+                    this.color = null;
+                }, 500);
+            },
             hideClick(event) {
                 if (event.target === this.$el) {
                     this.cancel();
@@ -106,5 +110,10 @@
 
     .modal {
         background-color: rgba($black, 0.5);
+        opacity: 0;
+        transition: opacity .3s ease-in-out;
+        &.modal-shown {
+            opacity: 1;
+        }
     }
 </style>

components/Header.vue

@@ -406,13 +406,10 @@
     @include media-breakpoint-up('lg', $grid-breakpoints) {
         header {
             position: fixed;
-            z-index: 9999;
+            z-index: 99;
             top: 0;
             left: 0;
-            backdrop-filter: blur(12px);
-            @supports not (backdrop-filter: blur(12px)) {
-                background-color: $white;
-            }
+            background-color: $white;
             box-shadow: $box-shadow;
         }