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