aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/video-js-custom.scss
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass/video-js-custom.scss')
-rw-r--r--client/src/sass/video-js-custom.scss573
1 files changed, 275 insertions, 298 deletions
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 34a958764..1c5701bea 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -1,346 +1,322 @@
1// Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files 1// Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin
2.vjs-resolution-button-label { 2$primary-foreground-color: #fff;
3 font-size: 1em; 3$primary-background-color: #000;
4 line-height: 3em; 4$font-size: 13px;
5 position: absolute; 5$control-bar-height: 34px;
6 top: 0;
7 left: -1px;
8 width: 100%;
9 height: 100%;
10 text-align: center;
11 box-sizing: inherit;
12}
13
14.vjs-resolution-button {
15 outline: 0 !important;
16 6
17 .vjs-menu { 7.video-js.vjs-peertube-skin {
18 .vjs-menu-content { 8 font-size: $font-size;
19 width: 4em; 9 color: $primary-foreground-color;
20 left: 50%; /* Center the menu, in it's parent */
21 margin-left: -2em; /* half of width, to center */
22 }
23 10
24 li { 11 .vjs-button > .vjs-icon-placeholder::before {
25 text-transform: none; 12 line-height: $control-bar-height;
26 font-size: 1em;
27 }
28 } 13 }
29}
30 14
31// Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin 15 .vjs-mouse-display:before,
32 16 .vjs-play-progress:before,
33// Video JS Sublime Skin 17 .vjs-volume-level:before {
34// The following are SCSS variables to automate some of the values. 18 content: ''; /* Remove Circle From Progress Bar */
35// But don't feel limited by them. Change/replace whatever you want. 19 }
36
37// The color of icons, text, and the big play button border.
38// Try changing to #0f0
39$primary-foreground-color: #fff; // #fff default
40 20
41// The default color of control backgrounds is mostly black but with a little 21 .vjs-audio-button {
42// bit of blue so it can still be seen on all-black video frames, which are common. 22 display: none;
43// Try changing to #900 23 }
44$primary-background-color: #2B333F; // #2B333F default
45 24
46// Try changing to true 25 .vjs-big-play-button {
47$center-big-play-button: true; // true default 26 outline: 0;
27 font-size: 8em;
48 28
49.video-js { 29 $big-play-width: 3em;
50 /* The base font size controls the size of everything, not just text. 30 $big-play-height: 1.5em;
51 All dimensions use em-based sizes so that the scale along with the font size.
52 Try increasing it to 15px and see what happens. */
53 font-size: 10px;
54 31
55 /* The main font color changes the ICON COLORS as well as the text */ 32 border: 0;
56 color: $primary-foreground-color; 33 border-radius: 0.3em;
57}
58 34
59/* The "Big Play Button" is the play button that shows before the video plays.
60 To center it set the align values to center and middle. The typical location
61 of the button is the center, but there is trend towards moving it to a corner
62 where it gets out of the way of valuable content in the poster image.*/
63.vjs-sublime-skin .vjs-big-play-button {
64 /* The font size is what makes the big play button...big.
65 All width/height values use ems, which are a multiple of the font size.
66 If the .video-js font-size is 10px, then 3em equals 30px.*/
67 font-size: 8em;
68
69 /* We're using SCSS vars here because the values are used in multiple places.
70 Now that font size is set, the following em values will be a multiple of the
71 new font size. If the font-size is 3em (30px), then setting any of
72 the following values to 3em would equal 30px. 3 * font-size. */
73 $big-play-width: 3em;
74 /* 1.5em = 45px default */
75 $big-play-height: 1.5em;
76
77 line-height: $big-play-height;
78 height: $big-play-height;
79 width: $big-play-width;
80
81 /* 0.06666em = 2px default */
82 border: 0;
83 /* 0.3em = 9px default */
84 border-radius: 0.3em;
85
86 @if $center-big-play-button {
87 /* Align center */
88 left: 50%; 35 left: 50%;
89 top: 50%; 36 top: 50%;
90 margin-left: -($big-play-width / 2); 37 margin-left: -($big-play-width / 2);
91 margin-top: -($big-play-height / 2); 38 margin-top: -($big-play-height / 2);
92 } @else { 39 background-color: transparent !important;
93 /* Align top left. 0.5em = 15px default */
94 left: 0.5em;
95 top: 0.5em;
96 } 40 }
97}
98 41
99/* The default color of control backgrounds is mostly black but with a little 42 .vjs-control-bar,
100 bit of blue so it can still be seen on all-black video frames, which are common. */ 43 .vjs-big-play-button,
101.video-js .vjs-control-bar, 44 .vjs-menu-button .vjs-menu-content {
102.video-js .vjs-big-play-button, 45 background-color: rgba($primary-background-color, 0.5);
103.video-js .vjs-menu-button .vjs-menu-content { 46 }
104 /* IE8 - has no alpha support */
105 background-color: $primary-background-color;
106 /* Opacity: 1.0 = 100%, 0.0 = 0% */
107 background-color: rgba($primary-background-color, 0.7);
108 background-color: transparent;
109}
110 47
111// Make a slightly lighter version of the main background 48 $slider-bg-color: lighten($primary-background-color, 33%);
112// for the slider background.
113$slider-bg-color: lighten($primary-background-color, 33%);
114
115/* Slider - used for Volume bar and Progress bar */
116.video-js .vjs-slider {
117 background-color: $slider-bg-color;
118 background-color: rgba($slider-bg-color, 0.5);
119 background-color: rgba(255,255,255,.3);
120 border-radius: 2px;
121 height: 6.5px;
122}
123 49
124/* The slider bar color is used for the progress bar and the volume bar 50 .vjs-slider {
125 (the first two can be removed after a fix that's coming) */ 51 background-color: rgba(255, 255, 255, .3);
126.video-js .vjs-volume-level, 52 border-radius: 2px;
127.video-js .vjs-play-progress, 53 height: 5px;
128.video-js .vjs-slider-bar { 54 }
129 background: $primary-foreground-color;
130}
131 55
132/* Enlarged Slider to enable easier tracking. Adjust all the height:6.5px to preferred height for the slider if necessary. */ 56 /* The slider bar color is used for the progress bar and the volume bar
133.video-js .vjs-progress-holder .vjs-load-progress, 57 (the first two can be removed after a fix that's coming) */
134.video-js .vjs-progress-holder .vjs-load-progress div, 58 .vjs-volume-level,
135.video-js .vjs-progress-holder .vjs-play-progress, 59 .vjs-play-progress,
136.video-js .vjs-progress-holder .vjs-tooltip-progress-bar { 60 .vjs-slider-bar {
137 height: 6.5px; 61 background: $primary-foreground-color;
138} 62 }
139 63
140/* The main progress bar also has a bar that shows how much has been loaded. */ 64 .vjs-load-progress {
141.video-js .vjs-load-progress { 65 background: rgba($slider-bg-color, 0.5);
142 /* For IE8 we'll lighten the color */ 66 }
143 background: ligthen($slider-bg-color, 25%);
144 /* Otherwise we'll rely on stacked opacities */
145 background: rgba($slider-bg-color, 0.5);
146}
147 67
148/* The load progress bar also has internal divs that represent 68 .vjs-load-progress div {
149 smaller disconnected loaded time ranges */ 69 background: rgba($slider-bg-color, 0.75);
150.video-js .vjs-load-progress div { 70 }
151 /* For IE8 we'll lighten the color */
152 background: ligthen($slider-bg-color, 50%);
153 /* Otherwise we'll rely on stacked opacities */
154 background: rgba($slider-bg-color, 0.75);
155}
156 71
157//Skin Style Starts 72 .vjs-poster {
158.vjs-sublime-skin .vjs-poster {
159 outline: none; /* Remove Blue Outline on Click*/ 73 outline: none; /* Remove Blue Outline on Click*/
160 outline: 0; 74 outline: 0;
161} 75 }
162
163.vjs-sublime-skin:hover .vjs-big-play-button {
164 background-color: transparent;
165}
166
167.vjs-sublime-skin .vjs-fullscreen-control:before,
168.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:before {
169 content: ''; /* Remove Fullscreen Exit Icon */
170}
171
172.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control {
173 background: #fff;
174}
175
176.vjs-sublime-skin .vjs-fullscreen-control {
177 border: 3px solid #fff;
178 box-sizing: border-box;
179 cursor: pointer;
180 margin-top: -7px;
181 top: 50%;
182 height: 14px;
183 width: 22px;
184 margin-right: 10px;
185}
186
187.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:after {
188 background: #000;
189 content: "";
190 display: block;
191 position: absolute;
192 bottom: 0;
193 left: 0;
194 height: 5px;
195 width: 5px;
196}
197
198.vjs-sublime-skin .vjs-progress-holder {
199 margin: 0;
200}
201
202.vjs-sublime-skin .vjs-progress-control .vjs-progress-holder:after {
203 border-radius: 2px;
204 display: block;
205 height: 6.5px;
206}
207
208.vjs-sublime-skin .vjs-progress-control .vjs-load-progres,
209.vjs-sublime-skin .vjs-progress-control .vjs-play-progress {
210 border-radius: 2px;
211 height: 6.5px;
212}
213
214.vjs-sublime-skin .vjs-playback-rate {
215 display: none; /* Remove Playback Rate */
216}
217
218.vjs-sublime-skin .vjs-progress-control {
219 margin-right: 50px;
220}
221
222.vjs-sublime-skin .vjs-time-control {
223 right: 55px;
224}
225 76
226.vjs-sublime-skin .vjs-volume-menu-button:before { 77 .vjs-control-bar {
227 width: 1.2em; 78 height: $control-bar-height;
228 z-index: 1;
229}
230 79
231.vjs-sublime-skin .vjs-volume-menu-button .vjs-menu, 80 .vjs-progress-control {
232.vjs-sublime-skin .vjs-volume-menu-button:focus .vjs-menu, 81 bottom: 34px;
233.vjs-sublime-skin .vjs-volume-menu-button.vjs-slider-active .vjs-menu { 82 width: 100%;
234 display: block; 83 position: absolute;
235 opacity: 1; 84 height: 5px;
236}
237 85
238.vjs-sublime-skin .vjs-volume-menu-button, 86 .vjs-progress-holder {
239.vjs-sublime-skin .vjs-volume-panel { 87 margin: 0;
240 width: 6em; 88 border-radius: 0;
241 position: absolute; 89 }
242 right: 0; 90 }
243 margin-right: 65px;
244}
245 91
246.vjs-sublime-skin .vjs-volume-menu-button .vjs-menu-content, 92 .vjs-play-control {
247.vjs-sublime-skin .vjs-volume-menu-button:hover, 93 font-size: $font-size;
248.vjs-sublime-skin .vjs-volume-menu-button:focus, 94 padding: 0 17px;
249.vjs-sublime-skin .vjs-volume-menu-button.vjs-slider-active, 95 margin-right: 5px;
250.vjs-sublime-skin .vjs-volume-panel .vjs-volume-control, 96 }
251.vjs-sublime-skin .vjs-volume-panel:hover,
252.vjs-sublime-skin .vjs-volume-panel:focus,
253.vjs-sublime-skin .vjs-volume-panel.vjs-slider-active {
254 width: 6em;
255}
256 97
257.vjs-sublime-skin .vjs-volume-menu-button .vjs-menu { 98 .vjs-time-control {
258 left: 23px; 99 &.vjs-current-time {
259} 100 font-size: $font-size;
101 display: inline-block;
102 padding: 0;
103
104 .vjs-current-time-display {
105 line-height: $control-bar-height;
106
107 &::after {
108 content: "/";
109 margin: 0 1px 0 2px;
110 }
111 }
112 }
113
114 &.vjs-duration {
115 font-size: $font-size;
116 display: inline-block;
117 padding: 0;
118
119 .vjs-duration-display {
120 line-height: $control-bar-height;
121 }
122 }
123
124 &.vjs-remaining-time {
125 display: none;
126 }
127 }
260 128
261.vjs-sublime-skin .vjs-mouse-display:before, 129 .vjs-webtorrent {
262.vjs-sublime-skin .vjs-play-progress:before, 130 width: 100%;
263.vjs-sublime-skin .vjs-volume-level:before { 131 line-height: $control-bar-height;
264 content: ''; /* Remove Circle From Progress Bar */ 132 text-align: right;
265} 133 padding-right: 60px;
134
135 .vjs-webtorrent-displayed {
136 display: block;
137 }
138
139 .vjs-webtorrent-hidden {
140 display: none;
141 }
142
143 .download-speed-number, .upload-speed-number, .peers-number {
144 font-weight: $font-semibold;
145 }
146
147 .download-speed-text, .upload-speed-text, .peers-text {
148 margin-right: 15px;
149 }
150
151 .icon {
152 display: inline-block;
153 width: 15px;
154 height: 15px;
155 background-size: contain;
156 vertical-align: middle;
157 background-repeat: no-repeat;
158 margin-right: 6px;
159 position: relative;
160 top: -1px;
161
162 &.icon-download {
163 background-image: url('../assets/player/images/arrow-down.svg');
164 }
165
166 &.icon-upload {
167 background-image: url('../assets/player/images/arrow-up.svg');
168 }
169 }
170 }
266 171
267.vjs-sublime-skin .vjs-mouse-display:after, 172 .vjs-mute-control {
268.vjs-sublime-skin .vjs-play-progress:after, 173 .vjs-icon-placeholder {
269.vjs-sublime-skin .vjs-time-tooltip { 174 display: inline-block;
270 width: 5.5em; 175 width: 22px;
271} 176 height: 22px;
177 vertical-align: middle;
178 background: url('../assets/player/images/volume.svg') no-repeat;
179 background-size: contain;
180
181 &::before {
182 content: '';
183 }
184 }
185
186 &.vjs-vol-0 .vjs-icon-placeholder {
187 background: url('../assets/player/images/volume-mute.svg') no-repeat;
188 background-size: contain;
189 }
190 }
272 191
273.vjs-sublime-skin .vjs-audio-button { 192 .vjs-volume-menu-button,
274 display: none; 193 .vjs-volume-panel {
275} 194 width: 6em;
195 position: absolute;
196 right: 0;
197 margin-right: 65px;
198 }
276 199
277.vjs-sublime-skin .vjs-volume-bar { 200 .vjs-volume-bar {
278 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC); 201 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat;
279 background-size: 22px 14px; 202 background-size: 22px 14px;
280 background-repeat: no-repeat; 203 height: 100%;
281 height: 100%; 204 width: 100%;
282 width: 100%; 205 max-width: 22px;
283 max-width: 22px; 206 max-height: 14px;
284 max-height: 14px; 207 margin: 7px 4px;
285 margin: 7px 4px; 208 border-radius: 0;
286 border-radius: 0; 209 top: 3px;
287} 210
211 .vjs-volume-level {
212 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat;
213 background-size: 22px 14px;
214 max-width: 22px;
215 max-height: 14px;
216 height: 100%;
217 }
218 }
288 219
289.vjs-sublime-skin .vjs-volume-level { 220 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
290 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC); 221 .vjs-volume-panel.vjs-volume-panel-horizontal:active,
291 background-size: 22px 14px; 222 .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
292 background-repeat: no-repeat; 223 .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
293 max-width: 22px; 224 width: 6em;
294 max-height: 14px; 225 transition-property: none;
295 height: 100%; 226 }
296}
297 227
298/* New for VideoJS v6 */ 228 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
299.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, 229 width: 3em;
300.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:active, 230 height: auto;
301.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:focus, 231 }
302.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
303 width: 6em;
304 transition-property: none;
305}
306 232
307.vjs-sublime-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal { 233 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
308 width: 3em; 234 transition-property: none;
309 height: auto; 235 }
310}
311 236
312.vjs-sublime-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control { 237 .vjs-volume-panel {
313 transition-property: none; 238 .vjs-mute-control {
314} 239 width: 2em;
240 z-index: 1;
241 padding: 0;
242 }
243
244 .vjs-volume-control {
245 display: inline-block;
246 position: relative;
247 left: 5px;
248 opacity: 1;
249 width: 3em;
250 height: auto;
251 }
252 }
315 253
316.vjs-sublime-skin .vjs-fullscreen-control .vjs-icon-placeholder { 254 .vjs-fullscreen-control {
317 display: none; /* Remove Duplicate Fullscreen Icon */ 255 width: 37px;
318} 256
257 .vjs-icon-placeholder {
258 display: inline-block;
259 width: 22px;
260 height: 22px;
261 vertical-align: middle;
262 background: url('../assets/player/images/fullscreen.svg') no-repeat;
263 background-size: contain;
264
265 &::before {
266 content: '';
267 }
268 }
269 }
319 270
320.vjs-sublime-skin .vjs-volume-panel .vjs-mute-control { 271 .vjs-menu-button-popup {
321 width: 2em; 272 font-size: 13px;
322 z-index: 1; 273 font-weight: $font-semibold;
323 padding: 0; 274 width: 42px;
324} 275
276 // Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files
277 .vjs-resolution-button-label {
278 line-height: $control-bar-height;
279 position: absolute;
280 top: 0;
281 left: -1px;
282 width: 100%;
283 height: 100%;
284 text-align: center;
285 box-sizing: inherit;
286 }
287
288 .vjs-resolution-button {
289 outline: 0 !important;
290 }
291
292 .vjs-menu {
293 top: 20px;
294
295 .vjs-menu-content {
296 width: 4em;
297 left: 50%; /* Center the menu, in it's parent */
298 margin-left: -2em; /* half of width, to center */
299 }
300
301 li {
302 text-transform: none;
303 font-size: 13px;
304 }
305 }
306 }
307 }
325 308
326.vjs-sublime-skin .vjs-volume-panel .vjs-volume-control { 309 @media screen and (max-width: 450px) {
327 display: inline-block; 310 .vjs-webtorrent-displayed {
328 position: relative; 311 display: none !important;
329 left: 5px; 312 }
330 opacity: 1; 313 }
331 width: 3em;
332 height: auto;
333} 314}
334 315
335// Thanks: https://projects.lukehaas.me/css-loaders/ 316// Thanks: https://projects.lukehaas.me/css-loaders/
336.vjs-loading-spinner { 317.vjs-loading-spinner {
337 margin: 0 !important;
338 position: absolute;
339 // 15px is the nav bar height
340 top: calc(50% - 15px);
341 left: 50%; 318 left: 50%;
342 font-size: 10px; 319 font-size: 10px;
343 position: relative;
344 text-indent: -9999em; 320 text-indent: -9999em;
345 border: 0.7em solid rgba(255, 255, 255, 0.2); 321 border: 0.7em solid rgba(255, 255, 255, 0.2);
346 border-left-color: #ffffff; 322 border-left-color: #ffffff;
@@ -367,3 +343,4 @@ $slider-bg-color: lighten($primary-background-color, 33%);
367 } 343 }
368 } 344 }
369} 345}
346
generated by cgit v1.2.3 (git 2.25.1) at 2024-08-20 05:18:01 +0000