client/src/sass/player/peertube-skin.scss

   1 @use 'sass:math';
   2 @use '_variables' as *;
   3 @use '_mixins' as *;
   4 @use './_player-variables' as *;
   5
   6 body {
   7   --embedForegroundColor: #{$primary-foreground-color};
   8
   9   --embedBigPlayBackgroundColor: #{$primary-background-color};
  10 }
  11
  12 @mixin big-play-button-triangle-size($triangle-size) {
  13   width: $triangle-size;
  14   height: $triangle-size;
  15   top: calc(50% - #{math.div($triangle-size, 2)});
  16   left: calc(53% - #{math.div($triangle-size, 2)});
  17 }
  18
  19 .video-js.vjs-peertube-skin {
  20   font-size: $font-size;
  21   color: pvar(--embedForegroundColor);
  22
  23   .vjs-audio-button {
  24     display: none;
  25   }
  26
  27   .vjs-big-play-button {
  28     $big-play-width: 1.2em;
  29     $big-play-height: 1.2em;
  30
  31     @include margin-left(-(math.div($big-play-width, 2)));
  32
  33     outline: 0;
  34     font-size: 6em;
  35
  36     border: 2px solid #fff;
  37     border-radius: 100%;
  38
  39     left: 50%;
  40     top: 50%;
  41     width: $big-play-width;
  42     height: $big-play-height;
  43     line-height: $big-play-height;
  44     margin-top: -(math.div($big-play-height, 2));
  45     transition: 0.2s background-color;
  46
  47     &::-moz-focus-inner {
  48       border: 0;
  49       padding: 0;
  50     }
  51
  52     .vjs-icon-placeholder::before {
  53       @include big-play-button-triangle-size(45px);
  54
  55       content: '';
  56       background-image: url('#{$assets-path}/player/images/big-play-button.svg');
  57     }
  58
  59     &.focus-visible,
  60     &:hover {
  61       background-color: var(--mainColor, #696969);
  62     }
  63   }
  64
  65   // Show poster and controls when playing audio-only content
  66   &.vjs-playing-audio-only-content {
  67     .vjs-poster {
  68       display: block;
  69       visibility: visible;
  70     }
  71
  72     .vjs-control-bar {
  73       opacity: $primary-foreground-opacity-hover;
  74     }
  75   }
  76
  77   // Do not display poster when video is starting
  78   &.vjs-has-autoplay:not(.vjs-has-started) {
  79     .vjs-poster {
  80       opacity: 0;
  81       visibility: hidden;
  82     }
  83   }
  84
  85   // Hide the big play button on autoplay
  86   &.vjs-has-autoplay {
  87     .vjs-big-play-button {
  88       display: none !important;
  89     }
  90   }
  91
  92   .vjs-control-bar,
  93   .vjs-big-play-button,
  94   .vjs-settings-dialog {
  95     background-color: pvar(--embedBigPlayBackgroundColor);
  96   }
  97
  98   .vjs-poster {
  99     outline: 0;
 100   }
 101
 102   @media screen and (max-width: $screen-width-750) {
 103     .vjs-big-play-button {
 104       font-size: 5em;
 105       border-width: 3px;
 106
 107       .vjs-icon-placeholder::before {
 108         @include big-play-button-triangle-size(32px);
 109       }
 110     }
 111   }
 112
 113   @media screen and (max-width: $screen-width-570) {
 114     .vjs-big-play-button {
 115       font-size: 4.5em;
 116       border-width: 2.5px;
 117
 118       .vjs-icon-placeholder::before {
 119         @include big-play-button-triangle-size(27px);
 120       }
 121     }
 122   }
 123
 124   @media screen and (max-width: $screen-width-350) {
 125     .vjs-big-play-button {
 126       font-size: 3em;
 127       border-width: 2px;
 128
 129       .vjs-icon-placeholder::before {
 130         @include big-play-button-triangle-size(20px);
 131       }
 132     }
 133   }
 134
 135   // Theater mode is enabled
 136   &.vjs-theater-enabled {
 137     .vjs-theater-control {
 138       width: 30px;
 139
 140       .vjs-icon-placeholder {
 141         transform: scale(0.8);
 142       }
 143     }
 144   }
 145
 146   // On fullscreen, hide theater control
 147   &.vjs-fullscreen {
 148     .vjs-theater-control {
 149       display: none;
 150     }
 151   }
 152 }
 153
 154 // Play/pause animations
 155 .vjs-has-started .vjs-play-control {
 156   &.vjs-playing {
 157     animation: remove-pause-button 0.25s ease;
 158   }
 159
 160   &.vjs-paused {
 161     animation: add-play-button 0.25s ease;
 162   }
 163
 164   @keyframes remove-pause-button {
 165     0% {
 166       transform: rotate(90deg);
 167     }
 168     100% {
 169       transform: rotate(0deg);
 170     }
 171   }
 172
 173   @keyframes add-play-button {
 174     0% {
 175       transform: rotate(-90deg);
 176     }
 177     100% {
 178       transform: rotate(0deg);
 179     }
 180   }
 181 }
 182
 183 // Error display disabled
 184 .vjs-error:not(.vjs-error-display-enabled) {
 185   .vjs-error-display {
 186     display: none;
 187   }
 188
 189   .vjs-loading-spinner {
 190     display: block;
 191   }
 192 }
 193
 194 // Error display enabled
 195 .vjs-error.vjs-error-display-enabled {
 196   .vjs-error-display {
 197     display: block;
 198   }
 199 }