client/src/app/+signup/+register/register.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3 @import "./_bootstrap-variables";
   4
   5 @import '~bootstrap/scss/functions';
   6 @import '~bootstrap/scss/variables';
   7
   8 .alert {
   9   font-size: 15px;
  10   text-align: center;
  11 }
  12
  13 .wrapper {
  14   display: flex;
  15   justify-content: space-between;
  16   flex-wrap: wrap;
  17
  18   & > div {
  19     margin-bottom: 40px;
  20
  21     &.register-form {
  22       width: 450px;
  23
  24       @media screen and (max-width: $mobile-view) {
  25         width: 100%;
  26       }
  27     }
  28
  29     &.instance-information {
  30       width: 600px;
  31       margin-bottom: 40px;
  32
  33       .block {
  34         font-size: 15px;
  35         margin-bottom: 15px;
  36         padding: 0 $btn-padding-x;
  37       }
  38
  39       @media screen and (max-width: 1500px) {
  40         width: 450px;
  41       }
  42       @media screen and (max-width: $mobile-view) {
  43         width: 100%;
  44       }
  45
  46       ngb-accordion ::ng-deep {
  47         .btn {
  48           font-weight: $font-semibold !important;
  49           color: pvar(--mainForegroundColor) !important;
  50         }
  51       }
  52     }
  53   }
  54 }
  55
  56 .form-group-terms {
  57   margin: 30px 0;
  58 }
  59
  60 .input-group {
  61   @include peertube-input-group(400px);
  62 }
  63
  64 .input-group-append {
  65   height: 30px;
  66 }
  67
  68 input:not([type=submit]) {
  69   @include peertube-input-text(400px);
  70   display: block;
  71
  72   &#username,
  73   &#name {
  74     width: auto !important;
  75     flex-grow: 1;
  76   }
  77 }
  78
  79 @media screen and (max-width: $mobile-view) {
  80   .form-group-terms,
  81   .input-group,
  82   input:not([type=submit]) {
  83     width: 100%;
  84   }
  85 }
  86
  87 input[type=submit],
  88 button {
  89   @include peertube-button;
  90   @include orange-button;
  91
  92 }
  93
  94 .name-information {
  95   margin-top: 10px;
  96 }
  97
  98 .done-loader {
  99   display: flex;
 100   justify-content: center;
 101   flex-direction: column;
 102   align-items: center;
 103
 104   my-loader {
 105     margin-bottom: 20px;
 106
 107     ::ng-deep .loader div {
 108       border-color: pvar(--mainColor) transparent transparent transparent;
 109     }
 110
 111     & + div {
 112       font-size: 15px;
 113     }
 114   }
 115 }