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