client/src/sass/player/dock.scss

   1 @use 'sass:math';
   2 @use '_variables' as *;
   3 @use '_mixins' as *;
   4 @use './_player-variables' as *;
   5
   6 .video-js.vjs-peertube-skin {
   7   .vjs-dock-text {
   8     @include padding-right(60px);
   9
  10     padding: $dock-padding;
  11     background: linear-gradient(to bottom, rgba(20, 20, 20, .7) 0, rgba(20, 20, 20, 0));
  12   }
  13
  14   .vjs-dock-title {
  15     font-weight: $font-semibold;
  16   }
  17
  18   .vjs-dock-title,
  19   .vjs-dock-description {
  20     text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  21   }
  22
  23   .vjs-dock-description {
  24     font-size: 11px;
  25
  26     .text::before {
  27       @include margin-right(4px);
  28     }
  29
  30     .text::after {
  31       @include margin-left(4px);
  32       transform: scale(-1, 1);
  33     }
  34   }
  35
  36   @media screen and (max-width: $screen-width-750) {
  37     .vjs-dock-text {
  38       font-size: 16px;
  39     }
  40
  41     .vjs-dock-description {
  42       font-size: 9px;
  43     }
  44   }
  45
  46   @media screen and (max-width: $screen-width-570) {
  47     .vjs-dock-text {
  48       font-size: 14px;
  49     }
  50   }
  51
  52   @media screen and (max-width: $screen-width-350) {
  53     .vjs-dock-text {
  54       font-size: 13px;
  55     }
  56   }
  57 }