.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, .bilibili-player-video-control-top { 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; transition: all 0.2s; } .touch-row-item { flex: 1 0 0; display: flex; 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); } .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 { 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; } #bofqi * { -webkit-tap-highlight-color: transparent !important; } @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; } }