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
   8   .peertube-dock {
   9     --avatarSize: 48px;
  10
  11     @include padding-right(60px);
  12
  13     transition: opacity 0.1s;
  14
  15     display: flex;
  16     align-items: center;
  17     pointer-events: none;
  18     position: absolute;
  19     top: 0;
  20     left: 0;
  21     width: 100%;
  22
  23     font-size: 23px;
  24     padding: $dock-padding;
  25     background: linear-gradient(to bottom, rgba(20, 20, 20, .7) 0, rgba(20, 20, 20, 0));
  26   }
  27
  28   .peertube-dock-avatar {
  29     border-radius: 50%;
  30     margin-right: 10px;
  31     min-width: var(--avatarSize);
  32     min-height: var(--avatarSize);
  33     max-height: var(--avatarSize);
  34     max-height: var(--avatarSize);
  35   }
  36
  37   .peertube-dock-title-description {
  38     // For ellipsis
  39     min-width: 0;
  40   }
  41
  42   .peertube-dock-title {
  43     font-weight: $font-semibold;
  44     letter-spacing: 1px;
  45     line-height: normal;
  46     min-width: 0;
  47   }
  48
  49   .peertube-dock-title,
  50   .peertube-dock-description {
  51     @include ellipsis;
  52
  53     text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  54   }
  55
  56   .peertube-dock-title + .peertube-dock-description {
  57     margin-top: 3px;
  58   }
  59
  60   .peertube-dock-description {
  61     font-size: 11px;
  62     line-height: 1.5;
  63
  64     .text::before {
  65       @include margin-right(4px);
  66     }
  67
  68     .text::after {
  69       @include margin-left(4px);
  70       transform: scale(-1, 1);
  71     }
  72   }
  73
  74   @media screen and (max-width: $screen-width-750) {
  75     .peertube-dock-avatar {
  76       --avatarSize: 40px;
  77     }
  78
  79     .peertube-dock {
  80       font-size: 16px;
  81     }
  82
  83     .peertube-dock-description {
  84       font-size: 9px;
  85     }
  86   }
  87
  88   @media screen and (max-width: $screen-width-570) {
  89     .peertube-dock-avatar {
  90       --avatarSize: 35px;
  91     }
  92
  93     .peertube-dock {
  94       font-size: 14px;
  95     }
  96   }
  97
  98   @media screen and (max-width: $screen-width-350) {
  99     .peertube-dock-avatar {
 100       --avatarSize: 30px;
 101     }
 102
 103     .peertube-dock {
 104       font-size: 13px;
 105     }
 106   }
 107
 108   &.vjs-playing.vjs-user-inactive .peertube-dock {
 109     opacity: 0;
 110     transition: opacity 1s;
 111   }
 112 }