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     a.caption-entry-label {
  50       @include disable-default-a-behaviour;
  51
  52       color: #000;
  53
  54       &:hover {
  55         opacity: 0.8;
  56       }
  57     }
  58
  59     .caption-entry-label {
  60       font-size: 15px;
  61       font-weight: bold;
  62
  63       margin-right: 20px;
  64       width: 150px;
  65     }
  66
  67     .caption-entry-state {
  68       width: 200px;
  69
  70       &.caption-entry-state-create {
  71         color: #39CC0B;
  72       }
  73
  74       &.caption-entry-state-delete {
  75         color: #FF0000;
  76       }
  77     }
  78
  79     .caption-entry-delete {
  80       @include peertube-button;
  81       @include grey-button;
  82     }
  83   }
  84
  85   .no-caption {
  86     text-align: center;
  87     font-size: 15px;
  88   }
  89 }
  90
  91 .submit-container {
  92   text-align: right;
  93
  94   .message-submit {
  95     display: inline-block;
  96     margin-right: 25px;
  97
  98     color: #585858;
  99     font-size: 15px;
 100   }
 101
 102   .submit-button {
 103     @include peertube-button;
 104     @include orange-button;
 105
 106     display: inline-block;
 107
 108     input {
 109       cursor: inherit;
 110       background-color: inherit;
 111       border: none;
 112       padding: 0;
 113       outline: 0;
 114       color: inherit;
 115       font-weight: $font-semibold;
 116     }
 117
 118     .icon.icon-validate {
 119       @include icon(20px);
 120
 121       cursor: inherit;
 122       position: relative;
 123       top: -1px;
 124       margin-right: 4px;
 125       background-image: url('../../../../assets/images/global/validate.svg');
 126     }
 127   }
 128 }
 129
 130 p-calendar {
 131   display: block;
 132
 133   /deep/ {
 134     input,
 135     .ui-calendar {
 136       width: 100%;
 137     }
 138
 139     input {
 140       @include peertube-input-text(100%);
 141       color: #000;
 142     }
 143   }
 144 }
 145
 146 /deep/ {
 147   .root-tabset > .nav {
 148     margin-bottom: 15px;
 149   }
 150
 151   .ng2-tag-input {
 152     border: none !important;
 153   }
 154
 155   .ng2-tags-container {
 156     display: flex;
 157     align-items: center;
 158     border: 1px solid #C6C6C6;
 159     border-radius: 3px;
 160     padding: 5px !important;
 161     height: 40px;
 162   }
 163
 164   tag-input-form {
 165     input {
 166       height: 30px !important;
 167
 168       background-color: var(--mainBackgroundColor) !important;
 169       color: var(--mainForegroundColor) !important;
 170     }
 171   }
 172
 173   tag {
 174     background-color: var(--inputColor) !important;
 175     border-radius: 3px !important;
 176     font-size: 15px !important;
 177     color: var(--mainForegroundColor) !important;
 178     height: 30px !important;
 179     line-height: 30px !important;
 180     margin: 0 5px 0 0 !important;
 181     cursor: default !important;
 182     padding: 0 8px 0 10px !important;
 183
 184     div {
 185       height: 100% !important;
 186     }
 187   }
 188
 189   delete-icon {
 190     cursor: pointer !important;
 191     height: auto !important;
 192     vertical-align: middle !important;
 193     padding-left: 6px !important;
 194
 195     svg {
 196       position: relative;
 197       top: -1px;
 198       height: auto !important;
 199       vertical-align: middle !important;
 200       fill: #585858 !important;
 201     }
 202
 203     &:hover {
 204       transform: none !important;
 205     }
 206   }
 207 }