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 .nav-tabs {
  23   margin-bottom: 15px;
  24 }
  25
  26 .video-edit {
  27   height: 100%;
  28   min-height: 300px;
  29
  30   .form-group {
  31     margin-bottom: 25px;
  32   }
  33
  34   input {
  35     @include peertube-input-text(100%);
  36     display: block;
  37   }
  38
  39   .label-tags + span {
  40     font-size: 15px;
  41   }
  42
  43   .advanced-settings .form-group {
  44     margin-bottom: 20px;
  45   }
  46 }
  47
  48 .captions {
  49
  50   .captions-header {
  51     text-align: right;
  52
  53     .create-caption {
  54       @include create-button;
  55     }
  56   }
  57
  58   .caption-entry {
  59     display: flex;
  60     height: 40px;
  61     align-items: center;
  62
  63     a.caption-entry-label {
  64       @include disable-default-a-behaviour;
  65
  66       color: #000;
  67
  68       &:hover {
  69         opacity: 0.8;
  70       }
  71     }
  72
  73     .caption-entry-label {
  74       font-size: 15px;
  75       font-weight: bold;
  76
  77       margin-right: 20px;
  78       width: 150px;
  79     }
  80
  81     .caption-entry-state {
  82       width: 200px;
  83
  84       &.caption-entry-state-create {
  85         color: #39CC0B;
  86       }
  87
  88       &.caption-entry-state-delete {
  89         color: #FF0000;
  90       }
  91     }
  92
  93     .caption-entry-delete {
  94       @include peertube-button;
  95       @include grey-button;
  96     }
  97   }
  98
  99   .no-caption {
 100     text-align: center;
 101     font-size: 15px;
 102   }
 103 }
 104
 105 .submit-container {
 106   text-align: right;
 107
 108   .message-submit {
 109     display: inline-block;
 110     margin-right: 25px;
 111
 112     color: $grey-foreground-color;
 113     font-size: 15px;
 114   }
 115
 116   .submit-button {
 117     @include peertube-button;
 118     @include orange-button;
 119     @include button-with-icon(20px, 1px);
 120
 121     display: inline-block;
 122
 123     input {
 124       cursor: inherit;
 125       background-color: inherit;
 126       border: none;
 127       padding: 0;
 128       outline: 0;
 129       color: inherit;
 130       font-weight: $font-semibold;
 131     }
 132   }
 133 }
 134
 135 p-calendar {
 136   display: block;
 137
 138   ::ng-deep {
 139     input,
 140     .ui-calendar {
 141       width: 100%;
 142     }
 143
 144     input {
 145       @include peertube-input-text(100%);
 146       color: #000;
 147     }
 148   }
 149 }
 150
 151 ::ng-deep {
 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 }