Leahnaya/splatoon3.ink
1
0
Fork 0
mirror of https://github.com/misenhower/splatoon3.ink.git synced 2026-08-27 11:04:38 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Only apply the product box mask to the backgorund

Browse Source
This commit is contained in:
Matt Isenhower
2022-09-18 12:40:53 -07:00
parent 9b90085b99
commit 6fcdea7a79
3 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ProductContainer.vue
View File

@@ -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>

10
src/components/ScheduleBox.vue
View File

@@ -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;

10
src/components/screenshots/ScreenshotScheduleBox.vue
View File

@@ -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;