Add drop shadow to rule icons

This commit is contained in:
sarah 2023-06-23 15:46:15 +02:00
parent 6a38730f7d
commit 57ea7fd5f7
6 changed files with 9 additions and 6 deletions

View File

@ -16,7 +16,7 @@
<div class="flex items-center space-x-2 text-sm lg:text-lg">
<template v-if="store.activeSchedule && store.activeSchedule.settings">
<div>
<RuleIcon :rule="store.activeSchedule.settings.vsRule" class="h-5 lg:h-6" />
<RuleIcon :rule="store.activeSchedule.settings.vsRule" class="h-5 lg:h-6 drop-shadow-ruleIcon" />
</div>
<div class="text-shadow">{{ $t(`splatnet.rules.${store.activeSchedule.settings.vsRule.id}.name`, store.activeSchedule.settings.vsRule.name) }}</div>
</template>

View File

@ -3,7 +3,7 @@
<div class="font-splatoon2 sm:hidden" v-if="props.schedule">
<div class="flex items-center space-x-2">
<div>
<RuleIcon :rule="props.schedule.settings.vsRule" class="h-5" />
<RuleIcon :rule="props.schedule.settings.vsRule" class="h-5 drop-shadow-ruleIcon" />
</div>
<div class="text-shadow">
{{ $t(`splatnet.rules.${props.schedule.settings.vsRule.id}.name`, props.schedule.settings.vsRule.name) }}
@ -31,7 +31,7 @@
<template v-if="props.schedule">
<div class="flex items-center justify-center space-x-2">
<div>
<RuleIcon :rule="props.schedule.settings.vsRule" class="h-5 lg:h-6" />
<RuleIcon :rule="props.schedule.settings.vsRule" class="h-5 lg:h-6 drop-shadow-ruleIcon" />
</div>
<div class="text-xs lg:text-lg text-shadow">
{{ $t(`splatnet.rules.${props.schedule.settings.vsRule.id}.name`, props.schedule.settings.vsRule.name) }}

View File

@ -18,7 +18,7 @@
<div class="flex items-center space-x-2 text-sm lg:text-lg">
<template v-if="event">
<div>
<RuleIcon :rule="event.settings.vsRule" class="h-5 lg:h-6" />
<RuleIcon :rule="event.settings.vsRule" class="h-5 lg:h-6 drop-shadow-ruleIcon" />
</div>
<div class="text-shadow">{{ $t(`splatnet.rules.${event.settings.vsRule.id}.name`, event.settings.vsRule.name) }}</div>
</template>

View File

@ -1,7 +1,7 @@
<template>
<template v-if="event && timePeriod">
<div class="flex items-center w-full font-splatoon2" :class="isCurrent ? 'text-zinc-100' : 'text-zinc-300 opacity-60'">
<RuleIcon :rule="event.settings.vsRule" class="h-5 lg:h-6" />
<RuleIcon :rule="event.settings.vsRule" class="h-5 lg:h-6 drop-shadow-ruleIcon" />
<div class="px-2 text-shadow whitespace-pre">
{{ $d(timePeriod.startTime, 'dateTimeShortWeekday') }}
&ndash;

View File

@ -11,7 +11,7 @@
<div class="flex items-center justify-between font-splatoon2">
<div class="flex items-center space-x-2 text-xl">
<div>
<RuleIcon :rule="store.activeSchedule.settings.vsRule" class="h-8" />
<RuleIcon :rule="store.activeSchedule.settings.vsRule" class="h-8 drop-shadow-ruleIcon" />
</div>
<div class="text-shadow">{{ store.activeSchedule.settings.vsRule.name }}</div>
</div>

View File

@ -33,6 +33,9 @@ module.exports = {
splatoon1: 'var(--font-family-s1)',
splatoon2: 'var(--font-family-s2)',
},
dropShadow: {
'ruleIcon': '1px 1px 0 rgb(0,0,0)',
},
},
},
plugins: [