Use on-fullscreen mixin (#2484)

This commit is contained in:
the1812 2021-11-14 21:21:22 +08:00
parent 379af9a05e
commit 1571d34a4f
7 changed files with 47 additions and 51 deletions

File diff suppressed because one or more lines are too long

View File

@ -72,6 +72,8 @@ export default Vue.extend({
</script>
<style lang="scss">
@import "common";
$navbar-height: 50px;
html {
--navbar-height: #{$navbar-height};
@ -139,8 +141,7 @@ body.fixed-navbar {
justify-content: center;
line-height: normal;
body.player-mode-webfullscreen &,
body.player-fullscreen-fix & {
@include on-fullscreen {
z-index: 1;
}
// &:not(.fill) .custom-navbar-iconfont {

View File

@ -1,3 +1,5 @@
@import "common";
@mixin pbp {
#bilibili_pbp,
#bilibili_pbp_canvas {
@ -39,8 +41,7 @@
}
}
@media screen and (min-width: 750px) {
body.player-fullscreen-fix &,
body.player-mode-webfullscreen & {
@include on-fullscreen {
.bilibili-player-video-control {
#bilibili_pbp,
#bilibili_pbp_canvas {

View File

@ -1,3 +1,5 @@
@import "common";
@mixin replace-with-icon() {
display: block;
width: 36px;
@ -48,6 +50,32 @@ body.touch-player-control {
right: 0 !important;
}
}
@include on-fullscreen {
.squirtle-controller {
height: 72px !important;
.squirtle-controller-wrap {
height: 56px !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;
}
}
}
}
}
}
}
.bilibili-player {
* {
@ -92,38 +120,7 @@ body.touch-player-control {
right: 0 !important;
}
}
}
&.player-fullscreen-fix,
&.player-mode-webfullscreen {
.bpx-player-video-area {
.squirtle-controller {
height: 72px !important;
.squirtle-controller-wrap {
height: 56px !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;
}
}
}
}
}
}
.bilibili-player {
@include on-fullscreen {
.bilibili-player-area {
.bilibili-player-video-control-bottom-center {
padding: 0 12px !important;

View File

@ -1,3 +1,5 @@
@import "common";
.bilibili-player-video-control {
&-mask {
background: transparent !important;
@ -7,6 +9,11 @@
margin: 5px 0 0 0 !important;
padding: 9px 0 0 !important;
height: 30px !important;
@include on-fullscreen {
margin: -2px 0 0 0 !important;
padding: 13px 0 0 !important;
height: 45px !important;
}
}
}
body {
@ -15,12 +22,4 @@ body {
background: rgba(0, 0, 0, var(--video-control-opacity)) !important;
}
}
&.player-fullscreen-fix,
&.player-mode-webfullscreen {
.bilibili-player-video-control-bottom {
margin: -2px 0 0 0 !important;
padding: 13px 0 0 !important;
height: 45px !important;
}
}
}

View File

@ -116,8 +116,7 @@ export default {
z-index: 1002;
transform: translateX(calc(-50% * var(--direction))) translateY(-50%);
body.player-mode-webfullscreen &,
body.player-fullscreen-fix & {
@include on-fullscreen {
z-index: 1;
}
& > * {

View File

@ -61,8 +61,7 @@ export default Vue.extend({
height: $size;
color: #fff;
fill: #fff;
body.player-fullscreen-fix &,
body.player-mode-webfullscreen & {
@include on-fullscreen {
$size: 28px;
font-size: $size;
width: $size;