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