client/src/app/+login/login.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 @import '~bootstrap/scss/functions';
   5 @import '~bootstrap/scss/variables';
   6
   7 label {
   8   display: block;
   9   font-size: 18px;
  10   margin-bottom: 5px;
  11 }
  12
  13 input[type=text],
  14 input[type=email] {
  15   @include peertube-input-text(100%);
  16 }
  17
  18 .modal-body {
  19   text-align: start;
  20
  21   .forgot-password-instructions {
  22     margin-bottom: 20px;
  23   }
  24 }
  25
  26 @media screen and (max-width: $small-view) {
  27   .modal-body {
  28     #forgot-password-email {
  29       width: 100%;
  30     }
  31   }
  32
  33   .modal-footer .grey-button {
  34     display: none;
  35   }
  36 }
  37
  38 .wrapper {
  39   display: flex;
  40   justify-content: space-between;
  41   flex-wrap: wrap;
  42   margin: auto;
  43
  44   > div {
  45     flex: 1 1;
  46   }
  47
  48   form {
  49     width: 100%;
  50   }
  51 }
  52
  53 .wrapper,
  54 .alert {
  55   max-width: 1200px;
  56 }
  57
  58 .alert {
  59   margin: 0 auto 30px;
  60 }
  61
  62 .login-form-and-externals {
  63   @include margin-left(10px);
  64   @include margin-right(10px);
  65
  66   display: flex;
  67   flex-wrap: wrap;
  68   justify-content: center;
  69   max-width: 450px;
  70   margin-bottom: 40px;
  71
  72   form {
  73     margin: 0;
  74
  75     input[type=submit] {
  76       width: 100%;
  77     }
  78
  79     .additional-links {
  80       display: flex;
  81       justify-content: center;
  82       margin: 20px 0 30px;
  83
  84       .link-orange {
  85         margin: 0 15px;
  86       }
  87     }
  88   }
  89 }
  90
  91 .external-login-blocks {
  92   min-width: 200px;
  93   text-align: center;
  94
  95   .block-title {
  96     font-weight: $font-semibold;
  97   }
  98
  99   .external-login-block {
 100     @include disable-default-a-behaviour;
 101
 102     cursor: pointer;
 103     border: 1px solid #d1d7e0;
 104     border-radius: 5px;
 105     color: pvar(--mainForegroundColor);
 106     margin: 10px 10px 0 0;
 107     display: flex;
 108     justify-content: center;
 109     align-items: center;
 110     min-height: 35px;
 111     min-width: 100px;
 112
 113     &:hover {
 114       background-color: rgba(209, 215, 224, 0.5);
 115     }
 116   }
 117 }
 118
 119 .instance-information {
 120   @include margin-left(10px);
 121   @include margin-right(10px);
 122
 123   max-width: 600px;
 124   min-width: 350px;
 125   margin-bottom: 40px;
 126 }
 127
 128 .terms-anchor {
 129   display: inline;
 130 }
 131
 132 .terms-link {
 133   display: none;
 134 }
 135
 136 @mixin column-reverse-display {
 137   flex-direction: column-reverse;
 138
 139   .login-form-and-externals,
 140   .instance-information {
 141     @include margin-left(0);
 142     @include margin-right(0);
 143
 144     width: 100%;
 145     max-width: 450px;
 146     min-width: unset;
 147     align-self: center;
 148   }
 149
 150   .instance-information {
 151     ::ng-deep .accordion {
 152       display: none;
 153     }
 154   }
 155
 156   .terms-anchor {
 157     display: none;
 158   }
 159
 160   .terms-link {
 161     display: inline;
 162   }
 163 }
 164
 165 @media screen and (max-width: breakpoint(md)) {
 166   .wrapper {
 167     @include column-reverse-display();
 168   }
 169 }
 170
 171 @media screen and (max-width: breakpoint(md) + $menu-width) {
 172   :host-context(.main-col:not(.expanded)) {
 173     .wrapper {
 174       @include column-reverse-display();
 175     }
 176   }
 177 }