Bilibili-Evolved/registry/lib/components/touch/player-control/player-control.scss
2023-06-02 22:19:51 +08:00

183 lines
4.7 KiB
SCSS

@import 'common';
@mixin replace-with-icon() {
display: block;
width: 36px;
color: #eee;
font: normal normal normal 20px/1 'Material Design Icons';
text-rendering: auto;
line-height: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.bilibili-player {
body.touch-player-control & {
* {
-webkit-tap-highlight-color: transparent !important;
}
.bilibili-player-area {
.bilibili-player-video-control-wrap {
padding: 0 !important;
.bilibili-player-video-btn {
height: 100% !important;
padding-left: 2px !important;
padding-right: 2px !important;
&.bilibili-player-video-btn-start {
padding-left: 22px !important;
}
&.bilibili-player-video-btn-fullscreen {
padding-right: 18px !important;
}
}
.bilibili-player-video-btn-pagelist {
width: 36px !important;
.bilibili-player-video-btn-name {
display: none !important;
}
&::before {
content: '\F0279';
@include replace-with-icon();
}
}
.bilibili-player-video-btn-speed {
width: 36px !important;
&-name {
display: none !important;
}
&::before {
content: '\F08FF';
@include replace-with-icon();
}
}
}
#bilibili_pbp_pin {
right: 0 !important;
}
}
}
@include on-fullscreen('.touch-player-control') {
.bilibili-player-area {
.bilibili-player-video-control-bottom-center {
padding: 0 12px !important;
}
.bilibili-player-video-btn {
flex-shrink: 0 !important;
flex-basis: 48px !important;
}
.bilibili-player-video-btn-speed,
.bilibili-player-video-btn-pagelist {
width: 54px !important;
&::before {
width: 50px;
font-size: 26px;
}
}
.bilibili-player-video-btn-start {
padding-top: 0 !important;
// height: 32px !important;
}
.bilibili-player-video-danmaku-switch {
// width: 20px !important;
padding-left: 0 !important;
}
}
}
}
.bpx-player-video-area {
body.touch-player-control & {
.squirtle-controller {
height: 48px !important;
.squirtle-controller-wrap {
height: 30px !important;
padding: 14px 6px 4px !important;
.squirtle-play-wrap {
padding-left: 10px !important;
}
.squirtle-pagelist-wrap {
width: 36px !important;
.squirtle-select-result {
display: none !important;
}
.squirtle-video-pagelist::before {
content: '\F0279';
@include replace-with-icon();
}
}
.squirtle-speed-wrap {
width: 36px !important;
.squirtle-select-result {
display: none !important;
}
.squirtle-video-speed::before {
content: '\F08FF';
@include replace-with-icon();
}
}
}
.squirtle-high-energy.ease {
bottom: 2px !important;
}
.squirtle-high-energy,
.squirtle-progress-common {
width: 100% !important;
margin: 0 !important;
}
#bilibili_pbp_pin {
right: 0 !important;
}
}
.bpx-player-control-top,
.bpx-player-control-bottom {
padding: 0 !important;
}
.bpx-player-control-bottom-left > :first-child {
padding-left: 12px !important;
}
.bpx-player-control-bottom-right > :last-child {
padding-right: 12px !important;
}
.bpx-player-pbp {
padding: 0 !important;
left: 0 !important;
width: 100% !important;
}
.bpx-player-ctrl-btn {
height: 100% !important;
padding-left: 2px !important;
padding-right: 2px !important;
}
}
@include on-fullscreen('.touch-player-control') {
.squirtle-controller {
height: 72px !important;
.squirtle-controller-wrap {
height: 50px !important;
padding: 16px 6px 0 !important;
.squirtle-sendbar-wrap {
align-items: center !important;
}
.squirtle-pagelist-wrap,
.squirtle-speed-wrap {
width: 54px !important;
.squirtle-video-pagelist,
.squirtle-video-speed {
&::before {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
font-size: 26px;
}
}
}
}
}
}
}
// 适配控制栏着色
.bpx-player-control-bottom.bpx-player-control-bottom::before {
width: 100%;
}