aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss35
-rw-r--r--client/src/sass/bootstrap.scss28
-rw-r--r--client/src/sass/player/_player-variables.scss14
-rw-r--r--client/src/sass/player/control-bar.scss451
-rw-r--r--client/src/sass/player/dock.scss53
-rw-r--r--client/src/sass/player/index.scss2
-rw-r--r--client/src/sass/player/peertube-skin.scss551
-rw-r--r--client/src/sass/player/settings-menu.scss20
8 files changed, 550 insertions, 604 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 87a21543d..9f64f7426 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -261,28 +261,6 @@ my-input-toggle-hidden ::ng-deep input {
261 display: flex; 261 display: flex;
262 align-items: center; 262 align-items: center;
263 margin-bottom: 30px; 263 margin-bottom: 30px;
264
265 .admin-sub-nav a {
266 @include disable-default-a-behaviour;
267
268 font-size: 16px;
269 color: pvar(--mainForegroundColor);
270 padding: 5px 15px;
271 border-radius: 0.25rem;
272 font-weight: $font-semibold;
273 opacity: 0.6;
274
275 &.active {
276 background-color: pvar(--submenuBackgroundColor);
277 }
278
279 &.active,
280 &:hover,
281 &:active,
282 &:focus {
283 opacity: 1;
284 }
285 }
286} 264}
287 265
288// In tables, don't have a hover different background 266// In tables, don't have a hover different background
@@ -402,19 +380,6 @@ ngx-loading-bar {
402 380
403 .admin-sub-header { 381 .admin-sub-header {
404 flex-direction: column; 382 flex-direction: column;
405
406 .admin-sub-nav {
407 display: block;
408 overflow-x: auto;
409 white-space: nowrap;
410 height: 50px;
411 padding: 10px 0;
412 width: 100%;
413
414 a {
415 @include margin-left(5px);
416 }
417 }
418 } 383 }
419 384
420 my-markdown-textarea { 385 my-markdown-textarea {
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 4e88d9706..432e23e92 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -334,6 +334,34 @@ ngb-tooltip-window {
334 } 334 }
335} 335}
336 336
337.btn-group.select-button {
338 font-weight: $font-semibold;
339
340 .active {
341 @include orange-button;
342 }
343
344 :not(.active) {
345 @include grey-button;
346 }
347
348 > * {
349 @include peertube-button-link;
350
351 box-shadow: none !important;
352
353 &:not(:first-child) {
354 border-top-left-radius: 0 !important;
355 border-bottom-left-radius: 0 !important;
356 }
357
358 &:not(:last-child) {
359 border-top-right-radius: 0 !important;
360 border-bottom-right-radius: 0 !important;
361 }
362 }
363}
364
337// input box-shadow on focus 365// input box-shadow on focus
338.form-control { 366.form-control {
339 font-size: 15px; 367 font-size: 15px;
diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
index 1d94b6f96..2625576d4 100644
--- a/client/src/sass/player/_player-variables.scss
+++ b/client/src/sass/player/_player-variables.scss
@@ -3,9 +3,15 @@ $primary-foreground-opacity: 0.9;
3$primary-foreground-opacity-hover: 1; 3$primary-foreground-opacity-hover: 1;
4$primary-background-color: rgba(0, 0, 0, 0.8); 4$primary-background-color: rgba(0, 0, 0, 0.8);
5 5
6$play-control-font-size: 16px;
7$font-size: 13px; 6$font-size: 13px;
8$control-bar-height: 34px; 7
8$control-bar-height: 38px;
9$control-bar-icon-size: 26px;
10$control-bar-volume-slider-height: 14px;
11$control-bar-font-size: 14px;
12$control-bar-play-font-size: 34px;
13$control-bar-next-previous-play-font-size: 14px;
14$control-bar-button-width: 38px;
9 15
10$slider-bg-color: lighten($primary-background-color, 33%); 16$slider-bg-color: lighten($primary-background-color, 33%);
11 17
@@ -16,4 +22,8 @@ $dock-padding: 20px;
16$first-control-bar-element-margin-left: 10px; 22$first-control-bar-element-margin-left: 10px;
17$first-control-bar-element-margin-left-small-width: 5px; 23$first-control-bar-element-margin-left-small-width: 5px;
18 24
25$screen-width-750: 750px;
26$screen-width-570: 570px;
27$screen-width-350: 350px;
28
19$assets-path: '../../assets/' !default; 29$assets-path: '../../assets/' !default;
diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss
new file mode 100644
index 000000000..2f76e599f
--- /dev/null
+++ b/client/src/sass/player/control-bar.scss
@@ -0,0 +1,451 @@
1@use 'sass:math';
2@use '_variables' as *;
3@use '_mixins' as *;
4@use './_player-variables' as *;
5
6.video-js.vjs-peertube-skin .vjs-control-bar {
7 height: $control-bar-height;
8 background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
9 box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2);
10 text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
11 transition: visibility 0.3s, opacity 0.3s !important;
12
13 > button:first-child {
14 @include margin-left($first-control-bar-element-margin-left);
15 }
16
17 > button:last-child {
18 @include margin-right($first-control-bar-element-margin-left);
19 }
20
21 .vjs-progress-control,
22 .vjs-play-control,
23 .vjs-playback-rate,
24 .vjs-mute-control,
25 .vjs-volume-control,
26 .vjs-resolution-control,
27 .vjs-fullscreen-control,
28 .vjs-peertube-link,
29 .vjs-theater-control,
30 .vjs-settings {
31 color: pvar(--embedForegroundColor) !important;
32
33 opacity: $primary-foreground-opacity;
34 transition: opacity .1s;
35
36 &:hover {
37 opacity: $primary-foreground-opacity-hover;
38 }
39 }
40
41 .vjs-current-time,
42 .vjs-duration,
43 .vjs-peertube {
44 color: pvar(--embedForegroundColor);
45 opacity: $primary-foreground-opacity;
46 }
47
48 .vjs-progress-control {
49 @include margin-left($progress-margin);
50
51 position: absolute;
52 top: -10px;
53 z-index: 100; // On top of the progress bar
54 width: calc(100% - (2 * #{$progress-margin}));
55 height: 14px;
56
57 .vjs-slider {
58 margin: 0;
59 border-radius: 0;
60 background-color: rgba(255, 255, 255, .2);
61 height: 3px;
62 transition: none;
63
64 .vjs-play-progress {
65 background: pvar(--embedForegroundColor);
66
67 // Not display the circle if the progress is not hovered
68 &::before {
69 opacity: 0;
70 transition: opacity 0.1s ease;
71 font-size: 14px;
72
73 top: -0.3em;
74 }
75
76 .vjs-time-tooltip {
77 display: none;
78 }
79 }
80
81 .vjs-load-progress {
82 &,
83 div {
84 background: rgba(255, 255, 255, .2);
85 }
86 }
87 }
88 }
89
90 .vjs-progress-control:hover .vjs-slider,
91 .vjs-progress-control .vjs-slider.vjs-sliding {
92 height: 5px;
93
94 .vjs-play-progress::before {
95 opacity: 1;
96 }
97 }
98
99 .vjs-play-control {
100 @include disable-outline;
101
102 cursor: pointer;
103 width: $control-bar-button-width;
104
105 .vjs-icon-placeholder::before {
106 font-size: $control-bar-play-font-size;
107 line-height: initial;
108 }
109 }
110
111 .vjs-time-control {
112 line-height: inherit;
113
114 &.vjs-current-time {
115 @include margin-left(.5em);
116
117 font-size: $control-bar-font-size;
118 display: inline-block;
119 padding: 0;
120
121 .vjs-current-time-display {
122 line-height: calc(#{$control-bar-height} - 1px);
123
124 &::after {
125 @include margin(0, 1px, 0, 2px);
126
127 content: '/';
128 }
129 }
130 }
131
132 &.vjs-duration {
133 font-size: $control-bar-font-size;
134 display: inline-block;
135 padding: 0;
136
137 .vjs-duration-display {
138 line-height: calc(#{$control-bar-height} - 1px);
139 }
140 }
141
142 &.vjs-remaining-time {
143 display: none;
144 }
145 }
146
147 .vjs-live-control {
148 line-height: $control-bar-height;
149 min-width: 4em;
150 width: inherit;
151 }
152
153 .vjs-peertube {
154 @include margin-right(6px);
155
156 width: 100%;
157 line-height: $control-bar-height;
158 text-align: end;
159 overflow: hidden;
160 font-size: $control-bar-font-size;
161
162 .vjs-peertube-displayed {
163 display: block;
164 }
165
166 .vjs-peertube-hidden {
167 display: none;
168 }
169
170 .download-speed-number,
171 .upload-speed-number,
172 .peers-number,
173 .http-fallback {
174 font-weight: $font-semibold;
175 }
176
177 .download-speed-text,
178 .upload-speed-text,
179 .peers-text,
180 .http-fallback {
181 @include margin-right(15px);
182 }
183
184 .icon {
185 @include margin-right(2px);
186
187 display: inline-block;
188 width: 15px;
189 height: 15px;
190 background-size: contain;
191 vertical-align: middle;
192 background-repeat: no-repeat;
193 position: relative;
194 top: -1px;
195
196 &.icon-download {
197 background-image: url('#{$assets-path}/player/images/arrow-down.svg');
198 }
199
200 &.icon-upload {
201 background-image: url('#{$assets-path}/player/images/arrow-up.svg');
202 }
203 }
204 }
205
206 .vjs-next-video,
207 .vjs-previous-video {
208 width: $control-bar-button-width - 4px;
209
210 &.vjs-disabled {
211 cursor: default;
212 }
213
214 .icon {
215 &.icon-next,
216 &.icon-previous {
217 mask-image: url('#{$assets-path}/player/images/next.svg');
218 -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
219 mask-size: cover;
220 -webkit-mask-size: cover;
221
222 background-color: #fff;
223 width: $control-bar-next-previous-play-font-size;
224 height: $control-bar-next-previous-play-font-size;
225 display: inline-block;
226 }
227
228 &.icon-previous {
229 transform: rotate(180deg);
230 }
231 }
232 }
233
234 .vjs-mute-control {
235 @include disable-outline;
236
237 padding: 0;
238 width: $control-bar-icon-size;
239
240 .vjs-icon-placeholder {
241 display: inline-block;
242 width: $control-bar-icon-size;
243 height: $control-bar-icon-size;
244 vertical-align: middle;
245 background: url('#{$assets-path}/player/images/volume.svg') no-repeat;
246 background-size: contain;
247
248 &::before {
249 content: '';
250 }
251 }
252
253 &.vjs-vol-0 .vjs-icon-placeholder {
254 background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat;
255 background-size: contain;
256 }
257 }
258
259 .vjs-volume-control {
260 @include margin(0, 5px, 0, 5px);
261
262 width: $control-bar-icon-size;
263 display: flex;
264 align-items: center;
265 }
266
267 .vjs-volume-bar {
268 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC') no-repeat;
269 background-size: $control-bar-icon-size $control-bar-volume-slider-height;
270 height: 100%;
271 width: 100%;
272 max-width: $control-bar-icon-size;
273 max-height: $control-bar-volume-slider-height;
274 margin: 0;
275 border-radius: 0;
276
277 .vjs-volume-level {
278 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC') no-repeat;
279 background-size: $control-bar-icon-size $control-bar-volume-slider-height;
280 max-width: $control-bar-icon-size;
281 height: 100%;
282 max-height: $control-bar-volume-slider-height;
283
284 &::before {
285 // Remove circle
286 content: '';
287 }
288 }
289
290 &:focus {
291 text-shadow: none;
292 box-shadow: none;
293 }
294 }
295
296 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
297 .vjs-volume-panel.vjs-volume-panel-horizontal:active,
298 .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
299 .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
300 width: 6em;
301 transition-property: none;
302 }
303
304 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
305 width: 3em;
306 height: auto;
307 }
308
309 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
310 transition-property: none;
311 }
312
313 .vjs-volume-panel {
314 .vjs-mute-control {
315 width: 2em;
316 z-index: 1;
317 padding: 0;
318 }
319
320 .vjs-volume-control {
321 display: inline-block;
322 position: relative;
323 left: 5px;
324 opacity: 1;
325 width: 3em;
326 height: auto;
327 }
328 }
329
330 .vjs-settings {
331 @include disable-outline;
332
333 cursor: pointer;
334 width: $control-bar-button-width;
335
336 .vjs-icon-placeholder {
337 display: inline-block;
338 height: $control-bar-icon-size - 5px;
339 width: $control-bar-icon-size - 5px;
340 vertical-align: middle;
341 background: url('#{$assets-path}/player/images/settings.svg') no-repeat;
342 background-size: contain;
343
344 &::before {
345 content: '';
346 }
347 }
348 }
349
350 .vjs-peertube-link {
351 @include disable-outline;
352 @include disable-default-a-behaviour;
353
354 text-decoration: none;
355 line-height: $control-bar-height;
356 font-weight: $font-semibold;
357 padding: 0 5px;
358 }
359
360 .vjs-theater-control {
361 @include disable-outline;
362
363 width: $control-bar-button-width;
364 cursor: pointer;
365
366 .vjs-icon-placeholder {
367 transition: transform 0.2s ease;
368 display: inline-block;
369 width: $control-bar-icon-size;
370 height: $control-bar-icon-size;
371 vertical-align: middle;
372 background: url('#{$assets-path}/player/images/theater.svg') no-repeat;
373 background-size: contain;
374
375 &::before {
376 content: '';
377 }
378 }
379 }
380
381 .vjs-fullscreen-control {
382 @include disable-outline;
383
384 width: $control-bar-button-width;
385
386 .vjs-icon-placeholder {
387 display: inline-block;
388 width: $control-bar-icon-size;
389 height: $control-bar-icon-size;
390 vertical-align: middle;
391 background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
392 background-size: contain;
393
394 &::before {
395 content: '';
396 }
397 }
398 }
399
400 @media screen and (max-width: $screen-width-750) {
401 .vjs-theater-control {
402 display: none;
403 }
404 }
405
406 @media screen and (max-width: $screen-width-570) {
407 .vjs-peertube {
408 padding: 0 !important;
409
410 .vjs-peertube-displayed {
411 display: none !important;
412 }
413 }
414
415 &.vjs-live {
416 .vjs-duration {
417 display: none !important;
418 }
419
420 .vjs-peertube {
421 display: none !important;
422 }
423 }
424 }
425
426 @media screen and (max-width: $screen-width-350) {
427 .vjs-volume-control,
428 .vjs-next-video,
429 .vjs-previous-video {
430 display: none !important;
431 }
432
433 .vjs-peertube-link {
434 padding: 0 !important;
435 }
436
437 > button:first-child {
438 @include margin-left($first-control-bar-element-margin-left-small-width);
439 }
440
441 > button:last-child {
442 @include margin-right($first-control-bar-element-margin-left-small-width);
443 }
444
445 &.vjs-live {
446 .vjs-current-time {
447 display: none !important;
448 }
449 }
450 }
451}
diff --git a/client/src/sass/player/dock.scss b/client/src/sass/player/dock.scss
new file mode 100644
index 000000000..79600ac93
--- /dev/null
+++ b/client/src/sass/player/dock.scss
@@ -0,0 +1,53 @@
1@use 'sass:math';
2@use '_variables' as *;
3@use '_mixins' as *;
4@use './_player-variables' as *;
5
6.video-js.vjs-peertube-skin {
7 .vjs-dock-text {
8 @include padding-right(60px);
9
10 padding: $dock-padding;
11 background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
12 }
13
14 .vjs-dock-title,
15 .vjs-dock-description {
16 text-shadow: 0 0 2px rgba(0, 0, 0, .5);
17 }
18
19 .vjs-dock-description {
20 font-size: 11px;
21
22 .text::before {
23 @include margin-right(4px);
24 }
25
26 .text::after {
27 @include margin-left(4px);
28 transform: scale(-1, 1);
29 }
30 }
31
32 @media screen and (max-width: $screen-width-750) {
33 .vjs-dock-text {
34 font-size: 16px;
35 }
36
37 .vjs-dock-description {
38 font-size: 9px;
39 }
40 }
41
42 @media screen and (max-width: $screen-width-570) {
43 .vjs-dock-text {
44 font-size: 14px;
45 }
46 }
47
48 @media screen and (max-width: $screen-width-350) {
49 .vjs-dock-text {
50 font-size: 13px;
51 }
52 }
53}
diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss
index 385365b6d..7420460e7 100644
--- a/client/src/sass/player/index.scss
+++ b/client/src/sass/player/index.scss
@@ -1,4 +1,6 @@
1@use './peertube-skin'; 1@use './peertube-skin';
2@use './dock';
3@use './control-bar';
2@use './mobile'; 4@use './mobile';
3@use './context-menu'; 5@use './context-menu';
4@use './settings-menu'; 6@use './settings-menu';
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 96d752699..c420e825e 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -20,35 +20,6 @@ body {
20 font-size: $font-size; 20 font-size: $font-size;
21 color: pvar(--embedForegroundColor); 21 color: pvar(--embedForegroundColor);
22 22
23 .vjs-dock-text {
24 @include padding-right(60px);
25
26 padding: $dock-padding;
27 background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
28 }
29
30 .vjs-dock-title,
31 .vjs-dock-description {
32 text-shadow: 0 0 2px rgba(0, 0, 0, .5);
33 }
34
35 .vjs-dock-description {
36 font-size: 11px;
37
38 .text::before {
39 @include margin-right(4px);
40 }
41
42 .text::after {
43 @include margin-left(4px);
44 transform: scale(-1, 1);
45 }
46 }
47
48 .vjs-volume-level::before {
49 content: ''; /* Remove Circle From Progress Bar */
50 }
51
52 .vjs-audio-button { 23 .vjs-audio-button {
53 display: none; 24 display: none;
54 } 25 }
@@ -71,7 +42,7 @@ body {
71 height: $big-play-height; 42 height: $big-play-height;
72 line-height: $big-play-height; 43 line-height: $big-play-height;
73 margin-top: -(math.div($big-play-height, 2)); 44 margin-top: -(math.div($big-play-height, 2));
74 transition: 0.4s opacity; 45 transition: 0.2s background-color;
75 46
76 &::-moz-focus-inner { 47 &::-moz-focus-inner {
77 border: 0; 48 border: 0;
@@ -89,30 +60,6 @@ body {
89 &:hover { 60 &:hover {
90 background-color: var(--mainColor, #696969); 61 background-color: var(--mainColor, #696969);
91 } 62 }
92
93 }
94
95 // Small effect when we click on the play button
96 &.vjs-has-big-play-button-clicked {
97
98 .vjs-big-play-button,
99 .vjs-poster {
100 display: block;
101 visibility: hidden;
102
103 &.vjs-big-play-button,
104 &.vjs-big-play-button::before {
105 opacity: 0;
106 transition: visibility 0.2s, opacity 0.2s;
107 }
108
109 &.vjs-poster,
110 &.vjs-poster::before {
111 opacity: 0;
112 transition: visibility 0.3s, opacity 0.3s;
113 transition-delay: 0.05s;
114 }
115 }
116 } 63 }
117 64
118 // Show poster and controls when playing audio-only content 65 // Show poster and controls when playing audio-only content
@@ -149,434 +96,10 @@ body {
149 } 96 }
150 97
151 .vjs-poster { 98 .vjs-poster {
152 outline: none; /* Remove Blue Outline on Click*/
153 outline: 0; 99 outline: 0;
154 } 100 }
155 101
156 .vjs-control-bar { 102 @media screen and (max-width: $screen-width-750) {
157 height: $control-bar-height;
158 background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
159 box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2);
160 text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
161
162 > button:first-child {
163 @include margin-left($first-control-bar-element-margin-left);
164 }
165
166 .vjs-progress-control,
167 .vjs-play-control,
168 .vjs-playback-rate,
169 .vjs-mute-control,
170 .vjs-volume-control,
171 .vjs-resolution-control,
172 .vjs-fullscreen-control,
173 .vjs-peertube-link,
174 .vjs-theater-control,
175 .vjs-settings {
176 color: pvar(--embedForegroundColor) !important;
177
178 opacity: $primary-foreground-opacity;
179 transition: opacity .1s;
180
181 &:hover {
182 opacity: $primary-foreground-opacity-hover;
183 }
184 }
185
186 .vjs-current-time,
187 .vjs-duration,
188 .vjs-peertube {
189 color: pvar(--embedForegroundColor);
190 opacity: $primary-foreground-opacity;
191 }
192
193 .vjs-progress-control {
194 @include margin-left($progress-margin);
195
196 position: absolute;
197 z-index: 100; // On top of the progress bar
198 bottom: 29px;
199 width: calc(100% - (2 * #{$progress-margin}));
200 height: 14px;
201
202 .vjs-slider {
203 margin: 0;
204 border-radius: 0;
205 background-color: rgba(255, 255, 255, .2);
206 height: 3px;
207 transition: none;
208
209 .vjs-play-progress {
210 background: pvar(--embedForegroundColor);
211
212 // Not display the circle if the progress is not hovered
213 &::before {
214 opacity: 0;
215 transition: opacity 0.1s ease;
216 font-size: 14px;
217
218 top: -0.3em;
219 }
220
221 .vjs-time-tooltip {
222 display: none;
223 }
224 }
225
226 .vjs-load-progress {
227 &,
228 div {
229 background: rgba(255, 255, 255, .2);
230 }
231 }
232 }
233 }
234
235 .vjs-progress-control:hover .vjs-slider,
236 .vjs-progress-control .vjs-slider.vjs-sliding {
237 height: 5px;
238
239 .vjs-play-progress::before {
240 opacity: 1;
241 }
242 }
243
244
245 .vjs-play-control {
246 @include disable-outline;
247
248 cursor: pointer;
249 width: 2em;
250
251 .vjs-icon-placeholder {
252 line-height: $control-bar-height;
253 position: relative;
254 top: -1px;
255
256 &::before {
257 font-size: 28px;
258 line-height: unset;
259 position: relative;
260 }
261 }
262 }
263
264 .vjs-time-control {
265 line-height: inherit;
266
267 &.vjs-current-time {
268 @include margin-left(.5em);
269
270 font-size: $font-size;
271 display: inline-block;
272 padding: 0;
273
274 .vjs-current-time-display {
275 line-height: calc(#{$control-bar-height} - 1px);
276
277 &::after {
278 @include margin(0, 1px, 0, 2px);
279
280 content: '/';
281 }
282 }
283 }
284
285 &.vjs-duration {
286 font-size: $font-size;
287 display: inline-block;
288 padding: 0;
289
290 .vjs-duration-display {
291 line-height: calc(#{$control-bar-height} - 1px);
292 }
293 }
294
295 &.vjs-remaining-time {
296 display: none;
297 }
298 }
299
300 .vjs-live-control {
301 line-height: $control-bar-height;
302 min-width: 4em;
303 width: inherit;
304 }
305
306 .vjs-peertube {
307 @include margin-right(6px);
308
309 width: 100%;
310 line-height: $control-bar-height;
311 text-align: end;
312 overflow: hidden;
313
314 .vjs-peertube-displayed {
315 display: block;
316 }
317
318 .vjs-peertube-hidden {
319 display: none;
320 }
321
322 .download-speed-number,
323 .upload-speed-number,
324 .peers-number,
325 .http-fallback {
326 font-weight: $font-semibold;
327 }
328
329 .download-speed-text,
330 .upload-speed-text,
331 .peers-text,
332 .http-fallback {
333 @include margin-right(15px);
334 }
335
336 .icon {
337 &.icon-download {
338 background-image: url('#{$assets-path}/player/images/arrow-down.svg');
339 }
340
341 &.icon-upload {
342 background-image: url('#{$assets-path}/player/images/arrow-up.svg');
343 }
344 }
345 }
346
347 .vjs-next-video,
348 .vjs-previous-video {
349 line-height: $control-bar-height;
350 text-align: end;
351
352 .icon {
353 &.icon-next,
354 &.icon-previous {
355 mask-image: url('#{$assets-path}/player/images/next.svg');
356 -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
357 mask-size: cover;
358 -webkit-mask-size: cover;
359
360 background-color: #fff;
361 width: 11px;
362 height: 11px;
363 margin-top: -2px;
364 display: inline-block;
365 }
366
367 &.icon-previous {
368 transform: rotate(180deg);
369 }
370 }
371 }
372
373 .vjs-peertube {
374 .icon {
375 display: inline-block;
376 width: 15px;
377 height: 15px;
378 background-size: contain;
379 vertical-align: middle;
380 background-repeat: no-repeat;
381 position: relative;
382 top: -1px;
383 }
384 }
385
386 .vjs-playback-rate {
387 font-size: 10px;
388 width: 37px !important;
389
390 .vjs-playback-rate-value {
391 font-size: 13px;
392 line-height: $control-bar-height;
393 }
394
395 .vjs-menu .vjs-menu-content {
396 width: 37px !important;
397 }
398 }
399
400 .vjs-mute-control {
401 @include disable-outline;
402
403 padding: 0;
404 width: 30px;
405
406 .vjs-icon-placeholder {
407 display: inline-block;
408 width: 22px;
409 height: 22px;
410 vertical-align: middle;
411 background: url('#{$assets-path}/player/images/volume.svg') no-repeat;
412 background-size: contain;
413
414 &::before {
415 content: '';
416 }
417 }
418
419 &.vjs-vol-0 .vjs-icon-placeholder {
420 background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat;
421 background-size: contain;
422 }
423 }
424
425 .vjs-volume-control {
426 @include margin(0, 5px, 0, 0);
427
428 width: 30px;
429 }
430
431 .vjs-volume-bar {
432 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC') no-repeat;
433 background-size: 22px 14px;
434 height: 100%;
435 width: 100%;
436 max-width: 22px;
437 max-height: 14px;
438 margin: 7px 4px;
439 border-radius: 0;
440 top: 3px;
441
442 .vjs-volume-level {
443 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC') no-repeat;
444 background-size: 22px 14px;
445 max-width: 22px;
446 max-height: 14px;
447 height: 100%;
448 }
449
450 &:focus {
451 text-shadow: none;
452 box-shadow: none;
453 }
454 }
455
456 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
457 .vjs-volume-panel.vjs-volume-panel-horizontal:active,
458 .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
459 .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
460 width: 6em;
461 transition-property: none;
462 }
463
464 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
465 width: 3em;
466 height: auto;
467 }
468
469 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
470 transition-property: none;
471 }
472
473 .vjs-volume-panel {
474 .vjs-mute-control {
475 width: 2em;
476 z-index: 1;
477 padding: 0;
478 }
479
480 .vjs-volume-control {
481 display: inline-block;
482 position: relative;
483 left: 5px;
484 opacity: 1;
485 width: 3em;
486 height: auto;
487 }
488 }
489
490 .vjs-peertube-link {
491 @include disable-outline;
492 @include disable-default-a-behaviour;
493
494 text-decoration: none;
495 line-height: $control-bar-height;
496 font-weight: $font-semibold;
497 padding: 0 5px;
498 }
499
500 .vjs-theater-control {
501 @include disable-outline;
502 @include margin-right(1px);
503
504 width: 37px;
505 cursor: pointer;
506
507 .vjs-icon-placeholder {
508 transition: transform 0.2s ease;
509 display: inline-block;
510 width: 22px;
511 height: 22px;
512 vertical-align: middle;
513 background: url('#{$assets-path}/player/images/theater.svg') no-repeat;
514 background-size: contain;
515
516 &::before {
517 content: '';
518 }
519 }
520 }
521
522 .vjs-fullscreen-control {
523 @include disable-outline;
524 @include margin-left($first-control-bar-element-margin-left);
525
526 width: 37px;
527
528 .vjs-icon-placeholder {
529 display: inline-block;
530 width: 22px;
531 height: 22px;
532 vertical-align: middle;
533 background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
534 background-size: contain;
535
536 &::before {
537 content: '';
538 }
539 }
540 }
541
542 .vjs-menu-button-popup {
543 font-weight: $font-semibold;
544 width: 50px;
545
546 .vjs-resolution-button {
547 @include disable-outline;
548 }
549
550 .vjs-menu {
551 top: 20px;
552 left: 0;
553
554 .vjs-menu-content {
555 width: 50px;
556 bottom: 20px;
557 }
558
559 li {
560 text-transform: none;
561 font-size: 13px;
562 }
563 }
564 }
565 }
566
567 @media screen and (max-width: 750px) {
568 .vjs-theater-control {
569 display: none;
570 }
571
572 .vjs-dock-text {
573 font-size: 16px;
574 }
575
576 .vjs-dock-description {
577 font-size: 9px;
578 }
579
580 .vjs-big-play-button { 103 .vjs-big-play-button {
581 font-size: 5em; 104 font-size: 5em;
582 border-width: 3px; 105 border-width: 3px;
@@ -587,11 +110,7 @@ body {
587 } 110 }
588 } 111 }
589 112
590 @media screen and (max-width: 570px) { 113 @media screen and (max-width: $screen-width-570) {
591 .vjs-dock-text {
592 font-size: 14px;
593 }
594
595 .vjs-big-play-button { 114 .vjs-big-play-button {
596 font-size: 4.5em; 115 font-size: 4.5em;
597 border-width: 2.5px; 116 border-width: 2.5px;
@@ -600,31 +119,9 @@ body {
600 @include big-play-button-triangle-size(27px); 119 @include big-play-button-triangle-size(27px);
601 } 120 }
602 } 121 }
603
604 .vjs-peertube {
605 padding: 0 !important;
606
607 .vjs-peertube-displayed {
608 display: none !important;
609 }
610 }
611
612 &.vjs-live {
613 .vjs-duration {
614 display: none !important;
615 }
616
617 .vjs-peertube {
618 display: none !important;
619 }
620 }
621 } 122 }
622 123
623 @media screen and (max-width: 350px) { 124 @media screen and (max-width: $screen-width-350) {
624 .vjs-dock-text {
625 font-size: 13px;
626 }
627
628 .vjs-big-play-button { 125 .vjs-big-play-button {
629 font-size: 3em; 126 font-size: 3em;
630 border-width: 2px; 127 border-width: 2px;
@@ -633,36 +130,6 @@ body {
633 @include big-play-button-triangle-size(20px); 130 @include big-play-button-triangle-size(20px);
634 } 131 }
635 } 132 }
636
637 .vjs-volume-control,
638 .vjs-next-video,
639 .vjs-previous-video {
640 display: none !important;
641 }
642
643 .vjs-peertube-link {
644 padding: 0 !important;
645 }
646
647 .vjs-settings {
648 width: 33px;
649 }
650
651 .vjs-control-bar {
652 > button:first-child {
653 @include margin-left($first-control-bar-element-margin-left-small-width);
654 }
655 }
656
657 .vjs-fullscreen-control {
658 @include margin-right($first-control-bar-element-margin-left-small-width);
659 }
660
661 &.vjs-live {
662 .vjs-current-time {
663 display: none !important;
664 }
665 }
666 } 133 }
667 134
668 // Theater mode is enabled 135 // Theater mode is enabled
@@ -730,13 +197,3 @@ body {
730 display: block; 197 display: block;
731 } 198 }
732} 199}
733
734.vjs-no-next-in-playlist {
735 .vjs-next-video {
736 cursor: default;
737
738 .icon {
739 background-color: rgba(255, 255, 255, 0.5);
740 }
741 }
742}
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 9932fc8c8..5a476259e 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -9,26 +9,6 @@ $setting-transition-easing: ease-out;
9 9
10.video-js { 10.video-js {
11 11
12 .vjs-settings {
13 @include disable-outline;
14
15 cursor: pointer;
16 width: 33px;
17
18 .vjs-icon-placeholder {
19 display: inline-block;
20 width: 17px;
21 height: 17px;
22 vertical-align: middle;
23 background: url('#{$assets-path}/player/images/settings.svg') no-repeat;
24 background-size: contain;
25
26 &::before {
27 content: '';
28 }
29 }
30 }
31
32 .vjs-settings-sub-menu-title { 12 .vjs-settings-sub-menu-title {
33 width: 4em; 13 width: 4em;
34 text-transform: initial; 14 text-transform: initial;
generated by cgit v1.2.3 (git 2.25.1) at 2024-10-03 11:40:02 +0000