mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Use native title style
This commit is contained in:
parent
3c15b72129
commit
de5c9fbdb5
2
min/frame-playback.min.css
vendored
2
min/frame-playback.min.css
vendored
@ -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-fullscreen .frame-playback,.bilibili-player.mode-webfullscreen .frame-playback{margin-left:0}.bilibili-player.mode-fullscreen .frame-playback.touch,.bilibili-player.mode-webfullscreen .frame-playback.touch{margin-left:6px}.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;position:relative;height:100%;align-items:center;padding:0 2px;margin-left:2px;cursor:pointer}.frame-playback span{height:100%}.bilibili-player-video-control-bottom .frame-playback{display:flex!important}.frame-playback .player-tooltips.active{transition-duration:.15s;transition-delay:.15s;position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(calc(-100% - 4px));opacity:0}.frame-playback:hover .player-tooltips{opacity:1;transform:translateX(-50%) translateY(calc(-100% - 19px))}.frame-playback.touch:hover .player-tooltips{transform:translateX(-50%) translateY(calc(-100% - 12px))}.frame-playback.touch{padding:0 4px;margin-left:4px}.frame-playback.touch span{display:flex;align-items:center}.frame-playback i{color:#fff;display:block;line-height:1;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,.bilibili-player.mode-webfullscreen .frame-playback{margin-left:4px;padding:0 4px}.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:1px;line-height:inherit}.bilibili-player.mode-fullscreen .frame-playback.touch,.bilibili-player.mode-webfullscreen .frame-playback.touch{margin-left:6px}.frame-playback.next-frame i,.frame-playback.prev-frame i{transform:scale(1.3)}.frame-playback.next-frame:hover i,.frame-playback.prev-frame:hover i{transform:scale(1.4);opacity:1}.frame-playback.next-frame:active i,.frame-playback.prev-frame:active i{transform:scale(1.25);opacity:1}
|
||||
@ -1 +1 @@
|
||||
<div class="frame-playback prev-frame icons-enabled"title=上一帧><span><i class=icon-arrow></i></span></div><div class="frame-playback next-frame icons-enabled"title=下一帧><span><i class=icon-arrow></i></span></div>
|
||||
<div class="frame-playback prev-frame"><span><i class="mdi mdi-chevron-left mdi-24px"></i></span><div class="player-tooltips tip top-center animation active"><div class=tooltip>上一帧</div></div></div><div class="frame-playback next-frame"><span><i class="mdi mdi-chevron-right mdi-24px"></i></span><div class="player-tooltips tip top-center animation active"><div class=tooltip>下一帧</div></div></div>
|
||||
2
min/screenshot.min.css
vendored
2
min/screenshot.min.css
vendored
@ -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 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:11pt;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: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-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{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:24px;--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: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:11pt;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-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))}@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}
|
||||
2
min/screenshot.min.js
vendored
2
min/screenshot.min.js
vendored
File diff suppressed because one or more lines are too long
2
min/touch-player.min.css
vendored
2
min/touch-player.min.css
vendored
File diff suppressed because one or more lines are too long
@ -216,6 +216,7 @@ div.bilibili-player-video-control {
|
||||
@media screen and (min-width: 750px) {
|
||||
.bilibili-player.mode-fullscreen,
|
||||
.bilibili-player.mode-webfullscreen {
|
||||
.bilibili-player-video-btn-speed::before,
|
||||
.bilibili-player-video-btn-pagelist::before {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
@ -1,81 +0,0 @@
|
||||
.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: all .4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
opacity: 0.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: 0px;
|
||||
}
|
||||
.bilibili-player.mode-fullscreen .frame-playback.touch,
|
||||
.bilibili-player.mode-webfullscreen .frame-playback.touch
|
||||
{
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@ -1,6 +1,12 @@
|
||||
<div class="frame-playback prev-frame icons-enabled" title="上一帧">
|
||||
<span><i class="icon-arrow"></i></span>
|
||||
<div class="frame-playback prev-frame">
|
||||
<span><i class="mdi mdi-chevron-left mdi-24px"></i></span>
|
||||
<div class="player-tooltips tip top-center animation active">
|
||||
<div class="tooltip">上一帧</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="frame-playback next-frame icons-enabled" title="下一帧">
|
||||
<span><i class="icon-arrow"></i></span>
|
||||
<div class="frame-playback next-frame">
|
||||
<span><i class="mdi mdi-chevron-right mdi-24px"></i></span>
|
||||
<div class="player-tooltips tip top-center animation active">
|
||||
<div class="tooltip">下一帧</div>
|
||||
</div>
|
||||
</div>
|
||||
80
src/video/frame-playback/frame-playback.scss
Normal file
80
src/video/frame-playback/frame-playback.scss
Normal file
@ -0,0 +1,80 @@
|
||||
.frame-playback {
|
||||
display: none !important;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
padding: 0 2px;
|
||||
margin-left: 2px;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
height: 100%;
|
||||
}
|
||||
.bilibili-player-video-control-bottom & {
|
||||
display: flex !important;
|
||||
}
|
||||
.player-tooltips.active {
|
||||
transition-duration: .15s;
|
||||
transition-delay: .15s;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(calc(-100% - 4px));
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover .player-tooltips {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(calc(-100% - 19px));
|
||||
}
|
||||
&.touch:hover .player-tooltips {
|
||||
transform: translateX(-50%) translateY(calc(-100% - 12px));
|
||||
}
|
||||
&.touch {
|
||||
padding: 0 4px;
|
||||
margin-left: 4px;
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
i {
|
||||
color: #fff;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
opacity: 0.9;
|
||||
}
|
||||
&:not(.touch) i {
|
||||
margin-top: -2px;
|
||||
}
|
||||
.bilibili-player.mode-fullscreen &,
|
||||
.bilibili-player.mode-webfullscreen & {
|
||||
margin-left: 4px;
|
||||
padding: 0 4px;
|
||||
|
||||
span {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
&:not(.touch) i {
|
||||
margin-top: 1px;
|
||||
line-height: inherit;
|
||||
}
|
||||
&.touch {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
&.next-frame,
|
||||
&.prev-frame {
|
||||
i {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
&:hover i {
|
||||
transform: scale(1.4);
|
||||
opacity: 1;
|
||||
}
|
||||
&:active i {
|
||||
transform: scale(1.25);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,190 +0,0 @@
|
||||
.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;
|
||||
height: max-content;
|
||||
width: 100%;
|
||||
}
|
||||
.video-take-screenshot.touch span {
|
||||
height: 100%;
|
||||
}
|
||||
.video-take-screenshot i {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
transform: scale(1);
|
||||
opacity: 0.9;
|
||||
transition: all 0.4s cubic-bezier(0.18, 0.89, 0.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(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: 11pt;
|
||||
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 0.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: 0.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 0.6s linear infinite;
|
||||
}
|
||||
.video-screenshot-thumbnail.video-screenshot-list-leave-active {
|
||||
position: absolute;
|
||||
transition: 0.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: 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: none !important;
|
||||
}
|
||||
199
src/video/screenshot/screenshot.scss
Normal file
199
src/video/screenshot/screenshot.scss
Normal file
@ -0,0 +1,199 @@
|
||||
.video-take-screenshot {
|
||||
position: relative;
|
||||
padding: 0 6px;
|
||||
margin-left: 6px;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: none !important;
|
||||
.bilibili-player-video-control-bottom & {
|
||||
display: flex !important;
|
||||
}
|
||||
&.touch {
|
||||
padding: 0 6px;
|
||||
margin-left: 12px;
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: max-content;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
i {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
transform: scale(1);
|
||||
opacity: 0.9;
|
||||
transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
display: block;
|
||||
.bilibili-player.mode-fullscreen &,
|
||||
.bilibili-player.mode-webfullscreen & {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.player-tooltips.active {
|
||||
transition-duration: .15s;
|
||||
transition-delay: .15s;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(calc(-100% - 4px));
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover .player-tooltips {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(calc(-100% - 19px));
|
||||
}
|
||||
&.touch:hover .player-tooltips {
|
||||
transform: translateX(-50%) translateY(calc(-100% - 12px));
|
||||
}
|
||||
&:hover i {
|
||||
transform: scale(1.05);
|
||||
opacity: 1;
|
||||
}
|
||||
&: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));
|
||||
|
||||
&,
|
||||
& * {
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
button {
|
||||
background: #000c;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 10px 10px 0 0;
|
||||
font-size: 11pt;
|
||||
cursor: pointer;
|
||||
outline: 0 !important;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
i {
|
||||
font-size: 14pt;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
* {
|
||||
pointer-events: initial;
|
||||
}
|
||||
&-enter {
|
||||
opacity: 0;
|
||||
transform: translateX(var(--screenshot-width-negative));
|
||||
}
|
||||
&-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: 0.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;
|
||||
img {
|
||||
max-width: var(--screenshot-width);
|
||||
max-height: var(--screenshot-height);
|
||||
display: block;
|
||||
background-color: black;
|
||||
}
|
||||
.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 0.6s linear infinite;
|
||||
}
|
||||
&.video-screenshot-list-leave-active {
|
||||
position: absolute;
|
||||
transition: 0.35s cubic-bezier(0.6, -0.28, 0.74, 0.05);
|
||||
}
|
||||
.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;
|
||||
.time {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 8px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
&:hover .mask {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -172,8 +172,11 @@ Observer.videoChange(async () => {
|
||||
}
|
||||
|
||||
const buttonHtml = /*html*/`
|
||||
<div class="video-take-screenshot" title="截图">
|
||||
<div class="video-take-screenshot">
|
||||
<span><i class="mdi mdi-camera"></i></span>
|
||||
<div class="player-tooltips tip top-center animation active">
|
||||
<div class="tooltip">截图</div>
|
||||
</div>
|
||||
</div>`
|
||||
time.insertAdjacentHTML('afterend', buttonHtml)
|
||||
const screenshotButton = document.querySelector('.video-take-screenshot') as HTMLElement
|
||||
|
||||
Loading…
Reference in New Issue
Block a user