Bilibili-Evolved/touch/player/touch-player.css
2019-07-11 23:24:19 +08:00

475 lines
14 KiB
CSS

.touch-video-box-wrapper
{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 14;
pointer-events: none;
}
.touch-video-box
{
border-radius: 0px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.85);
position: relative;
max-width: 520px;
max-height: 240px;
border: 4px solid transparent;
transform-origin: center;
}
.touch-video-box.animation
{
transition: all 0.2s;
}
/* @supports (backdrop-filter: blur(60px)) or (-webkit-backdrop-filter: blur(60px))
{
.touch-video-box
{
background: rgba(0,0,0,0.618);
-webkit-backdrop-filter: blur(60px);
backdrop-filter: blur(60px);
}
} */
.touch-video-info
{
color: white;
font-size: 2rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
width: 100%;
}
.touch-row
{
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.touch-info
{
display: block;
color: var(--theme-color);
}
.touch-result
{
display: block;
font-size: 1.5rem;
line-height: 150%;
}
.touch-speed
{
display: block;
background: rgba(0,0,0,0.1);
padding: 0.5em;
}
.touch-progress
{
position: absolute;
bottom: 0;
left: 0;
background: var(--theme-color);
width: 100%;
transform-origin: left;
transform: scaleX(0);
height: 4px;
}
.touch-row-item
{
flex: 1 0 0;
display: none;
align-items: center;
justify-content: center;
}
.touch-row-item-wide
{
flex: 1.5 0 0;
display: flex;
align-items: center;
justify-content: center;
}
.videoshot
{
background-color: transparent;
background-image: none;
transform-origin: center;
transform: scale(0.9);
}
.adjust-closed
{
transform: rotateX(90deg) rotateY(90deg) scale(0.5);
}
.adjust-opened
{
transform: rotateX(0deg) rotateY(0deg) scale(1);
}
.touch-video-info.speed .touch-row-item
{
display: flex;
}
.touch-video-info.cancel .touch-progress,
.touch-video-info.cancel .touch-result
{
opacity: 0;
}
.disable-original-hover .bilibili-player-video-control-bottom,
.disable-original-hover .bilibili-player-video-control-mask
{
opacity: 0 !important;
visibility: hidden !important;
}
.disable-original-hover.touch-video-control-show .bilibili-player-video-control-bottom,
.disable-original-hover .bilibili-player-video-control-wrap,
.disable-original-hover.touch-video-control-show .bilibili-player-video-control-mask
{
opacity: 1 !important;
visibility: visible !important;
}
.disable-original-hover .bilibili-player-video-control-top,
.bilibili-player-video-control-top
{
left: 0 !important;
right: 0 !important;
bottom: 0px !important;
}
.bilibili-player-video-control-top,
.bilibili-player-video-progress-detail
{
bottom: 0 !important;
}
.disable-original-hover.touch-video-control-show .bilibili-player-video-control-top
{
left: 0 !important;
right: 0 !important;
bottom: 38px !important;
}
.bilibili-player-video-control-bottom
{
padding: 0 !important;
}
div.bilibili-player-video-control
{
height: 38px !important;
align-items: center !important;
}
.bilibili-player-video-btn
{
flex-grow: 1 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.bilibili-player-video-inputbar,
.bilibili-player-video-progress
{
flex-grow: 30 !important;
}
.bilibili-player-video-quality-menu
{
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.bilibili-player-iconfont-start,
.bilibili-player-iconfont-pause,
.bilibili-player-iconfont-volume,
.bilibili-player-iconfont-volume-max,
.bilibili-player-iconfont-volume-min,
.bilibili-player-iconfont-setting,
.bilibili-player-iconfont-danmaku,
.bilibili-player-iconfont-danmaku-off,
.bilibili-player-iconfont-repeat,
.bilibili-player-iconfont-widescreen,
.bilibili-player-iconfont-web-fullscreen,
.bilibili-player-iconfont-fullscreen,
.bilibili-player-iconfont-color
{
font-size: 2.5rem !important;
}
.bilibili-player-iconfont-next
{
font-size: 2rem !important;
}
.bpui-selectmenu-list,
.bilibili-player-video-danmaku-setting-wrap,
.bilibili-player-video-btn-setting-panel,
.bilibili-player.mode-fullscreen .bilibili-player-video-sendbar
{
left: unset !important;
bottom: 38px !important;
}
.bilibili-player-video-volumebar-wrp
{
left: unset !important;
}
.bilibili-player-video-control-wrap
{
padding: 0 !important;
}
.bilibili-player-video-control-bottom
{
align-items: center !important;
}
.bilibili-player-iconfont-setting,
.bilibili-player-video-btn-volume.video-state-volume-max .bilibili-player-iconfont-volume-max,
.bilibili-player-video-btn-volume.video-state-volume-min .bilibili-player-iconfont-volume-min,
.bilibili-player-video-btn-volume:not(.video-state-volume-max):not(.video-state-volume-min) .bilibili-player-iconfont-volume,
.bilibili-player-iconfont-next,
.bilibili-player-video-control-bottom-left
{
display: flex !important;
align-items: center !important;
}
.bilibili-player-video-btn-danmaku
{
flex-grow: 0 !important;
display: flex !important;
align-items: center !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-bottom-right
{
flex-grow: 1 !important;
}
.bilibili-player.mode-fullscreen .bilibili-player-video-sendbar
{
bottom: 0 !important;
}
.bilibili-player .bilibili-player-area .bilibili-player-video-control .bilibili-player-video-btn.bilibili-player-video-btn-fullscreen
{
margin-right: 0 !important;
padding-right: 8px !important;
}
.bilibili-player .bilibili-player-area .bilibili-player-video-control .bilibili-player-video-btn.bilibili-player-video-btn-start
{
padding-left: 8px !important;
flex-grow: 1.2 !important;
margin-right: 0px !important;
margin-left: 0 !important;
}
.bilibili-player .bilibili-player-area .bilibili-player-video-control .bilibili-player-video-btn
{
padding: 0 3px !important;
}
.bilibili-player .bilibili-player-area .bilibili-player-video-control-bottom,
.bilibili-player-video-control-bottom-left,
.bilibili-player .bilibili-player-area .bilibili-player-video-control-bottom-right
{
height: 100% !important;
margin: 0 !important;
}
.bilibili-player-video-btn-setting-panel-hover-bridge
{
display: none !important;
}
.disable-original-hover .bilibili-player-video-control-wrap:hover .bilibili-player-video-control-top .bilibili-player-video-progress-slider,
.disable-original-hover.bilibili-player-area.video-control-show .bilibili-player-video-control-top .bilibili-player-video-progress-slider
{
height: 2px !important;
}
.disable-original-hover.bilibili-player-area .bilibili-player-video-control .bilibili-player-video-progress-detail.show
{
bottom: 1px !important;
}
.disable-original-hover.bilibili-player-area .subtitle-position.subtitle-position-bc,
.disable-original-hover.bilibili-player-area .subtitle-position.subtitle-position-bl,
.disable-original-hover.bilibili-player-area .subtitle-position.subtitle-position-br
{
bottom: 20px !important;
}
.disable-original-hover.touch-video-control-show .subtitle-position.subtitle-position-bc,
.disable-original-hover.touch-video-control-show .subtitle-position.subtitle-position-bl,
.disable-original-hover.touch-video-control-show .subtitle-position.subtitle-position-br
{
bottom: 44px !important;
}
.bilibili-player.mode-fullscreen .disable-original-hover.touch-video-control-show .subtitle-position.subtitle-position-bc,
.bilibili-player.mode-fullscreen .disable-original-hover.touch-video-control-show .subtitle-position.subtitle-position-bl,
.bilibili-player.mode-fullscreen .disable-original-hover.touch-video-control-show .subtitle-position.subtitle-position-br,
.bilibili-player.mode-webfullscreen .disable-original-hover.touch-video-control-show .subtitle-position.subtitle-position-bc,
.bilibili-player.mode-webfullscreen .disable-original-hover.touch-video-control-show .subtitle-position.subtitle-position-bl,
.bilibili-player.mode-webfullscreen .disable-original-hover.touch-video-control-show .subtitle-position.subtitle-position-br
{
bottom: 60px !important;
}
.bilibili-player.mode-fullscreen .disable-original-hover .bilibili-player-video-control-top
{
opacity: 1 !important;
}
#bofqi *
{
-webkit-tap-highlight-color: transparent !important;
}
/*
.disable-original-hover .bilibili-player-video-interactive,
.disable-original-hover .bilibili-player-video-interactive-list
{
display: none !important;
}
.disable-original-hover.touch-video-control-show .bilibili-player-video-interactive
{
display: block !important;
opacity: 1;
position: absolute;
width: 100%;
left: 0;
bottom: 54px;
z-index: 13;
pointer-events: none;
}
.disable-original-hover.touch-video-control-show .bilibili-player-video-interactive-list
{
display: block !important;
opacity: 1;
position: relative;
width: 400px;
height: auto;
margin: 0 auto;
overflow: visible;
animation: show-list .2s;
}
.disable-original-hover.touch-video-control-show .bilibili-player-video-interactive-list .oval-list
{
position: relative;
width: auto;
transition: .6s ease-out;
margin: 0 auto;
left: 0;
}
.disable-original-hover.touch-video-control-show .bilibili-player-video-interactive-list .hover-item
{
position: fixed;
width: auto;
top: 55px;
height: 44px;
border: 1px solid hsla(0,0%,100%,.8);
background: rgba(34,34,34,.8);
}
.disable-original-hover.touch-video-control-show .bilibili-player-video-interactive-list .check
{
position: relative;
width: 50px;
height: 50px;
float: left;
fill: #fff;
cursor: pointer;
}
.disable-original-hover.touch-video-control-show .bilibili-player-video-interactive-list .bilibili-player-video-interactive-oval .big-round
{
position: absolute;
width: 32px;
height: 32px;
border: 1px solid #fff;
border-radius: 20px;
left: 8px;
top: 8px;
background: rgba(0,0,0,0.8);
z-index: 13;
}
.disable-original-hover.touch-video-control-show .bilibili-player-video-interactive-list .bilibili-player-video-interactive-oval .big-round .small
{
position: absolute;
width: 24px;
height: 24px;
left: 4px;
top: 4px;
}
.disable-original-hover.touch-video-control-show .bilibili-player-video-interactive-list .hover-item .bg
{
position: absolute;
width: 100%;
height: 44px;
background: linear-gradient(center bottom, center top, from);
}
.disable-original-hover.touch-video-control-show .bilibili-player-video-interactive-list .hover-item .text
{
max-width: 420px;
position: relative;
padding: 0 10px;
color: #fff;
font-size: 14px;
line-height: 44px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} */
@media screen and (min-width: 750px)
{
.bilibili-player.mode-fullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-bottom-center .bilibili-player-video-sendbar .bilibili-player-video-inputbar,
.bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-bottom-center .bilibili-player-video-sendbar .bilibili-player-video-inputbar
{
background: #fff1 !important;
}
.bilibili-player.mode-fullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control,
.bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control
{
height: 100% !important;
margin: 0 !important;
}
.bilibili-player.mode-fullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-bottom,
.bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-bottom
{
margin: 0 !important;
}
.bilibili-player.mode-fullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-bottom-left,
.bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-bottom-left
{
height: 100% !important;
}
.bilibili-player-video-btn.bilibili-player-video-btn-start
{
flex-grow: 0.5 !important;
}
.player .bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-top,
.player .bilibili-player.mode-fullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-top
{
left: 0 !important;
right: 0 !important;
}
.player .bilibili-player.mode-fullscreen .disable-original-hover.bilibili-player-video-control-wrap .bilibili-player-video-control-top,
.player .bilibili-player.mode-webfullscreen .disable-original-hover.bilibili-player-video-control-wrap .bilibili-player-video-control-top
{
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
}
.player .bilibili-player.mode-fullscreen .disable-original-hover.touch-video-control-show .bilibili-player-video-control-top,
.player .bilibili-player.mode-webfullscreen .disable-original-hover.touch-video-control-show .bilibili-player-video-control-top
{
left: 0 !important;
right: 0 !important;
bottom: 54px !important;
}
.mode-fullscreen .bilibili-player-area.video-control-show:not(.disable-original-hover) .bilibili-player-video-control-top,
.mode-fullscreen .bilibili-player-area.mouse-hover:not(.disable-original-hover) .bilibili-player-video-control-top,
.mode-webfullscreen .bilibili-player-area.video-control-show:not(.disable-original-hover) .bilibili-player-video-control-top,
.mode-webfullscreen .bilibili-player-area.mouse-hover:not(.disable-original-hover) .bilibili-player-video-control-top
{
left: 0 !important;
right: 0 !important;
bottom: 48px !important;
}
}