Lenaisten/advent22
1
0
Fork 0
mirror of https://code.lenaisten.de/Lenaisten/advent22.git synced 2024-11-22 15:53:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

add subtle glow to CalendarDoor numbers

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-11-24 01:12:31 +00:00
parent f9f1de8987
commit d396c2a8c3
1 changed files with 21 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ui/src/components/calendar/CalendarDoor.vue
View file

@ -4,10 +4,30 @@
:visible="store.is_touch_device || force_visible" :visible="store.is_touch_device || force_visible"
:rectangle="door.position" :rectangle="door.position"
> >
<div class="has-text-danger">{{ door.day }}</div> <div class="has-text-danger glow">{{ door.day }}</div>
</SVGRect> </SVGRect>
</template> </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"> <script lang="ts">
import { Door } from "@/lib/door"; import { Door } from "@/lib/door";
import { advent22Store } from "@/plugins/store"; import { advent22Store } from "@/plugins/store";