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(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
  12   }
  13
  14   .vjs-dock-title,
  15   .vjs-dock-description {
  16     text-shadow: 0 0 2px rgba(0, 0, 0, .5);
  17   }
  18
  19   .vjs-dock-description {
  20     font-size: 11px;
  21
  22     .text::before {
  23       @include margin-right(4px);
  24     }
  25
  26     .text::after {
  27       @include margin-left(4px);
  28       transform: scale(-1, 1);
  29     }
  30   }
  31
  32   @media screen and (max-width: $screen-width-750) {
  33     .vjs-dock-text {
  34       font-size: 16px;
  35     }
  36
  37     .vjs-dock-description {
  38       font-size: 9px;
  39     }
  40   }
  41
  42   @media screen and (max-width: $screen-width-570) {
  43     .vjs-dock-text {
  44       font-size: 14px;
  45     }
  46   }
  47
  48   @media screen and (max-width: $screen-width-350) {
  49     .vjs-dock-text {
  50       font-size: 13px;
  51     }
  52   }
  53 }