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