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 .video-edit {
   9   height: 100%;
  10
  11   .form-group {
  12     margin-bottom: 25px;
  13   }
  14
  15   input {
  16     @include peertube-input-text(100%);
  17     display: block;
  18
  19     &[type=checkbox] {
  20       @include peertube-checkbox(1px);
  21     }
  22   }
  23
  24   input, select {
  25     font-size: 15px
  26   }
  27
  28   .form-group-checkbox {
  29     display: flex;
  30     align-items: center;
  31
  32     label {
  33       font-weight: $font-regular;
  34       margin: 0;
  35     }
  36
  37     input {
  38       width: 10px;
  39       margin-right: 10px;
  40     }
  41   }
  42
  43   .label-tags + span {
  44     font-size: 15px;
  45   }
  46
  47   .advanced-settings .form-group {
  48     margin-bottom: 20px;
  49   }
  50 }
  51
  52 .submit-container {
  53   text-align: right;
  54
  55   .message-submit {
  56     display: inline-block;
  57     margin-right: 25px;
  58
  59     color: #585858;
  60     font-size: 15px;
  61   }
  62
  63   .submit-button {
  64     @include peertube-button;
  65     @include orange-button;
  66
  67     display: inline-block;
  68
  69     input {
  70       cursor: inherit;
  71       background-color: inherit;
  72       border: none;
  73       padding: 0;
  74       outline: 0;
  75     }
  76
  77     .icon.icon-validate {
  78       @include icon(20px);
  79
  80       cursor: inherit;
  81       position: relative;
  82       top: -1px;
  83       margin-right: 4px;
  84       background-image: url('../../../../assets/images/global/validate.svg');
  85     }
  86   }
  87 }
  88
  89 p-calendar {
  90   display: block;
  91
  92   /deep/ {
  93     input,
  94     .ui-calendar {
  95       width: 100%;
  96     }
  97
  98     input {
  99       @include peertube-input-text(100%);
 100       color: #000;
 101     }
 102   }
 103 }
 104
 105 /deep/ {
 106   .root-tabset > .nav {
 107     margin-left: 15px;
 108     margin-bottom: 15px;
 109
 110     .nav-link {
 111       display: flex !important;
 112       align-items: center;
 113       height: 30px !important;
 114       padding: 0 15px !important;
 115     }
 116   }
 117
 118   .ng2-tag-input {
 119     border: none !important;
 120   }
 121
 122   .ng2-tags-container {
 123     display: flex;
 124     align-items: center;
 125     border: 1px solid #C6C6C6;
 126     border-radius: 3px;
 127     padding: 5px !important;
 128     height: 40px;
 129   }
 130
 131   tag-input-form {
 132     input {
 133       height: 30px !important;
 134       background-color: #fff !important;
 135     }
 136   }
 137
 138   tag {
 139     background-color: #E5E5E5 !important;
 140     border-radius: 3px !important;
 141     font-size: 15px !important;
 142     color: #000 !important;
 143     height: 30px !important;
 144     line-height: 30px !important;
 145     margin: 0 5px 0 0 !important;
 146     cursor: default !important;
 147     padding: 0 8px 0 10px !important;
 148
 149     div {
 150       height: 100% !important;
 151     }
 152   }
 153
 154   delete-icon {
 155     cursor: pointer !important;
 156     height: auto !important;
 157     vertical-align: middle !important;
 158     padding-left: 6px !important;
 159
 160     svg {
 161       position: relative;
 162       top: -1px;
 163       height: auto !important;
 164       vertical-align: middle !important;
 165       fill: #585858 !important;
 166     }
 167
 168     &:hover {
 169       transform: none !important;
 170     }
 171   }
 172 }