aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/include/_mixins.scss9
-rw-r--r--client/src/sass/video-js-custom.scss39
2 files changed, 33 insertions, 15 deletions
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index eb3b1d283..e1b1bb32c 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -7,6 +7,15 @@
7 } 7 }
8} 8}
9 9
10@mixin disable-outline {
11 outline: none;
12
13 &::-moz-focus-inner {
14 border: 0;
15 padding: 0
16 }
17}
18
10@mixin peertube-input-text($width) { 19@mixin peertube-input-text($width) {
11 display: inline-block; 20 display: inline-block;
12 height: $button-height; 21 height: $button-height;
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 3dfad5ff6..88af9cbc5 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -1,4 +1,6 @@
1@charset "utf-8";// Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin 1@import '_variables';
2@import '_mixins';
3
2$primary-foreground-color: #fff; 4$primary-foreground-color: #fff;
3$primary-background-color: #000; 5$primary-background-color: #000;
4$font-size: 13px; 6$font-size: 13px;
@@ -139,7 +141,8 @@ $control-bar-height: 34px;
139 } 141 }
140 142
141 .vjs-play-control { 143 .vjs-play-control {
142 outline: 0; 144 @include disable-outline;
145
143 font-size: $font-size; 146 font-size: $font-size;
144 padding: 0 17px; 147 padding: 0 17px;
145 margin-right: 5px; 148 margin-right: 5px;
@@ -220,16 +223,24 @@ $control-bar-height: 34px;
220 223
221 .vjs-playback-rate { 224 .vjs-playback-rate {
222 font-size: 10px; 225 font-size: 10px;
223 margin-right: 50px; 226 width: 37px !important;
224 227
225 .vjs-playback-rate-value { 228 .vjs-playback-rate-value {
226 font-size: 13px; 229 font-size: 13px;
227 line-height: $control-bar-height; 230 line-height: $control-bar-height;
228 } 231 }
232
233 .vjs-menu .vjs-menu-content {
234 width: 37px !important;
235 }
229 } 236 }
230 237
231 .vjs-mute-control { 238 .vjs-mute-control {
232 outline: 0; 239 @include disable-outline;
240
241 line-height: $control-bar-height;
242 padding: 0;
243 width: 30px;
233 244
234 .vjs-icon-placeholder { 245 .vjs-icon-placeholder {
235 display: inline-block; 246 display: inline-block;
@@ -250,12 +261,9 @@ $control-bar-height: 34px;
250 } 261 }
251 } 262 }
252 263
253 .vjs-volume-menu-button, 264 .vjs-volume-control {
254 .vjs-volume-panel { 265 width: 30px;
255 width: 6em; 266 margin: 0;
256 position: absolute;
257 right: 0;
258 margin-right: 65px;
259 } 267 }
260 268
261 .vjs-volume-bar { 269 .vjs-volume-bar {
@@ -313,8 +321,9 @@ $control-bar-height: 34px;
313 } 321 }
314 322
315 .vjs-fullscreen-control { 323 .vjs-fullscreen-control {
324 @include disable-outline;
325
316 width: 37px; 326 width: 37px;
317 outline: 0;
318 327
319 .vjs-icon-placeholder { 328 .vjs-icon-placeholder {
320 display: inline-block; 329 display: inline-block;
@@ -339,7 +348,7 @@ $control-bar-height: 34px;
339 line-height: $control-bar-height; 348 line-height: $control-bar-height;
340 position: absolute; 349 position: absolute;
341 top: 0; 350 top: 0;
342 left: 4px; 351 left: 0;
343 width: 100%; 352 width: 100%;
344 height: 100%; 353 height: 100%;
345 text-align: center; 354 text-align: center;
@@ -348,16 +357,16 @@ $control-bar-height: 34px;
348 } 357 }
349 358
350 .vjs-resolution-button { 359 .vjs-resolution-button {
351 outline: 0 !important; 360 @include disable-outline;
352 } 361 }
353 362
354 .vjs-menu { 363 .vjs-menu {
355 top: 20px; 364 top: 20px;
365 left: 0;
356 366
357 .vjs-menu-content { 367 .vjs-menu-content {
358 width: 50px; 368 width: 50px;
359 left: 50%; /* Center the menu, in it's parent */ 369 bottom: 20px;
360 margin-left: -21px;
361 } 370 }
362 371
363 li { 372 li {