Fix styles of player buttons

This commit is contained in:
the1812 2019-09-01 22:54:55 +08:00
parent ccbfe1257f
commit c3d9d0561d
6 changed files with 13 additions and 10 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 @@
.frame-playback{display:none!important;height:100%;align-items:center;padding-left:4px;cursor:pointer;filter:brightness(0) invert(1)!important}.frame-playback.touch{padding-left:8px}.frame-playback.touch span{display:flex;align-items:center}.bilibili-player-video-control-bottom .frame-playback{display:flex!important}.frame-playback i{transition:.4s cubic-bezier(.18,.89,.32,1.28);opacity:.9}.frame-playback:not(.touch) i{margin-top:-2px}.bilibili-player.mode-fullscreen .frame-playback span,.bilibili-player.mode-webfullscreen .frame-playback span{transform:scale(1.2)}.bilibili-player.mode-fullscreen .frame-playback:not(.touch) i,.bilibili-player.mode-webfullscreen .frame-playback:not(.touch) i{margin-top:2px}.bilibili-player.mode-webfullscreen .frame-playback{margin-left:8px}.bilibili-player.mode-webfullscreen .frame-playback.touh{margin-left:16px}.frame-playback.prev-frame i{transform:scale(1.3) rotate(-90deg)}.frame-playback.prev-frame:hover i{transform:scale(1.4) rotate(-90deg);opacity:1}.frame-playback.prev-frame:active i{transform:scale(1.25) rotate(-90deg);opacity:1}.frame-playback.next-frame i{transform:scale(1.3) rotate(90deg)}.frame-playback.next-frame:hover i{transform:scale(1.4) rotate(90deg);opacity:1}.frame-playback.next-frame:active i{transform:scale(1.25) rotate(90deg);opacity:1}
.frame-playback{display:none!important;height:100%;align-items:center;padding-left:4px;cursor:pointer;filter:brightness(0) invert(1)!important}.frame-playback.touch{padding-left:8px}.frame-playback.touch span{display:flex;align-items:center}.bilibili-player-video-control-bottom .frame-playback{display:flex!important}.frame-playback i{transition:.4s cubic-bezier(.18,.89,.32,1.28);opacity:.9}.frame-playback:not(.touch) i{margin-top:-2px}.bilibili-player.mode-fullscreen .frame-playback span,.bilibili-player.mode-webfullscreen .frame-playback span{transform:scale(1.2)}.bilibili-player.mode-fullscreen .frame-playback:not(.touch) i,.bilibili-player.mode-webfullscreen .frame-playback:not(.touch) i{margin-top:2px}.bilibili-player.mode-fullscreen .frame-playback,.bilibili-player.mode-webfullscreen .frame-playback{margin-left:8px}.bilibili-player.mode-fullscreen .frame-playback.touch,.bilibili-player.mode-webfullscreen .frame-playback.touch{margin-left:16px}.frame-playback.prev-frame i{transform:scale(1.3) rotate(-90deg)}.frame-playback.prev-frame:hover i{transform:scale(1.4) rotate(-90deg);opacity:1}.frame-playback.prev-frame:active i{transform:scale(1.25) rotate(-90deg);opacity:1}.frame-playback.next-frame i{transform:scale(1.3) rotate(90deg)}.frame-playback.next-frame:hover i{transform:scale(1.4) rotate(90deg);opacity:1}.frame-playback.next-frame:active i{transform:scale(1.25) rotate(90deg);opacity:1}

View File

@ -1 +1 @@
.video-take-screenshot{padding:0 4px 0 12px;height:100%;cursor:pointer;display:none!important}.video-take-screenshot.touch{padding:0 6px 0 18px}.bilibili-player-video-control-bottom .video-take-screenshot{display:flex!important}.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: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: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:.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:#000}.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}@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(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: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:0!important}
.video-take-screenshot{padding:0 4px 0 12px;height:100%;cursor:pointer;display:none!important}.video-take-screenshot.touch{padding:0 6px 0 10px;margin-left:12px}.bilibili-player-video-control-bottom .video-take-screenshot{display:flex!important}.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: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: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:.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:#000}.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}@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(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: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:0!important}

View File

@ -39,11 +39,13 @@
{
margin-top: 2px;
}
.bilibili-player.mode-fullscreen .frame-playback,
.bilibili-player.mode-webfullscreen .frame-playback
{
margin-left: 8px;
}
.bilibili-player.mode-webfullscreen .frame-playback.touh
.bilibili-player.mode-fullscreen .frame-playback.touch,
.bilibili-player.mode-webfullscreen .frame-playback.touch
{
margin-left: 16px;
}

View File

@ -7,7 +7,8 @@
}
.video-take-screenshot.touch
{
padding: 0 6px 0 18px;
padding: 0 6px 0 10px;
margin-left: 12px;
}
.bilibili-player-video-control-bottom .video-take-screenshot
{