Use grid to organise settings in admin, my-account

[github/Chocobozzz/PeerTube.git] / client / src / app / +admin / config / edit-custom-config / edit-custom-config.component.scss

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 4c9167211cd97b5d2c5ade484242423ee176752f..8b1cdcbbad7ff50b2f3282886e6e1f0507a8215c 100644 (file)
--- 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,8 +1,24 @@
 @import '_variables';
 @import '_mixins';
 
+$form-base-input-width: 340px;
+
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
+form {
+  padding-bottom: 1.5rem;
+}
+
 input[type=text] {
-  @include peertube-input-text(340px);
+  @include peertube-input-text($form-base-input-width);
+  display: block;
+}
+
+input[type=number] {
+  @include peertube-input-text(315px);
   display: block;
 }
 
@@ -11,14 +27,15 @@ input[type=checkbox] {
 }
 
 .peertube-select-container {
-  @include peertube-select-container(340px);
+  @include peertube-select-container($form-base-input-width);
 }
 
 input[type=submit] {
   @include peertube-button;
   @include orange-button;
 
-  margin-top: 20px;
+  display: flex;
+  margin-left: auto;
 
   & + .form-error {
     display: inline;
@@ -27,12 +44,7 @@ input[type=submit] {
 }
 
 .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;
 }
 
 textarea {
@@ -40,7 +52,35 @@ textarea {
 
   display: block;
 
-  &#instanceShortDescription {
-    height: 100px;
+  &.small {
+    height: 75px;
   }
 }
+
+.label-small-info {
+  font-style: italic;
+  margin-bottom: 10px;
+}
+
+.disabled-checkbox-extra {
+  opacity: .5;
+  pointer-events: none;
+}
+
+my-markdown-textarea ::ng-deep {
+  .root {
+    @media screen and (max-width: 1400px) {
+      flex-direction: column !important;
+    }
+  }
+}
+
+.form-group-right {
+  padding-top: 2px;
+}
+
+ngb-tabset:not(.previews) ::ng-deep {
+  .nav-link {
+    font-size: 105%;
+  }
+}
\ No newline at end of file