client/src/app/+my-library/my-ownership/my-ownership.component.scss

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