interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve control bar responsive

This commit is contained in:
Chocobozzz 2024-10-24 10:51:20 +02:00
parent 70ee15d3aa
commit 05b54833ca
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 15 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/sass/player/_player-variables.scss
View File

@ -15,7 +15,7 @@ $control-bar-slider-top: -15px;
$control-bar-font-size: 14px; $control-bar-font-size: 14px;
$control-bar-play-font-size: 34px; $control-bar-play-font-size: 34px;
$control-bar-next-previous-play-font-size: 14px; $control-bar-next-previous-play-font-size: 14px;
$control-bar-button-width: 38px; $control-bar-button-width: 34px;
$control-bar-total-height: $control-bar-height - $control-bar-slider-top; $control-bar-total-height: $control-bar-height - $control-bar-slider-top;
@ -25,7 +25,4 @@ $progress-margin: 10px;
$dock-padding: 20px; $dock-padding: 20px;
$first-control-bar-element-margin-left: 10px;
$first-control-bar-element-margin-left-small-width: 5px;
$assets-path: '../../assets/' !default; $assets-path: '../../assets/' !default;

32
client/src/sass/player/control-bar.scss
View File

@ -41,6 +41,8 @@ $chapter-marker-size: 9px;
} }
.video-js.vjs-peertube-skin .vjs-control-bar { .video-js.vjs-peertube-skin .vjs-control-bar {
--first-last-element-margin: 10px;
z-index: 100; z-index: 100;
height: $control-bar-height; height: $control-bar-height;
@ -49,13 +51,12 @@ $chapter-marker-size: 9px;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
transition: visibility 0.3s, opacity 0.3s !important; transition: visibility 0.3s, opacity 0.3s !important;
> button:not(.vjs-hidden):first-child, > button:not(.vjs-hidden):first-child {
> button.vjs-hidden + button:not(.vjs-hidden) { @include margin-left(var(--first-last-element-margin));
@include margin-left($first-control-bar-element-margin-left);
} }
> button:last-child { > button:last-child {
@include margin-right($first-control-bar-element-margin-left); @include margin-right(var(--first-last-element-margin));
} }
.vjs-progress-control, .vjs-progress-control,
@ -398,7 +399,7 @@ $chapter-marker-size: 9px;
.vjs-settings { .vjs-settings {
cursor: pointer; cursor: pointer;
width: $control-bar-button-width - 4px; width: $control-bar-button-width;
@include disable-outline; @include disable-outline;
@ -437,8 +438,8 @@ $chapter-marker-size: 9px;
.vjs-icon-placeholder { .vjs-icon-placeholder {
transition: transform 0.2s ease; transition: transform 0.2s ease;
display: inline-block; display: inline-block;
width: $control-bar-icon-size; width: $control-bar-icon-size - 4px;
height: $control-bar-icon-size; height: $control-bar-icon-size - 4px;
vertical-align: middle; vertical-align: middle;
background: url('#{$assets-path}/player/images/theater.svg') no-repeat; background: url('#{$assets-path}/player/images/theater.svg') no-repeat;
background-size: contain; background-size: contain;
@ -452,7 +453,7 @@ $chapter-marker-size: 9px;
.vjs-caption-toggle-control { .vjs-caption-toggle-control {
// Redefined if the player parent has captions class // Redefined if the player parent has captions class
display: none; display: none;
width: $control-bar-button-width - 4px; width: $control-bar-button-width;
&, &,
&:hover { &:hover {
@ -476,6 +477,7 @@ $chapter-marker-size: 9px;
.vjs-fullscreen-control { .vjs-fullscreen-control {
width: $control-bar-button-width; width: $control-bar-button-width;
margin-inline-start: 2px;
@include disable-outline; @include disable-outline;
@ -522,7 +524,7 @@ $chapter-marker-size: 9px;
} }
.vjs-mute-control { .vjs-mute-control {
@include margin(0, 5px, 0, 5px); @include margin(0, 4px, 0, 4px);
} }
.vjs-peertube { .vjs-peertube {
@ -549,21 +551,15 @@ $chapter-marker-size: 9px;
} }
.video-js.vjs-peertube-skin.vjs-size-350 .vjs-control-bar { .video-js.vjs-peertube-skin.vjs-size-350 .vjs-control-bar {
--first-last-element-margin: 5px;
.vjs-next-video, .vjs-next-video,
.vjs-previous-video { .vjs-previous-video {
display: none !important; display: none !important;
} }
.vjs-peertube-link { .vjs-peertube-link {
padding: 0 !important; display: none !important;
}
> button:first-child {
@include margin-left($first-control-bar-element-margin-left-small-width);
}
> button:last-child {
@include margin-right($first-control-bar-element-margin-left-small-width);
} }
.vjs-play-control { .vjs-play-control {