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   .rewind-button,
  36   .forward-button {
  37     width: fit-content;
  38     height: fit-content;
  39     position: relative;
  40     top: calc(50% - 10px);
  41     transform: translateY(-50%);
  42   }
  43
  44   .main-button,
  45   .rewind-button .icon,
  46   .forward-button .icon {
  47     font-family: VideoJS;
  48     font-weight: normal;
  49     font-style: normal;
  50   }
  51
  52   .main-button {
  53     font-size: 5em;
  54     margin: auto;
  55   }
  56
  57   .rewind-button,
  58   .forward-button {
  59     margin: 0 10px;
  60     position: absolute;
  61     text-align: center;
  62
  63     .icon {
  64       opacity: 0;
  65       animation: fadeInAndOut 1s linear infinite;
  66
  67       &::before {
  68         font-size: 20px;
  69         content: '\f101';
  70         display: inline-block;
  71         width: 16px;
  72       }
  73     }
  74   }
  75
  76   .forward-button {
  77     right: 5px;
  78
  79     .icon {
  80       &::before {
  81         margin-left: -2px;
  82       }
  83
  84       &:nth-child(2) {
  85         animation-delay: 0.25s;
  86       }
  87
  88       &:nth-child(3) {
  89         animation-delay: 0.5s;
  90       }
  91     }
  92   }
  93
  94   .rewind-button {
  95     left: 5px;
  96
  97     .icon {
  98       &::before {
  99         margin-right: -2px;
 100         transform: scaleX(-1);
 101       }
 102
 103       &:nth-child(1) {
 104         animation-delay: 0.5s;
 105       }
 106
 107       &:nth-child(2) {
 108         animation-delay: 0.25s;
 109       }
 110     }
 111   }
 112 }
 113
 114 .vjs-paused {
 115   .main-button {
 116     &::before {
 117       content: '\f101';
 118     }
 119   }
 120 }
 121
 122 .vjs-playing {
 123   .main-button {
 124     &::before {
 125       content: '\f103';
 126     }
 127   }
 128 }
 129
 130 .vjs-ended {
 131   .main-button {
 132     &::before {
 133       content: '\f116';
 134     }
 135   }
 136 }
 137
 138 .vjs-has-started {
 139
 140   &.vjs-user-active,
 141   &.vjs-paused {
 142     .vjs-mobile-buttons-overlay {
 143       display: block;
 144     }
 145   }
 146
 147   &.vjs-scrubbing {
 148     .vjs-mobile-buttons-overlay {
 149       display: none;
 150     }
 151   }
 152
 153   &.vjs-seeking,
 154   &.vjs-waiting,
 155   &.vjs-fast-seeking {
 156     .main-button {
 157       display: none;
 158     }
 159   }
 160 }
 161
 162 @keyframes fadeInAndOut {
 163   0%,
 164   20% {
 165     opacity: 0;
 166   }
 167
 168   60%,
 169   70% {
 170     opacity: 1;
 171   }
 172
 173   100% {
 174     opacity: 0;
 175   }
 176 }