@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; } } } } } } }