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

Add opacity effect on control bar icons

This commit is contained in:
Chocobozzz 2018-03-29 16:28:07 +02:00
parent e993ecb3b7
commit 6b9af12936
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 36 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/assets/player/peertube-videojs-plugin.ts
View File

@ -126,6 +126,10 @@ class ResolutionMenuButton extends MenuButton {
buildCSSClass () { buildCSSClass () {
return super.buildCSSClass() + ' vjs-resolution-button' return super.buildCSSClass() + ' vjs-resolution-button'
} }
buildWrapperCSSClass () {
return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
}
} }
MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton) MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)

37
client/src/sass/video-js-custom.scss
View File

@ -1,7 +1,7 @@
@import '_variables'; @import '_variables';
@import '_mixins'; @import '_mixins';
$primary-foreground-color: #fff; $primary-foreground-color: #eee;
$primary-foreground-opacity: 0.9; $primary-foreground-opacity: 0.9;
$primary-foreground-opacity-hover: 1; $primary-foreground-opacity-hover: 1;
$primary-background-color: #000; $primary-background-color: #000;
@ -13,7 +13,7 @@ $slider-bg-color: lighten($primary-background-color, 33%);
.video-js.vjs-peertube-skin { .video-js.vjs-peertube-skin {
font-size: $font-size; font-size: $font-size;
color: $primary-foreground-color; color: #fff;
.vjs-dock-text { .vjs-dock-text {
padding-right: 10px; padding-right: 10px;
@ -109,8 +109,14 @@ $slider-bg-color: lighten($primary-background-color, 33%);
} }
} }
.vjs-play-progress .vjs-time-tooltip { .vjs-play-progress {
display: none; &::before:hover {
top: -0.372em;
}
.vjs-time-tooltip {
display: none;
}
} }
.vjs-load-progress { .vjs-load-progress {
@ -129,6 +135,28 @@ $slider-bg-color: lighten($primary-background-color, 33%);
.vjs-control-bar { .vjs-control-bar {
height: $control-bar-height; height: $control-bar-height;
.vjs-progress-control,
.vjs-play-control,
.vjs-playback-rate,
.vjs-mute-control,
.vjs-volume-control,
.vjs-resolution-control,
.vjs-fullscreen-control
{
opacity: $primary-foreground-opacity;
transition: opacity .1s;
&:hover {
opacity: $primary-foreground-opacity-hover;
}
}
.vjs-current-time,
.vjs-duration,
.vjs-peertube {
color: $primary-foreground-color;
}
.vjs-progress-control { .vjs-progress-control {
bottom: 34px; bottom: 34px;
width: 100%; width: 100%;
@ -169,7 +197,6 @@ $slider-bg-color: lighten($primary-background-color, 33%);
font-size: $font-size; font-size: $font-size;
display: inline-block; display: inline-block;
padding: 0; padding: 0;
.vjs-duration-display { .vjs-duration-display {
line-height: calc(#{$control-bar-height} + 1px); line-height: calc(#{$control-bar-height} + 1px);
} }