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