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