From 6fcdea7a795d341353997deeff141c1e26ef5499 Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Sun, 18 Sep 2022 12:40:53 -0700
Subject: [PATCH] Only apply the product box mask to the backgorund

---
 src/components/ProductContainer.vue                  |  3 ++-
 src/components/ScheduleBox.vue                       | 10 +++++-----
 src/components/screenshots/ScreenshotScheduleBox.vue | 10 +++++-----
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/ProductContainer.vue b/src/components/ProductContainer.vue
index e7f45de..d3ce98d 100644
--- a/src/components/ProductContainer.vue
+++ b/src/components/ProductContainer.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="product-mask rounded-2xl" :class="props.bg">
+  <div class="relative">
+    <div class="absolute inset-0 product-mask rounded-2xl -z-10" :class="props.bg"></div>
     <slot />
   </div>
 </template>
diff --git a/src/components/ScheduleBox.vue b/src/components/ScheduleBox.vue
index fd6d9a6..557f7db 100644
--- a/src/components/ScheduleBox.vue
+++ b/src/components/ScheduleBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <ProductContainer :bg="type.bg" class="w-full bg-tapes pt-10 pb-8">
+  <ProductContainer :bg="type.bg" class="w-full pt-10 pb-8">
     <div class="space-y-2">
       <div class="flex items-center space-x-2 mx-2">
         <img :src="type.img" />
@@ -83,21 +83,21 @@ const types = {
     badge: null,
     store: useRegularSchedulesStore(),
     img: battleRegularSvg,
-    bg: 'bg-splatoon-battle-regular',
+    bg: 'bg-splatoon-battle-regular bg-tapes',
   },
   anarchySeries: {
     name: 'Anarchy Battle',
     badge: 'Series',
     store: useAnarchySeriesSchedulesStore(),
     img: battleBankaraSvg,
-    bg: 'bg-splatoon-battle-ranked',
+    bg: 'bg-splatoon-battle-ranked bg-tapes',
   },
   anarchyOpen: {
     name: 'Anarchy Battle',
     badge: 'Open',
     store: useAnarchyOpenSchedulesStore(),
     img: battleBankaraSvg,
-    bg: 'bg-splatoon-battle-ranked',
+    bg: 'bg-splatoon-battle-ranked bg-tapes',
   },
 };
 
@@ -107,7 +107,7 @@ const nextSchedule = computed(() => store.value.upcomingSchedules?.at(0));
 </script>
 
 <style scoped>
-.bg-tapes {
+:deep(.bg-tapes) {
   background-image: url('@/assets/img/tapes-transparent.png'),
     linear-gradient(180deg, rgba(2, 0, 36, 0.10) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.25) 100%);
   background-size: contain;
diff --git a/src/components/screenshots/ScreenshotScheduleBox.vue b/src/components/screenshots/ScreenshotScheduleBox.vue
index 3b7ba62..9bf8d99 100644
--- a/src/components/screenshots/ScreenshotScheduleBox.vue
+++ b/src/components/screenshots/ScreenshotScheduleBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <ProductContainer :bg="type.bg" class="bg-tapes pt-10">
+  <ProductContainer :bg="type.bg" class="pt-10">
     <div class="space-y-2">
       <div class="flex items-center justify-center space-x-1 mx-2">
         <div class="font-splatoon1 text-4xl text-shadow">
@@ -67,21 +67,21 @@ const types = {
     badge: null,
     store: useRegularSchedulesStore(),
     img: battleRegularSvg,
-    bg: 'bg-splatoon-battle-regular',
+    bg: 'bg-splatoon-battle-regular bg-tapes',
   },
   anarchySeries: {
     name: 'Anarchy Battle',
     badge: 'Series',
     store: useAnarchySeriesSchedulesStore(),
     img: battleBankaraSvg,
-    bg: 'bg-splatoon-battle-ranked',
+    bg: 'bg-splatoon-battle-ranked bg-tapes',
   },
   anarchyOpen: {
     name: 'Anarchy Battle',
     badge: 'Open',
     store: useAnarchyOpenSchedulesStore(),
     img: battleBankaraSvg,
-    bg: 'bg-splatoon-battle-ranked',
+    bg: 'bg-splatoon-battle-ranked bg-tapes',
   },
 };
 
@@ -90,7 +90,7 @@ const store = computed(() => type.value.store);
 </script>
 
 <style scoped>
-.bg-tapes {
+:deep(.bg-tapes) {
   background-image: url('@/assets/img/tapes-transparent.png'),
     linear-gradient(180deg, rgba(2, 0, 36, 0.10) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.25) 100%);
   background-size: contain;