mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Update toast style
This commit is contained in:
parent
86948d9def
commit
d9f0122cd4
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
.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;box-shadow:0 4px 16px 1px rgba(0,0,0,.3);transition:all 0.3s cubic-bezier(0.18,0.89,0.32,1.28);transform:translateY(16px);transform-origin:bottom;opacity:0;overflow:hidden;display:flex;flex-direction:column;border-left-width:4px;border-left-style:solid;}.toast-card.visible{min-height:96px;transform:scale(1) translateY(0);opacity:1;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;}svg.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;}svg.toast-card-dismiss:hover{transform:scale(1.2);}svg.toast-card-dismiss:active{transform:scale(1.1);}svg.toast-card-dismiss path{fill:#000;opacity:0.5;}.toast-card-message{color:#000;font-size:14px;margin:16px;margin-top:0;white-space:pre-wrap;}.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);border-radius:4px;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);}
|
||||
.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;}svg.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;}svg.toast-card-dismiss:hover{transform:scale(1.2);}svg.toast-card-dismiss:active{transform:scale(1.1);}svg.toast-card-dismiss path{fill:#000;opacity:0.5;}.toast-card-message{color:#000;font-size:14px;margin:16px;margin-top:0;white-space:pre-wrap;}.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);border-radius:4px;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);}
|
||||
@ -13,11 +13,12 @@
|
||||
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 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
transform: translateY(16px);
|
||||
transform-origin: bottom;
|
||||
opacity: 0;
|
||||
transition: all .3s cubic-bezier(0, 0.65, 0.58, 1);
|
||||
transform: translateX(-150%);
|
||||
transform-origin: left;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -27,8 +28,8 @@
|
||||
.toast-card.visible
|
||||
{
|
||||
min-height: 96px;
|
||||
transform: scale(1) translateY(0);
|
||||
opacity: 1;
|
||||
max-height: unset;
|
||||
transform: translateX(0);
|
||||
margin-top: 16px;
|
||||
}
|
||||
.toast-card-header
|
||||
|
||||
Loading…
Reference in New Issue
Block a user