mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
1 line
4.2 KiB
CSS
1 line
4.2 KiB
CSS
.video-take-screenshot{position:relative;padding:0 6px;margin-left:6px;height:100%;cursor:pointer;display:none!important}.bilibili-player-video-control-bottom .video-take-screenshot,.squirtle-controller-wrap .video-take-screenshot{display:flex!important}.video-take-screenshot.touch{padding:0 6px;margin-left:12px}.video-take-screenshot.touch span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.video-take-screenshot i{font-size:20px;color:#fff;transform:scale(1);opacity:.9;transition:.4s cubic-bezier(.18,.89,.32,1.28);display:block}.bilibili-player.mode-fullscreen .video-take-screenshot i,.bilibili-player.mode-webfullscreen .video-take-screenshot i{font-size:24px}.video-take-screenshot .player-tooltips.active{transition-duration:.15s;transition-delay:.15s;position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(calc(-100% - 4px));opacity:0}.video-take-screenshot:hover .player-tooltips{opacity:1;transform:translateX(-50%) translateY(calc(-100% - 19px))}.video-take-screenshot.touch:hover .player-tooltips{transform:translateX(-50%) translateY(calc(-100% - 12px))}.video-take-screenshot:hover i{transform:scale(1.05);opacity:1}.video-take-screenshot:active i{transform:scale(.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:12px;--screenshot-list-width:calc(2 * var(--thumbnail-margin-horizontal) + var(--screenshot-width))}.video-screenshot-container,.video-screenshot-container *{transition:.2s ease-out}.video-screenshot-batch{position:fixed;bottom:var(--thumbnail-margin-vertical);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:8px;font-size:11pt;cursor:pointer;outline:0!important;padding:8px 12px;display:flex;justify-content:center;align-items:center;flex-grow:1}.video-screenshot-batch button:not(:last-child){margin-right:16px}.video-screenshot-batch button i{font-size:14pt;margin-right:4px}.video-screenshot-list{position:fixed;top:0;right:0;z-index:20000;margin:var(--thumbnail-margin-vertical) 0;max-height:calc(100% - 2 * var(--thumbnail-margin-vertical) - 58px);width:var(--screenshot-list-width);background-color:#000c;border-radius:8px;overflow:auto;scrollbar-width:none!important}.video-screenshot-list::-webkit-scrollbar{height:0!important;width:0!important}.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))}@keyframes spinner{to{transform:translate(-50%,-50%) rotate(360deg)}}.video-screenshot-thumbnail{margin:var(--thumbnail-margin-vertical) var(--thumbnail-margin-horizontal);position:relative;transition:.35s cubic-bezier(.18,.89,.32,1.28);width:var(--screenshot-width);height:var(--screenshot-height);background-color:#000;display:flex;justify-content:center;align-items:center}.video-screenshot-thumbnail img{max-width:var(--screenshot-width);max-height:var(--screenshot-height);display:block;background-color:#000}.video-screenshot-thumbnail .loading::before{content:"";box-sizing:border-box;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(0);width:24px;height:24px;border-radius:50%;border:3px solid #8888;border-top-color:var(--theme-color);animation:.6s linear infinite spinner}.video-screenshot-thumbnail.video-screenshot-list-leave-active{position:absolute;transition:.35s cubic-bezier(.6,-.28,.74,.05)}.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 .mask .time{color:#fff;position:absolute;bottom:4px;left:8px;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:0!important}.video-screenshot-thumbnail:hover .mask{opacity:1} |