mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Use on-fullscreen mixin (#2484)
This commit is contained in:
parent
379af9a05e
commit
1571d34a4f
File diff suppressed because one or more lines are too long
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
& > * {
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user