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