add subtle glow to CalendarDoor numbers
This commit is contained in:
parent
f9f1de8987
commit
d396c2a8c3
1 changed files with 21 additions and 1 deletions
|
@ -4,10 +4,30 @@
|
|||
:visible="store.is_touch_device || force_visible"
|
||||
:rectangle="door.position"
|
||||
>
|
||||
<div class="has-text-danger">{{ door.day }}</div>
|
||||
<div class="has-text-danger glow">{{ door.day }}</div>
|
||||
</SVGRect>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/bulma-scheme";
|
||||
|
||||
.glow {
|
||||
-webkit-animation: glow 2s ease-in-out infinite alternate;
|
||||
-moz-animation: glow 2s ease-in-out infinite alternate;
|
||||
animation: glow 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
from {
|
||||
text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px $primary,
|
||||
0 0 40px $primary, 0 0 50px $primary, 0 0 60px $primary, 0 0 70px $primary;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 10px white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { Door } from "@/lib/door";
|
||||
import { advent22Store } from "@/plugins/store";
|
||||
|
|
Loading…
Reference in a new issue