client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 $form-base-input-width: 340px;
   5
   6 form {
   7   padding-bottom: 1.5rem;
   8 }
   9
  10 my-markdown-textarea {
  11   display: block;
  12   max-width: 500px;
  13 }
  14
  15 .homepage my-markdown-textarea {
  16   display: block;
  17   max-width: 90%;
  18
  19   ::ng-deep textarea {
  20     height: 300px !important;
  21   }
  22 }
  23
  24 input[type=text],
  25 input[type=number] {
  26   @include peertube-input-text($form-base-input-width);
  27
  28   display: block;
  29 }
  30
  31 .number-with-unit {
  32   position: relative;
  33   width: fit-content;
  34
  35   input[type=number] + span {
  36     position: absolute;
  37     top: 0.2em;
  38     right: 2.5rem;
  39
  40     @media screen and (max-width: $mobile-view) {
  41       display: none;
  42     }
  43   }
  44
  45   input[disabled] {
  46     background-color: #f9f9f9;
  47     pointer-events: none;
  48   }
  49 }
  50
  51 input[type=checkbox] {
  52   @include peertube-checkbox(1px);
  53 }
  54
  55 .peertube-select-container {
  56   @include peertube-select-container($form-base-input-width);
  57 }
  58
  59 my-select-options,
  60 my-select-custom-value,
  61 my-select-checkbox {
  62   @include responsive-width($form-base-input-width);
  63
  64   display: block;
  65 }
  66
  67 input[type=submit] {
  68   @include peertube-button;
  69   @include orange-button;
  70   @include margin-left(auto);
  71
  72   display: flex;
  73
  74   + .form-error {
  75     @include margin-left(5px);
  76
  77     display: inline;
  78   }
  79 }
  80
  81 .inner-form-title {
  82   @include settings-big-title;
  83 }
  84
  85 .inner-form-description {
  86   font-size: 15px;
  87   margin-bottom: 15px;
  88 }
  89
  90 textarea {
  91   @include peertube-textarea(500px, 150px);
  92
  93   max-width: 100%;
  94   display: block;
  95
  96   &.small {
  97     height: 75px;
  98   }
  99 }
 100
 101 .label-small-info {
 102   font-style: italic;
 103   margin-bottom: 10px;
 104   font-size: 14px;
 105 }
 106
 107 .disabled-checkbox-extra {
 108   &,
 109   ::ng-deep label {
 110     opacity: .5;
 111     pointer-events: none;
 112   }
 113 }
 114
 115 input[disabled] {
 116   opacity: 0.5;
 117 }
 118
 119 ngb-tabset:not(.previews) ::ng-deep {
 120   .nav-link {
 121     font-size: 105%;
 122   }
 123 }
 124
 125 .submit-error {
 126   margin-bottom: 20px;
 127 }
 128
 129 .alert-signup {
 130   width: fit-content;
 131   margin-top: 10px;
 132 }
 133
 134 .callout-container {
 135   position: absolute;
 136   display: flex;
 137   height: 0;
 138   width: 100%;
 139   justify-content: right;
 140
 141   .callout-link {
 142     @include peertube-button-link;
 143
 144     position: relative;
 145     right: 3.3em;
 146     top: .3em;
 147     font-size: 90%;
 148     color: pvar(--mainColor);
 149     background-color: pvar(--mainBackgroundColor);
 150     padding: 0 .3em;
 151   }
 152 }