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