client/src/sass/player/mobile.scss

   1 @use 'sass:math';
   2 @use '_variables' as *;
   3 @use '_mixins' as *;
   4 @use './_player-variables' as *;
   5
   6 /* Special mobile style */
   7
   8 .video-js.vjs-peertube-skin.vjs-is-mobile {
   9   .vjs-control-bar {
  10     .vjs-progress-control .vjs-slider .vjs-play-progress {
  11       // Always display the circle on mobile
  12       &::before {
  13         margin-top: -1px;
  14         opacity: 1;
  15       }
  16     }
  17   }
  18 }
  19
  20 .vjs-mobile-buttons-overlay {
  21   display: none;
  22
  23   position: absolute;
  24   background-color: rgba(0, 0, 0, 0.4);
  25   width: 100%;
  26   height: 100%;
  27   top: 0;
  28
  29   .vjs-user-active,
  30   .vjs-paused {
  31     display: block;
  32   }
  33
  34   .main-button {
  35     font-family: VideoJS;
  36     font-weight: normal;
  37     font-style: normal;
  38     font-size: 5em;
  39     width: fit-content;
  40     margin: auto;
  41     position: relative;
  42     top: calc(50% - 10px);
  43     transform: translateY(-50%);
  44   }
  45 }
  46
  47 .vjs-paused {
  48   .main-button {
  49     &:before {
  50       content: '\f101';
  51     }
  52   }
  53 }
  54
  55 .vjs-playing {
  56   .main-button {
  57     &:before {
  58       content: '\f103';
  59     }
  60   }
  61 }
  62
  63 .vjs-ended {
  64   .main-button {
  65     &:before {
  66       content: '\f116';
  67     }
  68   }
  69 }
  70
  71 .vjs-has-started {
  72
  73   &.vjs-user-active,
  74   &.vjs-paused {
  75     .vjs-mobile-buttons-overlay {
  76       display: block;
  77     }
  78   }
  79
  80   &.vjs-seeking,
  81   &.vjs-scrubbing,
  82   &.vjs-waiting {
  83     .vjs-mobile-buttons-overlay {
  84       display: none;
  85     }
  86   }
  87 }