Added options, preparing for Quasar rewrite

assets/styles/main.scss

@@ -36,7 +36,7 @@ body {
   position: sticky;
 
   background-color: rgb(6 25 28);
-  background-image: url('~/assets/images/sky.png');
+  background-image: url('~/assets/images/textures/sky.png');
   background-attachment: fixed;
   background-blend-mode: multiply;
   background-size: cover;
@@ -61,6 +61,26 @@ body {
 }
 
 // Helper classes that don't exist in Bootstrap.
+.nobr {
+  white-space: nowrap;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.overlay {
+  grid-area: 1 / 1;
+}
+
+.pass-through {
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+  }
+}
+
 .no-decoration {
   text-decoration: none;
   color: inherit;
@@ -78,7 +98,7 @@ body {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.display-xs-none {
+.display-sm {
   display: none;
 }
 
@@ -87,10 +107,6 @@ body {
   font-weight: 700;
 }
 
-.smooth-glide {
-    transition: height 0.4s linear;
-}
-
 // Query-overridable classes.
 .background {
   background-color: rgb(0 0 0 / 50%);
@@ -101,6 +117,42 @@ body {
   min-height: 100%;
 }
 
+.dialog {
+  display: grid;
+
+  min-width: 240px;
+  max-width: 640px;
+
+  background-color: rgb(25 20 40 / 95%);
+  box-shadow: rgb(81 75 89 / 50%) 7px 7px 2em;
+  border-radius: 16px !important;
+
+  > div.background {
+    background-image: url('~/assets/images/textures/aero.png');
+    background-attachment: scroll;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-blend-mode: lighten;
+
+    width: 100%;
+    height: 100%;
+
+    opacity: 0.2;
+
+    box-shadow: azure 0 0 20rem;
+    filter: blur(5px);
+  }
+
+  > div.content > img.icon-badge {
+    position: fixed;
+    margin-top: -20px;
+    margin-left: -20px;
+    transform: rotate(-25deg);
+    width: 60px;
+    height: 60px;
+  }
+}
+
 %link {
   color: inherit;
   text-decoration: none;
@@ -164,7 +216,7 @@ body {
   }
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: light) {
   body {
     color: black;
   }
@@ -240,11 +292,11 @@ body {
     mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%) 5%, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%));
   }
 
-  .rounded-1 {
+  .rounded-1-sm {
     border-radius: 1em;
   }
 
-  .display-xs-none {
+  .display-sm {
     display: block;
   }
 
@@ -264,7 +316,7 @@ body {
 
 @include bootstrap.media-breakpoint-up(lg) {
   .dimensions {
-    width: 60%;
+    width: 70%;
   }
 }