X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Badmin%2Fconfig%2Fedit-custom-config%2Fedit-custom-config.component.scss;h=df523cedc28094e43164b242858c1d506a01de35;hb=9bc3622320dc43474ce4b60c222ec25e6e657b97;hp=4c9167211cd97b5d2c5ade484242423ee176752f;hpb=5b7c47a781f33bfbeff12c30f5c790bac2378731;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index 4c9167211..df523cedc 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -1,46 +1,147 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
+
+$form-base-input-width: 340px;
+
+form {
+  padding-bottom: 1.5rem;
+}
+
+my-markdown-textarea {
+  display: block;
+  max-width: 500px;
+}
+
+.homepage my-markdown-textarea {
+  display: block;
+  max-width: 90%;
+
+  ::ng-deep textarea {
+    height: 300px !important;
+  }
+}
+
+input[type=text],
+input[type=number] {
+  @include peertube-input-text($form-base-input-width);
 
-input[type=text] {
-  @include peertube-input-text(340px);
   display: block;
 }
 
+.number-with-unit {
+  position: relative;
+  width: min-content;
+
+  input[type=number] + span {
+    position: absolute;
+    top: 0.2em;
+    right: 2.5rem;
+  }
+
+  input[disabled] {
+    background-color: #f9f9f9;
+    pointer-events: none;
+  }
+}
+
 input[type=checkbox] {
   @include peertube-checkbox(1px);
 }
 
 .peertube-select-container {
-  @include peertube-select-container(340px);
+  @include peertube-select-container($form-base-input-width);
+}
+
+my-select-options,
+my-select-custom-value,
+my-select-checkbox {
+  @include responsive-width($form-base-input-width);
+
+  display: block;
 }
 
 input[type=submit] {
   @include peertube-button;
   @include orange-button;
+  @include margin-left(auto);
+
+  display: flex;
 
-  margin-top: 20px;
+  + .form-error {
+    @include margin-left(5px);
 
-  & + .form-error {
     display: inline;
-    margin-left: 5px;
   }
 }
 
 .inner-form-title {
-  text-transform: uppercase;
-  color: $orange-color;
-  font-weight: $font-bold;
-  font-size: 13px;
-  margin-top: 30px;
-  margin-bottom: 10px;
+  @include settings-big-title;
+}
+
+.inner-form-description {
+  font-size: 15px;
 }
 
 textarea {
   @include peertube-textarea(500px, 150px);
 
+  max-width: 100%;
   display: block;
 
-  &#instanceShortDescription {
-    height: 100px;
+  &.small {
+    height: 75px;
+  }
+}
+
+.label-small-info {
+  font-style: italic;
+  margin-bottom: 10px;
+  font-size: 14px;
+}
+
+.disabled-checkbox-extra {
+  &,
+  ::ng-deep label {
+    opacity: .5;
+    pointer-events: none;
+  }
+}
+
+input[disabled] {
+  opacity: 0.5;
+}
+
+ngb-tabset:not(.previews) ::ng-deep {
+  .nav-link {
+    font-size: 105%;
+  }
+}
+
+.submit-error {
+  margin-bottom: 20px;
+}
+
+.alert-signup {
+  width: fit-content;
+  margin-top: 10px;
+}
+
+.callout-container {
+  position: absolute;
+  display: flex;
+  height: 0;
+  width: 100%;
+  justify-content: right;
+
+  .callout-link {
+    @include peertube-button-link;
+
+    position: relative;
+    right: 3.3em;
+    top: .3em;
+    font-size: 90%;
+    color: pvar(--mainColor);
+    background-color: pvar(--mainBackgroundColor);
+    padding: 0 .3em;
   }
 }