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

   1 // Bootstrap grid utilities require functions, variables and mixins
   2 @import 'node_modules/bootstrap/scss/functions';
   3 @import 'node_modules/bootstrap/scss/variables';
   4 @import 'node_modules/bootstrap/scss/mixins';
   5 @import 'node_modules/bootstrap/scss/grid';
   6
   7 @import 'variables';
   8 @import 'mixins';
   9
  10 label,
  11 my-dynamic-form-field ::ng-deep label {
  12   font-weight: $font-regular;
  13   font-size: 100%;
  14 }
  15
  16 .peertube-select-container {
  17   @include peertube-select-container(auto);
  18 }
  19
  20 .title-page a {
  21   color: pvar(--mainForegroundColor);
  22
  23   &:hover {
  24     text-decoration: none;
  25     opacity: .8;
  26   }
  27 }
  28
  29 my-peertube-checkbox {
  30   display: block;
  31   margin-bottom: 1rem;
  32 }
  33
  34 .nav-tabs {
  35   margin-bottom: 15px;
  36 }
  37
  38 .video-edit {
  39   height: 100%;
  40   min-height: 300px;
  41
  42   .form-group {
  43     margin-bottom: 25px;
  44   }
  45
  46   input {
  47     @include peertube-input-text(100%);
  48     display: block;
  49   }
  50
  51   .label-tags + span {
  52     font-size: 15px;
  53   }
  54
  55   .advanced-settings .form-group {
  56     margin-bottom: 20px;
  57   }
  58 }
  59
  60 .captions {
  61
  62   .captions-header {
  63     text-align: right;
  64     margin-bottom: 1rem;
  65
  66     .create-caption {
  67       @include create-button;
  68     }
  69   }
  70
  71   .caption-entry {
  72     display: flex;
  73     height: 40px;
  74     align-items: center;
  75
  76     a.caption-entry-label {
  77       @include disable-default-a-behaviour;
  78
  79       flex-grow: 1;
  80       color: #000;
  81
  82       &:hover {
  83         opacity: 0.8;
  84       }
  85     }
  86
  87     .caption-entry-label {
  88       font-size: 15px;
  89       font-weight: bold;
  90
  91       margin-right: 20px;
  92       width: 150px;
  93     }
  94
  95     .caption-entry-state {
  96       width: 200px;
  97
  98       &.caption-entry-state-create {
  99         color: #39CC0B;
 100       }
 101
 102       &.caption-entry-state-delete {
 103         color: #FF0000;
 104       }
 105     }
 106
 107     .caption-entry-delete {
 108       @include peertube-button;
 109       @include grey-button;
 110     }
 111   }
 112
 113   .no-caption {
 114     text-align: center;
 115     font-size: 15px;
 116   }
 117 }
 118
 119 .submit-container {
 120   text-align: right;
 121
 122   .message-submit {
 123     display: inline-block;
 124     margin-right: 25px;
 125
 126     color: pvar(--greyForegroundColor);
 127     font-size: 15px;
 128   }
 129
 130   .submit-button {
 131     @include peertube-button;
 132     @include orange-button;
 133     @include button-with-icon(20px, 1px);
 134
 135     display: inline-block;
 136
 137     input {
 138       cursor: inherit;
 139       background-color: inherit;
 140       border: none;
 141       padding: 0;
 142       outline: 0;
 143       color: inherit;
 144       font-weight: $font-semibold;
 145     }
 146   }
 147 }
 148
 149 p-calendar {
 150   display: block;
 151
 152   ::ng-deep {
 153     input,
 154     .ui-calendar {
 155       width: 100%;
 156     }
 157
 158     input {
 159       @include peertube-input-text(100%);
 160       color: #000;
 161     }
 162   }
 163 }
 164
 165 // columns for the video
 166 .col-video-edit {
 167   @include make-col-ready();
 168
 169   @include media-breakpoint-up(md) {
 170     @include make-col(7);
 171
 172     & + .col-video-edit {
 173       @include make-col(5);
 174     }
 175   }
 176
 177   @include media-breakpoint-up(xl) {
 178     @include make-col(8);
 179
 180     & + .col-video-edit {
 181       @include make-col(4);
 182     }
 183   }
 184 }
 185
 186 :host-context(.expanded) {
 187   .col-video-edit {
 188     @include media-breakpoint-up(md) {
 189       @include make-col(8);
 190
 191       & + .col-video-edit {
 192         @include make-col(4);
 193       }
 194     }
 195   }
 196 }