.download-video-panel.opened { transform: scaleY(1) translateX(-50%); } .download-video-panel { position: absolute; top: calc(100% + 2px); transition: all .16s ease-out; transform-origin: top; transform: scaleY(0) translateX(-50%); background: white; box-shadow: 0px 3px 20px 2px #0004; z-index: 100; left: 50%; } ol.video-quality li, .video-action>div { cursor: pointer; align-items: center; margin: 0; padding: 8px 16px; transition: all .2s ease-out; text-align: center; white-space: nowrap; } .video-action>div { padding: 12px 24px; } ol.video-quality li:hover, .video-action>div:hover { background: rgba(0,0,0,0.16); } .video-quality, .video-progress, .video-action, .video-error { display: none; } .download-video-panel.quality:not(.error) .video-quality, .download-video-panel.progress:not(.error) .video-progress, .download-video-panel.action:not(.error) .video-action, .download-video-panel.error .video-error { 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: all .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-complete { display: none; }