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