Bilibili-Evolved/min/toast.min.css
2019-07-07 12:10:09 +08:00

1 line
2.1 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:.3s cubic-bezier(0,.65,.58,1);transform:translateX(-150%);transform-origin:left;overflow:hidden;display:flex;flex-direction:column;border-left-width:4px;border-left-style:solid}.round-corner .toast-card{border-radius:0 var(--corner-radius) var(--corner-radius) 0}.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:.5;margin:16px;font-weight:700;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:.2s ease-out;transform-origin:center;opacity:.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:0 16px 16px;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 .link,.toast-card span{display:inline-block;padding:4px 6px;margin:0 2px;background-color:rgba(0,0,0,.1);text-decoration:none;color:#000;transition:.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:1s cubic-bezier(.22,.61,.36,1) infinite loading}