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,
  37 .forgot-password-button {
  38   color: pvar(--mainForegroundColor);
  39   cursor: pointer;
  40   transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1);
  41
  42   &:hover {
  43     text-decoration: none !important;
  44     opacity: .7 !important;
  45   }
  46 }
  47
  48 .wrapper {
  49   display: flex;
  50   justify-content: space-around;
  51   flex-wrap: wrap;
  52
  53   > div {
  54     flex: 1 1;
  55   }
  56
  57   .login-form-and-externals {
  58     display: flex;
  59     flex-wrap: wrap;
  60     font-size: 15px;
  61     max-width: 450px;
  62     margin-bottom: 40px;
  63     margin-left: 10px;
  64     margin-right: 10px;
  65
  66     form {
  67       margin: 0;
  68
  69       &,
  70       input {
  71         width: 100%;
  72       }
  73
  74       .additionnal-links {
  75         display: block;
  76         text-align: center;
  77         margin-top: 20px;
  78         margin-bottom: 20px;
  79
  80         .forgot-password-button,
  81         .create-an-account {
  82           padding: 4px;
  83           display: inline-block;
  84
  85           color: var(--mainColor);
  86
  87           &:hover,
  88           &:active {
  89             color: var(--mainHoverColor);
  90           }
  91         }
  92       }
  93     }
  94
  95     .external-login-blocks {
  96       min-width: 200px;
  97
  98       .block-title {
  99         font-weight: $font-semibold;
 100       }
 101
 102       .external-login-block {
 103         @include disable-default-a-behaviour;
 104
 105         cursor: pointer;
 106         border: 1px solid #d1d7e0;
 107         border-radius: 5px;
 108         color: pvar(--mainForegroundColor);
 109         margin: 10px 10px 0 0;
 110         display: flex;
 111         justify-content: center;
 112         align-items: center;
 113         min-height: 35px;
 114         min-width: 100px;
 115
 116         &:hover {
 117           background-color: rgba(209, 215, 224, 0.5);
 118         }
 119       }
 120     }
 121
 122     .signup-link {
 123       display: inline-block;
 124     }
 125   }
 126
 127   .instance-information {
 128     max-width: 600px;
 129     min-width: 350px;
 130     margin-bottom: 40px;
 131     margin-left: 10px;
 132     margin-right: 10px;
 133   }
 134
 135   .terms-anchor {
 136     display: inline;
 137   }
 138
 139   .terms-link {
 140     display: none;
 141   }
 142 }
 143
 144 @mixin column-reverse-display {
 145   flex-direction: column-reverse;
 146
 147   .login-form-and-externals,
 148   .instance-information {
 149     width: 100%;
 150     margin-left: 0;
 151     margin-right: 0;
 152     max-width: 450px;
 153     min-width: unset;
 154     align-self: center;
 155   }
 156
 157   .instance-information {
 158     ::ng-deep .accordion {
 159       display: none;
 160     }
 161   }
 162
 163   .terms-anchor {
 164     display: none;
 165   }
 166
 167   .terms-link {
 168     display: inline;
 169   }
 170 }
 171
 172 @media screen and (max-width: breakpoint(md)) {
 173   .wrapper {
 174     @include column-reverse-display();
 175   }
 176 }
 177
 178 @media screen and (max-width: breakpoint(md) + $menu-width) {
 179   :host-context(.main-col:not(.expanded)) {
 180     .wrapper {
 181       @include column-reverse-display();
 182     }
 183   }
 184 }