.video-take-screenshot { padding: 0 6px 0 18px; height: 100%; cursor: pointer; display: none !important; } .bilibili-player-video-control-bottom .video-take-screenshot { display: flex !important; } .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); } .bilibili-player.mode-fullscreen .video-take-screenshot i, .bilibili-player.mode-webfullscreen .video-take-screenshot i { font-size: 24px; } .video-take-screenshot:hover i { transform: scale(1.05); opacity: 1; } .video-take-screenshot:active i { transform: scale(0.95); opacity: 1; } .video-screenshot-container { position: relative; --screenshot-width: 240px; --screenshot-width-negative: calc(0px - var(--screenshot-width)); --screenshot-height: 135px; --thumbnail-margin-vertical: 12px; --thumbnail-margin-horizontal: 24px; --screenshot-list-width: calc(2 * var(--thumbnail-margin-horizontal) + var(--screenshot-width)); } .video-screenshot-batch { position: fixed; bottom: 0; right: 0; z-index: 20000; display: flex; width: var(--screenshot-list-width); align-items: center; justify-content: space-evenly; } .video-screenshot-batch button { background: #000c; color: #fff; border: none; border-radius: 10px 10px 0 0; font-size: 12pt; cursor: pointer; outline: 0!important; padding: 8px 12px; display: flex; justify-content: center; align-items: center; } .video-screenshot-batch button i { font-size: 14pt; margin-right: 4px; } .video-screenshot-container, .video-screenshot-container * { transition: all .2s ease-out; } .video-screenshot-list { position: fixed; top: 0; right: 0; z-index: 20000; padding: var(--thumbnail-margin-vertical) 0; pointer-events: none; height: calc(100% - 2 * var(--thumbnail-margin-vertical) - 48px); width: var(--screenshot-list-width); overflow: auto; } .video-screenshot-list * { pointer-events: initial; } .video-screenshot-list-enter { opacity: 0; transform: translateX(var(--screenshot-width-negative)); } .video-screenshot-list-leave-to { opacity: 0; transform: translateX(var(--screenshot-width)); } .video-screenshot-thumbnail img { max-width: var(--screenshot-width); max-height: var(--screenshot-height); display: block; background-color: black; } .video-screenshot-thumbnail { margin: var(--thumbnail-margin-vertical) var(--thumbnail-margin-horizontal); position: relative; transition: .35s cubic-bezier(0.18, 0.89, 0.32, 1.28); width: var(--screenshot-width); height: var(--screenshot-height); background-color: black; display: flex; justify-content: center; align-items: center; } @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; pointer-events: none; } .video-screenshot-thumbnail:hover .mask { opacity: 1; } .video-screenshot-thumbnail .mask .time { color: #fff; position: absolute; bottom: 0; left: 4px; font-size: 10pt; } .video-screenshot-thumbnail .mask button { background: #000a; color: #fff; border: none; border-radius: 50%; font-size: 24pt; cursor: pointer; width: 48px; height: 48px; pointer-events: initial; outline: none !important; }