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 .pt-alert-primary {
  55   max-width: 1200px;
  56 }
  57
  58 .pt-alert-primary {
  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   font-size: 15px;
  70   max-width: 450px;
  71   margin-bottom: 40px;
  72
  73   form {
  74     margin: 0;
  75
  76     input[type=submit] {
  77       width: 100%;
  78     }
  79
  80     .additional-links {
  81       display: flex;
  82       justify-content: center;
  83       margin: 20px 0 30px;
  84
  85       .link-orange {
  86         margin: 0 15px;
  87       }
  88     }
  89   }
  90 }
  91
  92 .external-login-blocks {
  93   min-width: 200px;
  94   text-align: center;
  95
  96   .block-title {
  97     font-weight: $font-semibold;
  98   }
  99
 100   .external-login-block {
 101     @include disable-default-a-behaviour;
 102
 103     cursor: pointer;
 104     border: 1px solid #d1d7e0;
 105     border-radius: 5px;
 106     color: pvar(--mainForegroundColor);
 107     margin: 10px 10px 0 0;
 108     display: flex;
 109     justify-content: center;
 110     align-items: center;
 111     min-height: 35px;
 112     min-width: 100px;
 113
 114     &:hover {
 115       background-color: rgba(209, 215, 224, 0.5);
 116     }
 117   }
 118 }
 119
 120 .instance-information {
 121   @include margin-left(10px);
 122   @include margin-right(10px);
 123
 124   max-width: 600px;
 125   min-width: 350px;
 126   margin-bottom: 40px;
 127 }
 128
 129 .terms-anchor {
 130   display: inline;
 131 }
 132
 133 .terms-link {
 134   display: none;
 135 }
 136
 137 @mixin column-reverse-display {
 138   flex-direction: column-reverse;
 139
 140   .login-form-and-externals,
 141   .instance-information {
 142     @include margin-left(0);
 143     @include margin-right(0);
 144
 145     width: 100%;
 146     max-width: 450px;
 147     min-width: unset;
 148     align-self: center;
 149   }
 150
 151   .instance-information {
 152     ::ng-deep .accordion {
 153       display: none;
 154     }
 155   }
 156
 157   .terms-anchor {
 158     display: none;
 159   }
 160
 161   .terms-link {
 162     display: inline;
 163   }
 164 }
 165
 166 @media screen and (max-width: breakpoint(md)) {
 167   .wrapper {
 168     @include column-reverse-display();
 169   }
 170 }
 171
 172 @media screen and (max-width: breakpoint(md) + $menu-width) {
 173   :host-context(.main-col:not(.expanded)) {
 174     .wrapper {
 175       @include column-reverse-display();
 176     }
 177   }
 178 }