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