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

   1 @import '_variables';
   2 @import '_mixins';
   3 @import './_bootstrap-variables';
   4 @import '~bootstrap/scss/functions';
   5 @import '~bootstrap/scss/variables';
   6
   7 label {
   8   display: block;
   9 }
  10
  11 input[type=text],
  12 input[type=email] {
  13   @include peertube-input-text(340px);
  14 }
  15
  16 .modal-body {
  17   text-align: left;
  18
  19   .forgot-password-instructions {
  20     margin-bottom: 20px;
  21   }
  22 }
  23
  24 @media screen and (max-width: #{map-get($container-max-widths, sm)}) {
  25   .modal-body {
  26     #forgot-password-email {
  27       width: 100%;
  28     }
  29   }
  30
  31   .modal-footer .grey-button {
  32     display: none;
  33   }
  34 }
  35
  36 .create-an-account, .forgot-password-button {
  37   color: pvar(--mainForegroundColor);
  38   cursor: pointer;
  39   transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1);
  40
  41   &:hover {
  42     text-decoration: none !important;
  43     opacity: .7 !important;
  44   }
  45 }
  46
  47 .wrapper {
  48   display: flex;
  49   justify-content: space-around;
  50   flex-wrap: wrap;
  51
  52   & > div {
  53     flex: 1 1;
  54   }
  55
  56   .login-form-and-externals {
  57     display: flex;
  58     flex-wrap: wrap;
  59     font-size: 15px;
  60     max-width: 450px;
  61     margin-bottom: 40px;
  62     margin-left: 10px;
  63     margin-right: 10px;
  64
  65     form {
  66       margin: 0;
  67
  68       &, input {
  69         width: 100%;
  70       }
  71
  72       .additionnal-links {
  73         display: block;
  74         text-align: center;
  75         margin-top: 20px;
  76         margin-bottom: 20px;
  77
  78         .forgot-password-button,
  79         .create-an-account {
  80           padding: 4px;
  81           display: inline-block;
  82
  83           color: var(--mainColor);
  84
  85           &:hover, &:active {
  86             color: var(--mainHoverColor);
  87           }
  88         }
  89       }
  90     }
  91
  92     .external-login-blocks {
  93       min-width: 200px;
  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     .signup-link {
 120       display: inline-block;
 121     }
 122   }
 123
 124   .instance-information {
 125     max-width: 600px;
 126     min-width: 350px;
 127     margin-bottom: 40px;
 128     margin-left: 10px;
 129     margin-right: 10px;
 130   }
 131
 132   .terms-anchor {
 133     display: inline;
 134   }
 135
 136   .terms-link {
 137     display: none;
 138   }
 139 }
 140
 141 @mixin columnReverseDisplay {
 142   flex-direction: column-reverse;
 143
 144   .login-form-and-externals,
 145   .instance-information {
 146     width: 100%;
 147     margin-left: 0;
 148     margin-right: 0;
 149     max-width: 450px;
 150     min-width: unset;
 151     align-self: center;
 152   }
 153
 154   .instance-information {
 155     ::ng-deep .accordion {
 156       display: none;
 157     }
 158   }
 159
 160   .terms-anchor {
 161     display: none;
 162   }
 163
 164   .terms-link {
 165     display: inline;
 166   }
 167 }
 168
 169 @media screen and (max-width: breakpoint(md)) {
 170   .wrapper {
 171     @include columnReverseDisplay();
 172   }
 173 }
 174
 175 @media screen and (max-width: breakpoint(md) + $menu-width) {
 176   :host-context(.main-col:not(.expanded)) {
 177     .wrapper {
 178       @include columnReverseDisplay();
 179     }
 180   }
 181 }