Bilibili-Evolved/utils/toast/toast.css
2019-01-26 18:07:11 +08:00

158 lines
2.7 KiB
CSS

.toast-card-container
{
position: fixed;
left: 16px;
bottom: 16px;
display: flex;
flex-direction: column;
align-items: start;
z-index: 100001;
}
.toast-card
{
background: #fff;
min-width: 240px;
max-width: 60vw;
min-height: 0;
max-height: 0;
box-shadow: 0 4px 16px 1px rgba(0,0,0,.3);
transition: all .3s cubic-bezier(0, 0.65, 0.58, 1);
transform: translateX(-150%);
transform-origin: left;
overflow: hidden;
display: flex;
flex-direction: column;
border-left-width: 4px;
border-left-style: solid;
}
.toast-card.visible
{
min-height: 96px;
max-height: unset;
transform: translateX(0);
margin-top: 16px;
}
.toast-card-header
{
display: flex;
align-items: center;
}
.toast-card-title
{
font-size: 18px;
color: #000;
opacity: 0.5;
margin: 16px;
font-weight: bold;
flex: 1 1 auto;
}
.toast-card-dismiss
{
height: 24px;
width: 24px;
flex: 0 0 auto;
padding: 16px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: all .2s ease-out;
transform-origin: center;
opacity: 0.5;
}
.toast-card-dismiss:hover
{
transform: scale(1.2);
}
.toast-card-dismiss:active
{
transform: scale(1.1);
}
.toast-card-message
{
color: #000;
font-size: 14px;
margin: 16px;
margin-top: 0;
white-space: pre-wrap;
display: flex;
align-items: center;
}
.toast-card.toast-default
{
border-left-color: #444;
}
.toast-card.toast-error
{
border-left-color: #f44336;
}
.toast-card.toast-info
{
border-left-color: #2196F3;
}
.toast-card.toast-success
{
border-left-color: #8BC34A;
}
.toast-card span,
.toast-card .link
{
display: inline-block;
padding: 4px 6px;
margin: 0 2px;
background-color: rgba(0,0,0,.1);
text-decoration: none;
color: #000;
transition: all .2s ease-out;
}
.toast-card .link:hover
{
background-color: rgba(0,0,0,.2);
}
.toast-card .link:active
{
background-color: rgba(0,0,0,.1);
}
@keyframes loading
{
0%, 100%
{
top: 0%;
left: 50%;
}
25%
{
top: 50%;
left: 100%;
}
50%
{
top: 100%;
left: 50%;
}
75%
{
top: 50%;
left: 0%;
}
}
.toast-card .loading
{
width: 14px;
height: 14px;
display: inline-block;
margin-right: 14px;
position: relative;
}
.toast-card .loading::after
{
content: "";
width: 10px;
height: 10px;
background-color: #8884;
border-radius: 50%;
display: block;
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 0;
left: 50%;
animation: loading 1s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}