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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "common";
|
||||||
|
|
||||||
$navbar-height: 50px;
|
$navbar-height: 50px;
|
||||||
html {
|
html {
|
||||||
--navbar-height: #{$navbar-height};
|
--navbar-height: #{$navbar-height};
|
||||||
@ -139,8 +141,7 @@ body.fixed-navbar {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
|
|
||||||
body.player-mode-webfullscreen &,
|
@include on-fullscreen {
|
||||||
body.player-fullscreen-fix & {
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
// &:not(.fill) .custom-navbar-iconfont {
|
// &:not(.fill) .custom-navbar-iconfont {
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
@import "common";
|
||||||
|
|
||||||
@mixin pbp {
|
@mixin pbp {
|
||||||
#bilibili_pbp,
|
#bilibili_pbp,
|
||||||
#bilibili_pbp_canvas {
|
#bilibili_pbp_canvas {
|
||||||
@ -39,8 +41,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media screen and (min-width: 750px) {
|
@media screen and (min-width: 750px) {
|
||||||
body.player-fullscreen-fix &,
|
@include on-fullscreen {
|
||||||
body.player-mode-webfullscreen & {
|
|
||||||
.bilibili-player-video-control {
|
.bilibili-player-video-control {
|
||||||
#bilibili_pbp,
|
#bilibili_pbp,
|
||||||
#bilibili_pbp_canvas {
|
#bilibili_pbp_canvas {
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
@import "common";
|
||||||
|
|
||||||
@mixin replace-with-icon() {
|
@mixin replace-with-icon() {
|
||||||
display: block;
|
display: block;
|
||||||
width: 36px;
|
width: 36px;
|
||||||
@ -48,6 +50,32 @@ body.touch-player-control {
|
|||||||
right: 0 !important;
|
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 {
|
.bilibili-player {
|
||||||
* {
|
* {
|
||||||
@ -92,38 +120,7 @@ body.touch-player-control {
|
|||||||
right: 0 !important;
|
right: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
@include on-fullscreen {
|
||||||
|
|
||||||
&.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 {
|
|
||||||
.bilibili-player-area {
|
.bilibili-player-area {
|
||||||
.bilibili-player-video-control-bottom-center {
|
.bilibili-player-video-control-bottom-center {
|
||||||
padding: 0 12px !important;
|
padding: 0 12px !important;
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
@import "common";
|
||||||
|
|
||||||
.bilibili-player-video-control {
|
.bilibili-player-video-control {
|
||||||
&-mask {
|
&-mask {
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
@ -7,6 +9,11 @@
|
|||||||
margin: 5px 0 0 0 !important;
|
margin: 5px 0 0 0 !important;
|
||||||
padding: 9px 0 0 !important;
|
padding: 9px 0 0 !important;
|
||||||
height: 30px !important;
|
height: 30px !important;
|
||||||
|
@include on-fullscreen {
|
||||||
|
margin: -2px 0 0 0 !important;
|
||||||
|
padding: 13px 0 0 !important;
|
||||||
|
height: 45px !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
@ -15,12 +22,4 @@ body {
|
|||||||
background: rgba(0, 0, 0, var(--video-control-opacity)) !important;
|
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;
|
z-index: 1002;
|
||||||
transform: translateX(calc(-50% * var(--direction))) translateY(-50%);
|
transform: translateX(calc(-50% * var(--direction))) translateY(-50%);
|
||||||
|
|
||||||
body.player-mode-webfullscreen &,
|
@include on-fullscreen {
|
||||||
body.player-fullscreen-fix & {
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
& > * {
|
& > * {
|
||||||
|
|||||||
@ -61,8 +61,7 @@ export default Vue.extend({
|
|||||||
height: $size;
|
height: $size;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
fill: #fff;
|
fill: #fff;
|
||||||
body.player-fullscreen-fix &,
|
@include on-fullscreen {
|
||||||
body.player-mode-webfullscreen & {
|
|
||||||
$size: 28px;
|
$size: 28px;
|
||||||
font-size: $size;
|
font-size: $size;
|
||||||
width: $size;
|
width: $size;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user