aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/video-js-custom.scss
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-03-29 16:01:50 +0200
committerChocobozzz <me@florianbigard.com>2018-04-03 12:06:28 +0200
commite993ecb3b761bba8fba2b8329270ae904bd3a0d7 (patch)
tree6950ae0d3facef3f552ef49361fbc05a9590fe0e /client/src/sass/video-js-custom.scss
parent779f000083145d8f1cc9b28205db53a5ead4bea5 (diff)
downloadPeerTube-e993ecb3b761bba8fba2b8329270ae904bd3a0d7.tar.gz
PeerTube-e993ecb3b761bba8fba2b8329270ae904bd3a0d7.tar.zst
PeerTube-e993ecb3b761bba8fba2b8329270ae904bd3a0d7.zip
Improve player progress bar
Diffstat (limited to 'client/src/sass/video-js-custom.scss')
-rw-r--r--client/src/sass/video-js-custom.scss27
1 files changed, 14 insertions, 13 deletions
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 44478226b..4ef1693b5 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -2,10 +2,15 @@
2@import '_mixins'; 2@import '_mixins';
3 3
4$primary-foreground-color: #fff; 4$primary-foreground-color: #fff;
5$primary-foreground-opacity: 0.9;
6$primary-foreground-opacity-hover: 1;
5$primary-background-color: #000; 7$primary-background-color: #000;
8
6$font-size: 13px; 9$font-size: 13px;
7$control-bar-height: 34px; 10$control-bar-height: 34px;
8 11
12$slider-bg-color: lighten($primary-background-color, 33%);
13
9.video-js.vjs-peertube-skin { 14.video-js.vjs-peertube-skin {
10 font-size: $font-size; 15 font-size: $font-size;
11 color: $primary-foreground-color; 16 color: $primary-foreground-color;
@@ -36,8 +41,6 @@ $control-bar-height: 34px;
36 line-height: $control-bar-height; 41 line-height: $control-bar-height;
37 } 42 }
38 43
39 .vjs-mouse-display:before,
40 .vjs-play-progress:before,
41 .vjs-volume-level:before { 44 .vjs-volume-level:before {
42 content: ''; /* Remove Circle From Progress Bar */ 45 content: ''; /* Remove Circle From Progress Bar */
43 } 46 }
@@ -96,28 +99,26 @@ $control-bar-height: 34px;
96 background-color: rgba($primary-background-color, 0.5); 99 background-color: rgba($primary-background-color, 0.5);
97 } 100 }
98 101
99 $slider-bg-color: lighten($primary-background-color, 33%);
100
101 .vjs-slider { 102 .vjs-slider {
102 background-color: rgba(255, 255, 255, .3); 103 background-color: rgba(255, 255, 255, .3);
103 border-radius: 2px; 104 border-radius: 2px;
104 height: 5px; 105 height: 5px;
106
107 .vjs-slider-bar {
108 background: $primary-foreground-color;
109 }
105 } 110 }
106 111
107 /* The slider bar color is used for the progress bar and the volume bar 112 .vjs-play-progress .vjs-time-tooltip {
108 (the first two can be removed after a fix that's coming) */ 113 display: none;
109 .vjs-volume-level,
110 .vjs-play-progress,
111 .vjs-slider-bar {
112 background: $primary-foreground-color;
113 } 114 }
114 115
115 .vjs-load-progress { 116 .vjs-load-progress {
116 background: rgba($slider-bg-color, 0.5); 117 background: rgba($slider-bg-color, 0.5);
117 }
118 118
119 .vjs-load-progress div { 119 div {
120 background: rgba($slider-bg-color, 0.75); 120 background: rgba($slider-bg-color, 0.75);
121 }
121 } 122 }
122 123
123 .vjs-poster { 124 .vjs-poster {