Add a shadow to the winner marks in the Splatfest results

This commit is contained in:
Matt Isenhower 2017-12-10 16:52:37 -08:00
parent c430074885
commit 146dad3554
2 changed files with 11 additions and 1 deletions

View File

@ -355,7 +355,7 @@ body.has-modal #main {
padding: 8px 0;
position: relative;
.winner-mark, .title {
.winner-mark, .winner-mark-shadow, .title {
position: absolute;
top: 0;
right: 0;
@ -373,6 +373,14 @@ body.has-modal #main {
margin: -5px;
}
.winner-mark-shadow {
background: $bg-mask-ink-splat;
background-repeat: no-repeat;
background-position: center;
margin: -4px -6px -6px -4px;
opacity: 0.25;
}
.title {
z-index: 1;

View File

@ -1,6 +1,7 @@
<template>
<div class="columns is-mobile result">
<div class="column">
<div class="winner-mark-shadow" v-if="winner == 'alpha'"></div>
<div class="winner-mark" :style="{ background: festival.colors.alpha.css_rgb }" v-if="winner == 'alpha'"></div>
<div class="font-splatoon1 title is-4">
<div>{{ rates.alpha }}<span class="percent">{{ $t('splatfest.results.%') }}</span></div>
@ -12,6 +13,7 @@
</div>
<div class="column">
<div class="winner-mark-shadow" v-if="winner == 'bravo'"></div>
<div class="winner-mark" :style="{ background: festival.colors.bravo.css_rgb }" v-if="winner == 'bravo'"></div>
<div class="font-splatoon1 title is-4">
<div>{{ rates.bravo }}<span class="percent">{{ $t('splatfest.results.%') }}</span></div>