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