client/src/app/shared/shared-tables/video-cell.component.scss

   1 @use 'sass:math';
   2 @use '_mixins' as *;
   3 @use '_variables' as *;
   4 @use '_miniature' as *;
   5
   6 .table-video-link {
   7   @include disable-outline;
   8
   9   position: relative;
  10   top: 3px;
  11 }
  12
  13 .table-video {
  14   display: inline-flex;
  15
  16   .table-video-image {
  17     $image-height: 45px;
  18
  19     @include miniature-thumbnail;
  20     @include margin-right(0.5rem);
  21
  22     height: $image-height;
  23     width: #{math.div(16, 9) * $image-height};
  24     border-radius: 2px;
  25     border: 0;
  26     background: transparent;
  27     display: inline-flex;
  28     justify-content: center;
  29     position: relative;
  30
  31     img {
  32       height: 100%;
  33       width: 100%;
  34       border-radius: 2px;
  35     }
  36
  37     span {
  38       color: pvar(--inputPlaceholderColor);
  39     }
  40
  41     .table-video-image-label {
  42       @include static-thumbnail-overlay;
  43
  44       position: absolute;
  45       border-radius: 3px;
  46       font-size: 10px;
  47       padding: 0 3px;
  48       line-height: 1.3;
  49       bottom: 2px;
  50       right: 2px;
  51     }
  52   }
  53
  54   .table-video-text {
  55     display: inline-flex;
  56     flex-direction: column;
  57     justify-content: center;
  58     font-size: 90%;
  59     color: pvar(--mainForegroundColor);
  60     line-height: 1rem;
  61
  62     div .glyphicon {
  63       @include margin-left(0.1rem);
  64
  65       font-size: 80%;
  66       color: #808080;
  67     }
  68
  69     div + div {
  70       color: var(--greyForegroundColor);
  71       font-size: 11px;
  72     }
  73   }
  74 }