client/src/app/+admin/moderation/moderation.component.scss

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