Improve style

This commit is contained in:
the1812 2019-05-17 16:34:05 +08:00
parent bff551f1ef
commit 760e28d723
6 changed files with 14 additions and 11 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
.download-video-panel.opened{transform:scaleY(1) translateX(-50%)}.download-video-panel{position:absolute;top:calc(100% + 2px);transition:.16s ease-out;transform-origin:top;transform:scaleY(0) translateX(-50%);background:#fff;box-shadow:0 3px 20px 2px #0004;z-index:100;left:50%}.video-action>div,ol.video-quality li{cursor:pointer;align-items:center;margin:0;padding:8px 16px;transition:.2s ease-out;text-align:center;white-space:nowrap}.video-action>div{padding:12px 24px}.video-action>div:hover,ol.video-quality li:hover{background:rgba(0,0,0,.16)}.video-action,.video-error,.video-progress,.video-quality{display:none}.download-video-panel.action:not(.error) .video-action,.download-video-panel.error .video-error,.download-video-panel.progress:not(.error) .video-progress,.download-video-panel.quality:not(.error) .video-quality{display:block}.download-progress-text{display:flex}.download-progress-background{background-color:#8884;height:4px;width:100%;margin-top:4px}.download-progress-foreground{background-color:var(--theme-color);transform-origin:left;transition:.2s ease-out;transform:scaleX(0);height:100%;width:100%}.download-progress-cancel{margin-top:8px;display:flex;justify-content:center}.download-progress-cancel>span{background-color:#8884;padding:4px 8px;cursor:pointer}.download-progress-cancel>span:hover{opacity:.9}.download-progress-cancel>span:active{opacity:.8}.video-error,.video-progress{padding:12px}.video-progress{min-width:120px}#video-action-batch-data,#video-action-batch-download-data,#video-complete{display:none}.batch #video-action-batch-data,.batch #video-action-batch-download-data{display:block} .download-video-panel.opened{transform:scaleY(1) translateX(-50%);transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}.download-video-panel{position:absolute;top:calc(100% + 2px);transition:.2s cubic-bezier(.6,-.28,.74,.05);transform-origin:top;transform:scaleY(0) translateX(-50%);background:#fff;box-shadow:0 3px 20px 2px #0004;z-index:100;left:50%}.video-action>div,ol.video-quality li{cursor:pointer;align-items:center;margin:0;padding:8px 16px;transition:.2s ease-out;text-align:center;white-space:nowrap}.video-action>div{padding:12px 24px}.video-action>div:hover,ol.video-quality li:hover{background:rgba(0,0,0,.16)}.video-action,.video-error,.video-progress,.video-quality{display:none}.download-video-panel.action:not(.error) .video-action,.download-video-panel.error .video-error,.download-video-panel.progress:not(.error) .video-progress,.download-video-panel.quality:not(.error) .video-quality{display:block}.download-progress-text{display:flex}.download-progress-background{background-color:#8884;height:4px;width:100%;margin-top:4px}.download-progress-foreground{background-color:var(--theme-color);transform-origin:left;transition:.2s ease-out;transform:scaleX(0);height:100%;width:100%}.download-progress-cancel{margin-top:8px;display:flex;justify-content:center}.download-progress-cancel>span{background-color:#8884;padding:4px 8px;cursor:pointer}.download-progress-cancel>span:hover{opacity:.9}.download-progress-cancel>span:active{opacity:.8}.video-error,.video-progress{padding:12px}.video-progress{min-width:120px}#video-action-batch-data,#video-action-batch-download-data,#video-complete{display:none}.batch #video-action-batch-data,.batch #video-action-batch-download-data{display:block}

File diff suppressed because one or more lines are too long

View File

@ -406,7 +406,7 @@ li.category.folded i.icon-arrow
background: white; background: white;
transform-origin: top; transform-origin: top;
transform: scaleY(0); transform: scaleY(0);
transition: all .2s ease-out; transition: .2s cubic-bezier(0.6, -0.28, 0.74, 0.05);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -428,6 +428,7 @@ li.category.folded i.icon-arrow
.gui-settings-dropdown.opened>ul .gui-settings-dropdown.opened>ul
{ {
transform: scaleY(1); transform: scaleY(1);
transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
} }
.gui-settings-dropdown.opened>i .gui-settings-dropdown.opened>i
{ {
@ -633,7 +634,7 @@ li.category.folded i.icon-arrow
{ {
position: absolute; position: absolute;
top: calc(100% + 2px); top: calc(100% + 2px);
transition: all .16s ease-out; transition: .2s cubic-bezier(0.6, -0.28, 0.74, 0.05);
transform-origin: top; transform-origin: top;
transform: scaleY(0) translateX(-50%); transform: scaleY(0) translateX(-50%);
left: 50%; left: 50%;
@ -652,6 +653,7 @@ li.category.folded i.icon-arrow
.gui-settings-flat-button .popup.opened .gui-settings-flat-button .popup.opened
{ {
transform: scaleY(1) translateX(-50%); transform: scaleY(1) translateX(-50%);
transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
} }
.gui-settings-flat-button .popup ul .gui-settings-flat-button .popup ul
{ {

View File

@ -1,12 +1,13 @@
.download-video-panel.opened .download-video-panel.opened
{ {
transform: scaleY(1) translateX(-50%); transform: scaleY(1) translateX(-50%);
transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
} }
.download-video-panel .download-video-panel
{ {
position: absolute; position: absolute;
top: calc(100% + 2px); top: calc(100% + 2px);
transition: all .16s ease-out; transition: .2s cubic-bezier(0.6, -0.28, 0.74, 0.05);
transform-origin: top; transform-origin: top;
transform: scaleY(0) translateX(-50%); transform: scaleY(0) translateX(-50%);
background: white; background: white;