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