aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-03-29 16:28:07 +0200
committerChocobozzz <me@florianbigard.com>2018-04-03 12:06:28 +0200
commit6b9af1293621a81564296ead6f12f5e70eafbca2 (patch)
treeba8b96d8e216cb97773485b6f53b43247b86fc93
parente993ecb3b761bba8fba2b8329270ae904bd3a0d7 (diff)
downloadPeerTube-6b9af1293621a81564296ead6f12f5e70eafbca2.tar.gz
PeerTube-6b9af1293621a81564296ead6f12f5e70eafbca2.tar.zst
PeerTube-6b9af1293621a81564296ead6f12f5e70eafbca2.zip
Add opacity effect on control bar icons
-rw-r--r--client/src/assets/player/peertube-videojs-plugin.ts4
-rw-r--r--client/src/sass/video-js-custom.scss37
2 files changed, 36 insertions, 5 deletions
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index 4843e3d8a..22cb27da3 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -126,6 +126,10 @@ class ResolutionMenuButton extends MenuButton {
126 buildCSSClass () { 126 buildCSSClass () {
127 return super.buildCSSClass() + ' vjs-resolution-button' 127 return super.buildCSSClass() + ' vjs-resolution-button'
128 } 128 }
129
130 buildWrapperCSSClass () {
131 return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
132 }
129} 133}
130MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton) 134MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
131 135
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 4ef1693b5..2fa3527a8 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -1,7 +1,7 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4$primary-foreground-color: #fff; 4$primary-foreground-color: #eee;
5$primary-foreground-opacity: 0.9; 5$primary-foreground-opacity: 0.9;
6$primary-foreground-opacity-hover: 1; 6$primary-foreground-opacity-hover: 1;
7$primary-background-color: #000; 7$primary-background-color: #000;
@@ -13,7 +13,7 @@ $slider-bg-color: lighten($primary-background-color, 33%);
13 13
14.video-js.vjs-peertube-skin { 14.video-js.vjs-peertube-skin {
15 font-size: $font-size; 15 font-size: $font-size;
16 color: $primary-foreground-color; 16 color: #fff;
17 17
18 .vjs-dock-text { 18 .vjs-dock-text {
19 padding-right: 10px; 19 padding-right: 10px;
@@ -109,8 +109,14 @@ $slider-bg-color: lighten($primary-background-color, 33%);
109 } 109 }
110 } 110 }
111 111
112 .vjs-play-progress .vjs-time-tooltip { 112 .vjs-play-progress {
113 display: none; 113 &::before:hover {
114 top: -0.372em;
115 }
116
117 .vjs-time-tooltip {
118 display: none;
119 }
114 } 120 }
115 121
116 .vjs-load-progress { 122 .vjs-load-progress {
@@ -129,6 +135,28 @@ $slider-bg-color: lighten($primary-background-color, 33%);
129 .vjs-control-bar { 135 .vjs-control-bar {
130 height: $control-bar-height; 136 height: $control-bar-height;
131 137
138 .vjs-progress-control,
139 .vjs-play-control,
140 .vjs-playback-rate,
141 .vjs-mute-control,
142 .vjs-volume-control,
143 .vjs-resolution-control,
144 .vjs-fullscreen-control
145 {
146 opacity: $primary-foreground-opacity;
147 transition: opacity .1s;
148
149 &:hover {
150 opacity: $primary-foreground-opacity-hover;
151 }
152 }
153
154 .vjs-current-time,
155 .vjs-duration,
156 .vjs-peertube {
157 color: $primary-foreground-color;
158 }
159
132 .vjs-progress-control { 160 .vjs-progress-control {
133 bottom: 34px; 161 bottom: 34px;
134 width: 100%; 162 width: 100%;
@@ -169,7 +197,6 @@ $slider-bg-color: lighten($primary-background-color, 33%);
169 font-size: $font-size; 197 font-size: $font-size;
170 display: inline-block; 198 display: inline-block;
171 padding: 0; 199 padding: 0;
172
173 .vjs-duration-display { 200 .vjs-duration-display {
174 line-height: calc(#{$control-bar-height} + 1px); 201 line-height: calc(#{$control-bar-height} + 1px);
175 } 202 }