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