client/src/app/shared/shared-moderation/moderation.scss

   1 @use 'sass:math';
   2 @use '_mixins' as *;
   3 @use '_variables' as *;
   4 @use '_miniature' as *;
   5
   6 .moderation-expanded {
   7   font-size: 90%;
   8
   9   .moderation-expanded-label {
  10     font-weight: $font-semibold;
  11     display: inline-block;
  12     vertical-align: top;
  13     text-align: end;
  14   }
  15
  16   .moderation-expanded-text {
  17     display: inline-flex;
  18     word-wrap: break-word;
  19
  20     ::ng-deep p:last-child {
  21       margin-bottom: 0 !important;
  22     }
  23   }
  24 }
  25
  26 .screenratio {
  27   @include block-ratio($selector: 'div, ::ng-deep iframe') {
  28     width: 100% !important;
  29     height: 100% !important;
  30     left: 0;
  31   };
  32
  33   div {
  34     @include miniature-thumbnail;
  35
  36     display: inline-flex;
  37     justify-content: center;
  38     align-items: center;
  39     color: pvar(--inputPlaceholderColor);
  40   }
  41 }
  42
  43 .chip {
  44   @include chip;
  45 }
  46
  47 my-action-dropdown.show {
  48   ::ng-deep .dropdown-root {
  49     display: block !important;
  50   }
  51 }
  52
  53 .table-video-link {
  54   @include disable-outline;
  55
  56   position: relative;
  57   top: 3px;
  58 }
  59
  60 .table-comment-link,
  61 .table-account-link {
  62   @include disable-outline;
  63
  64   color: var(--mainForegroundColor);
  65
  66   ::ng-deep p:last-child {
  67     margin: 0;
  68   }
  69 }
  70
  71 .table-account-link {
  72   display: flex;
  73   flex-direction: column;
  74 }
  75
  76 .table-video {
  77   display: inline-flex;
  78
  79   .table-video-image {
  80     $image-height: 45px;
  81
  82     @include miniature-thumbnail;
  83     @include margin-right(0.5rem);
  84
  85     height: $image-height;
  86     width: #{math.div(16, 9) * $image-height};
  87     border-radius: 2px;
  88     border: 0;
  89     background: transparent;
  90     display: inline-flex;
  91     justify-content: center;
  92     position: relative;
  93
  94     img {
  95       height: 100%;
  96       width: 100%;
  97       border-radius: 2px;
  98     }
  99
 100     span {
 101       color: pvar(--inputPlaceholderColor);
 102     }
 103
 104     .table-video-image-label {
 105       @include static-thumbnail-overlay;
 106       position: absolute;
 107       border-radius: 3px;
 108       font-size: 10px;
 109       padding: 0 3px;
 110       line-height: 1.3;
 111       bottom: 2px;
 112       right: 2px;
 113     }
 114   }
 115
 116   .table-video-text {
 117     display: inline-flex;
 118     flex-direction: column;
 119     justify-content: center;
 120     font-size: 90%;
 121     color: pvar(--mainForegroundColor);
 122     line-height: 1rem;
 123
 124     div .glyphicon {
 125       @include margin-left(0.1rem);
 126
 127       font-size: 80%;
 128       color: #808080;
 129     }
 130
 131     div + div {
 132       color: var(--greyForegroundColor);
 133       font-size: 11px;
 134     }
 135   }
 136 }