2021-02-27 20:08:36 +08:00
|
|
|
div.toast
|
|
|
|
|
max-width: 60%
|
2024-01-05 19:43:39 +08:00
|
|
|
padding: 1rem 2rem
|
2021-02-27 20:08:36 +08:00
|
|
|
line-height: 1.5
|
|
|
|
|
color: var(--text-p1)
|
|
|
|
|
font-weight: 500
|
|
|
|
|
text-align: center
|
2024-01-05 19:43:39 +08:00
|
|
|
border-radius: 8px
|
2021-02-27 20:08:36 +08:00
|
|
|
background: var(--card)
|
|
|
|
|
position: fixed
|
|
|
|
|
left: 50%
|
2024-01-05 19:43:39 +08:00
|
|
|
top: 32px
|
|
|
|
|
transform: translateX(-50%)
|
2021-02-27 20:08:36 +08:00
|
|
|
z-index: 9
|
2021-02-27 21:50:18 +08:00
|
|
|
disable-select()
|
2024-01-05 19:43:39 +08:00
|
|
|
box-shadow: $boxshadow-toast
|
|
|
|
|
visibility: hidden
|
|
|
|
|
|
|
|
|
|
&.show
|
|
|
|
|
visibility: visible
|
|
|
|
|
-webkit-animation: fadein 0.5s, fadeout 0.5s 2s
|
|
|
|
|
animation: fadein 0.5s, fadeout 0.5s 2s
|
2024-01-25 22:50:17 +08:00
|
|
|
animation-fill-mode: forwards
|
2024-01-05 19:43:39 +08:00
|
|
|
|
|
|
|
|
@-webkit-keyframes fadein
|
|
|
|
|
from {top: -64px; opacity: 0;}
|
|
|
|
|
to {top: 32px; opacity: 1;}
|
|
|
|
|
@keyframes fadein
|
|
|
|
|
from {top: -64px; opacity: 0;}
|
|
|
|
|
to {top: 32px; opacity: 1;}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes fadeout
|
|
|
|
|
from {top: 32px; opacity: 1;}
|
|
|
|
|
to {top: -64px; opacity: 0;}
|
|
|
|
|
@keyframes fadeout
|
|
|
|
|
from {top: 32px; opacity: 1;}
|
|
|
|
|
to {top: -64px; opacity: 0;}
|
