.video-take-screenshot { padding: 0 6px 0 18px; height: 100%; cursor: pointer; } .video-take-screenshot span { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; } .video-take-screenshot i { font-size: 20px; color: white; transform: scale(1); opacity: 0.9; transition: all .4s cubic-bezier(0.18, 0.89, 0.32, 1.28); } .video-take-screenshot:hover i { transform: scale(1.05); opacity: 1; } .video-take-screenshot:active i { transform: scale(0.95); opacity: 1; } .video-screenshot-list, .video-screenshot-list * { transition: all .2s ease-out; } .video-screenshot-list { position: absolute; top: 0; right: 0; z-index: 20000; padding: 12px 0; pointer-events: none; } .video-screenshot-list * { pointer-events: initial; } .video-screenshot-list-enter { opacity: 0; transform: translateX(-240px); } .video-screenshot-list-leave-to { opacity: 0; transform: translateX(240px); } .video-screenshot-thumbnail img { max-width: 240px; display: block; background-color: black; } .video-screenshot-thumbnail { margin: 12px 24px; position: relative; transition: .35s cubic-bezier(0.18, 0.89, 0.32, 1.28); width: 240px; height: 135px; background-color: black; } @keyframes spinner { to {transform: translate(-50%, -50%) rotate(360deg);} } .video-screenshot-thumbnail .loading::before { content: ""; box-sizing: border-box; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); width: 24px; height: 24px; border-radius: 50%; border: 3px solid #8888; border-top-color: var(--theme-color); animation: spinner .6s linear infinite; } .video-screenshot-thumbnail.video-screenshot-list-leave-active { position: absolute; transition: .35s cubic-bezier(0.6, -0.28, 0.74, 0.05); } /* .video-screenshot-list-enter-active .video-screenshot-thumbnail { transition: .35s cubic-bezier(0.6, -0.28, 0.74, 0.05); } .video-screenshot-list-enter-active .video-screenshot-thumbnail { } */ .video-screenshot-thumbnail .mask { position: absolute; opacity: 0; top: 0; left: 0; width: 100%; height: 100%; background: #0008; display: flex; justify-content: space-around; align-items: center; transition: none; } .video-screenshot-thumbnail:hover .mask { opacity: 1; } .video-screenshot-thumbnail .mask button { background: #000a; color: #fff; border: none; border-radius: 50%; font-size: 24pt; cursor: pointer; width: 48px; height: 48px; outline: none !important; }