client/src/sass/player/control-bar.scss

   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   z-index: 100;
   8
   9   height: $control-bar-height;
  10   background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
  11   box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2);
  12   text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  13   transition: visibility 0.3s, opacity 0.3s !important;
  14
  15   &.control-bar-hidden {
  16     display: none !important;
  17   }
  18
  19   > button:first-child {
  20     @include margin-left($first-control-bar-element-margin-left);
  21   }
  22
  23   > button:last-child {
  24     @include margin-right($first-control-bar-element-margin-left);
  25   }
  26
  27   .vjs-progress-control,
  28   .vjs-play-control,
  29   .vjs-playback-rate,
  30   .vjs-mute-control,
  31   .vjs-volume-control,
  32   .vjs-resolution-control,
  33   .vjs-fullscreen-control,
  34   .vjs-peertube-link,
  35   .vjs-theater-control,
  36   .vjs-settings {
  37     color: pvar(--embedForegroundColor) !important;
  38
  39     opacity: $primary-foreground-opacity;
  40     transition: opacity .1s;
  41
  42     &:hover {
  43       opacity: $primary-foreground-opacity-hover;
  44     }
  45   }
  46
  47   .vjs-current-time,
  48   .vjs-duration,
  49   .vjs-peertube {
  50     color: pvar(--embedForegroundColor);
  51     opacity: $primary-foreground-opacity;
  52   }
  53
  54   .vjs-progress-control {
  55     @include margin-left($progress-margin);
  56
  57     position: absolute;
  58     top: $control-bar-slider-top;
  59     z-index: 100; // On top of the progress bar
  60     width: calc(100% - (2 * #{$progress-margin}));
  61     height: 20px;
  62
  63     .vjs-slider {
  64       margin: 0;
  65       border-radius: 0;
  66       background-color: rgba(255, 255, 255, .2);
  67       height: 3px;
  68       transition: none;
  69
  70       .vjs-play-progress {
  71         background: pvar(--embedForegroundColor);
  72
  73         // Not display the circle if the progress is not hovered
  74         &::before {
  75           opacity: 0;
  76           transition: opacity 0.1s ease;
  77           font-size: 14px;
  78
  79           top: -0.3em;
  80         }
  81
  82         .vjs-time-tooltip {
  83           display: none;
  84         }
  85       }
  86
  87       .vjs-load-progress {
  88         &,
  89         div {
  90           background: rgba(255, 255, 255, .2);
  91         }
  92       }
  93     }
  94   }
  95
  96   .vjs-progress-control:hover .vjs-slider,
  97   .vjs-progress-control .vjs-slider.vjs-sliding {
  98     height: 5px;
  99
 100     .vjs-play-progress::before {
 101       opacity: 1;
 102     }
 103   }
 104
 105   .vjs-play-control {
 106     @include disable-outline;
 107
 108     cursor: pointer;
 109     width: $control-bar-button-width;
 110
 111     .vjs-icon-placeholder::before {
 112       font-size: $control-bar-play-font-size;
 113       line-height: unset;
 114       position: relative;
 115       top: -1px;
 116     }
 117   }
 118
 119   .vjs-time-control {
 120     line-height: inherit;
 121
 122     &.vjs-current-time {
 123       @include margin-left(.5em);
 124
 125       font-size: $control-bar-font-size;
 126       display: inline-block;
 127       padding: 0;
 128
 129       .vjs-current-time-display {
 130         line-height: calc(#{$control-bar-height} - 1px);
 131
 132         &::after {
 133           @include margin(0, 1px, 0, 2px);
 134
 135           content: '/';
 136         }
 137       }
 138     }
 139
 140     &.vjs-duration {
 141       font-size: $control-bar-font-size;
 142       display: inline-block;
 143       padding: 0;
 144
 145       .vjs-duration-display {
 146         line-height: calc(#{$control-bar-height} - 1px);
 147       }
 148     }
 149
 150     &.vjs-remaining-time {
 151       display: none;
 152     }
 153   }
 154
 155   .vjs-live-control {
 156     padding: 5px 7px;
 157     border-radius: 3px;
 158     height: fit-content;
 159     margin: auto 10px;
 160     font-weight: bold;
 161     max-width: fit-content;
 162     opacity: 1 !important;
 163     line-height: normal;
 164     position: relative;
 165     top: -1px;
 166
 167     &.synced-with-live-edge {
 168       background: #d7281c;
 169     }
 170
 171     &:not(.synced-with-live-edge) {
 172       cursor: pointer;
 173       background: #80807f;
 174     }
 175   }
 176
 177   .vjs-peertube {
 178     @include margin-right(6px);
 179     @include margin-left(auto);
 180
 181     line-height: $control-bar-height;
 182     text-align: end;
 183     overflow: hidden;
 184     font-size: $control-bar-font-size;
 185
 186     .vjs-peertube-displayed {
 187       display: block;
 188     }
 189
 190     .vjs-peertube-hidden {
 191       display: none;
 192     }
 193
 194     .download-speed-number,
 195     .upload-speed-number,
 196     .peers-number,
 197     .http-fallback {
 198       font-weight: $font-semibold;
 199     }
 200
 201     .download-speed-text,
 202     .upload-speed-text,
 203     .peers-text,
 204     .http-fallback {
 205       @include margin-right(15px);
 206     }
 207
 208     .icon {
 209       @include margin-right(2px);
 210
 211       display: inline-block;
 212       width: 15px;
 213       height: 15px;
 214       background-size: contain;
 215       vertical-align: middle;
 216       background-repeat: no-repeat;
 217       position: relative;
 218       top: -1px;
 219
 220       &.icon-download {
 221         background-image: url('#{$assets-path}/player/images/arrow-down.svg');
 222       }
 223
 224       &.icon-upload {
 225         background-image: url('#{$assets-path}/player/images/arrow-up.svg');
 226       }
 227     }
 228   }
 229
 230   .vjs-next-video,
 231   .vjs-previous-video {
 232     width: $control-bar-button-width - 4px;
 233
 234     &.vjs-disabled {
 235       cursor: default;
 236     }
 237
 238     .icon {
 239       &.icon-next,
 240       &.icon-previous {
 241         mask-image: url('#{$assets-path}/player/images/next.svg');
 242         -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
 243         mask-size: cover;
 244         -webkit-mask-size: cover;
 245
 246         background-color: #fff;
 247         width: $control-bar-next-previous-play-font-size;
 248         height: $control-bar-next-previous-play-font-size;
 249         display: inline-block;
 250       }
 251
 252       &.icon-previous {
 253         transform: rotate(180deg);
 254       }
 255     }
 256   }
 257
 258   .vjs-mute-control {
 259     @include disable-outline;
 260
 261     padding: 0;
 262     width: $control-bar-icon-size;
 263
 264     .vjs-icon-placeholder {
 265       display: inline-block;
 266       width: $control-bar-icon-size;
 267       height: $control-bar-icon-size;
 268       vertical-align: middle;
 269       background: url('#{$assets-path}/player/images/volume.svg') no-repeat;
 270       background-size: contain;
 271
 272       &::before {
 273         content: '';
 274       }
 275     }
 276
 277     &.vjs-vol-0 .vjs-icon-placeholder {
 278       background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat;
 279       background-size: contain;
 280     }
 281   }
 282
 283   .vjs-volume-control {
 284     @include margin(0, 5px, 0, 5px);
 285
 286     width: $control-bar-icon-size;
 287     display: flex;
 288     align-items: center;
 289   }
 290
 291   .vjs-volume-bar {
 292     background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC') no-repeat;
 293     background-size: $control-bar-icon-size $control-bar-volume-slider-height;
 294     height: 100%;
 295     width: 100%;
 296     max-width: $control-bar-icon-size;
 297     max-height: $control-bar-volume-slider-height;
 298     margin: 0;
 299     border-radius: 0;
 300
 301     .vjs-volume-level {
 302       background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC') no-repeat;
 303       background-size: $control-bar-icon-size $control-bar-volume-slider-height;
 304       max-width: $control-bar-icon-size;
 305       height: 100%;
 306       max-height: $control-bar-volume-slider-height;
 307
 308       &::before {
 309         // Remove circle
 310         content: '';
 311       }
 312     }
 313
 314     &:focus {
 315       text-shadow: none;
 316       box-shadow: none;
 317     }
 318   }
 319
 320   .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
 321   .vjs-volume-panel.vjs-volume-panel-horizontal:active,
 322   .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
 323   .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
 324     width: 6em;
 325     transition-property: none;
 326   }
 327
 328   .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
 329     width: 3em;
 330     height: auto;
 331   }
 332
 333   .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
 334     transition-property: none;
 335   }
 336
 337   .vjs-volume-panel {
 338     .vjs-mute-control {
 339       width: 2em;
 340       z-index: 1;
 341       padding: 0;
 342     }
 343
 344     .vjs-volume-control {
 345       display: inline-block;
 346       position: relative;
 347       left: 5px;
 348       opacity: 1;
 349       width: 3em;
 350       height: auto;
 351     }
 352   }
 353
 354   .vjs-settings {
 355     @include disable-outline;
 356
 357     cursor: pointer;
 358     width: $control-bar-button-width;
 359
 360     .vjs-icon-placeholder {
 361       display: inline-block;
 362       height: $control-bar-icon-size - 5px;
 363       width: $control-bar-icon-size - 5px;
 364       vertical-align: middle;
 365       background: url('#{$assets-path}/player/images/settings.svg') no-repeat;
 366       background-size: contain;
 367
 368       &::before {
 369         content: '';
 370       }
 371     }
 372   }
 373
 374   .vjs-peertube-link {
 375     @include disable-outline;
 376     @include disable-default-a-behaviour;
 377     @include ellipsis;
 378
 379     text-decoration: none;
 380     line-height: $control-bar-height;
 381     font-weight: $font-semibold;
 382     padding: 0 5px;
 383     max-width: 150px;
 384   }
 385
 386   .vjs-theater-control {
 387     @include disable-outline;
 388
 389     width: $control-bar-button-width;
 390     cursor: pointer;
 391
 392     .vjs-icon-placeholder {
 393       transition: transform 0.2s ease;
 394       display: inline-block;
 395       width: $control-bar-icon-size;
 396       height: $control-bar-icon-size;
 397       vertical-align: middle;
 398       background: url('#{$assets-path}/player/images/theater.svg') no-repeat;
 399       background-size: contain;
 400
 401       &::before {
 402         content: '';
 403       }
 404     }
 405   }
 406
 407   .vjs-fullscreen-control {
 408     @include disable-outline;
 409
 410     width: $control-bar-button-width;
 411
 412     .vjs-icon-placeholder {
 413       display: inline-block;
 414       width: $control-bar-icon-size;
 415       height: $control-bar-icon-size;
 416       vertical-align: middle;
 417       background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
 418       background-size: contain;
 419
 420       &::before {
 421         content: '';
 422       }
 423     }
 424   }
 425
 426   @media screen and (max-width: $screen-width-750) {
 427     .vjs-theater-control {
 428       display: none;
 429     }
 430
 431     .vjs-peertube {
 432       .icon,
 433       .download-speed-text,
 434       .upload-speed-text {
 435         display: none !important;
 436       }
 437     }
 438   }
 439
 440   @media screen and (max-width: $screen-width-570) {
 441     .vjs-volume-control {
 442       display: none;
 443     }
 444
 445     .vjs-peertube {
 446       padding: 0 !important;
 447
 448       .vjs-peertube-displayed {
 449         display: none !important;
 450       }
 451     }
 452
 453     .vjs-peertube-link {
 454       max-width: 100px;
 455     }
 456
 457     &.vjs-live {
 458       .vjs-duration {
 459         display: none !important;
 460       }
 461
 462       .vjs-peertube {
 463         display: none !important;
 464       }
 465     }
 466   }
 467
 468   @media screen and (max-width: $screen-width-350) {
 469     .vjs-next-video,
 470     .vjs-previous-video {
 471       display: none !important;
 472     }
 473
 474     .vjs-peertube-link {
 475       padding: 0 !important;
 476     }
 477
 478     > button:first-child {
 479       @include margin-left($first-control-bar-element-margin-left-small-width);
 480     }
 481
 482     > button:last-child {
 483       @include margin-right($first-control-bar-element-margin-left-small-width);
 484     }
 485
 486     .vjs-play-control {
 487       @include margin-left(0);
 488
 489       width: 30px;
 490     }
 491
 492     &.vjs-live {
 493       .vjs-current-time {
 494         display: none !important;
 495       }
 496     }
 497   }
 498 }