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     line-height: $control-bar-height;
 157     min-width: 4em;
 158   }
 159
 160   .vjs-peertube {
 161     @include margin-right(6px);
 162     @include margin-left(auto);
 163
 164     line-height: $control-bar-height;
 165     text-align: end;
 166     overflow: hidden;
 167     font-size: $control-bar-font-size;
 168
 169     .vjs-peertube-displayed {
 170       display: block;
 171     }
 172
 173     .vjs-peertube-hidden {
 174       display: none;
 175     }
 176
 177     .download-speed-number,
 178     .upload-speed-number,
 179     .peers-number,
 180     .http-fallback {
 181       font-weight: $font-semibold;
 182     }
 183
 184     .download-speed-text,
 185     .upload-speed-text,
 186     .peers-text,
 187     .http-fallback {
 188       @include margin-right(15px);
 189     }
 190
 191     .icon {
 192       @include margin-right(2px);
 193
 194       display: inline-block;
 195       width: 15px;
 196       height: 15px;
 197       background-size: contain;
 198       vertical-align: middle;
 199       background-repeat: no-repeat;
 200       position: relative;
 201       top: -1px;
 202
 203       &.icon-download {
 204         background-image: url('#{$assets-path}/player/images/arrow-down.svg');
 205       }
 206
 207       &.icon-upload {
 208         background-image: url('#{$assets-path}/player/images/arrow-up.svg');
 209       }
 210     }
 211   }
 212
 213   .vjs-next-video,
 214   .vjs-previous-video {
 215     width: $control-bar-button-width - 4px;
 216
 217     &.vjs-disabled {
 218       cursor: default;
 219     }
 220
 221     .icon {
 222       &.icon-next,
 223       &.icon-previous {
 224         mask-image: url('#{$assets-path}/player/images/next.svg');
 225         -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
 226         mask-size: cover;
 227         -webkit-mask-size: cover;
 228
 229         background-color: #fff;
 230         width: $control-bar-next-previous-play-font-size;
 231         height: $control-bar-next-previous-play-font-size;
 232         display: inline-block;
 233       }
 234
 235       &.icon-previous {
 236         transform: rotate(180deg);
 237       }
 238     }
 239   }
 240
 241   .vjs-mute-control {
 242     @include disable-outline;
 243
 244     padding: 0;
 245     width: $control-bar-icon-size;
 246
 247     .vjs-icon-placeholder {
 248       display: inline-block;
 249       width: $control-bar-icon-size;
 250       height: $control-bar-icon-size;
 251       vertical-align: middle;
 252       background: url('#{$assets-path}/player/images/volume.svg') no-repeat;
 253       background-size: contain;
 254
 255       &::before {
 256         content: '';
 257       }
 258     }
 259
 260     &.vjs-vol-0 .vjs-icon-placeholder {
 261       background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat;
 262       background-size: contain;
 263     }
 264   }
 265
 266   .vjs-volume-control {
 267     @include margin(0, 5px, 0, 5px);
 268
 269     width: $control-bar-icon-size;
 270     display: flex;
 271     align-items: center;
 272   }
 273
 274   .vjs-volume-bar {
 275     background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC') no-repeat;
 276     background-size: $control-bar-icon-size $control-bar-volume-slider-height;
 277     height: 100%;
 278     width: 100%;
 279     max-width: $control-bar-icon-size;
 280     max-height: $control-bar-volume-slider-height;
 281     margin: 0;
 282     border-radius: 0;
 283
 284     .vjs-volume-level {
 285       background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC') no-repeat;
 286       background-size: $control-bar-icon-size $control-bar-volume-slider-height;
 287       max-width: $control-bar-icon-size;
 288       height: 100%;
 289       max-height: $control-bar-volume-slider-height;
 290
 291       &::before {
 292         // Remove circle
 293         content: '';
 294       }
 295     }
 296
 297     &:focus {
 298       text-shadow: none;
 299       box-shadow: none;
 300     }
 301   }
 302
 303   .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
 304   .vjs-volume-panel.vjs-volume-panel-horizontal:active,
 305   .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
 306   .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
 307     width: 6em;
 308     transition-property: none;
 309   }
 310
 311   .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
 312     width: 3em;
 313     height: auto;
 314   }
 315
 316   .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
 317     transition-property: none;
 318   }
 319
 320   .vjs-volume-panel {
 321     .vjs-mute-control {
 322       width: 2em;
 323       z-index: 1;
 324       padding: 0;
 325     }
 326
 327     .vjs-volume-control {
 328       display: inline-block;
 329       position: relative;
 330       left: 5px;
 331       opacity: 1;
 332       width: 3em;
 333       height: auto;
 334     }
 335   }
 336
 337   .vjs-settings {
 338     @include disable-outline;
 339
 340     cursor: pointer;
 341     width: $control-bar-button-width;
 342
 343     .vjs-icon-placeholder {
 344       display: inline-block;
 345       height: $control-bar-icon-size - 5px;
 346       width: $control-bar-icon-size - 5px;
 347       vertical-align: middle;
 348       background: url('#{$assets-path}/player/images/settings.svg') no-repeat;
 349       background-size: contain;
 350
 351       &::before {
 352         content: '';
 353       }
 354     }
 355   }
 356
 357   .vjs-peertube-link {
 358     @include disable-outline;
 359     @include disable-default-a-behaviour;
 360     @include ellipsis;
 361
 362     text-decoration: none;
 363     line-height: $control-bar-height;
 364     font-weight: $font-semibold;
 365     padding: 0 5px;
 366     max-width: 150px;
 367   }
 368
 369   .vjs-theater-control {
 370     @include disable-outline;
 371
 372     width: $control-bar-button-width;
 373     cursor: pointer;
 374
 375     .vjs-icon-placeholder {
 376       transition: transform 0.2s ease;
 377       display: inline-block;
 378       width: $control-bar-icon-size;
 379       height: $control-bar-icon-size;
 380       vertical-align: middle;
 381       background: url('#{$assets-path}/player/images/theater.svg') no-repeat;
 382       background-size: contain;
 383
 384       &::before {
 385         content: '';
 386       }
 387     }
 388   }
 389
 390   .vjs-fullscreen-control {
 391     @include disable-outline;
 392
 393     width: $control-bar-button-width;
 394
 395     .vjs-icon-placeholder {
 396       display: inline-block;
 397       width: $control-bar-icon-size;
 398       height: $control-bar-icon-size;
 399       vertical-align: middle;
 400       background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
 401       background-size: contain;
 402
 403       &::before {
 404         content: '';
 405       }
 406     }
 407   }
 408
 409   @media screen and (max-width: $screen-width-750) {
 410     .vjs-theater-control {
 411       display: none;
 412     }
 413
 414     .vjs-peertube {
 415       .icon,
 416       .download-speed-text,
 417       .upload-speed-text {
 418         display: none !important;
 419       }
 420     }
 421   }
 422
 423   @media screen and (max-width: $screen-width-570) {
 424     .vjs-volume-control {
 425       display: none;
 426     }
 427
 428     .vjs-peertube {
 429       padding: 0 !important;
 430
 431       .vjs-peertube-displayed {
 432         display: none !important;
 433       }
 434     }
 435
 436     .vjs-peertube-link {
 437       max-width: 100px;
 438     }
 439
 440     &.vjs-live {
 441       .vjs-duration {
 442         display: none !important;
 443       }
 444
 445       .vjs-peertube {
 446         display: none !important;
 447       }
 448     }
 449   }
 450
 451   @media screen and (max-width: $screen-width-350) {
 452     .vjs-next-video,
 453     .vjs-previous-video {
 454       display: none !important;
 455     }
 456
 457     .vjs-peertube-link {
 458       padding: 0 !important;
 459     }
 460
 461     > button:first-child {
 462       @include margin-left($first-control-bar-element-margin-left-small-width);
 463     }
 464
 465     > button:last-child {
 466       @include margin-right($first-control-bar-element-margin-left-small-width);
 467     }
 468
 469     .vjs-play-control {
 470       @include margin-left(0);
 471
 472       width: 30px;
 473     }
 474
 475     &.vjs-live {
 476       .vjs-current-time {
 477         display: none !important;
 478       }
 479     }
 480   }
 481 }