client/src/app/videos/+video-edit/shared/video-edit.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .peertube-select-container {
   5   @include peertube-select-container(auto);
   6 }
   7
   8 .title-page a {
   9   color: var(--mainForegroundColor);
  10
  11   &:hover {
  12     text-decoration: none;
  13     opacity: .8;
  14   }
  15 }
  16
  17 my-peertube-checkbox {
  18   display: block;
  19   margin-bottom: 1rem;
  20 }
  21
  22 .video-edit {
  23   height: 100%;
  24   min-height: 300px;
  25
  26   .form-group {
  27     margin-bottom: 25px;
  28   }
  29
  30   input {
  31     @include peertube-input-text(100%);
  32     display: block;
  33   }
  34
  35   .label-tags + span {
  36     font-size: 15px;
  37   }
  38
  39   .advanced-settings .form-group {
  40     margin-bottom: 20px;
  41   }
  42 }
  43
  44 .captions {
  45
  46   .captions-header {
  47     text-align: right;
  48
  49     .create-caption {
  50       @include create-button;
  51     }
  52   }
  53
  54   .caption-entry {
  55     display: flex;
  56     height: 40px;
  57     align-items: center;
  58
  59     a.caption-entry-label {
  60       @include disable-default-a-behaviour;
  61
  62       color: #000;
  63
  64       &:hover {
  65         opacity: 0.8;
  66       }
  67     }
  68
  69     .caption-entry-label {
  70       font-size: 15px;
  71       font-weight: bold;
  72
  73       margin-right: 20px;
  74       width: 150px;
  75     }
  76
  77     .caption-entry-state {
  78       width: 200px;
  79
  80       &.caption-entry-state-create {
  81         color: #39CC0B;
  82       }
  83
  84       &.caption-entry-state-delete {
  85         color: #FF0000;
  86       }
  87     }
  88
  89     .caption-entry-delete {
  90       @include peertube-button;
  91       @include grey-button;
  92     }
  93   }
  94
  95   .no-caption {
  96     text-align: center;
  97     font-size: 15px;
  98   }
  99 }
 100
 101 .submit-container {
 102   text-align: right;
 103
 104   .message-submit {
 105     display: inline-block;
 106     margin-right: 25px;
 107
 108     color: $grey-foreground-color;
 109     font-size: 15px;
 110   }
 111
 112   .submit-button {
 113     @include peertube-button;
 114     @include orange-button;
 115     @include button-with-icon(20px, 1px);
 116
 117     display: inline-block;
 118
 119     input {
 120       cursor: inherit;
 121       background-color: inherit;
 122       border: none;
 123       padding: 0;
 124       outline: 0;
 125       color: inherit;
 126       font-weight: $font-semibold;
 127     }
 128   }
 129 }
 130
 131 p-calendar {
 132   display: block;
 133
 134   ::ng-deep {
 135     input,
 136     .ui-calendar {
 137       width: 100%;
 138     }
 139
 140     input {
 141       @include peertube-input-text(100%);
 142       color: #000;
 143     }
 144   }
 145 }
 146
 147 ::ng-deep {
 148   .root-tabset > .nav {
 149     margin-bottom: 15px;
 150   }
 151
 152   .ng2-tag-input {
 153     border: none !important;
 154   }
 155
 156   .ng2-tags-container {
 157     display: flex;
 158     align-items: center;
 159     border: 1px solid #C6C6C6;
 160     border-radius: 3px;
 161     padding: 5px !important;
 162     height: max-content;
 163   }
 164
 165   tag-input-form {
 166     input {
 167       height: 30px !important;
 168       font-size: 12px !important;
 169
 170       background-color: var(--mainBackgroundColor) !important;
 171       color: var(--mainForegroundColor) !important;
 172     }
 173   }
 174
 175   tag {
 176     background-color: $grey-background-color !important;
 177     color: #000 !important;
 178     border-radius: 3px !important;
 179     font-size: 12px !important;
 180     height: 30px !important;
 181     line-height: 30px !important;
 182     margin: 0 5px 0 0 !important;
 183     cursor: default !important;
 184     padding: 0 8px 0 10px !important;
 185
 186     div {
 187       height: 100% !important;
 188     }
 189   }
 190
 191   delete-icon {
 192     cursor: pointer !important;
 193     height: auto !important;
 194     vertical-align: middle !important;
 195     padding-left: 6px !important;
 196
 197     svg {
 198       position: relative;
 199       top: -1px;
 200       height: auto !important;
 201       vertical-align: middle !important;
 202
 203       path  {
 204         fill: $grey-foreground-color !important;
 205       }
 206     }
 207
 208     &:hover {
 209       transform: none !important;
 210     }
 211   }
 212 }