yume/yumechi-no-kuni
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨

Browse source
This commit is contained in:
syuilo 2018-09-04 11:34:36 +09:00
parent a5eb19c878
commit f42665d4bc
1 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/client/app/mobile/views/components/notify.vue
View file

@ -1,6 +1,8 @@
<template> <template>
<div class="mk-notify"> <div class="mk-notify">
<mk-notification-preview :notification="notification"/> <div>
<mk-notification-preview :notification="notification"/>
</div>
</div> </div>
</template> </template>
@ -22,7 +24,7 @@ export default Vue.extend({
setTimeout(() => { setTimeout(() => {
anime({ anime({
targets: this.$el, targets: this.$el,
bottom: '-64px', bottom: '-72px',
duration: 500, duration: 500,
easing: 'easeOutQuad', easing: 'easeOutQuad',
complete: () => this.$destroy() complete: () => this.$destroy()
@ -37,13 +39,22 @@ export default Vue.extend({
.mk-notify .mk-notify
position fixed position fixed
z-index 1024 z-index 1024
bottom -64px bottom -72px
left 0 left 0
right 0
width 100% width 100%
height 64px max-width 500px
height 72px
margin 0 auto
padding 8px
pointer-events none pointer-events none
-webkit-backdrop-filter blur(2px) font-size 80%
backdrop-filter blur(2px)
background-color rgba(#000, 0.5) > div
height 100%
-webkit-backdrop-filter blur(2px)
backdrop-filter blur(2px)
background-color rgba(#000, 0.5)
border-radius 6px
</style> </style>