Media queries to use variables when possible

[github/Chocobozzz/PeerTube.git] / client / src / app / +signup / +register / register.component.scss

diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 9405b5293c5eee49d4171bf08c6b313f4b9f7428..e135b5cb4312488b91a7f4bb3845051f01d5c9bb 100644 (file)
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -1,5 +1,9 @@
 @import '_variables';
 @import '_mixins';
+@import "./_bootstrap-variables";
+
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
 
 .alert {
   font-size: 15px;
@@ -13,18 +17,37 @@
 
   & > div {
     margin-bottom: 40px;
-    width: 450px;
 
-    @media screen and (max-width: 500px) {
-      width: auto;
+    &.register-form {
+      width: 450px;
     }
-  }
-}
 
-my-instance-features-table {
-  display: block;
+    &.instance-information {
+      width: 600px;
+      margin-bottom: 40px;
+
+      .block {
+        font-size: 15px;
+        margin-bottom: 15px;
+        padding: 0 $btn-padding-x;
+      }
+
+      @media screen and (max-width: 1500px) {
+        width: 450px;
+      }
+
+      ngb-accordion ::ng-deep {
+        .btn {
+          font-weight: $font-semibold !important;
+          color: var(--mainForegroundColor) !important;
+        }
+      }
+    }
 
-  margin-bottom: 40px;
+    @media screen and (max-width: $mobile-view) {
+      width: auto;
+    }
+  }
 }
 
 .form-group-terms {