Update modal styling

Iapetus-11 · Nov 28, 2024 · f80d59d · f80d59d
1 parent 3b05d7c
commit f80d59d
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 12 deletions.
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
@@ -8,7 +8,7 @@
     import { onBeforeUnmount, onMounted, ref } from 'vue';
 
     const emit = defineEmits<{
-        (evt: 'close'): void;
+        close: [],
     }>();
 
     const dialog = ref<HTMLDialogElement>();
@@ -41,7 +41,7 @@
 </script>
 
 <template>
-    <dialog ref="dialog" class="rounded-lg">
+    <dialog ref="dialog" class="rounded-lg shadow-xl max-lg:!border-t-0 frosted-glass bg-purple-400/60">
         <div ref="innerContainer" v-bind="$attrs">
             <slot />
         </div>

diff --git a/src/main.css b/src/main.css
@@ -22,4 +22,16 @@
     ::-webkit-scrollbar-thumb {
         @apply rounded-md bg-purple-400;
     }
-}
+
+    .frosted-glass {
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+
+        box-shadow:
+            inset -0.75px -0.5px rgba(255, 255, 255, 0.1),
+            inset +0.75px +0.5px rgba(255, 255, 255, 0.025),
+            3px 2px 10px rgba(0, 0, 0, 0.25),
+            inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025),
+            inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025);
+    }
+}
diff --git a/src/views/game/panels/auto-clickers/NotEnoughTacosForAutoClickerModal.vue b/src/views/game/panels/auto-clickers/NotEnoughTacosForAutoClickerModal.vue
@@ -13,21 +13,21 @@
 
 <template>
     <Modal @close="$emit('close')" class="flex w-72 flex-col items-center p-4">
-        <h1 class="mb-2 flex items-center text-xl text-gray-800">
+        <h1 class="mb-2 flex items-center text-xl text-gray-100">
             <img src="/art/tacos/pixel.png" alt="Pixel Taco" class="-ml-2 mr-2 w-10" />
             Not Enough Tacos!
         </h1>
 
         <img :src="autoClicker.icon" :alt="autoClickerName" class="mb-4 w-36" />
 
-        <p class="mb-3 hyphens-auto text-gray-700">
+        <p class="mb-3 hyphens-auto text-gray-100">
             You need {{ autoClicker.price }} tacos to purchase this auto clicker
         </p>
 
         <button
             type="button"
             @click="$emit('close')"
-            class="w-full rounded-lg border border-gray-400 p-1.5 transition-colors hover:bg-gray-100"
+            class="w-full rounded-lg border border-purple-400 p-1.5 transition-colors hover:bg-purple-300/50 text-gray-100"
         >
             Ok
         </button>

diff --git a/src/views/game/panels/skins/NotEnoughTacosForSkinModal.vue b/src/views/game/panels/skins/NotEnoughTacosForSkinModal.vue
@@ -13,21 +13,21 @@
 
 <template>
     <Modal @close="$emit('close')" class="flex w-72 flex-col items-center p-4">
-        <h1 class="mb-2 flex items-center text-xl text-gray-800">
+        <h1 class="mb-2 flex items-center text-xl text-gray-100">
             <img src="/art/tacos/pixel.png" alt="Pixel Taco" class="-ml-2 mr-2 w-10" />
             Not Enough Tacos!
         </h1>
 
         <img :src="autoClicker.icon" :alt="skinName" class="mb-4 w-36" />
 
-        <p class="mb-3 hyphens-auto text-gray-700">
+        <p class="mb-3 hyphens-auto text-gray-100">
             You need {{ autoClicker.price }} tacos to purchase this taco skin
         </p>
 
         <button
             type="button"
             @click="$emit('close')"
-            class="w-full rounded-lg border border-gray-400 p-1.5 transition-colors hover:bg-gray-100"
+            class="w-full rounded-lg border border-purple-400 p-1.5 transition-colors hover:bg-purple-300/50 text-gray-100"
         >
             Ok
         </button>

diff --git a/src/views/game/panels/toppings/NotEnoughTacosForToppingModal.vue b/src/views/game/panels/toppings/NotEnoughTacosForToppingModal.vue
@@ -13,21 +13,21 @@
 
 <template>
     <Modal @close="$emit('close')" class="flex w-72 flex-col items-center p-4">
-        <h1 class="mb-2 flex items-center text-xl text-gray-800">
+        <h1 class="mb-2 flex items-center text-xl text-gray-100">
             <img src="/art/tacos/pixel.png" alt="Pixel Taco" class="-ml-2 mr-2 w-10" />
             Not Enough Tacos!
         </h1>
 
         <img :src="topping.icon" :alt="toppingName" class="mb-4 w-24" />
 
-        <p class="mb-3 hyphens-auto text-gray-700">
+        <p class="mb-3 hyphens-auto text-gray-100">
             You need {{ topping.price }} tacos to purchase this topping
         </p>
 
         <button
             type="button"
             @click="$emit('close')"
-            class="w-full rounded-lg border border-gray-400 p-1.5 transition-colors hover:bg-gray-100"
+            class="w-full rounded-lg border border-purple-400 p-1.5 transition-colors hover:bg-purple-300/50 text-gray-100"
         >
             Ok
         </button>